/* ==========================================================================
   eBesucher Komponenten — der gemeinsame Baukasten
   ==========================================================================

   Zweck: Eine neue Seite entsteht durch Zusammensetzen dieser Klassen, nicht
   durch eine neue CSS-Datei. Solange das der billigste Weg ist, bleibt das
   Design einheitlich — genau daran ist der alte Styleguide gescheitert, denn
   dort war eine eigene <style>-Insel im Template immer schneller.

   Hier steht KEIN roher Farb-, Radius- oder Schattenwert. Alles kommt aus
   web/css/tokens.css. Wer hier einen Hex-Wert einfuegt, hebelt das System aus.

   Zusammenstellung visuell freigegeben ueber
   doc/previews/design-system.html (2026-09-04). Jede Klasse traegt, worauf sie
   beruht:
     [gewaehlt]   — in der Preview angehakt
     [impliziert] — funktional noetig, damit eine angehakte Komponente
                    vollstaendig ist (Zustaende wie disabled, Fokus)

   Reihenfolge im Dokument: tokens.css MUSS vorher geladen sein.
   ========================================================================== */

/* ==========================================================================
   1. Typografie
   ========================================================================== */

.eb-h1,
.eb-h2,
.eb-h3 {
    font-family: var(--eb-font-sans);
    color: var(--eb-color-text);
    font-weight: 700;
    margin: 0 0 var(--eb-space-md);
}

.eb-h1 { font-size: var(--eb-text-3xl); line-height: var(--eb-leading-tight); }   /* [gewaehlt] Seitentitel */
.eb-h2 { font-size: var(--eb-text-2xl); line-height: var(--eb-leading-snug); }   /* [gewaehlt] Abschnittstitel */
.eb-h3 { font-size: var(--eb-text-xl);  line-height: var(--eb-leading-snug); }   /* [gewaehlt] Untertitel */

.eb-lead {                                          /* [gewaehlt] Einstieg unter der H1 */
    font-size: var(--eb-text-lg);
    line-height: var(--eb-leading-relaxed);
    color: var(--eb-color-text-muted);
    margin: 0 0 var(--eb-space-lg);
}

.eb-small {                                         /* [gewaehlt] Meta, Fussnoten */
    font-size: var(--eb-text-xs);
    color: var(--eb-color-text-subtle);
}

/* --------------------------------------------------------------------------
   Links im Fliesstext sind fett. [gewaehlt]

   Bewusst als Regel auf dem Inhaltsbereich und NICHT als Klasse am einzelnen
   Link oder als <strong> im Text: die Auszeichnung gehoert zur Darstellung,
   nicht zum Inhalt. Ein <strong> um jeden Link herum wandert sonst in
   Uebersetzungen, in den Blog-Export und in die Vorlesereihenfolge von
   Screenreadern, wo es faelschlich Betonung bedeutet.

   Anwenden, indem der Textcontainer .eb-content bekommt.
   -------------------------------------------------------------------------- */
/* Lesegroesse wie /werbung/besucher-kaufen — diese Seite ist der Massstab fuer
   Schrift und Zeilenabstand im Fliesstext. */
.eb-content {
    font-family: var(--eb-font-sans);
    font-size: var(--eb-text-lg);
    line-height: var(--eb-leading-normal);
    color: var(--eb-color-text-secondary);
}

/* Geltungsbereich: nicht nur .eb-content, sondern die Textcontainer, die es im
   Bestand schon gibt. Sonst waere die Regel keine Regel, sondern ein Angebot —
   und genau das war der Zustand vorher:

     .lp-prose / .bv-hero   landing-typography-style.html.twig   3 Templates
     .content-wrapper       ueberhaupt nicht definiert          40 Templates
     .eb-content            neu, noch ungenutzt

   Auf /werbung/buchen stand "AdScore.com" deshalb blau, aber duenn. Die Regel
   steht jetzt EINMAL hier; das Snippet verweist nur noch hierher.

   Elemente, die zufaellig ein <a> sind, aber kein Fliesstext-Link — Knoepfe,
   Kacheln, Chips —, muessen herausgehalten werden. Ohne das schlaegt die Regel
   die weisse Schrift aus .button und der blaue Knopf traegt blaue Schrift auf
   blauem Grund; dieser Fehler ist schon einmal passiert.

   FRUEHER als :not()-Kette an jedem Selektor gebaut. Das ging schief: die
   Kette stand nur an der Grundregel, die :hover-Regel schloss bloss .button
   aus. Beim Ueberfahren schlug der Fliesstext-Stil deshalb auf Laenderkacheln
   und Chips durch und unterstrich sie.

   Jetzt umgedreht: eine Regel fuer alle Links im Textbereich, danach EIN
   Ruecksetzer fuer alles, was zwar ein <a> ist, aber eine Komponente — Knopf,
   Kachel, Chip, Badge. Der Ruecksetzer deckt Ruhe- und Hover-Zustand in einem
   ab, es kann also nicht mehr die eine Haelfte vergessen werden. */
