/* ===================================================================
   BAENDER — Inhaltsseiten
   ===================================================================
   Ueber uns, Vute, KI, die Leistungsseiten, Projekte, Werkstatt,
   Bewertungen, Rechtstexte, 404.

   Aufbau wie auf der Startseite, nur ruhiger: eine lila Platte mit
   gewellter Unterkante traegt Kennzeichnung und Titel (ov_seiten_kopf()
   in inc/seitenkopf.php, ausgegeben aus header.php), darunter laeuft der
   Inhalt auf Apricot.

   Die Vorlagen selbst sind unveraendert. Alle beginnen mit
   #main.main-content > .content-block — der dunkle Kasten von pages.css
   wird hier zurueckgebaut, nicht ersetzt.

   Es gelten dieselben Regeln wie im Rest des Themes: KEINE Zwischentoene,
   keine opacity auf Text, keine rgba-Rahmen. Karten tragen die volle
   Gegenfarbe, Knoepfe im Inhalt tragen --band.
   =================================================================== */


/* ===================================================================
   Die Buehne
   ===================================================================
   Wie #main.home: der Fuss liegt ab 821 px fest am unteren Rand, die
   Buehne schiebt sich mit z-index darueber. Den Abstand darunter misst
   script.js zur Laufzeit. */
body.ov-baender--seiten #main.main-content {
    position: relative;
    z-index: 10;
    background: var(--apri);
    color: var(--lila);
    max-width: none;
    width: 100%;
    margin: 0;
    display: block;
    /* Die Welle des Kopfes haengt um --welle nach unten ueber. Ohne diesen
       Abstand schneidet sie in die erste Zeile des Inhalts — genau das war
       im ersten Anlauf zu sehen.
       !important ist hier noetig und kein Versehen: i18n-geo.css nimmt der
       Buehne den oberen Abstand ebenfalls mit !important, sobald das
       Umbau-Banner davor steht (.ov-umbau-banner ~ .main-content). Dieser
       Abstand haelt hier aber die Welle vom Text frei. */
    padding: 0 0 120px;
    padding-top: calc(var(--welle) + 56px) !important;
}


/* ===================================================================
   Der Kopf
   ===================================================================
   Deutlich flacher als der Hero der Startseite: hier steht ein Titel,
   keine Buehne. Die Szenen-Regeln (Platte, Wellen, Aufbau) kommen aus
   baender.css, hier stehen nur die Masse. */
body.ov-baender--seiten .szene--kopf {
    min-height: 0;
    padding: 104px 0 88px;
    align-items: flex-end;
    /* Ueber die Buehne. Die Welle haengt um --welle nach unten ueber und
       liegt damit VOR dem Inhalt — #main traegt z-index 10 und eine deckende
       Apricot-Flaeche, die den Ueberstand sonst einfach uebermalt. Genau so
       stand die Unterkante als gerade Linie im Bild. */
    z-index: 11;
}

body.ov-baender--seiten .szene--kopf h1 {
    font-size: clamp(38px, 5vw, 68px);
    margin: 0;
}

body.ov-baender--seiten .szene--kopf .marke {
    margin-bottom: 12px;
}

body.ov-baender--seiten .szene--kopf .lead {
    margin-top: 18px;
    max-width: 52ch;
    font-size: 20px;
}

/* Der Rueckweg steht ueber der Kennzeichnung und ist bewusst leise —
   er ist ein Ausgang, kein Angebot. */
body.ov-baender--seiten .kopf__zurueck {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}
body.ov-baender--seiten .kopf__zurueck:hover { text-decoration: underline; }


/* ===================================================================
   Der Inhalt
   ===================================================================
   pages.css macht aus .content-block einen dunklen Kasten mit Radien und
   zwei konkaven Boegen, die in den alten Fuss ueberliefen. Beides faellt
   hier weg: der Inhalt steht direkt auf Apricot. */
body.ov-baender--seiten .content-block {
    background: none;
    border-radius: 0;
    min-height: 0;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 54px;
    color: var(--lila);
}
body.ov-baender--seiten .content-block::before,
body.ov-baender--seiten .content-block::after { content: none; }

/* Zwei Inhaltsbloecke hintereinander (z. B. im Shop-Banner-Muster)
   brauchen Luft dazwischen. */
body.ov-baender--seiten .content-block + .content-block { margin-top: 72px; }


