/* Spiele Kontor Hamburg — Marken-Website
   Konzept: Die Seite liegt auf dem Raster des Produkts (2-cm-Würfel).
   Die Themenwelten brechen als Vollbild-Bänder daraus aus.
   Schriften SELBST GEHOSTET – kein Google-CDN (DSGVO, LG München 3 O 17493/20). */

/* ---------- Schriften ---------- */
@font-face{
  font-family:'Bricolage';
  src:url('../fonts/bricolage-latin.woff2') format('woff2-variations');
  font-weight:400 800; font-stretch:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'PublicSans';
  src:url('../fonts/publicsans-latin.woff2') format('woff2-variations');
  font-weight:400 700; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

/* ---------- Marken-Token ----------
   Farben aus dem Logo gemessen, nicht geschätzt. */
:root{
  --kontor:#244890;        /* Logo-Blau */
  --kontor-hell:#3862c0;
  --krone:#F0B424;         /* Logo-Gold */
  --tief:#0C2448;          /* Tiefblau, Fließtext */
  --bauplan:#EDF1F7;       /* Bauplan-Papier */
  --papier:#ffffff;
  --linie:rgba(36,72,144,.13);
  --linie-stark:rgba(36,72,144,.26);
  --grau:#5B6B85;

  --raster:30px;           /* ein Würfel im Raster */
  --display:'Bricolage','Segoe UI',system-ui,sans-serif;
  --body:'PublicSans','Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;

  --bund:clamp(20px,5vw,64px);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0; background:var(--bauplan); color:var(--tief);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--kontor)}
:focus-visible{outline:3px solid var(--krone); outline-offset:3px; border-radius:2px}

/* Das Bauplan-Raster – der Untergrund der ganzen Seite */
.raster{
  background-image:
    linear-gradient(var(--linie) 1px,transparent 1px),
    linear-gradient(90deg,var(--linie) 1px,transparent 1px);
  background-size:var(--raster) var(--raster);
  background-position:center center;
}

.bahn{max-width:var(--max); margin-inline:auto; padding-inline:var(--bund)}

/* ---------- Typografie ---------- */
.auge{                       /* Eyebrow – technisch, im Mono-Ton des Bauplans */
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--kontor);
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
}
.auge::before{content:''; width:22px; height:22px; flex:none;
  border:1.5px solid var(--kontor-hell); background:rgba(36,72,144,.06)}

h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:.98; margin:0}
h2{font-size:clamp(30px,4.4vw,54px)}
h3{font-size:clamp(20px,2vw,25px); letter-spacing:-.02em; line-height:1.15}
p{margin:0 0 1em}
.blei{font-size:clamp(17px,1.5vw,20px); color:var(--grau); line-height:1.6; max-width:56ch}

/* ---------- Kopf ----------
   Hell getönt statt weiß: der Held darunter ist weiß, ein weißer Kopf hätte keine
   Kante. Blau als Fläche geht nicht – das Logo ist selbst blau und wäre weg.
   Farbe kommt daher über die Bauplan-Tönung + Gold-Linie als Markenakzent. */
.kopf{
  position:sticky; top:0; z-index:50;
  background:rgba(233,238,247,.94); backdrop-filter:blur(10px);
  border-bottom:2px solid var(--krone);
  box-shadow:0 1px 12px rgba(12,36,72,.06);
}
.kopf-in{max-width:var(--max); margin-inline:auto; padding:12px var(--bund);
  display:flex; align-items:center; justify-content:space-between; gap:20px}
/* Das Logo ist filigran (Krone, Würfel, „Hamburg“ mit Zierlinie) – unter ~52px zerfällt es. */
.kopf img{height:clamp(44px,4.6vw,56px); width:auto}
.nav{display:flex; gap:28px; align-items:center}
.nav a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tief); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--krone)}
@media(max-width:820px){.nav{display:none}}

/* ---------- Held: Millimeterpapier – der Bau steht auf seinem Bauplan ----------
   Weißer Grund statt blauem: das Produktbild ist auf Weiß freigestellt, so bleibt
   kein Rest sichtbar. Das Raster liest sich als echtes Bauplan-Papier. */
