/* ============================================
   FEF-Consulting V6 – Design der Startseite
   ============================================
   Aufbau dieser Datei:
   1. Inter, lokal gehostet (kein externer Google-Aufruf)
   2. Seitenbasis
   3. V6-Design, vollstaendig unter .fef-v6 gekapselt
   (Cookie-Banner und Dialog liegen in assets/consent.css)

   Die Rechtsseiten impressum.html und datenschutz.html nutzen
   assets/legal.css und bleiben von dieser Datei unberuehrt.
   ============================================ */


/* ============================================
   1. 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).
   Werte gemessen gegen Arial: Breite 105,68 %, Inter-Metriken
   ascent 1984/2048, descent 494/2048 bei unitsPerEm 2048. */
@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%;
}

/* ============================================
   2. Seitenbasis
   ============================================ */
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;
    }
}


/* ============================================
   3. V6-Design (gekapselt unter .fef-v6)
   ============================================ */
/* FEF V6. Scoped to #fef-v6-root / .fef-v6; keep external site features outside this wrapper. */
.fef-v6 {
  --ink:#090909;
  --paper:#fafafa;
  --muted:#595959;
  --line:#dedede;
  --surface:#fff;
  --surface-edge:#dedfe1;
  --surface-shadow:0 2px 5px #00000003,0 7px 20px #00000005;
  --max:1280px;
  /* Eine Stufe fuer alle Rundungen: klein fuer Bedienelemente, mittel fuer
     Kaesten, gross fuer Flaechen. Vorher lagen 5, 10 und 12 ohne Regel
     nebeneinander. */
  --rundung-klein:8px;
  --rundung-mittel:12px;
  --rundung-gross:14px;
  /* Ein Ton fuer alle ruhigen Flaechen: der Hintergrund des Abschnitts
     "Das Zusammenspiel", die Leistungskarte unter der Maus, die Frage
     unter der Maus und die Schaltflaeche unter der Maus. Neutral, ohne
     Farbstich - im Rot-, Gruen- und Blaukanal derselbe Wert. */
  --ton-ruhig:#f3f3f3;
  --ton-ruhig-tief:#efefef;
  --rundung-kreis:50%;

  /* ---- Farbe: neu, buendelt vorhandene Literale (Session 2, G-1) ---- */
  --nacht:               #111;      /* Hero-Verlauf Mitte, Fokusfarbe hell */
  --nacht-hell:          #252525;   /* Hero-Verlauf Zentrum */
  --nacht-linie:         #333;      /* Header-Unterkante */
  --nacht-kontur:        #414347;   /* Hero-Index Rahmen */
  --nacht-kontur-unten:  #37393c;   /* Hero-Index Unterkante */
  --nacht-kontur-aktiv:  #606770;   /* Hero-Index Hover/Fokus */
  --text-auf-nacht:      #c7c7c7;   /* Footer-Text */
  --text-auf-nacht-leise:#bfbfbf;   /* Nummern im Index, Abschluss-Eyebrow */
  --text-leise:          #666;      /* Schritt-Punkt, FAQ-Kreuz */
  --linie-kraeftig:      #ccc;      /* Fragen-Oberkante, Schritt-Linie */
  --linie-mittel:        #ddd;      /* details, Person */
  --linie-fein:          #e8e8e8;   /* ⚑ vereint #e4e5e7, #e7e9ec, #e8e8e8, #e9e9e9 */
  --kontur-aktiv:        #bfc2c6;   /* Karten-Hover */
  --fokus:               var(--nacht); /* Fokusring auf hell */
  --fokus-auf-nacht:     #fff;      /* Fokusring im Header/Footer (Bestand) */

  /* ---- Typografie (px wie Bestand; clamp fliessend zwischen 390 und 1440 px Viewport) ---- */
  --schrift: "Inter","Inter Fallback",Arial,Helvetica,sans-serif;
  --fs-h1:          clamp(58px, 6.85vw, 104px);         /* ab 761 px, unveraendert, Umbruchschutz */
  --fs-h1-mobil:    clamp(36px, 10.5vw, 76px);          /* bis 760 px, unveraendert */
  --fs-h2:          clamp(35px, 3.8vw, 56px);           /* unveraendert */
  --fs-h2-abschluss:clamp(40px, 4.2vw, 62px);           /* unveraendert */
  --fs-h2-abschluss-mobil: clamp(34px, 9.3vw, 40px);    /* unveraendert */
  --fs-h2-person:   clamp(30px, 28.5px + .38vw, 34px);  /* ⚑ ersetzt 34/30 */
  --fs-h3:          clamp(25px, 23.1px + .48vw, 30px);  /* ⚑ ersetzt 30/27/clamp(25,6.5vw,28) */
  --fs-h3-klein:    clamp(21px, 20.3px + .19vw, 23px);  /* ⚑ Schritt-Titel 23/21 */
  --fs-name:        clamp(23px, 22.3px + .19vw, 25px);  /* ⚑ Personenname 25/23 */
  --fs-h4:          14px;                               /* Rollen-Titel */
  --fs-lead:        clamp(16px, 14.9px + .29vw, 19px);  /* ⚑ Hero-Absatz 19/16 */
  --fs-flow:        clamp(17px, 16.6px + .1vw, 18px);   /* ⚑ Ablauf-Titel 18/17 */
  --fs-text:        clamp(16px, 15.6px + .1vw, 17px);   /* ⚑ intro/example/final/summary 17/16 */
  --fs-person:      clamp(15px, 14.6px + .1vw, 16px);   /* ⚑ Person-Absatz 16/15 */
  --fs-text-klein:  15px;                               /* .description, details p */
  --fs-schritt:     clamp(14px, 13.6px + .1vw, 15px);   /* ⚑ Schritt-Text 15/14 */
  --fs-body:        16px;                              /* Basisgroesse, deckt sich mit dem Browser-Standard */
  --fs-small:       13px;
  --fs-mini:        12px;
  --fs-eyebrow:     clamp(10px, 9.6px + .1vw, 11px);    /* ⚑ 11/10 */
  --fs-label:       clamp(11px, 10.6px + .1vw, 12px);   /* ⚑ Trust-Zeile 12/11 */
  --fs-kopf:        10px;                               /* ⚑ Kundenkopf 10/9, Untergrenze 10 px */
  --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;    /* ⚑ Fliesstext ≤ ca. 75 Zeichen; greift nur dort, wo heute breiter (Person-Absatz) */

  /* ---- 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);    /* ⚑ 100/62, Max ab 1100 px */
  --sektion-abschluss:  clamp(58px, 44.8px + 3.38vw, 82px);   /* ⚑ 82/58 */
  --hero-oben:          clamp(40px, 30.7px + 2.38vw, 65px);   /* ⚑ 65/40 */
  --karte-innen:        clamp(24px, 20.3px + .95vw, 34px);    /* ⚑ 34/28/25·24 */
  --flow-innen-block:   clamp(13px, 8.2px + 1.24vw, 26px);    /* ⚑ 26/13 */
  --flow-innen-inline:  clamp(21px, 17.7px + .86vw, 30px);    /* ⚑ 30/21 */
  --header-hoehe: 80px;                                       /* ⚑ heute 105px; bis 760 px 82px wie heute */

  /* ---- 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: .hero ab 761 px */

  /* ---- Ebenen ---- */
  --ebene-deko: -1;
  --ebene-inhalt: 1;
  --ebene-header: 50;   /* Session 3: .hero ab 761 px */
  --ebene-skip: 60;     /* ⚑ Session 3: muss ueber dem fixierten Header liegen */

  /* ---- 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);
}

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

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

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

.fef-v6 a {
  color:inherit;
  text-decoration:none;
}

.fef-v6 button {
  font:inherit;
}

.fef-v6 p {
  line-height:1.65;
}

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

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

.fef-v6 .section {
  padding-block:var(--sektion);
}

.fef-v6 .eyebrow {
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  line-height:1.6;
  margin:0 0 26px;
}

.fef-v6 .small {
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--muted);
}

.fef-v6 h2 {
  font-size:var(--fs-h2);
  font-weight:500;
  line-height:var(--lh-h2);
  letter-spacing:var(--ls-h2);
  margin:0;
}

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

.fef-v6 .hero a:focus-visible,
.fef-v6 .hero button:focus-visible,
.fef-v6 .final a:focus-visible,
.fef-v6 footer a:focus-visible {
  outline-color:var(--fokus-auf-nacht);
}

.fef-v6 .skip {
  position:fixed;
  left:20px;
  top:-90px;
  padding:18px;
  background:#fff;
  z-index:var(--ebene-skip);
}

/* Sichtbar, sobald er den Fokus hat. Ob er ihn nach einer Entscheidung im
   Cookie-Banner ueberhaupt bekommt, entscheidet das Skript anhand der
   Bedienart - mit einem Zeigegeraet gar nicht, sonst schon. Das ist
   verlaesslicher als :focus-visible: dessen Heuristik faellt aus, sobald
   vorher irgendwo im Inhalt mit der Maus geklickt wurde, und liess den
   Link dann auch bei Sprachsteuerung und Schalterzugang unsichtbar -
   gemessen 5 von 5 Laeufen auf allen drei Seiten. */
.fef-v6 .skip:focus {
  top:10px;
}

.fef-v6 .hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 85% 42%,var(--nacht-hell) 0,var(--nacht) 34%,var(--ink) 66%);
  color:var(--paper);
}

