/* Alltagsduo Website: was jede Seite zusätzlich zu alltagsduo.css braucht. Stand 30.10.2026 (Agent „richtung“).
   Vertrag: arbeit/RICHTUNG.md. Alle neuen Klassen mit Präfix ad- (kurze Namen kollidieren mit dem Paket).
   Keine Schatten, keine Verläufe. Farben nur über die Variablen aus alltagsduo.css und die --ad-* unten.
   Kontraste: node werkzeug/kontrast.mjs. Laden: erst alltagsduo.css, dann site.css. */

/* ------------------------------------------------------------ Schrift der Kapitel-Karten (SIL OFL, fonts/OFL-BricolageGrotesque.txt) */
@font-face { font-family: 'Bricolage Condensed'; src: url('fonts/bricolage-condensed-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------ Zusätzliche Werte */
:root {
  --ad-anzeige: 'Bricolage Condensed', 'Arial Narrow', var(--font);
  --ad-kasse: #FFEAB9;          /* Kasse-Hinweis: Gelb als Fläche, aufgehellt (Text --ink 13,0:1) */
  --ad-sun-ink: #2B231D;        /* Schrift und Symbol auf Gelb, in beiden Ansichten (10,1:1) */
  --ad-alt-petrol: var(--surface-2);  /* Zweitknopf auf Petrol-Fläche */
  --ad-alt-petrol-ink: var(--ink);
  --ad-kopf-h: 72px;            /* Höhe der Kopfleiste ohne Safe Area */
  --ad-abstand: 64px;           /* zwischen Abschnitten, Laptop 96 px */
  --ad-luft: 22px;              /* zwischen Blöcken, Laptop 26 px (Briefing Kap. 5) */
  --ad-ease: cubic-bezier(.22, .8, .24, 1);  /* ease-out */
}
@media (min-width: 1024px) { :root { --ad-abstand: 96px; --ad-luft: 26px; } }
/* Immer hell (Valentin, 30.10.2026): jede Seite trägt <html data-theme="light">. Damit greifen die dunklen Werte
   unten und in alltagsduo.css nicht; color-scheme hält auch Formularfelder und Bildlaufleisten hell. */
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ad-kasse: #41341E;        /* Text --ink 10,2:1 */
    --ad-alt-petrol: #F3EBDF;   /* sonst verschwindet der Zweitknopf auf dunklem Petrol (1,4:1) */
    --ad-alt-petrol-ink: #171310;
  }
}

