/* ==========================================================================
   Aufwind – Basis: schlanker Reset, Typografie, Fokus, Hilfsklassen
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Platz für die schwebende Kopfleiste beim Springen zu Ankern (WCAG 2.4.11) */
  scroll-padding-top: 7rem;
  color-scheme: light;
  interpolate-size: allow-keywords;
}

body {
  min-height: 100vh;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: var(--text-m);
  line-height: var(--zeilenhoehe);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* --- Überschriften ------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  color: var(--farbe-ueberschrift);
  font-family: var(--schrift-titel);
  font-weight: 750;
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* nur lange Wörter trennen (deutsche Komposita wie „Beckenbodentraining“ bei großer Schrift) */
  hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
  overflow-wrap: break-word;
}

h1 { font-size: var(--text-3xl); letter-spacing: -0.03em; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.025em; }
h3 { font-size: var(--text-l); line-height: 1.25; font-weight: 700; }
h4 { font-size: var(--text-m); line-height: 1.3; font-weight: 700; }

/* --- Fließtext ----------------------------------------------------------- */
p,
li,
dt,
dd,
th,
td,
label,
legend,
summary,
figcaption,
blockquote {
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

p + p {
  margin-top: 1em;
}

strong,
b {
  font-weight: 700;
}

small {
  font-size: var(--text-xs);
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  cursor: help;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

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

img {
  height: auto;
}

/* --- Links --------------------------------------------------------------- */
a {
  color: var(--farbe-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  transition: color var(--dauer-kurz) ease, text-decoration-color var(--dauer-kurz) ease;
}

a:hover {
  color: var(--farbe-link-hover);
  text-decoration-thickness: 0.14em;
}

a:active {
  color: var(--farbe-petrol-800);
}

/* --- Fokus: deutlich, zweifarbig, auf hellen wie dunklen Flächen sichtbar --- */
:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--farbe-weiss);
  border-radius: 0.4rem;
}

:focus:not(:focus-visible) {
  outline: none;
}

[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

::selection {
  background: var(--farbe-mint-200);
  color: var(--farbe-petrol-900);
}

/* --- Formular-Grundlagen ---------------------------------------------------- */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

/* --- Tabellen ------------------------------------------------------------ */
table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

/* --- Hilfsklassen ------------------------------------------------------------ */
.vh {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sprunglink {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pille);
  background: var(--farbe-petrol-900);
  color: var(--farbe-weiss);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dauer-kurz) ease;
}

.sprunglink:focus {
  transform: translateY(0);
  color: var(--farbe-weiss);
}

.nowrap {
  white-space: nowrap;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  stroke-width: 2;
}

main:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

/* Bedienelemente, die nur mit JavaScript funktionieren, ohne JS gar nicht erst zeigen */
@media (scripting: none) {
  .nur-mit-js {
    display: none !important;
  }
}

/* --- Weniger Bewegung, wenn gewünscht ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Druck ----------------------------------------------------------------- */
@media print {
  .kopf,
  .fuss__wellen,
  .sprunglink,
  .schriftwahl {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}