/*
 * Boxen-Börse — Frontend
 *
 * Grundsätze aus dem Ökosystem:
 *  - AUSSCHLIESSLICH opake Farben. Halbtransparente Flächen kippen im
 *    BeTheme-Darkmode ins Unleserliche (gelernte Lehre).
 *  - Container Queries statt Media Queries: Die Bausteine stehen mal in
 *    voller Breite, mal in einer schmalen Spalte — entscheidend ist die
 *    Breite des Containers, nicht die des Fensters. Breakpoint 560px,
 *    mit @supports-Fallback für ältere Browser.
 *  - aspect-ratio-Platzhalter für jedes Bild, damit beim Nachladen nichts
 *    springt (CLS-Muster aus einstreu-pro-calculator).
 *
 * Markenfarben: #CA8F65 (Kupfer), #282828 (Anthrazit), #FAF6F2 (Creme).
 * Für Text auf hellem Grund ist das Kupfer zu hell (2,6:1) — dafür gibt es
 * --ebb-akzent-text mit 4,9:1, das WCAG AA erfüllt.
 */

.ebb {
    --ebb-kupfer: #ca8f65;
    --ebb-akzent-text: #8a5a33;
    --ebb-dunkel: #282828;
    --ebb-creme: #faf6f2;
    --ebb-flaeche: #ffffff;
    --ebb-rand: #e2d8cf;
    --ebb-text: #282828;
    --ebb-text-leise: #5c5449;
    /* Schrift auf der Caramel-Chipfläche. Wird im Darkmode bewusst NICHT
       umgeschaltet — die Fläche darunter wechselt ja auch nicht. */
    --ebb-badge-text: #282828;

    /*
     * Schrift im Kopfbereich des Verzeichnisses (0.4.4). Siehe die ausführliche
     * Begründung bei `.ebb-verzeichnis-titel` — kurz: Diese beiden Zeilen
     * stehen auf der dunklen Kopffläche des Themes und dürfen deshalb NICHT
     * erben. Folgt bewusst keinem Farbschema: Der Kopf wechselt auch keines.
     */
    --ebb-kopf-text: #faf6f2;

    /*
     * Eingabefelder — dieselbe Logik wie beim Badge-Chip: eigene Fläche,
     * eigene Schriftfarbe, in BEIDEN Farbschemata gleich.
     *
     * Warum überhaupt eigene Variablen, wo es doch --ebb-flaeche und
     * --ebb-text gibt: Die beiden folgen dem Systemschema. Ein Feld, dessen
     * Hintergrund mitkippt, wird unlesbar, sobald irgendetwas anderes die
     * Schriftfarbe bestimmt — und genau das tun Themes bei Feldtypen, die eine
     * Plugin-Regel nicht erwischt. Der Live-Befund 08/2026 war die Kombination
     * aus beidem: dunkler Feldhintergrund von uns, hellgraue Schrift vom Theme.
     *
     * Diese sechs Werte tauchen im Darkmode-Block deshalb NICHT auf. Die
     * Kartendeko darf variieren, der Feldkontrast nicht.
     *
     * Kontraste gegen die Feldfläche (#ffffff):
     *   Text        #282828  14,7:1   (Forderung ≥7:1)
     *   Platzhalter #6b6259   6,0:1   (Forderung ≥4,5:1, klar heller als Text)
     *   Rand        #948a80   3,4:1   (SC 1.4.11: Bedienelement-Umriss ≥3:1)
     *   Fokus       #8a5a33   5,9:1   (SC 1.4.11 ≥3:1)
     */
    --ebb-feld-flaeche: #ffffff;
    --ebb-feld-flaeche-fokus: #faf6f2;
    --ebb-feld-text: #282828;
    --ebb-feld-platzhalter: #6b6259;
    --ebb-feld-rand: #948a80;
    --ebb-feld-fokus: #8a5a33;
    /* Fehlerrand eines Feldes. Nicht --ebb-fehler: das wird im Darkmode zu
       einem hellen Rot (#ff9a9a) und käme auf der jetzt immer hellen
       Feldfläche auf 2,0:1 — der Rand wäre dort, wo er am meisten zählt,
       am schlechtesten zu sehen. Dieser Wert liegt bei 7,2:1. */
    --ebb-fehler-rand: #a32b2b;

    /*
     * Native Widgets an die helle Karte binden — Datumswähler, Auswahllisten,
     * Ankreuzfelder, Bildlaufleisten. Ohne diese Zeile folgen sie dem
     * Betriebssystem und stehen dunkel auf unserer hellen Fläche.
     *
     * Bewusst HIER und nicht auf :root: Ein globales color-scheme wäre ein
     * Übergriff auf Theme und andere Plugins.
     */
    color-scheme: light;
    --ebb-fehler: #a32b2b;
    --ebb-fehler-flaeche: #fdf0f0;
    --ebb-erfolg: #2e6b3a;
    --ebb-erfolg-flaeche: #eff6f0;
    --ebb-radius: 10px;
    --ebb-luft: 1rem;

    container-type: inline-size;
    color: var(--ebb-text);
    font-size: 1rem;
    line-height: 1.55;
}

