/* ============================================================
   FernWeh — Fach-Styles (Reisen, Steps, Karte, Feed).
   Basis-Layout, Shell, Konten, Gruppen, Chat und Mitteilungen
   kommen aus dem WDT30.AppKit (_content/WDT30.AppKit/appkit.css).
   Markenfarben: Tiefsee-Petrol als Primärfarbe, Routen-Orange als
   Akzent („Weh“ in der Wortmarke, Linien auf der Karte).
   ============================================================ */

:root {
    /* Kit- und WDT-Variablen überschreiben */
    --kendo-color-primary: #1C6E77;
    --kendo-color-primary-hover: #175E66;
    --kendo-color-primary-active: #124E55;
    --kendo-color-primary-emphasis: #0C3A40;
    --kendo-color-primary-subtle: rgba(28, 110, 119, 0.10);
    --kendo-color-primary-subtle-hover: rgba(28, 110, 119, 0.18);
    --kendo-color-primary-subtle-active: rgba(28, 110, 119, 0.26);
    --kendo-color-primary-on-subtle: #0C3A40;
    --kendo-color-primary-on-surface: #124E55;
    --kendo-color-primary-rgb: 28, 110, 119;
    --kendo-color-on-primary: #ffffff;
    --kendo-color-primary-darker: #124E55;

    --wdt-color-primary: #1C6E77;
    --wdt-color-on-primary: #ffffff;
    --wdt-color-secondary: #4E6069;

    --webet-green: #1C6E77;
    --webet-green-soft: #DCEDEE;
    --webet-gold: #DE6A2B;
    --webet-gold-soft: #FBE7DA;
    --webet-bg: #F3F6F5;
    --webet-surface: #FFFFFF;
    --webet-ink: #17262E;
    --webet-muted: #4E6069;
    --webet-icon: #8A9AA1;
    --webet-line: #D5DEDD;

    /* FernWeh-eigene Töne (Design-System, Claude-Design-Handoff) */
    --fw-petrol: #1C6E77;
    --fw-petrol-hover: #23808A;
    --fw-route: #DE6A2B;
    --fw-route-soft: #FBE7DA;
    --fw-sun: #F5B889;
    --fw-mint: #7FD1C3;
    --fw-sea: #0B1F26;
    --fw-sea-2: #12303A;
    --fw-glow: #2A7F88;
    --fw-paper: #F3F6F5;
    --fw-ondark: #C9D3D6;
    --fw-font-display: "Bricolage Grotesque", "Inter", "Segoe UI", system-ui, sans-serif;
    --fw-shadow-card: 0 1px 2px rgba(23, 38, 46, 0.06), 0 12px 28px rgba(23, 38, 46, 0.08);
    --fw-shadow-petrol: 0 8px 20px rgba(28, 110, 119, 0.35);

    --webet-topbar-h: 56px;
}

/* Titelschrift überall, wo etwas Überschrift oder Kennzahl ist */
.webet-pagetitle,
.webet-sectiontitle,
.webet-authlogo,
.fw-step-title,
.fw-triptitle,
.fw-feeditem-body h3,
.fw-stat strong,
.fw-currenttrip-text strong {
    font-family: var(--fw-font-display);
    letter-spacing: -0.02em;
}

/* Wortmarke groß auf Login/Registrieren: „Weh“ in Routen-Orange */
.webet-authlogo span {
    color: var(--fw-route);
}

/* ---------- Shell: dunkle Kopfzeile, Notebook-Navigation ---------- */

.fw-topbar {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    height: var(--webet-topbar-h);
    padding: 0 20px;
    padding-top: env(safe-area-inset-top);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--fw-sea);
    color: #fff;
}

.fw-brand {
    font-family: var(--fw-font-display);
    font-weight: 800;
    font-size: 23px;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
    flex: 0 0 auto;
}

.fw-brand span { color: var(--fw-sun); }

.fw-topnav {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
}

.fw-topnav a {
    color: var(--fw-ondark);
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: color 0.12s ease, background 0.12s ease;
}

.fw-topnav a:hover { color: #fff; }
.fw-topnav a.active { color: #fff; background: rgba(255, 255, 255, 0.12); }

.fw-topnav .fw-topnav-cta {
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--fw-petrol);
    color: #fff;
    padding: 9px 16px;
    border-radius: 999px;
    box-shadow: var(--fw-shadow-petrol);
}

.fw-topnav .fw-topnav-cta:hover { background: var(--fw-petrol-hover); }

.fw-topbar-bell {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--fw-ondark);
    text-decoration: none;
    font-size: 18px;
    flex: 0 0 auto;
}

@media (min-width: 760px) {
    .fw-topbar { padding: 0 28px; }
    .fw-topnav { display: flex; }
    .fw-shell .webet-bottomnav { display: none; }
}

/* ---------- Startseite: Globus-Bühne + Inhalt ---------- */

.webet-main-inner:has(.fw-start) {
    max-width: none;
    padding: 0;
}

.fw-start {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: var(--fw-paper);
    min-height: 100%;
}

.fw-stage {
    flex: 1 1 100%;
    background: radial-gradient(90% 70% at 50% 110%, var(--fw-petrol) 0%, var(--fw-sea-2) 45%, var(--fw-sea) 100%);
    color: #fff;
    padding: 28px 28px 0;
    display: flex;
    flex-direction: column;
    /* Handy: eine Bildschirmhöhe abzüglich Kopfzeile und Tab-Leiste, damit die Kennzahlen sichtbar bleiben */
    height: calc(100dvh - var(--webet-topbar-h) - var(--webet-bottomnav-h));
    min-height: 420px;
    overflow: hidden;
}

