/*
Theme Name:   TextNetz Crossmedia
Theme URI:    https://crossmedia.textnetz.de
Description:  Child-Theme für Divi 5 — Design-System, Faden, Hintergrundwörter, fluide Typografie.
Author:       TextNetz KG
Template:     Divi
Version:      1.0.0
Text Domain:  tn-crossmedia
*/

/* ============================================================
   1 · Schriften (lokal, DSGVO-konform)
   Dateien erwartet in: fonts/ — siehe README.md
   ============================================================ */
/* Divis Icon-Schrift ETmodules neu deklariert.
   Divi liefert sie nur als eot/woff/ttf/svg aus — das woff wiegt 92 KB und war
   nach dem Logo der zweitgrösste Brocken der Seite. Dieselbe Schrift, gleicher
   Zeichenvorrat (alle 410 Glyphen), nur als woff2 gepackt: 29 KB.
   Erzeugt aus Divi/core/admin/fonts/modules/all/modules.ttf mit fontTools.
   Steht hier vor den eigenen Schriften, weil es Divis Deklaration überschreibt —
   das Child-Stylesheet lädt nach Divis Kopf-CSS, sonst greift es nicht.
   Nach einem Divi-Update prüfen, ob neue Symbole dazugekommen sind; dann die
   Datei neu erzeugen. Zur Not diesen Block löschen, dann lädt wieder Divis woff. */
