/* Unterseiten der dolspot-Seite (Dolmetscher werden, Impressum, Datenschutz).
   Laedt nach scrollcraft.css und nimmt von dort nur Tokens, Reset und
   Typografie — keine Engine: die Unterseiten tragen keine data-sc-Attribute,
   also bleibt nichts unsichtbar, wenn scrollcraft.js fehlt.

   Marke, Leiste, Knoepfe und Fuss sind aus index.html uebernommen, Wert fuer
   Wert. Die Startseite traegt dieselben Regeln noch inline; wer dort etwas
   aendert, aendert es hier mit (Herausloesen in eine gemeinsame Datei ist
   Ticket 03 der Livegang-Karte). */

@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair-display.woff2') format('woff2');
  font-weight: 400 800; font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('assets/fonts/raleway.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}

:root {
  --sc-canvas:     #ffffff;
  --sc-surface:    #f2f6f5;
  --sc-ink:        #14231f;
  --sc-ink-soft:   #5b6b67;
  /* Haus-Teal eine Stufe dunkler, wie auf der Startseite: #068377 steht als
     Kleintext auf Weiss nur bei 4,26:1, #056c62 bei 6,3:1. */
  --sc-accent:     #056c62;
  --sc-accent-ink: #ffffff;
  --sc-font-display: 'Playfair Display', Georgia, serif;
  --sc-font-text:    'Raleway', 'Segoe UI', system-ui, sans-serif;
  --sc-font-mono:    'Segoe UI', system-ui, sans-serif;

  --dol-line:  color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --dol-paper: #ffffff;
  --sc-shadow-color: 168 30% 12%;
  --dol-fehler: #a3282b;
}

body { font-weight: 400; background: var(--sc-surface); }
.sc-display { font-weight: 600; }

/* ------------------------------------------------------------- Kopfleiste -- */
.bar {
  position: fixed; top: var(--sc-3); left: 0; right: 0;
  margin-inline: auto; width: fit-content;
  z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: var(--sc-4);
  padding: var(--sc-2) var(--sc-4) var(--sc-2) var(--sc-5);
  max-width: calc(100% - 2 * var(--sc-gutter));
  border-radius: 999px;
  background: color-mix(in oklab, var(--dol-paper) 88%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--dol-line);
  box-shadow: 0 8px 30px rgba(10, 40, 36, 0.10), 0 1px 2px rgba(10, 40, 36, 0.06);
}
.bar__mark { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.bar__mark img { width: 152px; height: auto; display: block; }
.bar__act { display: flex; align-items: center; gap: var(--sc-2); }
@media (max-width: 620px) {
  .bar { gap: var(--sc-3); padding-left: var(--sc-4); padding-right: var(--sc-3); top: var(--sc-2); }
  .bar__mark img { width: 118px; }
  .bar__act .btn { padding: 0.55rem 0.8rem; font-size: var(--sc-t-xs); }
}
@media (max-width: 430px) {
  .bar {
    gap: var(--sc-2);
    padding: var(--sc-2) var(--sc-2) var(--sc-2) var(--sc-3);
    max-width: calc(100% - var(--sc-4));
    flex-wrap: wrap; justify-content: center; row-gap: var(--sc-2);
    border-radius: var(--sc-r-md);
  }
  .bar__mark img { width: 100px; }
  .bar__act { gap: var(--sc-2); }
  .bar__act .btn { padding: 0.5rem 0.6rem; font-size: 0.72rem; letter-spacing: 0; }
}
@media (max-width: 340px) {
  .bar__act .btn { padding: 0.5rem 0.5rem; font-size: 0.68rem; }
}

/* ---------------------------------------------------------------- Knoepfe -- */
.btn {
  display: inline-block; text-decoration: none;
  padding: 0.72em 1.35em; border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--sc-e1);
  border: 0; cursor: pointer;
  transition: background var(--sc-d-fast) var(--sc-ease-out),
              transform var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #056a60; }
}
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent; color: var(--sc-accent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 45%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: color-mix(in oklab, var(--sc-accent) 8%, transparent); }
}
/* Der Weg, auf dessen Seite man gerade steht, ist kein Knopf mehr, sondern
   eine Markierung: gefuellt wie ein aktiver Reiter, ohne Zeiger. */
