/* ==========================================================================
   thgquoten.com - zentrale Komponenten (Redesign Schritt 7)
   Nur Token-Werte (var(--wp--preset--*)), keine festen Hex-Farben.
   Wird von Startseite und allen spaeteren Templates genutzt.
   ========================================================================== */

/* --- Intro-Absatz (mittig, Mockup-Breite 900px) --------------------------- */
.thg-intro{ max-width:56.25rem; margin-inline:auto; }

/* --- Eyebrow / Mikro-Label ------------------------------------------------ */
.thg-eyebrow{
  font-size:var(--wp--preset--font-size--body-small);
  font-weight:700;
  margin:0 0 var(--wp--preset--spacing--xs);
}

/* --- Hero ----------------------------------------------------------------- */
.thg-hero{ min-height:clamp(30rem,62vw,50.9rem); }
.thg-hero .wp-block-cover__image-background{ object-position:center 42%; }

.thg-hero-entry{
  background:color-mix(in srgb, var(--wp--preset--color--brand-white) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--wp--preset--color--brand-white) 28%, transparent);
  border-radius:8px;
  backdrop-filter:blur(6px);
  max-width:35rem;
}

/* Trust-Zeile im Hero: Logos auf hellen Chips, damit die Marken lesbar bleiben */
.thg-logo-chip{
  background:var(--wp--preset--color--brand-white);
  border-radius:6px;
  padding:6px 12px;
  display:inline-flex;
  align-items:center;
}
.thg-logo-chip img{ display:block; height:1.375rem; width:auto; }
.thg-logo-chip.is-badge img{ height:2.25rem; }

/* --- Prozess-Schritte ----------------------------------------------------- */
/* Karten wachsen mit ihrem Inhalt. Vorher height:100%, dadurch uebernahmen alle
   fuenf Karten die Hoehe von Schritt 5. Im Mockup fuellte die Sofort-Praemien-
   vorschau diesen Platz, die am 12.08.2026 gestrichen wurde. */
.thg-step{
  background:var(--wp--preset--color--brand-white);
  border:1px solid var(--wp--preset--color--brand-green-tint);
  border-radius:8px;
  align-self:start;
}
.thg-step-num{
  font-size:.8125rem;
  font-weight:600;
  color:var(--wp--preset--color--brand-accent-dark);
  margin:0 0 var(--wp--preset--spacing--xs);
}
.thg-icon-badge{
  width:2.875rem;height:2.875rem;border-radius:6px;
  background:var(--wp--preset--color--brand-green-tint);
  color:var(--wp--preset--color--brand-green);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--wp--preset--spacing--md);
}
.thg-icon-badge svg{ width:1.625rem;height:1.625rem;display:block; }
.thg-icon-badge.is-lg{ width:3.375rem;height:3.375rem; }

/* --- Preis-Kacheln (vorher Preistabelle) ----------------------------------
   Kundenwunsch 07.09.2026: Kacheln mit Motiv statt schlichter Tabelle.
   Pro Fahrzeugklasse ein Motiv (M3E-Material vom 09.09.2026). Das Motiv ist
   nur Hintergrund (alt=""), Klasse und Preise bleiben echter Text
   (Kick-off-Vorgabe: keine Preise in Grafiken). */
.thg-pricing-tiles{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--wp--preset--spacing--md);
}
.thg-price-tile{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  margin:0;
  overflow:hidden;
  border:1px solid var(--wp--preset--color--brand-green-tint);
  border-radius:8px;
  background:var(--wp--preset--color--brand-white);
}
/* Freier Motivbereich oberhalb des Textes */
.thg-price-tile::before{ content:""; display:block; aspect-ratio:16 / 9; }
.thg-price-tile-bg{
  position:absolute; z-index:-1; top:0; left:0;
  width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover;
  transition:scale .4s ease;
}
.thg-price-tile:hover .thg-price-tile-bg{ scale:1.03; }
/* Weisser Verlauf ueber dem unteren Motivrand: Text steht immer auf Weiss */
.thg-price-tile-body{
  flex:1;
  display:flex; flex-direction:column;
  margin-top:-2rem;
  padding:2rem var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
  background:linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--brand-white) 0%, transparent) 0, var(--wp--preset--color--brand-white) 2rem);
}
.thg-price-tile-klasse{
  margin:0;
  font-size:var(--wp--preset--font-size--body-title);
  font-weight:700; line-height:1.3;
  color:var(--wp--preset--color--brand-black);
}
.thg-price-tile-beispiel{
  margin:4px 0 var(--wp--preset--spacing--sm);
  font-size:var(--wp--preset--font-size--menu);
  color:var(--wp--preset--color--text);
}
.thg-price-tile-werte{
  margin:auto 0 0;
  padding-top:var(--wp--preset--spacing--sm);
  border-top:1px solid var(--wp--preset--color--brand-green-tint);
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--wp--preset--spacing--xs);
}
.thg-price-tile-werte dt{
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--wp--preset--color--brand-green);
  margin-bottom:2px;
}
.thg-price-tile-werte dd{
  margin:0;
  font-weight:700; white-space:nowrap;
  color:var(--wp--preset--color--brand-green);
}
.thg-price-tile-werte .is-praemie dd{ font-size:1.625rem; line-height:1.15; }
/* Bonus als Zeile mit Tint-Hintergrund, gleich aufgebaut in jeder Kachel */
.thg-price-tile-werte .is-bonus{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px;
  padding:4px 10px;
  border-radius:4px;
  background:var(--wp--preset--color--brand-green-tint);
}
.thg-price-tile-werte .is-bonus dt{ margin:0; }
.thg-price-tile-werte .is-bonus dd{ font-size:var(--wp--preset--font-size--menu); }

@media (max-width:1099px){
  .thg-pricing-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Schmal: Kachel quer, Motiv rechts, Text links auf deckendem Weiss */
@media (max-width:599px){
  .thg-pricing-tiles{ grid-template-columns:1fr; gap:var(--wp--preset--spacing--sm); }
  .thg-price-tile::before{ display:none; }
  .thg-price-tile-bg{ left:auto; right:0; top:50%; translate:0 -50%; width:60%; }
  .thg-price-tile-body{
    margin-top:0;
    padding:var(--wp--preset--spacing--sm);
    background:linear-gradient(to right, var(--wp--preset--color--brand-white) 55%, color-mix(in srgb, var(--wp--preset--color--brand-white) 0%, transparent) 75%);
  }
  .thg-price-tile-body > *{ max-width:62%; }
  .thg-price-tile-klasse{ font-size:var(--wp--preset--font-size--body-small); }
  .thg-price-tile-werte{ border-top:0; padding-top:0; }
  .thg-price-tile-werte .is-bonus{ padding:0; background:none; }
  .thg-price-tile-werte .is-praemie dd{ font-size:1.375rem; }
}
@media (prefers-reduced-motion:reduce){
  .thg-price-tile-bg{ transition:none; }
  .thg-price-tile:hover .thg-price-tile-bg{ scale:none; }
}

/* --- Preiskorridor-Grafik ------------------------------------------------- */
.thg-corridor{ position:relative; }
.thg-corridor svg{ display:block; width:100%; height:9.375rem; }
.thg-corridor-label{
  position:absolute; left:var(--wp--preset--spacing--sm); top:50%; transform:translateY(-50%);
  font-size:.8125rem; font-weight:700;
}
.thg-legend{ display:flex; flex-wrap:wrap; gap:var(--wp--preset--spacing--md); font-size:var(--wp--preset--font-size--body-small); }
.thg-legend span{ display:inline-flex; align-items:center; gap:8px; }
.thg-legend i{ display:block; width:1rem; flex:none; }
.thg-legend i.is-line{ height:2px; background:currentColor; opacity:.55; }
.thg-legend i.is-band{ height:8px; border-radius:2px; background:currentColor; }
.thg-flow{ display:flex; align-items:center; justify-content:space-between; gap:var(--wp--preset--spacing--sm); text-align:center; }
.thg-flow .thg-flow-step{ flex:1 1 0; font-size:var(--wp--preset--font-size--body-small); }
.thg-flow .thg-flow-arrow{ flex:none; opacity:.6; }
.thg-flow svg{ display:block; margin:0 auto var(--wp--preset--spacing--xs); }

/* --- Kacheln / Karten ----------------------------------------------------- */
.thg-card{
  background:var(--wp--preset--color--brand-white);
  border:1px solid var(--wp--preset--color--brand-green-tint);
  border-radius:8px;
  height:100%;
}
.thg-card.is-plain{ background:transparent; border:0; }
.thg-card-link{ text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.thg-card-link:hover{ text-decoration:underline; }
.thg-card-link svg{ width:1.0625rem; height:1.0625rem; flex:none; }

/* --- Trust-Leiste --------------------------------------------------------- */
.thg-trustbar{
  background:var(--wp--preset--color--brand-white);
  border:1px solid var(--wp--preset--color--brand-green-tint);
  border-radius:8px;
}
.thg-trustbar .thg-logos{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--wp--preset--spacing--md); }
.thg-trustbar .thg-logos img{ display:block; height:1.875rem; width:auto; }
.thg-trustbar .thg-logos img.is-badge{ height:2.5625rem; }
.thg-refslot{
  border:1px dashed color-mix(in srgb, var(--wp--preset--color--brand-green) 35%, transparent);
  border-radius:8px;
  text-align:center;
}

/* --- FAQ (core/details) ---------------------------------------------------
   Mockup: jede Frage eine gerahmte Box, kompakt, Kategorie-Label darueber. */
.thg-faq .wp-block-details{
  margin:0;
  border:1px solid var(--wp--preset--color--brand-green-tint);
  border-radius:6px;
  background:var(--wp--preset--color--brand-white);
  padding:var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  font-size:var(--wp--preset--font-size--button);
}
.thg-faq .wp-block-details+.wp-block-details{ margin-top:var(--wp--preset--spacing--xs); }
.thg-faq .wp-block-details summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:var(--wp--preset--spacing--md);
  font-weight:600;
  font-size:var(--wp--preset--font-size--button);
}
.thg-faq .wp-block-details summary::-webkit-details-marker{ display:none; }
.thg-faq .wp-block-details summary::after{
  content:""; flex:none; width:.5625rem; height:.5625rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-25%) rotate(45deg);
  transition:transform .2s ease;
}
.thg-faq .wp-block-details[open] summary::after{ transform:translateY(15%) rotate(-135deg); }
.thg-faq .wp-block-details summary:focus-visible{
  outline:2px solid var(--wp--preset--color--brand-green); outline-offset:2px;
}
.thg-faq .wp-block-details p{ margin-top:var(--wp--preset--spacing--sm); }
.thg-faq .thg-faq-group+.thg-faq-group{ margin-top:var(--wp--preset--spacing--md); }
.thg-faq .thg-faq-cat{ margin-bottom:var(--wp--preset--spacing--xs) !important; }

