@charset "UTF-8";

/* ==========================================================================
   CruiseDreams by Johanna
   style.css

   Aufbau
   1.  Schrift
   2.  Designsystem
   3.  Grundlagen
   4.  Typografie und Links
   5.  Raster und Abschnitte
   6.  Knoepfe
   7.  Kopf und Navigation
   8.  Hero
   9.  Abschnitte der Startseite
   10. Aufruf
   11. Kontaktseite und Formular
   12. Fuss
   13. Schnellkontakt auf dem Handy
   14. Unterseiten
   15. Buendige Kanten
   16. Bewegung
   17. Entwurfskennzeichnung
   18. Druck

   Leitlinien
   - Markenfarben: Creme, Blaugrau, helles Blau. Dazu
     ein warmes Sand-Gold als Akzent fuer Handlungen und Hervorhebungen.
   - Eine Schrift: Montserrat, selbst gehostet. Grosse Ueberschriften in
     mittlerem Gewicht mit enger Laufweite, ruhiger Fliesstext.
   - 12-Spalten-Raster. Jeder Abschnitt hat seine eigene Komposition, damit die
     Seite nicht wie aneinandergereihte Baukasten-Bloecke wirkt.
   - Keine Kaesten, keine Zierlinien, keine Schatten. Gliederung entsteht ueber
     Weissraum, Schriftgroesse, Bildformate und Flaechenfarbe.
   ========================================================================== */


/* ==========================================================================
   1. Schrift
   Montserrat als variable Schrift (Gewicht 100 bis 900), lateinischer
   Zeichensatz inklusive Umlauten. Liegt in assets/fonts, Lizenz SIL OFL.
   ========================================================================== */

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");
}


/* ==========================================================================
   2. Designsystem
   ========================================================================== */

:root {
    /* Markenfarben
       Kontraste (WCAG): --tinte auf --creme 12,4:1, --tinte-leise auf --creme
       5,5:1 und auf --blau-hell 5,0:1, Weiss auf --blau-dunkel 6,8:1 */
    --creme:            #f7f5f0;
    --blau-hell:        #e4ecf3;
    --weiss:            #ffffff;
    --blau:             #496e83;
    --blau-dunkel:      #405f72;
    --blau-tief:        #2f4959;
    --tinte:            #20303c;
    --tinte-tief:       #1a2731;
    --tinte-leise:      #56666f;
    --rahmen:           #6b8191;
    --fehler:           #b3261e;

    /* Akzent: warmes Sand-Gold. Nimmt das goldene Licht der Fotos auf.
       --sand        Flaechen und Schrift auf dunklem Grund. Dunkler Text
                     darauf 6,0:1, auf --tinte-tief 6,8:1
       --sand-dunkel Hover der Knoepfe. Dunkler Text darauf 4,9:1
       --bronze      Akzent in Schrift auf hellem Grund, auf --creme 4,8:1 */
    --sand:             #c9a96b;
    --sand-dunkel:      #b8965a;
    --bronze:           #85673a;

    /* Schrift auf dunklem Grund. Auf --tinte-tief 16:1 bzw. 7,8:1 */
    --auf-dunkel:       #f7f5f0;
    --auf-dunkel-leise: rgba(247, 245, 240, 0.72);

    --schrift: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --rand:     clamp(1.25rem, 5vw, 4.5rem);
    --breite:   1320px;
    --spalt:    clamp(1rem, 2.2vw, 2.25rem);
    --abstand:  clamp(5rem, 3rem + 7vw, 11rem);
    --kopf:     108px;

    --weich:    cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 760px) {
    :root {
        --kopf: 76px;
    }
}


/* ==========================================================================
   3. Grundlagen
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--kopf) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--creme);
    color: var(--tinte);
    font-family: var(--schrift);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

/* Seiten ohne Vollbild am Anfang bekommen Platz fuer den festen Kopf */
body:not(.hat-vollbild) {
    padding-top: var(--kopf);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

svg {
    display: block;
}

figure {
    margin: 0;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--blau-dunkel);
    outline-offset: 3px;
}

::selection {
    background: #ecdcb9;
    color: var(--tinte);
}

.icon {
    width: 1.2em;
    height: 1.2em;
    flex: none;
}

.nur-vorlesen {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sprunglink {
    position: absolute;
    top: -200px;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--tinte);
    color: #fff;
    font-weight: 600;
}

.sprunglink:focus {
    top: 1rem;
}


/* ==========================================================================
   4. Typografie und Links
   ========================================================================== */

