/* Supplemental styles for the staff onboarding / training reference. */

.portal-info-page {
    --a-muted: #6f624c;
    color: var(--a-ink);
}

.portal-info-page [id] {
    scroll-margin-top: 6.5rem;
}

.portal-info-page .portal-info-caption,
.portal-info-page .portal-info-help-actions span {
    color: var(--a-ink-2);
}

.portal-info-anchor-nav {
    position: sticky;
    top: 4.8rem;
    z-index: 30;
    display: flex;
    gap: 0.45rem;
    margin: 0 0 1.35rem;
    padding: 0.65rem;
    overflow-x: auto;
    border: 1px solid var(--a-rule-soft);
    border-radius: 999px;
    background: rgba(251, 248, 242, 0.96);
    box-shadow: 0 8px 24px rgba(43, 36, 25, 0.06);
    backdrop-filter: blur(16px);
    scrollbar-width: thin;
}

.portal-info-anchor-nav a {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    color: var(--a-ink-2);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.portal-info-anchor-nav a:hover,
.portal-info-anchor-nav a:focus-visible {
    background: var(--a-ink);
    color: var(--a-paper);
    outline: none;
}

/* Drei Ziele in einer Zeile. Die Klassen kamen mit der Schulungsseite, die
   Regeln dazu nicht: Ohne sie standen die drei Beschriftungen ohne Abstand
   aneinander, und der Knopf fuer das Supportformular trug den Kasten, den der
   Browser ihm von selbst gibt. */
.portal-info-quicklinks .eyebrow {
    margin-bottom: 0.7rem;
}

.portal-info-quicklink-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Zwei Verweise und ein Knopf sehen gleich aus: Wohin es geht, ist die
   Auskunft - nicht, ob das Ziel eine Seite oder ein Dialog ist. Deshalb setzt
   diese Regel auch die Schrift, die der Browser dem Knopf sonst selbst gibt. */
.portal-info-quicklink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--a-rule);
    border-radius: 999px;
    background: var(--a-card);
    color: var(--a-ink-2);
    cursor: pointer;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
}

.portal-info-quicklink:hover {
    border-color: var(--a-ink);
    background: var(--a-ink);
    color: var(--a-paper);
}

.portal-info-quicklink:focus-visible {
    outline: 2px solid var(--a-gold);
    outline-offset: 2px;
}

/* Der Pfeil sagt "fuehrt hier hinaus" und ist keine Beschriftung. */
.portal-info-quicklink > span {
    font-size: 0.78em;
    opacity: 0.7;
}

.portal-info-privacy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.portal-info-privacy-grid article {
    min-width: 0;
    padding: 1.05rem 1.1rem;
    border: 1px solid var(--a-rule-soft);
    border-radius: var(--a-radius-sm);
    background: rgba(255, 251, 242, 0.78);
}

.portal-info-privacy-grid h3,
.portal-info-correction h3,

.portal-info-privacy-grid p,
.portal-info-correction p,

.portal-info-correction > h3 {
    margin-top: 1.3rem;
}

.portal-info-correction > .portal-info-list + h3 {
    margin-top: 1.4rem;
}

/* Auch diese Klasse kam ohne Regel: Ohne sie war der Kicker von der
   Ueberschrift darunter nicht zu unterscheiden.
   Als Marke und nicht als zweite Beschriftung: `.detail-card h3` setzt die
   Ueberschrift hier schon als kleines Grossbuchstaben-Label mit Linie
   darunter. Ein eyebrow davor waere dasselbe zweimal gestapelt. */
.portal-info-package-kicker {
    display: inline-block;
    margin-bottom: 0.55rem;
    padding: 0.18rem 0.6rem;
    border: 1px solid var(--a-gold);
    border-radius: 999px;
    color: var(--a-gold-deep);
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

/* Marke und Ueberschrift gehoeren zusammen. Die 1,3rem aus der Regel darueber
   sind der Abstand zum vorigen Absatz, nicht der zur eigenen Marke. */
.portal-info-package-kicker + h3 {
    margin-top: 0;
}

.portal-info-two-column--nested {
    gap: 1.4rem;
}

.portal-info-two-column--nested > div {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--a-rule-soft);
    border-radius: var(--a-radius-sm);
    background: rgba(255, 251, 242, 0.62);
}

