@charset "UTF-8";
/* ==========================================================================
   Dein Notfallplan

   Die Seite kommt mit drei Formen aus, die sich wiederholen:
     Form 1  .kopfblock    zentrierte Ueberschrift mit Vorzeile und Vorlauf
     Form 2  .karten       Raster aus gleich gebauten Karten
     Form 3  .zweispalter  Text und Bild nebeneinander
   Dazu das Band mit dem Aufruf (.band) und der Hero ganz oben.

   Aufbau der Datei:
     1. Schriften und Grundwerte
     2. Grundgeruest
     3. Typografie
     4. Knoepfe
     5. Kopfzeile und Navigation
     6. Hero
     7. Die drei Formen
     8. Besondere Bloecke (Gegenueberstellung, Fragen)
     9. Kontaktseite und Formular
    10. Textseiten
    11. Fusszeile
    12. Bewegung
    12. Hinweise auf offene Punkte
   ========================================================================== */


/* ==========================================================================
   1. Schriften und Grundwerte
   Beide Schriften liegen auf dem eigenen Webspace, es wird nichts von
   fremden Servern nachgeladen.
   ========================================================================== */

@font-face {
    font-family: "Jakarta";
    src: url("../fonts/jakarta-latin-wght-normal.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
    --tinte:       #0d1623;
    --tinte-tief:  #070d16;
    --tinte-rand:  rgba(232, 236, 242, .13);

    --papier:      #f6f5f2;
    --papier-tief: #edebe6;
    --weiss:       #ffffff;

    /* Ein einziger Akzent, abgeleitet vom Deckel des Notfallordners. */
    --blau:        #2d64c4;
    --blau-tief:   #1d4a9b;
    --blau-hell:   #7aa5e8;

    --gruen:       #1f7a4d;
    --rot:         #a03030;

    --text:        #0d1623;
    --text-weich:  #4f5c6e;
    --hell:        #eef1f6;
    --hell-weich:  #9dabbd;

    --linie:       rgba(13, 22, 35, .12);
    --linie-fein:  rgba(13, 22, 35, .07);

    --display: "Jakarta", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --luft:      clamp(4rem, 7vw, 6.5rem);
    --luft-halb: clamp(2rem, 3.5vw, 3rem);
    --rand:      clamp(1.25rem, 5vw, 3rem);
    --spalte:    1.5rem;
    --breite:    74rem;
    --schmal:    46rem;

    --rund:       8px;
    --rund-gross: 16px;

    /* assets/js/seite.js misst die Kopfzeile nach und traegt den Wert ein. */
    --kopf-hoehe: 4.7rem;
}

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

[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--text);
    font-family: var(--sans);
    font-size: clamp(1rem, .95rem + .22vw, 1.0625rem);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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


/* ==========================================================================
   2. Grundgeruest
   ========================================================================== */

.breite {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: var(--rand);
}

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

.abschnitt.hell  { background: var(--papier); }
.abschnitt.weiss { background: var(--weiss); }
.abschnitt.dunkel { background: var(--tinte); color: var(--hell); }

.sprung {
    position: absolute;
    left: -100vw;
    top: 0;
    background: var(--tinte);
    color: var(--papier);
    padding: .75rem 1.25rem;
    z-index: 100;
}

.sprung:focus { left: 0; }


/* ==========================================================================
   3. Typografie
   Alles, was einen Abschnitt eroeffnet, steht mittig. Das haelt die Seite
   ruhig, obwohl sie lang ist.
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.028em;
    margin: 0;
    text-wrap: balance;
}

.gross {
    font-size: clamp(2.35rem, 1rem + 4.6vw, 4rem);
    line-height: 1.06;
    letter-spacing: -.036em;
    font-weight: 800;
}

.mittel {
    font-size: clamp(1.8rem, 1.1rem + 2.3vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -.032em;
    font-weight: 800;
}

.klein {
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem);
    line-height: 1.22;
    letter-spacing: -.022em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--blau); color: #fff; }


/* ==========================================================================
   4. Knoepfe
   Ein einziger Knopf, ueberall gleich. Wer ihn sieht, weiss sofort, dass es
   derselbe naechste Schritt ist.
   ========================================================================== */

a { color: inherit; text-decoration-color: var(--linie); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }

.dunkel a { text-decoration-color: rgba(255, 255, 255, .35); }

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

.knopf {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    background: var(--blau);
    color: #fff;
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.008em;
    text-align: left;
    padding: 1.1rem 2.1rem;
    border: 0;
    border-radius: var(--rund);
    text-decoration: none;
    box-shadow: 0 2px 0 rgba(13, 22, 35, .12);
    transition: background .16s ease, transform .16s ease;
}

.knopf:hover { background: var(--blau-tief); transform: translateY(-1px); }

.knopf::after {
    content: "";
    flex: none;
    width: .42rem;
    height: .42rem;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .9;
}

.knopf.leer {
    background: transparent;
    color: inherit;
    border: 1px solid var(--linie);
    box-shadow: none;
}

.knopf.leer:hover { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }

.dunkel .knopf.leer { border-color: rgba(255, 255, 255, .3); }
.dunkel .knopf.leer:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.knopf-notiz { display: block; margin-top: .9rem; font-size: .9375rem; color: var(--text-weich); }

.dunkel .knopf-notiz { color: var(--hell-weich); }

/* Knopf unter einem zentrierten Block */
.tat { margin-top: 2.2rem; text-align: center; }


/* ==========================================================================
   5. Kopfzeile und Navigation
   ========================================================================== */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(246, 245, 242, .93);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--linie-fein);
    transition: background .2s ease, border-color .2s ease;
}

