/* JETZT.ai Designsystem, Stand 2026-08-23.
   Dunkel ist die Leitfläche der Dachmarke, hell folgt der Systemeinstellung.
   Statusfarben sind hausweit reserviert und nie Markenfarbe. */

/* Schriften des Entwurfs vom 24.08.2026, beide selbst gehostet: eine eigene
   Auszeichnungsschrift fuer Ueberschriften und Ubuntu fuer den Lesetext.
   Ubuntu steht unter der Ubuntu Font Licence 1.0, Archivo und JetBrains Mono
   unter der SIL Open Font License. Die Hausschrift ist Eigenbestand und steht
   unter keiner dieser Lizenzen. Die Sammelzeile "Schriften, selbst gehostet
   (SIL Open Font License)" stand hier bis zum 27.08.2026 ueber allen vier und
   war fuer zwei davon falsch (Gauntlet-Runde 7, R7-E-11). */
@font-face {
  font-family: 'Nolte Headline';
  src: url('/assets/fonts/nolte-headline.ttf') format('truetype');
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu Local';
  src: url('/assets/fonts/ubuntu-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu Local';
  src: url('/assets/fonts/ubuntu-medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu Local';
  src: url('/assets/fonts/ubuntu-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}

:root {
  /* Leitflächen dunkel */
  --ground: #05070A;
  --surface: #0D1116;
  --surface-2: #161C23;
  --line: #232B34;
  --line-control: #6B7681;  /* Rahmen von Bedienelementen, 3,3 zu 1 auf ground dunkel */
  --text: #EDF0F3;
  --muted: #97A1AB;

  /* Hausakzent Zinnober */
  --signal: #FF4A1F;
  --signal-ink: #FF4A1F;   /* Textzinnober, dunkler Modus: 6,0 zu 1 auf ground */

  /* Statusskala, reserviert */
  --ok: #2DBF7B;
  --warn: #C9A227;
  --bad: #E05341;

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --wrap: 1180px;
  --wrap-text: 720px;
  --radius: 16px;

  /* Hell, seit die ganze Website das Zeitungsbild traegt. color-scheme wirkt nur
     vom Wurzelelement aus; die Klasse .zeitung sitzt am body und erreicht die
     Bildlaufleiste des Ansichtsfensters nicht. Vorher stand hier "dark", und ein
     Besucher mit dunkler Systemeinstellung sah eine schwarze Leiste neben weissem
     Papier. */
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #F3F4EE;
    --surface: #FFFFFF;
    --surface-2: #E9EBE3;
    --line: #D8DBD1;
    --line-control: #767D6E;  /* Rahmen von Bedienelementen, 3,4 zu 1 auf ground hell */
    --text: #12161B;
    --muted: #5A6570;
    --signal-ink: #B32E0B;  /* Textzinnober, heller Modus: 5,7 zu 1 auf paper */
    --ok: #1B8A57;
    --bad: #B23222;
    color-scheme: light;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--signal); color: #05070A; font-weight: 640; padding: 10px 16px; z-index: 300;
}
.skip-link:focus { left: 12px; top: 12px; }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

/* Kopf */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; }
.brand { display: inline-flex; color: var(--text); }
.brand-logo { display: block; height: 28px; width: auto; }
.nav-list { display: flex; gap: 8px; list-style: none; align-items: center; flex-wrap: wrap; }
.nav-list a {
  display: inline-block; padding: 8px 14px; border-radius: 10px;
  text-decoration: none; font-size: 0.95rem; font-weight: 540; color: var(--muted);
}
.nav-list a:hover { color: var(--text); background: var(--surface-2); }
.nav-cta, .nav-list a.nav-cta { background: var(--signal); color: #05070A; font-weight: 660; }
.nav-list a.nav-cta:hover { background: #FF6A45; color: #05070A; }

/* Hero */

.eyebrow {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
h1 {
  font-size: clamp(2.4rem, 6vw, 3.9rem); line-height: 1.04;
  font-weight: 750; letter-spacing: -0.02em; max-width: 900px;
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 12px;
  font-weight: 640; text-decoration: none; font-size: 1.05rem;
  border: 1px solid transparent;
}
.btn-primary { background: var(--signal); color: #05070A; }
/* Die Zinnober-Hover fuer .btn-primary und .nav-cta sind am 24.08.2026
   entfallen. Seit die ganze Website das Zeitungsbild traegt, wuerde ein
   oranger Hover mitten auf Papier stehen; die Zustaende stehen jetzt im
   Zeitungsblock weiter unten. */
.btn-ghost { border-color: var(--line-control); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }

/* Abschnitte */
.section { padding-block: 88px; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.kicker {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--signal-ink); margin-bottom: 14px;
}
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 720; max-width: 820px; }
.section .intro { max-width: var(--wrap-text); margin-top: 20px; font-size: 1.15rem; }
h3 { font-size: 1.2rem; font-weight: 660; margin-bottom: 8px; }

/* Karten */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-top: 44px; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.section-alt .card { background: var(--ground); }
.card p { color: var(--muted); font-size: 1rem; }
.card-stats { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.card-stats li { font-family: var(--mono); font-size: 0.82rem; color: var(--text); }
.card-links { display: flex; gap: 16px; font-size: 0.92rem; margin-top: 8px; }
.card-links a { color: var(--signal-ink); text-decoration: none; font-weight: 600; }
.card-links a:hover { text-decoration: underline; }

/* Prüfzeilen (Arbeitsweise) */
.checks { list-style: none; margin-top: 40px; display: flex; flex-direction: column; gap: 0; max-width: 900px; }
.checks li {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 16px; align-items: baseline;
  padding: 18px 4px; border-bottom: 1px solid var(--line);
}
.checks li:first-child { border-top: 1px solid var(--line); }
.check-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); position: relative; top: -1px; }
.check-text strong { font-weight: 660; }
.check-text span { display: block; color: var(--muted); font-size: 0.98rem; }
.check-value { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

/* Fact-Grid */
.data-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-top: 40px;
}
.data-grid > div { background: var(--surface); padding: 18px 20px; }
.section-alt .data-grid > div { background: var(--ground); }
.data-grid dt { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--mono); }
.data-grid dd { margin-top: 6px; font-weight: 600; }
.data-grid dd a { color: var(--signal-ink); text-decoration: none; }
.data-grid dd a:hover { text-decoration: underline; }

/* Abgrenzung */
.not-box {
  margin-top: 44px; border: 1px solid var(--line); border-left: 3px solid var(--signal);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 26px 30px;
  background: var(--surface); max-width: 900px;
}
.not-box h3 { margin-bottom: 12px; }
.not-box p { color: var(--muted); }
.not-box p + p { margin-top: 10px; }
.not-box strong { color: var(--text); }

/* Kontakt */
.contact-block { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; margin-top: 44px; align-items: start; }
.contact-facts { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.contact-facts li { display: flex; flex-direction: column; }
.contact-facts .label { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.contact-facts a { color: var(--text); font-weight: 640; text-decoration: none; font-size: 1.15rem; }
.contact-facts a:hover { color: var(--signal-ink); }
@media (max-width: 760px) { .contact-block { grid-template-columns: 1fr; } }

/* Fußzeile */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 56px 32px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.footer-brand { font-weight: 740; font-size: 1.1rem; }
.footer-text, .site-footer li, .site-footer a { color: var(--muted); font-size: 0.95rem; }
.footer-head { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.footer-line { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; font-family: var(--mono); }

/* Hinweiskasten für Entwurfsseiten */

/* Textseiten */
.prose { max-width: var(--wrap-text); }
.prose h1, .prose h2, .prose h3, h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
.prose h2 { margin-top: 44px; font-size: 1.5rem; }
.prose p { margin-top: 14px; }
.prose address { font-style: normal; margin-top: 14px; line-height: 1.7; }

/* Animation als Vollbild (Bestandsseite) */
/* Breadcrumb */
.breadcrumb { border-bottom: 1px solid var(--line); font-size: 0.85rem; font-family: var(--mono); }
.breadcrumb .shell { padding-block: 10px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb [aria-current] { color: var(--text); }
.breadcrumb span[aria-hidden] { color: var(--muted); margin-inline: 4px; }

/* Seitenkopf der Unterseiten */
.page-head { padding-block: 64px 56px; }
.page-head h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
.page-head .intro { max-width: var(--wrap-text); margin-top: 20px; font-size: 1.2rem; }

/* FAQ */
.faq-head { margin-top: 72px; }
.faq-list { margin-top: 28px; max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary { cursor: pointer; padding: 16px 4px; list-style: none; display: flex; align-items: baseline; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; font-family: var(--mono); color: var(--signal-ink); font-weight: 700; }
.faq-item[open] summary::before { content: "\2212"; }
.faq-item summary h3 { margin: 0; font-size: 1.05rem; }
.faq-item p { padding: 0 4px 18px 28px; color: var(--muted); max-width: 720px; }
.faq-item summary:hover h3 { color: var(--signal-ink); }

/* Formular */
.contact-form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 0.92rem; font-weight: 620; }
.form-field input, .form-field textarea {
  background: var(--ground); color: var(--text);
  border: 1px solid var(--line-control); border-radius: 10px;
  padding: 12px 14px; font: inherit;
}
.form-field input:focus-visible, .form-field textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
.form-field [aria-invalid="true"] { border-color: var(--bad); }
.field-error, .form-error { color: var(--bad); font-size: 0.92rem; }
.form-error { border: 1px solid var(--bad); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; max-width: 560px; }
.form-hint { font-size: 0.85rem; color: var(--muted); max-width: 560px; }
.contact-form .btn { align-self: flex-start; }
.hp-wrap { position: absolute; left: -9999px; top: -9999px; height: 1px; overflow: hidden; }

/* Produktzeilen */
.product-rows { display: flex; flex-direction: column; gap: 0; }
.product-row { border-top: 1px solid var(--line); padding-block: 40px; }
.product-row:last-child { border-bottom: 1px solid var(--line); }
.product-row h2 { margin-bottom: 12px; }
.product-row p { max-width: var(--wrap-text); margin-top: 10px; }
.product-price { font-family: var(--mono); font-size: 0.9rem; color: var(--text); }
.product-links a { color: var(--signal-ink); font-weight: 620; text-decoration: none; margin-right: 18px; }
.product-links a:hover { text-decoration: underline; }

/* Zitat */
.quote { border-left: 3px solid var(--signal); padding: 6px 0 6px 26px; max-width: 720px; margin-top: 32px; }
.quote p { font-size: 1.25rem; line-height: 1.5; }
.quote footer { margin-top: 12px; color: var(--muted); font-family: var(--mono); font-size: 0.85rem; }

/* Pflichtfeld-Marker */
.req { color: var(--signal-ink); font-weight: 700; }
.form-legend { font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }

/* Grounding-Schicht nach GEOhybrid-Standard */
.grounding { padding-block: 72px; border-top: 1px solid var(--line); }
.lead-definition {
  max-width: var(--wrap-text); margin-top: 22px;
  font-size: 1.25rem; line-height: 1.55; font-weight: 560;
}
.human-notice {
  font-family: var(--mono); font-size: 0.82rem; color: var(--muted);
  border-left: 2px solid var(--line); padding-left: 14px; margin-bottom: 28px;
  max-width: var(--wrap-text);
}
.human-notice a { color: var(--signal-ink); }
.fact-grid time { font-variant-numeric: tabular-nums; }
.not-box h2 { font-size: 1.3rem; margin-bottom: 12px; }
.geo-badge { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.geo-badge a { color: var(--signal-ink); text-decoration: none; }
.geo-badge a:hover { text-decoration: underline; }

/* Kein Ausgleich fuer einen klebenden Kopf mehr noetig: .zeitung .site-header
   steht auf position: static. Ein Rest bleibt, damit ein Sprungziel nicht direkt
   an der Fensterkante klebt. */
html { scroll-padding-top: 16px; }

/* Mobil: die Prüfzeilen brechen um, statt den Beleg abzuschneiden.
   Vorher lief .check-value mit white-space nowrap aus dem Bild und war
   nicht erreichbar (WCAG 1.4.10 Reflow, gemessen 23.08.2026). */
@media (max-width: 720px) {
  .checks li { grid-template-columns: 14px 1fr; row-gap: 6px; }
  .check-value {
    grid-column: 2; white-space: normal;
    font-size: 0.78rem; color: var(--muted);
  }
  /* Der Kopf darf mobil nicht ein Drittel des Bildschirms fressen */
  .site-header { position: static; }
  .header-row { flex-wrap: wrap; gap: 12px; padding-block: 12px; }
  .nav-list { gap: 4px; width: 100%; }
  .nav-list a { padding: 7px 10px; font-size: 0.88rem; }
  .brand-logo { height: 24px; }
      .section, .grounding { padding-block: 56px; }
  .page-head { padding-block: 40px 36px; }
}

@media (max-width: 420px) {
  .check-value { font-size: 0.74rem; }
  .data-grid { grid-template-columns: 1fr; }
}

/* Fehler-Zusammenfassung über dem Formular */
.form-error ul { margin: 8px 0 0 20px; }
.form-error li { margin-top: 4px; }
.form-error a { color: var(--bad); }
.form-error:focus-visible { outline: 2px solid var(--bad); outline-offset: 3px; }

/* ==========================================================================
   Zeitung: die Startseite nach dem Entwurf vom 24.08.2026
   ==========================================================================

   Quelle ist der Claude-Design-Entwurf "JETZT.ai Startseite", vom Betreiber
   ausgewählt und als Paket übergeben. Übernommen wurden Farben, die beiden
   Schriften, das Raster, die Nummerierung der Ressorts und der geditherte
   Hintergrund im Kopf.

   Zwei Abweichungen vom Entwurf, beide aus verbindlichen Hausregeln:
   1. Alle Formatierungen liegen hier in Klassen. Der Entwurf arbeitet mit
      Inline-Styles, die die Content-Security-Policy dieser Website verbietet.
   2. Gedankenstriche im Fliesstext sind ersetzt. Der Entwurf setzt sie als
      Einschub, die Hausregel schliesst das aus.

   Die Startseite trägt genau ein Farbschema, so wie der Entwurf. Ein Besucher
   mit dunkler Systemeinstellung sieht dieselbe helle Zeitung, deshalb setzt
   .zeitung die Tokens für beide Schemata gleich.
   ========================================================================== */

.zeitung {
  --z-papier: #fcfcfa;
  --z-tinte: #111110;
  --z-tinte-weich: #33332f;
  --z-grau: #6b6b66;
  --z-grau-hell: #9a9a94;
  --z-linie: #d8d8d2;
  --z-linie-stark: #111110;

  --z-kopf: 'Nolte Headline', 'Ubuntu Local', Ubuntu, system-ui, sans-serif;
  --z-text: 'Ubuntu Local', Ubuntu, system-ui, 'Helvetica Neue', sans-serif;

  /* Die allgemeinen Token werden hier auf die Zeitungswerte umgelegt.
     Das ist die tragende Zeile fuer die Unterseiten: Sie benutzen die
     Bausteine des Bestands (.card, .checks, .product-row, .data-grid), und
     ueber diese Umlegung erben alle davon Papier, Tinte, die beiden
     Schriften und harte Kanten, ohne dass jede Regel doppelt existiert.
     Ohne sie stuenden dunkle Karten auf hellem Papier, weil die Token in
     :root weiter das dunkle Leitbild tragen. */
  --ground: #fcfcfa;
  --surface: #fcfcfa;
  --surface-2: #f1f1ec;
  --line: #d8d8d2;
  --line-control: #6b6b66;
  --text: #111110;
  --muted: #6b6b66;
  --signal: #111110;
  --signal-ink: #111110;
  --ok: #111110;
  --bad: #b23222;    /* Rot bleibt Rot, es traegt im Formular eine Bedeutung */
  --sans: var(--z-text);
  --mono: var(--z-kopf);
  --radius: 0;

  background: var(--z-papier);
  color: var(--z-tinte);
  font-family: var(--z-text);
  color-scheme: light;
}

.zeitung h1,
.zeitung h2,
.zeitung h3 { font-family: var(--z-kopf); }

.zeitung a { color: var(--z-tinte); }

.zeitung ::selection { background: var(--z-tinte); color: var(--z-papier); }

/* --- Kopf und Fuss der Website folgen dem Zeitungsbild ------------------- */

.zeitung .site-header {
  position: static;
  background: var(--z-papier);
  border-block-end: 2px solid var(--z-linie-stark);
  backdrop-filter: none;
}

.zeitung .header-row { padding-block: 14px; }

.zeitung .brand-logo { color: var(--z-tinte); }

.zeitung .nav-list a {
  font-family: var(--z-text);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--z-tinte);
  border-radius: 0;
  padding: 7px 10px;
}

.zeitung .nav-list a:hover { background: transparent; text-decoration: underline; }

.zeitung .nav-list a.nav-cta {
  background: var(--z-tinte);
  color: var(--z-papier);
  font-family: var(--z-kopf);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 9px 16px;
}

.zeitung .nav-list a.nav-cta:hover { background: var(--z-tinte-weich); color: var(--z-papier); }

.zeitung .site-footer {
  background: var(--z-papier);
  border-block-start: 2px solid var(--z-linie-stark);
  color: var(--z-grau);
  padding-block: 40px 28px;
}

/* Der Link traegt im Fliesstext der Fusszeile dieselbe Farbe wie der Text um ihn
   herum, gemessen 1,00 zu 1. Ohne Unterstreichung gibt es kein Merkmal, an dem er
   erkennbar waere. Die Listenlinks der Fusszeile stehen fuer sich und brauchen sie
   nicht. */
.zeitung .site-footer a { color: var(--z-grau); }
.zeitung .geo-badge a { text-decoration: underline; text-underline-offset: 2px; }

.zeitung .footer-line { border-block-start-color: var(--z-linie); }

/* --- Ressorts: volle Breite mit Trennlinie, Inhalt im Satzspiegel -------- */

.zeitung .ressort {
  border-block-end: 2px solid var(--z-linie-stark);
  padding-block: 0;
}

.zeitung .ressort .shell { padding-inline: 32px; }

/* Ressortkopf: Nummer, dann Titel, darunter eine feine Linie */
.zeitung-kopf {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 30px 16px;
  border-block-end: 1px solid var(--z-linie);
  margin-block-end: 26px;
}

.zeitung-nummer {
  font-family: var(--z-kopf);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--z-grau);
  flex: none;
}

.zeitung-kopf h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.zeitung-vorspann {
  margin: 0 0 30px;
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 60ch;
  color: var(--z-tinte-weich);
}

/* --- Kopf der Ausgabe (Hero) -------------------------------------------- */

.zeitung-hero {
  position: relative;
  overflow: hidden;
  border-block-end: 2px solid var(--z-linie-stark);
}

.zeitung-raster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.zeitung-hero .shell {
  position: relative;
  padding-block: clamp(56px, 8vw, 96px) clamp(44px, 6vw, 72px);
  padding-inline: 32px;
}

.zeitung-dach {
  font-family: var(--z-kopf);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  color: var(--z-grau);
  margin: 0 0 20px;
}

.zeitung-schlagzeile {
  font-size: clamp(2.75rem, 6.5vw, 5.75rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  max-width: 15ch;
  text-wrap: balance;
}

.zeitung-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.19rem);
  line-height: 1.5;
  max-width: 52ch;
  margin: 0 0 36px;
  color: var(--z-tinte-weich);
}

/* --- Schaltflächen ------------------------------------------------------ */

.zeitung .btn,
.zeitung .zeitung-knopf {
  font-family: var(--z-kopf);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  border-radius: 0;
  padding: 14px 26px;
  display: inline-block;
  text-decoration: none;
  border: 2px solid var(--z-tinte);
}

.zeitung a.zeitung-knopf--voll {
  background: var(--z-tinte);
  color: var(--z-papier);
}

.zeitung a.zeitung-knopf--voll:hover {
  background: var(--z-tinte-weich);
  border-color: var(--z-tinte-weich);
  color: var(--z-papier);
}

/* Kein eigenes Padding: Der leere Knopf erbt die 14px der Basisklasse. Bis zum
   27.08.2026 standen hier 12px, vermutlich als Hoehenausgleich fuer den
   sichtbaren Rahmen gedacht. Beide Varianten tragen aber denselben 2px-Rahmen,
   und die Knopfreihe ist ein Flex-Container, der ohnehin beide auf dieselbe
   Hoehe streckt. Gemessen: beide 51,8px hoch, aber der leere Knopf hatte oben
   und unten 2px weniger Innenabstand, wodurch seine Schrift sichtbar zu hoch
   in der gestreckten Box sass. */
.zeitung a.zeitung-knopf--leer {
  background: var(--z-papier);
  color: var(--z-tinte);
}

.zeitung a.zeitung-knopf--leer:hover { background: var(--z-tinte); color: var(--z-papier); }

.zeitung-knopfreihe {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- Ressort 01: die Beweiszahlen --------------------------------------- */

/* Feste Spaltenzahl statt auto-fit: Acht Beweiszahlen ergeben mit auto-fit je
   nach Fensterbreite Reihen wie 5 und 3, also eine angerissene letzte Zeile.
   Zwei und vier teilen die Acht auf. */
.zeitung-beweise {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-block-start: 1px solid var(--z-linie);
  margin-block-end: 34px;
}

.zeitung-beweis {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px 24px;
  border-inline-start: 1px solid var(--z-linie);
  border-block-end: 1px solid var(--z-linie);
}

.zeitung-beweis:first-child { border-inline-start: 0; }

@media (min-width: 700px) {
  .zeitung-beweise { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zeitung-beweis:nth-child(4n + 1) { border-inline-start: 0; }
}

.zeitung-zahl {
  font-family: var(--z-kopf);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.zeitung-beweis-text { font-size: 0.88rem; line-height: 1.35; margin: 0; }

.zeitung-beleg {
  font-size: 0.7rem;
  color: var(--z-grau);
  margin: auto 0 0;
}

/* --- Ressort 02: die zwei Leistungen ------------------------------------ */

.zeitung-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

@media (min-width: 860px) {
  .zeitung-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeitung-spalte:first-child { padding: 8px 40px 44px 0; border-inline-end: 1px solid var(--z-linie); }
  .zeitung-spalte + .zeitung-spalte { padding: 8px 0 44px 40px; }
}

.zeitung-spalte { padding-block: 8px 34px; min-width: 0; }

.zeitung-ueberzeile {
  font-family: var(--z-kopf);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--z-grau);
  margin: 0 0 10px;
}

.zeitung-spalte h3 {
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.zeitung-spalte p {
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0 0 20px;
  color: var(--z-tinte-weich);
}

.zeitung-fakten {
  font-size: 0.81rem;
  color: var(--z-grau);
  margin: 0 0 18px;
}

.zeitung-mehr {
  font-family: var(--z-kopf);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-block-end: 2px solid var(--z-tinte);
  padding-block-end: 3px;
}

.zeitung-mehr:hover { border-block-end-color: var(--z-grau); }

/* --- Ressort 03: die sieben Werkzeuge ----------------------------------- */

.zeitung-werkzeuge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-block-end: 44px;
}

.zeitung-werk {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}

.zeitung-werk-bild {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--z-linie);
  background: var(--z-papier);
  transition: border-color 200ms ease;
}

.zeitung-werk:hover .zeitung-werk-bild,
.zeitung-werk:focus-visible .zeitung-werk-bild { border-color: var(--z-tinte); }

.zeitung-werk-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--z-linie);
}

.zeitung-werk-kopf h3 {
  font-size: 1.19rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.zeitung-werk-domain {
  font-family: var(--z-kopf);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--z-grau);
  overflow-wrap: anywhere;
}

.zeitung-werk p {
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
  color: var(--z-tinte-weich);
}

.zeitung-werk-fakt {
  font-family: var(--z-kopf);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  color: var(--z-grau);
  margin: auto 0 0;
  padding-block-start: 8px;
}

/* --- Ressort 04: die vier Tore ------------------------------------------ */

/* Feste Spaltenzahl, wie bei .zeitung-beweise. Mit auto-fit fiel bei mittleren
   Fenstern ein Tor allein in eine zweite Zeile und behielt seine linke
   Trennlinie, weil :first-child nur das allererste Feld befreit. Vier Tore sind
   durch 2 und 4 teilbar, das geht immer auf. Beim Kartenraster geht dieselbe
   Loesung NICHT: dort schwankt die Zahl der Karten je Seite zwischen drei und
   vier, eine feste Spaltenzahl waere dann auf der anderen Seite falsch. */
.zeitung-tore {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-block-start: 1px solid var(--z-linie);
  margin-block-end: 44px;
}

.zeitung-tor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 28px;
  border-inline-start: 1px solid var(--z-linie);
  border-block-end: 1px solid var(--z-linie);
}

.zeitung-tor:first-child { border-inline-start: 0; }

/* Der Grundzustand steht auf ZWEI Spalten, also braucht er auch die Regel fuer
   zwei Spalten. Bis zum 26.08.2026 gab es nur :first-child und die Vierer-Regel
   ab 760 Pixel; dazwischen, also zwischen 721 und 759 Pixeln, trug Kachel 3 eine
   linke Linie mitten im Raster. Gemessen bei 740 Pixeln auf der Startseite,
   gefunden in Runde 6 als R6-E-6. */
.zeitung-tor:nth-child(2n + 1) { border-inline-start: 0; }

@media (min-width: 760px) {
  .zeitung-tore { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zeitung-tor:nth-child(2n + 1) { border-inline-start: 1px solid var(--z-linie); }
  .zeitung-tor:nth-child(4n + 1) { border-inline-start: 0; }
}

.zeitung-tor-nr {
  font-family: var(--z-kopf);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--z-grau);
}

/* h3 seit Runde 4: Die vier Tornamen fuehren je einen Abschnitt an und fehlten
   Screenreader-Nutzern in der Ueberschriftenliste (F2 zu SC 1.3.1). Die Groesse
   bleibt bewusst klein, die Rolle ist der Punkt, nicht die Optik. */
.zeitung-tor-name { font-size: 1rem; font-weight: 700; margin: 0; }

.zeitung-tor-text { font-size: 0.82rem; line-height: 1.45; color: var(--z-tinte-weich); margin: 0; }

/* --- Ressort 05: Kontakt, als einziges Feld in Tinte -------------------- */

.zeitung-kontakt {
  background: var(--z-tinte);
  color: var(--z-papier);
  border-block-end: 2px solid var(--z-linie-stark);
}

.zeitung-kontakt .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  padding-block: clamp(44px, 6vw, 68px);
  padding-inline: 32px;
}

@media (min-width: 860px) {
  .zeitung-kontakt .shell { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; }
}

.zeitung-kontakt h2 {
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.zeitung-kontakt p { margin: 0 0 28px; font-size: 1rem; line-height: 1.5; max-width: 46ch; }

.zeitung-kontakt .zeitung-dach { color: var(--z-grau-hell); }

.zeitung .zeitung-kontakt a.zeitung-knopf--voll {
  background: var(--z-papier);
  color: var(--z-tinte);
  border-color: var(--z-papier);
}

.zeitung .zeitung-kontakt a.zeitung-knopf--voll:hover {
  background: var(--z-linie);
  border-color: var(--z-linie);
  color: var(--z-tinte);
}

.zeitung-daten { display: flex; flex-direction: column; gap: 0; }

.zeitung-datenzeile {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 14px;
  border-block-end: 1px solid var(--z-tinte-weich);
  font-size: 0.94rem;
}

.zeitung-datenzeile:first-child { border-block-start: 1px solid var(--z-tinte-weich); }

.zeitung-datenzeile span:first-child { color: var(--z-grau-hell); }

.zeitung-kontakt a { color: var(--z-papier); }

/* --- Grounding-Block im Zeitungsbild ------------------------------------ */

.zeitung .grounding {
  padding-block: clamp(36px, 5vw, 56px);
  border-block-start: 0;
}

.zeitung .grounding .shell { padding-inline: 32px; }

.zeitung .human-notice,
.zeitung .data-grid,
.zeitung .not-box {
  font-family: var(--z-text);
  border-radius: 0;
}

.zeitung .data-grid { background: var(--z-linie); }

.zeitung .data-grid > div { background: var(--z-papier); }

.zeitung .data-grid dt { color: var(--z-grau); font-family: var(--z-kopf); }

.zeitung .not-box { border-color: var(--z-linie); border-inline-start: 3px solid var(--z-tinte); }

.zeitung .human-notice { border-inline-start-color: var(--z-linie); color: var(--z-grau); }

.zeitung .lead-definition { font-family: var(--z-text); color: var(--z-tinte-weich); }

.zeitung .eyebrow { font-family: var(--z-kopf); color: var(--z-grau); }

/* --- Fokus, sichtbar auf Papier ----------------------------------------- */

.zeitung a:focus-visible,
.zeitung button:focus-visible,
.zeitung summary:focus-visible {
  outline: 2px solid var(--z-tinte);
  outline-offset: 3px;
  border-radius: 0;
}

/* Im Kontaktfeld ist die Flaeche Tinte. Ein Fokusring in Tinte hat dort 1,00 zu 1
   und ist unsichtbar, auch am hellen Knopf, weil outline-offset positiv ist und
   den Ring nach aussen auf die Tinte legt. axe misst Fokuskontrast nicht, der
   gruene Lauf konnte das nicht sehen. Dasselbe gilt fuer die Markierung. */
.zeitung .zeitung-kontakt a:focus-visible,
.zeitung .zeitung-kontakt button:focus-visible {
  outline-color: var(--z-papier);
}

.zeitung .zeitung-kontakt ::selection {
  background: var(--z-papier);
  color: var(--z-tinte);
}

.zeitung .skip-link {
  background: var(--z-tinte);
  color: var(--z-papier);
  border-radius: 0;
}

/* --- Schmale Fenster ---------------------------------------------------- */

@media (max-width: 720px) {
  .zeitung .ressort .shell,
  .zeitung-hero .shell,
  .zeitung-kontakt .shell,
  .zeitung .grounding .shell { padding-inline: 20px; }

  .zeitung-beweis { border-inline-start: 0; }
  .zeitung-tor { border-inline-start: 0; }
  .zeitung-schlagzeile { max-width: none; }
}

/* --- Bewegung ----------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .zeitung-werk,
    .zeitung-spalte,
    .zeitung-tor {
      animation: zeitung-auf linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
  }
}

@keyframes zeitung-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hier lag bis zum 24.08.2026 eine Sonderregel fuer das siebte Werkzeug: Es
   blieb in einem Dreierraster als Einzelstueck uebrig und lag deshalb quer.
   Seit der Barrierefreiheits-Checker nicht mehr als Referenz gefuehrt wird,
   sind es sechs, und das Dreierraster geht glatt auf. */
@media (min-width: 1000px) {
  .zeitung-werkzeuge { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Zeitung auf den Unterseiten, 24.08.2026
   ==========================================================================

   Die neun Unterseiten benutzen die Bausteine des Bestands. Hier bekommen sie
   das Zeitungsbild der Startseite: Papier statt Flaechenwechsel, Trennung
   durch Linien statt durch Abstand, harte Kanten, die beiden Schriften.

   Drei Entscheidungen, die dieser Block umsetzt:

   1. Rechtstexte (Impressum, Datenschutz, Barrierefreiheit) bekommen dasselbe
      Papier und dieselben Schriften, aber keine Ressort-Nummern und keine
      Schlagzeilengroesse. Sie werden gelesen, nicht ueberflogen.
   2. Die Nummerierung der Ressorts laeuft auf den Inhaltsseiten weiter und
      beginnt je Seite bei 01. Sie zaehlt eine echte Abfolge ab, nicht Deko.
   3. .card-grid verliert Fuellung, Rundung und Luecke und wird zum Raster mit
      Haarlinien, wie die Beweiszahlen auf der Startseite.
   ========================================================================== */

/* --- Pfadzeile ---------------------------------------------------------- */

.zeitung .breadcrumb {
  border-block-end: 1px solid var(--z-linie);
  font-family: var(--z-kopf);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.zeitung .breadcrumb .shell { padding-block: 11px; padding-inline: 32px; }
.zeitung .breadcrumb a { color: var(--z-grau); text-decoration: none; }
.zeitung .breadcrumb a:hover { color: var(--z-tinte); text-decoration: underline; }
.zeitung .breadcrumb [aria-current] { color: var(--z-tinte); }

/* --- Abschnitte: getrennt durch Linien, nicht durch Flaechen ------------- */

.zeitung .section {
  padding-block: 0;
  background: var(--z-papier);
  border-block-end: 2px solid var(--z-linie-stark);
}

.zeitung .section > .shell {
  padding-inline: 32px;
  padding-block: clamp(30px, 4vw, 44px);
}

.zeitung .section-alt { border-block-start: 0; }

.zeitung .section .intro {
  max-width: 62ch;
  margin-block-start: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--z-tinte-weich);
}

.zeitung .section .intro + .intro { margin-block-start: 16px; }

/* Ein Ressortkopf bringt seinen eigenen Abstand mit, deshalb faengt er
   buendig am oberen Rand des Abschnitts an. */
.zeitung .section > .shell > .zeitung-kopf:first-child { padding-block-start: 4px; }

.zeitung .section h2 { font-family: var(--z-kopf); letter-spacing: -0.02em; }

/* --- Seitenkopf: der Titelkopf jeder Unterseite -------------------------- */

.zeitung .page-head > .shell {
  padding-block: clamp(38px, 5.5vw, 66px) clamp(28px, 3.5vw, 40px);
}

.zeitung .entity-head { display: block; }

.zeitung .page-head .eyebrow {
  font-family: var(--z-kopf);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--z-grau);
  margin-block-end: 18px;
}

.zeitung .page-head h1 {
  font-family: var(--z-kopf);
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 15ch;
  text-wrap: balance;
}

.zeitung .page-head .lead-definition {
  font-family: var(--z-text);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  font-weight: 400;
  line-height: 1.5;
  max-width: 56ch;
  margin-block-start: 22px;
  color: var(--z-tinte-weich);
}

.zeitung .page-head .intro {
  margin-block-start: 20px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--z-linie);
  max-width: 62ch;
}

/* --- Karten: Raster mit Haarlinien, ohne Fuellung und ohne Luecke -------- */

.zeitung .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  margin-block-start: 30px;
  border-block-start: 1px solid var(--z-linie);
}

.zeitung .card {
  background: transparent;
  border: 0;
  border-inline-start: 1px solid var(--z-linie);
  border-block-end: 1px solid var(--z-linie);
  border-radius: 0;
  padding: 22px 22px 26px;
  gap: 10px;
}

.zeitung .card:first-child { border-inline-start: 0; }

/* Die Aufnahme in der Karte. Die Karten auf /cybersecurity/ und /ki-entwicklung/
   benennen je ein laufendes Werkzeug; das Bild macht aus der Behauptung einen
   Beleg. Es steht unter der Ueberschrift, wie im Produktindex. */
.zeitung .karte-bild {
  display: block;
  width: 100%;
  height: auto;
  margin-block: 2px 4px;
  border: 1px solid var(--z-linie);
  background: var(--z-papier);
}

.zeitung .card h3 {
  font-family: var(--z-kopf);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-block-end: 0;
}

.zeitung .card p { font-size: 0.88rem; line-height: 1.5; color: var(--z-tinte-weich); }

.zeitung .card-stats {
  border-block-start: 1px solid var(--z-linie);
  padding-block-start: 10px;
}

.zeitung .card-stats li {
  font-family: var(--z-kopf);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--z-grau);
}

.zeitung .card-links a {
  font-family: var(--z-kopf);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--z-tinte);
  border-block-end: 2px solid var(--z-tinte);
  padding-block-end: 2px;
}

