@import "fonts.css";

/* ============================================================
   Software-Website — eigenes Erscheinungsbild.

   Bewusst NICHT die FrohZeit-Farben: das Rot und das Kleeblatt stehen für
   den Betreuungsdienst und sprechen Familien an. Hier lesen
   Geschäftsführungen und Pflegedienstleitungen, und sie kaufen keine
   Fremdmarke, sondern ein Werkzeug. Deshalb ein ruhiges, technisches
   Erscheinungsbild: tiefes Indigo mit Bernstein als Akzent.
   ============================================================ */

:root{
  --bg:#FBFBFD; --flaeche:#FFFFFF; --flaeche-2:#F4F5F9; --flaeche-3:#EAECF3;
  --tinte:#15172B; --tinte-weich:#50546E; --tinte-blass:#6B6F87;
  --linie:#E3E5EE; --linie-zart:#EFF0F6;

  --indigo:#3A3D8F; --indigo-tief:#2A2C6B;
  --indigo-wasch:#ECEDF8;
  --bernstein:#A86A08; --bernstein-wasch:#FDF3E2;
  --gruen:#1F6B4A; --gruen-wasch:#E8F3EE;

  --anzeige:"Playfair Display",Georgia,serif;
  --text:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --maxw:1120px; --radius:18px;
  --schatten:0 1px 2px rgba(20,22,45,.05),0 14px 36px -14px rgba(20,22,45,.16);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101120; --flaeche:#181A2C; --flaeche-2:#1F2135; --flaeche-3:#272941;
  --tinte:#EDEEF6; --tinte-weich:#A8ACC4; --tinte-blass:#8186A0;
  --linie:#2A2C44; --linie-zart:#22243A;
  --indigo:#9095E8; --indigo-tief:#B4B8F2;
  --indigo-wasch:#20223A;
  --bernstein:#E0A94E; --bernstein-wasch:#2E2415;
  --gruen:#6FBF95; --gruen-wasch:#17291F;
  --schatten:0 1px 2px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#101120; --flaeche:#181A2C; --flaeche-2:#1F2135; --flaeche-3:#272941;
  --tinte:#EDEEF6; --tinte-weich:#A8ACC4; --tinte-blass:#8186A0;
  --linie:#2A2C44; --linie-zart:#22243A;
  --indigo:#9095E8; --indigo-tief:#B4B8F2;
  --indigo-wasch:#20223A;
  --bernstein:#E0A94E; --bernstein-wasch:#2E2415;
  --gruen:#6FBF95; --gruen-wasch:#17291F;
  --schatten:0 1px 2px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tinte);font-family:var(--text);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--anzeige);font-weight:600;letter-spacing:-.008em;
  text-wrap:balance;line-height:1.14;margin:0}
