/* ============================================================
   ADEA — Komponenten
   Ergänzt tokens.css. Variablen kommen ausschließlich von dort.

   Reihenfolge: tokens.css lädt zuerst (Abhängigkeit in
   functions.php gesetzt), danach diese Datei.

   Stand: v1.5.1
   ============================================================ */


/* ------------------------------------------------------------
   0. Overflow-Schutz

   Drei strukturelle Ursachen für horizontales Scrollen, nicht
   drei Symptome:

   1. Grid- und Flex-Items haben min-width: auto als Vorgabe und
      können deshalb nicht unter ihre Inhaltsbreite schrumpfen.
   2. Medien tragen ihre intrinsische Pixelbreite.
   3. Lange Wörter, URLs und E-Mail-Adressen brechen nicht um.

   Bewusst KEIN overflow-x: hidden auf html/body — das würde
   position: sticky am Header (.brx-sticky) ersatzlos abschalten.

   Die Regeln zu Ursache 1 (min-width auf Container-/Section-
   Kindern) stehen seit Phase 1, Schritt 4 in tokens.css —
   B5: Reset-Regeln gehören dorthin. Seit Schritt 7 steht dort
   zusätzlich overflow-x: clip auf html (C6) — begrenzt statt
   kaschiert, tastet position: sticky nicht an.
   ------------------------------------------------------------ */

/* Medien nie breiter als ihr Kasten, unabhängig von der
   Pixelbreite der Datei. */
img,
svg,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Lange Wörter und URLs brechen um, statt die Spalte aufzuziehen. */
:where(h1, h2, h3, h4, p, li, a, td) {
  overflow-wrap: break-word;
}


/* ------------------------------------------------------------
   1. Buttons

   Grundfarben, Padding und Typografie kommen aus den Bricks
   Theme Styles. Hier steht nur, was die Theme-Styles-UI nicht
   abdeckt: Zustände, Umriss-Variante, dunkler Grund, Fokus.
   ------------------------------------------------------------ */

.brxe-button {
  --adea-btn-bg: var(--adea-petrol-700);
  --adea-btn-text: var(--adea-petrol-50);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

/* --- Gefüllt (Standard) ------------------------------------- */

.brxe-button:hover,
.brxe-button:focus-visible {
  background-color: var(--adea-btn-bg-hover);
  border-color: var(--adea-btn-bg-hover);
  color: var(--adea-btn-text);
}

.brxe-button:active {
  background-color: var(--adea-petrol-900);
  transform: translateY(1px);
}

/* --- Umriss (Sekundär) -------------------------------------- */

.brxe-button.outline {
  background-color: transparent;
  color: var(--adea-petrol-700);
  border-color: var(--adea-petrol-700);
}

.brxe-button.outline:hover,
.brxe-button.outline:focus-visible {
  background-color: var(--adea-btn-ghost-hover);
  border-color: var(--adea-petrol-700);
}

/* --- Auf dunklem Grund (CTA-Band, Footer) ------------------- */

.adea-section--dark .brxe-button {
  background-color: var(--adea-petrol-50);
  border-color: var(--adea-petrol-50);
  color: var(--adea-petrol-900);
}

.adea-section--dark .brxe-button:hover,
.adea-section--dark .brxe-button:focus-visible {
  background-color: var(--adea-paper);
  border-color: var(--adea-paper);
  color: var(--adea-petrol-900);
}

.adea-section--dark .brxe-button.outline {
  background-color: transparent;
  color: var(--adea-petrol-50);
  border-color: var(--adea-petrol-400);
}

.adea-section--dark .brxe-button.outline:hover,
.adea-section--dark .brxe-button.outline:focus-visible {
  background-color: var(--adea-petrol-50);
  border-color: var(--adea-petrol-50);
  color: var(--adea-petrol-900);
}

/* --- Tastaturfokus ------------------------------------------ */

.brxe-button:focus-visible {
  outline: 2px solid var(--adea-petrol-700);
  outline-offset: 3px;
}

.adea-section--dark .brxe-button:focus-visible {
  outline-color: var(--adea-petrol-50);
}

/* --- Deaktiviert -------------------------------------------- */

.brxe-button[disabled],
.brxe-button[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}


/* ------------------------------------------------------------
   2. Sections

   Container-, Sektions- und Reset-Regeln stehen seit Phase 1,
   Schritt 4 in tokens.css (B5). Hier bleibt nur die Sonderregel
   für Gutenberg-Beiträge — siehe Kommentar unten; Schritt 7
   kommt an diese Stelle zurück.
   ------------------------------------------------------------ */

/* Für Gutenberg-Beiträge ist eine Lesebreite sinnvoll, für
   Bricks-gebaute Seiten falsch — dort tragen die Sections die
   Breite. Das Attribut grenzt die Regel ein: Beiträge behalten
   ihre Lesebreite.

   Das frühere !important ist am 08.09.2026 entfallen. Der alte
   Kommentar nannte Inline-Styles als Grund — das war falsch, Bricks
   schreibt keine style-Attribute. Die konkurrierende Breite kam aus
   der globalen Klasse page-content (_widthMax: 72ch), und die ist
   seit Phase 1, Schritt 2 aus dem Panel entfernt. Ob das !important
   je nötig war, ist damit offen: der Selektor hier ist spezifischer
   als .page-content und hätte ohnehin gewinnen müssen. Falls die
   Lesebreite nach dem Deploy zurückkehrt, steckt die Ursache
   woanders — dann in den DevTools nachsehen, welcher Selektor
   gewinnt, statt das !important zurückzuholen. */
.brxe-post-content[data-source="bricks"] {
  max-width: none;
  width: 100%;
}


/* ------------------------------------------------------------
   3. Raster (C5 — ohne feste Media Queries)

   Statt "drei Spalten Desktop, zwei Tablet, eine Mobile" trägt
   jede Variante eine Mindestbreite; der Browser bricht selbst
   um. min() in der Mindestbreite verhindert Overflow auf
   schmalen Viewports. Umbenannt von adea-grid-2/3/4 auf den
   --Modifier (Phase 1, Schritt 6) — Klassen werden in Bricks
   per ID referenziert, Seiteninhalte bleiben unberührt.
   ------------------------------------------------------------ */

.adea-grid--2,
.adea-grid--3,
.adea-grid--4 {
  display: grid;
  width: 100%;
  gap: var(--adea-space-3);
  margin-block-start: var(--adea-space-4);
}

.adea-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.adea-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.adea-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* --- Hero: mobile-first — gestapelt, ab Tablet nebeneinander (C5) --- */

.adea-hero__grid {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  gap: var(--adea-space-4);
  align-items: center;
}

@media (min-width: 62rem) {
  .adea-hero__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--adea-space-5);
  }
}

