/* ============================================================
   SieglerCars.ch — Uebergangsauftritt
   Palette und Regeln: CI_Entwurf.md (11.08.2026)
   GRUNDREGEL: Gelb ist eine Flaeche, keine Schrift.
   ============================================================ */

@font-face{font-family:"Inter";src:url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Slab";src:url("/assets/fonts/roboto-slab-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Slab";src:url("/assets/fonts/roboto-slab-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --navy:#1C2045;
  --navy-hell:#2A3050;
  --gelb:#FCC403;
  --gold-dunkel:#8F6A00;
  --weiss:#FFFFFF;
  --warmweiss:#F6F4EF;
  --hellblau:#C9CEE0;
  --linie:rgba(28,32,69,.14);
  --linie-hell:rgba(255,255,255,.18);

  --titel:"Roboto Slab",Georgia,serif;
  --text:"Inter",system-ui,-apple-system,sans-serif;

  --breite:1180px;
  --rand:clamp(1.15rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--weiss);color:var(--navy);
  font-family:var(--text);font-weight:400;
  font-size:clamp(1rem,.97rem + .16vw,1.09rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}

.wrap{max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
section{padding-block:clamp(3.5rem,7vw,6rem)}
.hell{background:var(--warmweiss)}
.dunkel{background:var(--navy);color:var(--weiss)}
.dunkel p{color:var(--hellblau)}

h1,h2,h3,h4{font-family:var(--titel);font-weight:600;margin:0;line-height:1.12}
h1,h2{text-transform:uppercase;letter-spacing:.005em}
h1{font-size:clamp(2.1rem,5.4vw,3.9rem);line-height:1.04}
h2{font-size:clamp(1.75rem,3.7vw,2.7rem)}
h3{font-size:1.28rem}
h4{font-size:1.05rem}

.augenbraue{
  font-family:var(--text);font-weight:700;font-size:1rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-dunkel);margin:0 0 .85rem;
}
.dunkel .augenbraue{color:var(--gelb)}
.kopf{max-width:60ch;margin-bottom:clamp(1.9rem,3.5vw,2.9rem)}
.kopf p{font-size:1.09rem;margin:.85rem 0 0}
.lead{font-size:1.12rem;max-width:52ch}

/* Sprungmarke ------------------------------------------------ */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gelb);
  color:var(--navy);padding:.8rem 1.3rem;font-weight:700}
.skip:focus{left:0}

/* Schaltflaechen --------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--text);font-weight:700;font-size:1rem;line-height:1;
  padding:1.05rem 1.7rem;border:2px solid transparent;border-radius:.3rem;
  text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.btn-haupt{background:var(--gelb);color:var(--navy)}          /* 9,71:1 */
