/* LPAI-Solutions · Entwurf 29.10.2026
   Zwei Hausfarben, gemessen: Blau #16567d (Logo, Live-Seite --blau), Gelb #e8a33d (Live-Demos --gold).
   Alles andere sind Abstufungen davon plus Tinte und Papier.
   Typo-Skala 1,25 (große Terz), Abstände im 8-px-Raster, mobil zuerst. */

:root{
  --blau:#16567d; --blau-tief:#0f4060; --nacht:#0b2c42; --blau-hell:#e6eff5; --blau-nebel:#f4f8fb;
  --gelb:#e8a33d; --gelb-tief:#7a5a12; --gelb-hell:#fbf1dc;
  --tinte:#1c2733; --tinte-weich:#46586a; --linie:#dbe4eb; --weiss:#fff;
  --t-0:1rem; --t-1:1.25rem; --t-2:clamp(1.4rem,1.2rem + 1vw,1.56rem);
  --t-3:clamp(1.6rem,1.3rem + 1.6vw,1.95rem); --t-4:clamp(1.95rem,1.5rem + 2.4vw,2.44rem);
  --t-5:clamp(2.2rem,1.6rem + 3.4vw,3.05rem);
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4.5rem; --s-7:6rem;
  --rund:14px; --breit:72rem; --text:40rem;
  --schatten:0 1px 2px rgba(11,44,66,.06),0 8px 24px -8px rgba(11,44,66,.18);
  --schrift:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font:400 var(--t-0)/1.65 var(--schrift);color:var(--tinte);background:var(--weiss)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-underline-offset:.18em}
a:hover{color:var(--blau-tief)}
:focus-visible{outline:3px solid var(--gelb);outline-offset:3px;border-radius:4px}
h1,h2,h3{line-height:1.15;letter-spacing:-.015em;margin:0 0 var(--s-2);color:var(--nacht)}
h1{font-size:var(--t-5);font-weight:700}
h2{font-size:var(--t-4);font-weight:700}
h3{font-size:var(--t-1);font-weight:650}
p{margin:0 0 var(--s-2);max-width:var(--text)}
.wrap{width:min(100% - 2rem,var(--breit));margin-inline:auto}
.nursr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-999px;top:0;background:var(--gelb);color:var(--nacht);padding:.5rem 1rem;z-index:9}
.sprung:focus{left:1rem}

/* Kopf */
.kopf{border-bottom:1px solid var(--linie);background:rgba(255,255,255,.96);position:sticky;top:0;z-index:5;backdrop-filter:saturate(1.4) blur(6px)}
.kopf .wrap{display:flex;align-items:center;gap:var(--s-2);min-height:64px}
.marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--nacht);font-weight:700;font-size:1.06rem;margin-right:auto}
.marke svg{width:34px;height:34px}
.marke b{font-weight:700}.marke span{color:var(--blau)}
.nav{display:none;gap:var(--s-3)}
.nav a{text-decoration:none;color:var(--tinte-weich);font-weight:500;font-size:.95rem;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--nacht);border-color:var(--gelb)}
@media (min-width:960px){.nav{display:flex}}

