/* lezo.ch – Seitenschicht auf LeZo UI 2.0 (#940). Vorher muss lezo-ui.css geladen sein.
   Hier stehen nur Bausteine, die es nur auf lezo.ch gibt (Hero, Produktwelt, Konfigurator, Shop, Galerie).
   Farben, Schrift, Knöpfe, Felder, Chips, FAQ, Kopf- und Fusszeile kommen aus lezo-ui.css. */

/* ---------- Seitenrahmen ---------- */
main{display:block;max-width:var(--breite);margin:0 auto;padding:0 var(--a5)}
main>h1:first-child{margin-top:var(--a12)}
main>p,main>ul,main>ol{max-width:var(--breite-text)}
main li{margin:4px 0}
main>h2{margin-top:var(--a16)}

/* Textseiten (Ratgeber, Gratis-Muster, Bestätigung): ruhige Lesebreite */
.artikel{max-width:820px}
.artikel>.brot{margin-top:var(--a10)}
.artikel>h1{margin-top:var(--a2)}
.artikel h2{margin-top:var(--a10)}
main pre{white-space:pre-wrap;overflow-x:auto;padding:var(--a4) var(--a5);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-m);font-family:var(--schrift-mono);font-size:.9rem;line-height:1.55}
main blockquote{margin:var(--a4) 0;padding:var(--a3) var(--a5);border-left:3px solid var(--akzent-rand);background:var(--flaeche);border-radius:0 var(--r-m) var(--r-m) 0;color:var(--text-2)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:var(--a16) 0 var(--a12);border-bottom:1px solid var(--linie);
  background:
    radial-gradient(820px 380px at 90% -8%,rgba(106,76,255,.14),transparent 65%),
    radial-gradient(680px 340px at -6% 108%,rgba(22,199,154,.11),transparent 62%),
    linear-gradient(180deg,var(--flaeche),var(--bg))}
.hero .in{max-width:var(--breite);margin:0 auto;padding:0 var(--a5)}
.hero h1{font-size:var(--fs-3xl);line-height:1.08;letter-spacing:-.03em;margin:0 0 var(--a4);max-width:20ch}
.hero p{max-width:680px;margin:0;font-size:var(--fs-l);color:var(--text-2)}
.hero .small{font-size:var(--fs-s);color:var(--text-3);margin-top:var(--a3)}
/* #950: Verlaufstext nur, wenn der Browser background-clip:text kann (sonst war die Zeile unsichtbar) */
.hero .grad{color:var(--akzent-text)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero .grad{background:linear-gradient(92deg,var(--fehler) 0%,var(--akzent) 55%,var(--ok) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
@media (forced-colors:active){.hero .grad{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}
.sub-hero{padding:var(--a10) 0 var(--a10)}
.sub-hero h1{font-size:clamp(1.875rem,1.4rem + 1.9vw,2.75rem);max-width:26ch}
.hero.start{text-align:center;padding:var(--a20) 0 var(--a12)}
.hero.start h1,.hero.start p{margin-left:auto;margin-right:auto}
.cta{display:flex;flex-wrap:wrap;gap:var(--a2);margin-top:var(--a6)}
.btn.rand{--b-bg:var(--flaeche);--b-fg:var(--ink);--b-rand:var(--linie-stark)}
.btn.rand:hover{--b-bg:var(--flaeche-2)}
.brot{margin-bottom:var(--a3);font-size:var(--fs-s);color:var(--text-3)}
.brot a{color:var(--text-2);text-decoration:none}
.brot a:hover{color:var(--ink);text-decoration:underline}
.leiste{display:flex;flex-wrap:wrap;gap:var(--a2);margin-top:var(--a6)}
.leiste span{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);background:var(--flaeche);border:1px solid var(--linie);color:var(--text-2);font-size:var(--fs-s)}
.leiste span::before{content:"✓";color:var(--ok);font-weight:700}
.kennz{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--a3);margin-top:var(--a8)}
.kennz div{padding:14px 16px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);text-align:left}
.kennz b{display:block;font-size:1.25rem;color:var(--ink);letter-spacing:-.01em}
.kennz span{font-size:var(--fs-s);color:var(--text-3)}
.hero.start .kennz{max-width:900px;margin-left:auto;margin-right:auto}

/* ---------- Aufgaben-Suche (Startseite) ---------- */
.such{position:relative;max-width:680px;margin:var(--a8) auto 0;text-align:left}
.such form{display:flex;align-items:center;gap:var(--a2);padding:6px 6px 6px 18px;background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:var(--r-pill);box-shadow:var(--sch-2);transition:border-color var(--dauer),box-shadow var(--dauer)}
.such form:focus-within{border-color:var(--akzent);box-shadow:var(--ring),var(--sch-2)}
.such form .ikon{color:var(--text-3)}
.such input{flex:1;min-width:0;min-height:var(--tipp);padding:8px 4px;border:0;background:transparent;font:inherit;font-size:1.05rem;color:var(--text)}
.such input:focus,.such input:focus-visible{outline:none}
.such input::-webkit-search-cancel-button{cursor:pointer}
.such-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--a2);margin-top:var(--a4)}
#treffer{display:grid;gap:2px;margin-top:var(--a2)}
#treffer:not(:empty){padding:6px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--sch-3)}
.treffer{display:flex;justify-content:space-between;align-items:center;gap:var(--a3);padding:10px 14px;border-radius:var(--r-m);color:var(--ink);text-decoration:none;font-weight:500}
.treffer small{color:var(--text-3);font-weight:500;white-space:nowrap}
.treffer:hover,.treffer.erst{background:var(--flaeche-2);text-decoration:none}
#treffer .leer{margin:0;padding:10px 14px;border:0;background:transparent;text-align:left;font-size:.95rem}
@media (max-width:560px){.treffer{flex-direction:column;align-items:flex-start;gap:2px}.such form{padding-left:14px}}

