/**
 * base.css — Reset, Typografie-Basis, Layout-Primitives (T-03).
 *
 * Jeder Wert kommt aus tokens.css (Regel R4); scripts/lint-tokens.mjs
 * erzwingt das. Komponenten- und Sektions-CSS folgen in eigenen Dateien.
 */

/* ------------------------------------------------------------------ Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  color: var(--ec-color-ink);
  background-color: var(--ec-color-surface);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-body);
  line-height: var(--ec-lh-base);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------- Typografie */

/*
 * overflow-wrap ist hier kein Feinschliff, sondern die Bremse gegen
 * waagerechtes Scrollen: Überschriften stehen in --ec-fs-h1, und die deutsche
 * Fachsprache liefert Wörter wie „Datenschutzerklärung" oder
 * „Suchmaschinenoptimierung". Bei 320 px war ein solches Wort 368 px breit und
 * schob die Seite auf.
 *
 * NICHT hyphens: auto. Das trennt zwar schöner, verkleinert aber die
 * Mindestbreite der Überschrift — und Spalten, die sich nach ihrem Inhalt
 * bemessen, fallen daraufhin in sich zusammen. Im Kontaktabschnitt schrumpfte
 * die Spalte bei 768 px von 220 auf 100 px, und aus „Gespräch vereinbaren"
 * wurden vier Zeilen. overflow-wrap bricht nur dann, wenn es sonst
 * überliefe, und lässt die Mindestbreite unberührt.
 */
h1,
h2,
h3,
h4 {
  margin: 0 0 var(--ec-space-sm);
  overflow-wrap: break-word;
  font-family: var(--ec-font-heading);
  font-weight: var(--ec-fw-bold);
  line-height: var(--ec-lh-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--ec-fs-h1);
}

h2 {
  font-size: var(--ec-fs-h2);
}

h3 {
  font-size: var(--ec-fs-h3);
}

p,
li,
dd {
  max-width: var(--ec-measure);
}

p {
  margin: 0 0 var(--ec-space-sm);
}

a {
  color: var(--ec-color-primary);
  text-underline-offset: var(--ec-space-3xs);
}

a:hover,
a:focus-visible {
  color: var(--ec-color-primary-hover);
}

small {
  font-size: var(--ec-fs-small);
}

/* ------------------------------------------------------------------- Fokus */

:focus-visible {
  outline: var(--ec-focus-width) solid var(--ec-color-focus);
  outline-offset: var(--ec-focus-offset);
}

/* --------------------------------------------------------------- Skip-Link */

/*
 * Der Skip-Link ist immer im DOM und immer fokussierbar — er wird NICHT mit
 * display:none oder visibility:hidden versteckt, das würde ihn aus der
 * Tabulatorreihenfolge nehmen. Stattdessen liegt er ausserhalb des sichtbaren
 * Bereichs und kommt bei Fokus herein (TC-A11Y-03).
 */
.ec-skip-link {
  position: absolute;
  z-index: var(--ec-z-skiplink);
  top: var(--ec-space-2xs);
  left: var(--ec-space-2xs);

  /* Mindestens 44 px hoch — auch der Skip-Link ist ein Touch-Ziel (T-14). */
  display: inline-flex;
  align-items: center;
  min-height: var(--ec-touch-target);
  padding: var(--ec-space-2xs) var(--ec-space-sm);
  transform: translateY(-200%);
  border-radius: var(--ec-radius-sm);
  background-color: var(--ec-color-surface);
  color: var(--ec-color-primary);
  box-shadow: var(--ec-shadow-md);
  font-weight: var(--ec-fw-medium);
  text-decoration: none;
  transition: transform var(--ec-duration-fast) var(--ec-ease);
}

.ec-skip-link:focus {
  transform: translateY(0);
}

/* -------------------------------------------------------- Layout-Primitives */

.ec-container {
  width: 100%;
  max-width: var(--ec-container-max);
  margin-inline: auto;
  padding-inline: var(--ec-container-pad);
}

