/* ==================== SELBSTTEST ESSSTOERUNGEN (/essstoerung-test/) ====================
   Nur auf essstoerung-test.php geladen, nach styles.css. Grundlage: SPEC v1.1,
   Abschnitte 2, 3.1, 3.5, 3.7, 7.8, 7.15. Alles ist unter .page-est gescopt.

   Regeln dieser Datei:
   - Farben nur ueber Variablen (styles.css plus die --est-* Variablen unten).
   - border-radius 0 ueberall, keine Pillen, keine farbigen Linksbalken.
     Boxen tragen eine 1-px-Linie rundum (--est-linie).
   - Fliesstext in Boxen, Widget, Tabellen, Byline, Kurzantwort: Source Sans 3.
     Ueberschriften: Cormorant Garamond.
   - [hidden] gewinnt immer (styles.css setzt display:none !important, hier
     zusaetzlich abgesichert). Einzige Ausnahme ist der Druckbereich im Druck.

   Kopfzeile (fixiert), gemessen am 13.10.2026 im Build (Chromium, Seite
   /essstoerung-test/, Schriften geladen). Die Werte in SPEC 7.8 (115 px mobil,
   208 px Desktop) stammen aus der Zeit vor "Header flacher" in styles.css und
   gelten nicht mehr:
       Breite        ungescrollt   gescrollt (.scrolled ab 50 px)
       320 bis 768   60,6 bis 63,8 px  gleich
       769 bis 1140  76,1 bis 77,5 px  69,7 bis 70,7 px
       1141 bis 1920 127,7 px          71,3 px
       2560          135,1 px          75,3 px
   Der Header waechst mit der Wurzelschrift (rem). Darum stehen die Werte als
   max(gemessen, rem-Aequivalent): bei groesserer Grundschrift im Browser
   waechst der Abstand mit.
   ===================================================================================== */

.page-est {
    --est-linie: #c9d6d1;          /* Boxen, Trennlinien (SPEC 2.6, 7.8) */
    --est-rand: #6b8f86;           /* Rahmen der Antwortflaechen, 3,56:1 (WCAG 1.4.11) */
    --est-flaeche: #f3f8f6;        /* zarte Flaeche fuer Hover, Tabellenkopf, Hinweise */
    --est-krise-flaeche: #eef5f6;  /* Krisenbox, gleicher Ton wie .krisen-box sitewide */
    --est-fehler-text: #b23b3b;    /* wie .fv2-error, 5,6:1 auf der Fehlerflaeche */
    --est-fehler-flaeche: #fdf0f0;
    --est-fehler-linie: #e6c3c3;

    /* Kopfzeile, siehe Messung oben */
    --est-header-m: max(61px, 3.6rem);    /* bis 768 px, ungescrollt = gescrollt (61 px bei 375, 66 px bei 768) */
    --est-header-t: max(77px, 4.2rem);    /* 769 bis 1140 px, ungescrollt */
    --est-header-d: max(128px, 6.4rem);   /* ab 1141 px, ungescrollt */
    --est-header: var(--est-header-m);
    --est-header-gescrollt: var(--est-header-m);
    --est-hero-oben: 60px;                /* margin-top des Heros, wie sitewide mobil */

    /* Sprungziele: Header im gescrollten Zustand plus 16 px (SPEC 7.8, WCAG 2.4.11).
       Jeder Ankersprung endet unterhalb von 50 px Scrollweg nur bei Zielen im Hero,
       und dort gibt es keine. */
    --est-anker: calc(var(--est-header-gescrollt) + 16px);
}
@media (min-width: 769px) {
    .page-est {
        --est-header: var(--est-header-t);
        --est-header-gescrollt: max(71px, 3.7rem);
        --est-hero-oben: 165px;
    }
}
@media (min-width: 1141px) {
    .page-est {
        --est-header: var(--est-header-d);
        --est-header-gescrollt: max(72px, 3.6rem);
    }
}

/* ===== Grundlagen ===== */

.page-est [hidden] { display: none !important; }

