@charset "utf-8";
/* ==========================================================================
   Oliva und Soehne - Designwelt "Die Giebellinie"
   Designed and built by NerdyMedia - https://Nerdymedia.co

   Die Giebelform erscheint pro Seite hoechstens dreimal: einmal gross als
   Beschnitt der Heroplatte, einmal als Marke in Kopf und Fuss, und als
   Ordnungszeichen vor Sektionsueberschriften. Nie als Flaeche hinter
   Fliesstext, nie als Saegezahn zwischen jeder Sektion. Siehe DESIGN.md.

   Zwei Regeln, die hier schon einmal Zeit gekostet haben:
   - clamp() immer mit Leerzeichen um die Operatoren. Ohne rechnet der
     Browser nicht und meldet nichts.
   - Kein backdrop-filter am Kopf. Er wuerde Bezugsrahmen fuer das
     position:fixed-Mobilmenue und das Menue bliebe in der Kopfhoehe haengen.

   Inhalt
     1. Schriften
     2. Token
     3. Reset
     4. Vorschau-Streifen NerdyMedia
     5. Hilfsklassen
     6. Raster
     7. Typografie
     8. Schaltflaechen
     9. Kopf und Navigation
    10. Mobilmenue
    11. Hero
    12. Sektionen und Ordnungszeichen
    13. Die zwei Gesichter
    14. Auftraggeber
    15. Leistungen
    16. Zielgruppen
    17. Ablauf
    18. Referenzen und Bildstrecke
    19. Veranstaltungen
    20. Kontakt und Formular
    21. Fuss
    22. Bewegung
    23. Druck
   ========================================================================== */

/* ---- 1. Schriften ------------------------------------------------------ */
/* FONTS:START */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/familjen-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/asap-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* FONTS:END */

/* ---- 2. Token ---------------------------------------------------------- */
:root {
  /* Flaechen */
  --zelt:        #F6F4EF;   /* warmes Zeltstoff-Weiss, Grundflaeche       */
  --zelt-2:      #EDEAE2;   /* abgesetzte Baender                         */
  --weiss:       #FFFFFF;

  /* Schrift */
  --tinte:       #1D2328;   /* 14.4:1 auf --zelt   Fliesstext             */
  --grau:        #5B646B;   /*  5.5:1 auf --zelt   Beitexte               */

  /* Marke */
  --petrol:      #00667B;   /*  6.0:1 auf --zelt   bestehende Markenfarbe */
  --petrol-tief: #073B47;   /* 11.1:1 auf --zelt   dunkle Flaechen        */
  --petrol-hell: #E4EEF0;

  /* Akzent: der Ocker der Bierzeltgarnituren */
  --holz:        #B5732A;   /*  3.5:1 auf --zelt - NUR >=24px oder UI     */
  --holz-text:   #96591A;   /*  5.1:1 auf --zelt   Ocker als Textfarbe    */
  --holz-flaeche:#8A5418;   /*  6.3:1 gegen Weiss  Flaeche mit Schrift    */
  --holz-hell:   #E0B074;   /*  6.2:1 auf --petrol-tief                   */

  /* Linien */
  --linie:       #C9C3B6;   /*  1.4:1 - dekorativ                         */
  --linie-ui:    #857F73;   /*  Umriss von Bedienelementen. WCAG 1.4.11
                                verlangt 3:1 - und zwar auf JEDER Flaeche,
                                auf der das Element steht:
                                3.6:1 auf --zelt, 3.3:1 auf --zelt-2,
                                4.0:1 auf Weiss. Der fruehere Wert
                                (#8F897C) schaffte auf --zelt-2 nur 2.9.  */
  --focus:       #00667B;

  /* Schriftfamilien */
  --display: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --sans:    'Asap', 'Segoe UI', system-ui, sans-serif;

  /* Schriftgrade. Leerzeichen um jeden Operator - siehe Kopf. */
  --t-display: clamp(2.05rem, 1.35rem + 3.1vw, 4.1rem);
  --t-h2:      clamp(1.6rem, 1.2rem + 1.7vw, 2.6rem);
  --t-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --t-gross:   clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
  --t-body:    1.0625rem;
  --t-klein:   0.9375rem;
  --t-mini:    0.8125rem;

  /* Abstaende */
  --s1: .375rem;  --s2: .75rem;   --s3: 1.125rem;  --s4: 1.75rem;
  --s5: 2.5rem;   --s6: 3.5rem;
  --s7: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
  --s8: clamp(4.5rem, 2.6rem + 7vw, 9rem);

  --wrap: 76rem;
  --schmal: 46rem;
  --measure: 38rem;
  --gutter: clamp(1.15rem, .6rem + 2.2vw, 2.5rem);
  --giebel-h: clamp(3.2rem, 1.9rem + 4.4vw, 6.4rem);
  --radius: 3px;
  --radius-gross: 6px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --schatten: 0 1px 2px rgba(29, 35, 40, .05), 0 8px 24px -12px rgba(29, 35, 40, .16);
  --schatten-hoch: 0 2px 4px rgba(29, 35, 40, .06), 0 18px 44px -18px rgba(29, 35, 40, .26);
}

/* ---- 3. Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6.5rem;
}

body {
  margin: 0;
  background: var(--zelt);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  hyphens: auto;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.02em;
  /* Nie enger: sonst schneidet die Zeile die Punkte von Ae, Oe und Ue ab. */
  line-height: 1.12;
  margin: 0;
  hyphens: manual;
}

