/* ============================================================================
   PRÜFREGELN — /e-rechnung/pruefregeln/ (Übersicht + 117 Regelseiten)

   Warum eine eigene Datei und kein Block im Seitenkopf: Dieses Vokabular
   erscheint auf 118 Seiten. Im Kopf ausgeliefert wäre es 118 mal übertragen
   und nie zwischengespeichert — genau der Fall, den Regel 36 meint.

   HALTUNG DIESER SEITEN

   Eine Referenz wird gelesen, nicht überflogen. Sie hat deshalb keine
   Auszeichnungen: keine farbigen Punkte, keine Marken, keine versalen
   Kleinschriften über jedem Absatz. Was eine Fehlerklasse ist, steht als Wort
   da; was eine Überschrift ist, ist an ihrer Größe zu erkennen. Farbe bleibt
   den Verweisen vorbehalten — dort trägt sie eine Bedeutung, die kein Wort
   ersetzt.

   Genau ein Element hat einen Rahmen: die Einordnungstafel der Regelseite.
   Alles andere wird von Weißraum und Haarlinien gegliedert. Ein Raster aus
   Kästen sieht nach Schaltpult aus, und ein Schaltpult beantwortet keine
   Frage nach dem Vorsteuerabzug.

   Regel 33 gilt hier überall: jeder Link trägt eine Klasse. `body
   a:not([class])` in global.css zählt 0-2-2 und gewinnt sonst gegen jeden
   Kontextselektor.
   ========================================================================== */

.pr-page .section { padding: var(--spacing-xl) var(--spacing-lg); position: relative; }
.pr-page .container { max-width: 64rem; margin: 0 auto; }

/* Schreibmaschinenschrift nur für Zeichenketten, die eine Maschine liest —
   Feldnamen und Feldkennungen. Eine Regelkennung wie BR-DE-15 ist ein Name und
   steht deshalb in der Schrift der Seite. */
code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.9em; background: rgba(255, 255, 255, 0.055);
    padding: 0.12em 0.4em; border-radius: 3px;
}