.zeitung .card-links a:hover { border-block-end-color: var(--z-grau); text-decoration: none; }

/* --- Pruefzeilen: die Tore und die Belege als Zeitungszeilen ------------- */

.zeitung .checks { margin-block-start: 28px; max-width: none; }

.zeitung .checks li {
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 18px;
  padding-block: 16px;
  border-block-end: 1px solid var(--z-linie);
}

.zeitung .checks li:first-child { border-block-start: 1px solid var(--z-linie); }

/* Der runde gruene Punkt wird zum eckigen Tintenzeichen. Gruen ist im Haus
   eine Statusfarbe und nie Gestaltungsmittel. */
.zeitung .check-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--z-tinte);
  top: 0;
}

.zeitung .check-text strong { font-weight: 700; }
.zeitung .check-text span { font-size: 0.88rem; line-height: 1.5; color: var(--z-tinte-weich); }

.zeitung .check-value {
  font-family: var(--z-kopf);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--z-grau);
}

/* --- Produktzeilen: der Index der sieben Werkzeuge ----------------------- */

.zeitung .product-rows { border-block-start: 1px solid var(--z-linie); }

.zeitung .product-row {
  border-block-start: 0;
  border-block-end: 1px solid var(--z-linie);
  padding-block: 26px 30px;
}