p{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
:focus-visible{outline:2.5px solid var(--indigo);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.oberzeile{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--indigo)}

/* --- Knöpfe --- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:1rem;padding:13px 24px;border-radius:12px;
  border:1.5px solid transparent;cursor:pointer;font-family:var(--text);
  transition:background .14s ease,border-color .14s ease,color .14s ease}
.knopf-voll{background:var(--indigo-tief);color:#fff}
.knopf-voll:hover{background:var(--indigo)}
:root[data-theme="dark"] .knopf-voll{color:#15172B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .knopf-voll{color:#15172B}}
.knopf-rand{background:transparent;border-color:var(--linie);color:var(--tinte)}
.knopf-rand:hover{border-color:var(--tinte-weich);background:var(--flaeche-2)}
.knopf-hell{background:#fff;color:var(--indigo-tief)}
.knopf-hell:hover{background:var(--indigo-wasch)}

/* --- Kopfzeile: deckend, markiert die aktuelle Seite, wackelt nicht --- */
header.kopf{position:sticky;top:0;z-index:40;background:var(--flaeche);
  border-bottom:1px solid var(--linie);transition:box-shadow .18s ease}
header.kopf.gescrollt{box-shadow:0 1px 0 var(--linie),0 6px 20px -8px rgba(20,22,45,.16);
  border-bottom-color:transparent}
.kopf-in{display:flex;align-items:center;justify-content:space-between;
  height:72px;gap:20px}
.marke{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.12rem;
  padding:4px 6px;margin-left:-6px;border-radius:10px}
.marke:hover{background:var(--flaeche-2)}
.marke .zeichen{width:34px;height:34px;flex:none}
.marke .zeichen rect{fill:var(--indigo-tief)}
.marke .zeichen path{stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round}
:root[data-theme="dark"] .marke .zeichen path{stroke:#15172B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .marke .zeichen path{stroke:#15172B}}
.marke small{display:block;font-size:.7rem;font-weight:600;color:var(--tinte-blass);
  letter-spacing:.02em;line-height:1.2}
.menue{display:flex;gap:4px;align-items:center;font-size:.92rem;font-weight:600}
.menue a{position:relative;padding:9px 12px;border-radius:9px;color:var(--tinte-weich);
  white-space:nowrap;transition:color .14s ease,background .14s ease}
.menue a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;
  border-radius:2px;background:currentColor;transform:scaleX(0);transition:transform .16s ease}
.menue a:hover{color:var(--tinte);background:var(--flaeche-2)}
.menue a:hover::after{transform:scaleX(.7)}
.menue a[aria-current="page"]{color:var(--indigo)}
.menue a[aria-current="page"]::after{transform:scaleX(1)}
.kopf-cta{display:flex;gap:12px;align-items:center}
.schalter{display:none;background:transparent;border:1.5px solid var(--linie);
  border-radius:10px;width:46px;height:46px;cursor:pointer;color:var(--tinte);
  align-items:center;justify-content:center;padding:0}
.schalter svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.schalter .zu{display:none}
.schalter[aria-expanded="true"] .zu{display:block}
.schalter[aria-expanded="true"] .auf{display:none}
.handymenue{display:none;position:absolute;left:0;right:0;top:100%;
  background:var(--flaeche);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);box-shadow:0 14px 30px -12px rgba(20,22,45,.22);
  max-height:calc(100vh - 72px);overflow-y:auto}
.handymenue.offen{display:block}
.handymenue nav{display:flex;flex-direction:column;padding:10px 0 18px}
.handymenue nav a{padding:14px 12px;border-radius:9px;font-weight:600;font-size:1.02rem;
  border-bottom:1px solid var(--linie-zart)}
.handymenue nav a:last-of-type{border-bottom:0}
.handymenue nav a:hover{background:var(--flaeche-2)}
.handymenue nav a[aria-current="page"]{color:var(--indigo)}
.handymenue .mm{display:flex;flex-direction:column;gap:10px;padding:14px 0 6px}
@media(max-width:1000px){.menue{display:none}.schalter{display:inline-flex}}
@media(min-width:1001px){.handymenue{display:none!important}}

/* --- Abschnitte --- */
section{padding:clamp(48px,7vw,88px) 0}
.titel{max-width:64ch}
.titel.mitte{margin:0 auto;text-align:center}
.titel h2{font-size:clamp(1.9rem,4vw,2.6rem);margin:.35em 0 .3em}
.titel p{color:var(--tinte-weich);font-size:1.08rem;max-width:58ch}
.titel.mitte p{margin:0 auto}

.held{padding:clamp(40px,6vw,80px) 0 clamp(30px,4vw,50px)}
.held h1{font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.06;max-width:22ch}
.held h1 em{font-style:normal;color:var(--indigo)}
.held .unter{font-size:clamp(1.06rem,2vw,1.22rem);color:var(--tinte-weich);
  margin-top:20px;max-width:56ch}
.held-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.held-note{margin-top:20px;font-size:.9rem;color:var(--tinte-blass)}

/* --- Karten --- */
.gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:16px;margin-top:38px}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:26px;box-shadow:var(--schatten);display:flex;flex-direction:column;gap:9px}
.karte.klick{transition:transform .14s ease,border-color .14s ease}
.karte.klick:hover{transform:translateY(-3px);border-color:var(--indigo)}
.karte .zeichen{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  font-size:1.35rem;background:var(--indigo-wasch);margin-bottom:5px}
.karte h3{font-size:1.2rem}
.karte p{font-size:.95rem;color:var(--tinte-weich);line-height:1.55}
.karte .weiter{font-size:.88rem;font-weight:700;color:var(--indigo);margin-top:auto;padding-top:8px}