/* -- Links ---------------------------------------------------------------- */
.pr-link { color: var(--accent-text, #8ec7ee); text-decoration: none;
           border-bottom: 1px solid rgba(142, 199, 238, 0.3); }
.pr-link:hover, .pr-link:focus-visible { border-bottom-color: var(--accent-text, #8ec7ee); }

/* ==========================================================================
   KOPF — die Einordnung steht im ersten Bildschirm, als Satz.

   Vorher standen dort ein farbiger Punkt, ein fetter Klassenname und eine
   versale Marke nebeneinander. Drei Auszeichnungen für eine Aussage, die in
   einen Satz passt.
   ========================================================================== */
.pr-verdict {
    max-width: 34rem; width: 100%;
    margin: var(--spacing-md) auto 0; padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.72);
}
.pr-verdict strong { font-weight: 600; color: var(--text-light); }

/* ==========================================================================
   REGELSEITE — Antwort links, Einordnung rechts.
   ========================================================================== */
/* Drei Bereiche, zwei Spalten: die Tafel steht rechts neben Antwort UND
   Anhang, damit links keine Leere entsteht, wenn sie länger gerät. Auf
   schmalen Schirmen fällt das Raster auf eine Spalte zusammen und die
   Quelltextfolge gilt — Antwort, Tafel, Nachbarregeln. */
.pr-split { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--spacing-xl); align-items: start; }
.pr-answer { grid-column: 1; grid-row: 1; }
.pr-side   { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.pr-tail   { grid-column: 1; grid-row: 2; min-width: 0; }

.pr-answer > section + section { margin-top: var(--spacing-lg); }
.pr-answer h2 {
    font-size: 17px; font-weight: 600; letter-spacing: -0.1px;
    color: var(--text-light); margin: 0 0 8px;
}
.pr-answer p { font-size: 16px; line-height: 1.72; color: rgba(255, 255, 255, 0.84); margin: 0; }

/* -- Die Einordnungstafel: das einzige gerahmte Element der Seite ---------- */
.pr-side {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    background: var(--glass-bg);
}
.pr-side h2 {
    font-size: 16px; font-weight: 600; color: var(--text-light);
    margin: 0 0 var(--spacing-sm); letter-spacing: -0.1px;
}
.pr-facts { margin: 0; }
.pr-facts > div { padding: 11px 0; }
.pr-facts > div + div { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.pr-facts dt { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.46); margin-bottom: 4px; }
.pr-facts dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
.pr-fields { display: flex; flex-wrap: wrap; gap: 6px; }

/* ==========================================================================
   LISTEN — Übersicht und verwandte Regeln benutzen dieselbe Zeile.

   Dass beide gleich aussehen, ist der Punkt: Es ist zweimal dieselbe Sache,
   eine Regel mit ihrer Kennung und ihrem ersten Satz.
   ========================================================================== */
.pr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.pr-list li { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.pr-list .pr-row-link {
    display: grid; grid-template-columns: 13rem minmax(0, 1fr) 6rem;
    gap: var(--spacing-md); align-items: baseline;
    padding: 13px 10px 13px 2px; text-decoration: none; color: inherit;
    transition: background .18s ease;
}
.pr-list .pr-row-link:hover, .pr-list .pr-row-link:focus-visible { background: rgba(255, 255, 255, 0.04); }
/* Ziffernbreiten gleich, damit die Kennungen eine Spalte bilden und nicht
   flattern — ohne dafür in eine zweite Schrift zu wechseln. */
.pr-list-code {
    font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums;
    color: var(--accent-text, #8ec7ee);
}
.pr-list-txt { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }
.pr-list-sev { font-size: 13px; text-align: right; color: rgba(255, 255, 255, 0.34); }
.pr-list .pr-row-link:hover .pr-list-txt { color: rgba(255, 255, 255, 0.92); }

/* Verwandte Regeln brauchen die dritte Spalte nicht. */
/* Im Raster trennt schon die Rasterfuge; ein eigener Abstand käme oben drauf. */
.pr-tail > .pr-related:first-child { margin-top: 0; }
.pr-related { margin-top: var(--spacing-2xl); }
.pr-related-erst { margin-top: 0; }
.pr-related h2 { font-size: 17px; font-weight: 600; color: var(--text-light); margin: 0 0 6px; letter-spacing: -0.1px; }
.pr-related-p { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.5); margin: 0 0 var(--spacing-sm); max-width: 44rem; }
.pr-related .pr-row-link { grid-template-columns: 13rem minmax(0, 1fr); }

/* -- Blättern ------------------------------------------------------------- */
.pr-steps {
    display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-lg);
    justify-content: space-between;
    margin-top: var(--spacing-lg); padding-top: var(--spacing-md);
    border-top: 1px solid var(--glass-border);
}
.pr-step { text-decoration: none; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.46); }
.pr-step b { display: block; font-size: 15px; font-weight: 500; color: var(--accent-text, #8ec7ee); }
.pr-step:hover b, .pr-step:focus-visible b { color: #b6dcf5; }
.pr-step-next { text-align: right; margin-left: auto; }

/* ==========================================================================
   ÜBERSICHT — die Fehlerklassen als Text, nicht als Kachelwand.
   ========================================================================== */
.pr-klassen-h { font-size: 19px; font-weight: 600; color: var(--text-light); margin: 0 0 var(--spacing-md); letter-spacing: -0.2px; }
.pr-klassen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    gap: var(--spacing-lg) var(--spacing-2xl);
    margin: 0 0 var(--spacing-2xl); padding: 0; list-style: none;
}
.pr-klasse { padding-top: var(--spacing-sm); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pr-klasse h3 { font-size: 16px; font-weight: 600; color: var(--text-light); margin: 0 0 8px; letter-spacing: -0.1px; }
.pr-klasse p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.74); margin: 0; }
.pr-klasse-do { margin-top: 10px !important; font-size: 14px !important; color: rgba(255, 255, 255, 0.5) !important; }
.pr-klasse-n { display: block; margin-top: 10px; font-size: 13.5px; }

/* -- Suche ---------------------------------------------------------------- */
.pr-find { margin: 0 0 var(--spacing-lg); }
.pr-find-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pr-find label { font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.pr-find input[type="search"] {
    flex: 1 1 20rem; min-width: 0;
    font: inherit; font-size: 15px; color: var(--text-light);
    padding: 11px 15px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.04);
    -webkit-appearance: none; appearance: none;
}
.pr-find input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.3); }
.pr-find input[type="search"]:focus-visible { outline: none; border-color: rgba(142, 199, 238, 0.5); }
.pr-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.55); cursor: pointer; }
.pr-toggle input { accent-color: #2f6f9f; width: 15px; height: 15px; }
.pr-find-row-2 { margin-top: 12px; gap: 10px 22px; }
.pr-count { font-size: 14px; color: rgba(255, 255, 255, 0.44); margin: 0; }
.pr-empty { font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, 0.6); margin: var(--spacing-lg) 0; max-width: 44rem; }

