/*
 * Nachträge von Hand.
 *
 * WOGEGEN DAS GEBAUT IST: style.css wird vom theme_generator aus den 87
 * Vorlageseiten erzeugt. Jede Zeile, die man dort hineinschreibt, ist beim
 * nächsten Durchlauf weg - und man merkt es erst, wenn eine Seite wieder grau
 * aussieht. Diese Datei wird nicht erzeugt, sondern gepflegt, und liegt hinter
 * style.css in der Reihenfolge. Alles, was die Vorlage nicht hergibt und
 * trotzdem gelten soll, gehört hierher - mit einer Zeile, warum.
 */

/* -- Staples ------------------------------------------------------------- */

/* Kopfbild. Die Vorlage zeigt hier ein Bild aus der alten Bildstrecke; der
   Hersteller hat inzwischen eigene Aufnahmen geliefert (assets/Staples), die
   deutlich hochwertiger sind. .hero-bg-v37 gehört allein dieser Seite. */
.hero-bg-v37 {
    background-image: url(assets/Staples/staples-hero.jpg) !important;
    background-position: center 62%;
}

/* Herstellerlogo über dem Modellnamen - wie auf den King-Koil-, Sleep-Sense-
   und Avebury-Seiten. Begrenzt wird die HÖHE, nicht die Breite: Die Logos der
   fünf Hersteller haben sehr verschiedene Seitenverhältnisse, und über die
   Breite begrenzt wird das breiteste winzig und das schmalste riesig. */
.st-model-logo {
    display: flex;
    justify-content: center;   /* der Kopf des Modells ist zentriert, das Logo gehört mittig darüber */
    margin-bottom: 14px;
}
.st-model-logo img {
    height: 34px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

/* -- Wissenswertes: Mosaik ----------------------------------------------- */

/* Neun gleich grosse Karten in drei Spalten lesen sich wie ein Katalog, nicht
   wie ein Blog: Nichts ist wichtiger als der Rest, und die unterschiedlich
   langen Auszuege lassen die Reihen ausfransen.
   Der erste Artikel bekommt deshalb zwei Spalten und ein grosses Bild, alle
   Karten eine gleiche Hoehe, und der Auszug wird nach vier Zeilen abgeschnitten
   statt die Karte zu dehnen. */
.wissen-grid--mosaik {
    align-items: stretch;
}
.wissen-grid--mosaik .wissen-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wissen-grid--mosaik .wissen-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Der Verweis unten bündig, egal wie lang der Auszug ist. */
.wissen-grid--mosaik .wissen-card-link {
    margin-top: auto;
}
.wissen-grid--mosaik .wissen-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 900px) {
    .wissen-grid--mosaik .wissen-card.featured {
        grid-column: span 2;
    }
    /* Im Aufmacher liegt das Bild links neben dem Text - sonst wird die Karte
       doppelt so hoch wie die Reihe daneben und reisst ein Loch ins Raster. */
    .wissen-grid--mosaik .wissen-card.featured {
        flex-direction: row;
    }
    .wissen-grid--mosaik .wissen-card.featured .wissen-card-image {
        flex: 0 0 46%;
        align-self: stretch;
    }
    .wissen-grid--mosaik .wissen-card.featured .wissen-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .wissen-grid--mosaik .wissen-card.featured .wissen-card-body {
        justify-content: center;
    }
    .wissen-grid--mosaik .wissen-card.featured .wissen-card-excerpt {
        -webkit-line-clamp: 6;
    }
}

/* -- Übersichtsseiten: Vorspann im Kopfbereich ---------------------------- */

/* Die vier Übersichtsseiten (Boxspringbetten, Matratzen, Bettwäsche,
   Accessoires) zeigten im Kopf nur ihre Überschrift. Untertitel und Vorspann
   stehen jetzt darunter - beide freiwillig, beide nur auf diesen Seiten
   gefüllt. .hero-content-v3 ist der gemeinsame Rahmen; ohne ihn läge der
   Vorspann als eigenes Flex-Kind neben der Überschrift statt darunter. */
.hero-content-v3 {
    position: relative;
    z-index: 1;
    max-width: 900px;
    padding: 0 24px;
}
/* Ein Vorspann über einem hellen Foto ist unlesbar - die Kopfbilder dieser
   vier Seiten sind allesamt hell (weiße Matratze, helles Zimmer).
   Der erste Anlauf legte dafür einen weichen Fleck hinter den Text. Das war
   der falsche Weg: Man sieht den Fleck, sobald man ihn einmal bemerkt hat, und
   er wandert mit der Textbreite mit. Stattdessen liegt das Bild jetzt etwas
   dunkler - gleichmässig über die ganze Fläche, so wie es die anderen
   Kopfbereiche ohnehin schon tun. */
.hero-intro {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.78);
    max-width: 680px;
    margin: 18px auto 0;
    text-wrap: pretty;
}
@media (max-width: 768px) {
    .hero-intro { font-size: 15px; }
}

/* -- Häufige Fragen ------------------------------------------------------ */

/* Die Frage stand in Italiana - einer dekorativen Display-Serife, die es nur
   in EINER Strichstärke gibt. font-weight: 500 hat deshalb gar nichts bewirkt;
   die Fragen blieben dünn, breit und auf hellem Grund kaum lesbar. Eine Frage
   ist Gebrauchstext, kein Titel: Sie gehört in die Textschrift. Die
   Seitenüberschrift bleibt in der Serife, der Charakter der Seite also auch. */
.faq-question h3,
.faq-question-v2 h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px;
    line-height: 1.5;
    color: var(--text-dark);
}
@media (max-width: 768px) {
    .faq-question h3,
    .faq-question-v2 h3 { font-size: 16px !important; }
}

/* Die Rufnummernleiste war ein flaches schwarzes Band mit vier winzigen
   grauen Beschriftungen - auf einer Seite, deren wichtigste Handlung "ruf an"
   ist, die unauffälligste Fläche von allen. Sie nimmt jetzt die Form des
   Anrufen-Fensters an: helle Kacheln mit Rahmen, die Nummer gross, und beim
   Überfahren füllt sich die Kachel dunkel. */
.faq-contact-bar {
    background: transparent;
    padding: 0;
    gap: 14px;
}
.faq-contact-item {
    text-align: left;
    border: 1px solid #1a1a1a;
    padding: 16px 20px 18px;
    transition: background 0.35s ease, color 0.35s ease;
}
.faq-contact-item:hover {
    background: #1a1a1a;
}
.faq-contact-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.55);
    margin-bottom: 6px;
    transition: color 0.35s ease;
}
.faq-contact-item:hover .faq-contact-label {
    color: rgba(255, 255, 255, 0.6);
}
.faq-contact-value {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #1a1a1a;
    /* Eine Rufnummer, die umbricht, ist keine Rufnummer mehr - "+49 211 53 67"
       in der ersten und "540" in der zweiten Zeile liest niemand als eine. */
    white-space: nowrap;
}
.faq-contact-value a {
    color: inherit;
    text-decoration: none;
    /* Die ganze Kachel ist die Fläche, nicht nur die Ziffern. */
    display: block;
}
.faq-contact-item:hover .faq-contact-value,
.faq-contact-item:hover .faq-contact-value a {
    color: #fff;
    opacity: 1;
}
@media (max-width: 900px) {
    .faq-contact-value { font-size: 16px; }
    .faq-contact-item { padding: 14px 16px 16px; }
}