/* Zustand eines Produkts — ehrlich sichtbar, nicht versteckt */
.stand{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 9px;border-radius:7px;align-self:flex-start}
.stand.live{background:var(--gruen-wasch);color:var(--gruen)}
.stand.bald{background:var(--bernstein-wasch);color:var(--bernstein)}

/* --- Zweispalter --- */
.paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.paar.gedreht .text{order:2}
@media(max-width:900px){.paar{grid-template-columns:1fr}.paar.gedreht .text{order:0}}
.liste{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:16px}
.liste li{display:flex;gap:14px;align-items:flex-start}
.liste .zeichen{width:42px;height:42px;border-radius:11px;background:var(--indigo-wasch);
  color:var(--indigo);display:grid;place-items:center;font-size:1.15rem;flex:none}
.liste b{font-size:1.03rem;display:block}
.liste p{font-size:.94rem;color:var(--tinte-weich);margin-top:2px}

/* --- Band --- */
.band{background:var(--indigo-tief);color:#fff}
:root[data-theme="dark"] .band{background:#20223A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .band{background:#20223A}}
.band .oberzeile{color:rgba(255,255,255,.8)}
.band h2{color:#fff}
.band .fuehrt{color:rgba(255,255,255,.92);max-width:54ch;font-size:1.08rem;margin-top:14px}
.band .gitter{margin-top:38px}
.band .karte{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);
  box-shadow:none;color:#fff}
.band .karte h3{color:#fff}
.band .karte p{color:rgba(255,255,255,.9)}
.band .karte .zeichen{background:rgba(255,255,255,.18)}
.band-fuss{margin-top:32px}

/* --- Preise --- */
.preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:18px;margin-top:40px}
.preis{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:28px;box-shadow:var(--schatten);display:flex;flex-direction:column}
.preis.hervor{border-color:var(--indigo);border-width:2px}
.preis h3{font-size:1.25rem}
.preis .zahl{font-family:var(--anzeige);font-size:2.3rem;line-height:1;margin:14px 0 4px}
.preis .je{font-size:.85rem;color:var(--tinte-blass)}
.preis ul{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:9px;flex:1}
.preis li{font-size:.93rem;color:var(--tinte-weich);padding-left:24px;position:relative}
.preis li::before{content:"✓";position:absolute;left:0;color:var(--gruen);font-weight:700}
.preis li.nicht{color:var(--tinte-blass)}
.preis li.nicht::before{content:"–";color:var(--tinte-blass)}

/* --- Zahlenleiste --- */
.zahlen{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  background:var(--flaeche)}
.zahlen-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 0}
.zahl-feld{text-align:center}
.zahl-feld b{font-family:var(--anzeige);font-size:clamp(1.7rem,3.4vw,2.4rem);
  color:var(--indigo);display:block;line-height:1}
.zahl-feld span{font-size:.85rem;color:var(--tinte-weich)}
@media(max-width:640px){.zahlen-in{grid-template-columns:repeat(2,1fr);gap:24px 12px}}

/* --- Formular --- */
.kontakt-gitter{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,4vw,54px);align-items:start}
@media(max-width:860px){.kontakt-gitter{grid-template-columns:1fr}}
.formular{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);box-shadow:var(--schatten)}
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.feld label{font-size:.85rem;font-weight:700}
.feld label .muss{color:var(--bernstein)}
.feld input,.feld select,.feld textarea{font-family:inherit;font-size:1rem;
  padding:12px 14px;border-radius:11px;border:1.5px solid var(--linie);
  background:var(--bg);color:var(--tinte)}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--indigo);outline:none}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){.feld-reihe{grid-template-columns:1fr}}
.zustimmung{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;
  color:var(--tinte-weich);margin-bottom:18px}
.zustimmung input{margin-top:3px}
.zustimmung a{color:var(--indigo);text-decoration:underline}
.formular .knopf{width:100%}
.formular-status{font-size:.9rem;margin-top:12px;padding:12px 15px;border-radius:11px;display:none}
.formular-status.fehler{display:block;background:var(--bernstein-wasch);
  color:var(--bernstein);border:1px solid var(--bernstein)}
