/* ==========================================================================
   Dauner & Wittlicher Fototage · fototage.de
   Stylesheet nach dem Design System „Dauner & Wittlicher Fototage“
   (tokens.json v1, Stand 14.10.2026). Farben, Schriften, Abstände und Radien
   kommen ausschließlich aus den Tokens unten. Jahreswechsel: nur --akzent umhängen.
   ========================================================================== */

/* ---------- Schriften: selbst gehostet, kein Google-CDN ---------- */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-wdth-wght.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-italic-wdth-wght.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-opsz-wght.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-italic-opsz-wght.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Farbe: drei feste Farben, eine variable */
  --papier: #ffffff;
  --papier-ton: #efeeee;        /* 10 % grau auf papier: ruhige Flächen */
  --grau: #625a56;              /* Markenfarbe: Headlines, UI, Rahmen */
  --grau-linie: #d0cdcc;        /* 30 % grau auf papier: Hairlines */
  --schwarz: #000000;           /* Fließtext, Links */
  --text-auf-grau: #ffffff;

  /* Jahresfarben-Zyklus (festgelegt 14.10.2026), Alias --akzent = laufender Jahrgang */
  --akzent-2027: #ec6a20;       /* Orange */
  --akzent-2028: #0083c9;       /* Blau */
  --akzent-2029: #fbbb00;       /* Goldgelb */
  --akzent-2030: #972a84;       /* Lila */
  --akzent-2031: #e52e25;       /* Rot */
  --akzent-2032: #41ab3d;       /* Grün */
  --akzent: var(--akzent-2027);

  /* Schrift */
  --font-archivo: "Archivo", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* Abstände auf der 18-px-Grundlinie */
  --raster-05: 9px;
  --raster-1: 18px;
  --raster-2: 36px;
  --raster-3: 54px;
  --raster-4: 72px;
  --spaltenabstand: 32px;

  /* Radien: kantig, nur Fotos leicht gerundet */
  --radius-0: 0px;
  --radius-bild: 4px;

  /* Seitenraster */
  --maxw: 1120px;
  --pad: clamp(20px, 4vw, 48px);
  --nav-h: 59px;

  /* Stern als Marker (Bildmarke, eine Form, Farbe aus --akzent) */
  --stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 0 58 55'%3E%3Cpath d='M 42.88 0.13 L 49.46 10.59 L 61.39 6.7 L 59.53 18.82 L 71.24 23.32 L 61.82 31.44 L 67.82 42.21 L 55.24 42.54 L 52.73 54.55 L 42.88 46.92 L 33.03 54.55 L 30.52 42.54 L 17.94 42.21 L 23.95 31.44 L 14.52 23.32 L 26.23 18.82 L 24.37 6.7 L 36.3 10.59 Z'/%3E%3C/svg%3E");
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--raster-1));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--schwarz);
  font: 400 17px/27px var(--font-serif);          /* fliesstext */
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
p { text-wrap: pretty; }

/* Namen im Fließtext: Orte und Personen kursiv, nie gesperrt, nie fett */
i, .ort { font-style: italic; }

/* Links: schwarz, Unterstreichung grau; Hover: nur die Unterstreichung wird akzent */
a {
  color: var(--schwarz);
  text-decoration: underline;
  text-decoration-color: var(--grau);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-color: var(--akzent); text-decoration-thickness: 2px; }

/* Fokus: 2 px grau, Versatz 2 px; auf grau text-auf-grau */
:focus-visible { outline: 2px solid var(--grau); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--pad); top: -80px; z-index: 100;
  font: 600 15px/20px var(--font-archivo); font-stretch: 95%;
  color: var(--text-auf-grau); background: var(--grau);
  padding: var(--raster-05) var(--raster-1); text-decoration: none;
}
.skip:focus { top: var(--raster-05); outline-color: var(--text-auf-grau); }

/* Stern als Aufzählungszeichen und Marker vor einer Zeile */
.dachzeile::before, .legal ul li::before, .marker::before {
  content: "";
  flex: none;
  width: 0.8em; height: 0.8em;
  background: var(--akzent);
  -webkit-mask: var(--stern) center / contain no-repeat;
  mask: var(--stern) center / contain no-repeat;
}

