/* === base/variables.css === */
/* Design Tokens – from Kadence Theme Export */
:root {
    --global-palette1: #202732;
    --global-palette2: #aa8d70;
    --global-palette3: #ccab86;
    --global-palette4: #000000;
    --global-palette5: #cccccc;
    --global-palette6: #eeeeee;
    --global-palette7: #EDF2F7;
    --global-palette8: #F7FAFC;
    --global-palette9: #ffffff;

    --color-gold: var(--global-palette2);
    --color-gold-light: var(--global-palette3);
    --color-gold-hover: #96795e;
    --color-red: #630303;
    --color-text: var(--global-palette4);
    --color-heading: var(--global-palette1);
    --color-text-light: #666;
    --color-text-muted: var(--global-palette5);
    --color-bg: var(--global-palette9);
    --color-bg-light: #f2f2f2;
    --color-bg-dark: var(--global-palette1);
    --color-border: var(--global-palette6);
    --color-white: #fff;
    --color-black: #000;
    --color-whatsapp: #25d366;

    --font-heading: 'Roboto Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

    /*
     * Ueberschriftengroessen.
     *
     * Dieselben Werte standen vorher als Zahl in neun Bausteinen. Eine
     * Mobilregel haette deshalb neun Stellen gebraucht und beim naechsten neuen
     * Abschnitt wieder eine zehnte — und genau das ist passiert: auf dem Handy
     * standen Abschnittsueberschriften in voller Desktopgroesse.
     *
     * Jetzt steht die Groesse einmal hier und wird unten im Medienblock einmal
     * zurueckgenommen. Ein neuer Abschnitt, der die Variable nutzt, ist damit
     * von sich aus richtig.
     */
    --schrift-abschnitt: 50.4px;   /* h2 einer Sektion */
    --schrift-untertitel: 36px;    /* h2/h3 im Fliesstext */

    --container-width: 1200px;
    --container-padding: 50px;
    --container-padding-mobile: 20px;
    --header-height: 100px;

    /* Hakensymbol als Maske. Siehe components/contact-form.css: als Zeichen
       geschrieben zieht iOS die Emoji-Schrift heran und ignoriert die Farbe. */
    --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.3 18.2 2.6 11.5l2.5-2.5 4.2 4.2L18.9 4l2.5 2.5z'/%3E%3C/svg%3E");
    /* Heller Pfeil fuer den grauen Kreis in der mobilen Kategorieliste. */
    --pfeil-rechts-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 2l8 8-8 8'/%3E%3C/svg%3E");
    --pfeil-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 2l8 8-8 8'/%3E%3C/svg%3E");
}

/*
 * Auf dem Handy sind 50 Pixel eine halbe Bildschirmbreite pro Wort. Die
 * Groessen werden hier einmal zurueckgenommen; jeder Baustein, der die
 * Variablen benutzt, folgt automatisch.
 */
@media (max-width: 768px) {
    :root {
        --schrift-abschnitt: 28.8px;
        --schrift-untertitel: 26px;
    }
}
@media (max-width: 480px) {
    :root {
        --schrift-abschnitt: 28.8px;
        --schrift-untertitel: 22px;
    }
}


/* === base/reset.css === */
/* Reset & Base Elements */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/*
 * scroll-padding gilt auch fuer das Scrollen, das der Browser selbst macht:
 * beim Sprung auf einen Anker und beim Wechsel ins naechste Eingabefeld mit
 * den Pfeilen der Telefontastatur. Ohne diesen Abstand schiebt er das Feld
 * genau bis an die Kante — unter der fixierten Kopfzeile heisst das
 * angeschnitten.
 */
html {
    font-size: 18px;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 16px);
    scroll-padding-bottom: 24px;
}

/*
 * Waagerechter Bildlauf: verhindern, nicht scrollen lassen.
 *
 * Abschnitte, die ueber den Satzspiegel hinaus die ganze Seitenbreite
 * einnehmen, arbeiten mit width: 100vw — siehe layouts/sell-property.css. Das
 * Mass schliesst die senkrechte Bildlaufleiste ein, die Seite wird dadurch um
 * deren Breite breiter als das Fenster und laesst sich seitwaerts schieben.
 * Derselbe Fehler steckte einmal in der Trennlinie ueber dem Kontaktbereich,
 * siehe den Hinweis in components/contact-form.css.
 *
 * clip statt hidden: hidden macht den Rumpf zum Bildlaufbehaelter und nimmt
 * position: sticky darin die Wirkung. clip schneidet nur ab. Fuer Browser ohne
 * clip steht hidden davor; die Kopfzeile ist fixiert, nicht sticky, also
 * schadet es dort nicht.
 */
body {
    overflow-x: hidden;
    overflow-x: clip;
}
body {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    height: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-gold-light); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-gold); }
p { margin-bottom: 1em; }

.skip-link {
    position: absolute; top: -100%; left: 0;
    background: var(--color-gold); color: white; padding: 8px 16px; z-index: 1000;
}
.skip-link:focus { top: 0; }


/* === base/typography.css === */
/* Typography – Headings */
h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    line-height: 1.2;
    font-weight: 300;
}
h1 { font-size: 3.6em; text-transform: uppercase; font-weight: 300; line-height: 1.1; color: var(--color-heading); }
h2 { font-size: 2.8em; font-weight: 300; line-height: 1.2; color: var(--color-heading); margin-bottom: 0.5em; }
h3 { font-size: 1.8em; font-weight: 300; line-height: 1.3; color: var(--color-heading); }
h4 { font-size: 1.2em; font-weight: 400; line-height: 1.4; color: var(--color-text); }
h5 { font-size: 1.1em; text-transform: uppercase; font-weight: 400; line-height: 1.6; color: var(--color-text); }
h6 { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--color-text-muted); }


/* === layouts/containers.css === */
/* Container */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}


/* === components/header.css === */
/* Site Header */
/*
 * Die Kopfzeile steht dauerhaft, sie wandert nicht.
 *
 * Vorher war sie oben "absolute" und wurde beim Scrollen auf "fixed"
 * umgeschaltet: sie scrollte also erst weg und klappte dann wieder herein.
 * Das sah nach Sprung aus und war zugleich die Quelle des Ruckelns — der
 * Wechsel der Positionierung zwingt den Browser mitten im Scrollen zu einer
 * neuen Layoutrechnung.
 *
 * Jetzt bleibt sie stehen, und es aendert sich nur eine Deckfarbe: der
 * Verlauf ist der Grund des Elements, die deckende Flaeche liegt als ::before
 * darueber und wird ein- und ausgeblendet. Eine Aenderung an opacity macht
 * der Browser im Kompositor — ohne Layout, ohne Neuzeichnen.
 */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: linear-gradient(rgb(0, 0, 0) 1%, rgba(32, 39, 50, 0) 100%);
    height: var(--header-height);
}
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.site-header.is-scrolled::before { opacity: 1; }

.site-header__container { padding: 0 var(--container-padding); height: 100%; }
.site-header__grid {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; height: 100%;
}
.site-header__left { display: flex; align-items: center; }
.site-header__center { display: flex; justify-content: center; }
.site-header__right { display: flex; justify-content: flex-end; align-items: center; }
/*
 * Hoehe nicht festnageln. Der Reset erlaubt jedem Bild "max-width: 100%", die
 * Breite darf also schrumpfen - eine feste Hoehe daneben zieht das Logo dann
 * in die Breite zusammen. Mobil bekommt die Logo-Spalte nur die halbe
 * Kopfzeile, und genau dort war es gequetscht.
 *
 * Mit "height: auto" schrumpft die Hoehe mit. Das Seitenverhaeltnis steht
 * ueber width und height am <img>, der Platz wird also trotzdem vorab
 * reserviert und nichts springt beim Laden.
 */
.site-logo img { width: 250px; max-width: 100%; height: auto; display: block; }
/*
 * Die Menuepunkte fuellen die Kopfzeile ueber die Hoehe, nicht ueber die
 * Zeilenhoehe. Mit "line-height: var(--header-height)" blieben sie 100 Pixel
 * hoch, auch wenn die Kopfzeile beim Scrollen auf 80 schrumpft — die Zeile
 * ragte dann unten heraus, und alles andere zentrierte sich auf der falschen
 * Hoehe. Sichtbar war das am Logo, das zu tief sass.
 */
.site-header__center, .nav-primary, .nav-primary__list { height: 100%; }
.nav-primary__list { list-style: none; display: flex; align-items: stretch; }
.nav-primary__item { display: flex; }
.nav-primary__item > a {
    color: var(--global-palette9); font-family: var(--font-body);
    font-weight: 500; font-size: 15.2px; text-transform: uppercase;
    padding: 0 19px; line-height: 1;
    display: flex; align-items: center;
    transition: color 0.2s; white-space: nowrap;
}
.nav-primary__item > a:hover { color: var(--color-gold-light); }


/* === components/mega-menu.css === */
/* Mega Menu */
.nav-primary__item--mega { position: static; }
.mega-menu {
    /* An der Unterkante der Kopfzeile, nicht an einer festen Zahl: beim
       Scrollen ist sie 80 statt 100 Pixel hoch. */
    display: none; position: absolute; top: 100%;
    left: 50%; transform: translateX(-50%); width: 1200px;
    background: var(--color-white); box-shadow: rgba(0,0,0,0.1) 0px 2px 13px 0px;
    /* Gleichmaessig 50px ringsum. Der Abstand zwischen den Spalten kommt
       aus gap, nicht aus Innenabstand der Spalten — sonst addierte sich
       deren linker und rechter Abstand auf den Rand der Box und das
       Ergebnis waere aussen breiter als oben und unten. */
    padding: 50px; z-index: 200; gap: 60px;
}
.nav-primary__item--mega:hover .mega-menu { display: flex; }
.mega-menu__col { flex: 1; display: flex; flex-direction: column; }
.mega-menu__heading {
    font-family: var(--font-body); font-size: 18px; font-weight: 400;
    color: var(--color-gold); border-bottom: 1px solid var(--color-gold);
    padding-bottom: 4px; margin-bottom: 10px;
}
/*
 * Die Punkte stehen kleiner als die Spaltenueberschrift und sind durch eine
 * feine Linie getrennt. Die Linie steht unter jedem Punkt ausser dem letzten:
 * sie trennt, statt die Liste unten abzuschliessen.
 */
.mega-menu__col > a {
    color: var(--color-text); font-family: var(--font-body);
    font-weight: 300; font-size: 14.4px; line-height: 1.5;
    padding: 8px 0; display: block; text-transform: none;
    border-bottom: 1px solid var(--color-border);
}
.mega-menu__col > a:last-of-type { border-bottom: 0; }
.mega-menu__col a:hover { color: var(--color-gold); }

/*
 * "All New Developments" schliesst die Spalte ab und traegt deshalb mehr
 * Gewicht als die Punkte darueber. align-items:center allein richtet den Pfeil
 * nicht mittig aus, solange der Text eine Zeilenhoehe mitbringt, die hoeher
 * ist als seine Schrift — beide bekommen deshalb dieselbe Zeilenhoehe, und
 * das SVG steht als Block, damit es keine Grundlinie mehr gibt, an der es
 * haengt.
 */
.mega-menu__all-link-wrap {
    display: flex; align-items: center; gap: 8px; padding-top: 39px;
}
/*
 * :not() haelt den Pfeil aus der Textregel heraus. Ohne das greift sie auch
 * auf ihn — zwei Klassen und ein Element sind spezifischer als die eine Klasse
 * des Pfeils — und faerbt ihn in die Textfarbe statt in Beige.
 */
.mega-menu__all-link-wrap a:not(.mega-menu__arrow-link) {
    font-size: 20px; font-weight: 400; line-height: 1;
    color: var(--color-text); padding: 0; border-bottom: 0;
}
.mega-menu__all-link-wrap a:not(.mega-menu__arrow-link):hover { color: var(--color-gold); }
.mega-menu__arrow-link {
    display: flex; align-items: center; line-height: 1;
    /* Dasselbe Beige wie die Spaltenueberschriften. */
    color: var(--color-gold);
}
.mega-menu__arrow-link svg { width: 22px; height: 22px; display: block; }
.nav-primary__item--mega > a::after {
    content: ''; display: inline-block; width: 6px; height: 6px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); margin-left: 6px; vertical-align: 2px;
}


/* === components/lang-switcher.css === */
/* Language Switcher + Mobile Menu Toggle */
.nav-lang { display: flex; align-items: center; }
.lang-switcher {
    appearance: none; -webkit-appearance: none;
    width: 173px; height: 32px;
    background: linear-gradient(#efefef 0%, #fff 70%);
    border: none; border-radius: 0; color: #666;
    font-family: Arial, sans-serif; font-size: 16px; font-weight: 300;
    padding: 3px 28px 3px 8px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"), linear-gradient(#efefef 0%, #fff 70%);
    background-repeat: no-repeat, no-repeat;
    background-position: right 10px center, 0 0;
    background-size: 12px 7px, 100% 100%;
}
.lang-switcher option { color: var(--color-text); background: var(--color-bg); }
.mobile-menu-toggle {
    display: none; background: none; border: none; cursor: pointer;
    flex-direction: column; gap: 5px; padding: 8px;
}
.mobile-menu-toggle span {
    display: block; width: 24px; height: 2px;
    background: var(--color-text); transition: 0.3s;
}


/* === components/hero.css === */
/*
 * Hero: Titelbild mit Textband darueber.
 *
 * Startseite, Listenseiten und Projektseiten bauen denselben Bereich. Er stand
 * dreimal getrennt im Stylesheet — und die Werte sind auseinandergelaufen: die
 * Startseite war auf dem Handy ein Drittel groesser als der Rest, ohne dass das
 * je jemand so wollte. "Den Hero kleiner machen" war damit kein Eingriff,
 * sondern drei, und einer wurde vergessen.
 *
 * Jetzt steht der Aufbau einmal hier. Was sich je Seitentyp wirklich
 * unterscheidet, steht als Wert am Rahmen und sonst nirgends:
 *
 *   --hero-hoehe      Hoehe des Bildbereichs
 *   --hero-deckkraft  Deckkraft des weissen Bandes
 *   --hero-bildlage   welcher Bildausschnitt beim Beschneiden stehen bleibt
 *   --hero-abstand    Innenabstand des Bandes
 *   --hero-schatten   Schlagschatten ueber der Bandkante
 *   --hero-max        Groesse der Ueberschrift auf dem grossen Schirm
 *
 * Eine neue Seitenart braucht damit sechs Werte und keine eigene Kopie.
 */
.homepage-hero,
.listing-hero,
.project-hero {
    position: relative;
    width: 100%;
    height: var(--hero-hoehe);
    overflow: hidden;
}

.homepage-hero {
    --hero-hoehe: 800px;
    --hero-deckkraft: 0.85;
    --hero-bildlage: 50% 50%;
    --hero-abstand: 60px 16px;
    --hero-schatten: 0 -4px 8px -3px rgba(0, 0, 0, 0.25);
    --hero-max: 72px;
}
.listing-hero {
    --hero-hoehe: 800px;
    --hero-deckkraft: 0.85;
    /* Auf den Listenbildern steht das Motiv unten — oben wird beschnitten. */
    --hero-bildlage: 50% 100%;
    --hero-abstand: 60px 16px;
    --hero-schatten: 0 -4px 8px -3px rgba(0, 0, 0, 0.25);
    --hero-max: 64.8px;
}
.project-hero {
    --hero-hoehe: 100vh;
    --hero-deckkraft: 0.7;
    --hero-bildlage: 50% 50%;
    --hero-abstand: 50px 40px 40px;
    --hero-schatten: none;
    --hero-max: 64.8px;
}

/* Als CSS-Hintergrund koennte der Browser keine Groesse waehlen — deshalb liegt
   hier ein echtes <img> mit srcset und wird per object-fit beschnitten. */
.homepage-hero__image,
.listing-hero__image,
.project-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--hero-bildlage);
}

