/* =========================================================================
   hedrisjahami.de – gemeinsames Stylesheet für alle Seiten
   Reines CSS, kein Framework, kein Build-Schritt.
   Aufbau:
     1  Schriften (selbst gehostet)
     2  Reset & Basis
     3  Barrierefreiheit (Fokus, Sprunglink, Touch-Ziele)
     4  Kopfbereich & Navigation
     5  Startseite: Intro, Manifest
     6  Startseite: Fortbildungen (horizontaler Scroll)
     7  Startseite: Zielgruppen
     8  Kontakt & Formular
     9  Fußzeile
    10  Unterseiten (Fortbildungen)
    11  Rechtsseiten (Impressum, Datenschutz)
   ========================================================================= */


/* =========================================================================
   1  SCHRIFTEN – selbst gehostet, keine Verbindung zu Google
   -------------------------------------------------------------------------
   Inter und Playfair Display werden als Variable Fonts ausgeliefert: eine
   einzige Datei deckt den gesamten Gewichtsbereich ab. Deshalb steht in
   font-weight ein Bereich (z. B. 100 900) statt einer einzelnen Zahl.
   Die Dateien liegen in assets/fonts/.
   ========================================================================= */

@font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('../fonts/inter-var-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('../fonts/inter-var-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face{
    font-family:'Playfair Display';
    font-style:normal;
    font-weight:400 900;
    font-display:swap;
    src:url('../fonts/playfair-display-var-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:'Playfair Display';
    font-style:normal;
    font-weight:400 900;
    font-display:swap;
    src:url('../fonts/playfair-display-var-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
    font-family:'Playfair Display';
    font-style:italic;
    font-weight:400 900;
    font-display:swap;
    src:url('../fonts/playfair-display-var-italic-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:'Playfair Display';
    font-style:italic;
    font-weight:400 900;
    font-display:swap;
    src:url('../fonts/playfair-display-var-italic-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Great Vibes wird nur für die Signatur unter dem Manifest benutzt (Startseite). */
@font-face{
    font-family:'Great Vibes';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('../fonts/great-vibes-400-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:'Great Vibes';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('../fonts/great-vibes-400-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* =========================================================================
   2  RESET & BASIS
   ========================================================================= */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:#fff;background:#000;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:color .3s}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
::selection{background:#fff;color:#000}

/* Lange Fachbegriffe wie „PFLICHTSCHULUNG" dürfen nirgends aus dem Kasten laufen. */
h1,h2,h3,h4{overflow-wrap:break-word}

.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}
@media(min-width:768px){.container{padding:0 3rem}}


/* =========================================================================
   3  BARRIEREFREIHEIT
   -------------------------------------------------------------------------
   Sichtbarer Fokusring für Tastaturbedienung und Mindestgröße 44 x 44 px
   für alles, was angetippt werden kann.
   ========================================================================= */

:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Sprunglink – nur sichtbar, wenn er den Fokus hat. */
.skip-link{position:absolute;top:-100px;left:1rem;z-index:100;background:#fff;color:#000;
    padding:.75rem 1.25rem;font-weight:700;font-size:.875rem;transition:top .2s}
.skip-link:focus{top:1rem}

/* Sammelregel für Touch-Ziele. */
.header__nav a,
.mobile-nav a,
.breadcrumb a,
.info-box a,
.footer-main a,
.legal .back,
.legal .footer a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}


/* =========================================================================
   4  KOPFBEREICH & NAVIGATION
   ========================================================================= */

.header{position:fixed;top:0;left:0;width:100%;z-index:50;transition:all .7s ease;
    height:100vh;height:100dvh;border-bottom:1px solid transparent}
.header--scrolled{height:80px;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.1)}
.header__inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.header__nav{position:absolute;top:0;left:0;right:0;height:80px;display:flex;align-items:center;
    justify-content:space-between;padding:0 1.5rem;opacity:0;pointer-events:none;transition:opacity .7s ease .1s}
@media(min-width:768px){.header__nav{padding:0 3rem}}
.header--scrolled .header__nav{opacity:1;pointer-events:auto}
.header__nav-left,.header__nav-right{display:flex;gap:2rem}
.header__nav a{font-weight:700;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap}
.header__nav a:hover{color:#9ca3af}
.header__logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;transition:all .7s ease}
/* Der Namenszug im Vorspann.
   „HEDRIS JAHAMI" braucht wegen white-space:nowrap das 7,42-fache der
   Schriftgröße an Breite (gemessen). Die vw-Angabe in der Mitte lässt ihn
   auf schmalen Geräten mitschrumpfen.
   Die Untergrenze lag bei 2,9 rem, zusammen mit einem festen 3-rem-Wert
   unter 480 px. Das ergab 48 px und damit 356 px Textbreite: bei 375 px
   blieben nur 9 px Rand, bei 320 px lief der Zug seitlich hinaus.
   Untergrenze auf 1,9 rem gesenkt, vw-Wert unverändert. */
.header__logo h1,.header__logo .header__wortmarke{font-weight:900;letter-spacing:-.05em;line-height:1;
    white-space:nowrap;transition:all .7s ease;font-size:clamp(1.9rem,11.5vw,9rem);display:block}
.header--scrolled .header__logo{transform:translate(-50%,-50%) scale(.88)}
.header--scrolled .header__logo h1,
.header--scrolled .header__logo .header__wortmarke{font-size:1.8rem}
/* „SOZIALARBEITER" und „KI - EXPERTE" unten links und rechts, ebenfalls
   rund 50 % größer. */
.header__subtitle{position:absolute;bottom:2.5rem;left:0;width:100%;display:flex;justify-content:space-between;
    padding:0 1.5rem;font-weight:700;font-size:1.125rem;letter-spacing:.2em;text-transform:uppercase;transition:all 1s ease}
.header__subtitle--hidden{transform:translateY(-100%);opacity:0;pointer-events:none}

/* Kompakter Kopf für die Unterseiten: kein bildschirmhoher Vorspann,
   sondern direkt die 80-px-Leiste. */
.header--compact{height:80px;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.1);transition:none}
.header--compact .header__nav{opacity:1;pointer-events:auto;transition:none}
.header--compact .header__logo{transform:translate(-50%,-50%);transition:none}
.header--compact .header__logo .header__wortmarke{font-size:1.5rem}
@media(min-width:768px){.header--compact .header__logo .header__wortmarke{font-size:1.8rem}}
.header--compact .header__subtitle{display:none}

/* Bewusst NICHT ".menu-toggle": Diesen Klassennamen benutzt das
   Admin-Panel von WonderCMS für seine eigenen Symbole. Ein gleicher Name
   würde die Bedienelemente im Admin-Bereich umformatieren. */
.header__burger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:60;position:absolute;
    right:1rem;top:50%;transform:translateY(-50%);width:44px;height:44px;align-items:center;justify-content:center}
.header__burger span{width:25px;height:2px;background:#fff;transition:all .3s}

.mobile-nav{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;background:rgba(0,0,0,.98);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
    opacity:0;pointer-events:none;transition:opacity .3s;z-index:55}
.mobile-nav.active{opacity:1;pointer-events:auto}
.mobile-nav a{color:#fff;font-size:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.5rem 1rem}

@media(max-width:768px){
    .header__nav-left,.header__nav-right{display:none}

    /* Der Menüknopf saß auf halber Bildschirmhöhe und lag damit genau auf
       dem Namen. Jetzt sitzt er oben in der 80-px-Leiste, wo er hingehört. */
    .header__burger{display:flex;top:40px;transform:translateY(-50%)}

    .header__subtitle{padding:0 1.5rem;font-size:.975rem;gap:.5rem;flex-direction:column;text-align:center;align-items:center}
    .header__subtitle span{letter-spacing:.15em}

    /* Warum der Name seitlich hin- und hersprang:
       transform:translate(-50%,-50%) rechnet mit der Breite des Elements.
       Gleichzeitig lief eine Schriftgrößen-Animation, die genau diese
       Breite verändert, und obendrein ein scale(). Die drei Werte wurden
       unabhängig voneinander interpoliert, dadurch das Rutschen.
       Lösung: kein scale mehr, und die Übergänge nur noch auf den
       Eigenschaften, die sich wirklich ändern sollen. */
    .header__logo{transition:top .7s ease}
    .header__logo h1,
    .header__logo .header__wortmarke{transition:font-size .7s ease}

    .header--scrolled .header__logo{transform:translate(-50%,-50%)}
    .header--scrolled .header__logo h1{font-size:1.875rem}
    .header--compact .header__logo{transform:translate(-50%,-50%)}
    .header--compact .header__logo .header__wortmarke{font-size:1.875rem}

    .header__nav{padding:0 1.5rem}
}

@media(max-width:480px){
    /* Bewusst kein fester Wert mehr: Die clamp-Formel oben regelt die Größe
       jetzt bis hinunter zu sehr schmalen Geräten selbst. */
    /* Ebenfalls ohne scale, siehe Begründung oben. */
    .header--scrolled .header__logo{transform:translate(-50%,-50%)}
    .header--scrolled .header__logo h1{font-size:1.75rem}
    .header--compact .header__logo{transform:translate(-50%,-50%)}
    .header--compact .header__logo .header__wortmarke{font-size:1.75rem}
    .header__subtitle{font-size:.9rem;bottom:1.5rem}
    .header__subtitle span{letter-spacing:.1em}
}


/* =========================================================================
   5  STARTSEITE – Vorspann, Intro, Manifest
   ========================================================================= */

.hero-spacer{height:100vh;height:100dvh}

/* Auf dem Handy waren oben und unten je 8rem Luft. Auf 1.6rem gekürzt,
   also 80 % weniger: einmal über der senkrechten Linie, einmal zwischen
   dem Foto und dem Text darunter. Ab 768 px bleibt es großzügig. */
.intro{background:#fff;color:#000;padding:1.6rem 1.5rem;position:relative;overflow:hidden}
@media(min-width:768px){.intro{padding:4rem 3rem}}
.intro__inner{max-width:56rem;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3rem}
.intro__line{width:1px;height:4rem;background:#000}
.intro__title{font-size:clamp(1.5rem,4vw,3rem);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.intro__image{position:relative;width:100%;max-width:32rem;aspect-ratio:3/4;overflow:hidden;background:#f3f4f6}
.intro__image img{width:100%;height:100%;object-fit:cover;transition:filter .7s ease}
.intro__text{max-width:52rem;margin:0 auto;font-size:1rem;line-height:1.7;text-align:left}
.intro__text p{margin-bottom:1.25em}
.intro__text p:last-child{margin-bottom:0}
.intro__text--gray{color:#6b7280;font-size:.9em}

/* Der Abstand unter „Über mich" ebenfalls um 80 % gekürzt. */
/* Die Weißfläche unter dem Manifest-Text, am 05.09.2026 um 70 % gekürzt:
   8rem -> 2.4rem am Desktop, 1.6rem -> 0.48rem auf dem Handy. */
.manifesto{background:#fff;color:#000;padding:0 1.5rem .48rem}
@media(min-width:768px){.manifesto{padding:0 3rem 2.4rem}}
.manifesto__inner{max-width:64rem;margin:0 auto;text-align:center;line-height:.9}
.manifesto__text{font-weight:900;text-transform:none;letter-spacing:0;font-size:clamp(1rem,3vw,2.5rem);line-height:1.3}
.manifesto__text--gray{color:#6b7280;transition:color .3s;cursor:default}
.manifesto__text--gray:hover{color:#000}
.manifesto__text--border{border-bottom:4px solid #000;padding-bottom:.25rem}


/* =========================================================================
   6  STARTSEITE – FORTBILDUNGEN (horizontaler Scroll)
   -------------------------------------------------------------------------
   Grundzustand = Mobil: schlichte Liste untereinander, kein Sticky, kein
   translateX. Das Kleben und Durchschieben kommt erst ab 768 px dazu.
   Die Gesamthöhe des Bereichs setzt site.js aus der Bahnbreite; der Wert
   400vh weiter unten ist nur der Notnagel, falls JavaScript ausfällt.
   ========================================================================= */

.h-services{position:relative;background:#000;color:#fff;padding:5rem 0}
.h-services__sticky{display:block}
.h-services__track{display:flex;flex-direction:column;padding:0 1.5rem}
.h-services__title-card{width:100%;display:flex;flex-direction:column;justify-content:center;padding:0 0 3rem}
.h-services__title-card h2{font-size:clamp(1.5rem,4.8vw,3.6rem);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:1.05}
.h-services__title-card .line{width:3rem;height:2px;background:#fff;margin:1.5rem 0}
.h-services__title-card p{font-size:1.125rem;color:#9ca3af;max-width:24rem}

.h-service-card{position:relative;width:100%;border-top:1px solid rgba(255,255,255,.2);
    padding:2rem 0;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;transition:background .3s}
.h-service-card:hover{background:rgba(255,255,255,.05)}
.h-service-card__top{display:flex;justify-content:space-between;align-items:flex-start}
.h-service-card__num{font-size:3rem;font-weight:100;opacity:.5;line-height:1}
.h-service-card__arrow{width:3rem;height:3rem;border:1px solid #fff;border-radius:50%;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s,color .3s}
.h-service-card__arrow svg{width:1rem;height:1rem}
.h-service-card:hover .h-service-card__arrow{background:#fff;color:#000}
/* hyphens:none – der Umbruch steht als <br> zwischen den Wörtern im
   Theme. Ohne diese Zeile trennte der Browser zusätzlich mitten in
   „KI-KOMPETENZ" und „ARBEITSALLTAG". */
.h-service-card h3{font-size:clamp(1.5rem,5vw,2rem);font-weight:700;margin-bottom:1.25rem;
    text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;hyphens:none}
.h-service-card ul{color:#d1d5db}
.h-service-card li{display:flex;align-items:flex-start;gap:.75rem;padding:.5rem 0}
.h-service-card li::before{content:'';width:.25rem;height:.25rem;background:#fff;border-radius:50%;flex-shrink:0;margin-top:.7em}
.h-services__spacer{display:none}

/* Der Titel ist der Link. Das ::after legt sich über die ganze Karte,
   damit auch der Pfeil und jede andere Stelle der Karte klickbar sind. */
.h-service-card__link{display:inline-block}
.h-service-card__link::after{content:'';position:absolute;inset:0;z-index:1}
.h-service-card:focus-within{outline:2px solid #fff;outline-offset:-2px;background:rgba(255,255,255,.05)}
.h-service-card__link:focus-visible{outline:none}

/* ---- ab 768 px: klebender Bereich mit horizontaler Bahn ---- */
@media(min-width:768px){
    .h-services{height:400vh;padding:0}
    .h-services__sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center}
    .h-services__track{flex-direction:row;align-items:center;padding:0 0 0 3rem;will-change:transform}
    .h-services__title-card{width:45vw;min-height:60vh;flex-shrink:0;padding:0 4rem 0 0}
    /* Die Schrift muss so bemessen sein, dass nach der Trennung wenigstens
       „BILDUNGEN" in die Spalte passt. Sonst bricht das Wort ein zweites
       Mal um und es steht wieder Unsinn da. */
    .h-services__title-card h2{font-size:clamp(1.35rem,2.64vw,3rem)}
    .h-services__title-card p{font-size:1.25rem}
    .h-service-card{width:60vw;min-height:60vh;flex-shrink:0;
        border-top:none;border-left:1px solid rgba(255,255,255,.2);padding:2rem 3rem}
    .h-service-card__num{font-size:3.75rem}
    .h-service-card h3{font-size:clamp(1.5rem,2.6vw,2.25rem)}
    /* Kleiner Auslauf am Ende, damit die letzte Karte nicht am Rand klebt –
       bewusst schmal, sonst endet der Bereich mit einer leeren Fläche. */
    .h-services__spacer{display:block;width:3rem;flex-shrink:0}
}

@media(min-width:1024px){
    .h-services__title-card{width:34vw}
    .h-service-card{width:45vw}
}

/* ---- Wer reduzierte Bewegung eingestellt hat, bekommt die Liste ----
   Muss nach dem 768-px-Block stehen, damit es gewinnt. */
@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .h-services{height:auto!important;padding:5rem 0}
    .h-services__sticky{position:static;height:auto;overflow:visible;display:block}
    .h-services__track{flex-direction:column;padding:0 1.5rem;transform:none!important;will-change:auto}
    .h-services__title-card{width:100%;min-height:0;padding:0 0 3rem}
    .h-service-card{width:100%;min-height:0;border-left:none;border-top:1px solid rgba(255,255,255,.2);padding:2rem 0}
    .h-services__spacer{display:none}
    @media(min-width:768px){
        .h-services__track{padding:0 3rem}
        .h-service-card{padding:2rem 0}
    }
}


/* =========================================================================
   7  STARTSEITE – ZIELGRUPPEN
   -------------------------------------------------------------------------
   Rein typografisch aufgebaut: große Nummer, Titel, Beschreibung, Link.
   Bewusst ohne Bilder.
   ========================================================================= */

.audience{background:#fff;color:#000;padding:4rem 1.5rem}
@media(min-width:768px){.audience{padding:5rem 3rem}}
.audience__inner{max-width:72rem;margin:0 auto}
.audience__header{text-align:center;margin-bottom:2.5rem}
.audience__header h2{font-size:clamp(2rem,5vw,3.75rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.9}

/* Ohne Schaltflächen darunter dürfen die Blöcke deutlich enger stehen. */
.audience__item{display:grid;grid-template-columns:1fr;gap:.25rem;
    padding:1.75rem 0;border-top:1px solid rgba(0,0,0,.12)}
.audience__item:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
@media(min-width:768px){
    .audience__item{grid-template-columns:minmax(6rem,11rem) 1fr;gap:2.5rem;padding:2.25rem 0;align-items:center}
}
.audience__num{font-size:clamp(2.75rem,6vw,4.5rem);font-weight:900;color:rgba(0,0,0,.12);line-height:.85;display:block}
.audience__content h3{font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:900;text-transform:uppercase;
    letter-spacing:-.02em;line-height:1;margin-bottom:.5rem}
.audience__content p{font-size:clamp(1rem,1.7vw,1.25rem);font-weight:300;color:#4b5563;max-width:38rem;line-height:1.55}


/* =========================================================================
   8  KONTAKT & FORMULAR
   ========================================================================= */

.contact{background:#fff;color:#000;padding:6rem 1.5rem}
@media(min-width:768px){.contact{padding:6rem 3rem}}
.contact__inner{max-width:80rem;margin:0 auto;display:grid;grid-template-columns:1fr;gap:4rem}
/* Rechts steht nur noch der Kasten „Direkt schreiben", deshalb bekommt
   das Formular links mehr Platz. */
@media(min-width:1024px){.contact__inner{grid-template-columns:1.6fr 1fr;gap:4rem}}
.contact__header{margin-bottom:2.5rem}
.contact__header h2{font-size:clamp(2rem,5vw,3rem);font-weight:900;text-transform:uppercase;
    letter-spacing:-.02em;line-height:1;margin-bottom:1rem}
.contact__header p{color:#4b5563;max-width:34rem}

.form__row{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.form__row{grid-template-columns:1fr 1fr}}
.form__group{margin-bottom:1.5rem}
.form__group label{display:block;font-size:.875rem;font-weight:700;color:#000;margin-bottom:.5rem}
.form__group input,.form__group textarea,.form__group select{width:100%;border:1px solid rgba(0,0,0,.2);
    padding:.75rem;color:#000;background:#fff;outline:none;transition:border-color .3s;
    font-family:inherit;font-size:1rem;min-height:44px;border-radius:0;-webkit-appearance:none;appearance:none}
.form__group select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right .75rem center;background-size:1.1rem;padding-right:2.5rem}
.form__group input::placeholder,.form__group textarea::placeholder{color:#9ca3af}
.form__group input:focus,.form__group textarea:focus,.form__group select:focus{border-color:#000}
.form__group textarea{resize:vertical;min-height:8rem}

/* Das Häkchen: Der eigentliche Anfasser ist das <label> – es ist über die
   volle Breite und mindestens 44 px hoch anklickbar und schaltet die Box
   mit. Das Kästchen selbst wird zusätzlich auf 1,5 rem vergrößert, damit
   es sich auch direkt bequem treffen lässt. */
.form__checkbox{display:flex;gap:.75rem;align-items:flex-start;margin:1.5rem 0;min-height:44px}
.form__checkbox input{margin:.6rem 0;accent-color:#000;width:1.5rem;height:1.5rem;flex-shrink:0}
.form__checkbox label{font-size:.8125rem;color:#4b5563;padding:.75rem 0;display:block;min-height:44px}
.form__checkbox a{color:#000;text-decoration:underline}
.form__checkbox a:hover{text-decoration:none}

/* Honigtopf gegen Spam: für Menschen unsichtbar und nicht erreichbar,
   Bots füllen ihn trotzdem aus. Kein Captcha, kein fremder Dienst. */
.form__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Rückmeldung nach dem Absenden. Wird über :target sichtbar, also auch
   ohne JavaScript – kontakt.php hängt #anfrage-ok bzw. #anfrage-fehler an. */
.form__hinweis{display:none;padding:1.25rem 1.5rem;margin-bottom:2rem;border-left:4px solid;font-size:.9375rem}
.form__hinweis:target,.form__hinweis.ist-sichtbar{display:block}
.form__hinweis--ok{background:#f0fdf4;border-color:#16a34a;color:#14532d}
.form__hinweis--fehler{background:#fef2f2;border-color:#dc2626;color:#7f1d1d}
.form__hinweis strong{display:block;margin-bottom:.25rem;font-weight:700}
.form__hinweis a{color:inherit;text-decoration:underline}

.btn-submit{display:inline-flex;align-items:center;gap:.5rem;background:#000;color:#fff;
    padding:1rem 2rem;min-height:44px;font-weight:700;font-size:.875rem;letter-spacing:.05em;
    text-transform:uppercase;border:1px solid #000;transition:all .3s}
.btn-submit:hover{background:#fff;color:#000}
.btn-submit svg{width:1.25rem;height:1.25rem;transition:transform .3s}
.btn-submit:hover svg{transform:translateX(.25rem)}

.info-box{background:#f9fafb;padding:2rem;margin-bottom:1.5rem}
.info-box h3{font-size:1.25rem;font-weight:600;color:#000;margin-bottom:1rem}
.info-box p{color:#4b5563;margin-bottom:1rem;font-size:.875rem}
.info-box a{color:#000;font-weight:700;gap:.5rem}
.info-box a:hover{opacity:.7}
.info-box--black{background:#000;color:#fff}
.info-box--black h3{color:#fff}
.info-box--black li{color:#d1d5db;display:flex;gap:.75rem;padding:.5rem 0;font-size:.875rem}
.info-box--black svg{width:1.25rem;height:1.25rem;color:#fff;flex-shrink:0;margin-top:.125rem}
.info-box--bordered{border:1px solid rgba(0,0,0,.1);background:#fff}
.info-box--bordered h3{color:#000}
.info-box--bordered p{color:#000}
.info-box--bordered p span{font-weight:700}


/* =========================================================================
   9  FUSSZEILE
   ========================================================================= */

.footer-cta{background:#000;color:#fff;padding:4rem 1.5rem;text-align:center;border-top:1px solid rgba(255,255,255,.1)}
.footer-cta h2{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;margin-bottom:1rem}
.footer-cta p{color:rgba(255,255,255,.75);max-width:42rem;margin:0 auto 2rem}
.footer-cta .btn{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:#000;
    padding:1rem 2rem;min-height:44px;font-weight:700;border:1px solid #fff;transition:all .3s}
.footer-cta .btn:hover{background:#000;color:#fff}
.footer-cta .btn svg{width:1rem;height:1rem;transition:transform .3s}
.footer-cta .btn:hover svg{transform:translateX(.25rem)}

.footer-main{background:#000;color:#fff;padding:5rem 1.5rem 2.5rem;border-top:1px solid rgba(255,255,255,.1)}
@media(min-width:768px){.footer-main{padding:5rem 3rem 2.5rem}}
.footer-main__grid{display:grid;grid-template-columns:1fr;gap:3rem;margin-bottom:4rem}
@media(min-width:768px){.footer-main__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-main__grid{grid-template-columns:2fr 1.2fr 1fr 1fr}}
.footer-main h3{font-size:1.875rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1.5rem}
.footer-main p{color:#9ca3af;font-size:.875rem;line-height:1.7}
.footer-main h4{font-weight:700;margin-bottom:1rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.1em}
.footer-main li{margin-bottom:.25rem}
.footer-main a{color:#9ca3af;font-size:.875rem;transition:color .3s}
.footer-main a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:2rem;display:flex;
    flex-direction:column;gap:1rem;text-align:center;font-size:.75rem;color:#6b7280}
@media(min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between;text-align:left}}


/* =========================================================================
   10  UNTERSEITEN – die vier Fortbildungen
   ========================================================================= */

.subpage{display:block}

/* Brotkrümel */
.breadcrumb{background:#000;color:#9ca3af;padding:6rem 1.5rem 0;font-size:.8125rem}
@media(min-width:768px){.breadcrumb{padding:7rem 3rem 0}}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;max-width:72rem;margin:0 auto;list-style:none}
.breadcrumb li{display:flex;align-items:center;gap:.5rem}
.breadcrumb li+li::before{content:'›';color:#4b5563}
.breadcrumb a{color:#9ca3af}
.breadcrumb a:hover{color:#fff}
.breadcrumb [aria-current='page']{color:#fff;font-weight:600}

/* Kopfbereich der Unterseite */
.subpage__hero{background:#000;color:#fff;padding:2rem 1.5rem 5rem}
@media(min-width:768px){.subpage__hero{padding:2rem 3rem 6rem}}
.subpage__hero-inner{max-width:72rem;margin:0 auto}
.subpage__hero h1{font-size:clamp(2rem,5.5vw,4rem);font-weight:900;text-transform:uppercase;
    letter-spacing:-.03em;line-height:1.02;max-width:22ch;hyphens:auto}
.subpage__hero h1 span{display:block;font-size:clamp(1.05rem,2.2vw,1.75rem);font-weight:300;
    text-transform:none;letter-spacing:0;line-height:1.4;color:#9ca3af;margin-top:1.25rem;max-width:40ch;hyphens:none}
.subpage__facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.5rem}
.subpage__facts li{border:1px solid rgba(255,255,255,.25);padding:.5rem 1rem;font-size:.75rem;
    font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#d1d5db}

/* Textbereiche */
.subpage__section{background:#fff;color:#000;padding:4rem 1.5rem}
@media(min-width:768px){.subpage__section{padding:5rem 3rem}}
.subpage__section--grau{background:#f9fafb}
.subpage__inner{max-width:72rem;margin:0 auto}
.subpage__section h2{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:900;text-transform:uppercase;
    letter-spacing:-.02em;line-height:1;margin-bottom:2rem}
.subpage__section p{color:#374151;font-size:1.0625rem;line-height:1.75;margin-bottom:1.25rem;max-width:62ch}
.subpage__section p:last-child{margin-bottom:0}
.subpage__section strong{color:#000;font-weight:700}

/* „Was vermittelt wird" – 4 bis 6 Blöcke */
.subpage__blocks{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.subpage__blocks{grid-template-columns:repeat(2,1fr);gap:2.5rem 3rem}}
.subpage__block h3{font-size:1.125rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
    margin-bottom:.75rem;padding-top:1rem;border-top:2px solid #000}
.subpage__block p{font-size:1rem;color:#4b5563;margin-bottom:0}

/* Aufzählungen.
   Bewusst KEIN display:flex auf dem <li>: Enthält die Zeile ausgezeichnete
   Stellen wie <strong>, macht Flex daraus eigene Elemente und setzt den
   gap zwischen jedes davon. Im Text klaffen dann Lücken. Der Punkt wird
   deshalb absolut gesetzt, die Zeile bleibt ganz normaler Fließtext. */
.subpage__list{margin-top:.5rem;margin-bottom:1.75rem}
.subpage__list li{position:relative;padding:.4rem 0 .4rem 1.5rem;color:#374151;line-height:1.7;max-width:62ch}
.subpage__list li::before{content:'';position:absolute;left:.3rem;top:1.15em;
    width:.375rem;height:.375rem;background:#000;border-radius:50%}

/* Häufige Fragen als Aufklappmenü.
   Gebaut mit <details>/<summary>: Der Antworttext steht vollständig im
   HTML und ist nur optisch zugeklappt. Suchmaschinen und KI-Suchen lesen
   ihn deshalb ganz normal, das FAQPage-Schema bleibt gültig. Zudem
   funktioniert das Auf- und Zuklappen ohne JavaScript und ist von Haus
   aus mit der Tastatur bedienbar. */
.faq__item{border-top:1px solid rgba(0,0,0,.12)}
.faq__item:last-child{border-bottom:1px solid rgba(0,0,0,.12)}

.faq__item summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
    padding:1.25rem 0;min-height:44px;cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover .faq__q{color:#4b5563}
.faq__item summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}

.faq__q{font-size:clamp(1.05rem,2.2vw,1.375rem);font-weight:700;line-height:1.35;max-width:52ch;margin:0}

/* Zeichen rechts: Winkel nach unten, im geöffneten Zustand nach oben. */
.faq__zeichen{flex-shrink:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;
    position:relative;margin-top:.1rem}
.faq__zeichen::before{content:'';width:.6rem;height:.6rem;border-right:2px solid #000;border-bottom:2px solid #000;
    transform:translateY(-25%) rotate(45deg);transition:transform .25s ease}
.faq__item[open] .faq__zeichen::before{transform:translateY(15%) rotate(-135deg)}

.faq__a{padding:0 0 1.5rem}
.faq__a p{margin-bottom:1rem}
.faq__a p:last-child{margin-bottom:0}

@media(prefers-reduced-motion:reduce){
    .faq__zeichen::before{transition:none}
}

/* Abschlussbereich mit Formular */
.subpage__cta{background:#000;color:#fff;padding:4rem 1.5rem}
@media(min-width:768px){.subpage__cta{padding:5rem 3rem}}
.subpage__cta .subpage__inner{max-width:48rem}
.subpage__cta h2{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:900;text-transform:uppercase;
    letter-spacing:-.02em;line-height:1;margin-bottom:1rem}
.subpage__cta>.subpage__inner>p{color:#9ca3af;margin-bottom:2.5rem;max-width:56ch}
/* Formular auf schwarzem Grund */
.subpage__cta .form__group label{color:#fff}
/* Hier bewusst background-COLOR statt der Kurzform background.
   Die Kurzform würde auch background-repeat, -position und -size
   zurücksetzen. Der Pfeil im Auswahlfeld würde sich dann über das ganze
   Feld kacheln und über dem Text liegen. */
.subpage__cta .form__group input,
.subpage__cta .form__group textarea,
.subpage__cta .form__group select{background-color:#000;color:#fff;border-color:rgba(255,255,255,.3)}
.subpage__cta .form__group input:focus,
.subpage__cta .form__group textarea:focus,
.subpage__cta .form__group select:focus{border-color:#fff}
.subpage__cta .form__group select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.subpage__cta .form__group input::placeholder,
.subpage__cta .form__group textarea::placeholder{color:#6b7280}
.subpage__cta .form__checkbox label{color:#9ca3af}
.subpage__cta .form__checkbox a{color:#fff}
.subpage__cta .btn-submit{background:#fff;color:#000;border-color:#fff}
.subpage__cta .btn-submit:hover{background:#000;color:#fff}
.subpage__cta .form__hinweis--ok{background:#052e16;border-color:#22c55e;color:#dcfce7}
.subpage__cta .form__hinweis--fehler{background:#450a0a;border-color:#ef4444;color:#fee2e2}

/* Querverweise auf die anderen Fortbildungen */
.subpage__weitere{background:#fff;color:#000;padding:4rem 1.5rem}
@media(min-width:768px){.subpage__weitere{padding:5rem 3rem}}
.subpage__weitere h2{font-size:clamp(1.25rem,3vw,1.75rem);font-weight:900;text-transform:uppercase;
    letter-spacing:.02em;margin-bottom:2rem}
.subpage__weitere ul{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:768px){.subpage__weitere ul{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.subpage__weitere li{border-top:2px solid #000}
.subpage__weitere a{display:flex;align-items:center;min-height:44px;padding:1rem 0;
    font-weight:700;font-size:.9375rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.3}
.subpage__weitere a:hover{color:#6b7280}
.subpage__hinweis{margin-top:2.5rem;font-size:.9rem;line-height:1.6;color:#6b7280;max-width:52rem}
.subpage__hinweis a{display:inline;color:#000;text-decoration:underline;padding:0;min-height:0;font-weight:600;text-transform:none}


/* =========================================================================
   11  RECHTSSEITEN – Impressum & Datenschutz
   ========================================================================= */

body.legal{background:#fff;color:#000;padding:2rem 1.5rem}
.legal .container{max-width:800px;margin:0 auto;padding:2rem;background:#f9fafb}
@media(min-width:768px){.legal .container{padding:4rem;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.05)}}
.legal .back{gap:.5rem;margin-bottom:2rem;color:#4b5563;font-weight:600;font-size:.875rem}
.legal .back:hover{color:#000}
.legal h1{font-size:clamp(1.75rem,5vw,2.5rem);font-weight:900;margin-bottom:2rem}
.legal h2{font-size:1.25rem;font-weight:700;margin:2.5rem 0 1rem;color:#111}
.legal h3{font-size:1.0625rem;font-weight:600;margin:1.5rem 0 .5rem;color:#333}
.legal p{margin-bottom:1rem;color:#374151;line-height:1.8}
.legal ul{margin:1rem 0 1.5rem 1.5rem;color:#374151;list-style:disc}
.legal li{margin-bottom:.5rem;line-height:1.7}
.legal a{color:#000;text-decoration:underline}
.legal a:hover{text-decoration:none}
.legal .hinweis{background:#fff;border-left:4px solid #000;padding:1rem 1.25rem;margin:1.5rem 0}
.legal .hinweis p{margin-bottom:0;font-size:.9375rem}
.legal .footer{text-align:center;margin-top:3rem;padding-top:2rem;border-top:1px solid #e5e7eb;color:#6b7280;font-size:.875rem}
.legal .footer a{color:#6b7280;text-decoration:none;margin:0 .5rem}
.legal .footer a:hover{color:#000}


/* =========================================================================
   12  EIGENER MAUSZEIGER
   -------------------------------------------------------------------------
   Ein Kreis, der alles unter sich farblich umkehrt: auf Schwarz wird er
   weiß, auf Weiß schwarz. Das macht mix-blend-mode:difference zusammen mit
   einer weißen Fläche ganz von allein, ohne dass irgendwo Farben gepflegt
   werden müssen.

   Nur für Geräte mit echter Maus. Auf Touchgeräten gibt es keinen Zeiger,
   den man ersetzen könnte, und der Systemzeiger wird dort auch nicht
   ausgeblendet. Eingeschaltet wird das Ganze von site.js über die Klasse
   am <html>-Element, damit ohne JavaScript der normale Zeiger bleibt.
   ========================================================================= */

.zeiger{display:none}

@media(hover:hover) and (pointer:fine){

    html.eigener-zeiger,
    html.eigener-zeiger *{cursor:none}

    /* In Textfeldern bleibt der Systemzeiger sichtbar. Ohne ihn ist nicht
       zu erkennen, wo man gerade schreibt oder markiert. */
    html.eigener-zeiger input,
    html.eigener-zeiger textarea{cursor:text}
    html.eigener-zeiger select{cursor:pointer}

    .zeiger{display:block;position:fixed;top:0;left:0;z-index:9999;
        width:1.75rem;height:1.75rem;margin:-.875rem 0 0 -.875rem;
        border-radius:50%;background:#fff;mix-blend-mode:difference;
        pointer-events:none;opacity:0;
        transition:width .2s ease,height .2s ease,margin .2s ease,opacity .2s ease;
        will-change:transform}

    /* Erst zeigen, wenn die Maus das erste Mal bewegt wurde. */
    .zeiger--aktiv{opacity:1}

    /* Über Anklickbarem wächst der Kreis. Das ersetzt die Hand, die sonst
       der Systemzeiger zeigen würde. */
    .zeiger--gross{width:3.5rem;height:3.5rem;margin:-1.75rem 0 0 -1.75rem}
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt den Systemzeiger. */
@media(prefers-reduced-motion:reduce){
    html.eigener-zeiger,
    html.eigener-zeiger *{cursor:auto}
    .zeiger{display:none}
}


/* =========================================================================
   13  ANPASSUNGEN NUR FÜR KLEINE BILDSCHIRME
   -------------------------------------------------------------------------
   Auf dem Handy steht alles untereinander. Dadurch verschwimmen Grenzen,
   die auf dem Desktop durch das Nebeneinander klar sind, und großzügige
   Abstände wirken schnell wie Leerlauf. Beides wird hier korrigiert.
   Am Desktop ändert sich nichts.
   ========================================================================= */

@media(max-width:768px){

    /* ---- Kontaktbereich abgesetzt ----
       Untereinander gelesen sah „Anfrage senden" aus wie ein weiterer
       Punkt der Zielgruppenliste. Umgekehrte Farben trennen die beiden
       Bereiche sofort erkennbar voneinander. */
    .contact{background:#000;color:#fff}
    .contact__header p{color:#9ca3af}

    .contact .form__group label{color:#fff}
    .contact .form__group input,
    .contact .form__group textarea,
    .contact .form__group select{background-color:#000;color:#fff;border-color:rgba(255,255,255,.3)}
    .contact .form__group input:focus,
    .contact .form__group textarea:focus,
    .contact .form__group select:focus{border-color:#fff}
    .contact .form__group select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
    .contact .form__group input::placeholder,
    .contact .form__group textarea::placeholder{color:#6b7280}

    .contact .form__checkbox label{color:#9ca3af}
    .contact .form__checkbox a{color:#fff}
    .contact .form__checkbox input{accent-color:#fff}

    .contact .btn-submit{background:#fff;color:#000;border-color:#fff}
    .contact .btn-submit:hover{background:#000;color:#fff}

    .contact .info-box{background:#111;color:#fff}
    .contact .info-box h3{color:#fff}
    .contact .info-box p{color:#9ca3af}
    .contact .info-box a{color:#fff}

    .contact .form__hinweis--ok{background:#052e16;border-color:#22c55e;color:#dcfce7}
    .contact .form__hinweis--fehler{background:#450a0a;border-color:#ef4444;color:#fee2e2}

    /* ---- Fußzeile enger ----
       Die Einträge unter Fortbildungen, Navigation und Rechtliches standen
       weit auseinander. Der Zeilenabstand entfällt, die Tippfläche bleibt
       mit 40 px aber groß genug, um sie sicher zu treffen. */
    .footer-main{padding:3rem 1.5rem 2rem}
    .footer-main__grid{gap:2rem;margin-bottom:2.5rem}
    .footer-main h3{margin-bottom:1rem}
    .footer-main h4{margin-bottom:.5rem}
    .footer-main li{margin-bottom:0}
    .footer-main a{min-height:2.5rem}
}


/* =========================================================================
   14  TEXTSEITEN IM CMS (Impressum, Datenschutz, Login, 404)
   -------------------------------------------------------------------------
   Diese Seiten laufen jetzt durch dasselbe theme.php wie alle anderen.
   Sie brauchen deshalb eigene Regeln statt der früheren body.legal-Klasse.
   ========================================================================= */

.legal-inhalt{color:#374151}
.legal-inhalt h2{font-size:1.25rem;font-weight:700;margin:2.5rem 0 1rem;color:#111}
.legal-inhalt h3{font-size:1.0625rem;font-weight:600;margin:1.5rem 0 .5rem;color:#333}
.legal-inhalt p{margin-bottom:1rem;line-height:1.8;max-width:62ch}
.legal-inhalt ul{margin:1rem 0 1.5rem 1.5rem;list-style:disc}
.legal-inhalt li{margin-bottom:.5rem;line-height:1.7;max-width:62ch}
.legal-inhalt a{color:#000;text-decoration:underline}
.legal-inhalt a:hover{text-decoration:none}
.legal-inhalt strong{color:#000;font-weight:700}
.legal-inhalt .hinweis{background:#f9fafb;border-left:4px solid #000;padding:1rem 1.25rem;margin:1.5rem 0}
.legal-inhalt .hinweis p{margin-bottom:0;font-size:.9375rem}

/* Das Login-Formular von WonderCMS erscheint ebenfalls in diesem Bereich. */
.legal-inhalt input[type="password"],
.legal-inhalt input[type="text"]{width:100%;max-width:24rem;border:1px solid rgba(0,0,0,.2);
    padding:.75rem;font-family:inherit;font-size:1rem;min-height:44px}
.legal-inhalt .wbtn,
.legal-inhalt button[type="submit"]{display:inline-flex;align-items:center;background:#000;color:#fff;
    padding:1rem 2rem;min-height:44px;font-weight:700;border:1px solid #000;margin-top:1rem;cursor:pointer}


/* =========================================================================
   15  SEITE „ÜBER MICH"
   -------------------------------------------------------------------------
   Die Seite benutzt die vorhandenen Unterseiten-Klassen. Neu sind nur der
   hervorgehobene Mail-Link am Ende und ein etwas ruhigerer Zeilenfall für
   den Fließtext, weil hier nur gelesen und nicht überflogen wird.
   ========================================================================= */

.subpage__mail{display:inline-flex;align-items:center;min-height:44px;
    font-size:1.125rem;font-weight:700;color:#000;
    border-bottom:2px solid #000;padding-bottom:.15rem}
.subpage__mail:hover{border-bottom-color:transparent}
.subpage__section--grau .subpage__mail{color:#000}

/* Der Absatz mit dem Hinweis auf die Begleitung darüber hinaus. */
.subpage__section p.hinweis-text{color:#6b7280;font-size:.9375rem}