/* =============================================================================
   Bootsfahrschule Eglisau
   Layout-Idee: Jede Sektion füllt den Viewport (100vh). 50/50-Split.
   Bild randabfallend (edge-to-edge), volle Sektions-Höhe (object-fit: cover).
   Text auf der anderen Hälfte mit Padding. CTA überlappt Bildkante.
   Abwechselnd: Sektion 1 Bild rechts, Sektion 2 Bild links, usw.
   Kein max-width-Container. Volle Fensterbreite.
   ============================================================================= */

:root {
    /* Farben pixel-genau aus dem PDF gemessen */
    --c-teal:        #33A8C4;   /* Sektion 1 & 3 Hintergrund */
    --c-teal-dark:   #007A93;
    --c-teal-light:  #99D3E1;   /* Sub-Text auf Wine-Red-CTAs + Highlight-Titel */
    --c-header:      #006E88;   /* Header UND Footer — gleicher Petrol */
    --c-navy:        #00272B;   /* Highlight-Box (viel dunkler als vorher) */
    --c-navy-dark:   #001518;
    --c-coral:       #770027;   /* JETZT-Kreise — Weinrot/Bordeaux, nicht coral */
    --c-coral-hover: #5A001D;
    --c-coral-dark:  #5A001D;
    --c-coral-dark-hover: #3E0014;
    --c-cream:       #F0EAE1;
    --c-white:       #FFFFFF;
    --c-text:        #002E38;

    --ff-body: "Titillium Web", "Segoe UI", Verdana, sans-serif;
    --ff-heading: "Titillium Web", "Segoe UI", Verdana, sans-serif;

    --site-header-h: 76px;
    --section-pad-x: clamp(1.75rem, 4vw, 4rem);
    /* Global (Sektion 2/3/4): 1/3 des ursprünglichen Wertes. */
    --section-pad-y: clamp(.75rem, 1.35vh, 1.2rem);

    /* CTA-Kreise: +50% gegen vorherigen Stand (180→270 desktop, 130→195 mobile) */
    --cta-size-desk: 270px;
    --cta-size-mob: 195px;
    --cta-overlap: 135px;

    --radius-circle: 50%;
    --shadow-cta:  0 8px 24px rgba(0, 0, 0, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--ff-body);
    color: var(--c-text);
    line-height: 1.5;
    background: var(--c-cream);
    -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--ff-heading); margin-top: 0; }
p { margin: 0 0 1rem 0; }

/* Frame-Wrapper von fluid_styled_content transparent halten */
.frame { width: 100%; }
.frame-default { padding: 0; }

/* =============================================================================
   Sticky Header
   ============================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-header);
    color: var(--c-white);
    height: var(--site-header-h);
}
.site-header-inner {
    padding: 0 clamp(1.25rem, 3vw, 2.25rem) .85rem;
    display: grid;
    grid-template-columns: auto 1fr auto auto;   /* Menü | Spacer | Tagline | Logo */
    align-items: end;                            /* alle vier am Header-Bottom */
    column-gap: 1.5rem;
    height: 100%;
}
.menu-toggle {
    justify-self: start;
    display: inline-flex;
    align-items: end;                            /* Hamburger + „Menü" bottom-bündig */
    gap: .85rem;
    background: transparent;
    color: inherit;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
}
.menu-icon {
    display: inline-block;
    width: 46px; height: 34px;
    position: relative;
}
.menu-icon span {
    position: absolute;
    left: 0; right: 0;
    height: 6px;
    background: currentColor;
    border-radius: 3px;
}
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: 14px; }
.menu-icon span:nth-child(3) { top: 28px; }
.site-tagline {
    justify-self: end;
    display: inline-flex;
    align-items: end;                /* Text-Bottom + Boot-Icon-Bottom auf gemeinsamer Y */
    gap: 1.1rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    line-height: 1;
    padding: 0;
    margin: 0;
}
.site-tagline .tagline-text {
    display: inline-block;
    line-height: 1;
}
.site-tagline .tagline-icon {
    display: inline-block;
}
.site-tagline .tagline-icon img {
    max-height: 30px;
    width: auto;
    display: block;
}
.site-logo {
    display: inline-flex;
    align-items: end;
    padding: 0;
    margin: 0;
}
.site-logo img {
    max-height: 38px;
    width: auto;
    display: block;
}