:where(.eb-content, .content-wrapper, .lp-prose, .bv-hero) a {
    color: var(--eb-color-primary);
    font-weight: 700;
    text-decoration: none;
}

:where(.eb-content, .content-wrapper, .lp-prose, .bv-hero) a:hover,
:where(.eb-content, .content-wrapper, .lp-prose, .bv-hero) a:focus-visible {
    color: var(--eb-color-primary-hover);
    text-decoration: underline;
}

/* Kein Ruecksetzer mehr noetig: die Regeln oben stehen in :where() und tragen
   damit KEINE Spezifitaet. Jede Komponentenklasse (.button, .eb-btn, .eb-tile,
   .eb-chip ...) gewinnt automatisch mit ihrer eigenen Farbe und Schrift.

   Vorher stand hier :is() plus ein Ruecksetzer mit color: inherit. Beides war
   falsch: :is() traegt die Spezifitaet einer Klasse und schlug die Komponenten,
   und color: inherit holte ausgerechnet die Fliesstextfarbe - der blaue Knopf
   bekam schwarze Schrift, die weisse Kachel blaue. */

/* ==========================================================================
   2. Container
   ========================================================================== */

/* Die Seitenbreite — es gibt nur diese eine. Wie breit der TEXT darin laeuft,
   entscheidet nicht der Container, sondern .eb-measure weiter unten. */
.eb-container {
    max-width: var(--eb-page);
    margin-inline: auto;
    padding-inline: var(--eb-space-md);
}

/* Die Ausnahme. Nur fuer Seiten, deren HAUPTINHALT die Breite braucht —
   Bestellformular, Datentabelle, Dashboard. Welche das sind und warum, steht
   in tokens.css bei --eb-page-wide; wer eine Seite dazunimmt, traegt sie dort
   ein. Fliesstext bekommt sie nie. */
.eb-container--wide {
    max-width: var(--eb-page-wide);
}

/* ==========================================================================
   3. Buttons

   Grundform ist die Pille (Entscheidung D). Alle Buttons teilen sich eine
   Basis; Varianten aendern nur Farbe oder Groesse, nie die Form.
   ========================================================================== */

/* REFERENZKNOPF: .cta-primary aus dem Hero der Startseite
   (home/index-modern.html.twig, "Traffic kaufen ->"). Diese Optik wurde am
   2026-09-04 als verbindlich benannt; die Masse sind von dort uebernommen und
   nicht neu erfunden — deshalb 12px/32px und gap 10px, obwohl das nicht auf der
   4px-Abstandsleiter liegt.

   Das ist kein Widerspruch zur Leiter: Innenabstaende einer Komponente sind
   Teil ihrer Definition und stehen hier EINMAL. Die Leiter regelt das
   Seiten-Layout — Abschnittsabstaende, Rasterluecken —, nicht das Innenleben
   eines Knopfes. Waere es andersherum, waere jeder Knopf woanders anders gross.

   Schriftstaerke ist bewusst 600 und nicht 700: bei 1.1rem auf blauem Grund
   laeuft 700 zu, der Referenzknopf steht auf 600. */
.eb-btn {                                           /* [gewaehlt] Grundform, primaer */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;                                      /* [gewaehlt] Abstand zum Icon */
    font-family: var(--eb-font-sans);
    font-size: var(--eb-text-lg);
    font-weight: 600;
    line-height: var(--eb-leading-tight);
    padding: 12px 32px;
    border: 2px solid var(--eb-color-primary);
    border-radius: var(--eb-radius-pill);
    background: var(--eb-color-primary);
    color: var(--eb-color-text-on-dark);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--eb-transition-fast),
                border-color var(--eb-transition-fast),
                transform var(--eb-transition-fast);
}

/* Das Pfeil-Icon des Referenzknopfes. */
.eb-btn svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.eb-btn:hover {
    background: var(--eb-color-primary-hover);
    border-color: var(--eb-color-primary-hover);
    transform: translateY(-2px);
}

.eb-btn:active {
    background: var(--eb-color-primary-active);
    border-color: var(--eb-color-primary-active);
    transform: none;
}

/* [impliziert] Ohne sichtbaren Fokus ist der Button per Tastatur nicht
   auffindbar (WCAG 2.4.7). Einziger erlaubter Schatten im System. */
.eb-btn:focus-visible {
    outline: 2px solid var(--eb-color-primary);
    outline-offset: 2px;
    box-shadow: var(--eb-shadow-focus);
}

