/* Gestaltung der öffentlichen Seiten: Startseite, Höfe, Rechtstexte.
   Die Akzentfarbe steht gleich unten in :root als --akzent. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader.woff2") format("woff2"), url("fonts/newsreader.ttf") format("truetype");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-italic.woff2") format("woff2"), url("fonts/newsreader-italic.ttf") format("truetype");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/hanken-grotesk.woff2") format("woff2"), url("fonts/hanken-grotesk.ttf") format("truetype");
}

:root {
  --grund: #131210;      /* Seitenhintergrund */
  --flaeche: #1C1A17;    /* abgesetzte Flächen */
  --karte: #1F1D19;      /* Angebotskarten */
  --bildgrund: #2B2824;  /* Platzhalter hinter Bildern */
  --linie: #4A453D;
  --text: #EFEAE0;
  --text-2: #D8D1C3;
  --text-3: #BDB6A8;
  --akzent: #DF8558;     /* Terrakotta. Die Farbe aus den Einstellungen überschreibt diesen Wert (am <html>-Element). */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: clamp(20px, 4vw, 56px);
  --abstand: clamp(64px, 8vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
a { color: inherit; }
a:hover { color: #fff; }
a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
em { color: var(--akzent); }

.rahmen { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--rand); }
.etikett { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.gross {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.riesig {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 10.4vw, 152px);
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.textlink { display: inline-block; padding: 10px 0; font-weight: 600; }
.knopf {
  display: inline-block;
  padding: 14px 26px;
  background: var(--akzent);
  color: var(--grund);
  font-weight: 700;
  text-decoration: none;
}
.knopf:hover { background: var(--text); color: var(--grund); }
.knopf--gross { padding: 16px 28px; font-size: 20px; }

/* Bildflächen: Das Bild füllt die Fläche und wird dafür beschnitten.
   Der Ausschnitt kommt als object-position aus der Verwaltung. */
.bild { position: relative; display: block; overflow: hidden; background: var(--bildgrund); }
.bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Nur in der Vorschau der Verwaltung: Platzhalter für ein Bild, das noch fehlt. */
.bild__platz { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; font-size: 15px; line-height: 1.35; color: var(--text-3); }
.bild__platz strong { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent); }
.bild__platz span { max-width: 36ch; }
.format-3x2 { aspect-ratio: 3 / 2; }
.format-4x5 { aspect-ratio: 4 / 5; }

/* Einstieg */
.titel {
  position: relative;
  min-height: clamp(950px, calc(60vw + 350px), 1230px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
/* Auf dem Handy füllt der Einstieg schon das ganze Fenster. Höher, und die Überschrift rutscht aus dem Bild. */
@media (max-width: 700px) { .titel { min-height: 800px; } }
.titel__bild { position: absolute; inset: 0; }
.titel__bild.hat-bild::after {
  /* dunkelt oben und unten ab, damit Menü und Überschrift lesbar bleiben */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(19, 18, 16, 0.74) 0%, rgba(19, 18, 16, 0) 32%),
    linear-gradient(to bottom, rgba(19, 18, 16, 0) 42%, rgba(19, 18, 16, 0.88) 100%);
}
/* Auf Handy und Tablet bricht das Menü in mehrere Zeilen um und reicht tiefer ins Bild.
   Der obere Verlauf ist dort dunkler und läuft weiter nach unten aus. */
@media (max-width: 1000px) {
  .titel__bild.hat-bild::after {
    background:
      linear-gradient(to bottom, rgba(19, 18, 16, 0.88) 0, rgba(19, 18, 16, 0) 480px),
      linear-gradient(to bottom, rgba(19, 18, 16, 0) 42%, rgba(19, 18, 16, 0.88) 100%);
  }
}
.titel > * { position: relative; }
.titel > .titel__bild { position: absolute; }
/* Menü und Untertitel stehen auf dem Bild: ein feiner Schatten hält sie auch vor hellem Himmel lesbar. */
.titel .kopf nav a, .titel .kopf__sub { text-shadow: 0 1px 3px rgba(19, 18, 16, 0.55); }
.kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-block: 24px; }
/* Logo: großer Schriftzug, klein darunter der Untertext. Größe und Schrift kommen aus den Einstellungen. */
.kopf__logo { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; text-decoration: none; }
.kopf__name { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; font-size: 30px; }
.kopf__punkt { color: var(--akzent); }
.kopf__logo--klein .kopf__name { font-size: 24px; }
.kopf__logo--mittel .kopf__name { font-size: clamp(26px, calc(1.2vw + 20px), 32px); }
.kopf__logo--gross .kopf__name { font-size: clamp(32px, calc(1.6vw + 24px), 44px); }
.kopf__logo--grotesk .kopf__name { font-family: var(--sans); font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; font-size: 17px; }
.kopf__logo--grotesk.kopf__logo--klein .kopf__name { font-size: 15px; }
.kopf__logo--grotesk.kopf__logo--gross .kopf__name { font-size: 22px; }
.kopf__sub { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.kopf__logo--gross .kopf__sub { font-size: 14px; }
.kopf__bild { display: block; width: auto; max-width: 60vw; }
.kopf__bild--klein { height: 24px; }
.kopf__bild--mittel { height: 32px; }
.kopf__bild--gross { height: 44px; }
.kopf nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; font-size: 16px; }
.kopf nav a { padding: 10px 0; text-decoration: none; }
.kopf nav a.kopf__kontakt { border-bottom: 2px solid var(--akzent); font-weight: 600; }
.titel__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: clamp(32px, 5vw, 64px); }
.titel__text p { max-width: 620px; font-size: 20px; line-height: 1.5; }

/* Worum es geht */
.worum { display: flex; flex-wrap: wrap; gap: 16px 64px; padding-block: clamp(64px, 9vw, 136px); }
.worum .etikett { flex: 1 1 200px; padding-top: 10px; }
.worum__text {
  flex: 4 1 520px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 3.3vw, 46px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

/* Geschichten */
.geschichten { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 112px); padding-bottom: clamp(64px, 9vw, 136px); }
.geschichte { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 56px; }
.geschichte--gespiegelt { flex-direction: row-reverse; }
.geschichte > .bild { flex: 2.4 1 460px; }
.geschichte__text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.geschichte__nummer { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 56px; line-height: 1; color: var(--akzent); }
.geschichte h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.02em; }
.geschichte__ort { color: var(--text-3); }
.geschichte__text .textlink { align-self: flex-start; text-decoration: underline; }
/* Der ganze Block ist ein Link: Der Link im Namen spannt sich über Bild und Text. */
.geschichte { position: relative; }
.geschichte__link { text-decoration: none; }
.geschichte__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.geschichte__link:focus-visible { outline: none; }
.geschichte__link:focus-visible::after { outline: 2px solid var(--akzent); outline-offset: 6px; }
.geschichte:hover .geschichte__link, .geschichte:hover .textlink { color: var(--akzent); }
.geschichte .geschichte__pfeil { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .geschichte > .bild img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .geschichte:hover > .bild img { transform: scale(1.03); }
  .geschichte .geschichte__pfeil { transition: transform 0.25s ease; }
  .geschichte:hover .geschichte__pfeil { transform: translateX(6px); }
}
.geschichten__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 32px; }
@media (max-width: 900px) { .geschichten__paar { grid-template-columns: 1fr; } }
@media (min-width: 901px) {
  /* Ein einzelnes Hochformat am Ende: Bild links, Text daneben, statt eine halbe Zeile leer zu lassen. */
  .geschichten__paar > .geschichte--hoch:only-child { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; gap: 24px 56px; }
  .geschichten__paar > .geschichte--hoch:only-child > .bild { flex: 0 1 calc(50% - 16px); }
  .geschichten__paar > .geschichte--hoch:only-child > .geschichte__text { flex: 1 1 260px; }
}
.geschichte--hoch { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; }
.geschichte--hoch > .bild, .geschichte--hoch > .geschichte__text { flex: none; }