.portal-info-correction {
    background: linear-gradient(180deg, rgba(255, 251, 242, 0.97), rgba(246, 238, 221, 0.68));
}

.portal-info-privacy {
    border-color: rgba(63, 109, 54, 0.34);
}

.portal-info-privacy-grid article:nth-child(2) {
    border-color: rgba(164, 126, 59, 0.42);
    background: rgba(246, 238, 221, 0.78);
}

/* ══ Ablaufdiagramm: zwei Bahnen, von oben nach unten ══════════════
   Spalte 1 ist die Bahn der Bestattung, Spalte 2 die des Portals,
   Spalte 3 nimmt nur den Ausnahmefall auf, Spalte 4 die Erlaeuterung.

   Die Verbinder liegen als eigene Felder ueber die ganze Zeilenhoehe;
   ihr oberer Teil verschwindet hinter dem Knoten, der auf ihnen liegt.
   Deshalb stimmt der Anschluss auch dann noch, wenn eine Zeile durch die
   Erlaeuterung daneben waechst — ohne dass irgendwo eine Hoehe in
   Pixeln festgeschrieben werden muesste. */

.ablauf {
    --knoten-b: 178px;
    --knoten-h: 3.3rem;
    /* Rechts neben den Nebenwegen laeuft der Rueckweg. Die Gasse dafuer
       liegt jetzt in der Spalte statt im Kasten — sonst waeren die Kaesten
       der dritten Spalte schmaler als alle anderen. */
    --gasse: 1.95rem;
    --stiel: 1.85rem;
    /* Hoehe der Pfeilspitze; jede Linie endet um genau so viel frueher. */
    --spitze: 5px;
    --linie: var(--a-rule);
}

.ablauf-gitter {
    display: grid;
    grid-template-columns:
        var(--knoten-b) var(--knoten-b)
        calc(var(--knoten-b) + var(--gasse))
        minmax(240px, 1fr);
    align-items: start;
    column-gap: 0;
}

/* Die beiden Bahnen mussten sich deutlicher unterscheiden: Vorher lagen
   sie bei 7,5 % und 5,5 % Deckung, das war auf hellen Bildschirmen kaum
   auseinanderzuhalten. Jetzt trennt sie beides — Ton und Helligkeit —,
   und ein Rand zieht die Grenze. Das traegt jetzt auch die Aussage, denn
   die rechte Bahn hat keine Beschriftung mehr. */
.ablauf-band {
    align-self: stretch;
    border-radius: 10px;
    border: 1px solid rgba(164, 126, 59, 0.3);
    background: rgba(164, 126, 59, 0.19);
}

.ablauf-band--zwei {
    border-color: rgba(139, 115, 85, 0.16);
    background: rgba(107, 92, 66, 0.075);
}

.ablauf-bahnname {
    z-index: 1;
    padding: 0.7rem 0.65rem 0.55rem;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--a-muted);
}

/* ── Knoten ──────────────────────────────────────────────────────── */
.ablauf-zelle {
    z-index: 1;
    padding: 0 0.35rem var(--stiel);
}

/* Rechts neben den Nebenwegen laeuft der Rueckweg. Er soll innerhalb der
   Bahn bleiben — also braucht er dort eine Gasse. */
.ablauf-zelle--neben {
    padding-right: calc(var(--gasse) + 0.35rem);
}

/* Alle Kaesten gleich gross und der Text darin mittig. Die Hoehe reicht
   fuer zwei Zeilen — laenger wird kein Name. */
.ablauf-knoten {
    width: 100%;
    height: var(--knoten-h);
    padding: 0.4rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--a-rule-soft);
    border-radius: 8px;
    background: var(--a-card);
    color: var(--a-ink);
    font-family: inherit;
    cursor: pointer;
}

.ablauf-knoten b {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
}

.ablauf-knoten--bestattung { border-color: var(--a-gold); }

.ablauf-knoten--stoerung {
    border-color: rgba(142, 58, 44, 0.45);
    background: rgba(142, 58, 44, 0.05);
}

.ablauf-knoten--stoerung b { color: var(--a-error); }

