/*
 * Styles fuer die aus dem Vault uebernommenen Content-Elemente.
 * Bewusst zurueckhaltend: das Aussehen kommt aus dem Theme, hier stehen nur
 * die Bausteine, die das Theme nicht kennt (Callouts, Modul-Container,
 * Backend-Hinweise). Farben kommen ueber currentColor und color-mix, damit sie
 * sich an die Theme-Palette anpassen statt eine eigene zu setzen.
 */

/* ------------------------------------------------------------- Callouts */

.frn-callout {
  --frn-callout-ton: currentColor;
  border-left: 4px solid var(--frn-callout-ton);
  background: color-mix(in srgb, var(--frn-callout-ton) 6%, transparent);
  padding: 1rem 1.25rem;
  margin-block: 1.5rem;
  border-radius: 4px;
}

.frn-callout.is-tip {
  --frn-callout-ton: #0f7d67;
}

.frn-callout.is-warning {
  --frn-callout-ton: #b4530a;
}

.frn-callout.is-info {
  --frn-callout-ton: #1470cc;
}

.frn-callout__title {
  margin-block: 0 0.5rem;
  font-size: 1rem;
  color: var(--frn-callout-ton);
}

.frn-callout > :last-child {
  margin-bottom: 0;
}

/* Im dunklen Modus tragen die Akzentfarben zu wenig Kontrast. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .frn-callout.is-tip {
    --frn-callout-ton: #3fb99b;
  }
  :root:not([data-theme='light']) .frn-callout.is-warning {
    --frn-callout-ton: #e8964a;
  }
  :root:not([data-theme='light']) .frn-callout.is-info {
    --frn-callout-ton: #5aa9f0;
  }
}

:root[data-theme='dark'] .frn-callout.is-tip {
  --frn-callout-ton: #3fb99b;
}
:root[data-theme='dark'] .frn-callout.is-warning {
  --frn-callout-ton: #e8964a;
}
:root[data-theme='dark'] .frn-callout.is-info {
  --frn-callout-ton: #5aa9f0;
}

/* --------------------------------------------------------------- Module */

.frn-modul {
  display: block;
  margin-block: 2rem;
}

/* Vor dem Einhaengen des Shadow-Baums ist der Host leer; die Mindesthoehe
   verhindert, dass die Seite beim Nachruecken springt. */
.frn-modul:not([data-frn-mounted]) {
  min-height: 320px;
}

/* ------------------------------------------------------------------ SVG */

.frn-svg {
  margin-block: 1.5rem;
}

.frn-svg__img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------- Hinweise im Backend */

/* Nur fuer angemeldete Bearbeiter sichtbar, siehe Plugin. */
.frn-platzhalter,
.frn-hinweis {
  display: block;
  border: 1px dashed currentColor;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-block: 1.5rem;
  font-size: 0.875rem;
  opacity: 0.75;
}

/* Offene Lead-CTAs, die noch auf href="#" zeigen. */
.frn-cta-todo {
  text-decoration: underline dotted;
}

/* ------------------------------------------------------- Leserhythmus */

/*
 * Die Lesespalte selbst steht im Theme-Builder (680 Pixel, rund 78 Zeichen je
 * Zeile). Hier steht nur, was Divi im Inhaltsbereich nicht regelt: der Abstand
 * zwischen den Bloecken und der Vorlauf vor Zwischenueberschriften.
 *
 * Gemessen wurde vorher an einer Stadtseite: 131 Zeichen je Zeile, 24 Absaetze
 * am Stueck, kein einziges Bild. Die Abstaende unten sind der zweite Teil der
 * Antwort darauf, die Bauteile weiter unten der dritte.
 */

.et_pb_post_content > p {
  padding-bottom: 1.15em;
}

/* Vor einer Zwischenueberschrift braucht das Auge eine Pause, danach nicht. */
.et_pb_post_content > h2 {
  margin-top: 2.4em;
  margin-bottom: 0.5em;
}

.et_pb_post_content > h3 {
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}

.et_pb_post_content > :first-child {
  margin-top: 0;
}

/*
 * Der erste Absatz fasst die Seite zusammen und darf das zeigen. Groesser,
 * etwas luftiger, sonst unveraendert. Kein eigener Farbwert, damit die
 * Theme-Palette die Wahrheit bleibt.
 */
.et_pb_post_content > p:first-of-type {
  font-size: 1.18em;
  line-height: 1.6;
  padding-bottom: 1.4em;
}

/* ----------------------------------------------- Ausbruch aus der Spalte */

/*
 * Rechner, Kalender und Grafiken wirken in 680 Pixeln gedrungen. Sie duerfen
 * breiter werden als der Text, bleiben mittig und halten zum Fensterrand
 * Abstand. Auf schmalen Geraeten faellt der Ausbruch von selbst auf null
 * zurueck, weil die Fensterbreite dann die kleinere der beiden Groessen ist.
 */
.frn-breit,
.frn-modul,
.frn-svg,
.frn-foto {
  --frn-breit: 900px;
  width: min(var(--frn-breit), 100vw - 3rem);
  max-width: none;
  margin-inline: calc(50% - min(var(--frn-breit) / 2, 50vw - 1.5rem));
}

