/* main.css: globale Komponenten und Seiten-übergreifendes */

.site-header {
  padding-block: var(--s0);
  padding-inline: var(--s1);
  border-block-end: var(--border-thin) solid var(--color-lightish);
}

.site-header__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1);
  max-inline-size: 80ch;
  margin-inline: auto;
}

.wordmark-link {
  text-decoration: none;
  color: var(--color-dark);
  display: inline-block;
}

.wordmark-link .wordmark {
  /* Bug 19: Header-Logo ~1.7x größer als zuvor (--s1 → --s2). */
  font-size: var(--s2);
}

.wordmark-link--hero .wordmark {
  font-size: var(--s5);
}

/* Bug 99: Auf der Landingpage selbst rendert das Hero-Logo als
   <span> (siehe login.njk). Browser-Default-Cursor für Spans wäre
   Text-Caret — explizit auf default setzen, damit kein „klickbar"-
   Hint mehr suggeriert wird. */
.wordmark-link--static {
  cursor: default;
}

/* Legacy-Logo-Klasse als Fallback (wird in droplet-test.njk noch genutzt). */
.logo {
  font-family: var(--font-special);
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--color-dark);
  line-height: 1;
}

.logo--small {
  font-size: var(--s1);
}

.logo--hero {
  font-size: var(--s5);
}

.site-nav {
  /* Bug 58: einheitlich mit Body und Footer. */
  font-size: var(--s0);
  color: var(--color-darkish);
}

.site-nav a {
  text-decoration: none;
  color: var(--color-darkish);
}

/* Bug 45: aktiver Menüpunkt sichtbar machen — gleiche Underline-
   Behandlung wie Legal-Links im Footer. */
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  color: var(--color-dark);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  color: var(--color-dark);
}

.site-nav a + a {
  margin-inline-start: var(--s0);
}

.btn {
  display: inline-block;
  font-family: var(--font-plain);
  font-size: var(--s0);
  padding: var(--s-1) var(--s1);
  border: var(--border-thin) solid var(--color-dark);
  background-color: transparent;
  color: var(--color-dark);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.btn:hover,
.btn:focus-visible {
  background-color: var(--color-dark);
  color: var(--color-light);
}

.btn--primary {
  background-color: var(--color-dark);
  color: var(--color-light);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-light);
  color: var(--color-dark);
}

.btn--ghost {
  border-color: transparent;
  color: var(--color-darkish);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: transparent;
  color: var(--color-dark);
  text-decoration: underline;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  display: block;
  inline-size: 100%;
  padding: var(--s-1) var(--s0);
  border: var(--border-thin) solid var(--color-darkish);
  background-color: var(--color-light);
  font-family: var(--font-plain);
  font-size: var(--s0);
  color: var(--color-dark);
}

textarea {
  min-block-size: 12em;
  line-height: var(--ratio);
  resize: vertical;
}

input[type="text"].input--phrase {
  font-family: var(--font-mono);
  text-align: center;
  font-size: var(--s1);
}

label {
  display: block;
  /* Bug 58: einheitlich mit Body. */
  font-size: var(--s0);
  color: var(--color-darkish);
  margin-block-end: var(--s-2);
}

/* Bug 96 + 103: vertikaler Atemraum um die Sektions-Trennlinien.
   Bug 96 hatte --s3 gesetzt — zusammen mit dem damaligen h2-margin-
   start --s3 ergab das ein optisches Ungleichgewicht (sehr viel Luft
   zwischen HR und nachfolgendem H2, dadurch wirkte das Heading
   isoliert in der Mitte zweier Blöcke statt als Anker des nächsten).
   Bug 103: HR-Margin auf --s2 reduziert; siehe .newsletter-content
   h2 weiter unten für die geänderte Headline-Verteilung. */
hr {
  border: 0;
  border-block-start: var(--border-thin) solid var(--color-lightish);
  margin-block: var(--s2);
}

.hero {
  text-align: center;
}

.hero .logo--hero {
  display: inline-block;
}

.newsletter-content {
  font-family: var(--font-plain);
}

.newsletter-content h1 {
  font-size: var(--s2);
  font-family: var(--font-special);
  letter-spacing: 0;
}

