/*
Theme Name: CICEKLI Arbeitssicherheit
Theme URI: https://www.cicekli.de
Author: RJKL — René Jäkel
Author URI: https://rjkl.de
Description: Theme für CICEKLI Arbeitssicherheit, abgeleitet vom RJKL Theme Starter und gebaut nach dem freigegebenen Entwurf. Kein Build-Schritt auf dem Server: Archivo und Jost, GSAP und das kompilierte Tailwind liegen als fertige Dateien im Theme, kein Aufruf zu einem fremden CDN. Farb-Tokens stehen ausschließlich in :root.
Version: 1.6.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: proprietär
Text Domain: cicekli
*/

/* ==========================================================================
   MARKEN-TOKENS
   --------------------------------------------------------------------------
   Leitidee des Entwurfs: Das Logo ist eine Linienzeichnung — dünne, weit
   gesperrte Buchstaben in Marine, und der obere Balken des "E" ist rot. Diese
   Konstruktion aus roter Ober- und marineblauer Unterlinie ist die Grammatik
   der ganzen Seite: Navigation, Karten, Kicker, Icons folgen ihr.

   Nirgendwo sonst hartcodierte Farben verwenden.
   ========================================================================== */

:root {
  --akzent: #E30613;            /* Signalrot aus dem Logo */
  --akzent-kontrast: #ffffff;   /* Schrift auf --akzent */
  --marine: #1F193F;            /* Wortmarke */
  --marine-tief: #14102C;       /* dunkler Anker */
  --marine-2: #29235C;          /* Slogan-Marine */
  --rot-hell: #F71D14;          /* Rot NUR auf dunklem Grund — so nah am Marken-Rot
                                   wie möglich, aber hell genug für 3:1 Kontrast */

  --grund: #ffffff;
  --grund-gedaempft: #F4F4F7;
  --text: #1F193F;
  --text-leise: #5B5675;
  --linie: #DCDCE4;

  --radius: 4px;

  --dauer: 200ms;
  --kurve: cubic-bezier(0.4, 0, 0.2, 1);

  --schrift-marke: 'Jost', system-ui, sans-serif;
  --schrift: 'Archivo', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--schrift);
  color: var(--text);
  background: var(--grund);
}

.marke { font-family: var(--schrift-marke); letter-spacing: 0.18em; }
.zeile-clip { overflow: clip; }

/* Sprungmarke: für Tastatur und Screenreader. Sie liegt außerhalb des Bildes
   und kommt erst beim Fokus herein — sichtbar, nicht versteckt. */
.sprungmarke {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--marine);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  transition: top 200ms var(--kurve);
}
.sprungmarke:focus { top: 1rem; outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Die Adminleiste von WordPress schiebt die Seite 32 px nach unten. Ohne diese
   Regel klebt die feste Kopfzeile darunter und verdeckt die Leiste. */
.admin-bar #kopf { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #kopf { top: 46px; } }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve),
              color var(--dauer) var(--kurve),
              transform var(--dauer) var(--kurve);
}
.btn:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }

.btn-primaer { background: var(--akzent); color: var(--akzent-kontrast); }
/* Der Akzent kann jede Marke sein — abdunkeln geht nur relativ, nicht per Hex. */
.btn-primaer:hover { filter: brightness(0.9); }

/* Zweiter Knopf auf dunklem Grund: nur eine Linie, damit er dem roten nicht
   die Aufmerksamkeit streitig macht. */
.btn-linie {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: transparent;
}
.btn-linie:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Die beiden Knöpfe im Kopf werden von GSAP bewegt — transform darf nicht
   doppelt animiert werden, sonst ruckelt der Einlauf gegen die Transition. */
#kopf-cta, #kopf-cta-mobil {
  transition-property: background-color, border-color, color, filter;
}

/* ==========================================================================
   HERO (Startseite und Landeseiten)
   ========================================================================== */

/* Höhe der ersten Ansicht: die gemessene Kopfhöhe abziehen (69 px / 81 px) */
.hero-hoehe { min-height: calc(100svh - 69px); }
@media (min-width: 768px) { .hero-hoehe { min-height: calc(100svh - 81px); } }

/* Der Bildausschnitt der Startseite gehört ins CSS, nicht als Inline-Wert —
   sonst kann die Mobil-Regel ihn nicht überschreiben. Hochkant bleibt vom
   Breitbild nur ein schmaler Streifen; der muss auf den Arbeitern sitzen,
   nicht auf leerer Wand. Die Landeseiten tragen je Foto einen eigenen
   Ausschnitt am Bild (cic_hero_fotos() in inc/landeseite.php); der Inline-
   Wert gewinnt dort gegen diese Regel, und zwar mit Absicht. */
#hero-bild { object-position: 62% 50%; }
@media (max-width: 767px) { #hero-bild { object-position: 58% 50%; } }
#balken-vorhang { display: none; }   /* nur das Skript schaltet den Vorhang ein */

/* Der Titel der Landeseiten trägt Ortsnamen wie "Tauberbischofsheim", die auf
   dem Handy breiter sind als die Zeile. Trennen statt abschneiden: erst nach
   Silbe (lang="de"), im Notfall irgendwo — beides ist besser als ein Wort,
   das rechts aus dem Bild läuft. */
.hero-titel { hyphens: auto; overflow-wrap: anywhere; }

/* ==========================================================================
   LEISTUNGS-KARTEN
   --------------------------------------------------------------------------
   Gleiche Grammatik wie das Nav-Kästchen: eine rote Haarlinie oben, die von
   links einzeichnet, dazu eine Kante in Marine. Kein Schatten-Kasten, keine
   Fläche — die Karte ist eine gezeichnete Umrandung.
   ========================================================================== */

.karte {
  position: relative;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color 260ms var(--kurve), box-shadow 260ms var(--kurve);
}

/* Die rote Oberkante liegt auf der Rahmenlinie (−1 px), damit sie sie deckt
   und nicht daneben als zweite Linie erscheint. */
.karte::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(.62,.05,.2,1);
}

.karte:hover,
.karte:focus-within {
  border-color: var(--marine);
  box-shadow: 0 18px 40px -30px rgba(31,25,63,.65);
}
.karte:hover::before,
.karte:focus-within::before { transform: scaleX(1); }