.site-navigation {
    display: none;
    background: var(--c-header);
    padding: 1rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.site-navigation[data-open="true"] { display: block; }
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* =============================================================================
   Hero — volle Breite, Bild edge-to-edge, Titel-Wörter als eigene Teal-Boxen
   oben links (wie PDF: jedes Wort in eigenem Block auf eigener Zeile).
   ============================================================================= */
.hero {
    position: relative;
    background: var(--c-teal-dark);
    color: var(--c-white);
    overflow: hidden;
}
.hero-media img,
.hero-media picture,
.hero-media > * {
    width: 100%;
    height: clamp(320px, 65vh, 720px);
    object-fit: cover;
    object-position: center 55%;
    display: block;
}
.hero-title {
    position: absolute;
    top: clamp(1rem, 2.5vw, 2.5rem);
    left: 0;
    margin: 0;
    z-index: 2;
    font-family: var(--ff-heading);
    font-size: clamp(2.75rem, 8vw, 6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    max-width: 90%;
    /* wir wollen dass jedes .hero-title-word auf eigener Zeile mit eigener Box liegt */
}
.hero-title-word {
    /* Highlighter-Effekt: der Teal-Streifen läuft nur durch die untere Hälfte
       des Textes. Der obere Teil der Buchstaben ragt über den Streifen hinaus. */
    display: table;                   /* jedes Wort eigene Zeile */
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    color: var(--c-white);
    padding: 0 .3em;
    margin: 0 0 .05em 0;
    background-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 54%,
        var(--c-teal) 54%,
        var(--c-teal) 90%,
        transparent 90%
    );
}

/* =============================================================================
   Landing Body
   ============================================================================= */
.landing-body { display: block; }
.landing-body > aside.landing-circles { display: none; }
.landing-main > .frame { width: 100%; }

/* =============================================================================
   .bfs-section — Vollbreite, 50/50 Grid, Bild randabfallend
   ============================================================================= */
.bfs-section {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 60vh;
    overflow: hidden;   /* CTAs die aus dem Bild ragen bleiben trotzdem — .bfs-section__media hat kein overflow:hidden */
}
@media (min-width: 900px) {
    .bfs-section {
        min-height: calc(100vh - var(--site-header-h));
    }
    /* Aus PDF gemessen: Text 2/3 der Breite, Bild 1/3 */
    .bfs-section--image-right { grid-template-columns: 2fr 1fr; }
    .bfs-section--image-left  { grid-template-columns: 1fr 2fr; }
}

/* Farb-Varianten (Background der Text-Hälfte, weil Bild eh drüberdeckt) */
.bfs-section--teal  { background: var(--c-teal);  color: var(--c-white); }
.bfs-section--cream { background: var(--c-cream); color: var(--c-text); }
.bfs-section--navy  { background: var(--c-navy);  color: var(--c-white); }
.bfs-section--white { background: var(--c-white); color: var(--c-text); }

/* Text-Hälfte — großzügiges Padding, vertikal zentriert */
.bfs-section__content {
    padding: var(--section-pad-y) var(--section-pad-x);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Sektion 1 (erste Content-Sektion) — extra knappes vertikales Padding, weil
   der lange Titel + Body-Text die Sektion sonst nicht ganz füllt. Top noch etwas
   knapper als Bottom, damit der Titel direkt am Sektions-Anfang sitzt. */
.landing-main > *:first-child .bfs-section .bfs-section__content {
    --section-pad-y: clamp(.4rem, .9vh, .75rem);
    padding-top: clamp(.15rem, .4vh, .35rem);
}
.bfs-section__title {
    /* Skaliert flüssig mit dem Viewport — kleiner auf Mobile, gross auf Desktop */
    font-size: clamp(1.6rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1.25rem 0;
    letter-spacing: -0.01em;
}
.bfs-section--teal  .bfs-section__title,
.bfs-section--navy  .bfs-section__title { color: var(--c-white); }
.bfs-section--cream .bfs-section__title,
.bfs-section--white .bfs-section__title { color: var(--c-teal); }

.bfs-section__text {
    /* Grösser als vorher — füllt die Sektion optisch besser. Skaliert flüssig. */
    font-size: clamp(1rem, 1.65vw, 1.55rem);
    line-height: 1.5;
}
.bfs-section__text ul { padding-left: 1.25em; margin: .6rem 0 1rem 0; }
.bfs-section__text li { margin-bottom: .3rem; }
.bfs-section__text strong { font-weight: 700; }
.bfs-section__text p { margin: 0 0 .85rem 0; }
/* Zwischen-Statements im Body — im PDF sehr gross (z.B. „Deine Wunschtermine…"). */
.bfs-section__text h2,
.bfs-section__text h3 {
    font-size: clamp(1.5rem, 3.3vw, 3rem);
    font-weight: 700;
    margin-top: 1.4rem;
    margin-bottom: .55rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.bfs-section--teal  .bfs-section__text h2,
.bfs-section--teal  .bfs-section__text h3,
.bfs-section--navy  .bfs-section__text h2,
.bfs-section--navy  .bfs-section__text h3 { color: var(--c-white); }
.bfs-section--cream .bfs-section__text h2,
.bfs-section--cream .bfs-section__text h3,
.bfs-section--white .bfs-section__text h2,
.bfs-section--white .bfs-section__text h3 { color: var(--c-teal); }

.bfs-section--teal  a,
.bfs-section--navy  a { color: var(--c-white); text-decoration: underline; }
.bfs-section--cream a,
.bfs-section--white a { color: var(--c-teal-dark); text-decoration: underline; }

/* Bild-Hälfte — randabfallend, volle Höhe, cover-crop */
.bfs-section__media {
    position: relative;
    overflow: visible;   /* CTA ragt heraus */
    align-self: stretch; /* füllt volle Grid-Row-Höhe */
    justify-self: stretch;
}
.bfs-section__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}
@media (max-width: 899px) {
    .bfs-section__media {
        min-height: 40vh;
    }
    .bfs-section__media img { position: static; height: 100%; min-height: 40vh; }
}

/* Bild links / rechts alternierend — explizit per grid-column */
@media (min-width: 900px) {
    .bfs-section--image-right .bfs-section__content { grid-column: 1; grid-row: 1; }
    .bfs-section--image-right .bfs-section__media   { grid-column: 2; grid-row: 1; }
    .bfs-section--image-left  .bfs-section__content { grid-column: 2; grid-row: 1; }
    .bfs-section--image-left  .bfs-section__media   { grid-column: 1; grid-row: 1; }
}

/* „Kein Bild" Sektion (Sektion 5, Abschluss) — Text volle Breite */
.bfs-section--image-none {
    grid-template-columns: 1fr !important;
    min-height: 50vh;
}
.bfs-section--image-none .bfs-section__content {
    align-items: flex-start;
    max-width: min(1000px, 90%);
    margin-inline: auto;
    text-align: left;
}
.bfs-section--image-none .bfs-section__text h2 {
    color: var(--c-teal);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin-top: 1rem;
}

/* =============================================================================
   JETZT-CTAs — Overlay über dem Bild
   ============================================================================= */
.bfs-cta {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: var(--cta-size-mob);
    height: var(--cta-size-mob);
    border-radius: var(--radius-circle);
    background: var(--c-coral);
    color: var(--c-white) !important;
    text-align: center;
    padding: 0;
    text-decoration: none !important;
    box-shadow: var(--shadow-cta);
    transition: transform .2s ease, background .2s ease;
    cursor: pointer;
    overflow: hidden;
}
.bfs-cta:hover,
.bfs-cta:focus-visible {
    transform: scale(1.05);
    background: var(--c-coral-hover);
}
/* Inner-Wrapper: hier wird die Schrägstellung (rotate) angewendet, damit
   Label + Sub-Text ALS BLOCK gemeinsam gekippt werden (wie im PDF). */
.bfs-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-18deg);
    line-height: 1;
    padding: 0 .5rem;
}
.bfs-cta__label {
    display: block;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1;
    margin: 0 0 .35rem 0;
    color: var(--c-white);
    text-transform: uppercase;
}
.bfs-cta__text {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--c-teal-light);   /* hell-teal wie im PDF */
}
.bfs-cta--dark { background: var(--c-coral-dark); }
.bfs-cta--dark:hover { background: var(--c-coral-dark-hover); }