.btn[aria-current="page"] {
  background: color-mix(in oklab, var(--sc-accent) 10%, transparent);
  pointer-events: none;
}

/* ------------------------------------------------------------------ Seite -- */
/* Oben Platz fuer die schwebende Leiste (Pille rund 4,2 rem, am Telefon bis
   zu zwei Zeilen). */
.seite {
  width: 100%; max-width: 46rem; margin-inline: auto;
  padding: calc(var(--sc-3) + 7rem) var(--sc-gutter) var(--sc-8);
}
@media (max-width: 430px) { .seite { padding-top: calc(var(--sc-2) + 8.5rem); } }
.seite__kopf { margin-bottom: var(--sc-7); }
.seite__kopf .sc-label { display: block; margin-bottom: var(--sc-3); }
.seite__kopf h1 { margin: 0 0 var(--sc-4); }
.seite__kopf .sc-lede { color: var(--sc-ink-soft); }
/* Lange deutsche Woerter („Verbraucherstreitbeilegung“) passen bei 320 px
   nicht in eine Zeile. Die Ueberschriften haben dafuer ­ im Text; das
   hier faengt alles ab, was spaeter dazukommt. */
.seite h1, .seite h2, .seite h3, .recht p, .recht li, .recht dd { overflow-wrap: break-word; }

/* Fliesstext der Rechtsseiten: ruhig, gut lesbar, Ueberschriften in der
   Display-Schrift, aber eine Stufe kleiner als auf der Startseite. */
.recht { color: var(--sc-ink); line-height: 1.65; }
/* Sprungziele (datenschutz.html#dolmetscher) nicht unter der festen Kopfleiste */
.recht [id] { scroll-margin-top: 7rem; }
.recht h2 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: var(--sc-track-snug);
  margin: var(--sc-7) 0 var(--sc-3);
}
.recht h3 {
  font-size: var(--sc-t-base); font-weight: 700; letter-spacing: 0;
  margin: var(--sc-5) 0 var(--sc-2);
}
.recht p, .recht ul, .recht dl { margin: 0 0 var(--sc-4); }
.recht ul { padding-left: 1.2em; }
.recht li + li { margin-top: var(--sc-1); }
.recht a { color: var(--sc-accent); }
.recht address { font-style: normal; margin: 0 0 var(--sc-4); }
.recht .klein { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.recht dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sc-1) var(--sc-4); }
.recht dt { color: var(--sc-ink-soft); }
.recht dd { margin: 0; }
@media (max-width: 520px) {
  .recht dl { grid-template-columns: 1fr; gap: 0; }
  .recht dd { margin-bottom: var(--sc-2); }
}

/* --------------------------------------------------------------- Formular -- */
/* Dieselbe Karte wie der Kasten im Abschlussakt der Startseite (.stub). */
.karte {
  background: var(--dol-paper); border: 1px solid var(--dol-line);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e2); padding: var(--sc-6);
}
@media (max-width: 520px) { .karte { padding: var(--sc-5) var(--sc-4); } }
.karte__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft);
  padding-bottom: var(--sc-3); border-bottom: 1px solid var(--dol-line); margin-bottom: var(--sc-5);
}
.felder { display: grid; gap: var(--sc-4); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .felder { grid-template-columns: 1fr 1fr; }
  .feld--breit { grid-column: 1 / -1; }
}
.feld label, .feld .feld__name {
  display: block; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-bottom: var(--sc-1);
}
.feld input, .feld select, .feld textarea {
  width: 100%; padding: 0.6em 0.7em; border-radius: var(--sc-r-sm);
  border: 1px solid var(--dol-line); background: var(--sc-surface); color: var(--sc-ink);
  font-size: var(--sc-t-sm);
}
.feld textarea { min-height: 7.5em; resize: vertical; line-height: 1.5; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--sc-ink-soft); opacity: 1; }
.feld__hilfe { display: block; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: var(--sc-1); }
.pflicht { color: var(--sc-accent); }
.feld input:user-invalid, .feld select:user-invalid { border-color: var(--dol-fehler); }

