/* start.css – Startseite und Übersichtsseiten lezo.ch (Chef-Auftrag #5968, 07.11.2026).
   Ergänzt lezo-ui.css und style.css, wird NACH diesen geladen. Keine externen Dateien. */

/* Kopf: Kontakt-Knopf */
.kopf .rechts .btn{white-space:nowrap}

/* Hero */
.hero.ueber{padding:var(--a16) 0 var(--a12);text-align:left}
.hero.ueber .kicker-hero{display:inline-block;margin-bottom:var(--a4);padding:4px 12px;border-radius:999px;background:var(--akzent-weich);color:var(--akzent-text);font-size:var(--fs-s);font-weight:600}
.hero.ueber h1{max-width:22ch}
.hero.ueber p.lead{max-width:640px}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:var(--a3);margin-top:var(--a6)}
.vertrauen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--a4);margin-top:var(--a10);padding-top:var(--a6);border-top:1px solid var(--linie)}
.vertrauen div{font-size:var(--fs-s);color:var(--text-2)}
.vertrauen b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:2px}
@media (max-width:820px){.vertrauen{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.vertrauen{grid-template-columns:1fr}}

/* Suche */
.suche{margin-top:var(--a8);max-width:640px}
.suche label{display:block;font-weight:600;color:var(--ink);margin-bottom:6px}
.suche input{width:100%;min-height:48px;padding:10px 16px;font:inherit;font-size:1rem;border:1px solid var(--linie-stark);border-radius:var(--r-m);background:var(--flaeche);color:var(--text)}
.suche input:focus{outline:none;border-color:var(--akzent);box-shadow:var(--ring)}
.suche .such-tipp,.hero .suche p.such-tipp{margin:6px 0 0;font-size:var(--fs-s);color:var(--text-3)}
.such-leer{display:none;margin-top:var(--a6);padding:var(--a5);border:1px dashed var(--linie-stark);border-radius:var(--r-l);background:var(--flaeche)}
.suchend .such-leer.an{display:block}
.versteckt{display:none!important}

/* Abschnitte */
.abschnitt{margin-top:var(--a16)}
.abschnitt-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--a3);margin-bottom:var(--a6)}
.abschnitt-kopf h2{margin:0 0 4px;font-size:var(--fs-2xl);letter-spacing:-.02em}
.abschnitt-kopf p{margin:0;color:var(--text-2);max-width:62ch}
.abschnitt-kopf .alle{font-weight:600;color:var(--akzent-text);text-decoration:none;white-space:nowrap}
.abschnitt-kopf .alle:hover{text-decoration:underline}
.thema{margin:var(--a8) 0 var(--a3);font-size:var(--fs-s);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}

/* Grosse App-Karten */
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a5)}
@media (max-width:760px){.apps{grid-template-columns:1fr}}
.app-karte{display:flex;flex-direction:column;padding:var(--a8);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-xl)}
.app-karte .kopfzeile{display:flex;align-items:center;gap:var(--a3);margin-bottom:var(--a3)}
.app-karte h3{margin:0;font-size:var(--fs-xl)}
.app-karte .icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-m)}
.app-karte .icon .ikon{width:22px;height:22px}
.app-karte p{margin:0 0 var(--a3);color:var(--text-2)}
.app-karte ul{margin:0 0 var(--a5);padding-left:20px;color:var(--text)}
.app-karte li{margin:4px 0}
.app-karte .knoepfe{display:flex;flex-wrap:wrap;gap:var(--a3);margin-top:auto}
.marke-gratis{display:inline-block;margin-left:auto;padding:2px 10px;border-radius:999px;background:var(--ok-weich);color:var(--ok);font-size:var(--fs-xs);font-weight:700}

/* Kompakte Produktkarten */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--a4)}
.kachel{position:relative;display:flex;flex-direction:column;padding:var(--a5);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);transition:border-color var(--dauer),box-shadow var(--dauer),transform var(--dauer)}
.kachel:hover{border-color:var(--linie-stark);box-shadow:var(--sch-2);transform:translateY(-2px)}
.kachel:focus-within{outline:2px solid var(--akzent);outline-offset:2px}
.kachel h4{margin:0 0 6px;font-size:1.02rem;line-height:1.3}
.kachel h4 a{color:var(--ink);text-decoration:none}
.kachel h4 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.kachel h4 a:focus-visible{outline:none}
.kachel p{margin:0 0 var(--a3);font-size:var(--fs-s);color:var(--text-2)}
.kachel .fuss-zeile{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:var(--a3);border-top:1px solid var(--linie);font-size:var(--fs-s)}
.kachel .preis-tag{font-weight:700;color:var(--ink)}
.kachel .mehr{color:var(--akzent-text);font-weight:600}

/* Linklisten für Gratis-Rechner */
.listen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a4)}
@media (max-width:900px){.listen{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.listen{grid-template-columns:1fr}}
.liste-box{padding:var(--a5) var(--a6);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l)}
.liste-box h3{margin:0 0 var(--a3);font-size:1.05rem;display:flex;align-items:center;gap:8px}
.liste-box ul{list-style:none;margin:0;padding:0}
.liste-box li{margin:0;border-top:1px solid var(--linie)}
.liste-box li:first-child{border-top:0}
.liste-box li a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:6px 0;color:var(--text);text-decoration:none}
.liste-box li a:hover{color:var(--akzent-text)}
.liste-box li a::after{content:"→";color:var(--text-3);flex:none}
.liste-box li a:hover::after{color:var(--akzent-text)}
.liste-box li small{display:block;color:var(--text-3);font-size:var(--fs-xs)}

