/*
Theme Name:  khd-theme
Theme URI:   https://krankenhausdaten.de
Description: Schlankes Theme fuer krankenhausdaten.de ohne Page-Builder. Erhaelt die WooCommerce-Funktionalitaet (Bestellung, Zahlung, automatische Rechnungs-E-Mails) vollstaendig. Startseite auf Lead-Generierung ausgerichtet.
Author:      Maximilian Soeldner
Version:     0.35.0
Text Domain: khd-theme
*/

/* ==================================================================
   Namensregel: eigene Klassen tragen das Praefix khd-

   WooCommerce vergibt vollkommen allgemeine Klassennamen an tragende
   Bausteine: form.cart und table.cart, div.product, ul.tabs, .panel,
   .form-row. Wer dieselben Namen fuer eigene Bausteine benutzt, gestaltet
   ungewollt den Shop mit.

   Genau das war die Ursache der wochenlang gesuchten Ueberlappungen: die
   Warenkorb-Schaltflaeche im Kopf hiess .cart und bekam height:40px. Diese
   Hoehe traf auch WooCommerce' Bestellformular (form.cart) und die
   Warenkorbtabelle (table.cart). Beide wurden auf 40px gestaucht, waehrend
   ihr Inhalt – Variantenwahl, Preis, Kaufknopf, alle Warenkorbzeilen –
   herauslief und sich ueber alles darunter legte. Gemessen: form.cart 44px
   hoch bei rund 200px Inhalt, table.cart exakt 40px.

   Deshalb: jede Klasse, die dieses Theme selbst vergibt, beginnt mit khd-.
   Ausgenommen sind Namen, die von WordPress kommen (.alignwide,
   .wp-caption, .screen-reader-text) und die Zustandsklassen .btn/.is-*.
   ================================================================== */

/* ==================================================================
   Design-Tokens (Bestandspalette der Live-Seite, siehe CLAUDE.md)
   ================================================================== */
:root{
  --navy:#112D4E;
  --blue:#3F72AF;
  --blue-tint:#DBE2EF;
  --paper-warm:#F9F7F7;
  --paper:#FFFFFF;

  --ink:#112D4E;
  --slate:#5C6B80;
  --line:#DDE3EC;

  --display:"Archivo",system-ui,sans-serif;
  --body:"Public Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Gemeinsame Hoehe der Bedienelemente in der Kopfzeile: CTA, Warenkorb
     und Menueknopf. Frueher ergab sie sich bei jedem aus eigenem
     Innenabstand und Rahmen – 48, 42 und 40px nebeneinander. */
  --kopf-knopf:40px;

  --wrap:1160px;
  --pad:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Haelt den Footer am unteren Rand, auch wenn der Inhalt kuerzer ist als
     das Fenster. Ohne das rutscht er bei kurzen Seiten (Danke-Meldung,
     Fehlerseite, leerer Warenkorb) mitten ins Bild. */
  display:flex;flex-direction:column;min-height:100vh;
}
body > main{flex:1 0 auto}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* Rasterrahmen. ACHTUNG: Klassen, die zusammen mit .wrap auf demselben
   Element sitzen, duerfen padding NICHT in der Kurzschreibweise setzen –
   "padding:56px 0 80px" setzt die Seiten auf 0 und hebt den Rasterrand hier
   auf. Immer padding-top/padding-bottom einzeln angeben. */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-0.02em;margin:0;color:var(--navy);text-wrap:balance}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.08}
h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15}
h3{font-size:1.15rem;line-height:1.3;letter-spacing:-0.01em}
p{margin:0}

.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.lede{font-size:1.15rem;color:var(--slate);line-height:1.65}

/* buttons
   Jeder Zustand nennt seine Farbe selbst, und :hover/:focus stehen im
   Selektor. Grund: ".btn--primary" ist eine Klasse (0,1,0) und unterliegt
   jeder fremden Regel "a:hover" oder "button:focus" (0,1,1) – aus einem
   Stylesheet von WordPress, einem Plugin oder dem Browser. Genau so wurde
   der Knopftext beim Ueberfahren fremdfarbig, und der Menueknopf blieb nach
   dem Klick eingefaerbt, weil der Fokus auf ihm liegen bleibt.
   Wer hier eine Farbe weglaesst, oeffnet die Luecke wieder. */
.btn{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--body);font-size:1rem;font-weight:600;
  padding:.85rem 1.5rem;border-radius:3px;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;transition:.15s ease;
  white-space:nowrap;
}
.btn--primary,
.btn--primary:link,
.btn--primary:visited{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--primary:hover,
.btn--primary:focus,
.btn--primary:active{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--ghost,
.btn--ghost:link,
.btn--ghost:visited{background:transparent;color:var(--navy);border-color:var(--line)}
.btn--ghost:hover,
.btn--ghost:focus,
.btn--ghost:active{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* header – bleibt beim Scrollen stehen */
.khd-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}

/* Angemeldete Nutzer sehen die WP-Adminleiste; der Header muss darunter
   einrasten, sonst verschwindet er dahinter. Fuer Besucher ohne Adminleiste
   aendert sich nichts. */
body.admin-bar .khd-header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .khd-header{top:46px}
}

/* position:sticky bricht, sobald ein Elternelement overflow gesetzt hat.
   hello-elementor und der Elementor-Kit tun das an einigen Stellen. */
html,body{overflow-x:clip}
.khd-header__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:68px}
.brand{display:flex;align-items:center;gap:.6rem;white-space:nowrap;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--navy)}
.brand img{width:30px;height:30px}
/* margin-left:auto haelt Navigation und Werkzeuge rechts zusammen. Die
   Kopfzeile hat drei Kinder; space-between allein wuerde die Navigation
   in die Mitte ruecken. */
/* margin-left:auto haelt Navigation und Werkzeuge rechts zusammen. Die
   Kopfzeile hat drei Kinder; space-between allein wuerde die Navigation
   in die Mitte ruecken. flex:0 0 auto verhindert, dass die Reihe bei
   knappem Platz gestaucht wird statt umzuschalten – enger als der
   Umbruchpunkt wird sie ohnehin nie. */
.khd-nav{display:flex;align-items:center;gap:1.75rem;margin-left:auto;flex:0 0 auto}
/* Navigation in der Grundschrift, nicht in Mono. Mono ist auf dieser Seite
   die Schrift der Etiketten und Messwerte – Eyebrows, Kennzahlen, Chips,
   Tabellenkoepfe. Die Hauptnavigation ist keine Beschriftung, sondern ein
   Bedienelement; in Mono las sie sich wie eine Fussnote und konkurrierte mit
   den Eyebrows darunter. In der Grundschrift spricht sie ausserdem dieselbe
   Sprache wie der Knopf daneben und wie die Fussleiste, die schon immer die
   Grundschrift geerbt hat.
   Ohne :not() wuerde diese Regel (Spezifitaet 0,1,1) die Knopf- und
   Warenkorbklassen (0,1,0) ueberschreiben: der CTA bekaeme graue
   Navigationsschrift statt weisser Flaechenschrift. */