body.kopf-auf-dunkel .kopf {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: transparent;
    color: var(--hell);
    backdrop-filter: none;
}

body.kopf-auf-dunkel .kopf.wandert {
    background: rgba(13, 22, 35, .94);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom-color: var(--tinte-rand);
}

body.kopf-auf-dunkel .hero,
body.kopf-auf-dunkel .kontakt-kopf { padding-top: calc(var(--kopf-hoehe) + var(--luft-halb)); }

.kopf-raster {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding: 1.05rem var(--rand);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--spalte);
}

.marke { justify-self: start; text-decoration: none; display: block; line-height: 1.12; }

.marke-name {
    display: block;
    font-family: var(--display);
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -.035em;
}



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

.menue a {
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--text-weich);
    padding-block: .35rem;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.menue a:hover { color: var(--text); border-bottom-color: currentColor; }

body.kopf-auf-dunkel .menue a { color: var(--hell-weich); }
body.kopf-auf-dunkel .menue a:hover { color: #fff; }

.menue-kontakt { display: none; }

.kopf-knopf {
    justify-self: end;
    background: var(--blau);
    color: #fff;
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 600;
    padding: .7rem 1.35rem;
    border-radius: var(--rund);
    transition: background .18s ease;
}

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

.menue-knopf {
    display: none;
    align-items: center;
    gap: .55rem;
    background: none;
    border: 0;
    padding: .4rem 0;
    font: inherit;
    font-size: .9375rem;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
}

.menue-striche { display: inline-block; width: 1.1rem; }
.menue-striche i {
    display: block;
    height: 1.5px;
    background: currentColor;
    margin: .28rem 0;
    transition: transform .2s ease;
}

.menue-knopf[aria-expanded="true"] .menue-striche i:first-child { transform: translateY(.21rem) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche i:last-child  { transform: translateY(-.21rem) rotate(-45deg); }

@media (max-width: 62rem) {
    .kopf-raster { grid-template-columns: 1fr auto; }
    .haupt { justify-self: end; }
    .menue-knopf { display: inline-flex; }
    .kopf-knopf { display: none; }

    .menue {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        gap: 0;
        background: var(--papier);
        color: var(--text);
        border-bottom: 1px solid var(--linie);
        padding: .5rem var(--rand) 1.5rem;
    }

    body.kopf-auf-dunkel .menue { background: var(--tinte); border-bottom-color: var(--tinte-rand); }

    .menue.offen { display: flex; }

    .menue li { border-top: 1px solid var(--linie-fein); }
    body.kopf-auf-dunkel .menue li { border-top-color: var(--tinte-rand); }

    .menue a { display: block; padding: .95rem 0; font-size: 1.0625rem; color: var(--text); border: 0; }
    body.kopf-auf-dunkel .menue a { color: var(--hell); }
    .menue-kontakt { display: block; }
}


/* ==========================================================================
   6. Hero
   Foto als Flaeche, dunkel ueberlagert, Text mittig darauf.
   ========================================================================== */

.hero {
    position: relative;
    background: var(--tinte);
    color: var(--hell);
    text-align: center;
    padding-bottom: var(--luft-halb);
    overflow: hidden;
}

/* Mit Video stehen Text und Video nebeneinander, der Text linksbuendig. */
.hero-innen.mit-video {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
    text-align: left;
}

.hero-innen.mit-video h1,
.hero-innen.mit-video .hero-vorlauf { margin-inline: 0; max-width: none; }

.hero-innen.mit-video .tat { text-align: left; }

@media (max-width: 62rem) {
    .hero-innen.mit-video { grid-template-columns: 1fr; text-align: center; }
    .hero-innen.mit-video h1,
    .hero-innen.mit-video .hero-vorlauf { margin-inline: auto; }
    .hero-innen.mit-video h1 { max-width: 18ch; }
    .hero-innen.mit-video .hero-vorlauf { max-width: 44ch; }
    .hero-innen.mit-video .tat { text-align: center; }
}

.hero-bild {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }

.hero-bild::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(13, 22, 35, .95) 0%, rgba(13, 22, 35, .9) 42%, rgba(13, 22, 35, .66) 100%),
        linear-gradient(180deg, rgba(13, 22, 35, .5) 0%, transparent 35%, rgba(13, 22, 35, .8) 100%),
        radial-gradient(70% 80% at 30% 40%, rgba(45, 100, 196, .22), transparent 70%);
}

