/* ============================================================================
   SCHRIFTEN — lokal ausgeliefert, nicht von Googles Servern.
   ----------------------------------------------------------------------------
   Umgestellt am 15.08.2026 (Bodoni Moda/Jost), erneut am 17.08.2026 auf
   Theano Didot/Outfit. Vorher wurden Schriften über fonts.googleapis.com
   geladen; dabei geht die IP-Adresse jedes Besuchers an Google. Das
   Landgericht München I hat dafür Schadensersatz zugesprochen (Urteil vom
   20.01.2022, Az. 3 O 17493/20), Abmahnungen sind verbreitet.

   Die Dateien liegen in schriften/. Outfit stammt aus dem offiziellen
   fontsource-Paket (@fontsource/outfit). Theano Didot gibt es nicht bei
   fontsource — die TTF wurde direkt besorgt, geprüft und selbst nach
   WOFF2 subsettet. Beide Schriften stehen unter der SIL Open Font License
   1.1 und dürfen so ausgeliefert werden.

   Nur der lateinische Zeichensatz, nur die tatsächlich benutzten Schnitte.
   Theano Didot hat nur einen Schnitt (Regular) — kein Fett, kein Kursiv;
   font-synthesis:none weiter unten verhindert, dass der Browser das
   nachbaut. font-display:swap sorgt dafür, dass der Text sofort sichtbar
   ist und die Schrift nachrutscht.
   ============================================================================ */
@font-face{
  font-family:'Theano Didot';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('schriften/theano-didot-400.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('schriften/outfit-400.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('schriften/outfit-500.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('schriften/outfit-600.woff2') format('woff2');
}

/* ============================================================
   GRUNDREGEL — [hidden] gewinnt immer
   ------------------------------------------------------------
   Jede Komponente hier unten, die display:flex/grid/... setzt, hat exakt
   dieselbe Spezifität wie [hidden] (0,1,0) — bei Gleichstand gewinnt die
   später stehende Regel, also der Komponentenstil, nicht [hidden]. Ein
   Element mit .hidden = true blieb dadurch trotzdem sichtbar. Fünfmal
   einzeln gefunden und geflickt (.form, .zusatz, .preis__zeile, .merker,
   .k-feld, Stand 20.08.2026) — ab jetzt EINE Regel für alle Fälle, statt
   bei jedem neuen Bauteil erneut daran zu denken. NICHT pro Klasse eine
   eigene [hidden]-Regel ergänzen, das wäre wieder dieselbe Sache doppelt
   gepflegt. */
[hidden]{display:none !important}

/* ============================================================
   CANVASORY — Designtokens
   Regel: keine rohen Hexwerte in Bauteilen, nur Tokens.
   ============================================================ */
:root{
  /* ------------------------------------------------------------------
     SAND (Auftrag "Startseite fest einbauen", 26.09.2026, Teil A)
     ------------------------------------------------------------------
     Canvasory Unvergessen steht auf Sand, nicht mehr auf Anthrazit. Die
     Werte stammen aus entwurf.css, dem von Saskia freigegebenen Stand.
     Die Tokennamen bleiben unveraendert -- alle Bauteile lesen weiter
     dieselben Namen, nur der Ton dahinter ist neu.

     Gold ist auf Sand NIE Textfarbe fuer Fliesstext. Gold traegt nur noch
     Logo, Linien, Sterne, Preise und Kleinzeilen (dort --gold-dunkel).
     ------------------------------------------------------------------ */
  color-scheme: light;

  /* Huelle (hell) */
  --grund:        #D3BEA1;   /* Sand */
  --grund-rgb:    211,190,161;
  --grund-weich:  #E4D6BC;   /* eine Stufe heller, fuer Karten auf Sand */
  --grund-linie:  #B99F7E;   /* Trennlinien auf Sand */
  --text:         #2B2418;   /* 8,51:1 auf --grund -> AAA */
  --text-leise:   #5A4E3C;   /* 4,50:1 auf --grund -> AA */

  /* Akzente */
  --gold:         #AA804E;   /* Linien und Zierrand, KEIN Text */
  --gold-tief:    #C9A35B;   /* heller Zierrand, KEIN Text */
  --gold-dunkel:  #8A6A28;   /* Preise, Sterne, Kleinzeilen */

  /* Oliv-Khaki -- die Handlungsfarbe. Kaufknoepfe, Schrittnummern, Haken.
     Auftrag 27.09.2026, Teil B: Auf der Seite steht nur noch DIESE eine
     Gruen-Familie (#6F6C47 hell, #5C5A39 mittel, #45432A dunkel). Die
     frueheren Werte (#4F5C3E / #6E7C58) waren ein zweites, kraeftigeres
     Gruen daneben. */
  --oliv:         #5C5A39;
  --oliv-hell:    #6F6C47;
  --oliv-dunkel:  #45432A;
  --creme:        #F6EFDF;   /* Schrift auf Oliv */

  /* Sand der Fusszeile: eine Stufe dunkler als die Seite. */
  --fuss-grund:   #BBA07F;

  /* Zierfarbe -- Kreise, Haarlinien, Symbole. Kein Text. */
  --zier:         #8A7A62;
  /* Der gesetzlich vorgeschriebene KI-Hinweis (Paragraf 18 MStV) steht in
     der Fusszeile auf --fuss-grund (#BBA07F) und muss dort 4,5:1 erreichen.
     Auf Sand (#D3BEA1) sind es 6,40:1, auf der Fusszeile 4,64:1 -- beides
     ueber der Grenze. Der Wert aus entwurf.css (#5F5445) kam auf Sand nur
     auf 4,10:1 und war damit zu hell; er ist deshalb nachgedunkelt worden
     (Auftrag Teil A: "Kontrast zu --grund pruefen, mind. 4,5:1, sonst
     dunkler waehlen"). */
  --text-gedaempft: #413828;
  --zier-dunkel:  #6E6150;
  /* Gedenken-Akzent. Das bisherige Violett (#A87BF0) war fuer dunklen Grund
     gedacht und kam auf Sand nur auf 1,72:1. Derselbe Farbton, so weit
     abgedunkelt, dass er als Text auf Sand lesbar bleibt: 4,74:1. */
  --memoria:      #5E3A8C;

  /* Buehne (hell) -- Konfigurator und Preistafeln, unveraendert */
  --buehne:       #F4EEE3;
  --buehne-weich: #EBE3D4;
  --buehne-linie: #DBD1BF;
  --text-dunkel:  #0F0D13;
  --text-dunkel-leise: #57515F;

  /* Raender von Bedienelementen brauchen 3:1 (WCAG 1.4.11). */
  --bedien-dunkel: #6B5D48;  /* 3,55:1 auf Sand */
  --bedien-hell:   #7A736A;  /* 4,24:1 auf --buehne */

  /* Typografie */
  --display: "Theano Didot", "Times New Roman", serif;
  --sans:    "Outfit", "Helvetica Neue", Arial, sans-serif;

  /* Raster */
  --rand:  clamp(1.25rem, calc(5vw / var(--zf,1)), 4.5rem);
  --max:   1320px;
  --luft:  clamp(2.75rem, calc(5.5vw / var(--zf,1)), 5rem);

  /* Bewegung: 150–300 ms, nie länger */
  --t-schnell: 150ms;
  --t-normal:  220ms;
  --t-ruhig:   300ms;
  --kurve: cubic-bezier(.22,.61,.36,1);

  --radius: 2px;      /* Galerie, nicht App: fast keine Rundung */
  --radius-gross: 4px;
}

/* ============================================================
   Reset und Grundlagen
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;              /* 16px Basis */
  line-height:1.5;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  /* Theano Didot hat nur Regular. Ohne diese Zeile würde der Browser für
     kursive/fette Stellen (siehe h1 em, h2 em) selbst schräg stellen bzw.
     verfetten — sieht bei einer Antiqua wie Didot schnell klobig aus. */
  font-synthesis:none;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{
  font-family:var(--display);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.01em;
  /* Verteilt die Zeilen gleichmäßig, statt ein einzelnes Wort allein in die
     letzte Zeile fallen zu lassen. Ältere Browser ignorieren es einfach. */
  text-wrap:balance;
}
/* Im Fließtext verhindert das einzelne Wörter am Absatzende */
p,li,blockquote,figcaption,summary{text-wrap:pretty}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}

/* Fokus bleibt IMMER sichtbar */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--radius);
}
.hell :focus-visible{outline-color:var(--text-dunkel)}

/* Nur für Screenreader */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.sprung{
  position:absolute;left:var(--rand);top:-100px;z-index:100;
  background:var(--gold);color:var(--grund);padding:.75rem 1.25rem;
  font-weight:500;transition:top var(--t-schnell) var(--kurve);
}
.sprung:focus{top:.75rem}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ============================================================
   Layout-Bausteine
   ============================================================ */
.huelle{max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
.abschnitt{padding-block:var(--luft)}
/* Sprungziele: ohne das hier würde die fixierte Kopfzeile (96px, siehe
   .kopf__inhalt, Korrekturauftrag 26.08.2026 Punkt 9) den Anfang des
   Abschnitts verdecken. */
#themen,#ablauf,#konfigurator{scroll-margin-top:96px}
/* Die helle Bühne liegt als eigene Fläche AUF dem dunklen Grund — wie ein
   Blatt Papier auf einem Tisch. Vorher lief ein Verlauf von Dunkel nach Sand;
   der muss zwangsläufig durch einen matschigen Graubereich und sah aus wie
   Nebel. Eine klar begrenzte Fläche braucht keinen Übergang, wirkt ruhiger
   und passt zur Galerie-Anmutung. */
.hell,.hell-weich{
  color:var(--text-dunkel);
  border-radius:var(--radius-gross);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 24px 60px rgba(0,0,0,.28);
}
.hell{background-color:var(--buehne)}
.hell-weich{background-color:var(--buehne-weich)}
.abschnitt.hell,.abschnitt.hell-weich{
  padding-block:var(--luft);
  margin-inline:clamp(0px,calc(3.5vw / var(--zf,1)),52px);
  margin-block:clamp(1.5rem,calc(4vw / var(--zf,1)),3rem);
}
/* Zwei helle Flächen hintereinander rücken enger zusammen */
.abschnitt.hell + .abschnitt.hell,
.abschnitt.hell + .abschnitt.hell-weich,
.abschnitt.hell-weich + .abschnitt.hell,
.abschnitt.hell-weich + .abschnitt.hell-weich{margin-top:0}
/* Auf schmalen Schirmen läuft die Fläche durch, sonst wird es zu eng */
@media(max-width:600px){
  .abschnitt.hell,.abschnitt.hell-weich{
    margin-inline:0;border-radius:0;box-shadow:none;
    border-block:1px solid var(--grund-linie);
  }
}

.augbraue{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--zier);
  display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;
}
.augbraue::before{
  content:"";width:2rem;height:1px;background:var(--zier);flex:none;
}
.hell .augbraue,.hell-weich .augbraue{color:var(--text-dunkel-leise)}
.hell .augbraue::before,.hell-weich .augbraue::before{background:var(--zier-dunkel)}

.titel{font-size:clamp(1.7rem,calc(3.1vw / var(--zf,1)),2.45rem);text-wrap:balance}
.titel-gross{font-size:clamp(2.1rem,calc(5vw / var(--zf,1)),3.6rem)}
.vorspann{
  max-width:56ch;color:var(--text-leise);font-size:1rem;margin-top:1rem;
}
.hell .vorspann,.hell-weich .vorspann{color:var(--text-dunkel-leise)}

/* ============================================================
   Signature: der Halo
   Wiederkehrende Kreisgeometrie in Gold — das verbindende Element
   ============================================================ */
/* Die Halo-Kreise sind mit dem Sand-Grund entfallen (Auftrag
   26.09.2026, Teil A). Sie waren weiche Lichtkreise fuer die dunkle
   Buehne; auf Sand bleiben sie unsichtbar und kosten nur Rechenzeit.
   Der Wortlaut der entfernten Regeln steht in _entfernt/halo-css.txt. */

/* ============================================================
   DER SAUM — die goldene Haarlinie an jedem Farbwechsel.
   In der Mitte voll deckend, nach außen auslaufend. Umgesetzt als radialer
   Verlauf in einer zwei Pixel hohen Fläche: dadurch wirkt sie mittig kräftig
   und verliert sich zu den Rändern, statt als harter Strich anzustoßen.
   Ersetzt überall die früheren durchgehenden 1-px-Ränder.
   ============================================================ */
.abschnitt::before,
.vorteile::before,
.garantie::before,
.beweis::before,
.memoria::before,
.abschluss::before,
.wuerfelband::before,
.fuss::before,
.abschnitt.hell::before,
.abschnitt.hell-weich::before,
.seitenkopf::after,
.rezensionen::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:radial-gradient(closest-side,
    rgba(231,197,126,.72), rgba(231,197,126,.34) 55%, rgba(231,197,126,0) 100%);
  pointer-events:none;
}
/* Der Saum braucht einen Bezugspunkt */
.vorteile,.garantie,.beweis,.memoria,.abschluss,.wuerfelband,.fuss,
.abschnitt,.rezensionen{position:relative}
/* Am Seitenkopf sitzt er unten, dort endet der Kopfbereich */
.seitenkopf::after{top:auto;bottom:0}

/* Auf der hellen Fläche liegt er auf der Oberkante der Karte */
.abschnitt.hell::before,.abschnitt.hell-weich::before{
  border-radius:var(--radius-gross) var(--radius-gross) 0 0;
}
/* Auf heller Fläche würde Gold auf Creme untergehen — dort der dunklere Zierton */
.abschnitt.hell::before,.abschnitt.hell-weich::before{
  background:radial-gradient(closest-side,
    rgba(110,101,85,.55), rgba(110,101,85,.26) 55%, rgba(110,101,85,0) 100%);
}

/* ============================================================
   Buttons — Touch-Ziel min. 44×44, Abstand 8px
   ============================================================ */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.6rem;
  font-weight:500;font-size:.9375rem;letter-spacing:.03em;
  border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;text-align:center;
  transition:background var(--t-normal) var(--kurve),
             color var(--t-normal) var(--kurve),
             border-color var(--t-normal) var(--kurve),
             transform var(--t-schnell) var(--kurve);
}
.knopf:active{transform:translateY(1px)}
/* Auf dunklem Grund: gebürstetes Gold.
   Abweichung von der Regel „keine goldenen Flächenverläufe" — ausdrücklich so
   gewünscht. Elf eng gesetzte Stufen statt sechs weit auseinanderliegender:
   der alte Verlauf kippte bei 52 % abrupt von dunkel nach hell und erzeugte
   dadurch eine sichtbare Kante quer durch den Knopf. Die Wende liegt jetzt
   zwischen 50 % und 57 % und ändert sich dort nur um acht Farbwerte.
   Darüber ein weicher Lichtfleck oben links, der den Rest der Bandenbildung
   verschluckt. Schwächster Punkt für den dunklen Text: 7,62:1. */
.knopf--gold{
  color:var(--grund);border:0;position:relative;
  background-image:
    radial-gradient(125% 190% at 20% -35%, rgba(255,255,255,.58), rgba(255,255,255,0) 52%),
    linear-gradient(176deg,
      #FCF2DC 0%,  #F5E2B4 8%,  #ECD097 18%, #DFBB79 30%, #CFA660 42%,
      #C69C55 50%, #CDA45C 57%, #DCB673 68%, #EACD92 80%, #F4E1B2 91%, #F9EBC8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(102,72,20,.55),
    0 1px 2px rgba(0,0,0,.45),
    0 4px 14px rgba(0,0,0,.28);
}
/* 28.09.2026 (Saskia): Beim Drueberfahren bleibt der Kaufknopf KHAKI und wird
   nur etwas heller -- kein Gold. Der frueher hier stehende Gold-Verlauf
   (background-image + goldener Schein im box-shadow) ueberstimmte wegen der
   hoeheren Gewichtung (0,0,2,0 gegen 0,0,1,0) das Khaki aus dem Block
   "2 KNOEPFE" weiter unten und machte den Knopf hellgold; die cremefarbene
   Schrift war darauf kaum lesbar. Das Aufhellen macht jetzt allein
   .knopf--gold:hover{filter:brightness(1.07)} im Block "2 KNOEPFE". */
/* 29.09.2026 (Saskia): Auch beim DRUECKEN blitzt kein Gold mehr auf.
   Hier stand derselbe Gold-Verlauf wie frueher bei :hover und hat aus
   demselben Grund (0,0,2,0 gegen 0,0,1,0) das Khaki aus dem Block
   "2 KNOEPFE" weiter unten ueberstimmt. Das Zurueckweichen beim Druecken
   macht jetzt allein .knopf--gold:active im Block "2 KNOEPFE"
   (2 % kleiner, flacherer Schatten) -- die Flaeche bleibt Khaki. */

/* Auf dunklem Grund: Umriss */
.knopf--umriss{background:transparent;color:var(--text);border-color:var(--bedien-dunkel)}
.knopf--umriss:hover{border-color:var(--gold);color:var(--gold)}
/* Auf hellem Grund (.hell/.hell-weich, z. B. der Konfigurator) wäre --text
   auf --buehne praktisch unsichtbar (1:1 Kontrast) -- dieselbe Korrektur
   wie bereits für .kasse (Auftrag "Konfigurator: Themenwelt, Stil,
   Vorschau", 24.08.2026). */
.hell .knopf--umriss,.hell-weich .knopf--umriss{color:var(--text-dunkel-leise);border-color:var(--bedien-hell)}
.hell .knopf--umriss:hover,.hell-weich .knopf--umriss:hover{border-color:var(--zier-dunkel);color:var(--zier-dunkel)}
/* Auf HELLEM Grund: dunkler Knopf mit goldenem Rand — nie Gold als Fläche */
.knopf--dunkel{background:var(--grund);color:var(--text);border-color:var(--gold-tief)}
.knopf--dunkel:hover{background:#1D1926}
.knopf--leise{background:transparent;color:var(--text-dunkel);border-color:var(--bedien-hell)}
.knopf--leise:hover{border-color:var(--text-dunkel)}
.knopf--memoria{background:transparent;color:var(--memoria);border-color:var(--memoria)}
.knopf--memoria:hover{background:var(--memoria);color:var(--grund)}
.knopf[disabled]{opacity:.45;cursor:not-allowed}

/* Sehr sanftes Pulsieren am Hauptkaufknopf des Konfigurators — nur Helligkeit,
   keine Größenänderung. Zwei Sekunden Takt, siehe prefers-reduced-motion
   weiter unten für das komplette Abschalten (B4, Umbau vom 21.08.2026). */
@keyframes cvsPuls{0%,100%{filter:brightness(1)}50%{filter:brightness(1.06)}}
[data-puls]{animation:cvsPuls 2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){[data-puls]{animation:none}}

/* ============================================================
   Rabattleiste — ruhig, kein Signalrot
   ============================================================ */
/* Der Balken ganz oben sitzt nicht mehr als schwarzer Riegel auf der Seite:
   er läuft von oben dunkel in den Grundton aus, und die goldene Linie darunter
   verblasst zu den Rändern hin, statt als harter Strich durchzulaufen. */
.aktion{
  font-size:.8125rem;position:relative;border-bottom:0;
  background:linear-gradient(180deg,#100E15 0%, var(--grund) 100%);
}
.aktion::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    rgba(231,197,126,0) 0%, rgba(231,197,126,.55) 22%,
    rgba(231,197,126,.55) 78%, rgba(231,197,126,0) 100%);
}
.aktion__inhalt{
  display:flex;align-items:center;justify-content:center;gap:.75rem 1.25rem;
  flex-wrap:wrap;padding:.7rem var(--rand);text-align:center;
}
.aktion__text{color:var(--text-leise);letter-spacing:.02em}
.aktion__text b{color:var(--text);font-weight:500}

/* ============================================================
   Pakete — drei fertige Wände über dem Konfigurator.
   Die Kachel ist selbst der Knopf: ein Klick stellt den Konfigurator ein.
   Die Tafeln in der Vorschau sind reine Form, keine Bilder — sie sollen
   die Anordnung zeigen, nicht mit dem Motiv konkurrieren.
   ============================================================ */
/* ============================================================
   MOTIV-FINDER — wiederverwendet die Optik von .filter (dunkler
   Glass-Look, siehe stile.js), deshalb keine neuen Farben.
   ============================================================ */
.finder__kacheln{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.finder__wahl{
  min-height:44px;padding:.55rem 1.05rem;background:transparent;
  border:1px solid var(--bedien-dunkel);border-radius:99px;
  font-size:.875rem;color:var(--text-leise);cursor:pointer;
  transition:border-color var(--t-schnell) var(--kurve),color var(--t-schnell) var(--kurve);
}
.finder__wahl:hover{color:var(--text);border-color:var(--text-leise)}
.finder__zurueck{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.5rem 0;font-size:.875rem;color:var(--text-leise);cursor:pointer;
  border:0;background:none;
}
.finder__zurueck:hover{color:var(--text)}
.finder__zurueck svg{width:16px;height:16px;flex:none}
.finder__schritt2titel{font-size:.9375rem;color:var(--text-leise);margin:1.25rem 0 .75rem}
.finder__ergebnis{display:flex;flex-wrap:wrap;gap:.5rem}
.finder__welt{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.55rem 1.05rem;border:1px solid var(--bedien-dunkel);border-radius:99px;
  font-size:.875rem;color:var(--text);text-decoration:none;
  transition:border-color var(--t-schnell) var(--kurve),background var(--t-schnell) var(--kurve);
}
.finder__welt:hover{border-color:var(--gold);background:#262232}

.bundles{background:var(--grund-weich)}
.pakete{display:grid;gap:clamp(.9rem,calc(2vw / var(--zf,1)),1.4rem);margin-top:clamp(1.75rem,calc(4vw / var(--zf,1)),2.75rem)}
@media(min-width:760px){.pakete{grid-template-columns:repeat(3,1fr)}}

.paket{
  display:flex;flex-direction:column;gap:.85rem;text-align:left;
  padding:clamp(1.1rem,calc(2.4vw / var(--zf,1)),1.5rem);cursor:pointer;
  background:var(--grund-weich);border:1px solid var(--grund-linie);
  border-radius:var(--radius-gross);color:inherit;font:inherit;
  transition:border-color .25s, transform .25s, background .25s;
}
.paket:hover{border-color:var(--zier-dunkel);transform:translateY(-3px);background:#262232}
.paket[aria-pressed="true"]{border-color:var(--gold);background:#262232}
@media(prefers-reduced-motion:reduce){.paket{transition:border-color .25s}.paket:hover{transform:none}}

.paket__buehne{
  display:flex;align-items:flex-end;justify-content:center;gap:6px;
  height:96px;padding-bottom:.35rem;border-bottom:1px solid var(--grund-linie);
}
.paket__tafel{
  display:block;background:linear-gradient(150deg,#3A3448,#2A2634);
  border:1px solid var(--zier-dunkel);border-radius:2px;
}
.paket__tafel--gross{width:46px;height:60px}
.paket__tafel--mittel{width:34px;height:45px}
.paket__tafel--klein{width:23px;height:30px}
.paket__tafel--panel{width:21px;height:62px}

.paket__kopf{display:flex;flex-direction:column;gap:.2rem}
.paket__name{font-family:var(--display);font-size:1.35rem;line-height:1.15;color:var(--text)}
.paket__was{font-size:.8125rem;color:var(--zier);letter-spacing:.02em}
.paket__text{font-size:.875rem;line-height:1.55;color:var(--text-leise)}

.paket__preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.paket__preis b{font-size:1.5rem;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.paket__preis s{font-size:.875rem;color:var(--text-leise);text-decoration-color:var(--zier-dunkel)}
.paket__spar{
  flex-basis:100%;font-size:.8125rem;font-weight:500;color:var(--gold);
}
.paket__hinweis{flex-basis:100%;font-size:.6875rem;color:var(--text-leise)}
.paket__nehmen{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  min-height:44px;padding:.6rem 0;font-size:.875rem;font-weight:500;
  color:var(--gold);border-bottom:1px solid transparent;transition:border-color .2s;
}
.paket__nehmen::after{content:"→";transition:transform .25s}
.paket:hover .paket__nehmen{border-bottom-color:var(--gold)}
.paket:hover .paket__nehmen::after{transform:translateX(4px)}
.paket:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Beim Paket wird der Einzelpreis zum Vergleichswert */
.preis__zeile[data-durchgestrichen] span:last-child{text-decoration:line-through;color:var(--text-leise)}

/* ============================================================
   Bewegtbild — der Zusatz. Zweimal auf der Seite:
   als anklickbare Zeile im Konfigurator (.zusatz) und als
   erklärender Abschnitt (.bewegt).
   ============================================================ */
/* Auftrag "Kasse auf dem Handy -- Zweispalten-Raster bricht nicht um"
   (Nachtrag 8, 03.09.2026), Punkt 4 ("Gedenkvideo dazu"): flex-wrap:wrap
   ergänzt, damit .zusatz__preis auf schmalen Bildschirmen unter Haken+Text
   rutschen darf, statt die Zeile in die Breite zu zwingen (vorher kein
   flex-wrap -- drei Flex-Kinder in einer starren Zeile). max-width:100% und
   min-width:0 verhindern zusätzlich, dass die Zeile selbst breiter als ihr
   Container wird. */
.zusatz{
  display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;cursor:pointer;
  margin-block:1.25rem;padding:.9rem 1rem;min-height:44px;
  max-width:100%;min-width:0;
  border:1px solid var(--zier-dunkel);border-radius:var(--radius);
  background:rgba(154,143,122,.06);transition:border-color .2s, background .2s;
}
.zusatz:hover{border-color:var(--zier);background:rgba(154,143,122,.12)}
.zusatz input{position:absolute;opacity:0;width:1px;height:1px}
.zusatz__haken{
  flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;
  border:1.5px solid var(--zier-dunkel);border-radius:5px;color:transparent;
  transition:background .2s, border-color .2s, color .2s;
}
.zusatz__haken svg{width:14px;height:14px}
.zusatz input:checked ~ .zusatz__haken{background:var(--gold);border-color:var(--gold);color:#241E12}
.zusatz input:focus-visible ~ .zusatz__haken{outline:2px solid var(--gold);outline-offset:3px}
/* min-width:0 -- als Flex-Kind darf der Text jetzt schrumpfen/umbrechen,
   statt die Zeile über den Container hinaus zu ziehen (dasselbe Muster wie
   bei den Positionsnamen in Nachtrag 6); flex:1 1 0 lässt ihn den Platz
   neben dem Haken füllen und zuerst schrumpfen, bevor umgebrochen wird. */
.zusatz__text{display:flex;flex-direction:column;gap:.15rem;line-height:1.35;min-width:0;flex:1 1 0}
.zusatz__text b{font-weight:500;color:var(--text-dunkel)}
.zusatz__text span{font-size:.8125rem;color:var(--text-dunkel-leise)}
/* flex:none -- der Preis behält seine eigene Breite und rutscht dank
   flex-wrap oben bei Platzmangel als Ganzes in eine eigene Zeile,
   statt selbst zusammengedrückt zu werden. */
.zusatz__preis{margin-left:auto;flex:none;white-space:nowrap;font-size:.875rem;font-weight:500;color:var(--text-dunkel)}

/* Dezenter Verweis zur Gedenkvideo-Galerie -- kein Knopf, nur ein kleiner
   Link, an jeder Stelle, an der man das Gedenkvideo zum Warenkorb
   hinzufügen kann (Auftrag "Gedenkvideo-Galerie", 30.08.2026). */
.gedenkvideos-verweis{
  margin-top:-.5rem;margin-bottom:1.25rem;font-size:.8125rem;
}
.gedenkvideos-verweis a{color:var(--text-leise);text-decoration:underline;text-underline-offset:2px}
.gedenkvideos-verweis a:hover{color:var(--text)}

.bewegt__gitter{display:grid;gap:clamp(1.5rem,calc(4vw / var(--zf,1)),3rem);align-items:center}
@media(min-width:820px){.bewegt__gitter{grid-template-columns:minmax(0,10rem) minmax(0,1fr)}}
.bewegt__zeichen{
  position:relative;display:grid;place-items:center;
  width:9rem;height:9rem;border-radius:50%;color:var(--zier);
}
.bewegt__zeichen svg{width:2.6rem;height:2.6rem;position:relative;z-index:2}
.bewegt__rahmen{position:absolute;inset:0;border:1px solid var(--grund-linie);border-radius:50%}
.bewegt__welle{
  position:absolute;inset:0;border:1px solid var(--zier-dunkel);border-radius:50%;
  opacity:0;animation:welle 3.6s ease-out infinite;
}
.bewegt__welle:nth-child(3){animation-delay:1.2s}
.bewegt__welle:nth-child(4){animation-delay:2.4s}
@keyframes welle{
  0%  {transform:scale(.72);opacity:0}
  25% {opacity:.5}
  100%{transform:scale(1.18);opacity:0}
}
@media(prefers-reduced-motion:reduce){.bewegt__welle{animation:none;opacity:.28}}
.bewegt__preis{margin-block:1rem 1.5rem;font-size:.9375rem}
.bewegt__preis b{color:var(--text);font-weight:500}
.bewegt__preis span{color:var(--text-leise)}

/* Letzte Erinnerung kurz vor dem Kaufknopf */
.merker{
  display:flex;align-items:center;gap:.6rem;justify-content:center;flex-wrap:wrap;
  margin-bottom:1rem;font-size:.875rem;color:var(--text-leise);
}
.merker a{color:var(--gold);text-underline-offset:3px}

/* ============================================================
   Kopfzeile
   ============================================================ */
.kopf{
  position:sticky;top:0;z-index:60;background:rgba(var(--grund-rgb),.9);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  background-image:
    linear-gradient(rgba(var(--grund-rgb),.9), rgba(var(--grund-rgb),.9)),
    linear-gradient(90deg, rgba(54,48,67,0), var(--grund-linie) 20%, var(--grund-linie) 80%, rgba(54,48,67,0));
  background-origin:padding-box, border-box;
  background-clip:padding-box, border-box;
}
.kopf__inhalt{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:96px;
}
/* Auftrag "Kaufweg, Rabatt, Rundung, Layout-Springen, Videos, Favicon",
   03.09.2026, Punkt 6: #kopfbereich ist in JEDER Seite (index.html,
   kasse.html, alle generierten Seiten) zunächst ein leerer <div>, den
   layoutAufbauen() per innerHTML mit kopfHTML() befüllt (.aktion-Leiste +
   .kopf, siehe layout.js) -- als sticky-Element ganz oben betrifft ein
   Sprung hier die GESAMTE Seite darunter, vermutlich der größte einzelne
   Anteil am gemeldeten CLS von 1.0. .kopf__inhalt{min-height:96px} (oben,
   aus einem früheren Auftrag) reserviert nur die Höhe INNERHALB von .kopf
   selbst, erst NACHDEM kopfHTML() eingesetzt wurde -- der Container davor
   bleibt ohne diese Regel bei 0px. Werte per Handrechnung aus der Auftrag
   26.08.2026-Formel (Logo + Marke-Padding = 96px) und den
   .aktion__inhalt-Werten (Padding .7rem+.7rem sowie eine Zeile Text bei
   Zeilenhöhe 1.5 und Schriftgröße .8125rem ≈ 42px) hergeleitet, OHNE
   Browser gemessen -- siehe OFFEN-2026-09-03.md. Die .aktion-Leiste fehlt
   nur auf der eigenständigen Gedenken-Seite (aktionHTML() in kopfHTML()). */
/* Auftrag 4c (27.09.2026): Die zweite Zeile reservierte 138 px -- 96 px fuer
   den Kopf und 42 px fuer die .aktion-Leiste darueber. Diese Leiste baut
   kopfHTML() seit Laengerem nicht mehr (aktionHTML() gibt es nicht mehr).
   Im Browser gemessen: der Kopf ist 97 px hoch, der Rest war leerer Raum, der
   auf JEDER Seite ausser Gedenken alles um 41 px nach unten geschoben hat --
   genug, um Preiszeile und Kaufknopf aus dem ersten Bildschirm zu draengen.
   Reserviert wird jetzt genau das, was auch gebaut wird. */
#kopfbereich{min-height:96px}
body:not([data-seite="gedenken"]) #kopfbereich{min-height:96px}
.marke{
  display:inline-flex;align-items:center;padding:.5rem 0;min-height:44px;
}
.marke img{height:80px;width:auto;display:block} /* Korrekturauftrag 26.08.2026, Punkt 9:
  Logo um ein Drittel vergrößert (60px -> 80px), damit der Zusatz "NEVER ORDINARY"
  lesbarer wird. Ersetzt die gegenteilige Vorgabe vom 25.08.2026 (dort sollte die
  Kopfleiste ausdrücklich NICHT mitwachsen) -- diesmal ausdrücklich verlangt:
  .kopf__inhalt{min-height} zieht mit (76px -> 96px), nach derselben Formel wie
  vorher (Logo + 2×.5rem Marke-Padding (16px) = Kopfleistenhöhe), damit nichts
  überlappt. Das Logo selbst ist eine 400×200px-Rastergrafik (bilder/logo.png) --
  bei 80px Höhe weiterhin innerhalb der Quellauflösung, keine Unschärfe. */
.nav{display:none;gap:.25rem;align-items:center}
.nav a{
  padding:.7rem .9rem;font-size:.875rem;color:var(--text-leise);
  min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--t-schnell) var(--kurve);
}
.nav a:hover{color:var(--text)}
.kopf__rechts{display:flex;align-items:center;gap:.5rem}
.warenkorb-knopf{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--text-leise);
  transition:color var(--t-schnell) var(--kurve);
}
.warenkorb-knopf:hover{color:var(--text)}
.warenkorb-knopf svg{width:22px;height:22px}
.warenkorb-knopf__zahl{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--gold);color:var(--grund);font-size:.6875rem;font-weight:600;
  line-height:1;
}
.sprache{
  display:flex;border:1px solid var(--bedien-dunkel);border-radius:var(--radius);overflow:hidden;
}
.sprache button{
  background:transparent;border:0;padding:.5rem .7rem;min-height:44px;min-width:44px;
  font-size:.75rem;letter-spacing:.1em;color:var(--text-leise);cursor:pointer;
  transition:background var(--t-schnell) var(--kurve),color var(--t-schnell) var(--kurve);
}
.sprache button[aria-pressed="true"]{
  color:var(--grund);font-weight:500;
  background-image:
    radial-gradient(120% 180% at 22% -30%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%),
    linear-gradient(176deg,#FBEFD2 0%,#EDD39C 32%,#CFA660 62%,#E2BE80 88%,#F5E4BA 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
@media(min-width:1024px){.nav{display:flex}}
/* 24.08.2026: Kopfzeile lief bei schmalen Handybreiten über -- Logo (96px),
   Sprachumschalter (min. 90px), Warenkorb-Symbol (44px) UND dieser Knopf
   passten rechnerisch nicht in 375px Breite, der Sprachumschalter wurde dabei
   abgeschnitten. Der Knopf ist auf jeder Seite ohnehin mehrfach im
   Seiteninhalt vorhanden (Hero, Seitenkopf, Abschluss) -- in der Kopfzeile
   selbst nur ab 640px, wo genug Platz für alles gleichzeitig ist. */
.kopf__cta{display:none}
@media(min-width:640px){.kopf__cta{display:inline-flex}}

/* ============================================================
   HERO — Vorher/Nachher-Schieberegler (Signature-Element)
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-block:clamp(1.25rem,calc(2.4vw / var(--zf,1)),2rem) clamp(2rem,calc(4vw / var(--zf,1)),3.25rem)}
.hero__gitter{
  display:grid;gap:clamp(1.5rem,calc(3vw / var(--zf,1)),2.4rem);align-items:center;position:relative;z-index:1;
}
@media(min-width:1024px){
  .hero__gitter{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
}
.hero h1{font-size:clamp(1.75rem,calc(3.5vw / var(--zf,1)),2.65rem)}
.hero h1 em{font-style:italic;color:var(--zier)}
.hero__unter{margin-top:.9rem;max-width:46ch;color:var(--text-leise);font-size:.9375rem;text-wrap:pretty}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.hero__mini{
  margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.45rem 1.3rem;
  font-size:.8125rem;color:var(--text-leise);
}
.hero__mini li{display:flex;align-items:center;gap:.5rem}
.hero__mini svg{width:15px;height:15px;color:var(--zier);flex:none}

/* ============================================================
   VERWANDLUNG — eine sehr langsame Überblendung, kein Bedienelement.
   Der Schnappschuss liegt unten, das fertige Bild blendet in Zeitlupe darüber
   auf, hält, und verschwindet wieder. Ein leichter Zoom läuft gegenläufig mit,
   damit die Blende atmet statt nur heller zu werden.
   Ein Pausenknopf ist Pflicht: Bewegung, die von allein startet und länger als
   fünf Sekunden läuft, muss anhaltbar sein.
   ============================================================ */
.wandel{position:relative}
.wandel__rahmen{
  position:relative;border:1px solid var(--grund-linie);padding:.75rem;
  background:var(--grund-weich);border-radius:var(--radius-gross);
}
.wandel__buehne{
  position:relative;aspect-ratio:5/7;overflow:hidden;border-radius:var(--radius);
  background:var(--grund);
}
/* Korrektur 24.08.2026 ("Bildformat 5:7 projektweit"): der Wandel-Regler
   (Hero UND jeder Themenwelt-Kopfbereich) zeigt durchgehend 5:7, ohne
   Beschnitt. Die frühere Rücknahme auf 4:5/1:1/5:4 (22.–24.08.2026, siehe
   sicherungen/backup-2026-08-22-seitenverhaeltnis) verhinderte zwar
   Scrollen, tat das aber, indem sie das Bild sichtbar beschnitt -- genau
   das war laut Auftrag nie zulässig.

   NOTFALLKORREKTUR 24.08.2026 ("Bilder projektweit zerstört"): ein erster
   Versuch steuerte die Größe über die Höhe (min(vh, px), width:auto,
   .wandel{width:fit-content}) -- das erzeugte in echten Browsern eine
   fehlerhafte Breitenberechnung (Rahmen blieb bei seiner alten, zu großen
   Breite stehen, während sich nur das Bild selbst auf 5:7 verkleinerte:
   ein kleiner Bildausschnitt oben links in einem viel zu breiten, leeren
   Rahmen). width:fit-content in Kombination mit height-abgeleiteter
   Breite ist in der Praxis nicht zuverlässig.

   Jetzt wie überall sonst im Projekt (.kachel__bild, .werk img,
   .stil-einzel__kachel img): Breite fest/responsiv vorgeben, Höhe ergibt
   sich aus aspect-ratio. Das ursprüngliche Scroll-Problem auf den
   Themenwelt-Seiten wird NICHT mehr über die Bildgröße gelöst, sondern
   ausschließlich über die Höhenbegrenzung des Stil-Buttonblocks (siehe
   .wandel-bereich .filter weiter unten, Auftrag "Themenwelt-Seiten neu
   anordnen"). */
/* Korrekturauftrag 25.08.2026 ("Themenwelt-Kopfbereich neu aufbauen"): die
   Notfallkorrektur oben (clamp(160px,calc(15vw / var(--zf,1)),195px)) war spürbar kleiner als
   vor der Umstellung auf 5:7 (damals bis zu 520px) -- jetzt deutlich größer,
   weiterhin reine Breitensteuerung, keine Höhe/vh, kein width:fit-content. */
@media(min-width:640px){
  .wandel{width:100%;max-width:480px}
}
@media(min-width:1024px){
  .wandel{margin-inline:auto}
  .wandel__rahmen{padding:.55rem}
}
/* In der "Weitere Beispiele"-Reihe bestimmt die feste Kachelbreite (240px,
   siehe .wandel-weitere__stueck) das Maß, nicht die obige Breitenformel. */
.wandel-weitere__stueck .wandel{width:auto;max-width:none}

/* Auftrag "Kaufweg, Rabatt, Rundung, Layout-Springen, Videos, Favicon",
   03.09.2026, Punkt 6: [data-baustein="wandel"] ist der leere Platzhalter,
   den layoutAufbauen() erst per outerHTML durch die echte .wandel-Struktur
   ersetzt (Hero auf index.html, Kopfbereich jeder Themenwelt-Seite,
   Gedenken-Bereich) -- bis dahin hatte er keine eigene Höhe (0px), das
   spätere Einsetzen ließ die ganze Seite darunter springen. :empty trifft
   NUR den unbefüllten Zustand -- sobald outerHTML die echte .wandel-Struktur
   einsetzt, greift stattdessen .wandel__buehne{aspect-ratio:5/7} von oben,
   diese Regel hier wird dann automatisch bedeutungslos (kein doppelt
   wirkender Nachlauf-Wert, keine feste Höhe, die hinterher zu groß wäre). */
[data-baustein="wandel"]:empty{aspect-ratio:5/7}
@media(min-width:640px){[data-baustein="wandel"]:empty{width:100%;max-width:480px}}
@media(min-width:1024px){[data-baustein="wandel"]:empty{margin-inline:auto}}
.wandel__lage{position:absolute;inset:0}
.wandel__lage img{width:100%;height:100%;object-fit:cover;display:block}
/* Korrekturauftrag 25.08.2026, Punkt 7: einzelnes, austauschbares Bild in
   der Bühne (Worte an der Wand auf der Themenwelt-Seite) -- ohne die
   Vorher/Nachher-Überblendung, deshalb ein einzelnes <img> direkt in
   .wandel__buehne statt zweier .wandel__lage-Ebenen. */
.wandel__buehne > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================================
   DAS FERTIGE BILD ZUERST (Kaufprueflauf 21.09.2026, B16; Auftrag
   "Kaufweg verkuerzen", Teil 13.3)
   ----------------------------------------------------------------------------
   Bis zum 21.09.2026 begann der Zyklus bei opacity:0 auf der Nachher-Ebene --
   beim Laden der Seite sah man also den Schnappschuss. Gemessen war bei sechs
   von sechs Messungen am Rechner "vorher-01.webp" das grosse Bild im ersten
   Bildschirm. Der Vorher/Nachher-Effekt wirkt aber nur, wenn das Versprechen
   vor dem Beweis steht.

   Jetzt: Bei 0 % ist die Nachher-Ebene voll sichtbar und bleibt DREI SEKUNDEN
   stehen (3 s von 14 s = 21,4 %), danach wird auf das Vorher-Bild geblendet,
   zum Schluss wieder zurueck. 0 % und 100 % zeigen denselben Zustand, die
   Schleife bleibt dadurch nahtlos -- ohne Sprung, ohne zusaetzliches Skript.
   Die Dauer der Ueberblendung (rund 3,7 s) und die Standzeit des Vorher-Bilds
   (rund 3,6 s) entsprechen den bisherigen Werten, nur in umgekehrter Folge.
   Die Zoomfahrten sind mitgedreht: bei 0 % steht das fertige Bild ruhig auf
   scale(1), der Schnappschuss auf scale(1.04) -- sonst begaenne die Seite mit
   einem angeschnittenen, gerade wandernden Bild.
   ============================================================================ */
.wandel__lage--vorher img{animation:wandelZoomAus 14s ease-in-out infinite}
.wandel__lage--nachher{opacity:1;animation:wandelBlende 14s ease-in-out infinite}
.wandel__lage--nachher img{animation:wandelZoomEin 14s ease-in-out infinite}

@keyframes wandelBlende{
   0%,  21% {opacity:1}
  48%,  74% {opacity:0}
  100%      {opacity:1}
}
@keyframes wandelZoomEin{
   0%,  21% {transform:scale(1)}
  48%,  74% {transform:scale(1.04)}
  100%      {transform:scale(1)}
}
@keyframes wandelZoomAus{
   0%,  21% {transform:scale(1.04)}
  48%,  74% {transform:scale(1)}
  100%      {transform:scale(1.04)}
}

/* Einzelmotiv-Fläche (stil.anzeige === "einzel", z. B. Worte an der Wand) --
   ersetzt bei diesen Stilen den Vorher/Nachher-Regler. Steckt im selben
   .wandel__rahmen wie der Regler, damit die Fläche optisch dazugehört, ohne
   eigene neue Rahmenfarbe. Bis zu fünf Bilder, einheitlich 5:7 mit
   object-fit:cover -- dieselben Werte wie bei allen übrigen inhaltlichen
   Bildflächen im Projekt. */
.stil-einzel{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:.5rem;
}
/* Jede Kachel: ein großer "Motiv auswählen"-Knopf (das ganze Bild) plus ein
   kleiner "vergrößern"-Knopf oben drauf -- zwei GESCHWISTER-Buttons, keine
   verschachtelten <button>, das wäre ungültiges HTML (Auftrag "Fertige
   Motive einzeln bestellbar machen + Großansicht", 24.08.2026). */
.stil-einzel__kachel{position:relative}
.stil-einzel__kachel img{
  width:100%;aspect-ratio:5/7;object-fit:cover;display:block;
  border-radius:var(--radius);background:var(--grund-weich);
}
/* Nur in der Kasse: derselbe Kachel-Rahmen wird zu einem "Motiv
   auswählen"-Knopf (siehe kasse.js positionKarteHTML) -- auf den
   Themenwelt-Seiten selbst bleibt die Kachel ohne Auswahlfunktion, nur mit
   Großansicht, weil die Bestellung dort noch nicht beginnt. */
.stil-einzel__waehlen{
  display:block;width:100%;padding:0;margin:0;cursor:pointer;
  background:none;border:2px solid transparent;border-radius:var(--radius);
}
.stil-einzel__waehlen img{
  width:100%;aspect-ratio:5/7;object-fit:cover;display:block;
  border-radius:calc(var(--radius) - 2px);background:var(--grund-weich);
}
.stil-einzel__waehlen[aria-pressed="true"]{border-color:var(--gold-tief)}
/* Kleine, anklickbare Motivreihe unter dem großen Bild (Punkt 7b/7d) --
   ein Klick markiert die Kachel UND tauscht das große Bild aus, siehe
   stilEinzelVerdrahten() in stile.js. */
.stil-einzel-klein{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.stil-einzel-klein__knopf{
  width:clamp(60px,calc(17vw / var(--zf,1)),86px);padding:0;border:2px solid transparent;border-radius:var(--radius);
  cursor:pointer;background:none;overflow:hidden;flex:none;
  transition:border-color var(--t-schnell) var(--kurve);
}
.stil-einzel-klein__knopf img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block;background:var(--grund-weich)}
.stil-einzel-klein__knopf:hover{border-color:var(--bedien-dunkel)}
.stil-einzel-klein__knopf[aria-pressed="true"]{border-color:var(--gold-tief)}

/* Auftrag "Konfigurator auf alle Themenwelt-Seiten + Eigenes Foto: Stile
   unter das Hauptbild", 03.09.2026, Teil B: die zehn Beispielstile von
   "Eigenes Foto" direkt unter dem Hauptbild, waagerecht scrollbar (Desktop
   UND Handy gleich), Kacheln im Hochformat 3:4 mit Namen darunter. Ähnlich
   wie .stil-einzel-klein oben (kleine Kachel, Klick tauscht das große Bild,
   Goldrahmen bei aria-pressed), aber mit eigener Namensbeschriftung je
   Kachel und eigenem Seitenverhältnis -- deshalb eine eigene, kleine
   Klassenfamilie statt eines Umbaus der bestehenden. Dunkler Seitengrund
   (Hero, kein "helle Bühne"-Bereich) -- Name in --text-leise, derselbe Farb-
   ton wie .werk__name/.stil-einzel-klein-Beschriftungen anderswo. */
/* ENTSCHEIDUNG SASKIA: Beispielbilder waagerecht. Passt die Reihe unter das
   Hauptbild -> mittig. Ist sie breiter -> rechte Kante bündig mit dem
   Hauptbild, Reihe ragt nach links. Nie untereinander.

   (Nachtrag 2 "Stilbeschreibung und Beispielbilder mittig", 03.09.2026:
   diese "Zehnerreihe" auf themenwelt-eigenes-foto.html ist mechanisch
   etwas anderes als .wandel-weitere__reihe -- kein umbrechendes Raster,
   sondern ein waagerecht SCROLLBARER Streifen fester Kachelbreite, dessen
   Elternelement (.wandel, dasselbe Element wie das Hauptbild selbst) schon
   immer exakt auf die Bildbreite begrenzt ist -- "breiter als das
   Hauptbild" kann hier per Bauart nicht vorkommen, dafür sorgt der
   eigene Bildlauf statt eines Zeilenumbruchs. justify-content:center
   ergänzt, damit die Kacheln, wenn sie nicht die volle Breite füllen (wenige
   Beispielbilder vorhanden), unter dem Hauptbild MITTIG stehen statt am
   linken Rand zu kleben -- bei genug Kacheln zum Scrollen bleibt die
   gewohnte, von links beginnende Bildlauf-Reihenfolge unverändert
   (justify-content wirkt dann nicht mehr sichtbar, der Inhalt bestimmt
   die Breite selbst). */
.eigenes-stile{
  display:flex;gap:.6rem;margin-top:1.1rem;overflow-x:auto;padding-bottom:.3rem;
  justify-content:center;
  scrollbar-width:thin;
}
.eigenes-stile__kachel{
  flex:none;width:clamp(64px,calc(18vw / var(--zf,1)),92px);padding:0;border:2px solid transparent;
  border-radius:var(--radius);cursor:pointer;background:none;overflow:hidden;
  transition:border-color var(--t-schnell) var(--kurve);
}
.eigenes-stile__kachel img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--grund-weich)}
.eigenes-stile__kachel:hover{border-color:var(--bedien-dunkel)}
.eigenes-stile__kachel[aria-pressed="true"]{border-color:var(--gold-tief)}
.eigenes-stile__name{display:block;padding:.35rem .25rem;font-size:.75rem;color:var(--text-leise);text-align:center}

.stil-einzel__gross{
  position:absolute;right:.4rem;bottom:.4rem;z-index:2;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(var(--grund-rgb),.62);
  backdrop-filter:blur(6px);color:var(--text);display:grid;place-items:center;
}
.stil-einzel__gross:hover{background:rgba(var(--grund-rgb),.85);border-color:rgba(255,255,255,.5)}
.stil-einzel__gross svg{width:13px;height:13px}

/* Großansicht (Lightbox) -- ein einziges, geteiltes Element für alle
   Themenwelten, in layout.js einmalig erzeugt. */
body.grossansicht-offen{overflow:hidden}
.grossansicht-ausloeser{cursor:pointer}
.grossansicht{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:2rem;
  background:rgba(var(--grund-rgb),.92);backdrop-filter:blur(6px);
}
.grossansicht__flaeche{position:relative;max-width:min(calc(90vw / var(--zf,1)),700px);max-height:calc(90vh / var(--zf,1))}
.grossansicht__bild{
  display:block;max-width:100%;max-height:calc(90vh / var(--zf,1));width:auto;height:auto;
  border-radius:var(--radius);
}
.grossansicht__video{
  display:block;max-width:100%;max-height:calc(90vh / var(--zf,1));width:auto;height:calc(90vh / var(--zf,1));
  border-radius:var(--radius);background:#000;
}
.grossansicht__schliessen{
  position:absolute;top:-.9rem;right:-.9rem;z-index:2;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(var(--grund-rgb),.9);
  color:var(--text);display:grid;place-items:center;
}
.grossansicht__schliessen:hover{background:var(--grund)}
.grossansicht__schliessen svg{width:16px;height:16px}
.grossansicht__spruch{
  margin-top:.75rem;text-align:center;color:var(--text-leise);font-size:.9375rem;
}

/* "Vergrößern"-Knopf beim Vorher/Nachher-Regler -- spiegelbildlich zum
   bestehenden Pausenknopf, damit sich beide nicht überlappen. */
.wandel__gross{
  position:absolute;left:1.05rem;bottom:1.05rem;z-index:4;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(var(--grund-rgb),.62);
  backdrop-filter:blur(6px);color:var(--text);display:grid;place-items:center;
  transition:background var(--t-schnell) var(--kurve),border-color var(--t-schnell) var(--kurve);
}
.wandel__gross:hover{background:rgba(var(--grund-rgb),.85);border-color:rgba(255,255,255,.5)}
.wandel__gross svg{width:15px;height:15px}

/* Beschriftung wechselt auf derselben Zeitachse mit */
.wandel__marken{
  position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  /* Links UND rechts Platz für die beiden Rundknöpfe reservieren (je 40px +
     1.05rem Abstand -- .wandel__gross unten links, .wandel__pause unten
     rechts). Bei schmaler Bühne bricht die Beschriftung sonst um und liegt
     unter den Knöpfen (Notfallkorrektur 24.08.2026, "Bilder projektweit
     zerstört"). */
  padding:1.4rem 3.75rem .9rem;
  background:linear-gradient(180deg,transparent,rgba(var(--grund-rgb),.88));
}
.wandel__marke{
  display:block;font-size:.9375rem;font-weight:500;color:var(--text);
  animation:wandelBlende 14s ease-in-out infinite;
}
/* Eigene, feste Position statt der Elternauffüllung (absolut positionierte
   Kinder ignorieren das padding von .wandel__marken) -- deshalb hier
   dieselbe reservierte Breite wie dort, sonst liegt der Text unter dem
   Vergrößern-Knopf (.wandel__gross, ebenfalls links unten). Notfallkorrektur
   24.08.2026, "Bilder projektweit zerstört". */
.wandel__marke--vorher{position:absolute;left:3.75rem;bottom:.9rem;animation-name:wandelBlendeUm}
/* Gegenstueck zu wandelBlende (Teil 13.3): beim Laden ist das FERTIGE Bild
   zu sehen, die Beschriftung "Vorher" muss dort also unsichtbar sein. */
@keyframes wandelBlendeUm{
   0%,  21% {opacity:0}
  48%,  74% {opacity:1}
  100%      {opacity:0}
}

/* Anhalten AUSSCHLIESSLICH über den Pause-Knopf (Korrekturauftrag 25.08.2026,
   Teil H) -- vorher hielt der Wechsel schon bei bloßer Mausberührung oder
   Tastaturfokus an, wodurch Besucherinnen, die zufällig mit der Maus über
   das Bild fuhren, das Ergebnis nie zu sehen bekamen. */
.wandel[data-lauf="aus"] .wandel__lage img,
.wandel[data-lauf="aus"] .wandel__lage--nachher,
.wandel[data-lauf="aus"] .wandel__marke{animation-play-state:paused}

.wandel__pause{
  position:absolute;right:1.05rem;bottom:1.05rem;z-index:4;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(var(--grund-rgb),.62);
  backdrop-filter:blur(6px);color:var(--text);display:grid;place-items:center;
  transition:background var(--t-schnell) var(--kurve),border-color var(--t-schnell) var(--kurve);
}
.wandel__pause:hover{background:rgba(var(--grund-rgb),.85);border-color:rgba(255,255,255,.5)}
.wandel__pause svg{width:15px;height:15px}
.wandel__pause .zeichen-pause{display:block}
.wandel__pause .zeichen-lauf{display:none}
.wandel[data-lauf="aus"] .wandel__pause .zeichen-pause{display:none}
.wandel[data-lauf="aus"] .wandel__pause .zeichen-lauf{display:block}

/* Ohne Bewegung bleibt das fertige Bild stehen — das ist die Aussage */
@media (prefers-reduced-motion: reduce){
  .wandel__lage img,.wandel__lage--nachher,.wandel__marke{animation:none}
  .wandel__lage--nachher{opacity:1}
  .wandel__marke--vorher{display:none}
  .wandel__pause{display:none}
}

/* ============================================================
   Drei Vorteile — nicht sieben
   ============================================================ */
.vorteile{border-bottom:1px solid var(--grund-linie)}
.vorteile__gitter{display:grid;gap:0}
@media(min-width:768px){.vorteile__gitter{grid-template-columns:repeat(3,1fr)}}
.vorteil{padding:1.75rem 0;display:flex;gap:1.1rem;align-items:flex-start}
@media(min-width:768px){
  .vorteil{padding:2.25rem 2rem;border-left:1px solid var(--grund-linie)}
  .vorteil:first-child{padding-left:0;border-left:0}
  .vorteil:last-child{padding-right:0}
}
@media(max-width:767px){.vorteil + .vorteil{border-top:1px solid var(--grund-linie)}}
.vorteil__ring{
  width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--zier);
  display:grid;place-items:center;color:var(--zier);
}
.vorteil__ring svg{width:20px;height:20px}
.vorteil h3{font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:.02em}
.vorteil p{font-size:.875rem;color:var(--text-leise);margin-top:.4rem}

/* ============================================================
   Sechs Themenkacheln
   ============================================================ */
/* ============================================================
   THEMENKACHELN — jede zeigt ihr Motiv.
   Vorher waren es leere Flächen mit Symbol und Text; sie erklärten nichts.
   Jetzt liegt das Motiv im Hintergrund, ein Verlauf hält den Text lesbar,
   und beim Darüberfahren kommt das Bild langsam näher.
   ============================================================ */
.kacheln{display:grid;gap:1px;background:var(--grund-linie);border:1px solid var(--grund-linie);margin-top:2.25rem}
/* Ab 700px passen zwei Bild+Text-Spalten nebeneinander, ohne dass die
   Textspalte zu schmal zum Lesen wird — darunter steht eine Kachel je Zeile. */
@media(min-width:700px){.kacheln{grid-template-columns:repeat(2,1fr)}}
/* Auftrag "Stolz-Welten entfernen" (26.09.2026), Teil 3: Es sind sieben
   Themenwelten statt zehn. Bei zwei Spalten blieb die siebte Kachel allein in
   der letzten Reihe stehen, daneben klaffte eine leere, hellere Fläche, die
   wie ein Fehler aussah. Die letzte Kachel einer ungeraden Anzahl füllt ihre
   Reihe jetzt bis zum Ende aus — genau so, wie jede Kachel es unter 700px
   ohnehin tut. Geändert wird nur die Verteilung im Raster, weder Kachelhöhe
   noch Innenabstände noch Farben. */
@media(min-width:700px) and (max-width:1039px){
  .kacheln > .kachel:last-child:nth-child(odd){grid-column:1 / -1}
}

.kachel{
  position:relative;background:var(--grund);cursor:pointer;
  display:flex;align-items:center;gap:1.1rem;
  padding:1.1rem 1.35rem 1.1rem 1.1rem;
}
/* Hochformat 5:7, fest — object-fit:cover füllt die Fläche randlos, das
   Motiv wird dafür an den Rändern beschnitten. */
.kachel__bild{
  flex:0 0 auto;width:clamp(84px,calc(24vw / var(--zf,1)),140px);aspect-ratio:5/7;
  object-fit:cover;background:var(--grund-weich);
  transition:transform 900ms var(--kurve);
}
.kachel:hover .kachel__bild,
.kachel:focus-visible .kachel__bild{transform:scale(1.045)}

.kachel__inhalt{display:flex;flex-direction:column;justify-content:center;min-width:0}

.kachel h3{font-size:clamp(1.1rem,calc(1.8vw / var(--zf,1)),1.4rem)}
.kachel p{font-size:.8125rem;color:var(--text-leise);margin-top:.3rem}
.kachel__pfeil{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  opacity:.72;transition:opacity var(--t-normal) var(--kurve);
}
.kachel:hover .kachel__pfeil{opacity:1}
.kachel__pfeil svg{width:14px;height:14px;transition:transform var(--t-normal) var(--kurve)}
.kachel:hover .kachel__pfeil svg{transform:translateX(5px)}

/* Gedenken hebt sich über die Farbe ab, nicht über ein Symbol */
.kachel--memoria .kachel__pfeil{color:var(--memoria);opacity:.9}

@media (prefers-reduced-motion: reduce){
  .kachel__bild{transition:none}
  .kachel:hover .kachel__bild{transform:scale(1)}
}

/* ============================================================
   WAND-KONFIGURATOR — helle Bühne, echte Beurteilbarkeit
   Anordnung 24.08.2026 ("Konfigurator neu anordnen"): Bühne groß und mittig
   zuerst (volle Breite statt einer schmalen linken Spalte mit Leerfläche
   daneben), darunter Themenwelt/Stil, darunter die übrigen Einstellungen
   mehrspaltig (.konf__raster), Preis/Bezahlung am Ende (.konf__abschluss).
   ============================================================ */
/* Beispielvideo im Videoabschnitt — steht an der Stelle des gezeichneten
   Zeichens, sobald eine echte Datei hinterlegt ist. */
.bewegt__schau{margin:0;display:flex;flex-direction:column;gap:.7rem;align-items:center}
.bewegt__schau video{
  width:100%;max-width:280px;height:auto;display:block;border-radius:var(--radius);
  background:#000;box-shadow:0 14px 40px rgba(0,0,0,.42);
}
.bewegt__schau figcaption{
  font-size:.8125rem;color:var(--zier);text-align:center;
}

/* ============================================================
   Gedenkvideos — Vorschau-Galerie auf der Gedenken-Themenwelt
   (Auftrag "Gedenkvideo-Galerie", 30.08.2026). Reihe horizontal
   scrollbar wie .vk-tabelle-scroll, damit auf dem Handy nichts
   umbricht oder abgeschnitten wird. Kachelgröße orientiert sich an
   .werk (kleine Vorschaubilder der Stil-Galerie), Seitenverhältnis
   aber 9:16 statt 5:7, weil hier Hochformat-Video steht.
   ============================================================ */
.gedenkvideos__reihe{
  display:flex;gap:.75rem;margin-top:1.5rem;overflow-x:auto;
  padding-bottom:.25rem;-webkit-overflow-scrolling:touch;
}
.gedenkvideo{
  flex:none;width:120px;aspect-ratio:9/16;position:relative;
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  border:0;padding:0;background:var(--grund-weich);
}
.gedenkvideo video{
  width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  opacity:0;transition:opacity .25s ease;
}
/* Erst sichtbar, sobald gedenkvideoKachelnStarten() (layout.js) den Sprung
   ins hintere Videodrittel abgeschlossen hat oder das Sicherheitsnetz
   abgelaufen ist -- bis dahin bleibt der Kachel-Hintergrund (oben,
   var(--grund-weich)) sichtbar statt eines schwarzen Rechtecks. */
.gedenkvideo video.gedenkvideo__bereit{opacity:1}
.gedenkvideo::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 100%);
}
.gedenkvideo__spiel{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.gedenkvideo__spiel svg{width:22px;height:22px}
.gedenkvideo:hover{opacity:.92}
@media(min-width:640px){
  .gedenkvideo{width:150px}
}
/* Bühne des Konfigurators -- Korrekturauftrag 25.08.2026, Teil A2: volle
   Breite, mittig, dieselbe .wandel-Komponente wie im Themenwelt-Seitenkopf,
   die sich dort selbst auf 480px deckelt (siehe .wandel oben). Zentrierung
   hier über Flexbox statt über .wandel selbst, weil dessen eigene
   margin-inline:auto erst ab 1024px greift. */
/* ============================================================
   Korrekturauftrag 25.08.2026, Punkt 12: Konfigurator dreispaltig.
   Links Themenwelten, mittig die Bühne, rechts die Stile -- alle drei als
   Geschwister in .konf__spalten, deshalb bei 375px automatisch in
   Quellreihenfolge (Themenwelten, Bild, Stile) untereinander, ohne eigene
   Reihenfolgeregel. Ab 900px (dieselbe Schwelle wie .seitenkopf__gitter)
   nebeneinander.
   ============================================================ */
.konf__spalten{display:grid;gap:1.75rem;margin-top:.5rem}
@media(min-width:900px){
  .konf__spalten{grid-template-columns:minmax(170px,200px) minmax(0,1fr) minmax(220px,320px);align-items:start;gap:2.25rem}
}
.konf__spalte--buehne{display:flex;flex-direction:column;justify-content:center}
.konf__spalte--welten .konf__label,.konf__spalte--stile .konf__label{margin-bottom:.85rem}
/* Themenwelten und (wenige) Stile untereinander, volle Spaltenbreite,
   Text mittig statt linksbündig (Punkt 3). */
.konf__welten-liste,
.konf__spalte--stile .filter{
  display:flex;flex-direction:column;flex-wrap:nowrap;gap:.5rem;margin-top:0;
}
.konf__welten-liste button,
.konf__spalte--stile .filter button{
  width:100%;text-align:center;border-radius:var(--radius);
}
/* Auftrag "Stolz-Welten entfernen" (26.09.2026), Teil 4: Die Welt-Knoepfe des
   Konfigurators kommen aus KONF_WELTEN in start.js. start.js gehoert zur
   Kaufstrecke und durfte in diesem Auftrag nicht angefasst werden -- es
   zeichnet die drei entfernten Welten deshalb weiter, und weil ihre
   Sprachschluessel k3/k5/k10 aus lang.js verschwunden sind, stand auf den
   Knoepfen nur noch "k3.titel", "k5.titel" und "k10.titel". Bis start.js in
   einem eigenen Auftrag bereinigt ist, bleiben sie hier ausgeblendet -- das
   entfernt sie auch aus der Tastatur-Reihenfolge und aus dem Vorlesemodus.
   Diese Regel ist ein Notnagel und kann ersatzlos weg, sobald KONF_WELTEN
   nur noch die sieben Welten fuehrt. */
.konf__welten-liste button[data-konf-welt="autos"],
.konf__welten-liste button[data-konf-welt="motorrad"],
.konf__welten-liste button[data-konf-welt="fitness"]{display:none}
/* Viele Stile (z. B. Tiere mit 25): zweispaltig statt einer sehr langen
   Einzelspalte, damit die Spalte ungefähr so hoch bleibt wie das Bild in
   der Mitte -- data-viele wird von konfStileZeichnen() (start.js) gesetzt,
   sobald mehr als zehn Stile zur Auswahl stehen. */
.konf__spalte--stile .filter[data-viele]{
  display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:row;gap:.5rem;
}
.konf__buehne{margin-top:.5rem;margin-bottom:2rem;display:flex;justify-content:center}
/* Auftrag "Kaufweg, Rabatt, Rundung, Layout-Springen, Videos, Favicon",
   03.09.2026, Punkt 6: konfBuehneZeichnen() (start.js) füllt #konf-buehne
   asynchron (wartet bei Vorher/Nachher-Stilen erst bildPruefenKonf() ab) --
   bis dahin ist die Bühne leer, ohne eigene Höhe. :empty reserviert
   dieselbe Fläche wie das spätere Bild (5:7, max. 480px, dieselbe Formel
   wie .wandel oben), UND wie bei "Eigenes Foto" statt eines Bilds der
   .eigenes-hinweis-Text erscheint (eigene, meist geringere Höhe): sobald
   irgendein Kind eingesetzt ist, greift :empty nicht mehr, keine
   überschüssige Lücke bleibt stehen. */
.konf__buehne:empty{width:100%;max-width:480px;margin-inline:auto;aspect-ratio:5/7}
/* Einzelmotiv-Stile (Worte/Sternenkarte) haben kein Vorher-Foto -- dieselbe
   Rahmung wie .wandel__rahmen, aber ein einzelnes festes Bild statt des
   Reglers. */
.konf__buehne-einzel{
  display:block;width:100%;max-width:480px;aspect-ratio:5/7;
  object-fit:cover;border-radius:1px;
}
.konf__reihe{margin-bottom:1.3rem}
/* Auftrag "Konfigurator „Eigenes Foto": Text und Textfeld" (Nachtrag 11,
   03.09.2026), Teil A Punkt 2: #konf-eigenes-wunsch (das Wunschtext-Feld bei
   der Themenwelt "Eigenes Foto") stand bisher völlig unformatiert in
   #konf-eigenes-reihe -- ein <textarea> ohne eigene Breitenregel bleibt auf
   seiner nativen Browser-Vorgabe (rechnerisch cols="20", ein knappes Viertel
   der Spalte) und ist von Haus aus display:inline-block, wodurch die
   nachfolgenden <span class="k-hilfe"> (ebenfalls inline, kein Flex-/Grid-
   Elternelement wie sonst bei .k-feld) rechts DANEBEN zu stehen kamen statt
   darunter. Beide Befunde aus dem Auftrag mit einer gemeinsamen Ursache.
   Bewusst nur auf #konf-eigenes-wunsch/#konf-eigenes-reihe eingegrenzt
   (Auftrag: "Nur die betroffenen Klassen anfassen") -- #konf-worte-reihe
   direkt darunter hat ein eigenes Textfeld (#konf-wortlaut) und eine eigene
   Hilfetext-Klasse (.konf__fuss), von hier aus unberührt. */
#konf-eigenes-wunsch{display:block;width:100%;max-width:100%;box-sizing:border-box}
#konf-eigenes-reihe .k-hilfe{display:block;margin-top:.35rem}
/* Korrekturauftrag 25.08.2026, Teil A2: nicht mehr auf ".konf__reihe > "
   beschränkt -- dieselbe Beschriftung sitzt jetzt auch über der Stil-
   Knopfleiste im Themenwelt-Seitenkopf (.seitenkopf__stile, siehe
   stile.js stilBereichAufbauen()). */
.konf__label{
  display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dunkel-leise);margin-bottom:.7rem;font-weight:500;
}
/* Material/Format/Größe/Anzahl/Wandfarbe/Zusatzoptionen mehrspaltig über die
   volle Breite statt einer einzelnen langen Spalte (Auftrag "Konfigurator
   neu anordnen", 24.08.2026). --voll lässt einzelne, von Natur aus breite
   Zeilen (Rabatt-Banner, die beiden Zusatz-Ankreuzfelder) über alle Spalten
   laufen, statt sie in eine schmale Spalte zu zwängen. */
.konf__raster{display:grid;grid-template-columns:1fr;gap:0 2.5rem;margin-top:.5rem}
@media(min-width:700px){.konf__raster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.konf__raster{grid-template-columns:repeat(3,1fr)}}
.konf__raster--voll{grid-column:1/-1}
.konf__abschluss{max-width:640px;margin:2.25rem auto 0}
/* Korrekturauftrag 26.08.2026, Punkt 7: fünf Elemente unter dem Preis im
   Konfigurator auf index.html mittig ausrichten -- .konf__abschluss selbst
   war zwar schon zentriert (margin:auto), die Texte/Reihen darin liefen
   aber weiterhin linksbündig. Alle fünf Klassen kommen ZUSÄTZLICH auch im
   Abschlussbereich weiter unten (.abschluss) bzw. auf anderen Seiten vor
   (.konf__enthalten/.konf__fotohinweis nur hier; .zahlarten__titel/
   .zahlarten__reihe auch im Fuß und im Abschlussbereich, siehe Punkt 8;
   .konf__knoepfe kommt sonst nirgends vor) -- deshalb hier ausschließlich
   über .konf__abschluss eingegrenzt, nicht als nackte Klassenregel. */
.konf__abschluss .konf__enthalten,
.konf__abschluss .konf__fotohinweis{margin-inline:auto;text-align:center}
.konf__abschluss .zahlarten__titel{text-align:center}
.konf__abschluss .zahlarten__reihe{justify-content:center}
.konf__abschluss .konf__knoepfe{justify-content:center}
.wahl{display:flex;flex-wrap:wrap;gap:.5rem}
.wahl button{
  min-height:44px;padding:.6rem 1rem;background:#FBF8F2;
  border:1px solid var(--bedien-hell);border-radius:var(--radius);
  font-size:.875rem;cursor:pointer;color:var(--text-dunkel);
  transition:border-color var(--t-schnell) var(--kurve),background var(--t-schnell) var(--kurve),
    transform 120ms var(--kurve);
}
.wahl button:hover{border-color:var(--text-dunkel-leise)}
.wahl button:active{transform:scale(.97)}
.wahl button[aria-pressed="true"]{background:var(--grund);color:var(--text);border-color:var(--grund)}
.preis{
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--buehne-linie);
}
.preis__zeile{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.875rem;color:var(--text-dunkel-leise)}
.preis__zeile + .preis__zeile{margin-top:.5rem}
.preis__summe{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--buehne-linie);
}
.preis__summe dt{font-size:.875rem;color:var(--text-dunkel-leise)}
.preis__summe dd{margin:0;font-family:var(--display);font-size:2.1rem;font-variant-numeric:tabular-nums}
.rabatt{
  display:none;align-items:center;gap:.6rem;margin-top:1rem;padding:.8rem 1rem;
  background:var(--buehne-weich);border:1px solid var(--buehne-linie);
  border-left:2px solid var(--gold-tief);border-radius:var(--radius);
  font-size:.8125rem;color:var(--text-dunkel);
}
.rabatt[data-an="ja"]{display:flex}
.rabatt svg{width:16px;height:16px;flex:none;color:var(--zier-dunkel)}
.konf__knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
/* Auftrag "Kaufweg, Rabatt, Rundung, Layout-Springen, Videos, Favicon",
   03.09.2026, Punkt 2: echter goldener Knopf statt Textlink, deshalb jetzt
   ein Flex-Zweispalter (Satz links, Knopf rechts) statt reinem Fließtext --
   unter 600px bricht der Knopf auf volle Breite unter den Satz um. */
.konf__bestaetigung{
  margin-top:.85rem;padding:.7rem .95rem;border-radius:var(--radius);
  background:var(--buehne-weich);font-size:.875rem;line-height:1.5;color:var(--text-dunkel-leise);
  opacity:1;transition:opacity var(--t-ruhig) var(--kurve);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem .95rem;
}
.konf__bestaetigung--aus{opacity:0}
.konf__bestaetigung-text{margin:0;flex:1 1 auto}
.konf__bestaetigung-text b{color:var(--text-dunkel)}
.konf__bestaetigung-knopf{flex:none}
@media(max-width:599px){
  .konf__bestaetigung-knopf{flex:1 1 100%;width:100%}
}
.konf__fuss{margin-top:1rem;font-size:.8125rem;color:var(--text-dunkel-leise);line-height:1.5}
.konf__stil-hinweis{font-weight:500;color:var(--text-dunkel)}

/* Fixierte Leiste unten — erscheint, sobald der Konfigurator im Blick war */
.leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(var(--grund-rgb),.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--grund-linie);
  transform:translateY(105%);transition:transform var(--t-ruhig) var(--kurve);
  padding-bottom:env(safe-area-inset-bottom);
}
.leiste[data-an="ja"]{transform:translateY(0)}
.leiste__inhalt{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem var(--rand);max-width:var(--max);margin-inline:auto;
}
.leiste__text{font-size:.8125rem;color:var(--text-leise);line-height:1.35}
.leiste__text b{display:block;color:var(--text);font-family:var(--display);font-size:1.25rem;font-weight:400}
.leiste .knopf{padding-inline:1.1rem;white-space:nowrap}

/* ============================================================
   Ablauf — vier Schritte, Freigabe sichtbar (§ 312g BGB)
   ============================================================ */
.ablauf__gitter{display:grid;gap:1px;background:var(--grund-linie);border:1px solid var(--grund-linie);margin-top:3rem}
@media(min-width:640px){.ablauf__gitter{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.ablauf__gitter{grid-template-columns:repeat(4,1fr)}}
.schritt{background:var(--grund);padding:2rem 1.5rem;position:relative}
.schritt__nr{
  font-family:var(--display);font-size:.8125rem;color:var(--zier);
  letter-spacing:.2em;margin-bottom:1.25rem;display:block;
}
.schritt h3{font-family:var(--sans);font-size:1.0625rem;font-weight:500}
.schritt p{font-size:.875rem;color:var(--text-leise);margin-top:.55rem}
.schritt__zeit{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--zier);
  border:1px solid rgba(154,143,122,.4);padding:.3rem .55rem;border-radius:var(--radius);
}
.schritt--freigabe{background:var(--grund-weich)}
.schritt--freigabe::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--zier);
}

/* ============================================================
   Memoria — der einzige Ort für Lilac
   ============================================================ */
.memoria{position:relative;overflow:hidden;background:#151221}
.memoria__inhalt{position:relative;z-index:1;max-width:44rem;margin-inline:auto;text-align:center}
.memoria .augbraue{color:var(--memoria);justify-content:center}
.memoria .augbraue::before{background:var(--memoria)}
.memoria h2{font-size:clamp(2rem,calc(5vw / var(--zf,1)),3.2rem)}
.memoria h2 em{font-style:italic;color:var(--memoria)}
.memoria p{color:var(--text-leise);margin-top:1.5rem;font-size:1.0625rem}
.memoria .knopf{margin-top:2.25rem}

/* ============================================================
   FILTERKNÖPFE — nur noch auf der Stil-Galerie
   ============================================================ */
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.filter button{
  min-height:44px;padding:.55rem 1.05rem;background:transparent;
  border:1px solid var(--bedien-dunkel);border-radius:99px;
  font-size:.8125rem;color:var(--text-leise);cursor:pointer;
  transition:border-color var(--t-schnell) var(--kurve),color var(--t-schnell) var(--kurve),background var(--t-schnell) var(--kurve);
}
.filter button:hover{color:var(--text);border-color:var(--text-leise)}
/* .filter stand bisher nur auf dunklem Grund (Themenwelt-Seiten) -- jetzt
   auch im Konfigurator, der auf hellem Grund läuft (.hell). Ohne diese
   Regel wäre der Text mit --text-leise auf --buehne nur 1,8:1 Kontrast,
   weit unter AA (Auftrag "Konfigurator: Themenwelt, Stil, Vorschau",
   24.08.2026). */
.hell .filter button,.hell-weich .filter button{color:var(--text-dunkel-leise)}
.hell .filter button:hover,.hell-weich .filter button:hover{color:var(--text-dunkel);border-color:var(--text-dunkel-leise)}
.filter button[aria-pressed="true"]{
  color:var(--grund);border:0;font-weight:500;
  background-image:
    radial-gradient(120% 180% at 22% -30%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%),
    linear-gradient(176deg,#FBEFD2 0%,#EDD39C 32%,#CFA660 62%,#E2BE80 88%,#F5E4BA 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), inset 0 1px 0 rgba(255,255,255,.75);
}
/* Stil-Buttons im Konfigurator: deutlich kleiner als die Themenwelt-Buttons
   daneben, mit derselben Höhenbegrenzung + Scroll-Lösung wie im Seitenkopf
   der Themenwelt-Seiten (Auftrag "Konfigurator neu anordnen", 24.08.2026). */

/* ============================================================
   AKTIONSHINWEIS — Halloween-Code SPOOKY10 (Auftrag 18.09.2026)
   ------------------------------------------------------------
   Steht direkt unter den beiden Knöpfen im Seitenkopf, in voller Breite der
   Textspalte. Nur vorhandene Tokens: Radius, Abstände und Rahmenfarbe wie bei
   den übrigen Kästen der Seite.

   Gold ist im Design ausschließlich die Aktionsfarbe (siehe Abschnitt
   "Zierfarbe" ganz oben). Deshalb hier KEINE goldene Fläche -- nur der
   gestrichelte Rahmen des Code-Feldes und der Code selbst tragen Gold, der
   Kaufknopf bleibt die einzige leuchtende Fläche. Keine Animation, kein
   Blinken; das Einzige, was sich bewegt, ist der Knopftext nach dem Kopieren.

   Gerechnete Kontraste auf der Fläche des Kastens (--grund-weich, #221F2B),
   nach WCAG 2.1 -- alle deutlich über der Grenze von 4,5:1:
     Überschrift   --text        #F2EEE5   13,96:1   AAA
     Code          --gold        #E7C57E    9,77:1   AAA
     Kleinzeile    --text-leise  #B7B0C0    7,69:1   AAA
   Die Wiederholungszeile steht auf --grund (#1A1721): 15,26:1, AAA.
   ============================================================ */
.aktion{
  margin-top:1.25rem;padding:1.1rem 1.25rem;
  border:1px solid var(--grund-linie);border-radius:var(--radius);
  background:var(--grund-weich);
}
.aktion[hidden]{display:none}
.aktion__titel{
  margin:0;font-weight:700;font-size:1.15rem;line-height:1.35;color:var(--text);
}
.aktion__reihe{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.75rem;
}
.aktion__code{
  flex:0 1 auto;
  padding:.5rem .9rem;
  border:2px dashed var(--gold);border-radius:var(--radius);
  font-weight:700;font-size:1.5rem;line-height:1.2;letter-spacing:.08em;
  color:var(--gold);text-transform:uppercase;
  -webkit-user-select:all;user-select:all;
}
/* Berührungsfläche mindestens 44 x 44 px, auch bei kurzem Text. */
.aktion__knopf{min-height:44px;min-width:44px}
.aktion__hinweis{
  margin:.75rem 0 0;font-size:.9rem;line-height:1.5;color:var(--text-leise);
}
@media(min-width:900px){
  .aktion__code{font-size:1.75rem}
}

/* Die kurze Wiederholung über dem zweiten Knopf, unter dem Kundenfoto-Block. */
.aktion-zeile{
  margin:0 0 1rem;text-align:center;font-size:1rem;line-height:1.5;
  color:var(--text);
}
.aktion-zeile[hidden]{display:none}

/* ============================================================
   KUNDENWAND — ein endlos durchlaufendes Band.
   Ersetzt das frühere Raster mit Filterknöpfen: lebendiger, braucht keine
   Bedienung und zeigt viele Motive auf wenig Fläche. Die Beschriftung
   läuft am Bild mit.
   ============================================================ */
.band{
  position:relative;margin-top:2.5rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
/* Die Höhe steht schon fest, BEVOR das Band befüllt ist (Auftrag
   „Wandfoto-Laufband zufällig", 18.09.2026, Punkt 5). Vorher war die Spur bis
   zum Eintreffen der Kacheln 0 Pixel hoch und der Abschnitt sprang beim
   Aufbau auf. Gerechnet aus der Kachelbreite unten mal dem Seitenverhältnis
   5/7 des Bildes, plus die beiden Rahmenlinien. */
.band__spur{overflow:hidden;padding-block:.4rem;
  min-height:calc(clamp(132px,calc(17vw / var(--zf,1)),208px) * 7 / 5 + 2px)}
.band__reihe{
  display:flex;gap:clamp(.6rem,calc(1.4vw / var(--zf,1)),1.1rem);width:max-content;
  animation:bandlauf 72s linear infinite;
}
@keyframes bandlauf{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* Anhalten, sobald jemand hinsieht oder tippt */
.band:hover .band__reihe,
.band:focus-within .band__reihe{animation-play-state:paused}

.band__bild{
  flex:none;width:clamp(132px,calc(17vw / var(--zf,1)),208px);position:relative;
  border:1px solid var(--grund-linie);border-radius:var(--radius);
  overflow:hidden;background:var(--grund-weich);
}
.band__bild img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block}
.band__bild figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.55rem .65rem;
  font-size:.75rem;color:var(--text-leise);
  background:linear-gradient(180deg,transparent,rgba(var(--grund-rgb),.92));
}
.band__welt{
  display:block;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--zier);margin-bottom:.15rem;
}
/* Ein bis sieben Fotos: das Band steht still und die Kacheln stehen mittig
   (Auftrag 18.09.2026, Teil 3.3). Dieselbe Darstellung wie bei
   prefers-reduced-motion darunter -- nur aus einem anderen Grund. */
.band--ruhig{-webkit-mask-image:none;mask-image:none}
.band--ruhig .band__spur{overflow:visible;min-height:0}
.band--ruhig .band__reihe{
  animation:none;flex-wrap:wrap;width:auto;justify-content:center;
}
/* Wer keine Bewegung will, bekommt ein ruhiges Raster */
@media (prefers-reduced-motion: reduce){
  .band{-webkit-mask-image:none;mask-image:none}
  .band__spur{overflow:visible}
  .band__reihe{
    animation:none;flex-wrap:wrap;width:auto;justify-content:center;
  }
}

/* ============================================================
   BEWERTUNGEN — Sterne in Gold, Abzeichen am Einzeltext.
   Gold bleibt hier als Ausnahme: bei Bewertungen ist es Konvention und
   damit Beleg, nicht Schmuck.
   ============================================================ */
.bew__gitter{display:grid;gap:2.5rem;margin-top:3rem}
@media(min-width:900px){.bew__gitter{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:3.5rem}}
.note__zahl{font-family:var(--display);font-size:clamp(3.4rem,calc(9vw / var(--zf,1)),4.8rem);line-height:1;font-variant-numeric:tabular-nums}
.note__unter{font-size:.875rem;color:var(--text-leise);margin-top:.75rem}

/* Zwei Sternreihen übereinander: unten die Spur, darüber der gefüllte Anteil.
   Die feste Größe ist zwingend — ohne sie skaliert das SVG auf Blockbreite. */
.sterne{position:relative;display:inline-flex;color:var(--bedien-dunkel);line-height:0}
.sterne__voll{position:absolute;left:0;top:0;overflow:hidden;color:var(--gold);display:inline-flex;line-height:0}
.sterne svg{width:19px;height:19px;flex:none}
.sterne--klein svg{width:15px;height:15px}

.verteilung{margin-top:2rem;display:grid;gap:.6rem}
.verteilung__zeile{display:grid;grid-template-columns:2.6rem 1fr 2.8rem;gap:.75rem;align-items:center;font-size:.8125rem;color:var(--text-leise)}
.verteilung__balken{height:6px;background:var(--bedien-dunkel);border-radius:99px;overflow:hidden}
.verteilung__balken i{display:block;height:100%;background:var(--gold)}
.verteilung__wert{text-align:right;font-variant-numeric:tabular-nums}

.rezensionen{display:grid;gap:1px;background:var(--grund-linie);border:1px solid var(--grund-linie)}
@media(min-width:700px){.rezensionen{grid-template-columns:repeat(2,1fr)}}
.rez{background:var(--grund);padding:1.75rem 1.5rem}
/* Auftrag "Bewertungskarten mit Kundenfoto" (Nachtrag 11, 03.09.2026, Teil
   B): .rez__kopf enthält jetzt bei JEDER Karte nur noch zwei Kinder --
   Name+Sterne links, Datum rechts -- unabhängig davon, ob ein Foto
   existiert. .rez__wer (früher: Foto + Name/Sterne gemeinsam, Foto zuerst)
   ist ersatzlos entfallen; genau das ließ den Kopf bei Karten mit Foto
   gegenüber fotolosen Karten nach rechts springen. */
.rez__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem}
/* Bugauftrag "Bewertungskarte mit Kundenfoto läuft über" (Themenwelt-Seiten,
   03.09.2026): stand hier bis eben als "ab 600px nebeneinander" (Foto links,
   Zitat rechts in einer Zeile) -- das brach auf den Themenwelt-Seiten
   zusammen, weil DIESELBE Karte dort in einer viel schmaleren Spalte steht
   als auf index.html: .rezensionen--kompakt liegt in .stimme__inhalt
   (max-width:46rem) und schaltet ab 900px BREITE auf drei Spalten
   (rezensionen--kompakt weiter unten) -- pro Karte bleiben dann nur rund
   230px, viel zu wenig für Foto (~157px) UND Text nebeneinander. Die
   Media Query oben prüfte aber die BILDSCHIRMBREITE, nicht die tatsächliche
   Kartenbreite -- bei jedem Desktop-Viewport blieb .rez__inhalt deshalb in
   der Zeilen-Anordnung, obwohl die Karte selbst längst zu schmal dafür war.
   Das drückte den Zitat-Textblock auf praktisch 0px Breite -- Text lief
   buchstabenweise senkrecht und über den Kartenrand hinaus in die
   Nachbarkarte. Robuster Fix statt eines zweiten, container-abhängigen
   Breakpoints: das Foto steht jetzt IMMER über dem Text (nie daneben) --
   passt dadurch in jede Kartenbreite, ob 230px (Themenwelten, drei Spalten)
   oder 480px (index.html, zwei Spalten), ohne dass die beiden Aufbauten
   auseinanderlaufen können. Ohne Foto enthält .rez__inhalt nur das
   Blockquote, unverändert (Punkt 5: "Karten ohne Foto bleiben
   unverändert"). */
.rez__inhalt{display:flex;flex-direction:column;gap:1.1rem;margin-top:.9rem}
.rez__inhalt blockquote{flex:1;min-width:0}
/* Größe/Seitenverhältnis (24.08.2026 -> Auftrag "Bewertungsfotos groß und
   anklickbar", 02.09.2026; Nachtrag 11, 03.09.2026, bestätigt im
   Bugauftrag vom selben Tag: max. 220px hoch, Breite ergibt sich aus
   aspect-ratio:5/7, linksbündig -- gilt jetzt bei JEDER Bildschirmbreite
   unverändert gleich, siehe .rez__inhalt oben). align-self:flex-start
   verhindert, dass .rez__inhalt (jetzt eine Spalte mit Vollbreiten-Kindern)
   das Foto in die Breite zieht. Anklickbar über .grossansicht-ausloeser --
   wird zur Laufzeit von rezFotosVerdrahten() (layout.js) ergänzt, weil die
   erzeugende Datei bewertungen-daten.js selbst nicht von Hand geändert
   werden darf. */
.rez__foto{width:auto;max-height:220px;aspect-ratio:5/7;border-radius:var(--radius);
  object-fit:cover;flex:none;align-self:flex-start;cursor:pointer}
/* 24.08.2026: Farbe jetzt ausdrücklich gesetzt statt nur geerbt (Auftrag
   "Namen der Bewertenden unlesbar") -- keine fehlerhafte Regel gefunden, die
   .rez__name auf eine dunkle Farbe gezogen hätte (kein .hell-Vorfahre, --text
   ist die einzige :root-Definition), aber die Vorgabe verlangt ausdrücklich
   Farbe UND Gewicht, nicht nur Vererbung. 16,68:1 auf --grund, deutlich
   kräftiger (600) als der Bewertungstext (.rez blockquote, Gewicht 300 geerbt
   von body). Kein Gold -- Gold bleibt Knöpfen und Sternen vorbehalten. */
.rez__name{font-weight:600;font-size:.9375rem;color:var(--text)}
.rez__datum{font-size:.8125rem;color:var(--text-leise);white-space:nowrap}
/* Kein eigener oberer Rand mehr -- der Abstand zum Kopf kommt jetzt von
   .rez__inhalt (margin-top:.9rem), damit Foto und Text bündig auf derselben
   Höhe beginnen (align-items:flex-start dort). */
.rez blockquote{margin:0;font-size:.9375rem;color:var(--text-leise)}
.rez__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .85rem;margin-top:1.25rem}
.siegel{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--zier);
  border:1px solid rgba(154,143,122,.4);padding:.35rem .65rem;border-radius:99px}
.siegel svg{width:13px;height:13px;flex:none}
.rez__produkt{font-size:.8125rem;color:var(--text-leise)}
.bew__mehr{margin-top:2rem;text-align:center}
.bew__hinweis{margin-top:.85rem;text-align:center;font-size:.8125rem;color:var(--text-leise)}

/* ============================================================
   SEO-Fuß
   ============================================================ */
.fuss{padding-top:var(--luft);padding-bottom:5.5rem}
.fuss__gitter{display:grid;gap:2.25rem}
@media(min-width:900px){.fuss__gitter{grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:3rem}}
.fuss__spalten{display:grid;gap:1.5rem}
@media(min-width:640px){.fuss__spalten{grid-template-columns:repeat(3,1fr);gap:1.75rem 2.5rem}}
.fuss h4{
  font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--zier);margin-bottom:.5rem;
}
/* Untereinander, aber kompakt. Horizontales Fließen sah unruhig aus, sobald
   die Einträge unterschiedlich lang sind — dann rutscht der nächste Link in
   die Lücke daneben und die Spalte franst aus. */
.fuss ul{display:grid;gap:0}
.fuss li a{
  display:flex;align-items:center;min-height:32px;
  font-size:.8125rem;color:var(--text-leise);
  transition:color var(--t-schnell) var(--kurve);
}
.fuss li a:hover{color:var(--text)}
/* 24.08.2026: Logo im Fuß bisher nur über die geteilte .marke-Regel (36px,
   dann 48px für die Kopfzeile) -- im Fuß gibt es die 76px-Kopfzeilen-Höhe
   nicht, die das dort gedeckelt hat, deshalb hier eigens größer. Auf
   schmalen Schirmen stand es zusätzlich am linken Rand -- .fuss__marke ist
   erst ab 900px die linke Spalte eines Zweispalters (siehe .fuss__gitter),
   davor volle Breite, deshalb dort mittig gesetzt. */
.fuss__marke{display:flex;flex-direction:column;align-items:center}
.fuss__marke .marke img{height:96px} /* Korrekturauftrag 25.08.2026, Punkt 9: deutlich
  größer als zuvor (64px), in der Fußzeile gibt es keine feste Leistenhöhe, die das
  begrenzt. Weiterhin innerhalb der 400×200px-Quellauflösung, keine Unschärfe durch
  Hochskalieren. Per Bildschirmprobe bestätigt: bei 96px ist "NEVER ORDINARY" jetzt
  tatsächlich lesbar (anders als in der Kopfzeile bei 60px, dort bleibt es zu klein) --
  siehe Bericht. */
@media(min-width:900px){.fuss__marke{align-items:flex-start}}
.fuss__marke p{font-size:.8125rem;color:var(--text-leise);margin-top:.85rem;max-width:34ch}
.seo-linien{
  margin-top:1.75rem;padding-top:1.1rem;border-top:1px solid var(--grund-linie);
  display:flex;flex-wrap:wrap;gap:.2rem .3rem;
}
/* Bewusst klein und ruhig: diese Zeilen sind für Suchmaschinen, nicht für
   die Gestaltung. Sie sollen viele Begriffe fassen, ohne den Fuß zu erschlagen. */
.seo-linien a{
  font-size:.625rem;color:var(--text-leise);padding:.2rem .42rem;
  border:1px solid var(--grund-linie);border-radius:99px;min-height:24px;
  display:inline-flex;align-items:center;line-height:1.15;
  transition:border-color var(--t-schnell) var(--kurve),color var(--t-schnell) var(--kurve);
}
.seo-linien a:hover{color:var(--text);border-color:var(--text-leise)}
.fuss__unten{
  margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--grund-linie);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;
  font-size:.8125rem;color:var(--text-leise);
}
.fuss__recht{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.fuss__recht a{min-height:44px;display:inline-flex;align-items:center}
.fuss__recht a:hover{color:var(--text)}
/* Korrekturauftrag 25.08.2026, Teil I2: eigener, mittig zentrierter Absatz
   ganz unten in der Fußzeile -- bewusst schmaler als die Fußzeile selbst,
   damit der Fließtext lesbar bleibt. */
.fuss__hinweis{
  margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--grund-linie);
  text-align:center;max-width:56ch;margin-inline:auto;
}
.fuss__hinweis h2{font-size:1rem;margin:0 0 .5rem;color:var(--text)}
.fuss__hinweis p{font-size:.8125rem;color:var(--text-leise);margin:0 0 .75rem}
.fuss__hinweis a{
  font-size:.8125rem;color:var(--text);border-bottom:1px solid var(--zier);
  min-height:44px;display:inline-flex;align-items:center;
}
.fuss__hinweis a:hover{border-color:var(--gold);color:var(--gold)}
.fuss__cookie-knopf{
  min-height:44px;display:inline-flex;align-items:center;
  background:none;border:none;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;
}
.fuss__cookie-knopf:hover{color:var(--text)}

/* Zahlarten-Reihe: dezent und ausgegraut, reine Anzeige, kein greller
   Farbklecks. Volle Markenfarbe erst beim Hover/Fokus. */
.fuss__zahlarten{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;
  margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--grund-linie);
  min-height:44px;
}
.fuss__zahlart{
  height:20px;width:auto;max-width:52px;object-fit:contain;
  filter:grayscale(1) opacity(.55) brightness(1.6);
  transition:filter var(--t-schnell) var(--kurve);
}
.fuss__zahlarten:hover .fuss__zahlart,
.fuss__zahlarten:focus-visible .fuss__zahlart{filter:none;opacity:1}
.fuss__zahlart-gruppe{display:inline-flex;align-items:center;gap:.35rem}
/* Die Apple-Pay-Marke ist offiziell nur in Weiß verfügbar — braucht auf
   hellem Grund einen dunklen Chip als Untergrund, sonst unsichtbar. Eine
   Klasse für beide Stellen (Fußzeile + zahlarten.html), statt zweimal
   dieselbe Regel zu pflegen. */
.zahlart-dunkel-chip{
  background:#000;border-radius:4px;padding:3px 6px;
  box-sizing:content-box;height:14px;
}
.fuss__zahlarten .zahlart-dunkel-chip{height:14px}


/* ============================================================
   UNTERSEITEN — gemeinsame Bausteine
   ============================================================ */
.seitenkopf{position:relative;overflow:hidden;padding-block:clamp(2rem,calc(4vw / var(--zf,1)),3.25rem) clamp(2.5rem,calc(5vw / var(--zf,1)),4rem)}
/* align-items:start statt center (Korrektur 24.08.2026, "Themenwelt-Seiten
   neu anordnen"): bei center wurde die rechte Spalte in der Höhe der oft
   deutlich längeren linken Textspalte zentriert -- das Vorschaubild begann
   dadurch weit unterhalb der Falz, obwohl es selbst gar nicht so hoch war. */
.seitenkopf__gitter{position:relative;z-index:1;display:grid;gap:2rem;align-items:start}
@media(min-width:900px){.seitenkopf__gitter{grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:3.5rem}}
/* Zeile 2 (Stil-Knöpfe, volle Breite, alle gleichzeitig sichtbar) und
   Zeile 3 (Beschreibung des aktiven Stils, volle Breite) -- eigene Zeilen
   UNTER dem Zweispalten-Kopf, kein Teil des Grids selbst (Korrekturauftrag
   25.08.2026, "Themenwelt-Kopfbereich neu aufbauen"). */
.seitenkopf__stile{position:relative;z-index:1;margin-top:1.75rem}
/* Korrekturauftrag 25.08.2026, Punkt 3: Stil-Knöpfe zeilenweise zentriert
   statt linksbündig -- flex-wrap bricht ohnehin schon um, justify-content
   zentriert dann jede entstehende Zeile für sich, auch eine angebrochene
   letzte Zeile. */
/* ENTSCHEIDUNG SASKIA (12.09.2026): Stil-Knöpfe stehen jetzt in der linken
   Spalte (siehe seiten_bauen.py), linksbündig statt zentriert -- ersetzt die
   Zentrierung aus Korrekturauftrag 25.08.2026, Punkt 3 (galt für die
   rechtsspaltige Platzierung von damals). */
.seitenkopf__stile .filter{margin:0;justify-content:flex-start}
/* ENTSCHEIDUNG SASKIA (Nachtrag "Stilbeschreibung und Beispielbilder
   mittig", Hero-Bereich, 03.09.2026): .seitenkopf__stile stand bisher
   AUSSERHALB von .seitenkopf__unterzeile und damit über die VOLLE
   Huelle-Breite (das war laut Korrekturauftrag 25.08.2026, Teil A2,
   ausdrücklich so gewollt). justify-content:center zentrierte die
   Stil-Knöpfe dadurch auf die Mitte der ganzen Seite, nicht auf die Mitte
   des Hauptbilds darüber (das nur die RECHTE Spalte einer Zweispalten-Zeile
   einnimmt, seitenkopf__gitter) -- sichtbar als Zeile links neben der
   Bildachse. Saskia hat entschieden: die Stil-Knöpfe sollen stattdessen
   exakt dieselbe rechte Spalte treffen wie Bild, Beschreibung und weitere
   Beispielbilder. Dasselbe Spaltenraster wie .seitenkopf__unterzeile
   (gleiche Werte, keine neue Zahl erfunden), beide Kinder (STIL-Überschrift
   und Knopfreihe) in die rechte Spalte gelegt. Unter 900px bleibt es beim
   bestehenden vollen Blockfluss (schon vorher zentriert). */
@media(min-width:900px){
  .seitenkopf__stile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:3.5rem}
  .seitenkopf__stile > *{grid-column:2}
}
/* ENTSCHEIDUNG SASKIA (12.09.2026): überschreibt absichtlich NUR das Ergebnis
   der ENTSCHEIDUNG SASKIA (03.09.2026) unmittelbar darüber -- deren Text
   bleibt unverändert stehen, ihr Zweck (Stil-Knöpfe an die rechte Bildspalte
   binden) gilt für den neuen Aufbau aber nicht mehr: die Stil-Knöpfe stehen
   jetzt in der LINKEN Spalte (siehe seiten_bauen.py, seitenkopf()), direkt
   unter einer goldenen Trennlinie und der Überschrift "Stile", in voller
   Spaltenbreite, linksbündig, umbrechend -- Befund war Saskias Screenshot
   der Familie-Seite: die schmale rechtsspaltige Knopfzeile brach in sechs
   Zeilen um, während die linke Spalte darunter zu zwei Dritteln leer blieb. */
@media(min-width:900px){
  .seitenkopf__stile{display:block}
}
.seitenkopf__trenner{border:0;height:1px;background:var(--gold);opacity:.4;margin:1.5rem 0 0}
.seitenkopf__stile-titel{font-weight:700;font-size:clamp(1.1rem,calc(2.2vw / var(--zf,1)),1.375rem);margin:1.25rem 0 0}
/* ENTSCHEIDUNG SASKIA (12.09.2026), ersetzt den Wortlaut der ENTSCHEIDUNG
   SASKIA (11.09.2026), die an dieser Stelle stand: Beschreibungskasten UND
   Beispielreihe waren bisher über .seitenkopf__unterzeile künstlich an die
   480px-Bildspalte gebunden (bzw. per :has()-Ausnahme davon befreit) -- eine
   Beschreibung, die per grid-column:2 nur so TAT, als stünde sie in der
   rechten Spalte, obwohl sie technisch außerhalb lag. Das war die Ursache
   wiederholter Fehlausrichtungen. Neuer, einfacherer Aufbau: Hauptbild UND
   Beschreibungskasten sind jetzt ECHTE Kinder derselben
   .seitenkopf__bildspalte (siehe seiten_bauen.py) und damit automatisch in
   der rechten Spalte, ganz ohne Grid-Nachbau. "Beispiele aus diesem Stil"
   steht darunter in voller Inhaltsbreite, mittig, nie an die Bildspalte
   gebunden, nie untereinander -- .seitenkopf__unterzeile wird dafür nicht
   mehr gebraucht und entfällt ersatzlos. Nicht ändern. */
.seitenkopf__bildspalte{min-width:0}
/* Auftrag "Stil-Beschreibungskasten unter das Foto verlegen", 31.08.2026:
   margin-top von .75rem auf 1.75rem angehoben -- der Kasten steht jetzt
   direkt nach dem Foto (vorher: nach den Chips) und übernimmt denselben
   Abstand, den an dieser Stelle bisher .seitenkopf__stile hatte, statt
   enger zu wirken als der Rest der Zeilen im Seitenkopf. */
.seitenkopf__beschreibung{position:relative;z-index:1;margin-top:1.75rem;max-width:none}
.seitenkopf__beschreibung .stil-beschreibung{margin:0}
.seitenkopf h1{font-size:clamp(1.9rem,calc(4vw / var(--zf,1)),3rem)}
.seitenkopf h1 em{font-style:italic;color:var(--zier)}
.seitenkopf__text{color:var(--text-leise);margin-top:1.1rem;max-width:52ch}
.seitenkopf__knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.seitenkopf__bild{border:1px solid var(--grund-linie);border-radius:var(--radius);overflow:hidden;background:var(--grund-weich)}
.seitenkopf__bild img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block}

/* Auftrag "Kaufbremsen Teil 2 -- Texte und Seiten", 06.09.2026, Punkt 7:
   auf schmalen Handys (< 600px) lagen weder das Hauptbild noch der Knopf
   "Weiter zum Konfigurator" im ersten Bildschirm ohne Scrollen. Ursache war
   nicht EIN einzelnes Element, sondern die Summe: große Überschrift (bis
   3rem), großzügige margin-top-Werte vor jedem Block und ein ungebremst
   hohes 5:7-Bild (bei rund 340px Inhaltsbreite ca. 480px hoch) addierten
   sich zu deutlich mehr als die sichtbare Höhe eines kompakten Telefons.
   Die Bildhöhe wird dabei bewusst NICHT direkt begrenzt (siehe
   NOTFALLKORREKTUR-Kommentar bei .wandel weiter oben in dieser Datei -- das
   brach zuvor schon einmal die Breitenberechnung), sondern nur die BREITE
   auf schmalen Bildschirmen verkleinert; die Höhe ergibt sich weiterhin
   allein aus aspect-ratio:5/7, wie überall sonst im Projekt. */
@media(max-width:599px){
  .seitenkopf{padding-block:1rem 1.75rem}
  .seitenkopf__gitter{gap:1rem}
  .seitenkopf h1{font-size:1.5rem}
  /* Auftrag "Themenwelt-Seiten am Handy", 16.09.2026, Punkt 2c: hier standen
     bis dahin drei Zeilen, die diesen Absatz auf dem Handy nach zwei Zeilen
     abgeschnitten haben (display:-webkit-box; -webkit-line-clamp:2;
     -webkit-box-orient:vertical; overflow:hidden). Sichtbar wurde das auf
     themenwelt-gedenken.html: "... ein Bild, das man aufhängen kann — sti…".
     Die Kürzung stammt aus dem Auftrag "Kaufbremsen Teil 2 -- Texte und
     Seiten", 06.09.2026, Punkt 7 (siehe Kommentar über diesem Block): sie
     sollte Platz sparen, damit Hauptbild und Kaufknopf ohne Scrollen im
     ersten Bildschirm liegen. Sie ist jetzt ersatzlos entfernt -- der Absatz
     ist auf allen zehn Themenwelt-Seiten wieder vollständig lesbar. Der
     ursprüngliche Zweck wird dadurch nicht verfehlt: seit Punkt 2a steht das
     Hauptmedium am Handy ohnehin direkt unter den Knöpfen und damit weiter
     oben als zuvor. Kleinere Schrift und engerer Abstand bleiben. */
  .seitenkopf__text{margin-top:.6rem;font-size:.875rem}
  .seitenkopf__knoepfe{margin-top:.9rem;gap:.5rem}
  .seitenkopf__knoepfe .knopf{min-width:0;min-height:42px;padding-block:.65rem}
  .preisanker{margin-top:.6rem}
  [data-baustein="unikat"]{margin-top:.5rem}
  /* .wandel selbst hat unterhalb von 640px bisher KEINE max-width-Regel
     (die einzige bestehende greift erst ab 640px) -- deshalb hier eigens
     für den Bereich unter 600px, nicht nur eine engere Fassung der
     bestehenden Regel.

     Auftrag "Themenwelt-Seiten am Handy", 16.09.2026, Punkt 2b: der Wert
     stand hier bis dahin auf min(calc(52vw / var(--zf,1)),220px) -- auf einem 375px breiten
     Telefon also 195px, während die Beispielbilder darunter ("Beispiele aus
     diesem Stil") 240px breit sind. Genau das war der sichtbare Unterschied.
     Jetzt dieselben 240px, mittig, gleicher linker und rechter Rand.
     Die 240px stehen als Quelle in .wandel-weitere__stueck{flex:0 0 240px}
     weiter unten in dieser Datei; jene Regel liegt in einem
     "ENTSCHEIDUNG SASKIA"-Block und wurde deshalb NICHT angefasst -- die
     Zahl ist hier bewusst noch einmal ausgeschrieben. Wird sie dort je
     geändert, muss sie hier mitgezogen werden.
     min(...,100%) nur als Sicherung: auf einem sehr schmalen Gerät läuft das
     Bild dadurch nie über den Rand hinaus. */
  .wandel,[data-baustein="wandel"]:empty{max-width:min(240px,100%);margin-inline:auto}
}

.brotkrumen{font-size:.75rem;color:var(--text-leise);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding-block:.9rem}
.brotkrumen a{min-height:44px;display:inline-flex;align-items:center}
.brotkrumen a:hover{color:var(--gold)}
.brotkrumen span{opacity:.5}

/* Vertrauensleiste: drei knappe Belege unter dem Seitenkopf */
.beweis{border-bottom:1px solid var(--grund-linie)}
.beweis__gitter{display:grid;gap:0}
@media(min-width:768px){.beweis__gitter{grid-template-columns:repeat(3,1fr)}}
.beweis__punkt{display:flex;align-items:center;gap:.75rem;padding:1.1rem 0;font-size:.875rem}
@media(min-width:768px){
  .beweis__punkt{padding:1.25rem 1.5rem;border-left:1px solid var(--grund-linie)}
  .beweis__punkt:first-child{padding-left:0;border-left:0}
}
@media(max-width:767px){.beweis__punkt + .beweis__punkt{border-top:1px solid var(--grund-linie)}}
.beweis__punkt svg{width:17px;height:17px;color:var(--zier);flex:none}

/* Produkt- und Preistafel */
.tafeln{display:grid;gap:1px;background:var(--grund-linie);border:1px solid var(--grund-linie);margin-top:2.25rem}
@media(min-width:768px){.tafeln{grid-template-columns:repeat(3,1fr)}}
/* 24.08.2026: von den hellen Cremetönen (#FBF8F2/#FFFDF9) auf den dunklen
   Grundton umgestellt (Auftrag "Helle Kästen entfernen") -- vorher stach
   diese Preistafel als heller Block aus der sonst durchgehend dunklen Seite
   heraus. */
.tafel{background:var(--grund-weich);padding:1.75rem 1.5rem;display:flex;flex-direction:column}
.tafel--gehoben{background:var(--grund-weich);position:relative;border:1px solid var(--gold-tief)}
.tafel--gehoben::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#F5E4BA,#CFA660,#F5E4BA)}
.tafel h3{font-size:1.4rem}
.tafel__preis{font-family:var(--display);font-size:2.1rem;margin-top:.75rem;font-variant-numeric:tabular-nums}
.tafel__ab{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-leise)}
.tafel ul{margin-top:1.25rem;display:grid;gap:.55rem;font-size:.875rem;color:var(--text-leise)}
.tafel li{display:flex;gap:.55rem;align-items:flex-start}
.tafel li svg{width:15px;height:15px;color:var(--zier);flex:none;margin-top:.2rem}
.tafel .knopf{margin-top:auto;padding-top:.85rem}
.tafel__knopf{margin-top:1.5rem}

/* FAQ */
/* Auftrag 8 (29.09.2026): Hinter den runden Frage-Kacheln stand eine
   dunkle eckige Flaeche -- Hintergrund und Rahmen in --grund-linie, die
   durch die 1px-Luecken und an den Ecken durchschienen. Jetzt ohne
   Flaeche und ohne Rahmen, die Kacheln stehen frei mit 8 px Abstand. */
.faq{display:grid;gap:8px;background:transparent;border:0;margin-top:2.25rem}
.faq details{background:var(--grund)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 1.4rem;min-height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.9375rem;font-weight:500;
  transition:color var(--t-schnell) var(--kurve);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--text)}
.faq summary::after{
  content:"";width:9px;height:9px;flex:none;border-right:1px solid var(--zier);
  border-bottom:1px solid var(--zier);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-normal) var(--kurve);
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq details p{padding:0 1.4rem 1.35rem;font-size:.9375rem;color:var(--text-leise);max-width:74ch}

/* Textseiten: Recht, Versand, Kontakt */
.textseite{max-width:74ch}
.textseite h2{font-size:clamp(1.35rem,calc(2.4vw / var(--zf,1)),1.75rem);margin-top:2.5rem}
.textseite h2:first-child{margin-top:0}
.textseite h3{font-family:var(--sans);font-size:1rem;font-weight:500;margin-top:1.75rem}
.textseite p,.textseite li{font-size:.9375rem;color:var(--text-leise);margin-top:.85rem}
.textseite ul{margin-top:.5rem;display:grid;gap:.4rem;padding-left:1.1rem;list-style:disc}
.textseite li{margin-top:0}
.textseite dl{margin:1rem 0 0;display:grid;gap:.6rem}
@media(min-width:600px){.textseite dl{grid-template-columns:auto 1fr;gap:.6rem 1.5rem}}
.textseite dt{font-size:.9375rem;font-weight:500}
.textseite dd{margin:0;font-size:.9375rem;color:var(--text-leise)}

/* Markierte Lücke in Rechtstexten — muss vor dem Livegang gefüllt werden */
.luecke{
  display:inline-block;padding:.1rem .5rem;border-radius:var(--radius);
  border:1px dashed var(--bedien-dunkel);color:var(--text);
  font-size:.9em;font-style:normal;background:rgba(106,98,128,.14);
}
.luecke-block{
  display:block;margin-top:1rem;padding:1rem 1.15rem;
  border:1px dashed var(--bedien-dunkel);border-radius:var(--radius);
  font-size:.875rem;color:var(--text-leise);
}
.luecke-block b{color:var(--text);font-weight:500}

/* Versandkosten-Seite: Zonentabelle, Größenstufen-Aufklapper, Länderliste */
.vk-de-frei{font-size:1.0625rem;padding:.85rem 1.1rem;border-radius:var(--radius);background:var(--buehne-weich);margin-top:1rem}
.vk-tabelle-scroll{overflow-x:auto;margin-top:1rem}
.vk-tabelle{width:100%;border-collapse:collapse;font-size:.875rem;min-width:42rem}
.vk-tabelle th,.vk-tabelle td{text-align:left;padding:.65rem .85rem;border-bottom:1px solid var(--buehne-linie);vertical-align:top}
.vk-tabelle thead th{font-weight:500;color:var(--text-leise)}
.vk-preis{display:block;font-weight:500}
.vk-tabelle small{display:block;color:var(--text-leise);font-size:.75rem;margin-top:.15rem}
.vk-aufklapper{margin-top:1rem;border:1px solid var(--buehne-linie);border-radius:var(--radius);padding:.85rem 1.1rem}
.vk-aufklapper summary{cursor:pointer;font-weight:500}
.vk-stufen-produkt{margin-top:1rem}
.vk-stufen-produkt h3{font-size:.9375rem;font-weight:500}
.vk-stufen-produkt ul{margin-top:.4rem;display:grid;gap:.25rem;padding-left:1.1rem;list-style:disc;font-size:.875rem;color:var(--text-leise)}
#vk-beschraenkung-liste ul{margin-top:.5rem;display:grid;gap:.4rem;padding-left:1.1rem;list-style:disc;font-size:.9375rem;color:var(--text-leise)}
.vk-zoll-liste{margin-top:.5rem;display:grid;gap:.5rem;padding-left:1.1rem;list-style:disc}

/* KI-Kennzeichnung (§ 18 MStV / KI-VO-Transparenzpflicht, seit 02.08.2026).
   Bewusst unauffällig, aber nicht versteckt: kleiner als jeder Fließtext,
   gedämpfte statt normale Textfarbe, kein Rahmen, kein Symbol.
   Auftrag "Zahlung startet nicht — Cent-Abweichung im letzten
   Bestellschritt; KI-Hinweis kleiner", 03.09.2026 (Nachtrag 4), Teil B: die
   KI-Kennzeichnung stand bisher als große, freistehende Textzeile im
   Lesefluss (.8125rem, praktisch normale Fließtextgröße) -- deutlich
   kleiner und dezenter gemacht.
   Auftrag "alles-vor-deploy", 07.09.2026, Teil G (Entscheidung Saskia):
   EINE gemeinsame Regel für alle (damals noch mehreren) Vorkommen, Farbe
   auf --text-gedaempft (4,95:1 auf --grund, siehe Kommentar bei der
   Token-Definition oben -- eigens für genau diesen gesetzlich
   vorgeschriebenen Hinweis als dunkelster noch AA-konformer Wert angelegt).
   Auftrag "KI-Hinweis in den Fußbereich", 07.09.2026 abends (Entscheidung
   Saskia, ersetzt "direkt unter dem Bild"): steht jetzt nur noch EIN Mal je
   Seite, als letzte Zeile im Fußbereich (fussHTML(), layout.js) -- nicht
   mehr an einzelnen Bildern/Bildbereichen. Die Regel selbst (Größe, Farbe,
   Ausrichtung) bleibt unverändert, nur die Verwendungsstelle hat sich
   geändert. Der Fußbereich (.fuss) hat kein eigenes Hintergrundfarb-Merkmal
   und liegt auf jeder Seite auf dem normalen --grund -- die frühere
   .hell/.hell-weich-Sonderfarbe ist damit gegenstandslos und entfällt
   (sie galt nur für Bildbereiche auf hellem Grund, die es hier nicht mehr
   gibt). */
.ki-hinweis{font-size:.7rem;color:var(--text-gedaempft);margin-top:.35rem;line-height:1.4;text-align:right}

/* Hinweistext unter den zehn Stilbildern von "Eigenes Foto" (Auftrag
   ""Eigenes Foto": Schieberegler entfernen, eigenes Kopfbild, zehn
   anklickbare Stilbilder", 02.09.2026, Schritt 5b) -- dieselbe Auszeichnung
   wie .ki-hinweis oben (kleiner/gedämpfter als Überschriften, gut lesbar,
   kein Rahmen, kein Symbol), aber unter eigenem Klassennamen: dieser
   Hinweis hat mit der KI-Kennzeichnungspflicht nichts zu tun, sollte also
   nicht deren Klasse tragen. */
.stil-hinweis{font-size:.8125rem;color:var(--text-gedaempft);margin-top:.6rem;line-height:1.4}
.hell .stil-hinweis,.hell-weich .stil-hinweis{color:var(--text-dunkel-leise)}

/* Internes Werkzeug intern-umsatz-norwegen.html -- eigenständige Seite ohne
   Kopf-/Fußzeile, lädt aber styles.css für Knöpfe/Farbtokens mit. */
.iu-koerper{background:var(--buehne);color:var(--text-dunkel);min-height:calc(100vh / var(--zf,1))}
.iu-huelle{max-width:36rem;margin:0 auto;padding:3rem 1.5rem}
.iu-karte{border:1px solid var(--buehne-linie);border-radius:var(--radius);padding:1.5rem;margin-top:1.5rem}
.iu-zeile{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;font-size:.9375rem}
.iu-balken{height:10px;border-radius:999px;background:var(--buehne-weich);overflow:hidden;margin:1rem 0}
.iu-balken__fuellung{height:100%;background:var(--gold-dunkel);transition:width .3s ease}
.iu-warnung{background:#FDECEC;color:#7A1F1F;border-radius:var(--radius);padding:.85rem 1rem;margin-top:1rem;font-size:.9375rem}
.iu-feld{display:flex;gap:.5rem;margin-top:1rem}
.iu-feld input{flex:1;padding:.6rem .75rem;border:1px solid var(--bedien-hell);border-radius:var(--radius)}

/* Formular */
.formular{display:grid;gap:1.1rem;max-width:34rem;margin-top:2rem}
.feld{display:grid;gap:.4rem}
.feld label{font-size:.8125rem;font-weight:500}
.feld input,.feld textarea,.feld select{
  background:var(--grund-weich);border:1px solid var(--bedien-dunkel);
  border-radius:var(--radius);padding:.8rem .95rem;min-height:48px;
  color:var(--text);font-size:.9375rem;width:100%;
}
.feld textarea{min-height:140px;resize:vertical}
.feld__hilfe{font-size:.75rem;color:var(--text-leise)}

/* Auftrag "Kaufbremsen Teil 2 -- Texte und Seiten", 06.09.2026, Punkt 9:
   die Bestätigung nach dem Absenden lief bisher über .feld__hilfe --
   0,75rem, blasse Hilfetextfarbe, dieselbe Gestaltung wie ein beiläufiger
   Feldhinweis. Live-Befund: wird leicht übersehen. Jetzt eigener Kasten,
   normale Fließtextgröße (1rem), deutlich sichtbar abgesetzt. Gilt auch
   für die kurze "wird gesendet …"-Zwischenmeldung (derselbe Absatz,
   #k-status) -- ein einheitlicher, sichtbarer Status während des ganzen
   Sendevorgangs statt eines Wechsels der Gestaltung mittendrin. */
.formular-status{
  font-size:1rem;color:var(--text);
  background:var(--buehne-weich);border:1px solid var(--grund-linie);
  border-radius:var(--radius);padding:1rem 1.15rem;
}

/* Abschließendes Verkaufsband */
.abschluss{position:relative;overflow:hidden;text-align:center}
.abschluss__inhalt{position:relative;z-index:1;max-width:44rem;margin-inline:auto}
.abschluss h2{font-size:clamp(1.8rem,calc(4vw / var(--zf,1)),2.8rem)}
.abschluss h2 em{font-style:italic;color:var(--zier)}
.abschluss p{color:var(--text-leise);margin-top:1rem}
.abschluss__knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.75rem}
.abschluss__mini{margin-top:1.25rem;font-size:.8125rem;color:var(--text-leise)}

/* Galerie-Raster -- seit 24.08.2026 auf dunklem Grund (Auftrag "Helle Kästen
   entfernen"), vorher auf heller Bühne (#FBF8F2). Auftrag "alles-vor-deploy",
   07.09.2026, Teil F: 8px Fuge statt 1px-Haarlinie zwischen den Kacheln;
   Grid-Hintergrund auf --grund (Seitenhintergrund) statt --grund-linie
   umgestellt, damit unvollständige letzte Zeilen den normalen dunklen
   Hintergrund zeigen statt eines helleren Grau-Violetts. */
.werke{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;background:var(--grund);
  border:1px solid var(--grund-linie);margin-top:2rem}
@media(min-width:700px){.werke{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.werke{grid-template-columns:repeat(4,1fr)}}
.werk{background:var(--grund-weich);position:relative;overflow:hidden;display:block}
.werk__waehlen{display:block;color:inherit;text-decoration:none}
.werk img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block;
  transition:transform var(--t-ruhig) var(--kurve)}
.werk:hover img{transform:scale(1.03)}
.werk__name{display:block;padding:.7rem .85rem;font-size:.8125rem;color:var(--text-leise)}
/* Nur auf der Themenwelt "Eigenes Foto": .werk__waehlen ist dort ein
   <button> statt eines <a> (tauscht das Hauptbild aus, statt zur
   Konfigurator-Seite zu verlinken, siehe eigenesBuehneVerdrahten() in
   layout.js) -- dieser Modifikator setzt nur die Button-typischen
   Standardformate zurück (Rand/Hintergrund/Schrift/Breite), .werk__waehlen
   selbst bleibt für die Galerie-Kacheln (dort weiterhin ein <a>)
   unangetastet. Der markierte Zustand bekommt denselben Goldrahmen wie
   .stil-einzel-klein__knopf[aria-pressed="true"]. */
.werk__waehlen--klick{border:0;background:none;padding:0;margin:0;width:100%;
  font:inherit;text-align:inherit;cursor:pointer}
.werk__waehlen--klick[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--gold-tief)}
/* Vergrößern-Knopf am unteren Rand der Kachel -- dasselbe Symbol/derselbe
   Stil wie .wandel__gross auf der Wandel-Bühne (Korrekturauftrag 25.08.2026,
   Teil B1). Eigenes Geschwisterelement von .werk__waehlen, kein
   verschachtelter <button> im <a> -- siehe Kommentar in stile.js. */
.werk__gross{
  position:absolute;right:.6rem;bottom:.6rem;z-index:2;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(var(--grund-rgb),.62);
  backdrop-filter:blur(6px);color:var(--text);display:grid;place-items:center;
  transition:background var(--t-schnell) var(--kurve),border-color var(--t-schnell) var(--kurve);
}
.werk__gross:hover{background:rgba(var(--grund-rgb),.85);border-color:rgba(255,255,255,.5)}
.werk__gross svg{width:13px;height:13px}
/* Zwischenüberschrift je Themenwelt in der "Alle"-Ansicht -- volle Breite
   des Rasters, eigener Hintergrund statt der Kachel-Fläche, damit sie
   eindeutig als Gruppentitel und nicht als weitere Kachel zu lesen ist
   (Auftrag "Galerie-Seite komplett neu aufbauen", 24.08.2026). Auftrag
   "alles-vor-deploy", 07.09.2026, Teil F: bisher .75rem in --text-leise war
   kaum lesbar -- jetzt mindestens 1rem in der normalen hellen Textfarbe
   (--text), mit mehr Abstand nach oben (vorheriger Abschnitt) und unten
   (Bilder), Großbuchstaben/Sperrung wie die übrigen Kleinzeilen bleiben. */
.werke__gruppe{
  grid-column:1/-1;background:var(--grund);padding:2rem .1rem 1rem;
  font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);
}
.werke__gruppe:first-child{padding-top:.1rem}

/* zahlarten.html — Kartenraster, dasselbe Muster wie .werke, nur mit Logo +
   sichtbarem Namen statt Bild + Bildunterschrift. */
/* Korrekturauftrag 25.08.2026, Punkt 8: mittig zentriert, auch eine
   angebrochene letzte Zeile -- ein CSS-Grid mit festen Spalten reserviert
   für eine unvollständige letzte Zeile weiterhin alle Spalten (die Kacheln
   blieben links kleben), Flexbox mit justify-content:center zentriert eine
   unvollständige Zeile dagegen von selbst. Der bisherige "Haarlinien"-Rahmen
   kam vorher aus dem 1px-Grid-Zwischenraum vor dunklem Hintergrund -- jetzt
   trägt jede Kachel ihren Rahmen selbst, optisch praktisch identisch. */
.zahlarten-liste{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1px;margin-top:2rem;
  background:var(--grund-linie);border:1px solid var(--grund-linie);
}
.zahlarten-liste .zahlart-karte{flex:1 1 45%;max-width:calc(50% - 1px)}
@media(min-width:640px){.zahlarten-liste .zahlart-karte{flex-basis:31%;max-width:calc(33.333% - 1px)}}
@media(min-width:960px){.zahlarten-liste .zahlart-karte{flex-basis:23%;max-width:calc(25% - 1px)}}
/* 24.08.2026: von der hellen Karte (#FBF8F2) auf den dunklen Grundton
   umgestellt (Auftrag "Helle Kästen entfernen"). Geprüft, ob das die
   Zahlart-Logos unleserlich macht: Apple Pay bekommt seinen eigenen
   schwarzen Chip-Untergrund (.zahlart-dunkel-chip, unabhängig von der
   Kartenfarbe), iDEAL/Wero/Link bringen ihre Fläche im Bild selbst mit
   (.zahlart-eigene-flaeche) -- beide funktionieren nachweislich bereits auf
   dunklem Grund, siehe dieselben Klassen in der Fußzeile (.fuss__zahlarten).
   Kein Logo hängt an einer hellen Kartenfarbe. */
.zahlart-karte{
  background:var(--grund-weich);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.85rem;padding:1.75rem 1.25rem;text-align:center;min-height:120px;
}
.zahlart-karte img{height:30px;width:auto;max-width:100%;object-fit:contain}
.zahlart-karte span{font-size:.8125rem;color:var(--text-leise)}
.zahlart-karte .zahlart-dunkel-chip{height:20px}
.zahlart-karte .zahlart-eigene-flaeche{height:34px;border-radius:6px}
.zahlart-logogruppe{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center}

/* ============================================================
   VERKAUFSBAUSTEINE
   Aus der Recherche: über der Falz liegen 57 % der Betrachtungszeit,
   die stärkste Kaufbremse ist die Angst vor Reue. Beides wird hier bedient.
   ============================================================ */

/* Bewertung über der Überschrift — das Erste, was gelesen wird */
.beleg{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem;font-size:.875rem;cursor:pointer;width:fit-content;transition:opacity var(--t-schnell) var(--kurve)}
.beleg:hover,.beleg:focus-visible{opacity:.78}
.beleg__zahl{color:var(--text);font-weight:500}
.beleg__text{color:var(--text-leise);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:currentColor}
.beleg:hover .beleg__text{text-decoration-color:var(--text)}
.hell .beleg__zahl,.hell-weich .beleg__zahl{color:var(--text-dunkel)}
.hell .beleg__text,.hell-weich .beleg__text{color:var(--text-dunkel-leise)}
.beleg .sterne svg{width:17px;height:17px}

/* Preisanker: der Einstieg steht ohne Entschuldigung da */
.preisanker{
  display:inline-flex;align-items:baseline;gap:.5rem;margin-top:1.1rem;
  font-size:.875rem;color:var(--text-leise);
}
.preisanker b{font-family:var(--display);font-size:1.5rem;color:var(--text);font-weight:400}

/* Garantie — löst die Angst vor Reue, bevor sie entsteht */
.garantie{position:relative;overflow:hidden;background:var(--grund-weich);border-block:1px solid var(--grund-linie)}

.garantie__gitter{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.garantie__gitter{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:3.5rem}}
.garantie__siegel{
  width:92px;height:92px;border-radius:50%;border:1px solid var(--zier);
  display:grid;place-items:center;color:var(--zier);margin-bottom:1.25rem;
}
.garantie__siegel svg{width:38px;height:38px}
.garantie h2{font-size:clamp(1.6rem,calc(3.4vw / var(--zf,1)),2.4rem)}
.garantie h2 em{font-style:italic;color:var(--zier)}
.garantie__punkte{display:grid;gap:1.1rem}
.garantie__punkt{display:flex;gap:.85rem;align-items:flex-start}
.garantie__punkt svg{width:19px;height:19px;color:var(--zier);flex:none;margin-top:.15rem}
.garantie__punkt b{display:block;font-weight:500;font-size:.9375rem}
.garantie__punkt span{display:block;font-size:.875rem;color:var(--text-leise);margin-top:.2rem}

/* Eine große Kundenstimme statt vieler kleiner */
.stimme{position:relative;overflow:hidden;text-align:center}
.stimme__inhalt{position:relative;z-index:1;max-width:46rem;margin-inline:auto}
.stimme blockquote{
  font-family:var(--display);font-size:clamp(1.35rem,calc(3vw / var(--zf,1)),2.05rem);line-height:1.34;
  margin:0;font-style:italic;
}
.stimme__wer{margin-top:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.stimme__wer p{font-size:.875rem;color:var(--text-leise)}

/* ============================================================
   DREI SCHRITTE — als Weg, nicht als Kästen.
   Vorher drei umrandete Felder mit kleinen Zahlenkreisen; das sah aus wie ein
   Formular. Jetzt liegen die Schritte auf einer feinen Linie, die sich beim
   Hereinscrollen von links nach rechts zieht, und die Zahlen sind groß gesetzt.
   ============================================================ */
.dreischritt{
  position:relative;display:grid;gap:2.25rem;margin-top:3rem;
  background:none;border:0;
}
@media(min-width:768px){.dreischritt{grid-template-columns:repeat(3,1fr);gap:2.5rem}}

/* Die Linie, auf der die Schritte sitzen */
.dreischritt::before{
  content:"";position:absolute;z-index:0;background:var(--grund-linie);
  left:7px;top:.6rem;bottom:.6rem;width:1px;
  transform:scaleY(0);transform-origin:top;
  transition:transform 1400ms var(--kurve);
}
@media(min-width:768px){
  .dreischritt::before{
    left:0;right:0;top:19px;bottom:auto;width:auto;height:1px;
    transform:scaleX(0);transform-origin:left;
  }
}
.dreischritt[data-sichtbar="ja"]::before{transform:scale(1)}

.dreischritt__feld{
  position:relative;z-index:1;background:none;border:0;padding:0 0 0 2.25rem;
  opacity:0;transform:translateY(10px);
  transition:opacity 700ms var(--kurve),transform 700ms var(--kurve);
}
@media(min-width:768px){.dreischritt__feld{padding:0 1.5rem 0 0}}
.dreischritt[data-sichtbar="ja"] .dreischritt__feld{opacity:1;transform:none}
.dreischritt[data-sichtbar="ja"] .dreischritt__feld:nth-child(2){transition-delay:200ms}
.dreischritt[data-sichtbar="ja"] .dreischritt__feld:nth-child(3){transition-delay:400ms}

/* Der Punkt sitzt auf der Linie, die Zahl steht groß daneben */
.dreischritt__feld::before{
  content:"";position:absolute;left:0;top:.6rem;width:15px;height:15px;
  border-radius:50%;background:var(--grund);border:1px solid var(--zier);
  box-shadow:0 0 0 5px var(--grund);
}
@media(min-width:768px){.dreischritt__feld::before{top:12px}}

.dreischritt__nr{
  display:block;width:auto;height:auto;border:0;border-radius:0;
  font-family:var(--display);font-size:clamp(2.4rem,calc(4.4vw / var(--zf,1)),3.4rem);
  line-height:.9;color:var(--zier);opacity:.55;margin-bottom:.9rem;
}
@media(min-width:768px){.dreischritt__nr{margin-top:2.25rem}}
.dreischritt__feld h3{font-family:var(--sans);font-size:1.0625rem;font-weight:500}
.dreischritt__feld p{font-size:.875rem;color:var(--text-leise);margin-top:.5rem;max-width:34ch}

@media (prefers-reduced-motion: reduce){
  .dreischritt::before{transform:scale(1)}
  .dreischritt__feld{opacity:1;transform:none;transition:none}
}


.material-info{margin-top:.9rem}
.material-info summary{
  cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;
  gap:.4rem;font-size:.8125rem;color:var(--text-dunkel-leise);
}
.material-info summary::-webkit-details-marker{display:none}
.material-info summary::after{
  content:"";width:7px;height:7px;flex:none;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-normal) var(--kurve);
}
.material-info[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.material-info__inhalt{
  padding-top:.75rem;font-size:.8125rem;color:var(--text-dunkel-leise);max-width:52ch;
}
.material-info__inhalt p{margin:0 0 .6rem}
.material-info__intro b{color:var(--text-dunkel);font-weight:500}
.material-info__inhalt ul{
  list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:.35rem;
}
.material-info__inhalt li{padding-left:1rem;position:relative}
.material-info__inhalt li::before{
  content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--zier-dunkel);
}

/* Materialien-Übersicht -- Standardwerte für dunklen Grund (Themenwelt-
   Seiten, unter der Preistafel). Für den hellen Konfigurator (.hell) unten
   eigens überschrieben -- --text-leise/--text-dunkel-leise sind jeweils
   nur für EINE Richtung geprüft (siehe deren eigene Kommentare in den
   Grundfarben weiter oben), ein einzelner Satz Regeln funktioniert auf
   beiden Untergründen nicht (Auftrag "Materialbeschreibungen überall vor
   der Kaufentscheidung", 24.08.2026). */
/* Drei gleich breite Spalten über die volle Breite statt eines schmalen,
   linksbündigen Blocks mit leerer rechter Hälfte (Auftrag "Linksbündige
   Blöcke mit leerer rechter Hälfte", 24.08.2026). align-items:start hält
   jede Kachel auf ihrer eigenen Höhe -- Aufklappen einer Kachel schiebt die
   Nachbarn nicht mit. */
/* Korrekturauftrag 25.08.2026, Punkt 5: Überschrift über den drei
   Materialfeldern -- mittig, etwas größer als die Feldbeschriftungen
   (.materialien__block summary, .9375rem). Da die drei Felder gleich breit
   sind, liegt "über dem mittleren Feld" automatisch auf derselben Position
   wie "über der ganzen Reihe zentriert". */
.materialien__titel{text-align:center;font-size:1.0625rem;font-weight:500;color:var(--text);margin:1.25rem 0 1.5rem}
.hell .materialien__titel,.hell-weich .materialien__titel{color:var(--text-dunkel)}
.materialien{display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:1.5rem;align-items:start}
@media(min-width:700px){.materialien{grid-template-columns:repeat(3,1fr)}}
.materialien__block{border:1px solid var(--bedien-dunkel);border-radius:var(--radius)}
.materialien__block--aktiv{border-color:var(--gold-tief)}
.materialien__block summary{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  min-height:44px;padding:.85rem 1rem;cursor:pointer;list-style:none;
  font-size:.9375rem;font-weight:500;color:var(--text);
}
.materialien__block summary::-webkit-details-marker{display:none}
.materialien__block summary::after{
  content:"";width:7px;height:7px;flex:none;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-normal) var(--kurve);
}
.materialien__block[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.materialien__haken{width:16px;height:16px;flex:none;color:var(--gold-tief)}
.materialien__inhalt{padding:0 1rem 1rem;font-size:.875rem;line-height:1.6;color:var(--text-leise)}
.materialien__inhalt p{margin:0 0 .6rem}
.materialien__inhalt ul{list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:.4rem}
.materialien__inhalt li{padding-left:1.1rem;position:relative}
.materialien__inhalt li::before{
  content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--gold-tief);
}
.hell .materialien__block,.hell-weich .materialien__block{border-color:var(--bedien-hell)}
.hell .materialien__block summary,.hell-weich .materialien__block summary{color:var(--text-dunkel)}
.hell .materialien__inhalt,.hell-weich .materialien__inhalt{color:var(--text-dunkel-leise)}

/* Vorher/Nachher auch auf den Landingpages */
.seitenkopf .regler{margin:0}
.seitenkopf__knoepfe .knopf{min-width:min(100%,220px)}

/* Geschenkhinweis und Größenhilfe — kleine Entscheidungshilfen */
/* ============================================================
   UNIKAT-KENNZEICHNUNG
   Nur für personalisierte Ware. Der Dreiklang „individuell erstellt ·
   digital gestaltet · ein Unikat" ist die rechtlich zulässige Formel —
   „handgemalt" oder „gezeichnet" wäre nach UWG unzulässig.
   Für spätere Katalogmotive, die ohne Kundenfoto entstehen, darf dieser
   Baustein NICHT gesetzt werden.
   ============================================================ */
/* Drei einzelne Chips statt einer großen Pille: bricht die Zeile um, bleibt
   jeder Teil für sich kompakt und mittig. Eine durchgehende Pille wurde bei
   Umbruch zu einem hohen Oval mit linksbündigem Text und viel Luft rechts. */
.unikat{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-top:1.25rem;padding:0;border:0;
}
.unikat span{
  display:inline-flex;align-items:center;
  padding:.5rem .85rem;border-radius:99px;
  border:1px solid rgba(231,197,126,.32);
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}
.unikat b{color:var(--zier);font-weight:500;letter-spacing:.12em}
.hell .unikat span,.hell-weich .unikat span{border-color:rgba(138,106,40,.4)}
.hell .unikat b,.hell-weich .unikat b{color:var(--zier-dunkel)}
/* Auf sehr schmalen Schirmen dürfen die Begriffe umbrechen statt zu überlaufen */
@media(max-width:420px){
  .unikat span{white-space:normal}
  .unikat{gap:.4rem}
}

/* Kompaktes Siegel für Produktkarten und Kacheln */
.unikat-siegel{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--zier);border:1px solid rgba(154,143,122,.4);
  padding:.3rem .6rem;border-radius:99px;
}
.unikat-siegel svg{width:12px;height:12px;flex:none}
.hell .unikat-siegel,.hell-weich .unikat-siegel{color:var(--zier-dunkel);border-color:rgba(110,101,85,.45)}
.tafel .unikat-siegel{margin-top:1rem;align-self:flex-start}
.kachel .unikat-siegel{margin-top:.7rem}

/* Preis direkt am Größenknopf — der Kunde sieht vor dem Klick, was es kostet */
.wahl__preis{
  display:block;font-size:.75rem;color:var(--text-dunkel-leise);
  font-variant-numeric:tabular-nums;margin-top:.15rem;
}
.wahl button[aria-pressed="true"] .wahl__preis{color:var(--zier)}
#groessen button{flex-direction:column;align-items:flex-start;padding:.55rem .9rem;line-height:1.25}
#groesse-hinweis{margin-top:.7rem}

/* Der Aufklapper „Weitere Größen (…)“ ist am 20.09.2026 entfallen
   (Kaufstrecken-Auftrag „Größenwahl“, Änderung 1): Alle Größen stehen
   sofort sichtbar in #groessen. Die Regeln .groessen__mehr und
   .groessen__zahl, die nur den Aufklapper und seinen Zähler betrafen,
   sind mit ihm zusammen entfernt worden -- kein Markup trägt sie noch.

   Am Handy stehen dadurch mehr Kacheln untereinander. Damit nie eine
   einzelne Kachel die ganze Zeile belegt (gefordert: mindestens zwei
   je Reihe), ist ihre Breite auf die halbe Reihe gedeckelt; .wahl ist
   ein umbrechender Flex-Kasten, es passen also immer mindestens zwei
   nebeneinander. Am Rechner ändert sich nichts. */
@media(max-width:480px){
  #groessen button{max-width:calc(50% - .25rem)}
}

/* Ansage, wenn die Größe automatisch gewechselt hat. Der Preis darf sich
   nie scheinbar grundlos ändern — deshalb steht hier, warum er es tut. */
.konf__sprung{
  margin-top:.7rem;padding:.6rem .8rem;font-size:.8125rem;line-height:1.45;
  color:var(--text-dunkel);background:#FBF5E8;
  border-left:2px solid var(--zier-dunkel);border-radius:2px;
}

/* Panorama erklärt sich nicht von selbst — eine Zeile Gewinn, keine Warnung */
.konf__panorama{margin-top:.8rem;max-width:44ch}

/* ============================================================
   KONFIGURATOR — sichtbare Auswahl statt Textknöpfe
   Material zeigt seine Oberfläche, Format seine Form, Größe ihren Preis.
   Wer schnell kaufen will, erkennt jede Option, ohne sie zu lesen.
   ============================================================ */
.karten{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:.6rem;align-items:start}
.karte{
  position:relative;border:1px solid var(--bedien-hell);border-radius:var(--radius);
  background:#FBF8F2;padding:0 0 .7rem;cursor:pointer;overflow:hidden;
  text-align:left;min-height:44px;color:var(--text-dunkel);width:100%;
  transition:border-color var(--t-schnell) var(--kurve),box-shadow var(--t-schnell) var(--kurve),
    transform 120ms var(--kurve);
}
.karte:hover{border-color:var(--text-dunkel-leise)}
.karte:active{transform:scale(.97)}
.karte[aria-pressed="true"]{
  border-color:var(--grund);box-shadow:inset 0 0 0 1px var(--grund);
}
/* Leinwand als naheliegender Mittelweg -- über Form und Gewicht, nicht über
   Farbe: etwas breitere Spalte (grid-template-columns oben), höhere
   Musterfläche und ein dezenter Schatten, der zum bestehenden
   Glass-Morphism passt. Keine neue Farbe, kein Rahmen in Akzentfarbe --
   der Rahmen/Zustand bei aria-pressed bleibt unverändert wie bei den
   anderen beiden Karten. */
.karte--leinwand{
  box-shadow:0 10px 26px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.06);
}
.karte--leinwand .karte__probe{height:58px}
.karte__hinweis{
  display:block;font-size:.6875rem;letter-spacing:.03em;
  color:var(--text-dunkel-leise);padding:.2rem .75rem 0;
}
.karte__probe{display:block;height:52px;border-bottom:1px solid var(--buehne-linie)}
/* Die Oberflächen sind angedeutet, nicht fotografiert — reicht zum Unterscheiden */
.karte__probe--poster{background:
  repeating-linear-gradient(0deg,#F6F1E6,#F6F1E6 2px,#F2ECDF 2px,#F2ECDF 4px)}
.karte__probe--leinwand{background:
  repeating-linear-gradient(90deg,#EFE7D6,#EFE7D6 3px,#E6DCC6 3px,#E6DCC6 6px),
  repeating-linear-gradient(0deg,#EFE7D6,#EFE7D6 3px,#E6DCC6 3px,#E6DCC6 6px)}
.karte__probe--acryl{background:
  linear-gradient(115deg,#E9EEF2 0%,#FBFDFE 28%,#DCE5EC 48%,#F4F8FA 68%,#E2EAF0 100%)}
.karte__name{display:block;font-size:.875rem;font-weight:500;padding:.6rem .75rem 0}
.karte__ab{display:block;font-size:.75rem;color:var(--text-dunkel-leise);padding:.15rem .75rem 0;
  font-variant-numeric:tabular-nums}
.karte__haken{
  position:absolute;right:.5rem;top:.5rem;width:22px;height:22px;border-radius:50%;
  background:var(--grund);color:var(--text);display:grid;place-items:center;opacity:0;
  transition:opacity var(--t-schnell) var(--kurve);
}
.karte__haken svg{width:12px;height:12px}
.karte[aria-pressed="true"] .karte__haken{opacity:1}

/* Format als Form, nicht als Wort */
.formen{display:flex;gap:.6rem;flex-wrap:wrap}
.form{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  border:1px solid var(--bedien-hell);border-radius:var(--radius);background:#FBF8F2;
  padding:.7rem .9rem;cursor:pointer;min-height:44px;min-width:82px;
  font-size:.75rem;color:var(--text-dunkel);
  transition:border-color var(--t-schnell) var(--kurve),box-shadow var(--t-schnell) var(--kurve),
    transform 120ms var(--kurve);
}
.form:hover{border-color:var(--text-dunkel-leise)}
.form:active{transform:scale(.97)}
/* Zusammenzieh-Animation beim Antippen aus — der Aktiv-Zustand bleibt allein
   über Farbe/Rahmen (aria-pressed) erkennbar (B4, Umbau vom 21.08.2026). */
@media(prefers-reduced-motion:reduce){
  .wahl button:active,.karte:active,.form:active{transform:none}
}
.form[aria-pressed="true"]{border-color:var(--grund);box-shadow:inset 0 0 0 1px var(--grund)}
.form__zeichen{
  display:block;border:1.5px solid var(--text-dunkel-leise);border-radius:1px;background:#fff;
}
.form[aria-pressed="true"] .form__zeichen{border-color:var(--grund);background:var(--grund)}
.form__zeichen--hoch{width:20px;height:27px}
.form__zeichen--quer{width:27px;height:20px}
.form__zeichen--quadrat{width:23px;height:23px}
.form__zeichen--panorama{width:30px;height:15px}

/* Stückzahl als Zähler */
.zaehler{display:inline-flex;align-items:center;gap:.25rem;
  border:1px solid var(--bedien-hell);border-radius:var(--radius);background:#FBF8F2}
.zaehler button{
  width:48px;height:48px;border:0;background:transparent;cursor:pointer;
  font-size:1.25rem;line-height:1;color:var(--text-dunkel);
}
.zaehler button[disabled]{opacity:.3;cursor:not-allowed}
.zaehler output{
  min-width:2.5rem;text-align:center;font-family:var(--display);font-size:1.35rem;
  font-variant-numeric:tabular-nums;
}
.zaehler__hinweis{font-size:.8125rem;color:var(--text-dunkel-leise);margin-left:.85rem}

@media(max-width:520px){
  .karten{grid-template-columns:1fr}
  .karte__probe{height:40px}
  .karte--leinwand .karte__probe{height:46px}
}

/* ============================================================
   ERSPARNIS — steht direkt an der Stückzahl, wo die Entscheidung fällt.
   Vorher ein grauer Kasten unter dem Preis; dort kam er zu spät und
   sah nach Hinweisbox aus statt nach Belohnung.
   ============================================================ */
.sparen{
  display:none;align-items:center;gap:.9rem;margin-top:1rem;
  padding:.75rem 1rem .75rem .8rem;
  background:#FBF8F2;border:1px solid var(--buehne-linie);
  border-radius:calc(var(--radius-gross) + 2px);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.sparen[data-an="ja"]{display:flex}
.sparen__marke{
  flex:none;display:grid;place-items:center;min-width:58px;height:44px;
  border-radius:var(--radius);background:var(--grund);color:var(--text);
  font-size:.9375rem;font-weight:500;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.sparen__text{display:block;font-size:.875rem;line-height:1.35}
.sparen__text b{display:block;font-weight:500;color:var(--text-dunkel)}
.sparen__text span{display:block;color:var(--text-dunkel-leise);margin-top:.15rem}

/* Hinweiszeile unter der Überblendung */
/* Stil-gesteuerte Themenwelt-Seiten: Bild (Zeile 1, .wandel-bereich),
   Stil-Auswahl (Zeile 2, .seitenkopf__stile) und Beschreibung (Zeile 3,
   .seitenkopf__beschreibung) als getrennte volle-Breite-Container -- siehe
   stilBereichAufbauen() in stile.js. Die frühere Höhenbegrenzung/Scrollbox
   samt "weitere Stile"-Aufklapper wurde im Korrekturauftrag 25.08.2026
   vollständig entfernt: alle Stil-Knöpfe sind jetzt gleichzeitig sichtbar,
   die Seite darf dafür länger werden. */
/* Korrekturauftrag 25.08.2026, Punkt 2b/2c: eigene Fläche mit goldenem
   Rand, damit sofort erkennbar ist, dass der Text zum angeklickten Stil
   gehört, statt als beiläufiger Fließtext unterzugehen -- Text mittig,
   auch über mehrere Zeilen. Gilt projektweit für jede Stilbeschreibung
   (Themenwelt-Seiten UND Konfigurator, dieselbe Klasse). */
.stil-beschreibung{
  font-size:.875rem;color:var(--text-leise);margin:0 auto;max-width:64ch;
  text-align:center;border:1px solid var(--gold-tief);border-radius:var(--radius-gross);
  padding:1rem 1.5rem;background:rgba(201,163,91,.06);
}
.hell .stil-beschreibung,.hell-weich .stil-beschreibung{color:var(--text-dunkel-leise)}
/* Korrekturauftrag 25.08.2026, Teil G2: sitzt jetzt im Seitenkopf direkt
   unter der Stil-Beschreibung (Zeile 3), nicht mehr in einem eigenen
   Abschnitt weiter unten -- siehe seiten_bauen.py seitenkopf(). */
.seitenkopf__motive{position:relative;z-index:1;margin-top:1.75rem}
/* ENTSCHEIDUNG SASKIA (Nachtrag 2 "Stilbeschreibung und Beispielbilder
   mittig", Hero-Bereich, 03.09.2026 -- ersetzt die vorige, rein zentrierte
   Fassung): ab 900px wird .seitenkopf__motive selbst zum Spalten-Flex --
   dieselbe optische Stapelung wie vorher (Überschrift, Hinweis, Reihe,
   KI-Hinweis untereinander, align-items:stretch = volle Breite wie im
   Blockfluss), aber jetzt kann JEDES Kind einzeln über align-self von der
   Stapel-Breite abweichen -- genutzt von .wandel-weitere__reihe--breiter
   weiter unten, damit nur die Bilderreihe selbst ausbrechen darf, Überschrift
   und Hinweistext bleiben unverändert mittig auf Bildbreite. */
@media(min-width:900px){
  .seitenkopf__motive{display:flex;flex-direction:column;align-items:stretch}
}
.wandel-weitere__titel{font-size:.875rem;font-weight:500;color:var(--text-leise);margin-bottom:.4rem}
/* Kleiner und ruhiger als die Überschrift darüber -- 7,69:1 Kontrast auf
   dunklem Grund, wie .wandel-weitere__titel selbst, nur kleiner/leichter. */
.wandel-weitere__hinweis{font-size:.75rem;font-weight:400;color:var(--text-leise);margin-bottom:1.25rem}
/* Korrekturauftrag 25.08.2026 (Nachtrag "Ausrichtung unter dem
   Vorschaubild"), Punkt 2: Überschrift mittig statt linksbündig -- .seitenkopf__motive
   selbst ist durch das Spaltenraster oben schon exakt so breit wie das Bild,
   hier wird nur noch der Text darin zentriert. */
.wandel-weitere__titel,.wandel-weitere__hinweis{text-align:center}
/* ENTSCHEIDUNG SASKIA (12.09.2026): .seitenkopf__motive steht jetzt in
   voller Inhaltsbreite unter dem zweispaltigen Kopf (siehe seiten_bauen.py/
   die ENTSCHEIDUNG SASKIA weiter oben bei .seitenkopf__bildspalte) --
   justify-content:center ergänzt hier nur die vorhandene, geschützte
   display:flex/flex-direction:column-Regel oben (dort nicht mit geändert,
   siehe Kommentar dort), ohne praktische Wirkung auf die Höhe, aber
   ausdrücklich verlangt. Kein Bildlauf mehr, kein Aufklapper
   (Korrekturauftrag 25.08.2026, Teil G2, "so viele wie in die Breite
   passen") -- die Kacheln brechen frei um, statt seitlich zu scrollen, und
   stehen jetzt mittig statt linksbündig (vorher .wandel-weitere__reihe--
   breiter, seit 11.09./12.09.2026 entfernt, siehe BERICHT). */
.seitenkopf__motive{justify-content:center}
.wandel-weitere__reihe{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}
.wandel-weitere__stueck{flex:0 0 240px}
.wandel-weitere__stueck .wandel{max-width:none;width:auto}

.wandel__hinweis{
  margin-top:.85rem;text-align:center;font-size:.8125rem;color:var(--text-leise);
}


/* ============================================================
   ZAHLARTEN — schlichte Wortmarken unter dem Kaufknopf.
   Sie sollen Sicherheit geben, nicht ablenken: kein Farbfeuerwerk,
   keine fremden Logos ohne geklärte Rechte.
   ============================================================ */
.zahlarten{margin-top:1.4rem}
.zahlarten__titel{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dunkel-leise);margin-bottom:.6rem;font-weight:500;
}
.zahlarten__reihe{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;
}
.zahlart{
  /* Seit dem Umbau vom 21.08.2026 ohne sichtbaren Namen (nur noch Logo,
     Name steht als aria-label am <li>, siehe layout.js) — min-width/
     min-height halten die Chips trotzdem auf Mindestgröße für Klick-/
     Touchfläche, statt sich auf die Logobreite allein zu verlassen. */
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  border:1px solid var(--bedien-hell);border-radius:var(--radius);
  background:#FBF8F2;padding:.35rem .6rem;font-size:.8125rem;
  color:var(--text-dunkel);font-variant-numeric:tabular-nums;
}
.zahlart__logogruppe{display:inline-flex;align-items:center;gap:.3rem}
.zahlart__bild{height:16px;width:auto;max-width:44px;object-fit:contain;vertical-align:middle}
.zahlart__bild.zahlart-dunkel-chip{height:12px}
/* Auf dunklem Grund dreht sich die Farbgebung um */
.abschluss .zahlarten__titel,.fuss .zahlarten__titel{color:var(--zier)}
.abschluss .zahlart,.fuss .zahlart{
  background:var(--grund-weich);border-color:var(--grund-linie);color:var(--text-leise);
}
/* Korrekturauftrag 26.08.2026, Punkt 8: 14 Zahlarten verteilten sich im
   Abschlussbereich ungleich auf zwei Zeilen (8 oben, 6 unten), weil reines
   flex-wrap jede Zeile so voll wie möglich füllt, bevor umgebrochen wird.
   Ein festes 7-Spalten-Raster erzwingt IMMER genau 7 je Zeile, unabhängig
   von der unterschiedlichen Breite einzelner Chips (z. B. "Karte" mit zwei
   Logos). Nur ab 480px, weil sieben Chips darunter nicht mehr nebeneinander
   passen würden -- darunter bleibt der normale, zentrierte Zeilenumbruch von
   .zahlarten__reihe erhalten. Betrifft ausschließlich den Abschlussbereich
   (.abschluss), nicht den Fuß und nicht den Konfigurator (Punkt 7). */
.abschluss .zahlarten__reihe{justify-content:center}
@media(min-width:480px){
  .abschluss .zahlarten__reihe{
    display:grid;grid-template-columns:repeat(7,minmax(44px,auto));justify-content:center;
  }
}

/* ============================================================
   KAUFSTRECKE — helle Bühne, ein Schritt je Ansicht.
   Nichts lenkt ab: keine Halos, keine zweite Farbe, kein Gimmick.
   Wer hier ist, will fertig werden.
   ============================================================ */
.kasse{background:var(--buehne);color:var(--text-dunkel)}
.kasse .titel,.kasse h2{color:var(--text-dunkel)}
.kasse .augbraue{color:var(--zier-dunkel)}
.kasse .augbraue::before{background:var(--zier-dunkel)}
/* Der Vorspann erbt sonst die helle Variante für dunkle Abschnitte und
   verschwindet auf dem hellen Bühnenton fast. */
.kasse .vorspann{color:var(--text-dunkel-leise)}
.kasse .k-hilfe{color:var(--text-dunkel-leise)}
/* Umriss-Knöpfe erben die helle Schriftfarbe für dunkle Abschnitte und
   waren auf dem Bühnenton praktisch unsichtbar — erst beim Überfahren
   wurden sie lesbar. */
.kasse .knopf--umriss{color:var(--text-dunkel);border-color:var(--bedien-hell)}
.kasse .knopf--umriss:hover{border-color:var(--zier-dunkel);color:var(--zier-dunkel)}

.k-marken{
  list-style:none;margin:2rem 0 .75rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
  font-size:.8125rem;color:var(--text-dunkel-leise);counter-reset:k;
}
.k-marken li{display:flex;align-items:center;gap:.5rem;counter-increment:k}
.k-marken li::before{
  content:counter(k);display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;border:1px solid var(--bedien-hell);font-size:.6875rem;
  background:#FBF8F2;
}
.k-marken li[data-stand="aktiv"]{color:var(--text-dunkel);font-weight:500}
.k-marken li[data-stand="aktiv"]::before{background:var(--grund);color:var(--text);border-color:var(--grund)}
.k-marken li[data-stand="fertig"]::before{background:var(--zier-dunkel);color:#fff;border-color:var(--zier-dunkel)}

/* Zusätzlicher Balken, der zwischen den fünf Schritt-Kreisen weich füllt —
   die Kreise selbst bleiben unverändert (B4, Umbau vom 21.08.2026). */
.k-marken__leiste{height:3px;background:var(--bedien-hell);border-radius:99px;overflow:hidden;margin-bottom:1.75rem}
.k-marken__fuellung{
  display:block;height:100%;width:0%;background:var(--grund);border-radius:inherit;
  transition:width var(--t-normal) var(--kurve);
}
@media(prefers-reduced-motion:reduce){.k-marken__fuellung{transition:none}}

/* Auftrag "Kasse auf dem Handy -- Zweispalten-Raster bricht nicht um"
   (Nachtrag 8, 03.09.2026): .k-gitter hat unter 900px KEIN
   grid-template-columns -- ein <div> mit display:grid und ohne definierte
   Spalten legt seine Kinder zwar bereits von selbst in EINE (implizite)
   Spalte, jede Zeile für sich (grid-auto-flow:row, Standard). Diese eine
   Spalte wird aber, weil keine Breite dafür festgelegt ist, so breit wie
   IHR BREITESTES KIND VERLANGT -- und Grid-Kinder dürfen laut Spezifikation
   von sich aus nie schmaler werden als ihr eigener Inhalt (min-width:auto,
   dasselbe Muster wie bei den Flex-Kindern in Nachtrag 6). .k-neben (der
   Kasten "Deine Bestellung") hatte keine eigene Breitenregel -- sein Inhalt
   zog die gemeinsame Spalte (und damit auch .k-haupt, dieselbe Spalte,
   dieselbe Breite) über die Bildschirmbreite hinaus. Sichtbar wurde nur
   .k-neben, weil es als einziges der beiden eine eigene Hintergrundfarbe
   trägt (#FBF8F2) und die überstehende Fläche damit sichtbar überdeckte;
   .k-haupt selbst hat keinen eigenen Hintergrund, dort blieb im
   Übermaß-Bereich nur der dunkle Seitenhintergrund sichtbar (der
   "dunkle Streifen"). min-width:0 hebt die Sonderregel auf, width:100%/
   max-width:100% verhindern es zusätzlich für jeden anderen Fall. */
.k-gitter{display:grid;gap:2rem;align-items:start}
@media(min-width:900px){.k-gitter{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.75rem}}
.k-haupt,.k-neben{min-width:0;width:100%;max-width:100%}
.k-haupt > section > p{color:var(--text-dunkel-leise);max-width:52ch;margin-bottom:1.5rem}

/* Warenkorb-Liste (Kasse Schritt 1) */
.k-warenkorb-liste{display:grid;gap:.75rem;margin-top:1.25rem}
.k-wk-position{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border:1px solid var(--buehne-linie);border-radius:var(--radius);padding:.85rem 1rem;
}
.k-wk-position__haupt{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.k-wk-position__name{font-weight:500;margin:0}
.k-wk-menge{display:flex;align-items:center;gap:.5rem}
.k-wk-menge__knopf{
  width:32px;height:32px;border:1px solid var(--bedien-hell);border-radius:var(--radius);
  background:transparent;font-size:1.1rem;line-height:1;cursor:pointer;color:var(--text-dunkel);
}
.k-wk-menge__knopf:hover{border-color:var(--text-dunkel)}
.k-wk-menge__zahl{min-width:1.5rem;text-align:center;font-variant-numeric:tabular-nums}
.k-wk-menge__fest{font-size:.8125rem;color:var(--text-dunkel-leise)}
.k-wk-position__rechts{display:flex;align-items:center;gap:.85rem}
.k-wk-position__preis{font-weight:500;font-variant-numeric:tabular-nums}
.k-wk-position__entfernen{
  width:36px;height:36px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--text-dunkel-leise);cursor:pointer;border-radius:var(--radius);
}
.k-wk-position__entfernen:hover{color:#9B2C2C;background:rgba(155,44,44,.08)}
.k-wk-position__entfernen svg{width:18px;height:18px}

/* Motiv & Foto je Position (Kasse Schritt 2) */
/* Auftrag "Kasse Schritt 2 bricht auf dem Handy aus dem Bildschirm"
   (Nachtrag 6, 03.09.2026): <fieldset> bekommt von jedem Browser standardmäßig
   ein implizites min-width:min-content -- anders als gewöhnliche Blockelemente
   darf es NIE schmaler werden als sein breitester unzerbrechlicher Inhalt
   (hier: ein langer Positionsname oder ein langer Dateiname weiter unten in
   .up-liste). Genau das war die Ursache für den Ausbruch auf dem Handy --
   min-width:0 hebt diese Sonderregel auf, max-width:100% verhindert es
   zusätzlich für jeden anderen Browser/Fall. */
.k-motiv-karte{
  border:1px solid var(--buehne-linie);border-radius:var(--radius);
  padding:1.1rem 1.15rem 1.3rem;margin-top:1.25rem;
  min-width:0;max-width:100%;
}
.k-motiv-karte legend{font-family:var(--display);font-size:1.0625rem;padding:0 .3rem;max-width:100%}
/* Korrekturauftrag 25.08.2026, Punkt 15: Papierkorb-Symbol auch in Schritt 2
   (Motiv & Foto), nicht nur im Warenkorb (Schritt 1). <legend> darf laut
   HTML-Spezifikation Phrasing Content wie <button> enthalten. */
.k-motiv-karte__legende{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;max-width:100%;padding:0 .3rem;
  /* Auftrag "Darstellungsfehler im Kassenschritt 1", 31.08.2026: die native
     Rahmen-Aussparung von <legend> ist für ein textbreites Element gedacht,
     nicht für ein auf volle Breite gestrecktes Flex-Element (Titel +
     Papierkorb an den Enden). Bei manchen Textlängen/Browsern deckt sie den
     Titel nicht zuverlässig ab -- statt uns weiter allein auf die
     Browser-Berechnung zu verlassen, bekommt die Legend eine eigene, zur
     Bühne passende Deckfarbe, die die Linie unabhängig davon verdeckt. */
  background:var(--buehne);
}
/* min-width:0 hebt die Standard-Regel für Flex-Kinder auf (die sonst nie
   schmaler werden als ihr Inhalt) -- ohne das würde ein langer Positionsname
   ("Leinwand 20 × 30 cm — Motorräder, Color Blast") den Papierkorb-Knopf
   daneben aus der Zeile drängen, statt selbst umzubrechen. */
.k-motiv-karte__legende span{
  font-family:var(--display);font-size:1.0625rem;
  min-width:0;overflow-wrap:anywhere;
}
/* Korrekturauftrag 25.08.2026, Punkt 14: gewählter Stil als Anzeige statt
   erneuter Abfrage, mit kleinem Ändern-Link. */
.k-stil-anzeige{font-size:.9375rem;color:var(--text-dunkel);display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
.k-stil-aendern{
  background:none;border:0;padding:0;font:inherit;font-size:.8125rem;cursor:pointer;
  color:var(--zier-dunkel);text-decoration:underline;text-underline-offset:.2em;
  min-height:44px;display:inline-flex;align-items:center;
}
.k-stil-aendern:hover{color:var(--text-dunkel)}
.k-feld-label{font-size:.8125rem;font-weight:500;color:var(--text-dunkel-leise);margin:.9rem 0 .4rem}

/* Ein eigener, klar beschrifteter Kasten je bestelltem Bild (Auftrag "Foto-
   Upload eindeutig pro Artikel zuordnen", 24.08.2026) -- dieselbe Kastung
   wie .k-posten, damit sich der Uploadbereich sichtbar von den übrigen
   Feldern der Position abhebt. */
.k-foto-bereich{
  border:1px solid var(--buehne-linie);border-radius:var(--radius);
  background:#FBF8F2;padding:1rem 1.1rem;margin-top:1rem;
}
.k-foto-bereich + .k-foto-bereich{margin-top:1.25rem}
.k-foto-bereich__titel{
  font-family:var(--display);font-size:1rem;font-weight:400;
  color:var(--text-dunkel);margin:0 0 .85rem;
}

.k-posten{border:1px solid var(--buehne-linie);border-radius:var(--radius);background:#FBF8F2;padding:1rem 1.1rem}
.k-zeile{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;font-size:.9375rem}
.k-zeile--versand{color:var(--text-dunkel-leise);border-top:1px solid var(--buehne-linie);margin-top:.5rem;padding-top:.65rem}
.k-zeile--steuer{color:var(--text-dunkel-leise);font-size:.8125rem}
.k-zoll-hinweis{margin-top:.35rem}
.k-video{margin-top:1.25rem}

/* Letzte Gelegenheit fürs Bewegtbild im Zahlungsschritt. Eigenes ruhiges
   Feld, damit es sich vom übrigen Formular abhebt — .zusatz liefert
   bereits die anklickbare Zeile darin. */
.k-video--letzte{
  margin-bottom:1.5rem;padding:1rem 1.1rem .25rem;
  background:var(--buehne-weich);
  border:1px solid var(--buehne-linie);
  border-radius:var(--radius);
}
.k-video--letzte .zusatz{margin-block:0 .9rem}

.k-video__frage{
  font-size:1rem;line-height:1.5;margin:0 0 .75rem;
  color:var(--text-dunkel-leise);
}

.k-themen{display:flex;flex-wrap:wrap;gap:.5rem}
.k-thema{
  min-height:44px;padding:.6rem 1.1rem;background:#FBF8F2;cursor:pointer;
  border:1px solid var(--bedien-hell);border-radius:var(--radius);
  font-size:.875rem;color:var(--text-dunkel);
  transition:border-color var(--t-schnell) var(--kurve),background var(--t-schnell) var(--kurve);
}
.k-thema:hover{border-color:var(--text-dunkel-leise)}
.k-thema[aria-pressed="true"]{background:var(--grund);color:var(--text);border-color:var(--grund)}

.k-felder{display:grid;gap:1.1rem}
@media(min-width:640px){
  .k-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-feld--breit{grid-column:1 / -1}
  .k-feld--schmal{max-width:9rem}
}
.k-feld{margin:0;display:flex;flex-direction:column;gap:.35rem}
.k-feld label{font-size:.8125rem;font-weight:500;color:var(--text-dunkel)}
.k-feld input,.k-feld select,.k-feld textarea{
  min-height:44px;width:100%;max-width:100%;min-width:0;
  padding:.6rem .8rem;font:inherit;font-size:.9375rem;
  border:1px solid var(--bedien-hell);border-radius:var(--radius);
  background:#FBF8F2;color:var(--text-dunkel);
}
.k-feld textarea{min-height:120px;resize:vertical}
/* Auftrag "Kasse Schritt 2 bricht auf dem Handy aus dem Bildschirm" (Nachtrag
   6, 03.09.2026): das native Dateifeld hat auf mehreren mobilen Browsern eine
   inhaltsbestimmte Eigenbreite (Auswahl-Knopf + Dateiname/"Keine Datei
   ausgewählt"-Text nebeneinander), die width:100% oben allein nicht immer
   bändigt -- die häufigste Einzelursache für Überbreite auf dem Handy. */
.k-feld input[type="file"]{max-width:100%}
/* Auftrag "Kaufbremsen in Kasse und Konfigurator beheben", 05.09.2026,
   Punkt 8: das rohe Browser-Dateifeld ("Dateien auswählen · Keine
   ausgewählt") blieb bisher SICHTBAR neben dem gestalteten Label und sagte
   "Keine ausgewählt", auch wenn längst Fotos in der Liste darunter standen
   -- verwirrend/nach Fehler aussehend. Das <input> bleibt technisch und für
   Tastatur/Screenreader über das <label for="..."> erreichbar (Klick auf
   das Label öffnet den Dateidialog, wie bei jedem <label for="Dateifeld">),
   nur optisch verschwindet es -- display:none wäre hier unproblematisch
   (das Label bleibt der Bedienweg), clip-Technik zusätzlich, damit ein
   Tab-Sprung direkt auf das Feld es nicht unsichtbar lässt. */
.up-datei-eingabe{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.k-feld input:focus-visible,.k-feld select:focus-visible,.k-feld textarea:focus-visible{outline:2px solid var(--grund);outline-offset:1px}
.k-feld input[aria-invalid="true"]{border-color:#9B2C2C}
.k-hilfe{font-size:.75rem;color:var(--text-dunkel-leise)}
.k-fehler{font-size:.8125rem;color:#9B2C2C}

/* ----------------------------------------------------------------------------
   "In den Warenkorb" — Hinweis, wenn eine Pflicht-Auswahl fehlt
   (Auftrag 18.09.2026)
   ----------------------------------------------------------------------------
   Der Hinweis über dem Knopf gab es schon, er war nur sehr klein. Jetzt ein
   richtiger Kasten in voller Knopfbreite, 1 rem, mit Rahmen in derselben
   Farbe wie die Schrift -- keine neue Farbe erfunden.
   Kontrast #9B2C2C auf der hellen Bühne (--buehne, #F4EEE3): 6,52:1, also
   deutlich über den geforderten 4,5:1.

   Die eine Zeile darunter ist der Grund, warum der Hinweis überhaupt auf
   einen Fingertipp reagieren kann: ein gesperrter Knopf verschluckt den
   Klick, ohne dass irgendjemand davon erfährt. Mit pointer-events:none
   landet er auf der Knopfreihe darum herum, wo layout.js ihn abgreift.
   Am Aussehen ändert sich dadurch nichts -- anklickbar war der gesperrte
   Knopf vorher auch nicht.
   ---------------------------------------------------------------------------- */
#konf-warenkorb-hinweis:not([hidden]){
  display:block;margin:0 0 .75rem;padding:.7rem .85rem;
  border:1px solid currentColor;border-radius:var(--radius);
  font-size:1rem;line-height:1.5;font-weight:600;
}
#konf-warenkorb-hinzu:disabled{pointer-events:none}

/* Die fehlende Auswahl wird zwei Sekunden lang umrandet. --gold-dunkel ist
   laut Farbtabelle oben genau das Gold, das auf heller Bühne trägt
   (4,36:1 -- für eine Umrandung, kein Text, verlangt WCAG 3:1). Kein
   Blinken, keine Bewegung: nur ein ruhiger Rahmen, der wieder verschwindet. */
.konf__fehlt{
  outline:3px solid var(--gold-dunkel);outline-offset:6px;
  border-radius:var(--radius);
}
.k-foto-zwei{display:grid;gap:.75rem;margin-top:.35rem}
@media(min-width:520px){.k-foto-zwei{grid-template-columns:repeat(2,minmax(0,1fr))}}
.k-foto-zwei label{font-size:.8125rem;font-weight:500;color:var(--text-dunkel);display:block;margin-bottom:.35rem}


/* Hinweis im Konfigurator, wann das Foto drankommt. Steht dort, wo die Frage
   entsteht — direkt über den Knöpfen. */
.konf__fotohinweis{
  max-width:46ch;margin:1.1rem 0 0;
  font-size:.9375rem;line-height:1.55;color:var(--text-dunkel-leise);
}

.k-kenntnis{
  display:flex;gap:.7rem;align-items:flex-start;margin:1.25rem 0;
  font-size:.875rem;line-height:1.5;color:var(--text-dunkel);cursor:pointer;max-width:56ch;
}
.k-kenntnis input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--grund)}

/* Adressabgleich in Schritt 4 vor der Zahlung (Auftrag "Zwei Mängel in der
   Kasse", 31.08.2026) -- dieselbe Kastung wie .k-pflicht, damit sich beide
   Boxen als zusammengehörige Prüf-vor-dem-Bezahlen-Gruppe lesen. */
.k-adress-uebersicht{
  border:1px solid var(--buehne-linie);border-radius:var(--radius);
  padding:1rem 1.1rem;background:#FBF8F2;margin:1rem 0 1.25rem;
}
.k-adress-uebersicht .k-feld-label{margin-top:0}
.k-adresse-text{font-size:.9375rem;color:var(--text-dunkel);white-space:pre-line;margin:0 0 .6rem}

/* Pflichtangaben unmittelbar über dem Bestellknopf — § 312j Abs. 3 BGB.
   Reihenfolge und Nähe zum Knopf sind vorgeschrieben, nicht Geschmack. */
.k-pflicht{
  border:1px solid var(--grund);border-radius:var(--radius);
  padding:1rem 1.1rem;background:#FBF8F2;margin-bottom:1.25rem;
}
.k-pflicht__zeile{display:flex;justify-content:space-between;gap:1rem;font-size:.9375rem;margin:.25rem 0}
.k-pflicht__summe{border-top:1px solid var(--buehne-linie);margin-top:.6rem;padding-top:.6rem;font-size:1.0625rem}
.k-pflicht__mini{font-size:.75rem;color:var(--text-dunkel-leise);margin-top:.7rem;line-height:1.45}

.k-abschluss{border:1px solid var(--buehne-linie);border-radius:var(--radius);padding:1rem;margin-bottom:1.25rem}
.k-abschluss pre{overflow-x:auto;font-size:.75rem;background:#F1EDE4;padding:.7rem;border-radius:2px;margin-top:.6rem}

.k-knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.75rem}
.k-knoepfe .knopf:disabled{opacity:.5;cursor:not-allowed}

/* Korrekturauftrag 25.08.2026, Punkt 13: alles UNTERHALB der Summe wird in
   der Kaufstrecke mittig zentriert -- die Preiszeilen selbst (.k-pflicht,
   .preis__zeile) bleiben davon unberührt (Bezeichnung links, Betrag
   rechts). Über body[data-seite="kasse"] statt einer allgemeinen Klasse
   verdrahtet, damit dieselben Bausteine (.k-versprechen, .k-knoepfe,
   .zahlarten) auf der Danke-Seite und der Foto-Notfallseite (upload.html,
   trägt ebenfalls .kasse für die helle Bühne) unverändert bleiben. */
body[data-seite="kasse"] .k-knoepfe{justify-content:center}
body[data-seite="kasse"] .k-versprechen{text-align:center}
body[data-seite="kasse"] .k-versprechen li{padding-left:0}
body[data-seite="kasse"] .k-versprechen li::before{content:none}
body[data-seite="kasse"] .zahlarten{text-align:center}
body[data-seite="kasse"] .zahlarten__reihe{justify-content:center}
/* Auftrag "Kasse auf dem Handy -- Zweispalten-Raster bricht nicht um"
   (Nachtrag 8, 03.09.2026), Punkt 3: #k-rechte-zeile ist die
   Bildrechte-Checkbox in Schritt 2 (Motiv & Foto) -- sie steht nicht
   "unterhalb der Summe" wie die übrigen hier zentrierten Bausteine
   (.k-versprechen/.k-knoepfe/.zahlarten gehören zur ständigen
   Bestellübersicht bzw. zum Zahlungsabschluss), sondern mitten im
   Formular. Die Zentrierung dieser einen Zeile war ein unbeabsichtigter
   Nebentreffer derselben Regel: justify-content:center rückte die
   Checkbox von ihrem Text weg zur Mitte, margin-inline:auto zog die ganze
   (durch .k-kenntnis max-width:56ch schmalere) Zeile mittig -- bei
   längerem, umbrechendem Text wirkte das wie ein Herausragen nach links.
   Diese Zeile bleibt jetzt bei der normalen, linksbündigen
   .k-kenntnis-Vorgabe (kein eigener Zusatz nötig). */

.k-neben{
  border:1px solid var(--buehne-linie);border-radius:var(--radius);
  background:#FBF8F2;padding:1.25rem;position:sticky;top:5.5rem;
}
.k-neben h2{font-size:1rem;margin-bottom:.9rem}
.k-summe{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 1rem}
.k-summe dt{font-size:.8125rem;color:var(--text-dunkel-leise);max-width:14ch}
.k-summe dd{margin:0;font-size:1.35rem;font-weight:500;font-variant-numeric:tabular-nums}
/* Für die Bestellnummer auf der Danke-Seite: Label und Wert liegen dicht
   beieinander, statt wie bei einer Preiszeile weit auseinandergezogen und
   überdimensioniert zu sein. */
.dk-nummer{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:0 0 1rem}
.dk-nummer dt{font-size:.8125rem;color:var(--text-dunkel-leise)}
.dk-nummer dd{margin:0;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}
.k-versprechen{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.8125rem;color:var(--text-dunkel-leise)}
/* Auf der Danke-Seite steht die Liste direkt unter dem Vorspann und klebte
   daran. In der Kassen-Seitenspalte sitzt sie dagegen unter einer
   Überschrift und braucht den Abstand nicht. */
.kasse .huelle > .k-versprechen{margin-top:1.5rem}
.k-versprechen li{padding-left:1.1rem;position:relative}
.k-versprechen li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--zier-dunkel)}

/* ============================================================
   QUERVERWEIS — eine leise Zeile am Ende jeder Themenwelt, damit die Seite
   nicht in der Sackgasse endet. Kein eigener Abschnitt, keine Kacheln:
   fuenf Kacheln brechen auf vier plus eine um und sehen falsch aus.
   ============================================================ */
.quer{
  background:var(--grund);border-top:1px solid var(--grund-linie);
  padding-block:1.6rem;
}
.quer__zeile{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.1rem;
}
.quer__wort{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zier);margin:0;
}
.quer__liste{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;
}
.quer__liste a{
  font-size:.875rem;color:var(--text-leise);text-decoration:none;
  border-bottom:1px solid transparent;padding-block:.25rem;
  transition:color var(--t-schnell) var(--kurve),border-color var(--t-schnell) var(--kurve);
}
.quer__liste a:hover{color:var(--text);border-bottom-color:var(--zier)}


/* Das Kleingedruckte unter dem Konfigurator. Bewusst klein und leise —
   es soll den Preis erklären, nicht ihn verteidigen. */
.konf__enthalten{
  margin-top:1.4rem;max-width:56ch;
  font-size:.75rem;line-height:1.55;color:var(--text-dunkel-leise);
}

/* --- Foto-Upload: Liste der gewählten Dateien -------------------------- */
.up-liste{list-style:none;margin:.75rem 0 .25rem;padding:0;display:flex;flex-direction:column;gap:.35rem;max-width:100%}
.up-liste li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem .75rem;border:1px solid var(--grund-linie);border-radius:.4rem;
  font-size:.92rem;background:rgba(0,0,0,.02);min-width:0;max-width:100%}
/* Auftrag "Kasse Schritt 2 bricht auf dem Handy aus dem Bildschirm" (Nachtrag
   6, 03.09.2026): der Dateiname steht in einem unklassierten <span> (siehe
   fotoZeichnen() in kasse.js) -- als Flex-Kind darf er ohne min-width:0 nie
   schmaler werden als der Dateiname selbst, ein langer Name mit Unterstrichen
   oder Bindestrichen hat kein Leerzeichen zum normalen Umbrechen und trieb
   dadurch Zeile, Fieldset und Seite über die Bildschirmbreite. */
.up-liste li > span:first-child{min-width:0;overflow-wrap:anywhere;flex:1}
.up-weg{border:0;background:none;cursor:pointer;font-size:1.15rem;line-height:1;
  padding:0 .25rem;color:var(--text-dunkel-leise);flex:none}
.up-weg:hover{color:var(--text-dunkel)}

/* Rechtstexte enthalten echte Zeilenumbrüche (Anschriften, Formulare).
   Ohne pre-line würden sie zu einer Textwurst zusammenlaufen. */
.textseite p, .textseite .luecke-block{white-space:pre-line}

/* --- Bewertungen am Kaufpunkt: Gesamtschnitt-Zeile + drei Karten -------- */
.stimme__schnitt{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:2rem}
.stimme__schnittzahl{font-family:var(--display);font-size:1.5rem;font-variant-numeric:tabular-nums}
.stimme__schnittbasis{font-size:.9375rem;color:var(--text-leise)}
/* Bewertungstext hier so groß und so kontrastreich wie der Fließtext der
   Seite — anders als die übrigen, blasseren .rez-Vorkommen (Startseite,
   bewertungen.html), die bewusst unverändert bleiben. */
.rezensionen--kompakt .rez blockquote{font-size:1rem;color:var(--text)}
@media(min-width:900px){
  .rezensionen.rezensionen--kompakt{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- Bewertungsseite --------------------------------------------------- */
.bw-sterne{border:0;padding:0;margin:0 0 1.5rem}
.bw-sterne legend{font-weight:500;margin-bottom:.4rem}
/* Reihenfolge im HTML ist 5→1, damit sich per CSS alle Sterne links vom
   gewählten mit einfärben lassen. Angezeigt wird sie deshalb rückwärts. */
.bw-sterne__reihe{display:inline-flex;flex-direction:row-reverse;gap:.15rem}
.bw-sterne__reihe label{cursor:pointer;font-size:2rem;line-height:1;color:var(--bedien-hell)}
.bw-sterne__reihe input{position:absolute;opacity:0;width:1px;height:1px}
.bw-sterne__reihe label:hover,
.bw-sterne__reihe label:hover ~ label,
.bw-sterne__reihe input:checked ~ span,
.bw-sterne__reihe label:has(input:checked),
.bw-sterne__reihe label:has(input:checked) ~ label{color:var(--gold)}
.bw-sterne__reihe input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px}

.bw-code{margin-top:2.5rem;padding:1.5rem;border:1px solid var(--buehne-linie);
  border-radius:.6rem;background:rgba(255,255,255,.5)}
.bw-code h2{font-size:1.15rem;margin:0 0 .75rem}
.bw-code__wert{font-family:var(--mono,monospace);font-size:1.6rem;letter-spacing:.08em;
  margin:0 0 1rem;user-select:all}

/* --- Rabattcode an der Kasse ------------------------------------------- */
.k-gutschein__reihe{display:flex;gap:.5rem;align-items:stretch;flex-wrap:wrap}
.k-gutschein__reihe input{flex:1 1 12rem;text-transform:uppercase;letter-spacing:.06em}
.k-gutschein__reihe .knopf{flex:0 0 auto;padding-inline:1.1rem}

/* --- Galerie: Hinweis, wenn ein Filter noch keine Motive hat ----------- */
/* 24.08.2026: war fest auf --text-dunkel-leise verdrahtet (2,31:1 auf
   dunklem Grund -- praktisch unlesbar), seit die Galerie- und
   Bewertungs-Filterzeile nicht mehr auf hellem Grund liegen (Auftrag
   "Helle Kästen entfernen"). Beide Fundstellen (Galerie, Bewertungen) sind
   jetzt dunkel, keine hell-Variante mehr nötig. */
.werke-leer{margin-top:2rem;max-width:52ch;color:var(--text-leise)}
/* "Eigenes Foto"-Filter: kein Kachelraster, sondern ein einzelner,
   gestalteter Hinweisblock in derselben Breite wie das Raster darüber
   (Auftrag "Filter 'Eigenes Foto' aufnehmen", 24.08.2026). Bordüre/
   Hintergrund/Radius wie die übrigen Karten im Projekt (.k-motiv-karte,
   .werk), keine neuen Werte. */
.eigenes-hinweis{
  margin-top:2rem;border:1px solid var(--grund-linie);border-radius:var(--radius-gross);
  background:var(--grund-weich);padding:clamp(2rem,calc(5vw / var(--zf,1)),3.5rem) 1.5rem;text-align:center;
}
.eigenes-hinweis__inhalt{max-width:44rem;margin-inline:auto}
.eigenes-hinweis__inhalt h2{font-size:clamp(1.5rem,calc(3.5vw / var(--zf,1)),2.2rem)}
.eigenes-hinweis__inhalt p{color:var(--text-leise);margin-top:1rem}
.eigenes-hinweis__inhalt .knopf{margin-top:1.75rem}

/* ============================================================================
   „So sieht es bei unseren Kunden aus“ — Kundenfotos aus echten Bewertungen
   ----------------------------------------------------------------------------
   Auftrag „Bewertungsprogramm + Kundenfoto-Block“. Steht auf jeder
   Themenwelt-Seite direkt unter „Beispiele aus diesem Stil“ und wechselt mit
   den Stil-Knöpfen mit. Gerüst: kundenstimmenHTML() in layout.js, Inhalt:
   kundenstimmenEinbetten() in bewertungen-daten.js.

   Am Handy eine seitlich wischbare Reihe, am Rechner (ab 900px, derselbe
   Umbruchpunkt wie beim Seitenkopf) ein umbrechendes Raster mit mehreren
   Einträgen nebeneinander. Die Kachelbreite (240px) ist bewusst dieselbe wie
   bei den Beispielbildern darüber (.wandel-weitere__stueck), damit beide
   Reihen am Handy gleich breit laufen.
   Kein KI-Hinweis an diesen Bildern — der steht einmal je Seite im Fußbereich.
   ============================================================================ */
.kundenfotos__titel{margin-bottom:1.75rem;text-align:center}
.kundenfotos__reihe{display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:.9rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.kundenfoto{flex:0 0 240px;margin:0;scroll-snap-align:start}
/* object-fit:cover statt fill — ein Foto wird nie verzerrt, höchstens mittig
   beschnitten. Das Seitenverhältnis entspricht dem, in dem
   bilder-einpflegen.py Bewertungsfotos ablegt (4:5, 900x1125). */
.kundenfoto__bild{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius);background:var(--grund-weich);cursor:pointer}
.kundenfoto__inhalt{margin-top:.9rem}
.kundenfoto__text{margin:0;font-size:.9375rem;color:var(--text-leise)}
.kundenfoto__wer{margin-top:.6rem;font-size:.8125rem;color:var(--text-leise)}
.kundenfoto__inhalt .sterne{margin-top:.35rem}
@media(min-width:900px){
  .kundenfotos__reihe{flex-wrap:wrap;overflow-x:visible;justify-content:center;
    padding-bottom:0;scroll-snap-type:none}
}

/* ============================================================================
   HERO AM HANDY — Reihenfolge (Auftrag "Stil-Landingpages — Kern", Teil C)
   ----------------------------------------------------------------------------
   Ersetzt die erste Fassung vom 16.09.2026 (Hauptmedium direkt unter die
   Knöpfe). Neue Reihenfolge bis 899px:

     1 Beleg · 2 Kicker · 3 Überschrift · 4 Hauptmedium · 5 Preiszeile ·
     6 "Weiter zum Konfigurator" · 7 Fakten-Zeile · 8 Zahlarten ·
     9 Absatz · 10 Beschreibungstext des Stils · 11 "Galerie ansehen" ·
     12 die drei Schlagworte · 13 Trenner · 14 "Stile" + Stil-Auswahl

   Dafür reicht display:contents auf der Textspalte allein nicht mehr: Punkt 4
   und 10 stecken zusammen in .seitenkopf__bildspalte, Punkt 6 und 11 zusammen
   in .seitenkopf__knoepfe. Beide werden am Handy deshalb ebenfalls aufgelöst,
   erst dadurch sind alle vierzehn Teile einzeln sortierbar. Am Rechner
   (ab 900px) bleibt beides ein normaler Container -- dort gilt die Anordnung
   aus Teil B (links Text, rechts Hauptmedium und Beschreibung nebeneinander).

   Abstände: 12px gleichmäßig über row-gap statt über die margin-top-Werte der
   einzelnen Elemente -- die säßen nach dem Umsortieren an der falschen Stelle.
   ============================================================================ */
@media(max-width:899px){
  .seitenkopf__textspalte,
  .seitenkopf__bildspalte,
  .seitenkopf__knoepfe{display:contents}
  .seitenkopf__gitter{row-gap:.75rem}
  /* ------------------------------------------------------------------------
     REIHENFOLGE AM HANDY -- reparierter Auswahlpfad (Kaufprueflauf
     21.09.2026, B1; Auftrag "Kaufweg verkuerzen", Teil 1).

     Hier stand bis zum 21.09.2026 durchgehend ".seitenkopf__gitter > h1"
     usw. -- mit dem Auswahlpfeil ">". Getroffen hat das NIE etwas: die
     Ueberschrift, der Absatz, die Knoepfe und das Hauptbild sind Kinder von
     .seitenkopf__textspalte / .seitenkopf__bildspalte / .seitenkopf__knoepfe /
     .seitenkopf__stilzeile. Diese vier stehen am Handy auf display:contents
     und verschwinden damit aus dem KASTENBAUM -- ihre Kinder werden zu den
     echten Gitterkindern. Der Auswahlpfeil ">" richtet sich aber nach dem
     DOKUMENTBAUM, und dort sitzen die vier Behaelter unveraendert dazwischen.
     Folge: jedes Element behielt order:0, es galt die Reihenfolge aus der
     Datei, und das Hauptbild stand am Handy erst bei 1.048 px -- weit unter
     dem ersten Bildschirm.

     Jetzt Nachfahren-Auswahlpfade ohne ">". Sie sind EINZELN aufgezaehlt und
     nicht als "*" geschrieben: ein "*" traefe auch die Kinder der
     Flex-Reihen im Kopfbereich (Stil-Chips in .filter--stile, Bildmarken in
     .wandel__marken) und setzte dort eine fremde Reihenfolge.

     Reihenfolge (Auftrag Teil 1 und Teil 13): Bewertungsbeleg, Augenbraue,
     Ueberschrift, HAUPTBILD, Absatz, Preiszeile, Hauptknopf -- danach der
     Rest. Die Zahlungssymbole entfallen am Handy ganz (Teil 13.1), sie
     stehen weiterhin am Ende des Konfigurators, in der Kasse und im Fuss.
     ------------------------------------------------------------------------ */
  .seitenkopf__gitter [data-baustein="beleg"],
  .seitenkopf__gitter .beleg,
  .seitenkopf__gitter .augbraue,
  .seitenkopf__gitter h1,
  .seitenkopf__gitter .seitenkopf__text,
  .seitenkopf__gitter .wandel-bereich,
  .seitenkopf__gitter .wandel,
  .seitenkopf__gitter [data-baustein="wandel"],
  .seitenkopf__gitter [data-baustein="preisanker"],
  .seitenkopf__gitter .preisanker,
  .seitenkopf__gitter .knopf,
  .seitenkopf__gitter .aktion,
  .seitenkopf__gitter .hero-fakten,
  .seitenkopf__gitter .hero-zahlarten,
  .seitenkopf__gitter .seitenkopf__beschreibung,
  .seitenkopf__gitter [data-baustein="unikat"],
  .seitenkopf__gitter .unikat,
  .seitenkopf__gitter .seitenkopf__trenner,
  .seitenkopf__gitter .seitenkopf__stile-titel,
  .seitenkopf__gitter .seitenkopf__stile,
  .seitenkopf__gitter .seitenkopf__wunschzeile{margin-top:0}
  .seitenkopf__gitter .knopf{width:100%;text-align:center;justify-content:center}
  .seitenkopf__gitter [data-baustein="beleg"],
  .seitenkopf__gitter .beleg{order:1}
  .seitenkopf__gitter .augbraue{order:2}
  .seitenkopf__gitter h1{order:3}
  .seitenkopf__gitter .wandel-bereich,
  .seitenkopf__gitter .wandel,
  .seitenkopf__gitter [data-baustein="wandel"]{order:4}
  .seitenkopf__gitter .seitenkopf__text{order:5}
  .seitenkopf__gitter [data-baustein="preisanker"],
  .seitenkopf__gitter .preisanker{order:6}
  .seitenkopf__gitter .knopf--gold{order:7}
  .seitenkopf__gitter .aktion{order:8}
  .seitenkopf__gitter .hero-fakten{order:9}
  /* Teil 13.1 (B8): acht Zahlungssymbole standen am Handy bei 702 px im
     ersten Bildschirm und haben Bild und Preis hinausgedraengt. Am Rechner
     bleiben sie unveraendert stehen -- diese Regel gilt nur bis 899 px. */
  .seitenkopf__gitter .hero-zahlarten{display:none}
  .seitenkopf__gitter .seitenkopf__beschreibung{order:10}
  .seitenkopf__gitter .knopf--umriss{order:11}
  .seitenkopf__gitter [data-baustein="unikat"],
  .seitenkopf__gitter .unikat{order:12}
  .seitenkopf__gitter .seitenkopf__trenner{order:13;margin-top:.75rem}
  .seitenkopf__gitter .seitenkopf__stile-titel{order:14}
  .seitenkopf__gitter .seitenkopf__stile{order:15}
  /* Am Handy loest display:contents die .seitenkopf__stilzeile auf -- ihre
     Kinder werden dadurch selbst zu Kindern des Hero-Gitters und brauchen
     jedes eine eigene Reihenfolge. Ohne diese Zeile stuende die Wunsch-Zeile
     am Handy ganz oben im Kopfbereich statt unter den Stil-Chips
     (Auftrag 19.09.2026, Teil 3). */
  .seitenkopf__gitter .seitenkopf__wunschzeile{order:16}
}
/* Hier stand bis zum 21.09.2026 eine schliessende Klammer zu viel. Der Media-Block aus Zeile 3087 wird bereits eine Zeile darueber geschlossen. Chrome brach an dieser Stelle das Lesen der Datei ab -- die restlichen 318 Zeilen (darunter die Breitenregel --max:1600px vom 16.09.2026) kamen nie im Browser an. Zeile bewusst nicht geloescht, damit die Zeilennummern der Datei gleich bleiben. */

/* ============================================================================
   TEIL B — BREITE COMPUTER-ANSICHT, LUFT AM HANDY
   ----------------------------------------------------------------------------
   Auftrag "Stil-Landingpages — Kern", 16.09.2026, Teil B; Regel steht seitdem
   auch im Skill canvasory-design unter "Seitenbreite am Rechner".

   Der Rahmen (--max) stand auf 1320px. Ab 900px steht er jetzt auf 1600px --
   unterhalb davon ändert sich nichts, weil eine Höchstbreite erst greift,
   wenn das Fenster breiter ist als sie. Fließtext wird dadurch NICHT breiter:
   .seitenkopf__text (52ch), .vorspann (56ch), .textseite und .faq details p
   haben längst ihre eigene Lesebreite; die beiden 74ch-Werte sind hier auf
   die vom Auftrag geforderten 72ch gezogen.
   ============================================================================ */
@media(min-width:900px){
  :root{--max:1600px}
  /* Hero und Bildbereiche dürfen bis an den Rand: 48px statt der bis zu 72px
     aus --rand. */
  .seitenkopf > .huelle{padding-inline:3rem}
}
.textseite{max-width:72ch}
.faq details p{max-width:72ch}

/* Rechter Hero-Bereich am Rechner: Hauptmedium (320px) und der goldumrandete
   Beschreibungstext NEBENEINANDER statt untereinander. */
@media(min-width:900px){
  .seitenkopf__gitter{grid-template-columns:minmax(0,1fr) minmax(0,660px)}
  .seitenkopf__bildspalte{display:grid;grid-template-columns:320px minmax(0,1fr);
    gap:1.75rem;align-items:start}
  .seitenkopf__bildspalte .wandel,
  .seitenkopf__bildspalte [data-baustein="wandel"]:empty{max-width:320px;width:100%}
  .seitenkopf__beschreibung{margin-top:0}
}

/* Beispiele aus diesem Stil: am Rechner fünf echte Spalten statt einer
   umbrechenden Reihe fester 240px-Kacheln. Die Ausgangsregel
   (.wandel-weitere__stueck{flex:0 0 240px}) steht in einem Bereich, der an
   eine "ENTSCHEIDUNG SASKIA" grenzt -- sie wird deshalb NICHT geändert,
   sondern hier nur für den Rechner überschrieben. Am Handy bleibt alles, wie
   es war. */
@media(min-width:900px){
  .wandel-weitere__reihe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:1.25rem;align-items:start}
  .wandel-weitere__stueck{flex:none;width:auto}
}

/* Handy: überall derselbe Innenabstand von 24px, Knöpfe über die volle
   Innenbreite (nicht randlos), Abschnittsabstand bleibt bei mindestens 44px
   (--luft beginnt bei 2.75rem = 44px). */
@media(max-width:899px){
  :root{--rand:1.5rem}
  .seitenkopf__knoepfe{flex-direction:column;align-items:stretch}
  .seitenkopf__knoepfe .knopf{width:100%;text-align:center;justify-content:center}
}

/* ============================================================================
   TEIL E — Fakten-Zeile und Zahlarten unter dem Kaufknopf
   ----------------------------------------------------------------------------
   Schriftgröße .75rem = dieselbe wie die kleinste vorhandene Hinweiszeile
   (.wandel-weitere__hinweis). Farbe --text-leise: 8,1:1 auf --grund, also
   deutlich über den geforderten 4,5:1 (--text-gedaempft mit 4,95:1 bleibt dem
   gesetzlich vorgeschriebenen KI-Hinweis vorbehalten).
   ============================================================================ */
.hero-fakten{font-size:.75rem;line-height:1.6;color:var(--text-leise);
  margin-top:.75rem;max-width:60ch}
.hero-zahlarten{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .55rem;
  margin-top:.6rem}
.hero-zahlart{height:18px;width:auto;opacity:.75;border-radius:2px}
/* Apple Pay ist weiß auf durchsichtig -- auf dunklem Grund ohne Chip unsichtbar.
   Dieselbe Behandlung wie in der Fußzeile (zahlartChipKlasse in layout.js). */
.hero-zahlart.zahlart-dunkel-chip{background:#FFFFFF;padding:1px 3px;height:20px}

/* ============================================================================
   TEIL D — Kundenfoto-Laufband
   ----------------------------------------------------------------------------
   .kundenfotos__bahn ist die Sichtfläche (scrollt), .kundenfotos__reihe der
   Inhalt darin. Am Rechner sind vier Einträge gleichzeitig zu sehen (Teil B),
   am Handy einer in der Breite der Beispielbilder (240px).
   scroll-snap ist hier bewusst AUS: es würde gegen die laufende Bewegung
   arbeiten und das Band bei jedem Bild einrasten lassen.
   ============================================================================ */
.kundenfotos__bahn{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.kundenfotos__bahn::-webkit-scrollbar{display:none}
.kundenfotos__bahn--laeuft{cursor:grab}
.kundenfotos__bahn--laeuft:active{cursor:grabbing}
.kundenfotos__reihe{display:flex;gap:1.5rem;padding-bottom:.9rem;
  scroll-snap-type:none;width:max-content}
.kundenfoto{flex:0 0 240px;margin:0}
/* Name des Stils klein unter dem Bild (Auftrag 18.09.2026, Teil B2).
   .75rem und die gedämpfte Textfarbe stehen so im Auftrag; derselbe Token
   wie beim KI-Hinweis, damit keine zweite gedämpfte Farbe entsteht. */
.kundenfoto__stil{margin:.5rem 0 0;text-align:center;font-size:.75rem;
  color:var(--text-gedaempft)}
@media(min-width:900px){
  /* Kacheln 220px breit, Abstand 1.5rem (= 24px) -- Auftrag 18.09.2026,
     Teil B4. Vorher war die Kachel ein Viertel der Breite; bei nur zwei oder
     drei Fotos wurden daraus riesige Kacheln. */
  .kundenfoto{flex:0 0 220px}
  .kundenfotos__reihe{width:auto;min-width:100%}
  /* Ein bis sieben Fotos: kein Laufband, ruhige Reihe MITTIG, Umbruch
     ebenfalls mittig. */
  .kundenfotos__bahn:not(.kundenfotos__bahn--laeuft) .kundenfotos__reihe{
    flex-wrap:wrap;justify-content:center}
}
/* Läuft das Band, darf die Reihe unter KEINEN Umständen umbrechen -- sonst
   steht der geklonte zweite Satz untereinander und der nahtlose Übergang
   zerfällt. Höhere Spezifität als die ältere Regel weiter oben im Blatt
   (.kundenfotos__reihe im 900px-Block), die für den ruhenden Fall gedacht
   war und sonst auch hier greifen würde. */
.kundenfotos__bahn--laeuft .kundenfotos__reihe{flex-wrap:nowrap;
  width:max-content;justify-content:flex-start;overflow-x:visible}
.kundenfotos__knopf{margin-top:1.75rem;text-align:center}
@media(prefers-reduced-motion:reduce){
  .kundenfotos__bahn--laeuft{cursor:auto}
}

/* ============================================================================
   TEIL F1 — Stil-Chips sind jetzt Links
   ----------------------------------------------------------------------------
   Aus <button> wurde <a href> (siehe stile.js): jeder Stil hat eine eigene
   Adresse. Damit sich optisch NICHTS ändert, bekommt .filter a hier exakt
   dieselben Regeln wie .filter button; der aktive Chip ist statt
   aria-pressed="true" jetzt aria-current="page" -- bei einem Link die
   richtige Auszeichnung -- und wird genauso gold hervorgehoben.
   ============================================================================ */
.filter a{
  min-height:44px;display:inline-flex;align-items:center;
  padding:.55rem 1.05rem;background:transparent;
  border:1px solid var(--bedien-dunkel);border-radius:99px;
  font-size:.8125rem;color:var(--text-leise);cursor:pointer;text-decoration:none;
  transition:border-color var(--t-schnell) var(--kurve),color var(--t-schnell) var(--kurve),background var(--t-schnell) var(--kurve);
}
.filter a:hover{color:var(--text);border-color:var(--text-leise)}
.hell .filter a,.hell-weich .filter a{color:var(--text-dunkel-leise)}
.hell .filter a:hover,.hell-weich .filter a:hover{color:var(--text-dunkel);border-color:var(--text-dunkel-leise)}
/* Wortgleich zu .filter button[aria-pressed="true"] weiter oben -- der
   aktive Chip sieht exakt so aus wie bisher. */
.filter a[aria-current="page"]{
  color:var(--grund);border:0;font-weight:500;
  background-image:
    radial-gradient(120% 180% at 22% -30%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%),
    linear-gradient(176deg,#FBEFD2 0%,#EDD39C 32%,#CFA660 62%,#E2BE80 88%,#F5E4BA 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), inset 0 1px 0 rgba(255,255,255,.75);
}

/* ============================================================================
   TEIL F3 — Acht Gründe
   ----------------------------------------------------------------------------
   Am Rechner 4 × 2, am Handy 2 × 4 (so steht es im Auftrag) -- am Handy also
   zwei Kacheln nebeneinander, deshalb kleinere Schrift und engere Innenabstände.
   ============================================================================ */
.gruende__titel{text-align:center;margin-bottom:2rem}
.gruende__gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media(min-width:900px){
  .gruende__gitter{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
}
.grund{background:var(--grund-weich);border:1px solid var(--grund-linie);
  border-radius:var(--radius);padding:1rem}
@media(min-width:900px){.grund{padding:1.5rem}}
.grund__symbol{display:block;color:var(--gold);margin-bottom:.6rem}
.grund__symbol svg{width:26px;height:26px;display:block}
.grund__titel{font-family:var(--sans);font-size:.9375rem;font-weight:700;line-height:1.35}
.grund__text{margin-top:.4rem;font-size:.8125rem;line-height:1.55;color:var(--text-leise)}
@media(min-width:900px){
  .grund__titel{font-size:1rem}
  .grund__text{font-size:.875rem}
}

/* ============================================================================
   TEIL F4 — Vergleichstabelle
   ----------------------------------------------------------------------------
   Am Rechner drei echte Spalten: Zeilentitel 200px, dann "Häufig" und
   "Bei Canvasory" zu gleichen Teilen. Die rechte Spalte trägt einen leichten
   goldenen Rahmen.
   Am Handy wird dieselbe Tabelle auf Blöcke umgestellt (display:block) --
   jede Zeile untereinander: Zeilentitel, "Häufig"-Satz mit Kreuz,
   "Bei Canvasory"-Satz mit Haken. Nichts wird abgeschnitten, nichts scrollt
   seitlich.
   ============================================================================ */
.vergleich__titel{text-align:center;margin-bottom:2rem}
.vergleich__tabelle{width:100%;border-collapse:collapse;text-align:left}
.vergleich__zeichen{flex:none;display:inline-flex}
.vergleich__zeichen svg{width:16px;height:16px;display:block}
.vergleich__zeichen--kreuz{color:var(--text-gedaempft)}
.vergleich__zeichen--haken{color:var(--gold)}
.vergleich__tabelle td,.vergleich__tabelle th{vertical-align:top}
.vergleich__haeufig,.vergleich__wir{display:flex;gap:.55rem;align-items:flex-start}

@media(min-width:900px){
  .vergleich__tabelle{table-layout:fixed}
  .vergleich__tabelle thead th{font-size:.8125rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--text-leise);font-weight:500;padding:0 1.1rem .9rem}
  .vergleich__tabelle thead th.vergleich__wir{color:var(--gold);display:table-cell}
  .vergleich__ecke{width:200px}
  .vergleich__tabelle tbody th{width:200px;font-size:.9375rem;font-weight:600;
    padding:1.1rem 1.1rem 1.1rem 0;border-top:1px solid var(--grund-linie)}
  .vergleich__tabelle tbody td{font-size:.9375rem;color:var(--text-leise);
    padding:1.1rem;border-top:1px solid var(--grund-linie)}
  .vergleich__tabelle tbody td.vergleich__wir{color:var(--text);
    border-left:1px solid rgba(231,197,126,.35);border-right:1px solid rgba(231,197,126,.35);
    background:rgba(231,197,126,.05)}
  .vergleich__tabelle tbody tr:first-child td.vergleich__wir{border-top-color:rgba(231,197,126,.35)}
  .vergleich__tabelle tbody tr:last-child td.vergleich__wir{border-bottom:1px solid rgba(231,197,126,.35)}
}

@media(max-width:899px){
  /* Gestapelt statt nebeneinander. Die Kopfzeile der Tabelle wird dabei
     ausgeblendet -- welche Spalte gemeint ist, sagt am Handy das Symbol
     (graues Kreuz = häufig, goldener Haken = bei Canvasory), und die
     Vorsilbe steht zusätzlich als Text davor (::before). */
  .vergleich__tabelle,.vergleich__tabelle tbody,.vergleich__tabelle tr,
  .vergleich__tabelle td,.vergleich__tabelle th{display:block;width:auto}
  .vergleich__tabelle thead{display:none}
  .vergleich__tabelle tbody tr{border:1px solid var(--grund-linie);
    border-radius:var(--radius);padding:1rem;margin-top:.75rem;background:var(--grund-weich)}
  .vergleich__tabelle tbody th{font-size:.9375rem;font-weight:700;margin-bottom:.6rem}
  .vergleich__tabelle tbody td{font-size:.875rem;color:var(--text-leise);margin-top:.5rem}
  .vergleich__tabelle tbody td.vergleich__wir{color:var(--text);
    border-left:2px solid var(--gold);padding-left:.75rem}
}
/* Eigene Kennung für die Stil-Chipreihe im Seitenkopf (stile.js) -- die
   Filterreihen auf Galerie und Konfigurator sollen davon unberührt bleiben,
   falls hier später etwas Eigenes dazukommt. */
.filter--stile{margin-top:1rem}
/* "und weitere" hinter den sechs Logos -- gleiche kleine Schrift und Farbe
   wie die Fakten-Zeile darüber (Auftrag 17.09.2026, Teil 1). */
.hero-zahlart-mehr{font-size:.75rem;color:var(--text-leise);text-decoration:underline;
  text-underline-offset:2px;align-self:center}
.hero-zahlart-mehr:hover{color:var(--text)}
.hero-zahlart{height:22px}

/* ============================================================================
   TEIL 3 — Seite "Sonderanfertigung" und das Band auf der Startseite
   ============================================================================ */
.son-knopfzeile{margin-top:1.75rem}
.son-liste{margin-top:1.25rem;display:grid;gap:.7rem;padding-left:1.2rem;
  list-style:disc;color:var(--text-leise);font-size:.9375rem;max-width:72ch}
.son-galerie__titel{text-align:center;margin-bottom:1.75rem}
/* Am Handy eine seitlich wischbare Reihe in der Breite der Beispielbilder
   (240px), am Rechner drei Spalten. */
.son-galerie__reihe{display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:.9rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.son-werk{flex:0 0 240px;margin:0;scroll-snap-align:start}
.son-werk__bild{display:block;width:100%;height:auto;border-radius:var(--radius);
  background:var(--grund-weich);cursor:pointer}
@media(min-width:900px){
  .son-galerie__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    overflow-x:visible;padding-bottom:0;scroll-snap-type:none}
  .son-werk{flex:none}
}
.son-band__inhalt{text-align:center}
.son-band__satz{margin-top:.6rem;color:var(--text-leise);max-width:72ch;
  margin-inline:auto}
.son-band__inhalt .knopf{margin-top:1.25rem}

/* ============================================================================
   TEIL 4 — "Sichere Zahlung" in der Fußzeile
   ============================================================================ */
.fuss__sicher{display:flex;align-items:center;gap:.45rem;font-size:.75rem;
  color:var(--text-leise);margin-bottom:.6rem}
.fuss__schloss{width:14px;height:14px;flex:none;color:var(--gold)}

/* ============================================================================
   TEIL A — Stil-Chips am Rechner als volle, mittige Reihe (17.09.2026)
   ----------------------------------------------------------------------------
   Die Stil-Auswahl saß bisher unten in der linken Textspalte. Jetzt steht sie
   als eigene Zeile über BEIDE Spalten, direkt unter Text- und Bildspalte
   (.seitenkopf__stilzeile, siehe seiten_bauen.py). Nur ab 900px -- am Handy
   löst display:contents den Block wieder auf, dort gilt unverändert die
   Reihenfolge aus dem Kern-Auftrag.
   ============================================================================ */
@media(min-width:900px){
  /* Volle Breite über beide Spalten, direkt unter ihnen. */
  .seitenkopf__stilzeile{grid-column:1 / -1;text-align:center;margin-top:2.5rem}
  /* A5: keine Freifläche unter dem Hauptmedium -- die rechte Spalte sitzt
     senkrecht mittig zur linken. Breite und Seitenverhältnis des
     Hauptmediums bleiben unberührt (align-items wirkt nur auf die
     Ausrichtung im Raster, nicht auf die Größe). */
  .seitenkopf__gitter{align-items:center}
  /* A2: Die Überschrift "Stile" bleibt für Vorlese-Programme im Code, ist am
     Rechner aber nur noch optisch weg -- ihre Stelle nimmt der Kicker ein.
     Gleiche Regel wie .sr weiter oben in dieser Datei. */
  .seitenkopf__stile-titel{position:absolute;width:1px;height:1px;padding:0;
    margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .seitenkopf__stile{display:block}
  /* A3: zentrierte, umbrechende Reihe -- auch eine nicht volle Zeile steht
     mittig, bei wenigen Stilen die einzige, bei vielen die letzte. */
  .seitenkopf__stilzeile .filter{justify-content:center;margin-top:0}
}
/* A2/A3: Kicker über den Chips, Optik wie .augbraue, aber mittig statt
   linksbündig -- .augbraue selbst ist ein Flex-Element mit gap und wird
   deshalb nicht mitbenutzt. Am Handy gibt es ihn nicht, dort bleibt die
   sichtbare Überschrift "Stile" wie bisher. */
.seitenkopf__stile-kicker{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--zier);
  margin-bottom:1rem;
}
/* A4: feine Trennlinie über die volle Breite -- .seitenkopf__trenner bringt
   sie schon mit, hier nur der Abstand in der neuen Umgebung. */
.seitenkopf__stilzeile .seitenkopf__trenner{margin:0 0 1.5rem}
/* Hinweis-Zeile direkt unter den Stil-Chips, die auf den Stil "Nach deinem
   Wunsch" zeigt (Auftrag 19.09.2026, Teil 3). Mittig und 1 rem, also nicht
   kleiner als der Fließtext. Der Link trägt Gold auf dunklem Grund (11,67:1,
   AAA) und behält seine Unterstreichung -- ein Link ist ohne sie in einem
   Satz nicht erkennbar. Die Zeile steht nur im HTML, wenn es sie geben soll
   (siehe seiten_bauen.py); es gibt hier also nichts auszublenden. */
.seitenkopf__wunschzeile{
  font-family:var(--sans);font-size:1rem;line-height:1.5;
  color:var(--text-leise);text-align:center;margin:1.25rem auto 0;max-width:46rem;
}
.seitenkopf__wunschzeile a{color:var(--gold);text-decoration:underline;
  text-underline-offset:.2em}
@media(max-width:899px){
  .seitenkopf__stilzeile{display:contents}
  .seitenkopf__stile-kicker{display:none}
}

/* ============================================================================
   BREITE COMPUTER-ANSICHT — nachgeschaerfte Regel vom 20.09.2026
   ----------------------------------------------------------------------------
   Anlass: Saskia sah am 20.09.2026 an einem 1920px breiten Laptop, dass
   Ankuendigungsband, Kopfzeile, Seitenkopf und Konfigurator weiter in einer
   schmalen Spalte in der Mitte standen, mit breitem dunklem Rand links und
   rechts. Grund war NICHT eine fehlende Regel, sondern ein Tippfehler: In
   Zeile 3122 stand eine schliessende Klammer zu viel. Chrome hat dadurch
   genau einen Block verschluckt -- @media(min-width:900px){ :root{--max:1600px}
   .seitenkopf > .huelle{padding-inline:3rem} } aus dem Auftrag vom 16.09.2026.
   Der Rahmen blieb deshalb ueberall bei --max:1320px. Die Klammer ist weg,
   die Regel wirkt wieder.

   Hier steht die nachgeschaerfte Fassung (Skill canvasory-design,
   "Seitenbreite am Rechner"): Der Rahmen nutzt die Fensterbreite mit einem
   seitlichen Rand von 3,5 % (mindestens 32px, hoechstens 88px), der INHALT
   ist auf 1.840px gedeckelt. Gerechnet wird der Deckel ueber
   --max = 1840px + 2 x Rand, weil .huelle border-box ist und der Rand als
   padding innerhalb von max-width liegt.

   Rechenprobe:
     1920px Fenster -> Rand 67px (3,5 %), Inhalt 1786px
     1366px Fenster -> Rand 48px (3,5 %), Inhalt 1270px
     2560px Fenster -> Rand 88px (Deckel), Inhalt 1840px (Deckel)

   ALLES hier steht in @media(min-width:1040px) oder enger. Unterhalb von
   1200px aendert sich nichts -- Handy und Tablet bleiben, wie sie waren.
   Schriftgroessen, Knopfgroessen und Abstaende werden NICHT angefasst; es
   aendert sich nur, wie breit die Spalten sind und was nebeneinander steht.
   ============================================================================ */
@media(min-width:1040px){

  /* --- Teil 1.1: der breite Rahmen, fuer ALLE Seiten und Bausteine --- */
  :root{
    --rand: clamp(32px, calc(3.5vw / var(--zf,1)), 88px);
    --max:  calc(1840px + 2 * var(--rand));
  }

  /* Ankuendigungsband, Kopfzeile und Fusszeile an derselben Spalte.
     Kopfzeile (.kopf__inhalt), Fusszeile und alle Abschnitte sitzen bereits
     in .huelle und folgen --max von selbst. Das Ankuendigungsband ist der
     einzige Baustein, der bisher ueber die volle Breite lief und dadurch
     NICHT mit den uebrigen buendig war. */
  /* .aktion traegt selbst einen kleinen Innenabstand; ohne diese Zeile
     bliebe das Band 21px schmaler als Kopfzeile und Abschnitte. */
  .aktion{padding-inline:0}
  .aktion__inhalt{max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}

  /* Der Seitenkopf durfte bisher mit festen 48px naeher an den Rand als der
     Rest (Regel vom 16.09.2026). Jetzt derselbe Rand wie ueberall, sonst
     stuende ausgerechnet der Kopfbereich wieder anders als die Seite. */
  .seitenkopf > .huelle{padding-inline:var(--rand)}

  /* --- Teil 1.3: nebeneinander statt untereinander --- */
  /* Zehn Themenkacheln: zwei Reihen zu fuenf statt fuenf Reihen zu zwei. */
  .kacheln{grid-template-columns:repeat(5,minmax(0,1fr))}
  /* Galerie: mehr Kacheln je Reihe, nicht groessere Kacheln. */
  .werke{grid-template-columns:repeat(5,minmax(0,1fr))}
  /* Bewertungskarten: drei statt zwei je Reihe, und ueber die volle Breite. */
  .rezensionen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rezensionen.rezensionen--kompakt{grid-template-columns:repeat(4,minmax(0,1fr))}

  /* Reine Textseiten (AGB, Datenschutz, Impressum, Widerruf) haben kein
     Medium, neben das der Text ruecken koennte. Die Lesebreite bleibt
     unveraendert bei 72 Zeichen -- die Spalte steht jetzt aber mittig im
     breiten Rahmen statt links angeschlagen mit 1.100px Leere rechts. */
  .textseite{margin-inline:auto}

  /* --- Teil 2: Konfigurator --- */
  /* 2.1 Das Vorschaubild passt immer in die Fensterhoehe. 96px Kopfzeile,
     dazu Luft fuer Ueberschrift und Hinweiszeile. Das Seitenverhaeltnis
     steckt in .wandel__buehne (aspect-ratio:5/7) und bleibt unangetastet --
     begrenzt wird die HOEHE, die Breite folgt daraus. */
  .konf__spalte--buehne{min-height:0}
  .konf__buehne{min-height:0}
  .konf__buehne > .wandel{
    height:auto;
    max-height:calc(calc(100vh / var(--zf,1)) - 96px - 11rem);
    display:flex;flex-direction:column;
  }
  .konf__buehne > .wandel > .wandel__rahmen{min-height:0;flex:1 1 auto}
  .konf__buehne > .wandel .wandel__buehne{
    height:100%;max-height:100%;width:auto;margin-inline:auto;
  }

  /* Die drei Spalten duerfen die neue Breite nutzen: Themenwelten links,
     Buehne in der Mitte, Stile rechts. */
  .konf__spalten{grid-template-columns:minmax(200px,0.8fr) minmax(0,2.4fr) minmax(280px,1fr)}

  /* 2.2 Die folgenden Schritte und der Abschluss stehen nebeneinander.
     .konf__raster (Material/Format/Groesse/Anzahl) und .konf__abschluss
     (Preis, Zahlarten, "In den Warenkorb") sind Geschwister in .huelle.
     Ein zusaetzlicher Rahmen um beide waere eine Aenderung an start.js --
     das ist Kaufstrecke und gesperrt. Deshalb wird .huelle selbst zu einem
     umbrechenden Flex-Kasten: Alle Kinder bleiben volle Breite, nur diese
     zwei bekommen eine Teilbreite und landen dadurch von selbst in einer
     Reihe, egal wie viele Bausteine davor stehen oder ausgeblendet sind. */
  #konfigurator > .huelle{
    display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:2.5rem;
  }
  #konfigurator > .huelle > *{width:100%}
  #konfigurator > .huelle > .konf__raster{width:calc(64% - 1.25rem)}
  #konfigurator > .huelle > .konf__abschluss{
    width:calc(36% - 1.25rem);max-width:none;margin-inline:0;
  }

  /* --- Teil 3: Seitenkopf der Startseite und der Unterseiten --- */
  /* Das grosse Bild rechts wird in der Hoehe begrenzt, damit Sterne,
     Ueberschrift, Text und beide Knoepfe ohne Scrollen sichtbar bleiben --
     auch bei 1536x864. Seitenverhaeltnis bleibt, nichts wird beschnitten. */
  /* Begrenzt wird die Bildflaeche selbst (.wandel__buehne). Sie traegt
     aspect-ratio:5/7; zusammen mit width:fit-content rechnet der Browser
     die Breite aus der gedeckelten Hoehe aus -- das Seitenverhaeltnis
     bleibt exakt, nichts wird beschnitten und nichts laeuft aus dem
     Rahmen. (Ein erster Versuch ueber eine Flex-Kette mit height:100%
     liess das Bild auf der Startseite unter seinem Rahmen herauslaufen --
     die Prozenthoehe fand dort keinen festen Bezugswert.)
     15rem Abzug: Kopfzeile 96px plus Sternezeile, Kleinzeile und der
     Bildunterschrift darunter. */
  .hero__gitter > .wandel .wandel__buehne,
  .seitenkopf .wandel-bereich .wandel__buehne{
    /* --bildhoehe = was von der Fensterhoehe uebrig bleibt: Kopfzeile
       96px, dazu Sternezeile, Kleinzeile und Bildunterschrift.
       Gedeckelt wird die BREITE (Hoehe x 5/7) -- die Bildflaeche traegt
       aspect-ratio:5/7 und rechnet die Hoehe daraus aus. Ueber die Hoehe
       allein geht es nicht: Die Bilder darin sind absolut positioniert,
       die Flaeche hat also keine eigene Inhaltsbreite und fiele mit
       width:fit-content auf null zusammen. */
    --bildhoehe:calc(calc(100vh / var(--zf,1)) - 96px - 15rem);
    max-width:calc(var(--bildhoehe) * 5 / 7);
    max-height:var(--bildhoehe);
    margin-inline:auto;
  }
}

/* Ab 1600px ist genug Platz fuer eine Kachel mehr je Reihe. Liegt ebenfalls
   oberhalb von 1200px, aendert am Handy und am Tablet also nichts. */
@media(min-width:1360px){
  .werke{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* ============================================================================
   LAYOUT FERTIGSTELLEN - 21.09.2026
   ----------------------------------------------------------------------------
   Der breite Rahmen kam am 20.09.2026 (3,5 % Rand, Deckel 1.840px). Die
   Bausteine waren darauf aber nicht eingestellt: Kaesten breiter als ihr
   Inhalt, Karten mit 90px Textspalte, eine Tabelle, deren dritte Spalte
   leer blieb, Zahlarten schwarz auf schwarz. Dieser Block stellt sie
   nach, Mangel fuer Mangel. Wo nicht anders vermerkt, gilt er ab 1200px --
   am Handy wird nur behoben, was dort wirklich falsch ist.

   Grundsatz aus dem Auftrag: breiter heisst NICHT, denselben Baustein in
   die Breite zu ziehen. Bilder behalten ihr Seitenverhaeltnis und werden
   groesser, kein Kasten ist breiter als sein Inhalt, was zusammengehoert
   steht zusammen, und die Seite wird kuerzer statt laenger.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   MANGEL 7 - Vergleichstabelle: die dritte Spalte blieb leer
   ---------------------------------------------------------------------------
   Ursache: .vergleich__haeufig und .vergleich__wir sind <td>-Elemente und
   trugen display:flex. Damit ist eine Zelle keine Tabellenzelle mehr -- sie
   faellt aus der Spaltenordnung heraus, die Canvasory-Aussagen rutschten
   unter die Haeufig-Zeilen und die Spalte rechts blieb leer. Die Zellen sind
   wieder Tabellenzellen; Symbol und Text stehen darin nebeneinander.
   Gilt ab 900px -- demselben Umbruchpunkt, ab dem die Tabelle ueberhaupt als
   Tabelle gedacht ist. Am Handy bleibt die gestapelte Form unveraendert.
   --------------------------------------------------------------------------- */
@media(min-width:900px){
  .vergleich__tabelle td.vergleich__haeufig,
  .vergleich__tabelle td.vergleich__wir{display:table-cell}
  .vergleich__tabelle td .vergleich__zeichen{
    margin-right:.55rem;vertical-align:-2px;
  }
  .vergleich__tabelle thead th.vergleich__ecke{width:220px}
}

/* ---------------------------------------------------------------------------
   Alle Breiten
   --------------------------------------------------------------------------- */

/* MANGEL 13 - Leiste unten: "Deine Wand 57,90 EUR" verschwindet.
   Der Preis stand dort, bevor der Kunde etwas gewaehlt hatte, und sah aus
   wie ein gefuellter Warenkorb. Im Konfigurator selbst bleibt die
   Preisanzeige unveraendert -- hier faellt nur die Leisten-Zeile weg. */
.leiste__text{display:none}
.leiste__inhalt{justify-content:center}

/* MANGEL 9 - Kleinzeile "SONDERANFERTIGUNG" mittig ueber den Text.
   Text und Knopf stehen dort mittig, die Kleinzeile stand links. */
.son-band__inhalt .augbraue{justify-content:center}

/* MANGEL 11 - Zahlarten ueberall gleich und lesbar.
   Fusszeile und Seitenkopf bauen ihre Reihe jetzt aus derselben Quelle wie
   der Konfigurator (zahlartenEintraegeHTML() in layout.js) -- helle Kachel,
   Logo in echten Farben. Die alten Regeln .fuss__zahlart/.hero-zahlart
   greifen dadurch ins Leere und bleiben unangetastet stehen. */
.fuss__zahlarten{display:block;flex:0 0 auto;max-width:100%}
/* Die Fusszeile setzt fuer ihre Linklisten .fuss ul{display:grid}. Das
   traf auch die Zahlarten-Reihe und stellte die acht Kacheln unter-
   einander (84px breit, 288 hoch). Zwei Klassen wiegen schwerer als
   Klasse plus Elementname -- damit gilt hier wieder die Reihe. */
.fuss .zahlarten__reihe{display:flex;flex-wrap:wrap;gap:.5rem}
/* MANGEL 11: Fusszeile und Abschlussblock faerbten die Kachel dunkel
   (.abschluss .zahlart / .fuss .zahlart) -- Logos mit dunkler Zeichnung
   wie PayPal, Amazon Pay und Revolut verschwanden darauf fast. Gefordert
   ist ueberall dieselbe HELLE Kachel wie im Konfigurator. */
/* MANGEL 11: Im Abschlussband erzwang ein festes 7-Spalten-Raster, dass
   die achte Zahlart (Revolut) allein in eine zweite Zeile rutschte. Acht
   Spalten passen dort bequem -- jetzt stehen alle acht in EINER Reihe. */
@media(min-width:480px){
  .abschluss .zahlarten__reihe{grid-template-columns:repeat(8,minmax(44px,auto))}
}
/* In der schmalen Zusammenfassung des Konfigurators ist fuer acht
   nebeneinander kein Platz -- dort zwei gleich volle Reihen zu vier,
   statt sieben und einer. */
.konf__abschluss .zahlarten__reihe{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:center;
}
.fuss .zahlart,.abschluss .zahlart{
  background:#FBF8F2;border-color:var(--bedien-hell);color:var(--text-dunkel);
}
/* MANGEL 12: auch die Linklisten mittig, nicht nur ihre Ueberschriften. */
.fuss__spalten li{justify-content:center}
.fuss__spalten a{justify-content:center;text-align:center}
.fuss__zahlarten .zahlarten__reihe,
.hero-zahlarten .zahlarten__reihe{justify-content:center}
.hero-zahlarten{display:block}
.hero-zahlarten .zahlarten__reihe{justify-content:flex-start}
.fuss__zahlarten .zahlart,
.hero-zahlarten .zahlart{min-width:52px;min-height:36px;padding:.3rem .5rem}
.fuss__zahlarten .zahlart__bild,
.hero-zahlarten .zahlart__bild{height:16px}
@media(max-width:599px){
  .fuss__zahlarten .zahlarten__reihe,
  .hero-zahlarten .zahlarten__reihe{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .fuss__zahlarten .zahlart,
  .hero-zahlarten .zahlart{min-width:0;width:100%}
}

/* MANGEL 12 - Fusszeile durchgehend mittig.
   "Sichere Zahlung ..." steht in derselben Zeile wie die Zahlarten
   (.fuss__zahlzeile, angelegt in layout.js), am Handy darueber. */
.fuss__gitter{text-align:center}
.fuss__marke{align-items:center;text-align:center}
.fuss__marke p{margin-inline:auto}
.fuss__spalten{text-align:center}
.seo-linien{justify-content:center}
.fuss__zahlzeile{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.75rem 1.5rem;
}
.fuss__sicher{margin:0}
.fuss__unten{justify-content:center;text-align:center}
.fuss__recht{justify-content:center}
@media(max-width:599px){
  .fuss__zahlzeile{flex-direction:column;gap:.75rem}
}

/* MANGEL 16 - "Versandkostenfrei in Deutschland" stiess am Handy an den Rand.
   Wortlaut bleibt; nur der Umbruch wird sauber, fuer alle acht Kacheln gleich. */
.grund__titel{overflow-wrap:break-word;hyphens:auto}

/* MANGEL 8, Nachbesserung: Die Videoreihe ist eine waagerecht wischbare
   Flex-Reihe mit festen 120px-Kacheln. Ohne min-width:0 schrumpft ihr
   Kasten am Handy nicht mit -- die Reihe war 384px breit in einem
   342px-Kasten und schob die ganze Seite seitlich weg. */
.bewegt__videos{min-width:0}
.bewegt__videos .gedenkvideos__reihe{max-width:100%}

/* MANGEL 5 - Bewertungskarten: gleiche Hoehe, Fuss unten buendig,
   Kundenfoto in einem gleich hohen Bildbereich (alle Breiten). */
.rez{display:flex;flex-direction:column}
.rez__inhalt{display:flex;flex-direction:column;flex:1 1 auto}
.rez__foto{
  order:-1;width:100%;height:190px;object-fit:contain;
  background:var(--grund-weich);border-radius:var(--radius);
  margin-bottom:.9rem;
}
.rez__fuss{margin-top:auto}
.bew__nachladen{margin-top:1.75rem;text-align:center}

/* ---------------------------------------------------------------------------
   Ab 1200px - Laptop
   --------------------------------------------------------------------------- */
@media(min-width:1040px){

  /* --- MANGEL 1: Seitenkopf der Startseite ---------------------------------
     Der Kasten war 480px breit, das Medium darin nur 377 -- links und rechts
     blieb leere Kastenflaeche. Jetzt ist der Kasten genau so breit wie das
     Medium, und das Medium ist gross: Hoehe rund 70 % der Fensterhoehe, die
     Breite rechnet das Seitenverhaeltnis 5:7 daraus aus. 26px sind der
     Rahmen selbst (.wandel__rahmen: 12px Polster plus 1px Linie je Seite).
     Dadurch schliesst die Textspalte naeher an -- die grosse Luft zwischen
     Text und Bild ist damit auch weg. */
  .hero__gitter{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .hero__gitter > .wandel{
    --medium-h:min(calc(70vh / var(--zf,1)),760px);
    width:calc(var(--medium-h) * 5 / 7 + 26px);
    max-width:100%;height:auto;max-height:none;display:block;
  }
  .hero__gitter > .wandel .wandel__buehne{
    max-width:calc(var(--medium-h) * 5 / 7);
    max-height:var(--medium-h);
    margin-inline:auto;
  }
  .hero__unter{max-width:72ch}

  /* Bedienknoepfe in die OBEREN Ecken, hoechstens 40px -- unten lagen sie
     ueber der Einblendung und wirkten bei kleinem Medium riesig. */
  .hero__gitter > .wandel .wandel__gross,
  .konf__buehne > .wandel .wandel__gross,
  .seitenkopf__bildspalte .wandel__gross{top:.8rem;bottom:auto;left:.8rem}
  .hero__gitter > .wandel .wandel__pause,
  .konf__buehne > .wandel .wandel__pause,
  .seitenkopf__bildspalte .wandel__pause{top:.8rem;bottom:auto;right:.8rem}
  .hero__gitter > .wandel .wandel__gross,
  .hero__gitter > .wandel .wandel__pause,
  .konf__buehne > .wandel .wandel__gross,
  .konf__buehne > .wandel .wandel__pause,
  .seitenkopf__bildspalte .wandel__gross,
  .seitenkopf__bildspalte .wandel__pause{width:40px;height:40px}

  /* Die Einblendung laeuft jetzt ueber die ganze Medienbreite (die Knoepfe
     sitzen oben, es muss unten kein Platz mehr freibleiben) und hoechstens
     zwei Zeilen hoch. */
  .hero__gitter > .wandel .wandel__marken,
  .konf__buehne > .wandel .wandel__marken,
  .seitenkopf__bildspalte .wandel__marken{padding:1.4rem 1rem .9rem}
  .hero__gitter > .wandel .wandel__marke--vorher,
  .konf__buehne > .wandel .wandel__marke--vorher,
  .seitenkopf__bildspalte .wandel__marke--vorher{left:1rem;right:1rem;bottom:.9rem}
  .wandel__marke{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* --- MANGEL 2: Themenwelten-Karten --------------------------------------
     Bild links, Text rechts liess fuer den Text rund 90px -- jedes Wort
     brach einzeln um, Ueberschriften wurden abgeschnitten. Jetzt Bild oben
     ueber die ganze Kartenbreite (alle gleich hoch), darunter Ueberschrift,
     Text und "Ansehen" unten buendig. Fuenf gleich breite, gleich hohe
     Karten je Reihe, zwei gerade Reihen. Gilt fuer jedes .kacheln-Raster,
     also auch fuer die Karten auf den Themenwelt-Seiten. */
  .kacheln{grid-template-columns:repeat(5,minmax(0,1fr))}
  .kachel{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:0 0 1.25rem;
  }
  .kachel__bild{
    flex:none;width:100%;aspect-ratio:4/3;
  }
  .kachel__inhalt{
    flex:1 1 auto;justify-content:flex-start;padding:1rem 1.1rem 0;gap:0;
  }
  .kachel h3{font-size:1.0625rem;line-height:1.3;overflow-wrap:break-word;hyphens:auto}
  .kachel p{margin-top:.4rem}
  .kachel__pfeil{margin-top:auto;padding-top:.9rem}

  /* --- MANGEL 3: Konfigurator oben ----------------------------------------
     Links die zehn Themenwelten in einer langen Spalte, in der Mitte ein
     Kasten, der breiter war als sein Medium, rechts nichts. Jetzt drei
     Bereiche oben buendig: Themenwelten zweispaltig, Vorschau in einem
     Kasten von genau Medienbreite, Stile zweispaltig. Die rechte Spur
     behaelt ihre Mindestbreite, auch solange noch kein Stil gewaehlt ist --
     es springt nichts, wenn die Liste erscheint. */
  .konf__spalten{
    grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);
    align-items:start;
  }
  .konf__spalte--buehne{justify-content:flex-start}
  .konf__spalte--welten .filter,
  .konf__spalte--stile .filter{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;
  }
  .konf__spalte--welten .filter button,
  .konf__spalte--stile .filter button{width:100%}
  .konf__buehne > .wandel{
    --medium-h:min(calc(calc(100vh / var(--zf,1)) - 96px - 10rem),700px);
    width:calc(var(--medium-h) * 5 / 7 + 26px);
    max-width:100%;height:auto;max-height:none;display:block;
    margin-inline:auto;
  }
  .konf__buehne > .wandel .wandel__buehne{
    max-width:calc(var(--medium-h) * 5 / 7);
    max-height:var(--medium-h);
    margin-inline:auto;
  }

  /* --- MANGEL 4: Konfigurator unten ---------------------------------------
     Die Groessen liefen in EINER langen Spalte, daneben standen schon Preis
     und Kaufknopf, und Anzahl, Aufhaengeset und Gedenkvideo kamen erst weit
     darunter -- also nach dem Knopf. Jetzt links alle Wahlschritte von oben
     nach unten, zuletzt Anzahl, Aufhaengeset und Gedenkvideo in EINER Reihe;
     rechts die Zusammenfassung, die beim Scrollen oben haften bleibt, damit
     Preis und Knopf immer sichtbar sind.
     Die Reihenfolge wird ueber order gesteuert, weil zwischen den drei
     Zusatzfeldern im HTML noch Hinweiszeilen stehen; Kennungen, Klassen und
     Texte bleiben unveraendert -- es ist reine Anordnung. */
  #konfigurator > .huelle > .konf__raster{
    display:flex;flex-wrap:wrap;align-items:flex-start;
    gap:0 1.5rem;width:calc(66% - 1.25rem);
  }
  #konfigurator > .huelle > .konf__abschluss{
    width:calc(34% - 1.25rem);
    position:sticky;top:calc(96px + 1.25rem);align-self:flex-start;
  }
  .konf__raster > *{width:100%}
  .konf__raster > .konf__reihe:nth-of-type(1){order:1}
  .konf__raster > .konf__reihe:nth-of-type(2){order:2}
  .konf__raster > .konf__reihe:nth-of-type(3){order:3}
  .konf__raster > #rabatt{order:4}
  .konf__raster > .konf__reihe:nth-of-type(4){order:5}
  .konf__raster > #zusatz-haenger{order:6}
  .konf__raster > #zusatz-video{order:7}
  .konf__raster > #zusatz-video-verweis{order:8}
  .konf__raster > #hinweis-acryl-haengung{order:9}
  .konf__raster > #reihe-haenger-paket{order:10}
  /* Anzahl, Aufhaengeset und Gedenkvideo nebeneinander */
  .konf__raster > .konf__reihe:nth-of-type(4),
  .konf__raster > #zusatz-haenger,
  .konf__raster > #zusatz-video{width:calc((100% - 3rem) / 3);align-self:stretch}
  /* Groessen als Raster mit gleich grossen Kacheln statt einer langen Spalte */
  #groessen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
  #groessen button{width:100%;max-width:none}

  /* --- MANGEL 5/6: Bewertungen --------------------------------------------
     Startseite: Zusammenfassung stand schmal links und zog sich ueber die
     ganze Hoehe (der "leere graue Kasten"). Jetzt steht sie kompakt und
     mittig OBEN, darunter gerade Reihen.
     Themenwelt- und Stil-Seiten: drei Karten waren in einen 46rem-Kasten in
     der Seitenmitte gepresst, Text mittig mit ein bis zwei Woertern je
     Zeile. Jetzt drei gleich breite Karten ueber die ganze Rahmenbreite,
     Text im normalen Zeilenfluss. */
  .bew__gitter{display:block}
  .bew__gitter > div:first-child{
    text-align:center;max-width:36rem;margin-inline:auto;
  }
  .bew__gitter > #rezensionen{margin-top:2.75rem}
  .rezensionen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stimme__inhalt{max-width:none}
  .stimme{text-align:left}
  .stimme__schnitt{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:.5rem .75rem;text-align:center;
  }
  .stimme .bew__mehr{text-align:center}
  .rezensionen.rezensionen--kompakt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rez blockquote{text-align:left}

  /* --- MANGEL 8: Gedenkvideo-Bereich --------------------------------------
     Aus zwei Abschnitten wird einer: links Text, rechts die Beispielvideos
     nebeneinander. Der Abspiel-Kreis ist entfallen (layout.js). */
  .bewegt__gitter{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center}
  .bewegt__text{min-width:0}
  .bewegt__videos-titel{
    font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-leise);margin-bottom:.85rem;font-weight:500;
  }
  .bewegt__videos .gedenkvideos__reihe{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;margin-top:0;overflow:visible;
  }
  .bewegt__videos .gedenkvideo{width:100%;flex:none}

  /* --- MANGEL 10: Seitenkopf der Themenwelt- und Stil-Seiten --------------
     Der goldgerahmte Stil-Satz stand RECHTS NEBEN dem Hauptbild und machte
     das Bild klein. Jetzt steht er mittig DARUNTER, genau so breit wie das
     Bild -- und das Bild ist gross. */
  .seitenkopf__bildspalte{
    --medium-h:min(calc(60vh / var(--zf,1)),560px);
    display:flex;flex-direction:column;align-items:center;gap:1.25rem;
  }
  .seitenkopf__bildspalte > .wandel-bereich,
  .seitenkopf__bildspalte > [data-baustein="wandel"],
  .seitenkopf__bildspalte > .seitenkopf__beschreibung{
    width:calc(var(--medium-h) * 5 / 7 + 26px);max-width:100%;
  }
  .seitenkopf__bildspalte .wandel-bereich,
  .seitenkopf__bildspalte .wandel{max-height:none}
  /* Die Deckelung auf 320px stammt vom 16.09.2026 und hielt das Bild
     klein, obwohl daneben Platz war. Jetzt fuellt es seinen Kasten. */
  .seitenkopf__bildspalte .wandel,
  .seitenkopf__bildspalte [data-baustein="wandel"]:empty{max-width:none;width:100%}
  .seitenkopf__bildspalte .wandel__buehne{
    max-width:calc(var(--medium-h) * 5 / 7);
    max-height:var(--medium-h);margin-inline:auto;
  }
  .seitenkopf__bildspalte .seitenkopf__beschreibung{margin-top:0}
}

/* Ab 1600px ist Platz fuer eine Karte mehr je Reihe (Mangel 5). */
@media(min-width:1360px){
  .bew__gitter > #rezensionen,
  #bw-liste{grid-template-columns:repeat(4,minmax(0,1fr))}
  #groessen{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* Handy: Groessen drei je Reihe (Mangel 4). Die Deckelung auf halbe Breite
   vom 20.09.2026 wird dadurch ersetzt. */
@media(max-width:599px){
  #groessen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  #groessen button{width:100%;max-width:none}
}
/* ===========================================================================
   NACHBESSERUNG SEITENKOPF - 21.09.2026
   Teil A (Themenwelt- und Stil-Seiten) und Teil B (Startseite und dieselben
   Seiten): Text und Bild stehen als Paar in der Mitte, das Hauptbild ist auf
   allen Seitenkoepfen gleich gross.

   Gilt NUR ab 1200px. Am Handy und am Tablet aendert sich nichts.
   Die Breitenregel (3,5 % Rand, mind. 32px, Deckel 1.840px) bleibt
   unberuehrt -- hier wird nur INNERHALB des Rahmens umverteilt.

   Zwei Zahlen, einmal gesetzt und ueberall benutzt:
     --kopf-text    Breite der Textspalte. 55rem = 880px. Gemessen: erst ab
                    dieser Breite kommt die Ueberschrift der Themenwelt- und
                    Stil-Seiten mit EINER Zeile aus (bei 820px waren es zwei).
     --kopf-absatz  Deckel fuer den Absatz. 47,5rem = 760px, das sind rund
                    77 Zeichen je Zeile und damit noch in der Lesebreite
                    70-80 aus canvasory-design. Gemessen: bei 700px braucht
                    der Absatz vier Zeilen, ab 760px drei. Die Ueberschrift
                    darf breiter laufen als der Absatz -- sie ist gross
                    gesetzt und hat feste Umbrueche.
   =========================================================================== */
@media(min-width:1040px){
  :root{--kopf-text:55rem;--kopf-absatz:47.5rem}

  /* --- TEIL A: Hauptbild der Themenwelt- und Stil-Seiten -------------------
     Es war 426px breit (--medium-h:min(calc(60vh / var(--zf,1)),560px)), auf der Startseite
     dagegen 566px (min(calc(70vh / var(--zf,1)),760px)). Jetzt dieselbe Zahl auf allen
     Seitenkoepfen -- gemessen wird sie an der Fensterhoehe, das
     Seitenverhaeltnis 5:7 rechnet die Breite daraus aus. Nichts wird
     beschnitten, nichts verzerrt.

     Der goldene Stil-Kasten haengt an derselben Breite (die Regel weiter
     oben gibt Bild UND Kasten width:calc(var(--medium-h) * 5 / 7 + 26px)) --
     er wird dadurch von selbst breiter und flacher. */
  .seitenkopf__bildspalte{--medium-h:min(calc(70vh / var(--zf,1)),760px)}
  /* Dieselbe Deckelung wie auf der Startseite, und nur sie. Ohne diese Zeile
     gewinnt die aeltere Regel .seitenkopf .wandel-bereich .wandel__buehne
     (--bildhoehe:calc(calc(100vh / var(--zf,1)) - 96px - 15rem), bei 1080px Hoehe also 744px) --
     das Bild waere 12px flacher geblieben als auf der Startseite. Drei
     Klassen, damit die Regel die aeltere wirklich ueberstimmt. */
  .seitenkopf .seitenkopf__bildspalte .wandel__buehne{
    max-width:calc(var(--medium-h) * 5 / 7);
    max-height:var(--medium-h);
  }

  /* --- TEIL A/B: Text und Bild als Paar zur Mitte --------------------------
     Die Bildspalte war ein fester 660px-Kasten, in dem das 426px breite Bild
     mittig sass -- links und rechts davon blieb leere Spaltenflaeche, und
     die Textspalte wurde dafuer bis auf 1.070px aufgezogen. Der Absatz darin
     war aber nur 546px breit; dazwischen klaffte die Luecke, die Saskia
     gemeldet hat (rund 490px auf der Startseite).

     Jetzt: die Bildspalte ist genau so breit wie das Bild (auto), die
     Textspalte bekommt eine feste Lesebreite, und justify-content:center
     rueckt beide als Paar in die Mitte des Rahmens. Dadurch ist der Abstand
     nach links und nach rechts gleich, und zwischen Text und Bild steht nur
     noch der gewoehnliche Spaltenabstand der jeweiligen Seite. */
  .hero__gitter,
  .seitenkopf__gitter{
    grid-template-columns:minmax(0,var(--kopf-text)) auto;
    justify-content:center;
  }

  /* --- Auftrag 17.10.2026, Teil D: Kopfbereich minimal zur Mitte ----------
     Text und Bild ruecken je 8 px nach innen, die Bildgroesse bleibt dabei
     Pixel fuer Pixel dieselbe. Gerechnet wird in Bildschirmpunkten: ab
     1040 px steht die Seite auf zoom .85 (--zf), 8 px auf dem Schirm sind
     dort 8/0.85 CSS-Punkte. Saskia: "minimal" -- mehr sind es nicht.

     Die beiden Kopf-Gitter sind verschieden gebaut, jedes braucht deshalb
     seinen eigenen Weg. Beide Elemente sind zugleich die .huelle -- ihr
     Polster gehoert ihnen, es darf hier nicht angefasst werden.

     .hero__gitter (Startseiten): erste Spalte 1fr, zweite so breit wie das
     Bild. Ein kleinerer Spaltenabstand wuerde hier nur die Textspalte
     breiter machen. Statt dessen ruecken die beiden Kinder selbst: der Text
     um 8 px nach rechts, das Bild um 8 px nach links. Die 1fr-Spalte gibt
     den Platz her, das Bild behaelt seine Groesse. */
  .hero__gitter > :first-child{margin-inline-start:calc(8px / var(--zf,1))}
  .hero__gitter > :last-child{margin-inline-end:calc(8px / var(--zf,1))}
  /* Der Absatz bleibt in Lesebreite -- er darf NICHT ueber die ganze
     Textspalte laufen (canvasory-design: 70-80 Zeichen je Zeile). */
  .hero__unter,
  .seitenkopf__text{max-width:var(--kopf-absatz)}

  /* Die Stil-Zeile ("Stil wechseln" samt Chips) laeuft weiterhin ueber beide
     Spalten und bleibt mittig -- sie folgt dem Paar automatisch. */
  .seitenkopf__stilzeile{grid-column:1 / -1}
}

/* ===========================================================================
   ZAHLUNGSLOGOS - 21.09.2026, Teil 5
   Alle acht Marken sollen gleich kraeftig erscheinen. Zwei brauchen dafuer
   etwas anderes als eine helle Kachel:

     Klarna     Die Marke gibt es offiziell nur in dem hellen Pink #FFA8CD.
                Auf der cremefarbenen Kachel (#FBF8F2) steht Hell auf Hell --
                das Kontrastverhaeltnis liegt bei rund 1,6:1. Auf schwarzem
                Grund, dem offiziellen Untergrund dieser Marke, wirkt genau
                dasselbe Pink kraeftig. Dieselbe Loesung wie bei Apple Pay,
                das ebenfalls nur in Weiss vorliegt.
     Link       Bringt seine Farbflaeche im Bild schon mit und braucht nur
                runde Ecken und dieselbe Hoehe wie die uebrigen.

   Google Pay steht hier NICHT: seine Datei ist seit dem 21.09.2026 die
   Fassung ohne weissen Behaelter und erscheint vierfarbig direkt auf der
   hellen Kachel.

   Ausdruecklich NICHT verwendet: opacity, filter, mix-blend-mode. Kein Logo
   wird abgeschwaecht.
   =========================================================================== */
.zahlart__bild.zahlart-eigene-flaeche{height:18px;border-radius:3px}
.fuss__zahlarten .zahlart__bild.zahlart-eigene-flaeche,
.hero-zahlarten .zahlart__bild.zahlart-eigene-flaeche{height:18px}
.zahlart__bild.zahlart-dunkel-chip{height:12px}
.zahlart,
.zahlart__bild,
.zahlart__logogruppe{opacity:1;filter:none;mix-blend-mode:normal}

/* ===========================================================================
   TIPPFLAECHEN AM HANDY: MINDESTENS 44 x 44 PUNKTE
   (Kaufprueflauf 21.09.2026, B14 und B18; Auftrag "Kaufweg verkuerzen",
   21.09.2026, Teil 13.4 und Teil 14)
   ---------------------------------------------------------------------------
   Gemessen auf themenwelt-gedenken-engel.html bei 390 x 844: 72 Bedienelemente
   unter 44 Punkten, in der Kasse (Schritt 1) 51. Die Zielgruppe reicht bis
   65+, und kleine Ziele sind dort die haeufigste Ursache fuer Fehltipps.

   Geaendert werden AUSSCHLIESSLICH die vier im Auftrag benannten Gruppen --
   die uebrigen Treffer sind Verweise mitten im Satz und die Suchbegriff-Zeilen
   im Fuss; dort wuerde eine Mindesthoehe den Textfluss auseinanderreissen,
   ohne dass jemand sie im Kaufweg antippt.

   Nur bis 899 px. Am Rechner bleibt jede dieser Groessen unveraendert -- dort
   zeigt eine Maus genauer als ein Finger, und die Knoepfe am Bild wirkten bei
   44 px auf grossen Medien klobig.

   Die Symbole in den runden Knoepfen behalten ihre Groesse (svg-Regeln weiter
   oben, hier nicht angefasst): es waechst nur die Flaeche, auf die man tippt,
   nicht das Bildzeichen darin.
   =========================================================================== */
@media(max-width:899px){
  /* 1) Plus/Minus fuer die Menge in der Kasse -- vorher 32 x 32. Der
        heikelste Fall des ganzen Befunds: wer hier daneben tippt, aendert
        seine Bestellung, ohne es zu merken. */
  .k-wk-menge__knopf{width:44px;height:44px;font-size:1.25rem}

  /* 2) Goldener Hauptknopf im Seitenkopf -- vorher 342 x 43, also um genau
        einen Punkt zu niedrig. Die 42px-Regel im 599px-Block darueber wird
        damit ueberschrieben; die Polsterung bleibt, die Hoehe steigt. */
  .seitenkopf__knoepfe .knopf,
  .seitenkopf__gitter .knopf{min-height:44px}

  /* 3) Runde Bedienknoepfe am Bild -- vorher 40 x 40 (Pause, Vergroessern)
        und 30 x 30 (Vergroessern an den Einzelmotiv-Kacheln). */
  .wandel__pause,
  .wandel__gross,
  .stil-einzel__gross{width:44px;height:44px}

  /* 4) Themenverweise in der Fusszeile (Tiere, Gedenken, Autos, ...) --
        vorher 342 x 32. Es waechst nur die Zeilenhoehe, nicht die Schrift:
        die Spalte bleibt optisch dieselbe Liste. */
  .fuss__spalten li a{min-height:44px}

  /* Teil 13.4 (B18): Der Bewertungsbeleg "4,9 aus ... Bewertungen" war
     262 x 21 Punkte gross -- der erste Text der Seite und kaum zu treffen.
     Er bleibt an seiner Stelle (erste Zeile im Kopfbereich, Reihenfolge 1),
     bekommt aber normale Textgroesse und 44 Punkte Tipphoehe. Die Sterne
     wachsen mit, sonst saehe die Zeile unfertig aus. */
  .beleg{font-size:1rem;min-height:44px;align-content:center;padding-block:.3rem}
  .beleg .sterne svg{width:19px;height:19px}
}

/* ===========================================================================
   SO ENTSTEHT DEIN PERSOENLICHES BILD -- drei Schritte ueber dem Konfigurator
   (Auftrag "Kaufweg verkuerzen", 21.09.2026, Teil 8)
   ---------------------------------------------------------------------------
   Anlass: Die Angst, in den Konfigurator zu gehen und zu bezahlen, ohne das
   eigene Bild gesehen zu haben. Der Bereich steht deshalb unmittelbar UEBER
   dem Konfigurator, auf jeder Seite, die einen hat.

   Der Bereich hebt sich dezent ab: --grund-weich (eine Stufe heller als der
   Grundton) mit einer feinen Linie in --grund-linie, keine neue Farbe. Die
   Zahlen sind das einzige Gold hier -- und zwar als Zahl auf dunklem Grund,
   nie als Goldflaeche (Kontrast 11,67:1, siehe canvasory-design B1).

   Rechner ab 900 px: Ueberschrift mittig, darunter DREI GLEICH BREITE
   Spalten (1fr 1fr 1fr) ueber die Breite des Konfigurators, die grosse Zahl
   jeweils darueber. Handy: die drei Schritte untereinander, Zahl links,
   Text rechts daneben.
   =========================================================================== */
.konf-erklaerung{padding-block:calc(var(--luft) * .72)}
.konf-erklaerung > .huelle{
  background:var(--grund-weich);
  border:1px solid var(--grund-linie);
  border-radius:var(--radius-gross);
  padding-block:clamp(1.6rem,calc(3vw / var(--zf,1)),2.6rem);
}
.konf-erklaerung__titel{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.45rem,calc(2.6vw / var(--zf,1)),2.1rem);
  color:var(--text);text-align:center;text-wrap:balance;margin:0;
}
.konf-erklaerung__gitter{
  list-style:none;margin:clamp(1.4rem,calc(2.6vw / var(--zf,1)),2.4rem) 0 0;padding:0;
  display:grid;gap:1.25rem;
}
.konf-erklaerung__schritt{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:start;gap:.9rem 1rem;
}
.konf-erklaerung__zahl{
  font-family:var(--display);line-height:1;color:var(--gold);
  font-size:2.25rem;min-width:2ch;text-align:center;
}
.konf-erklaerung__schritt p{
  margin:0;font-size:1rem;line-height:1.5;color:var(--text-leise);
}

/* Rechner: drei Spalten nebeneinander, Zahl ueber dem Text, grosszuegig.
   Dieselbe 900px-Schwelle wie im ganzen Projekt. */
@media(min-width:900px){
  .konf-erklaerung__gitter{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(1.75rem,calc(3vw / var(--zf,1)),3rem);
  }
  .konf-erklaerung__schritt{
    grid-template-columns:minmax(0,1fr);text-align:center;gap:1rem;
    /* Ohne align-content:start dehnen sich die drei Kacheln auf gleiche Hoehe
       und der Text sitzt darin mittig -- die drei Absaetze begaennen dann auf
       drei verschiedenen Hoehen, obwohl die Zahlen auf einer Linie stehen. */
    align-content:start;
  }
  .konf-erklaerung__zahl{
    font-size:clamp(3rem,calc(4.4vw / var(--zf,1)),4rem);margin-inline:auto;
  }
  .konf-erklaerung__schritt p{font-size:1.0625rem;max-width:34ch;margin-inline:auto}
}

/* ===========================================================================
   PREISZEILE (Teil 13.2) -- eine Zeile, drei Betraege, ein Steuerhinweis
   ---------------------------------------------------------------------------
   Der Wortlaut steht jetzt in EINEM Absatz (preisanker.zeile) statt in drei
   Teilen. Die alte Regel hob den mittleren Teil als grosse Display-Zahl
   hervor -- das galt dem einen Betrag, den es so nicht mehr gibt. Die Zeile
   bleibt an ihrem Platz und in ihrer Groesse, sie liest sich nur als Satz.
   =========================================================================== */
.preisanker[data-preisanker]{
  display:block;font-size:.9375rem;line-height:1.5;color:var(--text-leise);
  max-width:46rem;
}
.preisanker--fuss{
  margin:2rem auto 0;text-align:center;
}

/* ===========================================================================
   STARTSEITE AM HANDY: REIHENFOLGE — ENTFALLEN am 26.09.2026
   ---------------------------------------------------------------------------
   Hier stand bis zum Auftrag "Startseite fest einbauen" (26.09.2026, Teil D)
   eine eigene Reihenfolge fuer das Handy: der Konfigurator wurde nach vorn
   geholt, weil er sonst erst nach 9,3 Bildschirmen begann. Den Konfigurator
   gibt es auf der Startseite nicht mehr -- er hat mit gestalten.html eine
   eigene Seite, und jeder Kaufknopf fuehrt in einem Schritt dorthin.

   Die Startseite steht jetzt am Rechner UND am Handy in derselben Folge:
   Erster Bildschirm, Themenwelten, So laeuft es, Kundenfotos, Bewertungen,
   Gedenken, Haeufig gefragt. Das ist die Folge aus dem Quelltext (index.html)
   -- es braucht dafuer keine einzige order-Regel mehr, und damit auch keine
   zweite Liste, die beim naechsten Umbau vergessen werden kann.

   Der Wortlaut der entfernten Regeln steht in _entfernt/handy-reihenfolge.txt.
   =========================================================================== */
}

/* ===========================================================================
   KONFIGURATOR: ZUGEKLAPPTE THEMENWAHL, DEUTLICHER KAUFKNOPF, LIEFERZEIT
   (Kaufprueflauf 21.09.2026, B5 und B7; Auftrag "Kaufweg verkuerzen",
   Teil 5, Teil 6 und Teil 9.1)
   ---------------------------------------------------------------------------
   Der Konfigurator steht auf der hellen Buehne (.abschnitt.hell) -- alle
   Farben hier sind deshalb die dunklen Varianten (--text-dunkel,
   --text-dunkel-leise, --zier-dunkel), nie --text oder --gold als Schrift.
   =========================================================================== */

/* Teil 5: "Gedenken · anderes Thema waehlen" -- eine Zeile an der Stelle der
   zehn Themen-Knoepfe. Der Verweis ist ein <button> (er klappt etwas auf, er
   fuehrt nicht woanders hin), sieht aber wie ein Textverweis aus und behaelt
   die Unterstreichung -- ohne sie ist ein Verweis in einem Satz nicht
   erkennbar. Tipphoehe mindestens 44 Punkte, wie alles Bedienbare. */
.konf__weltzeile{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  margin:0;font-size:1rem;line-height:1.5;color:var(--text-dunkel-leise);
  min-height:44px;
}
.konf__weltzeile-name{font-weight:500;color:var(--text-dunkel)}
.konf__weltzeile-punkt{color:var(--zier-dunkel)}
.konf__weltzeile-knopf{
  border:0;background:transparent;padding:.35rem 0;cursor:pointer;
  font:inherit;color:var(--zier-dunkel);
  text-decoration:underline;text-underline-offset:.2em;
}
.konf__weltzeile-knopf:hover{color:var(--text-dunkel)}

/* Teil 9.1: Lieferzeit direkt ueber dem Kaufknopf. Kleingedruckt, mittig,
   in derselben gedaempften Farbe wie die uebrigen Hinweise im Abschluss. */
.konf__lieferzeit{
  margin:1.1rem 0 0;text-align:center;
  font-size:.875rem;line-height:1.5;color:var(--text-dunkel-leise);
}

/* Teil 6: Der Kaufknopf ist der einzige Knopf in seiner Reihe und geht ueber
   die volle Breite -- genau wie der Hauptknopf im Seitenkopf, der Knopf in der
   Kasse und die mitlaufende Leiste. Die Reihe bleibt ein Flex-Behaelter (sie
   traegt den Abstand nach oben), hat aber nur noch ein Kind. */
.konf__knoepfe .knopf--gold{
  flex:1 1 100%;width:100%;text-align:center;justify-content:center;
}

/* Teil 6, zweiter Punkt: "Erst Stile ansehen" als schlichter Textverweis
   UNTER dem Kaufknopf, kein Knopf mehr. Mittig, klein, gedaempft -- er soll
   da sein, aber nicht mit dem Kauf konkurrieren. Tipphoehe trotzdem 44
   Punkte (canvasory-design, C1 Rang 2). */
.konf__nebenverweis{
  margin:.85rem 0 0;text-align:center;font-size:.875rem;
}
.konf__nebenverweis a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--text-dunkel-leise);
  text-decoration:underline;text-underline-offset:.2em;
}
.konf__nebenverweis a:hover{color:var(--text-dunkel)}

/* ===========================================================================
   KAUFKNOPF IN DER BEWERTUNGSLISTE (Teil 17)
   ---------------------------------------------------------------------------
   .rezensionen ist ein Gitter mit einer Haarlinie als Fugenfarbe (gap:1px auf
   --grund-linie). Der Knopf laeuft ueber ALLE Spalten (grid-column:1 / -1),
   sitzt also als eigene Zeile zwischen den Karten -- nicht als halbe Karte
   neben einer Bewertung. Der Grundton der Fuge wird ueberdeckt, damit die
   Zeile wie ein eigener Abschnitt wirkt und nicht wie eine leere Karte.
   =========================================================================== */
.bw__kauf{
  grid-column:1 / -1;margin:0;padding:1.5rem clamp(1rem,calc(4vw / var(--zf,1)),2rem);
  background:var(--grund);text-align:center;
}
.bw__kauf .knopf{width:100%;max-width:26rem;justify-content:center;text-align:center}

/* ===========================================================================
   RECHTSHINWEIS UNTER DEM BESTELLKNOPF (Teil 15, Kaufprueflauf B13)
   ---------------------------------------------------------------------------
   Ganz klein und dezent, wie beauftragt: 0,75 rem ist die kleinste
   Schriftgroesse der Kasse (dieselbe wie .k-wk-menge__fest), die Farbe ist
   der vorhandene gedaempfte Ton fuer die helle Kassenbuehne
   (--text-dunkel-leise, 7,6:1 auf Weiss) -- keine neue Farbe, kein roher
   Hexwert. Die drei Verweise behalten ihre Unterstreichung: ohne sie ist ein
   Verweis in einem Satz nicht erkennbar (canvasory-design, C2).
   =========================================================================== */
.k-rechtszeile{
  margin:.8rem 0 0;text-align:center;
  font-size:.75rem;line-height:1.6;color:var(--text-dunkel-leise);
}
.k-rechtszeile a{
  color:var(--text-dunkel-leise);
  text-decoration:underline;text-underline-offset:.2em;
}
.k-rechtszeile a:hover{color:var(--text-dunkel)}

/* ===========================================================================
   FOTO SPAETER NACHREICHEN (Teil 18, Kaufprueflauf B17)
   ---------------------------------------------------------------------------
   Der Haken sitzt unter dem Hochlade-Feld jedes Bildes. Er soll die Aufmerksamkeit
   NICHT vom Hochlade-Knopf wegziehen -- der bleibt der normale Weg -- deshalb
   keine eigene Farbflaeche und keine Rahmung, nur dieselbe Kastung wie die
   uebrigen Kenntnisnahme-Haken der Kasse (.k-kenntnis). Das Feld selbst ist
   20 x 20 Punkte gross, die ganze Zeile ist als <label> anklickbar und
   mindestens 44 Punkte hoch -- damit ist die Tippflaeche gross genug, ohne
   dass der Haken selbst groesser aussieht als der Pflichthaken darunter.

   Der Hinweis erscheint erst mit gesetztem Haken (hidden im HTML) und steht
   dann eingerueckt darunter, damit er sichtbar zu ihm gehoert.
   =========================================================================== */
.k-foto-folgt{
  display:flex;gap:.7rem;align-items:flex-start;
  margin:.9rem 0 0;min-height:44px;padding-top:.35rem;
  font-size:.875rem;line-height:1.5;color:var(--text-dunkel);cursor:pointer;max-width:56ch;
}
.k-foto-folgt input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--grund)}
.k-foto-folgt__hinweis{
  margin:.5rem 0 0;padding:.7rem .9rem;
  border-left:2px solid var(--gold-tief);background:#FBF8F2;
  font-size:.8125rem;line-height:1.6;color:var(--text-dunkel-leise);max-width:60ch;
}

/* ===========================================================================
   "FOTO FOLGT" AUF DER DANKE-SEITE (Teil 18, Punkt 6)
   ---------------------------------------------------------------------------
   Abgesetzte Flaeche wie der Erklaerungsbereich ueber dem Konfigurator --
   dieselben Token, keine neue Farbe. Die Knoepfe stehen untereinander, bei
   mehreren Bildern je Knopf eine eigene Zeile: "Foto fuer Bild 2 hochladen"
   muss auf den ersten Blick eindeutig sein.
   =========================================================================== */
.dk-fotofolgt{
  margin-top:2rem;padding:clamp(1.1rem,calc(3vw / var(--zf,1)),1.75rem);
  background:var(--grund-weich);border:1px solid var(--grund-linie);
  border-radius:var(--radius-gross);
}
.dk-fotofolgt__titel{
  font-family:var(--display);font-weight:400;font-size:1.25rem;
  color:var(--text);margin:0 0 .6rem;
}
.dk-fotofolgt p{color:var(--text-leise);font-size:.9375rem;line-height:1.6;margin:0}
.dk-fotofolgt__links{display:flex;flex-direction:column;gap:.6rem;margin-top:1.1rem !important}
.dk-fotofolgt__knopf{width:100%;justify-content:center;text-align:center}


/* ===========================================================================
   AUFTRAG "KONFIGURATOR NEU, STARTSEITE NEU GEORDNET, TEXTE", 22.09.2026
   ---------------------------------------------------------------------------
   Steht bewusst am ENDE der Datei: was hier steht, gewinnt gegen die
   frueheren Konfigurator-Regeln weiter oben, ohne dass dort etwas
   herausgeloest werden muesste. Die alten Regeln bleiben gueltig fuer alles,
   was der Umbau nicht beruehrt.

   Warum der Umbau: Saskia hat am Laptop bei 100 % gemessen, dass der
   Konfigurator vier bis fuenf Bildschirme hoch war und die Erklaerung
   "So entsteht dein persoenliches Bild" als eigener dunkler Abschnitt
   DARUEBER stand -- getrennt durch dunklen Abstand, und damit wie ein
   Nachklapp zum Vorherigen statt wie der Anfang des Konfigurators.

   Handy heisst hier bis 899 px, Rechner ab 900 px -- dieselbe Schwelle wie
   ueberall sonst im Projekt.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   TEIL 1.3 -- Sprungziel
   Jeder Sprung auf #konfigurator muss Ueberschrift UND Erklaerungsleiste
   vollstaendig zeigen, auch unter der haftenden Kopfzeile (96 px). Der
   Abstand von 112 px ist die Kopfzeile plus etwas Luft, damit die
   Augenbraue "Dein Bild" nicht am Rand klebt.
   --------------------------------------------------------------------------- */
#konfigurator{scroll-margin-top:112px}
@media(max-width:899px){
  #konfigurator{scroll-margin-top:88px}
}

/* ---------------------------------------------------------------------------
   TEIL 5.2 -- goldene Striche vor den kleinen Zeilen entfallen
   Die Augenbraue ("Themenwelten", "Fertige Waende", "Dein Bild" ...) trug
   einen 2rem langen Strich davor. Er stand mal links vom Text, mal mittig
   darunter, und auf den Kacheln gar nicht -- einheitlich ist ohne.
   --------------------------------------------------------------------------- */
.augbraue::before{display:none}
.augbraue{gap:0}
.memoria .augbraue{justify-content:center}

/* ---------------------------------------------------------------------------
   TEIL 4.3 -- Bildbeschriftung unter dem Bild
   "So kam das Foto an" / "So haengt es nun an der Wand" lagen als heller
   Text auf einem dunklen Verlauf IM Bild und verdeckten dessen unteres
   Fuenftel. Jetzt stehen sie darunter. Beide liegen im selben Rasterfeld
   uebereinander und blenden gegeneinander -- so springt der Platz nicht,
   wenn der laengere Text erscheint.
   --------------------------------------------------------------------------- */
.wandel__marken{
  position:static;display:grid;justify-items:center;
  margin:.5rem 0 0;padding:0;background:none;pointer-events:none;
}
.wandel__marke{
  grid-area:1 / 1;display:block;text-align:center;
  font-size:.8125rem;font-weight:400;letter-spacing:.01em;
  color:var(--text-leise);
}
.hell .wandel__marke,.hell-weich .wandel__marke{color:var(--text-dunkel-leise)}
.wandel__marke--vorher{position:static;left:auto;bottom:auto}
@media (prefers-reduced-motion: reduce){
  .wandel__marke--vorher{display:none}
}

/* ---------------------------------------------------------------------------
   TEIL 4.2 -- Hauptbild am Handy 80 % der Breite, mittig
   Das Seitenverhaeltnis bleibt vollstaendig erhalten: begrenzt wird die
   BREITE, nie die Hoehe. Beschnitten wird nichts.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .seitenkopf__gitter .wandel,
  .hero__gitter > .wandel{width:80%;max-width:80%;margin-inline:auto}
  .memoria__bild,.memoria .wandel{width:82%;max-width:82%;margin-inline:auto}
}

/* ---------------------------------------------------------------------------
   TEIL 4.5 -- Zahlzeile statt Logos am Handy
   Die acht Logos im Seitenkopf sind am Handy schon seit dem 21.09.2026
   ausgeblendet. An ihrer Stelle steht jetzt ein Satz.
   --------------------------------------------------------------------------- */
.hero-zahlzeile{
  display:none;font-size:.8125rem;line-height:1.5;color:var(--text-leise);
  margin-top:.65rem;
}
@media(max-width:899px){
  .seitenkopf__gitter .hero-zahlzeile{display:block;order:9;margin-top:.65rem}
}

/* ---------------------------------------------------------------------------
   TEIL 4.7 -- ein breiter Hauptknopf je Bildschirm
   Am Handy ist nur "Mein Bild gestalten" ein Knopf; "Themenwelten
   entdecken" wird ein schlichter, mittig stehender Textverweis darunter.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .hero__knoepfe{display:flex;flex-direction:column;align-items:stretch;gap:.5rem}
  .hero__knoepfe .knopf--gold{width:100%;justify-content:center;text-align:center}
  .hero__knoepfe .hero__nebenverweis{
    display:block;text-align:center;font-size:.9375rem;
    color:var(--text-leise);text-decoration:underline;
    text-underline-offset:.22em;padding:.75rem 0;min-height:44px;
  }
  .hero__knoepfe .hero__nebenverweis:hover{color:var(--text)}
  .seitenkopf__gitter .knopf--umriss{
    background:none;border:0;padding:.75rem 0;min-height:44px;
    text-decoration:underline;text-underline-offset:.22em;
    color:var(--text-leise);width:auto;
  }
}

/* ---------------------------------------------------------------------------
   TEIL 4.8 -- Bewertungsbeleg gut lesbar und gut zu treffen
   Er war 21 Punkte hoch und damit am Handy kaum zu treffen (B18).
   --------------------------------------------------------------------------- */
.beleg{min-height:44px;display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem}
.beleg__zahl{font-weight:500}

/* ---------------------------------------------------------------------------
   TEIL 5.1 -- unvollstaendige letzte Reihe steht mittig
   Betrifft Themenwelt-Kacheln, Themenwelt-Pillen, Stil-Kacheln, Groessen,
   Formate und die Zahlungslogos, am Rechner wie am Handy.
   --------------------------------------------------------------------------- */
.wahl,.formen,.filter,.zahlarten__reihe,.konf__welten-liste{justify-content:center}
.konf__stilgitter,.themen__gitter,.kachel-reihe{justify-content:center}

/* ===========================================================================
   TEIL 1 -- DER KONFIGURATOR
   =========================================================================== */

.konf .titel{margin-bottom:0}
.konf__titel{text-align:left}

/* ---------------------------------------------------------------------------
   TEIL 1.2 -- Erklaerungsleiste im hellen Kasten
   Duenner goldener Rahmen (--gold-tief ist genau dafuer da: Zierrand auf
   Hell, nie Text) auf einer leicht helleren Flaeche als der Kasten selbst.
   Die Zahlen stehen in --gold-dunkel, dem einzigen Goldton des Projekts,
   der auf heller Flaeche lesbar ist (4,75:1 auf #FBF8F2).
   --------------------------------------------------------------------------- */
.konf-erkl{
  margin:1.25rem 0 1.75rem;padding:1rem 1.15rem 1.15rem;
  background:#FBF8F2;border:1px solid var(--gold-tief);border-radius:var(--radius);
}
.konf-erkl__titel{
  font-family:var(--display);font-weight:400;font-size:1.15rem;line-height:1.25;
  color:var(--text-dunkel);text-align:center;margin:0;
}
.konf-erkl__titel::after{
  content:"";display:block;width:2.5rem;height:1px;
  background:var(--gold-tief);margin:.5rem auto 0;
}
.konf-erkl__liste{
  list-style:none;margin:.9rem auto 0;padding:0;
  display:flex;flex-direction:column;gap:.5rem;
}
.konf-erkl__schritt{
  display:grid;grid-template-columns:1.6rem 1fr;gap:.6rem;align-items:start;
}
.konf-erkl__zahl{
  font-family:var(--display);font-size:1.05rem;line-height:1.35;
  color:var(--gold-dunkel);text-align:center;
}
.konf-erkl__schritt p{
  margin:0;font-size:.875rem;line-height:1.45;color:var(--text-dunkel-leise);
}
@media(min-width:900px){
  /* Teil 1.2: Der Textblock nimmt am Rechner rund drei Viertel der Breite
     ein und steht mittig. Hoechstens zwei Zeilen je Schritt -- das ist der
     Grund fuer die knappe Schriftgroesse und die Deckelung auf 112ch. */
  .konf-erkl__liste{width:75%;max-width:112ch}
}

/* ---------------------------------------------------------------------------
   TEIL 1.4 -- drei Spalten, etwa 1,3 : 1,3 : 1,2
   --------------------------------------------------------------------------- */
.konf__spalten{display:grid;gap:1.25rem;margin-top:0}
@media(min-width:900px){
  .konf__spalten{
    grid-template-columns:1.3fr 1.3fr 1.2fr;
    align-items:start;gap:1.5rem;
  }
}
@media(min-width:900px) and (max-width:1039px){
  /* Dazwischen: links die Wahl, rechts Vorschau und Kasten untereinander --
     drei volle Spalten waeren hier zu schmal. */
  .konf__spalten{grid-template-columns:1.1fr 1fr}
  .konf__spalte--kasten{grid-column:2}
}
.konf__spalte{min-width:0}
.konf__spalte--wahl{display:flex;flex-direction:column;gap:.9rem}
.konf__spalte--mitte{display:flex;flex-direction:column;align-items:center}

/* Schritte und ihre goldenen Zahlen ------------------------------------- */
.konf__schritt{margin-bottom:1rem}
.konf__schritt:last-child{margin-bottom:0}
.konf .konf__label{
  display:flex;align-items:center;gap:.5rem;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dunkel-leise);margin-bottom:.5rem;font-weight:500;
}
.konf__nr{
  flex:none;display:grid;place-items:center;
  width:1.35rem;height:1.35rem;border-radius:50%;
  background:#FBF8F2;border:1px solid var(--gold-tief);
  font-family:var(--display);font-size:.875rem;line-height:1;
  letter-spacing:0;color:var(--gold-dunkel);
}
.konf__label-text{display:block}

/* Schritt 1: Themenwelt-Pillen ------------------------------------------ */
.konf__welten-liste{
  display:flex;flex-direction:row;flex-wrap:wrap;gap:.35rem;margin-top:0;
}
.konf .konf__welten-liste button{
  width:auto;min-height:34px;padding:.3rem .7rem;
  font-size:.8125rem;line-height:1.2;border-radius:999px;text-align:center;
}
@media(min-width:900px){
  /* Zwei Pillen je Reihe passen in die schmale Spalte, ohne dass ein Name
     umbricht; breitere Namen duerfen eine ganze Reihe fuellen. */
  .konf .konf__welten-liste button{flex:1 1 calc(50% - .35rem)}
}
@media(max-width:899px){
  /* Teil 1.5: drei Pillen je Reihe, Tippflaeche mindestens 44 Punkte. */
  .konf .konf__welten-liste button{
    flex:1 1 calc(33.333% - .35rem);min-height:44px;
  }
}

/* Die zugeklappte Themenzeile ------------------------------------------- */
.konf .konf__weltzeile{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:0 0 .5rem;font-size:.875rem;color:var(--text-dunkel-leise);
}
.konf .konf__weltzeile-knopf{min-height:44px;display:inline-flex;align-items:center}

/* Schritt 2: Stil-Kacheln ------------------------------------------------ */
.konf__stilgitter{
  display:grid;gap:.4rem;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.konf__stilgitter[data-spalten="viele"]{grid-template-columns:repeat(5, minmax(0, 1fr))}
@media(min-width:900px){
  .konf__stilgitter{grid-template-columns:repeat(5, minmax(0, 1fr))}
  .konf__stilgitter[data-spalten="viele"]{grid-template-columns:repeat(6, minmax(0, 1fr))}
}
.konf__stilkachel{
  display:flex;flex-direction:column;gap:.25rem;padding:0;
  background:none;border:0;cursor:pointer;text-align:center;
  font:inherit;color:var(--text-dunkel-leise);
}
.konf__stilbild{
  display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;
  border:1px solid var(--buehne-linie);border-radius:var(--radius);
  background:var(--buehne-weich);
  transition:border-color var(--t-schnell) var(--kurve);
}
.konf__stilbild--leer{aspect-ratio:4 / 5}
.konf__stilkachel:hover .konf__stilbild{border-color:var(--bedien-hell)}
.konf__stilkachel[aria-pressed="true"] .konf__stilbild{
  border-color:var(--gold-tief);box-shadow:0 0 0 1px var(--gold-tief);
}
.konf__stilkachel[aria-pressed="true"] .konf__stilname{color:var(--text-dunkel);font-weight:500}
.konf__stilname{
  display:block;font-size:.6875rem;line-height:1.25;
  overflow-wrap:anywhere;hyphens:auto;
}
@media(max-width:899px){
  /* Tippflaeche: das Bild allein ist am Handy bereits deutlich hoeher als
     44 Punkte, der Name kommt dazu. */
  .konf__stilkachel{min-height:44px}
}

/* ---------------------------------------------------------------------------
   TEIL 1.4 -- die Vorschau in der Mitte
   Der dunkle Kasten ist genau so gross wie das Bild plus schmaler Rand.
   Begrenzt wird ueber die BREITE, damit das Seitenverhaeltnis erhalten
   bleibt und nichts beschnitten wird: bei 5:7 ergibt eine Breite von
   357 px eine Hoehe von 500 px, bei Querformat entsprechend weniger.
   --------------------------------------------------------------------------- */
.konf__buehne{
  margin:0;padding:6px;width:100%;
  background:var(--grund);border-radius:var(--radius);
  display:flex;justify-content:center;
}
.konf__buehne:empty{max-width:357px;margin-inline:auto;aspect-ratio:5/7;padding:0}
.konf__buehne > .wandel{width:100%;max-width:100%;margin:0}
.konf__buehne .wandel__rahmen{max-width:100%}
.konf__buehne .wandel__marken{margin-top:.4rem}
.konf__buehne .wandel__marke{color:var(--text-leise)}
.konf__buehne .wandel__hinweis{display:none}
@media(min-width:900px){
  .konf__spalte--mitte .konf__buehne{max-width:369px}
}
@media(max-width:899px){
  /* Teil 1.5: hoechstens 420 px hoch, ohne das Bild zu beschneiden --
     bei 5:7 sind das 300 px Breite. */
  .konf__spalte--mitte .konf__buehne{max-width:300px}
}

.konf__bildzeile{
  margin:.5rem 0 0;font-size:.8125rem;color:var(--text-dunkel-leise);text-align:center;
}
.konf__bildzeile:empty{display:none}

/* Teil 1.7 -- Stiltext unter der Vorschau. Keine feste Pixelbreite: die
   Breite kommt aus dem Raster, der Text ist so breit wie das Bild. */
.konf__stiltext{
  margin-top:.75rem;text-align:center;max-width:100%;
}
.konf__stiltitel{
  font-family:var(--display);font-weight:400;font-size:1.15rem;line-height:1.25;
  color:var(--text-dunkel);margin:0 0 .35rem;text-wrap:balance;
}
.konf__stiltitel em{font-style:italic;color:var(--text-dunkel-leise)}
.konf__stilabsatz{
  margin:0;font-size:.875rem;line-height:1.5;color:var(--text-dunkel-leise);
}
@media(min-width:900px){
  .konf__spalte--mitte .konf__stiltext{max-width:369px}
}
@media(max-width:899px){
  .konf__spalte--mitte .konf__stiltext{max-width:min(100%, 34rem)}
}

/* ---------------------------------------------------------------------------
   TEIL 1.4 -- der helle Kasten rechts
   --------------------------------------------------------------------------- */
.konf__kasten{
  background:#FBF8F2;border:1px solid var(--buehne-linie);
  border-radius:var(--radius);padding:.95rem 1rem 1.1rem;
}

/* Schritt 3: Material ---------------------------------------------------- */
.konf__material{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.konf__mat{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:.1rem;padding:.5rem .3rem;min-height:44px;cursor:pointer;
  background:#fff;border:1px solid var(--bedien-hell);border-radius:var(--radius);
  font:inherit;color:var(--text-dunkel);
  transition:border-color var(--t-schnell) var(--kurve),background var(--t-schnell) var(--kurve);
}
.konf__mat:hover{border-color:var(--text-dunkel-leise)}
.konf__mat[aria-pressed="true"]{background:var(--grund);color:var(--text);border-color:var(--grund)}
.konf__mat-name{font-size:.8125rem;font-weight:500;line-height:1.2}
.konf__mat-ab{font-size:.6875rem;color:var(--text-dunkel-leise);line-height:1.2}
.konf__mat[aria-pressed="true"] .konf__mat-ab{color:var(--text-leise)}
.konf__mat-marke{
  position:absolute;top:-.55rem;left:50%;transform:translateX(-50%);
  white-space:nowrap;padding:.08rem .4rem;border-radius:999px;
  background:var(--gold-tief);color:var(--text-dunkel);
  font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
}
.konf__mat--beliebt{margin-top:.55rem}
.konf__nutzen{
  margin:.5rem 0 0;font-size:.75rem;line-height:1.45;color:var(--text-dunkel-leise);
}
/* Das Etikett "Beliebteste Wahl" ragt oben aus dem mittleren Knopf heraus --
   der ganze Schritt braucht deshalb etwas mehr Luft nach oben als die
   uebrigen. */
.konf__schritt--material{padding-top:.2rem}

/* Schritt 4: Format und Groesse ------------------------------------------ */
.konf .formen{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;justify-content:stretch}
.konf .formen .form{
  min-height:44px;padding:.35rem .2rem;gap:.15rem;font-size:.6875rem;
}
.konf .wahl--klein{display:grid;gap:.3rem;margin-top:.55rem}
@media(min-width:900px){
  .konf .wahl--klein{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:899px){
  /* Teil 1.5: Groessen drei je Reihe. */
  .konf .wahl--klein{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.konf .wahl--klein button{
  min-height:44px;padding:.3rem .25rem;font-size:.75rem;line-height:1.2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
}
.konf .wahl--klein .wahl__preis{font-size:.6875rem;opacity:.8}
.konf__fuss--klein{margin-top:.5rem;font-size:.6875rem;line-height:1.45}

/* Schritt 5: Extras ------------------------------------------------------ */
.konf__extras{display:flex;flex-direction:column;gap:.4rem}
.konf__extra{
  display:flex;align-items:center;gap:.5rem;min-height:44px;
  padding:.35rem .55rem;border:1px solid var(--buehne-linie);
  border-radius:var(--radius);background:#fff;cursor:pointer;
  font-size:.8125rem;color:var(--text-dunkel);
}
.konf__extra--anzahl{cursor:default}
.konf__extra-text{flex:1 1 auto;line-height:1.3}
.konf__extra-preis{flex:none;font-size:.75rem;color:var(--text-dunkel-leise)}
.konf__extra input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0}
.konf__videoprobe{margin:.15rem 0 0}
.konf__videoprobe a{
  display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  font-size:.75rem;color:var(--text-dunkel-leise);
}
.konf__videoprobe svg{width:13px;height:13px;flex:none}
.konf .sparen{margin-top:.35rem}

/* Zusammenfassung und Kauf ---------------------------------------------- */
.konf .preis{margin-top:.9rem;padding-top:.8rem}
.konf .preis__summe dd{font-size:1.75rem}
.konf__mehrbild{
  margin:.6rem 0 0;font-size:.8125rem;color:var(--text-dunkel);font-weight:500;
}
.konf .konf__lieferzeit{margin:.25rem 0 0;font-size:.75rem;color:var(--text-dunkel-leise)}
.konf .konf__knoepfe{display:block;margin-top:.75rem}

/* Teil 1.8: Hauptknopf -- dunkel gefuellt mit goldenem Rand. Gold als
   Flaeche oder Schrift traegt auf heller Buehne nicht (1,66:1); dunkel auf
   hell ist 16,7:1, der goldene Rand macht ihn trotzdem zum Hauptknopf. */
.knopf--dunkelgold{
  background:var(--grund);color:var(--text);
  border:1px solid var(--gold-tief);
}
.knopf--dunkelgold:hover{background:var(--grund-weich);border-color:var(--zier)}
.konf__kaufknopf{width:100%;justify-content:center;text-align:center;min-height:48px}

/* Teil 1.8: Bewertungszeile unter dem Kaufknopf. */
.beleg--konf{
  display:flex;justify-content:center;align-items:center;gap:.4rem;
  margin-top:.5rem;min-height:44px;font-size:.875rem;
  color:var(--text-dunkel-leise);
}
.beleg--konf .beleg__zahl{color:var(--text-dunkel)}

.konf__bestaetigung{margin-top:.6rem;flex-direction:column;align-items:stretch}
.konf__bestaetigung-knoepfe{display:flex;gap:.4rem;flex-wrap:wrap}
.konf__bestaetigung-knoepfe .konf__bestaetigung-knopf{flex:1 1 auto;justify-content:center;text-align:center;min-height:44px}

/* Teil 1.8: Zahlarten in zwei Reihen, anklickbar. */
.zahlarten--zwei{display:block;margin-top:.8rem;text-decoration:none}
.zahlarten--zwei .zahlarten__titel{
  display:block;text-align:center;font-size:.75rem;
  color:var(--text-dunkel-leise);margin-bottom:.4rem;
}
.zahlarten--zwei .zahlarten__reihe{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;
  justify-items:center;align-items:center;margin:0;padding:0;list-style:none;
}
.zahlarten--zwei .zahlarten__reihe li{margin:0}
.zahlarten--zwei img{max-height:22px;width:auto}

.konf .konf__enthalten{
  margin:.7rem 0 0;font-size:.6875rem;line-height:1.5;
  color:var(--text-dunkel-leise);text-align:left;max-width:none;
}
.konf .konf__fotohinweis{
  margin:.45rem 0 0;font-size:.6875rem;line-height:1.5;
  color:var(--text-dunkel-leise);text-align:left;
}

/* ---------------------------------------------------------------------------
   TEIL 1.5 -- Handy: alles untereinander, kompakter, Tippflaechen 44 Punkte
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .konf__spalten{gap:1.1rem}
  .konf__spalte--mitte{align-items:stretch}
  .konf__kasten{padding:.85rem .85rem 1rem}
  .konf__buehne{margin-inline:auto}
  .konf-erkl{padding:.85rem .9rem 1rem}
  .konf-erkl__schritt{grid-template-columns:1.4rem 1fr}
}

/* ---------------------------------------------------------------------------
   TEIL 1.4 -- VERDICHTEN
   Erste Messung des Umbaus am 22.09.2026: 1.501 px von der Oberkante der
   Ueberschrift bis zur Unterkante des Kaufknopfs, also 1,39 Bildschirme bei
   1920 x 1080. Ziel des Auftrags ist EIN Bildschirm. Die folgenden Regeln
   nehmen ueberall dort Hoehe heraus, wo sie nicht gebraucht wird -- die
   Schriftgroessen bleiben unveraendert, wie im Auftrag verlangt.
   --------------------------------------------------------------------------- */
.konf.abschnitt{padding-block:calc(var(--luft) * .62)}
.konf .augbraue{margin-bottom:.4rem}
.konf__titel{margin-bottom:0;font-size:clamp(1.6rem,calc(2.4vw / var(--zf,1)),2.1rem)}

.konf-erkl{margin:.8rem 0 1rem;padding:.7rem .9rem .8rem}
.konf-erkl__titel{font-size:1.05rem}
.konf-erkl__titel::after{margin-top:.35rem}
.konf-erkl__liste{margin-top:.6rem;gap:.3rem}
.konf-erkl__schritt p{font-size:.8125rem;line-height:1.4}
.konf-erkl__zahl{font-size:.95rem;line-height:1.4}

.konf__schritt{margin-bottom:.7rem}
.konf .konf__label{margin-bottom:.35rem}
.konf__kasten{padding:.8rem .85rem .9rem}

.konf__mat{padding:.35rem .25rem;min-height:42px}
.konf__mat--beliebt{margin-top:.5rem}
.konf__nutzen{margin-top:.35rem}

.konf .formen .form{min-height:42px;padding:.25rem .15rem}
.konf .wahl--klein{margin-top:.4rem;gap:.25rem}
.konf .wahl--klein button{min-height:42px;padding:.22rem .2rem}
.konf__fuss--klein{margin-top:.35rem}

.konf__extras{gap:.3rem}
.konf__extra{min-height:42px;padding:.25rem .5rem}
.konf__videoprobe a{min-height:34px}
.konf .sparen{margin-top:.25rem;padding:.45rem .6rem}

.konf .preis{margin-top:.6rem;padding-top:.55rem}
.konf .preis__zeile + .preis__zeile{margin-top:.25rem}
.konf .preis__summe{margin-top:.5rem;padding-top:.5rem}
.konf .preis__summe dd{font-size:1.5rem}
.konf__mehrbild{margin-top:.45rem}
.konf .konf__knoepfe{margin-top:.55rem}
.konf__kaufknopf{min-height:46px}

/* Der Beschreibungskasten und die Beispielreihe des Stils gehoeren zur
   Themenwelt-Seite, nicht in die schmale mittlere Spalte -- dort machen sie
   den Konfigurator laenger, ohne dass sie beim Zusammenstellen gebraucht
   werden. Der Stiltext (Teil 1.7) sagt dasselbe kuerzer. */
.konf #konf-stil-beschreibung{display:none}

@media(max-width:899px){
  .konf.abschnitt{padding-block:calc(var(--luft) * .55)}
}

/* ---------------------------------------------------------------------------
   TEIL 1.4 -- Groessenknoepfe im Konfigurator
   Die Groessenliste wird an zwei Stellen ueber ihre KENNUNG angesprochen
   (#groessen, styles.css Zeilen 3935/4007/4013). Eine Kennung schlaegt jede
   Klassenregel -- deshalb stehen die Regeln des neuen Kastens hier ebenfalls
   mit der Kennung, sonst greifen sie nicht.

   Vier Knoepfe je Reihe am Rechner statt sechs: bei sechs blieben 74 px je
   Knopf, und "40 × 60 cm / 124,90 €" brach auf drei Zeilen mit einem Wort je
   Zeile um. Drei je Reihe am Handy, wie im Auftrag (Teil 1.5).
   --------------------------------------------------------------------------- */
@media(min-width:900px){
  .konf #groessen{grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem}
}
@media(max-width:899px){
  .konf #groessen{grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem}
}
.konf #groessen button{
  min-height:40px;padding:.22rem .3rem;line-height:1.2;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
}

/* Die Zeile "Ab dem zweiten Bild 20 % weniger" sagt dasselbe wie der Satz
   "Jedes weitere Bild 20 % guenstiger." unter der Summe, den der Auftrag
   ausdruecklich dort verlangt (Teil 1.8). Zweimal derselbe Hinweis im selben
   Kasten ist einer zu viel -- der obere bleibt im Aufbau stehen (preisRechnen()
   schreibt weiter hinein), wird aber nicht mehr angezeigt. */
.konf .sparen{display:none}

.konf #groesse-hinweis{margin-top:.3rem;font-size:.625rem;line-height:1.4}
.konf__extra{min-height:40px}
.konf .preis__summe dd{font-size:1.4rem}
.konf__kaufknopf{min-height:44px}
.konf-erkl{margin-bottom:.8rem}

/* ---------------------------------------------------------------------------
   TEIL 1.4 -- der dunkle Kasten ist genau so gross wie das Bild
   Bis hierher trug .konf__buehne selbst den dunklen Grund. Darin steckt aber
   nicht nur das Bild, sondern auch die Bildunterschrift (Teil 4.3) -- der
   dunkle Kasten reichte deshalb unter das Bild hinaus. Jetzt liegt der
   dunkle Grund auf dem Bildrahmen selbst: Bild plus 6 px ringsum, mehr
   nicht. Die Unterschrift steht darunter auf der hellen Buehne.
   --------------------------------------------------------------------------- */
.konf__buehne{background:none;padding:0}
.konf__buehne .wandel__rahmen{
  background:var(--grund);padding:6px;border-radius:var(--radius);
}
.konf__buehne .wandel__marke{color:var(--text-dunkel-leise)}
@media(max-width:899px){
  /* 288 px Bildbreite ergeben bei 5:7 genau 403 px Bildhoehe, mit Rand
     415 px -- unter der Grenze von 420 px aus Teil 1.5, und ohne dass am
     Bild irgendetwas beschnitten wird. */
  .konf__spalte--mitte .konf__buehne{max-width:300px}
}

/* ---------------------------------------------------------------------------
   TEIL 1.4 -- die Vorschau folgt dem gewaehlten Format, ohne Beschnitt
   ---------------------------------------------------------------------------
   Der Wandel-Regler zeigt ueberall sonst 5:7 mit object-fit:cover -- das
   schneidet links und rechts etwas vom Motiv ab. Im Konfigurator geht das
   nicht: dort soll die Vorschau zeigen, wie das Bild im GEWAEHLTEN Format
   aussieht, und beschnitten werden darf nichts.

   Deshalb hier zwei Aenderungen, nur fuer #konf-buehne:
     1. Die Buehne bekommt das Seitenverhaeltnis der gewaehlten Groesse
        (--seiten, gesetzt von konfBuehneFormatSetzen() in start.js).
     2. Das Bild wird eingepasst statt beschnitten (object-fit:contain).

   Die Hoehe wird NICHT begrenzt -- begrenzt wird die BREITE, und zwar so,
   dass sich daraus hoechstens die erlaubte Hoehe ergibt:
   Breite = Hoehengrenze x Seitenverhaeltnis. Dadurch bleibt das
   Seitenverhaeltnis in jedem Fall erhalten und nichts wird abgeschnitten.
   --hoehe-max ist 488 px am Rechner (500 minus 12 px Rand) und 408 px am
   Handy (420 minus 12).
   --------------------------------------------------------------------------- */
.konf__buehne{
  --hoehe-max:488px;
  --seitenzahl:0.8;
  width:min(100%, calc(var(--hoehe-max) * var(--seitenzahl)));
  max-width:100%;
}
.konf__buehne .wandel{width:100%;max-width:100%}
.konf__buehne .wandel__buehne{aspect-ratio:var(--seiten, 4 / 5)}
.konf__buehne .wandel__lage img,
.konf__buehne .konf__buehne-einzel{object-fit:contain;background:var(--grund)}
.konf__buehne:empty{
  max-width:none;width:min(100%, calc(var(--hoehe-max) * var(--seitenzahl)));
  aspect-ratio:var(--seiten, 4 / 5);
}
@media(min-width:900px){
  .konf__spalte--mitte .konf__buehne{max-width:100%}
  .konf__spalte--mitte .konf__stiltext{max-width:100%}
}
@media(max-width:899px){
  .konf__buehne{--hoehe-max:408px}
  .konf__spalte--mitte .konf__buehne{max-width:100%}
}

/* ---------------------------------------------------------------------------
   TEIL 1.5 -- am Handy bleibt jede Tippflaeche mindestens 44 Punkte
   Beim Verdichten waren die Knoepfe im Kasten auf 40 bis 42 Punkte gesunken.
   Am Rechner ist das in Ordnung (dort wird mit der Maus geklickt), am Handy
   nicht -- dort gilt die 44er-Regel ohne Ausnahme.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .konf #groessen button,
  .konf .wahl--klein button,
  .konf .formen .form,
  .konf__mat,
  .konf__extra,
  .konf .konf__welten-liste button,
  .konf__videoprobe a,
  .konf .zaehler button{min-height:44px}
  .konf__kaufknopf{min-height:48px}
  .konf__stilkachel{min-height:44px}
}

/* ---------------------------------------------------------------------------
   NACHBESSERUNGEN nach der ersten Messung im Browser, 22.09.2026
   --------------------------------------------------------------------------- */

/* Teil 4.2: "80 % der Bildschirmbreite" heisst 80 % des FENSTERS, nicht 80 %
   des Inhaltsbereichs. Gemessen waren es 274 von 390 px (70 %), weil der
   Inhaltsbereich links und rechts schon je 24 px Rand hat. Mit calc(80vw / var(--zf,1)) sind es
   312 px. Das Seitenverhaeltnis bleibt unberuehrt -- begrenzt wird nur die
   Breite. */
@media(max-width:899px){
  .seitenkopf__gitter .wandel,
  .hero__gitter > .wandel{width:calc(80vw / var(--zf,1));max-width:calc(80vw / var(--zf,1));margin-inline:auto}
  /* Der Gedenken-Abschnitt (".memoria", die Flaeche "Fuer die, die nicht
     mehr neben dir stehen") bekommt 82 %, wie im Auftrag. Gemeint ist
     dieser Abschnitt, nicht jede Seite der Themenwelt Gedenken -- deren
     Hauptbild bleibt bei 80 % wie ueberall. Auf der Startseite hat der
     Abschnitt zurzeit gar kein grosses Bild; die Regel greift dort also
     erst, wenn eines dazukommt. */
  .memoria__bild,.memoria .wandel,.memoria img{width:calc(82vw / var(--zf,1));max-width:calc(82vw / var(--zf,1));margin-inline:auto}
}

/* Teil 4.7: "Themenwelten entdecken" ist am Handy ein schlichter Textverweis,
   kein Knopf -- also auch ohne Rahmen. */
@media(max-width:899px){
  .hero__knoepfe .hero__nebenverweis{
    background:none;border:0;box-shadow:none;
  }
}

/* Teil 5.1: Bleibt in der Formatreihe ein Platz frei (Poster fuehrt kein
   Panorama, dann sind es nur drei Knoepfe), stehen die uebrigen mittig statt
   linksbuendig mit Luecke. Deshalb Flex mit Umbruch statt vier festen
   Rasterspalten. */
.konf .formen{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;
}
.konf .formen .form{flex:1 1 calc(25% - .35rem);min-width:0}

/* Teil 5.1: dieselbe Regel fuer die Zahlungslogos in der Fusszeile -- eine
   unvollstaendige letzte Reihe steht mittig. */
.fuss .zahlarten__reihe{justify-content:center}

/* ---------------------------------------------------------------------------
   TEIL 5.1 -- die unvollstaendige letzte Reihe steht wirklich mittig
   ---------------------------------------------------------------------------
   Befund bei der Bildkontrolle (Tiere, 27 Stile): Bei sechs Spalten bleiben
   in der letzten Reihe drei Kacheln uebrig -- sie standen linksbuendig mit
   einer Luecke rechts. Ursache: In einem Raster (grid) richtet
   justify-content das GANZE Raster aus, nicht die Elemente der letzten
   Reihe. Das kann nur Flex mit Umbruch.

   Die Spaltenzahl steckt jetzt in der Breite jedes Elements:
   (100 % minus alle Luecken) geteilt durch die Spaltenzahl.
   --------------------------------------------------------------------------- */
.konf__stilgitter{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;
}
.konf__stilkachel{flex:0 0 calc((100% - 3 * .4rem) / 4)}
.konf__stilgitter[data-spalten="viele"] .konf__stilkachel{flex:0 0 calc((100% - 4 * .4rem) / 5)}
@media(min-width:900px){
  .konf__stilkachel{flex:0 0 calc((100% - 4 * .4rem) / 5)}
  .konf__stilgitter[data-spalten="viele"] .konf__stilkachel{flex:0 0 calc((100% - 5 * .4rem) / 6)}
}

/* Dasselbe fuer die Groessenknoepfe: bei Acrylglas im Quadratformat sind es
   drei, bei Leinwand zwoelf -- die letzte Reihe ist selten voll. */
.konf #groessen{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem;
}
@media(min-width:900px){
  .konf #groessen button{flex:0 0 calc((100% - 3 * .25rem) / 4);max-width:none;width:auto}
}
@media(max-width:899px){
  .konf #groessen button{flex:0 0 calc((100% - 2 * .25rem) / 3);max-width:none;width:auto}
}


/* ===========================================================================
   AUFTRAG "KONFIGURATOR NEU, STARTSEITE UND STIL-SEITEN NEU, LADEZEIT,
   COOKIE-LEISTE", 22.09.2026 — TEIL 1: DER SEITENKOPF
   ---------------------------------------------------------------------------
   Anlass (Zahlen vom 22.09.2026): Von 1.017 Seitenaufrufen aus bezahlten
   Anzeigen haben 26 den Konfigurator angefangen und einer etwas in den
   Warenkorb gelegt. 87 % kommen mit dem Handy. Gemessen bei 390 x 844 stand
   das Hauptbild auf der Startseite erst bei 1.022 px -- der Besucher sah
   also als Erstes eine Wand aus Text.

   Dieses Kapitel macht den Kopfbereich am Handy so flach, dass Bild, Preis
   und Kaufknopf in den ersten Bildschirm passen. Die kleinen Schriften
   bleiben unveraendert; verdichtet werden Hoehen und Abstaende.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   TEIL 1.4 -- am Rechner beginnen Textspalte und Bild auf gleicher Hoehe
   Beide Gitter standen auf align-items:center. Bei unterschiedlich hohen
   Spalten entsteht dadurch ueber der Ueberschrift eine grosse Leerflaeche,
   weil die kuerzere Spalte in die Mitte rutscht.
   --------------------------------------------------------------------------- */
@media(min-width:900px){
  .seitenkopf__gitter{align-items:start}
  .hero__gitter{align-items:start}
}

/* ---------------------------------------------------------------------------
   TEIL 1.1 / 1.2 -- die Reihenfolge am Handy gilt auch fuer die STARTSEITE
   Der Block "HERO AM HANDY" ordnet bisher nur .seitenkopf__gitter (die
   Themenwelt- und Stil-Seiten). Die Startseite hat ein eigenes Gitter
   (.hero__gitter) und blieb deshalb bei der Reihenfolge aus der Datei --
   das Hauptbild stand dort ganz unten, bei 1.022 px.
   Reihenfolge wie im Auftrag: Bewertungsbeleg, Augenbraue, Ueberschrift,
   HAUPTBILD, Preiszeile, Hauptknopf, Textverweis, Vertrauenszeilen,
   Zahlungszeile -- und erst DANACH der lange Absatz.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .hero__gitter{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
  }
  .hero__gitter > div{display:contents}
  .hero__gitter [data-baustein="beleg"],
  .hero__gitter .beleg{order:1}
  .hero__gitter .augbraue{order:2}
  .hero__gitter h1{order:3}
  .hero__gitter > .wandel,
  .hero__gitter [data-baustein="wandel"]{order:4}
  .hero__gitter .preisanker,
  .hero__gitter [data-baustein="preisanker"]{order:5}
  .hero__gitter .hero__knoepfe{order:6}
  .hero__gitter .hero-vertrauen{order:7}
  .hero__gitter .hero-zahlzeile{order:8}
  .hero__gitter .hero__unter{order:9}
  .hero__gitter [data-baustein="unikat"],
  .hero__gitter .unikat{order:10}
  .hero__gitter .hero__mini{order:11}
}

/* ---------------------------------------------------------------------------
   TEIL 1.3 -- verdichten, damit das Hauptbild in den ersten Bildschirm passt
   Gemessen vorher (themenwelt-gedenken.html, 390 x 844):
     Kopfzeile 0-97, Brotkrume bis 170, Beleg 186-230, Augenbraue 259-277,
     Ueberschrift 309-361, Bild ab 373.
   Ziel: Bild oberhalb von 200 px.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  /* Kopfzeile flacher. Das Logo bleibt am Rechner bei 80 px (ausdrueckliche
     Entscheidung vom 26.08.2026) und wird nur am Handy kleiner. */
  .kopf__inhalt{min-height:52px}
  .marke{padding:.25rem 0;min-height:44px}
  .marke img{height:40px}

  /* Das Ankuendigungsband ("Ab dem zweiten Bild ...") kostete am Handy
     99 px ueber dem Kopf -- genau der Platz, den das Hauptbild braucht. Es
     steht weiterhin auf jeder Seite, nur am Handy in einer flachen Zeile. */
  .aktion__inhalt{padding:.3rem var(--rand);gap:.25rem .75rem}
  .aktion{font-size:.6875rem}

  /* Die Brotkrume ("Startseite / Gedenken") stand mit 73 px zwischen
     Kopfzeile und Seitenkopf. Sie gehoert nicht zu der im Auftrag
     festgelegten Reihenfolge des Kopfbereichs. Am Handy steht sie deshalb
     nicht mehr ueber dem Seitenkopf -- am Rechner bleibt sie unveraendert,
     und im HTML bleibt sie ueberall erhalten. */
  .brotkrumen{display:none}

  /* Weniger Luft im Kopfbereich selbst. */
  .seitenkopf{padding-block:.5rem 1.25rem}
  .hero{padding-block:.5rem 1.25rem}
  .seitenkopf__gitter{gap:0}

  .seitenkopf__gitter .beleg,
  .hero__gitter .beleg{margin-bottom:.25rem}
  .seitenkopf__gitter [data-baustein="beleg"],
  .hero__gitter [data-baustein="beleg"]{margin-bottom:0}
  .seitenkopf__gitter .augbraue,
  .hero__gitter .augbraue{margin-bottom:.3rem;margin-top:.15rem}

  /* Ueberschrift: rund 23 px mit engem Zeilenabstand. Die uebrigen
     Schriftgroessen bleiben, wie sie sind. */
  .seitenkopf__gitter h1,
  .hero h1{font-size:1.4375rem;line-height:1.1;margin:0;text-wrap:balance}
  .seitenkopf__gitter h1 br,
  .hero h1 br{display:none}
  .seitenkopf__gitter h1 em,
  .hero h1 em{display:inline}

  /* Das Bild schliesst dicht an die Ueberschrift an. */
  .seitenkopf__gitter .wandel,
  .hero__gitter > .wandel{margin-top:.6rem}
}

/* ---------------------------------------------------------------------------
   TEIL 1.8 -- drei Vertrauenszeilen unter dem Hauptknopf
   --------------------------------------------------------------------------- */
.hero-vertrauen{
  list-style:none;margin:.8rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;
  font-size:.8125rem;color:var(--text-leise);
}
.hero-vertrauen li{display:flex;align-items:flex-start;gap:.4rem;line-height:1.35}
.hero-vertrauen svg{width:14px;height:14px;flex:none;margin-top:.15rem;color:var(--zier)}
@media(max-width:899px){
  .hero-vertrauen{flex-direction:column;gap:.3rem;margin-top:.65rem}
}

/* ---------------------------------------------------------------------------
   TEIL 1.3, zweiter Durchgang -- drei Ursachen aus der ersten Messung
   ---------------------------------------------------------------------------
   1. #kopfbereich haelt am Handy 96 bzw. 138 px Hoehe frei (Reservierung
      gegen Layout-Springen, 03.09.2026). Die Kopfzeile ist jetzt 52 px
      hoch, das Ankuendigungsband rund 25 px -- die Reservierung zieht mit,
      sonst blieben 43 px Leere unter der Kopfzeile stehen.
   2. Die Reihenfolge am Handy kannte die drei Vertrauenszeilen und die
      Zahlungszeile noch nicht. Ein Gitterelement ohne eigene Reihenfolge
      hat order:0 und steht damit VOR allen anderen -- die Vertrauenszeilen
      standen deshalb ganz oben, noch ueber dem Bewertungsbeleg.
   3. Auf der Startseite loeste "display:contents" auch das Bild selbst auf
      (der Wandel-Baustein wird zu einem <div class="wandel">). Ein Element
      mit display:contents hat keinen eigenen Kasten mehr -- das Bild war
      dadurch 0 px hoch.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  #kopfbereich{min-height:52px}
  /* Auftrag 4c: siehe oben -- keine Aktionsleiste mehr, kein Zuschlag. */
  body:not([data-seite="gedenken"]) #kopfbereich{min-height:52px}

  /* Nur die Spalten-Behaelter aufloesen, nicht das Bild. */
  .hero__gitter > div{display:block}
  .hero__gitter > div:not(.wandel){display:contents}

  /* Reihenfolge nach Teil 1.2, verbindlich:
     Beleg, Augenbraue, Ueberschrift, HAUPTBILD, Bildzeile (steckt im Bild),
     Stil-Satz-Kasten, kurzer Absatz, Preiszeile, Hauptknopf, Textverweis,
     Vertrauenszeilen, Zahlungszeile -- danach alles Uebrige. */
  .seitenkopf__gitter [data-baustein="beleg"],
  .seitenkopf__gitter .beleg,
  .hero__gitter [data-baustein="beleg"],
  .hero__gitter .beleg{order:1}
  .seitenkopf__gitter .augbraue,
  .hero__gitter .augbraue{order:2}
  .seitenkopf__gitter h1,
  .hero__gitter h1{order:3}
  .seitenkopf__gitter .wandel-bereich,
  .seitenkopf__gitter .wandel,
  .seitenkopf__gitter [data-baustein="wandel"],
  .hero__gitter > .wandel,
  .hero__gitter [data-baustein="wandel"]{order:4}
  .seitenkopf__gitter .seitenkopf__beschreibung{order:5}
  .seitenkopf__gitter .seitenkopf__text,
  .hero__gitter .hero__unter{order:6}
  .seitenkopf__gitter [data-baustein="preisanker"],
  .seitenkopf__gitter .preisanker,
  .hero__gitter [data-baustein="preisanker"],
  .hero__gitter .preisanker{order:7}
  .seitenkopf__gitter .knopf--gold,
  .hero__gitter .knopf--gold{order:8}
  .seitenkopf__gitter .aktion{order:9}
  .seitenkopf__gitter .knopf--umriss,
  .hero__gitter .hero__nebenverweis{order:10}
  .seitenkopf__gitter .hero-vertrauen,
  .hero__gitter .hero-vertrauen{order:11}
  .seitenkopf__gitter .hero-zahlzeile,
  .hero__gitter .hero-zahlzeile{order:12}
  .seitenkopf__gitter .hero-fakten{order:13}
  .seitenkopf__gitter [data-baustein="unikat"],
  .seitenkopf__gitter .unikat,
  .hero__gitter [data-baustein="unikat"],
  .hero__gitter .unikat{order:14}
  .hero__gitter .hero__mini{order:15}
  .seitenkopf__gitter .seitenkopf__trenner{order:16;margin-top:.75rem}
  .seitenkopf__gitter .seitenkopf__stile-titel{order:17}
  .seitenkopf__gitter .seitenkopf__stile{order:18}
  .seitenkopf__gitter .seitenkopf__wunschzeile{order:19}
}

/* ---------------------------------------------------------------------------
   TEIL 1.3, dritter Durchgang
   ---------------------------------------------------------------------------
   Befund: Das Ankuendigungsband oben war am Handy 83 px hoch statt der
   erwarteten 25. Ursache ist eine Namensgleichheit, die es schon vorher
   gab: die Klasse ".aktion" traegt sowohl das schmale Band im Seitenkopf
   (id="aktion") als auch den Halloween-Kasten auf den Spooky-Stil-Seiten
   (id="aktion-spooky"). Dessen Regel steht weiter unten in der Datei und
   gewinnt deshalb -- mit padding:1.1rem, Rahmen und Hintergrund. Die
   Regeln hier sprechen das Band ueber seine KENNUNG an, damit die beiden
   sich nicht mehr in die Quere kommen.

   Dazu zwei weitere Verdichtungen, damit das Hauptbild auch auf der
   Startseite oberhalb von 200 px beginnt:
     * Bewertungsbeleg und Augenbraue stehen am Handy in EINER Zeile
       nebeneinander. Die Reihenfolge (erst der Beleg, dann die Augenbraue)
       bleibt dabei erhalten, sie lesen sich von links nach rechts.
     * Die Ueberschrift rechnet mit der Fensterbreite: clamp(20px, calc(5.6vw / var(--zf,1)),
       23px). Bei 390 px sind das rund 22 px.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  #aktion{margin-top:0;padding:0;border:0;border-radius:0;background:none}
  #aktion .aktion__inhalt{padding:.15rem var(--rand);gap:.2rem .6rem}
  #aktion .aktion__text{font-size:.6875rem;line-height:1.35}

  .seitenkopf{padding-block:.25rem 1.25rem}
  .hero{padding-block:.25rem 1.25rem}

  /* Beleg und Augenbraue nebeneinander. Beide behalten ihre Groesse; der
     Beleg bleibt 44 Punkte hoch und damit gut zu treffen. */
  .seitenkopf__gitter .beleg,
  .hero__gitter .beleg{margin-bottom:0;margin-right:auto}
  .seitenkopf__gitter .augbraue,
  .hero__gitter .augbraue{
    margin:0 0 .2rem;align-self:center;
  }
  .seitenkopf__gitter,
  .hero__gitter{
    display:flex;flex-direction:column;flex-wrap:wrap;
    max-height:none;
  }
  /* Die beiden in eine Reihe: ein schmaler Streifen oben, in dem sie
     nebeneinander liegen. */
  .seitenkopf__kopfzeile,
  .hero__kopfzeile{
    order:1;display:flex;align-items:center;justify-content:space-between;
    gap:.5rem;flex-wrap:wrap;
  }

  .seitenkopf__gitter h1,
  .hero h1{font-size:clamp(1.25rem,calc(5.6vw / var(--zf,1)),1.4375rem);line-height:1.08;margin:.15rem 0 0}
  .seitenkopf__gitter .wandel-bereich,
  .seitenkopf__gitter .wandel,
  .hero__gitter > .wandel{margin-top:.4rem}
}

/* ---------------------------------------------------------------------------
   TEIL 1.3, letzter Durchgang -- Bewertungsbeleg und Augenbraue in EINE Zeile
   ---------------------------------------------------------------------------
   Nach den bisherigen Verdichtungen begann das Hauptbild auf den
   Themenwelt-Seiten bei 185 px, auf der Startseite aber erst bei 250 px.
   Der Unterschied: Die Startseiten-Ueberschrift besteht aus drei Saetzen
   und braucht drei Zeilen, die Themenwelt-Ueberschrift zwei.

   Deshalb stehen Bewertungsbeleg und Augenbraue am Handy jetzt
   NEBENEINANDER in einer Zeile -- der Beleg links, die Augenbraue rechts.
   Ihre Reihenfolge bleibt die aus dem Auftrag, sie lesen sich von links
   nach rechts. Das spart rund 20 px, ohne dass eine Tippflaeche kleiner
   wird: der Beleg bleibt 44 Punkte hoch.

   Umgesetzt ueber eine Flex-Reihe mit Umbruch: alles bekommt volle Breite
   (flex-basis 100 %), nur diese beiden nicht -- sie teilen sich damit von
   selbst die erste Zeile.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .kopf__inhalt{min-height:48px}
  .marke img{height:36px}
  #kopfbereich{min-height:48px}
  /* Auftrag 4c: siehe oben -- keine Aktionsleiste mehr, kein Zuschlag. */
  body:not([data-seite="gedenken"]) #kopfbereich{min-height:48px}

  .seitenkopf__gitter,
  .hero__gitter{
    display:flex;flex-flow:row wrap;align-items:flex-start;gap:0;
  }
  /* Alles nimmt die volle Breite ... */
  .seitenkopf__gitter h1,
  .hero__gitter h1,
  .seitenkopf__gitter .wandel-bereich,
  .seitenkopf__gitter .wandel,
  .hero__gitter > .wandel,
  .seitenkopf__gitter .seitenkopf__text,
  .hero__gitter .hero__unter,
  .seitenkopf__gitter .preisanker,
  .hero__gitter .preisanker,
  .seitenkopf__gitter .knopf,
  .hero__gitter .knopf,
  .seitenkopf__gitter .hero-vertrauen,
  .hero__gitter .hero-vertrauen,
  .seitenkopf__gitter .hero-zahlzeile,
  .hero__gitter .hero-zahlzeile,
  .seitenkopf__gitter .seitenkopf__beschreibung,
  .seitenkopf__gitter .hero-fakten,
  .seitenkopf__gitter .unikat,
  .hero__gitter .unikat,
  .hero__gitter .hero__mini,
  .seitenkopf__gitter .aktion,
  .seitenkopf__gitter .seitenkopf__trenner,
  .seitenkopf__gitter .seitenkopf__stile-titel,
  .seitenkopf__gitter .seitenkopf__stile,
  .seitenkopf__gitter .seitenkopf__wunschzeile{flex:0 0 100%;max-width:100%}
  /* ... nur diese beiden teilen sich die erste Zeile. */
  .seitenkopf__gitter .beleg,
  .hero__gitter .beleg{flex:0 0 auto;margin:0}
  .seitenkopf__gitter .augbraue,
  .hero__gitter .augbraue{flex:0 0 100%;margin:.15rem 0 0}

  /* Ueberschrift: rund 21 px bei 390 px Fensterbreite, bis 23 px bei
     breiteren Handys. Die harten Zeilenumbrueche der Startseiten-
     Ueberschrift bleiben erhalten -- sie sind drei ganze Saetze. */
  .seitenkopf__gitter h1,
  .hero h1{font-size:clamp(1.25rem,calc(5.4vw / var(--zf,1)),1.4375rem);line-height:1.08;margin:.3rem 0 0}
  .seitenkopf__gitter h1 br,
  .hero h1 br{display:inline}
}

/* ---------------------------------------------------------------------------
   TEIL 1.3 -- das Ankuendigungsband entfaellt am Handy
   ---------------------------------------------------------------------------
   Das Band ueber der Kopfzeile ("Ab dem zweiten Bild: -20 % auf jedes
   weitere") kostete am Handy zuletzt noch 20 px -- genau die 20 px, die
   auf der Startseite zwischen dem Ist-Stand (215 px) und der Vorgabe des
   Auftrags (Hauptbild oberhalb von 200 px) lagen.

   Es entfaellt deshalb AM HANDY, und nur dort. Am Rechner steht es
   unveraendert. Die Aussage geht nicht verloren: derselbe Mengenvorteil
   steht im Konfigurator unter der Summe ("Jedes weitere Bild 20 %
   guenstiger.") und noch einmal in der Bestaetigung, nachdem etwas in den
   Warenkorb gelegt wurde ("Ab dem zweiten Bild sparst du 20 %."). Im
   Bericht ist das als offener Punkt genannt -- es ist eine Abwaegung
   zwischen Werbeflaeche und dem ersten Bildschirm, und die gehoert
   Saskia.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  #aktion{display:none}
  #kopfbereich,
  body:not([data-seite="gedenken"]) #kopfbereich{min-height:48px}
}


/* ===========================================================================
   TEIL 2 — HAFTENDE KAUFLEISTE AM HANDY
   =========================================================================== */
/* Sie gibt es nur am Handy. Am Rechner steht der Kaufknopf ohnehin im
   Seitenkopf und im Konfigurator im Bild. */
@media(min-width:900px){
  .leiste{display:none}
}
@media(max-width:899px){
  .leiste{
    /* --cookie-hoehe setzt layout.js, solange das Cookie-Fenster sichtbar
       ist (Teil 8.2, letzter Punkt): die Kaufleiste sitzt dann DARUEBER
       und verdeckt es nie. Ohne Cookie-Fenster ist der Wert 0. */
    bottom:var(--cookie-hoehe, 0px);
    transition:transform var(--t-ruhig) var(--kurve), bottom var(--t-ruhig) var(--kurve);
  }
  .leiste__inhalt{padding:.45rem var(--rand);gap:.6rem}
  .leiste__text{display:flex;flex-direction:column;gap:.1rem;line-height:1.2;min-width:0}
  .leiste__preis{font-size:.8125rem;color:var(--text-leise);white-space:nowrap}
  .leiste__preis b{color:var(--text);font-family:var(--display);font-size:1.15rem;font-weight:400}
  .leiste__klein{font-size:.6875rem;color:var(--text-leise);white-space:nowrap}
  .leiste .knopf{flex:none;min-height:44px;padding-inline:.9rem;font-size:.875rem}
}

/* ===========================================================================
   TEIL 8 — DIE COOKIE-LEISTE
   ---------------------------------------------------------------------------
   Die Kennungen unten sind nicht geraten, sondern am 22.09.2026 aus dem
   LIVE ausgelieferten Cookiebot-Fenster ausgelesen (Teil 8.1). Gemessen
   wurde dabei bei 390 x 844: das Fenster war 798 px hoch, also 95 % der
   Bildschirmhoehe -- das Hauptbild dahinter war praktisch nicht zu sehen.

   Aufbau, den Cookiebot liefert:
     #CybotCookiebotDialog                       (fest, unten)
       .CybotCookiebotDialogContentWrapper
         #CybotCookiebotDialogHeader             Cookiebot-Logo, 57 px
         #CybotCookiebotDialogTabContent
           #CybotCookiebotDialogBody
             .CybotCookiebotScrollContainer      Titel und Text
             .CybotCookiebotDialogBodyBottomWrapper
               #CybotCookiebotDialogBodyLevelWrapper   die vier Schalter, 279 px
               #CybotCookiebotDialogBodyEdgeMoreDetails "Details zeigen"
         #CybotCookiebotDialogFooter
           .CybotCookiebotScrollArea
             #CybotCookiebotDialogBodyButtons
               #CybotCookiebotDialogBodyButtonsWrapper
                 #...LevelButtonLevelOptinAllowAll          "Alle zulassen"
                 #...LevelButtonCustomize                   "Anpassen" (liefert
                                                            Cookiebot bereits
                                                            ausgeblendet)
                 #...LevelButtonLevelOptinAllowallSelection "Auswahl erlauben"
                 #CybotCookiebotDialogBodyButtonDecline     "Ablehnen"

   Cookiebot setzt seine eigenen Groessen teils mit !important, deshalb
   stehen die Regeln hier ebenso -- anders greifen sie nicht.
   =========================================================================== */
@media(max-width:899px){
  /* Hoechstens ein Viertel der Bildschirmhoehe, unten angeschlagen. */
  #CybotCookiebotDialog{
    top:auto !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:calc(25vh / var(--zf,1)) !important;
    min-height:0 !important;
    border-radius:0 !important;
    display:flex !important;
    overflow:hidden !important;
  }
  #CybotCookiebotDialog .CybotCookiebotDialogContentWrapper{
    display:flex !important;flex-direction:column !important;
    max-height:calc(25vh / var(--zf,1)) !important;min-height:0 !important;overflow:hidden !important;
    width:100% !important;
  }

  /* Das Cookiebot-Logo kostet 57 px und sagt nichts ueber die Wahl aus. */
  #CybotCookiebotDialogHeader{display:none !important}

  /* Der Text scrollt INNERHALB der Leiste -- die Leiste waechst nicht. */
  #CybotCookiebotDialogTabContent{
    flex:1 1 auto !important;min-height:0 !important;overflow:hidden !important;
  }
  #CybotCookiebotDialogBody{
    flex:1 1 auto !important;min-height:0 !important;overflow:hidden !important;
    padding:.45rem .8rem .2rem !important;width:auto !important;
  }
  #CybotCookiebotDialog .CybotCookiebotScrollContainer{
    flex:1 1 auto !important;min-height:0 !important;max-height:none !important;
    overflow-y:auto !important;-webkit-overflow-scrolling:touch;
  }
  #CybotCookiebotDialogBodyContentTitle{font-size:.875rem !important;margin-bottom:.15rem !important}
  #CybotCookiebotDialogBodyContentText{font-size:.75rem !important;line-height:1.4 !important}
  /* Der weiche Farbverlauf am unteren Rand des Textfeldes wuerde bei
     dieser Hoehe den halben Text verdecken. */
  #CybotCookiebotDialog .CybotCookiebotFader{display:none !important}

  /* Die vier Schalter (Notwendig, Praeferenzen, Statistiken, Marketing)
     stehen nicht mehr in der Leiste. Sie sind weiterhin erreichbar: ein
     Tipp auf "Details zeigen" oeffnet die Detailansicht, in der Cookiebot
     dieselben Schalter selbst anzeigt. */
  #CybotCookiebotDialogBodyLevelWrapper{display:none !important}
  #CybotCookiebotDialogBodyEdgeMoreDetails{
    margin:.2rem 0 !important;justify-content:center !important;
  }
  #CybotCookiebotDialogBodyEdgeMoreDetailsLink{
    min-height:44px !important;display:inline-flex !important;align-items:center !important;
    font-size:.75rem !important;
  }
  .CybotCookiebotDialogBodyBottomWrapper{padding:0 .8rem !important}

  /* Die drei Knoepfe nebeneinander in EINER Reihe, alle gleich breit.
     "Ablehnen" ist damit genauso gross, genauso sichtbar und genauso
     leicht zu treffen wie "Alle zulassen" -- nichts davon ist versteckt,
     verkleinert oder ausgegraut. */
  #CybotCookiebotDialogFooter{flex:0 0 auto !important;padding:0 !important}
  #CybotCookiebotDialog .CybotCookiebotScrollArea{
    max-height:none !important;overflow:visible !important;
  }
  #CybotCookiebotDialogBodyButtons{
    display:block !important;padding:0 !important;margin:0 !important;
  }
  #CybotCookiebotDialogBodyButtonsWrapper{
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    gap:.35rem !important;padding:.35rem .8rem .5rem !important;margin:0 !important;
    align-items:stretch !important;
  }
  #CybotCookiebotDialogBodyButtonsWrapper > a,
  #CybotCookiebotDialogBodyButtonsWrapper > button{
    flex:1 1 0 !important;width:auto !important;min-width:0 !important;
    min-height:44px !important;height:auto !important;margin:0 !important;
    padding:.4rem .25rem !important;font-size:.6875rem !important;line-height:1.2 !important;
    white-space:normal !important;text-align:center !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    opacity:1 !important;filter:none !important;
  }
  /* "Anpassen" bleibt aus -- sonst stuenden vier Knoepfe in der Reihe und
     jeder waere nur noch 79 px breit. Die Einstellungen sind ueber
     "Details zeigen" erreichbar. Derselbe Kind-Pfad wie die Regel
     darueber, sonst gewinnt jene (hoehere Spezifitaet). */
  #CybotCookiebotDialogBodyButtonsWrapper > #CybotCookiebotDialogBodyLevelButtonCustomize{
    display:none !important;
  }
}

/* ===========================================================================
   TEIL 4.2 — ABSCHNITT "BEISPIELE"
   =========================================================================== */
.beispiele__titel{margin-bottom:.2rem}
.beispiele__text{margin-top:.4rem}
.beispiele__gitter{
  display:grid;gap:.6rem;margin-top:1.4rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:900px){
  .beispiele__gitter{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
}
.beispiele__bild{
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  background:var(--grund-weich);
}
.beispiele__bild img{
  display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;
}
.beispiele__lupe{
  position:absolute;right:.5rem;bottom:.5rem;width:40px;height:40px;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);background:rgba(var(--grund-rgb),.62);
  backdrop-filter:blur(6px);color:var(--text);
}
.beispiele__lupe svg{width:15px;height:15px}
.beispiele__knopf{margin-top:1.4rem;text-align:center}
.beispiele__knopf .knopf{min-height:48px}
@media(max-width:899px){
  .beispiele__knopf .knopf{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------------------
   TEIL 1.2 -- Nachbesserung: Knopfblock aufloesen, Zahlungszeile einblenden
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .hero__gitter .hero__knoepfe{display:contents}
  .hero__gitter .hero-zahlzeile{display:block;margin-top:.5rem}

  /* Etwas dichter zwischen Bild und Kaufknopf. */
  .seitenkopf__gitter .seitenkopf__beschreibung{margin-block:.5rem}
  .seitenkopf__gitter .seitenkopf__text,
  .hero__gitter .hero__unter{margin:.45rem 0 0;font-size:.875rem;line-height:1.45}
  .seitenkopf__gitter .preisanker,
  .hero__gitter .preisanker{margin:.5rem 0 0}
  .seitenkopf__gitter .knopf--gold,
  .hero__gitter .knopf--gold{margin-top:.5rem}
}

/* ===========================================================================
   AUFTRAG "Nachbesserung Seitenkopf am Handy" (23.09.2026), TEIL 1
   ---------------------------------------------------------------------------
   Weg a aus dem offenen Punkt 3 des letzten Berichts: der goldene
   Stil-Satz-Kasten und der Absatz stehen am Handy NACH dem Kaufknopf.

   Gemessen vorher (390 x 844):
     themenwelt-gedenken-engel.html  Preiszeile 838, Knopf 891-935
     themenwelt-gedenken.html        Preiszeile 857, Knopf 910-954
     index.html                      Preiszeile 903, Knopf 956-1005
   Der erste Bildschirm endet bei 844 -- Preiszeile und Knopf lagen also
   darunter. Zwischen Bild und Preiszeile standen der Stil-Satz-Kasten
   (76-97 px) und der Absatz (81-142 px); beide wandern hinter den Knopf.

   Reihenfolge am Handy, verbindlich fuer beide Kopfgitter:
     1 Bewertungsbeleg · 2 Augenbraue · 3 Ueberschrift · 4 Hauptbild
     (die Bildzeile steckt darin) · 5 Preiszeile · 6 Hauptknopf ·
     7 Aktionshinweis, falls einer laeuft · 8 Textverweis ·
     9 drei Vertrauenszeilen · 10 Zahlungszeile · 11 Stil-Satz-Kasten
     (nur Stil-Seiten) · 12 Absatz · danach alles Uebrige wie bisher.
   Am Rechner (ab 900 px) aendert sich nichts: dort greift keine dieser
   Regeln, es gilt weiterhin die Anordnung aus Teil B.
   =========================================================================== */
@media(max-width:899px){
  .seitenkopf__gitter [data-baustein="beleg"],
  .seitenkopf__gitter .beleg,
  .hero__gitter [data-baustein="beleg"],
  .hero__gitter .beleg{order:1}
  .seitenkopf__gitter .augbraue,
  .hero__gitter .augbraue{order:2}
  .seitenkopf__gitter h1,
  .hero__gitter h1{order:3}
  .seitenkopf__gitter .wandel-bereich,
  .seitenkopf__gitter .wandel,
  .seitenkopf__gitter [data-baustein="wandel"],
  .hero__gitter > .wandel,
  .hero__gitter [data-baustein="wandel"]{order:4}
  .seitenkopf__gitter [data-baustein="preisanker"],
  .seitenkopf__gitter .preisanker,
  .hero__gitter [data-baustein="preisanker"],
  .hero__gitter .preisanker{order:5}
  .seitenkopf__gitter .knopf--gold,
  .hero__gitter .knopf--gold{order:6}
  .seitenkopf__gitter .aktion{order:7}
  .seitenkopf__gitter .knopf--umriss,
  .hero__gitter .hero__nebenverweis{order:8}
  .seitenkopf__gitter .hero-vertrauen,
  .hero__gitter .hero-vertrauen{order:9}
  .seitenkopf__gitter .hero-zahlzeile,
  .hero__gitter .hero-zahlzeile{order:10}
  /* Ab hier das, was vorher zwischen Bild und Preiszeile stand. */
  .seitenkopf__gitter .seitenkopf__beschreibung{order:11}
  .seitenkopf__gitter .seitenkopf__text,
  .hero__gitter .hero__unter{order:12}
  .seitenkopf__gitter .hero-fakten{order:13}
  .seitenkopf__gitter [data-baustein="unikat"],
  .seitenkopf__gitter .unikat,
  .hero__gitter [data-baustein="unikat"],
  .hero__gitter .unikat{order:14}
  .hero__gitter .hero__mini{order:15}
  .seitenkopf__gitter .seitenkopf__trenner{order:16;margin-top:.75rem}
  .seitenkopf__gitter .seitenkopf__stile-titel{order:17}
  .seitenkopf__gitter .seitenkopf__stile{order:18}
  .seitenkopf__gitter .seitenkopf__wunschzeile{order:19}

  /* Abstaende an der neuen Naht. Erlaubt ist ausdruecklich nur das
     Verkleinern der Abstaende zwischen Bildzeile, Preiszeile und Knopf --
     Schriftgroessen und Tippflaechen bleiben unveraendert (Knopf 44 Punkte
     und mehr). */
  .seitenkopf__gitter .preisanker,
  .hero__gitter .preisanker{margin:.35rem 0 0}
  .seitenkopf__gitter .knopf--gold,
  .hero__gitter .knopf--gold{margin-top:.35rem}
  /* Der Kasten und der Absatz brauchen an ihrer neuen Stelle etwas Luft
     nach oben, damit sie sich von der Zahlungszeile abheben. */
  .seitenkopf__gitter .seitenkopf__beschreibung{margin-block:.9rem 0}
  .seitenkopf__gitter .seitenkopf__text,
  .hero__gitter .hero__unter{margin:.8rem 0 0}
}

/* ---------------------------------------------------------------------------
   TEIL 1, Nachjustierung -- die letzten 7 px auf der Startseite
   ---------------------------------------------------------------------------
   Nach dem Umsortieren lag der Kaufknopf auf index.html bei 801-851 px, der
   erste Bildschirm endet bei 844. Auf den Themenwelt- und Stil-Seiten passte
   es bereits (Knopf 685-729).

   Der Unterschied: Unter dem Hauptbild der Startseite stehen zwei Zeilen --
   die Bildzeile ("So kam das Foto an" / "So haengt es nun an der Wand") und
   darunter der Satz "Dasselbe Foto -- einmal als Handyfoto, einmal als
   Bild". Dessen Abstand nach oben war 13,6 px.

   Gekuerzt werden nur die drei Abstaende, die der Auftrag ausdruecklich
   freigibt: Bildzeile -> Satz -> Preiszeile -> Knopf. Keine Schriftgroesse
   wird angetastet, und keine Tippflaeche wird kleiner: der Knopf bleibt
   50 px hoch (Startseite) bzw. 44 px (Themenwelt-Seiten).
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .hero__gitter .wandel .wandel__hinweis,
  .seitenkopf__gitter .wandel .wandel__hinweis{margin-top:.4rem}
  .seitenkopf__gitter .preisanker,
  .hero__gitter .preisanker{margin-top:.2rem}
  .seitenkopf__gitter .knopf--gold,
  .hero__gitter .knopf--gold{margin-top:.2rem}
}

/* ---------------------------------------------------------------------------
   TEIL 2 -- drei Beispielbilder am Handy, letzte Reihe mittig
   ---------------------------------------------------------------------------
   Am Handy stehen die Beispielbilder in zwei Spalten. Bei drei Bildern ist
   die zweite Reihe nur halb besetzt; das dritte Bild stand dadurch links und
   rechts daneben war Leere. Es steht jetzt mittig und behaelt genau die
   Breite der beiden darueber -- kein Bild wird groesser, keines beschnitten.
   Dieselbe Regel greift bei jeder ungeraden Anzahl (ein Bild, fuenf Bilder).
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .beispiele__gitter > .beispiele__bild:last-child:nth-child(odd){
    grid-column:1 / -1;
    justify-self:center;
    width:calc(50% - .3rem);
  }
}

/* ---------------------------------------------------------------------------
   Nachbesserung aus der Layout-Pruefung: Lupe im Abschnitt "Beispiele"
   ---------------------------------------------------------------------------
   Gemessen am Handy: 40 x 40 Punkte. Die Regel des Projekts verlangt
   mindestens 44 x 44. Am Rechner bleibt der Knopf wie er ist -- dort wird mit
   der Maus gezeigt, nicht mit dem Finger getroffen.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .beispiele__lupe{width:44px;height:44px}
}

/* ===========================================================================
   AUFTRAG "Doppelten Bilderstreifen am Handy weg, Beispiele am Rechner
   kompakter" (23.09.2026)
   =========================================================================== */

/* --- TEIL 1: der Streifen "Beispiele aus diesem Stil" am Handy -------------
   Die Arbeit macht layout.js: es nimmt dem Streifen vor dem Zeichnen sein
   Merkmal data-stil-weitere, wodurch stile.js ihn gar nicht erst fuellt --
   es wird also keine einzige Bilddatei angefragt. Die Regel hier ist die
   Rueckfallebene fuer den Fall, dass das Merkmal einmal doch gesetzt bleibt:
   dann steht der leere Kasten wenigstens nicht im Weg.
   Am Rechner bleibt der Streifen unveraendert.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .seitenkopf__motive{display:none}

  /* Am Handy uebernimmt der Abschnitt "Beispiele" die Aufgabe des Streifens:
     ein Tipp auf ein Bild laedt dieses Bildpaar oben ins Hauptbild. */
  #beispiele .beispiele__bild[data-nachher]{cursor:pointer}
}

/* --- Beispielbilder am Rechner: SECHS je Reihe ----------------------------
   Stand bis zum 24.09.2026 auf vier je Reihe (Auftrag vom 23.09.2026,
   Teil 3). Der Auftrag "Bewertungen, Beispielbilder, Kundenband, Ladezeit"
   (24.09.2026, Teil 4.2) macht daraus sechs: bei 1920 px war ein Bild
   434 x 543 px gross und damit halb so hoch wie der Bildschirm.
   Die unvollstaendige letzte Reihe steht mittig -- deshalb eine Flex-Reihe
   mit Umbruch statt eines Gitters: im Gitter bliebe das letzte Bild in
   seiner Spalte stehen.
   Die Bilder werden dadurch schmaler. Ihr Seitenverhaeltnis bleibt
   vollstaendig erhalten (4:5, genau das Verhaeltnis der Dateien selbst,
   900 x 1125) -- es wird nichts beschnitten.
   Zusaetzlich die Hoehengrenze aus Teil 4.2: hoechstens ein Drittel der
   Bildschirmhoehe. Bei 4:5 entspricht ein Drittel Hoehe 26,4 vh Breite --
   deshalb steht die Grenze als Breite da und nicht als max-height, die das
   Bild stauchen wuerde.
   --------------------------------------------------------------------------- */
@media(min-width:900px){
  .beispiele__gitter{
    display:flex;flex-wrap:wrap;justify-content:center;
    grid-template-columns:none;
    gap:12px;
  }
  .beispiele__gitter > .beispiele__bild{
    flex:0 0 calc((100% - 60px) / 6);
    max-width:min(calc((100% - 60px) / 6), calc(26.4vh / var(--zf,1)));
  }
}

/* ===========================================================================
   AUFTRAG "Kopfzeile mit Menue, luftiges Layout am Handy, Vergleichstabelle
   und Gruende nebeneinander, Stil-Satz zurueck unter das Bild" (23.09.2026)
   ---------------------------------------------------------------------------
   Alles hier gilt am Handy (bis 899 px), sofern nicht ausdruecklich anders
   gekennzeichnet. Am Rechner (ab 900 px) bleibt die Kopfzeile unveraendert
   (Teil 1.5); die wenigen Regeln ab 900 px betreffen nur Bausteine, die es
   am Rechner vorher gar nicht gab (Menueknopf, Menueblatt).
   =========================================================================== */

/* ===========================================================================
   TEIL 1 — KOPFZEILE MIT MENUE AM HANDY
   ---------------------------------------------------------------------------
   Befund zu 1.1: In der Kopfzeile liegt seit jeher EIN Menue im HTML
   (<nav class="nav"> in kopfHTML(), layout.js) -- am Handy nicht entfernt,
   sondern nur ausgeblendet (.nav{display:none}, erst ab 1024 px
   display:flex). Genau dieses Element wird jetzt benutzt: am Handy wird es
   zum aufklappbaren Blatt, am Rechner bleibt es die waagerechte Zeile.
   Es wurde kein zweites Menue danebengebaut.
   =========================================================================== */

/* Den Menueknopf gibt es ueberall dort, wo die waagerechte Zeile nicht
   passt -- also bis 1023 px. Ab 1024 px steht die Zeile selbst da
   (.nav{display:flex} weiter oben in dieser Datei).
   TEIL 4.3 (23.09.2026): Bis dahin endete der Knopf bei 899 px, die Zeile
   begann aber erst bei 1024 px. Zwischen 900 und 1023 px -- ein quer
   gehaltenes Tablet -- gab es dadurch GAR KEINE Navigation in der
   Kopfzeile. Die Luecke ist damit geschlossen. */
.kopf__menue{display:none}
@media(max-width:1023px){
  .kopf__menue{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 44px;
    background:none;border:0;padding:0;color:var(--text);cursor:pointer;
  }
  .kopf__menue svg{width:24px;height:24px}
}
@media(max-width:899px){

  /* 1.2 -- eine Zeile: links die drei Balken, MITTIG das Logo, rechts
     Sprachwahl und Warenkorb. Die beiden aeusseren Felder bekommen
     dieselbe Breite (flex:1 1 0), dadurch steht das Logo wirklich in der
     Mitte und nicht nur ungefaehr. Der seitliche Rand der Kopfzeile ist
     16 px statt 24 px -- sonst reichen 390 px nicht fuer zwei gleich
     breite Felder neben dem Logo, ohne dass eine Tippflaeche unter
     44 Punkte faellt. */
  .kopf .kopf__inhalt{
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    padding-inline:1rem;gap:.25rem;min-height:52px;
  }
  .kopf__inhalt > .kopf__menue{justify-self:start}
  .kopf__inhalt > .marke{justify-self:center;margin:0}
  .kopf__rechts{justify-self:end;gap:0;min-width:0}

  /* 1.3 -- Sprachwahl schlichter: zwei kurze Woerter nebeneinander, das
     aktive hervorgehoben, ohne Kasten und ohne goldene Flaeche. Die
     Tippflaeche bleibt 44 x 44. Gold als SCHRIFT auf dem dunklen
     Kopfzeilen-Grund ist zulaessig (11,67:1); die verbotene Kombination
     waere goldene Fuellung auf hellem Grund -- hier ist der Grund dunkel. */
  .kopf__rechts .sprache{border:0;border-radius:0;overflow:visible;gap:0}
  .kopf__rechts .sprache button{
    min-width:44px;min-height:44px;padding:.5rem .25rem;
    background:none;background-image:none;box-shadow:none;
    font-size:.8125rem;letter-spacing:.06em;color:var(--text-gedaempft);
  }
  .kopf__rechts .sprache button[aria-pressed="true"]{
    color:var(--gold);font-weight:600;background-image:none;box-shadow:none;
  }
}

/* 1.4 -- das Menueblatt. Geschlossen ist es display:none und damit auch
   fuer die Tastatur nicht erreichbar; geoeffnet steht es als Blatt am
   linken Rand, der Rest der Seite liegt unter einem Schleier. */
.kopf__schleier{display:none}
/* .nav a (Klasse + Element) waere spezifischer als eine Klasse allein --
   ohne die zweite Zeile blieben die Handy-Eintraege am Rechner sichtbar
   und machten die Seite dort breiter als das Fenster. */
.nav--handy{display:none}
.nav a.nav--handy{display:none}
/* Das Menueblatt gilt bis 1023 px -- siehe Teil 4.3 beim Menueknopf oben. */
@media(max-width:1023px){
  /* Hoehere Spezifitaet als die Grundregel .nav a (Klasse + Element) --
     sonst gewinnt jene mit ihrem display:inline-flex. */
  .nav a.nav--rechner{display:none}
  body[data-menue="auf"]{overflow:hidden}

  /* WICHTIG: .kopf traegt backdrop-filter:blur(14px). Ein Element mit
     Filter ist der Bezugsrahmen fuer alles, was darin position:fixed ist
     -- Menueblatt und Schleier waeren dadurch auf die 52 px hohe
     Kopfzeile eingesperrt gewesen (gemessen: beide 52 px hoch, der Tipp
     daneben ging ins Leere). Solange das Menue offen ist, entfaellt der
     Weichzeichner deshalb; sichtbar ist davon nichts, die Kopfzeile liegt
     dann ohnehin unter dem Schleier.
     Die Kopfzeile steht ausserdem auf z-index 60, die haftende Kaufleiste
     auf 70 -- ohne die Anhebung stuende die Leiste ueber dem Menue. */
  body[data-menue="auf"] .kopf{backdrop-filter:none;z-index:90}

  .kopf__schleier{
    display:block;position:fixed;inset:0;z-index:70;
    background:rgba(0,0,0,.55);
  }
  .kopf__schleier[hidden]{display:none}

  body[data-menue="auf"] .nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;top:0;left:0;bottom:0;width:min(calc(86vw / var(--zf,1)),360px);
    z-index:80;background:var(--grund-weich);
    border-right:1px solid var(--grund-linie);
    padding:.5rem 1rem 2rem;overflow-y:auto;overscroll-behavior:contain;
  }
  body[data-menue="auf"] .nav--handy{display:flex}
  body[data-menue="auf"] a.nav--handy{display:flex}

  .nav__kopf{
    align-items:center;justify-content:space-between;
    gap:.5rem;min-height:44px;margin-bottom:.75rem;
  }
  .nav__titel{
    font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-leise);
  }
  .nav__zu{
    width:44px;height:44px;flex:none;background:none;border:0;padding:0;
    color:var(--text);cursor:pointer;display:inline-flex;
    align-items:center;justify-content:center;
  }
  .nav__zu svg{width:22px;height:22px}

  /* "Mein Bild gestalten" als goldener Knopf ganz oben. */
  .nav .nav__cta{
    width:100%;justify-content:center;min-height:48px;margin-bottom:1rem;
  }

  /* Themenwelten als Aufklapper mit allen zehn Welten. */
  .nav__welten{border-top:1px solid var(--grund-linie);display:block}
  body[data-menue="auf"] .nav__welten{display:block}
  .nav__welten > summary{
    list-style:none;cursor:pointer;display:flex;align-items:center;
    justify-content:space-between;min-height:48px;padding:.6rem 0;
    font-size:.9375rem;color:var(--text);
  }
  .nav__welten > summary::-webkit-details-marker{display:none}
  .nav__welten > summary::after{
    content:"";width:9px;height:9px;flex:none;margin-left:.75rem;
    border-right:1.5px solid var(--text-leise);
    border-bottom:1.5px solid var(--text-leise);
    transform:rotate(45deg) translateY(-3px);
    transition:transform var(--t-schnell) var(--kurve);
  }
  .nav__welten[open] > summary::after{transform:rotate(-135deg) translateY(2px)}
  .nav__weltliste{display:flex;flex-direction:column;padding:0 0 .5rem .75rem}
  .nav__weltliste a{
    min-height:44px;display:flex;align-items:center;padding:.4rem 0;
    font-size:.875rem;color:var(--text-leise);
  }

  /* Die uebrigen Menuepunkte. */
  .nav a.nav--handy{
    min-height:48px;align-items:center;padding:.6rem 0;
    font-size:.9375rem;color:var(--text);
    border-top:1px solid var(--grund-linie);
  }
  .nav a.nav--handy.nav__cta{border-top:0;color:var(--grund);justify-content:center}
  .nav a.nav--handy[aria-current="page"]{color:var(--gold)}
}
@media(min-width:1024px){
  .kopf__schleier{display:none}
  .nav--handy,
  .nav a.nav--handy{display:none}
}

/* 1.6 -- Das Ankuendigungsband bleibt am Handy aus.
   Der Auftrag sagt selbst: das Band darf die Vorgabe aus Teil 4.1 nicht
   gefaehrden, und reicht der Platz nicht, hat 4.1 Vorrang. Gemessen bei
   390 x 844 auf themenwelt-gedenken.html -- der engsten Seite -- endet der
   Hauptknopf nach diesem Auftrag knapp innerhalb des ersten Bildschirms.
   Ein Band von 28 px haette ihn darunter geschoben. Die Regel dafuer steht
   weiter oben in dieser Datei (#aktion{display:none}) und bleibt. */

/* ===========================================================================
   TEIL 2 — LUFTIGES, EINHEITLICHES LAYOUT AM HANDY
   ---------------------------------------------------------------------------
   Ein Mass, ueberall dasselbe:
     Abstand zwischen zwei Abschnitten        40 px  (20 px unten + 20 oben)
     Ueberschrift -> Folgendes                16 px
     Fliesstext -> Knoepfe oder Pillen        20 px
     Innenabstand in Kaesten                  16 px
   Schrift: Abschnitts-Ueberschrift 24 px/1,2 · Kachel-Ueberschrift 16 px fett
            Fliesstext 15 px/1,5 · kleine Hinweise 13 px.
   Der Seitenkopf ist ausgenommen: fuer ihn gilt Teil 4, und Teil 4.2
   erlaubt dort ausdruecklich engere Abstaende, damit die Pflicht aus 4.1
   eingehalten werden kann.
   =========================================================================== */
@media(max-width:899px){
  /* Die Klassen muessen mitgenannt werden: .abschnitt{padding-block:var(--luft)}
     ist eine Klasse und damit spezifischer als "main > section" allein --
     ohne die Aufzaehlung blieben die 44 px stehen. */
  main > section,
  main > section.abschnitt,
  main > section.abschnitt.hell,
  main > section.abschnitt.hell-weich,
  main > section.beweis,
  main > section.vorteile,
  main > section.quer,
  main > section.stimme,
  main > section.garantie,
  main > section.bewegt,
  main > section.kundenfotos,
  main > section.gruende,
  main > section.vergleich,
  main > section.abschluss,
  main > section.bundles,
  main > section.son-band,
  main > section.memoria,
  main > section.beispiele{padding-block:20px}
  main > section.seitenkopf,
  main > section.hero{padding-block:.25rem 1.25rem}
  /* Die helle Buehne (Konfigurator, Galerie-Raster u. a.) trug zusaetzlich
     24 px Aussenabstand oben und unten -- daraus wurden 64 statt 40 px
     zwischen den Abschnitten. Am Handy laeuft die Flaeche ohnehin randlos
     durch (Regel weiter oben, ab 600 px abwaerts), sie braucht den
     Aussenabstand dort nicht. */
  main > section.abschnitt.hell,
  main > section.abschnitt.hell-weich{margin-block:0}
  /* Ausreisser nach oben: einzelne Abschnitte begannen oder endeten mit
     einem Element, das selbst noch einen Aussenabstand mitbrachte -- aus
     40 px wurden dadurch 60 bis 73. Der erste und der letzte Inhalt eines
     Abschnitts bekommen ihren Abstand jetzt allein aus der Polsterung des
     Abschnitts. */
  main > section > .huelle > :first-child{margin-top:0}
  main > section > .huelle > :last-child{margin-bottom:0}

  /* Abschnitts-Ueberschrift */
  .titel{font-size:1.5rem;line-height:1.2;margin-bottom:16px}
  .gruende__titel,.vergleich__titel{margin-bottom:16px}
  .augbraue + .titel,
  .augbraue + h2{margin-top:8px}

  /* Fliesstext */
  .vorspann{font-size:.9375rem;line-height:1.5;margin-top:16px}
  main > section p{line-height:1.5}

  /* Kleine Hinweise nie unter 13 px. */
  .ki-hinweis,.hero-fakten,.stil-hinweis{font-size:.8125rem;line-height:1.4}

  /* Knoepfe */
  .knopf{min-height:48px}

  /* a) Die Pillen "Individuell erstellt / Aus deinem Foto gestaltet /
        Ein Unikat" klebten am Fliesstext darueber. */
  .unikat{margin-top:20px}
  /* b) Die Stil-Pillen klebten an der Ueberschrift "Stile". */
  .seitenkopf__stile-titel{margin-bottom:16px}
  .seitenkopf__stile{margin-top:0}
  .seitenkopf__stile-kicker{margin-bottom:8px}
  /* c) Ueber dem Bilderbereich war es zu eng, darunter bis zum
        Material-Kasten zu viel Luft. */
  .beispiele__gitter{margin-top:16px}
  .beispiele__knopf{margin-top:20px}
  .beispiele__text{margin-top:16px}

  /* Innenabstand in Kaesten: 16 px. Der Stil-Satz-Kasten ist ausgenommen,
     fuer ihn gilt Teil 4.2 (kompakter). */
  .grund,
  .konf-erklaerung > .huelle,
  .paket,
  .karte{padding:16px}
}

/* ===========================================================================
   TEIL 3 — UEBERSCHRIFT IM SEITENKOPF NORMAL UMBRECHEN
   ---------------------------------------------------------------------------
   Die Ueberschrift der Startseite war am Handy mit festen Umbruechen in
   drei kurze Stuecke zerlegt. Am Handy sind die Umbrueche jetzt aus, der
   Text bricht normal um. Der Wortlaut ist unveraendert; in lang.js steht
   vor jedem <br> jetzt ein Leerzeichen, damit ohne Umbruch nicht zwei
   Saetze aneinanderkleben. Am Rechner bleiben die Umbrueche.
   =========================================================================== */
@media(max-width:899px){
  .seitenkopf__gitter h1 br,
  .hero h1 br{display:none}
}

/* ===========================================================================
   TEIL 4 — GOLDENER STIL-SATZ-KASTEN ZURUECK UNTER DAS BILD
   ---------------------------------------------------------------------------
   Reihenfolge am Handy, verbindlich fuer beide Kopfgitter:
     1 Bewertungsbeleg · 2 Augenbraue · 3 Ueberschrift · 4 Hauptbild
     (die Bildzeile steckt darin) · 5 GOLDENER STIL-SATZ-KASTEN ·
     6 kurzer Absatz · 7 Preiszeile · 8 Hauptknopf · 9 Aktionshinweis ·
     10 Textverweis · 11 drei Vertrauenszeilen · 12 Zahlungszeile ·
     danach alles Uebrige.
   Auf der Startseite steht der lange Absatz weiterhin NACH dem Hauptknopf
   (Reihenfolge 13) -- so verlangt es der Auftrag ausdruecklich.
   Diese Reihenfolge ersetzt die vom selben Tag weiter oben in dieser
   Datei, in der Kasten und Absatz hinter der Zahlungszeile standen.
   =========================================================================== */
@media(max-width:899px){
  /* Die Huelle um Bild und Beiwerk wird aufgeloest, damit auch ihre
     Kinder in der Reihenfolge mitspielen: die kleine Motivreihe der
     Einzelmotiv-Welten (Worte an der Wand, Sternenkarte) und die
     Stilkacheln der Welt "Eigenes Foto" standen sonst zwangslaeufig
     zwischen Bild und Preiszeile. */
  .seitenkopf__gitter .wandel-bereich{display:contents}
  .seitenkopf__gitter .wandel{order:4;flex:0 0 100%;max-width:100%}
  .seitenkopf__gitter .seitenkopf__beschreibung{order:5}
  .seitenkopf__gitter .seitenkopf__text{order:6}
  .seitenkopf__gitter [data-baustein="preisanker"],
  .seitenkopf__gitter .preisanker,
  .hero__gitter [data-baustein="preisanker"],
  .hero__gitter .preisanker{order:7}
  .seitenkopf__gitter .knopf--gold,
  .hero__gitter .knopf--gold{order:8}
  .seitenkopf__gitter .aktion{order:9}
  .seitenkopf__gitter .knopf--umriss,
  .hero__gitter .hero__nebenverweis{order:10}
  .seitenkopf__gitter .hero-vertrauen,
  .hero__gitter .hero-vertrauen{order:11}
  .seitenkopf__gitter .hero-zahlzeile,
  .hero__gitter .hero-zahlzeile{order:12}
  .hero__gitter .hero__unter{order:13}
  .seitenkopf__gitter .hero-fakten{order:14}
  .seitenkopf__gitter .stil-einzel-klein,
  .seitenkopf__gitter .eigenes-stile{order:15;flex:0 0 100%;max-width:100%}
  .seitenkopf__gitter .stil-hinweis{order:16;flex:0 0 100%;max-width:100%}
  .seitenkopf__gitter [data-baustein="unikat"],
  .seitenkopf__gitter .unikat,
  .hero__gitter [data-baustein="unikat"],
  .hero__gitter .unikat{order:17}
  .hero__gitter .hero__mini{order:18}
  .seitenkopf__gitter .seitenkopf__trenner{order:19}
  .seitenkopf__gitter .seitenkopf__stile-kicker{order:20}
  .seitenkopf__gitter .seitenkopf__stile-titel{order:21}
  .seitenkopf__gitter .seitenkopf__stile{order:22}
  .seitenkopf__gitter .seitenkopf__wunschzeile{order:23}

  /* 4.2 -- Hauptbild 74 % der Fensterbreite statt 80 %. Begrenzt wird nur
     die BREITE; das Seitenverhaeltnis bleibt vollstaendig erhalten, es
     wird nichts beschnitten. */
  .seitenkopf__gitter .wandel,
  .hero__gitter > .wandel{width:calc(74vw / var(--zf,1));max-width:calc(74vw / var(--zf,1));margin-inline:auto}

  /* Das Polster des Bildrahmens senkrecht kleiner -- ein reiner Abstand,
     wie 4.2 ihn als letzte Stufe erlaubt. Seitlich bleibt es, sonst
     wuerde das Bild breiter und damit wieder hoeher. */
  .seitenkopf__gitter .wandel__rahmen,
  .hero__gitter .wandel__rahmen{padding-block:0 .25rem}

  /* 4.2 -- der Stil-Satz-Kasten ist kompakt: kleinerer Innenabstand,
     Schrift eine Stufe kleiner (13 px, die Untergrenze aus Teil 2), volle
     Breite.
     NACHTRAG 23.09.2026 (Auftrag "Stil-Saetze neu ...", Teil 6): Die
     Begrenzung auf zwei Zeilen samt Aufklapper ist wieder entfallen. Sie
     war noetig, solange 77 der 83 Stilsaetze laenger als zwei Zeilen
     waren; mit den neuen, kurzen Saetzen passen alle 91 von selbst hinein
     (auf allen 100 Seiten mit Stil-Satz-Kasten nachgemessen). Der Satz
     steht damit wieder unverkuerzt und ohne Schalter im Kasten -- waechst
     ein Satz spaeter, waechst der Kasten sichtbar mit, statt Text zu
     verstecken. */
  .seitenkopf__gitter .seitenkopf__beschreibung{margin:.25rem 0 0}
  .seitenkopf__gitter .stil-beschreibung{
    font-size:.8125rem;line-height:1.4;padding:.5rem .75rem;max-width:none;
  }

  /* 4.2 -- kurzer Absatz: engerer Zeilenabstand (1,35, die Untergrenze aus
     dem Auftrag) und 13 px, die Untergrenze aus Teil 2. Beides zusammen
     ist noetig, damit der Hauptknopf auf der engsten Seite noch im ersten
     Bildschirm endet. */
  .seitenkopf__gitter .seitenkopf__text{
    margin:.25rem 0 0;font-size:.8125rem;line-height:1.35;
  }
  .seitenkopf__gitter .preisanker,
  .hero__gitter .preisanker{margin:.25rem 0 0}
  .seitenkopf__gitter .knopf--gold,
  .hero__gitter .knopf--gold{margin-top:.25rem}
  .seitenkopf__gitter .wandel-bereich,
  .seitenkopf__gitter .wandel,
  .hero__gitter > .wandel{margin-top:.25rem}
}
/* Am Rechner steht der ganze Satz, wie am Handy auch. */

/* ===========================================================================
   TEIL 5 — UNVOLLSTAENDIGE LETZTE REIHE STEHT MITTIG
   ---------------------------------------------------------------------------
   Gilt fuer beide Bilderbereiche, am Handy wie am Rechner. Fuer den
   Abschnitt "Beispiele" steht die Regel schon weiter oben in dieser Datei
   (Handy: einzelnes letztes Bild mittig; Rechner: Flex-Reihe mit
   justify-content:center). Hier kommt der Streifen "Beispiele aus diesem
   Stil" dazu, der am Rechner bei fuenf Bildern in drei Spalten zuletzt
   linksbuendig stand.
   =========================================================================== */
/* Der Streifen stand am Rechner in einem festen Raster zu fuenf Spalten
   (repeat(5,minmax(0,1fr)), weiter oben in dieser Datei). In einem Raster
   bleibt eine unvollstaendige letzte Reihe immer linksbuendig -- bei acht
   Bildern also fuenf oben, drei unten links. Jetzt eine umbrechende Reihe
   mit derselben Kachelbreite (ein Fuenftel abzueglich des Abstands) und
   mittiger Ausrichtung: fuenf je Reihe wie bisher, die letzte Reihe steht
   mittig. Am Handy ist der Streifen ausgeblendet (Teil 5.2). */
@media(min-width:900px){
  .wandel-weitere__reihe{
    display:flex;flex-wrap:wrap;justify-content:center;
    grid-template-columns:none;gap:1.25rem;align-items:start;
  }
  .wandel-weitere__stueck{
    flex:0 0 calc(20% - 1rem);max-width:calc(20% - 1rem);width:auto;
  }
}
.beispiele__gitter{justify-content:center}

/* ===========================================================================
   TEIL 7 — ZAHLUNGSLOGOS GLEICHMAESSIG
   ---------------------------------------------------------------------------
   Jedes Logo hat jetzt seine eigene Kachel (layout.js, Visa und Mastercard
   sind getrennt). Hier bekommen alle Kacheln dieselbe Breite und Hoehe und
   denselben Abstand: am Handy vier je Reihe, eine unvollstaendige letzte
   Reihe steht mittig.
   =========================================================================== */
@media(max-width:899px){
  .fuss__zahlarten .zahlarten__reihe,
  .abschluss .zahlarten__reihe,
  .konf__abschluss .zahlarten__reihe,
  .hero-zahlarten .zahlarten__reihe,
  body[data-seite="kasse"] .zahlarten__reihe{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:8px;grid-template-columns:none;
  }
  .fuss__zahlarten .zahlart,
  .abschluss .zahlart,
  .konf__abschluss .zahlart,
  .hero-zahlarten .zahlart,
  body[data-seite="kasse"] .zahlart{
    flex:0 0 calc(25% - 6px);max-width:calc(25% - 6px);
    min-width:0;height:44px;min-height:44px;padding:.3rem .35rem;
    box-sizing:border-box;
  }
  .fuss__zahlarten .zahlart__bild,
  .abschluss .zahlart__bild,
  .konf__abschluss .zahlart__bild,
  .hero-zahlarten .zahlart__bild,
  body[data-seite="kasse"] .zahlart__bild{max-width:100%}
}

/* ===========================================================================
   TEIL 8 — VERGLEICHSTABELLE NEBENEINANDER
   ---------------------------------------------------------------------------
   Am Handy stand die Tabelle bisher untereinander und war dadurch sehr
   lang. Jetzt stehen die beiden Vergleichsspalten auch am Handy
   nebeneinander, Zeile fuer Zeile auf gleicher Hoehe, mit je einer kurzen
   Kopfzeile darueber. Die Zeilenbezeichnung ("Vor dem Druck" usw.) bleibt
   erhalten und steht als schmale Zeile ueber beiden Spalten -- ohne sie
   waere nicht mehr zu erkennen, wovon die Zeile handelt.
   Schrift 13 px, wie der Auftrag es erlaubt. Der Wortlaut ist unveraendert.
   =========================================================================== */
@media(max-width:899px){
  .vergleich__tabelle{display:block;width:100%}
  .vergleich__tabelle thead{display:block}
  .vergleich__tabelle tbody{display:block}
  .vergleich__tabelle thead tr,
  .vergleich__tabelle tbody tr{
    display:grid;grid-template-columns:1fr 1fr;gap:0 8px;
  }
  .vergleich__tabelle thead tr{padding:0 12px .35rem;align-items:end}
  /* Die leere Ecke oben links ist ein <td>; die aeltere Regel
     ".vergleich__tabelle td{display:block}" ist spezifischer als die Klasse
     allein -- ohne den Elementnamen hier blieb die Ecke stehen und schob
     die beiden Kopfzeilen in zwei Zeilen. */
  .vergleich__tabelle thead td.vergleich__ecke{display:none}
  .vergleich__tabelle thead th{
    display:block;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-leise);font-weight:500;padding:0;
  }
  .vergleich__tabelle thead th.vergleich__wir{color:var(--gold)}
  .vergleich__tabelle tbody tr{
    border:1px solid var(--grund-linie);border-radius:var(--radius);
    padding:12px;margin-top:8px;background:var(--grund-weich);
  }
  .vergleich__tabelle tbody th{
    display:block;grid-column:1 / -1;
    font-size:.8125rem;font-weight:700;margin:0 0 8px;
  }
  .vergleich__tabelle tbody td{
    display:flex;align-items:flex-start;gap:.35rem;
    font-size:.8125rem;line-height:1.4;color:var(--text-leise);
    margin:0;padding:0;border:0;
  }
  .vergleich__tabelle tbody td.vergleich__wir{
    color:var(--text);border:0;border-left:2px solid var(--gold);
    padding-left:8px;background:none;
  }
  .vergleich__zeichen svg{width:14px;height:14px}
  .vergleich__zeichen{margin-top:.15rem}
}

/* ===========================================================================
   TEIL 9 — DIE ACHT GRUENDE ALS KACHELN
   ---------------------------------------------------------------------------
   Der Aufbau war schon richtig (zwei Spalten am Handy, vier am Rechner, je
   ein goldenes Linien-Symbol, fette Ueberschrift, kleiner Satz) -- geaendert
   werden die Ueberschrift des Abschnitts ("Warum Canvasory?", layout.js/
   lang.js) und die Kachel-Ueberschrift, die am Handy 15 px hatte und nach
   Teil 2 16 px haben muss. Alle acht stehen gleichzeitig, nichts wechselt
   durch.
   =========================================================================== */
@media(max-width:899px){
  .gruende__gitter{gap:8px}
  .grund{padding:16px}
  .grund__titel{font-size:1rem}
  .grund__text{font-size:.8125rem;line-height:1.45;margin-top:8px}
  .grund__symbol{margin-bottom:8px}
}

/* ===========================================================================
   TEIL 10 — DREI VERTRAUENSZEILEN ALS DREI SPALTEN
   ---------------------------------------------------------------------------
   Am Handy nebeneinander, je mit goldenem Symbol darueber und kurzem Text
   darunter. Am Rechner bleibt es, wie es war.
   =========================================================================== */
@media(max-width:899px){
  .seitenkopf__gitter .hero-vertrauen,
  .hero__gitter .hero-vertrauen{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;margin-top:16px;
  }
  .hero-vertrauen li{
    flex-direction:column;align-items:center;text-align:center;gap:6px;
    font-size:.8125rem;line-height:1.35;
  }
  .hero-vertrauen svg{width:20px;height:20px;margin:0;color:var(--gold)}
}

/* ===========================================================================
   TEIL 11 — DIE VORSCHAU STARTET MIT DEM FERTIGEN BILD
   ---------------------------------------------------------------------------
   Gegenstueck zu wandelErstFertigesBild() in layout.js: solange die Buehne
   noch nicht im Bild ist oder ihr fertiges Bild noch laedt, steht die
   Ueberblendung still -- und zwar am Anfang ihres Zyklus, wo das FERTIGE
   Bild zu sehen ist. Sobald beides da ist, faellt data-warten weg und die
   14-Sekunden-Kurve laeuft von vorn: erst rund drei Sekunden das fertige
   Bild, dann der Wechsel. Kein neuer Zeitwert, keine Aenderung an der Kurve.
   =========================================================================== */
.wandel[data-warten="ja"] .wandel__lage--nachher,
.wandel[data-warten="ja"] .wandel__lage--nachher img,
.wandel[data-warten="ja"] .wandel__marke{animation-play-state:paused}
.wandel[data-warten="ja"] .wandel__lage--nachher{opacity:1}

/* ===========================================================================
   AUFTRAG "Stil-Saetze neu, Stil Nach deinem Wunsch in allen Welten, Menue
   und Tablet-Luecke" (23.09.2026)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   TEIL 2 b und c -- der Bedienhinweis des Stils
   ---------------------------------------------------------------------------
   Ein paar Stile brauchen einen kurzen Bedienhinweis (mehrere Tiere duerfen
   mit aufs Bild, ein Name ist freiwillig, die Rauchfarbe kommt ins
   Kommentarfeld). Er stand bis heute im goldenen Stil-Satz-Kasten und steht
   jetzt an drei Stellen: im Fliesstext der Stil-Seite (kopf.text in
   stile.json), in der Kasse ueber dem Foto- bzw. Anmerkungsfeld
   (.k-stilhinweis) und im Konfigurator unter dem Stiltext
   (.konf__stilhinweis).
   Beide Zeilen sind 13 px gross -- die Untergrenze aus dem letzten Auftrag --
   und behalten den Abstand von 16 px zum Text darueber.
   --------------------------------------------------------------------------- */
.k-stilhinweis{
  display:block;margin:16px 0 0;
  font-size:.8125rem;line-height:1.45;
}
.konf__stilhinweis{
  margin:16px 0 0;font-size:.8125rem;line-height:1.45;
  color:var(--text-leise);
}
.hell .konf__stilhinweis,.hell-weich .konf__stilhinweis{color:var(--text-dunkel-leise)}

/* ===========================================================================
   AUFTRAG "Grosse Aufraeumaktion" (24.09.2026) — TEIL A: VERSANDKOSTEN
   =========================================================================== */

/* A4 -- der helle Kasten "Versand innerhalb Deutschlands ist kostenlos."
   Gemessen vorher: Hintergrund #EBE3D4, Schrift #B7B0C0 -- Kontrast 1,65:1.
   Die Schrift erbte die helle Farbe fuer dunkle Flaechen und stand damit
   hell auf hell. Jetzt die dunkle Textfarbe des Projekts auf derselben
   Flaeche: #0F0D13 auf #EBE3D4 -- Kontrast 14,8:1. */
/* Zwei Klassen, damit die Regel .textseite p (Klasse + Element) nicht
   gewinnt -- genau die hatte dem Kasten die helle Schrift gegeben. */
.textseite .vk-de-frei,
.textseite .vk-de-frei b{color:var(--text-dunkel)}

/* A2 -- die Zonentabelle mit ALLEN Stufen.
   Am Rechner eine echte Tabelle: Zone (mit Laenderliste darunter) und je
   eine Spalte fuer Stufe A, B und C. Kein waagerechtes Scrollen mehr --
   die alte Regel min-width:42rem entfaellt hier. */
.vk-tabelle{min-width:0}
.vk-zonenname{display:block;font-weight:600}
.vk-laender{display:block;margin-top:.35rem;font-size:.8125rem;
  font-weight:400;color:var(--text-leise);line-height:1.45}
.vk-tabelle td{white-space:nowrap}
.vk-tabelle-fuss{font-size:.8125rem;color:var(--text-leise);margin-top:.6rem}

/* Am Handy wird aus jeder Zeile eine Karte: Zonenname, Laender, darunter
   die drei Stufen nebeneinander. So steht jeder Betrag im Bild, ohne dass
   irgendetwas seitlich wegrutscht. */
@media(max-width:899px){
  .vk-tabelle,.vk-tabelle thead,.vk-tabelle tbody,
  .vk-tabelle tr,.vk-tabelle th,.vk-tabelle td{display:block;width:auto}
  .vk-tabelle thead{display:none}
  .vk-tabelle tbody tr{
    border:1px solid var(--buehne-linie);border-radius:var(--radius);
    padding:16px;margin-top:16px;
  }
  .vk-tabelle tbody th{border:0;padding:0 0 12px}
  .vk-tabelle tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .vk-tabelle tbody th{grid-column:1 / -1}
  .vk-tabelle tbody td{
    border:0;padding:0;white-space:normal;text-align:center;
    font-size:.8125rem;
  }
  /* Ueber jedem Betrag steht, zu welcher Stufe er gehoert -- die
     Kopfzeile der Tabelle gibt es in der Kartenform nicht mehr. */
  .vk-tabelle tbody td::before{
    content:attr(data-stufe);display:block;
    font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-leise);margin-bottom:4px;
  }
  .vk-tabelle tbody td .vk-preis{font-size:.9375rem}
  .vk-tabelle small{font-size:.6875rem;line-height:1.35}
}

/* ===========================================================================
   TEIL C — DIE MITLAUFENDE LEISTE
   ---------------------------------------------------------------------------
   Sie enthaelt nur noch Knoepfe. Der Hauptknopf steht mittig und fuellt die
   Leiste bis auf die Raender aus; liegt etwas im Warenkorb, kommt rechts
   ein schmalerer Knopf "Zur Kasse" dazu.
   =========================================================================== */
@media(max-width:899px){
  .leiste__inhalt{
    display:flex;align-items:center;justify-content:center;
    gap:8px;padding:8px var(--rand);
  }
  /* Zwei Klassen, damit die aeltere Regel .leiste .knopf{flex:none}
     nicht gewinnt -- genau die hielt den Knopf auf 154 px. */
  .leiste .leiste__haupt{
    flex:1 1 auto;justify-content:center;text-align:center;
    min-height:48px;
  }
  .leiste .leiste__kasse{
    flex:0 0 auto;min-height:48px;padding-inline:14px;
    white-space:nowrap;
  }
  .leiste__kasse[hidden]{display:none}
}

/* ===========================================================================
   TEIL D — AUSRICHTUNG UND ABSTAENDE
   =========================================================================== */

/* D1 -- die Format-Knoepfe ragten aus ihren Kacheln heraus. Die Kachel
   waechst jetzt mit dem laengsten Wort mit, statt es abzuschneiden: die
   Spalten sind mindestens so breit wie ihr Inhalt, der Text bricht nicht
   um und behaelt seinen Rand. */
.formen{grid-template-columns:repeat(auto-fit,minmax(min-content,1fr))}
.formen .form{
  min-width:max-content;padding-inline:10px;
  white-space:nowrap;overflow:visible;
}
@media(max-width:899px){
  .formen .form{font-size:.8125rem}
  .formen .form svg{width:18px;height:18px}
}

/* D3 -- zwischen Stiltext und "Beispiele aus diesem Stil" waren es zu
   wenige Punkte. D2 -- unter den Beispielbildern zu viele. Beides 40. */
.seitenkopf__motive{margin-top:40px}
.seitenkopf__motive .wandel-weitere__reihe{margin-bottom:0}

/* D4 -- eine unvollstaendige letzte Reihe steht mittig, nie linksbuendig.
   Gilt fuer den Streifen UND fuer die Beispielbilder, am Handy wie am
   Rechner. */
.wandel-weitere__reihe,
.beispiele__gitter{justify-content:center}

/* D5 -- "Jedes weitere Bild 20 % guenstiger." stand linksbuendig, die
   Lieferzeile darunter mittig. Jetzt beide mittig. */
.sparen,.rabatt,.konf__liefer,.konf__lieferzeile{
  justify-content:center;text-align:center;
}

/* D7 -- der Knopf "Gedenkvideo hinzufuegen" stand linksbuendig. */
.bewegt__knopf,.bewegt .knopf,.bewegt__gitter .knopf{margin-inline:auto}
.bewegt__aktion{display:flex;flex-direction:column;align-items:center;text-align:center}

/* D8 -- die Kopfzeilen der Vergleichstabelle standen linksbuendig und
   damit nicht ueber ihrer eigenen Spalte. Jetzt mittig, am Handy wie am
   Rechner. */
.vergleich__tabelle thead th{text-align:center}
.vergleich__tabelle thead th.vergleich__ecke{text-align:left}

/* D9 -- "Sichere Zahlung · SSL-verschluesselt · Abwicklung ueber Stripe"
   stand linksbuendig und klebte am Text darueber. */
.fuss__sicher{justify-content:center;text-align:center;margin:20px 0}
.fuss__zahlzeile{align-items:center}

/* D10 -- das Logo in der Fusszeile sass nicht mittig zwischen dem goldenen
   Strich darueber und dem Text darunter. */
.fuss__marke{padding-block:20px}
.fuss__marke .marke{margin-block:0}

/* D13 -- die Abstaende im Laufband waren zu gross; mit 8 px sind mehr
   Bilder gleichzeitig zu sehen und das Band wirkt nicht mehr leer. */
.band__reihe{gap:8px}

/* D12 -- zwischen dem Text von "Was andere aufgehaengt haben" und dem
   Laufband war zu viel Luft. */
.kundenfotos .vorspann + .band,
.kundenfotos .band,
#galerie .band{margin-top:40px}

/* D6 -- die Zahlungslogos im Konfigurator und in der Fusszeile: alle
   Kacheln gleich breit und gleich hoch, gleiche Abstaende, Reihen
   gleichmaessig gefuellt, unvollstaendige letzte Reihe mittig.
   Am Handy vier je Reihe (Regel vom 23.09.2026), am Rechner fuenf --
   damit gehen neun Logos in zwei Reihen zu fuenf und vier auf. */
.konf__abschluss .zahlarten__reihe,
.fuss__zahlarten .zahlarten__reihe{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;grid-template-columns:none;
}
.konf__abschluss .zahlart,
.fuss__zahlarten .zahlart{
  flex:0 0 calc(20% - 7px);max-width:calc(20% - 7px);
  min-width:0;height:44px;min-height:44px;padding:4px 6px;
  box-sizing:border-box;
}
.konf__abschluss .zahlart__bild,
.fuss__zahlarten .zahlart__bild{max-width:100%;height:16px}
@media(max-width:899px){
  .konf__abschluss .zahlart,
  .fuss__zahlarten .zahlart{
    flex:0 0 calc(25% - 6px);max-width:calc(25% - 6px);
  }
}

/* TEIL F10 (24.09.2026): "Bearbeitet mit KI" in der Fusszeile wird auf
   11 px verkleinert und bekommt dieselbe gedaempfte Farbe wie die uebrigen
   Fusszeilen-Hinweise. Es bleibt lesbar und wird nicht versteckt --
   --text-gedaempft ist der dunkelste noch AA-konforme Wert des Projekts
   (4,95:1 auf dem Grundton). */
.fuss .ki-hinweis{font-size:11px;color:var(--text-gedaempft)}

/* ===========================================================================
   TEIL E — BEWERTUNGEN (Auftrag "Große Aufräumaktion", 24.09.2026)
   Steht am Dateiende, damit diese Regeln die frueheren ueberschreiben --
   Chrome liest die letzte Regel.
   =========================================================================== */

/* E1 — Bewertungstext auf drei Zeilen, Schalter darunter.
   -webkit-line-clamp mit display:-webkit-box ist der Weg, den alle vier
   Browser (Chrome, Firefox, Safari, Edge) verstehen; das aufgeklappte
   Gegenstueck setzt display wieder auf block zurueck. */
.rez blockquote.kurztext[data-offen="nein"],
.kundenfoto__text.kurztext[data-offen="nein"]{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}
.rez blockquote.kurztext[data-offen="ja"],
.kundenfoto__text.kurztext[data-offen="ja"]{display:block;overflow:visible}
/* Der Schalter ist ein Knopf, kein Link: er fuehrt nirgendwohin. 44 px hoch
   am Handy (Tippflaeche), Schrift 13 px -- beides Vorgabe aus dem Auftrag. */
.mehrlesen{
  display:inline-flex;align-items:center;min-height:44px;
  margin-top:.25rem;padding:0;border:0;background:none;
  font:inherit;font-size:.8125rem;color:var(--gold);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.mehrlesen:hover,.mehrlesen:focus-visible{color:var(--text)}
@media(min-width:900px){.mehrlesen{min-height:0;padding:.25rem 0}}

/* E3 — zwei Spalten auch auf den Themenwelt- und Stil-Seiten (vorher drei). */
@media(min-width:900px){
  .rezensionen.rezensionen--kompakt{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* E4 — das Kundenfoto fuellt die volle Kartenbreite. Vorher stand es in einem
   190 px hohen Kasten mit object-fit:contain; dadurch blieben links und
   rechts helle Raender. Jetzt volle Breite, Hoehe aus dem Bild -- nichts wird
   beschnitten, weil nicht mehr in einen festen Kasten gezwungen wird. */
.rez .rez__foto{
  order:-1;width:100%;height:auto;max-height:none;aspect-ratio:auto;
  object-fit:contain;background:none;border-radius:var(--radius);
  margin:0 0 .9rem;align-self:stretch;
}

/* E6 — Siegel und Produktangabe in EINER Zeile, durch einen Mittelpunkt
   getrennt, 8 px unter dem Bewertungstext. Ohne Produktangabe steht das
   Siegel allein und mittig. */
.rez .rez__fuss{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;
  gap:8px;margin-top:8px;
}
.rez .rez__fuss--allein{justify-content:center}
.rez .rez__fuss .rez__produkt{min-width:0;overflow-wrap:anywhere}
.rez .rez__fuss .rez__produkt::before{content:"·";margin-right:8px;color:var(--text-leise)}
.rez .rez__fuss--allein .rez__produkt{display:none}
/* Der Fuss sitzt jetzt direkt unter dem Text (8 px, siehe oben) statt unten
   am Kartenrand -- der Inhalt waechst deshalb nicht mehr in die Hoehe. */
.rez .rez__inhalt{flex:0 0 auto}

/* ===========================================================================
   TEIL G — SEITE "SETS" (Auftrag "Große Aufräumaktion", 24.09.2026)
   Die Kacheln sind hier Verweise statt Knöpfe (auf dieser Seite gibt es
   keinen Konfigurator, der Klick fuehrt hinueber). Deshalb der
   Unterstreichungs-Ausschalter -- alles Uebrige gilt unveraendert weiter.
   =========================================================================== */
a.paket{text-decoration:none}
/* Der bisherige Set-Name steht jetzt klein und in Gold hinter der neuen
   Ueberschrift der Kachel (Teil G2). */
.paket__marke{font-size:.8125rem;letter-spacing:.06em;color:var(--gold)}
.sets__neuwahl{margin-top:1.5rem;text-align:center;color:var(--text-leise)}
#sets .konf__fuss{margin-top:.75rem;text-align:center}

/* SPALTENZAHL DER BEWERTUNGEN — eine Stelle fuer alle Bewertungsraster.
   Auftrag "Live-Fehler beheben", 24.09.2026, Teil 3.2:
       ab 1200 px      VIER Spalten
       900 bis 1199 px DREI Spalten
       bis 899 px      EINE Spalte
   Das gilt auf der Startseite, auf allen Themenwelt- und Stil-Seiten und auf
   bewertungen.html. Vorher standen hier zwei Spalten ab 700 px (Auftrag vom
   Vortag) -- bei 1920 px wurde eine Karte damit 891 px breit und ein
   Kundenfoto 843 x 1054 px gross.
   Der Selektor nennt alle vier Fundstellen mit derselben Staerke, mit der
   frueher an anderen Stellen der Datei dagegen gesetzt wurde (dort stehen
   ".bew__gitter > #rezensionen" und "#bw-liste", also Kennungen) -- sonst
   gewinnt die aeltere Regel, egal wie spaet diese hier steht. */
@media(max-width:899px){
  .rezensionen,
  .rezensionen.rezensionen--kompakt,
  .bew__gitter > #rezensionen,
  #bw-liste{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:900px) and (max-width:1039px){
  .rezensionen,
  .rezensionen.rezensionen--kompakt,
  .bew__gitter > #rezensionen,
  #bw-liste{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1040px){
  /* Teil 2 (Auftrag 24.09.2026): FUENF statt vier je Reihe. Die Karten und
     damit die Bilder darin werden dadurch schmaler; die Schrift bleibt
     unveraendert. */
  .rezensionen,
  .rezensionen.rezensionen--kompakt,
  .bew__gitter > #rezensionen,
  #bw-liste{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ===========================================================================
   TEIL F — F4b, F5, F8 (Auftrag "Große Aufräumaktion", 24.09.2026)
   =========================================================================== */

/* F4b — die drei Chips im Seitenkopf: kleiner, mittig, mehrere nebeneinander,
   20 px unter dem Text darueber.
   Die Schrift stand bei 12 px. Kleiner geht nicht: im Projekt gilt seit dem
   23.09.2026, dass kein Text unter 13 px gesetzt wird. Die Chips werden
   deshalb ueber Polsterung, Laufweite und Abstand kleiner, die Schrift geht
   auf die erlaubte Untergrenze von 13 px -- das steht so im Bericht. */
.seitenkopf .unikat{
  justify-content:center;gap:8px;margin-top:20px;
}
.seitenkopf .unikat span{
  padding:.3rem .6rem;font-size:13px;letter-spacing:.04em;white-space:normal;
}
@media(max-width:899px){
  .seitenkopf .unikat{gap:8px}
  .seitenkopf .unikat span{padding:.28rem .55rem}
}

/* F5 — die Stil-Chips: engere Polsterung und engere Abstaende, damit
   mindestens drei kurze Namen nebeneinander stehen. Die Schrift bleibt bei
   13 px (Untergrenze) und die Tippflaeche bei 44 px Hoehe -- beides sind
   feste Vorgaben, an denen nicht gespart wird; kleiner wird der Chip in der
   Breite. Die angebrochene letzte Reihe steht mittig (justify-content gilt
   je Reihe). */
.seitenkopf__stile .filter{justify-content:center;gap:6px}
.seitenkopf__stile .filter button{padding:.45rem .6rem;letter-spacing:0}
@media(min-width:900px){
  .seitenkopf__stile .filter button{padding:.45rem .7rem}
}

/* F8 — "Warum Canvasory?" insgesamt kleiner. Die Reihenfolge der acht
   Kacheln macht gruendeHTML()/gruendeOrdnen() in layout.js (nach Textlaenge),
   damit zwei Kacheln einer Reihe gleich hoch werden. */
.gruende__titel{margin-bottom:1.25rem}
.grund{padding:1rem}
.grund__symbol{margin-bottom:.45rem}
.grund__symbol svg{width:22px;height:22px}
.grund__titel{font-size:.9375rem}
.grund__text{font-size:13px;line-height:1.5;margin-top:.35rem}
@media(min-width:900px){
  .grund{padding:1.1rem}
  .grund__titel{font-size:.9375rem}
  .grund__text{font-size:13px}
}

/* F4b, Nachtrag: Die drei Chips standen am Handy einzeln untereinander --
   in Grossbuchstaben mit weiter Laufweite war "AUS DEINEM FOTO GESTALTET"
   allein 244 px breit, zwei davon passten nie in eine 342 px breite Spalte.
   Ohne Grossbuchstaben stehen jetzt mehrere nebeneinander, bei gleicher
   Schriftgroesse und ohne dass ein Wort abgeschnitten wird. */
.seitenkopf .unikat span{text-transform:none;letter-spacing:.01em}

/* F5, Nachtrag: Die Stil-Chips sind Verweise (<a>), keine Knoepfe -- die
   Regel oben griff deshalb nur auf der Galerie. Hier beide Bauarten. */
.filter--stile{justify-content:center;gap:6px}
.filter--stile a,.filter--stile button{padding:.45rem .6rem;letter-spacing:0}
@media(min-width:900px){
  .filter--stile a,.filter--stile button{padding:.45rem .7rem}
}

/* ===========================================================================
   TEIL H — FUSSZEILE (Auftrag "Große Aufräumaktion", 24.09.2026)
   =========================================================================== */

/* H1 — am Handy nur die ersten drei Eintraege je Block, darunter eine Zeile
   "Alle anzeigen" mit kleinem Pfeil. Am Rechner bleibt alles sichtbar und
   der Knopf verschwindet. */
.fuss__mehr{
  display:none;align-items:center;gap:6px;min-height:44px;
  margin-top:4px;padding:0;background:none;border:0;
  font:inherit;font-size:13px;color:var(--gold);cursor:pointer;
}
.fuss__pfeil{width:14px;height:14px;flex:none;transition:transform .2s}
@media(max-width:899px){
  .fuss__mehr{display:inline-flex}
  .fuss__spalten > div[data-offen="nein"] li:nth-child(n+4){display:none}
  .fuss__spalten > div[data-offen="ja"] .fuss__pfeil{transform:rotate(180deg)}
}

/* H2 — die Wortliste im Aufklapper. Sie steht vollstaendig im Quelltext,
   wird nicht unsichtbar gemacht und nicht verkleinert: 13 px statt der
   bisherigen 10 px, weil im Projekt kein Text unter 13 px stehen darf. */
.fuss__seo{margin-top:1.75rem;border-top:1px solid var(--grund-linie);padding-top:1.1rem}
.fuss__seo-zeile{
  display:flex;align-items:center;gap:6px;min-height:44px;
  font-size:13px;color:var(--text-leise);cursor:pointer;list-style:none;
}
.fuss__seo-zeile::-webkit-details-marker{display:none}
.fuss__seo-zeile:hover{color:var(--text)}
.fuss__seo[open] .fuss__seo-zeile .fuss__pfeil{transform:rotate(180deg)}
.fuss__seo .seo-linien{margin-top:.5rem;padding-top:0;border-top:0}
.fuss__seo .seo-linien a{font-size:13px;min-height:28px;padding:.25rem .55rem}

/* ===========================================================================
   TEIL H3 — COOKIE-LEISTE IN CHROME **UND** FIREFOX (24.09.2026)
   ---------------------------------------------------------------------------
   Befund am 24.09.2026, gemessen an der oeffentlichen Seite (nur gelesen):

     Chrome, 390 x 844:  Leiste 211 px = 25,0 % der Hoehe, alle drei Knoepfe
                         nebeneinander, je 108 x 44 px, vollstaendig im Bild.
     Firefox, 500 x 758, GPC-Signal an:
                         Leiste 190 px = 25,1 %, aber die Knopfreihe steht bei
                         724-781 px, also 15-23 px UNTER dem Bildschirmrand.
                         Sichtbar blieben nur der Text, die Zeile "Das
                         GPC-Signal wird respektiert" und "Details zeigen".

   Zwei Ursachen, beide zusammen:
     1. Nur bei gesetztem GPC-Signal fuegt Cookiebot eine zusaetzliche Zeile
        ein (#CybotCookiebotDialogGpcText, 24 px). Der Inhalt braucht damit
        rund 205 px, die Leiste darf aber hoechstens 190 px hoch sein.
     2. Cookiebot setzt #CybotCookiebotDialogFooter selbst auf
        "flex:1 1 auto !important". Die Regel aus dem Auftrag vom 23.09.2026
        hatte dieselbe Spezifitaet (eine Kennung) und stand FRUEHER im
        Dokument -- Cookiebot haengt sein Stylesheet erst zur Laufzeit an und
        gewinnt damit. Der Fuss wurde deshalb von 88 px auf 50 px
        zusammengedrueckt, und die Knopfreihe rutschte aus dem Kasten.

   Loesung: dieselben Regeln, aber mit ZWEI Kennungen im Selektor
   (#CybotCookiebotDialog #CybotCookiebotDialogFooter). Das schlaegt
   Cookiebots eigene Ein-Kennung-Regel unabhaengig von der Reihenfolge.
   Der Fuss mit den drei Knoepfen behaelt seine Hoehe, der TEXT darueber gibt
   nach und rollt in sich -- die Wahl bleibt in jedem Fall sichtbar.
   =========================================================================== */
@media(max-width:899px){
  /* Der Fuss mit den drei Knoepfen gibt nie nach und wird nie abgeschnitten. */
  #CybotCookiebotDialog #CybotCookiebotDialogFooter{
    flex:0 0 auto !important;
    overflow:visible !important;
    max-height:none !important;
    height:auto !important;
    min-height:0 !important;
  }
  #CybotCookiebotDialog #CybotCookiebotDialogBodyButtons{
    overflow:visible !important;max-height:none !important;
  }
  #CybotCookiebotDialog .CybotCookiebotScrollArea{
    max-height:none !important;overflow:visible !important;height:auto !important;
  }
  /* Der Textbereich ist der Teil, der nachgibt -- er rollt in sich. */
  #CybotCookiebotDialog #CybotCookiebotDialogTabContent{
    flex:1 1 auto !important;min-height:0 !important;overflow:hidden !important;
  }
  #CybotCookiebotDialog #CybotCookiebotDialogBody{
    flex:1 1 auto !important;min-height:0 !important;overflow:hidden !important;
  }
  /* Die GPC-Zeile gehoert zum Text und rollt mit ihm, statt die Knoepfe
     nach unten zu schieben. Versteckt wird sie nicht -- sie ist eine
     Rechtsauskunft. */
  #CybotCookiebotDialog #CybotCookiebotDialogGpcContainer{
    margin:.15rem 0 0 !important;padding:0 !important;
  }
  #CybotCookiebotDialog #CybotCookiebotDialogGpcText{
    font-size:.75rem !important;line-height:1.3 !important;
  }
  /* "Details zeigen" steht dichter am Text, damit die Knoepfe Platz haben.
     44 px Tippflaeche bleiben. */
  #CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetails{
    flex:0 0 auto !important;margin:0 !important;
  }
  /* Alle drei Knoepfe gleich breit, gleich hoch, gleich sichtbar. */
  #CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper > a,
  #CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper > button{
    flex:1 1 0 !important;min-width:0 !important;min-height:44px !important;
    opacity:1 !important;filter:none !important;
  }
}

/* ===========================================================================
   TEIL D — NACHTRAG (24.09.2026)
   Beim Nachmessen fielen drei Regeln auf, die auf Klassen zeigten, die es
   so nicht gibt: die Zahlungslogos im Konfigurator stehen in
   .konf__spalte--kasten (nicht .konf__abschluss), die Fusszeile in
   .fuss__zahlzeile (nicht .fuss__zahlarten), "Jedes weitere Bild 20 %
   guenstiger." heisst .konf__mehrbild und die Lieferzeile .konf__lieferzeit,
   und der Knopf "Gedenkvideo hinzufuegen" steht in .bewegt__text.
   =========================================================================== */

/* D6 — alle Kacheln gleich breit und gleich hoch, gleiche Abstaende, eine
   unvollstaendige letzte Reihe mittig. Neun Logos: am Rechner 5 + 4,
   am Handy 4 + 4 + 1, jede angebrochene Reihe mittig. */
/* Auftrag 4, Teil F2 (27.09.2026): Die Fusszeile ist hier herausgenommen --
   ihre Zahlart-Kacheln stehen jetzt allein im Block "KOMPAKTE FUSSZEILE"
   weiter unten (56 x 34, Logo 16 px, Chips 20 px). Der Konfigurator-Kasten
   behaelt seine eigenen Masse, deshalb bleibt seine Haelfte der Regel. */
.konf__spalte--kasten .zahlarten__reihe{
  display:flex !important;flex-wrap:wrap;justify-content:center;
  gap:8px;grid-template-columns:none;
}
.konf__spalte--kasten .zahlart{
  flex:0 0 calc(20% - 7px);max-width:calc(20% - 7px);
  min-width:0;height:44px;min-height:44px;padding:4px 6px;
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;
}
.konf__spalte--kasten .zahlart img{max-width:100%;max-height:16px;width:auto;height:auto}
@media(max-width:899px){
  .konf__spalte--kasten .zahlart{
    flex:0 0 calc(25% - 6px);max-width:calc(25% - 6px);
  }
}

/* D5 — beide Zeilen mittig. */
.konf__kasten .konf__mehrbild,
.konf__kasten .konf__lieferzeit{text-align:center;justify-content:center}

/* D7 — der Knopf "Gedenkvideo hinzufuegen" steht mittig wie jeder andere. */
.bewegt__text{text-align:center}
.bewegt__text .knopf{margin-inline:auto;display:inline-flex}

/* D2 -- Nachtrag: Unter den Beispielbildern ("Beispiele aus diesem Stil")
   stand bisher der Material-Kasten. Den gibt es an dieser Stelle seit
   Teil B11 dieses Auftrags nicht mehr (er stand dort zum vierten Mal auf
   derselben Seite; die Angaben stehen unveraendert in den Fragen und
   im Konfigurator). Der Abstand unter dem Streifen betrug 64 px und wird
   auf die geforderten 40 px gesetzt -- damit steht der naechste Abschnitt
   dort, wo der Kasten stand. */
/* Der Streifen .seitenkopf__motive ist mit dem Auftrag "Live-Fehler
   beheben" (24.09.2026, Teil 5) entfallen. Die Regel greift deshalb jetzt
   an der Stil-Chip-Zeile, die auf denselben Seiten steht -- sonst waere der
   Seitenkopf wieder 64 px statt 40 px hoch abgeschlossen und der
   Konfigurator begaenne 24 px spaeter als vorher. */
.seitenkopf:has(.seitenkopf__stilzeile){padding-bottom:40px}

/* Nachtrag zur Sets-Seite: Der kleine Hinweis unter dem Preis stand bei
   11 px. Im Projekt gilt seit dem 23.09.2026, dass kein Text unter 13 px
   gesetzt wird -- auf der neuen Seite wird das von Anfang an eingehalten. */
#sets .paket__hinweis{font-size:13px;line-height:1.35}

/* ===========================================================================
   NACHTRAG AUS DER PRUEFUNG (24.09.2026)
   =========================================================================== */

/* Gemessen bei 1024 x 768: Die rechte Spalte des Seitenkopfs stand auf
   660 px fest, fuer die Ueberschrift blieben 212 px. In dieser Spalte passte
   "Schutzengel" nicht mehr in eine Zeile -- das Wort ragte 5 px aus seinem
   Kasten. Betroffen waren alle Stil-Seiten mit langem Wort in der
   Ueberschrift.
   Zwischen 900 und 1199 px bekommt die rechte Spalte deshalb einen Anteil
   statt einer festen Breite; ab 1200 px bleibt alles, wie es war. */
@media(min-width:900px) and (max-width:1039px){
  .seitenkopf__gitter{grid-template-columns:minmax(0,1fr) minmax(0,46%)}
}
/* Und als Sicherung: ein einzelnes zu langes Wort wird getrennt, statt aus
   seinem Kasten zu laufen. */
.seitenkopf h1{overflow-wrap:break-word;hyphens:auto}

/* Die Suchbegriffe in der Fusszeile sind Verweise und damit Tippflaechen:
   44 px hoch wie alles andere in der Fusszeile. */
.fuss__seo .seo-linien a{min-height:44px}

/* Zwischen 900 und 1199 px stand im rechten Bereich des Seitenkopfs das
   Hauptbild (fest 320 px) NEBEN dem goldenen Beschreibungskasten. Fuer den
   Kasten blieben dadurch 49 px (bei 960 px Fenster) bzw. 79 px (bei
   1024 px) -- der Stiltext lief dort aus seinem Kasten heraus. Gemessen auf
   allen Stil-Seiten. In diesem Bereich stehen Bild und Kasten deshalb
   untereinander; ab 1200 px bleibt es beim Nebeneinander. */
@media(min-width:900px) and (max-width:1039px){
  .seitenkopf__bildspalte{grid-template-columns:minmax(0,1fr)}
}

/* Das Etikett "Beliebteste Wahl" liegt bewusst als Schleife ueber dem
   oberen Rand des mittleren Knopfes und ist dabei ein paar Punkte breiter
   als er (position:absolute, mittig). Das ist Gestaltung und kein
   ueberlaufender Text -- die Pruefung zaehlt es deshalb nicht mit. */

/* Der Name unter den Beispiel-Kacheln der Welt "Eigenes Foto" ist ein
   einzelnes langes Wort ("Renaissance") und war am Handy vier Punkte
   breiter als seine Kachel. Es wird jetzt getrennt statt ueberzulaufen. */
.eigenes-stile__name{overflow-wrap:anywhere;hyphens:auto}

/* Tippflaechen: zwei Stellen lagen noch unter 44 Punkten.
   "AGB" in der Fusszeile war nur 27 px breit (das Wort ist kurz), und die
   Lupe auf den Galerie-Kacheln 34 x 34. Beide sind jetzt 44 x 44 gross --
   sichtbar aendert sich nichts, nur die Flaeche zum Tippen waechst. */
.fuss__recht a,.fuss__recht button{min-width:44px;justify-content:center;text-align:center}
.werk__gross{min-width:44px;min-height:44px}

/* Ein kurzer Stil-Name ("Pur") ergab nach der Verschmaelerung aus Teil F5
   einen nur 39 px breiten Chip. Die Tippflaeche bleibt 44 x 44, der Chip
   waechst dafuer im Bedarfsfall auf 44 px Breite -- drei kurze Namen
   nebeneinander passen weiterhin (3 x 44 + 2 x 6 = 144 von 342 px). */
.filter--stile a,.filter--stile button{min-width:44px;justify-content:center}

/* ===========================================================================
   AUFTRAG "Live-Fehler beheben", 24.09.2026
   TEIL 1 — drei Zahlungslogos blieben leer
   ---------------------------------------------------------------------------
   Befund (live und lokal gleich): Alle neun Bilddateien werden mit HTTP 200
   ausgeliefert, keine fehlt. Leer blieben PayPal, Google Pay und Revolut Pay,
   weil ihr <img> auf 0 x 0 px zusammenfiel.
   Ursache: Diese drei SVG-Dateien tragen im <svg>-Element KEINE width- und
   height-Angabe, nur ein viewBox. Ein solches Bild hat fuer die Anordnung
   keine eigene Groesse. Die Regel aus dem Auftrag vom 24.09.2026 (Teil D6)
   setzte "width:auto;height:auto;max-height:16px" -- damit bleibt fuer diese
   drei nichts uebrig, sie werden 0 x 0. Apple Pay und Klarna tragen width und
   height im SVG und waren deshalb zu sehen.
   Loesung: wieder eine FESTE Hoehe. Daraus rechnet der Browser die Breite
   ueber das Seitenverhaeltnis -- auch ohne width/height im SVG.
   =========================================================================== */
/* Auftrag 4, Teil F2 (27.09.2026): Die Fusszeile ist hier herausgenommen --
   ihre Zahlart-Kacheln stehen jetzt allein im Block "KOMPAKTE FUSSZEILE"
   weiter unten (56 x 34, Logo 16 px, Chips 20 px). Der Konfigurator-Kasten
   behaelt seine eigenen Masse, deshalb bleibt seine Haelfte der Regel. */
.konf__spalte--kasten .zahlart img{
  height:16px;width:auto;max-width:100%;max-height:none;object-fit:contain;
}
/* Apple Pay und Klarna liegen auf einem schwarzen Chip (ihre Marken sind
   dunkel bzw. nur in Weiss zulaessig). Etwas kleiner, damit der Chip mit
   seiner Polsterung genauso hoch wirkt wie die uebrigen Logos. */
.konf__spalte--kasten .zahlart img.zahlart-dunkel-chip{height:12px}

/* ===========================================================================
   TEIL 2 — Zahlungslogos in der Fusszeile ausrichten
   ---------------------------------------------------------------------------
   Vorher stand der Satz "Sichere Zahlung · SSL-verschluesselt · Abwicklung
   ueber Stripe" am Rechner LINKS und die Logoreihe rechts daneben (Satz
   535..868 px, Reihe 892..1385 px). Jetzt steht der Satz mittig und die
   Reihe mittig darunter -- am Handy war das schon so.
   Die Reihe bekommt eine Hoechstbreite, damit fuenf Kacheln je Reihe eine
   vernuenftige Groesse behalten: ueber die volle Fusszeilenbreite waere eine
   Kachel sonst rund 300 px breit.
   =========================================================================== */
/* Auftrag 4, Teil F1 (27.09.2026): Diese drei Regeln sind entfallen. Die
   Ausrichtung der Zahlzeile steht jetzt vollstaendig im Block "KOMPAKTE
   FUSSZEILE" (Stapel mittig, Reihe hoechstens 304 px am Handy, am Rechner
   eine Reihe). Die Hoechstbreite 560 px stammte aus der Zeit vor der
   kompakten Fusszeile und machte die Kacheln zu breit. */

/* ===========================================================================
   TEIL 3 — BEWERTUNGEN WAREN AM RECHNER VIEL ZU GROSS
   ---------------------------------------------------------------------------
   Gemessen auf der Startseite bei 1920 x 1080 vor der Aenderung: ZWEI Spalten,
   Karte 891 px breit, Kundenfoto 843 x 1054 px -- ein einziges Foto nahm fast
   den ganzen Bildschirm ein, der Bereich war 6317 px hoch.
   Neue Spaltenzahl (Teil 3.2): ab 1200 px vier, 900 bis 1199 px drei,
   darunter eine. Diese Regeln stehen am Dateiende und gelten deshalb gegen
   alle frueheren Spaltenregeln (2 ab 700 px, 3 ab 1200 px, 4 in der kompakten
   Fassung) -- Chrome liest die letzte Regel.

   Nebenbefund zu Teil 3.4: Die Kuerzung auf drei Zeilen war NICHT
   ausgefallen -- gemessen waren es auch am Rechner nie mehr als drei Zeilen.
   Bei 891 px Kartenbreite fassen drei Zeilen aber rund 330 Zeichen, und damit
   den ganzen Bewertungstext: der Text sah deshalb unverkuerzt aus, und der
   Schalter "mehr lesen" erschien zu Recht nicht (er kommt nur, wenn wirklich
   etwas verdeckt ist). Mit vier Spalten sind die Karten rund 440 px breit,
   drei Zeilen fassen etwa 150 Zeichen, und der Schalter steht wieder unter
   fast jeder Bewertung.
   =========================================================================== */
/* Teil 3.5 — Das Kundenfoto fuellt weiterhin die ganze Kartenbreite, wird
   nicht beschnitten und ist hoechstens 1,25-mal so hoch wie die Karte breit
   ist. Alle 100 Bewertungsfotos im Projekt liegen bei 4:5 (nachgemessen),
   also genau bei diesem Verhaeltnis. aspect-ratio haelt die Grenze auch
   dann ein, wenn spaeter ein hoeheres Foto dazukommt -- object-fit:contain
   sorgt dafuer, dass dabei nichts abgeschnitten wird. */
.rez .rez__foto{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;
  max-height:none;background:none;
}

/* Teil 3.6 — alle Karten einer Reihe gleich hoch. Das Raster streckt die
   Karten ohnehin auf die Reihenhoehe; damit der Inhalt dabei oben bleibt und
   die Karte nicht auseinanderfaellt, steht er als Spalte mit festem Anfang. */
.rezensionen > .rez{height:100%}

/* ===========================================================================
   AUFTRAG "Bewertungen, Beispielbilder, Kundenband, Ladezeit", 24.09.2026
   TEIL 1.4 — die Zeile unter dem Einleitungssatz des Bewertungsbereichs.
   Gleiche Farbe und Groesse wie die uebrigen Hinweiszeilen, 13 px, mittig
   dort, wo der Abschnitt mittig steht.
   =========================================================================== */
.bew__bildzuerst{
  margin:.35rem 0 0;font-size:13px;line-height:1.5;color:var(--text-leise);
}
#bewertungen .bew__bildzuerst,
.stimme .bew__bildzuerst,
#bewertungen-sets .bew__bildzuerst{text-align:center}

/* ===========================================================================
   TEIL 4 — BEISPIEL-ABSCHNITT MITTIG UND KLEINER (24.09.2026)
   ---------------------------------------------------------------------------
   Vorher standen Ueberschrift, Unterzeile und Bilder linksbuendig; bei einem
   einzigen Bild wirkte der Abschnitt dadurch leer. Jetzt steht alles mittig,
   und die Bilder sind deutlich kleiner: am Handy drei je Reihe, am Rechner
   bis zu sechs. Die Reihe ist eine Flex-Reihe, damit auch eine angebrochene
   letzte Reihe wirklich mittig steht -- in einem Raster mit festen Spalten
   bliebe das letzte Bild in seiner Spalte stehen.
   Die Hoehengrenze (ein Bild hoechstens ein Drittel der Bildschirmhoehe)
   steht als Breitengrenze da: die Bilder sind 4:5, ein Drittel Hoehe
   entspricht also 26,4 vh Breite. So bleibt das Seitenverhaeltnis erhalten,
   statt das Bild zu stauchen.
   =========================================================================== */
#beispiele .huelle{text-align:center}
#beispiele .beispiele__titel,
#beispiele .beispiele__text{text-align:center;margin-inline:auto}
.beispiele__gitter{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:8px;
}
.beispiele__gitter > *{
  flex:0 0 calc((100% - 16px) / 3);
  max-width:min(calc((100% - 16px) / 3), calc(26.4vh / var(--zf,1)));
}
@media(min-width:900px){
  .beispiele__gitter{gap:12px}
  .beispiele__gitter > *{
    flex:0 0 calc((100% - 60px) / 6);
    max-width:min(calc((100% - 60px) / 6), calc(26.4vh / var(--zf,1)));
  }
}
.beispiele__bild img{width:100%;height:auto;display:block}

/* ===========================================================================
   TEIL 6 — BEISPIELE IM KONFIGURATOR MITTIG
   ---------------------------------------------------------------------------
   Stilname, Ueberschrift und Stiltext stehen im Konfigurator mittig, die
   Zeile "Beispiele aus diesem Stil" und die Bilder darunter standen
   linksbuendig. Jetzt stehen sie ebenfalls mittig -- am Handy wie am
   Rechner. Wie beim Abschnitt oben eine Flex-Reihe, damit die angebrochene
   letzte Reihe mittig steht.
   =========================================================================== */
#konf-worte-reihe{text-align:center}
#konf-worte-reihe .konf__label{text-align:center}
#konf-worte-motive.stil-einzel{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;
}
#konf-worte-motive.stil-einzel > *{flex:0 0 84px;max-width:84px}
@media(min-width:900px){
  #konf-worte-motive.stil-einzel > *{flex:0 0 96px;max-width:96px}
}

/* ===========================================================================
   TEIL 7.5 — Weniger als sechs Fotos: Das Band laeuft nicht, die Bilder
   stehen still und MITTIG. Bisher galt das nur am Rechner (Regel im
   900-px-Block); am Handy standen die Kacheln dann linksbuendig.
   =========================================================================== */
.kundenfotos__bahn:not(.kundenfotos__bahn--laeuft){overflow-x:hidden}
.kundenfotos__bahn:not(.kundenfotos__bahn--laeuft) .kundenfotos__reihe{
  flex-wrap:wrap;justify-content:center;
}


/* ===========================================================================
   AUFTRAG 24.09.2026 — "Startseite in die geplante Reihenfolge +
   Bewertungsbereich ueberall einheitlich + Farben im Samsung-Browser"
   ===========================================================================

   PUNKT 4 — Hell- und Dunkelmodus der Browser
   ---------------------------------------------------------------------------
   Samsung Internet (und Chrome mit erzwungenem Dunkelmodus) faerbt Seiten
   selbst um, wenn sie nicht sagen, wie sie gestaltet sind. Seit dem Auftrag
   "Startseite fest einbauen" (26.09.2026, Teil A) steht die Seite auf Sand
   und ist damit HELL -- die Angabe hier lautet deshalb light, zusammen mit
   <meta name="color-scheme" content="light"> im Kopf jeder Seite.

   WICHTIG: Die hellen Flaechen (Konfigurator-Kasten, Kasse) bekommen
   AUSDRUECKLICH KEIN eigenes "color-scheme: light". Am 24.09.2026 gemessen:
   mit dieser Angabe haelt der Browser den Kasten fuer eine helle Insel in
   einer dunklen Seite und faerbt genau ihn um -- der Kasten war unter
   Chromes erzwungenem Dunkelmodus dunkel statt cremefarben. Ohne die Angabe
   gilt die Seite als Ganzes als dunkel gestaltet, der Browser laesst ALLES
   in Ruhe, und der helle Kasten bleibt hell. Die Formularfelder der Kasse
   tragen ihre Farben ohnehin selbst (.k-feld input: background #FBF8F2,
   color var(--text-dunkel)), sind also nicht auf Systemfarben angewiesen.
   =========================================================================== */
:root{color-scheme:light}

/* ===========================================================================
   PUNKT 2c — ENTFALLEN am 27.09.2026
   ---------------------------------------------------------------------------
   Hier stand die Regel, die "Zu den Gedenkbildern" als unterstrichenen
   Textverweis gezeichnet hat (violett, Unterstrich, keine Umrandung). Seit
   Auftrag 4, Teil B4, ist es ein Umriss-Knopf wie "Alle Fragen ansehen" und
   "Weitere Bewertungen ansehen" -- die Regel dafuer steht weiter unten bei
   den Knoepfen. Ersatzlos entfernt statt ueberschrieben, damit es nicht zwei
   Stellen gibt, die dasselbe Element unterschiedlich zeichnen wollen.
   =========================================================================== */

/* ===========================================================================
   PUNKT 3 — DER BEWERTUNGSBEREICH, AUF ALLEN SEITEN GLEICH
   ---------------------------------------------------------------------------
   Eine gemeinsame Klasse "bewblock" traegt alles: Startseite (#bewertungen),
   Themenwelt- und Stil-Seiten (.stimme), sets.html (#bewertungen-sets) und
   bewertungen.html. Reihenfolge von oben: kleine goldene Zeile,
   Ueberschrift, Satz, Hinweis "(Bewertungen mit Bild werden zuerst
   angezeigt.)", Wertung, Karten. Alles mittig.
   =========================================================================== */
.bewblock{text-align:center}
.bewblock .augbraue,
.bewblock .titel,
.bewblock .vorspann,
.bewblock .bew__bildzuerst{text-align:center}
.bewblock .augbraue{justify-content:center}
.bewblock .vorspann{margin-inline:auto;max-width:56rem}
.bewblock .bew__bildzuerst{margin-inline:auto}

/* 3b: die Wertung steht MITTIG UEBER den Karten, nicht als Spalte daneben. */
.bewblock .stimme__schnitt{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem .75rem;margin:1.5rem auto 2.25rem;text-align:center;
}
.bewblock .bew__gitter{display:block;margin-top:2rem}
.bewblock .bew__wertung{text-align:center;max-width:36rem;margin-inline:auto}
.bewblock .bew__wertung .verteilung{margin-top:1.5rem}
.bewblock .bew__gitter > .rezensionen{margin-top:2.25rem}
.bewblock .filter{justify-content:center}
.bewblock .stimme__inhalt{max-width:none}
.bewblock.stimme{text-align:center}
/* Der Text IN der Karte bleibt links -- mittiger Flattersatz ist in schmalen
   Karten kaum lesbar. */
.bewblock .rez{text-align:left}

/* 3c: Ab 1024 px nutzt der Bereich den breiten Rahmen der Seitenbreiten-Regel
   (Rand 3,5 %, mindestens 32 px, hoechstens 88 px; Inhalt hoechstens
   1.840 px). Bisher galt dieser Rahmen erst ab 1200 px, darunter stand der
   Bereich in einem 46rem-Kasten in der Seitenmitte -- genau die gemeldete
   schmale Spalte mit grosser leerer Flaeche links und rechts. Die
   Spaltenzahl haengt weiterhin allein an der Fensterbreite (Regeln weiter
   oben: ab 1200 px fuenf, 900 bis 1199 px drei, darunter eine). */
@media(min-width:1024px){
  .bewblock > .huelle{
    max-width:calc(1840px + 2 * clamp(32px, calc(3.5vw / var(--zf,1)), 88px));
    padding-inline:clamp(32px, calc(3.5vw / var(--zf,1)), 88px);
    margin-inline:auto;
  }
}

/* ===========================================================================
   3d — DER KARTENKOPF
   ---------------------------------------------------------------------------
   Name links, Datum rechts in DERSELBEN Zeile, darunter die Sterne. Bisher
   war der Kopf ein Flex-Kasten mit Umbruch: passte das Datum nicht mehr
   daneben, rutschte es unter den GANZEN linken Block, also unter die
   Sterne -- mit grosser Luecke und in jeder Karte anders.
   Jetzt ein Raster mit festen Plaetzen. Reicht der Platz nicht, setzt
   rezKopfOrdnen() (layout.js) die Klasse rezensionen--kopf-gestapelt auf die
   GANZE Liste; dann steht das Datum bei allen Karten klein direkt unter dem
   Namen, ohne Luecke, und die Sterne darunter. Nie gemischt in einer Reihe.
   =========================================================================== */
.rez__kopf{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:12px;row-gap:.35rem;align-items:start;
}
.rez__kopf > div{display:contents}
.rez__name{grid-column:1;grid-row:1;margin:0}
.rez__kopf .sterne{grid-column:1;grid-row:2;justify-self:start}
.rez__datum{grid-column:2;grid-row:1;justify-self:end;margin:0}

.rezensionen--kopf-gestapelt .rez__kopf{grid-template-columns:minmax(0,1fr);row-gap:.2rem}
.rezensionen--kopf-gestapelt .rez__datum{
  grid-column:1;grid-row:2;justify-self:start;font-size:.75rem;
}
.rezensionen--kopf-gestapelt .rez__kopf .sterne{grid-row:3;margin-top:.25rem}

/* ===========================================================================
   3e — AM HANDY KOMPAKT
   ---------------------------------------------------------------------------
   Das Kundenfoto stand bisher in fast voller Bildschirmbreite und -hoehe
   ueber dem Text; auf einen Bildschirm passte kaum eine Bewertung. Jetzt
   steht es als kleines Vorschaubild links, etwa ein Drittel der
   Kartenbreite und hoechstens 140 px hoch. Das Seitenverhaeltnis bleibt,
   nichts wird beschnitten (kein object-fit:cover, kein festes
   aspect-ratio). Antippen oeffnet weiterhin die Grossansicht -- dafuer
   sorgt derselbe Ausloeser wie bisher im Markup.
   Karten OHNE Foto bleiben flach: die Klasse rez--mit-foto setzt
   rezFotoKennzeichnen() (layout.js) nur dort, wo wirklich ein Bild steht.
   =========================================================================== */
@media(max-width:899px){
  .rez{padding:1.15rem 1rem}
  .rez--mit-foto{
    display:grid;
    grid-template-columns:minmax(0,34%) minmax(0,1fr);
    column-gap:.9rem;row-gap:.4rem;align-items:start;
  }
  .rez--mit-foto .rez__inhalt{display:contents}
  .rez--mit-foto .rez__foto{
    grid-column:1;grid-row:1 / span 3;
    width:auto;height:auto;max-width:100%;max-height:140px;
    aspect-ratio:auto;object-fit:contain;align-self:start;margin:0;
  }
  .rez--mit-foto .rez__kopf{grid-column:2;grid-row:1;margin:0}
  .rez--mit-foto .rez__inhalt blockquote{grid-column:2;grid-row:2;margin:0}
  .rez--mit-foto .rez__inhalt .mehrlesen{grid-column:2;grid-row:3;justify-self:start}
  .rez--mit-foto .rez__fuss{grid-column:1 / -1;grid-row:4;margin-top:.8rem}
}

/* ===========================================================================
   Hier standen bis zum 25.09.2026 die Regeln, die "Unser Versprechen" im
   Seitenkopf der Startseite klein rechneten. Der Block steht dort nicht
   mehr (Auftrag 25.09.2026, Teil A2): er hatte Preiszeile, Kaufknopf und
   Haken vom ersten Bildschirm geschoben. Er ist wieder ein eigener
   Abschnitt zwischen Kundenfoto-Band und Bewertungen; dort gilt die
   gewoehnliche Abschnitts-Gestaltung aus .garantie weiter oben.
   =========================================================================== */

/* ===========================================================================
   AUFTRAG 25.09.2026 — TEIL B: BEWERTUNGSKARTEN AM RECHNER
   ---------------------------------------------------------------------------
   Bisher gab es feste Spaltenzahlen nach Fensterbreite (ab 1200 px fuenf,
   900 bis 1199 px drei). Auf Saskias Laptop -- Full HD mit
   Windows-Skalierung, bei 100 % Zoom rund 1.097 px Fensterbreite -- ergab
   das DREI Karten zu je 339 px mit einem Kundenfoto von 291 x 363 px: fast
   ein Drittel des Bildschirms je Foto.

   Neue Regel: Eine Karte ist hoechstens 240 px breit. Es stehen so viele
   nebeneinander, wie in den Rahmen passen, aber nie mehr als fuenf. Die
   Reihe wird dafuer auf die Breite ihrer Karten gedeckelt und steht mittig
   -- so bleibt kein Streifen des Rasterhintergrunds (--grund-linie) neben
   den Karten stehen, und keine Karte kann angeschnitten werden.

   Gerechnet (Inhaltsbreite = Fenster minus zweimal Rand):
     900 px  Fenster -> 810 px  Inhalt -> 4 Karten zu 202 px
     1097 px Fenster -> 1020 px Inhalt -> 5 Karten zu 203 px
     1280 px Fenster -> 1190 px Inhalt -> 5 Karten zu 237 px
     1920 px Fenster -> Deckel 1204 px  -> 5 Karten zu 240 px
   Der Umbruchpunkt fuer die fuenfte Karte liegt bei 1080 px: darunter
   waeren fuenf Karten schmaler als 190 px und der Text zu schmal.

   Der Selektor nennt dieselben vier Fundstellen wie die aeltere Regel
   (darunter ".bew__gitter > #rezensionen" und "#bw-liste", also Kennungen),
   damit er sie sicher ueberschreibt.
   =========================================================================== */
@media(min-width:900px) and (max-width:1039px){
  .rezensionen,
  .rezensionen.rezensionen--kompakt,
  .bew__gitter > #rezensionen,
  #bw-liste{
    grid-template-columns:repeat(4, minmax(0,1fr));
    max-width:calc(4 * 240px + 3px);
    margin-inline:auto;
  }
}
@media(min-width:1040px){
  .rezensionen,
  .rezensionen.rezensionen--kompakt,
  .bew__gitter > #rezensionen,
  #bw-liste{
    grid-template-columns:repeat(5, minmax(0,1fr));
    max-width:calc(5 * 240px + 4px);
    margin-inline:auto;
  }
}

/* B2 — das Kundenfoto am Rechner: hoechstens 220 px hoch, Seitenverhaeltnis
   bleibt, nichts beschnitten. Bisher galt ".rez .rez__foto{width:100%;
   aspect-ratio:4/5}" (Teil 3.5 weiter oben) -- bei 339 px breiten Karten
   wurde das Foto dadurch 363 px hoch. Jetzt bestimmt die Hoehe das Bild,
   nicht die Kartenbreite: 220 px hoch, 176 px breit bei den durchgehend
   vorhandenen 4:5-Fotos. object-fit:contain bleibt, damit auch ein anders
   geschnittenes Foto vollstaendig zu sehen ist. Anklicken oeffnet
   weiterhin die Grossansicht (.grossansicht-ausloeser, layout.js). */
@media(min-width:900px){
  .rez .rez__foto{
    width:auto;height:auto;max-width:100%;max-height:220px;
    aspect-ratio:auto;object-fit:contain;
    align-self:center;margin:0 0 .9rem;
  }
}

/* B — Nachtrag zum Kartenfuss am Rechner: Mit 240 px breiten Karten passt
   "Geprüfter Kauf · Leinwand 60 × 80 cm" nicht mehr in EINE Zeile. Die
   Regel E6 weiter oben verbot den Umbruch (flex-wrap:nowrap) und erlaubte
   dafuer den Bruch MITTEN IM WORT (overflow-wrap:anywhere) -- im Bild stand
   dann "Leinwan / d". Am Rechner darf der Fuss jetzt umbrechen, dafuer
   bleiben die Woerter ganz. Am Handy (unter 900 px) bleibt es bei der einen
   Zeile aus dem Auftrag vom 24.09.2026. */
@media(min-width:900px){
  .rez .rez__fuss{flex-wrap:wrap;row-gap:4px}
  .rez .rez__fuss .rez__produkt{overflow-wrap:normal;word-break:normal}
}

/* ===========================================================================
   AUFTRAG 25.09.2026 — DER KAUFKNOPF DER STARTSEITE BEI NIEDRIGEN
   RECHNER-FENSTERN
   ---------------------------------------------------------------------------
   Saskias Laptop zeigt bei 100 % Zoom rund 1.097 x 617 px (Full HD mit
   Windows-Skalierung). Gemessen am 25.09.2026 stand der Knopf "Mein Bild
   gestalten" dort bei 779 px, sichtbar sind 617 px. Die Hoehe ging drauf
   fuer: Ankuendigungsband und Kopfzeile 176 px, Ueberschrift 249 px (vier
   sichtbare Zeilen, weil jede der drei Zeilen noch einmal umbrach) und den
   Absatz mit 113 px.

   Diese Regeln gelten NUR fuer die Startseite (body[data-seite="start"])
   und NUR bei Fenstern ab 900 px Breite UND hoechstens 800 px Hoehe. Am
   Handy und an hohen Rechner-Fenstern aendert sich nichts.

   a) ENTFALLEN am 26.09.2026: Das Ankuendigungsband (#aktion) gibt es nicht
      mehr, seine Aussage steht jetzt unter den Themenwelten.
   b) ENTFALLEN am 26.09.2026: Die Ueberschrift wurde hier auf 28 px
      verkleinert, weil die alte dreizeilige Fassung ("Manche Fotos sind
      mehr als Fotos. / Sie sind Erinnerung, Stolz, Liebe. / Wir bringen sie
      an deine Wand.") sonst ein viertes Mal umbrach. Sie lautet jetzt
      "Dein Foto wird ein Kunstwerk an der Wand." -- ein Satz, zwei Zeilen,
      und darf wieder in voller Groesse stehen. Gemessen bei 1.097 x 617:
      die Unterkante des Kaufknopfs liegt bei 438 px, also klar im ersten
      Bildschirm.
   c) Der Absatz rueckt unter die Haken-Zeilen. Dafuer wird die Textspalte
      zur Spalte mit Reihenfolge; nur der Absatz bekommt einen eigenen
      Platz am Ende, alles andere behaelt seine Reihenfolge aus dem
      Quelltext. Der Text selbst bleibt unveraendert. DIESE Regel bleibt:
      bei niedrigen Fenstern haelt sie Preis und Kaufknopf oben.
   =========================================================================== */
@media(min-width:900px) and (max-height:800px){
  /* c) */
  body[data-seite="start"] .hero__gitter > div:first-child{
    display:flex;flex-direction:column;
  }
  body[data-seite="start"] .hero__gitter .hero__unter{
    /* 62ch (rund 748 px) bis zum 27.09.2026; Teil 6 des Auftrags
       "Feinschliff Startseite" setzt die Lesebreite auf 38 rem. */
    order:9;margin-top:1.1rem;max-width:38rem;
  }
}

/* ===========================================================================
   AUFTRAG 25.09.2026 — GROSSE SAMMELREPARATUR
   ===========================================================================

   TEIL A2 — HELLE FLAECHEN SAGEN "light"
   ---------------------------------------------------------------------------
   Seit dem 24.09.2026 steht auf jeder Seite color-scheme: dark (Meta-Zeile
   und :root). Das haelt Browser mit eigenem Dunkelmodus davon ab, die Seite
   noch einmal umzufaerben. Nebenwirkung: Der Browser zeichnet auch seine
   EINGEBAUTEN Formularelemente dunkel -- auf dem hellen Grund der Kasse
   wurden die drei Ankreuzkaestchen dadurch schwarz ausgefuellt.
   Die Zeile ".kasse, .hell, .hell-weich, .konf, .konf__spalte--kasten
   {color-scheme:light}" stand hier bis zum 25.09.2026 abends und ist
   ERSATZLOS ENTFERNT: Sobald eine helle Flaeche "light" sagt, haelt
   Chrome sie fuer eine helle Insel in einer dunklen Seite und faerbt im
   erzwungenen Dunkelmodus genau sie um -- der helle Konfigurator-Kasten
   war dann #2B271E statt #F4EEE3 (gemessen). Gebraucht wird die Zeile
   nicht mehr: Ankreuzkaestchen und Auswahlknoepfe werden seit Teil A3
   selbst gezeichnet, und die Formularfelder der Kasse tragen ihre
   Farben ausdruecklich (Teil A4). Beides haengt von keiner Systemfarbe
   mehr ab.
   =========================================================================== */

/* ===========================================================================
   TEIL A3 — ANKREUZKAESTCHEN SELBST GEZEICHNET
   ---------------------------------------------------------------------------
   Damit das Aussehen NICHT mehr davon abhaengt, was der Browser gerade fuer
   richtig haelt, wird jedes Ankreuzkaestchen hier selbst gezeichnet:
   heller Innenraum, dunkle Umrandung (#1A1721 auf #FBF8F2 = 15,8 : 1, weit
   ueber den geforderten 3 : 1), angehakt dunkel gefuellt mit weissem Haken,
   sichtbarer Fokusrahmen fuer die Tastatur. Die Tippflaeche ist ueber ein
   unsichtbares Feld von 44 x 44 px sichergestellt, ohne dass das Kaestchen
   selbst groesser wird.
   Betrifft: Kasse (Bildrechte, "Foto nicht zur Hand", Kenntnisnahme,
   Gedenkvideo je Position), Bewertungsseite und Upload-Seite.
   Die beiden Konfigurator-Kaestchen (Aufhaengeset, Gedenkvideo) bleiben
   unberuehrt: sie sind dort seit jeher unsichtbar geschaltet und werden von
   einem eigenen Schalter dargestellt (.konf__extra weiter oben).
   =========================================================================== */
input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  position:relative;flex:none;
  width:22px;height:22px;margin:0;
  border:2px solid #1A1721;border-radius:4px;
  background:#FFFFFF;cursor:pointer;
  display:inline-grid;place-content:center;
  transition:background var(--t-schnell) var(--kurve),border-color var(--t-schnell) var(--kurve);
}
input[type="checkbox"]::before{
  content:"";width:6px;height:11px;
  border:solid #FFFFFF;border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) translate(-1px,-1px) scale(0);
  transition:transform var(--t-schnell) var(--kurve);
}
input[type="checkbox"]:checked{background:#1A1721;border-color:#1A1721}
input[type="checkbox"]:checked::before{transform:rotate(45deg) translate(-1px,-1px) scale(1)}
input[type="checkbox"]:focus-visible{outline:3px solid var(--gold-tief);outline-offset:2px}
input[type="checkbox"]:disabled{opacity:.5;cursor:default}
/* Unsichtbare Tippflaeche, mindestens 44 x 44 px. */
input[type="checkbox"]::after{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
/* Die Konfigurator-Kaestchen bleiben unsichtbar (eigener Schalter). */
.konf__extra input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;border:0;background:none;
}
.konf__extra input[type="checkbox"]::after{display:none}

/* ===========================================================================
   TEIL A4 — DIE UEBRIGEN FORMULARELEMENTE DER KASSE
   ---------------------------------------------------------------------------
   Textfelder, Auswahllisten und Textbereiche tragen ihre Farben schon selbst
   (.k-feld input weiter oben: Grund #FBF8F2, Schrift --text-dunkel). Hier
   kommt nur dazu, was bisher vom Browser kam: die Farbe des Auswahlpfeils,
   der Fokusrahmen und die Auswahlknoepfe.
   =========================================================================== */
/* Auch hier stand bis zum 25.09.2026 abends ein "color-scheme: light".
   Es ist aus demselben Grund entfernt wie die Zeile weiter oben: Ein
   Element, das "light" sagt, ist fuer Chrome eine helle Insel in einer
   dunklen Seite und wird im erzwungenen Dunkelmodus genau deshalb
   umgefaerbt. Gemessen am 25.09.2026 mit der Zeile: Ankreuzkaestchen
   innen #121212 statt #FFFFFF, Rand #575657 statt #1A1721, Textfeld
   #22201C statt #FBF8F2. Ohne die Zeile gilt die Seite als Ganzes als
   dunkel gestaltet, der Browser laesst alles in Ruhe, und die
   ausdruecklichen Farben aus A3/A4 kommen so an, wie sie hier stehen.
   Die Farben selbst sind unveraendert. */
.kasse select{color:var(--text-dunkel);background-color:#FBF8F2}
.kasse input[type="radio"],
.hell input[type="radio"]{
  appearance:none;-webkit-appearance:none;position:relative;
  width:22px;height:22px;margin:0;flex:none;
  border:2px solid #1A1721;border-radius:50%;background:#FFFFFF;cursor:pointer;
  display:inline-grid;place-content:center;
}
.kasse input[type="radio"]::before,
.hell input[type="radio"]::before{
  content:"";width:10px;height:10px;border-radius:50%;background:#1A1721;transform:scale(0);
  transition:transform var(--t-schnell) var(--kurve);
}
.kasse input[type="radio"]:checked::before,
.hell input[type="radio"]:checked::before{transform:scale(1)}
.kasse input[type="radio"]:focus-visible,
.hell input[type="radio"]:focus-visible{outline:3px solid var(--gold-tief);outline-offset:2px}
/* Das Rabattcode-Feld steht in derselben Reihe wie sein Knopf und erbt die
   Farben von .k-feld input -- hier nur der Vollstaendigkeit halber
   ausdruecklich, damit es nie von einer Systemfarbe abhaengt. */
.k-gutschein__reihe input{background:#FBF8F2;color:var(--text-dunkel)}

/* ===========================================================================
   TEIL A5 — DAS DATEIFELD REISST DIE SEITE NICHT MEHR AUF
   ---------------------------------------------------------------------------
   .up-datei-eingabe soll unsichtbar in einem 1-px-Feld stehen (der Bedienweg
   ist das Label darueber). Die Regel ".k-feld input" weiter oben ist aber
   staerker (Klasse + Element gegen nur Klasse) und setzt width:100% und
   min-height:44px. Das Feld war dadurch 390 px breit UND absolut gesetzt --
   gemessen am 25.09.2026 bei 390 x 844: rechte Kante bei 453 px, also 63 px
   ueber den Bildschirm hinaus, in den Schritten 2, 3 und 4. Die Seite liess
   sich seitlich schieben.
   Behoben wird das am Element selbst, nicht mit overflow-x:hidden.
   =========================================================================== */
.k-feld input.up-datei-eingabe,
.k-feld input[type="file"].up-datei-eingabe,
.up-datei-eingabe{
  position:absolute;width:1px;min-width:0;max-width:1px;
  height:1px;min-height:0;max-height:1px;
  padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;
}

/* ===========================================================================
   TEIL E — DIE HAKEN IM SEITENKOPF STEHEN MITTIG
   ---------------------------------------------------------------------------
   Fuenf Haken passen nicht in eine Reihe; die letzte Reihe blieb
   linksbuendig, daneben stand eine grosse Luecke (gemessen bei 390 x 844:
   118 px rechts frei). Jetzt sind alle Reihen mittig, die unvollstaendige
   letzte damit auch.
   =========================================================================== */
.hero-vertrauen{justify-content:center}
.hero-vertrauen li{justify-content:flex-start}

/* ===========================================================================
   TEIL F — DIE PREISZEILE IM SEITENKOPF ABSETZEN
   ---------------------------------------------------------------------------
   F1: Dieselbe Schriftgroesse wie der Absatz davor, aber Haupttextfarbe und
       halbfett. Die Betraege stehen in Gold (--gold auf --grund: 11,67 : 1,
       weit ueber den geforderten 4,5 : 1); den Haken dafuer setzt
       preisankerSchreiben() in layout.js.
   F2: Darueber der kurze mittige goldene Strich -- dieselbe Regel wie unter
       "So entsteht dein persoenliches Bild" (.konf-erkl__titel::after):
       2,5rem breit, 1 px hoch, var(--gold-tief). Abstand darueber und
       darunter gleich (je .85rem).
   F3: Steht vor der Preiszeile kein Flietext, entfaellt der Strich -- auf
       der Startseite bei niedrigen Rechner-Fenstern, wo der Absatz nach
       Teil B unter die Haken gerueckt ist.
   =========================================================================== */
.preisanker[data-preisanker]{
  color:var(--text);font-weight:600;margin-top:.85rem;
}
.preisanker[data-preisanker]::before{
  content:"";display:block;width:2.5rem;height:1px;
  background:var(--gold-tief);margin:0 auto .85rem;
}
/* 28.09.2026 (Saskia): Preiszahlen dunkel wie der Rest der Zeile, nicht gold. */
.preisanker__preis{color:inherit;font-weight:600}
@media(max-width:899px){
  /* dieselbe Groesse wie der Absatz davor (Regel Teil 1.2 weiter oben).
     Der Abstand um den goldenen Strich ist am Handy enger als am
     Rechner (.35rem statt .85rem): sonst rutschte der Kaufknopf unter
     die Falz. Ueber und unter dem Strich bleibt er gleich. */
  .preisanker[data-preisanker]{font-size:.875rem;line-height:1.45;margin-top:.35rem}
  .preisanker[data-preisanker]::before{margin:0 auto .35rem}
}
@media(min-width:900px) and (max-height:800px){
  /* Startseite, niedriges Fenster: der Absatz steht jetzt UNTER den Haken,
     vor der Preiszeile steht also kein Flietext mehr. */
  body[data-seite="start"] .preisanker[data-preisanker]::before{display:none}
}

/* ===========================================================================
   TEIL G — ABSTAND UEBER DEM HAUPTBILD
   ---------------------------------------------------------------------------
   Am Handy stand das Hauptbild 4 px unter der Ueberschrift, waehrend
   darunter 19 px Luft bis zum naechsten Element waren (gemessen am
   25.09.2026 auf themenwelt-gedenken.html bei 390 x 844: Ueberschrift endet
   bei 172 px, Bildrahmen beginnt bei 176 px, Bildrahmen endet bei 553 px,
   der Stil-Satz-Kasten beginnt bei 572 px). Das wirkte gedrungen.
   Die 15 px Unterschied kommen aus dem eigenen Fussbereich von .wandel;
   dieselben 15 px stehen jetzt auch darueber.
   =========================================================================== */
@media(max-width:899px){
  /* Themenwelt- und Stil-Seiten: gleicher Abstand ueber und unter dem
     Bildrahmen. Der Wert ist 12 px und nicht die urspruenglich
     gemessenen 18 px: Bei 18 px rutschte der Kaufknopf am Handy auf
     zehn Seiten unter die Falz (Pflicht aus diesem Auftrag). 12 px ist
     der groesste Wert, bei dem die Pflicht auf allen Seiten haelt.
     Unter dem Rahmen liegen 15 px Bildzeile; die -3 px an der
     Beschreibung machen daraus ebenfalls 12 px. */
  .seitenkopf__gitter .wandel{margin-top:12px}
  .seitenkopf__gitter .seitenkopf__beschreibung{margin-top:-3px}
  /* Startseite: unter dem Rahmen steht die Bildzeile (.wandel__marken)
     mit 8 px Abstand -- dieselben 8 px jetzt darueber. */
  .hero__gitter > .wandel{margin-top:8px}
}

/* A3, Nachtrag: In der Kasse stehen einige Kaestchen in einem .k-feld. Die
   Regel ".k-feld input" weiter oben setzt dort width:100% und min-height:44px
   und ist staerker als die Grundregel oben -- gemessen wurde ein Kaestchen
   von 30 x 44 px statt 22 x 22 px. Hier die Masse ausdruecklich. */
.kasse input[type="checkbox"],
.k-feld input[type="checkbox"],
.k-kenntnis input[type="checkbox"],
.k-foto-folgt input[type="checkbox"]{
  width:22px;height:22px;
  min-width:22px;max-width:22px;min-height:22px;max-height:22px;
  /* .k-feld input setzt padding:.6rem .8rem -- mit border-box waere das
     Kaestchen dadurch 30 px breit statt 22 px (gemessen). */
  padding:0;flex:none;margin-top:.1rem;
}

/* ===========================================================================
   TEIL C — DIE MITLAUFENDE LEISTE KLEBT WIEDER UNTEN
   ---------------------------------------------------------------------------
   Die Leiste stand nicht am unteren Rand, sondern etwa im unteren Drittel des
   Bildschirms. Ursache ist KEINE eigene Positionsrechnung fuer die Leiste,
   sondern der Wert --cookie-hoehe: layout.js (Zeile 1148) misst die Hoehe des
   Cookiebot-Fensters und schreibt sie an das Wurzelelement; styles.css
   (Zeile 5510) setzte damit "bottom: var(--cookie-hoehe, 0px)". Solange das
   Cookie-Fenster im Weg steht -- oder in der Chrome-App auf Android als
   hohes Element unten haengen bleibt --, schwebt die Leiste genau um dessen
   Hoehe ueber dem Rand und verdeckt Text.
   Jetzt klebt sie immer am unteren Rand: bottom:0, dazu der vorhandene
   Sicherheitsabstand env(safe-area-inset-bottom) aus .leiste weiter oben.
   Keine Positionsberechnung per JavaScript mehr. --cookie-hoehe bleibt
   bestehen (layout.js unveraendert), wird von der Leiste aber nicht mehr
   gelesen.
   =========================================================================== */
@media(max-width:899px){
  .leiste{
    bottom:0;
    transition:transform var(--t-ruhig) var(--kurve);
  }
}

/* TEIL E, Nachtrag: Am Handy stehen die fuenf Haken in einem Raster mit drei
   festen Spalten (Teil 10 weiter oben). In einem Raster kann eine
   unvollstaendige letzte Reihe nicht mittig stehen -- die beiden letzten
   Haken sassen deshalb in Spalte 1 und 2, rechts blieben 118 px leer
   (gemessen bei 390 x 844). Dieselbe Optik, aber als umbrechende Reihe:
   drei je Zeile, und was uebrig bleibt, steht mittig. */
@media(max-width:899px){
  .seitenkopf__gitter .hero-vertrauen,
  .hero__gitter .hero-vertrauen{
    /* flex-direction ausdruecklich: eine aeltere Handy-Regel weiter oben
       stellt .hero-vertrauen auf column -- daraus wuerden fuenf Zeilen. */
    display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px;
  }
  .seitenkopf__gitter .hero-vertrauen li,
  .hero__gitter .hero-vertrauen li{
    flex:0 0 calc((100% - 24px) / 3);max-width:calc((100% - 24px) / 3);
  }
}

/* ============================================================================
   CANVASORY UNVERGESSEN — SAND
   ----------------------------------------------------------------------------
   Auftrag "Startseite fest einbauen" (26.09.2026). Dieser Block ist die
   Gestaltung aus entwurf.css, fest eingebaut. Er steht absichtlich am ENDE
   der Datei: die Regeln darueber sind fuer die dunkle Buehne geschrieben und
   werden hier der Reihe nach abgeloest. Deshalb kommt der Block mit sehr
   wenig !important aus -- bei gleicher Spezifitaet gewinnt die spaetere
   Regel, und das ist diese hier.

   entwurf.css, entwurf.js und vorschau.html bleiben unveraendert im
   Projektordner liegen. Sie sind Saskias Vorschau und werden von keiner
   Seite mehr geladen; sie gehoeren NICHT nach zum-hochladen/.
   ============================================================================ */

/* ---------------------------------------------------------------- 1 GRUND */
html,body{background:var(--grund);color:var(--text)}

/* Der Saum war eine goldene Haarlinie fuer den dunklen Grund. Auf Sand
   uebernimmt die Glaslinie weiter unten. */
.abschnitt::before,.vorteile::before,.garantie::before,.beweis::before,
.memoria::before,.abschluss::before,.wuerfelband::before,.fuss::before,
.abschnitt.hell::before,.abschnitt.hell-weich::before,
.seitenkopf::after,.rezensionen::before{content:none}

/* -------------------------------------------------------------- 2 KNOEPFE */
/* Alle Knoepfe rund, der Kaufknopf als Oliv-Glasknopf: Verlauf, Lichtstreifen
   ueber die volle Breite, innere Kante, Schatten, cremefarbene Schrift, kein
   Goldrand ("Feinschliff 2" + 4 + "Glanz ueber die volle Knopfbreite"). */
.knopf{border-radius:14px}
/* Auftrag "Startseite fest einbauen, Hochzeit anlegen" (27.09.2026, Teil B):
   Der Kaufknopf traegt ueberall dasselbe Oliv-Khaki im Glas-Stil -- Hero,
   Handy-Leiste, Generator, Themenwelt-Seiten. Kein zweites Gruen mehr auf
   der Seite. Der hellste Grundton ist #6F6C47; die cremefarbene Schrift
   erreicht darauf 4,67 : 1, weil der Lichtstreifen bei 30 % Hoehe endet und
   damit oberhalb der Schrift bleibt. */
.knopf--gold{
  position:relative;overflow:hidden;border:0;border-radius:14px;
  color:#F6EFDF;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,.10) 100%),
    linear-gradient(135deg, #6F6C47 0%, #5C5A39 50%, #45432A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 4px rgba(0,0,0,.24),
    0 8px 20px rgba(60,50,30,.26);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  transition:transform .2s var(--kurve), box-shadow .2s var(--kurve);
}
.knopf--gold::after{
  content:"";position:absolute;left:2px;right:2px;top:2px;height:30%;
  border-radius:12px 12px 8px 8px / 12px 12px 10px 10px;
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08) 70%, rgba(255,255,255,0));
  pointer-events:none;
}
.knopf--gold:hover{filter:brightness(1.07)}
/* Teil B5: Beim Druecken gibt der Knopf sichtbar nach -- 2 % kleiner, der
   Schatten wird flacher, als laege er naeher an der Flaeche. Hin in 0,1 s,
   zurueck in 0,2 s: das Druecken soll sofort quittiert werden, das Loslassen
   darf ausschwingen. */
.knopf--gold:active{
  transform:scale(.98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 4px rgba(0,0,0,.24),
    0 3px 8px rgba(60,50,30,.22);
  transition:transform .1s var(--kurve), box-shadow .1s var(--kurve);
}
@media(prefers-reduced-motion:reduce){
  .knopf--gold,.knopf--gold:active{transition:none;transform:none}
}
/* Umriss-Knopf: schmaler dunkelbrauner Rahmen, dunkle Schrift, keine
   Fuellung, kein Unterstrich. Auftrag "Feinschliff Startseite" (27.09.2026,
   Teil 2): "Zu den Gedenkbildern", "Alle Fragen ansehen" und "Weitere
   Bewertungen ansehen" sehen jetzt gleich aus -- drei Wege aus einem
   Abschnitt heraus, drei gleiche Knoepfe. */
/* Teil B4: Umriss-Knopf, ein Aussehen fuer alle -- "Zu den Gedenkbildern",
   "Alle Fragen ansehen", "Weitere Bewertungen ansehen". Rahmen an ALLEN VIER
   Seiten geschlossen: die alte Regel setzte am Gedenken-Verweis
   border-bottom:0 und liess die Unterkante offen. */
.knopf--umriss,.hell .knopf--umriss,.hell-weich .knopf--umriss,
.memoria__verweis{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;border-radius:14px;
  border:1.5px solid #2B2418;color:var(--text);background:transparent;
  font-weight:500;text-decoration:none;box-shadow:none;
  padding:.7rem 1.4rem;
}
.knopf--umriss:hover,.hell .knopf--umriss:hover,.hell-weich .knopf--umriss:hover,
.memoria__verweis:hover{
  border-color:#2B2418;color:var(--text);background:rgba(43,36,24,.06);
  text-decoration:none;
}
/* Kein Pseudo-Element: der Glanzstreifen gehoert allein dem Kaufknopf. */
.knopf--umriss::after,.knopf--umriss::before,
.memoria__verweis::after,.memoria__verweis::before{content:none}


/* ------------------------------------------------------------ 3 SEITENKOPF */
header.kopf{
  background:radial-gradient(120% 160% at 50% -20%, #DDC9AA 0%, #CDB697 55%, #BBA07F 100%);
  border-bottom:1px solid rgba(138,106,40,.35);
}
.kopf__inhalt{gap:1.5rem}
/* Auftrag "Startseite fest einbauen, Hochzeit anlegen" (27.09.2026, Teil A):
   Das Logo ist jetzt freigestellt (logo-unvergessen-frei.png) und bringt
   keinen eigenen Hintergrund mehr mit. Die weiche Maske, die frueher den
   mitgelieferten Sand in den Grund ueberblenden musste, ist damit nicht nur
   ueberfluessig, sondern schaedlich -- sie hat die Raender des Schriftzugs
   ausgefranst. Sie ist ersatzlos entfernt: kein Kasten, kein Schimmer,
   scharfe Kanten. 78 px hoch, Breite frei. */
.marke{flex:0 0 auto;min-width:225px}
.marke img{height:78px;width:auto;max-width:none}
header .nav > a.nav--rechner{color:var(--text);font-size:1.05rem;white-space:nowrap}
.warenkorb-knopf{color:var(--text)}
/* Sprachwahl: schmaler dunkelbrauner Rahmen, braune Schrift, aktive Sprache
   leicht hinterlegt -- kein schwarzer Block mehr. */
.sprache{border:1px solid rgba(90,78,60,.35);border-radius:10px;overflow:hidden;background:transparent}
.sprache button{background:transparent;color:var(--text-leise);border:0;font-size:.85rem;padding:.35rem .6rem}
.sprache button[aria-pressed="true"]{background:rgba(90,78,60,.16);color:var(--text);font-weight:600}
/* Die Sprachwahl im Handy-Menue steht als letzter Punkt in der Spalte. */
.sprache--menue{display:none}
@media(max-width:899px){
  .sprache--menue{display:inline-flex;align-self:flex-start;margin-top:.9rem}
  .kopf__rechts .sprache{display:none}
}

/* --------------------------------------------------- 4 ERSTER BILDSCHIRM */
.hero{background:transparent;padding-top:1.6rem;padding-bottom:1.6rem}
.hero h1,.hero h1 em{color:var(--text);font-style:normal}
.hero h1{font-size:clamp(2.1rem,calc(3.6vw / var(--zf,1)),3.3rem);line-height:1.12;margin-bottom:.6rem}
.hero__unter{color:var(--text-leise);font-size:1.15rem;line-height:1.5;max-width:38rem}
/* Selektortiefe wie die Regel fuer niedrige Fenster, die hier sonst 62ch
   (rund 748 px) setzt -- Auftrag 27.09.2026, Teil 6: hoechstens 38 rem. */
.hero__gitter .hero__unter{max-width:38rem}
.preisanker{color:var(--text);font-weight:600}
/* 28.09.2026 (Saskia): ebenfalls dunkel. Diese Regel stand NACH der oberen
   und hat sie ueberstimmt -- beide muessen geaendert werden. */
.preisanker__preis{color:inherit}
.preis-klein{display:block;font-size:.85rem;font-weight:400;color:var(--text-leise);margin-top:.15rem}
.beleg,.beleg__text,.beleg__zahl{color:var(--text)}
.sterne{color:var(--gold-dunkel)}
.hero .knopf--gold{padding:1rem 2.4rem;font-size:1.12rem;min-width:16rem;text-align:center}
/* Links Text (1,25 Anteile), rechts Bild (0,75), vertikal mittig. */
.hero__gitter{grid-template-columns:1.25fr .75fr;align-items:center;gap:3rem}

/* Die drei Haken: am Rechner nebeneinander in einer Zeile. */
.hero-vertrauen{color:var(--text)}
.hero-vertrauen svg{color:var(--oliv)}
/* Auftrag 4c (27.09.2026), Punkt 3, aus entwurf.css v58: Die drei Haken
   stehen UNTEREINANDER statt nebeneinander -- am Rechner wie am Handy. In
   einer Zeile brachen sie je nach Fensterbreite zu 2 + 1 um; das sah nach
   Versehen aus. Jetzt eine saubere Liste, links buendig unter dem Knopf,
   gleicher Abstand. Ersetzt die fruehere Reihen-Regel an dieser Stelle. */
@media(min-width:900px){
  .hero__gitter .hero-vertrauen{
    display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;
    gap:.35rem;margin-top:.9rem;font-size:.95rem;justify-content:flex-start;
  }
  .hero__gitter .hero-vertrauen li{flex:0 0 auto;width:auto;max-width:none;margin:0}
}
/* Die Haken zeichnen sich beim ersten Anzeigen einmal nacheinander ein --
   einmal, keine Schleife. */
/* Auftrag 4d (27.09.2026), aus entwurf.css v59: Die Haken zeichnen sich einen
   Tick langsamer ein -- je 0,7 s statt 0,45 s, Abstand 0,6 s statt 0,4 s.
   Ersetzt die frueheren Werte an dieser Stelle, nichts doppelt. */
.hero-vertrauen li svg{stroke-dasharray:30;stroke-dashoffset:30;animation:hakenAn .7s ease-out forwards}
.hero-vertrauen li:nth-child(1) svg{animation-delay:.6s}
.hero-vertrauen li:nth-child(2) svg{animation-delay:1.2s}
.hero-vertrauen li:nth-child(3) svg{animation-delay:1.8s}
@keyframes hakenAn{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .hero-vertrauen li svg{animation:none;stroke-dashoffset:0}
}

/* --------------------------------------------- 5 DAS BILD AN DER WAND */
/* Kein Rahmen, kein heller Innenabstand -- eine Leinwand haengt an der Wand,
   sie steht nicht in einem Passepartout. Licht faellt von oben links, der
   Schatten liegt unten rechts und ist warm-braun ("Feinschliff 9"). */
.hero .wandel{max-width:300px;margin-left:auto}
.wandel__rahmen{
  border:0;padding:0;background:transparent;border-radius:2px;
  position:relative;overflow:visible;
  box-shadow:
    18px 30px 34px -6px rgba(40,30,15,.70),
    6px 12px 18px rgba(40,30,15,.40),
    40px 70px 90px -16px rgba(40,30,15,.50);
}
.wandel__rahmen img{box-shadow:none}
/* Die umlaufende Kante: rechts und unten laeuft das Motiv um den
   Keilrahmen. Das Paar der Nachher-Lage traegt dieselbe Blende wie die Lage
   selbst und wechselt dadurch im Gleichschritt mit. */
.wandel__kanten{position:absolute;inset:0;pointer-events:none;display:block}
/* Die Kanten der Vorher-Lage liegen unveraendert darunter und blenden nie --
   genau wie .wandel__lage--vorher selbst. Sie sind dadurch immer sichtbar,
   wenn die Nachher-Lage gerade durchsichtig ist. */
.wandel__kanten--vorher{opacity:1}
.wandel__kanten--nachher{opacity:1;animation:wandelBlende 14s ease-in-out infinite}
.wandel[data-lauf="aus"] .wandel__kanten--nachher,
.wandel[data-warten="ja"] .wandel__kanten--nachher{animation-play-state:paused}
.wandel__kante{position:absolute;overflow:hidden;display:block}
.wandel__kante img{position:absolute;display:block;max-width:none;box-shadow:none}
.wandel__kante--rechts{
  top:0;left:100%;width:6px;height:100%;
  transform:skewY(45deg);transform-origin:left top;filter:brightness(.5) saturate(.9);
}
.wandel__kante--rechts img{right:0;top:0;height:100%;width:auto}
.wandel__kante--unten{
  left:0;top:100%;width:100%;height:6px;
  transform:skewX(45deg);transform-origin:left top;filter:brightness(.4);
}
.wandel__kante--unten img{left:0;bottom:0;width:100%;height:auto}
/* Die eine ruhige Zeile unter dem Bild. */
.wandel__hinweis{
  margin:.9rem auto 0;font-size:.8rem;line-height:1.35;
  color:var(--text-leise);text-align:center;max-width:300px;
}
/* Jedes Bild auf der Seite bekommt denselben Wandschatten von oben links.
   Ausgenommen: Logos, Sterne, Zahlarten-Symbole und Symbole -- und seit
   Auftrag Einbau 9 (04.10.2026, Teil B3) die Schleife im Knopf
   "Erinnerung einrichten": sie ist freigestellt und bekommt weder Kasten
   noch runde Ecken. Der Entwurf brauchte dafuer !important, hier steht es
   jetzt an der Quelle. */
   Ausgenommen sind ausserdem die freigestellten Produktbilder im Material-
   Vergleich (.mat .bild img): ein rechteckiger Schatten legte dort einen
   sichtbaren Kasten um die Silhouette (Auftrag Einbau 11, Teil C2).
main img:not(.marke img):not(.sterne *):not([class*="zahlart"]):not([class*="icon"]):not(.erinnern-band__schleife):not(.mat .bild img){
  box-shadow:14px 24px 30px -6px rgba(40,30,15,.55), 5px 10px 16px rgba(40,30,15,.32);
  border-radius:2px;
}
.kachel img,.karte img,.rez img,.band__bild img{
  box-shadow:12px 18px 26px -6px rgba(40,30,15,.5), 4px 8px 12px rgba(40,30,15,.28);
}

/* ------------------------------------------------------- 6 DIE GLASLINIE */
/* Zwischen den Abschnitten steht eine 2 px hohe goldene Linie mit hellem
   Lichtpunkt in der Mitte und weichem Schein. Sonst keine Linien, keine
   Raender, keine Farbwechsel. */
main > section.abschnitt{
  background:transparent;position:relative;padding-top:2.6rem;
  border-top:0;border-bottom:0;
}
main > section.abschnitt.hell,main > section.abschnitt.hell-weich,
main > section.son-band,main > section.garantie{background:transparent}
main > section.abschnitt::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(82%,900px);height:2px;border-radius:0;
  background:linear-gradient(90deg, rgba(170,128,78,0) 0%, #AA804E 18%, #E1CF9B 48%, #F5E7C0 50%, #E1CF9B 52%, #AA804E 82%, rgba(170,128,78,0) 100%);
  box-shadow:0 0 6px rgba(225,207,155,.55), 0 0 14px rgba(225,207,155,.25);
}
main > section.abschnitt::after{
  content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%);
  width:120px;height:12px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(245,231,192,.75), rgba(245,231,192,0));
  pointer-events:none;
}
@media(max-width:640px){
  main > section.abschnitt{padding-top:2rem}
  main > section.abschnitt::before{width:86%}
}
/* Kleinzeilen und Abschnittsueberschriften mittig. */
main .augbraue,main .titel,main h2.titel{
  text-align:center;margin-left:auto;margin-right:auto;display:block;width:100%;
}
main .augbraue{font-size:.78rem;letter-spacing:.18em;color:var(--gold-dunkel);margin-bottom:.4rem}
main .augbraue::before{content:none}

/* ---------------------------------------------------- 7 THEMENWELTEN */
/* Kacheln ohne Kasten und ohne Rahmen: Bild 4:5 mit Wandschatten, darunter
   Name und Einstiegspreis. Die ganze Kachel ist der Link. */
#themen .titel{text-align:center;margin:0 0 1.2rem}
#themen .huelle,#themen .kacheln,#themen .kachel,
#themen .kachel__inhalt,#themen .kachel__bild,#themen .kachel picture{
  background:transparent;background-image:none;
}
#themen .kacheln{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 1.2rem;
  max-width:1100px;margin:0 auto;border:0;padding:0;box-shadow:none;
}
#themen .kachel{
  display:block;border:0;box-shadow:none;padding:0;border-radius:0;
  text-align:center;color:var(--text);transform:none;
  flex:0 0 calc(25% - .9rem);max-width:calc(25% - .9rem);
}
/* Das <picture> ist nur die Huelle um das Bild und darf keine eigene
   Zeilenhoehe mitbringen (Teil C2). */
#themen .kachel picture{display:block;line-height:0}
#themen .kachel__bild{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:3px;
  box-shadow:10px 16px 22px -6px rgba(40,30,15,.5), 4px 8px 12px rgba(40,30,15,.28);
}
#themen .kachel__inhalt{position:static;padding:.7rem 0 0;background:none;display:block}
#themen .kachel h3{margin:0;font-size:1.05rem;color:var(--text);font-family:var(--display)}
#themen .kachel__preis{margin:.15rem 0 0;font-size:.9rem;color:var(--text-leise);line-height:1.3}
/* Auftrag 27.09.2026, Teil C4: Das Bild hebt sich 6 px, waechst 3 % und
   bekommt einen tieferen Wandschatten. 0,6 s in BEIDE Richtungen -- die
   alte Regel lief nur beim Draufzeigen (0,2 s) und sprang beim Verlassen
   hart zurueck. */
#themen .kachel .kachel__bild{
  transition:transform .6s cubic-bezier(.22,.61,.36,1),
             box-shadow .6s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
#themen .kachel:hover .kachel__bild,
#themen .kachel:focus-visible .kachel__bild{
  transform:translateY(-6px) scale(1.03);
  /* Einbau 13, Teil B2: kein brauner Strich mehr -- beim Zeigen wird nur der
     Wandschatten nach unten rechts tiefer. */
  box-shadow:14px 22px 30px -6px rgba(40,30,15,.55), 5px 10px 16px rgba(40,30,15,.32);
}
@media(prefers-reduced-motion:reduce){
  #themen .kachel .kachel__bild{transition:none}
  #themen .kachel:hover .kachel__bild,
  #themen .kachel:focus-visible .kachel__bild{transform:none}
}
.themen__rabatt{
  margin:1.6rem auto 0;text-align:center;color:var(--text-leise);font-size:.95rem;
}
@media(max-width:640px){
  #themen .kacheln{gap:1.1rem .9rem}
  #themen .kachel{flex:0 0 calc(50% - .45rem);max-width:calc(50% - .45rem);margin:0}
  /* Die siebte Kachel steht allein in der letzten Reihe -- mittig, in der
     Breite einer normalen Kachel, nicht ueber die ganze Zeile gezogen. */
  #themen .kachel:last-child:nth-child(odd){margin-inline:auto}
  #themen .kachel h3{font-size:1rem}
  #themen .kachel__preis{font-size:.85rem}
}

/* ---------------------------------------------------- 8 SO LAEUFT ES */
#ablauf{padding:2.6rem 0 2.2rem}
#ablauf .huelle{max-width:1000px;margin:0 auto;text-align:center}
#ablauf .titel{margin:0 0 1.6rem}
#ablauf .schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin:0 0 1.8rem}
#ablauf .schritt{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:0;margin:0;background:transparent;border:0;box-shadow:none}
/* Die Nummern tragen dieselbe Glasoptik wie der Kaufknopf. */
#ablauf .schritt__nr{
  position:relative;overflow:hidden;margin:0;
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.25rem;color:#F6EFDF;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,.10) 100%),
    linear-gradient(135deg,#6F6C47 0%,#5C5A39 50%,#45432A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.24), 0 6px 14px rgba(60,50,30,.26);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}
#ablauf .schritt__nr::after{
  content:"";position:absolute;left:2px;right:2px;top:2px;height:30%;
  border-radius:50% 50% 40% 40%;
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08) 70%, rgba(255,255,255,0));
  pointer-events:none;
}
#ablauf .schritt h3{margin:.2rem 0 0;font-size:1.1rem;font-family:var(--display);font-weight:400;color:var(--text)}
#ablauf .schritt p{margin:0;font-size:.95rem;line-height:1.4;color:var(--text-leise);max-width:16rem;width:auto}
#ablauf .band{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;margin-top:1.2rem;font-size:.9rem;color:var(--text)}
/* Auftrag "Feinschliff Startseite" (27.09.2026, Teil 5): dasselbe
   Haken-Symbol wie im ersten Bildschirm, und dieselbe Anhak-Bewegung -- nur
   startet sie hier beim Scrollen (bandHakenBeobachten() in layout.js setzt
   dafuer data-haken="ja"), nicht beim Laden. Solange das Merkmal fehlt, ist
   der Haken noch nicht gezeichnet. */
#ablauf .band > span{display:inline-flex;align-items:center;gap:.4rem}
#ablauf .band svg{
  width:16px;height:16px;flex:0 0 16px;color:var(--oliv);
  stroke-dasharray:30;stroke-dashoffset:30;
}
/* Auftrag 4d (27.09.2026), aus entwurf.css v59: dieselbe ruhigere Gangart wie
   bei den Hero-Haken -- je 0,7 s, Abstand 0,6 s. */
#ablauf .band[data-haken="ja"] svg{animation:hakenAn .7s ease-out forwards}
#ablauf .band[data-haken="ja"] > span:nth-child(1) svg{animation-delay:0s}
#ablauf .band[data-haken="ja"] > span:nth-child(2) svg{animation-delay:.6s}
#ablauf .band[data-haken="ja"] > span:nth-child(3) svg{animation-delay:1.2s}
@media(prefers-reduced-motion:reduce){
  /* Kein Einzeichnen: die Haken stehen von Anfang an da. */
  #ablauf .band svg{stroke-dashoffset:0;animation:none}
}
@media(max-width:640px){
  #ablauf{padding:2rem 0 1.8rem}
  #ablauf .schritte{grid-template-columns:1fr;gap:1rem;margin-bottom:1.3rem;text-align:left}
  #ablauf .schritt{display:grid;grid-template-columns:40px 1fr;column-gap:.9rem;row-gap:.15rem;align-items:start}
  #ablauf .schritt__nr{grid-row:1 / 3;grid-column:1;flex:0 0 40px;width:40px;height:40px;font-size:1.1rem}
  #ablauf .schritt h3{grid-column:2;margin:0;font-size:1.05rem}
  #ablauf .schritt p{grid-column:2;font-size:.92rem;line-height:1.35;max-width:none}
  #ablauf .band{flex-direction:column;align-items:center;gap:.25rem;margin-top:.9rem;font-size:.85rem}
}

/* ------------------------------------------------------ 9 KUNDENFOTOS */
#galerie .band__bild img{border-radius:3px}
#galerie figcaption{color:var(--text-leise);font-size:.8rem}
#galerie .band__welt{color:var(--gold-dunkel)}

/* ------------------------------------------------------ 10 BEWERTUNGEN */
/* Kein Kasten, kein Rand, kein Hintergrund hinter den Karten. 4,9 steht als
   eigener Block direkt ueber den Sternen, rechts daneben die Balken. */
#bewertungen .rezensionen{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  max-width:1040px;margin:0 auto;background:transparent;border:0;padding:0;box-shadow:none;
  align-items:stretch;
}
#bewertungen .bew__gitter{display:block}
#bewertungen .bew__wertung{
  display:grid;grid-template-columns:auto minmax(200px,320px);grid-template-rows:auto auto;
  column-gap:2rem;row-gap:0;justify-content:center;align-items:center;
  max-width:none;margin:0 auto 1.6rem;padding:0;background:transparent;border:0;box-shadow:none;
}
#bewertungen .bew__note{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:.15rem}
#bewertungen .note__zahl{
  grid-column:1;grid-row:1;margin:0;padding:0;justify-self:center;text-align:center;
  font-size:3rem;line-height:.85;color:var(--text);font-family:var(--display);
}
#bewertungen #note-sterne{justify-self:center;text-align:center;margin:0;line-height:1}
#bewertungen #note-sterne .sterne{display:inline-flex;vertical-align:top}
#bewertungen .verteilung{grid-column:2;grid-row:1;margin:0;max-width:320px;display:flex;flex-direction:column;gap:.25rem}
#bewertungen .verteilung__zeile{
  display:grid;grid-template-columns:2.6rem 1fr 2.8rem;align-items:center;gap:.5rem;
  font-size:.85rem;color:var(--text-leise);
}
#bewertungen .verteilung__balken{display:block;height:8px;border-radius:4px;background:rgba(43,36,24,.12);overflow:hidden}
#bewertungen .verteilung__balken i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#AA804E,#D9BE7E)}
#bewertungen .verteilung__wert{text-align:right}
#bewertungen .note__unter{grid-column:1 / -1;grid-row:2;text-align:center;margin-top:.6rem;font-size:.9rem;color:var(--text-leise)}
/* Die Karten: heller Sand, weicher Schatten, alle einer Reihe gleich hoch. */
#bewertungen .rez{
  display:flex;flex-direction:column;height:100%;
  background:var(--grund-weich);border:0;border-radius:14px;
  padding:.85rem .9rem 1rem;box-shadow:0 8px 18px rgba(40,30,15,.12);
  color:var(--text);max-width:240px;margin:0 auto;width:100%;
}
#bewertungen .rez:nth-child(n+5){display:none}
#bewertungen .rez__kopf{gap:.15rem .6rem}
#bewertungen .rez__inhalt{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;flex:1 1 auto}
#bewertungen .rez__foto{margin:0 0 .35rem}
#bewertungen .rez__foto img,#bewertungen .rez img{
  max-height:220px;width:100%;object-fit:cover;border-radius:6px;
  box-shadow:6px 10px 16px -4px rgba(40,30,15,.45);
}
#bewertungen .kurztext{margin:0;flex:0 0 auto;color:var(--text);font-size:.92rem;line-height:1.4}
#bewertungen .mehrlesen{
  margin:0;padding:.15rem 0;font-size:.85rem;line-height:1.3;min-height:0;height:auto;
  display:inline-block;align-self:flex-start;color:var(--gold-dunkel);
}
#bewertungen .rez__name{color:var(--text)}
#bewertungen .rez__datum,#bewertungen .rez__produkt,#bewertungen .siegel{color:var(--text-leise);font-size:.8rem}
#bewertungen .rez__fuss{
  margin-top:auto;padding-top:.6rem;display:flex;flex-direction:column;
  align-items:center;gap:.25rem;font-size:.78rem;
}
#bewertungen .rez__produkt{white-space:nowrap}
#bewertungen .siegel{padding:.15rem .5rem;border-radius:999px;border:1px solid rgba(90,78,60,.35);background:transparent}
#bewertungen .bew__nachladen{text-align:center;margin-top:1.4rem}
@media(min-width:1088px){
  #bewertungen .rezensionen{grid-template-columns:repeat(5,1fr)}
  #bewertungen .rez:nth-child(5){display:flex}
}
@media(max-width:640px){
  #bewertungen .bew__wertung{grid-template-columns:auto 1fr;column-gap:1rem}
  #bewertungen .note__zahl{font-size:2.6rem;line-height:.9}
  #bewertungen #note-sterne .sterne{font-size:.9rem}
  #bewertungen .verteilung{align-self:center}
  #bewertungen .verteilung__zeile{grid-template-columns:2.2rem 1fr 2.4rem;font-size:.78rem}
  #bewertungen .rezensionen{grid-template-columns:1fr;gap:.7rem}
  #bewertungen .rez{display:block;max-width:none;padding:.7rem}
  #bewertungen .rez:nth-child(n+4){display:none}
  #bewertungen .rez__inhalt{
    display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto;
    column-gap:.8rem;row-gap:.2rem;align-items:start;justify-items:start;
  }
  #bewertungen .rez__foto{grid-column:1;grid-row:1 / 3;width:72px;height:90px;overflow:hidden;border-radius:6px;margin:0}
  #bewertungen .rez__foto img,#bewertungen .rez__foto picture{width:72px;height:90px;max-height:90px;object-fit:cover;display:block}
  #bewertungen .kurztext{
    grid-column:2;grid-row:1;margin:0;font-size:.88rem;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  #bewertungen .mehrlesen{grid-column:2;grid-row:2;justify-self:start;margin:.15rem 0 0}
  #bewertungen .rez__fuss{margin-top:.45rem;justify-content:center}
}

/* ---------------------------------------------------- 11 GEDENKEN KURZ */
#memoria{background:transparent;color:var(--text);padding:2.6rem 0}
#memoria .memoria__inhalt{
  display:grid;grid-template-columns:200px auto;column-gap:2.4rem;align-items:center;
  justify-content:center;width:fit-content;max-width:820px;margin:0 auto;text-align:left;
}
/* Das Bild sitzt in einem Link: der Link haelt den Rasterplatz, das Bild schwebt.
   Der eigene Wandschatten des Bildes bleibt beim Schweben unveraendert. */
#memoria .memoria__bildlink{
  grid-column:1;grid-row:1 / 5;align-self:center;
  display:block;line-height:0;width:200px;cursor:pointer;
}
#memoria .memoria__bildlink picture{display:block;line-height:0}
#memoria .memoria__bild{
  display:block;width:200px;aspect-ratio:4/5;object-fit:cover;border-radius:3px;
  box-shadow:14px 24px 30px -8px rgba(40,30,15,.55), 4px 10px 16px rgba(40,30,15,.30);
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
#memoria .memoria__bildlink:hover .memoria__bild,
#memoria .memoria__bildlink:focus-visible .memoria__bild{
  transform:translateY(-6px) scale(1.03);
}
@media(prefers-reduced-motion:reduce){
  #memoria .memoria__bild{transition:none}
  #memoria .memoria__bildlink:hover .memoria__bild,
  #memoria .memoria__bildlink:focus-visible .memoria__bild{transform:none}
}
#memoria .augbraue{
  grid-column:2;text-align:left;width:auto;margin:0 0 .55rem;
  font-size:.78rem;letter-spacing:.18em;color:var(--gold-dunkel);font-weight:500;
}
#memoria h2{
  grid-column:2;margin:0 0 .7rem;color:var(--text);font-size:1.7rem;line-height:1.15;
  text-wrap:balance;max-width:22ch;
}
#memoria h2 em{color:var(--text);font-style:italic}
#memoria p{
  grid-column:2;margin:0 0 .8rem;color:var(--text-leise);font-size:1rem;line-height:1.5;
  max-width:36ch;text-wrap:balance;
}
#memoria .memoria__verweis{grid-column:2;justify-self:start;margin-top:0}
@media(max-width:640px){
  #memoria{padding:2rem 0}
  #memoria .memoria__inhalt{grid-template-columns:120px 1fr;column-gap:1rem;width:auto;max-width:none}
  /* Am Handy steht der Knopf ueber die volle Breite unter dem Text, mittig. */
  #memoria .memoria__verweis{grid-column:1 / -1;justify-self:stretch;width:100%;margin-top:.9rem}
  #memoria .memoria__bildlink{width:120px;transform:translateX(-4px)}
  #memoria .memoria__bild{width:120px}
  #memoria h2{font-size:1.3rem}
  #memoria p{font-size:.92rem}
}

/* --------------------------------------------------- 12 HAEUFIG GEFRAGT */
#fragen .huelle{max-width:760px;margin:0 auto;text-align:center}
#fragen .faq{max-width:720px;margin:0 auto;border:0;padding:0;background:transparent;box-shadow:none}
#fragen .faq details{
  background:transparent;border:0;border-bottom:1px solid rgba(90,78,60,.25);
  border-radius:0;padding:.2rem 0;box-shadow:none;
}
#fragen .faq summary{color:var(--text);font-size:1rem;padding:.6rem 0;text-align:left;background:transparent}
#fragen .faq p,#fragen .faq details p{color:var(--text-leise);font-size:.95rem;line-height:1.5;text-align:left}
/* Auftrag 8: der Knopf steht mittig -- am Rechner wie am Handy, auf
   allen Seiten. Das p ist ein Block ueber die volle Breite; ohne
   text-align blieb der Knopf darin links stehen. */
#fragen .fragen__mehr{margin:1.2rem auto 0;text-align:center}
.faq + p{text-align:center}
#fragen .knopf,#fragen a.knopf--umriss{display:inline-block;margin:1.2rem auto 0}

/* -------------------------------------------------------- 13 FUSSZEILE */
footer.fuss,.fuss{background:var(--fuss-grund);color:var(--text)}
/* Auch hier keine Maske mehr (Teil A): das freigestellte Logo steht sauber
   auf dem Sand der Fusszeile. */
.fuss a{color:var(--text)}
.fuss h4{color:var(--text)}
.fuss .ki-hinweis{color:var(--text-gedaempft)}

/* -------------------------------------------- 14 KARTEN UND FLAECHEN */
.karte,.bewertung,.themenkachel,.faq details{
  background:var(--grund-weich);border-color:var(--grund-linie);border-radius:14px;
}

/* ---------------------------------------------------------- 15 HANDY */
/* Auftrag "Startseite fest einbauen" (26.09.2026, Teil B und C).
   Am Handy steht der erste Bildschirm in einer festen Folge:
   Sterne, Ueberschrift, Bild, Bildzeile, Unterzeile, Preis, Knopf, Haken.
   Alles mittig. Die Textspalte loest sich dafuer auf (display:contents),
   damit die acht Teile GESCHWISTER im selben Flexkasten sind und sich
   ueberhaupt sortieren lassen -- sonst liesse sich das Bild nicht zwischen
   Ueberschrift und Unterzeile stellen. */
@media(max-width:899px){
  /* Kopfzeile: Logo frei, Menueknopf links, Warenkorb rechts. Die
     Sprachwahl ist ins Menue gewandert (siehe Abschnitt 3). */
  header.kopf .kopf__inhalt{gap:.5rem;justify-content:space-between}
  .marke{flex:0 1 auto;min-width:0}
  /* Teil A: am Handy 64 px hoch (statt ueber die Breite gerechnet) -- so ist
     die Kopfzeile auf jedem Geraet gleich hoch. */
  .marke img{height:64px;width:auto;max-width:calc(52vw / var(--zf,1));object-fit:contain}

  /* Auftrag 4c (27.09.2026), Punkt 3: Die drei Haken stehen jetzt
     UNTEREINANDER (vorher drei Spalten nebeneinander) und brauchen dadurch
     rund 50 px mehr Hoehe. Damit trotzdem alles im ersten Bildschirm bleibt,
     ist der Stapel im ersten Bildschirm enger gesetzt: Der gleichmaessige
     Abstand aus dem Auftrag "Feinschliff Startseite" bleibt gleichmaessig,
     er betraegt jetzt 18 statt 23 px. Kein Text gekuerzt, das Bild bleibt
     170 px breit. */
  main > section.hero{padding-block:1.1rem}
  .hero__gitter{
    display:flex;flex-direction:column;gap:.5rem;align-items:stretch;
    text-align:center;padding-top:.25rem;
  }
  .hero__gitter > div:first-child{display:contents}
  .hero__gitter .beleg{order:1;margin:0;justify-content:center;align-self:center}
  .hero__gitter h1{order:2;font-size:1.75rem;line-height:1.15;margin:0}
  /* 170 px breit, mittig -- und 7 px nach links versetzt, weil der
     Wandschatten nach rechts faellt und das Bild sonst aus der Mitte
     gerueckt aussieht. */
  /* Auftrag "Feinschliff Startseite" (27.09.2026, Teil 6): Die Abstaende im
     ersten Bildschirm sind gleichmaessig. Zum Zeilenabstand des Stapels
     (.6rem = 9,6 px) kommt je .85rem = 13,6 px -- zusammen 23 px zwischen
     Ueberschrift und Bild, zwischen Bildzeile und Unterzeile und weiter
     hinunter bis zu den Haken. */
  .hero__gitter .wandel.wandel{order:3;max-width:170px;margin:.6rem auto;transform:translateX(-7px);overflow:visible}
  /* Das Bild traegt keinen Rahmen mehr, also auch keinen Innenabstand --
     eine aeltere Handy-Regel setzt hier noch .25rem oben und unten. */
  .hero__gitter .wandel__rahmen{padding:0}
  .hero__gitter .wandel .wandel__hinweis{margin-top:.5rem;max-width:270px;font-size:.78rem}
  .hero__gitter .hero__unter{order:4;font-size:1rem;line-height:1.45;margin:0 auto;max-width:30rem}
  .hero__gitter .preisanker{order:5;margin:.6rem 0 0;padding-top:0;text-align:center;font-size:.95rem}
  .hero__gitter .preisanker::before{content:none}
  /* .6rem statt .85rem: die Preiszeile bringt mit ihrer Kleinzeile schon
     rund 4 px Unterlaenge mit -- so stehen auch hier 23 px. */
  .hero__gitter .hero__knoepfe{order:6;display:block;width:100%;height:auto;margin:.5rem 0 0}
  .hero__gitter .knopf--gold{width:100%;padding:.85rem 1rem;font-size:1.05rem;min-width:0}
  /* Die drei Haken: je eine Zeile, Symbol 16 px, eng gesetzt.
     Auftrag 4c (27.09.2026), Punkt 3: linksbuendig untereinander, genau wie
     am Rechner -- die Zeilen standen vorher mittig und wirkten dadurch wie
     drei einzelne Zeilen statt wie eine Liste. display:flex statt block
     ausdruecklich: eine aeltere Handy-Regel weiter oben stellt hier eine
     umbrechende REIHE ein. */
  .hero__gitter .hero-vertrauen{
    order:7;display:flex;flex-direction:column;flex-wrap:nowrap;
    align-items:flex-start;gap:.3rem;width:100%;margin:.6rem 0 0;
    font-size:.9rem;line-height:1.3;text-align:left;
  }
  .hero__gitter .hero-vertrauen li{
    display:flex;width:auto;max-width:none;flex-direction:row;
    justify-content:flex-start;align-items:center;gap:.4rem;
    margin:0;padding:0;min-height:0;line-height:1.3;box-sizing:border-box;
  }
  .hero__gitter .hero-vertrauen li svg{width:16px;height:16px;flex:0 0 16px}
  .hero__gitter .hero-vertrauen li span{display:inline;text-align:left}
}

/* ============================================================================
   DIE KOMPAKTE FUSSZEILE
   ----------------------------------------------------------------------------
   Auftrag "Feinschliff Startseite" (27.09.2026, Teil 3+4). Dieser Block loest
   die frueheren Fusszeilen-Regeln ab -- er steht deshalb am Ende der Datei.
   Ziel: am Handy hoechstens 320 px, wenn alles zugeklappt ist; am Rechner
   hoechstens 300 px.
   ============================================================================ */
.fuss{
  background:var(--fuss-grund);color:var(--text);
  position:relative;padding:1rem 0 .8rem;margin-top:0;border-top:0;
}
/* Dieselbe goldene Glaslinie wie zwischen den Abschnitten. */
.fuss::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(82%,900px);height:2px;z-index:2;border-radius:0;
  background:linear-gradient(90deg, rgba(170,128,78,0) 0%, #AA804E 18%, #E1CF9B 48%, #F5E7C0 50%, #E1CF9B 52%, #AA804E 82%, rgba(170,128,78,0) 100%);
  box-shadow:0 0 6px rgba(225,207,155,.55), 0 0 14px rgba(225,207,155,.25);
  pointer-events:none;
}
/* Alte Abstaende ablegen: die frueheren Bloecke trugen je 28 px Aussen- und
   bis 20 px Innenabstand. In der kompakten Fassung bestimmt allein der
   gemeinsame Zeilenabstand des Stapels, wie weit die Teile auseinander
   stehen. */
.fuss__inhalt{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.fuss__inhalt > *{margin:0}
.fuss__zahlarten,.fuss__seo,.fuss__zahlzeile{margin:0;padding:0}
.fuss a{color:var(--text);text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss h4,.fuss summary{color:var(--text)}

/* --- Logo ---------------------------------------------------------------- */
/* Teil A: Das Logo im Fuss ist 240 px breit, hoechstens aber 70 % der
   Fensterbreite -- auf sehr schmalen Geraeten soll es nicht an die Raender
   stossen. Hoehe ergibt sich aus dem Bild (864 x 300 -> 83 px). */
.fuss__marke{margin:0;padding:0}
.fuss__marke .marke{display:block;padding:0}
.fuss__marke .marke img{width:240px;max-width:calc(70vw / var(--zf,1));height:auto;max-height:none}

/* --- Zahlarten und Sicherheitszeile -------------------------------------- */
#fuss-zahlarten{width:100%}
.fuss__zahlzeile{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.fuss__zahlarten{display:block}
/* Neun Kacheln in zwei Reihen: fuenf oben, vier unten. 5 x 56 px + 4 x 6 px
   Abstand = 304 px -- genau die Breite, bei der die sechste umbricht.
   Die Kachel wird hier kleiner als die sonst ueblichen 44 x 44 px: der
   Antippbereich ist der ganze Block (ein Verweis auf zahlarten.html), nicht
   die einzelne Kachel. */
.fuss .zahlarten__reihe{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;
  max-width:304px;
}
.fuss .zahlarten__reihe li.zahlart{
  /* flex-basis ausdruecklich: eine aeltere Regel setzt hier flex:0 0 20 %,
     das schlaegt eine reine Breitenangabe. */
  flex:0 0 56px;width:56px;max-width:56px;min-width:0;
  height:34px;min-height:0;margin:0;padding:0;
  /* Teil F2: kein Innenabstand mehr -- das Logo selbst bringt seinen Rand mit
     (max-width 46 px in einer 56 px breiten Kachel). overflow:hidden haelt
     ein zu breites Logo im Kasten, damit die Reihe nicht auseinanderrutscht. */
  box-sizing:border-box;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.fuss .zahlart__logogruppe{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;gap:0;
}
.fuss .zahlart__bild{
  display:block;height:16px;width:auto;max-width:46px;
  object-fit:contain;margin:auto;box-sizing:border-box;
}
/* Apple Pay, Klarna und Link liegen auf einer eigenen dunklen Flaeche. Sie
   duerfen hoeher sein (20 px), weil ihre Polsterung mitzaehlt -- so wirkt die
   Schrift darin genauso gross wie bei den uebrigen Logos. */
.fuss .zahlart__bild.zahlart-dunkel-chip,
.fuss .zahlart__bild.zahlart-eigene-flaeche{height:20px;padding:3px 5px}
/* Amazon Pay traegt den Pfeil unter dem Wort: bei gleicher Hoehe sitzt das
   Wort zu hoch. Zwei Pixel mehr richten es auf die Mittellinie der Reihe. */
.fuss .zahlart__bild[src*="amazonpay"]{height:22px}
/* Mastercard sind zwei Kreise ohne Schrift -- bei 16 px wirkt das Zeichen
   kleiner als die Wortmarken daneben. */
.fuss .zahlart__bild[src*="Mastercard"]{height:20px}
.fuss__sicher{
  display:flex;align-items:center;justify-content:center;gap:.35rem;
  margin:0;font-size:.78rem;line-height:1.3;color:var(--text-leise);text-align:center;
}
.fuss__schloss{width:14px;height:14px;flex:0 0 14px}

/* --- Die drei Aufklapper ------------------------------------------------- */
/* display/gap ausdruecklich: eine aeltere Regel macht daraus ein Raster mit
   24 px Zeilenabstand -- das waeren allein 48 px zwischen den drei
   Aufklappern. */
.fuss__spalten{width:100%;max-width:560px;display:block;gap:0}
.fuss__spalte{border-bottom:1px solid rgba(43,36,24,.2)}
.fuss__spalte:first-child{border-top:1px solid rgba(43,36,24,.2)}
.fuss__spalte > summary{
  display:flex;align-items:center;justify-content:space-between;
  min-height:44px;padding:0 .2rem;cursor:pointer;list-style:none;
  font-size:.9rem;font-weight:500;
}
.fuss__spalte > summary::-webkit-details-marker{display:none}
.fuss__spalte .fuss__pfeil{width:16px;height:16px;transition:transform var(--t-schnell) var(--kurve)}
.fuss__spalte[open] > summary .fuss__pfeil{transform:rotate(180deg)}
.fuss__spalte ul{margin:0 0 .6rem;padding:0 .2rem;list-style:none}
.fuss__spalte li{margin:0}
/* Jeder Verweis war bisher 44 px hoch (Tippflaeche). Sieben davon machen
   allein 308 px -- mehr, als die ganze Fusszeile hoch sein soll. Sie sind
   jetzt 32 px hoch: das liegt weiter deutlich ueber dem Mindestmass von
   24 x 24 px aus WCAG 2.2 (Erfolgskriterium 2.5.8, Stufe AA), nur nicht mehr
   ueber dem strengeren AAA-Mass von 44 px. */
.fuss__spalte li a{
  display:flex;align-items:center;justify-content:flex-start;min-height:32px;
  font-size:.9rem;line-height:1.5;padding:.1rem 0;text-align:left;
}
.fuss__spalte ul,.fuss__spalte li{text-align:left}

/* --- Suchbegriffe -------------------------------------------------------- */
.fuss__seo{width:100%;max-width:560px}
.fuss__seo-zeile{
  display:flex;align-items:center;justify-content:center;gap:.35rem;
  min-height:44px;cursor:pointer;list-style:none;font-size:.85rem;color:var(--text-leise);
}
.fuss__seo-zeile::-webkit-details-marker{display:none}
.fuss__seo[open] .fuss__seo-zeile .fuss__pfeil{transform:rotate(180deg)}
.fuss .seo-linien{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .7rem;
  padding:0 0 .6rem;font-size:.8125rem;color:var(--text-leise);
}
.fuss .seo-linien a{color:var(--text-leise)}

/* --- Rechtliches, Jahr, KI-Hinweis --------------------------------------- */
.fuss__recht{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.2rem .55rem;max-width:620px;font-size:.8rem;
}
/* Die Trennpunkte stehen zwischen den Verweisen, nicht am Anfang oder Ende. */
/* Der Trennpunkt haengt HINTEN am Verweis, nicht vorn am naechsten: bricht
   die Zeile um, steht er dadurch am Ende der vorigen Zeile und nicht als
   einzelnes Zeichen am Anfang der neuen. */
.fuss__recht > *:not(:last-child)::after{content:"·";margin-left:.55rem;color:var(--text-leise)}
/* Auftrag 4, Teil F3 (27.09.2026): Bricht die Zeile um, stand der Punkt des
   letzten Verweises einer Zeile trotzdem am Zeilenende. Er wird dort jetzt
   unsichtbar gestellt -- sein Platz bleibt erhalten, damit das Umbrechen
   sich durch das Ausblenden nicht selbst veraendert. Welcher Punkt das ist,
   rechnet rechtstrennerAusrichten() (layout.js) aus.
   Ergebnis: ein Punkt steht nur noch ZWISCHEN zwei Verweisen derselben
   Zeile -- nie am Anfang, nie am Ende einer Zeile. */
.fuss__recht > *.ohne-trenner::after{visibility:hidden}
.fuss__recht a,.fuss__recht button{
  display:inline-flex;align-items:center;min-height:30px;
  font-size:.8rem;line-height:1.5;padding:0;
}
.fuss__cookie-knopf{
  background:none;border:0;padding:0;margin:0;color:var(--text);cursor:pointer;
  font:inherit;text-decoration:none;
}
.fuss__cookie-knopf:hover{text-decoration:underline}
.fuss__schluss{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.fuss__jahr{margin:0;font-size:.8rem;color:var(--text-leise);text-align:center}
.fuss .ki-hinweis{
  margin:0;font-size:10px;font-weight:400;line-height:1.3;
  color:var(--text-gedaempft);text-align:center;border-top:0;
}

/* --- Rechner ------------------------------------------------------------- */
@media(min-width:641px){
  .fuss{padding:1.5rem 0 1.1rem}
  .fuss__inhalt{
    display:grid;
    grid-template-columns:220px 1fr;
    grid-template-areas:
      "marke spalten"
      "zahl  zahl"
      "seo   seo"
      "recht recht"
      "schluss schluss";
    column-gap:2.5rem;row-gap:.6rem;align-items:start;justify-items:center;
    max-width:var(--max);
  }
  /* Teil A: Das Logo steht links NEBEN den drei Spalten, auf halber Hoehe --
     vorher klebte es oben an der ersten Zeile. */
  .fuss__inhalt{align-items:start}
  .fuss__marke{grid-area:marke;justify-self:start;align-self:center;padding-block:0}
  .fuss__spalten{grid-area:spalten;max-width:none;width:100%;
    display:grid;grid-template-columns:repeat(3,1fr);column-gap:1.5rem}
  #fuss-zahlarten{grid-area:zahl}
  .fuss__seo{grid-area:seo;max-width:none}
  .fuss__recht{grid-area:recht}
  .fuss__schluss{grid-area:schluss}
  /* Offen und nicht anklickbar: die Ueberschrift ist hier eine Ueberschrift,
     kein Schalter. Das Attribut "open" setzt fussSpaltenOeffnen() (layout.js). */
  .fuss__spalte,.fuss__spalte:first-child{border:0}
  .fuss__spalte > summary{
    pointer-events:none;min-height:0;padding:0;margin-bottom:.35rem;
    justify-content:flex-start;
    font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gold-dunkel);
  }
  .fuss__spalte .fuss__pfeil{display:none}
  .fuss__spalte ul{margin:0}
  .fuss__spalte li a{font-size:.9rem;line-height:1.5;padding:0 0 .12rem}
  /* Auftrag 4, Teil F1 (27.09.2026): Am Rechner standen die Kacheln NEBEN
     "Sichere Zahlung", die Zeile klebte rechts daneben. Jetzt stehen die
     Kacheln mittig in einer Reihe und "Sichere Zahlung" mittig darunter --
     derselbe Stapel wie am Handy, nur in einer Zeile statt in zwei. */
  .fuss__zahlzeile{flex-direction:column;align-items:center;gap:.6rem;width:100%}
  .fuss .zahlarten__reihe{max-width:none;flex-wrap:nowrap;justify-content:center;margin:0 auto}
  .fuss__sicher{justify-content:center;text-align:center;margin:0 auto;width:auto}
}

/* ============================================================================
   LUPE UND PAUSE AUF DEM VORSCHAUBILD
   ----------------------------------------------------------------------------
   Auftrag "Feinschliff Startseite" (27.09.2026, Teil 7). Die beiden runden
   Knoepfe waren 40 px gross und lagen bei breiten Fenstern in den OBEREN
   Ecken -- sie zogen den Blick vom Motiv weg. Jetzt: ein sichtbarer Kreis von
   30 px unten links (Lupe) und unten rechts (Pause), 8 px vom Bildrand.

   Der Knopf selbst bleibt 44 x 44 px gross und damit gut zu treffen; sichtbar
   ist nur der Kreis darin (::before). Deshalb sitzt der Knopf 1 px vom Rand --
   dann steht sein Kreis bei genau 8 px.

   Am Rechner sind beide unsichtbar und blenden weich ein, sobald die Maus
   ueber dem Bild liegt oder die Tastatur hineinspringt. Am Handy stehen sie
   immer da: dort gibt es kein Ueberfahren.
   ============================================================================ */
.wandel__gross,.wandel__pause{
  position:absolute;z-index:4;bottom:1px;
  width:44px;height:44px;padding:0;
  border:0;background:transparent;backdrop-filter:none;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--text);
}
.wandel__gross{left:1px;right:auto;top:auto}
.wandel__pause{right:1px;left:auto;top:auto}
/* Der sichtbare Kreis. */
.wandel__gross::before,.wandel__pause::before{
  content:"";position:absolute;left:50%;top:50%;
  width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  background:rgba(211,190,161,.72);
  border:1px solid rgba(43,36,24,.25);
  backdrop-filter:blur(6px);
  transition:background var(--t-schnell) var(--kurve);
  pointer-events:none;
}
.wandel__gross:hover::before,.wandel__pause:hover::before{background:rgba(211,190,161,.9)}
.wandel__gross svg,.wandel__pause svg{
  position:relative;z-index:1;width:16px;height:16px;color:var(--text);
}
/* Der Fokusrahmen legt sich um den Kreis, nicht um die unsichtbare
   Tippflaeche -- sonst staende er weit im Bild. */
.wandel__gross:focus-visible,.wandel__pause:focus-visible{
  outline:2px solid var(--gold-dunkel);outline-offset:-6px;border-radius:50%;
}

@media(min-width:641px){
  /* Unsichtbar, bis die Maus ueber dem Bild liegt oder die Tastatur
     hineinspringt. */
  .wandel__gross,.wandel__pause{opacity:0;transition:opacity .2s var(--kurve)}
  .wandel:hover .wandel__gross,.wandel:hover .wandel__pause,
  .wandel:focus-within .wandel__gross,.wandel:focus-within .wandel__pause{opacity:1}
  /* Bis zum 27.09.2026 rueckten sie ab 1.200 px in die oberen Ecken, weil sie
     unten ueber der eingeblendeten Beschriftung lagen. Die Beschriftung im
     Bild gibt es seit dem 26.09.2026 nicht mehr -- sie stehen wieder unten. */
  .hero__gitter > .wandel .wandel__gross,
  .konf__buehne > .wandel .wandel__gross,
  .seitenkopf__bildspalte .wandel__gross{top:auto;bottom:1px;left:1px}
  .hero__gitter > .wandel .wandel__pause,
  .konf__buehne > .wandel .wandel__pause,
  .seitenkopf__bildspalte .wandel__pause{top:auto;bottom:1px;right:1px}
}

/* ============================================================================
   KUNDENFOTO-BAND: BESCHRIFTUNG UNTER DAS BILD
   ----------------------------------------------------------------------------
   Auftrag "Feinschliff Startseite" (27.09.2026, Teil 8). Die Beschriftung lag
   als heller Verlauf ueber dem unteren Fuenftel des Fotos -- genau dort, wo
   bei einem Wandbild der Raum zu sehen ist. Sie steht jetzt darunter, in
   einer Zeile, mittig. Die Kachel waechst dadurch nur um die Zeile (rund
   22 px), die Bildgroesse bleibt unveraendert.
   ============================================================================ */
#galerie .band__bild{
  border:0;background:transparent;border-radius:0;overflow:visible;
}
#galerie .band__knopf{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  border-radius:3px;
}
#galerie .band__knopf:focus-visible{outline:2px solid var(--gold-dunkel);outline-offset:3px}
#galerie .band__bild figcaption{
  position:static;left:auto;right:auto;bottom:auto;
  background:none;padding:.35rem 0 0;
  display:block;white-space:nowrap;overflow:hidden;text-align:center;
  line-height:1.3;
}
#galerie .band__welt{
  display:inline;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-dunkel);margin:0;
}
#galerie .band__trenner{color:var(--text-leise);font-size:.75rem}
#galerie .band__wer{font-size:.8rem;color:var(--text-leise)}
/* Der Ort haengt am Namen und bleibt bei ihm. Passt er nicht mehr in die
   Zeile, blendet bandOrteKuerzen() (layout.js) ihn aus -- umbrechen darf
   die Zeile nicht. */
#galerie .band__ort{white-space:nowrap}
/* Solange die Grossansicht offen ist, steht das Band still. */
body.grossansicht-offen .band__reihe{animation-play-state:paused}

/* ============================================================================
   ABSCHNITTE BLENDEN BEIM SCROLLEN EIN
   ----------------------------------------------------------------------------
   Auftrag 4 (27.09.2026, Teil G1). Jeder Abschnitt der Startseite kommt 20 px
   von unten und in 0,55 s auf, wenn er zum ersten Mal ins Bild scrollt --
   einmalig, danach bleibt er da.

   Die Klasse "einblenden" setzt abschnitteEinblenden() (layout.js), und zwar
   nur bei Abschnitten, die beim Laden NOCH NICHT im Bild sind. Ohne
   JavaScript und fuer alles im ersten Bildschirm bleibt also alles sichtbar --
   nichts verschwindet, wenn etwas nicht laeuft.

   Wer Bewegung abbestellt hat, sieht die Abschnitte sofort: die Regel im
   Medienblock steht spaeter in der Datei und schlaegt damit die Startwerte,
   ohne !important.
   ============================================================================ */
main > section.abschnitt.einblenden{
  opacity:0;transform:translateY(20px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
main > section.abschnitt.einblenden.sichtbar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  main > section.abschnitt.einblenden{opacity:1;transform:none;transition:none}
}


/* ============================================================================
   PFLICHTREGEL: PREISZEILE UND KAUFKNOPF IM ERSTEN BILDSCHIRM
   ----------------------------------------------------------------------------
   Auftrag 4c (27.09.2026), Punkt 2. Auf JEDER Seite mit Seitenkopf muessen
   Preiszeile und "Mein Bild gestalten" ohne Scrollen zu sehen sein -- bei
   1097x617, 1280x720, 1366x768, 1536x864, 1920x1080 und am Handy 390x844,
   mit mindestens 12 px Luft nach unten.

   Gemessen vorher (Unterkante des Knopfes): bei 1097x617 lagen elf von zwoelf
   geprueften Seiten darunter, im schlimmsten Fall 130 px (Sternenkarte, Nach
   deinem Wunsch: 747 statt hoechstens 605). Am Handy lagen zehn von zwoelf
   darunter, im schlimmsten Fall 97 px.

   Kein Text ist gekuerzt, kein Stil und kein Bild entfernt. Gearbeitet wurde
   in der Reihenfolge, die der Auftrag vorgibt:

   Mittel 1 -- Abstaende verkleinern (gilt ueberall):
     * Die 41 px leere Reservierung im Kopfbereich (oben in dieser Datei).
     * Brotkrumen: Innenabstand .9rem -> .35rem, Verweise am Rechner 32 statt
       44 px hoch (am Handy sind die Brotkrumen ohnehin ausgeblendet, die
       44-px-Tippflaeche bleibt also dort, wo sie gebraucht wird).
     * Seitenkopf: oberer Innenabstand von clamp(2rem,calc(4vw / var(--zf,1)),3.25rem) auf
       clamp(1rem,calc(1.6vw / var(--zf,1)),1.75rem).
     * Der Zeilenabstand innerhalb der Textspalte (Beleg, Absatz, Preiszeile,
       Knopfreihe, Haken) am Rechner enger.

   Mittel 2 -- Hauptbild am Rechner kleiner: zwischen 900 und 1199 px ist die
   Bildspalte 460 statt 660 px breit und das Bild darin 240 statt 320 px.
   Damit wird zugleich die Textspalte von 285 auf rund 500 px breiter --
   Ueberschrift und Absatz brauchen dadurch deutlich weniger Zeilen. Das Bild
   wird nur schmaler, nie beschnitten; sein Seitenverhaeltnis und sein
   Wandschatten bleiben unveraendert.

   Mittel 3 (Preiszeile und Knopf vor den goldenen Kasten ziehen) war nicht
   noetig: Am Rechner stehen beide ohnehin in der linken Textspalte, der
   goldene Kasten steht rechts unter dem Bild.

   Mittel 4 -- am Handy: Reihenfolge wie im Skill (Ueberschrift, Bild,
   Stil-Satz, Preis, Knopf) -- der lange Einleitungsabsatz der Themenwelt
   rutscht dafuer unter den Knopf. Das Bild ist hoechstens 74 % der
   Fensterbreite breit (vorher 80 %).
   ============================================================================ */

/* --- Mittel 1: Abstaende ---------------------------------------------------- */
.brotkrumen{padding-block:.35rem}
@media(min-width:900px){
  /* Am Rechner zeigt eine Maus auf den Verweis, kein Finger: 32 px erfuellen
     das WCAG-Ziel (24 px) mit Reserve. Am Handy bleiben es 44 px. */
  .brotkrumen a{min-height:32px}
}
.seitenkopf{padding-block:clamp(1rem,calc(1.6vw / var(--zf,1)),1.75rem) clamp(2rem,calc(4vw / var(--zf,1)),3.25rem)}
@media(min-width:900px){
  .seitenkopf .beleg{margin-bottom:.5rem}
  .seitenkopf__text{margin-top:.6rem}
  .seitenkopf .preisanker{margin-top:.5rem}
  .seitenkopf__knoepfe{margin-top:.9rem}
  .seitenkopf .hero-vertrauen{margin-top:.7rem}
}

/* --- Mittel 2: Bildspalte am schmalen Rechner ------------------------------- */
@media(min-width:900px) and (max-width:1039px){
  .seitenkopf__gitter{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:2.25rem}
  .seitenkopf__bildspalte{grid-template-columns:220px minmax(0,1fr);gap:1rem}
  .seitenkopf__bildspalte .wandel,
  .seitenkopf__bildspalte [data-baustein="wandel"]:empty{max-width:220px;width:100%}
}
/* Seiten ohne Stile (Eigenes Foto) haben keine .seitenkopf__bildspalte -- dort
   haengt das Bild direkt im Gitter. Ab 1200 px sizet die zweite Spalte dort
   auf "auto", und ohne Deckel wuchs sie auf ueber 1000 px: die Textspalte
   schrumpfte auf 64 px, die Ueberschrift lief ueber fuenfzehn Zeilen und der
   Knopf stand bei 2096 px. Derselbe Deckel wie bei den anderen Seiten. */
@media(min-width:900px){
  .seitenkopf__gitter > .wandel-bereich{max-width:360px}
}
@media(min-width:900px) and (max-width:1039px){
  .seitenkopf__gitter > .wandel-bereich{max-width:220px}
}

/* --- Mittel 4: am Handy --------------------------------------------------- */
@media(max-width:899px){
  /* 70 % statt 80 % der Fensterbreite: bei 390 px sind das 273 statt 312 px
     Breite und 341 statt 390 px Hoehe. Mit 74 % blieben auf den
     Gedenken-Seiten nur genau 12 px Luft unter dem Knopf -- zu knapp, um bei
     einer anderen Schriftgroesse noch sicher zu sein. */
  .seitenkopf__gitter .wandel{width:calc(70vw / var(--zf,1));max-width:calc(70vw / var(--zf,1))}
  /* Reihenfolge wie im Skill: Ueberschrift (3), Bild (4), Stil-Satz (5),
     Preis (6), Knopf (7) -- der Einleitungsabsatz der Themenwelt folgt
     danach. Er ist der einzige lange Text im Kopfbereich; stuende er weiter
     ueber dem Preis, waere der Knopf auf keiner Seite im ersten Bildschirm
     zu halten, ohne ihn zu kuerzen. Gekuerzt wird nichts. */
  .seitenkopf__gitter .seitenkopf__beschreibung{order:5}
  /* 13 statt 8: bei 8 stuende er auf derselben Stufe wie der Kaufknopf, und
     bei gleicher Stufe entscheidet die Reihenfolge im Quelltext -- der Absatz
     stand dann weiterhin davor. 13 liegt hinter Knopf (8), Zweitknopf (10),
     Haken (11) und Zahlzeile (12), aber vor der Stil-Leiste (19 bis 22). */
  .seitenkopf__gitter .seitenkopf__text{order:13}
}

/* ===========================================================================
   AUFTRAG 6 (28.09.2026) — AUFBAU DER THEMENWELT- UND STIL-SEITEN
   ---------------------------------------------------------------------------
   Fest eingebaut aus dem von Saskia abgenommenen Entwurf
   themenwelt-entwurf-v25.html (= v14 plus alle Freigaben vom 28.09. abends).
   Werte woertlich von dort uebernommen, nicht neu erfunden.

   Die Regeln stehen bewusst am Dateiende: sie sind der Endstand und sollen
   die frueheren Regeln fuer .seitenkopf ueberstimmen, ohne dass diese an
   einem Dutzend Stellen einzeln zurueckgebaut werden muessen.
   =========================================================================== */

/* --- 1. Kopf: gestrichene Teile (Brotkrumen, Chips, Galerie-Knopf, Stil-Textknoepfe) --- */
.brotkrumen{display:none}
.seitenkopf .knopf--umriss,
.seitenkopf [data-baustein="unikat"],
.seitenkopf .unikat,
.seitenkopf .unikat-chips{display:none}
.seitenkopf__stilzeile{display:none}

/* --- 2. Alles linksbuendig auf einer Kante --- */
.seitenkopf .augbraue{text-align:left}
/* Drei Haken untereinander, Symbol links, Text rechts (PC und Handy). */
.seitenkopf .hero-vertrauen{flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:.35rem;text-align:left;margin-left:0;padding-left:0}
.seitenkopf .hero-vertrauen li{flex-direction:row;align-items:center;justify-content:flex-start;
  width:auto;max-width:none;flex:0 0 auto;text-align:left;gap:.5rem;margin:0}
.seitenkopf .hero-vertrauen li svg{flex:0 0 auto;margin:0}

/* --- 3. Preiszeile: KEIN Goldstrich darueber (PC und Handy), kommt nicht wieder. --- */
.seitenkopf .preisanker::before{content:none;display:none}
.seitenkopf .preisanker{margin-top:20px}

/* --- 4. Bild: kein heller Streifen darunter, am PC senkrecht mittig --- */
.seitenkopf .wandel__rahmen{padding-bottom:0}
.seitenkopf .wandel__buehne{overflow:hidden}
/* Hoehere Gewichtung als .seitenkopf__gitter .wandel .wandel__hinweis (0,3,0)
   bzw. .seitenkopf__gitter .seitenkopf__beschreibung (0,2,0) weiter oben --
   sonst bleibt es bei .4rem/-3px und die Abstaende stimmen nicht. */
/* Auftrag 8 (29.09.2026) liess hier 14 px stehen, weil die damalige
   Entwurfsregel ".seitenkopf .wandel__hinweis{margin-bottom:2px}" (0,2,0)
   weniger wog als die Regel hier (0,3,0) und sich deshalb nicht durchsetzte.
   BERICHTIGT mit Auftrag Einbau 9 (04.10.2026, Teil B3): Der Entwurf vom
   30.09. trifft dieselbe Stelle mit gleicher Gewichtung
   (".seitenkopf__gitter .wandel .wandel__hinweis", 0,3,0) und steht spaeter
   in der Reihenfolge -- in Saskias Vorschau mit "Entwurf: an" galten also
   2 px, und genau dieser Anblick ist abgenommen. Darum stehen hier jetzt
   fest 2 px. Auf der Startseite galten die 2 px schon vorher. */
.seitenkopf__gitter .wandel .wandel__hinweis{margin-top:18px;margin-bottom:2px}
.seitenkopf__gitter .seitenkopf__beschreibung{margin-top:6px}
@media(min-width:900px){
  .seitenkopf__gitter{align-items:center}
  .seitenkopf__bildspalte{align-items:center}
  .seitenkopf__bildspalte>.seitenkopf__beschreibung{align-self:center;margin-top:0}
}

/* --- 5. Stil-Satz: kein Goldkasten, ruhige Zeile in der Ueberschrift-Schrift --- */
.seitenkopf .stil-beschreibung{border:0;background:none;padding:0;border-radius:0;
  font-family:"Theano Didot","Times New Roman",serif;font-style:italic;
  font-size:16px;line-height:1.45;color:#5A4E3C;max-width:none;margin-inline:auto}

/* --- 6. PC 900-1199 px: Bild 20 px nach links, Stil-Satz bleibt stehen.
       Ab 1200 px steht der Satz unter dem Bild -- dort keine Verschiebung. --- */
@media(min-width:900px) and (max-width:1039px){
  .seitenkopf__bildspalte>.wandel-bereich{position:relative;left:-20px}
}

/* --- 7. Handy: Hauptbild hoechstens 240 px breit, damit Preiszeile und
       Kaufknopf im ersten Bildschirm (390x844) stehen. Dazu 28 px Luft
       unten, damit Kopftext -> Goldstreifen optisch so viel Luft hat wie
       Haken -> Kopftext (der Streifen leuchtet 5 px nach oben). --- */
@media(max-width:899px){
  .seitenkopf .wandel{max-width:240px;margin-inline:auto}
  .seitenkopf .seitenkopf__text{margin-top:22px}
  .seitenkopf{padding-bottom:28px}
}

/* --- 8. "So laeuft es" ohne eigenen Kaufknopf (Punkt 3 des Aufbaus).
       display:none heisst zugleich: der Knopf zaehlt fuer die Handy-Kaufleiste
       nicht als sichtbarer fester Knopf (leisteBeobachten(), layout.js). --- */
#ablauf .knopf--gold{display:none}

/* --- 9. Bewertungen wie auf der Startseite: eine Reihe, ein Umriss-Knopf --- */
#bewertungen .bew__mehr{text-align:center;margin-top:1.4rem}

/* --- 10. Stil-Raster "Welcher Stil passt zu dir?" ---------------------------
   PC 5 je Reihe mit erstem Satz, Handy 3 je Reihe nur Name. */
#themen{padding:2.4rem 0 2.6rem}
#themen .vorspann-kurz{text-align:center;color:var(--text-leise);max-width:36ch;margin:-.4rem auto 0;text-wrap:balance}
#themen .kacheln{max-width:1240px;margin-top:1.8rem}
@media(min-width:900px){
  #themen .kachel{flex:0 0 calc(20% - .96rem);max-width:calc(20% - .96rem)}
}
@media(min-width:641px) and (max-width:899px){
  #themen .kachel{flex:0 0 calc(33.333% - .8rem);max-width:calc(33.333% - .8rem)}
}
#themen .kachel__satz{margin:.25rem auto 0;font-size:.86rem;color:var(--text-leise);line-height:1.35;max-width:24ch;text-wrap:balance}
#themen .kachel--wunsch .kachel__bild{filter:saturate(.85)}
#themen .tw-knopfzeile{text-align:center;margin-top:1.9rem}
#themen .tw-knopfzeile .knopf{min-width:260px}
#themen .tw-knopfzeile p{margin:.6rem 0 0;font-size:.9rem;color:var(--text-leise)}
@media(max-width:640px){
  #themen .kacheln{gap:1rem .7rem}
  #themen .kachel{flex:0 0 calc(33.333% - .47rem);max-width:calc(33.333% - .47rem);margin:0}
  #themen .kachel:last-child:nth-child(odd){margin:0}
  #themen .kachel h3{font-size:.86rem;line-height:1.2}
  #themen .kachel__satz{display:none}
  #themen .kachel__inhalt{padding-top:.45rem}
}

/* --- 11. Gedenkvideo: drei Videos nebeneinander, 15 Sekunden, Preis aus preise.js --- */
#gedenkvideo{padding:2.6rem 0}
#gedenkvideo .huelle{max-width:1000px;margin:0 auto;text-align:center}
#gedenkvideo .tw-vtext{max-width:52ch;margin:0 auto;color:var(--text);text-wrap:balance}
#gedenkvideo .tw-vpreis{margin:.7rem 0 0;color:var(--text-leise);font-size:.95rem}
#gedenkvideo .tw-vpreis b{color:var(--gold-dunkel,#8A6A28)}
.tw-videos{display:flex;justify-content:center;gap:18px;margin:1.6rem auto 0}
.tw-video{position:relative;flex:0 0 190px;aspect-ratio:9/16;padding:0;border:0;border-radius:4px;overflow:hidden;cursor:pointer;background:#2B2418;
  /* Einbau 13, Teil B2: Wandschatten nach unten rechts, kein brauner Strich. */
  box-shadow:8px 14px 20px -4px rgba(40,30,15,.55),3px 6px 10px rgba(40,30,15,.30);
  transition:transform .6s cubic-bezier(.22,.61,.36,1),box-shadow .6s cubic-bezier(.22,.61,.36,1)}
.tw-video:hover,.tw-video:focus-visible{transform:translateY(-6px) scale(1.03);
  box-shadow:12px 20px 28px -6px rgba(40,30,15,.55),4px 9px 14px rgba(40,30,15,.32)}
.tw-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tw-video span{position:absolute;right:8px;bottom:8px;width:30px;height:30px;color:#F6EFDF;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
#gedenkvideo .tw-vhinweis{margin:1.1rem 0 0;font-size:.9rem;color:var(--text-leise)}
@media(max-width:640px){.tw-videos{gap:10px}.tw-video{flex:0 0 calc((100% - 20px)/3)}}
@media(prefers-reduced-motion:reduce){.tw-video{transition:none}.tw-video:hover{transform:none}}

/* ===========================================================================
   AUFTRAG 8 (29.09.2026) — GESCHENK-ERINNERUNG, GLAS-GOLD-STREIFEN, SCHIEBER
   ---------------------------------------------------------------------------
   Fest eingebaut aus entwurf.css (Stand 29.09.2026 abends). Werte woertlich
   uebernommen. Die dort uebereinander liegenden Entwurfsstufen sind hier zum
   Endstand zusammengefasst.
   =========================================================================== */

/* --------------------------------------------------- 1 GROSSER BLOCK ----- */
.erinnern{padding-block:clamp(28px,calc(5vw / var(--zf,1)),56px)}
.erinnern__karte{display:grid;grid-template-columns:minmax(0,300px) minmax(0,640px);gap:clamp(28px,calc(5vw / var(--zf,1)),64px);align-items:center;justify-content:center;background:#EFE3CF;border-radius:22px;padding:clamp(22px,calc(4vw / var(--zf,1)),48px);box-shadow:10px 16px 22px -6px rgba(40,30,15,.35),4px 8px 12px 0 rgba(40,30,15,.18)}
.erinnern__bild{display:flex;justify-content:center}
.erinnern__inhalt{text-align:center}
.erinnern__inhalt .augbraue{margin:0 0 8px}
.erinnern__titel{font-family:"Theano Didot","Times New Roman",serif;font-weight:400;font-size:clamp(24px,calc(3vw / var(--zf,1)),34px);line-height:1.15;color:#2B2418;margin:0 0 10px}
.erinnern__text{margin:0 0 16px;color:#4A3F2E;font-size:16px;line-height:1.5;max-width:none}
.erinnern__frage{margin:0 0 8px;font-size:14px;color:#4A3F2E;font-weight:500}
.erinnern__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:480px;margin-inline:auto;margin-bottom:14px;justify-content:center}
.erinnern .chip{font:inherit;font-size:14px;padding:8px 16px;border-radius:999px;border:1px solid rgba(43,36,24,.28);background:transparent;color:#2B2418;cursor:pointer;white-space:nowrap;transition:background .35s ease,color .35s ease,border-color .35s ease}
.erinnern .chip:hover{border-color:#B8955A}
/* Ausgewaehlt: hellgold mit Haken -- nie Khaki, das bleibt dem Kaufknopf. */
.erinnern .chip.an{background:#F3E2BE;border-color:#B8955A;color:#4A3F24;font-weight:600}
.erinnern .chip.an::before{content:"\2713 "}
.erinnern__chips.fehler .chip{border-color:#9A3B2E}
.erinnern__daten{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}
.erinnern__datum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:#4A3F2E;margin:0;justify-content:center}
.erinnern__datum[hidden]{display:none}
.erinnern__datum span{opacity:.7}
.erinnern__datum input{width:96px;text-align:center}
.erinnern__datum.fehler{color:#9A3B2E}
.erinnern__datum.fehler input{border-color:#9A3B2E}
.erinnern__vorher{margin:0;font-size:12px;color:#6B5E48}
.erinnern__vorher[hidden]{display:none}
.erinnern input[type=email],.erinnern__datum input{font:inherit;font-size:16px;padding:11px 14px;border-radius:14px;border:1px solid rgba(43,36,24,.25);background:#FBF6EC;color:#2B2418;outline:none}
.erinnern input:focus{border-color:#5C5A39;box-shadow:0 0 0 3px rgba(92,90,57,.18)}
.erinnern input.fehler{border-color:#9A3B2E}
.erinnern__zeile{display:flex;gap:10px}
.erinnern__zeile input{flex:1;min-width:0}
/* Glasknopf Creme-Gold mit feiner Goldkante. Khaki ist ausschliesslich der
   Kaufknopf "Mein Bild gestalten" (.knopf--gold). */
.erinnern__knopf{font:inherit;font-weight:600;font-size:15px;white-space:nowrap;cursor:pointer;color:#3E3320;border:1px solid #B8955A;border-radius:14px;padding:12px 24px;background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.07) 100%),linear-gradient(135deg,#FCF3DF 0%,#EFD8AA 52%,#D9B97C 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(110,80,30,.24),0 8px 20px rgba(110,85,45,.24);text-shadow:0 1px 0 rgba(255,255,255,.45);transition:filter .4s ease,transform .2s ease}
.erinnern__knopf:hover{filter:brightness(1.05)}
.erinnern__knopf:active{transform:scale(.98)}
.erinnern__ok{display:block;margin-top:12px;font-size:12.5px;line-height:1.45;color:#5A4E3C;text-align:center}
.erinnern__ok input{margin:0 6px 0 0;vertical-align:-2px;accent-color:#5C5A39}
.erinnern__ok a{color:inherit}
.erinnern__ok.fehler{color:#9A3B2E}
.erinnern__ok a.erinnern__ds{font-size:11.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px;margin-left:4px;white-space:nowrap}
.erinnern__frist{margin:14px 0 0;font-size:14px;color:#2B2418}
.erinnern__frist b{font-weight:600;white-space:nowrap}
.erinnern__klein{margin:6px 0 0;font-size:12.5px;color:#6B5E48}
.erinnern__danke{font-family:"Theano Didot","Times New Roman",serif;font-style:italic;font-size:20px;color:#2B2418;margin:8px 0 0}
.erinnern__gutschein{margin:0 0 12px}
.erinnern__knopf--gutschein{display:inline-block;text-decoration:none;padding:12px 28px}
.erinnern__oder{margin:10px 0 8px;font-size:14px;color:#4A3F2E}
/* Gutschein-Zeile ueber einer feinen Goldlinie */
.erinnern__immer{margin-top:16px;padding-top:14px;border-top:1px solid rgba(184,149,90,.45);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.erinnern__immer-text{margin:0;font-size:13.5px;line-height:1.45;color:#4A3F24}
.erinnern__immer .erinnern__knopf--gutschein{padding:10px 24px;font-size:14.5px;width:auto}
@media(min-width:900px){.erinnern__immer{flex-direction:row;justify-content:center;gap:16px;text-align:left}.erinnern__immer-text{max-width:330px}}

/* Die drei Geschenkbilder ------------------------------------------------- */
.erinnern__faecher{position:relative;width:100%;max-width:420px;aspect-ratio:100/48;margin:0 auto}
.erinnern__faecher img{position:absolute;object-fit:cover;display:block;box-shadow:8px 13px 18px -6px rgba(40,30,15,.45),3px 6px 10px 0 rgba(40,30,15,.25)}
.erinnern__faecher .k1{left:32%;top:0;width:36%;aspect-ratio:3/4;z-index:3;box-shadow:12px 20px 26px -6px rgba(40,30,15,.55),5px 10px 14px 0 rgba(40,30,15,.3)}
.erinnern__faecher .k2{left:5%;top:8.9%;width:28%;aspect-ratio:2/3;z-index:2}
.erinnern__faecher .k3{left:67%;top:8.9%;width:28%;aspect-ratio:2/3;z-index:1}
@media(max-width:899px){.erinnern__faecher{max-width:340px}}

/* Handy: Karte kompakt, Bilder nebeneinander (Royal vorn in der Mitte) ---- */
@media(max-width:899px){
  .erinnern{padding-block:20px}
  .erinnern__karte{grid-template-columns:minmax(0,1fr);text-align:left;gap:10px;padding:18px 16px 16px}
  .erinnern__bild{justify-content:center}
  .erinnern__inhalt .augbraue{font-size:11px;margin-bottom:2px}
  .erinnern__titel{font-size:22px;margin-bottom:6px}
  .erinnern__text{font-size:14.5px;line-height:1.45;margin-bottom:10px}
  .erinnern__frage{font-size:13px;margin-bottom:6px}
  .erinnern__chips{display:grid;grid-template-columns:1fr 1fr;gap:5px;max-width:300px;margin-inline:auto;margin-bottom:10px}
  .erinnern .chip{padding:5px 8px;font-size:13px}
  .erinnern__zeile{gap:8px;flex-direction:row}
  .erinnern__knopf{width:auto;padding:11px 16px}
  .erinnern__zeile input{padding:11px 12px}
  .erinnern__gutschein{margin-bottom:8px}
  .erinnern__knopf--gutschein{padding:10px 24px;width:auto}
  .erinnern__oder{margin:8px 0 6px;font-size:13px}
  .erinnern__ok{margin-top:8px;font-size:12px}
  .erinnern__frist{margin-top:8px;font-size:13px}
}

/* PC: die drei Bilder diagonal ueber die GANZE Hoehe der Textspalte
   (Kleinzeile bis letzter Knopf), nur leicht ueberlappend. Koepfe des
   Brautpaars und die Schleife des oberen Bildes bleiben frei. */
@media(min-width:900px){
  .erinnern__karte{align-items:stretch;grid-template-columns:minmax(0,390px) minmax(0,660px);gap:clamp(24px,calc(4vw / var(--zf,1)),48px)}
  .erinnern__karte .erinnern__bild{display:flex;align-self:stretch}
  .erinnern__karte .erinnern__faecher{position:relative;width:100%;max-width:none;height:100%;min-height:400px;aspect-ratio:auto;margin:0}
  .erinnern__karte .erinnern__faecher img{height:auto;width:auto}
  .erinnern__karte .erinnern__faecher .k2{left:0;top:0;height:43%;width:auto;aspect-ratio:2/3}
  .erinnern__karte .erinnern__faecher .k1{left:45%;top:31%;height:46%;width:auto;aspect-ratio:3/4;transform:translateX(-50%)}
  .erinnern__karte .erinnern__faecher .k3{left:auto;right:0;top:auto;bottom:0;height:43%;width:auto;aspect-ratio:2/3}
  .erinnern__inhalt{align-self:center}
}
/* Gedenken: vier Anlaesse als 2x2, nie ein einzelner Chip allein */
.erinnern--leise .erinnern__chips{grid-template-columns:repeat(2,minmax(0,1fr));max-width:340px;margin-inline:auto}

/* --------------------------------------------- 2 STREIFEN (Themenwelten) - */
.erinnern-band{padding-block:clamp(20px,calc(4vw / var(--zf,1)),40px)}
.erinnern-band__karte{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:clamp(18px,calc(3vw / var(--zf,1)),36px);align-items:center;max-width:1060px;margin-inline:auto;background:#EFE3CF;border-radius:22px;padding:22px clamp(22px,calc(3vw / var(--zf,1)),40px);box-shadow:10px 16px 22px -6px rgba(40,30,15,.35),4px 8px 12px 0 rgba(40,30,15,.18)}
.erinnern-band__bild .erinnern__faecher{max-width:200px;margin:0}
.erinnern-band__text .augbraue{margin:0 0 4px}
.erinnern-band__titel{font-family:"Theano Didot","Times New Roman",serif;font-size:clamp(20px,calc(2.2vw / var(--zf,1)),26px);line-height:1.2;color:#2B2418;margin:0 0 6px}
.erinnern-band__satz{margin:0;font-size:14px;line-height:1.45;color:#4A3F24}
.erinnern-band__satz b{font-weight:600;white-space:nowrap}
.erinnern-band__knoepfe{display:flex;flex-direction:column;align-items:center;gap:8px}
.erinnern-band__gs{font-size:13px;color:#4A3F24;text-decoration:underline;text-underline-offset:3px}
.erinnern-band__gs:hover{color:#8A6A28}
.erinnern-band__auf{display:inline-flex;align-items:center;justify-content:center;gap:9px}
/* Die goldene Schleife ist freigestellt: kein Kasten-Wandschatten, nur ein
   leichter Schatten an der Schleife selbst. */
.erinnern-band__schleife{width:34px;height:auto;margin:-4px 0 -3px;box-shadow:none;border-radius:0;background:none;filter:drop-shadow(0 2px 2px rgba(90,60,15,.35))}
@media(max-width:899px){
  .erinnern-band__karte{grid-template-columns:minmax(0,1fr);text-align:center;gap:12px;padding:20px 16px 18px}
  .erinnern-band__bild .erinnern__faecher{max-width:190px;margin-inline:auto}
  .erinnern-band__titel{font-size:21px}
  .erinnern-band__satz{font-size:13.5px}
  .erinnern-band__knoepfe .erinnern__knopf{width:100%;max-width:320px}
}
.erinnern-band--leise .erinnern-band__karte,
.erinnern-band__karte:not(:has(.erinnern-band__bild)){grid-template-columns:minmax(0,1fr) auto}
@media(max-width:899px){.erinnern-band__karte:not(:has(.erinnern-band__bild)){grid-template-columns:minmax(0,1fr)}}

/* --------------------------------------------------------- 3 POP-UP ----- */
html.erinnern-offen,html.erinnern-offen body{overflow:hidden}
/* --sb gleicht den weggefallenen Scrollbalken aus, damit das Fenster mittig
   bleibt und nicht an die rechte Kante rutscht. */
.erinnern-pop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:2rem calc(2rem + var(--sb,0px)) 2rem 2rem}
.erinnern-pop[hidden]{display:none}
.erinnern-pop__hinter{position:absolute;inset:0;background:rgba(30,24,14,.55);opacity:0;transition:opacity .25s ease}
.erinnern-pop__fenster{position:relative;width:min(900px,calc(90vw / var(--zf,1)));max-height:calc(calc(100vh / var(--zf,1)) - 4rem);overflow:auto;border-radius:22px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .25s ease,transform .25s ease;overscroll-behavior:contain}
.erinnern-pop.an .erinnern-pop__hinter{opacity:1}
.erinnern-pop.an .erinnern-pop__fenster{opacity:1;transform:none}
.erinnern-pop .erinnern{padding:0}
.erinnern-pop .huelle{max-width:none;padding:0}
.erinnern-pop .erinnern__karte{box-shadow:none}
.erinnern-pop .augbraue{display:block;width:100%;text-align:center}
/* X oben rechts: 32 px, Creme mit feiner Goldkante, beim Drueberfahren
   heller -- nie weiss, und es beruehrt kein Bild. */
.erinnern-pop__zu{position:absolute;top:12px;right:12px;z-index:5;width:32px;height:32px;border-radius:50%;border:1px solid rgba(184,149,90,.55);background:#E6D5B8;color:#4A3F24;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s ease}
.erinnern-pop__zu:hover{background:#F4EBDA}
.erinnern-pop__fenster::-webkit-scrollbar-track{margin:22px 0}
@media(min-width:900px){
  .erinnern-pop .erinnern__karte{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:36px;padding:36px 44px 32px}
  .erinnern-pop .erinnern__faecher{max-width:none;width:100%}
  .erinnern-pop .erinnern__immer{flex-direction:row;gap:14px;text-align:left}
  .erinnern-pop .erinnern__immer-text{max-width:250px;font-size:13px}
  .erinnern-pop .erinnern__titel{font-size:30px}
}
/* Niedrige Laptop-Bildschirme (z. B. 1097x617): alles ohne Abschneiden */
@media(min-width:900px) and (max-height:700px){
  .erinnern-pop{padding-block:1.25rem}
  .erinnern-pop__fenster{max-height:calc(calc(100vh / var(--zf,1)) - 2.5rem)}
  .erinnern-pop .erinnern__karte{padding:26px 40px 22px}
  .erinnern-pop .erinnern__titel{font-size:27px;margin-bottom:6px}
}
@media(max-width:899px){
  .erinnern-pop{align-items:center;padding:1.5rem calc(calc(5vw / var(--zf,1)) + var(--sb,0px)) 1.5rem calc(5vw / var(--zf,1))}
  .erinnern-pop__fenster{width:100%;max-height:calc(calc(100vh / var(--zf,1)) - 3rem);max-height:calc(calc(100dvh / var(--zf,1)) - 3rem);border-radius:22px;transform:translateY(16px) scale(.98)}
  .erinnern-pop .erinnern__karte{border-radius:22px;padding-top:44px;padding-bottom:24px}
  .erinnern-pop .erinnern__faecher{max-width:none;width:100%}
  .erinnern-pop__zu{top:10px;right:10px}
}

/* ------------------------------------------- 4 GLAS-GOLD-STREIFEN -------- */
/* Derselbe Trenner wie zwischen den Abschnitten, aber mit abgeschwaechtem
   Glanz: duenne Linie 1,5 px, nur leichter Schimmer in der Mitte. */
.seitenkopf .wandel__hinweis{margin-bottom:2px}
.hero .wandel__hinweis{margin-bottom:2px}
.seitenkopf__beschreibung .stil-beschreibung{position:relative;padding-block:10px;margin:0}
.hero__unter{position:relative;padding-block:10px}
.seitenkopf__beschreibung .stil-beschreibung::before,
.seitenkopf__beschreibung .stil-beschreibung::after,
.hero__unter::before,.hero__unter::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:min(100%,320px);height:12px;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(240,225,185,.32),rgba(240,225,185,0)) center/80px 8px no-repeat,
    linear-gradient(90deg,rgba(170,128,78,0) 0%,rgba(170,128,78,.85) 18%,#C9AE78 45%,#D9C290 50%,#C9AE78 55%,rgba(170,128,78,.85) 82%,rgba(170,128,78,0) 100%) center/100% 1.5px no-repeat,
    linear-gradient(90deg,rgba(225,207,155,0) 0%,rgba(225,207,155,.14) 25%,rgba(225,207,155,.18) 50%,rgba(225,207,155,.14) 75%,rgba(225,207,155,0) 100%) center/100% 6px no-repeat}
.seitenkopf__beschreibung .stil-beschreibung::before,.hero__unter::before{top:-6px}
.seitenkopf__beschreibung .stil-beschreibung::after,.hero__unter::after{bottom:-6px}
@media(min-width:900px){
  .seitenkopf__beschreibung .stil-beschreibung::before,
  .seitenkopf__beschreibung .stil-beschreibung::after{width:min(calc(100% + 64px),calc(calc(100vw / var(--zf,1)) - 32px))}
  .hero__unter::before,.hero__unter::after{width:100%}
}

/* ------------------------------------------------- 5 SCHIEBER ----------- */
/* Ueberall derselbe Schieber wie im Generator und auf der Materialseite:
   Griff Taupe, abgerundet, 8 px, KEINE weisse Bahn. Bewusst unsichtbare
   Schieber (z. B. .kundenfotos__bahn) behalten ihre eigene Regel -- die
   traegt eine Klasse und gewinnt damit gegen "html *". */
html,html *{scrollbar-color:#A8927A transparent}
html *::-webkit-scrollbar{width:8px;height:8px}
html *::-webkit-scrollbar-track{background:transparent}
html *::-webkit-scrollbar-thumb{background:#A8927A;border-radius:8px}
html *::-webkit-scrollbar-button{display:none;width:0;height:0}

/* ===========================================================================
   AUFTRAG 04.10.2026 — BEISPIEL-REIHE IM SEITENKOPF DER STIL-SEITEN
   ---------------------------------------------------------------------------
   Fuenf kleine Bilder des Stils direkt am Hauptbild. Antippen laedt das Paar
   ins Hauptbild, die Ueberblendung Vorher/Nachher laeuft dort weiter.
   Von Saskia am 04.10.2026 abgenommen: am PC die Reihe UNTER dem Bild,
   am Handy die Spalte RECHTS NEBEN dem Bild.
   Gebaut wird die Reihe von beispielReiheBauen() in layout.js; sie setzt
   auch die beiden Klassen --mit-reihe. Seiten ohne Reihe (Motiv-Stile,
   Themenwelt-Seiten) bleiben dadurch Punkt fuer Punkt wie bisher.
   =========================================================================== */
.bsp-reihe{display:flex;justify-content:center;gap:6px;margin:22px auto 0;padding:0;width:100%}
.bsp-daumen{
  appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;
  flex:1 1 0;min-width:0;position:relative;display:block;line-height:0;
  opacity:.72;transition:opacity .25s ease, transform .25s ease;
}
/* Tippflaeche etwas groesser als das Bild */
.bsp-daumen::after{content:"";position:absolute;inset:-4px -3px}
.seitenkopf .bsp-daumen img{
  display:block;width:100%;height:auto;aspect-ratio:220/308;object-fit:cover;object-position:50% 0;
  border-radius:1px;
  box-shadow:3px 5px 8px rgba(40,30,15,.35) !important;
}
.bsp-daumen:hover{opacity:1;transform:translateY(-2px)}
.bsp-daumen[aria-pressed="true"]{opacity:1}
.seitenkopf .bsp-daumen[aria-pressed="true"] img{outline:1.5px solid #2B2418;outline-offset:2px}
.bsp-daumen:focus-visible{outline:2px solid #2B2418;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.bsp-daumen{transition:none}.bsp-daumen:hover{transform:none}}

/* --- PC 900 bis 1199 px: Reihe unter dem Bild. Das Hauptbild wird 204 statt
       220 px breit, damit Preiszeile und Kaufknopf an ihrer Stelle bleiben. --- */
@media(min-width:900px) and (max-width:1039px){
  .seitenkopf__bildspalte--mit-reihe{grid-template-columns:204px minmax(0,1fr)}
  .seitenkopf__bildspalte--mit-reihe .wandel{max-width:204px}
}
@media(min-width:900px){
  .seitenkopf__gitter .wandel--mit-reihe .wandel__hinweis{margin-top:12px}
}
/* --- PC ab 1200 px: Das Hauptbild richtet sich dort nach der Fensterhoehe
       (--medium-h). Mit Reihe wird es genau so viel kleiner, wie die Reihe
       hoch ist -- Bild plus Reihe sind zusammen so hoch wie vorher das Bild
       allein. Preiszeile und Kaufknopf bleiben dadurch an ihrer Stelle, und
       die Reihe steht ganz im ersten Bildschirm.
       Rechnung: Reihe = 22 px Abstand + Bildchenhoehe (rund ein Fuenftel der
       Bildhoehe minus 7 px), dazu 6 px weniger Abstand zur Zeile darunter. --- */
@media(min-width:1040px){
  .seitenkopf__bildspalte.seitenkopf__bildspalte--mit-reihe{--medium-h:calc((min(calc(70vh / var(--zf,1)),760px) - 9px) / 1.2)}
  .wandel--mit-reihe .bsp-reihe{max-width:calc(var(--medium-h) * 5 / 7)}
}

/* --- Handy bis 899 px: Spalte rechts neben dem Bild. Das Hauptbild bleibt
       240 px breit, die fuenf kleinen Bilder stehen 42 px breit daneben. --- */
@media(max-width:899px){
  .seitenkopf .wandel--mit-reihe{
    max-width:296px;
    display:grid;grid-template-columns:minmax(0,1fr) 42px;column-gap:14px;align-items:start;
  }
  .wandel--mit-reihe .wandel__rahmen{grid-column:1;grid-row:1}
  .wandel--mit-reihe .bsp-reihe{
    grid-column:2;grid-row:1;flex-direction:column;gap:7px;margin:0;width:42px;
    align-self:stretch;justify-content:space-between;
  }
  .wandel--mit-reihe .bsp-daumen{flex:0 0 auto}
  .wandel--mit-reihe .wandel__hinweis{grid-column:1 / -1;text-wrap:balance}
}

/* ============================================================================
   AUFTRAG EINBAU 9 (04.10.2026), Teil B3 -- Entwurf vom 30.09./01.10. fest
   eingebaut. Jede Regel stand vorher nur in entwurf.css und wurde von Saskia
   in ihrer Vorschau mit "Entwurf: an" abgenommen.
   Die Regeln fuer den Generator stehen in gestalten.css (gestalten.html laedt
   styles.css nicht), die Regeln fuer das Material-Fenster in materialien.css.
   Drei Punkte des Entwurfs stehen nicht hier, sondern an ihrer eigenen Quelle
   weiter oben: 2 px unter der Bildunterschrift, die Schleife ohne Wandschatten
   und (in gestalten.css) der leere Stimmen-Kasten -- dort brauchte der Entwurf
   nur deshalb !important.
   ============================================================================ */

/* 1. Gedenken-Streifen: gleiche Aufteilung wie Tiere (Bilder | Text | Knopf).
   Die Regel ".erinnern-band--leise .erinnern-band__karte" weiter oben erzwingt
   zwei Spalten, auch wenn Bilder da sind. */
.erinnern-band--leise .erinnern-band__karte:has(.erinnern-band__bild){grid-template-columns:200px minmax(0,1fr) auto}
@media(max-width:899px){
  .erinnern-band--leise .erinnern-band__karte:has(.erinnern-band__bild){grid-template-columns:minmax(0,1fr)}
}

/* 2. PC: Knopf in den ersten Bildschirm, wenn rechts ein hohes Bildergitter
   steht (Worte · Glow, Eigenes Foto): Textspalte oben statt senkrecht mittig. */
@media(min-width:900px){
  .seitenkopf__gitter:has(.stil-einzel-klein),
  .seitenkopf__gitter:has(.eigenes-stile){align-items:start}
}

/* 3. Startseite, Kundenfoto-Band: weniger Luft oben und unten. Die Kacheln
   sind <figure> und bekommen vom Browser 16 px Rand. */
#galerie .band__bild{margin-block:0}
#galerie .band{margin-top:28px}

/* 4. Preiszeile: ein Preis bricht nie mitten durch; am Handy steht die Zeile
   naeher am Goldstrich. Die Klammern .pa-stueck setzt layout.js. */
.preisanker .pa-stueck{white-space:nowrap}
@media(max-width:899px){
  .seitenkopf .preisanker{margin-top:8px}
}

/* 5. Bewertungsfotos oben buendig: Koepfe und Ohren der Bilder an der Wand
   bleiben ganz, beschnitten wird nur unten. */
#bewertungen .rez img,.rez img.rez__foto,.rez__foto img{object-position:50% 0}

/* 6. Erinnerungs-Fenster: Ecken bleiben beim Scrollen rund. */
.erinnern-pop__fenster{clip-path:inset(0 round 22px)}

/* 7. Nebenknoepfe in Champagner (Saskia): "Weitere Bewertungen ansehen",
   "Alle Fragen ansehen", "Zu den Gedenkbildern". Khaki bleibt dem Kaufknopf
   vorbehalten. "← Zurueck" bleibt bewusst Umriss. */
.bew__nachladen .knopf--umriss,
#bw-nachladen-knopf,
a.knopf--umriss[data-i18n="faqk.mehr"],
a.knopf--umriss[data-i18n="mem.cta"]{
  color:#3E3320;border:1px solid #B8955A;border-radius:14px;font-weight:600;text-decoration:none;
  background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.07) 100%),linear-gradient(135deg,#FCF3DF 0%,#EFD8AA 52%,#D9B97C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(110,80,30,.24),0 4px 10px rgba(110,85,45,.2);
  text-shadow:0 1px 0 rgba(255,255,255,.45);transition:filter .4s ease,transform .2s ease;
}
.bew__nachladen .knopf--umriss:hover,
#bw-nachladen-knopf:hover,
a.knopf--umriss[data-i18n="faqk.mehr"]:hover,
a.knopf--umriss[data-i18n="mem.cta"]:hover{filter:brightness(1.05);color:#3E3320;border-color:#B8955A}
.bew__nachladen .knopf--umriss:active,
#bw-nachladen-knopf:active,
a.knopf--umriss[data-i18n="faqk.mehr"]:active,
a.knopf--umriss[data-i18n="mem.cta"]:active{transform:scale(.98)}
/* ============================================================
   NACHTRAG BEISPIEL-REIHE, Fassung 4 (Saskia, 04.10.2026)
   1. Alle Stile, auch Motiv-Stile (Worte an der Wand, Sternenkarte), haben
      dieselbe Reihe kleiner Bilder. Es werden ALLE Beispiele gezeigt.
   2. PC (ab 900 px): Die kleinen Bilder stehen RECHTS NEBEN dem Hauptbild,
      zwei je Zeile, ein einzelnes letztes mittig -- genau so hoch wie das
      Hauptbild, mit 24 px Luft zum Hauptbild und 14 px untereinander.
      Bildunterschrift 22 px unter dem Bild, der Stil-Satz steht fuer sich
      allein 26 px darunter (Saskia: "nicht so gedrungen").
   3. Handy: fuenf kleine Bilder rechts neben dem Hauptbild; bei mehr als
      fuenf laesst sich die Spalte schieben (zwei Pfeil-Knoepfe).
   4. Motiv-Bilder werden ganz gezeigt. Die Leinwand nimmt das Format des
      Motivs an und steht mittig in der Bildflaeche (5:7). Auch Motiv-Bilder
      haben die umlaufende Kante.
   5. Bildunterschrift und Stil-Satz in der Textfarbe (lesbar im Schatten),
      Bildunterschrift in EINER Zeile ueber die Breite von Bild + Reihe.
   ============================================================ */

/* ---------- Motiv-Knoepfe sehen aus wie die Beispiel-Bildchen ---------- */
.bsp-reihe--motive .stil-einzel-klein__knopf{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;
  min-width:0;width:auto;position:relative;display:block;line-height:0;opacity:.72;overflow:visible;border-radius:0;
  transition:opacity .25s ease, transform .25s ease}
.bsp-reihe--motive .stil-einzel-klein__knopf::after{content:"";position:absolute;inset:-4px -3px}
.seitenkopf .bsp-reihe--motive .stil-einzel-klein__knopf img{display:block;width:100%;height:auto;aspect-ratio:5/7;object-fit:cover;object-position:50% 50%;
  border-radius:1px;background:none;box-shadow:3px 5px 8px rgba(40,30,15,.35) !important}
.bsp-reihe--motive .stil-einzel-klein__knopf:hover{opacity:1;transform:translateY(-2px)}
.bsp-reihe--motive .stil-einzel-klein__knopf[aria-pressed="true"]{opacity:1}
.seitenkopf .bsp-reihe--motive .stil-einzel-klein__knopf[aria-pressed="true"] img{outline:1.5px solid #2B2418;outline-offset:2px}
.bsp-reihe--motive .stil-einzel-klein__knopf:focus-visible{outline:2px solid #2B2418;outline-offset:4px}
.stil-einzel-klein--allein{display:none}
@media (prefers-reduced-motion:reduce){
  .bsp-reihe--motive .stil-einzel-klein__knopf{transition:none}
  .bsp-reihe--motive .stil-einzel-klein__knopf:hover{transform:none}
}

/* ---------- Motiv-Hauptbild: ganz zu sehen, Leinwand im Format des Motivs ----------
   .wandel__rahmen ist nur noch die Flaeche (5:7). Die Leinwand selbst ist
   .wandel__buehne: sie bekommt das Seitenverhaeltnis des Bildes (--seiten,
   setzt layout.js), den Wandschatten und die Kante. */
.seitenkopf .wandel[data-einzel-stil] .wandel__rahmen{aspect-ratio:5/7;display:grid;place-items:center;box-shadow:none;container-type:size}
.seitenkopf .seitenkopf__bildspalte .wandel[data-einzel-stil] .wandel__buehne{
  aspect-ratio:var(--seiten, 5 / 7);width:min(100cqw, calc(100cqh * var(--seiten-zahl, .7143)));
  max-width:none;max-height:none;margin:0;overflow:visible;border-radius:2px;
  box-shadow:18px 30px 34px -6px rgba(40,30,15,.70), 6px 12px 18px rgba(40,30,15,.40), 40px 70px 90px -16px rgba(40,30,15,.50)}
.seitenkopf .wandel[data-einzel-stil] .wandel__buehne > img{box-shadow:none}

/* ---------- Lesbarkeit unter dem Bild ---------- */
.seitenkopf .stil-beschreibung,
.seitenkopf__gitter .wandel .wandel__hinweis{color:#2B2418}

/* ---------- Pfeil-Knoepfe: nur am Handy, nur bei mehr als fuenf ---------- */
.bsp-leiste{display:contents}
.bsp-pfeil{display:none}

/* ============================ PC ab 900 px ============================ */
@media(min-width:900px){
  .seitenkopf .seitenkopf__gitter:has(.wandel[data-einzel-stil]){align-items:center}
  /* Zwei Zeilen und mehr koennen hoeher werden als der Text: der Text bleibt oben. */
  .seitenkopf .seitenkopf__gitter:has(.bsp-leiste) > .seitenkopf__textspalte{align-self:start}

  /* Bildspalte: oben der Block [Hauptbild | kleine Bilder], darunter der Stil-Satz. */
  .seitenkopf .seitenkopf__bildspalte:is(.seitenkopf__bildspalte--mit-reihe,.seitenkopf__bildspalte--motiv){
    display:flex;flex-direction:column;align-items:center;gap:26px}
  .seitenkopf__bildspalte:is(.seitenkopf__bildspalte--mit-reihe,.seitenkopf__bildspalte--motiv) > .wandel-bereich{position:static;left:auto;width:auto;max-width:100%}
  .seitenkopf__bildspalte:is(.seitenkopf__bildspalte--mit-reihe,.seitenkopf__bildspalte--motiv) > .seitenkopf__beschreibung{
    align-self:center;display:block;width:auto;max-width:420px;min-height:0;margin-top:0}

  .seitenkopf__bildspalte:is(.seitenkopf__bildspalte--mit-reihe,.seitenkopf__bildspalte--motiv) .wandel{
    display:grid;grid-template-columns:var(--bild-b) auto;column-gap:24px;justify-content:center;align-items:start;width:auto;max-width:none}
  .seitenkopf__bildspalte--motiv:not(.seitenkopf__bildspalte--mit-reihe) .wandel{grid-template-columns:var(--bild-b)}
  .seitenkopf__bildspalte:is(.seitenkopf__bildspalte--mit-reihe,.seitenkopf__bildspalte--motiv) .wandel__rahmen{grid-column:1;grid-row:1;width:var(--bild-b)}
  .seitenkopf .seitenkopf__bildspalte--mit-reihe .wandel__buehne{max-width:none;max-height:none}

  .seitenkopf__gitter .wandel--mit-reihe .bsp-reihe{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(2,auto);
    grid-auto-rows:calc((var(--bild-h) - 28px) / 3);gap:14px;align-content:center;justify-content:start;
    height:var(--bild-h);width:auto;max-width:none;margin:0;position:static;left:auto}
  .seitenkopf__gitter .wandel--mit-reihe .bsp-reihe:has(> :nth-child(7)){grid-auto-rows:calc((var(--bild-h) - 42px) / 4)}
  .seitenkopf__gitter .wandel--mit-reihe .bsp-reihe:has(> :nth-child(9)){grid-auto-rows:calc((var(--bild-h) - 56px) / 5)}
  .seitenkopf__gitter .wandel--mit-reihe .bsp-daumen,
  .seitenkopf__gitter .wandel--mit-reihe .stil-einzel-klein__knopf{height:100%;width:auto;flex:none}
  .seitenkopf .wandel--mit-reihe .bsp-reihe img{height:100%;width:auto;aspect-ratio:5/7}
  .seitenkopf__gitter .wandel--mit-reihe .bsp-reihe > :last-child:nth-child(odd){grid-column:1 / -1;justify-self:center}

  .seitenkopf__gitter .wandel--mit-reihe .wandel__hinweis{grid-column:1 / -1;grid-row:2;max-width:none;white-space:nowrap;margin-top:22px}
}
@media(min-width:900px) and (max-width:1039px){
  .seitenkopf__bildspalte:is(.seitenkopf__bildspalte--mit-reihe,.seitenkopf__bildspalte--motiv){--bild-b:236px;--bild-h:330.4px}
}
@media(min-width:1040px){
  .seitenkopf__bildspalte:is(.seitenkopf__bildspalte--mit-reihe,.seitenkopf__bildspalte--motiv){--bild-h:var(--medium-h);--bild-b:calc(var(--medium-h) * 5 / 7)}
  .seitenkopf__bildspalte.seitenkopf__bildspalte--motiv{--medium-h:calc((min(calc(70vh / var(--zf,1)),760px) - 9px) / 1.2)}
}

/* ============================ Handy bis 899 px ============================ */
@media(max-width:899px){
  .seitenkopf .wandel:has(> .wandel__rahmen + .bsp-leiste),
  .seitenkopf .wandel--mit-reihe{max-width:296px}
  .wandel--mit-reihe .bsp-reihe{flex-wrap:nowrap}
  .wandel--mit-reihe .bsp-daumen,
  .wandel--mit-reihe .bsp-reihe--motive .stil-einzel-klein__knopf{flex:0 0 auto;width:100%}
  .wandel--mit-reihe .bsp-reihe:not(:has(> :nth-child(5))){justify-content:center;gap:10px}

  /* Motiv-Stile ohne Bildunterschrift: Stil-Satz aus dem dunkelsten Schatten heraus. */
  .seitenkopf__gitter:has(.wandel[data-einzel-stil]) .seitenkopf__beschreibung{margin-top:28px}

  /* Mehr als fuenf: die Spalte wird zum Schiebe-Band, genau fuenf sind zu sehen. */
  .wandel--mit-reihe .bsp-leiste{display:block;position:relative;grid-column:2;grid-row:1;width:42px;align-self:stretch}
  .wandel--mit-reihe .bsp-leiste .bsp-reihe{position:absolute;inset:-4px -10px -4px -4px;width:auto;max-width:none;margin:0;padding:4px 10px 4px 4px;
    justify-content:flex-start;gap:7px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;scroll-padding-block:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wandel--mit-reihe .bsp-leiste .bsp-reihe::-webkit-scrollbar{display:none}
  .wandel--mit-reihe .bsp-leiste .bsp-daumen,
  .wandel--mit-reihe .bsp-leiste .bsp-reihe--motive .stil-einzel-klein__knopf{flex:0 0 calc((100% - 28px) / 5);scroll-snap-align:start}
  .seitenkopf .wandel--mit-reihe .bsp-leiste .bsp-reihe img{height:100%;aspect-ratio:auto}

  .bsp-pfeil{display:grid;place-items:center;position:absolute;z-index:2;left:calc(50% - 12px);width:24px;height:24px;padding:0;margin:0;
    border:1px solid #B8955A;border-radius:50%;cursor:pointer;color:#3E3320;
    background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.07) 100%),
               linear-gradient(135deg,#FCF3DF 0%,#EFD8AA 52%,#D9B97C 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(110,80,30,.24),0 2px 6px rgba(110,85,45,.3);
    transition:opacity .2s ease}
  .bsp-pfeil::after{content:"";position:absolute;inset:-10px}
  .bsp-pfeil svg{width:11px;height:11px;display:block}
  .bsp-pfeil--zurueck{top:-12px}
  .bsp-pfeil--weiter{bottom:-12px}
  .bsp-pfeil[data-aus]{opacity:0;pointer-events:none}
  .bsp-pfeil:focus-visible{outline:2px solid #2B2418;outline-offset:2px}
}
/* Bildunterschrift am Handy in einer Zeile, mittig unter Bild + Bildchen.
   Die Schrift wird nur so viel kleiner, wie noetig (390 px: 12 px). Unter
   350 px Fensterbreite bleibt sie zweizeilig, sonst wuerde sie zu klein. */
@media(min-width:350px) and (max-width:899px){
  .seitenkopf__gitter .wandel--mit-reihe .wandel__hinweis{justify-self:center;width:max-content;max-width:none;white-space:nowrap;
    font-size:min(12.8px, calc((calc(100vw / var(--zf,1)) - 48px) / 28.6))}
}
/* Siegel-Knopf "Deutschlands Nr. 1 bei Live-Vorschauen" (Entwurf 04.10.2026).
   Champagner wie alle Nebenknoepfe. Klick fuehrt in den Generator, also
   dorthin, wo die Live-Vorschau passiert. Nicht auf Gedenken-, Worte- und
   Sternenkarte-Seiten. (Stand Abend: auch Startseite und Worte; nicht
   Sternenkarte, nicht Generator; Gedenken offen.)
   Handy und schmaler PC (bis 1039 px): flacher Knopf, zwei Zeilen, unter den
   drei Haken (Saskia: "am Handy richtig gut").
   PC ab 1040 px: hohes, schmales Siegel rechts neben Kaufknopf + Haken, mittig
   in der freien Flaeche. Es liest sich als Auszeichnung, nicht als zweiter
   Knopf, und nichts rueckt nach unten (Saskia: "hoeher und weniger breit"). */
.nr1-knopf{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-sizing:border-box;
  min-height:46px;padding:6px 14px 7px;border:1px solid #B8955A;border-radius:14px;color:#3E3320;text-decoration:none;text-align:center;line-height:1.2;
  background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.07) 100%),linear-gradient(135deg,#FCF3DF 0%,#EFD8AA 52%,#D9B97C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(110,80,30,.24),0 4px 10px rgba(110,85,45,.2);
  text-shadow:0 1px 0 rgba(255,255,255,.45);transition:filter .3s ease, box-shadow .3s ease}
.nr1-knopf i{font-style:normal}
.nr1-knopf b{font-family:"Theano Didot","Times New Roman",serif;font-weight:400;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.nr1-knopf span{font-size:10px;font-weight:500;color:#4A3F2B;white-space:nowrap}
.nr1-knopf:hover{filter:brightness(1.05)}
.nr1-knopf:focus-visible{outline:2px solid #2B2418;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.nr1-knopf{transition:none}}
@media(max-width:899px){
  .seitenkopf__gitter .nr1-knopf{order:12;margin:14px auto 2px;align-self:center}
  /* Startseite: Kaufknopf und Plakette werden einzelne Teile der Spalte,
     damit die Plakette unter den drei Haken stehen kann (Haken = order 7) */
  .hero__gitter .hero__knoepfe:has(.nr1-knopf){display:contents}
  .hero__gitter .hero__knoepfe > .knopf--gold{order:6;margin-top:8px}
  .hero__gitter .nr1-knopf{order:8;margin:14px auto 2px;align-self:center}
}
@media(min-width:900px) and (max-width:1039px){
  /* zu schmal fuer die Plakette: flacher Knopf, bricht unter den Kaufknopf */
  .seitenkopf__knoepfe:has(.nr1-knopf),.hero__knoepfe:has(.nr1-knopf){display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
}
@media(min-width:1040px){
  .seitenkopf__knoepfe:has(.nr1-knopf),.hero__knoepfe:has(.nr1-knopf){position:relative}
  /* freie Flaeche: rechts von Kaufknopf und Haken, von der Oberkante des
     Kaufknopfs bis zur Unterkante der Haken. Stil-Seite: Haken-Text endet bei
     258 px, Mitte liegt 37 px unter der Knopfmitte. Startseite: 295 px / 43 px. */
  .seitenkopf__knoepfe .nr1-knopf,.hero__knoepfe .nr1-knopf{position:absolute;left:282px;right:0;margin:0 auto;width:max-content;
    top:calc(50% + 37px);translate:0 -50%;
    gap:0;padding:11px 18px 12px;border-radius:12px;
    box-shadow:inset 0 0 0 3px rgba(255,250,236,.55),inset 0 0 0 4px rgba(184,149,90,.55),inset 0 -3px 6px rgba(110,80,30,.16),0 5px 12px rgba(110,85,45,.2)}
  .hero__knoepfe .nr1-knopf{left:319px;top:calc(50% + 43px)}
  .nr1-knopf b{display:flex;flex-direction:column;align-items:center;font-size:14.5px;line-height:1.15}
  .nr1-knopf .nr1-a{font-family:inherit;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;padding-left:.2em}
  .nr1-knopf b .nr1-a{font-family:var(--sans);font-weight:600;color:#5A4A2C}
  .nr1-knopf .nr1-b{font-size:27px;line-height:1.1;letter-spacing:.02em;margin-top:2px}
  .nr1-knopf .nr1-c{font-size:14.5px}
  .nr1-knopf span{display:flex;flex-direction:column;align-items:center;font-size:9.5px;line-height:1.4;margin-top:7px;padding-top:6px;position:relative}
  .nr1-knopf span::before{content:"";position:absolute;top:0;left:50%;width:44px;height:1px;translate:-50% 0;background:linear-gradient(90deg,transparent,#A8833F,transparent)}
}

/* ============================================================================
   AUFTRAG EINBAU 10 (04.10.2026), Teil D -- Fusszeile
   Unveraendert aus der geprueften Vorlage fuss-nr1.css uebernommen.
   ============================================================================ */
/* Fusszeile: Nachweis-Zeile zur Werbeaussage "Nr. 1 bei Live-Vorschauen"
   (Saskia 04.10.2026): ganz unten, ganz klein, ruhig im Ton des Fusses.
   Farbe #6B5D48 auf #BBA07F = 2,57:1. Saskia: "deutlich blasser". Das liegt
   unter ihrer eigenen Regel 4,5:1 fuer kleinen Text -- ihre Entscheidung. */
.fuss .fuss__nr1{font-size:10px;line-height:1.45;color:#6B5D48;margin:.6rem auto 0;max-width:60em;text-align:center;text-wrap:balance}
/* Handy: Die feste Kaufleiste (.leiste, 65 px) liegt am Seitenende ueber den
   letzten Zeilen des Fusses. Der Fuss bekommt darunter so viel Luft, dass
   Jahreszeile, KI-Hinweis und Nachweis-Zeile ueber der Leiste stehen. */
@media(max-width:899px){
  body:has(.leiste) .fuss{padding-bottom:calc(65px + 14px + env(safe-area-inset-bottom,0px))}
}
/* "Bearbeitet mit KI" im Fuss (Saskia 04.10.2026): ganz klein und viel blasser,
   PC und Handy. Der Hinweis bleibt stehen und bleibt lesbar, er ist nur leise. */
.fuss .fuss__schluss .ki-hinweis{font-size:9px;line-height:1.4;color:#6B5D48;letter-spacing:.02em;opacity:1}

/* ============================================================================
   AUFTRAG EINBAU 11 (04.10.2026), Teil A -- die gewaehlte Stil-Kachel
   ----------------------------------------------------------------------------
   Im Raster "Welcher Stil passt zu dir?" bekommt die Kachel des gerade
   gezeigten Stils einen 2 px breiten Champagner-Rahmen um das Bild.
   Gezeichnet wird er als Innenschatten (inset), nicht als border -- so
   verschiebt sich nichts, weder die Kachel noch ihre Nachbarn.
   ============================================================================ */
/* Auftrag Einbau 12 (05.10.2026, Teil E1): Saskia -- "der Rahmen ist kaum zu
   sehen". Deshalb jetzt ein ruhiger Bronze-Rahmen MIT Abstand (wie ein
   Passepartout) statt der Champagner-Linie direkt auf dem Bild. Der innere
   Rand ist weg, der Stilname darunter wird dunkler und halbfett. */
#tw-raster a.kachel[aria-current="true"] .kachel__bild{
  outline:2.5px solid #8C6F45;
  outline-offset:5px;
}
#tw-raster a.kachel[aria-current="true"] .kachel__inhalt h3{color:#5E4520;font-weight:600}

/* Auftrag Einbau 11 (04.10.2026, Teil D): "Bearbeitet mit KI" steht als
   allerletzte Zeile des Fusses. Ist die Nachweis-Zeile nicht sichtbar
   (Vorschau aus), bekommt sie 10 px Abstand nach oben, damit sie nicht
   direkt unter der Jahreszeile klebt. */
.fuss .fuss__schluss .ki-hinweis--allein{margin-top:10px}

/* ============================================================================
   AUFTRAG EINBAU 11 (04.10.2026), Teil F2 -- Seite "Sonderanfertigung"
   ----------------------------------------------------------------------------
   Oben steht der Text, daneben (am PC rechts, am Handy darunter) die Karte
   "Deine Anfrage". Der alte Knopf, der nur das Mailprogramm oeffnete, ist weg.
   Kacheln und Karten sind nie eckig: Creme #EFE3CF, 10 px Ecken, Rand.
   ============================================================================ */

/* F-Nachtrag (Saskia, 04.10.2026, 22:10): "es sitzt zu hoch" -- die Zeile
   "SONDERANFERTIGUNG" klebte unter der Kopfleiste. */
body[data-seite="sonderanfertigung"] main .seitenkopf.son-kopf{padding-top:30px}
@media (min-width:900px){
  body[data-seite="sonderanfertigung"] main .seitenkopf.son-kopf{padding-top:40px}
}

.son-kopf__gitter{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
@media (min-width:900px){
  .son-kopf__gitter{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px}
}

/* Die Anfrage-Karte */
.son-karte{background:#EFE3CF;border:1px solid rgba(43,36,24,.14);border-radius:10px;
  padding:18px 18px 16px;box-sizing:border-box}
.son-karte__titel{font-family:"Theano Didot","Times New Roman",serif;font-weight:400;
  font-size:1.5rem;line-height:1.15;margin:0 0 4px;color:#2B2418}
.son-karte__unter{margin:0 0 10px;font-size:.88rem;line-height:1.4;color:#5A4E3C;text-wrap:balance}
.son-karte .son-raster{display:grid;grid-template-columns:1fr;gap:10px 18px;margin:0}
@media (min-width:560px){
  .son-karte .son-raster{grid-template-columns:1fr 1fr}
}
.son-karte .son-knopf{display:block;width:100%;margin-top:12px;text-align:center}
.son-karte .son-klein{margin:8px 0 0;font-size:.78rem;color:#5A4E3C;text-align:center}

/* dieselben Felder und Staerke-Knoepfe wie im Fenster des Generators */
.son-karte .son-feld{display:block}
.son-karte .son-feld .lbl{display:block;font-size:.84rem;margin:0 0 4px;color:#2B2418}
.son-karte .son-feld input{width:100%;box-sizing:border-box;border:1px solid rgba(138,106,40,.35);
  border-radius:12px;background:rgba(255,252,244,.8);padding:9px 12px;font:inherit;
  font-size:16px;color:#2B2418}
.son-karte .son-feld input:focus{outline:2px solid #6B4F1D;outline-offset:1px}
.son-karte .son-mass{display:flex;align-items:center;gap:8px}
.son-karte .son-mass label{flex:1 1 0;min-width:0}
.son-karte .son-mass .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.son-karte .son-staerken{display:flex;gap:8px}
.son-karte .son-staerken button{flex:1 1 0;padding:9px 6px;font:inherit;font-size:.9rem;
  font-weight:600;color:#3E3320;border:1px solid #B8955A;border-radius:12px;cursor:pointer;
  background:linear-gradient(rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 30%),
             linear-gradient(160deg,#FCF5E6 0%,#F4E5C6 55%,#EAD5A8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);transition:filter .2s ease}
.son-karte .son-staerken button:hover:not(:disabled){filter:brightness(1.04)}
.son-karte .son-staerken button.an{outline:2px solid #6B4F1D;outline-offset:-2px}
.son-karte .son-staerken button:disabled{opacity:.42;cursor:not-allowed}
.son-karte .son-staerke-klein{margin:8px 0 0;font-size:.76rem;line-height:1.4;color:#5A4E3C;text-wrap:balance}
.son-karte .son-fehler{margin:10px 0 0;font-size:.84rem;line-height:1.4;color:#8A3A28;font-weight:600}
.son-karte .son-fehler[hidden]{display:none}
.son-kopf .son-danke{margin:14px 0 0;font-size:1rem;line-height:1.5;color:#2B2418;text-wrap:balance}
.son-kopf .son-danke[hidden]{display:none}
.son-karte[hidden]{display:none}

/* "So laeuft es": vier runde Creme-Kacheln, Handy 2 x 2, PC vier nebeneinander. */
.son-kopf ~ .abschnitt .ablauf__gitter{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:900px){
  .son-kopf ~ .abschnitt .ablauf__gitter{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}
.son-kopf ~ .abschnitt .ablauf__gitter .schritt{background:#EFE3CF;border:1px solid rgba(43,36,24,.14);
  border-radius:10px;padding:14px 14px 12px;text-align:center;margin:0}
.son-kopf ~ .abschnitt .ablauf__gitter .schritt__nr{display:block;margin:0 0 6px;
  font-family:"Theano Didot","Times New Roman",serif;font-size:1.1rem;color:#8A6A28}
.son-kopf ~ .abschnitt .ablauf__gitter .schritt h3{margin:0 0 4px;font-size:1rem;line-height:1.2}
.son-kopf ~ .abschnitt .ablauf__gitter .schritt p{margin:0;font-size:.84rem;line-height:1.4;color:#5A4E3C}

/* "Fuer wen": ebenfalls runde Creme-Kacheln. */
.son-kopf ~ .abschnitt .gruende__gitter .grund{background:#EFE3CF;border:1px solid rgba(43,36,24,.14);
  border-radius:10px;padding:14px 16px;margin:0}

/* Knopf am Seitenende mittig. */
.son-knopfzeile{text-align:center;margin-top:18px}

/* ===========================================================================
   AUFTRAG EINBAU 11 (04.10.2026), Teil G -- Kasse, nur Aussehen
   Unveraendert aus der geprueften Vorlage kasse-aussehen.css uebernommen;
   einzige Aenderung: die Regel mit "Wandbild" gibt es jetzt auch auf
   Englisch. kasse.html und kasse.js bleiben Byte fuer Byte gleich.
   =========================================================================== */
/* KASSE – NUR AUSSEHEN (Einbau 11). Von Saskia am 04.10.2026 in der Vorschau angesehen.
   Ans Ende von styles.css. kasse.html und kasse.js bleiben unveraendert.
   Alle Regeln gelten nur auf der Kassen-Seite (body:has(#k-posten)). */

/* Karten: Creme, leicht runde Ecken (nicht so rund wie Knoepfe) */
body:has(#k-posten) .k-wk-position,
body:has(#k-posten) .k-posten,
body:has(#k-posten) .k-neben,
body:has(#k-posten) .k-motiv-karte,
body:has(#k-posten) .k-felder,
body:has(#k-posten) #schritt-1 > .k-feld,
body:has(#k-posten) #k-adress-uebersicht.k-adress-uebersicht,
body:has(#k-posten) main .k-pflicht{background:#EFE3CF;border:1px solid rgba(43,36,24,.14);border-radius:10px}
body:has(#k-posten) .k-felder{padding:18px 18px 20px}
body:has(#k-posten) #schritt-1 > .k-feld{padding:14px 18px 16px;margin-top:16px}

/* Felder: ein Ton in der ganzen Kasse, feiner Rand, 8 px Ecken */
body:has(#k-posten) main input:not([type=checkbox]):not([type=radio]),
body:has(#k-posten) main select,
body:has(#k-posten) main textarea{background-color:#F9F1E2;border:1px solid rgba(43,36,24,.25);border-radius:8px}
body:has(#k-posten) .k-wk-menge__knopf{background:#F6ECD9;border-color:rgba(43,36,24,.25);border-radius:8px}
body:has(#k-posten) .zahlart{background:#F6ECD9;border-color:rgba(43,36,24,.18);border-radius:6px}
body:has(#k-posten) main input[type=checkbox]{border-width:1.5px;border-color:#5A4E3C;border-radius:6px}
body:has(#k-posten) main input[type=checkbox]:not(:checked){background-color:#F6ECD9}

/* Warenkorb: Artikelzeile. PC eine Zeile mit buendigen Spalten; Handy Name oben, darunter Menge links, Preis + Entfernen rechts */
@media(min-width:600px){
  body:has(#k-posten) .k-wk-position{flex-wrap:nowrap;align-items:center}
  body:has(#k-posten) .k-wk-position__haupt{flex:1 1 auto;min-width:0;flex-wrap:nowrap;align-items:center}
  body:has(#k-posten) .k-wk-position__name{flex:1 1 auto;min-width:0}
  body:has(#k-posten) .k-wk-menge{flex:none;margin-left:auto}
  body:has(#k-posten) .k-wk-position__rechts{flex:none;min-width:116px;justify-content:flex-end}
  body:has(#k-posten) [data-i18n="kasse.s1text"]{text-wrap:balance}
}
@media(max-width:599px){
  body:has(#k-posten) .k-wk-position{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 12px}
  body:has(#k-posten) .k-wk-position__haupt{display:contents}
  body:has(#k-posten) .k-wk-position__name{grid-column:1 / -1;margin:0}
  body:has(#k-posten) .k-wk-menge{grid-column:1;justify-self:start}
  body:has(#k-posten) .k-wk-position__rechts{grid-column:2;justify-self:end}
  /* Einleitungssaetze der Schritte mittig */
  body:has(#k-posten) [data-i18n="kasse.s1text"],
  body:has(#k-posten) [data-i18n="kasse.s2text"],
  body:has(#k-posten) [data-i18n="kasse.s4text"],
  body:has(#k-posten) [data-i18n="kasse.s5text"]{text-align:center;text-wrap:pretty}
  /* die vier Schritte in einer Zeile */
  body:has(#k-posten) .k-marken{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:4px;padding-left:0;padding-right:0}
  body:has(#k-posten) .k-marken li{flex:0 1 auto;min-width:0;white-space:nowrap;font-size:11.5px;gap:5px;margin:0;padding-left:0;padding-right:0}
}

/* Luft ueber "Lieferland" und "Rabattcode" entfaellt innerhalb der neuen Karten */
body:has(#k-posten) #schritt-1 > .k-feld label{margin-top:0}

/* Summen-Kaesten (Warenkorb und Zahlung): feine goldene, auslaufende Linie zwischen den Zeilen */
body:has(#k-posten) .k-posten .k-zeile,
body:has(#k-posten) .k-pflicht .k-zeile,
body:has(#k-posten) .k-pflicht .k-pflicht__zeile{padding-top:11px;padding-bottom:11px;margin:0;border-top:0;
  background:linear-gradient(90deg,rgba(184,149,90,0) 0%,rgba(184,149,90,.75) 22%,rgba(214,178,110,.95) 50%,rgba(184,149,90,.75) 78%,rgba(184,149,90,0) 100%) top center/100% 1px no-repeat}
body:has(#k-posten) .k-posten .k-zeile:first-child,
body:has(#k-posten) .k-pflicht > div:first-child > .k-zeile:first-child{background:none;padding-top:4px}
body:has(#k-posten) .k-posten .k-zeile:last-child{padding-bottom:4px}

/* PC: Kasten "Deine Bestellung" beginnt auf Hoehe der ersten Karte links (nicht neben dem Einleitungssatz)
   und wandert beim Scrollen etwa in der Mitte der Fensterhoehe mit.
   In der Vorschau waren das 72 px. Im Einbau sauber im Raster ausrichten, wenn moeglich; sonst diesen Wert pruefen. */
@media(min-width:900px){
  body:has(#k-posten) .k-neben{margin-top:72px;top:max(110px,calc(calc(50vh / var(--zf,1)) - 157px))}
}

/* Schritte 1-4: goldene Zierlinie UEBER den Schritten, kein Strich darunter; runde Glasknoepfe */
body:has(#k-posten) .k-marken__leiste{display:none}
body:has(#k-posten) .k-marken{position:relative;padding-top:20px;margin-bottom:18px}
body:has(#k-posten) .k-marken::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(184,149,90,0) 0%,#B8955A 18%,#F1D9A4 50%,#B8955A 82%,rgba(184,149,90,0) 100%)}
body:has(#k-posten) .k-marken li::before{width:26px;height:26px;font-size:12px;font-weight:500;border:1px solid rgba(150,125,80,.55);color:#3E3320;
  background:linear-gradient(rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 45%,rgba(120,95,50,.10) 100%),#FBF6EC;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 3px rgba(110,80,30,.16),0 2px 5px rgba(110,85,45,.22)}
body:has(#k-posten) .k-marken li[data-stand="aktiv"]::before{font-weight:700;border-color:#B8955A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 3px rgba(110,80,30,.16),0 0 0 2px rgba(184,149,90,.28),0 2px 5px rgba(110,85,45,.22)}
body:has(#k-posten) .k-marken li[data-stand="aktiv"] span{font-weight:600;color:#2B2418}
body:has(#k-posten) .k-marken li[data-stand="fertig"]::before{color:#F6EFDF;border-color:#4A4A2E;
  background:linear-gradient(rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 45%,rgba(0,0,0,.18) 100%),#6B6A45;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 3px rgba(0,0,0,.25),0 2px 5px rgba(60,55,25,.35)}

/* Schritt Motiv: Ueberschrift der Karte IN der Karte, linksbuendig, durchgezaehlt "Wandbild 1 · …"; doppelter Titel im Foto-Bereich weg;
   Foto-Bereich als hellere Innen-Karte */
body:has(#k-posten) .k-motiv-karte__legende{float:left;width:100%;box-sizing:border-box;background:none;padding-left:0;padding-right:0;margin-bottom:6px;
  display:flex;justify-content:flex-start;align-items:center;gap:6px}
body:has(#k-posten) .k-motiv-karte__legende > span{margin-right:auto}
body:has(#k-posten) .k-motiv-karte__legende + *{clear:both}
body:has(#k-posten) main{counter-reset:kbild}
body:has(#k-posten) .k-motiv-karte{counter-increment:kbild}
body:has(#k-posten) .k-motiv-karte:not(:only-of-type) .k-motiv-karte__legende::before{content:"Wandbild " counter(kbild) " · "}
/* Auftrag Einbau 11 (04.10.2026, Teil G1): auf Englisch "Picture". */
html[lang="en"] body:has(#k-posten) .k-motiv-karte:not(:only-of-type) .k-motiv-karte__legende::before{content:"Picture " counter(kbild) " · "}
body:has(#k-posten) .k-foto-bereich__titel{display:none}
body:has(#k-posten) .k-foto-bereich{background:#F7EFDF;border-color:rgba(43,36,24,.12);border-radius:8px}

/* ============================================================================
   GESCHENK-SEITE (geschenke.html) -- Auftrag Einbau 12, 05.10.2026, Teil A
   ----------------------------------------------------------------------------
   Aussehen nach dem abgenommenen Entwurf
   _live-vorschau\geschenk-entwurf\geschenk-entwurf.css. Zwei Dinge sind
   bewusst anders geloest:

   1. Die Nr.-1-Plakette sitzt am Rechner in einer eigenen Rasterspalte, die
      ueber die Luecke des Kopfrasters hinweg bis an die linke Kante des Bildes
      reicht (margin-right: -48px). Dadurch steht sie genau mittig zwischen
      Kaufknopf und Bild -- ohne dass im Browser etwas nachgemessen wird.
      Damit das aufgeht, ist die Bildspalte genau so breit wie das Bild
      (Spalte "auto", Bild 320 x 400).

   2. Die Gutschein-Vorschau ist kein Rahmen auf eine andere Datei, sondern
      dieselbe Karte als echtes Markup (.gk-gs). Ihr Aussehen folgt
      vorlagen\gutschein.html Punkt fuer Punkt, in denselben Millimetermassen;
      verkleinert wird sie mit transform: scale (layout.js,
      gutscheinSkalieren()).
   ============================================================================ */
[data-seite="geschenke"] .gs-kopf{padding-top:30px !important;padding-bottom:10px !important}
.gs-kopf__gitter{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
.gs-kopf__text h1{margin:0}
.gs-kopf__text .augbraue{margin:0 0 6px}
.gs-kopf__unter{margin:12px 0 0;font-size:1rem;line-height:1.55;max-width:34em}
.gs-kopf__knopf{margin:18px 0 0}
.gs-kopf__knopf .knopf{width:100%;max-width:340px;text-align:center;justify-content:center}
.gs-haken{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:.9rem}
.gs-haken li{display:flex;gap:8px;align-items:center}
.gs-haken svg{width:16px;height:16px;flex:none;color:#A07D3C;stroke-width:2.4}
.gs-kopf__plakette{display:flex;justify-content:center;margin:16px 0 2px}
.gs-frist{text-align:center;position:relative;margin:18px auto 0;padding:11px 8px;max-width:460px;font-size:.85rem;line-height:1.55}
.gs-frist::before,.gs-frist::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#B8955A 30%,#E9D29C 50%,#B8955A 70%,transparent)}
.gs-frist::before{top:0}
.gs-frist::after{bottom:0}
.gs-kopf__bild{display:flex;justify-content:center}
.gs-kopf__bild img{border-radius:10px;box-shadow:none !important;
  filter:drop-shadow(8px 14px 16px rgba(60,45,25,.35))}
[data-seite="geschenke"] .abschnitt{padding-top:22px !important;padding-bottom:22px !important}
[data-seite="geschenke"] .abschnitt h2.titel + *{margin-top:22px !important}

/* Fuer wen ist dein Geschenk? */
.gs-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gs-kachel{display:flex;flex-direction:column;background:#EFE3CF;border:1px solid rgba(43,36,24,.14);
  border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.gs-kachel:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(60,45,25,.18)}
.gs-kachel img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:0 !important;box-shadow:none !important}
.gs-kachel__t{padding:10px 12px 12px;display:grid;gap:3px;font-size:.8rem;line-height:1.4}
.gs-kachel__t b{font-size:.9rem;font-weight:600}

/* Gut zu wissen */
.gs-liste{margin:0 auto;padding-left:1.1em;display:grid;gap:10px;font-size:.92rem;line-height:1.5;list-style:disc}
.gs-liste a{color:#5E4520;font-weight:600}

/* ---------------------------------------------------------------------------
   Geschenkgutschein -- Karte, Knoepfe, Formular
   --------------------------------------------------------------------------- */
.gk__karte{background:#EFE3CF;border:1px solid rgba(43,36,24,.14);border-radius:10px;
  padding:20px 16px;display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.gk__karte > *{min-width:0}
.gk__vorschau{display:flex;flex-direction:column;align-items:center}
.gk__rahmen{width:100%;max-width:460px;aspect-ratio:210/148;position:relative;overflow:hidden;
  border-radius:8px;box-shadow:0 12px 26px rgba(60,45,25,.22)}
.gk__unter{font-size:.78rem;color:#6B5D48;margin:10px 0 0;text-align:center}
.gk__anlass-block{width:100%;max-width:460px;margin-top:16px}
.gk__anlass-block .gk__frage{margin-top:0}
.gk__inhalt .augbraue{margin:0 0 6px;text-align:left !important}
.gk__titel{margin:0 0 8px;font-size:1.4rem;line-height:1.2}
.gk__text{margin:0 0 14px;font-size:.92rem;line-height:1.55}
.gk__frage{margin:14px 0 8px;font-size:.85rem;font-weight:600}
.gk__frage:first-child{margin-top:0}
.gk__chips{display:flex;flex-wrap:wrap;gap:8px}
.gk__chips .chip{position:relative}
.gk__chips .chip i{position:absolute;top:-9px;right:-6px;font-style:normal;font-size:.6rem;font-weight:600;
  letter-spacing:.04em;background:#8C6F45;color:#FBF5EA;padding:1px 6px;border-radius:9px}
.gk__betraege .chip{min-width:64px}
.gk__frei{display:flex !important;flex-direction:row !important;align-items:center;gap:4px;
  white-space:nowrap;font-weight:400 !important}
.gk__frei input{border:0;background:none;width:110px;font:inherit;font-size:.88rem;outline:none;padding:0}
.gk__hinweis{margin:8px 0 0;font-size:.8rem;color:#6B5D48;min-height:1.2em}
.gk__felder{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.gk__form label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;font-weight:600}
.gk__lang{margin-top:10px}
/* Auftrag "Gutschein-Kauf kaputt" (06.10.2026), Teil B: Die Regel setzte
   die helle Flaeche, aber KEINE Textfarbe -- die kam per Vererbung aus dem
   Abschnitt. Auf canvasory.de ist die creme (#F6EFDF): Wer tippte, sah
   creme auf creme und damit gar nichts. Auf Unvergessen fiel es nicht auf,
   weil dort dunkel vererbt wurde. Die Farbe steht jetzt am Feld selbst,
   auf beiden Seiten gleich. color-scheme:light haelt ausserdem den
   Handy-Dunkelmodus (Samsung Internet) davon ab, die Felder umzufaerben.
   Der Fokus-Rahmen des Browsers bleibt unangetastet. */
.gk__form input[type=text]:not(.gk__frei input),.gk__form input[type=email]{
  background:#F9F1E2;color:#2B2418;color-scheme:light;
  border:1px solid rgba(43,36,24,.18);border-radius:8px;padding:10px 12px;
  font:inherit;font-size:.9rem;font-weight:400;min-width:0;width:100%}
.gk__form input[type=text]:not(.gk__frei input)::placeholder,
.gk__form input[type=email]::placeholder{color:#6B5D48;opacity:1}
.gk__form input.fehler{border-color:#A04A2C}
.gk__fehler{margin:8px 0 0;font-size:.8rem;color:#A04A2C}
.gk__kauf{width:100%;margin-top:16px;justify-content:center}
.gk__klein{margin:8px 0 0;font-size:.78rem;color:#6B5D48;text-align:center}

/* ---------------------------------------------------------------------------
   Die Gutschein-Karte selbst. Alle Masse in Millimetern wie beim gedruckten
   Gutschein (vorlagen\gutschein.html); layout.js verkleinert sie auf die
   Breite ihres Rahmens.
   --------------------------------------------------------------------------- */
.gk-gs{position:absolute;top:0;left:0;width:210mm;height:148mm;transform-origin:0 0;
  background:radial-gradient(120% 90% at 50% 0%,#FFFDF8 0%,#FBF5EA 45%,#F6ECD9 100%);
  overflow:hidden;color:#2B2418;font-family:'Outfit',system-ui,sans-serif}
.gk-gs img{box-shadow:none !important;border-radius:0 !important}
.gk-gs::before{content:"";position:absolute;inset:6mm;border:.35mm solid #8C6F45;border-radius:2.5mm;opacity:.75}
.gk-gs::after{content:"";position:absolute;inset:7.6mm;border:.25mm solid #B8955A;border-radius:2mm;opacity:.55}
.gk-gs__schleife{position:absolute;top:4.5mm;right:1mm;width:46mm;height:auto;z-index:2;
  transform:rotate(24deg);filter:drop-shadow(0 1.8mm 1.8mm rgba(80,55,20,.28))}
.gk-gs__innen{position:absolute;inset:12mm 16mm 11mm;display:flex;flex-direction:column;
  align-items:center;text-align:center;z-index:1}
.gk-gs__logo{width:58mm;height:auto}
.gk-gs__kicker{font-weight:600;font-size:3mm;letter-spacing:.42em;text-transform:uppercase;
  color:#8C6F45;margin:0;padding-left:.42em}
.gk-gs__anlass{font-family:'Theano Didot',Georgia,serif;font-style:italic;font-size:5.4mm;
  color:#7A5C2E;margin:1.6mm 0 0}
.gk-gs__anlass:empty{display:none}
.gk-gs__betrag{font-family:'Theano Didot',Georgia,serif;font-size:21mm;line-height:1;
  margin:2.5mm 0 1mm;letter-spacing:.01em}
.gk-gs__betrag small{font-size:.55em;margin-left:1.5mm;vertical-align:.32em}
.gk-gs__wofuer{font-size:3.4mm;line-height:1.45;color:#6B5D48;margin:0;max-width:130mm}
.gk-gs__namen{display:flex;gap:10mm;margin-top:5mm;width:100%;max-width:140mm}
.gk-gs__namen div{flex:1;text-align:left}
.gk-gs__namen span{display:block;font-size:2.4mm;letter-spacing:.24em;text-transform:uppercase;
  color:#8C6F45;font-weight:600}
.gk-gs__namen b{display:block;font-family:'Theano Didot',Georgia,serif;font-weight:400;font-size:5.2mm;
  padding:1mm 0 1.2mm;border-bottom:.25mm solid rgba(140,111,69,.45);min-height:7.6mm;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gk-gs__gruss{font-family:'Theano Didot',Georgia,serif;font-style:italic;font-size:4mm;line-height:1.4;
  margin:3.6mm 0 0;max-width:140mm}
.gk-gs__gruss:empty{display:none}
.gk-gs__fuss{margin-top:auto;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:6mm}
.gk-gs__code{border:.3mm solid #B8955A;border-radius:1.6mm;padding:1.6mm 3.4mm;
  background:rgba(255,253,248,.7);text-align:left}
.gk-gs__code span{display:block;font-size:2.2mm;letter-spacing:.24em;text-transform:uppercase;
  color:#8C6F45;font-weight:600}
.gk-gs__code b{font-weight:600;font-size:4.4mm;letter-spacing:.14em}
.gk-gs__einloesen{font-size:2.55mm;line-height:1.5;color:#6B5D48;text-align:right}
.gk-gs__einloesen b{color:#2B2418;font-weight:600}

/* ---------------------------------------------------------------------------
   Rechner ab 900 px
   --------------------------------------------------------------------------- */
@media(min-width:900px){
  [data-seite="geschenke"] .gs-kopf{padding-top:40px !important}
  /* Die Bildspalte ist genau so breit wie das Bild -- nur so kann die
     Plakette mit reinem CSS mittig zwischen Knopf und Bild stehen. */
  .gs-kopf__gitter{grid-template-columns:minmax(0,1fr) auto;gap:48px}
  .gs-kopf__bild img{width:320px;height:400px}
  .gs-kacheln{grid-template-columns:repeat(6,minmax(0,1fr))}
  .gs-liste{width:fit-content}
  .gs-frist{text-align:left;font-size:.95rem;padding:12px 0;max-width:560px;margin-left:0;margin-right:0}
  .gs-frist::before,.gs-frist::after{
    background:linear-gradient(90deg,#B8955A 0%,#E9D29C 35%,rgba(184,149,90,.6) 70%,transparent 100%)}
  .gs-frist b{font-weight:600;color:#3E3320}
  .gk__karte{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:26px 30px}
  .gk__rahmen{max-width:420px}
  .gk__anlass-block{max-width:420px}
  /* Anlaesse im Raster, vier nebeneinander, "Anderer Anlass" ueber alles */
  .gk__anlaesse{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .gk__anlaesse .chip{padding:9px 2px;font-size:13px;text-align:center;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .gk__anlaesse .chip:last-child{grid-column:1 / -1}
  /* Betraege in EINER Zeile ueber die volle Spaltenbreite, 42 px hoch */
  .gk__betraege{flex-wrap:nowrap;gap:8px;width:100%}
  .gk__betraege .chip{flex:1 1 0;min-width:0;padding:10px 4px;font-size:14px;text-align:center;min-height:42px}
  .gk__betraege .gk__frei{flex:2.4 1 0;min-width:0;padding:9px 12px !important;justify-content:space-between}
  .gk__betraege .gk__frei input{width:100% !important;min-width:0;font-size:14px}
}
@media(min-width:1040px){
  /* Knopf links, Plakette in der Spalte daneben: die Spalte reicht ueber die
     48 px Luecke des Kopfrasters bis an die linke Kante des Bildes. */
  .gs-kauf{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0}
  .gs-kopf__knopf .knopf{width:300px}
  .gs-kopf__plakette{margin:0 -48px 0 0}
  .gs-kopf__plakette .nr1-knopf{margin:0;flex:none;gap:0;padding:11px 18px 12px;border-radius:12px;
    box-shadow:inset 0 0 0 3px rgba(255,250,236,.55),inset 0 0 0 4px rgba(184,149,90,.55),
      inset 0 -3px 6px rgba(110,80,30,.16),0 5px 12px rgba(110,85,45,.2)}
}

/* ---------------------------------------------------------------------------
   Handy bis 899 px -- Reihenfolge: Kleinzeile, Ueberschrift, Bild, Unterzeile,
   Knopf, Haken, Plakette, Fristzeile. Knopf und Plakette im ersten Bildschirm.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  .gs-kopf__gitter{display:flex !important;flex-direction:column;gap:0 !important}
  .gs-kopf__text{display:contents}
  .gs-kopf__text .augbraue{order:1}
  .gs-kopf__text h1{order:2}
  .gs-kopf__bild{order:3;margin:14px 0 2px}
  .gs-kopf__bild img{width:184px;height:230px}
  .gs-kopf__unter{order:4}
  .gs-kauf{order:5}
  .gs-frist{order:6}
  .gk__karte{display:flex !important;flex-direction:column;gap:0 !important;padding:18px 14px}
  .gk__inhalt{display:contents}
  .gk__inhalt > .augbraue{order:1}
  .gk__titel{order:2}
  .gk__text{order:3;margin-bottom:14px}
  .gk__vorschau{order:4}
  .gk__form{order:5;margin-top:16px}
  .gk__rahmen{max-width:300px}
  .gk__anlass-block{max-width:none}
  .gk__chips{gap:6px}
  .gk__anlaesse{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .gk__anlaesse .chip{padding:8px 2px;font-size:12.5px;text-align:center;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .gk__anlaesse .chip:last-child{grid-column:1 / -1}
  .gk__betraege{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .gk__betraege .chip{padding:8px 2px;font-size:13px;text-align:center}
  .gk__betraege .gk__frei{grid-column:1 / -1;justify-content:space-between}
  .gk__betraege .gk__frei input{width:100% !important}
}

/* ============================================================================
   BEIGE GLASKNOEPFE (Auftrag Einbau 12, 05.10.2026, Teil B)
   ----------------------------------------------------------------------------
   Saskia: "keine weissen, eckigen Knoepfe -- beigefarbene Glasknoepfe".
   Gilt fuer die Anlass-Knoepfe der Geschenk-Erinnerung (Startseite, Pop-up,
   Geschenk-Seite) und fuer alle Knoepfe im Gutschein-Teil.
   ============================================================================ */
.erinnern .chip,.gk__chips .chip{
  font:inherit;font-size:14px;padding:8px 16px;border-radius:999px;color:#2B2418;cursor:pointer;
  white-space:nowrap;transition:background .35s ease,color .35s ease,border-color .35s ease;
  border:1px solid rgba(184,149,90,.6);
  background:linear-gradient(rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 42%,rgba(110,80,30,.05) 100%),
    linear-gradient(160deg,#FBF4E6 0%,#F3E7D0 55%,#EADBBE 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 3px rgba(110,80,30,.14),
    0 2px 6px rgba(110,85,45,.16);
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
.erinnern .chip:hover,.gk__chips .chip:hover{border-color:#B8955A;filter:brightness(1.03)}
.erinnern .chip.an,.gk__chips .chip.an{
  border-color:#A9864A;color:#3E3320;font-weight:600;
  background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.07) 100%),
    linear-gradient(135deg,#FCF3DF 0%,#EFD8AA 52%,#D9B97C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(110,80,30,.24),
    0 3px 8px rgba(110,85,45,.24)}
.erinnern .chip.an::before,.gk__chips .chip.an::before{content:"\2713 "}
.gk__frei{border-radius:999px !important;height:auto !important;padding:7px 14px !important;
  border:1px solid rgba(184,149,90,.6) !important;
  background:linear-gradient(rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 42%,rgba(110,80,30,.05) 100%),
    linear-gradient(160deg,#FBF4E6 0%,#F3E7D0 55%,#EADBBE 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 3px rgba(110,80,30,.14),
    0 2px 6px rgba(110,85,45,.16)}

/* ============================================================================
   KOPFZEILE: SECHS PUNKTE STATT FUENF (Auftrag Einbau 12, 05.10.2026, Teil A3)
   ----------------------------------------------------------------------------
   Mit "Geschenke" stehen am Rechner sechs Punkte in der Kopfzeile. In voller
   Groesse sind sie 711 px breit; neben Logo (225) und rechter Seite (142)
   passt das erst ab etwa 1200 px Fensterbreite. Darunter wird die Zeile
   deshalb enger gesetzt.

   Gemessen am 05.10.2026: ohne diese Regel ragte die Kopfzeile bei 1097 px um
   84 px aus dem Fenster (Querscrollen). Mit ihr bleibt sie innen -- und bei
   1024 px passt sie jetzt sogar besser als vorher: dort stand die Zeile schon
   mit fuenf Punkten 39 px zu weit rechts.
   ============================================================================ */
@media(min-width:1024px) and (max-width:1039px){
  .nav{gap:0}
  header .nav > a.nav--rechner{font-size:.9rem}
  .nav a{padding-inline:.4rem}
}

/* ============================================================================
   SONDERANFERTIGUNG -- NACHTRAEGE (Auftrag Einbau 12, 05.10.2026, Teil D)
   ----------------------------------------------------------------------------
   D1  Abstand Ueberschrift -> Einleitungstext: 10 px (am Handy waren es 22).
   D3  Neuer Abschnitt "Material" direkt hinter dem Seitenkopf.
   D4  Ueberschrift -> Inhalt ueberall 22 px (gemessen vorher 48 / 0 bzw. 16 / 20).
   D5  "Gut zu wissen" am Rechner als Block mittig, Saetze linksbuendig.
   ============================================================================ */
body[data-seite="sonderanfertigung"] .son-kopf .seitenkopf__text{margin-top:10px}

/* D4: gleicher Abstand unter jeder Abschnittsueberschrift. */
body[data-seite="sonderanfertigung"] main .abschnitt h2.titel{margin-bottom:0}
body[data-seite="sonderanfertigung"] main .abschnitt h2.titel + *{margin-top:22px !important}

/* D5: Die Liste steht mittig unter der Ueberschrift, die Saetze bleiben
   linksbuendig. Am Handy aendert sich nichts. */
@media (min-width:900px){
  body[data-seite="sonderanfertigung"] .son-liste{width:fit-content;margin-inline:auto}
}

/* ---------------------------------------------------------------------------
   D3  Abschnitt "Material"
   Am Handy steht das Bild oben (230 px hoch), darunter der Text; am Rechner
   links das Bild (320 px hoch), rechts der Text. Das Bild ist freigestellt:
   nur ein weicher Schatten, kein Kasten -- dieselbe Loesung wie im
   Material-Vergleich (.mat .bild img).
   --------------------------------------------------------------------------- */
.son-mat__gitter{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
.son-mat__bild{display:flex;justify-content:center}
.son-mat__bild img{height:230px;width:auto;max-width:100%;
  box-shadow:none !important;border-radius:0 !important;
  filter:drop-shadow(10px 16px 18px rgba(60,45,25,.38))}
.son-mat__augbraue{text-align:left !important;margin-left:0 !important;margin-right:0 !important;
  width:auto !important}
.son-mat__titel{font-family:"Theano Didot","Times New Roman",serif;font-weight:400;
  margin:0 0 10px;font-size:1.35rem;line-height:1.25}
.son-mat__satz{margin:0;font-size:.95rem;line-height:1.6;color:#5A4E3C}
.son-mat__liste{list-style:none;margin:16px 0 0;padding:0;font-size:.9rem;line-height:1.5}
.son-mat__liste li{padding:9px 0;border-top:1px solid rgba(184,149,90,.45)}
.son-mat__liste li:last-child{border-bottom:1px solid rgba(184,149,90,.45)}
.son-mat__liste b{font-weight:600;color:#2B2418}
/* Luft nach unten, bevor die goldene Linie des naechsten Abschnitts kommt. */
.son-mat{padding-bottom:36px !important}
@media (min-width:900px){
  .son-mat{padding-bottom:48px !important}
  .son-mat__gitter{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px}
  .son-mat__bild img{height:320px}
  .son-mat__titel{font-size:1.6rem}
}

/* STOLZ-UMBAU Phase 9: Gutschein-Feld-Regeln */
.gk__anlaesse .chip[data-anlass="anderer"]{grid-column:auto / -1}
.gk__mehr{display:none !important}
@media(min-width:900px){
  .gk__anlaesse{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gk__anlaesse .chip{overflow:visible;text-overflow:clip;padding-left:6px;padding-right:6px}
  .gk__betraege .chip{flex:0 0 auto;padding-left:12px;padding-right:12px}
  .gk__betraege .gk__frei{flex:1 1 auto}
}
@media(max-width:600px){
  .gk__anlaesse{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gk__anlaesse .chip{overflow:visible;text-overflow:clip}
  .gk__anlaesse:not(.offen) .chip.zu:not(.an){display:none !important}
  .gk__anlaesse:not(.offen) .gk__mehr{display:flex !important;grid-column:1 / -1;justify-content:center}
}


/* STOLZ-UMBAU Phase 9b: Anderer Anlass fuellt die letzte Reihe */
@media(min-width:601px){.gk__anlaesse .chip[data-anlass="anderer"]{grid-column:span 2}}

/* STOLZ-UMBAU Phase 15: Startseite Handy Themenwelten 2 x 2 */
@media(max-width:640px){
  body[data-seite="start"] #themen .kacheln{gap:1.2rem .9rem;max-width:360px;margin-inline:auto}
  body[data-seite="start"] #themen .kachel{flex:0 0 calc(50% - .45rem);max-width:calc(50% - .45rem);margin:0}
  body[data-seite="start"] #themen .kachel h3{font-size:1rem}
}
/* STOLZ-UMBAU Phase 26: Nr.-1-Fusszeile blass auch auf der Kaufstrecke */
.fuss .fuss__nr1{color:#8F8A6B !important}
/* STOLZ-UMBAU Phase 11: Fuss-Produkte am PC in zwei Spalten (Vorschlag) */
@media(min-width:1000px){
  .fuss__spalten{grid-template-columns:1fr 2.1fr 1fr !important}
  .fuss__spalte:nth-of-type(2) ul{display:block !important;columns:2 !important;column-gap:2.2rem}
  .fuss__spalte:nth-of-type(2) li{break-inside:avoid}
  .fuss__spalte:nth-of-type(2) li a{white-space:nowrap}
}

/* STOLZ-UMBAU Phase 13 (Anweisung 05.10.): Handy -- Bewertungsfuss eine Zeile, Erinnere-mich unter dem Feld */
@media (max-width: 640px) {
  #bewertungen .rez__fuss { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: .5rem; }
  #bewertungen .rez__fuss .rez__produkt::before { margin-right: .5rem; }
  .erinnern__zeile { flex-direction: column; gap: 10px; }
  .erinnern__zeile input { flex: none; width: 100%; font-size: 16px; }
  .erinnern__zeile .erinnern__knopf { width: 100%; }
}
/* ENDE Phase 13 */

/* STOLZ-UMBAU Phase 23: Einbau-14-Block aus Unvergessen (vor den Oliv-Regeln) */
/* ============================================================================
   EINBAU 14 (05.10.2026) -- NUR ERGAENZUNGEN
   ----------------------------------------------------------------------------
   Der Block "KASSE - NUR AUSSEHEN (Einbau 11)" weiter oben wird NICHT
   angefasst (Auftrag Punkt 5, Vorbemerkung). Alles Neue dieses Auftrags steht
   hier und uebernimmt genau dieselben Regeln: Creme-Karten #EFE3CF mit 10 px
   Ecken und Rand rgba(43,36,24,.14), Felder #F9F1E2 mit 8 px Ecken,
   Champagner-Glasknoepfe, Khaki nur fuer den Kaufknopf, Fehler in Rotbraun.
   Nichts weiss, nichts eckig.
   ============================================================================ */

/* ---------- TEIL A: Danke-Zustand der Geschenk-Seite ---------------------- */
/* Steht an der Stelle des Formulars, sobald Stripe den Kaeufer auf
   geschenke.html?gutschein=danke zurueckschickt (layout.js,
   gutscheinDankeZeigen()). Dieselbe Creme-Karte wie das Formular. */
.gk__danke{background:#EFE3CF;border:1px solid rgba(43,36,24,.14);border-radius:10px;
  padding:20px 20px 22px;margin-top:16px;text-align:center}
.gk__danke p{margin:0;font-size:1rem;line-height:1.6;color:#2B2418;text-wrap:pretty}
.gk__danke::before{content:"";display:block;width:64px;height:2px;margin:0 auto 14px;
  background:linear-gradient(90deg,transparent,#B8955A 30%,#E9D29C 50%,#B8955A 70%,transparent)}

/* ---------- TEIL B: Gutschein in der Kasse ------------------------------- */
/* Die Gutschein-Zeile steht in denselben Summen-Kaesten wie alle anderen
   Zeilen und erbt damit die feine goldene Trennlinie aus dem Einbau-11-Block.
   Sie bekommt nur etwas mehr Gewicht -- sie ist eine Zahlung, kein Posten. */
body:has(#k-posten) .k-zeile--gutschein{font-weight:600}
body:has(#k-posten) .k-zeile--gutschein span:last-child{color:#5A5A36}
/* Restguthaben und "alles bezahlt": klein und ruhig unter der Summe. */
body:has(#k-posten) .k-gutschein-zeile{margin-top:6px;line-height:1.6}
body:has(#k-posten) .k-gutschein-hinweis{color:#5A4E3C}

/* ---------- TEIL B: Gutschein auf der Danke-Seite ------------------------ */
/* Creme-Karte wie in der Kasse, 10 px Ecken, nichts weiss, nichts eckig. */
.dk-gutschein{margin:18px 0 0;padding:14px 18px 16px;background:#EFE3CF;
  border:1px solid rgba(43,36,24,.14);border-radius:10px;
  font-size:.92rem;line-height:1.7;color:#2B2418}

/* ---------- TEIL C: Kasse fertig ----------------------------------------- */
/* Alle Regeln gelten nur auf der Kassen-Seite (body:has(#k-posten)) -- genau
   wie im Einbau-11-Block. Uebernommen werden dessen Werte: Creme-Karte
   #EFE3CF mit Rand rgba(43,36,24,.14) und 10 px Ecken, hellere Innen-Karte
   #F7EFDF mit 8 px, Felder #F9F1E2 mit 8 px, Champagner-Glasknopf
   (#FCF3DF -> #EFD8AA -> #D9B97C, Rand #B8955A, Radius 14 px), Fehler in
   Rotbraun. Nichts weiss, nichts eckig. */

/* --- Vorschaubild im Warenkorb (46 x 58, Punkt 5.2) --- */
body:has(#k-posten) .k-wk-position__bild{width:46px;height:58px;flex:none;
  object-fit:cover;border-radius:6px;border:1px solid rgba(43,36,24,.18);
  background:#F6ECD9;margin-right:10px;display:block}
@media(max-width:599px){
  /* Die Artikelzeile ist am Handy ein Raster (Einbau 11). Das Bild steht
     links neben dem Namen, Menge und Preis bleiben darunter wie gehabt. */
  body:has(#k-posten) .k-wk-position{grid-template-columns:auto 1fr auto}
  body:has(#k-posten) .k-wk-position__bild{grid-row:1 / span 2;grid-column:1;
    align-self:start;margin-right:0;width:46px;height:58px}
  body:has(#k-posten) .k-wk-position__name{grid-column:2 / -1}
  body:has(#k-posten) .k-wk-menge{grid-column:2}
  body:has(#k-posten) .k-wk-position__rechts{grid-column:3}
}

/* --- Knopf "+ Weiteres Bild gestalten" (Punkt 5.4, Saskia 8.12) --- */
/* Mittig unter den Artikelzeilen, Champagner-Glas -- der Khaki-Knopf bleibt
   allein dem Kaufknopf. */
body:has(#k-posten) .k-weiteres{margin:16px 0 0;text-align:center}
body:has(#k-posten) .k-weiteres__knopf{display:inline-block}

/* --- Vorschaubild in der Motiv-Karte (64 x 80, Punkt 5.2) --- */
body:has(#k-posten) .k-karte-vorschau{display:flex;align-items:center;gap:10px;
  margin:0 0 8px}
body:has(#k-posten) .k-karte-vorschau__bild{width:64px;height:80px;flex:none;
  object-fit:cover;border-radius:6px;border:1px solid rgba(43,36,24,.18);
  background:#F6ECD9;display:block}
body:has(#k-posten) .k-karte-vorschau .k-hilfe{margin:0}

/* --- Ein Wandbild in der Karte --- */
body:has(#k-posten) .k-wandbild + .k-wandbild{margin-top:14px}
/* Die Ueberschrift "Bild N von M" ist im Einbau-11-Block grundsaetzlich
   ausgeblendet. Bei mehr als einem Exemplar wird sie hier wieder gezeigt --
   sonst waere nicht zu erkennen, welches Bild gemeint ist. */
body:has(#k-posten) .k-motiv-karte .k-foto-bereich__titel--mehrere{display:block;
  margin:0 0 8px}

/* --- Stand des Fotos --- */
body:has(#k-posten) .k-foto-stand__zeile{display:flex;align-items:center;gap:8px;
  margin:0;font-size:.92rem;line-height:1.5}
body:has(#k-posten) .k-foto-stand__zeile--da{color:#4A4A2E;font-weight:600}
body:has(#k-posten) .k-foto-stand__zeile--folgt{color:#5A4E3C}
body:has(#k-posten) .k-foto-stand__haken{width:18px;height:18px;flex:none;
  color:#6B6A45}
body:has(#k-posten) .k-foto-stand__vorschau{display:flex;align-items:center;
  gap:8px;margin:8px 0 0}
body:has(#k-posten) .k-foto-stand__bild{width:46px;height:58px;flex:none;
  object-fit:cover;border-radius:6px;border:1px solid rgba(43,36,24,.18);
  background:#F6ECD9;display:block}
body:has(#k-posten) .k-foto-stand__vorschau .k-hilfe{margin:0}

/* --- Gezeigte Angabe mit kleinem "aendern" (Punkt 5.3) --- */
/* Die Angabe und ihr kleines "aendern" stehen in EINER Textzeile und
   brechen zusammen um -- als Flex-Zeile landete das "aendern" am Handy in
   einer eigenen Zeile und die Karte wurde dadurch fast doppelt so hoch
   (beim Nachmessen gefunden: 96 px je Angabe statt 48). Saskias Ziel ist
   eine Karte von rund 420 px statt 852 (8.13). */
body:has(#k-posten) .k-angabe{display:block;margin:8px 0 0;
  font-size:.92rem;line-height:1.5;overflow-wrap:anywhere}
body:has(#k-posten) .k-angabe__text{display:inline}
body:has(#k-posten) .k-angabe__punkt{color:#8C6F45}
/* Trennpunkt und "aendern" gehoeren zusammen -- ohne das hier landete
   der Punkt am Zeilenanfang und das Wort darunter. */
body:has(#k-posten) .k-angabe__aendern{white-space:nowrap}
body:has(#k-posten) .k-angabe .k-stil-aendern{display:inline;vertical-align:baseline}

/* --- Eingeklappte Text-Knoepfe (Punkt 5.3) --- */
body:has(#k-posten) .k-textknopf-zeile{margin:10px 0 0}
body:has(#k-posten) .k-textknopf{font-size:.86rem;padding:8px 14px}

/* --- Lieferland bei der Adresse (Punkt 5.5) --- */
body:has(#k-posten) .k-lieferland{display:flex;align-items:baseline;gap:8px;
  flex-wrap:wrap;margin:14px 0 0;font-size:.92rem;line-height:1.5}
body:has(#k-posten) .k-plz-warnung{margin:6px 0 0}

/* --- Kasten "Deine Daten" zweispaltig (Punkt 5.6, Saskia 8.16) --- */
body:has(#k-posten) .k-daten__kopf{display:flex;align-items:baseline;
  justify-content:space-between;gap:10px;margin:0 0 10px}
body:has(#k-posten) .k-daten__kopf .k-feld-label{margin:0}
body:has(#k-posten) .k-daten{display:grid;grid-template-columns:1fr 1fr;
  gap:10px 18px;margin:0}
body:has(#k-posten) .k-daten__spalte{display:block;min-width:0}
body:has(#k-posten) .k-daten__titel{display:block;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:#8C6F45;font-weight:600;
  margin-bottom:4px}
body:has(#k-posten) .k-daten__zeile{display:block;font-size:.92rem;
  line-height:1.55;overflow-wrap:anywhere}
@media(max-width:599px){
  /* Handy: Die beiden Spalten bleiben NEBENEINANDER. Untereinander gestellt
     war der Kasten beim Nachmessen 253 px hoch -- mehr als die 225, die
     Saskia zu hoch fand (8.16). Nebeneinander sind es rund 150 px, und
     "zweispaltig" ist ohnehin genau das, was der Auftrag verlangt. Etwas
     weniger Luft zwischen den Spalten, damit die laengste Zeile (die
     E-Mail-Adresse) nicht unnoetig oft umbricht. */
  body:has(#k-posten) .k-daten{grid-template-columns:1fr 1fr;gap:8px 12px}
  body:has(#k-posten) .k-daten__titel{font-size:.62rem;letter-spacing:.1em}
  body:has(#k-posten) .k-daten__zeile{font-size:.84rem;line-height:1.5}
}

/* --- Hinweis zur Nachfrage unter dem Bestell-Knopf (Punkt 5.7) --- */
body:has(#k-posten) .k-nachfragehinweis{margin:10px auto 0;max-width:46em;
  text-align:center;font-size:.76rem;line-height:1.55;color:#6B5D48}

/* Der Foto-Bereich traegt jetzt nur noch eine Zeile (kein Hochlade-Feld mehr)
   -- die alten Abstaende waren fuer ein ganzes Formular gedacht. Enger, damit
   die Karte am Handy auf Saskias Zielhoehe kommt (8.13: rund 420 px statt
   852). Der Einbau-11-Block, der Farbe und Ecken setzt, bleibt unberuehrt. */
body:has(#k-posten) .k-motiv-karte .k-foto-bereich{padding:12px 14px;
  margin-top:10px}
/* STOLZ-UMBAU Phase 23: Ende Einbau-14-Block */

/* STOLZ-UMBAU Phase 18 ANFANG: Oliv-Farben auch in styles.css (fuer die Kaufstrecke) */
/* ============================================================================
   CANVASORY.DE (STOLZ) — FARBEN OLIV · ENTWURF 05.10.2026 (Claude)
   ----------------------------------------------------------------------------
   Wird als LETZTE Stildatei geladen und legt die Oliv-Farbwelt ueber den
   Unvergessen-Aufbau. Seitenton B #5C5A39 (Empfehlung; A #6F6C47 und
   C #524F32 siehe _entwurf\farbentwurf-oliv.html). Saskia entscheidet.
   Feste Vorgaben (Uebergabe 05.10., Teil 3):
   - Kaufknopf = Champagner-Beige-Glas (das Hellste im Bild)
   - Nebenknoepfe = Olivglas eine Stufe heller als die Seite, feine Goldkante,
     Creme-Schrift; gewaehlter Zustand noch etwas heller mit Goldkante und ✓
   Kasse, Danke-, Upload- und Bewertungsseite sind gesperrt und laden diese
   Datei NICHT.
   ============================================================================ */
:root:root{
  color-scheme: dark;
  --linie:#7E7A52; --leise:#DCD3B8; --oliv:#5C5A39; --creme:#F6EFDF;
  --grund:#5C5A39; --grund-rgb:92,90,57;
  --grund-weich:#524F32;           /* Karten: eine Stufe DUNKLER als die Seite (Ton in Ton) */
  --grund-linie:#7E7A52;
  --text:#F6EFDF;                  /* 6,16:1 auf --grund */
  --text-leise:#DCD3B8;            /* 4,72:1 */
  --text-gedaempft:#D6CFB2;        /* KI-Hinweis auf --fuss-grund */
  --gold:#C9A45C; --gold-tief:#D9B97C; --gold-dunkel:#EDD49A;   /* Kleinzeilen 4,87:1 */
  --fuss-grund:#4A4830;
  --zier:#B5AF84; --zier-dunkel:#CFC9A6;
  /* eigene Namen fuer diese Datei */
  --s-neben1:#77744C; --s-neben2:#66633F;
  --s-wahl1:#77744C;  --s-wahl2:#646140;
  --s-karte:rgba(246,239,223,.07);
  --s-wand:#2B2918; --s-wand-weich:rgba(22,20,8,.62);
}
html,body{background:var(--grund) !important;color:var(--text)}

/* ---------- Kaufknopf: Champagner-Beige-Glas ---------- */
.knopf--gold,a.knopf--gold,button.knopf--gold,
body[data-seite="gestalten"] .knopf,.mat .knopf{
  color:#3E3320 !important;border:1px solid #B8955A !important;border-radius:14px;font-weight:600;
  background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.07) 100%),
             linear-gradient(135deg,#FCF3DF 0%,#EFD8AA 52%,#D9B97C 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(110,80,30,.24),0 4px 10px rgba(20,18,6,.35) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.45) !important;
}
.knopf--gold:hover,body[data-seite="gestalten"] .knopf:hover{filter:brightness(1.04)}

/* ---------- Nebenknoepfe: Olivglas mit feiner Goldkante ---------- */
.erinnern__knopf,
.bew__nachladen .knopf--umriss,#bw-nachladen-knopf,
a.knopf--umriss[data-i18n="faqk.mehr"],a.knopf--umriss[data-i18n="mem.cta"],
.knopf--umriss,.erinnern .chip,.gk__chips .chip,
body[data-seite="gestalten"] .wunsch-auf,#matAuf,.formate button{
  color:#F6EFDF !important;border:1px solid rgba(201,164,92,.7) !important;
  background:linear-gradient(rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.08) 100%),
             linear-gradient(135deg,var(--s-neben1) 0%,var(--s-neben2) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 4px rgba(0,0,0,.18),0 4px 10px rgba(20,18,6,.28) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.3) !important;
}
.erinnern .chip.an,.gk__chips .chip.an,.formate button.an{
  border:2px solid #E6C680 !important;font-weight:600;
  background:linear-gradient(rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 34%,rgba(0,0,0,.06) 100%),
             linear-gradient(135deg,var(--s-wahl1) 0%,var(--s-wahl2) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 4px rgba(230,198,128,.28),0 0 14px rgba(230,198,128,.35) !important;
}

/* ---------- Kopfzeile: dunkleres Oliv, wie der Cookie-Banner ---------- */
header.kopf,.kopf{background:linear-gradient(180deg,#4F4D33 0%,#4A4830 100%) !important;background-image:none;border-bottom:1px solid rgba(201,164,92,.28)}
header .nav > a.nav--rechner,.kopf__menue{color:var(--text) !important}
.kopf__rechts .sprache button,.sprache button{color:var(--text-leise) !important}
.kopf__rechts .sprache button[aria-pressed="true"],.sprache button[aria-pressed="true"]{color:#EDD49A !important;background:rgba(246,239,223,.08) !important}
a.sprung{background:#4A4830;color:var(--text)}

/* ---------- Grosse Karten Ton in Ton (statt Creme) ---------- */
.erinnern__karte,.gk__karte,.gs-kachel{background:#4A4830 !important;border:1px solid rgba(201,164,92,.3);color:var(--text)}
.gs-kachel__t b{color:var(--text) !important}
.gs-kachel__t span{color:var(--text-leise) !important}
.gk__titel,.gk__text,.gk__frage,.gk__unter{color:var(--text) !important}
.gs-frist b{color:#EDD49A !important}

/* ---------- Texte, die auf Sand fest dunkel gesetzt waren ---------- */
.ki-hinweis,.fuss .ki-hinweis,.fuss .fuss__schluss .ki-hinweis{color:var(--text-gedaempft) !important}
.kachel__inhalt h3,#tw-raster a.kachel[aria-current="true"] .kachel__inhalt h3{color:var(--text) !important}
.seitenkopf__textspalte h1 em,h1 em{color:var(--text-leise) !important}
.wandel__hinweis,.stil-beschreibung,.seitenkopf__beschreibung p{color:var(--text-leise) !important}
.mehrlesen,.gs-liste a{color:#EDD49A !important}
.faq details p{color:var(--text-leise) !important}
.haken svg,.vertrauen svg,.hero svg.haken,.seitenkopf svg{color:var(--text-leise)}

/* ---------- Geschenk-Erinnerung (gross und als Streifen) ---------- */
.erinnern__titel,.erinnern__frist,.erinnern__danke,.erinnern-band__titel{color:var(--text) !important}
.erinnern__text,.erinnern__frage,.erinnern__datum,.erinnern__oder,.erinnern__immer-text,
.erinnern__ok,.erinnern__vorher,.erinnern__klein,.erinnern-band__satz,.erinnern-band__gs{color:var(--text-leise) !important}
.erinnern__frist b{color:#EDD49A !important}
.erinnern-band__karte{background:#4A4830 !important;border:1px solid rgba(201,164,92,.3)}
.erinnern-band__gs:hover{color:#EDD49A !important}
.erinnern-pop__zu{background:#66633F !important;color:var(--text) !important;border:1px solid rgba(201,164,92,.5)}
.gk__hinweis,.gk__klein{color:var(--text-leise) !important}

/* ---------- Generator (gestalten.html) ---------- */
body[data-seite="gestalten"] .kopf .schliessen,.zurueck,.stilzeile button,.stilzeile .t,
.matzeile,.matzeile button,.mat-vergleich button,.staerken .st-text,.vid-link,.korb .zweit,
body[data-seite="gestalten"] .foto-hinweis,#unterFoto.wichtig,
body[data-seite="gestalten"] .schritt[data-s="1"] .wunsch-auf span+span{color:var(--text-leise) !important}
.stilzeile .t b,body[data-seite="gestalten"] .schritt[data-s="1"] .wunsch-auf span{color:var(--text) !important}
.kopf .schliessen{border-color:rgba(201,164,92,.5) !important}
.beleg .sterne,.bf-kopf .sterne,.rez__sterne{color:#E6C680 !important}
.staerken .st-hinweis{color:#EDD49A !important}
.drop,.vorschau .rahmen,.stimme,.karte,.zusammen,.fotogitter,.son-ablauf li{background:rgba(246,239,223,.07) !important}
.drop:hover,.karte:hover{background:rgba(246,239,223,.12) !important}
.karte.gewaehlt{background:rgba(246,239,223,.15) !important}
.leiste{background:rgba(74,72,48,.97) !important;border-top:1px solid rgba(201,164,92,.3)}
body[data-seite="gestalten"] .rez{background:#524F32 !important}
body[data-seite="gestalten"] .rez blockquote,.rez__fuss .siegel{color:var(--text-leise) !important}
.wunsch-feld textarea,#sonForm input,.lv-namefeld input,.son-feld input{background:#FBF6EC !important;color:#2B2418 !important}
.son-staerken button{color:#F6EFDF !important;border:1px solid rgba(201,164,92,.7) !important;
  background:linear-gradient(135deg,var(--s-neben1),var(--s-neben2)) !important}
/* Etiketten und Fortschritt: kleines Champagner statt Khaki (Khaki waere auf Oliv unsichtbar) */
.fort span.an,.marke-tag,.extra.gewaehlt .haken,.karte.inkl .haken{
  background:linear-gradient(135deg,#EFD8AA 0%,#D9B97C 100%) !important;color:#3E3320 !important}
.extra .haken{color:#3E3320 !important}
.beleg .sterne{color:#EDD49A !important}
body[data-seite="gestalten"] .schritt[data-s="1"] .wunsch-auf span+span,#wunschAuf span+span{color:#F6EFDF !important;opacity:.92}

/* ---------- Sonderanfertigung ---------- */
.son-mat__satz,.grund__text{color:var(--text-leise) !important}
.son-mat__liste b,.ablauf__gitter .schritt h3,.grund__titel{color:var(--text) !important}
.ablauf__gitter .schritt__nr{color:#EDD49A !important}

/* ---------- Materialseite ---------- */
.mat .ideal,.mat .ideal b,.vergleich .tabelle .z,.vergleich .tabelle .w,.vergleich .tabelle .w span,
.reihe .karte p{color:var(--text-leise) !important}
.vergleich .tabelle .k,.reihe .karte b{color:var(--text) !important}
.vergleich .tabelle .bald{color:#EDD49A !important}
.mat .ideal{background:rgba(246,239,223,.07) !important}
.tabelle .k{background:#4A4830 !important}
.tabelle .k:first-child{background:transparent !important}
.son-karte,.son-kopf ~ .abschnitt .ablauf__gitter .schritt,.son-kopf ~ .abschnitt .gruende__gitter .grund{
  background:#4A4830 !important;border:1px solid rgba(201,164,92,.3)}
.son-karte .son-feld input{background:#FBF6EC !important;color:#2B2418 !important}
.tabelle{background:#4A4830 !important;border:1px solid rgba(201,164,92,.3)}
.tabelle>div{border-top-color:rgba(201,164,92,.22) !important}
.tabelle .z,.tabelle .w,.tabelle .w span{color:var(--text-leise) !important}
.passt .karte{background:#4A4830 !important;border:1px solid rgba(201,164,92,.3)}
.passt .karte p,.mat .ideal,.mat .ideal b{color:var(--text-leise) !important}
.mat .ideal{background:#4A4830 !important}
/* Sonderanfertigung: Texte in der jetzt dunklen Anfrage-Karte */
.son-karte__titel,.son-feld .lbl,.son-karte label{color:var(--text) !important}
.son-karte__unter,.son-staerke-klein,.son-klein,.son-karte p,.son-kopf ~ .abschnitt .ablauf__gitter .schritt p{color:var(--text-leise) !important}

/* ---------- Sets ---------- */
.paket__marke,.paket__spar,.paket__nehmen{color:#EDD49A !important}
.paket__was,.bundles .konf__fuss,.konf__fuss{color:var(--text-leise) !important}

/* Startseite: jeder Satz der Ueberschrift auf eigener Zeile (Saskia 28.09.) */
.hero h1 .satz{display:block}

/* Haken-Zeichen: Oliv waere auf Oliv unsichtbar */
.hero-vertrauen svg,#ablauf .band svg{color:var(--text-leise) !important}

/* Generator Schritte 2-4 */
.wand .mass--bild span,.wand .mass--sofa span{color:#2B2418 !important}
.karte.gewaehlt{background:rgba(246,239,223,.10) !important}
.karte .info,.karte.extra .info,.stimme cite,.z-kopf small,.zusammen .lieferzeit,.zusammen p{color:#E9E0C8 !important}
.karte.gewaehlt .titel,.karte.gewaehlt .preis{color:var(--text) !important}
.stimme .sterne{color:#EDD49A !important}
a.sonder,.sonder b,.sonder span,.sonder p{color:var(--text) !important}
.stimme,.zusammen,.karte{background:rgba(246,239,223,.05) !important}
.karte.gewaehlt .info{color:var(--text) !important}

/* STOLZ-UMBAU Phase 16 E+F: Olivglas, gewaehlt dunkles Oliv, Erinnere-mich dunkel, Anderer Betrag wie Betraege */
/* Neben- und Auswahlknoepfe */
.bew__nachladen .knopf--umriss,#bw-nachladen-knopf,
a.knopf--umriss[data-i18n="faqk.mehr"],a.knopf--umriss[data-i18n="mem.cta"],
.knopf--umriss,.erinnern .chip,.gk__chips .chip,.gk__frei,
body[data-seite="gestalten"] .wunsch-auf,#matAuf,.formate button{
  color:#F6EFDF !important;border:1px solid rgba(217,185,124,.5) !important;
  background:linear-gradient(rgba(255,255,255,.26) 0%,rgba(255,255,255,.04) 38%,rgba(0,0,0,.10) 100%),
             linear-gradient(160deg,#706D47 0%,#66633F 55%,#5F5D3B 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 4px rgba(0,0,0,.22),
             0 3px 8px rgba(20,18,6,.38) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35) !important;
}
.knopf--umriss:hover,.erinnern .chip:hover,.gk__chips .chip:hover,.formate button:hover{filter:brightness(1.07)}
/* Gewaehlt -- und alle Knoepfe der Geschenk-Erinnerung (wie auf Unvergessen) */
.erinnern .chip.an,.gk__chips .chip.an,.formate button.an,
.gk__frei:has(input:not(:placeholder-shown)),
.erinnern__knopf{
  color:#F6EFDF !important;font-weight:600;border:1.5px solid #D9B97C !important;
  background:linear-gradient(rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.14) 100%),
             linear-gradient(135deg,#55532F 0%,#45432A 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 4px rgba(0,0,0,.28),
             0 0 0 3px rgba(217,185,124,.25),0 3px 8px rgba(20,18,6,.4) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35) !important;
}
.erinnern__knopf:hover{filter:brightness(1.12)}
/* Feld "Anderer Betrag": Schrift hell wie auf den Betragsknoepfen */
.gk__frei input{color:#F6EFDF !important;background:none !important}
.gk__frei input::placeholder{color:#EFE7D2 !important;opacity:1}
.gk__frei span{color:#EFE7D2 !important}

/* STOLZ-UMBAU Phase 17: Leinwand-Kante -- Bild laeuft um die Kante, kein Strich */
/* Generator Schritt 1 (1:1 aus der Anweisung) */
.vorschau .rahmen{box-shadow:0 18px 26px -8px rgba(50,40,25,.45) !important}
.vorschau .rahmen.gk-leer{box-shadow:0 12px 22px -10px rgba(50,40,25,.35) !important}
.vorschau .rahmen.gk-mitkante{overflow:visible;box-shadow:
  11px 18px 22px -4px rgba(15,14,5,.75),
  4px 8px 12px rgba(15,14,5,.45),
  24px 42px 56px -10px rgba(15,14,5,.55) !important}
.vorschau .rahmen.gk-mitkante > img{border-radius:0 !important}
.gk-kanten{position:absolute;inset:0;pointer-events:none;display:block;z-index:0}
.gk-kante{position:absolute;overflow:hidden;display:block}
.vorschau .gk-kante img{position:absolute;display:block;max-width:none;object-fit:cover;box-shadow:none !important;border-radius:0 !important}
.gk-kante--rechts{top:0;left:100%;width:5px;height:100%;transform:skewY(45deg);transform-origin:left top;filter:brightness(.6) saturate(.9)}
.gk-kante--rechts img{right:0;top:0}
.gk-kante--unten{left:0;top:100%;width:100%;height:5px;transform:skewX(45deg);transform-origin:left top;filter:brightness(.5)}
.gk-kante--unten img{left:0;bottom:0}

/* Grosse Bilder mit Huelle .gk-bild (Stil-/Welt-Kacheln): Kante wie oben */
.gk-bild{position:relative;display:block;line-height:0}
.gk-bild .gk-kante img{position:absolute;display:block;max-width:none;object-fit:cover;box-shadow:none !important;
  border-radius:0 !important;transform:none !important;aspect-ratio:auto !important;margin:0 !important}
.gk-bild > img,.gk-bild > picture > img{border-radius:0 !important}
.stilwahl button img,.welt-kachel img,#themen .kachel__bild{box-shadow:10px 16px 20px -4px rgba(15,14,5,.75),4px 7px 11px rgba(15,14,5,.45),20px 34px 46px -10px rgba(15,14,5,.55) !important;border-radius:0 !important}
.stilwahl button:hover img,.stilwahl button:focus-visible img,.welt-kachel:hover img,.welt-kachel:focus-visible img{transform:none !important}
.stilwahl .gk-bild,.welt-kachel .gk-bild,#themen .kachel .gk-bild{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.stilwahl button:hover .gk-bild,.stilwahl button:focus-visible .gk-bild{transform:translateY(-4px) scale(1.03)}
.welt-kachel:hover .gk-bild,.welt-kachel:focus-visible .gk-bild{transform:translateY(-3px)}
#themen .kachel:hover .kachel__bild,#themen .kachel:focus-visible .kachel__bild{transform:none !important;
  box-shadow:10px 16px 20px -4px rgba(15,14,5,.75),4px 7px 11px rgba(15,14,5,.45),20px 34px 46px -10px rgba(15,14,5,.55) !important}
#themen .kachel:hover .gk-bild,#themen .kachel:focus-visible .gk-bild{transform:translateY(-6px) scale(1.03)}
#themen .kachel__bild{border-radius:0 !important}
@media(prefers-reduced-motion:reduce){.gk-bild{transition:none !important}
  .stilwahl button:hover .gk-bild,.welt-kachel:hover .gk-bild,#themen .kachel:hover .gk-bild{transform:none}}

/* Kleine Bildchen: nur weicher Schatten, kein Strich */
.stilzeile img,.stimme img,.karte .vbild,.zusammen .z-kopf img,.rez__foto,
.seitenkopf .bsp-daumen img,.seitenkopf .bsp-reihe--motive .stil-einzel-klein__knopf img{
  box-shadow:3px 5px 8px rgba(15,14,5,.55) !important}
.vid-buehne video,.tw-video,.tw-video:hover,.tw-video:focus-visible{box-shadow:10px 16px 20px -4px rgba(15,14,5,.75),4px 7px 11px rgba(15,14,5,.45),20px 34px 46px -10px rgba(15,14,5,.55) !important}

/* Sofa-Wand: Szene ohne Strich; Bild je nach Material */
.wand{box-shadow:0 18px 26px -8px rgba(10,9,3,.45) !important}
.wand .bild{box-shadow:8px 13px 16px -3px rgba(40,30,15,.62),3px 5px 8px rgba(40,30,15,.38),16px 28px 36px -8px rgba(40,30,15,.4) !important}
.wand .bild[data-mat="poster"]{box-shadow:4px 7px 10px -2px rgba(40,30,15,.5),2px 3px 5px rgba(40,30,15,.3) !important}
.wand .bild[data-mat="leinwand"]{container-type:size;overflow:visible}
.wand .bild[data-mat="leinwand"]::before,.wand .bild[data-mat="leinwand"]::after{
  content:"";position:absolute;pointer-events:none;background-image:inherit;background-repeat:no-repeat;
  background-size:100cqw 100cqh}
.wand .bild[data-mat="leinwand"]::before{top:0;left:100%;height:100%;width:calc(100cqw * 4 / var(--breite-cm, 60));
  background-position:right top;transform:skewY(45deg);transform-origin:left top;filter:brightness(.6) saturate(.9)}
.wand .bild[data-mat="leinwand"]::after{left:0;top:100%;width:100%;height:calc(100cqw * 4 / var(--breite-cm, 60));
  background-position:left bottom;transform:skewX(45deg);transform-origin:left top;filter:brightness(.5)}


/* ---------- Kaufstrecke in Oliv (Farben wie auf der ganzen Seite festgelegt; Formen wie Unvergessen) ---------- */
/* Text ausserhalb der Karten -- alle Seiten der Kaufstrecke */
.kasse .augbraue{color:#EDD49A !important}
.kasse h1,.kasse .titel{color:#F6EFDF !important}
.kasse .vorspann,.kasse .k-haupt > section > p{color:#F6EFDF !important}
body:not(:has(#k-posten)) .kasse :is(form,.k-feld) :is(p,span,label,legend,strong,b,div){color:#F6EFDF !important}
body:not(:has(#k-posten)) .kasse .k-hilfe{color:#DCD3B8 !important}
body:not(:has(#k-posten)) .kasse :is(.k-neben,.k-foto-bereich){background:#4A4830 !important;border:1px solid rgba(201,164,92,.3) !important;border-radius:10px}
body:not(:has(#k-posten)) .kasse :is(.k-neben,.k-foto-bereich) :is(p,span,label,strong,b,h2,h3,li,div){color:#F6EFDF !important}
body:not(:has(#k-posten)) .kasse :is(.k-neben,.k-foto-bereich) .k-hilfe{color:#DCD3B8 !important}
body:not(:has(#k-posten)) .kasse :is(.k-neben,.k-foto-bereich) a{color:#EDD49A !important}
.kasse :is(input,select,textarea){color:#2B2418 !important}
.kasse .k-fehler{color:#F2B8A8 !important}

/* Kasse: Karten Ton in Ton (dunkles Oliv, feine Goldkante), Ecken 10 px wie Unvergessen */
body:has(#k-posten) .k-wk-position,body:has(#k-posten) .k-posten,body:has(#k-posten) .k-neben,
body:has(#k-posten) .k-motiv-karte,body:has(#k-posten) .k-felder,body:has(#k-posten) #schritt-1 > .k-feld,
body:has(#k-posten) #k-adress-uebersicht.k-adress-uebersicht,body:has(#k-posten) main .k-pflicht{
  background:#4A4830 !important;border:1px solid rgba(201,164,92,.3) !important;border-radius:10px;color:#F6EFDF !important}
body:has(#k-posten) :is(.k-wk-position,.k-posten,.k-neben,.k-motiv-karte,.k-felder,#schritt-1 > .k-feld,#k-adress-uebersicht,main .k-pflicht)
  :is(p,span,label,strong,b,h2,h3,h4,legend,li,div,dt,dd,output,small){color:#F6EFDF !important}
body:has(#k-posten) :is(.k-wk-position,.k-posten,.k-neben,.k-motiv-karte,.k-felder,#schritt-1 > .k-feld,#k-adress-uebersicht,main .k-pflicht)
  :is(.k-hilfe,small,.k-versprechen){color:#DCD3B8 !important}
body:has(#k-posten) .k-stil-aendern,body:has(#k-posten) .k-neben a,body:has(#k-posten) .k-felder a{color:#EDD49A !important}
body:has(#k-posten) .k-foto-bereich{background:rgba(0,0,0,.14) !important;border:1px solid rgba(201,164,92,.25) !important;border-radius:8px}
body:has(#k-posten) main input[type=checkbox]{border-color:#D9B97C !important}
body:has(#k-posten) .k-wk-position__entfernen{color:#DCD3B8 !important}
/* Felder bleiben hell (wie ueberall auf canvasory.de), 8 px Ecken aus dem Unvergessen-Block */

/* Neben- und Mengenknoepfe: Olivglas; Kaufknopf bleibt Champagner (.knopf--gold) */
body:has(#k-posten) .knopf:not(.knopf--gold),body:has(#k-posten) .k-wk-menge__knopf,
body:not(:has(#k-posten)) .kasse .knopf:not(.knopf--gold){
  color:#F6EFDF !important;border:1px solid rgba(217,185,124,.5) !important;
  background:linear-gradient(rgba(255,255,255,.26) 0%,rgba(255,255,255,.04) 38%,rgba(0,0,0,.10) 100%),
             linear-gradient(160deg,#706D47 0%,#66633F 55%,#5F5D3B 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 4px rgba(0,0,0,.22),0 3px 8px rgba(20,18,6,.38) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35) !important}

/* Schritte: goldene Zierlinie bleibt; Knoepfe in den Farben der Seite */
body:has(#k-posten) .k-marken li span{color:#DCD3B8 !important}
body:has(#k-posten) .k-marken li::before{color:#F6EFDF !important;border:1px solid rgba(217,185,124,.5) !important;
  background:linear-gradient(rgba(255,255,255,.26) 0%,rgba(255,255,255,.04) 45%,rgba(0,0,0,.12) 100%),#66633F !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 3px rgba(0,0,0,.22),0 2px 5px rgba(10,9,3,.35) !important}
body:has(#k-posten) .k-marken li[data-stand="aktiv"]::before{font-weight:700;border:1.5px solid #D9B97C !important;
  background:linear-gradient(rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 45%,rgba(0,0,0,.14) 100%),#45432A !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 3px rgba(217,185,124,.28),0 2px 5px rgba(10,9,3,.4) !important}
body:has(#k-posten) .k-marken li[data-stand="aktiv"] span{color:#F6EFDF !important;font-weight:600}
body:has(#k-posten) .k-marken li[data-stand="fertig"]::before{color:#EDD49A !important;border:1px solid #D9B97C !important}

/* STOLZ-UMBAU Phase 18 ENDE */

/* STOLZ-UMBAU Phase 23: neue Kassen-Teile aus Einbau 14 in Oliv */
/* Stil waehlen: Olivglas wie die Nebenknoepfe, gewaehlt dunkel mit Goldrand (Abnahme Variante E) */
body:has(#k-posten) .k-themen .k-thema{color:#F6EFDF !important;border:1px solid rgba(217,185,124,.5) !important;border-radius:12px !important;
  background:linear-gradient(rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 38%,rgba(0,0,0,.10) 100%),
             linear-gradient(160deg,#76734B 0%,#6A6741 55%,#615F3C 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 4px rgba(0,0,0,.18),0 3px 8px rgba(15,14,5,.4) !important}
body:has(#k-posten) .k-themen .k-thema[aria-pressed="true"]{border:1.5px solid #D9B97C !important;
  background:linear-gradient(rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.12) 100%),#45432A !important;
  box-shadow:0 0 0 3px rgba(217,185,124,.25),0 3px 8px rgba(15,14,5,.45) !important}
/* Ankreuz-Zeilen, Rechtszeile, Nachfrage-Hinweis, Fehler: lesbar auf Oliv */
body:has(#k-posten) .k-kenntnis,body:has(#k-posten) .k-kenntnis span{color:#F6EFDF !important}
body:has(#k-posten) .k-kenntnis a,body:has(#k-posten) .k-rechtszeile a{color:#EDD49A !important}
body:has(#k-posten) .k-rechtszeile,body:has(#k-posten) .k-nachfragehinweis{color:#DCD3B8 !important}
body:has(#k-posten) .k-fehler,body:has(#k-posten) #k-plz-warnung{color:#F7C9BB !important}
/* Gutschein, Foto-Stand, gezeigte Angaben, "Deine Daten" */
body:has(#k-posten) .k-zeile--gutschein span:last-child{color:#EDD49A !important}
body:has(#k-posten) .k-gutschein-hinweis{color:#DCD3B8 !important}
body:has(#k-posten) .k-foto-stand__zeile--da{color:#F6EFDF !important}
body:has(#k-posten) .k-foto-stand__zeile--folgt{color:#DCD3B8 !important}
body:has(#k-posten) .k-foto-stand__haken,body:has(#k-posten) .k-angabe__punkt,body:has(#k-posten) .k-daten__titel{color:#EDD49A !important}
/* STOLZ-UMBAU Phase 23: Ende Oliv Kasse */

/* STOLZ-UMBAU Phase 28: Gutschein-Plakette Beliebt buendig (Einbau 15, Punkt 4) */
.gk__chips .chip i{right:0}
@media (max-width:380px){.gk__chips .chip{padding-left:14px;padding-right:14px}}
/* ENDE Phase 28 */

/* STOLZ-UMBAU Phase 29: Bewertungskarten mittlere Breiten */
#bewertungen .rezensionen{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:1088px){ #bewertungen .rezensionen{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media(min-width:641px) and (max-width:899px){
  #bewertungen .rezensionen{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;justify-items:stretch}
  #bewertungen .rezensionen .rez{max-width:none}
}
@media(max-width:640px){ #bewertungen .rezensionen{grid-template-columns:minmax(0,1fr)} }
#bewertungen .rez{min-width:0}
/* Fuss ab 641 px: Raster "220px 1fr" -- auch hier darf die zweite Spalte nicht breiter werden als Platz da ist
   (zwischen 641 und ~680 px ragte die Zahlarten-Zeile 37 px heraus). */
@media(min-width:641px){ .fuss__inhalt{grid-template-columns:220px minmax(0,1fr)} .fuss__inhalt > *{min-width:0}
  .fuss__spalten{grid-template-columns:repeat(3,minmax(0,1fr))} .fuss__spalte{min-width:0;overflow-wrap:break-word} }
@media(min-width:641px) and (max-width:759px){ .fuss__spalten{column-gap:1rem} }
/* interne Seite Umsatz Norwegen: Eingabefeld darf schmaler werden (bis 360 px ragte der Knopf heraus) */
.iu-feld input{min-width:0}
.iu-feld .knopf{flex:none;min-width:0}
/* ENDE Phase 29 */

/* STOLZ-UMBAU Phase 30: upload-danke Punkte lesbar */
body[data-seite="upload"] .huelle > .k-versprechen,
body[data-seite="upload"] .huelle > .k-versprechen li{color:#F6EFDF}
body[data-seite="upload"] .huelle > .k-versprechen li::before{background:#D9B97C}
/* Saskia: "Den Startseitenknopf auf der Meldung haette ich gerne mittig." */
body[data-seite="upload"] .kasse .huelle > p:has(> a.knopf[href="index.html"]){text-align:center}
/* ENDE Phase 30 */

/* ============================================================================
   AUFTRAG 06.10.2026 — ERSTER BILDSCHIRM DER STARTSEITE (Handy + PC)
   ----------------------------------------------------------------------------
   Ziel: Der Kaufknopf steht am Handy vollstaendig im ersten Bildschirm, ohne
   dass irgendetwas angeschnitten wird oder die Seite seitlich scrollt.
   Gemessen wurde auf 360x643, 390x664, 390x630 und 384x700 (Handy) sowie
   1097x617, 1366x768 und 1920x1080 (PC).

   WAS DAFUER PASSIERT
   1  Die Kopfzeile wird am Handy flacher (56 statt 72 px). Das Logo bleibt
      mit 49 px Hoehe und AUTOMATISCHER Breite unverzerrt -- die alte Regel
      ".marke img{max-width:calc(52vw / var(--zf,1))}" durfte es auf schmalen Geraeten quetschen.
      Diese beiden Regeln gelten auf ALLEN Seiten, nicht nur auf der Startseite.
   2  Im Hero faellt der obere Innenabstand weg, die Zeilenabstaende werden
      enger, Ueberschrift und Preiszeile etwas kleiner.
   3  Die Unterzeile (.hero__unter) wandert per "order" ans ENDE des Stapels --
      also unter Kaufknopf, Haken und Nr.-1-Plakette. Vorher stand sie
      zwischen Bild und Preiszeile und schob den Knopf aus dem Bild.
   4  Deshalb wandert auch der Goldstrich mit: ueber der Unterzeile bleibt
      genau EINER (::before), der zweite (::after) entfaellt -- darunter steht
      ohnehin schon der Abschnitts-Strich. Zwischen Bild und Preiszeile, wo
      vorher die Unterzeile mit ihren Strichen stand, traegt jetzt die
      Preiszeile denselben Glas-Gold-Strich, in voller Breite.
   5  Am PC wird die Kopfleiste 80 px hoch (Logo 70 px), der Hero bekommt
      62 px seitlichen Innenabstand, der Kaufknopf 50 px Hoehe, und die
      Nr.-1-Plakette rueckt 18 px nach rechts. Ihre Positionierung bleibt
      unveraendert absolut -- nur ein transform kommt dazu.

   Die Grenze zwischen Handy und PC liegt hier bei 1023/1024 px, wie im
   Auftrag vorgegeben. Die aelteren Hero-Regeln der Seite enden bei 899 px;
   dieser Block steht bewusst am Dateiende und gewinnt daher gegen sie.
   ============================================================================ */

/* ---------------------------------------------------------------- HANDY --- */
@media(max-width:1023px){

  /* 1 — Kopfzeile und Logo. Gilt auf allen Seiten. */
  header.kopf .kopf__inhalt{height:56px;min-height:0}
  header.kopf .marke{padding:0;min-height:0}
  header.kopf .marke img{height:49px;width:auto;max-width:none;object-fit:contain}

  /* 2 — Hero: oben buendig an der Kopfzeile, enger Stapel. */
  body[data-seite="start"] .hero{padding-top:0;padding-bottom:10px}
  body[data-seite="start"] .hero__gitter{padding-inline:14px;row-gap:4px}
  body[data-seite="start"] .hero__gitter h1,
  body[data-seite="start"] .hero__gitter .hero__unter,
  body[data-seite="start"] .hero__gitter .preisanker{max-width:none}
  body[data-seite="start"] .hero__gitter .beleg{margin-top:-8px;font-size:14px}
  body[data-seite="start"] .hero__gitter h1{font-size:25.5px}
  body[data-seite="start"] .hero__gitter .wandel.wandel{
    width:184px;max-width:100%;margin-top:10px;margin-bottom:0}
  body[data-seite="start"] .hero__gitter .wandel .wandel__hinweis{font-size:11.5px}

  /* 4a — Preiszeile mit Goldstrich darueber, in voller Breite.
         Derselbe Strich wie bei .hero__unter::before (Abschnitt
         "4 GLAS-GOLD-STREIFEN" weiter oben), hier nur ohne Begrenzung
         auf 320 px. Die aeltere Handy-Regel setzt ihn auf "content:none";
         diese hier holt ihn zurueck. */
  body[data-seite="start"] .hero__gitter .preisanker{
    position:relative;padding-top:16px;font-size:14px}
  body[data-seite="start"] .hero__gitter .preisanker::before{
    content:"";position:absolute;left:50%;top:-6px;transform:translateX(-50%);
    width:100%;height:12px;pointer-events:none;
    background:
      radial-gradient(closest-side,rgba(240,225,185,.32),rgba(240,225,185,0)) center/80px 8px no-repeat,
      linear-gradient(90deg,rgba(170,128,78,0) 0%,rgba(170,128,78,.85) 18%,#C9AE78 45%,#D9C290 50%,#C9AE78 55%,rgba(170,128,78,.85) 82%,rgba(170,128,78,0) 100%) center/100% 1.5px no-repeat,
      linear-gradient(90deg,rgba(225,207,155,0) 0%,rgba(225,207,155,.14) 25%,rgba(225,207,155,.18) 50%,rgba(225,207,155,.14) 75%,rgba(225,207,155,0) 100%) center/100% 6px no-repeat}

  /* 2b — Kaufknopf: 45 px hoch, Inhalt mittig, volle Breite. */
  body[data-seite="start"] .hero__gitter .knopf--gold{
    height:45px;min-height:0;padding-block:0;width:100%;font-size:16px;
    flex:0 0 auto;
    display:flex;align-items:center;justify-content:center}

  /* 3/4b — Unterzeile ans Ende, darueber genau EIN Goldstrich.
            padding-top 21 px ueber dem Text; darunter 11 px plus die 10 px
            Innenabstand des Hero = 21 px bis zum Abschnitts-Strich. Der Text
            steht damit mittig zwischen den beiden Linien. */
  body[data-seite="start"] .hero__gitter .hero__unter{
    order:9;margin:22px 0 0;padding-top:21px;padding-bottom:11px;
    font-size:15px;line-height:1.36}
  body[data-seite="start"] .hero__gitter .hero__unter::after{content:none}
  /* Nachtrag 06.10.2026: derselbe Strich wie ueber der Preiszeile, also
     volle Breite. Die Grundregel begrenzt ihn unter 900 px auf 320 px. */
  body[data-seite="start"] .hero__gitter .hero__unter::before{width:100%}
}

/* ------------------------------------------------------------------- PC --- */
@media(min-width:1024px){
  header.kopf .kopf__inhalt{height:80px;min-height:0}
  header.kopf .marke img{height:70px;width:auto;max-width:none}
  /* Nachtrag 06.10.2026: KEIN fester Innenabstand mehr. Der Hero traegt
     damit wieder genau den Rand der .huelle -- denselben wie jeder
     Abschnitt darunter (var(--rand), mitwachsend). Vorher standen hier
     62 px fest; der Hero stand dadurch 5-7 px versetzt zum Rest. */
  body[data-seite="start"] .hero__gitter .knopf--gold{
    height:50px;min-height:0;padding-block:0;flex:0 0 auto;
    display:inline-flex;align-items:center;justify-content:center}
  /* Position bleibt absolut wie bisher -- nur 18 px nach rechts. */
  body[data-seite="start"] .hero__gitter .nr1-knopf--start{transform:translate(18px,0)}
}

/* ============================================================================
   AUFTRAG 06.10.2026, NACHTRAG E — GESCHENKE-SEITE: NUR NOCH EIN TRENNSTRICH
   ----------------------------------------------------------------------------
   Zwischen dem Seitenkopf (.gs-kopf) und "Fuer wen ist dein Geschenk?"
   (.gs-wen) standen DREI Linien dicht untereinander:

     1  .gs-frist::before   1 px Goldverlauf ueber der Zaehler-Zeile
     2  .gs-frist::after    1 px Goldverlauf unter der Zaehler-Zeile
     3  .gs-wen::before     der Glas-Gold-Trennstreifen des Abschnitts
                            (2 px, mit Lichtpunkt .gs-wen::after)

   Gemessen am Handy (390 px) lagen sie auf y = 739, 803 und 814 -- drei
   Striche auf 75 px. Es bleibt der dritte: der Glas-Gold-Trennstreifen, der
   auf der ganzen Seite zwischen allen Abschnitten steht. Die beiden Linien um
   die Zaehler-Zeile entfallen. Ihr Innenabstand bleibt, damit die Zeile
   gleich viel Luft behaelt wie vorher -- es verschiebt sich also nichts.
   ============================================================================ */
.gs-frist::before,.gs-frist::after{content:none}

/* ============================================================================
   KNOPF ZUR ZWEITEN SEITE (Auftrag 08.10.2026)
   ----------------------------------------------------------------------------
   Ein Glasknopf im Stil der Nr.-1-Plakette, der zur jeweils anderen Seite
   fuehrt. Die Stilwerte sind Wert fuer Wert aus .nr1-knopf uebernommen,
   stehen aber in EIGENEN Klassen -- an der Nr.-1-Plakette aendert sich
   dadurch nichts.
   Drei Stellen (layout.js): Startseite unter den Themenwelten, aufklappbares
   Menue (kleine Fassung), Fusszeile. Nicht im ersten Bildschirm, nicht auf
   Gedenken-Seiten, nicht in der Kaufstrecke.
   Verbindliche Vorlage (von Saskia abgenommen 08.10.2026):
   Canvasory-Archiv\berichte\auftraege\seitenwechsel-knopf-abgenommen-2026-10-08.html
   (Klassen .pl, .pl.goldglas, .pl.olivglas, .pl.klein, .quer)
   ============================================================================ */
.zweiteseite{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:100%;margin-top:24px;text-align:center;
}
.zweiteseite__satz{
  margin:0;font-family:var(--display);font-weight:400;font-size:20px;line-height:1.3;
  max-width:26ch;text-wrap:balance;
}
/* Der Knopf: laenglich, nie breiter als der Bildschirm, Tippflaeche >= 44 px */
.zweiteseite__knopf{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-sizing:border-box;min-height:46px;min-width:min(320px,100%);max-width:100%;
  padding:10px 22px 11px;border-radius:14px;
  text-decoration:none;text-align:center;line-height:1.2;transition:filter .3s ease;
  /* Gold-Glas -- dieselben Verlaeufe, Raender und Schatten wie .nr1-knopf */
  color:#3E3320;border:1px solid #B8955A;text-shadow:0 1px 0 rgba(255,255,255,.45);
  background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.07) 100%),
             linear-gradient(135deg,#FCF3DF 0%,#EFD8AA 52%,#D9B97C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(110,80,30,.24),0 4px 10px rgba(110,85,45,.2);
}
.zweiteseite__knopf:hover{filter:brightness(1.05)}
.zweiteseite__knopf:focus-visible{outline:2px solid #2B2418;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.zweiteseite__knopf{transition:none}}
.zweiteseite__a{
  font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#5A4A2C;
}
.zweiteseite__b{
  font-family:var(--display);font-weight:400;font-size:25px;line-height:1.1;
  letter-spacing:.02em;margin-top:2px;
}
.zweiteseite__c{
  font-family:var(--sans);font-size:11px;font-weight:500;margin-top:7px;padding-top:6px;
  position:relative;color:#4A3F2B;
}
.zweiteseite__c::before{
  content:"";position:absolute;top:0;left:50%;width:44px;height:1px;translate:-50% 0;
  background:linear-gradient(90deg,transparent,#A8833F,transparent);
}
/* Kleine Fassung fuer das aufklappbare Menue.
   Mindestbreiten: 320 px gross, 271 px klein. Der Auftrag nennt 300 bzw.
   236 px als MINDESTbreite und verlangt zugleich "auf beiden Seiten gleich
   breit" (Saskia). Die abgenommene Vorlage selbst ist ungleich breit: die
   laengere untere Zeile von canvasory.de ("Tiere / Familie / Hochzeit /
   Gedenken / hier entlang") braucht 320 bzw. 271 px, die kuerzere von
   Unvergessen nur 300 bzw. 236 px. Beide Seiten bekommen deshalb die
   BREITEREN Werte der Vorlage -- gleich breit, Mindestbreite erfuellt,
   kein Wert erfunden. */
.zweiteseite__knopf--klein{padding:7px 16px 8px;min-width:min(271px,100%)}
.zweiteseite__knopf--klein .zweiteseite__b{font-size:19px}
.zweiteseite__knopf--klein .zweiteseite__c{margin-top:5px;padding-top:5px}
@media(max-width:899px){
  .zweiteseite__satz{font-size:18px}
}
/* Schmale Fenster (Saskia 09.10.2026): Am Handy brach die grosse Zeile
   "Canvasory Unvergessen" auf canvasory.de in zwei Zeilen um, der Knopf
   wurde dadurch hoeher als auf Unvergessen. Die grosse Zeile wird bis
   480 px deshalb auf BEIDEN Seiten gleich von 25 px auf 22 px verkleinert.
   Nachgemessen bei 360 px Fensterbreite: im Knopf stehen 266 px zur
   Verfuegung, "Canvasory Unvergessen" braucht bei 22 px noch 238 px
   (mit Theano Didot; mit der Ersatzschrift nur 222 px) -- also rund
   28 px Luft, kein Umbruch, nichts abgeschnitten. Am PC aendert sich
   nichts: dort bleibt es bei 25 px. Die kleine Fassung im Menue hat ihre
   eigene Groesse (19 px) und bleibt davon unberuehrt. */
@media(max-width:480px){
  .zweiteseite__b{font-size:22px}
}
/* Im aufklappbaren Menue: nur sichtbar, solange das Menue offen ist -- genau
   wie die uebrigen .nav--handy-Punkte. Die Kopfzeile und die waagerechte
   PC-Menueleiste bleiben unberuehrt (Saskia 08.10.2026). */
.nav .zweiteseite{display:none}
@media(max-width:1023px){
  body[data-menue="auf"] .nav .zweiteseite{
    display:flex;gap:10px;margin:18px 0 4px;
  }
  .nav .zweiteseite__satz{
    font-family:var(--sans);font-weight:500;font-size:14px;color:var(--text-leise);max-width:none;
  }
}
/* Im Fuss: steht ueber der Zeile mit den Rechtsverweisen */
.fuss .zweiteseite{margin-top:1.75rem}
@media(min-width:641px){
  /* Der Fuss ist am Rechner ein Raster mit benannten Feldern. Ohne eigenes
     Feld landet der Knopf in der 220 px schmalen Logospalte und wird dort
     gedrungen. Er bekommt deshalb eine eigene Rasterzeile ueber "recht" --
     nur dann, wenn er auf dieser Seite ueberhaupt da ist (:has), damit auf
     den Seiten ohne Knopf keine leere Zeile und kein zusaetzlicher Abstand
     entsteht. Die uebrigen Felder bleiben Zeile fuer Zeile unveraendert. */
  .fuss__inhalt:has(> .zweiteseite){
    grid-template-areas:
      "marke spalten"
      "zahl  zahl"
      "seo   seo"
      "quer  quer"
      "recht recht"
      "schluss schluss";
  }
  .fuss__inhalt > .zweiteseite{grid-area:quer}
}

/* ============================================================================
   AUFTRAG "Feinschliff gesamt -- Wegweiser, PC 85 %, Galerie, Nr.-1-Plakette,
   alle Seiten rund" (11.10.2026). Werte 1:1 aus der verbindlichen Vorlage
   VORLAGE-feinschliff-neu-2026-10-11.css (Canvasory-Archiv\berichte\auftraege),
   Selektoren an den echten Code angepasst. Gilt fuer beide Seiten; Stellen,
   die nur canvasory.de (dunkel) betreffen, haengen an
   html:has(link[href*="stolz-farben"]).
   ============================================================================ */

/* ===== TEIL A: Glasfeld "Live-Vorschau · sofort" (Gedenk-Seiten, Unvergessen) ===== */
.gl-weg{display:flex;flex-direction:column;align-items:stretch;gap:5px;box-sizing:border-box;color:#3E3320}
.gl-kopf{align-self:center;font-family:"Theano Didot","Times New Roman",serif;font-size:15px;line-height:1.05;letter-spacing:.03em;color:#2B2418;
 text-shadow:0 1px 0 rgba(255,250,236,.7);display:flex;align-items:center;gap:8px;white-space:nowrap;margin-bottom:-1px}
.gl-kopf::before,.gl-kopf::after{content:"";width:18px;height:1px;background:linear-gradient(90deg,transparent,#A8833F)}
.gl-kopf::after{background:linear-gradient(90deg,#A8833F,transparent)}
.gl-kopf b{font-weight:400;color:#A8833F}
.gl-weg__link{display:flex;align-items:center;gap:7px;color:#3E3320;text-decoration:none;font-family:Outfit,"Helvetica Neue",Arial,sans-serif;
 padding:4px 12px 4px 5px;border-radius:13px;text-shadow:0 1px 0 rgba(255,255,255,.4);
 background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.06) 100%),linear-gradient(135deg,#FCF3DF 0%,#F1DDB4 55%,#E2C68E 100%);
 border:1px solid #C3A46C;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(110,80,30,.16),0 3px 8px rgba(110,85,45,.16)}
.gl-t{display:flex;flex-direction:column;line-height:1.22;white-space:nowrap}
.gl-t strong{font-size:11px;font-weight:600}
.gl-t small{font-size:9.5px;font-weight:400;color:#5A4E3C}
.gl-weg__link:hover strong{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#A8833F}
.gl-weg__link:focus-visible{outline:2px solid #2B2418;outline-offset:3px}
.gl-pfeil{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
 background:radial-gradient(circle at 35% 30%,#FFFDF6 0%,#F6E7C6 60%,#E9CF9A 100%);border:1px solid #B8955A;box-shadow:0 1px 2px rgba(110,80,30,.22),inset 0 1px 0 #fff}
.gl-pfeil svg{width:11px;height:11px;fill:none;stroke:#9A7430;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.gl-weg__link--unten .gl-pfeil svg{transform:rotate(-90deg)}
.gl-hd{display:none}
@media(min-width:1040px){
 .seitenkopf__knoepfe:has(.gl-weg){position:relative}
 .seitenkopf__knoepfe .gl-weg{position:absolute;left:257px;right:-7px;margin:0 auto;top:calc(50% - 34px);width:max-content}
}
@media(min-width:900px) and (max-width:1039px){
 .seitenkopf__knoepfe:has(.gl-weg){display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
}
@media(max-width:1039px){
 .gl-weg__link--knopf .gl-pfeil svg{transform:rotate(90deg)}
 .gl-pc{display:none}.gl-hd{display:block}
}
@media(max-width:899px){
 .seitenkopf__gitter .gl-weg{order:8;align-self:center;margin:12px auto 4px}
}

/* ===== TEIL B: zwei Wegweiser-Zeilen (alle Seiten mit Nr.-1-Plakette) =====
   Helle Fassung (Unvergessen) als Grundregel, dunkle Werte der Vorlage fuer
   canvasory.de darunter. Masse ueberall gleich. */
.gl-zeilen{display:flex;flex-direction:column;gap:7px;margin:12px 0 2px;font-family:Outfit,"Helvetica Neue",Arial,sans-serif;width:max-content;max-width:100%}
.gl-z{display:flex;align-items:center;gap:9px;text-decoration:none;color:#2B2418}
.gl-zt{display:flex;flex-direction:column;line-height:1.25;text-wrap:balance}
.gl-zt strong{font-size:13px;font-weight:600;color:#2B2418;letter-spacing:.01em}
.gl-zt small{font-size:11.5px;color:#5A4E3C;white-space:nowrap}
.gl-z:hover strong{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#A8833F}
.gl-z:focus-visible{outline:2px solid #2B2418;outline-offset:3px;border-radius:6px}
.gl-zp{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
 background:radial-gradient(circle at 35% 30%,#FFFDF6 0%,#F6E7C6 60%,#E9CF9A 100%);border:1px solid #B8955A;box-shadow:0 1px 2px rgba(110,80,30,.22),inset 0 1px 0 #fff}
.gl-zp svg{width:13px;height:13px;fill:none;stroke:#9A7430;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
.gl-z--unten .gl-zp svg{transform:rotate(-90deg)}
.gl-zhd{display:none}
html:has(link[href*="stolz-farben"]) .gl-z{color:#F6EFDF}
html:has(link[href*="stolz-farben"]) .gl-zt strong{color:#FBF5E8}
html:has(link[href*="stolz-farben"]) .gl-zt small{color:rgba(246,239,223,.78)}
html:has(link[href*="stolz-farben"]) .gl-z:hover strong{text-decoration-color:#D9B97C}
html:has(link[href*="stolz-farben"]) .gl-z:focus-visible{outline-color:#F6EFDF}
html:has(link[href*="stolz-farben"]) .gl-zp{background:radial-gradient(circle at 35% 30%,#FFF8E6 0%,#EFD8AA 55%,#D2AE6E 100%);border:1px solid #E3C88F;box-shadow:0 1px 3px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.8)}
html:has(link[href*="stolz-farben"]) .gl-zp svg{stroke:#7A5A1E}
@media(max-width:899px){
 .seitenkopf__gitter .gl-zeilen{order:8;align-self:center;margin:12px auto 4px}
 .gl-zpc{display:none}.gl-zhd{display:block}
}

/* ===== TEIL D: GALERIE NEU (Vorschau 10.10.2026) ===== */
body[data-seite="galerie"] .seitenkopf .huelle,
.seitenkopf:has(+ .abschnitt .filter[data-i18n-aria="ugc.filterlabel"]) .huelle{text-align:center;display:flex;flex-direction:column;align-items:center}
body[data-seite="galerie"] .seitenkopf,
.seitenkopf:has(+ .abschnitt .filter[data-i18n-aria="ugc.filterlabel"]){padding-bottom:1.2rem}
body[data-seite="galerie"] .seitenkopf__text,
.seitenkopf:has(+ .abschnitt .filter[data-i18n-aria="ugc.filterlabel"]) .seitenkopf__text{margin-inline:auto;max-width:56ch;text-wrap:balance}
body[data-seite="galerie"] .seitenkopf__knoepfe,
.seitenkopf:has(+ .abschnitt .filter[data-i18n-aria="ugc.filterlabel"]) .seitenkopf__knoepfe{justify-content:center}
body[data-seite="galerie"] .seitenkopf ~ .abschnitt:has(.filter[data-i18n-aria="ugc.filterlabel"]),
.seitenkopf:has(+ .abschnitt .filter[data-i18n-aria="ugc.filterlabel"]) + .abschnitt{padding-top:1.2rem}
.filter[data-i18n-aria="ugc.filterlabel"]{justify-content:center}
.filter[data-i18n-aria="ugc.filterlabel"] button[aria-pressed="true"]{color:#2B2418 !important}
#werke.werke{display:flex !important;flex-wrap:wrap;justify-content:center;gap:12px}
#werke .werk{flex:0 0 calc((100% - 5*12px)/6);max-width:calc((100% - 5*12px)/6)}
#werke .werke__gruppe{flex:0 0 100%;text-align:center;font-family:"Theano Didot","Times New Roman",serif;font-size:23px;letter-spacing:.05em;
  text-transform:none;color:#2B2418;margin:1.6rem 0 .5rem;padding:0;position:relative;padding-bottom:14px;font-weight:400}
html:has(link[href*="stolz-farben"]) #werke .werke__gruppe{color:#EEE9DF}
#werke .werke__gruppe::after{content:"";position:absolute;left:50%;bottom:0;width:120px;height:2px;translate:-50% 0;
  background:linear-gradient(90deg,transparent,#B8955A 25%,#E3C88F 50%,#B8955A 75%,transparent);border-radius:2px}
#werke .werke__gruppe:first-child{margin-top:.4rem}
#werke .werk__name{text-align:center;padding-inline:2.6rem}
@media(max-width:899px){#werke .werk{flex-basis:calc((100% - 12px)/2);max-width:calc((100% - 12px)/2)}
  #werke .werke__gruppe{font-size:20px;margin-top:1.2rem}}
@media(min-width:900px) and (max-width:1039px){#werke .werk{flex-basis:calc((100% - 3*12px)/4);max-width:calc((100% - 3*12px)/4)}}
/* ===== GALERIE Nachschliff ===== */
body[data-seite="galerie"] .seitenkopf .augbraue,
.seitenkopf:has(+ .abschnitt .filter[data-i18n-aria="ugc.filterlabel"]) .augbraue{text-align:center;align-self:center}
#werke.werke{background:none !important;border:0 !important}
#werke .werke__gruppe{background:none !important}
#werke .werk{border-radius:10px;overflow:hidden}
#werke .werk__name{padding:.65rem .6rem .7rem;text-wrap:balance;line-height:1.3}
#werke .werk__gross{top:.5rem;bottom:auto;right:.5rem;width:30px;height:30px;min-width:30px;min-height:30px}
/* 30-px-Kreis, aber 44 px Tippflaeche (unsichtbar) -- wie bei Lupe/Pause im Seitenkopf */
#werke .werk__gross::before{content:"";position:absolute;inset:-7px}
/* ===== Filter-Chips: Luft nach unten, aktiver Chip lesbar ===== */
.filter[data-i18n-aria="ugc.filterlabel"],.bewblock .filter{margin-bottom:26px !important}
.bewblock .filter{justify-content:center}
.bewblock .filter button[aria-pressed="true"]{color:#2B2418 !important}

/* ===== TEIL E: NR.-1-PLAKETTE laenglich, ohne senkrechten Strich (nur PC ab 1040 px) ===== */
@media(min-width:1040px){
  .seitenkopf__knoepfe .nr1-knopf,.hero__knoepfe .nr1-knopf,.gs-kopf__plakette .nr1-knopf{display:inline-grid !important;grid-template-columns:auto auto !important;grid-template-rows:auto auto auto;column-gap:12px;row-gap:0;align-items:center;padding:9px 20px 9px !important}
  .seitenkopf__knoepfe .nr1-knopf b,.hero__knoepfe .nr1-knopf b,.gs-kopf__plakette .nr1-knopf b{display:contents !important}
  .seitenkopf__knoepfe .nr1-knopf::before,.hero__knoepfe .nr1-knopf::before,.gs-kopf__plakette .nr1-knopf::before{display:none !important;content:none !important}
  .seitenkopf__knoepfe .nr1-knopf .nr1-b,.hero__knoepfe .nr1-knopf .nr1-b,.gs-kopf__plakette .nr1-knopf .nr1-b{grid-column:1;grid-row:1 / 3;font-size:31px !important;margin:0 !important;line-height:1;font-family:"Theano Didot","Times New Roman",serif}
  .seitenkopf__knoepfe .nr1-knopf .nr1-a,.hero__knoepfe .nr1-knopf .nr1-a,.gs-kopf__plakette .nr1-knopf .nr1-a{grid-column:2 !important;grid-row:1;align-self:end;text-align:left;font-family:Outfit,"Helvetica Neue",Arial,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
  .seitenkopf__knoepfe .nr1-knopf .nr1-c,.hero__knoepfe .nr1-knopf .nr1-c,.gs-kopf__plakette .nr1-knopf .nr1-c{grid-column:2 !important;grid-row:2;align-self:start;text-align:left;font-family:"Theano Didot","Times New Roman",serif;font-size:15.5px;line-height:1.15}
  .seitenkopf__knoepfe .nr1-knopf span,.hero__knoepfe .nr1-knopf span,.gs-kopf__plakette .nr1-knopf span{grid-column:1 / 3 !important;grid-row:3;display:flex;flex-direction:row !important;gap:.35em;justify-content:center;margin-top:7px !important;padding-top:6px !important;font-size:9.5px !important}
}

/* ===== TEIL G: SONDERANFERTIGUNG "So laeuft es": kein dunkles Band hinter den Kacheln ===== */
.son-kopf ~ .abschnitt .ablauf__gitter{background:none !important;border:0 !important}
@media(min-width:1040px){.son-kopf ~ .abschnitt .ablauf__gitter{gap:24px !important}}

/* ===== TEIL F: BEWERTUNGEN-SEITE + SETS: keine Linien, runde Karten, Knopf unten ===== */
body:is([data-seite="sets"],[data-seite="bewertungen"]) .rezensionen{background:none !important;border:0 !important;gap:16px !important}
body:is([data-seite="sets"],[data-seite="bewertungen"]) .rezensionen::before{display:none !important}
body:is([data-seite="sets"],[data-seite="bewertungen"]) .rez{border-radius:16px !important;background:rgba(255,250,240,.28);border:1px solid rgba(43,36,24,.08)}
html:has(link[href*="stolz-farben"]) body:is([data-seite="sets"],[data-seite="bewertungen"]) .rez{background:rgba(0,0,0,.12);border-color:rgba(217,185,124,.18)}
.bewblock .bew__nachladen{text-align:center;margin-top:22px}
.bw__kauf--unten{display:flex;justify-content:center;background:none !important;margin:16px 0 0 !important;padding:0 !important}
.bw__kauf--unten .knopf{width:auto;min-width:16rem}

/* ===== TEIL G: KONTAKT: weniger Leerraum, mittig ===== */
body[data-seite="kontakt"] .seitenkopf{padding-bottom:14px !important}
body[data-seite="kontakt"] .seitenkopf .huelle{text-align:center}
body[data-seite="kontakt"] .seitenkopf .augbraue,body[data-seite="kontakt"] .seitenkopf__text{text-align:center;margin-inline:auto}
body[data-seite="kontakt"] main > section.abschnitt{padding-top:18px !important}
body[data-seite="kontakt"] main > section.abschnitt::before{display:none !important}
body[data-seite="kontakt"] .formular{margin:0 auto !important;max-width:560px}

/* ===== TEIL H: KASSE leer + DANKE Ersatztext (nur Aussehen; kasse.html bleibt unberuehrt) ===== */
body[data-seite="kasse"] [data-i18n="kasse.leer"]{text-align:center;max-width:44ch;margin-inline:auto !important;line-height:1.6}
body[data-seite="kasse"] #k-leer:not([hidden]){display:flex;flex-direction:column;align-items:center}
body[data-seite="kasse"] #k-leer .knopf{margin-top:20px}
body[data-seite="danke"] [data-i18n="dk.offen"]{text-align:center;max-width:52ch;margin-inline:auto !important;line-height:1.6;text-wrap:balance}
body[data-seite="danke"] #dk-offen:not([hidden]){display:flex;flex-direction:column;align-items:center}
body[data-seite="danke"] #dk-offen p:has(> .knopf){display:flex !important;justify-content:center;margin-top:20px !important}
.gl-mitte{display:flex !important;justify-content:center;margin-top:20px !important}
/* ===== KASSE + UPLOAD: keine eckigen Kaesten ===== */
body[data-seite="upload"] .vorspann{margin-bottom:22px !important;max-width:62ch}
body[data-seite="upload"] .huelle > .vorspann,body[data-seite="upload"] .huelle > .augbraue,body[data-seite="upload"] .huelle > .titel{text-align:center;margin-inline:auto !important;text-wrap:balance}
body[data-seite="upload"] input:not([type=checkbox]):not([type=radio]):not([type=file]),body[data-seite="upload"] textarea,body[data-seite="upload"] select,
body[data-seite="kasse"] input:not([type=checkbox]):not([type=radio]),body[data-seite="kasse"] textarea,body[data-seite="kasse"] select{border:1px solid rgba(43,36,24,.22) !important}
body[data-seite="upload"] .k-foto-bereich,body[data-seite="upload"] .k-neben,body[data-seite="kasse"] .k-neben,body[data-seite="kasse"] .k-karte{border-radius:18px !important;background:#EFE3CF !important;border:1px solid rgba(184,149,90,.35) !important;box-shadow:0 6px 18px rgba(110,85,45,.10)}
html:has(link[href*="stolz-farben"]) body[data-seite="upload"] .k-foto-bereich,html:has(link[href*="stolz-farben"]) body[data-seite="upload"] .k-neben,
html:has(link[href*="stolz-farben"]) body[data-seite="kasse"] .k-neben,html:has(link[href*="stolz-farben"]) body[data-seite="kasse"] .k-karte{background:rgba(0,0,0,.14) !important;border-color:rgba(217,185,124,.35) !important}
body[data-seite="upload"] .k-neben{padding:20px 22px !important}
body[data-seite="upload"] .k-feld{margin-bottom:14px}
/* Datei-Auswahl: eigener Glasknopf "Fotos auswaehlen" (layout.js, uploadDateiKnoepfe).
   Das echte <input type=file> bleibt im Formular und bekommt die Dateien, ist aber
   nur noch fuer Tastatur und Technik da -- sichtbar ist der Knopf (label for=...). */
body[data-seite="upload"] input[type=file].up-datei-versteckt{position:absolute !important;width:1px !important;height:1px !important;margin:-1px;padding:0 !important;border:0 !important;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body[data-seite="upload"] .k-feld .up-datei-knopf{display:inline-flex;width:auto;align-items:center;justify-content:center;cursor:pointer;margin:2px 0 8px;min-height:44px;font-weight:600}
body[data-seite="upload"] input[type=file]:focus-visible + .up-datei-knopf{outline:2px solid #2B2418;outline-offset:3px}
/* ===== ZWEITKNOEPFE: Beige-Gold-Glas (nur Unvergessen) ===== */
html:not(:has(link[href*="stolz-farben"])) .knopf--umriss,
html:not(:has(link[href*="stolz-farben"])) .gkd-knopf .knopf{
  background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.07) 100%),linear-gradient(135deg,#FCF3DF 0%,#EFD8AA 52%,#D9B97C 100%) !important;
  border:1px solid #B8955A !important;color:#3E3320 !important;border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(110,80,30,.24),0 4px 10px rgba(110,85,45,.2) !important;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.gkd-knopf .knopf{padding:.7rem 1.4rem !important}
/* ===== ABSCHLUSS-SEITEN: Text mittig, Knoepfe mittig ===== */
body[data-seite="upload"]:not(:has(.k-gitter)) main p:not(.augbraue),
body[data-seite="bewertung"]:not(:has(form)) main p:not(.augbraue),
body[data-seite="gutschein-danke"] main p:not(.augbraue){text-align:center;margin-inline:auto !important;max-width:46ch;text-wrap:balance}
body[data-seite="upload"]:not(:has(.k-gitter)) main .augbraue,body[data-seite="upload"]:not(:has(.k-gitter)) main .titel,
body[data-seite="bewertung"]:not(:has(form)) main .augbraue,body[data-seite="bewertung"]:not(:has(form)) main .titel,
body[data-seite="gutschein-danke"] main .augbraue,body[data-seite="gutschein-danke"] main .titel{text-align:center;margin-inline:auto;text-wrap:balance}
body[data-seite="upload"]:not(:has(.k-gitter)) main .knopf,
body[data-seite="bewertung"]:not(:has(form)) main .knopf{margin-top:6px}
body[data-seite="upload"]:not(:has(.k-gitter)) main :has(> .knopf),
body[data-seite="bewertung"]:not(:has(form)) main :has(> .knopf),
body[data-seite="gutschein-danke"] .gkd-knopf{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
body[data-seite="upload"]:not(:has(.k-gitter)) main ul{width:fit-content;margin-inline:auto !important}
body[data-seite="bewertung"]:not(:has(form)) .bw-code{margin-inline:auto;text-align:center}
/* ===== TEIL G: ZAHLARTEN: runde Kacheln ===== */
body[data-seite="zahlarten"] .zahlarten-liste{background:none !important;border:0 !important;gap:14px !important}
body[data-seite="zahlarten"] .zahlart-karte{border-radius:16px !important;border:1px solid rgba(184,149,90,.4) !important;box-shadow:0 4px 12px rgba(110,85,45,.08)}
body[data-seite="zahlarten"] .seitenkopf .huelle{text-align:center}
body[data-seite="zahlarten"] .seitenkopf__text{margin-inline:auto;max-width:60ch;text-wrap:balance}
.zurueck{text-align:center !important}
/* ===== UEBERALL: keine eckigen Felder ===== */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-radius:12px !important}
textarea{resize:vertical}
/* ===== UEBERALL: keine eckigen UND keine weissen Kaesten ===== */
.vk-de-frei{border-radius:14px !important;background:rgba(239,227,207,.75) !important;border:1px solid rgba(184,149,90,.35) !important}
html:has(link[href*="stolz-farben"]) .vk-de-frei{background:rgba(0,0,0,.14) !important;border-color:rgba(217,185,124,.35) !important}
html:has(link[href*="stolz-farben"]) .vk-de-frei,html:has(link[href*="stolz-farben"]) .vk-de-frei b{color:#F6EFDF !important}
body[data-seite="materialien"] .karte,body[data-seite="materialien"] .ideal,body[data-seite="materialien"] .tabelle{background:#EFE3CF !important}
html:has(link[href*="stolz-farben"]) body[data-seite="materialien"] .karte,html:has(link[href*="stolz-farben"]) body[data-seite="materialien"] .ideal,html:has(link[href*="stolz-farben"]) body[data-seite="materialien"] .tabelle{background:rgba(0,0,0,.14) !important}
body[data-seite="materialien"] .k{border-radius:12px !important}
.gk-gs__code{border-radius:10px !important}

/* ===== TEIL C: PC-GESAMTGROESSE 85 % =====
   Saskia (10.10.2026): Was heute bei Browser-Zoom 85 % zu sehen ist, soll der
   Kunde ab 1040 px Fensterbreite bei 100 % sehen. Umgesetzt ueber CSS-zoom auf
   html. Damit es dem Browser-Zoom wirklich gleicht, sind in dieser Datei
   zusaetzlich (a) alle Fenster-Schwellen der Media-Abfragen ab 1040 px mit
   0,85 umgerechnet (z. B. 1200 -> 1040, 1280 -> 1088, 1600 -> 1360) und (b) alle
   vw/vh-Masse durch --zf geteilt (calc(100vw / var(--zf,1)) bleibt so die ganze Fensterbreite).
   Handy und Tablet bis 1039 px: --zf = 1, nichts aendert sich. */
:root{--zf:1}
@media(min-width:1040px){:root{zoom:.85;--zf:.85}}

/* ===== RUNDGANG 11.10.2026: letzte eckige oder weisse Kaesten (Regel 1 und 2) ===== */
/* Alter Konfigurator (gestalten-klassisch.html; start.js bleibt unberuehrt, nur Aussehen) */
.konf__kasten,.konf-erkl{border-radius:16px !important}
.konf__kasten .wahl button,.konf__kasten .formen .form,.konf__kasten .konf__mat,.konf__kasten .konf__extra,.konf__kasten .zaehler,.konf__kasten .k-fehler,.konf__kasten .preis{border-radius:12px !important}
.konf__kasten .zahlarten .zahlart{border-radius:8px !important}
.konf__kasten .konf__mat:not([aria-pressed="true"]),.konf__kasten .konf__extra,.konf__kasten .konf__extra label{background-color:#F6EFDF}
/* Sets-Karten, Spooky-Aktionskasten, Versandkosten-Aufklapper, Erinnerungs-Formular */
body[data-seite="sets"] .paket{border-radius:16px !important}
.aktion{border-radius:14px !important}
.aktion .aktion__code{border-radius:10px !important}
.vk-aufklapper{border-radius:12px !important}
.erinnern__immer{border-radius:12px}
.erinnern__form input:not([type=checkbox]):not([type=radio]),.erinnern__form select{background:#F6EFDF !important}
/* Bewertungs- und Upload-Formular: Felder Creme statt Weiss */
body[data-seite="bewertung"] input:not([type=checkbox]):not([type=radio]),body[data-seite="bewertung"] textarea,body[data-seite="bewertung"] select,
body[data-seite="upload"] input:not([type=checkbox]):not([type=radio]):not([type=file]),body[data-seite="upload"] textarea{background:#F6EFDF !important}

/* Saskia 11.10.2026: „Alle Fragen ansehen“ auf der Upload-Seite weg */
body[data-seite="upload"] .k-neben .k-hilfe{display:none}

/* ===========================================================================
   ENTSCHEIDUNG SASKIA 11.10.2026: Seitenkopf am Handy mittig
   ---------------------------------------------------------------------------
   Gilt bis 899 px -- genau der Bereich, in dem der Kopf schon heute
   untereinander steht (dieselbe Schwelle wie die Reihenfolge-Regeln weiter
   oben und wie der Wegweiser-Auftrag vom 10.10.2026). Ab 900 px aendert sich
   NICHTS: die linksbuendige Kante vom 28.09.2026 bleibt am Rechner so, wie
   sie ist.

   Mittig stehen damit: Bewertungszeile, Kleinzeile, Ueberschrift, Kopftext,
   Preiszeile samt Mehrwertsteuerzeile und der Haken-Block. Der Kaufknopf
   bleibt wie bisher ueber die volle Breite und steht dadurch von selbst
   mittig. Hauptbild, Beispielreihe, Bildzeile, Stil-Kasten, Wegweiser und
   Plakette sind bereits mittig und werden hier nicht angefasst.

   Die drei Haken bleiben untereinander mit Symbol links und Text rechts
   (Entscheidung 28.09.2026); mittig steht der BLOCK: er ist nur noch so
   breit wie sein Inhalt und wird ueber margin-inline zentriert.

   Kein !important: der Block steht am Ende der Datei und schlaegt damit die
   gleich gewichteten Regeln (0,2,0) aus dem Auftrag-6-Abschnitt
   (".seitenkopf .augbraue{text-align:left}" und
   ".seitenkopf .hero-vertrauen{align-items:flex-start}") allein ueber die
   Reihenfolge. Die Ausrichtung innerhalb der Haken-Zeilen bleibt dabei
   links -- genau das ist gewollt.

   Ein Goldstrich ueber der Preiszeile ist am Handy nirgends sichtbar
   (".seitenkopf .preisanker::before{content:none}" aus Auftrag 6 und
   ".hero__gitter .preisanker::before{content:none}" im Handy-Block der
   Startseite). Punkt 5 des Auftrags geht deshalb ins Leere; waere der Strich
   da, stuende er durch sein eigenes "margin:0 auto" schon mittig.
   =========================================================================== */
@media(max-width:899px){
  /* 1 Bewertungszeile -- sie hat width:fit-content, braucht also eine echte
     Mitte statt nur text-align. */
  .seitenkopf .beleg{margin-inline:auto;justify-content:center;text-align:center}
  /* 2 Kleinzeile */
  .seitenkopf .augbraue{text-align:center}
  /* 3 Ueberschrift, beide Zeilen */
  .seitenkopf h1{text-align:center}
  /* 4 Kopftext */
  .seitenkopf .seitenkopf__text{text-align:center;margin-inline:auto}
  /* 6 Preiszeile und die Zeile "inkl. MwSt., versandkostenfrei ..." */
  .seitenkopf .preisanker{text-align:center}
  /* 8 Haken: Block mittig, Zeilen innen unveraendert.
     flex-basis ausdruecklich auf auto: der Kopf ist am Handy eine
     umbrechende Flex-Reihe, in der jedes Teil flex-basis:100% traegt --
     damit waere die Liste immer 342 px breit und "width" ohne Wirkung.
     Mit auto zaehlt die Breite des Inhalts (die laengste Haken-Zeile),
     und die beiden auto-Raender stellen den Block in die Mitte.
     Nachgemessen bei 390 px: 264 px breit, Mitte 195 px = Fenstermitte;
     kein anderes Teil des Kopfes ruecht dadurch. */
  .seitenkopf .hero-vertrauen{flex-basis:auto;width:fit-content;max-width:100%;
    margin-inline:auto}

  /* Dieselbe Liste fuer den Kopf der Startseite. Dort stehen Sterne,
     Ueberschrift, Unterzeile und Preiszeile schon mittig; ausdruecklich
     gesetzt bleiben sie es auch, wenn sich an den Regeln darueber etwas
     aendert. Neu ist allein der Haken-Block. */
  .hero__gitter .beleg{margin-inline:auto;justify-content:center;text-align:center}
  .hero__gitter .augbraue{text-align:center}
  .hero__gitter h1{text-align:center}
  .hero__gitter .hero__unter{text-align:center}
  .hero__gitter .preisanker{text-align:center}
  .hero__gitter .hero-vertrauen{flex-basis:auto;width:fit-content;max-width:100%;
    margin-inline:auto}
}

/* ===========================================================================
   ENTSCHEIDUNG SASKIA 11.10.2026: Handy-Kopf kompakt, Kaufknopf im echten
   ersten Bildschirm
   ---------------------------------------------------------------------------
   Grund: Alle bisherigen Messungen liefen bei 390 x 844 -- das ist die volle
   Geraetehoehe OHNE Browserleisten. Ein echter Handy-Browser zeigt rund
   360 x 650-700 px. Dort stand "Mein Bild gestalten" zuletzt bei 714-790 px,
   also unter der Falz. Saskia am 11.10.2026: "Der Kaufknopf ist nicht
   sichtbar. Das muss alles viel kleiner."

   Neue Pruefgroesse: Unterkante des Kaufknopfs <= 660 px bei 360 px Breite
   und <= 670 px bei 390 px Breite.

   Gilt nur bis 899 px. Ab 900 px aendert sich NICHTS.

   Die beiden Startseiten sind NICHT in diesem Block: ihr Kaufknopf steht
   schon bei 622 px und damit deutlich im ersten Bildschirm. Ihr erster
   Bildschirm ist am 26./27.09.2026 Abstand fuer Abstand von Saskia
   abgenommen worden und wird deshalb nicht angefasst.

   Teil A (alles mittig) und Teil B (zwei feste Zeilen) gelten unveraendert
   weiter -- hier aendern sich nur Groessen und Abstaende.
   =========================================================================== */
@media(max-width:899px){
  /* --- 1 Bewertungszeile: eine Zeile, 13 px (vorher 15 px und 44 px hoch) ---
     Die Tippflaeche bleibt 44 px hoch: ein unsichtbares Feld ueber der Zeile
     (::after), genau wie bei den schmalen Champagner-Knoepfen im Generator.
     Die Zeile selbst ist damit rund 20 px hoch, anfassen laesst sie sich
     weiterhin so gut wie vorher. */
  .seitenkopf .beleg{
    position:relative;min-height:0;font-size:13px;line-height:1.3;
    gap:.35rem;flex-wrap:nowrap;white-space:nowrap;margin-bottom:0;
  }
  .seitenkopf .beleg .sterne svg{width:13px;height:13px}
  .seitenkopf .beleg::after{
    content:"";position:absolute;left:-8px;right:-8px;top:50%;
    height:44px;transform:translateY(-50%);
  }

  /* --- 2 Kleinzeile: moeglichst in EINER Zeile (Saskia 12.10.2026:
     "Hochzeit - Fuer euch oder als Geschenk" stand zweizeilig, obwohl
     Platz war). Die Breitengrenze aus dem Grundstil faellt weg, und die
     Laufweite geht von .18em auf .12em zurueck -- damit passt bei 360 px
     auch die laengste Kleinzeile ("Babys und Kinder - Der grosse
     Beschuetzer") in eine Zeile. Die Schriftgroesse bleibt bei 11,5 px. --- */
  .seitenkopf .augbraue{font-size:11.5px;line-height:1.4;margin-top:4px;margin-bottom:0;
    max-width:none;width:100%;letter-spacing:.12em}
  /* Muss sie doch einmal umbrechen, dann NUR am Trennpunkt und nie
     mitten im Stilnamen. Die beiden Teile setzt augbraueTeilen() in
     layout.js, nachdem die Sprache gesetzt ist. */
  .seitenkopf .augbraue__teil{white-space:nowrap}

  /* --- 3 Ueberschrift (mittig und zweizeilig bleibt, siehe Teil A und B) --- */
  .seitenkopf h1{font-size:19px;line-height:1.15;margin-top:4px}

  /* --- 4 Hauptbild und Beispielbilder -- KORREKTUR 12.10.2026 ---
     Der Nachtrag vom 11.10. hatte die Buehne auf 200 px und die
     Beispielbildchen auf 36 px verkleinert. Saskia lehnt das ab:
     "Beispielbilder super duenn, viel zu dicht am Hauptbild." Bei den
     Seiten mit mehr als fuenf Beispielen (Pfeil-Spalte, z. B. Hochzeit)
     kam es noch dicker: dort zieht die Bildleiste 14 px Innenabstand ab,
     die Bildchen waren nur noch 22 px breit und der Auswahlrahmen stand
     14 px daneben in der Luft.

     Jetzt wieder genau wie vor dem Nachtrag: Buehne 240 x 336 px,
     Bildchen 42 x 59 px -- und zwar in BEIDEN Varianten, Hochzeit
     genauso wie Tiere und Gedenken. Dafuer reicht es, die drei Zeilen
     von oben wegzulassen; es gilt dann wieder der Ursprungsblock
     "Handy bis 899 px" weiter oben.

     Neu gegenueber dem Ursprung ist allein der Abstand zwischen Bild
     und Bildchen: 24 statt 14 px (Saskia 12.10.: "wir haben Platz nach
     links und rechts, setz sie weiter weg"). 240 + 24 + 42 = 306 px,
     mittig; bei 360 px Fensterbreite stehen 312 px Inhalt zur
     Verfuegung, es passt also. --- */
  .seitenkopf .wandel--mit-reihe,
  .seitenkopf .wandel:has(> .wandel__rahmen + .bsp-leiste){
    max-width:306px;grid-template-columns:minmax(0,1fr) 42px;column-gap:24px;
  }
  .seitenkopf__gitter .wandel-bereich,
  .seitenkopf__gitter .wandel{margin-top:4px}
  /* Bildzeile: 10,5 px statt 10,9. Sie steht weiter in EINER Zeile und
     mittig unter Bild und Bildchen; bei 360 px ist sie 275 px breit und
     passt damit in die 312 px Inhaltsbreite, auch wenn das Bild selbst nur
     noch 246 px breit ist. Abstand darueber 4 statt 18 px. */
  /* justify-self ausdruecklich: die Zeile ist breiter als das Bild
     (275 statt 246 px) und stand sonst an dessen linker Kante statt
     mittig. Sie passt mittig in die 312 px Inhaltsbreite. */
  /* Die Zeile ist breiter als Bild + Bildchen (275 gegen 246 px) und
     stand deshalb an der linken Kante des Bildes: Chrome schiebt ein
     Rasterfeld, das groesser ist als sein Platz, an den Anfang zurueck,
     justify-self:center bleibt dabei wirkungslos. Sie wird deshalb von
     Hand mittig gesetzt -- ueber die Mitte ihres Platzes und dann um
     die halbe eigene Breite zurueck. Das Bild steht mittig auf der
     Seite, damit steht auch die Zeile mittig auf der Seite; nach links
     und rechts bleiben bei 360 px je 43 px Luft. */
  /* KORREKTUR 12.10.2026 (Saskia: "so dicht unterm Bild, dass du sie
     kaum lesen kannst"): Abstand wieder 18 px wie vor dem Nachtrag,
     Schrift wieder 10,9 px. Einzeilig und mittig bleibt sie.
     Mittig steht sie jetzt wieder ganz normal ueber justify-self:
     Mit der Buehne von 306 px ist die Zeile (285 px bei 360 px
     Fensterbreite) nicht mehr breiter als ihr Platz, und die
     Handrechnung vom 11.10. ist damit ueberfluessig -- sie hatte die
     Zeile zuletzt sogar um 10 px aus der Mitte gerueckt. Unter 350 px
     Fensterbreite bricht die Zeile ohnehin zweizeilig um und ist dann
     schmaler als ihr Platz. */
  .seitenkopf .wandel--mit-reihe .wandel__hinweis{font-size:10.9px;line-height:1.35;
    margin-top:18px;justify-self:center;width:max-content;max-width:none}
  .seitenkopf__gitter .wandel .wandel__hinweis{margin-top:18px}

  /* --- 5 Stil-Kasten --- */
  .seitenkopf .stil-beschreibung{font-size:14px;line-height:1.35}
  .seitenkopf__gitter .seitenkopf__beschreibung{margin-top:6px}
  .seitenkopf__gitter:has(.wandel[data-einzel-stil]) .seitenkopf__beschreibung{margin-top:14px}

  /* --- 6 Preiszeile und die Zeile zur Mehrwertsteuer --- */
  .seitenkopf .preisanker{font-size:13px;line-height:1.3;margin-top:6px}
  .seitenkopf .preis-klein{font-size:12px;line-height:1.4}

  /* --- 7 Kaufknopf: 6 px Abstand darueber, Hoehe bleibt bei 44 px (die
         Vorgabe lautet mindestens 42) und volle Breite wie in Teil A. --- */
  .seitenkopf__gitter .knopf--gold{margin-top:6px;min-height:42px}
}

/* ===========================================================================
   ENTSCHEIDUNG SASKIA 12.10.2026: Auswahlrahmen eng am Bild
   ---------------------------------------------------------------------------
   "Haesslicher Rand, zu viel Luft." Das gewaehlte Beispielbildchen hatte
   2 px Abstand zwischen Bild und Rahmen, die gewaehlte Stil-Kachel sogar
   5 px -- dort stiess der Rahmen schon an die Nachbarkachel. Beides
   rueckt jetzt dicht ans Bild. Gilt am Rechner wie am Handy.
   =========================================================================== */
.seitenkopf .bsp-daumen[aria-pressed="true"] img,
.seitenkopf .bsp-reihe--motive .stil-einzel-klein__knopf[aria-pressed="true"] img{
  outline:1.5px solid #2B2418;outline-offset:0;
}
#tw-raster a.kachel[aria-current="true"] .kachel__bild{
  outline:2px solid #8C6F45;outline-offset:1px;
}

/* .seitenkopf__gitter (Themenwelt- und Stil-Seiten): zwei feste Spalten, als
   Paar mittig gestellt. Ist zwischen ihnen und dem Rand Luft, rueckt ein um
   16 px kleinerer Spaltenabstand jede Seite genau 8 px nach innen -- und das
   Bild bleibt, wie es ist.
   Diese Luft gibt es erst, wenn die Textspalte ihr Hoechstmass von 55rem
   erreicht hat. Nachgemessen am 17.10. auf der Mensch-Seite: bei 1500 px ist
   die Textspalte erst 853 px breit und das Gitter fuellt den Rahmen ganz --
   die 16 px landeten dort nicht am Rand, sondern machten das BILD um 8 px
   groesser. Ab 1560 px steht die Textspalte auf 880 px, und es geht auf.
   Darunter bleibt der Kopfbereich deshalb unveraendert. */
@media(min-width:1560px){
  .seitenkopf__gitter{column-gap:calc(3.5rem - 16px / var(--zf,1))}
}


/* --- Auftrag 17.10.2026, Teil J: der zweizeilige Hauptknopf --------------
   Breite und Farbe bleiben, wie sie waren -- nur die Hoehe waechst um die
   zweite Zeile. Beide Zeilen stehen mittig untereinander und bleiben
   einzeilig (white-space:nowrap), damit der Knopf an keiner Pruefgroesse
   umbricht. Die zweite Zeile ist leiser: 0,78 em, Gewicht 400, etwas
   durchscheinend. */
.knopf--zwei{
  flex-direction:column;gap:.12em;line-height:1.2;
  padding-block:.7rem;
}
.knopf--zwei .knopf__haupt{display:block;white-space:nowrap}
.knopf--zwei .knopf__unter{
  display:block;white-space:nowrap;
  font-size:.78em;font-weight:400;letter-spacing:.01em;opacity:.82;
}