@media (prefers-color-scheme: dark) {
    .ebb {
        --ebb-flaeche: #1f1f1f;
        --ebb-creme: #262626;
        --ebb-rand: #3d3d3d;
        --ebb-text: #f2ede8;
        --ebb-text-leise: #b9b1a8;
        --ebb-akzent-text: #e0a97c;
        --ebb-fehler: #ff9a9a;
        --ebb-fehler-flaeche: #3a2222;
        --ebb-erfolg: #8fd39f;
        --ebb-erfolg-flaeche: #1f2e23;
    }
}

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

/* ---------- Hinweise ---------- */

.ebb-hinweis {
    background: var(--ebb-creme);
    border: 1px solid var(--ebb-rand);
    border-left: 4px solid var(--ebb-kupfer);
    border-radius: var(--ebb-radius);
    padding: var(--ebb-luft);
    margin: 0 0 1.5rem;
}

.ebb-hinweis p { margin: 0 0 .5rem; }
.ebb-hinweis p:last-child { margin-bottom: 0; }

.ebb-hinweis--fehler {
    background: var(--ebb-fehler-flaeche);
    border-left-color: var(--ebb-fehler);
    color: var(--ebb-text);
}

.ebb-hinweis--fehler ul { margin: .25rem 0 0 1.25rem; }

.ebb-hinweis--erfolg {
    background: var(--ebb-erfolg-flaeche);
    border-left-color: var(--ebb-erfolg);
}

/* ---------- Formular ---------- */

.ebb-block {
    background: var(--ebb-flaeche);
    border: 1px solid var(--ebb-rand);
    border-radius: var(--ebb-radius);
    padding: var(--ebb-luft);
    margin: 0 0 1rem;
}

/*
 * Legends ins Karteninnere holen.
 *
 * Browser rendern <legend> nativ MITTEN AUF der oberen Fieldset-Kante: Die
 * obere Texthälfte liegt dann nicht mehr auf der hellen Kartenfläche, sondern
 * auf dem Seitenhintergrund. Auf einem dunklen Theme steht dort dunkler Text
 * auf dunklem Grund — die Überschrift wirkt abgeschnitten und ist
 * stellenweise gar nicht lesbar (Live-Befund Etappe 3).
 *
 * `float: left` mit voller Breite ist der etablierte Weg dafür: Er nimmt das
 * Element aus der Sonderbehandlung des Rahmens und lässt es als gewöhnlichen
 * Block im Karteninneren fließen. `display: block` genügt NICHT — mehrere
 * Browser ignorieren `display` bei <legend> für genau diese Positionierung.
 *
 * Das Element bleibt ein echtes <legend> im echten <fieldset>: Screenreader
 * lesen die Gruppenüberschrift weiter vor jedem Feld der Gruppe vor
 * (Spec §4.7). Geändert wird ausschließlich die Darstellung.
 */
.ebb legend {
    float: left;
    width: 100%;
    padding: 0;
}

/*
 * Der Float muss beendet werden, bevor der Inhalt beginnt. Bei
 * inline-flex-Nachbarn (Filterkästchen) greift `clear` zwar nicht — dort
 * schiebt der 100 % breite Float die folgenden Zeilen ohnehin nach unten.
 */
.ebb legend + * { clear: both; }

/* Legend und Summary sind beide Abschnittstitel und sehen deshalb gleich aus. */
.ebb-block > legend,
.ebb-klapp > summary {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ebb-text);
}

.ebb-block > legend {
    margin-bottom: .75em;
    padding-bottom: .3em;
    border-bottom: 2px solid var(--ebb-kupfer);
}

/*
 * Der Summary behält seine Klickbarkeit sichtbar: Sähe er exakt aus wie eine
 * Legend, wäre nicht mehr erkennbar, dass sich dahinter etwas aufklappt.
 */
.ebb-klapp > summary {
    cursor: pointer;
    padding: .1rem 0;
    list-style-position: outside;
}

.ebb-klapp > summary:focus-visible {
    outline: 3px solid var(--ebb-akzent-text);
    outline-offset: 2px;
}

.ebb-klapp[open] > summary {
    margin-bottom: .5em;
    padding-bottom: .3em;
    border-bottom: 2px solid var(--ebb-kupfer);
}

.ebb-klapp-inhalt { padding-top: .25rem; }

.ebb-feld { margin: 0 0 .85rem; }

.ebb-feld label,
.ebb-wahl label {
    display: inline-block;
    font-weight: 600;
    margin-bottom: .3rem;
}

/*
 * Eingabefelder.
 *
 * NICHT nach Feldtyp aufgezählt, sondern über einen Ausschluss. Die alte
 * Liste (`text`, `tel`, `date`, `number`, `file`) hatte `email` vergessen —
 * und genau die drei E-Mail-Felder in Kontakt- und Meldeformular erbten
 * daraufhin die hellgraue Themeschrift. Eine Aufzählung ist hier die falsche
 * Bauform: Sie ist stumm falsch, sobald ein Feldtyp dazukommt.
 *
 * `hidden` fällt raus, weil es nichts zu färben gibt; Ankreuz- und
 * Auswahlfelder bekommen weiter unten ihre eigene Behandlung, weil bei ihnen
 * `background`/`color` nichts ausrichten. Knopf-Eingabefelder ebenfalls: Die
 * Templates benutzen durchweg <button>, aber ein Theme-Override könnte
 * <input type="submit"> einsetzen — der soll dann ein Knopf bleiben und keine
 * weiße Textzeile werden.
 */
