/* ---------- SCHRIFTEN (lokal, keine externen Aufrufe) ----------
   Fraunces und Inter sind Variable Fonts (SIL Open Font License 1.1).
   Eine Datei deckt jeweils den Gewichtsbereich 400-600 ab; die Subsets
   latin und latin-ext genügen für deutschsprachige Inhalte.
   Kursive Schnitte sind bewusst nicht eingebunden: die wenigen kursiven
   Stellen sind Inter-Fließtext, dort genügt die synthetische Kursive. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ivory: #F5F1E8;
  --card: #FBF9F4;
  --ink: #201C18;
  --grey: #5B5348;
  --grey-light: #736B5F;
  /* Nur für große Ziffern (.section-num, .schritt-num, .stage-letter, alle
     ≥ 24 px): dort reicht 3:1. Für Text ist der Ton zu hell. */
  --grey-ziffer: #8C8477;
  --oxblood: #6E1423;
  --oxblood-dark: #4A0D18;
  --line: rgba(32, 28, 24, 0.12);
  --line-strong: rgba(32, 28, 24, 0.2);

  /* Amber = Baustellenmarkierung, NICHT Teil der Palette (Skill: aufbau.md,
     Regel 6). Solange irgendwo Amber steht, ist die Seite nicht
     veröffentlichungsreif. #9A5B00 erreicht auf Elfenbein 4,75:1 und ist
     damit auch als Text lesbar. */
  --amber: #9A5B00;
  --amber-fill: rgba(154, 91, 0, 0.07);

  /* Kopfzeile: Das Logo gibt die Höhe vor, dazu oben und unten dieselbe Luft.
     44 + 2 × 12 = 68 px Inhalt, plus 1 px Trennlinie = 69 px hoher Header. */
  --logo: 44px;
  --header-pad-y: 12px;
  --header-h: calc(var(--logo) + 2 * var(--header-pad-y));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Papierkorn über der ganzen Seite: feines Rauschen als Inline-SVG,
   liegt über allem, fängt aber keine Klicks ab. Kein externer Aufruf. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, .display {
  font-family: 'Fraunces', serif;
  color: var(--ink);
  margin: 0;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- HEADER ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: box-shadow 0.2s ease;
}
/* Rückfall für Browser ohne color-mix */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  header { background: rgba(251, 249, 244, 0.88); }
}
header.is-scrolled { box-shadow: 0 2px 14px rgba(32, 28, 24, 0.09); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Achtung: .nav steht hinter .wrap und hat dieselbe Spezifität. Eine
     padding-Kurzschreibweise ohne Seitenwert würde den 32-px-Rand von .wrap
     löschen — dann klebt das Logo unter 1040 px am linken Fensterrand. */
  padding: var(--header-pad-y) 32px;
  min-height: var(--header-h);
}
.wordmark {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
/* flex: none — sonst staucht das Flex-Layout das Bild bei engem Platz,
   statt die Zeile umbrechen zu lassen. */
.brand img.brand-icon {
  height: var(--logo);
  width: var(--logo);
  flex: none;
  display: block;
}
/* Kopfzeile: liegendes Lockup als ein Bild, Emblem und Schriftzug in einem.
   Die Datei liegt in doppelter Auflösung vor (361 × 88 für 181 × 44 auf dem
   Schirm), damit die feinen Zifferblatt-Striche auf Retina scharf bleiben.
   Die Breite folgt der Höhe — ein anderes --logo skaliert das Logo mit. */
.brand img.brand-logo {
  height: var(--logo);
  width: auto;
  flex: none;
  display: block;
}
.brand .wordmark { font-size: 19px; }
.nav-main { display: flex; align-items: center; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  color: var(--grey);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--oxblood); }
/* aktiver Abschnitt (vom Skript gesetzt) */
.nav-links a.is-current { color: var(--ink); border-bottom-color: var(--oxblood); }

/* Kontakt als kleiner Button, rechts außen – rutscht mobil ins Menü */
.btn-nav {
  font-size: 13px;
  line-height: 18px;
  padding: 10px 18px;
  border-bottom: none;
}
.nav-links .btn-nav:hover { color: var(--card); }

/* Burger – nur mobil sichtbar */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle span { margin: 0 auto; position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ''; position: absolute; left: 0; }
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------- HEADER DER STARTSEITE: nur Navigation ----------
   Eigene Klasse, weil /anlaesse/ vorerst den alten Header mit Logo und
   Umschalter behält (wird in Block 7 angeglichen). Hier kein Oxblood:
   die Akzentfarbe gehört an den Handlungsort, nicht in die Kopfzeile
   (aufbau.md, Regel 4). */
.header-nav .nav {
  justify-content: flex-start;
  /* Feste Höhe, damit die Zeile nicht springt, sobald die Wortmarke
     beim Scrollen dazukommt. Sie ist mit 20 px niedriger als die Zeile –
     die Mindesthöhe hält den Header trotzdem ruhig. */
  min-height: 56px;
  align-items: center;
  padding: 14px 32px;
}
.header-nav .nav-main { margin-left: auto; }

/* Wortmarke: erscheint erst, wenn das Etikett aus dem Bild gescrollt ist.
   Bewusst ohne Übergang – das eine Bewegungselement der Seite sitzt am
   Anfrage-Button, nicht im Header.
   Hier steht nur die ANLASSWERK-Zeile, aus dem Master geschnitten: kein
   Monogramm, keine Zierlinie. Sie ist 9,34 : 1 lang und darf deshalb nicht
   so hoch stehen wie das alte Querlogo – 20 px Höhe ergeben 187 px Breite
   und lesen sich wie eine Zeile, nicht wie ein zweites Bild. */
.header-nav .header-brand { display: none; }
.header-nav.shows-brand .header-brand { display: block; }
.header-nav .header-brand img {
  height: 20px;
  width: auto;
  display: block;
}

.header-nav .nav-links a:hover { color: var(--ink); }
.header-nav .nav-links a.is-current {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- ETIKETT ----------
   Logo, Versalzeile, Unterzeile, Button – zentriert, in dieser Reihenfolge.
   Die Wortmarke steckt im Logo, deshalb steht der Name nicht als Text daneben. */
.etikett {
  text-align: center;
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--line);
}
/* Das Logo trägt Monogramm, Wortmarke und die Zierlinie mit der Raute. Die
   Sparte steht darunter als Text, damit sie geändert werden kann, ohne das
   Logo anzufassen – auf /anlaesse/ steht dort eine andere Zeile.

   Die Datei hat 17 px transparenten Rand bei 900 px Breite, also 1,889 %.
   Auf 380 px Anzeigebreite sind das 7,2 px, die unter der Zierlinie schon
   mitlaufen. Der Außenabstand zieht sie ab, damit optisch genau 8 px
   zwischen Zierlinie und Versalzeile stehen – bei jeder Anzeigebreite. */
.etikett-logo {
  --logo-w: 380px;
  --logo-rand: 0.01889;
  display: block;
  width: var(--logo-w);
  max-width: 100%;
  height: auto;
  margin: 0 auto calc(8px - var(--logo-w) * var(--logo-rand));
}
/* Auf /betrieb/ und /anlaesse/ ist das Logo zugleich der Weg zur Startseite.
   Keine Linkoptik: der Link ist so breit wie das Logo und trägt sonst
   nichts; nur beim Tastaturfokus erscheint der übliche Fokusrahmen. */
.etikett-logo-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-decoration: none;
}
.etikett-versal {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 16px;
}
/* Die Unterzeile ist die H1. Schriftart und Schnitt müssen ausdrücklich
   gesetzt sein, sonst greifen die Vorgaben für h1 (Fraunces) und die des
   Browsers (fett) – die Zeile soll aussehen wie vorher als Absatz. */
