/*
 * Einstich -- Grundstylesheet.
 *
 * Farben stehen hier bewusst nirgends fest: sie kommen als CSS-Variablen aus
 * der Verwaltung (siehe inc/theme.php) und werden im Kopfbereich eingesetzt.
 * Wer hier eine Farbe hart einträgt, nimmt sie der Verwaltung weg.
 */

*, *::before, *::after { box-sizing: border-box; }

/* Muss ganz oben stehen und muss !important sein: eigene display-Regeln
   (etwa .knopf-zeile mit display:flex) überstimmen sonst das
   hidden-Attribut, und versteckte Elemente sind doch sichtbar. */
[hidden] { display: none !important; }

:root {
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mass: 0.25rem;          /* Grundeinheit des Rasters */
  --breite: 68rem;
  --rund: 2px;              /* fast eckig: sachlich, nicht verspielt */
  --linie-stark: 1px solid var(--c-linie);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-grund);
  color: var(--c-text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
a { color: var(--c-akzent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Beschriftung über einem Abschnitt: gesperrt, klein, leise.
   Trägt die Sachlichkeit des Namens „Einstich“ ins Layout. */
.marke {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-leise);
  margin: 0 0 0.75rem;
}

/* Die Nadel: eine haarfeine Linie mit einem Punkt. Einziges Zierelement,
   markiert Abschnittsanfänge und den Anmeldebereich. */
.nadel {
  position: relative;
  padding-left: 1.25rem;
}
.nadel::before {
  content: "";
  position: absolute;
  left: 0; top: 0.2em; bottom: 0.2em;
  width: 1px;
  background: linear-gradient(to bottom, var(--c-akzent), transparent);
}
.nadel::after {
  content: "";
  position: absolute;
  left: -1.5px; top: 0.2em;
  width: 4px; height: 4px;
  background: var(--c-akzent);
}

/* --- Gerüst --- */

.huelle { max-width: var(--breite); margin: 0 auto; padding: 1.25rem; }

.kopf {
  border-bottom: var(--linie-stark);
  background: var(--c-flaeche);
  position: sticky; top: 0; z-index: 20;
}
.kopf-inhalt {
  max-width: var(--breite); margin: 0 auto;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.25rem;
}
.logo {
  font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  font-size: 0.85rem; color: var(--c-text); text-decoration: none;
}
.logo span { color: var(--c-akzent); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
/* Auf schmalen Geräten steht der Name im Weg: er quetscht die Schaltfläche
   „Abmelden“ auf zwei Zeilen. Wer angemeldet ist, weiß ohnehin, wer er ist. */
@media (max-width: 30rem) { .kopf-rechts .chip { display: none; } }

/* Öffnungszeiten: „von“ und „bis“ nebeneinander, sonst wird die Seite auf dem
   Handy sieben Bildschirme lang. */
.tag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
  padding: 0.85rem 0;
  border-bottom: var(--linie-stark);
}
.tag:last-of-type { border-bottom: 0; }
.tag-name { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tag-name strong { font-weight: 600; font-size: .95rem; }
.tag-schalter { display: flex; gap: .5rem; align-items: center; color: var(--c-leise); font-size: .85rem; margin: 0; }
.tag label { margin-bottom: .25rem; }

/* Navigation als Chips -- auf dem Handy waagerecht scrollbar,
   damit sie nie umbricht und die halbe Höhe frisst. */
.nav {
  display: flex; gap: 0.4rem; overflow-x: auto;
  padding: 0.6rem 1.25rem;
  max-width: var(--breite); margin: 0 auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  border: var(--linie-stark);
  border-radius: 999px;
  color: var(--c-leise);
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
}
.nav a:hover { color: var(--c-text); border-color: var(--c-leise); }
.nav a[aria-current="page"] {
  color: var(--c-akzent-kontrast);
  background: var(--c-akzent);
  border-color: var(--c-akzent);
}

/* --- Karten und Formulare --- */

.karte {
  background: var(--c-flaeche);
  border: var(--linie-stark);
  border-radius: var(--rund);
  padding: 1.25rem;
  margin: 0 0 1.25rem;
}
.karte > :last-child { margin-bottom: 0; }

.feldgruppe { margin: 0 0 1rem; }
.feldgruppe:last-child { margin-bottom: 0; }
label { display: block; font-size: 0.8rem; color: var(--c-leise); margin: 0 0 0.35rem; }

input[type=text], input[type=email], input[type=password], input[type=time],
input[type=tel], input[type=url], input[type=number], select, textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  background: var(--c-grund);
  border: var(--linie-stark);
  border-radius: var(--rund);
  color: var(--c-text);
  font: inherit;
  font-size: 16px; /* Warum genau 16px: alles darunter zoomt iOS beim Tippen */
}
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--c-akzent);
  outline-offset: 2px;
}
textarea { min-height: 7rem; resize: vertical; }