/* Führt eine Karte zu einer eigenen Seite, ist die ganze Karte anklickbar:
   die Fläche des Verweises legt sich über die Karte. Der Verweis bleibt im
   Titel, damit Vorlesewerkzeuge den richtigen Namen ansagen. */
.karte-link { color: inherit; text-decoration: none; }
.karte-link::after { content: ""; position: absolute; inset: 0; }
.karte:hover .karte-link { color: var(--akzent); }
.karte-link:focus-visible { outline: none; }
.karte:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }

.karte-icon { color: var(--marine); transition: color 260ms var(--kurve); }
.karte:hover .karte-icon,
.karte:focus-within .karte-icon { color: var(--akzent); }

/* Hinweis-Box unter dem Raster: gedämpfte Fläche statt Umrandung, damit sie
   sich von den Karten absetzt. Die rote Oberkante steht hier fest — sie
   markiert den Zusatz, sie ist kein Hover-Effekt. */
.hinweis {
  position: relative;
  background: var(--grund-gedaempft);
  border-radius: var(--radius);
}
.hinweis::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--akzent);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Steht die Hinweis-Box auf der gedämpften Fläche, verschwindet sie darin —
   dann trägt sie Weiß und eine Haarlinie, damit sie als Karte lesbar bleibt. */
.hinweis--hell { background: var(--grund); border: 1px solid var(--linie); }

/* ==========================================================================
   BRANCHEN + EINSATZGEBIET
   ========================================================================== */

/* Typografische Zeilenliste statt weiterer Kacheln — die Seite hat ihr
   Kartenmuster schon bei den Leistungen. Die Haarlinie trennt wie ein
   Konstruktionsstrich; eine Nummer traegt die Liste nicht, die Reihenfolge
   sagt nichts aus. */
.branchen-zeile {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linie);
}
.branchen-zeile:first-child { border-top: 1px solid var(--linie); }

/* ==========================================================================
   VDSI-PLAKETTE
   --------------------------------------------------------------------------
   Die Mitgliedsgrafik des Verbands ist grün mit dunkler Beschriftung auf
   transparentem Grund. Sie steht IMMER frei — kein Feld, kein Rahmen, kein
   Kasten. Auf dunklen Flächen kommt die helle Fassung der Datei zum Zug
   (weisse Beschriftung, aufgehelltes Verbandsgrün); der weiche Schatten
   trägt sie über die hellen Stellen eines Fotos, ohne eine Kante zu setzen.
   ========================================================================== */
.vdsi { display: inline-block; }
.vdsi--hell img {
  filter: drop-shadow(0 1px 2px rgba(20, 16, 44, 0.55))
          drop-shadow(0 6px 22px rgba(20, 16, 44, 0.75));
}

/* Städte des Einsatzgebiets — schlichte Marken, keine Knöpfe: sie sind
   Information, nicht klickbar. */
.stadt-chip {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  font-size: 15px;
  color: var(--text);
}
#gebiet-staedte li { list-style: none; }

/* Städte mit eigener Seite sind Verweise. Der Unterschied zeigt sich beim
   Überfahren, nicht im Ruhezustand — eine Reihe aus halb blassen und halb
   kräftigen Marken sähe aus, als wäre die Hälfte kaputt. */
a.stadt-chip { text-decoration: none; }
.stadt-chip--link {
  transition: border-color 220ms var(--kurve), color 220ms var(--kurve);
}
.stadt-chip--link:hover,
.stadt-chip--link:focus-visible {
  border-color: var(--marine);
  color: var(--marine);
  outline: none;
}
.stadt-chip--link:focus-visible { box-shadow: 0 0 0 3px rgba(31, 25, 63, .12); }

/* ==========================================================================
   FORMULARFELDER
   --------------------------------------------------------------------------
   Dieselbe Linienlogik wie die Karten — Haarlinie ringsum, beim Tippen
   wandert sie auf Marine, der Rahmen bleibt ruhig. Höhe großzügig, damit
   sich das auf dem Handy gut treffen lässt.
   ========================================================================== */