.zeitung .product-row:last-child { border-block-end: 0; }

.zeitung .produkt-kopf {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-block-end: 16px;
}

.zeitung .produkt-kopf h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.1;
  font-weight: 700;
}

.zeitung .product-row p {
  max-width: 68ch;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-block-start: 10px;
  color: var(--z-tinte-weich);
}

.zeitung .product-row p strong { color: var(--z-tinte); font-weight: 700; }

.zeitung .product-price {
  font-family: var(--z-kopf);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--z-grau);
  margin-block-start: 18px;
}

.zeitung .product-links { margin-block-start: 12px; display: flex; gap: 20px; flex-wrap: wrap; }

.zeitung .product-links a {
  font-family: var(--z-kopf);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--z-tinte);
  border-block-end: 2px solid var(--z-tinte);
  padding-block-end: 2px;
  margin-inline-end: 0;
}

.zeitung .product-links a:hover { border-block-end-color: var(--z-grau); text-decoration: none; }

/* --- Haeufige Fragen ----------------------------------------------------- */

.zeitung .faq-head { margin-block-start: 0; }
.zeitung .faq-list { margin-block-start: 0; max-width: none; }

.zeitung .faq-item { border-block-end: 1px solid var(--z-linie); }
.zeitung .faq-item:first-child { border-block-start: 1px solid var(--z-linie); }