@media (min-width: 900px) {
    .bfs-cta {
        width: var(--cta-size-desk);
        height: var(--cta-size-desk);
    }
    .bfs-cta__label { font-size: 2.9rem; }
    .bfs-cta__text  { font-size: 1.5rem; }
}

/* Position — ragt aus der Bildkante RICHTUNG Text-Spalte heraus */
.bfs-cta--top-right    { top:    calc(var(--cta-overlap) / 2); left:  calc(-1 * var(--cta-overlap) / 2); }
.bfs-cta--top-left     { top:    calc(var(--cta-overlap) / 2); right: calc(-1 * var(--cta-overlap) / 2); }
.bfs-cta--bottom-right { bottom: calc(var(--cta-overlap) / 2); left:  calc(-1 * var(--cta-overlap) / 2); }
.bfs-cta--bottom-left  { bottom: calc(var(--cta-overlap) / 2); right: calc(-1 * var(--cta-overlap) / 2); }

/* Mobile-Fallback */
@media (max-width: 899px) {
    .bfs-cta {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        margin: -60px auto 1.25rem;
    }
    .bfs-section__media {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .bfs-section__media img { position: static; width: 100%; }
}

/* =============================================================================
   Highlight-Box (Sektion 4) — als eingebetteter Navy-Kasten INNERHALB
   der Content-Column, nicht als Full-Width-Streifen. Padding entspricht
   dem Content-Text-Column-Padding.
   ============================================================================= */
.bfs-highlight {
    background: var(--c-navy);
    color: var(--c-white);
    padding: 2rem 2.25rem;
    margin: 2.5rem 0 2rem 0;
}
.bfs-highlight__title {
    color: var(--c-teal-light);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1.25rem 0;
}
.bfs-highlight__text {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.55;
}
.bfs-highlight__text ul { padding-left: 1.25em; margin: .5rem 0; }
.bfs-highlight__text li { margin-bottom: .4rem; }
.bfs-highlight__text a { color: var(--c-white); text-decoration: underline; }

/* Abschluss-Text (nach der Highlight-Box) — bleibt in Content-Column */
.bfs-section__closing {
    margin-top: 2rem;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.5;
}
.bfs-section__closing p {
    margin-bottom: 1rem;
}
.bfs-section__closing h2 {
    color: var(--c-teal);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 1.5rem 0 .5rem 0;
}

/* =============================================================================
   Footer — Petrol wie der Header, 3-spaltig:
     [ Firma + Adresse + Namen ]  [ Weiterführende Links ]  [ WIRTH-Logo ]
   ============================================================================= */
.site-footer {
    background: var(--c-header);
    color: var(--c-white);
    padding: 3.5rem clamp(1.5rem, 4vw, 4rem) 3rem;
}
.site-footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 3rem;
    align-items: start;
    max-width: 1600px;
    margin-inline: auto;
}
.site-footer .frame { padding: 0; }
.site-footer header h2,
.site-footer h1, .site-footer h2, .site-footer h3 {
    color: var(--c-white);
    margin-top: 0;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
}
.site-footer p {
    margin: 0 0 .4rem 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.35;
}
/* Leere <p></p> aus dem RTE werden zu Absatz-Trennern zwischen Firma /
   Adresse / Namen — deutliche vertikale Distanz. */