/* Visuell versteckt, fuer Screenreader lesbar (styles.css hat keine solche Klasse) */
.page-est .est-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Kein Sprungziel unter dem fixierten Header (2.4.11). Gilt fuer alle Anker der
   Seite und fuer die Fokusziele des Tests (#test, #selbsttest, #frage-*,
   #estFortschritt, #estErgebnis, #estKrise, #zeichen-*, #kb-*, #q*, #kontakt). */
.page-est [id] { scroll-margin-top: var(--est-anker); }

@media (prefers-reduced-motion: no-preference) {
    html:has(body.page-est) { scroll-behavior: smooth; }
}

/* Links im Inhalt: Petrol statt Linkblau. --link-color (#4d93aa) erreicht auf Weiss
   nur 3,5:1, --link-color-dark 4,8:1 (WCAG 1.4.3). */
.page-est main a:where(:not(.btn-primary, .btn-secondary)) { color: var(--link-color-dark); }
.page-est main a:where(:not(.btn-primary, .btn-secondary)):hover { color: var(--cta-dark); }

/* Unterstreichung auch dort, wo die sitewide Liste (styles.css "Inhaltslinks")
   nicht greift: Tabellen, Listen in Boxen, eigene Bausteine. */
.page-est .est a:where(:not(.btn-primary, .btn-secondary)),
.page-est .est-tabelle a,
.page-est .est-kbox a,
.page-est .est-krise a,
.page-est .est-kasten a,
.page-est .est-zahlen a,
.page-est .est-faq a,
.page-est .est-pruefung a,
.page-est .est-crumbs a,
.page-est .est-byline a,
.page-est .fv2-testbox a {
    text-decoration: underline;
    text-underline-offset: 0.16em;
    text-decoration-thickness: 1px;
}

/* ===== Hero (SPEC 2.2, 7.8) =====
   min-height 0 schlaegt die Banner-Mindesthoehen aus styles.css (490/470 px).
   Abstand oben: margin-top wie sitewide, padding-top raeumt den Rest des
   Headers frei und laesst 0.75rem (mobil) bzw. 1.25rem Luft. */
.page-est .hero-bg.hero-bg--test {
    min-height: 0;
    height: auto;
    margin-top: var(--est-hero-oben);
    padding-top: max(0.75rem, calc(var(--est-header) - var(--est-hero-oben) + 0.75rem));
    padding-bottom: 0.75rem;
    justify-content: flex-start;
}
@media (min-width: 769px) {
    .page-est .hero-bg.hero-bg--test {
        padding-top: max(1.25rem, calc(var(--est-header) - var(--est-hero-oben) + 1.25rem));
        padding-bottom: 1.25rem;
    }
}
/* Gleiche Satzkante wie die Abschnitte darunter (*__inner: 740 px inklusive 2 x 1.5rem) */
.page-est .hero-bg.hero-bg--test .hero-bg__content .container > * {
    max-width: min(calc(var(--content-width) - 3rem), 100%);
}

.page-est .est-crumbs {
    margin: 0 0 0.25rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-medium);
}
.page-est .est-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-est .est-crumbs li {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.page-est .est-crumbs li + li::before {
    content: "\203A";
    margin: 0 0.5rem;
    color: var(--text-medium);
}
.page-est .hero-bg--test a { color: var(--cta-dark); }   /* 5,7:1 auf --blog-surface; --cta waere 4,3:1 */
.page-est .hero-bg--test a:hover { color: var(--text-dark); }

/* H1 zweistufig: Kicker in Source Sans, Frage in Cormorant */
.page-est .test-h1 {
    margin: 0 0 0.45rem;
    font-size: inherit;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: left;
}
.page-est .test-h1__kicker {
    display: block;
    margin: 0 0 0.15rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cta-dark);   /* SPEC nennt --cta; auf --blog-surface #f5f1e9 nur 4,3:1, darum die dunkle Stufe */
}
.page-est .test-h1__frage {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.005em;
    color: var(--text-dark);
    text-wrap: balance;
}
@media (min-width: 769px) {
    .page-est .test-h1__frage { font-size: var(--h1); }
}

