/* ============================================================
   BULLSCORE SHOP – gemeinsames Theme
   Farbwelt, Hintergrund und Navigation identisch mit shop.html,
   damit der Shop durchgehend gleich aussieht.
   ============================================================ */
:root{
  /* Vier Helligkeitsstufen, bewusst weit auseinander. Vorher lagen sie
     so eng beieinander, dass eine Karte auf dem Hintergrund kaum zu
     sehen war und alles wie eine Flaeche wirkte. Die Reihenfolge ist
     die Tiefe: bg liegt hinten, surface-2 vorne. */
  --bg:#080d0b;            /* near-black mit Grünstich, kein reines Schwarz */
  --bg-2:#111a16;
  --surface:#1b2620;
  --surface-2:#2a3830;
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.22);
  --fg:#f2f6f3;
  --fg-soft:#a6b2ac;
  --fg-dim:#75837c;

  /* Akzente. Zwei Rollen, bewusst getrennt:
     --red / --green      = Füllfarbe. Darauf steht weiße Schrift.
     --red-fg/--green-fg  = dieselbe Farbe als Text, Icon oder Rahmen AUF dem
                            Hintergrund. Muss in der hellen Ansicht aufhellen,
                            sonst verschwindet sie in der Fläche.
     --red-tint/--green-tint = zarte Hinterlegung. */
  --red:#d92332;
  --red-hi:#f0384a;
  --red-fg:#f04455;      /* als Schrift/Rahmen heller als die Fuellfarbe */
  --red-tint:rgba(240,68,85,.16);
  --green:#2f7d5c;
  --green-fg:#57c393;
  --green-tint:rgba(87,195,147,.16);

  /* Tiefe Flächen: Bildkästen, Hero-Verlauf, abgesetzte Bänder.
     Standen vorher als feste Grüntöne in den Seiten und blieben
     deshalb in der hellen Ansicht dunkel stehen. */
  --tief-1:#2e3b33;        /* Bildfläche innen  */
  --tief-2:#131c18;        /* Bildfläche außen  */
  --band-1:#141f19;        /* Schlussband links  */
  --band-2:#26352d;        /* Schlussband rechts */
  --glas:rgba(16,23,19,.86);      /* Glaskarten im Hero */
  --glas-hover:rgba(22,30,26,.94);
  --schatten:rgba(4,7,6,.9);      /* Abdunkelung über dem Hero-Bild */

  --disp:"Oswald",Impact,system-ui,sans-serif;
  --marke:"Alfa Slab One",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --r:0;   /* kantig, keine gerundeten Ecken (Lea, 2026-09-11) */

  /* Raster */
  --unit:4px; --sm:8px; --md:16px; --gutter:24px; --lg:32px;
  --margin-desktop:28px; --margin-mobile:18px; --container:1280px;
}

*{box-sizing:border-box}
/* Auch die Wurzel traegt den Seitengrund: Safari zeigt beim Ueberziehen
   und hinter seinen Leisten die Farbe der Wurzel, nicht die des body. */
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
  /* Sicherheitsnetz, falls ein Element doch einmal breiter wird als das
     Fenster. clip statt hidden - hidden wuerde position:sticky abschalten. */
  overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.01em;line-height:1;margin:0}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--margin-desktop)}
@media(max-width:760px){.wrap{padding:0 var(--margin-mobile)}}
.eyebrow{font-family:var(--disp);font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;font-size:12px;color:var(--red-fg)}

/* ---------- Navigation (eine Leiste fuer die ganze Seite) ---------- */
.nav{position:sticky;top:0;z-index:60;
  /* Erst die feste Farbe, dann die durchscheinende: Browser ohne
     color-mix behalten die feste, sonst waere die Leiste durchsichtig
     und die Seite schiene hindurch. */
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* Drei Spalten: Marke links, Menue mittig, Werkzeuge rechts.
   Die aeusseren Spalten sind gleich breit, damit die Mitte wirklich
   mittig sitzt und nicht nur zwischen den Nachbarn haengt. */
.nav .inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:26px;height:70px;max-width:var(--container);margin:0 auto;
  padding:0 var(--margin-desktop)}
@media(max-width:760px){.nav .inner{padding:0 var(--margin-mobile);gap:14px}}
/* Am Handy haengt die Leiste fest am oberen Rand statt zu kleben:
   sticky zusammen mit overflow-x:clip am body und backdrop-filter hat
   auf dem Telefon die Leiste nach unten rutschen lassen, so dass die
   Seite darueber zu sehen war (Lea, 2026-09-11). Der Platz, den die
   Leiste im Fluss einnahm, kommt als Abstand oben am body zurueck. */
@media(max-width:760px){
  /* Deckend und bis unter die Statusleiste (safe-area): ueber der
     Leiste soll nur ihre Farbe stehen, nicht die durchscheinende
     Seite. Deshalb hier ohne Weichzeichner und ohne Transparenz. */
  .nav{position:fixed;left:0;right:0;top:0;background:var(--bg);backdrop-filter:none;
    padding-top:env(safe-area-inset-top)}
  body{padding-top:calc(70px + env(safe-area-inset-top))}
  html{scroll-padding-top:calc(70px + env(safe-area-inset-top))}
}
/* Der Schriftzug BULLSCORE laeuft in Alfa Slab One. Die Schrift gibt es
   nur in einer Staerke - deshalb 400 und kein Fettdruck. Sie traegt
   ohnehin viel Gewicht, gesperrt wird darum weniger als bei Oswald. */
.brand{font-family:var(--marke);font-weight:400;font-size:20px;letter-spacing:.03em;
  text-transform:uppercase;display:flex;align-items:center;gap:10px;white-space:nowrap;
  color:var(--fg);flex:none}
@media(max-width:520px){.brand{font-size:17px}}
.brand .pip{width:11px;height:11px;background:var(--red);transform:rotate(45deg);flex:none}
/* Das Zeichen ist breiter als hoch (624 zu 463) - deshalb nur die
   Breite setzen und die Hoehe mitlaufen lassen. */
.brand .logo{width:40px;height:auto;flex:none}
footer .brand .logo{width:36px}
@media(max-width:520px){.brand .logo{width:34px}}

.navlinks{justify-self:center;display:flex;align-items:center;gap:24px;font-family:var(--disp);font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;font-size:13.5px;color:var(--fg-soft)}
.navlinks > a,.navlinks .hat > a{position:relative;padding:24px 0;display:flex;
  align-items:center;gap:5px;white-space:nowrap}
.navlinks a:hover{color:var(--fg)}
/* aktive Seite: roter Balken unter dem Punkt */
.navlinks > a::after,.navlinks .hat > a::after{content:"";position:absolute;left:0;right:100%;
  bottom:18px;height:2px;background:var(--red);transition:right .25s ease}
.navlinks > a:hover::after,.navlinks .hat > a:hover::after{right:0}
.navlinks > a.active,.navlinks .hat.active > a{color:var(--fg)}
.navlinks > a.active::after,.navlinks .hat.active > a::after{right:0}
.navlinks .pfeil{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;
  opacity:.6;transition:transform .2s}
.navlinks .hat:hover .pfeil{transform:rotate(180deg)}