/* --- Kontaktliste (CTA-Band) --------------------------------------------- */
.thg-contact a{ text-decoration:none; }
.thg-contact a:hover{ text-decoration:underline; }
.thg-contact li{ display:flex; align-items:center; gap:var(--wp--preset--spacing--sm); }
.thg-contact svg{ width:1.1875rem; height:1.1875rem; flex:none; }
.thg-list-reset{ list-style:none; padding:0; margin:0; }

/* --- Footer --------------------------------------------------------------- */
.thg-footer-legal{ border-top:1px solid color-mix(in srgb, var(--wp--preset--color--brand-white) 20%, transparent); }
.thg-footer a{ text-decoration:none; }
.thg-footer a:hover{ text-decoration:underline; }

/* --- Header --------------------------------------------------------------- */
.thg-header .wp-block-navigation{ font-weight:500; }
.thg-header .wp-block-navigation a{ text-decoration:none; }
.thg-header .wp-block-navigation a:hover{ text-decoration:underline; }
.thg-header .wp-block-site-logo img{ height:2.5rem; width:auto; }
/* CTA-Label: Langfassung als Standard, Kurzfassung nur mobil (s. Media Query) */
.thg-header .thg-cta-short{ display:none; }

/* --- Hero: Trust-Zeile ---------------------------------------------------- */
.thg-hero-trust{
  border-top:1px solid color-mix(in srgb, var(--wp--preset--color--brand-white) 25%, transparent);
  margin-top:var(--wp--preset--spacing--xl);
}
.thg-hero-trust p{ margin:0; }
.thg-inline-icon{ display:inline-flex; vertical-align:-.2em; margin-right:.4em; }
.thg-inline-icon svg{ width:1.0625rem; height:1.0625rem; }

/* --- Callout (Geschaeftsmodell) ------------------------------------------ */
.thg-callout{ border-left:4px solid var(--wp--preset--color--brand-accent); border-radius:4px; }
.thg-callout p{ margin:0; }
.thg-callout-title{ font-weight:700; margin-bottom:.25rem !important; }

/* --- Korridor-Karte ------------------------------------------------------- */
.thg-corridor-card{ border-radius:8px; }
.thg-corridor-card p{ margin:0; }
.thg-flow-step svg{ width:1.5rem; height:1.5rem; }
.thg-flow-arrow svg{ width:1.25rem; height:1.25rem; }
.thg-flow .thg-flow-step{
  background:color-mix(in srgb, var(--wp--preset--color--brand-white) 10%, transparent);
  border-radius:6px;
  padding:var(--wp--preset--spacing--sm);
}
.thg-flow .thg-flow-step:last-child{
  background:color-mix(in srgb, var(--wp--preset--color--brand-white) 20%, transparent);
  font-weight:600;
}

/* --- KPI / Referenzslot --------------------------------------------------- */
.thg-kpi{ font-weight:700; line-height:1.1; margin-bottom:.25rem !important; }
.thg-kpi-block p{ margin:0; }
.thg-refslot p{ margin:0; }
.thg-refslot-title{ font-weight:600; }

/* --- FAQ-Kategorie -------------------------------------------------------- */
.thg-faq-cat{
  font-weight:700;
  color:var(--wp--preset--color--brand-green);
}
.thg-faq{ max-width:56.25rem; margin-inline:auto; }

/* --- Kontaktkarte im CTA-Band -------------------------------------------- */
.thg-contact-card{
  background:color-mix(in srgb, var(--wp--preset--color--brand-white) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--wp--preset--color--brand-white) 28%, transparent);
  border-radius:8px;
}
.thg-contact-card p{ margin:0; }
.thg-contact{ display:grid; gap:var(--wp--preset--spacing--sm); margin-top:var(--wp--preset--spacing--sm) !important; }

/* --- Footer-Listen -------------------------------------------------------- */
.thg-footer ul{ display:grid; gap:.5rem; }
.thg-footer .thg-legal-links{ display:flex; flex-wrap:wrap; gap:var(--wp--preset--spacing--md); }
.thg-footer .thg-footer-legal p{ margin:0; }
.thg-footer .thg-eyebrow{ opacity:.75; }

/* --- Mobile Feinschliff --------------------------------------------------- */
@media (max-width:781px){
  .thg-hero-entry{ max-width:none; }
  .thg-flow{ flex-direction:column; align-items:stretch; }
  .thg-flow .thg-flow-arrow{ transform:rotate(90deg); align-self:center; }
  .thg-trustbar .thg-logos{ gap:var(--wp--preset--spacing--md); }
}


/* --- Wortumbruch ----------------------------------------------------------
   Kern setzt word-break:break-word auf Absaetze. Bei deutschen Komposita
   zerlegt das Woerter mitten im Wort. Hier zurueckgedreht: es wird nur
   umbrochen, wenn ein Wort wirklich nicht in die Zeile passt. */
.thg-step p,.thg-step h3,.thg-card p,.thg-card h3,.thg-flow-step,
.thg-pricing td,.thg-pricing th,.thg-trustbar p,.thg-refslot p{
  word-break:normal;
  overflow-wrap:break-word;
}
.thg-step h3,.thg-card h3{ line-height:1.35; }

/* Hero: Einstiegskarte + Ueberschrift auf Mockup-Mass */
.thg-hero h1{ max-width:48rem; }
.thg-hero-entry .wp-block-buttons,
.thg-hero-entry .wp-block-button{ width:100%; }
.thg-hero-entry .wp-block-button__link{ width:100%; text-align:center; }
.thg-entry-title{ font-weight:700; margin:0 0 var(--wp--preset--spacing--sm) !important; }
.thg-hero-entry{ min-width:min(100%,25rem); }
.thg-hero-entry .wp-block-buttons{ margin-bottom:0; }

/* Hero-Trustzeile: Checks links, Presselogos rechts (eine Zeile ab 782px) */
@media (min-width:782px){
  .thg-hero-trust > .wp-block-group{ flex-wrap:nowrap; }
}

/* Flussdiagramm: Kaesten breit genug fuer "Quotenerloes am Markt" */
.thg-flow .thg-flow-step{ min-width:0; }
.thg-flow{ gap:var(--wp--preset--spacing--xs); }


/* --- Trust-Leiste: Blockbreiten + Trenner wie im Mockup ------------------- */
.thg-trustbar .thg-kpi-block{ max-width:14rem; }
.thg-trustbar .thg-refslot{ max-width:18rem; }
@media (min-width:782px){
  .thg-trustbar > .wp-block-group > :nth-child(n+2){ position:relative; }
  .thg-trustbar > .wp-block-group > :nth-child(n+2)::before{
    content:""; position:absolute; top:4px; bottom:4px;
    left:calc(-1 * var(--wp--preset--spacing--md) / 2); width:1px;
    background:var(--wp--preset--color--line);
  }
}

/* --- Hero-Trustzeile: Checks links, Presselogos rechts -------------------- */
.thg-hero-trust .wp-block-group{ margin-inline:0; }

/* --- Header mobil: Logo + CTA + Menue-Button in einer Zeile --------------
   Der CTA ist der Haupt-Conversionpfad und bleibt deshalb auch unter 781px
   in der Leiste sichtbar. Damit bei 375px nichts umbricht, traegt er dort
   die Kurzfassung des Labels und steht links vom Burger-Icon. */
@media (max-width:781px){
  .thg-header .wp-block-site-logo img{ height:2.1rem; }
  .thg-header .wp-block-buttons{ order:-1; }
  .thg-header .wp-block-button__link{ white-space:nowrap; padding-left:16px; padding-right:16px; }
  .thg-header .thg-cta-full{ display:none; }
  .thg-header .thg-cta-short{ display:inline; }
}

