/* =========================================================================
   auftraege.css  -  Zusatz-Stylesheet neben style.css
   Wird eingebunden auf: index.html, auftraege-fuer-handwerker.html,
   heizung-und-sanitaer.html
   Erzeugt aus _vorschau/auftraege.css plus den Verfeinerungen, die zuvor
   nur inline in index.html standen. Nicht von Hand in den HTML-Dateien
   aendern, sondern hier.
   ========================================================================= */

/* ===========================================================================
   Zusatz-CSS fuer die Auftraege-Matrix (Hub + Gewerk x Stadt).
   Wird nach Freigabe ans Ende von assets/css/style.css angehaengt.
   Nutzt ausschliesslich die vorhandenen Custom Properties aus :root.
   Ueberschreibt keine bestehende Regel.
   =========================================================================== */

/* --- Anruf-Ticker, helle Fassung -----------------------------------------
   Weisse Karte, dunkle Schrift, farbige Kante links je nach Dringlichkeit.
   Kontraste auf Weiss: Ink 14,9:1, gedaempftes Grau #6b7683 4,9:1,
   Fusszeile in --brand-text 5,07:1. Reines --brand waere 1,53:1.
   ------------------------------------------------------------------------ */
.calltick{
  background:#fff;color:var(--ink);border-radius:var(--r-lg);
  padding:20px 20px 16px;font-family:var(--f-body);
  border:1px solid #e9ecf3;
  box-shadow:
    0 1px 3px rgba(30,58,110,.07),
    0 18px 40px -24px rgba(30,58,110,.28),
    0 0 60px 14px rgba(150,200,255,.55),
    0 0 120px 40px rgba(110,170,250,.34),
    0 40px 170px 30px rgba(88,145,245,.22);
}
.ct-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:13px;margin-bottom:4px;
  border-bottom:1px solid #eef0f5;
}
.ct-live{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;color:var(--ink)}
.ct-pulse{
  width:9px;height:9px;border-radius:50%;flex:none;background:#22a055;
  box-shadow:0 0 0 0 rgba(34,160,85,.7);animation:ctPulse 2s infinite;
}
@keyframes ctPulse{
  70%{box-shadow:0 0 0 9px rgba(34,160,85,0)}
  100%{box-shadow:0 0 0 0 rgba(34,160,85,0)}
}
.ct-day{font-size:13px;color:#8a94a3}

.ct-viewport{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 10px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 10px),transparent 100%);
}
.ct-list{
  list-style:none;margin:0;padding:0;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.ct-row{
  display:grid;grid-template-columns:46px 20px 1fr auto;align-items:center;gap:11px;
  padding:11px 0 11px 13px;border-bottom:1px solid #eef0f5;
  border-left:3px solid transparent;
}
.ct-row:last-child{border-bottom:0}
.ct-list.ct-anim .ct-row{
  opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease;
}
.ct-list.ct-anim .ct-row.is-in{opacity:1;transform:none}

.ct-row--rot{border-left-color:#e2484c}
.ct-row--gelb{border-left-color:#e9a107}
.ct-row--gruen{border-left-color:#22a055}
.ct-time{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;color:var(--ink)}
.ct-kanal{display:block;width:16px;height:16px;color:#98a2b1}
.ct-kanal svg{width:16px;height:16px;display:block}
.ct-row--rot .ct-kanal{color:#e2484c}
.ct-row--gelb .ct-kanal{color:#c98803}
.ct-row--gruen .ct-kanal{color:#1c8a49}
.ct-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ct-leistung{font-size:14.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.ct-ort{font-size:12.5px;color:#8a94a3;line-height:1.2}
.ct-num{
  font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap;
  color:#98a2b1;letter-spacing:.3px;
}
.ct-foot{
  margin-top:13px;padding-top:13px;border-top:1px solid #eef0f5;
  font-size:14px;color:#6b7683;
}
.ct-foot strong{color:var(--brand-text)}
.ct-disclaimer{margin:12px 4px 0;font-size:12.5px;line-height:1.5;color:#8a94a3}

@media (prefers-reduced-motion:reduce){
  .ct-list.ct-anim .ct-row{opacity:1;transform:none;transition:none}
  .ct-list{transition:none}
  .ct-pulse{animation:none}
}
@media (max-width:560px){
  .ct-row{grid-template-columns:44px 18px 1fr}
  .ct-num{display:none}
}

/* --- Trust-Leiste unter dem Hero-CTA ------------------------------------ */
.trustbar{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 20px;
}
.trustbar li{
  display:flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--ink-2);
}
.trustbar svg{width:16px;height:16px;flex:none;color:var(--brand-text)}

/* --- Preis pro Anfrage in den price-cards ------------------------------- */
.lead-price{
  margin:6px 0 18px;padding:14px 0;border-block:1px solid var(--line);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.lead-price strong{
  font-family:var(--f-head);font-size:34px;line-height:1;color:var(--ink);
}
.lead-price span{font-size:14px;color:var(--body)}

/* --- Referenz-Kennzahlen ------------------------------------------------ */
.ref-stats{
  list-style:none;margin:14px 0 16px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.ref-stats li{display:flex;flex-direction:column;gap:3px}
.ref-stats strong{
  font-family:var(--f-head);font-size:22px;line-height:1.1;color:var(--brand-text);
}
.ref-stats span{font-size:12px;line-height:1.35;color:var(--body)}

/* --- Staedteliste ------------------------------------------------------- */
.citylist{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.citylist li{
  font-size:14px;font-weight:500;padding:7px 13px;border-radius:999px;
  background:var(--bg-alt);border:1px solid var(--line);color:var(--ink-2);
}

/* --- Querverlinkung Gewerk x Stadt -------------------------------------- */
.linklist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.linklist a{
  display:block;padding:11px 15px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;font-weight:500;
  color:var(--ink-2);text-decoration:none;transition:border-color .18s,transform .18s;
}
.linklist a:hover{border-color:var(--brand);transform:translateX(3px)}

/* --- Suchbegriffe pro Stadt --------------------------------------------- */
.kwlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.kwlist li{
  font-family:var(--f-body);font-size:13px;padding:6px 11px;border-radius:6px;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
}
.kwlist li::before{content:"\201E";color:var(--body)}
.kwlist li::after{content:"\201C";color:var(--body)}

/* --- Kasten "Was wir vorher klaeren" / "Wonach gesucht wird" ------------- */
.gebiet-box{
  background:var(--bg-alt);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px;
}
.gebiet-box h3{margin-top:0}

/* --- FAQ ---------------------------------------------------------------- */
.faq{max-width:860px;margin:0 auto}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:12px;overflow:hidden;
}
.faq-item summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 20px;position:relative;
  font-family:var(--f-head);font-weight:600;font-size:17px;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:22px;top:50%;
  width:10px;height:10px;margin-top:-6px;
  border-right:2px solid var(--brand-text);border-bottom:2px solid var(--brand-text);
  transform:rotate(45deg);transition:transform .2s;
}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq-item summary:focus-visible{outline:2px solid var(--brand-text);outline-offset:-2px}
.faq-answer{padding:0 20px 20px}
.faq-answer p{margin:0;color:var(--body)}

/* --- Fliesstext-Block --------------------------------------------------- */
.prose{max-width:820px;margin:0 auto}
.prose h2{margin-top:0}
.prose h3{margin-top:38px}
.prose p{color:var(--body)}
.prose .checklist{margin:18px 0}

/* --- Ablaufkarten: Zeile 1 Nummer + Ueberschrift, Zeile 2 Text ----------- */
.steps{gap:22px}
.feature--row{display:block;text-align:left}
.feature--row .feature-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.feature--row .feature-ico{
  flex:none;margin:0;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:700;font-size:19px;line-height:1;
}
.feature--row .feature-head h3{margin:0;font-size:21px;line-height:1.2}
.feature--row p{margin:0;padding-left:0}
@media (max-width:520px){
  .feature--row .feature-head{gap:11px}
  .feature--row .feature-ico{width:38px;height:38px;border-radius:10px;font-size:17px}
  .feature--row .feature-head h3{font-size:19px}
}

/* --- Foto in der Person-Sektion ----------------------------------------- */
.person-foto{
  width:100%;height:auto;display:block;border-radius:var(--r-lg);
  box-shadow:var(--shadow);object-fit:cover;
}

/* --- Checkliste mittig, fuer kurze Listen in zentrierten Sektionen ------- */
.checklist--mitte{
  width:max-content;max-width:100%;margin:32px auto;text-align:left;
}

/* --- Reduced Motion: Verlauf bleibt, Uebergaenge aus --------------------- */
.ct-list.ct-instant,
.ct-list.ct-anim.ct-instant .ct-row{transition:none}

/* --- Checkliste auf dunklem Grund ---------------------------------------
   Die Basisregel setzt color:#5a6875. Auf #0e1b2e sind das 2,2:1,
   WCAG 2.1 AA (1.4.3) verlangt 4,5:1. Weiss bei 88 Prozent ergibt 12,4:1.
   Der Haken im SVG hat stroke #8a6a00 und ist dort ebenfalls unsichtbar. */
.section--ink .checklist li{color:rgba(255,255,255,.88)}
.section--ink .checklist li::before{
  background:rgba(255,202,0,.20) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffca00' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* =========================================================================
   HERO-VARIANTE "cesai"
   Heller Grund mit feinem Punktraster, Pill-Badge, sehr grosse Headline mit
   Verlaufswort, zwei Pill-Buttons, Ticker in einer weissen Karte.
   Markenlogik: Gelb bleibt CTA, der Verlauf laeuft im Blau des Fotos.
   Gelb als Textverlauf waere auf Weiss unter 2:1 und damit unlesbar.
   ========================================================================= */
.hero-x{
  position:relative;overflow:hidden;
  padding:clamp(56px,7vw,104px) 0 clamp(60px,7vw,96px);
  background:
    radial-gradient(circle at 1px 1px, rgba(14,27,46,.09) 1px, transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,#fdfdff 0%,#f7f8fc 100%);
}
.hero-x-glow{
  position:absolute;inset:auto -10% -40% 40%;height:70%;pointer-events:none;
  background:radial-gradient(45% 55% at 50% 50%,rgba(50,73,124,.13),transparent 70%);
  filter:blur(10px);
}
.hero-x-grid{
  position:relative;display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}

/* --- Badge --------------------------------------------------------------- */
.hero-x-pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px 9px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 2px 10px -4px rgba(14,27,46,.16);
  font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.1px;
}
.hero-x-dot{
  width:8px;height:8px;border-radius:50%;flex:none;background:var(--brand);
  box-shadow:0 0 0 0 rgba(255,202,0,.75);animation:hxPulse 2.4s infinite;
}
@keyframes hxPulse{
  70%{box-shadow:0 0 0 8px rgba(255,202,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,202,0,0)}
}

/* --- Headline ------------------------------------------------------------ */
.hero-x-h1{
  margin:26px 0 0;
  font-family:var(--f-head);font-weight:800;
  font-size:clamp(34px,4.6vw,60px);line-height:1.07;letter-spacing:-.022em;
  color:var(--ink);
}
.hero-x-grad{
  background:linear-gradient(96deg,#32497c 0%,#3f7fd8 55%,#5aa0ef 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#32497c;
}
.hero-x-lead{
  margin:22px 0 0;max-width:34em;
  font-size:clamp(15.5px,1.15vw,17px);line-height:1.75;color:var(--body);
}

/* --- Buttons ------------------------------------------------------------- */
.hero-x-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn-x{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;border-radius:999px;
  font-family:var(--f-head);font-weight:700;font-size:15.5px;
  text-decoration:none;border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-x:hover{transform:translateY(-2px)}
.btn-x--primary{
  background:linear-gradient(100deg,var(--brand) 0%,#ffb800 100%);
  color:var(--on-brand);
  box-shadow:0 14px 30px -12px rgba(255,184,0,.85);
}
.btn-x--primary:hover{box-shadow:0 18px 36px -12px rgba(255,184,0,.95)}
.btn-x--ghost{
  background:#fff;border-color:var(--line);color:var(--ink);
  box-shadow:0 2px 10px -6px rgba(14,27,46,.2);
}
.btn-x--ghost:hover{border-color:#c9d2dd}

/* --- Faktenzeile --------------------------------------------------------- */
.hero-x-facts{
  list-style:none;margin:34px 0 0;padding:26px 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 38px;
}
.hero-x-facts li{display:flex;flex-direction:column;gap:2px}
.hero-x-facts strong{
  font-family:var(--f-head);font-size:21px;line-height:1.1;color:var(--ink);
}
/* Nur die Beschriftung unter der Kennzahl, nicht die Spans im Sternsiegel.
   Ohne den Kindselektor faerbt diese Regel auch .hx-num und .hx-wort grau. */
.hero-x-facts li > span{font-size:13px;color:var(--body)}

/* --- Karte rechts -------------------------------------------------------- */
.hero-x-card{position:relative}
/* Zusaetzlicher, sehr breiter Farbschleier, damit der Schein wie bei der
   Vorlage weit auslaeuft statt an einer Kante zu enden. */
.hero-x-card::before{
  content:"";position:absolute;z-index:0;
  inset:-150px -120px -140px;pointer-events:none;
  background:
    radial-gradient(42% 36% at 48% 56%, rgba(88,145,245,.30) 0%, rgba(88,145,245,0) 70%),
    radial-gradient(48% 40% at 32% 40%, rgba(140,200,255,.28) 0%, rgba(140,200,255,0) 72%),
    radial-gradient(40% 34% at 72% 34%, rgba(180,206,255,.24) 0%, rgba(180,206,255,0) 74%);
}
.hero-x-card .calltick,
.hero-x-card .ct-disclaimer{position:relative;z-index:1}
.hero-x-card .ct-disclaimer{margin:14px 6px 0}
@media (max-width:980px){
  .hero-x-card::before{inset:-70px -40px -60px;filter:blur(34px)}
}

@media (max-width:980px){
  .hero-x-grid{grid-template-columns:1fr;gap:38px}
  .hero-x-lead{max-width:none}
  .hero-x-h1 br{display:none}
}
@media (max-width:520px){
  .hero-x-facts{gap:14px 24px}
  .btn-x{width:100%}
}


/* --- Aenderungen aus der Abstimmung -------------------------------------- */
/* 1) Kopfzeile der Anrufliste groesser */
.ct-live{font-size:20px;gap:11px}
.ct-live .ct-pulse{width:10px;height:10px}
.ct-day{font-size:12.5px;text-align:right;line-height:1.3}

/* 2) Akzentfarbe: bleibt bei #8a6a00 aus style.css, 5,07:1 auf Weiss. */

/* 5) Hover des Primaerbuttons. Ursache war a:hover{color:var(--brand-dark)}
   aus style.css, dadurch stand Dunkelgold auf Gelb. Verhalten jetzt wie
   bei .btn-primary: Flaeche dunkler, Textfarbe bleibt --on-brand. */
.btn-x--primary:hover,
.btn-x--primary:focus-visible{
  background:linear-gradient(100deg,var(--brand-dark) 0%,#e8a800 100%);
  color:var(--on-brand);
}
.btn-x--ghost:hover,
.btn-x--ghost:focus-visible{color:var(--ink)}

/* --- Leistungskatalog ---------------------------------------------------- */
/* Antwortblock direkt unter der H2: beantwortet die Frage in zwei Saetzen,
   damit LLMs und AI Overviews einen zitierfaehigen Absatz vorfinden. */
.antwortblock{
  max-width:760px;margin:0 auto 42px;text-align:center;
  font-size:17px;line-height:1.7;color:var(--ink-2);
}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px 22px;display:flex;flex-direction:column;
}
.lcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.lcard-head h3{margin:0;font-size:20px;line-height:1.25}
.lcard-badge{
  flex:none;font-size:11.5px;font-weight:700;letter-spacing:.2px;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  background:rgba(84,153,234,.14);color:#2f6cb5;
}
.lcard-badge--frei{background:rgba(34,160,85,.14);color:#1c7a42}
.lcard > p{margin:0 0 16px;font-size:14.5px;line-height:1.65;color:var(--body)}
.lchips{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.lchips li{
  font-size:12.5px;line-height:1.35;padding:6px 11px;border-radius:7px;
  background:var(--bg-alt);border:1px solid var(--line);color:var(--ink-2);
}
.lcard-foot{
  margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--body);
}
@media (max-width:1000px){.lgrid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){
  .lgrid{grid-template-columns:1fr}
  .antwortblock{font-size:16px;text-align:left}
}

/* --- Sektionsgrund wie im Hero: Punktraster plus heller Verlauf ---------- */
.section--raster{
  position:relative;
  background:
    radial-gradient(circle at 1px 1px, rgba(14,27,46,.09) 1px, transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,#fdfdff 0%,#f7f8fc 100%);
}
/* Weicher Farbschimmer, damit die Sektion nicht flach wirkt */
.section--raster::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 46% at 50% 6%, rgba(110,170,250,.13), transparent 70%);
}
.section--raster > .container{position:relative}
/* Die Chips stehen auf dem Raster, deshalb weiss statt --bg-alt */
.section--raster .lchips li{background:#fff}

/* --- Weitere Gewerke am Fuss der Leistungssektion ------------------------ */
.weitere-gewerke{
  margin:46px auto 0;max-width:1000px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 30px 26px;
}
.weitere-gewerke h3{margin:0 0 10px;font-size:21px;line-height:1.3}
.weitere-gewerke > p{
  margin:0 0 22px;max-width:70ch;font-size:14.5px;line-height:1.65;color:var(--body);
}
.wg-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px 26px;
}
.wg-item{
  display:flex;align-items:baseline;gap:8px;
  padding:8px 0;border-top:1px solid var(--line);
  font-size:14px;line-height:1.4;color:var(--body);
}
.wg-item:nth-child(-n+3){border-top:0}
/* Noch nicht gebaut: neutraler Text, kein Link, damit keine 404 entstehen */
.wg-item > span{color:var(--body)}
/* Bereits online */
.wg-item--live a{
  color:var(--ink);font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
.wg-item--live a::after{
  content:"";width:13px;height:13px;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:transform .18s ease;
}
.wg-item--live a:hover{color:var(--brand-text)}
.wg-item--live a:hover::after{transform:translateX(3px)}
/* Die Seite, auf der man gerade steht */
.wg-item--hier > span{color:var(--ink);font-weight:600}
.wg-item--hier em{
  font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.2px;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
  background:rgba(84,153,234,.14);color:#2f6cb5;
}
@media (max-width:900px){
  .wg-liste{grid-template-columns:1fr 1fr}
  .wg-item:nth-child(-n+3){border-top:1px solid var(--line)}
  .wg-item:nth-child(-n+2){border-top:0}
}
@media (max-width:600px){
  .weitere-gewerke{padding:24px 20px 20px}
  .wg-liste{grid-template-columns:1fr}
  .wg-item:nth-child(-n+2){border-top:1px solid var(--line)}
  .wg-item:first-child{border-top:0}
}

/* --- Fuenf Sterne statt der Zahl in der Hero-Faktenzeile ----------------- */
.hero-x-facts .hx-stars{
  display:flex;align-items:center;gap:3px;
  height:23px;                       /* entspricht der Zeilenhoehe von 21px/1.1 */
  color:var(--brand);
}
.hero-x-facts .hx-stars svg{width:19px;height:19px;display:block;flex:none}
@media (max-width:520px){
  .hero-x-facts .hx-stars svg{width:17px;height:17px}
}

/* Zahl vor den Sternen, Groesse wie die uebrigen Kennzahlen */
.hero-x-facts .hx-num{
  font-family:var(--f-head);font-weight:700;font-size:21px;line-height:1;
  color:var(--ink);margin-right:7px;
}
@media (max-width:520px){.hero-x-facts .hx-num{font-size:19px;margin-right:6px}}

/* Kurze Bezeichnungen: vier statt drei Spalten, sonst wird die Liste luftig */
@media (min-width:901px){
  .wg-liste{grid-template-columns:repeat(4,1fr);gap:2px 22px}
  .wg-item:nth-child(-n+3){border-top:1px solid var(--line)}
  .wg-item:nth-child(-n+4){border-top:0}
}


/* --- Bewertungssektion, uebernommen von der Startseite -------------------- */
.bewertungen-cta{margin:34px 0 0;text-align:center}


/* =========================================================================
   VERFEINERUNGEN AUS DER STARTSEITE
   Standen bis 10.09.2026 nur inline in index.html. Stehen bewusst am Ende,
   damit sie gleichrangige Regeln oben ueberschreiben (Kaskade).
   Neu darin: Herzschlag hinter dem Hero-Foto, .hero-x--inline fuer den
   zweiten Hero mitten auf der Seite, .card-media picture.
   ========================================================================= */
/* =========================================================================
   HERO-VARIANTE "X" fuer die Startseite (index-v2.html)
   Uebernommen aus Claude outputs/hero-neu-1.html.
   Heller Grund mit Punktraster, Pill-Badge, grosse Headline mit
   Verlaufswort, zwei Pill-Buttons, Faktenzeile, Bildkarte rechts.
   Rechte Spalte: bestehendes Hero-Foto statt Anfragen-Ticker.
   Kein Eingriff in style.css, keine bestehende Regel wird ueberschrieben.
   ========================================================================= */
.hero-x{
  position:relative;overflow:hidden;
  padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,80px);
  background:
    radial-gradient(circle at 1px 1px, rgba(14,27,46,.09) 1px, transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,#fdfdff 0%,#f7f8fc 100%);
}
.hero-x-glow{
  position:absolute;inset:auto -10% -40% 40%;height:70%;pointer-events:none;
  background:radial-gradient(45% 55% at 50% 50%,rgba(50,73,124,.13),transparent 70%);
  filter:blur(10px);
}
.hero-x > .container{position:relative;z-index:1}
.hero-x-grid{
  position:relative;display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}

/* --- Badge --------------------------------------------------------------- */
.hero-x-pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px 9px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 2px 10px -4px rgba(14,27,46,.16);
  font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.1px;
}
.hero-x-dot{
  width:8px;height:8px;border-radius:50%;flex:none;background:var(--brand);
  box-shadow:0 0 0 0 rgba(255,202,0,.75);animation:hxPulse 2.4s infinite;
}
@keyframes hxPulse{
  70%{box-shadow:0 0 0 8px rgba(255,202,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,202,0,0)}
}
@media (prefers-reduced-motion:reduce){.hero-x-dot{animation:none}}

/* --- Headline ------------------------------------------------------------ */
.hero-x-h1{
  margin:26px 0 0;
  font-family:var(--f-head);font-weight:800;
  font-size:clamp(32px,4.3vw,56px);line-height:1.07;letter-spacing:-.022em;
  color:var(--ink);
}
/* Gelb als Textverlauf laege auf Weiss unter 2:1. Der Verlauf laeuft
   deshalb im Blau des Hero-Fotos, Gelb bleibt CTA-Farbe. */
.hero-x-grad{
  background:linear-gradient(96deg,#32497c 0%,#3f7fd8 55%,#5aa0ef 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#32497c;
}
.hero-x-lead{
  margin:20px 0 0;max-width:34em;
  font-size:clamp(15.5px,1.15vw,17px);line-height:1.75;color:var(--body);
}


/* --- Buttons ------------------------------------------------------------- */
.hero-x-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn-x{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:999px;
  font-family:var(--f-head);font-weight:700;font-size:15.5px;
  text-decoration:none;border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-x svg{width:19px;height:19px;flex:none}
.btn-x:hover{transform:translateY(-2px)}
.btn-x--primary{
  background:linear-gradient(100deg,var(--brand) 0%,#ffb800 100%);
  color:var(--on-brand);
  box-shadow:0 14px 30px -12px rgba(255,184,0,.85);
}
/* a:hover{color:var(--brand-dark)} aus style.css wuerde sonst Dunkelgold
   auf Gelb setzen. Verhalten wie bei .btn-primary: Flaeche dunkler,
   Textfarbe bleibt --on-brand. */
.btn-x--primary:hover,
.btn-x--primary:focus-visible{
  background:linear-gradient(100deg,var(--brand-dark) 0%,#e8a800 100%);
  color:var(--on-brand);
  box-shadow:0 18px 36px -12px rgba(255,184,0,.95);
}
.btn-x--ghost{
  background:#fff;border-color:var(--line);color:var(--ink);
  box-shadow:0 2px 10px -6px rgba(14,27,46,.2);
}
.btn-x--ghost:hover,
.btn-x--ghost:focus-visible{border-color:#c9d2dd;color:var(--ink)}

/* --- Faktenzeile --------------------------------------------------------- */
.hero-x-facts{
  list-style:none;margin:32px 0 0;padding:24px 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 38px;
}
.hero-x-facts li{display:flex;flex-direction:column;gap:2px}
.hero-x-facts strong{
  font-family:var(--f-head);font-weight:700;font-size:21px;line-height:1.1;color:var(--ink);
}
/* Nur die Beschriftung unter der Kennzahl, nicht die Spans im Sternsiegel.
   Ohne den Kindselektor faerbt diese Regel auch .hx-num und .hx-wort grau. */
.hero-x-facts li > span{font-size:13px;color:var(--body)}
.hero-x-facts .hx-stars{
  display:flex;align-items:center;gap:3px;height:23px;color:var(--brand);
}
.hero-x-facts .hx-stars svg{width:19px;height:19px;display:block;flex:none}
.hero-x-facts .hx-num{
  font-family:var(--f-head);font-weight:700;font-size:21px;line-height:1;
  color:var(--ink);margin-right:7px;
}

/* --- Bildkarte rechts ----------------------------------------------------
   Der breite Farbschleier ersetzt die harte Kante des Bildes und
   entspricht dem Schein der Ticker-Karte in hero-neu-1.html. */
.hero-x-card{position:relative}
.hero-x-card::before{
  content:"";position:absolute;z-index:0;
  inset:-150px -120px -140px;pointer-events:none;
  background:
    radial-gradient(42% 36% at 48% 56%, rgba(70,132,242,.44) 0%, rgba(70,132,242,0) 70%),
    radial-gradient(48% 40% at 32% 40%, rgba(125,190,255,.40) 0%, rgba(125,190,255,0) 72%),
    radial-gradient(40% 34% at 72% 34%, rgba(165,198,255,.34) 0%, rgba(165,198,255,0) 74%);
}
.hero-x-card img{
  position:relative;z-index:1;display:block;width:100%;height:auto;
  border-radius:var(--r-lg);
  box-shadow:
    0 1px 3px rgba(30,58,110,.07),
    0 18px 40px -24px rgba(30,58,110,.28),
    0 0 60px 14px rgba(150,200,255,.45),
    0 0 120px 40px rgba(110,170,250,.26);
}

/* --- Siegelleiste --------------------------------------------------------
   Die Faktenzeile bringt bereits eine Trennlinie mit. Eine zweite Linie
   direkt darunter wirkt unruhig, deshalb hier nur Abstand. */
.hero-x .badges{margin-top:clamp(46px,5.5vw,64px);padding-top:0;border-top:0}

/* --- Breakpoints --------------------------------------------------------- */
@media (max-width:980px){
  .hero-x-card::before{inset:-70px -40px -60px;filter:blur(34px)}
  .hero-x-grid{grid-template-columns:1fr;gap:38px}
  .hero-x-lead{max-width:none}
  .hero-x-h1 br{display:none}
}
@media (max-width:520px){
  .hero-x-facts{gap:14px 24px}
  .btn-x{width:100%}
  .hero-x-facts .hx-stars svg{width:17px;height:17px}
  .hero-x-facts .hx-num{font-size:19px;margin-right:6px}
}

/* =========================================================================
   ERGAENZUNGEN 2. RUNDE
   ========================================================================= */

/* --- Herzschlag hinter dem Hero-Foto -------------------------------------
   Nur der Farbschleier pulst, nicht das Bild selbst. Ein skaliertes Bild
   waere bei jedem Frame ein Repaint der Hero-Flaeche, der Schleier laeuft
   als reine Compositor-Ebene (transform + will-change). */
.hero-x-card::before{
  transform-origin:50% 52%;
  will-change:transform,opacity;
  animation:hxHeartbeat 2.4s ease-in-out infinite;
}
@keyframes hxHeartbeat{
  0%   {transform:scale(1);      opacity:.70}
  12%  {transform:scale(1.11);   opacity:1}
  24%  {transform:scale(1.02);   opacity:.82}
  36%  {transform:scale(1.08);   opacity:.96}
  60%  {transform:scale(1);      opacity:.70}
  100% {transform:scale(1);      opacity:.70}
}
/* Der Schein liegt hinter einem deckenden Bild und ist allein kaum zu
   sehen. Das Bild schlaegt deshalb minimal mit, gleicher Takt.
   scale auf transform bleibt Compositor-Arbeit, kein Layout, kein Repaint. */
.hero-x:not(.hero-x--inline) .hero-x-card img{
  will-change:transform;
  animation:hxHeartbeatBild 2.4s ease-in-out infinite;
}
@keyframes hxHeartbeatBild{
  0%   {transform:scale(1)}
  12%  {transform:scale(1.026)}
  24%  {transform:scale(1.006)}
  36%  {transform:scale(1.019)}
  60%  {transform:scale(1)}
  100% {transform:scale(1)}
}
/* Windows-Einstellung "Animationseffekte" bzw. macOS "Bewegung reduzieren"
   schaltet beides ab. style.css killt ohnehin jede Animation per !important. */
@media (prefers-reduced-motion:reduce){
  .hero-x-card::before,
  .hero-x .hero-x-card img{animation:none}
}

/* --- USP-Liste im Hero: drei Punkte untereinander ------------------------ */
.hero-x .hero-usp{grid-template-columns:1fr;gap:12px;margin:26px 0 0}
.hero-x .hero-usp li{font-size:1rem}

/* --- Foto in der Person-Sektion ----------------------------------------- */
.person-foto{
  width:100%;height:auto;display:block;border-radius:var(--r-lg);
  box-shadow:var(--shadow);object-fit:cover;
}

/* --- Zweiter Hero-Block mitten auf der Seite -----------------------------
   Gleiche Optik wie der obere Hero, nur ohne dessen Kopfabstand. */
.hero-x--inline{padding:clamp(56px,7vw,96px) 0}
.hero-x--inline .hero-x-h1{font-size:clamp(30px,3.6vw,46px)}

/* --- Anruf-Ticker, helle Fassung -----------------------------------------
   Weisse Karte, dunkle Schrift, farbige Kante links je nach Dringlichkeit.
   Kontraste auf Weiss: Ink 14,9:1, gedaempftes Grau #6b7683 4,9:1.
   Reines --brand waere 1,53:1, deshalb steht die Fusszeile in --ink.
   ------------------------------------------------------------------------ */
.calltick{
  background:#fff;color:var(--ink);border-radius:var(--r-lg);
  padding:20px 20px 16px;font-family:var(--f-body);
  border:1px solid #e9ecf3;
  box-shadow:
    0 1px 3px rgba(30,58,110,.07),
    0 18px 40px -24px rgba(30,58,110,.28),
    0 0 60px 14px rgba(150,200,255,.55),
    0 0 120px 40px rgba(110,170,250,.34),
    0 40px 170px 30px rgba(88,145,245,.22);
}
.ct-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:13px;margin-bottom:4px;
  border-bottom:1px solid #eef0f5;
}
.ct-live{display:flex;align-items:center;gap:11px;font-weight:700;font-size:20px;color:var(--ink)}
.ct-pulse{
  width:10px;height:10px;border-radius:50%;flex:none;background:#22a055;
  box-shadow:0 0 0 0 rgba(34,160,85,.7);animation:ctPulse 2s infinite;
}
@keyframes ctPulse{
  70%{box-shadow:0 0 0 9px rgba(34,160,85,0)}
  100%{box-shadow:0 0 0 0 rgba(34,160,85,0)}
}
.ct-day{font-size:12.5px;color:#8a94a3;text-align:right;line-height:1.3}
.ct-viewport{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 10px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 10px),transparent 100%);
}
.ct-list{
  list-style:none;margin:0;padding:0;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.ct-row{
  display:grid;grid-template-columns:46px 20px 1fr auto;align-items:center;gap:11px;
  padding:11px 0 11px 13px;border-bottom:1px solid #eef0f5;
  border-left:3px solid transparent;
}
.ct-row:last-child{border-bottom:0}
.ct-list.ct-anim .ct-row{
  opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease;
}
.ct-list.ct-anim .ct-row.is-in{opacity:1;transform:none}
.ct-list.ct-instant,
.ct-list.ct-anim.ct-instant .ct-row{transition:none}
.ct-row--rot{border-left-color:#e2484c}
.ct-row--gelb{border-left-color:#e9a107}
.ct-row--gruen{border-left-color:#22a055}
.ct-time{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;color:var(--ink)}
.ct-kanal{display:block;width:16px;height:16px;color:#98a2b1}
.ct-kanal svg{width:16px;height:16px;display:block}
.ct-row--rot .ct-kanal{color:#e2484c}
.ct-row--gelb .ct-kanal{color:#c98803}
.ct-row--gruen .ct-kanal{color:#1c8a49}
.ct-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ct-leistung{font-size:14.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.ct-ort{font-size:12.5px;color:#8a94a3;line-height:1.2}
.ct-num{
  font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap;
  color:#98a2b1;letter-spacing:.3px;
}
.ct-foot{
  margin-top:13px;padding-top:13px;border-top:1px solid #eef0f5;
  font-size:14px;color:#6b7683;
}
.ct-foot strong{color:var(--ink)}
.ct-disclaimer{margin:12px 4px 0;font-size:12.5px;line-height:1.5;color:#8a94a3}
.hero-x-card .calltick,
.hero-x-card .ct-disclaimer{position:relative;z-index:1}
.hero-x-card .ct-disclaimer{margin:14px 6px 0}
/* Hinter der Ticker-Karte pulst nichts, der Schleier steht ruhig */
.hero-x--inline .hero-x-card::before{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .ct-list.ct-anim .ct-row{opacity:1;transform:none;transition:none}
  .ct-list{transition:none}
  .ct-pulse{animation:none}
}
@media (max-width:560px){
  .ct-row{grid-template-columns:44px 18px 1fr}
  .ct-num{display:none}
  /* 20px brechen auf 390px in zwei Zeilen um */
  .ct-live{font-size:16px;gap:9px}
  .ct-day{font-size:11.5px}
}

/* --- picture-Wrapper (AVIF mit WebP-Fallback) ---------------------------
   picture ist inline und wuerde unter dem Bild eine Baseline-Luecke lassen. */
.card-media picture,.split-media picture,.hero-x-card picture{display:block}

/* --- Sektionsgrund mit Punktraster, wie im Hero -------------------------- */
.section--raster{
  position:relative;
  background:
    radial-gradient(circle at 1px 1px, rgba(14,27,46,.09) 1px, transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,#fdfdff 0%,#f7f8fc 100%);
}
/* Weicher Farbschimmer, damit die Sektion nicht flach wirkt */
.section--raster::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 46% at 50% 6%, rgba(110,170,250,.13), transparent 70%);
}
.section--raster > .container{position:relative}
.bewertungen-cta{margin:34px 0 0;text-align:center}