.fef-v6 .hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  inset:105px 0 0 49%;
  background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 75% 42%,#000,transparent 68%);
}

.fef-v6 .nav {
  min-height:var(--header-hoehe);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--nacht-linie);
}

/* ============================================
   Session 3: Fester Header (Konzept M-1/HD-1)
   Nur ab 761 px Breite UND 600 px Hoehe. Darunter bleibt .nav Teil des
   normalen Flusses (Basisregel oben und @media(max-width:760px)).
   ============================================ */
@media screen and (min-width:761px) and (min-height:600px) {

  .fef-v6 .hero {
    /* Reserviert den Platz, den der aus dem Fluss geloeste Header sonst
       eingenommen haette - keine Layoutverschiebung. */
    padding-top: var(--header-hoehe);
    /* Hebt die gesamte .hero-Verzweigung (inkl. des darin liegenden,
       fixierten .nav) ueber alle spaeteren Abschnitte der Seite - noetig
       wegen isolation:isolate auf .hero (siehe .nav weiter unten fuer die
       lokale Ergaenzung innerhalb von .heros eigenem Stacking Context). */
    z-index: var(--ebene-header);
  }

  .fef-v6 .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Lokales Gegenstueck zu .hero{z-index}: haelt den Header innerhalb
       von .heros eigenem Stacking Context ueber #inhalt (Eyebrow, H1,
       Leistungskarte), das sonst als spaeteres Geschwister obenauf
       gemalt wuerde. */
    z-index: var(--ebene-header);
  }

  /* Flaeche erscheint erst, wenn die Eyebrow hinter den Header gewandert
     ist (main.js, IntersectionObserver setzt .header-fest). */
  .fef-v6 .nav::before {
    content:"";
    position:fixed;
    inset:0 0 auto 0;
    height:var(--header-hoehe);
    background:var(--ink);
    box-shadow:var(--schatten-header);
    opacity:0;
    pointer-events:none;
    transition:opacity var(--dauer-kurz) var(--kurve-aus); /* Austritt: 180ms */
  }

  .fef-v6 .nav.header-fest::before {
    opacity:1;
    transition-duration:var(--dauer-zustand); /* Eintritt: 225ms */
  }

  /* No-JS-Fallback: Flaeche dauerhaft sichtbar, kein Zustandswechsel
     moeglich ohne den Beobachter. .js wird bereits frueh per Inline-
     Skript gesetzt (index.html, main.js). */
  .fef-v6:not(.js) .nav::before {
    opacity:1;
  }

  /* Raster-Dekor an die Kopfhoehe koppeln statt an den bisher starren
     Wert 105px (= 80px Kopfhoehe + 25px). */
  .fef-v6 .hero::before {
    inset: calc(var(--header-hoehe) + 25px) 0 0 49%;
  }

  /* Sprungziele (#leistungen, #zusammenarbeit, #felix, #kontakt) landen
     nicht mehr unter dem fixierten Header (WCAG 2.4.11). --header-hoehe
     erreicht als Custom Property unter .fef-v6 die html-Ebene nicht -
     deshalb hier als Literal, synchron zu --header-hoehe (80px). */
  html {
    scroll-padding-top: calc(80px + 28px);
  }
}

.fef-v6 .brand img {
  display:block;
  width:170px;
  /* Hoehe aus dem Seitenverhaeltnis der Datei. Die Vorgabe
     44px haette das Logo um rund 11 Prozent gestaucht. */
  height:auto;
  object-fit:contain;
}

.fef-v6 .navlinks {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:14px;
}

.fef-v6 .navlinks>a:not(.btn) {
  position:relative;
}

.fef-v6 .navlinks>a:not(.btn):active,
.fef-v6 .textlink:active,
.fef-v6 .foot a:active {
  opacity:.72;
  transition:opacity var(--dauer-sofort);
}

.fef-v6 .navlinks>a:not(.btn)::after {
  content:"";
  position:absolute;
  bottom:-9px;
  left:0;
  width:100%;
  height:1px;
  background:#aaa;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dauer-kurz) var(--kurve-aus);
}

.fef-v6 .navlinks>a:focus-visible::after {
  transform:scaleX(1);
}

@media(hover:hover) and (pointer:fine) {
  .fef-v6 .navlinks>a:hover::after {
    transform:scaleX(1);
  }
}