.formular-status a{color:inherit;font-weight:700;text-decoration:underline}
.formular-fertig{text-align:center;padding:14px 0}
.formular-fertig .haken{width:58px;height:58px;border-radius:50%;background:var(--gruen-wasch);
  color:var(--gruen);display:grid;place-items:center;font-size:1.8rem;margin:0 auto 16px}
.formular-fertig h3{font-size:1.3rem;margin-bottom:10px}
.formular-fertig p{color:var(--tinte-weich);font-size:.96rem;max-width:40ch;margin:0 auto}
.topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wege{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.wege a{display:flex;gap:13px;align-items:center;font-weight:700}
.wege .zeichen{width:44px;height:44px;border-radius:12px;background:var(--flaeche-2);
  display:grid;place-items:center;font-size:1.2rem;flex:none}
.wege span.klein{display:block;font-size:.78rem;color:var(--tinte-blass);font-weight:400}

/* --- Fließtext (Impressum, Datenschutz) --- */
.kopfseite{background:var(--flaeche-2);border-bottom:1px solid var(--linie);
  padding:clamp(36px,5vw,62px) 0 clamp(30px,4vw,48px)}
.kopfseite h1{font-size:clamp(2rem,4.4vw,3rem);max-width:24ch}
.kopfseite .krumen{font-size:.84rem;color:var(--tinte-blass);margin-bottom:14px}
.fliess{max-width:72ch;font-size:1.02rem;padding:clamp(40px,5vw,66px) 0}
.fliess h2{font-size:clamp(1.4rem,2.8vw,1.8rem);margin:2.1em 0 .5em;scroll-margin-top:90px}
.fliess h2:first-child{margin-top:0}
.fliess h3{font-size:1.14rem;margin:1.7em 0 .4em}
.fliess p{margin:0 0 1.05em;color:var(--tinte-weich)}
.fliess p strong,.fliess li strong{color:var(--tinte)}
.fliess ul,.fliess ol{margin:0 0 1.2em;padding-left:1.3em;color:var(--tinte-weich)}
.fliess li{margin-bottom:.5em}
.fliess a:not(.knopf){color:var(--indigo);text-decoration:underline;text-underline-offset:2px}
.fliess dl{margin:0 0 1.4em;display:grid;grid-template-columns:auto 1fr;gap:9px 22px}
.fliess dt{font-weight:700;color:var(--tinte)}
.fliess dd{margin:0;color:var(--tinte-weich)}
@media(max-width:560px){.fliess dl{grid-template-columns:1fr;gap:2px 0}.fliess dd{margin-bottom:12px}}
.hinweis{border-left:4px solid var(--indigo);background:var(--indigo-wasch);
  border-radius:0 14px 14px 0;padding:18px 22px;margin:0 0 1.5em}
.hinweis.warn{border-left-color:var(--bernstein);background:var(--bernstein-wasch)}
.hinweis p:last-child{margin-bottom:0}
mark.todo{background:#FFF3C4;color:#7A5A00;padding:1px 7px;border-radius:5px;font-weight:700;font-size:.93em}
:root[data-theme="dark"] mark.todo{background:#4a3a08;color:#F0CE6B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) mark.todo{background:#4a3a08;color:#F0CE6B}}
.stand-zeile{font-size:.85rem;color:var(--tinte-blass);margin-top:3em;
  padding-top:1.4em;border-top:1px solid var(--linie)}

/* --- Fuß --- */
footer.fuss{background:var(--flaeche);border-top:1px solid var(--linie);padding:52px 0 30px}
.fuss-gitter{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
.fuss-gitter h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--tinte-blass);font-weight:700;margin-bottom:14px}
.fuss-gitter a{display:block;color:var(--tinte-weich);font-size:.92rem;margin-bottom:9px}
.fuss-gitter a:hover{color:var(--indigo)}
@media(max-width:820px){.fuss-gitter{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fuss-gitter{grid-template-columns:1fr}}
.fuss-recht{margin-top:34px;padding-top:20px;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.82rem;color:var(--tinte-blass);
  align-items:center}
.fuss-recht a{color:var(--tinte-weich)}
.entwurf{font-size:.72rem;color:var(--tinte-blass);text-align:center;padding:26px;
  letter-spacing:.02em}
.springen{position:absolute;left:-9999px;top:0;z-index:100;background:var(--indigo-tief);
  color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-weight:700}
.springen:focus{left:0}