/* --- Hero-Bausteine — aus dem Bricks-Panel überführt
   (Entscheidung Nr. 04, Phase 1 Schritt 6). Werte aus
   _phase0/bricks-dump-latest.json, Klassen hero-text/
   hero-actions/hero-image → adea-hero__text/__actions/__image.
   Breakpoint 767px = Bricks-Standard "mobile_landscape",
   in bricks_global_settings nicht überschrieben — gegenprüfen,
   falls diese Installation einen anderen Wert nutzt. --- */

.adea-hero__text {
  display: flex;
  flex-direction: column;
  /* war column-gap — wirkt bei flex-direction: column nicht, die
     Elemente klebten aneinander (Fund 01.10.2026, Standortseiten).
     Gleicher Abstand wie .adea-stack, damit alle Seitenköpfe gleich sind. */
  gap: var(--adea-space-2);
}

.adea-hero__actions {
  display: flex;
  flex-direction: row;
  column-gap: var(--adea-space-2);
  margin-block-start: var(--adea-space-2);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .adea-hero__actions {
    flex-direction: column;
    row-gap: var(--adea-space-2);
  }
}

.adea-hero__image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 35% 65%;
  width: 100%;
}

/* --- Kachelraster: Fokusgebiete ----------------------------- */

/* Der zweite minmax-Wert deckelt die Kachelbreite. Ohne ihn
   verteilen sich zwei Standorte über die volle Containerbreite
   und werden riesig; mit ihm bleibt die Kachelgröße konstant,
   egal ob zwei oder zehn Orte existieren.
   justify-content: start legt die Reihe links an, statt die
   Restbreite unverteilt zu lassen. */

.adea-tiles {
  display: grid;
  width: 100%;
  /* 07.10.2026: fünf Standorte → Desktop alle in einer Reihe,
     Tablet 3 + 2, Handy 2 + 2 + 1 (letzte Kachel volle Breite).
     Vorher auto-fit mit max. 260px → 4 + 1, Stuttgart allein. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--adea-space-2);
  margin-block-start: var(--adea-space-4);
}

.adea-tiles > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (min-width: 600px) {
  .adea-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .adea-tiles > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}

@media (min-width: 992px) {
  .adea-tiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}


/* ------------------------------------------------------------
   3a. Kachel — Standort

   Vorerst Petrolfläche mit Ortsname. Sobald die Luftbilder
   zugeordnet sind, kommt --image dazu: Bild als Hintergrund,
   Verlauf für die Lesbarkeit liegt bereits hier.
   ------------------------------------------------------------ */

.adea-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: var(--adea-space-2);
  border-radius: var(--adea-radius);
  background-color: var(--adea-petrol-100);
  overflow: hidden;
  transition: background-color var(--adea-transition);
}

.adea-tile:hover {
  background-color: var(--adea-petrol-400);
}

.adea-tile a {
  color: var(--adea-petrol-900);
  font-weight: var(--adea-weight-semi);
  text-decoration: none;
}

/* Ganze Kachel klickbar, Link bleibt der semantische Anker. */
.adea-tile a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.adea-tile a:hover {
  color: var(--adea-petrol-900);
}

/* Mit Hintergrundbild: Text auf dunklem Verlauf lesbar halten. */
.adea-tile--image {
  background-size: cover;
  background-position: center;
}

.adea-tile--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 28, 47, 0.75) 0%,
    rgba(17, 28, 47, 0) 60%
  );
}

.adea-tile--image a {
  position: relative;
  color: var(--adea-paper);
}


/* Kachelbild als echtes Image-Element (Phase 5, Variante A):
   Image mit Klasse .adea-tile__img als erstes Kind der Kachel,
   Dynamic Data {acf_adea_ort_kachelbild}, Bedingung "nicht leer".
   Ohne Bild bleibt die Kachel die helle Fläche von oben; sobald ein
   Bild da ist, schalten Verlauf und weiße Schrift per :has() von
   selbst um — keine Zusatzklasse nötig.
   isolation + negative z-index: Bild und Verlauf liegen unter dem
   Link, der Link selbst bleibt unpositioniert, damit sein ::after
   weiterhin die ganze Kachel klickbar macht. */
.adea-tile:has(.adea-tile__img) {
  isolation: isolate;
}

.adea-tile .adea-tile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 400ms ease;
}

.adea-tile:has(.adea-tile__img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(17, 28, 47, 0.75) 0%,
    rgba(17, 28, 47, 0) 60%
  );
}

.adea-tile:has(.adea-tile__img) a,
.adea-tile:has(.adea-tile__img) a:hover {
  color: var(--adea-paper);
}

.adea-tile:hover .adea-tile__img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .adea-tile .adea-tile__img { transition: none; }
  .adea-tile:hover .adea-tile__img { transform: none; }
}


