@charset "utf-8";

/* ============================================================
   Mykotop — Gestaltungsgrundlage
   Schriften liegen im eigenen Webspace (Ordner schriften/),
   es werden keine externen Dienste eingebunden.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("schriften/fraunces-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("schriften/fraunces-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("schriften/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("schriften/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("schriften/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinte: #16211b;
  --tinte-leise: #4b5a51;
  --nebel: #edf0e9;
  --papier: #fafbf7;
  --kante: #d2d9cd;
  --moos: #2f6440;
  --moos-tief: #22492f;
  --tief: #0e1f17;
  --tief-auf: #1a3326;
  --pfiff: #e0a21c;
  --rotkappe: #a6402a;

  --g-a: #2f6440;
  --g-b: #6aa06b;
  --g-c: #d3bb45;
  --g-d: #e0a367;
  --g-e: #e08a7d;
  --g-f: #8a4b3e;

  --mass: 68rem;
  --spalte: 36rem;
  --rund: 14px;

  --schrift-anzeige: "Fraunces", Georgia, "Times New Roman", serif;
  --schrift-text: "Plex", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nebel);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 6.2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.005em; }

p, li { max-width: var(--spalte); }
p { margin: 0 0 1.1em; }

a { color: var(--moos-tief); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--moos); }

:focus-visible {
  outline: 3px solid var(--pfiff);
  outline-offset: 3px;
  border-radius: 3px;
}

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

.mass {
  width: min(100% - 2.5rem, var(--mass));
  margin-inline: auto;
}

.nur-fuer-lesegeraete {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Kartenblattrand: schmaler Streifen mit Gradnetz-Marken ------------- */
.blattrand {
  height: 7px;
  background:
    repeating-linear-gradient(to right, var(--kante) 0 1px, transparent 1px 34px),
    linear-gradient(to bottom, transparent 0 3px, var(--kante) 3px 4px, transparent 4px);
}
.blattrand.hell {
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.28) 0 1px, transparent 1px 34px),
    linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.22) 3px 4px, transparent 4px);
}

/* --- Kopfzeile ---------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 251, 247, .92);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--kante);
  box-shadow: 0 1px 12px -8px rgba(20, 40, 28, .5);
}
@supports not (backdrop-filter: blur(1px)) {
  .kopf { background: var(--papier); }
}
.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.6rem;
  padding: 0.85rem 0;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--tinte);
  text-decoration: none;
  margin-right: auto;
}
.marke img { width: 38px; height: 38px; border-radius: 9px; display: block; }
.marke-zusatz {
  display: block;
  font-family: var(--schrift-text);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--tinte-leise);
  line-height: 1.2;
}
.kopf nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.92rem;
  font-weight: 500;
}
.kopf nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--tinte-leise);
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kopf nav a svg { width: 19px; height: 19px; flex: none; }
.kopf nav a:hover { color: var(--tinte); background: #e6ece0; }
.kopf nav a[aria-current="page"] {
  background: var(--moos);
  color: #fff;
  font-weight: 600;
}
/* Discord: weißer Clyde auf Blurple — die von Discord bevorzugte Darstellung. */
.kopf nav a.nav-discord {
  background: #5865f2;
  border-color: #5865f2;
  color: #fff;
  font-weight: 600;
}
.kopf nav a.nav-discord:hover { background: #4752c4; border-color: #4752c4; color: #fff; }
.kopf nav a.nav-discord svg { width: 20px; height: 20px; }
@media (max-width: 30rem) {
  .kopf nav { gap: 0.25rem; font-size: 0.86rem; }
  .kopf nav a { padding: 0.4rem 0.6rem; gap: 0.32rem; }
  .kopf nav a svg { width: 17px; height: 17px; }
}

/* --- Dunkle Flächen ----------------------------------------------------- */
.dunkel {
  background: var(--tief);
  color: #e7eee7;
}
.dunkel h1, .dunkel h2, .dunkel h3 { color: #fbfdf9; }
.dunkel a { color: var(--pfiff); }

/* --- Auftakt ------------------------------------------------------------ */
.auftakt-innen {
  display: grid;
  gap: 2.5rem;
  padding: 3.4rem 0 3.6rem;
  align-items: center;
}
@media (min-width: 62rem) {
  .auftakt-innen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3.5rem;
    padding: 4.6rem 0 4.8rem;
  }
}
.auftakt p.leitsatz {
  font-size: 1.2rem;
  color: #cfdccd;
  max-width: 32rem;
}
.auftakt h1 { margin-bottom: 0.45em; }

.karte-rahmen {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--rund);
  padding: 10px 10px 0;
  background: #0a1812;
  box-shadow: 0 24px 60px -32px rgba(0,0,0,.9);
}
.karte-rahmen svg { display: block; border-radius: 6px; }
.karte-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0.3rem;
  font-size: 0.78rem;
  color: #9fb4a4;
}