.hero-innen { position: relative; z-index: 1; }

.hero h1 { color: #fff; margin-inline: auto; max-width: 18ch; text-shadow: 0 2px 20px rgba(13, 22, 35, .45); }

.hero-vorlauf {
    margin: 1.5rem auto 0;
    max-width: 44ch;
    font-size: 1.1875rem;
    line-height: 1.6;
    color: #e4e9f0;
    text-shadow: 0 1px 14px rgba(13, 22, 35, .75);
}

.hero .tat { margin-top: 2.2rem; }

/* Das Video im Hero. Steht erst in der Seite, wenn assets/video/hero.mp4
   vorliegt. Bis dahin markiert der Rahmen in der Vorschau den Platz. */
.hero-video {
    margin: 0;
    width: 100%;
    border-radius: var(--rund-gross);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 26px 64px rgba(0, 0, 0, .5);
}

@media (max-width: 62rem) {
    .hero-video { margin-top: 2.4rem; max-width: 36rem; margin-inline: auto; }
}

.hero-video { position: relative; }

.hero-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* Eigener Knopf ueber dem Standbild, solange das Video nicht laeuft */
.video-an {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .9rem;
    width: 100%;
    background: linear-gradient(180deg, rgba(13, 22, 35, .12) 0%, rgba(13, 22, 35, .45) 100%);
    border: 0;
    font: inherit;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.video-an:hover { background: linear-gradient(180deg, rgba(13, 22, 35, .05) 0%, rgba(13, 22, 35, .35) 100%); }

.video-an-zeichen {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: var(--blau);
    box-shadow: 0 10px 30px rgba(13, 22, 35, .45);
    position: relative;
    transition: transform .2s ease, background .2s ease;
}

.video-an:hover .video-an-zeichen { transform: scale(1.06); background: var(--blau-tief); }

/* Das Dreieck im Kreis */
.video-an-zeichen::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: .62rem 0 .62rem 1.05rem;
    border-color: transparent transparent transparent #fff;
}

.video-an-text {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.005em;
    text-shadow: 0 1px 10px rgba(13, 22, 35, .6);
}

.hero-video.leer {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, .05);
    border-style: dashed;
    border-color: rgba(255, 255, 255, .26);
    box-shadow: none;
}