/* Varianten aendern nur die Farbe, nie Form oder Masse — der Rahmen muss
   mitziehen, sonst blitzt das Primaerblau an den Kanten durch. */
.eb-btn--danger {                                   /* [gewaehlt] Loeschen, Kuendigen */
    background: var(--eb-color-error);
    border-color: var(--eb-color-error);
}
.eb-btn--danger:hover {
    background: var(--eb-color-error-hover);
    border-color: var(--eb-color-error-hover);
}
.eb-btn--danger:active {
    background: var(--eb-color-error-hover);
    border-color: var(--eb-color-error-hover);
}

/* Kleine Ausfuehrung fuer Tabellen und Karten — dieselbe Form, ein Schritt
   kleiner auf der Schrift-Leiter, Masse proportional zum Referenzknopf. */
.eb-btn--sm {                                       /* [gewaehlt] in Tabellen und Karten */
    padding: 8px 18px;
    font-size: var(--eb-text-sm);
    gap: 6px;
}

.eb-btn--sm svg { width: 16px; height: 16px; }

/* [impliziert] Ein Button ohne Aus-Zustand laesst sich waehrend eines
   laufenden Vorgangs nicht sperren. */
.eb-btn[disabled],
.eb-btn[aria-disabled="true"] {
    background: var(--eb-color-border);
    color: var(--eb-color-text-subtle);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   4. Karten

   Flach und gerahmt, nicht geschattet. Abgegrenzt wird ueber die Linie.
   ========================================================================== */

.eb-card {                                          /* [gewaehlt] Karte mit Rahmen */
    display: block;
    background: var(--eb-color-bg);
    border: 1px solid var(--eb-color-border);
    border-radius: var(--eb-radius-lg);
    padding: var(--eb-space-lg);
    color: inherit;
}

.eb-card--accent {                                  /* [gewaehlt] hervorgehobene Karte */
    border-left: 4px solid var(--eb-color-primary);
}

.eb-card__title {
    font-size: var(--eb-text-base);
    font-weight: 700;
    color: var(--eb-color-text);
    margin: 0 0 var(--eb-space-sm);
}

.eb-card__text {
    font-size: var(--eb-text-sm);
    color: var(--eb-color-text-muted);
    margin: 0;
}

/* ==========================================================================
   5. Hinweise
   ========================================================================== */

.eb-alert {
    display: flex;
    gap: var(--eb-space-sm);
    align-items: flex-start;
    padding: 0.75rem 0.9rem;
    border: 1px solid;
    border-radius: var(--eb-radius-md);
    font-size: var(--eb-text-sm);
    color: var(--eb-color-text-secondary);
}

/* --------------------------------------------------------------------------
   Icons: Font Awesome 4.x, die Bibliothek des Projekts. Es wird die
   KREIS-Familie verwendet, weil die im Bestand die etablierte ist und alle
   vier Zustaende dieselbe Form teilen — das nackte fa-check (98x) und
   fa-times (38x) stehen dagegen in Listen und Tabellen, nicht in Hinweisen:

     Hinweis    <i class="fa fa-info-circle eb-alert__icon">          16x
     Erfolg     <i class="fa fa-check-circle eb-alert__icon">         22x
     Warnung    <i class="fa fa-exclamation-circle eb-alert__icon">   10x
     Fehler     <i class="fa fa-times-circle eb-alert__icon">          6x

   Die Icon-Farben entsprechen der Tabelle "Alert Types" im alten Styleguide
   (Info #1677ff, Success #52c41a, Warning #faad14, Error #ff4d4f) — dort als
   Hex notiert, hier ueber die Tokens, die genau diese Werte tragen.

   Das Icon traegt aria-hidden: die Bedeutung steht im Text daneben, sonst
   liest ein Screenreader den Zustand doppelt vor.
   -------------------------------------------------------------------------- */
.eb-alert__icon {
    flex: none;
    font-size: 1.05em; /* design-check:ignore relativ zur Hinweis-Schrift, nicht zur Seite */
    line-height: inherit;
    margin-top: 1px;
}

.eb-alert--info .eb-alert__icon    { color: var(--eb-color-primary); }
.eb-alert--success .eb-alert__icon { color: var(--eb-color-success); }
.eb-alert--warning .eb-alert__icon { color: var(--eb-color-warning); }
.eb-alert--error .eb-alert__icon   { color: var(--eb-color-error); }

.eb-alert--info    { background: var(--eb-color-primary-bg); border-color: var(--eb-color-primary-border); }  /* [gewaehlt] */
.eb-alert--success { background: var(--eb-color-success-bg); border-color: var(--eb-color-success-border); }  /* [gewaehlt] */
.eb-alert--warning { background: var(--eb-color-warning-bg); border-color: var(--eb-color-warning-border); }  /* [gewaehlt] */
.eb-alert--error   { background: var(--eb-color-error-bg);   border-color: var(--eb-color-error-border); }    /* [gewaehlt] */

/* ==========================================================================
   6. Badges und Status
   ========================================================================== */

.eb-badge {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid;
    border-radius: var(--eb-radius-pill);
    font-size: var(--eb-text-2xs);
    font-weight: 700;
    white-space: nowrap;
}

.eb-badge--blue  { background: var(--eb-color-primary-bg); border-color: var(--eb-color-primary-border); color: var(--eb-color-primary-hover); }  /* [gewaehlt] */
.eb-badge--green { background: var(--eb-color-success-bg); border-color: var(--eb-color-success-border); color: var(--eb-color-success-hover); }  /* [gewaehlt] */
.eb-badge--red   { background: var(--eb-color-error-bg);   border-color: var(--eb-color-error-border);   color: var(--eb-color-error-hover); }    /* [gewaehlt] */
.eb-badge--grey  { background: var(--eb-color-bg-muted);   border-color: var(--eb-color-border);         color: var(--eb-color-text-muted); }     /* [gewaehlt] */

/* [gewaehlt] Status mit Punkt — kompakt fuer Tabellenzeilen. Der Punkt ist
   nie die einzige Information: daneben steht immer Klartext, sonst waere der
   Zustand fuer Farbenblinde nicht lesbar. */
.eb-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--eb-text-xs);
    color: var(--eb-color-text-secondary);
}