.feld-titel {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--marine);
  margin-bottom: 0.45rem;
}
.feld,
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font-family: inherit;
  font-size: 16px;              /* unter 16px zoomt iOS beim Fokus hinein */
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color 200ms var(--kurve), box-shadow 200ms var(--kurve);
}
.feld::placeholder { color: #9A95AD; }
.feld:focus,
.entry-content input:focus,
.entry-content textarea:focus {
  outline: none;
  border-color: var(--marine);
  box-shadow: 0 0 0 3px rgba(31,25,63,.08);
}
textarea.feld { min-height: 150px; resize: vertical; }

/* ==========================================================================
   FUSSZEILEN-LINKS
   ========================================================================== */

/* Das Nav-Kästchen wäre hier zu laut. Stattdessen zieht eine rote Linie unter
   dem Wort auf — dieselbe Farbe, ruhigere Geste. */
.fuss-link {
  color: var(--text-leise);
  text-decoration: none;
  background-image: linear-gradient(var(--akzent), var(--akzent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 320ms var(--kurve), color 240ms var(--kurve);
}
.fuss-link:hover, .fuss-link:focus-visible {
  color: var(--marine);
  background-size: 100% 1.5px;
  outline: none;
}
.fuss-link--dunkel { color: #A9A4C0; background-image: linear-gradient(var(--rot-hell), var(--rot-hell)); }
.fuss-link--dunkel:hover, .fuss-link--dunkel:focus-visible { color: #fff; }

/* Das Seiten-Menü im Fuß kommt aus WordPress und bringt <li> mit — die
   Aufzählungspunkte gehören weg, die Verweise tragen die Fuß-Optik. */
#fuss .menu-item { list-style: none; }
#fuss .menu-item a {
  color: var(--text-leise);
  text-decoration: none;
  background-image: linear-gradient(var(--akzent), var(--akzent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 320ms var(--kurve), color 240ms var(--kurve);
}
#fuss .menu-item a:hover,
#fuss .menu-item a:focus-visible { color: var(--marine); background-size: 100% 1.5px; outline: none; }

@media (prefers-reduced-motion: reduce) {
  .karte, .karte::before, .karte-icon, .fuss-link, .btn, #fuss .menu-item a { transition: none; }
  .btn:active { transform: none; }
}

/* ==========================================================================
   KOPFZEILE
   ========================================================================== */

/* Untertitel unter der Wortmarke.
   Jeder Buchstabe ist ein eigenes <span> (cic_gesperrt()); die Buchstaben
   verteilen sich per Flex über die Breite der Wortmarke. So sitzt der erste
   bündig am C und der letzte am I, bei jedem Wort und jeder Schriftgröße.
   Die 2,65 % Einzug gleichen den transparenten Rand der Logo-Datei aus
   (11 von 416 px auf jeder Seite). */
.marke-block { display: inline-block; }
.logo-sub-wrap { margin-inline: 2.65%; }
.logo-sub {
  display: flex;
  justify-content: space-between;
  font-family: var(--schrift-marke);
  font-size: 10px;
  line-height: 1;
  color: #7B7595;
  white-space: nowrap;
}
.logo-sub > span { display: block; }
@media (min-width: 768px) { .logo-sub { font-size: 11px; } }

/* --- Nav-Link: das Kästchen zeichnet sich wie der Logo-Buchstabe "E" ---
   1. rote Haarlinie oben, zeichnet von links
   2. marineblaue Haarlinie unten, zeichnet von rechts
   3. danach schließen die beiden senkrechten Ticks das Rechteck             */
.nav-link {
  position: relative;
  display: inline-block;
  padding: 12px 14px;
  color: var(--text-leise);
  text-decoration: none;
  transition: color 240ms var(--kurve);
}
.nav-link .wort { position: relative; display: block; }

.nav-link::before,
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  transform: scaleX(0);
  transition: transform 400ms cubic-bezier(.62,.05,.2,1);
}
/* Die rote Oberkante trägt die Marke — 1,5 px würden bei 1× zu Grau verwaschen. */
.nav-link::before { top: 0; height: 2px; background: var(--akzent); transform-origin: left center; }
.nav-link::after  { bottom: 0; background: var(--marine); transform-origin: right center; }

.nav-link .wort::before,
.nav-link .wort::after {
  content: ""; position: absolute; top: -12px; bottom: -12px; width: 1.5px;
  background: var(--marine);
  transform: scaleY(0);
  transition: transform 260ms var(--kurve);
}
.nav-link .wort::before { left: -14px;  transform-origin: center top; }
.nav-link .wort::after  { right: -14px; transform-origin: center bottom; }

.nav-link:hover, .nav-link:focus-visible { color: var(--marine); outline: none; }
.nav-link:hover::before, .nav-link:focus-visible::before,
.nav-link:hover::after,  .nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link:hover .wort::before, .nav-link:focus-visible .wort::before,
.nav-link:hover .wort::after,  .nav-link:focus-visible .wort::after {
  transform: scaleY(1); transition-delay: 230ms;
}

/* Die aktuelle Seite trägt das Kästchen dauerhaft — so weiß man, wo man ist. */
.nav-link[aria-current="page"] { color: var(--marine); }
.nav-link[aria-current="page"]::before,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ==========================================================================
   MOBILE NAVIGATION — vollflächiges Overlay
   ========================================================================== */

#nav-mobil { visibility: hidden; }
#nav-mobil.ist-offen { visibility: visible; }

/* Ohne Skript existiert der Vorhang nicht — dann liegt das Menü einfach da. */
#nav-vorhang { display: none; }

/* Zeilenfenster: der Inhalt fährt aus dem eigenen Rahmen heraus ein. Flex
   statt Block, damit unter der Zeile kein Unterlängen-Spalt bleibt, durch den
   der versteckte Zustand durchblitzt. */
.nav-clip { display: flex; overflow: clip; }

/* Menü-Links: gleiche Grammatik wie im Kopf, nur in Menü-Größe. Die
   senkrechten Ticks sitzen deshalb auf den größeren Innenabständen. */
.nav-gross {
  padding: 14px 16px;
  font-size: clamp(24px, 7.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.nav-gross .wort::before,
.nav-gross .wort::after { top: -14px; bottom: -14px; }
.nav-gross .wort::before { left: -16px; }
.nav-gross .wort::after  { right: -16px; }

/* Schließen-Knopf: dasselbe Linien-Alphabet wie der Menü-Knopf im Kopf —
   zwei Haarlinien, die obere in Rot. */
.nav-schliessen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.nav-kreuz { position: relative; display: block; width: 22px; height: 22px; }
.nav-kreuz span {
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 1.5px;
}
.nav-kreuz span:first-child { transform: rotate(45deg); }
.nav-kreuz span:last-child  { transform: rotate(-45deg); }

/* Dieselbe Konstruktion auf dunklem Grund: Marine wäre dort unsichtbar, also
   helle Linien — und das hellere Rot, das auf Dunkel den Kontrast hält. */
.nav-link--dunkel { color: #E7E4EF; }
.nav-link--dunkel::before { background: var(--rot-hell); }
.nav-link--dunkel::after,
.nav-link--dunkel .wort::before,
.nav-link--dunkel .wort::after { background: rgba(255,255,255,.92); }
.nav-link--dunkel:hover, .nav-link--dunkel:focus-visible { color: #fff; }
.nav-link--dunkel[aria-current="page"] { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .nav-link, .nav-link::before, .nav-link::after,
  .nav-link .wort::before, .nav-link .wort::after { transition: none; }
}

/* ==========================================================================
   INHALTSSEITEN — was der Kunde im Editor schreibt
   --------------------------------------------------------------------------
   Der Block-Editor liefert nackte Überschriften, Absätze, Listen und Bilder.
   Ohne Regeln hier stünden sie in Browser-Grundeinstellung da und würden die
   sorgfältig gesetzte Startseite Lügen strafen. Die Werte folgen denselben
   Größen und Farben wie die gebauten Abschnitte.
   ========================================================================== */

.inhalt-breite { max-width: 1400px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .inhalt-breite { padding-inline: 2.5rem; } }

.entry-content { max-width: 74ch; font-size: 17px; line-height: 1.75; color: var(--text-leise); }

.entry-content > * + * { margin-top: 1.35em; }

.entry-content h2 {
  margin-top: 2.4em;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--marine);
}
.entry-content h3 {
  margin-top: 2em;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--marine);
}
.entry-content h4 { margin-top: 1.8em; font-size: 1.1rem; font-weight: 700; color: var(--marine); }

.entry-content strong { color: var(--marine); font-weight: 600; }

.entry-content a {
  color: var(--marine);
  text-decoration: none;
  background-image: linear-gradient(var(--akzent), var(--akzent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  transition: background-size 320ms var(--kurve);
}
.entry-content a:hover, .entry-content a:focus-visible { background-size: 0% 1.5px; outline: none; }

.entry-content ul, .entry-content ol { padding-left: 1.4rem; }
.entry-content ul { list-style: none; padding-left: 0; }
.entry-content ul li { position: relative; padding-left: 1.6rem; }
/* Ein kleines Quadrat statt eines Punktes: dieselbe Auszeichnung wie in den
   Listen der Startseite (.punkt). Es sitzt auf der x-Höhe der ersten Zeile. */
.entry-content ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.68em;
  width: 7px;
  height: 7px;
  background: var(--akzent);
}
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: 0.6em; }

.entry-content img { border-radius: var(--radius); height: auto; }

.entry-content blockquote {
  padding-left: 1.25rem;
  border-left: 2px solid var(--akzent);
  color: var(--marine);
  font-size: 1.1em;
}

.entry-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.entry-content th, .entry-content td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--linie); text-align: left; }
.entry-content th { color: var(--marine); font-weight: 600; }

/* Seitenkopf der Unterseiten: derselbe Kicker-Strich wie in den Abschnitten
   der Startseite, damit die Seiten zusammengehören. */
.seiten-kopf { padding-block: 4rem 2.5rem; }
@media (min-width: 768px) { .seiten-kopf { padding-block: 6rem 3.5rem; } }
.seiten-kopf h1 {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--marine);
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   ÜBERNOMMENE SEITEN
   --------------------------------------------------------------------------
   Die Texte der alten Website kommen mit drei Eigenheiten, die der Block-
   Editor nicht kennt: eine gesperrte Zwischenzeile über einem Abschnitt, ein
   breites Bildband quer durch die Textspalte und eine Zeile aus Ortsnamen.
   Sie tragen hier dieselbe Auszeichnung wie auf der Startseite.
   -------------------------------------------------------------------------- */

/* Die erste Überschrift darf nicht vom Seitenkopf weggeschoben werden. */
.entry-content > :first-child { margin-top: 0; }

/* Leitsatz. Auf den kurzen Seiten stand er im Alten als Überschrift da,
   obwohl er ein Satz ist — hier trägt er die Rolle, die er wirklich hat. */
.entry-content .lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--marine);
  font-weight: 500;
}

/* Zwischenzeile: derselbe Kicker-Strich wie in den Abschnitten der Startseite. */
.entry-content .kicker {
  margin-top: 1.2em;
  padding-left: 1rem;
  border-left: 2px solid var(--akzent);
  font-family: var(--schrift-marke);
  font-size: 12px;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-leise);
}
.entry-content h2 + .kicker,
.entry-content h3 + .kicker { margin-top: 1em; }

/* Merksatz: dieselbe Geste wie der Abbinder im Einsatzgebiet der Startseite.
   Ein ganzer Satz in gesperrten Versalien wäre über zwei Zeilen unlesbar. */
.entry-content .merksatz {
  padding-left: 1.25rem;
  border-left: 2px solid var(--linie);
  color: var(--text-leise);
}

/* Bildband. Es beginnt an der Textkante und läuft nach rechts über die
   Textspalte hinaus — dieselbe versetzte Anlage wie auf der Startseite.
   Innerhalb des 1400er Rahmens bleibt es, weil die Breite gedeckelt ist. */
.entry-content figure {
  margin-top: 2.6em;
  margin-bottom: 2.6em;
}
.entry-content figure.breit {
  width: min(1120px, calc(100vw - 2.5rem));
  max-width: none;
}
@media (min-width: 768px) {
  .entry-content figure.breit { width: min(1120px, calc(100vw - 5rem)); }
}
/* Im zweispaltigen Raster darf es nicht mehr ueber die Textspalte hinaus —
   dort steht der Randstreifen. Es nimmt dann die volle Spaltenbreite. */
.seiten-haupt .entry-content figure.breit,
.abschnitt-text figure.breit,
.kontakt-info .entry-content figure.breit { width: 100%; }
.entry-content figure.breit img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
/* Hochkantfotos werden nicht in ein Band gezwungen — beschnitten bliebe von
   einer Regalgasse nur der Boden. */
.entry-content figure.hoch { max-width: 460px; }
.entry-content figure.landkarte { max-width: 420px; }
.entry-content figure.landkarte img { border-radius: 0; }
.entry-content figcaption {
  margin-top: 0.7rem;
  font-size: 14px;
  color: var(--text-leise);
}

/* Ortszeile: die Städte der alten Seite standen als eine mit Strichen
   getrennte Zeile da. Als Marken sind sie lesbar statt Fließband. */
.entry-content .orte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-left: 0;
  list-style: none;
}
.entry-content .orte li { padding-left: 0; }
.entry-content .orte li::before { content: none; }
/* Die allgemeine Regel .entry-content li + li setzt jedem Listenpunkt ausser
   dem ersten einen oberen Abstand. In einer Flex-Reihe zieht dieser Abstand
   den Punkt nach unten UND macht ihn niedriger — der erste stand dadurch als
   einziger hoch und mit Text am oberen Rand. Hier muss er weg. */
.entry-content .orte li {
  display: flex;
  margin-top: 0;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  font-size: 15px;
  color: var(--text);
}
/* Führt eine Marke zu einer Seite, muss der Verweis die ganze Marke füllen —
   sonst trifft ein Daumen den Rand und nichts passiert. Der negative Rand
   holt das Polster der Marke zurück in den Verweis. */
.entry-content .orte a {
  display: flex;
  align-items: center;
  margin: -0.45rem -0.85rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius);
  color: inherit;
  background-image: none;
  text-decoration: none;
  transition: background-color 220ms var(--kurve), color 220ms var(--kurve);
}
.entry-content .orte a:hover,
.entry-content .orte a:focus-visible {
  background-color: var(--grund-gedaempft);
  color: var(--marine);
  outline: none;
}