/* -- Über uns ------------------------------------------------------------ */

/* Das Kopfbild zeigte dasselbe King-Koil-Bett wie der Abschnitt
   "Markenpartner" weiter unten - zweimal dasselbe Foto auf einer Seite, und
   beide Male ein Produktbild auf einer Seite, die vom Unternehmen handelt.
   Jetzt der Showroom: Er sagt, was die Seite sagt.

   DER NAME MUSS "hero-bg-v" ENTHALTEN. cocoon_hintergruende_umbiegen() legt
   fuer die Startseite eine Regel mit !important auf
   .hero-bg:not([class*="hero-bg-v"]) - eine Klasse ohne dieses Stueck faengt
   sich also das Kopfbild der Startseite ein. Genau das ist hier passiert:
   .hero-bg-ueber-uns zeigte das King-Koil-Atlantis-Bett der Startseite. */
.hero-bg-v99 {
    position: absolute;
    inset: -20%;
    background: url(assets/showroom_experience_2k.jpg) center 55% / cover no-repeat;
    will-change: transform;
}

/* -- Kontaktformular ----------------------------------------------------- */

/* Auswahl und mehrzeiliges Feld gab es im erzeugten Formular nicht - alle
   sieben Felder waren einzeilige Textfelder. Sie brauchen dieselbe Anmutung
   wie .form-input, das Auswahlfeld zusätzlich einen eigenen Pfeil, weil der
   des Systems in dieser Schrift fremd wirkt. */
.cocoon-kontakt select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 40px;
    cursor: pointer;
}
.cocoon-kontakt textarea.form-input {
    min-height: 130px;
    resize: vertical;
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
}
.cocoon-kontakt .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 6px 0 22px;
}
.cocoon-kontakt .form-check input { margin-top: 3px; flex: 0 0 auto; }
.cocoon-kontakt .form-check a { color: var(--text-dark); }
.cocoon-kontakt .form-note {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 14px;
}
/* Die Rückmeldung nach dem Absenden. Leer nimmt sie keinen Platz ein -
   sonst klaffte unter dem Knopf eine Lücke, die niemand erklären kann. */