/* Angebot */
.abschnitt { border-top: 1px solid var(--linie); }
.abschnitt > .rahmen { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); padding-block: var(--abstand); }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 24px; }
.karte { background: var(--karte); padding: clamp(24px, 3.5vw, 52px); display: flex; flex-direction: column; gap: 18px; }
.karte .etikett { color: var(--akzent); }
.karte h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05; letter-spacing: -0.02em; }
.karte ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); }
.karte__preis {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
}
.karte__preis p { font-family: var(--serif); font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; }
.karte__preis small { font-family: var(--sans); font-size: 16px; letter-spacing: 0; color: var(--text-3); }
.zusatz { max-width: 760px; color: var(--text-2); }

/* Ablauf */
.schritte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px 48px; }
.schritte li { display: flex; flex-direction: column; gap: 10px; }
.schritte__zahl { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 88px; line-height: 0.9; color: var(--akzent); }
.schritte h3 { font-size: 22px; font-weight: 700; line-height: 1.25; }
.schritte p { color: var(--text-2); }

/* Über mich */
.ueber { display: flex; flex-wrap: wrap; }
.ueber > .bild { flex: 1 1 400px; min-height: 520px; }
.ueber__text {
  flex: 1 1 400px;
  background: var(--flaeche);
  padding: clamp(40px, 7vw, 112px) clamp(20px, 5vw, 88px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}
.ueber__text h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -0.025em; }
.ueber__text .vorspann { font-size: 20px; }
.ueber__text .weiter-text { color: var(--text-2); }