/* Kaestchen mit Text daneben; .feld davor, damit „.feld label“ (block,
   klein, blass) und „.feld input“ (Polster der Textfelder) nicht greifen. */
.feld .wahl {
  display: flex; gap: var(--sc-3); align-items: flex-start; margin: 0;
  font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink); cursor: pointer;
}
.feld .wahl input {
  width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; padding: 0; flex: 0 0 auto;
  accent-color: var(--sc-accent); cursor: pointer;
}
.feld .wahl + .feld__hilfe { padding-left: calc(1.15rem + var(--sc-3)); margin-top: var(--sc-2); }

.karte__fuss {
  margin-top: var(--sc-5); padding-top: var(--sc-4); border-top: 1px solid var(--dol-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-5);
}
.karte__fuss .klein { flex: 1 1 18rem; margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.karte__fuss .klein a { color: inherit; }

/* Honigtopf gegen Formular-Roboter: fuer Menschen weder sichtbar noch
   erreichbar, fuer Vorlesesoftware ausgeblendet. */
.topf { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.meldung {
  display: none;
  margin: 0 0 var(--sc-5); padding: var(--sc-4) var(--sc-5);
  border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm); line-height: 1.5;
  border: 1px solid var(--dol-line); background: var(--dol-paper);
}
.meldung:target, .meldung.ist-sichtbar { display: block; }
.mit-skript .meldung:target:not(.ist-sichtbar) { display: none; }
/* Ohne Skript springt der Browser zur Meldung; die schwebende Leiste darf sie
   dabei nicht verdecken. */
.meldung { scroll-margin-top: 7rem; }
.meldung--ok { border-color: color-mix(in oklab, var(--sc-accent) 45%, transparent);
               background: color-mix(in oklab, var(--sc-accent) 7%, var(--dol-paper)); }
.meldung--fehler { border-color: color-mix(in oklab, var(--dol-fehler) 45%, transparent);
                   background: color-mix(in oklab, var(--dol-fehler) 6%, var(--dol-paper)); }
.meldung strong { display: block; margin-bottom: var(--sc-1); }

.btn[disabled] { opacity: 0.6; cursor: progress; }
/* Ladezustand beim Absenden (formular.js): Kreisel vor dem Text. */
.btn.laedt { display: inline-flex; align-items: center; gap: 0.6em; opacity: 0.85; }
.btn.laedt::before {
  content: ''; width: 1em; height: 1em; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: btn-dreh 0.8s linear infinite;
}
@keyframes btn-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.laedt::before { animation: none; } }

/* ------------------------------------------------------------------- Fuss -- */
.foot {
  border-top: 1px solid var(--dol-line);
  padding: var(--sc-5) var(--sc-gutter) var(--sc-7);
  display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-7); justify-content: center;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-align: center;
  background: var(--sc-surface);
}
.foot a { color: var(--sc-ink-soft); }
.foot a:hover { color: var(--sc-accent); }
.foot__mark {
  flex: 0 0 100%; display: flex; justify-content: center;
  margin-bottom: var(--sc-2);
}
.foot__mark img { width: 236px; height: auto; display: block; }
.foot__mark:hover { opacity: 0.82; }
.foot__recht { display: flex; gap: var(--sc-5); }
@media (max-width: 620px) {
  .foot { padding: var(--sc-4) var(--sc-gutter) var(--sc-5); gap: var(--sc-2) var(--sc-5); font-size: var(--sc-t-xs); }
  .foot__mark img { width: 168px; }
}