/* ===========================================================================
   Quadranti – Hero
   Farben und Spacing nach DESIGN.md (Kapitel 1 und 4).
   =========================================================================== */

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("assets/fonts/NunitoSans-Variable.woff2") format("woff2-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Vier-Elemente-System */
  --c-vulkan: #e72b54;
  --c-meer:   #438493;
  --c-wald:   #319972;
  --c-wueste: #ee7034;

  /* Basis */
  --c-creme: #feedd9;
  --c-tinte: #422e27;
  --c-lila:  #822880;

  /* Meldungsflaechen. Abgedunkelte Varianten von --c-wald und --c-vulkan:
     die reinen Markentoene tragen creme Schrift nur mit 3,1:1 bzw. 3,8:1,
     diese hier mit 5,5:1 und 5,9:1. */
  --c-erfolg: #256b52;
  --c-fehler: #b01f40;

  /* Breite der farbigen Kontur je Dreieck (sichtbar, nicht Strichstaerke) */
  --band: clamp(8px, 1.5vmin, 20px);

  /* Hoehe der Wortmarke – wird auch fuer die Ausrichtung auf den
     Schnittpunkt gebraucht, deshalb als Variable. */
  --logo-h: clamp(38px, 6.5vmin, 84px);

  /* Parallaxe-Versatz, von main.js gesetzt. Alle vier Bilder teilen sich
     denselben Vektor, damit die Illusion einer durchgehenden Szene haelt. */
  --px: 0px;
  --py: 0px;

  --ease: cubic-bezier(0.33, 0.02, 0.24, 1);
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  background: var(--c-tinte);
  font-family: "Nunito Sans", system-ui, sans-serif;
  color: var(--c-creme);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
   Die vier Quadranten
   --------------------------------------------------------------------------- */

.quadranten {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.q {
  position: fixed;
  inset: 0;
  background-color: var(--c);
  opacity: 0;
  animation: quadrant-ein 900ms var(--ease) forwards;
}

/* Die Reihenfolge der Spitzen ist immer: zwei Viewport-Ecken, dann die Mitte. */
.q--vulkan { --c: var(--c-vulkan); clip-path: polygon(0 0, 100% 0, 50% 50%);       animation-delay:   0ms; }
.q--meer   { --c: var(--c-meer);   clip-path: polygon(100% 0, 100% 100%, 50% 50%); animation-delay:  90ms; }
.q--wueste { --c: var(--c-wueste); clip-path: polygon(100% 100%, 0 100%, 50% 50%); animation-delay: 180ms; }
.q--wald   { --c: var(--c-wald);   clip-path: polygon(0 100%, 0 0, 50% 50%);       animation-delay: 270ms; }

/* Kunstwerk: 50 % Deckkraft ueber der Vollton-Elementfarbe (DESIGN.md 3/4).
   scale() gibt Ueberstand, damit die Parallaxe keine Kante freilegt. */
.q__art {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.06) translate3d(var(--px), var(--py), 0);
  will-change: transform;
}

/* Bildausschnitt je Element: das Motiv liegt in dem Keil, der sichtbar bleibt. */
.q--vulkan .q__art { background-position: center top; }
.q--wueste .q__art { background-position: center bottom; }
.q--wald   .q__art { background-position: left center; }
.q--meer   .q__art { background-position: right center; }

/* Quellen je Groessenstufe. Die Bilder sind quadratisch und unbeschnitten,
   weil jedes den vollen Viewport abdeckt und nicht nur sein Dreieck. */
.q--vulkan { --art-sm: url("assets/backgrounds/vulkan-1200.webp"); --art-md: url("assets/backgrounds/vulkan-1800.webp"); --art-lg: url("assets/backgrounds/vulkan-2600.webp"); }
.q--wald   { --art-sm: url("assets/backgrounds/wald-1200.webp");   --art-md: url("assets/backgrounds/wald-1800.webp");   --art-lg: url("assets/backgrounds/wald-2600.webp"); }
.q--meer   { --art-sm: url("assets/backgrounds/meer-1200.webp");   --art-md: url("assets/backgrounds/meer-1800.webp");   --art-lg: url("assets/backgrounds/meer-2600.webp"); }
.q--wueste { --art-sm: url("assets/backgrounds/wueste-1200.webp"); --art-md: url("assets/backgrounds/wueste-1800.webp"); --art-lg: url("assets/backgrounds/wueste-2600.webp"); }

.q__art { background-image: var(--art-sm); }

@media (min-width: 1000px), (min-resolution: 1.5dppx) {
  .q__art { background-image: var(--art-md); }
}

@media (min-width: 1800px), (min-width: 1000px) and (min-resolution: 1.5dppx) {
  .q__art { background-image: var(--art-lg); }
}

/* Kontur. stroke-width ist doppelt so breit wie das sichtbare Band, weil
   clip-path des Elternelements exakt die aeussere Haelfte abschneidet. */
.q__stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.q__stroke polygon {
  fill: none;
  stroke: var(--c);
  stroke-width: calc(var(--band) * 2);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ---------------------------------------------------------------------------
   Abdunkler
   --------------------------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 62% 58% at 50% 56%,
    rgb(66 46 39 / 0.42) 0%,
    rgb(66 46 39 / 0.28) 45%,
    rgb(66 46 39 / 0) 78%
  );
  opacity: 0;
  animation: einblenden 900ms var(--ease) 320ms forwards;
}