/* Auftraggeber */
/* Auftraggeber und Veröffentlichungen: Namen in Schrift oder als Logo */
.kunden { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 52px); padding-block: clamp(48px, 6vw, 80px); }
.kunden__reihe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 64px; }
.kunden__reihe > .etikett { flex: 0 1 auto; }
.kunden ul { flex: 1 1 min(520px, 100%); min-width: 0; list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px; font-family: var(--serif); font-size: 28px; line-height: 1.25; letter-spacing: -0.01em; }
.kunden a { display: block; text-decoration: none; transition: opacity 0.2s, color 0.2s; }
.kunden a:hover { color: var(--akzent); }
.kunden__logo a:hover { opacity: 0.7; }
.kunden__logo { display: flex; align-items: center; }
.kunden__logo img { display: block; height: 44px; width: auto; max-width: 190px; object-fit: contain; }
/* "hell": das Logo wird einfarbig hell eingefärbt, passend zum dunklen Grund */
.kunden__logo--hell img { filter: brightness(0) invert(1); opacity: 0.86; }
/* "original": Originalfarben auf weißem Feld, für Logos mit weißem Hintergrund */
.kunden__logo--original { padding: 10px 16px; background: #FFFFFF; border-radius: 4px; }
.kunden__logo--original img { height: 36px; }
@media (max-width: 700px) {
  .kunden ul { font-size: 24px; gap: 16px 32px; }
  .kunden__logo img { height: 36px; max-width: 150px; }
  .kunden__logo--original img { height: 30px; }
}

/* Kontakt */
.kontakt > .rahmen { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 32px 64px; padding-block: clamp(64px, 9vw, 136px); }
.kontakt h2 { flex: 1.6 1 440px; }
.kontakt__wege { flex: 1 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.kontakt__wege p { font-size: 20px; }
.kontakt__wege .textlink { font-size: 20px; }

/* Stimmen von Höfen und Auftraggebern, vor dem Kontaktbereich */
.stimmen__liste { display: grid; gap: clamp(36px, 4vw, 64px); align-items: start; }
.stimmen__liste--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stimmen__liste--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1020px) { .stimmen__liste--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .stimmen__liste--2, .stimmen__liste--3 { grid-template-columns: minmax(0, 1fr); } }
.stimme { margin: 0; display: flex; flex-direction: column; gap: 22px; padding-top: 22px; border-top: 3px solid var(--akzent); }
.stimme blockquote { margin: 0; }
.stimme blockquote p { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.22; letter-spacing: -0.01em; text-wrap: pretty; overflow-wrap: anywhere; }
.stimmen__liste--1 .stimme { max-width: 980px; }
.stimmen__liste--1 .stimme blockquote p { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; letter-spacing: -0.02em; }
.stimme figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 16px; color: var(--text-3); }
.stimme figcaption strong { font-size: 17px; font-weight: 700; color: var(--text); }
.stimme__link { align-self: flex-start; margin-top: 8px; font-weight: 600; color: var(--akzent); }
.stimme__link:hover { color: var(--text); }