p, ul, ol { margin: 0; }
a { color: var(--petrol); text-underline-offset: .18em; }
a:hover { color: var(--petrol-tief); }

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

/* Zahlen in Tabellen und Datumsangaben laufen gleich breit. Bewusst NICHT
   global: font-variant-numeric: tabular-nums oeffnet im Fliesstext eine
   Luecke vor jedem Komma. */
.zahl, time, .ablauf__nr, .leistung__nr { font-variant-numeric: tabular-nums; }

/* ---- 4. (frei) ---------------------------------------------------------- */
/* Hier stand der lila Vorschau-Streifen. Am 23.09.2026 auf Wunsch
   entfernt; der Vorschauhinweis steht jetzt nur noch im Fuss. */

/* ---- 5. Hilfsklassen --------------------------------------------------- */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-start: -100%;
  z-index: 60;
  background: var(--petrol-tief);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: var(--radius);
  text-decoration: none;
}
.skip:focus { inset-block-start: .5rem; color: #fff; }

/* ---- 6. Raster --------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}
.wrap--schmal {
  width: min(100% - (var(--gutter) * 2), var(--schmal));
  margin-inline: auto;
}

.raster {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst weigert sich eine Spalte mit langem
     Wort darin zu schrumpfen und das Raster laeuft aus dem Bild. */
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--s4);
}
.raster > * { min-width: 0; }

/* Eigenstaendig, nicht nur Modifikator: ohne display:grid stapeln sich
   die beiden Spalten lautlos untereinander. */
.raster--2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
.raster--2 > * { min-width: 0; }
@media (min-width: 52rem) {
  .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 7. Typografie ----------------------------------------------------- */
.display {
  font-size: var(--t-display);
  line-height: 1.06;
  letter-spacing: -.028em;
}

h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); letter-spacing: -.015em; }

/* Nur auf kurzen Ueberschriften: darueber setzt der Browser von selbst
   bessere Umbrueche. */
.balance { text-wrap: balance; }

.lead {
  font-size: var(--t-gross);
  line-height: 1.6;
  color: var(--grau);
  max-width: var(--measure);
}

.fliess > * + * { margin-block-start: var(--s3); }
.fliess p { max-width: var(--measure); }

.klein { font-size: var(--t-klein); }
.mini  { font-size: var(--t-mini); letter-spacing: .04em; }
.gedaempft { color: var(--grau); }

.liste-haken {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s2);
}
.liste-haken li {
  position: relative;
  padding-inline-start: 1.65rem;
  font-size: var(--t-klein);
}
.liste-haken li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .58em;
  width: .5rem; height: .5rem;
  background: var(--holz);
  border-radius: 1px;
}

/* ---- 8. Schaltflaechen ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .7rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  background: var(--petrol);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover {
  background: var(--petrol-tief);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--schatten);
}
.btn:active { transform: none; box-shadow: none; }

/* Der Umrissknopf holt sich Linie und Schrift aus zwei Variablen. Jede
   dunkle Flaeche setzt sie einmal um (siehe unten) - dadurch stimmt der
   Knopf auch in Bauteilen, die spaeter dazukommen. Die frueher hier
   stehende Aufzaehlung einzelner Flaechen hat beim Einwilligungsbanner
   versagt: der Ablehnen-Knopf stand dunkel auf dunkel, und ausgerechnet
   der darf nicht schwer zu finden sein. */
