@charset "UTF-8";

/* ==========================================================================
   Linus Walter Lernmittel — Stylesheet
   Farbleitmotiv: die zehn Zehnerfarben der WalterWendel
   ========================================================================== */

:root {
  /* Flächen und Schrift */
  --papier:      #fdfaf4;
  --flaeche:     #ffffff;
  --flaeche-alt: #f6f1e7;
  --tinte:       #221d16;
  --tinte-weich: #5d5346;
  --tinte-zart:  #786c5b;   /* AA-tauglich: 4.9:1 auf --papier */
  --linie:       #e6ddcd;
  --linie-stark: #d3c7b1;

  /* Akzente */
  --holz:        #a9743c;
  --holz-tief:   #83552a;
  --holz-hell:   #f2e6d5;

  /* Die zehn Zehnerfarben */
  --z0: #c0392b;
  --z1: #d2691e;
  --z2: #c9a227;
  --z3: #6b8e23;
  --z4: #2e8b6f;
  --z5: #2f7fa8;
  --z6: #45599f;
  --z7: #7a4e9e;
  --z8: #a83c78;
  --z9: #8a5a3b;

  /* Tiefere Varianten für Flächen, die weisse Schrift tragen. Orange, Gold,
     Grün, Petrol und Blau sind in ihrer leuchtenden Form zu hell dafür; die
     übrigen fünf bestehen den Kontrast bereits und bleiben unverändert.
     So bleibt der Farbstreifen leuchtend und die Ziffern lesbar. */
  --z0-tief: var(--z0);
  --z1-tief: #a85210;
  --z2-tief: #8a6b12;
  --z3-tief: #567218;
  --z4-tief: #237059;
  --z5-tief: #276a8d;
  --z6-tief: var(--z6);
  --z7-tief: var(--z7);
  --z8-tief: var(--z8);
  --z9-tief: var(--z9);

  /* Typografie */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Mass und Rhythmus */
  --spalte: 68rem;
  --spalte-schmal: 40rem;
  --rand: clamp(1.25rem, 5vw, 3rem);
  --radius: 3px;
  --schatten: 0 1px 2px rgba(34, 29, 22, .06), 0 8px 24px -12px rgba(34, 29, 22, .18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:      #17140f;
    --flaeche:     #1e1a14;
    --flaeche-alt: #251f18;
    --tinte:       #f0e9dd;
    --tinte-weich: #b9ae9c;
    --tinte-zart:  #8b8071;
    --linie:       #332c22;
    --linie-stark: #443b2e;
    --holz:        #d19a5e;
    --holz-tief:   #e3b177;
    --holz-hell:   #2b2319;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
  }
}

/* --------------------------------------------------------------- Grundlage */

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--holz-tief);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--tinte); }

:focus-visible {
  outline: 2px solid var(--z5);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.15rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lauftext { max-width: 36em; }
.lauftext p + h3 { margin-top: 1.8em; }

.vorspann {
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  line-height: 1.55;
  color: var(--tinte-weich);
  max-width: 34em;
}

.klein { font-size: .875rem; color: var(--tinte-weich); }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute; left: var(--rand); top: -4rem;
  background: var(--tinte); color: var(--papier);
  padding: .6rem 1rem; border-radius: var(--radius);
  z-index: 100; transition: top .15s;
}
.sprungmarke:focus { top: .75rem; }

/* ------------------------------------------------------------------ Raster */

.bahn {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: var(--rand);
}
/* Die schmale Lesespalte behält die Breite der normalen Bahn und begrenzt
   stattdessen ihre Kinder. So bleibt der Text auf derselben linken Kante wie
   Titel und Navigation, statt in der Seite zu schwimmen. */
.bahn--schmal { max-width: var(--spalte); }
.bahn--schmal > * { max-width: var(--spalte-schmal); }

section { padding-block: clamp(3rem, 7vw, 5.5rem); }
section + section { padding-top: 0; }

.trennlinie { border-top: 1px solid var(--linie); padding-top: clamp(3rem, 7vw, 5.5rem); }

/* -------------------------------------------------------- Zehnerfarbstreif */