.page-est .est-byline {
    margin: 0 0 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-medium);
    overflow-wrap: anywhere;
}
.page-est .est-kurzantwort {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-dark);
    text-wrap: pretty;
}
@media (min-width: 769px) {
    .page-est .est-byline { font-size: 0.95rem; }
    .page-est .est-kurzantwort { font-size: 1.08rem; line-height: 1.55; }
}

/* ===== Koerperbox, statisch (#warnzeichen) und im Ergebnis (SPEC 2.6, 3.6.5) =====
   Vier Stufen nur ueber Typografie: fett, Petrol fuer die ersten beiden. */
.page-est .est-kbox {
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--est-linie);
    border-radius: 0;
    background: var(--bg-white);
    font-family: var(--font-sans);
    overflow-wrap: anywhere;
}
.page-est .est-kbox p {
    margin: 0 0 0.75rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-medium);
}
.page-est .est-kbox .est-kbox__einleitung,
.page-est .est-kbox .est-kbox__lead {
    font-size: 1.05rem;
    color: var(--text-dark);
}
.page-est .est-kbox .est-kbox__lead { font-weight: 600; }
.page-est .est-kbox__gruppe {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--est-linie);
}
.page-est .est-kbox__titel {
    margin: 0 0 0.45rem;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--text-dark);
}
.page-est .est-kbox__gruppe:nth-of-type(-n+2) .est-kbox__titel { color: var(--cta); }
.page-est .est-kbox .est-kbox__unterzeile {
    margin: 0 0 0.6rem;
    font-size: 0.98rem;
}
.page-est .est-kbox .est-kbox__abschluss {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--est-linie);
}
.page-est .est-kbox__liste li:target { background: var(--est-flaeche); }
@media (max-width: 600px) {
    .page-est .est-kbox { padding: 1.1rem 1rem; }
}

/* ===== Krisenbox, statisch (#soforthilfe) und im Ergebnis (#estKrise) =====
   Offen, nie eingeklappt; Nummern --text-dark, 1rem, fett (SPEC 2.7). */
.page-est .est-krise {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--est-linie);
    border-radius: 0;
    background: var(--est-krise-flaeche);
    font-family: var(--font-sans);
    overflow-wrap: anywhere;
}
.page-est .est-krise .est-krise__einleitung {
    margin: 0 0 0.75rem;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text-dark);
}
.page-est .est-krise__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-est .est-krise__liste li {
    margin: 0;
    padding: 0.55rem 0;
    border-top: 1px solid var(--est-linie);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-dark);
}
.page-est .est-krise__liste li:last-child { padding-bottom: 0; }
.page-est .est-krise__liste strong { font-weight: 600; }
.page-est .est-krise a[href^="tel:"] {
    display: inline-block;
    min-height: 24px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
}
.page-est .est-krise a:hover { color: var(--cta-dark); }
@media (max-width: 600px) {
    .page-est .est-krise { padding: 1.1rem 1rem; }
}

/* ===== Statische Abschnitte ===== */

/* Ueberschriften ausserhalb der Skalenliste aus styles.css: Groesse und
   relative Zeilenhoehe setzen, sonst sickert die absolute Zeilenhoehe ein. */
.page-est main .blog-section h2 {
    font-size: var(--h2);
    line-height: 1.18;
    margin-bottom: 1.25rem;
}
.page-est main :is(.intro-section__inner, .expertise-section__inner, .container) > * + h2 {
    margin-top: 3rem;
}
.page-est main :is(.intro-section, .expertise-section, .blog-section) h3:not([class]) {
    margin: 2.25rem 0 0.75rem;
    font-size: var(--h3);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: 0.005em;
}
.page-est main :is(.intro-section__inner, .expertise-section__inner) > h2 + h3:not([class]) { margin-top: 0; }

/* Listen im Fliesstext: unter der Liste mehr Luft als darueber */
.page-est .expertise-section__inner > p:has(+ ul) { margin-bottom: 0.9rem; }
.page-est .expertise-section__inner > ul:not(.expertise-list) { margin-bottom: 2rem; }

