/* ====================================================================
   Bäder Traum – oeffentliche Webseite
   Keine Frameworks, keine externen Schriften: alles vom eigenen Server.
   Aufbau: 1 Grundlagen · 2 Kopf · 3 Bausteine · 4 Startseite
           5 Katalog · 6 Detailseite · 7 Formulare · 8 Fuss · 9 Mobil
   ==================================================================== */

/* ---------- 1 Grundlagen ------------------------------------------ */

:root {
  --blau:        #1f2a63;   /* Hauptfarbe, aus dem Logo abgeleitet */
  --blau-tief:   #16204d;
  --blau-hell:   #eef0f8;
  --blau-linie:  #ccd3e8;

  --orange:      #e88c1c;   /* Akzent aus dem Logo */
  --orange-hell: #fdf2e2;

  --text:        #1a1a1a;
  --text-blass:  #5f6b7d;
  --linie:       #e3e7ec;
  --flaeche:     #ffffff;
  --grund:       #f5f7f9;

  --gruen:       #1c7a4a;
  --gruen-hell:  #e8f5ee;
  --rot:         #a52121;
  --rot-hell:    #fceded;
  --gelb:        #9a6a00;
  --gelb-hell:   #fdf4e3;

  --radius:      6px;
  --radius-gross:10px;
  --schatten:    0 2px 8px rgba(23, 33, 77, .07);
  --schatten-hoch: 0 10px 30px rgba(23, 33, 77, .13);
  --breite:      1240px;

  /* Höhe des Seitenkopfs – Servicezeile plus Hauptkopf.
     Daraus errechnet sich die Bühnenhöhe, damit Kopf + Bühne
     zusammen genau einen Bildschirm füllen. */
  --servicezeile: 38px;
  --kopfhoehe:    76px;
  --kopf-gesamt:  114px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Reissleine gegen waagerechtes Scrollen: Ein einziges zu breites Element
     macht sonst die ganze Seite verschiebbar und es entsteht rechts ein
     weisser Rand. „clip" statt „hidden", weil hidden auf html/body den
     klebenden Kopf (position: sticky) ausser Kraft setzen kann. */
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font: 16px/1.6 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Lange Wörter (Serienbezeichnungen, E-Mail-Adressen, URLs) duerfen
     umbrechen statt den Kasten zu sprengen */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 12px; font-weight: 700; }
h1 { font-size: clamp(30px, 4vw, 46px); }
h2 { font-size: clamp(22px, 2.4vw, 28px); }
h3 { font-size: 17px; }
p  { margin: 0 0 14px; }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.klein { font-size: 13.5px; color: var(--text-blass); }
.blass { color: var(--text-blass); }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 2 Kopf ------------------------------------------------- */

.servicezeile {
  background: var(--blau);
  color: rgba(255,255,255,.92);
  font-size: 13px;
}
.servicezeile .innen {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 38px;
  flex-wrap: wrap;
}
.servicezeile a { color: inherit; text-decoration: none; }
.servicezeile a:hover { text-decoration: underline; }
.servicezeile .rechts { margin-left: auto; display: flex; gap: 26px; }
.servicezeile .punkt { display: flex; align-items: center; gap: 7px; }
/* ====================================================================
   Grundmaß für alle Sinnbilder
   ====================================================================
   Ein SVG ohne width und height füllt den Platz, den es bekommt. In
   einem Flex-Behälter, dessen Nachbar `flex: 1` hat, ist das die halbe
   Zeile – auf der Merkliste wurde daraus ein bildschirmfüllendes
   Fragezeichen.

   Diese Regel hat bewusst die niedrigste mögliche Gewichtung (nur der
   Elementname). Jede Regel mit einer Klasse davor – `.knopf svg`,
   `.vertrauen svg`, `.schritt-symbol svg` – sticht sie aus. Sie greift
   also nur dort, wo sonst gar nichts steht, und ist damit eine
   Notbremse, kein Eingriff.
   ==================================================================== */
svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Sinnbild in Hinweiskästen – etwas größer, oben ausgerichtet. */
.hinweis-symbol { width: 26px; height: 26px; color: var(--blau); margin-top: 2px; }

.servicezeile svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .85; }

.kopf {
  background: #fff;
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 50;
}
.kopf .innen {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 76px;
}
/* Logo. Das Seitenverhaeltnis ist 700:292, aus der Breite folgt die Hoehe. */
.marke { flex: 0 0 auto; display: block; }
.marke img { width: 156px; height: auto; }

/* Burger – auf großen Bildschirmen unsichtbar */
.burger { display: none; }
.menue-schatten { display: none; }

nav.haupt { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
nav.haupt > a, nav.haupt > .menue > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
nav.haupt a:hover { background: var(--blau-hell); color: var(--blau); }
nav.haupt a.aktiv { color: var(--orange); font-weight: 600; }
nav.haupt .pfeil { width: 9px; height: 9px; opacity: .5; }

/* Aufklappmenue – funktioniert ohne JavaScript */
.menue { position: relative; }

/* Unsichtbare Bruecke ueber den 6px Abstand.
   Ohne sie verlaesst der Zeiger auf dem Weg nach unten kurz das Menue,
   der :hover faellt weg und das Untermenue klappt weg, bevor man
   klicken kann. Die Flaeche liegt im Kopfbereich und stoert nichts. */
.menue::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 10px;
}
.menue-inhalt {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
  padding: 8px;
  display: none;
  z-index: 60;
}
.menue:hover .menue-inhalt,
.menue:focus-within .menue-inhalt { display: block; }
.menue-inhalt a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
}
.menue-inhalt a:hover { background: var(--blau-hell); color: var(--blau); }

/* Suche, Nebenlinks und Kontaktknöpfe erscheinen nur im Aufklappmenü */
.menue-fuss, .suche-menue { display: none; }

.suche { margin-left: auto; position: relative; }
.suche input {
  width: 240px;
  padding: 9px 38px 9px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font: inherit;
  font-size: 14.5px;
  background: var(--grund);
}
.suche input:focus { outline: 2px solid var(--blau); background: #fff; }
.suche button {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  background: none; border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--text-blass);
  line-height: 0;
}

/* Prozentzeichen hinter „Angebote" – der Blickfang im Menue */
.menue-zeichen {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 1px;
}

.kopf-werkzeuge { display: flex; align-items: center; gap: 4px; }
.werkzeug {
  position: relative;
  display: inline-flex;
  padding: 9px;
  border-radius: var(--radius);
  color: var(--text);
}
.werkzeug:hover { background: var(--blau-hell); color: var(--blau); }
.werkzeug svg { width: 21px; height: 21px; }
.werkzeug .zaehler {
  position: absolute;
  top: 2px; right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: var(--orange);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* ---------- 3 Bausteine -------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--blau);
  color: #fff;
  border: 1px solid var(--blau);
  border-radius: var(--radius);
  padding: 12px 22px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.knopf:hover { background: var(--blau-tief); border-color: var(--blau-tief); }
.knopf.orange { background: var(--orange); border-color: var(--orange); color: #fff; }
.knopf.orange:hover { filter: brightness(.94); }
.knopf.weiss { background: #fff; color: var(--blau); border-color: #fff; }
.knopf.weiss:hover { background: #f2f4fa; }
.knopf.rand { background: transparent; color: var(--blau); border-color: var(--blau-linie); }
.knopf.rand:hover { background: var(--blau-hell); }
.knopf.voll { width: 100%; }
.knopf.klein { padding: 8px 14px; font-size: 14px; }
.knopf svg { width: 17px; height: 17px; }

.abschnitt { padding: 52px 0; }
.abschnitt.grau { background: var(--grund); }
.abschnitt-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf a {
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.abschnitt-kopf a::after { content: " ›"; }

.marker {
  display: inline-block;
  background: var(--blau);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 3px;
  margin-bottom: 16px;
}
.marker.orange { background: var(--orange); }

/* ---------- 4 Startseite ------------------------------------------- */

/* Hero – füllt zusammen mit dem Kopf genau einen Bildschirm */
.buehne {
  position: relative;
  min-height: calc(100vh - var(--kopf-gesamt));
  min-height: calc(100svh - var(--kopf-gesamt));   /* ohne Browserleisten auf dem Handy */
  max-height: 900px;
  display: flex;
  align-items: center;
  background: var(--blau-tief);
  overflow: hidden;
}
.buehne > picture {
  position: absolute; inset: 0;
  display: block;
}
.buehne-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Abdunklung statt Blaustich: Der blaue Schleier hat die Fliesen umgefaerbt –
   ein Kunde soll den echten Farbton sehen. Neutrales Schwarz mit geringer
   Deckkraft, nur links stark genug, damit die weisse Schrift lesbar bleibt. */
.buehne::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,0) 72%);
}
/* Der Text sitzt im selben Raster wie Logo, Navigation und alle Abschnitte darunter */
.buehne .innen { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 56px; }
.buehne-text { max-width: 640px; color: #fff; }
.buehne-text h1 {
  color: #fff;
  font-size: clamp(36px, 5.2vw, 62px);
  line-height: 1.1;
  margin-bottom: 16px;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.buehne-text p { color: rgba(255,255,255,.92); font-size: 18px; max-width: 48ch; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.buehne-text .marker { text-shadow: none; }
.buehne-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* Kategoriekacheln */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 20px;
}
.kachel {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  background: var(--blau-hell);
}
.kachel picture { display: block; width: 100%; height: 100%; }
.kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.kachel:hover img { transform: scale(1.05); }
/* Abdunklung nur im unteren Viertel, und neutral statt blau.
   Der blaue Schleier hat die Fliesenfarbe verfaelscht – genau das, was
   ein Kunde hier beurteilen will. Ganz weglassen geht trotzdem nicht:
   Die weisse Beschriftung braucht Halt, sonst verschwindet sie auf
   hellen Motiven. */
.kachel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 45%, transparent 100%);
}
.kachel span {
  position: absolute;
  left: 18px; right: 18px; bottom: 15px;
  z-index: 2;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .01em;
  /* Leichter Schatten statt staerkerer Abdunklung: haelt die Schrift auch
     auf hellen Motiven lesbar, ohne das Bild wieder zuzudecken. */
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.kachel span svg { width: 18px; height: 18px; opacity: .9; flex: 0 0 auto; }
.kachel .platzhalter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 54px; font-weight: 700;
  color: rgba(31,42,99,.22);
}

/* Produktkarte */
.ware-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 20px;
}
.ware {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.ware:hover { box-shadow: var(--schatten-hoch); transform: translateY(-2px); }
.ware-bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--blau-hell);
  overflow: hidden;
}
.ware-bild img { width: 100%; height: 100%; object-fit: cover; }
.ware-bild .platzhalter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 700;
  color: rgba(31,42,99,.2);
}
.merken {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--linie);
  border-radius: 50%;
  color: var(--text-blass);
  cursor: pointer;
  z-index: 3;
}
.merken:hover { color: var(--orange); border-color: var(--orange); }
.merken svg { width: 17px; height: 17px; }
/* Gemerkt: gefuelltes Herz in Orange. Der Unterschied muss auch ohne
   Farbe erkennbar sein – deshalb zusaetzlich der volle Rand. */