/* ------------------------------------------------------------
   3b. Kennzahl — Vertrauensleiste

   Zahl in der Display-Schrift, Label klein darunter.
   Die Werte kommen über Dynamic Tags aus inc/config.php:
   {adea_stat_einheiten}, {adea_stat_objekte},
   {adea_stat_jahre}, {adea_stat_reaktion}.
   ------------------------------------------------------------ */

.adea-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--adea-space-3);
  background-color: var(--adea-shell);
  border-radius: var(--adea-radius);
}

.adea-stat__value {
  font-family: var(--adea-font-display);
  font-size: var(--adea-text-3xl);
  font-weight: var(--adea-weight-semi);
  line-height: 1.05;
  color: var(--adea-petrol-900);
}

.adea-stat__label {
  font-size: 0.9375rem;
  color: var(--adea-slate);
  line-height: 1.3;
}

.adea-section--dark .adea-stat {
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--adea-petrol-50) 25%, transparent);
}

.adea-section--dark .adea-stat__value { color: var(--adea-petrol-50); }
.adea-section--dark .adea-stat__label { color: var(--adea-petrol-100); }


/* ------------------------------------------------------------
   4. Badge

   Ausschließlich Sand. Nie als Button, nie als Fläche.
   ------------------------------------------------------------ */

.adea-badge {
  display: inline-block;
  padding: 0.35em 0.85em;
  border: 1px solid var(--adea-sand-200);
  border-radius: var(--adea-radius);
  background-color: var(--adea-sand-50);
  color: color-mix(in srgb, var(--adea-sand-500) 65%, var(--adea-ink));
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  /* Badge wird oft als Text Link (Kategorie-Link) eingesetzt — ohne
     diese Zeile blitzt die Standard-Link-Unterstreichung des Browsers
     durch, obwohl .adea-badge selbst nie eine Unterstreichung vorsieht. */
  text-decoration: none;
}

.adea-section--dark .adea-badge {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--adea-sand-500) 55%, transparent);
  color: var(--adea-sand-500);
}


/* ------------------------------------------------------------
   5. Karte

   Leistungs-Teaser, Referenzen, Aktuelles.
   ------------------------------------------------------------ */

.adea-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--adea-space-4);
  background-color: var(--adea-paper);
  border: 1px solid var(--adea-petrol-100);
  border-radius: var(--adea-radius);
  transition: box-shadow var(--adea-transition);
}

.adea-card:hover {
  box-shadow: var(--adea-shadow-card);
}

.adea-card__title {
  font-size: var(--adea-text-xl);
  line-height: 1.25;
}

/* FAQ-Akkordeon-Titel (Phase 3): nativer h3 laeuft sonst auf dem
   globalen Theme-Style-Default (--adea-text-2xl) - bei mehreren langen,
   umgebrochenen Fragen untereinander wirkt das zu schwer. Gleiche Stufe
   wie .adea-card__title, aus Konsistenzgruenden. */
.adea-faq__question {
  font-size: var(--adea-text-xl);
  line-height: 1.3;
}

.adea-card__meta {
  color: var(--adea-slate);
  font-size: 0.875rem;
}

/* Große Schrittnummer (01, 02, 03 …) — Ablauf Startseite, „So geht es
   weiter" auf /angebot/. Ersetzt die frühere Panel-Schriftgröße an
   einzelnen Elementen (07.10.2026). Klasse STATT .adea-card__meta setzen. */
.adea-step__num {
  display: block;
  color: var(--adea-slate);
  font-family: var(--adea-font-body);
  font-size: var(--adea-text-3xl);
  font-weight: var(--adea-weight-regular);
  line-height: 1;
  margin-block-end: var(--adea-space-2);
}

/* Ganze Karte klickbar. Der Textlink bleibt der semantische
   Anker, die Fläche darüber ist reiner Klickkomfort. */
.adea-card--link {
  position: relative;
}

.adea-card--link a::after {
  content: "";
  position: absolute;
  inset: 0;
}


/* ------------------------------------------------------------
   6. Links

   Bewusst eng gefasst: nur Links innerhalb von Karten und
   Fließtext. Navigation, Header und Footer bleiben unberührt —
   .brxe-text-link als Selektor würde dort mitgreifen.
   Kommt anderswo ein ungestylter Link vor, hier gezielt ergänzen.
   ------------------------------------------------------------ */

/* Buttons (<a class="brxe-button">) ausnehmen — sonst bekommen sie
   Linkfarbe + Unterstreichung (Fund 09.10.2026, Kontaktseite). */
.adea-card a:not(.brxe-button),
.adea-measure a:not(.brxe-button) {
  color: var(--adea-petrol-700);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color 160ms ease;
}

/* Der Link steckt IM Badge-Div (.adea-badge ist der Wrapper, nicht
   der <a> selbst) — "text-decoration: none" auf dem Div vererbt sich
   nicht gegen die explizite "underline"-Regel auf dem <a> weiter unten.
   Deshalb hier direkt den Nachfahren-Link ansprechen, mit hoeherer
   Spezifitaet als ".adea-card a" (Klasse+Element), damit es sicher zieht. */
.adea-card .adea-badge a,
.adea-measure .adea-badge a {
  text-decoration: none;
}

.adea-card a:not(.brxe-button):hover,
.adea-measure a:not(.brxe-button):hover {
  color: var(--adea-petrol-900);
}

.adea-section--dark :is(.adea-card, .adea-measure) a:not(.brxe-button) {
  color: var(--adea-petrol-50);
}

.adea-section--dark :is(.adea-card, .adea-measure) a:not(.brxe-button):hover {
  color: var(--adea-paper);
}


/* ------------------------------------------------------------
   7. Fließtext

   Zeilenlänge begrenzen. Ohne diese Klasse laufen Absätze
   im Container über 100 Zeichen und werden schwer lesbar.
   ------------------------------------------------------------ */

.adea-measure { max-width: 62ch; }
.adea-measure--narrow { max-width: 46ch; }


