@font-face { font-family: "Instrument Serif"; src: url("../schriften/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../schriften/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../schriften/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../schriften/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../schriften/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../schriften/caveat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Seite bereit, Kern der Kundenseiten-Vorlagen (vorlagen/README.md).
   Jede Vorlage setzt in ihrer stil.css die Marken-Variablen unten. Der Kern regelt Raster, Typografie,
   Abstände, Zustände und die gemeinsamen Module. Keine Inline-Styles (CSP), keine fremden Server. */

/* ---------- Vertrag: diese Variablen setzt jede Vorlage (hier neutrale Werte als Rückfall) ---------- */
:root {
  --grund: #FBFAF7;          /* Seitenhintergrund */
  --flaeche: #F3F0EA;        /* ruhige zweite Fläche */
  --karte: #FFFFFF;          /* Karten, Formulare */
  --text: #1D1B18;
  --leise: #5F5A53;          /* Nebentext, mindestens 4,5:1 auf --grund */
  --linie: #E3DED5;
  --marke: #2B2E33;          /* Hauptfarbe des Betriebs */
  --marke-text: #FFFFFF;     /* Text auf --marke */
  --akzent: #B5652B;         /* Knöpfe, Hervorhebung */
  --akzent-text: #FFFFFF;
  --akzent-dunkel: #8F4E20;  /* Hover, Links auf hellem Grund */
  --dunkel: #1F1D1A;         /* dunkle Abschnitte */
  --dunkel-text: #F4F1EC;
  --dunkel-leise: #B9B2A7;
  --gut: #2E7A4C;            /* "Jetzt geöffnet" */
  --warn: #A85A12;
  --schrift-titel: Georgia, "Times New Roman", serif;
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-hand: var(--schrift-titel);  /* optionale Akzentschrift (Kreide, Handschrift) */
  --titel-gewicht: 600;
  --titel-laufweite: -0.01em;
  --titel-zeile: 1.08;
  --radius: 8px;
  --radius-bild: 6px;
  --breite: 1180px;
  --schatten: 0 1px 2px rgb(20 18 15 / 6%), 0 8px 24px rgb(20 18 15 / 6%);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 1.0625rem/1.62 var(--schrift-text);
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--akzent-dunkel); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus, var(--akzent)); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--akzent); color: var(--akzent-text); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht);
  letter-spacing: var(--titel-laufweite); line-height: var(--titel-zeile); text-wrap: balance; color: inherit;
}
h1 { font-size: clamp(2.35rem, 1.2rem + 4.6vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.3vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.45rem); line-height: 1.25; }
h4 { font-size: 1.05rem; line-height: 1.3; font-family: var(--schrift-text); font-weight: 700; letter-spacing: 0; }
.lead { font-size: clamp(1.12rem, 1.02rem + .4vw, 1.3rem); line-height: 1.55; color: var(--leise); max-width: 40em; text-wrap: pretty; }
.fliess > * + * { margin-top: 1em; }
.fliess { max-width: 38em; text-wrap: pretty; }
.leise { color: var(--leise); }
.klein { font-size: .9rem; }
.zahl { font-variant-numeric: tabular-nums; }
.kicker {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1.1rem;
  font: 600 .8rem/1.3 var(--schrift-text); letter-spacing: .12em; text-transform: uppercase; color: var(--akzent-dunkel);
}
.kicker::before { content: ""; width: 1.6em; height: 2px; background: currentColor; }
.hand { font-family: var(--schrift-hand); }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Raster ---------- */
.wrap { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.wrap--schmal { width: min(100% - 2.5rem, 760px); }
.abschnitt { padding-block: clamp(4rem, 2.5rem + 6vw, 7.5rem); }
.abschnitt--eng { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.abschnitt--flaeche { background: var(--flaeche); }
.abschnitt--dunkel { background: var(--dunkel); color: var(--dunkel-text); }
.abschnitt--dunkel .lead, .abschnitt--dunkel .leise { color: var(--dunkel-leise); }
.abschnitt--dunkel .kicker { color: var(--kicker-dunkel, var(--akzent)); }
.abschnitt--dunkel a:not(.knopf) { color: var(--dunkel-text); }
.abschnitt--marke { background: var(--marke); color: var(--marke-text); }
.abschnitt--marke .lead, .abschnitt--marke .leise { color: color-mix(in srgb, var(--marke-text) 78%, var(--marke)); }
.abschnitt--marke .kicker { color: inherit; }
.kopfzeile { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem); max-width: 46rem; }
.kopfzeile--mitte { margin-inline: auto; text-align: center; justify-items: center; }
.kopfzeile--zeile { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
/* Überschrift links, kurzer Text rechts daneben */
.kopfzeile--seite { max-width: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; column-gap: 3rem; }
.kopfzeile--seite .kicker, .kopfzeile--seite h2 { grid-column: 1; }
.kopfzeile--seite .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; max-width: 42ch; margin: 0; font-size: 1rem; }
@media (max-width: 760px) { .kopfzeile--seite { grid-template-columns: 1fr; } .kopfzeile--seite .lead { grid-column: 1; grid-row: auto; justify-self: start; } }
/* Kursiv-Akzent in Überschriften: *Wort* */
h1 em.akzent, h2 em.akzent { font-style: italic; color: var(--akzent); }   /* gezielt: die Rücksetzung für em in Überschriften bleibt für alles andere */
.abschnitt--dunkel h2 em.akzent, .abschnitt--marke h2 em.akzent { color: color-mix(in srgb, var(--akzent) 55%, #FFE6A0); }
.raster { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spalte, 280px)), 1fr)); }
.raster--2 { --spalte: 420px; }
.raster--3 { --spalte: 300px; }
.raster--4 { --spalte: 230px; }
.zwei { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.zwei--oben { align-items: start; }
.zwei--breit-links { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.zwei--breit-rechts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 860px) {
  .zwei, .zwei--breit-links, .zwei--breit-rechts { grid-template-columns: minmax(0, 1fr); }
  .kopfzeile--zeile { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .8em 1.35em;
  border: 2px solid var(--akzent); border-radius: var(--radius); background: var(--akzent); color: var(--akzent-text);
  font: 650 1rem/1.2 var(--schrift-text); text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.knopf:hover { background: var(--akzent-hover, var(--akzent-dunkel)); border-color: var(--akzent-hover, var(--akzent-dunkel)); text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.knopf--rand { background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.knopf--rand:hover { background: var(--text); color: var(--grund); border-color: var(--text); }
.abschnitt--dunkel .knopf--rand, .abschnitt--marke .knopf--rand, .held--voll .knopf--rand { color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.abschnitt--dunkel .knopf--rand:hover, .abschnitt--marke .knopf--rand:hover, .held--voll .knopf--rand:hover { background: var(--dunkel-text); color: var(--dunkel); border-color: var(--dunkel-text); }
.knopf--leise { background: transparent; border-color: transparent; color: inherit; padding-inline: .2em; text-decoration: underline; text-underline-offset: .25em; }
.knopf--leise:hover { background: transparent; border-color: transparent; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }

/* ---------- Kopf ---------- */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--text); color: var(--grund); border-radius: var(--radius); }
.skip:focus { top: 1rem; }
.hinweisband { background: var(--marke); color: var(--marke-text); font-size: .95rem; }
.hinweisband .wrap { display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; justify-content: center; padding-block: .6rem; text-align: center; }
.hinweisband a { color: inherit; font-weight: 600; }
.hinweisband--live .wrap { gap: .3rem 1.2rem; }
.hinweisband--sanft { animation: hinweis-rein .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hinweis-rein { from { opacity: 0; transform: translateY(-.6rem); } }
@media (prefers-reduced-motion: reduce) { .hinweisband--sanft { animation: none; } }
.kopf { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--grund) 94%, transparent); border-bottom: 1px solid var(--linie); }
@supports (backdrop-filter: blur(8px)) { .kopf { backdrop-filter: saturate(1.4) blur(10px); } }
.kopf .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.marke { display: flex; align-items: center; gap: .8rem; color: var(--text); text-decoration: none; min-width: 0; margin-right: auto; }
.marke img { width: auto; height: 44px; }
.marke-text { display: grid; line-height: 1.15; min-width: 0; }
.marke-text b { font: var(--titel-gewicht) 1.2rem/1.1 var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.marke-text span { font-size: .8rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navi { display: flex; align-items: center; gap: .25rem; }
.navi a { padding: .55rem .75rem; border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 550; font-size: .97rem; }
.navi a:hover { background: var(--flaeche); }
.navi a[aria-current="page"] { color: var(--akzent-dunkel); box-shadow: inset 0 -2px 0 var(--akzent); border-radius: 0; }
.kopf-anruf { white-space: nowrap; }
.kopf-anruf .zahl { font-weight: 650; }
.menue { display: none; }
@media (max-width: 1000px) {
  .navi, .kopf-anruf { display: none; }
  .menue { display: block; position: static; }
  .menue > summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem;
    border: 1px solid var(--linie); border-radius: var(--radius); font-weight: 600; cursor: pointer; background: var(--karte); }
  .menue > summary::-webkit-details-marker { display: none; }
  .menue > summary svg { width: 1.2em; height: 1.2em; }
  .menue[open] > summary { background: var(--text); color: var(--grund); border-color: var(--text); }
  .menue-feld { position: absolute; left: 0; right: 0; top: 100%; background: var(--grund); border-bottom: 1px solid var(--linie);
    box-shadow: 0 24px 40px rgb(0 0 0 / 12%); padding: .75rem 1.25rem 1.5rem; display: grid; gap: .25rem; max-height: calc(100dvh - 80px); overflow: auto; }
  .menue-feld a { padding: .9rem .25rem; border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none; font-size: 1.1rem; font-weight: 600; }
  .menue-feld .knopf { margin-top: 1rem; border-bottom: 0; color: var(--akzent-text); }
}

/* ---------- Held (Start jeder Seite) ---------- */
.held { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 6rem); }
.held h1 { max-width: 15ch; }
.held .lead { margin-top: 1.4rem; }
.held .knoepfe { margin-top: 2rem; }
.held-fakten { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2.25rem; padding: 0; list-style: none; color: var(--leise); font-size: .95rem; }
.held-fakten li { display: inline-flex; align-items: center; gap: .5rem; }
.held-fakten svg { width: 1.1em; height: 1.1em; color: var(--akzent); }
.held--bild .zwei { align-items: center; }
.held-bild { position: relative; }
.held-bild .bild { aspect-ratio: 4 / 5; }
.held-stempel { position: absolute; left: -1.25rem; bottom: 1.5rem; max-width: 15rem; padding: 1rem 1.15rem; border-radius: var(--radius);
  background: var(--karte); box-shadow: var(--schatten); font-size: .92rem; line-height: 1.4; }
.held-stempel b { display: block; font: var(--titel-gewicht) 1.6rem/1 var(--schrift-titel); color: var(--akzent-dunkel); margin-bottom: .3rem; }
@media (max-width: 860px) { .held-stempel { left: .75rem; bottom: .75rem; } .held-bild .bild { aspect-ratio: 4 / 3.4; } }
.held--voll { position: relative; display: grid; align-items: end; min-height: min(86dvh, 820px); padding: 0; color: #fff; isolation: isolate; overflow: hidden; }   /* Schatten endet an der Bildkante */
.held--voll .held-hintergrund { position: absolute; inset: 0; z-index: -2; }
.held--voll .held-hintergrund img, .held--voll .held-hintergrund .bild { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; }
/* Bühne: Titel direkt auf dem Foto. Weicher Schatten hinter dem Text, ohne Kasten und ohne Kante, das Foto bleibt rechts hell */
.held--voll::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(10 9 8 / 8%) 0%, rgb(10 9 8 / 0%) 35%, rgb(10 9 8 / 40%) 100%); }
/* Der weiche Schatten hängt am Textblock, nicht an der Fotobreite: wirkt bei 1440 und 1920 px gleich, läuft ohne Kante aus */
.held--voll .held-text { position: relative; max-width: 46rem; }   /* Textblock so breit wie der Text, damit der Schatten genau dahinter sitzt */
.held--voll .held-text::before { content: ""; position: absolute; z-index: -1; inset: -35% -20% -35% -45%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(12 14 12 / 84%) 0%, rgb(12 14 12 / 72%) 45%, rgb(12 14 12 / 38%) 75%, rgb(12 14 12 / 0%) 100%); }
.held--voll h1 { font-size: clamp(2.8rem, 1rem + 6vw, 6rem); line-height: 1.02; letter-spacing: -.02em; max-width: 12ch; color: #fff; text-wrap: balance; }
.held--voll h1, .held--voll .lead, .held--voll .kicker { text-shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 4px 24px rgb(0 0 0 / 30%); }
.held--voll .lead { max-width: 46ch; }
.held--voll h1 em.akzent { color: color-mix(in srgb, var(--akzent) 55%, #FFE6A0); }
@media (max-width: 760px) { .held--voll .held-text::before { inset: -25% -30% -20% -30%; } }
.held--voll .wrap { padding-block: clamp(3rem, 2rem + 6vw, 6rem); }
.held--voll .lead, .held--voll .held-fakten { color: rgb(255 255 255 / 86%); }
.held--voll .kicker { color: #fff; }
.held--typo h1 { max-width: 18ch; font-size: clamp(2.6rem, 1.2rem + 5.6vw, 5.6rem); }

/* ---------- Bilder und Platzhalter ---------- */
.bild { position: relative; overflow: hidden; border-radius: var(--radius-bild); background: var(--flaeche); aspect-ratio: var(--format, 4 / 3); }
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild--quer { --format: 16 / 10; } .bild--hoch { --format: 4 / 5; } .bild--quadrat { --format: 1 / 1; } .bild--breit { --format: 21 / 9; }
figure figcaption { margin-top: .6rem; font-size: .88rem; color: var(--leise); }
.bild--platz { display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--leise) 45%, transparent);
  background: repeating-linear-gradient(135deg, var(--flaeche) 0 14px, color-mix(in srgb, var(--flaeche) 70%, var(--linie)) 14px 15px); }
.bild--platz span { max-width: 22ch; padding: 1rem; text-align: center; font-size: .9rem; color: var(--leise); }
.bild--platz svg { width: 2.2rem; height: 2.2rem; margin: 0 auto .5rem; color: var(--leise); opacity: .7; }
.offen { padding: .05em .35em; border-radius: 4px; background: color-mix(in srgb, var(--warn) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); color: inherit; }
.bildnachweis { font-size: .78rem; color: var(--leise); }

/* ---------- Eckdaten-Leiste ---------- */
.eckdaten { border-block: 1px solid var(--linie); background: var(--karte); }
.eckdaten ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 0; padding: 0; list-style: none; }
.eckdaten li { display: flex; gap: .85rem; align-items: flex-start; padding: 1.35rem 1.25rem; border-left: 1px solid var(--linie); }
.eckdaten li:first-child { border-left: 0; }
.eckdaten svg { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .15rem; color: var(--akzent); }
.eckdaten b { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
/* Faktenleiste: Titel in der Titelschrift, Zeile darunter, Symbol im Kreis */
.eckdaten--fakten { background: var(--grund); border-top: 0; }
.eckdaten--fakten ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.eckdaten--fakten li { align-items: center; padding: 1.6rem 1.5rem; }
.eckdaten--fakten li:first-child { padding-left: 0; }
.eckdaten.eckdaten--fakten svg { width: 2.6rem; height: 2.6rem; margin: 0; padding: .62rem; border-radius: 50%; background: color-mix(in srgb, var(--akzent) 13%, transparent); color: var(--akzent-dunkel, var(--akzent)); }
.eckdaten.eckdaten--fakten b { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 1.12rem; letter-spacing: 0; text-transform: none; color: var(--text); line-height: 1.25; }
.eckdaten.eckdaten--fakten span { display: block; margin-top: .15rem; font-size: .85rem; color: var(--leise); }
@media (max-width: 760px) {
  .eckdaten--fakten ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eckdaten--fakten li { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.1rem .9rem; }
  .eckdaten--fakten li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .eckdaten--fakten li:nth-child(n+3) { border-top: 1px solid var(--linie); }
}
.eckdaten span, .eckdaten a { font-weight: 600; color: var(--text); text-decoration: none; }
@media (max-width: 720px) { .eckdaten li { border-left: 0; border-top: 1px solid var(--linie); } .eckdaten li:first-child { border-top: 0; } }

/* ---------- Status "Jetzt geöffnet" ---------- */
.status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; }
.status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--leise); }
.status[data-zustand="offen"]::before { background: var(--gut); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gut) 20%, transparent); }
.status[data-zustand="bald"]::before { background: var(--warn); }
.status[data-zustand="zu"]::before { background: #B4462E; }

/* ---------- Karten ---------- */
.karte { display: grid; align-content: start; gap: .75rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--radius);
  background: var(--karte); border: 1px solid var(--linie); }
