/**
 * home.css - Startseite (articles/1.php).
 *
 * Palette an die bestehende Seite angelehnt (style.css/geo_map.css):
 * dunkles Oliv als Basis, Waldgruen/-braun/-gelb als natuerliche Akzente,
 * Gold fuer Text/Highlights, Orange als Hover-/Aktionsfarbe.
 */
/* Fraunces (OFL), selbst gehostet; fehlt die Datei, greift Georgia. */
@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --home-bg: #0d1400;
    --home-card: #35450c;
    --home-card-border: #2B3A00;
    --home-card-hi: #456000;
    --home-gold: #FFC752;
    --home-muted: #cbb27a;
    --home-accent: #ed8208;
    --home-green-mid: #7a9c30;
    --home-green-soft: #9fc24f;
    --home-brown: #6b4a2b;
    --home-yellow: #d9a441;
    /* Display-Serif fuer Ortsnamen/Reisetitel: Fraunces selbst gehostet
       (css/fonts/, siehe @font-face unten), sonst Georgia. */
    --home-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    /* Fliesstext und Bedienelemente: eine Schrift auf allen Geraeten (Tahoma aus style.css gibt es nur unter Windows) */
    --home-body: Arial, Helvetica, sans-serif;
}

.home, .home-lightbox, .hv-layer, .home-notice { font-family: var(--home-body); }
/* Grundwerte der Startseite. Frueher kamen sie aus den Altdateien bootstrap.css/style.css/main.css, die die
   Startseite nicht mehr laedt (index.php). :where() haelt die Spezifizitaet bei 0 wie damals das globale "*". */
:where(body[data-id="1"] *, body[data-id="1"] *::before, body[data-id="1"] *::after) { box-sizing: border-box; }
body[data-id="1"] { margin: 0; background: #000; color: var(--home-gold); font: 14px/1.42857 var(--home-body); overflow-x: hidden; }
:where(body[data-id="1"]) :where(button, input, select, textarea) { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
:where(body[data-id="1"]) :where(h1, h2, h3, h4, h5, h6) { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; }
:where(body[data-id="1"]) a { color: #ffa500; }
.home { background: var(--home-bg); }
/* Zoomknoepfe der Leaflet-Karten (sonst Lucida Console aus leaflet.css) */
.leaflet-bar a, .leaflet-control-zoom a { font-family: var(--home-body); }
.home a { text-decoration: none; }

/* ---------- Nav (nur eingeloggt) ---------- */
.home-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px 40px;
    background: var(--home-card-border);
    flex-wrap: wrap;
}
.home-nav a {
    color: var(--home-muted);
    font-size: 15px;
    letter-spacing: .03em;
}
.home-nav a:hover { color: var(--home-accent); }
/* Das Menue (Navigation::getHTMLMenu) ist Bootstrap-Markup, dessen CSS/JS die Startseite nicht laedt: waagerechte Leiste,
   Untermenues beim Ueberfahren/Fokussieren */
.home-nav .navbar, .home-nav .navbar-collapse { display: block; margin: 0; padding: 0; border: 0; min-height: 0; }
.home-nav ul { list-style: none; margin: 0; padding: 0; }
.home-nav .navbar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.home-nav .navbar-nav > li { position: relative; }
.home-nav .caret { display: inline-block; margin-left: 6px; vertical-align: middle; border-top: 4px solid currentColor;
    border-left: 4px solid transparent; border-right: 4px solid transparent; }
.home-nav .dropdown-menu { display: none; position: absolute; top: 100%; left: -12px; z-index: 50; min-width: 190px;
    padding: 6px 0; background: var(--home-card-border); border: 1px solid var(--home-card-hi); border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.home-nav .dropdown:hover > .dropdown-menu, .home-nav .dropdown:focus-within > .dropdown-menu { display: block; }
.home-nav .dropdown-menu a { display: block; padding: 6px 16px; white-space: nowrap; }
.home-nav .dropdown-menu a:hover { background: var(--home-card-hi); }

/* ---------- Hero ---------- */
/* Erster Bildschirm: Hero + Routen fuellen zusammen die Fensterhoehe, das
   Hero nimmt den Rest nach den (kompakten) Routen. --home-nav-h setzt
   js/home.js (Navigationsleiste, nur eingeloggt). */
.home-first-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--home-nav-h, 0px));
    min-height: calc(100svh - var(--home-nav-h, 0px));
}
.home-hero {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 400px;
    overflow: hidden;
    background: #1a2400;
}
.home-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.8s ease;
}
.home-hero-bg.active { opacity: 1; }
.home-hero-overlay {
    position: absolute;
    inset: 0;
    /* Unten in die Seitenfarbe auslaufen; rechts leicht abdunkeln, damit der
       Text des Sliders auf dem Foto lesbar bleibt. */
    background:
        radial-gradient(ellipse 60% 70% at 72% 50%, rgba(13,20,0,.5) 0%, rgba(13,20,0,0) 100%),
        linear-gradient(180deg, rgba(13,20,0,.15) 0%, rgba(13,20,0,.25) 55%, rgba(13,20,0,.94) 100%);
    pointer-events: none;
}

.home-logo {
    position: absolute;
    top: 16px;
    left: 40px;
    width: 300px;
    height: 150px;
    display: block;
    z-index: 5;
}
.home-logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .3s ease;
}
.home-logo-hover { opacity: 0; }
.home-logo:hover .home-logo-base { opacity: 0; }
.home-logo:hover .home-logo-hover { opacity: 1; }

/* Polaroids unter dem Logo; passt das Hero nicht ganz (kleine Fenster),
   skaliert js/home.js fitHeroHighlights() die Gruppe per --hl-scale. */