.reihe { display: grid; gap: 0.75rem; }
@media (min-width: 40rem) {
  .reihe-2 { grid-template-columns: 1fr 1fr; }
  .reihe-3 { grid-template-columns: 1fr 1fr 1fr; }
  .huelle { padding: 2rem 1.25rem 4rem; }
  h1 { font-size: 2.1rem; }
}

.knopf {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--c-akzent);
  border-radius: var(--rund);
  background: var(--c-akzent);
  color: var(--c-akzent-kontrast);
  font: inherit; font-size: 0.9rem; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.knopf:hover { filter: brightness(1.08); }
.knopf-leise {
  background: transparent; color: var(--c-text); border-color: var(--c-linie);
}
.knopf-leise:hover { border-color: var(--c-leise); filter: none; }
.knopf-gefahr { background: transparent; border-color: #a3423a; color: #e08c85; }
.knopf-zeile { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.25rem; }

/* --- Meldungen --- */

.meldung {
  border: var(--linie-stark);
  border-left: 3px solid var(--c-akzent);
  background: var(--c-flaeche);
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
  border-radius: var(--rund);
  font-size: 0.92rem;
}
.meldung-fehler { border-left-color: #c1554a; }
.meldung-warnung { border-left-color: #c9a45b; }
.meldung-ok { border-left-color: #5c9c72; }

/* --- Kleinteile --- */

.chip {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: var(--linie-stark);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--c-leise);
}
.chip-akzent { color: var(--c-akzent); border-color: var(--c-akzent-schwach); }
.leise { color: var(--c-leise); font-size: 0.85rem; }
.trenner { border: 0; border-top: var(--linie-stark); margin: 1.5rem 0; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
  padding: 0.85rem 0;
  border-bottom: var(--linie-stark);
}
.liste li:last-child { border-bottom: 0; }
.liste .wachsen { flex: 1 1 12rem; min-width: 0; }

/* --- Anmeldung --- */

.anmeldung { max-width: 24rem; margin: 12vh auto; padding: 1.25rem; }
.anmeldung .karte { border-left: 2px solid var(--c-akzent); }

/* --- Farbwähler im Designbereich --- */

.farbfeld { display: flex; align-items: center; gap: 0.75rem; }
.farbfeld input[type=color] {
  width: 3rem; height: 2.6rem; padding: 0; border: var(--linie-stark);
  border-radius: var(--rund); background: none; cursor: pointer;
}
.farbfeld input[type=text] { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Runde 2: öffentliche Seiten und Baustein-Editor
   ========================================================================== */

/* --- Öffentliche Seiten --- */

.oeffentlich .kopf { background: color-mix(in srgb, var(--c-flaeche) 88%, transparent); backdrop-filter: blur(8px); }
.oeffentlich .kopf-inhalt { flex-wrap: wrap; }
.kopf-nav { padding: 0; margin: 0 0 0 auto; max-width: none; }

/* Der Punkt in der Wortmarke wird gezeichnet, nicht gesetzt: ein Mittelpunkt
   sieht je nach Systemschrift mal rund, mal eckig aus. */
.punkt {
  display: inline-block; vertical-align: middle;
  width: .28em; height: .28em; background: var(--c-akzent);
  margin: 0 .35em .1em;
}

.mitte { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }
.mitte.schmal { max-width: 42rem; }
.abschnitt { padding: 3rem 0; }
.abschnitt + .abschnitt { padding-top: 0; }

.kopfbild {
  min-height: 62svh;
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  padding: 4rem 0 3rem;
  border-bottom: var(--linie-stark);
  margin-bottom: 3rem;
}
/* Ohne volle Breite schrumpft der Kasten als Flex-Kind auf die Textbreite
   und die automatischen Seitenränder schieben ihn in die Mitte. */
.kopfbild .mitte { width: 100%; }
.gross { font-size: clamp(2.4rem, 11vw, 4.5rem); letter-spacing: -0.04em; line-height: .95; margin: 0 0 1rem; }
.vorsatz { font-size: 1.05rem; color: var(--c-leise); max-width: 32rem; }

.bild img, .spalte-bild img, .einblicke img {
  display: block; width: 100%; height: auto;
  border: var(--linie-stark); border-radius: var(--rund);
}
figure { margin: 0; }
figcaption { font-size: .85rem; color: var(--c-leise); margin-top: .5rem; }

.zweispalt { display: grid; gap: 1.5rem; }
.einblicke { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }

/* Nummerierter Ablauf: die Zahl trägt Bedeutung, deshalb steht sie im Text
   und nicht als CSS-Zierde. */
.schritte { list-style: none; margin: 0; padding: 0; }
.schritte li { display: flex; gap: 1rem; padding: 1.1rem 0; border-top: var(--linie-stark); }
.schritte h3 { margin: 0 0 .3rem; }
.schritte p:last-child { margin-bottom: 0; }
.zahl { color: var(--c-akzent); font-variant-numeric: tabular-nums; font-size: .85rem; padding-top: .25rem; }

details { border-top: var(--linie-stark); padding: .9rem 0; }
details summary { cursor: pointer; font-weight: 500; list-style-position: outside; }
details p:last-child { margin-bottom: 0; }

.preisliste { list-style: none; margin: 0 0 1rem; padding: 0; }
.preisliste li { display: flex; gap: 1rem; align-items: baseline; padding: .8rem 0; border-bottom: var(--linie-stark); }
.preis { color: var(--c-akzent); font-variant-numeric: tabular-nums; white-space: nowrap; }

.kasten { border: 1px solid var(--c-akzent-schwach); border-left: 3px solid var(--c-akzent);
          background: var(--c-flaeche); padding: 1.5rem; border-radius: var(--rund); }
address { font-style: normal; }

.zeiten {
  display: grid;
  grid-template-columns: max-content auto;
  gap: .25rem 1.5rem;
  margin: 1rem 0;
  font-size: .95rem;
}
.zeiten dt { color: var(--c-leise); }
.zeiten dd { margin: 0; font-variant-numeric: tabular-nums; }

.fuss { border-top: var(--linie-stark); background: var(--c-flaeche); padding: 2.5rem 0; margin-top: 4rem; font-size: .9rem; }
.fuss-raster { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; }
.fuss a { color: var(--c-text); }

.vorschau-hinweis {
  background: var(--c-akzent); color: var(--c-akzent-kontrast);
  text-align: center; padding: .5rem 1rem; font-size: .85rem;
}

@media (min-width: 46rem) {
  .abschnitt { padding: 4.5rem 0; }
  .zweispalt { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
  /* Bei der Anfahrt stehen zwei Textspalten nebeneinander -- die gehören
     oben bündig, sonst schwebt die Anschrift neben der Überschrift. */
  .abschnitt .zweispalt:not(:has(.spalte-bild)) { align-items: start; }
  .zweispalt.umgedreht .spalte-bild { order: 2; }
  .einblicke { grid-template-columns: repeat(3, 1fr); }
  .fuss-raster { grid-template-columns: repeat(4, 1fr); }
}

/* --- Editor --- */

.griff {
  flex: 0 0 auto;
  background: none; border: var(--linie-stark); border-radius: var(--rund);
  color: var(--c-leise); font-size: 1.1rem; line-height: 1;
  padding: .5rem .6rem; cursor: grab;
  /* Ohne das scrollt die Seite mit, während man den Griff zieht. */
  touch-action: none;
}
.griff-aus { border-style: dashed; cursor: default; opacity: .5; }
.wird-verschoben { opacity: .6; background: var(--c-grund); }
.sortiert-gerade { user-select: none; }

.baustein-kopf { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.baustein-kopf h2 { margin: 0; }

.liste-felder { border: var(--linie-stark); border-radius: var(--rund); padding: 1rem; margin: 0 0 1rem; }
.liste-felder legend { padding: 0 .5rem; font-size: .8rem; color: var(--c-leise); letter-spacing: .1em; text-transform: uppercase; }
.listenzeile { border-top: var(--linie-stark); padding: 1rem 0 0; margin-top: 1rem; }
.listenzeile:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.listenzeile-kopf { display: flex; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.listenzeile-neu { opacity: .75; }
.listenzeile-neu:focus-within { opacity: 1; }

.knopf-klein { padding: .35rem .7rem; font-size: .8rem; }
.bildvorschau { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .5rem; }
.bildvorschau img { width: 6rem; height: 6rem; object-fit: cover; border: var(--linie-stark); border-radius: var(--rund); }
input[type=file] { width: 100%; font-size: .85rem; color: var(--c-leise); }
summary { cursor: pointer; }

/* ==========================================================================
   Runde 3: visueller Editor
   ========================================================================== */

.visuell { max-width: 100rem; margin: 0 auto; padding: 0 1.25rem 3rem; }
.visuell-leiste {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 1rem 0;
}
.visuell-hilfe { margin-bottom: 1rem; }
.visuell-raster { display: grid; gap: 1.25rem; }

.visuell-vorschau {
  border: var(--linie-stark); border-radius: var(--rund);
  background: var(--c-grund); overflow: hidden;
}
.visuell-vorschau iframe { display: block; width: 100%; height: 60svh; border: 0; }

.visuell-streifen {
  border: var(--linie-stark); border-radius: var(--rund);
  background: var(--c-flaeche); padding: 1.25rem;
}
.visuell-streifen h2 { margin-bottom: .3rem; }
#streifen-meldung:not(:empty) { margin: .75rem 0; }

@media (min-width: 62rem) {
  /* Nebeneinander erst ab Tablettbreite. Darunter steht der Streifen unter
     der Vorschau -- auf dem Handy ist alles andere unbedienbar. */
  .visuell-raster { grid-template-columns: 1fr 24rem; align-items: start; }
  .visuell-vorschau iframe { height: 78svh; }
  .visuell-streifen { position: sticky; top: 5.5rem; max-height: 78svh; overflow-y: auto; }
}

/* --- Innerhalb des Rahmens (gilt für die echte Seite im Editormodus) --- */

.im-editor [data-block] {
  position: relative;
  cursor: pointer;
  outline: 1px dashed transparent;
  outline-offset: -2px;
  transition: outline-color .12s;
}
.im-editor [data-block]:hover { outline-color: var(--c-leise); }
.im-editor [data-block]:focus-visible { outline: 2px solid var(--c-akzent); }
.im-editor [data-block].ist-gewaehlt { outline: 2px solid var(--c-akzent); outline-offset: -2px; }
/* Der Editor blendet keine Inhalte aus -- man soll sehen, was wirklich
   dasteht, auch wenn ein Abschnitt gerade leer ist. */
.im-editor .kopfbild { min-height: 40svh; }
.im-editor .platzhalter {
  border-top: 1px dashed var(--c-linie);
  border-bottom: 1px dashed var(--c-linie);
  padding: 2rem 0;
}
.streifen-liste { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: var(--linie-stark); }
.streifen-liste .liste li { padding: .3rem 0; border: 0; }
.streifen-liste .knopf { width: 100%; justify-content: flex-start; }
.streifen-liste .ist-aktiv { border-color: var(--c-akzent); color: var(--c-akzent); }

/* ==========================================================================
   Runde 4: Einwilligung
   ========================================================================== */

/* --- Öffentliches Formular --- */

.fortschritt { margin: 1.5rem 0; }
.fortschritt-balken { height: 2px; background: var(--c-linie); overflow: hidden; }
.fortschritt-balken span { display: block; height: 100%; width: 0; background: var(--c-akzent); transition: width .25s; }
.fortschritt p { margin: .5rem 0 0; }

.schritt { margin: 0 0 1rem; }
.schritt h2 { margin-bottom: .75rem; }
.schritt-knoepfe { justify-content: space-between; }

.frage { padding: 1rem 0; border-top: var(--linie-stark); }
.frage:last-of-type { border-bottom: var(--linie-stark); }
.frage-text { margin: 0 0 .6rem; }
.frage-hinweis { margin: .5rem 0 0; }

/* Ja/Nein als große Flächen: auf dem Handy trifft man Radioknöpfe schlecht. */
.wahl { display: flex; gap: .6rem; }
.wahl-knopf { flex: 1 1 0; margin: 0; }
.wahl-knopf input { position: absolute; opacity: 0; pointer-events: none; }
.wahl-knopf span {
  display: block; text-align: center;
  padding: .7rem 1rem; border: var(--linie-stark); border-radius: var(--rund);
  color: var(--c-text); cursor: pointer;
}
.wahl-knopf input:checked + span { border-color: var(--c-akzent); color: var(--c-akzent); }
.wahl-knopf input:focus-visible + span { outline: 2px solid var(--c-akzent); outline-offset: 2px; }

.hinweis-kasten { border-top: var(--linie-stark); }
.hinweis-kasten summary { padding: .2rem 0; }

.zustimmung { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 0;
              border-bottom: var(--linie-stark); color: var(--c-text); font-size: .95rem; }
.zustimmung input { margin-top: .25rem; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }

.unterschriftsfeld { margin-top: 1.5rem; }
.unterschrift-rahmen {
  position: relative; background: var(--c-flaeche);
  border: var(--linie-stark); border-radius: var(--rund);
  aspect-ratio: 5 / 2;
}
.unterschrift-rahmen canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--c-text);
  /* Ohne das scrollt die Seite beim Unterschreiben mit. */
  touch-action: none;
}
.unterschrift-linie {
  position: absolute; left: 8%; right: 8%; bottom: 22%;
  border-bottom: 1px dashed var(--c-linie);
}

/* --- Dokument (Bildschirm und Druck) --- */

.dokument {
  background: #fff; color: #16181d;
  max-width: 48rem; margin: 0 auto 2rem;
  padding: 2.5rem;
  border-radius: var(--rund);
  font-size: 13px; line-height: 1.55;
}
.dokument h1 { font-size: 1.5rem; margin: 0; color: #16181d; }
.dokument h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
               color: #6b7078; margin: 0 0 .75rem; }
.dokument h3 { font-size: .95rem; margin: 0 0 .25rem; }
.dokument p { margin: 0 0 .6rem; }

.dok-kopf { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start;
            border-bottom: 2px solid #16181d; padding-bottom: 1rem; }
.dok-marke { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: #6b7078; margin: 0 0 .2rem; }
.dok-studio { text-align: right; font-size: 12px; color: #4b5058; }

.dok-kopfzeile { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center;
                 font-size: 11.5px; color: #6b7078; padding: .6rem 0; border-bottom: 1px solid #dcdee2; }
.dok-status { margin-left: auto; border: 1px solid #b9bdc4; border-radius: 999px; padding: .1rem .6rem;
              text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.dok-status-bestaetigt { border-color: #2f7a4f; color: #2f7a4f; }
.dok-status-abgelehnt { border-color: #a3423a; color: #a3423a; }

.dok-block { margin: 1.6rem 0; }
.dok-vorsatz { font-size: 12px; color: #6b7078; }

.dok-liste { display: grid; grid-template-columns: 9rem 1fr; gap: .3rem 1rem; margin: 0; }
.dok-liste dt { color: #6b7078; }
.dok-liste dd { margin: 0; }

.dok-tabelle { width: 100%; border-collapse: collapse; }
.dok-tabelle th, .dok-tabelle td { text-align: left; vertical-align: top;
  padding: .5rem .6rem; border-bottom: 1px solid #e4e6ea; font-weight: 400; }
.dok-tabelle th { width: 72%; }
.dok-tabelle td { white-space: nowrap; }
/* Ein Punkt zum Besprechen wird markiert, nicht rot geschrien -- das
   Dokument liegt auch mal offen auf dem Tresen. */
.dok-achtung th { box-shadow: inset 3px 0 0 #c9a45b; padding-left: 1rem; }
.dok-leer { color: #8b909a; }

.dok-hinweis { margin: 0 0 .9rem; }
.dok-haken { list-style: none; margin: 0; padding: 0; }
.dok-haken li { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; }
.dok-kasten { flex: 0 0 auto; width: 1rem; height: 1rem; border: 1px solid #16181d;
              text-align: center; line-height: .9rem; font-weight: 700; }

.dok-unterschrift { margin-top: 2.5rem; }
.dok-signatur { max-width: 26rem; }
.unterschrift-svg { display: block; max-width: 100%; height: auto; color: #16181d; }
.dok-signaturlinie { border-bottom: 1px solid #16181d; margin-top: -.4rem; }
.dok-signatur p { margin-top: .4rem; font-size: 12px; }

.dok-fuss { border-top: 1px solid #dcdee2; margin-top: 2rem; padding-top: .8rem;
            font-size: 10.5px; color: #6b7078; }
.dok-fuss p { margin: 0 0 .2rem; }

@media (max-width: 40rem) {
  .dokument { padding: 1.25rem; }
  .dok-kopf { flex-direction: column; gap: .75rem; }
  .dok-studio { text-align: left; }
  .dok-liste { grid-template-columns: 1fr; gap: 0 0; }
  .dok-liste dt { margin-top: .5rem; font-size: 11px; }
  .dok-tabelle th { width: auto; }
}

/* --- Druck --- */

@media print {

  /* Alles, was zur Verwaltung gehört, verschwindet -- übrig bleibt das
     Dokument, ohne Kopfleiste, Navigation und Schaltflächen. */
  .kopf, .nav, .knopf-zeile, .nicht-drucken, .meldung { display: none !important; }
  body { background: #fff !important; color: #000; }
  .huelle { padding: 0; max-width: none; }
  .dokument { max-width: none; margin: 0; padding: 0; font-size: 10.5pt; }
  .dok-block { margin: 14pt 0; }
  /* Kein erzwungener Umbruch: er ließ eine fast leere Seite entstehen.
     Es reicht, einzelne Blöcke nicht mitten durchzureißen. */
  .dok-hinweis, .dok-unterschrift, .dok-haken li, .dok-tabelle tr { break-inside: avoid; }
  a[href]::after { content: ""; }
}

@page {
  size: A4;
  /* Unten mehr Rand: dort läuft die wiederholte Laufzeile. */
  margin: 18mm 16mm 18mm;
}

/* Honigtopf: für Menschen unsichtbar, für ein Programm ein normales Feld.
   Nicht display:none — manche Programme prüfen genau darauf. */
.honigtopf {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ==========================================================================
   Runde 7: Galerie
   ========================================================================== */

.filterleiste { padding-left: 0; padding-right: 0; margin-bottom: 1.5rem; }
.filterleiste .leise { font-size: .75rem; }

.galerie { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
.galerie-stueck { margin: 0; }
.galerie-knopf {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.galerie-knopf img {
  display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover;
  border: var(--linie-stark); border-radius: var(--rund);
}
.galerie-knopf:focus-visible img { outline: 2px solid var(--c-akzent); outline-offset: 2px; }
.galerie-stueck figcaption { font-size: .8rem; color: var(--c-leise); margin-top: .4rem; }

@media (min-width: 40rem) { .galerie { grid-template-columns: repeat(3, 1fr); gap: .75rem; } }
@media (min-width: 62rem) { .galerie { grid-template-columns: repeat(4, 1fr); } }

/* Großansicht */
.grossbild {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in srgb, var(--c-grund) 94%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.grossbild figure { margin: 0; max-width: 100%; max-height: 100%; }
.grossbild img { max-width: 100%; max-height: 82svh; width: auto; height: auto; display: block; margin: 0 auto; }
.grossbild figcaption { text-align: center; color: var(--c-leise); font-size: .85rem; margin-top: .75rem; }
.grossbild-zu {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.75rem; height: 2.75rem; line-height: 1;
  background: var(--c-flaeche); color: var(--c-text);
  border: var(--linie-stark); border-radius: 999px; font-size: 1.5rem; cursor: pointer;
}

/* Stilauswahl in der Verwaltung */
.stilwahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl-klein { flex: 0 0 auto; }
.wahl-klein span { padding: .4rem .8rem; font-size: .85rem; border-radius: 999px; }

.bildzeile { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.bildzeile-vorschau {
  flex: 0 0 auto; width: 7rem; height: 7rem; object-fit: cover;
  border: var(--linie-stark); border-radius: var(--rund);
}
.bildzeile-felder { flex: 1 1 18rem; min-width: 0; }
.mini { width: 40px; height: 40px; object-fit: cover; border-radius: var(--rund); flex: 0 0 auto; }

/* ==========================================================================
   Runde 9: Untergrund und Startseite
   ========================================================================== */

/*
 * Leichte Körnung über der ganzen Seite.
 *
 * Als SVG direkt im Stylesheet, nicht als Bilddatei: kostet keinen
 * zusätzlichen Serveraufruf, ist ein paar hundert Byte groß und lässt sich
 * in einer Zeile stärker oder schwächer stellen. Zwei Lagen — eine feine
 * Körnung und eine grobe Wolkigkeit — sonst sieht es nach Fernsehrauschen
 * aus statt nach Papier.
 *
 * z-index: -1 legt die Lage hinter allen Inhalt, aber über die
 * Hintergrundfarbe. pointer-events: none, damit sie keine Klicks abfängt.
 */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.09'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
}

/* Im Ausdruck hat die Körnung nichts verloren -- sie würde Toner kosten und
   das Dokument unruhig machen. */
@media print { body::before { display: none !important; } }

/* --- Startseite --- */

.kopfbild {
  min-height: 78svh;
  position: relative;
  isolation: isolate;
}
/* Weicher Abschluss nach unten, damit das Hintergrundbild nicht mit einer
   harten Kante endet. Liegt über dem Bild, unter dem Text. */
.kopfbild::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, transparent 40%, var(--c-grund) 96%);
}
.gross { font-size: clamp(2.8rem, 13vw, 5.6rem); letter-spacing: -0.045em; }
.kopfbild .vorsatz { font-size: clamp(1rem, 4vw, 1.25rem); color: var(--c-text); max-width: 30rem; }

/* Der erste Abschnitt nach dem Kopfbereich darf Luft haben. */
.kopfbild + .abschnitt { padding-top: 1rem; }

/* Textabschnitte etwas großzügiger setzen -- das ist der Unterschied
   zwischen „ordentlich“ und „hochwertig“. */
.abschnitt .schmal p { font-size: 1.02rem; line-height: 1.7; }
.abschnitt h2 { font-size: clamp(1.3rem, 4.5vw, 1.75rem); margin-bottom: 1rem; }

/* Hinweiskasten: mehr Gewicht, damit eine Ankündigung auch wie eine wirkt. */
.kasten {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-akzent) 7%, var(--c-flaeche)), var(--c-flaeche));
  padding: 1.75rem;
}
.kasten p:first-child { font-size: 1.05rem; }
.kasten .knopf { margin-top: .5rem; }

@media (min-width: 46rem) {
  .kopfbild { min-height: 82svh; }
  .abschnitt .schmal p { font-size: 1.05rem; }
}