.homepage-hero__overlay,
.listing-hero__overlay,
.project-title-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 10;
    background: rgba(255, 255, 255, var(--hero-deckkraft));
    text-align: center;
    padding: var(--hero-abstand);
    box-shadow: var(--hero-schatten);
}

/*
 * Die Ueberschrift waechst mit dem Fenster statt in Stufen zu springen: 9
 * Prozent der Fensterbreite, nach unten bei 28 Pixeln begrenzt, nach oben bei
 * der Groesse des jeweiligen Seitentyps. Bei 375 Pixeln sind das 33,8 Pixel.
 *
 * Mitwachsend, weil die Ueberschrift je Sprache unterschiedlich lang ist und
 * weitere Sprachen folgen. Feste Stufen hatten zur Folge, dass "NEUBAUPROJEKTE"
 * breiter war als der Schirm und mitten im Wort umbrach.
 */
.homepage-hero__overlay h2,
.listing-hero__overlay h1,
.project-title-overlay h1 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 9vw, var(--hero-max));
    font-weight: 300;
    text-transform: uppercase;
    color: #202732;
    line-height: 1.1;
    margin: 0;
}

/* Auf Projektseiten steht unter der Ueberschrift noch Ort und Eckdaten. */
.project-title-overlay h1 { margin-bottom: 8px; }

.homepage-hero__overlay p,
.listing-hero__overlay p {
    font-size: 21.6px;
    font-weight: 300;
    color: #000;
    line-height: 1.6;
    margin: 0;
}
.project-title-overlay__location {
    font-size: 21.6px; font-weight: 400; color: #000; margin: 0 0 4px;
}
.project-title-overlay__meta {
    font-size: 18px; font-weight: 300; color: #000; line-height: 1.4; margin: 0;
}


/* === components/brochure.css === */
/* Brochure Circle Button */
.project-brochure { padding: 0; }
.brochure-link {
    position: fixed; right: 52px; top: 147px; z-index: 1000;
    width: 200px; height: 200px;
    background-color: var(--color-red);
    border: 2px solid var(--color-white); border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.69);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 28px;
    color: var(--color-white); transition: background-color 0.2s;
}
.brochure-link:hover { background-color: #333; color: var(--color-white); }
/*
 * Der Kreis ist 200px breit, innen bleiben 144px. "PROJECT BROCHURE" hat ein
 * Leerzeichen und bricht dort von selbst; das deutsche "PROJEKTBROSCHUERE" ist
 * ein zusammengesetztes Wort ohne Bruchstelle und lief aus dem Kreis heraus.
 *
 * Die Sprachdateien tragen deshalb ein weiches Trennzeichen an der Fuge, und
 * nur dort wird getrennt: "PROJEKT-BROSCHUERE".
 *
 * Kein hyphens: auto. Damit sucht der Browser seine eigene Stelle und trennt
 * nach Silben — "BRO-SCHUERE" — und macht die gesetzte Fuge wertlos.
 * overflow-wrap bleibt als letzte Reissleine fuer eine kuenftige Sprache, in
 * der jemand ein langes Wort ohne Trennzeichen einsetzt: dann lieber irgendwo
 * gebrochen als ausserhalb des Kreises.
 */
.brochure-link__label {
    font-family: 'Roboto', sans-serif; font-size: 25.2px;
    text-transform: uppercase; font-weight: 700;
    line-height: 28.8px; color: var(--color-white);
    overflow-wrap: break-word;
}
.brochure-link__cta {
    font-family: 'Roboto', sans-serif; font-size: 18px;
    font-weight: 300; margin-top: 5px; line-height: 23.4px;
    color: var(--color-white);
}

/* Brochure request modal — measured against the WordPress popup:
   white box 800px wide, padding 60px 60px 50px, heading 64.8px/300 uppercase,
   labels 16px/700 with a red asterisk, inputs 38px with a 1px #ccc border. */
.brochure-modal[hidden] { display: none; }
.brochure-modal {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px; overflow-y: auto;
}
.brochure-modal__overlay {
    position: fixed; inset: 0;
    background: rgba(32, 39, 50, 0.6);
}
.brochure-modal__box {
    position: relative;
    background: var(--color-white);
    width: 100%; max-width: 800px;
    /* auto margins keep it centred and, unlike flex centring alone, do not
       clip the top once the form is taller than the window */
    margin: auto;
    padding: 60px 60px 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
/* Am grossen Schirm ist die Kopfzeile nur eine Huelle: der Titel laeuft wie
   bisher, das Kreuz sitzt absolut in der Ecke. */
.brochure-modal__kopf { display: block; }
.brochure-modal__close {
    position: absolute; top: 18px; right: 22px;
    background: none; border: 0; cursor: pointer;
    font-size: 34px; line-height: 1; color: #999;
}
.brochure-modal__close:hover { color: #202732; }

.brochure-form__title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 8.5vw, 64.8px); font-weight: 300; line-height: 1.1;
    text-transform: uppercase; color: #000;
    margin: 0;
}
.brochure-form__intro {
    font-family: var(--font-body);
    font-size: 18px; font-weight: 300; line-height: 1.6; color: #000;
    margin: 8px 0 32px;
}

.brochure-form__row { display: grid; gap: 20px; margin-bottom: 20px; }
.brochure-form__row--3 { grid-template-columns: repeat(3, 1fr); }
.brochure-form__row--2 { grid-template-columns: repeat(2, 1fr); }

.brochure-form__field label {
    display: block;
    font-family: var(--font-body);
    font-size: 16px; font-weight: 700; color: #000;
    margin-bottom: 4px;
}
.brochure-form__field .req { color: #f00; }

.brochure-form__field input,
.brochure-form__field select,
.brochure-form__field textarea {
    width: 100%;
    font-family: var(--font-body); font-size: 16px; color: #333;
    background: var(--color-white);
    border: 1px solid #ccc; border-radius: 2px;
    padding: 6px 10px;
}
.brochure-form__field input,
.brochure-form__field select { height: 38px; }
.brochure-form__field textarea { height: 120px; resize: vertical; }
.brochure-form__field input:focus,
.brochure-form__field select:focus,
.brochure-form__field textarea:focus {
    outline: none; border-color: var(--color-gold);
}

/* The phone field carries the same country dropdown as the contact form */
.brochure-form__field .iti { width: 100%; }
.brochure-form__field .iti input { padding-left: 52px; }

/* Der Absendeknopf ist der Formularknopf der Site — .btn--submit in
   components/contact-form.css, beige mit weisser Schrift. Hier stand ein
   eigener in Grau; es gibt keinen Grund, warum dieses Formular anders
   aussehen sollte als das Kontaktformular. */
/*
 * Waehrend des Sendens: nicht blass, sondern in Bewegung.
 *
 * Ein ausgegrauter Knopf sieht aus wie einer, der nicht geht — dabei
 * arbeitet er gerade. Der Vorgang dauert rund eine Sekunde; ohne sichtbares
 * Zeichen tippt jemand ein zweites Mal oder haelt es fuer kaputt. Deshalb
 * volle Farbe und ein laufender Ring davor.
 */
#brochureSubmit.ist-sendend {
    /* Gegen .btn--submit:disabled { opacity: .6 }: waehrend des Sendens ist
       der Knopf nicht ausser Betrieb, sondern beschaeftigt. Blass heisst fuer
       jeden Besucher "geht nicht". */
    opacity: 1;
    background: var(--color-gold);
    cursor: wait;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#brochureSubmit.ist-sendend::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ne-dreht 0.7s linear infinite;
}
@keyframes ne-dreht { to { transform: rotate(360deg); } }

/* Wer Bewegung abgestellt hat, bekommt den Ring stehend — als Zeichen
   genuegt er auch so. */
@media (prefers-reduced-motion: reduce) {
    #brochureSubmit.ist-sendend::before { animation: none; }
}

.brochure-form .form-feedback { margin-bottom: 16px; }

@media (max-width: 1024px) {
    /* The badge would sit on top of the hero title on narrow screens */
    .brochure-link { width: 140px; height: 140px; right: 16px; top: 120px; padding: 18px; }
    .brochure-link__label { font-size: 18px; line-height: 21px; }
    .brochure-link__cta { font-size: 14px; line-height: 18px; }
}
@media (max-width: 768px) {
    /*
     * Auf dem Telefon derselbe Aufbau wie das Navi-Overlay, nur hell statt
     * dunkel: eine Flaeche ueber den ganzen Schirm, eigene Kopfzeile mit dem
     * Kreuz rechts, und der Bildlauf liegt in dieser Flaeche.
     *
     * Das loest drei Dinge auf einmal. Der dunkle Grund, der beim Antippen
     * schliesst, ist nicht mehr zu treffen — vorher war das Formular beim
     * Wischen am Rand weg. Das Blatt beginnt oben statt in der Mitte, weil
     * nicht mehr ein Kasten in einem hoeheren Fenster zentriert wird. Und das
     * Kreuz sitzt dort, wo es auch im Menue sitzt.
     */
    .brochure-modal {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 2000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Am Ende des Blattes nicht auf die Seite darunter weiterscrollen. */
        overscroll-behavior: contain;
        /*
         * Abstand fuer das Scrollen, das der Browser selbst macht: mit den
         * Pfeilen der Tastatur springt der Fokus ins naechste Feld, und ohne
         * diesen Abstand steht es danach an der Kante und ist angeschnitten.
         * Unten grosszuegig, weil dort die Tastatur steht.
         */
        scroll-padding: 24px 0 160px;
        background: var(--color-white);
        /* Oben derselbe Abstand wie an den Seiten, damit der Titel nicht
           weiter am Rand klebt als der Text darunter. Unten mehr Luft, damit
           der Absendeknopf nicht an der Kante haengt, wenn die Tastatur die
           Flaeche kurz haelt. */
        padding: 20px 20px 60px;
    }
    /* Der dunkle Grund hat hier keine Aufgabe mehr und darf auch nicht mehr
       schliessen — geschlossen wird ueber das Kreuz. */
    .brochure-modal__overlay { display: none; }

    .brochure-modal__box {
        max-width: none;
        margin: 0;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    /* Kopfzeile wie .menue-mobil__kopf: auf Hoehe der Seitenkopfzeile, Kreuz
       rechts, 44x44 Flaeche. */
    /*
     * Titel links, Kreuz rechts, beides in der ersten Zeile. Die Kopfzeile war
     * vorher so hoch wie die Seitenkopfzeile und leer — der Titel begann
     * dadurch erst 100 Pixel weiter unten, und oben stand nichts als das Kreuz.
     */
    .brochure-modal__kopf {
        display: flex;
        /* Auf dieselbe Mitte wie das Kreuz: dessen Flaeche ist 44px hoch, die
           Titelzeile knapp 31px. Oben buendig stand der Titel deshalb sichtbar
           hoeher als das Zeichen daneben. */
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        /* Der Abstand nach oben kommt vom Blatt selbst — hier keiner, sonst
           stuende der Titel tiefer als der Rand links breit ist. */
        padding: 0;
    }
    .brochure-modal__close {
        position: static;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        line-height: 1;
        color: #202732;
    }

    /* Gedraengter, damit weniger gescrollt werden muss. Die Eingabefelder
       behalten ihre 38px Hoehe — darunter wird das Tippen unsicher. */
    .brochure-form__title { font-size: 28px; }
    .brochure-form__intro { font-size: 16px; margin: 6px 0 18px; }
    .brochure-form__row { gap: 12px; margin-bottom: 12px; }
    .brochure-form__field label { font-size: 15px; margin-bottom: 3px; }
    .brochure-form__field textarea { min-height: 80px; }
    .brochure-form__row--3,
    .brochure-form__row--2 { grid-template-columns: 1fr; }
}

/*
 * Feste Leiste am unteren Rand des Telefons — die "flyingNavi" der alten
 * Mobilvorlage (Klasse mobNavi: width 100%, position fixed, bottom 0).
 *
 * Sie loest auf dem Handy den runden Broschuerenaufkleber ab. Der klebt auf
 * dem grossen Schirm rechts oben; auf einem Telefon legt er sich ueber den
 * Text und ist mit dem Daumen schlecht zu erreichen.
 */
.mob-navi { display: none; }

@media (max-width: 768px) {
    .brochure-link { display: none; }

    .mob-navi {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 900;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    }
    .mob-navi__teil {
        flex: 1 1 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 0 7px;
        text-decoration: none;
        text-align: center;
        /* Farben der alten Leiste, nachgemessen: Dunkelrot fuer die
           Broschuere, das WhatsApp-Gruen etwas dunkler als das Markengruen. */
        background: rgb(105, 0, 0);
        color: #fff;
    }
    .mob-navi__teil--whatsapp { background: rgb(2, 168, 88); }

    /*
     * Beim Antippen nichts aendern.
     *
     * Ein Fingertipp loest auf dem Telefon hover, active und focus aus. Aus
     * dem Reset kommt a:hover { color: gold } — Gold auf Dunkelrot ist beim
     * Druecken nicht mehr zu lesen. Die Kacheln behalten deshalb in jedem
     * Zustand ihre Farbe; die Rueckmeldung gibt das Fenster, das aufgeht.
     * tap-highlight-color nimmt zusaetzlich den grauen Schleier, den iOS und
     * Android von sich aus darueberlegen.
     */
    .mob-navi__teil,
    .mob-navi__teil:hover,
    .mob-navi__teil:focus,
    .mob-navi__teil:active {
        color: #fff;
        background: rgb(105, 0, 0);
        -webkit-tap-highlight-color: transparent;
    }
    .mob-navi__teil--whatsapp,
    .mob-navi__teil--whatsapp:hover,
    .mob-navi__teil--whatsapp:focus,
    .mob-navi__teil--whatsapp:active {
        background: rgb(2, 168, 88);
    }
    .mob-navi__titel {
        font-family: var(--font-heading);
        font-size: 21px; font-weight: 400; line-height: 1.2;
    }
    .mob-navi__zusatz { font-size: 14px; font-weight: 400; line-height: 1.2; }

    /*
     * Platz fuer die Leiste, damit sie nichts verdeckt, was ganz unten steht.
     * An die Klasse gebunden statt an body: die Leiste gibt es nur auf
     * Projektseiten, und auf allen anderen Seiten stand dadurch ein leerer
     * weisser Streifen unter der Fusszeile.
     */
    body.hat-mob-navi { padding-bottom: 62px; }
}

/*
 * Bestaetigung nach dem Absenden.
 *
 * Ein kleines Fenster in der Mitte statt einer Meldung am Ende des Formulars.
 * Es verschwindet von selbst; zu treffen ist trotzdem etwas — das Kreuz und
 * die ganze Flaeche daneben.
 */
.ne-hinweis {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(32, 39, 50, 0.45);
    opacity: 0;
    transition: opacity 0.25s;
}
.ne-hinweis.ist-da { opacity: 1; }

/* Gruen und weisse Schrift: die Bestaetigung soll auf den ersten Blick als
   Erfolg gelesen werden, nicht erst nach dem Satz. Der Ton ist der der
   Erfolgsmeldung im Kontaktformular. */
.ne-hinweis__kasten {
    position: relative;
    max-width: 420px;
    width: 100%;
    background: #1a3a1a;
    color: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 32px 28px 30px;
    text-align: center;
    /* Kommt mit dem Einblenden leicht herauf — genug, um wahrgenommen zu
       werden, zu wenig, um zu stoeren. */
    transform: translateY(8px);
    transition: transform 0.25s;
}
.ne-hinweis.ist-da .ne-hinweis__kasten { transform: translateY(0); }

.ne-hinweis__text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.5;
    color: #fff;
}

/*
 * Haken ueber dem Satz — er sagt dasselbe noch einmal ohne Worte.
 *
 * Als Maske und nicht als Zeichen: das Hakenzeichen zieht auf iOS die
 * Emoji-Schrift heran und ignoriert die Farbe. Dieselbe Loesung wie bei den
 * Merkmalslisten, siehe --haken in base/variables.css.
 */
.ne-hinweis__haken {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    background: #55ff55;
    -webkit-mask: var(--haken) center / contain no-repeat;
    mask: var(--haken) center / contain no-repeat;
}

.ne-hinweis__zu {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}
.ne-hinweis__zu:hover { color: #fff; }


/* === components/gallery.css === */
/* Gallery Slider */
.project-gallery { padding: 0; width: 100%; position: relative; overflow: visible \!important; }
/*
 * Die Galerie rastet seitenweise ein.
 *
 * Vorher war sie ein freier Bildlauf: eine Wischgeste konnte an jeder
 * beliebigen Pixelposition stehenbleiben, und zwei halbe Bilder standen
 * nebeneinander. Jetzt sitzt ein Rastpunkt auf jedem zweiten Bild — eine
 * Geste bewegt genau eine Seite, also die zwei sichtbaren Bilder.
 * scroll-snap-stop verhindert, dass ein kraeftiger Wisch mehrere Seiten
 * ueberspringt.
 */
.gallery {
    display: flex; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 50%; overflow: hidden; }
.gallery__slide:nth-child(odd) { scroll-snap-align: start; scroll-snap-stop: always; }
/* Bei ungerader Bildzahl liegt hinter dem letzten Rastpunkt keine volle Seite
   mehr. Ohne diese Zeile bliebe das letzte Bild nur halb sichtbar. */
.gallery__slide:last-child { scroll-snap-align: end; }
.gallery__slide picture { display: block; width: 100%; }
.gallery__slide img { width: 100%; height: auto; display: block; aspect-ratio: 1024 / 640; object-fit: cover; }
.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 50; background: rgba(17, 17, 17, 0.8); color: white;
    border: none; width: 42px; height: 42px;
    cursor: pointer; font-size: 25px; line-height: 42px;
    text-align: center; padding: 0;
    transition: background 0.2s; display: flex;
    align-items: center; justify-content: center;
}
.gallery-nav:hover { background: rgba(51, 51, 51, 0.8); }
.gallery-nav__prev { left: 20px; }
.gallery-nav__next { right: 20px; }

/* Gallery slide cursor */
.gallery__slide img { cursor: pointer; }
.gallery__slide img[src=""] { display: none; }

/* Auf dem Handy sitzen die Pfeile buendig am Rand, nicht eingerueckt —
   gemessen an der alten Mobilvorlage: x=0 und x=340 bei 390 Breite. */
@media (max-width: 768px) {
    .gallery-nav__prev { left: 0; }
    .gallery-nav__next { right: 0; }
}


/* === components/lightbox.css === */
/* Gallery Lightbox */
.lightbox {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%; z-index: 9999;
    background: rgba(0,0,0,0.92);
    align-items: center; justify-content: center; cursor: pointer;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; }
.lightbox__close {
    position: absolute; top: 20px; right: 30px;
    color: #fff; font-size: 36px; cursor: pointer;
    background: none; border: none; line-height: 1; z-index: 10000;
}
.lightbox__close:hover { color: var(--color-gold); }
.lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; z-index: 10000;
    color: #fff; font-size: 64px; line-height: 1; padding: 0 24px;
}
.lightbox__nav:hover { color: var(--color-gold); }
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
@media (max-width: 600px) {
    .lightbox__nav { font-size: 44px; padding: 0 10px; }
}