.fef-v6 .btn {
  display:inline-flex;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 25px;
  border:1px solid #fff;
  border-radius:var(--rundung-klein);
  background:linear-gradient(#fff,#eaeaea);
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  box-shadow:var(--schatten-knopf);
  transition:background 180ms,box-shadow 180ms,transform 220ms var(--kurve-aus);
}

/* Feste physische Glanzbreite/-dauer (--glanz-breite/--dauer-glanz, Token-
   Block oben) statt Prozentwerte der eigenen Buttonbreite (Session 3,
   Architekt-Befund): Nav-Button (142px) und Hero-/Abschluss-Button (227px)
   hatten sonst unterschiedlich lange UND unterschiedlich breite Sweeps,
   obendrein blieb der Glanz nirgends wirklich stehen (Endzustand war immer
   translateX(125%), vollstaendig ausserhalb) - der Nav-Eindruck "bleibt in
   der Mitte stehen" kam nur von der ease-Kurve, die bei kurzer Strecke
   unter der Wahrnehmungsschwelle blieb. Ruhezustand als fester Versatz
   von "mittig" (50% - 200px), nicht als fixe Position: sonst bliebe die
   Strecke bis zum Endzustand trotzdem breitenabhaengig. */
.fef-v6 .btn::after {
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  background-image:linear-gradient(110deg,transparent 0,#ffffffcc 50%,transparent 100%);
  background-repeat:no-repeat;
  background-size:var(--glanz-breite) 200%;
  background-position:calc(50% - 200px) center;
}

.fef-v6 .btn:focus-visible {
  box-shadow:inset 0 1px 0 #fff,0 0 26px #ffffff15;
}

.fef-v6 .btn:focus-visible::after {
  background-position:center;
  transition:background-position var(--dauer-glanz) var(--kurve-glanz);
}

.fef-v6 .nav .btn {
  min-height:46px;
}

/* LCP-Schutz (Bestandsschutz, Session 1 Messung): Hero-Textblock bleibt
   absichtlich ohne jede Animation - h1 ist das gemessene LCP-Element auf
   Desktop, der Cookie-Banner auf Mobil/impressum. */
.fef-v6 .hero-main {
  padding-block:var(--hero-oben) 65px;
}

.fef-v6 .hero h1 {
  font-size:var(--fs-h1);
  font-weight:500;
  letter-spacing:var(--ls-h1);
  line-height:var(--lh-h1);
  margin:0;
}

.fef-v6 .hero h1 .accent {
  color:#aaa;
}

.fef-v6 .hero-bottom {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:105px;
  align-items:end;
  margin-top:50px;
}

.fef-v6 .hero-copy {
  font-size:var(--fs-lead);
  line-height:1.6;
  color:#d9d9d9;
  max-width:550px;
  margin:0 0 26px;
}

.fef-v6 .hero .small {
  color:var(--text-auf-nacht-leise);
  margin-top:18px;
}

.fef-v6 .index {
  position:relative;
  isolation:isolate;
  border:1px solid var(--nacht-kontur);
  border-bottom-color:var(--nacht-kontur-unten);
  border-radius:var(--rundung-mittel);
  padding:20px 23px 9px;
  background:linear-gradient(145deg,#ffffff07,#ffffff01 64%);
  box-shadow:inset 0 0 0 1px #ffffff07,0 8px 24px #00000024;
  transition:border-color 225ms,box-shadow 225ms;
}

.fef-v6 .index::before {
  content:"";
  pointer-events:none;
  position:absolute;
  left:16%;
  right:16%;
  top:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,#b8c2cf 42%,#e6e9ee 50%,#b8c2cf 58%,transparent);
  opacity:.8;
  transition:opacity 225ms;
}

.fef-v6 .index::after {
  content:"";
  pointer-events:none;
  position:absolute;
  z-index:-1;
  left:24%;
  right:24%;
  top:-7px;
  height:15px;
  background:radial-gradient(ellipse,#b9cce322,transparent 72%);
  filter:blur(5px);
  transition:opacity 225ms;
  opacity:.65;
}

.fef-v6 .index:focus-within {
  border-color:var(--nacht-kontur-aktiv);
  box-shadow:inset 0 0 0 1px #ffffff0b,var(--schatten-nacht-aktiv);
}

.fef-v6 .index:focus-within::before,
.fef-v6 .index:focus-within::after {
  opacity:1;
}

.fef-v6 .index-art {
  display:block;
  width:100%;
  height:62px;
  margin-bottom:13px;
  opacity:.8;
  transition:opacity var(--dauer-zustand) var(--kurve-aus);
}

.fef-v6 .index:focus-within .index-art {
  opacity:1;
}

/* Kleine Ergaenzung: passend zum Workflow-Pulse der Leistungskarten
   (M-10) laeuft bei Hover/Fokus des Panels einmal ein schmaler Ausschnitt
   durch die Linienzeichnung - nur CSS auf einer Struktur-Pseudoklasse
   des vorhandenen <path>, kein neues Attribut/Klasse am SVG-Markup
   (Hash-Schutz bleibt gewahrt). Pfadlaenge gemessen: 671px. */
@keyframes fef-v6-hero-linie-puls {
  0%   { stroke-dasharray:650 40; stroke-dashoffset:40; }
  100% { stroke-dasharray:650 40; stroke-dashoffset:-671; }
}

.fef-v6 .index:focus-within .index-art path:first-of-type {
  /* Eigene, laengere Dauer statt --dauer-puls (800ms): der Ausschnitt
     legt hier 711px zurueck, der Kartenpuls nur 112px (Dauer-Token dort
     ist an die Muster-, nicht an die Pfadlaenge gekoppelt) - bei
     gleicher Dauer waere das Tempo ueber sechsmal so hoch gewesen und
     wirkte hektisch (Felix' Rueckmeldung). 1800ms haelt die Ruhe des
     Kartenpulses, ohne auf die volle rechnerische Distanzparitaet
     (~5s) zu gehen, die aus dem Bewegungsbild der Seite fiele. */
  animation:fef-v6-hero-linie-puls 1800ms var(--kurve-puls) 1;
}

@media (hover:hover) and (pointer:fine) {
  .fef-v6 .index:hover .index-art path:first-of-type {
    animation:fef-v6-hero-linie-puls 1800ms var(--kurve-puls) 1;
  }
}

/* Hero-Moment (M-2/M-3): Panel und Linienzeichnung blenden nur auf breiten
   Bildschirmen ein - Hash-Schutz: nur der vorhandene Selektor .index-art
   wird angesprochen, keine Aenderung an SVG-Markup/Pfaddaten. Auf "screen"
   beschraenkt: Chrome wertet min-width beim Drucken gegen die Papiergroesse
   aus, .index stuende sonst dauerhaft bei opacity:0 im Ausdruck fest. */
@media screen and (min-width:761px) {
  @keyframes fef-v6-panel-entrance {
    from { opacity:0; transform:translate3d(0,12px,0); }
    to   { opacity:1; transform:none; }
  }
  .fef-v6 .index {
    animation:fef-v6-panel-entrance var(--dauer-eintritt) var(--kurve-aus) 120ms backwards;
  }

  @keyframes fef-v6-hero-art-entrance {
    from { opacity:0; }
    to   { opacity:.8; }
  }
  .fef-v6 .index-art {
    animation:fef-v6-hero-art-entrance var(--dauer-lang) var(--kurve-aus) 280ms backwards;
  }
}

.fef-v6 .index a {
  display:grid;
  grid-template-columns:26px 1fr;
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-top:1px solid #ffffff20;
  font-size:14px;
  line-height:var(--lh-kompakt);
}

.fef-v6 .index b {
  font-size:10px;
  font-weight:400;
  color:var(--text-auf-nacht-leise);
}

@media (hover: hover) and (pointer: fine) {
  .fef-v6 .index a:hover {
    color:#fff;
    background:#ffffff03;
  }
}

/* Nach dem hover-Block, damit :active bei gleicher Spezifitaet die
   Kaskade gewinnt (sonst zeigt sich die Druck-Flaeche auf Maus-
   Geraeten nie, da :hover zuletzt steht) - derselbe Fund wie bei
   .btn:active in dieser Session. */
.fef-v6 .index a:active {
  background:#ffffff0d;
}

.fef-v6 .cred {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--nacht-linie);
  padding-block:24px;
  color:var(--linie-kraeftig);
  font-size:var(--fs-label);
}

.fef-v6 .clients {
  background:#fff;
  border-bottom:1px solid var(--linie-fein);
  padding-block:28px;
}

.fef-v6 .clienthead {
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:var(--fs-kopf);
  color:var(--text-leise);
  margin-bottom:25px;
}

/* picture ohne Box: das img bleibt direktes Kind von .logos/.brand.
   <source> waere sonst eine leere Grid-Zelle. */
.fef-v6 picture {
  display:contents;
}

.fef-v6 source {
  display:none;
}

.fef-v6 .logos {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:42px;
  align-items:center;
  justify-items:center;
}

.fef-v6 .logos img {
  width:100%;
  max-width:127px;
  height:32px;
  object-fit:contain;
  /* Die Zuruecknahme laeuft ueber den Filter, nicht ueber die Deckkraft.
     Die Deckkraft gehoert der Einblendung, die sie am Ende auf 1 setzt -
     eine Regel hier wuerde davon ueberschrieben. */
  filter:grayscale(1) contrast(.86) opacity(.62);
}

/* LO-3: optischer Groessenausgleich per scale (die Einblendung setzt
   transform:none auf .shown). Werte aus Pixelmessung der Tintenflaeche:
   DIK (dichte Flaeche) kleiner, drei duenne Logos groesser. */
.fef-v6 .logos picture:nth-child(4) img { scale:.85; }  /* DIK */
.fef-v6 .logos picture:nth-child(5) img { scale:1.06; } /* tunymedia */
.fef-v6 .logos picture:nth-child(6) img { scale:1.1; }  /* Dr. Renée Moore - duenne Schreibschrift */
.fef-v6 .logos picture:nth-child(7) img { scale:1.12; } /* DIMA.CONCEPT - durch max-width gedeckelt */

.fef-v6 .intro {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:100px;
  align-items:end;
  margin-bottom:42px;
}

.fef-v6 .intro p {
  font-size:var(--fs-text);
  color:var(--muted);
  margin:0;
  max-width:450px;
}

.fef-v6 .grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:20px;
}

.fef-v6 .service {
  min-width:0;
  display:flex;
  flex-direction:column;
  position:relative;
  isolation:isolate;
  padding:var(--karte-innen);
  border:1px solid var(--surface-edge);
  border-bottom-color:#d5d6d8;
  border-radius:var(--rundung-gross);
  background:linear-gradient(150deg,var(--surface) 58%,#fafbfc);
  box-shadow:var(--surface-shadow),inset 0 0 0 1px #ffffffcc;
  /* Steht als Variable, weil die Einblendung den Uebergang der Karte
     ueberschreibt und die Hover-Regel ihn zurueckholen muss. Wert kommt
     seit Session 2 aus dem globalen Token --karte-uebergang (.fef-v6) -
     bewusst ohne background, da Verlaeufe nicht sauber interpolieren. */
  transition:var(--karte-uebergang);
}

.fef-v6 .service::after {
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse at 86% 0%,#00000005,transparent 60%);
  opacity:0;
  transition:opacity 200ms;
}

.fef-v6 .service .num {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:10px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.11em;
  color:var(--text-leise);
  margin-bottom:23px;
}

.fef-v6 .service .num::after {
  content:"";
  height:1px;
  width:45px;
  background:var(--linie-kraeftig);
}

.fef-v6 .service-art {
  display:block;
  width:100%;
  height:84px;
  object-fit:contain;
  margin-bottom:26px;
  border-bottom:1px solid var(--linie-fein);
  background:linear-gradient(180deg,#f7f8fa00,#f7f8fa88 66%,#ffffff00);
  border-radius:var(--rundung-klein) var(--rundung-klein) 0 0;
}

.fef-v6 .service h3 {
  font-size:var(--fs-h3);
  font-weight:500;
  letter-spacing:var(--ls-h3);
  line-height:var(--lh-h3);
  margin:0 0 18px;
  overflow-wrap:break-word;
}

.fef-v6 .service .description {
  color:var(--muted);
  font-size:var(--fs-text-klein);
  line-height:1.6;
  margin:0 0 18px;
}

.fef-v6 .service ul {
  list-style:none;
  padding:0;
  margin:0 0 24px;
}

.fef-v6 .service li {
  position:relative;
  border-bottom:1px solid var(--linie-fein);
  font-size:14px;
  line-height:1.5;
  padding:10px 0 10px 15px;
}

.fef-v6 .service li::before {
  content:"";
  position:absolute;
  left:0;
  top:19px;
  width:4px;
  height:4px;
  border-radius:var(--rundung-kreis);
  background:#707070;
}

.fef-v6 .service .result {
  /* auto haelt die Zeile am Kartenfuss, damit alle vier Karten unten
     buendig abschliessen. Die Trennlinie macht aus dem Leerraum darueber
     eine bewusste Zaesur statt eines Lochs. */
  margin:auto 0 0;
  padding-top:16px;
  border-top:1px solid var(--linie-fein);
  font-size:14px;
  line-height:1.55;
  font-weight:600;
}

.fef-v6 .roles {
  display:grid;
  gap:14px;
  margin:0 0 20px;
}

.fef-v6 .role {
  padding-top:13px;
  border-top:1px solid var(--linie-fein);
}

.fef-v6 .role h4 {
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:var(--lh-kompakt);
  margin:0 0 5px;
  overflow-wrap:anywhere;
}

.fef-v6 .role p {
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  margin:0;
}

.fef-v6 .example {
  /* Vorher #f2f3f4 auf #f0f0f0. Im Blaukanal lag 244 gegen 242 im Rot,
     das fiel neben dem neutralen #fafafa der uebrigen Seite als Blaustich
     auf. Jetzt neutrale Graustufen aus derselben Reihe. */
  background:linear-gradient(140deg,var(--ton-ruhig),var(--ton-ruhig-tief));
  border-block:1px solid var(--line);
}

.fef-v6 .example-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px;
  align-items:center;
}

.fef-v6 .example h2 {
  max-width:580px;
}

.fef-v6 .example p:not(.eyebrow) {
  color:var(--muted);
  font-size:var(--fs-text);
  max-width:530px;
}

.fef-v6 .example .small {
  font-size:var(--fs-mini);
}

.fef-v6 .flow {
  list-style:none;
  margin:0;
  padding:var(--flow-innen-block) var(--flow-innen-inline);
  counter-reset:flow;
  background:linear-gradient(145deg,#fff,#fafbfc);
  border:1px solid var(--surface-edge);
  border-bottom-color:#d5d6d8;
  border-radius:var(--rundung-gross);
  box-shadow:var(--surface-shadow),inset 0 0 0 1px #ffffffcc;
  transition:var(--karte-uebergang);
}

/* Der Kasten hatte als einziger der Seite keine Reaktion auf die Maus.
   Gleiche Handschrift wie die Leistungskarten - deshalb seit Session 2
   dieselbe Uebergangs-Variable wie .service (vorher 200ms statt 260ms
   bei border-color/box-shadow, unbeabsichtigt asynchron). */
@media(hover:hover) and (pointer:fine) {
  .fef-v6 .flow:hover {
    transform:translateY(-2px);
    border-color:var(--kontur-aktiv);
    box-shadow:var(--schatten-abgehoben),inset 0 0 0 1px #fff;
  }
}

.fef-v6 .flow li {
  position:relative;
  counter-increment:flow;
  display:grid;
  grid-template-columns:32px 1fr;
  gap:19px;
  padding:23px 0;
  line-height:1.4;
  font-size:var(--fs-flow);
}

.fef-v6 .flow li::before {
  content:"0" counter(flow);
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:start;
  width:32px;
  height:32px;
  border:1px solid #c7c7c7;
  background:#fff;
  border-radius:var(--rundung-kreis);
  font-size:10px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  z-index:1;
  box-shadow:0 2px 6px #00000005;
  transition:transform var(--dauer-mittel) var(--kurve-aus);
}

@media(hover:hover) and (pointer:fine) {
  .fef-v6 .flow li:hover::before {
    transform:scale(1.08);
    transition-duration:var(--dauer-linie);
  }
}

/* Waechst nach dem Reveal des zugehoerigen Schritts (M-9); dimmt bei
   Mausberuehrung des Schritts (M-5/BA-2) - zwei unabhaengige Eigenschaften
   auf demselben Pseudo-Element. */
.fef-v6 .flow li:not(:last-child)::after {
  content:"";
  position:absolute;
  left:15.5px;
  top:39px;
  bottom:-39px;
  width:1px;
  background:linear-gradient(#b8b8b8,var(--linie-mittel));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform var(--dauer-linie) var(--kurve-aus),
             filter var(--dauer-mittel) var(--kurve-aus);
}

.fef-v6.reveal-on .flow li.reveal.shown:not(:last-child)::after {
  transform:scaleY(1);
}

.fef-v6.reveal-on .flow .reveal:nth-child(1)::after { transition-delay:240ms }
.fef-v6.reveal-on .flow .reveal:nth-child(2)::after { transition-delay:calc(var(--staffel) * 1 + 240ms) }
.fef-v6.reveal-on .flow .reveal:nth-child(3)::after { transition-delay:calc(var(--staffel) * 2 + 240ms) }

@media(hover:hover) and (pointer:fine) {
  .fef-v6 .flow li:hover::after {
    filter:brightness(.55);
  }
}

.fef-v6 .flow span {
  display:block;
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  margin-top:7px;
}

.fef-v6 .steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin-top:48px;
}

.fef-v6 .step {
  position:relative;
  border-top:1px solid var(--linie-kraeftig);
  padding-top:23px;
}

/* Die Linie ueber dem Schritt zieht sich bei Mausberuehrung in Schwarz
   nach. Sie nimmt die Linienfuehrung auf, die die Abbildungen in den
   Leistungskarten ohnehin schon benutzen. Skaliert statt Breite zu
   animieren (Katalog: keine Animation auf Layout-Eigenschaften). */
/* Bewusst ::after - ::before traegt bereits den Punkt am Linienanfang. */
.fef-v6 .step::after {
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  height:1px;
  width:100%;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dauer-mittel) var(--kurve-aus); /* Austritt */
  pointer-events:none;
}

@media(hover:hover) and (pointer:fine) {
  .fef-v6 .step:hover::after {
    transform:scaleX(1);
    transition-duration:var(--dauer-linie); /* Eintritt */
  }
}

.fef-v6 .step::before {
  content:"";
  position:absolute;
  top:-3px;
  left:0;
  width:5px;
  height:5px;
  background:var(--text-leise);
  border-radius:var(--rundung-kreis);
  transition:transform var(--dauer-mittel) var(--kurve-aus),
             filter var(--dauer-mittel) var(--kurve-aus);
}

@media(hover:hover) and (pointer:fine) {
  .fef-v6 .step:hover::before {
    transform:scale(1.6);
    filter:brightness(0);
    transition-duration:var(--dauer-linie);
  }
}

.fef-v6 .step b {
  font-size:11px;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  color:var(--text-leise);
}

.fef-v6 .step h3 {
  font-size:var(--fs-h3-klein);
  font-weight:500;
  letter-spacing:var(--ls-titel-klein);
  margin:26px 0 12px;
}

.fef-v6 .step p {
  font-size:var(--fs-schritt);
  color:var(--muted);
  margin:0;
}

.fef-v6 .person {
  display:grid;
  /* Textspalte auf der Kante von Schritt 2 der .steps darueber (ZP-2). */
  grid-template-columns:calc((100% - 3 * 30px) / 4) 1fr;
  gap:30px;
  border-top:1px solid var(--linie-mittel);
  margin-top:74px;
  padding-top:var(--raum-8);
}

.fef-v6 .person-identity .eyebrow {
  margin-bottom:14px;
  font-size:10px;
}

.fef-v6 .person-identity .person-name {
  font-size:var(--fs-name);
  font-weight:500;
  letter-spacing:var(--ls-titel-klein);
  margin:0 0 8px;
}

.fef-v6 .person-identity .small {
  margin:0;
}

.fef-v6 .person-identity .portrait {
  display:block;
  width:120px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  margin-top:20px;
  /* Bestandsschutz-Ausnahme (Entscheid Felix 17.09.2026, Session 1):
     Radius bleibt trotz "kein Crop oder maskierender Radius" in
     Aenderungen.json - siehe BRAIN-Notiz design-system. Kein Befund. */
  border-radius:var(--rundung-mittel);
  transition:transform var(--dauer-mittel) var(--kurve-aus), box-shadow var(--dauer-mittel);
  box-shadow:var(--schatten-portrait);
}

.fef-v6 .person h2 {
  font-size:var(--fs-h2-person);
}

/* Die linke Spalte beginnt mit der Zeile "Ihr Ansprechpartner", die rechte
   direkt mit der Ueberschrift. Dadurch stand die Ueberschrift 30 Pixel
   hoeher als der Name daneben und der Abschnitt wirkte verschoben. Die
   rechte Spalte rueckt jetzt um genau die Hoehe dieser Zeile nach unten:
   10 Pixel Schriftgroesse mal 1,6 Zeilenhoehe plus 14 Pixel Abstand. Nur
   im zweispaltigen Aufbau - darunter stehen die Spalten untereinander. */
@media(min-width:761px) {
  .fef-v6 .person > .person-identity + div {
    margin-top:calc(10px * 1.6 + 14px);
  }
}

.fef-v6 .person p {
  font-size:var(--fs-person);
  color:var(--muted);
  max-width:var(--mass-text);
}

.fef-v6 .textlink {
  display:inline-flex;
  align-items:center;
  min-height:46px;
  font-size:14px;
  border-bottom:1px solid #8d9298;
  text-underline-offset:5px;
}

@media (hover: hover) and (pointer: fine) {
  .fef-v6 .textlink:hover {
    color:var(--muted);
  }
}

.fef-v6 .faq {
  padding-top:5px;
}

.fef-v6 .faq-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px;
}

.fef-v6 .questions {
  border-top:1px solid var(--linie-kraeftig);
}

.fef-v6 details {
  border-bottom:1px solid var(--linie-mittel);
}

.fef-v6 summary {
  position:relative;
  list-style:none;
  font-size:var(--fs-text);
  line-height:var(--lh-kompakt);
  padding:24px 38px 24px 0;
  cursor:pointer;
  /* Einzug/Rundung waren nur im hover:hover-Block deklariert (siehe unten) -
     auf Touch faerbte :active sonst eine kantige Flaeche statt der
     abgerundeten, eingerueckten "Pille" wie am Desktop (xhigh-Review-Fund).
     Layout gilt deshalb immer, nur die Hover-Einfaerbung bleibt gegated. */
  padding-inline:10px 48px;
  margin-inline:-10px 0;
  border-radius:var(--rundung-klein);
}

.fef-v6 summary:active {
  background-color:var(--ton-ruhig);
}

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

/* Gezeichnetes Kreuz aus zwei Strichen statt getipptem Zeichen. Der
   senkrechte Strich (::before) dreht sich beim Oeffnen um 90 Grad auf den
   liegenden (::after) - zusammen ergibt das ein echtes Minus statt eines
   gedrehten Kreuzes (135 Grad Rotation des ganzen Kreuzes zeigte bisher
   ein "x", kein Minus). */
.fef-v6 summary::before,
.fef-v6 summary::after {
  content:"";
  position:absolute;
  right:2px;
  top:24px;
  width:13px;
  height:13px;
}

.fef-v6 summary::before {
  background:linear-gradient(var(--text-leise),var(--text-leise)) center/1.5px 13px no-repeat;
  transition:transform var(--dauer-mittel) var(--kurve-aus);
}

.fef-v6 summary::after {
  background:linear-gradient(var(--text-leise),var(--text-leise)) center/13px 1.5px no-repeat;
}

.fef-v6 details[open] summary::before {
  transform:rotate(90deg);
}

.fef-v6 details p {
  font-size:var(--fs-text-klein);
  color:var(--muted);
  margin:0 30px 24px 0;
}

@keyframes fef-v6-faq-answer {
  from { opacity:0; transform:translate3d(0,-4px,0); }
  to   { opacity:1; transform:none; }
}

.fef-v6 details[open] > p {
  animation:fef-v6-faq-answer var(--dauer-mittel) var(--kurve-aus);
}

.fef-v6 .final {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 95% 100%,#23262b,var(--ink) 65%);
  color:var(--paper);
  padding-block:var(--sektion-abschluss);
}

.fef-v6 .final::before {
  content:"";
  position:absolute;
  /* AC-2: dieselbe Box-Geometrie wie .wrap, damit der Verlauf buendig mit
     der Footer-Linie darunter schliesst statt darueber hinauszuragen. */
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 2 * var(--rand));
  max-width:var(--max);
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#bfcbd7,transparent);
}

.fef-v6 .final-inner {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:80px;
  align-items:start;
}

.fef-v6 .final-kontakt {
  margin-top:32px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.fef-v6 .final-kontakt .eyebrow {
  margin-bottom:2px;
}

.fef-v6 .final h2 {
  font-size:var(--fs-h2-abschluss);
  max-width:750px;
}

.fef-v6 .final p:not(.eyebrow) {
  font-size:var(--fs-text);
  color:#ccc;
  margin:0 0 26px;
}

.fef-v6 .final .eyebrow {
  color:var(--text-auf-nacht-leise);
}

.fef-v6 footer {
  background:var(--ink);
  color:var(--text-auf-nacht);
}

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

.fef-v6 .foot div {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.fef-v6 .foot a,
.fef-v6 .final-kontakt a:not(.foot-social a) {
  text-decoration:underline;
  text-underline-offset:4px;
  display:inline-flex;
  align-items:center;
  min-height:24px;
}

/* Gleiche Rueckmeldung wie auf den Rechtsseiten (legal.css). Ohne diese
   Regel waren die Fusszeilen-Links die einzigen Links der Startseite ohne
   jede Reaktion auf die Maus. */
@media (hover: hover) and (pointer: fine) {
  .fef-v6 .foot a:hover,
  .fef-v6 .final-kontakt a:not(.foot-social a):hover {
    color:#fff;
  }
}

.fef-v6 .menu {
  display:none;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:10px;
  border:1px solid #444;
  border-radius:var(--rundung-klein);
  background:transparent;
  color:var(--paper);
}

.fef-v6 .menu svg {
  display:block;
}

@media(max-width:1100px) {
  .fef-v6 .hero-bottom,
  .fef-v6 .intro,
  .fef-v6 .example-grid,
  .fef-v6 .faq-layout {
    gap:45px;
  }

  .fef-v6 .navlinks {
    gap:18px;
  }

  .fef-v6 .steps {
    gap:22px;
  }

  .fef-v6 .person {
    gap:40px;
    grid-template-columns:210px 1fr;
  }

  .fef-v6 .final-inner {
    gap:40px;
  }
}

@media(max-width:760px) {
  .fef-v6 .nav {
    min-height:82px;
    position:relative;
    flex-wrap:wrap;
    gap:0;
  }

  .fef-v6 .brand img {
    width:139px;
    height:auto;
  }

  .fef-v6.js .menu {
    display:flex;
  }

  .fef-v6 .navlinks {
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:12px 0 20px;
  }

  .fef-v6 .navlinks a {
    padding:16px 4px;
    min-height:48px;
  }

  .fef-v6 .navlinks .btn {
    margin-top:8px;
    padding:0 18px;
  }

  .fef-v6.js .navlinks[hidden] {
    display:none;
  }

  .fef-v6 .hero-main {
    padding:var(--hero-oben) 0 30px;
  }

  .fef-v6 .eyebrow {
    letter-spacing:var(--ls-eyebrow-mobil);
    margin-bottom:24px;
  }

  .fef-v6 .hero h1 {
    font-size:var(--fs-h1-mobil);
    letter-spacing:var(--ls-h1-mobil);
    line-height:var(--lh-h1-mobil);
  }

  .fef-v6 .hero-bottom {
    grid-template-columns:1fr;
    gap:30px;
    margin-top:30px;
  }

  .fef-v6 .hero-copy {
    line-height:1.6;
    margin-bottom:24px;
  }

  .fef-v6 .hero .btn {
    width:100%;
  }

  .fef-v6 .hero .small {
    font-size:var(--fs-mini);
  }

  .fef-v6 .index {
    padding:18px 18px 6px;
  }

  .fef-v6 .index-art {
    height:48px;
    margin-bottom:10px;
  }

  .fef-v6 .index a {
    font-size:13px;
    grid-template-columns:22px 1fr;
    gap:9px;
  }

  .fef-v6 .cred {
    display:grid;
    gap:11px;
    padding-block:23px;
  }

  .fef-v6 .clients {
    padding-block:24px;
  }

  .fef-v6 .logos {
    grid-template-columns:repeat(3,1fr);
    gap:24px 20px;
  }

  .fef-v6 .logos img {
    height:25px;
    max-width:92px;
  }


  .fef-v6 .intro,
  .fef-v6 .example-grid,
  .fef-v6 .faq-layout,
  .fef-v6 .final-inner {
    grid-template-columns:1fr;
    gap:26px;
  }

  .fef-v6 .intro {
    margin-bottom:30px;
  }


  .fef-v6 .grid {
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:16px;
  }

  .fef-v6 .service-art {
    height:70px;
    margin-bottom:23px;
  }

  .fef-v6 .service .num {
    margin-bottom:20px;
  }


  .fef-v6 .service .result {
    margin-top:0;
  }

  .fef-v6 .roles {
    gap:14px;
  }

  .fef-v6 .flow li {
    gap:15px;
  }


  .fef-v6 .steps {
    grid-template-columns:1fr 1fr;
    gap:30px 22px;
    margin-top:34px;
  }

  .fef-v6 .step h3 {
    margin-top:20px;
  }


  .fef-v6 .person {
    grid-template-columns:1fr;
    gap:29px;
    margin-top:48px;
    padding-top:var(--raum-7);
  }


  .fef-v6 .person-identity .portrait {
    width:104px;
    height:auto;
    margin-top:17px;
  }



  .fef-v6 .faq {
    padding-top:0;
  }


  .fef-v6 .final .btn {
    width:100%;
  }


  .fef-v6 .foot {
    gap:20px;
  }

  .fef-v6 .foot div {
    gap:13px;
  }

  .fef-v6 .final h2 {
    font-size:var(--fs-h2-abschluss-mobil);
  }

  .fef-v6 .hero-main>.eyebrow {
    max-width:34em;
  }

  .fef-v6 .index a {
    min-height:49px;
  }
}

.fef-v6 *::before,
.fef-v6 *::after,
.fef-v6 .service-art,
.fef-v6 .index-art,
.fef-v6 .menu svg {
  pointer-events:none;
}

.fef-v6 .service-art,
.fef-v6 .index-art {
  color:#b6bbc1;
}

.fef-v6 .workflow-pulse {
  stroke:#94a9bf;
  stroke-width:1.6;
  stroke-dasharray:12 100;
  stroke-dashoffset:12;
  opacity:0;
  pointer-events:none;
}

@keyframes fef-v6-workflow-pulse {
  0% {
    stroke-dashoffset:12;
    opacity:0;
  }

  15% {
    opacity:.7;
  }

  80% {
    opacity:.7;
  }

  100% {
    stroke-dashoffset:-100;
    opacity:0;
  }
}

@media(hover:hover) and (pointer:fine) {
  /* Die Anhebung steht nicht hier, sondern weiter unten bei
     .fef-v6 .service.reveal:hover - sie muss den Ausschalter fuer
     reduzierte Bewegung ueberstimmen und braucht dafuer !important.
     Eine zweite Anhebung an dieser Stelle waere wirkungslos. */
  .fef-v6 .service:hover {
    background:linear-gradient(150deg,var(--surface) 34%,var(--ton-ruhig));
    border-color:var(--kontur-aktiv);
    box-shadow:var(--schatten-hover),inset 0 0 0 1px #fff;
  }

  .fef-v6 .service:hover::after {
    opacity:1;
  }

  .fef-v6 .service:hover .workflow-pulse {
    animation:fef-v6-workflow-pulse var(--dauer-puls) var(--kurve-puls) 1;
  }

  .fef-v6 .index:hover {
    border-color:var(--nacht-kontur-aktiv);
    box-shadow:inset 0 0 0 1px #ffffff0b,var(--schatten-nacht-aktiv);
  }

  .fef-v6 .index:hover::before,
  .fef-v6 .index:hover::after {
    opacity:1;
  }

  .fef-v6 .index:hover .index-art {
    opacity:1;
  }

  /* Derselbe ruhige Ton wie im Abschnitt "Das Zusammenspiel", in der
     Leistungskarte und in der Frage unter der Maus. Der Ring bleibt
     neutral, damit ueber die ganze Seite nur ein Ton wirkt. */
  .fef-v6 .btn:hover {
    transform:translateY(-1px);
    background:linear-gradient(#fff,var(--ton-ruhig));
    box-shadow:
      inset 0 1px 0 #fff,
      0 0 0 1px #ffffff3d,
      0 7px 20px #0000001f,
      0 0 26px #ffffff1f;
  }

  .fef-v6 .btn:hover::after {
    background-position:center;
    transition:background-position var(--dauer-glanz) var(--kurve-glanz);
  }
}

/* Aus dem hover:hover-Block herausgezogen (Konzept M-6/G-6): reine
   Hover-Geraete sind nicht der einzige Ort fuer :active - auf
   Touch-Geraeten (ohne hover:hover) hatte der gedrueckte Zustand sonst
   keine Wirkung. */
.fef-v6 .btn:active {
  transform:translateY(0) scale(.98);
  transition-duration:var(--dauer-sofort);
  background:linear-gradient(var(--ton-ruhig),var(--ton-ruhig-tief));
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px #ffffff2e,
    0 2px 7px #00000029;
}

.fef-v6 h1,
.fef-v6 h2,
.fef-v6 h3 {
  text-wrap:balance;
}

.fef-v6 .hero-copy,
.fef-v6 .description,
.fef-v6 .role p,
.fef-v6 .person p,
.fef-v6 .final p {
  text-wrap:pretty;
}

.fef-v6 .index a {
  transition:color 200ms,background-color 200ms;
}

.fef-v6 .index b {
  font-variant-numeric:tabular-nums;
}

.fef-v6 .service::before {
  content:"";
  position:absolute;
  pointer-events:none;
  left:28px;
  right:28px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#fff 22%,#fff 78%,transparent);
}

.fef-v6 .index-art {
  stroke:none;
  filter:none;
}

.fef-v6 .service-art {
  opacity:.92;
}

.fef-v6 .flow li>div {
  min-width:0;
}


.fef-v6 .questions details[open] {
  border-bottom-color:#b9bec4;
}

.fef-v6 .questions details[open] summary {
  color:var(--ink);
}

/* Die Zeile reagiert auf die Maus, damit erkennbar ist, dass sie
   anklickbar ist. Einzug/Rundung stehen an der Basisregel oben (gilt auch
   auf Touch fuer :active), hier nur noch die Hover-Einfaerbung selbst. */
@media(hover:hover) and (pointer:fine) {
  .fef-v6 summary {
    transition:background-color 200ms;
  }

  .fef-v6 summary:hover {
    background-color:var(--ton-ruhig);
  }
}

@media(hover:hover) and (pointer:fine) {
  .fef-v6 .person-identity .portrait:hover {
    transform:translateY(-2px);
    box-shadow:0 2px 4px #00000014, 0 16px 36px #0000001f;
  }
}

@media(prefers-reduced-motion:reduce) {
  .fef-v6, .fef-v6 *,
  .fef-v6 *::before,
  .fef-v6 *::after {
    animation:none!important;
    transition:none!important;
  }

  .fef-v6 .btn::after,
  .fef-v6 .workflow-pulse {
    display:none;
  }
}

/* Social-Icons (Bestandsfunktion) */
.fef-v6 .foot-social {
  display:flex;
  gap:14px;
  align-items:center;
}

.fef-v6 .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;
}

/* Eigene Regel statt Teil der gemeinsamen :active-Gruppe: nur hier
   traegt die Basisregel bereits eine eigene Transition (color/border-
   color) - ein reiner opacity-Shorthand wuerde die beim Loslassen
   ersetzen und den Farbuebergang zum Sprung machen. */
.fef-v6 .foot-social a:active {
  opacity:.72;
  transition:opacity var(--dauer-sofort),color 180ms,border-color 180ms;
}

@media (hover: hover) and (pointer: fine) {
  /* Der Rahmen zog frueher nicht mit: nur das Symbol wurde heller, die
     Kante blieb stehen. Halbe Rueckmeldung wirkt wie ein Fehler. */
  .fef-v6 .foot-social a:hover {
    color:#fff;
    border-color:#8a8a8a;
  }
}

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

/* ============================================
   Sanftes Einblenden beim Scrollen
   ============================================
   Der Ausgangszustand haengt an der eigenen Klasse .reveal-on, die ein
   kurzes Skript beim Seitenaufbau setzt - dadurch kein Aufblitzen. Sie ist
   bewusst getrennt von .js (Navigation): .reveal-on wird nur gesetzt, wenn
   der Browser IntersectionObserver kennt, und wieder entfernt, falls das
   Hauptskript nicht laedt. In beiden Faellen bleibt alles sichtbar.
   Ohne JavaScript bleibt ohnehin jeder Inhalt sichtbar.
   opacity und transform erzeugen keine Layoutverschiebung.
   ============================================ */
.fef-v6.reveal-on .reveal {
  opacity:0;
  transform:translate3d(0,12px,0);
}

/* Sofort sichtbar, ohne Uebergang: kein Zwischenzustand mit halber
   Deckkraft, damit der Textkontrast jederzeit korrekt messbar ist.
   Greift, wenn niemand scrollt oder reduzierte Bewegung eingestellt ist. */
.fef-v6.reveal-instant .reveal,
.fef-v6.reveal-instant .reveal.shown {
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  transition-delay:0ms !important;
}

.fef-v6.reveal-on .reveal.shown {
  opacity:1;
  transform:none;
  transition:opacity var(--dauer-eintritt) var(--kurve-aus),
             transform var(--dauer-eintritt) var(--kurve-aus);
}

/* Die Leistungskarten tragen die Klasse reveal. Die beiden Regeln darueber
   setzen transform:none und ersetzen dabei den Uebergang der Karte - mit
   vier Klassen wiegen sie schwerer als .fef-v6 .service:hover mit dreien,
   unter .reveal-instant zusaetzlich mit !important. Ohne diese Regel hob
   sich keine Leistungskarte je unter der Maus an. Deshalb hier ausdrueck-
   lich zurueckgeholt; Flaeche, Rahmen und Schatten kommen unveraendert aus
   der Hover-Regel weiter oben.

   Die Anhebung selbst ist keine Bewegung, sondern ein Zustand, und gilt
   deshalb immer - wie bei .flow und .btn, die sich bei reduzierter
   Bewegung ebenfalls anheben, nur ohne Uebergang. */
@media(hover:hover) and (pointer:fine) {
  .fef-v6 .service.reveal:hover {
    transform:translateY(-2px) !important;
  }
}

/* Der Uebergang dagegen ist Bewegung und gehoert hinter die Abfrage.
   Ohne sie schlaegt dieses !important mit vier Klassen den Ausschalter
   `.fef-v6 *{transition:none!important}` weiter oben, der nur eine hat -
   die Karte waere dann das einzige Element der Seite, das bei reduzierter
   Bewegung noch animiert. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .fef-v6 .service.reveal:hover {
    transition:var(--karte-uebergang) !important;
  }
}

/* Gestaffelt, damit Gruppen nacheinander erscheinen */
.fef-v6.reveal-on .logos picture:nth-child(2) .reveal { transition-delay:calc(var(--staffel) * 1) }
.fef-v6.reveal-on .logos picture:nth-child(3) .reveal { transition-delay:calc(var(--staffel) * 2) }
.fef-v6.reveal-on .logos picture:nth-child(4) .reveal { transition-delay:calc(var(--staffel) * 3) }
.fef-v6.reveal-on .logos picture:nth-child(5) .reveal { transition-delay:calc(var(--staffel) * 4) }
.fef-v6.reveal-on .logos picture:nth-child(6) .reveal { transition-delay:calc(var(--staffel) * 5) }
.fef-v6.reveal-on .logos picture:nth-child(7) .reveal { transition-delay:calc(var(--staffel) * 6) }

.fef-v6.reveal-on .grid .reveal:nth-child(2) { transition-delay:calc(var(--staffel) * 1) }
.fef-v6.reveal-on .grid .reveal:nth-child(3) { transition-delay:calc(var(--staffel) * 2) }
.fef-v6.reveal-on .grid .reveal:nth-child(4) { transition-delay:calc(var(--staffel) * 3) }

.fef-v6.reveal-on .flow .reveal:nth-child(2) { transition-delay:calc(var(--staffel) * 1) }
.fef-v6.reveal-on .flow .reveal:nth-child(3) { transition-delay:calc(var(--staffel) * 2) }
.fef-v6.reveal-on .flow .reveal:nth-child(4) { transition-delay:calc(var(--staffel) * 3) }

.fef-v6.reveal-on .steps .reveal:nth-child(2) { transition-delay:calc(var(--staffel) * 1) }
.fef-v6.reveal-on .steps .reveal:nth-child(3) { transition-delay:calc(var(--staffel) * 2) }
.fef-v6.reveal-on .steps .reveal:nth-child(4) { transition-delay:calc(var(--staffel) * 3) }

/* Kundenlogos: ruhig monochrom, ohne jede Reaktion auf die Maus. Das
   gleichzeitige Abdunkeln aller sechs Bilder beim Ueberfahren der Leiste
   wirkte unruhig und zog mehr Aufmerksamkeit auf sich als der Beleg wert
   ist. Der Ruhezustand steht bei .fef-v6 .logos img weiter oben. */

@media(prefers-reduced-motion:reduce) {
  .fef-v6.reveal-on .reveal,
  .fef-v6.reveal-on .reveal.shown {
    opacity:1;
    transform:none;
    transition:none;
    transition-delay:0ms;
  }

}

@media print {
  /* -- Einblendungen abgeschaltet ------------------------------------- */
  .fef-v6 .reveal,
  .fef-v6.reveal-on .reveal,
  .fef-v6.reveal-instant .reveal {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  /* main.js oeffnet die Fragen vor dem Druck - ohne Einblendung ab Deckkraft 0. */
  .fef-v6 details[open] > p {
    animation:none;
  }

  /* -- Flaechen und Schriftfarben ------------------------------------- */
  .fef-v6 .logos img {
    filter:none;
    opacity:1;
  }

  /* Browser drucken Hintergrundfarben standardmaessig nicht. Ohne diese
     Regeln stuenden die hellen Schriften aus Einstieg, Abschluss und
     Fussbereich unlesbar auf weissem Papier. */
  .fef-v6,
  .fef-v6 .hero,
  .fef-v6 .final,
  .fef-v6 footer {
    background:#fff !important;
    color:#090909 !important;
  }

  .fef-v6 .hero *,
  .fef-v6 .final *,
  .fef-v6 footer * {
    color:#090909 !important;
    border-color:#bbb !important;
  }

  /* -- Was nicht auf Papier gehoert ----------------------------------- */
  .fef-v6 .hero::before,
  .fef-v6 .index-art,
  .fef-v6 .menu,
  .fef-v6 .skip,
  .fef-v6 .nav::before {
    display:none !important;
  }


  /* Das Logo ist zu 98 Prozent weiss und waere auf dem im Druck
     erzwungenen weissen Grund unsichtbar. Umkehrung macht es dunkel. */
  .fef-v6 .brand img {
    filter:invert(1) !important;
  }

  .fef-v6 .btn {
    background:none !important;
    border:1px solid #090909 !important;
    box-shadow:none !important;
  }

  .fef-v6 .btn::after {
    display:none !important;
  }

  .fef-v6 .index {
    border-color:#bbb !important;
    box-shadow:none !important;
  }

  /* Das Auf- und Zuklapp-Zeichen ist auf Papier ohne Bedeutung. */
  .fef-v6 summary::before,
  .fef-v6 summary::after {
    display:none !important;
  }

  .fef-v6 .service {
    box-shadow:none !important;
    break-inside:avoid;
  }

  /* Zusammengehoerendes nicht ueber den Seitenwechsel reissen. Fuer die
     Leistungskarten stand das schon da, fuer alles Uebrige nicht: im
     Ausdruck standen die vier Ueberschriften der Ablaufschritte unten auf
     der einen Seite und ihre Texte verwaist oben auf der naechsten, vor
     dem naechsten Abschnitt und ohne jede Ueberschrift. */
  .fef-v6 .step,
  .fef-v6 .flow li,
  .fef-v6 .person,
  .fef-v6 .questions details,
  .fef-v6 .role {
    break-inside:avoid;
  }

  /* Eine Ueberschrift allein am Seitenende hilft niemandem. */
  /* -- Seitenumbrueche ------------------------------------------------ */
  .fef-v6 h1,
  .fef-v6 h2,
  .fef-v6 h3,
  .fef-v6 h4,
  .fef-v6 .eyebrow {
    break-after:avoid;
  }

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


/* ============================================
   Zwangsfarben (Windows-Hochkontrastmodus)
   ============================================
   Zwei Dinge fallen dort aus, die sonst nirgends ausfallen. */

@media (forced-colors: active) {
  /* Rasterbilder werden nicht umgefaerbt, der dunkle Einstieg wird aber
     auf die Flaechenfarbe des Systems gezwungen - meist Weiss. Das Logo
     ist weisse Tinte auf durchsichtigem Grund und verschwand dadurch
     vollstaendig: gemessen 0 dunkle Farbwerte im Logobereich,
     Helligkeitsspanne 26 von 255. Es ist zugleich der Weg zur Startseite.
     Deshalb behaelt genau dieses Element sein eigenes Farbschema. */
  .fef-v6 .brand,
  .fef-v6 .brand img {
    forced-color-adjust: none;
  }

  .fef-v6 .brand {
    background: #090909;
  }

  /* Die Zustandsflaeche des fixierten Headers ist ein Verlauf/Schatten
     ohne Textfarbe - im Zwangsfarbenmodus auf die Systemflaeche zwingen
     statt auf die (dort sinnlose) dunkle Bestandsfarbe. */
  .fef-v6 .nav::before {
    background: Canvas;
    box-shadow: none;
  }

  /* background-image wird auf none gezwungen. Das Auf- und Zuklapp-Zeichen
     der Fragen ist aus zwei Verlaeufen gemalt und verschwand damit
     restlos - gemessen backgroundImage "none, none", Helligkeitsspanne 0,
     ein einziger Farbwert im ganzen Bereich. Damit war weder erkennbar,
     dass eine Frage aufklappbar ist, noch ob sie offen steht.
     Hier wird es stattdessen aus Rahmenlinien gezeichnet: die faerbt das
     System auf seine Textfarbe um. Zu zeigt es nach unten, offen nach
     oben. */
  /* Der neue senkrechte Strich (::before, Session 3) ist ueberfluessig,
     sobald ::after hier vollstaendig eigenstaendig aus Rahmenlinien
     gezeichnet wird - sonst liefe eine leere, unsichtbare Box mit. */
  .fef-v6 summary::before {
    display: none;
  }

  .fef-v6 summary::after {
    background: none;
    width: 9px;
    height: 9px;
    top: 26px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .fef-v6 details[open] summary::after {
    transform: rotate(225deg);
  }
}