/* ------------------------------------------------------------
   8. Hilfsklassen

   Aus tokens.css hierher verschoben (Phase 1, Schritt 4) —
   B5: Komponenten gehören in diese Datei, nicht in tokens.css.
   In Bricks als Klasse zuweisen.
   ------------------------------------------------------------ */

/* Versal-Label über Überschriften */
.adea-label {
  font-size: var(--adea-text-xs, 0.75rem);
  font-weight: var(--adea-weight-semi);
  letter-spacing: var(--adea-tracking-label);
  text-transform: uppercase;
  color: var(--adea-slate);
}

/* Sektions-Hintergründe */
.adea-bg-shell   { background: var(--adea-shell); }
.adea-bg-petrol  { background: var(--adea-petrol-50); }
.adea-bg-dark    { background: var(--adea-petrol-900); color: var(--adea-paper); }
.adea-bg-dark h1,
.adea-bg-dark h2,
.adea-bg-dark h3 { color: var(--adea-paper); }

/* Zitat */
.adea-quote {
  font-family: var(--adea-font-display);
  font-size: var(--adea-text-xl);
  line-height: var(--adea-leading-snug);
}


/* ------------------------------------------------------------
   9. Karte auf Klick (Phase 4, Standortseiten)

   Ausgabe über den Shortcode [adea_karte], inc/karte.php.
   Vor dem Klick: Vorschaufläche, kein Request an Google.
   ------------------------------------------------------------ */

.adea-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--adea-navy-100);
  border-radius: var(--adea-radius);
  /* Gezeichnete Fläche als Platzhalter, angelehnt an ein Kartenraster */
  background-color: var(--adea-navy-50);
  background-image:
    linear-gradient(var(--adea-navy-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--adea-navy-100) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
}

@media (min-width: 48rem) {
  .adea-map { aspect-ratio: 16 / 9; }
}

.adea-map--bild {
  background-size: cover;
}

.adea-map__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--adea-space-2);
  padding: var(--adea-space-3);
  text-align: center;
  background: color-mix(in srgb, var(--adea-paper) 82%, transparent);
}

.adea-map__title {
  font-family: var(--adea-font-display);
  font-size: var(--adea-text-xl);
  line-height: 1.25;
  margin: 0;
}

.adea-map__note {
  max-width: 46ch;
  margin: 0;
  color: var(--adea-slate);
  font-size: var(--adea-text-s);
}

.adea-map__note a,
.adea-map__route {
  color: var(--adea-navy-700);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.adea-map__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--adea-space-2);
}

.adea-map__route {
  font-size: var(--adea-text-s);
}

.adea-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.adea-map__missing {
  padding: var(--adea-space-2);
  border: 1px dashed var(--adea-sand-500);
  color: var(--adea-sand-text);
  font-size: var(--adea-text-s);
}

/* Gewerke-Liste (Handwerkernetz): Badges nebeneinander */
.adea-gewerke {
  display: flex;
  flex-wrap: wrap;
  gap: var(--adea-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ------------------------------------------------------------
   10. Standortseiten: Hero ohne Bild + Textstapel (Phase 4)
   ------------------------------------------------------------ */

/* Hero ohne Bild: Das Bild-Element wird per Bricks-Condition gar
   nicht ausgegeben, wenn adea_ort_bild leer ist. Das Grid behielte
   sonst seine zweite (leere) Spalte. Sobald ein Bild gepflegt ist,
   greift automatisch wieder das zweispaltige Layout. */
.adea-hero__grid:not(:has(.adea-hero__image)) {
  grid-template-columns: 1fr;
}

.adea-hero__grid:not(:has(.adea-hero__image)) .adea-hero__text {
  max-width: 62ch;
}

/* Textstapel: vertikaler Rhythmus für Blöcke aus Überschrift,
   Fließtext, Label und Zwischenüberschrift in einer Spalte.
   In Bricks auf die Div setzen, die diese Elemente enthält. */
.adea-stack {
  display: flex;
  flex-direction: column;
  gap: var(--adea-space-2);
}

/* Label sitzt dicht am Wert, den es beschriftet, aber mit Luft
   zum Block darüber. */
.adea-stack > .adea-label {
  margin-block-start: var(--adea-space-2);
  margin-block-end: calc(var(--adea-space-1) * -1);
}

/* Zwischenüberschrift im Stapel (z. B. "Im Umland"): kleiner als
   die h2 der Section und mit deutlichem Abstand nach oben. */
.adea-stack > h3 {
  font-size: var(--adea-text-xl);
  line-height: 1.3;
  margin-block-start: var(--adea-space-3);
}

/* Referenz-Section auf Standortseiten: ausblenden, solange der
   Query Loop keine Referenz liefert (z. B. Hohenlohe, Schwäbisch
   Hall ohne eigene Objekte). Erscheint automatisch, sobald die
   erste Referenz mit passendem Ort veröffentlicht ist. In Bricks
   die Klasse auf die Section setzen und im Loop KEINEN
   "No results"-Text hinterlegen. */
.adea-section--referenzen:not(:has(.adea-card)) {
  display: none;
}

/* Umland-Block unter dem Einsatzgebiet-Grid (Standortseiten):
   steht dort als eigene .adea-stack; die Zwischenüberschrift ist
   dann erstes Kind und braucht keinen Abstand nach oben. */
.adea-stack > h3:first-child {
  margin-block-start: 0;
}


/* ------------------------------------------------------------
   9. Aktuelles (Phase 5)

   Archiv /aktuelles/ und Kategoriearchive. Ein einziger Query
   Loop (Hauptabfrage, 9 pro Seite, siehe query-filters.php) —
   der Aufmacher entsteht rein per CSS, damit die Paginierung
   ohne Offset-Tricks sauber bleibt.
   ------------------------------------------------------------ */

/* Kategoriefilter: Reihe aus Text-Link-Elementen mit .adea-badge.
   Aktiver Zustand ohne JavaScript über die Body-Klasse, die
   WordPress ohnehin setzt (.blog = Beitragsseite,
   .category-{slug} = Kategoriearchiv). Jeder Link trägt dafür in
   Bricks das Attribut data-kat (alle | unternehmen | recht-weg | region). */
.adea-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--adea-space-1);
  margin-block-start: var(--adea-space-3);
}

