/*
Theme Name: Veasna Solar
Description: Schlichtes, modernes Theme fuer Solar Installation by Veasna. Zwei Sprachen (EN/KM), kein Shop.
Version: 1.0
*/

/* ---------- Farben und Masse an einer Stelle ---------- */
:root{
  --navy:#0A2340;          /* Marke dunkel */
  --navy-weich:#16355C;
  --orange:#F09000;        /* Akzent - nur fuer Preise und Handlungen */
  --orange-weich:#FFF3E0;
  --papier:#F2F4F7;        /* Grund: gebrochenes Weiss, nicht grell */
  --karte:#FFFFFF;
  --linie:#DFE5EC;
  --text:#152238;
  --text-leise:#5A6879;
  --radius:14px;
  --breite:1180px;
  --schatten:0 1px 2px rgba(10,35,64,.05), 0 8px 24px rgba(10,35,64,.06);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Noto Sans",Arial,sans-serif;
  font-size:17px; line-height:1.65;
}
body.lang-km, .km{font-family:"Noto Sans Khmer","Khmer OS","Noto Sans",sans-serif; line-height:1.95}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
.huelle{max-width:var(--breite);margin:0 auto;padding:0 22px}

/* ---------- Kopf ---------- */
.kontaktleiste{background:var(--navy);color:#fff;font-size:14.5px}
.kontaktleiste .huelle{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:flex-end;padding-top:9px;padding-bottom:9px}
.kontaktleiste a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px;opacity:.92}
.kontaktleiste a:hover{opacity:1;color:var(--orange)}
.kontaktleiste svg{width:17px;height:17px;flex:0 0 auto}

.kopf{background:var(--karte);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:40}
.kopf .huelle{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px}
.kopf .marke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--navy)}
.kopf .marke img{height:46px;width:auto}  /* Grundwert, unten auf Owner-Wunsch vergroessert */
.kopf .marke .name{font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.2px;max-width:200px;display:block}
.kopf .marke .zusatz{font-size:12.5px;color:var(--text-leise);font-weight:500}
.kopf nav{margin-left:auto}
.kopf nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap}
.kopf nav a{
  text-decoration:none;color:var(--navy);font-weight:600;font-size:15px;
  padding:9px 12px;border-radius:9px;display:block;white-space:nowrap;
}
.kopf nav a:hover,.kopf nav .current-menu-item > a{background:var(--orange-weich);color:var(--navy)}
.kopf .knopf-reihe{display:flex;gap:10px;align-items:center}