.zeitung .faq-item summary { padding-block: 15px; gap: 14px; }
.zeitung .faq-item summary::before { color: var(--z-tinte); font-family: var(--z-kopf); }

.zeitung .faq-item summary h3 {
  font-family: var(--z-kopf);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.zeitung .faq-item summary:hover h3 { color: var(--z-tinte); text-decoration: underline; }

.zeitung .faq-item p {
  padding: 0 4px 18px 30px;
  max-width: 68ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--z-tinte-weich);
}

/* --- Schaltflaechen aus dem Bestand ------------------------------------- */

.zeitung .cta-row { margin-block-start: 30px; gap: 14px; }

/* Ohne Elementnamen im Selektor. Der Absendeknopf des Formulars ist ein
   <button>, kein <a>: Mit "a.btn" traf ihn keine dieser Regeln, er blieb bei
   .btn-primary aus dem Bestand und stand als Tinte auf Tinte da, unlesbar.
   Derselbe Fehlergriff wie beim Knopf auf der Startseite am 24.08.2026. */
.zeitung .btn {
  font-family: var(--z-kopf);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  font-weight: 400;
  border-radius: 0;
  border: 2px solid var(--z-tinte);
  padding: 14px 26px;
  cursor: pointer;
}

.zeitung .btn-primary { background: var(--z-tinte); color: var(--z-papier); }