.adea-filter .adea-badge {
  transition: border-color 160ms ease, background-color 160ms ease;
}

.adea-filter .adea-badge:hover {
  border-color: var(--adea-sand-500);
}

.blog .adea-filter [data-kat="alle"],
.category-unternehmen .adea-filter [data-kat="unternehmen"],
.category-recht-weg .adea-filter [data-kat="recht-weg"],
.category-region .adea-filter [data-kat="region"] {
  background-color: var(--adea-sand-200);
  border-color: var(--adea-sand-500);
  color: var(--adea-sand-text);
}

/* Aufmacher: Zusatzklasse neben .adea-grid--3 auf dem Loop-
   Wrapper. Feste Spaltenzahl statt auto-fit, weil eine Karte mit
   "span 2" in einem einspaltigen auto-fit-Grid eine zweite Spur
   erzwingen und seitlich überlaufen würde.
   Nur auf Seite 1 (.paged setzt WordPress ab Seite 2):
   - 2 Spalten: Aufmacher volle Breite, danach 8 Karten = 4 Reihen
   - 3 Spalten: Aufmacher 2×2, danach 8 Karten → 12 Felder, lückenlos */
@media (min-width: 48rem) {
  .adea-grid--3.adea-grid--feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not(.paged) .adea-grid--feature > :first-child {
    grid-column: span 2;
  }
}

@media (min-width: 64rem) {
  .adea-grid--3.adea-grid--feature {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body:not(.paged) .adea-grid--feature > :first-child {
    grid-row: span 2;
  }
  body:not(.paged) .adea-grid--feature > :first-child .adea-card__title {
    font-size: var(--adea-text-2xl);
  }
}

/* Paginierung (natives Bricks-Element "Pagination" mit dieser Klasse) */
.adea-pagination {
  margin-block-start: var(--adea-space-5);
}

.adea-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--adea-navy-100);
  border-radius: var(--adea-radius);
  color: var(--adea-navy-700);
  text-decoration: none;
  transition: background-color 160ms ease;
}

.adea-pagination a.page-numbers:hover {
  background-color: var(--adea-navy-50);
}

.adea-pagination .page-numbers.current {
  background-color: var(--adea-navy-700);
  border-color: var(--adea-navy-700);
  color: var(--adea-paper);
}

.adea-pagination .page-numbers.dots {
  border-color: transparent;
}

/* Beitragsbild auf der Einzelseite und im Aufmacher */
.adea-post__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--adea-radius);
}

/* Fließtext der Einzelseite (Post-Content-Element): Abstände
   zwischen Absätzen, Zwischenüberschriften und Listen. Die
   Zeilenlänge kommt über .adea-measure am selben Element. */
.adea-post__content > * + * {
  margin-block-start: 1em;
}

.adea-post__content h2 {
  font-size: var(--adea-text-2xl);
  margin-block-start: var(--adea-space-4);
}

.adea-post__content h3 {
  font-size: var(--adea-text-xl);
  margin-block-start: var(--adea-space-3);
}

.adea-post__content ul,
.adea-post__content ol {
  padding-inline-start: 1.25em;
}

.adea-post__content li + li {
  margin-block-start: 0.4em;
}

/* Karten-Feinschliff (Phase 5, 01.10.2026):
   1. .adea-card ist eine Flex-Spalte — Kinder strecken sich dort auf
      volle Breite. Das Badge soll nur so breit sein wie sein Text.
   2. Verlinkte Kartentitel ohne Dauer-Unterstreichung (wirkt bei großen
      Serifen-Titeln schwer); Unterstreichung erst beim Hover. */
.adea-card > .adea-badge,
.adea-stack > .adea-badge {
  align-self: flex-start;
}

.adea-card .adea-card__title a,
.adea-card a.adea-card__title {
  color: inherit;
  text-decoration: none;
}

.adea-card .adea-card__title a:hover,
.adea-card a.adea-card__title:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

/* Raster als ERSTES Element einer Section (z. B. Aktuelles-Archiv,
   Karten-Section ohne eigene Überschrift): kein zusätzlicher Abstand
   nach oben — der kommt sonst doppelt (Section-Padding + Grid-Margin).
   Steht eine Überschrift davor, bleibt der Abstand wie gehabt. */
.brxe-container > :is(.adea-grid--2, .adea-grid--3, .adea-grid--4):first-child {
  margin-block-start: 0;
}

/* Lange deutsche Komposita in schmalen Karten (z. B. "Objektbegehungen"
   im 4er-Raster der Leistungsseiten): mit Silbentrennung statt hartem
   Umbruch mitten im Wort. Braucht lang="de-DE" am <html> (WordPress
   setzt das über die Spracheinstellung). */
.adea-card__title {
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Nur lange Wörter trennen (ab 10 Zeichen, mind. 4 vor/nach dem
     Trennstrich) — sonst entstehen Trennungen wie "Wo-her". */
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
}

/* Breadcrumbs innerhalb von .adea-measure (z. B. Einzelbeitrag): die
   Fließtext-Linkregel ".adea-measure a" würde sie unterstreichen.
   Breadcrumbs sehen überall gleich aus — Unterstrich nur beim Hover. */
.adea-measure .brxe-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.adea-measure .brxe-breadcrumbs a:hover {
  text-decoration: underline;
}