/* dachzeile: Versalien, Sperrung +0,06 em */
.dachzeile {
  font: 600 12px/16px var(--font-archivo);
  font-stretch: 88%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
  display: flex;
  align-items: center;
  gap: var(--raster-05);
  margin: 0 0 var(--raster-1);
}

/* ---------- Überschriften ---------- */
/* H1 = umschlagtitel */
h1 {
  font: 900 clamp(40px, 6vw, 64px)/0.95 var(--font-archivo);
  font-stretch: 92%;
  letter-spacing: -0.01em;
  color: var(--grau);
  margin: 0;
  text-wrap: balance;
}
/* H2 = vortragstitel */
h2 {
  font: 800 24px/28px var(--font-archivo);
  font-stretch: 88%;
  color: var(--grau);
  margin: 0 0 var(--raster-2);
  max-width: 26ch;
  text-wrap: balance;
}
/* H3 = zwischenueberschrift */
h3 {
  font: 700 17px/22px var(--font-archivo);
  font-stretch: 95%;
  color: var(--grau);
  margin: var(--raster-3) 0 var(--raster-05);
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid var(--grau-linie);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--pad);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 17px/22px var(--font-archivo);
  font-stretch: 95%;
  color: var(--grau);
  text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo svg { height: 26px; width: auto; flex: none; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font: 600 15px/20px var(--font-archivo);        /* ui */
  font-stretch: 95%;
  color: var(--grau);
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--grau);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.nav-links a:hover { text-decoration-color: var(--akzent); text-decoration-thickness: 2px; }

/* Sekundärer Button: grau auf papier, 2 px Rahmen */
.nav-toggle {
  display: none;
  font: 600 15px/20px var(--font-archivo);
  font-stretch: 95%;
  color: var(--grau);
  background: var(--papier);
  border: 2px solid var(--grau);
  border-radius: var(--radius-0);
  padding: var(--raster-05) var(--raster-1);
  min-width: 108px;                               /* „Menü“ und „Schließen“ gleich breit: der Name springt nicht */
  cursor: pointer;
}

/* ---------- Seitenaufbau ---------- */
.container { max-width: var(--maxw); margin: 0 auto; }
section.block {
  padding: var(--raster-4) var(--pad);
  border-top: 1px solid var(--grau-linie);
}
/* Zwei Spalten auf gemeinsamer Mittelachse: Hero, Orte, Newsletter, Termine */
.zwei {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spaltenabstand);
  align-items: start;
}
.prose p { margin: 0 0 var(--raster-1); max-width: 36em; }
.prose p:last-child { margin-bottom: 0; }

/* Infokasten auf papier-ton */
.note {
  margin-top: var(--raster-2);
  padding: var(--raster-1) 24px;
  background: var(--papier-ton);
  border-radius: var(--radius-0);
  font: 450 15px/24px var(--font-serif);
  max-width: 36em;
}

/* Fotos: radius-bild, kein Textumfluss, auf dem Spaltenraster */
figure { margin: 0; }
figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-bild);
  background: var(--papier-ton);
}

/* ---------- Hero ---------- */
.hero { padding: calc(var(--nav-h) + var(--raster-4)) var(--pad) var(--raster-4); }
.hero-kopf { align-items: end; margin-bottom: var(--raster-3); }
/* Logopaarung = Absender: Daun zuerst, gleiche Höhe, Abstand ≥ Sternhöhe (Stern = 0,32 der Höhe) */
.logopaar {
  --logo-h: clamp(116px, 17vw, 184px);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--logo-h) * 0.34);
}
.logopaar svg { height: var(--logo-h); width: auto; display: block; flex: none; }
.hero-kopf h1 { margin: 0; }
.hero-bild img { aspect-ratio: 1280 / 594; object-fit: cover; }
.hero-text { margin-top: var(--raster-3); }
/* vorspann ersetzt die Initiale */
.vorspann {
  font: 500 20px/28px var(--font-serif);
  margin: 0;
  max-width: 30em;
}