/* --- Links auf dunklen Flaechen ------------------------------------------
   elements.link ist global brand-green; auf Dunkelgruen waere das unlesbar. */
.thg-footer a,
.thg-cta a,
.thg-corridor-card a{ color:var(--wp--preset--color--brand-white); }
.thg-footer a:hover,
.thg-cta a:hover{ color:var(--wp--preset--color--brand-white); text-decoration:underline; }
.thg-footer a:focus-visible,
.thg-cta a:focus-visible{ outline:2px solid var(--wp--preset--color--brand-white); outline-offset:2px; }

/* Footer-Links in Mockup-Groesse, damit lange Labels einzeilig bleiben */
.thg-footer ul{ font-size:var(--wp--preset--font-size--body-small); }


/* --- Sections stossen direkt aneinander (keine Fugen wie im Mockup) ------ */
.wp-block-post-content > *{ margin-block-start:0 !important; margin-block-end:0 !important; }

/* Kern gibt dem summary eigenes Padding; im FAQ traegt es die Box (Mockup 53px Zeile) */
.thg-faq .wp-block-details summary{ padding:0; }

/* =========================================================================
   Feinabgleich gegen die Figma-Werte (Inspector) - 14.08.2026
   ========================================================================= */

/* Header/Main/Footer stossen ohne Fuge aneinander */
.wp-site-blocks > *{ margin-block-start:0 !important; margin-block-end:0 !important; }

/* --- Header: Logo ganz links, Navigation/Button ganz rechts (Mockup 40px) -- */
.thg-header > .wp-block-group{ max-width:none; }
.thg-header{ padding-left:var(--wp--preset--spacing--lg); padding-right:var(--wp--preset--spacing--lg); }
@media (max-width:781px){
  .thg-header{ padding-left:var(--wp--preset--spacing--md); padding-right:var(--wp--preset--spacing--md); }
}

/* --- Hero ---------------------------------------------------------------- */
/* <strong> waere bei font-weight:300 nur "bolder" = 400 -> explizit 700 */
.thg-hero h1 strong{ font-weight:700; }
.thg-hero-trust .thg-inline-icon{ color:var(--wp--preset--color--mint); }
.thg-hero-trust .thg-label{ color:var(--wp--preset--color--mist); }

/* Kleines Label "bekannt aus" */
.thg-label{ font-size:.75rem !important; }
.thg-trustbar .thg-label{ color:var(--wp--preset--color--soft); }

/* --- Intro-Absatz: 19/30, zentriert, Token ink --------------------------- */
.thg-intro{
  text-align:center;
  line-height:30px;
  color:var(--wp--preset--color--ink);
}

/* --- Karten: Titel Brand Green, Copy Token muted ------------------------- */
.thg-step h3,
.thg-card h3{ color:var(--wp--preset--color--brand-green); }
.thg-step p,
.thg-card p{ color:var(--wp--preset--color--muted); }

/* --- Preise -------------------------------------------------------------- */
.thg-lead{ color:var(--wp--preset--color--muted); line-height:24px; }
.thg-finetext{ color:var(--wp--preset--color--muted); }
.thg-pricing thead th{
  background:var(--wp--preset--color--brand-green);
  color:var(--wp--preset--color--sage-light);
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  font-size:.8125rem;
}
.thg-pricing .is-klasse{ color:var(--wp--preset--color--brand-green); font-weight:600; }
.thg-pricing .is-beispiel{ color:var(--wp--preset--color--muted); }
.thg-pricing td.is-wert{ color:var(--wp--preset--color--brand-black); }
.thg-pricing td.is-wert:last-child{ color:var(--wp--preset--color--brand-accent); }
@media (max-width:781px){
  .thg-pricing td.is-wert::before{
    text-transform:none; letter-spacing:0; font-weight:400;
    color:var(--wp--preset--color--muted);
  }
}

/* --- Preiskorridor: Grafik aus dem Mockup -------------------------------- */
.thg-corridor-plot{
  position:relative;
  height:9.375rem;
  border-radius:6px;
  background:color-mix(in srgb, var(--wp--preset--color--brand-white) 8%, transparent);
  overflow:hidden;
}
.thg-corridor-band{
  /* prozentual, damit das Band bei kleinerer Plot-Hoehe (mobil) mitwandert
     - auf dem 150px-Plot des Desktops ergibt das exakt 56px / 38px */
  position:absolute; left:0; right:0; top:37.333%; height:25.333%;
  box-sizing:border-box;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--wp--preset--color--mint) 35%, transparent),
    color-mix(in srgb, var(--wp--preset--color--brand-accent) 55%, transparent));
  border-top:2px solid var(--wp--preset--color--mint);
  border-bottom:2px solid var(--wp--preset--color--mint);
  display:flex; align-items:center;
}
.thg-corridor-band .thg-corridor-label{
  position:static; transform:none;
  padding-left:var(--wp--preset--spacing--sm);
  font-size:.8125rem; font-weight:700; color:var(--wp--preset--color--brand-white);
}
.thg-corridor-plot img{
  position:absolute; left:10.5%; top:0; width:79%; height:100%;
  object-fit:fill; display:block;
}
.thg-legend{ color:var(--wp--preset--color--sage-light); }

/* --- FAQ: Werte aus dem Inspector ---------------------------------------- */
.thg-faq .wp-block-details{ padding:16px 20px; }
.thg-faq .wp-block-details summary{
  font-size:.9375rem; font-weight:600; line-height:1;
  color:var(--wp--preset--color--brand-green);
}
.thg-faq .wp-block-details p{
  font-size:.875rem; line-height:22px;
  color:var(--wp--preset--color--muted);
  margin-top:var(--wp--preset--spacing--sm);
}
.thg-faq .thg-faq-cat{ color:var(--wp--preset--color--brand-accent); font-size:.8125rem; }

/* --- Referenzkunden-Slot -------------------------------------------------- */
.thg-refslot{
  border:1px dashed var(--wp--preset--color--line);
  border-radius:10px;
}
.thg-refslot .thg-refslot-title{
  font-size:.75rem; font-weight:600; line-height:1;
  color:var(--wp--preset--color--soft);
}
.thg-refslot p:last-child{
  font-size:.8125rem; line-height:18px; font-weight:400;
  color:var(--wp--preset--color--soft);
  margin-top:.5rem;
}

/* --- Abschluss-CTA: 40/44, Light + Bold-Span ----------------------------- */
.thg-cta h2{
  font-size:2.5rem; line-height:44px; font-weight:300;
  color:var(--wp--preset--color--brand-white);
}
.thg-cta h2 strong{ font-weight:700; }

/* Preset-Klassen von Kern tragen !important - hier gezielt ueberschreiben */
p.thg-intro{ line-height:30px; }
.thg-refslot .thg-refslot-title{ font-size:.75rem !important; }
.thg-refslot p:last-child{ font-size:.8125rem !important; }


/* Legende: gepunktete Linie wie im Mockup */
.thg-legend i.is-line{
  height:0; background:none;
  border-top:2px dotted currentColor; opacity:.75;
}
.thg-legend i.is-band{ background:color-mix(in srgb, var(--wp--preset--color--sage) 70%, transparent); opacity:1; }
.thg-flow .thg-flow-step{ font-size:.8125rem; line-height:1.35; }

/* =========================================================================
   Exakte Figma-Werte je Element (Inspector-Abgleich 14.08.2026)
   Alle Farben ueber Palette-Token, keine festen Hex-Werte.
   ========================================================================= */

/* --- Icon-Kacheln: oben LINKS, nicht zentriert ---------------------------
   Constrained-Layout setzt bei direkten Kindern margin-inline:auto. */
.thg-step .thg-icon-badge,
.thg-card .thg-icon-badge,
.thg-hero-entry .thg-icon-badge{ margin-left:0 !important; margin-right:auto !important; }

/* --- Preistabelle: Kopfzeile ---------------------------------------------- */
.thg-pricing thead th{
  font-size:.75rem; font-weight:600; line-height:1;
  padding-top:16px; padding-bottom:16px;
  color:var(--wp--preset--color--brand-white);
}
.thg-pricing thead th:nth-child(2){ color:var(--wp--preset--color--mist); }
.thg-pricing thead th:nth-child(4){ color:var(--wp--preset--color--mint); }
.thg-pricing .is-beispiel{ font-size:.9375rem; line-height:1; color:var(--wp--preset--color--muted-soft); }
.thg-finetext{ font-size:.8125rem !important; line-height:20px; color:var(--wp--preset--color--muted-soft); }

/* --- Transparenz-Section -------------------------------------------------- */
.thg-body-lg{ font-size:1rem !important; line-height:25px; color:var(--wp--preset--color--ink-soft); }
.thg-body-md{ font-size:.9375rem !important; line-height:24px; color:var(--wp--preset--color--muted); }
.thg-legend{ font-size:.75rem; color:var(--wp--preset--color--mist); }
.thg-corridor-note{ font-size:.75rem !important; line-height:18px; color:var(--wp--preset--color--mist); }
.thg-callout-title{ font-size:.9375rem !important; font-weight:600; line-height:1; color:var(--wp--preset--color--brand-accent); }
.thg-callout p:last-child{ font-size:.875rem !important; font-weight:500; line-height:23px; color:var(--wp--preset--color--text); }
.thg-flow .thg-flow-step{ border-radius:10px; }
.thg-flow .thg-flow-step:last-child{
  background:var(--wp--preset--color--brand-accent);
  color:var(--wp--preset--color--brand-white);
}