.etikett-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--grey);
  max-width: 34em;
  margin: 0 auto 32px;
}
/* Lead unter der H1 (Startseite und /anlaesse/). Steht er da, rückt er
   näher an die H1; ein Button folgt mit dem üblichen Abstand. */
.etikett-sub:has(+ .etikett-lead) { margin-bottom: 14px; }
.etikett-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--grey);
  max-width: 36em;
  margin: 0 auto;
}
/* Folgt ein Button, hält der Lead den Abstand – so bleiben Button und
   Textlink daneben auf einer Mittellinie. */
.etikett-lead:not(:last-child) { margin-bottom: 28px; }

/* /anlaesse/: die Jubiläumszahlen liegen blass hinter dem Etikett, verteilt
   auf die beiden Ränder neben dem zentrierten Inhalt – nicht hinter Logo und
   Text. Deckkraft 60 % der früheren Hero-Werte. */
.etikett-anlaesse { position: relative; overflow: hidden; }
.etikett-anlaesse .wrap { position: relative; z-index: 1; }
.etikett-anlaesse .hero-numerals {
  top: 0;
  left: 0;
  right: auto;
  width: 100%;
  opacity: 0.6;
}
.etikett-anlaesse .n25  { top: 8%;  left: 4%;  font-size: clamp(56px, 8.4vw, 120px); }
.etikett-anlaesse .n50  { top: 50%; left: 11%; font-size: clamp(64px, 10vw, 150px); }
.etikett-anlaesse .n75  { top: 4%;  left: 75%; font-size: clamp(64px, 10.4vw, 156px); }
.etikett-anlaesse .n100 { top: 48%; left: 71%; font-size: clamp(64px, 11.2vw, 170px); }

/* Sparten-Umschalter: Anlässe | Gestaltung */
.switch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.switch-seg {
  padding: 8px 18px;
  text-decoration: none;
  color: var(--grey);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.switch-seg + .switch-seg { border-left: 1px solid var(--line-strong); }
.switch-seg:hover { color: var(--oxblood); }
.switch-seg.is-active { background: var(--oxblood); color: var(--card); }
.switch-seg.is-active:hover { background: var(--oxblood-dark); color: var(--card); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--card);
  padding: 96px 0 88px;
}
.hero-numerals {
  position: absolute;
  top: -20px;
  right: -40px;
  width: 62%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
.hero-numerals span {
  position: absolute;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: var(--oxblood);
  line-height: 1;
  white-space: nowrap;
}
/* rund 20 % größer als zuvor; die 100 liegt bewusst hinter der Headline */
.n25 { top: 4%;  left: 8%;  font-size: clamp(72px, 10.8vw, 156px); opacity: 0.045; transform: rotate(-9deg); }
.n50 { top: 0%;  left: 30%; font-size: clamp(96px, 14.4vw, 210px); opacity: 0.055; transform: rotate(6deg); }
.n75 { top: 16%; left: 52%; font-size: clamp(120px, 18vw, 264px);  opacity: 0.07;  transform: rotate(-5deg); }
/* endet hinter der Headline und bleibt über dem Lead-Text */
.n100{ top: 23%; left: 16%; font-size: clamp(144px, 22.8vw, 336px); opacity: 0.06; transform: rotate(4deg); }

/* Hero-Motiv Sparte Gestaltung: Schriftmusterblatt.
   Zeichen aus der Hausschrift, rechts locker verteilt wie Abzüge auf einem
   Musterbogen — teils gefüllt, teils als Kontur, zwei am Rand angeschnitten. */
/* Seit Block 1 ungenutzt: Der Startseiten-Hero zeigt drei Blätter statt des
   Schriftmusterblatts. Die Regeln bleiben bis zum Aufräumen in Block 7 stehen. */
.hero-specimen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.hero-specimen span {
  position: absolute;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  line-height: 1;
  color: var(--oxblood);
  white-space: nowrap;
}
/* gefüllt: sehr blass, trägt die Fläche */
.hero-specimen span.is-fill { opacity: 0.06; }
/* Kontur: etwas kräftiger, trägt die Zeichnung.
   -webkit-text-stroke trägt zwar ein Präfix, ist aber in Chrome, Firefox und
   Safari umgesetzt und der einzige Weg, Text ohne SVG zu umranden. Fällt sie
   aus, bleiben diese Zeichen durch color: transparent unsichtbar — der Hero
   verliert dann nur Schmuck, nichts Tragendes.
   Der Selektor nennt span mit, sonst gewinnt `.hero-specimen span` oben mit
   seiner höheren Spezifität und die Zeichen blieben gefüllt. */
.hero-specimen span.is-line {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--oxblood);
  opacity: 0.15;
}
.spec-amp  { right: -3%; top: 6%;    font-size: 300px; }
.spec-aa   { right: 26%; top: 44%;   font-size: 168px; }
.spec-para { right: 5%;  bottom: 2%; font-size: 200px; }
.spec-sect { right: 31%; top: 8%;    font-size: 108px; transform: rotate(-6deg); }
.spec-num  { right: 8%;  top: 40%;   font-size: 92px;  letter-spacing: 0.08em; }
.spec-aa2  { right: 2%;  top: 27%;   font-size: 76px;  transform: rotate(5deg); }

.hero h1 {
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin-bottom: 22px;
}
.btn {
  display: inline-block;
  background: var(--oxblood);
  color: var(--card);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--oxblood-dark); }
/* Im Hero steht kein zweiter Button mehr (siehe .hero-link). Die Regel bleibt
   für den Kontakt-Abschnitt — dort ist der WhatsApp-Button als zweiter Weg
   vorgesehen, siehe README. */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  margin-left: 12px;
}
.btn-ghost:hover { border-color: var(--oxblood); color: var(--oxblood); background: transparent; }

/* Zweiter Weg im Hero: Textlink statt zweitem Button. Zwei gleich schwere
   Buttons nebeneinander lassen den Besucher wählen, statt ihn zu führen.
   inline-block + vertical-align: middle setzt ihn auf die Mitte des
   Primärbuttons, ohne die Zeile zu verschieben. */
.hero-link {
  display: inline-block;
  vertical-align: middle;
  margin-left: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hero-link span { margin-left: 4px; }
.hero-link:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }
/* Damit beide auf derselben Mittellinie sitzen, braucht auch der Button die
   Ausrichtung — sonst steht er auf der Schriftgrundlinie. */
.etikett .btn { vertical-align: middle; }

/* ---------- AMBER-PLATZHALTER (Baustelle) ----------
   Markiert, was noch fehlt. Nie durch etwas Ähnliches ersetzen, nie schätzen. */
.amber {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  text-align: center;
  border: 1.5px dashed var(--amber);
  background: var(--amber-fill);
  color: var(--amber);
}
.amber-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.amber-file {
  font-size: 11px;
  line-height: 1.3;
  color: var(--amber);
  opacity: 0.8;
  word-break: break-word;
}

/* ---------- HERO STARTSEITE: zwei Blätter, randlos ----------
   Halb und halb: beide Spalten gleich breit. Weil die beiden Screenshots
   minimal verschiedene Proportionen haben (1,3297 gegen 1,3028), sind sie
   dann unterschiedlich hoch. Die Unterschrift wird deshalb mit margin-top:auto
   nach unten geschoben – so stehen Unterschriften und Kleinbilder beider
   Spalten auf einer Linie, ohne dass ein Bild beschnitten wird. */
.hero-blaetter { padding: 26px 0 40px; }

/* Feste Blatthöhe auf dem Desktop, die Breite folgt der Proportion – so wird
   kein Bild beschnitten. Der Block als Ganzes ist zentriert. */
