/* ==========================================================================
   Gefühlsausbruch – Stylesheet
   Farben und Geometrie stammen aus "Handyseite.svg" (oberes Quadrat).
   ========================================================================== */

/* --- Schrift (selbst gehostet, kein externer CDN) ------------------------ */

@font-face {
  font-family: 'Reem Kufi';
  src: url('../fonts/reem-kufi-latin.woff2') format('woff2');
  font-weight: 400 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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Reem Kufi';
  src: url('../fonts/reem-kufi-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design-Tokens ------------------------------------------------------- */

:root {
  /* Markenfarben, direkt aus dem SVG übernommen */
  --rot:          #aa0000;  /* Ausrufe, "ausbruch", Überschriften */
  --rot-hell:     #f80037;  /* Schriftzug "Gefühls" */
  --gruen:        #b1e299;  /* Menü, Riss */
  --gruen-blass:  #c8f0d1;  /* Linien, Pflanze */
  --gruen-blatt:  #aade87;  /* Blätter */

  --text:         #402c2c;  /* Fließtext: sehr dunkles Warmgrau */
  --text-leise:   #7a6a6a;
  --papier:       #ffffff;

  /* Geometrie aus dem Original (Bezugsbreite 270,58 Einheiten) */
  --rand:         4.4%;     /* linker/rechter Rand  (11,8 / 270,58) */
  --menu-breite:  90.8%;    /* Breite der Menülinie (245,6 / 270,58) */
  --menu-neigung: 4.7deg;   /* Neigung der handgezogenen Linie */

  --seite-max:    1024px;

  /* --- Zusammenschieben der Kopfzeile beim Scrollen -------------------
     Alle Höhen sind Prozentwerte der Seitenbreite, damit die Kopfzeile
     auf jedem Bildschirm gleich proportioniert bleibt.                 */
  --t:              0;      /* Fortschritt 0 = ausgeklappt, 1 = schmal
                               (wird beim Scrollen von nav.js gesetzt)  */
  --art-hoehe:      24.9%;  /* Höhe der Kopfgrafik */
  --art-einzug:     24.9%;  /* davon verschwindet beim Scrollen         */
  --nav-hochzug:    2.2%;   /* so weit rutscht die Menüleiste anfangs
                               unter die Ausrufe                        */
  --logo-schrumpf:  0.61;   /* Logo endet bei 39 % seiner Größe         */
}

/* --- Grundlagen ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Der Browser korrigiert die Scrollposition sonst selbsttätig, sobald
     die Kopfzeile schrumpft – das würde gegen die Bewegung arbeiten. */
  overflow-anchor: none;
  background: var(--papier);
  color: var(--text);
  font-family: 'Reem Kufi', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: var(--seite-max);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--rot);
  color: #fff;
  padding: 0.6em 1em;
  z-index: 10;
}
.skip-link:focus { left: 0; top: 0; }

/* --- Kopfbereich --------------------------------------------------------- */

/* Die Kopfzeile bleibt beim Scrollen am oberen Rand stehen und schiebt
   sich dabei zusammen. "flow-root" sorgt dafür, dass der Freiraum unter
   der Menülinie zur Kopfzeile gehört – sonst deckt ihr weißer Grund den
   durchlaufenden Text nicht ab. */
.masthead {
  display: flow-root;
  background: var(--papier);
  padding-top: calc(clamp(0.5rem, 2vw, 1.5rem) * (1 - 0.45 * var(--t)));
  /* Was die Kopfzeile beim Zusammenschieben an Höhe verliert, bekommt die
     Seite hier als Abstand zurück. Nur so bleibt die Gesamthöhe der Seite
     konstant; andernfalls zieht der Browser am Seitenende die
     Scrollposition zurück und die Seite fängt an zu zittern.
     Den Wert setzt nav.js beim Scrollen. */
  margin-bottom: var(--ausgleich, 0px);
}

/* Oben stehen bleiben darf sie nur, wenn sie sich auch zusammenschieben
   kann – sonst würde die volle Kopfzeile den Text dauerhaft verdecken. */