/* --- Zielgruppen-Kacheln -------------------------------------------------- */
.thg-tile{
  border-radius:16px;
  border-color:var(--wp--preset--color--hairline);
  background:var(--wp--preset--color--card);
}
.thg-tile h3{ font-size:1.3125rem !important; font-weight:700; line-height:1; color:var(--wp--preset--color--brand-green); }
.thg-tile p{ font-size:.9375rem !important; line-height:23px; color:var(--wp--preset--color--muted); }
.thg-card-link{ font-size:.921875rem; font-weight:600; line-height:1; color:var(--wp--preset--color--brand-accent); }

/* --- Vorteils-Karten ------------------------------------------------------ */
.thg-card:not(.thg-tile){ border-radius:14px; border-color:var(--wp--preset--color--hairline-2); }
.thg-step{ border-radius:14px; border-color:var(--wp--preset--color--hairline-2); }
.thg-card:not(.thg-tile) h3,
.thg-step h3{ font-size:1rem !important; font-weight:600; line-height:1.25; color:var(--wp--preset--color--brand-green); }
.thg-card:not(.thg-tile) p,
.thg-step p{ font-size:.875rem !important; line-height:21px; color:var(--wp--preset--color--muted); }

/* --- Trust-Leiste --------------------------------------------------------- */
.thg-kpi{ font-size:1.875rem !important; font-weight:700; line-height:1; color:var(--wp--preset--color--brand-green); }
.thg-kpi-block p:last-child{ font-size:.8125rem !important; line-height:1.35; color:var(--wp--preset--color--muted-soft); }

/* --- FAQ ------------------------------------------------------------------ */
.thg-faq .thg-faq-cat{ font-size:.8125rem !important; font-weight:600; line-height:1; color:var(--wp--preset--color--brand-accent); }

/* --- Abschluss-CTA -------------------------------------------------------- */
.thg-cta .thg-cta-copy{ font-size:1.0625rem !important; line-height:26px; color:var(--wp--preset--color--sage-pale); }
.thg-contact-card > p:first-child{
  font-size:.8125rem !important; font-weight:600; line-height:1;
  color:var(--wp--preset--color--mint);
}
.thg-cta .thg-contact a{ font-size:.9296875rem; color:var(--wp--preset--color--sage-bg); }
.thg-cta .thg-contact svg{ color:var(--wp--preset--color--sage-bg); }

/* --- Footer --------------------------------------------------------------- */
.thg-footer .thg-footer-intro{ font-size:.8125rem !important; line-height:20px; color:var(--wp--preset--color--sage-mid); }
.thg-footer .thg-eyebrow{
  font-size:.75rem !important; font-weight:600; line-height:1;
  color:var(--wp--preset--color--sage); opacity:1;
}
.thg-footer ul a{ font-size:.875rem; line-height:1; color:var(--wp--preset--color--sage-light); }
.thg-footer .thg-legal-links a{ font-size:.75rem; color:var(--wp--preset--color--sage-mid); }
.thg-footer .thg-footer-legal p{ font-size:.75rem !important; color:var(--wp--preset--color--sage-mid); }

/* Zeilenhoehen: :root :where(p) des Themes hat gleiche Spezifitaet -> p-Praefix */
p.thg-body-lg{ line-height:25px; }
p.thg-body-md{ line-height:24px; }
p.thg-callout-title{ line-height:1; }
p.thg-kpi{ line-height:1; }
.thg-kpi-block p:last-child{ line-height:1.25; }
.thg-cta .thg-contact a{ line-height:1; }
/* Kopfzeile bleibt 600, nur die Werte in den Datenzeilen sind fett */
.thg-pricing thead th.is-wert{ font-weight:600; }


/* =========================================================================
   Feinschliff 14.08.2026 (Runde 2)
   ========================================================================= */

/* Schrittnummer: 11px / 600 / Brand Accent */
.thg-step-num{
  font-size:.6875rem !important; font-weight:600; line-height:1;
  color:var(--wp--preset--color--brand-accent);
  margin-bottom:var(--wp--preset--spacing--xs);
}

/* Icon-Kachel: Brand Accent 12 %, Radius 11 px (46er) bzw. 13 px (54er) */
.thg-icon-badge{
  background:color-mix(in srgb, var(--wp--preset--color--brand-accent) 12%, transparent);
  border-radius:11px;
}
.thg-icon-badge.is-lg{ border-radius:13px; }

/* Zielgruppen-Kacheln: gleiche Hoehe, Links auf einer Linie
   (Mockup: Link sitzt unabhaengig von der Textlaenge immer auf gleicher Hoehe) */
.thg-tile p{ min-height:69px; }

/* Korridor-Karte: Label oben + "So entsteht Ihre Praemie" */
.thg-corridor-card > p:first-child{
  font-size:.8125rem !important; font-weight:500; line-height:1;
  color:var(--wp--preset--color--mist);
}
.thg-corridor-card .thg-eyebrow{
  font-size:.8125rem !important; font-weight:600; line-height:1;
  color:var(--wp--preset--color--mint);
}

/* Legende: gestrichelte weisse Linie und Mint-Band wie im Mockup */
.thg-legend i.is-line{
  height:0; background:none; opacity:1;
  border-top:2px dashed color-mix(in srgb, var(--wp--preset--color--brand-white) 50%, transparent);
}
.thg-legend i.is-band{
  height:8px; border-radius:2px; opacity:1;
  background:var(--wp--preset--color--mint);
}

/* .thg-step p (14px/muted) kommt spaeter -> Schrittnummer praeziser adressieren */
.thg-step p.thg-step-num{
  font-size:.6875rem !important; font-weight:600; line-height:1;
  color:var(--wp--preset--color--brand-accent);
}


/* Flussdiagramm: Icons und Pfeile in Mint, letzte Karte weiss */
.thg-flow .thg-flow-step svg,
.thg-flow .thg-flow-arrow svg{ color:var(--wp--preset--color--mint); }
.thg-flow .thg-flow-step:last-child svg{ color:var(--wp--preset--color--brand-white); }
.thg-flow .thg-flow-arrow{ opacity:1; }

/* Callout-Text bleibt 500 (Figma: Medium), alles andere folgt dem 400er Root */
.thg-callout p:last-child{ font-weight:500; }

/* Legende: Marker links, Korridor rechts (Mockup: 506px breit, space-between) */
.thg-legend{ justify-content:space-between; flex-wrap:nowrap; }

/* Vorteils-Icons sind im Mockup Brand Accent, Prozess-/Kachel-Icons Brand Green */
.thg-card:not(.thg-tile) .thg-icon-badge{ color:var(--wp--preset--color--brand-accent); }


/* KPI-Unterzeile: Desktop/Tablet 13px, mobil 12px (siehe Mobile-Block unten) */
.thg-kpi-block p:last-child{ font-size:.8125rem !important; line-height:1.4; }

/* Referenzkunden-Slot: eine Zeile, durchgehend Regular (Mockup) */
.thg-refslot p,
.thg-refslot p:last-child{
  font-size:.8125rem !important; line-height:18px; font-weight:400;
  color:var(--wp--preset--color--soft);
  margin-top:0;
}

/* Varianten, die sich zwischen Desktop- und Mobile-Mockup unterscheiden */
.thg-only-mobile{ display:none; }

/* Navigations-Overlay (mobiles Menue): dunkelgruen mit weisser Schrift */
.wp-block-navigation__responsive-container.has-modal-open,
.wp-block-navigation__responsive-container.is-menu-open{
  background-color:var(--wp--preset--color--brand-green) !important;
  color:var(--wp--preset--color--brand-white) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  color:var(--wp--preset--color--brand-white) !important;
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open{ color:var(--wp--preset--color--brand-white); }

/* Menue-Icon: der Kern liefert zwei Striche (M4 7.5h16 / M4 15h16), das Mockup
   hat drei. Geometrie 1:1 aus Frame.png: 24x24, Balken x 3 bis 21, 2px hoch,
   Oberkanten bei y 6 / 11 / 16. Ueber currentColor, damit das CI-Token greift. */
.wp-block-navigation__responsive-container-open svg{ display:none; }
.wp-block-navigation__responsive-container-open{
  position:relative;
  width:24px; height:24px;
  padding:0;
}
.wp-block-navigation__responsive-container-open::before{
  content:"";
  position:absolute; left:3px; top:11px;
  width:18px; height:2px;
  background:currentColor;
  box-shadow:0 -5px 0 currentColor, 0 5px 0 currentColor;
}
/* Overlay-Menue linksbuendig, nicht rechts wie die Desktop-Leiste */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  align-items:flex-start !important;
  justify-content:flex-start !important;
}

/* =========================================================================
   Mobile 375px - Abgleich mit der Mobile-Version des Mockups (Inspector)
   Steht bewusst am Ende: ueberschreibt die Desktop-Werte im gleichen Blatt.
   ========================================================================= */
