/* Osnabrück Magazin LP — Arbeitsstand Echo.
   Look nach Magazin-Vorlage (Klartext): weiße Fläche, Petrol-Akzente, Versal-Headlines,
   Rubrik-Balken, Serifen-Ziffern. Farb-/Fontwerte: Klasse Geschmack, Freigabe Klartext offen. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+20AC;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #1a1a1a;
  --muted: #5f6570;
  --accent: #00a9a2;       /* Marken-Petrol, aus der Logo-Datei (GESICHERT) */
  --accent-dark: #00a9a2;  /* Wunsch Klartext/Jul: einheitlich 00a9a2. ACHTUNG: Kontrast auf Weiß 2,6:1, unter WCAG AA */
  --paper: #ffffff;
  --logo-h: 100px;         /* Hoehe des Logo-SVG — steuert auch die Position der Petrol-Linie */
  --kopf-pad: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Manrope", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

a { color: var(--accent-dark); }
:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Kopf: Petrol-Band nach Kundenvorlage (Screenshot Klartext/mO., 03.09.2026) ---------- */
.kopfband { background: var(--accent); padding: 28px 0 34px; }
.kopfband-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.marke { position: relative; margin-left: 122px; text-decoration: none; display: block; }
.marke-bild { display: block; width: clamp(200px, 24vw, 288px); height: auto; }
.digital { position: absolute; left: -128px; bottom: -17px; width: clamp(96px, 11.5vw, 134px); height: auto; }
.claim { margin: 0 0 2px; }
.claim img { display: block; width: clamp(160px, 18vw, 236px); height: auto; }
@media (max-width: 560px) { .claim { display: none; } .marke { margin-left: 82px; } .digital { left: -86px; width: 84px; bottom: -11px; } }

/* ---------- Seitenkopf ---------- */
.site-head { padding: 56px 0 12px; }
.dachzeile { font-size: clamp(15px, 2vw, 18px); font-weight: 700; color: var(--ink); }
.dachzeile::before { content: ""; display: block; width: 28px; height: 13px; background: var(--accent); margin-bottom: 12px; }
.h1-box {
  display: inline-block; margin-top: 16px;
  font-size: clamp(30px, 4.6vw, 54px);
  background: rgba(0, 169, 162, .18); padding: 4px 20px 6px;
}
.losblaettern { margin-top: 18px; font-weight: 800; }
.wordmark {
  font-size: clamp(38px, 8vw, 92px); font-weight: 800;
  letter-spacing: .005em; text-transform: uppercase; line-height: .98;
}
.wordmark a { color: inherit; text-decoration: none; }
.site-head p.intro { margin-top: 18px; max-width: none; font-size: clamp(15px, 2.2vw, 18px); color: var(--ink); }
.marker { background: linear-gradient(transparent 30%, rgba(0, 169, 162, .3) 30%); padding: 0 2px; }

/* ---------- Rechtstext-Seite ---------- */
.rechtstext { margin-top: 56px; max-width: 760px; }
.rechtstext h2 { font-size: 18px; margin: 34px 0 8px; text-transform: none; letter-spacing: 0; }
.rechtstext .stand { margin-top: 34px; color: var(--muted); font-size: 14px; }

/* ---------- Rubriken im Magazin-Stil ---------- */
.rubrik {
  font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-dark);
}
.rubrik::before { content: ""; display: block; width: 28px; height: 13px; background: var(--accent); margin-bottom: 10px; }
h2 {
  font-size: clamp(24px, 3.8vw, 34px); font-weight: 800; letter-spacing: .01em;
  text-transform: uppercase; line-height: 1.1; margin: 10px 0 20px;
}