.btn--umriss {
  background: transparent;
  border-color: var(--umriss-linie, var(--linie-ui));
  color: var(--umriss-text, var(--tinte));
}
.btn--umriss:hover {
  background: var(--umriss-hover-flaeche, var(--petrol-tief));
  border-color: var(--umriss-hover-flaeche, var(--petrol-tief));
  color: var(--umriss-hover-text, #fff);
}

/* Alles, was einen dunklen Grund hat. Custom Properties vererben, also
   gilt das auch fuer verschachtelte Knoepfe. */
.hero,
.seitenkopf,
.sektion--dunkel,
.consent,
.menu {
  --umriss-linie: rgba(246, 244, 239, .55);
  --umriss-text: var(--zelt);
  --umriss-hover-flaeche: var(--zelt);
  --umriss-hover-text: var(--petrol-tief);
}

.btn--hell {
  background: var(--zelt);
  color: var(--petrol-tief);
}
.btn--hell:hover { background: #fff; color: var(--petrol-tief); }

.btn--holz { background: var(--holz-flaeche); }
.btn--holz:hover { background: #6F4210; }

.btn--klein { min-height: 2.6rem; padding: .5rem 1rem; font-size: var(--t-mini); }
.btn--voll { width: 100%; }

.ico { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }

/* Aktionsreihe. Steht bewusst hier bei den Schaltflaechen und nicht im
   Hero-Abschnitt: dort ist sie beim letzten Umbau des Heros mit
   verschwunden, und der Telefonknopf stand danach dunkel auf dunkel. */
.aktionen {
  margin-block-start: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.aktionen--mitte { justify-content: center; }

/* Auf dem Telefon stehen die Knoepfe ohnehin untereinander. Dann sollen
   sie auch gleich breit sein - zwei verschieden lange Balken wirken wie
   ein Versehen. */
@media (max-width: 26rem) {
  .aktionen { flex-direction: column; align-items: stretch; }
  .aktionen .btn { width: 100%; }
}

/* Textlink mit Pfeil */
.weiter {
  display: inline-flex;
  align-items: center;
  /* In einer Flex-Spalte wuerde der Link sonst auf volle Breite gedehnt
     und die Unterstreichung liefe quer durch die Karte. */
  align-self: start;
  gap: .4rem;
  font-weight: 600;
  font-size: var(--t-klein);
  text-decoration: none;
  border-block-end: 1.5px solid currentColor;
  padding-block-end: .12rem;
}
.weiter::after {
  content: "\2192";
  transition: transform .2s var(--ease);
}
.weiter:hover::after { transform: translateX(.22rem); }

/* ---- 9. Kopf und Navigation -------------------------------------------- */
/* Kein backdrop-filter: er wuerde Bezugsrahmen fuer das fixierte Menue. */
.kopf {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--zelt);
  border-block-end: 1px solid var(--linie);
}
.kopf__in {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 4.25rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--tinte);
  margin-inline-end: auto;
  padding-block: .4rem;
}
.marke__signet { width: 2.3rem; height: auto; }
.marke__text { display: flex; flex-direction: column; line-height: 1.12; }
/* Die Firmierung lautet "Dienstleistungen rund um Veranstaltungen Oliva
   und Soehne" - die Leistung fuehrt, der Name folgt. Genau so steht es
   auf dem Banner und im Google-Unternehmensprofil. Im Kopf traegt die
   Leistung die obere, kleinere Zeile: ausgeschrieben waere sie in
   Ueberschriftgrad breiter als die halbe Kopfleiste. */
.marke__leistung {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--grau);
  /* Nicht trennen: "Veranstal-tungen" im Kopf sieht nach Fehler aus. */
  hyphens: none;
}
.marke__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.02em;
}
/* Auf dem Telefon bleibt nur der Name - die Leistungszeile braeuchte dort
   zwei Zeilen und schoebe den Burger aus dem Bild. */
@media (max-width: 30rem) { .marke__leistung { display: none; } }