.home-highlights {
    position: absolute;
    left: 40px;
    top: 150px;
    width: 660px;
    height: 430px;
    transform: scale(var(--hl-scale, 1));
    transform-origin: left top;
}
.home-highlight-card {
    position: absolute;
    width: 230px;
    background: #f2ead8;
    padding: 14px 14px 32px 14px;
    border-radius: 2px;
    box-shadow: 0 10px 22px rgba(0,0,0,.45);
    transition: transform .35s ease, box-shadow .35s ease;
    display: block;
}
.home-highlight-card:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.04) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.55);
    z-index: 20;
}
.home-highlight-card .thumb { width: 100%; height: 150px; overflow: hidden; background: var(--home-card-border); }
.home-highlight-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-highlight-card .title { margin-top: 10px; color: #2B3A00; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; }
.home-highlight-card .sub { color: #6b6b6b; font-family: Arial, sans-serif; font-size: 11px; }

.home-highlight-card.hc-1 { left: 0; top: 40px; transform: rotate(-6deg); }
.home-highlight-card.hc-2 { left: 200px; top: 0; transform: rotate(4deg); }
.home-highlight-card.hc-3 { left: 120px; top: 200px; transform: rotate(-3deg); }

/* ---------- Hero-Text (Slider) ---------- */
.home-hero-intro {
    position: absolute;
    left: clamp(480px, 40%, 780px);
    right: 7%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 620px;
    z-index: 4;
}
/* Alle Slides liegen uebereinander (Hoehe = hoechste), nur .active ist sichtbar. */
.home-hero-slides-stack { display: grid; }
.home-hero-slide {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .9s ease, transform .9s ease, visibility 0s linear .9s;
}
.home-hero-slide.active { opacity: 1; visibility: visible; transform: none; transition: opacity .9s ease .25s, transform .9s ease .25s, visibility 0s; }
.home-hero-kicker { color: var(--home-gold); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 14px; }
.home-hero-title { margin: 0; color: #f4e6c0; font-family: var(--home-display); font-weight: 400; font-size: clamp(32px, 3.5vw, 58px); line-height: 1.05; letter-spacing: -.015em; text-shadow: 0 2px 22px rgba(0,0,0,.6); }
.home-hero-text { margin: 18px 0 0 0; color: #e2d5b0; font-size: 17px; line-height: 1.6; max-width: 46ch; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.home-hero-text strong { color: #f4e6c0; font-weight: normal; border-bottom: 1px solid rgba(255,199,82,.5); }
.home-hero-link { display: inline-block; margin-top: 22px; color: var(--home-gold); font-size: 14px; letter-spacing: .08em; padding-bottom: 4px; border-bottom: 1px solid rgba(255,199,82,.45); transition: color .25s ease, border-color .25s ease; }
.home-hero-link span { display: inline-block; transition: transform .25s ease; }
.home-hero-link:hover { color: var(--home-accent); border-color: var(--home-accent); }
.home-hero-link:hover span { transform: translateX(4px); }
/* Punkte als duenne Linien; die aktive fuellt sich ueber die Wechselzeit (--hero-interval). */
.home-hero-dots { display: flex; gap: 8px; margin-top: 30px; }
.home-hero-dot { position: relative; width: 38px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
.home-hero-dot i { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(244,230,192,.28); overflow: hidden; }
.home-hero-dot i::after { content: ''; position: absolute; inset: 0; background: var(--home-gold); transform: scaleX(0); transform-origin: left; }
.home-hero-dot.active i::after { animation: home-hero-fill var(--hero-interval, 8s) linear forwards; }
.home-hero-intro.paused .home-hero-dot.active i::after { animation-play-state: paused; }
@keyframes home-hero-fill { to { transform: scaleX(1); } }

/* ---------- Pfeil unten am ersten Bildschirm ---------- */
.home-scroll-hint {
    position: absolute; left: 50%; bottom: 8px; margin-left: -20px; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: #f4e6c0; z-index: 6; transition: opacity .4s ease;
    animation: home-hint-bob 2.2s ease-in-out infinite;
}
.home-scroll-hint:hover { color: var(--home-accent); }
.home-scroll-hint.hidden { opacity: 0; pointer-events: none; }
@keyframes home-hint-bob { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(7px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .home-scroll-hint { animation: none; opacity: .8; }
    .home-hero-dot.active i::after { animation: none; transform: scaleX(1); }
}

/* ---------- Routes ---------- */
.home-section-title { padding: 36px 60px 10px 60px; }
.home-routes-title { padding-top: 22px; }
.home-section-title h2 { font-family: var(--home-display); color: var(--home-gold); font-size: 22px; letter-spacing: .02em; margin: 0; }

.home-routes {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 57px 52px 57px;
}
.home-route {
    flex: 1 1 0;
    overflow: hidden;
    transition: flex .5s ease;
    margin: 0 3px;
    box-shadow: 0 14px 26px rgba(0,0,0,.35);
    line-height: 0;
    height: clamp(140px, 19vh, 210px);
    position: relative;
    display: block;
}
.home-route:hover { flex: 2.6 1 0%; }
/* Farbdimmer: Routenbilder ruhen in Schwarz-Weiss (einheitliche Optik trotz
   Canyon-Rot/Meer-Blau), bei Hover volle Farbe. Touch-Geraete haben kein
   Hover: dort nur milde Entsaettigung. */
.home-route .rimg {
    width: 190%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(.88) contrast(1.05);
    transition: width .5s ease, filter .6s ease;
    display: block;
}
.home-route:hover .rimg { width: 100%; filter: none; }
@media (hover: none) {
    .home-route .rimg { filter: saturate(.7) brightness(.9); }
}
/* Mehrere Featured-Bilder je Route: gestapelt, .active ist sichtbar (home.js initRouteSlides) */
.home-route-slides { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.home-route-slides .rimg { position: absolute; top: 0; left: 0; opacity: 0; transition: width .5s ease, opacity 1.2s ease, filter .6s ease; }
.home-route-slides .rimg.active { opacity: 1; }
.home-route-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 10px 16px 12px 16px;
    background: linear-gradient(0deg, rgba(13,20,0,.92) 0%, rgba(13,20,0,0) 100%);
    /* .home-route setzt line-height:0 (entfernt den Bildlücken-Spalt unter
       dem <img>) - das erbt sonst auch der Text hier und macht ihn
       unsichtbar (0px hohe Zeilen). Hier wieder auf normal zuruecksetzen. */
    line-height: normal;
}
.home-route-name {
    color: var(--home-gold);
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.home-route-meta {
    color: var(--home-muted);
    font-family: Arial, sans-serif;
    font-size: 11px;
    opacity: 0;
    transition: opacity .3s ease .1s;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
.home-route:hover .home-route-meta { opacity: 1; }
.home-route-date, .home-route-stops { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Generisches Einklappen (Aktuelle Reise / Alles durchsuchen) ---------- */
.home-collapsible-toggle {
    cursor: pointer;
    background: var(--home-card);
    border: 1px solid var(--home-card-border);
    color: var(--home-muted);
    border-radius: 3px;
    padding: 9px 16px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.home-collapsible-caret { font-size: 10px; display: inline-block; transition: transform .25s ease; }
.home-collapsible.collapsed .home-collapsible-caret { transform: rotate(180deg); }
/* display:none statt einer max-height-Animation: der Inhalt (z.B. die
   Ergebnis-Grid mit 100+ Karten) ist zu variabel in der Hoehe, um zuverlaessig
   zwischen zwei konkreten Pixelwerten zu animieren - lieber robust als
   trickreich-aber-zerbrechlich. */
.home-collapsible.collapsed .home-collapsible-body { display: none; }

/* ---------- Aktuelle Reise ---------- */
.home-active-trip {
    /* rechts kein Rand: das Hintergrundbild laeuft bis an den Browserrand */
    margin: 10px 0 40px 60px;
    /* Kein overflow:hidden hier: das wuerde die position:sticky-Karte
       weiter unten kaputt machen (ein overflow != visible auf einem
       Vorfahren deaktiviert sticky fuer alle Nachfahren). */
}
/* Editorial statt Kasten: kein Hintergrund/Rand, nur eine feine Linie. */
.home-active-trip-header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 60px 20px 0;
    border-bottom: 1px solid rgba(203,178,122,.18);
}
/* Links im Kopf des Reise-Abschnitts (Zur aktuellen Reise, Routenseite oeffnen) */
.home-trip-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px 20px; }
.home-trip-link { color: var(--home-gold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid rgba(255,199,82,.45); padding-bottom: 3px; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.home-trip-link:hover { color: var(--home-accent); border-color: var(--home-accent); }
.home-trip-link-cms { color: var(--home-muted); border-color: rgba(203,178,122,.4); }
.home-trip-empty { margin: 0; padding: 40px 0 60px; color: var(--home-muted); font-size: 15px; }
.home-active-trip-label { color: var(--home-muted); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.home-active-trip-name { margin: 8px 0 0 0; color: #f4e6c0; font-family: var(--home-display); font-size: 40px; line-height: 1.05; font-weight: 400; letter-spacing: -.01em; }
.home-active-trip-meta { color: var(--home-muted); font-size: 12px; letter-spacing: .06em; margin-top: 10px; }

/* display:grid mit beiden Kindern auf derselben Zelle (grid-area 1/1) statt
   der alten margin-bottom:-620px-Ueberlappung: negative Margins auf einem
   position:sticky-Element verwirren die Berechnung von dessen eigenem
   Containing Block - .home-active-trip-bg blieb dadurch ca. 600px zu lange
   "stuck" und lief sichtbar in die Suche darunter hinein. Grid-Overlap
   erreicht denselben visuellen Effekt (Bild hinter den Karten) ohne diesen
   Seiteneffekt. */
.home-active-trip-body { position: relative; display: grid; }
/* Bild fuellt den sichtbaren Bereich komplett (oben bis unten) waehrend des
   Scrollens durch .home-active-trip - sticky sorgt schon dafuer, dass das
   nur innerhalb der Sektion passiert (siehe Grid-Overlap-Kommentar oben). */
.home-active-trip-bg { grid-area: 1 / 1; position: sticky; top: 0; height: 100vh; z-index: 0; overflow: hidden; }
/* Bild nur 2/3 breit und rechtsbuendig: weniger Hochskalierung (schaerfer),
   die linke Kante blendet per Maske in den Seitenhintergrund aus, oben/
   unten weich auslaufend. Der Wechsel ist ein langsamer Crossfade mit
   leichtem Zoom (Ken Burns), kein harter Tausch. */
.home-active-trip-bg-img {
    position: absolute; top: 0; right: 0; width: 68%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 8s ease-out;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
}
.home-active-trip-bg-img.active { opacity: 1; transform: scale(1); }
/* Leichte Abdunklung links, damit Text auf dem auslaufenden Bild lesbar bleibt. */
.home-active-trip-bg-fade {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(13,20,0,.55) 0%, rgba(13,20,0,.25) 40%, rgba(13,20,0,0) 62%);
}

.home-active-trip-columns {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    /* rechts kein Innenabstand - die Karte sitzt an der Kante, siehe
       .home-active-trip-map. Bleibt trotzdem "align-items: flex-start" (nicht
       stretch), sonst wuerde die sticky-Positionierung der Karte durch eine
       auf Listenhoehe gestreckte Box wirkungslos. */
    padding: 44px 0 40px 0;
}
/* clip-path statt overflow (overflow-x:visible + overflow-y:hidden wird vom
   Spec zu auto und wuerde den Ranken-Ueberhang clippen). */
.home-active-trip-stops-wrap { position: relative; clip-path: inset(0 -100px 0 -100px); flex: 1 1 460px; max-width: 520px; padding-right: 24px; }
/* Ranke: Groesse und Inhalt setzt js/home.js initTripVine() (exakt auf die
   gemessene Listenhoehe, daher keine Verzerrung der Blaetter). */
.home-active-trip-vine { position: absolute; left: 0; top: 0; width: 64px; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.home-active-trip-vine .vn-stem-base { opacity: .3; }
.home-active-trip-vine .vn-stem-grown { transition: stroke-dashoffset 1.1s cubic-bezier(.3,.7,.2,1); }
.home-active-trip-vine .vn-leaf { opacity: .38; transform-box: fill-box; transform-origin: 0% 50%; transition: opacity .8s ease, transform .9s cubic-bezier(.3,1.4,.4,1); }
.home-active-trip-vine .vn-leaf.on { opacity: .95; }
.home-active-trip-vine .vn-node { transition: r .5s ease, fill .5s ease, opacity .5s ease; }

.home-active-trip-stops { position: relative; z-index: 1; display: flex; flex-direction: column; }

/* Station ohne Kasten: Datum klein ueber dem Namen, Collage darunter. Der
   Abstand nach oben (--stop-gap) und die Namensgroesse (--name-size) kommen
   aus der Aufenthaltsdauer (articles/1.php). Fokus ueber Deckkraft und die
   sanfte Skalierung aus geo_map.js, nicht ueber Verkleinern auf Pixelgroesse. */
.home-trip-stop {
    position: relative;
    padding: 0 0 0 62px;
    transform-origin: left top;
    opacity: .5;
    transition: transform .6s cubic-bezier(.3,.7,.2,1), opacity .6s ease;
}
.home-trip-stop + .home-trip-stop { margin-top: var(--stop-gap, 64px); }
.home-trip-stop.is-active, .home-trip-stop[data-distance="0"] { opacity: 1; }
.home-trip-stop[data-distance="1"] { opacity: .66; }
.home-trip-stop[data-distance="2"] { opacity: .5; }
.home-trip-stop[data-distance="3"] { opacity: .4; }
.home-trip-stop-clickable { cursor: pointer; }
.home-trip-stop-clickable:hover { opacity: 1 !important; }
.home-trip-stop-date { color: var(--stop-tint, var(--home-muted)); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 7px; transition: color .6s ease; }
.home-trip-stop-count { opacity: .65; }
.home-trip-stop-name { margin: 0; color: #f4e6c0; font-family: var(--home-display); font-size: var(--name-size, 32px); line-height: 1.06; font-weight: 400; letter-spacing: -.01em; transition: color .6s ease; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.home-trip-stop.is-active .home-trip-stop-name { color: var(--stop-name-active, var(--home-gold)); }

/* Collage: Leitbild gross, bis zu zwei kleinere. l0/l1/l2 sind drei
   Anordnungen (Leitbild links / rechts / oben), je Station nach ID. */
.home-trip-stop-thumbs { display: grid; gap: 6px; margin-top: 16px; max-width: 360px; }
.home-trip-stop-thumbs .ph { position: relative; display: block; overflow: hidden; border-radius: 2px; background: rgba(0,0,0,.25); }
.home-trip-stop-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease, filter .6s ease; filter: saturate(.8); }
.home-trip-stop.is-active .home-trip-stop-thumbs img { filter: none; }
.home-trip-stop-clickable:hover .home-trip-stop-thumbs img { transform: scale(1.04); }
.home-trip-stop-thumbs .ph em {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(13,20,0,.55); color: #f4e6c0; font-style: normal; font-size: 15px; letter-spacing: .06em;
}
.home-trip-stop-thumbs.n1 { grid-template-columns: 1fr; grid-auto-rows: 170px; }
.home-trip-stop-thumbs.n2 { grid-template-columns: 5fr 3fr; grid-auto-rows: 130px; align-items: end; }
.home-trip-stop-thumbs.n2 .ph1 { height: 84%; }
.home-trip-stop-thumbs.n3.l0 { grid-template-columns: 5fr 3fr; grid-template-rows: 78px 78px; }
.home-trip-stop-thumbs.n3.l0 .ph0 { grid-row: 1 / 3; }
.home-trip-stop-thumbs.n3.l1 { grid-template-columns: 3fr 5fr; grid-template-rows: 78px 78px; }
.home-trip-stop-thumbs.n3.l1 .ph0 { grid-column: 2; grid-row: 1 / 3; }
.home-trip-stop-thumbs.n3.l1 .ph1 { grid-column: 1; grid-row: 1; }
.home-trip-stop-thumbs.n3.l1 .ph2 { grid-column: 1; grid-row: 2; }
.home-trip-stop-thumbs.n3.l2 { grid-template-columns: 3fr 2fr; grid-template-rows: 112px 64px; }
.home-trip-stop-thumbs.n3.l2 .ph0 { grid-column: 1 / 3; }

/* Unsichtbare Scrollstrecke nach der letzten Station, siehe Kommentar in
   articles/1.php an der Einfuegestelle. 75vh statt exakt der rechnerisch
   noetigen 70% (anchorFraction) Fensterhoehe, als Sicherheitsabstand gegen
   Rundung und die eigene Hoehe der letzten Karte. */
.home-active-trip-scroll-spacer { height: 75vh; pointer-events: none; }

.home-active-trip-map {
    flex: 0 0 360px;
    /* margin-left:auto schiebt die Karte an die rechte Kante, egal wie viel
       Restplatz die Flex-Zeile neben der (max-width-begrenzten) Stationsliste
       noch haette - zuverlaessiger als hoffen, dass beide Spalten die Zeile
       exakt ausfuellen. */
    margin-left: auto;
    margin-right: 40px;
    position: sticky;
    /* Sichtbar von 1/5 bis 1/2 der Viewporthoehe, wie das Hintergrundbild
       ueber .home-active-trip-bg an derselben oberen Marke (20vh). */
    top: 20vh;
    align-self: flex-start;
}
.home-active-trip-map-inner {
    height: 30vh;
    background: rgba(53,69,12,.92);
    border: 1px solid var(--home-card-border);
    /* rechts randlos (an der Kante der Sektion), sonst wie gehabt gerundet */
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(0,0,0,.4);
}

/* ---------- Search + Where am I ---------- */
.home-search-section {
    display: flex;
    gap: 0;
    padding: 10px 60px 60px 60px;
    /* align-items:stretch (Default) statt flex-start: .home-map-col braucht
       die volle Spaltenhoehe, sonst hat der sticky Wrapper darin (siehe
       .home-sidebar-sticky) kaum Platz zum "Mitwandern" und loest sich
       schon nach 50-80px Scrollstrecke wieder, statt die ganze Ergebnis-
       liste ueber fixiert zu bleiben. */
    flex-wrap: wrap;
}
.home-search-col { flex: 1 1 640px; padding-right: 36px; min-width: 0; }
.home-map-col { flex: 0 0 380px; }
.home-sidebar-sticky { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }

.home-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.home-chip {
    cursor: pointer;
    user-select: none;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--home-card-border);
    background: var(--home-card);
    color: var(--home-muted);
    font-family: Arial, sans-serif;
    font-size: 13px;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.home-chip.active { background: var(--home-green-mid); color: var(--home-bg); border-color: var(--home-green-soft); }

.home-input {
    background: var(--home-card);
    border: 1px solid var(--home-card-border);
    border-radius: 4px;
    padding: 10px 14px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: var(--home-gold);
    box-sizing: border-box;
}
.home-input::placeholder { color: #8a9a5a; }

/* ---------- Toolbar (Typ/Tags/Orte/Zeitraum-Suche) ---------- */
.home-toolbar { margin-bottom: 18px; }
.home-toolbar-row { --ctl-h: 40px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.home-toolbar-group { position: relative; }
/* Alle Bedienelemente der Zeile gleich hoch, Text mittig (flex statt Padding-Raten) */
.home-toolbar-btn, .home-toolbar-submit {
    height: var(--ctl-h); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    padding-top: 0; padding-bottom: 0; line-height: 1;
}
.home-toolbar-row .home-toolbar-search { height: var(--ctl-h); padding-top: 0; padding-bottom: 0; line-height: normal; }
.home-toolbar-btn {
    cursor: pointer;
    padding: 9px 14px;
    border-radius: 3px;
    border: 1px solid var(--home-card-border);
    background: var(--home-card);
    color: var(--home-muted);
    font-family: Arial, sans-serif;
    font-size: 13px;
    transition: border-color .2s ease;
}
.home-toolbar-btn.active { border-color: var(--home-green-soft); }
.home-toolbar-caret { font-size: 10px; }
.home-toolbar-panel {
    display: none;
    position: absolute;
    top: calc(var(--ctl-h, 40px) + 6px);
    left: 0;
    z-index: 20;
    min-width: 190px;
    background: var(--home-card);
    border: 1px solid var(--home-card-border);
    border-radius: 3px;
    padding: 10px;
    box-shadow: 0 14px 26px rgba(0,0,0,.5);
    box-sizing: border-box;
}
.home-toolbar-panel.open { display: flex; flex-direction: column; gap: 8px; }
.home-toolbar-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    color: var(--home-muted);
    font-family: Arial, sans-serif;
    font-size: 13px;
    cursor: pointer;
}
.home-toolbar-check input { accent-color: var(--home-green-mid); width: 15px; height: 15px; }
.home-date-presets { display: flex; flex-wrap: wrap; gap: 6px; max-width: 250px; }
.home-date-presets button {
    cursor: pointer; padding: 5px 10px; border-radius: 12px; border: 1px solid var(--home-card-border);
    background: rgba(0,0,0,.2); color: var(--home-muted); font: 12px Arial, sans-serif; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.home-date-presets button:hover { background: var(--home-card-hi); color: #fff; border-color: var(--home-green-soft); }
.home-date-presets .home-date-preset-clear { border-style: dashed; color: #8a9a5a; }
.home-toolbar-datelabel { display: flex; flex-direction: column; gap: 4px; color: var(--home-muted); font-size: 11px; }
.home-toolbar-datelabel .home-input { padding: 7px 10px; font-size: 12px; color-scheme: dark; }
.home-toolbar-suggestions { display: flex; gap: 6px; flex-wrap: wrap; max-height: 160px; overflow-y: auto; }
.home-toolbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border-radius: 3px;
    background: var(--home-accent);
    color: var(--home-bg);
    font-size: 11px;
}
.home-toolbar-chip button {
    cursor: pointer;
    border: none;
    background: rgba(13,20,0,.25);
    color: var(--home-bg);
    border-radius: 2px;
    width: 14px;
    height: 14px;
    font-size: 10px;
    line-height: 1;
}
.home-toolbar-suggestion {
    cursor: pointer;
    padding: 4px 9px;
    border-radius: 3px;
    border: 1px dashed var(--home-brown);
    background: transparent;
    color: #8a9a5a;
    font-size: 11px;
}
.home-toolbar-search { flex: 1 1 180px; min-width: 160px; }
.home-toolbar-submit {
    cursor: pointer;
    padding: 9px 20px;
    border-radius: 3px;
    border: 1px solid var(--home-green-soft);
    background: var(--home-green-mid);
    color: var(--home-bg);
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.home-toolbar-submit > span { position: relative; z-index: 1; }
/* Auto-Suche: heller Balken fuellt den Button waehrend der Wartezeit (rein visuell) */
.home-toolbar-submit::after {
    content: ''; position: absolute; inset: 0; background: rgba(255,236,170,.6);
    transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
.home-toolbar-submit.counting::after { animation: home-search-countdown var(--auto-delay, 1.6s) linear forwards; }
@keyframes home-search-countdown { to { transform: scaleX(1); } }
.home-toolbar-summary {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--home-card-border);
    color: #8a9a5a;
    font-family: Arial, sans-serif;
    font-size: 12px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
}
/* aktive Filter als Chips mit × zum Entfernen (home.js renderSummary) */
.home-sum-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.home-sum-title { color: #8a9a5a; }
.home-sum-item {
    display: inline-flex; align-items: center; padding: 3px 4px 3px 10px; border-radius: 13px;
    background: rgba(122,156,48,.22); border: 1px solid rgba(159,194,79,.38); color: #dfeab8; font-size: 12px; line-height: 1.2;
}
.home-sum-item:not(:has(.home-sum-x)) { padding-right: 10px; }
.home-sum-x {
    cursor: pointer; border: 0; background: none; color: #f0b24a; font: 16px/1 Arial, sans-serif;
    padding: 1px 6px 3px 7px; margin-left: 2px; border-radius: 11px; transition: background .2s ease, color .2s ease;
}
.home-sum-x:hover { background: rgba(237,130,8,.3); color: #fff; }

/* Mosaik statt gleichfoermigem Raster: feste Zeilenhoehe (grid-auto-rows),
   Breite je nach Bild-Seitenverhaeltnis per grid-column-Span, Anzahl pro
   Reihe dadurch automatisch (siehe home.js layoutMasonry(), aufgerufen ueber
   den window.onEntityResultsRendered-Hook nach EntityController.js). Alle
   3-5 Karten wird eine ueber die doppelte Zeilenhoehe gross gezogen. */
.home-results {
    display: grid;
    grid-auto-flow: dense;
    grid-auto-rows: 130px;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
}
.entity-element {
    cursor: pointer;
    border: 1px solid var(--home-card-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--home-card);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    align-items: flex-end;
    position: relative;
    /* main-style.css definiert .entity-element global mit fester
       height:220px + margin:3px (fuer Seiten ohne eigenes Grid) - hier
       explizit aufheben, sonst gewinnt die feste Hoehe gegen das Grid-
       Stretching und die Mosaik-Zeilen/Spans passen nicht mehr zusammen. */
    height: auto;
    margin: 0;
}
/* Hover-Effekt waechst (scale) statt nach oben zu rutschen: translateY schob die Kachel unter dem
   Mauszeiger weg, wenn dieser am unteren Rand (Titelleiste) stand - Folge: mouseleave/-enter-Flackern
   und die Detailbox rechts verschwand sofort wieder. Beim Vergroessern bleibt der Zeiger immer drin. */
.entity-element:hover { transform: scale(1.03); z-index: 5; box-shadow: 0 10px 24px rgba(0,0,0,.45); border-color: var(--home-accent); }
.entity-element { container-type: inline-size; }
/* Galerie-Kacheln: Vorschauleiste mit weiteren Bildern ueber der Titelleiste, bei schmalen Kacheln ausgeblendet */
.entity-element .entity-strip { position: absolute; left: 8px; right: 8px; bottom: 40px; z-index: 2; display: flex; gap: 4px; pointer-events: none; overflow: hidden; }
.entity-element .entity-strip img {
    position: static; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 3px; object-fit: cover;
    border: 1px solid rgba(244,230,192,.7); box-shadow: 0 2px 8px rgba(0,0,0,.55);
}
@container (min-width: 340px) { .entity-element .entity-strip img { width: 44px; height: 44px; } }
@container (max-width: 190px) { .entity-element .entity-strip { display: none; } }
.entity-element img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.entity-element a { position: relative; z-index: 1; display: block; width: 100%; padding: 30px 12px 10px 12px; background: linear-gradient(0deg, rgba(13,20,0,.9) 0%, rgba(13,20,0,0) 100%); }
.entity-element h4 {
    margin: 0;
    color: var(--home-gold);
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entity-element p { display: none; }
/* News: Textauszug. Ohne Bild (entity-news-text) steht er immer auf der Kachel, mit Bild
   (has-img) erst beim Hover als dunkle Schicht ueber dem Bild; die Titelleiste bleibt frei. */
.entity-element .entity-excerpt {
    display: block; position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 46px; margin: 0; padding: 14px 14px 0 14px; overflow: hidden;
    color: #e2d5ae; font: 12.5px/1.55 var(--home-display);
}
.entity-news-text { background: #2b3b0a; }
.entity-news-text > img { display: none; }
.entity-news-text .entity-excerpt { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.entity-news.has-img .entity-excerpt { background: rgba(13,20,0,.82); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.entity-news.has-img:hover .entity-excerpt { opacity: 1; }

.home-map-box {
    background: var(--home-card);
    border: 1px solid var(--home-card-border);
    border-radius: 8px;
    padding: 18px;
    box-sizing: border-box;
}
.home-map-box h3 { font-family: var(--home-display); color: var(--home-gold); font-size: 17px; margin: 0 0 10px 0; }
/* "Wo bin ich" aendern (nur Moderatoren) */
.home-where-edit { margin-left: 8px; background: none; border: 0; padding: 0; color: var(--home-muted); font: 12px Arial, sans-serif; letter-spacing: .06em; border-bottom: 1px dotted var(--home-muted); cursor: pointer; vertical-align: middle; }
.home-where-edit:hover { color: var(--home-accent); border-color: var(--home-accent); }
.home-where-editor { margin: 0 0 10px 0; }
.home-where-editor[hidden] { display: none; }
.home-where-input { width: 100%; box-sizing: border-box; padding: 8px 10px; background: rgba(0,0,0,.3); border: 1px solid var(--home-card-border); border-radius: 4px; color: #f4e6c0; font: 14px Arial, sans-serif; }
.home-where-results { list-style: none; margin: 4px 0 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.home-where-results li { padding: 7px 10px; color: var(--home-muted); font: 13px Arial, sans-serif; cursor: pointer; border-bottom: 1px solid var(--home-card-border); }
.home-where-results li:hover { background: var(--home-card); color: #f4e6c0; }
.home-where-msg { color: var(--home-muted); font: 12px Arial, sans-serif; margin-top: 4px; }
.home-map-detail { margin-top: 14px; font-family: Arial, sans-serif; font-size: 13px; color: var(--home-muted); line-height: 1.5; }

/* ---------- Hover-Detail (rechte Sidebar, siehe EntityController.js
   displaySingleEntityDetail()) ---------- */
.home-hover-detail {
    background: var(--home-card);
    border: 1px solid var(--home-card-border);
    border-radius: 8px;
    padding: 18px;
    box-sizing: border-box;
}
/* Zweispaltig: die Box schwebt unter der "Wo bin ich"-Karte, ohne Platz im Layout zu belegen. Sonst wuerde sie beim
   Einblenden die Seite verlaengern/verschieben, der Zeiger laege nicht mehr auf dem Treffer, die Box verschwaende
   und das Ganze finge von vorn an (Flackern). Hoehe/Scrollen passt home.js initHoverDetail an das Fenster an. */
@media (min-width: 1101px) {
    /* z-index am Sticky-Wrapper (eigener Stapelkontext), damit die Box auch ueber der Fusszeilen-Landschaft liegt */
    .home-sidebar-sticky { z-index: 6; }
    .home-sidebar-sticky .home-hover-detail { position: absolute; left: 0; right: 0; top: calc(100% + 16px); z-index: 6; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
}
.home-hover-detail-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.home-hover-detail-icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--home-accent); }
.home-hover-detail-icon svg { width: 100%; height: 100%; display: block; }
.home-hover-detail-header h3 {
    margin: 0; color: var(--home-gold); font-family: var(--home-display);
    font-size: 17px; font-weight: normal; line-height: 1.3; overflow-wrap: anywhere;
}
/* Karte wie bei "Wo bin ich"; ohne Ort mit Koordinaten ausgeblendet (has-map setzt home.js) */
.home-hover-detail:not(.has-map) .home-hover-detail-map { display: none; }
.home-hover-detail-map { margin-bottom: 12px; }
/* Orte und Tags als Chips mit kleiner Ueberschrift - bewusst auffaelliger als der Fliesstext */
.home-hover-detail .locs, .home-hover-detail .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.home-hover-detail .locs:empty, .home-hover-detail .tags:empty { display: none; }
.home-hover-detail .locs::before, .home-hover-detail .tags::before {
    flex: 0 0 100%; color: var(--home-muted); font: 10px Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: .8;
}
.home-hover-detail .locs::before { content: 'Places'; }
.home-hover-detail .tags::before { content: 'Tags'; }
.hd-chip { display: inline-block; padding: 4px 11px; border-radius: 14px; font: 13px Arial, sans-serif; text-decoration: none; line-height: 1.35; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.hd-chip-ort { color: var(--home-gold); border: 1px solid rgba(255,199,82,.55); background: rgba(255,199,82,.08); }
.hd-chip-ort::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--home-accent); }
.hd-chip-tag { color: #dfeab8; border: 1px solid rgba(159,194,79,.45); background: rgba(122,156,48,.28); }
.hd-chip-tag::before { content: '#'; margin-right: 2px; opacity: .7; }
.hd-chip:hover { background: var(--home-card-hi); color: #fff; border-color: var(--home-accent); }
/* Kleines Plus oben rechts am Chip: Ort/Tag zu den vorhandenen Suchkriterien hinzufuegen (statt sie zu ersetzen) */
.hd-chip[data-flow-kind] { position: relative; }
.hd-chip-plus { position: absolute; top: -7px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--home-gold); color: #2B3A00; font: 700 13px/16px Arial, sans-serif; text-align: center; opacity: .75; transform: scale(.9); transition: opacity .2s ease, transform .2s ease, background .2s ease; }
.hd-chip:hover .hd-chip-plus { opacity: 1; }
.hd-chip-plus:hover { background: var(--home-accent); color: #fff; transform: scale(1.2); }
/* Hinweis oben nach einer Weiterleitung auf die Startseite (?notice=..., home.js initNotice) */
.home-notice { position: fixed; z-index: 2400; top: 16px; left: 50%; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 10px 14px 10px 20px; border: 1px solid rgba(255,199,82,.55); border-radius: 30px; background: rgba(34,49,8,.96); box-shadow: 0 8px 26px rgba(0,0,0,.45); color: #f3ecd2; font: 14px Arial, sans-serif; opacity: 0; transform: translate(-50%, -16px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.home-notice.visible { opacity: 1; transform: translate(-50%, 0); }
.home-notice-close { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--home-gold); font-size: 18px; line-height: 1; cursor: pointer; }
.home-notice-close:hover { background: rgba(255,199,82,.18); }
@media (prefers-reduced-motion: reduce) { .home-notice { transition: opacity .2s ease; transform: translate(-50%, 0); } }
/* Hinweis unter der Trefferliste, solange weitere Seiten nachgeladen werden koennen (EntityController.watchMore) */
.home-results-more { display: none; align-items: center; justify-content: center; gap: 14px; margin: 22px auto 6px; padding: 8px 22px 8px 12px; border: 0; border-radius: 40px; background: transparent; font: 13px Arial, sans-serif; color: var(--home-muted); cursor: default; transition: background .25s ease, opacity .3s ease; }
.home-results-more.active { display: flex; opacity: .55; }
.home-results-more .more-ring { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,199,82,.5); }
.home-results-more .more-ring::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -7px 0 0 -4.5px; border-right: 2px solid var(--home-gold); border-bottom: 2px solid var(--home-gold); transform: rotate(45deg); opacity: 0; transition: opacity .25s ease; }
.home-results-more .more-text { display: flex; flex-direction: column; text-align: left; line-height: 1.3; }
.home-results-more .more-count { font: 600 15px var(--home-display); color: var(--home-gold); }
.home-results-more .more-label { font-size: 12px; opacity: .85; }
/* Laufendes Nachladen: Ring dreht sich (auch beim automatischen Nachladen) */
.home-results-more.loading { opacity: 1; }
.home-results-more.loading .more-ring { border-color: rgba(255,199,82,.25); border-top-color: var(--home-gold); animation: home-more-spin .9s linear infinite; }
.home-results-more.loading .more-ring::after { opacity: 0; }
@keyframes home-more-spin { to { transform: rotate(360deg); } }
/* Nach den automatisch geladenen Seiten: auffaelliger Symbol-Button, ein Klick laedt die naechste Seite */
.home-results-more.manual { opacity: 1; cursor: pointer; background: rgba(53,69,12,.55); }
.home-results-more.manual .more-ring { background: rgba(255,199,82,.08); }
.home-results-more.manual .more-ring::after { opacity: 1; }
.home-results-more.manual:hover, .home-results-more.manual:focus-visible { background: var(--home-card-hi); outline: none; }
.home-results-more.manual:hover .more-ring { border-color: var(--home-gold); }
.home-results-more.manual:hover .more-ring::after { animation: home-more-nudge 1s ease-in-out infinite; }
.home-results-more.loading.manual { cursor: progress; }
@keyframes home-more-nudge { 50% { transform: translateY(3px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .home-results-more.loading .more-ring { animation-duration: 2.4s; } .home-results-more.manual:hover .more-ring::after { animation: none; } }
/* Chip, der beim Uebergang Overlay -> Suche ueber die Seite fliegt (home.js flowToSearch); deckend, damit er ueber Inhalten lesbar bleibt */
.home-fly-chip { position: fixed; z-index: 2300; margin: 0; pointer-events: none; white-space: nowrap; will-change: transform; background-color: #223108; }
.home-fly-chip.hd-chip-ort { background-image: linear-gradient(rgba(255,199,82,.12), rgba(255,199,82,.12)); }
.home-fly-chip.hd-chip-tag { background-image: linear-gradient(rgba(122,156,48,.35), rgba(122,156,48,.35)); }
/* Treffer schieben sich nacheinander herein (Klasse nur kurz nach dem Uebergang gesetzt; 'translate' statt 'transform', damit der Hover-Zoom bleibt) */
.home-results .entity-element.home-reveal { animation: home-reveal-in .56s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--reveal-delay, 0ms); }
@keyframes home-reveal-in { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .home-results .entity-element.home-reveal { animation: none; } }
.home-hover-detail .content {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--home-card-border);
    font-family: Arial, sans-serif; font-size: 13px; color: #d9c590; line-height: 1.6;
    white-space: pre-wrap; max-height: 220px; overflow-y: auto;
}
.home-hover-detail .content:empty { display: none; }
/* Nur sichtbar, solange ein Ergebnis oder die Box gehovert wird (home.js initHoverDetail) */
.home-hover-detail:not(.has-content) { display: none; }
/* ---------- Lightbox / Overlay (click on a search result) ---------- */
.home-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(6,10,0,.88);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-lightbox-close {
    position: absolute;
    top: 24px;
    right: 34px;
    color: var(--home-muted);
    font-size: 30px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    line-height: 1;
}
.home-lightbox-close:hover { color: var(--home-accent); }
.home-lightbox-panel {
    background: var(--home-card);
    border: 1px solid var(--home-card-border);
    border-radius: 8px;
    padding: 28px;
    box-sizing: border-box;
    max-width: 640px;
    width: 90vw;
    max-height: 82vh;
    overflow-y: auto;
}
.home-lightbox-panel h3 { color: var(--home-gold); margin: 0 0 12px 0; }
.home-lightbox-panel .content { color: var(--home-muted); font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6; }
.home-lightbox-gallery { width: 88vw; max-width: 1200px; max-height: 86vh; overflow-y: auto; background: var(--home-card); border: 1px solid var(--home-card-border); border-radius: 6px; padding: 24px; box-sizing: border-box; }

/* Mosaik statt gleichfoermigem Raster: feste Zeilenhoehe (grid-auto-rows),
   Breite je nach Bild-Seitenverhaeltnis per grid-column-Span (siehe
   home.js layoutMasonry()), Anzahl pro Reihe dadurch automatisch. .featured
   bekommt einen doppelten Zeilen-Span (alle 3-5 Kacheln). */
.home-masonry { display: grid; grid-auto-flow: dense; grid-auto-rows: 90px; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.home-masonry-item { overflow: hidden; border-radius: 4px; cursor: pointer; position: relative; }
.home-masonry-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.home-masonry-item:hover img { transform: scale(1.05); }

/* ---------- Vollbild-Viewer (Bild des Tages/Zufallsbild/Galerie-Bild) ---------- */
.home-fullscreen { position: relative; width: 92vw; height: 88vh; max-width: 1400px; display: flex; align-items: center; justify-content: center; }
.home-fullscreen-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.home-fullscreen-close, .home-fullscreen-info-btn {
    position: absolute; right: 0; border: none; border-radius: 50%;
    background: rgba(0,0,0,.5); color: var(--home-gold); cursor: pointer;
}
.home-fullscreen-close { top: 0; width: 40px; height: 40px; font-size: 22px; line-height: 1; }
.home-fullscreen-close:hover { color: var(--home-accent); }
.home-fullscreen-info-btn { top: 50px; width: 32px; height: 32px; font-style: italic; font-family: var(--home-display); cursor: default; }
.home-fullscreen-info-panel {
    position: absolute; top: 90px; right: 0; max-width: 260px;
    background: rgba(13,20,0,.92); border: 1px solid var(--home-card-border); border-radius: 6px;
    padding: 12px 14px; color: var(--home-muted); font-size: 13px; line-height: 1.5;
    opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
}
.home-fullscreen-info-btn:hover + .home-fullscreen-info-panel,
.home-fullscreen-info-panel:hover { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- Footer ---------- */
/* Loest die alte, ueberall fixe #rick_boden-Graskante nur auf der
   Startseite ab (siehe unten body[data-id="1"] #rick_boden), andere Seiten
   behalten sie unveraendert. */
.home-footer {
    position: relative;
    height: 270px;
    overflow: hidden;
    background: var(--home-bg);
}
/* Landschaft (Huegel, Tannen, Feuerwachturm): js/home_scenery.js */
.home-footer-sil { display: block; width: 100%; height: 270px; }
/* Wegweiser Profil/Impressum links unten, Fenster des Turms leuchtet beim Hover */
.home-footer-sign { cursor: pointer; }
.home-footer-sign path { fill: #4b3920; stroke: #8a6a3b; stroke-width: .8; transition: fill .2s ease; }
.home-footer-sign text { fill: var(--home-gold); font: 11px var(--home-display); letter-spacing: .03em; }
.home-footer-sign:hover path { fill: #6e5128; }
.home-footer-win { fill: #ffc752; opacity: .78; transition: opacity .3s ease, fill .3s ease; }
.home-footer:has(.home-footer-sign:hover) .home-footer-win { fill: #ffe6a0; opacity: 1; }
/* (c) liegt im Huegel unten rechts */
/* Impressum ohne JavaScript (<noscript>, impressum.inc.php): ausgeblendete Stoerzeichen zwischen den Buchstaben */
.ob-x { display: none; }
.home-noscript-impressum { max-width: 640px; margin: 0 auto; padding: 40px 24px; color: #e9dfc0; font: 15px/1.6 Arial, sans-serif; }
.home-noscript-impressum h2 { color: var(--home-gold); font-family: var(--home-display); font-weight: 600; }
.home-noscript-impressum h3 { color: var(--home-gold); font-size: 16px; margin-top: 22px; }
.home-footer-copy a { color: var(--home-gold); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,199,82,.6); padding-bottom: 1px; }
.home-footer-copy a:hover { color: #fff; border-color: #fff; }
.home-footer-copy { position: absolute; right: 28px; bottom: 14px; color: #e9dfc0; font-size: 14px; }

/* Zugeklappte Suche: dezentes Hoehenlinien-Symbol in der sonst leeren Flaeche (home_scenery.js) */
.home-search-symbol { display: none; }
.home-search-collapsible.collapsed .home-search-symbol { display: block; height: 240px; position: relative; pointer-events: none; }
.home-search-symbol svg { position: absolute; left: 14%; top: 0; width: min(58%, 380px); height: auto; opacity: .2; }

/* #rick_platzhalter ist ein generischer 30px+55px-Abstandshalter, den jede
   Seite unterhalb des Inhalts bekommt (main.css), gedacht als Platz ueber
   der fixen #rick_boden-Kante. Ohne #rick_boden erzeugt er auf der
   Startseite nur eine haessliche schwarze Luecke unter dem neuen Footer. */
body[data-id="1"] #rick_boden,
body[data-id="1"] #rick_platzhalter { display: none; }

/* ---------- Statische Seiten (Impressum/Profil) in der Lightbox ---------- */
.home-static-page { width: min(640px, 86vw); max-height: 82vh; overflow-y: auto; background: var(--home-card); border: 1px solid var(--home-card-border); border-radius: 6px; padding: 30px 34px; box-sizing: border-box; color: var(--home-muted); font-family: Arial, sans-serif; font-size: 14px; line-height: 1.7; }
.home-static-page h2 { color: var(--home-gold); font-family: var(--home-display); font-size: 24px; margin: 0 0 6px 0; font-weight: normal; }
.home-static-page h3 { color: var(--home-gold); font-family: var(--home-display); font-size: 17px; margin: 22px 0 8px 0; font-weight: normal; }
.home-static-lead { color: var(--home-muted); opacity: .8; margin-top: 0; }
.home-static-note { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--home-card-border); font-size: 12.5px; opacity: .75; }

/* Profil (Overlay): zweispaltig - links Foto + "Bald mehr", rechts Text, Interessen, Reisen */
.home-static-page.home-profil { width: min(920px, 92vw); padding: 0; display: grid; grid-template-columns: 300px 1fr; font-size: 14px; }
.home-profil-side { background: rgba(0,0,0,.2); border-right: 1px solid var(--home-card-border); padding-bottom: 22px; }
.home-profil-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
/* Ausschnitt: Person links der Mitte, Hand oben - object-position statt Mitte, sonst wird die Hand abgeschnitten */
.home-profil-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 22% 38%; }
.home-profil-photo-tag { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 12px; background: rgba(13,20,0,.7); color: #f3e3b3; font-size: 12px; }
.home-profil-soon { padding: 18px 20px 0; }
.home-profil-soon h3 { font-size: 15px; margin: 0 0 8px 0; }
.home-profil-soon p { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px 0; font-size: 13px; line-height: 1.5; }
.home-profil-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--home-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.home-profil-main { padding: 34px 38px; min-width: 0; }
.home-profil-main p { margin: 0 0 12px 0; }
.home-profil-eyebrow { font: 600 11px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--home-green-soft); }
.home-static-page.home-profil h2 { font-family: var(--home-display); font-weight: 600; font-size: 32px; line-height: 1.12; margin: 6px 0 14px 0; }
.home-profil-intro { font: 400 18px/1.55 var(--home-display); color: #f1e6c4; }
.home-profil-interest { display: grid; gap: 10px; margin: 20px 0 8px 0; }
.home-profil-interest > div { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; background: rgba(0,0,0,.18); border-left: 3px solid var(--home-green-mid); border-radius: 0 6px 6px 0; font-size: 13.5px; line-height: 1.55; }
.home-profil-interest b { display: block; color: var(--home-gold); font: 600 14px var(--home-display); }
@media (max-width: 760px) {
    .home-static-page.home-profil { grid-template-columns: 1fr; }
    .home-profil-side { border-right: 0; border-bottom: 1px solid var(--home-card-border); }
    .home-profil-photo { aspect-ratio: 4 / 3; }
    .home-profil-photo img { object-position: 50% 34%; }
    .home-profil-main { padding: 24px 22px; }
}
.home-profil-trips { list-style: none; margin: 0; padding: 0; }
.home-profil-trips li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--home-card-border); }
.home-profil-trips a { color: var(--home-gold); text-decoration: none; }
.home-profil-trips a:hover { text-decoration: underline; }
.home-profil-trips span { color: var(--home-muted); opacity: .75; font-size: 12.5px; white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .home-hero-intro { left: 460px; right: 4%; }
    .home-hero-text { font-size: 16px; }
    .home-map-col { flex: 1 1 100%; }
    .home-sidebar-sticky { position: static; }
}

@media (max-width: 766px) {
    .home-nav { padding: 10px 16px; gap: 16px; }
    .home-first-screen { min-height: 0; }
    .home-hero { min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; }
    .home-logo { width: 160px; height: 80px; top: 12px; left: 12px; }
    .home-highlights { position: static; transform: none; width: 100%; height: auto; display: flex; gap: 10px; padding: 12px; box-sizing: border-box; order: 2; z-index: 4; }
    .home-hero-intro { position: relative; left: auto; right: auto; top: auto; transform: none; max-width: none; padding: 90px 20px 8px 20px; order: 1; }
    .home-hero-title { font-size: 30px; }
    .home-scroll-hint { display: none; }
    .home-highlight-card { position: static !important; flex: 1; transform: none !important; padding: 8px; }
    .home-highlight-card .thumb { height: 80px; }
    .home-highlight-card:hover { transform: none !important; }
    .home-highlight-card .title { font-size: 12px; }
    .home-highlight-card .sub { display: none; }

    .home-section-title { padding: 24px 16px 6px 16px; }
    .home-routes { padding: 10px 12px 30px 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
    .home-route { flex: 0 0 240px; height: 170px; scroll-snap-align: start; }
    .home-route:hover { flex: 0 0 240px; }
    .home-route .rimg { width: 100%; }

    .home-search-section { padding: 10px 16px 40px 16px; }
    .home-search-col { padding-right: 0; flex: 1 1 100%; }
    .home-map-col { flex: 1 1 100%; order: -1; }
    .home-map-box { margin-bottom: 22px; }

    .home-input, .home-chip { min-height: 46px; box-sizing: border-box; display: flex; align-items: center; }
    .home-chip { padding: 12px 18px; font-size: 14px; }
    .home-results { grid-template-columns: repeat(2, minmax(0,1fr)); }

    .home-toolbar-row { --ctl-h: 46px; }
    .home-toolbar-btn, .home-toolbar-submit { padding: 0 16px; font-size: 14px; box-sizing: border-box; }
    .home-toolbar-search { box-sizing: border-box; flex: 1 1 100%; }
    .home-toolbar-panel { left: 0; right: 0; min-width: 0; width: 100%; }
    .home-toolbar-check { min-height: 44px; font-size: 14px; }

    .home-footer-copy { right: 16px; }
}

/* ---------- Aktuelle Reise auf schmalen Bildschirmen (Handy, Tablet hochkant) ----------
   Zweispaltig (Stationen 460px + Karte 360px + Rand 60px) passt hier nicht: die Karte rutschte rechts aus dem
   Bild. Einspaltig: die Karte klebt oben am Bildschirmrand (sticky) und zeigt weiter die aktive Station, die
   Stationen laufen darunter durch. */
@media (max-width: 900px) {
    .home-active-trip { margin: 10px 0 30px 0; }
    .home-active-trip-header { padding: 14px 16px 16px 16px; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; }
    .home-active-trip-name { font-size: 30px; }
    .home-trip-links { justify-content: flex-start; }

    .home-active-trip-bg-img { width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
    .home-active-trip-bg-fade { background: rgba(13,20,0,.6); }

    .home-active-trip-columns { flex-direction: column; align-items: stretch; padding: 0 0 30px 0; }
    .home-active-trip-map { order: -1; flex: none; width: 100%; margin: 0 0 22px 0; top: 0; z-index: 4; }
    .home-active-trip-map-inner { height: 34vh; min-height: 190px; max-height: 320px; border-radius: 0 0 6px 6px; border-width: 0 0 1px 0; }

    .home-active-trip-stops-wrap { flex: none; width: 100%; max-width: none; padding-right: 16px; clip-path: inset(0 0 0 -40px); box-sizing: border-box; }
    .home-trip-stop { padding-left: 56px; }
    .home-trip-stop-name { font-size: min(var(--name-size, 32px), 28px); }
    .home-trip-stop-thumbs { max-width: 100%; }
}

/* Erklaerung unter der Ueberschrift "Alles durchsuchen" (auch eingeklappt sichtbar) */
.home-section-intro { margin: 6px 0 0 0; max-width: 520px; color: var(--home-muted); font: 14px/1.5 var(--home-body); opacity: .9; }

/* Nur fuer Screenreader/Suchmaschinen sichtbar (z.B. die h1 der Startseite) */
.home-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Kopfzeile von "Alles durchsuchen": Text darf umbrechen, der Auf-/Zuklappen-Knopf bleibt im Bild (auch auf dem Handy) */
.home-search-collapsible .home-section-title { align-items: flex-start !important; }
.home-search-collapsible .home-section-title > div { flex: 1 1 0; min-width: 0; }
.home-search-collapsible .home-collapsible-toggle { flex: none; }