/* ---------- Flipbook-Bühne: flach, weiß, wie eine Magazinseite ---------- */
.ton-band { background: #eaf3f1; margin-top: 44px; padding: 48px 0 60px; }
.ton-band section.wrap { margin-top: 0; }
.buehne { position: relative; margin-top: 130px; }
.flipbook { margin: 0 auto; position: relative; filter: drop-shadow(0 16px 28px rgba(26, 26, 26, .22)); transition: transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .flipbook { transition: none; } }
.flipbook, .flipbook * { cursor: zoom-in !important; }
.flipbook.zone-flip, .flipbook.zone-flip * { cursor: grab !important; }
.flip-controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.flip-controls button {
  font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 20px; min-height: 44px;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: 0; cursor: pointer; transition: background .15s, color .15s;
}
.flip-controls button:hover { background: var(--ink); color: #fff; }
.flip-indicator { font-size: 13px; font-weight: 600; color: var(--muted); min-width: 110px; text-align: center; }

.aktionen { display: flex; justify-content: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.knopf {
  display: inline-block; font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; padding: 14px 26px; border-radius: 0;
}
.knopf-voll { background: var(--accent-dark); color: #fff; }
.knopf-voll:hover { background: var(--ink); }
.knopf-rand { border: 2px solid var(--ink); color: var(--ink); }
.knopf-rand:hover { background: var(--ink); color: #fff; }

/* ---------- Handschrift-Hinweise: über der Bühne, Pfeil abgesetzt vom Text ---------- */
.hinweis {
  position: absolute; z-index: 6; pointer-events: none;
  font-family: "Caveat", cursive; font-size: clamp(17px, 1.8vw, 21px); font-weight: 600;
  color: var(--ink); line-height: 1.1;
}
.hinweis .pfeil { position: absolute; overflow: visible; width: 62px; height: auto; }
.hinweis .pfeil path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hinweis .pfeil .kopf { fill: var(--ink); stroke: none; }
.hinweis-flip { top: -76px; right: calc(50% - 380px); width: 160px; text-align: center; transform: rotate(3deg); }
.hinweis-flip .pfeil { left: 26px; top: calc(100% + 2px); }
.hinweis-zoom { top: -76px; left: calc(50% - 380px); width: 160px; text-align: center; transform: rotate(-3deg); }
.hinweis-zoom .pfeil { left: 66px; top: calc(100% + 2px); }
.hinweis-archiv { position: absolute; top: -84px; left: 36px; width: 180px; text-align: center; transform: rotate(-3deg); }
.hinweis-archiv .pfeil-runter { left: 116px; top: calc(100% - 16px); }
.hinweis-archiv .pfeil-rechts { display: none; }
@media (min-width: 1520px) {
  .hinweis-archiv { top: 34px; left: -206px; width: 180px; }
  .hinweis-archiv .pfeil-runter { display: none; }
  .hinweis-archiv .pfeil-rechts { display: block; right: -70px; left: auto; top: 8px; }
}
@media (max-width: 940px) { .hinweis { display: none; } .buehne { margin-top: 40px; } .archiv-bereich { margin-top: 24px; } }

/* Krakel-Animation: Text schreibt sich, Pfeil zeichnet sich danach */
.hinweis span { display: inline-block; }
.hinweis.anim-bereit span { clip-path: inset(0 100% 0 0); }
.hinweis.anim-bereit .pfeil path:not(.kopf) { stroke-dasharray: 150; stroke-dashoffset: 150; }
.hinweis.anim-bereit .pfeil .kopf { opacity: 0; }
.hinweis.anim-los span { animation: hin-schreiben .9s ease-out forwards; }
.hinweis.anim-los .pfeil path:not(.kopf) { animation: hin-kritzeln .55s ease-in .85s forwards; }
.hinweis.anim-los .pfeil .kopf { animation: hin-einblenden .18s ease-out 1.35s forwards; }
.hinweis-flip.anim-los span { animation-delay: .8s; }
.hinweis-flip.anim-los .pfeil path:not(.kopf) { animation-delay: 1.65s; }
.hinweis-flip.anim-los .pfeil .kopf { animation-delay: 2.15s; }
@keyframes hin-schreiben { to { clip-path: inset(0 -2% 0 0); } }
@keyframes hin-kritzeln { to { stroke-dashoffset: 0; } }
@keyframes hin-einblenden { to { opacity: 1; } }

/* ---------- Archiv: Kacheln wie Inhaltsverzeichnis (Petrol-Linie, Serifen-Ziffer) ---------- */
section.wrap { margin-top: 96px; }   /* section.wrap noetig: .wrap setzt margin:0 auto */
.archiv-bereich { position: relative; margin-top: 92px; }
.archiv-gitter { display: grid; grid-template-columns: repeat(auto-fill, 280px); gap: 40px; }
@media (max-width: 660px) { .archiv-gitter { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.kachel { }
.kachel img, .kachel .cover-platzhalter {
  width: 100%; height: auto; aspect-ratio: 205 / 280; object-fit: cover;
  box-shadow: 0 10px 24px rgba(26, 26, 26, .2); display: block;
}
.cover-platzhalter { background: #efede8; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; font-weight: 600; }
.kachel h3 { font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-top: 16px; }
.kachel .themen { font-size: 13px; color: var(--muted); margin-top: 4px; }
.kachel .kachel-aktionen { display: flex; gap: 16px; margin-top: 12px; }
.kachel .kachel-aktionen a {
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border-bottom: 2px solid var(--accent); padding: 2px 2px 3px;
  transition: background .15s, color .15s, border-color .15s;
}
.kachel .kachel-aktionen a:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.kachel > a img { transition: transform .2s ease; }
.kachel > a:hover img { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .kachel > a img { transition: none; } .kachel > a:hover img { transform: none; } }
.kachel .kachel-aktionen span.inaktiv { font-size: 13px; color: var(--muted); }

/* ---------- Making-of ---------- */
.video-rahmen { margin-top: 10px; }
.video-rahmen video { width: 100%; display: block; box-shadow: 0 10px 24px rgba(26, 26, 26, .2); }
.video-platzhalter {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background: #efede8; color: var(--muted); font-weight: 600; font-size: 15px;
}
.making-of p { max-width: 640px; }

/* ---------- Footer: Petrol-Flaeche, Akzente weiss ---------- */
footer { margin-top: 96px; background: var(--accent-dark); color: #fff; padding: 48px 0 56px; font-size: 14px; }
footer h2 { color: #fff; font-size: 15px; letter-spacing: .12em; margin: 0 0 18px; text-transform: uppercase; }
footer h2::before { content: ""; display: block; width: 28px; height: 13px; background: #fff; margin-bottom: 10px; }
footer a { color: #fff; }
footer :focus-visible { outline-color: #fff; }
footer .impressum-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
footer strong { color: #fff; font-weight: 800; }
footer .rechtliches { margin-top: 28px; font-size: 13px; }

/* ---------- Unterseite ---------- */
.unterseite-kopf { padding: 36px 0 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.unterseite-kopf .zurueck {
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border-bottom: 2px solid var(--accent); padding: 2px 2px 3px;
  transition: background .15s, color .15s, border-color .15s;
}
.unterseite-kopf .zurueck:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

/* ---------- Zoom-Overlay ---------- */
.zoomlay { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(20, 23, 28, .96); }
.zoomlay.open { display: block; }
.zoomstage { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.zoomstage.panning { cursor: grabbing; }
.zoomimg { position: absolute; top: 0; left: 0; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; will-change: transform; }
.zoombar { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 2; }
.zoombar button, .zoomnav button {
  font-family: inherit; font-size: 16px; font-weight: 600; min-width: 44px; min-height: 44px;
  border: none; border-radius: 0; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
}
.zoombar button:hover, .zoomnav button:hover { background: rgba(255, 255, 255, .28); }
.zoomnav { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 2; }
.zoomnav button { padding: 0 16px; }
.zoomind { color: #fff; font-size: 13px; font-weight: 600; opacity: .85; min-width: 90px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}