.sheets {
  /* 310 statt 380: Seit alle Desktop-Referenzen im Format 1440 × 900 liegen
     (aufbau.md, Regel 7), haben beide Blätter dasselbe Verhältnis 1,6 und sind
     bei gleicher Höhe von selbst gleich breit — halb-halb ergibt sich, statt
     gerechnet zu werden. Dafür werden sie flacher: 310 × 1,6 = 496 px breit,
     also fast genau so breit wie vorher (506 und 495), nur 70 px niedriger.
     Zwei Blätter plus Fuge und Rand ergeben 1064 px und bleiben damit unter
     der Schwelle von 1080 px. */
  --blatt-h: 310px;
  --fuge: 24px;
  --rand: 24px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--fuge);
  padding: 0 var(--rand);
}
.sheet {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  flex: 1 1 0;
}

/* Im Hero kein lazy loading (hausregeln.md) und kein object-fit: Das Bild
   füllt die Spaltenbreite, die Höhe folgt seinem eigenen Verhältnis. */
.sheet > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
}

/* Ab 1080 px bekommen die Blätter die feste Höhe, die Breite folgt der
   Proportion: 2 × 310 × 1,6 + 24 Fuge + 2 × 24 Rand = 1064 px passen
   nebeneinander. Darunter bestimmt der Platz die Breite und die Höhe folgt –
   nie umgekehrt, sonst müsste zugeschnitten werden.
   Achtung: Dieser Block muss NACH der Grundregel `.sheet > img` stehen. Eine
   Media-Query erhöht die Spezifität nicht; steht sie davor, gewinnt die
   spätere Grundregel und die feste Höhe greift nicht. */
@media (min-width: 1080px) {
  .sheet { flex: none; }
  .sheet > img {
    height: var(--blatt-h);
    width: auto;
    max-width: 100%;
  }
}


/* Schiebt die Unterschrift in der kürzeren Spalte nach unten, damit beide
   Unterschriften auf einer Linie stehen. */
.sheet figcaption {
  margin-top: auto;
  padding-top: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--grey-light);
}
/* In schmalen Spalten bricht die lange Unterschrift auf vier Zeilen und
   verschiebt die Reihe – dort steht die Kurzform. */
.cap-kurz { display: none; }

/* Die Zeile unter den Blättern. Serif, Tinte, bei 1440 auf einer Zeile –
   deshalb 40 px als Obergrenze: bei 44 px reicht die Satzbreite nicht. */
.hero-claim-row {
  padding: 0 24px;
  margin-top: 44px;
}
/* Zwei Klassen, damit die Regel die allgemeine `.hero h1` (0,1,1) schlägt –
   sonst greift deren 72px-clamp und die Zeile bricht um. 48 px ist die
   Obergrenze, bei der der Satz bei 1440 noch auf eine Zeile passt. */
.hero .hero-claim {
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
/* Der Akzent der Seite sitzt hier – und im Hero nur hier (aufbau.md, Regel 4) */
.hero-claim-row .btn { margin-top: 28px; }

/* ---------- SECTION HEADINGS ---------- */
section { padding: 84px 0; scroll-margin-top: 92px; }
.section-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: block;
  margin-bottom: 14px;
}
.section-title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 600;
  line-height: 1.12;
  margin-bottom: 16px;
  max-width: 600px;
}
/* 62ch: rund 62 Zeichen je Zeile — darüber wandert das Auge beim Rücksprung
   zu leicht in die falsche Zeile. */
.section-sub {
  color: var(--grey);
  font-size: 16px;
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 56px;
}

/* Redaktioneller Abschnittskopf: links die Ziffer, rechts Titel und Untertitel */
.section-head {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  margin-bottom: 56px;
}
.section-num {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  color: var(--oxblood);
}
.section-head .section-label { margin: 12px 0 0; }
.section-head .section-title { margin-bottom: 14px; }
.section-head .section-sub { margin-bottom: 0; }

/* Sanftes Einblenden – die Klasse setzt das Skript, ohne JS bleibt alles sichtbar */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Gerahmte Abbildungen mit Unterschrift */
.figure-framed { margin: 0 0 22px; }
.figure-framed img,
.figure-framed video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
  padding: 6px;
  background: var(--card);
}
.figure-framed figcaption {
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--grey-light);
}

/* ---------- FÄLLE ----------
   Zwei Teile: oben die Websites im Raster, darunter die Vorlagen als
   Vorher/Nachher-Paar. In dieser Sektion darf die Akzentfarbe nicht
   vorkommen (aufbau.md, Regel 4) – Ziffer und Label stehen in Grau. */
.faelle .section-num { color: var(--grey-ziffer); }
.faelle .section-label { color: var(--grey); }
/* Satzbreite in em, damit der Umbruch bei jeder Schriftgröße an derselben
   Stelle fällt: nach dem Komma, nicht mitten in die Fügung und nicht so spät,
   dass „Hand.“ allein in der zweiten Zeile steht. Gemessen bei 42 px Fraunces:
   „Zwei Betriebe, zwei Charaktere,“ = 14,85 em, mit „eine“ = 17,03 em – 16 em
   liegt dazwischen. Auf schmalen Viewports bindet ohnehin die Spaltenbreite. */
.faelle .section-title { max-width: 16em; }

/* Zwischenüberschrift der beiden Teile */
.teil-titel {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 24px;
  padding-top: 14px;
  border-top: 1.5px solid var(--line-strong);
}

.fall-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-bottom: 88px;
}
/* Die beiden Desktop-Screenshots haben leicht verschiedene Proportionen und
   sind bei gleicher Spaltenbreite deshalb unterschiedlich hoch (353 gegen
   360 px). Damit Kleinbildreihe und Textblock beider Karten trotzdem auf
   einer Linie stehen, ist die Karte eine Flex-Spalte und die Kleinbildreihe
   wird mit margin-top: auto nach unten geschoben – wie die Unterschriften
   im Hero. Kein Bild wird dafür beschnitten oder gestaucht. */
.fall {
  display: flex;
  flex-direction: column;
  margin: 0;
}
/* Seit 12.10.2026: Die Karten haben verschieden lange Textblöcke (der Stuhl
   hat die Zeile „Online“ mehr). Mit margin-top: auto rutschte darum die
   Kleinbildreihe der längeren Karte um diese Zeile nach oben. Jetzt teilen
   sich beide Karten über subgrid drei Zeilen (Screenshot, Kleinbilder, Text):
   Kleinbilder und Text beginnen in beiden Spalten auf derselben Höhe, egal
   wie lang der Text ist. Browser ohne subgrid behalten die Flex-Spalte. */
@supports (grid-template-rows: subgrid) {
  .fall {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .fall-klein { margin-top: 0; }
}

/* Der Desktop-Screenshot füllt die Kartenbreite, die Höhe folgt seinem
   eigenen Verhältnis – kein object-fit, nichts wird beschnitten. */
.fall-gross {
  display: block;
  width: 100%;
  height: auto;
  flex-shrink: 0;   /* in der Flex-Spalte nicht stauchen lassen */
  border: 1px solid var(--line-strong);
}

/* Handy und Innenseite: gleiche Höhe, die Breite folgt der Proportion.
   --klein-h steht über dem geforderten Mindestmaß von 220 px. Die Höhe gilt
   für beide Karten, sonst stünden die Textblöcke nicht auf einer Linie. */
.fall-klein {
  --klein-h: 260px;
  --klein-fuge: 8px;
  display: flex;
  align-items: flex-start;
  gap: var(--klein-fuge);
  margin-top: auto;
  padding-top: var(--klein-fuge);
}
.fall-klein .klein {
  display: block;
  height: var(--klein-h);
  width: auto;
  border: 1px solid var(--ink);
}
/* Die Platzhalter tragen die Proportionen der vorhandenen Dateien, damit die
   Zeile schon jetzt die richtige Höhe und Breite hat:
   Handy 385 : 736 = 0,523 · Innenseite 1101 : 1300 = 0,847 */
.klein-amber { height: var(--klein-h); }
.klein-amber.klein-mobil { width: calc(var(--klein-h) * 0.523); }
.klein-amber.klein-innen { width: calc(var(--klein-h) * 0.847); }
.klein-amber .amber-label { font-size: 12px; }
.klein-amber .amber-file { font-size: 10px; }

/* Branche · Charakter · Entscheidung · Link – zweispaltig, Begriff links */
.fall-text {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.6;
}
.fall-zeile {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.fall-text dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-light);
  padding-top: 2px;
}
.fall-text dd { margin: 0; color: var(--grey); }
/* Der Link steht in Tinte, nicht im Akzent – in dieser Sektion kommt die
   Akzentfarbe nicht vor (aufbau.md, Regel 4). */
