/*
 * Seitenleisten-Layout.
 *
 * Die alte Seite lief auf Avadas "side-header-left": eine feste Spalte links
 * mit Logo, vertikaler Navigation und Kontaktdaten. Das laesst sich in
 * theme.json nicht ausdruecken, weil es den gesamten Seitenrahmen betrifft und
 * nicht einen einzelnen Block — deshalb diese Datei.
 *
 * Ab --kfo-sidebar-breakpoint steht die Leiste fix links. Darunter wird aus
 * derselben Block-Struktur eine klebende Kopfzeile; das Menue uebernimmt das
 * Overlay des Core-Navigation-Blocks, es braucht also kein eigenes JavaScript.
 */

:root {
    --kfo-sidebar-width: 320px;
}

@media (min-width: 1100px) {

    /* Der Template-Part traegt die Klasse aus parts/header.html. */
    .kfo-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 20;
        width: var(--kfo-sidebar-width);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /*
     * Alles ausser der Leiste rueckt nach rechts. Der Selektor greift die
     * direkten Kinder des Seitenrahmens, damit auch die Fusszeile mitwandert
     * und keine Regel pro Template noetig ist.
     */
    .wp-site-blocks > *:not(.kfo-sidebar) {
        margin-left: var(--kfo-sidebar-width);
    }

    /* Vollbild-Bloecke sollen die verbleibende Breite fuellen, nicht 100vw. */
    .wp-site-blocks > *:not(.kfo-sidebar) .alignfull {
        max-width: none;
    }

    .kfo-sidebar__toggle {
        display: none;
    }
}

@media (max-width: 1099px) {
    .kfo-sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
    }

    /* In der Kopfzeile liegen Logo und Menue nebeneinander, nicht gestapelt.
       Die Regel muss den Kopf selbst treffen: seine Kinder sind Logo,
       Navigation und Kontaktgruppe. */
    .kfo-sidebar {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        gap: var(--wp--preset--spacing--20);
        padding-block: var(--wp--preset--spacing--10) !important;
    }

    .kfo-sidebar > .wp-block-site-logo {
        margin: 0;
    }

    /* Der Schriftzug muss in eine Zeile passen; die Buchstaben sind einzelne
       inline-blocks und wuerden sonst mitten im Wort umbrechen. */
    .kfo-type-settle {
        font-size: clamp(1.45rem, 6.8vw, 2.5rem);
    }

    /* Kontaktdaten haben in der schmalen Kopfzeile keinen Platz; sie stehen
       weiterhin vollstaendig in der Fusszeile. */
    .kfo-sidebar .kfo-sidebar__contact {
        display: none;
    }

    .kfo-sidebar .wp-block-site-logo img {
        max-height: 56px;
        width: auto;
    }
}

/* Vertikale Navigation: Trennlinien statt Aufzaehlungspunkte, grosszuegige
   Klickflaechen. Gilt nur in der Leiste, damit Menues im Inhalt unberuehrt
   bleiben. */
.kfo-sidebar .wp-block-navigation__container {
    gap: 0;
    /* Ohne stretch sind die Eintraege nur so breit wie ihr Text, und die
       Trennlinien enden mitten in der Leiste. */
    width: 100%;
    align-items: stretch;
}

.kfo-sidebar .wp-block-navigation-item {
    width: 100%;
}

.kfo-sidebar .wp-block-navigation-item__content {
    display: block;
    /* Der Eintrag ist ein Flex-Item und waechst von sich aus nicht — ohne
       width bleibt der Balken so breit wie der Text. Die negativen
       Aussenabstaende ueberbruecken das Innenabstand der Leiste, damit er
       wie in der Vorlage bis an beide Kanten laeuft. */
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem var(--wp--preset--spacing--20);
    margin-inline: calc(var(--wp--preset--spacing--20) * -1);
    color: var(--wp--preset--color--base);
    transition: background-color 0.22s ease, color 0.22s ease;
}