.ebb input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
.ebb select,
.ebb textarea {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--ebb-feld-rand);
    border-radius: 8px;
    background-color: var(--ebb-feld-flaeche);
    color: var(--ebb-feld-text);
    font: inherit;
}

/*
 * Platzhalter dunkler als der Browserstandard, aber deutlich heller als der
 * echte Wert. Beides zählt: Ein Platzhalter, der wie eine Eingabe aussieht,
 * ist genauso schlecht wie einer, den man nicht lesen kann.
 *
 * `opacity` bleibt bewusst weg — Firefox tönt Platzhalter sonst zusätzlich ab
 * und macht den gerade hergestellten Kontrast wieder kaputt.
 */
.ebb input::placeholder,
.ebb textarea::placeholder {
    color: var(--ebb-feld-platzhalter);
    opacity: 1;
}

/*
 * GESCHLOSSENES select im FOKUS — dritte Schicht, portiert aus dem
 * B2B-Manager (dort form.css seit v0.12.5, live verifiziert, Test 57).
 *
 * Chrome malt beim fokussierten `<select>` unter dunklem Systemschema einen
 * INTERNEN dunklen Hintergrund. Das ist nicht das `option`-Element (das ist
 * seit der Element-Schicht in Ordnung) und nicht die Feldfläche, die wir
 * setzen — es ist ein Wert, den weder `color-scheme` noch eine gewöhnliche
 * Regel erreicht. `color` bleibt dabei bei rgb(40,40,40): schwarz auf schwarz.
 *
 * Dagegen hilft nur `background-color` am Fokuszustand mit `!important` — kein
 * Autoren-CSS setzt diesen internen Wert auf normalem Weg.
 * `-webkit-text-fill-color` überstimmt zusätzlich Chromes interne Textfarbe,
 * die `color` allein nicht immer schlägt.
 *
 * Die Werte stehen hier ABSICHTLICH als Literale und nicht als Token
 * (--ebb-feld-flaeche-fokus / --ebb-feld-text trügen dieselben Werte): Sie
 * müssen in jeder Darstellung identisch bleiben, und ein Token lädt dazu ein,
 * sie eines Tages im Darkmode-Block „mitzuziehen". Genau dieser Griff wäre
 * hier fatal, weil die Regel ihn nicht überleben würde.
 *
 * `:focus` UND `:focus-visible`: Die Fläche muss auch bei Mauseingabe stimmen,
 * nicht nur bei Tastaturfokus.
 */
.ebb select:focus,
.ebb select:focus-visible,
.ebb input:focus,
.ebb textarea:focus {
    background-color: #FAF6F2 !important;
    color: #282828 !important;
    -webkit-text-fill-color: #282828 !important;
}

.ebb input:focus-visible,
.ebb select:focus-visible,
.ebb textarea:focus-visible,
.ebb-wahl input:focus-visible {
    outline: 3px solid var(--ebb-feld-fokus);
    outline-offset: 1px;
}

/* Automatisch ausgefüllte Felder färbt Chrome eigenmächtig ein — auf einem
   dunklen Systemschema in genau die Kombination, um die es hier geht. */
.ebb input:-webkit-autofill,
.ebb input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ebb-feld-text);
    box-shadow: inset 0 0 0 100px var(--ebb-feld-flaeche-fokus);
}

/*
 * Ankreuz- und Auswahlfelder zeichnet der Browser selbst. `accent-color` ist
 * der einzige Hebel, der dabei greift — und der dunkle Caramelton, damit das
 * gesetzte Häkchen auch auf hellem Grund steht.
 */
.ebb input[type="checkbox"],
.ebb input[type="radio"] {
    accent-color: var(--ebb-feld-fokus);
    /* Auch hier am Element: Das leere Kästchen zeichnet der UA, und im dunklen
       Systemschema zeichnet er es dunkel — auf unserer hellen Karte. */
    color-scheme: light !important;
    width: auto;
}

/*
 * UA-Popups folgen dem ELEMENT, nicht dem Container.
 *
 * `color-scheme: light` steht seit 0.4.3 auf `.ebb`. Für Feldflächen genügt
 * das — für die aufgeklappte Auswahlliste nicht: Chromium zeichnet sie außerhalb
 * des Dokumentflusses und liest das Schema am `<select>` selbst ab. Live-Befund
 * 0.4.3: Eingabefelder korrekt hell, das geöffnete Popup von „Haltungsform"
 * dunkel mit dunkelgrauer Schrift — nur die überfahrene Zeile war lesbar.
 *
 * Deshalb dieselbe Angabe noch einmal am Element. `!important` ist hier die
 * bewusste Ausnahme von der Regel aus 0.4.3 (dort: keins). Begründung: Es geht
 * ausschließlich um `color-scheme`, das nichts verschiebt und nichts einfärbt,
 * sondern nur die Palette der UA-Zeichnung wählt — und im Händler-Kabinett wie
 * im B2B-Manager ist genau diese Ausnahme seit v0.12.5 live verifiziert. Alle
 * anderen Regeln kommen weiterhin ohne aus.
 *
 * `summary` steht mit in der Liste, weil das Aufklapp-Dreieck ebenfalls vom
 * UA gezeichnet wird.
 */