/* ===================================================================
   Prosa
   ===================================================================
   Der Fliesstext bekommt eine Lesebreite, alles Breite (Tabellen, Bilder,
   Karten) darf darueber hinaus.

   ALLE Element-Auswahlen hier stehen in :where(). Das ist kein Schmuck,
   sondern noetig: ":where()" zaehlt in der Spezifitaet nicht mit, und ohne
   das schlaegt eine Regel wie ".content-block li" (0,2,2) jede Regel fuer
   ein Bauteil wie ".prj-stat" (0,2,1). Genau das ist passiert — die
   Kennzahlen der Projektseite sind <li>, holten sich "color: inherit" und
   standen lila auf lila. Mit :where() liegen beide gleichauf und die
   spaeter notierte Bauteil-Regel gewinnt.

   Ueberschriften erben die Farbe ihres Untergrunds — base.css faerbt
   h1-h4 sonst hart auf --color-text, und das ist hier Lila auf Lila. */
body.ov-baender--seiten .content-block :where(h1, h2, h3, h4, h5, h6) { color: inherit; }

body.ov-baender--seiten .content-block :where(h2) {
    font-family: var(--fd);
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 64px 0 18px;
    text-wrap: balance;
}
body.ov-baender--seiten .content-block :where(h3) {
    font-family: var(--fd);
    font-size: 23px;
    margin: 40px 0 12px;
}
body.ov-baender--seiten .content-block :where(h4) {
    font-size: 19px;
    margin: 28px 0 10px;
}
body.ov-baender--seiten .content-block > :first-child,
body.ov-baender--seiten .leistung-content > :first-child { margin-top: 0; }

body.ov-baender--seiten .content-block :where(p, li) {
    color: inherit;
    font-size: 17.5px;
    line-height: 1.68;
}
body.ov-baender--seiten .content-block :where(p) { margin: 0 0 18px; max-width: 74ch; }
body.ov-baender--seiten .content-block :where(ul, ol) {
    max-width: 74ch;
    margin: 0 0 20px;
    padding-left: 24px;
}
body.ov-baender--seiten .content-block :where(li) { margin-bottom: 8px; }
body.ov-baender--seiten .content-block :where(strong) { color: inherit; font-weight: 800; }

/* Ein Link im Fliesstext hat keine eigene Farbe — bei zwei Farben waere
   jede dritte eine Zwischenstufe. Er wird unterstrichen. */
body.ov-baender--seiten .content-block :where(a) {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}
body.ov-baender--seiten .content-block :where(a):hover { text-decoration-thickness: 3px; }

body.ov-baender--seiten .content-block :where(blockquote) {
    margin: 28px 0;
    padding: 4px 0 4px 24px;
    border-left: 4px solid var(--lila);
    max-width: 74ch;
    font-size: 19px;
}

body.ov-baender--seiten .content-block :where(hr, .wp-block-separator) {
    border: none;
    border-top: 3px solid var(--lila);
    margin: 56px 0;
    max-width: 74ch;
}

body.ov-baender--seiten .content-block :where(code) {
    font-family: var(--fm);
    font-size: 0.92em;
    background: var(--lila);
    color: var(--apri);
    padding: 2px 7px;
    border-radius: 6px;
}
body.ov-baender--seiten .content-block :where(pre) {
    background: var(--lila);
    color: var(--apri);
    padding: 22px 24px;
    border-radius: 22px 10px 20px 12px;
    overflow-x: auto;
    margin: 0 0 24px;
}
body.ov-baender--seiten .content-block :where(pre code) {
    background: none;
    color: inherit;
    padding: 0;
}

/* Tabellen sind der haeufigste Querscroller auf schmalen Fenstern —
   deshalb scrollt der Rahmen, nicht die Seite. */
body.ov-baender--seiten .content-block :where(table) {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 28px;
}
body.ov-baender--seiten .content-block :where(th, td) {
    border: 2px solid var(--lila);
    padding: 12px 16px;
    color: inherit;
    text-align: left;
}
body.ov-baender--seiten .content-block :where(th) {
    background: var(--lila);
    color: var(--apri);
    font-weight: 800;
}

body.ov-baender--seiten .content-block :where(img) {
    max-width: 100%;
    height: auto;
    border-radius: 26px 12px 22px 14px;
}


/* ===================================================================
   Leistungsseiten
   ===================================================================
   Kopf und Rueckweg der Vorlage entfallen — beides steht jetzt oben auf
   der Platte. Der Titel stuende sonst zweimal untereinander. */
body.ov-baender--seiten .leistung-head { display: none; }

body.ov-baender--seiten .leistung-content {
    color: inherit;
    max-width: none;
}
body.ov-baender--seiten .leistung-content h2 {
    font-family: var(--fd);
    font-size: clamp(26px, 3vw, 36px);
    margin: 56px 0 16px;
    color: inherit;
}
body.ov-baender--seiten .leistung-content h3 {
    font-family: var(--fd);
    font-size: 22px;
    margin: 36px 0 12px;
    color: inherit;
}
body.ov-baender--seiten .leistung-content p,
body.ov-baender--seiten .leistung-content li {
    color: inherit;
    font-size: 17.5px;
    line-height: 1.68;
}
body.ov-baender--seiten .leistung-content p { max-width: 74ch; }
body.ov-baender--seiten .leistung-content ul,
body.ov-baender--seiten .leistung-content ol { max-width: 74ch; padding-left: 24px; margin-left: 0; }


