/* ---------------------------------------------------------------
   Gemeinsames Stylesheet fuer alle Seiten von mullewarf.de.

   Palette: Erdreich. Dunkel als Standard, hell bei heller System-
   einstellung - ein Maulwurfsbau ist nun mal nicht weiss.

   Seitentypen ueber die Klasse am <body>:
     page-home  Startseite (zentriert, gross)
     page-404   Fehlerseite (zentriert, schmal)
     page-doc   Textseite, z. B. Datenschutz (linksbuendig, lang)
   --------------------------------------------------------------- */

:root {
  --soil:   #241c16;
  --sand:   #f0e7db;
  --muted:  #9b8974;
  --line:   #3b2f25;
  --accent: #c9762f;
}
@media (prefers-color-scheme: light) {
  :root {
    --soil:   #f3ece2;
    --sand:   #2a211a;
    --muted:  #6f5f4d;
    --line:   #d8ccbb;
    --accent: #9a530f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--soil);
  color: var(--sand);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Links: unterstrichen mit Akzentfarbe. */
a {
  color: var(--sand);
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
a:hover { color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Hervorgehobener Link: Balken statt Unterstreichung. */
a.action {
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
a.action:focus-visible { outline-offset: 4px; }

/* ---------------------------------------------------------------
   Zentrierte Seiten (Start, 404)
   min-height statt height: bei niedrigem Fenster (Handy quer) waechst
   die Seite mit, statt dass der Inhalt oben abgeschnitten wird.
   --------------------------------------------------------------- */
.page-home,
.page-404 {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(1.5rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: clamp(1rem, 0.62rem + 1.5vw, 1.4rem);
}
.page-home main,
.page-404 main { width: 100%; margin: 0 auto; }

/* ---------------------------------------------------------------
   Startseite
   --------------------------------------------------------------- */
.page-home main { max-width: 44rem; }

.page-home h1 {
  margin: 0;
  font-size: clamp(2.6rem, 1rem + 9vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

/* Der Gang, den das Tier graebt: zeichnet sich einmal beim Laden.
   pathLength="1" am <path> normiert die Laenge, dasharray und
   dashoffset bleiben also richtig, wenn der Pfad geaendert wird.
   Die Luecke ("1 2") verhindert einen Punkt am Pfadende durch
   die runde Linienkappe. */
.tunnel { display: block; width: 100%; height: auto; margin: 0.6rem 0 2.2rem; overflow: visible; }
.tunnel path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  animation: dig 2.2s cubic-bezier(.35,.1,.25,1) 250ms forwards;
}
.tunnel circle {
  fill: var(--accent);
  opacity: 0;
  animation: surface 400ms ease-out 2.3s forwards;
}
@keyframes dig { to { stroke-dashoffset: 0; } }
@keyframes surface { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tunnel path { stroke-dashoffset: 0; animation: none; }
  .tunnel circle { opacity: 1; animation: none; }
}

.lede { margin: 0 0 0.8em; max-width: 30em; }
.aside { margin: 0 0 2em; max-width: 30em; color: var(--muted); font-size: 0.88em; }
.contact { margin: 0; }

.page-home footer {
  margin-top: clamp(2.5rem, 8vw, 5rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.78em;
  color: var(--muted);
}
.page-home footer a { color: inherit; }
.page-home footer a:hover { color: var(--accent); }

/* ---------------------------------------------------------------
   404
   --------------------------------------------------------------- */
.page-404 main { max-width: 30rem; }

.page-404 h1 {
  font-size: clamp(1.8rem, 1rem + 4vw, 3rem);
  letter-spacing: -0.035em;
  margin: 0 0 0.4rem;
}
.page-404 p { color: var(--muted); margin: 0 0 1.6rem; }

/* ---------------------------------------------------------------
   Textseiten (Datenschutz, spaeter Impressum)
   --------------------------------------------------------------- */
.page-doc {
  padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 5rem);
  font-size: 1.02rem;
  line-height: 1.65;
}
.page-doc main { max-width: 38rem; margin: 0 auto; }

.page-doc h1 {
  font-size: clamp(1.9rem, 1rem + 3vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.2em;
}
.page-doc .stand { color: var(--muted); font-size: 0.85rem; margin: 0 0 3rem; }

.page-doc h2 {
  font-size: 1.1rem;
  margin: 2.6rem 0 0.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.page-doc h2:first-of-type { border-top: none; padding-top: 0; }

.page-doc p,
.page-doc ul { margin: 0 0 1rem; }
.page-doc ul { padding-left: 1.2rem; }
.page-doc li { margin-bottom: 0.25rem; }

.page-doc .back {
  display: inline-block;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: 0.85rem;
  color: var(--muted);
}
.page-doc .back:hover { color: var(--accent); }