/* Legende A–F */
.legende { display: flex; gap: 0; align-items: stretch; }
.legende span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #0e1f17;
  width: 1.9rem;
  text-align: center;
  padding: 0.18rem 0;
}
.legende span:first-child { border-radius: 4px 0 0 4px; }
.legende span:last-child { border-radius: 0 4px 4px 0; }
.st-a { background: var(--g-a); color: #eaf3ea; }
.st-b { background: var(--g-b); color: #12301c; }
.st-c { background: var(--g-c); }
.st-d { background: var(--g-d); }
.st-e { background: var(--g-e); }
.st-f { background: var(--g-f); color: #f7ece9; }

/* Kartenflächen */
.g-a { fill: var(--g-a); }
.g-b { fill: var(--g-b); }
.g-c { fill: var(--g-c); }
.g-d { fill: var(--g-d); }
.g-e { fill: var(--g-e); }
.g-f { fill: var(--g-f); }
.karte-flaeche path {
  stroke: #0a1812;
  stroke-width: 2.5;
  opacity: 0;
  animation: auftauchen .9s ease-out forwards;
}
.karte-flaeche path:nth-child(1) { animation-delay: .05s; }
.karte-flaeche path:nth-child(2) { animation-delay: .12s; }
.karte-flaeche path:nth-child(3) { animation-delay: .19s; }
.karte-flaeche path:nth-child(4) { animation-delay: .26s; }
.karte-flaeche path:nth-child(5) { animation-delay: .33s; }
.karte-flaeche path:nth-child(6) { animation-delay: .40s; }
.karte-flaeche path:nth-child(7) { animation-delay: .47s; }
.karte-flaeche path:nth-child(8) { animation-delay: .54s; }
.karte-flaeche path:nth-child(9) { animation-delay: .61s; }
.karte-flaeche path:nth-child(10) { animation-delay: .68s; }
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: .93; transform: none; }
}

/* --- Schaltflächen ------------------------------------------------------ */
.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.6rem 0 0;
}
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Die Farbe steht bewusst auf a.knopf-…, damit sie die Regel .dunkel a schlägt.
   Sonst erbt jede Schaltfläche in einem dunklen Abschnitt die Verweisfarbe. */
