/* ══════════════════════════════════════════════════════════════════
   Platzhalterseite katjalinke.de (Oktober 2026), bis die neue Seite
   fertig ist. Eigene Datei statt <style>, damit die Seite unter der
   strengen CSP (style-src 'self') laeuft.
   Vorlage ist das Cover von „Superkraft Atmen“ (Ullstein allegria),
   so nah wie moeglich am Original: Papier, Name oben, SUPER / KRAFT in
   schmalen Grossbuchstaben mit Blauverlauf, das tuerkise Wellenband aus
   drei Huegeln, Katja freigestellt vor dem tuerkisen Kreis, darunter
   ATMEN und der Untertitel.
   Signature-Element: das Wellenband hebt und senkt sich wie beim Atmen,
   vier Sekunden ein, sechs Sekunden aus.
   ══════════════════════════════════════════════════════════════════ */

/* Schriften selbst gehostet (DSGVO). Fehlen sie, greifen Systemschriften. */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Titel wie auf dem Cover: SemiBold (Strich 17 %% der Versalhoehe), 700 bleibt fuers Logo */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Antiqua fuer Autorenzeile und Untertitel, wie auf dem Cover (Source Serif 4, OFL) */
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-var-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Marke (Farben vom Cover gemessen) ─────────────────────────── */
:root {
  --papier: #f8f4ea;       /* Grund des Covers */
  --weiss: #ffffff;
  --tinte: #1d2530;        /* Text, 14,6:1 auf Papier */
  --leise: #4f5965;        /* Nebentext, 6,6:1 auf Papier */
  --blau-tief: #0a46a6;    /* dunkles Titelblau, 8,1:1 auf Papier */
  --blau: #2c7fe6;         /* helles Titelblau, nur in der grossen Schrift */
  --blau-licht: #5aa4f2;   /* Glanz im Verlauf */
  --tuerkis: #3aa4c2;      /* Kreis hinter dem Portraet */
  --welle-a: #a0dce5;      /* Linienfarbe aus Jens' Wellen-SVG */
  --linie: #e4dccb;
  --titel: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --display: 'Outfit', 'Century Gothic', 'Segoe UI', system-ui, sans-serif;
  --sans: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --rand: clamp(1rem, 5vw, 3rem);
  /* Hoehe der Wellenbuehne zwischen KRAFT und ATMEN. Die Buehne ist
     1600 x 720 Einheiten (Cover-Massstab), also 2,222 x so breit wie hoch;
     bei 45vw ist sie genau so breit wie der Bildschirm. */
  --band: clamp(17rem, 45vw, 42rem);
}

/* ── Grundregeln ───────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--papier) url('/bilder/papier.webp') repeat;   /* Koernung vom Cover */
  overflow-x: clip;
}
a {
  color: var(--blau-tief);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--blau-tief);
  outline-offset: 3px;
}
h1,
h2 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.05;
}
.nowrap {
  white-space: nowrap;
}
.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sprung {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--weiss);
  color: var(--tinte);
}
.sprung:focus {
  top: 1rem;
}
.rahmen {
  width: min(72rem, 100% - 2 * var(--rand));
  margin-inline: auto;
}
.leise {
  color: var(--leise);
}
.button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: var(--blau-tief);
  color: var(--weiss);
  font-weight: 600;
  text-decoration: none;
}
.button:hover {
  background: #083683;
}

/* ── Kopf ──────────────────────────────────────────────────────── */
.kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 0.75rem;
}
/* Logo (Jens, 04.11.2026: Fassung A, Atemringe): Tuerkis-Kreis mit KL, zwei
   Ringe, die sich beim Ausatmen weiten, daneben der Name im Blauverlauf des
   Covers. Inline-SVG, damit die Schrift der Seite greift und die Ringe atmen
   koennen; ohne Bewegungswunsch stehen sie voll ausgebreitet. */