/* Kopf-Section direkt gefolgt von einer weiteren WEISSEN Section
   (Einzelbeitrag: Kopf → Beitragstext): ohne farbigen Wechsel wirkt
   doppeltes Section-Padding wie ein Loch. Dann nur ein kleiner Abstand.
   Folgt eine farbige Section (--tint/--dark/--accent), bleibt alles wie es ist. */
.adea-section--hero + .adea-section:not(.adea-section--tint):not(.adea-section--dark):not(.adea-section--accent) {
  padding-block-start: var(--adea-space-3);
}

/* Einzelbeitrag (Aktuelles): Lesespalte mittig statt linksbündig.
   Bei 62ch Zeilenlänge bliebe auf breiten Bildschirmen die rechte
   Hälfte leer — klassisches Artikel-Layout: schmale Spalte zentriert,
   Text darin linksbündig. Kopf und Text nutzen dieselbe Spalte, damit
   Breadcrumb, Titel und Fließtext exakt untereinander stehen.
   Greift nur auf Beitragsseiten (Body-Klasse .single-post). */
.single-post .adea-section > .brxe-container > .adea-stack.adea-measure {
  margin-inline: auto;
  width: 100%;
}

/* Kopf direkt vor einer weißen Section: auch den unteren Abstand des
   Kopfes verkleinern (die obere Hälfte regelt die Regel weiter oben). */
.adea-section--hero:has(+ .adea-section:not(.adea-section--tint):not(.adea-section--dark):not(.adea-section--accent)) {
  padding-block-end: var(--adea-space-4);
}

/* "Alle …"-Button direkt unter einem Karten-Raster (z. B. Aktuelles-
   Teaser, später Referenzen): Abstand nach oben, nur so breit wie
   sein Text. Bricks-Button mit Stil "Outline". */
.brxe-container > :is(.adea-grid--2, .adea-grid--3, .adea-grid--4) + .brxe-button {
  margin-block-start: var(--adea-space-4);
  align-self: flex-start;
}

/* Footer-Raster responsiv — unabhängig von Bricks-Breakpoint-Werten.
   Seit der fünften Spalte ("Unternehmen", 01.10.2026) griff der alte
   Bricks-Wert "_gridTemplateColumns:mobile_landscape = 1fr" nicht mehr
   zuverlässig; auf dem Handy standen fünf Spalten nebeneinander.
   !important bewusst: Bricks schreibt Element-/Klassenwerte mit ID-
   Selektoren, die eine normale Klassenregel überstimmen würden.
   Tablet: Logo-Block volle Breite, darunter Linkspalten zu zweit.
   Handy: alles untereinander. Desktop bleibt beim Bricks-Wert. */
@media (max-width: 991px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .footer-inner > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 599px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ============================================================
   11. Formular — Fluent Forms Pro (Phase 6, /angebot/)
   Einbindung: Bricks-Element "Shortcode" [fluentform id="…"] mit
   Klasse .adea-form, darum ein Div .adea-form-card.
   Alle Regeln hängen an .adea-form, damit sie das Fluent-Standard-
   CSS (.fluentform …, Spezifität 0,2,0) sicher überstimmen, ohne
   !important. Fluent-Klassen nach Installation gegen das echte
   Markup geprüft? → siehe PHASE6-CONTENT.md §1.5.
   ============================================================ */

/* Grundgerüst */
.adea-form .fluentform {
  font-family: var(--adea-font-body);
  color: var(--adea-ink);
}

.adea-form .fluentform .ff-el-group {
  margin-block-end: var(--adea-space-3);
}

/* Labels */
.adea-form .fluentform .ff-el-input--label label {
  font-size: var(--adea-text-s);
  font-weight: var(--adea-weight-semi);
  color: var(--adea-ink);
  margin-block-end: var(--adea-space-1);
}

.adea-form .fluentform .ff-el-is-required.asterisk-right label::after,
.adea-form .fluentform .ff-el-is-required.asterisk-left label::before {
  color: var(--adea-sand-500);
}

/* Eingabefelder */
.adea-form .fluentform .ff-el-form-control {
  width: 100%;
  min-height: 3rem;
  padding: var(--adea-space-2) var(--adea-space-3);
  font: inherit;
  font-size: var(--adea-text-m);
  line-height: var(--adea-leading-normal);
  color: var(--adea-ink);
  background: var(--adea-paper);
  border: var(--adea-border);
  border-radius: var(--adea-radius);
  box-shadow: none;
  transition: border-color var(--adea-transition), box-shadow var(--adea-transition);
}

.adea-form .fluentform textarea.ff-el-form-control {
  min-height: 8rem;
  resize: vertical;
}

.adea-form .fluentform .ff-el-form-control::placeholder {
  color: var(--adea-slate);
  opacity: 1;
}

.adea-form .fluentform .ff-el-form-control:hover {
  border-color: var(--adea-navy-400);
}

.adea-form .fluentform .ff-el-form-control:focus {
  outline: none;
  border-color: var(--adea-navy-700);
  box-shadow: 0 0 0 3px var(--adea-navy-100);
}

/* Radio/Checkbox: als anklickbare Zeilen, volle Breite untereinander
   (07.10.2026: vorher Kacheln mit Textbreite → ungleichmäßig umbrechend).
   In Fluent je Feld unter "Advanced Options → Container Class"
   die Klasse adea-choice eintragen (nur Auswahlfelder, nicht die
   Datenschutz-Checkbox). !important nur bei Farben/Layout, weil
   Fluents eigenes CSS hier mit gleicher Spezifität später lädt. */
.adea-form .fluentform .adea-choice .ff-el-input--content {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--adea-space-2);
}

.adea-form .fluentform .adea-choice .ff-el-form-check {
  display: block !important;
  width: 100%;
  margin: 0 !important;
}