/* Knopf aus dem Block-Editor: dieselbe Gestalt wie überall sonst. */
.entry-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
.entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  background: var(--akzent);
  background-image: none;
  color: var(--akzent-kontrast);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: filter var(--dauer) var(--kurve);
}
.entry-content .wp-block-button__link:hover { filter: brightness(0.9); background-size: 0 0; }

/* --------------------------------------------------------------------------
   BROTKRUME
   --------------------------------------------------------------------------
   Sie steht an der Stelle des Kickers und trägt dessen Geste — dieselbe rote
   Haarlinie links, dieselbe gesperrte Schrift. Nur ist sie anklickbar und
   nennt den Weg. Die Sperrung ist enger als beim Kicker: der Pfad wird sonst
   auf dem Handy drei Zeilen lang.
   -------------------------------------------------------------------------- */
.brotkrume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  padding-left: 1rem;
  border-left: 2px solid var(--akzent);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
}
@media (min-width: 768px) { .brotkrume { font-size: 12px; } }
.brotkrume a {
  color: var(--text-leise);
  text-decoration: none;
  background-image: linear-gradient(var(--akzent), var(--akzent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 320ms var(--kurve), color 240ms var(--kurve);
}
.brotkrume a:hover, .brotkrume a:focus-visible {
  color: var(--marine);
  background-size: 100% 1.5px;
  outline: none;
}
.brotkrume [aria-current="page"] { color: var(--marine); }
.brotkrume-trenner { color: var(--linie); }

/* Im Hero der Landeseiten liegt die Brotkrume auf Marine: dieselben Töne wie
   der Kicker dort (helles Grau, rote Haarlinie), die aktuelle Seite in Weiß.
   Den Abstand nach unten gibt dort die Hülle vor, nicht die Brotkrume. */
.brotkrume--dunkel { margin-bottom: 0; color: #A9A4C0; border-left-color: var(--rot-hell); }
.brotkrume--dunkel a { color: #A9A4C0; background-image: linear-gradient(var(--rot-hell), var(--rot-hell)); }
.brotkrume--dunkel a:hover, .brotkrume--dunkel a:focus-visible { color: #fff; }
.brotkrume--dunkel [aria-current="page"] { color: #fff; }
.brotkrume--dunkel .brotkrume-trenner { color: rgba(255,255,255,.3); }

/* --------------------------------------------------------------------------
   QUERVERWEISE — die anderen Leistungen im selben Ort
   --------------------------------------------------------------------------
   Zwei Kacheln in der Grammatik der Leistungs-Karten (Haarlinie, rote Kante
   beim Überfahren), damit sie nicht wie ein angeklebter Link-Kasten wirken.
   -------------------------------------------------------------------------- */
.quer {
  max-width: 74ch;
  margin-top: 3.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--linie);
}
.quer-kicker {
  padding-left: 1rem;
  border-left: 2px solid var(--akzent);
  font-size: 11px;
  color: var(--text-leise);
}
.quer-liste { display: grid; gap: 0.85rem; margin-top: 1.4rem; }
@media (min-width: 640px) { .quer-liste { grid-template-columns: 1fr 1fr; } }
.quer-liste li { list-style: none; }
.quer-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.15rem;
  text-decoration: none;
}
.quer-leistung { font-size: 16px; font-weight: 600; color: var(--marine); }
.quer-ort { font-size: 14px; color: var(--text-leise); }

/* Ortsliste auf einer Übersichtsseite — sie steht im Inhalt und erbt dessen
   Marken-Optik, braucht aber die Trennlinie darüber. */
.hub-orte { margin-top: 3.5rem; padding-top: 2.25rem; border-top: 1px solid var(--linie); }
/* Der Abstandsregel von .entry-content gilt nur für ihre direkten Kinder —
   innerhalb des Abschnitts muss sie wiederholt werden. */
.hub-orte > * + * { margin-top: 1.35em; }
.entry-content .hub-orte > :first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   GESTALT DER UNTERSEITEN
   --------------------------------------------------------------------------
   Der Block-Editor liefert einen flachen Strom aus Ueberschrift und Absatz.
   Auf dem Handy ist genau das richtig: eine Spalte, von oben nach unten. Auf
   einem 1440er Bildschirm stand derselbe Strom als schmales Band links, die
   rechte Haelfte blieb leer.

   Deshalb greift ab 1100 px eine zweite Spalte. Welche, entscheidet
   inc/seitenlayout.php — der Inhalt bleibt unangetastet.
   -------------------------------------------------------------------------- */

.seiten-koerper { padding-bottom: 5rem; }
@media (min-width: 768px) { .seiten-koerper { padding-bottom: 6.5rem; } }

/* Rechtsseiten: eine ruhige Spalte in der Mitte. Impressum und Datenschutz
   bekommen keinen Randstreifen — dort waere jeder Verweis Werbung im
   Kleingedruckten. */
.seiten-schmal .entry-content { margin-inline: auto; }

/* -------- Text links, Randstreifen rechts ------------------------------- */
@media (min-width: 1100px) {
  .seiten-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    column-gap: 4.5rem;
    align-items: start;
  }

  /* Die Textspalte darf jetzt breiter werden als das Lesemass. Ueberschriften,
     Bilder, Ortslisten und Querverweise fuellen sie ganz; nur der Fliesstext
     bleibt bei 74 Zeichen, weil laengere Zeilen den Blick verlieren lassen. */
  .seiten-haupt .entry-content { max-width: none; }
  .seiten-haupt .entry-content > p,
  .seiten-haupt .entry-content > ul:not(.orte),
  .seiten-haupt .entry-content > ol,
  .seiten-haupt .entry-content > blockquote,
  .seiten-haupt .hub-orte > p { max-width: 74ch; }

  /* Der Streifen laeuft mit: wer in der Mitte eines langen Textes zum Hoerer
     greifen will, soll die Nummer nicht suchen muessen. 6.5rem halten ihn
     unter dem mitlaufenden Seitenkopf. */
  .seiten-rand {
    position: sticky;
    top: 6.5rem;
  }
}

.seiten-rand > * + * { margin-top: 1.5rem; }

.rand-karte { padding: 1.6rem 1.5rem; }
.rand-kicker {
  padding-left: 0.9rem;
  border-left: 2px solid var(--akzent);
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-leise);
}
.rand-zeile { margin-top: 0.9rem; }
.rand-tel {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--marine);
  text-decoration: none;
}
.rand-tel:hover, .rand-tel:focus-visible { color: var(--akzent); outline: none; }
.rand-mail { font-size: 15px; word-break: break-word; }
.rand-text {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-leise);
}
.rand-verweis { font-size: 14px; font-weight: 600; }