/* ---------- Orte ---------- */
.split { gap: var(--spaltenabstand); }
.split-meta { position: sticky; top: calc(var(--nav-h) + var(--raster-2)); }
.ortslogo { display: block; height: 150px; width: auto; margin-bottom: var(--raster-3); }
.split-meta .since {
  font: 900 64px/1 var(--font-archivo);
  font-stretch: 85%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--grau);
  margin-bottom: var(--raster-05);
}
.split-meta .since-label {
  font: 600 12px/16px var(--font-archivo);
  font-stretch: 88%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
}
.meta-list {
  margin: var(--raster-2) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--grau);
}
.meta-list li {
  padding: var(--raster-05) 0;
  font: 500 15px/20px var(--font-archivo);
  font-stretch: 92%;
  color: var(--schwarz);
  border-bottom: 1px solid var(--grau-linie);
}
.meta-list li span {
  display: block;
  font: 500 11px/14px var(--font-archivo);
  font-stretch: 90%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 2px;
}
.bild-breit { margin-top: var(--raster-4); }

/* ---------- Termine ---------- */
.termine-intro { margin-bottom: var(--raster-3); }
.termine-intro h2 { margin-bottom: 0; }
.termine-intro p:not(.dachzeile) { margin: 0; max-width: 36em; }
.termine-intro .dachzeile { margin-bottom: var(--raster-05); }
.termine-panel {
  background: var(--papier-ton);
  border-radius: var(--radius-0);
  padding: var(--raster-2) clamp(20px, 3vw, 36px);
}
table.termine {
  width: 100%;
  border-collapse: collapse;
  font: 500 14px/18px var(--font-archivo);        /* tabelle */
  font-stretch: 92%;
  font-variant-numeric: tabular-nums;
  color: var(--schwarz);
}
.termine th, .termine td { text-align: left; vertical-align: middle; border-bottom: 1px solid var(--grau-linie); }
.termine thead th {
  padding: 0 var(--raster-1) var(--raster-05) 0;
  font: 600 12px/16px var(--font-archivo);        /* dachzeile */
  font-stretch: 88%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
  border-bottom: 1px solid var(--grau);
  vertical-align: bottom;
}
.termine tbody th, .termine tbody td { padding: var(--raster-1) var(--raster-1) var(--raster-1) 0; }
.termine tbody tr:last-child th, .termine tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.termine tbody th {
  font: 800 24px/28px var(--font-archivo);        /* vortragstitel */
  font-stretch: 88%;
  color: var(--grau);
  white-space: nowrap;
}
.termine .wt {
  font: 600 12px/16px var(--font-archivo);
  font-stretch: 88%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 0.25em;
}
.termine .marker { display: inline-flex; align-items: center; gap: var(--raster-05); font-size: 24px; line-height: 1; }
.termine .marker::before { width: 1em; height: 1em; }
.termine .kein { color: var(--grau); }
.termine-outro { margin: var(--raster-3) 0 0; max-width: 36em; }

