/* Himmelfreund – Theme-Stile für WiseCP 5 (Basis WStyle).
   Leitfaden: himmelfreund-wisecp5-paket/CLAUDE.md. Ladereihenfolge: WStyle-CSS → himmelfreund-tokens.css → diese Datei.
   Farben, Schriften und Formen kommen aus den Tokens (hell und dunkel über data-bs-theme). Keine Schatten, keine Verläufe. */

/* Kurznamen für die Tokens – folgen automatisch hell/dunkel */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --hf-ink: var(--bs-heading-color);
  --hf-blue: var(--bs-primary);
  --hf-sky: #00A9E4;                      /* nur dekorativ */
  --hf-sky-tint: var(--hf-surface-accent);
  --hf-orange: var(--hf-accent);
  --hf-orange-tint: var(--bs-warning-bg-subtle);
  --hf-orange-line: var(--bs-warning-border-subtle);
  --hf-orange-text: var(--bs-warning-text-emphasis);
  --hf-text: var(--bs-body-color);
  --hf-muted: var(--bs-secondary-color);
  --hf-line: var(--bs-border-color);
  --hf-surface: var(--bs-tertiary-bg);
  --hf-white: var(--bs-body-bg);          /* Seiten- und Kartenfläche */
  --hf-dark-bg: var(--hf-band-bg);        /* dunkle Flächen (Band, empfohlene Karte, dunkle Buttons) */
  --hf-on-dark: #FFFFFF;
  --hf-font-head: var(--hf-font-heading);
  --hf-radius-btn: var(--hf-radius-control);

  /* WStyle-Variablen auf die Himmelfreund-Tokens umstellen (WStyle leitet daraus seine Bootstrap-Werte ab) */
  --wstyle-primary: var(--bs-primary);
  --wstyle-primary-rgb: var(--bs-primary-rgb);
  --wstyle-secondary: var(--bs-secondary);
  --wstyle-secondary-rgb: var(--bs-secondary-rgb);
  --wstyle-success: var(--bs-success);
  --wstyle-font-family: var(--hf-font-body);
  --wstyle-font-size-base: 1.0625rem;
  --wstyle-body-color: var(--bs-body-color);
  --wstyle-heading-color: var(--bs-heading-color);
  --wstyle-muted-color: var(--bs-secondary-color);
  --wstyle-border-color: var(--bs-border-color);
  --wstyle-body-bg: var(--bs-body-bg);
  --wstyle-surface-bg: var(--bs-body-bg);
  --wstyle-chrome-bg: var(--hf-band-bg);
  --wstyle-chrome-bg-deep: var(--hf-band-bg);
  --wstyle-radius: var(--hf-radius-control);
  --wstyle-on-primary: var(--hf-on-primary);
  --bs-font-sans-serif: var(--hf-font-body);
}
:root, [data-bs-theme="light"] { --hf-sky-line: #A9DDF2; }
[data-bs-theme="dark"] { --hf-sky-line: var(--bs-border-color); }

body { font-family: var(--hf-font-body); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--hf-font-head);
  font-weight: 700;
  color: var(--hf-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Sichtbarer Fokusrahmen (Barrierefreiheit) */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--hf-blue);
  outline-offset: 3px;
}

/* Logo: noch keine helle Variante – im Dunkelmodus und auf dunklen Flächen steht es auf einer hellen Fläche (Leitfaden) */
.site-logo { height: auto; max-height: 52px; width: auto; }
[data-bs-theme="dark"] .site-logo, .chrome-dark .site-logo, [data-bs-theme="dark"] .client-topbar-mark { background: #FFFFFF; padding: 4px 10px; border-radius: var(--hf-radius-sm); box-sizing: content-box; }

/* ---------- Schritt 2: Kopfzeile (Entwurf Startseite) ---------- */
.site-header.hf-header {
  background: var(--hf-white);
  color: var(--hf-ink);
  border-bottom: 1px solid var(--hf-line);
  box-shadow: none;
  backdrop-filter: none;
}
.site-header.hf-header.is-scrolled { background: var(--hf-white); box-shadow: none; }
.site-header.hf-header > nav { padding-top: 16px !important; padding-bottom: 16px !important; }
.hf-header .site-logo { max-height: 52px; }
.hf-header .site-nav .nav-link {
  color: var(--hf-ink);
  font-weight: 500;
  font-size: 16px;
}
.hf-header .site-nav .nav-link:hover, .hf-header .site-nav .nav-link:focus-visible { color: var(--hf-blue); }
.hf-header .header-icon-btn { color: var(--hf-ink); }
.hf-lang { align-items: center; gap: 6px; font-size: 15px; color: var(--hf-muted); }
.hf-lang a { color: var(--hf-muted); text-decoration: none; }
.hf-lang a.is-active { color: var(--hf-ink); font-weight: 600; }
.hf-lang a:hover { color: var(--hf-blue); }
.btn.hf-btn-dark {
  background: var(--hf-dark-bg);
  border: 1px solid var(--hf-dark-bg);
  color: var(--hf-on-dark);
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: none;
}
.btn.hf-btn-dark:hover, .btn.hf-btn-dark:focus-visible { background: var(--hf-blue); border-color: var(--hf-blue); color: var(--hf-on-primary); }

/* ---------- Schritt 2: Fußzeile (Entwurf Startseite) ---------- */
.site-footer.hf-footer {
  background: var(--hf-surface);
  color: var(--hf-text);
  border-top: 4px solid var(--hf-sky);
  font-size: 15px;
}
.hf-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px 40px;
  padding: 72px 0 48px;
}
.hf-footer__brand { display: flex; flex-direction: column; gap: 18px; }
.hf-footer__brand .site-logo { width: 190px; max-height: none; height: auto; }
.hf-footer__brand p { margin: 0; max-width: 30ch; }
.hf-footer__contact { display: grid; gap: 6px; }
.hf-footer__contact a { color: var(--hf-ink); font-weight: 600; text-decoration: none; }
.hf-footer__col h2 { font-size: 17px; margin: 0 0 16px; color: var(--hf-ink); }
.hf-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hf-footer a { color: var(--hf-text); text-decoration: none; }
.hf-footer a:hover { color: var(--hf-blue); text-decoration: underline; }
.hf-footer__bottom { border-top: 1px solid var(--hf-line); font-size: 14px; color: var(--hf-muted); }
.hf-footer__bottom .container {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 32px; padding-top: 22px; padding-bottom: 28px;
}
.hf-footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hf-footer__bottom a { color: var(--hf-ink); font-weight: 600; }
@media (max-width: 575.98px) {
  .hf-footer__grid { padding: 48px 0 32px; gap: 32px; }
}
/* Menü-Knopf auf schmalen Bildschirmen ganz rechts */
.hf-header .drawer-toggle { order: 10; margin-left: 8px !important; }
@media (max-width: 575.98px) {
  .hf-header .site-logo { max-height: 42px; }
  .btn.hf-btn-dark { padding: 8px 12px; font-size: 14px; }
}

/* ---------- Startseite und gemeinsame Bausteine (Leitfaden V2, Schritt 4) ---------- */
.hf-wrap { max-width: var(--hf-width-standard); margin: 0 auto; padding-left: var(--hf-gutter); padding-right: var(--hf-gutter); box-sizing: content-box; }
html[data-content-width="wide"] .hf-container, html[data-content-width="wide"] .hf-wrap { max-width: var(--hf-width-wide); }
html[data-content-width="wider"] .hf-container, html[data-content-width="wider"] .hf-wrap { max-width: var(--hf-width-wider); }
.hf-home main, .hf-page main { font-size: 1.0625rem; color: var(--hf-text); }