/* Die Illustrationen tragen weniger Detail und brauchen weniger Breite. */
.frn-svg {
  --frn-breit: 820px;
}

/*
 * Fotos bleiben bei den vollen 900 Pixeln. Anders als die Illustrationen tragen
 * sie Details, die bei 820 Pixeln nichts gewinnen wuerden, und sie stehen auf
 * den Stadtseiten als einziges Bild direkt unter dem Lead.
 *
 * `display: block` am Bild entfernt den Zeilenabstand unter dem Inline-Element,
 * der sonst als schmaler Streifen unter dem Foto stehen bleibt. Die festen
 * `width`- und `height`-Attribute aus `wp_get_attachment_image` bleiben dabei
 * wirksam: `aspect-ratio: auto` laesst den Browser das Verhaeltnis daraus
 * ableiten, damit der Platz schon vor dem Laden steht und nichts springt.
 */
.frn-foto {
  margin-block: 1.8rem;
}

.frn-foto__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: 8px;
}

/* ----------------------------------------------------------------- FAQ */

/*
 * Die Fragen liegen als <details>, erzeugt vom Filter im Plugin. Zugeklappt
 * wird aus einem Block von fuenf Antwortabsaetzen eine Liste aus fuenf Zeilen,
 * die man ueberfliegen kann. Das ist der groesste einzelne Hebel gegen die
 * Textwueste: 556 solcher Absaetze auf 109 Seiten.
 */

.frn-faq {
  border-block-end: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.frn-faq:first-of-type {
  border-block-start: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.frn-faq__frage {
  position: relative;
  display: block;
  cursor: pointer;
  list-style: none;
  padding: 0.95rem 2.4rem 0.95rem 0;
  font-weight: 600;
  color: var(--gcid-heading-color, inherit);
}

/* Safari zeichnet sonst zusaetzlich sein eigenes Dreieck. */
.frn-faq__frage::-webkit-details-marker {
  display: none;
}

.frn-faq__frage::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--gcid-primary-color, currentColor);
  border-bottom: 2px solid var(--gcid-primary-color, currentColor);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.frn-faq[open] .frn-faq__frage::after {
  transform: translateY(-20%) rotate(-135deg);
}

.frn-faq__frage:hover {
  color: var(--gcid-primary-color, inherit);
}

.frn-faq__antwort {
  padding-block-end: 1.1rem;
}

.frn-faq__antwort > p {
  padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .frn-faq__frage::after {
    transition: none;
  }
}

/* ------------------------------------------------------------- Listen */

/*
 * Zwei Behaelter, weil der Inhalt an zwei Stellen entsteht: .et_pb_post_content
 * auf den 116 Seiten aus dem Migrator, .et_pb_text_inner in den Textmodulen der
 * Startseite. Der Lead-Absatz weiter oben gilt bewusst nur fuer den ersten,
 * sonst waere auf der Startseite jeder Abschnittsanfang vergroessert.
 *
 * 520 Aufzaehlungspunkte im Bestand beginnen mit einem fetten Schlagwort.
 * Auf eine eigene Zeile gestellt wird daraus eine ueberfliegbare Liste statt
 * eines Absatzes mit Punkten davor.
 */

.et_pb_post_content li > strong:first-child,
.et_pb_text_inner li > strong:first-child {
  display: block;
  color: var(--gcid-heading-color, inherit);
}

.et_pb_post_content > ul,
.et_pb_post_content > ol,
.et_pb_text_inner > ul,
.et_pb_text_inner > ol {
  list-style: none;
  padding-left: 0;
  margin-block: 1.6rem;
}

.et_pb_post_content > ul > li,
.et_pb_text_inner > ul > li {
  position: relative;
  padding-left: 1.6rem;
  margin-block-end: 0.85rem;
}

.et_pb_post_content > ul > li::before,
.et_pb_text_inner > ul > li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.58em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--gcid-primary-color, currentColor);
}

/* Nummerierte Listen sind fast immer Arbeitsschritte und bekommen eine Ziffer. */
.et_pb_post_content > ol,
.et_pb_text_inner > ol {
  counter-reset: frn-schritt;
}

.et_pb_post_content > ol > li,
.et_pb_text_inner > ol > li {
  counter-increment: frn-schritt;
  position: relative;
  padding-left: 3.1rem;
  min-height: 2.2rem;
  margin-block-end: 1.1rem;
}

.et_pb_post_content > ol > li::before,
.et_pb_text_inner > ol > li::before {
  content: counter(frn-schritt);
  position: absolute;
  left: 0;
  top: -0.05em;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--gcid-primary-color, currentColor);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}

/* ---------------------------------------------------------- Tabellen */

/*
 * Der Filter im Plugin legt einen scrollbaren Rahmen um jede Tabelle, sonst
 * sprengt eine breite Tabelle auf dem Telefon das Layout.
 */