@media (max-width:781px){

  /* --- Raster: 20px Rand, Inhalt 335px ----------------------------------- */
  /* Kern setzt die Randvariablen auf body, nicht auf :root */
  body{
    --wp--style--root--padding-left:20px;
    --wp--style--root--padding-right:20px;
  }
  .thg-header{ padding-left:20px; padding-right:20px; }

  /* --- Vertikalabstaende der Sections ------------------------------------ */
  .wp-block-post-content > .wp-block-group,
  .wp-block-post-content > .wp-block-cover{
    padding-top:var(--wp--preset--spacing--lg) !important;
    padding-bottom:var(--wp--preset--spacing--lg) !important;
  }
  .thg-footer{ padding-top:var(--wp--preset--spacing--lg) !important; }

  /* --- Ueberschriften: h2 22/26, h3 16/1 --------------------------------- */
  h2.wp-block-heading{ font-size:1.375rem !important; line-height:26px; }
  h3.wp-block-heading{ font-size:1rem !important; line-height:1.25; }

  /* --- Hero -------------------------------------------------------------- */
  .thg-hero h1{ font-size:1.8125rem !important; line-height:32px; max-width:none; }
  .thg-hero-sub{
    font-size:.8125rem !important; line-height:19px;
    color:var(--wp--preset--color--sage-pale) !important;
    max-width:none;
  }
  .thg-hero-sub strong{ font-weight:400; }
  .thg-hero-trust{ margin-top:var(--wp--preset--spacing--md); }
  .thg-hero-trust p{ font-size:.75rem !important; line-height:16px; }
  .thg-hero-trust .thg-inline-icon svg{ width:.875rem; height:.875rem; }
  /* Label auf eigener Zeile, darunter die vier Presselogos als ein weisser
     Balken (Mockup: eine Box, nicht vier einzelne Chips) */
  .thg-hero-trust > .wp-block-group > .wp-block-group:nth-child(1){
    gap:var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
  }
  /* Trennlinie sitzt zwischen Check-Zeile und "bekannt aus", nicht darueber */
  .thg-hero-trust{ border-top:0; padding-top:0 !important; }
  .thg-hero-trust > .wp-block-group > .wp-block-group:nth-child(2){
    column-gap:0; row-gap:var(--wp--preset--spacing--xs);
    justify-content:flex-start; align-items:stretch;
    margin-top:var(--wp--preset--spacing--md) !important;
    padding-top:var(--wp--preset--spacing--md);
    border-top:1px solid color-mix(in srgb, var(--wp--preset--color--brand-white) 25%, transparent);
  }
  .thg-hero-trust .thg-label{ flex-basis:100%; }
  .thg-hero-trust .thg-logo-chip{
    flex:1 1 0; min-width:0; justify-content:center; padding:6px 4px; border-radius:0;
  }
  .thg-hero-trust .thg-logo-chip:first-of-type{ border-radius:8px 0 0 8px; }
  .thg-hero-trust .thg-logo-chip:last-of-type{ border-radius:0 8px 8px 0; }
  /* 1px Ueberlappung: sonst bleibt zwischen den Chips eine Subpixel-Fuge
     stehen, die wie ein senkrechter Trennstrich aussieht */
  .thg-hero-trust .thg-logo-chip + .thg-logo-chip{ margin-left:-1px; }
  .thg-hero-trust .thg-logo-chip img{ height:.9375rem; max-width:100%; }
  .thg-hero-trust .thg-logo-chip.is-badge img{ height:1.4375rem; }

  /* --- Karten mit Icon links (Mockup: Icon-Kachel neben dem Text) --------- */
  .thg-step,
  .thg-card{
    display:grid; grid-template-columns:auto 1fr;
    column-gap:14px; align-items:start;
  }
  .thg-step > *,
  .thg-card > *{ margin-left:0 !important; margin-right:0 !important; max-width:none; }
  .thg-step > .thg-icon-badge,
  .thg-card > .thg-icon-badge{
    grid-column:1; grid-row:1 / span 9;
    margin-bottom:0 !important;
  }
  .thg-step > *:not(.thg-icon-badge),
  .thg-card > *:not(.thg-icon-badge){ grid-column:2; }
  .thg-tile p{ min-height:0; }
  /* Block-Gap des Constrained-Layouts greift in der Grid-Karte nicht mehr:
     Zeilenabstaende wie im Mockup direkt setzen */
  .thg-step > * + *,
  .thg-card > * + *{ margin-block-start:0 !important; }
  .thg-step > p.thg-step-num{ margin-bottom:2px !important; }
  .thg-step > h3,
  .thg-card > h3{ margin-top:0 !important; margin-bottom:8px !important; }
  .thg-card > .thg-card-link{ margin-top:10px !important; }

  /* --- Kartentypografie --------------------------------------------------- */
  .thg-tile h3{ font-size:1rem !important; line-height:1.25; }
  .thg-tile p{ font-size:.8125rem !important; line-height:19px; }
  .thg-card:not(.thg-tile) h3{ font-size:.90625rem !important; line-height:1.25; }
  .thg-card:not(.thg-tile) p,
  .thg-step p{ font-size:.8125rem !important; line-height:19px; }
  .thg-card-link{ font-size:.8125rem; }

  /* --- Fliesstext --------------------------------------------------------- */
  p.thg-intro,
  p.thg-body-lg,
  p.thg-body-md{ font-size:.8125rem !important; line-height:20px; }
  p.thg-lead{ font-size:.8125rem !important; line-height:19px; }

  /* --- Buttons: volle Breite, Radius 9px, 47px hoch ---------------------- */
  .wp-block-post-content .wp-block-buttons,
  .wp-block-post-content .wp-block-button{ width:100%; }
  .wp-block-post-content .wp-block-button__link{
    width:100%; text-align:center;
    border-radius:9px; padding-top:14px; padding-bottom:14px;
    font-size:.921875rem; font-weight:600;
  }

  /* --- Preiskorridor: Legende umbricht statt space-between ---------------- */
  .thg-legend{ flex-wrap:wrap; justify-content:flex-start; gap:8px 20px; }

  /* --- Trust-Leiste: gestapelt und zentriert wie im Mockup ---------------- */
  .thg-trustbar:not(.is-presse) > .wp-block-group{
    flex-direction:column; align-items:center; text-align:center;
  }
  .thg-trustbar:not(.is-presse) > .wp-block-group > :nth-child(1){ order:2; }
  .thg-trustbar:not(.is-presse) > .wp-block-group > :nth-child(2){ order:1; }
  .thg-trustbar:not(.is-presse) > .wp-block-group > :nth-child(3){ order:3; }
  .thg-trustbar .thg-kpi-block,
  .thg-trustbar .thg-refslot{ max-width:none; width:100%; }
  .thg-trustbar .thg-logos{
    justify-content:center; flex-wrap:nowrap;
    gap:var(--wp--preset--spacing--sm);
  }
  .thg-trustbar .thg-logos img{ height:1.125rem; max-width:100%; }
  .thg-trustbar .thg-logos img.is-badge{ height:1.5rem; }
  .thg-trustbar .thg-kpi-block{ margin-top:var(--wp--preset--spacing--md); }

  /* --- FAQ ---------------------------------------------------------------- */
  .thg-faq .wp-block-details{ padding:14px 16px; }
  .thg-faq .wp-block-details summary{ font-size:.875rem; line-height:1.3; }
  .thg-faq .wp-block-details p{ font-size:.8125rem !important; line-height:20px; }

  /* --- Abschluss-CTA: 24/27, Copy 14/21 in Weiss -------------------------- */
  .thg-cta h2{ font-size:1.5rem !important; line-height:27px; }
  .thg-cta .thg-cta-copy{
    font-size:.875rem !important; line-height:21px;
    color:var(--wp--preset--color--brand-white);
  }
  .thg-contact-card > p:first-child{ font-size:.75rem !important; }
  .thg-cta .thg-contact a{ font-size:.8125rem; }

  /* --- Footer: zwei Linkspalten nebeneinander, kleinere Skala ------------- */
  .thg-footer .wp-block-columns{ flex-direction:row !important; flex-wrap:wrap !important; }
  .thg-footer .wp-block-columns > .wp-block-column{ flex-basis:100% !important; }
  .thg-footer .thg-footer-intro{ font-size:.75rem !important; line-height:19px; }
  .thg-footer .thg-eyebrow{ font-size:.625rem !important; }
  .thg-footer ul a{ font-size:.8125rem; }
  .thg-footer .thg-legal-links a,
  .thg-footer .thg-footer-legal p{ font-size:.6875rem !important; }
  .thg-footer .thg-footer-legal{
    flex-direction:column; align-items:flex-start; gap:var(--wp--preset--spacing--sm);
  }

  /* --- Varianten umschalten ---------------------------------------------- */
  .thg-only-mobile{ display:block; }
  .thg-only-desktop{ display:none; }

  /* --- Korridor-Karte: im Mockup nur Titel, Grafik und der Kostenlos-Satz -- */
  .thg-corridor-card{ border-radius:14px; }
  .thg-corridor-card .thg-legend,
  .thg-corridor-card .thg-corridor-label,
  .thg-corridor-card .thg-flow,
  body.home .thg-flow,
  body.home .thg-callout{ display:none !important; }
  .thg-corridor-card .thg-corridor-plot{ height:6.5rem; border-radius:8px; }
  .thg-corridor-card > p:first-child{
    font-size:.6875rem !important; font-weight:600; line-height:1;
    color:var(--wp--preset--color--mint);
  }
  .thg-transparenz-cols{ gap:var(--wp--preset--spacing--lg) !important; }
  .thg-corridor-free{
    font-size:.75rem !important; line-height:18px;
    color:var(--wp--preset--color--sage-pale);
  }

  /* --- Zielgruppen-Kacheln: Link direkt unter dem Absatz ------------------ */
  .thg-tile p{ margin-bottom:0 !important; }
  .thg-card > .thg-card-link{ margin-top:6px !important; }

  /* --- Trust-Leiste: Trennlinie ueber dem Referenzkunden-Slot ------------- */
  .thg-trustbar .thg-kpi-block{
    padding-bottom:var(--wp--preset--spacing--md);
    border-bottom:1px solid var(--wp--preset--color--hairline);
  }
  .thg-kpi-block p:last-child{ font-size:.75rem !important; }
  .thg-trustbar .thg-refslot{ margin-top:var(--wp--preset--spacing--md) !important; }

  /* --- Abschluss-CTA: Kontakt als ein Satz statt Kachel ------------------- */
  .thg-contact-card{ display:none !important; }
  .thg-cta-contact-line{
    font-size:.75rem !important; line-height:19px;
    color:var(--wp--preset--color--brand-white);
  }
  /* im Mockup ist nur die Rufnummer unterstrichen */
  .thg-cta-contact-line a{ text-decoration:none; }
  .thg-cta-contact-line a[href^="tel:"]{ text-decoration:underline; }
  /* Zeilenumbruch wie im Mockup: "In 2 Minuten zur" / "THG-Praemie 2026" */
  .thg-cta h2 strong{ display:block; }
}


