/* =====================================================================
   Die kleinen Sternchen – Basis
   Farben, Typografie, Raster, Grundbausteine.
   Farbwelt und Schriften nach Markenblatt „Farben".
   ===================================================================== */

:root {
  /* --- Markenfarben ------------------------------------------------ */
  --leinen:        #FAF7EF;
  --salbei:        #8DB89E;
  --butterblume:   #F2B33D;
  --pfirsich:      #EE9C92;
  --taubenblau:    #7FB8D6;

  /* --- Abgeleitete Töne (Tiefe, Lesbarkeit) ------------------------ */
  --leinen-warm:   #F4EFE2;
  --leinen-tief:   #EDE6D6;
  --tinte:         #22402F;   /* Fließtext auf Leinen – AAA          */
  --tinte-weich:   #4A6B58;   /* Sekundärtext – AA                   */
  --tinte-zart:    #7C9486;   /* Labels, Linien                      */
  --nacht:         #1B3325;   /* Tiefster Ton, Fuß & Siegel          */
  --salbei-tief:   #5E8C74;
  --salbei-hauch:  #E7F0E9;
  --blau-hauch:    #E6F1F8;
  --pfirsich-hauch:#FBEBE8;
  --butter-hauch:  #FDF2DC;

  --linie:         #E2DBC9;
  --linie-zart:    #EDE7D9;

  /* --- Typografie -------------------------------------------------- */
  --schrift-titel: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --schrift-text:  'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-riesig:  clamp(2.9rem, 6.5vw, 6.1rem);
  --t-gross:   clamp(2.4rem, 5.4vw, 4.4rem);
  --t-mittel:  clamp(1.9rem, 3.6vw, 3rem);
  --t-klein:   clamp(1.3rem, 2vw, 1.65rem);
  --t-lead:    clamp(1.1rem, 1.35vw, 1.3rem);
  --t-text:    1.0625rem;
  --t-mini:    0.9375rem;
  --t-label:   0.72rem;

  /* --- Raster & Rhythmus ------------------------------------------- */
  --rand:      clamp(1.25rem, 5vw, 5.5rem);
  --breite:    78rem;
  --luft:      clamp(5rem, 11vw, 10rem);
  --luft-halb: clamp(3rem, 6vw, 5.5rem);

  /* --- Formen ------------------------------------------------------ */
  --r-s:  10px;
  --r-m:  18px;
  --r-l:  28px;
  --r-xl: 40px;
  --blatt: 52% 8% 52% 8% / 52% 8% 52% 8%;

  --schatten-zart: 0 1px 2px rgba(34,64,47,.04), 0 6px 18px -10px rgba(34,64,47,.14);
  --schatten-weich: 0 2px 6px rgba(34,64,47,.05), 0 24px 48px -28px rgba(34,64,47,.28);

  --takt: cubic-bezier(.22,.61,.36,1);
}

/* =====================================================================
   Reset
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  /* clip statt hidden: verhindert Querscrollen, ohne position:sticky zu brechen */
  overflow-x: clip;
}

body {
  background: var(--leinen);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

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

::selection { background: var(--butterblume); color: var(--nacht); }

/* =====================================================================
   Typografie
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--tinte);
}

.t-riesig { font-size: var(--t-riesig); line-height: .94; letter-spacing: -.035em; font-weight: 400; }
.t-gross  { font-size: var(--t-gross);  line-height: 1.0;  letter-spacing: -.028em; }
.t-mittel { font-size: var(--t-mittel); line-height: 1.06; letter-spacing: -.022em; }
.t-klein  { font-size: var(--t-klein);  line-height: 1.22; letter-spacing: -.014em; font-weight: 500; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--tinte-weich);
  max-width: 34em;
}

.fliess > p + p { margin-top: 1.1em; }
.fliess { max-width: 38em; color: var(--tinte-weich); }
.fliess strong { color: var(--tinte); font-weight: 700; }

.mini { font-size: var(--t-mini); line-height: 1.6; color: var(--tinte-weich); }

/* Kapitel-Etikett: kleines Sternchen + gesperrte Versalien */
.etikett {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--schrift-text);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinte-zart);
}
.etikett::before {
  content: '';
  width: 9px; height: 9px;
  flex: none;
  background: var(--stern, var(--butterblume));
  -webkit-mask: var(--stern-maske) center/contain no-repeat;
          mask: var(--stern-maske) center/contain no-repeat;
}