/* Im Randstreifen stehen die Querverweise untereinander: zwei Kacheln
   nebeneinander waeren dort je 9rem breit und der Ortsname bräche um. */
.seiten-rand .quer {
  max-width: none;
  margin-top: 0;
  padding-top: 1.75rem;
}
@media (min-width: 640px) {
  .seiten-rand .quer-liste { grid-template-columns: 1fr; }
}

/* -------- Einleitung, darunter Karten ----------------------------------- */
.seiten-einleitung { margin-bottom: 3.5rem; }

.karten-raster { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .karten-raster { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

.abschnitt-karte { padding: 2rem 1.9rem; }
@media (min-width: 900px) { .abschnitt-karte { padding: 2.4rem 2.3rem; } }

/* Die Ueberschrift der Karte ist nicht die Ueberschrift der Seite: sie steht
   in einem Kasten von halber Breite und traegt deshalb ein ruhigeres Mass. */
.abschnitt-titel {
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--marine);
}
.abschnitt-text { max-width: none; margin-top: 1rem; }
.abschnitt-text > :first-child { margin-top: 0; }
.abschnitt-text h3 { margin-top: 1.6em; font-size: 1.05rem; }

/* -------- Kontakt: Erreichbarkeit links, Formular rechts ---------------- */
.kontakt-raster { display: grid; gap: 2.5rem; }
@media (min-width: 1100px) {
  .kontakt-raster {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: start;
  }
  /* Ohne Formular gibt es nichts zu stellen — dann bleibt es eine Spalte,
     statt eine halbe Seite leer zu lassen. */
  .kontakt-raster--einspaltig { grid-template-columns: minmax(0, 74ch); }
}

.kontakt-info .entry-content { max-width: none; }

/* Telefonnummer und E-Mail stehen im Text als gewoehnlicher Absatz unter
   einer gesperrten Zeile. Hier sind sie die Hauptsache der Spalte und
   bekommen das Gewicht, das ihnen zusteht. */
.kontakt-info .entry-content .kicker + p {
  margin-top: 0.6rem;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
}
.kontakt-info .entry-content .kicker + p a {
  color: var(--marine);
  background-size: 0 1.5px;
}
.kontakt-info .entry-content .kicker + p a:hover,
.kontakt-info .entry-content .kicker + p a:focus-visible {
  color: var(--akzent);
  background-size: 100% 1.5px;
}

.kontakt-adresse { margin-top: 2.5rem; padding: 1.6rem 1.5rem; }
.adresse-zeilen {
  margin-top: 0.9rem;
  font-style: normal;
  font-size: 16px;
  line-height: 1.7;
  color: var(--marine);
  font-weight: 600;
}

.kontakt-formular { padding: 1.75rem 1.5rem 2rem; }
@media (min-width: 768px) { .kontakt-formular { padding: 2.5rem 2.5rem 2.75rem; } }
.kontakt-formular .entry-content { max-width: none; }
/* Im Kasten steht die Ueberschrift oben — der grosse Abstand der Textspalte
   wuerde hier eine leere Zeile ueber dem Formular erzeugen. */
.kontakt-formular .entry-content > :first-child { margin-top: 0; }
.kontakt-formular .entry-content h2 { margin-top: 0; }

/* --------------------------------------------------------------------------
   ABBINDER DER UNTERSEITEN
   -------------------------------------------------------------------------- */
.seiten-cta { background: var(--marine-tief); }

/* --------------------------------------------------------------------------
   KONTAKTFORMULAR (Contact Form 7)
   --------------------------------------------------------------------------
   Das Erweiterungspaket bringt eigene Felder mit; hier bekommen sie dieselbe
   Linienlogik wie die übrigen Formularfelder der Seite.
   -------------------------------------------------------------------------- */
.wpcf7 .felder { display: grid; gap: 1rem; }
@media (min-width: 640px) { .wpcf7 .felder { grid-template-columns: 1fr 1fr; } }
.wpcf7 .felder .voll { grid-column: 1 / -1; }

.wpcf7 label { display: block; font-size: 14px; font-weight: 600; color: var(--marine); }
.wpcf7 label .pflicht { color: var(--akzent); }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 textarea {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.8rem 0.95rem;
  font-family: inherit;
  font-size: 16px;              /* unter 16px zoomt iOS beim Fokus hinein */
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color 200ms var(--kurve), box-shadow 200ms var(--kurve);
}
.wpcf7 input:focus, .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--marine);
  box-shadow: 0 0 0 3px rgba(31, 25, 63, .08);
}
.wpcf7 textarea { min-height: 170px; resize: vertical; }