/* -- Gruppen -------------------------------------------------------------- */
.pr-group { margin-top: var(--spacing-2xl); }
.pr-group h2 { font-size: 19px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.2px; color: var(--text-light); }
.pr-group-n { font-weight: 400; font-size: 15px; color: rgba(255, 255, 255, 0.38); }
.pr-group-p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.56); max-width: 44rem; margin: 0 0 var(--spacing-md); }

/* -- Schlussverweise ------------------------------------------------------ */
.pr-outro {
    margin-top: var(--spacing-2xl); padding-top: var(--spacing-md);
    border-top: 1px solid var(--glass-border);
    font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, 0.62);
    max-width: 44rem;
}
.pr-source {
    margin-top: var(--spacing-md); font-size: 13px; line-height: 1.7;
    color: rgba(255, 255, 255, 0.38); max-width: 44rem;
}
.pr-source .pr-link { color: rgba(255, 255, 255, 0.54); border-bottom-color: rgba(255, 255, 255, 0.2); }

.pr-crumb { font-size: 13px; color: rgba(255, 255, 255, 0.38); margin-bottom: var(--spacing-lg); }
.pr-crumb a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.pr-crumb a:hover { color: var(--accent-text, #8ec7ee); }
.pr-crumb span { padding: 0 8px; color: rgba(255, 255, 255, 0.22); }

#seo-nav-fallback {
    display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
    padding: var(--spacing-lg) var(--spacing-md); font-size: 13px;
}
#seo-nav-fallback a { color: rgba(255, 255, 255, 0.42); text-decoration: none; }
#seo-nav-fallback a:hover { color: var(--accent-text, #8ec7ee); }

/* ========================================================================== */
@media (max-width: 900px) {
    .pr-split { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
    .pr-answer, .pr-side, .pr-tail { grid-column: 1; grid-row: auto; }
}

@media (max-width: 768px) {
    /* main.css zentriert unter 768px pauschal `h1, h2, h3, .section-title`.
       Diese Überschriften stehen über linksbündigem Text; zentriert sähen sie
       aus wie Abschnittstitel, die sie nicht sind. */
    .pr-answer h2, .pr-side h2, .pr-related h2, .pr-group h2,
    .pr-klasse h3, .pr-klassen-h { text-align: left; width: auto; }
}

@media (max-width: 640px) {
    .pr-page .section { padding: var(--spacing-lg) var(--spacing-md); }
    .pr-list .pr-row-link,
    .pr-related .pr-row-link { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
    .pr-list-code { grid-column: 1; }
    .pr-list-sev { grid-column: 2; grid-row: 1; }
    .pr-list-txt { grid-column: 1 / -1; }
    .pr-step, .pr-step-next { flex: 1 1 100%; text-align: left; margin-left: 0; }
}