.eb-status__dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: var(--eb-radius-circle);
    background: var(--eb-color-border-strong);
}

.eb-status--green .eb-status__dot  { background: var(--eb-color-success); }
.eb-status--yellow .eb-status__dot { background: var(--eb-color-warning); }
.eb-status--red .eb-status__dot    { background: var(--eb-color-error); }

/* ==========================================================================
   7. Formulare
   ========================================================================== */

.eb-label {                                         /* [gewaehlt] */
    display: block;
    font-size: var(--eb-text-xs);
    font-weight: 700;
    color: var(--eb-color-text-secondary);
    margin-bottom: 5px;
}

.eb-input {                                         /* [gewaehlt] Eingabe- und Auswahlfeld */
    display: block;
    width: 100%;
    font-family: var(--eb-font-sans);
    font-size: var(--eb-text-sm);
    padding: 0.6rem 0.85rem;
    background: var(--eb-color-bg);
    color: var(--eb-color-text);
    border: 1px solid var(--eb-color-border-strong);
    border-radius: var(--eb-radius-md);
}

/* Der einzige Schatten im System. Er ist Bedienbarkeit, keine Dekoration:
   ohne ihn hat die Tastaturbedienung keine sichtbare Markierung. */
.eb-input:focus {
    outline: none;
    border-color: var(--eb-color-primary);
    box-shadow: var(--eb-shadow-focus);
}

.eb-input--error { border-color: var(--eb-color-error); }  /* [gewaehlt] Feld mit Fehler */

.eb-field-error {
    font-size: var(--eb-text-xs);
    color: var(--eb-color-error-hover);
    margin-top: 5px;
}

.eb-check {                                         /* [gewaehlt] Checkbox und Radio */
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--eb-text-sm);
    color: var(--eb-color-text-secondary);
    cursor: pointer;
}

.eb-check input {
    width: 17px;
    height: 17px;
    flex: none;
    accent-color: var(--eb-color-primary);
    cursor: pointer;
}

/* ==========================================================================
   8. Tabellen

   Nachbau der Referenztabelle /werbung/verwalten/seiten in Token-Form. Masse
   und Verhalten stammen von dort und sind bewusst uebernommen: durchgehende
   Tabelle in einem Rahmen, Zeilen nur durch eine Haarlinie getrennt, keine
   abgesetzten Zeilen-Karten. Begruendung siehe
   manageCampaigns/ManageCampaignsPage/shared/_styled/Table.tsx — es zaehlt,
   wie viele Zeilen ohne Scrollen sichtbar sind.
   ========================================================================== */

.eb-table-wrap {                                    /* [gewaehlt] */
    background: var(--eb-color-bg);
    border: 1px solid var(--eb-color-border);
    border-radius: var(--eb-radius-lg);
    overflow: hidden;
}

/* Breite Tabellen scrollen in ihrem eigenen Kasten, damit die Seite selbst
   nicht waagerecht wandert. */
.eb-table-scroll { overflow-x: auto; }

.eb-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    font-family: var(--eb-font-sans);
    font-variant-numeric: tabular-nums;
}

.eb-table thead th {
    background: var(--eb-color-bg-subtle);
    color: var(--eb-color-text-muted);
    font-size: var(--eb-text-table-head);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    padding: 11px 8px;
    border-bottom: 1px solid var(--eb-color-border);
}