.fall-text a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.fall-text a:hover { border-bottom-color: var(--ink); }

/* Überschrift über den Vorher/Nachher-Paaren: zentriert, Linie darüber.
   Schrift, Größe und Abstände wie die frühere zweiteilige Fassung.
   text-wrap: balance verteilt die Zeilen gleichmäßig, damit am Handy kein
   einzelnes Wort allein in der letzten Zeile steht. */
.vorlagen-titel {
  text-align: center;
  text-wrap: balance;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 48px;
  padding-top: 36px;
  border-top: 1.5px solid var(--line-strong);
}

/* Vorher/Nachher: beide Belege gleich hoch, nebeneinander, zentriert. */
.paar { margin-bottom: 56px; }
.paar:last-child { margin-bottom: 0; }
.paar-titel {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
  margin: 0 0 14px;
}
.paar-reihe {
  --beleg-h: 480px;
  --beleg-fuge: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--beleg-fuge);
}
.beleg { margin: 0; }
.beleg-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin: 0 0 8px;
}
.beleg img {
  display: block;
  height: var(--beleg-h);
  width: auto;
  border: 1px solid var(--line-strong);
}
/* Die Unterschrift darf die Figur nicht breiter machen als ihr Bild – sonst
   wüchse die Spalte und die beiden Belege stünden nicht mehr mittig.
   width: 0 mit min-width: 100% nimmt die Breite des Bildes an, ohne selbst
   welche zu fordern. */
.beleg figcaption {
  width: 0;
  min-width: 100%;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--grey-light);
}
/* Solange die Bilder fehlen: A4-Hochformat angenommen (1 : √2 = 0,707). */
.beleg-amber {
  height: var(--beleg-h);
  width: calc(var(--beleg-h) * 0.707);
}
/* Ein Satz unter dem Paar: das Paar zeigt einen Beleg, der Satz nennt das
   ganze Set. */
.paar-satz {
  margin: 24px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey);
  text-align: center;
}
/* Wie die Links in den Fällen: Tinte mit feiner Linie, kein Akzent. */
.paar-satz a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.paar-satz a:hover { border-bottom-color: var(--ink); }

/* ---------- ANLÄSSE-HINWEIS ----------
   Kurzer Block ohne Nummer vor „So läuft es": die zweite Sparte wird
   genannt, nicht ausgestellt. Kein Bild, keine Akzentfarbe. */
.anlaesse-hinweis { padding: 56px 0; border-top: 1px solid var(--line); }
.anlaesse-titel {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
}
.anlaesse-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey);
  max-width: 62ch;
  margin: 0 0 14px;
}
.anlaesse-link {
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.anlaesse-link:hover { border-bottom-color: var(--ink); }

/* ---------- SO LÄUFT ES ----------
   Vier Schritte in einer Zeile, mobil untereinander. Die Ziffern tragen
   dasselbe Grau wie die Sektionsnummern – der Akzent sitzt an der Anfrage,
   nicht hier (aufbau.md, Regel 4). */
#ablauf .section-num { color: var(--grey-ziffer); }
#ablauf .section-label { color: var(--grey); }

.schritte {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.schritt { min-width: 0; }
.schritt-num {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: var(--grey-ziffer);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
}
.schritt h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
}
.schritt p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--grey);
  margin: 0;
}

/* ---------- AUSBAUSTUFEN ---------- */
.stages {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Karten wie Spalten in einem Buch: eine Linie oben, getrennt durch Abstand */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.stage-card {
  padding: 22px 0 0;
  border-top: 1px solid var(--line-strong);
  transition: border-top-color 0.15s ease;
}
/* fünf Leistungen auf der Gestaltungsseite */
.stage-grid-5 { grid-template-columns: repeat(3, 1fr); }
/* Kartenziffer: dieselbe Sprache wie die Ziffer im Abschnittskopf —
   Fraunces, Oxblood, linksbündig über dem Titel. Kein Kreis. */
.stage-letter {
  display: block;
  color: var(--oxblood);
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  margin-bottom: 14px;
}
.stage-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.stage-card p {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.6;
  margin: 0;
}

/* Ziffern statt Buchstaben in den Leistungs-Karten — gleiche Größe, die
   zweistellige Zahl bekommt nur etwas engeren Satz. */
.stage-letter.is-num { letter-spacing: -0.01em; }

/* Karten mit Linie oben: beim Überfahren färbt sich die Linie.
   Kein Schatten, kein Anheben — die Tiefe bleibt in Linie und Abstand. */
.stage-card:hover { border-top-color: var(--oxblood); }

/* ---------- METHODE ----------
   Zwei Karten nebeneinander, gleiche Bauform: links der ausgefüllte
   Steckbrief, rechts dieselben fünf Zeilen als Aufforderung. Karte = Fläche
   mit feiner Linie, ohne Schatten und ohne Rundung; im Buchdruck-Profil
   trennt eine Haarlinie, sie hebt nicht ab (stile.md, Profil 1).
   In dieser Sektion kommt die Akzentfarbe nicht vor – Ziffer und Label
   stehen deshalb in Grau, wie in den Fällen. */
.methode .section-num { color: var(--grey-ziffer); }
.methode .section-label { color: var(--grey); }

.methode-karten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.karte {
  padding: 26px 28px;
  border: 1px solid var(--line-strong);
  background: var(--card);
}
.karte-titel {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}

.karte-liste { margin: 0; }
.karte-zeile {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.karte-zeile:first-child { border-top: 0; padding-top: 0; }
.karte-zeile:last-child { padding-bottom: 0; }
.karte-liste dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-light);
  padding-top: 3px;
}
/* Zwei Textzeilen Mindesthöhe: zwei der fünf Werte links brauchen bei
   dieser Spaltenbreite zwei Zeilen. Damit stehen die Begriffe beider Karten
   auf einer Linie, ohne dass ein Wert gekürzt oder gestaucht wird. */
.karte-liste dd {
  margin: 0;
  min-height: 48px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey);
}
/* Der Hinweis in der rechten Karte steht heller als ein echter Wert – er
   sagt, was hingehört, er ist nicht der Inhalt. #736B5E erreicht auf der
   Kartenfläche 5,00 : 1 und bleibt damit lesbar, während der Wert daneben
   mit 7,19 : 1 deutlich fester steht. */
.karte-liste dd.hinweis { color: #736B5E; }

.methode-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 28px;
}
/* Grotesk, nicht Serif: das ist ein Satz, kein Titel – und die Karte darüber
   sagt es selbst („Serif für Titel, Grotesk für Text"). 17 px statt 18, weil
   Inter bei gleicher Größe größer läuft als Fraunces; so steht der Satz
   ruhig neben dem 15-px-Link. */