/* Buttons der eigenen Bausteine (zusätzlich zu Bootstrap .btn) */
.hf-btn-orange, .hf-btn-white, .hf-btn-blue { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; border-radius: var(--hf-radius-control); padding: 0 22px; }
.hf-btn-orange { background: var(--hf-accent); color: var(--hf-on-accent); }
.hf-btn-white { background: var(--hf-white); color: var(--hf-ink); border: 1px solid var(--hf-line); }
.hf-btn-blue { background: var(--bs-primary); color: var(--hf-on-primary); }
.btn-light { --bs-btn-bg: #FFFFFF; --bs-btn-border-color: #FFFFFF; --bs-btn-color: #0B3556; --bs-btn-hover-bg: #E2F4FB; --bs-btn-hover-color: #0B3556; }

/* Hero (Domain-Check-Block) */
.hf-hero-wrap { padding: 16px 12px 0; }
@media (min-width: 768px) { .hf-hero-wrap { padding: 32px 32px 0; } }
.hf-hero-wrap .hf-hero { max-width: 1376px; margin: 0 auto; padding: 56px 0 48px; }
@media (min-width: 992px) { .hf-hero-wrap .hf-hero { padding: 96px 0 88px; } }
.hf-hero h1 { margin: 0; max-width: 15ch; }
.hf-hero__lead { margin: 24px 0 0; max-width: 46ch; color: var(--hf-text); }
.hf-domainform { margin-top: 40px; max-width: 760px; }
.hf-domainform label { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 10px; color: var(--hf-ink); }
.hf-domainform__row { display: flex; flex-wrap: wrap; gap: 10px; background: var(--hf-white); border-radius: 14px; padding: 8px; border: 1px solid var(--hf-sky-line); }
.hf-domainform__row:focus-within { outline: 3px solid var(--bs-primary); outline-offset: 2px; }
.hf-domainform input { flex: 1 1 240px; min-width: 0; min-height: 48px; border: 0; font: inherit; font-size: 1.25rem; padding: 8px 14px; color: var(--hf-ink); background: transparent; }
.hf-domainform input::placeholder { color: var(--hf-muted); }
.hf-domainform input:focus, .hf-domainform input:focus-visible { outline: none; }
.hf-domainform .btn { flex: 0 0 auto; }
@media (max-width: 575.98px) { .hf-domainform .btn { width: 100%; } }
.hf-hero__tlds { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .9375rem; }
.hf-hero__tlds a { color: var(--hf-text); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.hf-hero__tlds a:hover { text-decoration: underline; }
.hf-hero__tlds strong { color: var(--hf-ink); }

/* Abschnitte */
.hf-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: 40px; }
.hf-section__head h2 { margin: 0; }
.hf-section__head p { margin: 0; color: var(--hf-muted); max-width: 44ch; }
.hf-section--last { padding-bottom: var(--hf-section-gap); }

/* Kachelraster mit Trennlinien (Features-Block) */
.hf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--hf-line); border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card); overflow: hidden; }
.hf-tile { background: var(--hf-white); padding: 32px 28px 30px; text-decoration: none; color: var(--hf-ink); display: flex; flex-direction: column; gap: 14px; min-height: 240px; }
a.hf-tile:hover { background: var(--hf-surface); color: var(--hf-ink); }
.hf-tile__icon { font-size: 32px; line-height: 1; color: var(--hf-sky); }
.hf-tile__title { font-family: var(--hf-font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
.hf-tile__text { color: var(--hf-muted); flex-grow: 1; }
.hf-tile__more { font-weight: 600; color: var(--bs-primary); }
.hf-tile__more::after { content: " →"; }

/* Karten (Agenturen/Portfolio/Partner) */
.hf-cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.hf-card { border-radius: var(--hf-radius-card); padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 14px; }
.hf-card h3 { margin: 0; }
.hf-card p { margin: 0; max-width: 42ch; }
.hf-card .btn { align-self: flex-start; margin-top: 8px; }
.hf-card--dark { background: var(--hf-dark-bg); color: var(--hf-band-text); }
.hf-card--dark h3 { color: var(--hf-on-dark); }
.hf-card--sky { background: var(--hf-surface-accent); border: 1px solid var(--hf-sky-line); color: var(--hf-text); }
@media (max-width: 575.98px) { .hf-card { padding: 28px 22px; } }

/* Zwei Spalten mit Linie oben (Software und KI) */
.hf-cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px; }
.hf-ruled { border-top: 2px solid var(--hf-ink); padding-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.hf-ruled h3 { margin: 0; }
.hf-ruled p { margin: 0; max-width: 48ch; }
.hf-ruled dl { margin: 0; display: grid; gap: 14px; }
.hf-ruled dt { font-weight: 600; color: var(--hf-ink); }
.hf-ruled dd { margin: 2px 0 0; color: var(--hf-muted); }
.hf-ruled > a { font-weight: 600; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }

/* Text mit Bild (Über-uns-Block) */
.hf-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px; align-items: center; }
.hf-split__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.hf-split__media--empty { background: var(--hf-surface-accent); border: 1px dashed var(--hf-sky-line); display: flex; align-items: center; justify-content: center; font-size: 48px; color: var(--hf-sky); }
.hf-split__media--wide { aspect-ratio: 1200 / 671; height: auto; }
.hf-split__text { display: flex; flex-direction: column; gap: 22px; }
.hf-split__text h2 { margin: 0; max-width: 16ch; }
.hf-split__text p { margin: 0; max-width: 52ch; }

/* Häkchenliste */
.hf-checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.hf-checks li { display: flex; gap: 14px; align-items: flex-start; }
.hf-checks svg, .hf-checks i { flex: none; margin-top: 3px; color: var(--bs-primary); }
.hf-photo-placeholder { aspect-ratio: 4 / 3; border-radius: 22px; background: var(--hf-orange-tint); border: 1px dashed var(--hf-orange-line); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--hf-orange-text); font-weight: 600; padding: 24px; }

/* Kontakt-Band */
.hf-contactbox { border: 1px solid var(--hf-line); border-radius: 22px; padding: 56px 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; }
.hf-contactbox__text { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.hf-contactbox__text h2, .hf-contactbox__text p { margin: 0; }
.hf-contactbox__actions { display: flex; flex-direction: column; gap: 10px; font-size: 1.125rem; }
.hf-contactbox__actions > a:not(.btn) { font-weight: 600; text-decoration: none; color: var(--hf-ink); min-height: 44px; display: inline-flex; align-items: center; }
.hf-contactbox__actions .btn { margin-top: 10px; }
@media (max-width: 575.98px) { .hf-contactbox { padding: 32px 22px; } .hf-contactbox__actions { width: 100%; } }

/* Tarifblock auf der Startseite: helle Sektion */
.plans-rack.hf-section .section-head { text-align: left; margin: 0 0 32px; max-width: none; }
.plans-rack.hf-section .section-lead { margin-left: 0; margin-right: 0; text-align: left; color: var(--hf-muted); }
.plans-rack.hf-section .eyebrow { display: none; }

/* ---------- Schritt 4: Inhaltsseiten (views/content/page-detail.tpl, .hf-rich) ---------- */
.hf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--hf-radius-btn); font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.hf-btn--primary { background: var(--hf-blue); color: var(--hf-on-primary); }
.hf-btn--primary:hover { background: var(--hf-dark-bg); color: var(--hf-on-dark); }
.hf-btn--dark { background: var(--hf-dark-bg); color: var(--hf-on-dark); }
.hf-btn--dark:hover { background: var(--hf-blue); color: var(--hf-on-primary); }
.hf-btn--accent { background: var(--hf-orange); color: var(--hf-on-accent); }
.hf-btn--accent:hover { background: var(--hf-accent); color: var(--hf-on-accent); filter: brightness(.95); }
.hf-btn--soft { background: var(--hf-sky-tint); color: var(--hf-ink); border-color: var(--hf-sky-line); }
.hf-btn--white { background: var(--hf-white); color: var(--hf-ink); border-color: var(--hf-line); }
.hf-btn--white:hover { background: var(--hf-sky-tint); color: var(--hf-ink); }

