/* =========================================================================
   SCHMEDI — gemeinsames Stylesheet
   Farben und Typografie stammen aus dem Bildmaterial:
   das Gelb der Nebelfaeden, das Violett des Rings, das Rot des Auges,
   das Magenta des Schriftzugs, das Blau des GVOE-Logos.
   ========================================================================= */

:root {
  --void:      #070510;
  --void-2:    #0d0a1c;
  --void-3:    #16112a;
  --bone:      #efe6dd;
  --muted:     #8d84a3;
  --filament:  #d8d150;
  --halo:      #9b74e8;
  --core:      #ff6a24;
  --magenta:   #ff2fa0;
  --iris:      #e5143f;
  --bubble:    #00a2ff;

  --rand: 1px solid rgb(239 230 221 / 0.14);
  --breit: 1280px;
  --luft: clamp(4.5rem, 11vh, 9rem);

  --display: "Anybody", "Arial Narrow", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.075rem);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

::selection { background: var(--magenta); color: var(--void); }

/* ------------------------------------------------------------------ Himmel */

.himmel {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.himmel__sterne { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Der Nebel ist in vier Ebenen zerlegt: Kern, Ring und zwei Lagen Fäden.
   Jede bewegt sich anders und in einer anderen Zeit. Weil sich die
   Laufzeiten nicht glatt teilen lassen, wiederholt sich das Bild praktisch
   nie exakt — es wirkt lebendig statt geloopt. */
.himmel__nebel {
  position: absolute;
  inset: 0;
  /* ---> Kräftigerer Hintergrund: diesen Wert erhöhen (max 1).
         Über 0.7 wird die Schrift schwer lesbar. */
  opacity: 0.58;
}

.himmel__ebene {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Der Nebel liegt quer und zieht von links nach rechts durchs Bild.
     Das Bild selbst ist hochkant, deshalb wird es über transform gekippt —
     die Animationen weiter unten nutzen die getrennte rotate-Eigenschaft
     und laufen dadurch ungestört weiter.
     ---> Längere Bahn: den vh-Wert erhöhen. */
  height: clamp(38rem, 112vh, 130rem);
  width: auto;
  translate: -50% -50%;
  transform: rotate(90deg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 899 / 1750;
}

/* ---- Kern: dreht sich sehr langsam und atmet ---- */
.himmel__kern {
  background-image: url("../sky/kern.webp");
  animation: kreisen 260s linear infinite,
             atmen 17s ease-in-out infinite;
}
@keyframes kreisen { to { rotate: 360deg; } }
@keyframes atmen {
  0%, 100% { scale: 1;    opacity: 0.86; }
  50%      { scale: 1.06; opacity: 1; }
}

/* ---- Ring: zieht seine eigene Bahn ---- */
.himmel__ring {
  background-image: url("../sky/ring.webp");
  animation: kreisen-rueck 175s linear infinite,
             glimmen 23s ease-in-out infinite;
}
@keyframes kreisen-rueck { to { rotate: -360deg; } }
@keyframes glimmen {
  0%, 100% { opacity: 0.5; }
  40%      { opacity: 1; }
  70%      { opacity: 0.72; }
}

/* ---- Fäden, zwei Lagen gegeneinander ---- */
.himmel__faeden {
  background-image: url("../sky/faeden.webp");
  animation: treiben-a 47s ease-in-out infinite;
}
@keyframes treiben-a {
  0%, 100% { rotate: -3.5deg; scale: 1.02; opacity: 0.7; }
  35%      { rotate:  1.5deg; scale: 1.09; opacity: 1; }
  68%      { rotate:  3.8deg; scale: 1.04; opacity: 0.82; }
}

.himmel__faeden2 {
  background-image: url("../sky/faeden.webp");
  /* gespiegelt, damit die zweite Lage nicht wie eine Kopie aussieht */
  transform: rotate(90deg) scaleX(-1);
  mix-blend-mode: screen;
  animation: treiben-b 71s ease-in-out infinite;
}
@keyframes treiben-b {
  0%, 100% { rotate:  4.2deg; scale: 1.12; opacity: 0.22; }
  44%      { rotate: -2.6deg; scale: 1.05; opacity: 0.6; }
  76%      { rotate: -4.5deg; scale: 1.14; opacity: 0.34; }
}

/* ---- Glut: lässt den ganzen Nebel heller und wieder dunkler werden ---- */
.himmel__glut {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(75vh, 100vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgb(255 190 70 / 0.5) 0%,
    rgb(216 209 80 / 0.24) 32%,
    rgb(155 116 232 / 0.12) 58%,
    transparent 78%);
  animation: pochen 31s ease-in-out infinite;
}
@keyframes pochen {
  0%, 100% { opacity: 0.12; scale: 0.92; }
  22%      { opacity: 0.34; scale: 1.06; }
  47%      { opacity: 0.16; scale: 0.97; }
  73%      { opacity: 0.44; scale: 1.12; }
}

/* Schleier, damit die Schrift ueber dem Nebel lesbar bleibt.
   ---> Wenn der Hintergrund kräftiger sein soll: hier die Werte senken. */
.himmel::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Der Schleier folgt der Form der Bahn: breit und flach. */
  background:
    radial-gradient(closest-side 68% 32% at 50% 50%, rgb(7 5 16 / 0.6), rgb(7 5 16 / 0.2) 80%, transparent),
    linear-gradient(to bottom, rgb(7 5 16 / 0.45), rgb(7 5 16 / 0.25) 45%, rgb(7 5 16 / 0.62));
  pointer-events: none;
}

/* Auf dem Handy füllt der Nebel den ganzen Schirm und frisst die Schrift.
   Deshalb dort deutlich zurückgenommen. */
@media (max-width: 48rem) {
  .himmel__nebel { opacity: 0.38; }
  .himmel::after {
    background:
      radial-gradient(closest-side 90% 30% at 50% 48%, rgb(7 5 16 / 0.68), rgb(7 5 16 / 0.3) 80%, transparent),
      linear-gradient(to bottom, rgb(7 5 16 / 0.5), rgb(7 5 16 / 0.35) 45%, rgb(7 5 16 / 0.7));
  }
}

/* Ein Hauch Korn, damit die Flaechen nicht digital glatt wirken */
.himmel__korn {
  position: absolute;
  inset: -50%;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: flimmern 700ms steps(2) infinite;
}

@keyframes flimmern {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-2%, 1.5%); }
}