/* Dienstleistungs-Band */
.band{margin-top:var(--a16);padding:var(--a10) var(--a8);border-radius:var(--r-xl);background:#0d1b3d;color:#e8ecf8}
.band h2{margin:0 0 var(--a2);color:#fff;font-size:var(--fs-2xl)}
.band p{color:#c9d1ea;max-width:60ch}
.band .pakete{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--a3);margin:var(--a6) 0}
@media (max-width:900px){.band .pakete{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.band .pakete{grid-template-columns:1fr}.band{padding:var(--a8) var(--a5)}}
.band .paket{padding:var(--a4) var(--a5);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-l);background:rgba(255,255,255,.04)}
.band .paket b{display:block;color:#fff}
.band .paket span{display:block;margin-top:4px;font-size:1.25rem;font-weight:700;color:#fff}
.band .paket small{display:block;margin-top:4px;color:#aeb8d6;font-size:var(--fs-xs)}
.band a:not(.btn){color:#fff}
.band .hero-knoepfe{margin-top:0}

/* Kontakt */
.kontakt-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--a4);padding:var(--a6) var(--a8);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-xl)}
.kontakt-box h2{margin:0 0 4px;font-size:var(--fs-xl)}
.kontakt-box p{margin:0;color:var(--text-2)}

/* Unterseite Gratis: Sprungmarken */
.sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--a6)}
.sprung a{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:999px;border:1px solid var(--linie-stark);background:var(--flaeche);color:var(--ink);text-decoration:none;font-size:var(--fs-s);font-weight:500}
.sprung a:hover{background:var(--flaeche-2)}
main .abschnitt:first-child{margin-top:var(--a12)}

/* Startseite einfach (Andrin #7069, 07.11.2026): drei Wege, Preise, kurze Listen */
.s-hero{padding-bottom:var(--a10)}
.s-hero h1{max-width:none}
.s-wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a4);margin-top:var(--a8);scroll-margin-top:90px}
@media (max-width:860px){.s-wege{grid-template-columns:1fr}}
.s-weg{display:flex;flex-direction:column;gap:6px;padding:var(--a6);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-xl);color:var(--text);text-decoration:none;box-shadow:var(--sch-1);transition:border-color var(--dauer),box-shadow var(--dauer),transform var(--dauer)}
.s-weg:hover{border-color:var(--akzent);box-shadow:var(--sch-2);transform:translateY(-2px)}
.s-weg:focus-visible{outline:none;box-shadow:var(--ring)}
.s-weg .icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-m);margin-bottom:6px}
.s-weg .icon .ikon{width:22px;height:22px}
.s-weg .s-was{font-size:var(--fs-s);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.s-weg b{font-size:var(--fs-xl);color:var(--ink);line-height:1.25}
.s-weg .s-text{color:var(--text-2)}
.s-weg .s-preis{margin-top:auto;padding-top:var(--a3);font-weight:700;color:var(--ink)}
.s-weg .s-los{font-weight:600;color:var(--akzent-text)}
.s-punkte{display:flex;flex-wrap:wrap;gap:6px 24px;margin:var(--a6) 0 0;padding:0;list-style:none;font-size:var(--fs-s);color:var(--text-2)}
.s-punkte li::before{content:"✓";margin-right:6px;color:var(--ok);font-weight:700}
.s-preise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a4);margin-bottom:var(--a2)}
@media (max-width:760px){.s-preise{grid-template-columns:1fr}}
.s-plan{display:flex;flex-direction:column;gap:4px;padding:var(--a5) var(--a6);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l)}
.s-plan-hl{border-color:var(--akzent);box-shadow:var(--sch-2)}
.s-plan b{color:var(--ink);font-size:1.05rem}
.s-plan .s-betrag{font-size:1.6rem;font-weight:800;color:var(--ink)}
.s-plan .s-betrag small{font-size:var(--fs-s);font-weight:500;color:var(--text-2)}
.s-plan .s-jahr,.s-plan .s-inhalt{font-size:var(--fs-s);color:var(--text-2)}
.s-hinweis{margin-top:var(--a3);color:var(--text-3)}
.s-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--a6);margin:0;padding:0;list-style:none}
@media (max-width:700px){.s-liste{grid-template-columns:1fr}}
.s-liste li{border-bottom:1px solid var(--linie)}
.s-liste a{display:flex;align-items:center;justify-content:space-between;gap:var(--a3);min-height:52px;padding:8px 2px;color:var(--text);text-decoration:none}
.s-liste a:hover span{color:var(--akzent-text);text-decoration:underline}
.s-liste b{flex:none;color:var(--ink);font-size:var(--fs-s)}
.s-chips{display:flex;flex-wrap:wrap;gap:8px}
.s-chips a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--linie-stark);border-radius:999px;background:var(--flaeche);color:var(--ink);text-decoration:none;font-weight:500}
.s-chips a:hover{border-color:var(--akzent);color:var(--akzent-text)}
.s-alle{margin-top:var(--a5)}