/* ============================================
   FEF-Consulting – Rechtsseiten im V6-Design
   ============================================
   Gilt fuer impressum.html und datenschutz.html.
   Bis auf zwei Dokumentregeln vollstaendig unter .fef-legal gekapselt;
   Cookie-Banner und Einstellungs-Dialog liegen ausserhalb und kommen
   aus consent.css.
   Die Seiteninhalte sind unveraendert – nur die Darstellung folgt V6.
   ============================================ */

/* Inter – lokal gehostet (DSGVO-konform, kein externer Google-Aufruf) */
/* inter-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/inter-v20-latin-regular.woff2') format('woff2'),
         url('fonts/inter-v20-latin-regular.woff') format('woff');
}
/* inter-500 - latin */
@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/inter-v20-latin-500.woff2') format('woff2'),
         url('fonts/inter-v20-latin-500.woff') format('woff');
}
/* inter-600 - latin */
@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/inter-v20-latin-600.woff2') format('woff2'),
         url('fonts/inter-v20-latin-600.woff') format('woff');
}

/* Metrisch angeglichener Fallback: gleicher Umbruch vor und nach dem
   Laden von Inter, dadurch keine Layoutverschiebung (CLS). */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 105.68%;
    ascent-override: 91.67%;
    descent-override: 22.82%;
    line-gap-override: 0%;
}

/* Diese beiden Regeln liegen bewusst ausserhalb der .fef-legal-Kapselung;
   sie betreffen das Dokument selbst und gelten nur auf den Rechtsseiten,
   die diese Datei laden. */
body {
    margin: 0;
}

html {
    /* Die Seite ist ausschliesslich hell gebaut. Ohne diese Angabe faerbt
       der Browser Bildlaufleisten und native Bedienelemente nach der
       Systemeinstellung - auf einem dunkel eingestellten System stuende
       dann eine dunkle Bildlaufleiste neben einer hellen Seite. */
    color-scheme: light;
    scroll-behavior: smooth;
    scroll-padding-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .fef-legal, .fef-legal *,
    .fef-legal *::before,
    .fef-legal *::after {
        animation: none !important;
        transition: none !important;
    }
}