/* Nebenweg statt Fehler: gestrichelter Rand, damit er sich vom
   Hauptweg abhebt, aber nicht die Farbe der Stoerung traegt. */
.ablauf-knoten--nebenweg {
    border-style: dashed;
    border-color: var(--a-gold);
    background: rgba(246, 238, 221, 0.6);
}

.ablauf-knoten:hover { border-color: var(--a-gold); }

.ablauf-knoten:focus-visible {
    outline: 2px solid var(--a-gold-deep);
    outline-offset: 2px;
}

.ablauf-knoten--offen {
    border-color: var(--a-gold-deep);
    box-shadow: inset 0 0 0 1px var(--a-gold-deep);
}

/* ── Verbinder ───────────────────────────────────────────────────────
   --von und --bis sagen, wo ein Weg abbiegt. Beide kommen aus dem JSX und
   sind aus der Spaltenbreite gerechnet, nicht in Prozent: Prozent setzte
   gleich breite Spalten voraus, und die dritte ist breiter — dort liegt
   die Gasse fuer den Rueckweg. Die Spitze sitzt am unteren Rand der
   Zeile, also dort, wo der naechste Knoten beginnt. */
.ablauf-verbinder {
    align-self: stretch;
    position: relative;
    min-height: var(--stiel);
}

.ablauf-verbinder > span {
    position: absolute;
    bottom: 0;
    border-top: 5px solid var(--a-gold);
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    transform: translateX(-50%);
}

/* Gerade: eine Linie mitten durch die Spalte. Sie endet 5 px vor dem
   Zeilenende — dort beginnt die Spitze. Lief die Linie bis ganz unten,
   zeichnete sie sich mitten durch das Dreieck und liess es stumpf
   aussehen. Dieselben 5 px stehen unten bei jeder anderen Wegart. */
.ablauf-verbinder--gerade::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: var(--spitze);
    border-left: 1px solid var(--linie);
}

.ablauf-verbinder--gerade > span { left: 50%; }

/* Bahnwechsel: hinunter, hinueber, hinunter. */
.ablauf-verbinder--nach-rechts::before,
.ablauf-verbinder--nach-links::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0.9rem;
    border-bottom: 1px solid var(--linie);
}

.ablauf-verbinder--nach-rechts::before {
    left: var(--von);
    right: calc(100% - var(--bis));
    border-left: 1px solid var(--linie);
}

.ablauf-verbinder--nach-links::before {
    left: var(--bis);
    right: calc(100% - var(--von));
    border-right: 1px solid var(--linie);
}

.ablauf-verbinder--nach-rechts::after,
.ablauf-verbinder--nach-links::after {
    content: '';
    position: absolute;
    left: var(--bis);
    bottom: var(--spitze);
    height: calc(0.9rem - var(--spitze));
    border-left: 1px solid var(--linie);
}

.ablauf-verbinder--nach-rechts > span,
.ablauf-verbinder--nach-links > span { left: var(--bis); }

/* Gabel: aus einem Schritt entstehen zwei moegliche Ausgaenge. Der Ast
   nach rechts ist gestrichelt, weil er nur im Ausnahmefall gilt. */
.ablauf-verbinder--gabel::before {
    content: '';
    position: absolute;
    left: var(--von);
    top: 0;
    bottom: var(--spitze);
    border-left: 1px solid var(--linie);
}

.ablauf-verbinder--gabel::after {
    content: '';
    position: absolute;
    left: var(--von);
    right: calc(100% - var(--bis));
    bottom: var(--spitze);
    height: calc(1.05rem - var(--spitze));
    border-top: 1px dashed rgba(142, 58, 44, 0.55);
    border-right: 1px dashed rgba(142, 58, 44, 0.55);
}

.ablauf-verbinder--gabel > span:first-child { left: var(--von); }

.ablauf-verbinder--gabel > span:last-child {
    left: var(--bis);
    border-top-color: var(--a-error);
}

/* Rueckweg: hinunter aus dem Nebenweg, aussen herum nach oben, waagerecht
   zurueck in den Schritt, bei dem es weitergeht. Beide Ankerpunkte sind
   von den Kanten des Feldes aus messbar — unten die Luecke unter dem
   Knoten (--stiel), oben der Beginn der Zeile, in der das Ziel steht.
   Deshalb braucht der Rueckweg keine einzige Pixelhoehe zu kennen.
   --von ist die Spaltenmitte, aus der er kommt, --bis die rechte Kante
   der Spalte, in die er einmuendet. */