.karte--bild { padding: 0; overflow: hidden; gap: 0; }
.karte--bild .karte-inhalt { display: grid; gap: .6rem; padding: 1.25rem 1.35rem 1.5rem; }
.karte--bild .bild { border-radius: 0; }
.karte h3 { font-size: 1.3rem; }
.karte .liste-haken { margin-top: .25rem; }
.symbol { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius); background: color-mix(in srgb, var(--akzent) 13%, transparent); color: var(--akzent-dunkel); }
.symbol svg { width: 1.6rem; height: 1.6rem; }
.liste-haken { display: grid; gap: .45rem; padding: 0; list-style: none; }
.liste-haken li { position: relative; padding-left: 1.6rem; }
.liste-haken li::before { content: ""; position: absolute; left: 0; top: .5em; width: .85rem; height: .5rem; border-left: 2px solid var(--haken, var(--akzent)); border-bottom: 2px solid var(--haken, var(--akzent)); transform: rotate(-45deg); }
a.karte { color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.karte:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); box-shadow: var(--schatten); transform: translateY(-2px); }

/* ---------- Text mit Bild ---------- */
.geschichte .fliess { font-size: 1.08rem; }
.zitat { position: relative; margin-top: 2rem; padding: 1.25rem 0 0 1.5rem; border-left: 3px solid var(--akzent); }
.zitat p { font: italic var(--titel-gewicht) clamp(1.25rem, 1.05rem + .8vw, 1.6rem)/1.35 var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.zitat footer { margin-top: .7rem; font-size: .92rem; color: var(--leise); }

/* ---------- Ablauf ---------- */
.ablauf { counter-reset: schritt; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding: 0; list-style: none; }
.ablauf li { counter-increment: schritt; position: relative; padding-top: 3.6rem; }
.ablauf li::before { content: counter(schritt, decimal-leading-zero); position: absolute; top: 0; left: 0;
  font: var(--titel-gewicht) 2.4rem/1 var(--schrift-titel); color: var(--akzent); }
.ablauf li::after { content: ""; position: absolute; top: 1.2rem; left: 3.8rem; right: 0; height: 1px; background: var(--linie); }
.ablauf li:last-child::after { display: none; }
.ablauf h3 { margin-bottom: .4rem; }
.ablauf p { color: var(--leise); }
.ablauf .dauer { display: inline-block; margin-top: .6rem; font-size: .85rem; font-weight: 600; color: var(--akzent-dunkel); }
.abschnitt--dunkel .ablauf p { color: var(--dunkel-leise); }
.abschnitt--dunkel .ablauf li::after { background: rgb(255 255 255 / 15%); }

/* ---------- Kennzahlen ---------- */
.zahlen { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); padding: 0; list-style: none; }
.zahlen li { display: grid; gap: .35rem; padding-top: 1rem; border-top: 2px solid currentColor; }
.zahlen b { font: var(--titel-gewicht) clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/1 var(--schrift-titel); font-variant-numeric: tabular-nums; letter-spacing: var(--titel-laufweite); }
.zahlen span { color: var(--leise); font-size: .95rem; }
.abschnitt--dunkel .zahlen span, .abschnitt--marke .zahlen span { color: inherit; opacity: .8; }

/* ---------- Vertrauen ---------- */
.siegel { display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; list-style: none; }
.siegel li { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .95rem .6rem .7rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); font-weight: 600; font-size: .95rem; }
.siegel svg { width: 1.4rem; height: 1.4rem; color: var(--akzent); }
.siegel small { display: block; font-weight: 400; color: var(--leise); font-size: .8rem; }