.hf-intro { padding: 24px 32px 0; }
.hf-intro__box { max-width: 1376px; margin: 0 auto; background: var(--hf-sky-tint); border-radius: 28px; padding: 56px 0 52px; }
.hf-intro h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.03em; margin: 14px 0 0; max-width: 18ch; }
.hf-crumbs { font-size: 15px; color: var(--hf-muted); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.hf-crumbs a { color: var(--hf-muted); }
.hf-crumbs span[aria-current] { color: var(--hf-ink); font-weight: 500; }
.hf-crumbs__sep { color: var(--hf-muted); }
@media (max-width: 768px) { .hf-intro { padding: 16px 12px 0; } .hf-intro__box { padding: 40px 0 36px; border-radius: 22px; } }

.hf-pagebody { padding: 64px 0 72px; color: var(--hf-text); }
.hf-page-normal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.hf-page-normal--side { grid-template-columns: minmax(0, 1fr) 280px; }
.hf-page-normal__content { font-size: 18px; line-height: 1.65; }
.hf-page-normal__content:has(.hf-rich) { max-width: none; font-size: 17px; line-height: 1.55; }
.hf-prose { max-width: 72ch; color: var(--hf-text); }
.hf-prose h1, .hf-prose h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; margin: 1.4em 0 .5em; }
.hf-prose h3 { font-size: 22px; margin: 1.4em 0 .5em; }
.hf-prose p, .hf-prose ul, .hf-prose ol { margin: 0 0 1em; }
.hf-prose a { color: var(--hf-blue); text-decoration: underline; text-underline-offset: 3px; }
.hf-prose img { max-width: 100%; height: auto; }
.hf-prose table { border-collapse: collapse; width: 100%; }
.hf-prose td, .hf-prose th { border-bottom: 1px solid var(--hf-line); padding: 8px 10px; text-align: left; }
.hf-prose a.hf-btn { text-decoration: none; }
.hf-prose a.hf-btn--primary { color: var(--hf-on-primary); }
.hf-prose a.hf-btn--dark { color: var(--hf-on-dark); }
.hf-prose a.hf-btn--accent { color: var(--hf-on-accent); }
.hf-prose a.hf-btn--soft, .hf-prose a.hf-btn--white { color: var(--hf-ink); }
.hf-page-normal__side ul { list-style: none; margin: 0; padding: 12px; display: grid; gap: 2px; border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card); position: sticky; top: 100px; }
.hf-page-normal__side a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--hf-ink); text-decoration: none; font-weight: 500; }
.hf-page-normal__side a:hover, .hf-page-normal__side a[aria-current] { background: var(--hf-sky-tint); font-weight: 600; }
@media (max-width: 900px) { .hf-page-normal--side { grid-template-columns: minmax(0, 1fr); } .hf-page-normal__side ul { position: static; } }

.hf-cta { padding: 0 0 96px; }
.hf-pagebody:has(.hf-rich) + .hf-cta { display: none; }
.hf-band { border-radius: var(--hf-radius-card); padding: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; }
.hf-band__text { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.hf-band__text h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin: 0; }
.hf-band__text p { margin: 0; }
.hf-band__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hf-band--dark { background: var(--hf-dark-bg); color: var(--hf-band-text); }
.hf-band--dark h2 { color: var(--hf-on-dark); }
.hf-band--soft { background: var(--hf-sky-tint); border: 1px solid var(--hf-sky-line); color: var(--hf-text); }
@media (max-width: 640px) { .hf-band { padding: 32px 24px; } }

.hf-faq { max-width: 860px; }
.hf-faq__item { border-top: 1px solid var(--hf-line); }
.hf-faq__item:last-child { border-bottom: 1px solid var(--hf-line); }
.hf-faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 56px; padding: 10px 0; font-weight: 600; color: var(--hf-ink); font-size: 18px; }
.hf-faq__item summary::-webkit-details-marker { display: none; }
.hf-faq__item summary::after { content: "+"; font-size: 24px; color: var(--hf-blue); flex: none; }
.hf-faq__item[open] summary::after { content: "–"; }
.hf-faq__body { padding: 0 0 20px; color: var(--hf-text); max-width: 72ch; }

.hf-rich { display: flex; flex-direction: column; gap: 56px; }
.hf-rich h2, .hf-rich h3 { margin-top: 0; }
.hf-rich > h2 { margin: 0 0 -40px; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; }
.hf-rich > p:not(.hf-lead):not(.hf-rich__actions) { margin: 0; max-width: 60ch; }
.hf-rich .hf-lead { font-size: 21px; line-height: 1.5; max-width: 52ch; margin: 0; }
.hf-rich__actions { margin: -32px 0 0 !important; display: flex; gap: 10px; flex-wrap: wrap; }
.hf-rich__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: center; }
.hf-rich__split--rev .hf-rich__visual { order: 2; }
.hf-rich__visual { aspect-ratio: 4 / 3; border-radius: 22px; background: var(--hf-sky-tint); border: 1px dashed var(--hf-sky-line); display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; max-width: 100%; }
.hf-rich__text h2 { font-size: clamp(28px, 3vw, 40px); margin: 0 0 16px; letter-spacing: -0.02em; }
.hf-rich__text p { margin: 0 0 12px; }
.hf-rich__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--hf-line); border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card); overflow: hidden; }
.hf-rich__stats > div { background: var(--hf-white); padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.hf-rich__stats strong { font-family: var(--hf-font-head); font-size: 32px; color: var(--hf-ink); }
.hf-rich__stats span { color: var(--hf-muted); }
.hf-rich__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.hf-rich__steps li { border-top: 2px solid var(--hf-ink); padding-top: 18px; }
.hf-rich__steps li > span { display: block; font-size: 14px; font-weight: 600; color: var(--hf-blue); margin-bottom: 6px; }
.hf-rich__steps h3 { font-size: 22px; margin: 0 0 8px; }
.hf-rich__steps p { margin: 0; }
.hf-rich__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--hf-line); border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card); overflow: hidden; }
.hf-rich__grid > div { background: var(--hf-white); padding: 28px; }
.hf-rich__grid h3 { font-size: 22px; margin: 0 0 8px; }
.hf-rich__grid p { margin: 0 0 8px; }
.hf-rich__meta { font-size: 15px; color: var(--hf-muted) !important; }
.hf-rich__checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 40px; }
.hf-rich__checks li { display: flex; gap: 14px; align-items: flex-start; }
.hf-rich__checks svg { flex: none; margin-top: 3px; color: var(--hf-blue); }
.hf-rich .hf-band { margin: 0; }
.hf-todo { display: inline-block; background: var(--hf-orange-tint); color: var(--hf-orange-text); border: 1px dashed var(--hf-orange-line); border-radius: 6px; padding: 0 6px; font-weight: 600; font-size: .9em; }
.hf-rich__visual .hf-todo { font-size: 15px; }
@media (max-width: 575.98px) { .hf-rich__split, .hf-rich__grid, .hf-rich__checks, .hf-rich__steps { grid-template-columns: 1fr; } }

/* ---------- Schritt 5: Kundenbereich-Rahmen (Entwurf Kundenbereich-Dashboard.html) ---------- */
body[data-client-nav=sidebar] { background: var(--hf-surface); --wstyle-body-bg: var(--hf-surface); }
.client-main { background: var(--hf-surface); }
.client-sidebar.hf-sidebar {
  --wstyle-chrome-bg: var(--hf-white);
  --wstyle-chrome-color: var(--hf-ink);
  --wstyle-chrome-muted: var(--hf-text);
  --wstyle-chrome-border: var(--hf-line);
  background: var(--hf-white);
  color: var(--hf-ink);
  border-inline-end: 1px solid var(--hf-line);
  box-shadow: none;
}
.hf-sidebar .client-sidebar-logo.hf-sidebar-logo { filter: none; max-height: 44px; width: auto; }
.hf-sidebar .client-sidebar-link { color: var(--hf-text); font-weight: 500; padding-block: .7rem; }
.hf-sidebar .client-sidebar-link:hover { color: var(--hf-ink); background: var(--hf-surface); }
.hf-sidebar .client-sidebar-link.active { color: var(--hf-ink); background: var(--hf-sky-tint); font-weight: 600; }
.hf-sidebar .client-sidebar-link.active::before { background: var(--hf-blue); }
.hf-sidebar .client-sidebar-ico { color: inherit; }
.hf-sidebar .client-sidebar-badge { background: var(--hf-accent); color: var(--hf-on-accent); }
.hf-sidebar .client-sidebar-toggle { color: var(--hf-muted); }
.hf-sidebar-help { margin: 0 0 .75rem; padding: 14px .7rem 0; border-top: 1px solid var(--hf-line); font-size: 15px; color: var(--hf-text); white-space: normal; }
.hf-sidebar-help a { color: var(--hf-ink); font-weight: 600; text-decoration: none; }
body:not(.is-sidebar-expanded) .hf-sidebar-help { display: none; }
@media (max-width: 991.98px) { body .hf-sidebar-help { display: block; } }
body.is-sidebar-expanded .hf-sidebar .client-sidebar-mark { display: none; }

