/* Unterseiten der SchulAssist-Seite (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 (es wird dort gar
   nicht geladen).

   Farben, Schrift, Knopf und Fuss sind aus site.css (Variante A) uebernommen,
   Wert fuer Wert. Wer dort etwas aendert, aendert es hier mit.
   Kontrast: #1684AC nur fuer grosse Ueberschriften, jeder kleinere blaue Text
   in #0F6A88 (6,1:1 auf Weiss). */

@font-face {
  font-family: "Raleway";
  src: url("assets/fonts/raleway-latin-var.woff2") format("woff2-variations"),
       url("assets/fonts/raleway-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sc-canvas:     #FFFFFF;
  --sc-surface:    #F8F1E7;
  --sc-ink:        #2A2622;
  --sc-ink-soft:   #5B534A;
  --sc-accent:     #FF9903;
  --sc-accent-ink: #241F1B;
  --sc-font-display: "Raleway", "Segoe UI", system-ui, sans-serif;
  --sc-font-text:    "Raleway", "Segoe UI", system-ui, sans-serif;

  --sa-blue:      #1684AC;
  --sa-blue-ink:  #0F6A88;
  --sa-paper:     #FCF8F2;
  --sa-sand:      #F3ECE2;
  --sa-dark:      #241F1B;
  --sa-hair:      rgba(42, 38, 34, 0.16);
  --sa-hair-soft: rgba(42, 38, 34, 0.09);
  --sa-r: 14px;
  --sc-maxw: 78rem;
}

body { background: var(--sc-canvas); color: var(--sc-ink); }
::selection { background: var(--sa-blue-ink); color: #fff; }
:focus-visible { outline: 3px solid var(--sa-blue-ink); outline-offset: 3px; border-radius: 4px; }

.sa-skip {
  position: fixed; z-index: 200; top: 0; left: 0;
  padding: 0.75rem 1.1rem;
  transform: translateY(-120%);
  background: var(--sa-blue-ink); color: #fff;
  font-weight: 700; text-decoration: none;
  border-radius: 0 0 var(--sa-r) 0;
}
.sa-skip:focus-visible { transform: translateY(0); }

/* ------------------------------------------------------------- Kopfband -- */
/* Das dunkle Band nimmt den Hero der Startseite auf: weisse Wortmarke auf
   warmem Dunkel, rechts der orange Knopf. Nicht fixiert, nichts verdeckt. */
.kopf {
  background: var(--sa-dark);
  color: #fff;
}
.kopf__in {
  max-width: var(--sc-maxw); margin-inline: auto;
  padding: clamp(0.9rem, 2.2vw, 1.4rem) var(--sc-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.kopf__mark { display: block; flex: 0 0 auto; border-radius: 4px; }
.kopf__mark img { width: clamp(140px, 16vw, 210px); height: auto; display: block; }
.kopf__act { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); }
.kopf__tel { color: #F6EFE6; font-weight: 700; font-size: var(--sc-t-sm); text-decoration-color: rgba(246, 239, 230, 0.4); white-space: nowrap; }
.kopf__zeit { font-weight: 400; opacity: 0.85; }
@media (max-width: 560px) { .kopf__tel { display: none; } }

.sa-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.45rem 1rem;
  border: 0; border-radius: var(--sa-r);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: inherit; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .sa-cta:hover { background: #FFA929; } }

/* ------------------------------------------------------------------ Seite -- */
.seite {
  width: 100%; max-width: 46rem; margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--sc-gutter) clamp(3.5rem, 8vw, 6rem);
}
.seite__kopf { margin-bottom: clamp(2rem, 5vw, 3rem); }
.sa-label {
  display: block; margin: 0 0 0.75rem;
  font-size: var(--sc-t-xs); font-weight: 700;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.seite__kopf h1 {
  margin: 0 0 1rem;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 700; line-height: 1.08;
  letter-spacing: var(--sc-track-snug);
  color: var(--sa-blue);            /* >=33px: 4,26:1 klaert den 3:1-Boden */
}
.seite__lede { margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); text-wrap: pretty; }
/* Lange deutsche Woerter passen bei 320 px nicht in eine Zeile. */
.seite h1, .seite h2, .seite h3, .recht p, .recht li, .recht dd, .recht address { overflow-wrap: break-word; }

.recht { color: var(--sc-ink); line-height: 1.65; }
.recht h2 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl); font-weight: 700; line-height: 1.15;
  letter-spacing: var(--sc-track-snug);
  color: var(--sa-blue-ink);
  margin: clamp(2.25rem, 5vw, 3rem) 0 0.75rem;
}
.recht > h2:first-child { margin-top: 0; }
.recht h3 { font-size: var(--sc-t-base); font-weight: 700; margin: 1.5rem 0 0.4rem; }
.recht p, .recht ul, .recht dl { margin: 0 0 1rem; }
.recht ul { padding-left: 1.2em; }
.recht li + li { margin-top: 0.25rem; }
.recht a { color: var(--sa-blue-ink); font-weight: 600; }
.recht address { font-style: normal; margin: 0 0 1rem; }
.recht .klein { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.recht dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
.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: 0.5rem; }
}
.recht .hinweis {
  background: var(--sa-sand); border: 1px solid var(--sa-hair-soft);
  border-radius: var(--sa-r); padding: 1rem 1.25rem;
}

/* ------------------------------------------------------------------- Fuss -- */
/* Wie .sa-foot der Startseite, ohne den Platz fuer die Begleitlinie. */
.sa-foot {
  border-top: 1px solid var(--sa-hair-soft);
  background: var(--sa-sand);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sa-foot__grid {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
.sa-foot__home { display: block; border-radius: 4px; }
.sa-foot__mark { width: 132px; height: auto; display: block; }
.sa-foot__links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.sa-foot__links a { font-size: var(--sc-t-sm); font-weight: 700; color: var(--sa-blue-ink); }
.sa-foot__links a[aria-current="page"] { color: var(--sc-ink); text-decoration: none; }
.sa-foot__legal { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-align: right; }
@media (max-width: 860px) {
  .sa-foot__grid { grid-template-columns: 1fr; justify-items: start; }
  .sa-foot__legal { text-align: left; }
}