.zeitung .cta-row .btn-primary:hover,
.zeitung .btn-primary:hover {
  background: var(--z-tinte-weich);
  border-color: var(--z-tinte-weich);
  color: var(--z-papier);
}

.zeitung .btn-ghost { background: var(--z-papier); color: var(--z-tinte); border-color: var(--z-tinte); }
.zeitung .btn-ghost:hover { background: var(--z-tinte); color: var(--z-papier); border-color: var(--z-tinte); }

/* --- Kundenzitat --------------------------------------------------------- */

.zeitung .quote {
  border-inline-start: 3px solid var(--z-tinte);
  padding: 4px 0 4px 26px;
  margin-block-start: 26px;
  max-width: 60ch;
}

.zeitung .quote p { font-family: var(--z-kopf); font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.3; }

.zeitung .quote footer {
  font-family: var(--z-kopf);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--z-grau);
}

/* --- Kontaktseite -------------------------------------------------------- */

.zeitung .contact-block {
  gap: 0;
  margin-block-start: 26px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

/* Gebrochener Wert mit Absicht: Skeptiker 1 hat gemessen, dass innerWidth auf
   ganze Pixel einrastet, der Befund war insofern widerlegt. Zoomstufen koennen
   aber gebrochene Layoutbreiten erzeugen, und die Zeile kostet nichts. */
@media (min-width: 760.05px) {
  .zeitung .contact-block > div:first-child { padding-inline-end: 44px; }
  .zeitung .contact-block > .contact-facts {
    padding-inline-start: 44px;
    border-inline-start: 1px solid var(--z-linie);
  }
}

.zeitung .contact-form { gap: 16px; max-width: 100%; }
.zeitung .form-field label { font-family: var(--z-kopf); font-size: 0.78rem; letter-spacing: 0.04em; }

.zeitung .form-field input,
.zeitung .form-field textarea {
  border-radius: 0;
  border: 1px solid var(--z-tinte);
  background: var(--z-papier);
  color: var(--z-tinte);
  font-family: var(--z-text);
}

/* Hoehere Spezifitaet als .zeitung .form-field input, sonst gewinnt die
   Zeitungsregel und die Regel darueber behauptet eine Farbe, die nie erscheint. */
.zeitung .form-field input[aria-invalid="true"],
.zeitung .form-field textarea[aria-invalid="true"] {
  border-color: var(--bad);
}

.zeitung .form-field input:focus-visible,
.zeitung .form-field textarea:focus-visible {
  outline: 2px solid var(--z-tinte);
  outline-offset: 1px;
  border-color: var(--z-tinte);
}

.zeitung .form-hint,
.zeitung .form-legend { font-size: 0.8rem; color: var(--z-grau); }

.zeitung .req { color: var(--z-tinte); }
.zeitung .form-error a { color: var(--bad); }
.zeitung .form-error { border-radius: 0; }

.zeitung .contact-facts { gap: 0; }

.zeitung .contact-facts li {
  padding-block: 14px;
  border-block-end: 1px solid var(--z-linie);
}

.zeitung .contact-facts li:first-child { border-block-start: 1px solid var(--z-linie); }

.zeitung .contact-facts .label {
  font-family: var(--z-kopf);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--z-grau);
  margin-block-end: 4px;
}

