/* Bausteine — alles liegt flach auf dem Papier, nichts schwebt */

/* --- Die Zeichnungen aus dem Logo -------------------------------------
   Zwei Druckplatten übereinander, leicht versetzt: Cyan und Tinte.
   Der Versatz ist der Passerfehler, der jeden Risodruck ausmacht.     */

/* Die Zeichnung ist ein <span>; als Block bekommt sie ihre Größe auch dort,
   wo sie nicht direkt in einem Grid oder Flex-Container steht. */
.draw {
  position: relative;
  display: block;
  width: 100%;
}

.draw__plate {
  position: absolute;
  inset: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  mix-blend-mode: multiply;
}

.draw__plate--cyan { background: var(--cyan); translate: -5px -4px; }
.draw__plate--ink { background: var(--ink); }

.draw--theater { aspect-ratio: 274 / 146; }
.draw--baumkuchen { aspect-ratio: 254 / 198; }
.draw--land { aspect-ratio: 178 / 229; }
.draw--dom { aspect-ratio: 262 / 222; }
.draw--baer { aspect-ratio: 202 / 117; }

.draw--theater .draw__plate { -webkit-mask-image: url("../img/marke/theater-mask.png"); mask-image: url("../img/marke/theater-mask.png"); }
.draw--baumkuchen .draw__plate { -webkit-mask-image: url("../img/marke/baumkuchen-mask.png"); mask-image: url("../img/marke/baumkuchen-mask.png"); }
.draw--land .draw__plate { -webkit-mask-image: url("../img/marke/landesumriss-mask.png"); mask-image: url("../img/marke/landesumriss-mask.png"); }
.draw--dom .draw__plate { -webkit-mask-image: url("../img/marke/dom-mask.png"); mask-image: url("../img/marke/dom-mask.png"); }
.draw--baer .draw__plate { -webkit-mask-image: url("../img/marke/baer-mask.png"); mask-image: url("../img/marke/baer-mask.png"); }

/* Streifen aller fünf Wahrzeichen */
.draw-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: clamp(0.8rem, 3vw, 2.4rem);
}

.draw-strip .draw { align-self: end; }

/* --- Schaltflächen: Stempel, kein Pill ---------------------------------- */

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: var(--line) solid var(--ink);
  background: var(--paper-white);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s linear;
}

.stamp:hover { background: var(--cyan); }

.stamp--solid { background: var(--cyan); }
.stamp--solid:hover { background: var(--ink); color: var(--paper); }

/* --- Stempel -------------------------------------------------------------
   Ein Gummistempel aufs Papier: Tintenrahmen, schräg, die Cyan-Platte leicht
   verrutscht. Titelseite und Dankesseite des Kontaktformulars teilen ihn.  */

.stempel {
  display: inline-block;
  margin: 0;
  padding: 0.35rem 0.9rem;
  border: 4px solid var(--ink);
  background: var(--paper);
  box-shadow: -4px -3px 0 var(--cyan);
  font-family: var(--font-head);
  font-weight: 800;
  font-variation-settings: "wdth" 76;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-shadow: -3px -2px 0 var(--cyan);
  rotate: -9deg;
}

.stempel__klein {
  display: block;
  margin-bottom: 0.3em;
  font-size: 0.38em;
  font-weight: 700;
  font-variation-settings: "wdth" 92;
  letter-spacing: 0.16em;
  text-shadow: none;
}

/* --- Meldungsliste: Datum, Schlagzeile, Ressort ------------------------- */

/* Die Liste misst ihre eigene Breite: In der schmalen Seitenspalte der
   Titelseite ist sie schmal, auch wenn der Bildschirm breit ist. */
.stories {
  border-top: var(--line) solid var(--ink);
  container-type: inline-size;
}

.story {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 0.4rem clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding-block: 1.1rem;
  border-bottom: var(--hair) solid var(--rule-thin);
  text-decoration: none;
}

.story:last-child { border-bottom: var(--line) solid var(--ink); }

.story:hover .story__head { background: var(--cyan); }

.story__head {
  font-family: var(--font-head);
  font-size: var(--step-1);
  font-weight: 700;
  font-variation-settings: "wdth" 88;
  line-height: 1.1;
}

/* Zu schmal für drei Spalten: Datum und Ressort bilden die Kopfzeile, die
   Schlagzeile bekommt die volle Breite — statt eines Worts pro Zeile. */
@container (max-width: 34rem) {
  .story {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "datum ressort" "kopf kopf";
    gap: 0.35rem 0.8rem;
  }
  .story > :nth-child(1) { grid-area: datum; }
  .story > :nth-child(2) { grid-area: kopf; }
  .story > :nth-child(3) { grid-area: ressort; justify-self: start; }
}

/* --- Aufmacher --------------------------------------------------------- */

.opener { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }

.opener__head { text-decoration: none; display: block; }
.opener__head:hover .h-lg { background: var(--cyan); }

/* --- Kästen ------------------------------------------------------------ */

.box {
  border: var(--line) solid var(--ink);
  background: var(--paper-white);
  padding: clamp(1.1rem, 2.4vw, 1.8rem);
}

.box--cyan { background: var(--cyan); }