/* ---------- Projekte und Galerie ---------- */
.projekte { display: grid; gap: clamp(1rem, .6rem + 1.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.projekt { display: grid; gap: .8rem; }
.projekt .bild { --format: 4 / 3; }
.projekt-zeile { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .88rem; color: var(--leise); padding: 0; list-style: none; }
.projekt-zeile li + li::before { content: "·"; margin-right: .9rem; }
.projekt--gross { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
@media (max-width: 860px) { .projekt--gross { grid-template-columns: minmax(0, 1fr); } }
.galerie { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.galerie .bild { --format: 1 / 1; }

/* ---------- Stimmen ---------- */
.stimmen { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.stimme { display: grid; gap: 1rem; align-content: space-between; padding: 1.6rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.stimme p { font: var(--titel-gewicht) 1.18rem/1.45 var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.stimme footer { font-size: .9rem; color: var(--leise); }
.stimme footer a { color: inherit; }

/* ---------- Fragen ---------- */
.fragen { display: grid; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.25rem 0; cursor: pointer; list-style: none;
  font: 600 1.12rem/1.4 var(--schrift-text); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: .7rem; height: .7rem; margin-right: .3rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-25%); transition: transform .25s; }
.fragen details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.fragen .antwort { padding: 0 0 1.4rem; max-width: 46em; color: var(--leise); }
.abschnitt--dunkel .fragen, .abschnitt--dunkel .fragen details { border-color: rgb(255 255 255 / 16%); }

/* ---------- Team ---------- */
.team { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.person { display: grid; gap: .5rem; }
.person .bild { --format: 4 / 5; margin-bottom: .4rem; }
.person h3 { font-size: 1.2rem; }
.person span { color: var(--leise); font-size: .95rem; }

/* ---------- Zeitleiste (Chronik) ---------- */
.zeitleiste { position: relative; display: grid; gap: 2rem; padding: 0 0 0 2rem; list-style: none; }
.zeitleiste::before { content: ""; position: absolute; left: .4rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--linie); }
.zeitleiste li { position: relative; display: grid; gap: .3rem; }
.zeitleiste li::before { content: ""; position: absolute; left: -2rem; top: .35rem; width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--grund); border: 3px solid var(--akzent); }
.zeitleiste .jahr { font: var(--titel-gewicht) 1.5rem/1 var(--schrift-titel); color: var(--akzent-dunkel); font-variant-numeric: tabular-nums; }
.zeitleiste p { color: var(--leise); max-width: 40em; }
@media (min-width: 861px) {
  .zeitleiste--quer { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 2.2rem 0 0; gap: 1.5rem; }
  .zeitleiste--quer::before { left: 0; right: 0; top: .4rem; bottom: auto; width: auto; height: 2px; }
  .zeitleiste--quer li::before { left: 0; top: -2.2rem; }
}

/* ---------- Öffnungszeiten ---------- */
.zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td { padding: .7rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.zeiten th { font-weight: 600; padding-right: 1.5rem; white-space: nowrap; }
.zeiten tr[data-heute] th, .zeiten tr[data-heute] td { color: var(--akzent-dunkel); }
.zeiten tr[data-heute] th::after { content: " · Heute"; font-weight: 500; font-size: .85em; }
.ausnahmen { margin-top: 1.25rem; padding: 1rem 1.15rem; border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 9%, var(--karte)); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); }
.ausnahmen b { display: block; margin-bottom: .25rem; }

/* ---------- Termine ---------- */
.termine { display: grid; gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.termin { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--linie); }
.termin-datum { display: grid; justify-items: center; padding: .6rem .3rem; border-radius: var(--radius); background: var(--flaeche); line-height: 1.05; font-variant-numeric: tabular-nums; }
.termin-datum b { font: var(--titel-gewicht) 1.9rem/1 var(--schrift-titel); }
.termin-datum span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); }
.termin h3 { font-size: 1.2rem; }
.termin p { color: var(--leise); font-size: .95rem; }
@media (max-width: 640px) { .termin { grid-template-columns: 4.5rem minmax(0, 1fr); } .termin .knopf { grid-column: 2; justify-self: start; } }

/* ---------- Kontakt, Formular ---------- */
.kontakt-liste { display: grid; gap: 1.1rem; padding: 0; list-style: none; }
.kontakt-liste li { display: flex; gap: .9rem; align-items: flex-start; }
.kontakt-liste svg { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .2rem; color: var(--akzent); }
.kontakt-liste b { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.kontakt-liste a { font-weight: 600; color: inherit; }
.formular { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); color: var(--text); }
.formular h3 { margin-bottom: .2rem; }
.feld { display: grid; gap: .4rem; }
.feld > span { font-weight: 600; font-size: .95rem; }
.feld > span small { font-weight: 400; color: var(--leise); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 50px; padding: .75rem .9rem; border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: var(--radius);
  background: var(--grund); color: var(--text); font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.feld textarea { min-height: 140px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent); }
.feld[data-fehler] input, .feld[data-fehler] textarea, .feld[data-fehler] select { border-color: #B4462E; }
.feld-fehler { color: #B4462E; font-size: .88rem; }
.felder-2 { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.haken { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; }
.haken input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--akzent); flex: none; }
.wahl { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.wahl legend { width: 100%; margin-bottom: .45rem; font-weight: 600; font-size: .95rem; }
.wahl label { position: relative; }
.wahl input { position: absolute; opacity: 0; }
.wahl span { display: inline-flex; min-height: 44px; align-items: center; padding: .55rem .95rem; border: 1.5px solid var(--linie); border-radius: var(--radius); background: var(--grund); cursor: pointer; font-size: .95rem; }
.wahl input:checked + span { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, var(--grund)); font-weight: 600; }
.wahl input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: 2px; }
.fang { position: absolute; left: -9999px; }
.formular-meldung { padding: 1rem 1.15rem; border-radius: var(--radius); background: color-mix(in srgb, var(--gut) 12%, var(--karte)); border: 1px solid color-mix(in srgb, var(--gut) 35%, transparent); }
.formular-meldung[data-art="fehler"] { background: color-mix(in srgb, #B4462E 10%, var(--karte)); border-color: color-mix(in srgb, #B4462E 35%, transparent); }
.datenschutz-satz { font-size: .85rem; color: var(--leise); }

/* ---------- Karte nach Klick ---------- */
.karte-klick { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--flaeche); border: 1px solid var(--linie); }
.karte-klick .karte-vorhang { position: absolute; inset: 0; display: grid; place-content: center; gap: .9rem; padding: 1.5rem; text-align: center;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--akzent) 10%, transparent), transparent 60%), var(--flaeche); }
.karte-klick .karte-vorhang p { max-width: 30ch; margin-inline: auto; font-size: .88rem; color: var(--leise); }
.karte-klick iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte-muster { position: absolute; inset: 0; opacity: .5; color: var(--linie); }
/* Stadtplan als Bild: sofort da, Nadel auf der Adresse, „Karte bewegen“ lädt OpenStreetMap nach */
.karte--plan { background: var(--grund); }
.karte-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.karte-nadel { position: absolute; left: 50%; top: 50%; width: 34px; transform: translate(-50%, -100%); filter: drop-shadow(0 6px 8px rgb(0 0 0 / 28%)); }
.karte-nadel svg { display: block; width: 100%; height: auto; }
.karte-nadel path { fill: var(--akzent); stroke: #fff; stroke-width: 2; }
.karte-nadel circle { fill: #fff; }
.karte-nadel::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 14px; height: 6px; margin-left: -7px; border-radius: 50%;
  background: color-mix(in srgb, var(--akzent) 45%, transparent); animation: nadel-puls 2.4s ease-out infinite; }
@keyframes nadel-puls { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.karte-bewegen { position: absolute; left: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; min-height: 40px;
  border: 1px solid var(--linie); border-radius: var(--radius); background: color-mix(in srgb, var(--grund) 92%, transparent); color: var(--text);
  font: 600 .82rem/1 var(--schrift-text); cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / 10%); }
.karte-bewegen:hover { border-color: var(--akzent); color: var(--akzent-dunkel); }
.karte-bewegen svg { width: 1rem; height: 1rem; }
.karte-quelle { position: absolute; right: 0; bottom: 0; padding: .2rem .5rem; font-size: .68rem; color: var(--leise);
  background: color-mix(in srgb, var(--grund) 85%, transparent); border-top-left-radius: 6px; }
.karte-quelle a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .karte-nadel::after { animation: none; } }

