/* Rink Masters Shop – die Designsprache der Marke:
   warmes Schwarz, Creme #f7ead7, Taupe #a48a7b, Outfit + Sen. */
@font-face { font-family: 'Outfit'; src: url('/fonts/outfit.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Sen'; src: url('/fonts/sen.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }

:root {
  --schwarz: #111111;
  --creme: #f7ead7;
  --papier: #faf6ee;
  --taupe: #a48a7b;
  --linie: #e5dcc8;
  --text: #111111;
  --leise: #6d6557;
  /* Zonen = Kopf, Fusszeile, Laufband, Handy-Menü */
  --zone: #111111;
  --zone-text: #f7ead7;
  --zone-leise: rgba(247, 234, 215, .65);
  --zone-rand: rgba(247, 234, 215, .45);
  --zone-rand-fein: rgba(247, 234, 215, .18);
  --zone-hover: rgba(247, 234, 215, .13);
}
/* Hellmodus: dieselben Zonen in Hell mit dunkler Schrift */
html[data-modus="hell"] {
  --zone: #f2ead9;
  --zone-text: #111111;
  --zone-leise: rgba(17, 17, 17, .62);
  --zone-rand: rgba(17, 17, 17, .35);
  --zone-rand-fein: rgba(17, 17, 17, .14);
  --zone-hover: rgba(17, 17, 17, .10);
}

* { box-sizing: border-box; }
/* «hidden» heisst versteckt – auch wenn ein display:grid/flex dranhängt */
[hidden] { display: none !important; }
/* iOS bläht sonst einzelne Textstücke eigenmächtig auf – sichtbar als
   ungleich grosse Wörter im Laufband. Die Schriftgrössen bestimmen wir. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; font-family: 'Outfit', sans-serif; font-size: 17px; line-height: 1.6;
  color: var(--text); background: var(--papier);
}
h1, h2, h3 { font-family: 'Sen', sans-serif; letter-spacing: -.02em; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ------------------------------------------------------------- Kopf */
.kopf {
  display: flex; align-items: center; gap: 26px;
  background: var(--zone); color: var(--zone-text);
  padding: 14px 5vw; position: sticky; top: 0; z-index: 50;
}
.hauptnav { display: flex; flex: 1; justify-content: space-evenly; align-items: center; margin: 0 8px; }
.menue-punkt { position: relative; }
.menue-punkt.breit { position: static; }
.menue-titel { display: inline-block; padding: 10px 14px; font-weight: 500; opacity: .9; border-radius: 4px 4px 0 0; }
.pfeil { font-size: 10px; opacity: .7; }
@media (hover: hover) and (min-width: 761px) {
  /* Klar erkennbar, ohne die halbe Leiste einzufärben: ein leichter
     Schleier und ein kräftiger Balken an der Unterkante, der zum
     Klappmenü überleitet. Beide Farben folgen dem Hell-/Dunkelmodus. */
  .menue-punkt { transition: background .15s; }
  .menue-punkt:hover, .menue-punkt.auf {
    background: var(--zone-hover);
    box-shadow: inset 0 -4px 0 var(--zone-text);
  }
  .menue-punkt:hover .menue-titel, .menue-punkt.auf .menue-titel {
    color: var(--zone-text); opacity: 1;
  }
  .menue-punkt:hover .pfeil { opacity: 1; }
}
/* Nur in der Desktop-Leiste: die Menüpunkte füllen die ganze Kopfhöhe,
   sonst verliert die Maus auf dem Weg zum Klappmenü den Kontakt.
   Im Schubladen-Menü bleibt alles untereinander. */
@media (min-width: 1151px) {
  .hauptnav { align-self: stretch; align-items: stretch; margin-top: -14px; margin-bottom: -14px; }
  .menue-punkt { display: flex; align-items: center; }
}
.klapp {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  background: var(--creme); color: var(--schwarz);
  min-width: 250px; padding: 16px 20px;
  border-radius: 0 6px 6px 6px; box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
@media (hover: hover) and (min-width: 761px) {
  .menue-punkt:hover .klapp { display: block; }
}
/* Beim breiten Menü liegt das Panel unter dem ganzen Kopfbalken – der
   unsichtbare Streifen überbrückt den Weg dorthin, sonst klappt es zu. */
@media (hover: hover) and (min-width: 761px) {
  .klapp-breit::before {
    content: ''; position: absolute; left: 0; right: 0; top: -34px; height: 34px;
  }
}
.klapp a { display: block; padding: 5px 0; font-weight: 400; font-size: 16.5px; color: #3a352c; }
.klapp a:hover { text-decoration: underline; }
.klapp-breit { left: 0; right: 0; border-radius: 0; padding: 34px 8vw 38px; margin-top: 0; }
@media (hover: hover) and (min-width: 761px) {
  .menue-punkt.breit:hover .klapp-breit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
}
.klapp-ueberschrift {
  font-family: 'Sen', sans-serif; font-weight: 800; font-size: 18px; color: var(--schwarz);
  border-bottom: 2px solid var(--schwarz); padding-bottom: 8px; margin-bottom: 12px;
}
.klapp-spalte > a:not(.klapp-ueberschrift) { font-weight: 400; }
.klapp-spalte > a:not(.klapp-ueberschrift):hover { color: var(--schwarz); }
.kopf-symbol { display: flex; align-items: center; gap: 7px; padding: 6px 8px; position: relative; font-weight: 500; }
.korb-anzahl {
  position: absolute; top: -2px; right: -6px;
  background: var(--zone-text); color: var(--zone);
  font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 6px;
}
.burger { display: none; background: none; border: 0; color: var(--zone-text); font-size: 22px; }

/* ------------------------------------------------------------- Held */
.held { background: var(--schwarz); }

/* ------------------------------------------------------------ Inhalt */
main { min-height: 60vh; }
.abschnitt { padding: 48px 5vw; max-width: 1240px; margin: 0 auto; }
.abschnitt.schmal { max-width: 860px; }
.abschnitt h1 { font-size: clamp(28px, 3.6vw, 40px); margin-top: 0; }

.knopf {
  display: inline-block; background: var(--creme); color: var(--schwarz);
  border: 1px solid #e2d0b2; border-radius: 4px; padding: 13px 26px;
  font-weight: 600; font-size: 16px; cursor: pointer; transition: .15s;
}
.knopf:hover { background: #efe0c6; }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf.ghost { background: transparent; border-color: var(--taupe); }
.held .knopf, .kopf .knopf { border-color: var(--zone-rand); }

.filterzeile { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; }
.filter { border: 1px solid var(--linie); border-radius: 99px; padding: 6px 16px; font-size: 15px; background: #fff; }
.filter.aktiv { background: var(--schwarz); color: var(--creme); border-color: var(--schwarz); }

/* ------------------------------------------------------------- Raster */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.karte { background: #fff; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; transition: .15s; display: flex; flex-direction: column; }
.karte:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(80,65,45,.14); }
.karte-bild { aspect-ratio: 1; background: #f2ecdf; position: relative; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.ausverkauft {
  position: absolute; top: 10px; left: 10px;
  background: var(--schwarz); color: var(--creme);
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 4px;
}
.karte h3 { margin: 12px 16px 2px; font-size: 17px; }
.karte .preis { margin: 0 16px 14px; color: var(--leise); font-weight: 600; }

/* ------------------------------------------------------- Produktseite */
.produkt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
.produkt-galerie img#hauptbild { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--linie); background: #fff; }
.mini-bilder { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mini-bilder img { width: 74px; height: 74px; object-fit: cover; border-radius: 4px; border: 2px solid transparent; cursor: pointer; background: #fff; }
.mini-bilder img.aktiv { border-color: var(--schwarz); }
.produkt-info h1 { margin-bottom: 6px; }
.produkt-info .preis { font-size: 24px; font-weight: 700; font-family: 'Sen', sans-serif; margin: 0 0 10px; }
.attribut { display: block; margin: 14px 0; }
.attribut span { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 5px; }
.attribut select {
  width: 100%; max-width: 340px; font: inherit; padding: 11px 12px;
  border: 1px solid var(--taupe); border-radius: 4px; background: #fff; color: var(--text);
}
#inKorb { margin-top: 14px; }
.lang { margin-top: 30px; border-top: 1px solid var(--linie); padding-top: 18px; color: #2c2822; }
.leise { color: var(--leise); }
.mitte { text-align: center; }

/* --------------------------------------------------------- Warenkorb */
.korb-zeile { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--linie); border-radius: 6px; padding: 12px 16px; margin-bottom: 12px; }
.korb-zeile img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.korb-zeile .wachsen { flex: 1; }
.korb-zeile .menge { display: flex; align-items: center; gap: 8px; }
.korb-zeile .menge button { width: 30px; height: 30px; border: 1px solid var(--taupe); background: #fff; border-radius: 4px; font-size: 16px; cursor: pointer; }
.korb-total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; font-family: 'Sen', sans-serif; padding: 18px 4px; }
.kasse-zeile { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------- Fuss */
.fuss { background: var(--zone); color: var(--zone-text); padding: 44px 5vw 26px; margin-top: 60px; }
.fuss a { display: block; opacity: .85; padding: 3px 0; }
.fuss a:hover { opacity: 1; text-decoration: underline; }
.fuss h3 { font-size: 16px; }
.fuss-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 24px; max-width: 1240px; margin: 0 auto 26px; }
.fuss .leise { color: var(--zone-leise); }

/* ---------------------------------------- Mobil und Tablet (Menü) */
/* Bis 1150 px reicht die Breite für die volle Menüleiste nicht – dort
   übernimmt das Schubladen-Menü, damit nichts überläuft. */
@media (max-width: 1150px) {
  /* Drawer: fährt von rechts herein, Schleier dahinter */
  .hauptnav {
    display: flex; flex-direction: column; position: fixed;
    top: 0; right: 0; bottom: 0; width: min(84vw, 360px);
    background: var(--schwarz); z-index: 90;
    padding: 60px 26px 30px; gap: 2px; overflow-y: auto;
    transform: translateX(105%); transition: transform .28s ease;
    box-shadow: -20px 0 50px rgba(0,0,0,.35);
  }
  .hauptnav.offen { transform: translateX(0); }
  /* Ein sichtbares Kreuz in der Schublade. Der Burger liegt darunter und
     ist damit nicht mehr antippbar – ohne dieses Kreuz sieht man keinen
     Weg zurueck, selbst wenn ein Tipp daneben ihn schliessen wuerde. */
  .drawer-zu {
    position: absolute; top: 14px; right: 18px;
    background: none; border: 0; cursor: pointer;
    color: var(--zone-text); font-size: 26px; line-height: 1;
    padding: 6px 10px; border-radius: 6px;
  }
  .drawer-zu:hover, .drawer-zu:focus-visible { background: rgba(247,234,215,.14); }
  .drawer-zu:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }
  .nav-schleier {
    position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80;
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .nav-schleier.an { opacity: 1; pointer-events: auto; }
  .kein-scroll { overflow: hidden; }
  .hauptnav .menue-punkt.breit { position: relative; }
  .hauptnav .klapp { display: none; }
  .hauptnav .menue-punkt.auf .klapp,
  .hauptnav .menue-punkt.breit.auf .klapp-breit {
    display: block; position: static; background: transparent; color: var(--creme);
    box-shadow: none; padding: 0 0 10px 16px; min-width: 0;
  }
  .hauptnav .pfeil { float: right; transition: transform .2s; }
  .hauptnav .menue-punkt.auf .pfeil { transform: rotate(180deg); }
  .hauptnav .klapp a { color: var(--zone-text); opacity: .85; padding: 6px 0; }
  .hauptnav .klapp-ueberschrift { color: var(--zone-text); margin-top: 8px; }
  .hauptnav .menue-titel { padding: 10px 0; font-size: 18px; }
  .hauptnav .menue-punkt:hover .menue-titel { background: transparent; color: var(--zone-text); }
  .burger { display: block; margin-left: 0; }
  .kopf-symbol span { display: none; }
  .kopf-symbol.konto-link { margin-left: auto; }
}
@media (max-width: 760px) {
  .produkt { grid-template-columns: 1fr; gap: 26px; }
  .held { min-height: 380px; }
}

/* ---------------------------------------------------- Admin und Konto */
.admin-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.admin-form { max-width: 560px; }
.admin-form.breit { max-width: 760px; }
.feld { display: block; margin: 13px 0; }
.feld span { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 5px; }
.feld input, .feld textarea, .feld select {
  width: 100%; font: inherit; padding: 11px 12px;
  border: 1px solid var(--taupe); border-radius: 4px; background: #fff; color: var(--text);
}
.fehler { background: #fbeae7; border: 1px solid #e0b0a6; color: #8c2f1f; border-radius: 4px; padding: 10px 14px; }
.unterstrichen { text-decoration: underline; }
.tabelle { overflow-x: auto; background: #fff; border: 1px solid var(--linie); border-radius: 6px; }
.tabelle table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tabelle th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); padding: 10px 14px; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: 10px 14px; border-bottom: 1px solid var(--linie); }
/* Ausführungen: pro Variante eine Karte – oben die Merkmale als Chips,
   darunter Preis, Bestand und Verfügbarkeit. */
.var-liste { display: flex; flex-direction: column; gap: 10px; }
.var-karte {
  background: #fff; border: 1px solid var(--linie); border-radius: 10px;
  padding: 14px 16px; margin: 0;
}
.var-werte { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.var-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 999px;
  padding: 4px 12px; font-size: 14.5px; font-weight: 600;
}
.var-chip-name { font-size: 12px; font-weight: 500; color: var(--leise); text-transform: uppercase; letter-spacing: .03em; }
.var-steuer { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.var-feld { display: flex; flex-direction: column; gap: 4px; }
.var-feld > span { font-size: 12px; font-weight: 600; color: var(--leise); }
.var-feld input, .var-feld select {
  font: inherit; font-size: 15px; padding: 8px 10px; width: 130px;
  border: 1px solid var(--linie); border-radius: 6px; background: #fff; color: var(--text);
}
.var-feld input:focus, .var-feld select:focus { outline: none; border-color: var(--taupe); }
.var-steuer .knopfzelle { margin-left: auto; }

/* Filterleiste über den Ausführungen */
.var-filter {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  background: var(--creme); border: 1px solid var(--linie);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.var-filter .knopf { margin-bottom: 1px; }
.var-treffer { margin-left: auto; font-size: 14px; color: var(--leise); align-self: center; }

/* Haken beim Wareneingang */
.var-haken {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--leise);
  border-left: 1px solid var(--linie); padding-left: 14px; margin-left: 4px;
}
.var-haken input { width: 20px; height: 20px; accent-color: var(--schwarz); cursor: pointer; }
.var-karte.geprueft { border-color: var(--taupe); background: #fcfaf5; }
.var-karte.geprueft .var-haken { color: var(--schwarz); }
@media (max-width: 560px) {
  .var-haken { border-left: 0; padding-left: 0; margin-left: 0; width: 100%; }
  .var-treffer { margin-left: 0; width: 100%; }
}

/* Merkmale: eine Karte je Merkmal mit seinen Optionen */
.merkmal-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.merkmal-karte {
  background: #fff; border: 1px solid var(--linie);
  border-radius: 10px; padding: 14px 16px;
}
.merkmal-karte > strong { display: block; margin-bottom: 8px; }
.merkmal-karte .var-werte { margin-bottom: 10px; }
.chip-weg {
  border: 0; background: none; cursor: pointer; color: var(--leise);
  font-size: 13px; line-height: 1; padding: 0 0 0 4px;
}
.chip-weg:hover { color: var(--schwarz); }
.merkmal-zugabe, .merkmal-neu { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.merkmal-neu { margin-top: 14px; }
.merkmal-zugabe input, .merkmal-neu input {
  flex: 1 1 150px; font: inherit; font-size: 15px; padding: 8px 10px;
  border: 1px solid var(--linie); border-radius: 6px; background: #fff; color: var(--text);
}
.merkmal-zugabe input:focus, .merkmal-neu input:focus { outline: none; border-color: var(--taupe); }

/* Neue Ausführung: ein Auswahlfeld je Merkmal */
.var-neu-box {
  background: var(--creme); border: 1px solid var(--linie);
  border-radius: 10px; padding: 20px 22px 24px; margin-top: 22px;
}
.var-neu-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 16px; }
.var-neu-box .feld { margin: 8px 0; }
@media (max-width: 560px) {
  .var-steuer .knopfzelle { margin-left: 0; width: 100%; }
  .var-feld input, .var-feld select { width: 100%; }
  .var-feld { flex: 1 1 120px; }
}
input.klein { width: 90px; font: inherit; padding: 8px; border: 1px solid var(--taupe); border-radius: 4px; }
.knopf.klein { padding: 8px 14px; font-size: 14px; }
.knopfzelle { display: flex; gap: 8px; }
.bild-reihe { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.bild-kachel { position: relative; }
.bild-kachel img { width: 84px; height: 84px; object-fit: cover; border-radius: 4px; border: 1px solid var(--linie); background: #fff; }
.bild-kachel button { position: absolute; top: -6px; right: -6px; border: 0; background: var(--schwarz); color: var(--creme); border-radius: 99px; width: 22px; height: 22px; cursor: pointer; font-size: 11px; }

/* ----------------------------------------------------- Inhaltsseiten */
.inhaltsseite img { border-radius: 6px; margin: 10px 0; height: auto; }
.inhaltsseite h2 { margin-top: 34px; }
.inhaltsseite h3 { margin-top: 26px; }
.inhaltsseite table { border-collapse: collapse; width: 100%; background: #fff; }
.inhaltsseite td, .inhaltsseite th { border: 1px solid var(--linie); padding: 8px 12px; text-align: left; }
.inhaltsseite a { text-decoration: underline; text-underline-offset: 2px; }
.inhaltsseite ul, .inhaltsseite ol { padding-left: 22px; }

/* Fusszeile: Wabe und Newsletter wie auf der Webseite */
.fuss-wabe { margin-top: 18px; opacity: .9; filter: brightness(1.4); }
/* Feld über dem Knopf – in der schmalen Spalte bleibt beides sauber */
.newsletter { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.newsletter input {
  width: 100%; font: inherit; padding: 11px 2px;
  background: transparent; border: 0; border-bottom: 1px solid var(--zone-rand);
  color: var(--zone-text);
}
.newsletter input:focus { outline: none; border-bottom-color: var(--zone-text); }
.newsletter input::placeholder { color: var(--zone-leise); }
.newsletter .knopf { padding: 11px 20px; }
.sozial { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.sozial a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--zone-rand); border-radius: 6px;
  font-weight: 700; font-size: 16px;
}
.sozial a:hover { background: var(--zone-text); color: var(--zone); text-decoration: none; opacity: 1; }

/* --------------------------------------------------- Startvideo im Held */
.held-video { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; }

/* ------------------------------------------------- Upload-Zone Kontakt */
.upload-zone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px dashed var(--taupe); border-radius: 8px;
  background: #fff; padding: 26px 18px; margin: 16px 0;
  text-align: center; cursor: pointer; transition: .15s;
}
.upload-zone:hover, .upload-zone.drueber { border-color: var(--schwarz); background: var(--creme); }
.upload-zone svg { color: var(--taupe); }
.erfolg { background: #e8f3ec; border: 1px solid #a8cdb6; color: #1c5c38; border-radius: 6px; padding: 12px 16px; margin: 0 0 16px; }
/* Fuer Zustaende, die weder gut noch schlecht sind, aber Aufmerksamkeit
   verdienen – etwa «der Shop laeuft noch im Testmodus». */
.hinweis { background: #fbf1e0; border: 1px solid #ddc189; color: #7a5410; border-radius: 6px; padding: 12px 16px; margin: 0 0 16px; }

/* ------------------------------------- Bilder nebeneinander (Inhalte) */
.bilder-reihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; align-items: start; margin: 14px 0;
}
.bilder-reihe img { width: 100%; height: auto; margin: 0; }

/* ------------------------------------------------ Startseiten-Kacheln */
.mitte-titel h2.gross {
  text-align: center; font-size: clamp(26px, 3.4vw, 40px); margin: 6px 0 34px;
}
.kacheln .karte { text-align: center; padding-bottom: 18px; }
.kacheln .karte h3 { font-size: 20px; }
.karte-knopf { margin: 4px auto 0; padding: 10px 22px; font-size: 15px; }

/* -------------------------------------------------------- Konto-Details */
.konto-details { background: #fff; border: 1px solid var(--linie); border-radius: 6px; padding: 14px 18px; margin-top: 10px; }
.konto-details summary { cursor: pointer; font-weight: 600; }
.bild-karte { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
.bild-karte figcaption { font-family: 'Sen', sans-serif; font-weight: 700; padding: 10px 14px 6px; font-size: 17px; }
.bild-karte img { width: 100%; height: auto; display: block; margin: 0; }
.team-box { background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 22px 24px; }

/* ------------------------------------------ Schmaler Desktop (Menü) */
@media (min-width: 1151px) and (max-width: 1400px) {
  .menue-punkt.breit:hover .klapp-breit { grid-template-columns: repeat(2, 1fr); }
  /* Platz für die Menüpunkte schaffen: Kontoname weg, engere Abstände */
  .kopf { gap: 18px; }
  .kopf-symbol span { display: none; }
}

/* Logo im Kopf – gross wie auf der Webseite, nie gestaucht */
.logo { flex: 0 0 auto; }
.logo img { height: 104px; width: auto; display: block; }
@media (max-width: 760px) {
  /* Viele Kopf-Elemente auf wenig Breite: engere Abstände und das
     Sprachkürzel weglassen – so bleibt Platz für ein grosses Logo */
  .kopf { gap: 6px; padding-top: 12px; padding-bottom: 12px; }
  .logo img { height: 90px; }
  .sprach-wahl .pfeil { display: none; }
  .kopf-symbol { padding: 6px 3px; }
  .kopf-symbol.konto-link { margin-left: auto; }
  .sprach-wahl summary { padding: 8px 2px; gap: 2px; }
  .sprach-code { display: none; }
  .modus-knopf { padding: 8px 2px; }
  .burger { margin-left: 0; }
}

/* Startseiten-Kacheln: über die volle Breite verteilt wie auf der Webseite */
.abschnitt.mitte-titel { max-width: 1460px; }
.raster.kacheln {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3.2vw, 48px);
}
@media (max-width: 1020px) { .raster.kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .raster.kacheln { grid-template-columns: 1fr; } }

/* ------------------------------- «Where Passion»-Block wie im Original */
.passion { display: grid; grid-template-columns: 1fr 1fr; background: var(--creme); }
.passion-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.passion-text { padding: clamp(28px, 5vw, 72px); }
.passion-text h2 { font-size: clamp(26px, 3vw, 40px); margin-top: 0; }
.passion-text h3 { margin-top: 30px; }
.passion-text p { font-size: 17.5px; }
@media (max-width: 860px) { .passion { grid-template-columns: 1fr; } .passion-bild img { max-height: 46vh; } }

/* ------------------------ Produktseite: Zusatzinfo und Bild-Zoom */
.zusatz-tabelle { background: #fff; border: 1px solid var(--linie); border-radius: 6px; overflow-x: auto; }
.zusatz-tabelle table { width: 100%; border-collapse: collapse; }
.zusatz-tabelle th {
  text-align: left; width: 240px; vertical-align: top;
  background: rgba(164,138,123,.14); font-weight: 600;
  padding: 13px 16px; border-bottom: 1px solid var(--linie);
}
.zusatz-tabelle td { padding: 13px 16px; border-bottom: 1px solid var(--linie); }
.zusatz-tabelle tr:last-child th, .zusatz-tabelle tr:last-child td { border-bottom: 0; }

.zoom-rahmen {
  overflow: hidden; border-radius: 6px; border: 1px solid var(--linie);
  background: #fff; aspect-ratio: 1; cursor: zoom-in;
}
.zoom-rahmen img#hauptbild {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border: 0; border-radius: 0; transition: transform .35s ease;
}
.zoom-rahmen:hover img#hauptbild { transform: scale(1.8); }

/* Hochformatige Abbildungen (Grip) kompakt halten */
.bild-karte img { max-height: 400px; object-fit: contain; background: #fff; }
.bild-karte figcaption { text-align: center; }

/* Einzelne grosse Fotos auf Inhaltsseiten gezähmt und zentriert */
.inhaltsseite span > img, .inhaltsseite div > img {
  display: block; max-height: 62vh; width: auto; max-width: 100%; margin: 14px auto;
}
.bilder-reihe img { max-height: none; width: 100%; margin: 0; }
.bild-karte img { max-height: 400px; }

/* Titelband mit dem Puck-Bild – wie auf den Unterseiten der Webseite */
.titelband {
  background: #111 url('/img/titelband.png') right center / cover no-repeat;
}
.titelband-inhalt { max-width: 1240px; margin: 0 auto; padding: clamp(44px, 7vw, 96px) 5vw; }
.titelband h1 {
  color: var(--creme); font-size: clamp(30px, 4vw, 52px); margin: 0 0 14px;
}
.titelband-strich { display: block; width: 170px; height: 4px; background: var(--creme); }

/* Die Hover-Brücke ist nur für die Maus gedacht – auf Touch-Geräten
   würde der unsichtbare Streifen Tipper auf die Zeile darüber schlucken. */
@media (max-width: 760px), (hover: none) {
  .klapp-breit::before { content: none; }
  .klapp::before { content: none; }
}

/* iPad und andere Touch-Geräte mit Desktop-Breite: die Klappmenüs
   öffnen per Tipp (das Skript setzt .auf) – Hover gibt es dort nicht. */
@media (hover: none) and (min-width: 761px) {
  .menue-punkt.auf .menue-titel { background: var(--creme); color: var(--schwarz); opacity: 1; }
  .menue-punkt.auf .klapp { display: block; }
  .menue-punkt.breit.auf .klapp-breit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
}
@media (hover: none) and (min-width: 761px) and (max-width: 1120px) {
  .menue-punkt.breit.auf .klapp-breit { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------- Kundenkonto mit Reitern */
.konto-raster { display: grid; grid-template-columns: 235px 1fr; gap: 30px; align-items: start; }
.konto-nav {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden;
}
.konto-nav a, .konto-nav button {
  display: block; width: 100%; text-align: left; font: inherit; font-weight: 500;
  padding: 13px 18px; border: 0; border-bottom: 1px solid var(--linie);
  background: none; cursor: pointer; color: var(--text);
}
.konto-nav a:last-of-type { border-bottom: 1px solid var(--linie); }
.konto-nav a.aktiv { background: var(--creme); font-weight: 700; }
.konto-nav a:hover { background: var(--papier); }
.konto-nav form { margin: 0; }
.konto-nav button { color: #8a4a3a; border-bottom: 0; }
.konto-inhalt {
  background: #fff; border: 1px solid var(--linie); border-radius: 6px;
  padding: 26px 30px 34px; min-height: 320px;
}
.konto-inhalt h2 { margin-top: 0; }
.konto-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 20px; }
.konto-kacheln a {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 6px;
  padding: 18px; display: flex; flex-direction: column; gap: 3px;
}
.konto-kacheln a:hover { border-color: var(--taupe); }
.konto-kacheln strong { font-family: 'Sen', sans-serif; font-size: 22px; }
.konto-kacheln span { color: var(--leise); font-size: 15px; }
@media (max-width: 860px) {
  .konto-raster { grid-template-columns: 1fr; }
  /* Alle Reiter auf einen Blick: umbrechende Pillen statt Wischleiste */
  .konto-nav {
    flex-direction: row; flex-wrap: wrap; gap: 8px;
    background: none; border: 0; border-radius: 0; overflow: visible;
  }
  .konto-nav a, .konto-nav button {
    width: auto; white-space: nowrap; font-size: 15px;
    padding: 9px 15px; background: #fff;
    border: 1px solid var(--linie); border-radius: 999px;
  }
  .konto-nav a:last-of-type { border-bottom: 1px solid var(--linie); }
  .konto-nav a.aktiv { background: var(--schwarz); color: var(--creme); border-color: var(--schwarz); }
}

/* Menüschrift oben grösser – der Balken ist durch das Logo höher geworden */
.menue-titel { font-size: 19px; }
.kopf-symbol { font-size: 17px; }

.attribut input {
  width: 100%; max-width: 340px; font: inherit; padding: 11px 12px;
  border: 1px solid var(--taupe); border-radius: 4px; background: #fff; color: var(--text);
}

/* Im Schubladen-Menü zeigt «Produkte» nur die Bereiche – nicht jedes Produkt */
@media (max-width: 1150px) {
  .hauptnav .klapp-spalte > a:not(.klapp-ueberschrift) { display: none; }
  .hauptnav .klapp-ueberschrift {
    border-bottom: 0; padding: 9px 0; margin: 0; font-size: 17px;
  }
}

/* Mengenwahl auf der Produktseite */
.menge-wahl { display: inline-flex; align-items: center; gap: 0; margin: 6px 0 0; }
.menge-wahl button {
  width: 42px; height: 46px; font-size: 20px; cursor: pointer;
  background: #fff; border: 1px solid var(--taupe); color: var(--text);
}
.menge-wahl button:first-child { border-radius: 4px 0 0 4px; }
.menge-wahl button:last-child { border-radius: 0 4px 4px 0; }
.menge-wahl input {
  width: 64px; height: 46px; text-align: center; font: inherit;
  border: 1px solid var(--taupe); border-left: 0; border-right: 0;
  -moz-appearance: textfield;
}
.menge-wahl input::-webkit-outer-spin-button, .menge-wahl input::-webkit-inner-spin-button { -webkit-appearance: none; }
#inKorb { display: block; margin-top: 14px; }

/* Klickbare Bild-Kacheln: Titel über dem Bild, mind. 4 pro Reihe am Desktop */
.bilder-reihe { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
a.bild-karte { display: flex; flex-direction: column; transition: .15s; }
a.bild-karte:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(80,65,45,.16); text-decoration: none; }
a.bild-karte figcaption { text-decoration: none; }
@media (max-width: 560px) { .bilder-reihe { grid-template-columns: repeat(2, 1fr); } }

/* Der Schleier gehoert zur Schublade und muss ueberall dort sein, wo sie
   auftaucht – also bis 1150 px. Stand frueher auf 761 px, waehrend die
   Schublade schon bis 1150 px ging: Auf dem iPad im Hochformat oeffnete
   sich das Menue dann ohne Ausweg. Der Burger liegt darunter, der Schleier
   fehlte, und man kam nur noch weiter, indem man irgendwohin navigierte. */
@media (min-width: 1151px) {
  .nav-schleier { display: none !important; }
  .drawer-zu { display: none; }
}

/* ----------------------------------------------------------- Sprachwahl */
/* Als <details>, damit sie mit Maus UND Touch überall funktioniert.
   Die Flagge zeigt die aktive Sprache – am Handy steht sie allein. */
.sprach-wahl { position: relative; }
.sprach-wahl summary {
  list-style: none; display: flex; align-items: center; gap: 7px;
  cursor: pointer; padding: 8px 10px;
  font-weight: 600; font-size: 15px; letter-spacing: .06em; opacity: .9;
}
.sprach-wahl summary::-webkit-details-marker { display: none; }
.sprach-wahl summary:hover { opacity: 1; }
.flagge {
  width: 19px; height: 19px; border-radius: 50%; display: block; flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--zone-rand);
}
.sprach-menue {
  position: absolute; top: 100%; right: 0; z-index: 70;
  background: var(--creme); color: var(--schwarz);
  min-width: 170px; padding: 8px; border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
.sprach-menue a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 4px; font-size: 15.5px;
}
.sprach-menue a .flagge { box-shadow: 0 0 0 1px rgba(17, 17, 17, .15); }
.sprach-menue a:hover { background: rgba(17, 17, 17, .08); }
.sprach-menue a.aktiv { font-weight: 700; background: rgba(17, 17, 17, .06); }
@media (max-width: 760px) {
  /* Am Handy: nur die Flagge, rechts vom Warenkorb */
  .sprach-wahl summary { padding: 8px 6px; gap: 4px; }
  .sprach-code { display: none; }
  .sprach-wahl .pfeil { font-size: 9px; }
}

/* --------------------------- Stick Guide als Fensterchen (Produktseite) */
/* Der kleine «?»-Knopf neben einer Auswahl */
.guide-hilfe {
  display: inline-grid; place-items: center;
  width: 21px; height: 21px; margin-left: 7px; vertical-align: -4px;
  border: 1.5px solid var(--taupe); border-radius: 999px;
  background: #fff; color: var(--taupe);
  font-size: 12.5px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: .15s;
}
.guide-hilfe:hover { background: var(--taupe); color: #fff; }
/* Der geklickte Knopf pulsiert, solange das Fenster offen ist – dezent
   unter dem Schleier, damit er nie durchs Fenster durchdrückt */
.guide-hilfe.aktiv {
  background: var(--taupe); color: #fff; border-color: var(--taupe);
  animation: hilfe-puls 1.5s ease-out infinite;
}
@keyframes hilfe-puls {
  0% { box-shadow: 0 0 0 0 rgba(164, 138, 123, .6); }
  100% { box-shadow: 0 0 0 13px rgba(164, 138, 123, 0); }
}

/* Das Fenster liegt über der Seite – der Hintergrund bleibt sichtbar */
.fenster-schleier {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(17, 17, 17, .48);
  display: grid; place-items: center; padding: 3.5vh 4vw;
  opacity: 0; transition: opacity .18s ease;
  /* Unsichtbar darf der Schleier keine Tipps schlucken – sonst ist die
     Seite nach dem ersten Schliessen blockiert */
  pointer-events: none;
}
.fenster-schleier.an { opacity: 1; pointer-events: auto; }
.fenster-schleier[hidden] { display: none; }
.fenster {
  width: min(780px, 100%); height: min(80vh, 100%);
  background: var(--papier); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  /* Wächst sichtbar aus dem geklickten «?»-Knopf heraus (Ursprung setzt
     das Skript) – so ist klar: ein Fenster geht auf, die Seite bleibt */
  transform: scale(.22); opacity: 0;
  transition: transform .3s cubic-bezier(.3, 1.18, .4, 1), opacity .2s ease;
}
.fenster-schleier.an .fenster { transform: none; opacity: 1; }
.fenster-kopf {
  display: flex; align-items: center; gap: 10px;
  background: var(--schwarz); color: var(--creme);
  padding: 10px 10px 10px 18px;
}
.fenster-kopf strong { font-family: 'Sen', sans-serif; letter-spacing: .05em; font-size: 15px; }
.fenster-zu { margin-left: auto; background: none; border: 0; color: var(--creme); font-size: 17px; cursor: pointer; padding: 6px 10px; }
.fenster iframe { border: 0; width: 100%; flex: 1; background: var(--papier); }
/* Am Handy ist das Fenster ein schwebendes Kärtchen, das sich von unten
   hochschiebt – rundum bleibt die Produktseite sichtbar, damit klar ist:
   ein Fensterchen liegt über der Seite, kein Seitenwechsel */
@media (max-width: 560px) {
  .fenster-schleier {
    padding: 0 12px calc(12px + env(safe-area-inset-bottom));
    align-items: end; justify-items: stretch;
  }
  .fenster {
    width: 100%; height: 72vh; max-height: none;
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
    transform: translateY(112%) scale(.92); transform-origin: center bottom;
    opacity: 1;
    transition: transform .34s cubic-bezier(.2, .9, .3, 1);
  }
  .fenster-schleier.an .fenster { transform: none; }
  .fenster-kopf { position: relative; padding-top: 17px; }
  .fenster-kopf::before {
    content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 99px; background: rgba(247, 234, 215, .45);
  }
}

/* Die schlanke Fenster-Ansicht der Guide-Themen (im iframe) */
body.guide-fenster { background: var(--papier); }
.guide-fenster .abschnitt { padding: 20px 20px 30px; }
.guide-fenster .fenster-thema { margin: 0 0 8px; font-size: 23px; }
.guide-fenster .guide-leitsatz { font-size: 16px; }
.guide-fenster .guide-karten, .guide-fenster .guide-karten.kick,
.guide-fenster .guide-karten.muster { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.guide-fenster .bogen-typen { gap: 12px; }
@media (max-width: 560px) {
  .guide-fenster .guide-karten, .guide-fenster .guide-karten.kick { grid-template-columns: 1fr; }
  .guide-fenster .guide-karten.muster { grid-template-columns: repeat(2, 1fr); }
}

/* Bild-Kacheln: einheitlich quadratisch, Titel ohne Unterstrich, gleiche Höhen */
.inhaltsseite a.bild-karte, .inhaltsseite a.bild-karte figcaption { text-decoration: none; }
a.bild-karte figcaption {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 8px 10px; line-height: 1.25;
}
a.bild-karte img { aspect-ratio: 1; object-fit: cover; max-height: none; width: 100%; }

/* Variantenwahl als aufgeräumtes Aufklappmenü: ein Feld pro Auswahl,
   die gewählte Option steht danach gross im Feld. Am Handy öffnet das
   native, übersichtliche Auswahlrad. */
.auswahl-huelle { position: relative; max-width: 380px; }
.auswahl-huelle::after {
  content: '▾'; position: absolute; right: 15px; top: 50%;
  transform: translateY(-50%); pointer-events: none;
  color: var(--taupe); font-size: 15px;
}
select.auswahl {
  width: 100%; font: inherit; font-size: 16.5px;
  padding: 13px 44px 13px 15px;
  border: 1.5px solid var(--taupe); border-radius: 10px;
  background: #fff; color: var(--text); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
select.auswahl:hover { border-color: var(--schwarz); }
select.auswahl:focus { outline: none; border-color: var(--schwarz); box-shadow: 0 0 0 3px rgba(164, 138, 123, .25); }
/* Solange nichts gewählt ist, steht «Bitte wählen» gedämpft im Feld */
select.auswahl:required:invalid { color: var(--leise); }
select.auswahl option { color: var(--text); }

/* Pillen braucht weiterhin der Stock-Finder im Guide */
.pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.pille {
  font: inherit; font-size: 15px; cursor: pointer;
  background: #fff; color: var(--text);
  border: 1px solid var(--taupe); border-radius: 999px;
  padding: 9px 16px; transition: .12s;
}
.pille:hover { border-color: var(--schwarz); }
.pille.gewaehlt {
  background: var(--schwarz); color: var(--creme); border-color: var(--schwarz);
  font-weight: 600;
}

/* Startseiten-Kacheln: weicher, moderner, mit Leben beim Drüberfahren */
.kacheln .karte {
  border: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 26px rgba(80, 65, 45, .10);
  padding-bottom: 26px;
}
.kacheln .karte-bild { background: #fff; }
.kacheln .karte-bild img { transition: transform .45s ease; }
.kacheln .karte:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(80, 65, 45, .22); }
.kacheln .karte:hover .karte-bild img { transform: scale(1.07); }
.kacheln .karte h3 { font-size: 22px; margin-top: 18px; }
.kacheln .karte .preis { color: var(--taupe); font-size: 17px; font-weight: 600; }
.kacheln .karte-knopf {
  background: transparent; border: 1.5px solid var(--schwarz); border-radius: 999px;
  padding: 10px 26px; font-size: 15px; transition: .2s;
}
.kacheln .karte:hover .karte-knopf { background: var(--schwarz); color: var(--creme); border-color: var(--schwarz); }

/* Preis direkt beim Warenkorb-Knopf */
.kauf-zeile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.kauf-zeile #inKorb { display: inline-block; margin-top: 0; }
.knopf-preis { font-family: 'Sen', sans-serif; font-weight: 700; font-size: 21px; }

/* Vereinspreis unter dem Preis */
.verein-preis {
  margin: 2px 0 0; font-size: 16.5px; color: var(--taupe); font-weight: 600;
}
.verein-preis strong { color: #1c5c38; }
.verein-hinweis { margin: 2px 0 10px; font-size: 14px; }

/* Dezente Mikro-Animationen: federnde Knöpfe, hüpfender Warenkorb */
.knopf, .pille, .menge-wahl button, .filter, .karte-knopf {
  transition: transform .12s ease, background .15s ease, color .15s ease,
    border-color .15s ease, box-shadow .15s ease;
}
.knopf:active, .pille:active, .menge-wahl button:active { transform: scale(.95); }
@keyframes korb-pop { 40% { transform: scale(1.4); } }
.korb-anzahl.pop { animation: korb-pop .35s ease; }
@keyframes pillen-plopp { 0% { transform: scale(.9); } 65% { transform: scale(1.06); } }
.pille.gewaehlt { animation: pillen-plopp .2s ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------- Einkaufserlebnis-Animationen */
/* Sanftes Hereingleiten beim Scrollen */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.da { opacity: 1; transform: none; }

/* Seite blendet weich ein */
main { animation: seite-einblenden .35s ease; }
@keyframes seite-einblenden { from { opacity: 0; } }

/* Titelband: Titel gleitet herein, Strich wächst */
.titelband h1 { animation: band-titel .5s ease both; }
.titelband-strich { animation: band-strich .6s ease .15s both; transform-origin: left; }
@keyframes band-titel { from { opacity: 0; transform: translateX(-18px); } }
@keyframes band-strich { from { transform: scaleX(0); } }

/* Kauf-Knopf bestätigt sichtbar */
.knopf.erfolg { background: var(--schwarz); color: var(--creme); border-color: var(--schwarz); }

/* Produktbild fliegt in den Warenkorb */
.flug-bild {
  position: fixed; z-index: 300; pointer-events: none;
  border-radius: 10px; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  transition: transform .75s cubic-bezier(.45, -0.05, .7, .4), opacity .75s ease;
}

/* Hinweis zur Stock-Beschriftung: eine saubere Zeile unter dem Feld */
.attribut small { display: block; margin-top: 5px; }

/* Vereinspreis auf Produktkarten */
.karte-verein { margin: -8px 16px 12px; font-size: 13.5px; color: var(--taupe); }
.karte-verein strong { color: #1c5c38; }
.kacheln .karte .karte-verein { margin: 0 14px 10px; }

/* Rabattcode im Warenkorb */
.rabatt-box { margin: 18px 0 6px; }
#rabattForm { display: flex; gap: 10px; flex-wrap: wrap; }
#rabattForm input {
  flex: 1; min-width: 220px; font: inherit; padding: 12px 14px;
  border: 1px solid var(--taupe); border-radius: 4px; background: #fff;
}
.rabatt-aktiv {
  background: #e8f3ec; border: 1px solid #a8cdb6; color: #1c5c38;
  border-radius: 6px; padding: 12px 16px;
}
.rabatt-aktiv button { background: none; border: 0; font: inherit; cursor: pointer; color: inherit; margin-left: 8px; }
.fehler { color: #9c3325; }
.korb-summen { border-top: 2px solid var(--linie); margin-top: 8px; }
.korb-zwischen { display: flex; justify-content: space-between; padding: 10px 4px 0; font-size: 16.5px; }
.korb-zwischen.rabatt { color: #1c5c38; font-weight: 600; }

/* Hinweis im Testbetrieb der Kasse */
.notiz-test {
  background: #fdf3e3; border: 1px solid #ecc987; color: #7d5010;
  border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; font-size: 15px;
}

.chip-status { font-size: 13px; padding: 2px 10px; border-radius: 99px; background: #eee5d2; }
.chip-status.ok { background: #e8f3ec; color: #1c5c38; font-weight: 600; }

/* Eingebettetes Stripe-Formular in unserem Rahmen */
.checkout-rahmen { margin-top: 10px; border-radius: 10px; overflow: hidden; }

/* Banküberweisung an der Kasse */
.ueberweisung-box {
  background: #fff; border: 1px solid var(--linie); border-radius: 8px;
  padding: 16px 20px; margin-top: 22px;
}
.ueberweisung-box summary { cursor: pointer; font-weight: 600; }
.ueberweisung-titel { margin: 4px 0 10px; font-size: 21px; }
.ueberweisung-box form { margin-top: 14px; }
.ueberweisung-angaben {
  background: #fff; border: 2px solid var(--schwarz); border-radius: 8px;
  padding: 6px 20px 10px; margin: 18px 0;
}
.sm-knopf { padding: 7px 14px; font-size: 14px; }

/* Versandwahl über dem Bezahlformular */
.versand-wahl { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.versand-karte {
  flex: 1; min-width: 220px; display: flex; gap: 12px; align-items: center;
  background: #fff; border: 2px solid var(--linie); border-radius: 8px;
  padding: 14px 16px; cursor: pointer; transition: .15s;
}
.versand-karte:has(input:checked) { border-color: var(--schwarz); background: var(--creme); }
.versand-karte input { accent-color: #111; width: 18px; height: 18px; }

/* «Hier findest du uns»: die Shop-Fotos gross und untereinander */
/* Die Abschnitte der Standortseite etwas näher zusammenrücken */
.seite-hier-findest-du-uns + .seite-hier-findest-du-uns { padding-top: 34px; }
.seite-hier-findest-du-uns:has(+ .seite-hier-findest-du-uns) { padding-bottom: 34px; }
.seite-hier-findest-du-uns .bilder-reihe { grid-template-columns: 1fr; gap: 22px; margin: 0; }
.seite-hier-findest-du-uns .bilder-reihe img { max-height: none; border-radius: 8px; }
.seite-hier-findest-du-uns span > img, .seite-hier-findest-du-uns div > img { max-height: none; width: 100%; }

/* Teambestellung: zwei grosse Kacheln, Schrittliste, Kontakt-Knöpfe */
.team-kacheln { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; max-width: 900px; margin: 0 auto; }
.team-kacheln .karte { text-align: center; padding-bottom: 20px; }
.team-kacheln .karte h3 { font-size: 21px; }
.schritte { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
.schritt { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 14px 16px; }
.schritt-nr {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  background: var(--schwarz); color: var(--creme); border-radius: 999px;
  font-family: 'Sen', sans-serif; font-weight: 700;
}
.kontakt-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }

/* Kachel-Knöpfe immer auf einer Linie (Karte füllt, Knopf klebt unten) */
.kacheln .karte h3, .kacheln .karte .preis, .kacheln .karte .karte-verein { flex: 0 0 auto; }
.kacheln .karte .karte-knopf { margin-top: auto; }
.kacheln .karte { display: flex; flex-direction: column; }
.kacheln .karte .karte-verein { min-height: 44px; }

/* Video-Anleitung beim Produkt */
.anleitung-video { width: 100%; border-radius: 10px; background: #000; }

/* ------------------------------------- Video-Anleitung als Karte */
.video-karte {
  background: #fff; border: 1px solid var(--linie); border-radius: 12px;
  padding: 22px 24px 24px; max-width: 780px; margin: 0 auto;
  box-shadow: 0 6px 26px rgba(80, 65, 45, .08);
}
.video-karte h2 { margin: 0 0 16px; text-align: center; font-size: 22px; }
.anleitung-video { width: 100%; border-radius: 8px; background: #000; display: block; }

/* ------------------------- Geräte-Feinschliff: Handy, iPad, Desktop */
/* iPhone-Ränder (Notch) respektieren.
   Als App auf dem Startbildschirm läuft die Seite unter der Statusleiste
   durch – ohne diesen Abstand klebte das Logo an der Uhrzeit. Im Browser ist
   der Wert 0, dort ändert sich nichts. */
.kopf {
  --kopf-seite: 5vw;
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-left: max(var(--kopf-seite), env(safe-area-inset-left));
  padding-right: max(var(--kopf-seite), env(safe-area-inset-right));
}
@media (max-width: 760px) { .kopf { --kopf-seite: 14px; } }
.fuss { padding-bottom: max(26px, env(safe-area-inset-bottom)); }

/* Handy: zwei Produkte pro Reihe, kompakte Karten, gestapelte Kaufzeile */
@media (max-width: 560px) {
  .abschnitt { padding: 30px 4.5vw 42px; }
  .raster { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .karte h3 { font-size: 15px; margin: 10px 12px 2px; }
  .karte .preis { font-size: 14px; margin: 0 12px 10px; }
  .karte-verein { font-size: 12px; margin: -6px 12px 10px; }
  .kacheln .karte .karte-verein { min-height: 0; }
  .titelband-inhalt { padding: 34px 5vw; }
  .titelband h1 { font-size: 27px; }
  .titelband-strich { width: 110px; height: 3px; }
  .held-video { max-height: 52vh; }
  .kauf-zeile { flex-direction: column; align-items: stretch; gap: 10px; }
  .kauf-zeile #inKorb { width: 100%; text-align: center; }
  .knopf-preis { text-align: center; }
  .kasse-zeile { flex-direction: column; align-items: stretch; }
  .kasse-zeile .knopf { text-align: center; }
  .fuss { padding-top: 32px; }
  .passion-text { padding: 26px 6vw 36px; }
  .video-karte { padding: 16px 14px 18px; }
  .schritt { padding: 12px 13px; }
}

/* Touch-Geräte: statt Maus-Zoom gilt die Finger-Lupe (gedrückt halten) */
@media (hover: none) {
  .zoom-rahmen { cursor: default; }
  .zoom-rahmen:hover img#hauptbild { transform: none; }
}
.zoom-rahmen img#hauptbild { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.zoom-rahmen.zoomt img#hauptbild { transform: scale(1.8); }
/* Der Hinweis zur Finger-Lupe erscheint nur auf Touch-Geräten */
.lupe-hinweis { display: none; }
@media (hover: none) {
  .lupe-hinweis { display: block; margin: 8px 0 0; font-size: 12.5px; text-align: center; }
}

/* iPad: drei Produkte pro Reihe, Kacheln zweispaltig */
@media (min-width: 561px) and (max-width: 1024px) {
  .raster { grid-template-columns: repeat(3, 1fr); }
  .raster.kacheln { grid-template-columns: repeat(2, 1fr); }
  .produkt { gap: 30px; }
}

/* Grosse Bildschirme: etwas mehr Luft */
@media (min-width: 1600px) {
  .abschnitt { max-width: 1320px; }
}

/* Warenkorb am Handy: Details in voller Breite, Menge und Preis darunter */
@media (max-width: 560px) {
  .korb-zeile { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; position: relative; padding: 14px 14px 12px; }
  .korb-zeile img { width: 54px; height: 54px; }
  .korb-zeile .wachsen { flex: 1 1 calc(100% - 100px); min-width: 0; padding-right: 26px; }
  .korb-zeile .wachsen .leise { font-size: 12.5px; line-height: 1.45; }
  .korb-zeile .menge { flex: 0 0 auto; margin-left: 0; }
  .korb-zeile > strong { margin-left: auto; align-self: center; font-size: 16px; }
  .menge-entfernen { position: absolute; top: 10px; right: 10px; }
  .korb-total { font-size: 18px; }
}
.menge-entfernen { background: none; border: 0; font-size: 15px; color: var(--leise); cursor: pointer; padding: 4px 8px; }
.menge-entfernen:hover { color: #9c3325; }

/* Standort-Karte: Adresse links, Karte rechts – sie lädt erst auf Klick */
.karten-box {
  display: grid; grid-template-columns: 250px 1fr;
  background: #fff; border: 1px solid var(--linie); border-radius: 12px;
  overflow: hidden; margin: 20px 0 28px;
}
.karten-info { padding: 20px 22px; }
.karten-info strong { font-family: 'Sen', sans-serif; font-size: 17px; }
.karten-info p { margin: 8px 0 14px; line-height: 1.5; }
.karten-rahmen { position: relative; min-height: 300px; background: var(--papier); overflow: hidden; display: block; }
.karten-rahmen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Karte im Markenton: entsättigt und warm eingefärbt */
  filter: grayscale(1) sepia(.28) brightness(1.04) contrast(.92);
  transition: transform .5s ease;
}
.karten-rahmen:hover img { transform: scale(1.04); }
.karten-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -92%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
}
.karten-quelle {
  position: absolute; right: 8px; bottom: 6px;
  font-size: 10.5px; color: rgba(17, 17, 17, .55);
  background: rgba(250, 246, 238, .75); padding: 1px 6px; border-radius: 4px;
}
@media (max-width: 700px) {
  .karten-box { grid-template-columns: 1fr; }
  .karten-rahmen { min-height: 260px; }
}

/* Partner-Seite: zwei ruhige weisse Karten; die 30 % stehen als grosse
   Konturzahl da statt einer vollflächig schwarzen Karte. */
.partner-vorteile { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 26px 0 38px; }
.partner-vorteile .guide-karte { padding: 26px 24px 24px; }
.partner-zahl {
  display: block; font-family: 'Sen', sans-serif; font-weight: 800;
  font-size: 54px; line-height: 46px; letter-spacing: -.01em; color: var(--schwarz);
}
@supports (-webkit-text-stroke: 2px black) {
  .partner-zahl { color: transparent; -webkit-text-stroke: 2px var(--schwarz); }
}
.partner-wabe { width: 46px; height: 46px; object-fit: contain; display: block; filter: invert(1); opacity: .85; }
@media (max-width: 560px) { .partner-vorteile { grid-template-columns: 1fr; } }

/* Admin: Kategorie-Häkchen in einer Reihe */
.kat-wahl { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 6px 0 2px; }
.kat-box { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; cursor: pointer; }
.kat-box input { width: 16px; height: 16px; accent-color: var(--schwarz); }

/* Standortseite: links Adresse und Karte, rechts die Terminanfrage */
.standort-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px; align-items: stretch;
}
/* Beide Spalten enden auf gleicher Höhe: die Karte füllt links den Rest,
   die Terminbox rechts wird auf dieselbe Höhe gezogen. */
.standort-links, .standort-rechts { display: flex; flex-direction: column; }
.standort-links > p:first-child, .standort-links > h2:first-child,
.standort-rechts .besuch-box { margin-top: 0; }
.standort-kopf .karten-box { margin: 0; flex: 1; }
.standort-kopf .karten-rahmen { height: 100%; min-height: 240px; }
.standort-rechts .besuch-box { flex: 1; margin-bottom: 0; }
.standort-links > img { margin-top: auto; }
@media (max-width: 980px) { .standort-kopf { grid-template-columns: 1fr; gap: 26px; } }

/* Besuchstermin: kleiner Kalender mit Zeitfenstern */
.besuch-box {
  background: #fff; border: 1px solid var(--linie); border-radius: 10px;
  padding: 26px 28px 30px; margin: 26px 0 10px;
}
.besuch-box h2 { margin-top: 0; }
/* Zweispaltig: Kalender links, Zeit und Angaben rechts – so bleibt die
   Seite kurz und die Fotos rutschen nicht nach ganz unten. */
.besuch-form {
  display: grid; grid-template-columns: 290px minmax(0, 1fr);
  gap: 24px; margin-top: 18px; align-items: start;
}
.besuch-rechts { display: grid; gap: 16px; align-content: start; }
.besuch-kalender { max-width: 290px; }
.besuch-monat { font-weight: 700; margin-bottom: 10px; }
.besuch-wochentage, .besuch-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.besuch-wochentage span {
  text-align: center; font-size: 12px; font-weight: 700;
  color: var(--leise); letter-spacing: .04em; padding-bottom: 4px;
}
.besuch-tag {
  aspect-ratio: 1; border: 1px solid var(--linie); border-radius: 8px;
  background: #fff; font: inherit; font-size: 15px; color: var(--text); cursor: pointer;
  transition: .12s;
}
.besuch-tag:hover:not(:disabled) { border-color: var(--taupe); }
.besuch-tag.zu { color: var(--linie); border-style: dashed; cursor: not-allowed; }
.besuch-tag.gewaehlt { background: var(--schwarz); color: var(--creme); border-color: var(--schwarz); }
.besuch-titel { display: block; font-weight: 700; margin-bottom: 8px; }
.besuch-zeiten { display: flex; flex-wrap: wrap; gap: 8px; min-height: 42px; align-items: center; }
.besuch-zeit {
  border: 1px solid var(--linie); border-radius: 999px; background: #fff;
  font: inherit; font-size: 15px; padding: 8px 16px; cursor: pointer; color: var(--text);
}
.besuch-zeit:hover { border-color: var(--taupe); }
.besuch-zeit.gewaehlt { background: var(--schwarz); color: var(--creme); border-color: var(--schwarz); }
.besuch-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px 14px; }
/* Die Nachricht bekommt eine eigene Zeile über die volle Breite. Neben dem
   Telefonfeld war sie so schmal, dass kaum ein Satz hineinpasste. */
.besuch-nachricht { grid-column: 1 / -1; }
.besuch-nachricht textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.besuch-form .knopf:disabled { opacity: .45; cursor: not-allowed; }
.besuch-form .knopf { justify-self: start; }
.besuch-eingaben { display: grid; gap: 14px; grid-column: 1 / -1; }
.besuch-eingaben .knopf { justify-self: start; }
@media (max-width: 860px) {
  .besuch-form { grid-template-columns: 1fr; gap: 20px; }
  .besuch-kalender { max-width: none; }
  .besuch-tag { font-size: 14px; }
  /* Erst Tag und Zeit wählen – die Angaben erscheinen danach.
     Das hält die Seite auf dem Handy kurz. */
  .besuch-form:not(.hat-zeit) .besuch-eingaben { display: none; }
}
@media (max-width: 560px) {
  .besuch-box { padding: 20px 18px 24px; }
  .besuch-wochentage, .besuch-tage { gap: 5px; }
  /* Quadratische Felder wären auf dem Handy riesig – flache Zeilen sparen Platz */
  .besuch-tag { aspect-ratio: auto; padding: 11px 0; font-size: 15px; }
  .besuch-zeit { padding: 8px 14px; font-size: 14.5px; }
  .besuch-form { gap: 16px; }
  .besuch-rechts { gap: 12px; }
  .besuch-form .knopf { justify-self: stretch; }
}
/* Kurze Felder bleiben auch auf dem Handy nebeneinander */
@media (max-width: 480px) {
  .besuch-felder { grid-template-columns: 1fr; }
  .besuch-felder label:nth-child(3), .besuch-felder label:nth-child(4) { grid-column: auto; }
}

/* ---------------------------------------------- Rink Masters als App
   Unten in der Fusszeile steht nur ein kleiner Knopf. Die Anleitung ist
   für die meisten einmal interessant und danach nie wieder – sie gehört
   deshalb nicht dauerhaft auf jede Seite, sondern hinter einen Klick.
   Das Fenster ist dasselbe wie beim Stick Guide, nur kleiner und mit
   Inhalt aus der Seite statt aus einem iframe. */
.app-knopf-zeile { display: flex; justify-content: center; margin: 4px 0 18px; }
.app-knopf {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 13.5px; cursor: pointer;
  color: var(--zone-text); background: var(--zone-hover);
  border: 1px solid var(--zone-rand-fein); border-radius: 999px;
  padding: 8px 16px 8px 10px;
  transition: border-color .15s ease, background .15s ease;
}
.app-knopf:hover { border-color: var(--zone-rand); background: transparent; }
.app-knopf img { border-radius: 5px; display: block; opacity: .95; }

/* Das kleine Fenster: so hoch wie sein Inhalt, nicht 80 % des Bildschirms */
.fenster.klein { width: min(460px, 100%); height: auto; max-height: min(80vh, 100%); }
.fenster-inhalt { padding: 22px 24px 24px; overflow-y: auto; }
.app-vorwort { margin: 0 0 18px; color: var(--leise); font-size: 14.5px; line-height: 1.6; }

.app-schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.app-schritte li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--linie);
}
.app-schritte li:first-child { border-top: 0; padding-top: 0; }
.app-schritte li:last-child { padding-bottom: 0; }
.app-schritte li::before {
  counter-increment: schritt; content: counter(schritt);
  font-size: 11.5px; font-weight: 700; color: var(--leise);
  border: 1px solid var(--linie); border-radius: 50%;
  width: 21px; height: 21px; display: grid; place-items: center; flex: none;
}
.app-bild { flex: none; display: flex; color: var(--taupe); }
.app-bild svg {
  width: 21px; height: 24px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.app-symbol { border-radius: 6px; display: block; }
.app-schritt-text { font-size: 14.5px; line-height: 1.45; }
/* Läuft der Shop schon als App, ist der Hinweis erledigt */
@media (display-mode: standalone) { .app-knopf-zeile { display: none; } }

/* Baukasten: Raster für selbst gebaute Seiten (öffentlich und im Editor) */
.bau-raster { display: grid; grid-template-columns: repeat(var(--bau-spalten, 12), 1fr); gap: 18px; align-items: start; }
.bau-titel { margin: 6px 0 0; }
.bau-text p:first-child { margin-top: 0; }
.bau-text p:last-child { margin-bottom: 0; }
.bau-bild img { width: 100%; display: block; border-radius: 8px; }
.bau-bild figcaption { margin-top: 6px; font-size: 13.5px; }
@media (max-width: 700px) { .bau-raster > * { grid-column: 1 / -1 !important; } }

/* Baukasten-Editor */
.bau-leiste { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.bau-editor { align-items: stretch; }
.bau-editor .bau-block {
  position: relative; background: #fff; border: 1px solid var(--linie);
  border-radius: 10px; padding: 12px 18px 16px 14px; min-width: 0;
}
.bau-block.zieht { opacity: .45; }
.bau-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--leise); font-size: 13px; }
.bau-griff { cursor: grab; font-size: 17px; user-select: none; }
.bau-griff:active { cursor: grabbing; }
.bau-breite { font-size: 12px; border: 1px solid var(--linie); border-radius: 999px; padding: 1px 8px; }
.bau-knoepfe { margin-left: auto; display: flex; gap: 6px; }
.bau-knoepfe button {
  border: 1px solid var(--linie); background: none; border-radius: 6px;
  width: 30px; height: 30px; cursor: pointer; font-size: 14px; color: var(--text);
}
.bau-knoepfe button:hover { border-color: var(--schwarz); }
.bau-block input, .bau-block textarea {
  width: 100%; font: inherit; font-size: 15px; border: 1.5px dashed var(--taupe);
  border-radius: 6px; padding: 8px 10px; background: transparent; resize: vertical;
}
.bau-block input:focus, .bau-block textarea:focus { outline: none; border-style: solid; border-color: var(--schwarz); }
.bau-block input[type="file"] { border: 0; padding: 6px 0; font-size: 13.5px; }
.bau-eingabe-titel { font-family: 'Sen', sans-serif; font-size: 24px; font-weight: 700; }
.bau-vorschau { width: 100%; border-radius: 6px; display: block; margin-bottom: 8px; }
.bau-bild-leer {
  display: grid; place-items: center; min-height: 110px; margin-bottom: 8px;
  border: 1.5px dashed var(--taupe); border-radius: 8px; color: var(--taupe); font-size: 14px;
}
.bau-zieher {
  position: absolute; right: -3px; top: 22%; bottom: 22%; width: 9px;
  border-radius: 5px; background: var(--linie); cursor: ew-resize; touch-action: none;
}
.bau-zieher:hover { background: var(--taupe); }
.bau-zugabe { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* Admin: «Produkt hinzufügen»-Kachel im Produktraster */
.karte-neu {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 300px; border: 2px dashed var(--taupe); border-radius: 6px;
  color: var(--taupe); font-weight: 600; transition: .15s;
}
.karte-neu .plus { font-size: 46px; line-height: 1; font-weight: 400; }
.karte-neu:hover { border-color: var(--schwarz); color: var(--schwarz); transform: translateY(-3px); }
.guide-thema-neu { min-height: 230px; }
.klapp-neu {
  display: inline-block; margin-top: 6px; padding: 7px 12px;
  border: 1.5px dashed var(--taupe); border-radius: 8px;
  color: var(--taupe); font-size: 14.5px;
}
.klapp-neu:hover { border-color: currentColor; }

/* Admin-Produktformular im Look der Produktseite: gestrichelt = editierbar */
.produkt-form .nackt {
  font: inherit; color: inherit; background: transparent; width: 100%;
  border: 1.5px dashed var(--taupe); border-radius: 8px; padding: 4px 10px;
}
.produkt-form .nackt:focus { outline: none; border-color: var(--schwarz); border-style: solid; }
.produkt-form .zahl { width: 140px; }
.produkt-form textarea.nackt { resize: vertical; line-height: 1.55; display: block; }
.produkt-form .adm-neben { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0 4px; }
.produkt-form .adm-neben .feld { flex: 1 1 180px; }
.produkt-form .adm-bild { margin-top: 12px; }
.produkt-form .bild-leer { display: grid; place-items: center; min-height: 280px; color: var(--taupe); }
.produkt-form .kauf-zeile { margin: 18px 0; }
.produkt-form .pille { cursor: default; }

/* Online-Teambestellung: eine Karte pro Spieler, Felder im Raster.
   Die Kopfzeile zeigt Name und Kategorie und klappt die Karte auf und zu. */
.spieler-karte { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 14px 18px 10px; margin: 0 0 14px; }
.spieler-kopf { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.spieler-kopf strong { font-family: 'Sen', sans-serif; font-size: 17px; flex: 0 0 auto; }
.spieler-info { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.spieler-pfeil { flex: 0 0 auto; color: var(--taupe); font-size: 13px; transition: transform .2s; }
.spieler-karte.zu .spieler-pfeil { transform: rotate(-90deg); }
.spieler-karte.zu { padding-bottom: 14px; }
.spieler-karte.zu .spieler-inhalt { display: none; }
.spieler-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 0 14px; }
.spieler-felder .feld { margin: 7px 0; }
.spieler-felder select, .spieler-felder input { padding: 9px 10px; font-size: 15px; }
#spielerPlus { margin: 2px 0 20px; }
#spielerListe { margin-top: 16px; }

/* Team-Kacheln: «zum Angebot» immer auf gleicher Höhe, egal wie lang der Titel */
.team-kacheln .karte { display: flex; flex-direction: column; }
.team-kacheln .karte h3 { flex: 0 0 auto; }
.team-kacheln .karte .karte-knopf { margin-top: auto; align-self: center; }

/* --------------------------- Schubladen-Menü: moderner Auftritt */
.drawer-fuss { display: none; }
@media (max-width: 1150px) {
  .hauptnav {
    padding: calc(38px + env(safe-area-inset-top)) 26px 26px;
    background:
      radial-gradient(140% 60% at 100% 0%, rgba(247, 234, 215, .07), transparent 55%),
      linear-gradient(165deg, #17140f, #0c0b09);
  }
  .hauptnav::after {
    content: ''; position: absolute; right: -40px; bottom: 40px;
    width: 260px; height: 260px; pointer-events: none;
    background: url('/img/icon.png') center / contain no-repeat;
    opacity: .05;
  }
  /* Editorial: nummerierte, grosse Titel */
  .hauptnav { counter-reset: menue; }
  .hauptnav .menue-punkt { counter-increment: menue; }
  .hauptnav .menue-titel {
    display: flex; align-items: baseline; gap: 14px;
    font-family: 'Sen', sans-serif; font-size: 27px; font-weight: 700;
    padding: 15px 0; letter-spacing: -.01em;
  }
  .hauptnav .menue-titel::before {
    content: '0' counter(menue);
    font-size: 12px; letter-spacing: 2px; color: var(--taupe);
    font-family: 'Outfit', sans-serif; font-weight: 600;
  }
  .hauptnav .pfeil { margin-left: auto; font-size: 13px; opacity: .55; }

  /* Gestaffeltes Hereingleiten */
  @keyframes drawer-rein {
    from { opacity: 0; transform: translateX(26px); }
    to { opacity: 1; transform: none; }
  }
  .hauptnav.offen .menue-punkt, .hauptnav.offen .drawer-fuss {
    animation: drawer-rein .38s ease backwards;
  }
  .hauptnav.offen .menue-punkt:nth-child(2) { animation-delay: .07s; }
  .hauptnav.offen .menue-punkt:nth-child(3) { animation-delay: .12s; }
  .hauptnav.offen .menue-punkt:nth-child(4) { animation-delay: .17s; }
  .hauptnav.offen .menue-punkt:nth-child(5) { animation-delay: .22s; }
  .hauptnav.offen .menue-punkt:nth-child(6) { animation-delay: .27s; }
  .hauptnav.offen .drawer-fuss { animation-delay: .32s; }

  /* Untermenüs: Creme-Linie, ruhige Liste */
  .hauptnav .menue-punkt.auf .klapp,
  .hauptnav .menue-punkt.breit.auf .klapp-breit {
    border-left: 2px solid var(--zone-rand);
    padding-left: 18px; margin: 2px 0 10px 4px;
  }
  .hauptnav .klapp a { font-size: 16.5px; padding: 7px 0; }
  .hauptnav .klapp-ueberschrift {
    font-family: 'Sen', sans-serif; font-weight: 700; font-size: 17.5px;
    text-transform: none; letter-spacing: -.01em;
    border-bottom: 0; padding: 6px 0 2px; margin: 4px 0 2px; color: var(--zone-text);
  }

  /* Fussbereich: Schnellzugriffe und Social */
  .drawer-fuss { display: block; margin-top: auto; padding-top: 22px;
    border-top: 1px solid var(--zone-rand-fein); }
  .drawer-schnell { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .drawer-schnell .knopf { text-align: center; padding: 12px 10px; }
  .drawer-schnell .knopf.ghost { color: var(--zone-text); border-color: var(--zone-rand); }
  .drawer-sozial { margin-top: 0; }
}

/* Laufband unter dem Startvideo – wirbt für die Partnervereine und
   führt per Klick zur Korporations-Seite */
.laufband {
  display: block; background: var(--zone); color: var(--zone-text);
  overflow: hidden; border-top: 1px solid var(--zone-rand-fein);
  border-bottom: 1px solid var(--zone-rand-fein);
}
.laufband:hover .laufband-spur { opacity: 1; }
.laufband-spur {
  display: inline-flex; gap: 26px; align-items: center;
  white-space: nowrap; padding: 11px 0;
  font-family: 'Sen', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 3px; opacity: .9;
  animation: laufband-lauf 30s linear infinite;
}
@keyframes laufband-lauf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .laufband-spur { animation: none; } }

/* Handy: Video füllt den Bildschirm randlos – kein schwarzes Loch mehr */
@media (max-width: 560px) {
  .held-video { height: 56vh; max-height: none; object-fit: cover; }
}

/* ------------------------------------------------------- Stick Guide */
.guide-leitsatz { font-size: clamp(19px, 2.3vw, 24px); font-weight: 300; line-height: 1.5; max-width: 700px; margin: 0; }
.guide-vorspann { margin: 8px 0 0; max-width: 700px; color: #453d30; }
.guide-titel { margin: 42px 0 0; font-size: clamp(22px, 2.6vw, 30px); }

/* Karten statt Tabellen */
.guide-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.guide-karten.kick { grid-template-columns: repeat(4, 1fr); }
.guide-karten.muster { grid-template-columns: repeat(5, 1fr); }
.guide-karte { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 9px; }
.guide-karte h3 { margin: 0; font-size: 19px; }
.guide-karte p { margin: 0; font-size: 15px; line-height: 1.55; color: #453d30; }
.guide-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guide-code { font-family: 'Sen', sans-serif; font-weight: 800; font-size: 25px; letter-spacing: -.01em; }
.guide-tag { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--taupe); border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px; }
.guide-tag.voll { background: var(--schwarz); color: var(--creme); border-color: var(--schwarz); }
.guide-ideal { margin-top: auto; padding-top: 9px; border-top: 1px dashed var(--linie); font-size: 14px; color: var(--leise); }
.guide-ideal strong { color: var(--text); font-weight: 600; }
.mitte-svg .guide-svg { margin: 2px auto 4px; }
.guide-muster { background: var(--papier); border-radius: 10px; padding: 12px; display: grid; place-items: center; }
.guide-muster img { max-height: 210px; width: auto; margin: 0; }
.guide-bild { border-radius: 10px; overflow: hidden; background: var(--papier); }
.guide-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--creme); display: block; margin: 0; }

/* Bogen: die drei Kurventypen als Legende */
.bogen-typen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.bogen-typ { background: var(--creme); border-radius: 14px; padding: 20px 18px 16px; text-align: center; }
.bogen-typ h3 { margin: 6px 0 4px; font-size: 18px; }
.bogen-typ p { margin: 0; font-size: 14px; line-height: 1.5; color: #453d30; }

/* Flex: Skala von weich bis steif */
.flex-skala { display: flex; border-radius: 12px; overflow: hidden; border: 1px solid var(--linie); margin-top: 26px; }
.flex-skala > div { flex: 1; padding: 14px 18px; }
.flex-skala strong { display: block; font-family: 'Sen', sans-serif; font-size: 20px; }
.flex-skala span { font-size: 13.5px; color: var(--leise); }
.flex-skala > div:nth-child(1) { background: #fff; }
.flex-skala > div:nth-child(2) { background: var(--creme); }
.flex-skala > div:nth-child(3) { background: var(--schwarz); color: var(--creme); }
.flex-skala > div:nth-child(3) span { color: rgba(247, 234, 215, .7); }

.guide-info { margin-top: 24px; background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--taupe); border-radius: 10px; padding: 14px 18px; font-size: 15.5px; }

/* Stock-Finder: drei Pillen-Fragen, darunter die Empfehlung */
.finder { margin-top: 20px; padding: 24px; gap: 20px; }
.finder-titel { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 10px; }
.finder-ergebnis { background: var(--creme); border-radius: 10px; padding: 18px 20px 20px; }
.finder-ergebnis h3 { margin: 0 0 10px; font-size: 19px; }
.finder-zeile { margin: 0 0 7px; font-size: 15.5px; }
.finder-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.guide-cta { background: var(--creme); text-align: center; padding: 46px 5vw 52px; }
.guide-cta h2 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 34px); }
.guide-cta p { margin: 0 auto 20px; max-width: 520px; }

/* Übersicht: nummerierte Themen-Kacheln */
.guide-uebersicht { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 26px; }
.guide-thema { background: #fff; border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: .18s; }
.guide-thema:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(80, 65, 45, .16); }
.guide-thema:hover img { transform: scale(1.06); }
.guide-thema-kopf { display: flex; align-items: baseline; gap: 10px; padding: 13px 16px 10px; }
.guide-thema-nr { font-size: 11.5px; font-weight: 600; letter-spacing: 2px; color: var(--taupe); }
.guide-thema h3 { margin: 0; font-size: 17.5px; }
/* 4:3 wie die Zeichnungen selbst (viewBox 800×600). Vorher stand hier ein
   Quadrat mit «cover» – das schnitt jeder Illustration links und rechts ein
   Stück ab, weil sie breiter ist als hoch. */
.guide-thema img { width: 100%; flex: 1; aspect-ratio: 4 / 3; object-fit: contain; background: var(--creme); display: block; transition: transform .45s ease; }
.guide-thema p { margin: 0; padding: 12px 16px 15px; font-size: 14px; color: var(--leise); line-height: 1.5; }

/* Guide auf iPad und Handy */
@media (min-width: 561px) and (max-width: 1024px) {
  .guide-karten, .guide-karten.kick { grid-template-columns: repeat(2, 1fr); }
  .guide-karten.muster { grid-template-columns: repeat(3, 1fr); }
  .guide-uebersicht { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .guide-karten, .guide-karten.kick, .bogen-typen { grid-template-columns: 1fr; gap: 12px; }
  .guide-karten.muster, .guide-uebersicht { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Karten mit Grafik: Grafik links, Text daneben – spart Höhe */
  .guide-karte.mitte-svg { display: grid; grid-template-columns: 86px 1fr; column-gap: 16px; align-items: start; }
  .guide-karte.mitte-svg .guide-svg { grid-row: 1 / span 3; width: 82px; height: auto; margin: 2px 0 0; }
  .guide-karte.mitte-svg .guide-ideal { margin-top: 0; }
  .guide-thema p { display: none; }
  .guide-thema-kopf { padding: 10px 12px 8px; gap: 7px; }
  .guide-thema h3 { font-size: 14.5px; }
  .guide-thema-nr { letter-spacing: 1px; }
  .guide-muster img { max-height: 150px; }
  .finder { padding: 18px 16px; }
  .flex-skala > div { padding: 11px 10px; }
  .flex-skala strong { font-size: 16px; }
  .flex-skala span { font-size: 11.5px; }
}

/* ------------------------------------------------- Hellmodus-Feinheiten */
/* Logo und Wabe sind helle Grafiken – im Hellmodus werden sie invertiert */
html[data-modus="hell"] .logo img { filter: invert(1); }
html[data-modus="hell"] .fuss-wabe { filter: invert(1) brightness(.75); }
/* Handy-Menü im Hellmodus: heller Verlauf, dunkles Wasserzeichen */
@media (max-width: 760px) {
  html[data-modus="hell"] .hauptnav {
    background:
      radial-gradient(140% 60% at 100% 0%, rgba(17, 17, 17, .05), transparent 55%),
      linear-gradient(165deg, #fbf7ee, #efe5d1);
    box-shadow: -20px 0 50px rgba(80, 65, 45, .3);
  }
  html[data-modus="hell"] .hauptnav::after { filter: invert(1); opacity: .07; }
}
/* Der Umschalt-Knopf selbst */
.modus-knopf {
  background: none; border: 0; color: var(--zone-text); cursor: pointer;
  display: grid; place-items: center; padding: 8px 6px; opacity: .9;
}
.modus-knopf:hover { opacity: 1; }
.modus-knopf .mond { display: none; }
html[data-modus="hell"] .modus-knopf .sonne { display: none; }
html[data-modus="hell"] .modus-knopf .mond { display: block; }

/* ------------------------------------------- Übersichtsseiten mit Kacheln
   Standen vorher in der schmalen Spalte (860 px): zwei kleine Kacheln in
   einem breiten Fenster, darunter viel Leerraum bis zur Fusszeile. Jetzt
   volle Breite – die Kacheln füllen die Seite, der Leerraum verschwindet
   von selbst, weil der Inhalt hoch genug wird. */
.kachel-uebersicht .bilder-reihe {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
  max-width: 1100px;
  margin: 0 auto;
}
.kachel-uebersicht .bild-karte figcaption { font-size: 19px; padding: 16px 0 14px; }
@media (max-width: 700px) {
  .kachel-uebersicht .bilder-reihe { grid-template-columns: 1fr; gap: 20px; }
}

/* Zwei Wege zur App – der Titel trennt sie voneinander */
.app-weg + .app-weg { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie); }
.app-weg-titel { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--taupe); }

/* Untertitel im Anleitungsvideo: gross genug zum Mitlesen, dunkler
   Balken dahinter, damit die Schrift auf hellem Bild nicht verschwindet.
   Safari und Chrome erlauben nur diese wenigen Eigenschaften. */
.anleitung-video::cue {
  background: rgba(17, 17, 17, .78);
  color: #f7ead7;
  font-family: 'Outfit', -apple-system, sans-serif;
  font-size: 90%;
  line-height: 1.4;
}