.held{
  position:relative; overflow:hidden;
  background-color:var(--papier);
  border-bottom:1px solid var(--linie-stark);
  padding-block:clamp(28px,4vw,52px);
}
.held-in{
  max-width:var(--max); margin-inline:auto; padding-inline:var(--bund);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(20px,3.5vw,52px); align-items:center;
}
/* Kein Logo im Held – es steht schon im Kopf. */
.held-marke{display:flex; flex-direction:column; align-items:flex-start}
.held h1{
  font-size:clamp(30px,3.8vw,50px); letter-spacing:-.035em; margin-bottom:18px; text-wrap:balance;
}
.held h1 em{font-style:normal; color:var(--kontor)}
.held-fakten{
  display:flex; gap:clamp(14px,1.8vw,24px); flex-wrap:wrap; margin:24px 0 0;
  font-family:var(--mono); font-size:12.5px; color:var(--grau); letter-spacing:.03em;
}
.held-fakten b{color:var(--tief); font-weight:600}
/* Einzelne Würfel: das Bauteil neben dem Bauwerk.
   Die PNGs sind auf den Würfel zugeschnitten – die Breite IST jetzt der Würfel
   (vorher waren 38% des Rahmens leer, dadurch wirkten sie viel zu klein). */
.wuerfel-reihe{display:flex; gap:16px; margin-top:30px; align-items:flex-end}
.wuerfel-reihe img{width:clamp(56px,5.6vw,76px); height:auto}
/* Der Bau: freigestellt und CONTAIN – wird nie beschnitten, egal wie schmal. */
.held-bau{margin:0}
.held-bau img{
  width:100%; height:auto; max-height:min(66vh,560px); object-fit:contain; object-position:center;
}
@media(max-width:900px){
  .held-in{grid-template-columns:1fr; gap:22px}
  .held-marke{align-items:center; text-align:center}
  .held h1{max-width:18ch}
  .held .blei{margin-inline:auto}
  .held-fakten{justify-content:center}
  .wuerfel-reihe{justify-content:center}
  .held-bau img{max-height:46vh}
}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  font-family:var(--body); font-weight:600; font-size:16px; text-decoration:none;
  padding:14px 26px; border-radius:2px; border:2px solid var(--kontor);
  background:var(--kontor); color:#fff; transition:transform .12s ease, background .12s ease;
}
.knopf:hover{background:var(--kontor-hell); transform:translateY(-2px)}
.knopf-leer{background:transparent; color:var(--kontor)}
.knopf-leer:hover{background:rgba(36,72,144,.07)}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(64px,8vw,110px) 0}
.abschnitt-kopf{max-width:60ch; margin-bottom:clamp(34px,4vw,54px)}

/* ---------- Größen-Umschalter, JE KACHEL ----------
   Eigene Radio-Gruppe pro Welt (name="g-<slug>"), damit jede Kachel unabhängig
   schaltet. Radios liegen absolut (kein Grid-Item) und VOR den Zielen, sonst
   greift der ~-Selektor nicht. Kein JavaScript: Tastatur + Screenreader inklusive. */
.groesse-radio{position:absolute; opacity:0; pointer-events:none}
.schalter{
  display:inline-flex; gap:1px; background:var(--linie-stark);
  border:1px solid var(--linie-stark); margin:0 0 20px;
}
.schalter label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 14px; background:var(--papier); color:var(--grau); cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.schalter label:hover{color:var(--tief)}
.welt-text{display:flex; flex-direction:column; align-items:flex-start}