.newsletter-content h2 {
  font-size: var(--s1);
  font-family: var(--font-special);
  /* Bug 103/105: Sektion-Headline soll als Anker des FOLGENDEN
     Blocks wirken, nicht als Insel.
     - HR → H2: --s1 (eng zur Trennlinie, Headline gehört zum
       nächsten Block, nicht zwischen die Blöcke)
     - H2 → erstes <p>: --s0 (Bug 105: vorher --s2, plus Stack-Gap
       --s1 → ~3 rem zwischen Headline und Body, Headline wirkte
       isoliert. Stack-Gap wird unten via h2 + p override
       kompensiert, Effektiv-Abstand jetzt ~1 rem). */
  margin-block-start: var(--s1);
  margin-block-end: var(--s0);
}

/* Bug 105: Newsletter ist ein flex-stack — .stack > * + * würde
   --s1 oben am ersten <p> nach dem H2 erzwingen, das addiert sich
   zur margin-end des H2. Hier explizit auf 0 setzen, damit der
   Headline-zu-Body-Abstand allein vom h2 margin-end gesteuert
   wird. p + p Abstände bleiben unberührt. */
.newsletter-content h2 + p {
  margin-block-start: 0;
}

/* Bug 96: Item-zu-Item-Abstand innerhalb von „Was deine Welt
   berührt" wirkte gequetscht. Jeder Item-Block ist ein <p>; der
   Übergang braucht spürbare Luft. */
.newsletter-content p + p {
  margin-block-start: var(--s1);
}

.newsletter-content blockquote {
  margin-block: var(--s1);
  border-inline-start: var(--border-thin) solid var(--color-darkish);
  padding-inline-start: var(--s1);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-darkish);
}

/* Bug 7: Quellenlinks im Newsletter sind bewusst dezent — gepunktete
   Unterstreichung statt der dicken text-decoration aus reset.css.
   Sie sollen erkennbar sein, ohne wie „klick mich"-Aktions-Links zu
   wirken. */