.wpcf7 input[type="submit"] {
  margin-top: 0.5rem;
  padding: 0.95rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--akzent);
  color: var(--akzent-kontrast);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--dauer) var(--kurve);
}
.wpcf7 input[type="submit"]:hover { filter: brightness(0.9); }
.wpcf7 input[type="submit"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.wpcf7 .formular-hinweis { font-size: 14px; line-height: 1.6; color: var(--text-leise); }

/* Meldungen des Erweiterungspakets — kein Rahmenkasten, eine Kante genügt. */
.wpcf7 form .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border: 0;
  border-left: 2px solid var(--linie);
  font-size: 15px;
  color: var(--text-leise);
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: #1B7F4B; color: var(--marine); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: var(--akzent); color: var(--marine); }
.wpcf7-not-valid-tip { margin-top: 0.35rem; font-size: 14px; color: var(--akzent); }
.wpcf7 .wpcf7-not-valid { border-color: var(--akzent); }
/* Das Feld gegen Werbeeinsendungen darf niemand sehen. */
.wpcf7 .honigtopf { position: absolute; left: -9999px; }

/* ==========================================================================
   AUFZÄHLUNGSPUNKTE — das Quadrat
   --------------------------------------------------------------------------
   Ein kleines rotes Quadrat vor jedem Punkt, auf hellem wie auf dunklem
   Grund (dort das hellere Rot). Gleiche Geste wie das rote Rechteck im E
   des Logos.
   ========================================================================== */
.punkt { position: relative; padding-left: 1.35rem; list-style: none; }
.punkt::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--akzent);
}
.punkt--hell::before { background: var(--rot-hell); }

