/*
  Der Rahmen der Website im Konfigurator: Kopfzeile, Fußzeile, Hinweis zur
  Speicherung.

  Der Konfigurator ist eine eigenständige Seite mit eigenem Stylesheet. Er kann
  die Bausteine der Website nicht laden, also steht der Rahmen hier ein zweites
  Mal. Jeder Wert ist abgeschrieben, nicht geschätzt; über jedem Abschnitt steht
  die Datei, aus der er stammt.

  Damit beides nicht auseinanderläuft, prüft test/konfigurator-shell.test.ts die
  Auszeichnung dieser Seite gegen lib/site-shell.ts. Wer die Wege oder die Texte
  der Website ändert und den Konfigurator vergisst, bekommt einen roten Test.

  Die eigenen Namen tragen alle das Kürzel sv-, damit keine Regel des 75 KB
  großen styles.css versehentlich mitgreift. Nur außen bleiben die alten Namen
  site-header und site-footer stehen: daran hängt die Druckregel, die beide beim
  Ausdruck ausblendet.
*/

/* Die Palette der hellen Fläche, aus app/(marketing)/layout.module.css. */
.sv-kopf,
.sv-fuss,
.sv-hinweis {
  --sv-weiss: #ffffff;
  --sv-kante: #e1e6ef;
  --sv-flaeche: #f6f8fb;
  --sv-cobalt: #2348db;
  --sv-electric: #4d7cff;
  --sv-ink: #0b1120;
  --sv-blei: #566076;
  --sv-grau: #4c566a;
  --sv-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /*
    Die Website rechnet mit 1,6, das Stylesheet des Konfigurators mit 1,55.
    Der Unterschied summierte sich in der Fußzeile auf knapp zwei Pixel.
  */
  line-height: 1.6;
}

/* ══ Kopfzeile ═══════════════════════════════════════════════════════════
   Quelle: components/shared/site-header.module.css
*/
.sv-kopf {
  position: relative;
  inset: auto;
  z-index: 30;
  height: auto;
  border-bottom: 1px solid var(--sv-kante);
  background: var(--sv-weiss);
}

.sv-kopf-inner {
  display: grid;
  width: auto;
  min-height: 4.75rem;
  max-width: 75rem;
  height: auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.sv-marke {
  display: inline-flex;
  justify-self: start;
  min-width: 44px;
  min-height: 44px;
  width: max-content;
  flex: none;
  align-items: center;
  color: var(--sv-ink);
  text-decoration: none;
}

/* Die Wege stehen links neben der Wortmarke, wie auf der Website. */
.sv-nav {
  display: flex;
  justify-self: start;
  align-items: center;
  gap: clamp(0.7rem, 1.6vw, 1.35rem);
  color: inherit;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

.sv-nav a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
  color: var(--sv-blei);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms var(--sv-ease);
}

.sv-nav a:hover {
  color: var(--sv-ink);
}

.sv-marke:focus-visible,
.sv-nav a:focus-visible {
  border-radius: 12px;
  outline: 2px solid var(--sv-cobalt);
  outline-offset: 3px;
}

.sv-aktionen {
  display: flex;
  justify-self: end;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
}

/* ── „Anmelden“ ───────────────────────────────────────────────────────
   Quelle: components/shared/site-header.module.css

   Hier stand einmal ein Fenster mit dem Hinweis, Stovari laufe nur als App
   auf dem Telefon. Es gibt inzwischen eine Anmeldung im Browser, deshalb ist
   das ein gewöhnlicher Verweis dorthin.
*/
.sv-anmelden {
  display: none;
  min-width: 2.75rem;
  min-height: 2.875rem;
  align-items: center;
  border-radius: 12px;
  padding-inline: 0.5rem;
  color: var(--sv-blei);
  font-family: Inter, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms var(--sv-ease);
}

.sv-anmelden:hover {
  color: var(--sv-ink);
}

.sv-anmelden:focus-visible {
  outline: 2px solid var(--sv-cobalt);
  outline-offset: 3px;
}

/* ── Die beiden Aufrufe ───────────────────────────────────────────────
   Quelle: components/ui/button.module.css und site-header.module.css
*/
.sv-aufruf {
  display: none;
  min-width: 2.75rem;
  min-height: 2.875rem;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  font-family: Inter, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    transform 160ms var(--sv-ease),
    border-color 160ms var(--sv-ease),
    background-color 160ms var(--sv-ease);
}

/* Der Hauptknopf steht für sich, ohne Ring darum. */
.sv-aufruf {
  background: var(--sv-cobalt);
  color: #ffffff;
}

.sv-aufruf:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--sv-cobalt), var(--sv-electric) 18%);
}