/* === components/investment.css === */
/* Investment Reasons */
/* Die duenne Linie ueber dem Block trennt Einleitung und Investment —
   1px solid #ccc, gemessen an der alten Seite. */
.project-investment {
    padding: 100px var(--container-padding);
    text-align: center;
    border-top: 1px solid #ccc;
}
.project-investment h2 {
    font-size: var(--schrift-abschnitt); font-weight: 300; font-family: var(--font-heading);
    color: #202732; margin: 0 0 12px;
}
.investment-subtitle { font-size: 18px; font-weight: 300; color: #000; margin: 0 0 50px; }
.reasons-grid {
    display: grid; grid-template-columns: repeat(4, 270px);
    gap: 32px 40px; justify-content: center;
    max-width: 1200px; margin: 0 auto;
}
.reason { text-align: center; }
.reason__icon { width: 72px; height: 72px; margin: 0 auto 20px; }
.reason__icon img { width: 72px; height: 72px; display: block; object-fit: contain; }
.reason__title {
    font-family: var(--font-heading); font-size: 19.8px;
    font-weight: 400; text-transform: uppercase; margin: 0 0 12px; color: #000;
}
.reason__text { font-size: 16.2px; font-weight: 300; color: #000; line-height: 1.6; margin: 0; }

/*
 * Auf dem Handy stehen die Investitionsgruende nicht untereinander, sondern
 * als Schieber nebeneinander — so macht es die mobile Vorlage der alten Seite
 * (ein Slider mit vier Slides, Seitenverhaeltnis 1:1, ohne Pfeile, ohne
 * Autoplay). Untereinander waeren es vier volle Bildschirmhoehen zwischen
 * Galerie und Lage.
 *
 * Umgesetzt mit Scroll-Snap statt einer Bibliothek: das ist natives Wischen,
 * kostet kein Skript und rastet zuverlaessiger ein als eine Nachbildung.
 */
@media (max-width: 768px) {
    .reasons-grid {
        display: flex;
        grid-template-columns: none;
        gap: 0;
        /* Vom Desktop steht hier justify-content: center. Laeuft ein
           Flex-Container ueber, schiebt das den Anfang nach links aus dem
           Sichtbereich - und dorthin kann niemand mehr scrollen. */
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Kein negativer Rand: sonst rechnet scroll-snap gegen eine andere
           Breite als die sichtbare, und es bleiben zwei halbe Karten stehen. */
        margin: 0;
        padding: 0;
        max-width: none;
    }
    .reasons-grid::-webkit-scrollbar { display: none; }
    .reason {
        flex: 0 0 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    /* Punkte statt Pfeile: die Vorlage steht auf arrowStyle "none". */
    .reasons-punkte {
        display: flex; justify-content: center; gap: 8px; margin: 24px 0 0;
    }
    .reasons-punkte span {
        width: 8px; height: 8px; border-radius: 50%;
        background: #d5d5d5; transition: background 0.2s;
    }
    .reasons-punkte span.aktiv { background: var(--color-gold); }
}
@media (min-width: 769px) {
    .reasons-punkte { display: none; }
}


/* === layouts/project-page.css === */
/* Project Description + Location */
.project-description {
    padding: 100px 0; max-width: 800px; margin: 0 auto; text-align: center;
}
.project-description h2 {
    font-size: var(--schrift-abschnitt); font-weight: 300; font-family: var(--font-heading);
    text-align: center; color: #202732; margin: 0 0 30px;
}
.project-description__image { margin: 0 0 50px; }
.project-description__image img { width: 100%; height: auto; display: block; }
.project-description__text { text-align: center; }
.project-description__text p {
    font-size: 18px; font-weight: 300; line-height: 28.8px;
    text-align: center; margin: 0 0 18px; color: #000;
}
.project-location { padding: 100px var(--container-padding); background: #eeeeee; }
.project-location__inner { max-width: 1200px; margin: 0 auto; }
.project-location h2 {
    font-size: var(--schrift-abschnitt); font-weight: 300; font-family: var(--font-heading);
    color: #202732; margin: 0 0 40px; text-align: center;
}
/* Tighten the gap when the map subtitle sits right underneath the heading */
.project-location h2:has(+ .project-location__subtitle) { margin-bottom: 12px; }
.project-location__subtitle {
    font-size: 18px; font-weight: 300; color: #202732;
    margin: 0 0 40px; text-align: center;
}
.project-location__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}
.project-location__left { display: flex; flex-direction: column; gap: 30px; }
.project-location__text { font-size: 18px; font-weight: 300; line-height: 1.7; color: #000; }
.project-location__text p { margin: 0 0 18px; }
.project-location__map iframe { display: block; width: 100%; height: 300px; border: 0; }
/* Statt der eingebetteten Karte liegt hier der Kartenausschnitt als Bild. */
.project-location__map img { display: block; width: 100%; height: auto; }
.project-location__images { display: flex; flex-direction: column; gap: 20px; }
.project-location__images img { width: 100%; height: auto; display: block; }

/*
 * Gekappter Text mit weichem Uebergang und Knopf darunter — das Gegenstueck
 * zum Show-More-Block der alten Mobilvorlage (200 Pixel, mit Ausblendung).
 * Die Klassen setzt assets/js/src/mehr-zeigen.js, damit ohne JavaScript der
 * vollstaendige Text dasteht.
 */
.mehr-zeigen {
    position: relative;
    max-height: 200px;
    overflow: hidden;
}
.mehr-zeigen::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}
.mehr-zeigen.offen { max-height: none; }
.mehr-zeigen.offen::after { display: none; }

/* Masse und Farbe der alten Mobilvorlage, nachgemessen auf dem iPhone:
   113x35, #202732, weiss, 3px Radius, 14,4px in Schriftstaerke 400. */
.mehr-knopf {
    display: block;
    margin: 20px auto 0;
    padding: 5.76px 14.4px;
    font-family: var(--font-body);
    font-size: 14.4px;
    font-weight: 400;
    line-height: 1.6;
    color: #fff;
    background: #202732;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
}
.mehr-knopf:hover { background: #3a4455; }


/* === components/faq.css === */
/* FAQ Accordion */
.project-faqs { padding: 100px var(--container-padding); max-width: 1200px; margin: 0 auto; }
.project-faqs h2 {
    font-size: var(--schrift-abschnitt); font-weight: 300; font-family: var(--font-heading);
    color: #202732; margin: 0 0 40px; text-align: center;
}
.faqs { margin: 0; }
.faq__item { border-bottom: 1px solid var(--color-border); padding: 20px 0; }
.faq__question {
    font-size: 17.6px; font-weight: 600; color: #1a1a1a;
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    background: none; border: none; width: 100%; text-align: left; padding: 0;
    font-family: var(--font-body); list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
    content: '+'; font-size: 24px; color: var(--color-gold);
    flex-shrink: 0; margin-left: 20px; font-weight: 300;
}
details[open] .faq__question::after { content: '\2212'; }
.faq__answer { padding-top: 16px; color: #444; line-height: 1.7; font-size: 16px; font-weight: 300; }


/* === components/equipment-distances.css === */
/* Equipment + Distances */
.equipment-distances-section { padding: 100px var(--container-padding); background: #202732; color: var(--color-white); }
.equipment-distances-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
}
.equipment-column h3, .distances-column h3 {
    font-family: var(--font-heading); font-size: 19.8px;
    font-weight: 400; text-transform: uppercase;
    color: var(--color-white); margin: 0 0 30px;
}
.equipment-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px; }
.equipment__item {
    font-size: 16.2px; font-weight: 300; color: var(--color-white);
    padding-left: 24px; position: relative; line-height: 28.8px;
    font-family: 'Roboto', sans-serif;
}
.equipment__item::before { content: '\2713'; position: absolute; left: 0; color: var(--color-gold); font-weight: 700; }
.distances-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
.distance__item { display: flex; justify-content: space-between; align-items: baseline; }
.distance__label {
    font-size: 15px; font-weight: 300; text-transform: uppercase;
    color: var(--color-white); font-family: 'Roboto', sans-serif; line-height: 28.8px;
}
.distance__value { font-size: 16.2px; font-weight: 300; color: #CCAB86; font-family: 'Roboto', sans-serif; line-height: 28.8px; }


/* === components/contact-form.css === */
/* Contact Section + Form */
/* scroll-margin-top haelt den Sprung ueber #contact unter dem fixierten
   Header, sonst verdeckt der die ersten 100px des Bereichs. */
/* Die Trennlinie ueber dem Bereich spannt die ganze Seitenbreite. Frueher
   zeichnete sie ein absolut gesetztes ::before mit width: 100vw. Das Mass
   schliesst die senkrechte Bildlaufleiste ein: die Linie ragte auf jeder Seite
   um deren halbe Breite hinaus und erzeugte auf jeder Seite der Site einen
   waagerechten Bildlauf von 8 Pixeln. Jetzt ist der Bereich selbst so breit
   wie die Seite und traegt die Linie als eigenen Rahmen; die Inhaltsbreite
   begrenzt der innere Kasten. */
.contact-section {
    padding: 100px 0 0; margin: 0 auto; position: relative;
    border-top: 1px solid #ccc;
    scroll-margin-top: var(--header-height);
}
.contact-section__inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 32px; align-items: stretch;
}
.contact-section__left { position: relative; background: var(--color-white); }
.contact-section__left-bg {
    padding: 0; min-height: 100%;
    background-image: url('../images/Christiane-Tiebel-2.webp');
    background-size: auto; background-position: 100% 100%; background-repeat: no-repeat;
}
.contact-section__about { margin-bottom: 0; }
.contact-section__about h4 {
    font-family: var(--font-heading); font-size: 21.6px;
    font-weight: 400; color: #000; margin: 0 0 10.8px;
}
.contact-section__questions h4 {
    font-family: var(--font-heading); font-size: 21.6px;
    font-weight: 400; color: #000; margin: 30px 0 10.8px;
}
.contact-section__about p, .contact-section__questions p {
    font-size: 16.2px; font-weight: 300; line-height: 1.6;
    color: #000; margin: 0 0 16.2px; font-family: 'Roboto', sans-serif;
}
.contact-section__subtitle { font-size: 16.2px !important; color: #000 !important; }
.contact-person {
    margin: 0 0 16.2px; line-height: 25.92px; font-size: 16.2px;
    font-weight: 300; color: #000; font-family: 'Roboto', sans-serif;
}
.contact-person strong { font-weight: 700; }
.contact-person a { color: #000; text-decoration: none; }
.contact-person a:hover { color: var(--color-gold); }

/* Right column: dark form */
.contact-section__right { background: #202732; padding: 40px; color: var(--color-white); }
.contact-section__right h4 {
    font-family: var(--font-heading); font-size: 21.6px;
    font-weight: 400; color: var(--color-white); margin: 0 0 10.8px; text-align: center;
}
.service-tags {
    margin-bottom: 24px; text-align: center;
    font-size: 16.2px; font-weight: 300; color: var(--color-white);
    font-family: 'Roboto', sans-serif;
}
.service-tags__label { margin-right: 6px; }
.service-tags__tag { display: inline-block; margin-left: 4px; font-size: 16.2px; font-weight: 300; color: var(--color-white); }
/*
 * Der Haken ist gezeichnet, nicht geschrieben.
 *
 * Vorher stand hier content: '\2714' — das Zeichen "heavy check mark". Keine
 * unicode-range unserer Roboto-Dateien deckt U+2714 ab, das Zeichen kommt also
 * immer aus einer Systemschrift. Unter Windows ist das eine Textschrift, der
 * Haken wird gruen. Unter iOS greift die Fallback-Kette zur Apple Color Emoji:
 * die bringt ihre eigene Farbe mit und ignoriert color — auf dem iPad standen
 * deshalb graue Haken statt gruener.
 *
 * Eine Maske haengt an keiner Schrift. Die Farbe kommt aus background-color
 * und gilt auf jedem Geraet, die Groesse folgt der Schriftgroesse.
 */
.service-tags__tag::before {
    content: '';
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 6px;
    vertical-align: -0.08em;
    background-color: #55FF55;
    -webkit-mask: var(--haken) no-repeat center / contain;
    mask: var(--haken) no-repeat center / contain;
}

/* Form fields */
.contact-form { margin-top: 10px; }
.form-field { display: flex; flex-direction: column; }
.form-field label {
    display: block; font-size: 16px; font-weight: 700;
    color: var(--color-white); margin-bottom: 6px; font-family: 'Roboto', sans-serif;
}
.contact-form input, .contact-form select, .contact-form textarea {
    width: 100%; height: 38px; padding: 6px 10px; border: 1px solid #ccc;
    background: #fff; font-family: 'Roboto', sans-serif;
    font-size: 16px; line-height: 20.8px; color: #333; border-radius: 2px;
    box-sizing: border-box; transition: border-color 0.2s;
}
.contact-form textarea { height: auto; }
.contact-form select { appearance: auto; background: #fff; color: #333; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #999; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--color-gold);
}
.form-row { margin-bottom: 14px; }
.form-row--3col { display: grid; grid-template-columns: auto 1fr 1fr; gap: 14px; }
.form-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* intl-tel-input overrides */
.contact-form .iti { width: 100%; height: 38px; }
.contact-form .iti__dropdown-content { background: #fff !important; border: 1px solid #ccc !important; max-height: 200px; z-index: 100; }
.contact-form .iti__country-list { background: #fff !important; color: #333 !important; }
.contact-form .iti__country-list .iti__country { color: #333 !important; background: #fff !important; }
.contact-form .iti__country-list .iti__country-name { color: #333 !important; }
.contact-form .iti__country-list .iti__dial-code { color: #666 !important; }
.contact-form .iti__country-list .iti__country:hover,
.contact-form .iti__country-list .iti__highlight { background: #f0f0f0 !important; }
.contact-form .iti__search-input { background: #fff !important; color: #333 !important; border: 1px solid #ccc !important; }
.contact-form .iti__selected-dial-code { color: #333; }

.btn--submit {
    display: inline-block; width: 150px;
    background: #AA8D70; color: var(--color-white);
    border: none; padding: 8px 15px 7px;
    font-family: 'Roboto', sans-serif; font-size: 16.2px; font-weight: 300;
    text-transform: uppercase; cursor: pointer; transition: background 0.2s;
    margin-top: 8px; border-radius: 0;
}
.btn--submit:hover { background: #8a7058; }
.btn--submit:disabled { opacity: 0.6; cursor: wait; }

/* Form feedback */
.form-feedback { margin-top: 10px; padding: 0; font-size: 14px; font-family: 'Roboto', sans-serif; line-height: 1.5; border-radius: 3px; }
.form-feedback:empty { display: none; }
.form-feedback--success { display: block; padding: 10px 14px; background: #1a3a1a; color: #55FF55; border: 1px solid #2a5a2a; }
.form-feedback--error { display: block; padding: 10px 14px; background: #3a1a1a; color: #ff6b6b; border: 1px solid #5a2a2a; }

/*
 * Falls die Laenderliste je wieder mit Suchfeld laeuft: 16px. Alles darunter
 * laesst iOS beim Antippen in die Seite hineinzoomen, und danach steht die
 * Seite schief, bis der Besucher von Hand herauszoomt.
 */
.iti__search-input { font-size: 16px; }

/* Am Ende der Laenderliste nicht auf die Seite darunter weiterscrollen. */
.iti__country-list {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/*
 * Die Laendervorwahl auf fingerbedienten Geraeten: ein sichtbarer Kasten mit
 * der Vorwahl, darueber ein durchsichtiges <select> mit den vollen
 * Laendernamen. Angetippt wird das <select>, also oeffnet die Auswahl des
 * Systems; zu sehen ist der Kasten darunter.
 *
 * Der Umweg ist noetig, weil ein <select> immer den Text der gewaehlten
 * Option zeigt und "Vereinigtes Königreich (+44)" in 112 Pixeln unlesbar
 * abschneidet. Die Beschriftungen je nach Zustand umzuschreiben hat nicht
 * getragen: focus, change und blur kommen je nach Geraet in anderer
 * Reihenfolge.
 */
.tel-zeile {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.tel-zeile input:not([type="hidden"]) { flex: 1 1 auto; min-width: 0; }

.tel-vorwahl-kasten {
    position: relative;
    flex: 0 0 32%;
    display: flex;
    align-items: center;
    height: 38px;
    background: var(--color-white);
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 0 10px;
}
.tel-vorwahl-anzeige {
    font-family: var(--font-body);
    font-size: 16px;
    color: #333;
}
/* Dreieck wie an den uebrigen Auswahlfeldern: es zeigt, dass sich hier etwas
   oeffnet — das durchsichtige <select> bringt keines mit. */
.tel-vorwahl-kasten::after {
    content: '';
    position: absolute;
    right: 10px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-gold);
    pointer-events: none;
}
.tel-vorwahl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* 16px ist Pflicht: darunter zoomt iOS beim Antippen in die Seite hinein. */
    font-size: 16px;
    border: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}


/* === components/buttons.css === */
/* Buttons */
.btn {
    display: inline-block; padding: 12px 35px;
    font-size: 16px; font-weight: 400;
    text-transform: uppercase; text-align: center;
    cursor: pointer; transition: all 0.2s;
    border: 1px solid transparent; border-radius: 0;
}
.btn--primary { background: var(--color-gold); color: var(--color-white); border-color: var(--color-gold); }
.btn--primary:hover { background: var(--color-heading); border-color: var(--color-heading); color: var(--color-white); }
/* Zweite Wahl neben einem .btn--primary: gleiche Groesse und Form, nur ohne
   Flaeche. Gebraucht ueberall, wo zwei Moeglichkeiten gleich erreichbar sein
   muessen, aber nur eine empfohlen ist — etwa Annehmen und Ablehnen in der
   Cookie-Einwilligung. */
.btn--outline { background: none; color: var(--color-gold); border-color: var(--color-gold); }
.btn--outline:hover { background: var(--color-gold); color: var(--color-white); }

.btn--whatsapp {
    background: #00C666; color: var(--color-white);
    border-radius: 5px; font-size: 15px; font-weight: 300;
    padding: 5px 15px; display: inline-flex; align-items: center; gap: 8px;
}
.btn--whatsapp:hover { opacity: 0.9; color: var(--color-white); }


/* === components/footer.css === */
/* Footer */
.site-footer {
    padding: 0 var(--container-padding);
    background: transparent;
    border-top: 1px solid #ccc;
}
.site-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
}
/*
 * Kleine Rechtsverweise. Dieselbe Optik ueberall, wo Impressum, Datenschutz
 * und Cookie-Einstellungen stehen — in der Fusszeile und in der
 * Cookie-Einwilligung. Deshalb eine Regel und keine zweite daneben, sonst
 * laufen die beiden Stellen beim naechsten Eingriff auseinander.
 *
 * font-size und font-family stehen ausdruecklich da, weil der Cookie-Knopf in
 * der Fusszeile ein <button> ist und Schrift nicht erbt.
 */
.footer-imprint,
.cb-banner__links a,
.cb-modal__links a {
    color: var(--color-gold); font-size: 12px;
    font-family: var(--font-body); font-weight: 400; text-decoration: none;
}
.footer-imprint:hover,
.cb-banner__links a:hover,
.cb-modal__links a:hover { color: #a88a3e; }

/*
 * Die Rechtsverweise als eine Gruppe rechts unten. margin-left:auto haelt sie
 * dort auch auf den Seiten, die links keinen Aufklappknopf tragen — sonst
 * rutschte die Gruppe als einziges Kind nach links.
 */
.site-footer__rechtliches {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

/*
 * Datenschutz und Cookie-Einstellungen stehen neben dem Impressum. Der Knopf
 * sieht aus wie die Verweise daneben — er ist nur deshalb ein Knopf, weil er
 * nicht auf eine Seite fuehrt, sondern ein Fenster oeffnet.
 *
 * Hier steht nur, was der Browser von sich aus an Knopfaussehen mitbringt:
 * Flaeche, Rahmen, Innenabstand. Schrift und Farbe kommen aus
 * .footer-imprint, das der Knopf ebenfalls traegt.
 *
 * Kein "font: inherit" und kein "color: inherit": diese Regel steht nach
 * .footer-imprint und ist gleich spezifisch, wuerde dessen 12 px und das Gold
 * also ueberschreiben — der Knopf stand dann in Groesse und Farbe des
 * Koerpertexts neben zwei goldenen Verweisen.
 */
.footer-cookies {
    background: none;
    border: none;
    padding: 0;
    line-height: inherit;
    cursor: pointer;
}

/*
 * Telefon.
 *
 * Am Schirm ist die Fusszeile eine Zeile: links der Aufklappknopf des
 * Infotexts, rechts die Rechtsverweise. Am Telefon wurden daraus vier
 * gequetschte Spalten, weil alle vier Elemente in derselben Flex-Zeile
 * stehen — der Knopf und die drei Verweise.
 *
 * Deshalb hier zwei Zeilen: der Knopf oben, die Verweise darunter, beides
 * mittig. Sie duerfen umbrechen, damit auch eine laengere Uebersetzung von
 * "Cookie-Einstellungen" nicht aus dem Satzspiegel laeuft.
 */
@media (max-width: 768px) {
    .site-footer {
        padding: 0 var(--container-padding-mobile);
    }
    .site-footer__inner {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 16px 0;
        text-align: center;
    }
    .site-footer__rechtliches {
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 16px;
    }
    .info-text__toggle {
        text-align: center;
    }
}


/* === components/cookiebar.css === */
/*
 * Cookie-Einwilligung.
 *
 * Die Leiste kam samt eigenem Stylesheet aus einem anderen Projekt und brachte
 * fremde Farben, fremde Schriftgroessen und Radien mit. Hier steht nur noch die
 * Anordnung — Position, Aufteilung, Abstaende. Schrift, Farben und Knoepfe
 * kommen aus dem Bestand: die Ueberschriften ueber --schrift-untertitel, der
 * Fliesstext ueber die Grundschrift des Rumpfes, die Knoepfe als .btn im
 * Markup. Damit folgt die Leiste jeder kuenftigen Aenderung an diesen Werten
 * von selbst.
 *
 * Das Skript bleibt unberuehrt: es schaltet die Klasse "visible", setzt
 * "hidden" am Fenster und "cb-active" am Rumpf.
 */

/* ── Grundlage ────────────────────────────────────────────────────────── */

/* Der Rumpf darf nicht scrollen, solange Leiste oder Fenster offen sind. */
body.cb-active { overflow: hidden; }

.cb-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.cb-overlay.visible { opacity: 1; visibility: visible; }

/* ── Leiste ───────────────────────────────────────────────────────────── */

/*
 * Mittig statt als Leiste am unteren Rand.
 *
 * Ueber die ganze Breite gezogen sah der Kasten am grossen Schirm verloren
 * aus: viel Weissraum zwischen Text links und Knoepfen rechts, und die
 * Entscheidung stand am Rand des Blickfelds. In der Mitte ist sie das, was sie
 * ist — eine Frage, die vor dem Weiterlesen beantwortet wird. Der abgedunkelte
 * Hintergrund dahinter kommt vom Skript und war vorher ohne Wirkung.
 */
.cb-banner {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Kein eigener Hintergrund: der liegt als .cb-overlay darunter. */
    background: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
}
.cb-banner.visible { opacity: 1; visibility: visible; pointer-events: auto; }

.cb-banner__inner {
    width: 100%;
    max-width: 560px;
    /* Hoehe begrenzen und innen scrollen lassen: bei langem Text oder kleinem
       Fenster muss die Ueberschrift oben sichtbar bleiben. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-bg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    /* Kommt mit dem Einblenden leicht herauf. */
    transform: translateY(10px);
    transition: transform 0.3s;
}
.cb-banner.visible .cb-banner__inner { transform: translateY(0); }

/* Untereinander statt nebeneinander: Text, Knoepfe, Rechtsverweise. */
.cb-banner__actions { flex-wrap: wrap; }
.cb-banner__links { justify-content: flex-start; }

.cb-banner__content { flex: 1 1 auto; min-width: 0; }

.cb-banner__title {
    font-family: var(--font-heading);
    font-size: var(--schrift-untertitel);
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-heading);
    margin: 0 0 8px;
}

.cb-banner__text { margin: 0; }

.cb-banner__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cb-banner__links {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/*
 * "Einstellungen" ist eine Handlung, kein Rechtsverweis: wer nicht alles
 * annehmen will, braucht genau diesen Knopf. Er steht deshalb in der Groesse
 * der uebrigen Knoepfe (16px wie .btn) und nicht in den 12px der Verweise
 * darunter — Impressum und Datenschutz braucht an dieser Stelle fast niemand.
 */
.cb-textknopf {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.cb-textknopf:hover { color: var(--color-gold-hover); }

.cb-banner__sep { color: var(--color-text-muted); }

/* ── Fenster ──────────────────────────────────────────────────────────── */

.cb-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.cb-modal.visible { opacity: 1; visibility: visible; }
.cb-modal[hidden] { display: none; }

.cb-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.cb-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    /* Die Hoehe des Fensters, nicht die des Inhalts: gescrollt wird innen im
       Rumpf, damit Kopf und Fuss stehen bleiben. */
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.cb-modal__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 32px;
    border-bottom: 1px solid var(--color-border);
}

.cb-modal__title {
    font-family: var(--font-heading);
    font-size: var(--schrift-untertitel);
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-heading);
    margin: 0;
}

.cb-modal__close {
    background: none;
    border: none;
    color: var(--color-heading);
    font-size: 30px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.cb-modal__close:hover { color: var(--color-gold); }

.cb-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 32px;
}

.cb-modal__intro { margin: 0 0 24px; }

/*
 * Zwei Zeilen: erst die Knoepfe, darunter die Rechtsverweise. Nebeneinander
 * standen die Verweise gleichrangig neben der Entscheidung, zu der sie nur die
 * Fussnote sind — und auf dem Telefon landeten sie dadurch sogar darueber.
 */
.cb-modal__footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    padding: 20px 32px;
    border-top: 1px solid var(--color-border);
}

.cb-modal__actions { order: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.cb-modal__links { order: 2; display: flex; gap: 10px; }

/* ── Kategorien ───────────────────────────────────────────────────────── */

.cb-category { border-bottom: 1px solid var(--color-border); }
.cb-category:last-of-type { border-bottom: 0; }

.cb-category__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
}

.cb-category__info { min-width: 0; }

/*
 * font: inherit ist hier notwendig, nicht Zierde: ein <button> erbt Schrift
 * nicht, sondern bekommt vom Browser seine eigene von rund 13 Pixeln. Ohne
 * diese Zeile stehen "Essenziell" und "Statistik" winzig neben ihrem Schalter.
 * Die Ueberschriftenschrift setzt .cb-category__label darunter selbst.
 */
.cb-category__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-heading);
    cursor: pointer;
    text-align: left;
}

.cb-category__arrow {
    display: inline-block;
    font-size: 10px;
    color: var(--color-gold);
    transition: transform 0.2s;
}
.cb-category__toggle[aria-expanded="true"] .cb-category__arrow {
    transform: rotate(90deg);
}

.cb-category__label {
    font-family: var(--font-heading);
    font-weight: 400;
}

.cb-category__badge {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold);
    border: 1px solid var(--color-border);
    padding: 3px 8px;
}

.cb-category__details { padding: 0 0 18px 24px; }
.cb-category__desc { margin: 0; color: var(--color-text-light); }

/* ── Schalter ─────────────────────────────────────────────────────────── */

.cb-switch { position: relative; flex: 0 0 auto; width: 46px; height: 24px; }
.cb-switch__input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.cb-switch__slider {
    position: absolute;
    inset: 0;
    background: var(--color-bg-light);
    border: 1px solid var(--color-text-muted);
    transition: background 0.2s, border-color 0.2s;
    pointer-events: none;
}
.cb-switch__slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}
.cb-switch__input:checked + .cb-switch__slider {
    background: var(--color-gold);
    border-color: var(--color-gold);
}
.cb-switch__input:checked + .cb-switch__slider::before { transform: translateX(22px); }
/*
 * Der Schalter der notwendigen Kategorie ist an und laesst sich nicht
 * ausschalten. Er war deshalb blasser — und ein blasser Schalter sieht aus wie
 * ein kaputter. Er traegt jetzt dasselbe Gold wie der andere; dass er fest
 * steht, sagt das Kennzeichen "Erforderlich" daneben, und der Zeiger bleibt
 * ein Pfeil statt einer Hand.
 */
.cb-switch__input:disabled { cursor: default; }
.cb-switch__input:focus-visible + .cb-switch__slider { outline: 2px solid var(--color-gold); }

/* ── Telefon ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .cb-banner { padding: 12px; }
    .cb-banner__inner {
        gap: 20px;
        padding: 24px var(--container-padding-mobile);
        max-height: calc(100vh - 24px);
    }

    .cb-banner__actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .cb-banner__actions .btn { width: 100%; }
    .cb-banner__links { justify-content: center; }

    .cb-modal { padding: 0; align-items: flex-end; }
    .cb-modal__dialog { max-width: none; max-height: 92vh; }
    .cb-modal__header { padding: 20px var(--container-padding-mobile); }
    .cb-modal__body { padding: 20px var(--container-padding-mobile); }
    .cb-modal__footer {
        flex-direction: column;
        align-items: stretch;
        padding: 18px var(--container-padding-mobile);
    }
    .cb-modal__actions { flex-direction: column; align-self: stretch; }
    .cb-modal__actions .btn { width: 100%; }
    .cb-modal__links { align-self: center; }
}


/* === components/project-card.css === */
/* Project Cards (Listings) */
.project-card {
    display: block; background: var(--color-white);
    overflow: hidden; box-shadow: 0 0 5px rgba(0,0,0,0.25);
    transition: box-shadow 0.3s, transform 0.3s;
}
.project-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); transform: translateY(-3px); }
.project-card__image {
    display: flex; width: 100%; min-height: 364px; max-height: 364px;
    overflow: hidden; justify-content: center; align-items: center;
}
.project-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.project-card:hover .project-card__image img { transform: scale(1.05); }
.project-card__info { padding: 20px; }
.project-card__location { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); }
.project-card__title { font-size: 21.6px; font-weight: 400; margin: 8px 0; color: var(--color-heading); font-family: var(--font-heading); }
.project-card__meta { font-size: 14.4px; color: var(--color-text-light); }

/* Meldung, wenn die Filter keinen Treffer lassen. */
.project-grid__leer {
    margin: 10px auto 50px;
    max-width: 1200px;
    padding: 0 var(--container-padding);
    font-size: 18px;
    font-weight: 300;
    color: #555;
    text-align: center;
}
@media (max-width: 768px) {
    .project-grid__leer { padding: 0 20px; font-size: 16px; }
}


/* === components/homepage-hero.css === */
/*
 * Der Hero der Startseite liegt jetzt in components/hero.css, gemeinsam mit dem
 * der Listen- und Projektseiten. Diese Datei ist dadurch leer geworden; sie
 * kann aus build/assets.js und dem Verzeichnis genommen werden.
 */


/* === components/category-cards.css === */
/* Category Cards */
.category-cards-section {
    padding: 15px 0 0;
}
.category-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 20px;
}
/* Beide Reihen stehen jetzt in einem Abschnitt untereinander — ohne diese
   Zeile klebt die zweite Reihe an der ersten, weil gap nur innerhalb eines
   Gitters wirkt. */
.category-cards-grid + .category-cards-grid { margin-top: 32px; }
.category-card {
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,0.25);
    transition: box-shadow 0.3s;
}
.category-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.category-card__image {
    width: 100%;
    overflow: hidden;
}
.category-card__image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s;
}
.category-card:hover .category-card__image img {
    transform: scale(1.05);
}
.category-card__text {
    padding: 18px 0 17px;
    text-align: center;
}
.category-card__title {
    font-size: 19.8px;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    margin: 0;
    line-height: 28.8px;
    font-family: var(--font-heading);
}
.category-card__desc {
    font-size: 16.2px;
    font-weight: 300;
    color: #000;
    margin: -3px 0 0;
    line-height: 25.92px;
}

/*
 * Auf dem grossen Schirm stehen drei Kacheln ueber und drei unter den
 * Ergebnissen. Im Quelltext liegen beide Abschnitte dahinter — das ist die
 * Reihenfolge des Telefons und zugleich die, in der Suchmaschinen lesen.
 * Verschoben wird nur die Anzeige.
 */
@media (min-width: 769px) {
    .homepage { display: flex; flex-direction: column; }
    .homepage > .homepage-hero { order: 1; }
    .homepage > .category-cards-section--oben { order: 2; }
    .homepage > .search-section { order: 3; }
    .homepage > * { order: 4; }
}


/* === components/kategorie-liste.css === */
/*
 * Kategorien als schmale Zeilen — die Fassung fuers Handy.
 *
 * Nachgebaut nach Messung am Original (newestepona.com, 375 Pixel Fenster),
 * nicht nach Augenmass:
 *
 *   Zeile          x=0, Breite 375, Hoehe 94 — randlos, keine Seitenpolsterung
 *   Bild           94x94, buendig links
 *   Textspalte     94 bis 281, also die Haelfte der Breite
 *   Pfeilspalte    281 bis 375
 *   Ueberschrift   Roboto Condensed 19.8px/28.8px, Versalien, Gewicht 400
 *   Beschreibung   Roboto 16.2px/25.92px, Gewicht 300
 *   Hintergrund    #f5f5f5, dazwischen 3 Pixel weiss
 *
 * Auf dem grossen Schirm zeigt die Vorlage stattdessen die breiten Kacheln;
 * Elementor blendete die Zeilen ab 768 Pixeln aus, hier steht dieselbe Grenze.
 */
.kategorie-liste { display: none; }

.kategorie-zeile {
    display: flex;
    align-items: stretch;
    background: #f5f5f5;
    margin-bottom: 3px;
    text-decoration: none;
    color: inherit;
    min-height: 94px;
}

.kategorie-zeile__bild {
    flex: 0 0 25.07%;
    display: block;
    line-height: 0;
    align-self: stretch;
}
.kategorie-zeile__bild img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.kategorie-zeile__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 10px 8px 15px;
    min-width: 0;
}
.kategorie-zeile__titel {
    display: block;
    font-family: var(--font-heading);
    font-size: 19.8px;
    line-height: 28.8px;
    font-weight: 400;
    text-transform: uppercase;
    color: #202732;
}
.kategorie-zeile__satz {
    display: block;
    font-family: var(--font-body);
    font-size: 16.2px;
    line-height: 25.92px;
    font-weight: 300;
    color: #202732;
}

/*
 * Der Pfeil sitzt im Original in einem grauen Kreis. Gezeichnet, nicht
 * geschrieben — ein Schriftzeichen haette auf iOS die Emoji-Schrift gezogen
 * und die Farbe ignoriert, dasselbe Problem wie beim Haken im Formular.
 */
.kategorie-zeile__pfeil {
    flex: 0 0 25.07%;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kategorie-zeile__pfeil::before {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #cccccc;
    -webkit-mask: none;
    mask: none;
    background-image: var(--pfeil-rechts-hell);
    background-repeat: no-repeat;
    background-position: 53% center;
    background-size: 10px 17px;
}

/* Die Zeile "Alle Projekte anzeigen" traegt kein Bild. */
.kategorie-zeile--alle { min-height: 60px; margin-top: 12px; }
.kategorie-zeile--alle .kategorie-zeile__text { padding-left: 20px; }

@media (max-width: 768px) {
    .kategorie-liste { display: block; }
    .category-cards-section { display: none; }
}


/* === components/menue-mobil.css === */
/*
 * Mobile Navigation.
 *
 * Unter 768 Pixeln wird .site-header__center ausgeblendet — im Nachbau blieb
 * damit im Kopf nur noch Logo und Sprachwaehler, und es gab keinen Weg mehr
 * ins Menue. Der Knopf holt das nach.
 *
 * Der Sprachwaehler war ausserdem 173 Pixel breit und schob sich auf schmalen
 * Geraeten ueber das Logo. Mobil wird er schmaler und ruecht neben den Knopf.
 */
.menue-knopf {
    display: none;
    background: none;
    border: none;
    padding: 10px 0 10px 14px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
}
.menue-knopf span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: transform 0.25s, opacity 0.2s;
}
.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menue-mobil {
    display: none;
    position: fixed;
    /* Ueber den ganzen Schirm. Vorher begann es unter der Kopfzeile, dadurch
       blieb oben ein Streifen der Seite stehen und das Kreuz sass ausserhalb
       der schwarzen Flaeche. */
    inset: 0;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, 0.97);
    padding: 0 20px 40px;
}

/* Eigene Kopfzeile: Sprachwahl links, Kreuz rechts, auf Hoehe der Seitenkopfzeile. */
.menue-mobil__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--header-height);
    padding: 10px 0;
}
.menue-mobil__kopf .nav-lang { padding: 0; flex: 0 0 auto; }
.menue-mobil__zu {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}
.menue-mobil__zu:hover { color: var(--color-gold-light); }
.menue-mobil[hidden] { display: none; }
.menue-mobil.ist-offen { display: block; }

.menue-mobil a {
    display: block;
    padding: 13px 0;
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.menue-mobil a:hover,
.menue-mobil a:focus { color: var(--color-gold-light); }

.menue-mobil__gruppe {
    display: block;
    padding: 22px 0 6px;
    color: var(--color-gold);
    font-family: var(--font-heading);
    /* Vier Pixel groesser als die Eintraege darunter — auf Ansage. */
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.menue-mobil__trenner { display: block; height: 18px; }

@media (max-width: 768px) {
    .menue-knopf { display: flex; }

    /*
     * Der Sprachwaehler wandert ins Menue. Im Kopf war er 173 Pixel breit und
     * drueckte das Logo zusammen — gemessen am Original steht dort ein Logo
     * von 200 Pixeln bei 24 Pixeln Abstand, unverkleinert. Das Original ist
     * einsprachig und hat den Waehler gar nicht; ihn ins Menue zu legen ist
     * der einzige Platz, an dem er keine Ecke des Kopfes kostet.
     */
    .site-header__right .nav-lang { display: none; }
    /* 20 statt 24: derselbe Satzspiegel wie der Inhalt und die Fusszeile. */
    .site-header__container { padding: 0 var(--container-padding); }
    /* Nur die Breite vorgeben. Eine feste Hoehe daneben staucht das Logo,
       sobald die Breite nicht passt: der Kopfbereich gibt der Spalte hier 171
       Pixel, max-width kappt die 200 darauf — und die Hoehe blieb bei 45. */
    .site-logo img { width: 200px; height: auto; }
}

/*
 * Der Sprachwaehler in der Kopfzeile des Menues: schwarz mit weisser Schrift,
 * damit er sich in die dunkle Flaeche einfuegt statt als helles Feld
 * herauszustechen. Der Pfeil ist dieselbe Zeichnung wie sonst, nur in Weiss.
 */
.menue-mobil .lang-switcher {
    width: 200px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"), none;
    background-repeat: no-repeat, no-repeat;
    background-position: right 12px center, 0 0;
    background-size: 12px 7px, auto;
}
.menue-mobil .lang-switcher option { color: #fff; background: #000; }

/* Aufgeklappt bleibt die Seite stehen, statt hinter dem Menue zu scrollen. */
body.menue-offen { overflow: hidden; }

/*
 * Die Eintraege einer Gruppe stehen zweispaltig, die Gruppenueberschrift laeuft
 * ueber beide Spalten. Der laengste Eintrag ("Golf Residences") braucht rund
 * 120 Pixel; bei 340 Pixeln Fensterbreite hat eine Spalte noch 138. Darunter
 * bleibt es einspaltig.
 */
@media (min-width: 340px) and (max-width: 768px) {
    .menue-mobil {
        display: none;
    }
    .menue-mobil.ist-offen {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
        align-content: start;
    }
    .menue-mobil__kopf,
    .menue-mobil__gruppe,
    .menue-mobil__trenner { grid-column: 1 / -1; }
}


/* === components/search-section.css === */
/* Search Section + Project Grid */
.search-section {
    padding: 100px 0 100px;
    max-width: 1220px;
    margin: 0 auto;
    text-align: center;
}
.search-section h2 {
    font-size: var(--schrift-abschnitt);
    font-weight: 300;
    font-family: var(--font-heading);
    color: #202732;
    margin: 0 0 12px;
}
.search-section__subtitle {
    font-size: 18px;
    font-weight: 300;
    color: #000;
    margin: 0 0 40px;
}

/* Project Grid */
.project-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
    text-align: left;
}

/* Project Card */
.project-grid-card {
    width: 33.333%;
    padding: 10px;
    display: block;
}
.project-grid-card__inner {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,0.25);
    transition: box-shadow 0.3s, transform 0.3s;
    background: #fff;
}
.project-grid-card:hover .project-grid-card__inner {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transform: translateY(-3px);
}

/* Card Image */
.project-grid-card__image {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.project-grid-card__image img {
    width: 100%;
    height: 236px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.project-grid-card:hover .project-grid-card__image img {
    transform: scale(1.05);
}

/* Location Badge */
.project-grid-card__badge {
    position: absolute;
    top: 215px;
    left: 50%;
    transform: translateX(-50%);
    background: #AA8D70;
    color: #fff;
    font-size: 11.7px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 3px 10px;
    border: 1px solid #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.39);
    white-space: nowrap;
    z-index: 5;
}

/* Card Text Area */
.project-grid-card__info {
    padding: 18px 15px 17px;
    background: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
}
.project-grid-card__title {
    font-size: 19.8px;
    font-weight: 400;
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: #000;
    line-height: 28.8px;
    margin: 0;
}
.project-grid-card__meta {
    font-size: 16.2px;
    font-weight: 300;
    color: #000;
    line-height: 25.92px;
    margin: -3px 0 0;
}

/* Project Card Ribbon/Banderole */
.project-grid-card__ribbon {
    position: absolute;
    top: 30px;
    right: -50px;
    width: 202px;
    height: 32px;
    background: #AA8D70;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 28.8px;
    padding: 2px 60px 1px;
    transform: rotate(40deg);
    z-index: 4;
}

/* Load More Button */
.project-grid__load-more {
    display: block;
    width: 100%;
    text-align: center;
    padding: 30px 0;
}
.project-grid__load-more button {
    background: var(--color-gold);
    color: #fff;
    border: none;
    padding: 12px 40px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}
.project-grid__load-more button:hover {
    background: var(--color-heading);
}

/* 2-column grid variant (for resales, fewer items) */
.project-grid.grid-2col .project-grid-card {
    width: 50%;
}
.project-grid.grid-2col .project-grid-card__image img {
    height: 360px;
}
.project-grid.grid-2col .project-grid-card__badge {
    top: 337px;
}

/* === components/listing-hero.css === */
/*
 * Was auf Listenseiten unter dem Titelbild steht.
 *
 * Der Hero selbst liegt in components/hero.css — gemeinsam mit dem der
 * Startseite und der Projektseiten, weil es derselbe Aufbau ist.
 */

/* Listing Intro — element inside search-section, not a frame */
.search-section > h2 {
    font-size: var(--schrift-abschnitt);
    font-weight: 300;
    font-family: var(--font-heading);
    color: #202732;
    margin: 0 0 16px;
}
.search-section__subtitle {
    font-size: 18px;
    font-weight: 300;
    color: #000;
    line-height: 1.7;
    margin: 0 auto 40px;
}

/* Listing Page Content (below grid) */
.listing-content {
    /* 900 statt 1200: bei voller Satzspiegelbreite laufen ueber 130 Zeichen in
       eine Zeile, und das Auge verliert beim Ruecksprung die naechste. */
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--container-padding) 100px;
}
.listing-content h2 {
    font-size: var(--schrift-untertitel);
    font-weight: 300;
    font-family: var(--font-heading);
    color: #202732;
    margin: 40px 0 16px;
    line-height: 1.2;
}
.listing-content h2:first-child {
    margin-top: 0;
}
.listing-content h3 {
    font-size: 24px;
    font-weight: 400;
    font-family: var(--font-heading);
    color: #202732;
    margin: 30px 0 12px;
}
.listing-content p {
    font-size: 16.2px;
    font-weight: 300;
    line-height: 1.7;
    color: #333;
    margin: 0 0 16px;
}
.listing-content ul, .listing-content ol {
    margin: 0 0 16px;
    padding-left: 24px;
}
.listing-content li {
    font-size: 16.2px;
    font-weight: 300;
    line-height: 1.7;
    color: #333;
    margin: 0 0 8px;
}
.listing-content a { color: var(--color-gold); }
.listing-content a:hover { color: var(--color-gold-hover); }
.listing-content strong { font-weight: 600; }

/* Listing FAQ spacing — reuses .project-faqs styles */
.listing-content .project-faqs {
    margin-top: 100px;
    border-top: 1px solid var(--color-border);
    padding: 100px 0 0;
    max-width: none;
}
.listing-content .project-faqs h2 {
    font-size: var(--schrift-untertitel);
    text-align: left;
}


/* === components/filter-bar.css === */
/* Filter Bar */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Abstand zwischen Suchfeld und Feldergruppe — die sind direkte Kinder. */
    gap: 18px;
    max-width: 1220px;
    margin: 0 auto 30px;
    padding: 0 10px;
}
/*
 * Die Felder liegen in einem eigenen Rahmen, weil der auf dem Handy zur
 * Vollbildflaeche wird. Auf dem grossen Schirm darf dieser Rahmen die Reihe
 * nicht brechen — ohne diese Zeile standen Filter und Sortierung
 * untereinander statt nebeneinander.
 */
.filter-bar__felder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1 1 auto;
    gap: 18px;
}
.filter-bar__filters {
    display: flex;
    gap: 18px;
}
.filter-bar__sort {
    display: flex;
    align-items: center;
}
/*
 * Helle Felder mit dunkler Schrift und beigem Dreieck. Dunkel war einen
 * Versuch wert, wirkte neben den hellen Kacheln aber schwer.
 */
.filter-bar select {
    appearance: none;
    -webkit-appearance: none;
    width: 170px;
    /* 46 statt 38 Pixel hoch und mehr Luft innen — mit den engen Werten sassen
       Schrift und Dreieck gequetscht im Feld. Dieselbe Hoehe wie das Suchfeld
       auf dem Telefon. */
    height: 46px;
    background-color: #fff;
    border: 1px solid #bfbfbf;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--color-text);
    padding: 4px 40px 3px 18px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23aa8d70'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px 6px;
    transition: border-color 0.2s;
}
.filter-bar select option { color: var(--color-text); background: #fff; }
.filter-bar__sort select {
    width: 248px;
}

/*
 * Mobil bricht die Leiste um.
 *
 * Drei Filter zu 150 Pixeln plus die Sortierung zu 248 ergeben 764 Pixel in
 * einer Zeile. Auf einem 375er Display ragte die Leiste 389 Pixel hinaus und
 * machte die ganze Startseite seitlich verschiebbar. Unter 768 Pixeln stehen
 * die vier Auswahlfelder deshalb in einem 2x2-Raster ueber die volle Breite.
 */
@media (max-width: 768px) {
    .filter-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 0 20px;
    }
    .filter-bar__filters {
        display: contents;
    }
    .filter-bar__sort {
        display: block;
    }
    .filter-bar select,
    .filter-bar__sort select {
        width: 100%;
    }
}

/* Auf sehr schmalen Geraeten wird auch zweispaltig zu eng: der laengste
   Eintrag der Sortierung braucht mehr Platz als die halbe Breite. */
@media (max-width: 420px) {
    .filter-bar { grid-template-columns: 1fr; }
}

/*
 * Suchfeld und Filterknopf — nur auf dem Telefon.
 *
 * Vorher standen dort vier Auswahlfelder untereinander, jedes schmaler als der
 * Satzspiegel. Jetzt eine Zeile: links suchen, rechts filtern. Die Felder
 * ziehen in eine Vollbildflaeche um, die sich wie das Menue oeffnet.
 */
/*
 * Suchfeld und Filterknopf sind direkte Kinder der Leiste. Auf dem grossen
 * Schirm steht das Feld dadurch vor den Auswahlfeldern, der Knopf ist dort
 * ausgeblendet.
 */
.filter-knopf { display: none; }
.filter-suche {
    flex: 0 0 auto;
    /* Breit genug fuer "Search project or location" samt Lupe und Innenabstand
       — bei 230 Pixeln brach der Platzhalter nach "loca" ab. */
    width: 290px;
    height: 46px;
    /* Links Platz fuer die Lupe. */
    padding: 0 18px 0 44px;
    border: 1px solid #bfbfbf;
    border-radius: 0;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.8' fill='none' stroke='%23aa8d70' stroke-width='1.6'/%3E%3Cpath d='M10.4 10.4 L14.6 14.6' stroke='%23aa8d70' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;
    background-size: 16px 16px;
    color: var(--color-text);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s;
}
.filter-suche::placeholder { color: #6b7079; opacity: 1; }
.filter-suche:focus,
.filter-bar select:focus { outline: none; border-color: var(--color-gold); }
.filter-flaeche__kopf,
.filter-flaeche__fuss { display: none; }

@media (max-width: 768px) {
    .filter-bar {
        display: block;
        padding: 0;
        margin-bottom: 24px;
    }

    .filter-bar {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: stretch;
    }
    .filter-knopf { display: inline-flex; }
    .filter-suche {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        height: 46px;
        padding: 0 14px 0 42px;
        /* Kraeftiger Rahmen in der Farbe des Knopfes daneben. Mit dem hellen
           Grau davor verschwamm das Feld auf weissem Grund und wirkte
           ausgegraut, als waere es gesperrt. */
        border: 1px solid var(--color-heading);
        border-radius: 0;
        /* Nur die Farbe setzen, nicht "background" — das wuerde die Lupe
           mitloeschen, die als Hintergrundbild darin sitzt. */
        background-color: #fff;
        background-position: left 15px center;
        font-family: var(--font-body);
        font-size: 16px;      /* nicht kleiner: iOS zoomt sonst beim Tippen */
        font-weight: 300;
        color: #000;
        appearance: none;
        -webkit-appearance: none;
    }
    /* Manche Browser setzen den Platzhalter von sich aus halbtransparent —
       daher opacity ausdruecklich auf 1. */
    .filter-suche::placeholder { color: #6b7079; opacity: 1; }
    .filter-suche:focus { outline: none; border-color: var(--color-gold); }

    .filter-knopf {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 46px;
        padding: 0 20px;
        border: none;
        background: var(--color-heading);
        color: #fff;
        font-family: var(--font-heading);
        font-size: 16px;
        font-weight: 400;
        text-transform: uppercase;
        cursor: pointer;
    }
    .filter-knopf__zahl {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 10px;
        background: var(--color-gold);
        color: #fff;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 400;
    }
    .filter-knopf__zahl[hidden] { display: none; }

    /* ── Die Vollbildflaeche ───────────────────────────────────────────── */
    .filter-bar__felder {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        /* Dunkel wie das Menue: schwarze Flaeche, weisse Schrift, Beige als
           Akzent. */
        background: rgba(0, 0, 0, 0.97);
        color: #fff;
        padding: 0 20px 20px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .filter-bar__felder.ist-offen { display: block; }
    body.filter-offen { overflow: hidden; }

    .filter-flaeche__kopf {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--header-height);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        margin-bottom: 24px;
    }
    .filter-flaeche__titel {
        font-family: var(--font-heading);
        font-size: 24px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-gold);
    }
    .filter-flaeche__zu {
        width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center;
        background: none; border: none;
        color: #fff; font-size: 34px; line-height: 1; cursor: pointer;
    }
    .filter-flaeche__zu:hover { color: var(--color-gold-light); }

    /* In der Flaeche steht jedes Feld auf voller Breite untereinander. */
    .filter-bar__filters,
    .filter-bar__sort { display: block; }
    .filter-bar__felder select {
        width: 100%;
        height: 52px;
        margin-bottom: 14px;
        font-size: 16px;
        color: #fff;
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23fff'/%3E%3C/svg%3E");
        background-position: right 16px center;
    }
    .filter-bar__felder select:focus { border-color: var(--color-gold); }
    /* Die aufgeklappte Liste kommt vom System und muss eigens gefaerbt werden. */
    .filter-bar__felder select option { color: #fff; background: #111; }

    .filter-flaeche__fuss {
        display: flex;
        gap: 12px;
        align-items: stretch;
        margin-top: 26px;
    }
    .filter-flaeche__leeren {
        flex: 0 0 auto;
        padding: 0 20px;
        height: 52px;
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.35);
        color: #fff;
        font-family: var(--font-body);
        font-size: 16px;
        cursor: pointer;
    }
    .filter-flaeche__leeren:hover { border-color: var(--color-gold); color: var(--color-gold-light); }
    .filter-flaeche__zeigen {
        flex: 1 1 auto;
        height: 52px;
        background: var(--color-gold);
        border: none;
        color: #fff;
        font-family: var(--font-heading);
        font-size: 17px;
        font-weight: 400;
        text-transform: uppercase;
        cursor: pointer;
    }
    .filter-flaeche__zeigen:hover { background: var(--color-gold-hover); }
}


/* === components/info-text.css === */
/* Info Text (collapsible content in footer) */
.info-text__toggle {
    font-size: 12px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    color: var(--color-gold);
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
}
.info-text__toggle:hover {
    color: var(--color-gold);
}
.info-text__content {
    display: none;
    background: #fff;
}
.info-text__content.is-open {
    display: block;
}
.info-text__content-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px var(--container-padding);
}
.info-text__content h1 {
    font-size: 28.8px;
    font-weight: 300;
    font-family: var(--font-heading);
    color: #202732;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.info-text__content h2 {
    font-size: 21.6px;
    font-weight: 400;
    font-family: var(--font-heading);
    color: #202732;
    margin: 24px 0 10px;
}
.info-text__content h3 {
    font-size: 19.8px;
    font-weight: 400;
    font-family: var(--font-heading);
    color: #202732;
    margin: 20px 0 8px;
}
.info-text__content p {
    font-size: 16.2px;
    font-weight: 300;
    line-height: 1.7;
    color: #333;
    margin: 0 0 14px;
}
.info-text__content a { color: var(--color-gold); }
.info-text__content a:hover { color: var(--color-gold-hover); }


/* === components/blog.css === */
/* Blog Index */
.blog-grid-section { max-width: 1200px; margin: 0 auto; padding: 100px var(--container-padding); }
.blog-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Blog Card */
.blog-card {
    background: var(--color-white); overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,0.25);
    transition: box-shadow 0.3s, transform 0.3s;
}
.blog-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); transform: translateY(-3px); }
.blog-card a { text-decoration: none; color: inherit; display: block; }