.ec-section {
  padding-block: var(--ec-section-py);
  background-color: var(--ec-color-surface);
  color: var(--ec-color-ink);
}

.ec-section[data-surface="alt"] {
  background-color: var(--ec-color-surface-alt);
}

/*
 * Rhythmus statt Gleichtakt. Die Rolle vergibt index.php inhaltlich; hier
 * wird sie nur noch in Abstand übersetzt. Sektionen ohne data-rhythm bleiben
 * beim Grundtakt darüber.
 */
.ec-section[data-rhythm="tight"] {
  padding-block: var(--ec-section-py-tight);
}

.ec-section[data-rhythm="loose"] {
  padding-block: var(--ec-section-py-loose);
}

/* Sprungziele dürfen nicht unter dem klebenden Header verschwinden (8.3). */
.ec-section[id],
.ec-main[id] {
  scroll-margin-top: var(--ec-scroll-margin);
}

.ec-main:focus {
  outline: none;
}

/* ------------------------------------------------------------------ Header */

.ec-header {
  position: sticky;
  z-index: var(--ec-z-sticky);
  top: 0;
  border-bottom: var(--ec-border-width) solid var(--ec-color-border);
  background-color: var(--ec-color-surface);
}

.ec-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ec-space-sm);
  min-height: var(--ec-header-height);
  transition: min-height var(--ec-duration-base) var(--ec-ease);
}

/*
 * Kompaktzustand beim Scrollen. Als Klasse, nicht als Inline-Stil — sonst
 * wäre der Zustand weder testbar noch per CSS überschreibbar (T-04).
 */
.ec-header--compact .ec-header__inner {
  min-height: var(--ec-header-height-compact);
}

.ec-header--compact .ec-header__logo {
  max-height: var(--ec-logo-height-compact);
}

/*
 * Wächterelement für den Kompaktzustand. Es wird von nav.js eingefügt, hat
 * keine Ausdehnung und ist für die Ausgabe bedeutungslos.
 */
.ec-scroll-sentinel {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
}

.ec-header__brand {
  display: inline-flex;
  align-items: center;

  /* Das Logo ist niedriger als 44 px; der umgebende Verweis nicht (T-14). */
  min-height: var(--ec-touch-target);
}

/*
 * Breite UND Höhe automatisch, begrenzt durch zwei Obergrenzen. Der Browser
 * skaliert das Bild dann proportional in den erlaubten Kasten — es kann nicht
 * mehr verzerren.
 *
 * Vorher stand hier eine feste Höhe. Zusammen mit dem max-width: 100% aus der
 * Grundregel für Bilder hiess das: sobald die Kopfzeile eng wurde, gab die
 * Breite nach, die Höhe aber nicht. Bei 320 px war die Wortmarke auf 26 × 32
 * gequetscht, bei 200 % Zoom auf die Breite null.
 */
.ec-header__logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--ec-logo-height);
  transition: max-height var(--ec-duration-base) var(--ec-ease);
}

/*
 * Der Handlungsaufruf im Kopf erscheint erst ab Tablet. Auf schmalen Geräten
 * konkurriert er mit dem Menüknopf um den Platz, und der Aufruf steht im
 * Menü ohnehin an letzter Stelle.
 */
/*
 * Selektor mit .ec-header davor, nicht nur .ec-header__cta: button.css wird
 * NACH base.css geladen und setzt .ec-button auf display: inline-flex. Bei
 * gleicher Spezifität gewinnt die spätere Regel — der Aufruf stand deshalb
 * auch auf schmalen Geräten in der Kopfzeile und nahm dem Logo 151 px.
 * Dieselbe Vorsichtsmassnahme wie unten in der Media Query.
 */
.ec-header .ec-header__cta {
  display: none;
}