/* ===================================================================
   Die Anfrage-Karte
   ===================================================================
   Volle Gegenfarbe wie jede Karte des Themes: massiv Lila auf Apricot.
   Sie traegt das Formular und ist der Zielpunkt der Seite. */
body.ov-baender--seiten .leistung-anfrage {
    margin-top: 88px;
    border: none;
    padding: 0;
}

body.ov-baender--seiten .leistung-anfrage__card {
    position: relative;
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 46px 18px 40px 22px;
    padding: 52px 48px;
    box-shadow: 0 9px 22px var(--schatten-karte);
    max-width: none;
}
body.ov-baender--seiten .leistung-anfrage__card h2 {
    font-family: var(--fd);
    color: inherit;
    font-size: clamp(26px, 3vw, 36px);
    margin: 0 0 14px;
}
body.ov-baender--seiten .leistung-anfrage__intro,
body.ov-baender--seiten .leistung-anfrage__hint {
    color: inherit;
    font-size: 17px;
    max-width: 66ch;
}

/* Vute sitzt in der Ecke der Karte. Das Bild ist ein PNG mit eigenen
   Farben — es bleibt, wie es ist, und wird nicht eingefaerbt. */
body.ov-baender--seiten .leistung-anfrage__mascot img { max-width: 100%; }

body.ov-baender--seiten .leistung-anfrage__admin {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 18px 8px 16px 10px;
}
body.ov-baender--seiten .leistung-anfrage__admin code {
    background: var(--lila);
    color: var(--apri);
}


/* ===================================================================
   Formulare
   ===================================================================
   Die Felder liegen auf der lila Karte, tragen also Apricot — dieselbe
   Staffelung wie das Newsletter-Modal. Ein Feld ist eine helle Flaeche
   mit lila Schrift, kein durchsichtiger Kasten mit Rahmen. */
body.ov-baender--seiten .ov-anfrage-form { color: inherit; }

body.ov-baender--seiten .ov-form-label,
body.ov-baender--seiten .ov-form-label--group,
body.ov-baender--seiten .ov-form-option-label,
body.ov-baender--seiten .ov-form-hint,
body.ov-baender--seiten .ov-form-hint-inline,
body.ov-baender--seiten .ov-file-hint {
    /* .ov-form-hint-inline fehlte hier — der Hinweis unter der E-Mail
       behielt das gedaempfte Lila aus pages.css und war auf der lila
       Karte nicht zu sehen. */
    color: inherit;
}
body.ov-baender--seiten .ov-form-label { font-weight: 700; }
body.ov-baender--seiten .ov-form-required { color: inherit; font-weight: 800; }

body.ov-baender--seiten .ov-form-input,
body.ov-baender--seiten .ov-form-textarea,
body.ov-baender--seiten select.ov-form-input {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 14px;
    padding: 14px 16px;
    font: inherit;
    font-size: 16.5px;
    box-shadow: none;
}
body.ov-baender--seiten .ov-form-input::placeholder { color: var(--lila); opacity: 1; }
body.ov-baender--seiten .ov-form-input:focus,
body.ov-baender--seiten .ov-form-textarea:focus {
    background: var(--apri);
    color: var(--lila);
    outline: 3px solid var(--apri);
    outline-offset: 3px;
}
/* Chrome faerbt automatisch ausgefuellte Felder sonst hellblau ein. */
body.ov-baender--seiten .ov-form-input:-webkit-autofill,
body.ov-baender--seiten .ov-form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lila);
    -webkit-box-shadow: 0 0 0 100px var(--apri) inset;
}

/* Auswahlmoeglichkeiten sind Pillen in der Gegenfarbe der Karte. */
body.ov-baender--seiten .ov-form-option {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    padding: 11px 18px;
}
body.ov-baender--seiten .ov-form-option:hover { background: var(--apri); }

body.ov-baender--seiten .ov-form-radio,
body.ov-baender--seiten .ov-form-checkbox {
    border: 2px solid var(--lila);
    background: var(--apri);
}
body.ov-baender--seiten .ov-form-radio:checked,
body.ov-baender--seiten .ov-form-checkbox:checked {
    background: var(--lila);
    border-color: var(--lila);
}
body.ov-baender--seiten .ov-form-radio:checked::after { background: var(--apri); }
body.ov-baender--seiten .ov-form-checkbox:checked::after { border-color: var(--apri); }