.newsletter-content a {
  color: var(--color-darkish);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.newsletter-content a:hover,
.newsletter-content a:focus-visible {
  color: var(--color-dark);
  text-decoration-style: solid;
}

.site-footer {
  padding: var(--s1);
  border-block-start: var(--border-thin) solid var(--color-lightish);
  /* Bug 58: Body-Schrift global, konsistent mit Newsletter. */
  font-size: var(--s0);
  color: var(--color-mid);
  /* Bug 96: zusätzlicher Atemraum vor dem Footer. Plus die
     --s4 padding-block-end aus .page-section ergibt das
     ergibt zusammen ~4-7rem Luft auf Desktop, ohne Mobile zu
     stauchen (--s* sind clamp). */
  margin-block-start: var(--s4);
}

/* Bug 73: Stack-Layout — erste Zeile About/Logout (volle Breite),
   zweite Zeile Legal links + Lang rechts. Beseitigt die Asymmetrie
   und den engen Abstand zwischen Legal und Lang. */
.site-footer__inner {
  max-inline-size: 80ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.site-footer__top {
  /* Volle Breite — About/Logout darf bis 60ch breit werden. */
  inline-size: 100%;
}

/* Bug 35 + 73: dadirri-Beschreibung dezent grau, linksbündig.
   Bug 98: max-inline-size auf ~30rem (45ch) reduziert, plus
   semantischer <br> nach dem Komma im Markup — ohne Constrain
   bricht „Australien." auf wide screens als Witwen-Zeile, mit
   60ch wirkte die Description außerdem visuell breiter als die
   Legal-Links-Insel darunter. 45ch ist exakt die Länge der
   längeren der beiden Zeilen, das Layout schließt sauber ab. */
.site-footer__about {
  display: block;
  max-inline-size: 45ch;
  font-size: var(--s-1);
  color: var(--color-mid);
  line-height: var(--ratio);
}

.site-footer__links {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  inline-size: 100%;
  gap: var(--s2);
}

.site-footer__legal {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
}

.site-footer__legal a {
  color: var(--color-darkish);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  text-decoration-thickness: 2px;
  color: var(--color-dark);
}

/* Bug 73: Sprach-Toggle konsistent — beide Links ohne Underline,
   nur font-weight unterscheidet aktiv (700) und inaktiv (400). */
.site-footer__lang {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
}

.site-footer__lang-link {
  font-size: var(--s0);
  color: var(--color-darkish);
  text-decoration: none;
  font-weight: 400;
}

.site-footer__lang-link--active {
  font-weight: 700;
  color: var(--color-dark);
}

.site-footer__lang-link:hover,
.site-footer__lang-link:focus-visible {
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
}

/* Bug 73: Mobile — Legal- und Lang-Insel untereinander, zentriert. */
@media (max-width: 30rem) {
  .site-footer__links {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .site-footer__about {
    text-align: center;
    margin-inline: auto;
  }
}

.site-footer--minimal {
  position: fixed;
  inset-block-end: var(--s0);
  inset-inline-end: var(--s1);
  font-size: var(--s-2);
  color: var(--color-mid);
  margin: 0;
  max-inline-size: none;
}

.site-footer--minimal a {
  color: var(--color-mid);
  text-decoration: none;
}

.site-footer--minimal a:hover,
.site-footer--minimal a:focus-visible {
  color: var(--color-darkish);
  text-decoration: underline;
}

.site-footer__logout-form {
  display: inline;
  margin: 0;
}

/* Bug 60: ohne diese Regeln überschreibt das obige display:inline
   bzw. das implizite display:block auf .site-footer__about das
   UA-default [hidden]{display:none}, und beide Varianten sind
   gleichzeitig sichtbar. */
.site-footer__about[hidden],
.site-footer__logout-form[hidden] {
  display: none;
}

.site-footer__link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.site-footer__link-button:hover,
.site-footer__link-button:focus-visible {
  text-decoration: underline;
}

/* S5: Newsletter-Loading-Fallback. Wird sichtbar wenn der Server-
   Render den Marker-Block nicht ersetzt hat (statisch ausgespielter
   Build, Auth-Hook nicht gegriffen, o.ä.). */
.newsletter-loading {
  text-align: center;
  padding-block: var(--s4);
  color: var(--color-mid);
  font-size: var(--s-1);
  max-inline-size: 50ch;
  margin-inline: auto;
}

/* Bug 44 + S8: Toast-Hinweis nach Sprach-Toggle. Fixed unten rechts,
   blendet nach 5 s aus; Hover/Focus pausiert den Timer, Close-Button
   schließt sofort. */
.lang-toast {
  position: fixed;
  inset-block-end: var(--s2);
  inset-inline-end: var(--s2);
  z-index: 100;
  background: var(--color-dark);
  color: var(--color-light);
  padding-block: var(--s0);
  padding-inline: var(--s1);
  /* Bug 68: eine Stufe kleiner als Fließtext (--s0) — Toasts sind
     sekundäre Hinweise, sollen nicht dominieren. */
  font-size: var(--s-1);
  line-height: var(--ratio);
  max-inline-size: 32ch;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  animation: lang-toast-in 250ms ease-out;
  display: flex;
  align-items: flex-start;
  gap: var(--s0);
}

/* Bug 48: ohne diese explizite Regel überschreibt das obige
   display:flex das UA-default [hidden]{display:none}, und der Toast
   ist auf jeder Page als leerer schwarzer Kasten sichtbar. */
.lang-toast[hidden] {
  display: none;
}

.lang-toast__text {
  /* Bug 68: explizit auf --s-1 fixiert, damit kein durchgesickerter
     .text-small-Bumper o.ä. den Toast plötzlich auf Body-Größe zieht. */
  font-size: var(--s-1);
  flex: 1 1 auto;
}

.lang-toast__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: var(--s1);
  line-height: 1;
  padding: 0;
  margin-block-start: -2px;
  flex: 0 0 auto;
}

.lang-toast__close:hover,
.lang-toast__close:focus-visible {
  color: var(--color-lightish);
}

@keyframes lang-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.legal-content h1 {
  font-family: var(--font-special);
  font-size: var(--s3);
  letter-spacing: 0;
  margin-block-end: var(--s2);
}

.legal-content h2 {
  font-family: var(--font-special);
  font-size: var(--s2);
  letter-spacing: 0;
  margin-block-start: var(--s2);
}

.legal-content h3 {
  font-size: var(--s1);
  font-weight: 700;
  margin-block-start: var(--s1);
}

.legal-content p,
.legal-content ul,
.legal-content dl {
  margin-block: var(--s0);
}

.legal-content dl dt {
  font-weight: 700;
  margin-block-start: var(--s0);
}

.legal-content dl dd {
  margin-inline-start: var(--s1);
}