/* EmpowHer by Emida — Stil der Website (seit 13.09.2026)
   Farben und Regeln: business/EmpowHer/09-Marktangebot/design.md
   Jede Änderung hier gilt für alle Seiten. Mobil (≤ 820 px) immer mitprüfen. */

@import url("/assets/fonts/manrope.css");

:root{
  --bg:#f2f2f2; --surface:#ffffff; --ink:#17191a; --ink-2:rgba(23,25,26,.68);
  --line:#d9d9d9; --accent:#1f6f4a; --btn:#17191a; --btn-ink:#ffffff;
  --kopf-ink:#f2f2f2; --kopf-ink-2:rgba(242,242,242,.72);
  --r:.4rem; --r-s:.2rem;
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(1rem,4vw,3rem);width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── Kopfzeile: schwarz, Logo weiß, Schrift im Hellgrau der Seite ── */
header.kopf{padding-block:.9rem;background:var(--ink);color:var(--kopf-ink)}
header.kopf .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;position:relative}
.wortmarke{display:flex;align-items:center;flex:none}
.wortmarke img{height:88px;width:auto;display:block}
.rechts{display:flex;align-items:center;gap:1.4rem;min-width:0}
nav.menue{display:flex;gap:1.4rem;font-size:.9rem;font-weight:500;color:var(--kopf-ink-2)}
nav.menue a:hover,nav.menue a[aria-current="page"]{color:var(--kopf-ink)}
.suche{position:relative;display:flex;align-items:center;gap:.5rem;background:rgba(242,242,242,.08);border:1px solid rgba(242,242,242,.28);border-radius:999px;padding:.45rem .9rem;width:220px;transition:border-color .2s,width .2s}
.suche:focus-within{border-color:var(--kopf-ink);width:260px}
.lupe{border:0;background:transparent;padding:0;margin:0;display:grid;place-items:center;color:var(--kopf-ink-2);cursor:pointer;flex:none}
.lupe svg{width:16px;height:16px}
.suche input{border:0;outline:0;background:transparent;font:inherit;font-size:.9rem;width:100%;color:var(--kopf-ink)}
.suche input::placeholder{color:rgba(242,242,242,.55)}
.treffer{position:absolute;top:calc(100% + .5rem);right:0;left:0;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px rgba(0,0,0,.14);padding:.4rem;z-index:30;min-width:280px}
.treffer a,.treffer .keins{display:flex;justify-content:space-between;gap:.8rem;padding:.6rem .7rem;border-radius:var(--r-s);font-size:.9rem}
.treffer a:hover,.treffer a:focus{background:var(--bg)}
.treffer a small,.treffer .keins{color:var(--ink-2);font-size:.78rem}
.treffer .keins{display:block;padding-bottom:.3rem}
.treffer .alle{display:flex;flex-wrap:wrap;gap:.35rem;padding:.3rem .7rem .5rem}
.treffer .alle a{padding:.3rem .6rem;border:1px solid var(--line);border-radius:999px;font-size:.8rem}
.login{font-size:.9rem;font-weight:600;padding:.5rem 1rem;border:1px solid rgba(242,242,242,.6);border-radius:999px;color:var(--kopf-ink);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.login:hover,.login[aria-current="page"]{background:var(--kopf-ink);color:var(--ink);border-color:var(--kopf-ink)}

/* ── Startseite ── */
.hero{padding-block:clamp(2.5rem,7vw,6rem) clamp(2rem,4vw,3rem)}
.hero .wrap{display:grid;grid-template-columns:1.4fr .6fr;gap:2rem;align-items:end}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:600;color:var(--accent);margin:0 0 1.1rem}
h1{font-weight:800;letter-spacing:-.045em;line-height:.98;font-size:clamp(2.4rem,6.2vw,5rem);margin:0;text-wrap:balance;max-width:14ch}
.hero p{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);max-width:38ch;margin:1.4rem 0 0;line-height:1.45}
.logo-gross{justify-self:end;width:min(100%,240px);height:auto;display:block}