.nav { display: none; }
.nav__liste {
  display: flex;
  gap: var(--s3);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__link {
  display: block;
  padding: .55rem .1rem;
  font-family: var(--display);
  font-size: .96rem;
  font-weight: 500;
  color: var(--tinte);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover { color: var(--petrol); border-block-end-color: var(--linie-ui); }
.nav__link.is-aktiv { color: var(--petrol); border-block-end-color: var(--holz); }

.kopf__tel { display: none; }

.burger {
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  background: none;
  border: 1.5px solid var(--linie-ui);
  border-radius: var(--radius);
  cursor: pointer;
  flex: none;
}
.burger__balken,
.burger__balken::before,
.burger__balken::after {
  display: block;
  width: 1.15rem; height: 2px;
  background: var(--tinte);
  border-radius: 2px;
}
.burger__balken { position: relative; }
.burger__balken::before, .burger__balken::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}
.burger__balken::before { inset-block-start: -.38rem; }
.burger__balken::after  { inset-block-start: .38rem; }

/* Der Umschaltpunkt muss exakt dem in site.js entsprechen (1120px = 70rem),
   sonst bleibt das Menue beim Vergroessern offen und die Navigation
   unsichtbar. */
@media (min-width: 70rem) {
  .nav { display: block; }
  .kopf__tel { display: inline-flex; }
  .burger { display: none; }
}

/* ---- 10. Mobilmenue ---------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--petrol-tief);
  color: var(--zelt);
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  padding-block-end: max(var(--gutter), env(safe-area-inset-bottom));
  overflow-y: auto;
}
.menu[hidden] { display: none; }

.menu__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-block-end: var(--s3);
  border-block-end: 1px solid rgba(246, 244, 239, .2);
}
.menu__marke {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
}
.menu__zu {
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  background: none;
  border: 1.5px solid rgba(246, 244, 239, .35);
  border-radius: var(--radius);
  color: var(--zelt);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.menu__zu:focus-visible { outline-color: var(--holz-hell); }

.menu__liste {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  margin-block: var(--s4);
}
.menu__link {
  display: block;
  padding: .85rem 0;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--zelt);
  text-decoration: none;
  border-block-end: 1px solid rgba(246, 244, 239, .14);
}
.menu__link[aria-current="page"] { color: var(--holz-hell); }
.menu__link:hover { color: var(--holz-hell); }
.menu__link:focus-visible { outline-color: var(--holz-hell); }

.menu__fuss { margin-block-start: auto; display: grid; gap: var(--s2); }

/* ---- 11. Hero ---------------------------------------------------------- */
/* Zweigeteilt statt Text-auf-Foto. Gemessen: ueber diesem Bild erreicht
   Zeltweiss selbst unter einem Schleier von 52 % nur 3.6:1 - die weisse
   Zeltplane ist zu hell. Ein Schleier, der 4.5:1 schafft, macht das Foto
   unkenntlich. Also steht der Text auf glatter Flaeche und das Foto
   daneben, unverfaelscht: 11.1:1 statt 2.6:1, und das Bild bleibt ein Bild. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--petrol-tief);
  color: var(--zelt);
}
@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: stretch;
  }
}

.hero__text { display: flex; align-items: center; }
.hero__in {
  width: 100%;
  padding-block: clamp(2.6rem, 1.4rem + 4vw, 5.2rem);
  padding-inline: var(--gutter);
}
/* Der Text beginnt am selben linken Rand wie der Rest der Seite. */
@media (min-width: 62rem) {
  .hero__in {
    padding-inline-start: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
    padding-inline-end: clamp(2rem, 1rem + 3vw, 4rem);
    padding-block: clamp(3.4rem, 1.6rem + 5vw, 6.4rem);
  }
}

.hero__bild { position: relative; min-height: clamp(15rem, 9rem + 26vw, 22rem); }
@media (min-width: 62rem) { .hero__bild { min-height: 0; } }
.hero__bild img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 54% 52%;
}

.hero__titel { color: var(--zelt); max-width: 15ch; }
.hero__titel em { font-style: normal; color: var(--holz-hell); }
.hero__text p { max-width: 34rem; }
.hero__lead {
  margin-block-start: var(--s3);
  font-size: var(--t-gross);
  line-height: 1.6;
  /* 8.9:1 auf --petrol-tief */
  color: rgba(246, 244, 239, .88);
}
.hero__marken {
  margin-block-start: var(--s5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  font-size: var(--t-mini);
  letter-spacing: .04em;
  /* 6.8:1 auf --petrol-tief */
  color: rgba(246, 244, 239, .78);
}
.hero__marken strong { color: var(--zelt); font-weight: 600; }

/* Der eine grosse Giebel: die helle Flaeche schneidet mit einer
   Zeltspitze in den Hero. Einmal pro Seite, nur hier. */
.hero__giebel {
  position: relative;
  z-index: 1;
  height: var(--giebel-h);
  /* Volle Eigenhoehe nach oben: der Giebel muss IN den Hero schneiden.
     Laege er darunter, waere er zeltfarben auf zeltfarbenem Grund -
     also unsichtbar, und niemand wuerde den Fehler melden. */
  margin-block-start: calc(var(--giebel-h) * -1);
  background: var(--zelt);
}
.hero__giebel svg {
  position: absolute;
  /* Sitzt auf der Oberkante der Flaeche und ragt komplett darueber. */
  inset-block-end: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: calc(var(--giebel-h) * 2.15);
  height: var(--giebel-h);
  fill: var(--zelt);
}
/* Ab der geteilten Fassung sitzt die Spitze unter dem Foto, nicht auf der
   Naht zwischen Textflaeche und Bild - dort sah sie aus wie ein Versehen. */
@media (min-width: 62rem) {
  .hero__giebel svg { inset-inline-start: 74%; }
}

/* ---- 11b. Seitenkopf der Unterseiten ------------------------------------ */
/* Glatt, ohne Textur, ohne Verlauf, ohne Foto. Eine dunkle Flaeche wirkt
   durch ihre Ruhe. Und: der grosse Giebel gehoert allein der Startseite -
   sonst wird aus einer Geste ein Muster. */
.seitenkopf {
  background: var(--petrol-tief);
  color: var(--zelt);
  padding-block: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem) clamp(3rem, 1.8rem + 4vw, 5.2rem);
}
.seitenkopf h1 { color: var(--zelt); max-width: 20ch; }
.seitenkopf .lead {
  color: rgba(246, 244, 239, .86);
  margin-block-start: var(--s3);
  max-width: 42rem;
}
.seitenkopf .aktionen { margin-block-start: var(--s4); }

