/*==============================================================================
  Hochfranken Havarie - Sven Meiler
  Gestaltungssprache "Das Gutachten"

  Die Seite sieht aus wie das Produkt, das sie verkauft: ein Sachverstaendigen-
  gutachten. Nicht "Website ueber Gutachten", sondern Aktenanmutung. Das ist
  zugleich das staerkste Verkaufsargument - es sagt NEUTRAL und GERICHTSFEST
  durch die Form, statt es als Adjektiv zu behaupten.

  Kein Bootstrap, kein Fremd-Framework. Das erspart die Kaskadenkaempfe,
  die @layer-Falle und die "Fremd-Bausteine im Dunkeln"-Falle aus CLAUDE.md
  gleich mit: es gibt hier keine fremden Bausteine.

  DREI REGELN, die das ganze Blatt tragen:
    1. Rot ist MARKIERUNG, nie Flaeche unter Fliesstext. Siegel, Randstrich,
       Kennziffer. Damit kann der Dunkelmodus-Defekt gar nicht wiederkehren.
    2. Statt Karten und Schatten: Haarlinien und Raender.
    3. Statt Symbolen: Nummern. Abschnitte werden 01-09 mit Rubrum.

  FARBEN: ein Wertepaar je Token ueber light-dark(). Ein vergessenes
  Gegenstueck ist damit strukturell unmoeglich - genau dieses Versehen hat im
  alten Stylesheet dazu gefuehrt, dass Rot im Dunkelmodus bei 1,84:1 stand.

  BROWSER: light-dark() setzt Chrome 123+, Safari 17.5+, Firefox 120+ voraus
  (alle seit Anfang 2024). Es braucht ausserdem ein gesetztes color-scheme -
  siehe Abschnitt 0. Ohne das waehlt light-dark() IMMER die erste Haelfte.
==============================================================================*/


/*==============================================================================
  0 - SCHRIFTEN
  Fuenf Dateien, 111 KB. Zum Vergleich: der Bestand laedt 19 Untermengen-
  Dateien (354 KB) plus Bootstrap (306 KB) plus Symbolschrift (211 KB).
==============================================================================*/

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/vendor/fonts/cormorant-500.woff2) format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/vendor/fonts/cormorant-600.woff2) format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/vendor/fonts/inter-400.woff2) format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/vendor/fonts/inter-500.woff2) format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/vendor/fonts/inter-600.woff2) format('woff2');
}


/*==============================================================================
  1 - TOKEN

  color-scheme MUSS gesetzt sein, sonst nimmt light-dark() immer den ersten
  Wert. Die Umschaltung haengt am Attribut data-bs-theme, das theme.js aus
  localStorage('hfh-theme') schreibt - der Name bleibt, damit der vorhandene
  Umschalter weiter funktioniert.
==============================================================================*/

:root {
    color-scheme: light;
}
:root[data-bs-theme="dark"] {
    color-scheme: dark;
}