.sv-aufruf:focus-visible {
  outline: 2px solid var(--sv-electric);
  outline-offset: 3px;
}

/* Erst ab hier ist Platz für Anmeldung und Aufruf, dieselbe Breite wie die
   Navigation. Darunter trägt beides das Klappmenü. */
@media (min-width: 52.0625rem) {
  .sv-anmelden,
  .sv-aufruf {
    display: inline-flex;
  }
}

/* ── Das Klappmenü am Handy ───────────────────────────────────────────
   Quelle: components/shared/mobile-menu.module.css und ui/icon-button.module.css

   Der Ausgangszustand steht VOR der Medienabfrage weiter unten und nicht
   dahinter. Eine Medienabfrage erhöht die Gewichtung nicht: stand das
   `display: none` später in der Datei, gewann es auf jeder Breite, und das
   Klappmenü blieb auch am Handy verborgen. Der Knopf war dann null Pixel groß
   und vom Konfigurator führte auf dem Telefon kein einziger Weg zurück, weil
   auch die Navigation und die beiden Knöpfe dort ausgeblendet sind.
*/
.sv-menue {
  position: relative;
  display: none;
}

/* Am Handy und am Tablet tragen die Wege das Klappmenü. */
@media (max-width: 52rem) {
  .sv-menue {
    display: block;
  }

  .sv-nav {
    display: none;
  }

  .sv-kopf-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
  }
}

/*
  Ohne Kasten: Rand und Grund sind durchsichtig, es steht nur das Zeichen da.
  Der weiße Kasten mit Rand war der sichtbarste Unterschied zur Website.
*/
.sv-menue-schalter {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0;
  background: transparent;
  color: var(--sv-blei);
  cursor: pointer;
}

.sv-menue-schalter:hover {
  color: var(--sv-ink);
}

.sv-menue-schalter svg {
  width: 1.31rem;
  height: 1.31rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sv-menue-schalter:focus-visible {
  outline: 2px solid var(--sv-electric);
  outline-offset: 3px;
}

.sv-menue-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.65rem);
  right: 0;
  display: grid;
  width: min(19rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--sv-kante);
  border-radius: 22px;
  background: var(--sv-weiss);
  box-shadow: 0 24px 60px rgb(20 32 55 / 16%);
  padding: 0.45rem;
}

.sv-menue-panel[hidden] {
  display: none;
}