.khd-nav a:not(.btn):not(.khd-cart){font-family:var(--body);font-size:.95rem;font-weight:500;text-decoration:none;color:var(--slate);white-space:nowrap}
.khd-nav a:not(.btn):not(.khd-cart):hover{color:var(--navy)}

/* Der CTA sass frueher als style-Attribut im Markup. */
/* Kein senkrechter Innenabstand mehr: die Hoehe kommt aus --kopf-knopf,
   align-items:center aus .btn zentriert die Schrift darin. */
.khd-nav__cta{height:var(--kopf-knopf);padding:0 1.1rem;font-size:.92rem}

/* Warenkorb und Menueknopf: eigene Gruppe rechts aussen, ausserhalb der
   Navigation, damit sie sichtbar bleiben, wenn die Links im Ausklappmenue
   verschwinden. */
.khd-header__tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* Der Menueknopf erscheint nur unterhalb der Umbruchbreite und nur, wenn
   JavaScript laeuft (Klasse khd-js, gesetzt im Kopf von header.php) – ohne
   Skript koennte ihn nichts oeffnen. */
.khd-burger{
  -webkit-appearance:none;appearance:none;
  display:none;align-items:center;justify-content:center;
  width:var(--kopf-knopf);height:var(--kopf-knopf);padding:0;margin:0;flex:0 0 auto;
  background:transparent;border:1px solid var(--line);border-radius:3px;
  color:var(--navy);font:inherit;cursor:pointer;transition:.15s ease;
}
/* Das Icon zeichnet mit currentColor, haengt also an den Farben darueber. */
.khd-burger svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.khd-burger:hover,
.khd-burger:focus{background:transparent;border-color:var(--blue);color:var(--blue)}
.khd-burger:active{background:var(--paper-warm);border-color:var(--blue);color:var(--blue)}
.khd-burger:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.khd-burger__close{display:none}
.khd-burger[aria-expanded="true"] .khd-burger__open{display:none}
.khd-burger[aria-expanded="true"] .khd-burger__close{display:block}

/* hero */
.hero{padding:76px 0 64px;border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{margin:14px 0 20px;max-width:15ch}
.hero .lede{max-width:44ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__note{margin-top:18px;font-size:.9rem;color:var(--slate)}

/* screenshot frame */
.shot{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--paper);box-shadow:0 18px 44px -30px rgba(17,45,78,.6)}
.shot__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;background:var(--navy);color:#fff;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.shot__bar span:last-child{color:var(--blue-tint)}
.shot__cap{padding:9px 14px;font-family:var(--mono);font-size:.68rem;color:var(--slate);background:var(--paper-warm);border-top:1px solid var(--line)}

/* code chips */
.code{font-family:var(--mono);font-size:.8rem;background:var(--blue-tint);color:var(--navy);padding:1px 6px;border-radius:2px;white-space:nowrap}

/* trust */
.trust{background:var(--paper-warm);border-bottom:1px solid var(--line);padding:22px 0}
.trust__inner{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline;justify-content:center;text-align:center}
.trust__item{font-family:var(--mono);font-size:.78rem;color:var(--slate);letter-spacing:.03em}
.trust__item b{font-family:var(--display);font-size:1.1rem;color:var(--navy);letter-spacing:-.01em;margin-right:.4rem}

/* section */
/* ------------------------------------------------------------------
   Flaechenregel der Startseite
   Die Flaechen wechseln streng ab: Hero weiss, Zahlenleiste warm, und
   von da an abwechselnd weiter. Einzige Ausnahme ist das Erstgespraech
   (.lead) in Navy; der Wechsel laeuft darueber hinweg, als waere der
   Abschnitt uebersprungen, deshalb steht das FAQ danach auf Warm.
   Wer einen Abschnitt einfuegt, entfernt oder verschiebt, muss die
   Klassen aller folgenden Abschnitte mitdrehen – sonst stehen zwei
   gleiche Flaechen nebeneinander. Die Reihenfolge steht in
   front-page.php am Kopf der Abschnittsliste.
   ------------------------------------------------------------------ */
.section{padding:88px 0;border-bottom:1px solid var(--line)}
.section--wash{background:var(--paper-warm)}
/* Kopfbereich der Abschnitte: Ueberschrift und Einleitung bekommen eigene
   Zeilenlaengen. Vorher galten fuer beide dieselben 60 Zeichen – gemessen an
   der Schriftgroesse der *Ueberschrift*. Dadurch brach schon
   "Drei Fragen, die Sie damit beantworten" auf zwei Zeilen um, obwohl rechts
   daneben die halbe Breite frei blieb. Jetzt darf die Ueberschrift die Breite
   nutzen, die sie braucht; die Einleitung behaelt eine lesbare Zeile. */
.section__head{max-width:none;margin-bottom:46px}
.section__head h2{margin:12px 0 14px;max-width:46ch}
.section__head .lede{max-width:80ch}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px}
.card__tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.card p{font-size:.97rem;color:var(--slate)}
.card ul{margin:4px 0 0;padding-left:1.1rem;font-size:.95rem;color:var(--slate)}
.card li{margin-bottom:.35rem}