.eb-table tbody td {
    height: 48px;
    padding: 4px 8px;
    font-size: var(--eb-text-table);
    color: var(--eb-color-text-secondary);
    border-bottom: 1px solid var(--eb-color-border-light);
    transition: background 0.12s ease;
}

.eb-table tbody tr:last-child td { border-bottom: none; }

.eb-table tbody tr:hover td { background: var(--eb-color-primary-bg-subtle); }

/* Zahlen rechtsbuendig, damit sich Betraege spaltenweise vergleichen lassen. */
.eb-table .eb-num { text-align: right; }

/* Kraeftiger Wert in der Zelle — hebt die Zahl vom Zeilentext ab. */
.eb-table .eb-strong {
    color: var(--eb-color-text);
    font-weight: 500;
}

/* Hinterlegt wird nur der Stoerfall. Ein Zeilenton muss die Ausnahme
   markieren, sonst markiert er nichts. */
.eb-table tbody tr.eb-row-error td { background: var(--eb-color-error-bg); }
.eb-table tbody tr.eb-row-error:hover td { background: var(--eb-color-error-border); }

/* ==========================================================================
   9. Elemente der Referenzseite /werbung/besucher-kaufen

   Diese Seite ist die Referenz fuer die Elementsammlung. Alles hier ist von
   dort uebernommen, nicht neu entworfen; wo ein Wert im uebrigen Satz eine
   praktisch identische Entsprechung hatte, wurde er darauf abgebildet:

     #e4e9f0 -> --eb-color-border      (#eaecf0, Abweichung unter 1 %)
     #fbfcfe -> --eb-color-bg-subtle   (#fbfcfd, ein Punkt Unterschied)
     #1a3a5c -> --eb-color-text-secondary (Navy gegen Neutral, auf einem
                Chip von 16px Hoehe nicht unterscheidbar)

   Wirklich eigene Werte (--eb-color-bg-tint, --eb-color-rail) stehen als
   Tokens in tokens.css, nicht hier.
   ========================================================================== */

/* ---------------------------------------------------------------- Brotkrumen
   Aus .bv-hero__crumbs. Der aktuelle Eintrag steht kraeftig, die Vorstufen
   gedaempft — sonst liest sich der Pfad als Linkliste statt als Ortsangabe. */
.eb-crumbs {
    font-size: var(--eb-text-xs);
    color: var(--eb-color-text);
}

.eb-crumbs a,
.eb-crumbs a:visited {
    color: var(--eb-color-text-subtle);
    font-weight: 400;
    text-decoration: none;
}

.eb-crumbs a:hover,
.eb-crumbs a:focus-visible {
    color: var(--eb-color-primary);
    text-decoration: underline;
}

.eb-crumbs__sep {
    margin: 0 var(--eb-space-sm);
    color: var(--eb-color-text-subtle);
}

/* --------------------------------------------------------------------- Chips
   Aus .solutions-chip. Verwandte Seiten als anklickbare Marken. Beim
   Ueberfahren fuellt sich der Chip mit dem Markenblau — deshalb traegt der
   Ruhezustand eine getoente, keine weisse Flaeche: sonst waere der Sprung von
   Weiss auf Vollblau zu hart. */
.eb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.eb-chip,
.eb-chip:link,
.eb-chip:visited {
    display: inline-block;
    padding: 6px 16px;
    background-color: var(--eb-color-bg-tint);
    color: var(--eb-color-text-secondary);
    font-size: var(--eb-text-sm);
    font-weight: 500;
    border-radius: var(--eb-radius-md);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--eb-transition-fast),
                color var(--eb-transition-fast);
}

.eb-chip:hover,
.eb-chip:active,
.eb-chip:focus-visible {
    background-color: var(--eb-color-primary);
    color: var(--eb-color-text-on-dark);
    text-decoration: none;
}

/* ------------------------------------------------------ Meilenstein-Karten
   Aus .bv-hero__reasons. Nummerierte Karten an einer senkrechten Schiene; die
   Nummer sitzt als Punkt darauf, ein Zeiger verbindet Karte und Schiene.

   Die Schiene liegt als Segment an jeder Karte ausser der letzten und reicht
   vom eigenen Punkt bis zum naechsten. Eine durchgehende Linie am Container
   liefe unter dem letzten Punkt weiter, weil die letzte Karte hoeher ist als
   ihr Punkt.

   ACHTUNG: Die Optik existiert ein zweites Mal in
   assets/react-js/js/BuyVisitors/ReasonsToBuy/Reason.scss — auf der
   Referenzseite rendert React die Gruende 5-8. Aenderungen hier muessen dort
   nachgezogen werden, sonst brechen die Karten in der Mitte der Liste um. */
.eb-reasons {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-left: 54px;
}