.blog-card__image { width: 100%; height: 220px; overflow: hidden; background: #e8e8e8; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.blog-card:hover .blog-card__image img { transform: scale(1.05); }
.blog-card__image--placeholder { background: linear-gradient(135deg, #202732 0%, #3a4555 100%); }

.blog-card__body { padding: 30px; }
.blog-card__title {
    font-family: var(--font-heading); font-size: 21.6px; font-weight: 400;
    color: #202732; margin: 0 0 12px; line-height: 1.25;
}
.blog-card__excerpt {
    font-family: var(--font-body); font-size: 16px; font-weight: 300;
    line-height: 1.6; color: #333; margin: 0 0 12px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__more {
    display: block; font-family: var(--font-body); font-size: 16px;
    font-weight: 300; color: var(--color-gold); margin-bottom: 14px;
}
.blog-card:hover .blog-card__more { color: var(--color-gold-hover); }
.blog-card__date {
    display: block; font-family: var(--font-body); font-size: 14px;
    font-weight: 300; color: var(--color-text-light);
}

/* Blog Post */
.blog-post-page { margin: 0 auto; }

/* Volle Breite wie im Original, Text in einer 1265px-Spalte */
.blog-post__hero {
    width: 100%; aspect-ratio: 1425 / 579;
    position: relative; overflow: hidden;
}
.blog-post__hero img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
}
/* Satzspiegel wie im Original: 900px. Begrenzt werden die Textbloecke,
   nicht der Artikel — so kann die Galerie voll ausbrechen. */
.blog-post { margin: 0 auto; }
.blog-post__header,
.blog-post__block { max-width: 940px; margin: 0 auto; padding: 0 20px; }

.blog-post__header { padding: 50px 0 20px; }
.blog-post__meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; font-size: 14px; color: var(--color-text-muted);
    font-family: 'Roboto', sans-serif;
}
/*
 * Verfasser und Datum stehen rechts in der Kopfzeile, durch einen Punkt
 * getrennt. Zusammen in einem Element, weil sie dieselbe Frage beantworten:
 * von wem und von wann ist der Text.
 */
.blog-post__autor {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.blog-post__autor-name { color: var(--color-text-light); }
.blog-post__autor-name::after {
    content: '·';
    margin-left: 10px;
    color: var(--color-text-muted);
}

@media (max-width: 600px) {
    /* Auf dem Telefon reicht die Breite nicht fuer Zurueck-Verweis, Name und
       Datum in einer Zeile — dann untereinander, links ausgerichtet. */
    .blog-post__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.blog-post__back {
    color: var(--color-gold); text-decoration: none; font-weight: 400;
    transition: color 0.2s;
}
.blog-post__back:hover { color: #8a7058; }
.blog-post__header h1 {
    font-family: var(--font-heading); font-size: 48px; font-weight: 300;
    text-transform: none;
    color: #202732; margin: 0 0 20px; line-height: 1.2;
}

.blog-post__note {
    background: #f7f3ee; border-left: 4px solid var(--color-gold);
    padding: 16px 20px; margin-bottom: 30px; border-radius: 0 4px 4px 0;
}
.blog-post__note p {
    margin: 0; font-size: 15px; font-style: italic; color: #555;
    font-family: 'Roboto', sans-serif; line-height: 1.5;
}

.blog-post__content {
    font-family: var(--font-body); font-size: 18px;
    line-height: 1.6; color: #000; font-weight: 300;
}
.blog-post__content h2 {
    font-family: var(--font-heading); font-size: var(--schrift-untertitel); font-weight: 300;
    color: var(--color-gold); margin: 30px 0 18px; line-height: 1.2;
}
.blog-post__content h3 {
    font-family: var(--font-heading); font-size: 22px; font-weight: 400;
    color: #202732; margin: 20px 0 11px; line-height: 1.2;
}
.blog-post__content p { margin: 0 0 18px; }
.blog-post__content a:not(.sell-btn) { color: var(--color-gold); text-decoration: none; }
.blog-post__content a:not(.sell-btn):hover { color: #8a7058; }
.blog-post__content ul, .blog-post__content ol { margin: 0 0 16px; padding-left: 24px; }
.blog-post__content li { margin-bottom: 6px; }
.blog-post__content img { max-width: 100%; height: auto; margin: 20px 0; }
.blog-post__content blockquote {
    border-left: 3px solid var(--color-gold); margin: 20px 0;
    padding: 10px 20px; font-style: italic; color: #555;
}

/* Exposé-Schaltflaeche nach jedem Textblock — nutzt den dunklen Button
   der Verkaufsseite (.sell-btn) */
.blog-post__expose { padding: 12px 0 40px; }

.blog-post__gallery { margin: 10px 0 50px; }

/* Responsive */
@media (max-width: 900px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; gap: 20px; }
    .blog-hero { padding: 60px 20px 40px; }
    .blog-hero h1 { font-size: 28px; }
    .blog-post__header h1 { font-size: 30px; }
    .blog-post__content { font-size: 16px; }
    .blog-post__content h2 { font-size: 26px; }
    .blog-post__hero { height: 240px; }
}

/* Verwandte Beitraege am Fuss des Artikels */
.blog-related { border-top: 1px solid var(--color-border); margin-top: 20px; }
.blog-related__inner {
    /* volle Bildschirmbreite, nicht auf den Satzspiegel begrenzt */
    max-width: none; margin: 0; padding: 100px var(--container-padding);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.blog-related__item { text-decoration: none; display: block; }
.blog-related__image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 18px; }
.blog-related__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.blog-related__item:hover .blog-related__image img { transform: scale(1.05); }
.blog-related__title {
    font-family: var(--font-heading); font-size: 27px; font-weight: 300;
    color: var(--color-gold); margin: 0 0 8px; line-height: 1.2;
}
.blog-related__item:hover .blog-related__title { color: var(--color-gold-hover); }
.blog-related__date {
    font-family: var(--font-body); font-size: 14px; font-weight: 300;
    color: var(--color-text-light); margin: 0 0 10px;
}
.blog-related__excerpt {
    font-family: var(--font-body); font-size: 16px; font-weight: 300;
    line-height: 1.6; color: #000; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 900px) { .blog-related__inner { grid-template-columns: 1fr; gap: 30px; } }

/* Standortbild des Projekts als Trenner zwischen den letzten beiden Bloecken.
   Linksbuendig auf der Textkante, wie im Original. */
.blog-post__divider {
    max-width: 940px; margin: 0 auto 50px; padding: 0 20px;
    text-align: left;
}
.blog-post__divider img { max-width: 100%; height: auto; display: inline-block; }


/* === layouts/static-page.css === */
/* Static Page (Contact, Blog, Resales, Imprint) */
.static-hero {
    padding: 160px var(--container-padding) 60px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}
.static-hero h1 {
    font-size: var(--schrift-abschnitt);
    font-weight: 300;
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: #202732;
    margin: 0;
    line-height: 1.1;
}
.static-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-padding) 60px;
}
.static-content h2 {
    font-size: var(--schrift-untertitel);
    font-weight: 300;
    font-family: var(--font-heading);
    color: #202732;
    margin: 40px 0 16px;
}
.static-content p {
    font-size: 16.2px;
    font-weight: 300;
    line-height: 1.7;
    color: #333;
    margin: 0 0 16px;
}

/* listing-content nested inside static-content: no double horizontal padding */
.static-content .listing-content {
    padding: 100px 0;
}
/* About Estepona */
.about-video { margin: 60px 0; }
.about-video__frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.about-video__frame iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%; border: 0;
}
.about-video figcaption {
    margin-top: 14px;
    font-size: 16.2px; font-weight: 300; color: var(--color-text-light);
    text-align: center;
}
.static-content h5 {
    font-size: 27px; font-weight: 300; font-family: var(--font-heading);
    color: #202732; margin: 60px 0 24px;
}
.about-advantages {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 40px;
}
.about-advantages li {
    font-size: 16.2px; font-weight: 300; color: #333;
    padding-left: 26px; position: relative;
}
.about-advantages li::before {
    content: "✓"; position: absolute; left: 0; color: var(--color-gold);
}
.about-facts {
    margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 40px;
}
.about-facts > div {
    display: flex; justify-content: space-between; gap: 20px;
    border-bottom: 1px solid var(--color-border); padding-bottom: 8px;
}
.about-facts dt { font-size: 16.2px; font-weight: 400; color: #202732; }
.about-facts dd { margin: 0; font-size: 16.2px; font-weight: 300; color: #333; }

@media (max-width: 768px) {
    .about-advantages, .about-facts { grid-template-columns: 1fr; }
}


/* === layouts/sell-property.css === */
/* Sell your Property Page */
.sell-stats {
    padding: 60px var(--container-padding);
    max-width: 1200px;
    margin: 0 auto;
}
.sell-stats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}
.sell-stats__number {
    display: block;
    font-size: 90px;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
    color: #000;
    line-height: 1;
}
.sell-stats__label {
    display: block;
    font-size: 18px;
    font-weight: 300;
    color: #000;
    margin-top: 8px;
}

/* Service sections */
.sell-service {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #000;
}
/* Als CSS-Hintergrund kann der Browser keine Groesse waehlen — deshalb liegt
   hier ein echtes <img> mit srcset hinter dem Text. */
.sell-service__image,
.sell-packages__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.sell-service__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
    align-items: center;
}
.sell-service__text {
    padding: 0;
}
.sell-service__spacer {}
.sell-service__text h2 {
    font-size: var(--schrift-abschnitt);
    font-weight: 300;
    font-family: var(--font-heading);
    color: #202732;
    margin: 0 0 30px;
    line-height: 60.48px;
}
.sell-service__text p {
    font-size: 18px;
    font-weight: 300;
    line-height: 28.8px;
    color: #000;
    margin: 0 0 18px;
}
.sell-service__text .btn {
    display: inline-flex;
    align-items: center;
    background: #202732;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    padding: 7.2px 18px;
    border-radius: 3px;
    border: none;
    margin-top: 10px;
    width: auto;
}
.sell-service__text .btn:hover {
    background: var(--color-gold);
}

/* Packages section */
.sell-packages {
    position: relative;
    overflow: hidden;
    padding: 80px var(--container-padding);
    border-bottom: 1px solid #000;
}


/* Full-width breakout from static-content container */
.static-content .sell-stats,
.static-content .sell-service,
.static-content .sell-packages {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.static-content .sell-stats {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    left: auto;
    right: auto;
    width: auto;
}

/*
 * position und z-index sind hier nicht Zierde, sondern der Grund, dass man den
 * Inhalt ueberhaupt sieht: das Hintergrundbild darueber ist absolut gesetzt,
 * und ein positioniertes Element malt ueber Inhalt, der nicht positioniert
 * ist — auch bei z-index: 0. Ohne diese zwei Zeilen zeigt der Rahmen nur das
 * Bild, und Ueberschrift, Provisionsfrage und alle sechs Pakete verschwinden
 * dahinter. Der Dienstleistungsrahmen darueber hat es deshalb ebenfalls.
 */
.sell-packages__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
    text-align: center;
}
.sell-packages__inner h2 {
    font-size: var(--schrift-abschnitt);
    font-weight: 300;
    font-family: var(--font-heading);
    color: #fff;
    margin: 0 0 10px;
}
/*
 * Mit .static-content davor, nicht ohne: die Seite liegt in diesem Behaelter,
 * und dessen Regel .static-content p traegt Klasse plus Element. Eine Regel
 * aus nur einer Klasse verliert dagegen, egal wie weit hinten sie steht — die
 * beiden Absaetze standen deshalb in der dunklen Fliesstextfarbe auf dem
 * blauen Bild.
 */
.static-content .sell-packages__subtitle,
.sell-packages__subtitle {
    font-size: 25.2px;
    font-weight: 300;
    color: var(--color-gold);
    margin: 0 0 10px;
}
.sell-packages__inner h5 {
    font-size: 19.8px;
    font-weight: 400;
    color: #fff;
    margin: 0 0 20px;
    text-transform: uppercase;
}
.sell-packages__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.sell-packages__card {
    background: rgba(255,255,255,0.92);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 40px 30px;
    text-align: center;
}
.sell-packages__pct {
    display: block;
    font-size: 70px;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
    color: var(--color-gold);
    line-height: 1;
    margin-bottom: 15px;
}
.sell-packages__card h4 {
    font-size: 21.6px;
    font-weight: 400;
    font-family: var(--font-heading);
    color: #000;
    margin: 0 0 15px;
}
.sell-packages__card p {
    font-size: 18px;
    font-weight: 300;
    line-height: 28.8px;
    color: #000;
    margin: 0;
}
.static-content .sell-packages__note,
.sell-packages__note {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    margin: 30px 0 20px;
}
.sell-packages .sell-btn {
    margin-top: 10px;
    background: var(--color-gold);
}

@media (max-width: 768px) {
    .sell-stats__grid { grid-template-columns: 1fr; }
    .sell-stats__number { font-size: 60px; }
    .sell-service__inner { grid-template-columns: 1fr; padding: 40px 20px; }
    .sell-service__spacer { display: none; }
    .sell-packages__row { grid-template-columns: 1fr; }
    .sell-packages__inner { padding: 30px 20px; }
}
/* Sell page CTA button */
.sell-btn {
    display: inline-flex;
    align-items: center;
    background: #202732;
    color: #fff !important;
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    padding: 7.2px 18px;
    border-radius: 3px;
    margin-top: 10px;
    text-decoration: none;
    transition: background 0.2s;
}
.sell-btn:hover {
    background: var(--color-gold);
    color: #fff !important;
}

/* === responsive/responsive.css === */
/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .reasons-grid { grid-template-columns: repeat(2, 1fr); }
    .equipment-distances-inner { grid-template-columns: 1fr; gap: 40px; }
    .distances-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    /* wpMobPadding der alten Vorlage: 20px seitlich schon ab 768. */
    :root { --container-padding: var(--container-padding-mobile); }

    /*
     * Die Kopfzeile ist auf dem Handy 30 Prozent flacher: 70 statt 100 Pixel.
     * Die Hoehe steckt in --header-height, an ihr haengen auch das Menue und
     * die Kopfzeile der Filterflaeche — eine Zahl, drei Stellen richtig.
     */
    :root { --header-height: 70px; }
    .site-header__grid { grid-template-columns: 1fr 1fr; }
    .site-header__center { display: none; }
    /*
     * Projektseite auf dem Handy: Titelbild als Querformat-Streifen, darunter
     * ein weisser Block mit Titel, Ort und Eckdaten - so wie es die alte Seite
     * gemacht hat. Nachgemessen bei 390 Punkten Fensterbreite: Bild 375x338,
     * Titel 28,8 px zentriert, Ort 21,6 px, Eckdaten 18 px.
     *
     * Ueber dem Bild liegend, wie auf dem grossen Schirm, hatte das Band einen
     * 70vh hohen Bildbereich noetig - und dafuer wurde das Bild so weit
     * hochgerechnet, dass nichts mehr zu erkennen war.
     */
    .project-hero {
        --hero-hoehe: auto;
        /* Zeile "headlines": 60 oben, 20 seitlich. Unten mehr, auf Ansage. */
        --hero-abstand: 60px 20px 60px;
        --hero-deckkraft: 1;
    }
    .project-hero__image {
        position: static;
        width: 100%;
        /* Feste 300 Pixel, nachgemessen an der mobilen Vorlage auf einem
           iPhone. Vorher standen hier 338 - das war die Desktopvorlage mit
           min-height 40vh, die ein schmales Fenster ausgeliefert bekommt. */
        height: 300px;
        object-fit: cover;
    }
    .project-title-overlay { position: static; }
    /* Kein Hero-Titel mehr, sondern die Ueberschrift der Seite: feste Groesse
       statt der mitwachsenden des Titelbands. */
    .project-title-overlay h1 { font-size: 28.8px; }
    .project-title-overlay__location { font-size: 21.6px; }
    .project-title-overlay__meta { font-size: 18px; }

    /* Galerie vor die Einleitung, ohne das Markup umzustellen. */
    .project-page { display: flex; flex-direction: column; }
    .project-page > .project-hero { order: 1; }
    .project-page > .project-gallery { order: 2; }
    .project-page > .project-description { order: 3; }
    .project-page > * { order: 4; }

    .project-description,
    .project-description h2,
    .project-description__text,
    .project-description__text p { text-align: left; }

    .project-location h2 { text-align: left; }

    /*
     * Vertikale Abstaende je Abschnitt, nachgemessen an der mobilen Vorlage
     * (oben / seitlich / unten). Sie sind bewusst nicht einheitlich: Lage und
     * Ausstattung stehen luftiger als Einleitung und FAQ.
     */
    .project-gallery { padding: 0; }
    .project-description { padding: 50px 20px 60px; }
    .project-investment { padding: 60px 20px; }
    .project-location { padding: 70px 20px; }
    .project-faqs { padding: 60px 20px; }
    .equipment-distances-section { padding: 70px 20px; }

    /*
     * Was die Mobilvorlage in diesen beiden Zeilen nicht zeigt, nachgemessen
     * auf dem iPhone: die Einleitung hat dort kein Bild, und die Lage genau
     * eines — die Karte. Ortsfoto und Untertitel stehen nur auf dem grossen
     * Schirm. Ohne das ist die Seite auf dem Telefon 850 Pixel laenger als das
     * Original, ohne dass ein Besucher etwas davon haette.
     */
    .project-description__image { display: none; }
    .project-location__images { display: none; }
    .project-location__subtitle { display: none; }
    /* Mobil ist eine Seite ein Bild, also rastet jedes Bild ein. */
    .gallery__slide { flex: 0 0 100%; }
    .gallery__slide:nth-child(even) { scroll-snap-align: start; scroll-snap-stop: always; }
    .reasons-grid { grid-template-columns: 1fr; }
    .project-location__grid { grid-template-columns: 1fr; }
    .contact-section__inner { grid-template-columns: 1fr; }

    /*
     * Das Portraet liegt als Hintergrundbild in derselben Box wie der Text und
     * ist unten rechts verankert. Auf dem grossen Schirm ist die Spalte breit
     * genug, auf dem Handy legte es sich ueber Telefonnummer und
     * WhatsApp-Knopf.
     *
     * Wie auf der alten Seite: Text links, Foto rechts daneben. Dafuer wird das
     * Bild auf 140 Pixel Breite gebracht und der Text bekommt rechts so viel
     * Abstand, dass er nicht darunter laeuft.
     */
    .contact-section__left-bg {
        /*
         * Der Text laeuft ueber die volle Breite — kein Einruecken, keine
         * zweite Spalte. Das Foto liegt als Hintergrund dahinter, unten rechts.
         *
         * Es steht ein paar Pixel ueber die Kante hinaus, rechts wie unten, so
         * wie auf der alten Seite. Dafuer wird die Box um die 20 Pixel
         * Sektionsabstand nach rechts herausgezogen und bekommt sie als eigenen
         * Abstand zurueck, damit der Text stehen bleibt, wo er war.
         *
         * Der Abstand nach unten haelt den Text aus dem Gesicht: der
         * WhatsApp-Knopf ist das letzte Element, darunter beginnt das Foto.
         */
        margin-right: -20px;
        padding-right: 20px;
        padding-bottom: 105px;
        background-size: auto 260px;
        background-position: right -70px bottom -20px;
        min-height: 260px;
    }
    .equipment-list { grid-template-columns: 1fr; }
    /*
     * Auf dem Handy steht jedes Feld auf einer eigenen Zeile. Telefon und
     * E-Mail nebeneinander ergaben je 128 Pixel — zu schmal, um eine Nummer
     * oder Adresse beim Tippen zu sehen. Die alte Seite hat dort 340.
     */
    .form-row--3col,
    .form-row--2col { grid-template-columns: 1fr; }

    /*
     * Der dunkle Formularblock laeuft ueber die volle Breite und traegt seinen
     * Rand selbst. Vorher kamen 20 Pixel der Sektion und 40 des Blocks
     * zusammen, dadurch waren die Felder nur 270 statt 350 Pixel breit.
     */
    .contact-section__right {
        margin: 0 -20px;
        padding: 40px 20px;
    }
    /* Die Abstaende der Projektabschnitte stehen weiter oben einzeln — die
       frueheren 60px fuer alle waren geraten, die neuen sind gemessen. Hier
       bleibt nur der Kontaktbereich, den die Messung nicht erfasst hat. */
    /* Nur oben und an den Seiten. Die Kurzschreibweise setzte auch unten
       60px — sichtbar als Luft zwischen Formular und Trennlinie der
       Fusszeile, wo die Grundregel ausdruecklich 0 vorsieht. */
    .contact-section { padding: 60px 20px 0; }
    /* Homepage */
    /*
     * Mobil steht das weisse Band unter dem Bild statt darueber. Das Bild
     * bekommt dafuer eine feste Hoehe und laeuft im Fluss mit; der Rahmen
     * richtet sich nach seinem Inhalt. Absolut gesetzt bliebe die letzte Zeile
     * der Ueberschrift abgeschnitten.
     */
    /*
     * Der Schatten des Titelbands, fuer alle drei Heroes gemeinsam.
     *
     * Auf dem grossen Schirm schwebt das Band ueber einem hohen Bild und wirft
     * seinen Schatten nach oben. Auf dem Handy ist seine Unterkante die Grenze
     * zum weissen Grund darunter — also faellt er dort nach unten. Die Richtung
     * haengt an dieser Lage, nicht am Seitentyp, deshalb steht sie hier einmal.
     *
     * "overflow: visible" muss dazu: der Rahmen schneidet sonst genau an der
     * Kante ab, an der der Schatten anfangen soll. Und ohne eigene Stapelebene
     * malt der folgende Abschnitt seinen Hintergrund darueber.
     */
    .homepage-hero,
    .listing-hero,
    .project-hero {
        --hero-schatten: 0 4px 8px -3px rgba(0, 0, 0, 0.25);
        overflow: visible;
    }
    .homepage-hero__overlay,
    .listing-hero__overlay,
    .project-title-overlay { z-index: 2; }

    .homepage-hero {
        --hero-hoehe: auto;
        --hero-abstand: 32px 16px 26px;
        --hero-deckkraft: 1;
    }
    .homepage-hero__image { position: static; height: 250px; }

    /*
     * Listenseiten wie Startseite und Projektseiten: Bild oben im Fluss,
     * Titelblock darunter auf weissem Grund. Vorher lag das Band ueber einem
     * 400 bis 500 Pixel hohen Bild — damit gab es keine Kante, an der sich der
     * Abschnitt vom Inhalt darunter absetzt.
     */
    .listing-hero {
        --hero-hoehe: auto;
        --hero-abstand: 60px 20px 60px;
        --hero-deckkraft: 1;
    }
    .listing-hero__image {
        position: static;
        width: 100%;
        /* Wie die Startseite. */
        height: 250px;
        object-fit: cover;
    }
    .listing-hero__overlay { position: relative; }
    /* Im Fluss, aber eine Ebene hoeher: sonst malt der folgende weisse
       Abschnitt seinen Hintergrund ueber den Schatten des Bandes. */
    .homepage-hero__overlay { position: relative; z-index: 2; }
    .homepage-hero__overlay p { font-size: 18px; line-height: 28.8px; }
    .category-cards-grid { grid-template-columns: 1fr; }
    /* .project-grid ist ein Flexbox, kein Grid — grid-template-columns lief hier
       ins Leere und die Karten blieben bei 33.333%, also 87px auf einem 375er
       Display. Die Breite muss auf der Karte selbst zurueckgenommen werden. */
    .project-grid-card,
    .project-grid.grid-2col .project-grid-card { width: 50%; }
    .search-section { padding: 40px 20px; }

    /*
     * Auf dem Telefon geht es nach dem Titelbild direkt in die Suche.
     * Ueberschrift und Untertitel des Abschnitts kosten dort eine halbe
     * Bildschirmhoehe, bevor der Besucher das erste Angebot sieht — und wer
     * hier ankommt, kommt wegen der Angebote.
     *
     * Ausgenommen die Fehlerseite: sie nutzt dieselbe Vorlage, und bei ihr
     * stehen an dieser Stelle der Hinweis und die Erklaerung.
     */
    .homepage:not(.fehlerseite) > .search-section > h2,
    .homepage:not(.fehlerseite) > .search-section > .search-section__subtitle {
        display: none;
    }
}
@media (max-width: 480px) {
    /* Die 2col-Variante der Resales-Seite ist spezifischer als .project-grid-card
       allein — ohne sie hier stehen auf dem Handy zwei 140px-Kacheln nebeneinander. */
    .project-grid-card,
    .project-grid.grid-2col .project-grid-card { width: 100%; }

    /*
     * Die Karte selbst traegt auf dem grossen Schirm 10 Pixel Innenabstand als
     * Fuge zwischen den Spalten. Einspaltig gibt es keine Fuge, wohl aber den
     * Versatz: die sichtbare Karte lief von 30 bis 360, waehrend Suchfeld,
     * Ueberschrift und Filterknopf von 20 bis 370 laufen. Hier steht sie
     * deshalb randlos im Satzspiegel, der Abstand nach unten bleibt.
     */
    .project-grid-card { padding: 0 0 20px; }
    /* Kein 70vh mehr: der Hero der Projektseite ist auf dem Handy Bild plus
       Titelblock und richtet sich nach deren Hoehe. Mit der festen Hoehe lief
       jede Aenderung am Innenabstand ins Leere — sie fuellte nur den Rest auf,
       statt den Block wachsen zu lassen. */
    .brochure-link { width: 140px; height: 140px; right: 20px; top: 100px; }
    .brochure-link__label { font-size: 14px; }
    .brochure-link__cta { font-size: 11px; }
}

/* Listing hero responsive */
@media (max-width: 768px) {

}
@media (max-width: 480px) {

}