@font-face { font-family: "ETmodules"; src: url("fonts/etmodules.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: "Petrona"; src: url("fonts/petrona-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Petrona"; src: url("fonts/petrona-300italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Petrona"; src: url("fonts/petrona-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/librefranklin-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/librefranklin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ============================================================
   2 · Design-System
   ============================================================ */
:root {
  /* Farben */
  --tn-paper:  #fffefb;
  --tn-ink:    #151509;
  --tn-body:   #39382c;
  /* #8a8776 kam auf dem Papierton nur auf 3,59:1 und lag damit unter den
     4,5:1, die kleiner Text braucht (WCAG 1.4.3). Gemessen 06.08.2026 an
     Fusszeile, Anschrift, Bildunterschriften und den Kleinlabels. Gleicher
     Farbton, nur dunkler: 5,23:1. */
  --tn-muted:  #6f6c5e;
  --tn-accent: #f7a403;
  /* Das Akzentorange traegt als Flaeche, aber nicht als Linie oder Schrift:
     auf dem Papierton sind es 2,03:1. Fuer alles, was Bedeutung traegt —
     Fokusringe, Bedienlinien, Ziffern — deshalb zwei dunklere Geschwister. */
  --tn-accent-line: #b87a02;  /* 3,58:1 — Linien und Fokus (WCAG 1.4.11) */
  --tn-accent-ink:  #a16b02;  /* 4,51:1 — Akzentorange als Text */
  --tn-line:   #e7e2d2;
  --tn-layer:  #f6f3e7;
  --tn-hover:  #b57601;

  /* Schriften */
  --tn-serif: "Petrona", Georgia, serif;
  --tn-sans:  "Libre Franklin", -apple-system, sans-serif;

  /* Raster */
  --tn-pad:    clamp(22px, 6vw, 88px);
  --tn-gutter: clamp(24px, 4.4vw, 64px);
  /* Breiteste Satzbreite. Steht hier einmal, damit Deckelung, Bezugsbreite
     und alles, was sich am Seitenrand ausrichtet, dieselbe Zahl benutzen. */
  --tn-max:    1680px;

  /* Abstände */
  --tn-sec-gap:  clamp(92px, 14.5vw, 210px);
  --tn-sec-gap-s: clamp(88px, 14vw, 200px);
  --tn-block:   clamp(24px, 4.4vw, 64px);
  --tn-text:    clamp(22px, 2.6vw, 32px);

  /* Typo-Stufen */
  --tn-t-xl: clamp(38px, 6.6vw, 92px);
  --tn-t-l:  clamp(32px, 4.7vw, 64px);
  --tn-t-m:  clamp(26px, 3.4vw, 44px);
  --tn-t-s:  clamp(24px, 2.9vw, 38px);
  --tn-t-lead: clamp(20px, 2vw, 26px);
  --tn-t-body: clamp(16.5px, 1.35vw, 18px);
  --tn-t-cap:  clamp(14px, 1.1vw, 15px);

  /* Satzbreiten */
  --tn-w-text:    640px;
  --tn-w-display: 1100px;

  /* Bezugsbreite für alles, was sich mit dem Fenster dehnt.
     Unterhalb der Deckelung ist sie die Fensterbreite, darüber steht sie still —
     sonst wandern die Fadenachsen auf breiten Schirmen immer weiter auseinander
     und die Komposition zerreisst. Gedeckelt wird in Abschnitt 18. */
  --tn-vw: 100vw;

  /* Fadenachsen — links laufen sie auf 16 px zusammen, rechts an die Kante */
  --tn-a14: max(16px, var(--tn-vw) * 0.14 - max(0px, 1440px - var(--tn-vw)) * 0.14);
  --tn-a18: max(16px, var(--tn-vw) * 0.18 - max(0px, 1440px - var(--tn-vw)) * 0.19);
  --tn-a22: max(16px, var(--tn-vw) * 0.22 - max(0px, 1440px - var(--tn-vw)) * 0.23);
  --tn-a26: max(16px, var(--tn-vw) * 0.26 - max(0px, 1440px - var(--tn-vw)) * 0.28);
  --tn-a30: max(16px, var(--tn-vw) * 0.30 - max(0px, 1440px - var(--tn-vw)) * 0.33);
  --tn-a34: max(16px, var(--tn-vw) * 0.34 - max(0px, 1440px - var(--tn-vw)) * 0.37);
  --tn-a48: max(16px, var(--tn-vw) * 0.48 - max(0px, 1440px - var(--tn-vw)) * 0.53);
  --tn-r62: min(var(--tn-vw) * 0.62 + max(0px, 1440px - var(--tn-vw)) * 0.39, var(--tn-vw) - 34px);
  --tn-r70: min(var(--tn-vw) * 0.70 + max(0px, 1440px - var(--tn-vw)) * 0.3, var(--tn-vw) - 34px);
  --tn-r74: min(var(--tn-vw) * 0.74 + max(0px, 1440px - var(--tn-vw)) * 0.25, var(--tn-vw) - 34px);
}

/* ============================================================
   3 · Grundlagen
   ============================================================ */
body, #page-container { background: var(--tn-paper); color: var(--tn-ink); }
body, .et_pb_text, .et_pb_module p { font-family: var(--tn-sans); font-weight: 300; }
body a { color: var(--tn-ink); text-decoration: none; }
body a:hover { color: var(--tn-hover); }
#main-content { overflow-x: clip; overflow-wrap: break-word; }

/* ============================================================
   4 · Der Faden
   Zwei Klassen pro Abschnitt, z. B.:  tn-sec tn-axis-22 tn-join-22-62
   – tn-axis-*  = senkrechte Achse dieses Abschnitts (Ziel des Verbinders)
   – tn-join-*  = Querverbinder von der Achse des vorigen Abschnitts
   Erster Abschnitt einer Seite: nur tn-axis-*, kein tn-join.
   ============================================================ */
.tn-sec {
  position: relative;
  --tn-axis: var(--tn-a22);
  --tn-join-from: var(--tn-a22);
  --tn-join-w: 0px;
  background-image:
    linear-gradient(to right, var(--tn-line), var(--tn-line)),
    linear-gradient(to right, var(--tn-line), var(--tn-line));
  background-repeat: no-repeat, no-repeat;
  background-position: var(--tn-axis) 0, var(--tn-join-from) 0;
  background-size: 1px 100%, var(--tn-join-w) 1px;
}
/* Knoten */
.tn-sec::before {
  content: "";
  position: absolute;
  left: calc(var(--tn-axis) - 5px);
  top: -5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--tn-accent);
  z-index: 1;
  pointer-events: none;
}
/* Erster Abschnitt: Faden beginnt unter der Headline statt an der Oberkante */
.tn-sec--start { background-size: 1px 100%, 0 0; }
.tn-sec--start::before { top: 0; }

/* Letzter Abschnitt: kurzer Stummel, Knoten am Ende */
.tn-sec--end {
  background-size: 1px clamp(80px, 10vw, 150px), var(--tn-join-w) 1px;
}
.tn-sec--end::before {
  top: calc(clamp(80px, 10vw, 150px) - 6px);
  left: calc(var(--tn-axis) - 6px);
  width: 13px;
  height: 13px;
}
/* Kein Achsenwechsel: Verbinder unterdrücken */
.tn-join-none { --tn-join-w: 0px; }

.tn-axis-14 { --tn-axis: var(--tn-a14); }
.tn-axis-18 { --tn-axis: var(--tn-a18); }
.tn-axis-22 { --tn-axis: var(--tn-a22); }
.tn-axis-26 { --tn-axis: var(--tn-a26); }
.tn-axis-30 { --tn-axis: var(--tn-a30); }
.tn-axis-34 { --tn-axis: var(--tn-a34); }
.tn-axis-48 { --tn-axis: var(--tn-a48); }
.tn-axis-62 { --tn-axis: var(--tn-r62); }
.tn-axis-70 { --tn-axis: var(--tn-r70); }
.tn-axis-74 { --tn-axis: var(--tn-r74); }
.tn-join-14-18 { --tn-join-from: var(--tn-a14); --tn-join-w: calc(var(--tn-a18) - var(--tn-a14)); }
.tn-join-14-22 { --tn-join-from: var(--tn-a14); --tn-join-w: calc(var(--tn-a22) - var(--tn-a14)); }
.tn-join-14-26 { --tn-join-from: var(--tn-a14); --tn-join-w: calc(var(--tn-a26) - var(--tn-a14)); }
.tn-join-14-30 { --tn-join-from: var(--tn-a14); --tn-join-w: calc(var(--tn-a30) - var(--tn-a14)); }
.tn-join-14-34 { --tn-join-from: var(--tn-a14); --tn-join-w: calc(var(--tn-a34) - var(--tn-a14)); }
.tn-join-14-48 { --tn-join-from: var(--tn-a14); --tn-join-w: calc(var(--tn-a48) - var(--tn-a14)); }
.tn-join-14-62 { --tn-join-from: var(--tn-a14); --tn-join-w: calc(var(--tn-r62) - var(--tn-a14)); }
.tn-join-14-70 { --tn-join-from: var(--tn-a14); --tn-join-w: calc(var(--tn-r70) - var(--tn-a14)); }
.tn-join-14-74 { --tn-join-from: var(--tn-a14); --tn-join-w: calc(var(--tn-r74) - var(--tn-a14)); }
.tn-join-18-22 { --tn-join-from: var(--tn-a18); --tn-join-w: calc(var(--tn-a22) - var(--tn-a18)); }
.tn-join-18-26 { --tn-join-from: var(--tn-a18); --tn-join-w: calc(var(--tn-a26) - var(--tn-a18)); }
.tn-join-18-30 { --tn-join-from: var(--tn-a18); --tn-join-w: calc(var(--tn-a30) - var(--tn-a18)); }
.tn-join-18-34 { --tn-join-from: var(--tn-a18); --tn-join-w: calc(var(--tn-a34) - var(--tn-a18)); }
.tn-join-18-48 { --tn-join-from: var(--tn-a18); --tn-join-w: calc(var(--tn-a48) - var(--tn-a18)); }
.tn-join-18-62 { --tn-join-from: var(--tn-a18); --tn-join-w: calc(var(--tn-r62) - var(--tn-a18)); }
.tn-join-18-70 { --tn-join-from: var(--tn-a18); --tn-join-w: calc(var(--tn-r70) - var(--tn-a18)); }
.tn-join-18-74 { --tn-join-from: var(--tn-a18); --tn-join-w: calc(var(--tn-r74) - var(--tn-a18)); }
.tn-join-22-26 { --tn-join-from: var(--tn-a22); --tn-join-w: calc(var(--tn-a26) - var(--tn-a22)); }
.tn-join-22-30 { --tn-join-from: var(--tn-a22); --tn-join-w: calc(var(--tn-a30) - var(--tn-a22)); }
.tn-join-22-34 { --tn-join-from: var(--tn-a22); --tn-join-w: calc(var(--tn-a34) - var(--tn-a22)); }
.tn-join-22-48 { --tn-join-from: var(--tn-a22); --tn-join-w: calc(var(--tn-a48) - var(--tn-a22)); }
.tn-join-22-62 { --tn-join-from: var(--tn-a22); --tn-join-w: calc(var(--tn-r62) - var(--tn-a22)); }
.tn-join-22-70 { --tn-join-from: var(--tn-a22); --tn-join-w: calc(var(--tn-r70) - var(--tn-a22)); }
.tn-join-22-74 { --tn-join-from: var(--tn-a22); --tn-join-w: calc(var(--tn-r74) - var(--tn-a22)); }
.tn-join-26-30 { --tn-join-from: var(--tn-a26); --tn-join-w: calc(var(--tn-a30) - var(--tn-a26)); }
.tn-join-26-34 { --tn-join-from: var(--tn-a26); --tn-join-w: calc(var(--tn-a34) - var(--tn-a26)); }
.tn-join-26-48 { --tn-join-from: var(--tn-a26); --tn-join-w: calc(var(--tn-a48) - var(--tn-a26)); }
.tn-join-26-62 { --tn-join-from: var(--tn-a26); --tn-join-w: calc(var(--tn-r62) - var(--tn-a26)); }
.tn-join-26-70 { --tn-join-from: var(--tn-a26); --tn-join-w: calc(var(--tn-r70) - var(--tn-a26)); }
.tn-join-26-74 { --tn-join-from: var(--tn-a26); --tn-join-w: calc(var(--tn-r74) - var(--tn-a26)); }
.tn-join-30-34 { --tn-join-from: var(--tn-a30); --tn-join-w: calc(var(--tn-a34) - var(--tn-a30)); }
.tn-join-30-48 { --tn-join-from: var(--tn-a30); --tn-join-w: calc(var(--tn-a48) - var(--tn-a30)); }
.tn-join-30-62 { --tn-join-from: var(--tn-a30); --tn-join-w: calc(var(--tn-r62) - var(--tn-a30)); }
.tn-join-30-70 { --tn-join-from: var(--tn-a30); --tn-join-w: calc(var(--tn-r70) - var(--tn-a30)); }
.tn-join-30-74 { --tn-join-from: var(--tn-a30); --tn-join-w: calc(var(--tn-r74) - var(--tn-a30)); }
.tn-join-34-48 { --tn-join-from: var(--tn-a34); --tn-join-w: calc(var(--tn-a48) - var(--tn-a34)); }
.tn-join-34-62 { --tn-join-from: var(--tn-a34); --tn-join-w: calc(var(--tn-r62) - var(--tn-a34)); }
.tn-join-34-70 { --tn-join-from: var(--tn-a34); --tn-join-w: calc(var(--tn-r70) - var(--tn-a34)); }
.tn-join-34-74 { --tn-join-from: var(--tn-a34); --tn-join-w: calc(var(--tn-r74) - var(--tn-a34)); }
.tn-join-48-62 { --tn-join-from: var(--tn-a48); --tn-join-w: calc(var(--tn-r62) - var(--tn-a48)); }
.tn-join-48-70 { --tn-join-from: var(--tn-a48); --tn-join-w: calc(var(--tn-r70) - var(--tn-a48)); }
.tn-join-48-74 { --tn-join-from: var(--tn-a48); --tn-join-w: calc(var(--tn-r74) - var(--tn-a48)); }

/* Texteinzug, an dieselbe Achse gekoppelt — verhindert, dass Text die Linie kreuzt */
.tn-indent-14 { margin-left: calc(var(--tn-a14) - var(--tn-pad) + var(--tn-gutter)); }
.tn-indent-18 { margin-left: calc(var(--tn-a18) - var(--tn-pad) + var(--tn-gutter)); }
.tn-indent-22 { margin-left: calc(var(--tn-a22) - var(--tn-pad) + var(--tn-gutter)); }
.tn-indent-26 { margin-left: calc(var(--tn-a26) - var(--tn-pad) + var(--tn-gutter)); }
.tn-indent-30 { margin-left: calc(var(--tn-a30) - var(--tn-pad) + var(--tn-gutter)); }
.tn-indent-34 { margin-left: calc(var(--tn-a34) - var(--tn-pad) + var(--tn-gutter)); }
.tn-indent-48 { margin-left: calc(var(--tn-a48) - var(--tn-pad) + var(--tn-gutter)); }

/* Rechtsliegende Achsen: Text bleibt links, mit Abstand zur Kante */
.tn-hold-right { padding-right: clamp(0px, 4vw, 40px); max-width: 640px; }
.tn-hold-right--wide { max-width: 700px; }

/* ============================================================
   5 · Hintergrundwörter
   Klassen: tn-bgword + tn-bgword--left|right + tn-bgword--s|m|l
   In Divi: Textmodul, Position „absolut" ist nicht nötig — die Klasse setzt sie.
   ============================================================ */
.tn-bgword, .tn-bgword p {
  font-family: var(--tn-serif);
  font-weight: 300;
  line-height: .82;
  color: var(--tn-layer);
  white-space: nowrap;
  margin: 0;
}
.tn-bgword {
  position: absolute !important;
  top: clamp(22px, 4vw, 58px);
  z-index: 0 !important;
  pointer-events: none;
  user-select: none;
}
.tn-bgword--left  { left:  var(--tn-pad); right: auto; }
.tn-bgword--right { right: var(--tn-pad); left:  auto; }
.tn-bgword--s p, .tn-bgword--s { font-size: min(300px, 13vw); }
.tn-bgword--m p, .tn-bgword--m { font-size: min(300px, 17vw); }
.tn-bgword--l p, .tn-bgword--l { font-size: min(300px, 22vw); }
.tn-bgword--italic p, .tn-bgword--italic { font-style: italic; }
/* Alles andere liegt darüber */
.tn-sec .et_pb_row { position: relative; z-index: 1; }

/* ============================================================
   6 · Typografie-Klassen
   ============================================================ */
.tn-display-xl, .tn-display-xl h1, .tn-display-xl h2, .tn-display-xl p {
  font-family: var(--tn-serif); font-weight: 300; font-size: var(--tn-t-xl);
  line-height: 1.08; letter-spacing: -.02em; color: var(--tn-ink);
  max-width: var(--tn-w-display); text-wrap: pretty; margin: 0;
}
.tn-display-l, .tn-display-l h1, .tn-display-l h2, .tn-display-l p {
  font-family: var(--tn-serif); font-weight: 300; font-size: var(--tn-t-l);
  line-height: 1.16; letter-spacing: -.015em; color: var(--tn-ink);
  max-width: var(--tn-w-display); text-wrap: pretty; margin: 0;
}
.tn-display-m, .tn-display-m h2, .tn-display-m h3, .tn-display-m p {
  font-family: var(--tn-serif); font-weight: 300; font-size: var(--tn-t-m);
  line-height: 1.28; color: var(--tn-ink); text-wrap: pretty; margin: 0;
}
.tn-display-s, .tn-display-s h2, .tn-display-s h3, .tn-display-s p {
  font-family: var(--tn-serif); font-weight: 300; font-size: var(--tn-t-s);
  line-height: 1.35; color: var(--tn-ink); text-wrap: pretty; margin: 0;
}
.tn-lead, .tn-lead p {
  font-family: var(--tn-serif); font-size: var(--tn-t-lead);
  line-height: 1.65; color: var(--tn-body);
}
.tn-body, .tn-body p {
  font-family: var(--tn-sans); font-weight: 300; font-size: var(--tn-t-body);
  line-height: 1.95; color: var(--tn-body);
}
.tn-body p { margin-bottom: var(--tn-text); }
.tn-body p:last-child { margin-bottom: 0; }
.tn-body, .tn-lead { max-width: var(--tn-w-text); }
.tn-eyebrow, .tn-eyebrow p {
  font-family: var(--tn-sans); font-weight: 400; font-size: 12px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--tn-muted);
  line-height: 1.6; margin: 0;
}
.tn-caption, .tn-caption p {
  font-family: var(--tn-sans); font-weight: 400; font-size: var(--tn-t-cap);
  line-height: 1.7; color: var(--tn-muted); margin: 0;
}
.tn-italic em, .tn-lead em, .tn-display-xl em, .tn-display-l em { font-style: italic; }
/* Gelbe Unterstreichung im Text */
.tn-mark { border-bottom: 2px solid var(--tn-accent); padding-bottom: 5px; white-space: nowrap; }