.client-topbar { background: var(--hf-white); border-bottom: 1px solid var(--hf-line); box-shadow: none; backdrop-filter: none; }
.client-topbar .header-icon-btn, .client-topbar .btn-soft { background: var(--hf-surface); color: var(--hf-ink); border-color: var(--hf-line); }
.client-topbar-mark { max-height: 40px; height: 40px; width: auto; }
.client-topbar-mark-dark { display: none !important; }
.client-topbar-mark-light { display: inline-block !important; }

/* Karten, Tabellen und Flächen im Kundenbereich: Linien statt Schatten */
.client-main .card, .client-main .panel, .client-main [class*="-panel"], .client-main .dash-card, .client-main .page-doc-sheet {
  box-shadow: none !important;
  border-color: var(--hf-line);
}
.client-main h1, .client-main .h1 { letter-spacing: -0.02em; }

/* ---------- Schritt 5: Kundenbereich-Übersicht ---------- */
.dash-hero { background: none !important; box-shadow: none !important; color: var(--hf-ink); padding-left: 0; padding-right: 0; }
.dash-hero::before, .dash-hero::after { display: none !important; }
.dash-hero .dash-greeting { color: var(--hf-ink); font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.02em; }
.dash-hero .dash-btn-light { background: var(--hf-blue); color: var(--hf-on-primary); border: 1px solid var(--hf-blue); box-shadow: none; border-radius: var(--hf-radius-btn); font-weight: 600; }
.dash-hero .dash-btn-light:hover { background: var(--hf-dark-bg); border-color: var(--hf-ink); color: var(--hf-on-dark); }
.dash-hero .dash-btn-glass { background: var(--hf-white); color: var(--hf-ink); border: 1px solid var(--hf-line); backdrop-filter: none; box-shadow: none; border-radius: var(--hf-radius-btn); font-weight: 600; }
.dash-hero .dash-btn-glass:hover { background: var(--hf-sky-tint); color: var(--hf-ink); }
.dash-balance-card { background: var(--hf-white) !important; border: 1px solid var(--hf-line) !important; color: var(--hf-ink) !important; box-shadow: none !important; backdrop-filter: none !important; border-radius: var(--hf-radius-card); }
.dash-balance-card .dash-balance-label, .dash-balance-card .dash-balance-note { color: var(--hf-muted) !important; }
.dash-balance-card .dash-balance-value { color: var(--hf-ink) !important; }
.dash-balance-card .dash-btn-light { background: var(--hf-sky-tint); color: var(--hf-ink); border: 1px solid var(--hf-sky-line); }
.dash-balance-card .dash-btn-light:hover { background: var(--hf-white); color: var(--hf-ink); }

.dash-stat { box-shadow: none !important; border: 1px solid var(--hf-line) !important; border-radius: var(--hf-radius-card) !important; background: var(--hf-white) !important; }
.dash-stat:hover { border-color: var(--hf-sky-line) !important; transform: none !important; }
.dash-stat-watermark { display: none !important; }
.dash-stat-ico { background: var(--hf-sky-tint) !important; color: var(--hf-blue) !important; }
.dash-stat-value { font-family: var(--hf-font-head); color: var(--hf-ink); }
.dash-stat-label { color: var(--hf-text); font-weight: 600; }
.dash-panel { box-shadow: none !important; border: 1px solid var(--hf-line) !important; border-radius: var(--hf-radius-card) !important; background: var(--hf-white); }
.dash-panel h2, .dash-panel .h5, .dash-panel .h6 { font-family: var(--hf-font-head); color: var(--hf-ink); }

/* Statusetiketten: siehe Schritt 9 (Token-Farben) */
.client-main .badge.bg-secondary-subtle { background: var(--bs-tertiary-bg) !important; color: var(--hf-muted) !important; }
.client-main .badge { font-weight: 600; border-radius: 999px; }

/* ---------- Tarifkarten (components/plan-grid.tpl) ---------- */
.plan-card { box-shadow: none !important; border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card) !important; }
.plan-card.plan-popular { background: var(--hf-dark-bg) !important; border-color: var(--hf-dark-bg); }
.plan-card.plan-popular h1, .plan-card.plan-popular h2, .plan-card.plan-popular h3, .plan-card.plan-popular h4, .plan-card.plan-popular h5 { color: var(--hf-on-dark); }
.plan-card .h-100, .plan-card h4 { letter-spacing: -0.01em; }
.hf-tile__price { font-weight: 600; color: var(--hf-ink); }
.hf-header .nav-dropdown { box-shadow: none !important; border: 1px solid var(--hf-line) !important; border-radius: 14px; }
.hf-header .nav-dropdown .item-title { color: var(--hf-ink); font-weight: 600; }

/* ---------- Rechtstexte (AGB, Datenschutz: .hf-legal) ---------- */
.hf-legal { font-size: 17px; line-height: 1.65; }
.hf-legal h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 2.2em 0 .7em; padding-top: 1.2em; border-top: 1px solid var(--hf-line); }
.hf-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hf-legal ol { padding-left: 1.6em; margin: 0 0 1em; }
.hf-legal ol ol { list-style: lower-alpha; margin: .6em 0; }
.hf-legal li { margin: 0 0 .7em; padding-left: .3em; }
.hf-legal li::marker { color: var(--hf-blue); font-weight: 600; }
.hf-legal ul { padding-left: 1.2em; }
.hf-legal p { margin: 0 0 1em; }
.hf-legal strong { color: var(--hf-ink); }


/* Schrift auf Primär-/Sekundärflächen laut Tokens (im Dunkelmodus dunkle Schrift auf hellem Blau) */
.nav-pills { --bs-nav-pills-link-active-color: var(--hf-on-primary); --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: var(--hf-on-primary); }
.btn-secondary { --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-color: var(--hf-on-primary);
  --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--hf-on-primary); }