.fw-stage-hello {
    margin: 0;
    font-size: 13px;
    color: var(--fw-ondark);
}

.fw-stage h1 {
    margin: 4px 0 0;
    font-family: var(--fw-font-display);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
}

.fw-globe-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 12px auto 0;
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fw-globe {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.fw-globe:active { cursor: grabbing; }
.fw-globe canvas { display: block; }

.fw-stage-stats {
    flex: 0 0 auto;
    padding-bottom: 20px;
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.fw-stage-stats span {
    font-size: 12px;
    color: var(--fw-ondark);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 6px 12px;
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.fw-stage-stats b {
    color: #fff;
    font-family: var(--fw-font-display);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fw-start-main {
    flex: 1 1 360px;
    min-width: 0;
    padding: 24px 20px 110px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.fw-start-main > * {
    width: 100%;
    max-width: 760px;
}

@media (min-width: 760px) {
    .fw-stage {
        flex: 0 0 42%;
        min-width: 340px;
        align-self: flex-start;
        position: sticky;
        top: 0;
        height: calc(100dvh - var(--webet-topbar-h));
    }

    .fw-start-main { padding: 24px 28px 110px; }
}

@media (orientation: landscape) and (max-height: 500px) {
    /* Handy quer: Bühne links, Inhalt rechts — wie Notebook, nur knapper */
    .fw-stage { flex: 0 0 46%; min-width: 300px; padding: 14px 20px 0; height: calc(100dvh - var(--webet-topbar-h) - var(--webet-bottomnav-h)); min-height: 0; position: sticky; top: 0; align-self: flex-start; }
    .fw-stage h1 { font-size: 22px; }
    .fw-stage-stats { padding-bottom: 10px; }
}

.fw-eyebrow {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fw-route);
}

.fw-feedhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 6px;
}

.fw-feedhead h2 {
    margin: 0;
    font-family: var(--fw-font-display);
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -0.02em;
}

.fw-feedhead a {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Breite Bildschirme (PC, Tablet quer) ----------
   Die Kit-Shell ist handy-schmal (560px). Reise- und Kartenseiten
   markieren sich mit .fw-wide/.fw-medium und bekommen auf breiten
   Bildschirmen mehr Raum — Login, Gruppen und Chat bleiben schmal. */

@media (min-width: 700px) {
    .webet-main-inner:has(.fw-wide) { max-width: 1200px; }
    .webet-main-inner:has(.fw-medium) { max-width: 820px; }

    /* Aktionsleisten nicht auf Bildschirmbreite aufblasen */
    .fw-wide .webet-btn-block {
        max-width: 560px;
    }
}

.fw-center {
    text-align: center;
    font-size: 14px;
}

/* ---------- Seitenkopf, Zurück-Navigation ---------- */

.fw-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.fw-pagehead .webet-pagetitle { margin-bottom: 0; }

.fw-backrow {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fw-backrow .webet-pagetitle {
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-backbtn {
    font: inherit;
    font-size: 16px;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 1px solid var(--webet-line);
    border-radius: 10px;
    background: var(--webet-surface);
    color: var(--webet-ink);
    cursor: pointer;
}

.fw-backbtn:active { background: var(--webet-green-soft); }

.fw-trip-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

/* ---------- Reisekarten (Liste, Start) ---------- */

.fw-tripgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.fw-tripcard {
    font: inherit;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: var(--webet-surface);
    box-shadow: var(--webet-card-shadow);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    color: var(--webet-ink);
    width: 100%;
}

.fw-tripcard.wide { margin-bottom: 12px; }

.fw-tripcover {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 16 / 9;
    padding: 14px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(222, 106, 43, 0.35), transparent 55%),
        linear-gradient(160deg, #1C6E77 0%, #0C3A40 100%);
    color: #fff;
}

.fw-tripcard.wide .fw-tripcover { aspect-ratio: 21 / 9; }

.fw-tripcover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Titelbild: Text bleibt lesbar durch einen Verlauf von unten */
.fw-tripcover.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.6) 100%);
}

.fw-tripcover > .fw-triptitle { position: relative; z-index: 1; }
.fw-tripcover > .fw-tripbadge,
.fw-tripcover > .fw-triplock { z-index: 1; }

.fw-triptitle {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.fw-tripbadge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.fw-tripbadge.live { background: var(--fw-route); }

.fw-tripbadge.inline {
    position: static;
    margin-left: 8px;
    vertical-align: middle;
}

.fw-triplock {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 13px;
    opacity: 0.85;
}

.fw-tripmeta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px 12px;
    font-size: 14px;
}

.fw-tripmeta .webet-muted { font-size: 13px; }

/* ---------- Formulare (Reise, Step) ---------- */

.fw-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 8px;
}

.fw-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fw-field > label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--webet-muted);
}

.fw-input,
.fw-textarea {
    font: inherit;
    font-size: 16px; /* verhindert Auto-Zoom auf iOS */
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--webet-line);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--webet-surface);
    color: var(--webet-ink);
}

.fw-textarea {
    resize: vertical;
    line-height: 1.45;
}