.marke a {
  display: block;
}
.logo {
  display: block;
  height: clamp(3.25rem, 4.4vw, 4rem);
  width: auto;
  overflow: visible;
}
.logo__ringe circle {
  fill: none;
  stroke: var(--welle-a);
  stroke-width: 4;
}
.logo__ringe circle:nth-child(2) {
  stroke-width: 2.5;
  opacity: 0.55;
}
.logo__kern {
  fill: var(--tuerkis);
}
.logo__kl,
.logo__name {
  font-family: var(--titel);
  font-weight: 700;
}
.logo__kl {
  font-size: 62px;
  letter-spacing: -1px;
  text-anchor: middle;
  fill: var(--weiss);
}
.logo__name {
  font-size: 64px;
  letter-spacing: 2px;
}
.kopf__rolle {
  font-size: 0.9375rem;
  color: var(--leise);
}
.kopf__zurueck {
  display: inline-block;
  padding-block: 0.25rem;
}

/* ── Das Cover ─────────────────────────────────────────────────── */
.cover {
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
/* Titel in Cover-Groesse (Jens, 04.11.2026: 1:1 wie das Buch). Auf dem Cover
   sind die Versalien 275 Einheiten hoch (Schriftgrad 393 bei Barlow Condensed,
   Versalhoehe 0,7 em), Zeilenabstand 330 Einheiten, die Woerter 1040 bis 1139
   Einheiten breit; 1 Einheit = Band/720. Am Handy begrenzt die Bildschirm-
   breite den Schriftgrad, sonst passt KRAFT nicht in die Zeile. */
.cover__titel {
  --titel-groesse: min(calc(var(--band) * 0.5458), 28vw);
  font-family: var(--titel);
  font-weight: 600;
  font-size: var(--titel-groesse);
  line-height: 0.84;
  letter-spacing: 0.096em;
  text-transform: uppercase;
}
.cover__wort:nth-child(1) { letter-spacing: 0.147em; }   /* SUPER */
.cover__wort--atmen       { letter-spacing: 0.127em; }   /* ATMEN */
/* Autorenzeile: Antiqua-Versalien mit weiter Laufweite, auf dem Cover 56
   Einheiten hoch und 830 Einheiten breit */
.cover__autorin {
  margin-bottom: 0.95em;        /* 149 Einheiten bis zur Oberkante von SUPER */
  text-transform: uppercase;
  font-family: var(--serif);
  font-size: calc(min(calc(var(--band) * 0.5458), 28vw) * 0.215);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.1em;        /* gemessen: 0,2em ergab 955 statt 830 Einheiten Breite */
  color: var(--tinte);
}
/* Blauverlauf wie die Folienpraegung auf dem Cover: oben hell, unten
   dunkel, dazu ein langsam wandernder Glanz. Ohne Bewegungswunsch steht er. */
.cover__wort {
  display: block;
  color: var(--blau-tief);
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 46%, rgba(255, 255, 255, 0.28) 50%, transparent 66%) 0% 0% / 260% 100% no-repeat,
    linear-gradient(180deg, var(--blau-licht) 0%, var(--blau) 42%, var(--blau-tief) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Die Schrift steht immer vor den Baendern (Jens, 03.11.2026: die
   Animation muss hinter der Schrift bleiben, die Schrift vorne lesbar). */
.cover__wort {
  position: relative;
  z-index: 2;
}

/* Das Wellenband: die Buehne liegt zwischen KRAFT und ATMEN, mittig und
   so breit wie der Bildschirm. Nichts wird beschnitten: Die Baender duerfen
   oben knapp hinter KRAFT und unten hinter ATMEN laufen, wie auf dem Cover. */
.cover__band {
  position: relative;
  display: block;
  height: var(--band);
  margin-top: -0.112em;     /* Bandoberkante 36 Einheiten ueber der KRAFT-Grundlinie, wie auf dem Cover */
  margin-bottom: -0.356em;  /* ATMEN-Versalien beginnen 93 Einheiten ueber der Bandunterkante */
  z-index: 1;
}
.cover__buehne {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: calc(var(--band) * 2.2222);
  margin-left: calc(var(--band) * -1.1111);
}
.welle {
  position: absolute;
  top: 0;
  left: -26.25%;          /* 420 von 1600 Einheiten Verlaengerung */
  width: 152.5%;          /* 2440 von 1600 */
  height: 100%;
  max-width: none;
  overflow: visible;
  transform-origin: 50% 100%;
}
.welle-defs {
  position: absolute;
}
.strang {
  fill: var(--welle-a);
}
.unterlage {
  fill: var(--papier);
}

/* Die Figur: Kreis und Portraet als Einheit, in Cover-Massen. Der Kreis hat
   462 Einheiten Durchmesser und liegt bei x 1012, y 119 der Buehne. Das
   Bild (900 x 838 Pixel, Kante weich vom Cover) ist so skaliert,
   dass der Kopf 54 Einheiten ueber den Kreis ragt und unter den Armen
   16 Einheiten Kreisbogen sichtbar bleiben. Die Figur liegt immer vor
   den Baendern, unabhaengig von der Reihenfolge im HTML. */
.cover__figur {
  position: absolute;
  z-index: 1;
  top: 16.5%;
  left: 63.25%;
  width: 28.9%;
  aspect-ratio: 1;
}
.cover__figur::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--tuerkis);
}
.cover__figur picture {
  display: block;
}
.cover__figur img {
  position: absolute;
  left: -16%;
  top: -11.6%;
  width: 132.5%;
  max-width: none;
  height: auto;
}
/* Untertitel in der Antiqua des Covers, zwei Zeilen, Umbruch nach „Energie,“ */
.cover__untertitel {
  margin: calc(var(--band) * 0.12) auto 0;   /* 86 Einheiten unter ATMEN, wie auf dem Cover */
  max-width: 20.5em;
  font-family: var(--serif);
  font-size: max(1.125rem, calc(min(calc(var(--band) * 0.5458), 28vw) * 0.145));
  line-height: 1.55;
  color: var(--tinte);
}
.cover__info {
  margin-top: 0.75rem;
  color: var(--leise);
}

