/* ══════════════════════════════════════════════════════════════════════
   STAND DIESER DATEI: 4. November 2026 · Fassung 42

   ZUM PRÜFEN NACH DEM HOCHLADEN:
   Diese Datei im Browser direkt aufrufen, etwa
   https://sagmeister.at/atelier/css/style.css
   Steht oben eine ältere Fassung als 39, liegt auf dem Server noch der
   alte Stand. Dann stimmen Mobilmenü, Logo und Hero nicht.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   ATELIER SAGMEISTER · Bregenz
   Maßkonfektion seit 1844

   Gestaltungsprinzip: Das Material bestimmt die Optik.
   Mitternachtsblau = die Farbe des meistbestellten Maßanzugs.
   Kreideweiß       = Schneiderkreide, kühl, ausdrücklich kein Cremeton.
   Messing          = Knopf, Nadel, Schere. Nur Linien und Ziffern, nie Fläche.
   Die Maßlinie     = durchgehendes Bindeglied, reines CSS, kein Bild.
   Der Köper        = feine Diagonaltextur auf dunklen Flächen, wie Stoff.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Design-Variablen ────────────────────────────────────────────────── */
:root {
  --farbe-text:        #101720;   /* Tinte, kein reines Schwarz */
  --farbe-text-leise:  #5F6670;   /* Stein. Dunkler als der frühere Ton
                                     #6E7681: der erreichte auf hellem
                                     Grund nur 4,13:1 statt der nötigen
                                     4,5:1. */
  --farbe-hintergrund: #F2F3F4;   /* Kreideweiß */
  --farbe-flaeche:     #FFFFFF;   /* Karten */
  --farbe-tief:        #1B2735;   /* Mitternachtsblau */
  --farbe-tief-2:      #14202C;   /* tiefer, für Verläufe */
  --farbe-akzent:      #B08D57;   /* Messing: Flächen, Rahmen, Linien und
                                     Schrift auf dunklem Grund. */
  --farbe-akzent-dunkel: #866637; /* Messing für Schrift auf hellem Grund.
                                     Das helle Messing kommt dort nur auf
                                     2,78:1, dieses auf 4,76:1. */
  --farbe-akzent-hell: #C8A874;
  --farbe-akzent-text: #FFFFFF;
  --farbe-linie:       #DDDFE2;   /* Trennlinien, rein schmückend */
  --farbe-linie-ui:    #848A92;   /* Rahmen von Bedienelementen: Felder,
                                     Kalender, Filter. Muss 3:1 schaffen. */
  --farbe-linie-tief:  rgba(255,255,255,.16);

  --schrift-display: 'Bodoni Moda', 'Times New Roman', serif;
  --schrift-text:    'Archivo', system-ui, sans-serif;

  --breite:      1220px;
  --breite-eng:  980px;
  --breite-text: 680px;
  --radius:      2px;              /* fast keine Rundung: Schneiderkante */
  /* Abstand zwischen den Sections, fluid nach der Breite:
     56 px bei 1280 px Fensterbreite, 104 px bei 1920 px. */
  --abstand:     clamp(3.5rem, .875rem + 3.75vw, 6.5rem);
  /* Höchste Bildhöhe neben Text: 416 px bei 1280, 620 px bei 1920 */
  --bild-max:    clamp(26rem, .3rem + 31.875vw, 38.75rem);
  --rand:        clamp(1.25rem, 5vw, 3rem);
  /* ─── Schriftskala ────────────────────────────────────────────────────
     Für Sagmeister gebaut, nicht aus einer Vorlage übernommen:
     · Bodoni Moda ist eine kontrastreiche Didone. Ihre Haarstriche brechen
       unter rund 20 px weg, deshalb setzen die Überschriften hoch an und
       stehen weit über dem Text. Das Verhältnis Text zu h2 liegt bei 2,3.
     · Archivo trägt Text und die gesperrten Versalien. Die wirken wie das
       Etikett im Sakko und dürfen klein sein, der Fließtext dagegen nicht:
       Die Zielgruppe ist überwiegend 35 bis 65, darum nie unter 16,5 px.
     · Jede Größe als clamp(MIN, PREFERRED, MAX): MIN gilt bei 1280 px
       Breite, MAX bei 1920 px, dazwischen wird linear interpoliert.
       Unter 900 px gilt eine eigene Handy-Skala (weiter unten). */
  --fs-mikro: clamp(.6562rem, .5312rem + .156vw, .7188rem);     /* 10.5→11.5px · Wochentage im Kalender, Reiter der Buchung */
  --fs-nav: clamp(.7812rem, .6562rem + .156vw, .8438rem);       /* 12.5→13.5px · Hauptnavigation */
  --fs-label: clamp(.7188rem, .5938rem + .156vw, .7812rem);     /* 11.5→12.5px · gesperrte Versalien: Abschnittsmarken, Knöpfe, Etiketten */
  --fs-klein: clamp(.8125rem, .6875rem + .156vw, .875rem);     /* 13→14px · Bildunterschriften, Hinweise, Kontaktzeilen */
  --fs-text-s: clamp(.9062rem, .7812rem + .156vw, .9688rem);    /* 14.5→15.5px · Nebentext in Karten, Listen, Formular */
  --fs-text: clamp(1.0312rem, .8438rem + .234vw, 1.125rem);      /* 16.5→18px · Fließtext */
  --fs-lead: clamp(1.125rem, .75rem + .469vw, 1.3125rem);      /* 18→21px · Einleitungen, Hero-Text, Fragen */
  --fs-zitat: clamp(1.125rem, .625rem + .625vw, 1.375rem);     /* 18→22px · Kundenstimmen, kursiv */
  --fs-h3: clamp(1.3125rem, .6875rem + .781vw, 1.625rem);        /* 21→26px · Kartentitel, Schrittitel */
  --fs-zahl: clamp(1.6875rem, .3125rem + 1.719vw, 2.375rem);      /* 27→38px · Kennzahlen im Hero */
  --fs-band: clamp(1.875rem, .125rem + 2.188vw, 2.75rem);      /* 30→44px · Zitatband */
  --fs-h2: clamp(2.375rem, .625rem + 2.188vw, 3.25rem);        /* 38→52px · Abschnittsüberschriften */
  --fs-titel: clamp(3.125rem, .875rem + 2.812vw, 4.25rem);     /* 50→68px · Seitentitel der Unterseiten */
  --fs-h1: clamp(3.875rem, .625rem + 4.062vw, 5.5rem);        /* 62→88px · Titel der Atelier-Startseite */
  --fs-display: clamp(5.375rem, 1.125rem + 5.312vw, 7.5rem);   /* 86→120px · Preis „ab 899 €“ */

  /* Zeilenhöhen: eng bei Überschriften, großzügig beim Lesen */
  --lh-titel: 1.12;
  --lh-h3:    1.2;
  --lh-text:  1.58;
  --lh-klein: 1.5;

  /* Lesbare Zeilenlänge für Fließtext, in ch statt Pixeln */
  --zeile:       58ch;   /* ergibt bei Archivo rund 62 bis 72 Zeichen */
  --zeile-kurz:  50ch;   /* rund 50 bis 55 Zeichen, für Einleitungen */

}

/* Handy-Skala: MIN bei 360 px, MAX bei 899 px. Die Desktop-Untergrenzen
   wären auf dem Telefon zu groß, etwa 62 px für den Seitentitel. */
@media (max-width: 899px) {
  :root {
    --fs-mikro: clamp(.6562rem, .6562rem + .000vw, .6562rem);
    --fs-nav: clamp(.7812rem, .7812rem + .000vw, .7812rem);
    --fs-label: clamp(.7188rem, .7188rem + .000vw, .7188rem);
    --fs-klein: clamp(.8125rem, .8125rem + .000vw, .8125rem);
    --fs-text-s: clamp(.9062rem, .9062rem + .000vw, .9062rem);
    --fs-text: clamp(1rem, .9791rem + .093vw, 1.0312rem);
    --fs-lead: clamp(1.0625rem, 1.0208rem + .186vw, 1.125rem);
    --fs-zitat: clamp(1.0625rem, 1.0208rem + .186vw, 1.125rem);
    --fs-h3: clamp(1.2188rem, 1.1561rem + .278vw, 1.3125rem);
    --fs-zahl: clamp(1.5rem, 1.3748rem + .557vw, 1.6875rem);
    --fs-band: clamp(1.5625rem, 1.3538rem + .928vw, 1.875rem);
    --fs-h2: clamp(1.875rem, 1.541rem + 1.484vw, 2.375rem);
    --fs-titel: clamp(2.25rem, 1.6656rem + 2.597vw, 3.125rem);
    --fs-h1: clamp(2.5rem, 1.5816rem + 4.082vw, 3.875rem);
    --fs-display: clamp(3.75rem, 2.6647rem + 4.824vw, 5.375rem);
  }
}

/* ─── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* clip statt hidden: schneidet den seitlichen Überhang des geschlossenen
     Mobilmenüs ab, ohne einen eigenen Scroll-Container zu erzeugen — sonst
     hört position:sticky im Kopf auf zu funktionieren. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--schrift-text);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  -webkit-font-smoothing: antialiased;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

/* Ohne diese Zeile erbt <b> in einer bereits halbfetten Umgebung den Wert
   bolder und landet bei 900. Diesen Schnitt gibt es nicht, der Browser
   rechnet ihn künstlich breit und die Ziffern wirken ausgefranst. */
b, strong { font-weight: 700; }

h1, h2, h3 {
  font-family: var(--schrift-display);
  font-weight: 500;
  line-height: var(--lh-titel);
  letter-spacing: -.015em;
  text-wrap: balance;
}
/* Schriftskala. Text 17 px, h3 rund 24 px, h2 rund 46 px, h1 rund 76 px
   auf einem üblichen Laptop. Der Anteil in vh sorgt dafür, dass große
   Überschriften auf flachen Bildschirmen etwas kleiner ausfallen. */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h3 { line-height: var(--lh-h3); }
p  { text-wrap: pretty; }

/* Fließtext nie breiter als eine gut lesbare Zeile. Absätze mit eigener
   Klasse (Etiketten, Marken, Knopfzeilen) sind bewusst ausgenommen. */
main p:not([class]),
.zwei p, .haus-text p, .leistungen-kopf p,
.rechtstext p, .rechtstext li { max-width: var(--zeile); }

a { color: inherit; }

/* Muss nach den Komponenten stehen bleiben: .knopf ist inline-flex und würde
   das hidden-Attribut sonst aushebeln. */
[hidden] { display: none !important; }

/* Der Fokusrahmen muss 3:1 gegen seinen Untergrund schaffen. Messing kam
   auf hellem Grund nur auf 2,78:1, deshalb Tinte auf hell und Weiß auf
   den dunklen Flächen. */
:focus-visible { outline: 2px solid var(--farbe-text); outline-offset: 3px; }
.hero :focus-visible,
.stoffe :focus-visible,
.preis :focus-visible,
.fuss :focus-visible,
.menue :focus-visible,
.karte.dunkel :focus-visible,
.musterkarte :focus-visible { outline-color: #fff; }
::selection { background: var(--farbe-akzent); color: #fff; }

/* ─── Grundraster ─────────────────────────────────────────────────────── */
main > section { padding: var(--abstand) var(--rand); }
main > section > * { max-width: var(--breite); margin-inline: auto; }

.eng  { max-width: var(--breite-eng) !important; }
.text { max-width: var(--breite-text); }

/* ─── Zugänglichkeit ──────────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px;
  background: var(--farbe-tief); color: #fff;
  padding: .85rem 1.4rem; z-index: 999;
}
.skip:focus { left: 0; top: 0; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   SIGNATURE · Die Maßlinie
   Grundlinie, kurze Teilstriche alle 8 px, lange alle 40 px.
   Kein Bild, keine Schriftart, kein Netzwerkaufruf.
   ══════════════════════════════════════════════════════════════════════ */
.massband {
  --strich: rgba(16,23,32,.30);
  height: 15px;
  background:
    repeating-linear-gradient(90deg, var(--strich) 0 1px, transparent 1px 8px)
      left bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--strich) 0 1px, transparent 1px 40px)
      left bottom / 100% 11px no-repeat,
    linear-gradient(var(--strich), var(--strich))
      left bottom / 100% 1px no-repeat;
}
.massband.hell    { --strich: rgba(255,255,255,.34); }
.massband.messing { --strich: rgba(176,141,87,.75); }

/* Abschnittsmarke: Ziffer in Messing, Titel gesperrt */
.marke {
  display: flex; align-items: baseline; gap: .9rem;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--farbe-text-leise);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--farbe-linie);
  margin-bottom: clamp(1.5rem, 2.500vw - .5rem, 2.5rem);
}
.marke b {
  font-family: var(--schrift-text);
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--farbe-akzent-dunkel);
  letter-spacing: .08em;
}
.marke.hell { color: rgba(255,255,255,.62); border-bottom-color: var(--farbe-linie-tief); }
.marke.hell b { color: var(--farbe-akzent-hell); }

/* ══════════════════════════════════════════════════════════════════════
   DIE WEICHE
   Startseite auf sagmeister.at: Der Mann oder Die Frau.
   Bewusst im hellen Auftritt der bestehenden Damenseite: reines Weiß,
   schwarze Schrift, feine Linien, keine Rahmen um die Logos.
   ══════════════════════════════════════════════════════════════════════ */
.weiche-seite {
  background: #FFFFFF;
  color: #111111;
  min-height: 100svh;
}
.weiche {
  min-height: 100svh;
  display: flex; flex-direction: column;
  max-width: 1180px; margin: 0 auto;
  padding: clamp(1.5rem, 3.750vw - 1.5rem, 3rem) var(--rand) clamp(1rem, 1.875vw - .5rem, 1.75rem);
}

.weiche-kopf { text-align: center; }
.weiche-ort {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: #6B6B6B;
  margin-bottom: clamp(.7rem, 1.250vw - .3rem, 1.2rem);
}
/* Ortszeilen: Auf schmalen Bildschirmen bricht die Zeile an einer festen
   Stelle um, und der Trennpunkt dort entfällt. Sonst hinge ein einzelner
   Punkt am Zeilenende. */
.ort-gruppe { white-space: nowrap; }
@media (max-width: 600px) {
  .ort-trenner { display: block; height: 0; overflow: hidden; }
}

.weiche-kopf h1 {
  font-size: var(--fs-h2);
  font-weight: 400; font-style: italic;
  color: #111111;
}

.weiche-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 7vw, 4.5rem) clamp(2rem, 5vw, 4.5rem);
  margin: clamp(1.5rem, 3.750vw - 1.5rem, 3rem) 0 clamp(1.5rem, 2.500vw - .5rem, 2.5rem);
}

.welt {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  text-decoration: none; color: inherit;
}
.welt-foto {
  display: block; width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F2F2F2;
}
.welt-bild {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.3,1);
}
.welt-mann .welt-bild { object-position: 30% 30%; }
.welt-frau .welt-bild { object-position: 50% 24%; }