.karte-satz {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
/* Der Weg zur Anfrage steht in Tinte, nicht im Akzent – in dieser Sektion
   kommt die Akzentfarbe nicht vor. */
.methode-link {
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
}
.methode-link:hover { border-bottom-color: var(--ink); }

/* ---------- PREISE ----------
   Drei Gruppen in der Bauform der Fälle- und Methode-Tabellen: Posten links,
   Preis rechts, Haarlinie dazwischen. Darunter abgesetzt die Pakete.
   In dieser Sektion kommt die Akzentfarbe nicht vor (aufbau.md, Regel 4) –
   auch der Betrag steht in Tinte, nicht im Akzent. */
#preise .section-num { color: var(--grey-ziffer); }
#preise .section-label { color: var(--grey); }
#projekte .section-num { color: var(--grey-ziffer); }
#projekte .section-label { color: var(--grey); }
#leistungen .section-num { color: var(--grey-ziffer); }
#leistungen .section-label { color: var(--grey); }
/* Die Kartenziffern 01–05 folgen derselben Regel wie die Abschnittsziffern:
   Struktur trägt Grau, der Akzent bleibt am Handlungsort. */
#leistungen .stage-letter { color: var(--grey-ziffer); }

/* Zwei Spalten, nicht drei: bei drei Spalten bleiben 304 px je Gruppe, und
   8 der 11 Posten brechen dort auf zwei Zeilen um – gemessen, darunter selbst
   „JTL-Belege in Firmenfarben". Ein Posten, der umbricht, ist keine Zeile
   mehr, die man überfliegt. Bei zwei Spalten sind es 472 px und alle Posten
   bleiben einzeilig.
   Links Websites über Marke, rechts die lange Gruppe über beide Reihen –
   das hält die Sektion halb so hoch wie untereinander. */
.preis-gruppen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.preis-gruppe:nth-child(1) { grid-column: 1; grid-row: 1; }
.preis-gruppe:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.preis-gruppe:nth-child(3) { grid-column: 1; grid-row: 2; }

.preis-gruppe,
.preis-pakete {
  padding: 26px 28px;
  border: 1px solid var(--line-strong);
  background: var(--card);
}
.preis-titel {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}

.preis-liste { margin: 0; }
/* Der Betrag bestimmt seine Spalte selbst (auto), der Posten bekommt den
   Rest – so stehen die Beträge einer Gruppe rechtsbündig untereinander,
   ohne dass eine feste Spaltenbreite den längsten Posten abschneidet. */
.preis-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.preis-zeile:first-child { border-top: 0; padding-top: 0; }
.preis-zeile:last-child { padding-bottom: 0; }
.preis-liste dt {
  font-size: 15px;
  line-height: 1.5;
  color: var(--grey);
}
.preis-liste dd { margin: 0; }

.preis-tag {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* „ab" ist Hinweis und bleibt Fließtext, der Betrag ist die Zahl. */
.preis-ab {
  font-size: 12px;
  color: var(--grey-light);
  margin-right: 5px;
}
.preis-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
/* Steht ein Satz statt eines Betrags in der Preisspalte, trägt er nicht das
   Gewicht einer Zahl – sonst liest er sich wie ein Preis, der er nicht ist. */
.preis-text {
  font-size: 15px;
  font-weight: 400;
  color: var(--grey);
}

/* Die Pakete stehen abgesetzt unter den Gruppen, in derselben Bauform –
   volle Breite, weil die Posten hier ganze Sätze sind. */
.preis-pakete { margin-top: 32px; }

.preis-fuss {
  margin: 20px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey-light);
}

/* Info-Fenster an acht Preiszeilen: ein „i“ hinter dem Namen öffnet ein
   kleines Fenster mit dem, was enthalten ist. Der Knopf ist als Tippfläche
   24 × 24 px groß (WCAG 2.2, Zielgröße), sichtbar ist nur ein Kreis von
   16 px. Der negative Außenabstand hält die Zeilenhöhe der Preisliste. Kein
   Oxblood – das gehört den Anfrage-Buttons. */
.info-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -4px 0 -4px 1px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--grey);
  vertical-align: middle;
  cursor: pointer;
}
.info-knopf span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 600 11px/1 'Inter', sans-serif;
}
/* Letztes Wort und i bleiben zusammen – sonst rutscht das i am Handy allein
   in die nächste Zeile (ein   vor einem Inline-Block reicht dafür nicht). */
.info-bindung { white-space: nowrap; }
.info-knopf:hover,
.info-knopf[aria-expanded="true"] { color: var(--ink); }
.info-knopf[aria-expanded="true"] span { background: var(--ink); color: var(--card); border-color: var(--ink); }

/* Das Fenster selbst: Papier, feine Linie, Fließtext etwas kleiner. Ohne
   Skript setzt der Browser es mittig ins Bild; mit Skript (.ist-verankert)
   steht es am i. Es bleibt immer 16 px vom Rand und wird nie breiter als
   der Bildschirm. */
.info-fenster {
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  margin: auto;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--grey);
  font: 400 14px/1.6 'Inter', sans-serif;
  box-shadow: 0 6px 20px rgba(32, 28, 24, 0.12);
}
.info-fenster.ist-verankert { position: fixed; inset: auto; margin: 0; }
.info-fenster p { margin: 0; }

/* ---------- PROJEKTE / AUS DEM EIGENEN HAUS ---------- */
.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
.project { min-width: 0; }
.project-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
  margin-bottom: 10px;
}
.project-head h3 { font-size: 20px; font-weight: 600; margin: 0; }
.badge {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-light);
  border: 1px solid var(--line-strong);
  padding: 4px 9px;
  white-space: nowrap;
}
/* Das laufende Projekt wird durch die kräftigere Linie hervorgehoben, nicht
   durch Farbe – der Akzent gehört an den Handlungsort (aufbau.md, Regel 4). */
.badge-active { color: var(--grey); border-color: var(--ink); }
.project > p {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.7;
  margin: 0 0 22px;
}

/* ---------- HINWEIS „FREI ERFUNDEN“ (/anlaesse/) ---------- */
.examples-disclaimer {
  margin-top: 28px;
  font-size: 13px;
  color: var(--grey-light);
  font-style: italic;
}

/* ---------- GESTALTUNG ---------- */
.gestaltung {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.service h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  padding-top: 16px;
  border-top: 1.5px solid var(--oxblood);
}
.service p {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.6;
  margin: 0;
}
.references {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--grey-light);
  max-width: 640px;
}
.references strong { color: var(--grey); font-weight: 500; }
.references a {
  color: var(--grey);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.references a:hover { color: var(--oxblood); text-decoration-color: var(--oxblood); }

/* ---------- CTA / FOOTER ---------- */
.cta {
  text-align: center;
  padding: 96px 0;
}
.cta h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12; margin-bottom: 18px; }
.cta p { color: var(--grey); font-size: 16px; max-width: 480px; margin: 0 auto 32px; }

footer {
  border-top: 1px solid var(--line-strong);
  background: var(--card);
  padding: 48px 0;
}
/* Drei Spalten: wer sind wir, wohin geht es, wie erreicht man uns.
   Spalte 1 trägt die Marke und darf breiter sein als die beiden Listen. */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}
footer .wordmark { font-size: 15px; }
footer .brand-icon { height: 28px; width: 28px; }
.footer-claim {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
  max-width: 34ch;
}
.footer-head {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin: 0 0 14px;
}
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--grey);
}
.footer-list a { text-decoration: none; }
.footer-list a:hover { color: var(--oxblood); }
.footer-plain { color: var(--grey-light); }
/* Abschlusszeile über die volle Breite: Recht und Jahr, sonst nichts. */
.footer-base {
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--grey-light);
}
.footer-base a { text-decoration: none; }
.footer-base a:hover { color: var(--oxblood); }

/* Startseite: schlanker Footer, nur die Rechtszeile. Ohne den Spaltenblock
   darüber braucht die Zeile weder Abstand noch eigene Trennlinie – der
   Footer hat schon eine. /anlaesse/ behält vorerst den dreispaltigen Footer. */
/* Kurze Seiten: Impressum, Datenschutz und /anlaesse/ tragen `seite-kurz` am
   Body. Ist der Inhalt kürzer als das Fenster, schiebt margin-top: auto den
   Footer an den unteren Rand, statt ihn mitten auf der Seite enden zu lassen.
   Die Klasse steht nur dort – auf der Startseite würde die Flex-Spalte am Body
   nichts verbessern und die Abschnitte zu Flex-Elementen machen. */