/* Knöpfe: Gelb = Haupt-Aufruf (einer je Seite), Rand = zweitrangig */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.4rem;border-radius:999px;font-weight:650;text-decoration:none;font-size:1rem;line-height:1.2;transition:transform .15s,box-shadow .15s,background .15s}
.knopf-gelb{background:var(--gelb);color:var(--nacht);box-shadow:0 6px 18px -8px rgba(232,163,61,.9)}
.knopf-gelb:hover{background:#f0b456;color:var(--nacht);transform:translateY(-1px)}
.knopf-rand{border:2px solid var(--blau);color:var(--blau);background:transparent}
.knopf-rand:hover{background:var(--blau-hell)}
.knopf-klein{min-height:40px;padding:.5rem 1rem;font-size:.92rem}
.knoepfe{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-top:var(--s-3)}
.leise{color:var(--tinte-weich);font-size:.95rem}

/* Bühne der Startseite */
.buehne{padding:var(--s-5) 0 var(--s-5);background:linear-gradient(180deg,var(--blau-nebel),#fff 85%)}
.buehne .wrap{display:grid;gap:var(--s-4);align-items:center}
@media (min-width:880px){.buehne .wrap{grid-template-columns:1.1fr .9fr;gap:var(--s-6)}.buehne{padding:var(--s-6) 0}}
.fahne{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--gelb-tief);background:var(--gelb-hell);padding:.35rem .8rem;border-radius:999px;margin-bottom:var(--s-3)}
.lead{font-size:var(--t-1);color:var(--tinte-weich);line-height:1.55}
.bild-kaffee{max-width:420px;margin-inline:auto;width:100%}

/* Die vier Türen */
.tueren{padding:var(--s-5) 0 var(--s-6)}
.tueren h2{text-align:center;margin-bottom:var(--s-1)}
.tueren .unter{text-align:center;margin:0 auto var(--s-4);color:var(--tinte-weich)}
.raster{display:grid;gap:var(--s-2);grid-template-columns:1fr}
@media (min-width:560px){.raster{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.raster.vier{grid-template-columns:repeat(4,1fr)}}
.tuer{display:flex;flex-direction:column;gap:.35rem;min-height:190px;padding:var(--s-3);border-radius:var(--rund);background:var(--weiss);border:1px solid var(--linie);text-decoration:none;color:var(--tinte);box-shadow:var(--schatten);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.tuer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--gelb);transform:scaleX(.18);transform-origin:left;transition:transform .25s}
.tuer:hover{transform:translateY(-3px);border-color:var(--blau);color:var(--tinte)}
.tuer:hover::after{transform:scaleX(1)}
.tuer .ikon{width:48px;height:48px;border-radius:12px;background:var(--blau);display:grid;place-items:center;margin-bottom:var(--s-1)}
.tuer .ikon svg{width:26px;height:26px}
.tuer b{font-size:var(--t-2);color:var(--nacht);line-height:1.2}
.tuer span{color:var(--tinte-weich);font-size:.95rem}
.tuer em{margin-top:auto;font-style:normal;font-weight:650;color:var(--blau);padding-top:var(--s-1)}

/* Vertrauensband */
.band{background:var(--nacht);color:#dbe8f1;padding:var(--s-5) 0}
.band h2{color:#fff}
.drei{display:grid;gap:var(--s-3)}
@media (min-width:760px){.drei{grid-template-columns:repeat(3,1fr)}}
.drei h3{color:#fff;display:flex;gap:.6rem;align-items:center}
.drei h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gelb);flex:none}
.drei p{color:#c4d6e3}
.band a{color:#fff}

/* Seitenköpfe der Unterseiten */
.spitze{padding:var(--s-5) 0 var(--s-4);background:linear-gradient(180deg,var(--blau-nebel),#fff)}
.krumen{font-size:.88rem;color:var(--tinte-weich);margin-bottom:var(--s-2)}
.krumen a{color:var(--tinte-weich)}
.spitze h1{max-width:22ch}

.abschnitt{padding:var(--s-5) 0}
.abschnitt.grau{background:var(--blau-nebel)}
.abschnitt > .wrap > h2{max-width:26ch}
.karten{display:grid;gap:var(--s-3)}
@media (min-width:760px){.karten{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--rund);padding:var(--s-3);box-shadow:var(--schatten)}
.karte h3{margin-bottom:var(--s-1)}
.karte p:last-child{margin-bottom:0}
.marker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;margin-bottom:var(--s-1)}
.m-heute{background:var(--blau-hell);color:var(--blau-tief)}
.m-plan{background:var(--gelb-hell);color:var(--gelb-tief)}
.liste{padding-left:1.2rem;margin:0 0 var(--s-2)}
.liste li{margin-bottom:.4rem}

/* Ablaufgrafik: Schritte mit Pfeil */
.ablauf{list-style:none;padding:0;margin:var(--s-3) 0 0;display:grid;gap:var(--s-2);counter-reset:s}
@media (min-width:860px){.ablauf{grid-template-columns:repeat(4,1fr)}}
.ablauf li{position:relative;background:#fff;border:1px solid var(--linie);border-radius:var(--rund);padding:var(--s-3) var(--s-3) var(--s-2);counter-increment:s}
.ablauf li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blau);color:#fff;font-weight:700;margin-bottom:var(--s-1)}
.ablauf li.mensch::before{background:var(--gelb);color:var(--nacht)}
.ablauf b{display:block;color:var(--nacht);margin-bottom:.25rem}
.ablauf span{font-size:.95rem;color:var(--tinte-weich)}
@media (min-width:860px){.ablauf li:not(:last-child)::after{content:"";position:absolute;right:-14px;top:38px;border:7px solid transparent;border-left:9px solid var(--gelb);z-index:1}}
.legende{font-size:.9rem;color:var(--tinte-weich);margin-top:var(--s-2)}
.legende i{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin:0 .3rem 0 .8rem}

/* Kennzahlen */
.zahlen{display:grid;gap:var(--s-2);grid-template-columns:repeat(2,1fr);margin-top:var(--s-3)}
@media (min-width:760px){.zahlen{grid-template-columns:repeat(4,1fr)}}
.zahl{border-left:4px solid var(--gelb);padding:.2rem 0 .2rem var(--s-2)}
.zahl b{display:block;font-size:var(--t-3);color:var(--nacht);line-height:1.1}
.zahl span{font-size:.9rem;color:var(--tinte-weich)}

/* Vorführung im Seitenkörper */
.vorfuehrung{background:#fff;border:1px solid var(--linie);border-radius:var(--rund);box-shadow:var(--schatten);overflow:hidden}
.vf-reiter{display:flex;flex-wrap:wrap;gap:.25rem;padding:.6rem;background:var(--blau-nebel);border-bottom:1px solid var(--linie)}
.vf-reiter button{font:inherit;font-size:.92rem;border:1px solid transparent;background:transparent;color:var(--tinte-weich);padding:.55rem .9rem;border-radius:999px;cursor:pointer;min-height:40px}
.vf-reiter button[aria-selected="true"]{background:#fff;border-color:var(--linie);color:var(--nacht);font-weight:650}
.vf-koerper{display:grid;gap:var(--s-3);padding:var(--s-3)}
@media (min-width:860px){.vf-koerper{grid-template-columns:1fr 1fr}}
.vf-post{background:var(--blau-nebel);border-radius:10px;padding:var(--s-2) var(--s-3);font-size:.95rem}
.vf-post .kopfz{font-size:.82rem;color:var(--tinte-weich);border-bottom:1px solid var(--linie);padding-bottom:.4rem;margin-bottom:.6rem}
.vf-schritte{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.vf-schritte li{display:grid;grid-template-columns:28px 1fr;gap:.6rem;align-items:start;opacity:.25;transform:translateY(4px);transition:opacity .35s,transform .35s}
.vf-schritte li.an{opacity:1;transform:none}
.vf-schritte .p{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:700;background:var(--blau-hell);color:var(--blau-tief)}
.vf-schritte .p.mensch{background:var(--gelb);color:var(--nacht)}
.ampel{display:inline-block;font-weight:700;font-size:.8rem;padding:.15rem .55rem;border-radius:999px;margin-right:.3rem}
.a-gruen{background:#e3f1e8;color:#17653b}.a-gelb{background:var(--gelb-hell);color:#7a5a12}.a-rot{background:#fbe9e6;color:#9b2f1b}
.vf-fuss{font-size:.85rem;color:var(--tinte-weich);padding:0 var(--s-3) var(--s-3)}

/* Abschluss-Aufruf */
.schluss{padding:var(--s-6) 0;background:var(--blau);color:#e6eff5;text-align:center}
.schluss h2{color:#fff;margin-inline:auto;max-width:24ch}
.schluss p{margin-inline:auto;color:#d3e3ee}
.schluss .knoepfe{justify-content:center}
.schluss a:not(.knopf){color:#fff}
.tasse-klein{width:64px;margin:0 auto var(--s-2)}

/* Fuß */
.fuss{background:var(--nacht);color:#b8cad8;padding:var(--s-5) 0 var(--s-4);font-size:.93rem}
.fuss .wrap{display:grid;gap:var(--s-4)}
@media (min-width:760px){.fuss .wrap{grid-template-columns:1.4fr 1fr 1fr}}
.fuss b{color:#fff}
.fuss a{color:#dbe8f1}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.35rem}
.fuss .klein{grid-column:1/-1;max-width:none;border-top:1px solid #1d3d55;padding-top:var(--s-2);font-size:.85rem;color:#8ea6b8}

/* Rechtstexte */
.recht{padding:var(--s-5) 0;overflow-wrap:break-word;hyphens:auto}
.recht h1{font-size:var(--t-4);hyphens:auto}
.recht h2{font-size:var(--t-2);margin-top:var(--s-4)}
.recht h3{font-size:var(--t-1);margin-top:var(--s-3)}

/* Entwurfs-Hinweis, damit niemand den Entwurf für die Live-Seite hält */
.entwurf{background:var(--gelb-hell);color:#5c4510;font-size:.85rem;text-align:center;padding:.4rem 1rem;border-bottom:1px solid #f0dcb0}

/* Dampf über der Tasse */
.dampf{stroke-dasharray:6 200;stroke-dashoffset:0;animation:dampf 3.2s ease-in-out infinite;opacity:.9}
.d2{animation-delay:.5s}.d3{animation-delay:1s}
@keyframes dampf{0%{stroke-dasharray:1 200;opacity:0}30%{opacity:.95}100%{stroke-dasharray:140 200;opacity:0}}
@media (prefers-reduced-motion:reduce){.dampf{stroke-dasharray:none;opacity:.9}}

/* Büro-Nummer im Kopf: auf dem Handy nur die Nummer */
.ruf{text-decoration:none;color:var(--nacht);font-weight:650;font-size:.95rem;white-space:nowrap}
.ruf:hover{color:var(--blau)}
.ruf-wort{color:var(--tinte-weich);font-weight:500}
@media (max-width:520px){.ruf-wort{display:none}.marke b{font-size:.98rem}.kopf .wrap{gap:.6rem}}
@media (max-width:370px){.marke b span{display:none}}

/* Runde 2 (29.10.): Menü fürs Handy, kompakte Bühne, Kontaktwahl */
.menue{position:relative}
.menue summary{list-style:none;cursor:pointer;font-weight:650;color:var(--nacht);padding:.5rem .8rem;border:1px solid var(--linie);border-radius:999px;min-height:40px;display:flex;align-items:center}
.menue summary::-webkit-details-marker{display:none}
.menue nav{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--linie);border-radius:var(--rund);box-shadow:var(--schatten);padding:.6rem;display:grid;gap:.1rem;min-width:240px;z-index:9}
.menue nav a:not(.knopf){padding:.55rem .7rem;text-decoration:none;color:var(--tinte);border-radius:8px}
.menue nav a:not(.knopf):hover{background:var(--blau-nebel)}
.menue nav .knopf{margin-top:.4rem}
@media (min-width:960px){.menue{display:none}}
@media (max-width:959px){.nur-breit{display:none}}
.buehne{padding:var(--s-4) 0 var(--s-3)}
.buehne h1{font-size:var(--t-4)}
.bild-kaffee{max-width:240px}
@media (min-width:880px){.buehne{padding:var(--s-4) 0 var(--s-3)}.buehne .wrap{grid-template-columns:1.5fr .5fr;gap:var(--s-5)}}
.tueren{padding:var(--s-3) 0 var(--s-5)}
.tueren h2{font-size:var(--t-3);margin-bottom:var(--s-3)}
.tuer{min-height:170px}
.vier-punkte{display:grid;gap:var(--s-3)}
@media (min-width:760px){.vier-punkte{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.vier-punkte{grid-template-columns:repeat(4,1fr)}}
.vier-punkte h3{color:#fff;display:flex;gap:.6rem;align-items:center}
.vier-punkte h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gelb);flex:none}
.vier-punkte p{color:#c4d6e3}
.wahl{border:0;padding:0;margin:0 0 var(--s-2);display:grid;gap:.4rem}
.wahl label{display:grid;grid-template-columns:auto 1fr;column-gap:.6rem;padding:.55rem .7rem;border:1px solid var(--linie);border-radius:10px;cursor:pointer}
.wahl label:has(input:checked){border-color:var(--blau);background:var(--blau-nebel)}
.wahl input{margin-top:.3rem;width:18px;height:18px;accent-color:var(--blau)}
.wahl span{grid-column:2;font-size:.9rem;color:var(--tinte-weich)}
.feld{display:grid;gap:.3rem;font-weight:600;margin-bottom:var(--s-2)}
.feld textarea{font:inherit;padding:.6rem;border:1px solid var(--linie);border-radius:10px}
.fahne + h2{margin-top:-.5rem}

/* Telefonnummern und Mailadressen brechen nie innerhalb um (Malika 29.10.2026 15:36);
   wird es eng, bricht die Zeile VOR dem Link. Auf schmalen Breiten steht die Büronummer im Menü statt im Kopf. */
a[href^="tel:"],a[href^="mailto:"]{white-space:nowrap}
.menue .menue-tel{border-top:1px solid var(--linie);margin-top:.3rem;padding-top:.5rem;font-size:.92rem;color:var(--tinte-weich)}
.menue .menue-tel a{display:block;padding:.35rem .7rem;text-decoration:none;color:var(--nacht);font-weight:600}
@media (max-width:640px){.kopf .ruf{display:none}}
@media (min-width:641px){.menue .menue-tel{display:none}}