/* Gestaffelte Aufzählungen (Fragen, Themen, Vorteile) */
.tn-stagger p { margin: 0 0 clamp(20px, 2.4vw, 30px); }
.tn-stagger p:nth-child(2) { margin-left: max(0px, var(--tn-vw) * 0.08 - max(0px, 1440px - var(--tn-vw)) * 0.09); }
.tn-stagger p:nth-child(3) { margin-left: max(0px, var(--tn-vw) * 0.16 - max(0px, 1440px - var(--tn-vw)) * 0.18); }
.tn-stagger p:nth-child(4) { margin-left: max(0px, var(--tn-vw) * 0.24 - max(0px, 1440px - var(--tn-vw)) * 0.27); }
.tn-stagger p:nth-child(5) { margin-left: max(0px, var(--tn-vw) * 0.32 - max(0px, 1440px - var(--tn-vw)) * 0.36); }

/* ============================================================
   7 · Textlink als Aktion (statt Button-Kasten)
   Divi: Button-Modul, Klasse tn-link-btn
   ============================================================ */
.tn-link-btn .et_pb_button,
a.tn-link-btn {
  display: inline-block;
  font-family: var(--tn-serif) !important;
  font-weight: 300;
  font-size: clamp(21px, 2vw, 26px) !important;
  line-height: 1.2;
  color: var(--tn-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--tn-accent) !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
  letter-spacing: 0 !important;
  min-height: 48px;
}
.tn-link-btn .et_pb_button:hover,
a.tn-link-btn:hover { border-bottom-color: var(--tn-ink) !important; color: var(--tn-ink) !important; }
.tn-link-btn .et_pb_button:after { display: none !important; }

/* ============================================================
   8 · Irrtümer — natives <details>, kein Divi-Modul
   Divi 5 bringt kein eigenes Akkordeon mit. Das Divi-4-Modul lief nur
   im Kompatibilitätsmodus und rendert nach einem Speichern im Visual
   Builder leer (getestet 30.07.2026). <details>/<summary> kann der
   Browser selbst: ohne JavaScript, tastaturbedienbar, und der Text ist
   auch zugeklappt für Suchmaschinen lesbar.
   Markup: .tn-irrtuemer > details.tn-irrtum > summary + .tn-irrtum-text
   ============================================================ */
.tn-irrtuemer .tn-irrtum {
  border-top: 1px solid var(--tn-line);
  padding: clamp(18px, 2.2vw, 26px) 0;
}
.tn-irrtuemer .tn-irrtum:last-child { border-bottom: 1px solid var(--tn-line); }
.tn-irrtuemer summary {
  font-family: var(--tn-serif);
  font-weight: 300;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.4;
  color: var(--tn-ink);
  position: relative;
  padding: 0 0 0 clamp(28px, 3.4vw, 44px);
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
/* Standard-Dreieck der Browser entfernen */
.tn-irrtuemer summary::-webkit-details-marker { display: none; }
.tn-irrtuemer summary::marker { content: ""; }
.tn-irrtuemer summary::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--tn-accent);
  font-size: .8em;
}
.tn-irrtuemer .tn-irrtum[open] > summary::before { content: "\2013"; }
.tn-irrtuemer summary:hover { color: var(--tn-hover); }
.tn-irrtuemer summary:focus-visible { outline: 2px solid var(--tn-accent); outline-offset: 4px; }
.tn-irrtuemer .tn-irrtum-text {
  font-family: var(--tn-sans);
  font-weight: 300;
  font-size: var(--tn-t-body);
  line-height: 1.95;
  color: var(--tn-body);
  max-width: var(--tn-w-text);
  padding: clamp(12px, 1.6vw, 18px) 0 0 clamp(28px, 3.4vw, 44px);
}
.tn-irrtuemer .tn-irrtum-text p:last-child { margin-bottom: 0; }

/* ============================================================
   9 · Referenzen
   ============================================================ */
.tn-ref { margin-bottom: clamp(32px, 4vw, 54px); }
.tn-ref img { height: clamp(26px, 2.6vw, 34px); width: auto; display: block; margin-bottom: clamp(16px, 2vw, 22px); }
.tn-ref-quote, .tn-ref-quote p {
  font-family: var(--tn-serif);
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.55;
  color: var(--tn-ink);
  text-wrap: pretty;
  margin: 0 0 16px;
}
.tn-ref-quote .tn-q { color: var(--tn-accent); }

/* ============================================================
   10 · Touchpoints
   ============================================================ */
.tn-touchpoints { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(30px, 3.8vw, 52px) clamp(34px, 4.5vw, 64px); max-width: 720px; }
.tn-touchpoints .et_pb_column { width: auto !important; margin: 0 !important; }
.tn-tp-title { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(14px, 1.8vw, 20px); font-family: var(--tn-serif); font-size: clamp(22px, 2.3vw, 29px); color: var(--tn-ink); }
.tn-tp-title:before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tn-line); flex: none; }
.tn-tp-title--accent:before { background: var(--tn-accent); }

/* ============================================================
   11 · Kontaktformular
   ============================================================ */
.tn-form .et_pb_contact_form_field input,
.tn-form .et_pb_contact_form_field textarea,
.tn-form .et_pb_contact_form_field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d9d4c2;
  border-radius: 0;
  padding: 12px 0;
  font-family: var(--tn-sans);
  font-weight: 300;
  font-size: 17px;
  color: var(--tn-ink);
  box-shadow: none;
  transition: border-color .2s ease;
}
.tn-form .et_pb_contact_form_field input:focus,
.tn-form .et_pb_contact_form_field textarea:focus { border-bottom-color: var(--tn-accent); outline: none; }
.tn-form .et_pb_contact_form_field input::placeholder,
.tn-form .et_pb_contact_form_field textarea::placeholder { color: #a8a595; }
.tn-form .et_pb_contact_field { padding: 0 0 6px; margin-bottom: 16px; }
.tn-form .et_pb_contact_field_checkbox label {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.7; color: #6c6a5a; min-height: 44px; cursor: pointer;
}
.tn-form .et_pb_contact_field_checkbox input[type="checkbox"] {
  accent-color: var(--tn-accent); width: 16px; height: 16px; margin-top: 4px; flex: none;
}
.tn-form .et_pb_contact_submit {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--tn-accent) !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
  margin-top: 22px;
  font-family: var(--tn-serif);
  font-weight: 300;
  font-size: 26px;
  color: var(--tn-ink) !important;
  min-height: 48px;
}
.tn-form .et_pb_contact_submit:hover { border-bottom-color: var(--tn-ink) !important; }
.tn-form .et_pb_contact_submit:after { display: none !important; }
.tn-form .et_pb_contact_captcha_question,
.tn-form .et_pb_contact_captcha { font-family: var(--tn-sans); font-size: 15px; color: var(--tn-body); }

/* ============================================================
   12 · Kopf und Fuß
   ============================================================ */