/* Zahl als typografischer Anker (Uhrzeiten, Ziffern) */
.ziffer {
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
}

/* Handschriftlicher Unterstrich – aus dem gestrichelten Bogen des Logos */
.betont {
  position: relative;
  white-space: nowrap;
  color: var(--tinte);
}
.betont::after {
  content: '';
  position: absolute;
  left: -.04em; right: -.04em; bottom: .04em;
  height: .34em;
  background: var(--strich, var(--butterblume));
  opacity: .34;
  border-radius: .3em;
  z-index: -1;
}

/* =====================================================================
   Raster
   ===================================================================== */
.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.huelle--weit { max-width: 92rem; }
.huelle--eng  { max-width: 58rem; }

.abschnitt { padding-block: var(--luft); position: relative; }
.abschnitt--knapp { padding-block: var(--luft-halb); }

.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

/* Auf schmalen Geräten bricht jede Spalte auf volle Breite um.
   Das !important hebt die Spaltenangaben im style-Attribut auf. */
@media (max-width: 54rem) {
  .raster > * { grid-column: 1 / -1 !important; }
}

/* =====================================================================
   Schaltflächen
   ===================================================================== */
.knopf {
  --k-grund: var(--tinte);
  --k-schrift: var(--leinen);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .92rem 1.5rem;
  border-radius: 999px;
  background: var(--k-grund);
  color: var(--k-schrift);
  font-family: var(--schrift-titel);
  font-size: .975rem;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: transform .35s var(--takt), box-shadow .35s var(--takt), background-color .25s;
  box-shadow: 0 1px 2px rgba(34,64,47,.1);
  will-change: transform;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(34,64,47,.55); }
.knopf:active { transform: translateY(0); }

.knopf--sonne  { --k-grund: var(--butterblume); --k-schrift: var(--nacht); }
.knopf--blatt  { --k-grund: var(--salbei);      --k-schrift: var(--nacht); }
.knopf--himmel { --k-grund: var(--taubenblau);  --k-schrift: var(--nacht); }

.knopf--linie {
  --k-grund: transparent;
  --k-schrift: var(--tinte);
  box-shadow: inset 0 0 0 1.5px var(--linie);
}
.knopf--linie:hover { box-shadow: inset 0 0 0 1.5px var(--tinte); transform: translateY(-2px); }

.knopf__pfeil { width: 15px; height: 10px; flex: none; transition: transform .35s var(--takt); }
.knopf:hover .knopf__pfeil { transform: translateX(4px); }

/* Textlink mit wachsender Linie */
.fadenlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  color: var(--tinte);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--takt);
}
.fadenlink:hover { background-size: 100% 1.5px; }
.fadenlink svg { width: 15px; height: 10px; flex: none; transition: transform .4s var(--takt); }
.fadenlink:hover svg { transform: translateX(4px); }

/* =====================================================================
   Bilder
   ===================================================================== */
.bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--leinen-tief);
}
.bild > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--takt);
}
.bild--blatt   { border-radius: var(--blatt); }
.bild--bogen   { border-radius: 999px 999px var(--r-l) var(--r-l); }
.bild--kreis   { border-radius: 50%; }
.bild--zoom:hover > img { transform: scale(1.04); }

.bild-quelle {
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--tinte-zart);
  margin-top: .6rem;
}

/* =====================================================================
   Feine Trennlinie mit Sternchen
   ===================================================================== */
.naht {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--linie);
}
.naht::before, .naht::after {
  content: '';
  height: 1px;
  flex: 1;
  background: currentColor;
}
.naht__stern { width: 13px; height: 13px; flex: none; color: var(--butterblume); }

/* =====================================================================
   Hilfsklassen
   ===================================================================== */
.nur-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprung {
  position: absolute;
  left: var(--rand); top: -100px;
  z-index: 200;
  background: var(--tinte);
  color: var(--leinen);
  padding: .8rem 1.3rem;
  border-radius: 0 0 var(--r-s) var(--r-s);
  text-decoration: none;
  font-family: var(--schrift-titel);
  transition: top .25s var(--takt);
}
.sprung:focus { top: 0; }

.zentriert { text-align: center; }
.zentriert .lead, .zentriert .fliess { margin-inline: auto; }

/* =====================================================================
   Auftritt beim Scrollen
   ===================================================================== */
[data-auf] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s var(--takt), transform .85s var(--takt);
  transition-delay: var(--verzug, 0ms);
}
[data-auf].ist-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-auf] { opacity: 1; transform: none; }
}