.sv-menue-panel a {
  display: flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  color: var(--sv-blei);
  font-family: Inter, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.sv-menue-panel a:hover {
  background: var(--sv-flaeche);
  color: var(--sv-ink);
}

.sv-menue-panel a:focus-visible {
  outline: 2px solid var(--sv-cobalt);
  outline-offset: -2px;
}

/* Trennt die Wege von den beiden Aufrufen darunter. */
.sv-menue-trenner {
  height: 1px;
  margin: 0.35rem 0.35rem 0.2rem;
  background: var(--sv-kante);
}

.sv-menue-panel a.sv-menue-anmelden {
  color: var(--sv-ink);
}

.sv-menue-panel a.sv-menue-aufruf {
  justify-content: center;
  margin-top: 0.15rem;
  background: var(--sv-cobalt);
  color: #ffffff;
  font-weight: 600;
}

.sv-menue-panel a.sv-menue-aufruf:hover {
  background: color-mix(in srgb, var(--sv-cobalt), var(--sv-electric) 18%);
  color: #ffffff;
}


/* ══ Wortmarke ═══════════════════════════════════════════════════════════
   Quelle: components/brand/stovari-wordmark.module.css
*/
.sv-wortmarke {
  display: inline-flex;
  width: auto;
  gap: 0.7rem;
  align-items: center;
  color: currentcolor;
  line-height: 1;
}

.sv-zeichen {
  width: 1.65rem;
  height: auto;
  flex: none;
  fill: currentcolor;
  stroke: none;
}

.sv-zeichen * {
  stroke: none;
}

.sv-wortname {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* ══ Fußzeile ════════════════════════════════════════════════════════════
   Quelle: components/shared/site-footer.module.css
*/
.sv-fuss {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  border: 0;
  border-radius: 32px 32px 0 0;
  background: var(--sv-flaeche);
  color: var(--sv-blei);
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem);
  font-family: Inter, sans-serif;
}

.sv-fuss-inner,
.sv-fuss-unten {
  width: 100%;
  min-height: 0;
  max-width: 75rem;
  margin-inline: auto;
}

.sv-fuss-inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.sv-fuss-marke {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  width: max-content;
  align-items: center;
  color: var(--sv-ink);
  text-decoration: none;
}

.sv-fuss-marke:focus-visible,
.sv-fuss-liste a:focus-visible {
  border-radius: 12px;
  outline: 2px solid var(--sv-cobalt);
  outline-offset: 4px;
}

.sv-fuss-raster {
  display: grid;
}

/* Am Handy klappt jede Spalte für sich auf. */
.sv-fuss-spalte {
  border-bottom: 1px solid var(--sv-kante);
}

.sv-fuss-spalte:first-child {
  border-top: 1px solid var(--sv-kante);
}

.sv-fuss-titel {
  display: flex;
  width: 100%;
  min-height: 3.5rem;
  border: 0;
  padding: 0;
  background: transparent;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--sv-ink);
  font-family: 'Clash Display', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-align: left;
  cursor: pointer;
}

.sv-fuss-pfeil {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 160ms var(--sv-ease);
}

.sv-fuss-spalte[data-offen='ja'] .sv-fuss-pfeil {
  rotate: 180deg;
}

.sv-fuss-liste {
  display: none;
  gap: 0.15rem;
  padding-bottom: 1rem;
}

.sv-fuss-spalte[data-offen='ja'] .sv-fuss-liste {
  display: grid;
}

.sv-fuss-liste a {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  width: max-content;
  align-items: center;
  color: var(--sv-blei);
  font-size: 1.0625rem;
  text-decoration: none;
  transition: color 160ms var(--sv-ease);
}

.sv-fuss-liste a:hover {
  color: var(--sv-ink);
}

.sv-fuss-unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem clamp(1.5rem, 4vw, 3rem);
  color: var(--sv-grau);
  /* Eine Fußnote, keine Aussage. Siehe site-footer.module.css. */
  font-size: 0.65rem;
  text-align: center;
}

/* Breite Flächen: Wortmarke links, vier Spalten offen daneben. */
@media (min-width: 62rem) {
  .sv-fuss-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 3fr);
    column-gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }

  .sv-fuss-raster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .sv-fuss-spalte,
  .sv-fuss-spalte:first-child {
    border: 0;
  }

  .sv-fuss-liste,
  .sv-fuss-spalte[data-offen='nein'] .sv-fuss-liste {
    display: grid;
  }

  .sv-fuss-titel {
    min-height: 0;
    margin-bottom: 0.75rem;
    font-size: 1.0625rem;
    cursor: default;
    pointer-events: none;
  }

  .sv-fuss-pfeil {
    display: none;
  }

  .sv-fuss-liste {
    padding-bottom: 0;
  }

  .sv-fuss-unten {
    justify-content: space-between;
    text-align: left;
  }
}

/* ══ Hinweis zur Speicherung ═════════════════════════════════════════════
   Quelle: components/shared/cookie-hinweis.module.css
*/
.sv-hinweis {
  position: fixed;
  z-index: 60;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  pointer-events: none;
}