.welt-marke {
  display: flex; align-items: flex-end; justify-content: center;
  margin-top: clamp(1.25rem, 2.500vw - .75rem, 2.25rem);
}
.welt-marke img { width: clamp(12.5rem, 2.5rem + 12.500vw, 17.5rem); height: auto; }

.welt-text {
  margin-top: clamp(.6rem, 1.000vw - .2rem, 1rem);
  font-size: var(--fs-text-s); line-height: var(--lh-text);
  color: #666666;
  max-width: 32ch;
}
.welt-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: clamp(.9rem, 1.500vw - .3rem, 1.5rem);
  min-height: 46px; min-width: 10.5rem; padding: .7rem 2rem;
  border: 1px solid #111111;
  color: #111111;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}
.welt:hover .welt-knopf,
.welt:focus-visible .welt-knopf { background: #111111; color: #FFFFFF; }
.welt:hover .welt-bild,
.welt:focus-visible .welt-bild { transform: scale(1.03); }
.welt:focus-visible { outline: 2px solid #111111; outline-offset: 6px; }

/* Nebeneinander teilen sich beide Welten dieselben vier Zeilen. So stehen
   Foto, Logo, Text und Knopf links wie rechts exakt auf einer Linie, auch
   wenn ein Text länger umbricht oder die Logos verschieden hoch sind. */
@media (min-width: 800px) {
  .weiche-raster {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    row-gap: 0;
  }
  .welt {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    justify-items: center;
  }
  .welt-marke { align-self: end; }
  .welt-text  { align-self: start; }
  .welt-knopf { align-self: start; }
  /* Auf dem Desktop bestimmt die Bildschirmhöhe die Fotohöhe, damit die
     ganze Auswahl samt Knöpfen ohne Scrollen im Bild steht. */
  .welt-foto  { aspect-ratio: auto; height: clamp(13.75rem, 39.062vw - 17.5rem, 29.375rem); }
}

@media (prefers-reduced-motion: reduce) {
  .welt-bild { transition: none; }
  .welt:hover .welt-bild, .welt:focus-visible .welt-bild { transform: none; }
}

.weiche-fuss {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem;
  align-items: center; justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid #E6E6E6;
  font-size: var(--fs-klein); color: #8A8A8A;
}
.weiche-fuss nav { display: flex; gap: 1.5rem; }
.weiche-fuss a { color: #555555; text-decoration: none; }
.weiche-fuss a:hover { color: #111111; text-decoration: underline; text-underline-offset: .25em; }

@media (max-width: 560px) {
  .weiche-fuss { justify-content: center; text-align: center; }
  .weiche-fuss a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════
   KOPF
   ══════════════════════════════════════════════════════════════════════ */
.kopf {
  position: sticky; top: 0; z-index: 90;
  padding: .9rem var(--rand);
  background: rgba(242,243,244,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--farbe-linie);
}
.kopf-innen {
  width: 100%; max-width: var(--breite); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
/* ─── Logo „Sagmeister – Der Mann" ──────────────────────────────────────
   Originallogo aus der PDF-Vorlage des Kunden, ohne Rahmen und ohne
   Hintergrundfläche freigestellt (durchsichtiges PNG). Zwei Fassungen:
   schwarz für helle Flächen, weiß für den dunklen Fuß.
   ───────────────────────────────────────────────────────────────────── */
.logo {
  display: block; flex: none;
  text-decoration: none; color: inherit;
}
.logo img { display: block; height: auto; }
/* Untergrenze bewusst niedrig: bei rund 1000 Pixeln Fensterbreite teilen
   sich Logo, Menü und Knopf den Platz sehr knapp. */
/* Der Kunde möchte den Schriftzug präsenter. Auf dem Rechner deshalb
   deutlich größer, auf dem Handy bleibt es beim bisherigen Maß, dort
   teilen sich Logo und Menüschalter die Breite sehr knapp. */
.kopf .logo img { width: clamp(124px, 11.5vw, 158px); }
@media (min-width: 900px) {
  .kopf .logo img { width: clamp(168px, 14vw, 215px); }
}
.fuss .logo img { width: 190px; }

.menue { display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.5rem); margin-left: auto; }
.menue a, .gruppe-schalter {
  text-decoration: none; font-size: var(--fs-nav); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .35rem 0; position: relative;
  background: none; border: 0; cursor: pointer; color: inherit;
  font-family: inherit;
  /* Ohne nowrap brechen längere Punkte wie „Atelier Sagmeister" um und
     der Kopf wird doppelt so hoch. */
  white-space: nowrap;
}
.kopf .knopf.klein { white-space: nowrap; }
.menue a::after, .gruppe-schalter::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--farbe-akzent); transition: right .25s ease;
}
.menue a:hover::after, .menue a[aria-current="page"]::after,
.gruppe-schalter:hover::after, .gruppe-schalter[data-aktiv]::after { right: 0; }

/* ─── Aufklappmenü „Atelier Sagmeister" ─────────────────────────────────
   Fasst Maßarbeit, Hochzeit und Stoffe zusammen. Auf dem Rechner klappt
   es auf, auf dem Handy stehen die drei Punkte einfach untereinander.
   ───────────────────────────────────────────────────────────────────── */
.menue-gruppe { position: relative; }
.gruppe-schalter { display: inline-flex; align-items: center; gap: .45rem; }
.gruppe-schalter .pfeil {
  width: 7px; height: 7px; flex: none;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s ease;
}
.gruppe-schalter[aria-expanded="true"] .pfeil { transform: translateY(1px) rotate(-135deg); }

/* Zwischen Tablet quer und kleinem Laptop teilen sich Schriftzug, sieben
   Menüpunkte und der Terminknopf eine sehr knappe Zeile. Hier rücken die
   Punkte enger zusammen, sonst schiebt der Knopf über den rechten Rand. */
@media (min-width: 901px) and (max-width: 1160px) {
  .kopf-innen { gap: 1rem; }
  .menue { gap: .72rem; }
  .menue a, .gruppe-schalter { font-size: var(--fs-label); letter-spacing: .05em; }
  .kopf .knopf.klein { padding: .7rem 1.05rem; font-size: var(--fs-label); letter-spacing: .1em; }
}

@media (min-width: 901px) {
  .menue-unter {
    position: absolute; top: calc(100% + .9rem); left: -1.25rem;
    min-width: 13rem;
    display: grid;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    box-shadow: 0 18px 44px rgba(16,23,32,.14);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 95;
  }
  .menue-gruppe:hover .menue-unter,
  .menue-gruppe:focus-within .menue-unter,
  .gruppe-schalter[aria-expanded="true"] + .menue-unter {
    opacity: 1; visibility: visible; transform: none;
  }
  .menue-unter a {
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--farbe-linie);
    font-size: var(--fs-label);
  }
  .menue-unter a:last-child { border-bottom: 0; }
  .menue-unter a::after { display: none; }
  .menue-unter a:hover { background: rgba(134,102,55,.1); color: var(--farbe-akzent-dunkel); }
  .menue-unter a[aria-current="page"] { color: var(--farbe-akzent-dunkel); }
}

.kopf-tel {
  font-size: var(--fs-klein); font-weight: 600; text-decoration: none;
  white-space: nowrap; letter-spacing: .02em;
}
.kopf-tel:hover { color: var(--farbe-akzent-dunkel); }

/* Die Kopfzeile trägt jetzt Logo, sechs Menüpunkte und den Buchen-Knopf.
   Für die Telefonnummer ist erst auf sehr breiten Bildschirmen Platz,
   darunter würde das Menü umbrechen. Erreichbar bleibt die Nummer über
   den Hero, die Kontaktkarte, den Fuß und die Leiste auf dem Handy. */
@media (max-width: 1499px) {
  .kopf-tel { display: none; }
}
.zurueck { margin-left: auto; text-decoration: none; font-size: var(--fs-klein); }

/* Das Kreuz im Menü gibt es nur auf dem Handy, auf dem Rechner steht
   die Navigation ohnehin offen in der Kopfzeile. */
.menue-zu { display: none; }

.menue-schalter {
  display: none; margin-left: auto;
  background: none; border: 0; cursor: pointer;
  padding: .6rem; gap: 6px; flex-direction: column;
}
.menue-schalter span {
  display: block; width: 26px; height: 1.5px; background: var(--farbe-text);
  transition: transform .22s, opacity .22s;
}
.menue-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .menue-schalter { display: flex; }
  .kopf-tel, .kopf .knopf { display: none; }

  /* WICHTIG: kein backdrop-filter, solange das Menü ein Kind des Kopfes ist.
     Ein Element mit backdrop-filter wird zum Bezugsrahmen für position:fixed.
     Das Menü war dadurch nur so hoch wie die Kopfzeile, die Menüpunkte lagen
     zur Hälfte außerhalb des Bildschirms. */
  .kopf { backdrop-filter: none; background: var(--farbe-hintergrund); }

  /* Der Schalter liegt über dem Menü, sonst ließe es sich nicht schließen. */
  .menue-schalter { position: relative; z-index: 101; }

  .menue {
    position: fixed; inset: 0; z-index: 100;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 1.5rem;
    padding: 5.5rem 1.5rem 5rem;
    background: var(--farbe-tief); color: #fff;
    /* visibility statt nur transform: sonst ragt das geschlossene Menü über
       den rechten Fensterrand hinaus und bleibt per Tabulator erreichbar. */
    transform: translateX(100%); visibility: hidden;
    overflow-y: auto; overscroll-behavior: contain;
    /* Sichtbarkeit schaltet beim Öffnen sofort um und beim Schließen erst
       nach der Blende. Läge auf visibility eine echte Blende, wäre das
       Kreuz im Moment des Öffnens noch unsichtbar und könnte den Fokus
       der Tastatur nicht annehmen. */
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  .menue a {
    font-size: var(--fs-lead); letter-spacing: .14em;
    display: flex; align-items: center; justify-content: center; min-height: 48px;
  }
  .menue a::after { display: none; }

  /* Auf dem Handy steht die Gruppe als Überschrift, darunter ihre drei
     Punkte. Kein Aufklappen, das wäre ein Klick zu viel. */
  .menue-gruppe { display: contents; }
  .gruppe-schalter {
    display: block; text-align: center; cursor: default;
    font-size: var(--fs-label); letter-spacing: .22em;
    color: var(--farbe-akzent-hell);
    padding: 0; margin-bottom: -.4rem;
    pointer-events: none;
  }
  .gruppe-schalter::after, .gruppe-schalter .pfeil { display: none; }
  .menue-unter { display: contents; }
  .menue-unter a { font-size: var(--fs-text); }
  .menue.offen { transform: translateX(0); visibility: visible; transition: transform .28s ease, visibility 0s; }

  /* Das Kreuz steht fest oben rechts, genau dort, wo vorher der
     Hamburger war. Es gehört zum Menü, nicht zur Kopfzeile, deshalb
     bleibt es sichtbar, egal wie weit unten die Seite steht. Solange
     es da ist, wird der Schalter in der Kopfzeile ausgeblendet, sonst
     stünden zwei Kreuze übereinander. */
  .menue-zu {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: fixed; top: 14px; right: var(--rand); z-index: 102;
    width: 45px; height: 45px; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .menue-zu span {
    position: absolute; display: block;
    width: 26px; height: 1.5px; background: #fff;
  }
  .menue-zu span:first-child { transform: rotate(45deg); }
  .menue-zu span:last-child  { transform: rotate(-45deg); }
  body.menue-offen .menue-schalter { visibility: hidden; }

  /* Bei offenem Menü deckt das Menü den ganzen Bildschirm. Das Logo liegt
     darunter und bleibt verdeckt, sichtbar bleibt nur das Kreuz zum
     Schließen. Das Logo hier hervorzuheben ging schief: der dafür nötige
     z-index erzeugt einen eigenen Stapelkontext, der Mischmodus greift
     dann nicht mehr und das Logo stand als schwarzer Kasten im Bild. */
  body.menue-offen .kopf { background: transparent; border-bottom-color: transparent; }
  body.menue-offen .menue-schalter span { background: #fff; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE AKTIONSLEISTE
   Auf dem Handy sind Anrufen und Terminbuchen jederzeit einen Daumen
   entfernt. Auf dem Rechner übernimmt das der Kopf.
   ══════════════════════════════════════════════════════════════════════ */
.mobil-leiste { display: none; }

@media (max-width: 900px) {
  .mobil-leiste {
    display: flex; gap: .5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(242,243,244,.94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--farbe-linie);
  }
  /* min-width: 0 ist entscheidend — sonst schrumpfen die beiden Knöpfe nicht
     unter ihre Textbreite und die Leiste läuft auf schmalen Geräten über. */
  .mobil-leiste .knopf {
    flex: 1 1 0; min-width: 0;
    padding-inline: .5rem;
    font-size: var(--fs-label);
    letter-spacing: .05em;
    white-space: nowrap;
  }
  /* Nur dort Platz freihalten, wo die Leiste auch wirklich steht —
     Impressum, Datenschutz und 404 haben keine. */
  body:has(.mobil-leiste) { padding-bottom: 5rem; }
  .menue { padding-bottom: 5rem; }

  /* ─── Tippziele ──────────────────────────────────────────────────────
     Auf dem Handy zählt die Fläche unter dem Daumen. Reine Textlinks in
     Listen und Kontaktangaben bekommen deshalb volle 44 Pixel Höhe.
     ──────────────────────────────────────────────────────────────────── */
  .fuss ul a,
  .fuss-unten nav a,
  .kontaktkarte dd > a,
  .kontaktkarte dd br + a,
  .haus-karte .kontaktzeilen a,
  .karte .ab a,
  .marken-fuss a,
  .haltung figcaption a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .fuss ul { gap: 0; }
  .fuss-unten nav { gap: 1.75rem; }
  .kontaktkarte .zeiten-liste li { padding: .5rem 0; }
  .menue-schalter { min-height: 44px; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   KNÖPFE
   ══════════════════════════════════════════════════════════════════════ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.9rem;
  /* Tinte auf Messing statt Weiß auf Messing: Weiß erreichte hier nur
     3,09:1 und lag damit unter der Vorgabe von 4,5:1. Tinte kommt auf
     5,83:1, die Messingfläche selbst bleibt unverändert. */
  background: var(--farbe-akzent); color: var(--farbe-text);
  border: 1px solid var(--farbe-akzent); border-radius: var(--radius);
  font-size: var(--fs-klein); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.knopf:hover { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent-hell); color: var(--farbe-text); }

.knopf.leise { background: transparent; color: var(--farbe-text); border-color: rgba(16,23,32,.28); }
.knopf.leise:hover { background: var(--farbe-akzent); color: var(--farbe-text); border-color: var(--farbe-akzent); }

.knopf.hell { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.knopf.hell:hover { background: rgba(255,255,255,.16); color: #fff; border-color: #fff; }

.knopf.klein { min-height: 42px; padding: .55rem 1.25rem; font-size: var(--fs-label); }

.knopf svg { width: 1.05em; height: 1.05em; flex: none; }
.knopf[disabled] { opacity: .38; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative; isolation: isolate;
  background: linear-gradient(168deg, var(--farbe-tief) 0%, var(--farbe-tief-2) 100%);
  color: #fff;
  /* Bewusst knapp gehalten: Die Zahlenleiste soll auf einem üblichen
     Laptopbildschirm schon beim Öffnen im Bild stehen. */
  padding: clamp(3rem, 6vw, 4.5rem) var(--rand) clamp(2.5rem, 4vw, 3.5rem);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(114deg,
    rgba(255,255,255,.024) 0 1px, transparent 1px 7px);
  pointer-events: none;
}
.hero-innen { max-width: var(--breite); margin-inline: auto; }

/* Textspalte links, Musterkarte rechts. Auf dem Handy steht nur der Text,
   die Karte ist Beiwerk und würde den Hero dort unnötig lang machen. */
.hero-oben { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); }

@media (min-width: 901px) {
  .hero-oben { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (min-width: 1100px) {
  .hero-oben > div:first-child { max-width: 860px; }
}

/* ─── Musterkarte im Hero ─────────────────────────────────────────────
   Drei Stoffe aus dem Programm 365 Anzüge, mit ihren Nummern, wie sie
   auch auf der Karte im Atelier stehen. Das Skript tauscht reihum einen
   der drei aus, sonst bleibt die Karte ruhig stehen. */
.musterkarte { display: none; }
@media (min-width: 901px) {
  .musterkarte {
    display: block;
    width: clamp(15rem, 4rem + 13.5vw, 20rem);
    padding: clamp(.9rem, .3rem + .75vw, 1.4rem);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
  }
}
.musterkarte-kopf {
  margin: 0 0 .85rem;
  font-size: var(--fs-mikro); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  line-height: var(--lh-klein); color: rgba(255,255,255,.55);
}
.musterkarte-kopf b { color: var(--farbe-akzent-hell); font-weight: 600; }
.musterkarte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.musterkarte li { display: grid; gap: .3rem; }
.musterkarte .probe {
  display: block; overflow: clip;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
}
.musterkarte .probe img {
  display: block; width: 100%; height: auto; aspect-ratio: 340 / 120;
  object-fit: cover;
}
.musterkarte .nr {
  font-size: var(--fs-mikro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums;
}
.musterkarte > a {
  display: inline-block; margin-top: 1.1rem;
  font-size: var(--fs-mikro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--farbe-akzent-hell); text-decoration: none;
  border-bottom: 1px solid rgba(176,141,87,.45); padding-bottom: .25rem;
}
.musterkarte > a:hover { border-bottom-color: var(--farbe-akzent-hell); }

.hero-ort {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--farbe-akzent-hell);
  margin-bottom: clamp(1.25rem, 2.2vw, 1.6rem);
}
.hero h1 { max-width: 15ch; }
/* Auf dem Rechner darf die Überschrift breiter laufen. Sie bricht dann
   zweizeilig statt dreizeilig, was eine ganze Zeile spart und die
   Zahlenleiste über die Bildschirmkante hebt. */
@media (min-width: 1100px) { .hero h1 { max-width: 19ch; } }

.hero h1 em { font-style: italic; font-weight: 400; color: var(--farbe-akzent-hell); }
.hero .massband { margin: clamp(1.5rem, 2.6vw, 2rem) 0; max-width: 520px; }
.hero-text {
  max-width: var(--zeile-kurz); font-size: var(--fs-lead);
  color: rgba(255,255,255,.80); line-height: var(--lh-text);
}
.hero-knoepfe {
  display: flex; flex-wrap: wrap; gap: .9rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.hero-zahlen {
  display: grid; gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  background: var(--farbe-linie-tief);
  border-top: 1px solid var(--farbe-linie-tief);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.hero-zahlen div { background: var(--farbe-tief-2); padding: clamp(1.1rem, 2.4vw, 1.65rem) clamp(1rem, 2vw, 1.6rem); }
.hero-zahlen b {
  display: block;
  font-family: var(--schrift-display); font-weight: 500;
  font-size: var(--fs-zahl);
  line-height: 1; color: #fff;
}
.hero-zahlen span {
  display: block; margin-top: .6rem;
  font-size: var(--fs-mikro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
@media (max-width: 720px) { .hero-zahlen { grid-template-columns: repeat(2, 1fr); } }

/* ─── Hero auf dem Handy ───────────────────────────────────────────────
   Ohne das Wappen darüber darf der Text weiter nach oben rücken. Alle
   Abstände im Hero werden enger, damit die Überschrift gleich im Blick
   ist und die Zahlenleiste noch dazupasst. */
@media (max-width: 900px) {
  .hero { padding-top: 1.9rem; }
  .hero-ort { margin-bottom: .85rem; }
  .hero .massband { margin: 1.1rem 0; }
  .hero-knoepfe { margin-top: 1.5rem; gap: .7rem; }
  .hero-zahlen { margin-top: 1.9rem; }

  /* Die Telefonnummer steht dauerhaft in der Leiste am unteren Rand.
     Im Hero genügt deshalb der eine Knopf, der zum Ziel der Seite führt. */
  .hero-knoepfe a[href^="tel:"] { display: none; }
}

@media (max-width: 620px) {
  .hero-knoepfe .knopf { width: 100%; }
}

/* Flache Fenster, etwa ein 1280 x 800 Laptop: Dort reicht die Höhe sonst
   nicht, um die Zahlenleiste ohne Scrollen zu zeigen. Alles im Hero rückt
   deshalb enger zusammen, die Überschrift wird etwas kleiner.
   Muss hinter den Grundregeln stehen, sonst gewinnen die. */
@media (min-width: 880px) and (max-height: 800px) {
  .hero { padding-top: clamp(1.75rem, 3vw, 2.5rem); }
  .hero h1 { font-size: var(--fs-titel); }
  .hero .massband { margin: 1.2rem 0; }
  .hero-text { font-size: var(--fs-lead); }
  .hero-knoepfe { margin-top: 1.5rem; }
  .hero-ort { margin-bottom: 1rem; }
  .hero-zahlen { margin-top: 1.5rem; }
  .hero-zahlen div { padding: .85rem 1.2rem; }
  .hero-zahlen b { font-size: var(--fs-zahl); }
}

/* ══════════════════════════════════════════════════════════════════════
   BILDFLÄCHEN
   Gewebte Fläche mit Messing-Eckwinkeln. Wird 1:1 durch <img> ersetzt.
   ══════════════════════════════════════════════════════════════════════ */
.bild {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(114deg, rgba(255,255,255,.055) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-114deg, rgba(255,255,255,.028) 0 1px, transparent 1px 7px),
    linear-gradient(152deg, #24323F 0%, #1B2735 55%, #131E29 100%);
  border-radius: var(--radius);
}
.bild.hell {
  background:
    repeating-linear-gradient(114deg, rgba(16,23,32,.055) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-114deg, rgba(16,23,32,.035) 0 1px, transparent 1px 7px),
    linear-gradient(150deg, #E4E6E9 0%, #CFD4D9 55%, #BFC5CC 100%);
}
.bild::before, .bild::after {
  content: ''; position: absolute; width: 34px; height: 34px;
  border: 1px solid var(--farbe-akzent-hell); opacity: .9;
}
.bild.hell::before, .bild.hell::after { border-color: var(--farbe-akzent); }
.bild::before { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.bild::after  { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
.bild.hoch  { aspect-ratio: 3 / 4; }
.bild.quer  { aspect-ratio: 4 / 3; }
.bild.breit { aspect-ratio: 16 / 9; }
.bild img { width: 100%; height: 100%; object-fit: cover; }

/* Sobald ein echtes Foto drin ist, gilt dessen eigenes Seitenverhältnis.
   Sonst würde einem stehenden Anzug der Kopf oder der Saum abgeschnitten. */
.bild:has(img) { aspect-ratio: auto; background: none; }
.bild:has(img) img { height: auto; }
.bild:has(img)::before, .bild:has(img)::after { display: none; }

figure.bild { margin: 0; }
.bild figcaption {
  margin-top: .9rem; font-size: var(--fs-klein);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--farbe-text-leise);
}

/* ─── Galerie ─────────────────────────────────────────────────────────
   Gleich hohe Bilder in einer Reihe, Bildunterschriften auf einer Linie.
   Dafür wird hier bewusst ein festes Format erzwungen.
   ───────────────────────────────────────────────────────────────────── */
.galerie {
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .galerie-vier { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .galerie-vier { grid-template-columns: repeat(4, 1fr); } }

/* Zwei Bilder: schmaler gesetzt, damit sie nicht auf die volle Breite
   auseinanderlaufen und dabei übermäßig hoch werden. Das historische
   Motiv bekommt etwas mehr Raum als das Porträt daneben. */
.galerie-zwei { max-width: 920px; }
@media (min-width: 620px) {
  .galerie-zwei { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); }
  /* Feste Höhe statt festem Seitenverhältnis: Die beiden Bilder sind
     unterschiedlich breit, enden aber auf derselben Linie, damit auch die
     Bildunterschriften fluchten. */
  .galerie-zwei .rahmen { aspect-ratio: auto; height: clamp(360px, 42vw, 540px); }
}

/* Auf dunklem Grund drehen sich die Farben der Bildunterschrift um */
.stoffe .galerie figcaption, .preis .galerie figcaption {
  color: rgba(255,255,255,.6); border-top-color: var(--farbe-linie-tief);
}
.stoffe .galerie figcaption b, .preis .galerie figcaption b { color: #fff; }

.galerie figure { margin: 0; display: flex; flex-direction: column; }
.galerie .rahmen {
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius);
  background: var(--farbe-tief);
}
.galerie img { width: 100%; height: 100%; object-fit: cover; }
.galerie .oben-halten { object-position: 50% 20%; }
.galerie figcaption {
  margin-top: .95rem; padding-top: .8rem;
  border-top: 1px solid var(--farbe-linie);
  font-size: var(--fs-klein); line-height: var(--lh-klein);
  color: var(--farbe-text-leise);
}
.galerie figcaption b {
  display: block; color: var(--farbe-text);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .3rem;
}

/* ══════════════════════════════════════════════════════════════════════
   LEISTUNGEN
   ══════════════════════════════════════════════════════════════════════ */
.h2-abstand { margin-bottom: clamp(1.25rem, 2.500vw - .75rem, 2.25rem); }

.leistungen-kopf {
  display: grid; gap: clamp(1.25rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  margin-bottom: clamp(1.75rem, 3.125vw - .75rem, 3rem);
}
@media (min-width: 860px) {
  .leistungen-kopf { grid-template-columns: 1.1fr 1fr; align-items: end; }
}
.leistungen-kopf p { color: var(--farbe-text-leise); }

/* Feste Spaltenzahl statt auto-fit: sechs Kacheln gehen so immer glatt auf
   und es bleibt keine leere Zelle im Raster stehen. */
.karten {
  display: grid; gap: 1px;
  grid-template-columns: 1fr;
  background: var(--farbe-linie);
  border: 1px solid var(--farbe-linie);
}
@media (min-width: 620px)  { .karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .karten { grid-template-columns: repeat(3, 1fr); } }

/* Vier Kacheln in drei Spalten lassen zwei Felder leer, das sah aus wie
   ein Loch im Raster. Bei genau vier Kacheln deshalb zwei Spalten, auf
   breiten Schirmen alle vier in einer Reihe. Raster mit drei oder sechs
   Kacheln bleiben unberührt. */
@media (min-width: 1000px) {
  .karten:has(> .karte:last-child:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1240px) {
  .karten:has(> .karte:last-child:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}

/* Kachel, die statt Text ein Foto zeigt */
.karte.foto { padding: 0; position: relative; min-height: 220px; overflow: hidden; }
/* Absolut gesetzt, damit das Foto die Reihe nicht höher macht als die
   Textkacheln daneben. */
.karte.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.karte.foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.4rem 1.1rem;
  background: linear-gradient(transparent, rgba(16,23,32,.78));
  color: #fff; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.karte {
  background: var(--farbe-flaeche);
  padding: clamp(1.3rem, .98rem + .4vw, 1.6rem) clamp(1.15rem, .83rem + .4vw, 1.45rem);
  display: flex; flex-direction: column; gap: .55rem;
  transition: background .25s;
}
.karte:hover { background: #FAFBFB; }
/* Dunkle Fassung für Kartenreihen in dunklen Sections. Vorher stand das
   als Inline-Stil in der HTML-Datei, dadurch ließ sich der Kontrast der
   Ziffern dort nicht mitsteuern. */
.karten.dunkel { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.karte.dunkel { background: #1E2B3A; color: #fff; }
.karte.dunkel:hover { background: #22303F; }
.karte.dunkel .nr { color: var(--farbe-akzent-hell); }
.karte.dunkel p { color: rgba(255,255,255,.74); }
.karte.dunkel .ab { border-top-color: rgba(255,255,255,.16); }
.karte .nr {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em;
  color: var(--farbe-akzent-dunkel); font-variant-numeric: tabular-nums;
}
.karte p { color: var(--farbe-text-leise); font-size: var(--fs-text-s); line-height: var(--lh-text); }
.karte .ab {
  margin-top: auto; padding-top: .9rem;
  border-top: 1px solid var(--farbe-linie);
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════
   ABLAUF · die Maßlinie steht senkrecht, Schritte sind abgelesene Maße
   ══════════════════════════════════════════════════════════════════════ */
.ablauf-raster { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: 1fr; }
@media (min-width: 940px) {
  .ablauf-raster { grid-template-columns: 1fr .8fr; align-items: start; }
}

.ablauf { position: relative; padding-left: 3.25rem; }
.ablauf::before {
  content: ''; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 15px;
  background:
    repeating-linear-gradient(180deg, rgba(16,23,32,.28) 0 1px, transparent 1px 8px)
      left top / 5px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(16,23,32,.28) 0 1px, transparent 1px 40px)
      left top / 11px 100% no-repeat,
    linear-gradient(rgba(16,23,32,.28), rgba(16,23,32,.28))
      left top / 1px 100% no-repeat;
}
.schritt { position: relative; padding-bottom: clamp(1.2rem, 2.625vw - .9rem, 2.25rem); }
.schritt:last-child { padding-bottom: 0; }
.schritt .nr {
  position: absolute; left: -3.25rem; top: .1rem; width: 2.2rem;
  font-size: var(--fs-klein); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--farbe-akzent-dunkel);
  background: var(--farbe-hintergrund);
  padding: .1rem 0;
}
.schritt h3 { margin-bottom: .5rem; }
.schritt p { color: var(--farbe-text-leise); max-width: var(--zeile); font-size: var(--fs-text-s); }
.schritt .dauer {
  display: inline-block; margin-top: .7rem;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--farbe-akzent);
  padding-bottom: .15rem;
}

/* ══════════════════════════════════════════════════════════════════════
   STOFFE · waagerechte Stoffkarte
   ══════════════════════════════════════════════════════════════════════ */
.stoffe {
  position: relative; isolation: isolate;
  background: var(--farbe-tief); color: #fff;
}
.stoffe::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(114deg, rgba(255,255,255,.028) 0 1px, transparent 1px 6px);
}
.stoffe h2 { max-width: 18ch; }
.stoffe-text { color: rgba(255,255,255,.72); max-width: var(--zeile); margin-top: 1.25rem; }

/* ─── Slideshow „Die 365 Anzüge" ────────────────────────────────────────
   Ein seitlich scrollbarer Streifen. Wischen und Mausrad funktionieren
   von Haus aus, die Pfeile blättern über die Skriptdatei. Bewusst ohne
   Endlosschleife: am letzten Bild ist Schluss. */
.slider { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.folien {
  display: flex; gap: clamp(.9rem, 2vw, 1.25rem);
  /* Die Reihe läuft an den Rändern weich aus, statt hart abgeschnitten
     zu enden. Browser ohne mask-image zeigen einfach die harte Kante. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(1.5rem, 4vw, 4rem), #000 calc(100% - clamp(1.5rem, 4vw, 4rem)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 clamp(1.5rem, 4vw, 4rem), #000 calc(100% - clamp(1.5rem, 4vw, 4rem)), transparent 100%);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Bis zum Fensterrand laufen lassen, damit der Streifen angeschnitten
     wirkt. Das erste Bild fluchtet trotzdem mit dem Fließtext. */
  margin-inline: calc(var(--rand) * -1);
  padding-inline: max(var(--rand), calc((100vw - var(--breite)) / 2));
  padding-block: .25rem 1.5rem;
  scroll-padding-inline-start: max(var(--rand), calc((100vw - var(--breite)) / 2));
  max-width: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.3) transparent;
}
.folien::-webkit-scrollbar { height: 3px; }
.folien::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); }
.folien:focus-visible { outline: 2px solid var(--farbe-akzent-hell); outline-offset: 4px; }

.folie {
  flex: 0 0 clamp(200px, 42vw, 260px);
  scroll-snap-align: start;
  margin: 0;
}
.folie img {
  display: block; width: 100%; aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
/* Stoffnummer unter dem Bild, zum Nachschlagen im Atelier */
.folie figcaption {
  margin-top: .8rem;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.72);
}
.slider-steuer {
  display: flex; align-items: center; gap: 1rem;
  margin-top: .5rem;
}
.slider-pfeil {
  flex: none;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; cursor: pointer; color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  font-size: var(--fs-text); line-height: 1;
  transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}
.slider-pfeil:hover:not(:disabled) {
  background: var(--farbe-akzent); border-color: var(--farbe-akzent);
}
.slider-pfeil:disabled { opacity: .3; cursor: default; }

.stoff-fuss { color: rgba(255,255,255,.55); font-size: var(--fs-text-s); margin-top: 1.5rem; }
.stoff-fuss a { color: var(--farbe-akzent-hell); text-underline-offset: .25em; }

@media (prefers-reduced-motion: reduce) {
  .folien { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   ZWEISPALTER
   ══════════════════════════════════════════════════════════════════════ */
.zwei { display: grid; gap: clamp(2.25rem, 6vw, 4.5rem); grid-template-columns: 1fr; align-items: center; }
/* Wenn die Bildspalte deutlich höher ist als der Text, soll die Überschrift
   oben mit dem ersten Bild anfangen statt daneben zu schweben. */
.zwei.oben { align-items: start; }
@media (min-width: 900px) {
  .zwei { grid-template-columns: 1fr 1fr; }
}
.zwei p { color: var(--farbe-text-leise); margin-top: 1.6rem; }
.zwei h2 { max-width: 16ch; }

.liste-haken { list-style: none; padding: 0; margin-top: 1.75rem; display: grid; gap: .85rem; }
.liste-haken li { position: relative; padding-left: 1.9rem; font-size: var(--fs-text-s); }
.liste-haken li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 1.1rem; height: 1px; background: var(--farbe-akzent);
}

/* ══════════════════════════════════════════════════════════════════════
   PREIS
   ══════════════════════════════════════════════════════════════════════ */
.preis {
  position: relative; isolation: isolate;
  background: var(--farbe-tief); color: #fff; text-align: center;
}
.preis::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(114deg, rgba(255,255,255,.028) 0 1px, transparent 1px 6px);
}
.preis .marke { justify-content: center; }
.preis-zahl {
  font-family: var(--schrift-display);
  font-size: var(--fs-display);
  font-weight: 500; line-height: 1; letter-spacing: -.03em;
  margin: clamp(1rem, 3vw, 1.75rem) 0;
}
.preis-zahl small {
  display: block;
  font-family: var(--schrift-text); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--farbe-akzent-hell); margin-bottom: 1.25rem;
}
.preis p { max-width: var(--zeile-kurz); margin: 0 auto; color: rgba(255,255,255,.75); }
.preis .massband { max-width: 340px; margin: clamp(1.5rem, 0rem + 1.875vw, 2.25rem) auto; }

/* Die übrigen Maßteile in einer ruhigen Zeile unter dem großen Anzugpreis */
.preis-liste {
  list-style: none; padding: 0;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  max-width: 760px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  border-top: 1px solid var(--farbe-linie-tief);
}
.preis-liste li {
  display: grid; gap: .3rem;
  padding: 1.1rem .5rem 0;
}
.preis-liste span {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--farbe-akzent-hell);
}
.preis-liste b {
  font-family: var(--schrift-display);
  font-size: var(--fs-h3); font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════
   FRAGEN
   ══════════════════════════════════════════════════════════════════════ */
.fragen { border-top: 1px solid var(--farbe-linie); }
.frage { border-bottom: 1px solid var(--farbe-linie); }
.frage summary {
  list-style: none; cursor: pointer;
  padding: clamp(1rem, .2rem + 1.000vw, 1.4rem) 3rem clamp(1rem, .2rem + 1.000vw, 1.4rem) 0; position: relative;
  font-family: var(--schrift-display);
  font-size: var(--fs-lead); font-weight: 500;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; position: absolute; right: .6rem; top: 50%;
  width: 12px; height: 12px;
  border-right: 1px solid var(--farbe-akzent);
  border-bottom: 1px solid var(--farbe-akzent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s;
}
.frage[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.frage p { padding: 0 3rem 1.4rem 0; color: var(--farbe-text-leise); max-width: var(--zeile); }

/* ══════════════════════════════════════════════════════════════════════
   BUCHUNG
   ══════════════════════════════════════════════════════════════════════ */
.buchung { background: var(--farbe-flaeche); }
.buchung-raster { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
/* Ohne min-width: 0 wächst eine Rasterspalte auf die kleinstmögliche Breite
   ihres Inhalts an. Der Kalender würde das Layout sonst aufsprengen. */
.buchung-raster > * { min-width: 0; }
@media (min-width: 980px) {
  .buchung-raster { grid-template-columns: 1.3fr .7fr; align-items: start; }
}

.strecke { border: 1px solid var(--farbe-linie); background: var(--farbe-hintergrund); min-width: 0; }
.strecke-kopf {
  display: flex; margin: 0; padding: 0;
  border-bottom: 1px solid var(--farbe-linie);
}
.strecke-kopf li {
  flex: 1 1 0; list-style: none;
  padding: .95rem .5rem;
  font-size: var(--fs-mikro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--farbe-text-leise);
  text-align: center;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.strecke-kopf li b { font-variant-numeric: tabular-nums; margin-right: .35rem; color: var(--farbe-akzent-dunkel); }
.strecke-kopf li[aria-current="step"] { color: var(--farbe-text); border-bottom-color: var(--farbe-akzent); }
.strecke-kopf li.erledigt { color: var(--farbe-text); }
@media (max-width: 560px) {
  .strecke-kopf li span { display: none; }
  .strecke-kopf li b { margin: 0; }
}

.stufe { display: none; padding: clamp(1.4rem, 2.125vw - .3rem, 2.25rem); }
.stufe.aktiv { display: block; }
.stufe h3 { margin-bottom: .4rem; }
.stufe > p.hinweis { color: var(--farbe-text-leise); font-size: var(--fs-text-s); margin-bottom: 1.75rem; }

.wahl { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.wahl label {
  position: relative; display: block;
  border: 1px solid var(--farbe-linie-ui); background: var(--farbe-flaeche);
  padding: 1.05rem 1.15rem; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.wahl label:hover { border-color: var(--farbe-akzent); }
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl b { display: block; font-size: var(--fs-text-s); font-weight: 600; }
.wahl span { display: block; font-size: var(--fs-klein); color: var(--farbe-text-leise); margin-top: .2rem; }
.wahl label:has(input:checked) { background: rgba(176,141,87,.07); box-shadow: inset 0 0 0 1px var(--farbe-akzent); border-color: var(--farbe-akzent); }
.wahl label:has(input:focus-visible) { outline: 2px solid var(--farbe-text); outline-offset: 3px; }

/* Zeigt in der Terminstufe, für welches Haus der Kalender gerade gilt */
.haus-marke {
  display: block; margin-bottom: 1.5rem;
  padding: .7rem .95rem;
  border-left: 2px solid var(--farbe-akzent);
  background: rgba(176,141,87,.07);
  font-size: var(--fs-klein); font-weight: 500;
}
.haus-marke:empty { display: none; }

.kalender-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.kalender-kopf strong { font-family: var(--schrift-display); font-size: var(--fs-lead); font-weight: 500; }
.kalender-kopf button {
  width: 42px; height: 42px; border: 1px solid var(--farbe-linie-ui);
  background: var(--farbe-flaeche); cursor: pointer; border-radius: var(--radius);
  font-size: var(--fs-text); line-height: 1;
}
.kalender-kopf button:hover:not([disabled]) { border-color: var(--farbe-akzent-dunkel); color: var(--farbe-akzent-dunkel); }
.kalender-kopf button[disabled] { opacity: .3; cursor: not-allowed; }

.kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.kalender .wt {
  text-align: center; font-size: var(--fs-mikro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--farbe-text-leise); padding: .4rem 0 .6rem;
}
.kalender button {
  aspect-ratio: 1; min-height: 40px; min-width: 0; padding: 0;
  border: 1px solid var(--farbe-linie-ui); background: var(--farbe-flaeche);
  cursor: pointer; border-radius: var(--radius);
  font-size: var(--fs-text-s); font-variant-numeric: tabular-nums;
  transition: border-color .15s, background .15s;
}

/* Auf schmalen Geräten reicht die Breite für sieben quadratische Felder
   nicht mehr. Dann werden die Tage hochkant: schmaler, aber weiter hoch,
   damit sie unter dem Daumen trotzdem sicher zu treffen sind. */
@media (max-width: 430px) {
  .stufe { padding: 1.4rem 1rem; }
  .strecke-fuss { padding: 0 1rem 1.4rem; }
  .kalender { gap: 2px; }
  .kalender button { aspect-ratio: auto; height: 46px; font-size: var(--fs-klein); }
  .zeiten { grid-template-columns: repeat(auto-fit, minmax(min(72px, 100%), 1fr)); }
  .uebersicht > div { flex-direction: column; gap: .3rem; padding: .8rem 1rem; }
  .uebersicht strong { text-align: left; }
}
.kalender button:hover:not([disabled]) { border-color: var(--farbe-akzent); }
.kalender button[disabled] { opacity: .26; cursor: not-allowed; background: transparent; border-color: transparent; }
.kalender button[aria-pressed="true"] { background: var(--farbe-tief); color: #fff; border-color: var(--farbe-tief); }
.kalender .leer { visibility: hidden; }

.zeiten-titel {
  margin-top: 1.9rem; margin-bottom: .8rem;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--farbe-text-leise);
}
.zeiten { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(86px, 100%), 1fr)); }
.zeiten button {
  min-height: 44px; border: 1px solid var(--farbe-linie-ui);
  background: var(--farbe-flaeche); cursor: pointer; border-radius: var(--radius);
  font-size: var(--fs-text-s); font-variant-numeric: tabular-nums;
}
.zeiten button:hover { border-color: var(--farbe-akzent); }
.zeiten button[aria-pressed="true"] { background: var(--farbe-akzent); color: var(--farbe-text); border-color: var(--farbe-akzent); }

/* Urhebernachweis unter einer Bildstrecke. Leise gesetzt, aber lesbar:
   5,2:1 auf hellem Grund, so groß wie die Bildunterschriften. Die
   Urheberbezeichnung ist Pflicht, sie darf nicht zur Fußnote verkümmern. */
.bild-nachweis {
  margin-top: .9rem;
  font-size: var(--fs-klein); letter-spacing: .04em;
  color: var(--farbe-text-leise);
}

/* ─── Maß-Team auf der Startseite ─────────────────────────────────────
   Eine Reihe kleiner Porträts, die auf die eigene Seite führt. Auf dem
   Handy rutschen sie in zwei bis drei Spalten, die Namen bleiben lesbar. */
.kopf-kacheln {
  display: grid; gap: clamp(.7rem, .3rem + .5vw, 1.1rem);
  margin-top: clamp(1.75rem, 1rem + .9375vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 9vw, 160px), 1fr));
}
.kopf-kachel { margin: 0; }
.kopf-kachel img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 20%;
  border-radius: var(--radius); background: var(--farbe-linie);
}
.kopf-kachel figcaption {
  margin-top: .55rem; font-size: var(--fs-mikro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--farbe-text-leise); line-height: var(--lh-klein);
}

/* ─── Maß-Team ────────────────────────────────────────────────────────
   Sechs Karten in einer Reihe, die genauso gebaut sind wie die Preisliste:
   Ziffer links, Name daneben. Sobald Fotos und Steckbriefe da sind, wächst
   jede Karte nach unten, ohne dass das Raster angepasst werden muss. */
.kopf-karten {
  /* Echte Abstände statt der Haarlinien-Technik: Bei sieben Karten bleibt
     in der letzten Reihe ein Platz frei, und ein leeres Feld mit Rahmen
     sähe aus wie ein Fehler. */
  display: grid; gap: clamp(1rem, .4rem + .75vw, 1.6rem);
  margin-top: clamp(2rem, 1rem + 1.25vw, 2.8rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .kopf-karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kopf-karten { grid-template-columns: repeat(3, 1fr); } }
.kopf-karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius);
  padding: clamp(1rem, .7rem + .4vw, 1.4rem) clamp(1rem, .7rem + .4vw, 1.4rem)
           clamp(1.3rem, .98rem + .4vw, 1.7rem);
  display: flex; flex-direction: column; gap: .5rem;
  transition: background .25s ease;
}
.kopf-karte:hover { background: #FAFBFB; }
.kopf-karte .nr {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em;
  color: var(--farbe-akzent-dunkel); font-variant-numeric: tabular-nums;
}
.kopf-karte h3 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.kopf-foto {
  margin: 0 0 .9rem; overflow: clip; border-radius: var(--radius);
  background: var(--farbe-linie);
}
.kopf-foto img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%;
}
.steckbrief { margin: .6rem 0 0; display: grid; gap: .45rem; }
.steckbrief > div { display: grid; gap: .1rem; }
.steckbrief dt {
  font-size: var(--fs-mikro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--farbe-text-leise);
}
.steckbrief dd { margin: 0; font-size: var(--fs-text-s); line-height: var(--lh-text); }
.team-fuss {
  margin-top: clamp(1.5rem, .8rem + .875vw, 2.1rem);
  color: var(--farbe-text-leise); font-size: var(--fs-text-s); max-width: var(--zeile);
}
.team-fuss a { color: var(--farbe-text); text-underline-offset: .25em; }

/* ─── Virtuelle Anprobe: Hochformat-Video neben dem Text ──────────────
   Das Video ist im Hochformat aufgenommen. Es bekommt deshalb dieselbe
   Höhenbegrenzung wie die großen Fotos und steht mittig in seiner Spalte,
   damit die Section nicht aus dem Bildschirm läuft. */
.ki-video {
  /* Die Figur legt sich eng um das Hochformat, sonst stünde die
     Beschriftung weit neben dem Video und der gemusterte Grund liefe
     ins Leere. Der Innenabstand ist bewusst größer als bei den Fotos:
     Die Messingwinkel in den Ecken brauchen Platz, sonst liegen sie
     auf dem Bild statt daneben. */
  display: grid; justify-items: center; align-content: start;
  width: fit-content; margin-inline: auto;
  padding: clamp(1.75rem, 1rem + .9375vw, 2.35rem);
  padding-bottom: clamp(1.25rem, .5rem + .9375vw, 1.85rem);
}
/* Kleinere Winkel, enger an die Ecke gesetzt, damit zwischen Winkel und
   Video ein sichtbarer Abstand bleibt. */
.ki-video::before, .ki-video::after { width: 18px; height: 18px; }
.ki-video::before { top: 8px; left: 8px; }
.ki-video::after  { bottom: 8px; right: 8px; }
.ki-video video {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: var(--bild-max);
  border-radius: var(--radius); background: var(--farbe-tief);
}
.ki-video figcaption { color: rgba(255,255,255,.72); text-align: center; }
.ki-knopf { margin-top: clamp(1.25rem, .5rem + .9375vw, 1.85rem); }
@media (max-width: 899px) {
  .ki-video video { max-height: 70vh; margin-inline: auto; }
  .ki-video { padding: 1.5rem; padding-bottom: 1.15rem; }
  .ki-video::before, .ki-video::after { width: 14px; height: 14px; }
  .ki-video::before { top: 6px; left: 6px; }
  .ki-video::after  { bottom: 6px; right: 6px; }
}

/* Pflichthinweis zur Preisauszeichnung. Ruhig gesetzt, er soll die Liste
   nicht stören, aber lesbar sein: 5,22:1 auf hellem Grund. */
.preis-hinweis {
  margin-top: clamp(1rem, .6rem + .5vw, 1.4rem);
  font-size: var(--fs-klein); line-height: var(--lh-klein);
  color: var(--farbe-text-leise); max-width: var(--zeile);
}
.preis-hinweis.hell { color: rgba(255,255,255,.72); margin-inline: auto; }

/* Rückmeldung, wenn der Versand nicht geklappt hat. Baut das Skript. */
.formular-fehler {
  margin-bottom: 1.5rem; padding: 1rem 1.15rem;
  border-left: 3px solid #8E2F2F; background: #FBF2F2;
  color: #6B2222; font-size: var(--fs-text-s); line-height: var(--lh-text);
  max-width: var(--zeile);
}
.formular-fehler:focus-visible { outline: 2px solid var(--farbe-text); outline-offset: 3px; }

.uebersicht { border: 1px solid var(--farbe-linie); background: var(--farbe-flaeche); margin-bottom: 1.5rem; }
.uebersicht > div {
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  padding: .85rem 1.15rem; border-bottom: 1px solid var(--farbe-linie);
}
.uebersicht > div:last-child { border-bottom: 0; }
.uebersicht span {
  color: var(--farbe-text-leise); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  flex: none;
}
.uebersicht strong { text-align: right; font-weight: 600; font-size: var(--fs-text-s); }

.strecke-fuss {
  display: flex; gap: .75rem; flex-wrap: wrap; align-items: center;
  padding: 0 clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.5rem, 3.5vw, 2.5rem);
}
.strecke-fuss .weiter { margin-left: auto; }

/* ─── Formular ────────────────────────────────────────────────────────── */
.feldpaar { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .feldpaar { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: .35rem; }
.feld + .feld, .feldpaar + .feld { margin-top: .9rem; }
.feld label {
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--farbe-text-leise);
}
.feld input, .feld textarea, .feld select {
  width: 100%; padding: .8rem .95rem;
  border: 1px solid var(--farbe-linie-ui); border-radius: var(--radius);
  background: var(--farbe-flaeche);
}
/* Eigener Pfeil, damit das Feld auf allen Geräten gleich aussieht. */
.feld select {
  appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--farbe-text) 50%),
                    linear-gradient(135deg, var(--farbe-text) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .85rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--farbe-text); }
.feld textarea { resize: vertical; }

.einwilligung {
  display: flex; gap: .7rem; align-items: flex-start;
  margin: 1.5rem 0 0; font-size: var(--fs-klein); line-height: var(--lh-text);
  color: var(--farbe-text-leise);
}
.einwilligung input { width: auto; margin-top: .3rem; flex: none; accent-color: var(--farbe-akzent); }
.einwilligung a { color: var(--farbe-text); }

.falle { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Kontaktspalte */
.kontaktkarte {
  border: 1px solid var(--farbe-linie);
  padding: clamp(1.4rem, .2rem + 1.500vw, 2rem);
  background: var(--farbe-hintergrund);
}
.kontaktkarte h3 { margin-bottom: 1.1rem; }
.kontaktkarte dl { display: grid; gap: clamp(.8rem, 0rem + 1.000vw, 1.2rem); margin: 0; }
.kontaktkarte dt {
  font-size: var(--fs-mikro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--farbe-text-leise); margin-bottom: .35rem;
}
.kontaktkarte dd { margin: 0; font-size: var(--fs-text-s); }
.kontaktkarte a { text-decoration: none; }
.kontaktkarte a:hover { color: var(--farbe-akzent-dunkel); }
.zeiten-liste { list-style: none; padding: 0; margin: 0; font-size: var(--fs-text-s); }
.zeiten-liste li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .32rem 0; border-bottom: 1px solid var(--farbe-linie);
}
.zeiten-liste li:last-child { border-bottom: 0; }
.zeiten-liste li.zu { color: var(--farbe-text-leise); }
/* Zwischenzeile für Häuser mit Saisonbetrieb, etwa Lech */
.zeiten-liste li.saison {
  padding-top: .9rem;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--farbe-akzent-dunkel);
}
.zeiten-liste li.saison:first-child { padding-top: .2rem; }
.zeiten-liste li.saison span:last-child { letter-spacing: .04em; text-transform: none; color: var(--farbe-text-leise); }

/* ══════════════════════════════════════════════════════════════════════
   ABSCHLUSS EINES ABSCHNITTS
   Ein Knopf genau dort, wo der Besucher überzeugt ist.
   ══════════════════════════════════════════════════════════════════════ */
.ablauf-schluss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--farbe-linie);
}
.ablauf-schluss p {
  flex: 1 1 16rem; margin: 0;
  color: var(--farbe-text-leise); font-size: var(--fs-text-s);
}

/* ══════════════════════════════════════════════════════════════════════
   LIVE-HINWEIS ZU DEN ÖFFNUNGSZEITEN
   ══════════════════════════════════════════════════════════════════════ */
.offen-status {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: .75rem;
  font-size: var(--fs-klein); font-weight: 600;
  letter-spacing: .04em;
}
.offen-status::before {
  content: ''; flex: none;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor;
}
.offen-status:empty { display: none; }
/* #3F7D58 kam auf hellem Grund nur auf 4,41:1. */
.offen-status[data-zustand="offen"]   { color: #2B7450; }
.offen-status[data-zustand="spaeter"] { color: var(--farbe-akzent-dunkel); }
.offen-status[data-zustand="zu"]      { color: var(--farbe-text-leise); }

/* ══════════════════════════════════════════════════════════════════════
   KUNDENSTIMMEN
   ══════════════════════════════════════════════════════════════════════ */
.stimmen {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  background: var(--farbe-linie);
  border: 1px solid var(--farbe-linie);
}
.stimme {
  margin: 0; background: var(--farbe-flaeche);
  padding: clamp(1.5rem, 0rem + 1.875vw, 2.25rem);
  display: flex; flex-direction: column;
}
.stimme blockquote {
  font-family: var(--schrift-display);
  font-size: var(--fs-zitat);
  font-style: italic; line-height: var(--lh-klein); margin: 0;
}
.stimme blockquote::before { content: '„'; }
.stimme blockquote::after  { content: '“'; }
.stimme figcaption {
  margin-top: auto; padding-top: 1.4rem;
  border-top: 1px solid var(--farbe-linie);
  font-size: var(--fs-klein); color: var(--farbe-text-leise);
}
.stimme figcaption b {
  display: block; color: var(--farbe-text);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .25rem;
}
.stimmen-fuss { margin-top: 1.75rem; font-size: var(--fs-text-s); color: var(--farbe-text-leise); }

/* ══════════════════════════════════════════════════════════════════════
   HÄUSER
   ══════════════════════════════════════════════════════════════════════ */
.haeuser {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  background: var(--farbe-linie);
  border: 1px solid var(--farbe-linie);
}
.haus-karte {
  background: var(--farbe-flaeche);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex; flex-direction: column;
}

/* Subgrid lässt Adresse, Zeiten und Knopf über alle vier Karten hinweg auf
   einer Linie sitzen, auch wenn ein Ortsname zweizeilig umbricht.
   Ohne Subgrid bleibt das schlichte Flex-Layout darüber bestehen. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 620px) {
    /* Sieben Inhaltszeilen plus der Live-Hinweis „jetzt geöffnet" ergeben
       acht. Stimmt die Zahl nicht, laufen Öffnungszeiten und Knopf
       ineinander, wie es in Vaduz der Fall war. */
    .haus-karte {
      display: grid; grid-template-rows: subgrid; grid-row: span 8;
      align-content: start;
    }
  }
}
.haus-karte .nr {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em;
  color: var(--farbe-akzent-dunkel); font-variant-numeric: tabular-nums;
  margin-bottom: .7rem;
}
.haus-karte h3 { margin-bottom: .3rem; }
.haus-karte .rolle {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--farbe-text-leise); margin-bottom: 1.4rem;
}
.haus-karte address {
  font-style: normal; font-size: var(--fs-text-s); margin-bottom: 1.2rem;
}
.haus-karte a { text-decoration: none; }
.haus-karte a:hover { color: var(--farbe-akzent-dunkel); }
.haus-karte .kontaktzeilen {
  display: grid; gap: .25rem; font-size: var(--fs-text-s); margin-bottom: 1.4rem;
}
.haus-karte .zeiten-liste { margin-bottom: 1.6rem; }
.haus-karte .knopf { margin-top: auto; align-self: flex-start; }

/* ══════════════════════════════════════════════════════════════════════
   STANDORTKARTE
   Selbst gezeichnet, kein Kartendienst, kein externer Aufruf, keine
   Einwilligung nötig. Zeigt die vier Häuser in ihrer echten Lage
   zueinander: Bodensee im Norden, Rheintal in der Mitte, Arlberg im Osten.
   ══════════════════════════════════════════════════════════════════════ */
.kartenfeld {
  position: relative; isolation: isolate;
  background: linear-gradient(168deg, var(--farbe-tief) 0%, var(--farbe-tief-2) 100%);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  overflow: hidden;
}
.kartenfeld::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(114deg, rgba(255,255,255,.024) 0 1px, transparent 1px 7px);
}
.kartenfeld svg { width: 100%; height: auto; display: block; }

.karte-see   { fill: #24384C; }
.karte-fluss { stroke: #2E4459; stroke-width: 3; fill: none; stroke-linecap: round; }
.karte-grenze{ stroke: rgba(255,255,255,.13); stroke-width: 1.5; fill: none;
               stroke-dasharray: 7 6; }
.karte-berg  { fill: rgba(255,255,255,.05); }

.karte-ort { cursor: pointer; }
.karte-ort .punkt {
  fill: var(--farbe-akzent-hell);
  transition: r .2s ease;
}
.karte-ort .ring {
  fill: none; stroke: var(--farbe-akzent-hell); stroke-width: 1.5;
  opacity: 0; transition: opacity .25s ease, r .25s ease;
}
.karte-ort .beschriftung {
  fill: #fff; font-family: var(--schrift-text);
  font-size: 19px; font-weight: 600; letter-spacing: .5px;
}
.karte-ort .zusatz {
  fill: rgba(255,255,255,.55); font-family: var(--schrift-text);
  font-size: 14px; letter-spacing: .5px;
}
.karte-ort:hover .punkt, .karte-ort:focus-visible .punkt { r: 11; }
.karte-ort:hover .ring,  .karte-ort:focus-visible .ring  { opacity: .75; r: 20; }
.karte-ort:focus-visible { outline: none; }
.karte-ort:focus-visible .beschriftung { text-decoration: underline; }

.karte-legende {
  fill: rgba(255,255,255,.4); font-family: var(--schrift-text);
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
}

.karte-hinweis {
  margin-top: 1.1rem; font-size: var(--fs-klein); color: var(--farbe-text-leise);
}

/* Auf dem Handy schrumpft die Karte auf gut 250 Pixel. Die Beschriftung
   wird im Zeichenraster deshalb kräftig hochgesetzt, damit sie lesbar
   bleibt, und die Zusatzzeilen entfallen. */
.karte-ort .nur-schmal { display: none; }

@media (max-width: 700px) {
  .kartenfeld { padding: .85rem; }
  .karte-ort .beschriftung { font-size: 40px; }
  .karte-ort .zusatz,
  .karte-ort .nur-breit { display: none; }
  .karte-ort .nur-schmal { display: block; }
  .karte-legende { font-size: 30px; letter-spacing: 3px; }
  .karte-ort .punkt { r: 13; }
}

/* Zwei Spalten: Karte links, Liste der Häuser rechts */
.karten-raster { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .karten-raster { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.ort-liste { display: grid; gap: 1px; background: var(--farbe-linie); border: 1px solid var(--farbe-linie); }
.ort-liste a {
  display: flex; align-items: baseline; gap: 1rem;
  background: var(--farbe-flaeche); padding: 1.05rem 1.25rem;
  text-decoration: none; transition: background .2s;
}
.ort-liste a:hover, .ort-liste a:focus-visible { background: rgba(176,141,87,.09); }
.ort-liste .nr {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em;
  color: var(--farbe-akzent-dunkel); font-variant-numeric: tabular-nums; flex: none;
}
.ort-liste b { font-size: var(--fs-text); font-weight: 600; }
.ort-liste span { display: block; font-size: var(--fs-klein); color: var(--farbe-text-leise); margin-top: .15rem; }

/* ══════════════════════════════════════════════════════════════════════
   STOFFE ZUM DURCHSTÖBERN
   ══════════════════════════════════════════════════════════════════════ */
.stoff-filter {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1.25rem;
}
.filter-knopf {
  min-height: 44px; padding: .6rem 1.35rem;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie-ui); border-radius: var(--radius);
  font-size: var(--fs-klein); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.filter-knopf:hover { border-color: var(--farbe-akzent); }
.filter-knopf[aria-pressed="true"] {
  background: var(--farbe-tief); border-color: var(--farbe-tief); color: #fff;
}

.filter-zaehler {
  font-size: var(--fs-klein); color: var(--farbe-text-leise);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.filter-zaehler:empty { display: none; }

.stoffraster {
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
}
/* Auf schmalen Handys immer zwei Spalten. Einspaltig wäre die Seite bei
   56 Mustern endlos lang, und Stoffe erkennt man auch klein gut. */
@media (max-width: 520px) {
  .stoffraster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
}
/* min-width: 0 lässt die Kachel im Raster schrumpfen. Ohne das schiebt ein
   langes Wort wie „Sommerkollektion“ die Beschriftung in die Nachbarspalte. */
.stoffkachel { margin: 0; min-width: 0; }
.stoffkachel .rahmen {
  aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--farbe-linie);
  background: var(--farbe-flaeche);
}
.stoffkachel img { width: 100%; height: 100%; object-fit: cover; }
.stoffkachel figcaption {
  margin-top: .7rem;
  font-size: var(--fs-klein); line-height: var(--lh-klein);
  color: var(--farbe-text-leise);
  overflow-wrap: break-word; hyphens: auto;
}
.stoffkachel figcaption b {
  display: block; color: var(--farbe-text);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: .2rem;
  overflow-wrap: break-word; hyphens: auto;
}
@media (max-width: 520px) {
  .stoffkachel figcaption { font-size: var(--fs-label); }
  .stoffkachel figcaption b { font-size: var(--fs-mikro); letter-spacing: .06em; }
}
.stoffkachel[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .stoffkachel .rahmen { transition: border-color .25s ease, box-shadow .25s ease; }
  .stoffkachel:hover .rahmen {
    border-color: var(--farbe-akzent);
    box-shadow: 0 10px 26px rgba(16,23,32,.14);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SIGNET „ATELIER SAGMEISTER“
   Steht über den Abschnitten, die zur Maßarbeit gehören. Das Logo kommt
   als SVG vom Kunden und bleibt deshalb in jeder Größe scharf.
   ══════════════════════════════════════════════════════════════════════ */
.signet {
  display: block;
  width: clamp(185px, 21vw, 270px); height: auto;
  margin: clamp(1.5rem, 3vw, 2.4rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
  opacity: .85;
}
/* In der Abschnittszeile rechtsbündig statt als eigene Zeile darunter.
   Spart auf dem Desktop rund 150 Pixel Höhe. */
.marke { flex-wrap: wrap; }
.marke .signet {
  width: auto; height: clamp(2.5rem, .5rem + 2.500vw, 3.5rem);
  margin: -.9rem 0 -.2rem auto;
  align-self: flex-end;
}
@media (max-width: 520px) {
  .marke .signet { height: 34px; margin-top: -.4rem; }
}
.abschnitt-tief .signet, .hero .signet { filter: invert(1); opacity: .9; }

/* ══════════════════════════════════════════════════════════════════════
   NEWS
   ══════════════════════════════════════════════════════════════════════ */
.beitrag {
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--farbe-linie);
}
.beitrag + .beitrag { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.beitrag:last-child { border-bottom: 0; }
.beitrag-datum {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--farbe-akzent-dunkel);
  margin-bottom: .9rem;
}
.beitrag h2 { margin-bottom: 1.5rem; max-width: 22ch; }
.beitrag p { color: var(--farbe-text-leise); margin-bottom: 1.1rem; max-width: var(--zeile); }
.beitrag-fuss { margin-top: 2rem; }

/* Ab Tablet steht das Datum als Randspalte neben dem Text, wie im Magazin.
   Darunter bleibt alles untereinander. */
@media (min-width: 760px) {
  .beitrag {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
  .beitrag > * { grid-column: 2; }
  .beitrag-datum {
    grid-column: 1; grid-row: 1;
    margin-bottom: 0; padding-top: .6rem;
    text-align: right;
  }
  .beitrag h2 { grid-column: 2; grid-row: 1; max-width: 26ch; }
}

/* ══════════════════════════════════════════════════════════════════════
   MARKEN
   ══════════════════════════════════════════════════════════════════════ */
.marken {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  border-top: 1px solid var(--farbe-linie);
}
.marken li {
  border-bottom: 1px solid var(--farbe-linie);
  padding: .85rem .25rem;
  font-size: var(--fs-text-s); font-weight: 500;
  letter-spacing: .01em;
  display: flex; align-items: baseline; gap: .7rem;
}
.marken li::before {
  content: ''; flex: none;
  width: .7rem; height: 1px; background: var(--farbe-akzent);
  transform: translateY(-.3em);
}
.marken-fuss { margin-top: 2rem; color: var(--farbe-text-leise); font-size: var(--fs-text-s); }

/* ══════════════════════════════════════════════════════════════════════
   HALTUNG
   ══════════════════════════════════════════════════════════════════════ */
.haltung { text-align: center; }
.haltung blockquote {
  font-family: var(--schrift-display);
  font-size: var(--fs-band);
  font-weight: 400; font-style: italic; line-height: var(--lh-h3);
  max-width: 24ch; margin: 0 auto;
}
.haltung figcaption {
  margin-top: 2rem; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--farbe-text-leise);
}
.haltung .massband { max-width: 200px; margin: 2.25rem auto 0; }

/* ══════════════════════════════════════════════════════════════════════
   FUSS
   ══════════════════════════════════════════════════════════════════════ */
.fuss {
  background: var(--farbe-tief); color: rgba(255,255,255,.62);
  padding: clamp(3rem, 6vw, 4.5rem) var(--rand) 2rem;
  font-size: var(--fs-text-s);
}
.fuss-innen { max-width: var(--breite); margin-inline: auto; }
.fuss-raster {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(185px, 100%), 1fr));
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.fuss .logo { color: #fff; }
.fuss h4 {
  font-family: var(--schrift-text);
  font-size: var(--fs-mikro); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  /* .45 ergab nur 4,23:1, zu wenig für diese kleine Schrift. */
  color: rgba(255,255,255,.56); margin-bottom: 1rem;
}
.fuss a { color: rgba(255,255,255,.82); text-decoration: none; }
.fuss a:hover { color: var(--farbe-akzent-hell); }
.fuss ul { list-style: none; padding: 0; display: grid; gap: .35rem; }
/* Fußzeilenlinks sind keine Links mitten im Satz, sie brauchen deshalb
   eine Antippfläche von mindestens 24 Pixeln Höhe. */
.fuss ul a, .fuss-unten nav a { display: inline-block; padding-block: .35rem; }
.fuss p { margin-top: 1.1rem; }
/* Brücke zur Damen-Website */
.fuss-wechsel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--farbe-linie-tief);
}
.fuss-wechsel p {
  margin: 0; flex: 1 1 14rem;
  color: rgba(255,255,255,.7); font-size: var(--fs-text-s);
}

.fuss-unten {
  border-top: 1px solid var(--farbe-linie-tief);
  padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem;
  align-items: center; justify-content: space-between;
  font-size: var(--fs-klein);
}
.fuss-unten nav { display: flex; gap: 1.5rem; }

/* ══════════════════════════════════════════════════════════════════════
   RECHTSTEXTE
   ══════════════════════════════════════════════════════════════════════ */
.rechtstext {
  max-width: var(--breite-text);
  margin: clamp(2.5rem, 6vw, 4.5rem) auto clamp(4rem, 8vw, 6rem);
  padding: 0 var(--rand);
}
.rechtstext h1 { margin-bottom: 2.25rem; font-size: var(--fs-titel); }
.rechtstext h2 {
  margin: 2.75rem 0 .75rem; font-size: var(--fs-h3);
  padding-top: 1.5rem; border-top: 1px solid var(--farbe-linie);
}
.rechtstext h3 { margin: 1.75rem 0 .5rem; font-size: var(--fs-lead); }
.rechtstext p, .rechtstext ul { margin-bottom: 1rem; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { margin-bottom: .35rem; }
.rechtstext a { color: var(--farbe-text); }
.stand { margin-top: 3rem; color: var(--farbe-text-leise); font-size: var(--fs-text-s); }

.mitte { text-align: center; }
.mitte .knopf { margin-top: 1.5rem; }

/* ─── Sanftes Einblenden beim Scrollen ──────────────────────────────────
   Nicht der ganze Block kommt auf einmal, die Teile kommen nacheinander:
   erst die Kapitelzeile, dann die Überschrift, dann der Inhalt. Das sind
   wenige Zehntelsekunden Versatz, man liest sie nicht als Animation,
   sondern als Ruhe. Ohne JavaScript setzt das Skript die Klasse .da sofort,
   dann steht alles da. */
@media (prefers-reduced-motion: no-preference) {
  html.js .auftauchen > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.16,.84,.44,1);
  }
  html.js .auftauchen.da > * { opacity: 1; transform: none; }
  html.js .auftauchen.da > :nth-child(2) { transition-delay: .09s; }
  html.js .auftauchen.da > :nth-child(3) { transition-delay: .18s; }
  html.js .auftauchen.da > :nth-child(4) { transition-delay: .27s; }
  html.js .auftauchen.da > :nth-child(n+5) { transition-delay: .34s; }

  /* Zweite Ebene: Listen und Kartenreihen legen sich der Reihe nach ab,
     wie Stoffballen, die nebeneinander aufgeschlagen werden. */
  html.js .auftauchen .leistung,
  html.js .auftauchen .schritt,
  html.js .auftauchen .karte,
  html.js .auftauchen .haus-karte {
    opacity: 0; transform: translateY(14px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.16,.84,.44,1);
  }
  html.js .auftauchen.da .leistung,
  html.js .auftauchen.da .schritt,
  html.js .auftauchen.da .karte,
  html.js .auftauchen.da .haus-karte { opacity: 1; transform: none; transition-delay: .2s; }
  html.js .auftauchen.da .leistung:nth-child(2),
  html.js .auftauchen.da .schritt:nth-child(2),
  html.js .auftauchen.da .karte:nth-child(2),
  html.js .auftauchen.da .haus-karte:nth-child(2) { transition-delay: .28s; }
  html.js .auftauchen.da .leistung:nth-child(3),
  html.js .auftauchen.da .schritt:nth-child(3),
  html.js .auftauchen.da .karte:nth-child(3),
  html.js .auftauchen.da .haus-karte:nth-child(3) { transition-delay: .36s; }
  html.js .auftauchen.da .leistung:nth-child(4),
  html.js .auftauchen.da .schritt:nth-child(4),
  html.js .auftauchen.da .karte:nth-child(4),
  html.js .auftauchen.da .haus-karte:nth-child(4) { transition-delay: .44s; }
  html.js .auftauchen.da .leistung:nth-child(n+5),
  html.js .auftauchen.da .schritt:nth-child(n+5),
  html.js .auftauchen.da .karte:nth-child(n+5),
  html.js .auftauchen.da .haus-karte:nth-child(n+5) { transition-delay: .5s; }
}

/* ══════════════════════════════════════════════════════════════════════
   BEWEGUNG

   Alles hier ist Zugabe: Ohne Unterstützung im Browser, ohne JavaScript
   oder bei eingeschalteter Bewegungsreduzierung sieht die Seite genauso
   aus, sie steht dann nur still. Nichts davon versteckt Inhalte.
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* ─── Die Maßlinie zieht sich auf ─────────────────────────────────────
     Beim Scrollen wird sie von links freigelegt, wie ein Maßband, das
     ausgezogen wird. clip-path statt scaleX, damit die Teilstriche ihren
     Abstand behalten und nicht gestaucht werden. */
  @supports (animation-timeline: view()) {
    .massband {
      animation: massband-ziehen linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes massband-ziehen {
      from { clip-path: inset(0 100% 0 0); }
      to   { clip-path: inset(0 0 0 0); }
    }

    /* Im Ablauf steht die Linie senkrecht und füllt sich von oben nach
       unten, während man die vier Schritte durchgeht. */
    .ablauf::before {
      animation: massband-fuellen linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 65%;
    }
    @keyframes massband-fuellen {
      from { clip-path: inset(0 0 100% 0); }
      to   { clip-path: inset(0 0 0 0); }
    }
  }

  /* ─── Bilder blenden auf ──────────────────────────────────────────────
     Nur wenn JavaScript läuft, sonst blieben sie im schlimmsten Fall
     unsichtbar. Die Klasse am html-Element setzt das Skript. */
  html.js .bild img,
  html.js .galerie img,
  html.js .karte.foto img {
    opacity: 0;
    transition: opacity .7s ease;
  }
  html.js .bild img.geladen,
  html.js .galerie img.geladen,
  html.js .karte.foto img.geladen { opacity: 1; }

  /* ─── Stoffe reagieren auf Berührung ─────────────────────────────────── */
  .stoff { transition: transform .3s ease; }
  .stoff .probe { transition: border-color .3s ease, box-shadow .3s ease; }
  .stoff b, .stoff span { transition: color .3s ease; }

  .stoff:hover { transform: translateY(-7px); }
  .stoff:hover .probe {
    border-color: var(--farbe-akzent-hell);
    box-shadow: 0 14px 34px rgba(0,0,0,.4);
  }
  .stoff:hover span { color: var(--farbe-akzent-hell); }

  /* ─── Karten und Häuser heben sich leicht ────────────────────────────── */
  .haus-karte { transition: background .25s ease; }
  .haus-karte:hover { background: #FBFBFC; }

  /* ─── Der Auftritt oben ───────────────────────────────────────────────
     Beim Öffnen setzen sich Ort, Überschrift, Maßband, Text, Knöpfe und
     Zahlenleiste nacheinander. Nur Deckkraft und Verschiebung, deshalb
     springt kein Layout und die Schrift bleibt sofort lesbar. Nach gut
     einer Sekunde steht alles still. */
  html.js .hero-ort, html.js .hero-text, html.js .hero-knoepfe, html.js .hero-zahlen > * {
    animation: auftritt .75s cubic-bezier(.16,.84,.44,1) both;
  }
  /* Die Überschrift steigt nur auf, sie blendet nicht ein: Sie ist das
     größte Element der Seite und soll sofort auf dem Schirm stehen,
     auch für die Ladewertung der Suchmaschinen. */
  html.js .hero h1 { animation: auftritt-steigen .75s cubic-bezier(.16,.84,.44,1) both; }
  html.js .hero-text    { animation-delay: .16s; }
  html.js .hero-knoepfe { animation-delay: .22s; }
  html.js .hero-zahlen > :nth-child(1) { animation-delay: .28s; }
  html.js .hero-zahlen > :nth-child(2) { animation-delay: .33s; }
  html.js .hero-zahlen > :nth-child(3) { animation-delay: .38s; }
  html.js .hero-zahlen > :nth-child(4) { animation-delay: .43s; }
  html.js .musterkarte {
    animation: auftritt .75s cubic-bezier(.16,.84,.44,1) .34s both;
  }
  /* Beim Wechsel eines Stoffs blenden Probe und Nummer kurz weg. */
  .musterkarte .probe img, .musterkarte .nr { transition: opacity .42s ease; }
  .musterkarte li.wechselt .probe img, .musterkarte li.wechselt .nr { opacity: 0; }
  @keyframes auftritt { from { opacity: 0; transform: translateY(18px); } }
  @keyframes auftritt-steigen { from { transform: translateY(14px); } }

  /* Das Maßband unter der Überschrift zieht sich beim Öffnen auf. Oben
     steht es schon im Bild, dort wäre die Scrollfassung sofort fertig. */
  html.js .hero .massband {
    animation: massband-ziehen .95s cubic-bezier(.16,.84,.44,1) .14s both;
    animation-timeline: auto;
  }

  /* ─── Bilder werden aufgeschlagen ─────────────────────────────────────
     Beim Hereinscrollen wird das Foto von unten nach oben freigelegt und
     kommt dabei aus einer Spur Vergrößerung zur Ruhe, wie ein Stoff, der
     glatt gezogen wird. Der Rahmen schneidet mit, nichts läuft über. */
  .bild, .leistungen-foto, .galerie .rahmen, .karte.foto { overflow: clip; }
  @supports (animation-timeline: view()) {
    .bild img, .leistungen-foto img, .galerie .rahmen img, .karte.foto img {
      animation: bild-aufschlagen linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 26%;
    }
    @keyframes bild-aufschlagen {
      from { clip-path: inset(0 0 20% 0); transform: scale(1.035); }
      to   { clip-path: inset(0 0 0 0);   transform: scale(1); }
    }

    /* Der Lesestand als Messingfaden unter der Kopfzeile. */
    .kopf::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: linear-gradient(90deg, var(--farbe-akzent), var(--farbe-akzent-hell));
      transform: scaleX(0); transform-origin: left center;
      animation: lesestand linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes lesestand { to { transform: scaleX(1); } }
  }

  /* ─── Knöpfe füllen sich von links ────────────────────────────────────
     Statt eines harten Farbwechsels wandert die Füllung durch den Knopf.
     Umgesetzt über background-size, dadurch braucht es kein zusätzliches
     Element und die Schrift bleibt die ganze Zeit oben. */
  .knopf {
    /* Die Füllung hellt auf, statt mit Tinte zuzulaufen. So bleibt die
       Schrift während der ganzen Bewegung dunkel auf hell und der
       Kontrast stimmt in jedem Zwischenschritt. */
    background-image: linear-gradient(var(--farbe-akzent-hell), var(--farbe-akzent-hell));
    background-repeat: no-repeat; background-position: left center;
    background-size: 0 100%;
    transition: background-size .45s cubic-bezier(.16,.84,.44,1),
                color .3s ease, border-color .3s ease, transform .12s ease;
  }
  .knopf:hover, .knopf:focus-visible {
    background-color: var(--farbe-akzent);
    background-image: linear-gradient(var(--farbe-akzent-hell), var(--farbe-akzent-hell));
    background-repeat: no-repeat; background-position: left center;
    background-size: 100% 100%;
    border-color: var(--farbe-akzent-hell); color: var(--farbe-text);
  }
  /* Die beiden stillen Fassungen setzen weiter oben eine Kurzschreibweise
     für background und hätten damit Größe und Wiederholung zurückgesetzt.
     Deshalb hier jedes Mal alle vier Angaben ausgeschrieben. */
  .knopf.leise {
    background-color: transparent;
    background-image: linear-gradient(var(--farbe-akzent), var(--farbe-akzent));
    background-repeat: no-repeat; background-position: left center;
    background-size: 0 100%;
  }
  .knopf.leise:hover, .knopf.leise:focus-visible {
    background-color: transparent;
    background-image: linear-gradient(var(--farbe-akzent), var(--farbe-akzent));
    background-repeat: no-repeat; background-position: left center;
    background-size: 100% 100%;
    color: var(--farbe-text); border-color: var(--farbe-akzent);
  }
  .knopf.hell {
    background-color: transparent;
    background-image: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16));
    background-repeat: no-repeat; background-position: left center;
    background-size: 0 100%;
  }
  .knopf.hell:hover, .knopf.hell:focus-visible {
    background-color: transparent;
    background-image: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16));
    background-repeat: no-repeat; background-position: left center;
    background-size: 100% 100%;
    color: #fff; border-color: #fff;
  }
  .knopf:active { transform: translateY(1px); }

  /* ─── Preiszeilen: der Messingstrich wird nachgezogen ─────────────────
     Kein Versatz, keine Fläche: nur die Linie unter der Zeile und die
     Ziffer reagieren. */
  .leistung { position: relative; }
  .leistung::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--farbe-akzent);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .55s cubic-bezier(.16,.84,.44,1);
  }
  .leistung:hover::after { transform: scaleX(1); }
  .leistung .nr { transition: color .3s ease; }
  .leistung:hover .nr { color: var(--farbe-text); }

  /* ─── Stoffmuster im Band ─────────────────────────────────────────── */
  .folie { overflow: clip; }
  .folie img { transition: transform .6s cubic-bezier(.16,.84,.44,1); }
  .folie:hover img { transform: scale(1.05); }
  .folie figcaption { transition: color .3s ease; }
  .folie:hover figcaption { color: var(--farbe-akzent-hell); }
}

/* ─── Seitenwechsel blendet über ─────────────────────────────────────────
   Statt des harten Weißblitzes beim Klick auf einen anderen Reiter.
   Browser ohne Unterstützung navigieren wie bisher. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: seite-aus .22s ease both;
  }
  ::view-transition-new(root) {
    animation: seite-ein .34s ease both;
  }
  @keyframes seite-aus { to   { opacity: 0; } }
  @keyframes seite-ein { from { opacity: 0; transform: translateY(10px); } }
}

/* ─── Druck ───────────────────────────────────────────────────────────── */
@media print {
  .kopf, .fuss nav, .menue-schalter, .knopf, .strecke { display: none; }
  body { color: #000; background: #fff; }
  .hero, .preis, .stoffe, .fuss { background: #fff !important; color: #000 !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   BILDSCHIRMGERECHTE SECTIONS
   Ziel auf dem Desktop: Jede Section passt auf einen Bildschirm, niemand
   steht in einer Section und sieht nur ihre Hälfte. Deshalb richten sich
   Bildhöhen hier nach der Bildschirmhöhe (--bild-max) und Text und Bild
   stehen nebeneinander statt untereinander.
   Auf dem Handy bleibt alles untereinander, dort wird ohnehin gescrollt.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Zwei Spalten mit hohem Foto (Hochzeit) ─────────────────────────── */
@media (min-width: 900px) {
  /* Textspalte auf eine gut lesbare Zeilenlänge begrenzt, das Foto rechts */
  .zwei:has(> figure.bild img) { grid-template-columns: minmax(0, 40rem) auto; justify-content: space-between; }
  .zwei > figure.bild:has(img) { justify-self: end; }
  .zwei > figure.bild img {
    width: auto; max-width: 100%;
    max-height: max(420px, var(--bild-max));
  }
}

/* ─── Ablauf: Schrittliste links, Foto so hoch wie die Liste ────────── */
@media (min-width: 940px) {
  .ablauf-raster { grid-template-columns: 1.15fr .85fr; align-items: stretch; }
  /* Das Foto liegt auf einer ruhigen Platte und steht ganz im Bild.
     Vorher füllte es die Spalte beschnitten aus, dabei fehlten Kopf und
     Schuhe. Jetzt bestimmt die Schrittliste weiter die Höhe der Section
     (absolut gesetzt), das Bild passt sich darin ein, ohne Beschnitt. */
  .ablauf-raster > .bild {
    position: relative; min-height: 420px;
    background:
      radial-gradient(115% 80% at 50% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 62%),
      linear-gradient(168deg, #ECEEEF 0%, #DFE2E5 100%);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
  }
  .ablauf-raster > .bild img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    padding: clamp(1rem, .375rem + .9375vw, 1.6rem);
    object-fit: contain; object-position: 50% 50%;
  }
  /* Dauer rechts neben den Schritttitel statt als eigene Zeile */
  .schritt { display: grid; grid-template-columns: 1fr auto; column-gap: 1.25rem; align-items: baseline; }
  .schritt h3 { grid-column: 1; grid-row: 1; }
  .schritt > p:not(.nr):not(.dauer) { grid-column: 1 / -1; grid-row: 2; }
  .schritt .dauer { grid-column: 2; grid-row: 1; margin-top: 0; white-space: nowrap; }
  .ablauf-schluss { margin-top: clamp(1.5rem, 0rem + 1.875vw, 2.25rem); padding-top: clamp(1.1rem, .1rem + 1.250vw, 1.6rem); }
}

/* ─── Stoffe: Überschrift und Einleitung nebeneinander ──────────────── */
@media (min-width: 900px) {
  /* Nur die Slideshow auf der Atelierseite. Andere dunkle Sections mit
     der Klasse .stoffe haben einen anderen Aufbau. */
  #stoffe > .auftauchen {
    display: grid; grid-template-columns: 1.1fr 1fr;
    column-gap: clamp(2rem, 5vw, 4rem); align-items: end;
  }
  #stoffe > .auftauchen > .marke { grid-column: 1 / -1; }
  #stoffe > .auftauchen > .stoffe-text { margin-top: 0; }
  .stoffe .slider { margin-top: clamp(1.5rem, 2.500vw - .5rem, 2.5rem); }
  .folie { flex-basis: clamp(11.875rem, 4.375rem + 9.375vw, 15.625rem); }
  .folien { padding-block: .25rem 1rem; }
  .stoff-fuss { margin-top: 1rem; }
}

/* ─── Geschichte: Text links, zwei Bilder rechts ────────────────────── */
.haus-raster { display: grid; gap: clamp(2rem, 5vw, 3rem); grid-template-columns: 1fr; }
.haus-text p { color: var(--farbe-text-leise); margin-top: 1.1rem; }
.haus-text h2 { max-width: 20ch; }
@media (min-width: 1100px) {
  .haus-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
  .haus-raster .galerie-zwei { max-width: none; }
  .haus-raster .galerie-zwei .rahmen { height: clamp(300px, calc(var(--bild-max) - 6rem), 460px); }
}

/* ─── Häufige Fragen: Überschrift links, Fragen rechts ──────────────── */
.fragen-hinweis { margin-top: 1.1rem; color: var(--farbe-text-leise); font-size: var(--fs-text-s); max-width: 34ch; }
.fragen-hinweis a { color: var(--farbe-text); text-underline-offset: .2em; }
.fragen-kopf { margin-bottom: clamp(1.5rem, 0rem + 1.875vw, 2.25rem); }
@media (min-width: 980px) {
  #fragen > .auftauchen { max-width: var(--breite) !important; }
  /* Nur Überschrift und Fragen stehen nebeneinander. Der Abschlusssatz
     liegt außerhalb dieses Rasters, deshalb endet der Laufweg der
     mitlaufenden Überschrift zwingend über ihm. Früher gehörte er zum
     selben Raster, dann schob sich die Überschrift beim Scrollen in
     seinen Text. Safari und Chrome rechnen den Laufweg unterschiedlich,
     diese Trennung gilt in beiden. */
  .fragen-raster {
    display: grid; grid-template-columns: .8fr 1.2fr;
    column-gap: clamp(2.5rem, 6vw, 5rem); align-items: start;
  }
  #fragen .fragen-kopf { margin-bottom: 0; position: sticky; top: 7rem; }
}

/* ─── Zitatband: bewusst eine ruhige Pause, aber keine schmale Leiste ─ */
@media (min-width: 900px) {
  .haltung { padding-block: calc(var(--abstand) * 1.15); display: grid; align-content: center; }
}

/* ─── Standortkarten kompakter ──────────────────────────────────────── */
@media (min-width: 900px) {
  .haus-karte { padding: clamp(1.4rem, .2rem + 1.500vw, 2rem); }
  .haus-karte .nr { margin-bottom: .45rem; }
  .haus-karte .rolle { margin-bottom: 1rem; }
  .haus-karte address { margin-bottom: .9rem; }
  .haus-karte .kontaktzeilen { margin-bottom: 1rem; }
  .haus-karte .zeiten-liste { margin-bottom: 1.2rem; font-size: var(--fs-klein); }
  .zeiten-liste li { padding: .24rem 0; }
  .zeiten-liste li.saison { padding-top: .6rem; }
}

/* ─── Stoffseite: Filter im Kopf, Leiste unter dem Raster ───────────── */
.stoff-kopf .stoff-filter { margin: 1.1rem 0 0; }
.stoff-leiste {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .75rem 1.5rem;
  margin-top: clamp(1.25rem, 1.875vw - .25rem, 2rem);
  padding-top: clamp(1rem, .2rem + 1.000vw, 1.4rem);
  border-top: 1px solid var(--farbe-linie);
}
.stoff-leiste .filter-zaehler { margin: 0; }
.stoff-hinweis { margin: 0 0 0 auto; font-size: var(--fs-text-s); color: var(--farbe-text-leise); }
.stoff-hinweis a { color: var(--farbe-text); }
@media (max-width: 700px) {
  .stoff-hinweis { margin-left: 0; flex-basis: 100%; }
  .stoff-leiste .knopf { flex: 1 1 100%; }
}
@media (min-width: 900px) {
  /* Kacheln etwas kleiner, damit zwei Reihen samt Filter auf den Schirm passen */
  .stoffraster {
    grid-template-columns: repeat(auto-fill, minmax(clamp(7.5rem, 1.875rem + 7.031vw, 10.3125rem), 1fr));
    gap: 1rem;
  }
  .stoff-kopf { align-items: start; }
}

/* ─── Unterseiten: einheitlicher Seitenkopf ────────────────────────────
   Gleiche Höhe und gleiche Titelgröße auf allen Unterseiten. Die Startseite
   des Ateliers behält ihren größeren Titel, so bleibt die Rangfolge klar:
   Startseite rund 76 px, Unterseiten rund 64 px, Abschnitte rund 45 px. */
body:not(:has(.hero-zahlen)) .hero h1 { font-size: var(--fs-titel); }
@media (min-width: 900px) {
  body:not(:has(.hero-zahlen)) .hero {
    min-height: min(66svh, 600px);
    display: grid; align-content: center;
  }
}

/* ─── Markenliste dichter ───────────────────────────────────────────── */
@media (min-width: 900px) {
  .marken { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .marken li { padding: .6rem .25rem; font-size: var(--fs-text-s); }
}

/* ─── Standortkarten: Nummer oben rechts statt eigener Zeile ────────── */
@media (min-width: 900px) {
  .haus-karte { position: relative; }
  .haus-karte .nr {
    position: absolute; top: clamp(1.4rem, .2rem + 1.500vw, 2rem); right: clamp(1.4rem, .2rem + 1.500vw, 2rem);
    margin: 0;
  }
  .haus-karte address { font-size: var(--fs-text-s); }
  .haus-karte .kontaktzeilen { font-size: var(--fs-text-s); margin-bottom: .8rem; }
  .haus-karte .rolle { margin-bottom: .75rem; }
  .haus-karte address { margin-bottom: .7rem; }
  .haus-karte .zeiten-liste { margin-bottom: .9rem; }
  .haus-karte .offen-status { font-size: var(--fs-klein); margin-bottom: .5rem; }
}

/* ─── Buchung: Kontaktspalte zweispaltig, Öffnungszeiten darunter ───── */
@media (min-width: 980px) {
  .buchung-raster { grid-template-columns: 1.2fr .8fr; }
  .kontaktkarte dl { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .kontaktkarte dl > div:nth-child(4) { grid-column: 1 / -1; order: 1; }
  .kontaktkarte dd { font-size: var(--fs-text-s); line-height: var(--lh-text); }
}

/* ══════════════════════════════════════════════════════════════════════
   FLACHE BILDSCHIRME
   Laptops mit Skalierung zeigen oft nur 700 bis 800 Pixel Höhe, etwa
   1536 x 730 oder 1280 x 720. Dort werden die dichtesten Sections
   anders angeordnet, damit sie trotzdem auf einen Bildschirm passen.
   ══════════════════════════════════════════════════════════════════════ */


@media (min-width: 940px) and (max-height: 820px) {
  /* Flache Bildschirme: Section-Abstand fluid etwas knapper.
     48 px bei 1280, 72 px bei 1920 statt 56 und 104 px. */
  :root { --abstand: clamp(3rem, .5rem + 3.125vw, 4.5rem); }
  /* Ablauf: vier Schritte im Zweierraster, das Foto wird schmaler */
  /* Die Spalte bleibt breit genug, damit der Anzug ganz und in erkennbarer
     Größe darin steht. Vorher war sie so schmal, dass nur ein Streifen blieb. */
  .ablauf-raster { grid-template-columns: 1.5fr .5fr; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .ablauf-raster > .bild { min-height: 320px; }
  .ablauf { padding-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; }
  .ablauf::before { display: none; }
  .schritt { padding-bottom: 0; grid-template-columns: auto 1fr; column-gap: .6rem; }
  .schritt .nr { position: static; grid-column: 1; grid-row: 1; background: none; padding: 0; width: auto; }
  .schritt h3 { grid-column: 2; font-size: var(--fs-lead); }
  .schritt > p:not(.nr):not(.dauer) { grid-column: 1 / -1; grid-row: 2; font-size: var(--fs-text-s); margin-top: .2rem; }
  .schritt .dauer { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: .45rem; }

  /* Der neue Abschnitt mit dem Hochformat-Video und der Preishinweis
     brauchen auf flachen Bildschirmen etwas weniger Platz, sonst passt
     die Section nicht mehr auf einen Schirm. */
  .ki-video { padding: .5rem; }
  .ki-video video { max-height: 420px; }
  .ki-knopf { margin-top: 1rem; }
  .preis-hinweis { margin-top: .55rem; font-size: var(--fs-mikro); }

  /* Fragen und Standortkarten dichter */
  .frage summary { font-size: var(--fs-lead); padding-top: .8rem; padding-bottom: .8rem; }
  .frage p { font-size: var(--fs-text-s); padding-bottom: 1rem; }
  .haus-karte { padding: 1.1rem 1.2rem; }
  .haus-karte h3 { font-size: var(--fs-lead); }
  .haus-karte .rolle { margin-bottom: .5rem; }
  .haus-karte address, .haus-karte .kontaktzeilen { font-size: var(--fs-klein); line-height: var(--lh-klein); }
  .haus-karte .kontaktzeilen { gap: .1rem; margin-bottom: .6rem; }
  .haus-karte .zeiten-liste { font-size: var(--fs-klein); margin-bottom: .6rem; }
  .zeiten-liste li { padding: .14rem 0; }
  .zeiten-liste li.saison { padding-top: .4rem; }
  .marken li { padding: .42rem .25rem; }

  /* Buchung */
  .kontaktkarte { padding: 1.1rem 1.3rem; }
  .kontaktkarte h3 { margin-bottom: .7rem; font-size: var(--fs-lead); }
  .kontaktkarte dl { gap: .6rem 1.25rem; }
  .strecke-kopf li { padding: .7rem .4rem; }
  .stufe > p.hinweis { margin-bottom: 1.1rem; }
  .wahl label { padding: .75rem 1rem; }
  .strecke-fuss { padding-bottom: 1.2rem; }
}

/* Filterknöpfe im Kopf der Stoffseite: eine Zeile statt zwei */
@media (min-width: 900px) {
  .stoff-kopf { grid-template-columns: 1fr 1.25fr; }
  .stoff-kopf .filter-knopf { padding: .5rem 1rem; font-size: var(--fs-label); min-height: 40px; }
  .stoff-kopf .stoff-filter { gap: .4rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   SEHR FLACHE BILDSCHIRME (unter 700 Pixel Höhe)
   Etwa ältere 1366er-Laptops mit Browserleisten. Abstände und große
   Schriften rücken hier noch einmal enger zusammen.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) and (max-height: 700px) {
  :root { --abstand: clamp(2.5rem, .5rem + 2.500vw, 3.5rem); }
  .marke { margin-bottom: 1.1rem; padding-bottom: .6rem; }
  h2 { font-size: var(--fs-h2); }
  .h2-abstand, .leistungen-kopf { margin-bottom: 1rem; }
  .hero { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .hero .massband { margin: .8rem 0; }
  .hero-knoepfe { margin-top: 1rem; }
  .hero-zahlen { margin-top: 1rem; }
  .hero-zahlen div { padding: .7rem 1rem; }
  .preis-zahl { font-size: var(--fs-titel); margin: .5rem 0; }
  .preis .massband { margin: 1rem auto; }
  .preis-liste { margin-top: 1.25rem; }
  .preis-liste li { padding-top: .7rem; }
  .stimme { padding: 1.2rem 1.4rem; }
  .stimme blockquote { font-size: var(--fs-text); }
  .fuss { padding-top: 2.5rem; padding-bottom: 1.5rem; }
  .fuss-raster { gap: 1.5rem; }
  .welt-foto { height: clamp(12.5rem, 0rem + 15.625vw, 18.75rem); }
}

/* ─── News: Beitrag mit Bildstrecke ─────────────────────────────────────
   Handy: Bilder unter dem Text, ein breites Foto, darunter Paare.
   Desktop: Text links, die fünf Fotos als ruhige Collage rechts daneben,
   in einer festen Höhe, damit der ganze Beitrag auf einen Bildschirm passt. */
.beitrag-bilder {
  display: grid; gap: .6rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 1.75rem;
}
.beitrag-bilder figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--farbe-linie); }
.beitrag-bilder img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.beitrag-bilder figure:nth-child(1) { grid-column: 1 / -1; }
.beitrag-bilder figure:nth-child(1) img { aspect-ratio: 3 / 2; }
.beitrag-bilder figure:nth-child(3) img,
.beitrag-bilder figure:nth-child(4) img { aspect-ratio: 4 / 3; }
.beitrag-bilder figure:nth-child(2) { order: 2; }
.beitrag-bilder figure:nth-child(5) { order: 3; }
.beitrag-bilder figure:nth-child(3) { order: 4; }
.beitrag-bilder figure:nth-child(4) { order: 5; }
.beitrag-bilder figure:nth-child(5) img { object-position: 50% 30%; }

@media (min-width: 1000px) {
  .beitrag.mit-bildern {
    grid-template-columns: 9rem minmax(0, 1.15fr) minmax(0, 1.2fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
  .beitrag.mit-bildern > .beitrag-bilder {
    grid-column: 3; grid-row: 1 / span 6; align-self: start;
    margin-top: 0;
    grid-template-columns: .9fr 1.1fr 1.1fr;
    grid-template-rows: 1fr 1fr;
    height: clamp(340px, calc(var(--bild-max) + 2rem), 540px);
  }
  .beitrag.mit-bildern .beitrag-bilder figure { order: 0; }
  .beitrag.mit-bildern .beitrag-bilder img { aspect-ratio: auto; }
  .beitrag.mit-bildern .beitrag-bilder figure:nth-child(1) { grid-column: 2; grid-row: 1; }
  .beitrag.mit-bildern .beitrag-bilder figure:nth-child(2) { grid-column: 1; grid-row: 1 / 3; }
  .beitrag.mit-bildern .beitrag-bilder figure:nth-child(3) { grid-column: 3; grid-row: 1; }
  .beitrag.mit-bildern .beitrag-bilder figure:nth-child(4) { grid-column: 2; grid-row: 2; }
  .beitrag.mit-bildern .beitrag-bilder figure:nth-child(5) { grid-column: 3; grid-row: 2; }
  .beitrag.mit-bildern h2 { max-width: none; }
  .beitrag.mit-bildern p { font-size: var(--fs-text-s); margin-bottom: .9rem; }
  .beitrag.mit-bildern .beitrag-fuss { margin-top: 1.4rem; }
}

/* ─── Wappen im Zitatband ───────────────────────────────────────────── */
.haltung-wappen {
  display: block; margin: 0 auto clamp(1.25rem, 1.875vw - .25rem, 2rem);
  width: clamp(5.5rem, 6.875vw - 0rem, 8.25rem); height: auto;
}

/* ─── Kundenstimmen: Überschrift links, Zitate rechts untereinander ─────
   In drei schmalen Spalten kam die Kursive nur auf 30 bis 39 Zeichen pro
   Zeile. Untereinander in einer Spalte liegt sie im lesbaren Bereich. */
@media (min-width: 980px) {
  #stimmen > .auftauchen {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    column-gap: clamp(2.5rem, 6vw, 5rem); align-items: start;
  }
  #stimmen > .auftauchen > .marke { grid-column: 1 / -1; }
  #stimmen h2 { margin-bottom: 0; }
  .stimmen { grid-template-columns: 1fr; }
  .stimme { padding: clamp(1.1rem, .78rem + .4vw, 1.4rem) clamp(1.3rem, .98rem + .4vw, 1.6rem); }
  .stimme blockquote { max-width: var(--zeile); }
  .stimme figcaption { margin-top: .8rem; padding-top: .7rem; }
}

/* ─── Leistungen als Preisliste des Ateliers ────────────────────────────
   Links Überschrift, Einleitung und Foto, rechts die Leistungen als Zeilen.
   Vorher standen die Beschreibungen in drei schmalen Karten und kamen nur
   auf rund 40 Zeichen pro Zeile. */
.leistungen-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 1.25vw, 2.5rem); }
.leistungen-raster > .leistungen-kopf { display: block; margin-bottom: 0; gap: 0; align-items: stretch; }
.leistungen-raster > .leistungen-kopf p { margin-top: clamp(1rem, .7rem + .4vw, 1.3rem); max-width: var(--zeile); }
.leistungen-foto {
  position: relative; overflow: hidden; margin: 1.5rem 0 0;
  aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--farbe-tief);
}
.leistungen-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.leistungen-foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.2rem 1rem;
  background: linear-gradient(transparent, rgba(16,23,32,.78));
  color: #fff; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}

.leistungen-liste { border-top: 1px solid var(--farbe-linie); }
.leistung {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: .75rem;
  padding: clamp(1rem, .6rem + .5vw, 1.3rem) 0;
  border-bottom: 1px solid var(--farbe-linie);
}
/* Auf flachen Bildschirmen etwas dichter, damit die Section mit dem
   Hinweis zur Umsatzsteuer noch auf einen Schirm passt. */
@media (min-width: 940px) and (max-height: 820px) {
  .leistung { padding-block: .8rem; }
}
.leistung .nr {
  grid-row: 1 / span 2; padding-top: .5rem;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em;
  color: var(--farbe-akzent-dunkel); font-variant-numeric: tabular-nums;
}
.leistung-name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.leistung h3 { margin: 0; }
.leistung .ab {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; line-height: var(--lh-klein);
}
.leistung .ab a { color: inherit; text-underline-offset: .25em; }
.leistung-text {
  grid-column: 2; margin-top: .35rem;
  font-size: var(--fs-text-s); color: var(--farbe-text-leise); max-width: var(--zeile);
}

@media (min-width: 1000px) {
  .leistungen-raster {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    column-gap: clamp(2.5rem, .5rem + 2.5vw, 4rem); align-items: stretch;
  }
  .leistungen-raster > .leistungen-kopf { display: flex; flex-direction: column; }
  .leistungen-foto { flex: 1 1 auto; aspect-ratio: auto; min-height: 11rem; }
  .leistung {
    grid-template-columns: 2rem minmax(0, 10.5rem) minmax(0, 1fr);
    column-gap: clamp(1rem, .5rem + .6vw, 1.4rem); align-items: baseline;
  }
  .leistung .nr { grid-row: auto; padding-top: 0; }
  .leistung-name { display: block; }
  .leistung .ab { display: block; margin-top: .3rem; }
  .leistung-text { grid-column: 3; margin-top: 0; }
}

/* ─── Kundenstimmen als Slider ──────────────────────────────────────── */
.stimmen { display: block; background: none; border: 0; }
.stimmen-spur {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; overscroll-behavior-x: contain;
  border: 1px solid var(--farbe-linie); background: var(--farbe-flaeche);
  scrollbar-width: none;
}
.stimmen-spur::-webkit-scrollbar { display: none; }
.stimmen-spur:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 3px; }
.stimmen-spur .stimme { flex: 0 0 100%; scroll-snap-align: start; border: 0; }
.stimmen .slider-steuer { margin-top: clamp(.9rem, .6rem + .4vw, 1.2rem); }
.stimmen .slider-pfeil { color: var(--farbe-text); border-color: var(--farbe-linie); }
.stimmen .slider-pfeil:hover:not(:disabled) { color: #fff; }
.slider-stand {
  min-width: 3.5rem; text-align: center;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em;
  font-variant-numeric: tabular-nums; color: var(--farbe-text-leise);
}
@media (prefers-reduced-motion: reduce) { .stimmen-spur { scroll-behavior: auto; } }

/* Zitatbänder: fluider Innenabstand statt fester Mindesthöhe */
.haltung { padding-block: calc(var(--abstand) * 1.5); }