/* Beispielsaetze (2.8, 2.13): ohne Blockzitat, ohne Linksrand */
.page-est .expertise-section__inner > ul.est-saetze,
.page-est ul.est-saetze {
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}
.page-est ul.est-saetze li {
    margin: 0 0 0.6rem;
    padding: 0;
    font-size: var(--body-font-size);
    font-style: italic;
    line-height: 1.6;
    color: var(--text-dark);
}
.page-est ul.est-saetze li:last-child { margin-bottom: 0; }

/* Auf dieser Seite (2.5): eigenes Markup, keine toc-box.php */
.page-est .est-toc {
    padding: 1.25rem 1.5rem 1.1rem;
    border: 1px solid var(--est-linie);
    border-radius: 0;
    font-family: var(--font-sans);
}
.page-est .est-toc .est-toc__titel {
    margin: 0 0 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cta);
}
.page-est .est-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2 14rem;
    column-gap: 2rem;
}
.page-est .est-toc li {
    margin: 0;
    break-inside: avoid;
}
.page-est .est-toc a {
    display: inline-block;
    padding: 0.3rem 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--link-color-dark);
    text-decoration: underline;
    text-underline-offset: 0.16em;
    text-decoration-thickness: 1px;
}
@media (max-width: 600px) {
    .page-est .est-toc { padding: 1rem 1rem 0.9rem; }
}

/* Tabellen (2.9, 2.11, 2.14): echte Tabelle im eigenen Scrollcontainer (E29, WCAG 1.4.10) */
.page-est .est-tabelle {
    max-width: 100%;
    margin: 1.5rem 0 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.page-est .est-tabelle:focus-visible {
    outline: 3px solid var(--cta);
    outline-offset: 2px;
}
/* Ab 769 px bricht der Container aus der Lesespalte (680 px) auf die Menuebreite
   aus, wie .infobox in styles.css. Die Tabelle (mindestens 40rem, bei 20 px
   Wurzel 800 px) passt dann ohne Querscrollen; erst darunter scrollt sie. */
@media (min-width: 769px) {
    .page-est .est-tabelle {
        --est-ausbruch: min(calc(var(--wide-width) - 3rem), calc(100vw - 3rem));
        width: var(--est-ausbruch);
        max-width: none;
        margin-left: calc((100% - var(--est-ausbruch)) / 2);
        margin-right: 0;
    }
}
.page-est .est-tabelle table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--text-medium);
}
.page-est .est-tabelle caption {
    padding: 0 0 0.6rem;
    caption-side: top;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-dark);
    text-align: left;
}
.page-est .est-tabelle th,
.page-est .est-tabelle td {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--est-linie);
    vertical-align: top;
    text-align: left;
    overflow-wrap: break-word;
}
.page-est .est-tabelle thead th {
    background: var(--est-flaeche);
    font-weight: 600;
    color: var(--text-dark);
}
.page-est .est-tabelle tbody th {
    font-weight: 600;
    color: var(--text-dark);
}
/* Ziel aus dem Verzeichnis im Ergebnis bzw. Sprung ohne JavaScript */
.page-est .est-tabelle tr:target,
.page-est .est-tabelle tr:focus { background: var(--est-flaeche); }
.page-est .est-tabelle tr:focus { outline: 3px solid var(--cta); outline-offset: -3px; }

/* Kasten "Gesund essen oder schon zu streng?" (#gesund-essen) */
.page-est .est-kasten {
    margin: 2rem 0 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--est-linie);
    border-radius: 0;
    font-family: var(--font-sans);
    overflow-wrap: anywhere;
}
.page-est .est-kasten p {
    margin: 0 0 0.75rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-medium);
}
.page-est .est-kasten p:last-child { margin-bottom: 0; }
.page-est .est-kasten .est-kasten__titel {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-dark);
}
.page-est .est-kasten:focus { outline: none; }