/* Bewegung, nur wenn gewuenscht. Beim Laden wischt das Wellenband von
   links nach rechts herein, die Figur taucht auf, sobald das Band den
   Kreis erreicht. Danach atmet alles langsam: neun Sekunden je Zug, die
   Figur hebt sich mit. Ohne Bewegungswunsch steht der Endzustand. */
@media (prefers-reduced-motion: no-preference) {
  /* Hereinwischen: eine weiche Maske laeuft von links nach rechts ueber jede
     Ebene, die drei Ebenen kurz nacheinander. Danach atmet jede Ebene mit
     eigenem Einsatz, so bewegen sie sich leicht gegeneinander. Der Versatz
     bleibt klein, sonst werden die Schnittkanten der Ebenen sichtbar. */
  .welle {
    -webkit-mask-image: linear-gradient(90deg, #000 0 36%, transparent 64%);
    mask-image: linear-gradient(90deg, #000 0 36%, transparent 64%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation:
      wischen 2.8s cubic-bezier(0.25, 0.1, 0.25, 1) both,
      atmen 9s cubic-bezier(0.45, 0, 0.55, 1) 3.3s infinite;
  }
  .welle--c { animation-delay: 0s, 3.3s; }
  .welle--b { animation-delay: 0.3s, 3.8s; }
  .welle--a { animation-delay: 0.6s, 4.3s; }
  @keyframes wischen {
    from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to   { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  }
  @keyframes atmen {
    0%   { transform: translateY(0) scaleY(1); }
    45%  { transform: translateY(-0.7%) scaleY(1.02); }
    100% { transform: translateY(0) scaleY(1); }
  }
  .cover__figur {
    animation:
      auftauchen 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 1.6s both,
      schweben 9s cubic-bezier(0.45, 0, 0.55, 1) 3.3s infinite;
  }
  @keyframes auftauchen {
    from { opacity: 0; transform: translateY(3%) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes schweben {
    0%   { transform: translateY(0); }
    45%  { transform: translateY(-1.2%); }
    100% { transform: translateY(0); }
  }
  .cover__wort {
    animation: glanz 11s ease-in-out infinite;
  }
  /* Das Logo atmet im Takt der Baender: neun Sekunden, Start mit ihnen. */
  .logo__ringe circle {
    transform-origin: 75px 75px;
    animation: logo-ringe 9s cubic-bezier(0.45, 0, 0.55, 1) 3.3s infinite backwards;
  }
  .logo__ringe circle:nth-child(2) {
    animation-delay: 3.6s;
  }
  .logo__kern {
    transform-origin: 75px 75px;
    animation: logo-kern 9s cubic-bezier(0.45, 0, 0.55, 1) 3.3s infinite;
  }
  @keyframes logo-ringe {
    0%   { transform: scale(0.86); opacity: 0.15; }
    45%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.86); opacity: 0.15; }
  }
  @keyframes logo-kern {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.04); }
    100% { transform: scale(1); }
  }
  @keyframes glanz {
    0%, 20%  { background-position: 100% 0%, 0% 0%; }
    60%, 100% { background-position: 0% 0%, 0% 0%; }
  }
}

/* ── Ueber Katja ───────────────────────────────────────────────── */
.ueber {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--weiss);
  border-block: 1px solid var(--linie);
}
.ueber h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--tinte);
}
.ueber p {
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
}
.ueber__raster {
  display: grid;
  gap: 0.75rem 4rem;
}