/* Die Dateiablage: gestrichelter Rahmen in Apricot auf der lila Karte. */
body.ov-baender--seiten .ov-file-drop {
    background: none;
    border: 3px dashed var(--apri);
    border-radius: 22px;
    color: inherit;
}
body.ov-baender--seiten .ov-file-drop.is-over,
body.ov-baender--seiten .ov-file-drop.drag-over { background: none; border-color: var(--apri); }

/* Die Auswahlflaeche fuellt den ganzen Kasten. Bekaeme sie Apricot, waere
   der gestrichelte Rahmen darauf unsichtbar — sie bleibt offen und traegt
   die Schrift der Karte. */
body.ov-baender--seiten .ov-file-trigger {
    background: none;
    color: var(--apri);
    border: none;
}
body.ov-baender--seiten .ov-file-trigger svg { stroke: currentColor; }
body.ov-baender--seiten .ov-file-list li,
body.ov-baender--seiten .ov-file-item {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
}

/* Der Absendeknopf steht auf Lila und muss sich davon abheben: hier ist
   die volle Gegenfarbe richtig, --band waere auf der Karte zu leise. */
body.ov-baender--seiten .ov-form-submit {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    padding: 16px 34px;
    font-weight: 800;
    font-size: 17px;
    box-shadow: 0 5px 10px var(--schatten-eng);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body.ov-baender--seiten .ov-form-submit:hover {
    background: var(--apri);
    transform: translateY(-3px);
    box-shadow: 0 9px 16px var(--schatten);
}
body.ov-baender--seiten .ov-form-submit:disabled { transform: none; box-shadow: none; }

/* Fehler und Bestaetigung tragen keine eigene Signalfarbe — die Palette
   hat nur zwei Toene. Der Fehler wird fett und unterstrichen gesetzt. */
body.ov-baender--seiten .ov-form-error {
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.ov-baender--seiten .ov-anfrage-success__box {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 40px 16px 34px 18px;
}
body.ov-baender--seiten .ov-anfrage-success__box h3,
body.ov-baender--seiten .ov-anfrage-success__box p { color: inherit; }
body.ov-baender--seiten .ov-anfrage-success__id {
    background: var(--apri);
    color: var(--lila);
    border: none;
}
body.ov-baender--seiten .ov-anfrage-success__close {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
}

/* Die Wartemeldung steht ueber dem Formular auf Apricot — also Lila. */
body.ov-baender--seiten .ov-anfrage-waiting__inner {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 26px 10px 22px 12px;
}
body.ov-baender--seiten .ov-anfrage-waiting__id {
    background: var(--apri);
    color: var(--lila);
}


/* ===================================================================
   Knoepfe im Inhalt
   ===================================================================
   Auf Apricot tragen sie --band (die Regel des Themes), auf einer lila
   Karte die volle Gegenfarbe — sonst stuende dunkel auf dunkel. */
body.ov-baender--seiten .content-block .nav-btn,
body.ov-baender--seiten .post-entry__more,
body.ov-baender--seiten .werkstatt-card__more,
body.ov-baender--seiten .prj-card__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--band);
    color: var(--apri);
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 5px 10px var(--schatten-eng);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body.ov-baender--seiten .content-block .nav-btn,
body.ov-baender--seiten .post-entry__more,
body.ov-baender--seiten .werkstatt-card__more,
body.ov-baender--seiten .prj-card__more { text-decoration: none; }
body.ov-baender--seiten .content-block .nav-btn:hover,
body.ov-baender--seiten .post-entry__more:hover,
body.ov-baender--seiten .werkstatt-card__more:hover,
body.ov-baender--seiten .prj-card__more:hover {
    color: var(--apri);
    transform: translateY(-3px);
    box-shadow: 0 9px 16px var(--schatten);
}


/* ===================================================================
   Blaetterung
   =================================================================== */
body.ov-baender--seiten .pagination .page-numbers {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
}
body.ov-baender--seiten .pagination .page-numbers:hover,
body.ov-baender--seiten .pagination .page-numbers.current {
    background: var(--band);
    color: var(--apri);
}


/* ===================================================================
   Beitragsliste
   =================================================================== */
body.ov-baender--seiten .post-entry {
    border: none;
    border-bottom: 3px solid var(--lila);
    padding-bottom: 32px;
    margin-bottom: 32px;
}
body.ov-baender--seiten .post-entry__title a { color: inherit; text-decoration: none; }
body.ov-baender--seiten .post-entry__title a:hover { text-decoration: underline; }
body.ov-baender--seiten .post-entry__excerpt,
body.ov-baender--seiten .post-date { color: inherit; }


/* ===================================================================
   Schmale Fenster
   =================================================================== */
@media (max-width: 1000px) {
    body.ov-baender--seiten .content-block { padding: 0 32px; }
}

@media (max-width: 820px) {
    body.ov-baender--seiten .szene--kopf { padding: 96px 0 64px; }
    body.ov-baender--seiten #main.main-content {
        padding: 0 0 80px;
        padding-top: calc(var(--welle) + 32px) !important;
        /* Unter 821 px steht der Fuss wieder im Fluss, der gemessene
           Abstand aus script.js faellt weg. */
        margin-bottom: 0 !important;
    }
    body.ov-baender--seiten .leistung-anfrage__card { padding: 34px 24px; border-radius: 34px 14px 30px 16px; }
    body.ov-baender--seiten .content-block h2 { font-size: 26px; margin-top: 44px; }
}