/* ---------- Abschnittstitel ---------- */
.kicker{display:block;margin-top:var(--a16);font-size:var(--fs-s);font-weight:600;color:var(--akzent-text)}
.kicker+h2{margin-top:var(--a1)}

/* ---------- Karten (lezo.ch) ---------- */
.card{display:flex;flex-direction:column}
.card h3{margin:0 0 var(--a2);font-size:var(--fs-l)}
.card p:last-child{margin-bottom:0}
.card ul{margin:var(--a2) 0 var(--a4);padding-left:20px}
.card .btn{margin-top:auto;align-self:flex-start}
.card .tag{align-self:flex-start;margin-bottom:var(--a3)}
.price{margin:2px 0 var(--a3);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}

/* ---------- Produktwelt ---------- */
.welt{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--a4)}
.prod{position:relative;display:flex;flex-direction:column;padding:var(--a6);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-xl);color:var(--text);transition:border-color var(--dauer),box-shadow var(--dauer),transform var(--dauer)}
.prod:hover{border-color:var(--linie-stark);box-shadow:var(--sch-2);transform:translateY(-2px)}
.prod .icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:var(--a4);border-radius:var(--r-m);background:var(--flaeche-2);color:var(--farbe,var(--akzent));font-size:1.35rem}
.prod .icon .ikon{width:22px;height:22px}
.icon.t-rot{background:var(--fehler-weich);color:var(--fehler)}.icon.t-violett{background:var(--akzent-weich);color:var(--akzent-text)}.icon.t-gruen{background:var(--ok-weich);color:var(--ok)}
.icon.t-blau{background:#e8edfa;color:var(--ink-2)}.icon.t-gelb{background:var(--warn-weich);color:var(--warn)}.icon.t-grau{background:var(--flaeche-2);color:var(--ink)}
.prod h3{margin:0 0 6px;font-size:var(--fs-l)}
.prod h3 a{color:var(--ink);text-decoration:none}
.prod h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.prod h3 a:focus-visible{outline:none}
.prod:focus-within{outline:2px solid var(--akzent);outline-offset:2px}
.prod p{margin:0 0 var(--a3);color:var(--text-2)}
.prod ul{margin:0 0 var(--a4);padding-left:20px;font-size:.95rem;color:var(--text)}
.prod .preis{margin-top:auto;padding-top:var(--a3);border-top:1px solid var(--linie);font-size:var(--fs-s);font-weight:600;color:var(--ink)}
.prod .preis a{position:relative;z-index:1}
.prod .mehr{color:var(--akzent-text);text-decoration:none}
.prod .mehr:hover{text-decoration:underline}

/* ---------- Startseite nach Produkten gegliedert (Chef-Auftrag #2506) ---------- */
.leiste.mitte{justify-content:center}
.gruppe{margin-top:var(--a12)}
.gruppe:last-of-type{margin-bottom:var(--a12)}
.gruppe-kopf{margin-bottom:var(--a4)}
.gruppe-kopf h2{margin:0 0 4px;font-size:var(--fs-xl)}
.gruppe-kopf p{margin:0;color:var(--text-2)}
.welt.zwei-spalten{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.welt.zwei-spalten{grid-template-columns:1fr}}

/* Unternavigation einer Produktseite («Auf dieser Seite») */
.seitennav,.seitennav.chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a2);margin:var(--a6) 0 0}
.seitennav .titel{font-size:var(--fs-s);font-weight:600;color:var(--text-3);margin-right:var(--a1)}
@media (max-width:900px){.seitennav.chips>a{min-height:var(--tipp)}}
.weiter-box{margin-top:var(--a12);padding:var(--a6);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l)}
.weiter-box h2{margin-top:0}