[data-bs-theme="light"] .btn-secondary, :root:not([data-bs-theme="dark"]) .btn-secondary { --bs-btn-color: #FFFFFF; --bs-btn-hover-color: #FFFFFF; }

/* Dunkle WStyle-Flächen (Bänder, Newsletter): Überschriften und Eyebrow hell */
.chrome-dark h1, .chrome-dark h2, .chrome-dark h3, .chrome-dark h4, .chrome-dark h5, .chrome-dark h6 { color: var(--hf-on-dark); }
.chrome-dark .eyebrow, .chrome-dark .text-body-secondary { color: var(--hf-band-text) !important; }
/* Karten innerhalb dunkler Bänder bleiben hell (Kartenfläche) – dort normale Schriftfarben */
.chrome-dark .card h1, .chrome-dark .card h2, .chrome-dark .card h3, .chrome-dark .card h4, .chrome-dark .card h5, .chrome-dark .card h6 { color: var(--hf-ink); }
.chrome-dark .card .text-body-secondary { color: var(--hf-muted) !important; }
.chrome-dark .newsletter-kicker { color: var(--hf-band-text); }

/* ---------- Schritt 3 (V2): Topbar, Kopfzeile, Drawer, Fußzeile, Cookie-Hinweis ---------- */
.hf-topbar { background: var(--hf-surface); color: var(--hf-muted); border-bottom: 1px solid var(--hf-line); font-size: 14px; }
.hf-topbar .container { min-height: 36px; }
.hf-topbar .topbar-link { color: var(--hf-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.hf-topbar .topbar-link:hover { color: var(--hf-blue); text-decoration: underline; }
.hf-topbar__claim { color: var(--hf-muted); }

.hf-header .header-icon-btn, .hf-theme-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.hf-header .hf-theme-toggle { color: var(--hf-ink); background: transparent; border: 1px solid var(--hf-line); border-radius: var(--hf-radius-control); }
.hf-header .hf-theme-toggle:hover { background: var(--hf-surface); }

/* Hosting-Menü in drei Spalten */
.hf-header .nav-mega { padding: 20px; }
.hf-header .nav-mega-grid { gap: 8px 28px; }
.hf-header .nav-mega-label { font-family: var(--hf-font-heading); font-weight: 700; font-size: 14px; color: var(--hf-ink); text-transform: none; letter-spacing: 0; padding: 4px 12px 8px; display: block; }
.hf-header .nav-dropdown .dropdown-item { border-radius: var(--hf-radius-control); padding: 10px 12px; min-height: 44px; }
.hf-header .nav-dropdown .dropdown-item:hover, .hf-header .nav-dropdown .dropdown-item:focus-visible { background: var(--hf-surface-accent); }
.hf-header .nav-dropdown .item-desc { color: var(--hf-muted); }
.nav-dropdown { background: var(--hf-white); }

/* Mobiler Drawer */
.site-drawer { background: var(--hf-white); color: var(--hf-text); }
.site-drawer .drawer-link, .site-drawer .drawer-sublink { color: var(--hf-ink); min-height: 44px; }
.site-drawer .drawer-link:hover, .site-drawer .drawer-sublink:hover { background: var(--hf-surface-accent); }
.site-drawer .drawer-group-label { display: block; font-family: var(--hf-font-heading); font-weight: 700; font-size: 14px; color: var(--hf-muted); padding: 12px 12px 4px; }
.site-drawer .hf-btn-dark { width: 100%; justify-content: center; }

/* Fußzeile: Zahlungsarten (aus Theme-Einstellung) */
.hf-footer__pay { display: flex; flex-wrap: wrap; gap: 12px; font-size: 26px; color: var(--hf-muted); }

/* Cookie-Hinweis: überlagert, „Ablehnen“ gleichwertig zu „Akzeptieren“ */
.cookie-notice-card { background: var(--hf-white); color: var(--hf-text); border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card); box-shadow: none; }
.cookie-notice-text { color: var(--hf-text); font-size: 15px; }
.cookie-notice-text a { color: var(--hf-blue); }
.cookie-btn { min-height: 44px; border-radius: var(--hf-radius-control); font-weight: 600; padding: 0 18px; }
.cookie-btn-solid, .cookie-btn-ghost[data-cookie-action="reject"] { background: var(--bs-primary); color: var(--hf-on-primary); border: 1px solid var(--bs-primary); }
.cookie-btn-solid:hover, .cookie-btn-ghost[data-cookie-action="reject"]:hover { background: var(--hf-primary-hover); border-color: var(--hf-primary-hover); color: var(--hf-on-primary); }
.cookie-btn-bare { color: var(--hf-blue); text-decoration: underline; text-underline-offset: 3px; background: transparent; border: 0; }
.site-footer.hf-footer::before { display: none; }   /* kein Punktmuster (keine Verläufe/Muster laut Leitfaden) */
.hf-footer__brand .site-logo-dark { width: 190px; height: auto; }
.scroll-top { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-color: var(--hf-on-primary); opacity: 1; }

/* ---------- Schritt 5 (V2): Tarifseiten (views/products/category.tpl, components/plan-grid.tpl) ---------- */
/* Einstiegsfläche: hell statt Bild/Dunkel */
.page-hero.chrome-dark { background: var(--hf-surface-accent); color: var(--hf-text); border-radius: var(--hf-radius-hero); margin: 16px 12px 0; padding: 48px 0 44px; }
@media (min-width: 768px) { .page-hero.chrome-dark { margin: 24px 32px 0; padding: 64px 0 56px; } }
.page-hero.chrome-dark::before, .page-hero.chrome-dark::after { display: none; }
.page-hero.chrome-dark .page-hero-title { color: var(--hf-ink); margin-top: 8px; }
.page-hero.chrome-dark .page-hero-lead { color: var(--hf-text); max-width: 56ch; font-size: clamp(1.125rem, 1.3vw, 1.25rem); }
.page-hero.chrome-dark .breadcrumb-item, .page-hero.chrome-dark .breadcrumb-item a { color: var(--hf-muted); }
.page-hero.chrome-dark .breadcrumb-item.active { color: var(--hf-ink); font-weight: 500; }
.page-hero.chrome-dark .breadcrumb-item + .breadcrumb-item::before { color: var(--hf-muted); }
.hf-cat .eyebrow { display: none; }
.hf-cat .section-head { text-align: left; max-width: none; margin-left: 0; }
.hf-cat .section-lead { margin-left: 0; color: var(--hf-muted); }

/* Preisbox */
.plan-card { border-radius: var(--hf-radius-price) !important; background: var(--hf-white) !important; }
.plan-card.plan-popular { background: var(--hf-white) !important; border: 2px solid var(--bs-primary) !important; }
.plan-card.plan-popular h1, .plan-card.plan-popular h2, .plan-card.plan-popular h3, .plan-card.plan-popular h4, .plan-card.plan-popular h5 { color: var(--hf-ink); }
.plan-card.plan-popular, .plan-card.plan-popular .text-body-secondary, .plan-card.plan-popular .plan-features { color: var(--hf-text) !important; }
.plan-card .plan-badge { top: -13px; }
.hf-recommended { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--hf-accent); color: var(--hf-on-accent); font-size: .8125rem; font-weight: 700; }
.hf-plan-title { font-size: 1.5rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hf-plan-code { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--hf-surface-accent); color: var(--bs-primary); font-family: var(--hf-font-body); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.plan-card .plan-features li { color: var(--hf-text); }
.plan-card .plan-features i { color: var(--bs-primary); }
.hf-price-note { margin: 20px 0 0; text-align: center; font-size: .9375rem; color: var(--hf-muted); }

/* In jedem Tarif enthalten: Raster mit Trennlinien */
.category-content { padding-top: 0; }
.hf-included h2 { margin: 0 0 32px; }
.hf-included__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--hf-line); border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card); overflow: hidden; }
.hf-included__grid > div { background: var(--hf-white); padding: 26px 24px; }
.hf-included__grid h3 { font-size: 1.1875rem; margin: 0 0 8px; }
.hf-included__grid p { margin: 0; color: var(--hf-muted); }

/* Querverweis-Band */
.hf-crosssell { margin-top: var(--hf-section-gap); background: var(--hf-surface-accent); border: 1px solid var(--hf-sky-line); border-radius: var(--hf-radius-card); padding: 36px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; }
.hf-crosssell h2 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); margin: 0 0 6px; }
.hf-crosssell p { margin: 0; }
.hf-crosssell__links { display: flex; flex-wrap: wrap; gap: 10px; }
.hf-crosssell .btn-soft { background: var(--hf-white); border: 1px solid var(--hf-sky-line); color: var(--hf-ink); }

/* SEO-Textbereich: links mitlaufend „Auf dieser Seite“ + „Passend dazu“, rechts Text */
.hf-seo { margin-top: var(--hf-section-gap); display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 992px) { .hf-seo { grid-template-columns: 260px minmax(0, 760px); gap: 64px; } }
.hf-seo__aside { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 992px) { .hf-seo__aside { position: sticky; top: 110px; align-self: start; } }
.hf-seo__label { font-family: var(--hf-font-heading); font-weight: 700; color: var(--hf-ink); margin: 0 0 10px; }
.hf-seo__aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--hf-line); }
.hf-seo__aside a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; color: var(--hf-text); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.hf-seo__aside a:hover { color: var(--bs-primary); border-left-color: var(--bs-primary); }
.hf-seo__text h2 { scroll-margin-top: 110px; }
.hf-seo__text h2:first-child { margin-top: 0; }
.hf-seo__text ul { padding-left: 1.2em; }