.tn-header { padding: clamp(26px, 5vw, 44px) var(--tn-pad) clamp(18px, 3vw, 28px); }
.tn-nav .et_pb_menu__menu > nav > ul > li > a {
  font-family: var(--tn-sans); font-weight: 400; font-size: clamp(13.5px, 1.15vw, 15px);
  color: var(--tn-ink); padding-bottom: 5px; border-bottom: 2px solid transparent;
}
.tn-nav .et_pb_menu__menu > nav > ul > li.current-menu-item > a { border-bottom-color: var(--tn-accent); }
/* Mobiles Menü (überarbeitet 03.08.2026).
   Divis generierte Modul-CSS setzt Schrift und Innenabstände der Einträge und
   lädt NACH dem Child-Stylesheet — die alten Regeln hier wurden deshalb
   überstimmt (Einträge kamen in Libre Franklin statt Petrona, mit Divis
   14px-Innenabstand). Darum die höhere Spezifität und die !important unten.
   Gestaltung: keine Trennlinien je Eintrag mehr (das wirkte wie ein Kasten),
   stattdessen Luft; aktiver Eintrag bekommt den gelben Faden als linke Kante. */
.tn-nav ul.et_mobile_menu {
  background: var(--tn-paper);
  border-top: 1px solid var(--tn-line);
  border-color: var(--tn-line);
  padding: clamp(10px, 2vw, 16px) var(--tn-pad) clamp(26px, 5vw, 38px) 0;
  box-shadow: none;
}
.tn-nav ul.et_mobile_menu li,
.tn-nav ul.et_mobile_menu li:last-child { border: 0; }
.tn-nav ul.et_mobile_menu li a {
  font-family: var(--tn-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(19px, 5vw, 26px);
  line-height: 1.25;
  color: var(--tn-ink);
  display: flex;
  align-items: center;
  min-height: 0;
  position: relative;
  padding: clamp(11px, 2.4vw, 15px) var(--tn-pad) clamp(11px, 2.4vw, 15px) calc(var(--tn-pad) + 14px) !important;
  border: 0;
  transition: color .2s;
}
.tn-nav ul.et_mobile_menu li a:hover { color: var(--tn-hover); }
/* Aktiver Eintrag: gelbe Kante genau auf der linken Satzkante des Logos —
   deshalb ein Pseudo-Element statt border-left (das säße am Viewport-Rand). */
.tn-nav ul.et_mobile_menu li.current-menu-item > a::before {
  content: "";
  position: absolute;
  left: var(--tn-pad);
  top: clamp(8px, 1.6vw, 11px);
  bottom: clamp(8px, 1.6vw, 11px);
  width: 2px;
  background: var(--tn-accent);
}
.tn-nav .mobile_menu_bar:before { color: var(--tn-ink); }

.tn-footer {
  border-top: 1px solid var(--tn-line);
  padding: clamp(34px, 4.4vw, 56px) var(--tn-pad) clamp(40px, 5vw, 60px);
  font-family: var(--tn-sans); font-weight: 400; font-size: 13.5px; color: var(--tn-muted);
}
.tn-footer a { color: var(--tn-muted); }
.tn-footer a:hover { color: var(--tn-hover); }
.tn-footer-logo img { height: clamp(34px, 4.6vw, 42px); width: auto; display: block; }
/* Anschrift als zweite Footer-Zeile — kein zweiter Footer, aber auch kein
   Anhängsel: sie sitzt dicht unter den Fußlinks und teilt deren Raster. */
.tn-nap {
  font-family: var(--tn-sans); font-style: normal; font-weight: 400;
  font-size: 12.5px; line-height: 1.6; color: var(--tn-muted);
  /* Seitlich per margin statt padding: so endet die Trennlinie im Raster
     der Fußzeile und läuft nicht über die volle Fensterbreite. */
  margin: 0 var(--tn-pad);
  padding: clamp(13px, 1.5vw, 17px) 0 clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--tn-line);
  display: flex; flex-wrap: wrap; gap: 4px 18px;
}
.tn-nap strong { font-weight: 600; color: var(--tn-body); }
.tn-nap a { color: var(--tn-muted); text-decoration: none; }
.tn-nap a:hover { color: var(--tn-hover); }
@media (max-width: 640px) { .tn-nap { flex-direction: column; gap: 2px; } }

.tn-social a { display: inline-flex; align-items: center; margin-left: 14px; }
.tn-social svg { width: 17px; height: 17px; }

/* ============================================================
   13 · Video-Kopf
   ============================================================ */
.tn-video .et_pb_video_box video,
.tn-video video { display: block; width: 100%; height: auto; background: var(--tn-layer); }
.tn-video .et_pb_video_overlay { display: none; }

/* ============================================================
   14 · Divi-Geometrie: unsere Ränder statt Divis Standard
   ============================================================ */
.tn-sec.et_pb_section { padding: 0 var(--tn-pad) var(--tn-sec-gap); }
.tn-sec--start.et_pb_section { padding-top: clamp(60px, 9vw, 120px); }
.tn-sec--end.et_pb_section { padding-bottom: clamp(70px, 9vw, 120px); padding-top: clamp(110px, 14vw, 200px); }
.tn-sec.et_pb_section > .et_pb_row,
.tn-sec.et_pb_section > .et_pb_row_inner { width: 100%; max-width: none; margin: 0; padding: 0; }
.tn-sec .et_pb_column { margin-bottom: 0; }
.tn-sec .et_pb_module { margin-bottom: var(--tn-block); }
.tn-sec .et_pb_module:last-child { margin-bottom: 0; }
.tn-sec--flat.et_pb_section { padding-bottom: 0; }
.tn-pad-top { padding-top: clamp(60px, 8vw, 110px); }

/* Nachtrag Import 29.07.2026: Divi-4-Modulattribute (logo_max_height) erzeugen erst
   nach der D5-Konvertierung im Builder CSS — bis dahin sichert diese Regel das Logo. */
.tn-nav .et_pb_menu__logo-wrap img { max-height: 48px; width: auto; }

/* ============================================================
   15 · Nachtrag Import 29.07.2026 — Kompatibilität D4-Markup
   (bis die Layouts im Divi-5-Builder gespeichert sind)
   ============================================================ */
/* Touchpoints: Abschnitt-14-Regel (max-width:none) neutralisieren, sonst 4-spaltig */
.tn-sec.et_pb_section > .et_pb_row.tn-touchpoints { max-width: 720px; }
/* Titel-Absatz erbt Petrona aus .tn-tp-title */
.tn-tp-title p { font: inherit; margin: 0; }
/* Menü rechtsbündig: Logo links, Navigation rechts */
.tn-nav .et_pb_menu_inner_container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
/* Akkordeon: Divis h5-Regeln (padding rechts, #666, Minus versteckt) überstimmen */
/* Plus/Minus in Petrona statt ETmodules-Iconfont (dort ist "+" ein Pfeil-Icon) */
/* Einzug schlägt Typo-Shorthands (.tn-display-* setzt "margin" und löscht margin-left) */
.et_pb_module.tn-indent-14 { margin-left: calc(var(--tn-a14) - var(--tn-pad) + var(--tn-gutter)); }
.et_pb_module.tn-indent-18 { margin-left: calc(var(--tn-a18) - var(--tn-pad) + var(--tn-gutter)); }
.et_pb_module.tn-indent-22 { margin-left: calc(var(--tn-a22) - var(--tn-pad) + var(--tn-gutter)); }
.et_pb_module.tn-indent-26 { margin-left: calc(var(--tn-a26) - var(--tn-pad) + var(--tn-gutter)); }
.et_pb_module.tn-indent-30 { margin-left: calc(var(--tn-a30) - var(--tn-pad) + var(--tn-gutter)); }
.et_pb_module.tn-indent-34 { margin-left: calc(var(--tn-a34) - var(--tn-pad) + var(--tn-gutter)); }
.et_pb_module.tn-indent-48 { margin-left: calc(var(--tn-a48) - var(--tn-pad) + var(--tn-gutter)); }
/* Einzug auch auf Rows — Abschnitt 14 setzt dort margin:0 */
.tn-sec.et_pb_section > .et_pb_row.tn-indent-14 { padding-left: calc(var(--tn-a14) - var(--tn-pad) + var(--tn-gutter)); box-sizing: border-box; }
.tn-sec.et_pb_section > .et_pb_row.tn-indent-18 { padding-left: calc(var(--tn-a18) - var(--tn-pad) + var(--tn-gutter)); box-sizing: border-box; }
.tn-sec.et_pb_section > .et_pb_row.tn-indent-22 { padding-left: calc(var(--tn-a22) - var(--tn-pad) + var(--tn-gutter)); box-sizing: border-box; }
.tn-sec.et_pb_section > .et_pb_row.tn-indent-26 { padding-left: calc(var(--tn-a26) - var(--tn-pad) + var(--tn-gutter)); box-sizing: border-box; }
.tn-sec.et_pb_section > .et_pb_row.tn-indent-30 { padding-left: calc(var(--tn-a30) - var(--tn-pad) + var(--tn-gutter)); box-sizing: border-box; }
.tn-sec.et_pb_section > .et_pb_row.tn-indent-34 { padding-left: calc(var(--tn-a34) - var(--tn-pad) + var(--tn-gutter)); box-sizing: border-box; }
.tn-sec.et_pb_section > .et_pb_row.tn-indent-48 { padding-left: calc(var(--tn-a48) - var(--tn-pad) + var(--tn-gutter)); box-sizing: border-box; }
/* Zitat: p trägt die Klasse selbst — Basis-Regel ".et_pb_module p" (Sans) überstimmen */
.et_pb_module p.tn-ref-quote { font-family: var(--tn-serif); font-size: clamp(19px, 1.9vw, 25px); line-height: 1.55; color: var(--tn-ink); }
/* Hintergrundwörter der Startseite: Position/Größe exakt wie im Entwurf */
.tn-page-startseite .tn-sec--start .tn-bgword { top: clamp(30px, 6vw, 80px); }
.tn-page-startseite .tn-axis-62 .tn-bgword { top: clamp(70px, 10vw, 150px); }
.tn-page-startseite .tn-axis-62 .tn-bgword, .tn-page-startseite .tn-axis-62 .tn-bgword p { font-size: min(300px, 18vw); }
.tn-page-startseite .tn-axis-34 .tn-bgword, .tn-page-startseite .tn-axis-34 .tn-bgword p { font-size: min(300px, 20vw); }
.tn-page-startseite .tn-sec--end .tn-bgword { top: auto; bottom: clamp(20px, 3vw, 40px); }
/* Referenzen: Blockabstand + Satzbreite wie im Entwurf (Abschnitt 14 gibt sonst 64px/volle Breite) */
.tn-sec .et_pb_module.tn-ref { margin-bottom: clamp(32px, 4vw, 54px); max-width: 820px; }
.et_pb_module p.tn-caption { font-size: clamp(14px, 1.1vw, 15px); line-height: 1.7; color: var(--tn-muted); }
/* Footer: eine Zeile — Logo links, Links + Icons rechts unten (Entwurf: flex space-between, align-end) */
.tn-footer .et_pb_row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: clamp(24px, 3vw, 44px); }
.tn-footer .et_pb_column { width: auto !important; margin: 0 !important; }
.tn-footer .et_pb_column:last-child { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: clamp(16px, 2vw, 24px); }
.tn-footer .et_pb_module { margin: 0 !important; }
.tn-footer .et_pb_social_media_follow { margin-bottom: 0; }
.tn-footer .et_pb_social_media_follow li { margin-bottom: 0; }
/* Hintergrundwörter ankern an der SECTION (wie im Entwurf) — Divi-Rows/Spalten sind sonst
   position:relative und werden zum falschen Bezugsrahmen für die absolute Position */