/* ===================================================================
   Projekte — Uebersicht und Detailseite
   ===================================================================
   Ueberschrift und Einleitung stehen jetzt auf der Platte (siehe
   ov_seiten_kopf_daten()). In der Vorlage muessen sie deshalb weg, sonst
   steht beides zweimal untereinander. */
body.ov-baender--seiten .prj-archive__title,
body.ov-baender--seiten .prj-archive__intro,
body.ov-baender--seiten .werkstatt-archive__title { display: none; }

body.ov-baender--seiten .prj-archive__head {
    border: none;
    padding: 0;
    margin-bottom: 40px;
}

/* Die Karte traegt die volle Gegenfarbe. Alles darin erbt ihre Farbe —
   base.css faerbt Ueberschriften sonst hart auf --color-text, und das ist
   hier Lila auf Lila; genau so war die Karte leer. */
body.ov-baender--seiten .prj-card,
body.ov-baender--seiten .werkstatt-card {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 38px 16px 34px 18px;
    box-shadow: 0 6px 14px var(--schatten-karte);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
}
body.ov-baender--seiten .prj-card:hover,
body.ov-baender--seiten .werkstatt-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 22px var(--schatten);
}
body.ov-baender--seiten .prj-card *,
body.ov-baender--seiten .werkstatt-card * { border-color: var(--apri); }
body.ov-baender--seiten .prj-card__title,
body.ov-baender--seiten .prj-card__desc,
body.ov-baender--seiten .prj-fact,
body.ov-baender--seiten .prj-card__more,
body.ov-baender--seiten .werkstatt-card__title,
body.ov-baender--seiten .werkstatt-card__title a,
body.ov-baender--seiten .werkstatt-card__excerpt,
body.ov-baender--seiten .werkstatt-card__date,
body.ov-baender--seiten .werkstatt-card__meta { color: var(--apri); }

/* Eine Karte ist kein Fliesstext.
   Die Prosa-Regeln oben greifen ueber die Elementnamen und damit auch in
   die Karten hinein: die Ueberschrift einer Werkstattkarte ist ein <h2> und
   holte sich 64 px Abstand nach oben — im Bild ein grosses Loch zwischen
   Datum und Titel. Hier stehen die Elementnamen deshalb OHNE :where(), die
   Regel liegt damit ueber der Prosa. */
body.ov-baender--seiten .prj-card h1,
body.ov-baender--seiten .prj-card h2,
body.ov-baender--seiten .prj-card h3,
body.ov-baender--seiten .prj-card h4,
body.ov-baender--seiten .werkstatt-card h1,
body.ov-baender--seiten .werkstatt-card h2,
body.ov-baender--seiten .werkstatt-card h3,
body.ov-baender--seiten .werkstatt-card h4,
body.ov-baender--seiten .ov-bw-card h1,
body.ov-baender--seiten .ov-bw-card h2,
body.ov-baender--seiten .ov-bw-card h3,
body.ov-baender--seiten .ov-bw-card h4 {
    font-family: var(--fd);
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 10px;
}
body.ov-baender--seiten .prj-card p,
body.ov-baender--seiten .werkstatt-card p,
body.ov-baender--seiten .ov-bw-card p {
    font-size: 16.5px;
    max-width: none;
    margin: 0 0 12px;
}
/* Ein Kartentitel ist eine Flaeche zum Klicken, kein Link im Satz — die
   Unterstreichung der Prosa gehoert hier nicht hin. */
body.ov-baender--seiten .prj-card a,
body.ov-baender--seiten .werkstatt-card a,
body.ov-baender--seiten .ov-bw-card a { text-decoration: none; }
body.ov-baender--seiten .werkstatt-card__title a:hover { text-decoration: underline; }

/* Auf der Karte ist --band zu dunkel und zu nah am Untergrund — der
   Weiterlesen-Knopf traegt hier die volle Gegenfarbe. */