.ebb select,
.ebb option,
.ebb optgroup,
.ebb input,
.ebb textarea,
.ebb summary {
    color-scheme: light !important;
}

/*
 * Gürtel und Hosenträger: Die Einträge bekommen zusätzlich ausdrückliche
 * Farben. Wo ein Browser das Popup selbst einfärbt, gewinnt das Schema oben;
 * wo er Autorenfarben durchlässt, gewinnen diese hier. Ein Weg allein hat sich
 * als zu wenig erwiesen.
 */
.ebb option,
.ebb optgroup {
    background-color: var(--ebb-feld-flaeche);
    color: var(--ebb-feld-text);
}

/* Die markierte und die überfahrene Zeile — das war die einzige, die im
   Befund lesbar war, und zwar zufällig. */
.ebb option:checked,
.ebb option:hover,
.ebb select:focus option:checked {
    background-color: var(--ebb-feld-flaeche-fokus);
    color: var(--ebb-feld-text);
}

/* Der Kalender-Knopf im Datumsfeld ist ein UA-Symbol. Ohne die helle
   Farbschema-Bindung oben stünde er dunkel auf dunkel. */
.ebb input[type="date"]::-webkit-calendar-picker-indicator { opacity: 1; }

/* Das Aufklapp-Dreieck folgt `color`. Auf der eigenen Kartenfläche ist das
   --ebb-text, also der Wert, der auch für die Beschriftung daneben gilt —
   getrennt gesetzt liefen die beiden irgendwann auseinander. */
.ebb summary::marker,
.ebb summary::-webkit-details-marker { color: currentColor; }

/* Dateifelder tragen den UA-Knopf im Inneren — volle Breite würde ihn
   auseinanderziehen, Polsterung ihn verschieben. */
.ebb input[type="file"] { padding: .45rem .5rem; }

.ebb input[aria-invalid="true"],
.ebb select[aria-invalid="true"],
.ebb textarea[aria-invalid="true"] {
    border-color: var(--ebb-fehler-rand);
    border-width: 2px;
}

.ebb-hilfe {
    display: block;
    font-size: .875rem;
    color: var(--ebb-text-leise);
    margin-top: .3rem;
}

/* Fehler stehen als Text da, nie allein über Farbe (BFSG, Spec §4.7). */
.ebb-fehler {
    color: var(--ebb-fehler);
    font-size: .9rem;
    font-weight: 600;
    margin: .35rem 0 0;
}

.ebb-pflicht { color: var(--ebb-fehler); }

.ebb-wahl {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 .4rem;
}

.ebb-wahl input { margin-top: .25rem; flex: 0 0 auto; }
.ebb-wahl label { font-weight: 400; margin-bottom: 0; }

.ebb-reihe { display: block; }
.ebb-raster { display: block; }

/* ---------- Knöpfe ---------- */

.ebb-knopf {
    display: inline-block;
    background: var(--ebb-kupfer);
    color: #282828;
    border: 2px solid var(--ebb-kupfer);
    border-radius: 8px;
    padding: .6rem 1.2rem;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ebb-knopf:hover,
.ebb-knopf:focus-visible {
    background: #b87c53;
    border-color: #b87c53;
    color: #ffffff;
}

.ebb-knopf:focus-visible {
    outline: 3px solid var(--ebb-akzent-text);
    outline-offset: 2px;
}

.ebb-knopf--leise {
    background: var(--ebb-flaeche);
    color: var(--ebb-akzent-text);
    border-color: var(--ebb-rand);
}

.ebb-knopf--leise:hover,
.ebb-knopf--leise:focus-visible {
    background: var(--ebb-creme);
    color: var(--ebb-akzent-text);
    border-color: var(--ebb-kupfer);
}

.ebb-absenden { margin: 1.25rem 0 0; }

/* Honeypot: für Menschen unsichtbar, für Bots ein ganz normales Feld.
   Kein display:none — manche Bots überspringen das gezielt. */
.ebb-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Bilder ---------- */

.ebb-bildliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
    margin: 0 0 1rem;
}

.ebb-bildliste-eintrag {
    border: 1px solid var(--ebb-rand);
    border-radius: 8px;
    padding: .5rem;
    background: var(--ebb-creme);
}

.ebb-bildliste-eintrag img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    margin-bottom: .4rem;
}

/* ---------- Meine Inserate ---------- */

.ebb-meine-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ebb-meine-eintrag {
    background: var(--ebb-flaeche);
    border: 1px solid var(--ebb-rand);
    border-radius: var(--ebb-radius);
    padding: var(--ebb-luft);
    margin: 0 0 1rem;
}

.ebb-meine-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
    justify-content: space-between;
}