.eb-reason {
    position: relative;
}

.eb-reason:not(:last-child)::before {
    content: '';
    position: absolute;
    left: -41px;
    top: 50px;
    bottom: -18px;
    width: 2px;
    background: var(--eb-color-rail);
}

.eb-reason__num {
    position: absolute;
    z-index: 1;
    left: -54px;
    top: 20px;
    width: 28px;
    height: 28px;
    border-radius: var(--eb-radius-circle);
    background: var(--eb-color-primary);
    border: 3px solid var(--eb-color-bg);
    box-shadow: 0 0 0 2px var(--eb-color-rail); /* design-check:ignore Ring auf der Schiene, kein Zierschatten */
    color: var(--eb-color-text-on-dark);
    font-size: var(--eb-text-2xs);
    font-weight: 700;
    line-height: 22px; /* design-check:ignore optische Mitte im 28px-Kreis (28 - 2x3px Rand), keine Typografie */
    text-align: center;
}

.eb-reason__card {
    position: relative;
    border: 1px solid var(--eb-color-border);
    border-radius: var(--eb-radius-lg);
    background: var(--eb-color-bg-subtle);
    padding: 20px 24px;
    text-align: left;
}

.eb-reason__card h3,
.eb-reason__card .eb-reason__title {
    margin: 0 0 var(--eb-space-sm);
    font-size: var(--eb-text-xl);
    line-height: var(--eb-leading-snug);
}

/* Zeiger zur Schiene: zwei deckungsgleiche Dreiecke, das aeussere traegt die
   Randfarbe, das innere einen Punkt weiter rechts die Fuellfarbe. Anders
   bekommt ein CSS-Dreieck keine Kontur. */
.eb-reason__card::before,
.eb-reason__card::after {
    content: '';
    position: absolute;
    top: 22px;
    border-style: solid;
    border-color: transparent;
    border-width: 9px 10px 9px 0;
}

.eb-reason__card::before {
    left: -10px;
    border-right-color: var(--eb-color-border);
}

.eb-reason__card::after {
    left: -9px;
    border-right-color: var(--eb-color-bg-subtle);
}

/* Auf schmalen Schirmen kostet die Schiene zu viel Zeilenbreite: der Punkt
   wandert in die Karte hinein, der Zeiger entfaellt. */
@media screen and (max-width: 600px) {
    .eb-reasons {
        padding-left: 0;
    }

    .eb-reason::before {
        display: none;
    }

    .eb-reason {
        padding-top: 14px;
    }

    .eb-reason__num {
        left: 18px;
        top: 0;
        box-shadow: none;
    }

    .eb-reason__card {
        padding: 18px 18px 20px;
    }

    .eb-reason__card::before,
    .eb-reason__card::after {
        display: none;
    }
}

/* --------------------------------------------------------------- Lesebreite
   Breite ist eine Eigenschaft des INHALTS, nicht der Seite.

   Raster, Karten, Tabellen und Formulare gewinnen durch Platz — dafuer gibt es
   --eb-container-wide (1156px). Fortlaufender Text verliert dadurch: bei 1156px
   und der Lesegroesse 1.1rem laufen ueber 120 Zeichen in eine Zeile, und das
   Auge findet den naechsten Zeilenanfang nicht mehr zuverlaessig.

   Beides gleichzeitig geht, und genau dafuer ist diese Klasse da: die Seite
   bleibt breit, der Text darin faellt auf --eb-container (835px) zurueck.

   Anwenden auf den Textcontainer. Nur direkte Kinder werden begrenzt, damit
   Raster und Karten INNERHALB desselben Containers die volle Breite behalten:

       <div class="content-wrapper lp-prose eb-measure">
           <h2>…</h2>          <- 835px
           <p>…</p>            <- 835px
           <div class="grid">  <- volle Breite
   -------------------------------------------------------------------------- */
   ERST als Positivliste gebaut (nur p, h2, ul …), das war falsch herum: der
   CTA-Knopf steht in einem <div class="cta-inline"> und war damit nicht
   erfasst. Er zentrierte sich weiter auf den vollen 1156px, waehrend der Text
   daneben auf 835px lag — der Knopf sass sichtbar neben der Textmitte.

   Deshalb jetzt umgekehrt: ALLES faellt auf Lesebreite, und was wirklich breit
   sein soll, sagt es mit .eb-full. Das ist die seltenere Ausnahme, und ein
   vergessenes .eb-full faellt sofort auf, waehrend ein vergessener Eintrag in
   einer Positivliste jahrelang unbemerkt danebensteht.
   -------------------------------------------------------------------------- */