body.ov-baender--seiten .prj-card .prj-card__more,
body.ov-baender--seiten .werkstatt-card .werkstatt-card__more {
    background: var(--apri);
    color: var(--lila);
    box-shadow: none;
}
body.ov-baender--seiten .prj-card .prj-card__more:hover,
body.ov-baender--seiten .werkstatt-card .werkstatt-card__more:hover {
    color: var(--lila);
    box-shadow: 0 6px 12px var(--schatten);
}

/* Plaketten und Themen: Umriss statt eigener Farbe. Die Statusfarben von
   projekte.css (gruen, blau, orange) sind Fremdfarben in einer Palette
   aus zwei Toenen — sie werden hier ueberschrieben, nicht gemischt. */
body.ov-baender--seiten .prj-badge,
body.ov-baender--seiten .prj-topic,
body.ov-baender--seiten .werkstatt-tag {
    background: none;
    color: var(--apri);
    border: 2px solid var(--apri);
    border-radius: 999px;
    font-weight: 700;
}
/* Der Sprachpunkt kommt mit der Farbe von GitHub als Inline-Stil — eine
   Fremdfarbe in einer Palette aus zwei Toenen. Nur !important kommt an
   einen Inline-Stil heran. */
body.ov-baender--seiten .prj-dot { background: var(--apri) !important; }
body.ov-baender--seiten .prj-single .prj-dot,
body.ov-baender--seiten .prj-stat .prj-dot { background: var(--apri) !important; }

/* Das Buchstaben-Icon: Apricot-Flaeche mit lila Buchstabe, also eine Stufe
   weiter als die Karte — dieselbe Umkehrung wie auf der Startseite. */
body.ov-baender--seiten .prj-icon {
    background: var(--apri);
    border: none;
    /* Nicht nur der Buchstabe: ein eingeliefertes SVG zeichnet sich mit
       currentColor und braucht hier ebenfalls die Gegenfarbe der
       Flaeche — sonst stuende es apricot auf apricot. */
    color: var(--lila);
}
body.ov-baender--seiten .prj-icon__mono { color: var(--lila); }

/* Detailseite */
body.ov-baender--seiten .prj-hero,
body.ov-baender--seiten .prj-about,
body.ov-baender--seiten .prj-readme,
body.ov-baender--seiten .prj-topics-block,
body.ov-baender--seiten .werkstatt-single {
    background: none;
    border: none;
    padding-left: 0;
    padding-right: 0;
    color: inherit;
}
/* Titel und Untertitel stehen oben auf der Platte — in der Vorlage
   muessen sie weg, sonst steht beides zweimal untereinander. */
body.ov-baender--seiten .prj-hero__title,
body.ov-baender--seiten .prj-hero__tagline { display: none; }

body.ov-baender--seiten .prj-about__text,
body.ov-baender--seiten .werkstatt-single__title,
body.ov-baender--seiten .werkstatt-single__date,
body.ov-baender--seiten .werkstatt-single__content { color: inherit; }

/* Auf Apricot bekommen Plaketten und Themen die lila Kontur. */
body.ov-baender--seiten .prj-single .prj-badge,
body.ov-baender--seiten .prj-single .prj-topic,
body.ov-baender--seiten .werkstatt-single .werkstatt-tag,
body.ov-baender--seiten .werkstatt-single__meta .werkstatt-tag {
    color: var(--lila);
    border-color: var(--lila);
}
body.ov-baender--seiten .prj-single .prj-icon {
    background: var(--lila);
    color: var(--apri);
}
body.ov-baender--seiten .prj-single .prj-icon__mono { color: var(--apri); }

/* Die Kennzahlen stehen als Kacheln in der Gegenfarbe. */
body.ov-baender--seiten .prj-stat {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 20px 8px 18px 10px;
    padding: 14px 20px;
    min-width: 132px;
}
/* Alle Kacheln gleich hoch — sonst stehen sie unterschiedlich tief in der
   Reihe, weil die Beschriftungen verschieden lang umbrechen. */
body.ov-baender--seiten .prj-stats { align-items: stretch; }
body.ov-baender--seiten .prj-stat__value,
body.ov-baender--seiten .prj-stat__label { color: inherit; }

/* Der Rueckweg der Vorlagen entfaellt — er steht oben auf der Platte. */
body.ov-baender--seiten .prj-single__back,
body.ov-baender--seiten .prj-back,
body.ov-baender--seiten .werkstatt-single__back { display: none; }

/* Das README kommt von GitHub und bringt eigene Auszeichnung mit. Es steht
   auf Apricot, also in Lila — und der Codeblock wie im uebrigen Fliesstext.

   projekte.css legt den Kasten auf --color-surface-alt, und das ist im
   Baender-Theme Lila: der ganze Text stand lila auf lila. Der Kasten faellt
   deshalb weg, das README laeuft wie jeder andere Fliesstext auf Apricot. */