.fef-legal {
    --ink: #090909;
    --paper: #fafafa;
    --muted: #595959;
    --body: #333;
    --line: #dedede;
    --surface: #fff;
    --surface-edge: #dedfe1;
    --max: 1280px;
    --read: 680px;

    /* Dieselbe Rundungsskala wie auf der Startseite (v6.css). Der
       Fussbereich ist auf beiden Seitentypen derselbe und braucht
       deshalb dieselben Werte. */
    --rundung-klein: 8px;
    --rundung-mittel: 12px;
    --rundung-gross: 14px;
    --rundung-kreis: 50%;

    /* Bestandstokens, die auf der Startseite (v6.css) schon galten und
       hier bisher fehlten. */
    --surface-shadow: 0 2px 5px #00000003, 0 7px 20px #00000005;
    --ton-ruhig: #f3f3f3;
    --ton-ruhig-tief: #efefef;

    /* ---- Farbe: neu, buendelt vorhandene Literale (Session 2, G-1/RS-1) ---- */
    --nacht:               #111;
    --nacht-hell:          #252525;
    --nacht-linie:         #333;
    --nacht-kontur:        #414347;
    --nacht-kontur-unten:  #37393c;
    --nacht-kontur-aktiv:  #606770;
    --text-auf-nacht:      #c7c7c7;
    --text-auf-nacht-leise:#bfbfbf;
    --text-leise:          #666;
    --linie-kraeftig:      #ccc;
    --linie-mittel:        #ddd;
    --linie-fein:          #e8e8e8;
    --kontur-aktiv:        #bfc2c6;
    --fokus:               var(--nacht);
    --fokus-auf-nacht:     #fff;

    /* ---- Typografie (px wie Bestand; clamp fliessend zwischen 390 und 1440 px Viewport) ---- */
    --schrift: "Inter", "Inter Fallback", Arial, Helvetica, sans-serif;
    --fs-h1-recht: clamp(27px, 20.5px + 2.19vw, 52px);    /* ⚑ ersetzt clamp(35,3.8vw,52) und clamp(27,7.5vw,40) */
    --fs-h2-recht: clamp(20px, 18.9px + .29vw, 23px);     /* ⚑ */
    --fs-lesen:    clamp(15px, 14.6px + .1vw, 16px);      /* ⚑ Fliesstext Rechtsseiten 15/16 */
    --lh-h1: 1.02;  --lh-h1-mobil: 1.05;  --lh-h2: 1.08;  --lh-h3: 1.14;
    --lh-kompakt: 1.45;  --lh-text: 1.65;  --lh-lesen: 1.75;
    --ls-h1: -.065em;  --ls-h1-mobil: -.055em;  --ls-h2: -.045em;  --ls-h3: -.035em;
    --ls-titel-klein: -.02em;  --ls-eyebrow: .13em;  --ls-eyebrow-mobil: .1em;
    --mass-text: 38em;

    /* ---- Abstaende ---- */
    --raum-1: 4px;  --raum-2: 8px;  --raum-3: 12px;  --raum-4: 16px;  --raum-5: 20px;
    --raum-6: 24px; --raum-7: 32px; --raum-8: 48px;  --raum-9: 64px;  --raum-10: 80px; --raum-11: 100px;
    --rand: 64px;
    --sektion:            clamp(62px, 41px + 5.35vw, 100px);
    --sektion-abschluss:  clamp(58px, 44.8px + 3.38vw, 82px);
    --hero-oben:          clamp(40px, 30.7px + 2.38vw, 65px);
    --karte-innen:        clamp(24px, 20.3px + .95vw, 34px);
    --flow-innen-block:   clamp(13px, 8.2px + 1.24vw, 26px);
    --flow-innen-inline:  clamp(21px, 17.7px + .86vw, 30px);
    --header-hoehe: 80px;

    /* ---- Schatten-Stufen (Werte = Bestand) ---- */
    --schatten-ruhe:        var(--surface-shadow);
    --schatten-hover:       0 2px 6px #00000004, 0 9px 23px #00000008;
    --schatten-abgehoben:   0 2px 6px #00000004, 0 14px 34px #0000000d;
    --schatten-knopf:       inset 0 1px 0 #fff, 0 2px 7px #00000012;
    --schatten-portrait:    0 1px 2px #00000012, 0 10px 26px #00000014;
    --schatten-nacht:       0 8px 24px #00000024;
    --schatten-nacht-aktiv: 0 8px 24px #00000030;
    --schatten-header:      0 1px 0 #ffffff14, 0 10px 30px #00000038;  /* Session 3 */

    /* ---- Ebenen ---- */
    --ebene-deko: -1;
    --ebene-inhalt: 1;
    --ebene-header: 50;
    --ebene-skip: 60;

    /* ---- Bewegung ---- */
    --dauer-sofort: 90ms;
    --dauer-kurz: 180ms;
    --dauer-zustand: 225ms;
    --dauer-mittel: 260ms;
    --dauer-linie: 460ms;
    --dauer-eintritt: 600ms;
    --dauer-lang: 650ms;
    --dauer-puls: 800ms;
    --dauer-glanz: 520ms;
    --staffel: 80ms;
    --glanz-breite: 110px;
    --kurve-aus: cubic-bezier(.22,.61,.36,1);
    --kurve-glanz: ease;
    --kurve-puls: ease-out;
    --karte-uebergang: border-color var(--dauer-mittel) var(--kurve-aus),
                       box-shadow var(--dauer-mittel) var(--kurve-aus),
                       transform var(--dauer-mittel) var(--kurve-aus);

    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--schrift);
    -webkit-font-smoothing: antialiased;
}

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

.fef-legal a {
    color: inherit;
}

.fef-legal img {
    max-width: 100%;
}

.fef-legal .container {
    width: calc(100% - 2 * var(--rand));
    max-width: var(--max);
    margin-inline: auto;
}

.fef-legal a:focus-visible,
.fef-legal button:focus-visible {
    outline: 3px solid var(--fokus);
    outline-offset: 6px;
}

.fef-legal .header a:focus-visible,
.fef-legal .footer a:focus-visible {
    outline-color: var(--fokus-auf-nacht);
}


/* Sprunglink - gleiche Bauart wie auf der Startseite. Fest positioniert,
   damit er unabhaengig vom Scrollstand im Bild liegt, sobald er den Fokus
   bekommt. Er ist zugleich das Ziel, auf das der Fokus nach einer
   Entscheidung im Cookie-Banner faellt. */