.tn-sec.et_pb_section { position: relative; }
.tn-sec.et_pb_section > .et_pb_row, .tn-sec.et_pb_section > .et_pb_row > .et_pb_column { position: static; }
/* Footer-Icons auf Entwurfsgröße */
.tn-footer .et_pb_social_media_follow li a.icon:before { font-size: 17px; }
/* Hero wie im Entwurf: Headline-Sektion ohne Faden, Faden startet erst darunter */
.tn-hero-head.et_pb_section { position: relative; padding: clamp(60px, 9vw, 120px) var(--tn-pad) 0; }
.tn-hero-head .et_pb_row, .tn-hero-head .et_pb_column { position: static; width: 100%; max-width: none; margin: 0; padding: 0; }
.tn-hero-head .et_pb_module { margin: 0; }
.tn-page-startseite .tn-hero-head .tn-bgword { top: clamp(30px, 6vw, 80px); }
.tn-page-startseite .tn-hero-head .tn-display-xl,
.tn-page-startseite .tn-hero-head .tn-display-xl p { font-size: clamp(34px, 5.4vw, 76px); line-height: 1.1; max-width: 1120px; }
.tn-page-startseite .tn-sec--start.et_pb_section { margin-top: clamp(40px, 6vw, 70px); padding-top: clamp(36px, 4.2vw, 60px); }
/* Sektionen transparent — Seitenfarbe ist das Papier des Body, nicht Divis Weiß */
.tn-sec.et_pb_section, .tn-hero-head.et_pb_section, .tn-header.et_pb_section, .tn-footer.et_pb_section { background-color: transparent; }
/* Hero-Headline: Referenzgröße auch fürs h1-Markup */
.tn-page-startseite .tn-hero-head .tn-display-xl h1 { font-size: clamp(34px, 5.4vw, 76px); line-height: 1.1; letter-spacing: -0.02em; max-width: 1120px; }
/* Abstand zwischen Rows einer Sektion (last-child-Regel nullt sonst das letzte Modul der Vor-Row) */
.tn-sec.et_pb_section > .et_pb_row + .et_pb_row { margin-top: var(--tn-block); }
/* Kopf/Fuß: volle Breite statt Divis 1080px-Row */
.tn-header .et_pb_row, .tn-footer .et_pb_row { width: 100%; max-width: none; }
/* Fußlinks mit Abstand statt Trennzeichen (wie Entwurf: flex + gap) */
.tn-footer-links p { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 24px); margin: 0; }
/* D5-generierte Sektions-/Row-Regeln (laden NACH dem Child-CSS) überstimmen */
/* Unten knapper, weil die Anschrift als zweite Zeile direkt folgt (05.08.2026).
   Mit dem alten Wert stand sie wie angeklebt unter dem Fuß statt darin. */
.tn-footer.et_pb_section { padding: clamp(34px, 4.4vw, 56px) var(--tn-pad) clamp(14px, 1.7vw, 20px) !important; }
.tn-footer .et_pb_row { justify-content: space-between !important; }
/* Divis Clearfix-Pseudos sind im Flex-Layout unsichtbare dritte Kinder — raus damit */
.tn-footer .et_pb_row::before, .tn-footer .et_pb_row::after { display: none; }
.tn-header.et_pb_section { padding: clamp(26px, 5vw, 44px) var(--tn-pad) clamp(18px, 3vw, 28px) !important; }
/* Video-Kopf: Satzspiegelbreite direkt unter dem Header (Divi-Default: 1080px-Row + Sektions-Padding) */
.tn-video.et_pb_section { padding: 0 var(--tn-pad) !important; }
.tn-video .et_pb_row { width: 100%; max-width: none; padding: 0; margin: 0; }
.tn-video .et_pb_module { margin-bottom: 0; }

/* ============================================================
   16 · Referenzen v2 (30.07.) — Stationen am Faden:
   Haarlinie + Knoten je Referenz, Logo/Name links, Zitat rechts
   ============================================================ */