.ablauf-verbinder--zurueck {
    pointer-events: none;
}

/* Der Rueckweg laeuft ausserhalb der Bahnen, im Zwischenraum vor der
   Tafel. Vorher klebte er am rechten Rand der Knoten und sah aus wie ein
   Strich, der aus der Kiste haengt. Draussen sagt er ausserdem, was er
   ist: ein Umweg, nicht Teil des geraden Wegs. */
.ablauf-verbinder--zurueck::before {
    content: '';
    position: absolute;
    left: var(--von);
    right: calc(var(--gasse) / 2);
    bottom: 0.6rem;
    height: calc(var(--stiel) - 0.6rem);
    border-left: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
}

/* --bis kommt schon um die Zellenpolsterung verringert aus dem JSX; sonst
   endete der Pfeil an der Spaltenkante statt am Knoten. */
.ablauf-verbinder--zurueck::after {
    content: '';
    position: absolute;
    left: calc(var(--bis) + var(--spitze));
    right: calc(var(--gasse) / 2);
    top: 1.35rem;
    bottom: 0.6rem;
    border-right: 1px solid var(--linie);
    border-top: 1px solid var(--linie);
}

/* Die Spitze zeigt hier nach links, in den Knoten hinein. */
.ablauf-verbinder--zurueck > span {
    left: var(--bis);
    top: 1.35rem;
    bottom: auto;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    border-right: 5px solid var(--a-gold);
    border-left: 0;
    transform: translate(0, -50%);
}

/* Ueber dem Pfeil, mittig auf seiner Laenge — nicht auf der Linie und
   nicht an ihren Anfang geklemmt. */
.ablauf-verbinder--zurueck em {
    left: calc(var(--bis) + 0.65rem);
    right: calc(var(--gasse) / 2);
    top: 0.15rem;
    text-align: center;
}

/* ── Der Flyer im Erstkontakt ────────────────────────────────────── */
.flyer {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin: 0 0 0.9rem;
}

.flyer-seite {
    margin: 0;
    display: grid;
    gap: 0.35rem;
    justify-items: center;
}

/* Der Knopf traegt nur das Bild — kein Rahmen, keine Flaeche, damit es
   aussieht wie ein Bild und sich anfuehlt wie ein Knopf. */
/* ── Ein Bild, das sich vergroessern laesst ───────────────────────── */
.bildlupe {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    line-height: 0;
}

.bildlupe img {
    width: 100%;
    height: auto;
    border: 1px solid var(--a-rule);
    border-radius: 4px;
}

.bildlupe:hover img,
.bildlupe:focus-visible img { border-color: var(--a-gold); }