.brotkrume {
  margin-block-end: var(--s3);
  font-size: var(--t-mini);
  letter-spacing: .06em;
  color: rgba(246, 244, 239, .68);
}
.brotkrume a { color: rgba(246, 244, 239, .85); text-decoration: none; }
.brotkrume a:hover { color: var(--zelt); text-decoration: underline; }
.brotkrume span { padding-inline: .45rem; }

/* ---- 12. Sektionen und Ordnungszeichen --------------------------------- */
.sektion { padding-block: var(--s7); }
.sektion--eng { padding-block: var(--s6); }
.sektion--band { background: var(--zelt-2); }
.sektion--dunkel {
  background: var(--petrol-tief);
  color: var(--zelt);
}
.sektion--dunkel h2, .sektion--dunkel h3 { color: var(--zelt); }
.sektion--dunkel .lead { color: rgba(246, 244, 239, .82); }
.sektion--dunkel a:not(.btn) { color: var(--holz-hell); }

.sektion__kopf { max-width: var(--schmal); margin-block-end: var(--s5); }
.sektion__kopf .lead { margin-block-start: var(--s2); }

/* Ordnungszeichen: eine einzelne Dachkante vor der Ueberschrift. Ersetzt
   die Kickerzeile. Hoechstens dreimal je Seite. */
.winkel {
  display: block;
  width: 1.6rem;
  height: auto;
  margin-block-end: .7rem;
}
.sektion--dunkel .winkel path { stroke: var(--holz-hell); }

/* ---- 13. Die zwei Gesichter -------------------------------------------- */
.gesichter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
}
@media (min-width: 50rem) {
  .gesichter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gesicht {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: clamp(1.6rem, 1rem + 2.2vw, 2.6rem);
  border-radius: var(--radius-gross);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.gesicht:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); color: #fff; }
.gesicht--dienst { background: var(--petrol); }
.gesicht--event  { background: var(--holz-flaeche); }

.gesicht__rolle {
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.gesicht__titel { font-size: var(--t-h3); color: #fff; }
.gesicht__text { font-size: var(--t-klein); color: rgba(255, 255, 255, .92); }
.gesicht__mehr {
  margin-block-start: auto;
  padding-block-start: var(--s2);
  font-weight: 600;
  font-size: var(--t-klein);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.gesicht__mehr::after { content: "\2192"; transition: transform .2s var(--ease); }
.gesicht:hover .gesicht__mehr::after { transform: translateX(.25rem); }

/* ---- 14. Auftraggeber -------------------------------------------------- */
.auftraggeber {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  list-style: none;
  /* Begrenzt: ueber die volle Seitenbreite verteilt schwimmen vier Logos
     in viel zu grossen weissen Feldern. */
  max-width: 62rem;
  margin: 0; padding: 0;
}
@media (min-width: 48rem) {
  .auftraggeber { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
}
.auftraggeber li {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--s3) var(--s2);
  display: grid;
  place-items: center;
  min-height: 7rem;
}
.auftraggeber img {
  width: auto;
  height: clamp(3.1rem, 2.4rem + 2.4vw, 4.6rem);
  object-fit: contain;
}

/* ---- 15. Leistungen ---------------------------------------------------- */
.leistung {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  /* Komposita wie "Veranstaltungsausstattung" sprengen sonst die Karte. */
  overflow-wrap: anywhere;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              transform .2s var(--ease);
}
.leistung:hover {
  border-color: var(--linie-ui);
  box-shadow: var(--schatten);
  transform: translateY(-2px);
}
.leistung__nr {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--holz);
  letter-spacing: -.03em;
}
.leistung__titel { font-size: var(--t-h3); }
.leistung__text { font-size: var(--t-klein); color: var(--grau); }
.leistung .weiter { margin-block-start: auto; padding-block-start: var(--s2); }

/* Detailabschnitt auf /leistungen/ */
.detail { padding-block: var(--s7); border-block-start: 1px solid var(--linie); }
.detail:first-of-type { border-block-start: 0; }
.detail__gitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
@media (min-width: 56rem) {
  .detail__gitter { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s6); }
  .detail--gedreht .detail__bild { order: -1; }
}
.detail__nr {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--holz-text);
  letter-spacing: .06em;
}
.detail__titel { margin-block: .3rem var(--s3); }
.detail__punkte { margin-block-start: var(--s4); }
.detail__bild img { border-radius: var(--radius-gross); width: 100%; }
.detail__hinweis {
  margin-block-start: var(--s3);
  padding: var(--s3);
  background: var(--zelt-2);
  border-inline-start: 3px solid var(--holz);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-klein);
  color: var(--grau);
}