/* Fragen (details/summary) */
.hf-faq-section { background: transparent !important; }
#faq { scroll-margin-top: 110px; }
@media (min-width: 992px) { .hf-faq-section .row { --bs-gutter-x: 64px; } }
.hf-faq-section .col-lg-4 { flex: 0 0 auto; }
@media (min-width: 992px) { .hf-faq-section .col-lg-4 { width: calc(260px + 32px); } .hf-faq-section .col-lg-8 { width: auto; flex: 1 1 0; max-width: 760px; } }
.hf-faq-section .section-head h2 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.hf-faq__body p:last-child { margin-bottom: 0; }
/* Kein Bild/Scrim in der Einstiegsfläche (keine Verläufe, Lesbarkeit) */
.page-hero.chrome-dark .page-hero-media, .page-hero.chrome-dark .page-hero-scrim { display: none !important; }
.page-hero.chrome-dark { position: relative; overflow: hidden; }
/* Preisbereich der empfohlenen Karte ohne dunkle Fläche */
.plan-card.plan-popular .price-band { background: var(--hf-surface-accent) !important; }
.plan-card.plan-popular .price-band .price-now, .plan-card.plan-popular .price-band { color: var(--hf-ink) !important; }
.plan-card.plan-popular .billing-compare { color: var(--bs-primary) !important; }
/* Überschrift und Einleitung der Einstiegsfläche immer sofort sichtbar (keine Einblend-Animation) */
.page-hero .reveal, .page-hero .reveal-2, .page-hero .reveal-3 { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ---------- Schritt 6 (V2): Domainsuche (views/domain.tpl) ---------- */
.hf-domainpage .eyebrow { display: none; }
.hf-domainpage .section-head { text-align: left; margin-left: 0; max-width: none; }
.hf-domainpage .section-lead { margin-left: 0; color: var(--hf-muted); }
.hf-domainpage .domain-tool .input-group, .hf-domainpage .domain-search { border-radius: 14px; }
.hf-domainpage #domain-reg-query, .hf-domainpage #domain-tr-query { min-height: 56px; font-size: 1.25rem; border-color: var(--hf-sky-line); }
.hf-domainpage .domain-tool form .btn-primary[type="submit"] { --bs-btn-bg: var(--hf-accent); --bs-btn-border-color: var(--hf-accent); --bs-btn-color: var(--hf-on-accent); --bs-btn-hover-bg: var(--hf-accent); --bs-btn-hover-border-color: var(--hf-accent); --bs-btn-hover-color: var(--hf-on-accent); min-height: 56px; padding-inline: 26px; }
.hf-domainpage .domain-tool .card { box-shadow: none !important; border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card); }
.hf-domainpage #tld-pricing { background: var(--hf-surface) !important; }
.hf-domainpage .wcp-table-wrap, .hf-domainpage #tld-pricing .table-responsive { border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card); background: var(--hf-white); }
.hf-domainpage #tld-pricing th { color: var(--hf-ink); font-weight: 600; }
.hf-domain-content .hf-included { margin-top: 0; }