/* Untermenue Support */
.hat{position:relative}
.hat .unter{position:absolute;left:-14px;top:100%;min-width:210px;
  background:rgba(14,20,17,.98);backdrop-filter:blur(14px);
  border:1px solid var(--line-strong);border-radius:var(--r);padding:7px;
  display:flex;flex-direction:column;gap:1px;box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:5}
.hat:hover .unter,.hat:focus-within .unter{opacity:1;visibility:visible;transform:none}
.hat .unter a{padding:10px 14px;border-radius:var(--r);font-size:13px;letter-spacing:.06em;
  color:var(--fg-soft)}
.hat .unter a:hover{background:var(--surface-2);color:var(--fg)}
.hat .unter a.active{color:var(--red-fg)}

.navtools{justify-self:end;display:flex;align-items:center;gap:7px}

/* Konfigurator: voll ausgefuellt statt nur umrandet - klar als Aktion erkennbar */
.navlinks .konflink{display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;margin:0 4px;border-radius:var(--r);
  background:var(--red);color:#fff;font-weight:600;
  box-shadow:0 4px 16px rgba(217,35,50,.32);transition:.18s}
.navlinks .konflink::after{display:none}
.navlinks .konflink:hover{background:var(--red-hi);transform:translateY(-1px);
  box-shadow:0 7px 22px rgba(217,35,50,.45)}
.navlinks .konflink.active{background:var(--red-hi);
  box-shadow:0 0 0 2px rgba(217,35,50,.35),0 4px 16px rgba(217,35,50,.4)}
.navlinks .konflink svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  flex:none}

.ico{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r);
  border:1px solid transparent;color:var(--fg-soft);cursor:pointer;background:none;
  position:relative;transition:.18s}
.ico:hover{background:var(--surface);color:var(--fg);border-color:var(--line)}
.ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.ico.menu{display:none}
.badge{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;
  background:var(--red);color:#fff;border-radius:99px;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;font-family:var(--body);line-height:1}

/* Ausklappmenue fuer schmale Bildschirme */
.mobilmenu{display:none;flex-direction:column;padding:10px var(--margin-mobile) 20px;
  border-top:1px solid var(--line);background:var(--bg-2)}
.mobilmenu.offen{display:flex}
.mobilmenu a{font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  font-size:15px;padding:13px 4px;border-bottom:1px solid var(--line);color:var(--fg-soft)}
.mobilmenu a:hover{color:var(--fg)}
.mobilmenu a.hervor{color:var(--red-fg)}

/* Support klappt auf, statt die ganze Liste offen zu zeigen */
.mobilmenu .klapp{border-bottom:1px solid var(--line)}
.mobilmenu .klapp .kopf{width:100%;display:flex;align-items:center;
  justify-content:space-between;gap:12px;background:none;border:0;cursor:pointer;
  font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:15px;
  padding:13px 4px;color:var(--fg-soft);text-align:left}
.mobilmenu .klapp .kopf:hover{color:var(--fg)}
.mobilmenu .klapp .kopf svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2.2;flex:none;transition:transform .22s}
.mobilmenu .klapp.offen .kopf{color:var(--fg)}
.mobilmenu .klapp.offen .kopf svg{transform:rotate(180deg)}
.mobilmenu .klapp .inhalt{display:none;padding-left:14px}
.mobilmenu .klapp .inhalt a{display:block;width:100%}
.mobilmenu .klapp.offen .inhalt{display:block}
.mobilmenu .klapp .inhalt a{font-size:13.5px;letter-spacing:.06em;padding:11px 4px}
.mobilmenu .klapp .inhalt a:last-child{border-bottom:0}
@media(max-width:1080px){
  .navlinks{display:none}
  .ico.menu{display:grid}
  .nav .inner{grid-template-columns:auto 1fr}
  .navtools{grid-column:2}
}

/* ---------- Typografie ---------- */
/* Die Anzeigeschrift darf gross werden - der Kontrast zum ruhigen
   Fliesstext ist das Gestaltungsmittel, nicht ein Dekorbalken. */
.head-lg{font-family:var(--disp);font-size:clamp(34px,6.2vw,76px);line-height:.94;
  font-weight:600;text-transform:uppercase;margin:0;letter-spacing:-.005em}
.head-md{font-family:var(--disp);font-size:24px;line-height:28px;font-weight:600;
  text-transform:uppercase;margin:0}
.num{font-family:var(--disp);font-size:20px;line-height:20px;font-weight:500}

/* ---------- Buttons (wie shop.html) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  font-size:14px;padding:14px 26px;border-radius:var(--r);cursor:pointer;
  border:1px solid transparent;transition:.18s;white-space:nowrap;font-family:var(--disp)}
.btn.primary{background:var(--red);color:#fff;box-shadow:0 8px 26px rgba(217,35,50,.3)}
.btn.primary:hover{background:var(--red-hi);transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(217,35,50,.42)}
.btn.ghost{border-color:var(--line-strong);color:var(--fg);background:rgba(255,255,255,.03)}
.btn.ghost:hover{background:rgba(255,255,255,.08);border-color:var(--fg-dim)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.btn.block{width:100%}

/* ---------- Badges ---------- */
.chip{font-family:var(--disp);font-size:11px;letter-spacing:.12em;font-weight:600;
  text-transform:uppercase;padding:5px 11px;border:1px solid var(--line-strong);
  background:rgba(12,17,15,.8);color:var(--fg)}
.chip.pro{background:var(--red);border-color:var(--red-fg);color:#fff}
.chip.hot{background:transparent;border-color:var(--green-fg);color:var(--green-fg)}

/* ---------- Layout ---------- */
main{flex:1 0 auto;width:100%;max-width:var(--container);margin:0 auto;
  padding:var(--lg) var(--margin-desktop) 96px}
@media(max-width:760px){main{padding:var(--lg) var(--margin-mobile) 64px}}
/* Kein Dekorbalken und keine Trennlinie mehr: der Seitenkopf steht
   fuer sich, Abstand trennt ihn vom Inhalt. Eine Zierde, die auf
   jeder Seite identisch wiederkehrt, macht alle Seiten gleich. */
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--gutter);margin-bottom:var(--lg)}
.pagehead .count{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-dim);white-space:nowrap}
@media(max-width:620px){.pagehead{flex-direction:column;align-items:flex-start;gap:10px}}

/* Produktbild-Fläche – gleiche Anmutung wie die Kacheln auf der Startseite */
.shot{position:relative;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  background:radial-gradient(ellipse 70% 55% at 50% 38%, var(--tief-1), var(--tief-2) 70%)}
.shot svg.art{width:74%;height:74%;transition:transform .45s ease}
/* Fotos fuellen die Flaeche randlos */
.shot img.foto{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease}
.shot .tags{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}

/* ---------- Footer (wie shop.html) ---------- */
footer{margin-top:auto;background:var(--bg-2);border-top:1px solid var(--line);
  padding:56px 0 28px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;
  max-width:var(--container);margin:0 auto;padding:0 var(--margin-desktop) 40px}
@media(max-width:1000px){footer .cols{grid-template-columns:1fr 1fr;gap:32px}}
/* Am Handy bleiben die drei Linklisten nebeneinander - untereinander
   wird der Fuss sonst laenger als die Seite darueber. Nur die Spalte
   mit Marke und Kontakt laeuft ueber die volle Breite. */