.fw-input:focus,
.fw-textarea:focus {
    outline: 2px solid var(--webet-green);
    outline-offset: -1px;
}

.fw-row2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.fw-row2 .wdt-button { width: 100%; }

.fw-fieldhint {
    margin: 0;
    font-size: 13px;
    color: var(--webet-muted);
}

.fw-fieldhint.ok { color: #2E7D4F; }
.fw-fieldhint.warn { color: var(--fw-route); }

.fw-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--webet-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--webet-surface);
}

.fw-seg-item {
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--webet-muted);
    cursor: pointer;
}

.fw-seg-item + .fw-seg-item { border-left: 1px solid var(--webet-line); }

.fw-seg-item.on {
    background: var(--webet-green);
    color: #fff;
}

/* Ortswahl im Step-Editor */

.fw-place {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px dashed var(--webet-line);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14.5px;
    min-height: 44px;
    justify-content: center;
}

.fw-place.ok {
    border-style: solid;
    border-color: var(--webet-green);
    background: var(--webet-green-soft);
}

.fw-place-name { font-weight: 600; }
.fw-place .webet-muted { font-size: 12.5px; }

.fw-searchrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.fw-hits {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--webet-line);
    border-radius: 10px;
    background: var(--webet-surface);
    overflow: hidden;
}

.fw-hit {
    font: inherit;
    font-size: 14.5px;
    text-align: left;
    padding: 11px 12px;
    border: none;
    border-bottom: 1px solid var(--webet-line);
    background: transparent;
    color: var(--webet-ink);
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.fw-hit:last-child { border-bottom: none; }
.fw-hit i { color: var(--fw-route); }
.fw-hit:active { background: var(--webet-green-soft); }

.fw-editor-map {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--webet-card-shadow);
}

/* Aktionsleiste: klebt unten, Inhalt scrollt darüber — nichts hüpft */

.fw-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 1001; /* über den Leaflet-Ebenen (Panes 400, Controls 1000) */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0 6px;
    margin-top: auto;
    background: var(--webet-bg);
    border-top: 1px solid var(--webet-line);
}

.fw-actionbar .wdt-button { width: 100%; }

.fw-dangerzone {
    margin: 8px 0 16px;
    padding: 12px 0 0;
    border-top: 1px dashed var(--webet-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.fw-dangerzone p { margin: 0; }

/* ---------- Fotos: Upload und Raster im Editor ---------- */

.fw-upload { display: flex; flex-direction: column; gap: 8px; }

.fw-upload-feld {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.fw-upload-row {
    display: flex;
    gap: 10px;
}

.fw-upload-knopf {
    flex: 1 1 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--webet-line);
    background: var(--webet-surface);
    color: var(--webet-ink);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.fw-upload-knopf.primary {
    background: var(--webet-green);
    border-color: var(--webet-green);
    color: #fff;
}

.fw-upload-knopf:active { filter: brightness(0.94); }

.fw-upload-lauf {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--webet-surface);
    border: 1px solid var(--webet-line);
    border-radius: 10px;
    padding: 10px 12px;
}

.fw-upload-zeile {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    min-height: 20px;
}

.fw-upload-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--webet-green-soft);
    overflow: hidden;
}

.fw-progress span {
    display: block;
    height: 100%;
    background: var(--webet-green);
    transition: width 0.15s linear;
}

.fw-upload-meldungen {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
}

.fw-upload-meldungen .ok { color: #2E7D4F; }
.fw-upload-meldungen .warn { color: var(--fw-route); }

.fw-thumbgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
}

.fw-thumbcell {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--webet-green-soft);
    background-size: cover;
    background-position: center;
}

.fw-thumbcell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fw-thumbcell.pending {
    display: grid;
    place-items: center;
    border: 1px dashed var(--webet-line);
    background-color: var(--webet-bg);
    color: var(--webet-muted);
}

.fw-thumbdel {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

/* ---------- Lightbox ---------- */

.fw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(8, 14, 16, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    touch-action: pan-y;
}

.fw-lightbox-img {
    max-width: 100vw;
    max-height: calc(100dvh - 120px - env(safe-area-inset-bottom));
    object-fit: contain;
    background-size: cover;
    background-position: center;
}

.fw-lightbox-top {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

.fw-lightbox-count {
    color: #E6ECEE;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 3px 12px;
}

.fw-lightbox-btn {
    font: inherit;
    font-size: 18px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #F2F6F7;
    cursor: pointer;
}

.fw-lightbox-btn.active { background: var(--fw-route); }

.fw-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 64px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #F2F6F7;
    font-size: 18px;
    cursor: pointer;
}

.fw-lightbox-nav:disabled { opacity: 0.25; cursor: default; }
.fw-lightbox-nav.prev { left: 8px; }
.fw-lightbox-nav.next { right: 8px; }

@media (max-width: 640px) {
    .fw-lightbox-nav { display: none; } /* auf dem Handy wischt man */
}

.fw-lightbox-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, transparent, rgba(8, 14, 16, 0.9) 40%);
    color: #E6ECEE;
}

.fw-lightbox-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    min-width: 0;
}