.btn-haupt:hover{background:#ffd436}
.btn-neben{background:var(--navy);color:var(--weiss)}
.btn-neben:hover{background:var(--navy-hell)}
.btn-rand{border-color:currentColor}
.dunkel .btn-rand{color:var(--weiss)}
.btn-rand:hover{background:var(--weiss);color:var(--navy);border-color:var(--weiss)}

/* Kopfzeile --------------------------------------------------- */
.top{position:sticky;top:0;z-index:100;background:var(--weiss);
  border-bottom:1px solid var(--linie)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem;min-height:80px}
.marke img{width:190px}
.nav{display:flex;align-items:center;gap:1.55rem}
.nav a{font-weight:700;font-size:1rem;text-decoration:none;color:var(--navy);
  padding:.3rem 0;border-bottom:3px solid transparent;transition:border-color .15s}
.nav a:hover{border-bottom-color:var(--gelb)}
.tel{background:var(--gelb);color:var(--navy);font-weight:700;font-size:1rem;
  text-decoration:none;padding:.75rem 1.15rem;border-radius:.3rem;white-space:nowrap}
.burger{display:none;background:none;border:2px solid var(--navy);color:var(--navy);
  font:700 1rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;
  padding:.8rem .9rem;border-radius:.3rem;cursor:pointer;min-height:44px}  /* 44 px ist die empfohlene Untergrenze fuer Fingerziele; vorher waren es 41 */
@media (max-width:1000px){
  .nav{display:none;position:absolute;inset:80px 0 auto;background:var(--weiss);
    border-bottom:1px solid var(--linie);flex-direction:column;align-items:stretch;
    gap:0;padding:.4rem var(--rand) 1.2rem}
  .nav[data-offen="true"]{display:flex}
  .nav a{padding:.9rem 0;border-bottom:1px solid var(--linie)}
  .burger{display:block}
  .marke img{width:158px}
}
@media (max-width:560px){.tel{display:none}}

/* Startbild --------------------------------------------------- */
.hero{position:relative;background:var(--navy);color:var(--weiss);overflow:hidden;
  padding-block:clamp(3.2rem,7vw,5.6rem)}
.hero::before{
  content:"";position:absolute;inset:0;
  /* Rechts bewusst heller: dort stehen die Wohnmobile, sie sind der Beleg
     fuer die Hallengroesse und sollen sichtbar bleiben. */
  background:linear-gradient(100deg,rgba(28,32,69,.96) 0%,rgba(28,32,69,.90) 34%,
                             rgba(28,32,69,.55) 68%,rgba(28,32,69,.28) 100%),
             url("/assets/bilder/werkstatt-halle.webp") center/cover;
}
@media (max-width:880px){
  /* Schmal wird NICHT ueberlagert: Text auf Marineblau, Foto darunter in
     voller Helligkeit. Ein Schleier, der die Schrift lesbar macht, wuerde
     genau das Bild unkenntlich machen, das die Aussage belegt. */
  .hero::before{background:var(--navy)}
}

/* Belegfoto im Startbild — nur auf schmalen Bildschirmen */
.hero-bild{display:none}
@media (max-width:880px){
  .hero-bild{
    display:block;margin:1.9rem calc(var(--rand) * -1) 0;
  }
  .hero-bild img{width:100%;aspect-ratio:16/9;object-fit:cover}
  .hero-bild figcaption{
    font-size:1rem;color:var(--hellblau);
    margin:.7rem var(--rand) 0;
  }
}
.hero>*{position:relative}
.hero h1{margin-bottom:1.15rem;font-size:clamp(1.85rem,4.4vw,3.15rem)}
.hero h1 em{font-style:normal;color:var(--gelb);display:block}
.hero .lead{color:var(--hellblau);font-size:1.16rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

.fakten{display:flex;flex-wrap:wrap;gap:.55rem 1.9rem;margin-top:clamp(2.2rem,5vw,3.2rem);
  padding-top:1.2rem;border-top:1px solid var(--linie-hell);
  font-weight:700;font-size:1rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--hellblau)}
.fakten span::before{content:"› ";color:var(--gelb)}

/* Fahrzeugweiche ---------------------------------------------- */
.weiche{display:grid;gap:1.35rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.weiche a{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:290px;padding:1.7rem;text-decoration:none;color:var(--weiss);
  border-radius:.4rem;overflow:hidden;background:var(--navy);
  transition:transform .18s;
}
.weiche a:hover{transform:translateY(-4px)}
.weiche a::before{content:"";position:absolute;inset:0;
  background-size:cover;background-position:center;opacity:.82;transition:opacity .18s}
.weiche a:hover::before{opacity:1}
/* Nur unten abdunkeln, wo die Schrift steht — oben bleibt das Bild frei. */
.weiche a::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(28,32,69,.94) 0%,rgba(28,32,69,.72) 38%,
             rgba(28,32,69,.18) 78%,rgba(28,32,69,.05) 100%)}
.weiche a>*{position:relative;z-index:1}
.weiche .w-camp::before{background-image:url("/assets/bilder/reisemobile.webp")}
.weiche .w-auto::before{background-image:url("/assets/bilder/occasionen.webp")}
.weiche h2,.weiche h3{font-size:1.55rem;text-transform:uppercase;letter-spacing:.005em}
.weiche p{margin:.45rem 0 0;color:var(--hellblau);font-size:1rem}
.weiche .pfeil{margin-top:1rem;font-weight:700;color:var(--gelb);font-size:1rem}