/* ---------- Einzugsgebiet ---------- */
.orte { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.orte li { padding: .45rem .85rem; border-radius: 999px; background: var(--karte); border: 1px solid var(--linie); font-size: .95rem; }
.orte li[data-haupt] { background: var(--marke); color: var(--marke-text); border-color: var(--marke); font-weight: 600; }

/* ---------- Abschluss-Band ---------- */
.abschluss { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.abschluss h2 { max-width: 20ch; }
@media (max-width: 860px) { .abschluss { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Downloads, Stellen ---------- */
.dateien { display: grid; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.dateien a { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--linie); color: inherit; text-decoration: none; font-weight: 600; }
.dateien a span { font-weight: 400; font-size: .88rem; color: var(--leise); }
.dateien a:hover { color: var(--akzent-dunkel); }
.stelle { display: grid; gap: .8rem; }
.stelle-kopf { display: flex; flex-wrap: wrap; gap: .5rem; }
.etikett { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; background: var(--flaeche); font-size: .82rem; font-weight: 600; color: var(--leise); }
.etikett--akzent { background: color-mix(in srgb, var(--akzent) 15%, transparent); color: var(--akzent-dunkel); }

/* ---------- Fuß ---------- */
.fuss { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; background: var(--dunkel); color: var(--dunkel-text); font-size: .95rem; }
.fuss a { color: var(--dunkel-text); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-raster { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(160px, 1fr)); }
.fuss h2 { font-size: 1.5rem; margin-bottom: .8rem; }
.fuss h3 { font: 600 .78rem/1.3 var(--schrift-text); letter-spacing: .1em; text-transform: uppercase; color: var(--dunkel-leise); margin-bottom: .9rem; }
.fuss ul { display: grid; gap: .5rem; padding: 0; list-style: none; }
.fuss p { color: var(--dunkel-leise); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 14%); color: var(--dunkel-leise); font-size: .85rem; }
.fuss-unten nav { display: flex; gap: 1.25rem; }
@media (max-width: 720px) { .fuss-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Leiste unten am Handy: Anrufen, Route, Anfrage ---------- */
.handyleiste { display: none; }
@media (max-width: 720px) {
  .handyleiste { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); gap: .5rem; background: var(--grund); border-top: 1px solid var(--linie);
    box-shadow: 0 -10px 30px rgb(0 0 0 / 8%); }
  .handyleiste a { display: grid; justify-items: center; gap: .15rem; padding: .45rem .25rem; border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: .78rem; font-weight: 650; }
  .handyleiste a:first-child { background: var(--akzent); color: var(--akzent-text); }
  .handyleiste svg { width: 1.35rem; height: 1.35rem; }
  body:has(.handyleiste) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Rechtliches ---------- */
.recht { max-width: 46rem; }
.recht h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); margin-bottom: 2rem; }
.recht h2 { font-size: 1.4rem; margin: 2.5rem 0 .8rem; }
.recht h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.recht p, .recht ul { margin-bottom: .9rem; }
.recht address { font-style: normal; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .einblenden { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .js .einblenden.sichtbar { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* ---------- Druck ---------- */
@media print {
  .kopf, .handyleiste, .menue, .karte-klick, .formular, .hinweisband { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt { padding-block: 1.2rem; }
  .abschnitt--dunkel, .abschnitt--marke, .fuss { background: #fff; color: #000; }
  a { color: #000; }
}

/* ---------- Abstände (Hilfsklassen für Module) ---------- */
.abstand-oben-k { margin-top: 1rem; }
.abstand-oben { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.abstand-oben-g { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.abstand-unten { margin-bottom: 1rem; }
.stapel { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.projekte-gross { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.status { align-items: flex-start; }
.status::before { flex: none; margin-top: .5em; }
/* Seiten mit reinem Schrift-Start: der erste Abschnitt rückt näher heran */
.held--typo { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.held--typo + .abschnitt:not([class*="abschnitt--"]) { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.kopf-status { font-size: .8rem; font-weight: 600; color: var(--leise); white-space: nowrap; }
.kopf-status::before { width: .5rem; height: .5rem; margin-top: .35em; }
.karte-klick .karte-vorhang .symbol { margin-inline: auto; }
.kopfzeile--nur-knopf { display: flex; justify-content: flex-end; }
.monogramm { display: grid; place-items: center; background: color-mix(in srgb, var(--marke) 10%, var(--flaeche)); }
.monogramm span { font: var(--titel-gewicht) clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--schrift-titel); color: var(--marke); letter-spacing: .02em; }

/* Überschriften in einer Farbe und einem Schnitt: kein farbiges oder kursives Einzelwort (Erkennungszeichen von KI-Seiten) */
:is(h1, h2, h3) :is(em, strong, i, b) { font: inherit; color: inherit; }

/* Akzent auf dunklem Grund einstellbar (marke.farben.akzent_auf_dunkel), z. B. wenn das Logo-Blau dort zu dunkel ist */
.abschnitt--dunkel .ablauf li::before, .abschnitt--dunkel .zahlen b { color: var(--akzent-auf-dunkel, var(--akzent)); }
.abschnitt--dunkel .ablauf .dauer { color: var(--akzent-auf-dunkel, var(--akzent)); }
/* Offene Fragen auch auf dunklen und farbigen Flächen lesbar */
:is(.abschnitt--dunkel, .abschnitt--marke, .held--voll) .offen { background: color-mix(in srgb, #F6C77A 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #F6C77A 60%, transparent); color: inherit; }
/* Bildausschnitt aus der Inhaltsdatei: bild.position = oben, unten, links, rechts */
.bild img.pos-oben { object-position: center top; } .bild img.pos-unten { object-position: center bottom; }
.bild img.pos-links { object-position: left center; } .bild img.pos-rechts { object-position: right center; }

/* Musterbild im Entwurf: sichtbares Schild, bis ein echtes Foto da ist */
.bild--muster { position: relative; }
.bild-muster { position: absolute; right: 12px; top: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 4px;
  background: rgba(20, 18, 14, .78); color: #FFFFFF; font-size: 13px; line-height: 1.3; letter-spacing: .01em; }

/* Vorrat aus dem Kunden-Portal (Nur noch wenig da, Ausverkauft) */
.vorrat-hinweis { margin: 0 0 18px; padding: 14px 16px; border-left: 3px solid var(--akzent); background: var(--grund, #FFFFFF); color: var(--tinte, inherit); line-height: 1.5; }
.vorrat-hinweis--aus { font-weight: 600; }
form[data-vorrat-pause] { display: none !important; }

/* Menge je Sorte: Minus und Plus */
.feld--anzahl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--linie); }
.anzahl { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); width: max-content; }
.anzahl input { width: 4.5em; text-align: center; border: 0; background: transparent; font: inherit; font-size: 18px; padding: 10px 0; color: var(--text); -moz-appearance: textfield; }
.anzahl input::-webkit-outer-spin-button, .anzahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.anzahl input:focus { outline: none; }
.anzahl:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 18%, transparent); }
.anzahl-knopf { width: 44px; height: 44px; border: 0; background: transparent; color: var(--akzent-dunkel); font-size: 22px; line-height: 1; cursor: pointer; border-radius: var(--radius); }
.anzahl-knopf:hover { background: var(--flaeche); }
.anzahl-einheit { padding: 0 14px 0 2px; color: var(--leise); font-size: 14px; }

/* Kalender im Stil der Seite */
.datum-feld { cursor: pointer; caret-color: transparent; }
.kalender { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 308px; padding: 14px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); box-shadow: 0 14px 40px rgba(20, 18, 14, .14); }
.kalender[hidden] { display: none; }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kalender-kopf b { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 17px; color: var(--text); }
.kalender-kopf button { width: 36px; height: 36px; border: 1px solid var(--linie); border-radius: var(--radius); background: transparent; color: var(--text); font-size: 20px; cursor: pointer; }
.kalender-kopf button:disabled { opacity: .35; cursor: default; }
.kalender-tage, .kalender-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.kalender-tage span { font-size: 12px; color: var(--leise); padding: 4px 0; }
.kalender-raster button { height: 36px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 14.5px; cursor: pointer; }
.kalender-raster button:hover:not([disabled]) { background: var(--flaeche); }
.kalender-raster button.kalender-heute { box-shadow: inset 0 0 0 1px var(--linie); }
.kalender-raster button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); }
.kalender-raster button:disabled { color: var(--linie); cursor: default; }
.kalender-raster button:focus-visible, .kalender-kopf button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.kalender-fuss { margin-top: 8px; text-align: right; }
.kalender-fuss button { border: 0; background: none; color: var(--akzent-dunkel); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
/* Sorte gerade aus (Vorrat je Sorte aus dem Portal): Menge gesperrt, Hinweis am Feld */
.feld--anzahl > label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; min-width: 0; }
.feld--anzahl .feld-name { flex-basis: 100%; }
.feld--anzahl .feld-zusatz { font-size: 14px; color: var(--leise); }
.feld--anzahl:has(input:disabled) > label::after { content: "Gerade aus"; font-size: 14px; color: #8A2E1E; font-weight: 600; }
.feld--anzahl:has(input:disabled) .feld-zusatz::after { content: " ·"; }
@media (max-width: 480px) {
  .feld--anzahl .anzahl input { width: 2.6em; }
  .feld--anzahl .anzahl-einheit { display: none; }
}
.feld--anzahl:has(input:disabled) { opacity: .75; }
/* Kalendertage gegen Klassen aus Vorlagen absichern (genuss hat einen Baustein „.heute“) */
.kalender-raster { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kalender-raster button { min-width: 0; padding: 0; margin: 0; display: block; width: 100%; }

/* ---------- Bestätigung nach dem Absenden (formulare.<name>.erfolg) ---------- */
.formular-erfolg { display: grid; gap: 1.25rem; outline: none; animation: erfolg-rein .4s ease-out; }
.erfolg-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.erfolg-haken { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #E3F1E8; }   /* Erfolg in Grün, unabhängig von der Markenfarbe */
.erfolg-haken svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: #2E7A4C; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; animation: erfolg-haken .5s .15s ease-out forwards; }
.erfolg-kopf h3 { margin: 0; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); line-height: 1.2; }
.erfolg-kopf p { margin: .35rem 0 0; color: var(--leise); }
.erfolg-liste { margin: 0; display: grid; border-top: 1px solid var(--linie); }
.erfolg-liste div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--linie); }
.erfolg-liste dt { color: var(--leise); }
.erfolg-liste dd { margin: 0; font-weight: 600; text-align: right; }
.erfolg-zwischen { margin: .25rem 0 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.erfolg-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: schritt; }
.erfolg-schritte li { position: relative; display: grid; gap: .15rem; padding: 0 0 1.1rem 2.6rem; counter-increment: schritt; }
.erfolg-schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem;
  border-radius: 50%; border: 1px solid var(--linie); background: var(--karte); font-size: .85rem; font-weight: 600; color: var(--leise); }
.erfolg-schritte li::after { content: ""; position: absolute; left: .87rem; top: 1.8rem; bottom: .2rem; width: 1px; background: var(--linie); }
.erfolg-schritte li:last-child { padding-bottom: 0; }
.erfolg-schritte li:last-child::after { display: none; }
.erfolg-schritte li.erledigt::before { content: "✓"; background: #2E7A4C; border-color: #2E7A4C; color: #fff; }
.erfolg-schritte b { font-weight: 600; color: var(--text); }
.erfolg-schritte span { color: var(--leise); font-size: .95rem; }
.erfolg-fuss { margin: .25rem 0 0; }
@keyframes erfolg-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes erfolg-haken { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .formular-erfolg { animation: none; } .erfolg-haken svg { animation: none; stroke-dashoffset: 0; } }

/* Bestätigung als eigene Ansicht: der ganze Abschnitt zeigt nur noch sie */
.abschnitt--erfolg { scroll-margin-top: 5.5rem; }
.abschnitt--erfolg > .wrap > :not(.formular-erfolg), .formular--erfolg > :not(.formular-erfolg) { display: none !important; }
.abschnitt--erfolg .formular-erfolg { max-width: 42rem; margin-inline: auto; padding: clamp(1.75rem, 1rem + 3vw, 3rem); background: var(--karte);
  border: 1px solid var(--linie); border-radius: calc(var(--radius) + 4px); box-shadow: 0 24px 60px -30px rgb(40 30 15 / 30%); }
.abschnitt--erfolg .erfolg-kopf h3 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.erfolg-aus { display: none !important; }   /* nach dem Absenden: nur Kopf, Bestätigung und Fuß */

/* Eigene Erfolgsseite (danke.html, reserviert.html) */
.erfolg-seite { min-height: 70dvh; display: grid; align-items: center; }
.erfolg-seite .formular-erfolg { max-width: 42rem; margin-inline: auto; padding: clamp(1.75rem, 1rem + 3vw, 3rem); background: var(--karte);
  border: 1px solid var(--linie); border-radius: calc(var(--radius) + 4px); box-shadow: 0 24px 60px -30px rgb(40 30 15 / 30%); }
.erfolg-seite .erfolg-kopf h1 { margin: 0; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.15; }
.erfolg-seite .erfolg-fuss { display: flex; flex-wrap: wrap; gap: .75rem; }


/* Vorlage Manufaktur ("Atelier"). Meister- und Kunsthandwerk mit Werkstatt oder Laden.
   Idee: ein Werkbuch. Papierweiß, ruhige Serifenschrift, große Nahaufnahmen mit nummerierten Bildzeilen,
   feine Haarlinien statt Kästen, ein Metallton als einziger Akzent. Material und Hand stehen im Mittelpunkt,
   Öffnungszeit und Termin bleiben in Reichweite. Farben je Gewerk: vorlage.json. */
:root {
  --grund: #F6F3EE;
  --flaeche: #EDE8E0;
  --karte: #FFFDF9;
  --text: #1E1D1B;
  --leise: #5C574F;
  --linie: #DCD5CA;
  --marke: #23262B;
  --marke-text: #F6F3EE;
  --akzent: #A8833F;
  --akzent-text: #FFFFFF;
  --akzent-dunkel: #7A5C26;
  --dunkel: #1D1E21;
  --dunkel-text: #F1ECE4;
  --dunkel-leise: #B8B0A4;
  --schrift-titel: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --schrift-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-hand: "Caveat", "Segoe Print", cursive;
  --titel-gewicht: 400;
  --titel-laufweite: -0.012em;
  --titel-zeile: 1.02;
  --radius: 3px;
  --radius-bild: 2px;
  --breite: 1240px;
  --haar: 1px solid var(--linie);
  --kicker-dunkel: var(--akzent);
  --schatten: 0 1px 1px rgb(30 25 18 / 4%), 0 18px 40px -22px rgb(30 25 18 / 28%);
}

/* ---------- Typografie ---------- */
body { font-size: 1.0625rem; line-height: 1.65; }
h1 { font-size: clamp(2.8rem, 1.3rem + 5.2vw, 5.9rem); line-height: .98; letter-spacing: -0.02em; }
h2 { font-size: clamp(2.2rem, 1.45rem + 2.9vw, 3.7rem); line-height: 1.02; }
h3 { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(1.45rem, 1.25rem + .6vw, 1.8rem); line-height: 1.12; letter-spacing: -0.005em; }
/* Überschriften durchgehend in einer Farbe und einem Schnitt: Hervorhebung nur über Größe, Gewicht und Weißraum */
h1 strong, h2 strong, h3 strong, .leitsatz strong, .meister-zitat strong { font-style: inherit; font-weight: inherit; color: inherit; }
.lead { color: var(--leise); font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem); line-height: 1.6; max-width: 34em; }
.kicker { font: 500 .74rem/1.3 var(--schrift-text); letter-spacing: .2em; color: var(--akzent-dunkel); gap: .75em; }
/* Lagerstein statt Strich: kleiner Ring vor jedem Etikett */
.kicker::before { width: .55em; height: .55em; border: 1px solid currentColor; border-radius: 50%; background: transparent; }
:focus-visible { outline-color: var(--akzent-dunkel); outline-width: 2px; }
.abschnitt { padding-block: clamp(4.5rem, 2.8rem + 6.5vw, 9rem); }
.abschnitt--eng { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.kopfzeile { gap: 1.1rem; margin-bottom: clamp(2.5rem, 1.6rem + 2.6vw, 4.5rem); }
.kopfzeile h2 { max-width: 17ch; }
.fliess { max-width: 36em; }
.zahl { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Knöpfe: dunkel, schmal, mit feiner Kante ---------- */
.knopf { border-radius: 2px; border-width: 1px; background: var(--marke); border-color: var(--marke); color: var(--marke-text);
  font: 500 .98rem/1.2 var(--schrift-text); letter-spacing: .01em; padding: .85em 1.5em; }
.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.knopf--rand { background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--text) 28%, transparent); }
.knopf--rand:hover { background: var(--text); color: var(--grund); border-color: var(--text); }
.knopf--leise { background: transparent; color: inherit; border-color: transparent; }
.knopf--leise:hover { background: transparent; color: var(--akzent-dunkel); border-color: transparent; }
.abschnitt--marke .knopf:not(.knopf--rand, .knopf--leise), .abschnitt--dunkel .knopf:not(.knopf--rand, .knopf--leise) {
  background: var(--grund); color: var(--text); border-color: var(--grund); }
.abschnitt--marke .knopf:not(.knopf--rand, .knopf--leise):hover, .abschnitt--dunkel .knopf:not(.knopf--rand, .knopf--leise):hover {
  background: var(--akzent); border-color: var(--akzent); color: #16130E; }
.abschnitt--marke .kicker { color: var(--akzent); }

/* ---------- Kopf ---------- */
.hinweisband { font-size: .86rem; letter-spacing: .01em; }
.kopf { background: color-mix(in srgb, var(--grund) 95%, transparent); border-bottom: var(--haar); }
.kopf .wrap { min-height: 80px; }
.marke-text b { font: 400 1.65rem/1 var(--schrift-titel); letter-spacing: -0.01em; }
.marke-text span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .3rem; }
.marke-text .kopf-status { text-transform: none; letter-spacing: .01em; font-size: .8rem; font-weight: 500; }
.navi { gap: .15rem; }
.navi a { font-weight: 500; font-size: .95rem; padding: .55rem .8rem; }
.navi a:hover { background: transparent; color: var(--akzent-dunkel); }
.navi a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -1px 0 var(--akzent); }
.navi a[lang], .menue-feld a[lang] { font-style: italic; font-family: var(--schrift-titel); font-size: 1.08rem; }
.kopf-anruf { background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--text) 25%, transparent); padding-inline: 1.1em; }
.kopf-anruf:hover { background: var(--text); color: var(--grund); border-color: var(--text); }
.kopf-anruf svg { color: var(--akzent-dunkel); }
.kopf-anruf:hover svg { color: inherit; }
.menue-feld a { font: 400 1.5rem/1.2 var(--schrift-titel); }
.menue-feld .knopf { font: 500 1rem/1.2 var(--schrift-text); color: var(--marke-text); }

/* ---------- Bilder und Bildzeilen (Werkbuch) ---------- */
.bild { border-radius: var(--radius-bild); }
.figur { margin: 0; }
.figur figcaption, .rundgang figcaption { display: flex; gap: .8rem; align-items: baseline; margin-top: .8rem; padding-top: .65rem;
  border-top: var(--haar); font-size: .84rem; line-height: 1.45; color: var(--leise); }
.abb { flex: none; font: 600 .7rem/1.4 var(--schrift-text); letter-spacing: .12em; text-transform: uppercase; color: var(--akzent-dunkel); font-variant-numeric: tabular-nums; }
.bild--platz { border-style: solid; border-width: 1px; border-color: var(--linie);
  background: repeating-linear-gradient(135deg, var(--flaeche) 0 10px, color-mix(in srgb, var(--flaeche) 75%, var(--linie)) 10px 11px); }

/* ---------- Auftakt (Start) ---------- */
.auftakt { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(4rem, 2.5rem + 5vw, 7.5rem); }
.auftakt-raster { display: grid; gap: 2.5rem clamp(2.5rem, 1rem + 5vw, 6.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "text bild" "karte bild"; align-items: start; }
.auftakt-text { grid-area: text; padding-top: clamp(0rem, -1rem + 3vw, 3rem); }
.auftakt-text h1 { max-width: 11ch; }
.auftakt-text .lead { margin-top: 1.6rem; }
.auftakt-text .knoepfe { margin-top: 2.25rem; }
.auftakt-bild { grid-area: bild; }
.auftakt-bild .bild { --format: 4 / 5; }
.auftakt-sprache { margin-top: 1.75rem; }
.auftakt-sprache a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--text); font: italic 400 1.2rem/1 var(--schrift-titel); text-decoration: none; }
.auftakt-sprache a:hover { color: var(--akzent-dunkel); }
.auftakt-sprache svg { width: 1.1rem; height: 1.1rem; color: var(--akzent-dunkel); }
.werkstattkarte { grid-area: karte; align-self: end; max-width: 30rem; padding-top: 1.25rem; border-top: 1px solid var(--text); }
.werkstattkarte-titel { font: 500 .72rem/1.3 var(--schrift-text); letter-spacing: .2em; text-transform: uppercase; color: var(--leise); }
.werkstattkarte-status { margin: .7rem 0 1.1rem; font: 400 clamp(1.35rem, 1.15rem + .6vw, 1.65rem)/1.2 var(--schrift-titel); }
.werkstattkarte-status .status { font-weight: 400; gap: .65rem; }
.werkstattkarte-status .status::before { margin-top: .48em; }
.werkstattkarte dl { margin: 0; display: grid; }
.werkstattkarte dl div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .6rem 0; border-top: var(--haar); font-size: .95rem; }
.werkstattkarte dt { color: var(--leise); font-size: .85rem; }
.werkstattkarte dd { margin: 0; }
.werkstattkarte dd a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); }
@media (max-width: 900px) {
  .auftakt-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "bild" "karte"; }
  .auftakt-bild .bild { --format: 4 / 3.6; }
  .werkstattkarte { max-width: none; }
}
@media (max-width: 480px) { .werkstattkarte dl div { grid-template-columns: 6rem minmax(0, 1fr); } }

/* ---------- Unterseiten: Kopf nur aus Schrift ---------- */
.held--typo { padding-block: clamp(3rem, 2rem + 4vw, 6rem) 0; }
.held--typo .wrap { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); border-bottom: var(--haar); }
.held--typo h1 { max-width: 15ch; font-size: clamp(2.7rem, 1.3rem + 4.8vw, 5.4rem); }
.held--typo .lead { margin-top: 1.5rem; }
.held--typo + .abschnitt { padding-top: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }

/* ---------- Leitsatz ---------- */
.leitsatz { margin: 0; text-align: center; }
.leitsatz p { font: 400 clamp(1.9rem, 1.2rem + 2.8vw, 3.3rem)/1.12 var(--schrift-titel); letter-spacing: -0.015em; text-wrap: balance; }
.leitsatz p::before { content: "„"; }
.leitsatz p::after { content: "“"; }
.leitsatz footer { margin-top: 1.5rem; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.leitsatz footer::before { content: ""; display: block; width: 2.5rem; height: 1px; margin: 0 auto 1.25rem; background: var(--akzent); }
.abschnitt--dunkel .leitsatz footer { color: var(--dunkel-leise); }

/* ---------- Handwerk im Detail ---------- */
.werkbuch { display: grid; gap: clamp(3.5rem, 2rem + 5vw, 7rem); padding: 0; margin: 0; list-style: none; }
.werkschritt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4.5vw, 6.5rem); align-items: center; }
.werkschritt:nth-child(even) .figur { order: 2; }
.werkschritt .bild--hoch { --format: 5 / 5.6; }
.werkschritt-text { max-width: 30rem; }
.werkschritt-nr { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; font: italic 400 1.35rem/1 var(--schrift-titel); color: var(--akzent-dunkel); font-variant-numeric: lining-nums; }
.werkschritt-nr::after { content: ""; flex: 0 0 3.5rem; height: 1px; background: var(--akzent); }
.werkschritt h3 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.05; margin-bottom: 1rem; }
.werkschritt-text > p { color: var(--leise); }
.werkschritt-text > p + p { margin-top: .8rem; }
.angaben { display: grid; margin: 1.6rem 0 0; }
.angaben div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .62rem 0; border-top: var(--haar); font-size: .93rem; }
.angaben div:last-child { border-bottom: var(--haar); }
.angaben dt { color: var(--leise); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .15rem; }
.angaben dd { margin: 0; }
.angaben--zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); column-gap: 2rem; }
.angaben--zwei div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
.angaben--zwei div:last-child { border-bottom: 0; }
@media (max-width: 860px) {
  .werkschritt { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .werkschritt:nth-child(even) .figur { order: 0; }
  .werkschritt .bild--hoch { --format: 4 / 3.4; }
}

/* ---------- Werkstatt-Rundgang ---------- */
.rundgang { display: grid; gap: clamp(1rem, .5rem + 1.2vw, 1.75rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rundgang-bild { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.rundgang-bild .bild { --format: 4 / 3; }
.rundgang--5 { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.rundgang--5 .rundgang-bild:first-child, .rundgang--6 .rundgang-bild:first-child, .rundgang--3 .rundgang-bild:first-child { grid-row: span 2; }
.rundgang--5 .rundgang-bild:first-child .bild, .rundgang--3 .rundgang-bild:first-child .bild, .rundgang--6 .rundgang-bild:first-child .bild { flex: 1 1 auto; aspect-ratio: auto; min-height: 20rem; }
.rundgang--5 .rundgang-bild:first-child .bild img, .rundgang--3 .rundgang-bild:first-child .bild img, .rundgang--6 .rundgang-bild:first-child .bild img { position: absolute; inset: 0; }
.rundgang--6 .rundgang-bild:first-child { grid-column: span 2; }
.rundgang--3 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.rundgang--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rundgang-hinweis { display: none; }
.rundgang:focus-visible { outline-offset: 6px; }
@media (max-width: 720px) {
  .rundgang, .rundgang--3, .rundgang--4, .rundgang--5, .rundgang--6 { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -1.25rem; padding: 0 1.25rem .5rem; scroll-padding-inline: 1.25rem; scrollbar-width: thin; }
  .rundgang-bild { flex: 0 0 84%; scroll-snap-align: start; }
  .rundgang .rundgang-bild .bild, .rundgang .rundgang-bild:first-child .bild { --format: 4 / 5; height: auto; aspect-ratio: var(--format); min-height: 0; flex: none; }
  .rundgang-hinweis { display: block; margin-top: .9rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
  .rundgang-hinweis::after { content: " →"; }
}

/* ---------- Material und Herkunft ---------- */
.materialien { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 0 clamp(2rem, 1rem + 3vw, 4.5rem); padding: 0; margin: 0; list-style: none; }
.material { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.6rem; align-items: start; padding: 1.75rem 0; border-top: var(--haar); }
.material .bild { --format: 1 / 1; }
.material-symbol { display: grid; place-items: center; aspect-ratio: 1; border: var(--haar); color: var(--akzent-dunkel); }
.material-symbol svg { width: 2rem; height: 2rem; }
.material h3 { font-size: 1.55rem; }
.material-herkunft { margin: .35rem 0 .6rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-dunkel); font-weight: 500; }
.material-pflege { margin-top: .7rem; font-size: .9rem; }
.material-pflege b { font-weight: 600; margin-right: .3rem; }
@media (max-width: 480px) { .material { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.1rem; } .material h3 { font-size: 1.35rem; } }

/* ---------- Preise mit Richtwerten ---------- */
.preisgruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: clamp(3rem, 2rem + 2vw, 4rem) clamp(2.5rem, 1rem + 4vw, 6rem); }
.preisgruppe header { display: grid; gap: .4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--text); }
.preisgruppe header h3 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); }
.preisgruppe-symbol { color: var(--akzent-dunkel); margin-bottom: .3rem; }
.preisgruppe-symbol svg { width: 1.6rem; height: 1.6rem; }
.preisliste { padding: 0; margin: 0; list-style: none; }
.preisliste li { display: flex; align-items: baseline; gap: .75rem; padding: .95rem 0 .85rem; border-bottom: var(--haar); }
.posten-name { flex: 0 1 auto; min-width: 0; }
.posten-name small { display: block; margin-top: .2rem; font-size: .84rem; color: var(--leise); }
.posten-linie { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 1px dotted color-mix(in srgb, var(--text) 40%, transparent); transform: translateY(-.28em); }
.posten-preis { flex: none; font: 400 1.35rem/1 var(--schrift-titel); white-space: nowrap; }
.posten-preis small { font: 500 .72rem/1 var(--schrift-text); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-right: .15rem; }
.preis-hinweis { display: flex; gap: .8rem; align-items: flex-start; max-width: 54rem; margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); padding: 1.1rem 1.25rem;
  border: var(--haar); background: var(--karte); font-size: .9rem; color: var(--leise); }
.preis-hinweis svg { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem; color: var(--akzent-dunkel); }

/* ---------- Reparatur-Annahme ---------- */
.reparatur-oben { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 6.5rem); align-items: start; }
.annahmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2.5rem; }
.annahme h3 { font-size: 1.55rem; padding-bottom: .9rem; border-bottom: 1px solid var(--text); }
.annahme-liste { padding: 0; margin: 0; list-style: none; }
.annahme-liste li { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem 0; border-bottom: var(--haar); font-size: .98rem; }
.annahme-liste svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .25rem; color: var(--akzent-dunkel); }
.annahme--nein .annahme-liste svg { color: var(--leise); }
.annahme--nein .annahme-liste li { color: var(--leise); }
/* Reparaturschein: ein Zettel vom Ladentisch, oben abgerissen, Einträge von Hand */
.schein { position: relative; margin: 1rem 0 0; padding: 1.9rem clamp(1.25rem, 1rem + 1vw, 2rem) 1.5rem; background: var(--karte); border: var(--haar);
  box-shadow: var(--schatten); transform: rotate(-1.2deg); }
.schein::before { content: ""; position: absolute; left: -1px; right: -1px; top: -6px; height: 12px;
  background: radial-gradient(circle at 7px 6px, var(--grund) 4.2px, transparent 4.8px) 0 0 / 14px 12px repeat-x; }
.abschnitt--flaeche .schein::before { background-image: radial-gradient(circle at 7px 6px, var(--flaeche) 4.2px, transparent 4.8px); }
.schein-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .8rem; margin-bottom: .3rem; border-bottom: 1px dashed color-mix(in srgb, var(--text) 35%, transparent);
  font: 600 .74rem/1.3 var(--schrift-text); letter-spacing: .18em; text-transform: uppercase; }
.schein-kopf .zahl { font: 400 1.3rem/1 var(--schrift-titel); letter-spacing: 0; color: var(--akzent-dunkel); }
.schein dl { margin: 0; }
.schein dl div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: .45rem 0 .2rem; border-bottom: 1px solid color-mix(in srgb, var(--linie) 80%, transparent); }
.schein dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.schein dd { margin: 0; font: 600 1.32rem/1.2 var(--schrift-hand); color: #2B3A55; }
.schein figcaption { margin-top: 1rem; font-size: .8rem; color: var(--leise); }
@media (max-width: 960px) { .reparatur-oben { grid-template-columns: minmax(0, 1fr); } .schein { transform: rotate(-.6deg); max-width: 34rem; } }
@media (max-width: 480px) { .schein dl div { grid-template-columns: 5.6rem minmax(0, 1fr); } }
.weg-rahmen { margin-top: clamp(4rem, 3rem + 4vw, 6.5rem); }
.weg-titel { margin-bottom: 2rem; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); }
.weg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 2rem 1.5rem; padding: 0; margin: 0; list-style: none; }
.weg li { position: relative; padding-top: 2.1rem; }
.weg li::before { content: ""; position: absolute; top: 6px; left: 1.4rem; right: -1.5rem; height: 1px; background: var(--linie); }
.weg li:last-child::before { display: none; }
.weg-punkt { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--akzent); background: var(--grund); }
.weg li:first-child .weg-punkt { background: var(--akzent); }
.weg h3 { font-size: 1.35rem; margin-bottom: .45rem; }
.weg p { color: var(--leise); font-size: .95rem; }
.weg .weg-dauer { margin-top: .6rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: var(--akzent-dunkel); }
@media (max-width: 640px) {
  .weg { gap: 1.75rem; }
  .weg li { padding: 0 0 0 2.2rem; }
  .weg li::before { top: 1.1rem; bottom: -1.75rem; left: 6px; right: auto; width: 1px; height: auto; }
}
.reparatur-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2rem clamp(1.5rem, 1rem + 2vw, 3rem);
  margin: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0 0; padding: 2.25rem 0 0; list-style: none; border-top: 1px solid var(--text); }