/* ── Buecher ───────────────────────────────────────────────────── */
.buch {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}
.buch h2 {
  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
  color: var(--tinte);
}
.buch__wann {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--leise);
}
.buch__untertitel {
  margin-top: 0.5rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.1875rem, 2.4vw, 1.5rem);
  color: var(--leise);
}
.buch__text {
  margin-top: 1.25rem;
}
.buch__raster {
  display: grid;
  gap: 1rem 4rem;
}
.haendler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 0.75rem;
  list-style: none;
}
.haendler a {
  display: inline-block;
  padding-block: 0.25rem;
  font-weight: 600;
}

/* ── Kontakt ───────────────────────────────────────────────────── */
.kontakt {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--linie);
}
.kontakt h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--tinte);
}
.kontakt__raster {
  display: grid;
  gap: 0.75rem 4rem;
}
.kontakt__raster p + p {
  margin-top: 0.75rem;
}
.kontakt a {
  overflow-wrap: anywhere;
}

/* ── Fuss ──────────────────────────────────────────────────────── */
.fuss {
  background: var(--blau-tief);
  color: #dfe9f7;
  font-size: 0.9375rem;
}
.fuss a {
  color: #dfe9f7;
}
.fuss a:focus-visible {
  outline-color: var(--weiss);
}
.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.5rem;
}
/* Nur die Liste ist flex, nie der Absatz mit dem Credit */
.fuss__menue {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
}
.fuss__menue a {
  display: inline-block;
  padding-block: 0.25rem;
}
.fuss__menue a[aria-current='page'] {
  color: var(--weiss);
}

/* ── Rechtsseiten ──────────────────────────────────────────────── */
.recht {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* Spalte buendig mit dem Logo im Kopf, nicht zentriert */
.recht__text > * {
  max-width: 46rem;
}
.recht h1 {
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  color: var(--tinte);
}
.recht h2 {
  margin-top: 2.25rem;
  font-family: var(--sans);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--tinte);
}
.recht p {
  margin-top: 0.75rem;
}

/* ── Handy: Buehne hoeher als breit, die Figur bleibt am rechten Rand ── */
@media (max-width: 39.99rem) {
  :root {
    --band: clamp(15rem, 70vw, 24rem);
  }
  /* Die Buehne ist breiter als der Bildschirm und mittig; die Figur
     haengt deshalb nicht an der Buehne, sondern am Bildschirmrand. */
  .cover__figur {
    left: auto;
    right: calc(var(--band) * 1.1111 - 50vw + 4vw);
  }
}

/* ── Ab Tablet quer ────────────────────────────────────────────── */
@media (min-width: 56rem) {
  .ueber__raster,
  .buch__raster,
  .kontakt__raster {
    grid-template-columns: 1fr 1.4fr;
  }
  /* Rechte Spalte startet auf Hoehe der Ueberschrift, nicht der Zeile darueber */
  .buch__raster > div:last-child > .buch__text:first-child {
    margin-top: 2.25rem;
  }
}