/* ==========================================================================
   Skizzenbuch – Ringblock auf dem Holztisch
   Alle Maße in px für die Entwurfsfläche 1920 x 1080 (Engine skaliert).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Farben und Schriften
   -------------------------------------------------------------------------- */
:root {
  --buehne: #2b1e15;              /* warm-dunkle Bühne um die Folie */

  --holz: #a8683b;
  --holz-dunkel: #7c4724;
  --papier: #f4f1ea;
  --papier-linie: #e2ddd2;
  --tinte: #1f2a44;               /* Marineblau für Titel und Text */
  --text: #26304a;
  --textmarker: #f6c445;
  --funken: #ef8a2b;

  /* Aquarell-Farben: Fläche, Rand, Unterstreichung */
  --hellblau: #9ec7ea;  --hellblau-rand: #6fa6d6;  --hellblau-linie: #3d7cc4;
  --gelb: #f5b43a;      --gelb-rand: #e39a1c;      --gelb-linie: #e09a1a;
  --gruen: #9dcb93;     --gruen-rand: #6fae64;     --gruen-linie: #4f9a48;
  --lavendel: #c2aee3;  --lavendel-rand: #9d84cf;  --lavendel-linie: #8366c4;
  --blau: #86b4e5;      --blau-rand: #5b92d3;      --blau-linie: #3a74c4;
  --rose: #f2b8a2;      --rose-rand: #e08f72;      --rose-linie: #d7795a;

  --schrift-titel: "Patrick Hand", "Kalam", cursive;
  --schrift-text: "Kalam", "Patrick Hand", cursive;
  --schrift-marke: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

/* Farbklassen setzen nur Variablen; die Elemente greifen darauf zu */
.farbe-hellblau { --farbe: var(--hellblau); --rand: var(--hellblau-rand); --linie: var(--hellblau-linie); }
.farbe-gelb     { --farbe: var(--gelb);     --rand: var(--gelb-rand);     --linie: var(--gelb-linie); }
.farbe-gruen    { --farbe: var(--gruen);    --rand: var(--gruen-rand);    --linie: var(--gruen-linie); }
.farbe-lavendel { --farbe: var(--lavendel); --rand: var(--lavendel-rand); --linie: var(--lavendel-linie); }
.farbe-blau     { --farbe: var(--blau);     --rand: var(--blau-rand);     --linie: var(--blau-linie); }
.farbe-rose     { --farbe: var(--rose);     --rand: var(--rose-rand);     --linie: var(--rose-linie); }

/* --------------------------------------------------------------------------
   2. Folie und Szene (Holztisch)
   Die Box von .folie gehört der Engine; hier nur Hintergrund und Schrift.
   -------------------------------------------------------------------------- */
.folie {
  padding: 0;
  background: var(--holz);
  color: var(--text);
  font-family: var(--schrift-text);
}

.szene {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background-color: var(--holz);
  /* Maserung: gestrecktes Rauschen als Daten-Grafik (einmal gerastert, kein Live-Filter) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0018 0.085' numOctaves='4' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.32  0 0 0 0 0.16  0 0 0 0 0.06  1.3 0 0 0 -0.48'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(178deg, rgba(255, 220, 170, 0) 0 34px, rgba(255, 220, 170, .07) 34px 38px, rgba(255, 220, 170, 0) 38px 71px),
    radial-gradient(ellipse at 50% 45%, rgba(255, 210, 160, .18), rgba(60, 25, 5, .35) 90%);
}

/* --------------------------------------------------------------------------
   3. Ringblock: Papier, Linien, Doppelring-Bindung
   -------------------------------------------------------------------------- */
.block {
  position: absolute;
  left: 122px;
  top: 36px;
  width: 1680px;
  height: 1008px;
  z-index: 2;
  transform: rotate(-1deg);
  border-radius: 4px 10px 10px 4px;
  background-color: var(--papier);
  background-image: repeating-linear-gradient(to bottom, transparent 0 46px, var(--papier-linie) 46px 48px);
  background-position: 0 28px;
  box-shadow:
    0 2px 3px rgba(40, 20, 5, .35),
    0 22px 46px rgba(40, 20, 5, .45);
}

/* Ringe aus dem SVG-Muster #ringe; ragen links über die Papierkante */
.bindung {
  position: absolute;
  left: -58px;
  top: 22px;
  width: 130px;
  height: calc(100% - 44px);
  overflow: visible;
}

.inhalt {
  position: absolute;
  top: 54px;
  right: 90px;
  bottom: 44px;
  left: 150px;
}

/* --------------------------------------------------------------------------
   4. Tisch-Dekoration (rein CSS/SVG, an den Rändern angeschnitten)
   -------------------------------------------------------------------------- */

/* Kaffeetasse von oben mit Untertasse */
.tasse {
  position: absolute;
  left: -120px;
  top: -130px;
  width: 340px;
  height: 340px;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    #2e170a 0 30%, #4a2812 37%, #6e4426 40%,
    #fbf9f5 41% 52%, #d8d1c5 54%,
    #efebe4 56% 93%, #d3ccc0 97% 100%);
  box-shadow: 6px 14px 26px rgba(30, 12, 2, .45);
}
.tasse::after {               /* Henkel */
  content: "";
  position: absolute;
  left: 236px;
  top: 220px;
  width: 64px;
  height: 30px;
  border-radius: 15px;
  background: #f7f4ee;
  box-shadow: 2px 4px 6px rgba(30, 12, 2, .3);
  transform: rotate(40deg);
}

/* Pflanzenblätter oben rechts */
.pflanze {
  position: absolute;
  right: -20px;
  top: -16px;
  width: 380px;
  height: 340px;
  z-index: 3;
  filter: drop-shadow(4px 10px 10px rgba(30, 12, 2, .35));
}

/* Haftnotizen unten links, teils unter dem Block */
.notiz {
  position: absolute;
  width: 240px;
  height: 240px;
  z-index: 1;
  box-shadow: 2px 8px 14px rgba(30, 12, 2, .35);
}
.notiz--gelb {
  left: -40px;
  bottom: -70px;
  background: linear-gradient(160deg, #fbe07a, #f2cc4e);
  transform: rotate(14deg);
}
.notiz--blau {
  left: -96px;
  bottom: 130px;
  background: linear-gradient(170deg, #bfe0f6, #9ccbec);
  transform: rotate(-9deg);
}

/* Blauer Marker rechts */
.stift {
  position: absolute;
  right: 34px;
  top: 300px;
  width: 52px;
  height: 430px;
  z-index: 3;
  border-radius: 24px 24px 12px 12px;
  background: linear-gradient(90deg, #102a6b, #2f62d2 42%, #5a85e0 52%, #1a3d97);
  box-shadow: 8px 12px 16px rgba(30, 12, 2, .4);
  transform: rotate(-16deg);
}
.stift::before {              /* Kappe mit Ring */
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 0;
  height: 140px;
  border-radius: 26px 26px 6px 6px;
  background: linear-gradient(90deg, #0b1f52, #24489f 45%, #3d68c6 55%, #13317e);
  border-bottom: 6px solid #0a1a45;
}
.stift::after {               /* Clip an der Kappe */
  content: "";
  position: absolute;
  left: 20px;
  top: 14px;
  width: 12px;
  height: 110px;
  border-radius: 6px;
  background: linear-gradient(90deg, #0d2460, #3b66c4);
}

/* --------------------------------------------------------------------------
   5. Wortzeichen, Titel, Untertitel
   -------------------------------------------------------------------------- */
.marke {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--schrift-marke);
  font-weight: 600;
  font-size: 38px;
  line-height: 1;
  color: #2a2f3a;
}
.marke__zeichen { width: 64px; height: 55px; }
.marke--klein { font-size: 30px; }
.marke--klein .marke__zeichen { width: 50px; height: 43px; }

.titel {
  position: relative;
  display: inline-block;
  isolation: isolate;           /* Marker-Strich bleibt hinter dem Text */
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.05;
  color: var(--tinte);
}
.titel__text { position: relative; }
.titel__marker {
  position: absolute;
  left: -14px;
  bottom: -.06em;
  width: calc(100% + 36px);
  height: .36em;
  z-index: -1;
}
.titel__funken {
  position: absolute;
  right: -.62em;
  top: -.3em;
  width: .52em;
  height: .52em;
  color: var(--funken);
}
.titel--gross  { margin-top: 56px; font-size: 124px; }
.titel--mittel { font-size: 76px; }

.untertitel {
  position: relative;
  width: fit-content;
  isolation: isolate;
  margin: 42px 0 0;
  padding: 6px 24px 10px;
  font-family: var(--schrift-titel);
  font-size: 50px;
  line-height: 1.1;
  color: var(--tinte);
}
.untertitel__balken {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.untertitel--klein { margin-top: 18px; font-size: 38px; padding: 4px 20px 8px; }

/* --------------------------------------------------------------------------
   6. Fließtext, Aquarell-Streifen mit Satz
   -------------------------------------------------------------------------- */
.einleitung {
  margin: 0;
  font-size: 34px;
  line-height: 1.45;
  color: var(--text);
}
.einleitung--titel { max-width: 860px; margin-top: 46px; }

/* Aquarell-Streifen (Form #streifen-form, Farbe aus --farbe) */
.streifen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  color: var(--farbe);
}

.satz {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0;
}
.satz--gruen { --farbe: #c4e3bb; --rand: var(--gruen-rand); margin-top: 52px; }
.satz--blau  { --farbe: #bcdcf3; --rand: var(--hellblau-rand); }
.satz__band {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 36px 14px 28px;
  font-family: var(--schrift-titel);
  font-size: 42px;
  line-height: 1.1;
  color: var(--tinte);
}
.satz__band strong { font-weight: 400; font-size: 1.12em; }
.satz__symbol { width: 52px; height: 52px; color: var(--tinte); flex: none; }
.satz__funken { width: 46px; height: 46px; color: var(--tinte); flex: none; }
.satz__funken--links { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   7. Titelfolie: Aquarell-Bild rechts
   -------------------------------------------------------------------------- */
.titel-bild {
  position: absolute;
  right: 0;
  top: 380px;
  width: 520px;
  height: 470px;
}
.titel-bild use[class^="farbe-"] { color: var(--farbe); }
.strich { color: var(--tinte); }

/* --------------------------------------------------------------------------
   8. Übersicht: Kopf und sechs Punkte in zwei Spalten
   -------------------------------------------------------------------------- */
.kopf {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
}
.kopf .untertitel { grid-column: 1 / -1; }
.kopf .titel { justify-self: start; }

.punkte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 70px;
  row-gap: 16px;
  margin-top: 28px;
}

.punkt {
  display: grid;
  grid-template-columns: 130px 1fr;
  column-gap: 22px;
  align-items: start;
}
.punkt__bild { width: 130px; height: 130px; }
.punkt__klecks { color: var(--farbe); }

.punkt__titel {
  position: relative;
  display: inline-block;
  isolation: isolate;
  margin: 0 0 6px -8px;
  padding: 4px 22px 8px;
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  color: var(--tinte);
}

/* Spiegelstrich-Liste in Handschrift */
.punkt__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.punkt__liste li {
  position: relative;
  padding-left: 26px;
  font-size: 28px;
  line-height: 1.32;
  color: var(--text);
}
.punkt__liste li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tinte);
}

/* Farbige Freihand-Unterstreichung am Ende jedes Punkts */
.unterstrich {
  display: block;
  width: 86%;
  height: 22px;
  margin-top: 6px;
  color: var(--linie);
}

.satz--unten {
  position: absolute;
  right: 10px;
  bottom: 4px;
}
.satz--unten .satz__band { font-size: 36px; }

/* --------------------------------------------------------------------------
   9. Ablauf: handgezeichneter Zeitstrahl
   -------------------------------------------------------------------------- */
.titel--ablauf { margin-top: 10px; }

.ablauf {
  position: relative;
  width: 1440px;
  margin-top: 110px;
}
.ablauf__pfeile {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 280px;
  color: var(--tinte);
}
.ablauf__liste {
  display: grid;
  grid-template-columns: repeat(4, 360px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.schritt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}
.schritt--tief { margin-top: 70px; }   /* leichtes Auf und Ab wie von Hand */

.schritt__kreis {
  position: relative;
  display: block;
  width: 190px;
  height: 190px;
}
.schritt__kreis svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.schritt__ziffer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--schrift-titel);
  font-size: 112px;
  line-height: 1;
  color: var(--tinte);
}
.schritt__name {
  margin-top: 18px;
  font-family: var(--schrift-titel);
  font-size: 46px;
  line-height: 1.1;
  color: var(--tinte);
}
.schritt__zeit {
  margin-top: 8px;
  font-size: 30px;
  line-height: 1.3;
  color: var(--text);
}

.satz--abschluss {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  margin-inline: auto;          /* zentriert dank width: fit-content */
}