.bildlupe:focus-visible {
    outline: 2px solid var(--a-gold-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Der Hinweis liegt auf dem Bild und erscheint erst beim Zeigen: Sonst
   verdeckte er dauerhaft dessen unteren Rand. */
.bildlupe-hinweis {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.25rem 0;
    background: rgba(43, 36, 25, 0.78);
    color: var(--a-paper-2);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.4;
    border-radius: 0 0 4px 4px;
    opacity: 0;
}

.bildlupe:hover .bildlupe-hinweis,
.bildlupe:focus-visible .bildlupe-hinweis { opacity: 1; }

/* Im Flyer stehen zwei Seiten nebeneinander, deshalb dort schmaler. */
.flyer .bildlupe { width: 116px; }

/* Die Mail steht allein und darf die Breite der Tafel nutzen. */
.ablauf-tafel > .bildlupe {
    width: 100%;
    max-width: 320px;
    margin: 0.2rem 0 0.9rem;
}

/* Die Registerleiste ist klein genug, um ohne Vergroesserung lesbar zu
   sein — sie zeigt nur drei Woerter. */
.ablauf-register {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0.2rem 0 0.9rem;
    border: 1px solid var(--a-rule-soft);
    border-radius: 4px;
}

/* Bilder, die schmaler sind als die Tafel, stehen mittig darunter.
   Zwei Fallen stecken hier drin. Erstens setzen beide Regeln oben
   "margin" als Kurzschreibweise und damit auch die seitlichen Abstaende
   auf 0 — diese Regel muss also dahinter stehen. Zweitens ist
   ".ablauf-tafel > .bildlupe" zwei Klassen und schlaegt eine einzelne,
   egal wie spaet sie kommt; deshalb steht die Tafel hier mit davor. */
.ablauf-tafel .ablauf-bild-mitte { margin-inline: auto; }

.bild-dialog {
    /* Ein <dialog> zentriert sich von selbst — über "margin: auto" aus dem
       Browser. Der globale Reset in shared.css setzt aber jedem Element
       "margin: 0" und nimmt ihm damit genau das; ohne diese Zeile klebt
       die Vergrößerung in der linken oberen Ecke. */
    margin: auto;
    max-width: min(92vw, 620px);
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    overflow: visible;
}

.bild-dialog::backdrop { background: rgba(43, 36, 25, 0.72); }

.bild-dialog img {
    max-width: 100%;
    max-height: 84vh;
    width: auto;
    height: auto;
    border-radius: 6px;
}

.flyer-zu {
    display: block;
    margin: 0.7rem auto 0;
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--a-paper-2);
    border-radius: 999px;
    background: none;
    color: var(--a-paper-2);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
}

.flyer-zu:hover { background: rgba(251, 245, 232, 0.14); }

.flyer figcaption {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--a-muted);
}

/* ── Das Auftragsformular, an jedem Feld erklaert ─────────────────────
   Bild links, Erklaerungen rechts auf der Hoehe ihres Feldes. Die Pfeile
   sind waagerechte Striche mit Spitze nach links; sie beginnen am Bildrand
   und enden am Text. Weil die Hoehen Prozentwerte sind, stimmen sie in
   jeder Bildgroesse. */
/* Der Knopf umschliesst den ganzen Block. Er traegt selbst keine Flaeche —
   das Bild und die Pfeile sollen aussehen wie Inhalt, nicht wie ein
   Bedienelement, und trotzdem anklickbar sein. */
.formular-huelle { margin: 0.2rem 0 0.4rem; }

.formular-lupe {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: zoom-in;
}

.formular-lupe-hinweis {
    display: block;
    margin-top: 0.5rem;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--a-muted);
}

.formular-lupe-hinweis::before { content: '⤢  '; }

.formular-lupe:hover .formular-lupe-hinweis,
.formular-lupe:focus-visible .formular-lupe-hinweis { color: var(--a-gold-deep); }

.formular-lupe:hover .formular-bild { border-color: var(--a-gold); }

