/* wollwasser.de — Seitenstil
   Grundlage ist brand/wollwasser.css (Designsystem v1.0): Farben, Typografie, Abstände,
   Buttons und Fokus kommen unverändert von dort. Die Schriften zeigen auf die schlanken
   Web-Fassungen aus tools/build-fonts.py. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-ww-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-ww-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

/* Ersatzschriften mit angeglichenen Maßen, damit beim Nachladen nichts springt. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 98.39%;
  ascent-override: 99.4%;
  descent-override: 25.92%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 104.22%;
  ascent-override: 92.96%;
  descent-override: 23.15%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;
  --ww-wolle: #F6F2EA;
  --ww-papier: #FFFDFA;
  --ww-wasser: #245E64;
  --ww-wasser-tief: #17474C;
  --ww-tinte: #243638;
  --ww-kiesel: #596966;
  --ww-nebel: #DFE9E6;
  --ww-leinen: #D9D1C4;

  --ww-bg: var(--ww-wolle);
  --ww-surface: var(--ww-papier);
  --ww-text: var(--ww-tinte);
  --ww-text-muted: var(--ww-kiesel);
  --ww-action: var(--ww-wasser);
  --ww-action-hover: var(--ww-wasser-tief);
  --ww-on-action: var(--ww-papier);
  --ww-divider: var(--ww-leinen);

  --ww-font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --ww-font-body: "Inter", "Inter Fallback", Arial, sans-serif;
  --ww-type-h1: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  --ww-type-h2: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --ww-type-h3: clamp(1.5rem, 1.4rem + 0.4vw, 1.75rem);
  --ww-type-body: 1.0625rem;
  --ww-type-ui: 1rem;
  --ww-type-small: 0.875rem;

  --ww-container: 1184px;
  --ww-measure: 65ch;
  --ww-gutter: 20px;
  --ww-grid-gap: 20px;
  --ww-section-space: clamp(48px, 8vw, 96px);
  --ww-radius-control: 6px;
  --ww-radius-card: 12px;
  --ww-control-min: 48px;
  --ww-motion-fast: 160ms;
  --ww-motion-easing: ease-out;

  /* Abstand vom Inhaltsrand bis zur Fensterkante: dorthin läuft das Faserbild aus. */
  --bleed: max(var(--ww-gutter), (100vw - var(--ww-container)) / 2);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--ww-bg);
  color: var(--ww-text);
  font-family: var(--ww-font-body);
  font-size: var(--ww-type-body);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis: none;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 {
  margin-block: 0 24px;
  font-family: var(--ww-font-display);
  font-weight: 500;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 1;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
h1 { font-size: var(--ww-type-h1); line-height: 1.08; }
h2 { font-size: var(--ww-type-h2); line-height: 1.15; }
h3 { font-size: var(--ww-type-h3); line-height: 1.25; }

p { margin-block: 0 24px; text-wrap: pretty; }
strong { font-weight: 600; }

a {
  color: var(--ww-action);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--ww-motion-fast) var(--ww-motion-easing);
}
a:hover { color: var(--ww-action-hover); text-decoration-thickness: 2px; }

/* Zweifarbiger Fokus: 2px Papier innen, 3px Wasser außen. */
:focus-visible {
  outline: 3px solid var(--ww-wasser);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ww-papier);
}

.ww-container {
  width: min(calc(100% - 2 * var(--ww-gutter)), var(--ww-container));
  margin-inline: auto;
}

.ww-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.ww-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ww-control-min);
  padding: 12px 24px;
  border: 1px solid var(--ww-action);
  border-radius: var(--ww-radius-control);
  background: var(--ww-action);
  color: var(--ww-on-action);
  font-size: var(--ww-type-ui);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--ww-motion-fast) var(--ww-motion-easing),
    border-color var(--ww-motion-fast) var(--ww-motion-easing),
    color var(--ww-motion-fast) var(--ww-motion-easing);
}
.ww-button:hover {
  background: var(--ww-action-hover);
  border-color: var(--ww-action-hover);
  color: var(--ww-on-action);
  text-decoration: none;
}
.ww-button--secondary { background: transparent; color: var(--ww-action); }
.ww-button--secondary:hover { background: var(--ww-nebel); border-color: var(--ww-wasser-tief); color: var(--ww-wasser-tief); }
.ww-button--light { background: var(--ww-papier); border-color: var(--ww-papier); color: var(--ww-wasser); }
.ww-button--light:hover { background: var(--ww-nebel); border-color: var(--ww-nebel); color: var(--ww-wasser-tief); }