.seite-kurz {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.seite-kurz > footer { margin-top: auto; }

.footer-slim { padding: 26px 0; }
.footer-slim .footer-base {
  margin: 0;
  padding-top: 0;
  border-top: none;
}

/* ---------- ANFRAGE: Satz, Check-Zeile, Formular ----------
   Der Hausname steht in Serif, weil er die Überschrift der Sektion ist;
   die Zeile darunter ist Text und steht in Grotesk (stile.md, Profil
   Anlasswerk: Serif für Titel, Grotesk für Text). */
/* Zwei Klassen je Regel: die allgemeine `.cta p` hat Spezifität 0,1,1 und
   würde eine einklassige Regel schlagen – dann stünde die Signaturzeile im
   16-px-Grotesk und die Check-Zeile auf 480 px Satzbreite.
   Die Zeile ist eine Signatur, keine Überschrift: Serif, aber klein, und
   die Trennpunkte treten zurück. */
.cta .cta-signatur {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  max-width: none;
  margin: 0 auto 14px;
}
.cta-signatur .trenner {
  color: var(--grey-light);
  font-weight: 400;
  margin: 0 4px;
}
.cta .cta-check {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey);
  max-width: 58ch;
  margin: 0 auto 36px;
}

/* Zwei Spalten für Name und E-Mail, Nachricht und Aktion über die ganze
   Breite. Linksbündig, obwohl die Sektion zentriert ist: Formularfelder
   werden gelesen und ausgefüllt, nicht betrachtet. */
.anfrage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.feld-breit,
.feld-aktion { grid-column: 1 / -1; }

.feld label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 6px;
}
.feld input,
.feld textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 0;
}
.feld textarea { resize: vertical; min-height: 120px; }
.feld input:focus,
.feld textarea:focus {
  outline: 2px solid var(--oxblood);
  outline-offset: 1px;
}

.feld-aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 4px;
}
/* Ebenfalls zwei Klassen – sonst zieht `.cta p` Schriftgrad, Farbe,
   Satzbreite und Außenabstand an sich. */
.cta .anfrage-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey-light);
  max-width: none;
  margin: 0;
}
.anfrage-note a { color: var(--grey); }

/* ---------- ANLÄSSE (/anlaesse/) ----------
   Drei frei erfundene Muster (Autohaus, Feuerwehr, Kinderheft). Oxblood steht
   auf dieser Seite nur am Anfrage-Button in #kontakt: Ziffern und Labels
   grau, der Button im Etikett in Tinte, die Jubiläumszahlen ebenfalls. */
.seite-anlaesse .section-num,
.seite-anlaesse .process-step .num { color: var(--grey-ziffer); }
.seite-anlaesse .section-label { color: var(--grey); }
.seite-anlaesse .hero-numerals span { color: var(--ink); }
.seite-anlaesse .etikett .btn { background: var(--ink); }
.seite-anlaesse .etikett .btn:hover { background: var(--grey); }
/* Der aktive Navigationspunkt steht hier dauerhaft im Bild – Linie in Tinte.
   Gilt ebenso auf der Startseite. */
.seite-anlaesse .nav-links a.is-current,
.seite-start .nav-links a.is-current { color: var(--ink); border-bottom-color: var(--ink); }

/* Was wir machen: fünf Produkte, je mit Stufe und Sprung zum Muster */
.produkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.produkt-karte {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.produkt-stufe {
  font: 600 12px/1 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-light);
}
.produkt-karte h3 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.produkt-karte p { margin: 0; color: var(--grey); line-height: 1.55; }
.produkt-karte .beispiel { margin-top: auto; font-size: 0.9rem; color: var(--ink); }
.stufen-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 28px 0 0;
  color: var(--grey);
  font-size: 0.95rem;
}
.stufen-zeile b { color: var(--ink); }

/* Ein Produkt je Gruppe: Stufe, Titel, ein Satz, darunter die Abbildungen */
.gruppe {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.gruppe-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: 20px;
}
.gruppe-kopf h3 { margin: 0; font-size: 1.6rem; line-height: 1.2; }
.gruppe-kopf .produkt-stufe { order: -1; width: 100%; }
.gruppe-kopf p { margin: 0; color: var(--grey); line-height: 1.5; max-width: 620px; }

/* Zwölfspaltiges Raster. Die Musterbilder werden nie beschnitten: kein
   object-fit, kein festes Seitenverhältnis – Breite der Spalte, Höhe aus
   width/height. Rahmen wie .figure-framed: 1 px Linie, 6 px Innenabstand. */
.galerie {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.galerie figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.galerie a {
  display: block;
  background: var(--card);
  border: 1px solid var(--line-strong);
  padding: 6px;
}
.galerie img { display: block; width: 100%; height: auto; }
.galerie figcaption { font-size: 0.9rem; color: var(--grey); line-height: 1.4; }
.galerie figcaption b { color: var(--ink); }
.s12 { grid-column: span 12; }
.s8 { grid-column: span 8; }
.s6 { grid-column: span 6; }
.s4 { grid-column: span 4; }
.stapel { display: flex; flex-direction: column; gap: 20px; }
/* Mikroseite: Rechner links, Handy rechts, beide oben bündig */
.handy-paar {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) {
  .s8, .s6, .s4 { grid-column: span 12; }
  .handy-paar { grid-template-columns: 1fr 1fr; }
}

/* ---------- STARTSEITE: zwei Türen ----------
   „Ihr Betrieb“ und „Ihr Anlass“, gleichwertig. Oxblood nur an der Linie
   über der Tür beim Überfahren und am Anfrage-Button. Den Kopf bildet das
   Etikett (siehe ETIKETT). */
.tueren-abschnitt { padding: 56px 0 88px; }
/* Fünf Zeilen je Tür (Etikett, Titel, Text, Bild, Link). Per Subgrid stehen
   Bilder und Links beider Türen auf einer Linie, die Türen sind gleich hoch. */
.tueren {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 0;
}
.tuer {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
  color: inherit;
  text-decoration: none;
  transition: border-top-color 0.15s ease;
}
@supports not (grid-template-rows: subgrid) {
  .tuer { display: flex; flex-direction: column; }
  .tuer-bild { margin-top: auto; }
}
.tuer:hover,
.tuer:focus-visible { border-top-color: var(--oxblood); }
.tuer-etikett {
  font: 600 12px/1 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}
.tuer h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 14px;
}
.tuer p {
  margin: 0 0 24px;
  color: var(--grey);
  font-size: 16px;
  line-height: 1.6;
}
/* Der Rahmen folgt dem Bild: keine Leerfläche, nichts beschnitten.
   Beide Türbilder haben das Verhältnis 1,600 (Klassikwerk 992 × 620,
   tuer-anlass 1920 × 1200) und füllen deshalb mit --anteil: 1 beide die
   volle Spaltenbreite bei gleicher Höhe. Kommt ein Bild mit anderem
   Verhältnis, bekommt es einen kleineren Anteil: eigenes / größtes
   Verhältnis. Die 14 px sind Rahmen und Innenabstand, sie gehören nicht
   zum Verhältnis. */
.tuer-bild { margin: 0 0 20px; --anteil: 1; }
.tuer-bild img {
  display: block;
  width: calc((100% - 14px) * var(--anteil) + 14px);
  height: auto;
  border: 1px solid var(--line-strong);
  padding: 6px;
  background: var(--card);
}
.tuer-bild figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--grey);
}
.tuer-link {
  justify-self: start;
  align-self: start;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.15s ease;
}
.tuer-link span { margin-left: 4px; }
.tuer:hover .tuer-link { border-bottom-color: var(--ink); }

