/* ==========================================================================
   Base — Reset, Grundtypografie, Fokus, Bilder
   ========================================================================== */

/* --- Schreibschrift des Hero-Zitats --------------------------------------
   „Dry Brush" von Levi Szekeres, selbst gehostet — kein Fremdrequest.
   Die Datei ist auf die 30 Zeichen des Zitats reduziert (39 KB statt 661 KB),
   erzeugt von _tmp/new-advertising/_build/rebuild_schrift.py.
   font-display: swap — das Zitat ist sofort lesbar, die Schrift tauscht nach.
   Lizenz noch zu klären: assets/fonts/LIZENZ-dry-brush.txt              */
@font-face {
  font-family: "NA Script";
  src: url("../assets/fonts/dry-brush.woff2") format("woff2"),
       url("../assets/fonts/dry-brush.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

/* [hidden] muss jede display-Regel schlagen. Ohne das hier setzt sich zum
   Beispiel .btn { display: inline-flex } durch und das Element bleibt sichtbar,
   obwohl das Attribut gesetzt ist. */
[hidden] { display: none !important; }

/* Letzte Sicherung gegen waagerechtes Scrollen. Das Layout rechnet bewusst
   nirgends mit vw-Einheiten — 100vw schließt die Rollbalkenbreite mit ein,
   clientWidth nicht, und genau diese Differenz erzeugt sonst eine Scrollleiste.
   clip statt hidden: hidden würde aus dem Body einen Scrollcontainer machen
   und position: sticky im Header aushebeln. */
html, body { overflow-x: clip; max-width: 100%; }

/* Der senkrechte Rollbalken bekommt seinen Platz immer, auch auf Seiten, die
   (noch) nicht scrollen. Ohne das hier ist .container mal 100% der vollen
   Fensterbreite (kurze Seite, kein Rollbalken) und mal 100% abzüglich der
   Rollbalkenbreite (lange Seite) — beim Wechsel zwischen zwei Unterseiten mit
   unterschiedlicher Länge springt dadurch die ganze Kopfzeile sichtbar zur
   Seite. scrollbar-gutter ist die modernere Formulierung; overflow-y: scroll
   erzwingt denselben Effekt auch dort, wo scrollbar-gutter (noch) nicht
   unterstützt wird. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungmarken landen sonst unter der klebenden Kopfzeile */
  scroll-padding-top: calc(var(--header-h, 76px) + var(--s-4));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- Überschriften ------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-head);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); line-height: var(--leading-tight); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol, dl, blockquote, figure, table { margin: 0 0 var(--s-3); }
p { max-width: var(--measure); text-wrap: pretty; }
/* Ohne das hier ragen unbrechbare lange Zeichenketten - eine lange URL als
   sichtbarer Linktext, eine E-Mail-Adresse - auf schmalen Bildschirmen über
   den Rand hinaus: Punkte und Schrägstriche sind fuer den Browser keine
   Umbruchstelle. Gefunden im Datenschutztext (marketingplatform.google.com/
   about/analytics/terms/de, 390px). break-word statt anywhere: bricht nur,
   wenn normales Umbrechen die Zeile nicht fuellen kann, sonst unveraendert. */
p, li, td, dt, dd { overflow-wrap: break-word; }
/* Dieselbe Absicherung fehlte bislang bei Überschriften. Lange zusammen-
   gesetzte deutsche Wörter ohne Leerzeichen ("Pagespeedoptimierung",
   "Datenschutzerklärung") haben für den Browser keine Umbruchstelle; auf
   schmalen Bildschirmen wurde das Wortende dadurch nicht umgebrochen, sondern
   spurlos abgeschnitten (kombiniert mit html,body{overflow-x:clip} entstand
   keine Scrollleiste, die den Fehler sichtbar gemacht hätte - gefunden erst
   bei der visuellen Prüfung vom 22.08.2026, Workflow "site-review", auf den
   H1 von datenschutz/index.html und blog/pagespeedoptimierung-…-enfold). */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

strong, b { font-weight: 650; }
small { font-size: var(--step--1); }

/* --- Links --------------------------------------------------------------
   Im Fließtext mit Unterstreichung, die beim Hover kräftiger wird.
   Der Akzent ist auf Weiß zu hell für Text — deshalb bleibt die Schrift
   dunkel und der Akzent liegt in der Linie.                              */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--accent);
  transition: text-decoration-thickness var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
a:hover { text-decoration-thickness: 3px; }

/* --- Fokus: immer sichtbar, nie entfernt -------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.is-dark :focus-visible { outline-color: var(--accent); }

/* --- Medien ------------------------------------------------------------- */
img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}
img { background: var(--paper-2); }   /* verhindert weißes Aufblitzen */

/* --- Listen ------------------------------------------------------------- */
ul, ol { padding-left: 1.2em; }
li + li { margin-top: var(--s-1); }

/* --- Hilfsklassen ------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s-2); top: -100px;
  z-index: calc(var(--z-header) + 10);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-2) var(--s-3);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: var(--s-2); }

::selection { background: var(--accent); color: var(--accent-ink); }