.tueren{padding-block:0 clamp(3rem,7vw,6rem)}
.tueren .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.tuer{display:flex;flex-direction:column;justify-content:space-between;gap:2.6rem;min-height:212px;padding:1.4rem 1.4rem 1.3rem;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.tuer:hover{transform:translateY(-3px);border-color:var(--ink)}
.tuer .name{font-weight:800;letter-spacing:-.03em;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.05}
.tuer .hint{font-size:.9rem;color:var(--ink-2);margin-top:.5rem;line-height:1.35}
.tuer .fuss{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--ink-2)}
.pfeil{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
.pfeil svg{width:15px;height:15px}
.tuer:hover .pfeil{transform:translateX(4px);background:var(--accent);border-color:var(--accent);color:#fff}
.tuer.primaer{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.tuer.primaer .hint,.tuer.primaer .fuss{color:rgba(255,255,255,.72)}
.tuer.primaer .pfeil{border-color:rgba(255,255,255,.35);color:#fff}
.tuer.primaer:hover{border-color:var(--accent);background:#101213}
.tuer.bald .fuss span:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:.5rem;vertical-align:middle}

/* ── Innenseiten ── */
.seite{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem)}
.seite h1{font-size:clamp(2.2rem,5vw,4rem);max-width:12ch}
.seite .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);max-width:52ch;margin:1.4rem 0 0}
.prosa{max-width:62ch;color:var(--ink-2)}
.prosa h2{color:var(--ink);font-size:1.15rem;font-weight:800;letter-spacing:-.02em;margin:2rem 0 .6rem}
.prosa h3{color:var(--ink);font-size:1rem;font-weight:700;margin:1.4rem 0 .4rem}
.prosa p{margin:.6rem 0}
.prosa ul{padding-left:1.2rem}
.prosa strong{color:var(--ink);font-weight:600}
.prosa a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.prosa a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.hinweis{margin-top:2rem;padding:1rem 1.2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:.9rem;color:var(--ink-2);max-width:62ch}

/* Sprechstunde */
.sprech .wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2rem,5vw,5rem);align-items:start}
.sprech .zitat{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:500;letter-spacing:-.015em;line-height:1.3;margin:1.6rem 0 0;max-width:30ch}
.sprech .zitat::before{content:"„"}.sprech .zitat::after{content:"“"}
.sprech .text{margin:1.6rem 0 0;max-width:58ch;color:var(--ink-2);font-size:1.02rem}
.sprech .text strong{color:var(--ink);font-weight:600}
.richtig{margin-top:2.6rem}
.richtig h2{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;margin:0 0 .9rem}
.richtig ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;max-width:58ch}
.richtig li{display:grid;grid-template-columns:18px 1fr;gap:.7rem;align-items:start;color:var(--ink-2)}
.richtig li::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid var(--accent);margin-top:.15rem;background:radial-gradient(circle,var(--accent) 0 3px,transparent 3.5px)}
.richtig li b{color:var(--ink);font-weight:600}
.karte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;position:sticky;top:1rem}
.land{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;background:var(--bg);border-radius:999px;padding:.25rem;margin-bottom:1rem}
.land-btn{font:inherit;font-size:.78rem;font-weight:600;padding:.45rem .3rem;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.land-btn[aria-checked="true"],.land-btn:hover{background:var(--ink);color:#fff}
.karte .preis:not(.leer){color:var(--ink)}
.invest-label{margin:0 0 .45rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--accent)}
.karte .preis.leer{color:var(--line)}
.karte .preis.leer small{color:var(--ink-2)}
.invest-hinweis{margin:.5rem 0 0;font-size:.78rem;color:var(--ink-2)}
.invest-erklaerung{margin:-.1rem 0 .7rem;font-size:.8rem;line-height:1.4;color:var(--ink-2)}
.invest-hinweis[hidden]{display:none}
.karte .preis{font-weight:800;letter-spacing:-.04em;font-size:2.6rem;line-height:1}
.karte .preis small{font-size:1rem;font-weight:500;letter-spacing:0;color:var(--ink-2);margin-left:.4rem}
.fakten{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem;font-size:.92rem}
.fakten li{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.fakten li span:first-child{color:var(--ink-2)}
.fakten li span:last-child{font-weight:600;text-align:right}
.inklusive{margin:1.2rem 0 0;padding:.9rem 1rem;background:var(--bg);border-radius:var(--r-s);font-size:.88rem;line-height:1.45}
.inklusive b{display:block;font-weight:700;margin-bottom:.25rem}
.cta{margin-top:1.3rem;width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 1.1rem 1.05rem 1.25rem;border-radius:var(--r);border:1px solid var(--btn);background:var(--btn);color:var(--btn-ink);font-weight:700;font-size:1.02rem;cursor:pointer;transition:background .25s ease,border-color .25s ease;text-align:left}
.cta:hover{background:var(--accent);border-color:var(--accent)}
.cta .pfeil{width:30px;height:30px;background:rgba(255,255,255,.14);border-color:transparent;color:#fff}
.cta:hover .pfeil{transform:translateX(4px)}
.klein{margin-top:.9rem;font-size:.74rem;color:var(--ink-2);text-align:center}

/* Bald / Login / Formulare */
.box{max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:2rem}
.box h1{font-size:2.2rem;max-width:none}
.box .text{color:var(--ink-2);margin:1rem 0 0}
.formular{display:grid;gap:.4rem;margin-top:1.4rem}
.formular label{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--ink-2);margin-top:.6rem}
.formular input,.formular textarea{font:inherit;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);color:var(--ink);width:100%}
.formular textarea{min-height:140px;resize:vertical}
.formular input:focus,.formular textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.formular .check{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;text-transform:none;letter-spacing:0;font-size:.88rem;font-weight:500;color:var(--ink-2);margin-top:.8rem}
.formular .check input{width:auto;margin-top:.2rem}
.formular .cta{margin-top:1rem}
.formular .meldung{margin-top:1rem;padding:.9rem 1rem;border-radius:var(--r-s);background:var(--bg);font-size:.9rem}
.formular .meldung.ok{background:#e8f3ed;color:#14532d}
.formular .meldung.fehler{background:#fde8e8;color:#7f1d1d}
.zurueck{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--ink-2);margin-top:2rem}
.zurueck:hover{color:var(--ink)}
.zurueck svg{width:14px;height:14px;transform:rotate(180deg)}

/* ── Fußzeile ── */
footer.fuss-zeile{border-top:1px solid var(--line);padding-block:1.6rem 2.2rem;font-size:.82rem;color:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 1.5rem}
footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
footer a:hover{color:var(--ink)}
footer .mail{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
footer .mail:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ── Cookie-Banner: schwarz wie die Kopfzeile, unten, mobil volle Breite ── */
.cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:50;display:flex;justify-content:center;pointer-events:none}
.cookie[hidden]{display:none}
.cookie-inhalt{pointer-events:auto;background:var(--ink);color:var(--kopf-ink);border-radius:var(--r);padding:1.1rem 1.25rem;max-width:760px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.28);display:grid;gap:.9rem}
.cookie-inhalt p{margin:0;font-size:.9rem;line-height:1.45;color:var(--kopf-ink-2)}
.cookie-inhalt p strong{color:var(--kopf-ink)}
.cookie-inhalt p a{color:var(--kopf-ink);text-decoration:underline;text-underline-offset:3px}
.cookie-wahl{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.88rem;color:var(--kopf-ink)}
.cookie-wahl[hidden]{display:none}
.cookie-wahl label{display:flex;align-items:center;gap:.45rem}
.cookie-wahl small{color:var(--kopf-ink-2);font-size:.75rem}
.cookie-wahl input{accent-color:var(--accent)}
.cookie-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem}
.ck-btn{font:inherit;font-size:.88rem;font-weight:600;padding:.6rem 1rem;border-radius:999px;border:1px solid rgba(242,242,242,.4);background:transparent;color:var(--kopf-ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ck-btn:hover{border-color:var(--kopf-ink)}
.ck-btn.ck-primaer{background:var(--kopf-ink);color:var(--ink);border-color:var(--kopf-ink)}
.ck-btn.ck-primaer:hover{background:#fff}
.ck-btn.ck-leise{border-color:transparent;color:var(--kopf-ink-2)}
.ck-btn.ck-leise:hover{color:var(--kopf-ink)}
.ck-btn[hidden]{display:none}
@media (max-width:560px){.cookie{left:.6rem;right:.6rem;bottom:.6rem}.cookie-inhalt{padding:1rem}.cookie-knoepfe .ck-btn{flex:1 1 auto;text-align:center}}

/* ── Einblendung, sichtbar im Ruhezustand ── */
@keyframes rein{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero .wrap>*,.tuer,.seite .wrap>*{animation:rein .6s ease both}
.tuer:nth-child(2){animation-delay:.06s}.tuer:nth-child(3){animation-delay:.12s}.tuer:nth-child(4){animation-delay:.18s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Mobil (Handy und schmale Fenster) ── */
@media (max-width:900px){.tueren .wrap{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  nav.menue{display:none}
  .rechts{gap:.5rem}
  .wortmarke img{height:60px}
  .suche{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}
  .suche:focus-within{width:38px}
  .suche input{display:none}
  .lupe{color:var(--kopf-ink)}
  .suche.offen{position:absolute;left:1rem;right:1rem;top:calc(100% - .4rem);width:auto;height:auto;padding:.55rem .9rem;border-radius:999px;justify-content:flex-start;box-shadow:0 12px 30px rgba(0,0,0,.18);z-index:31;background:var(--surface);border-color:var(--surface)}
  .suche.offen input{display:block;color:var(--ink)}
  .suche.offen input::placeholder{color:var(--ink-2)}
  .suche.offen .lupe{color:var(--ink)}
  .login{padding:.42rem .8rem;font-size:.82rem}
  .hero .wrap,.sprech .wrap{grid-template-columns:1fr}
  .logo-gross{display:none}
  .karte{position:static}
  footer .wrap{flex-direction:column;gap:.6rem}
}
@media (max-width:560px){
  .tueren .wrap{grid-template-columns:1fr}
  .tuer{min-height:auto;gap:1.5rem}
  .hero{padding-block:2.2rem 1.6rem}
  h1{font-size:2.25rem;max-width:none}
  .seite h1{font-size:1.9rem}
  .box{padding:1.4rem}
}