/* ERZEUGTE DATEI - nicht hier editieren.
   Quelle: site/assets/css/css/style.css
   Neu erzeugen: python tools/sync_theme.py */
/* ==========================================================================
   Sozan Coskun - Portfolio
   Desktop-Layout 1:1 nach Sozan_Desktop_Webseite.pdf (Designbreite 1440 px).

   Massstab: Alle Masse stehen in Design-Pixeln und werden ueber die
   Einheit --u skaliert. Ab 1440 px Viewport ist --u = 1px (fester
   Container, kein Ultrawide-Stretch), darunter skaliert die Seite
   proportional mit. Unter 1024 px greift das Stapel-Layout am Dateiende.
   ========================================================================== */

@import url("fonts.css");

/* --- Design-Token --------------------------------------------------------- */
:root {
  --u: 1px;

  --red:        #ee2f2d;
  --blue:       #d4e3ff;
  --lime:       #ecff9e;
  --ink:        #0c2134;
  --black:      #000000;
  --grey-100:   #eeeeee;
  --grey-150:   #ececec;
  --grey-200:   #e5e5e5;
  --grey-300:   #d9d9d9;
  --hairline:   #b2b2b2;
  --canvas:     #f5f5f5;
  --footer-bg:  #303030;
  --podcast-bg: #00adef;
  --peach:      #ffbb99;

  --f-display: "Antonio", "Oswald", "Arial Narrow", sans-serif;
  --f-heavy:   "Baloo 2", "Nunito", system-ui, sans-serif;
  --f-ui:      "Poppins", system-ui, -apple-system, sans-serif;
  --f-body:    "Fira Sans", system-ui, -apple-system, sans-serif;

  --dot-pitch: calc(8.38 * var(--u));
  /* Abstand im Logo-Band - die Animation rechnet damit, deshalb eine
     gemeinsame Variable. */
  --marquee-gap: calc(60 * var(--u));
}

@media (max-width: 1456px) {
  :root { --u: calc((100vw - 17px) / 1440); }
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(82 * var(--u)); }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--black);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

/* Muss vor allen display-Regeln stehen: sonst ueberstimmt ein spaeteres
   display:flex/grid das hidden-Attribut, das JavaScript setzt. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible { outline: calc(3 * var(--u)) solid var(--red); outline-offset: calc(3 * var(--u)); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Seiten-Container ----------------------------------------------------- */
.page {
  width: calc(1440 * var(--u));
  margin-inline: auto;
  background: #fff;
  overflow-x: clip;
}

.section { position: relative; }

/* Handgezeichnete Rahmen aus dem Design.
   Jedes Element setzt --frame auf sein eigenes SVG (exakt die Form aus Figma). */
.frame { position: relative; }
.frame::after {
  content: "";
  position: absolute;
  inset: calc(-3.5 * var(--u));
  background: var(--frame) no-repeat center / 100% 100%;
  pointer-events: none;
}
/* Variante, bei der der Rahmen buendig auf der Box sitzt statt sie zu umschliessen */
.frame--flush::after { inset: 0; }

/* Innencontainer: traegt Flaeche, Beschnitt und clip-path. Muss getrennt vom
   Rahmen sein, weil overflow/clip-path sonst den ueberstehenden Rahmen kappen. */
.clip { position: absolute; inset: 0; overflow: hidden; }

/* Freigestellte Figuren, die oben aus ihrem Rahmen herausragen sollen.
   Der Beschnitt greift nur unten und an den Seiten - nach oben bleibt die
   Form offen. Die schraegen Kanten werden dafuer nach oben verlaengert.
   z-index legt die Figur ueber den Rahmen, damit sie ihn oben durchbricht. */