.frn-tabelle {
  overflow-x: auto;
  margin-block: 1.8rem;
  -webkit-overflow-scrolling: touch;
}

/*
 * Auf dem Desktop darf die Tabelle so breit werden, wie sie sein will, statt
 * einen Scrollbalken zu bekommen. Warum ueberhaupt: die Kopfzellen stehen auf
 * `nowrap`, damit eine Spaltenueberschrift nicht ueber zwei Zeilen bricht. Damit
 * hat die Tabelle eine Mindestbreite, die der Lesespalte und selbst den 900
 * Pixeln aus `.frn-breit` davonlaeuft. Die Vergleichstabelle der Kalkflecken-Seite
 * will 1150 Pixel.
 *
 * `width: max-content` gibt ihr genau die Breite, die der Inhalt braucht, nicht
 * mehr. `left: 50%` verschiebt sie um die halbe Lesespalte nach rechts,
 * `translateX(-50%)` um die halbe Eigenbreite zurueck. Zusammen steht sie mittig
 * ueber der Lesespalte und waechst nach beiden Seiten gleichmaessig heraus.
 *
 * `margin-inline: 0` muss sein, weil `.frn-breit` am selben Element haengt und
 * dort einen negativen Rand setzt. Beide zusammen ergaeben einen doppelten
 * Versatz nach links.
 *
 * Der Scrollbalken bleibt als Notnagel: passt die Tabelle selbst in das um die
 * Randabstaende verkleinerte Fenster nicht, ist Scrollen immer noch besser als
 * ein abgeschnittener Rand.
 *
 * `min-width: 100%` haelt schmale Tabellen auf Lesespaltenbreite. Ohne das
 * schrumpft eine dreispaltige Tabelle mit kurzen Zellen auf ihre 585 Pixel
 * `max-content` zusammen und steht dann schmaler als der Text um sie herum,
 * was aussieht wie ein Fehler.
 *
 * Keine Media Query davor. Auf einem schmalen Telefon faellt der Ausbruch von
 * selbst auf null zurueck, weil `max-width` dann die Fensterbreite ist und
 * Verschiebung und Ruecknahme sich gegenseitig aufheben. Eine Schwelle bei
 * 1000 Pixeln stand hier einmal und war der Grund, warum Tabellen auf Tablets
 * und schmalen Notebooks in der Lesespalte klemmten statt auszubrechen.
 */
.frn-tabelle,
.frn-tabelle.frn-breit {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  min-width: 100%;
  max-width: calc(100vw - 3rem);
  margin-inline: 0;
}

/*
 * Die Tabelle fuellt den Rahmen, laeuft ihm aber nicht davon. Ohne das
 * `min-width` schrumpfte sie auf ihre bevorzugte Breite, sobald der Rahmen
 * am Fensterrand gedeckelt wird, und liesse rechts eine Luecke stehen.
 */
.frn-tabelle > table {
  min-width: 100%;
}

/*
 * Und das ist der eigentliche Grund, warum der Ausbruch oben jahrelang wirkungslos
 * aussah: Der Blockeditor legt um jede Tabelle ein `<figure class="wp-block-table">`,
 * und dieser Wrapper traegt `overflow: auto`. Er ist nur so breit wie die
 * Lesespalte. Die Tabelle darin stand zwar korrekt auf ihren vollen 1150 Pixeln,
 * der Wrapper schnitt den Ueberhang aber ab und schob ihn in einen eigenen
 * Scrollbalken. Im Browser sah das aus wie eine abgeschnittene erste Spalte.
 *
 * `overflow: visible` nimmt dem Wrapper genau diese Klemme. Der Scrollbalken
 * geht dabei nicht verloren: er sitzt eine Ebene tiefer auf `.frn-tabelle` und
 * greift weiterhin, sobald die Tabelle dem Fenster wirklich davonlaeuft.
 *
 * Auf `.et_pb_post_content` eingegrenzt, damit nur die Tabellen aus dem
 * Seiteninhalt betroffen sind und keine, die ein Divi-Modul selbst ausgibt.
 */
.et_pb_post_content figure.wp-block-table {
  overflow: visible;
  margin-inline: 0;
}

/*
 * Vorher war die Tabelle ein nacktes Gitter aus Hairlines. Jetzt traegt sie
 * dieselbe Formensprache wie Karten und Callout: abgerundete Kante, ein Rahmen
 * statt vieler Linien, eine getoente Kopfzeile.
 *
 * `border-collapse: separate` statt `collapse`, weil eine zusammengelegte
 * Tabelle keine abgerundeten Ecken annimmt. Die Zellenlinien werden dafuer
 * einzeln gesetzt, das ist etwas mehr Regelwerk und der einzige Weg zur Rundung.
 */