/* Eisberg im Intro (#zweck): sichtbares Verhalten ueber, Funktion der Essstoerung
   unter der Wasserlinie. Die Form besteht aus zwei gestreckten SVG-Pfaden
   je einer pro Textzone: die Spitze haengt unten an der Wasserlinie
   (xMidYMax), der Koerper oben (xMidYMin), beide behalten ihr Seitenverhaeltnis
   und skalieren nur mit der Spaltenbreite. So liegt die Wasserlinie immer genau
   zwischen den beiden Zonen, egal wie der Text umbricht. Strichstaerke bleibt
   per vector-effect konstant. Rahmen ringsum 1 px, kein Radius. */
.page-est .est-eisberg {
    margin: 2rem 0;
    padding: 0;
    border: 1px solid var(--est-linie);
    border-radius: 0;
    font-family: var(--font-sans);
    overflow-wrap: anywhere;
}
.page-est .est-eisberg__titel {
    margin: 0;
    padding: 1rem 1.25rem 0.25rem;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-dark);
}
.page-est .est-eisberg__zone {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0 1rem;
    padding: 0 1.25rem 0 0.75rem;
}
.page-est .est-eisberg__zone--oben { padding-top: 0.5rem; }
.page-est .est-eisberg__zone--unten {
    background: var(--est-flaeche);
    border-top: 1px solid var(--est-rand);
}
.page-est .est-eisberg__form {
    position: relative;
    min-height: 4rem;
}
.page-est .est-eisberg__form svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.page-est .est-eisberg__flaeche { fill: var(--bg-white); stroke: none; }
.page-est .est-eisberg__linie {
    fill: none;
    stroke: var(--cta);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.page-est .est-eisberg__facette {
    fill: none;
    stroke: var(--est-linie);
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.page-est .est-eisberg__text { padding: 0.9rem 0 1rem; }
.page-est .est-eisberg__label {
    margin: 0 0 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cta);
}
.page-est .est-eisberg__text ul {
    margin: 0;
    padding: 0 0 0 1.1em;
    list-style: disc outside;
}
.page-est .est-eisberg__text li {
    margin: 0 0 0.3rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--text-medium);
}
.page-est .est-eisberg__text li:last-child { margin-bottom: 0; }
.page-est .est-eisberg__text li::marker { color: var(--est-rand); }
.page-est .est-eisberg__fuss {
    margin: 0;
    padding: 0.9rem 1.25rem 1rem;
    border-top: 1px solid var(--est-linie);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-medium);
}
@media (min-width: 601px) {
    .page-est .est-eisberg__zone {
        grid-template-columns: 9rem minmax(0, 1fr);
        gap: 0 1.5rem;
        padding: 0 1.5rem 0 1rem;
    }
    .page-est .est-eisberg__titel { padding: 1.1rem 1.5rem 0.35rem; }
    .page-est .est-eisberg__fuss { padding: 1rem 1.5rem 1.1rem; }
}

/* Zahlen mit Quelle (2.15) */
.page-est .est-zahlen {
    margin: 1.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--est-linie);
}
.page-est .est-zahlen__eintrag {
    display: grid;
    grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
    gap: 0.35rem 1.5rem;
    align-items: baseline;
    padding: 1rem 0;
    border-bottom: 1px solid var(--est-linie);
}
.page-est .est-zahlen dt {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--cta);
}
.page-est .est-zahlen dd {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-medium);
}
@media (max-width: 600px) {
    .page-est .est-zahlen__eintrag { grid-template-columns: minmax(0, 1fr); }
}

/* Haeufige Fragen (2.17): sichtbare H3 mit Absatz */
.page-est .est-faq h3:not([class]) { margin-top: 2rem; }
.page-est .est-faq h2 + h3:not([class]) { margin-top: 0; }
.page-est .est-faq p { margin-bottom: 0; }

/* Ueber diese Seite (2.18) */
.page-est .est-box {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--est-linie);
    border-radius: 0;
    font-family: var(--font-sans);
    overflow-wrap: anywhere;
}
.page-est .est-box p {
    margin: 0 0 0.85rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-medium);
}
.page-est .est-box .est-pruefung__titel {
    margin: 1.25rem 0 0.4rem;
    color: var(--text-dark);
}
.page-est .est-box .est-pruefung__titel strong { font-weight: 600; }