.farbstreifen {
  display: flex;
  height: 4px;
  width: 100%;
}
.farbstreifen span { flex: 1; }
.farbstreifen span:nth-child(1) { background: var(--z0); }
.farbstreifen span:nth-child(2) { background: var(--z1); }
.farbstreifen span:nth-child(3) { background: var(--z2); }
.farbstreifen span:nth-child(4) { background: var(--z3); }
.farbstreifen span:nth-child(5) { background: var(--z4); }
.farbstreifen span:nth-child(6) { background: var(--z5); }
.farbstreifen span:nth-child(7) { background: var(--z6); }
.farbstreifen span:nth-child(8) { background: var(--z7); }
.farbstreifen span:nth-child(9) { background: var(--z8); }
.farbstreifen span:nth-child(10) { background: var(--z9); }

/* -------------------------------------------------------------------- Kopf */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--linie);
}

.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.25rem;
}

.wortmarke {
  display: flex; align-items: baseline; gap: .55rem;
  font-family: var(--serif); text-decoration: none; color: var(--tinte);
  font-size: 1.2rem; letter-spacing: -.01em; white-space: nowrap;
}
.wortmarke b { font-weight: 600; }
.wortmarke span {
  font-family: var(--sans); font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-zart);
}

.navigation ul {
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.7rem);
  list-style: none; margin: 0; padding: 0;
}
.navigation a {
  display: block; padding: .35rem 0;
  font-size: .95rem; color: var(--tinte-weich);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.navigation a:hover { color: var(--tinte); }
.navigation a[aria-current="page"] {
  color: var(--tinte); border-bottom-color: var(--holz);
}

.nav-schalter, .nav-kasten { display: none; }

@media (max-width: 56rem) {
  /* Das Kästchen steuert das Menü ohne JavaScript. Es wird nur optisch
     verborgen, nicht mit hidden entfernt — sonst fiele es aus der
     Tabulatorreihenfolge und das Menü wäre per Tastatur nicht bedienbar. */
  .nav-kasten {
    display: block; position: absolute;
    width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
  }
  .nav-kasten:focus-visible + .nav-schalter {
    outline: 2px solid var(--z5); outline-offset: 3px; border-radius: 2px;
  }

  .nav-schalter {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; margin-right: -.75rem;
    font: inherit; font-size: .9rem; color: var(--tinte);
    background: none; border: 0; cursor: pointer;
  }
  .nav-schalter svg { width: 1.15rem; height: 1.15rem; }

  .navigation {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten);
    display: none;
  }
  .nav-kasten:checked ~ .navigation { display: block; }

  .navigation ul {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--rand) 1.25rem;
  }
  .navigation li + li { border-top: 1px solid var(--linie); }
  .navigation a { padding: .8rem 0; font-size: 1rem; border-bottom: 0; }
  .navigation a[aria-current="page"] { color: var(--holz-tief); font-weight: 600; }
}

/* ------------------------------------------------------------------- Titel */

.titelblock { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.titelblock .vorspann { margin-top: 1.25rem; }

.rubrik {
  display: inline-block; margin-bottom: 1rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--holz-tief);
}

/* ------------------------------------------------------------------- Hero */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.hero__gitter {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 52rem) {
  .hero__gitter { grid-template-columns: 1.05fr .95fr; }
}

.hero__bild {
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  border: 1px solid var(--linie);
  overflow: hidden;
  background: var(--flaeche);
  max-width: min(100%, var(--breite, 100%));
  margin-inline: auto;
}
.hero__bild img { width: 100%; }

.hero__aktionen {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 2rem;
}

/* ----------------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.35rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  text-decoration: none; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.knopf--voll {
  background: var(--tinte); color: var(--papier); border-color: var(--tinte);
}
.knopf--voll:hover { background: var(--holz-tief); border-color: var(--holz-tief); color: #fff; }
.knopf--leer {
  background: transparent; color: var(--tinte); border-color: var(--linie-stark);
}
.knopf--leer:hover { border-color: var(--tinte); color: var(--tinte); background: var(--flaeche-alt); }

/* ------------------------------------------------------------- Produktnetz */

.produktnetz {
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none; margin: 0; padding: 0;
}