.tn-ref { position: relative; border-top: 1px solid var(--tn-line); padding-top: clamp(26px, 3.2vw, 44px); max-width: 860px; }
.tn-ref::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--tn-accent); }
.tn-ref:last-child { border-bottom: 1px solid var(--tn-line); padding-bottom: clamp(26px, 3.2vw, 44px); }
.tn-ref > .et_pb_text_inner { display: grid; grid-template-columns: clamp(150px, 16vw, 220px) 1fr; grid-template-rows: auto 1fr; column-gap: clamp(28px, 3.6vw, 60px); row-gap: 14px; }
.tn-ref > .et_pb_text_inner > p:first-child { grid-column: 1; grid-row: 1; margin: 0; }
.tn-ref img { height: clamp(30px, 3vw, 40px); width: auto; display: block; margin-bottom: 0; }
.tn-ref .tn-ref-quote { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.tn-ref .tn-caption { grid-column: 1; grid-row: 2; align-self: start; margin: 0; }
@media (max-width: 860px) {
  .tn-ref > .et_pb_text_inner { display: block; }
  .tn-ref img { margin-bottom: 14px; }
  .tn-ref .tn-caption { margin-top: 12px; }
}

/* ============================================================
   17 · Unterseiten (30.07.) — generisches Hero-Muster + Wort-Feinwerte
   ============================================================ */
.tn-hero-head + .tn-sec--start.et_pb_section { margin-top: clamp(40px, 6vw, 70px); padding-top: clamp(36px, 4.2vw, 60px); }
.tn-hero-head .tn-display-xl h1 { font-size: clamp(34px, 5.4vw, 76px); line-height: 1.1; letter-spacing: -0.02em; max-width: 1120px; }
.tn-hero-head .tn-eyebrow { margin-bottom: clamp(18px, 2.2vw, 28px); }
.tn-bgw-warum-crossmedia-0.tn-bgword, .tn-bgw-warum-crossmedia-0.tn-bgword p { font-size: min(300px, 20.0vw); top: min(60px, 4.17vw); }
.tn-bgw-warum-crossmedia-1.tn-bgword, .tn-bgw-warum-crossmedia-1.tn-bgword p { font-size: min(300px, 19.44vw); top: min(144px, 10.0vw); }
.tn-bgw-warum-crossmedia-2.tn-bgword, .tn-bgw-warum-crossmedia-2.tn-bgword p { font-size: min(300px, 15.0vw); top: min(187px, 13.0vw); }
/* „Fragen“ stand mit top:800px unter dem eigenen Abschnitt (nur 762px hoch) und
   rutschte damit neben „Zeit“ in den nächsten. Auf 420px zurückgeholt — sitzt
   jetzt im leeren Band unter der Headline, wie im Entwurf gedacht. 03.08.2026 */
.tn-bgw-warum-crossmedia-3.tn-bgword, .tn-bgw-warum-crossmedia-3.tn-bgword p { font-size: min(300px, 19.44vw); top: min(420px, 29.17vw); }
.tn-bgw-warum-crossmedia-4.tn-bgword, .tn-bgw-warum-crossmedia-4.tn-bgword p { font-size: min(300px, 20.14vw); top: min(158px, 11.0vw); }
/* Zwei Wörter in diesem Abschnitt (05.08.2026), deshalb beide kleiner: sie
   müssen nebeneinander Platz finden, ohne dass eines aus dem Bild läuft.
   „Experteninterviews" ist mit 18 Zeichen das längste der ganzen Seite. */
.tn-bgw-warum-crossmedia-5.tn-bgword, .tn-bgw-warum-crossmedia-5.tn-bgword p { font-size: min(300px, 15.5vw); top: min(230px, 15.97vw); }
.tn-bgw-warum-crossmedia-5b.tn-bgword, .tn-bgw-warum-crossmedia-5b.tn-bgword p { font-size: min(190px, 8.6vw); top: min(690px, 47.9vw); }
.tn-bgw-warum-crossmedia-6.tn-bgword, .tn-bgw-warum-crossmedia-6.tn-bgword p { font-size: min(300px, 18.75vw); top: min(596px, 41.39vw); }
.tn-bgw-warum-crossmedia-7.tn-bgword, .tn-bgw-warum-crossmedia-7.tn-bgword p { font-size: min(300px, 20.14vw); top: min(202px, 14.0vw); }
.tn-bgw-warum-crossmedia-8.tn-bgword, .tn-bgw-warum-crossmedia-8.tn-bgword p { font-size: min(300px, 19.44vw); top: min(158px, 11.0vw); }
.tn-bgw-warum-crossmedia-9.tn-bgword, .tn-bgw-warum-crossmedia-9.tn-bgword p { font-size: min(300px, 20.14vw); top: min(566px, 39.33vw); }
.tn-bgw-crossmedia-paket-0.tn-bgword, .tn-bgw-crossmedia-paket-0.tn-bgword p { font-size: min(300px, 17.0vw); top: min(60px, 4.17vw); }
.tn-bgw-crossmedia-paket-1.tn-bgword, .tn-bgw-crossmedia-paket-1.tn-bgword p { font-size: min(300px, 17.0vw); top: min(144px, 10.0vw); }
.tn-bgw-crossmedia-paket-2.tn-bgword, .tn-bgw-crossmedia-paket-2.tn-bgword p { font-size: min(300px, 20.83vw); top: min(230px, 15.97vw); }
.tn-bgw-crossmedia-paket-3.tn-bgword, .tn-bgw-crossmedia-paket-3.tn-bgword p { font-size: min(300px, 20.0vw); top: min(158px, 11.0vw); }
.tn-bgw-crossmedia-paket-4.tn-bgword, .tn-bgw-crossmedia-paket-4.tn-bgword p { font-size: min(300px, 18.0vw); top: min(1057px, 73.41vw); }
.tn-bgw-crossmedia-paket-5.tn-bgword, .tn-bgw-crossmedia-paket-5.tn-bgword p { font-size: min(300px, 20.83vw); top: min(173px, 12.0vw); }
.tn-bgw-crossmedia-paket-6.tn-bgword, .tn-bgw-crossmedia-paket-6.tn-bgword p { font-size: min(300px, 17.0vw); top: min(230px, 15.97vw); }
.tn-bgw-crossmedia-paket-7.tn-bgword, .tn-bgw-crossmedia-paket-7.tn-bgword p { font-size: min(300px, 20.83vw); top: min(403px, 28.01vw); }

/* ============================================================
   18 · Kontakt/Impressum/Datenschutz (30.07.) — Rechtsseiten-Bausteine
   ============================================================ */
.tn-hero--sub .tn-display-xl h1 { font-size: clamp(34px, 5vw, 68px); }
.tn-bgw-sub.tn-bgword, .tn-bgw-sub.tn-bgword p { font-size: min(300px, 17vw); top: clamp(20px, 5vw, 60px); }
.tn-flat.et_pb_section { padding: 0 var(--tn-pad) clamp(70px, 9vw, 120px); background-color: transparent; }
.tn-flat .et_pb_row { width: 100%; max-width: none; margin: 0; padding: 0; }
.tn-legal-content p { font-size: var(--tn-t-body); line-height: 1.95; color: var(--tn-body); margin: 0 0 clamp(16px, 1.9vw, 22px); }
.tn-legal-content ul { margin: 0 0 clamp(16px, 1.9vw, 22px) 20px; }
.tn-legal-content li { font-size: var(--tn-t-body); line-height: 1.9; color: var(--tn-body); margin-bottom: 4px; }
.tn-legal-content a { border-bottom: 1px solid var(--tn-accent); }
.tn-legal-content .tn-label, .tn-kontakt-addr .tn-label { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--tn-muted); font-weight: 400; margin: 0 0 16px; }
.tn-labelgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(34px, 4.4vw, 64px); max-width: 1160px; }
.tn-legal-wrap { margin-top: clamp(46px, 6vw, 84px); max-width: 860px; }
.tn-legal { border-top: 1px solid var(--tn-line); padding: clamp(24px, 3vw, 38px) 0; }
.tn-legal-head { display: flex; gap: clamp(14px, 2vw, 26px); align-items: baseline; margin-bottom: clamp(14px, 1.8vw, 20px); }
.tn-legal-content .tn-num { font-family: var(--tn-serif); font-size: clamp(20px, 2.2vw, 28px); color: var(--tn-accent); flex: 0 0 auto; min-width: 42px; margin: 0; }
.tn-legal-content .tn-legal-title { font-family: var(--tn-serif); font-weight: 300; font-size: clamp(20px, 2.2vw, 29px); line-height: 1.32; color: var(--tn-ink); margin: 0 0 12px; }
.tn-legal-head .tn-legal-title { margin: 0; }
.tn-legal-content .tn-sub { font-family: var(--tn-serif); font-size: clamp(18px, 1.6vw, 21px); color: var(--tn-ink); margin: clamp(18px, 2.2vw, 28px) 0 10px; }
/* Kontakt: Adressspalte + Formular-Feinschliff */
.tn-kontakt-addr p { margin: 0 0 clamp(22px, 2.6vw, 32px); font-size: var(--tn-t-body); line-height: 1.95; color: var(--tn-body); }
.tn-kontakt-addr span { color: var(--tn-ink); }
.tn-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_options_wrapper { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; }
.tn-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_options_title { font-size: 14px; font-weight: 300; color: var(--tn-body); margin: 0; }
.tn-form .et_pb_contact_field_checkbox label { font-size: 0; line-height: 0; }
.tn-form .et_pb_contact_right { display: flex; align-items: center; gap: 8px; }
.tn-form .et_pb_contact_captcha_question { font-size: 14px; color: var(--tn-muted); }
.tn-form input.et_pb_contact_captcha { width: 56px; border: 0 !important; border-bottom: 1px solid var(--tn-line) !important; background: transparent; padding: 4px 2px; }
.tn-page-kontakt .tn-bgw-sub.tn-bgword, .tn-page-kontakt .tn-bgw-sub.tn-bgword p,
.tn-page-datenschutz .tn-bgw-sub.tn-bgword, .tn-page-datenschutz .tn-bgw-sub.tn-bgword p { font-size: min(300px, 22vw); }
/* Checkbox: Kästchen statt „Ja"-Label, Satz daneben */
.tn-form .et_pb_contact_field_checkbox label { font-size: 0; display: inline-flex; align-items: center; }
.tn-form .et_pb_contact_field_checkbox label i { width: 15px; height: 15px; border: 1px solid var(--tn-muted); border-radius: 2px; display: inline-block; position: relative; background: transparent; }
.tn-form .et_pb_contact_field_checkbox input:checked + label i:before { content: "✓"; font-size: 12px; line-height: 13px; color: var(--tn-ink); position: absolute; left: 1px; top: 0; }
/* Captcha-Zeile über dem Absenden-Link */
.tn-form .et_contact_bottom_container { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* Datenschutz-Intro auf Lesebreite, E-Mail im Adressblock mit Akzent-Unterstrich */
.tn-legal-content .tn-legal-lead { max-width: 680px; margin-bottom: clamp(28px, 3.4vw, 46px); }
.tn-kontakt-addr a { border-bottom: 1px solid var(--tn-accent); }
.tn-form .et_pb_contact_field_checkbox label { font-size: 0 !important; line-height: 0 !important; }
.tn-form .et_pb_contact_field_checkbox label i { width: 15px !important; height: 15px !important; border: 1px solid var(--tn-muted) !important; border-radius: 2px; display: inline-block !important; position: relative !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; }
/* Formular-Fuß: Captcha-Zeile bündig + ruhig, Absenden als Textlink mit gelbem Strich */
.tn-form .et_pb_contact_field[data-type="checkbox"] { padding-left: 0 !important; margin-left: 0 !important; }
.tn-form .et_contact_bottom_container { margin: 10px 0 0 !important; padding: 0 !important; gap: 20px; }
.tn-form .et_pb_contact_right { margin: 0 !important; padding: 0 !important; }
.tn-form .et_pb_contact_right p.clearfix { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.tn-form .et_pb_contact_captcha_question { font-size: 14px; color: var(--tn-muted); letter-spacing: .04em; }
.tn-form input.et_pb_contact_captcha { width: 46px; text-align: center; font-size: 15px; color: var(--tn-ink); }
.tn-form button.et_pb_contact_submit { font-family: var(--tn-serif) !important; font-weight: 300 !important; font-size: clamp(19px, 1.8vw, 24px) !important; color: var(--tn-ink) !important; background: transparent !important; border: 0 !important; border-bottom: 2px solid var(--tn-accent) !important; border-radius: 0 !important; padding: 0 2px 6px !important; margin: 0 !important; cursor: pointer; }
.tn-form button.et_pb_contact_submit:hover { color: var(--tn-hover) !important; border-bottom-color: var(--tn-ink) !important; }
.tn-form button.et_pb_contact_submit:after { display: none !important; }
body #page-container .tn-form button.et_pb_contact_submit { border-bottom: 2px solid var(--tn-accent) !important; }
body #page-container .tn-form button.et_pb_contact_submit:hover { border-bottom-color: var(--tn-ink) !important; }
.tn-form .et_pb_contact_field_options_list, .tn-form .et_pb_contact_field_checkbox { margin: 0 !important; padding: 0 !important; }
body #page-container .et_pb_section .tn-form.et_pb_contact_form_container.et_pb_module button.et_pb_contact_submit.et_pb_button { border-width: 0 0 2px 0 !important; border-style: solid !important; border-color: var(--tn-accent) !important; padding: 0 2px 6px !important; }
body #page-container .et_pb_section .tn-form.et_pb_contact_form_container.et_pb_module button.et_pb_contact_submit.et_pb_button:hover { border-color: var(--tn-ink) !important; }
.tn-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_options_wrapper { flex-direction: row; justify-content: flex-start; }
.tn-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_options_title { order: 2; }
.tn-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_options_list { order: 1; }
.tn-form .et_pb_contact_field_checkbox input.input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.tn-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_options_wrapper { gap: 0; }
.tn-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_options_title { margin-left: 12px !important; }

/* Hintergrundwörter der Coaching-Seite (03.08.2026) */
.tn-bgw-coaching-0.tn-bgword, .tn-bgw-coaching-0.tn-bgword p { font-size: min(300px, 19vw); top: min(120px, 8.3vw); }
.tn-bgw-coaching-1.tn-bgword, .tn-bgw-coaching-1.tn-bgword p { font-size: min(300px, 20vw); top: min(200px, 13.9vw); }

/* Aufzählung mit markiertem Stichwort — für längere Listen, bei denen
   tn-stagger (staffelt bis 32vw nach rechts) zu weit auswandern würde. */
.tn-liste p { margin: 0 0 clamp(18px, 2vw, 26px); max-width: var(--tn-w-text); }
.tn-liste p:last-child { margin-bottom: 0; }
.tn-liste .tn-mark { display: inline-block; margin-bottom: 6px; font-family: var(--tn-sans); }

/* Logo im Kopf ist ein Link — Zeilenhöhe raus, damit kein Spalt entsteht */
.et_pb_menu__logo a { display: block; line-height: 0; border: 0; }

/* Touchpoint-Punkte: vier Kanäle, vier Farben — aber eine Familie.
   Alle warm, gleiche Sättigungsordnung, damit sie auf dem Papierton
   zusammengehören statt bunt zu wirken. Ausgangspunkt ist das Gold der Website. */
:root {
  --tn-tp-1: #f7a403;   /* Gold — wie der Akzent der Website */
  --tn-tp-2: #c4671f;   /* Kupfer */
  --tn-tp-3: #a89230;   /* Oliv-Gold */
  --tn-tp-4: #94553a;   /* Terrakotta */
}
.tn-touchpoints .et_pb_column:nth-child(1) .tn-tp-title:before { background: var(--tn-tp-1); }
.tn-touchpoints .et_pb_column:nth-child(2) .tn-tp-title:before { background: var(--tn-tp-2); }
.tn-touchpoints .et_pb_column:nth-child(3) .tn-tp-title:before { background: var(--tn-tp-3); }
.tn-touchpoints .et_pb_column:nth-child(4) .tn-tp-title:before { background: var(--tn-tp-4); }

/* Kanal-Label — überall gleich: Print, Online, Social Media, ATV & Hörfunk.
   Petrona wie die Touchpoint-Titel der Startseite, davor der Punkt in der
   Farbe des Kanals. Die leeren <span> im Markup stammen aus der Referenz und
   waren immer als Marker gedacht; hier bekommen sie ihre Aufgabe. */
.tn-kanal p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--tn-serif);
  font-weight: 300;
  font-size: clamp(22px, 2.3vw, 29px);
  line-height: 1.3;
  color: var(--tn-ink);
}
.tn-kanal p > span:first-child {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tn-line);
  flex: none;
}
.tn-kanal--print  p > span:first-child { background: var(--tn-tp-1); }
.tn-kanal--online p > span:first-child { background: var(--tn-tp-2); }
.tn-kanal--social p > span:first-child { background: var(--tn-tp-3); }
.tn-kanal--atv    p > span:first-child { background: var(--tn-tp-4); }