/* ---------- Branchen-Finder ---------- */
.chips{margin:var(--a3) 0 var(--a4)}
.finder{min-height:120px;padding:var(--a6);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l)}
.finder h3{margin-top:0}
.finder p:last-child{margin-bottom:0}

/* ---------- Tabellen auf lezo.ch ---------- */
table{width:100%;border-collapse:collapse;background:var(--flaeche)}
th,td{padding:10px 14px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
th{background:var(--flaeche-2);color:var(--ink);font-weight:600}
.tablewrap{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r-l);background:var(--flaeche)}
.tablewrap tbody tr:last-child>*{border-bottom:0}
main table:not(.vergleich){border:1px solid var(--linie)}
.tablewrap table{border:0!important}

/* Websites-Seite: Paketvergleich, Ablauf, Galerie, Prüfliste */
.vergleich{min-width:640px}
.vergleich caption{caption-side:bottom;padding:10px 14px;text-align:left}
.vergleich th[scope=row]{width:28%;background:var(--flaeche);color:var(--text-2);font-weight:500}
.vergleich thead th{background:var(--flaeche-2);color:var(--ink);font-size:var(--fs-l);font-weight:700}
.vergleich thead th small{display:block;margin-top:2px;font-size:var(--fs-s);font-weight:600;color:var(--akzent-text)}
.vergleich td.ja::before{content:"✓ ";color:var(--ok);font-weight:700}
.vergleich td.nein{color:var(--text-3)}
.abstand{margin-top:var(--a6)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:var(--a4)}
@media (max-width:760px){.zwei{grid-template-columns:1fr}}
.liste-ja,.liste-nein{list-style:none;margin:var(--a2) 0;padding:0}
.liste-ja li,.liste-nein li{position:relative;padding:4px 0 4px 28px}
.liste-ja li::before{content:"✓";position:absolute;left:2px;color:var(--ok);font-weight:700}
.liste-nein li::before{content:"–";position:absolute;left:4px;color:var(--text-3);font-weight:700}
.zeitleiste{list-style:none;margin:0;padding:0;display:grid;gap:var(--a3);counter-reset:z}
.zeitleiste li{counter-increment:z;position:relative;padding:var(--a4) var(--a5) var(--a4) 68px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l)}
.zeitleiste li::before{content:counter(z);position:absolute;left:20px;top:16px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--akzent-weich);color:var(--akzent-text);font-weight:700}
.zeitleiste b{display:block;color:var(--ink)}
.frist{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:var(--r-pill);background:var(--flaeche-2);color:var(--text-2);font-size:var(--fs-xs);font-weight:600}
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--a4)}
@media (max-width:420px){.galerie{grid-template-columns:1fr}}
.galerie figure{margin:0;padding:var(--a4);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l)}
.zwischentitel{margin-top:var(--a5)}
.galerie img{display:block;width:100%;height:auto;border-radius:var(--r-m);border:1px solid var(--linie)}
.galerie img.mobilbild{max-width:260px;border-radius:var(--r-xl)}
.galerie figcaption{margin-top:var(--a3);color:var(--text-2);font-size:.95rem}
.galerie figcaption b{display:block;color:var(--ink)}
.geraete{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}
.desk,.mobil{position:relative;overflow:hidden;background:var(--flaeche);border:1px solid var(--linie)}
.desk{width:300px;height:188px;border-radius:var(--r-s)}
.mobil{width:162px;height:324px;border-radius:20px;border:4px solid var(--ink)}
.desk img,.mobil img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;border:0;border-radius:0;pointer-events:none}