.ebb-meine-titel { margin: 0; font-size: 1.15rem; }

.ebb-status {
    font-size: .8rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--ebb-creme);
    border: 1px solid var(--ebb-rand);
    color: var(--ebb-text);
    white-space: nowrap;
}

.ebb-status--publish { border-color: var(--ebb-erfolg); color: var(--ebb-erfolg); }
.ebb-status--pending { border-color: var(--ebb-kupfer); color: var(--ebb-akzent-text); }

.ebb-meine-meta {
    color: var(--ebb-text-leise);
    font-size: .9rem;
    margin: .35rem 0 .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

.ebb-meine-aktionen,
.ebb-meine-form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 .5rem .25rem 0;
}

/* ---------- Freistehender Text: Farbe vom Theme ---------- */

/*
 * Alles, was NICHT auf einer eigenen opaken Fläche steht, erbt die Textfarbe
 * des Themes statt unserer.
 *
 * Grund: `--ebb-text` folgt `prefers-color-scheme`, also der Einstellung des
 * Betriebssystems. Der Seitenhintergrund folgt dem THEME. Beides kann
 * auseinanderfallen — auf einstreu.pro tut es das: helles Betriebssystem,
 * dunkle Seite. Unsere Karten überstehen das, weil sie ihre Fläche selbst
 * mitbringen (das ist der Sinn der Opak-Regel). Text ohne eigene Fläche stand
 * dagegen als rgb(40,40,40) auf dunklem Grund — unlesbar.
 *
 * `inherit` ist in beiden Richtungen richtig: Auf einem hellen Theme kommt
 * dunkler Text, auf einem dunklen heller. Bewusst OHNE `opacity` zum
 * Abtönen — das würde den Kontrast senken, den wir hier gerade herstellen
 * (BFSG, Spec §4.7). Die Abstufung übernimmt die Schriftgröße.
 */
.ebb-treffer,
.ebb-blaettern-stand,
.ebb-orte-titel,
.ebb-detail-titel,
.ebb-detail-ort,
.ebb-melden,
.ebb-melden > summary {
    color: inherit;
}

/* ---------- Verzeichnis: Kopfbereich ---------- */

/*
 * H1 und Einleitung des Verzeichnisses erben NICHT (0.4.4).
 *
 * Sie sind die Ausnahme von der Regel darüber, und der Grund steht im
 * Live-Befund: Auf einstreu.pro stehen sie im Kopfbereich des Themes — einer
 * dunklen Fläche, die das Theme selbst mitbringt. `inherit` holte dort eine
 * dunkle Textfarbe und schrieb dunkel auf dunkel. Der Rest des Verzeichnisses
 * steht unterhalb dieses Kopfes auf normalem Seitengrund und erbt weiterhin
 * richtig.
 *
 * #FAF6F2 auf dem anthrazitfarbenen Kopf sind 13,7:1.
 *
 * DAS IST EINE FESTLEGUNG, keine Ableitung: Sie geht davon aus, dass der
 * Kopfbereich dunkel ist. Bekommt die Seite einen hellen Kopf, steht heller
 * Text auf hellem Grund — derselbe Fehler, nur andersherum. Genau dafür ist es
 * eine Variable: Eine Zeile im Theme kehrt es um, ohne dieses Stylesheet
 * anzufassen.
 *
 *     .ebb { --ebb-kopf-text: #282828; }
 */
.ebb-verzeichnis-titel,
.ebb-verzeichnis-einleitung {
    color: var(--ebb-kopf-text);
}

.ebb-verzeichnis-titel { margin: 0 0 .5rem; }

.ebb-verzeichnis-einleitung { margin: 0 0 1.5rem; }

/* ---------- Verzeichnis: Filter ---------- */

.ebb-filter {
    background: var(--ebb-creme);
    border: 1px solid var(--ebb-rand);
    border-radius: var(--ebb-radius);
    padding: var(--ebb-luft);
    margin: 0 0 1.5rem;
}

.ebb-filter-reihe { display: block; }

.ebb-filter-haken {
    border: 0;
    margin: 0 0 .5rem;
    padding: 0;
}

.ebb-filter-legende {
    padding: 0;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .35rem;
}

.ebb-filter-haken .ebb-wahl {
    display: inline-flex;
    margin: 0 1.25rem .35rem 0;
}