/* =========================================================================
   Abstaende vereinheitlichen (24.08.2026)
   ========================================================================= */

/* Presse-Balken im Hero: Zellen wachsen um ihre eigene Logobreite herum,
   dadurch sind die Abstaende zwischen den Logos gleich gross.
   flex-basis:0 hatte gleich breite Zellen erzeugt, aber ungleiche Luecken. */
@media (max-width:781px){
  .thg-hero-trust .thg-logo-chip{ flex:1 1 auto; }
}

/* Footer-Spalten: thgquoten.com und Kontakt stehen auf beiden Breiten
   nebeneinander und werden per space-between auseinandergezogen.
   Mobil bleibt nur die Logo-Spalte auf voller Breite. */
.thg-footer .wp-block-columns{ justify-content:space-between; }

@media (min-width:782px){
  /* Spalte 2 und 3 auf Inhaltsbreite: die feste flex-basis war breiter als
     der Text, dadurch endete Kontakt 70px vor dem Ende der Trennlinie. */
  .thg-footer .wp-block-columns > .wp-block-column:not(:first-child){
    flex-basis:auto !important;
    flex-grow:0;
  }
}

@media (max-width:781px){
  .thg-footer .wp-block-columns{
    flex-direction:row;
    gap:var(--wp--preset--spacing--lg);
  }
  /* Kern erzwingt hier flex-basis:100% auf jeder Spalte */
  .thg-footer .wp-block-columns > .wp-block-column{
    flex-basis:auto !important;
    width:auto;
    flex-grow:0;
  }
  .thg-footer .wp-block-columns > .wp-block-column:first-child{
    flex-basis:100% !important;
    width:100%;
  }
}

/* =========================================================================
   Kontaktseite: Personenkarte "Ihre THG-Kontaktperson bei M3E"
   Desktop: Foto + Name links, senkrechte Trennlinie, Kontaktzeilen rechts.
   Zwei Spalten (spaltenweise gefuellt: Mail/Adresse | Telefon/Hinweis) erst
   ab 1250px, weil die Spalten darunter nicht nebeneinander passen.
   Darunter: Kontaktzeilen einspaltig. Mobil zusaetzlich gestapelt.
   ========================================================================= */
.thg-person{
  background:var(--wp--preset--color--brand-white);
  border:1px solid var(--wp--preset--color--hairline-2);
  border-radius:16px;
}
.thg-person-inner{
  display:flex;
  align-items:center;
  gap:var(--wp--preset--spacing--xl);
}
.thg-person-inner > *{ margin:0 !important; }

.thg-person-id{
  flex:0 0 46%;
  display:flex;
  align-items:center;
  gap:var(--wp--preset--spacing--md);
}
.thg-person-id > *{ margin:0 !important; }
.thg-person-id .wp-block-image{ flex:none; }
.thg-person-id .wp-block-image img{ display:block; }
.thg-person-id-text{ min-width:0; }

h3.thg-person-name{
  font-size:1.3125rem !important; font-weight:700; line-height:1.25;
  color:var(--wp--preset--color--brand-green);
  margin:0 !important;
}
p.thg-person-role{
  font-size:.9375rem !important; font-weight:600; line-height:1.3;
  color:var(--wp--preset--color--brand-accent);
}
p.thg-person-hours{
  font-size:.9375rem !important; line-height:1.5;
  color:var(--wp--preset--color--muted);
}

.thg-person-contact{
  flex:1 1 0; min-width:0;
  border-left:1px solid var(--wp--preset--color--hairline);
  padding-left:var(--wp--preset--spacing--lg);
  /* Eine Spalte ist der Standard. Zwei Spalten brauchen nebeneinander
     202px + 156px min-content plus 40px Spaltenabstand = 398px; so breit
     wird die Kontaktspalte breit genug ab rund 1150px; sauber umbrechen die
     Zeilen darin aber erst ab 1250px. Vorher lief die zweite Spalte rechts
     aus der Karte heraus. */
  display:grid;
  grid-template-columns:1fr;
  grid-auto-flow:row;
  gap:var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
  align-content:start;
}

@media (min-width:1250px){
  /* spaltenweise Fuellung: DOM-Reihenfolge Mail, Adresse, Telefon, Hinweis
     ergibt damit Spalte 1 = Mail/Adresse, Spalte 2 = Telefon/Hinweis */
  .thg-person-contact{
    padding-left:var(--wp--preset--spacing--xl);
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    grid-auto-flow:column;
  }
}
.thg-person-contact > *{ margin:0 !important; }

/* Kundenpruefung 16.09.2026: Die Mailadresse brach bei 1440px zweizeilig um.
   Sie bleibt jetzt einzeilig; die linke Kontaktspalte ist mindestens so breit
   wie die Adresse und bekommt dafuer etwas mehr Platz, die Personenspalte
   gibt ab 1250px 6 Prozentpunkte ab. Beide Spalten starten auf derselben Linie. */
.thg-person-row a[href^="mailto:"]{ white-space:nowrap; }
@media (min-width:1250px){
  .thg-person-id{ flex-basis:40%; }
  .thg-person-contact{ grid-template-columns:minmax(min-content,1.25fr) 1fr; }
}

/* Icon-Zeilen. Die SVGs tragen nur ein viewBox, ohne width/height und ohne
   Flex-Kontext dehnen sie sich auf die volle Containerbreite (zuletzt 1052px). */
.thg-person-row{
  display:flex;
  align-items:flex-start;
  gap:var(--wp--preset--spacing--sm);
  font-size:.9375rem;
  line-height:1.5;
  color:var(--wp--preset--color--ink-soft);
}
.thg-person-row > svg{
  flex:none;
  width:1.1875rem;
  height:1.1875rem;
  margin-top:.15em;
  color:var(--wp--preset--color--brand-accent);
}

@media (max-width:781px){
  .thg-person{ padding:var(--wp--preset--spacing--md) !important; border-radius:14px; }
  .thg-person-inner{
    flex-direction:column;
    align-items:stretch;
    gap:var(--wp--preset--spacing--md);
  }
  .thg-person-id{
    flex:none;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:var(--wp--preset--spacing--sm);
  }
  .thg-person-contact{
    border-left:0;
    border-top:1px solid var(--wp--preset--color--hairline);
    padding-left:0;
    padding-top:var(--wp--preset--spacing--md);
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-auto-flow:row;
    gap:var(--wp--preset--spacing--sm);
  }
  /* Mockup-Reihenfolge mobil: Mail, Telefon, Adresse, Hinweis */
  .thg-person-contact > :nth-child(1){ order:1; }
  .thg-person-contact > :nth-child(2){ order:3; }
  .thg-person-contact > :nth-child(3){ order:2; }
  .thg-person-contact > :nth-child(4){ order:4; }
}

/* =========================================================================
   Kontaktformular: Absenden-Button in Markenfarbe
   WPForms faerbt den Button ausschliesslich ueber eigene Custom Properties.
   Die Standardwerte (Blau #066aab) schreibt das Plugin inline auf den
   Formularcontainer (#wpforms-193), also mit ID-Spezifitaet und weit nach
   den Global Styles. Statt dagegen anzuschreiben setzen wir dieselben
   Variablen eine Ebene tiefer auf dem Button selbst: der eigene Wert
   schlaegt den geerbten, ganz ohne !important und ohne feste Form-ID.
   Hover/Active legt das Plugin als dunkles Overlay ueber diesen Wert,
   folgt damit automatisch dem Gruen.
   ========================================================================= */