.desk a.ueber,.mobil a.ueber{position:absolute;inset:0;z-index:2}
.pruefgruppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--a3)}
.pruefgruppen section{padding:var(--a4) var(--a5);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l)}
.pruefgruppen h3{margin:0 0 4px;font-size:var(--fs-m)}
.pruefgruppen ol{margin:4px 0;padding-left:22px;font-size:.95rem;color:var(--text-2)}

/* Dunkle Akzentfläche (eine pro Seite: Website-Check, Konfigurator-Summe) */
.check-cta{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--a5);align-items:center;margin-top:var(--a16);padding:var(--a8);border-radius:var(--r-xl);color:var(--flaeche);background:radial-gradient(600px 260px at 100% 0,rgba(106,76,255,.45),transparent 70%),var(--ink)}
@media (max-width:760px){.check-cta{grid-template-columns:1fr;padding:var(--a6)}}
.check-cta h2{margin:0 0 6px;color:var(--flaeche)}
.check-cta p{margin:0;color:#d6dcf0}

/* ---------- Konfigurator ---------- */
.konf{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--a6);align-items:start}
@media (max-width:860px){.konf{grid-template-columns:1fr}}
.konf h3{margin-top:0}
.wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--a3)}
.wahl label{position:relative;display:block;padding:14px 16px 14px 46px;background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:var(--r-l);cursor:pointer;transition:border-color var(--dauer),box-shadow var(--dauer),background var(--dauer)}
.wahl label:hover{border-color:var(--akzent-rand)}
.wahl input{position:absolute;left:12px;top:12px;width:28px;height:28px;margin:0;accent-color:var(--akzent)}
.wahl label:has(input:checked){border-color:var(--akzent);background:var(--akzent-weich);box-shadow:var(--ring)}
.wahl label:has(input:focus-visible){outline:2px solid var(--akzent);outline-offset:2px}
.wahl b{display:block;color:var(--ink)}
.wahl .p{font-weight:700;color:var(--akzent-text)}
.wahl small{color:var(--text-2)}
/* Summenkarte: Fläche = --ink, Text = --flaeche. Im Dunkelmodus tauschen beide die Helligkeit (Karte hell, Text dunkel).
   Darum eigene Tokens statt fester Farben (#1659, M-1): hell = #d6dcf0 auf Navy, dunkel = #343c58 auf #f2f3f7. */
.summe{--summe-text-2:#d6dcf0;--summe-glow:rgba(106,76,255,.45);--summe-hover:rgba(255,255,255,.12)}
@media (prefers-color-scheme:dark){
  :root[data-schema="auto"] .summe{--summe-text-2:#343c58;--summe-glow:rgba(106,76,255,.16);--summe-hover:rgba(13,27,61,.16)}
}
.summe{position:sticky;top:calc(var(--kopf-h) + 16px);padding:var(--a6);border-radius:var(--r-xl);color:var(--flaeche);background:radial-gradient(500px 240px at 100% 0,var(--summe-glow),transparent 70%),var(--ink)}
.summe .total{margin:4px 0 8px;font-size:2.25rem;font-weight:700;letter-spacing:-.02em}
.summe ul{margin:var(--a2) 0 var(--a4);padding-left:18px;color:var(--summe-text-2);font-size:.93rem}
.summe .btn{display:flex;width:100%;margin-top:var(--a2)}
.summe .btn.hell{--b-bg:var(--flaeche);--b-fg:var(--ink);--b-rand:transparent}
.summe .btn.hell:hover{--b-bg:var(--flaeche-2)}
.summe .btn.alt{--b-bg:transparent;--b-fg:var(--flaeche);--b-rand:var(--flaeche)}
.summe .btn.alt:hover{--b-bg:var(--summe-hover)}
.summe .small{color:var(--summe-text-2)}
.summe a:not(.btn){color:var(--flaeche)}
.summe :focus-visible{outline-color:var(--flaeche)}

/* ---------- Shop ---------- */
.shop-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--a6);align-items:start}
@media (max-width:900px){.shop-layout{grid-template-columns:1fr}}
.shop-layout>div>h2:first-child{margin-top:var(--a10)}
.korb{position:sticky;top:calc(var(--kopf-h) + 16px);margin-top:var(--a10);padding:var(--a5);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-xl);box-shadow:var(--sch-1)}
@media (max-width:900px){.korb{position:static}} /* Oskar #983: fixierter Korb verdeckte bei 360 px 68 % des Bildschirms */
.korb h3{margin:0 0 var(--a2)}
.korb h4{margin:var(--a4) 0 var(--a1);font-size:var(--fs-s);color:var(--text-2)}
.korb-zeile{display:flex;justify-content:space-between;align-items:center;gap:var(--a2);padding:10px 0;border-bottom:1px solid var(--linie);font-size:.95rem}
.korb-zeile button{border:0;background:none;color:var(--fehler);font:inherit;font-size:var(--fs-s);text-decoration:underline;cursor:pointer;min-height:36px}
.korb .total{display:flex;justify-content:space-between;margin:var(--a3) 0;font-size:1.15rem;font-weight:700;color:var(--ink)}
.korb .btn{display:flex;width:100%}
.korb .leer{padding:var(--a6) var(--a4);font-size:.95rem}
.schritte{list-style:none;margin:0;padding:0;counter-reset:s;max-width:var(--breite-text)}
.schritte li{counter-increment:s;position:relative;padding:4px 0 var(--a3) 46px}
.schritte li::before{content:counter(s);position:absolute;left:0;top:2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--akzent-weich);color:var(--akzent-text);font-weight:700}
.zahlzeile{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--a2)}
.zahlzeile label{flex:1 0 100%;font-size:var(--fs-s);font-weight:600}
.zahlzeile .eingabe{width:auto;flex:0 1 220px}
.hinweis{margin:var(--a4) 0;padding:14px 18px;background:var(--akzent-weich);border:1px solid var(--akzent-rand);border-radius:var(--r-m);max-width:var(--breite-text)}

