/* Startseite: Leistungen als Karten direkt nach dem Hero.
   Nutzt die Theme-Tokens aus theme.css; Optik angelehnt an die Vorlage card-18
   (Anheben, Titel-Unterstreichung, Pfeil), aber ohne React. Die Einblendung kommt
   von .reveal auf dem li, das Anheben vom a: .reveal setzt selbst transform. */
.zoi-bereiche{padding:clamp(48px,6vw,80px) 0 clamp(48px,6vw,80px);scroll-margin-top:100px}
.zoi-bereiche__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;margin-bottom:24px}
.zoi-bereiche__marke{font:500 .6875rem/1.5 var(--font-mono);letter-spacing:.1em;color:var(--text-1);margin:0 0 8px}
.zoi-bereiche__marke span{color:var(--accent-text);margin-left:7px}
.zoi-bereiche h2{font:600 clamp(1.625rem,3vw,2.25rem)/1.15 var(--font-display);letter-spacing:-.025em;margin:0}
.zoi-bereiche__kopf>p{font-size:.9375rem;line-height:1.6;color:var(--text-2);margin:0;max-width:44ch}

.zoi-bereiche__raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.zoi-bereiche__raster>li{display:flex;min-width:0}
.zoi-bereiche__raster>.zoi-bereiche__breit{grid-column:1/-1}

.zoi-bereich{position:relative;display:flex;flex-direction:column;width:100%;padding:24px 26px 22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-1);overflow:hidden;isolation:isolate;text-decoration:none;transition:border-color .18s ease,box-shadow .25s ease,transform .25s var(--ease-out,cubic-bezier(.23,1,.32,1))}

.zoi-bereich__zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.zoi-bereich__tag{font:500 .625rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-dim);border-radius:100px;padding:6px 10px}
.zoi-bereich__ort{font:500 .625rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

.zoi-bereich h3{font:600 clamp(1.25rem,1.9vw,1.5rem)/1.25 var(--font-display);letter-spacing:-.02em;margin:0 0 8px}
.zoi-bereich__titel{background:linear-gradient(var(--accent-text),var(--accent-text)) left bottom/0 2px no-repeat;padding-bottom:2px;transition:background-size .5s ease}
.zoi-bereich__text{font-size:.875rem;line-height:1.6;color:var(--text-2);margin:0 0 18px}
.zoi-bereich__pfeil{margin-top:auto;display:block;width:20px;height:20px;color:var(--accent-text);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}

.zoi-bereich__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;margin-top:auto;padding:12px 20px;border-radius:100px;background:var(--accent);color:var(--accent-ink);font:600 .875rem/1.5 var(--font-display);white-space:nowrap}
.zoi-bereich__cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}

/* Hervorgehobene Karte mit Bild aus dem Beratungsbereich. */
.zoi-bereich--gross{flex-direction:row;padding:0}
.zoi-bereich__bild{position:relative;flex:0 0 50%;min-height:300px;overflow:hidden;border-right:1px solid var(--border);background:var(--bg-tief-2)}
.zoi-bereich__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.zoi-bereich__inhalt{display:flex;flex-direction:column;flex:1;min-width:0;padding:clamp(24px,3vw,40px)}
.zoi-bereich--gross h3{font-size:clamp(1.625rem,3vw,2.25rem);line-height:1.15;margin-bottom:12px}
.zoi-bereich--gross .zoi-bereich__text{font-size:.9375rem;margin-bottom:24px;max-width:50ch}

/* Abschluss: Kontakt als breites Band, damit niemand ohne nächsten Schritt bleibt. */
.zoi-bereich--band{flex-direction:row;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;border-color:var(--border-accent)}
.zoi-bereich__bandtext{flex:1 1 320px;min-width:0}
.zoi-bereich--band .zoi-bereich__zeile{margin-bottom:12px}
.zoi-bereich--band .zoi-bereich__text{margin:0}
.zoi-bereich--band .zoi-bereich__cta{margin:0}

.zoi-bereich:focus-visible{outline:3px solid var(--accent-text);outline-offset:4px}
.zoi-bereich:focus-visible .zoi-bereich__titel{background-size:100% 2px}
@media(hover:hover) and (pointer:fine){
  .zoi-bereich:hover{border-color:var(--accent-text);box-shadow:0 14px 34px rgba(var(--schatten-rgb),.22);transform:translateY(-5px)}
  .zoi-bereich:hover .zoi-bereich__titel{background-size:100% 2px}
  .zoi-bereich:hover .zoi-bereich__pfeil--weiter{transform:translateX(4px)}
  .zoi-bereich:hover .zoi-bereich__pfeil--runter{transform:translateY(4px)}
  .zoi-bereich:hover .zoi-bereich__cta{background:var(--accent-hell)}
  .zoi-bereich:hover .zoi-bereich__cta svg{transform:translateX(4px)}
  .zoi-bereich:hover .zoi-bereich__bild img{transform:scale(1.05)}
}
:root[data-theme="light"] .zoi-bereich:hover{box-shadow:0 14px 34px rgba(11,20,38,.1)}

@media(max-width:980px){.zoi-bereiche__raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .zoi-bereiche__raster{grid-template-columns:minmax(0,1fr);gap:10px}
  .zoi-bereich{padding:18px 18px 16px}
  .zoi-bereich__zeile{margin-bottom:10px}
  .zoi-bereich h3{margin-bottom:4px}
  .zoi-bereich__text{font-size:.8125rem;margin-bottom:0;padding-right:28px}
  .zoi-bereich__pfeil{position:absolute;right:18px;bottom:16px}
  .zoi-bereich--gross{flex-direction:column;padding:0}
  .zoi-bereich__bild{flex:none;min-height:0;height:150px;border-right:0;border-bottom:1px solid var(--border)}
  .zoi-bereich__inhalt{padding:18px}
  .zoi-bereich--gross .zoi-bereich__text{font-size:.875rem;margin-bottom:16px;padding-right:0}
  .zoi-bereich--band .zoi-bereich__text{padding-right:0}
  .zoi-bereich__cta{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .zoi-bereich,.zoi-bereich__titel,.zoi-bereich__pfeil,.zoi-bereich__cta svg,.zoi-bereich__bild img{transition:none}
  .zoi-bereich:hover{transform:none}
  .zoi-bereich:hover .zoi-bereich__pfeil--weiter,.zoi-bereich:hover .zoi-bereich__pfeil--runter,.zoi-bereich:hover .zoi-bereich__cta svg,.zoi-bereich:hover .zoi-bereich__bild img{transform:none}
}

/* Kontaktbereich: Telefon und WhatsApp mit kleiner Zusatzzeile darunter (04.11.2026). */
.contact-detail-text{display:flex;flex-direction:column;min-width:0}
.contact-detail .contact-detail-text>a{min-height:0;padding-top:2px;font-weight:500}
.contact-detail-text>span{font-size:.8125rem;color:var(--text-3)}
.contact-detail .contact-detail-text>span a{display:inline;min-height:0;color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.contact-detail .contact-detail-text>span a:hover{color:var(--accent-text)}
.contact-detail .contact-whatsapp{color:var(--accent-text)}