.merken.aktiv { color: var(--orange); border-color: var(--orange); background: #fff; }
.merken.aktiv svg { fill: var(--orange); }

/* --- Herz auf der Produktseite -------------------------------------- *
 * Dort liegt es nicht auf einem Bild, sondern neben der Überschrift.
 * Deshalb die absolute Positionierung zurücknehmen und etwas grösser:
 * Auf der Kachel ist es ein Beiwerk, hier eine bewusste Entscheidung.
 * -------------------------------------------------------------------- */
.titelzeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.titelzeile h1 { margin: 0; }

.merken.gross {
  position: static;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-top: 2px;
}
.merken.gross svg { width: 21px; height: 21px; }

/* Kurze Rueckmeldung nach dem Merken */
.merk-meldung {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 16px);
  z-index: 95;
  max-width: min(92vw, 460px);
  padding: 13px 20px;
  border-radius: var(--radius);
  background: var(--blau);
  color: #fff;
  font-size: 14.5px;
  box-shadow: var(--schatten-hoch);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.merk-meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }

.ware-text { padding: 15px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.ware-text h3 { margin: 0 0 4px; font-size: 16px; }
.ware-text h3 a { color: var(--text); text-decoration: none; }
.ware-text h3 a:hover { color: var(--blau); }

/* --- Ganze Kachel anklickbar ---------------------------------------- *
 * Der Titel-Verweis zieht seine Klickfläche über die komplette Karte,
 * Bild eingeschlossen. `.ware` hat bereits `position: relative`, daran
 * richtet sich die Fläche aus.
 *
 * Nur die Fläche wird gedehnt, nicht der Verweis selbst – deshalb
 * bleibt es in der Linkliste bei einem einzigen Eintrag pro Kachel.
 *
 * Wichtig ist die Stapelfolge:
 *   z-index 1  die gedehnte Fläche
 *   z-index 2  Herz, Warenkorb, Versand-Verweis
 * Ohne das läge die Fläche über den Bedienelementen und würde jeden
 * Klick darauf abfangen.
 * ------------------------------------------------------------------- */
.ware-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.ware-bild .merken,
.ware-grundpreis a,
.ware-aktion {
  position: relative;
  z-index: 2;
}

/* Der Zeiger zeigt schon über dem Bild an, dass es weitergeht. */
.ware-bild { cursor: pointer; }

/* Damit die gedehnte Fläche das Markieren von Text nicht ganz
   verhindert: Preis und Merkmale liegen darüber, sind aber selbst
   nicht anklickbar – ein Klick geht durch sie hindurch zum Verweis. */
.ware-preis,
.ware-merkmale,
.zustand {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.ware-merkmale {
  font-size: 13px;
  color: var(--text-blass);
  margin: 0 0 10px;
  min-height: 34px;
}
.ware-preis {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 3px;
}
.ware-preis .je { font-size: 13px; font-weight: 400; color: var(--text-blass); }
.ware-grundpreis { font-size: 12px; color: var(--text-blass); margin: 0 0 10px; }

/* Angebot: Der Aktionspreis wird farbig, der alte Preis daneben gestrichen */
.ware-preis.aktion { color: var(--orange); }
.ware-preis .statt {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-blass);
  text-decoration: line-through;
}
.preisschild {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: var(--radius);
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.zustand {
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.zustand::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.zustand.verfuegbar { color: var(--gruen); }
.zustand.wenige     { color: var(--rot); }
.zustand.unterwegs  { color: var(--orange); }
.zustand.anfrage    { color: var(--text-blass); }

.ware-aktion { display: flex; gap: 8px; margin-top: auto; }
.ware-aktion .knopf { flex: 1; padding: 10px 12px; font-size: 14px; }
.ware-aktion .korb {
  flex: 0 0 auto;
  width: 42px;
  padding: 0;
  background: #fff;
  color: var(--blau);
  border-color: var(--linie);
}
.ware-aktion .korb:hover { background: var(--blau-hell); border-color: var(--blau-linie); }

/* Lieferplanung */
.planbar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: center;
}
.schritte { display: flex; align-items: flex-start; gap: 8px; }
.schritt { flex: 1; text-align: center; }
.schritt-nr {
  width: 30px; height: 30px;
  margin: 0 auto 14px;
  border: 1.5px solid var(--blau-linie);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700;
  color: var(--blau);
}
.schritt-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  margin-bottom: 14px;
  color: var(--blau);
}
.schritt-symbol svg { width: 52px; height: 52px; stroke-width: 1.1; }
.schritt h3 { font-size: 15px; margin-bottom: 5px; }
.schritt p { font-size: 13.5px; color: var(--text-blass); margin: 0; }
.schritt-pfeil { color: var(--blau-linie); font-size: 22px; padding-top: 8px; flex: 0 0 auto; }

.lieferbox {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--schatten);
}
.lieferbox .titel { font-size: 14px; color: var(--text-blass); margin-bottom: 6px; }
.lieferbox .gross { font-size: 26px; font-weight: 700; color: var(--blau); margin-bottom: 4px; }
.lieferbox .datum { font-size: 14px; color: var(--text-blass); margin-bottom: 16px; }
.lieferbox p { font-size: 14px; margin-bottom: 18px; }

/* Stil-Reiter */
.reiter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.reiter a {
  padding: 8px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  background: #fff;
}
.reiter a:hover { border-color: var(--blau-linie); background: var(--blau-hell); }
.reiter a.aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }

/*
 * Bildergruppe je Stil – vier Motive, keine Luecke.
 *
 * Aufteilung:
 *   Zeile 1:  zwei quadratische Bilder  |  ein hohes Bild rechts,
 *   Zeile 2:  das breite Raumbild ueber zwei Spalten  |  (hohes Bild reicht herunter)
 *
 * Vorher sass das breite Bild allein unten links und darueber blieb die
 * Spalte leer. Jetzt spannt es sich ueber beide linken Spalten, und das
 * hohe Bild rechts reicht durch beide Zeilen – so ist jede Flaeche belegt
 * und das Raumbild bleibt trotzdem im Querformat und unten.
 *
 * `display: contents` bei .gestapelt loest den Zwischenbehaelter auf,
 * sodass seine beiden Bilder direkt im Raster liegen. Ohne das liessen
 * sie sich nicht einzeln platzieren.
 */
.stimmung {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}
/* Wichtig: „display: grid" oben schlaegt das hidden-Attribut des Browsers.
   Ohne diese Zeile stehen alle Stilgruppen gleichzeitig untereinander. */
.stimmung[hidden] { display: none; }

.stimmung .gestapelt { display: contents; }
.stimmung > *,
.stimmung .gestapelt > * {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--blau-hell);
  display: block;
}

/* Die Seitenverhaeltnisse sind aufeinander abgestimmt: Aus 3:2 oben und
   5:2 unten ergibt sich fuer das rechte Bild rund 2:3 – ein normales
   Hochformat. Waeren die oberen Bilder quadratisch, wuerde es zu einem
   schmalen Streifen. */
.stimmung .gestapelt > *:nth-child(1) { grid-column: 1; grid-row: 1; aspect-ratio: 3 / 2; }
.stimmung .gestapelt > *:nth-child(2) { grid-column: 2; grid-row: 1; aspect-ratio: 3 / 2; }
.stimmung .hoch { grid-column: 3; grid-row: 1 / 3; }
.stimmung .quer { grid-column: 1 / 3; grid-row: 2; aspect-ratio: 5 / 2; }

.stimmung img, .stimmung picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.stimmung a { transition: transform .35s; }
.stimmung a:hover img { transform: scale(1.04); }
.stimmung a img { transition: transform .35s; }

/* ---------- Standortkarte (Zwei-Klick) ------------------------------ */

.karte-block {
  position: relative;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--blau-hell);
  aspect-ratio: 21 / 9;
}
.karte-block.gross { aspect-ratio: 16 / 7; }
.karte-vorschau { position: absolute; inset: 0; display: flex; align-items: center; }
/* Angedeutetes Stadtraster – eigenes CSS statt Bild, kostet null Bytes */
.karte-gitter {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(31,42,99,.09) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  rgba(31,42,99,.09) 0 1px, transparent 1px 64px),
    linear-gradient(120deg, rgba(31,42,99,.10) 0%, transparent 60%);
}
.karte-inhalt {
  position: relative;
  max-width: 420px;
  margin-left: 6%;
  padding: 26px;
  border-radius: var(--radius-gross);
  background: rgba(255,255,255,.94);
  box-shadow: var(--schatten-hoch);
}
.karte-nadel { width: 30px; height: 30px; color: var(--orange); margin-bottom: 10px; }
.karte-anschrift { font-size: 15.5px; line-height: 1.6; margin-bottom: 16px; }
.karte-inhalt .knopf { margin: 0 8px 8px 0; }
.karte-hinweis { font-size: 12px; color: var(--text-blass); margin: 8px 0 0; line-height: 1.5; }
.karte-rahmen { position: absolute; inset: 0; }
.karte-rahmen iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Bewertungen --------------------------------------------- */

.bewertungen {
  display: grid;
  /* 340 statt 300 px: Der Betriebsname "Heizungs- & Sanitaertechnik
     Baedertraum, Loehne" brach vorher auf zwei Zeilen um. */
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 34px;
  /* stretch statt start: Beide Spalten sind jetzt gleich hoch, damit
     die linke ihren Inhalt senkrecht mittig setzen kann. Mit "start"
     waere die Spalte nur so hoch wie ihr Inhalt - dann gaebe es nichts
     zu zentrieren, und die Zahlen klebten oben, waehrend die Karte
     daneben weit nach unten reicht. */
  align-items: stretch;
}
/* Linke Hälfte: die Bewertungen der Schwestersparte. Hieß früher
   .bewertung-note – der Name passte nicht mehr, seit dort auch steht,
   WEM die Note gehört. */
.bewertung-sparte {
  text-align: center;
  /* Senkrechte Mitte. flex mit justify-content:center ist hier
     zuverlaessiger als align-self, weil der Block mehrere Kinder hat
     (Quelle, Name, Note, Sterne, Anzahl, Knopf). */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Quelle der Bewertungen: Zeichen und Wort in einer Zeile. Kein farbiger
   Kasten mehr drumherum – das Google-G traegt sich selbst und wirkt
   glaubwuerdiger, wenn es nicht wie eine Werbeplakette aussieht. */
.bewertung-quelle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-blass);
  text-align: left;
}
/* ACHTUNG: Diese Regel schlägt die width/height-Angaben im HTML.
   Wer das Zeichen vergrößern will, muss es HIER tun – die Zahl in
   $googleZeichen() steuert nur das Seitenverhältnis für den Browser
   (verhindert das Springen des Layouts beim Laden). Beide Werte
   deshalb gleich halten: 30. */
.bewertung-quelle img { width: 34px; height: 34px; display: block; }

/* Der Betriebsname. Bewusst nicht kleingedruckt: Er ist der Grund,
   warum der Baustein überhaupt zulässig ist. */
.sparte-name {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--blau);
  line-height: 1.4;
}

.bewertung-sparte .note { font-size: 64px; font-weight: 700; line-height: 1; margin: 14px 0 10px; }
/* Zeichen im Knopf mittig zur Schrift */
.bewertung-sparte .knopf img { width: 16px; height: 16px; display: block; }
/* Die Regel für ".note .von" ist entfallen – das "/ 5" hinter der Note
   gibt es nicht mehr, siehe Begründung in _bewertungen.php. Eine
   Regel ohne zugehöriges Element bleibt sonst jahrelang stehen und
   führt beim nächsten Umbau in die Irre. */