body.ov-baender--seiten .prj-readme__body {
    background: none;
    border: none;
    padding: 0;
    font-size: 17px;
}
body.ov-baender--seiten .prj-readme__body,
body.ov-baender--seiten .prj-readme__body p,
body.ov-baender--seiten .prj-readme__body li,
body.ov-baender--seiten .prj-readme__body h1,
body.ov-baender--seiten .prj-readme__body h2,
body.ov-baender--seiten .prj-readme__body h3,
body.ov-baender--seiten .prj-readme__body h4 { color: var(--lila); }
body.ov-baender--seiten .prj-readme__body code {
    background: var(--lila);
    color: var(--apri);
}
body.ov-baender--seiten .prj-readme__body pre {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 22px 10px 20px 12px;
}
body.ov-baender--seiten .prj-readme__body pre code { background: none; color: inherit; }
body.ov-baender--seiten .prj-readme__head,
body.ov-baender--seiten .prj-readme__source,
body.ov-baender--seiten .prj-readme__note,
body.ov-baender--seiten .prj-readme__missing { color: var(--lila); border-color: var(--lila); }
body.ov-baender--seiten .prj-readme__body table th,
body.ov-baender--seiten .prj-readme__body table td { border: 2px solid var(--lila); color: var(--lila); }
body.ov-baender--seiten .prj-readme__body table th { background: var(--lila); color: var(--apri); }

/* Die allgemeinen Knoepfe der Projektseiten (.ov-btn) folgen der Regel des
   Themes: auf Apricot tragen sie --band.

   .content-block muss im Selektor stehen. Die Regel fuer Links im
   Fliesstext weiter oben lautet "…  .content-block a" und ist damit
   spezifischer als "… .ov-btn" — der Knopf hat sich sonst die geerbte
   Schriftfarbe geholt und stand lila auf --band, gemessene 1,29:1. */
body.ov-baender--seiten .content-block .ov-btn {
    background: var(--band);
    color: var(--apri);
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 700;
    box-shadow: 0 5px 10px var(--schatten-eng);
}
body.ov-baender--seiten .content-block .ov-btn { text-decoration: none; }
body.ov-baender--seiten .content-block .ov-btn:hover { color: var(--apri); }
body.ov-baender--seiten .content-block .ov-btn svg { fill: currentColor; }


/* ===================================================================
   Werkstatt — Suche
   ===================================================================
   Ein Eingabefeld auf Apricot ist eine LILA Flaeche mit Apricot-Schrift.
   Ohne diese Regel stand lila Text in einem lila Feld und man sah beim
   Tippen nichts. */
body.ov-baender--seiten .werkstatt-search__wrap {
    background: var(--lila);
    border: none;
    border-radius: 999px;
    overflow: hidden;
}
body.ov-baender--seiten .werkstatt-search__input {
    background: none;
    border: none;
    color: var(--apri);
    font: inherit;
    font-size: 16.5px;
    padding: 14px 20px;
}
body.ov-baender--seiten .werkstatt-search__input::placeholder { color: var(--apri); opacity: 1; }
body.ov-baender--seiten .werkstatt-search__btn,
body.ov-baender--seiten .werkstatt-search__clear {
    background: none;
    border: none;
    color: var(--apri);
    cursor: pointer;
}
body.ov-baender--seiten .werkstatt-search__btn svg,
body.ov-baender--seiten .werkstatt-search__clear svg { stroke: currentColor; }