.adea-form .fluentform .adea-choice .ff-el-form-check-label {
  display: flex !important;
  align-items: center;
  gap: var(--adea-space-3);
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: var(--adea-space-2) var(--adea-space-3);
  background: var(--adea-paper);
  border: var(--adea-border);
  border-radius: var(--adea-radius);
  cursor: pointer;
  transition: border-color var(--adea-transition), background var(--adea-transition);
}

.adea-form .fluentform .adea-choice .ff-el-form-check-label:hover {
  border-color: var(--adea-navy-400);
}

.adea-form .fluentform .adea-choice .ff-el-form-check-label:has(input:checked) {
  border-color: var(--adea-navy-700);
  background: var(--adea-navy-50);
}

/* Variante: kurze Optionen nebeneinander (z. B. „Sie sind …",
   „Am besten erreichbar"). Container Class: "adea-choice adea-choice--row".
   Gleich breite Kacheln, brechen auf schmalen Bildschirmen um. */
.adea-form .fluentform .adea-choice--row .ff-el-input--content {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

/* Kontrast: Optionstexte in Fließtextfarbe statt Fluent-Hellgrau */
.adea-form .fluentform .ff-el-form-check-label,
.adea-form .fluentform .ff-el-form-check-label span {
  color: var(--adea-ink) !important;
  opacity: 1 !important;
  font-size: var(--adea-text-m);
}

.adea-form .fluentform .ff-el-form-check-input {
  accent-color: var(--adea-navy-700);
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  flex-shrink: 0;
}

/* Datenschutz-Checkbox (Feld "GDPR Agreement"): Fließtext klein */
.adea-form .fluentform .ff_gdpr_field .ff-el-form-check-label,
.adea-form .fluentform .ff-el-tc .ff-el-form-check-label {
  font-size: var(--adea-text-s);
  color: var(--adea-slate);
}

/* Fortschritt als Schritt-Kacheln (Fluent: Step Start → Progress
   Indicator "Steps"). 07.10.2026 nach Wireframe: je Schritt eine
   Kachel „Schritt 1 / Ihr Anliegen", aktiver Schritt hervorgehoben. */
.adea-form .fluentform .ff-step-titles {
  display: grid !important;
  grid-template-columns: none;
  grid-auto-columns: minmax(0, 1fr); /* alle Schritte gleich breit */
  grid-auto-flow: column;
  gap: var(--adea-space-2);
  margin: 0 0 var(--adea-space-4) !important;
  padding: 0 !important;
  list-style: none;
  counter-reset: adea-step;
}

.adea-form .fluentform .ff-step-titles li {
  counter-increment: adea-step;
  position: relative;
  margin: 0 !important;
  padding: var(--adea-space-2) var(--adea-space-3) !important;
  background: var(--adea-shell) !important;
  border: var(--adea-border) !important;
  border-radius: var(--adea-radius);
  font-size: var(--adea-text-s) !important;
  font-weight: var(--adea-weight-semi);
  line-height: var(--adea-leading-snug);
  color: var(--adea-slate) !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
}

.adea-form .fluentform .ff-step-titles li::before {
  content: "Schritt " counter(adea-step) !important;
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0.15em !important;
  background: none !important;
  border: 0 !important;
  font-size: var(--adea-text-xs) !important;
  font-weight: var(--adea-weight-regular) !important;
  line-height: 1.3 !important;
  color: var(--adea-slate) !important;
  text-indent: 0 !important;
}

.adea-form .fluentform .ff-step-titles li::after {
  display: none !important; /* Fluent-Verbindungslinie */
}

.adea-form .fluentform .ff-step-titles li.ff_active {
  background: var(--adea-navy-50) !important;
  border-color: var(--adea-navy-700) !important;
  color: var(--adea-ink) !important;
}

.adea-form .fluentform .ff-step-titles li.ff_completed {
  color: var(--adea-ink) !important;
}

@media (max-width: 599px) {
  .adea-form .fluentform .ff-step-titles li {
    padding: var(--adea-space-1) var(--adea-space-2) !important;
    font-size: var(--adea-text-xs) !important;
  }
}

.adea-form .fluentform .ff-el-progress {
  height: 4px;
  background: var(--adea-line);
  border-radius: 0;
  overflow: hidden;
}

.adea-form .fluentform .ff-el-progress-bar {
  background: var(--adea-navy-700);
}

.adea-form .fluentform .ff-el-progress-bar span {
  display: none; /* Prozentzahl im Balken */
}

.adea-form .fluentform .ff-el-progress-status {
  font-size: var(--adea-text-xs);
  color: var(--adea-slate);
}

/* Buttons: Weiter/Absenden wie ADEA-Primary, Zurück als Outline */
.adea-form .fluentform .ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--adea-space-2) var(--adea-space-4);
  font: inherit;
  font-weight: var(--adea-weight-semi);
  border-radius: var(--adea-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--adea-transition), border-color var(--adea-transition), color var(--adea-transition);
}

.adea-form .fluentform :is(.ff-btn-submit, .ff-btn-next) {
  background: var(--adea-btn-bg) !important;
  color: var(--adea-btn-text) !important;
  border-color: var(--adea-btn-bg) !important;
}

.adea-form .fluentform :is(.ff-btn-submit, .ff-btn-next):hover {
  background: var(--adea-btn-bg-hover) !important;
  border-color: var(--adea-btn-bg-hover) !important;
}

.adea-form .fluentform .ff-btn-prev {
  background: transparent !important;
  color: var(--adea-ink) !important;
  border-color: var(--adea-btn-ghost-border) !important;
}

.adea-form .fluentform .ff-btn-prev:hover {
  background: var(--adea-btn-ghost-hover) !important;
}

.adea-form .fluentform .ff-btn:focus-visible {
  outline: 2px solid var(--adea-focus);
  outline-offset: 2px;
}

.adea-form .fluentform .step-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--adea-space-2);
  margin-block-start: var(--adea-space-3);
}