/* Quellen (2.19): nummerierte Liste */
.page-est .est-quellen ol {
    margin: 0;
    padding-left: 1.6rem;
}
.page-est .est-quellen li {
    margin: 0 0 0.55rem;
    padding-left: 0.2rem;
    font-size: 0.98rem;
    overflow-wrap: anywhere;
}
.page-est .est-quellen li::marker { color: var(--text-medium); }
.page-est .est-quellen li:target { background: var(--est-flaeche); }

/* ===== Sitewide Bausteine auf dieser Seite: Kontrast und Rundung (SPEC 9.7, 9.8) =====
   --text-light (#718096) erreicht auf Weiss nur 3,9:1. Betrifft auf dieser Seite
   "(optional)" am Anliegen, "Schritt 1 von 2" im Formular und die Footer-Links. */
.page-est .form-label__opt,
.page-est .fv2-progress__label,
.page-est .footer__links a { color: var(--text-medium); }
.page-est .footer__links a:hover { color: var(--link-color-dark); }
.page-est .to-top { border-radius: 0; }

/* ===== Bewegung reduzieren (SPEC 7.8) ===== */
@media (prefers-reduced-motion: reduce) {
    html:has(body.page-est) { scroll-behavior: auto; }
    .page-est .est *,
    .page-est .est *::before,
    .page-est .est *::after,
    .page-est .fv2-testbox * {
        transition: none !important;
        animation: none !important;
    }
}

/* ==================== TEST (Widget von Frau Kirchner, unveraendert seit 10/2026) ==================== */
/* Selbsttest Essstoerungen: Widget in der Warnzeichen-Sektion.
   Eigene Datei, solange der Test nicht freigegeben ist (?selbsttest=1). */
.est {
    margin: 2.5rem 0 0.5rem;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid #cfd8dc;
    background: #f7fbf9;
    font-family: 'Source Sans 3', sans-serif;
}
.est__title, .est__titel {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.75rem;
    color: var(--text-dark);
    text-align: left;
}
.est p { margin: 0 0 0.9rem; color: var(--text-medium); text-align: left; }
.est__meta { font-size: 0.95rem; color: var(--text-light); margin: 0.75rem 0 0 !important; }
.est__btn-start { margin-top: 0.25rem; }