.hero-video.leer p {
    margin: 0;
    text-align: center;
    font-size: .9375rem;
    color: var(--hell-weich);
}

.hero-video.leer span {
    display: block;
    margin-top: .4rem;
    font-size: .8125rem;
    opacity: .65;
}


/* ==========================================================================
   7. Die drei Formen
   ========================================================================== */

/* --- Form 1: zentrierter Abschnittskopf -------------------------------- */

.kopfblock {
    max-width: var(--schmal);
    margin: 0 auto var(--luft-halb);
    text-align: center;
}

.kopfblock .vorzeile {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--blau);
    margin-bottom: .9rem;
}

.dunkel .kopfblock .vorzeile { color: var(--blau-hell); }

.kopfblock .vorlauf {
    margin: 1.1rem auto 0;
    font-size: 1.0938rem;
    line-height: 1.6;
    color: var(--text-weich);
    max-width: 52ch;
}

.dunkel .kopfblock .vorlauf { color: var(--hell-weich); }
.dunkel .kopfblock h2 { color: #fff; }


/* --- Form 2: Raster aus gleich gebauten Karten ------------------------- */

.karten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spalte);
}

/* Karten mit mehreren Teilen stehen in Reih und Glied: Bild, Titel, Text und
   Liste beginnen in jeder Spalte auf derselben Hoehe. */
@supports (grid-template-rows: subgrid) {
    .karten.geordnet {
        grid-template-rows: auto auto 1fr;
        align-items: stretch;
    }

    .karten.geordnet > .karte {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        row-gap: 0;
    }

    /* Die Leistungen haben zusaetzlich ein Bild und eine Liste */
    .karten.geordnet.mit-bild { grid-template-rows: auto auto auto 1fr; }
    .karten.geordnet.mit-bild > .karte { grid-row: span 4; }
}

.karten.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 58rem; margin-inline: auto; }

/* Dieselbe Form ohne Kasten: nur eine Linie oben, sonst freier Satz. */
.karten.offen .karte {
    background: none;
    border: 0;
    border-top: 2px solid var(--blau);
    border-radius: 0;
    padding: 1.4rem 0 0;
}

.karten.offen .karte h3 { font-size: 1.1875rem; }

.karte {
    background: var(--weiss);
    border: 1px solid var(--linie-fein);
    border-radius: var(--rund-gross);
    padding: 1.9rem;
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.karten.geordnet > .karte:hover {
    transform: translateY(-3px);
    border-color: rgba(45, 100, 196, .3);
    box-shadow: 0 14px 34px rgba(13, 22, 35, .08);
}

.weiss .karte { background: var(--papier); }

.dunkel .karte {
    background: rgba(255, 255, 255, .05);
    border-color: var(--tinte-rand);
}

.karte-zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    align-self: start;
    font-family: var(--display);
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: #fff;
    background: var(--blau);
    border-radius: 50%;
    margin-bottom: 1.3rem;
}

.dunkel .karte-zahl { background: var(--blau); color: #fff; }

.karte h3 { font-size: 1.22rem; margin-bottom: .55rem; align-self: start; }

.karten.geordnet .karte h3 { margin-bottom: 0; padding-bottom: .7rem; }
.karten.geordnet .karte > p { margin-bottom: 0; padding-bottom: 1.3rem; }
.karten.geordnet .karte .karte-liste { margin-top: 0; align-self: start; }
.dunkel .karte h3 { color: #fff; }

.karte p { color: var(--text-weich); font-size: .9688rem; }
.dunkel .karte p { color: var(--hell-weich); }

.karte-bild {
    margin: -1.9rem -1.9rem 1.5rem;
    border-radius: var(--rund-gross) var(--rund-gross) 0 0;
    overflow: hidden;
}

.karte-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.karte-liste {
    list-style: none;
    margin: 1.3rem 0 0;
    padding: 0;
    font-size: .9375rem;
    display: grid;
    gap: .5rem;
}

.karte-liste li { position: relative; padding-left: 1.5rem; color: var(--text-weich); }

.karte-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .52em;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--blau);
    opacity: .6;
}