/* Band zwischen Türen und Anfrage */
.band {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 72px 0;
}
.band h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 16px;
}
.band p {
  margin: 0;
  max-width: 62ch;
  color: var(--grey);
  font-size: 17px;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .tueren-abschnitt { padding: 40px 0 60px; }
  /* Untereinander, „Ihr Betrieb“ zuerst – ohne Subgrid, jede Tür für sich */
  .tueren { grid-template-columns: 1fr; row-gap: 48px; }
  .tuer { display: flex; flex-direction: column; grid-row: auto; }
  .tuer-link { align-self: flex-start; }
  .band { padding: 56px 0; }
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.process-step .num {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: var(--oxblood);
  margin-bottom: 14px;
}
.process-step h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}
.process-step p {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.6;
  margin: 0;
}
/* Zwei Klassen, sonst gewinnt `.cta p` mit margin-bottom 32 und ohne Abstand
   nach oben – der Hinweis klebte dann am Button. */
.cta .cta-note {
  margin: 20px auto 0;
  font-size: 13px;
  color: var(--grey-light);
}
/* Zweiter Weg neben der Mail: Telefon. Zwei Klassen wegen `.cta p`. */
.cta .cta-tel {
  margin: 18px auto 0;
  font-size: 15px;
  color: var(--grey);
}
.cta .cta-tel a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.cta .cta-tel a:hover { text-decoration-color: var(--ink); }
/* Telefonnummern brechen nie mitten in der Nummer um */
a[href^="tel:"] { white-space: nowrap; }
/* Bildzeilen: kein einzelnes Wort allein in der letzten Zeile, wo der
   Browser text-wrap: pretty kennt; sonst wirkungslos. */
figcaption { text-wrap: pretty; }

/* ---------- RECHTSSEITEN (Impressum, Datenschutz) ---------- */
.legal {
  padding: 72px 0 88px;
  /* Rechtstexte stecken voller langer Komposita („Auftragsverarbeitungs-
     vertrag"). Auf schmalen Handys passt so ein Wort nicht in die Spalte und
     schob die ganze Seite waagerecht heraus. Greift nur im Notfall — normale
     Zeilenumbrüche bleiben unverändert. */
  overflow-wrap: break-word;
}
.legal .wrap { max-width: 720px; }
.legal h1 {
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.legal .legal-intro {
  font-size: 14px;
  color: var(--grey-light);
  margin: 0 0 48px;
}
.legal h2 {
  font-size: 19px;
  font-weight: 600;
  margin: 40px 0 12px;
}
.legal h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 24px 0 8px;
}
.legal h4 {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 6px;
}
.legal p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey);
  margin: 0 0 14px;
}
.legal ul,
.legal ol {
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey);
  margin: 0 0 14px;
  padding-left: 22px;
}
.legal li { margin-bottom: 6px; }
.legal li > ul,
.legal li > ol { margin: 6px 0 0; }
.legal strong, .legal b { color: var(--ink); font-weight: 600; }
.legal em, .legal i { font-style: italic; }
.legal hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 36px 0;
}
.legal blockquote {
  margin: 0 0 14px;
  padding-left: 18px;
  border-left: 2px solid var(--line-strong);
  color: var(--grey);
}

/* Tabellen im eingefügten Rechtstext */
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--grey);
}
.legal caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  color: var(--grey-light);
  padding-bottom: 8px;
}
.legal th,
.legal td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.legal th {
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
}
.legal tbody tr:nth-child(even) td { background: rgba(32, 28, 24, 0.02); }
/* Sehr breite Tabellen bei Bedarf in <div class="legal-scroll"> einschließen */
.legal-scroll { overflow-x: auto; margin: 0 0 20px; }
.legal-scroll table { margin: 0; }

/* Platzhalter-Block für noch einzufügenden Rechtstext */
.legal-todo {
  margin: 32px 0 0;
  padding: 26px 30px;
  border: 2px dashed var(--oxblood);
  background: rgba(110, 20, 35, 0.04);
}
.legal .legal-todo-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 10px;
}
.legal .legal-todo p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--oxblood);
}
.legal a { color: var(--grey); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.legal a:hover { color: var(--oxblood); text-decoration-color: var(--oxblood); }
.legal address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey);
  margin: 0 0 14px;
}
.legal .placeholder { color: var(--oxblood); }
.legal .legal-stand {
  margin-top: 40px;
  font-size: 13px;
  color: var(--grey-light);
}
.legal .legal-back {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

/* ---------- /belege/ ----------
   Sieben Vorher/Nachher-Paare, je ein Abschnitt. Die Blätter füllen ihre
   Spalte in der Breite (A4, alle gleich groß), Höhe folgt aus width/height –
   nichts wird beschnitten. Akzentfarbe nur am Button am Ende. */
.belege-kopf { padding: 72px 0 24px; }
.belege-kopf h1 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.belege-einleitung {
  font-size: 17px;
  line-height: 1.65;
  color: var(--grey);
  max-width: 38em;
  margin: 0;
}
.beleg-abschnitt { padding: 56px 0; border-top: 1px solid var(--line); }
.beleg-abschnitt:first-of-type { border-top: none; }
.beleg-abschnitt h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  margin-bottom: 24px;
}
.belege-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.beleg-blatt { margin: 0; min-width: 0; }
.beleg-blatt img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
}
.beleg-blatt figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--grey-light);
}
.fehlte-titel {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 32px 0 10px;
}
.fehlte-liste {
  margin: 0;
  padding-left: 1.2em;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.65;
  color: var(--grey);
}
.fehlte-liste li::marker { color: var(--grey-light); }
.belege-schluss { padding: 56px 0 88px; border-top: 1px solid var(--line); }
.belege-schluss p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--grey);
  max-width: 36em;
  margin: 0 0 24px;
}

/* ---------- RESPONSIVE ---------- */

/* Das große „Aa" reicht von allen Zeichen am weitesten nach links. Zwischen
   1040 und 1100 px steht es der Headline bis auf 7 px nahe — gemessen, nicht
   geschätzt. Es geht deshalb eine Stufe früher als die übrigen. */
@media (max-width: 1100px) {
  .spec-aa { display: none; }
}

/* Kopfzeile bricht früher um als der Seiteninhalt: Logo, Umschalter und die
   sechs Navigationspunkte der Startseite brauchen zusammen 926 px, mit dem
   Seitenrand 990 px. Der Umbruch liegt bei der Satzbreite (1040 px): oberhalb
   davon ist die Zeile durch `.wrap` auf 976 px begrenzt und passt immer mit
   50 px Reserve, unterhalb schrumpft sie und liefe rechts aus dem Fenster.
   Der Seiteninhalt stapelt weiterhin erst bei 760 px (Block darunter). */
@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  /* Burger rutscht neben den Umschalter und bleibt rechtsbündig */
  .nav-main { margin-left: auto; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 32px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 18px rgba(32, 28, 24, 0.08);
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links li > a { display: block; padding: 12px 0; border-bottom: none; }
  .nav-links a.is-current { color: var(--oxblood); }
  .nav-links .btn-nav { display: inline-block; margin-top: 12px; padding: 10px 18px; }
  /* Das Klappmenü hängt am Header, nicht an der Zeile — so läuft es über die
     volle Breite und nicht nur über die Satzbreite. */
  header .wrap.nav { position: static; }
  header { position: sticky; }
  /* flex-wrap: Unter ~460 px rutscht der Umschalter in eine zweite Zeile; die
     Kopfzeile wächst dann mit, statt den Inhalt abzuschneiden. */
  .nav { flex-wrap: wrap; position: relative; }

  /* Ab hier wird die Satzbreite schmaler als das Fenster: Die Zeichen, die am
     weitesten nach links reichen, würden in Headline und Lead laufen.
     Übrig bleiben die beiden am Rand angeschnittenen. */
  .spec-sect, .spec-num { display: none; }
  .spec-amp { font-size: 220px; }
  .spec-para { font-size: 150px; }
}