.reparatur-fakten li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }
.reparatur-fakten svg { width: 1.45rem; height: 1.45rem; color: var(--akzent-dunkel); margin-top: .2rem; }
.reparatur-fakten h3 { font-size: 1.35rem; margin-bottom: .35rem; }
.reparatur-fakten p { font-size: .95rem; }

/* ---------- Terminanfrage ---------- */
.termin-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 1rem + 5vw, 6.5rem); align-items: start; }
.termin-links .kopfzeile { margin-bottom: 2rem; }
.termin-weg { counter-reset: tw; display: grid; gap: 0; padding: 0; margin: 0 0 2.5rem; list-style: none; }
.termin-weg li { counter-increment: tw; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .5rem; padding: .8rem 0; border-top: var(--haar); }
.termin-weg li:last-child { border-bottom: var(--haar); }
.termin-weg li::before { content: counter(tw); font: italic 400 1.35rem/1.1 var(--schrift-titel); color: var(--akzent-dunkel); }
.termin-zeiten { padding: 1.25rem 1.4rem .6rem; background: var(--karte); border: var(--haar); }
.termin-zeiten-titel { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--leise); font-weight: 500; }
.termin-zeiten .zeiten { font-size: .95rem; }
.termin-zeiten .zeiten tr:last-child th, .termin-zeiten .zeiten tr:last-child td { border-bottom: 0; }
.termin-anruf { margin-top: 1.5rem; color: var(--leise); }
.termin-anruf + .termin-anruf { margin-top: .35rem; }
.termin-anruf a { color: var(--text); font-weight: 600; }
.termin-form { position: relative; }
@media (max-width: 960px) { .termin-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Formulare: ruhig, mit Haarlinien ---------- */
.formular { border-radius: 2px; background: var(--karte); border: var(--haar); padding: clamp(1.4rem, 1rem + 2vw, 2.75rem); gap: 1.35rem; box-shadow: var(--schatten); }
.formular h3 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); }
.feld > span, .wahl legend { font-weight: 500; font-size: .92rem; }
.feld input, .feld select, .feld textarea { border-radius: 2px; border-width: 1px; background: var(--grund); }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--akzent-dunkel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 25%, transparent); }
.wahl span { border-radius: 2px; border-width: 1px; }
.wahl input:checked + span { border-color: var(--text); background: var(--text); color: var(--grund); font-weight: 500; }
.formular .knoepfe .knopf { min-width: 12rem; }
/* Wunschtermine: nummeriert wie Zeilen auf einem Terminzettel */
.termin-form .formular { counter-reset: wunsch; }
.termin-form .felder-2:has(input[type="date"]) { counter-increment: wunsch; position: relative; padding: 1rem 0 0 2.6rem; border-top: var(--haar); }
.termin-form .felder-2:has(input[type="date"])::before { content: counter(wunsch); position: absolute; left: 0; top: 2.65rem;
  font: italic 400 1.9rem/1 var(--schrift-titel); color: var(--akzent-dunkel); }
.feld-hinweis { font-size: .85rem; color: var(--warn); }
@media (max-width: 480px) { .termin-form .felder-2:has(input[type="date"]) { padding-left: 2rem; } }

/* ---------- Pflege ---------- */
.pflegekarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(1rem, .5rem + 1.5vw, 1.75rem); }
.pflegekarte { display: flex; flex-direction: column; gap: .85rem; padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); background: var(--karte); border: var(--haar); }
.pflegekarte h3 { font-size: 1.65rem; }
.pflege-intervall { display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-dunkel); font-weight: 600; }
.pflege-intervall svg { width: 1rem; height: 1rem; }
.pflege-schritte { counter-reset: ps; display: grid; gap: .55rem; padding: 0; margin: .2rem 0 0; list-style: none; font-size: .96rem; }
.pflege-schritte li { counter-increment: ps; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); }
.pflege-schritte li::before { content: counter(ps) "."; font: italic 400 1.15rem/1.35 var(--schrift-titel); color: var(--akzent-dunkel); }
.pflege-nicht { display: flex; gap: .6rem; margin-top: auto; padding-top: .9rem; border-top: var(--haar); font-size: .9rem; color: var(--leise); }
.pflege-nicht svg { flex: none; width: 1rem; height: 1rem; margin-top: .25rem; }

/* ---------- Meisterporträt ---------- */
.meister { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 7rem); align-items: center; }
.meister .bild--hoch { --format: 4 / 5; }
.meister-text h2 { max-width: 14ch; }
.meister-rolle { margin-top: .9rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent-dunkel); font-weight: 500; }
.meister-zitat { margin: 2rem 0; padding-left: 1.5rem; border-left: 1px solid var(--akzent); }
.meister-zitat p { font: italic 400 clamp(1.55rem, 1.2rem + 1.3vw, 2.25rem)/1.2 var(--schrift-titel); letter-spacing: -0.01em; text-wrap: balance; }
.meister-text .fliess { color: var(--leise); }
.meister-text .angaben { margin-top: 2rem; }
@media (max-width: 860px) { .meister { grid-template-columns: minmax(0, 1fr); } .meister .bild--hoch { --format: 4 / 4.2; } }

/* ---------- Laden und Öffnungszeiten ---------- */
.laden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 6.5rem); align-items: start; }
.laden .kopfzeile { margin-bottom: 1.75rem; }
.laden-status { margin-bottom: 1.6rem; }
.laden-status .status { font: 400 clamp(1.55rem, 1.2rem + 1.2vw, 2.15rem)/1.15 var(--schrift-titel); gap: .75rem; }
.laden-status .status::before { width: .55rem; height: .55rem; margin-top: .55em; }
.zeiten th { font-weight: 500; }
.zeiten th, .zeiten td { padding: .78rem 0; }
.zeiten tr[data-heute] th, .zeiten tr[data-heute] td { color: var(--text); font-weight: 600; }
.zeiten tr[data-heute] th::after { color: var(--akzent-dunkel); }
.ausnahmen { border-radius: 2px; background: var(--karte); border-color: var(--linie); border-left: 2px solid var(--akzent); }
.laden-rechts { display: grid; gap: 1.75rem; }
.laden-rechts .bild { --format: 3 / 2; }
.laden-adresse { display: flex; gap: .9rem; align-items: flex-start; font-size: 1.02rem; }
.laden-adresse svg { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .2rem; color: var(--akzent-dunkel); }
.laden-adresse a { font-weight: 600; }
.laden-listen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.75rem 2rem; padding-top: 1.5rem; border-top: var(--haar); }
.laden-listen h3 { font-size: 1.35rem; margin-bottom: .7rem; }
.liste-punkt { display: grid; gap: .45rem; padding: 0; margin: 0; list-style: none; font-size: .96rem; }
.liste-punkt li { position: relative; padding-left: 1.2rem; }
.liste-punkt li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--akzent); }
@media (max-width: 860px) { .laden { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Werkstücke ---------- */
.werkstuecke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 2rem + 3vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem); }
.werkstueck { display: grid; gap: 1.4rem; align-content: start; }
.werkstueck .bild--hoch { --format: 4 / 4.6; }
.werkstueck--gross { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: end; }
.werkstueck--gross .bild { --format: 3 / 2; }
.werkstueck h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: .6rem; }
.werkstueck--gross h3 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem); }
.werkstueck-text > p { color: var(--leise); }
.werkstueck .angaben div { grid-template-columns: 7.5rem minmax(0, 1fr); }
.werkstuecke-abschnitt .werkstuecke .werkstueck:nth-child(2n+1):not(.werkstueck--gross) { margin-top: clamp(0rem, -2rem + 6vw, 5rem); }
@media (max-width: 760px) {
  .werkstuecke { grid-template-columns: minmax(0, 1fr); }
  .werkstueck--gross { grid-template-columns: minmax(0, 1fr); }
  .werkstuecke-abschnitt .werkstuecke .werkstueck:nth-child(2n+1):not(.werkstueck--gross) { margin-top: 0; }
}

/* ---------- Kurzfassung in zweiter Sprache ---------- */
.kurz { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 6.5rem); align-items: start; }
.kurz-text h2 { max-width: 16ch; }
.kurz-punkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.5rem 2rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.kurz-punkte li { padding-top: 1rem; border-top: var(--haar); }
.kurz-punkte h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.kurz-punkte p { font-size: .95rem; }
/* Zweite Sprache bleibt eine leise Beilage: Haarlinie, kleinere Überschrift */
.kurzfassung .kurz { padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-top: var(--haar); }
.kurzfassung .kurz-text h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); }
.kurz-zeiten { padding: 1.5rem 1.6rem 1rem; background: var(--karte); border: var(--haar); }
.kurz-zeiten h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.kurz-zeiten .zeiten tr:last-child th, .kurz-zeiten .zeiten tr:last-child td { border-bottom: 0; }
@media (max-width: 860px) { .kurz { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Gemeinsame Module im Atelier-Ton ---------- */
/* Verweise: Bild, Titel, leiser Link. Keine Kästen. */
.verweise a.karte { background: transparent; border: 0; border-radius: 0; gap: 0; }
.verweise a.karte:hover { box-shadow: none; transform: none; }
.verweise .karte--bild .bild { border-radius: var(--radius-bild); --format: 4 / 5; }
.verweise .karte--bild img { transition: transform .6s ease; }
.verweise a.karte:hover img { transform: scale(1.025); }
.verweise .karte--bild .karte-inhalt { padding: 1.25rem 0 0; gap: .5rem; }
.verweise .karte h3 { font-size: clamp(1.6rem, 1.35rem + .9vw, 2.1rem); }
.verweise .karte .knopf--leise { justify-self: start; min-height: 0; padding: .4rem 0 0; font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--akzent-dunkel); }
.verweise .karte .knopf--leise svg { transition: transform .25s; }
.verweise a.karte:hover .knopf--leise svg { transform: translateX(4px); }
.symbol { border-radius: 50%; background: transparent; border: var(--haar); color: var(--akzent-dunkel); }
.karte { border-radius: 2px; background: var(--karte); }
/* Vertrauen: Text statt Siegel-Wand */
.siegel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 2rem; }
.siegel li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .9rem; padding: 1.2rem 0; border: 0; border-top: 1px solid var(--text); border-radius: 0; background: transparent; font-weight: 500; font-size: 1rem; }
.siegel svg { color: var(--akzent-dunkel); margin-top: .1rem; }
.siegel small { font-size: .88rem; margin-top: .2rem; }
/* Chronik */
.zeitleiste .jahr { font: italic 400 1.9rem/1 var(--schrift-titel); color: var(--akzent-dunkel); }
.zeitleiste li::before { border-width: 1.5px; width: .8rem; height: .8rem; }
.zeitleiste::before { width: 1px; }
.zeitleiste h3 { font-size: 1.4rem; }
/* Fragen */
.fragen { border-top: 1px solid var(--text); }
.fragen summary { font: 400 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.3 var(--schrift-titel); padding: 1.35rem 0; }
.fragen summary::after { width: .55rem; height: .55rem; border-width: 1px; }
.fragen .antwort { font-size: 1rem; }
/* Kundenstimmen */
.stimme { background: transparent; border: 0; border-top: 1px solid var(--text); border-radius: 0; padding: 1.5rem 0 0; }
.stimme p { font: italic 400 1.4rem/1.35 var(--schrift-titel); }
/* Ablauf */
.ablauf li::before { font: italic 400 2.6rem/1 var(--schrift-titel); color: var(--akzent-dunkel); }
.ablauf .dauer { color: var(--akzent-dunkel); }
/* Team */
.person .bild { border-radius: var(--radius-bild); }
/* Kontakt und Anfahrt */
.kontakt-liste b { font-size: .72rem; letter-spacing: .14em; font-weight: 500; }
.kontakt-liste svg { color: var(--akzent-dunkel); }
.karte-klick { border-radius: 2px; }
.karte-vorhang .symbol { justify-self: center; }
/* Abschluss */
.abschluss-abschnitt h2 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem); max-width: 16ch; }
.abschluss-abschnitt .lead { max-width: 30em; }
/* Hilfslinks im Fließtext */
.fliess a, .lead a { color: inherit; text-decoration-color: var(--akzent); }

