/* Startseite seyfarth.de (eigenständig, ohne seyfarth.css) */
: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.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 42rem; margin: 0 auto; padding: 3rem 1rem 2rem; }
h1 { margin: 0 0 2.5rem; font-size: 1rem; font-weight: 400; color: var(--leise); }
h1 span { color: var(--akzent); }
h2 {
  margin: 2rem 0 .75rem; font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--leise);
}
ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem;
     grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
a.karte {
  display: block; height: 100%; padding: .9rem 1rem; border: 1px solid var(--linie);
  border-radius: .6rem; background: var(--karte); box-shadow: var(--schatten);
  color: inherit; text-decoration: none; transition: border-color .15s, transform .15s;
}
a.karte:hover, a.karte:focus-visible { border-color: var(--akzent); transform: translateY(-1px); }
a.karte:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.name { display: block; font-weight: 600; }
.host { display: block; font-size: .85rem; color: var(--akzent); overflow-wrap: anywhere; }
.was { display: block; margin-top: .3rem; font-size: .9rem; color: var(--leise); }
footer {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--linie);
  font-size: .85rem; color: var(--leise);
}
footer img { vertical-align: -1px; }
.nobreak { white-space: nowrap; }
@media (prefers-color-scheme: dark) { footer img { filter: invert(.85); } }

body { min-height: 100vh; }
main { position: relative; z-index: 1; padding-bottom: 18rem; }
.wald { position: fixed; left: 0; bottom: 0; width: 100%; height: 40vh; max-height: 260px; object-fit: cover; object-position: bottom; z-index: 0; pointer-events: none; }
.wald .h1 { fill: #ece1cd; } .wald .h2 { fill: #e0d0b4; } .wald .t2 { fill: #cdb995; }
.wald .h3 { fill: #c9b28a; } .wald .t3 { fill: #a8916a; }
@media (prefers-color-scheme: dark) {
  .wald .h1 { fill: #221e1b; } .wald .h2 { fill: #29241f; } .wald .t2 { fill: #2f2924; }
  .wald .h3 { fill: #322b25; } .wald .t3 { fill: #3a322b; }
}
a.karte { backdrop-filter: blur(2px); }
main { position: relative; z-index: 1; }
.topo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; color: #8b0000; opacity: .06; pointer-events: none; }
@media (prefers-color-scheme: dark) { .topo { color: #e09288; opacity: .08; } }
.route { display: block; width: 100%; height: auto; margin: 0 0 1rem; }
.route .rhein { fill: none; stroke: #7aa7c7; stroke-width: 5; stroke-linecap: round; opacity: .45; }
.route .weg { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-dasharray: 6 6; }
.route .ort { fill: var(--akzent); }
.route text { fill: var(--text); font: 600 15px system-ui, sans-serif; }
h2 { display: flex; align-items: center; gap: .45rem; }
.ic { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--akzent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
main { position: relative; z-index: 1; }
.flecken { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .3; pointer-events: none; }
@media (prefers-color-scheme: dark) { .flecken { opacity: .12; } }
/* Rubrikfarben (hell; dunkel weiter unten) */
.r-da { --r: #a85d1a; } .r-em { --r: #8b0000; } .r-abi { --r: #3f6e3a; } .r-cloud { --r: #2c5d8a; }
h2 { color: var(--r, var(--leise)); }
ul a.karte { border-left: 4px solid var(--r, var(--akzent)); background: color-mix(in srgb, var(--karte) 85%, transparent); }
ul a.karte .host { color: var(--r, var(--akzent)); }
@media (prefers-color-scheme: dark) {
  .r-da { --r: #dba466; } .r-em { --r: #e09288; } .r-abi { --r: #8fc283; } .r-cloud { --r: #7fb0dd; }
}
.ic { stroke: var(--r, var(--akzent)); }

ul a.karte { background: var(--karte); }
@media (max-width: 40rem) { .wald { height: 22vh; } main { padding-bottom: 10rem; } .route text { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { a.karte { transition: none; } a.karte:hover, a.karte:focus-visible { transform: none; } }