/* Wassergrüne Fläche: Text- und Aktionsfarben lokal umstellen (wie .ww-inverse im Designsystem). */
.ww-inverse {
  --ww-text: var(--ww-papier);
  --ww-text-muted: var(--ww-papier);
  --ww-action: var(--ww-papier);
  --ww-action-hover: var(--ww-nebel);
  --ww-on-action: var(--ww-wasser);
  background: var(--ww-wasser);
  color: var(--ww-text);
}

.ww-sr-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 12px 20px;
  border-radius: var(--ww-radius-control);
  background: var(--ww-wasser);
  color: var(--ww-papier);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* Kopfbereich */

.site-header { padding-block: 20px; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo {
  display: inline-flex;
  flex-shrink: 0;
  padding-block: 8px;
  border-radius: 2px;
}
.site-logo img { width: 156px; }

.site-nav ul {
  display: flex;
  gap: 4px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ww-text);
  font-size: var(--ww-type-ui);
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--ww-action);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* Mobil genügt der direkte Weg zum Kontakt; die übrigen Abschnitte folgen beim Scrollen. */
@media (max-width: 47.99rem) {
  .site-nav li:not(.site-nav__contact) { display: none; }
}

/* Einstieg */

.hero {
  overflow-x: clip;
  padding-block: 24px var(--ww-section-space);
}

.hero__grid {
  display: grid;
  gap: 48px;
}

.hero__text { max-width: 36rem; }

.hero__title { margin-bottom: 28px; }

.hero__kicker {
  display: block;
  margin-bottom: 20px;
  color: var(--ww-wasser);
  font-family: var(--ww-font-body);
  font-size: var(--ww-type-small);
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero__claim { display: block; }
.hero__claim span { display: block; }

.hero__lead {
  max-width: 34rem;
  margin-bottom: 32px;
}

.hero__art {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  aspect-ratio: 4 / 3;
  margin-right: calc(-1 * var(--bleed));
  border-radius: var(--ww-radius-card) 0 0 var(--ww-radius-card);
  background: var(--ww-wasser);
  color: var(--ww-papier);
}

.hero__art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__caption {
  position: absolute;
  bottom: clamp(20px, 4%, 40px);
  left: clamp(20px, 5%, 48px);
  max-width: 13ch;
  margin: 0;
  color: var(--ww-papier);
  font-family: var(--ww-font-display);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem);
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 1;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Fasern ziehen sich beim Laden einmal von links nach rechts zusammen. */
.fiber { fill: none; stroke: currentColor; stroke-linecap: round; }
.fiber--core { stroke-width: 3; }

@media (prefers-reduced-motion: no-preference) {
  .fiber {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: fiber-draw 2200ms cubic-bezier(0.3, 0.55, 0.2, 1) both;
  }
  .fiber.t1 { animation-duration: 1700ms; }
  .fiber.t2 { animation-duration: 2000ms; }
  .fiber.t3 { animation-duration: 2400ms; }
  .fiber.t4 { animation-duration: 2800ms; }
  .fiber.d1 { animation-delay: 0ms; }
  .fiber.d2 { animation-delay: 120ms; }
  .fiber.d3 { animation-delay: 240ms; }
  .fiber.d4 { animation-delay: 360ms; }
  .fiber.d5 { animation-delay: 480ms; }
  .fiber.d6 { animation-delay: 600ms; }
  .fiber.d7 { animation-delay: 720ms; }
  .fiber.d8 { animation-delay: 840ms; }
  .fiber--core { animation-duration: 2600ms; animation-delay: 500ms; }

  .hero__caption { animation: caption-in 900ms 1900ms ease-out both; }
}

@keyframes fiber-draw { to { stroke-dashoffset: 0; } }
@keyframes caption-in { from { opacity: 0; } }

@media (min-width: 64rem) {
  :root { --ww-gutter: 32px; --ww-grid-gap: 32px; }

  .hero { padding-top: 40px; }
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 48px;
  }
  .hero__art { aspect-ratio: auto; height: clamp(520px, 44vw, 660px); }
}

@media (min-width: 48rem) {
  :root { --ww-type-body: 1.125rem; }
}

/* Abschnitte */

.section { padding-block: var(--ww-section-space); }

.section__intro { max-width: var(--ww-measure); }
.section__intro p:last-child { margin-bottom: 0; }

/* Kurse */

.kurse__grid {
  display: grid;
  gap: 40px;
}

.facts { margin: 0; }