:root {

    /* --- Papier und Tinte ------------------------------------------------
       Hell: Papier, nicht Weiss. Ein Hauch warm, damit Haarlinien tragen -
       auf reinem Weiss wirkt eine 1px-Linie entweder schmutzig oder unsichtbar.
       Dunkel: NICHT invertiertes Papier, sondern der Schreibtisch bei Nacht.
       Dunkles Petrol als Raum, das Blatt liegt als hellere Flaeche darauf. */
    --hfh-paper:      light-dark(#fbfaf8, #131c25);   /* Grund der Seite      */
    --hfh-sheet:      light-dark(#ffffff, #1c2732);   /* das Blatt darauf     */
    --hfh-sheet-alt:  light-dark(#f4f1ec, #222e3a);   /* abgesetzter Streifen */

    --hfh-ink:        light-dark(#16232e, #e7eef4);   /* Fliesstext           */
    --hfh-ink-2:      light-dark(#4a5a68, #adbcc8);   /* gedaempft            */
    --hfh-ink-3:      light-dark(#5f6d7a, #8c9dab);   /* Marginalie, Fussnote */
    --hfh-ink-invert: light-dark(#ffffff, #131c25);   /* Schrift auf Tinte    */

    /* --- Linien ----------------------------------------------------------
       Die Aktenanmutung lebt von Linien, nicht von Schatten. Drei Staerken:
       Haarlinie (Tabellenzeile), Linie (Abschnitt), Balken (Rubrum). */
    --hfh-rule:       light-dark(#e2ddd4, #2e3c49);   /* Haarlinie, reine Deko */
    /* --hfh-rule-2 traegt Feldrahmen UND den Rand des stillen Knopfes. Das
       sind Bedienelement-Grenzen: WCAG 1.4.11 verlangt dort 3:1. Der zuerst
       gewaehlte Papierton #c9c2b6 stand bei 1,77:1 - schoen, aber fuer
       jemanden mit schwacher Sehkraft war der Rand des Feldes nicht da. */
    --hfh-rule-2:     light-dark(#948b79, #5b7287);
    --hfh-rule-ink:   light-dark(#16232e, #e7eef4);   /* Balken, Rubrum      */

    /* --- Rot: die Markierung des Sachverstaendigen ------------------------
       Rot traegt NIE Fliesstext auf einer roten Flaeche und nie Flaechen
       unter langem Text. Es markiert: Siegel, Randstrich, Kennziffer, Notruf.
       Deshalb reichen hier zwei Rollen sauber getrennt. */
    --hfh-mark:       light-dark(#a10404, #ff6259);   /* Rot als SCHRIFT      */
    --hfh-mark-2:     light-dark(#7a0303, #ff9086);   /* betont / Hover       */
    --hfh-mark-face:  light-dark(#a10404, #d92b2b);   /* Rot als FLAECHE      */
    --hfh-mark-face-2:light-dark(#7a0303, #b81f1f);   /* Flaeche, Hover       */
    --hfh-mark-wash:  light-dark(#f6ecea, #2b1d20);   /* zarte Tonung         */

    /* --- Zustaende: je drei Werte (Schrift, Flaeche, Linie) ---------------
       Konvention aus CLAUDE.md: eine Zustandsfarbe allein reicht nur fuer
       Text. Wo Flaeche und Linie fehlen, mischt sich jede Stelle ihren
       eigenen Prozentsatz - und irgendwann traegt jemand den Wert fest ein. */
    --hfh-ok:         light-dark(#1d6b3f, #5fd08b);
    --hfh-ok-face:    light-dark(#e8f3ec, #16281f);
    --hfh-ok-line:    light-dark(#4f8f6b, #3f7957);

    --hfh-warn:       light-dark(#8a5a00, #f0b84a);
    --hfh-warn-face:  light-dark(#fbf2e0, #2a2113);
    --hfh-warn-line:  light-dark(#a5801f, #85682e);

    --hfh-err:        light-dark(#a10404, #ff6259);
    --hfh-err-face:   light-dark(#f9eae9, #2b1d20);
    --hfh-err-line:   light-dark(#c2665f, #a94f4a);

    /* --- Schrift ---------------------------------------------------------
       Serife fuer Ueberschriften ist die eigentliche Umstellung: eine
       Groteske kann keine Aktenanmutung. Kennziffern, Aktenzeichen und
       Preise laufen in ui-monospace - Systemstapel, 0 Byte, und Ziffern
       stehen dort untereinander statt zu tanzen. */
    --hfh-serif: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
    --hfh-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hfh-mono:  ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

    /* Fluide Skala. Die Serife traegt bei gleicher Punktgroesse optisch
       kleiner als Inter, deshalb stehen die Ueberschriften bewusst gross. */
    --hfh-t-xs:   0.75rem;
    --hfh-t-sm:   0.8125rem;
    --hfh-t-base: 1.0625rem;                              /* 17px: Lesegroesse */
    --hfh-t-lg:   clamp(1.125rem, 0.5vw + 1rem,   1.25rem);
    --hfh-h4:     clamp(1.15rem, 0.6vw + 1rem,    1.35rem);
    --hfh-h3:     clamp(1.35rem, 1.1vw + 1.05rem, 1.75rem);
    --hfh-h2:     clamp(1.7rem,  2.0vw + 1.1rem,  2.5rem);
    --hfh-h1:     clamp(2.1rem,  4.2vw + 1rem,    3.6rem);

    /* --- Zeilenraster ----------------------------------------------------
       Ein gleichmaessiger vertikaler Rhythmus ist der halbe Akteneindruck.
       Alle Abstaende sind Vielfache dieser Zeile. */
    --hfh-lead:   1.7;
    --hfh-zeile:  1.7rem;
    --hfh-z-half: 0.85rem;

    /* --- Masse -----------------------------------------------------------
       Textmass bewusst schmal: 66 Zeichen ist Lesbarkeitsoptimum, und ein
       schmaler Satzspiegel neben einer Randspalte IST die Aktenanmutung. */
    --hfh-satz:   44rem;                 /* Textspalte             */
    --hfh-rand:   12rem;                 /* Marginalienspalte      */
    --hfh-blatt:  74rem;                 /* Aussenmass             */
    --hfh-luft:   clamp(1.25rem, 4vw, 3rem);

    --hfh-fokus:  light-dark(#0b5cab, #7cc0ff);
}


/*==============================================================================
  2 - GRUNDLAGEN
==============================================================================*/

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--hfh-paper);
    color: var(--hfh-ink);
    font-family: var(--hfh-sans);
    font-size: var(--hfh-t-base);
    line-height: var(--hfh-lead);
    font-feature-settings: 'kern' 1;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1 0 auto; }

img, svg, video { max-width: 100%; height: auto; }

/* Fokus: sichtbar, aber nicht laut. :focus-visible statt :focus, damit ein
   Mausklick keinen Ring hinterlaesst. Zwei Ringe (Farbe + Papier) halten den
   Fokus auch auf farbigen Flaechen sichtbar. */
:focus-visible {
    outline: 2px solid var(--hfh-fokus);
    outline-offset: 2px;
    border-radius: 1px;
}

::selection {
    background: var(--hfh-mark-face);
    color: #fff;
}


/*==============================================================================
  3 - TYPOGRAFIE
==============================================================================*/

/* Element UND Klasse als Paar. Ohne die Klassenhaelfte ist ein
   <h2 class="h3"> genau so gross wie ein h2 - die Klasse tut dann schlicht
   nichts, und niemand sieht es, weil eine zu grosse Ueberschrift nicht
   falsch aussieht, sondern nur zu gross. Genau so lief auf der
   Leistungsseite "Versicherungsfallrekonstruktion" ueber die Spalte
   hinaus, waehrend derselbe Begriff auf der Startseite passte.
   (Dieselbe Regel steht in CLAUDE.md unter der @layer-Falle.) */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    font-family: var(--hfh-serif);
    font-weight: 600;
    color: var(--hfh-ink);
    line-height: 1.15;
    margin: 0 0 var(--hfh-z-half);
    letter-spacing: -0.005em;
    /* Deutsche Komposita sind lang: "Versicherungsfallrekonstruktion" hat
       31 Zeichen und passt in keine Spalte. hyphens:auto trennt sie sauber
       (das noetige lang-Attribut steht am <html>), overflow-wrap ist die
       Rueckfallebene, falls kein Trennwoerterbuch da ist. */
    overflow-wrap: break-word;
    hyphens: auto;
}
h1, .h1 { font-size: var(--hfh-h1); line-height: 1.06; }
h2, .h2 { font-size: var(--hfh-h2); }
h3, .h3 { font-size: var(--hfh-h3); }
h4, .h4 { font-size: var(--hfh-h4); }

/* Die Seitentitel bleiben ungetrennt - eine getrennte Schlagzeile sieht
   nach Platzmangel aus. Sie sind kurz genug, dass es nie noetig ist. */
h1, .h1 { hyphens: manual; }

h5, h6 {
    font-family: var(--hfh-sans);
    font-size: var(--hfh-t-sm);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hfh-ink-3);
    margin: 0 0 var(--hfh-z-half);
}

/* Auch im Fliesstext: 'Reparaturdienstleistung' und Verwandte sprengen
   sonst eine schmale Spalte. */
p, li, td, th, dd, dt { overflow-wrap: break-word; hyphens: auto; }
p { margin: 0 0 var(--hfh-zeile); max-width: 66ch; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--hfh-ink);
    text-decoration: underline;
    text-decoration-color: var(--hfh-rule-2);
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
    transition: text-decoration-color .18s, color .18s;
}
a:hover {
    color: var(--hfh-mark);
    text-decoration-color: currentColor;
}

strong, b { font-weight: 600; }

small { font-size: var(--hfh-t-sm); color: var(--hfh-ink-3); }

/* Zahlen, Aktenzeichen, Preise. tabular-nums stellt die Ziffern in ein
   Raster - in einer Preistabelle ist das der Unterschied zwischen "Liste"
   und "Aufstellung". */
.hfh-zahl, .hfh-az {
    font-family: var(--hfh-mono);
    font-variant-numeric: tabular-nums;
    font-size: .92em;
    letter-spacing: -0.01em;
}

/* Rubrum: die kleine Zeile ueber einer Ueberschrift. In der Akte steht dort
   der Bezug, nicht die Werbung. */
.hfh-rubrum {
    font-family: var(--hfh-mono);
    font-size: var(--hfh-t-xs);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hfh-mark);
    margin: 0 0 var(--hfh-z-half);
}

/* Vorspann: der eine Absatz unter einer Ueberschrift, der groesser laeuft. */
.hfh-vorspann {
    font-size: var(--hfh-t-lg);
    color: var(--hfh-ink-2);
    max-width: 58ch;
}

blockquote {
    margin: var(--hfh-zeile) 0;
    padding-left: var(--hfh-zeile);
    border-left: 2px solid var(--hfh-mark);
    font-family: var(--hfh-serif);
    font-size: var(--hfh-t-lg);
    color: var(--hfh-ink-2);
}


/*==============================================================================
  4 - RASTER UND LAYOUT
  Kein Framework-Grid. Vier Klassen tragen die ganze Seite.
==============================================================================*/

.hfh-blatt {
    width: 100%;
    max-width: var(--hfh-blatt);
    margin-inline: auto;
    padding-inline: var(--hfh-luft);
}

/* Der Aktenaufbau: Randspalte + Satzspiegel. Unter 900px faellt die
   Randspalte weg und ihr Inhalt laeuft als Zeile ueber dem Text. */
.hfh-akte {
    display: grid;
    grid-template-columns: var(--hfh-rand) minmax(0, var(--hfh-satz));
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}
@media (max-width: 900px) {
    .hfh-akte { grid-template-columns: minmax(0, 1fr); row-gap: var(--hfh-z-half); }
}

/* Die Randbemerkung. Rechtsbuendig gegen den Satzspiegel, wie im Original. */
.hfh-marginalie {
    font-size: var(--hfh-t-sm);
    line-height: 1.45;
    color: var(--hfh-ink-3);
    text-align: right;
    padding-top: .35rem;
}
.hfh-marginalie dt {
    font-family: var(--hfh-mono);
    font-size: var(--hfh-t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hfh-ink-3);
}
.hfh-marginalie dd {
    margin: 0 0 var(--hfh-z-half);
    color: var(--hfh-ink-2);
}
@media (max-width: 900px) {
    .hfh-marginalie {
        text-align: left;
        border-left: 2px solid var(--hfh-rule-2);
        padding: 0 0 0 .85rem;
    }
    .hfh-marginalie dd { display: inline; margin-right: 1rem; }
    .hfh-marginalie dt { display: inline; margin-right: .35rem; }
}

/* Abschnitt: der vertikale Rhythmus der Seite. */
.hfh-abschnitt {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}
.hfh-abschnitt + .hfh-abschnitt {
    border-top: 1px solid var(--hfh-rule);
}
.hfh-abschnitt--getoent { background: var(--hfh-sheet-alt); }

.hfh-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
}


/*==============================================================================
  5 - RUBRIK: der nummerierte Abschnitt
  Ersetzt die Symbolkachel. Statt eines Piktogramms steht die Kennziffer -
  wie ein Abschnitt eines Berichts. Der rote Balken darueber ist die
  Markierung des Sachverstaendigen.
==============================================================================*/

.hfh-rubrik {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 1.25rem;
    padding-top: .75rem;
    border-top: 2px solid var(--hfh-rule-ink);
}

.hfh-rubrik-nr {
    font-family: var(--hfh-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--hfh-t-sm);
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--hfh-mark);
    padding-top: .15rem;
}

.hfh-rubrik h3 { font-size: var(--hfh-h4); margin-bottom: .35rem; }
.hfh-rubrik p  { font-size: var(--hfh-t-sm); color: var(--hfh-ink-2); margin: 0; }

/* Die hervorgehobene Rubrik traegt den roten Balken statt des schwarzen -
   kein zweiter Kasten, keine zweite Flaeche, nur eine andere Linie. */
.hfh-rubrik--betont { border-top-color: var(--hfh-mark); }


/*==============================================================================
  6 - SIEGEL
  Ersetzt das "hero-badge". Kein Aufkleber mit runden Ecken, sondern eine
  Praegung: doppelter Ring, gesperrte Versalien, leicht aus der Achse.
==============================================================================*/

.hfh-siegel {
    display: inline-grid;
    place-items: center;
    width: 7.5rem;
    height: 7.5rem;
    border: 2px solid var(--hfh-mark);
    border-radius: 50%;
    color: var(--hfh-mark);
    text-align: center;
    padding: .5rem;
    rotate: -7deg;
    box-shadow: inset 0 0 0 3px var(--hfh-paper), inset 0 0 0 4px var(--hfh-mark);
    opacity: .92;
}
.hfh-siegel-text {
    font-family: var(--hfh-mono);
    font-size: .58rem;
    line-height: 1.35;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hfh-siegel-jahr {
    font-family: var(--hfh-serif);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    display: block;
    margin: .2rem 0;
}


/*==============================================================================
  7 - TABELLE
  Die Konditionen sind eine Aufstellung, keine Preiskarten mit
  "Beliebt"-Abzeichen. Haarlinien, tabellarische Ziffern, rechtsbuendige
  Betraege - so steht es in jeder Rechnung und in jedem Gutachten.
==============================================================================*/

.hfh-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--hfh-t-sm);
}
.hfh-tabelle caption {
    text-align: left;
    font-family: var(--hfh-mono);
    font-size: var(--hfh-t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hfh-ink-3);
    padding-bottom: .6rem;
}
.hfh-tabelle th {
    text-align: left;
    font-weight: 600;
    font-size: var(--hfh-t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hfh-ink-3);
    padding: .5rem .75rem .5rem 0;
    border-bottom: 1px solid var(--hfh-rule-ink);
}
.hfh-tabelle td {
    padding: .7rem .75rem .7rem 0;
    border-bottom: 1px solid var(--hfh-rule);
    vertical-align: baseline;
}
.hfh-tabelle tr:last-child td { border-bottom: 1px solid var(--hfh-rule-ink); }

.hfh-tabelle .hfh-betrag,
.hfh-tabelle th.hfh-betrag {
    text-align: right;
    padding-right: 0;
    font-family: var(--hfh-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Zuschlaege sind Abweichungen vom Satz - sie werden markiert, nicht gefaerbt. */
.hfh-tabelle .hfh-zuschlag { color: var(--hfh-mark); }

.hfh-fussnote {
    margin-top: var(--hfh-z-half);
    font-size: var(--hfh-t-xs);
    color: var(--hfh-ink-3);
    max-width: 66ch;
}

/* Balken in einer Aufstellung. Bewusst schlicht: eine Linie in Tinte, kein
   Farbverlauf. Die Zahl daneben ist die Aussage, der Balken nur ihr Bild -
   deshalb ist er fuer Vorlesehilfen unsichtbar (aria-hidden waere falsch,
   er traegt gar keinen Text). */
.hfh-balken {
    display: block;
    height: .5rem;
    background-color: var(--hfh-sheet-alt);
    border: 1px solid var(--hfh-rule);
}
.hfh-balken > span {
    display: block;
    height: 100%;
    background-color: var(--hfh-ink-2);
}

/*==============================================================================
  7b - DASHBOARD: Kennzahlen, Verlaufsdiagramm, Verwaltungs-Leiste
  Eigene Bausteine, damit das Dashboard ohne Inline-style auskommt und im
  Erscheinungsbild mitwandert.
==============================================================================*/

/* Abstands-Hilfen: der frühere Wildwuchs aus 1.5/2/1.25rem im style-Attribut. */
.hfh-mt-band { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.hfh-mt-half { margin-top: var(--hfh-z-half); }
.hfh-brechen { word-break: break-all; }
.hfh-gedaempft { color: var(--hfh-ink-3); }

/* Kennzahl-Block: Papierfläche mit Tinten-Oberkante, wie die Rubrik. */
.hfh-kennzahl {
    display: grid;
    gap: .3rem;
    padding: 1.1rem 1.25rem;
    background-color: var(--hfh-sheet);
    border: 1px solid var(--hfh-rule);
    border-top: 2px solid var(--hfh-rule-ink);
}
.hfh-kennzahl-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--hfh-mono);
    font-size: var(--hfh-t-xs);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--hfh-ink-3);
}
.hfh-kennzahl-kopf .hfh-symbol { width: 1rem; height: 1rem; color: var(--hfh-mark); }
.hfh-kennzahl-wert {
    font-family: var(--hfh-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 500;
    line-height: 1;
    color: var(--hfh-ink);
}
.hfh-kennzahl-fuss { font-size: var(--hfh-t-xs); color: var(--hfh-ink-3); }

/* 30-Tage-Diagramm. Farben aus Klassen, Maße als SVG-Attribute. */
.hfh-diagramm {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--hfh-z-half);
    max-height: 14rem;
}
.hfh-diagramm .balken       { fill: var(--hfh-ink-2); }
.hfh-diagramm .achse        { stroke: var(--hfh-rule-ink); stroke-width: 1; }
.hfh-diagramm .beschriftung {
    fill: var(--hfh-ink-3);
    font-family: var(--hfh-mono);
    font-size: 9px;
}
.hfh-diagramm-tabelle > summary {
    cursor: pointer;
    margin-top: var(--hfh-z-half);
    font-family: var(--hfh-mono);
    font-size: var(--hfh-t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hfh-ink-3);
}

/* Verwaltungs-Leiste (Dashboard · Posteingang) – auf beiden Admin-Seiten. */
.hfh-admin-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--hfh-rule);
}
.hfh-admin-leiste a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--hfh-mono);
    font-size: var(--hfh-t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hfh-ink-3);
    text-decoration: none;
    padding-bottom: .2rem;
    border-bottom: 2px solid transparent;
}
.hfh-admin-leiste a:hover { color: var(--hfh-ink); }
.hfh-admin-leiste a[aria-current] { color: var(--hfh-ink); border-bottom-color: var(--hfh-mark); }
.hfh-admin-leiste .hfh-symbol { width: 1rem; height: 1rem; }


/*==============================================================================
  8 - KNOEPFE
  Kein Farbverlauf, kein Schwebeeffekt, keine runden Pillen. Ein Knopf ist
  hier ein Stempelfeld: gerade Kanten, klare Kante, Versalien gesperrt.
==============================================================================*/

.hfh-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--hfh-sans);
    font-size: var(--hfh-t-sm);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    padding: .95rem 1.5rem;
    border: 1px solid var(--hfh-rule-ink);
    border-radius: 2px;
    background: transparent;
    color: var(--hfh-ink);
    cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s;
}
.hfh-knopf:hover {
    background: var(--hfh-ink);
    color: var(--hfh-ink-invert);
    border-color: var(--hfh-ink);
}

/* Der Notruf. Die einzige Stelle, an der Rot eine Flaeche unter Schrift
   traegt - und deshalb an --hfh-mark-face gebunden, nicht an --hfh-mark:
   gemessen traegt kein einziges Rot beide Rollen (siehe style.css). */
.hfh-knopf--notruf {
    background: var(--hfh-mark-face);
    border-color: var(--hfh-mark-face);
    color: #fff;
}
.hfh-knopf--notruf:hover {
    background: var(--hfh-mark-face-2);
    border-color: var(--hfh-mark-face-2);
    color: #fff;
}

.hfh-knopf--still {
    border-color: var(--hfh-rule-2);
    color: var(--hfh-ink-2);
}
.hfh-knopf--still:hover {
    background: transparent;
    border-color: var(--hfh-ink);
    color: var(--hfh-ink);
}

.hfh-knopf:disabled,
.hfh-knopf[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    background: transparent;
    color: var(--hfh-ink-3);
    border-color: var(--hfh-rule);
}


/*==============================================================================
  9 - FORMULAR
  Ohne Bootstrap muss der Formularzustand selbst dastehen. Feldweise
  Rueckmeldung ist im Workspace Pflicht (basti-Standard): je Feld eine
  eigene Meldung, nicht ein Sammelfehler oben.

  Bewusst KEINE background-Kurzform: die Falle aus CLAUDE.md kann hier zwar
  nicht mehr zuschlagen (kein Bootstrap), aber die Gewohnheit bleibt richtig.
==============================================================================*/

.hfh-feld { margin-bottom: var(--hfh-zeile); }

/* Die Feldbeschriftung - aber NICHT die des Kontrollkastens. Der traegt
   sein Label um Kaestchen und Text herum, und "display:block" stapelt
   beide untereinander statt sie nebeneinander zu setzen. Genau das ist
   passiert: der Datenschutz-Text stand unter seinem Haekchen.
   Der Ausschluss steht in :where(), damit die Spezifitaet bei 0,1,1
   bleibt - ein blosses :not(.hfh-kontroll) haette sie auf 0,2,1 gehoben
   und spaeter Regeln geschlagen, die es gar nicht meint. (Dieselbe Falle
   steht in CLAUDE.md unter der @layer-Regel.) */
.hfh-feld label:not(:where(.hfh-kontroll)) {
    display: block;
    font-size: var(--hfh-t-xs);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hfh-ink-3);
    margin-bottom: .4rem;
}
.hfh-feld .hfh-pflicht { color: var(--hfh-mark); margin-left: .15rem; }

.hfh-feld input[type="text"],
.hfh-feld input[type="email"],
.hfh-feld input[type="tel"],
.hfh-feld input[type="password"],
.hfh-feld select,
.hfh-feld textarea {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: var(--hfh-t-base);
    line-height: 1.5;
    color: var(--hfh-ink);
    background-color: var(--hfh-sheet);
    border: 1px solid var(--hfh-rule-2);
    border-radius: 2px;
    padding: .7rem .85rem;
    transition: border-color .18s, box-shadow .18s;
}
.hfh-feld textarea { min-height: 8rem; resize: vertical; }

.hfh-feld input:focus-visible,
.hfh-feld select:focus-visible,
.hfh-feld textarea:focus-visible {
    outline: none;
    border-color: var(--hfh-fokus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hfh-fokus) 28%, transparent);
}

.hfh-feld input::placeholder,
.hfh-feld textarea::placeholder { color: var(--hfh-ink-3); opacity: 1; }

/* Die Auswahlliste braucht ihren Pfeil selbst - es gibt keinen Rahmen mehr,
   der ihn mitbringt. Als data:-URI, damit keine zweite Anfrage entsteht.
   currentColor geht in einer data:-URI nicht, deshalb zwei Fassungen. */
.hfh-feld select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235f6d7a' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}
:root[data-bs-theme="dark"] .hfh-feld select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238c9dab' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
}

/* Kontrollkasten. Ohne Bootstrap muss er selbst dastehen - und er ist der
   Baustein, bei dem am haeufigsten die Beschriftung nicht mitklickt.
   Deshalb liegt das <input> IM <label>: dann trifft jeder Klick auf den
   Text auch das Feld, ganz ohne for/id-Paar. */
.hfh-kontroll {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .65rem;
    align-items: start;
    font-size: var(--hfh-t-sm);
    color: var(--hfh-ink-2);
    cursor: pointer;
}
.hfh-kontroll input[type="checkbox"] {
    appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: .15rem 0 0;
    border: 1px solid var(--hfh-rule-2);
    border-radius: 2px;
    background-color: var(--hfh-sheet);
    display: grid;
    place-content: center;
    cursor: pointer;
}
/* Das Haekchen als ::before mit clip-path - kein Hintergrundbild, das eine
   background-Kurzform spaeter wegraeumen koennte (die Falle aus CLAUDE.md). */
.hfh-kontroll input[type="checkbox"]::before {
    content: '';
    width: .7rem;
    height: .7rem;
    transform: scale(0);
    transition: transform .12s ease-out;
    background-color: var(--hfh-ink-invert);
    clip-path: polygon(14% 44%, 0 65%, 39% 100%, 100% 16%, 84% 0, 39% 66%);
}
.hfh-kontroll input[type="checkbox"]:checked {
    background-color: var(--hfh-ink);
    border-color: var(--hfh-ink);
}
.hfh-kontroll input[type="checkbox"]:checked::before { transform: scale(1); }
.hfh-kontroll input[type="checkbox"][aria-invalid="true"] { border-color: var(--hfh-err); border-width: 2px; }

/* Fehlerzustand: Linie und Meldung, kein Warnsymbol-Bild. Die Meldung
   erscheint erst, wenn das Feld sie hat - .hfh-feld-fehler ohne Text
   nimmt keinen Platz weg. */
.hfh-feld-fehler {
    display: block;
    margin-top: .35rem;
    font-size: var(--hfh-t-sm);
    color: var(--hfh-err);
}
.hfh-feld input[aria-invalid="true"],
.hfh-feld select[aria-invalid="true"],
.hfh-feld textarea[aria-invalid="true"] {
    border-color: var(--hfh-err);
    border-left-width: 3px;
}
.hfh-feld input[aria-invalid="true"]:focus-visible,
.hfh-feld select[aria-invalid="true"]:focus-visible,
.hfh-feld textarea[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hfh-err) 28%, transparent);
}


/*==============================================================================
  10 - MELDUNGEN
  Randstrich statt Kasten. Eine Meldung ist eine Randbemerkung, kein Aushang.
==============================================================================*/

.hfh-meldung {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .75rem;
    padding: var(--hfh-z-half) 1rem;
    border-left: 3px solid var(--hfh-rule-2);
    background-color: var(--hfh-sheet-alt);
    font-size: var(--hfh-t-sm);
    margin-bottom: var(--hfh-zeile);
}
.hfh-meldung-marke {
    font-family: var(--hfh-mono);
    font-size: var(--hfh-t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding-top: .12rem;
}
.hfh-meldung p { margin: 0; max-width: none; }

.hfh-meldung--ok   { border-left-color: var(--hfh-ok-line);   background-color: var(--hfh-ok-face); }
.hfh-meldung--ok   .hfh-meldung-marke { color: var(--hfh-ok); }
.hfh-meldung--warn { border-left-color: var(--hfh-warn-line); background-color: var(--hfh-warn-face); }
.hfh-meldung--warn .hfh-meldung-marke { color: var(--hfh-warn); }
.hfh-meldung--err  { border-left-color: var(--hfh-err-line);  background-color: var(--hfh-err-face); }
.hfh-meldung--err  .hfh-meldung-marke { color: var(--hfh-err); }


/*==============================================================================
  11 - HILFSKLASSEN
  Bewusst wenige. Utilities sind der Weg zurueck zu 437 Klassen im Markup.
==============================================================================*/

.hfh-linie      { border: 0; border-top: 1px solid var(--hfh-rule); margin: var(--hfh-zeile) 0; }
.hfh-linie--ink { border-top: 2px solid var(--hfh-rule-ink); }

.hfh-blatt-flaeche {
    background: var(--hfh-sheet);
    border: 1px solid var(--hfh-rule);
    padding: clamp(1.25rem, 3vw, 2rem);
}

.hfh-nur-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hfh-sprungmarke {
    position: absolute; left: .75rem; top: -4rem; z-index: 1100;
    background: var(--hfh-ink); color: var(--hfh-ink-invert);
    padding: .6rem 1rem; border-radius: 2px; text-decoration: none;
    transition: top .18s;
}
.hfh-sprungmarke:focus { top: .75rem; }

.hfh-stapel > * + * { margin-top: var(--hfh-zeile); }


/*==============================================================================
  12 - KOPFLEISTE
  Keine dunkle Balkenleiste ueber der Seite, sondern der Briefkopf des
  Dokuments: dieselbe Papierfarbe, eine Linie darunter, und die aktive Seite
  traegt den roten Randstrich.

  position: sticky statt fixed. Damit faellt die ganze Fehlerklasse aus
  CLAUDE.md weg - ein transformierter Vorfahr macht "fixed" zum Bezugsrahmen
  und die Leiste richtet sich am falschen Rahmen aus. Und sticky braucht
  hier nichts, was es kaputtmachen koennte: kein overflow, kein
  container-type, kein gestrecktes Flex-Kind auf dem Weg zum <body>.
==============================================================================*/

.hfh-kopf {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--hfh-paper);
    border-bottom: 1px solid var(--hfh-rule);
}
/* Der Kopf ist BREITER als der Satzspiegel - und das ist Absicht.
   --hfh-blatt (74rem) ist ein LESEMASS: 66 Zeichen je Zeile. Eine
   Bedienleiste liest niemand, sie wird ueberflogen; sie an das Lesemass zu
   binden war eine unbedachte Uebernahme.

   Nachgerechnet am 12.08.2026, nachdem der fuenfte Menuepunkt dazukam:
   angemeldet braucht die Leiste 1127 px, das 74rem-Mass gibt nach Abzug des
   Polsters nur 1088 her. Sie waere auf JEDER Breite uebergelaufen - das
   kann kein Umbruchpunkt heilen, weil der Behaelter selbst deckelt. */
.hfh-kopf-innen {
    max-width: 84rem;
    margin-inline: auto;
    padding: .7rem var(--hfh-luft);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hfh-marke { display: inline-flex; align-items: center; text-decoration: none; }

/* --- Das Logo faerbt sich mit ------------------------------------------
   Die Wortmarke war fest weiss gezeichnet, gedacht fuer die alte dunkle
   Leiste. Auf diesem Papier stand "SVEN" damit bei 1,04:1 - unsichtbar,
   nicht bloss schwach. Seit dem 12.08.2026 laufen Wortmarke, Unterzeile
   und Schildkontur ueber currentColor; hier wird also nur `color` gesetzt.

   Der Nachname traegt im Original einen roten Verlauf. Der funktioniert auf
   Weiss (3,95 bis 10,95:1), faellt im dunklen Erscheinungsbild an seinem
   dunklen Ende aber auf 1,51:1. Deshalb steht er hier auf --hfh-mark. Die
   Regel greift nur, wo dieses Stylesheet geladen ist - die noch nicht
   umgebauten Seiten behalten den Verlauf unveraendert. */
.hfh-logo {
    height: 40px;
    width: auto;
    display: block;
    color: var(--hfh-ink);
}
.hfh-logo .logo-nachname,
.hfh-logo .logo-punkt   { fill: var(--hfh-mark); }
.hfh-logo .logo-unterzeile { fill: var(--hfh-ink-3); opacity: 1; }
.hfh-logo .logo-kontur  { stroke: currentColor; stroke-opacity: .55; }

/* Das Menue sammelt sich rechts. Der Umbruchpunkt ist nachgerechnet, nicht
   uebernommen: vier Punkte plus zwei Umschalter plus Notrufknopf passen in
   der deutschen Fassung erst ab 78rem nebeneinander.

   NACHGERECHNET am 12.08.2026, nicht uebernommen: Logo 250 px, vier
   Menuepunkte 374 px, Notruf-Knopf 160 px, Sprachumschalter 41 px, zwei
   Symbolknoepfe 88 px, Trennung und Luecken 63 px - zusammen 993 px
   Inhalt. Beim bisherigen Umbruch von 62rem (992 px Fenster) stehen nach
   Abzug des Aussenpolsters nur 913 px zur Verfuegung: es fehlten 80 px,
   und die Leiste lief genau am Umschaltpunkt ueber. Sie passt ab etwa
   1100 px.

   NACHGEFUEHRT am selben Tag, als der fuenfte Menuepunkt ("Fragen") dazukam:
   der Bedarf stieg auf 1068 px (mit gekuerzter Knopfbeschriftung). Bei
   75rem blieben davon nur 36 px Reserve - zu wenig fuer einen Ueberschlag
   aus mittleren Zeichenbreiten. 78rem gibt 84 px.

   ACHTUNG, dieser Wert steht an DREI Stellen und muss zusammen wandern:
   hier, bei der Notrufleiste (Abschnitt 14) und in assets/js/hfh.js
   (matchMedia). Die 900px-Abfragen im Aktenlayout gehoeren NICHT dazu. */
.hfh-menue {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin-block: 0;
    padding: 0;
}
.hfh-menue a,
.hfh-menue button {
    display: inline-block;
    font-family: var(--hfh-sans);
    font-size: var(--hfh-t-xs);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hfh-ink-2);
    text-decoration: none;
    padding: .55rem .7rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: color .18s, border-color .18s;
}
.hfh-menue a:hover,
.hfh-menue button:hover { color: var(--hfh-ink); border-bottom-color: var(--hfh-rule-2); }

/* Die aktive Seite: der rote Randstrich. Das ist die Markierung des
   Sachverstaendigen, an genau der Stelle, an der sie hingehoert. */
.hfh-menue a[aria-current="page"] {
    color: var(--hfh-ink);
    border-bottom-color: var(--hfh-mark);
}

.hfh-menue .hfh-knopf { padding: .6rem 1rem; border-bottom-width: 1px; }

/* Wo die Inhalte enden und die Bedienelemente beginnen. Eine Haarlinie und
   etwas Luft genuegen - ohne die Trennung liest sich der Sprachumschalter
   wie ein weiterer Menuepunkt. */
.hfh-menue .hfh-menue-block {
    margin-left: .6rem;
    padding-left: .9rem;
    border-left: 1px solid var(--hfh-rule);
}

/* Symbolknoepfe (Erscheinungsbild, Anmeldung). Sie tragen keine sichtbare
   Beschriftung, brauchen aber dieselbe Trefferflaeche wie ein Menuepunkt -
   44 px ist die Untergrenze, unter der ein Finger daneben trifft. */
.hfh-menue .hfh-menue-symbol {
    position: relative;          /* traegt den Zaehler */
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.05rem;
    color: var(--hfh-ink-2);
}
.hfh-menue .hfh-menue-symbol:hover { color: var(--hfh-mark); border-bottom-color: transparent; }

/* Das Abmelden ist ein Formular, kein Link - es MUSS eines sein, sonst
   liesse es sich von einer fremden Seite ausloesen. Damit es die Ausrichtung
   der Leiste nicht sprengt, verschwindet der Formularrahmen aus dem Fluss. */
.hfh-menue .hfh-menue-form { margin: 0; display: flex; }

/* Der Zaehler sitzt als Marke am Symbol, nicht daneben: neben einem Symbol
   ohne Beschriftung waere nicht erkennbar, wozu die Zahl gehoert. */
.hfh-menue .hfh-menue-symbol .hfh-zaehler {
    position: absolute;
    top: .25rem;
    right: .1rem;
    margin: 0;
    min-width: 1.15rem;
    text-align: center;
    line-height: 1.3;
}

/* Welches der beiden Erscheinungsbild-Symbole sichtbar ist, entscheidet
   allein CSS. Waere es JavaScript, blitzte beim Laden kurz das falsche auf. */
:root:not([data-bs-theme="dark"]) .hfh-symbol--wenn-dunkel { display: none; }
:root[data-bs-theme="dark"]       .hfh-symbol--wenn-hell   { display: none; }

/* Der eigene Hamburger. Zehn Zeilen CSS und zehn Zeilen JavaScript statt
   79 KB Bootstrap-Bundle, das im ganzen Projekt genau diesen einen Knopf
   bedient hat. */
.hfh-hamburger {
    margin-left: auto;
    width: 2.75rem;
    height: 2.75rem;
    display: none;
    place-items: center;
    border: 1px solid var(--hfh-rule-2);
    border-radius: 2px;
    background: transparent;
    color: var(--hfh-ink);
    cursor: pointer;
}
.hfh-hamburger span,
.hfh-hamburger span::before,
.hfh-hamburger span::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    background-color: currentColor;
    transition: transform .2s, opacity .2s;
}
.hfh-hamburger span { position: relative; }
.hfh-hamburger span::before,
.hfh-hamburger span::after { content: ''; position: absolute; left: 0; }
.hfh-hamburger span::before { top: -6px; }
.hfh-hamburger span::after  { top:  6px; }
.hfh-hamburger[aria-expanded="true"] span { background-color: transparent; }
.hfh-hamburger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hfh-hamburger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 78rem) {
    .hfh-hamburger { display: grid; }
    .hfh-menue {
        display: none;
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--hfh-paper);
        border-bottom: 1px solid var(--hfh-rule);
        padding: .5rem var(--hfh-luft) 1.25rem;
    }
    .hfh-menue[data-offen="ja"] { display: flex; }
    .hfh-menue li { border-top: 1px solid var(--hfh-rule); }
    .hfh-menue a,
    .hfh-menue button { display: block; width: 100%; text-align: left; padding: .9rem .2rem; border-bottom: 0; }
    .hfh-menue a[aria-current="page"] {
        border-bottom: 0;
        box-shadow: inset 3px 0 0 var(--hfh-mark);
        padding-left: .85rem;
    }
    .hfh-menue .hfh-knopf { margin-top: .85rem; text-align: center; justify-content: center; }
    /* Im aufgeklappten Menue stehen die Punkte untereinander - eine linke
       Trennlinie waere dort sinnlos und der Einzug schief. */
    .hfh-menue .hfh-menue-block {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
    /* Die Symbolknoepfe bekommen ihre Beschriftung zurueck: ein einzelnes
       Symbol in einer gestapelten Liste ist nicht zu deuten. */
    .hfh-menue .hfh-menue-symbol {
        width: 100%;
        height: auto;
        justify-items: start;
        padding: .9rem .2rem;
    }
    .hfh-menue .hfh-menue-symbol .hfh-nur-sr {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        clip-path: none;
        white-space: normal;
    }
    .hfh-menue .hfh-menue-symbol {
        grid-auto-flow: column;
        justify-content: start;
        gap: .6rem;
    }
    /* Mit sichtbarer Beschriftung gehoert der Zaehler dahinter, nicht in die
       Ecke - dort saesse er ueber dem Text. */
    .hfh-menue .hfh-menue-symbol .hfh-zaehler {
        position: static;
        margin-left: .1rem;
    }
    .hfh-menue .hfh-menue-form { display: block; }
}


/*==============================================================================
  13 - SEITENFUSS
  Die Fusszeile des Dokuments, nicht ein zweiter dunkler Block: dieselbe
  Papierfarbe, eine kraeftige Linie darueber, Kleingedrucktes darunter.

  Nebenbei loest das den Befund aus Schritt 1: der alte Fuss war in BEIDEN
  Erscheinungsbildern dunkel und brauchte deshalb feste Sonderfarben.
==============================================================================*/

.hfh-fuss {
    border-top: 2px solid var(--hfh-rule-ink);
    margin-top: clamp(3rem, 8vw, 6rem);
    padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem;
    font-size: var(--hfh-t-sm);
    color: var(--hfh-ink-2);
}
.hfh-fuss-zonen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--hfh-zeile) clamp(1.5rem, 4vw, 3rem);
}
.hfh-fuss h2 {
    font-family: var(--hfh-sans);
    font-size: var(--hfh-t-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hfh-ink-3);
    margin-bottom: .6rem;
}
.hfh-fuss ul { list-style: none; margin: 0; padding: 0; }
.hfh-fuss li { padding-block: .2rem; }
.hfh-fuss .hfh-logo { height: 34px; }

.hfh-fuss-schluss {
    margin-top: var(--hfh-zeile);
    padding-top: var(--hfh-z-half);
    border-top: 1px solid var(--hfh-rule);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    font-size: var(--hfh-t-xs);
    color: var(--hfh-ink-3);
}


/*==============================================================================
  14 - NOTRUFLEISTE
  Unter 78rem verschwindet der Notrufknopf aus der Kopfleiste - dort ist kein
  Platz. Damit der Notfallweg auf dem Telefon nicht der laengste ist, legt
  sich eine Leiste an den unteren Rand.

  position: fixed ist hier richtig und noetig. Die Leiste haengt deshalb
  direkt am <body> und nicht in einem Abschnitt: ein transformierter Vorfahr
  wuerde sie am falschen Rahmen ausrichten, und "animation-fill-mode: both"
  macht einen solchen Vorfahren dauerhaft daraus - in Firefox, nicht in
  Chromium. Genau dieser Fall hat bei sbint einen Dialog unbedienbar gemacht.
==============================================================================*/

.hfh-notrufleiste {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: .6rem;
    background: var(--hfh-paper);
    border-top: 1px solid var(--hfh-rule);
}
.hfh-notrufleiste .hfh-knopf { width: 100%; }

@media (max-width: 78rem) {
    .hfh-notrufleiste { display: block; }
    /* Platz schaffen, damit die Leiste nichts verdeckt - besonders nicht die
       letzte Zeile des Impressums. */
    body { padding-bottom: 4.5rem; }
}


/*==============================================================================
  15 - INLINE-SYMBOLE
  Ersetzen die Symbolschrift (211 KB fuer eine Handvoll Zeichen). Sie erben
  Farbe und Groesse vom Text, damit ein Symbol neben einer Beschriftung
  automatisch mitwaechst - eine feste Pixelgroesse laeuft bei jeder
  Schriftgroessenaenderung aus dem Ruder.
==============================================================================*/

.hfh-symbol {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex: none;
}


/*==============================================================================
  16 - BILDPLAETZE
  Ein Platzhalter, der wie Absicht aussieht: Papierflaeche, Haarlinie,
  Motivbeschriftung in Versalien. Er nimmt EXAKT den Platz ein, den das Foto
  spaeter braucht (aspect-ratio am Element), damit beim Nachliefern nichts
  wandert und niemand das Layout ein zweites Mal beurteilen muss.
==============================================================================*/

.hfh-bild {
    display: block;
    width: 100%;
}
.hfh-bild img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--hfh-rule);
}