.karte blockquote { margin: 0 0 1rem; }
.karte blockquote p { color: var(--text); font-size: 1.0312rem; line-height: 1.55; }
.karte figcaption { font-size: .875rem; color: var(--text-weich); margin-top: auto; padding-top: .8rem; }

@media (max-width: 62rem) {
    .karten,
    .karten.zwei { grid-template-columns: 1fr; }
}


/* --- Form 3: Text und Bild nebeneinander ------------------------------- */

.zweispalter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.zweispalter.schmaler-text { grid-template-columns: 1.1fr 1fr; }

.zweispalter-bild img { width: 100%; border-radius: var(--rund-gross); }

.zweispalter-text h2 { margin-bottom: 1.2rem; }
.zweispalter-text p { color: var(--text-weich); }
.dunkel .zweispalter-text p { color: var(--hell-weich); }

.zweispalter-text .fussnote {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--linie);
    font-size: .9375rem;
}

.zweispalter.gedreht .zweispalter-bild { order: -1; }

@media (max-width: 62rem) {
    .zweispalter,
    .zweispalter.schmaler-text { grid-template-columns: 1fr; }
    .zweispalter-bild { order: -1; max-width: 32rem; }
    .zweispalter-bild img { aspect-ratio: 3 / 2; object-fit: cover; }
}


/* --- Das Band mit dem Aufruf ------------------------------------------- */

.band {
    background: var(--tinte);
    color: var(--hell);
    padding-block: var(--luft-halb);
    text-align: center;
}

.band p {
    font-family: var(--display);
    font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.25;
    color: #fff;
    max-width: 34ch;
    margin: 0 auto 1.5rem;
}

.band .knopf { font-size: 1rem; padding: .95rem 1.8rem; }


/* ==========================================================================
   8. Besondere Bloecke
   ========================================================================== */

/* --- Gegenueberstellung ohne und mit Notfallplan -----------------------
   Links die Lage ohne Regelung, zurueckgenommen. Rechts die geregelte Lage,
   hervorgehoben, damit der Blick dort haengen bleibt. */

.vergleich {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spalte);
    max-width: 62rem;
    margin-inline: auto;
    align-items: stretch;
}

.vergleich-seite {
    border-radius: var(--rund-gross);
    padding: 2rem 2rem 2.2rem;
}

.vergleich-seite.ohne {
    background: rgba(160, 48, 48, .05);
    border: 1px solid rgba(160, 48, 48, .16);
}

.vergleich-seite.mit {
    background: var(--tinte);
    border: 1px solid var(--tinte);
    color: var(--hell);
    box-shadow: 0 18px 44px rgba(13, 22, 35, .18);
}

.vergleich-seite h3 {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.1875rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid currentColor;
}

.vergleich-seite.ohne h3 { color: var(--rot); border-bottom-color: rgba(160, 48, 48, .22); }
.vergleich-seite.mit  h3 { color: #fff; border-bottom-color: var(--tinte-rand); }

/* Das Zeichen im Titel: durchgestrichener Kreis links, Haken rechts */
.vergleich-zeichen {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 50%;
    position: relative;
}

.vergleich-seite.ohne .vergleich-zeichen { background: rgba(160, 48, 48, .14); }
.vergleich-seite.mit  .vergleich-zeichen { background: var(--blau); }

.vergleich-zeichen::before,
.vergleich-zeichen::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 2px;
}

.vergleich-seite.ohne .vergleich-zeichen::before,
.vergleich-seite.ohne .vergleich-zeichen::after {
    width: .78rem;
    height: 2px;
    left: .485rem;
    top: .845rem;
}

.vergleich-seite.ohne .vergleich-zeichen::before { transform: rotate(45deg); }
.vergleich-seite.ohne .vergleich-zeichen::after  { transform: rotate(-45deg); }

.vergleich-seite.mit .vergleich-zeichen::before {
    width: .34rem;
    height: 2px;
    left: .45rem;
    top: .92rem;
    transform: rotate(45deg);
}