.ebb-filter-knoepfe {
    margin: .75rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ebb-treffer {
    margin: 0 0 1rem;
    font-weight: 600;
}

/* ---------- Verzeichnis: Karten ---------- */

.ebb-karten {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.ebb-karte-inserat {
    background: var(--ebb-flaeche);
    border: 1px solid var(--ebb-rand);
    border-radius: var(--ebb-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Fester Bildrahmen mit aspect-ratio: Ohne ihn springt die ganze Liste,
   sobald ein Bild nachlädt (CLS-Muster aus dem Calculator-Plugin). */
.ebb-karte-bild {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--ebb-creme);
    overflow: hidden;
}

.ebb-karte-bild img,
.ebb-karte-bild picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ebb-karte-kein-bild {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ebb-text-leise);
    font-size: .9rem;
}

.ebb-karte-inhalt {
    padding: var(--ebb-luft);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1 1 auto;
}

.ebb-karte-name {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
}

.ebb-karte-name a {
    color: var(--ebb-text);
    text-decoration: none;
}

.ebb-karte-name a:hover,
.ebb-karte-name a:focus-visible { text-decoration: underline; }

.ebb-karte-ort,
.ebb-karte-boxen,
.ebb-karte-fuss,
.ebb-karte-ortlink {
    margin: 0;
    font-size: .95rem;
}

.ebb-karte-km {
    display: inline-block;
    margin-left: .5rem;
    color: var(--ebb-akzent-text);
    font-weight: 600;
}

.ebb-karte-boxen { font-weight: 600; }

.ebb-karte-merkmale {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .75rem;
    font-size: .92rem;
}

.ebb-karte-merkmal { display: contents; }

.ebb-karte-merkmale dt {
    color: var(--ebb-text-leise);
    margin: 0;
}

.ebb-karte-merkmale dd { margin: 0; }

.ebb-karte-fuss {
    margin-top: auto;
    padding-top: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    align-items: baseline;
}

.ebb-karte-preis {
    font-weight: 700;
    font-size: 1.05rem;
}

/* „Preis auf Anfrage" ist eine Auskunft, keine Zahl — sie darf nicht so
   schwer wiegen wie ein echter Betrag. */
.ebb-karte-preis--anfrage {
    font-weight: 400;
    font-size: .95rem;
    color: var(--ebb-text-leise);
}

.ebb-karte-frei { color: var(--ebb-text-leise); }

/*
 * Prüfsiegel als eigener opaker Chip.
 *
 * Es steht auf der Card INNERHALB der Kartenfläche, auf der Detailseite aber
 * frei über dem Faktenblock — also mal auf hellem, mal auf dunklem Grund. Ein
 * Chip mit eigener Fläche ist auf beidem lesbar, ohne dass wir wissen müssen,
 * was dahinter liegt.
 *
 * Caramel-Fläche mit Anthrazit-Schrift (Markenfarben): 5,4:1 und damit
 * WCAG AA — in beiden Farbschemata identisch, weil die Chipfläche selbst
 * nicht umschaltet.
 */
.ebb-badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    margin: 0;
    padding: .2em .7em;
    border-radius: 999px;
    background: var(--ebb-kupfer);
    color: var(--ebb-badge-text);
    font-size: .85rem;
    font-weight: 700;
}

.ebb-karte-ortlink a { color: var(--ebb-akzent-text); }

/* ---------- Blättern und Ortsliste ---------- */

.ebb-blaettern {
    margin: 1.5rem 0;
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}

.ebb-blaettern-stand { color: var(--ebb-text-leise); }

.ebb-orte {
    margin: 2rem 0 0;
    border-top: 1px solid var(--ebb-rand);
    padding-top: 1rem;
}

.ebb-orte-titel { margin: 0 0 .75rem; font-size: 1.05rem; }

.ebb-orte-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .75rem;
}

.ebb-orte-liste a {
    display: inline-block;
    padding: .2rem .6rem;
    border: 1px solid var(--ebb-rand);
    border-radius: 999px;
    background: var(--ebb-flaeche);
    color: var(--ebb-text);
    text-decoration: none;
    font-size: .9rem;
}

.ebb-orte-liste a:hover,
.ebb-orte-liste a:focus-visible {
    border-color: var(--ebb-kupfer);
    color: var(--ebb-akzent-text);
}

.ebb-orte-zahl { color: var(--ebb-text-leise); }

/* ---------- Detailseite ---------- */

.ebb-detail-titel { margin: 0 0 .35rem; }

.ebb-detail-ort {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    color: var(--ebb-text-leise);
}

.ebb-fakten {
    margin: 1rem 0 1.5rem;
    padding: var(--ebb-luft);
    background: var(--ebb-creme);
    border-radius: var(--ebb-radius);
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem 1.5rem;
}

.ebb-faktum { display: flex; justify-content: space-between; gap: 1rem; }

.ebb-faktum dt { color: var(--ebb-text-leise); margin: 0; }
.ebb-faktum dd { margin: 0; font-weight: 600; text-align: right; }

/*
 * Die Abschnitte der Detailseite bekommen dieselbe opake Karte wie die
 * Fieldsets des Formulars. Vorher trugen sie nur eine Trennlinie, ihr Text
 * stand also direkt auf dem Theme-Hintergrund — dieselbe Unlesbarkeit wie bei
 * den Legends, nur großflächiger. Nebeneffekt: Detailseite und Formular sehen
 * jetzt gleich aus.
 */
.ebb-block-detail {
    background: var(--ebb-flaeche);
    border: 1px solid var(--ebb-rand);
    border-radius: var(--ebb-radius);
    padding: var(--ebb-luft);
    margin: 0 0 1rem;
    color: var(--ebb-text);
}