.popout {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Handgezeichneter schwarzer Trennbalken (8 px) */
.rule-bar {
  height: calc(8 * var(--u));
  background: url("../svg/rule-bar.svg") no-repeat center / 100% 100%;
}

/* Halbton-Punktraster */
.dots {
  position: absolute;
  pointer-events: none;
  background-image: radial-gradient(
    circle at calc(1.5 * var(--u)) calc(1.5 * var(--u)),
    #000 calc(1.3 * var(--u)), transparent calc(1.45 * var(--u)));
  background-size: var(--dot-pitch) var(--dot-pitch);
}

/* --- Buttons -------------------------------------------------------------- */
/* Zwei Selektoren, eine Gestaltung. Statisch steht hier <a class="btn">,
   im WordPress-Theme erzeugt core/button ein <a class="wp-block-button__link">
   in einem Wrapper mit der Klasse post-main__cta. Die Alternative waere,
   die Button-Optik in wp-bridge.css zu kopieren - dann gaebe es sie zweimal. */
.btn,
.post-main__cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(40 * var(--u));
  padding-inline: calc(18 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--red);
  color: #fff;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: calc(18.5 * var(--u));
  letter-spacing: calc(0.2 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .18s ease, transform .18s ease;
}
.btn:hover,
.post-main__cta .wp-block-button__link:hover { background: #d02523; transform: translateY(calc(-1 * var(--u))); }
.btn:active,
.post-main__cta .wp-block-button__link:active { transform: none; }

/* ==========================================================================
   Header  (Designband y 0-82)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: calc(82 * var(--u));
  background: #fff;
}
.site-header.is-stuck { box-shadow: 0 calc(2 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .12); }

.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: calc(46 * var(--u));
  padding-right: calc(24 * var(--u));
}

.brand {
  margin-right: auto;
  display: block;
  width: calc(94.32 * var(--u));
  color: var(--black);
}
.brand svg { display: block; width: 100%; height: auto; }

/* Der Burger steht in jedem Markup, ist aber nur im Mobile-Layout sichtbar. */
.nav-toggle { display: none; }

.nav { display: flex; }
.nav a {
  position: relative;
  display: block;
  padding-inline: calc(17 * var(--u));
  line-height: calc(82 * var(--u));
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: calc(18.7 * var(--u));
  letter-spacing: calc(0.3 * var(--u));
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color .15s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(54 * var(--u));
  height: calc(8 * var(--u));
  background: var(--red);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.nav a:hover { color: var(--black); }
.nav a:hover::after { transform: scaleX(.6); }
.nav a.is-active { color: var(--black); }
.nav a.is-active::after { transform: scaleX(1); }

/* Sprachumschalter. Die Flagge zeigt die Sprache, in die der Klick fuehrt,
   nicht die, in der man gerade liest - sie ist ein Schalter, kein Etikett.
   In der Fusszeile ist das anders, dort stehen beide nebeneinander. */
.lang {
  margin-left: calc(16 * var(--u));
  display: block;
  width: calc(25.6 * var(--u));
  height: calc(25.6 * var(--u));
  border-radius: 50%;
  overflow: hidden;
  transition: transform .18s ease;
}
.lang:hover { transform: scale(1.08); }
.lang svg { display: block; width: 100%; height: 100%; }

.nav-toggle { display: none; }

/* ==========================================================================
   Hero  (y 82-884)
   ========================================================================== */
.hero {
  height: calc(802 * var(--u));
  background-repeat: no-repeat;
  background-position: center calc(-2 * var(--u));
  background-size: calc(1440 * var(--u)) calc(810 * var(--u));
  background-image: url("../img/hero-bg.jpg");
  background-image: image-set(url("../img/hero-bg.webp") type("image/webp"),
                              url("../img/hero-bg.jpg")  type("image/jpeg"));
}

.hero__title {
  position: absolute;
  left: calc(36 * var(--u));
  top: calc(181.4 * var(--u));
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: calc(245.5 * var(--u));
  line-height: calc(229 * var(--u));
  letter-spacing: calc(6.3 * var(--u));
  text-transform: uppercase;
}
.hero__title span { display: block; }
.hero__title .is-red { color: var(--red); }

.hero__sub {
  position: absolute;
  left: calc(59.2 * var(--u));
  top: calc(667 * var(--u));
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: calc(32.6 * var(--u));
  line-height: calc(39 * var(--u));
  letter-spacing: calc(2.7 * var(--u));
  color: var(--black);
}
.hero__sub-line {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  width: calc(699 * var(--u));
}
/* Der rote Balken fuellt automatisch den Rest der Zeile - dadurch passt er
   sich an unterschiedlich lange Uebersetzungen an. */
.hero__rule {
  flex: 1 1 auto;
  height: calc(8 * var(--u));
  background: var(--red);
}
.hero__edge { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--u)); }

/* ==========================================================================
   Ueber mich  (y 887-1687)
   ========================================================================== */
.about { height: calc(800 * var(--u)); margin-top: calc(3 * var(--u)); background: #fff; }

.about__dots { left: 0; top: 0; width: calc(636 * var(--u)); height: 100%; }

/* Gegenueber der Vorlage um 30 Prozent verkleinert und links buendig zum
   Biografietext darunter gesetzt (.about__bio beginnt bei 749). Die
   Oberkante bleibt, wo sie war. Mobil gilt eine eigene, kleinere Groesse -
   die bleibt unberuehrt. */
.about__head {
  position: absolute;
  left: calc(749 * var(--u));
  top: calc(92.2 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(19.6 * var(--u));
  font-family: var(--f-heavy);
  font-weight: 800;
  font-size: calc(46.55 * var(--u));
  line-height: calc(38.5 * var(--u));
  letter-spacing: calc(0.56 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}
.about__head-divider {
  display: block;
  width: calc(5.6 * var(--u));
  height: calc(58.1 * var(--u));
  margin-block: calc(-9.8 * var(--u));
  background: var(--black);
}

.about__photo {
  position: absolute;
  left: calc(79 * var(--u));
  top: calc(202 * var(--u));
  width: calc(611 * var(--u));
  height: calc(562 * var(--u));
  --frame: url("../svg/frame-about.svg");
}
.about__photo .clip { background: var(--blue); }
.about__photo .popout { clip-path: polygon(0 -200%, 100% -200%, 100% 100%, 0 100%); }
.about__photo img {
  position: absolute;
  left: calc(46 * var(--u));
  top: calc(-418 * var(--u));
  width: calc(550 * var(--u));
  max-width: none;
}

.about__bio {
  position: absolute;
  left: calc(749 * var(--u));
  top: calc(198.1 * var(--u));
  width: calc(570 * var(--u));
  font-size: calc(14.6 * var(--u));
  line-height: calc(18 * var(--u));
}
.about__bio p + p { margin-top: calc(17 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--hairline); }
.about__bio b, .about__bio strong { font-weight: 700; }

/* ==========================================================================
   Werke  (y 1687-2487)
   ========================================================================== */
.works { height: calc(800 * var(--u)); background: #fff; }

.works__strip {
  position: absolute;
  left: 0;
  width: calc(1440 * var(--u));
  height: calc(100 * var(--u));
  object-fit: cover;
  max-width: none;
}
/* Beide Streifen ragen 2 px ueber die Section hinaus - oben nach oben,
   unten nach unten. Deshalb haengt der untere an der Unterkante (800 + 2 - 100). */
.works__strip--top    { top: calc(-2 * var(--u)); }
.works__strip--bottom { top: calc(702 * var(--u)); }

.works__cover {
  position: absolute;
  left: calc(84 * var(--u));
  top: calc(26 * var(--u));
  width: calc(470 * var(--u));
  height: calc(672 * var(--u));
}
.works__cover img {
  position: absolute;
  left: calc(3.8 * var(--u));
  top: calc(8 * var(--u));
  width: calc(462.5 * var(--u));
  height: calc(656 * var(--u));
  object-fit: cover;
  /* Die Neigung zum Mauszeiger. Die beiden Winkel setzt main.js als
     Custom Property; ohne JavaScript stehen sie auf 0 und die Regel ist
     wirkungslos. Die Perspektive sitzt bewusst an diesem Element und
     nicht am Elternteil: sonst teilten sich alle Cover einer Reihe
     denselben Fluchtpunkt und die aeusseren kippten schief weg. */
  transform: perspective(calc(1200 * var(--u)))
             rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .45s ease, opacity .3s ease;
}
/* Waehrend die Maus darueber liegt, folgt das Cover ohne Nachlauf; erst
   beim Verlassen federt es in .45s zurueck. */
.works__cover.is-tilting img {
  transform: perspective(calc(1200 * var(--u)))
             rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))
             scale(1.02);
  transition: transform .08s linear, opacity .3s ease;
}

/* Jeder Band traegt sein Cover selbst. Auf der Seite ist dieses Bild
   unsichtbar - main.js klont es in die Miniaturenreihe und in den grossen
   Rahmen links. Im Editor wird es sichtbar gemacht (wp-bridge.css), denn
   dort ist es die Stelle, an der die Redaktion das Cover austauscht.
   display:none statt visually-hidden ist Absicht: so laedt der Browser die
   Datei hier gar nicht erst, die Klone holen sie ohnehin. */
/* Der Selektor nennt bewusst den Band mit: WordPress gibt dem Bildblock
   die Klasse wp-block-image, und dessen Core-Stilvorlage wird spaeter
   eingebunden als theme.css. Bei gleicher Spezifitaet gewann sie - das
   Cover stand dann sichtbar im Klappentext und schob den Titel 800 px
   nach unten. */
.works__volume .works__cover-src { display: none; }

.works__body {
  position: absolute;
  left: calc(604 * var(--u));
  top: calc(115.9 * var(--u));
  width: calc(760 * var(--u));   /* Titel laeuft einzeilig bis x 1354 */
}

.works__title {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: calc(40.9 * var(--u));
  line-height: calc(48 * var(--u));
  letter-spacing: calc(0.65 * var(--u));
}
.works__text {
  margin-top: calc(29.3 * var(--u));
  width: calc(482.6 * var(--u));   /* Satzspiegel des Klappentexts aus dem Design */
  font-size: calc(14.66 * var(--u));
  line-height: calc(18 * var(--u));
}
.works__text p + p { margin-top: calc(18 * var(--u)); }

/* Im Theme ist .works__award die <figure> des Bildblocks. Deren Core-Vorlage
   setzt margin: 0 0 1em und wird spaeter geladen als diese Datei - bei
   gleicher Spezifitaet gewann sie, und das Award-Bild rutschte 24.8 px nach
   oben. Der Band im Selektor hebt das auf. */
.works__volume .works__award { margin-top: calc(24.8 * var(--u)); width: calc(135 * var(--u)); }
.works__volume .works__award img { width: 100%; height: auto; }
.works__cta   { margin-top: calc(38 * var(--u)); }

/* Die Reihe erzeugt main.js aus den Baenden, ihre Laenge steht also nicht
   mehr fest. Bis fuenf Baende stehen die Miniaturen in Originalgroesse
   nebeneinander (5 x 119 + 4 x 44 = 727 < 748); ab dem sechsten ruecken sie
   zusammen, statt rechts aus dem Satzspiegel zu laufen. */
.works__thumbs {
  position: absolute;
  left: calc(606 * var(--u));
  top: calc(518 * var(--u));
  display: flex;
  gap: calc(44 * var(--u));
  max-width: calc(748 * var(--u));
}
.works__thumbs .works__thumb {
  width: calc(119 * var(--u));
  height: calc(172 * var(--u));
  min-width: 0;
  /* Anheben beim Hover und Neigen zur Maus teilen sich eine Deklaration -
     zwei transform-Regeln wuerden einander ueberschreiben. Beide Anteile
     kommen deshalb als Custom Property herein und stehen ohne Hover
     beziehungsweise ohne JavaScript auf Null. */
  transform: translateY(var(--lift, 0px))
             perspective(calc(600 * var(--u)))
             rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .18s ease, opacity .18s ease;
  opacity: .78;
}
.works__thumbs .works__thumb picture { display: block; height: 100%; }
.works__thumbs .works__thumb img { width: 100%; height: 100%; object-fit: cover; }
.works__thumbs .works__thumb:hover { opacity: 1; --lift: calc(-3 * var(--u)); }
.works__thumbs .works__thumb.is-tilting { transition: transform .08s linear, opacity .18s ease; }
.works__thumbs .works__thumb[aria-current="true"] { opacity: 1; }

.carousel-arrow {
  position: absolute;
  top: calc(338 * var(--u));
  width: calc(20.6 * var(--u));
  height: calc(46.1 * var(--u));
  color: var(--black);
  transition: transform .18s ease, opacity .18s ease;
  opacity: .85;
}
.carousel-arrow:hover { opacity: 1; }
.carousel-arrow svg { width: 100%; height: 100%; display: block; }
.carousel-arrow--prev { left: calc(16.4 * var(--u)); }
.carousel-arrow--next { left: calc(1403 * var(--u)); }
.carousel-arrow--prev:hover { transform: translateX(calc(-4 * var(--u))); }
.carousel-arrow--next:hover { transform: translateX(calc(4 * var(--u))); }

/* Die Dots sitzen auf dem unteren Mangastreifen und gingen dort optisch unter.
   Deshalb eine schwarze Kapsel darunter; die Dots selbst sind invertiert -
   weisser Ring statt schwarzem, weisse Fuellung beim aktiven.
   left/top sind um den Innenabstand zurueckgenommen, damit die Dots selbst
   exakt auf ihren Designkoordinaten (686, 756) stehen bleiben. */
.works__dots {
  position: absolute;
  left: 50%;                      /* waagerecht auf der Seitenmitte */
  top: calc(735.2 * var(--u));    /* Mitte des unteren Streifens (702..802) minus halbe Kapsel */
  transform: translateX(-50%);
  display: flex;
  gap: calc(11.9 * var(--u));
  padding: calc(8.4 * var(--u));
  border-radius: calc(16.8 * var(--u));
  background: var(--black);
  z-index: 2;
}
.works__dots button {
  width: calc(17.5 * var(--u));
  height: calc(16.8 * var(--u));
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 calc(1.4 * var(--u)) #fff;
  transition: background-color .18s ease;
}
.works__dots button:hover { background: rgba(255, 255, 255, .35); }
.works__dots button[aria-current="true"] { background: #fff; }

/* Slides */
.works__slide[hidden] { display: none; }
/* Bis main.js einmal durchgelaufen ist, steht nur der erste Band und nur die
   erste Seite. Im Theme kann ein Core-Block kein hidden-Attribut tragen -
   ohne diese beiden Regeln stuende dort fuer einen Moment alles
   uebereinander. Faellt das JavaScript ganz aus, bleibt wenigstens der
   erste Band lesbar. */
.works__body:not(.is-ready) .works__volume ~ .works__volume { display: none; }
/* Im Theme kann ein Core-Block kein hidden-Attribut tragen - ohne diese
   Regel stuenden bis zum ersten JS-Durchlauf beide Werk-Seiten uebereinander. */
.works:not(.is-ready) .works__slide ~ .works__slide { display: none; }

/* Ueberblendung beim Bandwechsel: Cover und Textblock werden kurz ausgeblendet,
   waehrend die Inhalte getauscht werden. Der Rahmen bleibt stehen. */
.works__cover img,
.works__body .works__volume { transition: opacity .3s ease; }
.works__slide.is-swapping .works__cover img,
.works__slide.is-swapping .works__body .works__volume { opacity: 0; }

/* Feste Mindesthoehe, damit die Aktionszeile beim Bandwechsel nicht springt.
   Der Inhalt steht mittig darin: die Baende sind unterschiedlich lang
   (gemessen 221, 239 und 264 u), und an der Oberkante ausgerichtet blieb
   unten jeweils anders viel Luft stehen. */
.works__body .works__volume {
  position: relative;
  min-height: calc(342 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Der Shop-Link haengt inline am Wort "Altraverse" in der Erscheinungszeile. */
.works__shop {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: calc(2 * var(--u));
  transition: color .15s ease;
}
.works__shop:hover { color: #a81b19; }

/* Leseprobe (nur bei Baenden, die eine haben) sitzt auf der Hoehe, auf der im
   Design der Button stand (y 2105 = 302 px innerhalb des Bandblocks). */
.works__actions {
  position: absolute;
  left: 0;
  top: calc(302 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
}
.works__sample {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: calc(16 * var(--u));
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: calc(3 * var(--u));
  transition: color .15s ease;
}
.works__sample:hover { color: #a81b19; }

/* Seite 2 (Green Garden) hatte hier eine Ausnahme: die freigestellten
   3D-Mockups waren schmaler als die flachen Kiela-Scans und standen deshalb
   mittig im gleichen Feld. Seit 1.4.0 sind es ebenfalls flache Cover
   (554 x 800), also gilt wieder dieselbe Regel wie fuer Kiela. */

/* Timer der automatischen Bandrotation: kleiner Ring unten rechts.
   Rechtsbuendig am Satzspiegel (x 1336-1380), unten buendig mit den Miniaturen. */
.works__timer {
  position: absolute;
  left: calc(1336 * var(--u));
  top: calc(646 * var(--u));
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
}
.works__timer svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* Start auf 12 Uhr */
}
.works__timer circle {
  fill: none;
  stroke-width: 4;
}
.works__timer .works__timer-track { stroke: rgba(0, 0, 0, .13); }
.works__timer .works__timer-fill {
  stroke: var(--red);
  stroke-linecap: round;
  stroke-dasharray: 125.66;    /* Umfang bei r = 20 */
  stroke-dashoffset: 125.66;
}
.works__timer.is-running .works__timer-fill { animation: works-timer 10s linear; }
.works__timer.is-paused .works__timer-fill { animation-play-state: paused; }

@keyframes works-timer {
  from { stroke-dashoffset: 125.66; }
  to   { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Referenzen  (y 2484-3231) + Bekannt aus (y 3231-3517)
   ========================================================================== */
.refs { height: calc(747 * var(--u)); margin-top: calc(-3 * var(--u)); background: #fff; overflow: hidden; }

.refs__dots {
  right: calc(-40 * var(--u));
  top: calc(-60 * var(--u));
  width: calc(700 * var(--u));
  height: calc(880 * var(--u));
  transform: rotate(-4.3deg);
  transform-origin: 100% 0;
}

.refs__head {
  position: absolute;
  left: calc(40.1 * var(--u));
  top: calc(21.8 * var(--u));
  font-family: var(--f-heavy);
  font-weight: 800;
  font-size: calc(93.7 * var(--u));
  line-height: calc(100 * var(--u));
  letter-spacing: calc(2.17 * var(--u));
  color: var(--red);
  text-transform: uppercase;
}

.refs__card {
  position: absolute;
  left: calc(48 * var(--u));
  top: calc(121 * var(--u));
  width: calc(887.5 * var(--u));
  height: calc(557 * var(--u));
  --frame: url("../svg/frame-ref-grey.svg");
}
.refs__card .clip {
  background: var(--grey-150);
  clip-path: polygon(0 0, 100% 0, 87.04% 100%, 0 100%);
}

.refs__logo {
  position: absolute;
  left: calc(43 * var(--u));
  top: calc(72 * var(--u));
  width: calc(279 * var(--u));
  height: calc(396 * var(--u));
  background: #fff;
  --frame: url("../svg/box-logo.svg");
}
.refs__logo img {
  position: absolute;
  left: calc(17 * var(--u));
  top: calc(60 * var(--u));
  width: calc(246 * var(--u));
}

.refs__quote { position: absolute; left: calc(354 * var(--u)); top: calc(70.5 * var(--u)); width: calc(410 * var(--u)); }
.refs__quote h3 {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: calc(28.4 * var(--u));
  line-height: calc(34 * var(--u));
  letter-spacing: calc(2.57 * var(--u));
}
.refs__quote blockquote {
  margin: calc(25.5 * var(--u)) 0 0;
  /* Mindesthoehe = 8 Zeilen, damit die Quellenangabe an der im Design
     vorgesehenen Position bleibt, auch wenn der Umbruch leicht abweicht. */
  min-height: calc(208 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(26 * var(--u));
}
.refs__source { margin-top: calc(26 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); }

.refs__art {
  position: absolute;
  left: calc(862 * var(--u));
  top: calc(121 * var(--u));
  width: calc(530 * var(--u));
  height: calc(557 * var(--u));
  --frame: url("../svg/frame-ref-lime.svg");
}
.refs__art .clip {
  background: var(--lime);
  clip-path: polygon(21.68% 0, 100% 0, 100% 100%, 0 100%);
}
/* Die Figur soll nur unten an der Rahmenkante abgeschnitten werden - oben,
   links und rechts darf sie frei ueber den Rahmen hinausragen. */
.refs__art .popout { clip-path: inset(-200% -200% 0 -200%); }
.refs__art img {
  position: absolute;
  left: calc(-320 * var(--u));
  top: calc(-403 * var(--u));
  width: calc(1190 * var(--u));
  max-width: none;
}

/* Bekannt aus */
.brands { height: calc(286 * var(--u)); background: var(--blue); }
.brands h2 {
  padding-top: calc(35 * var(--u));
  text-align: center;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: calc(31.2 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: calc(5.8 * var(--u));
  text-indent: calc(5.8 * var(--u));
}

/* Endlos laufendes Logo-Band (rechts nach links).
   Die Spur enthaelt die Liste zweimal; verschoben wird um genau eine
   Listenbreite plus einen Abstand, dadurch ist der Uebergang nahtlos.
   Formel: -50% der Spur ist eine halbe Luecke zu wenig, daher - 30px. */
.marquee {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100 * var(--u));
  height: calc(140 * var(--u));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(70 * var(--u)), #000 calc(100% - 70 * var(--u)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 calc(70 * var(--u)), #000 calc(100% - 70 * var(--u)), transparent);
}
.marquee__track {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  gap: var(--marquee-gap);
}
.marquee__group li {
  width: calc(140 * var(--u));
  height: calc(140 * var(--u));
  flex: none;
}
.marquee__group img { width: 100%; height: 100%; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); }
}

/* ==========================================================================
   IKIGAI  (y 3518-4414)
   ========================================================================== */
.ikigai { height: calc(896 * var(--u)); margin-top: calc(1 * var(--u)); background: var(--grey-100); }

.ikigai__wordmark {
  position: absolute;
  left: calc(128 * var(--u));
  top: calc(56.5 * var(--u));
  font-family: var(--f-heavy);
  font-weight: 800;
  font-size: calc(94.8 * var(--u));
  line-height: calc(100 * var(--u));
  letter-spacing: calc(1.93 * var(--u));
  text-transform: uppercase;
  color: var(--red);
}
.ikigai__claim {
  position: absolute;
  left: calc(131 * var(--u));
  top: calc(143.3 * var(--u));
  font-family: var(--f-heavy);
  font-weight: 800;
  font-size: calc(45.6 * var(--u));
  line-height: calc(52 * var(--u));
  letter-spacing: calc(0.46 * var(--u));
  text-transform: uppercase;
}
.ikigai__text {
  position: absolute;
  left: calc(132 * var(--u));
  top: calc(220.6 * var(--u));
  width: calc(640 * var(--u));
  font-size: calc(18.3 * var(--u));
  line-height: calc(26 * var(--u));
}

.ikigai__cover {
  position: absolute;
  left: calc(133 * var(--u));
  top: calc(427 * var(--u));
  width: calc(308 * var(--u));
  height: calc(314.5 * var(--u));
  --frame: url("../svg/frame-ikigai-cover.svg");
}
.ikigai__cover img { width: 100%; height: 100%; object-fit: cover; }

.ikigai__links {
  position: absolute;
  left: calc(485 * var(--u));
  top: calc(449 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
.ikigai__links a {
  display: flex;
  align-items: center;
  width: calc(234 * var(--u));
  height: calc(60 * var(--u));
  border-radius: calc(30 * var(--u));
  background: var(--podcast-bg);
  color: #fff;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: calc(19 * var(--u));
  transition: filter .18s ease, transform .18s ease;
}
.ikigai__links a:hover { filter: brightness(1.08); transform: translateX(calc(3 * var(--u))); }
.ikigai__links img {
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  margin-left: calc(8 * var(--u));
  margin-right: calc(12 * var(--u));
  border-radius: 50%;
}

.ikigai__video {
  position: absolute;
  left: calc(928 * var(--u));
  top: calc(94 * var(--u));
  width: calc(354 * var(--u));
  height: calc(620 * var(--u));
  --frame: url("../svg/box-video.svg");
}
.ikigai__video-outer {
  position: absolute;
  left: calc(897.9 * var(--u));
  top: calc(62.9 * var(--u));
  width: calc(414.8 * var(--u));
  height: calc(680.7 * var(--u));
  background: url("../svg/frame-ikigai-video.svg") no-repeat center / 100% 100%;
  pointer-events: none;
}
/* Standbild ODER Film - seit 1.4.0 liegt dort ein echtes Video, das Poster
   ist dasselbe Bild wie vorher. */
.ikigai__video img,
.ikigai__video video {
  position: absolute;
  left: calc(3.7 * var(--u));
  top: calc(4 * var(--u));
  width: calc(346.6 * var(--u));
  height: calc(612 * var(--u));
  object-fit: cover;
}
/* Laeuft der Film, verschwindet der runde Knopf und die Steuerleiste des
   Browsers uebernimmt. */
.ikigai__video.is-playing .ikigai__play { display: none; }
.ikigai__play {
  position: absolute;
  left: calc(121 * var(--u));
  top: calc(253 * var(--u));
  width: calc(112 * var(--u));
  height: calc(113 * var(--u));
  border-radius: 50%;
  background: rgba(0, 0, 0, .82);
  display: grid;
  place-items: center;
  transition: transform .18s ease, background-color .18s ease;
}
.ikigai__play:hover { transform: scale(1.06); background: #000; }
.ikigai__play svg { width: calc(51 * var(--u)); height: calc(58 * var(--u)); color: #fff; margin-left: calc(6 * var(--u)); }

/* ==========================================================================
   Manga-Trennband  (y 4351-4551, ragt in die IKIGAI-Sektion hinein)
   ========================================================================== */
.divider { position: relative; height: calc(133 * var(--u)); background: #fff; }
.divider img {
  position: absolute;
  left: 0;
  top: calc(-63 * var(--u));
  width: calc(1440 * var(--u));
  height: calc(200 * var(--u));
  max-width: none;
  object-fit: cover;
}

/* ==========================================================================
   Aktuelle Beitraege  (y 4547-5352)
   ========================================================================== */
.posts { height: calc(805 * var(--u)); background: #fff; }

.posts__head {
  position: absolute;
  left: calc(59 * var(--u));
  top: calc(53.5 * var(--u));
  font-family: var(--f-heavy);
  font-weight: 800;
  font-size: calc(94 * var(--u));
  line-height: calc(100 * var(--u));
  letter-spacing: calc(1.58 * var(--u));
  text-transform: uppercase;
}

.post-main {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(167 * var(--u));
  width: calc(925 * var(--u));
  height: calc(550 * var(--u));
  background: var(--grey-200);
  --frame: url("../svg/frame-post-main.svg");
}
.post-main__media {
  position: absolute;
  left: calc(-2 * var(--u));
  top: calc(-2 * var(--u));
  width: calc(335 * var(--u));
  height: calc(554 * var(--u));
  overflow: hidden;
  --frame: url("../svg/box-post-media.svg");
}
.post-main__media::after { inset: 0; }
/* Bild ODER Video - die Redaktion entscheidet beim Einsetzen. */
.post-main__media img,
.post-main__media video {
  position: absolute;
  left: calc(2 * var(--u));
  top: 0;
  width: calc(331 * var(--u));
  height: calc(554 * var(--u));
  max-width: none;
  object-fit: cover;
  object-position: center;
}



.post-main__body { position: absolute; left: calc(385 * var(--u)); top: calc(38 * var(--u)); width: calc(412 * var(--u)); }
.post-main__body h3 {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: calc(35.5 * var(--u));
  line-height: calc(38 * var(--u));
  letter-spacing: calc(0.1 * var(--u));
  text-transform: uppercase;
}
.post-main__date { margin-top: calc(10 * var(--u)); font-size: calc(20.2 * var(--u)); line-height: calc(24 * var(--u)); }
.post-main__text { margin-top: calc(8 * var(--u)); font-size: calc(14.77 * var(--u)); line-height: calc(18 * var(--u)); }
.post-main__text p + p { margin-top: calc(18 * var(--u)); }
.post-main__text a { color: #145dfb; text-decoration: underline; }
.post-main__cta { position: absolute; left: calc(386 * var(--u)); top: calc(465 * var(--u)); }

.post-side {
  position: absolute;
  left: calc(1025 * var(--u));
  top: calc(167 * var(--u));
  width: calc(355 * var(--u));
  height: calc(550 * var(--u));
  --frame: url("../svg/frame-post-side.svg");
}
/* Feste Hoehe statt "height: auto".
   Mit auto bestimmt das Seitenverhaeltnis der Datei die Hoehe: das
   Originalbild (760 x 1218) ergibt bei 355 Breite genau 568.9 - es fuellt
   den Rahmen also zufaellig. Laedt die Redaktion etwas Querformatiges
   hoch, stuende der Rahmen darunter leer. Deshalb dieselbe Logik wie im
   grossen Medienfeld: fester Kasten, object-fit uebernimmt den Beschnitt.
   569 ist die Hoehe, die das Originalbild heute schon hat - an ihm
   aendert sich dadurch nichts. */
.post-side img,
.post-side video {
  position: absolute;
  left: 0;
  top: calc(-9 * var(--u));
  width: 100%;
  height: calc(569 * var(--u));
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   Kontakt  (y 5352-6003)
   ========================================================================== */
/* overflow:clip wie bei .refs - die freigestellte Figur ist hoeher als ihr
   Rahmen. Der clip-path blendet sie unten zwar aus, ihre Layoutbox bleibt
   aber stehen und haengt 56 px unter der Seite: scrollbarer Leerraum unter
   der Fussleiste. "clip" statt "hidden", weil es keinen Scrollcontainer
   erzeugt und damit die sticky Kopfzeile nicht beruehren kann. */
.contact { height: calc(628 * var(--u)); background: var(--grey-100); overflow: clip; }

.contact__head {
  position: absolute;
  left: calc(47 * var(--u));
  top: calc(32.2 * var(--u));
  font-family: var(--f-heavy);
  font-weight: 800;
  font-size: calc(95.5 * var(--u));
  line-height: calc(100 * var(--u));
  letter-spacing: calc(0.98 * var(--u));
  color: var(--red);
  text-transform: uppercase;
}

.contact__photo {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(132 * var(--u));
  width: calc(395 * var(--u));
  height: calc(436 * var(--u));
  --frame: url("../svg/frame-contact-left.svg");
}
.contact__photo .clip {
  background: var(--grey-300);
  clip-path: polygon(0 0, 100% 0, 76.58% 100%, 0 100%);
}
.contact__photo img { position: absolute; left: calc(-129 * var(--u)); top: 0; width: calc(654 * var(--u)); max-width: none; }

.contact__card {
  position: absolute;
  left: calc(427 * var(--u));
  top: calc(132 * var(--u));
  width: calc(606.5 * var(--u));
  height: calc(312.5 * var(--u));
  --frame: url("../svg/frame-contact-mid.svg");
}
.contact__card .clip {
  background: #fff;
  clip-path: polygon(10.63% 0, 100% 0, 88.95% 100%, 0 100%);
}

.contact__icon {
  position: absolute;
  left: calc(120 * var(--u));
  top: calc(92 * var(--u));
  width: calc(114 * var(--u));
  height: calc(115 * var(--u));
  display: grid;
  place-items: center;
  color: var(--black);
}
.contact__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--peach);
  border-radius: 50%;
}
.contact__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../svg/circle-mail.svg") no-repeat center / 100% 100%;
}
.contact__icon svg { position: relative; width: calc(63 * var(--u)); height: calc(63 * var(--u)); }

.contact__lead {
  position: absolute;
  left: calc(257 * var(--u));
  top: calc(109.5 * var(--u));
  font-family: var(--f-heavy);
  font-weight: 800;
  font-size: calc(23.14 * var(--u));
  line-height: calc(26 * var(--u));
}
.contact__mail {
  position: absolute;
  left: calc(258 * var(--u));
  top: calc(161.2 * var(--u));
  font-size: calc(20.42 * var(--u));
  line-height: calc(26 * var(--u));
  transition: color .15s ease;
}
.contact__mail:hover { color: var(--red); }

.contact__art {
  position: absolute;
  left: calc(985 * var(--u));
  top: calc(132 * var(--u));
  width: calc(395 * var(--u));
  height: calc(436 * var(--u));
  --frame: url("../svg/frame-contact-right.svg");
}
.contact__art .clip {
  background: var(--blue);
  clip-path: polygon(23.42% 0, 100% 0, 100% 100%, 0 100%);
}
.contact__art .popout { clip-path: inset(-200% -200% 0 -200%); }
.contact__art img { position: absolute; left: calc(-255 * var(--u)); top: calc(-350 * var(--u)); width: calc(865 * var(--u)); max-width: none; }

.contact__social {
  position: absolute;
  left: calc(458 * var(--u));
  top: calc(471 * var(--u));
  display: flex;
  gap: calc(33 * var(--u));
}
.contact__social a {
  position: relative;
  width: calc(92 * var(--u));
  height: calc(93 * var(--u));
  display: grid;
  place-items: center;
  color: #1e1e1e;
  transition: transform .18s ease, color .18s ease;
}
.contact__social a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../svg/circle-social.svg") no-repeat center / 100% 100%;
}
.contact__social a:hover { transform: translateY(calc(-4 * var(--u))); color: var(--red); }
.contact__social svg { position: relative; width: calc(47 * var(--u)); height: calc(47 * var(--u)); }

/* ==========================================================================
   Footer  (y 5980-6302)
   ========================================================================== */
.site-footer {
  position: relative;
  height: calc(322 * var(--u));
  background: var(--footer-bg);
  color: #fff;
}
.site-footer__logo {
  position: absolute;
  left: calc(247 * var(--u));
  top: calc(116 * var(--u));
  width: calc(148 * var(--u));
  color: #fff;
}
.site-footer__logo svg { width: 100%; height: auto; display: block; }

.site-footer nav { position: absolute; top: calc(77.6 * var(--u)); display: grid; gap: calc(22 * var(--u)); }
.site-footer nav.col-1 { left: calc(531 * var(--u)); }
.site-footer nav.col-2 { left: calc(736 * var(--u)); }
.site-footer nav.col-3 { left: calc(1074 * var(--u)); }
.site-footer nav a {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: calc(18.7 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: calc(0.3 * var(--u));
  text-transform: uppercase;
  transition: color .15s ease;
}
.site-footer nav a:hover { color: var(--red); }

.site-footer__social { position: absolute; left: calc(925 * var(--u)); top: calc(74 * var(--u)); display: grid; gap: calc(6 * var(--u)); }
.site-footer__social a {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  display: grid;
  place-items: center;
  color: #fff;
  transition: color .15s ease, transform .15s ease;
}
.site-footer__social a:hover { color: var(--red); transform: scale(1.1); }
.site-footer__social svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }

.site-footer__lang {
  position: absolute;
  right: calc(26 * var(--u));
  top: calc(258 * var(--u));
  display: flex;
  gap: calc(12 * var(--u));
}
.site-footer__lang a {
  width: calc(35.2 * var(--u));
  height: calc(35.2 * var(--u));
  border-radius: 50%;
  overflow: hidden;
  opacity: .5;
  transition: opacity .15s ease, transform .15s ease;
}
.site-footer__lang a:hover { opacity: 1; transform: scale(1.08); }
.site-footer__lang a[aria-current="true"] { opacity: 1; }
.site-footer__lang svg { width: 100%; height: 100%; }

.site-footer__meta {
  position: absolute;
  left: 0; right: 0;
  top: calc(291 * var(--u));
  text-align: center;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: calc(13 * var(--u));
  letter-spacing: calc(0.8 * var(--u));
  text-transform: uppercase;
}
.site-footer__meta a:hover { color: var(--red); }

/* ==========================================================================
   Textseiten (Impressum / Datenschutz)
   ========================================================================== */
.legal { background: #fff; padding: calc(80 * var(--u)) calc(60 * var(--u)) calc(120 * var(--u)); }
.legal__inner { max-width: calc(760 * var(--u)); margin-inline: auto; }
.legal h1 {
  font-family: var(--f-heavy);
  font-weight: 800;
  font-size: calc(64 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(1.5 * var(--u));
  text-transform: uppercase;
}
.legal h2 {
  margin-top: calc(44 * var(--u));
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: calc(24 * var(--u));
  line-height: 1.3;
}
.legal h3 { margin-top: calc(28 * var(--u)); font-family: var(--f-ui); font-weight: 600; font-size: calc(18 * var(--u)); }
.legal p, .legal li { font-size: calc(17 * var(--u)); line-height: calc(27 * var(--u)); }
.legal p { margin-top: calc(16 * var(--u)); }
.legal ul { margin-top: calc(16 * var(--u)); padding-left: calc(22 * var(--u)); list-style: disc; }
.legal a { color: var(--red); text-decoration: underline; }
.legal .todo {
  display: block;
  margin-top: calc(16 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  border-left: calc(4 * var(--u)) solid var(--red);
  background: #fff4f4;
  font-size: calc(15 * var(--u));
  line-height: calc(23 * var(--u));
}

/* ==========================================================================
   Reduzierte Bewegung
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* Ohne Animation gibt es auch keine automatische Rotation - der Ring
     haette dann keine Bedeutung mehr. */
  .works__timer { display: none; }
  /* Logo-Band steht still, bleibt aber per Wischen/Scrollen erreichbar */
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none !important; }
  .marquee__group[aria-hidden="true"] { display: none; }
}