.fw-lightbox-info strong { font-size: 15px; color: #fff; }
.fw-lightbox-caption { color: #C9D3D6; }

/* ---------- Menschen: Zeilen, Profil, Profil-Erweiterung ---------- */

.fw-avatar.big { width: 40px; height: 40px; font-size: 20px; }
.fw-avatar.huge { width: 64px; height: 64px; font-size: 32px; }

.fw-person {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--webet-surface);
    box-shadow: var(--webet-card-shadow);
}

.fw-person-main {
    font: inherit;
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--webet-ink);
    text-align: left;
    cursor: pointer;
}

.fw-person-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.fw-person-text .webet-muted { font-size: 13px; }

.fw-person-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.fw-toolbtn.primary {
    background: var(--webet-green);
    border-color: var(--webet-green);
    color: #fff;
}

.fw-sectionhint {
    margin: -4px 0 8px;
    font-size: 14px;
}

.fw-personhead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 12px;
}

.fw-personhead-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.fw-followrow { margin-bottom: 16px; max-width: 420px; }
.fw-followrow .wdt-button { width: 100%; }

.fw-profile-extras {
    font: inherit;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    background: var(--webet-surface);
    box-shadow: var(--webet-card-shadow);
    color: var(--webet-ink);
    text-align: left;
    cursor: pointer;
}

.fw-profile-extras-link {
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--webet-green);
    display: flex;
    gap: 6px;
    align-items: center;
}

.fw-iconbtn {
    position: relative;
    font: inherit;
    font-size: 17px;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid var(--webet-line);
    border-radius: 10px;
    background: var(--webet-surface);
    color: var(--webet-ink);
    cursor: pointer;
}

.fw-iconbtn-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--fw-route);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
}

.fw-ownerlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.fw-visibility {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    font-size: 12.5px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--webet-line);
    background: var(--webet-surface);
}

.fw-guestnote {
    margin: 0;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}

/* Freigabe-Link im Reise-Editor */

.fw-sharebox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--webet-line);
    border-radius: 10px;
    background: var(--webet-surface);
}

.fw-sharelink {
    font-size: 13px;
    overflow-wrap: anywhere;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--webet-bg);
    -webkit-user-select: text;
    user-select: text;
}

.fw-seg-item i { margin-right: 5px; }

/* ---------- Startseite: laufende Reise, Feed ---------- */

.fw-currenttrip {
    font: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 10px;
    border: none;
    border-radius: 18px;
    background: var(--webet-surface);
    box-shadow: var(--fw-shadow-card);
    color: var(--webet-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.fw-currenttrip:hover { transform: translateY(-1px); color: var(--webet-ink); }

.fw-currenttrip-cover {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--fw-sea-2);
    color: var(--fw-mint);
    font-size: 24px;
}

.fw-currenttrip-cover img { width: 100%; height: 100%; object-fit: cover; }

.fw-currenttrip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.fw-currenttrip-text strong { font-size: 18px; line-height: 1.15; }
.fw-currenttrip-text small { font-size: 12.5px; color: var(--webet-muted); }
.fw-currenttrip-chev { color: var(--webet-icon); font-size: 16px; padding-right: 6px; }

.fw-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fw-feeditem {
    background: var(--webet-surface);
    border-radius: 20px;
    box-shadow: var(--fw-shadow-card);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.fw-feeditem:hover { transform: translateY(-1px); }

.fw-feeditem-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 10px;
}

.fw-feeditem-head .fw-avatar { width: 32px; height: 32px; font-size: 17px; }

.fw-feeditem-who {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.fw-feeditem-who strong { font-size: 13px; font-weight: 700; }
.fw-feeditem-who small { font-size: 12px; color: var(--webet-muted); }

/* Foto mit fester Höhe (Handoff: 260 px), Platzhalter Tiefsee — nichts springt */
.fw-feeditem-photo {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background-color: var(--fw-sea-2);
    background-size: cover;
    background-position: center;
}

.fw-feeditem-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fw-feeditem-count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}

.fw-feeditem-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px;
}

.fw-feeditem-body h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.fw-feeditem-body p {
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--webet-muted);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
}

.fw-feeditem-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--webet-muted);
}

/* ---------- Reaktionen: Herz, Kommentare, Neu ---------- */

.fw-step-titlerow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fw-newbadge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--fw-route);
    color: #fff;
    flex: 0 0 auto;
}

.fw-feeditem-head .fw-newbadge { margin-left: auto; }
.fw-feeditem.new { box-shadow: var(--webet-card-shadow), 0 0 0 2px var(--fw-route-soft); }

.fw-stat-new {
    font: inherit;
    cursor: pointer;
    background: var(--fw-route-soft);
    border-color: var(--fw-route-soft);
    color: var(--fw-route);
}

.fw-stat-new strong { color: var(--fw-route); }

.fw-react {
    display: flex;
    gap: 8px;
    padding-top: 2px;
}

.fw-reactbtn {
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--webet-line);
    background: var(--webet-surface);
    color: var(--webet-ink);
    cursor: pointer;
}

.fw-reactbtn i { font-size: 15px; }
.fw-reactbtn.on { border-color: var(--fw-route); color: var(--fw-route); background: var(--fw-route-soft); }
.fw-reactbtn:disabled { opacity: 0.55; cursor: default; }
.fw-reactbtn:active:not(:disabled) { filter: brightness(0.95); }

.fw-likes {
    margin: 0;
    font-size: 13px;
}

.fw-comments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px dashed var(--webet-line);
}

.fw-comment {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding-top: 6px;
}

.fw-comment .fw-avatar { flex: 0 0 auto; width: 28px; height: 28px; font-size: 15px; }