/* Aktiver Zustand + Bildwechsel, je Kachel */
.welt .n80{display:none}
#ritterburg-150:checked ~ .welt-text .schalter label[for="ritterburg-150"],
#ritterburg-80:checked  ~ .welt-text .schalter label[for="ritterburg-80"]{background:var(--kontor); color:#fff}
#ritterburg-150:focus-visible ~ .welt-text .schalter label[for="ritterburg-150"],
#ritterburg-80:focus-visible  ~ .welt-text .schalter label[for="ritterburg-80"]{box-shadow:inset 0 0 0 3px var(--krone)}
#ritterburg-80:checked ~ .welt-schau .n150{display:none}
#ritterburg-80:checked ~ .welt-schau .n80{display:block}
#feuerwehr-150:checked ~ .welt-text .schalter label[for="feuerwehr-150"],
#feuerwehr-80:checked  ~ .welt-text .schalter label[for="feuerwehr-80"]{background:var(--kontor); color:#fff}
#feuerwehr-150:focus-visible ~ .welt-text .schalter label[for="feuerwehr-150"],
#feuerwehr-80:focus-visible  ~ .welt-text .schalter label[for="feuerwehr-80"]{box-shadow:inset 0 0 0 3px var(--krone)}
#feuerwehr-80:checked ~ .welt-schau .n150{display:none}
#feuerwehr-80:checked ~ .welt-schau .n80{display:block}
#polizei-150:checked ~ .welt-text .schalter label[for="polizei-150"],
#polizei-80:checked  ~ .welt-text .schalter label[for="polizei-80"]{background:var(--kontor); color:#fff}
#polizei-150:focus-visible ~ .welt-text .schalter label[for="polizei-150"],
#polizei-80:focus-visible  ~ .welt-text .schalter label[for="polizei-80"]{box-shadow:inset 0 0 0 3px var(--krone)}
#polizei-80:checked ~ .welt-schau .n150{display:none}
#polizei-80:checked ~ .welt-schau .n80{display:block}
#aegypten-150:checked ~ .welt-text .schalter label[for="aegypten-150"],
#aegypten-80:checked  ~ .welt-text .schalter label[for="aegypten-80"]{background:var(--kontor); color:#fff}
#aegypten-150:focus-visible ~ .welt-text .schalter label[for="aegypten-150"],
#aegypten-80:focus-visible  ~ .welt-text .schalter label[for="aegypten-80"]{box-shadow:inset 0 0 0 3px var(--krone)}
#aegypten-80:checked ~ .welt-schau .n150{display:none}
#aegypten-80:checked ~ .welt-schau .n80{display:block}

/* ---------- Vier Welten: Karton + Bauwerk ----------
   Links was im Karton ist, rechts was daraus wird. Keine Kulisse, keine Versprechen. */
.welten{display:flex; flex-direction:column; gap:clamp(20px,2.6vw,34px)}
.welt{
  background-color:var(--papier); border:1px solid var(--linie-stark);
  display:grid; grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr);
  align-items:center; gap:clamp(16px,2.4vw,34px);
  padding:clamp(20px,2.2vw,30px);
}
/* Bauwerk (was daraus wird) neben Karton (was drin ist).
   Reihenfolge bewusst so: der Karton ist nach links angewinkelt, das Bauwerk
   isometrisch nach rechts geoeffnet – so zeigen die Fluchten zueinander. */
.welt-schau{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.54fr);
  align-items:center; gap:clamp(12px,1.8vw,24px)}
.welt-karton{width:100%; height:auto; filter:drop-shadow(0 10px 22px rgba(12,36,72,.16))}
.welt-bau{width:100%; height:auto}
.welt-kopf{display:flex; align-items:center; gap:14px; margin-bottom:10px}
/* Überschrift auf Würfelhöhe: 40px × line-height 1.15 = 46px = Würfelhöhe.
   So sitzen Block und Name als Paar auf einer Linie. */
.welt h3{margin:0; font-size:clamp(28px,3vw,40px); line-height:1.15}
.welt-wuerfel{width:46px; height:auto; flex:none}
/* Immer eigene Zeile – sonst bricht der Chip je nach Namenslänge mal um, mal nicht. */
.welt p{margin:0; color:var(--grau); font-size:15.5px}
@media(max-width:860px){
  .welt{grid-template-columns:1fr; gap:18px}
  .welt-schau{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
}
@media(max-width:560px){
  .welt-schau{grid-template-columns:1fr; justify-items:center}
  .welt-karton{max-width:200px}
}
@media(max-width:860px){.welt-schau{grid-template-columns:minmax(0,1fr) minmax(0,.58fr)}}

/* ---------- Signatur: der Wandquerschnitt in echtem Maßstab ---------- */
.huelle{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px); align-items:center}
@media(max-width:880px){.huelle{grid-template-columns:1fr}}

