/* ===== Selbst gehostete Google Fonts (Lora, IBM Plex Sans) ===== */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/lora-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/lora-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/lora-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/lora-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/lora-normal.woff2') format('woff2');
}

/* ===== Design-Tokens ===== */
:root{
  color-scheme: only light;
  --bg:            #F4EEDC;   /* warmes Papier, altes Buch statt Bildschirmweiß */
  --bg-alt:        #ECE3CC;   /* etwas dunkler, für Abschnittswechsel */
  --ink:           #2A2318;   /* warmes Beinahe-Schwarz, ohne Blauanteil */
  --ink-soft:      #5C5140;   /* gedämpftes Warmgrau für Fließtext */
  --ink-faint:     #8C8172;   /* für Metainformation */
  --teal:          #3F6B4F;   /* ruhiger Ankerton — Kompetenz, entschärft Richtung Waldgrün */
  --teal-deep:     #2A4A38;
  --ochre:         #B78A49;   /* warmer, sparsam eingesetzter Akzent — unverändert */
  --line:          #D9CBAA;   /* Trennlinien */
  --highlight-bg:  #EFE3C6;   /* Hervorhebung Module, jetzt Pergament statt Minzgrün */
  --card-bg:       #FAF6EC;

  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:  'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html, body{ overflow-x:hidden; }
/* Verhindert, dass mobile Browser (v.a. Samsung Internet) Text eigenmaechtig
   vergroessern ("Font Boosting") - das kann bei ch-basierten max-width-Werten
   (z.B. .hero h1) zu Overflow fuehren, der durch overflow-x:hidden oben nur
   unsichtbar wird statt behoben zu sein, und in Desktop-DevTools nicht sichtbar
   ist, da dieses Verhalten dort nicht emuliert wird. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-serif);
  font-weight:500;
  line-height:1.2;
  margin:0 0 .5em 0;
  color:var(--ink);
}
p{ margin:0 0 1em 0; color:var(--ink-soft); max-width:62ch; }

/* 17px/1.65 bleibt auch auf 360-390px gut lesbar (kein zu kleiner Text) —
   bei den kurzen Zeilen, die dort durch das schmale Layout entstehen, hilft
   aber ein minimal groesserer Zeilenabstand gegen das "gequetschte" Gefuehl
   bei laengeren, mehrzeilig umbrechenden deutschen Woertern/Saetzen. */
@media (max-width:480px){
  body{ line-height:1.7; }
  p{ margin-bottom:1.15em; }
}

/* ===== "Nach oben"-Button (back-to-top.js) ===== */
.back-to-top{
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  background:var(--teal); color:var(--card-bg); border:none;
  font-size:1.3rem; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .2s, transform .2s;
}
.back-to-top.ist-sichtbar{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ background:var(--teal-deep); }
@media (max-width:480px){
  .back-to-top{ bottom:16px; right:16px; width:44px; height:44px; font-size:1.15rem; }
}