/* Abschnittstitel wie die Legends im Formular — eine Gliederungsebene. */
.ebb-block-detail > h2 {
    margin: 0 0 .75em;
    padding-bottom: .3em;
    border-bottom: 2px solid var(--ebb-kupfer);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.ebb-einstreu-zeile { margin: 0 0 .5rem; font-size: 1.05rem; }

.ebb-liste-haken,
.ebb-merkmalsliste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ebb-liste-haken li { margin: 0 0 .25rem; }

.ebb-merkmalsliste {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
}

.ebb-merkmalsliste li {
    padding: .2rem .6rem;
    border: 1px solid var(--ebb-rand);
    border-radius: 999px;
    background: var(--ebb-creme);
    font-size: .9rem;
}

.ebb-shopbruecke {
    margin: .75rem 0 0;
    padding: .6rem .8rem;
    background: var(--ebb-creme);
    border-left: 3px solid var(--ebb-kupfer);
    border-radius: 0 var(--ebb-radius) var(--ebb-radius) 0;
}

.ebb-shopbruecke a { color: var(--ebb-akzent-text); font-weight: 600; }

.ebb-galerie {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin: 0 0 1.5rem;
}

.ebb-galerie-bild {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--ebb-radius);
    background: var(--ebb-creme);
}

.ebb-galerie-bild img,
.ebb-galerie-bild picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ebb-telefon { font-size: 1.05rem; font-weight: 600; }

.ebb-scamhinweis {
    border-left: 3px solid var(--ebb-kupfer);
    padding-left: .7rem;
}

.ebb-entfernung {
    margin: 0 0 1.5rem;
    padding: var(--ebb-luft);
    background: var(--ebb-creme);
    border-radius: var(--ebb-radius);
}

.ebb-entfernung p:last-child { margin-bottom: 0; }

/* ---------- Vorschau des eigenen Inserats ---------- */

/* Unübersehbar, aber nicht als Fehler: Es ist alles in Ordnung, das Inserat
   wartet nur. Opake Fläche, damit es auf jedem Theme-Hintergrund trägt. */
.ebb-vorschau-balken {
    background: var(--ebb-kupfer);
    color: var(--ebb-badge-text);
    border-radius: var(--ebb-radius);
    padding: var(--ebb-luft);
    margin: 0 0 1.25rem;
}

.ebb-vorschau-balken p { margin: 0 0 .5rem; }
.ebb-vorschau-balken p:last-child { margin-bottom: 0; }

.ebb-vorschau-balken .ebb-knopf--leise {
    background: var(--ebb-badge-text);
    color: var(--ebb-kupfer);
    border-color: var(--ebb-badge-text);
}

/* Vorschau VOR dem Einreichen: Der Block steht mitten auf einer
   Formularseite. Ein Rahmen sagt, wo der Entwurf aufhört und die Seite wieder
   anfängt — ohne ihn liest sich der Vorschau-Titel wie eine Überschrift der
   Seite selbst. */
.ebb-vorschau {
    border: 2px dashed var(--ebb-kupfer);
    border-radius: var(--ebb-radius);
    padding: var(--ebb-luft);
    margin: 0 0 1.75rem;
}

.ebb-vorschau > .ebb-vorschau-balken { margin-top: 0; }
.ebb-vorschau .ebb-detail > *:last-child { margin-bottom: 0; }

/* Der Hinweis anstelle der Galerie: sichtbar, aber kein Fehler. */
.ebb-galerie-hinweis {
    margin: 0 0 1rem;
    font-style: italic;
}

/* Zwei Knöpfe nebeneinander, aber umbruchfähig — auf schmalen Geräten
   untereinander statt gequetscht. */