/* Beim Ueberfahren und auf der aktiven Seite ins Dunkelgrau statt ins
   Apricot: Apricot kommt auf Weiss nur auf 1,9:1 und waere als Textfarbe
   nicht lesbar. */
.kfo-sidebar .wp-block-navigation-item__content:hover,
.kfo-sidebar .wp-block-navigation-item__content:focus-visible,
.kfo-sidebar .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
}

@media (min-width: 1100px) {

    /* Die Linie sitzt am Eintrag selbst, nicht am Listenelement: nur der
       Eintrag reicht mit seinen negativen Aussenabstaenden bis an beide
       Kanten der Leiste. */
    .kfo-sidebar .wp-block-navigation-item + .wp-block-navigation-item .wp-block-navigation-item__content {
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }
}

/* Menuepunkte mittig, wie in der Vorlage. */
.kfo-sidebar .wp-block-navigation-item__content {
    text-align: center;
}

/* Die Trennlinie ueber den Kontaktdaten laeuft ebenfalls durch. */
.kfo-sidebar__contact .wp-block-separator {
    width: auto;
    margin-inline: calc(var(--wp--preset--spacing--20) * -1);
}

/* Bildkopf der Unterseiten: Titel sitzt im Bild, deshalb braucht das Bild eine
   Mindesthoehe und einen Verlauf gegen zu helle Motive. */
.kfo-hero {
    position: relative;
    min-height: clamp(220px, 34vw, 420px);
}

.kfo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(51, 51, 51, 0) 40%, rgba(51, 51, 51, 0.45) 100%);
    pointer-events: none;
}

.kfo-hero > * {
    position: relative;
    z-index: 1;
}

/* Kacheln der Startseite: das Bild soll beim Ueberfahren leicht zoomen, der
   Ausschnitt bleibt dabei stabil. */
.kfo-tile figure {
    overflow: hidden;
    margin: 0;
}

/* Die Bestandsfotos der Kacheln sind Panorama-Zuschnitte (etwa 2:1); 16:9
   beschneidet sie darum kaum. Das Portraet braucht einen hoeheren Bildpunkt,
   sonst schneidet derselbe Rahmen den Kopf ab. */
.kfo-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.kfo-tile__portrait img {
    object-position: center 22%;
}

.kfo-tile:hover img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {

    .kfo-tile img,
    .wp-block-group.is-style-kfo-card {
        transition: none;
    }

    .kfo-tile:hover img {
        transform: none;
    }
}

/* Anfrageformular. Die Felder kommen als HTML-Block, damit sie ohne
   Editor-Sitzung sichtbar sind; das Styling laeuft ueber die Theme-Tokens,
   damit es sich nicht von den uebrigen Bloecken unterscheidet. */
.kfo-form p {
    margin: 0 0 var(--wp--preset--spacing--20);
}

.kfo-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--contrast);
}

.kfo-form abbr {
    color: var(--wp--preset--color--accent-2);
    text-decoration: none;
}

.kfo-form input[type="text"],
.kfo-form input[type="email"],
.kfo-form textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--wp--preset--color--light-grey);
    border-radius: 0;
    background: var(--wp--preset--color--base);
    font-family: inherit;
    font-size: 1rem;
    color: var(--wp--preset--color--contrast);
}

.kfo-form input:focus-visible,
.kfo-form textarea:focus-visible,
.kfo-form button:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-2);
    outline-offset: 2px;
}

/* Die Zustimmung ist eine Zeile: Kaestchen, dann Label. Das Label muss ein
   Geschwister des Feldes bleiben — webx-forms liest den Text ueber
   nextElementSibling aus, um ihn in die E-Mail zu uebernehmen. */
.kfo-form__consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: start;
}

.kfo-form__consent input {
    margin-top: 0.3rem;
}

.kfo-form__consent label {
    margin: 0;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.9rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wp--preset--color--dark-grey);
}

.kfo-form button {
    border: 0;
    cursor: pointer;
}

