/* ============================================================
   Knooper Zeitung — Zeitungsdesign (Schwarz-Weiß)
   ============================================================ */

/* SCHRIFTEN vom eigenen Server (P186a, 03.08.2026) — vorher per @import von Google.
   Gründe und Auswahl der Schnitte: ai/rechts-datenbank.md, Abschnitt 49.
   Nur `latin` und `latin-ext`; alle drei Familien stehen unter der SIL Open Font License.
   Dieses Stylesheet geht inline in JEDE Seite — deshalb hier kurz. */

/* IBM Plex Sans 400 italic — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 400 italic — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 300 normal — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 300 normal — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 400 normal — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 400 normal — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 500 normal — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 500 normal — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 600 normal — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 600 normal — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 700 normal — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 700 normal — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/css/fonts/ibm-plex-sans-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lora 400 italic — latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/css/fonts/lora-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lora 400 italic — latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/css/fonts/lora-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lora 400 normal — latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/css/fonts/lora-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lora 400 normal — latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/css/fonts/lora-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lora 600 normal — latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/css/fonts/lora-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lora 600 normal — latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/css/fonts/lora-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display 400 italic — latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/css/fonts/playfair-display-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display 400 italic — latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/css/fonts/playfair-display-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display 600 italic — latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/css/fonts/playfair-display-600-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display 600 italic — latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/css/fonts/playfair-display-600-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display 400 normal — latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/css/fonts/playfair-display-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display 400 normal — latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/css/fonts/playfair-display-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display 600 normal — latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/css/fonts/playfair-display-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display 600 normal — latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/css/fonts/playfair-display-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display 700 normal — latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/css/fonts/playfair-display-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display 700 normal — latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/css/fonts/playfair-display-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display 900 normal — latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/css/fonts/playfair-display-900-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display 900 normal — latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/css/fonts/playfair-display-900-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   VARIABLEN
   ============================================================ */
:root {
    --schrift-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
    --schrift-artikel:  'Lora', Georgia, serif;
    --schrift-ui:       'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    --farbe-text:       #111111;
    --farbe-grau:       #555555;
    --farbe-linie:      #cccccc;
    --farbe-hintergrund: #ffffff;
    /* Einzige Ausnahme von der Monochromie (Julian, 28.07.2026): Bedienelemente mitten
       auf der Seite, die nur eingeloggt funktionieren, sind lila — so ist auf einen Blick
       klar, dass Besucher sie gar nicht sehen. */
    --farbe-eingeloggt: #6d28d9;
    /* Zweite Ausnahme (Julian, P172 vom 03.08.2026): Was die Redaktion in einem
       Gesprächsfaden geschrieben hat, steht in Blau — sichtbar für alle, anders als das
       Lila, das nur Angemeldete überhaupt zu sehen bekommen. */
    --farbe-redaktion:  #1d4ed8;
}

/* ============================================================
   WRAPPER — Zentrierung (standard.css ist leer)
   ============================================================ */
.wrapper {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
}

/* ============================================================
   BODY
   ============================================================ */
.body {
    background-color: var(--farbe-hintergrund);
    color: var(--farbe-text);
    font-family: var(--schrift-artikel);
    font-size: 19px;
    line-height: 1.7;
}

.body h1, .body h2, .body h3,
.body h4, .body h5, .body h6 {
    font-family: var(--schrift-display);
    color: var(--farbe-text);
    line-height: 1.2;
}