.fef-legal .skip {
    position: fixed;
    left: 20px;
    top: -90px;
    padding: 18px;
    background: #fff;
    color: var(--ink);
    z-index: var(--ebene-skip);
    text-decoration: none;
}

/* Gleiche Bauart wie auf der Startseite: sichtbar, sobald er den Fokus
   hat. Ob er ihn nach einer Entscheidung bekommt, entscheidet das Skript
   anhand der Bedienart. */
.fef-legal .skip:focus {
    top: 10px;
}

/* Der Inhalt traegt den Fokus nur als Sprungziel, nicht als Bedienelement -
   deshalb ohne eigenen Umriss. */
.fef-legal .legal-page:focus {
    outline: none;
}


/* Kopfbereich */
.fef-legal .header {
    background: var(--ink);
}

.fef-legal .header-content {
    display: flex;
    align-items: center;
    min-height: var(--header-hoehe);
}

.fef-legal .logo {
    display: inline-flex;
    text-decoration: none;
}

.fef-legal .logo-img {
    width: 170px;
    height: auto;
    display: block;
}


/* Inhalt */
.fef-legal .legal-page {
    display: block;
    padding-block: 80px 100px;
}

.fef-legal .legal-page .container {
    max-width: var(--read);
}

.fef-legal .back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid #c9ccd0;
    transition: color 180ms, border-color 180ms;
}

.fef-legal .back-link:active {
    opacity: .72;
    transition: opacity var(--dauer-sofort), color 180ms, border-color 180ms;
}

@media (hover: hover) and (pointer: fine) {
  .fef-legal .back-link:hover {
      color: var(--ink);
      border-bottom-color: var(--ink);
  }
}

.fef-legal h1,
.fef-legal h2,
.fef-legal h3,
.fef-legal p,
.fef-legal li {
    overflow-wrap: break-word;
    hyphens: auto;
}

.fef-legal h1 {
    font-size: var(--fs-h1-recht);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.045em;
    margin: 34px 0 44px;
}

.fef-legal h2 {
    font-size: var(--fs-h2-recht);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 64px 0 18px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.fef-legal h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.005em;
    margin: 34px 0 12px;
}

.fef-legal p {
    font-size: var(--fs-lesen);
    line-height: var(--lh-lesen);
    color: var(--body);
    margin: 0 0 16px;
}

.fef-legal ul {
    margin: 0 0 16px;
    padding-left: 20px;
}

.fef-legal li {
    font-size: var(--fs-lesen);
    line-height: var(--lh-lesen);
    color: var(--body);
    margin-bottom: 8px;
}

.fef-legal strong {
    font-weight: 600;
    color: var(--ink);
}

.fef-legal .legal-page a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #b4b8bd;
    transition: text-decoration-color 180ms;
    overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .fef-legal .legal-page a:hover {
      text-decoration-color: var(--ink);
  }
}

.fef-legal .contact-block {
    background: var(--surface);
    border: 1px solid var(--surface-edge);
    border-radius: var(--rundung-mittel);
    padding: 28px 30px;
    margin-bottom: 8px;
    box-shadow: var(--schatten-ruhe);
}

.fef-legal .contact-block p {
    margin: 0 0 4px;
    color: var(--ink);
}

.fef-legal .contact-block p:last-child {
    margin-bottom: 0;
}


/* Fussbereich – gleiche Gestaltung wie die Startseite */
.fef-legal .footer {
    background: var(--ink);
    color: var(--text-auf-nacht);
}

.fef-legal .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    padding-block: 30px;
    border-top: 1px solid var(--nacht-linie);
    font-size: 12px;
    line-height: 1.7;
}