/*
 * Erst ab 64rem, nicht schon ab 48rem.
 *
 * Zwischen 768 und 1023 px steht die Navigation bereits waagerecht und braucht
 * 439 px. Mit dem Aufruf daneben war die Kopfzeile ausgefüllt, bevor das Logo
 * an der Reihe war — es blieben ihm 82 px, und es ist das einzige Element der
 * Zeile, das nachgibt. Der Aufruf steht in diesem Bereich weiterhin im Hero,
 * im Kontaktabschnitt und in der Fusszeile; die Wortmarke hat keinen zweiten
 * Platz.
 */
@media (min-width: 64rem) {
  /*
   * Spezifität bewusst erhöht: button.css wird nach base.css geladen, und
   * .ec-button setzt eine grössere Mindesthöhe. Ohne diesen Selektor wächst
   * der Kopf über die 64 px, die TC-NAV-01 im Kompaktzustand fordert.
   */
  .ec-header .ec-header__cta {
    display: inline-flex;
    min-height: var(--ec-space-xl);
    padding-block: var(--ec-space-3xs);
  }

  .ec-header--compact .ec-header__cta {
    min-height: var(--ec-space-lg);
  }
}

/* -------------------------------------------------------------- Navigation */

.ec-nav__list,
.ec-nav ul {
  display: flex;
  gap: var(--ec-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-nav a {
  display: inline-block;
  padding-block: var(--ec-space-2xs);
  color: var(--ec-color-ink);
  text-decoration: none;
}

.ec-nav a:hover,
.ec-nav a:focus-visible,
.ec-nav [aria-current="true"],
.ec-nav [aria-current="page"] {
  color: var(--ec-color-primary);
}

/*
 * Progressive Enhancement (R5): Grundzustand ist die offene Linkliste ohne
 * Umschalter. Erst die Klasse ec-js — gesetzt vom Template, bevor der Körper
 * gezeichnet wird — schaltet auf Off-Canvas um. Ohne JavaScript bleibt es
 * beim Grundzustand, und zwar auf jeder Bildschirmbreite.
 */
.ec-nav-toggle {
  display: none;
  align-items: center;
  padding: var(--ec-space-2xs) var(--ec-space-xs);
  border: var(--ec-border-width) solid var(--ec-color-border-strong);
  border-radius: var(--ec-radius-sm);
  background-color: var(--ec-color-surface);
  color: var(--ec-color-ink);
  font: inherit;
  cursor: pointer;
}

.ec-js .ec-nav-toggle {
  display: inline-flex;
}

.ec-js .ec-nav {
  position: fixed;
  z-index: var(--ec-z-overlay);
  inset: 0 0 0 auto;
  display: none;
  width: min(100%, 22.5rem);
  padding: var(--ec-space-2xl) var(--ec-space-lg);
  border-left: var(--ec-border-width) solid var(--ec-color-border);
  background-color: var(--ec-color-surface);
  box-shadow: var(--ec-shadow-lg);
}

.ec-js .ec-nav[data-open] {
  display: block;
}

.ec-js .ec-nav ul {
  flex-direction: column;
  gap: var(--ec-space-sm);
}

/* Ab Tablet ist Platz für die waagerechte Leiste; das Off-Canvas entfällt. */
@media (min-width: 48rem) {
  .ec-js .ec-nav-toggle {
    display: none;
  }

  .ec-js .ec-nav {
    position: static;
    display: block;
    width: auto;
    padding: 0;
    border-left: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .ec-js .ec-nav ul {
    flex-direction: row;
    gap: var(--ec-space-md);
  }
}

/* ------------------------------------------------------------------ Footer */

.ec-footer {
  padding-block: var(--ec-space-2xl);
  background-color: var(--ec-color-surface-invert);
  color: var(--ec-color-ink-invert);
}

.ec-footer a {
  color: var(--ec-color-primary);
}

.ec-footer__inner {
  display: grid;
  gap: var(--ec-space-lg);
}

.ec-footer__logo {
  width: auto;
  height: var(--ec-space-md);
  margin-bottom: var(--ec-space-sm);
}

.ec-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------- Hilfsklasse */

.ec-visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}