/* ---- 15b. Zelttabelle ---------------------------------------------------- */
.tabelle-huelle {
  /* Auf schmalen Geraeten darf die Tabelle scrollen statt die Seite zu
     sprengen. tabindex im Markup macht sie dabei tastaturbedienbar. */
  overflow-x: auto;
  margin-block-start: var(--s4);
}
.zelte {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-klein);
}
.zelte th, .zelte td {
  text-align: start;
  padding: .6rem .9rem .6rem 0;
  border-block-end: 1px solid var(--linie);
}
.zelte th {
  font-family: var(--display);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
  border-block-end-color: var(--linie-ui);
}
.zelte td:first-child { font-weight: 600; }
.zelte td:last-child, .zelte th:last-child { text-align: end; padding-inline-end: 0; }
.zelte tbody tr:last-child td { border-block-end: 0; }

/* ---- 15c. Zeltgroessen mit Zeichnung -------------------------------------- */
/* Die Strichzeichnung stammt vom Werbebanner der Firma - dieselbe Marke,
   die auch das Signet traegt. Sie steht hier als Gegenstand neben der
   Tabelle, nicht als Flaeche dahinter: ein Markenzeichen hinter
   Fliesstext wird zur Tapete. */
.groessen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  margin-block-start: var(--s5);
}
@media (min-width: 46rem) {
  .groessen { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s5); }
}
.groessen__zeichnung {
  width: 100%;
  max-width: 21rem;
  height: auto;
  opacity: .85;
}

/* ---- 16. Zielgruppen --------------------------------------------------- */
.zielgruppe {
  padding-block-start: var(--s3);
  border-block-start: 2px solid var(--tinte);
}
.zielgruppe__titel { font-size: var(--t-h3); margin-block-end: var(--s2); }
.zielgruppe__text { font-size: var(--t-klein); color: var(--grau); }
.zielgruppe__bsp {
  margin-block-start: var(--s2);
  font-size: var(--t-mini);
  color: var(--holz-text);
  font-weight: 600;
}

/* ---- 16b. Haeufige Fragen ------------------------------------------------ */
/* <details> ohne eigenes Skript. Wichtig: KEINE eigene display-Regel auf
   dem Element, sonst ueberstimmt sie das zugeklappte Verhalten. */
.fragen { border-block-start: 1px solid var(--linie); }
.frage { border-block-end: 1px solid var(--linie); }
.frage summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s3) 2.4rem var(--s3) 0;
  position: relative;
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  min-height: 3rem;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "";
  position: absolute;
  inset-inline-end: .35rem;
  inset-block-start: 1.55rem;
  width: .62rem; height: .62rem;
  border-inline-end: 2px solid var(--holz);
  border-block-end: 2px solid var(--holz);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.frage[open] summary::after { transform: rotate(-135deg); }
.frage summary:hover { color: var(--petrol); }
.frage summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.frage__text {
  padding-block-end: var(--s4);
  max-width: var(--measure);
  color: var(--grau);
  font-size: var(--t-klein);
  line-height: 1.7;
}

/* ---- 17. Ablauf -------------------------------------------------------- */
.ablauf {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  counter-reset: schritt;
}
@media (min-width: 50rem) {
  .ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
}
.ablauf li { position: relative; padding-block-start: var(--s3); }
.ablauf li::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--linie);
}
.ablauf li:first-child::before { background: var(--holz); }
.ablauf__nr {
  font-family: var(--display);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--holz-text);
}
.ablauf__titel { font-size: var(--t-h3); margin-block: .35rem var(--s2); }
.ablauf__text { font-size: var(--t-klein); color: var(--grau); }

/* ---- 18. Referenzen und Bildstrecke ------------------------------------ */
.referenz { padding-block: var(--s7); border-block-start: 1px solid var(--linie); }
.referenz:first-of-type { border-block-start: 0; padding-block-start: 0; }

.referenz__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  margin-block-end: var(--s5);
}
@media (min-width: 56rem) {
  .referenz__kopf {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s6);
    align-items: end;
  }
}
.referenz__zeit {
  font-family: var(--display);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--holz-text);
}
.referenz__titel { margin-block: .4rem var(--s2); }

.meta {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--s2);
  font-size: var(--t-klein);
}
.meta div { display: flex; gap: .6rem; }
.meta dt {
  flex: none;
  width: 8.5rem;
  hyphens: none;
  color: var(--grau);
  font-size: var(--t-mini);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-block-start: .18em;
}
.meta dd { margin: 0; }

.strecke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--s3);
  list-style: none;
  margin: 0; padding: 0;
}
.strecke figure { margin: 0; }
.strecke img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--zelt-2);
}
.strecke figcaption {
  margin-block-start: .55rem;
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--grau);
}
/* Der Aufmacher nimmt zwei Spalten, wenn Platz ist. */
@media (min-width: 46rem) {
  .strecke > li.ist-gross { grid-column: span 2; }
}