/* ---------- Fuß ---------- */
.fuss h2 { font: 400 2.1rem/1 var(--schrift-titel); }
.fuss h3 { letter-spacing: .16em; font-weight: 500; }

/* ---------- Handyleiste: erster Knopf dunkel statt Metallton (Kontrast) ---------- */
@media (max-width: 720px) {
  .handyleiste a:first-child { background: var(--marke); color: var(--marke-text); }
  .handyleiste a { font-weight: 600; }
}

/* ---------- Bewegung: ruhig, nur Deckkraft und Lage ---------- */
@media (prefers-reduced-motion: reduce) { .verweise .karte--bild img, .verweise .karte .knopf--leise svg { transition: none; } }

/* ---------- Druck: Pflegeanleitung allein drucken ---------- */
@media print {
  .schein { box-shadow: none; transform: none; }
  .druck-pflege main > :not(.pflege), .druck-pflege .fuss, .druck-pflege .pflege-drucken { display: none !important; }
  .pflegekarte { break-inside: avoid; border-color: #999; }
}


/* ---------- Handy: Status vor dem Bild, ruhigere Formate, nichts eng ---------- */
@media (max-width: 900px) {
  .auftakt-raster { grid-template-areas: "text" "karte" "bild"; }
  .verweise .karte--bild .bild { --format: 4 / 3; }
}
@media (max-width: 560px) {
  .marke-text span { letter-spacing: .04em; font-size: .66rem; }
  .marke-text .kopf-status { font-size: .76rem; letter-spacing: 0; }
  .auftakt-text h1 { font-size: clamp(3rem, 1.6rem + 6vw, 3.6rem); }
  .leitsatz footer { letter-spacing: .08em; }
  .zeiten th { white-space: normal; padding-right: 1rem; }
  .zeiten tr[data-heute] th::after { content: "Heute"; display: block; font-size: .78rem; font-weight: 500; }
  .kopfzeile h2 { max-width: none; }
}

/* ---------- Tabelle (Holzarten, Güten) ---------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tabelle thead th { padding: 0 1.25rem .8rem 0; border-bottom: 1px solid var(--text); text-align: left; font: 500 .72rem/1.3 var(--schrift-text);
  letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.tabelle tbody th { padding: 1.1rem 1.25rem 1.1rem 0; text-align: left; vertical-align: top; font: 400 1.45rem/1.15 var(--schrift-titel); white-space: nowrap; }
.tabelle td { padding: 1.15rem 1.25rem 1.1rem 0; vertical-align: top; color: var(--leise); }
.tabelle tbody tr { border-bottom: var(--haar); }
@media (max-width: 720px) {
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle th, .tabelle td { display: block; }
  .tabelle tbody tr { padding: 1.1rem 0; }
  .tabelle tbody tr:first-child { border-top: 1px solid var(--text); }
  .tabelle tbody th { padding: 0 0 .5rem; white-space: normal; }
  .tabelle td { padding: .3rem 0; }
  .tabelle td:empty { display: none; }
  .tabelle td::before { content: attr(data-titel); display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-dunkel); }
}

/* =====================================================================================================================
   Signatur "Werkbuch": Die Zeichnung des Gewerks zeichnet sich, das Werk läuft an, der Schein wird beschrieben,
   das Foto legt sich als Abzug ins Buch, der Stempel landet. Rund 5 Sekunden, einmal, nur CSS.
   Mit prefers-reduced-motion: reduce steht sofort das fertige Bild. Die Szene startet, wenn die Bühne sichtbar ist
   (der Kern-Beobachter setzt .sichtbar), ohne JavaScript läuft sie direkt.
   ===================================================================================================================== */
.auftakt { overflow-x: clip; }
.auftakt-bild--szene { align-self: start; }
.sz-figur figcaption { margin-top: 1rem; }
.sz-buehne { position: relative; container-type: inline-size; aspect-ratio: 1 / 1.04; width: 100%; }
/* Werkbuch-Blatt: Punktraster, Bundsteg links, darunter weitere Blätter */
.sz-blatt { position: absolute; top: 0; left: 5%; right: 0; height: 68%; padding: 3.4cqw 3.6cqw 0 6cqw;
  background:
    linear-gradient(90deg, rgb(40 30 15 / 9%), transparent 5%),
    radial-gradient(circle, color-mix(in srgb, var(--akzent) 30%, transparent) .6px, transparent 1px) 0 0 / 3.2cqw 3.2cqw,
    var(--karte);
  border: 1px solid var(--linie);
  box-shadow: 3px 3px 0 -1px var(--karte), 3px 3px 0 0 var(--linie), 6px 6px 0 -1px var(--karte), 6px 6px 0 0 var(--linie), var(--schatten); }
.sz-kopf { display: flex; gap: 1.6cqw; justify-content: space-between; align-items: baseline; padding-bottom: 1.2cqw;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  font: 500 clamp(.56rem, 1.75cqw, .74rem)/1.3 var(--schrift-text); letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.sz-kopf span:first-child { color: var(--akzent-dunkel); }
.sz-kopf span:nth-child(2) { margin-right: auto; font: italic 400 clamp(.8rem, 2.5cqw, 1.05rem)/1 var(--schrift-titel); letter-spacing: 0; text-transform: none; color: var(--text); }
.sz-svg { display: block; width: 100%; height: auto; margin-top: 1.4cqw; overflow: visible; }
.sz-l { fill: none; stroke: var(--text); stroke-width: 1.15; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sz-kranz { fill: var(--karte); stroke-width: 1.3; }
.sz-fein { stroke-width: .8; stroke: color-mix(in srgb, var(--text) 78%, transparent); }
.sz-hilfs { stroke: color-mix(in srgb, var(--akzent) 55%, transparent); }
.sz-trieb { fill: color-mix(in srgb, var(--akzent) 14%, var(--karte)); }
.sz-stein { fill: var(--akzent); }
.sz-schraube { fill: color-mix(in srgb, var(--akzent) 35%, var(--karte)); stroke: var(--text); stroke-width: .7; }
.sz-platte-schraube circle { fill: var(--karte); stroke: color-mix(in srgb, var(--text) 60%, transparent); stroke-width: .8; }
.sz-platte-schraube path { stroke: color-mix(in srgb, var(--text) 60%, transparent); stroke-width: 1; }
.sz-spirale { stroke: var(--akzent-dunkel); stroke-width: .7; }
.sz-arm { stroke-width: 2.2; stroke: var(--text); }
.sz-dreh, .sz-unruh, .sz-anker, .sz-spirale { transform-box: view-box; transform-origin: 0 0; }
.sz-schild path { fill: none; stroke: var(--akzent-dunkel); stroke-width: .7; }
.sz-schild circle { fill: var(--akzent-dunkel); }
.sz-schild text, .sz-mass text { fill: var(--akzent-dunkel); font: 500 10.5px var(--schrift-text); letter-spacing: .12em; text-transform: uppercase; }
.sz-mass path { fill: none; stroke: var(--akzent-dunkel); stroke-width: .7; }
.sz-mass text { font-size: 10px; letter-spacing: .06em; text-transform: none; font-variant-numeric: tabular-nums; }
/* Holz */
.sz-jr { stroke: color-mix(in srgb, var(--text) 60%, transparent); }
.sz-l.sz-rinde { fill: none; }
.sz-borke { stroke-width: 2.2; stroke: color-mix(in srgb, var(--text) 85%, transparent); }
.sz-mark { fill: var(--akzent-dunkel); }
.sz-schnitt { stroke: var(--akzent-dunkel); stroke-width: 1.3; }
.sz-brett { fill: color-mix(in srgb, var(--akzent) 16%, var(--karte)); stroke: var(--text); stroke-width: 1; }
.sz-latte { fill: var(--text); }

/* Abzug: weißer Rand, Fotoecken */
.sz-abzug { position: absolute; left: 0; bottom: 6%; width: 44%; padding: 2.4cqw 2.4cqw 6cqw; background: #FFFEFA;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 18px 34px -14px rgb(30 22 10 / 38%); transform: rotate(-3.2deg); }
.sz-abzug .bild { aspect-ratio: 4 / 3.3; border-radius: 0; }
.sz-abzug .bild img { width: 100%; height: 100%; object-fit: cover; }
.sz-abzug .bild--platz span { font-size: 2.4cqw; }
.sz-abzug:has(.sz-notiz) { padding-bottom: 0; }
.sz-notiz { margin: 0; padding: 1.4cqw .3em 1.8cqw; font: 600 clamp(.85rem, 3.2cqw, 1.2rem)/1.15 var(--schrift-hand); color: #2B3A55; text-align: center; }
.sz-ecke { position: absolute; width: 5.4cqw; height: 5.4cqw; background: #2A2622; }
.sz-ecke1 { top: 1.3cqw; left: 1.3cqw; clip-path: polygon(0 0, 100% 0, 0 100%); }
.sz-ecke2 { top: 1.3cqw; right: 1.3cqw; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sz-ecke3 { bottom: 4.7cqw; left: 1.3cqw; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.sz-ecke4 { bottom: 4.7cqw; right: 1.3cqw; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.sz-abzug:has(.sz-notiz) .sz-ecke3, .sz-abzug:has(.sz-notiz) .sz-ecke4 { display: none; }

/* Schein: Zettel vom Ladentisch, Einträge von Hand */
.sz-schein { position: absolute; right: 3%; bottom: 7%; width: 51%; padding: 3cqw 3.2cqw 2.6cqw; background: var(--karte); border: 1px solid var(--linie);
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 16px 30px -16px rgb(30 22 10 / 34%); transform: rotate(2.2deg); }
.sz-schein::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1.1cqw; height: 2.2cqw;
  background: radial-gradient(circle at 1.2cqw 1.1cqw, var(--grund) .75cqw, transparent .85cqw) 0 0 / 2.4cqw 2.2cqw repeat-x; }
.sz-schein-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; margin: 0 0 .6cqw; padding-bottom: 1.4cqw;
  border-bottom: 1px dashed color-mix(in srgb, var(--text) 35%, transparent);
  font: 600 clamp(.52rem, 1.7cqw, .7rem)/1.3 var(--schrift-text); letter-spacing: .16em; text-transform: uppercase; }
.sz-schein-kopf .zahl { font: 400 clamp(.85rem, 2.7cqw, 1.15rem)/1 var(--schrift-titel); letter-spacing: 0; color: var(--akzent-dunkel); text-transform: none; }
.sz-schein dl { margin: 0; }
.sz-schein dl div { display: grid; grid-template-columns: 26% minmax(0, 1fr); gap: 1.4cqw; align-items: baseline; padding: 1cqw 0 .4cqw;
  border-bottom: 1px solid color-mix(in srgb, var(--linie) 85%, transparent); }
.sz-schein dt { font-size: clamp(.5rem, 1.55cqw, .66rem); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.sz-schein dd { margin: 0; font: 600 clamp(.9rem, 3.2cqw, 1.3rem)/1.15 var(--schrift-hand); color: #2B3A55; }
.sz-hand { display: inline-block; }
.sz-stempel { position: absolute; right: -5cqw; bottom: -9cqw; width: 19cqw; color: var(--akzent-dunkel); transform: rotate(-14deg); mix-blend-mode: multiply; opacity: .9; }
.sz-stempel svg { display: block; width: 100%; height: auto; }
.sz-stempel circle { fill: none; stroke: currentColor; stroke-width: 1.2; }
.sz-stempel .sz-st-dick { stroke-width: 3.2; }
.sz-st-ring { fill: currentColor; font: 600 8.6px var(--schrift-text); letter-spacing: .08em; }
.sz-st-wort { fill: currentColor; font: italic 400 25px var(--schrift-titel); }

@media (max-width: 900px) { .sz-buehne { max-width: 560px; margin-inline: auto; } }
/* Schmale Bühne (Handy): Schein breiter, Bezeichnung über dem Eintrag, Beschriftungen der Zeichnung größer */
@container (max-width: 460px) {
  .sz-schein { width: 56%; right: 1%; padding: 3.4cqw 3.4cqw 3cqw; }
  .sz-schein dl div { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1.2cqw 0 .6cqw; }
  .sz-schein dd { font-size: clamp(.8rem, 3.6cqw, 1rem); }
  .sz-abzug { width: 42%; }
  .sz-schild text { font-size: 14px; letter-spacing: .08em; }
  .sz-mass text { font-size: 13px; }
}

/* ---------- Ablauf der Szene (Sekunden ab Sichtbarkeit) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .sz-buehne:not(.sichtbar) *, .js .sz-buehne:not(.sichtbar) *::before { animation-play-state: paused !important; }
  .sz-blatt { animation: sz-auf .6s ease .05s both; }
  .sz-l { stroke-dashoffset: 1; animation: sz-zeichnen 1s cubic-bezier(.45, 0, .25, 1) .3s forwards; }
  .sz-kranz { fill-opacity: 0; }
  .sz-d0 { animation-delay: .2s; animation-duration: 1.2s; }
  .sz-d1 { animation-delay: .35s; } .sz-d2 { animation-delay: .6s; } .sz-d3 { animation-delay: .85s; }
  .sz-d4 { animation-delay: 1.1s; } .sz-d5 { animation-delay: 1.3s; animation-duration: .7s; } .sz-d6 { animation-delay: 1.35s; animation-duration: 1.1s; }
  .sz-stein, .sz-schraube, .sz-platte-schraube, .sz-mark { opacity: 0; animation: sz-auf .4s ease 1.9s forwards; }
  .sz-schild, .sz-mass { opacity: 0; animation: sz-auf .5s ease forwards; }
  .sz-schild1 { animation-delay: 1.8s; } .sz-schild2 { animation-delay: 2s; } .sz-schild3 { animation-delay: 2.2s; } .sz-mass { animation-delay: 2.3s; }
  /* Das Werk läuft an: zehn Schläge in drei Sekunden, Übersetzung wie in der Zeichnung (module.py, _motiv_uhr) */
  .sz--uhr .sz-dreh { animation: sz-lauf 3s steps(10, end) 2.1s forwards; }
  .sz-r1 { --dreh: 3.75deg; } .sz-r2 { --dreh: -15deg; } .sz-r3 { --dreh: 60deg; } .sz-r4 { --dreh: -240deg; }
  .sz--uhr .sz-unruh { animation: sz-schwingen 3s ease-in-out 2.1s both; }
  .sz--uhr .sz-anker { animation: sz-anker .6s 2.1s 5; }
  .sz--uhr .sz-spirale { animation-name: sz-zeichnen, sz-atmen; animation-duration: 1.1s, .3s; animation-delay: 1.35s, 2.1s;
    animation-iteration-count: 1, 10; animation-direction: normal, alternate; animation-timing-function: ease, ease-in-out; animation-fill-mode: forwards, none; }
  /* Holz: Ringe wachsen von innen, die Säge schneidet, Bretter landen auf dem Stapel */
  .sz-jr { animation-duration: .7s; }
  .sz-jr1 { animation-delay: .3s; } .sz-jr2 { animation-delay: .42s; } .sz-jr3 { animation-delay: .54s; } .sz-jr4 { animation-delay: .66s; } .sz-jr5 { animation-delay: .78s; }
  .sz-jr6 { animation-delay: .9s; } .sz-jr7 { animation-delay: 1.02s; } .sz-jr8 { animation-delay: 1.14s; } .sz-jr9 { animation-delay: 1.26s; }
  .sz-rinde { animation-delay: 1.3s; animation-duration: 1s; } .sz-borke { animation-delay: 1.45s; }
  .sz-schnitt { animation-duration: .45s; animation-timing-function: linear; }
  .sz-sch1 { animation-delay: 2.1s; } .sz-sch2 { animation-delay: 2.25s; } .sz-sch3 { animation-delay: 2.4s; } .sz-sch4 { animation-delay: 2.55s; }
  .sz-sch5 { animation-delay: 2.7s; } .sz-sch6 { animation-delay: 2.85s; } .sz-sch7 { animation-delay: 3.05s; } .sz-sch8 { animation-delay: 3.15s; }
  .sz-brett, .sz-latte { opacity: 0; animation: sz-landen .35s cubic-bezier(.3, .7, .3, 1) forwards; }
  .sz-b1 { animation-delay: 2.5s; } .sz-b2 { animation-delay: 2.58s; } .sz-b3 { animation-delay: 2.66s; } .sz-b4 { animation-delay: 2.82s; }
  .sz-b5 { animation-delay: 2.9s; } .sz-b6 { animation-delay: 2.98s; } .sz-b7 { animation-delay: 3.14s; } .sz-b8 { animation-delay: 3.22s; }
  .sz-b9 { animation-delay: 3.3s; } .sz-b10 { animation-delay: 3.46s; } .sz-b11 { animation-delay: 3.54s; } .sz-b12 { animation-delay: 3.62s; }
  .sz--holz .sz-mark { animation-delay: .25s; }
  .sz--holz .sz-schild1 { animation-delay: 1.6s; } .sz--holz .sz-schild2 { animation-delay: 3.2s; } .sz--holz .sz-schild3 { animation-delay: 3.8s; }
  /* Schein, Einträge von Hand, Abzug, Stempel */
  .sz-schein { animation: sz-schein .7s cubic-bezier(.2, .8, .2, 1) 1.1s both; }
  .sz-hand { clip-path: inset(0 100% 0 0); animation: sz-schreiben .6s linear forwards; }
  .sz-h1 { animation-delay: 1.8s; } .sz-h2 { animation-delay: 2.45s; } .sz-h3 { animation-delay: 3.1s; } .sz-h4 { animation-delay: 3.6s; }
  .sz-abzug { animation: sz-abzug .9s cubic-bezier(.2, .8, .2, 1) 3.2s both; }
  .sz-ecke { opacity: 0; animation: sz-auf .25s ease 4s forwards; }
  .sz-stempel { opacity: 0; animation: sz-stempel .45s cubic-bezier(.3, 1.5, .5, 1) 4.4s forwards; }
}
@keyframes sz-auf { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sz-zeichnen { 70% { fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes sz-lauf { to { transform: rotate(var(--dreh)); } }
@keyframes sz-schwingen {
  0% { transform: rotate(0); } 6% { transform: rotate(110deg); } 16% { transform: rotate(-170deg); } 26% { transform: rotate(200deg); }
  36% { transform: rotate(-210deg); } 46% { transform: rotate(210deg); } 56% { transform: rotate(-205deg); } 66% { transform: rotate(190deg); }
  76% { transform: rotate(-150deg); } 86% { transform: rotate(90deg); } 94% { transform: rotate(-30deg); } 100% { transform: rotate(0); } }
@keyframes sz-anker { 0%, 49% { transform: rotate(-6deg); } 50%, 100% { transform: rotate(6deg); } }
@keyframes sz-atmen { from { transform: scale(1); } to { transform: scale(1.06) rotate(8deg); } }
@keyframes sz-landen { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes sz-schein { from { opacity: 0; transform: translateY(10%) rotate(6deg); } to { opacity: 1; transform: rotate(2.2deg); } }
@keyframes sz-schreiben { to { clip-path: inset(0 0 0 0); } }
@keyframes sz-abzug { from { opacity: .01; transform: translate(-6%, -14%) rotate(-11deg) scale(1.08); } to { opacity: 1; transform: rotate(-3.2deg); } }
@keyframes sz-stempel { from { opacity: 0; transform: scale(1.7) rotate(-4deg); } 70% { opacity: .95; } to { opacity: .9; transform: scale(1) rotate(-14deg); } }

/* ---------- Unterseiten: Motivzeichnung am Rand des Schriftkopfs ---------- */
.held--zier .wrap { position: relative; }
.blatt-zier { position: absolute; right: 1.25rem; top: 50%; width: min(36vw, 470px); transform: translateY(-58%); pointer-events: none; opacity: .5; }
.blatt-zier .sz-kranz:not(.sz-rinde) { fill: var(--grund); }
.blatt-zier .sz-jr, .blatt-zier .sz-borke { stroke: var(--text); }
@media (max-width: 1080px) { .blatt-zier { display: none; } }

/* ---------- Ruhige Bewegung im Rest der Seite: Aufziehen beim Scrollen, Hover an Bildern ---------- */
.werkschritt-nr { font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.2rem); margin-bottom: 1rem; gap: 1.2rem; }
.werkschritt-nr::after { flex-basis: 4.5rem; }
.werkschritt .figur .bild, .werkstueck .figur .bild, .rundgang-bild .bild, .meister .figur .bild { overflow: hidden; }
.leitsatz::before { content: ""; display: block; width: 2.4rem; height: 2.4rem; margin: 0 auto 1.6rem; border: 1px solid var(--akzent); border-radius: 50%;
  background: radial-gradient(circle, var(--akzent) 0 3px, transparent 3.5px); }
@media (prefers-reduced-motion: no-preference) {
  .js .werkschritt .figur img, .js .werkstueck .figur img, .js .meister .figur img { transform: scale(1.07); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
  .js .sichtbar .figur img { transform: none; }
  .werkschritt-nr::after { transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.45, 0, .2, 1) .3s; }
  .js .werkschritt.sichtbar .werkschritt-nr::after, html:not(.js) .werkschritt-nr::after { transform: scaleX(1); }
  .leitsatz footer::before { transform: scaleX(0); transition: transform .9s cubic-bezier(.45, 0, .2, 1) .4s; }
  .js .leitsatz.sichtbar footer::before, html:not(.js) .leitsatz footer::before { transform: scaleX(1); }
  .rundgang-bild img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
  .rundgang-bild:hover img { transform: scale(1.035); }
  .werkstueck:not(.werkstueck--gross):nth-child(even), .pflegekarte:nth-child(2), .preisgruppe:nth-child(even), .material:nth-child(even), .stelle:nth-child(even) { transition-delay: .12s; }
  .pflegekarte:nth-child(3) { transition-delay: .24s; }
  /* Reparaturschein: Die Einträge schreiben sich, wenn er ins Bild kommt */
  .js .schein dd span { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path .7s linear; }
  .js .schein.sichtbar dd span { clip-path: inset(0 0 0 0); }
  .js .schein.sichtbar div:nth-child(2) dd span { transition-delay: .5s; } .js .schein.sichtbar div:nth-child(3) dd span { transition-delay: 1s; }
  .js .schein.sichtbar div:nth-child(4) dd span { transition-delay: 1.5s; } .js .schein.sichtbar div:nth-child(5) dd span { transition-delay: 2s; }
  .js .schein.sichtbar div:nth-child(n+6) dd span { transition-delay: 2.5s; }
}

/* ---------- Stellen und Bewerbungsablauf ---------- */
.stellen-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 2.5rem clamp(2rem, 1rem + 3vw, 4rem); }
.stelle { padding-top: 1.25rem; border-top: 1px solid var(--text); }
.stelle-kopf { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.stelle h3 { font-size: clamp(1.55rem, 1.3rem + .8vw, 2rem); margin-bottom: .6rem; }
.stelle .liste-punkt { margin-top: 1rem; }
.etikett { border-radius: 2px; }
.bewerbung-person { display: flex; gap: 1rem; align-items: center; margin-top: 2.5rem; padding: 1.1rem 1.25rem; max-width: 30rem; border: var(--haar); background: var(--karte); }
.bewerbung-person .bild { flex: none; width: 4.5rem; border-radius: 50%; }
.bewerbung-wer { font-size: .9rem; color: var(--leise); }
.bewerbung-name { font: 400 1.5rem/1.15 var(--schrift-titel); }
.bewerbung-rolle { font-size: .9rem; color: var(--akzent-dunkel); }
.stellen-unten { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
@media (max-width: 860px) { .stellen-unten { grid-template-columns: minmax(0, 1fr); } }


/* Farben des Betriebs */
:root {
  --grund: #F6F3EE;
  --marke: #23262B;
  --akzent: #A8833F;
  --akzent-dunkel: #7A5C26;
}