.formular-lupe:focus-visible {
    outline: 2px solid var(--a-gold-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

.formular {
    position: relative;
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 0 0.5rem;
}

/* Gross: dieselben Prozentwerte, dieselben Texte — nur mehr Platz, und die
   Schrift wieder in Lesegroesse. */
.formular-dialog {
    margin: auto;
    /* Ein <dialog> ist so breit wie sein Inhalt. Die Spalte der Pfeile
       enthaelt nur absolut gesetzte Elemente und traegt damit nichts zur
       Breite bei — ohne feste Breite faellt sie auf 0 px, und die Texte
       stapeln sich buchstabenweise uebereinander. */
    width: min(94vw, 900px);
    max-width: min(94vw, 900px);
    max-height: 92vh;
    padding: 1.2rem 1.4rem 1.1rem;
    border: 0;
    border-radius: 10px;
    background: var(--a-card);
    overflow: auto;
}

.formular-dialog::backdrop { background: rgba(43, 36, 25, 0.72); }

.formular-dialog .flyer-zu {
    border-color: var(--a-rule);
    color: var(--a-ink-2);
}

.formular-dialog .flyer-zu:hover { background: rgba(164, 126, 59, 0.12); }

.formular--gross {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 0 1.1rem;
}

.formular--gross .formular-bild { width: 340px; }

.formular--gross .formular-marke {
    padding-left: 2.4rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

.formular--gross .formular-marke::before { width: 1.7rem; left: 0.42rem; }

.formular-bild {
    width: 176px;
    height: auto;
    border: 1px solid var(--a-rule);
    border-radius: 6px;
    align-self: start;
}

.formular-marken { position: relative; }

.formular-marke {
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding-left: 1.5rem;
    color: var(--a-ink-2);
    font-size: 0.62rem;
    line-height: 1.35;
}

/* Der Strich zum Feld, mit Spitze am Bild. */
.formular-marke::before {
    content: '';
    position: absolute;
    left: 0.28rem;
    right: auto;
    width: 1rem;
    top: 50%;
    border-top: 1px solid var(--a-rule);
}

.formular-marke::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-right: 4px solid var(--a-gold);
}

/* Zu schmal fuer zwei Spalten: Bild oben, Erklaerungen als Liste darunter.
   Der Pfeil waere dort eine Linie ins Nichts. */
@media (max-width: 1180px) {
    /* Die grosse Fassung im Dialog behaelt ihre zwei Spalten, solange das
       Fenster breit genug ist — sie hat ja den ganzen Bildschirm. */
    .formular:not(.formular--gross) {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
    }

    .formular:not(.formular--gross) .formular-bild { width: 100%; max-width: 240px; }

    .formular:not(.formular--gross) .formular-marken {
        display: grid;
        gap: 0.4rem;
    }

    .formular:not(.formular--gross) .formular-marke {
        position: static;
        transform: none;
        padding-left: 0.9rem;
    }

    .formular:not(.formular--gross) .formular-marke::before { display: none; }

    .formular:not(.formular--gross) .formular-marke::after {
        left: 0;
        top: 0.5em;
        border-right: 0;
        border-left: 4px solid var(--a-gold);
    }
}

/* Auch die grosse Fassung braucht Platz fuer zwei Spalten. Auf einem
   Telefon hat sie ihn nicht — 340 px Bild passen nicht neben Text in
   einen Dialog von 353 px. Dort stapelt sie wie die kleine. */
@media (max-width: 820px) {
    .formular--gross {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.8rem;
    }

    .formular--gross .formular-bild { width: 100%; max-width: 320px; }

    .formular--gross .formular-marken {
        display: grid;
        gap: 0.55rem;
    }

    .formular--gross .formular-marke {
        position: static;
        transform: none;
        padding-left: 1.1rem;
        font-size: 0.78rem;
    }

    .formular--gross .formular-marke::before { display: none; }

    .formular--gross .formular-marke::after {
        left: 0;
        top: 0.5em;
        border-right: 0;
        border-left: 4px solid var(--a-gold);
    }

    .formular-dialog { padding: 1rem 1.1rem 0.9rem; }
}

/* ── Beschriftung an einem Weg ───────────────────────────────────── */
.ablauf-verbinder em {
    position: absolute;
    font-style: normal;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--a-muted);
    white-space: nowrap;
}

/* Am senkrechten Weg steht sie daneben, am waagerechten darueber. */
/* Am senkrechten Pfeil kurz vor seinem Ziel, daneben. Auf halber Hoehe
   waere sie genau dort gelandet, wo die Beschriftung des Astes steht —
   zwei Wege, eine Stelle. Mittig ist hier also die schlechtere Wahl. */
.ablauf-verbinder--gerade em {
    left: 50%;
    bottom: 0.9rem;
    margin-left: 0.45rem;
}

/* Am waagerechten Ast mittig darueber. */
.ablauf-verbinder--nach-rechts em {
    left: var(--von);
    right: calc(100% - var(--bis));
    bottom: 1.1rem;
    text-align: center;
}

/* ── Tafel neben dem Schritt ─────────────────────────────────────── */
.ablauf-tafel {
    margin-left: 1.5rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--a-rule-soft);
    border-radius: var(--a-radius-sm);
    background: rgba(255, 251, 242, 0.75);
}

/* Die Ueberschrift der Tafel muss denselben Wortlaut zeigen wie der Knoten,
   den man angetippt hat — also auch dieselbe Schreibweise. Dagegen stehen
   zwei Regeln aus portal-archive.css: ein blankes h3 mit !important auf der
   Schriftart und .detail-card h3, das jede Ueberschrift in eine gesperrte
   Versalzeile mit Trennlinie verwandelt. Beides wird hier zurueckgenommen;
   das !important ist die einzige Antwort auf ein !important. */