/* Saisonband -------------------------------------------------- */
.saison{background:var(--gelb);color:var(--navy)}
.saison .augenbraue{color:var(--navy)}
.saison-grid{display:grid;gap:clamp(1.8rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
@media (max-width:860px){.saison-grid{grid-template-columns:1fr}}
.saison ul{list-style:none;margin:1.2rem 0 0;padding:0;
  display:grid;gap:.5rem .6rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.saison li{padding-left:1.5rem;position:relative;font-size:1rem}
.saison li::before{content:"✓";position:absolute;left:0;font-weight:700}
.saison-preis{background:var(--navy);color:var(--weiss);border-radius:.4rem;
  padding:1.6rem 1.5rem;text-align:center}
.saison-preis .zahl{font-family:var(--titel);font-weight:700;
  font-size:clamp(2.2rem,5vw,3rem);line-height:1;display:block;margin:.4rem 0}
.saison-preis small{color:var(--hellblau);display:block;font-size:1rem;line-height:1.45}
.saison-preis .btn{margin-top:1.2rem;width:100%;justify-content:center}

/* Gruende ----------------------------------------------------- */
.gruende{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grund{border-top:5px solid var(--gelb);padding-top:1.3rem}
.grund h3{margin-bottom:.5rem}
.grund p{margin:0;font-size:1rem}
.dunkel .grund p{color:var(--hellblau)}

/* Angebote ---------------------------------------------------- */
.angebote{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.angebot{background:var(--weiss);border:1px solid var(--linie);border-radius:.4rem;
  scroll-margin-top:96px;
  padding:1.6rem;display:flex;flex-direction:column;gap:.7rem}
.hell .angebot{background:var(--weiss)}
.angebot h3{font-size:1.18rem}
.angebot p{margin:0;font-size:1rem;color:#414968}
.angebot ul{margin:0;padding-left:1.15rem;font-size:1rem;color:#414968;
  display:grid;gap:.22rem}
.preis{display:inline-block;background:var(--gelb);color:var(--navy);
  font-family:var(--titel);font-weight:700;font-size:1.5rem;line-height:1;
  padding:.5rem .8rem;border-radius:.3rem;align-self:flex-start}
.preis small{font-family:var(--text);font-weight:700;font-size:1rem;
  display:block;margin-top:.3rem;letter-spacing:.04em}
.offen{background:repeating-linear-gradient(45deg,#EDEAE2 0 8px,#F6F4EF 8px 16px);
  color:var(--gold-dunkel);border:2px dashed var(--gold-dunkel)}
.dauer{font-size:1rem;color:#5A6180;margin-top:auto;padding-top:.5rem}
.angebot .btn{align-self:flex-start;padding:.75rem 1.15rem;font-size:1rem}

/* Leistungen -------------------------------------------------- */
.leistungen{display:grid;gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.lgruppe h3{padding-bottom:.7rem;border-bottom:3px solid var(--gelb);margin-bottom:1rem}
.lgruppe ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.lgruppe li{font-size:1rem;padding-left:1.15rem;position:relative}
.lgruppe li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;background:var(--gelb);border-radius:50%}
.lgruppe .hinweis{font-size:1rem;color:#5A6180;margin:.8rem 0 0}

/* Fahrzeuge --------------------------------------------------- */
.fzg{display:grid;gap:1.35rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.fzg-karte{border:1px solid var(--linie);border-radius:.4rem;overflow:hidden;
  background:var(--weiss);display:flex;flex-direction:column}
.fzg-karte img{aspect-ratio:16/9;object-fit:cover;width:100%}
.fzg-karte .inhalt{padding:1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.fzg-karte h2{font-size:1.28rem;text-transform:none;letter-spacing:0}
.fzg-karte p{margin:0;font-size:1rem;color:#414968}
.fzg-karte .btn{align-self:flex-start;margin-top:auto}

/* Betrieb ----------------------------------------------------- */
.betrieb{display:grid;gap:clamp(1.8rem,4vw,3.4rem);
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center}
@media (max-width:820px){.betrieb{grid-template-columns:1fr}}
.betrieb img{border-radius:.4rem;aspect-ratio:1;object-fit:cover;width:100%}
.partner{display:flex;align-items:center;gap:1.2rem;margin-top:1.6rem;
  padding-top:1.3rem;border-top:1px solid var(--linie)}
.partner img{width:64px;border-radius:0}
.partner p{margin:0;font-size:1rem;color:#414968}

/* Kontakt ----------------------------------------------------- */
.kontakt-grid{display:grid;gap:clamp(1.8rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
@media (max-width:900px){.kontakt-grid{grid-template-columns:1fr}}

form{display:grid;gap:1rem}
.feld{display:grid;gap:.35rem}
.reihe{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media (max-width:560px){.reihe{grid-template-columns:1fr}}
label{font-weight:700;font-size:1rem}
input,select,textarea{
  font-family:var(--text);font-size:1rem;color:var(--navy);background:var(--weiss);
  border:2px solid #C6C9D6;border-radius:.3rem;padding:.8rem .9rem;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--navy);outline:none}
textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px}
form .btn{justify-content:center;margin-top:.3rem}
.formhinweis{font-size:1rem;color:#5A6180;margin:0}

.zeiten{width:100%;border-collapse:collapse;font-size:1rem}
.zeiten th,.zeiten td{text-align:left;padding:.62rem 0;
  border-bottom:1px solid var(--linie);vertical-align:top}
.zeiten th{font-weight:700;width:46%}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:none}
.zu{color:#5A6180}
.adresse{font-style:normal;margin:1.5rem 0 0;line-height:1.65}
.adresse a{font-weight:700}

/* Fusszeile --------------------------------------------------- */
.foot{background:var(--navy);color:var(--hellblau);
  padding-block:3rem 1.8rem;font-size:1rem}
.foot img.logo{width:180px;margin-bottom:1.1rem}
.foot-grid{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}
.foot h3{font-family:var(--text);font-weight:700;font-size:1rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--weiss);margin:0 0 .9rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
/* Die Regel darueber setzt display:grid und stellte damit auch die
   Symbolleiste untereinander. Hier zurueck auf nebeneinander, dazu mehr
   Luft zur Mailadresse darueber. */
.foot ul.sozial{display:flex;gap:.7rem;margin-top:1.9rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--weiss);text-decoration:underline;text-underline-offset:3px}
.foot-bar{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--linie-hell);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  font-size:1rem}


/* Unterseiten ------------------------------------------------- */
.seitenkopf{background:var(--navy);color:var(--weiss);
  padding-block:clamp(2.6rem,5.5vw,4.2rem)}
.seitenkopf .augenbraue{color:var(--gelb)}
.seitenkopf h1{font-size:clamp(1.9rem,4.6vw,3.2rem);margin-bottom:1rem}
.seitenkopf .lead{color:var(--hellblau);max-width:58ch}
.krume{font-size:1rem;color:var(--hellblau);margin:0 0 1.1rem}
.krume a{text-decoration:none;font-weight:700}
.krume a:hover{text-decoration:underline;text-underline-offset:3px}

.klassen{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.klasse{border:1px solid var(--linie);border-radius:.4rem;padding:1.5rem;background:var(--weiss)}
.klasse .kg{display:inline-block;background:var(--navy);color:var(--weiss);
  font-family:var(--titel);font-weight:700;font-size:1.15rem;
  padding:.4rem .75rem;border-radius:.3rem;margin-bottom:.9rem}
.klasse p{margin:0;font-size:1rem;color:#414968}
.klasse .stark{color:var(--navy);font-weight:700;margin-top:.6rem}

.schritte{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1.1rem}
.schritte li{counter-increment:s;padding-left:3.2rem;position:relative}
.schritte li::before{content:counter(s);position:absolute;left:0;top:-.1rem;
  width:2.3rem;height:2.3rem;display:grid;place-items:center;
  background:var(--gelb);color:var(--navy);border-radius:50%;
  font-family:var(--titel);font-weight:700;font-size:1.05rem}
.schritte h3{font-size:1.05rem;margin-bottom:.15rem}
.schritte p{margin:0;font-size:1rem;color:#414968}

.merk{border-left:5px solid var(--gelb);background:var(--warmweiss);
  padding:1.3rem 1.5rem;border-radius:0 .3rem .3rem 0}
.merk p:last-child{margin-bottom:0}
.merk strong{color:var(--navy)}

.tab{width:100%;border-collapse:collapse;font-size:1rem}
.tab th,.tab td{text-align:left;padding:.85rem .8rem;border-bottom:1px solid var(--linie);
  vertical-align:top}
.tab thead th{background:var(--navy);color:var(--weiss);font-weight:700;
  font-family:var(--text);font-size:1rem}
.tab tbody th{font-weight:700;width:28%}
.tabhuelle{overflow-x:auto}

.rechtstext{max-width:70ch}
.rechtstext h2{margin-top:2.4rem;font-size:clamp(1.3rem,2.4vw,1.7rem)}
.rechtstext h3{margin-top:1.6rem}
.rechtstext p,.rechtstext ul{margin:.7rem 0 0}
.rechtstext ul{padding-left:1.2rem}
.rechtstext li{margin-top:.3rem}

/* Team -------------------------------------------------------- */
.team{display:grid;gap:1.35rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.person{background:var(--weiss);border:1px solid var(--linie);border-radius:.4rem;
  overflow:hidden;display:flex;flex-direction:column}
.person img{aspect-ratio:1;object-fit:cover;width:100%}
.person .platz{aspect-ratio:1;display:grid;place-items:center;background:var(--navy);
  color:var(--gelb);font-family:var(--titel);font-weight:700;font-size:3.2rem}
.person .platz.leer{background:var(--warmweiss);color:#A9AEC2;font-size:2.2rem;
  border-bottom:1px solid var(--linie)}
.person .txt{padding:1.15rem 1.2rem}
.person h3{font-size:1.12rem;margin-bottom:.2rem}
.person .rolle{margin:0;font-size:1rem;color:#414968}
.person .rolle.fehlt{color:#8F6A00;font-style:italic}

/* Werkstattdaten ---------------------------------------------- */
.daten{display:grid;gap:1px;background:var(--linie);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  border:1px solid var(--linie);border-radius:.4rem;overflow:hidden}
.datum{background:var(--weiss);padding:1.5rem 1.4rem}
.datum .zahl{display:block;font-family:var(--titel);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.5rem);line-height:1;color:var(--navy);margin-bottom:.45rem}
.datum .was{margin:0;font-size:1rem;color:#414968}
.dunkel .daten{border-color:var(--linie-hell);background:var(--linie-hell)}
.dunkel .datum{background:var(--navy-hell)}
.dunkel .datum .zahl{color:var(--gelb)}
.dunkel .datum .was{color:var(--hellblau)}

/* Belegbild -------------------------------------------------- */
.beleg{margin:0;border-radius:.4rem;overflow:hidden}
.beleg img{width:100%;aspect-ratio:16/10;object-fit:cover}
.beleg figcaption{font-size:1rem;color:#414968;margin-top:.7rem}
.dunkel .beleg figcaption{color:var(--hellblau)}

/* Preisstaffel in einer Angebotskarte ------------------------- */
.preisliste{display:grid;gap:0;margin:.2rem 0 0}
.preisliste div{display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;border-bottom:1px solid var(--linie);font-size:1rem}
.preisliste div:last-child{border-bottom:none}
.preisliste span{color:#414968}
.preisliste b{white-space:nowrap;font-weight:700}

/* Vorbehalt unter der Preisplakette ---------------------------- */
.preishinweis{margin:-.25rem 0 0;font-size:1rem;color:#5A6180}

/* Produktbild in der Angebotsspalte ---------------------------- */
.produkt{margin:2.2rem 0 0;text-align:center}
.produkt img{max-width:min(100%,440px);margin-inline:auto}
.produkt figcaption{font-size:1rem;color:#5A6180;margin-top:.7rem}
.saison .produkt figcaption{color:var(--navy)}


/* Produktgalerie ---------------------------------------------- */
.galerie{margin:2.2rem 0 0;text-align:center}
.galerie-lupe{
  display:block;margin-inline:auto;padding:0;border:0;background:none;
  cursor:zoom-in;line-height:0;max-width:min(100%,420px);
}
.galerie-gross{width:100%;height:auto;transition:opacity .12s}
.galerie-leiste{display:flex;flex-wrap:wrap;gap:.5rem;
  justify-content:center;margin-top:1rem}
.galerie-leiste button{
  padding:0;line-height:0;cursor:pointer;background:var(--weiss);
  border:2px solid var(--linie);border-radius:.3rem;transition:border-color .15s;
}
.galerie-leiste button:hover{border-color:var(--navy)}
.galerie-leiste button[aria-current]{border-color:var(--gelb);border-width:3px}
.galerie-leiste img{width:60px;height:60px;object-fit:contain}
.galerie figcaption{font-size:1rem;color:#5A6180;margin-top:.9rem}

/* Vergrösserung ----------------------------------------------- */
.lupe{
  position:fixed;inset:0;z-index:300;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.1rem,2.4vw,1.8rem);
  background:rgba(28,32,69,.94);padding:clamp(1rem,4vw,3rem);
}
.lupe[hidden]{display:none}
.lupe img{max-width:min(100%,1100px);max-height:76vh;width:auto;height:auto}
.lupe-zu{
  position:absolute;top:clamp(.6rem,2vw,1.4rem);right:clamp(.6rem,2vw,1.4rem);
  width:3rem;height:3rem;border-radius:50%;cursor:pointer;
  background:var(--gelb);color:var(--navy);border:0;
  font:700 1.6rem/1 var(--text);
}
.lupe-zu:hover{background:#ffd436}
.lupe figcaption{
  color:var(--hellblau);font-size:1rem;text-align:center;
  max-width:62ch;padding-inline:1rem;
}
.lupe-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:3.2rem;height:3.2rem;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.15);color:var(--weiss);
  font:700 2.1rem/1 var(--text);display:grid;place-items:center;
  transition:background .15s,color .15s;
}
.lupe-nav:hover,.lupe-nav:focus-visible{background:var(--gelb);color:var(--navy)}
.lupe-nav[hidden]{display:none}
.lupe-zurueck{left:clamp(.5rem,2vw,1.6rem)}
.lupe-vor{right:clamp(.5rem,2vw,1.6rem)}

/* Produktseiten: eine Spalte ---------------------------------- */
.produktkopf .text{max-width:64ch}
.produktkopf .galerie{margin-top:clamp(2.2rem,4vw,3rem)}
.produktkopf .galerie-lupe{max-width:min(100%,560px)}

.preisband{
  margin-top:clamp(2.2rem,4vw,3rem);
  background:var(--navy);color:var(--weiss);border-radius:.4rem;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2.2rem);
  display:flex;flex-wrap:wrap;gap:1.2rem 2.5rem;
  align-items:center;justify-content:space-between;
}
.preisband .zahl{
  display:block;margin:.35rem 0;line-height:1;
  font-family:var(--titel);font-weight:700;
  font-size:clamp(2.1rem,4.6vw,2.9rem);
}
.preisband small{display:block;color:var(--hellblau);font-size:1rem}
.preisband .btn{flex:0 0 auto}
@media (max-width:620px){
  .preisband{flex-direction:column;align-items:stretch;text-align:center}
  .preisband .btn{justify-content:center}
}

/* ============================================================
   DETAILSEITEN — schmales Layout, NUR fuer den Inhaltsbereich.
   Aktiv ueber <body class="schmal"> auf den fuenf Detailseiten.
   Kopfzeile, Fusszeile UND der Kontaktabschnitt bleiben in
   Originalgroesse: alle Regeln haengen an `main` und nehmen
   `#kontakt` ausdruecklich aus.
   ============================================================ */

/* 1. Inhaltsspalte 820 px statt 1180 px */
body.schmal main section:not(#kontakt) .wrap{max-width:820px}
body.schmal main section:not(#kontakt) .kopf,
body.schmal main section:not(#kontakt) .produktkopf .text,
body.schmal main section:not(#kontakt) .lead,
body.schmal main section:not(#kontakt) .rechtstext{max-width:none}

/* 2. Ruhigere Zwischenueberschriften: keine Versalien */
body.schmal main section:not(#kontakt) h2{
  text-transform:none;letter-spacing:0;
  font-size:clamp(1.55rem,3vw,1.9rem);
}
body.schmal main .seitenkopf h1{font-size:clamp(1.85rem,4.2vw,2.6rem)}

/* 3. Engerer Rhythmus, mehr Luft im Seitenkopf */
body.schmal main section:not(#kontakt){padding-block:clamp(2.5rem,5vw,4rem)}
body.schmal main .seitenkopf{padding-block:clamp(2.8rem,6vw,4.4rem)}

/* 4. Karten untereinander statt gedraengt nebeneinander */
body.schmal main section:not(#kontakt) .angebote,
body.schmal main section:not(#kontakt) .fzg,
body.schmal main section:not(#kontakt) .gruende{grid-template-columns:1fr}

/* Profile und Teilen ------------------------------------------ */
.sozial{display:flex;gap:.6rem;list-style:none;margin:1.15rem 0 0;padding:0}
.sozial a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:2px solid currentColor;border-radius:.4rem;
  color:inherit;transition:background .15s,color .15s,border-color .15s}
.sozial a:hover,.sozial a:focus-visible{background:var(--gelb);color:var(--navy);
  border-color:var(--gelb)}


/* Teilen erscheint NUR auf Geraeten mit eigenem Teilen-Menue — also Handys und
   Tablets. Am Computer bliebe nur der Umweg ueber die Zwischenablage, den
   manche Browser verweigern; dann stuende der Besucher vor einer Fehlermeldung
   statt vor einem Weg. Darum hier ausgeblendet; das Skript schaltet die Knoepfe
   frei (data-teilbar), sobald navigator.share vorhanden ist. Ohne JavaScript
   bleiben sie unsichtbar — richtig so, ohne JavaScript koennten sie nichts. */
.teilen{display:none;align-items:center;gap:.45rem;align-self:flex-start;
  background:none;border:0;padding:.25rem 0;cursor:pointer;
  font:700 1rem/1.25 var(--text);color:var(--navy);
  text-decoration:underline;text-decoration-color:var(--hellblau);
  text-underline-offset:.22em;text-decoration-thickness:2px}
.teilen[data-teilbar]{display:inline-flex}
.teilen:hover,.teilen:focus-visible{text-decoration-color:var(--gelb)}
.teilen svg{flex:none}
.teilen-seite{margin-top:1.5rem}

/* Preistabellen: Modell und Nummer links, Preis rechts aussen -------------- */
.tab-preise th,.tab-preise td{padding:.95rem 1rem;vertical-align:baseline}
.tab-preise tbody th{width:100%;padding-right:1.8rem}
.tab-preise .nr{width:1%;white-space:nowrap;color:#5A6180;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tab-preise .pr,.tab-preise thead th:last-child{text-align:right}
.tab-preise .pr{width:1%;white-space:nowrap;font-weight:700;
  font-variant-numeric:tabular-nums;padding-left:1.6rem}
.passt{display:block;font-weight:400;color:#5A6180;margin-top:.2rem}
.tabhuelle + .preishinweis{margin-top:1.3rem}

@media (max-width:620px){
  /* Handy: jede Zeile ein Block — Modell oben, darunter Nummer links
     und Preis rechts. Kein seitliches Scrollen mehr. */
  .tab-preise thead{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;
    position:absolute;width:1px}
  .tab-preise tr{display:flex;flex-wrap:wrap;align-items:baseline;
    gap:.2rem 1rem;padding:.95rem 0;border-bottom:1px solid var(--linie)}
  .tab-preise tbody tr:last-child{border-bottom:0}
  .tab-preise th,.tab-preise td{display:block;border:0;padding:0;width:auto}
  .tab-preise tbody th{flex:1 0 100%;white-space:normal}
  .passt{margin-top:.15rem}
  .tab-preise .nr::before{content:"Nr. "}
  .tab-preise .pr{margin-left:auto;width:auto}
}