.facts__row {
  display: grid;
  gap: 4px 24px;
  padding-block: 20px;
  border-top: 1px solid var(--ww-divider);
}
.facts__row:last-child { border-bottom: 1px solid var(--ww-divider); }

.facts dt { font-weight: 600; }
.facts dd { margin: 0; }

@media (min-width: 40rem) {
  .facts__row { grid-template-columns: 8.5rem minmax(0, 1fr); }
}

@media (min-width: 64rem) {
  .kurse__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 32px calc(100% / 12);
    align-items: start;
  }
  .facts { margin-top: 12px; }
}

/* Ablauf */

.ablauf { background: var(--ww-nebel); }

.steps {
  display: grid;
  gap: 48px 32px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.step__art {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-bottom: 20px;
  color: var(--ww-wasser);
}

.step__num {
  display: block;
  margin-bottom: 4px;
  color: var(--ww-kiesel);
  font-size: var(--ww-type-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.step h3 { margin-bottom: 8px; }
.step p { margin: 0; }

.line { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Schmal: Illustration links neben dem Text, damit die vier Schritte kompakt bleiben. */
@media (max-width: 39.99rem) {
  .steps { gap: 36px; margin-top: 40px; }
  .step {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
  }
  .step__art { grid-row: span 3; margin: 2px 0 0; }
}

@media (min-width: 40rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Über Sina */

.sina__grid {
  display: grid;
  gap: 32px;
}

.sina__line {
  width: min(280px, 72%);
  margin-top: 4px;
}

.sina__text { max-width: 36rem; }

.sina__text p:first-child {
  font-family: var(--ww-font-display);
  font-size: var(--ww-type-h3);
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 1;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.insta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
}
.insta svg { flex-shrink: 0; }

@media (min-width: 64rem) {
  .sina__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 32px calc(100% / 12);
    align-items: start;
  }
  .sina__text { padding-top: 10px; }
}

/* Kontakt */

.kontakt h2 { max-width: 16ch; }

.kontakt__lead { max-width: 34rem; }

.kontakt__mail {
  display: inline-block;
  margin-block: 8px 40px;
  color: var(--ww-papier);
  font-family: var(--ww-font-display);
  font-size: clamp(2rem, 1rem + 4.4vw, 4.5rem);
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.kontakt__mail:hover { color: var(--ww-nebel); text-decoration-thickness: 3px; }

.kontakt__status {
  min-height: 1.6em;
  margin: 16px 0 0;
  font-size: var(--ww-type-small);
  font-weight: 500;
}

.kontakt__grid {
  display: grid;
  gap: 48px;
}

.kontakt__hint h3 { margin-bottom: 16px; }

.kontakt__hint ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kontakt__hint li {
  padding-block: 12px;
  border-top: 1px solid rgb(255 253 250 / 0.3);
}
.kontakt__hint li:last-child { border-bottom: 1px solid rgb(255 253 250 / 0.3); }

@media (min-width: 64rem) {
  .kontakt__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 32px calc(100% / 12);
    align-items: end;
  }
  .kontakt__hint { padding-bottom: 40px; }
}

/* Fußbereich */

.site-footer {
  padding-block: 48px;
  font-size: var(--ww-type-small);
  line-height: 1.5;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}

.site-footer__brand img { width: 140px; margin-bottom: 12px; }
.site-footer__brand p { margin: 0; color: var(--ww-kiesel); }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ww-text);
}
.site-footer__links a:hover { color: var(--ww-action); }

.site-footer__copy { margin: 0; color: var(--ww-kiesel); }

/* Rechtliche Seiten und 404 */

.page { padding-block: 32px var(--ww-section-space); }
.page h1 { font-size: var(--ww-type-h2); line-height: 1.15; hyphens: auto; }
.page h2 { margin-top: 48px; font-size: var(--ww-type-h3); }
.page .prose { max-width: var(--ww-measure); }
.page .prose p, .page .prose li { hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.page .prose ul { margin: 0 0 24px; padding-left: 1.2em; }
.page .prose li + li { margin-top: 8px; }
.page__meta { color: var(--ww-kiesel); font-size: var(--ww-type-small); }

.notfound__art { width: min(320px, 100%); margin-bottom: 40px; color: var(--ww-wasser); }

@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;
  }
}

@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; box-shadow: none; }
  .ww-button { border: 1px solid ButtonText; }
}

@media print {
  .site-nav, .skip-link, .hero__art, .ww-actions { display: none; }
  .ww-inverse { background: none; color: #000; }
  .fiber { animation: none; stroke-dashoffset: 0; }
}