/* ==========================================================================
   ABLAUF — der rote Faden als Welle (Startseite)
   --------------------------------------------------------------------------
   Aufbau siehe cic_ablauf() in inc/bausteine.php. Ab 1024 px: eine
   Zeichenfläche im Verhältnis 1200:560, darin der SVG-Pfad; die Stationen
   liegen per --x/--y (Prozent) auf der Kurve, ihr Text steht oben bzw.
   unten. Darunter: senkrechte Reihe mit gerader Linie.
   ========================================================================== */
.ablauf {
  --knoten: 72px;           /* Durchmesser des Kreises */
  --faden-staerke: 3px;
  position: relative;
  margin-top: 3.5rem;
}
.ablauf-welle { display: none; }

.ablauf-stationen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.25rem 0;
}
.ablauf-schritt {
  position: relative;
  padding-left: calc(var(--knoten) * 0.75 + 1.25rem);
  min-height: calc(var(--knoten) * 0.75);
}
.ablauf-knoten {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--knoten) * 0.75);
  height: calc(var(--knoten) * 0.75);
  border-radius: 50%;
  background: var(--marine);
  color: #fff;
  box-shadow: 0 0 0 4px var(--grund);   /* Luft zwischen Kreis und Linie */
}
.ablauf-knoten svg { width: 1.5rem; height: 1.5rem; }
.ablauf-nummer {
  display: block;
  font-size: 11px;
  color: var(--akzent);
  margin-top: 0.4rem;
}
.ablauf-titel {
  margin-top: 0.25rem;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--marine);
}
.ablauf-text {
  margin-top: 0.4rem;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-leise);
}

/* Die senkrechte Linie auf schmalen Schirmen: ein Stück je Station, das
   von Knotenmitte zu Knotenmitte reicht (über die Lücke hinweg). */
.ablauf-schritt .faden {
  position: absolute;
  left: calc(var(--knoten) * 0.375 - var(--faden-staerke) / 2);
  top: calc(var(--knoten) * 0.375);
  bottom: -2.25rem;
  width: var(--faden-staerke);
  background: var(--akzent);
  transform-origin: center top;
}
.ablauf-schritt:last-child .faden { display: none; }

@media (min-width: 1024px) {
  .ablauf {
    aspect-ratio: 1200 / 500;
    margin-top: 2.5rem;
    /* Die Zeichnung beginnt und endet an der Mitte des ersten bzw. letzten
       Knotens; der halbe Knoten Einzug bringt die Kreise bündig an die
       Inhaltskante. */
    margin-inline: calc(var(--knoten) / 2);
  }
  .ablauf-welle {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .ablauf-welle path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  /* Eine blasse Spur unter der roten Linie: zeigt den ganzen Weg, bevor
     die Linie ihn beim Scrollen nachzeichnet. */
  .ablauf-welle-schatten { stroke: var(--linie); stroke-width: 1.5px; stroke-dasharray: 4 6; }
  .ablauf-welle-linie    { stroke: var(--akzent); stroke-width: var(--faden-staerke); }

  .ablauf-stationen {
    position: absolute;
    inset: 0;
    display: block;
  }
  .ablauf-schritt {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 0;
    height: 0;
    padding: 0;
    min-height: 0;
  }
  .ablauf-schritt .faden { display: none; }
  .ablauf-knoten {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--knoten);
    height: var(--knoten);
  }
  .ablauf-knoten svg { width: 1.75rem; height: 1.75rem; }

  /* Der Text hängt am Knoten: bei den oberen Stationen darüber, bei den
     unteren darunter, immer mittig zur Station. */
  .ablauf-textblock {
    position: absolute;
    left: 50%;
    width: 220px;
    transform: translateX(-50%);
    text-align: center;
  }
  .ist-oben .ablauf-textblock  { bottom: calc(var(--knoten) / 2 + 14px); }
  .ist-unten .ablauf-textblock { top: calc(var(--knoten) / 2 + 14px); }
  .ablauf-nummer { margin-top: 0; }
  /* Am Rand darf der Text nicht über die Inhaltskante hinaus: die erste
     Station richtet ihren Text an der linken Kante des Kreises aus, die
     letzte an der rechten. */
  .ist-anfang .ablauf-textblock {
    left: calc(-1 * var(--knoten) / 2);
    transform: none;
    text-align: left;
  }
  .ist-ende .ablauf-textblock {
    left: auto;
    right: calc(-1 * var(--knoten) / 2);
    transform: none;
    text-align: right;
  }
  .ablauf-titel { font-size: 16px; }
  .ablauf-text  { font-size: 14px; }
}
@media (min-width: 1280px) {
  .ablauf-textblock { width: 260px; }
  .ablauf-titel { font-size: 17px; }
  .ablauf-text  { font-size: 15px; }
}

/* ==========================================================================
   BEWERTUNGEN
   ========================================================================== */
.bewertung { display: flex; flex-direction: column; }
.bewertung blockquote { flex: 1; margin: 0; }
.sterne { display: inline-flex; gap: 3px; }
.stern {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--marine);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.stern--voll { fill: var(--akzent); stroke: var(--akzent); }

/* ==========================================================================
   FRAGEN UND ANTWORTEN
   --------------------------------------------------------------------------
   <details>-Liste in der Linien-Grammatik der Seite: Haarlinie zwischen den
   Fragen, beim Aufklappen färbt sich die Frage marine, das Pluszeichen wird
   zum Minus. Kein Skript nötig.
   ========================================================================== */