@media (max-width: 760px) {
  .nav { gap: 14px; }
  .switch { font-size: 12px; }
  .switch-seg { padding: 7px 14px; }

  .section-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 40px; }
  .section-head .section-label { margin-top: 4px; }
  .projects { grid-template-columns: 1fr; gap: 40px; }

  /* /belege/: untereinander, Vorher zuerst – nebeneinander wären zwei
     A4-Blätter auf dem Handy je 140 px breit und nicht lesbar. */
  .belege-kopf { padding: 52px 0 12px; }
  .beleg-abschnitt { padding: 44px 0; }
  .belege-paar { grid-template-columns: 1fr; gap: 28px; }
  .belege-schluss { padding: 44px 0 64px; }

  /* /anlaesse/ */
  .process-grid { grid-template-columns: 1fr; gap: 36px; }

  /* Fälle: eine Spalte. Die Kleinbilder stehen weiter nebeneinander, damit
     Handy und Innenseite vergleichbar bleiben – bei 360 px passen sie nur
     mit 200 px Höhe in die Spalte (296 px Inhaltsbreite). Ebenso die Belege:
     zwei A4-Hochformate nebeneinander ergeben hier 200 px Höhe. */
  .fall-grid { grid-template-columns: 1fr; gap: 48px; margin-bottom: 56px; }
  /* Nebeneinander wie auf dem Desktop: Handy (0,5625) und Innenseite (0,8462)
     brauchen zusammen das 1,409-fache der Höhe, in 288 px Zeilenbreite also
     bis zu 204 px. 200 px passen mit 290 px Reihenbreite. */
  .fall-klein { --klein-h: 200px; }
  /* Gestapelt: „ENTSCHEIDUNG“ ist in Versalien breiter als jede Spalte, die
     bei 296 px Inhaltsbreite noch Platz für den Wert daneben liesse. */
  .fall-zeile { grid-template-columns: 1fr; gap: 3px; }
  .fall-text dt { padding-top: 0; }
  .vorlagen-titel { padding-top: 28px; margin-bottom: 32px; }
  .paar-reihe { --beleg-h: 200px; --beleg-fuge: 12px; }
  /* Die eBay-Aufnahmen sind breiter als die Belege: zusammen brauchen sie
     das 1,720-fache der Höhe, in 284 px Zeilenbreite also höchstens 165 px.
     Bei 200 liefe die Reihe mit 356 px über den Bildrand. */
  .paar-ebay .paar-reihe { --beleg-h: 160px; }
  .beleg-amber .amber-label { font-size: 11px; }
  .beleg-amber .amber-file { font-size: 9px; }

  /* Methode: Foto über die Karte statt daneben. Der Platzhalter kann dann
     keine Kartenhöhe mehr annehmen und bekommt ein eigenes Mindestmaß. */
  /* Methode: die Karten stehen untereinander. Begriff über dem Wert, weil
     „CHARAKTER" in Versalien breiter ist als jede Spalte, die bei 296 px
     Inhaltsbreite noch Platz für den Wert daneben ließe. Die Mindesthöhe
     entfällt hier: untereinander muss nichts mehr auf einer Linie stehen. */
  .methode-karten { grid-template-columns: 1fr; gap: 20px; }
  .karte { padding: 20px; }
  .karte-titel { font-size: 16px; margin-bottom: 14px; padding-bottom: 12px; }
  .karte-zeile { grid-template-columns: 1fr; gap: 3px; padding: 11px 0; }
  .karte-liste dt { padding-top: 0; }
  .karte-liste dd { font-size: 14px; min-height: 0; }
  .methode-fuss { gap: 14px; margin-top: 22px; }
  .karte-satz { font-size: 16px; }
  /* Preise: die drei Gruppen untereinander. Posten und Betrag bleiben
     nebeneinander – der Betrag ist kurz und darf die Zeile rechts abschließen. */
  /* Mobil untereinander – die Platzierung der Desktop-Spalten wird dafür
     zurückgenommen, sonst bliebe die Reihenfolge Websites, Marke, Vorlagen. */
  .preis-gruppen { grid-template-columns: 1fr; gap: 20px; }
  .preis-gruppe:nth-child(1),
  .preis-gruppe:nth-child(2),
  .preis-gruppe:nth-child(3) { grid-column: auto; grid-row: auto; }
  .preis-gruppe,
  .preis-pakete { padding: 20px; }
  .preis-pakete { margin-top: 20px; }
  .preis-titel { font-size: 16px; margin-bottom: 14px; padding-bottom: 12px; }
  .preis-liste dt { font-size: 14px; }
  .preis-num { font-size: 14px; }
  /* Auf dem Handy nimmt der Text die ganze Breite — das Musterblatt läge
     unter der Headline statt neben ihr. */
  .hero-specimen { display: none; }
  /* Die vier Schritte untereinander; Formularfelder ebenso, Name und
     E-Mail stehen bei 296 px nicht nebeneinander. */
  .schritte { grid-template-columns: 1fr; gap: 28px; }
  .schritt-num { font-size: 30px; }
  .anlaesse-hinweis { padding: 40px 0; }
  .anfrage { grid-template-columns: 1fr; gap: 16px; }
  .cta { padding: 64px 0; }
  .cta .cta-signatur { font-size: 18px; }
  .stage-grid,
  .stage-grid-5 { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding: 64px 0 56px; }
  /* Startseiten-Hero bleibt eng: der Anfrage-Button muss bei 360 × 640 ohne
     Scrollen sichtbar sein (aufbau.md, Regel 5). Steht nach .hero, damit die
     knappere Angabe gewinnt. */
  .hero-blaetter { padding: 20px 0 32px; }
  .sheet figcaption { padding-top: 7px; font-size: 10px; }
  .cap-lang { display: none; }
  .cap-kurz { display: inline; }
  /* Ohne Logo und Umschalter passt die Kopfzeile in eine Reihe: nur der
     Burger, rechts. Die Wortmarke tritt links dazu, sobald gescrollt wird. */
  .header-nav .nav { padding: 8px 16px; min-height: 56px; gap: 12px; }
  /* 18 statt 24 px: die reine Schriftzeile ist 9,34 : 1 lang und wäre bei
     24 px 222 px breit – neben dem Burger blieben nur 66 px Luft. Bei 18 px
     sind es 167 px und die Zeile steht frei. */
  .header-nav .header-brand img { height: 18px; }
  .header-nav .nav-links a.is-current { color: var(--ink); }

  .etikett { padding: 36px 0 40px; }
  /* Nur die Anzeigebreite setzen – der Außenabstand rechnet sich daraus
     selbst und bleibt optisch bei 8 px. */
  .etikett-logo { --logo-w: 260px; }
  .etikett-versal { font-size: 12px; margin-bottom: 12px; }
  .etikett-sub { margin-bottom: 24px; }
  .sheets { --fuge: 10px; --rand: 16px; }
  section { padding: 60px 0; }
  .legal { padding: 52px 0 64px; }
  .legal table { font-size: 13px; }
  .legal th, .legal td { padding: 8px 10px; }
  .legal-todo { padding: 20px; }
  .btn-ghost { margin-left: 0; margin-top: 10px; display: block; width: fit-content; }
  /* Textlink unter den Button statt daneben */
  .hero-link { margin-left: 0; margin-top: 20px; display: block; width: fit-content; }
  /* Im zentrierten Etikett mittig unter dem Button */
  .etikett .hero-link { margin-left: auto; margin-right: auto; }
  .etikett-lead { font-size: 15px; }
  /* Am Handy gibt es keine freien Ränder neben dem Text: nur 25 und 75 in den
     oberen Ecken neben dem Logo, 50 und 100 lägen hinter dem Lead. */
  .etikett-anlaesse .n50,
  .etikett-anlaesse .n100 { display: none; }

  /* Footer stapelt, die Marke bleibt oben */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-base { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  /* Einblenden abgeschaltet – Inhalte stehen sofort */
  .reveal { opacity: 1; transform: none; }
}