.wpforms-container button[type="submit"],
.wpforms-container input[type="submit"]{
  --wpforms-button-background-color:var(--wp--preset--color--brand-green);
  --wpforms-button-border-color:var(--wp--preset--color--brand-green);
  --wpforms-button-text-color:var(--wp--preset--color--brand-white);
}

/* Legal-Seiten (Impressum, Datenschutz, AGB, Widerruf):
   Das Theme haengt Einzug und Listenabstand an die Body-Klasse .m3e-legal
   (style.css: ".m3e-legal ol, .m3e-legal ul { padding-left: ... }" und
   ".m3e-legal li + li { margin-top: ... }"). Gemeint ist der Fliesstext,
   getroffen wird aber auch alles in Header und Footer: Listen eingerueckt,
   Legal-Zeile vertikal versetzt. Hier nur fuer Header/Footer zuruecknehmen -
   die Regeln greifen ausschliesslich auf Seiten mit dieser Body-Klasse. */
body.m3e-legal .thg-footer ul,
body.m3e-legal .thg-footer ol,
body.m3e-legal .thg-header ul{
  padding-left:0;
}
body.m3e-legal .thg-footer li + li,
body.m3e-legal .thg-header li + li{
  margin-top:0;
}

/* --- Zielgruppen-Kacheln: groessere Icons ---------------------------------
   Kundenfeedback 07.09.2026: die drei Einstiegs-Kacheln sollen auf einen Blick
   erkennbar machen, worum es geht. Nur die Badges der .thg-tile wachsen; die
   Icon-Kacheln der Vorteils-, Prozess- und Hero-Karten bleiben unveraendert.
   Ab 782 px steht das Icon ueber dem Text, es nimmt der Textspalte also keine
   Breite weg. Farben bleiben Brand Accent 12 % auf Brand Green wie gehabt. */
.thg-tile > .thg-icon-badge.is-lg{
  width:5.25rem;height:5.25rem;border-radius:20px;
}
.thg-tile > .thg-icon-badge.is-lg svg{ width:2.75rem;height:2.75rem; }

@media (max-width:781px){
  /* Mobil sitzt die Icon-Kachel links neben dem Text. Deshalb moderater
     vergroessern, damit die Textspalte bei 390 px breit genug bleibt. */
  .thg-tile > .thg-icon-badge.is-lg{
    width:4rem;height:4rem;border-radius:15px;
  }
  .thg-tile > .thg-icon-badge.is-lg svg{ width:2.125rem;height:2.125rem; }
}


/* =========================================================================
   "So funktioniert die THG-Quote": Liste statt Kacheln
   Kundenfeedback 07.09.2026: die fuenf Boxen hatten unterschiedliche Breiten
   und Hoehen, ausserdem wird das Kachelformat weiter unten noch einmal
   aufgegriffen. Die Schritte stehen jetzt untereinander, ohne Rahmen und
   ohne Flaeche. Die Icon-Kachel bleibt und sitzt links neben dem Text, wie
   in den Karten auf Mobil. Trennlinien statt Boxen halten die Reihenfolge
   lesbar. Fuenf gleich breite Zeilen, damit nichts mehr unruhig wirkt.
   ========================================================================= */
.thg-steplist > .thg-step-item{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:var(--wp--preset--spacing--sm);
  align-items:start;
  padding:var(--wp--preset--spacing--sm) 0;
  margin:0 !important;
  border-top:1px solid var(--wp--preset--color--brand-green-tint);
}
.thg-steplist > .thg-step-item:first-child{ border-top:0; padding-top:0; }
.thg-steplist > .thg-step-item:last-child{ padding-bottom:0; }

/* Icon-Kachel links, Textspalte rechts */
.thg-steplist > .thg-step-item > *{
  margin-left:0 !important; margin-right:0 !important; max-width:none;
}
.thg-steplist > .thg-step-item > * + *{ margin-block-start:0 !important; }
.thg-steplist > .thg-step-item > .thg-icon-badge{
  grid-column:1; grid-row:1 / span 9;
  margin:0 !important;
}
.thg-steplist > .thg-step-item > *:not(.thg-icon-badge){ grid-column:2; }

/* Typografie wie in den Prozess-Kacheln vorher, nur ohne Box */
.thg-steplist > .thg-step-item > p.thg-step-num{
  margin:0 0 2px !important;
  font-size:.6875rem !important; font-weight:600; line-height:1;
  color:var(--wp--preset--color--brand-accent);
}
.thg-steplist > .thg-step-item > h3{
  margin:0 0 4px !important;
  font-size:1rem !important; font-weight:600; line-height:1.25;
  color:var(--wp--preset--color--brand-green);
}
.thg-steplist > .thg-step-item > p:not(.thg-step-num){
  margin:0 !important;
  font-size:.875rem !important; line-height:21px;
  color:var(--wp--preset--color--muted);
  max-width:56rem;
  word-break:normal; overflow-wrap:break-word;
}

@media (max-width:781px){
  .thg-steplist > .thg-step-item{
    column-gap:14px;
    padding:var(--wp--preset--spacing--sm) 0;
  }
  .thg-steplist > .thg-step-item > p:not(.thg-step-num){
    font-size:.8125rem !important; line-height:19px;
  }
}


/* =========================================================================
   Mobil-Abnahme 10.09.2026
   ========================================================================= */

/* Footer: Cookie-Einstellungen. Complianz blendet seinen schwebenden
   Button unter 768px aus (banner-1-optin.css), mobil liesse sich die
   Einwilligung sonst nicht mehr aendern. Complianz bindet das Oeffnen an
   button.cmplz-manage-consent; hier nur wie die Legal-Links gestylt. */
.thg-footer .thg-legal-links button.cmplz-manage-consent{
  appearance:none; background:none; border:0; border-radius:0; padding:0; margin:0;
  font:inherit; font-size:.75rem; line-height:1;
  color:var(--wp--preset--color--sage-mid); cursor:pointer;
}
.thg-footer .thg-legal-links button.cmplz-manage-consent:hover{
  color:var(--wp--preset--color--brand-white); text-decoration:underline;
}
.thg-footer .thg-legal-links button.cmplz-manage-consent:focus-visible{
  outline:2px solid var(--wp--preset--color--brand-white); outline-offset:2px;
}
@media (max-width:781px){
  .thg-footer .thg-legal-links button.cmplz-manage-consent{ font-size:.6875rem !important; }
}

/* Legal-Seiten: ausgeschriebene URLs als Linktext brechen sonst nicht um
   und schieben die Seite mobil ueber den Rand. Nur der Inhaltsbereich. */
body.m3e-legal main a{ overflow-wrap:anywhere; }


/* Einheitlicher Eckenradius 8px fuer alle Flaechen und Buttons (Oliver, 30.09.2026).
   Vorher 4 bis 16px gemischt. Ausgenommen: Icon-Kacheln (.thg-icon-badge), Bonus-Etiketten (.is-bonus), runde Portraits. */
.thg-card, .thg-tile, .thg-callout, .thg-flow-step, .thg-refslot,
.thg-hero-entry, .thg-corridor-card, .thg-corridor-plot, .thg-trustbar,
.thg-contact-card, .thg-price-tile, .thg-logo-chip,
.wp-block-details, .wp-block-button__link, .wp-element-button,
.thg-stat, .thg-person, .thg-pagehead-motif img, .cmplz-manage-consent.cmplz-btn,
.wpforms-container, .wpforms-form input, .wpforms-form select, .wpforms-form textarea,
.wpforms-form button.wpforms-submit{ border-radius:8px !important; }


/* Icon-Kacheln einheitlich in Brand Green (Oliver nach Call mit Ploy, 30.09.2026).
   Vorher waren die Reihe "Ihr spezialisierter THG-Quoten-Anbieter" und die Kontakt-Icons
   der Ansprechpartner-Box hellgruen (#4C868B). Icons auf dunklem Grund bleiben Mint/Weiss. */
.thg-icon-badge,
.thg-person-row svg{ color:var(--wp--preset--color--brand-green) !important; }
.thg-person-row svg[stroke]:not([stroke="none"]){ stroke:var(--wp--preset--color--brand-green) !important; }


/* Zielgruppen-Kacheln mit Motiv statt Icon (Ploy im Call 30.09.2026, Motive aus ihrem
   Drive-Ordner "fuer die 3 Kategorien"). Grund: "Wofuer beantragen Sie" und "Ihr
   spezialisierter THG-Quoten-Anbieter" folgen als zwei gleich aussehende Kachelreihen
   aufeinander; die Reihenfolge der Sektionen bleibt. Motiv randlos oben in der Karte. */
.thg-tile{ overflow:hidden; }
.thg-tile > .thg-tile-motif{ margin:calc(-1 * var(--wp--preset--spacing--md)) calc(-1 * var(--wp--preset--spacing--md)) var(--wp--preset--spacing--sm) !important; max-width:none !important; width:auto !important; }
.thg-tile > .thg-tile-motif img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:0 !important; }