/* Kasten als Link: schiebt sich beim Überfahren auf den Cyan-Block */
a.box {
  display: block;
  text-decoration: none;
  box-shadow: var(--bar) var(--bar) 0 var(--cyan);
  transition: transform 0.12s linear, box-shadow 0.12s linear;
}

a.box:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--cyan);
}

/* --- Porträts ----------------------------------------------------------- */

.person { display: block; text-decoration: none; }

.person__pic {
  border: var(--line) solid var(--ink);
  box-shadow: var(--bar) var(--bar) 0 var(--cyan);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-2);
  margin-bottom: 0.9rem;
  transition: transform 0.12s linear, box-shadow 0.12s linear;
}

.person__pic img { width: 100%; height: 100%; object-fit: cover; }

a.person:hover .person__pic {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--cyan);
}

.person__name {
  font-family: var(--font-head);
  font-size: var(--step-1);
  font-weight: 700;
  font-variation-settings: "wdth" 90;
  line-height: 1.08;
}

.person__role { display: block; font-style: italic; }
.person__school { display: block; font-size: 0.95rem; color: var(--ink-70); }

.person__pic--empty {
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-45);
  text-align: center;
  padding: 1rem;
}

/* --- Downloads ---------------------------------------------------------- */

.download,
.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: var(--line) solid var(--cyan);
  padding-bottom: 1px;
}

.download::before,
.pdf-link::before { content: "↓"; }

.download:hover,
.pdf-link:hover { background: var(--cyan); }

/* --- Randbemerkung ------------------------------------------------------- */

.aside-note {
  border-left: var(--bar) solid var(--cyan);
  padding-left: 1rem;
  font-size: 0.98rem;
}

/* --- Zahlenreihe: gesetzt, nicht plakatiert ------------------------------ */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border-top: var(--line) solid var(--ink);
  border-bottom: var(--line) solid var(--ink);
}

.fact {
  padding: clamp(1.1rem, 2.5vw, 1.8rem) clamp(0.8rem, 2vw, 1.4rem);
  border-right: var(--hair) solid var(--rule-thin);
  text-align: center;
}

.fact:last-child { border-right: 0; }

.fact__value {
  display: block;
  font-family: var(--font-head);
  font-size: var(--step-3);
  font-weight: 800;
  font-variation-settings: "wdth" 84;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fact__label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink-70);
  text-wrap: balance;
}

/* --- Kachelraster --------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--gap);
}

.grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

/* --- Tote Downloads ------------------------------------------------------- */

.story--dead { opacity: 0.5; }
.story--dead:hover .story__head { background: none; }

.story__ressort {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  white-space: nowrap;
}

.story__ressort--warn {
  background: var(--ink);
  color: var(--paper);
  padding: 0.1rem 0.4rem;
}

/* --- Symbolschaltflächen (Instagram, Facebook) --------------------------- */

.icon-stamp {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: var(--line) solid var(--ink);
  background: var(--paper-white);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.12s linear;
}

.icon-stamp:hover { background: var(--cyan); }

/* --- Zurück nach oben ----------------------------------------------------
   Reiner Anker, kein JavaScript. Wo scroll()-Zeitleisten unterstützt werden,
   blendet sich die Schaltfläche am Seitenanfang aus.                      */

.to-top {
  position: fixed;
  right: clamp(0.8rem, 2vw, 1.5rem);
  bottom: clamp(0.8rem, 2vw, 1.5rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  border: var(--line) solid var(--ink);
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
}

.to-top:hover { background: var(--paper-white); }

@supports (animation-timeline: scroll()) {
  .to-top {
    opacity: 0;
    visibility: hidden;
    animation: to-top-einblenden linear both;
    animation-timeline: scroll();
    animation-range: 60vh 140vh;
  }

  @keyframes to-top-einblenden {
    from { opacity: 0; visibility: hidden; }
    to { opacity: 1; visibility: visible; }
  }
}

/* Tastaturnutzung schlägt die Scroll-Automatik immer */
.to-top:focus-visible { opacity: 1 !important; visibility: visible !important; }

/* --- Datenschutz-Hinweis --------------------------------------------------
   Eine Zeile am unteren Rand, kein Sperrbildschirm. Es gibt nichts zu
   entscheiden, also verdeckt der Hinweis auch nichts.                     */

.hinweis {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem clamp(1rem, 3vw, 2rem);
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  background: var(--paper-white);
  border-top: var(--line) solid var(--ink);
  transform: translateY(100%);
  transition: transform 0.24s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.hinweis[data-sichtbar="true"] { transform: none; }

.hinweis__text { font-size: 0.96rem; max-width: 68ch; }

.hinweis__text a {
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.16em;
}

.hinweis__text a:hover { background: var(--cyan); }

/* Solange der Hinweis steht, weicht die Nach-oben-Schaltfläche aus */
.hinweis[data-sichtbar="true"] ~ .to-top,
.to-top:has(~ .hinweis[data-sichtbar="true"]) { bottom: 5.5rem; }

/* --- Honigtopf: nur für Bots sichtbar ------------------------------------- */

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Auszufüllende Stelle in den Rechtstexten ----------------------------- */

.todo {
  background: #ffe89a;
  color: var(--ink);
  padding: 0 0.2em;
  border-bottom: 2px dotted var(--ink);
}