.bewertung-sparte .anzahl { font-size: 14.5px; color: var(--text-blass); margin: 12px 0 18px; }

/* Rechte Hälfte: die Bitte um eine Bewertung für den Fliesenhandel. */
.bewertung-aufruf .karte { height: 100%; }
.bewertung-aufruf h2 { margin: 0 0 12px; font-size: 20px; }
.bewertung-aufruf p { margin: 0 0 14px; max-width: 62ch; }
.bewertung-aufruf .knopf img { width: 18px; height: 18px; display: block; }

.stimmen-titel {
  margin: 30px 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-blass);
}

/* Pflichtangabe zur Echtheit – klein, aber lesbar. Nicht ausgegraut:
   Eine Pflichtangabe, die man absichtlich schwer lesbar macht, gilt als
   nicht erteilt. */
.bewertung-echtheit {
  /* Mittig unter beiden Hälften. `max-width` begrenzt die Zeilenlänge,
     `auto` links und rechts rückt den so entstandenen Block in die
     Mitte – ohne die Breitenbegrenzung würde die Zeile über die volle
     Seite laufen und wäre schlecht lesbar. */
  margin: 26px auto 0;
  max-width: 78ch;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-blass);
}

.sterne { display: inline-flex; gap: 3px; }
.stern { position: relative; display: block; width: 24px; height: 24px; }
.stern svg { width: 24px; height: 24px; display: block; }
.stern-leer { fill: #dfe3ea; stroke: none; }
.stern-voll {
  position: absolute; inset: 0;
  overflow: hidden;
  display: block;
}
.stern-voll svg { fill: #f5a623; stroke: none; }
.sterne.klein .stern, .sterne.klein .stern svg { width: 16px; height: 16px; }
/* Groessere Sterne nur in der Sparten-Spalte. Die Grundgroesse von
   24 px gilt weiter fuer die Einzelstimmen weiter unten - dort waeren
   30 px zu laut. */
.bewertung-sparte .stern,
.bewertung-sparte .stern svg { width: 30px; height: 30px; }
.bewertung-sparte .sterne { gap: 4px; }

.bewertung-stimmen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}
.stimme {
  margin: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
}
.stimme blockquote {
  margin: 10px 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
.stimme blockquote::before { content: "„"; }
.stimme blockquote::after  { content: "\201C"; }
.stimme figcaption { font-size: 13.5px; font-weight: 600; color: var(--text-blass); }

/* Versandfortschritt im Warenkorb */
.versandbalken { margin-top: 12px; }
.versandbalken .balken {
  height: 7px;
  border-radius: 5px;
  background: var(--blau-hell);
  overflow: hidden;
}
.versandbalken .balken span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--orange);
  transition: width .3s ease;
}
.versandfrei { display: flex; align-items: center; gap: 7px; color: var(--gruen); font-weight: 600; }
.versandfrei svg { width: 17px; height: 17px; flex: 0 0 auto; }

.ausstellung-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

/* Angebotsseite */
.angebot-kopf { max-width: 70ch; margin-bottom: 26px; }
.angebot-kopf h1 { margin: 10px 0 10px; }
.angebot-kopf .prozent { color: var(--orange); }
.angebot-kopf .vorspann { font-size: 16.5px; color: var(--text-blass); margin: 0; }

/* Ausstellung */
.ausstellung { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.ausstellung-bild { min-height: 380px; background: var(--blau-hell); }
.ausstellung-bild img { width: 100%; height: 100%; object-fit: cover; }
.ausstellung-text { padding: 46px; background: var(--grund); }
.ausstellung-text .marker { background: none; color: var(--orange); padding: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.ausstellung-daten { margin: 20px 0 24px; font-size: 15px; }
.ausstellung-daten .zeile { display: flex; gap: 10px; margin-bottom: 10px; }
.ausstellung-daten svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; color: var(--orange); }
.ausstellung-daten dt { font-weight: 600; margin-bottom: 2px; }
.ausstellung-daten dd { margin: 0 0 8px; color: var(--text-blass); }

/* Vertrauensleiste */
.vertrauen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(196px, 100%), 1fr));
  gap: 24px 22px;
  padding: 34px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.vertrauen .punkt { display: flex; gap: 16px; align-items: flex-start; }
.vertrauen svg {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  color: var(--blau);
  stroke-width: 1.5;          /* groesser darf nicht klobiger heissen */
  margin-top: 1px;
}
.vertrauen h3 { font-size: 15.5px; margin-bottom: 4px; }
.vertrauen p { font-size: 13.5px; color: var(--text-blass); margin: 0; }