.faq { border-top: 1px solid var(--linie); }
.faq-liste { border-top: 1px solid var(--linie); }
.faq-eintrag { border-bottom: 1px solid var(--linie); }
.faq-frage {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--marine);
  transition: color var(--dauer) var(--kurve);
}
.faq-frage::-webkit-details-marker { display: none; }
.faq-frage:hover { color: var(--akzent); }
.faq-frage:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.faq-zeichen {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
.faq-zeichen::before,
.faq-zeichen::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--akzent);
  transform: translate(-50%, -50%);
  transition: transform 260ms var(--kurve);
}
.faq-zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-eintrag[open] .faq-zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-antwort {
  max-width: 62ch;
  padding: 0 3rem 1.5rem 0;
  font-size: 16px;
}
.faq-antwort > * + * { margin-top: 1em; }
@media (min-width: 768px) { .faq-frage { font-size: 18px; padding: 1.5rem 0; } }

/* ==========================================================================
   BÄNDER DER ORTS- UND LEISTUNGSSEITEN (inc/landeseite.php)
   --------------------------------------------------------------------------
   Dieselbe Grammatik wie die Startseite: Abschnitte auf wechselndem Grund,
   daneben ein echtes Foto. Das Foto steht oben in seiner Spalte, bündig mit
   dem ersten Abschnitt der anderen; unter dem Foto läuft der Text weiter,
   damit neben drei Abschnitten nicht eine halbe Spalte leer bleibt (welche
   Abschnitte unter das Foto rutschen, entscheidet cic_band_verteilen()).
   Steht das Foto allein in seiner Spalte, bleibt es beim Scrollen stehen.
   Auf dem Handy steht alles untereinander, das Foto zum Schluss.
   ========================================================================== */
.band { padding-block: 4rem; }
@media (min-width: 768px) { .band { padding-block: 6rem; } }
.band--dunkel { background: var(--marine-tief); }
.band--gedaempft { background: var(--grund-gedaempft); }

.band-raster { display: grid; gap: 2.5rem; }
/* Unter lg lösen sich die Spalten auf: jeder Abschnitt und das Foto sind
   eigene Rasterzeilen, das Foto rückt ans Ende. */
.band-raster--spalten { gap: 0; }
.band-spalte { display: contents; }
.band-raster--spalten .band-foto { order: 1; margin-top: 2.5rem; }
/* Das Füllfoto gibt es nur im Zweispalter; untereinander wäre es ein zweites
   Foto ohne Aufgabe. */
.band-foto--fuell { display: none; }
@media (min-width: 1024px) {
  .band-raster {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 4rem;
    align-items: start;
  }
  .band--foto-links .band-raster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .band-raster--spalten { gap: 4rem; }
  .band-spalte { display: block; min-width: 0; }
  .band-raster--spalten .band-foto { order: 0; margin-top: 0; }
  /* Der erste Abschnitt einer Spalte beginnt oben bündig mit dem Foto
     daneben: keine Trennlinie, kein Abstand. Der Abschnitt unter dem Foto
     bekommt Abstand statt Linie. */
  .band-spalte > .band-abschnitt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .band-foto + .band-abschnitt { margin-top: 2.5rem; padding-top: 0; border-top: 0; }
  .band-foto:only-child, .band-karte { position: sticky; top: 104px; }
  /* Füllfoto: die Spalte ohne Foto streckt sich auf die Höhe der anderen,
     das Foto am Ende nimmt genau den Rest ein (Ausschnitt per object-fit). */
  .band-spalte--fuell { align-self: stretch; display: flex; flex-direction: column; }
  /* Doppelt gesetzt, weil .band-raster--spalten .band-foto oben den Abstand auf null stellt. */
  .band-raster--spalten .band-foto--fuell { display: block; flex: 1 1 auto; aspect-ratio: auto; min-height: 260px; margin-top: 3rem; }
}

.band-foto {
  position: relative;
  overflow: clip;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--marine-tief);
}
@media (min-width: 1024px) { .band-foto { aspect-ratio: 4 / 5; } }
.band-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.band-karte { display: flex; justify-content: center; }
@media (min-width: 1024px) { .band-karte { justify-content: flex-start; } }
.band-karte figure { margin: 0; max-width: 420px; }
.band-karte img { width: 100%; height: auto; }

.band-abschnitt--folgt,
.band-abschnitt + .band-abschnitt {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--linie);
}
.band--dunkel .band-abschnitt--folgt,
.band--dunkel .band-abschnitt + .band-abschnitt { border-top-color: rgba(255,255,255,.14); }

.band-titel {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--marine);
  max-width: 22ch;
}
.band--dunkel .band-titel { color: #fff; }
.band-text { margin-top: 1.4rem; max-width: 62ch; }
.band-text > :first-child { margin-top: 0; }

/* Der Editor-Inhalt auf dunklem Grund */
.band--dunkel .entry-content { color: #CFCBDD; }
.band--dunkel .entry-content h2,
.band--dunkel .entry-content h3,
.band--dunkel .entry-content h4,
.band--dunkel .entry-content strong,
.band--dunkel .entry-content .lead { color: #fff; }
.band--dunkel .entry-content .kicker { color: #A9A4C0; border-left-color: var(--rot-hell); }
.band--dunkel .entry-content .merksatz { color: #CFCBDD; border-left-color: rgba(255,255,255,.3); }
.band--dunkel .entry-content ul li::before { background: var(--rot-hell); }
.band--dunkel .entry-content a { color: #fff; background-image: linear-gradient(var(--rot-hell), var(--rot-hell)); }
.band--dunkel .entry-content .orte li { background: transparent; border-color: rgba(255,255,255,.28); color: #E7E4EF; }
.band--dunkel .entry-content .orte a:hover,
.band--dunkel .entry-content .orte a:focus-visible { background-color: rgba(255,255,255,.08); color: #fff; }
.band--dunkel .entry-content .wp-block-button__link { background: var(--rot-hell); }

/* Ortsliste und Querverweise in Bändern: ohne die Trennlinie, die sie im
   Textfluss brauchten. */
.band-orte .hub-orte { margin-top: 0; padding-top: 0; border-top: 0; }
.band--quer .quer { max-width: none; margin-top: 0; }