.body a {
    color: var(--farbe-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.body a:hover {
    text-decoration: none;
}

/* ============================================================
   TEXT1
   ============================================================ */
.text1 {
    position: relative;
}

.text1 .wrapper {
    padding-top: 44px;
    padding-bottom: 44px;
    max-width: 860px;
}

/* [oid="p"] trifft den Baustein-Container selbst. Enthält ein Artikel Block-Elemente
   (<table>, <hr>, <ul>), muss der Container ein <div> sein — ein <p> wird beim Parsen
   vor dem ersten Block-Element geschlossen und der CMS-Renderer verwirft dann alles
   Weitere. Die Artikeltypografie hängt deshalb an der oid, nicht am Tagnamen. */
.text1 p,
.text1 [oid="p"] {
    font-family: var(--schrift-artikel);
    font-size: 16px;
    line-height: 1.78;
    color: var(--farbe-text);
    margin-bottom: 1.4em;
}

.text1 h1 {
    font-family: var(--schrift-display);
    font-size: 2.8em;
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: 0.5em;
}

.text1 h2 {
    font-family: var(--schrift-display);
    font-size: 2em;
    font-weight: 700;
    line-height: 1.18;
    margin-top: 1.6em;
    margin-bottom: 0.5em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid var(--farbe-linie);
}

.text1 h3 {
    font-family: var(--schrift-display);
    font-size: 1.45em;
    font-weight: 600;
    margin-top: 1.4em;
    margin-bottom: 0.4em;
}

/* Keine Versalien und keine Kapitälchen — nirgends (Julian, P150 vom 02.08.2026).
   Das weite letter-spacing gehörte zur Versalien-Schreibung und entfällt mit ihr. */
.text1 h4 {
    font-family: var(--schrift-ui);
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--farbe-grau);
    margin-top: 1.5em;
    margin-bottom: 0.4em;
}

.text1 a {
    color: var(--farbe-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.text1 a:hover {
    text-decoration: none;
}

.text1 strong, .text1 b {
    font-weight: 700;
}

.text1 em, .text1 i {
    font-style: italic;
}

.text1 blockquote {
    border-left: 3px solid var(--farbe-text);
    padding: 12px 20px;
    margin: 1.8em 0;
    font-style: italic;
    color: var(--farbe-grau);
    font-size: 1.05em;
}

.text1 ul {
    list-style: disc;
    padding-left: 1.6em;
    margin-bottom: 1.3em;
}

.text1 ol {
    list-style: decimal;
    padding-left: 1.6em;
    margin-bottom: 1.3em;
}

.text1 li {
    margin-bottom: 0.5em;
    line-height: 1.65;
}

.text1 hr {
    border: none;
    border-top: 1px solid var(--farbe-linie);
    margin: 2.5em 0;
}

/* Trennlinie zwischen aufeinanderfolgenden Textblöcken */
.body > .text1 + .text1 {
    border-top: 1px solid var(--farbe-linie);
}

@media screen and (max-width: 940px) {
    .text1 .wrapper   { padding: 32px 20px; }
    .text1 h1         { font-size: 2.2em; }
    .text1 h2         { font-size: 1.65em; }
}

@media screen and (max-width: 640px) {
    .text1 h1         { font-size: 1.75em; }
    .text1 h2         { font-size: 1.4em; }
    .text1 p,
    .text1 [oid="p"]  { font-size: 16px; }
}

@media screen and (max-width: 512px) {
    .text1 .wrapper   { padding: 24px 16px; }
    .text1 h1         { font-size: 1.55em; }
}

/* ============================================================
   FLOATIMGLEFT
   ============================================================ */

/* Modul-CSS setzt height: 300px auf img — überschreiben */
.floatimgleft img {
    width: 400px;
    height: auto;
    display: block;
    border: 1px solid var(--farbe-linie);
}

.floatimgleft h2 {
    font-family: var(--schrift-ui);
    font-size: 0.8em;
    font-weight: 400;
    font-style: italic;
    padding: 6px 0;
    border-bottom: none;
    color: var(--farbe-grau);
    line-height: 1.45;
}

@media screen and (max-width: 640px) {
    .floatimgleft img {
        width: 100%;
    }
}

/* ============================================================
   HEINS — Großer Titelblock
   ============================================================ */

.heins h1 {
    font-family: var(--schrift-display);
    font-size: 45px;
    font-weight: 500;
    line-height: 1.12;
    margin-bottom: 10px;
    color: var(--farbe-text);
}

.heins p {
    font-family: var(--schrift-artikel);
    font-size: 22px;
    line-height: 1.55;
    color: var(--farbe-grau);
}

/* ============================================================
   GALERIE
   ============================================================ */
.galerie .bilder img {
    border: 1px solid var(--farbe-linie);
}

/* ============================================================
   DDBOTTOM — Footer (Domain-Kopie des Moduls: kein negativer
   margin mehr, Logo-Bilder bleiben im Footer; Menü entfernt)
   ============================================================ */
.ddbottom {
    background-color: #f4f4f4;
    border-top: 2px solid var(--farbe-text);
    margin-top: 0;
}

.ddbottom .wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
}

.ddbottom .firmenname {
    font-family: var(--schrift-display);
    font-weight: 600;
    font-style: italic;
    font-size: 16px;
    color: var(--farbe-text);
    margin-bottom: 6px;
}

.ddbottom .adressfeld {
    font-family: var(--schrift-ui);
    font-size: 14px;
    color: var(--farbe-grau);
    line-height: 1.65;
}

.ddbottom .adresse {
    color: var(--farbe-grau);
}

/* ============================================================
   TABELLEN IM ARTIKELTEXT (Chronologien, Übersichten)
   ============================================================ */
table.ablauf {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 8px;
    font-family: var(--schrift-ui);
    font-size: 15px;
    line-height: 1.55;
}

table.ablauf th {
    font-weight: 600;
    text-align: left;
    letter-spacing: 0.01em;
    font-size: 13px;
    color: var(--farbe-grau);
    border-bottom: 1px solid var(--farbe-text);
    padding: 0 12px 8px 0;
    vertical-align: bottom;
}

table.ablauf td {
    border-bottom: 1px solid var(--farbe-linie);
    padding: 10px 12px 10px 0;
    vertical-align: top;
    color: var(--farbe-text);
}

table.ablauf td:first-child {
    white-space: nowrap;
    color: var(--farbe-grau);
}

/* C3035 (Julian, 27.08.2026): Kurze Tabelleninhalte brechen nicht um. Anlass war die
   Dezernats-Tabelle „Datum · Kammer · Dezernat · Person · Beleg": Dort brach jede Spalte
   um, auch das Datum und der Name — ein Datum über zwei Zeilen spart keinen Platz, es
   zerreißt die Zeile, die man als Ganzes lesen will.

   Die Konvention der Markdown-Tabellen hier: Die LETZTE Spalte trägt den Fließtext
   (Beleg, Fundstelle, Beschreibung). Sie allein bricht um und bekommt den übrigen Platz;
   alle anderen bleiben in einer Zeile. Wird die Tabelle dadurch breiter als das Fenster,
   scrollt sie in sich selbst — die Regel dafür steht in der Media Query weiter unten und
   gilt seit heute auf jeder Breite, nicht erst unter 512 Pixeln. */
table.ablauf th,
table.ablauf td {
    white-space: nowrap;
}

table.ablauf th:last-child,
table.ablauf td:last-child {
    white-space: normal;
    width: 100%;
    overflow-wrap: anywhere;
}

/* Spaltenüberschriften dürfen umbrechen, die Werte darunter nicht (C3689, C4017):
   Eine lange Überschrift über kurzen Zellen verbreitert sonst die ganze Spalte —
   „Zeichen der Generalstaatsanwaltschaft" über „005 GVAs 8/24" kostete die halbe
   Tabellenbreite. Getrennt wird an den weichen Trennstellen (U+00AD) des Textes und,
   wo das Dokument eine Sprache angibt, zusätzlich automatisch. Die Zellen selbst
   bleiben bei nowrap — Datum, Uhrzeit und Aktenzeichen werden nie zerrissen. */
table.ablauf th {
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Der eigene Rahmen: Die Tabelle darf breit werden, der Seitenkörper nicht. */
table.ablauf {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

table.ablauf td:last-child,
table.ablauf th:last-child {
    padding-right: 0;
}

/* Redaktionsanmerkung innerhalb zitierter Beschlusstexte */
.redanm {
    font-family: var(--schrift-ui);
    font-size: 0.85em;
    color: var(--farbe-grau);
}

/* ============================================================
   FUNDSTELLEN-FUSSNOTEN — Verweis im Beschlusstext <-> Auflösung
   Erzeugt von tools/fussnoten.py (Mini-Skill fundstellen-fussnoten.md),
   Hervorhebung per JS in module/knz_header/script.js.
   Monochrom: Hervorhebung über die etablierte Highlight-Fläche #f5f5e8
   und die Stärke der Unterstreichung — keine Signalfarbe.
   ============================================================ */

/* Verweis im Beschlusstext */
.body a.fs-ref,
.body a.fs-marker {
    color: var(--farbe-text);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    scroll-margin-top: 110px;   /* fixes Topmenü nicht ins Ziel scrollen lassen */
}

/* Kleiner Marker hinter bereits verlinkten Zitaten (kein <a> im <a>) */
.body a.fs-marker {
    font-family: var(--schrift-ui);
    font-size: 0.75em;
    color: var(--farbe-grau);
    text-decoration: none;
    padding: 0 2px;
}

/* Icon hinter dem Verweis: der Sprung bleibt auf dieser Seite —
   Unterscheidung zu den externen dejure-Links daneben */
.body a.fs-ref .fs-icon {
    display: inline-block;      /* nimmt das Icon aus der Unterstreichung heraus */
    font-family: var(--schrift-ui);
    font-size: 0.72em;
    color: var(--farbe-grau);
    padding-left: 3px;
    text-decoration: none;
}

.body a.fs-ref:hover .fs-icon,
.body a.fs-ref.fs-aktiv .fs-icon,
.body a.fs-ref.fs-herkunft .fs-icon {
    color: var(--farbe-text);
}

.body a.fs-ref:hover,
.body a.fs-marker:hover,
.body a.fs-ref:focus,
.body a.fs-marker:focus {
    background-color: #f5f5e8;
    text-decoration-style: solid;
}

/* Weg-Markierung: Ausgangsstelle des Sprungs bzw. Rücksprungziel
   (.fs-herkunft und .fs-aktiv setzt das JS, :target ist der Fallback ohne JS) */
.body a.fs-ref.fs-herkunft,
.body a.fs-marker.fs-herkunft,
.body a.fs-ref.fs-aktiv,
.body a.fs-marker.fs-aktiv,
.body a.fs-ref:target,
.body a.fs-marker:target {
    background-color: #f5f5e8;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
}

/* Gegenstück zum ↓ (P47c): Links, die ein neues Fenster öffnen, bekommen ein ↗.
   Damit ist im Beschlusstext auf einen Blick unterscheidbar, was auf der Seite
   bleibt (↓ zur Auflösung) und was die Seite verlässt (↗ zu dejure). */
.body .text1 a[target="_blank"]::after {
    content: "\2197";
    display: inline-block;
    font-family: var(--schrift-ui);
    font-size: 0.72em;
    color: var(--farbe-grau);
    padding-left: 3px;
    text-decoration: none;
}

.body .text1 a[target="_blank"]:hover::after {
    color: var(--farbe-text);
}

/* Verweiszeile eines bereits verlinkten Zitats: wird mitmarkiert, weil der
   Marker allein (nur ein Pfeil) zum Wiederfinden zu klein ist */
.body .text1 i.fs-aktiv,
.body .text1 i.fs-herkunft {
    background-color: #f5f5e8;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Auflösung im Abschnitt „Was hinter den Kurzzitaten steht" */
.body .fs-ziel {
    scroll-margin-top: 110px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.body .fs-ziel:target,
.body .fs-ziel.fs-aktiv,
.body .fs-ziel.fs-herkunft {
    background-color: #f5f5e8;
}

/* Rücksprung-Links im Wikipedia-Stil: ↑ a b c */
.body .fs-back {
    font-family: var(--schrift-ui);
    font-size: 0.72em;
    color: var(--farbe-grau);
    white-space: nowrap;
}

.body .fs-back a {
    color: var(--farbe-grau);
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px solid var(--farbe-linie);
    padding: 0 1px;
}

.body .fs-back a:hover,
.body .fs-back a:focus {
    color: var(--farbe-text);
    border-bottom-color: var(--farbe-text);
}

.body .fs-back a.fs-aktiv {
    color: var(--farbe-text);
    font-weight: 600;
    border-bottom: 2px solid var(--farbe-text);
}

/* Eigene Tooltips statt der trägen Browser-Blase (Julian P82b, 27.07.2026).
   Der Hinweistext steht in data-fs-tip (gesetzt von tools/fussnoten.py im Skill
   „artikel-erstellen"); ein title-Attribut tragen die Verweise nicht mehr —
   sonst lägen zwei Tooltips übereinander.

   Nur im Besuchermodus: Eingeloggt liegt .body auf <ul id="module">, das
   <body> trägt die Klasse dann nicht. Dort zeigt der CMS-Core seinen eigenen
   Anker-Hinweis (Klick springt / Option-Taste bearbeitet).

   Nur auf Geräten mit echtem Hover: Auf Touchgeräten gäbe es keinen sinnvollen
   Auslöser, und die Blase könnte am Bildschirmrand herausragen. */
@media (hover: hover) {

    body.body a.fs-ref[data-fs-tip],
    body.body a.fs-marker[data-fs-tip],
    body.body .fs-back a[data-fs-tip] {
        position: relative;
    }

    body.body a.fs-ref[data-fs-tip]:hover::after,
    body.body a.fs-ref[data-fs-tip]:focus::after,
    body.body a.fs-marker[data-fs-tip]:hover::after,
    body.body a.fs-marker[data-fs-tip]:focus::after,
    body.body .fs-back a[data-fs-tip]:hover::after,
    body.body .fs-back a[data-fs-tip]:focus::after {
        content: attr(data-fs-tip);
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translateX(-50%);
        margin-bottom: 7px;
        z-index: 60;
        width: max-content;
        /* Seit P120b nennt der Hinweis die Fundstelle, seit P126c vollständig
           (längste Auflösung: knapp 400 Zeichen) — die Blase braucht dafür Platz,
           bleibt bei kurzen Texten (Rücksprünge) durch width: max-content schmal. */
        max-width: min(420px, 92vw);
        padding: 7px 10px;
        background-color: var(--farbe-text);
        color: var(--farbe-hintergrund);
        font-family: var(--schrift-ui);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.35;
        letter-spacing: 0;
        text-align: left;      /* mehrzeilige Fundstellen lesen sich linksbündig */
        text-decoration: none;
        white-space: normal;
        pointer-events: none;
    }

}

/* Touchgeräte: dieselbe Auskunft, aber bildschirmbreit unter dem Verweis
   (Julian P115, 27.07.2026). Gesetzt wird sie von module/knz_header/script.js
   — erstes Tippen zeigt, zweites springt. Seit P127 springt auch ein Tipp auf
   die Blase selbst; `touch-action: pan-y` hält dabei das Scrollen über ihr frei,
   und ein Wisch gilt dem JS nicht als Tipp. Tippen „daneben" schließt sie. */
.knz-fs-touchtip {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 200;
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px 16px;
    cursor: pointer;
    touch-action: pan-y;
    background-color: var(--farbe-text);
    color: var(--farbe-hintergrund);
    font-family: var(--schrift-ui);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease-out, visibility 0.12s;
}

.knz-fs-touchtip.sichtbar {
    opacity: 1;
    visibility: visible;
}

/* Bedienhinweis: erklärt den zweiten Tipp, ohne den Text zu überlagern */
.knz-fs-touchtip-hinweis {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-style: italic;
    opacity: 0.7;
}

/* ============================================================
   RESPONSIVE WRAPPER
   ============================================================ */
@media screen and (max-width: 940px) {
    .wrapper {
        padding: 0 20px;
    }
}

@media screen and (max-width: 512px) {
    .wrapper {
        padding: 0 16px;
    }

    /* Schmale Displays: Tabelle scrollt in sich, statt die Seite zu sprengen */
    table.ablauf {
        display: block;
        overflow-x: auto;
        font-size: 14px;
    }
}

/* ============================================================
   COOKIE-STATUS-TOGGLE (Fingerprint links unten, CMS-Core seite.php
   mit Inline-Styles — deshalb !important). P5bc, 31.07.2026:
   deckender weißer Kreis; mobil kleiner und in die Ecke.
   ============================================================ */
#toggle-custom-state {
    background: rgba(255, 255, 255, 0.9) !important;
}

@media screen and (max-width: 940px) {
    #toggle-custom-state {
        left: 6px !important;
        bottom: 6px !important;
        width: 14px !important;
        height: 14px !important;
        padding: 4px !important;
    }
}