/* SIGNATURE: Berichtsjahre */
.years{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--paper)}
.year{padding:26px 18px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.year:last-child{border-right:none}
.year__no{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.year__state{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase}
.year__meta{font-size:.85rem;color:var(--slate)}
.year--free{background:var(--blue-tint)}
.year--free .year__state{color:var(--blue)}
.year--free .year__meta{color:#4A5C74}
.year--paid{background:var(--navy)}
.year--paid .year__no{color:#fff}
.year--paid .year__state{color:var(--blue-tint)}
.year--paid .year__meta{color:#B6C6DC}
.year--archive{opacity:.6}
.year--soon .year__state{color:var(--slate)}
.years-note{margin-top:18px;font-size:.92rem;color:var(--slate);max-width:70ch}

/* scope */
.scope{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.scope__item{padding:30px 30px 32px;border-bottom:1px solid var(--line)}
.scope__item:nth-child(odd){border-right:1px solid var(--line)}
.scope__item h3{margin-bottom:8px}
.scope__item p{font-size:.97rem;color:var(--slate);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.step__no{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--blue);padding-bottom:10px;border-bottom:2px solid var(--blue);display:inline-block;margin-bottom:16px}
.step h3{margin-bottom:8px}
.step p{font-size:.97rem;color:var(--slate)}

/* dashboard tabs */
.khd-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.khd-tab{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;
  padding:.55rem 1rem;border:1px solid var(--line);border-radius:3px;
  /* Warm statt weiss: der Power-BI-Abschnitt steht auf weissem Grund,
     ein weisser Reiter haette dort nur seinen Rahmen. */
  -webkit-appearance:none;appearance:none;
  background:var(--paper-warm);color:var(--slate);cursor:pointer;transition:.15s ease;
}
.khd-tab:hover,
.khd-tab:focus{background:var(--paper-warm);border-color:var(--blue);color:var(--blue)}
.khd-tab[aria-selected="true"],
.khd-tab[aria-selected="true"]:hover,
.khd-tab[aria-selected="true"]:focus{background:var(--navy);border-color:var(--navy);color:#fff}
.khd-tab:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.khd-panel[hidden]{display:none}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{border-left:2px solid var(--blue);padding:4px 0 4px 22px;display:flex;flex-direction:column;gap:14px}
.quote blockquote{margin:0;font-size:1rem;line-height:1.6}
.quote__who{display:flex;align-items:center;gap:12px}
.quote__who img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}
.quote__id{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--slate);line-height:1.45}
.quote__id strong{display:block;color:var(--navy);font-weight:500;font-size:.8rem}

/* compare */
.compare{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--paper);border:1px solid var(--line)}
.compare th,.compare td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare thead th{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);background:var(--paper-warm);font-weight:500}
.compare thead th.is-us{color:var(--navy)}
.compare tbody th{font-weight:500;color:var(--slate);width:26%}
.compare td.is-us{background:var(--blue-tint);font-weight:500;color:var(--navy)}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:none}
/* Breite Tabelle scrollt in ihrem eigenen Container, nie der Seitenkoerper. */
.compare-wrap{overflow-x:auto}

/* lead */
.lead{background:var(--navy);border-bottom:none}
.lead__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.lead h2{color:#fff}
.lead .eyebrow{color:var(--blue-tint)}
.lead > .wrap p{color:#C3D2E4}
.lead__points{list-style:none;margin:26px 0 0;padding:0}
.lead__points li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:.97rem;color:#D8E3F0}
.khd-form{background:#fff;border-radius:4px;padding:30px}
.khd-field{margin-bottom:16px}
.khd-field label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.khd-field input,.khd-field select,.khd-field textarea{width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);padding:11px 12px;border:1px solid var(--line);border-radius:3px;background:#fff}
.khd-field textarea{min-height:92px;resize:vertical}
.khd-field input:focus,.khd-field select:focus,.khd-field textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.khd-form .btn{width:100%;justify-content:center;margin-top:6px}
.form__legal{margin-top:14px;font-size:.8rem;color:var(--slate);line-height:1.5}

/* faq */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--navy);display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--blue);font-size:1.2rem}
details[open] summary::after{content:"\2013"}
details p{padding:0 0 20px;font-size:.97rem;color:var(--slate);max-width:60ch}

/* footer */
/* Footer spiegelt den Header: gleiche Hoehe (68px), gleiche Ausrichtung.
   margin-top:auto schiebt ihn im Spaltenlayout des Body nach ganz unten. */
.khd-footer{background:var(--navy);color:#A9BDD6;font-size:.85rem;margin-top:auto;flex-shrink:0}
.khd-footer a{color:#A9BDD6;text-decoration:none}
.khd-footer a:hover{color:#fff}
.khd-footer__inner{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  align-items:center;min-height:68px;padding-top:14px;padding-bottom:14px}
.khd-footer nav{display:flex;flex-wrap:wrap;gap:10px 22px}

/* ---------- Shop ---------- */
.khd-cart{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  /* Grundschrift wie die uebrige Navigation. tabular-nums haelt den Betrag
     auf gleicher Breite, damit der Knopf beim Aendern des Warenkorbs nicht
     springt – dafuer brauchte es frueher die Monoschrift. */
  font-family:var(--body);font-size:.9rem;font-weight:500;color:var(--navy);
  font-variant-numeric:tabular-nums;
  height:var(--kopf-knopf);padding:0 .7rem;border:1px solid var(--line);border-radius:3px;
}
.khd-cart:hover{border-color:var(--blue)}
.khd-cart svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}

/* Gefuellter Warenkorb: Zaehler am Symbol und dunklerer Rahmen.
   Zwei Signale, weil eines allein schwach ist – die Summe wechselt zwar von
   0,00 auf einen Betrag, aber das ist nur anderer Text an derselben Stelle.
   Eine Form, die vorher nicht da war, faellt dagegen sofort auf.
   Der Zaehler haengt am Symbol statt am Knopf: so bleibt er an Ort und
   Stelle, wenn die Summe breiter wird. */
.khd-cart__symbol{position:relative;display:inline-flex;flex:0 0 auto}
.khd-cart__zahl{
  position:absolute;top:-7px;right:-8px;
  min-width:15px;height:15px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;
  font-family:var(--mono);font-size:.62rem;line-height:1;
  font-variant-numeric:tabular-nums;
  border-radius:8px;
  /* Der helle Ring trennt die Ziffer vom Wagen darunter; ohne ihn
     verschwimmen Strichzeichnung und Plakette ineinander. */
  border:1.5px solid var(--paper);
}
.khd-cart--voll{border-color:var(--navy)}

.buy{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}

.khd-product{border:1px solid var(--line);border-radius:4px;background:var(--paper);overflow:hidden}
.khd-product__head{padding:24px 26px 20px;border-bottom:1px solid var(--line)}
.khd-product__head h3{font-size:1.3rem;margin-bottom:6px}
.khd-product__sku{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--slate)}
.khd-product__body{padding:24px 26px 26px}
.khd-product__row{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.khd-product__row .khd-field{flex:1 1 220px;margin-bottom:0}
.khd-product__price{
  font-family:var(--display);font-size:2rem;font-weight:700;letter-spacing:-.02em;
  color:var(--navy);line-height:1.1;
}
.khd-product__price small{display:block;font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.06em;color:var(--slate);margin-top:5px;text-transform:uppercase}
.khd-product .btn{width:100%;justify-content:center}
.khd-product__vat{margin-top:12px;font-size:.82rem;color:var(--slate);line-height:1.5}
.khd-product__incl{margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line);list-style:none;font-size:.93rem;color:var(--slate)}
.khd-product__incl li{padding:5px 0 5px 20px;position:relative}
.khd-product__incl li::before{content:"\2192";position:absolute;left:0;color:var(--blue);font-family:var(--mono);font-size:.8rem}

.checkout-facts{list-style:none;margin:0;padding:0}
.checkout-facts li{padding:18px 0;border-bottom:1px solid var(--line)}
.checkout-facts li:first-child{padding-top:0}
.checkout-facts strong{display:block;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--navy);margin-bottom:4px}
.checkout-facts span{font-size:.94rem;color:var(--slate)}
.pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pay span{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--slate);
  border:1px solid var(--line);border-radius:3px;padding:.4rem .7rem;background:var(--paper);
}

/* motion */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* responsive */
/* ------------------------------------------------------------------
   Umbruchpunkt der Kopfzeile: 1100px, nicht 960px wie die Inhaltsraster.
   Die Kopfzeile braucht rund 1070px (Marke 237 + Links 438 + CTA 179 +
   Warenkorb 96 + Abstaende 74 + Seitenrand 48). Bei 960px stand der
   Umbruch also zu spaet: dazwischen wurde die Reihe gestaucht, der CTA
   brach um und verlor in der 68px hohen Zeile seine Luft.
   Der Wert steht ein zweites Mal in assets/main.js, wo das Ausklappfeld
   beim Verbreitern zurueckgesetzt wird. Beide muessen zusammenpassen.
   ------------------------------------------------------------------ */
@media (max-width:1100px){
  /* Frueher stand in der 960er-Query .khd-nav{display:none} – das nahm auf
     schmalen Schirmen auch Warenkorb und CTA mit weg, der Warenkorb war vom
     Kopf aus gar nicht mehr erreichbar. Beide sitzen jetzt in
     .khd-header__tools und bleiben stehen; nur die Links klappen auf. */
  .khd-js .khd-burger{display:inline-flex}
  .khd-js .khd-nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 32px -26px rgba(17,45,78,.7);
    padding:4px var(--pad) 20px;
    /* Sehr flache Fenster: das Feld scrollt in sich, statt aus dem Bild zu
       laufen. 68px ist die Hoehe der Kopfzeile. */
    max-height:calc(100vh - 68px);overflow-y:auto;
  }
  .khd-js .khd-nav[data-open]{display:flex}
  .khd-js .khd-nav a:not(.btn):not(.khd-cart){
    padding:15px 2px;border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--navy);
  }
  /* Im Ausklappfeld ist der CTA der Hauptknopf und nicht an die Hoehe der
     Kopfzeile gebunden. */
  .khd-js .khd-nav__cta{margin-top:18px;justify-content:center;height:auto;padding:.85rem 1.5rem;font-size:1rem}
  /* Ohne JavaScript bleibt die Reihe stehen und bricht um. Dann muss auch
     die Kopfzeile mitwachsen – ihre feste Hoehe von 68px wuerde die
     umgebrochenen Zeilen sonst ueberlaufen lassen. */
  html:not(.khd-js) .khd-header__inner{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
  html:not(.khd-js) .khd-nav{flex-wrap:wrap;gap:.9rem 1.25rem;margin-left:0}
}