.cocoon-kontakt .form-status:empty { display: none; }
.cocoon-kontakt .form-status {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px;
    padding: 14px 16px;
    border-left: 2px solid currentColor;
}
.cocoon-kontakt .form-status--ok { color: #2f6b46; background: rgba(47, 107, 70, 0.06); }
.cocoon-kontakt .form-status--fehler { color: #a8322d; background: rgba(168, 50, 45, 0.06); }

/* -- King Koil Boxspringbetten ------------------------------------------- */

/* Kopfbild aus den neuen Final-Edits-Rendern. Milano III, Variation C: dunkle
   Wand links, Bett mittig, weiches Licht rechts - der Titel steht darüber
   lesbar, ohne dass der Überzug abgedunkelt werden muss.
   Der Klassenname MUSS "hero-bg-v" enthalten, sonst fängt die !important-Regel
   der Startseite das Bild ab (siehe .hero-bg-v99). */
.hero-bg-v98 {
    position: absolute;
    inset: -20%;
    background: url(assets/Final-Edits-web/kk-hero-milano.jpg) center 58% / cover no-repeat;
    will-change: transform;
}

/* -- King Koil Hotel ----------------------------------------------------- */

/* Kopfbild aus den neuen Final-Edits-Rendern: Mod. Seattle - Fensterfront mit
   Skyline, Wandpaneel mit Messing. Unter allen fünf Hotel-Rendern das einzige,
   das ohne Bildunterschrift als Hotelzimmer zu erkennen ist.
   Klassenname mit "hero-bg-v", sonst greift die !important-Regel der
   Startseite (siehe .hero-bg-v99). */
.hero-bg-v97 {
    position: absolute;
    inset: -20%;
    background: url(assets/Final-Edits-web/kk-hotel-seattle.jpg) center 55% / cover no-repeat;
    will-change: transform;
}

/* Die Herstellerlogos über den Modellnamen waren mit 34 px so klein, dass die
   Wortmarke darunter nicht mehr zu lesen war. Begrenzt bleibt die HÖHE - die
   fünf Herstellerlogos haben sehr verschiedene Seitenverhältnisse. */
.hotel-product-logo img {
    height: 48px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}
@media (max-width: 768px) {
    .hotel-product-logo img { height: 40px; }
}

/* -- Übersichtsseiten: Kartentext ---------------------------------------- */

/* Auf der Startseite steht unter dem Kartennamen ein ruhiger Fliesstext
   (.category-card-desc). Auf den Übersichtsseiten kam derselbe Satz aus
   .product-card-desc - in Versalien, fast schwarz, mit weiter Laufweite. Zwei
   Handschriften für dieselbe Sache, und die zweite liest sich wie ein Etikett.
   Angeglichen wird der Beschreibungstext, NICHT der Modellname darüber - der
   bleibt in der Serife. */
/* ZWEITER ANLAUF, und der Grund ist die Spezifitaet. Der erste Versuch stand
   auf .products-section .product-card-desc - zwei Klassen. Gegen ihn stehen
   zwei staerkere Regeln, beide nicht von Hand geschrieben:

     .product-card-desc:not(.-v2):not(.-v3):not(.-v4):not(.-v5)   (varianten_schutz.py)
     .missoni-card .product-card-desc.product-card-desc-v4        (split_classes.py)

   Die erste zaehlt fuenf Klassen, weil jedes :not() sein Argument mitzaehlt.
   Auf der Accessoires-Seite tragen die Karten gar keine Variante, also greift
   genau sie - und setzt Versalien. Deshalb hier !important auf die vier
   Angaben, die den Etikett-Eindruck machen. Alles andere bleibt der
   erzeugten Regel ueberlassen. */
.product-card-desc {
    font-family: 'Inter', sans-serif !important;
    font-weight: 300 !important;
    line-height: 1.75;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    color: var(--text-muted);
}
/* Keine eigene Schriftgroesse mehr: Die erzeugte Regel gibt 17 px vor, und
   genau so stehen die Karten auf der Startseite da. Eine zweite Groesse fuer
   die Unterseiten hiesse, dass dieselbe Karte je nach Seite anders aussieht -
   und auffallen wuerde es erst beim Nebeneinanderlegen. */

/* -- Mobil: Kopfbereich der Übersichtsseiten ----------------------------- */

@media (max-width: 768px) {
    /* Der Titel hing im oberen Drittel: gemessen 96 px von oben in einem
       591 px hohen Kopfbild. Grund ist der feste Kopf, der die oberen ~120 px
       überlagert - was optisch mittig sein soll, muss rechnerisch tiefer
       liegen. Deshalb zentriert plus Ausgleich oben. */
    .hero-section-v3 {
        align-items: center;
        padding: 100px 0 56px;
    }
    .hero-content-v3 {
        padding: 0 22px;
        max-width: 100%;
    }
    /* Der SEO-Vorspann bleibt im Dokument - Google indexiert die mobile
       Fassung, was hier per display:none verschwindet, zählt nicht mehr.
       Gekürzt statt versteckt: vier Zeilen, der Rest wird abgeschnitten. */
    .hero-intro {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.65;
        margin-top: 14px;
    }
    .hero-content-v3 .hero-subtitle-main {
        font-size: 11px !important;
        letter-spacing: 3px !important;
    }
}

/* -- Mobil: waagerechter Überlauf der Kategorie-Kacheln ------------------ */

/* Auf /produkte/luxus-boxspringbetten/ liess sich die Seite seitlich schieben:
   412 px Inhalt in einem 390 px breiten Fenster. Die Ursache steckt in einer
   Eigenheit von CSS-Grid: `1fr` ist `minmax(auto, 1fr)`, und `auto` heisst
   `min-content`. Ein Bild ohne max-width kann nicht schrumpfen, also wuchs die
   Spur auf 382 px - breiter als das Raster selbst, das 330 px misst.
   `minmax(0, 1fr)` erlaubt der Spur, unter die Mindestbreite ihres Inhalts zu
   gehen; das Bild folgt dann dem Raster statt umgekehrt. */
.categories-grid {
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 601px) {
    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* Zweiter Riegel: Ein Bild darf nie breiter werden als sein Kasten. */
.category-card img,
.product-card img,
.wissen-card img {
    max-width: 100%;
    height: auto;
}

/* -- Mobil: Kopfbereich, zweiter Anlauf ---------------------------------- */

/* Der erste Versuch traf nur .hero-section-v3. Die Boxspringbetten-Übersicht
   benutzt aber -v10, und die blieb dadurch bei 147 px, während die
   Matratzen-Seite auf 197 ging. Zum Vergleich die Seiten mit -v2 (Über uns,
   Filialen, Kontakt): dort steht der Titel bei 227 bis 243 px - das ist die
   Höhe, die richtig aussieht, weil der feste Kopf die oberen ~120 px verdeckt.
   Deshalb gilt die Regel jetzt für beide Varianten und zielt auf denselben
   Wert. */
@media (max-width: 768px) {
    .hero-section-v3,
    .hero-section-v10 {
        align-items: center;
        padding: 180px 0 100px;
    }
}

/* -- Mobil: Menü --------------------------------------------------------- */

/* .m-menu-bottom trug margin-top: 170px. Zusammen mit dem Rest ergab das ein
   Loch von rund 200 px zwischen dem letzten Menüpunkt und den beiden Knöpfen -
   die Punkte klebten oben, die Knöpfe unten, dazwischen nichts.
   Mit margin: auto oben und unten verteilt sich der freie Platz gleichmässig:
   gleicher Abstand zum Logo wie zu den Knöpfen. */
@media (max-width: 900px) {
    .m-menu-links {
        margin-top: auto;
        margin-bottom: auto;
    }
    .m-menu-bottom {
        margin-top: 0;
    }
}

/* -- Kopfbilder: gleichmässig dunkler statt Schatten hinter der Schrift --- */

/* .hero-overlay-v3 lief oben auf rgba(0,0,0,0.05) aus - über einem hellen
   Foto blieb von weisser Schrift wenig übrig. Deshalb hier ein Verlauf, der
   auch in der Mitte trägt. Das !important ist nötig, weil style.css seinerseits
   ein !important auf .hero-overlay setzt; ohne das gewinnt die Grundregel
   unabhängig von der Spezifität. */
.hero-section .hero-overlay.hero-overlay-v3,
.hero-section .hero-overlay.hero-overlay-v5 {
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.58) 0%,
        rgba(0, 0, 0, 0.42) 45%,
        rgba(0, 0, 0, 0.46) 100%) !important;
}

/* -- Filialseiten: der Showroom-Abschnitt -------------------------------- */

/* Der ganze Abschnitt steckt in eingefrorenem Markup mit Inline-Styles: das
   <section> ist ein zweispaltiges Raster, die Textspalte ein Flex-Container
   in Spaltenrichtung, die Kartenspalte hat 60 px Polster und die SVG darin
   max-width: 380px. Inline schlägt jeden Selektor, deshalb hier durchweg
   !important - anders ist an die Werte nicht heranzukommen. */

/* Der Knopf „Termin vereinbaren" ist direktes Kind des Flex-Containers.
   align-items steht dort auf dem Vorgabewert stretch, also zog sich das
   inline-block über die volle Spaltenbreite - und mit ihm der Unterstrich,
   quer durch die halbe Seite. */
.store-info-section > div > a {
    align-self: flex-start !important;
}

/* Die Landkarte stand mit 380 px in einer Spalte, die auf grossen Schirmen
   über 700 px breit ist: eine Briefmarke in einem leeren Feld. */
.store-info-section > div:last-child {
    padding: 32px !important;
}
.store-info-section > div:last-child > svg {
    max-width: 100% !important;
    width: 100% !important;
}

/* Zwei feste Spalten bleiben auch bei 390 px zwei feste Spalten. Von der
   Textspalte blieben nach 120 px Polster links und 60 px rechts ein paar
   Pixel übrig. */
@media (max-width: 900px) {
    .store-info-section {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .store-info-section > div:first-child {
        padding: 48px 24px 40px !important;
    }
    .store-info-section > div:last-child {
        padding: 8px 24px 48px !important;
    }
}

/* -- Kontaktseite: die kaputte Standortzeile ------------------------------ */

/* .stores-teaser-locations gab „🇩🇪 9 mal Deutschland | mal | 🇦🇹 3 mal
   Österreich | mal" aus: zwei der vier Länder fehlen, dafür stehen zwei
   nackte „mal" dazwischen. Der Block hat für jedes Land ein eigenes Feld,
   und beim Import sind zwei davon in <span class="loc-mal"> gerutscht.
   Die Zeile trägt nichts, was nicht zwei Zeilen höher schon steht
   („14 Standorte in Europa"), deshalb raus statt repariert. */
.stores-teaser-locations {
    display: none !important;
}

/* -- Die Terminseite ------------------------------------------------------ */

/* Gebaut nach dem Muster der Filialübersicht: Land als Zwischenzeile, darunter
   ein Raster aus schmalen Karten. Keine eigenen Farben - alles aus den
   Variablen des Sockels, damit die Seite nicht auffällt, wenn sich das
   Farbschema ändert. */
.termin-liste {
    max-width: 1180px;
    margin: 0 auto;
    padding: 90px 24px 40px;
}
.termin-land + .termin-land {
    margin-top: 64px;
}
.termin-land-name {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 14px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.termin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1px;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
/* Der 1px-Abstand auf dunklem Grund zeichnet das Raster - so entstehen die
   Trennlinien ohne doppelte Ränder an den Stossstellen. */
.termin-karte {
    background: #fff;
    padding: 34px 28px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.termin-ort {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    color: var(--text-dark);
    margin: 0;
}
.termin-knopf {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: var(--bg-black, #111);
    text-decoration: none;
    padding: 13px 22px;
    transition: opacity 0.3s;
}
.termin-knopf:hover {
    opacity: 0.78;
}
.termin-hinweis {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    padding: 13px 0;
}
.termin-karte--zu {
    background: var(--bg-warm, #f7f5f2);
}
.termin-filiale {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    padding-bottom: 2px;
    transition: border-color 0.3s;
}
.termin-filiale:hover {
    border-color: var(--text-dark);
}
.termin-anruf {
    margin-top: 70px;
    padding: 44px 24px;
    background: var(--bg-warm, #f7f5f2);
    text-align: center;
}
.termin-anruf-text {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 300;
    color: var(--text-body);
    margin: 0 0 14px;
}
.termin-anruf-knopf {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: var(--bg-black, #111);
    text-decoration: none;
    padding: 15px 34px;
    margin-top: 6px;
    transition: opacity 0.3s;
}
.termin-anruf-knopf:hover {
    opacity: 0.78;
}
@media (max-width: 600px) {
    .termin-liste { padding: 60px 18px 30px; }
    .termin-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Kopfbild der Terminseite. Eigene Klasse statt Vorgabe: hero-section-v3 zieht
   sonst das Bett der Matratzenübersicht, und auf einer Seite, die zum Besuch
   im Laden einlädt, gehört der Laden. */
.hero-section.hero-section-v3.hero-section-v96 {
    background-image: url('assets/filialen/muenchen-hero.jpg') !important;
}

/* -- Kopfbild der Boxspringbetten-Übersicht ------------------------------- */

/* hero-section-v10 zog kk-stripe-os.jpg aus produkte_renders5 - eine ältere
   Reihe. Die Übersicht ist die wichtigste Produktseite; dort gehört ein
   Final-Render hin. Gewählt: king-koil-paris, weil das Bett mittig steht und
   links wie rechts genug Raum bleibt, damit die Überschrift nicht auf dem
   Kopfteil liegt. */
.hero-section.hero-section-v10 {
    background-image: url('assets/produkte-final/king-koil-paris.jpg') !important;
}

/* -- Terminseite: die leeren Rasterfelder --------------------------------- */

/* Das Raster zeichnete seine Linien über einen dunklen Untergrund, den der
   1px-Abstand durchscheinen lässt. Wo eine Zeile nicht voll wird - Österreich
   hat zwei Standorte, Italien einen - blieb dieser Untergrund als graue
   Fläche stehen. Mit einem Ring am Kärtchen statt Farbe am Behälter zeichnen
   nur die Kärtchen, und leere Spuren bleiben leer. Benachbarte Ringe fallen
   im 1px-Abstand aufeinander, also bleibt die Linie einfach. */
.termin-grid {
    background: none;
    border: 0;
}
.termin-karte {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* -- Terminseite, zweiter Anlauf ------------------------------------------ */

/* Ohne Kopfbild beginnt die Seite unter dem festen Kopf - der ist mit
   Filialleiste, Logo und Navigation rund 150 px hoch. */
.termin-liste {
    padding-top: 190px;
}
.termin-kopf {
    text-align: center;
    margin-bottom: 66px;
}
.termin-kopf-titel {
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 400;
    color: var(--text-dark);
    margin: 0 0 12px;
}
.termin-kopf-text {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 300;
    color: var(--text-body);
    margin: 0;
}

/* Alles im Kärtchen mittig - Ort, Knopf und der Verweis zur Filiale
   untereinander auf einer Achse. */
.termin-karte {
    align-items: center;
    text-align: center;
    padding: 38px 22px 34px;
}
.termin-ort {
    font-family: var(--font-heading);
    font-size: 27px;
    font-weight: 500;
}

@media (max-width: 600px) {
    .termin-liste { padding-top: 130px; }
    .termin-kopf-titel { font-size: 30px; }
    .termin-kopf { margin-bottom: 44px; }
}

/* -- Sofortlieferprogramm: Luft vor dem Video-Abschnitt ------------------- */

/* .mood-section endete mit 10 px Polster, direkt darunter beginnt der
   Video-Abschnitt in voller Breite. Die Impressionen klebten daran. */
.mood-section {
    padding-bottom: 110px;
}
@media (max-width: 768px) {
    .mood-section { padding-bottom: 70px; }
}

/* -- Sofortlieferprogramm: Kopfbild -------------------------------------- */

/* assets/sofort/hero.jpg war ein Foto aus der alten Reihe. Auf einer Seite,
   die lagernde Betten anpreist, gehört eins der neuen Renderings hin -
   sleep-sense-boston, weil das Bett links steht und die Überschrift dadurch
   auf freier Wand liegt. */
.hero-bg.hero-bg-v38 {
    background-image: url('assets/produkte-final/sleep-sense-boston.jpg') !important;
}

/* -- Terminseite: Überschrift und Ortsnamen lesbar ----------------------- */

/* Italiana gibt es nur in einem Schnitt, und der ist haarfein. Die übrige
   Website löst das seit jeher gleich: Versalien plus ein halber Pixel
   Konturstärke (siehe die grosse Sammelregel in style.css mit .hero-title,
   .store-city und den anderen). Die beiden Klassen hier sind neu und standen
   deshalb nicht in dieser Aufzählung - sie bekamen weder das eine noch das
   andere und blieben dünn.
   Etwas mehr Kontur als die 0,5 px der Sammelregel, weil auf dieser Seite
   nichts anderes zu lesen ist als genau diese Wörter. */
.termin-kopf-titel,
.termin-ort {
    text-transform: uppercase;
    font-weight: 500;
    -webkit-text-stroke: 0.9px currentColor;
    text-stroke: 0.9px currentColor;
    letter-spacing: 0.5px;
}
.termin-ort {
    font-size: 24px;
    -webkit-text-stroke-width: 0.8px;
}
@media (max-width: 600px) {
    .termin-ort { font-size: 22px; }
}

/* -- Sprachumschalter ----------------------------------------------------- */

/* Vier Kürzel nebeneinander, das aktive hervorgehoben. Bewusst klein und
   ruhig: Der Umschalter ist ein Werkzeug, keine Werbung. */
.sprachen {
    display: flex;
    align-items: center;
    gap: 2px;
}
.sprachen-knopf {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-decoration: none;
    padding: 6px 8px;
    opacity: 0.55;
    transition: opacity 0.3s;
}
.sprachen-knopf:hover {
    opacity: 1;
}
.sprachen-knopf.is-aktiv {
    opacity: 1;
    border-bottom: 1px solid currentColor;
}

/* Im Kopf: weiße Schrift über dem Kopfbild, rechts neben dem Terminknopf. */
.sprachen--kopf {
    margin-left: 22px;
}
.sprachen--kopf .sprachen-knopf {
    color: #fff;
}
@media (max-width: 1100px) {
    .sprachen--kopf { display: none; }
}

/* Im Mobilmenü: unter den beiden Knöpfen, mittig. Die Knöpfe stehen in einem
   Flex-Container in Spaltenrichtung, deshalb hier die eigene Zeile. */
.sprachen--mobil {
    justify-content: center;
    margin-top: 22px;
}
.sprachen--mobil .sprachen-knopf {
    color: #fff;
    font-size: 12px;
    padding: 8px 10px;
}

/* Im Fuß: dunkle Schrift auf hellem Grund, mittig unter der Navigation. */
.sprachen--fuss {
    justify-content: center;
    margin: 26px 0 4px;
}
.sprachen--fuss .sprachen-knopf {
    color: var(--text-dark, #111);
    font-size: 12px;
}

/* -- Zwischenüberschriften in den Rechtstexten --------------------------- */

/* Die AGB haben fünfzehn Paragraphen. Ohne Auszeichnung wären sie eine
   einzige Textwand. Gesetzt wie jede andere Überschrift der Website: Italiana,
   Versalien, eine halbe Kontur - Italiana gibt es nur haarfein, und ohne
   Kontur verschwindet sie gegen den Fließtext. */
.legal-headline {
    display: block;
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dark);
    -webkit-text-stroke: 0.7px currentColor;
    text-stroke: 0.7px currentColor;
    margin-bottom: 2px;
}
@media (max-width: 600px) {
    .legal-headline { font-size: 18px; }
}

/* .legal-company steht auf Impressum, Datenschutz, AGB und Garantie als
   Seitenüberschrift - und stand nicht in der Sammelregel von style.css, die
   allen anderen Titeln Versalien und Kontur gibt. In Italiana ohne beides
   verschwindet sie fast. */
.legal-company {
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    -webkit-text-stroke: 0.7px currentColor;
    text-stroke: 0.7px currentColor;
}

/* -- Vorspann unter dem Seitentitel -------------------------------------- */

/* Gesetzt wie .pianca-intro, weil diese Seite seit jeher richtig aussieht und
   die Übersichtsseiten sich daran anlehnen sollen. Eigene Klassen statt der
   Pianca-Klassen: Die gehören zu ihrem Block, und ein geteilter Name wäre die
   nächste Kollision. */
.seiten-intro {
    max-width: 760px;
    margin: 0 auto;
    padding: 74px 24px 0;
    text-align: center;
}
.seiten-intro-headline {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dark);
    -webkit-text-stroke: 0.6px currentColor;
    text-stroke: 0.6px currentColor;
    margin: 0 0 20px;
}
.seiten-intro-text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-muted);
    max-width: 680px;
    margin: 0 auto;
    text-wrap: pretty;
}
@media (max-width: 768px) {
    .seiten-intro { padding: 52px 22px 0; }
    .seiten-intro-text { font-size: 15px; }
}

/* Der Kopfbereich trägt jetzt nur noch den Titel. Ohne diese Zeilen bliebe
   das Polster stehen, das für drei Zeilen gedacht war. */
.hero-section-v3 .hero-content-v3,
.hero-section-v10 .hero-content-v3 {
    max-width: 900px;
}

/* -- Buchungsfenster auf der Filialseite --------------------------------- */

.termin-buchen {
    background: var(--bg-warm, #f7f5f2);
    padding: 84px 24px 90px;
    text-align: center;
    /* Damit der Anker nicht unter dem festen Kopf landet. */
    scroll-margin-top: 130px;
}
.termin-buchen-kopf {
    max-width: 640px;
    margin: 0 auto 42px;
}
.termin-buchen-eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 12px;
}
.termin-buchen-titel {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(24px, 2.6vw, 34px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dark);
    -webkit-text-stroke: 0.7px currentColor;
    text-stroke: 0.7px currentColor;
    margin: 0 0 14px;
}
.termin-buchen-text {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--text-body);
    margin: 0;
}
.termin-buchen-fenster + .termin-buchen-fenster {
    margin-top: 46px;
}
.termin-buchen-ort {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 14px;
}
/* Das Fenster bringt seine eigene Breite mit; hier nur der Rahmen, in dem es
   stehen darf. 760 px, weil der Kalender darunter seine Spalten umbricht. */
.termin-buchen-iframe {
    display: block;
    width: 100%;
    max-width: 760px;
    height: 700px;
    margin: 0 auto;
    border: 0;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}
@media (max-width: 768px) {
    .termin-buchen { padding: 56px 16px 62px; }
    .termin-buchen-iframe { height: 640px; }
}

/* -- Die Karte auf den Filialseiten -------------------------------------- */

.filialkarte {
    width: 100%;
    text-align: center;
}
.filialkarte svg {
    width: 100%;
    height: auto;
    display: block;
}
/* Die Nadelgruppe der Übersichtskarte steht im Stylesheet auf opacity: 0 und
   wird dort erst beim Hereinscrollen eingeblendet. Auf der Filialseite gibt es
   den Auslöser nicht - hier ist sie von Anfang an da. */
.filialkarte .map-pin-group,
.filialkarte #pinGroup {
    opacity: 1 !important;
    transform: none !important;
}
/* Alle Filialen blass, die eigene kräftig - so sieht man auf einen Blick, wo
   man ist und wie weit die nächste entfernt liegt. */
.filialkarte .map-pin .map-pin-dot {
    opacity: 0.28;
}
.filialkarte .map-pin .map-pin-ring {
    opacity: 0;
}
.filialkarte .map-pin--aktiv .map-pin-dot {
    opacity: 1;
}
.filialkarte .map-pin--aktiv .map-pin-ring {
    opacity: 0.35;
    fill: none;
    stroke: var(--text-dark);
    stroke-width: 1.2;
}
/* Der Name steht in der Karte, an der Nadel. Schriftgrad in SVG-Einheiten:
   Die Karte ist 800 breit und wird auf rund 500 px skaliert, 15 Einheiten
   ergeben also etwa 9 px auf dem Schirm - klein, aber lesbar, und sie wächst
   mit der Karte mit. */
.filialkarte-name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-style: italic;
    fill: var(--text-dark);
}

/* -- Tooltip an den Nadeln der Filialübersicht --------------------------- */

/* Das Fenster stand im Markup und wurde nie geöffnet; jetzt öffnet es
   zusatz.js. Die Grundregeln dafür stehen schon in style.css
   (.map-tooltip.active.active-v5) - hier nur, was dort fehlt: die Verankerung
   am Zeiger und der Abstand zur Nadel. */
/* pointer-events: none ist hier keine Feinheit, sondern Bedingung: Das Fenster
   erscheint direkt über der Nadel. Fängt es den Zeiger ab, verlässt der Zeiger
   die Nadel, das Fenster schliesst, der Zeiger ist wieder auf der Nadel - und
   es flackert, solange man hinsieht. Das !important, weil style.css die
   Grundregel für .map-tooltip mitbringt. */
.map-tooltip {
    pointer-events: none !important;
    transform: translate(-50%, calc(-100% - 14px));
}
.map-tooltip-city {
    font-family: var(--font-heading);
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    -webkit-text-stroke: 0.5px currentColor;
    margin: 0 0 6px;
}
.map-tooltip-address,
.map-tooltip-phone,
.map-tooltip-hours {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.78;
}
.map-pin[data-url] {
    cursor: pointer;
}

/* -- Kopfbild der Kontaktseite ------------------------------------------- */

/* Drei Motive hat diese Seite gehabt, und der Weg dahin ist die Begründung
   für das vierte:

   1. kkh-naples.jpg, ein leeres Hotelzimmer - auf einer Kontaktseite ohne
      jeden Bezug.
   2. Eine Beratungsszene mit zwei Personen, aus dem echten Filialfoto
      probeliegen.jpg auf 16:9 erweitert. Sie hielt der Nahsicht stand, aber
      jeder weitere Lauf tauschte die Personen aus - eine Szene mit Gesichtern
      lässt sich nicht nachbessern, nur neu würfeln.
   3. Zwei Anläufe mit einem echten Bett in der Ecke. Erkennbar dasselbe
      Produkt, aber nicht deckungsgleich mit dem Produktrender - und bei einem
      Bett, das der Kunde verkauft, fällt genau das auf.

   Jetzt: die Materialauswahl selbst. Stoffmuster, Lederproben,
   Furnierplättchen, Kaschmirdecke, Messingleuchten. Kein Gesicht, das man
   erfinden müsste, kein Produkt, das exakt stimmen muss - und trotzdem genau
   das, was am Anfang eines Gesprächs auf dem Tisch liegt. Dasselbe Motiv trägt
   weiter unten das Band „Rufen Sie uns an", aus näherer Sicht.

   hero-bg-v30 trägt nur diese eine Seite - nachgesehen über alle 86 Adressen.

   image-set liefert WebP (105 kB) und hält JPG (324 kB) für alles bereit, was
   damit nichts anfangen kann. */
.hero-bg.hero-bg-v30 {
    background-image: url('assets/kontakt/kontakt-hero-stoffe.jpg') !important;
    background-image: -webkit-image-set(
        url('assets/kontakt/kontakt-hero-stoffe.webp') type('image/webp'),
        url('assets/kontakt/kontakt-hero-stoffe.jpg') type('image/jpeg')) !important;
    background-image: image-set(
        url('assets/kontakt/kontakt-hero-stoffe.webp') type('image/webp'),
        url('assets/kontakt/kontakt-hero-stoffe.jpg') type('image/jpeg')) !important;
}

/* Der Ausschnitt gehört jetzt HÖHER, nicht tiefer - das Motiv ist ein anderes.
   Beim Vorgänger sassen die Personen im mittleren Band und mussten sichtbar
   bleiben; hier liegen die Muster im unteren Drittel, und darauf gehört keine
   Überschrift. Bei 38 % steht der Titel auf der ruhigen Putzwand, und die
   Musterauswahl bleibt am unteren Rand.
   ACHTUNG AUF DEN SELEKTOR. Zwei Klassen genügen hier nicht - gegen
   .hero-section:has(.hero-subtitle-main) .hero-bg steht eine Regel mit DREI
   Klassen, denn das Argument von :has() zählt mit. Beide tragen !important,
   also entscheidet die Spezifität, und die kürzere verliert lautlos: Die Regel
   steht da, sie ist richtig geschrieben, und der Ausschnitt bleibt mittig. */
.hero-section:has(.hero-subtitle-main) .hero-bg.hero-bg-v30,
html body .hero-section .hero-bg.hero-bg-v30 {
    background-position: center 78% !important;
}

/* DIE KOPFHÖHE BLEIBT. Ein Versuch, sie hier auf 56,25 vw zu setzen - genau
   16:9, dann wäre das Bild vollständig zu sehen - war der falsche Weg: Der
   Site Title ist auf allen 87 Seiten gleich hoch, und eine Seite, die aus der
   Reihe tanzt, fällt beim Durchklicken sofort auf. Was zu wenig Platz hat,
   wird verschoben, nicht vergrößert.

   Bei 1440 px sind 700 px Kopf und 810 px Bild, es fehlen also 110 px. Bei
   78 % liegen davon 86 px oben in der leeren Wand und nur 24 px unten - die
   Tischkante mit dem Messingtablett bleibt im Bild. Bei 38 % waren es
   umgekehrt 42 oben und 68 unten, und damit war die Musterauswahl
   angeschnitten. */
@media (max-width: 768px) {
    /* Hochkant zeigt von einem 16:9-Bild nur gut ein Drittel der Breite: Das
       Bild wird auf die Höhe skaliert und ist dann fast dreimal so breit wie
       das Fenster. Die senkrechte Angabe wirkt deshalb kaum, die waagerechte
       entscheidet alles. Bei 42 % steht der Musterfächer im Bild und die
       Stehleuchte am linken Rand - die Leuchte rechts fiele sonst mitten in
       den Titel. */
    .hero-section:has(.hero-subtitle-main) .hero-bg.hero-bg-v30,
    html body .hero-section .hero-bg.hero-bg-v30 {
        background-position: 42% center !important;
    }
}

/* -- Werbeabschnitte: lange Wörter --------------------------------------- */

/* WOGEGEN DAS GEBAUT IST: .sale-promo-content hat max-width: 720px und 30 px
   Polster - aber keine Obergrenze am Fenster. Auf 390 px Breite stand
   „SOFORTLIEFERPROGRAMM" mit 506 px im Bild und wurde auf BEIDEN Seiten
   abgeschnitten: „…FORTLIEFERPROGRAM…". Es stand dabei genau mittig - man sah
   nur weder Anfang noch Ende, und das sieht aus wie verrutscht.
   Auch der Fließtext lief über; die Zeilen brachen erst hinter dem Rand.

   Drei Dinge: die Breite am Fenster kappen, das Wort brechen dürfen, und die
   Schrift auf schmalen Geräten so weit zurücknehmen, dass ein Bruch überhaupt
   an der Fuge landet. Die Trennung nach Silben macht der Browser selbst -
   <html lang="de-DE"> steht, damit greift das deutsche Trennmuster
   („SOFORTLIEFER-PROGRAMM" statt „SOFORTLIEFERPROG-RAMM"). */
.sale-promo-content {
    max-width: min(720px, 100%);
    box-sizing: border-box;
}
.sale-promo-title,
.sale-promo-text,
.sale-promo-eyebrow {
    max-width: 100%;
    overflow-wrap: break-word;
}
/* Trennung NUR auf schmalen Geraeten. Auf 1440 px passt „SOFORTLIEFERPROGRAMM"
   mit 660 px in die 660 px des Kastens - genau auf Kante. Mit erlaubter
   Trennung zieht der Browser dann trotzdem eine zweite Zeile vor, und der
   Titel bricht, wo er nicht brechen muss. */
@media (max-width: 600px) {
    .sale-promo-content { padding: 58px 20px; }
    .sale-promo-title {
        font-size: clamp(26px, 8vw, 38px);
        letter-spacing: 1.5px;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    .sale-promo-text { font-size: 15px; }
}

/* Etwas mehr Raum auf grossen Schirmen, damit die erste Zeile nicht bis an den
   Rand laeuft. Eine Zeile wird daraus nicht: „SOFORTLIEFERPROGRAMM" braucht bei
   74 px 928 Pixel. (Die 660 px, die eine erste Messung ergab, waren die Breite
   des ZUGESCHNITTENEN Elements, nicht die des Textes - ein Umstand, der die
   Ursache genau verdeckt.) */
@media (min-width: 1100px) {
    .sale-promo-content {
        max-width: min(800px, 100%);
    }
}

/* -- Das Band auf der Kontaktseite --------------------------------------- */

/* Oben abdunkeln, unten aufhellen. Die Grundüberlagerung (0,5 → 0,35 → 0,62)
   ist zur Mitte hin am hellsten — genau dort steht hier die Überschrift, und
   genau dort ist das Motiv am dunkelsten ohnehin. Unten liegen die Stoff- und
   Lederproben; die sind das Motiv und dürfen nicht weggedunkelt werden. */
.sale-promo--kontakt .sale-promo-overlay {
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.55),
        rgba(0, 0, 0, 0.46) 45%,
        rgba(0, 0, 0, 0.30));
}
/* Der Ausschnitt weiter oben: Unten liegen die Stoffmuster, und darauf gehört
   keine Überschrift. Bei 34 % zeigt das Band die dunkle Wand mit der Leuchte,
   die Musterfächer bleiben in der unteren Bildhälfte sichtbar. */
.sale-promo--kontakt .sale-promo-bg {
    background-position: center 34%;
}
.sale-promo--kontakt .sale-promo-bg img {
    object-position: center 34%;
}
/* Am Telefon ist der Ausschnitt hochkant: `cover` füllt die Höhe, und von der
   Breite bleiben 44 % übrig. In der Mitte liegt nur die Musterkladde — der
   Fächer, um den es geht, steht links. Deshalb nach links rücken. Senkrecht
   ändert sich hier nichts: Bei höhenfüllendem `cover` wirkt nur der waagerechte
   Wert (dieselbe Falle wie beim Kopfbild der Kontaktseite). */
@media (max-width: 768px) {
    .sale-promo--kontakt .sale-promo-bg {
        background-position: 26% center;
    }
    .sale-promo--kontakt .sale-promo-bg img {
        object-position: 26% center;
    }
}

/* -- Kopfbild der Wissensseite ------------------------------------------- */

/* Vorher: kk-stripe-os.jpg, ein Bettenrender. Auf einer Seite, die erklärt,
   wie ein Boxspringbett gebaut ist, zeigt ein fertiges Bett genau das Falsche
   - man sieht das Ergebnis und nicht das Wissen.

   Jetzt liegt der Aufbau auf dem Tisch, in einer Bibliothek: ein
   aufgeschnittener Taschenfederkern, der Schichtaufbau aus Inlett, Wollvlies,
   Latex und Rosshaar, dazu ein aufgeschlagenes Buch, Lesebrille, Messschieber
   und Zollstock.

   Der erste Anlauf zeigte dieselben Gegenstände in derselben Ecke wie das
   Kopfbild der Kontaktseite - gleiche Kamera, gleiche Leuchten, gleiche Wand.
   Das war als Klammer gedacht und war zu eng: Zwei Seiten mit demselben Raum
   lesen sich nicht wie ein Haus, sondern wie ein einziges Foto, das zweimal
   verwendet wurde. Jetzt ist es eine andere Ecke desselben Hauses - grün
   lackierte Wandtäfelung, dunkle Eichenregale, schwarze Marmorplatte,
   Messing-Bilderleuchte. Gleiche Welt, gleiches Licht, anderer Raum.

   Das Vorgängermotiv liegt unter paket/archiv/wissen-hero-anatomie.* auf
   theoneagency.de, samt der ungerechneten Fassung.

   Kein lesbarer Text im Bild, auch nicht auf den Buchseiten - eine erfundene
   Schrift in einem Foto fällt sofort auf und ist nicht zu übersetzen.

   hero-bg-v28 trägt nur diese eine Seite - nachgesehen über alle 87 Adressen.
   image-set liefert WebP (109 kB) und hält JPG (329 kB) bereit. */
.hero-bg.hero-bg-v28 {
    background-image: url('assets/wissen/wissen-hero-bibliothek.jpg') !important;
    background-image: -webkit-image-set(
        url('assets/wissen/wissen-hero-bibliothek.webp') type('image/webp'),
        url('assets/wissen/wissen-hero-bibliothek.jpg') type('image/jpeg')) !important;
    background-image: image-set(
        url('assets/wissen/wissen-hero-bibliothek.webp') type('image/webp'),
        url('assets/wissen/wissen-hero-bibliothek.jpg') type('image/jpeg')) !important;
}

/* Hier 20 %, NICHT 78 % wie auf der Kontaktseite - der umgekehrte Wert, weil
   das Motiv ein umgekehrtes ist. Dort liegt die Musterauswahl ganz unten und
   der Ausschnitt musste nach unten; hier steht der Federkern höher, und bei
   78 % landete die Unterzeile mitten auf ihm. Gerechnet: Sichtbar sind
   700/810 = 86,4 % der Bildhöhe, die Unterzeile sitzt bei 60 % des Kopfes,
   also bei p × 13,6 % + 51,8 % des Bildes. Bei 20 % sind das 54,5 % - noch
   auf der leeren grünen Wand, denn der Federkern beginnt erst bei 58 %.
   Zur Spezifität siehe den Block zur Kontaktseite: :has() zählt sein
   Argument mit. */
.hero-section:has(.hero-subtitle-main) .hero-bg.hero-bg-v28,
html body .hero-section .hero-bg.hero-bg-v28 {
    /* NACHTRAG: von 20 % auf 5 %. Bei 20 % stand die Überschrift dem
       Federkern zu nah. Weiter nach oben heisst: die Werkstücke rutschen
       im Bild nach unten, über der Schrift liegt mehr ruhige Wand. Unten
       fehlt dafür ein Stück vom aufgeschlagenen Buch - das ist der Tausch. */
    background-position: center 5% !important;
}
@media (max-width: 768px) {
    /* Hochkant bleibt von 16:9 nur gut ein Drittel der Breite: sichtbar ist ein
       Fenster von 37 %, und bei 40 % lag dessen linke Kante bei 25 % - der
       Federkern (15-28 %) war damit angeschnitten. Bei 30 % beginnt das
       Fenster bei 19 %, Federkern und Schichtaufbau stehen beide darin.
       Mittig wäre nur das Buch zu sehen, und ein Buch allein erzählt nichts
       über ein Bett. */
    .hero-section:has(.hero-subtitle-main) .hero-bg.hero-bg-v28,
    html body .hero-section .hero-bg.hero-bg-v28 {
        background-position: 30% center !important;
    }
}

/* -- Kopfbild der Accessoires-Übersicht ---------------------------------- */

/* Vorher: kk-atlantis.jpg, wieder ein Bettenrender - auf der einen Seite, auf
   der es ausdrücklich NICHT um das Bett geht, sondern um das, was darum herum
   steht.

   Jetzt stehen die vier Marken der Seite in einem Bild: die Zickzackkissen und
   die Fransendecke von Missoni Home, die Alabastersäulenleuchte von Eichholtz,
   das griffleiste Nussbaum-Sideboard von Pianca und die skulpturale
   Nickelleuchte aus dem Leuchtenprogramm. Vorlage waren die vier
   Kopfbilder der Unterseiten (assets/{missoni,eichholz,pianca,lampen}/
   hero-mood.jpg), als Kontaktbogen an den Workflow gegeben.

   ACHTUNG AUF DEN AUFHÄNGER. hero-section-v3 tragen DREI Seiten -
   Accessoires, Luxus-Matratzen und die Produktübersicht. Eine Regel auf die
   Klasse allein hätte allen dreien dasselbe Bild gegeben, und aufgefallen wäre
   es erst beim Durchklicken. Deshalb body.seite-produkte-accessoires: Die
   Kennung kommt aus dem PFAD DER DEUTSCHEN FASSUNG und steht deshalb auch auf
   /en/our-products/accessories/ - siehe cocoon_seiten_body_klasse(). */
body.seite-produkte-accessoires .hero-section.hero-section-v3 {
    background-image: url('assets/accessoires/accessoires-hero.jpg') !important;
    background-image: -webkit-image-set(
        url('assets/accessoires/accessoires-hero.webp') type('image/webp'),
        url('assets/accessoires/accessoires-hero.jpg') type('image/jpeg')) !important;
    background-image: image-set(
        url('assets/accessoires/accessoires-hero.webp') type('image/webp'),
        url('assets/accessoires/accessoires-hero.jpg') type('image/jpeg')) !important;
    /* 55 %, nicht 15 %: Bei 15 % stand über der Überschrift eine grosse leere
       Wand, während unten die Sideboardfront angeschnitten war. Gerechnet:
       sichtbar sind 700/810 = 86,4 % der Bildhöhe, die Überschrift sitzt bei
       50 % des Kopfes, also bei p × 13,6 % + 43,2 %. Bei 55 % sind das 50,7 %,
       und die Kissen beginnen erst bei 55 % — die Schrift bleibt auf der
       freien Wand, unten fehlen nur noch 6 statt 14 Prozent. */
    background-position: center 55% !important;
}
@media (max-width: 768px) {
    /* Hochkant bleibt gut ein Drittel der Breite sichtbar (37 %), und die
       beiden Leuchten stehen ganz aussen - bei 62 % fiel keine von beiden ins
       Bild, zu sehen waren Schale und Bücher. Bei 72 % reicht das Fenster von
       45 auf 82 %: die Kissen am linken Rand, die Ringleuchte 032 M am
       rechten, und dazwischen die freie Wand, auf der die Überschrift steht. */
    body.seite-produkte-accessoires .hero-section.hero-section-v3 {
        background-position: 72% center !important;
    }
}

/* -- Kopfbild der Matratzen-Übersicht ------------------------------------ */

/* Vorher: kk-atlantis.jpg — dasselbe Bettenrender wie auf der Accessoires-
   Übersicht und der Produktübersicht. Drei Seiten, ein Bild, weil alle drei
   hero-section-v3 tragen.

   Die fünf Marken der Seite — Sleep Sense, King Koil, Avebury, Bestspring,
   Staples — haben eines gemeinsam: handgetuftete Taschenfederkernmatratzen.
   Deshalb die Werkbank einer Matratzenmanufaktur: Ballen Inlettstoff in
   Damast, Streifen und Fischgrät, ein Stapel handgesteppter Bahnen, ein
   Messingtablett mit bezogenen Heftknöpfen, Heftnadel und Wachsgarn, ein
   Strang Schurwolle und Rosshaar, die Lederschürze über der Kante.

   Vierter Raum in der Reihe, und das ist Absicht: Kontakt hat Putz und
   Vorhang, Wissenswertes grüne Täfelung und Eichenregale, Accessoires Lehm
   und Bogen — hier anthrazitfarbener Kalkputz und Eiche. Gleiches Licht,
   gleiche Bildsprache, jedes Mal ein anderer Ort.

   AUFHÄNGER wie bei Accessoires: body.seite-produkte-luxus-matratzen, aus dem
   Pfad der deutschen Fassung — siehe cocoon_seiten_body_klasse(). Auf die
   Klasse hero-section-v3 allein zu zielen hieße, auch Accessoires und die
   Produktübersicht zu treffen. */
body.seite-produkte-luxus-matratzen .hero-section.hero-section-v3 {
    background-image: url('assets/matratzen/matratzen-hero.jpg') !important;
    background-image: -webkit-image-set(
        url('assets/matratzen/matratzen-hero.webp') type('image/webp'),
        url('assets/matratzen/matratzen-hero.jpg') type('image/jpeg')) !important;
    background-image: image-set(
        url('assets/matratzen/matratzen-hero.webp') type('image/webp'),
        url('assets/matratzen/matratzen-hero.jpg') type('image/jpeg')) !important;
    /* 60 %, nicht 15 %: Bei 15 % stand über der Überschrift eine grosse leere
       Wand, während unten die Werkbank angeschnitten war — Lederschürze und
       Bankkante fielen weg. Gerechnet: sichtbar sind 700/810 = 86,4 % der
       Bildhöhe, die Überschrift sitzt bei 50 % des Kopfes, also bei
       p × 13,6 % + 43,2 %. Bei 60 % sind das 51,4 %, und die Inlettballen
       beginnen erst bei 57 % — die Schrift bleibt also auf der freien Wand,
       und vom Bild fehlen unten nur noch 5 statt 14 Prozent. */
    background-position: center 60% !important;
}
@media (max-width: 768px) {
    /* Hochkant sind 37 % der Breite sichtbar. Bei 45 % steht der Stapel
       gesteppter Bahnen mit dem Knopftablett im Bild und links noch ein Ballen
       Inlett — die Überschrift liegt dabei auf der freien Wand darüber. */
    body.seite-produkte-luxus-matratzen .hero-section.hero-section-v3 {
        background-position: 45% center !important;
    }
}

/* -- Kopfbild der Serviceseite ------------------------------------------- */

/* Vorher: kkh-madison.jpg, ein King-Koil-Hotel-Bettenrender. Auf einer Seite
   über Beratung, Probeliegen und Lieferung sagt ein fertiges Bett nichts —
   und dasselbe Bild stand schon auf der Testinstallation dort, es ist also
   kein Umzugsschaden, sondern ein nie ersetztes Motiv.

   Jetzt: die Auslieferungsecke am Abend vor der Zustellung. Eine Matratze
   flach auf der Werkbank, in weiße Schutzbaumwolle eingeschlagen, daneben
   weiße Lieferhandschuhe, eine gefaltete Wolldecke, Filzgleiter, ein
   aufgerolltes Lederwerkzeug, ein Messingbandmaß und ein umgedrehtes
   Klemmbrett. Fünfter Raum der Reihe — Kontakt hat Putz und Vorhang,
   Wissenswertes grüne Täfelung, Accessoires Lehm und Bogen, Matratzen die
   Manufakturwerkbank; hier dieselbe Werkstatt, einen Arbeitsschritt später.

   AUFHÄNGER: body.seite-service statt hero-bg-v29. Welche Seiten diese
   Hero-Variante sonst noch tragen, weiß ich nicht — und es nachzusehen hieße,
   87 Adressen abzurufen, was diesem Server gerade nicht guttut. Die Kennung
   aus dem deutschen Pfad trifft genau eine Seite, in allen vier Sprachen.
   Siehe cocoon_seiten_body_klasse(). */
body.seite-service .hero-bg.hero-bg-v29 {
    background-image: url('assets/service/service-hero-lieferung.jpg') !important;
    background-image: -webkit-image-set(
        url('assets/service/service-hero-lieferung.webp') type('image/webp'),
        url('assets/service/service-hero-lieferung.jpg') type('image/jpeg')) !important;
    background-image: image-set(
        url('assets/service/service-hero-lieferung.webp') type('image/webp'),
        url('assets/service/service-hero-lieferung.jpg') type('image/jpeg')) !important;
    /* Ganz nach oben. Bei 10 % lag die Unterzeile auf 53 % der Bildhöhe und
       damit dicht über der eingeschlagenen Matratze (ab 57 %). Bei 0 % zeigt
       der Kopf den obersten Streifen des Bildes: Die Werkstücke rutschen nach
       unten, über der Schrift steht nur noch Wand. Unten fehlt dafür die
       Vorderkante der Werkbank — bei fester Kopfhöhe ist das der Tausch. */
    background-position: center top !important;
}
@media (max-width: 768px) {
    /* Hochkant sind 37 % der Breite sichtbar. Bei 40 % steht die eingeschlagene
       Matratze im Bild, rechts noch die Handschuhe; ganz rechts läge nur
       Werkzeug, und Werkzeug allein erzählt nichts von einer Lieferung. */
    body.seite-service .hero-bg.hero-bg-v29 {
        background-position: 40% center !important;
    }
}