/* ---------- Signatur: Blick in den Würfel ----------
   Der Render liegt auf hellem Grund (Feuerwehr-Variante), damit die Figur zum
   Bauplan-Charakter der Seite passt. Die dunkle Fassung brach den Rest der Seite. */
.schnitt{
  background:var(--papier); border:1px solid var(--linie-stark);
  padding:clamp(22px,2.6vw,32px);
}
.schnitt .auge{margin-bottom:16px}
.schnitt-bild{margin:0; display:block}
.schnitt-bild img{width:100%; height:auto}
.schnitt-trenn{height:1px; background:var(--linie); margin:clamp(16px,2.2vw,24px) 0}

.schnitt-fuss{font-family:var(--mono); font-size:11.5px; color:var(--grau); line-height:1.5;
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--linie)}

.merkmale{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:2px; background:var(--linie-stark);
  border:1px solid var(--linie-stark)}
.merkmale li{background:var(--bauplan); padding:16px 20px; display:flex; gap:16px; align-items:baseline}
.merkmale dfn{font-family:var(--display); font-style:normal; font-weight:800; font-size:22px;
  color:var(--kontor); min-width:74px; letter-spacing:-.02em}
.merkmale span{font-size:15.5px; color:var(--grau)}
.merkmale b{color:var(--tief); font-weight:600}

/* ---------- Geprüft ---------- */
.geprueft{background:var(--papier); border-block:1px solid var(--linie-stark)}
.geprueft-gitter{display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,60px); align-items:center}
.geprueft img{width:clamp(150px,15vw,196px)}
@media(max-width:760px){.geprueft-gitter{grid-template-columns:1fr}}
.nachweise{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.nachweise li{font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  border:1px solid var(--linie-stark); padding:8px 13px; color:var(--tief); background:var(--bauplan)}

/* ---------- B2B ---------- */
.zwei{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--linie-stark);
  border:1px solid var(--linie-stark)}
@media(max-width:820px){.zwei{grid-template-columns:1fr}}
.karte{background:var(--papier); padding:clamp(28px,3.4vw,46px); display:flex; flex-direction:column}
.karte p{color:var(--grau); font-size:16px}
.karte .knopf{margin-top:auto}
.karte h3{margin-bottom:12px}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--kontor); color:#fff}
.kontakt .auge{color:rgba(255,255,255,.75)}
.kontakt .auge::before{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.1)}
.kontakt h2{color:#fff; margin-bottom:18px}
.kontakt-gitter{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end}
@media(max-width:760px){.kontakt-gitter{grid-template-columns:1fr}}
.kontakt-daten{list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:14.5px; line-height:2}
.kontakt-daten a{color:var(--krone); text-decoration:none; border-bottom:1px solid rgba(240,180,36,.4)}
.kontakt-daten a:hover{border-bottom-color:var(--krone)}

/* ---------- Fuß ---------- */
.fuss{background:var(--tief); color:rgba(255,255,255,.62); padding:34px 0; font-size:14px}
.fuss-in{max-width:var(--max); margin-inline:auto; padding-inline:var(--bund);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
.fuss a{color:rgba(255,255,255,.85); text-decoration:none; margin-right:20px}
.fuss a:hover{color:var(--krone)}

/* ---------- Rechtsseiten ---------- */
.recht{max-width:74ch; margin-inline:auto; padding:clamp(44px,6vw,80px) var(--bund)}
.recht h1{font-size:clamp(30px,4vw,44px); margin-bottom:32px}
.recht h2{font-size:22px; margin:38px 0 12px}
.recht p{color:var(--grau)}
.recht address{font-style:normal; font-family:var(--mono); font-size:14.5px; line-height:1.9; color:var(--tief)}
.hinweis{background:#FFF8E6; border-left:3px solid var(--krone); padding:16px 20px; font-size:14.5px; margin:24px 0}

/* ---------- Galerie ----------
   Filter wieder ueber Radios statt JavaScript, gleiches Muster wie der
   Groessen-Schalter in den Welten. */
.gal-filter{position:relative}
.gal-filter .schalter{flex-wrap:wrap; margin-bottom:clamp(24px,3vw,36px)}
#f-alle:checked       ~ .schalter label[for="f-alle"],
#f-ritterburg:checked ~ .schalter label[for="f-ritterburg"],
#f-feuerwehr:checked  ~ .schalter label[for="f-feuerwehr"],
#f-polizei:checked    ~ .schalter label[for="f-polizei"],
#f-aegypten:checked   ~ .schalter label[for="f-aegypten"]{background:var(--kontor); color:#fff}
#f-alle:focus-visible       ~ .schalter label[for="f-alle"],
#f-ritterburg:focus-visible ~ .schalter label[for="f-ritterburg"],
#f-feuerwehr:focus-visible  ~ .schalter label[for="f-feuerwehr"],
#f-polizei:focus-visible    ~ .schalter label[for="f-polizei"],
#f-aegypten:focus-visible   ~ .schalter label[for="f-aegypten"]{box-shadow:inset 0 0 0 3px var(--krone)}

.galerie{
  display:grid; gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%,290px), 1fr));
}
.gal-bild{
  margin:0; background:var(--papier); border:1px solid var(--linie-stark);
  padding:clamp(12px,1.4vw,18px); display:flex; flex-direction:column; gap:12px;
}
.gal-bild img{width:100%; height:auto; object-fit:contain}
.gal-bild figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--grau);
}
/* Bauwerke sitzen mittig: flache, breite Renders (Verpackung) hingen sonst oben in
   der Kachel, weil die Karten auf Reihenhoehe gestreckt werden. */