@media (max-width:960px){
  .hero__grid,.lead__grid,.buy{grid-template-columns:1fr;gap:44px}
  .cards,.steps,.quotes{grid-template-columns:1fr}
  .years{grid-template-columns:repeat(3,1fr)}
  .year:nth-child(3n){border-right:none}
  .year:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .faq{grid-template-columns:1fr}
  .section{padding:64px 0}
  .hero{padding:52px 0 48px}
}
@media (max-width:600px){
  body{font-size:16px}
  .scope{grid-template-columns:1fr}
  .scope__item:nth-child(odd){border-right:none}
  .years{grid-template-columns:repeat(2,1fr)}
  .year{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .year:nth-child(2n){border-right:none}
  .compare{display:block;overflow-x:auto}
}

/* ==================================================================
   Seiten ausserhalb der Startseite (page.php)
   ================================================================== */
.khd-main{min-height:40vh}

/* Seitenkopf bewusst zurueckhaltend: auf Unterseiten wie Warenkorb oder Kasse
   ist die Ueberschrift Orientierung, nicht Buehne. Die grosse Schriftstufe
   bleibt der Startseite vorbehalten. */
/* Mindesthoehe wie Header und Footer (68px). Ohne sie richtet sich die Hoehe
   allein nach der Ueberschrift: "Impressum" ergibt einen flachen Balken, ein
   langer Titel einen doppelt so hohen – beim Durchklicken springt die Zeile.
   Nach oben bleibt er frei, damit lange Titel nicht abgeschnitten werden. */
.khd-page__head{background:var(--paper-warm);border-bottom:1px solid var(--line);padding:20px 0 18px}
.khd-page__head > .wrap{min-height:68px;display:flex;flex-direction:column;justify-content:center;gap:6px}
/* 22ch war zu eng: lange Seitentitel brachen in vier kurze, gestauchte Zeilen.
   Breitere Zeile, etwas mehr Durchschuss, und text-wrap:balance verteilt die
   Woerter gleichmaessig auf die Zeilen statt eine kurze Restzeile zu lassen. */
.khd-page__head h1{max-width:36ch;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.25}

/* Der Seitenkopf und der Text darunter muessen buendig beginnen. Beide sitzen
   in .wrap; damit von aussen kein Rand dazwischenfunkt, hier ausdruecklich
   ohne eigene Einrueckung. */
.khd-page__head > .wrap,
.khd-prose,
.khd-list{margin-left:auto;margin-right:auto}
.khd-prose > *:first-child{margin-top:0}
/* Zeilenlaenge an den Inhalten begrenzen, nicht am Behaelter.
   Frueher stand max-width:78ch auf demselben Element wie .wrap. Da .wrap
   margin:0 auto traegt, wurde der schmalere Kasten mittig gesetzt statt links
   ausgerichtet – bei 1112px Innenbreite rund 210px Einrueckung. Der Behaelter
   behaelt jetzt die volle Breite, nur die Absaetze werden begrenzt. */
.khd-prose{padding-top:56px;padding-bottom:80px}
.khd-prose > *{max-width:78ch}
.khd-prose > *{margin-bottom:1.1em}
.khd-prose > *:last-child{margin-bottom:0}
.khd-prose h2{margin:1.8em 0 .6em;font-size:clamp(1.4rem,2.2vw,1.9rem)}
.khd-prose h3{margin:1.5em 0 .5em}
.khd-prose p,.khd-prose li{color:var(--slate)}
.khd-prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.khd-prose a:hover{color:var(--navy)}
.khd-prose ul,.khd-prose ol{padding-left:1.25rem}
.khd-prose li{margin-bottom:.4em}
.khd-prose img{border:1px solid var(--line);border-radius:4px}
.khd-prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.khd-prose th,.khd-prose td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}

/* ==================================================================
   WooCommerce – Shop, Produkt, Warenkorb, Kasse, Konto

   GRUNDSATZ: nur Schrift, Farbe und Rahmen. KEIN eigenes Layout.
   Zwei Versuche, die Positionstabelle mit eigenem Raster und Breiten zu
   ordnen, haben sie stattdessen zerlegt – WooCommerce bringt eine
   funktionierende Anordnung mit, die nicht ueberschrieben werden darf.

   Die !important-Marker sind bewusst gesetzt: solange Elementor aktiv ist,
   erzeugt es je Baustein eigene Regeln mit sehr hoher Spezifitaet. Sie
   entfallen mit Elementor am Ende des Relaunches.
   ================================================================== */
.khd-shop{padding-top:48px;padding-bottom:80px}

/* --- Preise --- */
/* WooCommerce verschachtelt Betraege mehrfach:
   p.price > span.woocommerce-Price-amount > bdi > span.currencySymbol.
   Setzt eine fremde Regel die Schrift auf einer der inneren Ebenen, nuetzt
   die Angabe am aeusseren Element nichts – deshalb alle Ebenen ausdruecklich. */
