/* ============================================================
   Oktopia — Abendhimmel
   Ein Stylesheet für die ganze Seite. Aufbau von oben nach unten:
   Grundlagen · Hintergrund · Kopf- und Fußleiste · Startseite ·
   Kacheln · Lesetext · Bewegung.
   ============================================================ */

:root{
  /* Himmel */
  --nacht:#0F1130;
  --daemmer:#231C46;
  --abend:#3D2648;
  --glut:#8C4A3C;

  /* Schrift */
  --tinte:#F8F1EA;
  --leise:#BFAFC6;
  --schwach:#8E7F9B;

  /* Akzente */
  --apricot:#F3A664;
  --kante:rgba(248,241,234,.20);
  --kante-stark:rgba(248,241,234,.42);

  /* Stärke der Linienarbeit; ein Wert, an dem sich alles orientiert */
  --linien:1;

  --breite:1180px;
  --breite-lesen:70ch;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  min-height:100vh;
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  color:var(--tinte);
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(108% 62% at 50% 114%, var(--glut) 0%, rgba(140,74,60,0) 62%),
    linear-gradient(172deg, var(--nacht) 0%, var(--daemmer) 52%, var(--abend) 100%);
  background-attachment:fixed;
}

a{ color:var(--apricot); }
a:focus-visible,
button:focus-visible{ outline:2px solid var(--apricot); outline-offset:3px; border-radius:2px; }

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

/* Sprungmarke für Tastatur und Vorlesesoftware */
.zum-inhalt{
  position:absolute; left:-9999px; top:0; z-index:20;
  background:var(--nacht); color:var(--tinte);
  padding:12px 18px; text-decoration:none;
}
.zum-inhalt:focus{ left:12px; top:12px; }