.vergleich-seite.mit .vergleich-zeichen::after {
    width: .62rem;
    height: 2px;
    left: .7rem;
    top: .82rem;
    transform: rotate(-50deg);
}

.vergleich-seite ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }

.vergleich-seite li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .9688rem;
    line-height: 1.5;
}

.vergleich-seite.ohne li { color: var(--text-weich); }
.vergleich-seite.mit  li { color: var(--hell-weich); }

.vergleich-seite li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .52em;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
}

.vergleich-seite.ohne li::before { background: rgba(160, 48, 48, .45); }
.vergleich-seite.mit  li::before { background: var(--blau-hell); }

@media (max-width: 52rem) {
    .vergleich { grid-template-columns: 1fr; }
}


/* --- Fragen ------------------------------------------------------------ */

.fragen-liste { max-width: 50rem; margin-inline: auto; }

.frage {
    background: var(--weiss);
    border: 1px solid var(--linie-fein);
    border-radius: var(--rund);
    margin-bottom: .6rem;
}

.weiss .frage { background: var(--papier); }

.frage summary {
    cursor: pointer;
    list-style: none;
    padding: 1.2rem 3rem 1.2rem 1.4rem;
    position: relative;
    font-weight: 600;
    font-size: 1.0312rem;
    letter-spacing: -.012em;
}

.frage summary::-webkit-details-marker { display: none; }

.frage summary::after {
    content: "";
    position: absolute;
    right: 1.4rem;
    top: 1.65rem;
    width: .62rem;
    height: .62rem;
    border-right: 2px solid var(--blau);
    border-bottom: 2px solid var(--blau);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.frage[open] summary::after { transform: rotate(-135deg); top: 1.9rem; }

.frage summary:hover { color: var(--blau); }

.antwort { padding: 0 2.6rem 1.5rem 1.4rem; color: var(--text-weich); font-size: .9688rem; }


/* ==========================================================================
   9. Kontaktseite und Formular
   ========================================================================== */

.kontakt-kopf {
    background: var(--tinte);
    color: var(--hell);
    text-align: center;
    padding-bottom: calc(var(--luft-halb) + 3rem);
    position: relative;
    overflow: hidden;
}

.kontakt-kopf::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(55% 70% at 50% 30%, rgba(45, 100, 196, .3), transparent 70%);
    pointer-events: none;
}

.kontakt-kopf .breite { position: relative; }
.kontakt-kopf .gross { max-width: 16ch; margin-inline: auto; color: #fff; }
.kontakt-kopf .hero-vorlauf { margin-top: 1.3rem; }

.kontakt-raster {
    position: relative;
    z-index: 1;
    margin-top: -3rem;
    padding-bottom: var(--luft);
}

.kontakt-haupt {
    max-width: 38rem;
    margin-inline: auto;
    min-height: 22rem;
    background: var(--weiss);
    border: 1px solid var(--linie-fein);
    border-radius: var(--rund-gross);
    padding: clamp(1.6rem, 3vw, 2.6rem);
    box-shadow: 0 18px 48px rgba(13, 22, 35, .1);
}

/* --- Formular ----------------------------------------------------------- */

.feld { margin-bottom: 1.3rem; }

.feld label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .45rem; }

.feld .pflicht { color: var(--blau); }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    padding: .85rem .95rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.feld textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
    outline: 0;
    background: var(--weiss);
    border-color: var(--blau);
    box-shadow: 0 0 0 3px rgba(45, 100, 196, .16);
}

.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"],
.feld select[aria-invalid="true"] { border-color: var(--rot); }

.feld-fehler { display: block; margin-top: .4rem; font-size: .875rem; color: var(--rot); }

.feld-hinweis { display: block; margin-top: .4rem; font-size: .8125rem; color: var(--text-weich); }

.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--spalte); }

@media (max-width: 40rem) { .feld-paar { grid-template-columns: 1fr; } }