.frn-tabelle > table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95em;
  /*
   * Der Rahmen traegt den Abschluss nach unten. Mit der Hairline-Farbe aus dem
   * Styleguide war er auf einem Pixel nicht zu sehen, besonders unter der
   * letzten Zebra-Zeile. Er umschliesst etwas, er trennt nicht nur, deshalb eine
   * Stufe kraeftiger als eine Trennlinie.
   *
   * Fester Wert statt `color-mix` mit `currentColor`: Divi gibt dem Fliesstext
   * eine halbtransparente Farbe, ein Anteil davon wird also zweimal verduennt.
   * Aus 18 Prozent wurden gemessene 12,6, und damit blieb der Rahmen unsichtbar.
   */
  border: 1px solid #C7D0DB;
  border-radius: 10px;
  overflow: hidden;
}

.frn-tabelle th,
.frn-tabelle td {
  padding: 0.78rem 0.95rem;
  text-align: left;
  vertical-align: top;
  border-block-end: 1px solid #E3E7EC;
}

.frn-tabelle tbody tr:last-child > * {
  border-block-end: 0;
}

/*
 * Kopfzeile in Vollton. Sie konkurriert nicht mit dem Stoerer, weil der die
 * Zweitfarbe traegt (Orange) und die Tabelle den Akzent (Blau). Zwei kraeftige
 * Flaechen auf einer Seite gehen nur, solange sie verschiedene Rollen und
 * verschiedene Farben haben.
 *
 * Keine Trennlinie unter der Kopfzeile: die Farbkante trennt bereits.
 *
 * **Nicht der reine Akzent.** Weiss auf `#029dff` ergibt ein Kontrastverhaeltnis
 * von 2,89 zu 1 und verfehlt die 4,5, die WCAG AA fuer normalen Text verlangt,
 * nachgemessen am 15.09.2026. Der Akzent wird deshalb zu 65 Prozent mit dem
 * Ink-Ton gemischt: dasselbe Blau, eine Stufe tiefer, gemessene 5,27 zu 1.
 * Wer hier aufhellt, muss neu messen, nicht schaetzen.
 */