.fw-comment-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.fw-comment-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13.5px;
}

.fw-comment-head .webet-muted { font-size: 12px; }

.fw-comment-del {
    margin-left: auto;
    font: inherit;
    border: none;
    background: none;
    color: var(--webet-icon);
    cursor: pointer;
    padding: 0 4px;
}

.fw-comment-body p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.fw-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    padding-top: 4px;
}

.fw-textarea.small {
    min-height: 44px;
    font-size: 15px;
    padding: 8px 10px;
}

.fw-feeditem-react {
    display: inline-flex;
    gap: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fw-feeditem-react .likes { color: var(--fw-route); }

/* ---------- Route: Kartenknöpfe, Abspielen, Statistik ---------- */

.fw-map-btns {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fw-map-btns .fw-map-toggle { position: static; }
.fw-map-toggle:disabled { opacity: 0.6; cursor: default; }

.fw-map-play {
    position: absolute;
    right: 10px;
    bottom: 26px;
    z-index: 1000;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: none;
    border-radius: 999px;
    background: rgba(11, 31, 38, 0.8);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.fw-map-note {
    position: absolute;
    left: 10px;
    bottom: 26px;
    z-index: 1000;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--fw-route);
}

.fw-routebox { margin-top: 4px; }

.fw-routestats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fw-upload-knopf.busy { pointer-events: none; opacity: 0.7; }

/* Weltkarte mit Kennzahlen (Profil) */

.fw-worldcard {
    background: radial-gradient(80% 90% at 50% 100%, var(--fw-glow) 0%, var(--fw-sea-2) 45%, var(--fw-sea) 100%);
    border-radius: 20px;
    padding: 14px 14px 12px;
    color: #fff;
    box-shadow: var(--fw-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.fw-worldmap {
    width: 100%;
    min-height: 120px;
    display: flex;
    justify-content: center;
}

.fw-worldmap canvas { display: block; max-width: 100%; }

.fw-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.fw-kpis div {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px 6px;
    text-align: center;
    min-width: 0;
}

.fw-kpis b {
    display: block;
    font-family: var(--fw-font-display);
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.fw-kpis span {
    font-size: 11px;
    color: var(--fw-ondark);
}

@media (max-width: 420px) {
    .fw-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fw-kpis div:nth-child(4), .fw-kpis div:nth-child(5) { grid-column: span 1; }
}

.fw-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.fw-country {
    font-size: 13px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--webet-surface);
    border: 1px solid var(--webet-line);
    white-space: nowrap;
}

/* Einfache Auswahllisten */

.fw-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 14px;
}

.fw-listitem {
    font: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--webet-line);
    border-radius: 12px;
    background: var(--webet-surface);
    color: var(--webet-ink);
    text-align: left;
    cursor: pointer;
}

.fw-listmain {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fw-listmain .webet-muted { font-size: 13px; }

/* ---------- Handy quer (flacher Bildschirm) ----------
   Bei 375px Höhe fressen Topbar (48px) und Tab-Leiste (62px) ein Drittel
   des Bildes. Beide werden kompakt: Leiste ohne Beschriftung, Plus-Knopf
   kleiner und nicht mehr herausgehoben, Kopfzeile niedriger. */

@media (orientation: landscape) and (max-height: 500px) {
    :root {
        --webet-topbar-h: 40px;
        --webet-bottomnav-h: 44px;
    }

    .webet-nav-item {
        gap: 0;
        font-size: 0;
    }

    .webet-nav-item .wdt-icon {
        font-size: 20px;
    }

    .webet-nav-plus {
        width: 36px;
        height: 36px;
        transform: none;
        box-shadow: none;
    }

    .webet-nav-plus:active {
        transform: scale(0.94);
    }

    .webet-nav-plus .wdt-icon {
        font-size: 18px;
    }

    .webet-pagetitle {
        font-size: 22px;
        margin-bottom: 6px;
    }
}

/* ============================================================
   Reise-Ansicht nach dem Claude-Design-Handoff „Reise“
   Bühne (Titelbild) → Kennzahlen → Karte → Timeline. Handy einspaltig,
   ab 760px zweispaltig mit stehender dunkler Karte rechts.
   ============================================================ */

.webet-main-inner:has(.fw-reise) {
    max-width: none;
    padding: 0;
}

.fw-reise {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero" "stats" "map" "timeline";
    background: var(--fw-paper);
    min-height: 100%;
    align-content: start;
}

/* ---- Bühne ---- */

.fw-hero {
    grid-area: hero;
    position: relative;
    height: 340px;
    background: linear-gradient(160deg, var(--fw-glow), var(--fw-sea));
    color: #fff;
    overflow: hidden;
}

.fw-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fw-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 31, 38, 0.35) 0%, rgba(11, 31, 38, 0) 35%, rgba(11, 31, 38, 0.92) 100%);
    pointer-events: none;
}

.fw-hero-top {
    position: absolute;
    left: 16px;
    top: 14px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.fw-hero-actions { display: flex; gap: 8px; }

.fw-glass {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background 0.12s ease;
}

.fw-glass.wide { width: auto; padding: 0 14px; }
.fw-glass:hover { background: rgba(255, 255, 255, 0.24); }
.fw-glass:disabled { opacity: 0.6; cursor: default; }

.fw-hero-text {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 22px;
    z-index: 1;
}

.fw-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fw-sun);
}