/* Vier gleichrangige Karten sollen in einer Reihe stehen, statt 3 + 1 */
@media (min-width: 62rem) {
  .produktnetz--vier { grid-template-columns: repeat(4, 1fr); }
}

.karte {
  display: flex; flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.karte:hover { border-color: var(--linie-stark); transform: translateY(-2px); box-shadow: var(--schatten); }

.karte__bild {
  background: var(--flaeche-alt);
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--linie);
}
.karte__bild img { max-height: 100%; width: auto; object-fit: contain; }

.karte__text { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
/* Die Kartenüberschrift ist je nach Seite h2 oder h3 — sie sieht gleich aus,
   damit die Gliederung der Seite folgen kann und nicht dem Aussehen. */
.karte__text :is(h2, h3) { font-size: clamp(1.15rem, 2.2vw, 1.35rem); margin-bottom: .35rem; }
.karte__text :is(h2, h3) a { text-decoration: none; color: var(--tinte); }
.karte__text :is(h2, h3) a:hover { color: var(--holz-tief); }
.karte__text p { font-size: .95rem; color: var(--tinte-weich); margin-bottom: 1rem; }
.karte__meta {
  margin-top: auto; padding-top: .25rem;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-zart);
}
.karte--vergriffen .karte__bild img { filter: saturate(.25); opacity: .8; }

/* --------------------------------------------------------- Text mit Bilder */

.duo {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 48rem) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--eng { grid-template-columns: 1.35fr .65fr; }
  .duo--gedreht > *:first-child { order: 2; }
}

figure { margin: 0; }

/* Die Fotos stammen aus der Frühzeit der Website und sind höchstens 500 px
   breit. --breite hält jedes Bild auf seiner nativen Grösse, damit nichts
   hochgerechnet und unscharf wird; der Generator setzt den Wert je Bild.
   Gerahmt wird deshalb das Bild, nicht die figure — sonst würde die
   Bildlegende auf Bildbreite zusammengedrückt. */
.bildrahmen img {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: .5rem;
  box-shadow: var(--schatten);
  max-width: min(100%, var(--breite, 100%));
  margin-right: auto;
}

figcaption {
  margin-top: .7rem; font-size: .85rem; line-height: 1.5;
  color: var(--tinte-zart);
  max-width: 30em;
}

.bildreihe {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 0; padding: 0; list-style: none;
}

/* ------------------------------------------------------------ Vorteilliste */

.vorteile { list-style: none; margin: 0; padding: 0; counter-reset: v; }
.vorteile li {
  position: relative; counter-increment: v;
  padding: .9rem 0 .9rem 3.25rem;
  border-top: 1px solid var(--linie);
}
.vorteile li:last-child { border-bottom: 1px solid var(--linie); }
.vorteile li::before {
  content: counter(v);
  position: absolute; left: 0; top: .95rem;
  width: 2.15rem; height: 2.15rem;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: .95rem; font-weight: 600;
  color: #fff; border-radius: 50%;
}
.vorteile li:nth-child(1)::before  { background: var(--z0-tief); }
.vorteile li:nth-child(2)::before  { background: var(--z1-tief); }
.vorteile li:nth-child(3)::before  { background: var(--z2-tief); }
.vorteile li:nth-child(4)::before  { background: var(--z3-tief); }
.vorteile li:nth-child(5)::before  { background: var(--z4-tief); }
.vorteile li:nth-child(6)::before  { background: var(--z5-tief); }
.vorteile li:nth-child(7)::before  { background: var(--z6-tief); }
.vorteile li:nth-child(8)::before  { background: var(--z7-tief); }
.vorteile li:nth-child(9)::before  { background: var(--z8-tief); }
.vorteile li:nth-child(10)::before { background: var(--z9-tief); }

/* --------------------------------------------------------------- Lernstufen */

.lernstufen {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.lernstufen > li {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--holz);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
}
.lernstufen > li:nth-child(1) { border-top-color: var(--z0); }
.lernstufen > li:nth-child(2) { border-top-color: var(--z4); }
.lernstufen > li:nth-child(3) { border-top-color: var(--z6); }
.lernstufen h3 { font-size: 1.05rem; margin-bottom: .75rem; }
.lernstufen ul { margin: 0; padding-left: 1.15em; font-size: .95rem; color: var(--tinte-weich); }
.lernstufen li + li { margin-top: .35rem; }

