/* Gemeinsames Aussehen der Unterseiten von seyfarth.de (olav., privat., server.).
   Eine Datei für alle Hosts: nginx liefert sie dort per alias aus (CSP erlaubt nur 'self'). */
:root {
  --grund: #fffaf0; --karte: #ffffff; --text: #1c1917; --leise: #6b6259;
  --akzent: #8b0000; --linie: #e7dccb; --schatten: 0 1px 3px rgba(60,40,20,.08);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #1a1715; --karte: #24201d; --text: #ede6dd; --leise: #a89d91;
          --akzent: #e09288; --linie: #3a332d; --schatten: none; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1rem 2rem; }
h1 { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.25; }
h2 {
  margin: 2.25rem 0 .75rem; font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--leise);
}
a { color: var(--akzent); text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
img, svg { max-width: 100%; height: auto; }
pre, code { font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace; font-size: .9em; }
pre { overflow-x: auto; padding: .75rem 1rem; border: 1px solid var(--linie); border-radius: .5rem; background: var(--karte); }
.leise { color: var(--leise); }
.nobreak { white-space: nowrap; }
.karte {
  padding: 1rem; border: 1px solid var(--linie); border-radius: .6rem;
  background: var(--karte); box-shadow: var(--schatten);
}
.raster { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }
.raster h3 { margin: 0 0 .25rem; font-size: 1rem; }
.raster p { margin: .25rem 0; }
/* Formulare */
form .feld { display: grid; gap: .25rem; margin: 0 0 1rem; }
label { font-weight: 600; }
input[type=text], input[type=email], input[type=password] {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--linie); border-radius: .4rem;
  background: var(--karte); color: var(--text); max-width: 24rem; width: 100%;
}
button, input[type=submit] {
  font: inherit; padding: .55rem 1rem; border: 0; border-radius: .4rem; cursor: pointer;
  background: var(--akzent); color: var(--grund);
}
/* Fuß mit Rückweg */
footer {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--linie);
  font-size: .85rem; color: var(--leise); display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
}
@media print {
  body { background: #fff; color: #000; }
  footer, .nicht-drucken { display: none; }
  a { color: inherit; }
}
/* Hintergrund wie auf seyfarth.de: <body class="mit-bg"> plus drei <img class="bg …" src="/bg/….svg" alt=""> */
.bg { position: fixed; z-index: 0; pointer-events: none; }
.bg-flecken, .bg-topo { inset: 0; width: 100%; height: 100%; }
.bg-flecken { object-fit: cover; opacity: .3; }
.bg-topo { opacity: .06; }
.bg-wald { left: 0; bottom: 0; width: 100%; height: 40vh; max-height: 260px; object-fit: cover; object-position: bottom; }
.mit-bg main { position: relative; z-index: 1; padding-bottom: 18rem; }
@media (prefers-color-scheme: dark) { .bg-flecken { opacity: .12; } .bg-topo { opacity: .08; } }
@media (max-width: 40rem) { .bg-wald { height: 22vh; } .mit-bg main { padding-bottom: 10rem; } }
/* Seiten mit Fließtext: Inhalt auf eine Fläche, damit der Wald beim Scrollen nicht durch den Text läuft */
.mit-bg main.flaeche {
  background: color-mix(in srgb, var(--grund) 92%, transparent); border-radius: .8rem;
  box-shadow: 0 0 2rem color-mix(in srgb, var(--grund) 92%, transparent);
  padding: 2rem 1.5rem 1.5rem; margin: 1.5rem auto 14rem;
}
@media (max-width: 40rem) { .mit-bg main.flaeche { margin: 0 auto 8rem; padding: 1.5rem 1rem 1rem; border-radius: 0; } }