.gal-bild img{margin-block:auto}
/* Filtern: nur die gewaehlte Welt zeigen */
#f-ritterburg:checked ~ .galerie .gal-bild:not(.ritterburg),
#f-feuerwehr:checked  ~ .galerie .gal-bild:not(.feuerwehr),
#f-polizei:checked    ~ .galerie .gal-bild:not(.polizei),
#f-aegypten:checked   ~ .galerie .gal-bild:not(.aegypten){display:none}

/* Galerie: Zwischenueberschriften + zweiter Block */
.gal-titel{font-family:var(--display); font-weight:800; font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.02em; margin:0 0 6px}
.gal-titel-2{margin-top:clamp(44px,5vw,72px)}
.gal-hinweis{font-family:var(--mono); font-size:12px; color:var(--grau); margin:0 0 22px}
/* Die grossen Bauwerke brauchen mehr Flaeche als die Einzelset-Aufbauten */
.galerie-gross{grid-template-columns:repeat(auto-fill, minmax(min(100%,400px), 1fr))}
.gal-gross figcaption{color:var(--kontor); font-weight:600}
/* Filter greift auch im zweiten Raster */
#f-ritterburg:checked ~ .galerie-gross .gal-bild:not(.ritterburg),
#f-feuerwehr:checked  ~ .galerie-gross .gal-bild:not(.feuerwehr),
#f-polizei:checked    ~ .galerie-gross .gal-bild:not(.polizei),
#f-aegypten:checked   ~ .galerie-gross .gal-bild:not(.aegypten){display:none}

/* ---------- Galerie: Kinderzimmer-Szenen ----------
   Steht im HTML bewusst ausserhalb von .gal-filter. Fuer Polizei gibt es keine Szene
   ohne Amazon-Rahmen (die Skyline des Banners laeuft ueber die Koepfe), ein Klick auf
   den Polizei-Filter wuerde den Block sonst leer zeigen.
   Randlos statt Kachel: das sind Szenen, keine freigestellten Produktbilder. */
.galerie-leben{
  display:grid; gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,300px), 1fr));
}
.leben-bild{margin:0}
.leben-bild img{width:100%; height:auto; display:block; border:1px solid var(--linie-stark)}
.leben-bild figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--grau); margin-top:12px;
}