.fef-legal .foot > div {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.fef-legal .foot a {
    text-decoration: underline;
    text-underline-offset: 4px;
    /* Auf dem Handy trifft man die Fusslinks sonst knapp. Die Norm
       erlaubt den Ist-Zustand ueber die Abstands-Ausnahme, bequemer ist
       es mit etwas Luft. Die Optik bleibt gleich, nur die Trefferflaeche
       waechst. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

@media (hover: hover) and (pointer: fine) {
  .fef-legal .foot a:hover {
      color: #fff;
  }
}

.fef-legal .foot-social {
    gap: 14px;
}

.fef-legal .foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #666;
    border-radius: var(--rundung-klein);
    color: #c7c7c7;
    text-decoration: none;
    transition: color 180ms, border-color 180ms;
}

@media (hover: hover) and (pointer: fine) {
  .fef-legal .foot-social a:hover {
      color: #fff;
      border-color: #8a8a8a;
  }
}

.fef-legal .foot-social svg {
    display: block;
}


@media (max-width: 1100px) {
    .fef-legal {
        --rand: 40px;
    }
}

@media (max-width: 760px) {
    .fef-legal {
        --rand: 20px;
        --header-hoehe: 82px;
    }

    .fef-legal .logo-img {
        width: 139px;
    }

    .fef-legal .legal-page {
        padding-block: 48px 64px;
    }

    .fef-legal h1 {
        margin: 26px 0 32px;
    }

    .fef-legal h2 {
        margin-top: 48px;
        padding-top: 24px;
    }

    .fef-legal .contact-block {
        padding: 22px 20px;
    }

    .fef-legal .foot {
        justify-content: flex-start;
    }
}

/* Hinweiszeilen im Kontaktblock (ersetzen fruehere Inline-Styles) */
.fef-legal .note-muted,
.fef-legal .note-small,
.fef-legal .contact-block .note-muted,
.fef-legal .contact-block .note-small {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin: 6px 0 0;
}

.fef-legal .note-muted,
.fef-legal .contact-block .note-muted {
    font-style: italic;
}

@media print {
    .fef-legal .footer,
    .fef-legal .back-link,
    .fef-legal .skip {
        display: none;
    }

    /* Auf Papier ist ein Link ohne Adresse wertlos - und Rechtsdokumente
       werden ausgedruckt und abgeheftet. Die Adresse steht deshalb hinter
       dem Linktext. Ausgenommen sind Mail- und Telefonlinks: dort steht
       die Adresse bereits im Text. */
    .fef-legal .legal-page a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }

    /* Kopfband ohne Farbflaeche, Logo umgekehrt sichtbar - wie auf der
       Startseite. Es ist zu 98 Prozent weiss und waere sonst unsichtbar. */
    .fef-legal .header {
        background: #fff;
    }

    .fef-legal .header-content {
        min-height: 0;
        padding-block: 0 18px;
    }

    .fef-legal .logo-img {
        filter: invert(1);
    }

    .fef-legal {
        background: #fff;
    }

    .fef-legal .legal-page {
        padding-block: 0;
    }

    /* Ohne diese Regeln stand im Ausdruck mehrfach eine Ueberschrift
       allein am Seitenende, waehrend ihr Absatz erst auf der naechsten
       Seite begann - nachgewiesen bei "Verbraucherstreitbeilegung /
       Universalschlichtungsstelle" im Impressum und bei "Beschwerderecht
       bei der zustaendigen Aufsichtsbehoerde" in der
       Datenschutzerklaerung. Wie auf der Startseite. */
    .fef-legal h1,
    .fef-legal h2,
    .fef-legal h3,
    .fef-legal h4 {
        break-after: avoid;
    }

    .fef-legal p,
    .fef-legal li {
        orphans: 3;
        widows: 3;
    }

    .fef-legal .contact-block {
        break-inside: avoid;
    }
}


/* Zwangsfarben (Windows-Hochkontrastmodus). Das System zwingt den dunklen
   Kopfbereich auf seine eigene Flaechenfarbe - meist Weiss - und faerbt
   Rasterbilder dabei NICHT um. Das Logo ist weisse Tinte auf durchsichtigem
   Grund und verschwand dadurch vollstaendig: gemessen 0 dunkle Farbwerte im
   Logobereich, Helligkeitsspanne 31 von 255. Es ist zugleich der Weg zurueck
   zur Startseite. Deshalb behaelt genau dieses Element sein eigenes
   Farbschema - unabhaengig davon, ob das System hell oder dunkel einstellt. */
@media (forced-colors: active) {
    .fef-legal .logo,
    .fef-legal .logo-img {
        forced-color-adjust: none;
    }

    .fef-legal .logo {
        background: #090909;
    }
}