/* Durchsuchbares Dropdown (Fluent nutzt Choices.js): englischen
   Hinweis „Press to select" ausblenden, Darstellung an die übrigen
   Felder angleichen. */
.adea-form .choices__list--dropdown .choices__item--selectable::after,
.adea-form .choices__list[aria-expanded] .choices__item--selectable::after {
  display: none !important;
}

.adea-form .choices__list--dropdown .choices__item--selectable {
  padding-right: var(--adea-space-3) !important;
}

.adea-form .choices__list--dropdown .choices__item.is-highlighted {
  background: var(--adea-navy-50) !important;
}

/* Datei-Upload */
.adea-form .fluentform .ff_upload_btn.ff-btn {
  background: var(--adea-shell);
  color: var(--adea-ink);
  border: 1px dashed var(--adea-navy-400);
  font-weight: var(--adea-weight-medium);
}

.adea-form .fluentform .ff_upload_btn.ff-btn:hover {
  background: var(--adea-navy-50);
}

.adea-form .fluentform .ff-uploaded-list {
  font-size: var(--adea-text-s);
}

/* Fehler & Rückmeldungen */
.adea-form .fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--adea-sand-text);
}

.adea-form .fluentform .ff-el-is-error .text-danger,
.adea-form .fluentform .error.text-danger {
  font-size: var(--adea-text-xs);
  color: var(--adea-sand-text);
}

.adea-form .ff-message-success {
  padding: var(--adea-space-3);
  background: var(--adea-navy-50);
  color: var(--adea-navy-900);
  border: 0;
  border-radius: var(--adea-radius);
  box-shadow: none;
}

/* Handy: Buttons volle Breite, Spalten untereinander */
@media (max-width: 599px) {
  .adea-form .fluentform .ff-t-container {
    display: block;
  }
  .adea-form .fluentform .ff-t-cell {
    width: 100% !important; /* Fluent setzt Spaltenbreite inline */
    padding: 0;
  }
  .adea-form .fluentform .step-nav .ff-btn,
  .adea-form .fluentform .ff-btn-submit {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Formular-Layout (07.10.2026, nach Wireframe): Formular breit
   (2/3), daneben schmale Spalte für Kontakt/Ansprechpartner,
   die beim Scrollen stehen bleibt. Unter 992px untereinander,
   Kontaktkarte dann unter dem Formular. */
.adea-grid--form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--adea-space-4);
  align-items: start;
}

@media (min-width: 992px) {
  .adea-grid--form {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--adea-space-5);
  }
  .adea-form-aside {
    position: sticky;
    top: calc(var(--adea-space-6) + 2rem); /* unter dem Sticky-Header */
  }
}

.adea-form-aside {
  display: flex;
  flex-direction: column;
  gap: var(--adea-space-3);
}

/* Formular-Karte: weiße Fläche auf --tint-Section */
.adea-form-card {
  align-self: start; /* nicht auf Höhe der rechten Spalte strecken */
  padding: var(--adea-space-5);
  background: var(--adea-paper);
  border: 1px solid var(--adea-petrol-100);
  border-radius: var(--adea-radius);
  box-shadow: var(--adea-shadow-card);
}
@media (max-width: 599px) {
  .adea-form-card { padding: var(--adea-space-4); }
}


/* ------------------------------------------------------------
   12. Personen und Partner (Phase 6, 13.10.2026)

   .adea-portrait   Porträtfoto einer Ansprechperson (Immobilien-
                    verkauf: Emma Hippert, später Über uns: GF).
                    Hochformat 4:5, Bildausschnitt oben, damit der
                    Kopf bei jeder Breite im Bild bleibt.
   .adea-partner-logo  Logo eines Partners/Schwesterunternehmens
                    klein über dem Text — nicht als großes Bild.
   ------------------------------------------------------------ */

.adea-portrait {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: var(--adea-radius);
}

.adea-partner-logo {
  width: auto;
  max-width: 10rem;
  max-height: 4.5rem;   /* zweizeilige Logos (ZETA): Unterzeile bleibt lesbar */
  object-fit: contain;
  object-position: left center;
}

/* ------------------------------------------------------------
   13. Raster mit Spalten-Obergrenze (Zusatzklasse)
   .adea-grid--2 bricht per auto-fit auf breiten Bildschirmen in
   3 Spalten um (Mindestbreite 22rem, C5). Wo genau 4 Karten
   stehen, ergibt das 3 + 1. Zusatzklasse .adea-grid--max2 neben
   .adea-grid--2: höchstens 2 Spalten, schmal weiterhin 1 Spalte.
   Keine Media Query nötig.
   ------------------------------------------------------------ */

.adea-grid--2.adea-grid--max2 {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(22rem, calc((100% - var(--adea-space-3)) / 2))), 1fr)
  );
}

/* 4er-Raster mit genau 4 Karten (Kennzahlen, 4 Schritte): nie 3 + 1.
   Schmal 1 Spalte, mittel höchstens 2, ab 64rem genau 4.
   Greift automatisch, keine Klasse in Bricks nötig. Browser ohne
   :has() behalten das normale auto-fit-Verhalten (C5). */
.adea-grid--4:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(13rem, calc((100% - var(--adea-space-3)) / 2))), 1fr)
  );
}

@media (min-width: 64rem) {
  .adea-grid--4:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Kleingedruckter Hinweis / Disclaimer („ohne Gewähr"), z. B. unter der
   FAQ auf /hausverwaltung-kosten/ (Phase 8, 19.10.2026). Als Bricks-
   Klassenhülle anlegen, keine Panel-Werte. */
.adea-hinweis {
  max-width: 65ch;
  margin-block-start: var(--adea-space-4);
  color: var(--adea-slate);
  font-size: var(--adea-text-s);
  line-height: 1.5;
}