.site-footer p:empty {
    margin: 0;
    height: 1.55rem;
}
.site-footer a {
    color: var(--c-white);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .5);
}
.site-footer a:hover { text-decoration-color: currentColor; }

/* Dritte Spalte: WIRTH-Logo als Pseudo-Element (kein zusätzliches CE nötig).
   Sitzt rechts, vertikal top-aligned mit der Überschriften-Baseline. */
.site-footer-inner::after {
    content: "";
    grid-column: 3;
    grid-row: 1;
    display: block;
    justify-self: end;
    width: clamp(220px, 24vw, 340px);
    aspect-ratio: 1531 / 198;
    background: url("../Images/logo-wirth.png") no-repeat right top / contain;
    /* Feinjustage: der Logo-Baseline optisch mit h2 der linken Spalten aligned */
    margin-top: .35rem;
}
@media (max-width: 899px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
    }
    .site-footer-inner::after {
        justify-self: start;
        margin-top: 1rem;
    }
}

/* =============================================================================
   Unterseiten (Content-Layout)
     - Schmaler Header-Bildstreifen (30vh)
     - Zentrale Inhaltsspalte (max-width, mit Padding)
     - Schriftgrössen skalieren responsiv über clamp()
   ============================================================================= */
.content-hero {
    width: 100%;
    background: var(--c-header);
    overflow: hidden;
}
.content-hero-media,
.content-hero-media img,
.content-hero-media picture {
    display: block;
    width: 100%;
}
.content-hero-media img,
.content-hero-media picture > * {
    height: clamp(160px, 28vh, 320px);
    object-fit: cover;
    object-position: center 55%;
}