.zeitung .contact-facts a { font-family: var(--z-kopf); font-size: 1.02rem; font-weight: 400; }
.zeitung .contact-facts a:hover { color: var(--z-tinte); text-decoration: underline; }

/* --- Fliesstext: Rechtstexte und kurze Meldeseiten ----------------------- */

/* Der Rechtstext ist ein <div class="shell prose">, also zugleich der
   Satzspiegel. Eine Breitenbegrenzung auf .prose selbst wuerde die ganze
   Spalte in der Mitte des Fensters zentrieren, waehrend Kopf, Fuss und alle
   anderen Seiten links am Satzspiegel stehen. Deshalb behaelt .prose die
   Breite des Satzspiegels, und die Begrenzung sitzt an den Kindern. */
.zeitung .prose { max-width: var(--wrap); }
.zeitung .prose > * { max-width: 68ch; }

.zeitung .prose .zeitung-dach { margin-block-end: 16px; text-transform: uppercase; }

.zeitung .prose h1 {
  font-family: var(--z-kopf);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.zeitung .prose h2 {
  font-family: var(--z-kopf);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-block-start: 36px;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--z-linie);
}

.zeitung .prose h1 + p { margin-block-start: 22px; }

.zeitung .prose p,
.zeitung .prose address {
  font-size: 0.94rem;
  line-height: 1.65;
  margin-block-start: 12px;
  color: var(--z-tinte-weich);
}