/* ---------- Newsletter (Brevo-Formular, eigenes Markup) ---------- */
.newsletter-band {
  margin-top: var(--raster-4);
  padding: var(--raster-2) clamp(20px, 3vw, 36px);
  background: var(--papier-ton);
  border-radius: var(--radius-0);
}
.newsletter-kopf { align-items: end; margin-bottom: var(--raster-2); }
.newsletter-kopf .dachzeile { margin-bottom: var(--raster-05); }
.newsletter-kopf h2 { margin: 0; }
.newsletter-kopf p { margin: 0; max-width: 34em; }
.sib-form-block { margin: 0 0 var(--raster-1); }
.nl-felder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--raster-1);
  align-items: start;
  margin-bottom: var(--raster-1);
}
.nl-felder .sib-form-block { margin: 0; }
.nl-absenden { padding-top: 26px; }   /* Höhe der Feldbeschriftung: Knopf steht auf Feldhöhe */
.entry__label {
  display: block;
  font: 600 15px/20px var(--font-archivo);        /* ui */
  font-stretch: 95%;
  color: var(--grau);
  margin-bottom: 6px;
}
.entry__label .optional { font-weight: 450; }
.sib-form .input {
  width: 100%;
  font: 400 17px/24px var(--font-serif);
  color: var(--schwarz);
  background: var(--papier);
  border: 2px solid var(--grau);
  border-radius: var(--radius-0);
  padding: 10px 12px;
}
.sib-form .input:focus-visible { outline: 2px solid var(--grau); outline-offset: 2px; }
.entry_errored .input { border-color: var(--schwarz); border-width: 3px; padding: 9px 11px; }
.entry__error {                                   /* main.js schaltet sie über style.display ein */
  display: none;
  margin: 6px 0 0;
  font: 600 14px/20px var(--font-archivo);
  font-stretch: 95%;
  color: var(--schwarz);
}
.entry__specification {
  display: block;
  margin-top: 6px;
  font: 450 13px/18px var(--font-archivo);
  font-stretch: 90%;
  color: var(--grau);
}
/* Primärer Button: ui in text-auf-grau auf grau, radius-0, raster-0.5 × raster-1 */
.sib-form-block__button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  font: 600 15px/20px var(--font-archivo);
  font-stretch: 95%;
  color: var(--text-auf-grau);
  background: var(--grau);
  border: 2px solid var(--grau);
  border-radius: var(--radius-0);
  padding: var(--raster-05) var(--raster-1);
  cursor: pointer;
}
.sib-form-block__button:hover, .knopf:hover { background: var(--schwarz); border-color: var(--schwarz); }
.sib-form-block__button:focus-visible, .knopf:focus-visible { outline-offset: 3px; }
.sib-form-block__button-disabled { opacity: 0.5; cursor: wait; }
.progress-indicator__icon { width: 18px; height: 18px; fill: currentColor; animation: nl-dreh 1s linear infinite; }
.sib-hide-loader-icon { display: none; }
@keyframes nl-dreh { to { transform: rotate(1turn); } }
.nl-kleingedrucktes {                             /* bildlegende */
  font: 450 13px/18px var(--font-archivo);
  font-stretch: 90%;
  color: var(--schwarz);
  max-width: 44em;
  margin: 0 0 var(--raster-05);
}
.sib-form-message-panel {                         /* main.js setzt sib-form-message-panel--active */
  display: none;
  margin: 0 0 var(--raster-1);
  padding: var(--raster-1) 24px;
  background: var(--papier);
  border-left: 4px solid var(--grau);
  font: 600 15px/22px var(--font-archivo);
  font-stretch: 95%;
}
.sib-form-message-panel--active { display: block; }
.sib-form-message-panel .sib-icon { display: none; }
.input--hidden { display: none !important; }      /* Honeypot, nie sichtbar */

/* ---------- Rechtstexte ---------- */
.unterseite main > section.block:first-child { padding-top: calc(var(--nav-h) + var(--raster-4)); border-top: 0; }
.legal h1 {
  font-size: clamp(32px, 8.4vw, 64px);
  margin: 0 0 var(--raster-3);
  hyphens: auto;
  -webkit-hyphens: auto;
}
.legal h2 {                                       /* semantisch h2, optisch zwischenueberschrift */
  font: 700 17px/22px var(--font-archivo);
  font-stretch: 95%;
  color: var(--grau);
  margin: var(--raster-3) 0 var(--raster-05);
  max-width: none;
}
.legal p, .legal address, .legal ul { font-style: normal; margin: 0 0 var(--raster-1); max-width: 36em; }
.legal ul { list-style: none; padding: 0; }
.legal ul li { display: flex; gap: var(--raster-05); align-items: baseline; }
.legal ul li::before { width: 0.7em; height: 0.7em; transform: translateY(0.05em); }