.ebb-absenden {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.ebb-meine-warnung {
    margin: 0 0 .5rem;
    font-weight: 600;
    color: var(--ebb-akzent-text);
}

.ebb-melden {
    margin: 1.5rem 0 0;
    font-size: .95rem;
}

/* Geöffnet enthält der Block ein Formular — dann braucht er eine Fläche. */
.ebb-melden[open] {
    background: var(--ebb-flaeche);
    border: 1px solid var(--ebb-rand);
    border-radius: var(--ebb-radius);
    padding: var(--ebb-luft);
    color: var(--ebb-text);
}

.ebb-melden > summary {
    cursor: pointer;
    padding: .4rem 0;
}

.ebb-melden > summary:focus-visible {
    outline: 2px solid var(--ebb-kupfer);
    outline-offset: 2px;
}

/* ---------- Breite Container ---------- */

@supports (container-type: inline-size) {
    @container (min-width: 560px) {
        .ebb-reihe {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }
        .ebb-reihe > .ebb-feld { flex: 1 1 0; }
        .ebb-reihe > .ebb-feld--klein { flex: 0 1 12rem; }

        .ebb-raster {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
            column-gap: 1.25rem;
        }

        .ebb-filter-reihe {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }
        .ebb-filter-reihe > .ebb-feld { flex: 1 1 0; }
        .ebb-filter-reihe > .ebb-feld--klein { flex: 0 1 11rem; }

        .ebb-karten {
            grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
        }

        .ebb-fakten { grid-template-columns: repeat(2, 1fr); }

        .ebb-galerie {
            grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
        }
    }
}

/* Fallback für Browser ohne Container Queries: gleiche Schwelle, nur am
   Viewport gemessen. */
@supports not (container-type: inline-size) {
    @media (min-width: 560px) {
        .ebb-reihe {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }
        .ebb-reihe > .ebb-feld { flex: 1 1 0; }
        .ebb-reihe > .ebb-feld--klein { flex: 0 1 12rem; }

        .ebb-raster {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
            column-gap: 1.25rem;
        }

        .ebb-filter-reihe {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }
        .ebb-filter-reihe > .ebb-feld { flex: 1 1 0; }
        .ebb-filter-reihe > .ebb-feld--klein { flex: 0 1 11rem; }

        .ebb-karten {
            grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
        }

        .ebb-fakten { grid-template-columns: repeat(2, 1fr); }

        .ebb-galerie {
            grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
        }
    }
}

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

/* ==========================================================================
   Muster-Inserate (0.4.4)
   ========================================================================== */

/*
 * Der MUSTER-Chip. Eigene opake Fläche nach derselben Logik wie das
 * Prüfsiegel: Er muss auf jedem Grund lesbar sein, und zwar in beiden
 * Farbschemata — deshalb feste Farben statt Kartenvariablen.
 *
 * Bewusst NICHT in Caramel: Das ist die Farbe des Prüfsiegels, also der
 * Aussage „geprüft, echt". Ein Muster ist das Gegenteil. Anthrazit mit heller
 * Schrift liest sich als Etikett, nicht als Auszeichnung — 14,7:1.
 */
.ebb-muster-chip {
    display: inline-block;
    margin: 0 0 .4rem;
    padding: .15em .6em;
    border-radius: 4px;
    background: #282828;
    color: #faf6f2;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
}

/* Die Karte bleibt eine normale Karte — sie soll ja zeigen, wie eine aussieht.
   Der gestrichelte Rand sagt „Beispiel", ohne die Darstellung zu verfälschen. */
.ebb-karte-inserat--muster {
    border-style: dashed;
}

.ebb-muster-kasten {
    border: 2px dashed var(--ebb-kupfer);
}

/* Im Kasten steht der Chip in der Überschrift, dort trägt er keinen
   eigenen Absatzabstand. */
.ebb-muster-kasten h2 .ebb-muster-chip,
.ebb-muster-kasten h3 .ebb-muster-chip {
    margin: 0 .5em 0 0;
    vertical-align: middle;
}

/* ==========================================================================
   „So funktioniert's" (0.4.4)
   ========================================================================== */

/*
 * Eigene opake Fläche, weil der Block über dem Verzeichnis steht — also
 * möglicherweise auf dem dunklen Kopfbereich des Themes. Ohne eigene Fläche
 * wäre er dasselbe Problem wie die H1 daneben.
 */
.ebb-wie {
    background: var(--ebb-creme);
    border: 1px solid var(--ebb-rand);
    border-radius: var(--ebb-radius);
    color: var(--ebb-text);
    padding: var(--ebb-luft);
    margin: 0 0 1.5rem;
}

.ebb-wie-titel {
    margin: 0 0 .75rem;
    font-size: 1.15rem;
    color: var(--ebb-text);
}

.ebb-wie-schritte {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.ebb-wie-schritt {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.ebb-wie-symbol {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--ebb-flaeche);
    border: 1px solid var(--ebb-rand);
    color: var(--ebb-akzent-text);
}

.ebb-wie-inhalt { display: block; }

.ebb-wie-schritt-titel {
    display: block;
    font-weight: 600;
}

/* Die Ziffer ist Zierde — die Reihenfolge steht schon im <ol>. Deshalb
   aria-hidden im Template und hier nur eine leise Farbe. */
.ebb-wie-nr {
    color: var(--ebb-akzent-text);
    font-weight: 700;
    margin-right: .35em;
}

.ebb-wie-text {
    display: block;
    margin-top: .15rem;
    font-size: .925rem;
    color: var(--ebb-text-leise);
}

.ebb-wie-cta {
    margin: 1rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--ebb-rand);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.ebb-wie-cta-text { flex: 1 1 14rem; }

/* Die kompakte Fassung steht neben einer Trefferliste und darf keine
   Aufmerksamkeit von ihr abziehen. */
.ebb-wie--kompakt { padding: .75rem var(--ebb-luft); }
.ebb-wie--kompakt .ebb-wie-titel { font-size: 1rem; margin-bottom: .5rem; }
.ebb-wie--kompakt .ebb-wie-symbol { width: 1.75rem; height: 1.75rem; }
.ebb-wie--kompakt .ebb-wie-symbol svg { width: 18px; height: 18px; }
.ebb-wie--kompakt .ebb-wie-schritte { gap: .4rem; }
.ebb-wie--kompakt .ebb-wie-cta { margin-top: .75rem; padding-top: .6rem; }

@container (min-width: 560px) {
    .ebb-wie--gross .ebb-wie-schritte { grid-template-columns: repeat(3, 1fr); }
    .ebb-wie--kompakt .ebb-wie-schritte { grid-template-columns: repeat(3, 1fr); }
}

@supports not (container-type: inline-size) {
    @media (min-width: 700px) {
        .ebb-wie .ebb-wie-schritte { grid-template-columns: repeat(3, 1fr); }
    }
}