/* Kontaktformular */
.kontakt__wege--formular { flex: 1.5 1 460px; align-items: stretch; gap: 22px; }
.kontakt__fragen { align-self: flex-start; padding: 0; text-decoration: underline; }
.anfrage { display: flex; flex-direction: column; gap: 20px; }
.anfrage label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.anfrage label > span, .anfrage legend { font-size: 15px; font-weight: 600; color: var(--text-3); }
.anfrage small { font-size: inherit; font-weight: 400; }
.anfrage label.anfrage__haken { flex-direction: row; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
/* Eigenes Kästchen: eckig wie die Felder, angehakt in der Akzentfarbe. Der Haken ist eine ausgeschnittene Fläche, kein Bild. */
.anfrage__haken input { -webkit-appearance: none; appearance: none; flex: 0 0 auto; display: grid; place-content: center; width: 26px; height: 26px; margin: 0; border: 1px solid var(--linie); border-radius: 0; background: var(--flaeche); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.anfrage__haken input::before { content: ""; width: 14px; height: 14px; background: var(--grund); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transition: transform 0.12s ease; }
.anfrage__haken:hover input { border-color: var(--text-3); }
.anfrage__haken input:checked, .anfrage__haken:hover input:checked { background: var(--akzent); border-color: var(--akzent); }
.anfrage__haken input:checked::before { transform: scale(1); }
@media (forced-colors: active) { .anfrage__haken input::before { background: CanvasText; } }
.anfrage label.anfrage__haken > span { font-size: 18px; font-weight: 500; color: var(--text); }
.anfrage__haken input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.anfrage input[type="text"], .anfrage input[type="email"], .anfrage input[type="tel"], .anfrage textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 0;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  line-height: 1.4;
}
.anfrage textarea { min-height: 140px; resize: vertical; }
.anfrage input:hover, .anfrage textarea:hover { border-color: var(--text-3); }
.anfrage input:focus-visible, .anfrage textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
.anfrage__paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px 16px; align-items: end; }
.anfrage__rollen { margin: 0; padding: 0; border: 0; min-width: 0; }
.anfrage__rollen legend { padding: 0; margin-bottom: 8px; }
.anfrage__rollen > div { display: flex; flex-wrap: wrap; gap: 8px; }
.anfrage__rollen label { position: relative; display: block; }
.anfrage__rollen input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.anfrage__rollen label > span { display: block; padding: 10px 16px; border: 1px solid var(--linie); font-size: 17px; font-weight: 500; color: var(--text); transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.anfrage__rollen label:hover > span { border-color: var(--text-3); }
.anfrage__rollen input:checked + span { background: var(--akzent); border-color: var(--akzent); color: var(--grund); font-weight: 700; }
.anfrage__rollen input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 3px; }
/* Falle für Programme, die Formulare blind ausfüllen. Menschen sehen und erreichen das Feld nicht. */
.anfrage__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.anfrage__ende { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.anfrage__ende button { border: 0; border-radius: 0; font-family: inherit; cursor: pointer; }
.anfrage__ende button[disabled] { opacity: 0.6; cursor: default; }
.anfrage__ende button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.kontakt__wege .anfrage__ende p { flex: 1 1 240px; font-size: 15px; color: var(--text-3); }
.kontakt__wege .anfrage__meldung, .schranke .anfrage__meldung { padding: 14px 18px; border-left: 3px solid var(--akzent); background: var(--flaeche); font-size: 18px; }
.anfrage__meldung[hidden] { display: none; }
.anfrage__meldung:focus { outline: none; }
.anfrage__meldung--fehler { color: #FFC2B0; }
.kontakt__wege .kontakt__direkt { font-size: 17px; color: var(--text-3); }
.kontakt__direkt a { color: var(--text); }
.kontakt__wege .kontakt__hinweis { max-width: 520px; font-size: 16px; color: var(--text-3); }

/* Fuß */
.fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 32px; padding-block: 28px; font-size: 15px; color: var(--text-3); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.fuss a { display: inline-block; padding: 10px 0; }
.fuss__knopf { padding: 10px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.fuss__knopf:hover { color: #fff; }
.fuss__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.fuss__knopf[hidden] { display: none; }

/* Besuche zählen: schmales Banner am unteren Fensterrand. Beide Antworten sehen gleich aus. */
.zaehlbanner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 32px;
  padding: 12px var(--rand);
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  font-size: 15px;
  line-height: 1.45;
}
.zaehlbanner[hidden] { display: none; }
.zaehlbanner p { flex: 1 1 340px; max-width: 860px; color: var(--text-2); }
.zaehlbanner__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.zaehlbanner button { padding: 9px 18px; border: 1px solid var(--text-3); border-radius: 0; background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.zaehlbanner button:hover { background: var(--text); border-color: var(--text); color: var(--grund); }
.zaehlbanner button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
@media print { .zaehlbanner { display: none; } }

/* ==========================================================
   Häufige Fragen
   Ohne JavaScript: Fragen und Antworten untereinander.
   Mit JavaScript (Klasse fragen--aktiv): Kacheln in Reihen. Die Antwort liegt im Quelltext
   direkt hinter ihrer Frage. "dense" lässt die Kacheln trotzdem nebeneinander stehen,
   und die offene Antwort rutscht als ganze Zeile unter die Reihe ihrer Kachel.
   ========================================================== */

.fragen-kopf { display: flex; flex-direction: column; gap: 18px; padding-block: clamp(32px, 5vw, 80px) clamp(36px, 5vw, 64px); }
.fragen-kopf__text { max-width: 720px; font-size: 20px; color: var(--text-2); }
.kopf nav a[aria-current="page"] { color: var(--text-3); }

.fragen { --luecke: 16px; display: flex; flex-direction: column; gap: 12px; padding-bottom: var(--abstand); }
.frage { margin-top: 28px; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.015em; }
.frage:first-child { margin-top: 0; }
.frage__knopf { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; }
.antwort__text { max-width: 760px; display: flex; flex-direction: column; gap: 0.8em; font-size: 20px; color: var(--text-2); }

.fragen--aktiv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--luecke); }
@media (max-width: 1020px) { .fragen--aktiv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fragen--aktiv { grid-template-columns: minmax(0, 1fr); } }
.fragen--aktiv .frage { display: flex; margin: 0; font-size: clamp(22px, 2vw, 28px); }
.fragen--aktiv .frage__knopf {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 172px;
  padding: 24px 24px 20px;
  border: 1px solid var(--linie);
  cursor: pointer;
  text-wrap: balance;
  transition: background-color 0.2s, border-color 0.2s;
}
.fragen--aktiv .frage__knopf:hover { border-color: var(--text-3); }
.fragen--aktiv .frage__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
/* Offene Kachel = Reiter der Antwortzeile: gleiche Fläche, und ein Steg überbrückt die Lücke nach unten. */
.fragen--aktiv .frage__knopf[aria-expanded="true"] { background: var(--karte); border-color: var(--karte); box-shadow: inset 0 3px 0 var(--akzent); }
.fragen--aktiv .frage__knopf[aria-expanded="true"]::after { content: ""; position: absolute; left: -1px; right: -1px; top: 100%; height: calc(var(--luecke) + 2px); background: var(--karte); }
.frage__zeichen { display: none; }
.fragen--aktiv .frage__zeichen { position: relative; display: block; align-self: flex-end; width: 22px; height: 22px; color: var(--akzent); }
.frage__zeichen::before, .frage__zeichen::after { content: ""; position: absolute; left: 0; top: 10px; width: 22px; height: 2px; background: currentColor; }
.frage__zeichen::after { transform: rotate(90deg); }
.frage__knopf[aria-expanded="true"] .frage__zeichen::after { transform: rotate(0deg); }
.fragen--aktiv .antwort { grid-column: 1 / -1; background: var(--karte); padding: clamp(24px, 4vw, 56px); }
.fragen--aktiv .antwort[hidden] { display: none; }
@media (max-width: 640px) {
  .fragen--aktiv .frage__knopf { min-height: 0; gap: 16px; flex-direction: row; align-items: flex-start; padding: 20px; }
  .fragen--aktiv .frage__zeichen { flex: 0 0 auto; align-self: flex-start; margin-top: 3px; }
  .fragen--aktiv .antwort { padding: 4px 20px 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .frage__zeichen::after { transition: transform 0.25s ease; }
  .fragen--aktiv .antwort__text { animation: antwort-auf 0.35s ease both; }
  @keyframes antwort-auf { from { opacity: 0; transform: translateY(-8px); } }
}
@media print {
  .fragen--aktiv .antwort[hidden] { display: block; }
}

/* ==========================================================
   Reportageseiten
   ========================================================== */

.rep-titel { display: flex; flex-direction: column; gap: 18px; padding-block: clamp(32px, 5vw, 80px) clamp(32px, 4vw, 56px); }
.rep-titel__unterzeile {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.3vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--akzent);
}

/* Randloses Bild über die ganze Seitenbreite. Querformate werden oben und unten beschnitten. */
.randlos { min-height: clamp(320px, 50vw, 760px); }
.randlos.aufmacher { min-height: clamp(670px, calc(50vw + 350px), 1110px); }

.einleitung { display: flex; flex-wrap: wrap; gap: 40px 80px; padding-block: clamp(56px, 8vw, 120px); }
.einleitung__text {
  flex: 2.2 1 480px;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.steckbrief { flex: 1 1 min(300px, 100%); min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.steckbrief dl { margin: 0; border-bottom: 1px solid var(--linie); }
.steckbrief dl div { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-top: 1px solid var(--linie); }
.steckbrief dt { color: var(--text-3); }
.steckbrief dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }

/* ---------- Bausteine einer Hofseite ----------
   Die Bausteine stehen untereinander. Zwischen zusammengehörigen Bausteinen
   ist der Abstand klein, vor einem neuen Kapitel und um randlose Bilder groß. */
.bausteine { --klein: clamp(24px, 3vw, 40px); --gross: clamp(56px, 8vw, 120px); display: flex; flex-direction: column; gap: var(--klein); padding-bottom: var(--gross); }
.bausteine > .weit-oben { margin-top: calc(var(--gross) - var(--klein)); }
.bausteine > .weit-unten { margin-bottom: calc(var(--gross) - var(--klein)); }
.bausteine > .weit-unten + .weit-oben, .bausteine > :first-child { margin-top: 0; }
.bausteine > :last-child { margin-bottom: 0; }

/* Kapitelüberschrift */
.kapitel__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 56px; }
.kapitel__kopf h2, .neben__text h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.03em; }
.kapitel__kopf h2 { flex: 1 1 320px; }
.kapitel__kopftext { flex: 1.4 1 360px; display: flex; flex-direction: column; gap: 0.7em; color: var(--text-2); }

/* Textabsatz */
.fliesstext { max-width: 760px; display: flex; flex-direction: column; gap: 0.9em; font-size: 20px; color: var(--text-2); }

/* Bild mit Text daneben (Querformat) und Hochformat mit Text */
.neben { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 72px; }
.neben--bild-rechts { flex-direction: row-reverse; }
.neben__bild { flex: 2 1 460px; }
.neben__text { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; }
.neben__text p { color: var(--text-2); }
.neben--hoch .neben__bild { flex: 0 1 40%; min-width: min(280px, 100%); }
.neben--hoch .neben__text { flex: 1 1 320px; }
@media (max-width: 700px) {
  .neben--hoch .neben__bild { flex: 1 1 100%; }
}

/* Bildreihe: beliebig viele Bilder nebeneinander, alle gleich hoch.
   figure.quer = Querformat 3:2, figure.hoch = Hochformat 2:3. */
figure { display: flex; flex-direction: column; gap: 10px; }
figcaption { font-size: 15px; color: var(--text-3); }
.reihe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.reihe > .quer { flex: 9 1 300px; }
.reihe > .hoch { flex: 4 1 133.33px; }
/* Ein einzelnes Hochformat steht mittig statt über die volle Breite */
.reihe > .hoch:only-child { flex: 0 1 46%; margin-inline: auto; }
figure.quer > .bild { aspect-ratio: 3 / 2; }
figure.hoch > .bild { aspect-ratio: 2 / 3; }
@media (max-width: 700px) {
  .reihe > .quer, .reihe > .hoch, .reihe > .hoch:only-child { flex: 1 1 100%; margin-inline: 0; }
}

/* Mosaik: ein großes Querformat, daneben zwei kleine übereinander */
.mosaik { display: grid; grid-template-columns: calc((200% - 12px) / 3) 1fr; gap: 24px; }
.mosaik > .bild { aspect-ratio: 3 / 2; }
.mosaik > .bild:first-child { grid-row: span 2; }
.mosaik--rechts { grid-template-columns: 1fr calc((200% - 12px) / 3); }
.mosaik--rechts > .bild:first-child { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 700px) {
  .mosaik, .mosaik--rechts { grid-template-columns: 1fr; }
  .mosaik > .bild:first-child, .mosaik--rechts > .bild:first-child { grid-column: auto; grid-row: auto; }
}

.zitat { background: var(--flaeche); }
.zitat blockquote { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 8vw, 120px) var(--rand); display: flex; flex-direction: column; gap: 20px; }
.zitat blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(30px, 4.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.zitat blockquote footer { font-size: 16px; color: var(--text-3); }

.nachweis { display: block; padding-top: 20px; border-top: 1px solid var(--linie); font-size: 16px; color: var(--text-3); }

.aufruf { background: var(--flaeche); }
.aufruf > .rahmen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px 64px; padding-block: clamp(64px, 9vw, 136px); }
.aufruf h2 { flex: 1.6 1 440px; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 8vw, 120px); line-height: 0.94; letter-spacing: -0.035em; }
.aufruf__text { flex: 1 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; font-size: 20px; }