/* ---------- Unterseiten-Held ----------
   Schlanker als der Held der Startseite: kein Logo, keine Wuerfelreihe, kein
   Fakten-Band. Nur Einstieg, Satz und der Weg zum Kontakt. */
.seiten-held{
  background-color:var(--papier); border-bottom:1px solid var(--linie-stark);
  padding-block:clamp(38px,5vw,72px);
}
.seiten-held-in{
  max-width:var(--max); margin-inline:auto; padding-inline:var(--bund);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,56px); align-items:center;
}
.seiten-held h1{
  font-size:clamp(30px,3.8vw,50px); letter-spacing:-.035em; margin-bottom:18px; text-wrap:balance;
}
.seiten-held h1 em{font-style:normal; color:var(--kontor)}
@media(max-width:900px){.seiten-held-in{grid-template-columns:1fr}}

.knopf-reihe{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}

/* ---------- Bild-Platzhalter ----------
   Reserviert exakt das spaetere Seitenverhaeltnis (aspect-ratio inline je Kasten),
   damit sich beim Austausch gegen das echte Bild nichts verschiebt. Das Verhaeltnis
   steht gross drin, die Pixelmasse darunter: das ist die Bauanweisung fuers Bild. */
.platz{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:24px;
  background-color:var(--bauplan); border:2px dashed var(--linie-stark); color:var(--grau);
}
.platz b{
  font-family:var(--display); font-weight:800; font-size:clamp(34px,4.4vw,56px);
  letter-spacing:-.03em; line-height:1; color:var(--kontor);
}
.platz span{font-family:var(--mono); font-size:12.5px; letter-spacing:.09em; color:var(--tief)}
.platz em{
  font-family:var(--mono); font-style:normal; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.6; max-width:36ch;
  margin-top:10px; padding-top:12px; border-top:1px solid var(--linie-stark);
}

/* ---------- Fachhandel: Sortiment ---------- */
.sortiment{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--linie-stark); border:1px solid var(--linie-stark);
}
@media(max-width:820px){.sortiment{grid-template-columns:repeat(2,1fr)}}
.sort-item{
  margin:0; background:var(--papier); padding:clamp(14px,1.6vw,22px);
  display:flex; flex-direction:column; gap:12px;
}
/* Die Kartons sind unterschiedlich hoch – mittig setzen, sonst haengen sie oben. */
.sort-item img{width:100%; height:auto; margin-block:auto}
.sort-item figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grau); display:flex; justify-content:space-between; gap:10px;
  border-top:1px solid var(--linie); padding-top:10px;
}
.sort-item b{color:var(--tief); font-weight:600}

/* Vier Beobachtungen nebeneinander statt drei Kennzahlen untereinander */
.merkmale-breit{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.merkmale-breit{grid-template-columns:1fr}}
.merkmale-breit dfn{min-width:0; display:block; margin-bottom:6px; font-size:19px}
.merkmale-breit li{flex-direction:column; align-items:stretch; gap:0}

/* ---------- Querverweis zwischen den beiden B2B-Seiten ---------- */
.quer{
  background:var(--papier); border:1px solid var(--linie-stark);
  padding:clamp(22px,2.8vw,36px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.quer p{margin:0; color:var(--grau); max-width:52ch}

/* B2B-Seiten: echte Bilder ersetzen die Platzhalter, gleicher Rahmen-Stil */
.b2b-bild{width:100%; height:auto; display:block; border:1px solid var(--linie-stark)}

/* ---------- Testsiegel mit Fundstelle ----------
   Pflichtangabe bei Werbung mit Pruefsiegeln (§ 5a UWG): die Fundstelle der
   Pruefkriterien muss erreichbar sein. Siegel und Bildunterschrift verlinken auf
   den Testbericht; die Chips in den Nachweis-Listen ebenso. */
.siegel{margin:0; display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.siegel a{display:inline-block; border-radius:2px}
.siegel figcaption{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; line-height:1.4}
.siegel figcaption a{color:var(--kontor); text-decoration:underline; text-underline-offset:2px}
.nachweise a{color:inherit; text-decoration:none; border-bottom:1px solid var(--kontor)}
.nachweise a:hover{color:var(--kontor)}