/* ---------- Schritt 7 (V2): Bestellablauf (layouts/checkout.tpl, views/checkout/*) ---------- */
/* Seitenleiste (Rail/Karte): helle Fläche statt Primärblau mit Verlauf */
.checkout-split-aside {
  --rail-fg: var(--hf-text); --rail-fg-muted: var(--hf-muted); --rail-fg-faint: var(--hf-muted);
  --rail-line: var(--hf-line); --rail-line-strong: var(--hf-line);
  --rail-fill: var(--hf-white); --rail-fill-strong: var(--hf-surface-accent); --rail-discount: var(--bs-success-text-emphasis);
  --bs-secondary-color: var(--hf-muted);
  --bs-success-text-emphasis: var(--hf-success-text, var(--bs-success)); --bs-success-bg-subtle: var(--hf-surface-accent); --bs-success-border-subtle: var(--hf-sky-line);
  color: var(--hf-text) !important; background-color: var(--hf-surface) !important; background-image: none !important;
  border-inline-start: 1px solid var(--hf-line) !important;
}
.checkout-split-aside :is(h1,h2,h3,h4,h5,h6) { color: var(--hf-ink); }
.checkout-split-aside .btn-primary, .checkout-split-aside .btn-light { --bs-btn-bg: var(--bs-primary) !important; --bs-btn-border-color: var(--bs-primary) !important; --bs-btn-color: var(--hf-on-primary) !important; --bs-btn-hover-bg: var(--hf-primary-hover) !important; --bs-btn-hover-border-color: var(--hf-primary-hover) !important; --bs-btn-hover-color: var(--hf-on-primary) !important; background-color: var(--bs-primary) !important; color: var(--hf-on-primary) !important; border-color: var(--bs-primary) !important; }
.checkout-split-aside .btn-soft, .checkout-split-aside .btn-outline-light { background-color: var(--hf-white) !important; color: var(--hf-ink) !important; border: 1px solid var(--hf-line) !important; }
.checkout-shell .card, .checkout-shell .option-card { box-shadow: none !important; }
.checkout-shell .card { border-color: var(--hf-line); border-radius: var(--hf-radius-card); }
.checkout-shell .option-card { border-color: var(--hf-line); border-radius: var(--hf-radius-control); }
.checkout-shell .option-card:has(input:checked), .checkout-shell .option-card.is-active, .checkout-shell .option-card.active { border: 2px solid var(--bs-primary); background: var(--hf-surface-accent); }
.checkout-shell .eyebrow { color: var(--hf-muted); }
/* Kopfzeile des Bestellablaufs mit Schritten */
.checkout-shell-header { background: var(--hf-white); border-bottom: 1px solid var(--hf-line); }
.checkout-step { color: var(--hf-muted); font-weight: 500; }
.checkout-step.is-active { color: var(--hf-ink); font-weight: 700; }
.checkout-step.is-active .checkout-step-num { background: var(--bs-primary); color: var(--hf-on-primary); border-color: var(--bs-primary); }
.checkout-step.is-done .checkout-step-num { background: var(--hf-surface-accent); color: var(--bs-primary); border-color: var(--hf-sky-line); }
/* Überweisungsdaten: lange Werte (IBAN) auf dem Handy umbrechen statt abschneiden */
.checkout-shell td, .checkout-shell dd, .checkout-shell .num-tabular { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- Schritt 8 (V2): Anmeldeseiten (layouts/auth.tpl, views/auth/*) ---------- */
.auth-stage.hf-auth-stage { background: var(--hf-surface-accent) !important; background-image: none !important; color: var(--hf-text); border-inline-end: 1px solid var(--hf-sky-line); }
.hf-auth-stage .auth-stage-title { font-family: var(--hf-font-heading); font-weight: 700; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.1; color: var(--hf-ink); }
.hf-auth-stage .auth-stage-text, .hf-auth-stage .auth-stage-foot { color: var(--hf-text); }
.hf-auth-stage .auth-stage-foot a { color: var(--bs-primary); }
.hf-auth-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.hf-auth-points li { display: flex; gap: 10px; align-items: flex-start; color: var(--hf-ink); }
.hf-auth-points i { color: var(--bs-primary); font-size: 1.25rem; line-height: 1; margin-top: 2px; }
.hf-auth-help { margin: 24px 0 0; color: var(--hf-text); }
.hf-auth-help a { color: var(--hf-ink); font-weight: 600; text-decoration: none; }
.hf-auth-stage .site-logo { max-height: 52px; }
.auth-form { background: var(--hf-white); }
.auth-form h1, .auth-form .h1, .auth-form .auth-title { font-family: var(--hf-font-heading); color: var(--hf-ink); }
.auth-form .form-control { min-height: 48px; }
.auth-form .btn { min-height: 48px; }
.hf-auth-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 16px 20px 24px; font-size: .9375rem; }
.hf-auth-legal a { color: var(--hf-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.hf-auth-legal a:hover { color: var(--bs-primary); text-decoration: underline; }
.hf-auth-stage .auth-stage-copy, .hf-auth-stage .auth-stage-copy * { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ---------- Schritt 9 (V2): Kundenbereich ---------- */
/* Statusetiketten nach Leitfaden: Erfolg, Warnung, Fehler, neutral, Info – mit Token-Kontrast in hell und dunkel */
.badge.bg-info-subtle, .badge.text-info-emphasis { background: var(--bs-info-bg-subtle) !important; color: var(--bs-info-text-emphasis) !important; }
.badge.bg-success-subtle { background: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; }
.badge.bg-warning-subtle { background: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
.badge.bg-danger-subtle { background: var(--bs-danger-bg-subtle) !important; color: var(--bs-danger-text-emphasis) !important; }
.hf-sidebar .hf-cancel-link { color: var(--bs-danger-text-emphasis); font-weight: 600; }
.hf-sidebar .hf-cancel-link:hover { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
/* Etiketten sind kleine Schrift: Kontrast >= 4,5:1 erzwingen (leicht angepasste Schriftfarben gegenüber den Tokens) */
:root .badge.bg-success-subtle, [data-bs-theme="light"] .badge.bg-success-subtle { color: #17663F !important; }
[data-bs-theme="dark"] .badge.bg-success-subtle { color: #6FD3A2 !important; }
[data-bs-theme="dark"] .badge.bg-info-subtle, [data-bs-theme="dark"] .badge.text-info-emphasis { color: #8FCDF2 !important; }
[data-bs-theme="dark"] .badge.bg-warning-subtle { color: #F8C978 !important; }
/* Listen-Kacheln (Dienste, Domains, Rechnungen): ohne große Hintergrund-Symbole und Schatten, Linien statt Farbbalken */
.list-tile-watermark { display: none !important; }
.list-tile { box-shadow: none !important; border: 1px solid var(--hf-line) !important; border-radius: var(--hf-radius-card) !important; background: var(--hf-white) !important; }
.list-tile.is-active { border: 2px solid var(--bs-primary) !important; }
.list-tile::before, .list-tile::after { display: none !important; }
/* Übersicht: Einblend-Animation aus, damit Inhalte sofort lesbar sind */
.dash-rise { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ---------- Schritt 10 (V2): Rechnung ---------- */
.invoice-fact dt { text-transform: none; letter-spacing: 0; font-size: .875rem; color: var(--hf-muted); word-break: normal; overflow-wrap: normal; hyphens: auto; }
.invoice-party-label { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--hf-muted); }
.invoice-party-name { color: var(--hf-ink); }
.invoice-table th { color: var(--hf-ink); font-weight: 600; text-transform: none; letter-spacing: 0; }
@media print {
  .client-sidebar, .client-topbar, .client-footer, .scroll-top, .cookie-notice, [data-cookie-notice] { display: none !important; }
  body { background: #FFFFFF !important; }
}

/* ===== Schritt 11: Kontakt, Blog, Wissensdatenbank ===== */
.contact-office-addr { white-space: normal; }
.hf-contact-privacy a { color: var(--hf-blue); text-decoration: underline; text-underline-offset: 3px; }


/* Lange Texte in Blog und Hilfe: 18 px, Zeilenhöhe 1,7, höchstens 760 px */
.kb-prose { font-size: 18px; line-height: 1.7; max-width: 760px; color: var(--hf-text); }
.kb-prose h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; margin: 1.6em 0 .5em; }
.kb-prose h3 { font-size: 21px; line-height: 1.3; margin: 1.4em 0 .5em; border: 0; padding: 0; }
.kb-prose p, .kb-prose ul, .kb-prose ol { margin: 0 0 1em; }
.kb-prose a { color: var(--hf-blue); text-decoration: underline; text-underline-offset: 3px; }
.kb-prose blockquote { border-left: 4px solid var(--hf-sky, #00A9E4); margin: 1.4em 0; padding: 4px 0 4px 20px; color: var(--hf-ink); }
.kb-prose pre { background: var(--bs-tertiary-bg); border: 1px solid var(--hf-line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 15px; }
.kb-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 16px; display: block; overflow-x: auto; }
.kb-prose th, .kb-prose td { border-bottom: 1px solid var(--hf-line); padding: 10px 12px; text-align: left; }
.kb-prose th { color: var(--hf-ink); font-weight: 600; }
.kb-prose img { max-width: 100%; height: auto; border-radius: 18px; }
.page-hero-title { overflow-wrap: anywhere; hyphens: auto; }

/* Inhalts-Baukasten (Entwurf V2-Inhalts-Baukasten.html) – ergänzt die .hf-rich-Bausteine aus Schritt 4.
   Jeder Baustein steht für sich und kann weggelassen werden. Vorlagen: docs/baukasten.html im Theme. */
.hf-rich__quote { margin: 0; display: flex; gap: 24px; align-items: flex-start; background: var(--hf-sky-tint); border: 1px solid var(--hf-sky-line); border-radius: var(--hf-radius-card); padding: 32px; }
.hf-rich__quote img, .hf-rich__quote .hf-rich__photo { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; }
.hf-rich__quote blockquote { margin: 0; font-family: var(--hf-font-head); font-size: clamp(20px, 2vw, 24px); line-height: 1.35; color: var(--hf-ink); }
.hf-rich__quote figcaption { margin-top: 10px; font-size: 15px; color: var(--hf-muted); }
.hf-rich__photo { display: flex; align-items: center; justify-content: center; background: var(--hf-white); border: 1px dashed var(--hf-sky-line); font-size: 13px; color: var(--hf-muted); }
.hf-rich__case { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card); padding: 24px; }
.hf-rich__case h3 { font-size: 24px; margin: 4px 0 16px; }
.hf-rich__case dl { margin: 0; display: grid; gap: 12px; }
.hf-rich__case dt { font-weight: 600; color: var(--hf-ink); }
.hf-rich__case dd { margin: 0; }
.hf-rich__eyebrow { display: block; font-size: 14px; font-weight: 600; color: var(--hf-blue); margin: 0; }
.hf-rich__table { overflow-x: auto; border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card); }
.hf-rich__table table { width: 100%; border-collapse: collapse; min-width: 560px; }
.hf-rich__table th, .hf-rich__table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--hf-line); vertical-align: top; }
.hf-rich__table tr:last-child td { border-bottom: 0; }
.hf-rich__table thead th { background: var(--hf-sky-tint); color: var(--hf-ink); font-weight: 600; }
.hf-rich__table tbody th { font-weight: 600; color: var(--hf-ink); }
.hf-rich__checklist { border: 2px solid var(--hf-blue); border-radius: var(--hf-radius-card); padding: 28px 32px; }
.hf-rich__checklist h3 { font-size: 22px; margin: 0 0 14px; }
.hf-rich__checklist ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.hf-rich__checklist li { position: relative; padding-left: 30px; }
.hf-rich__checklist li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 14px; height: 8px; border-left: 2px solid var(--hf-blue); border-bottom: 2px solid var(--hf-blue); transform: rotate(-45deg); }
.hf-rich__plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; background: var(--hf-sky-tint); border: 1px solid var(--hf-sky-line); border-radius: var(--hf-radius-card); padding: 24px 28px; }
.hf-rich__plan strong { display: block; font-family: var(--hf-font-head); font-size: 22px; color: var(--hf-ink); }
.hf-rich__plan p { margin: 4px 0 0; }
.hf-rich__video { margin: 0; }
.hf-rich__video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--hf-radius-card); overflow: hidden; background: var(--hf-dark-bg); }
.hf-rich__video-frame iframe, .hf-rich__video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.hf-rich__video-play { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 0; background: transparent; color: var(--hf-band-text); font: inherit; cursor: pointer; padding: 20px; text-align: center; }
.hf-rich__video-play::before { content: ""; width: 72px; height: 72px; border-radius: 50%; background: var(--hf-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%230B3556'/%3E%3C/svg%3E") center / 30px no-repeat; }
.hf-rich__video-play span { background: rgba(11, 53, 86, .85); border-radius: 10px; padding: 6px 12px; font-size: 15px; }
.hf-rich__video-play:focus-visible { outline: 3px solid var(--hf-orange); outline-offset: -6px; }
.hf-rich__video figcaption { margin-top: 10px; font-size: 15px; color: var(--hf-muted); }
.hf-rich__video details { margin-top: 8px; }
.hf-rich__video summary { cursor: pointer; font-weight: 600; color: var(--hf-blue); min-height: 44px; display: flex; align-items: center; }
.hf-rich__author { display: flex; gap: 18px; align-items: center; border-top: 1px solid var(--hf-line); border-bottom: 1px solid var(--hf-line); padding: 20px 0; }
.hf-rich__author img, .hf-rich__author .hf-rich__photo { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; }
.hf-rich__author p { margin: 0; font-size: 15px; }
.hf-rich__author strong { color: var(--hf-ink); }
.hf-rich__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.hf-rich__tiles a { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--hf-line); border-radius: var(--hf-radius-card); padding: 24px; text-decoration: none; color: var(--hf-text); min-height: 44px; }
.hf-rich__tiles a:hover { border-color: var(--hf-blue); }
.hf-rich__tiles strong { font-family: var(--hf-font-head); font-size: 20px; color: var(--hf-ink); }
@media (max-width: 575.98px) { .hf-rich__quote { flex-direction: column; padding: 24px; } .hf-rich__case { padding: 16px; gap: 24px; } .hf-rich__checklist { padding: 22px 20px; } }
[data-bs-theme="dark"] .form-label .text-danger, [data-bs-theme="dark"] label .text-danger { color: #FF8F99 !important; }
.news-thumb { background: var(--hf-sky-tint) !important; background-image: none !important; color: var(--hf-blue); } /* keine Verläufe */

/* ===== Schritt 12: 404 und Wartung (Muster Bestellung-4-Fertig.html) ===== */
.hf-status { padding: 64px 0 96px; }
.hf-status__box { max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hf-status__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--hf-sky-tint); color: var(--hf-blue); display: inline-flex; align-items: center; justify-content: center; }
.hf-status__code { margin: 0; font-weight: 600; color: var(--hf-blue); }
.hf-status h1 { margin: 0; font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.02em; }
.hf-status__lead { margin: 0; font-size: 20px; max-width: 60ch; }
.hf-status__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.hf-status__more a { color: var(--hf-blue); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 992px) { .hf-status { padding: 112px 0; } }

.maintenance-page { background: var(--hf-white); font-family: var(--hf-font-body, var(--bs-body-font-family)); }
.maintenance-header { background: var(--hf-white); border-bottom: 4px solid var(--hf-sky); }
.maintenance-header .site-logo { height: 48px; width: auto; }
.maintenance-title { font-family: var(--hf-font-head); font-weight: 700; color: var(--hf-ink); letter-spacing: -0.02em; }
.maintenance-lead { color: var(--hf-text); font-size: 20px; }
.maintenance-summary { box-shadow: none; border-radius: var(--hf-radius-card); }
.maintenance-summary-head { background: var(--hf-sky-tint); }
.maintenance-note { border-radius: var(--hf-radius-card); }
.maintenance-footer { background: var(--hf-white); }

/* ===== Schritt 13: Funde aus dem Gesamttest ===== */
/* lange deutsche Wörter (z. B. in den AGB) brechen auf dem Handy um */
.hf-prose, .kb-prose, .hf-rich, .hf-faq__body { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
/* Rechnung: Titel als H1, Darstellung unverändert */
.invoice-doc-title { display: contents; }
/* Warenkorb-Zahl in der Kundenbereich-Leiste: dunkle Schrift auf hellem Blau (Kontrast) */
[data-bs-theme="dark"] .client-topbar-badge { color: #0B3556 !important; }
.hf-skip-link:focus { position: fixed !important; top: 12px; left: 12px; z-index: 2000; background: var(--hf-white); color: var(--hf-ink); padding: 12px 18px; border-radius: 10px; outline: 3px solid var(--bs-primary); }
#inhalt:focus { outline: none; }
.hf-intro h1, .hf-status h1, .maintenance-title { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* Einblend-Animationen abgeschaltet (Marco, 11.11.2026): Inhalte sofort sichtbar, besserer LCP auf dem Handy */
.reveal { animation: none !important; }
[data-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; pointer-events: auto !important; }

/* Mega-Menü: schließt nicht mehr sofort (Marco, 11.11.2026).
   Lücke zwischen Menüpunkt und Panel (ca. 20 px) überbrücken und beim Verlassen 0,3 s Nachlauf. */
@media (min-width: 992px) {
  .hf-header .site-nav .dropdown:has(>.nav-mega):hover::after,
  .hf-header .site-nav .dropdown:has(>.nav-mega):focus-within::after { block-size: 1.75rem; }
  .hf-header .site-nav .dropdown > .nav-mega {
    display: block; visibility: hidden; opacity: 0; z-index: 1000;
    transition: opacity .15s ease .15s, visibility 0s linear .3s;
  }
  .hf-header .site-nav .dropdown:hover > .nav-mega,
  .hf-header .site-nav .dropdown:focus-within > .nav-mega {
    visibility: visible; opacity: 1; z-index: 1001;
    transition: opacity .12s ease 0s, visibility 0s linear 0s;
  }
}

/* Cookie-Hinweis als flache Leiste über die volle Breite (Marco, 12.11.2026: Box war zu eng).
   Text links, Knöpfe rechts; Ablehnen und Akzeptieren gleich gewichtet. Am Handy zweizeilig. */
.cookie-notice { inset-inline: 0; inset-block-end: 0; inline-size: auto; }
.cookie-notice .cookie-notice-card {
  border-radius: 0; border-width: 1px 0 0; padding: 14px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prefs prefs" "text acts";
  column-gap: 32px; align-items: center; max-inline-size: none;
}
.cookie-notice .cookie-notice-card > * { max-inline-size: 1200px; }
.cookie-notice .cookie-notice-text { grid-area: text; margin: 0; font-size: 15px; line-height: 1.5; }
.cookie-notice [data-cookie-prefs] { grid-area: prefs; }
.cookie-notice .cookie-notice-cats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-block: 4px 14px; }
.cookie-notice .cookie-notice-cats-title { grid-column: 1 / -1; }
.cookie-notice .cookie-cat-name, .cookie-notice .cookie-cat-desc { font-size: 14px; }
.cookie-notice .cookie-notice-acts { grid-area: acts; flex-wrap: nowrap; align-items: center; gap: 10px; }
.cookie-notice .cookie-btn { font-size: 15px; }
.cookie-notice .cookie-btn-bare { margin-inline-start: 4px; padding-inline: 4px; }
body:has(.cookie-notice:not([hidden])) { padding-block-end: 84px; }
@media (min-width: 1248px) {
  .cookie-notice .cookie-notice-card { padding-inline: calc((100% - 1200px) / 2); }
}
@media (max-width: 991.98px) {
  .cookie-notice .cookie-notice-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prefs" "text" "acts"; row-gap: 12px; padding: 14px 16px; }
  .cookie-notice .cookie-notice-acts { flex-wrap: wrap; }
  .cookie-notice .cookie-btn-solid, .cookie-notice .cookie-btn-ghost { flex: 1 1 0; }
  body:has(.cookie-notice:not([hidden])) { padding-block-end: 150px; }
}
@media (max-width: 575.98px) {
  .cookie-notice { inset-inline: 0; inset-block-end: 0; }
  .cookie-notice .cookie-notice-text { font-size: 14px; }
  .cookie-notice .cookie-btn-bare { flex: 1 0 100%; min-height: 32px; margin: 0; }
  body:has(.cookie-notice:not([hidden])) { padding-block-end: 210px; }
}