.weiter { display: block; border-top: 1px solid var(--linie); text-decoration: none; }
.weiter > .rahmen { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding-block: clamp(32px, 4vw, 56px); }
.weiter__ziel { font-family: var(--serif); font-size: clamp(30px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.025em; }

/* Hochformat-Mosaik: ein Hochformat, daneben zwei Querformate, zusammen gleich hoch */
.hochmosaik { display: grid; grid-template-columns: calc((100% - 6px) / 2.125) 1fr; gap: 24px; }
.hochmosaik > .bild { aspect-ratio: 3 / 2; }
.hochmosaik > .bild:first-child { grid-row: span 2; aspect-ratio: 2 / 3; }
.hochmosaik--rechts { grid-template-columns: 1fr calc((100% - 6px) / 2.125); }
.hochmosaik--rechts > .bild:first-child { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 700px) {
  .hochmosaik, .hochmosaik--rechts { grid-template-columns: 1fr; }
  .hochmosaik > .bild:first-child, .hochmosaik--rechts > .bild:first-child { grid-column: auto; grid-row: auto; }
}

/* Feststehendes Bild: Das Bild klebt am Fenster, die Seite gleitet darüber hinweg.
   Der Ausschnitt (clip-path) sorgt dafür, dass es nur in seinem Streifen sichtbar ist. */
.feststehend { position: relative; height: clamp(320px, 72vh, 860px); clip-path: inset(0); background: var(--bildgrund); }
.feststehend img { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .feststehend { clip-path: none; overflow: hidden; }
  .feststehend img { position: absolute; height: 100%; }
}

/* Vollbild: füllt das ganze Fenster */
.vollbild { height: 100vh; height: 100svh; min-height: 320px; }

/* Video */
.b-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

figcaption.rahmen { padding-top: 10px; }

/* Rechtstexte und Fehlerseite */
.rechtstext { max-width: 860px; display: flex; flex-direction: column; gap: 18px; padding-block: clamp(32px, 5vw, 80px) clamp(64px, 9vw, 136px); }
.rechtstext h1 { margin-bottom: 16px; }
.rechtstext h2, .rechtstext h3 { margin-top: 20px; font-size: 22px; line-height: 1.25; }
.rechtstext p { color: var(--text-2); overflow-wrap: anywhere; }

/* Wartungsmodus: Passwortabfrage vor der ganzen Website */
.schranke { min-height: calc(100vh - 260px); min-height: calc(100svh - 260px); display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-block: clamp(40px, 6vw, 96px); }
.schranke__text { max-width: 620px; font-size: 20px; color: var(--text-2); }
.schranke__formular { max-width: 440px; margin-top: 10px; }
/* Nur für dich, wenn du in der Verwaltung angemeldet bist */
.wartungshinweis { margin: 0; padding: 8px var(--rand); background: var(--akzent); color: var(--grund); font-size: 15px; font-weight: 600; text-align: center; }
.wartungshinweis a, .wartungshinweis a:hover { color: inherit; }
@media print { .wartungshinweis { display: none; } }

/* Hilfen */
.sprung { position: absolute; left: 12px; top: -80px; z-index: 10; padding: 10px 16px; background: var(--akzent); color: var(--grund); font-weight: 700; }
.sprung:focus { top: 12px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Einblenden beim Scrollen ----------
   seite.js gibt Elementen, die beim Laden noch unterhalb des Fensters liegen,
   die Klasse "wartet" und nimmt sie weg, sobald sie ins Fenster kommen.
   Ohne JavaScript oder mit "Bewegung reduzieren" ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .einblenden { transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
  .einblenden.wartet { opacity: 0; transform: translateY(48px); transition: none; }
}
@media print {
  .einblenden.wartet { opacity: 1; transform: none; }
}

/* Nur in der Vorschau der Verwaltung: der gerade bearbeitete Baustein */
.ist-vorschau [data-baustein].markiert { outline: 3px solid var(--akzent); outline-offset: 6px; }