/* Erfolgs- und Fehlermeldung des Formulars bleiben verborgen, bis view.js sie
   nach dem Absenden per inline-Style einblendet. Ohne diese Regel stehen beide
   Texte dauerhaft unter dem Formular. */
.webx-forms-success-message,
.webx-forms-error-message {
    display: none;
}

/* Einlaufender Schriftzug im Bildkopf, siehe assets/js/hero-type.js.
   Der Endzustand steht hier als Grundregel: wer kein JavaScript hat oder
   reduzierte Bewegung eingestellt hat, sieht die fertige Zeile. */
/* Die Buchstaben sind von Anfang an voll sichtbar — sie ruecken nur in die
   Reihe, wie Zaehne in eine Zahnspange. Deshalb keine Aufblende, dafuer ein
   deutlich kleinerer Versatz als zuvor. */
.kfo-type-settle__ch {
    display: inline-block;
    white-space: pre;
    transform: translateY(var(--kfo-dy, 0)) rotate(var(--kfo-rot, 0));
}

.kfo-type-settle.is-running .kfo-type-settle__ch {
    transform: none;
    /* Leichtes Ueberschwingen, damit die Buchstaben einrasten statt zu
       bremsen. */
    transition: transform 760ms cubic-bezier(0.2, 1.5, 0.35, 1) var(--kfo-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {

    .kfo-type-settle__ch {
        transform: none;
        transition: none;
    }
}

/* Offcanvas-Menue in Petrol. Die Grundfarben kommen aus den Block-Attributen;
   Schliessen-Schaltflaeche und Trennlinien muessen hier nachziehen, weil sie
   die Farben der Seitenleiste geerbt haetten. */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--accent-2) !important;
    color: var(--wp--preset--color--base) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--base);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item + .wp-block-navigation-item {
    border-top-color: rgba(255, 255, 255, 0.22);
}

/* Kontaktzeile in der Leiste: auf Petrol tragen die Links dieselbe Helligkeit
   wie der Text, nicht die Petrol-Linkfarbe des Inhaltsbereichs. */
.kfo-sidebar a:where(:not(.wp-block-navigation-item__content)) {
    color: var(--wp--preset--color--base);
}

.kfo-sidebar a:where(:not(.wp-block-navigation-item__content)):hover {
    color: var(--wp--preset--color--accent);
}

/* Kein weisser Spalt ueber dem ersten Element.
   WordPress gibt jedem direkten Kind des Seitenrahmens den globalen
   Block-Abstand als margin-block-start — beim Inhaltsbereich sind das 36px
   ueber dem Bildkopf, die live nicht existieren. Der Abstand nach unten und
   der vor der Fusszeile bleiben erhalten. */
.wp-site-blocks > main {
    margin-block-start: 0;
}

main > :first-child,
.wp-block-post-content > :first-child,
.entry-content > :first-child {
    margin-block-start: 0;
}

/* Kacheltitel lesbar halten.
   Die Titel sind Links und bekamen darum die Petrol-Linkfarbe aus theme.json —
   auf einem Foto ist das nicht zu entziffern. Sie erben jetzt die weisse
   Schrift der Ueberschrift; dazu ein Verlauf im unteren Bildbereich und ein
   weicher Schatten, damit auch helle Motive tragen. */
.kfo-navtile .wp-block-heading a,
.kfo-navtile .wp-block-heading a:hover,
.kfo-navtile .wp-block-heading a:focus {
    color: inherit;
    text-decoration: none;
}

.kfo-navtile .wp-block-heading {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Verlauf nur im unteren Drittel: das Motiv bleibt oben klar erkennbar, der
   Titel sitzt darunter auf ausreichend dunklem Grund. */
.kfo-navtile.wp-block-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 18, 17, 0) 45%, rgba(20, 18, 17, 0.78) 100%);
    pointer-events: none;
}

.kfo-navtile.wp-block-cover .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
}