.feld-haken { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.feld-haken input { margin-top: .22rem; width: 1.1rem; height: 1.1rem; accent-color: var(--blau); }
.feld-haken label { font-size: .875rem; font-weight: 400; line-height: 1.55; margin: 0; color: var(--text-weich); }

/* Honigtopf: fuer Menschen unsichtbar, fuer einfache Maschinen verlockend */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formular-fehler,
.formular-erfolg {
    padding: 1rem 1.2rem;
    margin-bottom: 1.6rem;
    border-radius: var(--rund);
    border-left: 3px solid var(--rot);
    background: rgba(160, 48, 48, .07);
    font-size: .9375rem;
}

.formular-erfolg { border-left-color: var(--blau); background: rgba(45, 100, 196, .08); }

.formular-tat { margin-top: 1.9rem; }

/* --- Anfrage Schritt fuer Schritt --------------------------------------- */

.anfrage .schritt { min-height: 7.5rem; }

.anfrage .feld label,
.anfrage .feld-gruppe > legend {
    display: block;
    font-family: var(--display);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -.024em;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: .8rem;
    padding: 0;
}

.anfrage .feld-haken label {
    font-family: var(--sans);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-weich);
    margin: 0;
}

.anfrage .feld input[type="text"],
.anfrage .feld input[type="email"],
.anfrage .feld input[type="tel"] {
    font-size: 1.0625rem;
    padding: 1rem 1.1rem;
}

.anfrage .feld-gruppe { border: 0; margin: 0 0 1.3rem; padding: 0; }

.anfrage .feld-gruppe .feld-hinweis { margin: -.4rem 0 .9rem; }

/* Was schon beantwortet ist */
.erledigt { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .5rem; }