/* Trust-Leiste Startseite ohne Referenzkunden (Call Ploy 30.09.2026): die Kennzahl
   stand allein links in einer 1180px-Leiste. Jetzt mittig, Zahl und Erklaerung
   nebeneinander mit feiner Trennlinie; mobil zentriert untereinander. */
.thg-trustbar > .wp-block-group{ justify-content:center !important; }
.thg-trustbar .thg-kpi-block{ display:flex; align-items:center; justify-content:center; gap:var(--wp--preset--spacing--md); text-align:left; }
.thg-trustbar .thg-kpi-block > *{ margin:0 !important; max-width:none !important; flex:0 0 auto; }
@media (min-width:782px){ .thg-trustbar .thg-kpi-block > p:not(.thg-kpi){ white-space:nowrap; } }
.thg-trustbar .thg-kpi-block .thg-kpi{ padding-right:var(--wp--preset--spacing--md); border-right:1px solid var(--wp--preset--color--hairline); white-space:nowrap; }
@media (max-width:781px){
  .thg-trustbar .thg-kpi-block{ flex-direction:column; gap:.25rem; text-align:center; }
  .thg-trustbar .thg-kpi-block .thg-kpi{ padding-right:0; border-right:0; }
}


/* Frist-Hinweis THG-Quote 2026 (Footer-Template-Part). Seit 01.10.2026 mittiges Fenster mit
   abgedunkeltem Hintergrund wie auf m3e.group (Wunsch Ploy). Erscheint erst nach dem Cookie-Banner.
   Ab 03.11.2026 schaltet es sich selbst ab, danach Block hier und im Footer loeschen. */
.thg-deadline{ position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(16,40,37,.55); opacity:0; transition:opacity .25s ease; }
.thg-deadline.is-open{ opacity:1; }
.thg-deadline[hidden]{ display:none; }
.thg-deadline-card{ position:relative; width:min(480px, 100%); border:4px solid var(--wp--preset--color--brand-white); max-height:calc(100vh - 32px); overflow:auto; background:var(--wp--preset--color--brand-white); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.3); transform:translateY(16px) scale(.98); transition:transform .25s ease; }
.thg-deadline.is-open .thg-deadline-card{ transform:none; }
.thg-deadline p{ margin:0; }
.thg-deadline-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 64px 20px 28px; background:var(--wp--preset--color--brand-green); color:var(--wp--preset--color--brand-white); }
.thg-deadline-eyebrow{ font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8FD6C9; }
.thg-deadline-date{ font-size:1.125rem; font-weight:800; white-space:nowrap; }
.thg-deadline-body{ padding:26px 28px 24px; text-align:left; }
.thg-deadline-t{ font-size:1.5rem; font-weight:800; line-height:1.25; color:var(--wp--preset--color--brand-green); }
.thg-deadline-txt{ margin-top:10px !important; font-size:1rem; line-height:1.55; color:#333333; }
.thg-deadline-cta{ display:block; margin-top:20px; padding:14px 18px; border-radius:8px; background:var(--wp--preset--color--brand-green); color:var(--wp--preset--color--brand-white) !important; font-weight:700; font-size:1rem; text-align:center; text-decoration:none; }
.thg-deadline-cta:hover{ opacity:.92; }
.thg-deadline-login{ margin-top:14px !important; font-size:.875rem; text-align:center; color:#555B59; }
.thg-deadline-login a{ color:var(--wp--preset--color--brand-green) !important; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.thg-deadline-x{ position:absolute; top:16px; right:16px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:var(--wp--preset--color--brand-white); font-size:24px; line-height:1; cursor:pointer; }
.thg-deadline-x:hover{ background:rgba(255,255,255,.28); }
.thg-deadline a:focus-visible{ outline:2px solid var(--wp--preset--color--brand-green); outline-offset:3px; }
.thg-deadline-x:focus-visible{ outline:2px solid var(--wp--preset--color--brand-white); outline-offset:2px; }
body.thg-deadline-lock{ overflow:hidden; }
@media (max-width:781px){ .thg-deadline-head{ padding:18px 60px 16px 20px; } .thg-deadline-body{ padding:22px 20px 20px; } .thg-deadline-t{ font-size:1.3125rem; } }
@media (prefers-reduced-motion:reduce){ .thg-deadline, .thg-deadline-card{ transition:none; } }
@media print{ .thg-deadline{ display:none !important; } }



/* Schwebender Complianz-Knopf unten rechts aus (Oliver 30.09.2026): die Cookie-Einstellungen
   sind ueber den Knopf in der Footer-Rechtszeile auf jeder Seite erreichbar. */
#cmplz-manage-consent{ display:none !important; }


/* Zielgruppen-Kacheln verlinkt (Ploy 01.10.2026): bis zu den Landingpages im November geht die ganze
   Kachel auf die Registrierung. Der Link sitzt in der Ueberschrift und spannt per ::after die Kachel auf. */
.thg-tile{ position:relative; transition:box-shadow .2s ease, transform .2s ease; }
.thg-tile .thg-tile-link{ color:inherit; text-decoration:none; }
.thg-tile .thg-tile-link::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.thg-tile:hover{ box-shadow:0 10px 28px rgba(23,74,69,.16); transform:translateY(-2px); }
.thg-tile:has(.thg-tile-link:focus-visible){ outline:2px solid var(--wp--preset--color--brand-green); outline-offset:3px; }
.thg-tile .thg-tile-link:focus-visible{ outline:none; }
@media (prefers-reduced-motion:reduce){ .thg-tile{ transition:none; } .thg-tile:hover{ transform:none; } }

/* Leerer Link im Banner (Ploy 01.10.2026): eine eigene Cookie-Richtlinie gibt es nicht, Complianz
   rendert dafuer einen Link ohne Text. Datenschutz und Impressum bleiben stehen. */
.cmplz-documents li:has(.cookie-statement:empty){ display:none; }

/* Hinweis zur Bearbeitungsdauer unter den fuenf Schritten (Ploy 01.10.2026), vorher Teil von Schritt 5. */
.thg-step-note{ margin-top:var(--wp--preset--spacing--lg); padding:16px 20px; border-left:4px solid var(--wp--preset--color--brand-green); border-radius:8px; background:#EAF3F1; color:#333333; }
.thg-step-note p{ margin:0; }
/* === Mobil wie Desktop (Ploy 05.10.2026, Entscheid Oliver) ==============
   Ein Block, einzeln entfernbar. Hebt drei Mobil-Abweichungen auf:
   1. Hero: voller Desktop-Text, fett und weiss wie auf dem Desktop
   2. Presselogos: einzelne weisse Chips mit Abstand wie auf dem Desktop
      (vorher ein Balken mit -1px-Ueberlappung, durch den globalen
      8px-Radius sahen die Stoesse fehlerhaft aus)
   3. Preiskorridor: "So entsteht Ihre Praemie" samt Schritten und Satz
      darunter auch mobil (im Mockup mobil nicht vorgesehen) */
@media (max-width:781px){
  .thg-hero h1 .thg-only-desktop,
  .thg-hero-sub .thg-only-desktop{ display:inline; }
  .thg-hero-sub{ color:var(--wp--preset--color--brand-white) !important; }
  .thg-hero-sub strong{ font-weight:700; }

  .thg-hero-trust > .wp-block-group > .wp-block-group:nth-child(2){
    column-gap:var(--wp--preset--spacing--xs); flex-wrap:wrap;
  }
  .thg-hero-trust .thg-logo-chip,
  .thg-hero-trust .thg-logo-chip + .thg-logo-chip{
    flex:0 1 auto; margin-left:0; padding:6px 10px;
  }

  .thg-corridor-card .thg-only-desktop{ display:block; }
  .thg-corridor-card .thg-flow,
  body.home .thg-corridor-card .thg-flow{ display:flex !important; }
  .thg-corridor-card .thg-corridor-note{ display:none; }
}

/* Presselogos im Hero: alle Kaestchen so hoch wie das hoechste (Galileo),
   Logo mittig. Desktop und Mobil (Oliver 05.10.2026) */
.thg-hero-trust .thg-logo-chip{ align-self:stretch; justify-content:center; }
/* Link und Figur ohne Zeilenhoehe, sonst sitzt das Logo durch die
   Unterlaenge der Textzeile zu hoch im Kaestchen */
.thg-logo-chip figure,
.thg-logo-chip figure a{ display:flex; align-items:center; justify-content:center; line-height:0; margin:0; }

/* Layout-Verschiebung (CLS) 07.10.2026: Ersatzschrift in den Massen an Montserrat angeglichen,
   damit der Hero-Text beim Nachladen der Webfont nicht neu umbricht und den Vertrauensblock verschiebt.
   Rueckweg: diesen Block entfernen (Stand vorher = 03_technik/2026-10-05_thg-custom.css in der Kundenakte). */
@font-face{ font-family:"Montserrat Fallback"; src:local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust:112.83%; ascent-override:85.79%; descent-override:22.25%; line-gap-override:0%; }
@media (min-width: 782px){ body{ --wp--preset--font-family--montserrat: Montserrat, "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; } } /* nur Desktop: mobil war die Standard-Ersatzschrift stabiler (CLS 0,007 statt 0,079) */