/* ---- 18b. Video ---------------------------------------------------------- */
/* Die gelieferten Dateien sind 640 x 336 px. Eine Hoechstbreite verhindert,
   dass sie hochskaliert und dabei matschig werden. */
.videos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
}
@media (min-width: 46rem) {
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.video { margin: 0; }
.video video {
  width: 100%;
  max-width: 40rem;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: #000;
}
.video figcaption {
  margin-block-start: .6rem;
  font-size: var(--t-mini);
  line-height: 1.55;
  color: var(--grau);
}
.sektion--dunkel .video figcaption { color: rgba(246, 244, 239, .72); }
.video figcaption strong { color: var(--tinte); font-weight: 600; }
.sektion--dunkel .video figcaption strong { color: var(--zelt); }
.video__dauer {
  font-variant-numeric: tabular-nums;
  color: var(--holz-text);
  font-weight: 600;
}
.sektion--dunkel .video__dauer { color: var(--holz-hell); }

/* ---- 19. Veranstaltungen ----------------------------------------------- */
.event {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}
@media (min-width: 56rem) {
  .event { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s6); }
}
.event__plakat { margin: 0; }
.event__plakat img {
  width: 100%;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
}
.event__datum {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--display);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--holz-hell);
}
.event__titel { margin-block: .5rem var(--s3); }
.event__besetzung {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
  font-size: var(--t-klein);
}
.event__besetzung div { display: flex; gap: .7rem; }
.event__besetzung dt {
  flex: none;
  width: 9.5rem;
  font-size: var(--t-mini);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, .66);
  padding-block-start: .2em;
  /* Versalwoerter nie trennen: „FASCHINGSPART-Y" sieht immer nach Fehler
     aus, egal wie korrekt die Trennstelle ist. */
  hyphens: none;
  overflow-wrap: normal;
}
@media (max-width: 30rem) {
  .event__besetzung div { flex-direction: column; gap: .1rem; }
  .event__besetzung dt { width: auto; }
}
.event__besetzung dd { margin: 0; color: var(--zelt); }
.event__aktionen { margin-block-start: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }

.event-karte {
  padding: var(--s4);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.event-karte__datum {
  font-family: var(--display);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--holz-text);
}

/* ---- 20. Kontakt und Formular ------------------------------------------ */
.kontakt-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
@media (min-width: 56rem) {
  .kontakt-gitter { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s7); }
}

.wege { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.weg {
  display: flex;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--tinte);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.weg:hover { border-color: var(--petrol); box-shadow: var(--schatten); color: var(--tinte); }
.weg .ico { width: 1.4rem; height: 1.4rem; color: var(--petrol); margin-block-start: .15rem; }
.weg__was {
  display: block;
  font-size: var(--t-mini);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau);
}
.weg__wert { display: block; font-weight: 600; overflow-wrap: anywhere; }

.form { display: grid; gap: var(--s3); }
.feld { display: grid; gap: .4rem; }
.feld label { font-size: var(--t-klein); font-weight: 600; }
.feld .anmerkung { font-size: var(--t-mini); color: var(--grau); font-weight: 400; }
.feld input, .feld textarea, .feld select {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .85rem;
  font: inherit;
  font-size: var(--t-klein);
  color: var(--tinte);
  background: var(--weiss);
  border: 1.5px solid var(--linie-ui);
  border-radius: var(--radius);
}
.feld textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--petrol);
}
.feld--fehler input, .feld--fehler textarea, .feld--fehler select { border-color: #A3231B; }
.fehler {
  font-size: var(--t-mini);
  color: #A3231B;          /* 6.0:1 auf --weiss */
  font-weight: 600;
}
.feld--zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
@media (min-width: 34rem) { .feld--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pflicht { color: #A3231B; }

.zustimmung {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: var(--t-klein);
  line-height: 1.5;
}
.zustimmung input { width: 1.25rem; height: 1.25rem; min-height: 0; flex: none; margin-block-start: .18rem; }

/* Honigtopf: fuer Menschen unsichtbar, fuer Formularroboter verlockend. */
.honig {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.fehlerliste {
  padding: var(--s3);
  background: #FCEDEC;
  border: 1.5px solid #A3231B;
  border-radius: var(--radius);
}
.fehlerliste[hidden] { display: none; }
.fehlerliste h2 { font-size: var(--t-h3); color: #8C1E17; }
.fehlerliste ul { margin-block-start: var(--s2); padding-inline-start: 1.2rem; font-size: var(--t-klein); }
.fehlerliste a { color: #8C1E17; }

.hinweis-kasten {
  padding: var(--s3);
  background: var(--petrol-hell);
  border-inline-start: 3px solid var(--petrol);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-klein);
}

/* ---- 20b. Einwilligung --------------------------------------------------- */
/* Sitzt unten und legt sich nicht ueber den Inhalt: ein Banner, das die
   halbe Seite verdeckt, ist kein Hinweis, sondern eine Noetigung.
   Beide Knoepfe sind gleich gross - wer ablehnt, soll nicht suchen. */
.consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 55;
  background: var(--petrol-tief);
  color: var(--zelt);
  border-block-start: 3px solid var(--holz);
  box-shadow: 0 -8px 32px -12px rgba(29, 35, 40, .45);
  padding: var(--s3) 0;
  padding-block-end: max(var(--s3), env(safe-area-inset-bottom));
}
.consent[hidden] { display: none; }
.consent__in {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
}
@media (min-width: 52rem) {
  .consent__in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); }
}
.consent__titel {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-block-end: .3rem;
}
.consent__text {
  font-size: var(--t-mini);
  line-height: 1.6;
  /* 8.9:1 auf --petrol-tief */
  color: rgba(246, 244, 239, .88);
  max-width: 62ch;
}
.consent__text a { color: var(--holz-hell); }
.consent__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); }
.consent__knoepfe .btn { flex: 1 1 auto; min-width: 9.5rem; }