.frn-tabelle thead th {
  color: #fff;
  font-weight: 700;
  background: color-mix(in srgb, var(--gcid-primary-color, #1470CC) 65%, #141B28);
  border-block-end: 0;
  white-space: nowrap;
}

/* Die Seitenleiste beginnt erst im Rumpf, im Kopf bleibt die Flaeche durchgehend. */
.frn-tabelle thead th:first-child {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.22);
}

/*
 * Seitenleiste: die erste Spalte traegt die Zeilenbezeichnung und bekommt eine
 * eigene, ruhige Flaeche. Bei einer breiten Tabelle findet das Auge damit die
 * Zeile wieder, ohne sie von links abzuzaehlen.
 */
.frn-tabelle tbody th:first-child,
.frn-tabelle tbody td:first-child {
  font-weight: 600;
  color: var(--gcid-heading-color, #141B28);
  background: #F4F6F8;
  border-inline-end: 1px solid #E3E7EC;
}

.frn-tabelle tbody tr:nth-child(even) {
  background: var(--gcid-surface-deep, #F4F6F8);
}

/*
 * Produktbild ueber dem Namen in der ersten Spalte. 80 Pixel, darunter war auf
 * den Illustrationen nichts zu erkennen (Rueckmeldung 16.09.2026).
 */
.frn-tabelle .frn-produkt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Zeilen mit Bild sind hoeher; mittig, damit der Text aller Spalten auf einer Linie steht. */
.frn-tabelle tbody tr:has(.frn-produkt) > td {
  vertical-align: middle;
}

.frn-tabelle .frn-produkt .frn-produkt__bild {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  max-width: none;
  margin: 0;
}

/* Auf der Seitenleiste bleibt das Zebra sichtbar, aber eine Spur tiefer. */
.frn-tabelle tbody tr:nth-child(even) td:first-child,
.frn-tabelle tbody tr:nth-child(even) th:first-child {
  background: #E8ECF1;
}

/*
 * Zeilenhervorhebung beim Ueberfahren. Bei sieben Spalten verliert das Auge auf
 * dem Weg nach rechts die Zeile, die Hervorhebung haelt sie zusammen. Nur wo es
 * einen Zeiger gibt, auf dem Telefon waere sie nach jeder Beruehrung im Weg.
 */
@media (hover: hover) {
  .frn-tabelle tbody tr:hover,
  .frn-tabelle tbody tr:hover td:first-child,
  .frn-tabelle tbody tr:hover th:first-child {
    background: color-mix(in srgb, var(--gcid-primary-color, #1470CC) 7%, #fff);
    transition: background 0.12s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frn-tabelle tbody tr:hover { transition: none; }
}

/* ------------------------------------------------------------- Staedte */

/*
 * Vorher eine Aufzaehlung aus Links, getrennt durch Mittelpunkte, sechs Zeilen
 * lang. Als Raster bekommt jede Stadt eine eigene Flaeche, und das Auge findet
 * einen Ort, ohne eine Zeile lesen zu muessen.
 */

.frn-staedte {
  margin-block: 1.8rem;
}

/*
 * Zwei Klassen im Selektor, und das ist kein Zufall. Die Fliesstext-Regel
 * `.et_pb_text_inner > ul > li::before` setzt den runden Aufzaehlungspunkt und
 * traegt eine Klasse plus drei Elemente. Eine einzelne Klasse verliert dagegen,
 * egal wie weit unten sie steht, und das Raster bekaeme Punkte und Einzug.
 * Mit dem Elternselektor `.frn-staedte` davor gewinnt die Regel ueber die
 * Klassenzahl und ist damit unabhaengig von der Reihenfolge im Stylesheet.
 */
.frn-staedte .frn-staedte__liste {
  display: grid;
  /* 9,5rem lassen auf einem 375 Pixel breiten Telefon noch zwei Spalten zu. */
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.frn-staedte .frn-staedte__liste > li {
  position: static;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.frn-staedte .frn-staedte__liste > li::before,
.frn-staedte .frn-staedte__liste > li::after {
  content: none;
}

.frn-staedte__ort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 8px;
  color: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Der Winkel zeigt an, dass die Kachel irgendwohin fuehrt. */
.frn-staedte__ort::after {
  content: '';
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.4;
}

.frn-staedte__ort:hover,
.frn-staedte__ort:focus-visible {
  border-color: var(--gcid-primary-color, currentColor);
  color: var(--gcid-primary-color, inherit);
  transform: translateY(-1px);
}

.frn-staedte__ort:hover::after,
.frn-staedte__ort:focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .frn-staedte__ort {
    transition: none;
  }
  .frn-staedte__ort:hover,
  .frn-staedte__ort:focus-visible {
    transform: none;
  }
}

/* -------------------------------------------------------- Fussbereich */

/*
 * Divi 5.1.1 bindet die Hintergrundfarbe eines Theme-Builder-Fussbereichs an
 * den Wrapper `.et-l--footer`, gibt diesen Wrapper aber nicht aus, sobald Kopf
 * und Fuss gemeinsam ersetzt werden. Divis eigener Kommentar in
 * ThemeBuilder/Layout.php beschreibt das als beabsichtigt: dann oeffnet nur ein
 * gemeinsamer Wrapper, und der traegt die Klasse nicht.
 *
 * Betroffen sind genau zwei Regeln, beide fuer background-color. Die uebrigen
 * vierzehn Regeln des Fussbereichs sind ungebunden und greifen.
 *
 * Der Farbwert bleibt im Customizer: hier steht nur die Variable, die das
 * Plugin ohnehin aus Divis globalen Farben ausgibt.
 */
.et_pb_section[class*='_tb_footer'] {
  background-color: var(--gcid-82f1e589-c596-4412-b238-4400f2c681d8, #1a1a1a);
}

/* Linklisten im Fuss sind Navigation, keine Aufzaehlung. */
.et_pb_section[class*='_tb_footer'] .et_pb_text_inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.et_pb_section[class*='_tb_footer'] .et_pb_text_inner li {
  margin: 0 0 0.45rem;
  padding: 0;
}

.et_pb_section[class*='_tb_footer'] .et_pb_text_inner li::before {
  content: none;
}

.et_pb_section[class*='_tb_footer'] .et_pb_text_inner h3 {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  color: #fff;
}

/*
 * Weisse Links auf dunklem Grund lesen sich besser als Divis Blau, das hier
 * nur knapp ueber der Kontrastschwelle liegt. Die Akzentfarbe bleibt fuer den
 * Hover, damit die Palette die Wahrheit bleibt.
 */
.et_pb_section[class*='_tb_footer'] a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.et_pb_section[class*='_tb_footer'] a:hover,
.et_pb_section[class*='_tb_footer'] a:focus-visible {
  color: var(--gcid-primary-color, #fff);
  text-decoration: underline;
}

/* Die Leiste setzt sich mit einer Haarlinie vom Spaltenteil ab. */
.et_pb_section_1_tb_footer {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.frn-fuss-werbung,
.frn-fuss-recht,
.frn-fuss-copyright {
  font-size: 0.85em;
  line-height: 1.6;
  margin: 0 0 0.4rem;
  padding-bottom: 0;
  opacity: 0.8;
}

.frn-fuss-recht span {
  opacity: 0.45;
  padding: 0 0.2rem;
}

.frn-fuss-copyright {
  margin-bottom: 0;
}

/* ------------------------------------------------------------- Anzeigen */

/*
 * Werbeflaechen bleiben in der Lesespalte und brechen bewusst NICHT auf 900
 * Pixel aus wie Rechner, Grafiken und Fotos. Eine Flaeche, die breiter ist als
 * der Text, liest sich als Banner. In Textbreite wirkt sie wie Teil des
 * Flusses, und genau das war die Vorgabe: nicht zu offensiv.
 *
 * `min-height` reserviert den Platz, bevor die Anzeige eintrifft. Ohne das
 * springt der Text nach unten, sobald sie geladen ist, und der CLS-Wert der
 * Seite faellt. Dieselbe Lektion wie bei den Fotos. Der Wert muss zur spaeter
 * eingesetzten Anzeigengroesse passen, sonst bleibt eine Luecke stehen.
 */
.frn-anzeige {
  display: block;
  margin-block: 2.4rem;
}

.frn-anzeige__hinweis {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gcid-body-color, currentColor);
  opacity: 0.55;
}

.frn-anzeige__flaeche {
  display: grid;
  place-items: center;
  min-height: 280px;
}

/*
 * Nur im Platzhaltermodus sichtbar. Sobald echter Code ausgeliefert wird,
 * traegt die Flaeche kein `__platzhalter` mehr und damit auch keinen Rahmen.
 */
.frn-anzeige__platzhalter {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 280px;
  border: 2px dashed color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 8px;
  font-size: 0.85rem;
  opacity: 0.5;
}

/* ---------------------------------------------------------- Stoerer */

/*
 * Ein Angebot, das den Lesefluss unterbrechen soll. Anders als das Callout, das
 * sich einordnet, tritt der Stoerer heraus: volle Akzentflaeche, heller Text,
 * ausgebrochen auf die Breite von `.frn-breit`. Genau ein Stoerer je Seite,
 * sonst stoert keiner mehr.
 *
 * Die Farbe kommt aus der globalen Divi-Zweitfarbe, damit sie sich vom Blau der
 * Knoepfe und Links absetzt und nicht mit einer Handlungsaufforderung
 * verwechselt wird.
 */

.frn-stoerer {
  --frn-stoerer-flaeche: var(--gcid-secondary-color, #fb691e);
  position: relative;
  background: var(--frn-stoerer-flaeche);
  color: #fff;
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  margin-block: 2.2rem;
}

.frn-stoerer__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  margin-block-end: 0.7rem;
}

.frn-stoerer__titel {
  margin: 0 0 0.5rem;
  color: #fff;
  font-size: 1.45rem;
  line-height: 1.25;
  text-wrap: balance;
}

/*
 * Schriftgroesse ausdruecklich setzen. Divi vergibt seine Fliesstextgroesse
 * ueber Selektoren, die das <aside> des Stoerers nicht treffen, deshalb fiel er
 * auf 16px zurueck und war damit kleiner als der Fliesstext daneben. Ein
 * Stoerer, der kleiner ist als sein Umfeld, stoert nicht.
 */
.frn-stoerer__text {
  font-size: 1.18rem;
  line-height: 1.6;
}

.frn-stoerer__text > :first-child { margin-block-start: 0; }
.frn-stoerer__text > :last-child { margin-block-end: 0; }

/*
 * Divi faerbt Fliesstext global ein. Im Stoerer liegt der Text auf der
 * Akzentflaeche, deshalb wird die Farbe hier erzwungen, sonst steht dunkles
 * Grau auf Orange.
 */
.frn-stoerer__text,
.frn-stoerer__text p,
.frn-stoerer__text li,
.frn-stoerer__text strong {
  color: #fff;
}

.frn-stoerer__text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .frn-stoerer { padding: 1.25rem 1.2rem; }
  .frn-stoerer__titel { font-size: 1.25rem; }
}

/* ------------------------------------------------------- Preiskarten */

/*
 * Drei Pakete nebeneinander. Die hervorgehobene Karte traegt eine farbige
 * Kopfleiste und steht optisch vorn, wie im gaengigen Muster fuer Preisseiten.
 * Sie nimmt dem Leser die Vorauswahl ab, deshalb steht dort das Paket, das fuer
 * die meisten Betriebe die richtige Wahl ist, nicht das teuerste.
 */

.frn-visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.frn-preiskarten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  align-items: start;
  margin-block: 2.4rem;
}

.frn-preiskarte {
  background: #fff;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(20, 27, 40, 0.06);
}

/*
 * Die hervorgehobene Karte wird nicht skaliert, sondern angehoben. Ein
 * `transform: scale` wuerde ihre Schrift mitvergroessern und die Zeilen gegen
 * die Nachbarkarten verschieben.
 */
.frn-preiskarte.is-hervorgehoben {
  border-color: var(--gcid-primary-color, #029dff);
  box-shadow: 0 10px 28px rgba(20, 27, 40, 0.14);
  margin-block: -0.9rem;
}

.frn-preiskarte__kopf {
  padding: 1.2rem 1.3rem 1rem;
  background: color-mix(in srgb, currentColor 5%, transparent);
  text-align: center;
}

.frn-preiskarte.is-hervorgehoben .frn-preiskarte__kopf {
  background: var(--gcid-primary-color, #029dff);
}

.frn-preiskarte__titel {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

.frn-preiskarte.is-hervorgehoben .frn-preiskarte__titel,
.frn-preiskarte.is-hervorgehoben .frn-preiskarte__untertitel {
  color: #fff;
}

.frn-preiskarte__untertitel {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gcid-primary-color, #029dff);
}

.frn-preiskarte__preis {
  margin: 0;
  padding: 1.4rem 1.3rem 1.1rem;
  text-align: center;
  /*
   * Zahl und Periode stehen untereinander, nicht nebeneinander. Nebeneinander
   * sieht bei kurzen Angaben wie „im Monat“ gut aus, bricht aber bei
   * „dauerhaft kostenlos“ um, und dann stehen die drei Karten ungleich.
   * Untereinander ist die Zeile in jeder Karte an derselben Stelle.
   */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.frn-preiskarte__zahl {
  /* Divi stellt die Ueberschriftenschrift als Variable bereit, hier Poppins. */
  font-family: var(--et_global_heading_font, inherit);
  font-weight: var(--et_global_heading_font_weight, 700);
  font-size: 2.9rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.frn-preiskarte.is-hervorgehoben .frn-preiskarte__zahl {
  color: var(--gcid-primary-color, #029dff);
}

.frn-preiskarte__periode {
  font-size: 0.95rem;
  color: color-mix(in srgb, currentColor 65%, transparent);
}

.frn-preiskarte__liste {
  list-style: none;
  margin: 0;
  padding: 0 1.3rem 1.2rem;
  flex: 1;
}

.frn-preiskarte__merkmal {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 0.62rem;
  padding: 0;
  font-size: 0.97rem;
  line-height: 1.45;
}

/* Die Fliesstext-Regel setzt einen Punkt vor jedes li, hier stoert er. */
.frn-preiskarte__merkmal::before,
.frn-preiskarte__merkmal::after {
  content: none;
}

.frn-preiskarte__symbol {
  flex: none;
  margin-block-start: 0.22em;
}

.frn-preiskarte__merkmal.is-ja .frn-preiskarte__symbol {
  color: var(--gcid-primary-color, #029dff);
}

.frn-preiskarte__merkmal.is-nein {
  color: color-mix(in srgb, currentColor 55%, transparent);
}

.frn-preiskarte__fussnote {
  margin: 0;
  padding: 0 1.3rem 1.2rem;
  font-size: 0.86rem;
  color: color-mix(in srgb, currentColor 62%, transparent);
}

.frn-preiskarten__hinweis {
  margin-block-start: -1.4rem;
  font-size: 0.9rem;
  text-align: center;
  color: color-mix(in srgb, currentColor 65%, transparent);
}

/*
 * Unter 900 Pixeln stapeln die Karten. Drei Spalten in der Lesespalte waeren
 * je rund 210 Pixel breit, dort bricht jede Merkmalzeile dreifach um.
 */
@media (max-width: 900px) {
  .frn-preiskarten {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .frn-preiskarte.is-hervorgehoben {
    margin-block: 0;
  }
}

/*
 * Divi setzt `p:last-of-type` auf padding-bottom 0. In der Karte ohne Fussnote
 * ist der Preis der letzte Absatz, in den Karten mit Fussnote ist es die
 * Fussnote. Ohne die Regeln hier steht der Preisblock je nach Karte 18 Pixel
 * hoeher, und damit beginnen die Merkmallisten auf unterschiedlicher Hoehe.
 *
 * Drei Klassen im Selektor, weil Divis Regel zwei Klassen plus ein Element
 * traegt. Dieselbe Falle wie beim Staedteraster, siehe README.
 */
.frn-preiskarten .frn-preiskarte .frn-preiskarte__preis {
  padding: 1.4rem 1.3rem 1.1rem;
}

.frn-preiskarten .frn-preiskarte .frn-preiskarte__fussnote {
  padding: 0 1.3rem 1.2rem;
}

/* ------------------------------------------------------- Brotkrume */

/*
 * Sitzt unter dem Hero und ueber dem Text, also im Lesebereich auf weisser
 * Flaeche. Deshalb dunkel auf hell statt hell auf Farbe: im Hero haette die
 * gedaempfte Zeile entweder zu wenig Kontrast oder muesste so hell werden, dass
 * sie mit der H1 konkurriert.
 */

.frn-brotkrume {
  /*
   * Linksbuendig mit der H1 im Hero, nicht mit der Lesespalte.
   *
   * Die H1 sitzt am linken Rand der Divi-Zeile (`width: 80%`, `max-width:
   * 1280px`, zentriert), die Lesespalte ist 680 Pixel breit und ebenfalls
   * zentriert. Gemessen am 15.09.2026 lagen dazwischen 230 Pixel. Die Brotkrume
   * bricht deshalb auf die Zeilenbreite aus, mit derselben Formel wie
   * `.frn-breit`, nur mit Divis eigener Rechenweise als Breite.
   *
   * `80vw` zaehlt die Bildlaufleiste mit, Divis `80%` nicht. Das ergibt rund
   * sechs Pixel Abweichung am linken Rand, unterhalb der Wahrnehmungsschwelle
   * bei einer gedaempften Zeile. Eine Gegenrechnung mit fester
   * Bildlaufleistenbreite waere schlechter, weil sie bricht, sobald keine da ist.
   */
  --frn-zeile: min(1280px, 80vw);
  width: var(--frn-zeile);
  max-width: none;
  margin-inline: calc(50% - min(var(--frn-zeile) / 2, 50vw - 1.5rem));

  /*
   * Naeher an den Hero. Das Inhaltsmodul bringt oben Abstand mit, den die
   * Brotkrume hier zurueckholt, damit sie zum Hero gehoert und nicht zum Text.
   */
  margin-block: -2.8rem 2.1rem;
  font-size: 0.86rem;
  line-height: 1.4;
}

/*
 * Der negative Rand oben braucht mehr Gewicht als die eigene Regel
 * `.et_pb_post_content > :first-child { margin-top: 0 }` ein paar Zeilen
 * weiter oben, die sonst gewinnt. Zwei Klassen plus Pseudoklasse schlagen
 * eine Klasse plus Pseudoklasse, unabhaengig von der Reihenfolge.
 */
.et_pb_post_content > .frn-brotkrume:first-child {
  margin-block-start: -2.8rem;
}

/*
 * Auf schmalen Geraeten bringt das Inhaltsmodul weniger Polsterung mit. Mit
 * demselben Zug blieben dort nur fuenf Pixel zum Hero, die Zeile klebte an der
 * Kante. Gemessen am 15.09.2026: 12 Pixel auf dem Desktop, 5 auf dem Telefon.
 */
@media (max-width: 980px) {
  .frn-brotkrume,
  .et_pb_post_content > .frn-brotkrume:first-child {
    margin-block-start: -2.1rem;
  }
}

.frn-brotkrume__liste {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  /*
   * Auf schmalen Geraeten scrollt die Zeile seitlich, statt umzubrechen. Eine
   * umgebrochene Brotkrume liest sich wie zwei Wege statt wie einer.
   */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.frn-brotkrume__liste::-webkit-scrollbar {
  display: none;
}

.frn-brotkrume__punkt {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* Die Fliesstext-Regel setzt einen Punkt vor jedes li, hier stoert er. */
.frn-brotkrume__punkt::before {
  content: none;
}

/*
 * Der Trenner wird gezeichnet, nicht geschrieben. Ein Textzeichen wie » wird
 * von Screenreadern mit vorgelesen und steht dann als „rechtes doppeltes
 * Winkelzeichen" zwischen jedem Wegpunkt.
 */
.frn-brotkrume__punkt + .frn-brotkrume__punkt::after {
  content: '';
  order: -1;
  width: 0.34rem;
  height: 0.34rem;
  margin-inline: 0.55rem;
  border-top: 1.5px solid #9AA5AC;
  border-right: 1.5px solid #9AA5AC;
  transform: rotate(45deg);
  flex: none;
}

.frn-brotkrume a {
  color: #5A6672;
  text-decoration: none;
  padding-block: 0.15rem;
}

.frn-brotkrume a:hover,
.frn-brotkrume a:focus-visible {
  color: var(--gcid-primary-color, #1470CC);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.frn-brotkrume [aria-current='page'] {
  color: var(--gcid-heading-color, #141B28);
  font-weight: 600;
}

/* ---------------------------------------------------------- Raster */

/*
 * Kurze Punkte nebeneinander, je eine Ueberschrift und ein Satz. Bewusst ohne
 * Rahmen und ohne Karte: sechs Kaesten neben den Preiskarten auf derselben
 * Seite waeren zwei konkurrierende Kartensysteme. Getrennt wird hier durch
 * Weissraum und eine kurze Linie ueber der Ueberschrift.
 */

.frn-raster {
  display: grid;
  grid-template-columns: repeat(var(--frn-raster-spalten, 3), 1fr);
  gap: 2rem 2.2rem;
  list-style: none;
  margin-block: 2.4rem;
  padding: 0;
}

.frn-raster__punkt {
  margin: 0;
  padding: 0;
  position: static;
}

/*
 * Die Fliesstext-Regel `.et_pb_text_inner > ul > li::before` setzt einen Punkt
 * vor jedes li und traegt eine Klasse plus drei Elemente. Eine einzelne Klasse
 * verliert dagegen. Mit dem Elternselektor davor gewinnt die Regel ueber die
 * Klassenzahl. Vierte Stelle in diesem Stylesheet mit demselben Muster.
 */
.frn-raster .frn-raster__punkt::before,
.frn-raster .frn-raster__punkt::after {
  content: none;
}

.frn-raster .frn-raster__punkt {
  padding-left: 0;
  margin-block-end: 0;
}

/*
 * Die Linie ersetzt den Rahmen. Sie bindet Ueberschrift und Satz zusammen und
 * gibt dem Raster Struktur, ohne sechs Kaesten zu bauen.
 */
.frn-raster__titel {
  margin: 0 0 0.5rem;
  padding-block-start: 0.9rem;
  border-block-start: 3px solid var(--gcid-primary-color, #1470CC);
  font-size: 1.12rem;
  line-height: 1.3;
  text-wrap: balance;
}

.frn-raster__text {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: color-mix(in srgb, currentColor 82%, transparent);
}

/*
 * Zwei Spalten ab Tablet, eine auf dem Telefon. Drei Spalten in der Lesespalte
 * waeren je rund 210 Pixel breit, dort bricht jede Ueberschrift dreifach um.
 */
@media (max-width: 980px) {
  .frn-raster { grid-template-columns: repeat(2, 1fr); gap: 1.7rem 1.8rem; }
}

@media (max-width: 600px) {
  .frn-raster { grid-template-columns: 1fr; gap: 1.5rem; }
}