/* Ratgeber */
.ratgeber-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; }
.beitrag {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s;
}
.beitrag:hover { box-shadow: var(--schatten-hoch); }
.beitrag-bild { aspect-ratio: 16 / 9; background: var(--blau-hell); }
.beitrag-bild img { width: 100%; height: 100%; object-fit: cover; }
.beitrag-text { padding: 16px 18px 18px; }
.beitrag-text h2, .beitrag-text h3 { margin-bottom: 6px; font-size: 17px; }
.beitrag-text p { font-size: 14px; color: var(--text-blass); margin-bottom: 10px; }
.beitrag-text .mehr { font-size: 14px; font-weight: 600; color: var(--blau); }
.beitrag-text .mehr::after { content: " →"; }
.beitrag-thema {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ---------- Ratgeberbeitrag ---------------------------------------- */

.beitrag-kopf { max-width: 74ch; margin-bottom: 24px; }
.beitrag-kopf h1 { margin: 8px 0 14px; }
.beitrag-kopf .vorspann { font-size: 18px; line-height: 1.6; color: var(--text-blass); }
.beitrag-hero { border-radius: var(--radius-gross); overflow: hidden; margin-bottom: 34px; }
.beitrag-hero img { width: 100%; height: auto; display: block; }

/* Fliesstext bewusst schmal: Ueber rund 75 Zeichen je Zeile findet das
   Auge beim Zeilenwechsel den Anfang schlechter wieder. */
.fliesstext { max-width: 72ch; }
.fliesstext h2 {
  margin: 34px 0 12px;
  font-size: 23px;
  scroll-margin-top: 110px;   /* sonst verdeckt der klebende Kopf die Zeile */
}
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext p { font-size: 16.5px; line-height: 1.75; margin-bottom: 16px; }
.fliesstext ul { margin: 0 0 18px; padding-left: 22px; }
.fliesstext li { font-size: 16.5px; line-height: 1.7; margin-bottom: 8px; }
.fliesstext .daten { margin: 6px 0 22px; font-size: 15px; }
.fliesstext .daten th { width: auto; }

.frage {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0 16px;
  margin-bottom: 10px;
  background: #fff;
}
.frage summary {
  padding: 14px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; color: var(--orange); font-size: 20px; line-height: 1; }
.frage[open] summary::after { content: "−"; }
.frage p { margin: 0 0 14px; font-size: 15.5px; color: var(--text-blass); line-height: 1.7; }

.inhalt-liste { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.inhalt-liste li { margin-bottom: 9px; }
.inhalt-liste a { color: var(--text); text-decoration: none; }
.inhalt-liste a:hover { color: var(--blau); text-decoration: underline; }

/* ---------- Rubrikuebersicht (Raeume, Stile) ------------------------ */

.rubrik-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  margin-top: 28px;
}
.rubrik {
  display: block;
  padding: 24px 26px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s, border-color .18s;
}
.rubrik:hover { box-shadow: var(--schatten-hoch); border-color: var(--blau-linie); }
.rubrik h2 { font-size: 20px; margin-bottom: 8px; }
.rubrik p { font-size: 14.5px; color: var(--text-blass); margin-bottom: 12px; }
.rubrik .mehr { font-size: 14px; font-weight: 600; color: var(--blau); }
.rubrik .mehr::after { content: " →"; }

/* Newsletter */
.newsletter { background: var(--blau); color: #fff; padding: 34px 0; }
.newsletter .innen { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.newsletter h2 { color: #fff; margin-bottom: 4px; font-size: 22px; }
.newsletter p { color: rgba(255,255,255,.82); margin: 0; font-size: 14.5px; }
.newsletter form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter input[type=email] {
  flex: 1;
  min-width: 200px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
}
.newsletter .zustimmung {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: rgba(255,255,255,.8);
  margin-top: 10px; width: 100%;
}
.newsletter .zustimmung a { color: #fff; }

/* ---------- 5 Katalog ---------------------------------------------- */

.brotkrume { font-size: 13.5px; color: var(--text-blass); padding: 16px 0; }
.brotkrume a { color: var(--text-blass); text-decoration: none; }
.brotkrume a:hover { color: var(--blau); text-decoration: underline; }

.katalog { display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: start; }

/* Zwei Spalten mit Inhalt links und Seitenspalte rechts.
   Als Klasse statt inline, sonst schlagen die Media Queries nicht durch. */
.katalog.seitenspalte { grid-template-columns: minmax(0, 1fr) 340px; }
.katalog.seitenspalte-breit { grid-template-columns: minmax(0, 1fr) 360px; }

/* Bleibt beim Scrollen stehen – auf kleinen Geräten abgeschaltet */
.haftend { position: sticky; top: 96px; }
.filterspalte {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  padding-right: 4px;
}
.filterspalte.laedt { opacity: .55; pointer-events: none; }

.filter-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.filter-kopf h2 { font-size: 17px; margin: 0; }
.filter-leeren { font-size: 13px; color: var(--text-blass); }

.filterspalte input[type=search] {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14.5px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--grund);
  margin-bottom: 6px;
}

/* Eine Gruppe je Merkmal. <details> statt Skript: klappt auch ohne
   JavaScript und ist von Haus aus mit der Tastatur bedienbar. */
.filter-gruppe { border-bottom: 1px solid var(--linie); padding: 4px 0; }
.filter-gruppe > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 2px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.filter-gruppe > summary::-webkit-details-marker { display: none; }
.filter-gruppe > summary::after {
  content: "";
  margin-left: auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-blass);
  border-bottom: 2px solid var(--text-blass);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s;
}
.filter-gruppe[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.filter-gruppe > summary:hover { color: var(--blau); }

.filter-marke {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 20px;
  background: var(--orange); color: #fff;
  font-size: 11.5px; font-weight: 700;
}

.filter-werte { padding: 0 2px 10px; }
/* Lange Listen bekommen eine eigene Rollflaeche, damit die Spalte nicht
   endlos wird – so wie bei den Filtern grosser Haendler. */
.filter-werte.rollbar { max-height: 218px; overflow-y: auto; padding-right: 6px; }
.filter-werte.rollbar::-webkit-scrollbar { width: 7px; }
.filter-werte.rollbar::-webkit-scrollbar-thumb {
  background: var(--blau-linie); border-radius: 6px;
}

.filter-wert {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 4px;
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--radius);
}
.filter-wert:hover { background: var(--blau-hell); }
.filter-wert input[type=checkbox] {
  width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--blau);
}
.filter-wert > span:nth-of-type(1) { flex: 1; min-width: 0; }
.filter-anzahl { color: var(--text-blass); font-size: 13px; flex: 0 0 auto; }
/* Gewaehlt, aber ohne Treffer: blass, jedoch anklickbar. Wer sich in eine
   Ecke gefiltert hat, muss wieder herausfinden. */
.filter-wert.ohne-treffer > span { color: var(--text-blass); text-decoration: line-through; }
.filter-wert.ohne-treffer .filter-anzahl { text-decoration: none; }

/* „Filter anwenden" braucht nur, wer ohne JavaScript unterwegs ist.
   Mit Skript wirkt jeder Haken sofort, dann ist der Knopf überflüssig –
   und weil das per CSS ausgeblendet wird, blitzt er nicht kurz auf. */
.filter-absenden { margin: 16px 0 0; }
html.js .filter-absenden { display: none; }
.filter-zu, .filter-auf { display: none; }
.menue-zu { display: none; }   /* nur am Handy sichtbar */

/* Gewaehlte Filter ueber der Trefferliste */
.filter-merker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.merker {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--blau-linie);
  border-radius: 20px;
  background: var(--blau-hell);
  color: var(--blau);
  font-size: 13.5px;
  text-decoration: none;
}
.merker:hover { background: var(--blau); color: #fff; border-color: var(--blau); }
.merker span[aria-hidden] { font-size: 16px; line-height: 1; opacity: .7; }
.merker.leeren { background: none; border-style: dashed; }

.katalog-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.katalog-kopf .anzahl { font-size: 14px; color: var(--text-blass); }

.blaettern { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; font-size: 14px; color: var(--text-blass); }

/* ---------- 6 Detailseite ------------------------------------------ */

.detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; padding-bottom: 20px; }
.detail-galerie { position: sticky; top: 96px; }
.detail-bild {
  aspect-ratio: 1 / 1;
  background: var(--blau-hell);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.detail-bild img { width: 100%; height: 100%; object-fit: cover; }
.detail-bild .platzhalter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 88px; font-weight: 700; color: rgba(31,42,99,.18);
}

/* ---------- Bildergalerie der Produktseite -------------------------- */
/* Umschaltung rein ueber Radioknoepfe – kein JavaScript noetig. Die
   Reihenfolge im Markup (erst alle Schalter, dann Buehne, dann Vorschau)
   ist Absicht: Nur so erreichen die Geschwister-Selektoren beides. */

.galerie { position: relative; }
.galerie-schalter { position: absolute; opacity: 0; pointer-events: none; }

.galerie-buehne {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--blau-hell);
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.galerie-blatt {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.galerie-blatt img { width: 100%; height: 100%; object-fit: cover; }

/* Ausgewaehltes Blatt sichtbar stellen */
.galerie-schalter:nth-of-type(1):checked ~ .galerie-buehne [data-blatt="0"],
.galerie-schalter:nth-of-type(2):checked ~ .galerie-buehne [data-blatt="1"],
.galerie-schalter:nth-of-type(3):checked ~ .galerie-buehne [data-blatt="2"],
.galerie-schalter:nth-of-type(4):checked ~ .galerie-buehne [data-blatt="3"] { opacity: 1; }

/* Flex statt Raster: So sitzen drei Vorschauen genauso sauber wie vier,
   ohne dass rechts eine Luecke bleibt. */
.galerie-vorschau {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.galerie-vorschau label {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--blau-hell);
  transition: border-color .15s;
}
.galerie-vorschau label:hover { border-color: var(--blau-linie); }
.galerie-vorschau img { width: 100%; height: 100%; object-fit: cover; }

/* Aktive Vorschau markieren */
.galerie-schalter:nth-of-type(1):checked ~ .galerie-vorschau [data-vorschau="0"],
.galerie-schalter:nth-of-type(2):checked ~ .galerie-vorschau [data-vorschau="1"],
.galerie-schalter:nth-of-type(3):checked ~ .galerie-vorschau [data-vorschau="2"],
.galerie-schalter:nth-of-type(4):checked ~ .galerie-vorschau [data-vorschau="3"] {
  border-color: var(--orange);
}
/* Fokus sichtbar machen – der Schalter selbst ist unsichtbar */
/* Der Wisch-Hinweis gilt nur für Touchgeräte – am Rechner schaltet man
   über die Vorschaubilder um. */
.galerie-hinweis { display: none; }

.galerie-schalter:focus-visible ~ .galerie-vorschau label { outline: 2px solid var(--blau); }
.detail h1 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 6px; }
.detail .serie { color: var(--text-blass); margin-bottom: 20px; }

.preisblock { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 20px 0; margin-bottom: 22px; }
.preis-gross { font-size: 32px; font-weight: 700; margin: 0; }
.preis-gross .je { font-size: 15px; font-weight: 400; color: var(--text-blass); }
.preis-zusatz { font-size: 13.5px; color: var(--text-blass); margin: 4px 0 0; }
.preis-alt { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.preis-alt .statt { font-size: 15px; color: var(--text-blass); text-decoration: line-through; }
.preis-gross.aktion { color: var(--orange); }
.preisschild.statisch { position: static; }

.zustand-box {
  border-radius: var(--radius);
  padding: 15px 18px;
  margin-bottom: 22px;
  border: 1px solid var(--linie);
  background: var(--grund);
}
.zustand-box strong { display: block; margin-bottom: 2px; }
.zustand-box div { font-size: 14px; color: var(--text-blass); }
.zustand-box.verfuegbar { background: var(--gruen-hell); border-color: #bfe0cd; }
.zustand-box.wenige     { background: var(--rot-hell);   border-color: #eec4c4; }
.zustand-box.unterwegs  { background: var(--orange-hell);border-color: #f0d5ab; }

.mengenform { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.mengenform label { font-size: 13.5px; font-weight: 600; color: var(--text-blass); display: block; margin-bottom: 5px; }
.mengenform input {
  width: 110px; padding: 11px 12px; font: inherit;
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.umrechnung {
  background: var(--blau-hell);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 18px;
}

/* --- Mengenrechner --------------------------------------------------- */
.rechner {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  margin-bottom: 16px;
}
.rechner-kopf {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linie);
}
.rechner-bild {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--blau-hell);
  object-fit: cover;
}
.rechner-titel { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; }
.rechner-preis { text-align: right; margin-left: auto; white-space: nowrap; }
.rechner-preis .jetzt { font-size: 17px; font-weight: 700; color: var(--blau); }
.rechner-preis .je { display: block; font-size: 12px; color: var(--text-blass); font-weight: 400; }
.rechner-preis .jetzt.aktion { color: var(--orange); }
.rechner-preis .statt {
  display: block; font-size: 12px; color: var(--text-blass); text-decoration: line-through;
}

.rechner-koerper { padding: 14px 16px 16px; }

.mengenzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mengenfeld {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--linie);
  border-radius: 40px;
  overflow: hidden;
  background: #fff;
}
.mengenfeld button {
  width: 36px;
  border: 0;
  background: #fff;
  color: var(--blau);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.mengenfeld button:hover { background: var(--blau-hell); }
.mengenfeld input {
  width: 74px;
  border: 0;
  border-left: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  padding: 10px 6px;
  font: inherit;
  text-align: center;
}
.mengenfeld input:focus { outline: 2px solid var(--blau); outline-offset: -2px; }
.mengeneinheit { font-size: 14.5px; color: var(--text-blass); }
.pakete { font-size: 14.5px; font-weight: 600; color: var(--blau); }

.verschnitt-zeile {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text-blass);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.verschnitt-zeile input { width: 16px; height: 16px; accent-color: var(--blau); }

.rechner-fakten {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text-blass);
  line-height: 1.7;
}
.rechner-fakten strong { color: var(--text); font-weight: 600; }

.rechner-summe {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
}
.rechner-summe strong { font-size: 17px; }

.rechner-hinweis {
  margin-top: 10px;
  font-size: 13px;
  color: var(--orange);
  background: var(--orange-hell);
  border-radius: 4px;
  padding: 8px 10px;
}

.zubehoer-block {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: #fff;
}
.zubehoer-block > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.zubehoer-block > summary::-webkit-details-marker { display: none; }
.zubehoer-block > summary::after {
  content: "+ hinzufügen";
  font-size: 13px;
  font-weight: 600;
  color: var(--blau);
  border: 1px solid var(--blau-linie);
  border-radius: 40px;
  padding: 5px 12px;
  white-space: nowrap;
}
.zubehoer-block[open] > summary::after { content: "− schließen"; }
.zubehoer-inhalt { padding: 0 16px 14px; }

/* ====================================================================
   Ausklappbereiche der Produktseite
   ====================================================================
   Beschreibung und Technische Angaben. Gebaut mit <details>, damit die
   Klapptechnik im Browser bleibt: ohne Skript bedienbar, mit der
   Tastatur erreichbar, und – der eigentliche Grund – Google liest auch
   den zugeklappten Inhalt. Genau dort stehen Format, Stärke und
   Rutschklasse, also die Angaben, nach denen gesucht wird.
   ==================================================================== */
.ausklapp { max-width: 900px; }

.ausklapp-block {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.ausklapp-block > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--blau);
  list-style: none;                 /* Dreieck von Firefox weg */
}
.ausklapp-block > summary::-webkit-details-marker { display: none; }
.ausklapp-block > summary:hover { background: var(--blau-hell); }
.ausklapp-block > summary:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: -2px;
}

/* Pfeil aus zwei Strichen – dreht sich beim Öffnen. Kein Zeichen aus
   einer Schriftart, damit er überall gleich aussieht. */
.ausklapp-block > summary::after {
  content: "";
  width: 9px; height: 9px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.ausklapp-block[open] > summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.ausklapp-inhalt {
  padding: 4px 20px 22px;
  border-top: 1px solid var(--linie);
  padding-top: 20px;
}
.ausklapp-inhalt h3 {
  font-size: 17px;
  margin: 0 0 12px;
}
.ausklapp-inhalt h3 + * { margin-top: 0; }
.ausklapp-inhalt > h3:not(:first-child) { margin-top: 26px; }
.ausklapp-inhalt p { max-width: 70ch; }

/* Produktvorteile: fetter Titel, darunter die Erläuterung. */
.vorteile {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 70ch;
}
.vorteile li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.vorteile li::before {
  content: "";
  position: absolute;
  left: 2px; top: .55em;
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 1px;
}
.vorteile strong { display: block; }
.vorteile span {
  display: block;
  color: var(--text-blass);
  font-size: 14.5px;
  margin-top: 2px;
}

/* "Auf einen Blick" – zwei Spalten aus einer Beschreibungsliste.
   `display: grid` auf der <dl> und `display: contents` braucht es
   hier nicht: dt und dd sind bereits direkte Kinder. */
.merkmalsliste {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 0;
  margin: 0;
  max-width: 620px;
}
.merkmalsliste dt,
.merkmalsliste dd {
  padding: 9px 0;
  margin: 0;
  border-bottom: 1px solid var(--linie);
}
.merkmalsliste dt { font-weight: 600; padding-right: 24px; }
.merkmalsliste dd { color: var(--text-blass); }
.merkmalsliste dt:last-of-type,
.merkmalsliste dd:last-of-type { border-bottom: none; }

.technische-daten { max-width: 620px; }
.technische-daten th {
  width: 44%;
  font-weight: 600;
  vertical-align: top;
}

/* Handy: die zweispaltige Merkmalsliste bricht auf eine Spalte um,
   sonst quetscht sich der Wert in 60 Pixel. */
@media (max-width: 560px) {
  .ausklapp-block > summary { padding: 14px 15px; font-size: 12.5px; }
  .ausklapp-inhalt { padding: 16px 15px 18px; }
  .merkmalsliste { grid-template-columns: 1fr; }
  .merkmalsliste dt { padding-bottom: 0; border-bottom: none; }
  .merkmalsliste dd { padding-top: 2px; }
  .merkmalsliste dt:last-of-type { border-bottom: none; }
}

/* ====================================================================
   Formularbausteine
   ====================================================================
   Diese Klassen stammen aus der Warenwirtschaft und sind mit den neuen
   Seiten (Muster, Fliesenrechner, Mengenrechner) auf die Webseite
   gewandert. Sie waren dort nie definiert – die älteren Formulare
   arbeiten mit `.formular label`.

   Statt drei Ansichten umzuschreiben, sind die Klassen hier ergänzt.
   Sie ergeben ohnehin die feinere Steuerung: `.feld` fasst Beschriftung,
   Eingabe und Hilfetext zu einer Einheit zusammen, die man als Ganzes
   ausrichten kann.
   ==================================================================== */
.feld { margin-bottom: 16px; }
.feld > label {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  margin: 0 0 5px;
}
.feld input[type=text],
.feld input[type=email],
.feld input[type=tel],
.feld input[type=search],
.feld select,
.feld textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 2px solid var(--blau);
  outline-offset: 0;
  border-color: var(--blau);
}
.feld textarea { resize: vertical; }
.feld.schmal { max-width: 200px; }
.feld.breit  { max-width: 100%; }

/* Erklärung unter einem Feld. Bewusst nicht ausgegraut bis zur
   Unlesbarkeit – ein Hinweis, den niemand liest, hätte man auch
   weglassen können. */
.hilfe {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-blass);
}

.pflicht { color: var(--orange); font-weight: 700; }
.klein-blass { font-size: 13px; color: var(--text-blass); }

/* Zustimmungszeile ausserhalb des Newsletter-Bausteins. Kästchen und
   Text auf gleicher Höhe, Text umbricht sauber neben dem Kästchen. */
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.zustimmung input[type=checkbox] {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--blau);
}