/* ============================================================
   19 · Sehr breite Bildschirme (05.08.2026)
   Das Layout war für 1440 px entworfen und rechnete alle Achsen in vw.
   Auf einem Ultrawide zog es sich dadurch immer weiter auseinander: der
   Faden wanderte nach rechts, der Text blieb bei 640 px stehen, dazwischen
   klaffte Leere. Ab hier steht die Bezugsbreite still und die Seite wird
   mittig gestellt. Der Rand bleibt unsichtbar, weil die Sektionen
   durchsichtig sind und der Body dieselbe Papierfarbe trägt.
   ============================================================ */
@media (min-width: 1681px) {
  :root { --tn-vw: var(--tn-max); }
  #page-container { max-width: var(--tn-max); margin-inline: auto; }
}

/* ============================================================
   20 · Mitlaufender Knopf zum Beratungsgespräch (05.08.2026)
   Er sitzt oben rechts in der Flucht der Menüzeile und bleibt dort stehen,
   während der Kopf mitscrollt. Auf Desktop tritt er an die Stelle des
   Menüpunkts „Kontakt"; im Klappmenü des Handys bleibt der Punkt stehen,
   denn dort gibt es den Knopf nicht — er würde die knappe Fläche kosten.
   Ab 981 px, also dort, wo Divi auf Desktop-Layout schaltet.
   ============================================================ */
.tn-float-cta { display: none; }