/* Laufender Test */
.est__progress { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.25rem; }
.est__bar { flex: 1; height: 4px; background: #dfe8e4; }
.est__fill { height: 100%; width: 0; background: var(--cta); transition: width 0.25s ease; }
.est__count { font-size: 0.92rem; color: var(--text-light); white-space: nowrap; }
.est__frage {
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--text-dark);
    margin: 0 0 0.5rem;
    outline: none;
}
.est__hinweis { font-size: 0.95rem; color: var(--text-light); margin-bottom: 1rem; }
.est__antworten { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1rem 0 1.25rem; }
.est__antworten--liste { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.est__antworten--eins { grid-template-columns: 1fr; }
.est__antwort {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    min-height: 3.25rem;
    padding: 0.8rem 1rem;
    background: #fff;
    border: 1px solid #b9c7c2;
    color: var(--text-dark);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.est__antwort--text { text-align: left; font-weight: 400; }
.est__antwort--weissnicht { grid-column: 1 / -1; font-weight: 400; }
.est__antwort:hover { border-color: var(--cta); background: #eef7f3; }
.est__antwort:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }
.est__antwort--gewaehlt { border-color: var(--cta); background: var(--cta); color: #fff; }
.est__nav { display: flex; justify-content: space-between; gap: 1rem; }
.est__back, .est__abbruch, .est__neu {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.98rem;
    background: none;
    border: none;
    padding: 0.4rem 0;
    color: var(--link-color-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.est__abbruch { margin-left: auto; color: var(--text-light); }

/* Ergebnis */
.est__kicker { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cta); margin-bottom: 0.4rem; }
.est__titel { outline: none; }
.est__text { font-size: 1.08rem; }
.est__dringend {
    padding: 0.9rem 1rem;
    border: 1px solid #c9a1a1;
    background: #fbf3f3;
    color: var(--text-dark);
}
.est__details { margin: 0.5rem 0 1rem; font-size: 0.98rem; }
.est__details summary { cursor: pointer; color: var(--link-color-dark); }
.est__details ul,
.fv2-testbox__liste { list-style: none; margin: 0.5rem 0 0; padding: 0; color: var(--text-medium); }
/* Eigenes Quadrat statt ::marker: sitzt exakt auf der linken Textkante */
.est__details li,
.fv2-testbox__liste li { position: relative; margin-bottom: 0.25rem; padding-left: 1.1em; }
.est__details li::before,
.fv2-testbox__liste li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.6em;
    width: 0.36em;
    height: 0.36em;
    background: var(--cta);
}
.est__vorbehalt { font-size: 0.92rem; color: var(--text-light); }
.est__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1rem 0 0.75rem; }
.est__cta a:not(.btn-primary) { color: var(--link-color-dark); }
.est__neu { color: var(--text-light); }

@media (max-width: 600px) {
    .est { padding: 1.4rem 1.1rem 1.25rem; margin-left: -0.25rem; margin-right: -0.25rem; }
    .est__title, .est__titel { font-size: 1.5rem; }
    .est__frage { font-size: 1.15rem; }
    .est__antworten { grid-template-columns: 1fr 1fr; }
    .est__antworten--liste { grid-template-columns: 1fr 1fr 1fr; }
    .est__antworten--eins { grid-template-columns: 1fr; }
    .est__cta .btn-primary { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .est__fill { transition: none; } }

/* Box im Kontaktformular mit den Angaben aus dem Test */
.fv2-testbox {
    position: relative;
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem 2.4rem;
    border: 1px solid #cfd8dc;
    background: #f7fbf9;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.98rem;
}
.fv2-testbox[hidden] { display: none; }
.fv2-testbox__titel { margin: 0 0 0.4rem; font-weight: 600; color: var(--text-dark); }
.fv2-testbox__liste { margin-top: 0; }
.fv2-testbox__liste .fv2-testbox__ergebnis { color: var(--text-dark); font-weight: 600; }
.fv2-testbox__links {
    position: absolute;
    right: 1.1rem;
    bottom: 0.7rem;
    display: flex;
    gap: 1.1rem;
}
.fv2-testbox__links[hidden], .fv2-testbox__edit[hidden], .fv2-testbox__liste[hidden] { display: none; }
.fv2-testbox__link {
    font-family: inherit;
    font-size: 0.9rem;
    background: none;
    border: none;
    padding: 0.2rem 0;
    color: var(--text-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.fv2-testbox__link:hover { color: var(--text-dark); }
.fv2-testbox__link:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

/* Bearbeitungsmodus */
.fv2-testbox:has(.fv2-testbox__edit:not([hidden])) { padding-bottom: 1rem; }
.fv2-testbox__gruppe { border: none; margin: 0 0 0.9rem; padding: 0; min-width: 0; }
.fv2-testbox__gruppe legend { font-weight: 600; color: var(--text-dark); padding: 0; margin-bottom: 0.35rem; font-size: 0.95rem; }
.fv2-testbox__check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.35rem 0;
    cursor: pointer;
    color: var(--text-medium);
    line-height: 1.45;
}
.fv2-testbox__check input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
    accent-color: var(--cta);
    cursor: pointer;
}
.fv2-testbox__live {
    margin: 0.25rem 0 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid #dbe4e0;
    font-weight: 600;
    color: var(--text-dark);
}
.fv2-testbox__aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem 1.25rem; }
.fv2-testbox__reset { margin-right: auto; }
.fv2-testbox__ok { padding: 0.55rem 1.25rem; font-size: 0.98rem; }
@media (max-width: 600px) {
    .fv2-testbox__aktionen { justify-content: space-between; }
    .fv2-testbox__reset { flex-basis: 100%; text-align: left; }
}

/* Eigene Sektion direkt nach dem Intro: Abstand macht die Sektion, nicht die Box */
.selbsttest-section .est { margin: 0; }
.selbsttest-section .est__title { text-align: left; margin-bottom: 0.75rem; }

/* Test direkt unter dem Hero: weniger Luft darueber (Abschnitt #test) */
.page-est .est-section { padding-top: clamp(1.75rem, 4vw, 2.75rem); }
.page-est .est-section .est { margin-top: 0; }

/* ===== Aufzaehlungen: ein Stil fuer die ganze Seite (14.10.2026) =====
   Kleines Quadrat in Petrol, haengend vor der Satzkante (Text steht buendig
   mit Ueberschrift und Absatz). In der Liste engerer Zeilenabstand, dafuer
   ein halber Zeilenabstand zwischen den Punkten; unter der Liste mehr Luft
   als darueber. Gleiches Zeichen wie im Testergebnis. */
.page-est .est-kbox__liste,
.page-est .expertise-section__inner > ul:not(.expertise-list):not(.est-saetze),
.page-est .est__details ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.page-est .est-kbox__liste li,
.page-est .expertise-section__inner > ul:not(.expertise-list):not(.est-saetze) li,
.page-est .est__details li {
    position: relative;
    padding-left: 0;
    margin: 0 0 0.5em;
    line-height: 1.5;
}
.page-est .est-kbox__liste li:last-child,
.page-est .expertise-section__inner > ul:not(.expertise-list):not(.est-saetze) li:last-child,
.page-est .est__details li:last-child { margin-bottom: 0; }
.page-est .est-kbox__liste li::before,
.page-est .expertise-section__inner > ul:not(.expertise-list):not(.est-saetze) li::before,
.page-est .est__details li::before {
    content: "";
    position: absolute;
    left: -1em;
    top: 0.57em;          /* Mitte der ersten Zeile bei line-height 1.5 */
    width: 0.36em;
    height: 0.36em;
    background: var(--cta);
}
.page-est .est-kbox__liste { margin-bottom: 0.4rem; }
.page-est .expertise-section__inner > ul:not(.expertise-list):not(.est-saetze) { margin-bottom: 2rem; }
@media (max-width: 600px) {
    /* Platz fuer die haengenden Quadrate innerhalb des Rahmens */
    .page-est .est-kbox { padding-left: 1.75rem; }
}

/* ===== Aufzaehlungen, Feinschliff 14.10.2026 =====
   Zeilenabstand der Liste = Zeilenabstand des umgebenden Textes, gegliedert
   wird ueber den Abstand zwischen den Punkten. Quadrat etwa halbe bis zwei
   Drittel x-Hoehe, per vertical-align: middle auf der Mitte der x-Hoehe,
   haengend vor der Satzkante (Abstand zum Text etwa ein Halbgeviert). */
.page-est .est-kbox__liste li {
    font-size: 1.05em;            /* gleich gross wie der Absatz der Box */
    line-height: 1.55;
    margin-bottom: 0.4em;
}
.page-est .expertise-section__inner > ul:not(.expertise-list):not(.est-saetze) li {
    line-height: 1.8;             /* wie der Fliesstext daneben */
    margin-bottom: 0.4em;
}
.page-est .est__details li { margin-bottom: 0.4em; }
.page-est .est-kbox__liste li:last-child,
.page-est .expertise-section__inner > ul:not(.expertise-list):not(.est-saetze) li:last-child,
.page-est .est__details li:last-child { margin-bottom: 0; }
.page-est .est-kbox__liste li::before,
.page-est .expertise-section__inner > ul:not(.expertise-list):not(.est-saetze) li::before,
.page-est .est__details li::before {
    position: static;
    top: auto;
    left: auto;
    display: inline-block;
    width: 0.26em;
    height: 0.26em;
    margin: 0 0.5em 0 -0.76em;
    vertical-align: middle;
}