.content-main {
    background: var(--c-cream);
    color: var(--c-text);
    padding: clamp(2rem, 5vh, 4rem) clamp(1.25rem, 4vw, 3rem);
}
.content-column {
    max-width: 780px;
    margin-inline: auto;
}

.content-header {
    margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
}
.content-title {
    font-family: var(--ff-heading);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--c-teal-dark);
    margin: 0 0 .5rem 0;
}
.content-subtitle {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-text);
    opacity: .8;
    margin: 0;
}

.content-body {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.6;
}
.content-body h2 {
    font-family: var(--ff-heading);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-teal-dark);
    margin: 2rem 0 .75rem 0;
    letter-spacing: -0.01em;
}
.content-body h3 {
    font-family: var(--ff-heading);
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-teal-dark);
    margin: 1.5rem 0 .5rem 0;
}
.content-body h4 {
    font-family: var(--ff-heading);
    font-size: clamp(1.1rem, 1.5vw, 1.25rem);
    font-weight: 700;
    color: var(--c-text);
    margin: 1.25rem 0 .35rem 0;
}
.content-body p { margin: 0 0 1rem 0; }
.content-body ul,
.content-body ol {
    padding-left: 1.35em;
    margin: 0 0 1.25rem 0;
}
.content-body li { margin-bottom: .35rem; }
.content-body strong { font-weight: 700; }
.content-body a {
    color: var(--c-teal-dark);
    text-decoration: underline;
    text-decoration-color: rgba(0, 122, 147, .5);
}
.content-body a:hover { text-decoration-color: currentColor; }
.content-body img,
.content-body figure {
    display: block;
    width: 100%;
    height: auto;
    margin: 1.75rem 0;
}
.content-body figure { margin-inline: 0; }
.content-body figcaption {
    font-size: .95em;
    color: var(--c-text);
    opacity: .75;
    margin-top: .4rem;
    text-align: center;
}
.content-body blockquote {
    border-left: 4px solid var(--c-teal);
    padding: .25rem 0 .25rem 1rem;
    margin: 1.5rem 0;
    color: var(--c-text);
    font-style: italic;
}
.content-body hr {
    border: 0;
    border-top: 1px solid rgba(0, 46, 56, .2);
    margin: 2rem 0;
}
.content-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: .95em;
}
.content-body th,
.content-body td {
    padding: .55rem .75rem;
    border-bottom: 1px solid rgba(0, 46, 56, .15);
    text-align: left;
    vertical-align: top;
}
.content-body th {
    color: var(--c-teal-dark);
    font-weight: 700;
}

/* =============================================================================
   Kontakt-Formular (TYPO3 form_formframework)
   ============================================================================= */