/* Die beiden freiwilligen Werbeeinwilligungen auf der Musterseite.
   Abgesetzt, damit klar ist: Das ist ein eigener Block und nicht Teil
   der Pflichtangaben darüber. */
.einwilligungen {
  margin: 22px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--blau-linie);
  border-radius: var(--radius);
  background: var(--blau-hell);
}
.einwilligungen legend {
  padding: 0 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--blau);
}
.einwilligungen .zustimmung:first-of-type { margin-top: 8px; }

/* Beschriftung über dem Mengenfeld der Produktseite. Ohne sie steht
   dort nur eine Null zwischen Plus und Minus. */
.rechner-aufforderung {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.rechner-aufforderung .klein-blass { font-weight: 400; }


/* Hinweiszeile in der Kasse, wenn die Lieferadresse übernommen wird. */
.versand-uebernehmen {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 0;
  font-size: 14px;
}

/* ====================================================================
   Fliesenrechner auf /fliesenrechner
   ==================================================================== */
.flaechenrechner { max-width: 640px; }
.flaechenrechner h2 { margin-top: 30px; }
.flaechenrechner h2:first-child { margin-top: 0; }

/* Verschnitt: drei Karten statt einer Auswahlliste. Der Unterschied
   zwischen 5 und 15 Prozent braucht eine Erklärung – die passt in eine
   Karte, aber nicht in eine Zeile eines Klappmenüs. */
.verschnitt-wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 4px;
}
.wahlfeld {
  display: block;
  position: relative;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  background: #fff;
}
.wahlfeld:hover { border-color: var(--blau-linie); }
.wahlfeld input { position: absolute; opacity: 0; pointer-events: none; }
.wahlfeld span { display: block; }
.wahlfeld strong { display: block; font-size: 17px; color: var(--blau); }
.wahlfeld small {
  display: block; margin-top: 3px;
  font-size: 12.5px; line-height: 1.4; color: var(--text-blass);
}
.wahlfeld:has(input:checked) {
  border-color: var(--orange);
  background: var(--orange-hell);
}
.wahlfeld:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 1px; }

/* Rückfall für Browser ohne :has() – dann bleibt die Auswahl unsichtbar,
   deshalb wird das Kästchen dort wieder eingeblendet. */
@supports not selector(:has(*)) {
  .wahlfeld input { position: static; opacity: 1; margin-bottom: 6px; }
}

.rechner-ergebnis {
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--blau-hell);
  border-radius: var(--radius-gross);
}
.rechner-ergebnis[hidden] { display: none; }
.rechner-ergebnis .merkmalsliste { max-width: none; margin-bottom: 12px; }
.rechner-ergebnis dt, .rechner-ergebnis dd { border-bottom-color: var(--blau-linie); }
.rechner-ergebnis dd strong { font-size: 19px; color: var(--blau); }

/* Honigtopf gegen Formular-Maschinen: für Menschen unsichtbar, aber
   nicht per display:none – manche Maschinen erkennen das. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.gesamtleiste {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 16px;
}
.gesamtleiste .betrag { font-size: 24px; font-weight: 700; color: var(--blau); }

.daten { border-collapse: collapse; width: 100%; }
.daten th, .daten td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; font-size: 14.5px; }
.daten th { width: 210px; font-weight: 600; color: var(--text-blass); }
.daten tr:nth-child(odd) { background: var(--grund); }

/* ---------- 7 Formulare und Meldungen ------------------------------ */