.woocommerce .price,
.woocommerce div.product .price,
.woocommerce div.product p.price,
.woocommerce div.product .woocommerce-variation-price .price,
.woocommerce ul.products li.product .price,
.woocommerce table.shop_table .amount,
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.woocommerce-Price-currencySymbol,
.woocommerce div.product .price del,
.woocommerce div.product .price ins,
.elementor-widget-woocommerce-product-price .price{
  font-family:var(--display) !important;
  font-weight:700 !important;
  color:var(--navy) !important;
  letter-spacing:-.02em;
}
.woocommerce div.product .price,
.elementor-widget-woocommerce-product-price .price{font-size:1.9rem;line-height:1.2}
.woocommerce ul.products li.product .price{font-size:1.15rem}
.woocommerce div.product .price del{opacity:.55;font-weight:500}

/* --- Knoepfe --- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce div.product form.cart .button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button{
  background:var(--navy) !important;
  color:#fff !important;
  border:1.5px solid var(--navy) !important;
  font-family:var(--body) !important;
  font-size:1rem !important;
  font-weight:600 !important;
  padding:.85rem 1.5rem !important;
  border-radius:3px !important;
  line-height:1.2;
  text-transform:none !important;
  letter-spacing:0;
  transition:.15s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button:hover{
  background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important;
}
.woocommerce .button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* --- Formularfelder --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce div.product form.cart select,
.woocommerce table.variations select{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  padding:10px 12px;border:1px solid var(--line);border-radius:3px;background:#fff;height:auto;
}
/* Kurze Feldbezeichnungen als Kapitaelchen – aber nur die.
   Die Regel galt zuvor fuer *alle* Beschriftungen im Bestellformular. Damit
   erwischte sie auch die Einwilligungstexte unter "Zusaetzliche
   Informationen": mehrzeilige Saetze in Grossbuchstaben und Schreibmaschine,
   praktisch unlesbar – ausgerechnet dort, wo der Kunde bewusst zustimmen soll.
   Beschriftungen mit einem Ankreuzfeld bleiben deshalb normaler Fliesstext. */
.woocommerce form .form-row > label,
.woocommerce table.variations label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);
}
.woocommerce form .form-row > label:has(input),
.woocommerce form .form-row label.checkbox,
.woocommerce form label.woocommerce-form__label-for-checkbox,
.woocommerce-terms-and-conditions-wrapper label{
  font-family:var(--body);font-size:.9rem;letter-spacing:0;
  text-transform:none;line-height:1.5;color:var(--slate);
  display:flex;gap:9px;align-items:flex-start;
}
.woocommerce form .form-row > label:has(input) input,
.woocommerce form .form-row label.checkbox input,
.woocommerce-terms-and-conditions-wrapper label input{
  margin-top:.2rem;flex:0 0 auto;accent-color:var(--navy);
}

/* --- Ueberschriften und Fliesstext --- */
.woocommerce div.product .product_title{margin-bottom:.25em}
.woocommerce div.product .woocommerce-tabs h2,
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3{
  font-family:var(--display);font-size:1.15rem;margin-bottom:14px;color:var(--navy);
}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--slate)}

/* --- Produktraster im Shop-Archiv --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  color:var(--navy);letter-spacing:-.01em;
}

/* --- Tabellen: nur Schrift, Farbe, Rahmen --- */
.woocommerce table.shop_table{border-color:var(--line);font-size:.96rem}
.woocommerce table.shop_table th{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);font-weight:500;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th{border-color:var(--line)}
.woocommerce table.shop_table td.product-name a{color:var(--navy);text-decoration:none;font-weight:500}
.woocommerce table.shop_table td.product-name a:hover{color:var(--blue)}

/* Summenblock und Bestelluebersicht als abgesetzte Karte */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review{
  background:var(--paper-warm);border:1px solid var(--line);border-radius:4px;padding:22px 24px 24px;
}
.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout #order_review table.shop_table{border:none;background:transparent}

/* --- Hinweise --- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top:none;border-left:3px solid var(--blue);
  background:var(--paper-warm);border-radius:3px;
  font-size:.96rem;color:var(--ink);
}
.woocommerce-error{border-left-color:#B3261E}
.woocommerce-message::before,.woocommerce-info::before{color:var(--blue)}

@media (max-width:960px){
  .khd-page__head{padding:28px 0 24px}
  .khd-prose{padding-top:40px;padding-bottom:60px}
  .khd-shop{padding-top:36px;padding-bottom:64px}
}

/* ==================================================================
   Beitraege, Archive, Suche
   ================================================================== */
.khd-list{padding-top:48px;padding-bottom:80px}
.khd-list > *{max-width:78ch}
.khd-teaser{padding:26px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.khd-teaser:first-child{padding-top:0}
.khd-teaser__meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--slate)}
.khd-teaser__title{font-size:1.35rem}
.khd-teaser__title a{text-decoration:none}
.khd-teaser__title a:hover{color:var(--blue)}
.khd-teaser__text{color:var(--slate);font-size:.98rem}
.khd-more{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--blue);text-decoration:none}
.khd-more:hover{text-decoration:underline}
.khd-pagination{display:flex;flex-wrap:wrap;gap:14px;padding-top:26px;font-family:var(--mono);font-size:.8rem}
.khd-pagination a{color:var(--blue);text-decoration:none}
.khd-page__image{padding-top:32px}
.khd-page__image img{border:1px solid var(--line);border-radius:4px}
.khd-postnav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  padding-bottom:72px;font-family:var(--mono);font-size:.8rem}
.khd-postnav a{color:var(--blue);text-decoration:none;max-width:24rem}
.khd-postnav a:hover{text-decoration:underline}

/* Suchformular */
.khd-prose .search-form,.khd-list .search-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.khd-prose .search-form label,.khd-list .search-form label{flex:1 1 16rem}
.search-form input[type="search"]{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
  padding:11px 12px;border:1px solid var(--line);border-radius:3px;background:#fff;
}
.search-form input[type="submit"]{
  background:var(--navy);color:#fff;border:1.5px solid var(--navy);
  font-family:var(--body);font-weight:600;padding:.7rem 1.3rem;border-radius:3px;cursor:pointer;
}
.search-form input[type="submit"]:hover{background:var(--blue);border-color:var(--blue)}

@media (max-width:960px){
  .khd-list{padding-top:36px;padding-bottom:64px}
}

/* Ansprechpartner im Beratungsabschnitt der Startseite */
.lead__person{display:flex;align-items:center;gap:18px;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.lead__portrait{margin:0;flex:0 0 96px;width:96px}
.lead__portrait img{width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.25)}
.lead__name{font-family:var(--display);font-weight:600;color:#fff;font-size:1.05rem}
.lead__role{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-tint);margin-top:4px}

/* Kontaktleiste: eigene Reihe unter beiden Spalten, ueber die volle Breite.
   Die abgesetzte Linie oben trennt sie vom Formular und macht sie zum
   Abschluss des Abschnitts. */