/* Beim Ueberfahren wird das Motiv etwas ruhiger, der Titel tritt hervor. */
.kfo-navtile.wp-block-cover:hover::after {
    background: linear-gradient(180deg, rgba(4, 94, 90, 0) 35%, rgba(4, 94, 90, 0.85) 100%);
}

.kfo-navtile.wp-block-cover .wp-block-cover__inner-container {
    width: 100%;
}

.kfo-navtile .wp-block-heading {
    margin: 0;
    font-size: 1.4rem;
}

/* Ueberschriften im Inhalt tragen live eine feine Apricot-Linie und stehen in
   Versalien. Der Bildkopf ist ausgenommen: dort sitzt der Titel im Foto. */
.entry-content h2,
.wp-block-post-content h2,
.entry-content h3:not(.kfo-navtile *),
.wp-block-post-content h3:not(.kfo-navtile *) {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--wp--preset--color--accent);
}

/* Ausnahmen: der eingelaufene Schriftzug und Kacheltitel bleiben ohne Linie. */
.kfo-type-settle,
.kfo-navtile h3,
.kfo-navtile .wp-block-heading {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    text-transform: uppercase;
}

/* Der Schriftzug bleibt in gemischter Schreibweise wie in der Vorlage. Der
   Selektor muss die Versalien-Regel fuer Ueberschriften im Inhalt schlagen,
   die eine Klasse mehr mitbringt. */
.entry-content .kfo-type-settle,
.wp-block-post-content .kfo-type-settle,
.kfo-type-settle {
    text-transform: none;
}

/* Trennlinien: WordPress gibt ihnen eigene Aussenabstaende, die sich mit dem
   Block-Abstand der Gruppe addieren — oben anders als unten, die Linie sitzt
   dann nicht mittig. Die Eigenabstaende entfallen, den Rest macht das
   blockGap des Flow-Layouts, das oben und unten gleich greift.
   `margin-block-start: unset` statt `0`, damit die Layout-Regel nicht
   ueberschrieben wird. */
.entry-content .wp-block-separator,
.wp-block-post-content .wp-block-separator {
    margin-block-end: 0;
    margin-inline: auto;
    width: 100%;
}

/* Bildkopf mit Parallax: der Core-Cover setzt dafuer background-attachment
   fixed. Auf iOS ignorieren Safari und Chrome das und zeigen das Bild
   verschoben — dort schaltet die Regel zurueck auf einen ruhigen Hintergrund. */
@supports (-webkit-touch-callout: none) {
    .kfo-hero.has-parallax {
        background-attachment: scroll;
    }
}

/* Sektionen ueber die volle Inhaltsbreite, halb Bild, halb Text — wie in der
   Vorlage. Der Text bekommt Innenabstand, das Bild bleibt randlos. */