h1,
h2,
h3 {
    margin: 0;
    color: var(--tinte);
    font-weight: 500;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p {
    margin: 0 0 1.1em;
    text-wrap: pretty;
}

strong {
    font-weight: 600;
}

.titel {
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
    font-size: clamp(2.125rem, 1.2rem + 3.2vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.einleitung {
    color: var(--tinte);
    font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.akzent {
    color: var(--bronze);
}

.fliesstext p {
    max-width: 60ch;
}

.fliesstext > :last-child {
    margin-bottom: 0;
}

.fliesstext a:not(.knopf),
.einleitung a,
.rechtstext a,
.kontakt__wege a,
.haekchen a,
.feld__zusatz a {
    color: var(--blau-dunkel);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.fliesstext a:not(.knopf):hover,
.einleitung a:hover,
.rechtstext a:hover,
.kontakt__wege a:hover,
.haekchen a:hover,
.feld__zusatz a:hover {
    color: var(--bronze);
}


/* ==========================================================================
   5. Raster und Abschnitte
   ========================================================================== */

.behaelter {
    width: min(100% - 2 * var(--rand), var(--breite));
    margin-inline: auto;
}

/* Textseiten stehen linksbuendig im Raster. Die Zeilen enden genau an der
   Kante von Spalte 7, damit sie gut lesbar bleiben. */
.behaelter--text > * {
    max-width: calc((100% - 11 * var(--spalt)) / 12 * 7 + 6 * var(--spalt));
}

@media (max-width: 900px) {
    .behaelter--text > * {
        max-width: none;
    }
}

.raster {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spalt);
}

.abschnitt {
    padding-block: var(--abstand);
}

.abschnitt--blau {
    background: var(--blau-hell);
}

.abschnitt--dunkel {
    background: var(--tinte-tief);
    color: var(--auf-dunkel);
}

.abschnitt--dunkel .titel,
.abschnitt--dunkel h3 {
    color: #fff;
}

.abschnitt--dunkel .einleitung {
    color: var(--auf-dunkel-leise);
}

/* Tiefes Blau aus Johannas Markenfarbe. Weisser Text 9,5:1, heller Fliesstext
   6,3:1, Sand-Gold 4,2:1 und damit nur fuer grosse Schrift. */
.abschnitt--tief {
    background: var(--blau-tief);
    color: rgba(247, 245, 240, 0.8);
}

.abschnitt--tief h2,
.abschnitt--tief .titel {
    color: #fff;
}

.abschnitt--tief .akzent {
    color: var(--sand);
}

/* Kopfzeile eines Abschnitts: Titel links, Einleitung rechts. Beide stehen
   mit ihrer letzten Zeile auf derselben Grundlinie. Die Einleitung beginnt in
   Spalte 9 und damit auf derselben Achse wie die dritte Spalte der Reiseziele
   und des Ablaufs. */
.kopfzeile {
    align-items: end;
    align-items: last baseline;
    margin-bottom: clamp(3rem, 6vw, 6.5rem);
}

.kopfzeile__titel {
    grid-column: 1 / span 7;
    margin-bottom: 0;
}

.kopfzeile__text {
    grid-column: 9 / span 4;
    margin: 0;
}

@media (min-width: 901px) and (max-width: 1180px) {
    .kopfzeile__titel {
        grid-column: 1 / span 6;
    }

    .kopfzeile__text {
        grid-column: 7 / span 6;
    }
}

@media (max-width: 900px) {
    .raster {
        grid-template-columns: minmax(0, 1fr);
    }

    .raster > * {
        grid-column: 1 / -1 !important;
    }

    .kopfzeile {
        row-gap: 1.25rem;
    }
}


/* ==========================================================================
   6. Knoepfe
   ========================================================================== */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 56px;
    padding: 0.85rem 1.9rem;
    border: 0;
    border-radius: 0;
    background: var(--blau-dunkel);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s var(--weich), color 0.3s var(--weich);
}

.knopf:hover {
    background: var(--blau-tief);
}

.knopf--akzent {
    background: var(--sand);
    color: var(--tinte);
}

.knopf--akzent:hover {
    background: var(--sand-dunkel);
}

.knopf--hell {
    background: var(--blau-hell);
    color: var(--tinte);
}

.knopf--hell:hover {
    background: #d2dee8;
}

.knopf--text {
    min-height: 44px;
    padding-inline: 0;
    background: transparent;
    color: var(--blau-dunkel);
}

.knopf--text:hover {
    background: transparent;
    color: var(--bronze);
}

.knopf--klein {
    min-height: 52px;
    padding: 0.7rem 1.5rem;
    font-size: 0.9375rem;
}

.knopf[disabled] {
    opacity: 0.7;
    cursor: progress;
}


/* ==========================================================================
   7. Kopf und Navigation
   Fest am oberen Rand. Auf der Startseite liegt er zuerst durchsichtig ueber
   dem Hero und bekommt beim Scrollen den cremefarbenen Grund (main.js).
   ========================================================================== */

.kopf {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    display: flex;
    align-items: center;
    height: var(--kopf);
    background: var(--creme);
    color: var(--tinte);
    transition: background-color 0.5s var(--weich), color 0.5s var(--weich);
}

.kopf--ueber-bild:not(.kopf--gescrollt) {
    background: transparent;
    color: #fff;
}

/* Wortmarke links, Navigation genau in der Mitte, Knopf rechts. Wortmarke,
   Menuepunkte und Knopfbeschriftung stehen auf einer gemeinsamen Grundlinie. */
.kopf__zeile {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: baseline;
}

.kopf__zeile > .marke {
    grid-column: 1;
    justify-self: start;
}

.hauptnav {
    grid-column: 2;
    padding-inline: 1.5rem;
}

.kopf__aktionen {
    grid-column: 3;
    justify-self: end;
}

.marke {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--blau);
    font-size: 1.5rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.5s var(--weich);
}

.marke__name {
    font-weight: 600;
    letter-spacing: -0.025em;
}

.marke__zusatz {
    color: var(--bronze);
    font-weight: 400;
    letter-spacing: -0.01em;
    transition: color 0.5s var(--weich);
}

.kopf--ueber-bild:not(.kopf--gescrollt) .marke {
    color: #fff;
}

.kopf--ueber-bild:not(.kopf--gescrollt) .marke__zusatz {
    color: var(--sand);
}

.hauptnav__liste {
    display: flex;
    gap: clamp(1rem, 1.8vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hauptnav__link {
    color: inherit;
    font-size: 1.0625rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease;
}

.hauptnav__link:hover,
.hauptnav__link[aria-current] {
    color: var(--bronze);
}

.kopf--ueber-bild:not(.kopf--gescrollt) .hauptnav__link:hover,
.kopf--ueber-bild:not(.kopf--gescrollt) .hauptnav__link[aria-current] {
    color: var(--sand);
}

/* Ein Punkt der Hauptnavigation darf hervorgehoben werden (siehe 'akzent' in
   $navigation), etwa "Warum bei uns buchen": derselbe Preis wie direkt bei
   der Reederei, aber mit mehr Leistung, das soll sofort ins Auge fallen. */
.hauptnav__link--akzent {
    color: var(--bronze);
    font-weight: 700;
}

.kopf--ueber-bild:not(.kopf--gescrollt) .hauptnav__link--akzent {
    color: var(--sand);
}

.kopf__aktionen {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
}

/* Menueknopf als Symbol aus zwei Strichen, geoeffnet ein X. Die Flaeche ist
   44 px gross, die Striche 24 px breit. Der negative Rand setzt ihr rechtes
   Ende genau auf die Kante des Rasters. */
.menue-knopf {
    display: none;
    position: relative;
    align-self: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.menue-knopf__strich {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: top 0.35s var(--weich), transform 0.35s var(--weich);
}

.menue-knopf__strich:first-child {
    top: 17px;
}

.menue-knopf__strich:last-child {
    top: 25px;
}

.menue-knopf[aria-expanded="true"] .menue-knopf__strich:first-child {
    top: 21px;
    transform: rotate(45deg);
}

.menue-knopf[aria-expanded="true"] .menue-knopf__strich:last-child {
    top: 21px;
    transform: rotate(-45deg);
}

.mobilmenue {
    position: fixed;
    inset: var(--kopf) 0 0 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem var(--rand) calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--creme);
}

.mobilmenue[hidden] {
    display: none;
}

.mobilmenue__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobilmenue__link {
    display: block;
    padding: 0.45rem 0;
    color: var(--tinte);
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.mobilmenue__link--akzent {
    color: var(--bronze);
    font-weight: 700;
}

.mobilmenue__kontakt {
    display: grid;
    gap: 0.75rem;
}

.mobilmenue__telefon {
    padding: 0.5rem;
    color: var(--blau-dunkel);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

/* --- Begruessungs-Popup: erscheint kurz nach dem Laden der Startseite
   (siehe main.js). Kein eigener Rand oder Schatten, sondern derselbe
   flaechige, kantige Stil wie der Rest der Seite. ---------------------- */

.popup {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rand);
    opacity: 0;
    transition: opacity 0.3s var(--weich);
}

.popup[hidden] {
    display: none;
}

.popup.ist-sichtbar {
    opacity: 1;
}

.popup__hintergrund {
    position: absolute;
    inset: 0;
    background: rgba(26, 39, 49, 0.7);
}

.popup__fenster {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 25rem;
    max-height: calc(100vh - 2 * var(--rand));
    overflow-y: auto;
    padding: clamp(2rem, 4vw, 2.75rem);
    background: var(--creme);
    color: var(--tinte);
}

.popup__schliessen {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tinte-leise);
    cursor: pointer;
}

.popup__schliessen:hover {
    color: var(--tinte);
}

.popup__schliessen svg {
    width: 20px;
    height: 20px;
}

.popup__frage {
    margin: 0 2.5rem 1.5rem 0;
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.popup__whatsapp {
    width: 100%;
}

.popup__argumente {
    display: grid;
    gap: 0.7rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.popup__argumente li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--tinte-leise);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.popup__argumente li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--sand);
}

html.menue-offen,
html.popup-offen {
    overflow: hidden;
}

.menue-offen .kopf {
    background: var(--creme);
    color: var(--tinte);
}

.menue-offen .kopf .marke {
    color: var(--blau);
}

.menue-offen .kopf .marke__zusatz {
    color: var(--bronze);
}

/* Unter 1461 px reicht der Platz nicht, um die Navigation genau mittig
   und mit Luft zwischen Wortmarke und Knopf zu setzen. Dann uebernimmt das
   Menue. */
@media (max-width: 1460px) {
    .hauptnav {
        display: none;
    }

    .js .menue-knopf {
        display: block;
    }
}

/* Auf dem Handy stehen nur Wortmarke und Menueknopf im Kopf. Ohne Text im
   Knopf gibt es keine gemeinsame Grundlinie, deshalb mittig ausrichten. */
@media (max-width: 560px) {
    .js .kopf__knopf {
        display: none;
    }

    .kopf__zeile {
        align-items: center;
    }

    .marke {
        font-size: 1.125rem;
    }
}

@media (max-width: 340px) {
    .marke {
        font-size: 1rem;
    }
}


/* ==========================================================================
   8. Hero
   Vollbild. Die Frage steht gross unten links, Text und Knoepfe darunter.
   Rechts bleibt das Foto frei.
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 640px;
    min-height: max(640px, 100vh);
    min-height: max(640px, 100svh);
    background: var(--tinte-tief);
    color: #fff;
}

.hero__bild {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.hero__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 50%;
}

/* Abdunklung nur so weit, dass Kopf und Text lesbar bleiben */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(16, 26, 34, 0.5) 0%, rgba(16, 26, 34, 0) 22%),
        linear-gradient(0deg, rgba(16, 26, 34, 0.9) 0%, rgba(16, 26, 34, 0.55) 42%, rgba(16, 26, 34, 0) 75%),
        linear-gradient(90deg, rgba(16, 26, 34, 0.35) 0%, rgba(16, 26, 34, 0) 55%);
}

.hero__raster {
    row-gap: clamp(1.5rem, 2.5vw, 2.5rem);
    padding-block: calc(var(--kopf) + 3rem) clamp(3rem, 6vw, 5.5rem);
}

.hero__titel {
    grid-column: 1 / span 10;
    color: #fff;
    font-size: clamp(2.375rem, 1rem + 4.2vw, 5.25rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

/* Text und Knoepfe unter der Frage. Der Bereich reicht ueber alle Spalten,
   damit Knopf und WhatsApp-Link nebeneinander Platz haben. Der Text selbst
   endet an der Kante von Spalte 6. */
.hero__seite {
    grid-column: 1 / -1;
}

.hero__text {
    max-width: calc((100% - 11 * var(--spalt)) / 12 * 6 + 5 * var(--spalt));
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.65;
}

/* Knopf und Link mittig zueinander. Beide Beschriftungen haben dieselbe
   Schriftgroesse und stehen dadurch auf einer Linie. Auf dem Handy rutscht
   der Link unter den Knopf. */
.hero__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2.25rem;
}

.hero__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.hero__link:hover {
    color: var(--sand);
}

@media (max-width: 900px) {
    .hero__text {
        max-width: none;
    }
}

@media (max-width: 760px) {
    .hero__bild img {
        object-position: 64% 50%;
    }

    .hero__raster {
        padding-bottom: 2.5rem;
    }
}


/* ==========================================================================
   9. Abschnitte der Startseite
   ========================================================================== */

/* --- 1. Richtig: grosse Aussage auf tiefem Blau. Darunter steht links der
   Leitsatz mit dem Satz fuer Erstreisende und erfahrene Gaeste, rechts ab
   der Mittelachse der Text. Beide Spalten beginnen auf derselben Hoehe
   (siehe Buendige Kanten). ------------------------------------------------ */

.richtig {
    --richtig-abstand: clamp(3rem, 6vw, 6.5rem);
}

.richtig__titel {
    grid-column: 1 / span 11;
    font-size: clamp(2.5rem, 1rem + 5.2vw, 6.25rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.richtig__links {
    grid-column: 1 / span 5;
    margin-top: var(--richtig-abstand);
}

.richtig__leitsatz {
    margin: 0 0 1.5rem;
    color: #fff;
    font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.5rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.richtig__zusatz {
    margin: 0;
}

.richtig__text {
    grid-column: 7 / span 6;
    margin-top: var(--richtig-abstand);
}

/* --- 2. Angebot: zwei Bilder versetzt uebereinander, Text daneben -------- */

/* Die Bilder nutzen die Spalten des Seitenrasters: Das grosse Bild belegt
   alle Spalten bis auf die letzte, das kleine die letzten drei. Es ragt um
   --ueberhang unter das grosse Bild. */
.angebot__bilder {
    --ueberhang: clamp(5.5rem, 12vw, 11rem);
    grid-column: 1 / span 7;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-columns: subgrid;
    column-gap: var(--spalt);
    padding-bottom: var(--ueberhang);
}

.angebot__bild {
    grid-row: 1;
    overflow: hidden;
}

.angebot__bild--gross {
    grid-column: 1 / -2;
    align-self: start;
}

/* Ausschnitt mit Kussmund und Auge. Das Foto ist rechts beschnitten, weil
   dort unscharf eine Lampe ins Bild ragte. */
.angebot__bild--gross img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 50% 65%;
}

/* Der cremefarbene Rand liegt ausserhalb des Bildes. So sitzt die Bildkante
   genau auf der Spaltenlinie und der Rand trennt die Bilder wie ein Schnitt. */
.angebot__bild--klein {
    grid-column: -4 / -1;
    align-self: end;
    margin-bottom: calc(-1 * var(--ueberhang));
    outline: clamp(6px, 0.9vw, 14px) solid var(--creme);
}

.angebot__bild--klein img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.angebot__text {
    grid-column: 9 / span 4;
    align-self: center;
}

@media (min-width: 901px) and (max-width: 1180px) {
    .angebot__bilder {
        grid-column: 1 / span 6;
    }

    .angebot__text {
        grid-column: 8 / span 5;
    }
}

/* --- 3. Leistungen: Ueberschrift und Einleitung, darunter eine symmetrische
   Anordnung. Links zwei Leistungen, in der Mitte das Foto ueber vier
   Spalten, rechts zwei Leistungen. Die oberen Leistungen beginnen buendig
   mit der Oberkante des Fotos, die unteren enden mit ihrer letzten Zeile auf
   der Unterkante (siehe Buendige Kanten). --------------------------------- */

.leistungen__kopf {
    margin-bottom: clamp(3.5rem, 6vw, 6.5rem);
}

.leistungen__titel {
    grid-column: 1 / span 10;
    margin-bottom: 0;
}

.leistungen__einleitung {
    grid-column: 1 / span 6;
    margin: clamp(1rem, 1.5vw, 1.5rem) 0 0;
}

/* Das Foto ist mindestens 4:5 hoch und waechst mit, wenn die Texte daneben
   mehr Platz brauchen */
.leistungen__bild {
    grid-row: 1;
    grid-column: 5 / span 4;
    justify-self: stretch;
    align-self: stretch;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.leistungen__bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 50%;
}

/* Die Liste liegt ueber allen zwoelf Spalten und nutzt dasselbe Raster. Die
   obere Reihe steht oben, die untere unten. */
.leistungen__liste {
    grid-row: 1;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-content: space-between;
    column-gap: var(--spalt);
    row-gap: clamp(2.5rem, 4vw, 4rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.leistung:nth-child(1) {
    grid-area: 1 / 1 / 2 / 5;
}

.leistung:nth-child(2) {
    grid-area: 2 / 1 / 3 / 5;
    align-self: end;
}

.leistung:nth-child(3) {
    grid-area: 1 / 9 / 2 / 13;
}

.leistung:nth-child(4) {
    grid-area: 2 / 9 / 3 / 13;
    align-self: end;
}

/* Bronze auf hellem Blau 4,4:1, deshalb mindestens 24 px gross */
.leistung__titel {
    margin-bottom: 0.7rem;
    color: var(--bronze);
    font-size: clamp(1.5rem, 1.2rem + 0.6vw, 1.875rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.leistung__text {
    margin: 0;
    color: var(--tinte-leise);
}

/* --- 4. Vorteile: einfaches zweispaltiges Raster mit denselben Karten wie
   bei den Leistungen. ------------------------------------------------- */

.vorteile__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--spalt);
    row-gap: clamp(2.5rem, 4vw, 4rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 900px) {
    .vorteile__liste {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2.5rem;
    }
}

@media (max-width: 900px) {
    .leistungen__bild {
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }

    .leistungen__liste {
        grid-row: auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 2.5rem;
        margin-top: 2.5rem;
    }

    .leistung:nth-child(n) {
        grid-area: auto;
        align-self: auto;
    }
}

/* --- 4. Geschichte: Kapitel links, Bild rechts mitlaufend --------------- */

.geschichte__text {
    grid-column: 1 / span 5;
}

.geschichte__bild {
    grid-column: 7 / span 6;
    align-self: start;
    position: sticky;
    top: calc(var(--kopf) + 2.5rem);
    overflow: hidden;
}

.geschichte__bild img {
    width: 100%;
    max-height: calc(100vh - var(--kopf) - 5rem);
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.kapitel {
    margin-top: clamp(2.75rem, 4.5vw, 4rem);
}

.kapitel__titel {
    margin-bottom: 0.75rem;
    color: var(--bronze);
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
    line-height: 1.25;
}

.kapitel p {
    max-width: 58ch;
    margin: 0;
}

@media (min-width: 901px) and (max-width: 1180px) {
    .geschichte__text {
        grid-column: 1 / span 6;
    }

    .geschichte__bild {
        grid-column: 8 / span 5;
    }
}

/* Zitat ueber zehn Spalten. Name und Knopf stehen darunter auf derselben
   Kante wie das Bild darueber. */
.leitsatz {
    row-gap: clamp(2rem, 3vw, 3rem);
    margin-top: clamp(5rem, 10vw, 10rem);
}

.leitsatz__zitat {
    grid-column: 1 / span 10;
    margin: 0;
}

/* Das oeffnende Anfuehrungszeichen haengt links heraus. Der Einzug entspricht
   seiner Breite (0,416 em) abzueglich der Laufweite (0,035 em), dadurch steht
   das K genau dort, wo auch die folgenden Zeilen beginnen. */
.leitsatz__zitat p {
    margin: 0;
    text-indent: -0.381em;
    font-size: clamp(1.75rem, 0.9rem + 3.2vw, 3.875rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.leitsatz__zeichen {
    color: var(--sand);
}

.leitsatz__aktion {
    grid-column: 7 / span 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.leitsatz__name {
    margin: 0;
    color: var(--bronze);
    font-weight: 500;
}

@media (min-width: 901px) and (max-width: 1180px) {
    .leitsatz__zitat {
        grid-column: 1 / span 12;
    }

    .leitsatz__aktion {
        grid-column: 8 / span 5;
    }
}

/* --- 5. Reiseziele: dunkler Grund, drei Spalten, mittlere versetzt ------- */

.ziele {
    --versatz: clamp(3rem, 8vw, 8rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--spalt);
    row-gap: clamp(3.5rem, 6vw, 6rem);
    margin: 0;
    padding: 0 0 var(--versatz);
    list-style: none;
}

/* Versatz ueber top, damit die Zeilenhoehen gleich bleiben */
.ziele__eintrag:nth-child(3n + 2) {
    position: relative;
    top: var(--versatz);
}

.ziel {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ziel__bild {
    display: block;
    margin-bottom: 1.35rem;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.ziel__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ziel__titel {
    display: block;
    margin-bottom: 0.4rem;
    color: #fff;
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.ziel__text {
    display: block;
    max-width: 36ch;
    margin-bottom: 0.9rem;
    color: var(--auf-dunkel-leise);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.ziel__mehr {
    color: var(--sand);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ziel:hover .ziel__mehr,
.ziel:focus-visible .ziel__mehr {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.ziel:focus-visible {
    outline-color: var(--sand);
    outline-offset: 6px;
}

.reiseziele__hinweis {
    margin: clamp(3rem, 6vw, 6rem) 0 0;
    color: var(--auf-dunkel-leise);
}

/* --- 6. Ablauf: grosse, leichte Zahlen ---------------------------------- */

.schritte {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--spalt);
    row-gap: 3.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.schritt-text__nummer {
    display: block;
    margin-bottom: 1.75rem;
    color: var(--sand);
    font-size: clamp(4.5rem, 2.8rem + 5.5vw, 9.5rem);
    font-weight: 200;
    line-height: 0.8;
    letter-spacing: -0.05em;
}

.schritt-text__titel {
    max-width: 16em;
    margin-bottom: 0.75rem;
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
    line-height: 1.25;
}

.schritt-text p {
    max-width: 40ch;
    margin: 0;
    color: var(--tinte-leise);
}

/* --- Kundenstimmen ------------------------------------------------------- */

.stimmen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spalt);
    margin: clamp(2rem, 4vw, 3.5rem) 0 0;
    padding: 0;
    list-style: none;
}

.stimme__text {
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.stimme__name {
    margin: 0;
    color: var(--tinte-leise);
    font-size: 0.9375rem;
}

/* --- 8. Fragen ----------------------------------------------------------- */

.fragen__kopf {
    grid-column: 1 / span 5;
    align-self: start;
    position: sticky;
    top: calc(var(--kopf) + 2.5rem);
}

.fragen__liste {
    grid-column: 7 / span 6;
}

.frage {
    padding-block: 1.35rem;
}

.frage:first-child {
    padding-top: 0.5rem;
}

.frage__titel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.015em;
    list-style: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.frage__titel::-webkit-details-marker {
    display: none;
}

/* Zeilenhoehe 0,8, damit das Pluszeichen die Zeile nicht nach unten
   schiebt und die Frage buendig mit der Ueberschrift daneben beginnt */
.frage__titel::after {
    content: "+";
    flex: none;
    color: var(--sand-dunkel);
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 0.8;
    transition: transform 0.35s var(--weich);
}

.frage[open] .frage__titel::after {
    transform: rotate(45deg);
}

.frage__titel:hover,
.frage[open] .frage__titel {
    color: var(--bronze);
}

.frage__antwort {
    max-width: 58ch;
    margin: 1rem 0 0;
    color: var(--tinte-leise);
}

/* --- Kleinere Bildschirme ------------------------------------------------ */

/* Bei mittleren Breiten stehen Einleitungen ab Spalte 7. Die Reiseziele
   laufen dann zweispaltig, damit ihre zweite Spalte auf derselben Achse
   beginnt. Der Ablauf bleibt dreispaltig, seine Einleitung ab Spalte 9. */
@media (max-width: 1180px) {
    .ziele {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ziele__eintrag:nth-child(3n + 2) {
        top: 0;
    }

    .ziele__eintrag:nth-child(2n) {
        position: relative;
        top: var(--versatz);
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .ablauf .kopfzeile__titel {
        grid-column: 1 / span 8;
    }

    .ablauf .kopfzeile__text {
        grid-column: 9 / span 4;
    }
}

@media (max-width: 1000px) {
    .stimmen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .richtig__links {
        margin-top: 2.5rem;
    }

    .richtig__text {
        margin-top: 1.5rem;
    }

    .angebot__bilder {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        margin-bottom: 3rem;
    }

    .angebot__bild--gross {
        grid-column: 1 / span 10;
    }

    .angebot__bild--klein {
        grid-column: 7 / span 6;
    }

    .geschichte__bild {
        position: static;
        margin-top: 3rem;
    }

    .geschichte__bild img {
        max-height: none;
        aspect-ratio: 4 / 3;
    }

    .leitsatz__aktion {
        margin-top: 0.5rem;
    }

    .schritte {
        grid-template-columns: minmax(0, 1fr);
    }

    .schritt-text__nummer {
        margin-bottom: 1.25rem;
    }

    .fragen__kopf {
        position: static;
        margin-bottom: 2rem;
    }
}

@media (max-width: 600px) {
    .ziele,
    .stimmen {
        grid-template-columns: minmax(0, 1fr);
    }

    .ziele {
        padding-bottom: 0;
    }

    .ziele__eintrag:nth-child(2n) {
        top: 0;
    }

    .ziel__bild {
        aspect-ratio: 4 / 3;
    }
}


/* ==========================================================================
   10. Aufruf
   ========================================================================== */

.aufruf {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 560px;
    min-height: max(560px, 92vh);
    min-height: max(560px, 92svh);
    background: var(--tinte-tief);
    color: #fff;
}

.aufruf__bild {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.aufruf__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}

.aufruf::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(0deg, rgba(16, 26, 34, 0.88) 0%, rgba(16, 26, 34, 0.45) 45%, rgba(16, 26, 34, 0.1) 80%),
        linear-gradient(90deg, rgba(16, 26, 34, 0.3) 0%, rgba(16, 26, 34, 0) 60%);
}

.aufruf__raster {
    row-gap: clamp(1.5rem, 2.5vw, 2.5rem);
    padding-block: 6rem clamp(3rem, 6vw, 5.5rem);
}

.aufruf__titel {
    grid-column: 1 / span 8;
    color: #fff;
    font-size: clamp(3rem, 0.8rem + 8.2vw, 9.5rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

/* Wie im Hero: Text und Knoepfe unter der Ueberschrift */
.aufruf__seite {
    grid-column: 1 / -1;
}

.aufruf__text {
    max-width: calc((100% - 11 * var(--spalt)) / 12 * 6 + 5 * var(--spalt));
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 900px) {
    .aufruf__text {
        max-width: none;
    }
}


/* ==========================================================================
   11. Kontaktseite und Formular
   Kurzes Formular ueber sechs Spalten, rechts ab Spalte 9 der direkte Weg.
   ========================================================================== */

.kontaktbereich {
    padding-top: clamp(3.5rem, 6vw, 6rem);
}

.kontakt__formular {
    grid-column: 1 / span 6;
}

.kontakt__seite {
    grid-column: 9 / span 4;
    align-self: start;
    position: sticky;
    top: calc(var(--kopf) + 2.5rem);
}

.kontakt__titel {
    margin: 0 0 0.75rem;
    font-size: 1.375rem;
    line-height: 1.3;
}

.kontakt__wege {
    margin: 0;
    line-height: 2;
}

/* Lange E-Mail-Adressen umbrechen nur vor dem @ */
.kontakt__wege a {
    overflow-wrap: normal;
}

@media (max-width: 900px) {
    .kontakt__seite {
        position: static;
        margin-top: 4rem;
    }
}

/* --- Empfehlungsprogramm: Stufen links, Hinweis auf das PDF mit Fotos
   rechts daneben, derselbe Aufbau wie beim Kontaktformular. -------------- */

.empfehlung__stufen-haupt {
    grid-column: 1 / span 7;
}

.empfehlung__hinweis {
    grid-column: 9 / span 4;
    align-self: start;
    position: sticky;
    top: calc(var(--kopf) + 2.5rem);
    padding: 1.25rem 1.5rem;
    background: #fff1b8;
}

.empfehlung__hinweis p {
    margin: 0;
    color: var(--tinte);
    font-size: 0.9375rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .empfehlung__stufen-haupt {
        grid-column: 1 / -1;
    }

    .empfehlung__hinweis {
        grid-column: 1 / -1;
        position: static;
        margin-top: 2.5rem;
    }
}

.formular {
    position: relative;
}

.meldung {
    margin: 0 0 1.5rem;
    color: var(--fehler);
    font-weight: 600;
}

.meldung[hidden] {
    display: none;
}

.formular__ziel {
    margin: 0 0 1.75rem;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.formular__ziel strong {
    color: var(--tinte);
}

.feld {
    min-width: 0;
    margin: 0 0 1.75rem;
    padding: 0;
    border: 0;
}

.feld__label {
    display: block;
    margin: 0 0 0.6rem;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.feld__zusatz {
    color: var(--tinte-leise);
    font-weight: 400;
}

.feld__pflicht {
    color: var(--blau-dunkel);
}

.feld__pflicht[hidden] {
    display: none;
}

.feld__eingabe {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rahmen);
    border-radius: 0;
    background: var(--weiss);
    color: var(--tinte);
    font-size: 1rem;
    line-height: 1.4;
}

.feld__eingabe:focus {
    border-color: var(--blau-dunkel);
    outline: 2px solid var(--blau-dunkel);
    outline-offset: 0;
}

.feld--fehler .feld__eingabe,
.feld__eingabe[aria-invalid="true"] {
    border-color: var(--fehler);
}

.feld__fehler {
    margin: 0.45rem 0 0;
    color: var(--fehler);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
}

/* Haekchen fuer Datenschutz und Newsletter. Das Kaestchen steht mittig zur
   ersten Textzeile. */
.formular__haekchen {
    margin-top: 2.25rem;
}

.feld--haekchen {
    margin-bottom: 1.25rem;
}

.haekchen {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    cursor: pointer;
}

.haekchen input {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin: calc((1.6em - 1.2rem) / 2) 0 0;
    accent-color: var(--blau-dunkel);
    cursor: pointer;
}

.feld--haekchen .feld__fehler {
    margin-left: 2.05rem;
}

.formular__absenden {
    margin-top: 2.25rem;
}

.honigtopf {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.erfolg:focus {
    outline: none;
}

.erfolg__titel {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 1.3rem + 2vw, 3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.erfolg__hinweis {
    color: var(--tinte-leise);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.erfolg__hinweis a {
    color: var(--blau-dunkel);
}


/* ==========================================================================
   12. Fuss
   ========================================================================== */

.fuss {
    padding-top: clamp(4rem, 7vw, 7rem);
    background: var(--tinte-tief);
    color: var(--auf-dunkel-leise);
    font-size: 0.9375rem;
}

.fuss__raster {
    align-items: baseline;
    row-gap: 2.5rem;
}

.fuss__marke {
    grid-column: 1 / span 4;
}

.fuss__raster > :nth-child(2) {
    grid-column: 5 / span 4;
}

.fuss__raster > :nth-child(3) {
    grid-column: 9 / span 2;
}

.fuss__raster > :nth-child(4) {
    grid-column: 11 / span 2;
}

.marke--hell {
    color: #fff;
}

.marke--hell .marke__zusatz {
    color: var(--sand);
}

.fuss__marke p {
    margin: 1rem 0 0;
}

.fuss__titel {
    margin-bottom: 1rem;
    color: var(--sand);
    font-weight: 600;
}

.fuss__liste {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fuss a:not(.knopf) {
    color: var(--auf-dunkel-leise);
    text-decoration: none;
    transition: color 0.2s ease;
}

.fuss a:not(.knopf):hover {
    color: #fff;
}

.fuss .marke.marke--hell {
    color: #fff;
}

.fuss__email {
    overflow-wrap: anywhere;
}

.fuss__unten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 2rem;
    padding-block: clamp(3rem, 6vw, 5rem) 2rem;
    color: rgba(247, 245, 240, 0.6);
    font-size: 0.8125rem;
}

.fuss__unten p {
    margin: 0;
}

@media (min-width: 561px) and (max-width: 900px) {
    .fuss__raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fuss__raster > * {
        grid-column: auto !important;
    }
}


/* ==========================================================================
   13. Schnellkontakt auf dem Handy
   Erscheint nur beim Zurueckscrollen (main.js), deshalb braucht die Seite
   unten keinen zusaetzlichen Platz fuer die Leiste.
   ========================================================================== */

.schnellkontakt {
    display: none;
}

@media (max-width: 760px) {
    .js body:not(.seite-kontakt) .schnellkontakt {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
        padding: 0.6rem var(--rand) calc(0.6rem + env(safe-area-inset-bottom));
        background: var(--creme);
        transform: translateY(110%);
        transition: transform 0.4s var(--weich);
    }

    .js body:not(.seite-kontakt) .schnellkontakt.ist-sichtbar {
        transform: none;
    }

    .schnellkontakt .knopf {
        min-height: 50px;
        padding-inline: 0.5rem;
    }

    .menue-offen .schnellkontakt {
        visibility: hidden;
    }
}


/* ==========================================================================
   14. Unterseiten
   ========================================================================== */

.seitenkopf {
    padding-block: clamp(4rem, 9vw, 9rem) clamp(2.5rem, 5vw, 5rem);
}

.seitenkopf__titel,
.titel--seite {
    grid-column: 1 / span 10;
    max-width: none;
    margin: 0;
    font-size: clamp(2.75rem, 1.2rem + 5vw, 6.25rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.seitenkopf__text {
    grid-column: 1 / span 6;
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

.seitenkopf .behaelter--text .einleitung {
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

.seitenkopf--fehler {
    display: flex;
    align-items: center;
    min-height: 70vh;
}

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    margin-top: 2.5rem;
}

.abschnitt--text {
    padding-top: clamp(1rem, 2vw, 2rem);
}

/* Danke-Seite: Bild ueber fuenf Spalten, Text ab der Mittelachse */
.bild-text {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    column-gap: var(--spalt);
    row-gap: 2.5rem;
}

.bild-text__bild {
    grid-column: 1 / span 5;
}

.bild-text > :not(.bild-text__bild) {
    grid-column: 7 / span 6;
}

.bild-text__bild img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.bild-text .titel {
    font-size: clamp(1.875rem, 1.2rem + 2vw, 3.25rem);
}

@media (max-width: 900px) {
    .bild-text {
        grid-template-columns: minmax(0, 1fr);
    }

    .bild-text > * {
        grid-column: 1 / -1 !important;
    }

    .bild-text__bild img {
        aspect-ratio: 4 / 3;
    }
}

.rechtstext h2 {
    margin: 3.5rem 0 1rem;
    font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.875rem);
    line-height: 1.25;
    letter-spacing: -0.025em;
    scroll-margin-top: calc(var(--kopf) + 1.5rem);
}

.rechtstext > h2:first-child {
    margin-top: 0;
}

.rechtstext h3 {
    margin: 2rem 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.rechtstext ul {
    margin: 0 0 1.1em;
    padding-left: 1.2rem;
}

.rechtstext li {
    margin-bottom: 0.35rem;
}

.rechtstext__stand {
    margin-top: 3rem;
    color: var(--tinte-leise);
    font-size: 0.875rem;
}


/* ==========================================================================
   15. Buendige Kanten
   Schriftmasse von Montserrat im Verhaeltnis zur Schriftgroesse:
   Oberlaenge 0,97, Unterlaenge 0,25, Versalhoehe 0,70, Vorbreite gerader
   Versalien wie D, H oder L 0,105.
   ========================================================================== */

/* Optischer Randausgleich. Grosse Ueberschriften beginnen oft mit D, H, L
   oder M. Deren Vorbreite liesse sie gegenueber Fliesstext und Bildkanten
   um bis zu 10 px eingerueckt wirken. Runde und schraege Buchstaben ragen
   dafuer minimal hinaus, wie im Satz ueblich. */
.hero__titel,
.richtig__titel,
.titel,
.aufruf__titel,
.seitenkopf__titel,
.leitsatz__zitat p,
.leistung__titel,
.erfolg__titel,
.mobilmenue__link {
    margin-left: -0.075em;
}

/* „Wann legst du ab?“ beginnt mit W und d, die kaum Vorbreite haben */
.aufruf__titel {
    margin-left: -0.045em;
}

/* Wo Text oben neben einem Bild oder einer zweiten Spalte beginnt, steht die
   Versalhoehe der ersten Zeile genau auf der oberen Kante. Der Ausgleich
   ergibt sich aus Zeilenhoehe und Schriftmassen:
   (Zeilenhoehe / 2) minus 0,34. */
@media (min-width: 901px) {
    .geschichte__text > .titel:first-child,
    .fragen__kopf > .titel:first-child {
        margin-top: -0.18em;
    }

    .frage:first-child {
        padding-top: 0;
    }

    .frage:first-child > .frage__titel {
        margin-top: -0.335em;
    }

    /* Kontaktseite: erste Zeile des Formulars und Ueberschrift daneben auf
       gleicher Hoehe (Zeilenhoehe 1,4 bzw. 1,3) */
    .formular__felder > :first-child {
        margin-top: calc(0.9375rem * -0.36);
    }

    .kontakt__titel {
        margin-top: -0.31em;
    }

    .richtig__leitsatz {
        margin-top: -0.285em;
    }

    .richtig__text {
        margin-top: calc(var(--richtig-abstand) - 0.51em);
    }

    /* Leistungen: obere Titel mit der Versalhoehe an der Oberkante des Fotos,
       untere Texte mit der letzten Grundlinie an seiner Unterkante. Unter
       der Grundlinie liegen halber Durchschuss und Unterlaenge, zusammen
       0,49 em bei Zeilenhoehe 1,7. */
    .leistung:nth-child(odd) .leistung__titel {
        margin-top: -0.26em;
    }

    .leistung:nth-child(even) .leistung__text {
        margin-bottom: -0.49em;
    }
}


/* ==========================================================================
   16. Bewegung
   Ruhiger Einstieg im Hero und sanftes Einblenden beim Scrollen. Die Klasse
   ist-sichtbar setzt main.js. Wer im System reduzierte Bewegung eingestellt
   hat oder kein JavaScript nutzt, sieht alles sofort und ohne Animation.
   ========================================================================== */

@keyframes hero-zoom {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}

@keyframes hero-rein {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero__bild img {
        animation: hero-zoom 2.6s var(--weich) both;
    }

    .hero__titel,
    .hero__seite {
        animation: hero-rein 1.2s var(--weich) both;
    }

    .hero__seite {
        animation-delay: 0.25s;
    }

    .js [data-einblenden] {
        opacity: 0;
        transform: translateY(36px);
        transition: opacity 1.1s var(--weich), transform 1.1s var(--weich);
        transition-delay: var(--verzoegerung, 0ms);
    }

    .js [data-einblenden].ist-sichtbar {
        opacity: 1;
        transform: none;
    }

    /* Bilder zoomen beim Einblenden leicht zurueck */
    .js [data-einblenden] img {
        transform: scale(1.08);
        transition: transform 1.8s var(--weich);
        transition-delay: var(--verzoegerung, 0ms);
    }

    .js [data-einblenden].ist-sichtbar img {
        transform: scale(1);
    }

    .js .ziel:hover .ziel__bild img {
        transform: scale(1.04);
        transition-delay: 0ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   17. Entwurfskennzeichnung
   Nur sichtbar, solange CD_ENTWURF_ZEIGEN in config.php true ist.
   ========================================================================== */

.entwurf {
    background: #fff1b8;
    color: inherit;
}

.entwurf-hinweis {
    padding: 0.5rem 0.75rem;
    background: #fff1b8;
    font-size: 0.875rem;
}


/* ==========================================================================
   18. Druck
   ========================================================================== */

@media print {
    .kopf,
    .mobilmenue,
    .schnellkontakt,
    .kontakt__formular {
        display: none !important;
    }

    body,
    body:not(.hat-vollbild) {
        padding: 0;
        background: #fff;
    }

    .hero,
    .aufruf,
    .abschnitt--dunkel {
        min-height: 0;
        background: #fff;
        color: #000;
    }

    .hero::before,
    .aufruf::before,
    .hero__bild,
    .aufruf__bild {
        display: none;
    }

    .hero__titel,
    .hero__text,
    .aufruf__titel,
    .aufruf__text,
    .abschnitt--dunkel .titel,
    .abschnitt--dunkel .einleitung,
    .ziel__titel,
    .ziel__text {
        color: #000;
    }

    [data-einblenden] {
        opacity: 1 !important;
        transform: none !important;
    }
}