.eb-measure > * {
    max-width: var(--eb-measure);
    /* Zentriert, nicht linksbuendig. Ohne das klebt die 835px-Spalte am linken
       Rand des 1156px-Rahmens und rechts steht eine 320px breite Leerflaeche —
       die Seite sieht dann nicht schmal aus, sondern schief. Genau daran lag
       es, dass die frueher durchgehend schmale Fassung besser wirkte: sie war
       nicht schmaler, sie war ausgewogen.

       margin-inline setzt nur links/rechts; Abstaende nach oben und unten
       (--eb-rhythm-*) bleiben unberuehrt. */
    margin-inline: auto;
}

.eb-measure > .eb-full {
    max-width: none;
}

/* ---------------------------------------------------------------- Kacheln
   Anklickbare Kachel mit Bild und Beschriftung — auf /werbung/buchen die neun
   Laenderkacheln, ansonsten ueberall dort, wo eine Liste von Zielen als Raster
   steht statt als Aufzaehlung.

   Der Zustand beim Ueberfahren ist am 2026-09-04 aus fuenf Fassungen gewaehlt
   worden (doc/previews/laenderkachel-varianten.html): ein 4px-Balken waechst
   von links ein, dazu eine leichte Toenung. Bewegung mit Richtung — das Auge
   wird nach rechts in den Text gefuehrt.

   Was NICHT gewaehlt wurde und warum es sich lohnt, das zu wissen:
     - Rahmen faerbt sich blau (der alte Zustand): wirkte wie ein Formularfeld
       im Fokus, nicht wie ein Ziel.
     - Vollton: bei neun Kacheln nebeneinander zu laut.
     - Pfeil rechts: gut, aber nah am Referenzknopf — die Kachel soll nicht wie
       ein Knopf aussehen.

   Der Balken sitzt in einem ::before mit scaleX statt in border-left: eine
   Rahmenbreite laesst sich nicht animieren, ohne dass der Inhalt daneben um
   dieselben 4px springt. */
/* :link und :visited stehen mit dran, damit die Kachel ihren Zustand selbst
   traegt. Ohne das faerbte die :visited-Regel des Textbereichs besuchte
   Laender blau - dieselbe Kachel sah je nach Verlaufshistorie anders aus. */
.eb-tile,
.eb-tile:link,
.eb-tile:visited {
    display: flex;
    align-items: center;
    gap: var(--eb-space-md);
    padding: var(--eb-space-md) 1.25rem;
    background: var(--eb-color-bg);
    border: 1px solid var(--eb-color-border);
    border-radius: var(--eb-radius-lg);
    text-decoration: none;
    color: var(--eb-color-text-secondary);
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: background var(--eb-transition-fast),
                border-color var(--eb-transition-fast);
}

.eb-tile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--eb-color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--eb-transition-fast);
}

.eb-tile:hover,
.eb-tile:focus-visible {
    background: var(--eb-color-primary-bg-subtle);
    color: var(--eb-color-text-secondary);
    text-decoration: none;
}

.eb-tile:hover::before,
.eb-tile:focus-visible::before {
    transform: scaleX(1);
}

/* Tastaturbedienung: der Balken allein ist zu leise, um den Fokus zu zeigen. */
.eb-tile:focus-visible {
    outline: 2px solid var(--eb-color-primary);
    outline-offset: 2px;
}

/* Flagge oder Symbol links. Feste Masse, damit die Beschriftungen aller
   Kacheln im Raster auf derselben Kante beginnen. */
.eb-tile__icon,
.eb-tile .flag-icon {
    width: 48px;
    height: 36px;
    border-radius: var(--eb-radius-md);
    flex: none;
}

.eb-tile__name {
    font-size: var(--eb-text-lg);
    font-weight: 500;
}

/* ------------------------------------------------------- Vertrauensleiste
   Weisse Pillen mit farbigem Symbol — die Fassung, die auf der Startseite
   live steht (home/index-modern.html.twig, .trust-bar > .trust-badge,
   Optik in landing-page-modern.css).

   Warum sie hier landet: /werbung/buchen hatte eine EIGENE Fassung unter
   demselben Klassennamen .trust-badge, lokal im Template. Die Seite laedt
   landing-page-modern.css und ueberschrieb die globale Regel danach — zwei
   Definitionen, ein Name, zwei Aussehen. Genau die Krankheit, gegen die dieses
   System gebaut wird.

   Jede Pille traegt ein EIGENES farbiges Symbol, nicht viermal denselben
   gruenen Haken: die vier Aussagen sind verschieden, und das Symbol traegt
   einen Teil der Bedeutung. Farben ueber die Tokens statt der Rohwerte der
   Startseite (#16a34a, #f59e0b, #3b82f6 -> success, warning, primary).

   Der weiche Schatten bleibt, obwohl das System sonst flach ist: die Pille ist
   als Referenz benannt worden und lebt von ihm — ohne ihn steht sie flach auf
   dem getoenten Grund und wirkt wie ein Eingabefeld. Dokumentierte Ausnahme. */