/* ------------------------------------------------ Hintergrundebenen */
.ebene{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.horizont{
  top:auto; height:52%;
  background:linear-gradient(to top, rgba(243,166,100,.18), rgba(243,166,100,0) 80%);
}
canvas.sterne{ position:fixed; inset:0; z-index:-2; pointer-events:none; }

/* Der Achteck-Aufgang gehört zur Startseite. Auf Textseiten würde er
   den Lesefluss stören, dort bleibt der Himmel ruhig. */
.aufgang{ display:none; }
.ist-start .aufgang{
  display:block;
  position:absolute; inset:0; z-index:-2;
  opacity:calc(.62 * var(--linien));
  --frei:0px;   /* darüber ganz unsichtbar */
  --voll:0px;   /* darunter voll sichtbar  */
  -webkit-mask-image:linear-gradient(to bottom, transparent var(--frei), #000 var(--voll));
          mask-image:linear-gradient(to bottom, transparent var(--frei), #000 var(--voll));
}
.aufgang svg{ width:100%; height:100%; display:block; }
.aufgang polygon{ fill:none; stroke:var(--apricot); stroke-width:1; }

/* ---------------------------------------------------- Kopfleiste */
.kopfleiste{
  max-width:var(--breite);
  margin:0 auto;
  padding:22px clamp(20px,5vw,64px) 0;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px clamp(18px,4vw,40px);
}
.wortmarke{
  display:inline-flex; align-items:center; gap:11px;
  font-weight:700; font-size:1.06rem; letter-spacing:-.02em;
  color:var(--tinte); text-decoration:none;
}
.wortmarke-zeichen{ width:22px; height:22px; color:var(--apricot); flex:none; }
.wortmarke:hover{ color:var(--apricot); }

.hauptnavigation{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.hauptnavigation a{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.76rem; letter-spacing:.08em;
  color:var(--leise); text-decoration:none;
}
.hauptnavigation a:hover{ color:var(--apricot); }

/* ------------------------------------------------------- Grundraster */
.inhalt{
  max-width:var(--breite);
  margin:0 auto;
  padding:clamp(34px,6vw,74px) clamp(20px,5vw,64px) 0;
}
.inhalt.schmal{ max-width:calc(var(--breite-lesen) + 2 * clamp(20px,5vw,64px)); }

/* ------------------------------------------------------- Startseite */
.augenbraue{
  display:flex; align-items:center; gap:14px; margin:0 0 18px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--apricot);
}
.augenbraue::after{
  content:""; flex:1; height:1px; background:var(--kante); opacity:var(--linien);
}

.willkommen{
  margin:0 0 10px;
  font-weight:700; letter-spacing:-.032em; text-wrap:balance;
  font-size:clamp(2rem,7.2vw,3.85rem); line-height:1.03;
}
.willkommen em{ font-style:normal; color:var(--apricot); }

.bereichstitel{
  margin:0 0 10px;
  font-weight:700; letter-spacing:-.03em; text-wrap:balance;
  font-size:clamp(1.8rem,5.4vw,3rem); line-height:1.06;
  color:var(--ton, var(--tinte));
}

.unterzeile{
  margin:0 0 clamp(30px,4.4vw,50px);
  font-size:clamp(1rem,1.85vw,1.16rem); line-height:1.62;
  color:var(--leise); max-width:54ch;
}

.bereichszeile{
  display:flex; align-items:center; justify-content:center;
  gap:20px; margin:0 0 22px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-weight:400;
  font-size:clamp(.86rem,1.35vw,1.05rem); letter-spacing:.26em;
  text-transform:uppercase; color:var(--leise);
}
.bereichszeile::before,
.bereichszeile::after{
  content:""; height:1px; width:clamp(44px,7.5vw,104px);
  background:var(--kante); opacity:var(--linien);
}

/* ----------------------------------------------------------- Kacheln */
.felder{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,20px); }
.felder.einspaltig{ grid-template-columns:1fr; }
@media (max-width: 760px){
  .felder{ grid-template-columns:1fr; }
  .feld.breit{ grid-column:auto; }
}
.feld.breit{ grid-column:1 / -1; }

/* Der Achteck-Umriss entsteht aus zwei Ebenen: das Feld selbst trägt die
   Linienfarbe, die Füllung liegt einen Punkt darin. So ist die Kante auf
   allen acht Seiten gleich stark — ein Rahmen würde an den Schrägen wegfallen. */
.feld{
  --ecke:22px;
  --ton:var(--apricot);
  --ton-hell:var(--ton);
  position:relative; z-index:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  min-height:186px; padding:24px 26px;
  text-decoration:none; color:inherit;
  isolation:isolate;
  background:var(--kante);
  clip-path:polygon(var(--ecke) 0, calc(100% - var(--ecke)) 0, 100% var(--ecke),
                    100% calc(100% - var(--ecke)), calc(100% - var(--ecke)) 100%,
                    var(--ecke) 100%, 0 calc(100% - var(--ecke)), 0 var(--ecke));
  transition:background .25s ease, transform .25s ease;
}
.feld.breit{ --ecke:26px; min-height:218px; }

.fuellung{
  position:absolute; inset:1px; z-index:-1;
  clip-path:polygon(calc(var(--ecke) - 1px) 0, calc(100% - var(--ecke) + 1px) 0, 100% calc(var(--ecke) - 1px),
                    100% calc(100% - var(--ecke) + 1px), calc(100% - var(--ecke) + 1px) 100%,
                    calc(var(--ecke) - 1px) 100%, 0 calc(100% - var(--ecke) + 1px), 0 calc(var(--ecke) - 1px));
  background:
    radial-gradient(88% 96% at 88% 12%, color-mix(in srgb, var(--ton) 24%, transparent) 0%, transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03)),
    linear-gradient(180deg, rgba(24,20,56,.58), rgba(24,20,56,.44));
}
.feld::after{
  content:""; position:absolute; inset:1px; z-index:-1; opacity:0;
  clip-path:inherit;
  background:radial-gradient(70% 80% at 86% 16%, color-mix(in srgb, var(--ton) 40%, transparent), transparent 70%);
  transition:opacity .3s ease;
}
.feld:hover, .feld:focus-visible{
  background:var(--kante-stark); transform:translateY(-3px); outline:none;
}
.feld:hover::after, .feld:focus-visible::after{ opacity:1; }
.feld:focus-visible{ box-shadow:0 0 0 2px var(--ton-hell); }

.marke{
  position:absolute; top:22px; right:24px; z-index:1;
  width:78px; height:78px; overflow:visible;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.feld.breit .marke{ width:96px; height:96px; top:26px; right:30px; }
.feld:hover .marke, .feld:focus-visible .marke{ transform:rotate(22.5deg); }
.marke .aussen{ stroke:var(--ton-hell); stroke-width:1; fill:none; opacity:.55; }
.marke .mittel{ stroke:var(--ton-hell); stroke-width:1; fill:none; opacity:calc(.4 * var(--linien)); }
.marke .kern{ fill:var(--ton); opacity:.34; }
.marke .speiche{ stroke:var(--ton-hell); stroke-width:1; opacity:calc(.28 * var(--linien)); }

.nummer{
  position:absolute; top:26px; left:26px; z-index:1;
  display:flex; align-items:center; gap:9px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem; letter-spacing:.14em; color:var(--schwach);
}
.nummer::after{
  content:""; width:26px; height:1px; background:var(--kante); opacity:var(--linien);
}

.kopfzeile{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.feld-titel{
  font-weight:600; letter-spacing:-.018em; color:var(--tinte);
  font-size:clamp(1.15rem,2.5vw,1.58rem); line-height:1.2;
}
.feld.breit .feld-titel{ font-size:clamp(1.42rem,3.4vw,2.1rem); }
.beschreibung{
  color:var(--leise); font-size:.94rem; line-height:1.56; max-width:46ch;
}
.hinweis{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 9px; white-space:nowrap;
  color:var(--ton-hell);
  border:1px solid color-mix(in srgb, var(--ton-hell) 44%, transparent);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}

/* ---------------------------------------------------------- Lesetext */
.brotkrumen{
  margin-bottom:20px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.74rem; letter-spacing:.08em;
}
.brotkrumen a{ color:var(--leise); text-decoration:none; }
.brotkrumen a::before{ content:"← "; }
.brotkrumen a:hover{ color:var(--apricot); }

.lesetext{ --ton:var(--apricot); }
.lesetext h1{
  margin:0 0 26px;
  font-weight:700; letter-spacing:-.03em; text-wrap:balance;
  font-size:clamp(1.75rem,5vw,2.7rem); line-height:1.08;
}
.lesetext h3{
  margin:44px 0 12px;
  font-weight:600; letter-spacing:-.015em;
  font-size:clamp(1.15rem,2.6vw,1.4rem); line-height:1.25;
  color:var(--ton);
  scroll-margin-top:24px;
}
.lesetext h4{
  margin:34px 0 10px;
  font-weight:600; font-size:1.06rem; color:var(--tinte);
  scroll-margin-top:24px;
}
.lesetext p{
  margin:0 0 20px;
  font-size:1.06rem; line-height:1.72;
  color:#EFE6EE;
}
.lesetext ul{ margin:0 0 22px; padding-left:1.2em; color:#EFE6EE; }
.lesetext li{ margin-bottom:8px; line-height:1.66; }
.lesetext a{ color:var(--apricot); text-underline-offset:3px; }
.lesetext strong{ color:var(--tinte); }
.lesetext blockquote{
  margin:26px 0; padding:2px 0 2px 20px;
  border-left:2px solid color-mix(in srgb, var(--ton) 55%, transparent);
  color:var(--leise); font-style:italic;
}
.lesetext hr{
  border:0; height:1px; margin:38px 0;
  background:var(--kante);
}

.inhaltsverzeichnis{
  margin:0 0 34px; padding:18px 22px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--kante);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.iv-titel{
  margin:0 0 10px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--schwach);
}
.inhaltsverzeichnis ul{ margin:0; padding:0; list-style:none; }
.inhaltsverzeichnis li{ margin:0 0 6px; }
.inhaltsverzeichnis a{ color:var(--leise); text-decoration:none; font-size:.94rem; }
.inhaltsverzeichnis a:hover{ color:var(--apricot); text-decoration:underline; }

.hinweiskasten{
  padding:24px 26px; max-width:56ch;
  background:rgba(255,255,255,.05);
  border:1px solid var(--kante);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.hinweiskasten p{ margin:0 0 10px; color:var(--leise); }
.hinweiskasten p:last-child{ margin-bottom:0; }

/* Vor und zurück am Textende */
.weiterlesen{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin:52px 0 0; padding-top:26px;
  border-top:1px solid var(--kante);
}
@media (max-width: 620px){ .weiterlesen{ grid-template-columns:1fr; } }
.weiterlesen a{
  display:flex; flex-direction:column; gap:5px;
  padding:16px 18px; text-decoration:none;
  background:rgba(255,255,255,.04);
  border:1px solid var(--kante);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:background .2s ease;
}
.weiterlesen a:hover{ background:rgba(255,255,255,.09); }
.weiterlesen .vor{ text-align:right; }
.weiterlesen .richtung{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--schwach);
}
.weiterlesen .ziel{ color:var(--tinte); font-weight:500; line-height:1.35; }

/* -------------------------------------------------------- Fußleiste */
.fussleiste{
  max-width:var(--breite);
  margin:clamp(46px,6vw,80px) auto 0;
  padding:24px clamp(20px,5vw,64px) clamp(34px,5vw,54px);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  border-top:1px solid var(--kante);
}
.fussleiste nav{ display:flex; flex-wrap:wrap; gap:8px 26px; flex:1; }
.fussleiste a{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.75rem; letter-spacing:.08em;
  color:var(--leise); text-decoration:none;
}
.fussleiste a:hover{ color:var(--apricot); }
.signatur{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem; color:var(--schwach);
}

/* --------------------------------------------------------- Bewegung */
@keyframes auftauchen{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}
.ist-start .inhalt > *,
.ist-start .felder > .feld{
  animation:auftauchen .72s cubic-bezier(.22,.9,.3,1) backwards;
}
.ist-start .augenbraue{ animation-delay:0ms; }
.ist-start .willkommen{ animation-delay:90ms; }
.ist-start .unterzeile{ animation-delay:180ms; }
.ist-start .bereichszeile{ animation-delay:270ms; }
.ist-start .felder{ animation:none; }
.ist-start .felder > .feld:nth-child(1){ animation-delay:360ms; }
.ist-start .felder > .feld:nth-child(2){ animation-delay:450ms; }
.ist-start .felder > .feld:nth-child(3){ animation-delay:540ms; }
.ist-start .felder > .feld:nth-child(4){ animation-delay:630ms; }
.ist-start .felder > .feld:nth-child(5){ animation-delay:720ms; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-delay:0ms !important;
     transition-duration:.001ms !important; }
}

/* ----------------------------------------------- Newsletter-Anmeldung */
.anmeldung{
  margin:30px 0 0; padding:24px 26px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--kante);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.anmeldung-hinweis{ margin:0 0 16px; color:var(--leise); font-size:.94rem; line-height:1.6; }
.anmeldung-ausweg{ margin:14px 0 0; color:var(--schwach); font-size:.86rem; }
.anmeldung iframe{ display:block; width:100%; border:0; background:transparent; }

/* Der zweite Selektor ist nötig, weil ".lesetext a" spezifischer ist als
   ".knopf" — ohne ihn färbt die Lesetext-Regel die Knopfschrift apricot
   auf apricot, und der Knopf wirkt leer. */
.knopf,
.lesetext a.knopf{
  display:inline-block; cursor:pointer;
  font:inherit; font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:13px 24px; text-decoration:none;
  color:var(--nacht); background:var(--apricot); border:0;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:filter .2s ease, transform .2s ease;
}
.knopf:hover,
.lesetext a.knopf:hover{ filter:brightness(1.1); transform:translateY(-2px); }