/* ---------- Anfrageformular ---------- */
.af{display:grid;gap:var(--a1);max-width:680px;margin:var(--a8) 0}
.af .zwei{gap:0 var(--a4)}
@media (max-width:620px){.af .zwei{grid-template-columns:1fr}}
.af .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.af .fehler{margin:0;color:var(--fehler);font-weight:600}
.af+#a-ergebnis .meldung{max-width:680px}
.meldung pre{white-space:pre-wrap;margin:10px 0 0;padding:10px;background:var(--flaeche);border-radius:var(--r-s);font:inherit;font-size:.9rem}

/* ---------- Einblenden beim Scrollen (nur wenn Bewegung erwünscht) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s var(--kurve),transform .5s var(--kurve)}
  .js .reveal.sichtbar{opacity:1;transform:none}
  .js .prod.reveal.sichtbar:hover{transform:translateY(-2px)} /* #950: Hover-Anheben wurde vom Einblenden überschrieben */
}
@media print{.js .reveal{opacity:1!important;transform:none!important}.hero{background:none;padding:var(--a6) 0}}

/* ---------- Design-Abnahme #1162 (sw-qa, 06.11.): Tippflächen auf Touch und Druckformat ---------- */
/* Fusszeilen-Links: seit LeZo UI 2.0.1 in lezo-ui.css (#1220), hier nur noch der Warenkorb */
@media (pointer:coarse){.korb-zeile button{min-height:var(--tipp)}}
/* #1755 (Befund Gesamttest 06.11.): Tippflächen >= 44 px auch auf schmalen Bildschirmen ohne Touch-Erkennung
   (Mobil-Emulation ohne pointer:coarse). Kopf-Links, kleine Knöpfe, Konfigurator-Karten (Label = Tippfläche), Korb-Knopf.
   Vorschlag an sw-leitung: Kopf-Link- und .btn.klein-Regel nach lezo-ui.css übernehmen, dann hier streichen. */
@media (max-width:900px){
  .kopf nav a,.btn.klein,.korb-zeile button{min-height:var(--tipp)}
}
.wahl label{min-height:var(--tipp)}
/* #1798 (Messung 06.11.): Brotkrumen-Link «LeZo» und Links unter den Galerie-Bildern waren 19-20 px hoch.
   Tippfläche >= 44 px; die Galerie-Links stehen auf einer eigenen Zeile unter dem Text.
   Brotkrumen (.brot a, 44 x 44 px) seit LeZo UI 2.0.4 in lezo-ui.css (#2416), hier nur noch die Galerie. */
.galerie figcaption a{display:flex;align-items:center;width:fit-content;min-height:var(--tipp)}
@page{size:A4;margin:18mm}
@media print{.btn,.cta{display:none!important}}