/* ---------------------------------------------------------------------------
   Inhalt – die Wortmarke sitzt mittig auf dem Schnittpunkt, alles Weitere
   fliesst darunter in den Wuesten-Quadranten.
   --------------------------------------------------------------------------- */

.hero {
  position: fixed;
  inset: 0;
  z-index: 2;
}

.hero__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(92vw, 640px);
  text-align: center;
  opacity: 0;
  animation: inhalt-ein 800ms var(--ease) 480ms forwards;
}

.hero__logo {
  /* Optische Mitte der Wortmarke exakt auf den Schnittpunkt ziehen. */
  margin: calc(var(--logo-h) / -2) 0 0;
  line-height: 0;
}

.hero__logo img {
  display: block;
  width: auto;
  height: var(--logo-h);
  filter: drop-shadow(0 2px 12px rgb(66 46 39 / 0.45));
}

.hero__tagline {
  margin: clamp(16px, 2.6vmin, 28px) 0 0;
  font-family: "Barlow Condensed", "Nunito Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(17px, 2.9vmin, 30px);
  line-height: 1.14;
  letter-spacing: 0.045em;
  text-shadow: 0 2px 10px rgb(66 46 39 / 0.5);
}

.hero__meta {
  margin: clamp(10px, 1.6vmin, 16px) 0 0;
  font-size: clamp(11px, 1.5vmin, 14px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
  text-shadow: 0 1px 8px rgb(66 46 39 / 0.5);
}

.hero__body {
  margin: clamp(12px, 1.9vmin, 20px) 0 0;
  max-width: 54ch;
  font-size: clamp(13.5px, 1.7vmin, 16px);
  line-height: 1.5;
  text-shadow: 0 1px 8px rgb(66 46 39 / 0.5);
}

/* ---------------------------------------------------------------------------
   Formular
   --------------------------------------------------------------------------- */

.signup {
  width: 100%;
  max-width: 440px;
  margin-top: clamp(14px, 2.2vmin, 24px);
}

.signup__row {
  display: flex;
  gap: 8px;
}

.signup__input,
.signup__button {
  font-family: inherit;
  font-size: clamp(14px, 1.75vmin, 16px);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0 16px;
  height: clamp(44px, 6vmin, 54px);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease), transform 180ms var(--ease);
}

.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--c-creme);
  color: var(--c-tinte);
  box-shadow: 0 4px 18px rgb(66 46 39 / 0.28);
}

.signup__input::placeholder {
  color: rgb(66 46 39 / 0.55);
}

.signup__input:focus-visible {
  outline: none;
  border-color: var(--c-tinte);
}

.signup__input[aria-invalid="true"] {
  border-color: var(--c-vulkan);
}

.signup__button {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  background: var(--c-tinte);
  color: var(--c-creme);
  box-shadow: 0 4px 18px rgb(66 46 39 / 0.32);
}

.signup__button:hover { transform: translateY(-1px); }
.signup__button:active { transform: translateY(0); }

.signup__button:focus-visible {
  outline: none;
  border-color: var(--c-creme);
}

