/* leinenlocker.de – mobil zuerst, eine Schriftfamilie, ein warmer Akzentton in zwei Stufen:
   --haupt (akzentfarbe) für Flächen, Linien und Akzente, --akzent (akzentfarbe_text) für Buttons, Links und Text.
   Beide Werte setzt der Build aus site.config.json und prüft den Kontrast.
   Optische Basis: "Story" von HTML5 UP (html5up.net, CC BY 3.0): Banner, Spotlight-Abschnitte,
   geteilte Flächen mit feinen Linien. Ohne jQuery, ohne Font Awesome, ohne Google Fonts. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-latin-700.woff2") format("woff2");
}

:root {
  --haupt: #EA621F;
  --akzent: #B8460F;
  --akzent-dunkel: #96390c;
  --text: #2b211b;
  --text-leise: #5c4d44;
  --grund: #fffaf6;
  --flaeche: #fde8da;
  --flaeche-hell: #fef3eb;
  --linie: #f4c4a5;
  --rand: 1.25rem;
  --radius: 0.5rem;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.65;
}

img { max-width: 100%; }

a { color: var(--akzent); text-underline-offset: 0.15em; }
a:hover { color: var(--akzent-dunkel); }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

.innen { max-width: 64rem; margin: 0 auto; padding: 0 var(--rand); }
.innen.text { max-width: 42rem; }

h1, h2, h3 { letter-spacing: -0.015em; }
h1 { font-size: 1.75rem; line-height: 1.18; margin: 0.25rem 0 0.9rem; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 2.25rem 0 0.75rem; }
h3 { font-size: 1.2rem; line-height: 1.35; margin: 1.75rem 0 0.5rem; }
p, ul, ol { margin: 0 0 1.1rem; }
li { margin-bottom: 0.4rem; }

/* Kleine Überzeile in Großbuchstaben, wie in Story */
.kicker {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* Kopf */
.kopf { border-bottom: 1px solid var(--linie); background: var(--grund); }
.kopf .innen { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.marke { color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em; }
.marke::before {
  content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.45em;
  border-radius: 50%; background: var(--haupt); vertical-align: 0.05em;
}
.marke:hover { color: var(--text); }

main { padding-bottom: 2rem; }

/* Buttons */
.button {
  display: block;
  width: 100%;
  padding: 0.9rem 1.25rem;
  min-height: 3.25rem;
  border-radius: var(--radius);
  background: var(--akzent);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s;
}
.button:hover { background: var(--akzent-dunkel); color: #fff; }
.button.hell { background: transparent; color: var(--akzent); box-shadow: inset 0 0 0 2px var(--akzent); }
.button.hell:hover { background: var(--akzent); color: #fff; }

/* Werbekennzeichnung direkt am Button */
.werbelink { margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--text-leise); }
.fuss-hinweis { font-size: 0.9rem; }

/* Startseite: Banner */
.banner { background: var(--flaeche); border-bottom: 3px solid var(--haupt); }
.banner .bild { display: none; }
.banner .innen { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.banner h1 { font-size: 2.2rem; line-height: 1.1; margin-bottom: 1rem; }
.gross { font-size: 1.2rem; line-height: 1.6; color: var(--text-leise); }
.banner .button { margin-top: 1.5rem; }

/* Startseite: Spotlight je Pinnwand */
.spotlight { border-bottom: 1px solid var(--linie); }
.spotlight .bild picture { display: block; }
.spotlight .bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--flaeche); }
.spotlight .inhalt { padding: 1.5rem var(--rand) 2rem; }
.spotlight h2 { margin-top: 0; font-size: 1.6rem; }

.liste { list-style: none; padding: 0; margin: 0; }
.liste li { margin: 0; border-top: 1px solid var(--linie); }
.liste li:last-child { border-bottom: 1px solid var(--linie); }
.liste a { display: block; padding: 1rem 0; text-decoration: none; color: var(--text); }
.liste a strong { display: block; color: var(--akzent); font-size: 1.12rem; line-height: 1.35; margin-bottom: 0.25rem; }
.liste a span { display: block; color: var(--text-leise); font-size: 0.98rem; line-height: 1.5; }
.liste a:hover strong { color: var(--akzent-dunkel); text-decoration: underline; }

/* Themenseite */
article.text { padding-top: 1rem; }
.titelbild { margin: 0 calc(-1 * var(--rand)) 0.9rem; }
.titelbild img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 960 / 456; max-height: 22vh; object-fit: cover;
  background: var(--flaeche);
}
.titelbild figcaption { padding: 0.3rem var(--rand) 0; font-size: 0.78rem; color: var(--text-leise); }
.einstieg p { margin-bottom: 1rem; }

.kurs {
  margin: 2.5rem 0 0;
  padding: 1.5rem var(--rand);
  background: var(--flaeche);
  border-radius: var(--radius);
  border-top: 4px solid var(--haupt);
}
.kurs h2 { margin-top: 0; }
.kurs .button { margin-top: 0.5rem; }
.kurs.kompakt { margin: 0 0 2rem; padding: 0.85rem var(--rand) 0.9rem; }
.kurs.kompakt .kicker { margin-bottom: 0.5rem; }
.kurs.kompakt .button { margin-top: 0; }

.weitere { margin-top: 3rem; }

/* Feste Kursleiste (nur Handy, erscheint per leiste.js nach dem ersten Kurs-Kasten) */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--grund);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 18px rgba(43, 34, 28, 0.12);
  padding: 0.55rem 0 calc(0.6rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.leiste.sichtbar { transform: none; visibility: visible; transition: transform 0.25s ease; }
.leiste .innen { display: flex; align-items: center; gap: 0.75rem; }
.leiste .button { flex: 1; min-height: 2.9rem; padding: 0.65rem 1rem; font-size: 1.05rem; }
.leiste .werbung { flex: none; font-size: 0.85rem; color: var(--text-leise); }
.mit-leiste ~ .weitere { padding-bottom: 4.5rem; }
@media (prefers-reduced-motion: reduce) { .leiste, .leiste.sichtbar { transition: none; } }

.entwurf {
  padding: 1rem var(--rand);
  border: 2px solid #b54708;
  background: #fff4e5;
  border-radius: var(--radius);
  font-weight: 700;
}

/* Fuß */
.fuss {
  border-top: 1px solid var(--linie);
  background: var(--flaeche-hell);
  padding: 1.5rem 0 2.5rem;
  font-size: 0.95rem;
  color: var(--text-leise);
}
.fuss nav a { margin-right: 1.25rem; display: inline-block; padding: 0.35rem 0; }
.fuss p { margin: 0.75rem 0 0; }
.fuss .credit { font-size: 0.85rem; }

@media (min-width: 48rem) {
  body { font-size: 1.2rem; }
  h1 { font-size: 2.5rem; }
  .button { display: inline-block; width: auto; min-width: 20rem; }

  .banner .innen { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .banner.mit-bild { display: flex; align-items: stretch; }
  .banner.mit-bild .innen { flex: 1; margin: 0; max-width: none; padding-left: max(var(--rand), calc((100vw - 64rem) / 2 + var(--rand))); padding-right: 3.5rem; }
  .banner.mit-bild .bild { display: block; flex: 0 0 45%; }
  .banner .bild picture { display: block; height: 100%; }
  .banner .bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
  .banner h1 { font-size: 3.4rem; max-width: 14ch; }
  .gross { max-width: 38rem; }

  .spotlight { display: flex; min-height: 24rem; }
  .spotlight .bild { flex: 0 0 45%; }
  .spotlight .bild picture, .spotlight .bild img { height: 100%; }
  .spotlight .inhalt { flex: 1; padding: 3rem 3.5rem; align-self: center; }
  .spotlight.gespiegelt { flex-direction: row-reverse; }
  .spotlight.ohne-bild .inhalt { max-width: 64rem; margin: 0 auto; }

  .titelbild { margin-left: 0; margin-right: 0; }
  .titelbild img { border-radius: var(--radius); max-height: none; }
  .titelbild figcaption { padding-left: 0; }

  .leiste { display: none; }
  .mit-leiste ~ .weitere { padding-bottom: 0; }
}