.sv-hinweis[hidden] {
  display: none;
}

.sv-hinweis-karte {
  display: grid;
  width: min(75rem, 100%);
  gap: 1rem;
  border: 1px solid var(--sv-kante);
  border-radius: 26px;
  background: var(--sv-weiss);
  box-shadow: 0 24px 60px rgb(20 32 55 / 16%);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  font-family: Inter, sans-serif;
  pointer-events: auto;
  animation: sv-hinweis-auf 620ms var(--sv-ease) both;
}

.sv-hinweis-text {
  display: grid;
  gap: 0.75rem;
}

.sv-hinweis-titel {
  margin: 0;
  color: var(--sv-ink);
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.sv-hinweis-satz {
  max-width: 62ch;
  margin: 0;
  color: var(--sv-blei);
  font-size: 0.9rem;
  line-height: 1.55;
}

.sv-hinweis-verweis {
  color: var(--sv-cobalt);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.sv-hinweis-gruppen {
  display: grid;
  border-top: 1px solid var(--sv-kante);
}

.sv-hinweis-gruppen[hidden] {
  display: none;
}

.sv-hinweis-gruppe {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--sv-kante);
}

label.sv-hinweis-gruppe {
  cursor: pointer;
}

.sv-hinweis-gruppe-titel {
  margin: 0 0 0.2rem;
  color: var(--sv-ink);
  font-size: 1rem;
  font-weight: 600;
}

.sv-hinweis-gruppe-text {
  max-width: 52ch;
  margin: 0;
  color: var(--sv-blei);
  font-size: 0.9rem;
  line-height: 1.5;
}

.sv-hinweis-fest {
  flex: none;
  align-self: center;
  color: var(--sv-grau);
  font-size: 0.9rem;
}

.sv-hinweis-schalter {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  align-self: center;
  accent-color: var(--sv-cobalt);
}

.sv-hinweis-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sv-hinweis-haupt,
.sv-hinweis-zweit,
.sv-hinweis-still {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.875rem;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 160ms var(--sv-ease),
    border-color 160ms var(--sv-ease),
    color 160ms var(--sv-ease);
}

.sv-hinweis-haupt {
  background: var(--sv-cobalt);
  color: #ffffff;
}

.sv-hinweis-haupt:hover {
  background: color-mix(in srgb, var(--sv-cobalt), var(--sv-electric) 18%);
}

.sv-hinweis-zweit {
  border-color: #d5dbe6;
  background: transparent;
  color: var(--sv-ink);
}

.sv-hinweis-zweit:hover {
  border-color: var(--sv-ink);
}

.sv-hinweis-still {
  background: transparent;
  color: var(--sv-blei);
}

.sv-hinweis-still:hover {
  color: var(--sv-ink);
}

.sv-hinweis-haupt:focus-visible,
.sv-hinweis-zweit:focus-visible,
.sv-hinweis-still:focus-visible,
.sv-hinweis-verweis:focus-visible,
.sv-hinweis-schalter:focus-visible {
  outline: 2px solid var(--sv-cobalt);
  outline-offset: 3px;
}

@keyframes sv-hinweis-auf {
  from {
    transform: translate3d(0, 1rem, 0);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

/* Auf breiten Flächen stehen Text und Knöpfe nebeneinander. */
@media (min-width: 52rem) {
  .sv-hinweis-karte {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }

  .sv-hinweis-gruppen {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-anmelden,
  .sv-anmelden-schalter,
  .sv-aufruf,
  .sv-fuss-liste a,
  .sv-fuss-pfeil,
  .sv-hinweis-haupt,
  .sv-hinweis-zweit,
  .sv-hinweis-still {
    transition: none;
  }

  .sv-anmelden-fenster,
  .sv-hinweis-karte {
    animation: none;
  }
}

/* Beim Ausdruck bleibt nur die Belegung. */
@media print {
  .sv-hinweis {
    display: none !important;
  }
}