/* ---------- Fußbereich: negativ auf grau, der Stern bleibt akzent ---------- */
footer {
  padding: var(--raster-4) var(--pad) var(--raster-3);
  background: var(--grau);
  color: var(--text-auf-grau);
}
footer :focus-visible { outline-color: var(--text-auf-grau); }
footer a { color: var(--text-auf-grau); text-decoration-color: var(--text-auf-grau); }
footer a:hover { text-decoration-color: var(--text-auf-grau); text-decoration-thickness: 2px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; }
.footer-oben { align-items: end; }
.logopaar.footer-logos { --ink: var(--text-auf-grau); --logo-h: clamp(88px, 12vw, 116px); }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: flex-end; }
.footer-links a {
  font: 600 15px/20px var(--font-archivo);        /* ui */
  font-stretch: 95%;
}
.footer-links a[aria-current="page"] { text-decoration-thickness: 2px; }
.footer-copy {                                    /* partnerzeile */
  margin-top: var(--raster-3);
  padding-top: var(--raster-1);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font: 400 12px/16px var(--font-archivo);
}

/* ---------- Responsiv ---------- */
@media (max-width: 1024px) {
  .nl-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl-absenden { padding-top: 0; align-self: end; }
}
@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--papier);
    padding: var(--raster-1) var(--pad);
    gap: 0;
    border-bottom: 1px solid var(--grau-linie);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--grau-linie); }
  .nav-links a:last-child { border-bottom: none; }
  .nav-toggle { display: inline-block; }

  .zwei { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: calc(var(--nav-h) + var(--raster-3)); }
  .hero-kopf { gap: var(--raster-3); margin-bottom: var(--raster-2); }
  .logopaar { --logo-h: clamp(96px, 26vw, 150px); }
  .hero-text { margin-top: var(--raster-2); }
  .hero-text.zwei { gap: var(--raster-1); }

  /* randabfallende Bilder und Flächen: ohne Rundung */
  .hero-bild, .bild-breit { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }
  .hero-bild img, .bild-breit img { border-radius: var(--radius-0); }
  .hero-bild img { aspect-ratio: 4 / 3; object-position: 28% 50%; }   /* Gleitschirmflieger im Bild halten */
  .bild-breit { margin-top: var(--raster-2); }
  .newsletter-band, .termine-panel { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); }
  .newsletter-band { margin-top: var(--raster-3); }
  .newsletter-kopf { gap: var(--raster-1); }

  .split-meta { position: static; }
  .split-meta .since { font-size: 56px; }
  .ortslogo { height: 120px; margin-bottom: var(--raster-2); }

  .termine-intro { margin-bottom: var(--raster-2); }
  .termine-intro .zwei { gap: var(--raster-1); }
  .footer-oben { gap: var(--raster-2); }
  .footer-links { justify-content: flex-start; }
}
@media (max-width: 520px) {
  :root { --nav-h: 73px; }                        /* Name läuft zweizeilig */
  .nav-inner { gap: 12px; }
  .logo { font-size: 15px; line-height: 20px; gap: 10px; }
  .logo svg { height: 22px; }
  .nl-felder { grid-template-columns: 1fr; }
  .prose p, .vorspann, .legal p, .legal li { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; }
  .termine tbody th { font-size: 20px; line-height: 24px; }
  .termine .marker { font-size: 20px; }
  .termine tbody th, .termine tbody td { padding-right: var(--raster-05); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Bestätigungsseiten Newsletter (18.10.2026) ---------- */
.knopf { text-decoration: none; }                 /* Link im Button-Stil, kein Unterstrich */
.bestaetigung { min-height: 70vh; }               /* kurze Seite: Fuß nicht in die Bildschirmmitte */
.bestaetigung h1 { font-size: clamp(32px, 8.4vw, 64px); hyphens: auto; -webkit-hyphens: auto; }
.bestaetigung-text { grid-column: 2; }            /* Text auf der Achse der Überschrift */
.bestaetigung-text .vorspann { margin-bottom: var(--raster-1); }
.bestaetigung-text .note { margin-top: 0; }
.bestaetigung-aktion { margin: var(--raster-2) 0 0; }
@media (max-width: 860px) {
  .bestaetigung-text { grid-column: auto; }
}