/* Förderschmiede v2, Unterseiten: Impressum, Datenschutz, AGB und 404 (Knoten seite).
   Die Hauptteile stammen wörtlich aus der v1, die Klassen deshalb auch. Nur Variablen aus tokens.css. */

/* Große Überschrift der Kopfsektion und Knopf mit Rand, auf der Startseite nicht gebraucht */
.h-mega{font-family:var(--f-marke);font-weight:400;font-size:var(--t-mega);line-height:.98;letter-spacing:-.005em;color:#fff}
.knopf-rand{color:#fff}
.knopf-rand::before{background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);clip-path:none}
@media(hover:hover){.knopf-rand:hover::before{background:rgba(255,255,255,.1)}}

/* Kopfsektion: dunkel unter der Navigation, unten die 37,5-Grad-Kante */
.recht-kopf{padding-top:calc(var(--nav-hoehe) + var(--sat) + clamp(48px,6vw,112px));padding-bottom:calc(clamp(48px,5vw,88px) + var(--ecke))}
.recht-titel{font-size:clamp(2.25rem,1.2rem + 4.6vw,5rem);hyphens:manual;max-width:16ch;overflow-wrap:break-word}

/* Rechtstext: ruhige Lesespalte */
.recht{padding-top:clamp(48px,5vw,96px);padding-bottom:calc(var(--sektion) + var(--ecke) * .5)}
.recht-text{max-width:74ch;overflow-wrap:anywhere;color:var(--grau)}
.recht-text > * + *{margin-top:1em}
.recht-text h2{margin-top:2.2em;font-family:var(--f-marke);font-weight:400;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);line-height:1.15;color:var(--deep)}
.recht-text h2:first-child{margin-top:0}
.recht-text h3{margin-top:1.8em;font-weight:500;font-size:var(--t-h3);line-height:1.3;color:var(--deep)}
.recht-text h4{margin-top:1.5em;font-weight:600;font-size:1.0625rem;line-height:1.4;color:var(--deep)}
.recht-text h2 + *,.recht-text h3 + *,.recht-text h4 + *{margin-top:.6em}
.recht-text ul{padding-left:1.25em;list-style:disc}
.recht-text ol{padding-left:1.25em;list-style:decimal}
.recht-text ul.ohne-punkt{list-style:none;padding-left:0}
.recht-text li + li{margin-top:.35em}
.recht-text a{color:var(--signal-dunkel);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media(hover:hover){.recht-text a:hover{text-decoration-thickness:2px}}
/* Trefferfläche jedes Links im Rechtstext mindestens 44 mal 44 px, mit Maus und Finger. Der Innenabstand oben und unten
   füllt die Zeile auf 45 px auf, die Zeile mit dem Link wird dafür etwas höher: so liegen zwei Links auf aufeinander
   folgenden Zeilen (Telefon und E-Mail) nicht übereinander. Seitlich gleicht ein negativer Rand den Innenabstand aus,
   der Text bleibt an seiner Stelle; kurze Wörter wie "hier" bekommen die Mindestbreite. */
.recht-text a{display:inline-block;min-width:44px;padding:10px 7px;padding-block:max(0px,calc((45px - 1lh) / 2));margin-inline:-7px}
.recht-ergaenzung{padding:20px 22px;border-left:3px solid var(--signal);background:var(--signal-10)}
.recht-ergaenzung > * + *{margin-top:.8em}
.recht-ergaenzung h4{margin-top:0}

/* Datenschutz: Inhaltsverzeichnis links, auf breiten Schirmen mitlaufend */
.recht-raster{display:grid;gap:var(--luft-5)}
.recht-inhalt{padding:20px 22px;background:var(--hell);align-self:start}
.recht-inhalt-titel{margin-bottom:8px;font-weight:600;font-size:var(--t-kicker);letter-spacing:.16em;text-transform:uppercase;color:var(--signal-dunkel)}
.recht-inhalt ol{list-style:none;padding:0}
.recht-inhalt a{display:flex;align-items:center;min-height:44px;color:var(--deep);text-decoration:none;font-weight:500;line-height:1.3}
@media(hover:hover){.recht-inhalt a:hover{color:var(--signal);text-decoration:underline}}
@media(min-width:1024px){
  .recht-raster{grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:var(--luft-7);align-items:start}
  .recht-inhalt{position:sticky;top:calc(var(--nav-kompakt) + var(--sat) + 32px);max-height:calc(100vh - var(--nav-kompakt) - var(--sat) - 64px);overflow-y:auto}
}
.recht-text [id]{scroll-margin-top:calc(var(--nav-kompakt) + var(--sat) + 24px)}

/* 404: volle Höhe, Werkstattbild abgedunkelt hinter dem Text */
.u-404{--nach:var(--deep);display:flex;align-items:center;min-height:100vh;min-height:100svh;
  padding-top:calc(var(--nav-hoehe) + var(--sat) + 32px);padding-bottom:calc(var(--ecke) + 48px)}
.u-404 .flaechenbild img{opacity:.5}
.u-404 .flaechenbild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--deep) 0,rgba(3,25,38,.75) 60%,rgba(3,25,38,.45) 100%)}
.u-404 h1{max-width:12ch;text-wrap:balance}
.u-404 .lead{margin-top:var(--luft-4);color:rgba(255,255,255,.9)}
.u-404 .knoepfe{margin-top:var(--luft-5)}
@media(max-width:599px){.u-404 .knoepfe .knopf{width:100%}}

/* Der Footer schließt an eine weiße Fläche an, auf der 404 an die dunkle: dort keine helle Ecke dazwischen */
.unterseite .fuss{--vor:var(--weiss)}
.unterseite:has(.u-404) .fuss{--vor:var(--deep)}