body.ov-baender--seiten .werkstatt-archive__list {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
body.ov-baender--seiten .werkstatt-archive__empty,
body.ov-baender--seiten .prj-archive__empty { color: inherit; }


/* ===================================================================
   Bewertungen
   =================================================================== */
body.ov-baender--seiten .ov-bewertung,
body.ov-baender--seiten .ov-bw-card,
body.ov-baender--seiten .ov-bewertungen-form {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 38px 16px 34px 18px;
    box-shadow: 0 6px 14px var(--schatten-karte);
}
body.ov-baender--seiten .ov-bewertung *,
body.ov-baender--seiten .ov-bw-card * { color: inherit; }


/* ===================================================================
   Formulare — Nachtrag
   ===================================================================
   Die Regeln weiter oben gehen davon aus, dass ein Formular auf der
   lila Karte liegt: das Feld ist dann eine helle Flaeche ohne Rahmen.
   Fuer den Anfragebogen stimmt das.

   Das BEWERTUNGSFORMULAR liegt dagegen frei auf der Seite — und dort
   war das Feld apricot auf apricot ohne Rahmen, also unsichtbar. Der
   Text zum Ausfuellen stand als lose Zeile im Raum.

   Zwei Antworten darauf:
     1. Jedes Feld bekommt eine Kante. Auf der lila Karte faellt sie
        nicht auf (lila auf lila), auf Apricot zeichnet sie den Kasten.
        Eine Regel, kein Erkennen des Untergrunds.
     2. Das Bewertungsformular bekommt dieselbe lila Karte wie der
        Anfragebogen. Damit steht es als Block auf der Seite statt als
        Ansammlung von Zeilen.
   =================================================================== */

/* --- 1  Jedes Feld hat eine Kante -------------------------------- */
body.ov-baender--seiten .ov-form-input,
body.ov-baender--seiten .ov-form-textarea,
body.ov-baender--seiten select.ov-form-input {
    border: 2px solid var(--lila);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* --- 2  Ordnung: Beschriftung, Feld, Hinweis --------------------- */
body.ov-baender--seiten .ov-form-field {
    margin: 0 0 22px;
    padding: 0;
    border: none;
    min-width: 0;   /* fieldset bricht sonst nicht um */
}
body.ov-baender--seiten .ov-form-label,
body.ov-baender--seiten .ov-form-label--group {
    display: block;
    margin: 0 0 8px;
    font-size: 15px;
    letter-spacing: 0.01em;
}
body.ov-baender--seiten .ov-form-hint,
body.ov-baender--seiten .ov-form-hint-inline {
    display: block;
    margin: 7px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    opacity: 0.82;
}
body.ov-baender--seiten .ov-form-options {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
}

/* --- 3  Das Bewertungsformular als Karte ------------------------- */
body.ov-baender--seiten .ov-bewertung-form {
    background: var(--lila);
    color: var(--apri);
    border-radius: 34px 14px 30px 16px;
    padding: 38px 38px 32px;
    margin: 8px 0 0;
    box-shadow: 0 8px 20px var(--schatten-karte);
}

/* Auf der Karte braucht das Feld keine Kante mehr — die helle Flaeche
   ist der Kasten. Die Kante bliebe sonst als lila Linie darin stehen. */
body.ov-baender--seiten .ov-bewertung-form .ov-form-input,
body.ov-baender--seiten .ov-bewertung-form .ov-form-textarea {
    border-color: transparent;
}

/* Name und E-Mail nebeneinander: zwei kurze Angaben untereinander
   ziehen das Formular unnoetig in die Laenge. */
@media (min-width: 720px) {
    body.ov-baender--seiten .ov-bewertung-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 26px;
    }
    /* Alles laeuft ueber beide Spalten, ausser den ausdruecklich halben.
       Eine Auswahl ueber die Position (nth-of-type) hat hier NICHT
       getaugt: der Honigtopf gegen Bots ist das erste div im Formular
       und verschiebt die Zaehlung — "Dein Name" landete dadurch in der
       rechten Spalte. Deshalb eine echte Klasse aus dem Markup. */
    body.ov-baender--seiten .ov-bewertung-form > * { grid-column: 1 / -1; }
    body.ov-baender--seiten .ov-bewertung-form > .ov-form-field--halb { grid-column: auto; }
}

/* --- 4  Sterne auf der Karte ------------------------------------- */
/* bewertungen.css faerbt den leeren Stern mit --color-text-faint, und
   das ist im Baender-Theme Lila — auf der lila Karte waeren alle fuenf
   Sterne verschwunden. Leer ist deshalb ein gedaempftes Apricot, voll
   das volle. Das Gold von bewertungen.css bleibt damit aussen vor; es
   waere in dieser Palette die einzige Fremdfarbe. */
body.ov-baender--seiten .ov-bewertung-form .ov-star-label .ov-star-svg,
body.ov-baender--seiten .ov-bewertung-form .ov-stars-input:hover .ov-star-label .ov-star-svg {
    fill:   rgba(255, 187, 138, 0.5);
    stroke: rgba(255, 187, 138, 0.5);
}
body.ov-baender--seiten .ov-bewertung-form .ov-stars-input:hover .ov-star-label:hover .ov-star-svg,
body.ov-baender--seiten .ov-bewertung-form .ov-stars-input:hover .ov-star-label:hover ~ .ov-star-label .ov-star-svg,
body.ov-baender--seiten .ov-bewertung-form .ov-star-radio:checked + .ov-star-label .ov-star-svg,
body.ov-baender--seiten .ov-bewertung-form .ov-star-radio:checked ~ .ov-star-label .ov-star-svg {
    fill:   var(--apri);
    stroke: var(--apri);
}

/* Die Sternreihe darf nicht am Rand kleben. */
body.ov-baender--seiten .ov-bewertung-form .ov-stars-input { gap: 4px; margin-top: 2px; }

/* --- 5  Absenden und Fusszeile ----------------------------------- */
body.ov-baender--seiten .ov-bewertung-form .ov-form-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    margin-top: 8px;
    padding-top: 24px;
    border-top: 2px solid rgba(255, 187, 138, 0.28);
}