.hfh-bild--leer {
    display: grid;
    place-items: center;
    background-color: var(--hfh-sheet-alt);
    border: 1px solid var(--hfh-rule);
    /* Der schraege Raster macht sichtbar, dass hier etwas FEHLT - eine
       einfarbige Flaeche liest sich wie eine gestalterische Entscheidung. */
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 11px,
        color-mix(in srgb, var(--hfh-rule) 55%, transparent) 11px 12px
    );
    padding: 1rem;
}
.hfh-bild-marke {
    font-family: var(--hfh-mono);
    font-size: var(--hfh-t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hfh-ink-3);
    text-align: center;
    background-color: var(--hfh-sheet-alt);
    padding: .35rem .6rem;
    max-width: 90%;
}

/* Beispielsymbol statt Foto. Anders als .hfh-bild--leer traegt es KEINEN
   schraegen Raster: es signalisiert nicht "hier fehlt etwas", sondern zeigt
   ein bewusstes Sinnbild in der Bildflaeche. Gleiche Papierflaeche und
   Haarlinie wie ein echtes Bild, damit es sich einfuegt. */
.hfh-bild--symbol {
    display: grid;
    place-items: center;
    gap: .9rem;
    background-color: var(--hfh-sheet-alt);
    border: 1px solid var(--hfh-rule);
    padding: 1.5rem;
}
.hfh-bild-symbol {
    width: 42%;
    height: auto;
    color: var(--hfh-ink-3);
}