.fw-hero-eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fw-route);
    box-shadow: 0 0 0 3px rgba(222, 106, 43, 0.35);
}

.fw-hero h1 {
    margin: 4px 0 8px;
    font-family: var(--fw-font-display);
    font-weight: 800;
    font-size: 40px;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}

.fw-hero-owner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13.5px;
    color: var(--fw-ondark);
}

.fw-hero-owner .fw-ownerlink { color: inherit; font-weight: 500; }
.fw-avatar.small { width: 24px; height: 24px; font-size: 13px; }

.fw-hero-vis {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8A9AA1;
}

/* ---- Kennzahlen ---- */

.fw-reise-stats {
    grid-area: stats;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 14px 16px 0;
}

.fw-stat strong { margin-right: 3px; }

/* ---- Karte ---- */

.fw-reise-map {
    grid-area: map;
    position: relative;
    margin: 14px 16px 0;
    height: 220px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--fw-sea);
    box-shadow: var(--fw-shadow-card);
}

.fw-reise-map .wdt-map {
    height: 100% !important;
    border: 0;
    border-radius: 0;
    background: var(--fw-sea);
}

.fw-reise-map .leaflet-container,
.fw-editor-map .leaflet-container { background: var(--fw-sea); font-family: Inter, system-ui, sans-serif; }

/* Dunkler Kartenlook ohne Schlüssel: OSM-Kacheln invertiert und entsättigt —
   in der Reise-Ansicht und im Step-Editor, damit keine helle Karte im Dunkel steht */
.fw-reise-map .leaflet-tile-pane,
.fw-editor-map .leaflet-tile-pane {
    filter: invert(1) hue-rotate(185deg) brightness(0.72) saturate(0.35) contrast(0.95);
}

.fw-reise-map .leaflet-control-attribution,
.fw-editor-map .leaflet-control-attribution {
    background: rgba(11, 31, 38, 0.7) !important;
    color: #8A9AA1 !important;
    font-size: 10px;
}

.fw-reise-map .leaflet-control-attribution a,
.fw-editor-map .leaflet-control-attribution a { color: var(--fw-ondark) !important; }

.fw-reise-map .leaflet-bar {
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}

.fw-reise-map .leaflet-bar a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    background: var(--fw-sea-2) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-weight: 500;
}

/* Pins: 28px, Petrol mit weißem Rand; der aktive (orange) bekommt den Ring */
.fw-reise-map .wdt-map-pin span {
    width: 28px;
    height: 28px;
    font: 800 12px/1 Inter, system-ui, sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.15s ease;
}