.signup__button[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Honigtopf. Aus dem Sichtfeld geschoben statt display:none, damit
   Bots ihn fuer ein echtes Feld halten. */
.signup__honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup__consent {
  display: flex;
  gap: 9px;
  margin-top: 10px;
  text-align: left;
  font-size: clamp(11px, 1.4vmin, 13px);
  line-height: 1.45;
  text-shadow: 0 1px 8px rgb(66 46 39 / 0.55);
  cursor: pointer;
}

.signup__consent input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--c-tinte);
  cursor: pointer;
}

.signup__consent a {
  color: inherit;
  text-underline-offset: 2px;
}

/* Leer bleibt die Meldung unsichtbar und beansprucht keine Hoehe – erst mit
   Text bekommt sie ihre farbige Flaeche (:not(:empty)). */
.signup__status {
  margin: 0;
  font-size: clamp(12px, 1.5vmin, 14px);
  line-height: 1.4;
  font-weight: 600;
}

.signup__status:not(:empty) {
  margin-top: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--c-creme);
  background: var(--c-tinte);
  box-shadow: 0 4px 16px rgb(66 46 39 / 0.3);
  animation: meldung-ein 260ms var(--ease);
}

.signup__status--fehler:not(:empty) { background: var(--c-fehler); }
.signup__status--erfolg:not(:empty) { background: var(--c-erfolg); }

@keyframes meldung-ein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.signup--gesendet .signup__row,
.signup--gesendet .signup__consent { display: none; }

/* ---------------------------------------------------------------------------
   Rechtliche Links in den unteren Ecken
   --------------------------------------------------------------------------- */

.unten {
  position: fixed;
  z-index: 3;
  bottom: calc(var(--band) + 10px);
  left:  calc(var(--band) + 16px);
  right: calc(var(--band) + 16px);
  display: flex;
  justify-content: space-between;
  /* Die drei Beschriftungen liegen auf einer gemeinsamen Mittelachse, auch
     wenn die Anleitungs-Pille hoeher baut als die beiden Textlinks. */
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: einblenden 700ms var(--ease) 900ms forwards;
}

.unten__link {
  font-size: clamp(11px, 1.4vmin, 13px);
  font-weight: 600;
  letter-spacing: 0.06em;
  /* Ueber der Key-Art traegt Lila nicht – dort bleiben Links creme
     (DESIGN.md Kapitel 1). Lila gilt auf den Cremeflaechen. */
  color: var(--c-creme);
  text-decoration: none;
  text-shadow: 0 1px 10px rgb(66 46 39 / 0.7);
  white-space: nowrap;
}

.unten__link:hover,
.unten__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Die Anleitung ist das einzige inhaltliche Angebot neben dem Formular und
   bekommt deshalb eine gefuellte Flaeche statt eines Textlinks. */
.unten__link--anleitung {
  padding: 7px 15px;
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--c-tinte);
  background: var(--c-creme);
  text-shadow: none;
  box-shadow: 0 4px 16px rgb(66 46 39 / 0.3);
  transition: transform 160ms var(--ease);
}

.unten__link--anleitung:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.unten__link--anleitung:focus-visible {
  text-decoration: none;
  outline: none;
  border-color: var(--c-tinte);
}

/* ---------------------------------------------------------------------------
   Popover fuer die Rechtstexte
   --------------------------------------------------------------------------- */

.popover {
  width: min(92vw, 74ch);
  max-height: 86dvh;
  padding: 0;
  border: none;
  border-radius: 18px;
  background: var(--c-creme);
  color: var(--c-tinte);
  box-shadow: 0 24px 70px rgb(66 46 39 / 0.45);
  overflow: hidden;
}

.popover::backdrop {
  background: rgb(66 46 39 / 0.62);
  backdrop-filter: blur(3px);
}

.popover[open] { animation: popover-ein 240ms var(--ease); }

@keyframes popover-ein {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.popover__schliessen {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--c-creme);
  background: var(--c-tinte);
  transition: transform 160ms var(--ease);
}

.popover__schliessen:hover { transform: scale(1.06); }
.popover__schliessen:focus-visible { outline: none; border-color: var(--c-lila); }