/* ---- 21. Fuss ---------------------------------------------------------- */
.fuss {
  background: var(--petrol-tief);
  color: rgba(246, 244, 239, .82);
  padding-block: var(--s6) var(--s4);
  font-size: var(--t-klein);
}
.fuss__in {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
}
@media (min-width: 40rem) {
  .fuss__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .fuss__in { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s6); }
}

.fuss__marke img { width: 2.6rem; height: auto; margin-block-end: var(--s2); }
.fuss__name {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--zelt);
  letter-spacing: -.02em;
}
.fuss__zusatz {
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--holz-hell);
  margin-block-end: .15rem;
}
.fuss__adresse { margin-block-start: var(--s2); font-style: normal; line-height: 1.6; }

.fuss__titel {
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--holz-hell);
  margin-block-end: var(--s2);
}
.fuss__nav, .fuss__kontakt {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: .55rem;
}
.fuss a { color: rgba(246, 244, 239, .82); text-decoration: none; }
.fuss a:hover { color: var(--zelt); text-decoration: underline; }
.fuss__kontakt a { overflow-wrap: anywhere; }

.fuss__zeile {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin: var(--s5) auto 0;
  padding-block-start: var(--s3);
  border-block-start: 1px solid rgba(246, 244, 239, .18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: center;
  font-size: var(--t-mini);
}
.fuss__copy { margin: 0; }
.made { margin: 0; margin-inline-start: auto; }
/* Der Signaturlink steht in einem Satz und faellt damit unter die
   Inline-Ausnahme von WCAG 2.5.8 - 24 px erreicht er trotzdem. */
.made a { display: inline-block; padding-block: .3rem; text-decoration: underline; }
.heart { color: var(--holz-hell); }

/* ---- 22. Bewegung ------------------------------------------------------ */
.js-reveal .rise { opacity: 0; transform: translateY(12px); }
.js-reveal .rise.in {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .rise, .js-reveal .rise.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 23. Druck --------------------------------------------------------- */
@media print {
  .kopf, .menu, .burger, .skip, .hero__giebel, .consent { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  /* Jede helle Schrift auf dunklem Grund muss im Druck umgedreht werden,
     sonst steht sie weiss auf weiss. Die Liste muss mitwachsen, wenn eine
     neue Klasse auf dunkler Flaeche dazukommt. */
  .hero { background: #fff !important; color: #000 !important; display: block; }
  .hero__bild { display: none; }
  .hero__in { padding-inline: 0; }
  .hero__titel, .hero__lead, .hero__marken, .hero__marken strong { color: #000 !important; }
  .hero__titel em { color: #000 !important; }
  .seitenkopf { background: #fff !important; color: #000 !important; padding-block: 0 1rem; }
  .seitenkopf h1, .seitenkopf .lead, .brotkrume, .brotkrume a { color: #000 !important; }
  .sektion--dunkel, .fuss { background: #fff !important; color: #000 !important; }
  .sektion--dunkel h2, .sektion--dunkel h3, .sektion--dunkel p,
  .sektion--dunkel .lead, .sektion--dunkel a,
  .event__datum, .event__besetzung dt, .event__besetzung dd,
  .fuss__name, .fuss__titel, .fuss a, .fuss__zusatz { color: #000 !important; }
  .gesicht { background: #fff !important; color: #000 !important;
             border: 1px solid #999; }
  .gesicht__rolle, .gesicht__titel, .gesicht__text, .gesicht__mehr { color: #000 !important; }
  .btn { border: 1px solid #000 !important; background: #fff !important;
         color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .sektion, .referenz, .detail { padding-block: 1.2rem; break-inside: avoid; }
}