.lead__contact{list-style:none;margin:0;padding:40px 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lead__contact a{
  display:flex;align-items:center;gap:14px;height:100%;
  padding:15px 18px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);
  border-radius:3px;transition:.15s ease;
}
.lead__contact a:hover{background:rgba(255,255,255,.13);border-color:var(--blue-tint)}
.lead__contact a:focus-visible{outline:3px solid var(--blue-tint);outline-offset:2px}
.lead__contact-icon{
  width:22px;height:22px;flex:0 0 22px;
  fill:none;stroke:var(--blue-tint);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.lead__contact a:hover .lead__contact-icon{stroke:#fff}
.lead__contact-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.lead__contact-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-tint)}
.lead__contact-value{font-size:.92rem;color:#fff;font-weight:500;
  overflow-wrap:anywhere}

/* Die Leiste sitzt ausserhalb des zweispaltigen Rasters, deshalb braucht der
   Abschnitt unten wieder Luft. */
.lead{padding-bottom:80px}

@media (max-width:820px){
  .lead__contact{grid-template-columns:1fr;padding-top:28px}
}


/* ==================================================================
   Anfrageformular (Theme-eigen, ohne Formular-Plugin)
   ================================================================== */
/* Spamfalle: fuer Menschen unsichtbar, fuer Screenreader ausgeblendet.
   Kein display:none – manche Maschinen erkennen das und lassen das Feld leer. */
.khd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.field__check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px;
  font-size:.86rem;color:var(--slate);line-height:1.5;cursor:pointer}
.field__check input{margin-top:.25rem;flex:0 0 auto;width:16px;height:16px;accent-color:var(--navy)}
.field__check a{color:var(--blue)}

.form__fehler{background:#FDECEA;border-left:3px solid #B3261E;border-radius:3px;
  padding:12px 14px;margin-bottom:18px;font-size:.9rem;color:#5C1D18}

.khd-form--danke{display:flex;flex-direction:column;gap:10px}
.khd-form--danke h3{font-size:1.3rem}
.khd-form--danke p{color:var(--slate);font-size:.97rem}

/* ==================================================================
   Produktseite (WooCommerce-Standard)
   Vorbereitung fuer den Zeitpunkt, an dem das Produkt von Elementor
   geloest wird. Weiterhin ausschliesslich Schrift, Farbe und Rahmen –
   die Anordnung kommt von WooCommerce.
   ================================================================== */
.woocommerce div.product .product_title{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15}

/* Brotkrumen dezent halten: Orientierung, keine Konkurrenz zum Titel. */
.woocommerce .woocommerce-breadcrumb{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--slate);margin-bottom:18px;
}
.woocommerce .woocommerce-breadcrumb a{color:var(--slate);text-decoration:none}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--blue)}

/* Produktbild im selben Rahmen wie die Dashboard-Abbildungen. */
.woocommerce div.product div.images img{border:1px solid var(--line);border-radius:4px}

/* Variantenauswahl – hier waehlt der Kunde das Berichtsjahr. */
.woocommerce div.product form.cart table.variations{border:none;margin-bottom:14px}
.woocommerce div.product form.cart table.variations td{padding:6px 0}
.woocommerce div.product form.cart .reset_variations{
  font-family:var(--mono);font-size:.72rem;color:var(--slate);text-decoration:none;
}
.woocommerce div.product form.cart .reset_variations:hover{color:var(--blue)}
.woocommerce div.product form.cart div.quantity input{
  font-family:var(--body);padding:10px 8px;border:1px solid var(--line);border-radius:3px;
}

/* Kurzbeschreibung und Meta-Angaben. */
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:1.02rem;line-height:1.65;
}
.woocommerce div.product .product_meta{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--slate);
  border-top:1px solid var(--line);padding-top:14px;margin-top:18px;
}

/* Reiter unter dem Produkt. */
.woocommerce div.product .woocommerce-tabs ul.tabs{padding-left:0}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:var(--paper-warm);border-color:var(--line);border-radius:3px 3px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;
  text-transform:none;color:var(--slate);font-weight:500;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--navy)}
.woocommerce div.product .woocommerce-tabs .panel{font-size:.98rem}

/* Aehnliche Produkte. */
.woocommerce .related > h2,
.woocommerce .upsells > h2{
  font-family:var(--display);font-size:1.3rem;color:var(--navy);margin-bottom:18px;
}

/* ==================================================================
   Tabellen-Darstellung wiederherstellen

   Die Warenkorbtabelle faellt auseinander: Kopfzeilen und Inhalt landen in
   getrennten Kaesten. Das passiert, wenn eine fremde Regel den
   Tabellenbestandteilen ihre Darstellungsart nimmt (display:flex oder
   display:block auf table/thead/tbody/tr). Kandidaten sind der
   Elementor-Kit und das Eltern-Theme; die Ursache ist noch nicht belegt.

   Diese Regeln setzen nicht *mein* Layout, sondern stellen die
   Standarddarstellung des Browsers wieder her – also das, was WooCommerce
   erwartet. Greift keine fremde Regel, aendern sie nichts.

   Nur ab 768px: darunter stapeln WooCommerce und Themes die Tabelle
   absichtlich, das soll erhalten bleiben.
   ================================================================== */
@media (min-width:768px){
  .woocommerce table.shop_table{display:table;width:100%}
  .woocommerce table.shop_table thead{display:table-header-group}
  .woocommerce table.shop_table tbody{display:table-row-group}
  .woocommerce table.shop_table tfoot{display:table-footer-group}
  .woocommerce table.shop_table tr{display:table-row;float:none}
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td{display:table-cell;float:none}
}

/* ==================================================================
   Umflossene Bereiche einfassen

   WooCommerce arbeitet an mehreren Stellen mit float: Produktbild und
   Kaufbereich nebeneinander, Gutschein links und "Warenkorb aktualisieren"
   rechts, Menge und Kaufknopf nebeneinander. Ein Behaelter, dessen Kinder
   alle floaten, spannt seine Hoehe nicht auf – der nachfolgende Inhalt
   rutscht darunter und ueberlagert ihn.

   Diese Grundregeln brachte frueher hello-elementor mit. Seit khd-theme
   eigenstaendig ist (v0.31.0), fehlen sie. Genau daher kamen die beiden
   gemeldeten Fehler: auf der Produktseite stand der Kaufknopf neben der
   Variantenwahl statt darunter, im schmalen Warenkorb lag "Warenkorb
   aktualisieren" ueber der Summe.

   Auch das ist kein eigenes Raster, sondern die Wiederherstellung des
   Verhaltens, das WooCommerce voraussetzt.
   ================================================================== */
.woocommerce div.product::after,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart::after,
.woocommerce table.cart td.actions::after,
.woocommerce table.cart td.actions .coupon::after,
.woocommerce .cart-collaterals::after,
.woocommerce .col2-set::after{
  content:"";display:table;clear:both;
}