/* ---------------------------------------------------------------- Merkmale */

.merkmale {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
}
.merkmale div {
  display: grid; grid-template-columns: 1fr; gap: .15rem;
  padding: .85rem 0; border-top: 1px solid var(--linie);
}
.merkmale div:last-child { border-bottom: 1px solid var(--linie); }
@media (min-width: 34rem) {
  .merkmale div { grid-template-columns: 11rem 1fr; gap: 1.5rem; }
}
.merkmale dt { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-zart); }
.merkmale dd { margin: 0; }

/* --------------------------------------------------------------- Zitatblock */

.zitatnetz {
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.zitat {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--holz);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
}
.zitat blockquote { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.08rem; line-height: 1.5; }
.zitat cite { font-style: normal; font-size: .875rem; color: var(--tinte-weich); }
.zitat cite b { display: block; color: var(--tinte); font-weight: 600; }

.grosszitat {
  margin: 0; padding: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  line-height: 1.4; text-wrap: balance;
}
.grosszitat footer { margin-top: 1rem; font-family: var(--sans); font-size: .9rem; color: var(--tinte-weich); }

/* Für längere Zitate: gleicher Ton, aber lesbares Mass statt Schauformat. */
.grosszitat--lang {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  border-left: 3px solid var(--holz);
  padding-left: clamp(1.1rem, 3vw, 1.75rem);
  text-wrap: initial;
}

/* ------------------------------------------------------------------ Banner */

.banner {
  background: var(--flaeche-alt);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.banner h2 { margin-bottom: .5rem; }
.banner .hero__aktionen { margin-top: 1.5rem; }

/* ------------------------------------------------------------- Preistabelle */

.tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.preise {
  width: 100%; min-width: 33rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.preise caption {
  text-align: left; font-family: var(--serif); font-size: 1.25rem;
  font-weight: 600; padding-bottom: .85rem;
}
.preise th, .preise td { padding: .8rem .9rem; text-align: left; vertical-align: top; }
.preise thead th {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-zart); font-weight: 600;
  border-bottom: 1px solid var(--linie-stark);
}
.preise tbody th { font-weight: 500; }
.preise tbody tr + tr th, .preise tbody tr + tr td { border-top: 1px solid var(--linie); }
.preise td.zahl, .preise th.zahl { text-align: right; white-space: nowrap; }
.preise tbody tr:hover { background: var(--flaeche-alt); }
.preise .hinweis { font-size: .85rem; color: var(--tinte-weich); display: block; margin-top: .2rem; }

/* ------------------------------------------------------------------ Kontakt */

.kontaktnetz {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .kontaktnetz { grid-template-columns: 1fr 1fr; } }

.adresse { font-style: normal; line-height: 1.8; }
.adresse a { color: var(--tinte); }

/* -------------------------------------------------------------------- Fuss */

.fuss {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  background: var(--flaeche-alt);
  border-top: 1px solid var(--linie);
}
.fuss__innen {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 46rem) { .fuss__innen { grid-template-columns: 1.2fr 1fr 1fr; } }

.fuss h2 {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-zart);
  margin-bottom: 1rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li + li { margin-top: .55rem; }
.fuss a { color: var(--tinte-weich); text-decoration: none; font-size: .95rem; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; }

.fuss__schluss {
  border-top: 1px solid var(--linie);
  padding-block: 1.35rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .85rem; color: var(--tinte-zart);
}

/* ------------------------------------------------------------------- Druck */

@media print {
  :root { --papier: #fff; --flaeche: #fff; --flaeche-alt: #fff; --tinte: #000; --tinte-weich: #333; }
  .kopf, .fuss__innen, .sprungmarke, .hero__aktionen, .farbstreifen { display: none !important; }
  body { font-size: 10.5pt; }
  section { padding-block: .75rem; }
  a { color: #000; text-decoration: none; }
  .preise { min-width: 0; }
  .banner, .karte, .zitat { border: 1px solid #999; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}