.fw-reise-map .wdt-map-pin span[style*="DE6A2B"] {
    box-shadow: 0 0 0 8px rgba(222, 106, 43, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.fw-reise-map .wdt-map-mover span {
    background: var(--fw-route);
    width: 26px;
    height: 26px;
    border-width: 3px;
}

.fw-map-pills {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1000;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fw-map-pill {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(11, 31, 38, 0.75);
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.fw-map-pill.muted { color: var(--fw-ondark); font-weight: 500; cursor: default; }
.fw-map-pill b { color: #fff; font-family: var(--fw-font-display); font-size: 14px; font-weight: 800; }

.fw-map-locate {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 1000;
    background: rgba(18, 48, 58, 0.9);
}

/* ---- Timeline ---- */

.fw-timeline {
    grid-area: timeline;
    position: relative;
    padding: 22px 16px 120px;
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* gestrichelte Verbindungslinie hinter den Kreisen */
.fw-timeline::before {
    content: "";
    position: absolute;
    left: calc(16px + 16.5px);
    top: 40px;
    bottom: 140px;
    border-left: 1px dashed var(--fw-ondark);
}

.fw-tl-row {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.fw-tl-row.start, .fw-tl-row.end { align-items: center; }

.fw-tl-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--webet-surface);
    border: 1px solid var(--webet-line);
    display: grid;
    place-items: center;
    color: var(--webet-muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.fw-tl-dot.dashed { border-style: dashed; border-color: var(--fw-ondark); color: var(--webet-icon); }

.fw-tl-text { font-size: 13px; color: var(--webet-muted); }
.fw-tl-text b { color: var(--webet-ink); }

.fw-tl-next {
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.fw-tl-num {
    font: inherit;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--fw-route);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 6px var(--fw-route-soft);
    cursor: pointer;
    transition: transform 0.15s ease;
    position: relative;
    z-index: 1;
}

.fw-step.active .fw-tl-num { transform: scale(1.1); }

.fw-step-card {
    background: var(--webet-surface);
    border-radius: 20px;
    box-shadow: var(--fw-shadow-card);
    /* Kein overflow:hidden — das ···-Menü ragt unter die Karte und würde sonst
       abgeschnitten (war unsichtbar). Die Ecken runden stattdessen die Kinder
       mit eigenem Hintergrund (Entwurfsleiste, Fotostreifen) selbst. */
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.fw-step-card > .fw-step-draftbar,
.fw-step-card > .fw-strip {
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}

.fw-step-card > .fw-step-draftbar + .fw-strip { border-radius: 0; }

.fw-step.active .fw-step-card { border-color: var(--fw-route-soft); }
.fw-step.draft .fw-step-card { background: color-mix(in srgb, var(--webet-surface) 85%, var(--webet-bg)); }

.fw-step-draftbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--webet-muted);
    background: var(--webet-bg);
    padding: 8px 14px;
}

.fw-step-draftbar span { display: inline-flex; align-items: center; gap: 6px; }

/* Fotostreifen: zwei Bilder, 1 : 1,4, feste Höhe */
.fw-strip {
    display: flex;
    gap: 4px;
    height: 240px;
    background: var(--fw-sea-2);
}

.fw-thumb {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    border: none;
    background-color: var(--fw-sea-2);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
}

.fw-thumb.second { flex: 1.4 1 0; }
.fw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fw-thumb-more {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-family: var(--fw-font-display);
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    background: rgba(11, 31, 38, 0.7);
    border-radius: 999px;
    padding: 4px 11px;
    backdrop-filter: blur(6px);
}

.fw-thumb.pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--fw-ondark);
    font-size: 12.5px;
    cursor: default;
}

.fw-thumb.pending i { font-size: 20px; }

.fw-step-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fw-step-eyebrowrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.fw-step-body .fw-eyebrow { font-size: 11px; letter-spacing: 0.1em; }

.fw-step-title {
    margin: 3px 0 4px;
    font-family: var(--fw-font-display);
    font-weight: 700;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.fw-step-meta { color: var(--webet-muted); font-size: 13px; }

.fw-step-text {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.5;
    text-wrap: pretty;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.fw-step-text.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fw-step-body .fw-linkbtn { align-self: flex-start; margin-top: 4px; }

.fw-step-tip {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    background: var(--fw-route-soft);
    border-radius: 10px;
    padding: 8px 12px;
    margin-top: 10px;
}

.fw-step-tip .fw-icon { color: var(--fw-route); flex: 0 0 auto; margin-top: 2px; }

.fw-step-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #EEF2F1;
    font-size: 13px;
    color: var(--webet-muted);
}

.fw-pill {
    font: inherit;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--webet-muted);
    padding: 6px 10px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.fw-pill:hover:not(:disabled) { background: var(--fw-paper); }
.fw-pill.heart:hover:not(:disabled), .fw-pill.heart.on { color: var(--fw-route); }
.fw-pill.comment:hover, .fw-pill.comment.on { color: var(--fw-petrol); }
.fw-pill:disabled { cursor: default; opacity: 0.6; }

.fw-step-photocount { margin-left: auto; color: var(--webet-icon); white-space: nowrap; }

.fw-more { position: relative; }

.fw-morebtn {
    font: inherit;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--webet-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.fw-morebtn:hover { background: var(--fw-paper); color: var(--webet-ink); }

.fw-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 200px;
    background: var(--webet-surface);
    border-radius: 14px;
    box-shadow: var(--fw-shadow-card), 0 0 0 1px var(--webet-line);
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.fw-menu button {
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--webet-ink);
    cursor: pointer;
}

.fw-menu button:hover { background: var(--fw-paper); }
.fw-menu button .fw-icon { color: var(--webet-muted); }

.fw-likes { margin: 8px 0 0; font-size: 13px; color: var(--webet-muted); }

.fw-step-body .fw-comments { margin-top: 10px; border-top: none; padding-top: 0; }

/* ---- Notebook und Handy quer: zwei Spalten, Karte rechts stehend ---- */

@media (min-width: 760px), (orientation: landscape) and (max-height: 500px) {
    .fw-reise {
        grid-template-columns: minmax(380px, 1fr) minmax(360px, 46%);
        grid-template-areas:
            "hero  map"
            "stats map"
            "timeline map";
        grid-template-rows: auto auto 1fr;
    }

    .fw-reise-map {
        margin: 0;
        height: calc(100dvh - var(--webet-topbar-h) - var(--webet-bottomnav-h));
        border-radius: 0;
        box-shadow: none;
        position: sticky;
        top: 0;
        align-self: start;
    }

    .fw-reise-stats { padding: 14px 28px 0; }
    .fw-timeline { padding: 22px 28px 120px; }
    .fw-timeline::before { left: calc(28px + 16.5px); }
}

@media (min-width: 760px) {
    .fw-reise-map { height: calc(100dvh - var(--webet-topbar-h)); }
}

@media (orientation: landscape) and (max-height: 500px) {
    .fw-hero { height: 220px; }
    .fw-hero h1 { font-size: 28px; }
}

@media (max-width: 420px) {
    .fw-hero h1 { font-size: 32px; }
}

/* ---- Basisregeln, die mehrere Seiten teilen (Avatar, Kennzahl-Chip) ---- */

.fw-avatar {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 13px;
    flex: 0 0 auto;
}

.fw-stat {
    font-size: 12.5px;
    color: var(--webet-muted);
    background: var(--webet-surface);
    border: 1px solid var(--webet-line);
    border-radius: 999px;
    padding: 5px 11px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.fw-stat strong {
    color: var(--webet-ink);
    font-family: var(--fw-font-display);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fw-trip-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fw-reise-summary {
    grid-area: summary;
    margin: 12px 16px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--webet-ink);
    max-width: 62ch;
    text-wrap: pretty;
}

.fw-reise { grid-template-areas: "hero" "stats" "summary" "map" "timeline"; }

@media (min-width: 760px), (orientation: landscape) and (max-height: 500px) {
    .fw-reise {
        grid-template-areas:
            "hero     map"
            "stats    map"
            "summary  map"
            "timeline map";
        grid-template-rows: auto auto auto 1fr;
    }
    .fw-reise-summary { margin: 12px 28px 0; }
}

.fw-thumbstate { color: var(--webet-muted); font-size: 18px; }

/* ============================================================
   Dunkle Welt (Hendrik, 4. Sept. 2026): Die hellen Flächen folgen der
   Tiefsee. Alles läuft über Variablen — Kit-Shell (--webet-*), WDT-Komponenten
   (kendo- und wdt-Variablen) und eigene Bausteine (--fw-*). Petrol bleibt für Füllungen,
   Links und aktive Tabs bekommen ein helleres Petrol, damit sie auf Dunkel lesbar sind.
   ============================================================ */

:root {
    color-scheme: dark;

    --fw-paper: #0F262E;       /* Seitengrund, eine Nuance heller als die Kopfzeile */
    --fw-surface: #15333D;     /* Karten und Listen */
    --fw-surface-2: #1B3E49;   /* Eingaben, Chips, Hover */
    --fw-ink: #E8EEF0;
    --fw-ink-2: #A9B9BF;
    --fw-ink-3: #7F9097;
    --fw-line: #244852;
    --fw-accent-text: #5FB8C0; /* Petrol, hell genug für Text auf Dunkel */
    --fw-route-soft: rgba(222, 106, 43, 0.22);
    --fw-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.35);

    --webet-bg: var(--fw-paper);
    --webet-surface: var(--fw-surface);
    --webet-ink: var(--fw-ink);
    --webet-muted: var(--fw-ink-2);
    --webet-icon: var(--fw-ink-3);
    --webet-line: var(--fw-line);
    --webet-green: var(--fw-accent-text);
    --webet-green-soft: rgba(28, 110, 119, 0.28);
    --webet-gold-soft: rgba(222, 106, 43, 0.22);
    --webet-card-shadow: var(--fw-shadow-card);

    --kendo-color-app-surface: var(--fw-paper);
    --kendo-color-surface: var(--fw-surface);
    --kendo-color-surface-alt: var(--fw-surface-2);
    --kendo-color-on-app-surface: var(--fw-ink);
    --kendo-color-on-surface: var(--fw-ink);
    --kendo-color-on-base: var(--fw-ink);
    --kendo-color-base: var(--fw-surface-2);
    --kendo-color-base-hover: #224955;
    --kendo-color-base-active: #285460;
    --kendo-color-base-subtle: #1B3E49;
    --kendo-color-base-emphasis: var(--fw-ink-2);
    --kendo-color-border: #2E5460;
    --kendo-color-border-alt: #3B6673;
    --kendo-color-subtle: var(--fw-ink-2);
    --kendo-color-subtle-text: var(--fw-ink-2);
    --kendo-color-light: #244852;
    --kendo-color-dark: var(--fw-ink);
    --kendo-color-inverse: var(--fw-ink);
    --kendo-color-on-inverse: var(--fw-paper);
    --kendo-color-primary-subtle: rgba(95, 184, 192, 0.14);
    --kendo-color-primary-subtle-hover: rgba(95, 184, 192, 0.22);
    --kendo-color-primary-subtle-active: rgba(95, 184, 192, 0.3);
    --kendo-color-primary-on-subtle: #9FD9DE;
    --kendo-color-primary-on-surface: var(--fw-accent-text);
}

/* Füllungen bleiben Petrol, auch wenn --webet-green jetzt der helle Textton ist */
.webet-nav-plus,
.fw-seg-item.on,
.fw-upload-knopf.primary,
.fw-toolbtn.primary {
    background: var(--fw-petrol);
    border-color: var(--fw-petrol);
    color: #fff;
}

/* Kit-Stellen mit festem Weiß */
.webet-emoji-pick.selected,
.webet-notif.unread {
    background: var(--fw-surface-2);
}

/* Eingaben heben sich von der Karte ab */
.fw-input,
.fw-textarea {
    background: var(--fw-surface-2);
    border-color: var(--fw-line);
    color: var(--fw-ink);
}

.fw-input::placeholder,
.fw-textarea::placeholder { color: var(--fw-ink-3); }

/* Hover-Flächen und Trennlinien */
.fw-pill:hover:not(:disabled),
.fw-menu button:hover,
.fw-morebtn:hover { background: var(--fw-surface-2); }

.fw-step-foot { border-top-color: var(--fw-line); }
.fw-hero-vis { color: var(--fw-ink-3); }

/* Statusfarben, die auf Dunkel lesbar bleiben */
.fw-fieldhint.ok,
.fw-upload-meldungen .ok { color: #6CC391; }
.fw-linkbtn.danger { color: #F28B82; }

/* Der Globus und die Bühne enden in Tiefsee — der Seitengrund schließt daran an */
.fw-start,
.fw-reise { background: var(--fw-paper); }

/* Kartenrahmen der Editor-Karte (Setz-Modus) ohne weißen Rand */
.fw-editor-map .wdt-map { border-color: var(--fw-line); background: var(--fw-sea); }
.fw-editor-map .wdt-map__hint { background: var(--fw-surface-2); color: var(--fw-ink); }

/* Initialen-Avatare (Kit-Klasse .webet-initials) in der Titelschrift */
.fw-avatar .webet-initials { font-family: var(--fw-font-display); }
:root { --webet-font-display: var(--fw-font-display); } /* Kit-Initialen in Bricolage */