.js .masthead {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Ausrufe links, Logo rechts. Die Fläche ist so hoch wie ein fester
   Anteil ihrer Breite; beide Grafiken liegen darin an ihrem Originalplatz
   und behalten ihre Proportionen. Der negative Abstand nach unten zieht
   die Menüleiste beim Scrollen nach oben. */
.masthead__art {
  position: relative;
  height: 0;
  padding-top: var(--art-hoehe);
  /* Ein einziger Abstand für beides: den anfänglichen Hochzug der
     Menüleiste und das Wegschieben der Kopfgrafik. Zwei getrennte
     negative Abstände würden hier verschmelzen statt sich zu addieren –
     die Kopfzeile schrumpfte dann nicht mehr gleichmäßig, und der
     Ausgleich weiter oben ginge nicht mehr auf. */
  margin-bottom: calc(-1 * var(--nav-hochzug) * (1 - var(--t))
                      - var(--art-einzug) * var(--t));
}

/* Das Geschimpfe schrumpft zur oberen linken Ecke und verblasst dabei. */
.claims {
  position: absolute;
  left: var(--rand);
  top: 0;
  width: 48.3%;          /* 130,7 / 270,58 */
  height: auto;
  overflow: visible;     /* falls die Schrift ausnahmsweise fehlt */
  transform-origin: left top;
  transform: scale(calc(1 - 0.5 * var(--t)));
  opacity: calc(1 - 1.5 * var(--t));
}

.claims text {
  font-family: inherit;
  font-weight: 700;
}

/* Der Streit geht weiter: solange er laeuft (Taste "a"), schiebt
   streit.js die beiden Regler --f (Groesse) und --o (Deckkraft) Bild
   fuer Bild weiter. Hier steht absichtlich kein Uebergang - die Bewegung
   kommt aus dem Skript, ein Uebergang wuerde nur dagegenarbeiten und den
   Sprung nach vorne verschleifen. Steht der Streit still, greift diese
   Regel nicht und es gelten die Groessen aus dem Dokument, also die der
   Vorlage. */
.streit-laeuft .claims text {
  font-size: calc(var(--b) * 1px * var(--f, 1));
  opacity: var(--o, 1);
}

/* Das Logo schrumpft zur oberen rechten Ecke und liegt am Ende in dem
   freien Feld zwischen Menülinie und oberem Rand. */
.logo {
  position: absolute;
  right: 1.5%;
  top: calc(6.8% - 3.4% * var(--t));
  width: 27.7%;          /* 74,8 / 270,58 */
  height: auto;
  transform-origin: right top;
  transform: scale(calc(1 - var(--logo-schrumpf) * var(--t)));
}

/* --- Menüleiste ---------------------------------------------------------- */

.mainnav {
  width: var(--menu-breite);
  margin-left: var(--rand);
  /* Platz für den Höhenversatz, den die Drehung rechts erzeugt */
  margin-bottom: calc(var(--menu-breite) * 0.088);
  border-bottom: 1px solid var(--gruen-blass);
  transform: rotate(var(--menu-neigung));
  transform-origin: 0 100%;
}

.mainnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 1.1em;
  margin: 0;
  padding: 0 0 0.3em;
  list-style: none;
}

.mainnav a {
  display: inline-block;
  font-size: clamp(0.95rem, 2.55vw, 1.68rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-decoration: none;
  color: var(--gruen);
  transition: color 0.18s ease;
}

/* Beim Überfahren mit der Maus: gestrichelte Unterstreichung */
.mainnav a:hover,
.mainnav a:focus-visible {
  text-decoration: underline dashed;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.22em;
}

.mainnav a:hover {
  color: var(--gruen-blatt);
}

.mainnav a.is-active,
.mainnav a.is-active:hover {
  color: var(--rot);
}

.mainnav a:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
}

/* --- Inhalt -------------------------------------------------------------- */

.content {
  padding-inline: var(--rand);
  padding-bottom: 3rem;
  scroll-margin-top: 9rem;   /* die Kopfzeile steht darüber */
}

.panel h1 {
  margin: 0 0 1em;
  color: var(--rot);
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.panel p {
  max-width: 62ch;
  margin: 0 0 1.15em;
}

.panel .lead {
  font-size: 1.12em;
  color: var(--rot);
}

.panel .closing {
  margin-top: 1.8em;
  padding-left: 1em;
  border-left: 3px solid var(--gruen);
  color: var(--rot);
}

.panel .placeholder {
  color: var(--text-leise);
  font-style: italic;
}

/* Ohne JavaScript stehen alle Abschnitte untereinander; mit JavaScript
   zeigt die Seite nur den gewählten. */
.js .panel[hidden] { display: none; }

.no-js .panel + .panel {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gruen-blass);
}

/* --- Fuß ----------------------------------------------------------------- */

.pagefoot {
  padding: 1.5rem var(--rand) 2.5rem;
  border-top: 1px solid var(--gruen-blass);
  color: var(--text-leise);
  font-size: 0.85rem;
}
.pagefoot p { margin: 0; }

/* --- Kleine Bildschirme --------------------------------------------------- */

@media (max-width: 34rem) {
  :root {
    --menu-neigung: 3.4deg;
    --art-hoehe:     30.2%;
    /* Auf dem Handy reicht die Menüleiste fast über die volle Breite.
       Daher bleibt oben ein schmales Band stehen, in dem das verkleinerte
       Logo Platz hat, statt die Grafik ganz wegzuschieben. */
    --art-einzug:    16.7%;
    --logo-schrumpf: 0.53;
  }

  /* Kopfgrafik etwas größer, damit Logo und Ausrufe lesbar bleiben */
  .claims { width: 57%; }
  .logo   { width: 34%; right: 0.5%; top: calc(5.6% - 2.5% * var(--t)); }

  /* schmalere Schrift, damit die vier Menüpunkte in einer Zeile bleiben */
  .mainnav a { font-size: clamp(0.78rem, 3.5vw, 1.1rem); letter-spacing: 0.04em; }
  .mainnav ul { gap: 0.1em 0.7em; }
  .mainnav { margin-bottom: calc(var(--menu-breite) * 0.12); }
}

/* Wer Bewegung im Betriebssystem abgestellt hat, bekommt eine ruhende
   Kopfzeile: sie schrumpft nicht, sondern scrollt einfach mit weg.
   nav.js setzt dafür keinen Fortschritt. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .js .masthead { position: static; }
}