.content-body form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.25rem;
    margin: 1.5rem 0 0 0;
}
/* Titel „Step" der ersten Formular-Page ausblenden — irritierend im Frontend */
.content-body form > legend,
.content-body form > h1,
.content-body form > h2,
.content-body form > h3,
.content-body form fieldset > legend,
.content-body form h3.form-page-title {
    display: none;
}
/* .form-text = doppelte Feld-Beschreibung unter dem Input — Platzhalter reicht */
.content-body form .form-text {
    display: none;
}
.content-body form fieldset {
    grid-column: 1 / -1;
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.25rem;
}
.content-body form .form-group,
.content-body form .form-row,
.content-body form > div {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
/* Volle Breite für Textarea und Submit */
.content-body form textarea,
.content-body form .form-group:has(textarea),
.content-body form .form-group:has(button),
.content-body form .form-group:has([type="submit"]) {
    grid-column: 1 / -1;
}
.content-body form label {
    font-weight: 700;
    font-size: .95em;
    color: var(--c-text);
    line-height: 1.2;
}
.content-body form label .required,
.content-body form label abbr {
    color: var(--c-coral);
    text-decoration: none;
    margin-left: .15em;
}
.content-body form input[type="text"],
.content-body form input[type="email"],
.content-body form input[type="tel"],
.content-body form input[type="number"],
.content-body form input[type="url"],
.content-body form input[type="password"],
.content-body form input[type="search"],
.content-body form input[type="date"],
.content-body form textarea,
.content-body form select {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--c-text);
    background: var(--c-white);
    border: 1.5px solid rgba(0, 46, 56, .25);
    border-radius: 6px;
    padding: .7rem .85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.content-body form textarea {
    min-height: 160px;
    resize: vertical;
    font-family: inherit;
}
.content-body form input:focus,
.content-body form textarea:focus,
.content-body form select:focus {
    outline: none;
    border-color: var(--c-teal);
    box-shadow: 0 0 0 3px rgba(51, 168, 196, .25);
}
.content-body form input::placeholder,
.content-body form textarea::placeholder {
    color: rgba(0, 46, 56, .45);
}

/* Fehlerzustand */
.content-body form .has-error input,
.content-body form .has-error textarea,
.content-body form input[aria-invalid="true"],
.content-body form textarea[aria-invalid="true"] {
    border-color: var(--c-coral);
    box-shadow: 0 0 0 3px rgba(119, 0, 39, .18);
}
.content-body form .help-block,
.content-body form .error {
    color: var(--c-coral);
    font-size: .9em;
    margin-top: .15rem;
}

/* Honeypot (Feldname "website") + Timing-Trap ("loadtime") komplett verstecken.
   Der Bot befüllt das Textfeld → RegularExpression-Validator im YAML blockt.
   Für Nutzer muss weder Label noch Input sichtbar sein. */
.content-body form .form-group:has(input[name$="[website]"]),
.content-body form .form-group:has(input[name$="[loadtime]"]),
.content-body form label[for$="-website"],
.content-body form label[for$="-loadtime"] {
    display: none !important;
}

/* Submit Button — im Bootsfahrschule-Look, weinrot */
.content-body form button,
.content-body form input[type="submit"] {
    grid-column: 1 / -1;
    justify-self: start;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-white);
    background: var(--c-coral);
    border: 0;
    border-radius: 999px;
    padding: .85rem 2.4rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(119, 0, 39, .28);
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
    margin-top: .75rem;
}
.content-body form button:hover,
.content-body form input[type="submit"]:hover {
    background: var(--c-coral-hover);
    box-shadow: 0 6px 18px rgba(119, 0, 39, .35);
}
.content-body form button:active,
.content-body form input[type="submit"]:active {
    transform: translateY(1px);
}

/* reCAPTCHA-Badge lokal positionieren */
.content-body form .g-recaptcha,
.content-body form [class*="recaptcha"] {
    grid-column: 1 / -1;
}

/* Bestätigungsseite */
.content-body form.form-confirmation,
.content-body .form-response {
    background: var(--c-cream);
    border-left: 4px solid var(--c-teal);
    padding: 1.25rem 1.5rem;
    border-radius: 4px;
    display: block;
}

/* Mobile: 1 Spalte */
@media (max-width: 640px) {
    .content-body form,
    .content-body form fieldset {
        grid-template-columns: 1fr;
    }
}