a.knopf-voll, .knopf-voll { background: var(--pfiff); color: #14100a; }
a.knopf-voll:hover, .knopf-voll:hover { background: #f0b330; color: #14100a; }
a.knopf-rand, .knopf-rand { border-color: rgba(255,255,255,.45); color: #f4f8f2; }
a.knopf-rand:hover, .knopf-rand:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.07); }
a.knopf-gruen, .knopf-gruen { background: var(--moos); color: #fff; }
a.knopf-gruen:hover, .knopf-gruen:hover { background: var(--moos-tief); color: #fff; }
a.knopf-gruen-rand, .knopf-gruen-rand { border-color: var(--moos); color: var(--moos-tief); }
a.knopf-gruen-rand:hover, .knopf-gruen-rand:hover { background: rgba(47,100,64,.08); color: var(--moos-tief); }
.dunkel a.knopf-gruen-rand { border-color: rgba(255,255,255,.45); color: #f4f8f2; }
.knopf svg { flex: none; }

/* --- Abschnitte --------------------------------------------------------- */
section { padding: 3.6rem 0; }
@media (min-width: 62rem) { section { padding: 4.8rem 0; } }
section + section { padding-top: 0; }
section.dunkel + section, section + section.dunkel { padding-top: 3.6rem; }
@media (min-width: 62rem) {
  section.dunkel + section, section + section.dunkel { padding-top: 4.8rem; }
}

.abschnitt-kopf { max-width: 40rem; margin-bottom: 2.2rem; }
.abschnitt-kopf p { font-size: 1.1rem; color: var(--tinte-leise); }
.dunkel .abschnitt-kopf p { color: #b9ccbc; }

.zweispalt {
  display: grid;
  gap: 2rem 3rem;
}
@media (min-width: 52rem) { .zweispalt { grid-template-columns: 1fr 1fr; } }

.leistung {
  border-top: 1px solid var(--kante);
  padding-top: 1.1rem;
}
.leistung h3 { margin-bottom: 0.35em; }
.leistung p { margin-bottom: 0; color: var(--tinte-leise); }
.dunkel .leistung { border-top-color: rgba(255,255,255,.18); }
.dunkel .leistung p { color: #b9ccbc; }

/* Datenquellen als Verzeichnis */
.quellen { margin: 0; }
.quellen > div {
  display: grid;
  gap: 0.15rem 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--kante);
}
@media (min-width: 46rem) {
  .quellen > div { grid-template-columns: 13rem minmax(0, 1fr); }
}
.quellen dt { font-weight: 600; }
.quellen dd { margin: 0; color: var(--tinte-leise); max-width: var(--spalte); }
.quellen dd.klein { font-size: 0.85rem; }

/* Schritte (echte Reihenfolge) */
.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; }
.schritte > li {
  counter-increment: schritt;
  position: relative;
  padding: 1.25rem 0 1.25rem 3.4rem;
  border-top: 1px solid var(--kante);
  max-width: 44rem;
}
.schritte > li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--moos);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.schritte h3 { margin-bottom: 0.3em; }
.schritte p:last-child { margin-bottom: 0; }

/* Kästen */
.kasten {
  background: var(--papier);
  border: 1px solid var(--kante);
  border-radius: var(--rund);
  padding: 1.5rem 1.6rem;
}
.kasten h3:first-child { margin-top: 0; }
.kasten p:last-child { margin-bottom: 0; }
.kasten.warnung {
  background: #fbf0ec;
  border-color: #e3c3b9;
}
.kasten.hinweis { background: #f3f6ee; border-color: #d7e0cc; }
.dunkel .kasten {
  background: var(--tief-auf);
  border-color: rgba(255,255,255,.14);
}

/* Bildschirmfotos */
.geraete {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.geraete li { max-width: none; }
.geraet {
  border: 1px solid var(--kante);
  border-radius: 22px;
  padding: 8px;
  background: var(--papier);
}
.dunkel .geraet { background: var(--tief-auf); border-color: rgba(255,255,255,.16); }
.geraet img { display: block; border-radius: 15px; width: 100%; }
.geraete figcaption {
  font-size: 0.88rem;
  color: var(--tinte-leise);
  margin-top: 0.6rem;
}
.dunkel .geraete figcaption { color: #b9ccbc; }

/* Fragen und Antworten */
.faq { max-width: 44rem; }
.faq > div {
  border-top: 1px solid var(--kante);
  padding: 1.2rem 0;
}
.faq h3 { margin-bottom: 0.4em; }
.faq p:last-child { margin-bottom: 0; color: var(--tinte-leise); }

/* Fußzeile */
.fuss { background: var(--tief); color: #b9ccbc; padding: 3rem 0 2.4rem; }
.fuss a { color: #e7eee7; text-decoration: none; }
.fuss a:hover { color: var(--pfiff); text-decoration: underline; }
.fuss-gitter {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 2.2rem;
}
.fuss h2 {
  font-family: var(--schrift-text);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8fa694;
  margin-bottom: 0.9rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.45rem; }
.fuss-unten {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.4rem;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* Rechtstexte */
.rechtstext { padding: 3rem 0 4rem; }
.rechtstext h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); }
.rechtstext h2 { font-size: 1.45rem; margin-top: 2.4rem; }
.rechtstext h3 { font-size: 1.1rem; margin-top: 1.6rem; }
.rechtstext p, .rechtstext li { max-width: 42rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: 0.4rem; }
.klein { font-size: 0.9rem; color: var(--tinte-leise); }

/* Seitenkopf der Unterseiten */
.seitenkopf { padding: 3rem 0 2.6rem; }
@media (min-width: 62rem) { .seitenkopf { padding: 4rem 0 3.4rem; } }
.seitenkopf p.leitsatz { font-size: 1.15rem; color: #cfdccd; max-width: 40rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .karte-flaeche path { animation: none; opacity: .93; }
  * { transition-duration: .01ms !important; }
}

/* Stufenverzeichnis A bis F */
.stufen { display: grid; gap: 0.1rem 1.2rem; margin: 1.4rem 0 0; }
@media (min-width: 40rem) { .stufen { grid-template-columns: 1fr 1fr; } }
.stufen > div {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--kante);
}
.dunkel .stufen > div { border-top-color: rgba(255,255,255,.16); }
.stufen b {
  flex: none;
  width: 1.7rem; height: 1.7rem;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 0.8rem;
  align-self: center;
}
.stufen p { margin: 0; }