.popover__inhalt {
  max-height: 86dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px clamp(20px, 4vw, 40px) 40px;
  font-size: 15px;
  line-height: 1.6;
  /* Lange Komposita wie "Verbraucherstreitbeilegung/Universalschlichtungs-
     stelle" sprengen sonst auf schmalen Viewports die Panelbreite. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.popover__inhalt:focus { outline: none; }

.popover__inhalt h1 {
  font-family: "Barlow Condensed", "Nunito Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(26px, 4.4vw, 36px);
  line-height: 1.15;
  margin: 0 46px 24px 0;
}

.popover__inhalt h2 {
  font-family: "Barlow Condensed", "Nunito Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 21px;
  line-height: 1.2;
  margin: 34px 0 10px;
  padding-top: 16px;
  border-top: 2px solid rgb(66 46 39 / 0.18);
}

.popover__inhalt h3 {
  font-family: "Barlow Condensed", "Nunito Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  margin: 22px 0 6px;
}

.popover__inhalt h4 { font-size: 15px; margin: 16px 0 4px; }
.popover__inhalt p  { margin: 0 0 14px; }
.popover__inhalt ul { margin: 0 0 14px; padding-left: 20px; }
.popover__inhalt li { margin-bottom: 5px; }

.popover__inhalt a {
  color: var(--c-lila);
  text-underline-offset: 2px;
}

.popover__inhalt a:hover { text-decoration-thickness: 2px; }

/* Fallback, wenn <dialog> nicht unterstuetzt wird: main.js laesst den Link
   dann einfach normal navigieren, das Popover bleibt ungenutzt. */
.popover:not([open]) { display: none; }

/* Auf schmalen Viewports schrumpft die Beschriftung der Pille in zwei
   Stufen, damit die drei Punkte nebeneinander passen. */
@media (max-width: 560px) {
  .unten__zusatz { display: none; }
}

@media (max-width: 400px) {
  .unten__wort { display: none; }
  .unten { gap: 6px; }
  .unten__link--anleitung { padding: 7px 12px; }
}

/* ---------------------------------------------------------------------------
   Animationen
   --------------------------------------------------------------------------- */

@keyframes einblenden {
  to { opacity: 1; }
}

@keyframes quadrant-ein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes inhalt-ein {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------------------------------------------------------------------------
   Kurze Viewports: das Vertikalbudget unter dem Schnittpunkt reicht nicht mehr.
   700px – Faktenzeile weicht.  600px – die ganze Gruppe wird zentriert.
   --------------------------------------------------------------------------- */

/* Der Inhaltsblock darf die untere Leiste nicht erreichen. Weil die
   Wortmarke am Schnittpunkt haengt, kann er nicht hochruecken – also wird
   er in Stufen kompakter. */
@media (max-height: 960px) {
  .hero__tagline { margin-top: clamp(12px, 2.1vmin, 22px); }
  .hero__meta { margin-top: clamp(8px, 1.3vmin, 13px); }
  .hero__body { margin-top: clamp(8px, 1.3vmin, 13px); }
  .signup { margin-top: clamp(12px, 1.9vmin, 20px); }
}

/* Unterhalb von ~850px Hoehe wird es unter dem Schnittpunkt eng. */
@media (max-height: 850px) {
  :root { --logo-h: clamp(38px, 6vmin, 68px); }
  .hero__tagline { font-size: clamp(16px, 2.5vmin, 24px); }
  .hero__body { font-size: clamp(13px, 1.6vmin, 15px); max-width: 58ch; }
}

/* Ab hier reicht der Platz unter dem Schnittpunkt nicht mehr fuer Faktenzeile
   und Fliesstext, sonst laeuft der Block in die untere Leiste. */
@media (max-height: 700px) {
  .hero__meta,
  .hero__body { display: none; }
}

@media (max-height: 600px) {
  .hero__content {
    transform: translate(-50%, -50%);
    animation-name: inhalt-ein-zentriert;
  }
  .hero__logo { margin-top: 0; }
  .hero__tagline { font-size: clamp(15px, 3.6vmin, 22px); }
  .hero__body { display: none; }
}

@keyframes inhalt-ein-zentriert {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(14px); }
  to   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}

/* Sehr schmale Telefone: Feld und Button untereinander. */
@media (max-width: 420px) {
  .signup__row { flex-direction: column; }
  .signup__button { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Bewegung reduzieren
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .q,
  .scrim,
  .hero__content,
  .unten {
    animation: none;
    opacity: 1;
  }
  .popover[open],
  .signup__status:not(:empty) { animation: none; }
  .popover__schliessen:hover,
  .unten__link--anleitung:hover { transform: none; }
  .hero__content { transform: translateX(-50%); }
  .q__art { transform: scale(1.06); }
  .signup__button:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) and (max-height: 600px) {
  .hero__content { transform: translate(-50%, -50%); }
}