/* Zuverlaessiger als ein ::after-Clearfix: flow-root erzeugt einen eigenen
   Blockkontext, der floatende Kinder in jedem Fall umschliesst – auch dann,
   wenn ein Pseudoelement von anderer Seite ueberschrieben wird.

   Das Warenkorbformular fehlte bisher ganz. Genau darin sitzt der Knopf
   "Warenkorb aktualisieren"; blieb das Formular zu niedrig, begann der
   Summenblock zu frueh und der Knopf lag darueber. */
.woocommerce form.woocommerce-cart-form{display:flow-root}

/* Was nach einem umflossenen Bereich kommt, faengt eine neue Zeile an. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce .cart-collaterals,
.woocommerce .cart_totals{clear:both}

/* Unterhalb von 768px stapelt WooCommerce die Warenkorbtabelle. Nebeneinander
   gesetzte Bedienelemente ergeben dort keinen Sinn mehr und sind die zweite
   Haelfte der Ueberlappung. */
@media (max-width:767px){
  /* Gemessene Ursache der Ueberlappungen: WooCommerce stapelt Zeilen und
     Zellen mit display:block und setzt die Beschriftung ("Anzahl:") als
     ::before mit float:left. Eine Zelle, deren Inhalt nur floatet, bekommt
     Hoehe 0 – die naechste Zelle rutscht hinein. flow-root umschliesst den
     Float und gibt der Zelle ihre Hoehe zurueck. */
  .woocommerce table.shop_table,
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tfoot,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td{display:block;width:auto}

  /* Die Kopfzeile beschriftet Spalten, die es gestapelt nicht mehr gibt –
     WooCommerce wiederholt die Beschriftung ohnehin je Zelle. */
  .woocommerce table.shop_table thead{display:none}

  /* Und erst jetzt die Zellen umschliessen: die Beschriftung steckt als
     ::before mit float:left darin, sonst bliebe die Zelle 0 hoch. */
  .woocommerce table.shop_table td{display:flow-root}

  /* Im gestapelten Zustand ist die Zelle ein Block – hier darf flow-root
     stehen, ohne das Tabellenlayout breiter Schirme zu stoeren. */
  .woocommerce table.cart td.actions{display:flow-root;text-align:left}
  .woocommerce table.cart td.actions .coupon,
  .woocommerce table.cart td.actions .button,
  .woocommerce table.cart td.actions input.button{
    float:none;width:100%;margin:0 0 10px;
  }
  .woocommerce table.cart td.actions .coupon input[type="text"]{width:100%}
  /* Das Mengenfeld nahm die volle Breite ein und schob die Zeile auseinander. */
  .woocommerce table.cart td.product-quantity div.quantity{float:none;display:inline-block}
  .woocommerce table.cart td.product-quantity div.quantity input{width:5.5em}
}

/* ==================================================================
   Produktbeschreibung

   Greift sowohl bei der Standardausgabe von WooCommerce als auch, solange
   Elementor die Produktseite noch rendert, im dortigen Inhaltsbaustein.
   Weiterhin nur Schrift, Farbe, Rahmen und Bildgroesse – kein Layout.
   ================================================================== */
.woocommerce div.product .woocommerce-Tabs-panel,
.woocommerce div.product .woocommerce-product-details__short-description,
.elementor-widget-woocommerce-product-content{
  font-size:1rem;line-height:1.65;
}

/* Fliesstext stand in der Akzentfarbe und wirkte wie ein Link. */
.woocommerce div.product .woocommerce-Tabs-panel p,
.woocommerce div.product .woocommerce-Tabs-panel li,
.elementor-widget-woocommerce-product-content p,
.elementor-widget-woocommerce-product-content li{
  color:var(--slate);
}
.woocommerce div.product .woocommerce-Tabs-panel strong,
.elementor-widget-woocommerce-product-content strong{color:var(--navy);font-weight:600}

.woocommerce div.product .woocommerce-Tabs-panel h2,
.elementor-widget-woocommerce-product-content h2{
  font-size:clamp(1.3rem,2vw,1.6rem);margin:1.6em 0 .5em;
}
.woocommerce div.product .woocommerce-Tabs-panel h3,
.elementor-widget-woocommerce-product-content h3{
  font-size:1.12rem;margin:1.5em 0 .4em;
}
.woocommerce div.product .woocommerce-Tabs-panel > *:first-child,
.elementor-widget-woocommerce-product-content > *:first-child{margin-top:0}

.woocommerce div.product .woocommerce-Tabs-panel ul,
.elementor-widget-woocommerce-product-content ul{padding-left:1.2rem;margin:0 0 1.2em}
.woocommerce div.product .woocommerce-Tabs-panel li,
.elementor-widget-woocommerce-product-content li{margin-bottom:.35em}

/* Abbildungen in der Beschreibung: gerahmt wie die Dashboard-Ansichten,
   untereinander statt nebeneinander gequetscht, und in der Breite begrenzt –
   das Datenmodell ist im Original 1579px breit und wird sonst unleserlich
   klein in die Spalte gepresst. */
.woocommerce div.product .woocommerce-Tabs-panel img,
.elementor-widget-woocommerce-product-content img{
  display:block;height:auto;max-width:100%;
  margin:16px 0;border:1px solid var(--line);border-radius:4px;
}

/* ==================================================================
   Produktseite – Aufräumen der WooCommerce-Standardausgabe

   Nachdem Elementor die Seite freigegeben hat, rendert WooCommerce selbst.
   Dessen Grundgestaltung bringt einiges mit, das hier stoert. Weiterhin nur
   Farbe, Rahmen und Schrift – die Anordnung bleibt bei WooCommerce.
   ================================================================== */

/* 1. Fremde Rahmen um Zusammenfassung und Reiterinhalt. Sie umschliessen
      Bereiche, die im Designsystem keine Kaesten sind, und zerschneiden die
      Seite optisch. */
.woocommerce div.product .summary,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .product_meta{
  border:0;background:transparent;box-shadow:none;
}

/* 2. Der Kaufbereich soll ein Kasten sein – aber ein gewollter, im selben
      Stil wie die Kacheln der Startseite. */
.woocommerce div.product form.cart{
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:4px;
  padding:20px 22px 22px;
}
.woocommerce div.product form.cart::after{content:"";display:table;clear:both}

/* 2a. Der Kaufbereich stapelt senkrecht.
      WooCommerce laesst Menge und Kaufknopf floaten und geht davon aus, dass
      darunter genug Platz ist. In der schmalen Produktspalte rutschten sie
      neben die Variantenwahl, und der grosse Preis darueber (1.9rem) lag dann
      hinter dem Auswahlfeld. Behoben wird nur die Zeilenschaltung – kein
      eigenes Raster ueber die WooCommerce-Bausteine gelegt.

      Die Spaltenbreiten sind nicht die Ursache: 44% + 52% ergeben dieselben
      96% wie der WooCommerce-Standard 48% + 48%. */