/* -------------------------------------------------------------------- Auge */

.auge {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  width: var(--auge-groesse, 15vmin);
  aspect-ratio: 1;
  right: var(--auge-rechts, 7vw);
  top: var(--auge-oben, 14vh);
  border-radius: 50%;
  overflow: hidden;
  filter: drop-shadow(0 0 3vmin rgb(229 20 63 / 0.45));
  will-change: transform;
}

.auge img {
  width: 116%;
  height: 116%;
  max-width: none;
  object-fit: cover;
  margin: -8%;
  transition: translate 380ms cubic-bezier(.2,.8,.3,1), scale 900ms ease;
}

/* Lider: zwei Flaechen in Hintergrundfarbe, die sich schliessen */
.auge::before,
.auge::after {
  content: "";
  position: absolute;
  left: -10%;
  width: 120%;
  height: 62%;
  background: var(--void);
  z-index: 2;
}
.auge::before { top: 0;    translate: 0 -100%; }
.auge::after  { bottom: 0; translate: 0 100%; }

.auge.blinzelt::before,
.auge.blinzelt::after { animation: lid 340ms ease-in-out; }

@keyframes lid {
  0%, 100% { translate: 0 var(--weg, -100%); }
  50%      { translate: 0 -12%; }
}
.auge.blinzelt::after { --weg: 100%; }
@keyframes lid-unten {
  0%, 100% { translate: 0 100%; }
  50%      { translate: 0 12%; }
}
.auge.blinzelt::after { animation-name: lid-unten; }

/* ------------------------------------------------------------------ Gerüst */

.seite { position: relative; z-index: 2; }

/* Sprungziele nicht unter der klebenden Kopfzeile verstecken */
:target, [id] { scroll-margin-top: 5.5rem; }

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

.abschnitt { padding-block: var(--luft); }

/* ------------------------------------------------------------ Navigation */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgb(7 5 16 / 0.92), rgb(7 5 16 / 0.55));
  border-bottom: var(--rand);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 62px;
}

.kopf__marke { display: flex; align-items: center; margin-right: auto; }
.kopf__marke img { height: 26px; width: auto; }

.kopf__menue {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem clamp(0.7rem, 2.5vw, 2rem);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kopf__menue a {
  text-decoration: none;
  color: var(--muted);
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms, border-color 180ms;
}
.kopf__menue a:hover { color: var(--bone); border-bottom-color: currentColor; }
.kopf__menue a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--akzent, var(--filament)); }

.kopf__warenkorb {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  background: none;
  border: var(--rand);
  color: var(--bone);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: background 180ms, border-color 180ms;
}
.kopf__warenkorb:hover { background: rgb(239 230 221 / 0.08); border-color: var(--bone); }
.kopf__warenkorb[data-anzahl="0"] { color: var(--muted); }

/* ----------------------------------------------------------- Typografie */

.marke {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 78%;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.012em;
  margin: 0;
}