.meldung {
  padding: 13px 18px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  border: 1px solid transparent;
  font-size: 15px;
}
.meldung.erfolg  { background: var(--gruen-hell); border-color: #bfe0cd; color: var(--gruen); }
.meldung.fehler  { background: var(--rot-hell);   border-color: #eec4c4; color: var(--rot); }
.meldung.warnung { background: var(--gelb-hell);  border-color: #ecd9ac; color: var(--gelb); }
.meldung.hinweis { background: var(--blau-hell);  border-color: var(--blau-linie); color: var(--blau); }

.karte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.karte.grau { background: var(--grund); }

.formular { max-width: 640px; }
.formular label { display: block; font-weight: 600; font-size: 14.5px; margin: 16px 0 5px; }
.formular input[type=text], .formular input[type=email], .formular input[type=tel], .formular textarea, .formular select {
  width: 100%; padding: 11px 13px; font: inherit;
  border: 1px solid var(--linie); border-radius: var(--radius); background: #fff;
}
.formular textarea { resize: vertical; }
.formular .paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.haken { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; margin-top: 16px; }
.haken input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--blau); }
.versteckt { position: absolute; left: -9999px; }

/* ---------- 8 Fuss -------------------------------------------------- */

.fuss { background: var(--blau-tief); color: rgba(255,255,255,.78); font-size: 14.5px; padding: 44px 0 0; }
.fuss-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr; gap: 30px; }
.fuss h3 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 8px; }
.fuss a { color: rgba(255,255,255,.78); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss .logo-fuss { background: #fff; border-radius: var(--radius); padding: 14px 16px; display: inline-block; margin-bottom: 14px; }
.fuss .logo-fuss img { width: 150px; height: auto; }
.fuss .sozial { display: flex; gap: 12px; margin-top: 14px; }
.fuss .sozial a { display: inline-flex; }
.fuss .sozial svg { width: 19px; height: 19px; }
.fuss-unten {
  margin-top: 36px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
}
/* Zahlarten im Fuß: Symbol und Beschriftung in einem Kärtchen.
   Listenpunkte, weil es eine Aufzählung ist – die Punkte sind
   abgeschaltet, die Bedeutung bleibt für Vorleseprogramme erhalten. */
.zahlarten {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.zahlart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #333;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  /* Feste Höhe, damit ein später ergänztes Markenlogo (PayPal) ohne
     Bruch danebensteht und die Reihe nicht ausfranst. */
  min-height: 26px;
}
.zahlart svg {
  width: 17px;
  height: 17px;
  flex: none;
  /* Etwas dünner als im Fließtext: Auf 17 Pixeln laufen 1,8er Striche
     sonst ineinander und der Geldschein wird zu einem Klecks. */
  stroke-width: 1.6;
  color: var(--blau, #1f2a63);
}

/* ---------- 9 Mobil -------------------------------------------------- */

/* Große Tablets und kleine Notebooks */
@media (max-width: 1080px) {
  .planbar { grid-template-columns: 1fr; }
  .lieferbox { max-width: 460px; }
  .fuss-raster { grid-template-columns: 1fr 1fr 1fr; }
  /* Zwei Spalten: alle vier Bilder gleich gross im Viererblock. Die
     Verschachtelung der grossen Ansicht ginge hier nicht auf und
     hinterliesse wieder eine Luecke. */
  .stimmung { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .stimmung .gestapelt > *:nth-child(1),
  .stimmung .gestapelt > *:nth-child(2),
  .stimmung .hoch,
  .stimmung .quer {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  .kacheln { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
}

/* =====================================================================
   Kopfzeile: Umschalten auf das Burger-Menü

   Bewusst schon bei 1080px und nicht erst beim Handy. Rechnet man die
   waagerechte Navigation aus – Logo, sieben Menüpunkte mit nowrap,
   Suchfeld und drei Werkzeugsymbole –, braucht sie rund 1050px. Darunter
   passte sie nicht mehr in die Zeile, konnte wegen "min-width: auto" im
   Flex-Layout aber auch nicht schrumpfen. Die Folge war genau der weisse
   Rand rechts: Die Seite wurde breiter als das Fenster.
   ===================================================================== */
@media (max-width: 1080px) {

  /* --- Kopf: Burger links, Logo mittig, Warenkorb rechts --- */
  /* --- Servicezeile am Handy --------------------------------------- *
   * Vorher lief sie als umbrechende Flex-Zeile: Der Standort passte
   * allein in die erste Zeile, Lieferung und Telefon drängten sich in
   * die zweite. Das sah nach Zufall aus, weil es Zufall war – der
   * Umbruch richtete sich allein nach der Textlänge.
   *
   * Jetzt ein festes Raster mit zwei Zeilen, nach Wichtigkeit sortiert:
   *
   *   Zeile 1:  Ausstellung in Bünde        |  Telefonnummer (rechts)
   *   Zeile 2:  Kostenlose Lieferung ab …
   *
   * Wo wir sind und wie man uns erreicht, steht damit nebeneinander
   * ganz oben – das sind die beiden Angaben, wegen derer jemand auf
   * dem Handy hier hinschaut.
   *
   * `display: contents` löst den Behälter `.rechts` auf, damit die
   * Telefonnummer direkt im Raster liegt und sich platzieren lässt.
   * ------------------------------------------------------------------ */
  .servicezeile .punkt.optional { display: none; }
  .servicezeile .innen {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 4px;
    column-gap: 12px;
    min-height: 34px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .servicezeile .rechts { display: contents; }

  .servicezeile .innen > a:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .servicezeile .innen > a:nth-of-type(2) { grid-column: 1 / -1; grid-row: 2; }
  .servicezeile .rechts a[href^="tel:"] {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-weight: 600;
  }

  .kopf .innen {
    min-height: 62px;
    gap: 10px;
    justify-content: space-between;
  }

  .burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    margin-left: -8px;
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    z-index: 75;          /* geschlossen: liegt über allem, damit der Tipp trifft */
  }

  /*
   * ------------------------------------------------------------------
   * Menü offen: der Burger verschwindet UNTER der Schublade
   * ------------------------------------------------------------------
   * Die Schublade (nav.haupt) liegt fest über dem ganzen Kopf, hat aber
   * z-index 70 – der Burger mit 75 stand deshalb obenauf und blieb
   * sichtbar. Aus der Zeit, als er selbst zum X wurde: Dann MUSSTE er
   * über der Schublade liegen, sonst hätte man ihn nicht mehr treffen
   * können.
   *
   * Seit die Schublade ihr eigenes Kreuz mitbringt, ist genau das die
   * Ursache für die zwei Symbole übereinander: oben der Burger aus dem
   * Kopf, direkt darunter das Kreuz aus der Schublade.
   *
   * Statt ihn auszublenden wird er nur nach hinten gelegt. Der Unterschied
   * ist wichtig: "display: none" nähme ihm auch seinen Platz, und weil das
   * Logo daneben mittig sitzt, würde es beim Öffnen des Menüs einen Satz
   * zur Seite machen.
   */
  .menue-schalter:checked ~ .innen .burger { z-index: 40; }
  .burger svg { width: 24px; height: 24px; }
  .burger .burger-zu { display: none; }

  /* Schließkreuz in der Schublade, eigene Zeile über der Suche. */
  .menue-zu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    margin: 0 0 14px -10px;
    border-radius: var(--radius);
    color: var(--blau);
    cursor: pointer;
  }
  .menue-zu:hover { background: var(--blau-hell); }
  .menue-zu svg { width: 22px; height: 22px; }

  /* Der Kopf-Burger muss beim offenen Menü nicht mehr zum X werden –
     das übernimmt jetzt das Kreuz in der Schublade. Er bleibt einfach
     der Burger und liegt unter der Schublade. */
  .menue-schalter:checked ~ .innen .burger .burger-auf { display: block; }
  .menue-schalter:checked ~ .innen .burger .burger-zu  { display: none; }

  /* Weniger Abstand oben, weil die Schublade jetzt mit dem Kreuz
     beginnt statt unter dem Kopf durchzustarten. */
  nav.haupt { padding-top: 18px; }

  /*
   * ACHTUNG, hier standen zwei Zeilen zu viel:
   *
   *   .menue-schalter:checked ~ .innen .burger .burger-auf { display: none; }
   *   .menue-schalter:checked ~ .innen .burger .burger-zu  { display: block; }
   *
   * Das ist genau das Gegenteil der beiden Zeilen zwölf Zeilen weiter
   * oben – und weil in CSS bei gleicher Gewichtung die spätere Regel
   * gewinnt, hat es sie ausgehebelt. Der Burger wurde also doch wieder
   * zum X, obwohl die Schublade ihr eigenes Kreuz mitbringt. Auf dem
   * Handy standen dadurch ZWEI Schließkreuze fast übereinander.
   *
   * Rest aus einem früheren Umbau. Nicht wieder einfügen: Wenn der
   * Burger beim offenen Menü wieder zum X werden soll, gehört stattdessen
   * das Kreuz in der Schublade entfernt – zwei sind immer einer zu viel.
   */

  .marke { margin: 0 auto; }
  .marke img { width: 128px; height: auto; }

  .suche { display: none; }             /* die Suche steht im Menü */
  .nur-gross { display: none; }         /* Konto und Merkliste ebenso */
  .kopf-werkzeuge { flex: 0 0 auto; margin-right: -8px; }

  /* --- Aufklappmenü als Seitenfläche --- */
  nav.haupt {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(86vw, 340px);
    z-index: 70;
    display: block;
    margin: 0;
    /* Oben nur noch 20 statt 76 Pixel: Die 76 waren Platz für den
       Burger, der früher über der Schublade schwebte. Er liegt jetzt
       dahinter, also darf das Kreuz nach oben rücken – dorthin, wo man
       zum Schließen hingreift. */
    padding: 20px 18px 28px;
    background: #fff;
    box-shadow: 4px 0 30px rgba(15, 22, 54, .18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-102%);
    transition: transform .25s ease;
  }
  .menue-schalter:checked ~ .innen nav.haupt { transform: translateX(0); }

  nav.haupt > a,
  nav.haupt > .menue > a {
    display: flex;
    justify-content: space-between;
    padding: 12px 10px;
    border-radius: var(--radius);
    font-size: 16.5px;
    font-weight: 600;
    border-bottom: 1px solid var(--linie);
  }
  nav.haupt .pfeil { display: none; }

  /* Untermenüs stehen im Panel offen da – kein zweites Antippen nötig */
  .menue-inhalt {
    position: static;
    display: block;
    border: 0;
    box-shadow: none;
    padding: 2px 0 10px 10px;
    min-width: 0;
  }
  .menue-inhalt a {
    padding: 8px 10px;
    font-size: 15px;
    color: var(--text-blass);
  }

  /* Suchfeld oben im Panel */
  .suche-menue { display: flex; gap: 8px; margin: 0 0 18px; }
  .suche-menue input {
    flex: 1;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    font: inherit;
    background: var(--grund);
  }
  .suche-menue button {
    flex: 0 0 auto;
    width: 44px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: #fff;
    color: var(--blau);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .suche-menue svg { width: 20px; height: 20px; }

  .menue-fuss { display: block; margin-top: 20px; }
  .menue-fuss .knopf { margin: 0 0 10px; }
  .menue-nebenlink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--linie);
    margin-bottom: 6px;
  }
  .menue-nebenlink svg { width: 19px; height: 19px; color: var(--blau); }
  .menue-nebenlink:last-of-type { margin-bottom: 18px; }

  /* Abdunkeln hinter dem Menü */
  .menue-schatten {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(15, 22, 54, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .menue-schalter:checked ~ .menue-schatten { opacity: 1; pointer-events: auto; }

  /* Bühne: Kopf ist jetzt niedriger (34px Servicezeile + 62px Kopf) */
  .buehne { min-height: calc(100svh - 96px); max-height: none; }
}

/* Tablets */
@media (max-width: 900px) {
  .katalog,
  .katalog.seitenspalte,
  .katalog.seitenspalte-breit { grid-template-columns: 1fr; }
  /* Filter fährt von unten ein statt oben die Trefferliste wegzudrücken.
     Über der Liste steht dafür ein Knopf mit der Zahl der aktiven Haken. */
  .filter-auf { display: inline-flex; }
  /* .filter-zu wird weiter unten vollständig beschrieben – hier stand
     nur ein zweites `display: block`, das die Suche nach der wirksamen
     Regel unnötig erschwert hat. */

  .filterspalte {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 85;
    max-height: 86vh;
    margin: 0;
    /* Nur noch ein normaler Innenabstand unten – der Platz für den
       "Fertig"-Knopf entsteht jetzt durch den Knopf selbst, weil er
       haftend im Fluss liegt statt darüberzuschweben. */
    padding: 18px 18px 16px;
    background: #fff;
    border-radius: var(--radius-gross) var(--radius-gross) 0 0;
    box-shadow: 0 -10px 40px rgba(15, 22, 54, .22);
    transform: translateY(101%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .filterspalte.offen { transform: translateY(0); }
  body.filter-offen { overflow: hidden; }

  /* --- "Fertig" ------------------------------------------------------ *
   * Bewusst `sticky` und nicht `fixed`.
   *
   * Fest positioniert hing der Knopf über dem Inhalt und schnitt je
   * nach Scrollstand mitten in die Kästchenliste. Das lag daran, dass
   * ein festes Element innerhalb eines verschobenen Behälters (die
   * Spalte hat `transform`) nicht mehr am Fenster klebt, sondern am
   * Behälter – und dessen Höhe ändert sich mit dem Inhalt.
   *
   * Haftend belegt der Knopf dagegen seinen eigenen Platz am Ende der
   * Liste und klebt beim Scrollen an der Unterkante. Er kann damit
   * grundsätzlich nichts überdecken – die Liste endet über ihm, nicht
   * unter ihm.
   *
   * Der Verlauf darüber zeigt an, dass darunter noch etwas kommt.
   * ------------------------------------------------------------------ */
  .filter-zu {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: block;
    width: 100%;
    min-height: 50px;
    margin: 18px 0 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--orange);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 -14px 18px -6px #fff;
  }
  .filter-zu:hover { background: #d97f14; }
  .filter-werte.rollbar { max-height: none; overflow: visible; }

  .bewertungen { grid-template-columns: 1fr; gap: 24px; }
  /* Einspaltig gibt es nichts zu zentrieren - hier zaehlt die
     Leserichtung von links. */
  .bewertung-sparte { text-align: left; align-items: flex-start; justify-content: flex-start; }
  .bewertung-sparte .note { font-size: 52px; }
  .bewertung-sparte .stern, .bewertung-sparte .stern svg { width: 26px; height: 26px; }
  .stimmen-titel { margin-top: 24px; }
  .karte-block, .karte-block.gross { aspect-ratio: auto; }
  .karte-vorschau { position: static; }
  .karte-gitter { display: none; }
  .karte-inhalt {
    max-width: none; margin: 0; box-shadow: none; background: none; padding: 22px;
  }
  .karte-rahmen { position: static; height: 320px; }
  /*
   * Hier stand `.filterspalte { position: static; }` – ein Rest aus der
   * Zeit, als die Filterspalte nur eine haftende Seitenspalte war und
   * am Handy einfach mitlaufen sollte.
   *
   * Seit der Filter von unten einfährt, war das ein doppelter Fehler:
   * Die Regel weiter oben in genau diesem Block setzt `position: fixed`
   * und `transform: translateY(101%)`. `static` hob nur die Position
   * auf – die Verschiebung blieb. Die Spalte beanspruchte also ihren
   * Platz im Textfluss, wurde aber um die eigene Höhe nach unten
   * gezeichnet. Ergebnis: ein grosses Loch unter der Überschrift und
   * ein Filterfeld, das quer über der Trefferliste lag, während der
   * "Fertig"-Knopf weiterhin fest am unteren Rand klebte.
   *
   * Die Zeile ist ersatzlos entfernt.
   */
  .haftend { position: static; }
  .detail { grid-template-columns: 1fr; gap: 28px; }
  .detail-galerie { position: static; }
  .detail-bild { aspect-ratio: 4 / 3; }

  /* --- Galerie zum Wischen ----------------------------------------- *
   * Am Rechner liegen die Bilder gestapelt übereinander, das Vorschau-
   * bild schaltet um. Am Handy erwartet man etwas anderes: wischen.
   *
   * Statt eines Skripts erledigt das der Browser. Die Bühne wird zu
   * einem waagerechten Streifen, jedes Bild ist genau so breit wie die
   * Bühne, und `scroll-snap` lässt den Streifen nach dem Wischen sauber
   * am nächsten Bild einrasten – mit dem Schwung, den man von jeder App
   * kennt.
   *
   * `opacity` und `position` der Blätter müssen dafür zurückgesetzt
   * werden: Vom Rechner her liegen sie absolut übereinander und alle
   * bis auf eines sind unsichtbar.
   * ----------------------------------------------------------------- */
  .galerie-buehne {
    aspect-ratio: 4 / 3;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;   /* kein Zurückblättern im Browser */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Balken stört über dem Bild */
  }
  .galerie-buehne::-webkit-scrollbar { display: none; }

  .galerie-blatt {
    position: static;
    flex: 0 0 100%;
    width: 100%;
    opacity: 1;                       /* alle sichtbar – man wischt ja */
    scroll-snap-align: center;
    scroll-snap-stop: always;         /* nicht zwei Bilder auf einmal */
  }

  /* Die Vorschaubilder bleiben als Sprungziele. Sie sind Verweise auf
     das jeweilige Blatt; `scroll-behavior: smooth` oben lässt den
     Streifen dorthin gleiten. */
  .galerie-vorschau { gap: 8px; }
  .galerie-vorschau label { border-width: 2px; }

  /* Ein Hinweis, dass es weitergeht – nur beim ersten Bild und nur,
     solange nicht gewischt wurde. */
  .galerie-hinweis {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--text-blass);
    text-align: center;
  }
  .ausstellung { grid-template-columns: 1fr; }
  .ausstellung-bild { min-height: 260px; aspect-ratio: 3 / 2; }
  .ausstellung-text { padding: 32px 24px; }
  .newsletter .innen { grid-template-columns: 1fr; gap: 20px; }
  .kasse-uebersicht, aside .karte { position: static !important; }
}

/* Handy quer und kleine Tablets */
@media (max-width: 780px) {
  body { font-size: 15.5px; }
  .innen { padding: 0 18px; }

  .buehne .innen { padding-top: 40px; padding-bottom: 40px; }
  /* Hochkant steht der Text unter dem Bild, nicht daneben – darum von unten */
  .buehne::after {
    background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.72) 100%);
  }
  .buehne { align-items: flex-end; }

  .schritte { flex-direction: column; gap: 22px; }
  .schritt { text-align: left; display: flex; gap: 16px; align-items: flex-start; }
  .schritt-nr { margin: 0; flex: 0 0 auto; }
  .schritt-symbol { height: auto; margin: 0; flex: 0 0 auto; }
  .schritt-symbol svg { width: 38px; height: 38px; }
  .schritt-pfeil { display: none; }
  .lieferbox { max-width: none; }

  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .formular .paar { grid-template-columns: 1fr; }
  .abschnitt { padding: 38px 0; }
  .ausstellung-text h2 br { display: none; }

  /* Tabellen dürfen seitlich scrollen statt die Seite zu sprengen */
  .daten {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .daten > thead, .daten > tbody, .daten > tfoot {
    display: table;
    width: 100%;
    min-width: 540px;
  }
  .daten th { width: auto; }
}

/* Handy hochkant */
@media (max-width: 520px) {
  h1 { font-size: 27px; }
  .innen { padding: 0 16px; }
  .fuss-raster { grid-template-columns: 1fr; }
  /* Eine Spalte: alles untereinander im gleichen Format */
  .stimmung { grid-template-columns: 1fr; }
  .stimmung .gestapelt > *:nth-child(1),
  .stimmung .gestapelt > *:nth-child(2),
  .stimmung .hoch,
  .stimmung .quer { aspect-ratio: 3 / 2; }
  .buehne-knoepfe { flex-direction: column; align-items: stretch; }
  .buehne-knoepfe .knopf { width: 100%; }
  .kacheln { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* Auf dem Handy stehen zwei Kacheln nebeneinander – „Terrassenplatten"
     braucht dort etwas weniger, damit es nicht umbricht. */
  .kachel span { font-size: 17px; left: 14px; right: 14px; bottom: 12px; }
  .kachel span svg { width: 17px; height: 17px; }
  .ware-raster { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ware-text { padding: 12px; }
  .ware-text h3 { font-size: 14.5px; }
  .ware-merkmale { font-size: 12px; min-height: 30px; }
  .ware-preis { font-size: 17px; }
  .ware-aktion { flex-direction: column; }
  .ware-aktion .korb { width: 100%; height: 40px; }
  .ratgeber-raster { grid-template-columns: 1fr; }
  .vertrauen { gap: 18px; }
  .newsletter form { flex-direction: column; align-items: stretch; }
  .gesamtleiste { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rechner-kopf { flex-wrap: wrap; }
  .rechner-preis { margin-left: 0; width: 100%; text-align: left; }
  .abschnitt-kopf { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Sehr schmale Geräte */
@media (max-width: 380px) {
  .kacheln, .ware-raster { grid-template-columns: 1fr; }
  .mengenfeld input { width: 62px; }
  /* Nur die Breite vorgeben – die Hoehe folgt dem Seitenverhaeltnis.
     Steht hier eine feste Hoehe neben der Breite weiter oben, gewinnen
     beide und das Logo wird gestaucht. */
  .marke img { width: 112px; height: auto; }
  .servicezeile { font-size: 12px; }
}

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


/* Sichtbarer Fokus – auch ohne Kontrastmodus */
:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }


/* ---------- Einwilligungsbanner ------------------------------------- */

.einwilligung {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: #fff;
  border-top: 3px solid var(--blau);
  box-shadow: 0 -8px 30px rgba(15, 22, 54, .16);
}
.einwilligung-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: center;
}
.einwilligung-text h2 { font-size: 17px; margin-bottom: 8px; }
.einwilligung-text p { font-size: 14px; line-height: 1.6; margin-bottom: 8px; color: var(--text-blass); }
.einwilligung-text p:last-child { margin-bottom: 0; }
.einwilligung-text strong { color: var(--text); }

/* Beide Schaltflaechen gleich gross und gleich auffaellig – eine
   versteckte Ablehnung waere keine wirksame Einwilligung. */
.einwilligung-knoepfe { display: grid; gap: 9px; }
.einwilligung-knoepfe .knopf { width: 100%; min-height: 46px; }
.einwilligung-link {
  text-align: center;
  font-size: 13.5px;
  color: var(--blau);
  text-decoration: underline;
  padding: 4px;
}

@media (max-width: 780px) {
  
  
  
  
  .einwilligung-innen { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .einwilligung { max-height: 80vh; overflow-y: auto; }
}

/* ====================================================================
   Nur für Vorleseprogramme
   ====================================================================
   Text, der am Bildschirm nichts beiträgt, aber gesprochen werden
   muss – etwa der volle Rubrikname hinter einem kurzen "Zum Format".

   display:none wäre falsch: Damit wäre der Text auch für den
   Screenreader weg. Deshalb bleibt er im Fluss, nur auf ein
   unsichtbares Pixel zusammengeschoben.
   ==================================================================== */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* ====================================================================
   Formatnavigation (_formate.php)
   ====================================================================
   Ersetzt die entfallene Menüklappe "Formate". Steht am Fuß der
   Formatseiten und der Zentrale /fliesen/grossformat und hält die
   sieben Seiten untereinander verbunden.

   Zur Spaltenzahl: Es sind IMMER genau sechs Kacheln. Ein
   auto-fit-Raster hätte bei 1240 px Inhaltsbreite vier Spalten
   gewählt und die Reihe 4 + 2 gebrochen – zwei Kacheln allein in der
   zweiten Zeile sehen nach Versehen aus. Deshalb feste Stufen:
   3 + 3, dann 2 + 2 + 2, dann untereinander. Jede Stufe geht glatt auf.
   ==================================================================== */
.formatnav {
  background: var(--grund);
  border-top: 1px solid var(--linie);
}
.formatnav-titel { font-size: 22px; margin-bottom: 6px; }
.formatnav-vorspann {
  max-width: 70ch;
  margin: 0;
  color: var(--text-blass);
  font-size: 15px;
}
.formatnav-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  /* Es ist eine <ul>: Punkte weg, Einzug weg. Ohne diese Zeile stünde
     vor jeder Kachel ein Aufzählungszeichen. */
  list-style: none;
}
.formatnav-raster > li { display: flex; }

.formatkachel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* width:100% – sonst schrumpft die Kachel im flex-<li> auf ihren
     Inhalt und die Reihe wird ungleichmäßig. */
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
a.formatkachel:hover,
a.formatkachel:focus-visible {
  box-shadow: var(--schatten-hoch);
  border-color: var(--blau-linie);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .formatkachel, a.formatkachel:hover { transition: none; transform: none; }
}

/* Das Maß ist eine echte Überschrift (h3) – Größe hier zurücksetzen,
   damit sie nicht die Größe aus der Grundtypografie erbt. */
.formatmass {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--blau);
  /* Ziffern gleich breit: sonst tanzen die Maße in der Reihe. */
  font-variant-numeric: tabular-nums;
}
.formatkurz {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-blass);
}
/* margin-top:auto drückt die Zeile an den Fuß – dadurch stehen die
   Pfeile aller Kacheln einer Reihe auf gleicher Höhe, auch wenn die
   Texte unterschiedlich lang sind. */
.formatkachel .mehr,
.formathier {
  margin-top: auto;
  padding-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
}
.formatkachel .mehr { color: var(--blau); }
.formatkachel .mehr::after { content: " →"; }
.formathier { color: var(--text-blass); }

/* Die Seite, auf der man steht: sichtbar, aber nicht anklickbar. */
.formatkachel.hier {
  background: var(--blau-hell);
  border-style: dashed;
  border-color: var(--blau-linie);
}

.formatnav-zurueck { margin: 22px 0 0; }

@media (max-width: 900px) {
  .formatnav-raster { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .formatnav-raster { grid-template-columns: 1fr; gap: 12px; }
  .formatnav-titel  { font-size: 20px; }
  .formatkachel     { padding: 16px 18px; }
}

/* ====================================================================
   Landingpage "Italienische Fliesen" (italien.php)
   ==================================================================== */
.italien-merkmale {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 34px;
  margin-top: 24px;
}
.italien-merkmal {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.italien-merkmal h3 { font-size: 17px; margin: 0 0 6px; }
.italien-merkmal p  {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-blass);
}

/* Ein Absatz, kein Kasten: Die Herstellernamen sollen belegen, nicht
   werben. Als hervorgehobene Kachel läse es sich wie eine Anzeige –
   und zöge genau die Aufmerksamkeit auf die Marken, die wir hier
   bewusst NICHT in den Vordergrund stellen. */
.italien-hersteller {
  max-width: 70ch;
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid var(--blau-linie);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-blass);
}

/* Der Vergleich Fachhandel/Onlineversand.
   Zwei Spalten Text unter einer Überschrift – bewusst KEINE Tabelle
   mit Häkchen und Kreuzen: Das wirkt wie eine Werbebroschüre und
   verliert die Glaubwürdigkeit, die der Abschnitt gerade aufbaut. */
.italien-vergleich {
  display: grid;
  gap: 2px;
  margin-top: 22px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.vergleich-zeile {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 20px;
  align-items: start;
  padding: 16px 20px;
  background: #fff;
}
.vergleich-zeile h3 { margin: 0; font-size: 15px; }
.vergleich-zeile p  { margin: 0; font-size: 14px; line-height: 1.55; }
.vergleich-wir    { color: var(--text); font-weight: 500; }
.vergleich-sonst  { color: var(--text-blass); }
/* Ohne Doppelpunkt-Label wüsste auf schmalen Geräten niemand, welche
   Spalte wer ist – dort stehen die Absätze untereinander. */
.vergleich-wir::before   { content: "Bei uns: ";  font-weight: 600; color: var(--blau); }
.vergleich-sonst::before { content: "Sonst oft: "; font-weight: 600; }

.italien-abschluss h2 { margin-bottom: 6px; }
.italien-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Aufmacher unter der Einleitung.
   Fest gesetztes Seitenverhaeltnis statt freier Hoehe: Das Bild steht im
   ersten Bildschirm, und ein nachtraeglich waschsendes Bild schiebt die
   Ueberschrift nach unten, waehrend jemand schon liest. */
.italien-aufmacher {
  margin-top: 26px;
  border-radius: var(--radius);
  overflow: hidden;
}
.italien-aufmacher img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Bildreihe zu den vier Merkmalen. Quadratisch, weil es Ausschnitte der
   Oberflaeche sind – ein Panoramaformat wuerde eine Raumaufnahme
   versprechen, die es hier nicht ist. */
.italien-bildreihe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.italien-bildreihe img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  .italien-merkmale { grid-template-columns: 1fr; gap: 22px; }
  .vergleich-zeile  { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 780px) {
  /* Zwei statt vier: Bei vier Spalten waeren die Ausschnitte auf dem
     Handy so klein, dass die Struktur – der ganze Zweck dieser Bilder –
     nicht mehr zu erkennen ist. */
  .italien-bildreihe { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .italien-aufmacher img { aspect-ratio: 4 / 3; }
}

/* Schwesterbetrieb auf der Badsanierungsseite (badsanierung.php).
   Bewusst ein ruhiger Kasten und kein Bewertungsbaustein mit Sternen:
   Der Abschnitt soll belegen, nicht werben. */
.schwesterbetrieb {
  max-width: 74ch;
  padding: 24px 28px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--blau);
  border-radius: var(--radius-gross);
  background: var(--grund);
}
.schwesterbetrieb h2 { margin: 0 0 10px; font-size: 21px; }
.schwesterbetrieb p  { margin: 0 0 10px; line-height: 1.65; }
/* Logo des Schwesterbetriebs. Freigestellt auf hellem Grund, deshalb
   ohne Rahmen und ohne Hintergrund. max-width in Prozent, damit es auf
   schmalen Geraeten nicht ueber den Kasten hinauslaeuft - die feste
   Breite im HTML dient nur der Platzreservierung beim Laden. */
.schwester-logo {
  display: block;
  width: 280px;
  max-width: 70%;
  height: auto;
  margin: 0 0 18px;
}
/* Der Verweis darf das Logo nicht unterstreichen oder einfaerben. */
.schwester-logo-link {
  display: inline-block;
  text-decoration: none;
  transition: opacity .18s;
}
.schwester-logo-link:hover,
.schwester-logo-link:focus-visible { opacity: .78; }
@media (prefers-reduced-motion: reduce) {
  .schwester-logo-link { transition: none; }
}
@media (max-width: 520px) {
  .schwester-logo { max-width: 82%; margin-bottom: 14px; }
}

.schwester-note {
  font-size: 15.5px;
  color: var(--blau);
}
/* Zwei Belege nebeneinander, auf schmalen Geraeten untereinander. */
.schwester-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 520px) {
  .schwesterbetrieb { padding: 18px 20px; }
}

/* ====================================================================
   Kategorietext mit Fragen (_kategorietext.php)
   ====================================================================
   Steht unter der Artikelliste. Bewusst schmal gesetzt: 70 Zeichen je
   Zeile sind die Grenze, ab der das Auge beim Zeilenwechsel die
   nächste Zeile nicht mehr sicher findet. Über die volle Breite von
   1240 px wären es das Doppelte – der Text würde nicht gelesen.
   ==================================================================== */
.kategorietext { border-top: 1px solid var(--linie); }
.kategorietext-inhalt { max-width: 70ch; }
.kategorietext-inhalt h2 {
  font-size: 21px;
  margin: 32px 0 10px;
}
.kategorietext-inhalt h2:first-child { margin-top: 0; }
.kategorietext-inhalt p {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-blass);
}
.kategorie-faq { max-width: 70ch; margin-top: 40px; }
.kategorie-faq h2 { font-size: 21px; margin-bottom: 14px; }

@media (max-width: 520px) {
  .kategorietext-inhalt h2, .kategorie-faq h2 { font-size: 19px; }
  .kategorietext-inhalt p { font-size: 15px; }
}

/* Hinweisstreifen bei aktivem Wartungsmodus (nur für Angemeldete).
   Kräftiges Rot mit Absicht: Der Streifen soll stören, sonst erfüllt
   er seinen Zweck nicht. Er ist die einzige Erinnerung daran, dass
   Besucher gerade etwas anderes sehen. */
.wartungsstreifen {
  padding: 10px 20px;
  background: var(--rot);
  color: #fff;
  font-size: 14.5px;
  text-align: center;
}
.wartungsstreifen a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  margin-left: 8px;
}

/* Tastenbezeichnungen in der Barrierefreiheitserklaerung.
   <kbd> ist das semantisch richtige Element - ohne Stil setzt der
   Browser es aber in seiner Standard-Festbreitenschrift, was mitten
   im Fliesstext wie ein Fehler aussieht. */
kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--linie);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--grund);
  font-family: inherit;
  font-size: .9em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* ---------- Maskottchen ----------------------------------------------
   Die Figur steht NEBEN dem Text, nicht darüber und nicht dahinter.
   Ein Hintergrundbild wäre bequemer gewesen, hätte aber zwei Nachteile:
   Es lässt sich nicht drucken, und bei schmalen Fenstern liegt der Text
   irgendwann auf dem Bauch des Bären. */
.mit-maskottchen {
  display: flex;
  gap: 32px;
  align-items: flex-end;
  justify-content: space-between;
}

/* Der Text bleibt oben, auch wenn die Figur daneben höher ist.
   Ohne das rutscht er mit ihr nach unten (align-items: flex-end gilt
   sonst für beide) und die Überschrift steht plötzlich auf halber
   Höhe – mit einer großen leeren Fläche darüber. */
.figur-text {
  max-width: 75ch;
  align-self: flex-start;
}

.maskottchen {
  flex: 0 0 auto;
  width: 260px;
  align-self: flex-end;
}
.maskottchen.klein { width: 190px; }

/* Als <figure> genutzt darf kein Browser-Standardabstand dazwischen
   geraten – sonst steht die Figur plötzlich eingerückt. */
figure.maskottchen { margin: 0; }

.maskottchen figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-blass, #5f6b7d);
  /* Etwas breiter als die Figur: Zwei Wörter pro Zeile wären bei
     190 Pixeln sonst die Regel. */
  width: 230px;
  max-width: 100%;
}

/* ---------- Angeschnittene Figur --------------------------------------
   Der Abschnitt schneidet ab, was unten übersteht. */
.figur-anschnitt { overflow: hidden; }

/* Die Figur wird größer UND greift über die untere Kante hinaus.
   Der negative Abstand verkleinert zugleich ihre Höhe in der
   Flex-Rechnung: 714 px Bildhöhe minus 120 ergibt 594 px, die der
   Abschnitt bereithält. Deshalb ragt sie nach unten hinaus, oben aber
   nie – ein abgeschnittener Kopf wäre das Gegenteil von harmonisch. */
.figur-anschnitt .maskottchen {
  width: 340px;
  margin-bottom: -120px;
}

.maskottchen-bild {
  display: block;
  width: 100%;
  height: auto;
  /* Kein Schatten und kein Rahmen: Die Figur ist freigestellt und soll
     im Abschnitt stehen, nicht als Aufkleber daraufkleben. */
}

/* Musterseite: Hinweiskasten und Figur nebeneinander, die Figur unten
   bündig mit dem Kasten. */
.muster-abschluss {
  display: flex;
  gap: 26px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.muster-abschluss > .karte { flex: 1 1 420px; }

@media (max-width: 900px) {
  /* Untereinander statt nebeneinander. Die Figur bleibt, wird aber
     kleiner und rückt an den Rand – auf dem Handy ist der Platz für den
     Text da und nicht für Dekoration. */
  .mit-maskottchen,
  .muster-abschluss { flex-direction: column; align-items: stretch; }

  .maskottchen {
    width: 150px;
    align-self: flex-end;
    margin-top: -10px;
  }
  .maskottchen.klein { width: 130px; }

  /* Untereinander bleibt der Anschnitt erhalten, nur flacher: 120 px
     wären hier über ein Drittel der Figur. */
  .figur-anschnitt .maskottchen {
    width: 170px;
    margin-bottom: -34px;
  }
}

@media (max-width: 380px) {
  /* Auf sehr schmalen Geräten ganz weg: Bei 150 Pixeln neben einem
     Absatz wird die Figur nur noch zu einem Fleck.
     Ob der Browser die Datei dann trotzdem lädt, hängt von ihm ab –
     „display: none" ist eine Anweisung zur Darstellung, keine zum
     Nichtladen. Das Bild ist deshalb auf gut 70 kB gedrückt und wird
     verzögert geladen; mehr lässt sich ohne Skript nicht herausholen. */
  .maskottchen { display: none; }
}

/* ---------- Abholseite (versand.php) ---------------------------------
   Zwei Raster, sonst nichts Eigenes – die Seite lebt von den Bausteinen,
   die es schon gibt (.schritte, .vertrauen, .ausstellung, .karte). */

/* Text links, Faktenkarte rechts. Der Text bekommt mehr Platz: Er trägt
   die Begründung, die Karte nur Zahlen. */
.abhol-paar {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.abhol-paar h2 { margin-top: 0; }
.abhol-paar .karte h3 { display: flex; align-items: center; gap: 9px; font-size: 16.5px; }
.abhol-paar .karte h3 svg { width: 20px; height: 20px; flex: none; color: var(--orange); }
.abhol-paar .daten th { white-space: nowrap; }

/* Zwei gleichwertige Karten nebeneinander. */
.abhol-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}
.abhol-karten .karte h3 { display: flex; align-items: center; gap: 9px; font-size: 16.5px; }
.abhol-karten .karte h3 svg { width: 20px; height: 20px; flex: none; color: var(--orange); }
.abhol-karten .karte p:last-of-type { margin-bottom: 0; }

@media (max-width: 900px) {
  /* Untereinander: Bei zwei Spalten bleibt für die Zahlen sonst eine
     Spalte von der Breite eines Daumens. */
  .abhol-paar { grid-template-columns: 1fr; gap: 26px; }
}

/* Kopf der Abholseite: Aussage links, Fakten rechts. */
.abhol-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.abhol-kopf h1 { margin-bottom: 10px; }

/* Die Faktenkarte übernimmt die Zeilenoptik der Ausstellungsseite –
   Symbol, Begriff, Wert. Damit wirkt sie wie ein bekannter Baustein und
   nicht wie ein Sonderfall. */
.abhol-fakten .zeile { display: flex; gap: 11px; margin-bottom: 14px; }
.abhol-fakten .zeile:last-child { margin-bottom: 0; }
.abhol-fakten svg {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--orange);
}
.abhol-fakten dt { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.abhol-fakten dd { margin: 0; font-size: 14px; color: var(--text-blass); }

@media (max-width: 900px) {
  /* Auf dem Handy zuerst die Aussage, dann die Fakten – nicht umgekehrt.
     Durch die Quellreihenfolge ergibt sich das von selbst. */
  .abhol-kopf { grid-template-columns: 1fr; gap: 24px; }
}