.woocommerce div.product p.price{display:block;clear:both;margin:0 0 .7em}
/* Variantenwahl als Stapel: Beschriftung ueber dem Auswahlfeld, nie daneben.
   Als Tabelle standen Beschriftung und Feld in einer Zeile, die bei knapper
   Breite ineinanderlief – gemessen als Ueberlappung von th.label und td.value.
   Bei einem einzigen Merkmal (Berichtsjahr) bringt die Tabellenform ohnehin
   nichts. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td{
  display:block;width:auto;
}
.woocommerce div.product form.cart table.variations th.label{margin-bottom:4px}

/* Menge und Kaufknopf stehen nebeneinander in einer eigenen Zeile.
   Mehr braucht der Kaufbereich nicht: WooCommerce stapelt seine Bausteine
   von sich aus richtig. Hier standen frueher acht weitere Regeln, die
   jedem Kind Float und Breite vorschrieben – sie sollten eine Ueberlappung
   heilen, deren Ursache woanders lag (siehe Kopf dieser Datei, Klassennamen)
   und haben dabei nur das Layout verbogen. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;clear:both;
}
.woocommerce div.product .woocommerce-variation-price{display:block;margin-bottom:12px}

/* 3. Der Hinweis "Angebot!" wird nicht angezeigt.
      Er erscheint nur, weil die kostenfreien Jahrgaenge als von 499 EUR
      reduziert gepflegt sind – gemeint ist aber ein dauerhaft kostenfreies
      Angebot, keine befristete Aktion. Ein Rabatt-Aufkleber ueber dem
      Dashboard-Bild widerspricht dieser Aussage und verdeckt zudem den
      Bildinhalt. Faellt die Aussage weg, sobald die Preise ohne
      Angebotspreis gepflegt sind. */
.woocommerce span.onsale{display:none}

/* 4. Artikelnummer, Kategorien und Schlagwoerter standen als grosser Block
      in Akzentfarbe direkt unter dem Kaufknopf – rund dreissig Verweise, die
      dort wie ein Stichwortverzeichnis wirken. Deutlich zurueckgenommen. */
.woocommerce div.product .product_meta{
  font-size:.72rem;line-height:1.6;color:var(--slate);
  border-top:1px solid var(--line);padding-top:14px;margin-top:20px;
}
.woocommerce div.product .product_meta a{color:var(--slate);text-decoration:none}
.woocommerce div.product .product_meta a:hover{color:var(--blue);text-decoration:underline}
.woocommerce div.product .product_meta > span{display:block;margin-bottom:4px}

/* 5. Die Reiterbeschriftung lautet bereits "Beschreibung"; die Ueberschrift
      darunter wiederholt sie nur. */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}


/* Produktseite im Stil der Startseite: Bildrahmen wie die
   Dashboard-Abbildungen, Reiter ohne Kastenoptik. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img{
  border:1px solid var(--line);border-radius:4px;
}
.woocommerce div.product .flex-control-thumbs img{
  border:1px solid var(--line);border-radius:3px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{margin-bottom:0}
.woocommerce div.product .woocommerce-tabs .panel{padding-top:26px}

/* ==================================================================
   Produktseite – Aufräumen, zweite Runde
   ================================================================== */

/* Der graue Rahmen laeuft um den gesamten Produktbereich und noch einmal um
   die Reiter. Er stammt nicht aus diesem Theme und widerspricht dem Aufbau
   der Startseite, die ohne solche Umrandungen auskommt. Kaesten gibt es hier
   nur dort, wo sie etwas bedeuten – beim Kaufbereich. */
.woocommerce div.product,
.woocommerce #content div.product,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .summary,
.woocommerce div.product div.images{
  border:0;background:transparent;box-shadow:none;
}

/* Die Schlagwortliste stand mit rund dreissig Eintraegen direkt unter dem
   Kaufknopf und war der laengste Text der Seite. Sie richtet sich an
   Suchmaschinen, nicht an Kunden – die Verweise bleiben als Kategorieseiten
   bestehen, nur hier verschwinden sie. Artikelnummer und Kategorien bleiben. */
.woocommerce div.product .product_meta .tagged_as{display:none}
.woocommerce div.product .product_meta{
  font-family:var(--body);font-size:.8rem;line-height:1.6;color:var(--slate);
}
.woocommerce div.product .product_meta span.sku_wrapper,
.woocommerce div.product .product_meta span.posted_in{display:block;margin-bottom:3px}

/* Bildbereich schlanker: Die Vorschaubilder nahmen mehr Platz ein als das
   Hauptbild. Sechs statt vier Spalten machen sie kleiner, und die Spalte
   selbst wird etwas schmaler zugunsten der Kaufseite rechts. */
@media (min-width:769px){
  .woocommerce div.product div.images{width:44%}
  .woocommerce div.product div.summary{width:52%}
}
.woocommerce div.product div.images .flex-control-thumbs li{margin-top:8px}
.woocommerce div.product div.images .flex-control-thumbs img{opacity:.75;transition:.15s ease}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--blue)}

/* Reiter ruhiger: keine Kastenoptik, nur eine Linie darunter. */
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-bottom:2px solid transparent;
  border-radius:0;margin:0 1.6rem 0 0;padding:0 0 10px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--blue)}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:0}

/* ==================================================================
   Grundlagen, die bisher vom Eltern-Theme kamen

   Vorbereitung fuer Etappe 2. Wird hello-elementor entfernt, fehlen sonst
   Dinge, die WordPress und Redakteure voraussetzen: die Klasse fuer
   Bildschirmleser, die Ausrichtungsklassen des Editors und die
   Bildunterschriften.
   ================================================================== */

/* Text nur fuer Bildschirmleser. WordPress erwartet diese Klasse; ohne sie
   erscheinen Hilfstexte mitten auf der Seite. */
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}
.screen-reader-text:focus{
  position:static !important;width:auto;height:auto;clip-path:none;
  white-space:normal;margin:0;padding:12px 18px;background:var(--navy);color:#fff;
}

/* Sprungmarke zum Inhalt – der erste Tabstopp fuer Tastaturnutzer. */
.skip-link{
  position:absolute;left:-9999px;z-index:999;
  padding:12px 18px;background:var(--navy);color:#fff;text-decoration:none;
}
.skip-link:focus{left:8px;top:8px}

/* Ausrichtungsklassen des Editors. */
.alignleft{float:left;margin:.4em 1.6em 1em 0}
.alignright{float:right;margin:.4em 0 1em 1.6em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignwide{max-width:min(100%,1160px)}
.alignfull{max-width:100%}
.khd-prose > .alignwide,
.khd-prose > .alignfull{max-width:100%}

/* Bildunterschriften. */
.wp-caption{max-width:100%;margin-bottom:1.2em}
.wp-caption img{border:1px solid var(--line);border-radius:4px}
.wp-caption-text,
.wp-element-caption{
  font-family:var(--mono);font-size:.72rem;color:var(--slate);
  margin-top:8px;line-height:1.5;
}

/* Von WordPress vorausgesetzte Klassen, ohne eigene Gestaltung. */
.sticky,.bypostauthor{}

/* Formularelemente erben die Schrift nicht von selbst. */
input,select,textarea,button{font-family:inherit;font-size:inherit}