@media(max-width:600px){
  footer{padding:40px 0 22px}
  footer .cols{grid-template-columns:repeat(3,1fr);gap:22px 16px;padding-bottom:26px}
  footer .cols > div:first-child{grid-column:1 / -1}
  footer h4{margin-bottom:10px;font-size:11px}
  footer ul{gap:7px}
  footer li a{font-size:12.5px}
  footer .about{margin-top:10px;font-size:12.5px;max-width:none}
  footer .kontakt{margin-top:12px;grid-auto-flow:column;justify-content:start;gap:18px}
  footer .kontakt a{font-size:12.5px}
}
@media(max-width:400px){
  footer .kontakt{grid-auto-flow:row;gap:7px}
}
@media(max-width:760px){footer .cols{padding-left:var(--margin-mobile);
  padding-right:var(--margin-mobile)}}

/* Telefon und E-Mail unter der Marke */
footer .kontakt{display:grid;gap:9px;margin-top:18px}
footer .kontakt a{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;
  color:var(--fg-soft);transition:color .18s}
footer .kontakt a:hover{color:var(--red-fg)}
footer .kontakt svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  flex:none}
footer h4{font-family:var(--disp);text-transform:uppercase;letter-spacing:.13em;
  font-size:12px;color:var(--fg-dim);margin:0 0 14px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer li a{font-size:13.5px;color:var(--fg-soft)}
footer li a:hover{color:var(--red-fg)}
footer .about{font-size:13.5px;color:var(--fg-dim);max-width:290px;margin:12px 0 0}
footer .bot{border-top:1px solid var(--line);max-width:var(--container);margin:0 auto;
  padding:22px var(--margin-desktop) 0;display:flex;flex-wrap:wrap;gap:16px;
  justify-content:space-between;font-size:12px;color:var(--fg-dim)}

/* ---------- Farbbaender als Sektionswechsel ----------
   Ein Abschnitt wechselt die Flaeche, nicht die Linie. Das Band bricht
   aus dem Textcontainer heraus und laeuft ueber die ganze Breite -
   damit endet auch das "alles im selben Container".
   Die Randbreite wird links wieder hereingeholt, sonst klebte der Text
   an der Fensterkante. */
/* --vw ist die Fensterbreite OHNE Bildlaufleiste; site.js setzt sie und
   haelt sie beim Groessenaendern nach. 100vw zaehlt die Leiste mit und
   haette das Band um genau ihre Breite zu weit laufen lassen. */
/* Der negative Rand zieht das Band bis an die Fensterkante, das
   Polster schiebt den Inhalt wieder auf die Textkante zurueck. Beide
   Werte sind derselbe Betrag - der Ueberhang. Frueher stand im Polster
   zusaetzlich der Seitenrand; damit rueckte der Bandinhalt um eine
   Randbreite weiter ein als der uebrige Text (am Handy 36 statt 18
   Pixel). Weil "50%" sich auf den Container bezieht, in dem das Band
   steht, stimmt der Betrag von selbst - auch wenn der Container seine
   Hoechstbreite erreicht hat. Ein eigener Wert fuers Handy eruebrigt
   sich deshalb. */
.band{margin-left:calc(50% - var(--vw, 100vw) / 2);
  margin-right:calc(50% - var(--vw, 100vw) / 2);
  padding-left:calc(var(--vw, 100vw) / 2 - 50%);
  padding-right:calc(var(--vw, 100vw) / 2 - 50%);
  padding-top:var(--lg);padding-bottom:56px}
.band.tief{background:var(--bg-2)}
.band.hoch{background:var(--surface)}

/* ---------- Lichtflaechen ----------
   Zwei abstrakte Lichtstudien liegen als Hintergrund hinter zwei
   Abschnitten. Sie zeigen kein Produkt - nur Licht auf Schwarz.

   mix-blend-mode:screen heisst: nur die hellen Stellen kommen durch,
   das Schwarz verschwindet. Dadurch braucht es keinen passenden
   Ausschnitt und kein zweites Bild fuer die helle Ansicht - in Amber
   wird die Flaeche schlicht ausgeblendet, weil eine dunkle Lichtstudie
   auf hellem Grund nur schmutzig wirkt.

   Das langsame Wandern macht die Flaeche lebendig, ohne dass ein Video
   geladen wird. Wer weniger Bewegung eingestellt hat, bekommt sie
   stehend. */
.lichtflaeche{position:relative;isolation:isolate}
.lichtflaeche::before{content:"";position:absolute;inset:0;z-index:0;
  background-repeat:no-repeat;background-size:cover;background-position:50% 50%;
  mix-blend-mode:screen;pointer-events:none;
  animation:lichtwandern 46s ease-in-out infinite alternate}
.lichtflaeche > *{position:relative;z-index:1}
/* Das Licht bleibt in der rechten Haelfte - links steht der Text, und
   eine helle Flaeche direkt hinter einer Ueberschrift kostet Lesbarkeit. */
@keyframes lichtwandern{
  from{background-position:64% 50%;opacity:.42}
  to{background-position:76% 50%;opacity:.6}
}
@media(prefers-reduced-motion:reduce){
  .lichtflaeche::before{animation:none;opacity:.5;background-position:70% 50%}
}
html[data-hell="amber"] .lichtflaeche::before{display:none}
/* Am Handy ohne die wandernde Lichtflaeche: die Mischung (screen) mit
   laufender Animation blieb auf dem Telefon leer, bis man neu geladen
   hat (Lea, 2026-09-11, Support-Seite). Dort steht die Flaeche ohne
   Textur - der Text ist wichtiger als das Streiflicht. */
@media(max-width:760px),(hover:none){
  .lichtflaeche::before{display:none}
}

/* ---------- Dabei oder nicht ----------
   Der Stierkopf, einfarbig: gruen dabei, rot fehlt. Das Zeichen ist
   breiter als hoch (624 zu 463) - deshalb nur die Breite setzen. */
/* ---------- Zeilen in einer Inhaltsliste ----------
   Kein Marker vor der Zeile - die Zeile selbst sagt, woran man ist:
   was im Set liegt, steht in Gruen; was fehlt, rueckt ein, traegt ein
   "Ohne" vor sich her und tritt farblich zurueck. Der Einzug ist das
   eigentliche Signal, weil man ihn schon beim Ueberfliegen sieht,
   bevor man ein Wort gelesen hat.

   Beide Regeln muessen die Farbe der Liste ueberschreiben koennen,
   deshalb zwei Klassen statt einer. */
.pos.drin{color:var(--green-fg)}
.pos.fehlt{color:var(--fg-dim);padding-left:20px}

/* Nicht mehr in Gebrauch, siehe hornZeichen() in site.js. */
.hornz{flex:none;width:26px;height:auto}
.hornz.dabei{color:var(--green-fg)}
.hornz.fehlt{color:var(--red-fg);opacity:.5}

/* ---------- Scoreboard-Zeile ----------
   180 heisst dabei, der Strich heisst fehlt. Feste Breite und
   Tabellenziffern, damit die Spalte steht. */
.pkt{flex:none;display:inline-block;min-width:3.2ch;text-align:right;
  font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.35;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pkt.dabei{color:var(--red-fg)}
.pkt.fehlt{color:var(--fg-dim);opacity:.7}

/* ============================================================
   Bausteine aus dem Ordner "design ideen"
   Sie benutzen bewusst zwei andere Schriften als der Rest der Seite:
   Archivo fuer grosse Aussagen, Martian Mono fuer kleine Beschriftungen.
   Das ist eine Probe - wenn der Bruch stoert, faellt er hier an einer
   Stelle wieder raus.
   ============================================================ */
:root{
  --schrift-aussage:"Archivo","Oswald",Impact,system-ui,sans-serif;
  --schrift-technisch:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- Zitat ----------
   Eine einzelne Aussage, gross gesetzt, mit einer technischen Notiz
   daneben - wie eine Bildunterschrift im Werkstattbuch. */
/* Massgeblich ist der Baustein aus dem Ordner "design ideen": ein
   vollbreites Band mit eigenem Grund, Zwoelferraster, der Satz ueber
   neun Spalten, Archivo in wdth 106 / wght 700, clamp(24px,3.4vw,50px)
   auf Zeilenhoehe 1.06. Uebernommen sind Aufbau, Schrift und Masse.

   Der Grund ist schwarz und die Schrift hell - beides fest, nicht
   ueber Farbvariablen. Das ist Absicht: das Band soll in jeder
   Ansicht ein schwarzer Block sein. Ueber Variablen wuerde es im
   hellen Amber-Thema mitlaufen und waere kein schwarzes Band mehr;
   und die Schriftfarbe muss mitfest stehen, sonst staende dort im
   hellen Thema dunkle Schrift auf schwarzem Grund. */
/* Der Abstand nach oben und unten gehoert hierher und nicht als
   style-Angabe an das Element: dort wuerde die margin-Kurzschreibweise
   die beiden negativen Seitenraender ueberschreiben, und das Band
   bliebe in der Spalte stehen statt bis an die Fensterkante zu laufen. */
.zitat{margin-top:74px;margin-bottom:90px;
  margin-left:calc(50% - var(--vw, 100vw) / 2);
  margin-right:calc(50% - var(--vw, 100vw) / 2);
  padding:clamp(48px,6vw,84px) calc(var(--vw, 100vw) / 2 - 50%);
  background:#000;color:#f2f6f3;
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.5vw,40px)}
@media(max-width:860px){.zitat{grid-template-columns:1fr}}
.zitat blockquote{grid-column:1 / span 9;margin:0;
  font-family:var(--schrift-aussage);font-weight:700;
  font-variation-settings:"wdth" 106,"wght" 700;
  font-size:clamp(24px,3.4vw,50px);line-height:1.06}
@media(max-width:860px){.zitat blockquote{grid-column:1}}
/* Die Einordnung steht rechts, klein und unten buendig - sie
   kommentiert den Satz, sie setzt ihn nicht fort. Die Farbe kommt
   nicht aus einer Variablen: das Band ist fest schwarz, also muss
   auch die gedaempfte Schrift fest hell sein. */
.zitat .dazu{grid-column:10 / span 3;align-self:end;margin:0;
  font-size:13.5px;line-height:1.6;color:rgba(242,246,243,.6)}
@media(max-width:860px){.zitat .dazu{grid-column:1;font-size:14px}}

/* ---------- Linie, die sich beim Scrollen zeichnet ----------
   animation-timeline: view() bindet die Animation an die Sichtbarkeit
   statt an die Zeit. Browser ohne diese Eigenschaft zeigen die Linie
   schlicht fertig gezeichnet - deshalb steht sie standardmaessig auf
   voller Hoehe und wird nur dort animiert, wo es geht. */
.zugstrich{position:relative;padding-left:26px}
.zugstrich::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:var(--red);transform-origin:top}
@supports (animation-timeline: view()){
  .zugstrich::before{animation:strichZiehen linear both;
    animation-timeline:view();animation-range:entry 12% cover 46%}
  @keyframes strichZiehen{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
@media(prefers-reduced-motion:reduce){
  .zugstrich::before{animation:none;transform:none}
}

/* ---------- Rotes Vollflaechen-Band ----------
   Fuer Seiten, auf denen sonst wenig passiert. Rot gefuellt, weisse
   Schrift, sehr grosse Zeile - der lauteste Baustein, deshalb nur
   einmal je Seite und nicht dort, wo schon der Stier steht. */
.rotband{background:var(--red);color:#fff;
  margin-left:calc(50% - var(--vw, 100vw) / 2);
  margin-right:calc(50% - var(--vw, 100vw) / 2);
  padding:clamp(46px,6vw,88px) calc(var(--vw, 100vw) / 2 - 50%);
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:end}
@media(max-width:860px){
  .rotband{grid-template-columns:1fr;gap:26px}
}
.rotband h2{grid-column:1 / span 7;margin:0;color:#fff;
  font-family:var(--schrift-aussage);font-weight:800;
  font-variation-settings:"wdth" 116,"wght" 850;
  font-size:clamp(32px,5.2vw,76px);line-height:.9;text-transform:uppercase}
@media(max-width:860px){.rotband h2{grid-column:1}}
.rotband .dazu{grid-column:9 / span 4;padding-bottom:8px}
@media(max-width:860px){.rotband .dazu{grid-column:1}}
.rotband p{margin:0 0 20px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.92)}
.rotband a.tat{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;
  background:var(--bg);color:var(--fg);
  font-family:var(--schrift-technisch);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;border-radius:var(--r);transition:transform .18s}
.rotband a.tat:hover{transform:translate(2px,-2px)}
.rotband a.tat svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- Strecke: seitlich scrollen ----------
   Eine Reihe, die man quer durchzieht, statt sie nach unten zu
   stapeln. scroll-snap laesst sie an jeder Kachel einrasten.

   Urspruenglich fuer Werkstattfotos gebaut. Die gab es nie als echte
   Aufnahmen, deshalb traegt jetzt "Was uns unterscheidet" dieses
   Design - die Seite hatte davor zweimal dasselbe Kartenraster. */
.streckenkopf{display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;margin-bottom:20px}
.streckenkopf .wink{font-family:var(--schrift-technisch);font-size:10.5px;
  letter-spacing:.08em;color:var(--fg-dim);text-transform:uppercase;white-space:nowrap;
  animation:winken 3s ease-in-out infinite alternate}
@keyframes winken{from{transform:translateX(-6px)}to{transform:translateX(6px)}}
@media(prefers-reduced-motion:reduce){.streckenkopf .wink{animation:none}}

.strecke{display:flex;align-items:stretch;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:16px;
  margin-left:calc(50% - var(--vw, 100vw) / 2);
  margin-right:calc(50% - var(--vw, 100vw) / 2);
  padding-left:calc(var(--vw, 100vw) / 2 - 50%);
  padding-right:calc(var(--vw, 100vw) / 2 - 50%);
  /* Ohne scroll-padding rastet die erste Kachel an der Fensterkante
     ein und verdeckt ihr eigenes Polster - die Kachel klebte am Rand,
     waehrend die Ueberschrift darueber eingerueckt stand. Hier steht
     bewusst --rand aus site.js statt derselben Rechnung wie oben:
     in scroll-padding bezieht sich ein Prozentwert auf den Kasten
     selbst, nicht auf seinen Container, und "50%" ergaebe null.
     Fehlt --rand, bleibt es beim bisherigen Verhalten. */
  scroll-padding-left:var(--rand, 0px);
  scroll-padding-right:var(--rand, 0px);
  scrollbar-width:thin}
/* Keine feste Hoehe mehr: die stammte vom Bilderstreifen, wo alle
   Kacheln auf einer Kante stehen mussten. Textkacheln waeren damit
   unten halb leer. align-items:stretch gibt allen die Hoehe der
   laengsten - gleich hoch, aber nur so hoch wie noetig. */
.strecke > *{flex:none;scroll-snap-align:start;border-radius:var(--r);
  overflow:hidden}
/* Eine Kachel mit Text. Der rote Strich oben ist derselbe Marker wie
   auf den Karten daneben - so bleibt die Seite bei einer Sprache. */
.strecke .punkt{background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;box-sizing:border-box}
/* Feste Bildhoehe, obwohl die Kacheln verschieden breit sind: sonst
   faengt der Text in jeder Kachel auf einer anderen Hoehe an. Die
   Breite darf variieren, die Textkante nicht. */
.strecke .punkt img{width:100%;height:190px;object-fit:cover;display:block;
  border-bottom:1px solid var(--line)}
.strecke .punkt .inhalt{padding:22px 24px 24px}
.strecke .punkt .balken{display:block;width:34px;height:2px;background:var(--red);
  margin-bottom:16px;flex:none}
.strecke .punkt h3{font-size:19px;line-height:1.15;margin:0 0 10px}
.strecke .punkt p{margin:0;font-size:14px;line-height:1.6;color:var(--fg-soft)}

/* Die Kachel am Ende der Strecke: rot gefuellt, kein Bild. Sie
   schliesst die Reihe ab und ist zugleich das Zeichen, dass rechts
   nichts mehr kommt - ohne sie hoert die Strecke einfach auf.
   Farben fest, nicht ueber Variablen: sie soll in beiden Ansichten
   rot mit heller Schrift sein. */
.strecke .wort{background:var(--red);color:#fff;display:flex;flex-direction:column;
  justify-content:flex-end;padding:28px 26px 26px;box-sizing:border-box}
.strecke .wort p{margin:0 0 18px;font-size:17px;line-height:1.45;color:#fff}
.strecke .wort a{align-self:flex-start;color:#fff;
  font-family:var(--schrift-technisch);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.7);
  padding-bottom:3px;transition:border-color .18s}
.strecke .wort a:hover{border-color:#fff}

/* ---------- Ladesequenz ----------
   Aus den Design-Ideen uebernommen: beim ersten Aufruf legt sich kurz
   eine dunkle Flaeche ueber die Seite, das Zeichen kommt auf, ein roter
   Punkt faehrt von links ins Bull. Nach knapp zwei Sekunden ist sie weg.

   Zwei Zuegel, damit es nicht nervt: sie laeuft nur einmal je Sitzung
   (site.js merkt es sich), und wer "Bewegung reduzieren" eingestellt
   hat, sieht sie gar nicht. pointer-events:none, damit sie in keinem
   Fall einen Klick abfaengt. */
.ladesequenz{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:var(--bg);pointer-events:none;
  animation:ladeAus 1.9s .15s both}
.ladesequenz .inhalt{display:flex;flex-direction:column;align-items:center;gap:24px}
.ladesequenz svg{width:min(52vw,260px);height:auto;color:var(--fg);
  animation:ladeZeichen 1.3s cubic-bezier(.16,.9,.2,1) both}
.ladesequenz .punkt{width:14px;height:14px;border-radius:50%;background:var(--red);
  animation:ladePunkt 1.15s cubic-bezier(.16,.9,.2,1) both}
@keyframes ladeAus{0%,62%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes ladeZeichen{0%{opacity:0;transform:scale(.94)}40%,100%{opacity:1;transform:none}}
@keyframes ladePunkt{0%{transform:translateX(-42vw) scale(.6)}58%,100%{transform:none}}

/* ---------- Korn ueber der ganzen Seite ----------
   Eine ganz feine Rauschschicht liegt ueber allem. Sie nimmt den
   Flaechen das Sterile, ohne dass ein Bild geladen werden muss: das
   Rauschen rechnet der Browser selbst (feTurbulence in einem SVG als
   Data-URI, rund 300 Zeichen). Kein Bild, kein Ladezeit-Aufschlag.

   pointer-events:none, damit sie keinen Klick abfaengt. */
body::after{
  content:"";position:fixed;inset:0;z-index:150;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size:160px 160px}
/* Auf hellem Amber wirkt dasselbe Korn schnell schmutzig - dort feiner. */
html[data-hell="amber"] body::after{opacity:.035;mix-blend-mode:multiply}
/* Am Handy ohne Korn: eine feste Schicht mit Mischmodus ueber allem
   bringt Safari beim Scrollen aus dem Tritt - die feste Navigation
   hinkt dann nach, und die Seite scheint darueber durch. */
@media(max-width:760px),(hover:none){body::after{display:none}}

/* ---------- Ist es dabei? ----------
   Das Emblem als Aufzaehlungszeichen. Drei Farben steuern es:
   --emb-linie  die Ringe und der Kopf
   --emb-grund  die Scheibenflaeche hinter dem Kopf
   --emb-ring   der Doppelring in Bordeaux
   Auf dunklem Grund sind Linie und Grund vertauscht - so wie es die
   beiden Fassungen im Logo-Ordner vormachen. */
.embz{width:26px;height:26px;flex:none;
  --emb-linie:var(--fg);
  --emb-grund:var(--surface);
  --emb-ring:#8f1d33;
  --emb-keil:var(--red-fg)}
.embz.fehlt{opacity:.4;
  --emb-linie:var(--fg-dim);
  --emb-ring:var(--fg-dim);
  --emb-keil:var(--fg-dim)}

/* ---------- Ladezeichen ----------
   Unten links, gegenueber dem Hell/Dunkel-Schalter. Nur der rote Bogen
   dreht sich, Ring und Stierkopf stehen still. */
.ladezeichen{position:fixed;left:18px;bottom:18px;z-index:95;
  display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:0;padding:8px 20px 8px 9px;
  box-shadow:0 6px 0 -2px rgba(0,0,0,.32);
  opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s}
.ladezeichen.an{opacity:1;transform:none}
.ladezeichen svg{width:32px;height:32px;flex:none;color:var(--fg)}
.ladezeichen .bogen{transform-origin:311px 246px;
  animation:ladedreh 1.1s cubic-bezier(.6,.1,.4,.9) infinite}
.ladezeichen span{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-soft);white-space:nowrap}
@keyframes ladedreh{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .ladezeichen .bogen{animation-duration:2.4s;animation-timing-function:linear}
}

/* ---------- 180 ----------
   Der Ruf legt sich kurz ueber die Seite. Keine Karte, kein Kasten -
   nur sehr grosse Schrift auf einer abgedunkelten Flaeche. */
.einachtzig{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  pointer-events:none;background:color-mix(in srgb,var(--schatten) 70%,transparent);
  opacity:0;transition:opacity .3s ease}
.einachtzig.an{opacity:1}
.einachtzig span{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(38px,9vw,120px);line-height:.92;text-align:center;color:var(--fg);
  letter-spacing:-.01em;transform:scale(.9);transition:transform .45s cubic-bezier(.2,.9,.3,1.3)}
.einachtzig.an span{transform:none}
.einachtzig em{font-style:normal;color:var(--red-fg)}
/* Der Stierkopf ueber dem Ruf - dasselbe Zeichen wie in der Kopfzeile,
   nur gross. Das Raster stapelt die beiden Kinder von selbst. */
.einachtzig .kopf{width:min(28vw,200px);height:auto;color:var(--fg);
  margin:0 0 20px;display:block;opacity:.92}
@media(prefers-reduced-motion:reduce){
  .einachtzig span{transition:none;transform:none}
}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,calc(100% + 44px));z-index:90;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:14px 22px;font-size:13.5px;display:flex;align-items:center;gap:11px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.toast.on{transform:translate(-50%,0)}
.toast svg{width:17px;height:17px;stroke:var(--green-fg);fill:none;stroke-width:2.6}


/* Markierter Text traegt die Hausfarbe - eine der Kleinigkeiten, die
   sonst niemand anfasst. */
::selection{background:var(--red);color:#fff}
::-moz-selection{background:var(--red);color:#fff}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   Helle Ansicht – Amber.
   Anders als die frühere Schiefer-Fassung ist das ein echter heller
   Modus: warmes, helles Amber als Grund, dunkelbraune Schrift. Rot
   und Grün müssen deshalb hier ABDUNKELN – umgekehrt zur dunklen
   Ansicht, sonst verschwinden sie in der hellen Fläche.
   Wird über den Schalter unten rechts gesetzt.
   ============================================================ */
html[data-hell="amber"]{
  /* Wie in der dunklen Ansicht wandert die Flaeche nach vorn, indem
     sie heller wird - der Seitengrund ist der dunkelste Ton. */
  --bg:#e9dcbe;
  --bg-2:#f2e8d3;
  --surface:#fbf5e8;
  --surface-2:#ffffff;
  --line:rgba(62,46,18,.16);
  --line-strong:rgba(62,46,18,.32);
  --fg:#2b2114;
  --fg-soft:#5d5340;
  --fg-dim:#8a7c63;

  /* Akzente abgedunkelt – auf hellem Amber wäre das helle Rot der
     dunklen Ansicht nicht mehr zu lesen. */
  --red-fg:#b01e2b;
  --red-tint:rgba(176,30,43,.11);
  --green-fg:#1c6a48;
  --green-tint:rgba(28,106,72,.13);

  /* Tiefe Flächen bleiben dunkel: die Produktgrafiken sind mit dunklen
     Füllfarben gezeichnet und wären auf Hell nicht zu sehen. Warmes
     Braun statt Grün, damit sie zum Amber passen. */
  --tief-1:#4c4029;
  --tief-2:#2b2317;
  --band-1:#e4d5b3;
  --band-2:#f4ecd9;
  --glas:rgba(255,250,240,.9);
  --glas-hover:rgba(255,255,255,.96);
  --schatten:rgba(52,40,18,.55);
}

/* Auf den dunklen Bildflächen bleibt die Schrift hell – sonst stünden
   die Etiketten dunkel auf dunkel. Gleiche Ausnahme wie im weissen
   Kasten der Set-Seite. */
html[data-hell="amber"] .shot,
html[data-hell="amber"] .thumbs,
html[data-hell="amber"] .vis,
html[data-hell="amber"] .bild{
  --fg:#f6f1e6;
  --fg-soft:#c9c0ad;
  --fg-dim:#9c9483;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.26);
  --red-fg:#f04455;
  color:var(--fg);
}

/* Der Konfigurator-Knopf und gefüllte rote Flächen bleiben kräftig,
   damit weiße Schrift darauf lesbar bleibt. */
html[data-hell="amber"] .btn.primary,
html[data-hell="amber"] .navlinks .konflink{background:#c81f2d}
html[data-hell="amber"] .btn.primary:hover,
html[data-hell="amber"] .navlinks .konflink:hover{background:#e02b3b}

/* Diese drei Flächen sind in der dunklen Ansicht fest dunkel gesetzt.
   Blieben sie stehen, stünde dunkle Schrift auf dunklem Grund. */
html[data-hell="amber"] .nav{background:var(--bg);background:color-mix(in srgb, var(--bg) 92%, transparent)}
@media(max-width:760px){html[data-hell="amber"] .nav{background:var(--bg)}}
html[data-hell="amber"] .hat .unter{background:color-mix(in srgb, var(--surface) 98%, transparent)}
html[data-hell="amber"] .chip{background:rgba(255,252,246,.88)}
html[data-hell="amber"] .shot .chip{background:rgba(28,23,15,.8)}

/* Der Umriss-Knopf hat eine weisse Fuellung – auf Hell unsichtbar. */
html[data-hell="amber"] .btn.ghost{background:rgba(62,46,18,.05)}
html[data-hell="amber"] .btn.ghost:hover{background:rgba(62,46,18,.11)}

/* Fotos wirken auf hellem Grund schnell zu kontrastreich */
html[data-hell="amber"] .board-wrap img,
html[data-hell="amber"] .tier .vis img,
html[data-hell="amber"] .karte .bild img{filter:brightness(1.04) saturate(.97)}

/* Auf Hell ist der Seitengrund selbst schon sandfarben. Der Papierton
   der Flaeche verschwaende darin, deshalb geht sie hier nach oben
   statt nach unten: fast weiss, damit sie sich weiter abhebt. Einen
   tiefen Schatten braucht sie dann nicht mehr, eine Linie reicht. */
html[data-hell="amber"] .hellflaeche{
  --surface:#f6f0e2;
  --surface-2:#ece4d1;
  --bg-2:#fffdf8;
  background:#fdfaf3;
  box-shadow:0 10px 0 -4px rgba(84,64,26,.16);
}
html[data-hell="amber"] .hellkarte:not(.gedaempft):hover,
html[data-hell="amber"] .hellkarte:not(.gedaempft).imblick{
  box-shadow:0 6px 0 -2px rgba(84,64,26,.16)}

/* ---------- Umschalter Hell/Dunkel ----------
   Zwei Ansichten, also ein Schieber statt einer Liste. Mond links,
   Sonne rechts, der Knauf wandert zur aktiven Seite. */
.hellschieber{position:fixed;right:18px;bottom:18px;z-index:95;
  width:74px;height:36px;padding:0;border-radius:99px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:space-between;
  transition:background .25s,border-color .25s}
.hellschieber:hover{border-color:var(--fg-dim)}
.hellschieber .seite{width:36px;display:grid;place-items:center;position:relative;z-index:2;
  transition:color .25s}
.hellschieber .seite svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hellschieber .mond{color:var(--fg)}
.hellschieber .sonne{color:var(--fg-dim)}
.hellschieber.an .mond{color:var(--fg-dim)}
.hellschieber.an .sonne{color:#3a2f18}

/* Der Knauf liegt unter den Symbolen und faehrt hin und her */
.hellschieber .knauf{position:absolute;top:3px;left:3px;width:30px;height:28px;
  border-radius:99px;background:var(--surface-2);border:1px solid var(--line-strong);
  transition:transform .25s cubic-bezier(.4,1.3,.5,1),background .25s;z-index:1}
.hellschieber.an .knauf{transform:translateX(38px);background:#f2c14e;border-color:#f2c14e}
@media(prefers-reduced-motion:reduce){.hellschieber .knauf{transition:none}}

/* ============================================================
   Rechtstexte – Impressum, Datenschutz, AGB, Widerruf
   Schmale Spalte, weil Fließtext sonst zu breit läuft.
   ============================================================ */
.recht{max-width:760px}
.recht .stand{font-size:12.5px;color:var(--fg-dim);margin:12px 0 0}
.recht .lead{color:var(--fg-soft);font-size:15.5px;line-height:1.7;margin:12px 0 0}

/* Hinweis, dass die Texte noch juristisch zu prüfen sind */
.recht .pruefen{display:flex;gap:13px;align-items:flex-start;margin:var(--lg) 0 48px;
  padding:18px 20px;border:1px solid var(--red-fg);border-radius:var(--r);
  background:var(--red-tint)}
.recht .pruefen svg{width:19px;height:19px;flex:none;margin-top:1px;stroke:var(--red-fg);
  fill:none;stroke-width:1.9}
.recht .pruefen p{margin:0;font-size:13.5px;line-height:1.6;color:var(--fg-soft)}
.recht .pruefen strong{color:var(--red-fg)}

.recht section{margin-bottom:44px}
.recht h2{font-size:20px;margin:0 0 16px}
.recht p{margin:0 0 13px;font-size:14.5px;line-height:1.72;color:var(--fg-soft)}
.recht p:last-child{margin-bottom:0}
.recht strong{color:var(--fg);font-weight:600}
.recht a{color:var(--red-fg)}
.recht a:hover{text-decoration:underline}
.recht ul,.recht ol{margin:0 0 13px;padding-left:22px;display:grid;gap:8px}
.recht li{font-size:14.5px;line-height:1.7;color:var(--fg-soft)}

/* Zeilenweise Angaben: Bezeichnung links, Wert rechts */
.recht dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 22px}
@media(max-width:600px){.recht dl{grid-template-columns:1fr;gap:3px 0}
  .recht dd{margin-bottom:11px}}
.recht dt{font-size:14.5px;color:var(--fg);font-weight:600}
.recht dd{margin:0;font-size:14.5px;color:var(--fg-soft);line-height:1.6}

/* Noch einzutragende Angaben deutlich als Lücke kennzeichnen */
.recht .luecke{color:var(--fg-dim);font-style:italic;
  border-bottom:1px dashed var(--line-strong)}

/* Dasselbe für Preise: solange kein Verkaufspreis feststeht, wird nichts
   geschätzt, sondern die Lücke sichtbar gemacht. Erbt die Schriftgröße
   der Stelle, an der sie steht – auch dort, wo sonst 30px Preis stünde. */
.preisoffen{color:var(--fg-dim);font-style:italic;font-family:var(--body);
  font-size:.62em;font-weight:400;letter-spacing:0;white-space:nowrap;
  border-bottom:1px dashed var(--red-fg);padding-bottom:1px}

/* Muster-Widerrufsformular */
.recht .formular{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:28px 26px;margin-top:18px}
.recht .formular .titel{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:13px;margin-bottom:20px}
.recht .formular address{font-style:normal;padding-left:16px;
  border-left:2px solid var(--line-strong);font-size:14.5px;line-height:1.7;
  color:var(--fg-soft);margin:0 0 18px}
.recht .formular .zeile{font-size:14.5px;color:var(--fg-soft);margin:0 0 14px;
  line-height:1.9}
.recht .formular .fuss{font-size:12.5px;color:var(--fg-dim);margin:20px 0 0}

/* ============================================================
   Suche – Overlay über der Seite
   ============================================================ */
.suchbox{position:fixed;inset:0;z-index:120;display:none;
  background:color-mix(in srgb,var(--schatten) 88%,transparent);
  backdrop-filter:blur(4px);padding:14vh 20px 20px;overflow-y:auto}
.suchbox.offen{display:block}

.suchfeld{max-width:620px;margin:0 auto;display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:6px 8px 6px 16px;box-shadow:0 22px 60px rgba(0,0,0,.5)}
.suchfeld > svg{width:19px;height:19px;flex:none;stroke:var(--fg-dim);fill:none;
  stroke-width:1.8}
.suchfeld input{flex:1;min-width:0;background:none;border:0;color:var(--fg);
  font-family:var(--body);font-size:16px;padding:14px 0;outline:none}
.suchfeld input::placeholder{color:var(--fg-dim)}
.suchfeld input::-webkit-search-cancel-button{display:none}
.suchfeld button{width:38px;height:38px;flex:none;display:grid;place-items:center;
  background:none;border:0;border-radius:var(--r);color:var(--fg-dim);cursor:pointer;
  transition:.15s}
.suchfeld button:hover{background:var(--surface-2);color:var(--fg)}
.suchfeld button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}

.suchtreffer{max-width:620px;margin:10px auto 0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.4)}
.suchtreffer a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 18px;border-bottom:1px solid var(--line);transition:.15s}
.suchtreffer a:last-child{border-bottom:0}
.suchtreffer a:hover{background:var(--surface-2)}
.suchtreffer .t{font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  font-size:15px;color:var(--fg)}
.suchtreffer a:hover .t{color:var(--red-fg)}
.suchtreffer .u{font-size:12.5px;color:var(--fg-dim);text-align:right;flex:none}
.suchtreffer .leer{margin:0;padding:22px 18px;font-size:13.5px;color:var(--fg-dim)}
.suchtreffer .leer a{display:inline;padding:0;border:0;color:var(--red-fg);
  text-decoration:underline}

/* ============================================================
   Produktkarten – helle Karte unter dem Zeiger
   Vorbild sind die weissen Kaesten anderer Shops: die Karte, auf
   der man gerade steht, hebt sich aus der dunklen Flaeche heraus.
   Statt jede Farbe einzeln umzustellen, werden hier die Variablen
   der Karte neu gesetzt – alles darin (Schrift, Linien, Stueck-
   zahlen, Knoepfe) zieht dadurch von selbst mit.

   Der Ton ist reines Weiss; Schrift, Linien und Marker tragen das
   dunkle Gruen, kein Grau (Lea, 2026-09-11: "ich mag das beige nicht",
   "kein grau als farbe"). Davor waren Gruen, gebrochenes Weiss und
   zuletzt Sandbeige im Versuch. Die Werte gelten auf allen Seiten
   gleich; frueher stand eine eigene Fassung nur in index.html, das war
   eine Kopie, die auseinanderlaufen konnte.

   Gedaempfte Karten (derzeit nicht lieferbar) sind ausgenommen:
   sie sollen nicht ausgerechnet unter dem Zeiger wieder nach vorn
   treten.
   ============================================================ */
/* imblick setzt am Handy das Scrollen - dort gibt es kein Hover. */
.hellkarte:not(.gedaempft):hover,
.hellkarte:not(.gedaempft).imblick{
  --surface:#ffffff;
  --surface-2:rgba(28,95,60,.10);
  --bg-2:#ffffff;
  --fg:#101614;
  --fg-soft:#2f4a3c;
  --fg-dim:#3d6650;
  --line:rgba(28,95,60,.22);
  --line-strong:rgba(28,95,60,.45);
  /* Rot und Gruen muessen auf dem hellen Grund abdunkeln – dieselbe
     Regel wie in der hellen Ansicht, nur andersherum. Das Gruen der
     Stueckzahlen steht tiefer als der Kartengrund, sonst verschwaende
     die Zahl darin. */
  --red-fg:#a8231c;
  --red-tint:rgba(168,35,28,.11);
  --green-fg:#1c5f3c;
  --green-tint:rgba(28,95,60,.13);
  background:var(--surface);
  border-color:var(--line-strong);
  box-shadow:0 6px 0 -2px rgba(0,0,0,.34);
  /* Ueberschriften und Preise setzen keine eigene Farbe, sie erben sie.
     Vererbt wird der ausgerechnete Wert, nicht die Variable - deshalb
     muss die Karte die Schriftfarbe hier noch einmal ausdruecklich
     setzen, sonst bliebe die helle Schrift der dunklen Ansicht auf
     dem hellen Grund stehen. */
  color:var(--fg);
}


/* ------------------------------------------------------------
   Dieselbe helle Flaeche, aber fest statt nur unter dem Zeiger.
   Fuer den einen Block, der auf einer Seite der wichtigste ist -
   auf der Set-Seite der Kasten mit Bild, Name und Preis, im
   Konfigurator die Frage, auf der man gerade steht.

   Reines Weiss wie bei .hellkarte (seit 2026-09-11, vorher Sandbeige),
   Schrift und Linien in dunklem Gruen statt Grau.
   ------------------------------------------------------------ */
.hellflaeche{
  --surface:#ffffff;
  --surface-2:rgba(28,95,60,.10);
  --bg-2:#ffffff;
  --fg:#101614;
  --fg-soft:#2f4a3c;
  --fg-dim:#3d6650;
  --line:rgba(28,95,60,.22);
  --line-strong:rgba(28,95,60,.45);
  --red-fg:#a8231c;
  --red-tint:rgba(168,35,28,.11);
  --green-fg:#1c5f3c;
  --green-tint:rgba(28,95,60,.13);
  background:#ffffff;
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 8px 0 -3px rgba(0,0,0,.30);
}

/* Die Bildflaeche bleibt dunkel – ein Foto auf Weiss wirkt sonst
   ausgeschnitten, und die Etiketten darauf sind heller Schrift. */
.hellkarte:not(.gedaempft):hover .shot,
.hellkarte:not(.gedaempft):hover .vis,
.hellkarte:not(.gedaempft):hover .bild,
.hellkarte:not(.gedaempft).imblick .shot,
.hellkarte:not(.gedaempft).imblick .vis,
.hellkarte:not(.gedaempft).imblick .bild,
.hellflaeche .shot,
.hellflaeche .thumbs,
.hellflaeche .vis,
.hellflaeche .bild{
  --fg:#edf1ee;
  --fg-soft:#98a49e;
  --fg-dim:#6c7a73;
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.22);
  --red-fg:#f04455;
  color:var(--fg);
}

/* Der Umriss-Knopf ist auf hellem Grund sonst unsichtbar: seine
   Fuellung ist weisses Transparent. Deshalb bekommt er hier eine
   dunkle. */
.hellkarte:not(.gedaempft):hover .btn.ghost,
.hellkarte:not(.gedaempft).imblick .btn.ghost{background:rgba(28,95,60,.06)}
.hellkarte:not(.gedaempft):hover .btn.ghost:hover{background:rgba(28,95,60,.12);
  border-color:var(--fg-dim)}
.hellflaeche .btn.ghost{background:rgba(28,95,60,.05)}
.hellflaeche .btn.ghost:hover{background:rgba(28,95,60,.11);
  border-color:var(--fg-dim)}

/* ============================================================
   Bedienbarkeit
   ============================================================ */

/* Sichtbarer Fokus fuer die Tastatur. :focus-visible statt :focus –
   damit der Rahmen beim Tippen erscheint, aber nicht bei jedem
   Mausklick. Ohne das ist die Seite mit der Tabulatortaste nicht
   bedienbar, weil man nicht sieht, wo man gerade steht. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--red-fg);
  outline-offset:2px;
  border-radius:var(--r);
}

/* Sprungziele liegen sonst unter der klebenden Navigationsleiste. */
:target,[id]{scroll-margin-top:90px}

/* Sprunglink: liegt versteckt vor der Navigation und wird sichtbar,
   sobald jemand mit der Tabulatortaste hineinlaeuft. */
/* Unsichtbar, solange er keinen Fokus hat - ueber clip-path, nicht ueber
   eine Lage ausserhalb der Leiste: die wurde am Handy sichtbar, sobald
   die Leiste nicht ganz oben stand. */
.sprunglink{position:absolute;left:14px;top:12px;z-index:100;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;
  background:var(--red);color:#fff;font-family:var(--disp);font-weight:600;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;padding:12px 18px;
  border-radius:var(--r)}
.sprunglink:focus{clip-path:none;width:auto;height:auto;overflow:visible}
main:focus{outline:none}


/* ---------- Gebrauchte Geraete ----------
   Mini-PC und Monitor kaufen wir gebraucht zu. Das Wort steht direkt
   hinter der Position statt im Kleingedruckten - wer es uebersieht,
   kauft etwas anderes, als er glaubt. Bewusst weder rot noch gruen: es
   ist keine Warnung und kein Versprechen, sondern eine Angabe. */
.gebrauchtmarke{display:inline-block;margin-left:8px;padding:2px 7px;
  border:1px solid var(--line-strong);border-radius:0;
  font-family:var(--body);font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-soft);background:var(--surface-2);
  vertical-align:1px;white-space:nowrap}

/* ---------- Vorstart-Modus ----------
   Band unter der Navigation und der Mail-Link neben den gesperrten
   Kaufknoepfen. Siehe VORSTART in site.js. */
.vorstartband{background:var(--red);color:#fff;font-size:14px;line-height:1.5}
.vorstartband .innen{max-width:var(--container);margin:0 auto;padding:10px var(--margin-desktop)}
@media(max-width:760px){.vorstartband .innen{padding:9px var(--margin-mobile);font-size:13px}}
.vorstartband b{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;margin-right:6px}
.vorstartband a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  font-weight:600;white-space:nowrap}
.vorstartband a:hover{text-decoration-thickness:2px}
/* Gesperrter Kaufknopf: kein Zeiger, keine Hoverfarbe. */
html.vorstart .btn.aus{cursor:default;color:var(--fg-dim);border-color:var(--line)}
html.vorstart .btn.aus:hover{background:none;border-color:var(--line);transform:none}
.btn.erinnern{margin-top:8px}