.kfo-section.wp-block-media-text {
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.kfo-section.wp-block-media-text > .wp-block-media-text__media {
    align-self: stretch;
}

.kfo-section.wp-block-media-text > .wp-block-media-text__media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.kfo-section.wp-block-media-text > .wp-block-media-text__content {
    padding: clamp(1.75rem, 4vw, 3.5rem);
}

@media (max-width: 781px) {
    .kfo-section.wp-block-media-text {
        grid-template-columns: 1fr;
    }

    .kfo-section.wp-block-media-text > .wp-block-media-text__media img {
        height: auto;
        aspect-ratio: 3 / 2;
    }
}

/* Sektionen ueber die volle Inhaltsbreite: dafuer sorgt WordPress selbst,
   solange useRootPaddingAwareAlignments aktiv ist — es zieht alignfull-Bloecke
   per negativem Aussenabstand ueber das Root-Padding. Eine eigene Regel
   dafuer addierte sich zu dieser und schob den Bildkopf mobil 30px ueber jede
   Kante hinaus. */

/* Sicherheitsnetz: nichts darf die Seite seitlich scrollen lassen. */
html,
body {
    overflow-x: clip;
}

/* Die Smile-Wortmarke ist ein Akzent, keine Bildstrecke. */
.kfo-smile {
    text-align: center;
}

.kfo-smile img {
    width: min(300px, 70vw);
    height: auto;
}

/* Mobiles Menue: das Overlay des Core-Navigation-Blocks bekommt Luft, eine
   ruhige Reihenfolge und denselben Balken-Effekt wie die Leiste am Desktop. */
.wp-block-navigation__responsive-container.is-menu-open {
    /* Das Overlay des Core-Blocks setzt padding und gap mit 30px auf drei
       Ebenen; ohne !important bleiben Balken und Trennlinien 30px vor der
       Kante stehen und zwischen den Eintraegen klaffen Luecken. Den seitlichen
       Textabstand tragen die Eintraege selbst. */
    padding-inline: 0 !important;
    padding-block: clamp(1.5rem, 6vw, 3rem) !important;
    gap: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 0 !important;
    width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
    align-items: stretch;
    justify-content: center;
    padding-top: clamp(2rem, 10vh, 5rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100%;
    gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    /* Die Leiste am Desktop zieht die Eintraege mit negativem Aussenabstand
       ueber ihr Innenabstand hinaus. Im Overlay gibt es das nicht — ohne
       Ruecksetzung rutscht der Text aus dem Bild. */
    margin-inline: 0;
    /* Auch hier gewinnt sonst das Overlay-CSS des Core-Blocks mit padding:0 —
       der Text klebte dadurch an der linken Kante. */
    padding: 1.05rem clamp(1.25rem, 6vw, 2.5rem) !important;
    font-size: 1.35rem;
    letter-spacing: 2px;
    color: var(--wp--preset--color--base);
    transition: background-color 0.22s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
}

/* Schliessen-Schaltflaeche: gleiche Groesse wie der Hamburger, klar sichtbar. */
.wp-block-navigation__responsive-container-close {
    top: clamp(1.1rem, 4vw, 2rem);
    right: clamp(1.1rem, 4vw, 2rem);
    color: var(--wp--preset--color--base);
}

.wp-block-navigation__responsive-container-close svg {
    width: 28px;
    height: 28px;
}

/* Kontaktzeile im Overlay: die Leiste blendet sie mobil aus, im geoeffneten
   Menue ist Platz dafuer. */
.wp-block-navigation__responsive-container.is-menu-open::after {
    content: "+43 512 909 200 · info@kieferorthopaedie.tirol";
    display: block;
    margin-top: auto;
    padding-top: 2rem;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.75);
}

/* Das Overlay setzt eigene Abstaende zwischen den Eintraegen; ohne diese Regel
   schweben die Trennlinien zwischen den Zeilen statt an ihnen zu sitzen. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > * {
    row-gap: 0;
    margin-block: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    display: flex;
}

.wp-block-navigation__responsive-container.is-menu-open::after {
    padding-inline: clamp(1.25rem, 6vw, 2.5rem);
}

/* Zweigeteilte Sektion mit Karte: die Spalten stossen aneinander, die Karte
   fuellt ihre Haelfte in voller Hoehe. Der Text braucht den Innenabstand,
   den die Spalte selbst nicht mitbringt. */
.kfo-split.wp-block-columns {
    gap: 0;
    align-items: stretch;
}

.kfo-split > .wp-block-column {
    padding: clamp(1.75rem, 4vw, 3.5rem);
}

.kfo-split > .kfo-split__map {
    padding: 0;
    align-self: stretch;
}

/* Die Karte behaelt ihre Hoehe aus dem Rahmen-Attribut. Kein sticky und kein
   height:100%: beides fuehrte dazu, dass das eingebettete Kartendokument seine
   Breite falsch berechnet und nur als schmaler Streifen erscheint. */
.kfo-split__map .kfo-map {
    display: block;
    width: 100%;
    border: 0;
}

@media (max-width: 781px) {
    .kfo-split__map {
        min-height: 320px;
    }
}

/* Der Schriftzug bleibt als Wort zusammen und passt sich der Breite an,
   statt mitten im Wort umzubrechen. */
.kfo-type-settle__word {
    display: inline-block;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .kfo-type-settle {
        font-size: min(6vw, 2rem);
        letter-spacing: 0;
    }
}

/* Uebergang vom Bildkopf zum Inhalt.
   Sektionen ueber die volle Breite schliessen direkt an den Bildkopf an — ein
   weisser Streifen dazwischen zerschneidet die Seite. Beginnt eine Seite
   dagegen mit Text (Impressum, Datenschutz, Info), braucht sie Luft, sonst
   klebt die erste Zeile am Bild. */
/* Der Inhaltsbereich selbst ist ein Kind des Flow-Layouts und erbt dessen
   Block-Abstand — das waren die letzten 36px zwischen Bildkopf und erster
   Sektion. */
main > .wp-block-post-content,
.wp-block-post-content > :first-child,
.entry-content > :first-child {
    margin-block-start: 0;
}

.wp-block-post-content > :first-child:not(.alignfull):not(.wp-block-cover),
.entry-content > :first-child:not(.alignfull):not(.wp-block-cover) {
    margin-block-start: var(--wp--preset--spacing--50);
}

/* Alles in der Seitenleiste steht auf Petrol und braucht darum die helle
   Schrift. Ohne diese Regel erbt ein Absatz ohne eigene Farbe das Lesetext-
   Grau — auf dem dunklen Grund sind das 1,4:1 Kontrast und damit unlesbar. */
.kfo-sidebar,
.kfo-sidebar p,
.kfo-sidebar li,
.kfo-sidebar strong {
    color: var(--wp--preset--color--base);
}

/* Aufeinanderfolgende Bild-Text-Sektionen stossen direkt aneinander: die
   Bildkanten sollen eine durchgehende Treppe bilden, kein weisser Streifen
   dazwischen. Folgt etwas anderes (Gruppe, Karten, Trennlinie), bleibt der
   normale Block-Abstand. */
.kfo-section + .kfo-section,
.kfo-section + .kfo-split,
.kfo-split + .kfo-section,
.kfo-band + .kfo-section,
.kfo-section + .kfo-band {
    margin-block-start: 0;
}

/* Einwilligungs-Dialog und Platzhalter im CI.
   Das Plugin bringt ein neutrales Grau mit; hier bekommt es den warmen
   Seitenton, den Apricot-Rahmen der Karten und lesbare Schaltflaechen —
   weisse Schrift auf Apricot kommt nur auf 1,9:1. */
.cookiefox,
.cookiefox__embed {
    background-color: var(--wp--preset--color--light) !important;
    color: var(--wp--preset--color--contrast) !important;
}

.cookiefox__embed {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--wp--preset--color--light-grey);
    border-bottom: 4px solid var(--wp--preset--color--accent);
    text-align: center;
}

.cookiefox__embed-notice p {
    margin: 0 0 1.25rem;
    max-width: 44ch;
}

.cookiefox__button--primary,
.cookiefox .is-button {
    background-color: var(--wp--preset--color--accent-2) !important;
    color: var(--wp--preset--color--base) !important;
    border: 0;
    padding: 0.85rem 1.6rem;
    font-family: var(--wp--preset--font-family--heading);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.cookiefox__button--primary:hover,
.cookiefox .is-button:hover {
    background-color: var(--wp--preset--color--contrast) !important;
}

/* Sekundaere Schaltflaeche ("Nur Notwendige"): heller Grund mit dunkler
   Schrift statt Apricot mit Weiss. */
.cookiefox__button--secondary {
    background-color: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;
    border: 1px solid var(--wp--preset--color--light-grey) !important;
    padding: 0.85rem 1.6rem;
    font-family: var(--wp--preset--font-family--heading);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cookiefox__button--secondary:hover {
    border-color: var(--wp--preset--color--accent-2) !important;
    color: var(--wp--preset--color--accent-2) !important;
}