.zeitung .prose strong { color: var(--z-tinte); }
.zeitung .prose a { text-decoration: underline; text-underline-offset: 2px; }

.zeitung .kicker {
  font-family: var(--z-kopf);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--z-grau);
  margin-block-end: 16px;
}

/* --- Grounding-Block auf den Unterseiten --------------------------------- */

.zeitung .grounding { border-block-end: 0; }
.zeitung .grounding h2 { font-size: 1.15rem; }

.zeitung .human-notice { font-size: 0.82rem; }

/* Das Fact-Grid zeichnet seine Linien jetzt an den Zellen statt als
   1px-Luecke ueber einer eingefaerbten Flaeche. Die alte Technik liess in der
   letzten Zeile ein graues Loch stehen, sobald die Zahl der Paare nicht durch
   die Spaltenzahl teilbar war. Bei /kontakt/ war das sichtbar: neun Paare in
   vier Spalten, drei leere Felder als graue Flaeche. */
.zeitung .data-grid {
  margin-block-start: 20px;
  gap: 0;
  background: transparent;
  border: 0;
  border-block-start: 1px solid var(--z-linie);
  border-block-end: 1px solid var(--z-linie);
  border-inline-start: 1px solid var(--z-linie);
  overflow: visible;
}

.zeitung .data-grid > div {
  background: transparent;
  border-inline-end: 1px solid var(--z-linie);
  border-block-end: 1px solid var(--z-linie);
  padding: 15px 18px;
}

.zeitung .data-grid dt { font-size: 0.66rem; letter-spacing: 0.07em; }
.zeitung .data-grid dd { font-size: 0.92rem; }
.zeitung .not-box { margin-block-start: 30px; max-width: 78ch; }
.zeitung .not-box p { color: var(--z-tinte-weich); font-size: 0.92rem; line-height: 1.6; }

/* --- Der Satzspiegel wird ausgenutzt ------------------------------------ */