/* ------------------------------------------------------------ Grundlage (ergänzt, ändert das Paket nicht) */
html { scroll-padding-top: calc(var(--ad-kopf-h) + env(safe-area-inset-top, 0px) + 16px); -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
img, svg, video { max-width: 100%; }
img, video { height: auto; }
picture { display: contents; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
ul.ad-liste, ol.ad-liste { margin: 0; padding: 0; list-style: none; }
a, button, summary, label { touch-action: manipulation; }
/* E-Mail-Adresse nie mit Trennstrich umbrechen; im HTML als <span class="ad-mail">kontakt@<wbr>valinstudio.de</span>, damit sie nach dem @ umbricht */
a[href^="mailto:"], .ad-mail { hyphens: manual; overflow-wrap: anywhere; }
::selection { background: var(--sun); color: var(--ad-sun-ink); }
.ad-unsichtbar { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ad-nb { white-space: nowrap; }

/* „Zum Inhalt springen“: erst bei Tastaturfokus sichtbar */
.ad-sprung { position: fixed; z-index: 100; top: calc(8px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left)); translate: 0 calc(-100% - 24px); }
.ad-sprung:focus-visible { translate: none; outline-color: var(--ink); }

/* ------------------------------------------------------------ Kopfleiste */
.ad-kopf { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 2px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.ad-kopf-innen { display: flex; align-items: center; gap: 12px; min-height: var(--ad-kopf-h); }
.ad-marke { display: inline-flex; align-items: center; min-height: 48px; margin-right: auto; flex: none; border-radius: var(--shape-sm); }
.ad-marke img { display: block; width: auto; height: 48px; }
.ad-menue-knopf { display: none; }
.ad-menue-knopf .ic { transition: rotate .2s var(--ad-ease); }
.ad-menue-knopf[aria-expanded="true"] .ic { rotate: 180deg; }
.ad-nav-liste { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ad-nav-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 10px; border-radius: var(--shape-sm); color: var(--ink-2); font-weight: 800; font-size: 17px; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.ad-nav-link[aria-current] { color: var(--btn); }
.ad-nav-cta { display: none; }
.ad-kopf-cta { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .ad-nav-link:hover { color: var(--btn); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
}

/* Handy und Tablet: Knopf „Menü“, die Navigation klappt als Fläche auf.
   Ohne JavaScript (keine Klasse .ad-js) stehen die Links einfach unter der Leiste. */
@media (max-width: 1023.98px) {
  .ad-kopf-innen { flex-wrap: wrap; }
  .ad-nav { flex-basis: 100%; padding-bottom: 12px; }
  .ad-nav-liste { flex-wrap: wrap; }
  html:not(.ad-js) .ad-kopf { position: static; }   /* ohne JavaScript ist die Leiste hoch: nicht kleben lassen */
  .ad-js .ad-kopf-innen { flex-wrap: nowrap; }
  .ad-js .ad-menue-knopf { display: inline-flex; }
  .ad-js .ad-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px; padding: 8px max(20px, env(safe-area-inset-right)) 24px max(20px, env(safe-area-inset-left)); background: var(--surface); border-bottom: 2px solid var(--line); max-height: calc(100svh - var(--ad-kopf-h) - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  .ad-js .ad-kopf.ad-offen .ad-nav { display: block; }
  .ad-js .ad-nav-liste { flex-direction: column; align-items: stretch; gap: 4px; max-width: 1120px; margin: 0 auto; }
  .ad-js .ad-nav-link { min-height: 56px; padding: 0 12px; font-size: 19px; color: var(--ink); }
  .ad-js .ad-nav-cta { display: block; margin-top: 12px; }
  .ad-js .ad-nav-cta .btn { width: 100%; }
}
@media (max-width: 1023.98px) and (min-width: 600px) { .ad-js .ad-nav-cta { display: none; } }
@media (max-width: 599.98px) { .ad-js .ad-kopf-cta { display: none; } }
@media (min-width: 1024px) { .ad-nav { margin-right: 8px; } }

/* ------------------------------------------------------------ Abschnitte */
.ad-abschnitt { padding-block: var(--ad-abstand); }
.ad-papier { background: var(--surface); }
.ad-stapel { display: flex; flex-direction: column; gap: var(--ad-luft); }
.ad-spalte { max-width: 760px; }
.ad-titel { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.ad-h1 { font-size: clamp(36px, 2.6vw + 22px, 48px); line-height: 1.08; letter-spacing: -.025em; }
.ad-bildhinweis { font-size: 17px; line-height: 1.4; color: var(--ink-2); }
/* Paket-Bausteine im Seitenzusammenhang */
.btns .btn { flex: 1 1 auto; hyphens: manual; }
.btns .btn:only-child { flex-grow: 0; }   /* Knopftext nie trennen; passen zwei nicht nebeneinander, rutscht der zweite in die nächste Zeile */
.card > .chip, .card > .chips { align-self: flex-start; }
.ad-papier .card, .ad-papier .post, .ad-papier .item { background: var(--bg); }   /* Papier-Karte auf Papier-Abschnitt wäre unsichtbar */
@media (min-width: 1024px) { .ad-titel { font-size: 36px; } }

/* Petrol-Fläche des Pakets (.hero) bekommt auf großen Bildschirmen mehr Innenabstand */
@media (min-width: 760px) { .hero { padding: 32px; } }
@media (min-width: 1024px) { .hero { padding: 48px; } }

/* Zweitknopf und Fokus auf Petrol-Flächen (Paket-.hero, Kapitel-Karte, Abschlusskarte) */
.hero .btn.alt, .ad-ende .btn.alt { background: var(--ad-alt-petrol); color: var(--ad-alt-petrol-ink); }
.ad-kapitel :focus-visible, .ad-ende :focus-visible, .ad-start :focus-visible { outline-color: var(--hero-ink); }

/* ------------------------------------------------------------ Kapitel-Karte (wie in den Reels) */
.ad-kapitel { align-self: flex-start; display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; padding: 20px 24px 24px; background: var(--hero); color: var(--hero-ink); border-radius: var(--shape); }
.ad-kapitel-titel { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: inherit; line-height: 1; letter-spacing: normal; }
.ad-kapitel-ober { font: 800 14px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--sun); }
.ad-kapitel-gross { font-family: var(--ad-anzeige); font-weight: 800; font-size: clamp(40px, 3.2vw + 26px, 64px); line-height: .95; letter-spacing: .005em; text-transform: uppercase; color: var(--hero-ink); hyphens: manual; overflow-wrap: break-word; max-width: 9em; }
.ad-linie { display: block; width: 96px; height: 4px; margin-top: 18px; border-radius: 2px 2px 2px 1px; background: var(--sun); }
/* Auf einer Petrol-Fläche ist die Fläche schon da: Karte ohne eigenen Grund */
.hero .ad-kapitel { padding: 0; background: none; border-radius: 0; }
@media (min-width: 1024px) { .ad-kapitel-ober { font-size: 15px; } .ad-kapitel { padding: 24px 32px 28px; } }

/* Die Linie zieht sich einmal von links auf, wenn Karte oder Abschlusskarte ins Bild kommt.
   Nur mit JavaScript (Klasse .ad-js-linie, site.js beobachtet die Karte, nicht die Linie) und ohne reduzierte Bewegung. */
@media (prefers-reduced-motion: no-preference) {
  .ad-js-linie .ad-linie { transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ad-ease) .15s; }
  .ad-js-linie .ad-sichtbar .ad-linie { transform: none; }
}

/* ------------------------------------------------------------ Kennzeichen „Start geplant 2027“ (in den Reels eine Pille) */
/* Der gelbe Punkt sitzt absolut vor der ersten Zeile: bricht das Kennzeichen am Handy um, steht die zweite Zeile unter dem Text, nicht unter dem Punkt */
.ad-start { position: relative; align-self: flex-start; width: fit-content; max-width: 100%; display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 2px; min-height: 40px; padding: 8px 14px 8px 34px; border-radius: var(--shape-chip); background: var(--hero); color: var(--hero-ink); font-size: 16px; font-weight: 800; line-height: 1.5; }
.ad-start::before { content: ''; position: absolute; left: 14px; top: 20px; translate: 0 -50%; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); }

/* ------------------------------------------------------------ Kasse-Hinweis (175/300 €): auffällig, aber ruhig */
.ad-kasse { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; max-width: 760px; padding: 20px 22px; background: var(--ad-kasse); color: var(--ink); border-radius: var(--shape); }
.ad-kasse-zeichen { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--shape-sm); background: var(--sun); color: var(--ad-sun-ink); }
.ad-kasse-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }   /* 10 px: vier kurze Sätze sollen als einzelne Gedanken lesbar sein */
.ad-kasse-satz { font-size: 20px; line-height: 1.45; hyphens: manual; }
.ad-kasse-satz strong { font-weight: 900; }
.ad-kasse .link { color: var(--btn); }
/* Handy: Euro-Zeichen umflossen statt eigener Spalte, damit der 20-px-Text die ganze Breite bekommt (sonst ca. 260 px und doppelt so viele Zeilen) */
@media (max-width: 599.98px) {
  .ad-kasse { display: flow-root; padding: 18px 18px 20px; }
  .ad-kasse-zeichen { float: left; width: 40px; height: 40px; margin: 2px 12px 4px 0; }
  .ad-kasse-zeichen .ic { width: 22px; height: 22px; }
  .ad-kasse-text { display: block; }
  .ad-kasse-text > * + * { margin-top: 8px; }
}

/* ------------------------------------------------------------ Abschlusskarte (wie die Endkarte der Reels) */
.ad-ende { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 24px 52px; background: var(--hero); color: var(--hero-ink); border-radius: var(--shape); text-align: center; }
.ad-ende-logo { display: block; width: 190px; height: auto; margin-bottom: 16px; }
.ad-ende-titel { font-family: var(--ad-anzeige); font-weight: 800; font-size: clamp(44px, 2.4vw + 34px, 64px); line-height: 1; letter-spacing: .005em; }
.ad-insta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--sun); font-family: var(--ad-anzeige); font-weight: 800; font-size: 34px; line-height: 1; text-decoration: none; border-radius: var(--shape-sm); }
.ad-insta .ic { color: var(--hero-ink); }
.ad-ende-text { max-width: 34em; font-size: 19px; font-weight: 700; line-height: 1.45; }
.ad-ende .ad-linie { margin-top: 4px; }
.ad-ende-fein { max-width: 40em; font-size: 18px; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) {
  .ad-insta:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
}

/* ------------------------------------------------------------ Fuß */
.ad-fuss { padding: 48px 0 calc(32px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 2px solid var(--line); }
.ad-fuss-raster { display: grid; gap: 32px; }
.ad-fuss-marke img { display: block; width: 190px; height: auto; }
.ad-fuss-satz { margin-top: 12px; }
.ad-fuss-titel { font-size: 18px; line-height: 1.3; margin-bottom: 4px; }
.ad-fuss .link { gap: 10px; }
.ad-fuss-zeile { margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--line); }
@media (min-width: 760px) { .ad-fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ------------------------------------------------------------ Mehr Kontrast, erzwungene Farben, Druck */
@media (prefers-contrast: more) {
  .ad-kasse { border: 2px solid var(--ink); }
  .ad-nav-link { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
}
@media (forced-colors: active) {
  .ad-kapitel, .ad-start, .ad-ende, .ad-kasse { border: 2px solid CanvasText; }
  .ad-linie, .ad-start::before { background: CanvasText; }
  .ad-kasse-zeichen { border: 2px solid CanvasText; }
}