.riesig { font-size: clamp(3.4rem, 15vw, 12rem); }
.gross  { font-size: clamp(2.4rem, 7.5vw, 5.6rem); }
.mittel { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }

.brauen {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.brauen::before {
  content: "";
  width: 1.9rem;
  height: 1px;
  background: var(--akzent, var(--filament));
  flex: none;
}

.fliess { max-width: 56ch; color: rgb(239 230 221 / 0.82); }
.fliess p + p { margin-top: 1.05em; }

.leise { color: var(--muted); }

/* ---------------------------------------------------------------- Knopf */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--akzent, var(--filament));
  color: var(--akzent, var(--filament));
  background: none;
  cursor: pointer;
  position: relative;
  transition: color 200ms, background 200ms;
}
.knopf::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--akzent, var(--filament));
  scale: 0 1;
  transform-origin: left;
  transition: scale 260ms cubic-bezier(.2,.8,.3,1);
  z-index: -1;
}
.knopf:hover { color: var(--void); }
.knopf:hover::after { scale: 1 1; }
.knopf--voll { background: var(--akzent, var(--filament)); color: var(--void); }
.knopf--voll:hover { filter: brightness(1.15); }
.knopf[disabled] { opacity: 0.4; cursor: not-allowed; }

/* -------------------------------------------------------- Sichtbarwerden */

.kommt {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 700ms cubic-bezier(.2,.8,.3,1), translate 700ms cubic-bezier(.2,.8,.3,1);
  transition-delay: var(--verzug, 0ms);
}
.kommt.da { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------ Formulare */

.formular { display: grid; gap: 1.1rem; max-width: 40rem; }
.feld { display: grid; gap: 0.4rem; }
.feld--zwei { grid-template-columns: 1fr 1fr; gap: 1.1rem; display: grid; }

.feld label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.feld input,
.feld textarea,
.feld select {
  font: inherit;
  font-size: 0.95rem;
  color: var(--bone);
  background: rgb(239 230 221 / 0.04);
  border: var(--rand);
  padding: 0.75rem 0.85rem;
  width: 100%;
  transition: border-color 180ms, background 180ms;
}
.feld input:hover, .feld textarea:hover, .feld select:hover { background: rgb(239 230 221 / 0.07); }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  border-color: var(--akzent, var(--filament));
  background: rgb(239 230 221 / 0.07);
}
.feld textarea { resize: vertical; min-height: 8rem; }
.feld select { appearance: none; cursor: pointer; }
.feld option { background: var(--void-2); }

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

.fuss {
  border-top: var(--rand);
  padding-block: 3.5rem 2.5rem;
  margin-top: var(--luft);
  font-size: 0.85rem;
}
.fuss__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.5rem;
  align-items: start;
}
.fuss h3 {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
  font-weight: 400;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.fuss a { text-decoration: none; color: rgb(239 230 221 / 0.75); }
.fuss a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.fuss__unten {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: var(--rand);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------- Bildbehandlung */

.bild {
  position: relative;
  overflow: hidden;
  background: var(--void-2);
}
.bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 900ms cubic-bezier(.2,.8,.3,1), filter 500ms;
}
.bild--fassen:hover img { scale: 1.045; }

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

.zum-inhalt {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 60;
  background: var(--filament);
  color: var(--void);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-decoration: none;
  transition: top 180ms;
}
.zum-inhalt:focus { top: 0.5rem; }

/* -------------------------------------------------- Bewegung abschalten */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .kommt { opacity: 1; translate: none; }
  .himmel__korn { display: none; }
}

/* -------------------------------------------------- Widerrufsbutton

   Pflicht nach § 356a BGB seit dem 19.06.2026: Die Widerrufsfunktion muss
   während der ganzen Widerrufsfrist ständig verfügbar, hervorgehoben
   platziert und leicht zugänglich sein. Ein unauffälliger Link zwischen
   den anderen Rechtstexten reicht ausdrücklich nicht — deshalb sitzt sie
   als eigene Schaltfläche über der Fußzeile, auf jeder Seite.

   ---> Beschriftung bitte nicht ändern. "Vertrag widerrufen" ist die
        gesetzliche Formulierung, alles andere ist ein Abmahnrisiko. */

.fuss__widerruf {
  display: flex;
  justify-content: flex-start;
  padding: 1.5rem 0 0;
  margin-top: 1.5rem;
  border-top: var(--rand);
}

.knopf-widerruf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  padding: 0.75rem 1.4rem;
  border: 1px solid rgb(239 230 221 / 0.45);
  background: rgb(239 230 221 / 0.04);
  transition: background 200ms, border-color 200ms, color 200ms;
}
.knopf-widerruf:hover,
.knopf-widerruf:focus-visible {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--void);
}