.eb-trustbar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--eb-space-lg);
}

.eb-trust {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--eb-color-bg);
    padding: 12px 20px;
    border-radius: var(--eb-radius-pill);
    border: 1px solid var(--eb-color-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* design-check:ignore Referenzoptik der Startseite */
}

.eb-trust__icon {
    width: 22px;
    height: 22px;
    flex: none;
    font-size: 18px; /* design-check:ignore Symbolgroesse im 22px-Kaestchen, keine Typografie */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.eb-trust__icon--success { color: var(--eb-color-success); }
.eb-trust__icon--warning { color: var(--eb-color-warning); }
.eb-trust__icon--primary { color: var(--eb-color-primary); }

.eb-trust span {
    font-weight: 600;
    font-size: var(--eb-text-xs);
    color: var(--eb-color-nav-bg);
    white-space: nowrap;
}

/* ------------------------------------------------------------- Prozessweg
   Nummerierte Schritte an einer waagerechten Linie, mit einem Lichtsignal,
   das darueber laeuft. Die Optik ist die der Startseite
   (home/index-modern.html.twig, .home-process-* in landing-page-modern.css)
   und am 2026-09-04 ausdruecklich als die verbindliche Schritt-Darstellung
   benannt worden.

   Warum sie hier landet und nicht per .home-process-* mitbenutzt wird: das
   home-Praefix steht dort mit Absicht, damit eine Aenderung an der Startseite
   keine andere Seite mittrifft. Wer die Klasse trotzdem fremd verwendet, hebt
   genau diese Trennung wieder auf. Der gemeinsame Baustein gehoert deshalb
   hierher - dieselbe Ueberlegung wie bei .eb-trustbar weiter oben.

   Die Startseite laeuft vorerst weiter auf ihrer eigenen Fassung. Wer sie
   anfasst, stellt sie auf .eb-process um und loescht .home-process-* dort.

   Masse (56px Kreis, 3px Linie, Linie auf halber Kreishoehe) sind Geometrie
   dieses Bausteins und stehen deshalb roh - wie beim Referenzknopf. */
.eb-process {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.eb-process__line {
    position: absolute;
    top: 27px; /* design-check:ignore halbe Kreishoehe minus halbe Linienstaerke */
    left: 60px;
    right: 60px;
    height: 3px;
    background: var(--eb-color-border);
    border-radius: var(--eb-radius-md);
    overflow: hidden;
    z-index: 0;
}

/* Das Lichtsignal. Es traegt die Leserichtung: die drei Schritte sind eine
   Reihenfolge, keine Aufzaehlung. */
.eb-process__line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--eb-color-primary), transparent);
    animation: ebProcessSignal 2.8s ease-in-out infinite;
}

@keyframes ebProcessSignal {
    0%   { left: -30%; }
    100% { left: 100%; }
}

.eb-process__node {
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
}

.eb-process__num {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--eb-space-lg);
    border-radius: var(--eb-radius-circle);
    background: var(--eb-color-bg);
    border: 3px solid var(--eb-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eb-color-primary);
    font-size: var(--eb-text-xl);
    font-weight: 800;
    animation: ebProcessPulse 2.8s ease-in-out infinite;
}

/* Der Ring ist Bewegung, keine Abgrenzung - deshalb kein Verstoss gegen die
   Flach-Regel des Systems. */
@keyframes ebProcessPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 119, 255, .35); }  /* design-check:ignore Puls, kein Zierschatten */
    15%      { box-shadow: 0 0 0 10px rgba(22, 119, 255, 0); } /* design-check:ignore dito */
}

.eb-process__title {
    margin: 0 0 var(--eb-space-sm);
    font-size: var(--eb-text-lg);
    font-weight: 700;
    color: var(--eb-color-text);
}

.eb-process__desc {
    margin: 0;
    font-size: var(--eb-text-sm);
    color: var(--eb-color-text-muted);
}

.eb-process-cta {
    text-align: center;
    margin-top: var(--eb-rhythm-lg);
}

/* Untereinander gestapelt hat die Linie keine Bedeutung mehr - sie liefe
   senkrecht durch die Beschriftungen. */
@media (max-width: 700px) {
    .eb-process {
        flex-direction: column;
        align-items: center;
        gap: var(--eb-space-xl);
    }

    .eb-process__line {
        display: none;
    }
}

/* Dieselbe Zusage wie in landing-page-modern.css: Dauerschleifen laufen nur,
   wenn der Nutzer nicht ausdruecklich weniger Bewegung verlangt hat. */
@media (prefers-reduced-motion: reduce) {
    .eb-process__line::after,
    .eb-process__num {
        animation: none;
    }
}