/* Knoepfe */
.knopf{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap;
  padding:11px 18px;border-radius:10px;font-weight:650;font-size:15.5px;
  border:1px solid transparent;transition:transform .08s ease;
}
.knopf svg{width:18px;height:18px}
.knopf:active{transform:translateY(1px)}
.knopf-telefon{background:var(--orange);color:#3A2400}
.knopf-telefon:hover{background:#FFA524}
.knopf-telegram{background:#229ED9;color:#fff}
.knopf-telegram:hover{background:#31AFE8}
.knopf-still{background:transparent;color:var(--navy);border-color:var(--linie)}
.knopf-still:hover{border-color:var(--navy)}
.knopf-navy{background:var(--navy);color:#fff}
.knopf-navy:hover{background:var(--navy-weich)}

/* Menue auf dem Handy */
.menue-schalter{display:none;margin-left:auto;background:none;border:1px solid var(--linie);border-radius:9px;padding:9px 12px;cursor:pointer}
.menue-schalter span{display:block;width:20px;height:2px;background:var(--navy);margin:4px 0;border-radius:2px}

/* ---------- Inhalt ---------- */
main{padding:34px 0 34px}
h1,h2,h3{color:var(--navy);line-height:1.22;letter-spacing:-.3px;margin:0 0 14px}
h1{font-size:clamp(28px,4vw,42px);font-weight:750}
h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;margin-top:6px}
h3{font-size:19px;font-weight:650}
p{margin:0 0 16px}
.leise{color:var(--text-leise)}

.abschnitt{margin:0 0 44px}
.abschnitt-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:18px}

/* Werbebilder ganz vorne */
.hero{display:grid;gap:18px;margin:0 0 46px}
.hero a{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);background:var(--karte)}
.hero a:first-child{grid-column:1/-1}
@media(min-width:900px){ .hero{grid-template-columns:1fr 1fr} }

/* Karten */
.karten{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.karte{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--schatten);display:flex;flex-direction:column;
}
.karte > img,.karte > a > img{border-bottom:1px solid var(--linie)}
.karte .inhalt{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.karte h3{margin:0;font-size:17px}
.karte h3 a{text-decoration:none}
.karte h3 a:hover{color:var(--orange)}

/* Preisband: gross der Set-Preis, klein die Montage. NIE eine Summe. */
.preis{background:var(--orange-weich);border:1px solid #F6DCB4;border-radius:11px;padding:13px 15px}
.preis .set{font-size:29px;font-weight:760;color:var(--navy);line-height:1.1;letter-spacing:-.5px}
.preis .set .vorsatz{font-size:15px;font-weight:600;color:var(--text-leise);margin-right:6px}
.preis .montage{margin-top:8px;font-size:14.5px;color:var(--text)}
.preis .montage b{color:#B96A00}
.preis .montage .formel{color:var(--text-leise)}

/* Tabelle Stueckliste */
.spec{width:100%;border-collapse:collapse;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;font-size:15.5px}
.spec th,.spec td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--linie);vertical-align:top}
.spec tr:last-child td{border-bottom:0}
.spec tr:nth-child(even) td{background:#FAFBFC}

/* Kontaktband */
.kontaktband{background:var(--navy);color:#fff;border-radius:var(--radius);padding:30px 28px;display:grid;gap:18px}
.kontaktband h2{color:#fff;margin:0}
.kontaktband p{color:#C9D4E2;margin:0}
.kontaktband .reihe{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Fuss ---------- */
.fuss{background:var(--navy);color:#C9D4E2;margin-top:10px;padding:42px 0 26px;font-size:15px}
.fuss .spalten{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fuss h4{color:#fff;font-size:15px;margin:0 0 10px;letter-spacing:.3px}
.fuss a{color:#C9D4E2;text-decoration:none}
.fuss a:hover{color:var(--orange)}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.fuss .schluss{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;font-size:13.5px;color:#93A3B8;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}

/* ---------- Handy ---------- */
@media(max-width:860px){
  body{font-size:16px}
  .kopf .huelle{flex-wrap:wrap;gap:12px}
  .menue-schalter{display:block}
  .kopf nav{order:3;width:100%;margin-left:0;display:none}
  .kopf nav.offen{display:block}
  .kopf nav ul{flex-direction:column;gap:2px}
  .kopf .knopf-reihe{order:2}
  .kontaktleiste .huelle{justify-content:center}
  .kontaktband{padding:24px 20px}
}

/* ---------- Klassen, die der Datenimport in den Inhalt schreibt ---------- */
.vaesna-hero{display:grid;gap:18px;margin:0 0 46px}
.vaesna-hero .werbebild{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);background:var(--karte)}
@media(min-width:900px){.vaesna-hero{grid-template-columns:1fr 1fr}.vaesna-hero .werbebild:first-child{grid-column:1/-1}}

.vaesna-sets{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));margin:24px 0}
.vaesna-sets .karte{padding:16px;gap:12px}
.vaesna-sets .karte img{border-radius:10px;border:1px solid var(--linie);margin-bottom:12px}
.vaesna-sets .karte h3{font-size:16.5px;margin:0 0 10px}

.vaesna-preis{background:var(--orange-weich);border:1px solid #F6DCB4;border-radius:11px;padding:13px 15px;margin:16px 0}
.vaesna-preis .set{font-size:29px;font-weight:760;color:var(--navy);line-height:1.1;letter-spacing:-.5px}
.vaesna-preis .set .vorsatz{font-size:15px;font-weight:600;color:var(--text-leise);margin-right:6px}
.vaesna-preis .montage{margin-top:8px;font-size:14.5px}
.vaesna-preis .montage b{color:#B96A00}
.vaesna-preis .montage .formel{color:var(--text-leise)}

.vaesna-spec{width:100%;border-collapse:collapse;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;font-size:15.5px;margin:20px 0;display:table}
.vaesna-spec td{padding:11px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
.vaesna-spec tr:last-child td{border-bottom:0}
.vaesna-spec tr:nth-child(even) td{background:#FAFBFC}

.vaesna-regionen{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0}
.vaesna-regionen .knopf{background:var(--navy);color:#fff;padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:650}
.vaesna-regionen .knopf:hover{background:var(--navy-weich)}
@media(max-width:600px){.vaesna-spec{display:block;overflow-x:auto}}

/* ---------- USE OUR APP ---------- */
.knopf-app{background:var(--navy);color:#fff;white-space:nowrap;text-transform:uppercase;letter-spacing:.3px;font-size:14px}
.knopf-app:hover{background:var(--navy-weich)}
.app-kopf{display:grid;gap:22px;align-items:center;background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius);padding:22px;margin:0 0 26px;box-shadow:var(--schatten)}
@media(min-width:760px){.app-kopf{grid-template-columns:200px 1fr}}
.app-kopf .qr-gross img{width:100%;max-width:200px;border-radius:10px;border:1px solid var(--linie)}
.app-karte .qr{display:block;margin:6px 0 12px}
.app-karte .qr img{width:160px;height:160px;object-fit:contain;border:1px solid var(--linie);border-radius:10px}

.kontaktleiste .sprachwechsel{border:1px solid rgba(255,255,255,.35);border-radius:7px;padding:3px 11px;font-weight:600}
.kontaktleiste .sprachwechsel:hover{border-color:var(--orange)}


/* ============================================================
   Nachgemessene Korrekturen (Browser-Prüfung 17.09., Breiten 1280/1024/500)
   ============================================================ */

/* Kopf in EINE Zeile: der App-Knopf bleibt, der doppelte Menuepunkt ist raus. */
.kopf nav ul{flex-wrap:nowrap}
.kopf .marke .name{max-width:none;white-space:nowrap}
@media(max-width:1150px){
  .menue-schalter{display:block}
  .kopf nav{order:3;width:100%;margin-left:0;display:none}
  .kopf nav.offen{display:block}
  .kopf nav ul{flex-direction:column;flex-wrap:wrap;gap:2px}
}

/* Gemessen waren 48,8 % der Flaeche fast reinweiss - die Karte traegt jetzt die Kante,
   nicht die Helligkeit. Der Grund (#F2F4F7, Kontrast 14,46:1) bleibt unveraendert. */
:root{--karte:#FCFDFE;--linie:#E3E8EF}
.vaesna-spec tr:nth-child(even) td,.spec tr:nth-child(even) td{background:#F2F4F7}

/* Loecher im Raster: zwei Karten sollen die Zeile fuellen, Knoepfe auf gleicher Hoehe. */
.karten,.vaesna-sets{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.karte .inhalt > :last-child{margin-top:auto}

/* Zeilenlaenge: gemessen 134 Zeichen, lesbar sind 70-90. */
.abschnitt > p,main .huelle > p{max-width:72ch}
.vaesna-spec{max-width:860px}
@media(max-width:600px){.vaesna-spec tbody{display:table;width:100%;min-width:470px}}

/* Preisband: war 1136 px breit fuer eine 100-px-Zahl. Groessen bleiben, nur die Flaeche. */
.vaesna-preis,.preis{max-width:620px}
.vaesna-preis .montage b,.preis .montage b{color:#A35C00}   /* 3,74:1 -> 4,68:1 */

/* Rhythmus: die eingespielten Bloecke standen auf 16 px, die Theme-Abschnitte auf 44 px. */
.vaesna-preis{margin:14px 0 44px}
.vaesna-hero{margin-bottom:44px}

/* Handy: 243 px gingen fuer Kontaktleiste und Kopf drauf, der Menueknopf war 42 px hoch. */
@media(max-width:860px){
  /* Am Telefon bleibt nur der letzte Verweis stehen - der Sprachknopf muss
     aber sichtbar bleiben, auch wenn der Dunkel-Knopf hinter ihm steht
     (Owner-Befund 17.09.: "am Handy ist der Sprachen-Button weg"). */
  .kontaktleiste a:not(:last-child):not(.sprachwechsel){display:none}
  .kopf .knopf-reihe{width:100%;gap:8px}
  .kopf .knopf-reihe .knopf{flex:1;justify-content:center}
  .menue-schalter{padding:11px 13px}
}

/* Khmer-Ueberschriften erben 1,22 - zu eng fuer Ober- und Unterzeichen. */
body.lang-km h1,body.lang-km h2,body.lang-km h3{line-height:1.45}

/* Fuer Vorleseprogramme: die Startseite braucht eine h1, sichtbar ist der Kopf. */
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* Gemessen bei 1280 px: Marke, Menue und drei Knoepfe zusammen 1320 px - der
   Telegram-Knopf lief aus dem Bild und das Menue schob sich in den Firmennamen.
   Unter 1300 px klappt das Menue jetzt weg, unter 1000 px tragen die Knoepfe nur
   noch ihr Symbol. */
.kopf .marke{min-width:0;flex:0 1 auto}
.kopf .marke .name{overflow:hidden;text-overflow:ellipsis}
.kopf .knopf-reihe{flex:0 0 auto;margin-left:auto}
@media(max-width:1000px){
  .kopf .knopf-reihe .knopf span{display:none}
  .kopf .knopf-reihe .knopf{padding:11px 14px}
}
@media(max-width:860px){
  .kopf .knopf-reihe .knopf span{display:inline}
}


/* Owner 17.09.: die Montage soll kleiner stehen als der Set-Preis, die Rechenformel
   erscheint gar nicht mehr. */
.vaesna-preis .montage,.preis .montage{font-size:13.5px;color:var(--text-leise)}
.vaesna-preis .montage b,.preis .montage b{font-weight:600;color:var(--text-leise)}
.vaesna-preis .formel,.preis .formel{display:none}

/* Im dunklen Kontaktband war der App-Knopf navy auf navy - unsichtbar. */
.kontaktband .knopf-app{background:#fff;color:var(--navy)}
.kontaktband .knopf-app:hover{background:var(--orange);color:#3A2400}

/* Zwischen 1150 und 1350 px ist der Platz knapp: dann traegt das Logo allein die
   Marke - besser als ein abgeschnittener Firmenname ("Solar..."). */
@media(max-width:1350px){ .kopf .marke .name{display:none} }
@media(max-width:1150px){ .kopf .marke .name{display:block} }


/* ---------- Genre-Leiste: eigene Zeile zwischen Kopf und Titelbild ----------
   Nimmt kuenftige Genres auf (Insel-Sets, Solar Boat, Zaun und Fassade, Container),
   ohne dass am Theme etwas geaendert werden muss. */
.genre-leiste{background:var(--karte);border-bottom:1px solid var(--linie)}
.genre-leiste .huelle{display:flex;gap:10px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.genre-leiste a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:10px 18px;border-radius:999px;border:1px solid var(--linie);
  color:var(--navy);font-weight:650;font-size:15px;white-space:nowrap;background:#fff;
}
.genre-leiste a:hover{border-color:var(--orange);color:#B96A00}
.genre-leiste a.aktiv{background:var(--navy);border-color:var(--navy);color:#fff}
@media(max-width:700px){ .genre-leiste .huelle{overflow-x:auto;flex-wrap:nowrap} }


/* Owner 17.09.: das Logo im Kopf war zu klein - es soll mindestens so gross sein
   wie im Titelbild (dort rund 78 px bei 1280 px Seitenbreite). */
.kopf .marke img{height:80px}
.kopf .huelle{padding-top:10px;padding-bottom:10px}
@media(max-width:860px){ .kopf .marke img{height:60px} }


/* Genre-Leiste traegt jetzt das Menue: Home, die Set-Genres und Contact.
   Neue Genres (Insel-Sets nach Mass, Solar Boat, Zaun und Fassade, Container)
   kommen als Menuepunkt dazu und erscheinen hier automatisch. */
.genre-leiste ul{list-style:none;display:flex;gap:10px;margin:0;padding:0;flex-wrap:wrap}
.genre-leiste li{margin:0}
.genre-leiste a,.genre-leiste li > a{
  display:inline-flex;align-items:center;text-decoration:none;
  padding:10px 18px;border-radius:999px;border:1px solid var(--linie);
  color:var(--navy);font-weight:650;font-size:15px;white-space:nowrap;background:#fff;
}
.genre-leiste .current-menu-item > a{background:var(--navy);border-color:var(--navy);color:#fff}
.kopf .knopf-reihe{margin-left:auto}
@media(max-width:700px){ .genre-leiste ul{flex-wrap:nowrap} }


/* Genres ohne Angebot: freundlicher Platzhalter statt leerer Seite. */
.bald{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
      padding:46px 32px;text-align:center;box-shadow:var(--schatten);max-width:640px;margin:10px auto 0}
.bald .gross{font-size:26px;font-weight:750;color:var(--navy);margin:0 0 10px}
.bald p{color:var(--text-leise);margin:0 auto;max-width:44ch}

/* Owner 17.09.: die Genre-Leiste soll einzeilig bleiben - kleinere Pillen. */
.genre-leiste ul{gap:6px;flex-wrap:wrap;overflow:visible;scrollbar-width:none}
/* gemessen 17.09.: overflow-x:auto hat das Aufklappmenue abgeschnitten -
   die Untermenues von "Solar sets"/"Solar systems" waren nie zu sehen. */
.genre-leiste ul::-webkit-scrollbar{display:none}
.genre-leiste a,.genre-leiste li > a{padding:6px 11px;font-size:12.6px;letter-spacing:-.1px}
.genre-leiste .huelle{padding-top:8px;padding-bottom:8px}


/* Chrome-Endkontrolle 17.09.: drei Nachbesserungen
   1. zwischen 861 und 1000 px hatten die Kopfknoepfe nur noch Symbole - der
      Eigentümer will sie beschriftet sehen.
   2. zwischen 1151 und 1350 px fehlte der Firmenname neben dem Logo.
   3. auf dem Telefon lief die Genre-Leiste ins Nichts: die letzten Punkte waren
      nur durch Wischen erreichbar, ohne jeden Hinweis. Jetzt zweizeilig. */
/* Beschriftung bleibt sichtbar - aber NUR die lange; die kurze ('APP') bleibt aus,
   sonst stand beides nebeneinander (gemessen bei 900-1000 px). */
@media(max-width:1000px){ .kopf .knopf-reihe .knopf .lang{display:inline} }
@media(max-width:1350px){ .kopf .marke .name{display:block;font-size:15px;max-width:150px;white-space:normal;line-height:1.2} }
@media(max-width:820px){
  .genre-leiste ul{flex-wrap:wrap;overflow-x:visible}
  .genre-leiste a,.genre-leiste li > a{font-size:13px;padding:7px 12px}
}


/* Android-Telefone sind oft nur 360-412 px breit. Damit nichts aus dem Bild laeuft
   und die Seite nicht herausgezoomt wirkt: harte Breitenbegrenzung und Bilder, die
   nie breiter werden als ihr Kasten. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,table,iframe{max-width:100%}
.vaesna-spec,.spec{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:520px){
  .vaesna-spec tbody,.spec tbody{display:table;width:100%;min-width:420px}
  .kopf .marke img{height:48px}
  .kopf .marke .name{font-size:14px;max-width:130px}
  h1{font-size:26px}
  .vaesna-preis .set,.preis .set{font-size:26px}
}


/* Untermenue in der Genre-Leiste: "Solar systems" klappt seine Anwendungen auf. */
.genre-leiste li{position:relative}
.genre-leiste li.menu-item-has-children > a::after{content:'▾';margin-left:7px;font-size:11px;opacity:.7}
.genre-leiste .sub-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:60;
  background:var(--karte);border:1px solid var(--linie);border-radius:12px;
  box-shadow:var(--schatten);padding:8px;min-width:230px;flex-direction:column;gap:4px;
}
.genre-leiste li:hover > .sub-menu,
.genre-leiste li:focus-within > .sub-menu{display:flex}
.genre-leiste .sub-menu a{border:0;border-radius:8px;width:100%;padding:9px 12px;background:transparent}
.genre-leiste .sub-menu a:hover{background:var(--orange-weich)}
@media(max-width:820px){
  .genre-leiste .sub-menu{position:static;display:flex;box-shadow:none;border:0;padding:0;
    flex-direction:row;flex-wrap:wrap;min-width:0;background:transparent}
  .genre-leiste .sub-menu a{border:1px solid var(--linie);background:#fff;width:auto;font-size:12.5px}
  .genre-leiste li.menu-item-has-children > a::after{content:''}
}


/* ---------- Genre-Leiste auf dem Telefon: zugeklappt ----------
   Am Rechner bleibt die Pillenleiste wie sie ist; unter 900 px wird daraus ein
   Knopf "Menu", der eine ruhige Liste aufklappt. */
.genre-knopf{display:none}
@media(max-width:900px){
  .genre-leiste .huelle{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:0;padding-bottom:0}
  .genre-knopf{
    display:flex;align-items:center;gap:12px;padding:14px 4px;cursor:pointer;
    font-weight:700;font-size:16px;color:var(--navy);
  }
  .genre-knopf .balken{width:20px;height:2px;background:var(--navy);position:relative;display:block}
  .genre-knopf .balken::before,.genre-knopf .balken::after{
    content:'';position:absolute;left:0;width:20px;height:2px;background:var(--navy)}
  .genre-knopf .balken::before{top:-6px}
  .genre-knopf .balken::after{top:6px}
  .genre-leiste ul{display:none}
  .genre-schalter:checked ~ .huelle ul:not(.werkstatt-liste){display:block;padding:4px 0 14px}
  .genre-leiste li{display:block;margin:0}
  /* NUR die Menuepunkte werden zu Listenzeilen - der Home-Knopf daneben nicht,
     sonst nimmt er die volle Breite und schiebt "Menu" in die naechste Zeile. */
  .genre-leiste ul a,.genre-leiste li > a{
    display:block;width:100%;border:0;border-radius:0;border-bottom:1px solid var(--linie);
    padding:14px 4px;font-size:16px;background:transparent;white-space:normal;
  }
  .genre-leiste .current-menu-item > a{background:transparent;color:var(--orange);font-weight:750}
  /* Untermenue eingerueckt, nicht als zweite Pillenwolke */
  .genre-leiste .sub-menu{display:block;position:static;border:0;box-shadow:none;padding:0;background:transparent}
  .genre-leiste .sub-menu a{padding-left:22px;font-size:15px;color:var(--text-leise)}
  .genre-leiste li.menu-item-has-children > a{font-weight:750}
}


/* Das Preisband ist anklickbar und fuehrt zum Set (Owner 17.09.: "die meisten
   druecken auf den preis"). Es soll trotzdem nicht wie ein Textlink aussehen. */
a.preis-link{display:block;text-decoration:none;color:inherit}
a.preis-link .vaesna-preis{transition:border-color .12s ease, box-shadow .12s ease}
a.preis-link:hover .vaesna-preis{border-color:var(--orange);box-shadow:var(--schatten)}
.karte h3 a,main h2 a{text-decoration:none;color:inherit}
.karte h3 a:hover,main h2 a:hover{color:var(--orange)}


/* ---------- Kopfknoepfe auf dem Telefon ----------
   "USE OUR APP" lief bei 360-412 px aus dem Bild. Unter 560 px heisst der Knopf
   nur noch "APP", alle drei teilen sich die Breite gleichmaessig und duerfen
   schrumpfen (min-width:0), sonst drueckt der laengste die anderen hinaus. */
.knopf .kurz{display:none}
@media(max-width:560px){
  .kopf .knopf-reihe{width:100%;gap:6px;flex-wrap:nowrap}
  .kopf .knopf-reihe .knopf{
    flex:1 1 0;min-width:0;justify-content:center;
    padding:11px 8px;font-size:14px;gap:6px;
  }
  .kopf .knopf-reihe .knopf svg{width:16px;height:16px;flex:0 0 auto}
  /* die langen Beschriftungen weg, nur Symbol + kurzes Wort */
  .kopf .knopf-reihe .knopf .lang{display:none}
  .kopf .knopf-reihe .knopf .kurz{display:inline}
  .kopf .huelle{flex-wrap:wrap;row-gap:10px}
  .kopf .marke{flex:1 1 100%}
  .kopf .knopf-reihe .knopf span{overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:380px){
  .kopf .knopf-reihe .knopf{font-size:13px;padding:10px 6px}
}


/* Die Fundgrube-Karte im Workshop hebt sich ab - sie fuehrt woandershin. */
.karte.hervor{background:var(--orange-weich);border-color:#F6DCB4}
.karte.hervor h3 a{color:#B96A00}


/* ---------- Zurueck / vor in der obersten Leiste ---------- */
.kontaktleiste .huelle{justify-content:space-between}
.blaettern{display:flex;gap:6px;margin-right:auto}
.blaettern .pfeil{
  width:32px;height:28px;border:1px solid rgba(255,255,255,.35);border-radius:7px;
  background:transparent;color:#fff;font-size:18px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.blaettern .pfeil:hover{border-color:var(--orange);color:var(--orange)}

/* ---------- Home-Knopf neben dem Menue (nur Telefon) ---------- */
/* Achtung Spezifitaet: '.genre-leiste a' ist staerker als '.home-knopf' -
   deshalb muss auch das Ausblenden ueber die Leiste adressiert werden,
   sonst steht der Knopf am Rechner doppelt (Owner-Befund 17.09.). */
.genre-leiste .home-knopf{display:none}
@media(max-width:900px){
  .genre-leiste .home-knopf{
    display:inline-flex;align-items:center;gap:8px;text-decoration:none;width:auto;
    color:var(--navy);font-weight:700;font-size:16px;padding:10px 16px;
    border:1px solid var(--linie);border-radius:999px;background:#fff;
  }
  .home-knopf svg{width:19px;height:19px}
  .genre-knopf{margin-left:auto}
  .genre-schalter:checked ~ .huelle ul:not(.werkstatt-liste){order:3;width:100%}
}


/* Materialliste mit Bild: kleine, ruhige Vorschau in der ersten Spalte. */
.vaesna-spec .bildzelle{width:72px;padding:8px 10px}
.vaesna-spec .bildzelle img{width:56px;height:56px;object-fit:contain;display:block;
  background:#fff;border:1px solid var(--linie);border-radius:8px;padding:4px}
@media(max-width:520px){ .vaesna-spec .bildzelle{width:56px} .vaesna-spec .bildzelle img{width:44px;height:44px} }


/* ---------- Warenkorb ---------- */
#warenkorb{position:fixed;right:16px;bottom:16px;z-index:80;max-width:min(420px,calc(100vw - 32px))}
#warenkorb.leer{display:none}
.korb-auf{
  display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;
  background:var(--navy);color:#fff;border:0;border-radius:12px;padding:13px 16px;
  font-weight:700;font-size:15px;box-shadow:var(--schatten);
}
.korb-auf .korb-anzahl{background:var(--orange);color:#3A2400;border-radius:999px;padding:1px 9px;font-size:13px}
.korb-auf .korb-summe-wert{margin-left:auto}
.korb-inhalt{display:none;background:var(--karte);border:1px solid var(--linie);border-radius:12px;
  box-shadow:var(--schatten);margin-top:8px;padding:14px;max-height:70vh;overflow:auto}
#warenkorb.offen .korb-inhalt{display:block}
.korb-zeile{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--linie);font-size:14.5px}
.korb-zeile .korb-menge{color:var(--text-leise)}
.korb-weg{border:0;background:transparent;color:var(--text-leise);cursor:pointer;font-size:17px;line-height:1}
.korb-summe{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:17px}
.korb-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.korb-text-feld{width:100%;margin-top:10px;font-family:ui-monospace,monospace;font-size:12px;
  border:1px solid var(--linie);border-radius:8px;padding:8px}
.korb-zahlen{display:flex;gap:14px;align-items:flex-start;margin-top:14px;
  border-top:1px solid var(--linie);padding-top:14px}
#khqr img{width:150px;height:150px;image-rendering:pixelated;border:1px solid var(--linie);border-radius:8px}
#khqr.ohne{display:none}
.korb-zahltext .korb-summe-wert{display:block;font-size:22px;font-weight:750;color:var(--navy)}
.korb-fehlt{color:#B3261E;font-size:13px;margin:6px 0 0}
.korb-hinweis{font-size:12.5px;margin-top:8px}

/* Mengenfeld und Add-Knopf in den Listen */
.vaesna-spec .mengenzelle{white-space:nowrap;width:110px}
.menge-feld{width:56px;padding:6px 8px;border:1px solid var(--linie);border-radius:8px;font-size:14px}
.add-knopf{margin-left:6px;width:32px;height:32px;border-radius:8px;border:0;background:var(--navy);
  color:#fff;font-size:18px;line-height:1;cursor:pointer}
.add-knopf:hover{background:var(--orange);color:#3A2400}
.add-knopf.getan{background:#1E7A46}
.ware-info{display:none;font-size:13px;color:var(--text-leise);margin-top:4px}
.info-schalter:checked ~ .ware-info{display:block}
.warename{cursor:pointer}
.warename:hover{color:var(--orange)}
@media(max-width:520px){
  #warenkorb{left:12px;right:12px;bottom:12px;max-width:none}
  .korb-zahlen{flex-direction:column}
}


/* Untermenue "Solar systems": erst die vier Produkte in EINER Reihe, dann
   abgesetzt die Anwendungen (Owner 17.09.). */
.genre-leiste .sub-menu{
  display:none;grid-template-columns:repeat(4,minmax(150px,1fr));gap:6px;min-width:660px;
}
.genre-leiste li:hover > .sub-menu,
.genre-leiste li:focus-within > .sub-menu{display:grid}
.genre-leiste .sub-menu li.produkt > a{font-weight:700;background:var(--orange-weich)}
.genre-leiste .sub-menu li.produkt{border-bottom:1px solid var(--linie);padding-bottom:8px;margin-bottom:6px}
@media(max-width:900px){
  .genre-leiste .sub-menu{display:block;min-width:0;grid-template-columns:none}
  .genre-leiste .sub-menu li.produkt{border-bottom:0;padding-bottom:0;margin-bottom:0}
  .genre-leiste .sub-menu li.produkt > a{background:transparent;font-weight:700;color:var(--navy)}
  .genre-leiste .sub-menu li.anwendung:first-of-type{border-top:2px solid var(--linie)}
}


/* ---------- Nachbesserungen aus der visuellen Pruefung 17.09. ----------
   1. Preis lief auf dem Telefon aus der Karte: feste Spaltenbreiten statt
      Mindestbreite, und auf schmalen Geraeten faellt die Leistungsspalte weg.
   2. Bilder waren mit 56 px zu klein zum Verkaufen.
   3. Mengenfeld und "+" lagen unter dem Fingermass (44 px).
   4. Der Warenkorb lag auf der letzten Zeile. */
.vaesna-spec{table-layout:fixed;width:100%;max-width:100%}
.vaesna-spec .bildzelle{width:96px}
.vaesna-spec .bildzelle img{width:80px;height:80px}
.vaesna-spec .mengenzelle{width:132px}
.vaesna-spec td:last-child{width:120px;padding-right:14px}
.vaesna-spec .nrzelle{width:196px}
.vaesna-spec .nrzelle code{font-size:13.5px;letter-spacing:0}
.vaesna-spec .kwzelle{width:88px;white-space:nowrap}
.vaesna-spec td{overflow-wrap:anywhere}
.menge-feld{width:62px;height:44px;padding:6px 8px}
.add-knopf{width:44px;height:44px;font-size:20px;vertical-align:middle}
body{padding-bottom:90px}

@media(max-width:620px){
  .vaesna-spec tbody{display:table;width:100%;min-width:0}
  .vaesna-spec .bildzelle{width:64px}
  .vaesna-spec .bildzelle img{width:56px;height:56px}
  .vaesna-spec .mengenzelle{width:112px}
  /* vierstellige Preise ($2,325.75) duerfen nicht umbrechen */
  .vaesna-spec td:last-child{width:104px;padding-right:8px;font-size:14px;white-space:nowrap}
  /* Artikelnummer und Leistung braucht am Telefon niemand - beides steht im Namen */
  .vaesna-spec .nrzelle,.vaesna-spec .kwzelle{display:none}
}


/* ---------- Solar systems: vier Produkte als erste Reihe (Owner 17.09.) ----------
   Direkt unter der Ueberschrift "Solar systems" stehen Solar panels, Inverters,
   Battery storage und Materials - vier in EINER Reihe. Danach eine Trennlinie
   und erst dann die Anwendungen (Haus/Villa, Motel/Hotel ...). */
.produktreihe{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 0}
.produkt-knopf{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:64px;padding:14px 12px;border-radius:var(--radius);text-decoration:none;
  background:var(--navy);color:#fff;font-weight:700;font-size:16px;line-height:1.25;
  border:1px solid var(--navy);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.produkt-knopf:hover{background:var(--orange);border-color:var(--orange);color:#3A2400}
.produkt-trenner{height:1px;background:var(--linie);margin:26px 0 22px}
@media(max-width:820px){
  .produktreihe{grid-template-columns:repeat(2,1fr);gap:10px}
  .produkt-knopf{min-height:58px;font-size:15px}
  .produkt-trenner{margin:20px 0 16px}
}

/* Dasselbe im Aufklappmenue: die Produktreihe oben, darunter eine durchgehende
   Trennlinie, dann die Anwendungen. */
.genre-leiste .sub-menu li.produkt{border-bottom:2px solid var(--linie);padding-bottom:10px;margin-bottom:10px}

/* Erklaerender Satz unter einer Abschnitts-Ueberschrift. */
p.hinweis{max-width:70ch;color:var(--text-leise);font-size:15px;margin:-4px 0 14px;
  border-left:3px solid var(--linie);padding-left:12px}


/* ---------- Preisschild in Logo-Blau (Owner 17.09.) ----------
   Gemessen im Logo `brand/logo_vaesna.png`: der Schriftzug VAESNA liegt
   zwischen #01254A und #0760A3. Der Preis nimmt dieses Blau, der Kasten einen
   hellen blauen Grund statt der cremefarbenen Flaeche. */
:root{--logo-blau:#0A56A0; --logo-blau-tief:#01254A; --logo-blau-hell:#EDF3FB;
      --logo-blau-linie:#C9DCF2}
.vaesna-preis,.preis{
  background:var(--logo-blau-hell);
  border:1px solid var(--logo-blau-linie);
  border-left:5px solid var(--logo-blau);
  border-radius:11px;
}
.vaesna-preis .set,.preis .set{color:var(--logo-blau)}
.vaesna-preis .set .vorsatz,.preis .set .vorsatz{color:var(--logo-blau-tief);opacity:.75}
.vaesna-preis .montage,.preis .montage{color:var(--logo-blau-tief)}
.vaesna-preis .montage b,.preis .montage b{color:var(--logo-blau);font-weight:700}

/* Preis in den Bestell-Listen in Logo-Blau statt Schwarz - nur in Bestellzeilen,
   damit die Mengenspalte der Stueckliste auf den Set-Seiten normal bleibt. */
.vaesna-spec tr.ware td:last-child{color:var(--logo-blau)}
.vaesna-spec tr.ware td:last-child b{color:var(--logo-blau)}


/* ---------- Angaben unter dem Set-Bild untereinander (Owner 17.09.) ---------- */
.setkopf{margin:14px 0 10px}
.setkopf a{display:block;text-decoration:none;color:inherit}
.setkopf span{display:block;line-height:1.25}
.setkopf .sku{font-size:21px;font-weight:750;color:var(--navy);letter-spacing:-.2px}
.setkopf .kwp{font-size:17px;font-weight:700;color:var(--logo-blau);margin-top:3px}
.setkopf .bauart{font-size:15px;color:var(--text-leise);margin-top:2px}
.setkopf .speicher{font-size:15px;font-weight:700;color:var(--logo-blau-tief);margin-top:6px}
.setkopf .speicher-wert{font-size:17px;font-weight:750;color:var(--logo-blau);margin-top:1px}
.setkopf a:hover .sku{color:var(--logo-blau)}

/* Preisschild jeder Set-Karte auf gleicher Hoehe: die Karte ist eine Spalte,
   der Preis wird nach unten geschoben (Karten haben 3 oder 4 Angabezeilen). */
.vaesna-sets .karte{display:flex;flex-direction:column}
.vaesna-sets .karte .setkopf{margin-bottom:auto}
.vaesna-sets .karte .preis-link{margin-top:14px}

/* Gleicher Kopf auf der Set-Seite, nur groesser. */
.setkopf-gross{margin:6px 0 22px}
.setkopf-gross .kwp{font-size:21px}
.setkopf-gross .bauart{font-size:17px}
.setkopf-gross .speicher{font-size:17px}
.setkopf-gross .speicher-wert{font-size:21px}


/* ---------- Datenblatt am Produkt (Owner 17.09.) ----------
   Klick auf Modellname oder Bild oeffnet das PDF in einem neuen Reiter. */
.blattlink{color:inherit;text-decoration:none;display:inline-block}
.blattlink:hover{color:var(--logo-blau)}
.blattmarke{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  border:1px solid var(--logo-blau-linie);background:#EDF3FB;color:var(--logo-blau);
  font-size:11.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap;vertical-align:1px}
.blattlink:hover .blattmarke{background:var(--logo-blau);color:#fff;border-color:var(--logo-blau)}
.bildzelle a{display:block}
.bildzelle a:hover img{outline:2px solid var(--logo-blau);outline-offset:1px;border-radius:6px}
@media(max-width:620px){ .blattmarke{margin-left:0;margin-top:3px;display:block;width:max-content} }


/* ---------- Telefon schmal (bis 560 px): Listen als Karten ----------
   Gemessen bei 360 px (Owner 17.09.: "am Handy ist die Skalierung ganz komisch,
   man kann nichts lesen"): die Tabelle war breiter als das Display, der Preis
   stand ausserhalb. Jede Zeile wird darum zu einer kleinen Karte:
   Bild | Name | Preis  und darunter Menge + "+". */
@media(max-width:560px){
  .vaesna-spec{display:block;overflow:visible;border-radius:12px}
  .vaesna-spec tbody{display:block;width:auto;min-width:0}
  .vaesna-spec tr.ware{
    display:grid;grid-template-columns:56px minmax(0,1fr) auto;
    /* Owner 17.09.: der Preis klebte am "+" - er steht jetzt oben rechts,
       Menge und "+" haben die zweite Zeile fuer sich. */
    grid-template-areas:"bild name preis" "bild menge menge";
    gap:6px 10px;padding:11px 12px;align-items:center}
  .vaesna-spec tr.ware td{display:block;border:0;padding:0;background:transparent}
  .vaesna-spec tr.ware + tr.ware{border-top:1px solid var(--linie)}
  .vaesna-spec .bildzelle{grid-area:bild;width:auto}
  .vaesna-spec .bildzelle img{width:56px;height:56px}
  .vaesna-spec tr.ware > td:nth-child(2){grid-area:name;font-size:14.5px;line-height:1.35}
  /* hoehere Genauigkeit als die td-Regel darueber, sonst tauchen Artikelnummer
     und Leistung wieder auf und ueberlagern den Preis */
  .vaesna-spec tr.ware > td.nrzelle,.vaesna-spec tr.ware > td.kwzelle{display:none}
  .vaesna-spec tr.ware > td.mengenzelle{grid-area:menge;justify-self:start;width:auto}
  .vaesna-spec tr.ware > td:last-child{grid-area:preis;justify-self:end;align-self:start;
    white-space:nowrap;font-size:16px;font-weight:750;padding-left:10px}
  .vaesna-spec tr.ware > td.mengenzelle{margin-top:2px}
  /* Zebra-Streifen wuerden die Karten zerreissen */
  .vaesna-spec tr:nth-child(even) td{background:transparent}
  .vaesna-spec tr.ware:nth-child(even){background:#F7F9FC}
}

/* Kopfknoepfe auf sehr schmalen Telefonen (360 px): drei gleich breite Knoepfe,
   nichts laeuft mehr aus dem Bild. */
@media(max-width:420px){
  .kopf .knopf-reihe{display:flex;gap:6px;width:100%}
  .kopf .knopf-reihe .knopf{flex:1 1 0;min-width:0;padding:9px 6px;font-size:12.5px;
    justify-content:center;gap:5px}
  .kopf .knopf-reihe .knopf svg{width:15px;height:15px;flex:none}
  /* die langen Beschriftungen weg, nur Symbol + kurzes Wort */
  .kopf .knopf-reihe .knopf .lang{display:none}
  .kopf .knopf-reihe .knopf .kurz{display:inline}
  .kopf .huelle{flex-wrap:wrap;row-gap:10px}
  .kopf .marke{flex:1 1 100%}
}


/* ---------- Genre-Leiste: nur drei Knoepfe (Owner 17.09.) ----------
   Home · Workshop · Menue - am Telefon und am Laptop gleich. Die Genres selbst
   liegen im aufklappbaren Menue. */
.werkstatt-knopf{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border:1px solid var(--linie);border-radius:999px;background:var(--karte);
  color:var(--navy);text-decoration:none;font-weight:700;font-size:13.5px;white-space:nowrap}
.werkstatt-knopf svg{width:16px;height:16px;flex:none}
.werkstatt-knopf:hover{border-color:var(--orange);color:#B96A00}
.genre-leiste .huelle{align-items:center}
/* Die Menue-Liste bleibt zugeklappt, bis der Schalter gesetzt ist - auch breit. */
.genre-leiste .huelle > ul:not(.werkstatt-liste){display:none}
.genre-schalter:checked ~ .huelle > ul:not(.werkstatt-liste){display:flex;flex-wrap:wrap;width:100%;
  gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--linie)}
.genre-knopf{display:inline-flex}


/* ---------- Drei Knoepfe, ueberall gleich (Owner 17.09.) ----------
   Home · Workshop · Menue stehen jetzt auf jeder Breite in EINER Reihe;
   die Genres liegen im aufklappbaren Menue darunter. */
.genre-leiste .huelle{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.genre-leiste .home-knopf{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;width:auto;
  color:var(--navy);font-weight:700;font-size:13.5px;padding:7px 14px;
  border:1px solid var(--linie);border-radius:999px;background:var(--karte)}
.genre-leiste .home-knopf svg{width:16px;height:16px}
.genre-leiste .home-knopf:hover{border-color:var(--orange);color:#B96A00}
.genre-knopf{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;margin-left:auto;
  padding:7px 14px;border:1px solid var(--linie);border-radius:999px;
  background:var(--karte);font-weight:700;font-size:13.5px;color:var(--navy)}
.genre-knopf:hover{border-color:var(--orange);color:#B96A00}
.genre-knopf .balken{width:18px;height:2px;background:currentColor;position:relative;display:block}
.genre-knopf .balken::before,.genre-knopf .balken::after{
  content:'';position:absolute;left:0;width:18px;height:2px;background:currentColor}
.genre-knopf .balken::before{top:-5px}
.genre-knopf .balken::after{top:5px}
/* Die Liste der Genres: erst beim Aufklappen, dann ueber die ganze Breite. */
.genre-leiste .huelle > ul:not(.werkstatt-liste){display:none}
.genre-schalter:checked ~ .huelle > ul:not(.werkstatt-liste){display:flex;order:3;width:100%;flex-wrap:wrap;
  gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--linie)}
/* Die Startseite steckt schon im Home-Knopf - im Menue nicht doppelt zeigen. */
.genre-leiste .huelle > ul:not(.werkstatt-liste) > li:first-child{display:none}
@media(max-width:560px){
  .genre-leiste .huelle{gap:8px}
  .genre-leiste .home-knopf,.werkstatt-knopf,.genre-knopf{font-size:13px;padding:8px 12px}
  .genre-schalter:checked ~ .huelle > ul:not(.werkstatt-liste){flex-direction:column;gap:2px}
  .genre-schalter:checked ~ .huelle > ul:not(.werkstatt-liste) li{width:100%}
  .genre-schalter:checked ~ .huelle > ul:not(.werkstatt-liste) li > a{display:block;width:100%;border:0;
    border-radius:10px;padding:11px 12px;font-size:15px}
}


/* Owner 17.09.: alle drei Knoepfe gleich gross. */
.genre-leiste .home-knopf,
.genre-leiste .werkstatt-knopf,
.genre-leiste .genre-knopf{
  margin-left:0;width:170px;justify-content:center;text-align:center;
  padding-left:10px;padding-right:10px}
@media(max-width:560px){
  /* Die drei Knoepfe teilen sich eine Zeile; die aufgeklappte Liste rutscht
     darunter (nowrap hat sie vorher neben die Knoepfe gequetscht). */
  .genre-leiste .home-knopf,
  .genre-leiste .werkstatt-knopf,
  .genre-leiste .genre-knopf{width:auto;flex:1 1 28%;min-width:0}
  .genre-leiste .huelle{flex-wrap:wrap;gap:6px}
  .genre-schalter:checked ~ .huelle > ul:not(.werkstatt-liste){flex:1 1 100%;width:100%}
}


/* Owner 17.09.: Reihenfolge Home · Menue · Workshop. */
.genre-leiste .home-knopf{order:1}
.genre-leiste .genre-knopf{order:2}
.genre-leiste .werkstatt-knopf{order:3}
.genre-schalter:checked ~ .huelle > ul:not(.werkstatt-liste){order:4}


/* ---------- Aufklappmenue: Luecke ueberbruecken (Owner 17.09.) ----------
   Das Untermenue stand 6 px unter dem Knopf. Auf dem Weg dorthin verliess der
   Mauszeiger den Listenpunkt und das Menue schloss sich, bevor man ankam.
   Der unsichtbare Streifen unter dem Knopf haelt den Hover-Zustand. */
.genre-leiste li.menu-item-has-children{position:relative}
.genre-leiste li.menu-item-has-children::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:12px;
  display:none;pointer-events:auto}
.genre-leiste li.menu-item-has-children:hover::after,
.genre-leiste li.menu-item-has-children:focus-within::after{display:block}
/* etwas naeher heran, damit der Weg kurz ist */
.genre-leiste .sub-menu{top:calc(100% + 4px)}
/* Das Untermenue bleibt offen, solange der Zeiger darin ist. */
.genre-leiste .sub-menu:hover{display:grid}

/* Contact-Verweis in der oberen blauen Leiste */
.kontaktleiste .kontakt-verweis{font-weight:700}
.kontaktleiste .kontakt-verweis svg{opacity:.9}


/* Obere Leiste: mit dem Contact-Verweis wurde sie zweizeilig. Auf mittleren
   Bildschirmen faellt zuerst die Adresse weg (sie steht im Fuss und auf der
   Kontaktseite), dann die E-Mail. */
@media(max-width:1400px){ .kontaktleiste .huelle > a[href*="maps.google"] span{display:none} }
@media(max-width:1150px){ .kontaktleiste .huelle > a[href^="mailto"] span{display:none} }
@media(max-width:900px){ .kontaktleiste .huelle > a[href*="maps.google"]{display:none} }


/* ---------- Zwei Menues, eines offen (Owner 17.09.) ---------- */
.werkstatt-knopf{cursor:pointer}
.genre-leiste .werkstatt-liste{display:none;list-style:none;margin:0;padding:0}
.werkstatt-schalter:checked ~ .huelle > .werkstatt-liste{
  display:flex;order:4;width:100%;flex-wrap:wrap;gap:8px;margin-top:10px;
  padding-top:12px;border-top:1px solid var(--linie)}
.genre-leiste .werkstatt-liste a{
  display:inline-block;padding:7px 14px;border:1px solid var(--linie);border-radius:999px;
  background:var(--karte);color:var(--navy);text-decoration:none;font-weight:700;font-size:13px}
.genre-leiste .werkstatt-liste a:hover{border-color:var(--orange);color:#B96A00}
/* der gedrueckte Knopf ist zu erkennen */
.genre-schalter:checked ~ .huelle .genre-knopf,
.werkstatt-schalter:checked ~ .huelle .werkstatt-knopf{
  border-color:var(--orange);color:#B96A00;background:var(--orange-weich)}
@media(max-width:560px){
  .werkstatt-schalter:checked ~ .huelle > .werkstatt-liste{flex-direction:column;gap:2px}
  .genre-leiste .werkstatt-liste a{display:block;width:100%;border:0;border-radius:10px;
    padding:11px 12px;font-size:15px}
}


/* ---------- Telefon: kein Sandwich-Zeichen, Wort ueber Wort (Owner 17.09.) ---------- */
@media(max-width:560px){
  .genre-knopf .balken,.genre-knopf .balken::before,.genre-knopf .balken::after{display:none}
  .werkstatt-knopf svg{display:none}
  .genre-knopf .wort,.werkstatt-knopf .wort{display:flex;flex-direction:column;line-height:1.15}
  .genre-knopf .strich,.werkstatt-knopf .strich{display:none}
  .genre-knopf .teil2,.werkstatt-knopf .teil2{font-weight:600;font-size:12px;opacity:.75}
  .genre-leiste .home-knopf,.genre-leiste .werkstatt-knopf,.genre-leiste .genre-knopf{
    padding:8px 6px;font-size:13px}
  /* Rand am Telefon: die Leiste darf nicht am Displayrand kleben */
  .genre-leiste .huelle{padding-left:14px;padding-right:14px;gap:8px}
}


/* Riegel: die Workshop-Liste zeigt sich NUR bei gesetztem Workshop-Schalter. */
.genre-leiste .werkstatt-liste{display:none}
.werkstatt-schalter:checked ~ .huelle > .werkstatt-liste{display:flex}


/* ---------- Ein Menue, nie zwei (Owner 17.09., ohne Skript) ----------
   Die Leiste hat drei Radioknoepfe: zu / Solar / Workshop. Der Browser haelt
   immer nur einen gesetzt - damit kann das Workshop-Menue nicht stehenbleiben,
   wenn man auf "Solar - Menu" drueckt. Die kleine Flaeche im Knopf schliesst
   das offene Menue beim zweiten Druck. */
.genre-leiste .genre-knopf,.genre-leiste .werkstatt-knopf{position:relative}
.zu-flaeche{display:none;position:absolute;inset:0;z-index:2;cursor:pointer}
#genremenue:checked ~ .huelle .genre-knopf > .zu-flaeche,
#werkstattmenue:checked ~ .huelle .werkstatt-knopf > .zu-flaeche{display:block}

/* ================= Dunkelmodus (Owner 17.09.) =================
   "dunkel ist umgekehrt, dunkelblau mit weisser Schrift": der Grund wird
   Marken-Dunkelblau, die Schrift weiss. Umgeschaltet wird ueber das Merkmal
   data-thema am <html>; die Wahl merkt sich der Browser des Besuchers. */
:root[data-thema="dunkel"]{
  --papier:#071A30;        /* Seitengrund */
  --karte:#0F2340;         /* Karten, Tabellen, Kopf */
  --linie:#26456E;
  --text:#F3F7FD;
  --text-leise:#AFC2DA;
  /* --navy bleibt die MARKENFARBE (dunkelblaue Flaechen: App-Knopf, Balken,
     Produktknoepfe). Sie hier auf Weiss zu setzen hat die Knoepfe weiss und
     damit unlesbar gemacht (Owner-Befund 17.09.). Schriften, die im hellen
     Stand navy sind, werden weiter unten einzeln aufgehellt. */
  --navy-weich:#D7E4F5;
  --orange-weich:#2A1F0C;
  --logo-blau:#7FB2EE;     /* Preis bleibt blau, aber hell genug auf Dunkelblau */
  --logo-blau-tief:#CFE0F7;
  --logo-blau-hell:#122B4C;
  --logo-blau-linie:#2C5488;
  --schatten:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.30);
}
/* Flaechen, die im hellen Stand fest hinterlegt sind */
:root[data-thema="dunkel"] .vaesna-spec tr:nth-child(even) td,
:root[data-thema="dunkel"] .spec tr:nth-child(even) td,
:root[data-thema="dunkel"] .vaesna-spec tr.ware:nth-child(even){background:#102944}
:root[data-thema="dunkel"] .kopf,
:root[data-thema="dunkel"] .genre-leiste{background:var(--karte);border-color:var(--linie)}
:root[data-thema="dunkel"] .knopf-still,
:root[data-thema="dunkel"] .genre-leiste .home-knopf,
:root[data-thema="dunkel"] .genre-leiste .werkstatt-knopf,
:root[data-thema="dunkel"] .genre-knopf,
:root[data-thema="dunkel"] .menge-feld,
:root[data-thema="dunkel"] .genre-leiste a{background:#12294A;color:var(--text);border-color:var(--linie)}
:root[data-thema="dunkel"] .genre-leiste .current-menu-item > a,
:root[data-thema="dunkel"] .genre-leiste a.aktiv{background:#1D3E6B;border-color:#3C6AA8;color:#fff}
:root[data-thema="dunkel"] .sub-menu{background:#12294A;border-color:var(--linie)}
:root[data-thema="dunkel"] .blattmarke{background:#12314F;border-color:#2C5488;color:#9CC4F2}
:root[data-thema="dunkel"] .add-knopf{background:#2C5FA0}
:root[data-thema="dunkel"] .add-knopf:hover{background:var(--orange)}
:root[data-thema="dunkel"] .produkt-knopf{background:#16355C;border-color:#2C5488}
:root[data-thema="dunkel"] .karte,
:root[data-thema="dunkel"] .bald,
:root[data-thema="dunkel"] .vaesna-spec,
:root[data-thema="dunkel"] .kontaktband{background:var(--karte);border-color:var(--linie)}
/* Produktfotos sind auf weissem Grund freigestellt - heller Kasten haelt sie lesbar */
:root[data-thema="dunkel"] .bildzelle img{background:#F4F7FB;border-radius:6px}
:root[data-thema="dunkel"] .vaesna-sets .karte img,
:root[data-thema="dunkel"] .vaesna-hero img{background:#F4F7FB}

/* Der Umschaltknopf in der oberen Leiste */
.thema-knopf{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  padding:5px 12px;color:#fff;font:inherit;font-size:13px;font-weight:700;line-height:1}
.thema-knopf:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.thema-knopf svg{width:15px;height:15px;flex:none}
.thema-knopf .mond{display:inline}
.thema-knopf .sonne{display:none}
:root[data-thema="dunkel"] .thema-knopf .mond{display:none}
:root[data-thema="dunkel"] .thema-knopf .sonne{display:inline}
/* Owner 17.09.: der Knopf soll auch am Telefon zu erkennen sein - Wort bleibt. */
@media(max-width:700px){ .thema-knopf{padding:5px 10px;font-size:12px} }

/* Schrift, die im hellen Stand dunkelblau ist, wird im Dunkelmodus hell. */
:root[data-thema="dunkel"] h1,
:root[data-thema="dunkel"] h2,
:root[data-thema="dunkel"] h3,
:root[data-thema="dunkel"] h4,
:root[data-thema="dunkel"] a,
:root[data-thema="dunkel"] .kopf .marke,
:root[data-thema="dunkel"] .kopf nav a,
:root[data-thema="dunkel"] .bald .gross,
:root[data-thema="dunkel"] .setkopf .sku,
:root[data-thema="dunkel"] .korb-zahltext .korb-summe-wert,
:root[data-thema="dunkel"] .karte h3 a{color:var(--text)}
:root[data-thema="dunkel"] .setkopf .speicher{color:#CFE0F7}
/* dunkle Marken-Knoepfe behalten ihre Flaeche und weisse Schrift */
:root[data-thema="dunkel"] .knopf-app,
:root[data-thema="dunkel"] .kontaktband .knopf-app,
:root[data-thema="dunkel"] .knopf-navy{background:#16355C;color:#fff;border-color:#2C5488}
:root[data-thema="dunkel"] .knopf-still{background:#12294A;color:var(--text);border-color:var(--linie)}
:root[data-thema="dunkel"] .produkt-knopf{color:#fff}

/* Im Dunkelmodus hoben sich Zurueck-Pfeil, Sprachknopf und Dunkel-Knopf kaum
   von der Leiste ab (Owner 17.09.) - sie bekommen eine eigene, hellere Flaeche. */
:root[data-thema="dunkel"] .kontaktleiste{background:#0C2647;border-bottom:1px solid #24466F}
:root[data-thema="dunkel"] .kontaktleiste .pfeil,
:root[data-thema="dunkel"] .kontaktleiste .sprachwechsel,
:root[data-thema="dunkel"] .thema-knopf{
  background:#1D3E6B;border:1px solid #5C8FCB;color:#fff;opacity:1}
:root[data-thema="dunkel"] .kontaktleiste .pfeil:hover,
:root[data-thema="dunkel"] .kontaktleiste .sprachwechsel:hover,
:root[data-thema="dunkel"] .thema-knopf:hover{background:#2A5590;border-color:#8FB8E8;color:#fff}

/* Owner 17.09.: im Dunkelmodus standen die vier Produkte im Untermenue
   dunkelblau auf dunkelblau - also unsichtbar. Sie bekommen eine eigene,
   hellere Flaeche mit weisser Schrift; dasselbe gilt fuer die anderen
   Stellen, die im hellen Stand die zarte Orangeflaeche benutzen. */
:root[data-thema="dunkel"] .genre-leiste .sub-menu li.produkt > a,
:root[data-thema="dunkel"] .genre-leiste .sub-menu a:hover,
:root[data-thema="dunkel"] .kopf nav a:hover,
:root[data-thema="dunkel"] .kopf nav .current-menu-item > a,
:root[data-thema="dunkel"] .karte.hervor{
  background:#1D3E6B;color:#fff;border-color:#3C6AA8}
:root[data-thema="dunkel"] .karte.hervor h3,
:root[data-thema="dunkel"] .karte.hervor h3 a{color:#fff}
:root[data-thema="dunkel"] .genre-schalter:checked ~ .huelle .genre-knopf{
  background:#1D3E6B;color:#fff;border-color:#5C8FCB}
.korb-gueltig{display:block;font-size:12px;margin-top:2px}

/* ---- Telegram-Kanalwahl (Version B, 18.09.) - alles unter .tgk, nichts Globales ---- */
.tgk{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.tgk[hidden]{display:none}
.tgk-grund{position:absolute;inset:0;background:rgba(10,35,64,.55)}
.tgk-fenster{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;
  background:#fff;color:var(--navy,#0A2340);border-radius:14px;padding:18px 18px 12px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.tgk-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.tgk-kopf b{display:flex;align-items:center;gap:8px;font-size:19px}
.tgk-kopf b svg{width:22px;height:22px;color:#229ED9}
.tgk-zu{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:inherit;padding:4px 8px}
.tgk-korb{margin:0 0 8px;font-size:13px}
.tgk-liste{list-style:none;margin:0;padding:0}
.tgk-kanal{border-top:1px solid #C4CFDB;padding:12px 0}
.tgk-name{font-weight:700;font-size:16px}
.tgk-sprachen{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.tgk-sprachen span{font-size:12px;padding:2px 8px;border-radius:999px;background:#FEF4E4;color:#0A2340}
.tgk-nummer{font-size:15px;margin-bottom:8px;letter-spacing:.02em}
.tgk-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.tgk-knoepfe .knopf{flex:1 1 140px;justify-content:center}
.tgk-knoepfe .knopf svg{width:18px;height:18px}
html.tgk-offen{overflow:hidden}
:root[data-thema="dunkel"] .tgk-fenster{background:#0F2B4D;color:#fff}
:root[data-thema="dunkel"] .tgk-kanal{border-top-color:#2A4A72}
:root[data-thema="dunkel"] .tgk-sprachen span{background:#1D3E6B;color:#fff}
.tgk-sym-tg,.tgk-sym-tel{display:inline-flex}
.tgk-sym-tel{display:none}
.tgk.tgk-anruf .tgk-sym-tg{display:none}
.tgk.tgk-anruf .tgk-sym-tel{display:inline-flex}
.tgk.tgk-anruf .tgk-kopf b svg{color:#F09000}