/*==============================================================================
  17 - DER HELD MIT FOTO

  Ein Foto hinter Schrift ist der klassische Ort, an dem Kontrast unmessbar
  wird: was das Bild an dieser Stelle zeigt, weiss man nicht. Deshalb wird
  hier nicht geschaetzt, sondern der SCHLIMMSTE FALL gerechnet - das Foto
  sei an der Textstelle reines Weiss.

  Bei 82 % Tinte darueber bleibt davon #404b54 uebrig. Weisse Schrift steht
  darauf bei 8,93:1, die gedaempfte Fassung #d7dee4 bei 6,57:1. Beides mit
  Reserve ueber den 4,5:1 von AA - und zwar unabhaengig davon, welches Bild
  spaeter dort liegt.

  Die Textfarben sind hier bewusst FEST und nicht an light-dark() gebunden:
  das Band ist in beiden Erscheinungsbildern dunkel, weil das Foto dunkel
  ist. Ein mitwanderndes Token haette im hellen Modus dunkle Schrift auf
  dunklem Foto ergeben.
==============================================================================*/

.hfh-held {
    position: relative;
    isolation: isolate;            /* haelt den Schleier unter dem Inhalt */
    background-color: #16232e;     /* Rueckfall, falls das Bild fehlt     */
    background-image: image-set(
        url('/assets/img/hero-bg.webp') type('image/webp'),
        url('/assets/img/hero-bg-1280.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: center 38%;
    padding-block: clamp(3rem, 9vw, 7rem);
}

.hfh-held::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Zum linken Rand hin dichter: dort steht die Schrift. Der schwaechste
       Wert der Verlaufskette ist 0.82 - die gemessene Untergrenze. */
    background: linear-gradient(
        100deg,
        rgba(22, 35, 46, .94) 0%,
        rgba(22, 35, 46, .88) 45%,
        rgba(22, 35, 46, .82) 100%
    );
}

/* Rot als Markierung bleibt Rot - aber deutlich heller. #a10404 stuende
   auf dem Band bei 1,3:1, und selbst das sonst benutzte #ff8f85 nur bei
   4,05:1. Das Rubrum ist kleine Versalschrift und braucht die vollen 4,5;
   #ffa299 liefert 4,63. Gefunden hat das der Kontrastpruefer - im Bild
   sahen beide Fassungen gleich aus. */
.hfh-held .hfh-rubrum        { color: #ffa299; }
.hfh-held h1                 { color: #ffffff; }
.hfh-held .hfh-vorspann      { color: #d7dee4; }
.hfh-held .hfh-marginalie,
.hfh-held .hfh-marginalie dt { color: #aebac4; }
.hfh-held .hfh-marginalie dd { color: #d7dee4; }

@media (max-width: 900px) {
    .hfh-held .hfh-marginalie { border-left-color: rgba(255, 255, 255, .35); }
}

/* Die Knoepfe im Band tragen eigene Farben: der Umriss-Knopf braucht eine
   helle Kante, sonst ist er auf dem Foto nicht zu sehen. */
.hfh-held .hfh-knopf {
    border-color: rgba(255, 255, 255, .7);
    color: #ffffff;
}
.hfh-held .hfh-knopf:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #16232e;
}
.hfh-held .hfh-knopf--still {
    border-color: rgba(255, 255, 255, .35);
    color: #d7dee4;
}
.hfh-held .hfh-knopf--still:hover {
    background-color: transparent;
    border-color: #ffffff;
    color: #ffffff;
}
/* Der Notruf bleibt gefuellt, #d92b2b statt #a10404 - weisse Schrift steht
   darauf bei 4,85:1.

   Die KANTE ist dabei der Haken, und sie faellt beim Hinsehen nicht auf:
   #d92b2b gegen das Band #404b54 sind nur 1,84:1, WCAG 1.4.11 verlangt
   fuer die Grenze eines Bedienelements aber 3:1. Auf einem Foto verschwimmt
   ein dunkelroter Knopf damit schlicht im Hintergrund. Deshalb eine helle
   Kante: #ffffff gegen das Band sind 8,93:1. Gefunden hat das der
   Kontrastpruefer, nicht das Auge. */
.hfh-held .hfh-knopf--notruf {
    background-color: #d92b2b;
    border-color: #ffffff;
    color: #ffffff;
}
.hfh-held .hfh-knopf--notruf:hover {
    background-color: #b81f1f;
    border-color: #ffffff;
}


/*==============================================================================
  18 - LISTENWERKZEUGE
  Filter, Suche, Sortierkoepfe, Blaettern und Zustandsmarken. Nur im
  Verwaltungsbereich in Gebrauch, aber in derselben Sprache: Linien und
  Kennziffern statt Kacheln und Pillen.
==============================================================================*/

.hfh-werkzeugleiste {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--hfh-rule);
}
.hfh-werkzeugleiste nav { display: flex; flex-wrap: wrap; gap: .25rem; }

.hfh-filter {
    font-size: var(--hfh-t-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--hfh-ink-3);
    padding: .4rem .6rem;
    border-bottom: 2px solid transparent;
}
.hfh-filter:hover { color: var(--hfh-ink); }
.hfh-filter--aktiv { color: var(--hfh-ink); border-bottom-color: var(--hfh-mark); }

.hfh-suche { display: flex; gap: .5rem; align-items: center; }
.hfh-suche input[type="search"] {
    font-family: inherit;
    font-size: var(--hfh-t-sm);
    color: var(--hfh-ink);
    background-color: var(--hfh-sheet);
    border: 1px solid var(--hfh-rule-2);
    border-radius: 2px;
    padding: .55rem .7rem;
    min-width: 15rem;
}
.hfh-suche .hfh-knopf { padding: .6rem .9rem; }

/* Sortierkopf. Der Pfeil steht im Text, nicht als Grafik - er muss auch
   dann da sein, wenn jemand die Seite ausdruckt oder vorlesen laesst. */
.hfh-tabelle th.th-sort { padding: 0; }
.hfh-tabelle th.th-sort a {
    display: block;
    padding: .5rem .75rem .5rem 0;
    color: inherit;
    text-decoration: none;
}
.hfh-tabelle th.th-sort a:hover { color: var(--hfh-mark); }

/* Erledigte Zeilen bleiben lesbar, treten aber zurueck. Nicht ueber
   opacity: das zoege auch den Fokusring mit ins Blasse. */
.hfh-tabelle tr.row-inaktiv td { color: var(--hfh-ink-3); }
.hfh-tabelle tr.row-inaktiv strong { font-weight: 400; }

.hfh-zustand {
    display: inline-block;
    font-family: var(--hfh-mono);
    font-size: var(--hfh-t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border-left: 3px solid var(--hfh-rule-2);
    background-color: var(--hfh-sheet-alt);
}
.hfh-zustand--neu      { border-left-color: var(--hfh-mark);      color: var(--hfh-mark); }
.hfh-zustand--gelesen  { border-left-color: var(--hfh-warn-line); color: var(--hfh-warn); }
.hfh-zustand--erledigt { border-left-color: var(--hfh-ok-line);   color: var(--hfh-ok); }

.hfh-tatform { margin: 0; }
.hfh-tabelle .hfh-knopf { padding: .45rem .7rem; font-size: var(--hfh-t-xs); display: block; }

.hfh-blaettern {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--hfh-zeile);
    padding-top: var(--hfh-z-half);
    border-top: 1px solid var(--hfh-rule);
    font-size: var(--hfh-t-sm);
}
.hfh-blaettern-seiten,
.hfh-blaettern-groesse { display: flex; gap: .75rem; align-items: center; }
.hfh-blaettern [aria-disabled="true"] { color: var(--hfh-ink-3); }
.hfh-blaettern [aria-current="true"] { color: var(--hfh-mark); font-weight: 600; }


/* Zaehler-Abzeichen. Rot, weil er eine Markierung ist - und Markierung ist in
   dieser Sprache die Aufgabe von Rot. Als Text und nicht als Punkt, damit die
   Zahl auch vorgelesen wird. Unscoped, damit ihn auch die Admin-Leiste nutzen
   kann; die Symbol-Nav der Kopfleiste überschreibt die Position weiter oben. */
.hfh-zaehler {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .35rem;
    font-family: var(--hfh-mono);
    font-size: .68rem;
    line-height: 1.5;
    color: #fff;
    background-color: var(--hfh-mark-face);
    border-radius: 2px;
    vertical-align: 1px;
}


/*==============================================================================
  19 - DRUCKBILD

  Die ganze Gestaltungssprache heisst "Gutachten" - und bis zum 12.08.2026
  kam @media print im Stylesheet NULLmal vor. Gedruckt werden erfahrungs-
  gemaess die Konditionen und das Impressum, also genau die Aufstellungen.

  Vier Dinge, die man am Bildschirm nie bemerkt:
    * Die Kopfleiste klebt (sticky) und landet sonst auf JEDER Seite.
    * Die Notrufleiste liegt fest am unteren Rand und deckt Text zu.
    * Ein Link ist auf Papier eine Sackgasse - das Ziel muss danebenstehen.
    * Eine Tabelle, die ueber den Seitenwechsel laeuft, verliert ihren Kopf.
==============================================================================*/

@media print {

    /* Papier ist weiss, Tinte schwarz. Farbverbrauch fuer Flaechen, die
       ohnehin nur Struktur zeigen, waere reine Verschwendung. */
    :root {
        color-scheme: light;
        --hfh-paper: #ffffff;
        --hfh-sheet: #ffffff;
        --hfh-sheet-alt: #ffffff;
        --hfh-ink: #000000;
        --hfh-ink-2: #222222;
        --hfh-ink-3: #444444;
        --hfh-rule: #bbbbbb;
        --hfh-rule-2: #888888;
        --hfh-rule-ink: #000000;
        --hfh-mark: #000000;
        --hfh-mark-face: #000000;
    }

    body { padding-bottom: 0; font-size: 10.5pt; }

    /* Alles, was nur am Bildschirm eine Aufgabe hat. */
    .hfh-kopf,
    .hfh-hamburger,
    .hfh-menue,
    .hfh-notrufleiste,
    .hfh-sprungmarke,
    .hfh-werkzeugleiste,
    .hfh-blaettern,
    .hfh-admin-leiste,
    .hfh-bild--leer,
    .hfh-bild--symbol { display: none !important; }

    /* Der Briefkopf traegt auf Papier kein Foto - er wuerde die Patrone
       leeren und die Schrift schlechter lesbar machen. */
    .hfh-held { background-image: none !important; padding-block: 0; }
    .hfh-held::before { display: none; }
    .hfh-held .hfh-rubrum,
    .hfh-held h1,
    .hfh-held .hfh-vorspann,
    .hfh-held .hfh-marginalie,
    .hfh-held .hfh-marginalie dt,
    .hfh-held .hfh-marginalie dd { color: #000; }
    .hfh-held .hfh-knopf { display: none; }

    /* Statt der Kopfleiste ein Druckkopf mit den Kontaktdaten: wer ein Blatt
       in der Hand haelt, hat sonst keinen Weg zurueck zum Absender. */
    main::before {
        content: "Hochfranken Havarie · Sven Meiler · Thiemitz 8 · 95131 Schwarzenbach am Wald · www.hochfrankenhavarie.de";
        display: block;
        font-family: var(--hfh-mono);
        font-size: 7.5pt;
        letter-spacing: .04em;
        padding-bottom: .4rem;
        margin-bottom: 1rem;
        border-bottom: 1pt solid #000;
    }

    /* Linkziele ausschreiben - aber nur die echten. Anker und
       Verschleierungslinks wuerden nur Klammern voller "#" erzeugen. */
    a[href^="http"]::after,
    a[href^="/"]::after {
        content: " (" attr(href) ")";
        font-family: var(--hfh-mono);
        font-size: 8pt;
        word-break: break-all;
    }
    a[href^="#"]::after,
    a[data-cloak]::after { content: ""; }

    /* Aufstellungen zusammenhalten und den Kopf auf jeder Seite wiederholen. */
    .hfh-tabelle { page-break-inside: auto; }
    .hfh-tabelle thead { display: table-header-group; }
    .hfh-tabelle tr { page-break-inside: avoid; }

    /* Eine Ueberschrift am Seitenende ohne ihren Text darunter ist der
       haeufigste Druckfehler ueberhaupt. */
    h1, h2, h3, h4 { page-break-after: avoid; }
    .hfh-rubrik, .hfh-meldung, figure { page-break-inside: avoid; }

    .hfh-abschnitt { padding-block: .5rem; border-top: 0; }
    .hfh-abschnitt + .hfh-abschnitt { border-top: 1pt solid #bbb; }

    /* Die Randspalte neben dem Satzspiegel ist auf Papier zu schmal - sie
       laeuft besser als Vorspann darueber. */
    .hfh-akte { display: block; }
    .hfh-marginalie { text-align: left; border-left: 2pt solid #000; padding-left: .6rem; margin-bottom: 1rem; }

    .hfh-fuss { margin-top: 1rem; padding-block: .5rem; }
    .hfh-fuss nav, .hfh-fuss .hfh-logo { display: none; }
}


/*==============================================================================
  20 - LESEFORTSCHRITT

  Eine schmale rote Marke am oberen Rand, die zeigt, wie weit man ist. In
  dieser Sprache ist das der Randstrich des Bearbeiters - kein Fortschritts-
  balken, sondern eine Markierung.

  OHNE JAVASCRIPT: animation-timeline: scroll() bindet die Animation an die
  Scrollstrecke des Dokuments. Wo das nicht unterstuetzt wird, laeuft die
  Animation gar nicht - dann steht die Marke auf ihrem Anfangswert, also auf
  Breite 0 und damit unsichtbar. Genau richtig: ein Zierrat, der ausfaellt,
  darf nichts hinterlassen.

  Die Regel steht bewusst hinter @supports. Ohne die Abfrage bekaeme jeder
  aeltere Browser eine dauerhaft sichtbare rote Linie ueber der Seite.
==============================================================================*/

@supports (animation-timeline: scroll()) {
    .hfh-fortschritt {
        position: fixed;
        top: 0;
        left: 0;
        height: 2px;
        width: 100%;
        transform-origin: 0 50%;
        scale: 0 1;
        background-color: var(--hfh-mark);
        z-index: 200;
        animation: hfh-lesen linear both;
        animation-timeline: scroll();
    }
    @keyframes hfh-lesen {
        from { scale: 0 1; }
        to   { scale: 1 1; }
    }
}

/* Wer Bewegung reduziert haben moechte, bekommt keine mitlaufende Marke.
   Sie traegt keine Information, die nicht auch die Bildlaufleiste zeigt. */
@media (prefers-reduced-motion: reduce) {
    .hfh-fortschritt { display: none; }
}

@media print {
    .hfh-fortschritt { display: none; }
}


/*==============================================================================
  21 - ANTWORTEN IM POSTEINGANG
  Kein neues Bauteil: die Felder sind .hfh-feld, der Knopf .hfh-knopf. Hier
  steht nur, wie der aufklappbare Bereich aussieht.
==============================================================================*/

.hfh-antwortform,
.hfh-antwort {
    margin-top: .75rem;
    border-left: 3px solid var(--hfh-rule);
    padding-left: .85rem;
}
.hfh-antwortform > summary,
.hfh-antwort > summary {
    cursor: pointer;
    font-family: var(--hfh-mono);
    font-size: var(--hfh-t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hfh-ink-3);
}
.hfh-antwortform > summary:hover,
.hfh-antwort > summary:hover { color: var(--hfh-mark); }

/* Eine bereits verschickte Antwort ist ein Vorgang, kein Entwurf - sie
   traegt deshalb den roten Randstrich, wie jede Markierung in dieser
   Sprache. */
.hfh-antwort { border-left-color: var(--hfh-mark); }

/* Im aufgeklappten Antwortformular soll der Text Platz haben. Die Tabelle
   ist eng, das Textfeld darf trotzdem lesbar breit werden. */
.hfh-antwortform textarea { min-width: min(100%, 34rem); font-family: var(--hfh-mono); font-size: var(--hfh-t-sm); }
.hfh-antwortform .hfh-feld { margin-bottom: .85rem; }
.hfh-antwortform .hfh-knopf { display: inline-flex; }

/* Auf Papier hat ein Eingabeformular nichts zu suchen - eine bereits
   verschickte Antwort dagegen schon. */
@media print {
    .hfh-antwortform { display: none; }
    .hfh-antwort { border-left-color: #000; }
    .hfh-antwort > summary { list-style: none; }
}


/*==============================================================================
  22 - HAEUFIGE FRAGEN
  <details>/<summary> statt nachgebautem Aufklapper: der Browser bringt es
  selbst mit, es ist ohne JavaScript bedienbar, die Tastatur kommt hinein,
  und die Seitensuche findet den Text auch in geschlossenen Abschnitten.
==============================================================================*/

.hfh-frage {
    border-top: 1px solid var(--hfh-rule);
    padding-block: .35rem;
}
.hfh-frage:last-child { border-bottom: 1px solid var(--hfh-rule); }

.hfh-frage > summary {
    cursor: pointer;
    list-style: none;             /* eigener Marker, siehe ::before */
    padding: .85rem 0 .85rem 2rem;
    position: relative;
    font-family: var(--hfh-serif);
    font-size: var(--hfh-h4);
    font-weight: 600;
    color: var(--hfh-ink);
}
.hfh-frage > summary::-webkit-details-marker { display: none; }

/* Der Marker ist ein Pluszeichen aus zwei Linien - kein Dreieck und kein
   Bild. Beim Aufklappen dreht sich der senkrechte Strich weg, uebrig
   bleibt ein Minus. */
.hfh-frage > summary::before,
.hfh-frage > summary::after {
    content: '';
    position: absolute;
    left: 0;
    top: 1.55rem;
    width: .85rem;
    height: 2px;
    background-color: var(--hfh-mark);
    transition: transform .18s;
}
.hfh-frage > summary::after { rotate: 90deg; }
.hfh-frage[open] > summary::after { rotate: 0deg; }

.hfh-frage > summary:hover { color: var(--hfh-mark); }
.hfh-frage > p {
    padding: 0 0 1.1rem 2rem;
    color: var(--hfh-ink-2);
    max-width: 66ch;
}

/* Auf Papier gibt es kein Aufklappen - dort steht alles offen. */
@media print {
    .hfh-frage > summary::before,
    .hfh-frage > summary::after { display: none; }
    .hfh-frage > summary { padding-left: 0; }
    .hfh-frage > p { padding-left: 0; display: block !important; }
}