.ablauf-tafel h3 {
    display: block;
    margin: 0 0 0.6rem;
    padding-bottom: 0;
    border-bottom: 0;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--a-ink);
}

.ablauf-tafel > p {
    max-width: 60ch;
    margin: 0 0 0.7rem;
    color: var(--a-ink-2);
    font-size: 0.89rem;
    line-height: 1.65;
}

.ablauf-tafel > p:last-child { margin-bottom: 0; }

.ablauf-hinweis { color: var(--a-muted) !important; font-style: italic; }

/* Zwei wiederkehrende Absatzarten in der Tafel: was im Portal zu sehen
   ist, und woran man scheitert, wenn man es nicht weiss. */
.portal-info-im-portal,
.portal-info-achtung {
    padding: 0.7rem 0.85rem;
    border-radius: var(--a-radius-sm);
}

.portal-info-im-portal {
    border: 1px solid var(--a-rule-soft);
    background: rgba(246, 238, 221, 0.5);
}

.portal-info-achtung {
    border: 1px solid rgba(164, 126, 59, 0.42);
    background: rgba(255, 251, 242, 0.85);
}

.portal-info-im-portal strong,
.portal-info-achtung strong { color: var(--a-ink); }

@media (max-width: 900px) {
    .portal-info-anchor-nav {
        top: 4.5rem;
        border-radius: var(--a-radius-sm);
    }

    .portal-info-privacy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* Unter 900 px ist neben den beiden Bahnen kein Platz mehr fuer die
   Erlaeuterung. Aus dem Raster wird dann eine Kette: dieselbe Reihenfolge,
   dieselben Knoten, nur untereinander — die Tafel steht direkt unter dem
   Schritt, zu dem sie gehoert, weil sie im Baum genau dort sitzt. */
@media (max-width: 900px) {
    .ablauf-gitter {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .ablauf-band,
    .ablauf-bahnname { display: none; }

    .ablauf-zelle { padding: 0 0 0.9rem; }

    /* In der Kette stehen die Kaesten untereinander und tragen zusaetzlich
       ihre Bahnmarke — feste Hoehe und Zentrierung passen dort nicht. */
    .ablauf-knoten {
        height: auto;
        display: block;
        text-align: left;
        padding: 0.7rem 0.85rem;
    }

    .ablauf-knoten::before {
        content: attr(data-bahn);
        font-family: 'DM Sans', system-ui, sans-serif;
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--a-muted);
    }

    .ablauf-knoten--stoerung { margin-left: 1.6rem; }

    /* Aus jedem Verbinder wird derselbe kurze senkrechte Strich. */
    .ablauf-verbinder {
        align-self: start;
        width: 1px;
        height: 0.95rem;
        min-height: 0;
        margin: 0 0 0.9rem 1.5rem;
        background: var(--linie);
    }

    .ablauf-verbinder--gabel {
        background: transparent;
        border-left: 1px dashed rgba(142, 58, 44, 0.55);
    }

    .ablauf-verbinder::before,
    .ablauf-verbinder::after,
    .ablauf-verbinder > span { display: none; }

    /* Der Rueckweg laesst sich als Kette nicht zeichnen. Statt einer Linie
       ins Nichts bleibt seine Beschriftung stehen — sie sagt dasselbe. */
    .ablauf-verbinder--zurueck {
        background: transparent;
        width: auto;
        height: auto;
        margin: -0.5rem 0 0.9rem 1.5rem;
    }

    .ablauf-verbinder em {
        position: static;
        display: block;
        margin: 0;
        transform: none;
        text-align: left;
        white-space: normal;
    }

    .ablauf-verbinder em::before { content: '↑ '; }
    .ablauf-verbinder--gerade em::before,
    .ablauf-verbinder--nach-rechts em::before { content: '↓ '; }

    .ablauf-tafel { margin: 0 0 1.1rem; }
}

@media (max-width: 620px) {
    .portal-info-anchor-nav {
        position: static;
        margin-left: -0.2rem;
        margin-right: -0.2rem;
        border-radius: var(--a-radius-sm);
    }

    .portal-info-privacy-grid {
        grid-template-columns: 1fr;
    }

}