.erledigt button {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: .9rem;
    text-align: left;
    background: var(--papier);
    border: 1px solid var(--linie-fein);
    border-radius: var(--rund);
    padding: .7rem 1rem;
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.erledigt button:hover { border-color: var(--blau); background: var(--weiss); }

.erledigt-frage {
    flex: none;
    max-width: 48%;
    font-size: .8125rem;
    color: var(--text-weich);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erledigt-antwort {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mehrfachauswahl als Knoepfe */
.wahl { display: grid; gap: .6rem; }

.wahl-knopf {
    display: flex !important;
    align-items: center;
    gap: .85rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    padding: .95rem 1.1rem;
    cursor: pointer;
    font-family: var(--sans) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    transition: border-color .15s ease, background .15s ease;
}

.wahl-knopf:hover { border-color: var(--blau); }

.wahl-knopf input {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    accent-color: var(--blau);
    margin: 0;
}

.wahl-knopf:has(input:checked) {
    border-color: var(--blau);
    background: rgba(45, 100, 196, .07);
}

.wahl-knopf:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 2px; }


/* ==========================================================================
   10. Textseiten
   ========================================================================== */

.textseite { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: var(--luft); }

.textseite .gross { max-width: 16ch; margin-bottom: var(--luft-halb); }

.text-inhalt { max-width: 44rem; }

.text-inhalt h2 { font-size: 1.45rem; margin-top: 2.75rem; margin-bottom: .8rem; }

.text-inhalt h3 { font-size: 1.0625rem; margin-top: 1.8rem; margin-bottom: .5rem; }

.text-inhalt p,
.text-inhalt li { color: var(--text-weich); }

.text-inhalt ul { padding-left: 1.1rem; margin: 0 0 1.1em; }
.text-inhalt li { margin-bottom: .4rem; }

.text-inhalt address { font-style: normal; }

.text-klein { font-size: .875rem; }

/* Danke- und Bestaetigungsseite */

.meldung { padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: var(--luft); text-align: center; }
.meldung .gross { max-width: 16ch; margin: 0 auto 1.3rem; }
.meldung .vorlauf { max-width: 48ch; margin-inline: auto; color: var(--text-weich); font-size: 1.0938rem; }
.meldung .vorlauf + .vorlauf { margin-top: 1.1rem; }


/* ==========================================================================
   11. Fusszeile
   ========================================================================== */

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

.fuss-kontakt { padding-block: var(--luft-halb); text-align: center; border-bottom: 1px solid var(--tinte-rand); }

.fuss-anrede { font-size: .9375rem; color: var(--hell-weich); margin-bottom: .5rem; }

.fuss-telefon {
    font-family: var(--display);
    font-size: clamp(1.9rem, 1rem + 2.6vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -.038em;
    margin-bottom: .8rem;
    color: #fff;
}

.fuss-telefon { margin-bottom: 0; }

.fuss-telefon a { text-decoration: none; }
.fuss-telefon a:hover { color: var(--blau-hell); }


.fuss-unten { padding-block: 2.8rem; }

.fuss-raster {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.2rem var(--spalte);
    align-items: start;
    font-size: .875rem;
    color: var(--hell-weich);
}

.fuss-spalte h2 {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hell-weich);
    opacity: .7;
    margin-bottom: .9rem;
}

.fuss-spalte p,
.fuss-spalte address { margin: 0 0 .6rem; font-style: normal; line-height: 1.7; }
.fuss-spalte p:last-child,
.fuss-spalte address:last-child { margin-bottom: 0; }

.fuss-firma { color: #fff; font-weight: 600; }

.fuss-spalte a { text-decoration: none; }
.fuss-spalte a:hover { color: #fff; text-decoration: underline; }

.fuss-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

/* Das Copyright steht abgesetzt unter allen Spalten */
.fuss-recht {
    margin-top: 2.4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tinte-rand);
    font-size: .8125rem;
    color: var(--hell-weich);
    text-align: center;
}

@media (max-width: 62rem) {
    .fuss-raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 36rem) {
    .fuss-raster { grid-template-columns: 1fr; }
}


/* ==========================================================================
   12. Bewegung
   Inhalte kommen beim Scrollen ruhig von unten herein. Das Skript setzt
   dafuer die Klasse js-bewegt am html-Element und .zeigt an den Elementen.
   Ohne JavaScript und bei abgeschalteter Bewegung ist alles sofort da.
   ========================================================================== */

.js-bewegt .bewegt {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s cubic-bezier(.22, .61, .36, 1),
                transform .65s cubic-bezier(.22, .61, .36, 1);
}

.js-bewegt .bewegt.zeigt { opacity: 1; transform: none; }

/* In einer Reihe laufen die Karten leicht versetzt ein */
.js-bewegt .karten > *:nth-child(2),
.js-bewegt .vergleich > *:nth-child(2) { transition-delay: .09s; }
.js-bewegt .karten > *:nth-child(3) { transition-delay: .18s; }

/* Der Hero braucht keinen Scrollanstoss, er laeuft beim Laden an. Gesteuert
   wird das wie bei den uebrigen Teilen ueber eine Klasse, nicht ueber eine
   Animation. So bleibt nichts unsichtbar haengen, wenn der Browser die Seite
   in einem Hintergrundtab oeffnet und dort keine Bilder berechnet. */
.js-bewegt .hero-innen > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
                transform .7s cubic-bezier(.22, .61, .36, 1);
}

.js-bewegt .hero-innen.zeigt > * { opacity: 1; transform: none; }

.js-bewegt .hero-innen.zeigt > *:nth-child(2) { transition-delay: .12s; }
.js-bewegt .hero-innen.zeigt > *:nth-child(3) { transition-delay: .24s; }

.js-bewegt .hero-bild img {
    transform: scale(1.05);
    transition: transform 1.8s cubic-bezier(.22, .61, .36, 1);
}

.js-bewegt .hero-bild.zeigt img { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js-bewegt .bewegt,
    .js-bewegt .hero-innen > *,
    .js-bewegt .hero-bild img {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==========================================================================
   Druck
   ========================================================================== */

@media print {
    .kopf, .fuss-kontakt, .knopf, .sprung, .wege, .band { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .abschnitt.dunkel, .hero, .kontakt-kopf, .fuss { background: none !important; color: #000 !important; }
    .hero-bild { display: none; }
    .hero h1, .karte h3, .fuss-telefon, .dunkel .kopfblock h2 { color: #000 !important; }
    a { text-decoration: none; }
}