@media (min-width: 981px) {
  .tn-float-cta {
    display: inline-block;
    position: fixed;
    top: 89px;
    /* position:fixed misst vom Fensterrand, die Seite ist aber ab --tn-max
       mittig gestellt: auf einem 2560er stand der Knopf 440 px rechts neben
       der Menuezeile, auf einem 3440er 880 px. Der zweite Summand holt den
       leeren Rand wieder herein; darunter ist er 0 und es rechnet wie bisher.
       100% statt 100vw, denn 100vw zaehlt die Scrollleiste mit. */
    right: calc(var(--tn-pad) + max(0px, (100% - var(--tn-max)) / 2));
    z-index: 9999;
    background: #ffa900;
    color: var(--tn-ink);
    font-family: var(--tn-sans);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .01em;
    padding: 13px 20px;
    border-radius: 2px;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(21, 21, 9, .14);
    transition: background-color .18s ease, box-shadow .18s ease;
  }
  .tn-float-cta:hover,
  .tn-float-cta:focus-visible {
    background: #ffb828;
    color: var(--tn-ink);
    box-shadow: 0 6px 22px rgba(21, 21, 9, .2);
  }
  .tn-float-cta:focus-visible { outline: 2px solid var(--tn-ink); outline-offset: 3px; }

  /* Eingeloggt schiebt die Admin-Leiste die Seite um 32 px nach unten, ein
     fest positionierter Knopf wandert aber nicht mit — er stünde sonst über
     der Menüzeile statt darin. Betrifft nur Redakteure, nicht Besucher. */
  body.admin-bar .tn-float-cta { top: 121px; }

  /* „Kontakt" weicht dem Knopf — aber nur, wo der Knopf auch steht. */
  .tn-hat-float-cta .tn-nav .et-menu > li:last-child { display: none; }

  /* Das Menü liefe sonst genau in den Knopf hinein. Der Platz wird am
     Menü-Container freigehalten, nicht an der Liste: die Liste ist ein
     Flex-Element, ihr padding-right verpufft. */
  .tn-hat-float-cta .tn-nav .et_pb_menu__menu { padding-right: 218px; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-float-cta { transition: none; }
}

/* ============================================================
   21 · Barrierefreiheit (06.08.2026)
   Nachgezogen nach einer Prüfung mit axe-core über alle sechs Seiten,
   Desktop und Handy, jeweils vor und nach dem Cookie-Banner. Alles, was
   sich mit CSS lösen liess, steht gesammelt hier am Ende — dort gewinnt
   es über Divis eigene Regeln, ohne dass die Abschnitte davor mit
   !important zugestellt werden müssen.
   Was Markup braucht (Sprungmarke, <main>, Klappmenü, Formularfelder),
   sitzt in der functions.php.
   ============================================================ */

/* 21.1 · Sichtbarer Fokus.
   Divi setzt für die ganze Seite a:focus{outline:0}. Beim Durchtabben der
   Startseite sah man deshalb an 12 von 22 Stationen nicht, wo man steht
   (WCAG 2.4.7). Nur das Irrtümer-Akkordeon hatte einen Ring.
   Unsere Datei lädt nach Divis Inline-CSS, gleiche Spezifität, also gewinnt
   sie — ausser bei den Formularfeldern, die weiter oben eine eigene, viel
   spezifischere :focus-Regel haben. Die steht deshalb hier noch einmal. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
video:focus-visible,
[tabindex]:focus-visible,
.tn-form .et_pb_contact_form_field input:focus-visible,
.tn-form .et_pb_contact_form_field textarea:focus-visible {
  outline: 2px solid var(--tn-accent-line);
  outline-offset: 3px;
}
/* 21.2 · Akzentorange dort korrigieren, wo es Bedeutung trägt.
   Flächen bleiben #f7a403, aber Ziffern, Bedienlinien und der Unterstrich
   des Absenden-Knopfes tragen Information und brauchen Kontrast. */
.tn-legal-content .tn-num { color: var(--tn-accent-ink); }
.tn-form .et_pb_contact_form_field input:focus,
.tn-form .et_pb_contact_form_field textarea:focus { border-bottom-color: var(--tn-accent-line); }
.tn-kontakt-addr a { border-bottom-color: var(--tn-accent-line); }
body #page-container .tn-form button.et_pb_contact_submit { border-bottom-color: var(--tn-accent-line) !important; }
.tn-irrtuemer summary:focus-visible { outline-color: var(--tn-accent-line); }

/* 21.3 · Einwilligungs-Kästchen wieder erreichbar.
   Divi versteckt Checkboxen inline per display:none und ersetzt sie optisch
   durch das <i> im Label. Ein display:none-Feld ist aber nicht fokussierbar:
   mit der Tastatur liess sich der Haken nicht setzen — und weil er Pflicht
   ist, war das Formular für Tastaturnutzer komplett zu (WCAG 2.1.1).
   Gemessen am 06.08.2026. Hier die übliche Ersatztechnik: das Feld bleibt
   im Fluss, ist nur unsichtbar klein, und der Fokus wird am Kästchen
   gezeigt statt am unsichtbaren Feld. */
.tn-form .et_pb_contact_field_checkbox input.input {
  display: block !important;
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.tn-form .et_pb_contact_field_checkbox input.input:focus-visible + label i {
  outline: 2px solid var(--tn-accent-line);
  outline-offset: 3px;
}

/* 21.4 · Sprungmarke über den Kopf hinweg.
   Erstes Element im Body, sichtbar erst bei Tastaturfokus (WCAG 2.4.1). */
.tn-skip {
  position: fixed;
  top: 0;
  left: var(--tn-pad);
  z-index: 100000;
  transform: translateY(-140%);
  background: var(--tn-ink);
  color: var(--tn-paper);
  font-family: var(--tn-sans);
  font-size: 15px;
  padding: 12px 18px;
  border-radius: 0 0 3px 3px;
  text-decoration: none;
}
.tn-skip:focus { transform: translateY(0); color: var(--tn-paper); }
/* Der Sprung setzt den Fokus auf #main-content. Der bekommt dafür in der
   functions.php tabindex="-1" — ohne Ring, der Inhalt selbst ist kein Ziel. */
#main-content:focus { outline: none; }

/* 21.5 · Tippziele auf mindestens 24 px (WCAG 2.5.8).
   Die Fusszeilen-Links kamen auf 23 px, Telefon und E-Mail im Adressblock
   auf 15 px. Der Finger-Zeiger allein reicht als Bedingung nicht: das
   Kriterium gilt für jede Zeigereingabe, und ein schmales Desktop-Fenster
   meldet weiter pointer:fine. Deshalb beides. */
@media (pointer: coarse), (max-width: 980px) {
  .tn-footer a,
  .tn-nap a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
  .tn-nap { gap: 8px 18px; }
}
@media (max-width: 640px) {
  .tn-nap { gap: 6px; }
}

/* ============================================================
   22 · Popup zum Beratungsgespräch (19.08.2026)

   Zwei Auslöser, beide in der functions.php verdrahtet: der Besucher ist
   kurz vor dem Seitenende angekommen, oder die Maus fährt oben aus dem
   Fenster (Richtung Tableiste — das ist der Moment vor dem Wegklicken).
   Das Schliessen des Tabs selbst lässt sich nicht abfangen, Browser haben
   das dichtgemacht; deshalb der Exit-Intent, der früher greift.

   Der Knopf oben rechts (Abschnitt 20) macht dasselbe Angebot. Solange das
   Popup offen ist, tritt er zurück — zwei gelbe Knöpfe gleichzeitig für
   dasselbe Ziel sähen nach Ausverkauf aus.
   ============================================================ */
.tn-popup[hidden] { display: none; }

.tn-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tn-pad);
}

.tn-popup__grund {
  position: absolute;
  inset: 0;
  background: rgba(21, 21, 9, .42);
  animation: tn-popup-blende .22s ease both;
}

.tn-popup__karte {
  position: relative;
  width: min(560px, 100%);
  /* Zwei Zeilen mit Absicht: Safari vor 15.4 kennt dvh nicht und verwirft
     die ganze Deklaration — ohne die vh-Zeile davor haette die Karte dort
     gar keine Hoehenbegrenzung und liefe in flachen Fenstern ueber. */
  max-height: calc(100vh - 2 * var(--tn-pad));
  max-height: calc(100dvh - 2 * var(--tn-pad));
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--tn-paper);
  border-radius: 3px;
  box-shadow: 0 18px 60px rgba(21, 21, 9, .28);
  padding: clamp(30px, 4.4vw, 46px) clamp(26px, 4vw, 44px) clamp(28px, 4vw, 40px);
  animation: tn-popup-auf .26s cubic-bezier(.2, .7, .3, 1) both;
}

/* Der gelbe Faden der Seite, hier als Oberkante der Karte. */
.tn-popup__karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tn-accent);
  border-radius: 3px 3px 0 0;
}

.tn-popup__zu {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tn-muted);
  cursor: pointer;
  border-radius: 2px;
  transition: color .18s ease, background-color .18s ease;
}
.tn-popup__zu:hover { color: var(--tn-ink); background: var(--tn-layer); }
.tn-popup__zu:focus-visible { outline: 2px solid var(--tn-accent-line); outline-offset: 2px; }
.tn-popup__zu svg { width: 16px; height: 16px; display: block; }

.tn-popup__label {
  margin: 0 0 10px;
  font-family: var(--tn-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tn-accent-ink);
}

.tn-popup__titel {
  margin: 0 0 14px;
  font-family: var(--tn-serif);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.15;
  color: var(--tn-ink);
  padding-right: 34px;   /* Platz für das Kreuz */
}

.tn-popup__text {
  margin: 0 0 26px;
  font-family: var(--tn-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tn-body);
}

.tn-popup__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.tn-popup__knopf {
  display: inline-block;
  background: #ffa900;          /* derselbe Gelbton wie der Knopf oben rechts */
  color: var(--tn-ink);
  font-family: var(--tn-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  padding: 15px 24px;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.tn-popup__knopf:hover { background: #ffb828; color: var(--tn-ink); box-shadow: 0 6px 22px rgba(21, 21, 9, .2); }
.tn-popup__knopf:focus-visible { outline: 2px solid var(--tn-ink); outline-offset: 3px; }

.tn-popup__direkt {
  margin: 0;
  font-family: var(--tn-sans);
  font-size: 14px;
  color: var(--tn-muted);
}
.tn-popup__direkt a {
  color: var(--tn-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--tn-accent-line);
  display: inline-flex;
  align-items: center;
  min-height: 24px;             /* Tippziel, siehe 21.5 */
}
.tn-popup__direkt a:hover { color: var(--tn-hover); }

/* Die Karte bekommt beim Öffnen den Fokus, damit der Screenreader Überschrift
   und Text vorliest. Sie ist aber kein Bedienelement, also auch kein Ziel für
   einen Fokusring — dieselbe Überlegung wie bei #main-content in Abschnitt 21. */
.tn-popup__karte:focus { outline: none; }

/* Solange das Popup steht, tritt der mitlaufende Knopf zurück. */
.tn-popup-offen .tn-float-cta { display: none; }

@keyframes tn-popup-blende { from { opacity: 0 } to { opacity: 1 } }
@keyframes tn-popup-auf {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .tn-popup__grund,
  .tn-popup__karte { animation: none; }
  .tn-popup__zu,
  .tn-popup__knopf { transition: none; }
}

@media (max-width: 480px) {
  .tn-popup { padding: 16px; }
  .tn-popup__aktionen { flex-direction: column; align-items: stretch; }
  .tn-popup__knopf { text-align: center; }
}

/* ============================================================
   23 · Quellenangabe unter einem Zitat (20.08.2026)
   Auf der Paket-Seite stand sie im selben <span> wie das schliessende
   Anführungszeichen — per CSS wäre das Zeichen mitgeschrumpft. Sie sitzt
   deshalb jetzt in einem eigenen <cite>, das den Zeilenumbruch gleich
   mitbringt; das <br /> davor ist entfallen.
   Farbe bleibt bewusst geerbt: gewünscht waren kleiner und kursiv.
   ============================================================ */
cite.tn-quelle {
  display: block;
  margin-top: clamp(10px, 1.3vw, 18px);
  font-family: var(--tn-serif);
  font-size: clamp(14px, 1.25vw, 19px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0;
}