/* Eine Zeitung laesst keine halbe Seite leer. Fliesstext bekommt deshalb ab
   900px zwei Spalten mit Spaltenlinie, statt als schmale Saeule links zu
   stehen und rechts eine tote Haelfte zu lassen. Karten, Pruefzeilen und das
   Fact-Grid nutzen die Breite schon von selbst, Fliesstext nicht. */
.zeitung-satz > .intro:first-child { margin-block-start: 0; }

@media (min-width: 900px) {
  .zeitung-satz {
    columns: 2;
    column-gap: 56px;
    column-rule: 1px solid var(--z-linie);
  }

  .zeitung .zeitung-satz .intro { max-width: none; }

  /* Der Seitenkopf als Titelkopf: Schlagzeile links, Vorspann rechts.
     Das :not(.prose) ist der ganze Punkt. Die Regel ist fuer genau zwei Kinder
     gebaut, Entitaetskopf und Vorspann. /kontakt/danke/ traegt an derselben
     Stelle eine Fliesstext-Schale mit fuenf Kindern, und die zerfiel dadurch ab
     900px: Dachzeile allein unten links, Schlagzeile rechts daneben und hoeher,
     Knopfreihe allein in Spalte eins. Genau die Seite, auf der jeder Absender
     landet, und sie wurde beim Umbau nie angesehen. */
  .zeitung .page-head > .shell:not(.prose) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: end;
  }

  .zeitung .page-head .intro {
    margin-block-start: 0;
    padding-block-start: 0;
    padding-inline-start: 40px;
    border-block-start: 0;
    border-inline-start: 1px solid var(--z-linie);
    max-width: none;
  }

  /* Produktzeile: links der Eintrag im Index, rechts die Beschreibung. */
  .zeitung .product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
    column-gap: 56px;
    align-items: start;
  }

  .zeitung .produkt-text {
    border-inline-start: 1px solid var(--z-linie);
    padding-inline-start: 40px;
  }

  .zeitung .product-row p { max-width: none; }
}

.zeitung .produkt-text > p:first-child { margin-block-start: 0; }
.zeitung .produkt-meta .product-price { margin-block-start: 14px; }

/* Die Aufnahme im Index. Sie steht unter dem Namen, nicht daneben: Der Eintrag
   liest sich damit wie eine Zeitungsmeldung mit Bild, und die Spalte bleibt
   schmal genug fuer Preis und Links darunter. */
.zeitung .produkt-bild {
  display: block;
  width: 100%;
  height: auto;
  margin-block-start: 4px;
  border: 1px solid var(--z-linie);
  background: var(--z-papier);
}

/* --- Schmale Fenster ---------------------------------------------------- */

@media (max-width: 760px) {
  .zeitung .contact-block { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

@media (max-width: 720px) {
  .zeitung .section > .shell,
  .zeitung .breadcrumb .shell { padding-inline: 20px; }

  .zeitung .card { border-inline-start: 0; }
  .zeitung .produkt-kopf { gap: 12px; }
  .zeitung .checks li { grid-template-columns: 10px minmax(0, 1fr); row-gap: 6px; }
  .zeitung .page-head h1 { max-width: none; }
}

/* Feste Spaltenzahl statt auto-fit, damit die erste Karte JEDER Zeile ohne
   linke Linie auskommt. Mit auto-fit kennt CSS die Spaltenzahl nicht, und
   ":first-child" traf nur die allererste Karte: Auf /cybersecurity/ stand
   Karte 4 in der zweiten Zeile ganz links und trug trotzdem eine Linie
   (gemessen am 26.08.2026 bei 900 px: x=32, border-left 1px, waehrend Karte 1
   bei x=32 0px hatte). Fuer .zeitung-beweise und .zeitung-tore war das laengst
   so geloest, fuer .card-grid nicht. Gefunden in Runde 5 als B9-R5-8. */
@media (min-width: 721px) {
  .zeitung .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeitung .card:nth-child(2n + 1) { border-inline-start: 0; }
}

@media (min-width: 1000px) {
  .zeitung .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zeitung .card:nth-child(2n + 1) { border-inline-start: 1px solid var(--z-linie); }
  .zeitung .card:nth-child(3n + 1) { border-inline-start: 0; }
}


/* Kennzeichnung nach Artikel 50 der EU-KI-Verordnung. llms.txt, /arbeitsweise/
   und /ki-entwicklung/ sagen zu, dass eigene KI-Inhalte gekennzeichnet werden.
   Bis zum 26.08.2026 trug keine der elf Seiten eine solche Kennzeichnung; die
   einzigen Treffer waren die Ankuendigung selbst. Gefunden in Runde 6 als
   R6-D-3. */
.ki-hinweis {
  display: inline-block;
  margin-block-start: 4px;
  font-size: 0.82em;
}

/* Die drei Bildzeichen zur KI-Kennzeichnung, dieselben wie auf helptool.de.
   Die Vorlagen dort tragen eine helle Flaeche fuer dunklen Grund. Hier stehen
   sie auf Papier, deshalb sind Flaeche und Zeichen getauscht; die Dateien in
   public/assets/img/ki-kennzeichen/ sind bereits so abgelegt und brauchen
   keinen Filter, der bei einem Schemawechsel wieder verrutschen wuerde.
   Die Hoehe steht hier, das Seitenverhaeltnis in den width/height-Attributen
   des Markups. So kennt der Browser den Platz vor dem Laden und die Zeile
   springt nicht (CLS). */
.ki-kennzeichen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-block-start: 28px;
}

.ki-kennzeichen img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
}

/* Kennzeichnung nach Artikel 50 der EU-KI-Verordnung. llms.txt, /arbeitsweise/
   und /ki-entwicklung/ sagen zu, dass eigene KI-Inhalte gekennzeichnet werden.
   Bis zum 26.08.2026 trug keine der elf Seiten eine solche Kennzeichnung; die
   einzigen Treffer waren die Ankuendigung selbst. Gefunden in Runde 6 als
   R6-D-3. */
.ki-hinweis {
  display: inline-block;
  margin-block-start: 4px;
  font-size: 0.82em;
}

/* Die drei Bildzeichen zur KI-Kennzeichnung, dieselben wie auf helptool.de.
   Die Vorlagen dort tragen eine helle Flaeche fuer dunklen Grund. Hier stehen
   sie auf Papier, deshalb sind Flaeche und Zeichen getauscht; die Dateien in
   public/assets/img/ki-kennzeichen/ sind bereits so abgelegt und brauchen
   keinen Filter, der bei einem Schemawechsel wieder verrutschen wuerde.
   Die Hoehe steht hier, das Seitenverhaeltnis in den width/height-Attributen
   des Markups. So kennt der Browser den Platz vor dem Laden und die Zeile
   springt nicht (CLS). */
.ki-kennzeichen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-block-start: 28px;
}

.ki-kennzeichen img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
}