*,
*::before,
*::after {
    box-sizing: border-box;
}


[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
}


button,
a,
label,
summary,
[role='button'] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--zh-body);
    letter-spacing: var(--lw-body);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    
    hyphenate-limit-chars: 10 5 4;
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 4;
    margin: 0;
    font-weight: 600;
}

h1 {
    font-size: var(--fs-page);
    line-height: var(--zh-page);
    letter-spacing: var(--lw-page);
}

h2 {
    font-size: var(--fs-section);
    line-height: var(--zh-section);
    letter-spacing: var(--lw-section);
}

h3 {
    font-size: var(--fs-card);
    line-height: var(--zh-card);
    letter-spacing: var(--lw-card);
}



.hub-up > h1,
.hub-up > div > h1,
.hub-eigenname {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
}


h1 {
    font-size: var(--fs-page);
    letter-spacing: var(--lw-page);
}

h2 {
    font-size: var(--fs-section);
    letter-spacing: var(--lw-section);
}

h3 {
    font-size: var(--fs-card);
    letter-spacing: -0.015em;
}

p {
    margin: 0 0 var(--sp-3);
    
    max-width: 70ch;
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    text-decoration-skip-ink: auto;
    overflow-wrap: anywhere;
}


a:where(:hover, :focus-visible) {
    text-decoration-thickness: 2px;
}


.hub-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-height: var(--tap-min);
    max-width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-control);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.hub-link > span { min-width: 0; }
.hub-link > svg { flex: none; }
.hub-link--back {
    justify-content: flex-start;
    padding-inline: 0;
    background: transparent;
}


.hub-link--back,
.hub-hero__zurueck,
.hub-reise-kompakt__link {
    position: relative;
    z-index: var(--z-lift);
}
@media (hover: hover) {
    .hub-link:hover { text-decoration: underline; }
}


:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}


.hub-tabs > a:focus-visible,
.hub-tabs summary:focus-visible,
.hub-reise-tabs > a:focus-visible,
.hub-reise-mehr > summary:focus-visible,
.hub-lightbox__rund:focus-visible,
.hub-lightbox__mehr > summary:focus-visible,
.hub-oben__knopf:focus-visible,
.hub-sheet-schliessen:focus-visible {
    outline-offset: -2px;
    border-radius: inherit;
}


.hub-sheet-schliessen:focus-visible {
    border-radius: 50%;
}


.hub-luft-1 { margin-top: var(--sp-1); }
.hub-luft-2 { margin-top: var(--sp-2); }
.hub-luft-3 { margin-top: var(--sp-3); }
.hub-luft-4 { margin-top: var(--sp-4); }
.hub-luft-6 { margin-top: var(--sp-6); }
.hub-luft-8 { margin-top: var(--sp-8); }



.hub-reihe {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}


.hub-reihe > .hub-field,
.hub-formzeile--zwei > .hub-field,
.hub-planung__auswahl > .hub-field,
.hub-planung__form > .hub-field {
    margin-bottom: 0;
}


.hub-titelzeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}


.hub-dehnt {
    flex: 1;
    min-width: 0;
}


.hub-untertitel {
    font-size: var(--fs-sub);
}


.hub-flach {
    margin: 0;
}


.hub-zeiger {
    cursor: pointer;
}


.hub-nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


.hub-ansage:not(:has(> :not([hidden]))) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}


.hub-nur-vorlesen:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
}





.hub-page {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

.hub-page > .hub-up,
.hub-page > main {
    flex: 1;
    min-width: 0;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-4) var(--sp-12);
}





.hub-formzeile--zwei {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
}

@media (max-width: 480px) {
    .hub-formzeile--zwei {
        grid-template-columns: 1fr;
    }
}




.hub-seite {
    position: sticky;
    top: 0;
    flex: none;
    box-sizing: border-box;
    width: 248px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-4) var(--sp-3);
    background: var(--seite-flaeche);
    color: var(--seite-text);
    border-right: 1px solid var(--seite-linie);
    overflow-y: auto;
}


.hub-seite__gruppe {
    margin: var(--sp-4) 0 var(--sp-1);
    padding: 0 var(--sp-3);
    color: var(--seite-label);
    font-size: var(--fs-mark);
    font-weight: 600;
    letter-spacing: var(--lw-mark);
    text-transform: uppercase;
}

.hub-seite__gruppe:first-of-type {
    margin-top: var(--sp-3);
}

.hub-marke {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) 0 var(--sp-4);
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-sub);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hub-marke__zeichen {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-control);
    font-weight: 600;
}


.hub-seite__suche,
.hub-seite__menue a,
.hub-neu__knopf {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--tap-min);
    padding: var(--sp-2) var(--sp-3);
    border-radius: 11px;
    color: var(--seite-item);
    font-size: var(--fs-meta);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--d-fade) var(--ease);
}

.hub-seite__suche {
    margin-bottom: var(--sp-2);
    border: 1px solid var(--seite-linie);
    background: var(--surface);
}

.hub-seite__suche:hover {
    background: var(--seite-hover);
    color: var(--seite-text);
}

.hub-seite__menue {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hub-seite__menue a:hover {
    background: var(--seite-hover);
    color: var(--seite-text);
}

.hub-seite__menue a[aria-current='page'] {
    background: var(--seite-aktiv);
    color: var(--seite-aktiv-text);
    font-weight: 600;
}


.hub-zaehler {
    margin-left: auto;
    flex: none;
    padding: 1px var(--sp-2);
    border-radius: 20px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-mark);
    font-weight: 500;
}

.hub-seite__fuss {
    margin-top: auto;
    padding-top: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}


.hub-seite__konto {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--r-kachel);
    background: var(--surface);
    color: var(--seite-text);
    text-decoration: none;
}

.hub-seite__konto:hover {
    background: var(--seite-hover);
}

.hub-seite__name {
    display: block;
    font-size: var(--fs-meta);
    font-weight: 600;
}

.hub-seite__konto .hub-meta {
    display: block;
    color: var(--seite-item);
}


.hub-seite .hub-marke {
    color: var(--seite-text);
}

.hub-seite .hub-zaehler {
    background: var(--seite-aktiv);
    color: var(--seite-aktiv-text);
}

.hub-seite .hub-neu__knopf {
    background: var(--plus-verlauf);
    color: var(--plus-zeichen);
    font-weight: 600;
}

.hub-seite .hub-button--quiet {
    background: transparent;
    color: var(--seite-item);
}

.hub-seite .hub-button--quiet:hover {
    background: var(--seite-hover);
    color: var(--seite-text);
}




.hub-thema {
    display: flex;
    gap: 2px;
    padding: var(--sp-1);
    border-radius: var(--r-control);
    background: var(--surface-muted);
}

.hub-thema form {
    flex: 1;
    min-width: 0;
}

.hub-thema button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    
    min-height: var(--tap-min);
    padding: var(--sp-1) var(--sp-2);
    border: none;
    border-radius: var(--r-field);
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: var(--fs-meta);
    font-weight: 500;
    cursor: pointer;
}

.hub-thema button:hover {
    color: var(--text);
}


.hub-thema button[aria-pressed='true'] {
    background: var(--surface);
    box-shadow: var(--sh-rest);
    color: var(--text-strong);
    font-weight: 600;
}


.hub-seite .hub-thema {
    background: var(--surface);
}

.hub-seite .hub-thema button {
    color: var(--seite-item);
}

.hub-seite .hub-thema button:hover {
    color: var(--seite-text);
}

.hub-seite .hub-thema button[aria-pressed='true'] {
    background: var(--seite-aktiv);
    box-shadow: none;
    color: var(--seite-aktiv-text);
}

.hub-thema--knapp button {
    padding: var(--sp-2);
}


.hub-thema--wahl {
    flex-wrap: wrap;
}

.hub-darstellung__frage {
    margin: var(--sp-4) 0 var(--sp-2);
    color: var(--text);
    font-size: var(--fs-control);
    font-weight: 600;
}

.hub-darstellung__frage:first-child {
    margin-top: 0;
}



.hub-neu {
    position: relative;
    margin-top: var(--sp-2);
}

.hub-neu__knopf {
    list-style: none;
    cursor: pointer;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 500;
    justify-content: center;
}

.hub-neu__knopf::-webkit-details-marker {
    display: none;
}


.hub-seite:has(.hub-neu[open]) {
    z-index: var(--z-menu);
}


.hub-neu__blatt {
    position: fixed;
    left: calc(248px + var(--sp-2));
    
    top: var(--sp-4);
    z-index: var(--z-menu);
    width: 300px;
    max-width: calc(100vw - var(--sp-8));
    max-height: calc(100vh - var(--sp-8));
    overflow-y: auto;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-dialog);
    background: var(--elevated);
    box-shadow: var(--shadow);
    animation: hubPop var(--d-pop) var(--ease) both;
}

.hub-neu__titel {
    padding: 0 var(--sp-1) var(--sp-2);
}

.hub-neu__eintrag {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border-radius: var(--r-control);
    color: var(--text);
    text-decoration: none;
}

.hub-neu__eintrag:hover {
    background: var(--surface-muted);
}

.hub-neu__zeichen {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
}

.hub-neu__wort {
    display: block;
    font-size: var(--fs-control);
    font-weight: 500;
}

.hub-neu__eintrag .hub-meta {
    display: block;
}


.hub-neu__blatt:has(.hub-schnell) {
    width: 360px;
    max-height: calc(100vh - var(--sp-12));
    overflow-y: auto;
}

.hub-mehr__blatt .hub-schnell-ziel {
    padding: 0 var(--sp-4);
}



.hub-zeile details.hub-punktmehr > summary.hub-symbolknopf {
    list-style: none;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0;
    line-height: 1;
}


.hub-punktmehr > summary::-webkit-details-marker,
.hub-punktmehr > summary::before {
    display: none;
}


.hub-punktmehr[open] {
    flex-basis: 100%;
}

.hub-punktmehr[open] > summary {
    margin-left: auto;
}


@media (max-width: 767px) {
    .hub-zeile:has(> .hub-punktmehr) > .hub-zeile__haupt {
        flex: 1 1 70%;
    }
}

.hub-punktmehr__inhalt {
    margin-top: var(--sp-2);
    padding: var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
}


.hub-zeile__haupt.hub-reihe {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp-3);
}






.hub-schnell-ziel__laden {
    display: block;
    height: 44px;
}

.hub-schnell-ziel:not(:empty) {
    display: grid;
    gap: var(--sp-2);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line-soft);
}

.hub-schnell {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
}


details.hub-schnell + details.hub-schnell {
    margin-top: var(--sp-2);
}

.hub-schnell__art {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--tap-min);
    padding: 0 var(--sp-3);
    color: var(--text-strong);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.hub-schnell__art::-webkit-details-marker {
    display: none;
}

.hub-schnell__form {
    display: grid;
    gap: var(--sp-4);
    padding: 0 var(--sp-3) var(--sp-3);
}

.hub-schnell__form > .hub-field,
.hub-schnell__mehr > .hub-field,
.hub-schnell__zeit > .hub-field,
.hub-logistikmaske > .hub-field,
.hub-reise-planverwaltung__formular > .hub-field,
.hub-trip-day__neu-form > .hub-field,
.hub-trip-blog__neu-form > .hub-field,
.hub-trip-blogpost__verwaltung-form > .hub-field {
    margin-bottom: 0;
}

.hub-schnell__mehr > summary {
    min-height: var(--tap-min);
    display: flex;
    align-items: center;
    color: var(--text-2);
    cursor: pointer;
}

.hub-schnell__mehr[open] {
    display: grid;
    gap: var(--sp-4);
}



.hub-oben,
.hub-tabs {
    display: none;
}

.hub-oben {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
}

.hub-oben__titel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-sub);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.hub-oben__knopf {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    color: var(--text-2);
}

.hub-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bottom-bar);
    padding: var(--sp-1) var(--sp-1) var(--sp-2);
    background: var(--surface);
    border-top: 1px solid var(--line-soft);
}

.hub-tabs > a,
.hub-mehr > summary {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: var(--sp-1) 0;
    color: var(--text-2);
    font-size: var(--fs-mark);
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    min-height: var(--tap-min);
}

.hub-tabs > a[aria-current='page'],
.hub-tabs > details > summary[aria-current='page'] {
    color: var(--accent);
    font-weight: 600;
}

.hub-reise-tabs {
    display: none;
}

.hub-reise-neu {
    display: none;
}

.hub-reise-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.hub-reise-erinnerung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--r-card);
    background: var(--accent-soft);
    color: var(--accent);
    text-decoration: none;
}

.hub-reise-erinnerung > span:first-child {
    display: grid;
    gap: var(--sp-1);
}

#reise-mehr {
    scroll-margin-top: 88px;
}

.hub-reise-aktionen > a,
.hub-reise-kontextlink {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-control);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-control);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 767px) {
    

    
    .hub-reise-neu {
        display: none;
    }

    .hub-reise-neu--aus {
        position: fixed;
        z-index: var(--z-fab);
        right: calc(var(--sp-4) + env(safe-area-inset-right));
        bottom: calc(76px + env(safe-area-inset-bottom));
        display: block;
    }

    
    .hub-reise-neu > summary {
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        margin-left: auto;
        border-radius: 50%;
        background: var(--accent);
        color: var(--on-accent);
        box-shadow: var(--shadow);
        cursor: pointer;
        list-style: none;
        transition: transform var(--d-fade) var(--ease);
    }

    .hub-reise-neu > summary::-webkit-details-marker {
        display: none;
    }

    .hub-reise-neu__blatt {
        position: absolute;
        right: 0;
        bottom: calc(100% + var(--sp-2));
        display: grid;
        gap: var(--sp-1);
        min-width: min(260px, calc(100vw - 32px));
        padding: var(--sp-3);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-card);
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    .hub-reise-neu:not([open]) > .hub-reise-neu__blatt {
        display: none;
    }

    .hub-reise-neu__blatt strong {
        padding: var(--sp-2);
    }

    .hub-reise-neu__blatt a {
        display: flex;
        align-items: center;
        min-height: var(--tap-min);
        padding: 0 var(--sp-2);
        border-radius: var(--r-control);
        color: var(--text);
        text-decoration: none;
    }

    .hub-reise-neu__blatt a:hover,
    .hub-reise-neu__blatt a:focus-visible {
        background: var(--accent-soft);
    }
}

.hub-mehr > summary::-webkit-details-marker {
    display: none;
}


.hub-zaehler--punkt {
    position: absolute;
    top: 0;
    left: 58%;
    margin: 0;
    padding: 0 var(--sp-1);
    background: var(--accent);
    color: var(--on-accent);
}

.hub-mehr__blatt {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bottom-bar-global);
    max-height: 82vh;
    overflow-y: auto;
    padding: var(--sp-2) 0 var(--sp-6);
    background: var(--elevated);
    border-top-left-radius: var(--r-dialog);
    border-top-right-radius: var(--r-dialog);
    box-shadow: var(--shadow);
    animation: hubPop var(--d-pop) var(--ease) both;
}


.hub-sheet-schliessen {
    
    position: sticky;
    top: var(--sp-2);
    z-index: 2;
    float: right;
    margin-right: var(--sp-2);
    margin-bottom: -48px;
    display: grid;
    place-items: center;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-2);
    cursor: pointer;
}

.hub-sheet-schliessen:hover,
.hub-sheet-schliessen:focus-visible {
    background: var(--surface-muted);
    color: var(--text);
}





.hub-mehr__griff {
    display: block;
    width: 44px;
    height: 5px;
    margin: 0 auto var(--sp-3);
    border-radius: 9px;
    background: var(--line);
}

.hub-mehr__titel {
    padding: var(--sp-2) var(--sp-4) var(--sp-1);
}


.hub-mehr__eintrag {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--tap-min);
    padding: var(--sp-2) var(--sp-4);
    color: var(--text);
    text-decoration: none;
}


.hub-mehr__eintrag--gross {
    min-height: var(--h-row);
    padding: var(--sp-2) var(--sp-4);
}

.hub-mehr__eintrag--gross .hub-mehr__zeichen {
    width: 42px;
    height: 42px;
    border-radius: var(--r-kachel);
    background: var(--ton-orange);
    color: var(--akzent-warm-ink);
}

.hub-mehr__abmelden {
    padding: var(--sp-3) var(--sp-4) 0;
}

.hub-mehr__abmelden > .hub-button {
    width: 100%;
}

.hub-mehr__zeichen {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--surface-muted);
    color: var(--text-2);
}

.hub-mehr__wort {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-body);
}

.hub-mehr__wort .hub-meta {
    display: block;
}




@media (min-width: 768px) and (max-width: 1023px) {
    .hub-seite {
        width: 78px;
        padding: var(--sp-4) var(--sp-2);
        align-items: stretch;
    }

    
    .hub-seite__gruppe,
    .hub-marke__name {
        display: none;
    }

    
    .hub-seite__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .hub-seite__suche,
    .hub-seite__menue a,
    .hub-neu__knopf,
    .hub-marke,
    .hub-seite__konto {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .hub-zaehler {
        position: absolute;
        margin: 0;
    }

    .hub-seite__menue a {
        position: relative;
    }

    .hub-zaehler {
        top: 2px;
        right: 8px;
    }

    .hub-thema {
        flex-direction: column;
    }

    
    .hub-seite .hub-thema button > span {
        display: none;
    }

    .hub-seite__abmelden {
        font-size: var(--fs-mark);
        padding: var(--sp-2) 0;
    }

    .hub-neu__blatt {
        left: calc(78px + var(--sp-2));
    }
}


@media (max-width: 767px) {
    
    
    
    html.hub-app-root,
    body.hub-app-body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        
        background: var(--surface);
    }

    
    @media (display-mode: standalone) {
        html.hub-app-root {
            min-height: min(100lvh, calc(100% + env(safe-area-inset-top)));
        }
    }

    .hub-page {
        
        position: fixed;
        inset: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
        
        overflow: clip;
        
        min-height: 0;
        
        background: var(--bg);
        
        align-items: stretch;
    }

    .hub-seite {
        display: none;
    }

    
    .hub-oben {
        display: none;
    }

    .hub-tabs {
        position: static;
        grid-row: 3;
        display: flex;
    }

    
    .hub-page::before {
        content: '';
        grid-row: 1;
        height: env(safe-area-inset-top);
    }

    .hub-page > .hub-up,
    .hub-page > main {
        grid-row: 2;
        width: 100%;
        overflow-y: auto;
        
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: var(--sp-4) var(--sp-4) var(--sp-6);
    }
}



@media (display-mode: standalone) and (max-width: 767px) {
    html.hub-app-root,
    body.hub-app-body {
        height: 100vh;
        height: 100lvh;
    }

    .hub-page {
        
        position: relative;
        inset: auto;
        width: 100%;
        height: 100%;
    }

    .hub-mehr {
        position: static;
    }

    .hub-mehr__blatt,
    .hub-mehr > .hub-sheet-backdrop {
        position: absolute;
    }
}



@media (max-width: 767px) {
    html.hub-standalone,
    html.hub-standalone body.hub-app-body {
        height: 100vh;
        height: 100lvh;
    }

    html.hub-standalone .hub-page {
        position: relative;
        inset: auto;
        width: 100%;
        height: 100%;
    }

    html.hub-standalone .hub-mehr {
        position: static;
    }

    html.hub-standalone .hub-mehr__blatt,
    html.hub-standalone .hub-mehr > .hub-sheet-backdrop {
        position: absolute;
    }
}


.hub-abschnitte {
    display: grid;
    max-width: 68ch;
}

.hub-abschnitt {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-8);
}

.hub-home-reise {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--r-card);
    background: var(--accent-soft);
    color: var(--text);
    text-decoration: none;
}

.hub-home-reise > span:first-child {
    display: grid;
    gap: var(--sp-1);
}

.hub-home-reise strong {
    font-size: var(--fs-section);
    letter-spacing: -0.03em;
}

.hub-home-reise__aktion {
    color: var(--accent);
    font-weight: 600;
}


.hub-abschnitte > .hub-abschnitt--breit {
    max-width: none;
}

.hub-rubrik {
    font-size: var(--fs-mark);
    font-weight: 600;
    letter-spacing: var(--lw-mark);
    text-transform: uppercase;
    color: var(--text-2);
}


.hub-abschnitt .hub-zeile {
    min-height: var(--h-row);
    padding: var(--sp-2) var(--sp-1);
    border-radius: 0;
}

.hub-abschnitt .hub-zeile:last-child {
    border-bottom: none;
}




.hub-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    box-shadow: var(--sh-rest);
    padding: var(--sp-4);
}


.hub-card--flat {
    box-shadow: none;
}


.hub-zeichenkachel {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--r-kachel);
    background: var(--surface-muted);
    color: var(--text-2);
}

.hub-zeichenkachel--gross {
    width: 56px;
    height: 56px;
    border-radius: var(--r-card);
}

.hub-zeichenkachel--blau {
    background: var(--ton-blau);
    color: var(--accent);
}

.hub-zeichenkachel--orange {
    background: var(--ton-orange);
    color: var(--akzent-warm-ink);
}

.hub-zeichenkachel--gruen {
    background: var(--ton-gruen);
    color: var(--done);
}

.hub-zeichenkachel--rot {
    background: var(--ton-rot);
    color: var(--error);
}


.hub-zeichenkachel--violett {
    background: var(--ton-violett);
    color: var(--text-strong);
}


.hub-skeleton {
    background: var(--skeleton);
    border-radius: var(--r-field);
    
    color: transparent;
    animation: hub-skeleton 1.4s ease-in-out infinite;
}

.hub-card .hub-skeleton {
    background: var(--skeleton-card);
}

@keyframes hub-skeleton {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-skeleton {
        animation: none;
    }
}

.hub-stack {
    display: grid;
    gap: var(--sp-4);
}




.hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--h-button);
    
    padding: var(--sp-2) var(--sp-4);
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--r-button);
    background: var(--navy);
    color: var(--on-navy);
    font-family: inherit;
    font-size: var(--fs-control);
    font-weight: 600;
    cursor: pointer;
    
    text-decoration: none;
    transition:
        filter var(--d-fade) var(--ease),
        transform var(--d-fade) var(--ease);
}


@media (hover: hover) and (pointer: fine) {
    .hub-button:hover {
        filter: brightness(1.08);
    }
}


.hub-button:active {
    filter: brightness(0.94);
    transform: scale(0.97);
}


.hub-button:disabled {
    background: var(--surface-muted);
    border-color: transparent;
    color: var(--text-3);
    cursor: default;
    filter: none;
}


.hub-button--gross {
    min-height: var(--h-button-primary);
    border-radius: var(--r-button-gross);
    font-size: 17px;
}


.hub-button--akzent {
    background: var(--akzent-warm);
    color: var(--on-akzent-warm);
}

.hub-button--quiet {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text-strong);
}


.hub-button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--accent);
}


.hub-button--danger {
    background: var(--error-soft);
    border-color: var(--error-line);
    color: var(--error);
}


.hub-neu__knopf,
.hub-datei__knopf,
.hub-lightbox__pfeil,
.hub-haken,
.hub-titelwahl__kachel {
    transition: transform var(--d-fade) var(--ease);
}

.hub-neu__knopf:active,
.hub-datei__knopf:active,
.hub-lightbox__pfeil:active {
    transform: scale(0.96);
}

.hub-haken:not(:disabled):active,
.hub-titelwahl__kachel:active {
    transform: scale(0.92);
}

.hub-option,
.hub-mehr > summary,
details > summary {
    transition: background-color var(--d-fade) var(--ease);
}

.hub-option:active,
.hub-mehr > summary:active,
details > summary:active {
    background-color: var(--surface-muted);
}


.hub-unternav {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
}

.hub-unternav > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--sp-3);
    border-radius: var(--r-control);
    color: var(--text-2);
    font-size: var(--fs-control);
    text-decoration: none;
    transition:
        background-color var(--d-fade) var(--ease),
        color var(--d-fade) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .hub-unternav > a:hover {
        background: var(--surface-muted);
        color: var(--text);
    }
}

.hub-unternav > a[aria-current='page'] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}


.hub-verwaltungskopf {
    margin-bottom: var(--sp-6);
}

.hub-verwaltungskopf__marke {
    color: var(--text-2);
    font-size: var(--fs-mark);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hub-verwaltungskopf > .hub-unternav {
    margin-top: var(--sp-2);
}


@media (max-width: 767px) {
    .hub-verwaltungskopf > .hub-unternav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-1);
        width: 100%;
    }

    .hub-verwaltungskopf > .hub-unternav > a {
        justify-content: center;
        min-width: 0;
        min-height: var(--tap-min);
        padding: 0 var(--sp-1);
        
        font-size: 13px;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
    }
}


.hub-titelzeile__zahl {
    font-weight: 400;
}


.hub-chips {
    display: flex;
    
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
}


.hub-chips__wort {
    flex: none;
    white-space: nowrap;
}


.hub-sortierung--mobil {
    display: none;
}

.hub-sortierung__zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-2);
    align-items: center;
}

.hub-sortierung__zeile .hub-input {
    width: 100%;
    min-width: 0;
}


.hub-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: var(--h-chip);
    padding: 0 var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-chip);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-meta);
    font-weight: 500;
    text-decoration: none;
    transition:
        border-color var(--d-fade) var(--ease),
        transform var(--d-fade) var(--ease);
}


a.hub-chip::after,
button.hub-chip::after {
    content: '';
    position: absolute;
    inset: calc((var(--h-chip) - var(--tap-min)) / 2 - 1px) 0;
}


@media (max-width: 767px) {
    .hub-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-left: calc(var(--sp-4) * -1);
        margin-right: calc(var(--sp-4) * -1);
        
        padding: calc((var(--tap-min) - var(--h-chip)) / 2) var(--sp-4);
        
        scroll-padding-inline: var(--sp-4);
        scrollbar-width: none;
    }

    .hub-chips::-webkit-scrollbar {
        display: none;
    }

    
    .hub-chips > * {
        flex: none;
    }

    .hub-sortierung--desktop {
        display: none;
    }

    .hub-sortierung--mobil {
        display: grid;
        gap: var(--sp-1);
        margin-top: var(--sp-3);
    }

    .hub-sortierung__zeile .hub-button {
        min-height: var(--h-input);
        padding-right: var(--sp-3);
        padding-left: var(--sp-3);
    }
}

@media (hover: hover) and (pointer: fine) {
    a.hub-chip:hover {
        border-color: var(--accent);
    }
}

a.hub-chip:active {
    transform: scale(0.96);
}


.hub-chip--still {
    border-style: dashed;
    color: var(--text-2);
}


.hub-chip--an {
    border-color: transparent;
    background: var(--navy);
    color: var(--on-navy);
    font-weight: 600;
}


.hub-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 28px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-tag);
    background: var(--surface-muted);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
}

.hub-status::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.hub-status--geplant {
    background: var(--ton-blau);
    color: var(--accent);
}

.hub-status--unterwegs {
    background: var(--ton-orange);
    color: var(--akzent-warm-ink);
}

.hub-status--fertig {
    background: var(--ton-gruen);
    color: var(--done);
}

.hub-status--abgelaufen {
    background: var(--ton-rot);
    color: var(--error);
}



.hub-field {
    display: grid;
    gap: var(--sp-1);
    margin-bottom: var(--sp-4);
}

.hub-field.hub-flach {
    margin-bottom: 0;
}


.hub-feldraster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    min-width: 0;
}
.hub-feldraster > .hub-field {
    margin-bottom: 0;
}


.hub-field--dehnbar {
    flex: 1;
    min-width: 150px;
}


.hub-label {
    color: var(--text-2);
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: var(--lw-mark);
    text-transform: uppercase;
}

.hub-input {
    
    min-height: var(--h-input);
    min-width: 0;
    max-width: 100%;
    padding: 0 var(--sp-3);
    background: var(--feld);
    
    border: 1px solid var(--line-strong);
    border-radius: var(--r-input);
    color: var(--text);
    font-family: inherit;
    
    font-size: var(--fs-sub);
}

.hub-input::placeholder {
    color: var(--text-2);
}


.hub-input:focus-visible {
    border-color: var(--focus);
    outline: 3px solid var(--focus-ring);
    outline-offset: 0;
}


@media (hover: hover) {
    .hub-input:is([type='date'], [type='datetime-local'], [type='time']):focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
    }
}


select.hub-input {
    appearance: none;
    padding-right: calc(var(--sp-3) + 18px);
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        right calc(var(--sp-3) + 5px) center,
        right var(--sp-3) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}


select.hub-input {
    color: var(--text);
}

select.hub-input option {
    background: var(--surface);
    color: var(--text);
}

.hub-input[aria-invalid='true'] {
    border-color: var(--error);
}

.hub-hint {
    color: var(--text-2);
    font-size: var(--fs-meta);
}


.hub-erklaerung.hub-erklaerung {
    font-size: var(--fs-body);
}




.hub-notice {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-field);
    font-size: var(--fs-control);
}

.hub-notice--error {
    background: var(--error-soft);
    color: var(--error);
}

.hub-notice--done {
    background: var(--accent-soft);
    color: var(--done);
}


.hub-notice--warning {
    display: block;
    padding: var(--sp-4);
    border: 1px solid var(--warning-line);
    background: var(--warning-soft);
    color: var(--text);
}

.hub-notice--warning p {
    margin: 0;
}



.hub-tag {
    display: inline-block;
    padding: 2px var(--sp-2);
    border-radius: var(--r-tag);
    background: var(--surface-muted);
    color: var(--text-2);
    font-size: var(--fs-mark);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}





.hub-empty {
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: var(--surface);
    text-align: center;
    color: var(--text-2);
}

.hub-empty > p {
    margin: 0;
    
    max-width: 34ch;
}

.hub-empty > p:first-of-type {
    color: var(--text-strong);
    font-size: var(--fs-card);
    font-weight: 600;
}

.hub-meta {
    color: var(--text-2);
    font-size: var(--fs-meta);
    letter-spacing: var(--lw-meta);
}


.hub-up > p,
.hub-up > .hub-hint,
.hub-gastseite > p {
    max-width: var(--lesebreite);
}



@keyframes hubUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hubFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes hubPop {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}


.hub-up {
    animation: hubUp var(--d-up) var(--ease);
}

.hub-fade {
    animation: hubFade var(--d-fade) var(--ease) both;
}

.hub-pop {
    animation: hubPop var(--d-pop) var(--ease) both;
}


@media (prefers-reduced-motion: reduce) {
    .hub-up,
    .hub-fade,
    .hub-pop {
        animation: hubFade var(--d-fade) var(--ease) both;
    }
}




.hub-login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding:
        calc(var(--sp-6) + env(safe-area-inset-top))
        calc(var(--sp-4) + env(safe-area-inset-right))
        calc(var(--sp-6) + env(safe-area-inset-bottom))
        calc(var(--sp-4) + env(safe-area-inset-left));
    background: var(--marke-flaeche);
    color: var(--on-marke);
}

.hub-login__card {
    width: 100%;
    max-width: 380px;
    padding: 0;
    text-align: center;
}


.hub-login__zeichen {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--r-hero);
    background: rgb(255 255 255 / 0.08);
}

.hub-login__zeichen .hub-waechter {
    width: 88px;
    height: 88px;
    margin: 0;
}

.hub-login__title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: var(--fw-display);
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-2);
}

.hub-login__sub {
    color: var(--marke-item);
    font-size: var(--fs-sub);
    line-height: 1.4;
    margin-bottom: var(--sp-8);
}


.hub-login__card form,
.hub-login__fuss {
    text-align: left;
}


.hub-login .hub-label {
    color: var(--marke-item);
}

.hub-login .hub-input {
    background: var(--surface);
    border-color: transparent;
    color: var(--text);
}

.hub-login .hub-option,
.hub-login .hub-hint {
    color: var(--marke-item);
}

.hub-login .hub-hint a:not(.hub-button) {
    color: var(--on-marke);
}

.hub-login .hub-option > span > span:first-child,
.hub-login .hub-option > span {
    color: var(--on-marke);
}

.hub-login .hub-option .hub-hint {
    display: block;
    color: var(--marke-item);
}

.hub-login__fuss {
    margin: var(--sp-6) 0 0;
    color: var(--marke-item);
    font-size: var(--fs-meta);
    line-height: 1.5;
}

.hub-login .hub-button {
    width: 100%;
}


.hub-login .hub-notice--error {
    background: rgb(193 59 59 / 0.28);
    border-color: rgb(240 115 111 / 0.45);
    color: var(--on-marke);
}


.hub-login .hub-waechter__linie,
.hub-login .hub-waechter__augapfel,
.hub-login .hub-waechter__lid {
    stroke: var(--on-marke);
}

.hub-login .hub-waechter__flaeche,
.hub-login .hub-waechter__lid {
    fill: rgb(255 255 255 / 0.14);
}

.hub-login .hub-waechter__augapfel {
    fill: var(--surface);
}

.hub-login .hub-waechter__pupille {
    fill: var(--marke-flaeche);
}


.hub-waechter {
    display: block;
    width: 132px;
    height: 132px;
    margin: 0 auto var(--sp-3);
}

.hub-waechter__linie {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hub-waechter__flaeche {
    fill: var(--accent-soft);
    stroke: none;
}

.hub-waechter__augapfel {
    fill: var(--surface);
    stroke: var(--accent);
    stroke-width: 2;
}

.hub-waechter__pupille {
    fill: var(--accent);
    stroke: none;
}


.hub-waechter__pupillen {
    transform: translate(var(--px, 0px), var(--py, 0px));
    transition: transform 90ms linear;
}

.hub-waechter__lid {
    fill: var(--accent-soft);
    stroke: var(--accent);
    stroke-width: 2;
    transform: translateY(var(--lid, -22px));
    transition: transform var(--d-pop) var(--ease);
}

.hub-waechter__haende {
    transform: translateY(var(--hand, 60px));
    transition: transform var(--d-panel) var(--ease);
}



.hub-field--passwort {
    position: relative;
}


.hub-field--passwort .hub-input {
    padding-right: 44px;
}

.hub-augenknopf {
    position: absolute;
    right: var(--sp-1);
    
    top: 50%;
    transform: translateY(-4px);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--r-field);
    background: none;
    color: var(--text-2);
    cursor: pointer;
    transition:
        color var(--d-fade) var(--ease),
        background-color var(--d-fade) var(--ease);
}

.hub-augenknopf:hover {
    color: var(--accent);
    background: var(--accent-soft);
}


.hub-augenknopf::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap-min);
    height: var(--tap-min);
    transform: translate(-50%, -50%);
}

.hub-augenknopf svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}


.hub-feststell {
    display: grid;
    grid-template-rows: 0fr;
    margin: 0;
    color: var(--warning);
    font-size: var(--fs-meta);
    transition: grid-template-rows var(--d-up) var(--ease);
}

.hub-feststell > span {
    overflow: hidden;
}

.hub-feststell[data-an="ja"] {
    grid-template-rows: 1fr;
}

.hub-feststell[data-an="ja"] > span {
    padding-top: var(--sp-1);
}


.hub-button[data-laeuft="ja"] {
    cursor: default;
    filter: saturate(0.6);
}



.hub-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}



.hub-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    
    min-height: var(--h-row);
    
    padding: var(--sp-1) var(--sp-3);
    
    border-bottom: 1px solid var(--line-card);
    border-radius: var(--r-control);
}


@media (hover: hover) and (pointer: fine) {
    .hub-zeile:has(a):hover {
        background: var(--surface-muted);
    }
}

.hub-zeile:has(a) {
    transition: background-color var(--d-fade) var(--ease);
}

.hub-zeile:has(a):active {
    background: var(--accent-soft);
}

.hub-zeile > .hub-zeile__haupt {
    min-width: 55%;
}

.hub-zeile:last-child {
    border-bottom: none;
}

.hub-zeile:hover {
    background: var(--surface-muted);
}

.hub-zeile__haupt {
    display: flex;
    flex-direction: column;
    
    align-self: stretch;
    justify-content: center;
    
    min-height: var(--tap-min);
    gap: 2px;
    flex: 1;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
}

.hub-zeile__titel {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 500;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.hub-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    
    align-items: start;
}


.hub-grid--fuellend {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.hub-card--link {
    display: block;
    color: var(--text);
    text-decoration: none;
    transition: transform var(--d-fade) var(--ease);
}

.hub-card--link:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .hub-card--link:hover {
        transform: none;
    }
}



.hub-upload--bereit {
    outline: 2px dashed var(--accent);
    outline-offset: 4px;
}


.hub-upload__zeile {
    display: grid;
    
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--line-soft);
}

.hub-upload__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.hub-upload__stand {
    max-width: 66vw;
    overflow-wrap: anywhere;
    text-align: end;
}

[data-upload-target="liste"] {
    min-width: 0;
    max-width: 100%;
}

.hub-upload__stand--fehler {
    color: var(--error);
}

.hub-upload__zeile--fertig .hub-upload__stand {
    color: var(--done);
}



.hub-sheet {
    background: var(--elevated);
    border-radius: var(--r-dialog);
    box-shadow: var(--shadow);
    padding: var(--sp-6);
}

.hub-sheet__titel {
    font-size: var(--fs-section);
    letter-spacing: -0.025em;
    margin-bottom: var(--sp-4);
}

.hub-optionen {
    display: grid;
    gap: var(--sp-2);
}


.hub-option {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--h-row);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-input);
    cursor: pointer;
}

.hub-option:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}


.hub-rechte__wer {
    min-width: 0;
    margin: var(--sp-4) 0 0;
    padding: 0;
    border: 0;
}


.hub-option input[type="checkbox"],
.hub-option input[type="radio"] {
    flex: none;
    width: var(--kasten);
    height: var(--kasten);
    margin: 0;
    accent-color: var(--done-flaeche);
}


.hub-option input[type="radio"] {
    accent-color: var(--accent);
}



.hub-inhalt h2,
.hub-inhalt h3,
.hub-inhalt h4 {
    margin: var(--sp-6) 0 var(--sp-2);
}

.hub-inhalt h2:first-child,
.hub-inhalt h3:first-child {
    margin-top: 0;
}

.hub-inhalt ul,
.hub-inhalt ol {
    margin: 0 0 var(--sp-3);
    padding-left: var(--sp-6);
}

.hub-inhalt blockquote {
    margin: var(--sp-4) 0;
    padding-left: var(--sp-4);
    border-left: 2px solid var(--line);
    color: var(--text-2);
}

.hub-inhalt pre {
    padding: var(--sp-3);
    background: var(--surface-muted);
    border-radius: var(--r-field);
    overflow-x: auto;
}

.hub-inhalt img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-field);
}

.hub-taskliste {
    list-style: none;
    padding-left: 0;
}

.hub-taskitem {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}


.hub-editor {
    min-height: 240px;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-field);
    background: var(--surface);
}

.hub-editor:focus-visible {
    border-color: var(--accent);
}






.hub-notiz .hub-editor {
    min-height: 320px;
    padding: var(--sp-4);
    border-radius: var(--r-card);
    box-shadow: var(--sh-rest);
    font-size: var(--fs-sub);
    line-height: 1.6;
}

.hub-editor__leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-input);
    background: var(--surface);
}


.hub-editor__werkzeug {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--tap-min);
    height: var(--tap-min);
    border: 0;
    border-radius: var(--r-field);
    background: none;
    color: var(--text-2);
    font-family: inherit;
    font-size: var(--fs-sub);
    cursor: pointer;
    transition: background-color var(--d-fade) var(--ease);
}

.hub-editor__werkzeug:hover,
.hub-editor__werkzeug:focus-visible {
    background: var(--surface-muted);
    color: var(--text);
}

.hub-editor__werkzeug:active {
    transform: scale(.94);
}

.hub-editor__mehr {
    flex: none;
}


.hub-editor__stand {
    margin-left: auto;
    padding-right: var(--sp-2);
}

@media (max-width: 360px) {
    
    .hub-editor__stand {
        flex: 1 0 100%;
        margin-left: 0;
        padding: 0 var(--sp-2) var(--sp-1);
    }
}

@media (max-width: 767px) {
    
    .hub-notiz .hub-editor {
        min-height: 50dvh;
        padding: var(--sp-3);
    }

    .hub-editor__stand {
        font-size: var(--fs-mark);
    }
}



.hub-zeile--erledigt .hub-zeile__titel {
    color: var(--text-2);
    text-decoration: line-through;
}

.hub-zeile--ueberfaellig .hub-faellig {
    color: var(--error);
    font-weight: 500;
}

.hub-personen {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}


.hub-zeile--datei {
    gap: var(--sp-3);
    min-height: var(--h-row);
}

.hub-zeile__winkel {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--text-3);
}


.hub-endgueltig {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--error-line);
    border-radius: var(--r-input);
    background: var(--error-soft);
}

.hub-endgueltig > summary {
    min-height: var(--tap-min);
    display: flex;
    align-items: center;
    color: var(--error);
    font-size: var(--fs-meta);
    font-weight: 600;
    cursor: pointer;
}


.hub-statuskarte {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sh-rest);
}

.hub-statuskarte__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.hub-statuskarte__text > strong {
    font-size: var(--fs-card);
    font-weight: 600;
    letter-spacing: var(--lw-card);
}


.hub-zeile--person {
    position: relative;
    gap: var(--sp-3);
    min-height: var(--h-row-bild);
}


.hub-zeile--person .hub-zeile__titel > a::after {
    content: '';
    position: absolute;
    inset: 0;
}



.hub-trip-map__frame {
    position: relative;
}


.leaflet-bar a,
.leaflet-touch .leaflet-bar a {
    width: var(--tap-min);
    height: var(--tap-min);
    line-height: var(--tap-min);
}


.leaflet-container a.leaflet-popup-close-button::after {
    content: '';
    position: absolute;
    inset: calc((24px - var(--tap-min)) / 2);
}


.hub-trip-map__schwebend {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    right: var(--sp-3);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    pointer-events: none;
}

.hub-trip-map__zurueck,
.hub-trip-map__stand {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: var(--tap-min);
    padding: 0 var(--sp-3);
    border-radius: var(--r-button);
    background: var(--material-strong);
    box-shadow: var(--sh-raised);
    color: var(--text-strong);
    font-size: var(--fs-meta);
    font-weight: 600;
    text-decoration: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.hub-trip-map__stand:empty {
    display: none;
}


.hub-trip-map__zurueck {
    flex: none;
    max-width: 50%;
}

.hub-trip-map__zurueck > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-trip-map__zurueck > svg {
    flex: none;
}

.hub-trip-map__stand {
    min-width: 0;
    padding-block: var(--sp-2);
    -webkit-hyphens: auto;
    hyphens: auto;
}


.hub-trip-map__schwebend {
    align-items: flex-start;
}


.hub-trip-map__canvas {
    isolation: isolate;
}

.hub-trip-map__frame .leaflet-top {
    top: calc(var(--sp-3) + var(--tap-min) + var(--sp-2));
}

@media (max-width: 767px) {
    
    .hub-trip-map__canvas {
        height: 62dvh;
        min-height: 320px;
    }

    .hub-trip-map__orte {
        margin: calc(var(--sp-3) * -1) 0 0;
        border-radius: var(--r-sheet) var(--r-sheet) 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        position: relative;
        z-index: var(--z-lift);
    }

    .hub-trip-map__orte-kopf {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-4) var(--sp-3);
    }

    
    .hub-trip-map__orte-kopf > .hub-mehr__griff {
        grid-column: 1 / -1;
    }

    .hub-trip-map__orte-kopf h2 {
        font-size: var(--fs-section);
        letter-spacing: var(--lw-section);
    }

    .hub-trip-map__hinweis {
        padding: var(--sp-3) var(--sp-4);
    }
}




.hub-hero__zurueck {
    padding: 0;
    border-radius: var(--r-field);
    background: none;
    color: rgb(255 255 255 / .92);
    font-size: var(--fs-meta);
    font-weight: 500;
    text-shadow: 0 1px 8px rgb(0 0 0 / .45);
}

.hub-hero__zurueck:hover,
.hub-hero__zurueck:focus-visible {
    background: none;
    color: #fff;
}


.hub-hero__pille {
    border: 0;
    background: none;
    padding: 0;
    color: rgb(255 255 255 / .88);
    font-size: var(--fs-meta);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}


.hub-hero__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.hub-hero__knopf {
    border: 1px solid rgb(255 255 255 / .30);
    background: rgb(0 0 0 / .28);
    color: #fff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.hub-hero__knopf--primaer {
    border-color: transparent;
    background: #fff;
    color: var(--navy);
    font-weight: 600;
}




.hub-mehr__konto {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--h-row-bild);
    margin: 0 var(--sp-4) var(--sp-2);
    
    padding: var(--sp-2) var(--tap-min) var(--sp-2) var(--sp-3);
    border-radius: var(--r-card);
    background: var(--surface-muted);
    color: var(--text);
    text-decoration: none;
}

.hub-mehr__kontotext {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.hub-mehr__kontotext > strong {
    font-size: var(--fs-card);
    font-weight: 600;
}


.hub-mehr__gruppe {
    margin: 0 var(--sp-4) var(--sp-3);
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
}

.hub-mehr__gruppe > .hub-mehr__eintrag + .hub-mehr__eintrag {
    border-top: 1px solid var(--line-card);
}


.hub-mehr__titel {
    margin: var(--sp-4) 0 var(--sp-1);
    padding: 0 calc(var(--sp-4) + var(--sp-3));
    color: var(--text-2);
    font-size: var(--fs-mark);
    font-weight: 600;
    letter-spacing: var(--lw-mark);
    text-transform: uppercase;
}


.hub-mehr__darstellung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 0 var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
}

.hub-mehr__darstellung .hub-thema {
    flex: none;
}

.hub-mehr__darstellung .hub-thema button {
    min-height: var(--tap-min);
    padding: 0 var(--sp-2);
}


@media (max-width: 480px) {
    .hub-mehr__darstellung {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
    }

    .hub-mehr__darstellung .hub-thema {
        width: 100%;
    }
}



.hub-home__willkommen {
    margin: var(--sp-1) 0 0;
    color: var(--text-2);
    font-size: var(--fs-sub);
}


.hub-home__datum {
    margin-top: var(--sp-1);
}


.hub-abschnitt__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.hub-abschnitt__alle {
    position: relative;
    flex: none;
    color: var(--accent);
    font-size: var(--fs-meta);
    font-weight: 600;
    text-decoration: none;
}


.hub-treffer {
    position: relative;
}


.hub-treffer {
    font-weight: 600;
    text-decoration: none;
}

nav[aria-label='Pfad'] a {
    color: var(--text-2);
    text-decoration: none;
}

.hub-treffer:where(:hover, :focus-visible),
nav[aria-label='Pfad'] a:where(:hover, :focus-visible) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

nav[aria-label='Pfad'] a:where(:hover, :focus-visible) {
    color: var(--text-strong);
}


nav[aria-label='Pfad'] > span:last-child {
    color: var(--text-strong);
}

.hub-abschnitt__alle::after,
.hub-treffer::after {
    content: '';
    position: absolute;
    inset: calc((100% - var(--tap-min)) / 2) calc(-1 * var(--sp-2));
}


nav[aria-label='Pfad'] a {
    position: relative;
}

nav[aria-label='Pfad'] a::after {
    content: '';
    position: absolute;
    inset: calc((100% - var(--tap-min)) / 2) 0;    
    min-width: var(--tap-min);
}


@media (max-width: 767px) {
    nav.hub-meta[aria-label='Pfad'] {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        display: flex;
        align-items: center;
        min-height: var(--tap-min);
        margin-bottom: var(--sp-2);
        background: var(--bg);
        font-size: 0;
    }

    nav.hub-meta[aria-label='Pfad'] > * {
        display: none;
    }

    nav.hub-meta[aria-label='Pfad'] > a:last-of-type {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        min-height: var(--tap-min);
        max-width: 100%;
        overflow: hidden;
        color: var(--accent);
        font-size: var(--fs-control);
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    nav.hub-meta[aria-label='Pfad'] > a:last-of-type::before {
        content: '‹';
        font-size: 1.6em;
        font-weight: 400;
        line-height: 1;
        transform: translateY(-0.06em);
    }
}


.hub-kopfaktionen {
    display: none;
}

@media (max-width: 767px) {
    .hub-detailkopf {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        margin-bottom: var(--sp-2);
        background: var(--bg);
    }

    .hub-detailkopf > nav.hub-meta[aria-label='Pfad'] {
        position: static;
        flex: 1;
        min-width: 0;
        margin: 0;
        background: transparent;
    }

    .hub-kopfaktionen {
        display: flex;
        flex: none;
        align-items: center;
        margin-right: calc(-1 * var(--sp-2));
    }

    .hub-kopfaktionen__knopf {
        display: grid;
        place-items: center;
        width: var(--tap-min);
        height: var(--tap-min);
        border-radius: 50%;
        color: var(--text-strong);
    }

    .hub-kopfaktionen__knopf:active {
        background: var(--surface-muted);
    }

    .hub-kopfaktionen__knopf:focus-visible {
        outline: 3px solid var(--focus);
        outline-offset: 0;
    }
}

@media (min-width: 768px) {
    .hub-detailkopf {
        display: contents;
    }
}


.hub-reiseliste {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-reisezeile {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--h-row-bild);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sh-rest);
    color: var(--text);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .hub-reisezeile:hover {
        border-color: var(--line);
        background: var(--surface-muted);
    }
}

.hub-reisezeile__bild {
    flex: none;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--r-foto);
}

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

.hub-reisezeile__text {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.hub-reisezeile__titel {
    font-size: var(--fs-card);
    font-weight: 600;
    letter-spacing: var(--lw-card);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}




.hub-fehlerseite {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--sp-3);
    min-height: 70dvh;
    max-width: 30rem;
    margin: 0 auto;
    text-align: center;
}

.hub-fehlerseite > p {
    margin: 0;
    
    max-width: 34ch;
}

.hub-fehlerseite > .hub-button {
    margin-top: var(--sp-2);
}


.hub-fehlerseite__kennung {
    margin-top: var(--sp-4);
    color: var(--text-2);
    font-size: var(--fs-mark);
    letter-spacing: var(--lw-mark);
    text-transform: uppercase;
}




.hub-listenkarten {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-listenkarte {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--h-row-bild);
    padding: var(--sp-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sh-rest);
    color: var(--text);
    text-decoration: none;
    transition:
        border-color var(--d-fade) var(--ease),
        background-color var(--d-fade) var(--ease);
}







.hub-listenkarte__titel {
    font-size: var(--fs-card);
    font-weight: 600;
    letter-spacing: var(--lw-card);
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}







.hub-field--kompakt {
    flex: 0 1 120px;
    min-width: 0;
}

.hub-input--kompakt {
    flex: 0 1 120px;
    min-width: 0;
    max-width: 150px;
}

.hub-input--dehnt {
    flex: 1 1 160px;
    min-width: 0;
}

@media (max-width: 480px) {
    
    .hub-reihe > .hub-field,
    .hub-reihe > .hub-input,
    .hub-field--kompakt,
    .hub-input--kompakt,
    .hub-input--dehnt {
        flex: 1 1 100%;
        max-width: none;
    }
}




.hub-suche {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    max-width: 560px;
}

.hub-suche__feld {
    position: relative;
    flex: 1;
    min-width: 0;
}


.hub-suche__zeichen {
    position: absolute;
    top: 50%;
    left: var(--sp-4);
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    color: var(--text-strong);
    pointer-events: none;
}

.hub-suche__feld .hub-input {
    width: 100%;
    min-height: 56px;
    
    padding-left: calc(var(--sp-4) + 22px + var(--sp-3));
    padding-right: 52px;
    font-size: var(--fs-sub);
}


.hub-suche input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}


.hub-suche__leeren {
    position: absolute;
    top: 50%;
    right: var(--sp-3);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--text-2);
}

.hub-suche__leeren::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap-min);
    height: var(--tap-min);
    transform: translate(-50%, -50%);
}

.hub-suche__leeren:hover,
.hub-suche__leeren:focus-visible {
    background: var(--line-soft);
    color: var(--text);
}



.hub-suche__start {
    display: grid;
    gap: var(--sp-3);
}

.hub-suche__satz {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-mark);
    font-weight: 600;
    letter-spacing: var(--lw-mark);
    text-transform: uppercase;
}


.hub-suche__bereiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-suche__bereich {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 62px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    font-size: var(--fs-sub);
    font-weight: 500;
}

.hub-suche__start > .hub-hint {
    margin: 0;
}


@media (max-width: 767px) {
    .hub-suche__senden {
        display: none;
    }
}



.hub-suche__gruppe {
    margin-top: var(--sp-6);
}


.hub-suche__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-section);
    font-weight: 600;
}


.hub-suche__anzahl {
    flex: none;
    color: var(--text-3);
    font-size: var(--fs-control);
    font-weight: 400;
}


.hub-suche__karte {
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sh-rest);
}

.hub-zeile--treffer {
    gap: var(--sp-3);
    min-height: 72px;
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
    border-radius: 0;
}

.hub-zeile--treffer:last-child {
    border-bottom: 0;
}

@media (max-width: 767px) {
    
    .hub-suche {
        flex-wrap: wrap;
    }

    .hub-suche__feld {
        flex: 1 1 100%;
    }

    
    .hub-suche__karte {
        margin-left: calc(var(--sp-4) * -1);
        margin-right: calc(var(--sp-4) * -1);
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}




.hub-pdf {
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
}

.hub-pdf__buehne {
    position: relative;
    display: grid;
    place-items: center;
    max-height: 72dvh;
    overflow: auto;
    padding: var(--sp-4);
    background: #1B222E;
}




.hub-pdf__stand {
    position: absolute;
    right: var(--sp-3);
    bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-tag);
    background: rgb(0 0 0 / .58);
    color: #fff;
    font-weight: 600;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.hub-pdf__leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-top: 1px solid var(--line-soft);
}


.hub-pdf__luecke {
    flex: 1 1 var(--sp-4);
}

@media (max-width: 767px) {
    .hub-pdf__buehne {
        max-height: 62dvh;
        padding: var(--sp-2);
    }

    .hub-pdf__leiste .hub-button {
        flex: 1 1 auto;
        padding: 0 var(--sp-3);
    }

    
    .hub-pdf__luecke {
        flex-basis: 100%;
        height: 0;
        
        margin-top: calc(-1 * var(--sp-2));
    }
}




.hub-fortschritt {
    display: grid;
    gap: var(--sp-2);
    max-width: 420px;
}

.hub-fortschritt__text {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-meta);
    font-weight: 500;
}

.hub-fortschritt__spur {
    height: 10px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--surface-muted);
}

.hub-fortschritt__wert {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: var(--done-flaeche);
    transform-origin: left;
    transition: transform var(--d-up) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    .hub-fortschritt__wert {
        transition: none;
    }
}


.hub-zeile-neu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line-soft);
}

.hub-zeile-neu__titel {
    flex: 1 1 200px;
    min-width: 0;
}

.hub-zeile-neu__zusatz {
    flex: 0 1 150px;
    min-width: 0;
}




.hub-haken {
    display: grid;
    place-items: center;
    width: var(--kasten);
    height: var(--kasten);
    
    border: 2px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface);
    color: transparent;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}


.hub-haken--erledigt {
    border-color: var(--done-flaeche);
    background: var(--done-flaeche);
    color: #fff;
}

.hub-haken:disabled {
    border-color: var(--line);
    opacity: 0.55;
    cursor: default;
}

.hub-symbolknopf {
    position: relative;
    width: 32px;
    height: 32px;
    
    font-size: var(--fs-control);
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: transform var(--d-fade) var(--ease);
}


.hub-symbolknopf::after,
.hub-oben__knopf::after,
.hub-mehr__griff::after,
.hub-haken::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap-min);
    height: var(--tap-min);
    transform: translate(-50%, -50%);
}


.hub-symbolaktionen {
    display: flex;
    gap: var(--sp-2);
}
form:has(> .hub-symbolknopf),
.hub-zeile > form:has(> .hub-haken) {
    display: grid;
    place-items: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    flex-shrink: 0;
}
.hub-punktmehr:not([open]) {
    min-width: var(--tap-min);
}
.hub-punktmehr:not([open]) > summary {
    margin-inline: auto;
}

.hub-oben__knopf,
.hub-mehr__griff,
.hub-haken {
    position: relative;
}

.hub-oben__knopf {
    transition: transform var(--d-fade) var(--ease);
}

.hub-oben__knopf:active {
    transform: scale(0.92);
}

.hub-symbolknopf:active {
    transform: scale(0.92);
}



details:not(.hub-mehr) > summary:not(.hub-neu__knopf) {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap-min);
    padding-right: var(--sp-2);
    border-radius: var(--r-control);
    cursor: pointer;
    font-weight: 500;
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::marker {
    content: '';
}

details:not(.hub-mehr) > summary:not(.hub-neu__knopf)::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: var(--sp-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    transform: rotate(-45deg);
    transition: transform var(--d-fade) var(--ease);
    opacity: 0.7;
}

details:not(.hub-mehr)[open] > summary::before {
    transform: rotate(45deg);
}







.hub-klappen {
    margin-top: var(--sp-8);
    border-top: 1px solid var(--line);
}

.hub-klappen > details {
    border-bottom: 1px solid var(--line);
}

.hub-klappen > details > summary {
    padding-top: var(--sp-1);
    padding-bottom: var(--sp-1);
    color: var(--text-2);
}

.hub-klappen > details[open] > summary {
    color: var(--text);
}


.hub-klappen > details[open] > :not(summary):last-child {
    margin-bottom: var(--sp-4);
}


.hub-titelknoepfe {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .hub-titelknoepfe {
        gap: var(--sp-2);
    }

    .hub-titelknoepfe > .hub-meta {
        flex-basis: 100%;
    }
}


.hub-beisteuern .hub-datei__knopf {
    background: var(--accent);
    border-color: transparent;
    color: var(--on-accent);
    font-weight: 500;
}




.hub-anlegen {
    margin-top: var(--sp-4);
    padding: 0 var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    background: var(--surface);
}

.hub-anlegen > summary {
    color: var(--text);
}

.hub-anlegen[open] {
    padding-bottom: var(--sp-4);
}


.hub-liste--raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--sp-2);
}

.hub-liste--raster > .hub-zeile {
    border-bottom: none;
    border: 1px solid var(--line-soft);
}


.hub-liste--raster > .hub-zeile > .hub-zeile__haupt {
    display: grid;
    gap: 2px;
    min-width: 100%;
}


.hub-page > main.hub-up--weit {
    max-width: 1500px;
}


.hub-gastkopf {
    display: grid;
    gap: var(--sp-2);
    max-width: 60ch;
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--sp-6);
}

.hub-gastkopf__satz {
    margin: 0;
    color: var(--text-2);
}

.hub-gastkopf--album {
    max-width: none;
    min-height: min(56vh, 520px);
    padding: clamp(24px, 6vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--r-card);
    overflow: hidden;
}

.hub-gastkopf__titel {
    font-size: clamp(2.25rem, 8vw, 5.25rem);
    max-width: 12ch;
    line-height: .98;
    margin-top: var(--sp-2);
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    

    .hub-gastkopf--album .hub-eigenname {
        max-width: none;
        font-size: clamp(2rem, 9vw, 3rem);
        line-height: 1.05;
    }
}







.hub-farbwahl {
    border: none;
    padding: 0;
    margin: 0;
}

.hub-farbwahl__gitter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.hub-farbwahl__feld {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
}


.hub-farbwahl__feld input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.hub-farbwahl__probe {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: var(--r-control);
    
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.16);
    transition:
        transform var(--d-fade) var(--ease),
        box-shadow var(--d-fade) var(--ease);
}


.hub-farbwahl__feld input:checked + .hub-farbwahl__probe {
    box-shadow:
        0 0 0 2px var(--bg),
        0 0 0 4px var(--accent);
}

.hub-farbwahl__feld input:focus-visible + .hub-farbwahl__probe {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .hub-farbwahl__feld:hover .hub-farbwahl__probe {
        transform: scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-farbwahl__feld:hover .hub-farbwahl__probe {
        transform: none;
    }
}


.hub-farbwahl__wort {
    font-size: var(--fs-control);
    color: var(--text-2);
}






.hub-kachel {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: none;
    
    border-radius: 2px;
    background: var(--surface-muted);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--d-fade) var(--ease);
}


.hub-kachel:active {
    transform: scale(0.985);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .hub-kachel:hover img {
        transform: scale(1.03);
    }
}

.hub-kachel img {
    transition: transform var(--d-pop) var(--ease);
}


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

.hub-kachel__platzhalter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    height: 100%;
    padding: var(--sp-2);
    font-size: var(--fs-meta);
    color: var(--text-2);
    text-align: center;
    word-break: break-word;
}

.hub-kachel__video {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: var(--z-lift);
    color: var(--on-accent);
    background: rgba(23, 20, 15, 0.6);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
}

.hub-kachel__zahlen {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--sp-1) var(--sp-2);
    
    background: linear-gradient(transparent, rgba(23, 20, 15, 0.7));
    color: #fff;
    font-size: var(--fs-mark);
    text-align: right;
}



.hub-lightbox {
    width: min(96vw, 1200px);
    max-width: none;
    max-height: 92vh;
    padding: 0;
    border: none;
    border-radius: var(--r-dialog);
    background: var(--elevated);
    color: var(--text);
    
    overflow-y: auto;
    clip-path: inset(0 round var(--r-dialog));
    overscroll-behavior: contain;
}







.hub-lightbox__buehne {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    background: var(--bg);
}



.hub-lightbox__bild {
    max-width: 100%;
    max-height: 68vh;
    width: auto;
    height: auto;
    border-radius: var(--r-field);
}

.hub-lightbox__pfeil {
    width: var(--tap-min);
    height: var(--tap-min);
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
}

.hub-lightbox__zoom {
    
    width: var(--tap-min);
    padding-inline: 0;
    font-size: 22px;
}



.hub-kommentare {
    max-height: 140px;
    overflow-y: auto;
}

.hub-kommentar {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-body);
    max-width: none;
}

.hub-button--aktiv {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}


@media (max-width: 767px) {
    
    .hub-lightbox__buehne {
        gap: var(--sp-1);
        padding-inline: var(--sp-1);
    }

    

    .hub-lightbox__leiste {
        flex-direction: column;
        align-items: stretch;
    }
}


.hub-lightbox__kopf {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-lift);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    border: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / .68), transparent);
    padding:
        calc(var(--sp-3) + env(safe-area-inset-top))
        calc(var(--sp-3) + env(safe-area-inset-right))
        var(--sp-6)
        calc(var(--sp-3) + env(safe-area-inset-left));
}





.hub-lightbox__rund,
.hub-lightbox__mehr > summary {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--tap-min);
    height: var(--tap-min);
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / .42);
    color: #fff;
    cursor: pointer;
    list-style: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}



.hub-lightbox__mehr > summary::-webkit-details-marker {
    display: none;
}

.hub-lightbox__mehrblatt {
    position: absolute;
    top: calc(100% + var(--sp-2));
    right: 0;
    z-index: var(--z-menu);
    display: grid;
    gap: var(--sp-2);
    min-width: 220px;
    padding: var(--sp-3);
    border-radius: var(--r-card);
    background: var(--elevated);
    box-shadow: var(--sh-overlay);
}








.hub-lightbox__buehne {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 0;
    background: #000;
}








.hub-lightbox__pfeil:first-of-type {
    left: calc(var(--sp-2) + env(safe-area-inset-left));
}

.hub-lightbox__pfeil:last-of-type {
    right: calc(var(--sp-2) + env(safe-area-inset-right));
}



.hub-lightbox__leiste {
    flex: none;
    display: grid;
    gap: var(--sp-2);
    border: 0;
    background: linear-gradient(to top, rgb(0 0 0 / .78), rgb(0 0 0 / .55) 70%, transparent);
    padding:
        var(--sp-6)
        calc(var(--sp-4) + env(safe-area-inset-right))
        calc(var(--sp-3) + env(safe-area-inset-bottom))
        calc(var(--sp-4) + env(safe-area-inset-left));
}

.hub-lightbox__zeile {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}


.hub-lightbox__herz {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--tap-min);
    height: var(--tap-min);
    margin-left: calc(var(--sp-2) * -1);
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgb(255 255 255 / .82);
    font-size: 22px;
    cursor: pointer;
}

.hub-lightbox__herz.hub-button--aktiv {
    background: none;
    color: #FF6B6B;
}





.hub-lightbox__kommentarform .hub-input {
    flex: 1;
    min-width: 0;
    background: rgb(255 255 255 / .14);
    border-color: rgb(255 255 255 / .22);
    color: #fff;
}






.hub-lightbox .hub-kommentare {
    max-height: 120px;
    color: rgb(255 255 255 / .88);
}

@media (max-width: 767px) {
    
    .hub-lightbox[open] {
        width: 100vw;
        max-width: 100vw;
        max-height: none;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        clip-path: none;
        
        background: var(--stage);
        color: var(--stage-ink);
        overflow: hidden;
    }

    
}

@media (min-width: 768px) {
    
    .hub-lightbox[open] {
        display: flex;
        flex-direction: column;
        height: min(92vh, 900px);
        background: var(--stage);
        color: var(--stage-ink);
        overflow: hidden;
    }
}




@media (pointer: coarse) {
    .hub-button,
    .hub-input,
    .hub-zeile__haupt,
    .hub-option,
    .hub-hero__zurueck {
        min-height: var(--tap-min);
    }

    
    .hub-zeile form + form .hub-button {
        margin-left: var(--sp-1);
    }
}


.hub-page > .hub-up,
.hub-page > main {
    overflow-x: hidden;
}

table,
pre,
.hub-scrollbar {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}


.hub-zeile__titel,
.hub-meta,
.hub-hint {
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    

    
    .hub-up > div:not([data-gallery-bereich]) > .hub-button {
        width: 100%;
    }

    
    .hub-tabs > a > span:not(.hub-zaehler),
    .hub-mehr > summary > span {
        font-size: clamp(11px, 3vw, var(--fs-mark));
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .hub-tabs > a,
    .hub-mehr > summary {
        padding: var(--sp-1) 2px var(--sp-2);
    }
}








.hub-kachel--gewaehlt {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}


.hub-kachel--gewaehlt::after {
    content: '✓';
    position: absolute;
    top: var(--sp-1);
    right: var(--sp-1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}


.hub-auswahlleiste {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-3);
    margin-top: var(--sp-4);
    background: var(--elevated);
    border-top: 1px solid var(--line);
    border-radius: var(--r-dialog) var(--r-dialog) 0 0;
    box-shadow: var(--shadow);
}













.hub-lightbox__aktion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    width: auto;
    min-width: var(--tap-min);
    height: var(--tap-min);
    margin: 0;
    padding: 0 var(--sp-2);
    border: 0;
    border-radius: var(--tap-min);
    background: none;
    color: rgb(255 255 255 / .9);
    font: inherit;
    font-size: var(--fs-meta);
    font-weight: 600;
    cursor: pointer;
}
























.hub-lightbox__info {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-menu);
    display: grid;
    align-content: start;
    gap: var(--sp-4);
    max-height: min(75%, 680px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding:
        var(--sp-4)
        calc(var(--sp-4) + env(safe-area-inset-right))
        calc(var(--sp-4) + env(safe-area-inset-bottom))
        calc(var(--sp-4) + env(safe-area-inset-left));
    border-radius: var(--r-dialog) var(--r-dialog) 0 0;
    background: var(--elevated);
    color: var(--text);
    box-shadow: var(--sh-overlay);
}



@media (min-width: 768px) {
    

    
    .hub-lightbox--info .hub-lightbox__buehne,
    .hub-lightbox--info .hub-lightbox__leiste {
        margin-right: min(400px, 100%);
    }

    .hub-lightbox--info .hub-lightbox__kopf {
        right: min(400px, 100%);
    }
}



.hub-lightbox__infokopf .hub-untertitel {
    margin: 0;
}




















.hub-lightbox__info .hub-kommentare {
    max-height: none;
    overflow: visible;
    color: var(--text);
}










.hub-lightbox__ersatz {
    margin: 0;
    padding: var(--sp-6);
    color: rgb(255 255 255 / .88);
    font-size: var(--fs-body);
    text-align: center;
}





.hub-uhren {
    display: flex;
    gap: var(--sp-6);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    background: var(--surface);
}



.hub-uhr__wo {
    font-size: var(--fs-mark);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
}

.hub-uhr__versatz {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.hub-uhr__zeit {
    font-size: var(--fs-card);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}





.hub-datei {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}


.hub-datei__feld {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.hub-datei__knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    
    min-height: var(--tap-min);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-control);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--d-fade) var(--ease), color var(--d-fade) var(--ease);
}

.hub-datei__knopf:hover {
    border-color: var(--accent);
    color: var(--accent);
}


.hub-datei__feld:focus-visible + .hub-datei__knopf {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}


.hub-datei__name {
    min-width: 0;
    font-size: var(--fs-meta);
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}





.hub-titelwahl {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.hub-titelwahl__feld {
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: var(--r-field);
    overflow: hidden;
}

.hub-titelwahl__feld input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip-path: inset(50%);
}

.hub-titelwahl__feld img,
.hub-titelwahl__keins {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: var(--r-field);
    background: var(--surface-muted);
    color: var(--text-2);
    font-size: var(--fs-mark);
    transition: border-color var(--d-fade) var(--ease);
}

.hub-titelwahl__feld:hover img,
.hub-titelwahl__feld:hover .hub-titelwahl__keins {
    border-color: var(--line);
}


.hub-titelwahl__feld input:checked + img,
.hub-titelwahl__feld input:checked + .hub-titelwahl__keins {
    border-color: var(--accent);
}

.hub-titelwahl__feld input:checked ~ img::after {
    content: '';
}

.hub-titelwahl__feld:has(input:checked)::after {
    content: '✓';
    position: absolute;
    right: 4px;
    bottom: 3px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    line-height: 1;
}

.hub-titelwahl__feld input:focus-visible + img,
.hub-titelwahl__feld input:focus-visible + .hub-titelwahl__keins {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}





.hub-beisteuern {
    border: 1px solid var(--accent);
    background: var(--accent-soft);
}


.hub-wunsch {
    border-color: var(--line);
}

.hub-wunsch__text {
    min-height: 7.5rem;
    resize: vertical;
}

.hub-wunsch__wahl {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.hub-wunsch__option {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    min-height: var(--tap-min);
    padding: var(--sp-3) var(--sp-4);
    border: 1.5px solid var(--line);
    border-radius: var(--r-control);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--d-fade) var(--ease), background-color var(--d-fade) var(--ease);
}

.hub-wunsch__option input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.15rem 0 0;
    accent-color: var(--akzent-warm-ink);
}

.hub-wunsch__option > span {
    display: grid;
    gap: 2px;
}

.hub-wunsch__option:has(input:checked) {
    
    border-color: var(--akzent-warm-ink);
    box-shadow: inset 0 0 0 1px var(--akzent-warm-ink);
    background: var(--ton-orange);
}

.hub-wunsch__option:has(input:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}


.hub-wunsch__senden--privat,
.hub-wunsch__senden--alle {
    display: none;
}

@supports selector(:has(*)) {
    .hub-wunsch__senden--neutral {
        display: none;
    }

    .hub-wunsch__form:has(input[value='couple_only']:checked) .hub-wunsch__senden--privat,
    .hub-wunsch__form:has(input[value='event_guests']:checked) .hub-wunsch__senden--alle {
        display: inline;
    }
}

.hub-wunsch__liste {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-wunsch__karte {
    padding: var(--sp-4);
    border: 1px solid var(--line-card);
    border-radius: var(--r-card);
    background: var(--surface);
}

.hub-wunsch__inhalt {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-sub);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.hub-uploadfortschritt--aktiv:not([hidden]) {
    position: fixed;
    z-index: var(--z-menu);
    left: calc(16px + env(safe-area-inset-left));
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    max-width: 560px;
    margin-inline: auto;
    padding: var(--sp-4) var(--sp-4);
    border-radius: var(--r-card);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    font-size: var(--fs-meta);
}



.hub-beitrag img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--r-field);
    order: -1;
}

.hub-beitrag__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}










.hub-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: #fff;
}

.hub-qr__bild img {
    display: block;
    width: 160px;
    height: 160px;
    
    image-rendering: pixelated;
}

.hub-qr__text {
    margin: 0;
    max-width: 22ch;
    color: #2c2a28;
    font-size: var(--fs-meta);
    text-align: center;
}





.hub-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 240px;
    padding: var(--sp-6);
    border-radius: var(--r-card);
    color: #fff;
}

.hub-hero__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    
    object-fit: cover;
}


.hub-hero__schleier {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.1) 30%,
            rgb(0 0 0 / 0.6) 66%, rgb(0 0 0 / 0.94) 100%);
}

.hub-hero__oben,
.hub-hero__unten {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.hub-hero__oben {
    margin-bottom: auto;
}

.hub-hero__unten {
    align-items: flex-end;
    
    flex-wrap: wrap;
}

.hub-hero__links {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}


.hub-hero__zurueck {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: var(--tap-min);
    padding: 0 var(--sp-3);
    border-radius: 999px;
    
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: var(--fs-meta);
    font-weight: 600;
    text-decoration: none;
}

.hub-hero__marke,
.hub-bildkachel__marke {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    
    min-width: 0;
    overflow: hidden;
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.hub-hero__pille,

.hub-bildkachel__pille {
    flex: none;
    
    max-width: 100%;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-tag);
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-meta);
    font-weight: 600;
}

.hub-hero__wort {
    min-width: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}


.hub-hero__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.hub-hero__knopf {
    display: inline-flex;
    align-items: center;
    
    gap: var(--sp-2);
    
    min-height: var(--tap-min);
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: var(--r-control);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font: inherit;
    font-size: var(--fs-control);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--d-fade) var(--ease);
}

.hub-hero__knopf:hover,
.hub-hero__knopf:focus-visible {
    background: rgba(255, 255, 255, 0.28);
}

.hub-hero__titel {
    margin: 0;
    color: inherit;
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    line-height: 1.02;
}

.hub-hero__unter,
.hub-bildkachel__unter {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-meta);
    
    color: rgba(255, 255, 255, 0.88);
}



.hub-bildkachel {
    position: relative;
    overflow: hidden;
    display: block;
    min-height: 220px;
    border-radius: var(--r-card);
    color: #fff;
    text-decoration: none;
}

.hub-bildkachel__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--d-up) var(--ease);
}


@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hub-bildkachel:hover .hub-bildkachel__bild {
        transform: scale(1.04);
    }
}


.hub-bildkachel__schleier {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.1) 30%,
            rgb(0 0 0 / 0.62) 62%, rgb(0 0 0 / 0.92) 100%);
}


.hub-bildkachel--ohne-bild .hub-bildkachel__schleier {
    background: linear-gradient(180deg,
        rgb(0 0 0 / 0) 0%,
        rgb(0 0 0 / 0) 55%,
        rgb(0 0 0 / 0.38) 100%);
}

.hub-bildkachel__inhalt {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 220px;
    padding: var(--sp-4);
}

.hub-bildkachel__oben {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: auto;
}

.hub-bildkachel__wort {
    display: block;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.hub-bildkachel__titel {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-section);
    line-height: 1.05;
}

.hub-bildkachel__balken {
    display: block;
    overflow: hidden;
    height: 6px;
    margin-top: var(--sp-3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.28);
}

.hub-bildkachel__balken span {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: #fff;
}


.hub-bildkachel:focus-visible,
.hub-hero__zurueck:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgb(0 0 0 / 0.7);
}




.hub-naechster {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow);
}


.hub-home__suche {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--h-input);
    margin-top: var(--sp-4);
    padding: 0 var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-field);
    background: var(--surface);
    color: var(--text-2);
    text-decoration: none;
}


.hub-heute__jetzt {
    display: block;
    color: inherit;
    text-decoration: none;
}

.hub-heute__jetzt .hub-naechster__leib,
.hub-heute__jetzt .hub-naechster__titel,
.hub-heute__jetzt .hub-naechster__danach {
    display: block;
}

.hub-naechster__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
}








.hub-naechster__marke {
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hub-naechster__zeit {
    font-size: var(--fs-meta);
    font-weight: 600;
    
    font-variant-numeric: tabular-nums;
}

.hub-naechster__leib {
    padding: var(--sp-4);
}

.hub-naechster__titel {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-section);
    line-height: 1.15;
}

.hub-naechster__uhr {
    margin-right: var(--sp-2);
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}


.hub-naechster__danach {
    max-width: none;
    margin: var(--sp-3) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line-soft);
    color: var(--text-2);
    font-size: var(--fs-meta);
}


.hub-uhren--auf-bild {
    margin-top: 0;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}



.hub-titelwahl__gitter {
    display: grid;
    
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.hub-titelwahl__kachel {
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--r-field);
    background: none;
    cursor: pointer;
}

.hub-titelwahl__kachel img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}


.hub-titelwahl__kachel--gesetzt {
    position: relative;
    border-color: var(--accent);
}

.hub-titelwahl__kachel--gesetzt::after {
    position: absolute;
    top: 2px;
    right: 2px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: var(--accent);
    color: var(--on-accent);
    content: '✓';
    font-size: 12px;
    font-weight: 600;
}

.hub-titelwahl__kachel:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}



.hub-zeichenwahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.hub-zeichenwahl__feld {
    cursor: pointer;
}


.hub-zeichenwahl__feld input {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
}

.hub-zeichenwahl__kachel {
    display: grid;
    place-items: center;
    
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--text-2);
}

.hub-zeichenwahl__feld input:checked + .hub-zeichenwahl__kachel {
    border-color: var(--accent);
    
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.hub-zeichenwahl__feld input:focus-visible + .hub-zeichenwahl__kachel {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}




.hub-wartend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}

.hub-wartend__karte {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
}

.hub-wartend__bild {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-field);
    background: var(--surface-muted);
}




@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-property: opacity, color, background-color, border-color, box-shadow !important;
        transition-duration: 120ms !important;
    }

    .hub-feststell {
        transition: none !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}




.hub-anhaenge {
    flex-basis: 100%;
    margin: 0;
    
    padding: 0 0 0 calc(32px + var(--sp-3));
    list-style: none;
}

.hub-anhaenge__zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-height: 32px;
}


.hub-anhaenge__name {
    min-width: 0;
    overflow: hidden;
    color: var(--ink-mute);
    font-size: var(--fs-meta);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-anhaenge__name:hover,
.hub-anhaenge__name:focus-visible {
    color: var(--ink);
    text-decoration: underline;
}

.hub-anhang-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}


.hub-anhang-form .hub-input {
    flex: 1 1 180px;
    min-width: 0;
}

.hub-anhang-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--line-soft);
}

.hub-anhang-zeile__titel {
    flex: 1 1 55%;
    min-width: 0;
    font-size: var(--fs-control);
}













.hub-blogbeitrag__titel {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-section);
    
    font-weight: var(--fw-display);
    line-height: var(--zh-section);
    letter-spacing: var(--lw-section);
}










.hub-kommentarform {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.hub-kommentarform .hub-input {
    flex: 1 1 200px;
    min-width: 0;
}












.hub-reise-heute__kopf h2 {
    margin: var(--sp-1) 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 5vw, 2.35rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.hub-reise-heute__taglink,
.hub-reise-kompakt__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: var(--tap-min);
    color: var(--accent);
    font-size: var(--fs-control);
    font-weight: 600;
    text-decoration: none;
}



.hub-reise-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-reise-timeline__punkt {
    display: grid;
    grid-template-columns: 58px 18px minmax(0, 1fr);
    min-height: 92px;
}

.hub-reise-timeline__zeit {
    padding: var(--sp-1) var(--sp-2) var(--sp-4) 0;
    color: var(--text-2);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.hub-reise-timeline__zeit time {
    display: block;
    color: var(--text);
    font-size: var(--fs-control);
    font-weight: 600;
}

.hub-reise-timeline__zeit span {
    display: block;
    margin-top: 2px;
}

.hub-reise-timeline__linie {
    position: relative;
    display: flex;
    justify-content: center;
}







.hub-reise-timeline__linie > span {
    position: relative;
    z-index: var(--z-lift);
    width: 9px;
    height: 9px;
    margin-top: 8px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}










.hub-reise-timeline__laeuft {
    display: block;
    margin-top: 2px;
    color: var(--akzent-warm-ink);
    font-size: var(--fs-mark);
    font-weight: 600;
    letter-spacing: var(--lw-mark);
    text-transform: uppercase;
}





.hub-reise-timeline__inhalt {
    min-width: 0;
    padding: 0 0 var(--sp-4) var(--sp-3);
}



.hub-reise-timeline__titelzeile h3 {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.hub-reise-timeline__beschreibung {
    max-width: 58ch;
    margin: var(--sp-2) 0 0;
    color: var(--text-2);
    font-size: var(--fs-control);
    line-height: 1.45;
}



.hub-reise-kontextaktionen > a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: var(--tap-min);
    padding: 0 var(--sp-3);
    border-radius: var(--r-control);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-meta);
    font-weight: 600;
    text-decoration: none;
}

.hub-inline-mehr {
    position: relative;
    flex: none;
}

.hub-inline-mehr > summary {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: 50%;
    color: var(--text-2);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    letter-spacing: .08em;
}

.hub-inline-mehr > summary::-webkit-details-marker {
    display: none;
}

.hub-inline-mehr > summary:hover,
.hub-inline-mehr > summary:focus-visible {
    background: var(--surface-muted);
}

.hub-inline-mehr__blatt {
    position: absolute;
    top: calc(100% + var(--sp-1));
    right: 0;
    z-index: var(--z-popover);
    min-width: min(310px, calc(100vw - 40px));
    padding: var(--sp-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--elevated);
    box-shadow: var(--shadow);
}






.hub-inline-mehr:not([open]) > .hub-inline-mehr__blatt {
    display: none;
}

.hub-inline-mehr__blatt > span {
    display: grid !important;
    gap: var(--sp-2) !important;
}

.hub-inline-mehr__blatt form,
.hub-inline-mehr__blatt .hub-button,
.hub-inline-mehr__blatt .hub-input {
    width: 100%;
    max-width: none !important;
}



.hub-reise-kompakt__karte {
    display: flex;
    gap: var(--sp-3);
    min-width: 0;
    padding: var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
}

.hub-reise-kompakt__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent);
}



.hub-reise-kompakt__bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.hub-reise-kompakt__inhalt :is(h2, h3) {
    margin: var(--sp-1) 0;
    font-size: var(--fs-body);
    line-height: 1.25;
}

.hub-reise-kompakt__zeit {
    margin: var(--sp-1) 0 0;
    color: var(--text);
    font-size: var(--fs-control);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


@media (max-width: 767px) {
    .hub-reise-neu[open]::before {
        position: fixed;
        inset: 0;
        z-index: var(--z-sheet-backdrop);
        background: rgb(0 0 0 / .28);
        content: '';
    }

    .hub-reise-neu[open] > summary {
        position: relative;
        z-index: var(--z-sheet-trigger);
        
        transform: rotate(45deg);
    }

    .hub-reise-neu__blatt {
        position: fixed;
        left: var(--sp-3);
        right: var(--sp-3);
        bottom: calc(82px + env(safe-area-inset-bottom));
        z-index: var(--z-bottom-bar-global);
        display: grid;
        min-width: 0;
        max-height: min(70vh, 560px);
        overflow-y: auto;
        padding: var(--sp-3);
        border-radius: var(--r-dialog);
        background: var(--elevated);
        box-shadow: var(--shadow);
        animation: hubPop var(--d-pop) var(--ease) both;
    }

    .hub-reise-neu__blatt::before {
        display: block;
        width: 38px;
        height: 4px;
        margin: 0 auto var(--sp-2);
        border-radius: 9px;
        background: var(--line);
        content: '';
    }

    .hub-reise-neu__blatt strong {
        padding: var(--sp-2);
        font-size: var(--fs-sub);
    }

    .hub-reise-neu__blatt a {
        min-height: 52px;
        padding: 0 var(--sp-3);
        font-size: var(--fs-body);
    }

    

    

    .hub-reise-timeline__punkt {
        grid-template-columns: 48px 16px minmax(0, 1fr);
    }

    .hub-reise-timeline__zeit {
        padding-right: var(--sp-1);
    }

    .hub-reise-timeline__inhalt {
        padding-left: var(--sp-2);
    }
}

@media (max-width: 360px) {
    

    .hub-reise-heute__taglink {
        justify-self: start;
    }

    .hub-reise-timeline__punkt {
        grid-template-columns: 44px 14px minmax(0, 1fr);
    }

    .hub-reise-kontextaktionen > a {
        width: 100%;
    }

    
    .hub-reise-heute__leer-aktionen > a {
        width: 100%;
    }
}




.hub-naechster__aktionen > a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: var(--tap-min);
    padding: 0 var(--sp-3);
    border-radius: var(--r-control);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-control);
    font-weight: 600;
    text-decoration: none;
}



.hub-naechster__mehr > summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--text-2);
    font-size: var(--fs-control);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.hub-naechster__mehr > summary::-webkit-details-marker {
    display: none;
}

.hub-naechster__mehrblatt {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line-soft);
}

@media (max-width: 480px) {
    .hub-naechster__aktionen > a {
        flex: 1 1 140px;
    }
}




@media (max-width: 767px) {
    .hub-tabs {
        padding-left: calc(var(--sp-1) + env(safe-area-inset-left));
        padding-right: calc(var(--sp-1) + env(safe-area-inset-right));
        
        padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(1.25);
        backdrop-filter: blur(18px) saturate(1.25);
    }


    
    .hub-page.hub-page--reise > .hub-up,
    .hub-page.hub-page--reise > main {
        padding-bottom: var(--sp-12);
    }

    .hub-mehr[open]::before {
        position: fixed;
        inset: 0;
        z-index: var(--z-sheet-backdrop);
        background: rgb(0 0 0 / .28);
        content: '';
    }

    .hub-mehr[open] > summary {
        position: relative;
        z-index: var(--z-sheet-trigger);
    }

    
    .hub-tabs__plus[open] > summary {
        z-index: var(--z-veil);
        opacity: 0;
        pointer-events: none;
    }

    .hub-mehr__blatt {
        padding-bottom: max(var(--sp-6), calc(var(--sp-4) + env(safe-area-inset-bottom)));
    }

    
    body:has(.hub-reise-mehr[open]) .hub-reise-neu,
    body:has(.hub-anlegen[open]) .hub-reise-neu,
    body:has(.hub-mehr[open]) .hub-reise-neu {
        display: none;
    }
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
    @media (max-width: 767px) {
        .hub-oben,
        .hub-tabs,
        .hub-reise-tabs {
            background: var(--surface);
        }
    }
}



.hub-reise-mehr {
    position: relative;
    flex: 1;
}

.hub-reise-mehr > summary {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 48px;
    padding: 0 2px;
    border-radius: var(--r-control);
    color: var(--text-2);
    font-size: var(--fs-mark);
    text-align: center;
    cursor: pointer;
    list-style: none;
}

.hub-reise-mehr > summary::-webkit-details-marker {
    display: none;
}

.hub-reise-mehr__blatt {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bottom-bar-global);
    max-height: 82dvh;
    overflow-y: auto;
    
    padding: var(--sp-2) 0 calc(var(--sp-6) + env(safe-area-inset-bottom));
    border-top-left-radius: var(--r-sheet);
    border-top-right-radius: var(--r-sheet);
    background: var(--elevated);
    box-shadow: var(--sh-sheet);
    animation: hubPop var(--d-pop) var(--ease) both;
}

.hub-reise-mehr:not([open]) > .hub-reise-mehr__blatt {
    display: none;
}

.hub-reise-mehr[open]::before {
    position: fixed;
    inset: 0;
    z-index: var(--z-sheet-backdrop);
    background: var(--sheet-backdrop-color);
    content: '';
}

.hub-reise-mehr[open] > summary {
    z-index: var(--z-sheet-trigger);
    color: var(--accent);
}

.hub-reise-mehr__titel {
    padding: var(--sp-2) var(--sp-4);
    font-weight: 600;
}

.hub-reise-mehr__eintrag {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--h-row);
    padding: var(--sp-2) var(--sp-4);
    color: var(--text);
    font-size: var(--fs-sub);
    text-decoration: none;
}

.hub-reise-mehr__eintrag:hover,
.hub-reise-mehr__eintrag:focus-visible {
    background: var(--surface-muted);
}




.hub-reise-bearbeiten {
    max-width: 720px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
}

.hub-reise-bearbeiten > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding: 0 var(--sp-4);
    color: var(--text-2);
    font-size: var(--fs-control);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.hub-reise-bearbeiten > summary::-webkit-details-marker {
    display: none;
}

.hub-reise-bearbeiten[open] > summary {
    color: var(--text);
    border-bottom: 1px solid var(--line-soft);
}

.hub-reise-bearbeiten__inhalt {
    padding: 0 var(--sp-4) var(--sp-4);
}

@media (max-width: 767px) {
    
    .hub-page--reise .hub-unternav {
        display: none;
    }

    .hub-reise-bearbeiten {
        margin-top: var(--sp-3);
    }
}








.hub-reise-plan__kopf h2 {
    margin: var(--sp-1) 0 0;
    font-family: var(--font-display);
    font-size: var(--fs-section);
    font-weight: 400;
    letter-spacing: -0.03em;
}

.hub-reise-tage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-reise-tag {
    display: grid;
    align-content: start;
    gap: var(--sp-2);
    min-height: 132px;
    padding: var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition:
        border-color var(--d-fade) var(--ease),
        background-color var(--d-fade) var(--ease),
        transform var(--d-fade) var(--ease);
}

.hub-reise-tag:hover,
.hub-reise-tag:focus-visible {
    border-color: var(--line);
    background: var(--surface-muted);
}

@media (hover: hover) and (pointer: fine) {
    .hub-reise-tag:hover {
        transform: translateY(-2px);
    }
}


.hub-reise-tag--heute {
    border-color: transparent;
    background: var(--navy);
    color: var(--on-navy);
}

.hub-reise-tag--heute .hub-reise-tag__oben,
.hub-reise-tag--heute .hub-meta {
    color: var(--navy-item);
}

.hub-reise-tag--ausserhalb {
    opacity: .68;
}

.hub-reise-tag__oben {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    color: var(--text-2);
    font-size: var(--fs-mark);
    font-weight: 600;
    letter-spacing: var(--lw-mark);
    text-transform: uppercase;
}

.hub-reise-tag > strong {
    font-size: var(--fs-body);
    letter-spacing: -0.015em;
}

@media (max-width: 767px) {
    .hub-reise-tage {
        display: flex;
        gap: var(--sp-3);
        margin-right: calc(-1 * var(--sp-4));
        padding-right: var(--sp-4);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .hub-reise-tage::-webkit-scrollbar {
        display: none;
    }

    .hub-reise-tage > li {
        flex: 0 0 min(72vw, 250px);
        scroll-snap-align: start;
    }

    .hub-reise-tag {
        min-height: 124px;
    }
}



.hub-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-sheet-backdrop);
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: var(--sheet-backdrop-color);
    -webkit-backdrop-filter: blur(var(--sheet-backdrop-blur));
    backdrop-filter: blur(var(--sheet-backdrop-blur));
    cursor: default;
}

details:not([open]) > .hub-sheet-backdrop {
    display: none;
}

.hub-mehr[open]::before,
.hub-reise-mehr[open]::before,
.hub-reise-neu[open]::before {
    display: none;
}




.turbo-progress-bar {
    z-index: var(--z-progress);
    height: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
    box-shadow: none;
}

@media (max-width: 767px) {
    .hub-tabs > a,
    .hub-tabs > .hub-mehr,
    .hub-reise-tabs > a,
    .hub-reise-tabs > .hub-reise-mehr {
        min-width: 0;
    }

    .hub-tabs > a > span:not(.hub-zaehler),
    .hub-mehr > summary > span,
    .hub-reise-tabs > a > span,
    .hub-reise-mehr > summary > span {
        max-width: 100%;
        overflow: hidden;
        
        font-size: clamp(11px, 3.2vw, var(--fs-mark));
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}




.hub-reise-neu__sektion {
    border-top: 1px solid var(--line-soft);
}

.hub-reise-neu__sektion > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 52px;
    padding: 0 var(--sp-2);
    border-radius: var(--r-control);
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.hub-reise-neu__sektion > summary::-webkit-details-marker {
    display: none;
}

.hub-reise-neu__sektion[open] > summary {
    color: var(--accent);
    font-weight: 600;
}

.hub-reise-neu__formular,
.hub-reise-neu__upload {
    display: grid;
    gap: var(--sp-2);
    padding: 0 var(--sp-2) var(--sp-3);
}

.hub-reise-neu__formular .hub-button {
    width: 100%;
}

.hub-reise-neu__upload .hub-datei__knopf {
    width: 100%;
    justify-content: center;
}

.hub-reise-neu__upload .hub-upload__zeile {
    flex-wrap: wrap;
}




.hub-reise-planverwaltung {
    max-width: 720px;
}

.hub-reise-planverwaltung > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap-min);
    color: var(--text-2);
    font-size: var(--fs-control);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.hub-reise-planverwaltung > summary::-webkit-details-marker {
    display: none;
}

.hub-reise-planverwaltung[open] > summary {
    color: var(--text);
}

.hub-reise-planverwaltung__formular {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
}

.hub-reise-vorbereitung h2 {
    margin: var(--sp-1) 0 0;
    font-family: var(--font-display);
    font-size: var(--fs-section);
    font-weight: 400;
    letter-spacing: -0.03em;
}

@media (max-width: 520px) {
    

    .hub-reise-planverwaltung__formular .hub-field,
    .hub-reise-planverwaltung__formular .hub-button {
        width: 100%;
    }
}




.hub-netzstatus {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-field);
    background: var(--elevated);
    color: var(--text);
    box-shadow: var(--shadow);
    font-size: var(--fs-meta);
}

.hub-netzstatus[hidden] {
    display: none;
}

.hub-netzstatus > span {
    color: var(--error);
    font-size: .7em;
}

@media (max-width: 767px) {
    
    .hub-page--reise main > nav.hub-meta[aria-label='Pfad'] {
        display: none;
    }

    .hub-page--reise .hub-hero {
        min-height: 196px;
        padding: var(--sp-4);
    }

    .hub-page--reise .hub-hero__titel {
        font-size: clamp(2rem, 10vw, var(--fs-hero));
    }
}



.hub-mehr {
    flex: 1;
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hub-mehr__blatt,
    .hub-reise-mehr__blatt,
    .hub-reise-neu__blatt {
        animation: hubFade var(--d-fade) var(--ease) both;
    }

    .hub-reise-tag:hover {
        transform: none;
    }
}


.hub-reise-tabs > a[aria-current='page'] {
    background: transparent;
    color: var(--accent);
}




.hub-device-activation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
}

.hub-device-activation h3 {
    margin: var(--sp-1) 0 var(--sp-2);
    font-size: var(--fs-body);
}

.hub-device-activation__qr {
    display: grid;
    place-items: center;
    width: 184px;
    min-height: 184px;
    padding: var(--sp-3);
    border-radius: var(--r-card);
    background: #fff;
}

.hub-device-activation__qr img {
    display: block;
    max-width: 100%;
    height: auto;
}

.hub-device-activation__link {
    grid-column: 1 / -1;
}

.hub-device-row {
    gap: var(--sp-3);
}

.hub-device-row > form {
    flex: none;
}

.hub-geraet-verbinden {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding:
        max(var(--sp-4), env(safe-area-inset-top))
        calc(var(--sp-4) + env(safe-area-inset-right))
        max(var(--sp-4), env(safe-area-inset-bottom))
        calc(var(--sp-4) + env(safe-area-inset-left));
}

.hub-geraet-verbinden__karte {
    width: min(100%, 460px);
    padding: clamp(24px, 6vw, 44px);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-dialog);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.hub-geraet-verbinden__marke {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    gap: var(--sp-2);
    margin-bottom: var(--sp-8);
    color: var(--text);
    font-size: var(--fs-control);
    font-weight: 600;
    text-decoration: none;
}

.hub-geraet-verbinden__karte h1 {
    margin: var(--sp-2) 0 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.hub-geraet-verbinden__formular {
    display: grid;
    gap: var(--sp-3);
}

.hub-geraet-verbinden__primaer {
    width: 100%;
    min-height: 50px;
}

@media (max-width: 640px) {
    .hub-device-activation {
        grid-template-columns: 1fr;
    }

    .hub-device-activation__qr {
        width: min(100%, 230px);
        min-height: 0;
        justify-self: center;
    }

    .hub-device-activation__link {
        grid-column: auto;
    }

    .hub-device-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .hub-device-row > form,
    .hub-device-row > form .hub-button {
        width: 100%;
    }

    .hub-geraet-verbinden {
        align-items: start;
        
        padding-top: calc(var(--sp-8) + env(safe-area-inset-top));
    }

    .hub-geraet-verbinden__karte {
        padding: var(--sp-4);
        border: 0;
        box-shadow: none;
        background: transparent;
    }
}







body {
    background: var(--bg);
    font-family: var(--font);
    text-rendering: optimizeLegibility;
}


h2,
h3 {
    font-family: var(--font);
}

h1,
.hub-eigenname {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
}

h1,
h2,
h3 {
    text-wrap: balance;
}

.hub-meta,
.hub-hint {
    letter-spacing: normal;
}


.hub-rubrik {
    letter-spacing: var(--lw-mark);
}


.hub-button {
    min-height: var(--h-button);
    border-radius: var(--r-button);
    font-weight: 600;
}

.hub-button--quiet {
    border-color: var(--line);
    background: var(--surface);
}

.hub-input {
    min-height: var(--h-input);
    border-radius: var(--r-input);
    border-color: var(--line-strong);
    background: var(--feld);
    font-family: var(--font);
    
    font-size: var(--fs-sub);
}

.hub-card {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-flach);
}

.hub-card--flat {
    box-shadow: none;
}



.hub-oben__profil {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: 50%;
    color: var(--text);
    text-decoration: none;
}

.hub-oben__profil .hub-avatar {
    box-shadow: 0 0 0 1px var(--material-line);
}

.hub-mehr__darstellung {
    padding: 0 var(--sp-4) var(--sp-3);
}

@media (max-width: 767px) {
    
    
    .hub-oben__titel {
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -.01em;
        color: var(--text-strong);
    }

    
    .hub-oben__knopf {
        width: var(--tap-min);
        height: var(--tap-min);
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--text);
    }

    .hub-oben__knopf:active,
    .hub-oben__profil:active {
        background: var(--surface-muted);
        transform: scale(.96);
    }

    .hub-page > .hub-up,
    .hub-page > main {
        padding-left: calc(var(--sp-4) + env(safe-area-inset-left));
        padding-right: calc(var(--sp-4) + env(safe-area-inset-right));
    }
}



@media (max-width: 767px) {
    
    .hub-tabs {
        min-height: calc(var(--h-tab) + env(safe-area-inset-bottom));
        padding:
            4px calc(6px + env(safe-area-inset-right))
            calc(4px + env(safe-area-inset-bottom))
            calc(6px + env(safe-area-inset-left));
        border-top: 1px solid var(--material-line);
        background: var(--material-strong);
        -webkit-backdrop-filter: blur(12px) saturate(1.45);
        backdrop-filter: blur(12px) saturate(1.45);
    }

    
    .hub-tabs > a,
    .hub-mehr > summary {
        justify-content: center;
        
        gap: 4px;
        min-height: var(--h-tab);
        padding: 8px 2px 4px;
        border-radius: 12px;
        color: var(--text-3);
        font-size: var(--fs-mark);
        font-weight: 500;
        letter-spacing: .01em;
    }

    .hub-tabs > a svg,
    .hub-mehr > summary svg {
        width: 25px;
        height: 25px;
        stroke-width: 1.7;
    }

    
    .hub-tabs > a[aria-current='page'],
    .hub-tabs > details > summary[aria-current='page'] {
        background: transparent;
        color: var(--text-strong);
        font-weight: 600;
    }

    

    
    .hub-tabs__plus > summary {
        align-self: center;
        justify-content: center;
        gap: 0;
        
        width: 58px;
        min-height: 58px;
        margin-top: -16px;
        margin-bottom: -2px;
        border-radius: 19px;
        background: var(--plus-verlauf);
        color: var(--plus-zeichen);
        box-shadow: 0 6px 16px rgb(222 120 0 / 0.30);
    }

    
    .hub-tabs__plus > summary > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .hub-tabs__plus > summary svg {
        width: 27px;
        height: 27px;
        stroke-width: 2;
    }

    .hub-tabs__plus > summary::-webkit-details-marker {
        display: none;
    }

    .hub-tabs__plus > summary:active {
        transform: scale(.96);
    }

    .hub-tabs > a:active,
    .hub-mehr > summary:active {
        background: var(--surface-muted);
        transform: scale(.97);
    }

    
    .hub-mehr__blatt {
        border: 0;
        border-radius: var(--r-sheet) var(--r-sheet) 0 0;
        background: var(--elevated);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: var(--sh-sheet);
    }

    .hub-mehr__griff,
    .hub-reise-mehr__blatt::before,
    .hub-reise-neu__blatt::before {
        width: 36px;
        height: 5px;
        border-radius: 999px;
        background: var(--line);
    }

    .hub-mehr__eintrag {
        min-height: 56px;
        border-radius: 12px;
    }

    .hub-mehr__zeichen {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }
}



@media (max-width: 767px) {
    .hub-page--reise > .hub-up {
        padding-top: 0;
    }

    .hub-page--reise .hub-hero--reise {
        width: calc(100% + (2 * var(--sp-4)));
        min-height: 248px;
        margin-left: calc(-1 * var(--sp-4));
        margin-right: calc(-1 * var(--sp-4));
        border-radius: 0 0 26px 26px;
        box-shadow: 0 8px 26px rgb(0 0 0 / .12);
    }

    .hub-hero--reise .hub-hero__bild {
        transform: scale(1.005);
    }

    .hub-hero--reise .hub-hero__schleier {
        background:
            linear-gradient(to bottom, rgb(0 0 0 / .30) 0%, transparent 36%),
            linear-gradient(to top, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .22) 55%, transparent 78%);
    }

    .hub-hero--reise .hub-hero__oben {
        padding:
            var(--sp-4)
            calc(var(--sp-4) + env(safe-area-inset-right))
            0
            calc(var(--sp-4) + env(safe-area-inset-left));
    }

    .hub-hero--reise .hub-hero__unten {
        align-items: end;
        gap: var(--sp-3);
        padding:
            0 calc(var(--sp-4) + env(safe-area-inset-right))
            var(--sp-4)
            calc(var(--sp-4) + env(safe-area-inset-left));
    }

    .hub-hero--reise .hub-hero__titel {
        max-width: 16ch;
        font-family: var(--font-display);
        font-size: var(--fs-page);
        font-weight: var(--fw-display);
        line-height: var(--zh-page);
        letter-spacing: var(--lw-page);
        text-shadow: 0 2px 18px rgb(0 0 0 / .34);
    }

    .hub-hero--reise .hub-hero__marke,
    .hub-hero--reise .hub-hero__unter {
        letter-spacing: normal;
        text-shadow: 0 1px 8px rgb(0 0 0 / .55);
    }

    .hub-hero--reise .hub-hero__marke {
        padding: var(--sp-1) var(--sp-2);
        border-radius: 999px;
        background: rgb(0 0 0 / .22);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        font-size: 12px;
        font-weight: 600;
    }

    .hub-hero--reise .hub-hero__pille {
        min-height: 30px;
        padding: var(--sp-1) var(--sp-3);
        border: 1px solid rgb(255 255 255 / .22);
        border-radius: 999px;
        background: rgb(20 20 22 / .34);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        font-size: 12px;
        font-weight: 600;
    }

    

    

    

    
}

@media (max-width: 390px) {
    .hub-hero--reise .hub-hero__unten {
        align-items: start;
        flex-direction: column;
    }

    

    
}



@media (max-width: 767px) {
    
    .hub-reise-tabs {
        min-height: calc(var(--h-tab) + env(safe-area-inset-bottom));
        padding:
            4px calc(6px + env(safe-area-inset-right))
            calc(4px + env(safe-area-inset-bottom))
            calc(6px + env(safe-area-inset-left));
        border-top: 1px solid var(--material-line);
        background: var(--material);
    }

    
    .hub-reise-tabs > a,
    .hub-reise-mehr > summary {
        min-height: var(--h-tab);
        gap: 3px;
        border-radius: 12px;
        color: var(--text-3);
        font-size: var(--fs-mark);
        font-weight: 500;
    }

    .hub-reise-tabs > a svg,
    .hub-reise-mehr > summary svg {
        width: 25px;
        height: 25px;
        stroke-width: 1.7;
    }

    .hub-reise-tabs > a[aria-current='page'],
    .hub-reise-mehr > summary[aria-current='page'] {
        background: transparent;
        color: var(--text-strong);
        font-weight: 600;
    }

    .hub-reise-tabs > a:active,
    .hub-reise-mehr > summary:active {
        transform: scale(.97);
    }

    .hub-reise-neu {
        right: calc(18px + env(safe-area-inset-right));
        bottom: calc(70px + env(safe-area-inset-bottom));
    }

    .hub-reise-neu > summary {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 1px solid rgb(255 255 255 / .26);
        background: var(--accent);
        color: var(--on-accent);
        box-shadow: 0 9px 24px rgb(0 80 170 / .28);
    }

    .hub-reise-neu > summary:active {
        transform: scale(.94);
    }

    .hub-reise-neu__blatt,
    .hub-reise-mehr__blatt {
        border: 1px solid var(--material-line);
        border-bottom: 0;
        border-radius: var(--r-dialog) var(--r-dialog) 0 0;
        background: var(--material-strong);
        -webkit-backdrop-filter: blur(28px) saturate(1.4);
        backdrop-filter: blur(28px) saturate(1.4);
        box-shadow: 0 -18px 50px rgb(0 0 0 / .14);
    }

    .hub-reise-neu__blatt {
        left: 0;
        right: 0;
        bottom: 0;
        max-height: min(78dvh, 640px);
        padding:
            10px var(--sp-4)
            max(var(--sp-8), calc(var(--sp-4) + env(safe-area-inset-bottom)));
    }

    .hub-reise-neu__blatt a,
    .hub-reise-neu__sektion > summary,
    .hub-reise-mehr__eintrag {
        min-height: 56px;
        border-radius: 13px;
    }

    .hub-reise-mehr__blatt {
        padding-left: var(--sp-2);
        padding-right: var(--sp-2);
    }
}






.hub-reise-heute__kopf h2 {
    font-family: var(--font-display);
    font-size: var(--fs-page);
    font-weight: var(--fw-display);
    line-height: var(--zh-page);
    letter-spacing: var(--lw-page);
}

.hub-reise-heute__taglink {
    font-weight: 600;
}



.hub-reise-timeline__punkt {
    grid-template-columns: 64px 18px minmax(0, 1fr);
    min-height: 108px;
}

.hub-reise-timeline__zeit {
    padding-top: var(--sp-3);
    color: var(--text-2);
    font-size: 12px;
    letter-spacing: 0;
}

.hub-reise-timeline__zeit time {
    font-size: 13px;
    font-weight: 600;
}



.hub-reise-timeline__linie > span {
    width: 12px;
    height: 12px;
    margin-top: 17px;
    border: 2px solid var(--bg);
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

.hub-reise-timeline__inhalt {
    margin: 0 0 var(--sp-3) var(--sp-2);
    padding: var(--sp-4);
    --reise-symbol-breite: 58px;
    --reise-symbol-abstand: var(--sp-3);
    --reise-text-einzug: calc(var(--reise-symbol-breite) + var(--reise-symbol-abstand));
    border: 1px solid var(--line-soft);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow-flach);
}







.hub-reise-timeline__symbol {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent);
}

.hub-reise-timeline__titelzeile h3 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.012em;
}

.hub-reise-timeline__beschreibung {
    margin: var(--sp-3) 0 0 var(--reise-text-einzug);
    color: var(--text-2);
    font-size: 14px;
}



.hub-reise-kontextaktionen > a,
.hub-naechster__aktionen > a {
    min-height: var(--tap-min);
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    
    font-size: var(--fs-meta);
    font-weight: 600;
}

.hub-inline-mehr > summary {
    color: var(--text-2);
    font-size: 0;
    letter-spacing: 0;
}

.hub-inline-mehr > summary::after {
    content: '•••';
    font-size: 14px;
    letter-spacing: .09em;
}

.hub-inline-mehr__blatt {
    border: 1px solid var(--material-line);
    border-radius: 16px;
    background: var(--material-strong);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
}



@media (max-width: 767px) {
    

    

    .hub-reise-heute__kopf h2 {
        font-size: 27px;
    }

    .hub-reise-timeline__punkt {
        grid-template-columns: 48px 16px minmax(0, 1fr);
    }

    .hub-reise-timeline__inhalt {
        margin-left: var(--sp-2);
        padding: var(--sp-3);
    }

    .hub-reise-timeline__symbol {
        width: 34px;
        height: 34px;
    }

    
}

@media (max-width: 360px) {
    .hub-reise-timeline__punkt {
        grid-template-columns: 42px 14px minmax(0, 1fr);
    }

    .hub-reise-timeline__inhalt {
        margin-left: var(--sp-1);
        padding: var(--sp-3);
    }

    .hub-reise-timeline__symbol {
        display: none;
    }

    
}



.hub-naechster {
    max-width: 760px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-flach);
}

.hub-naechster__kopf {
    min-height: 42px;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--line-soft);
    background: transparent !important;
}







.hub-naechster__marke,
.hub-naechster__zeit {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}


.hub-naechster__zeit {
    font-size: var(--fs-meta);
}

.hub-naechster__leib {
    padding: var(--sp-4);
}

.hub-naechster__titel {
    font-family: var(--font);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.hub-naechster__uhr {
    color: var(--text);
}

.hub-naechster__mehr > summary {
    color: var(--text-2);
    font-weight: 500;
}





.hub-reise-kompakt__karte {
    min-height: 116px;
    padding: var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-flach);
}



.hub-reise-kompakt__inhalt :is(h2, h3) {
    margin-top: var(--sp-1);
    font-size: 16px;
    font-weight: 600;
}







.hub-reise-plan__kopf h2 {
    font-family: var(--font);
    font-weight: 600;
}

.hub-reise-tage {
    gap: var(--sp-3);
}

.hub-reise-tag {
    min-height: 116px;
    padding: var(--sp-3);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-flach);
}

.hub-reise-tag--heute {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: var(--accent-soft);
}

.hub-reise-tag__oben {
    letter-spacing: .06em;
}

.hub-reise-tag > strong {
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 767px) {
    

    .hub-reise-tage {
        margin-right: calc(-1 * var(--sp-4));
        padding: 2px var(--sp-4) var(--sp-2) 0;
        scroll-snap-type: x mandatory;
    }

    .hub-reise-tage > li {
        flex: 0 0 132px;
    }

    .hub-reise-tag {
        min-height: 108px;
        scroll-snap-align: start;
    }
}





@media (max-width: 767px) {
    .hub-hero--media {
        width: calc(100% + (2 * var(--sp-4)));
        min-height: 184px;
        margin-left: calc(-1 * var(--sp-4));
        margin-right: calc(-1 * var(--sp-4));
        border-radius: 0 0 26px 26px;
    }

    
    .hub-hero--media .hub-hero__titel {
        font-family: var(--font-display);
        font-size: clamp(29px, 8vw, 38px);
        font-weight: var(--fw-display);
        letter-spacing: -.015em;
    }

    
}

.hub-kachel,
.hub-wartend__bild {
    border-radius: 14px;
}



@media (hover: none) and (pointer: coarse) {
    a,
    button,
    summary {
        transition:
            transform 100ms ease-out,
            background-color 100ms ease-out,
            opacity 100ms ease-out;
    }

    a:active,
    button:not(:disabled):active,
    summary:active {
        opacity: .82;
    }

    .hub-reise-timeline__inhalt:has(a:active),
    .hub-reise-tag:active,
    .hub-home-reise:active {
        transform: scale(.985);
    }
}



@media (min-width: 768px) and (max-width: 1023px) {
    .hub-page > .hub-up,
    .hub-page > main {
        padding-left: var(--sp-6);
        padding-right: var(--sp-6);
    }

    .hub-hero--reise {
        min-height: 300px;
        border-radius: 24px;
    }

    
}



@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    @media (max-width: 767px) {
        .hub-oben,
        .hub-tabs,
        .hub-reise-tabs,
        .hub-mehr__blatt,
        .hub-reise-neu__blatt,
        .hub-reise-mehr__blatt {
            background: var(--surface);
        }
    }
}






.hub-home__kopf {
    display: grid;
    gap: var(--sp-1);
}

.hub-home__kopf h1 {
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: -.045em;
}

.hub-home__datum {
    margin-top: var(--sp-2);
    font-size: 14px;
}

.hub-home .hub-abschnitte {
    max-width: 760px;
}

.hub-home .hub-abschnitt {
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}

.hub-home .hub-abschnitt > .hub-liste {
    overflow: hidden;
    margin-top: 0;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-flach);
}


.hub-home .hub-abschnitt .hub-zeile {
    border-bottom: 1px solid var(--line-soft);
}

.hub-home .hub-abschnitt .hub-zeile:last-child {
    border-bottom: 0;
}

.hub-home .hub-zeile__titel {
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .hub-home {
        padding-top: var(--sp-6) !important;
    }

    .hub-home__kopf h1 {
        font-size: clamp(30px, 9vw, 38px);
        line-height: 1.02;
    }

}





.hub-media-mehr > summary {
    list-style: none;
    cursor: pointer;
}





.hub-media-mehr__eintrag {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--sp-4);
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}





.hub-hero__knopf--primaer {
    background: rgb(255 255 255 / .96);
    color: #111;
}

@media (min-width: 768px) {
    
    .hub-media-mehr__blatt {
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        width: 250px;
        padding: var(--sp-2);
        border: 1px solid var(--material-line);
        border-radius: 16px;
        background: var(--elevated);
        box-shadow: var(--shadow);
    }

    
    .hub-hero:has(.hub-media-mehr[open]) {
        overflow: visible;
    }

    .hub-hero:has(.hub-media-mehr[open]) .hub-hero__bild,
    .hub-hero:has(.hub-media-mehr[open]) .hub-hero__schleier {
        border-radius: inherit;
    }

    

    

    
}

@media (max-width: 767px) {
    .hub-hero--media .hub-hero__knoepfe {
        display: flex;
        gap: var(--sp-2);
        align-items: center;
    }

    .hub-hero--media .hub-hero__knopf {
        min-height: var(--tap-min);
        padding: 0 var(--sp-3);
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
    }

    .hub-media-mehr__blatt {
        position: fixed;
        inset: auto 0 0;
        max-height: 78dvh;
        overflow-y: auto;
        padding:
            10px 10px
            max(var(--sp-8), calc(var(--sp-4) + env(safe-area-inset-bottom)));
        border: 1px solid var(--material-line);
        border-bottom: 0;
        border-radius: var(--r-dialog) var(--r-dialog) 0 0;
        background: var(--material-strong);
        -webkit-backdrop-filter: blur(28px) saturate(1.4);
        backdrop-filter: blur(28px) saturate(1.4);
        box-shadow: 0 -18px 50px rgb(0 0 0 / .14);
    }

    

    
}





.hub-media-event > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 60px;
    padding: var(--sp-3) var(--sp-4);
    list-style: none;
    cursor: pointer;
}









.hub-media-event__status--aktiv {
    background: var(--done);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--done) 14%, transparent);
}

.hub-media-event__inhalt {
    padding: 0 var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--line-soft);
}

.hub-media-event__inhalt > :first-child {
    margin-top: var(--sp-4);
}





.hub-kachel {
    overflow: hidden;
    border-radius: var(--r-foto); 
    background: var(--surface-muted);
}

.hub-kachel img,
.hub-kachel video {
    transition: transform 180ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .hub-kachel:hover img {
        transform: scale(1.018);
    }
}

@media (max-width: 767px) {
    

    .hub-kachel {
        border-radius: 0;
    }

    .hub-zulegen {
        border-radius: var(--r-card);
        background: var(--surface);
    }
}



.hub-liste {
    border-color: var(--line-soft);
}


.hub-zeile {
    min-height: var(--h-row);
}

.hub-zeile--kompakt {
    min-height: 54px;
}

.hub-zeile__haupt {
    min-width: 0;
}

.hub-zeile__titel {
    font-weight: 600;
}

select.hub-input {
    padding-right: 34px;
}



@media (display-mode: standalone) and (max-width: 767px) {
    body {
        min-height: 100dvh;
    }

    .hub-tabs,
    .hub-reise-tabs {
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }
}












.hub-trip-day__untertitel {
    margin: var(--sp-1) 0 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 600;
}





.hub-trip-day__details {
    display: grid;
    gap: var(--sp-1);
    margin: var(--sp-3) 0 0 var(--reise-text-einzug);
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.45;
}




.hub-reise-timeline__inhalt > .hub-trip-day__weg {
    display: block;
    margin: var(--sp-3) 0 0;
    overflow-wrap: anywhere;
}

.hub-trip-day__neu {
    max-width: 760px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-flach);
}

.hub-trip-day__neu > summary,
.hub-trip-places__neu > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 54px;
    padding: 0 var(--sp-4);
    list-style: none;
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}



.hub-trip-day__neu-inhalt,
.hub-trip-places__neu-inhalt {
    padding: var(--sp-4);
    border-top: 1px solid var(--line-soft);
}









.hub-trip-map {
    max-width: 1100px !important;
}

.hub-trip-map__kopf {
    display: grid;
    gap: var(--sp-1);
}

.hub-trip-map__frame {
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-flach);
}

.hub-trip-map__canvas {
    width: 100%;
    height: min(70vh, 720px);
    min-height: 440px;
}

@media (max-width: 767px) {
    .hub-trip-map {
        padding-top: var(--sp-4) !important;
    }

    .hub-trip-map__frame {
        width: calc(100% + (2 * var(--sp-4)));
        margin-left: calc(-1 * var(--sp-4));
        margin-right: calc(-1 * var(--sp-4));
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .hub-trip-map__canvas {
        height: 64dvh;
        min-height: 430px;
    }
}







.hub-trip-places__neu {
    max-width: 760px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-flach);
}






.hub-reise-mehr > summary[aria-current='page'] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}




.hub-trip-index__kopf {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--sp-4);
}

.hub-trip-index__kopf h1 {
    margin-top: var(--sp-1);
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: -.045em;
}

.hub-trip-index__neu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap-min);
    padding: 0 var(--sp-4);
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgb(0 80 170 / .16);
}

.hub-trip-index .hub-bildkachel {
    min-height: 250px;
    border-radius: 20px;
    box-shadow: 0 7px 22px rgb(0 0 0 / .10);
}

.hub-trip-index .hub-bildkachel__inhalt {
    min-height: 250px;
    padding: var(--sp-4);
}

.hub-trip-index .hub-bildkachel__titel {
    font-family: var(--font);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.035em;
}

.hub-trip-index .hub-bildkachel__marke,
.hub-trip-index .hub-bildkachel__pille {
    border-radius: var(--r-tag);
    background: rgb(18 18 20 / .28);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}


.hub-trip-index .hub-bildkachel__pille {
    color: #fff;
}


.hub-trip-index .hub-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

@media (max-width: 767px) {
    .hub-trip-index {
        padding-top: var(--sp-6) !important;
    }

    .hub-trip-index__kopf {
        align-items: center;
    }

    .hub-trip-index__kopf h1 {
        font-size: var(--fs-page);
    }

    .hub-trip-index__neu {
        width: var(--tap-min);
        height: var(--tap-min);
        padding: 0;
        border-radius: 50%;
    }

    .hub-trip-index__neu > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .hub-trip-index .hub-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
        margin-top: var(--sp-6);
    }

    .hub-trip-index .hub-bildkachel,
    .hub-trip-index .hub-bildkachel__inhalt {
        min-height: 236px;
    }
}













.hub-trip-blog__neu,
.hub-trip-blogpost__verwaltung {
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-flach);
}

.hub-trip-blog__neu > summary,
.hub-trip-blogpost__verwaltung > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 54px;
    padding: 0 var(--sp-4);
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
}

.hub-trip-blog__neu-form,
.hub-trip-blogpost__verwaltung-inhalt {
    display: grid;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border-top: 1px solid var(--line-soft);
}





.hub-trip-blogpost .hub-editor,
.hub-trip-blogpost .hub-inhalt {
    border-color: var(--line-soft);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-flach);
}


.hub-trip-blogpost .hub-inhalt {
    font-size: 17px;
    line-height: 1.6;
}

.hub-trip-blogpost .hub-editor {
    min-height: 320px;
    padding: var(--sp-4);
    font-size: 17px;
    line-height: 1.6;
}



@media (max-width: 767px) {
    

    

    

    

    

    .hub-trip-blogpost .hub-editor {
        min-height: 48dvh;
        padding: var(--sp-4);
    }
}




html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

button,
a,
summary,
input,
select,
textarea {
    accent-color: var(--accent);
}


.hub-inline-mehr > summary::before,
.hub-reise-mehr > summary::before,
.hub-reise-neu > summary::before,
.hub-media-mehr > summary::before,
.hub-feedback > summary::before,
.hub-trip-day__neu > summary::before,
.hub-trip-places__neu > summary::before,
.hub-trip-blog__neu > summary::before,
.hub-trip-blogpost__verwaltung > summary::before,
.hub-media-event > summary::before,
.hub-reise-bearbeiten > summary::before,
.hub-reise-planverwaltung > summary::before,
.hub-profile__gruppe > summary::before,
.hub-lightbox__mehr > summary::before {
    display: none !important;
}


.hub-oben__profil:focus-visible,
.hub-trip-index__neu:focus-visible,
.hub-reise-tabs a:focus-visible,
.hub-reise-mehr > summary:focus-visible,
.hub-tabs a:focus-visible,
.hub-mehr > summary:focus-visible,
.hub-reise-kontextaktionen a:focus-visible,
.hub-naechster__aktionen a:focus-visible,
.hub-media-mehr__eintrag:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}


@media (prefers-contrast: more) {
    .hub-oben,
    .hub-tabs,
    .hub-reise-tabs,
    .hub-mehr__blatt,
    .hub-reise-mehr__blatt,
    .hub-reise-neu__blatt,
    .hub-media-mehr__blatt,
    .hub-feedback__blatt {
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .hub-card,
    .hub-reise-timeline__inhalt,
    .hub-reise-kompakt__karte,
    .hub-reise-tag,
    .hub-home-reise,
    .hub-trip-day__neu,
    .hub-trip-places__neu,
    .hub-trip-blog__neu,
    .hub-trip-blogpost__verwaltung {
        border-color: var(--line-strong);
    }
}


@media (forced-colors: active) {
    .hub-button,
    .hub-trip-index__neu,
    .hub-reise-neu > summary,
    .hub-reise-kontextaktionen > a,
    .hub-naechster__aktionen > a {
        border: 1px solid ButtonText;
    }

    .hub-reise-timeline__linie > span,
    .hub-media-event__status {
        forced-color-adjust: auto;
    }
}




@media (max-width: 420px) {
    .hub-reise-tabs > a,
    .hub-reise-mehr > summary {
        padding-right: 3px;
        padding-left: 3px;
        
        font-size: clamp(12px, 3.4vw, var(--fs-meta));
        white-space: nowrap;
    }
}

@media (max-width: 340px) {
    .hub-oben__titel {
        font-size: 15px;
    }

    .hub-tabs > a,
    .hub-mehr > summary {
        font-size: 11px;
    }

    .hub-reise-timeline__punkt {
        grid-template-columns: 40px 12px minmax(0, 1fr);
    }
}





.hub-marke__icon {
    display: block;
    flex: none;
    width: 36px;
    height: 36px;
    
}


.hub-hero__status {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: var(--sp-2);
    min-height: 28px;
    margin-top: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid rgb(255 255 255 / .20);
    
    border-radius: var(--r-tag);
    background: var(--done);
    color: var(--surface);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 2px 10px rgb(0 0 0 / .16);
}

.hub-hero__statuspunkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8EF0A8;
}

.hub-reise-heute__datum {
    display: inline-block;
    margin: var(--sp-1) 0 0;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
}





.hub-reise-heute__wechsel > a,
.hub-reise-heute__wechsel > span {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-flach);
    text-decoration: none;
}


.hub-reise-heute__wechsel > a::after {
    content: '';
    position: absolute;
    inset: calc((44px - var(--tap-min)) / 2 - 1px);
    border-radius: 50%;
}

.hub-reise-heute__wechsel > a:active {
    background: var(--accent-soft);
    transform: scale(.95);
}

.hub-reise-timeline__thumbnail,
.hub-reise-timeline__symbol {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--reise-symbol-breite);
    height: var(--reise-symbol-breite);
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background:
        linear-gradient(145deg, var(--accent-soft), var(--surface-muted));
    color: var(--accent);
    text-decoration: none;
}

.hub-reise-timeline__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}




@media (max-width: 767px) {

    .hub-page--reise .hub-unternav {
        display: none;
    }

    .hub-page--reise > .hub-up,
    .hub-page--reise > main {
        padding-bottom: calc(var(--h-tab) + var(--sp-8) + env(safe-area-inset-bottom));
    }

    .hub-oben .hub-marke__icon {
        width: 38px;
        height: 38px;
    }

    
    .hub-oben__knopf {
        width: var(--tap-min);
        height: var(--tap-min);
        border: 0;
        background: transparent;
        color: var(--text);
    }

    .hub-oben__profil {
        display: grid;
        place-items: center;
        min-width: 40px;
        min-height: 40px;
    }

    .hub-page--reise .hub-hero--reise {
        margin-bottom: 0;
    }

    .hub-hero--reise .hub-hero__unter {
        margin-top: var(--sp-1);
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 520;
        opacity: .96;
    }

    .hub-hero--reise .hub-hero__wort {
        display: grid;
        align-items: start;
        gap: 0;
    }

    

    .hub-reise-heute__kopf h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -.035em;
    }

    .hub-reise-timeline__punkt {
        grid-template-columns: 54px 16px minmax(0, 1fr);
        min-height: 96px;
    }

    .hub-reise-timeline__zeit {
        padding-top: var(--sp-3);
        padding-right: var(--sp-1);
    }

    .hub-reise-timeline__inhalt {
        margin-left: var(--sp-2);
        margin-bottom: var(--sp-3);
        padding: var(--sp-3) var(--sp-3);
        --reise-symbol-breite: 54px;
        --reise-symbol-abstand: var(--sp-2);
        --reise-text-einzug: 0px;
        border-radius: 15px;
    }

    

    

    

    

    

    .hub-reise-kontextaktionen > a {
        min-height: var(--tap-min);
        padding: 0 var(--sp-3);
        border-radius: 11px;
        font-size: var(--fs-meta);
    }

    

    
    .hub-reise-kompakt__karte {
        align-items: flex-start;
        padding: var(--sp-3);
        border-radius: 15px;
        box-shadow: var(--shadow-flach);
    }

    

    
    .hub-reise-neu {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }

    
    .hub-page--reise .hub-chips {
        padding-right: 86px;
    }
}

@media (max-width: 360px) {

    
    .hub-reise-timeline__punkt {
        grid-template-columns: 54px 14px minmax(0, 1fr);
    }

    

    

}








.hub-hinweisblock {
    display: block;
    max-width: 64ch;
    padding: var(--sp-4) var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--surface-muted);
    color: var(--text-2);
    line-height: 1.55;
}

.hub-hinweisblock code {
    white-space: normal;
    overflow-wrap: anywhere;
}



.hub-home {
    width: min(100%, 1460px) !important;
    max-width: none !important;
}

.hub-home__kopf {
    max-width: 760px;
}

.hub-home .hub-abschnitte {
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-4);
    align-items: start;
}

.hub-home .hub-abschnitt {
    grid-column: span 6;
    min-width: 0;
    margin-top: 0;
}

.hub-home .hub-abschnitt--reise {
    grid-column: 1 / -1;
}

.hub-home .hub-abschnitt--weitere-reisen {
    grid-column: span 6;
}

.hub-home .hub-abschnitt--aufgaben {
    grid-column: span 6;
}


.hub-home-reise {
    position: relative;
    display: grid;
    min-height: 280px;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: var(--r-hero);
    background: var(--hub-home-reise-verlauf);
    color: #fff;
    box-shadow: var(--sh-raised);
    isolation: isolate;
}

.hub-home-reise__bild {
    position: absolute;
    inset: 0;
    z-index: var(--z-veil-back);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-home-reise__schleier {
    position: absolute;
    inset: 0;
    z-index: var(--z-veil);
    background: linear-gradient(to top, rgb(5 20 40 / .76), transparent 42%);
}

.hub-home-reise--ohne-bild {
    min-height: 220px;
}

.hub-home-reise--ohne-bild::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--z-veil);
    background:
        radial-gradient(circle at 78% 18%, rgb(255 255 255 / .16), transparent 34%),
        linear-gradient(135deg, rgb(255 255 255 / .08), transparent 55%);
}


.hub-home-reise__inhalt {
    align-self: stretch;
    display: grid;
    align-content: space-between;
    justify-items: start;
    gap: var(--sp-2);
    max-width: 680px;
    padding: var(--sp-4) var(--sp-6) var(--sp-6);
}


.hub-home-reise__inhalt > strong {
    margin-top: auto;
}


.hub-home-reise__marke {
    position: relative;
    z-index: var(--z-veil-front);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    width: max-content;
    min-height: 28px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-tag);
    background: rgb(5 20 40 / .55);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.hub-home-reise__marke::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.hub-home-reise strong {
    color: #fff;
    font-size: var(--fs-hero);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-shadow: 0 2px 16px rgb(0 0 0 / .34);
}

.hub-home-reise__datum {
    color: rgb(255 255 255 / .92);
    font-size: var(--fs-sub);
    font-weight: 500;
}


.hub-home-reise__status {
    width: max-content;
    color: rgb(255 255 255 / .92);
    font-size: var(--fs-meta);
    font-weight: 500;
}


.hub-home-reise__aktion {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    width: max-content;
    min-height: var(--tap-min);
    margin-top: var(--sp-1);
    padding: 0 var(--sp-4);
    border: 1px solid rgb(255 255 255 / .28);
    border-radius: var(--r-button);
    background: rgb(5 20 40 / .38);
    color: #fff;
    font-size: var(--fs-control);
    font-weight: 600;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}


.hub-erinnerungen {
    display: grid;
    
    grid-template-columns: repeat(auto-fit, minmax(var(--tap-min), 1fr));
    gap: var(--sp-2);
}


.hub-heute .hub-erinnerungen {
    grid-template-columns: repeat(auto-fill, minmax(max(var(--tap-min), calc((100% - 3 * var(--sp-2)) / 4)), 1fr));
}

.hub-erinnerung {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-foto);
    background: var(--surface-muted);
}

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


.hub-erinnerung--mehr {
    display: grid;
    place-items: center;
    background: var(--ton-blau);
    color: var(--accent);
    font-size: var(--fs-sub);
    font-weight: 600;
    text-decoration: none;
}


.hub-abschnitt--aufgaben .hub-zeile::before {
    content: '';
    flex: none;
    width: 10px;
    height: 10px;
    margin-left: var(--sp-2);
    border: 2px solid var(--line-strong);
    border-radius: 50%;
}

.hub-abschnitt--aufgaben .hub-zeile--ueberfaellig::before {
    border-color: var(--error);
    background: var(--error);
}


.hub-home__weiter {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    margin-top: var(--sp-1);
    color: var(--accent);
    font-size: var(--fs-meta);
    font-weight: 600;
    text-decoration: none;
}

.hub-home .hub-abschnitt:not(.hub-abschnitt--reise) {
    padding: var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-flach);
}

.hub-home .hub-abschnitt:not(.hub-abschnitt--reise) > .hub-liste {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hub-home-install {
    max-width: 720px;
}

.hub-home-install > h2 {
    margin: 0;
    font-size: var(--fs-sub);
}


.hub-home-install__schritte {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
}

.hub-home-install__schritte > li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    counter-increment: schritt;
}

.hub-home-install__schritte > li::before {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--text-strong);
    font-weight: 700;
    content: counter(schritt);
}



.hub-home-install__aktionen,
.hub-hilfe__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.hub-hilfe,
.hub-neuigkeiten-seite {
    max-width: 640px;
}

.hub-hilfe__einleitung {
    font-size: var(--fs-sub);
}

.hub-hilfe__fertig {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-control);
    background: var(--ton-gruen);
    color: var(--text-strong);
}

.hub-hilfe__schritte,
.hub-neuigkeiten__liste {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}


.hub-hilfe__schritt,
.hub-neuigkeit {
    padding: 0 var(--sp-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sh-rest);
}


.hub-hilfe__schritte details.hub-hilfe__schritt > summary,
.hub-neuigkeiten__liste details.hub-neuigkeit > summary {
    gap: var(--sp-3);
    min-height: 60px;
    color: var(--text-strong);
}

.hub-hilfe__schritte details.hub-hilfe__schritt > summary::before,
.hub-neuigkeiten__liste details.hub-neuigkeit > summary::before {
    order: 3;
    margin-right: var(--sp-1);
    margin-left: auto;
}

.hub-hilfe__nummer {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--ton-blau);
    color: var(--accent);
    font-weight: 700;
}

.hub-hilfe__titel,
.hub-neuigkeit__text {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-card);
    font-weight: 600;
}

.hub-hilfe__inhalt {
    display: grid;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
}

@media (min-width: 560px) {
    .hub-hilfe__inhalt {
        grid-template-columns: 220px 1fr;
        align-items: center;
    }
}

.hub-hilfe__bild {
    margin: 0;
}

.hub-hilfe__bild > figcaption {
    margin-top: var(--sp-1);
    color: var(--text-2);
    font-size: var(--fs-meta);
    text-align: center;
}

.hub-hilfe__aktionen {
    margin-top: var(--sp-6);
}

.hub-hilfe__aktionen > .hub-button {
    flex: 1 1 100%;
}

.hub-skizze {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
}

.hub-skizze__geraet { fill: var(--surface-muted); stroke: var(--line); stroke-width: 2; }
.hub-skizze__blatt,
.hub-skizze__leiste { fill: var(--surface); stroke: var(--line); }
.hub-skizze__zeile { fill: var(--line); }
.hub-skizze__zeile--stark { fill: var(--text-2); }
.hub-skizze__feld { fill: var(--surface-muted); }
.hub-skizze__zeichen { fill: var(--text-strong); }
.hub-skizze__zeichen--strich { fill: none; stroke: var(--text-strong); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hub-skizze__schalter { fill: var(--done); }
.hub-skizze__knauf { fill: var(--on-navy); }
.hub-skizze__knopf { fill: var(--accent); }
.hub-skizze__marke { fill: none; stroke: var(--akzent-warm); stroke-width: 3; }

.hub-neuigkeiten-dialog {
    width: min(100% - 2 * var(--sp-4), 560px);
    max-height: calc(100dvh - 2 * var(--sp-4) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-dialog);
    background: var(--bg);
    color: var(--text);
    box-shadow: var(--sh-overlay);
}

.hub-neuigkeiten-dialog::backdrop {
    background: rgb(8 26 50 / 0.45);
}

.hub-neuigkeiten-dialog[open] {
    animation: hubPop var(--d-pop) var(--ease);
}

.hub-neuigkeiten__kopf {
    text-align: center;
}

.hub-neuigkeiten__marke {
    display: block;
    margin: 0 auto;
}

.hub-neuigkeiten__name {
    margin: var(--sp-1) 0 0;
    color: var(--text-2);
    font-weight: 600;
}

.hub-neuigkeiten__titel {
    margin: var(--sp-3) 0 var(--sp-1);
    color: var(--text-strong);
    font-size: var(--fs-page);
    line-height: 1.1;
}

.hub-neuigkeiten__liste {
    margin-top: var(--sp-6);
}

.hub-neuigkeit__text {
    display: grid;
    gap: 2px;
}

.hub-neuigkeit__text > .hub-meta {
    font-weight: 400;
}

.hub-neuigkeit__details {
    display: grid;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 1.2em);
    border-radius: var(--r-control);
    background: var(--bg);
}

.hub-neuigkeit[open] > .hub-neuigkeit__details {
    animation: hubUp var(--d-up) var(--ease);
}

.hub-neuigkeiten__weiter {
    width: 100%;
    margin-top: var(--sp-6);
}

.hub-neuigkeiten__aktionen {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
}

.hub-neuigkeiten__aktionen .hub-neuigkeiten__weiter {
    margin-top: 0;
}

.hub-neuigkeiten__automatik {
    margin-top: var(--sp-6);
}

.hub-release {
    margin-top: var(--sp-4);
}

.hub-release__titel {
    font-weight: 600;
    margin: 0 0 var(--sp-2);
}

details.hub-release > summary,
details.hub-technik > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    cursor: pointer;
}


.hub-technik {
    margin-top: var(--sp-3);
}

.hub-technik > summary,
.hub-technik__titel {
    color: var(--text-2);
    font-weight: 600;
}

.hub-technik__titel {
    margin: 0 0 var(--sp-2);
}

@media (prefers-reduced-motion: reduce) {
    .hub-neuigkeiten-dialog[open],
    .hub-neuigkeit[open] > .hub-neuigkeit__details {
        animation: none;
    }
}



.hub-page--reise > .hub-up,
.hub-page--reise > main {
    width: min(100%, 1460px);
    max-width: none !important;
}

.hub-page--reise .hub-unternav {
    display: none !important;
}



.hub-reise-tabs {
    position: relative;
    inset: auto;
    z-index: auto;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: var(--sp-3) 0 var(--sp-6);
    padding: 4px;
    gap: 2px;
    
    overflow: visible;
    border: 0;
    border-radius: var(--r-control);
    background: var(--surface-muted);
    box-shadow: none;
}

.hub-reise-tabs::-webkit-scrollbar {
    display: none;
}

.hub-reise-tabs > a,
.hub-reise-mehr > summary {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    place-items: center;
    align-content: center;
    
    min-height: var(--h-segment);
    min-width: 62px;
    padding: 0 var(--sp-2);
    border-radius: 10px;
    color: var(--text-2);
    font-size: var(--fs-meta);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.hub-reise-tabs > a::after,
.hub-reise-mehr > summary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: var(--tap-min);
    transform: translateY(-50%);
}

.hub-reise-tabs > a,
.hub-reise-mehr {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.hub-reise-mehr > summary {
    width: 100%;
    padding-right: var(--sp-1);
    padding-left: var(--sp-1);
}

.hub-reise-tabs > a[aria-current='page'],
.hub-reise-mehr > summary[aria-current='page'] {
    background: var(--surface);
    box-shadow: var(--sh-rest);
    color: var(--text-strong);
    font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
    .hub-reise-tabs > a:hover,
    .hub-reise-mehr > summary:hover {
        color: var(--text);
    }
}


@media (max-width: 767px) {
    .hub-reise-tabs > a,
    .hub-reise-mehr > summary {
        min-width: 0;
        padding-right: 3px;
        padding-left: 3px;
        
        font-size: clamp(12px, 3.4vw, var(--fs-meta));
        white-space: nowrap;
    }

    
    .hub-reise-tabs > a {
        flex: 1 1 auto;
    }
}

.hub-hero--reise {
    min-height: 280px;
    border-radius: var(--r-hero);
    box-shadow: var(--sh-raised);
}

.hub-hero--reise.hub-hero--ohne-bild {
    min-height: 205px;
}

.hub-hero--reise.hub-hero--ohne-bild .hub-hero__schleier {
    background:
        radial-gradient(circle at 78% 16%, rgb(255 255 255 / .14), transparent 32%),
        linear-gradient(to top, rgb(0 0 0 / .38), transparent 70%);
}


.hub-hero--reise .hub-hero__titel {
    font-size: var(--fs-page);
    font-weight: 600;
    line-height: var(--zh-page);
    letter-spacing: var(--lw-page);
}

.hub-hero--reise .hub-hero__unter {
    font-size: 17px;
}

.hub-reise-bearbeiten--sekundaer {
    max-width: 760px;
    margin-top: var(--sp-6);
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: var(--surface);
}

.hub-reise-bearbeiten--sekundaer > summary {
    min-height: 52px;
    padding: 0 var(--sp-4);
    color: var(--text-2);
    font-weight: 600;
}

.hub-page--reise .hub-reise-plan,
.hub-page--reise .hub-reise-heute,
.hub-page--reise .hub-naechster,
.hub-page--reise .hub-reise-kompakt {
    max-width: none;
}



.hub-page--reise .hub-reise-tage {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: var(--sp-3);
}

.hub-page--reise .hub-reise-tage > li {
    min-width: 0;
}

.hub-page--reise .hub-reise-tag {
    min-height: 132px;
    padding: var(--sp-4);
}

.hub-page--reise .hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    max-width: 1040px;
}

.hub-page--reise .hub-reise-vorbereitung {
    max-width: 1040px;
}

.hub-page--reise .hub-reise-vorbereitung h2 {
    font-size: 30px;
    letter-spacing: -.035em;
}

.hub-page--reise .hub-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--sp-2);
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-2);
    text-align: center;
}





.hub-trip-map__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(280px, .7fr);
    gap: var(--sp-4);
    align-items: stretch;
}

.hub-trip-map__frame {
    min-width: 0;
}

.hub-trip-map__canvas {
    height: min(68vh, 720px);
    min-height: 520px;
}

.hub-trip-map__orte {
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-flach);
}

.hub-trip-map__orte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--line-soft);
}

.hub-trip-map__orte-kopf h2 {
    margin-top: 0;
    font-size: var(--fs-section);
    letter-spacing: var(--lw-section);
}

.hub-trip-map__ortliste {
    display: grid;
}

.hub-trip-map__ort {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: center;
    min-height: 64px;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line-soft);
}

.hub-trip-map__ort:last-child {
    border-bottom: 0;
}

.hub-trip-map__ortpunkt {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.hub-trip-map__ort strong,
.hub-trip-map__ort small {
    display: block;
}

.hub-trip-map__ort small {
    margin-top: var(--sp-1);
    color: var(--text-2);
}

.hub-trip-map__hinweis {
    max-width: 78ch;
}



main[data-controller~='gallery'] {
    width: min(100%, 1460px) !important;
    max-width: none !important;
}







.hub-kachel {
    aspect-ratio: 1 / 1;
}



.hub-profile {
    width: min(100%, 980px) !important;
}

.hub-profile > h1 {
    margin-bottom: var(--sp-4);
}

.hub-profile > .hub-card {
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-flach);
}

.hub-profile > .hub-card:first-of-type {
    padding: var(--sp-4);
    border-radius: var(--r-card);
}

.hub-profile .hub-button {
    min-height: var(--tap-min);
}

.hub-profile__kopf {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}


.hub-profile__gruppe {
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
}

.hub-profile__gruppe[open] {
    box-shadow: var(--sh-rest);
}

.hub-profile__gruppe > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: var(--h-row);
    padding: var(--sp-2) var(--sp-4);
    list-style: none;
    cursor: pointer;
}

.hub-profile__gruppe > summary::-webkit-details-marker {
    display: none;
}

.hub-profile__gruppe > summary > span:first-child {
    display: grid;
    gap: 2px;
}

.hub-profile__gruppe > summary > span:last-child {
    color: var(--text-2);
    font-size: 22px;
    transition: transform 160ms var(--ease);
}

.hub-profile__gruppe[open] > summary > span:last-child {
    transform: rotate(90deg);
}

.hub-profile__gruppe-inhalt {
    padding: 0 var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--line-soft);
}

.hub-profile__gruppe-inhalt > form:first-child,
.hub-profile__gruppe-inhalt > .hub-hint:first-child {
    margin-top: var(--sp-4) !important;
}

@media (max-width: 767px) {
    .hub-profile__kopf {
        margin-top: var(--sp-3);
        padding: var(--sp-4) !important;
    }

    .hub-profile__gruppe {
        border-radius: 16px;
    }

    .hub-profile__gruppe > summary {
        min-height: 60px;
        padding: var(--sp-3) var(--sp-4);
    }

    .hub-profile__gruppe-inhalt {
        padding: 0 var(--sp-4) var(--sp-4);
    }

    .hub-profile__gruppe-inhalt form {
        max-width: none !important;
    }
}



@media (min-width: 1024px) {
    .hub-page > .hub-up,
    .hub-page > main {
        padding-top: var(--sp-8);
        padding-right: clamp(var(--sp-8), 4vw, 64px);
        padding-left: clamp(var(--sp-8), 4vw, 64px);
    }

    
    .hub-home__kopf h1 {
        font-size: clamp(32px, 3vw, 40px);
    }

    .hub-home__datum {
        margin-top: 2px;
    }

    .hub-page--reise main > nav[aria-label='Pfad'] {
        margin-bottom: var(--sp-3);
    }

    .hub-page--reise .hub-reise-tabs {
        max-width: 1100px;
    }

    

    

}



@media (max-width: 767px) {
    
    .hub-page > .hub-up,
    .hub-page > main {
        padding-left: calc(var(--sp-4) + env(safe-area-inset-left));
        padding-right: calc(var(--sp-4) + env(safe-area-inset-right));
    }

    .hub-home {
        padding-top: var(--sp-4) !important;
    }

    .hub-home__kopf {
        padding: 0 2px;
    }

    .hub-home__kopf h1 {
        font-size: clamp(29px, 9vw, 38px);
    }

    .hub-home .hub-abschnitte {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }

    .hub-home .hub-abschnitt,
    .hub-home .hub-abschnitt--reise,
    .hub-home .hub-abschnitt--weitere-reisen,
    .hub-home .hub-abschnitt--aufgaben {
        grid-column: 1;
    }

    .hub-home-reise {
        min-height: 238px;
    }

    .hub-home-reise--ohne-bild {
        min-height: 184px;
    }

    .hub-home-reise__inhalt {
        padding: var(--sp-4);
    }

    
    .hub-home-reise__aktion > span:last-child {
        font-size: var(--fs-sub);
    }

    .hub-home .hub-abschnitt:not(.hub-abschnitt--reise) {
        padding: var(--sp-4);
        border-radius: 17px;
    }

    .hub-page--reise > .hub-up {
        padding-top: 0 !important;
    }

    .hub-page--reise main > nav[aria-label='Pfad'] {
        display: none;
    }

    .hub-page--reise .hub-hero--reise {
        width: calc(100% + (2 * var(--sp-4)));
        min-height: 244px;
        margin-right: calc(var(--sp-4) * -1);
        margin-left: calc(var(--sp-4) * -1);
        border-radius: 0 0 26px 26px;
    }

    

    

    


    .hub-reise-tab--desktop {
        display: none !important;
    }

    

    .hub-page--reise .hub-reise-tage {
        display: flex;
        gap: var(--sp-3);
        margin-right: calc(var(--sp-4) * -1);
        padding: 2px var(--sp-4) var(--sp-2) 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .hub-page--reise .hub-reise-tage > li {
        flex: 0 0 138px;
        scroll-snap-align: start;
    }

    .hub-page--reise .hub-reise-tag {
        min-height: 112px;
    }

    .hub-page--reise .hub-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hub-page--reise .hub-reise-vorbereitung {
        margin-top: var(--sp-8) !important;
    }

    .hub-page--reise .hub-reise-vorbereitung h2 {
        font-size: 25px;
    }

    

    .hub-page--reise .hub-empty {
        min-height: 170px;
        padding: var(--sp-6) var(--sp-4);
    }

    .hub-reise-bearbeiten--sekundaer {
        margin-top: var(--sp-4);
    }

    .hub-trip-map {
        padding-top: var(--sp-4) !important;
    }

    .hub-trip-map__kopf {
        margin-bottom: 2px;
    }

    .hub-trip-map__layout {
        display: block;
        margin-right: calc(var(--sp-4) * -1);
        margin-left: calc(var(--sp-4) * -1);
    }

    .hub-trip-map__frame {
        width: 100%;
        margin: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .hub-trip-map__canvas {
        height: 58dvh;
        min-height: 390px;
    }

    .hub-trip-map__orte {
        margin: var(--sp-3) var(--sp-4) 0;
        border-radius: 17px;
    }

    .hub-trip-map__hinweis {
        margin-right: 0;
        margin-left: 0;
        padding: 0 2px;
        font-size: 12px;
    }

    main[data-controller~='gallery'] {
        padding-top: 0 !important;
    }

    main[data-controller~='gallery'] .hub-hero--media {
        min-height: 150px;
    }

    main[data-controller~='gallery'] > nav[aria-label='Mediathek-Ansicht'] {
        margin-top: var(--sp-3);
    }

    

    .hub-zulegen {
        padding: var(--sp-4);
    }

    

    .hub-profile {
        padding-top: var(--sp-6) !important;
    }

    .hub-profile > .hub-card {
        padding: var(--sp-4);
        border-radius: 17px;
    }
}

@media (max-width: 360px) {
    .hub-home-reise__inhalt {
        padding: var(--sp-3);
    }


    .hub-page--reise .hub-reise-tage > li {
        flex-basis: 128px;
    }
}


@media (min-width: 768px) and (max-width: 1023px) {
    .hub-home .hub-abschnitte {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hub-home .hub-abschnitt--reise {
        grid-column: 1 / -1;
    }

    .hub-home .hub-abschnitt {
        grid-column: span 1;
    }

    .hub-page--reise .hub-reise-tage {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .hub-trip-map__layout {
        grid-template-columns: 1fr;
    }
}





.hub-reise-uebersicht {
    display: grid;
    gap: var(--sp-4);
    margin: var(--sp-4) 0 var(--sp-6);
}

.hub-reise-uebersicht__karten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
}

.hub-reise-uebersicht__karte {
    display: grid;
    align-content: center;
    gap: var(--sp-3);
    min-width: 0;
    min-height: 118px;
    padding: var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-flach);
    color: var(--text);
    text-decoration: none;
}

.hub-reise-uebersicht__karte strong {
    
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: 15px;
    line-height: 1.2;
}


.hub-reise-uebersicht__karten > form {
    display: grid;
    min-width: 0;
}

button.hub-reise-uebersicht__karte {
    width: 100%;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.hub-reise-uebersicht__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
}

.hub-reise-uebersicht__icon--gruen {
    background: var(--ton-gruen);
    color: var(--done);
}

.hub-reise-uebersicht__icon--warm {
    background: var(--ton-orange);
    color: var(--akzent-warm-ink);
}

.hub-reise-uebersicht__highlights {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-3);
    align-items: center;
    min-height: 66px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-flach);
    color: var(--text);
    text-decoration: none;
}

.hub-reise-uebersicht__highlights-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--surface-muted);
    color: var(--text-2);
}





@media (max-width: 360px) {
    .hub-reise-uebersicht__karten {
        gap: var(--sp-2);
    }

    .hub-reise-uebersicht__karte {
        min-height: 106px;
        padding: var(--sp-3);
    }

    .hub-reise-uebersicht__karte strong {
        font-size: 13px;
    }
}





.hub-button--voll {
    width: 100%;
}

@media (max-width: 767px) {
    
    
    .hub-page {
        
        --leiste-unten: 0px;
        --leiste-polster: env(safe-area-inset-bottom);
        --plus-versatz: 20px;
        --plus-ueberstand: calc(var(--plus-versatz) - (var(--leiste-hoehe) - var(--plus-groesse)) / 2);
        --inhalt-unten: calc(var(--leiste-unten) + var(--leiste-polster) + var(--leiste-hoehe) + var(--plus-ueberstand) + var(--sp-6));
    }

    .hub-page > .hub-tabs {
        position: absolute;
        left: 0;
        right: 0;
        bottom: var(--leiste-unten);
        z-index: var(--z-bottom-bar-global);
        display: flex;
        align-items: center;
        min-height: calc(var(--leiste-hoehe) + var(--leiste-polster));
        height: calc(var(--leiste-hoehe) + var(--leiste-polster));
        margin: 0;
        max-width: none;
        padding: 0 calc(6px + env(safe-area-inset-right)) var(--leiste-polster) calc(6px + env(safe-area-inset-left));
        border: 0;
        border-radius: 0;
        
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }

    .hub-page > .hub-tabs::before {
        position: absolute;
        inset: 0;
        z-index: 0;
        
        border: 0;
        border-top: 1px solid var(--leiste-linie);
        border-radius: inherit;
        
        background: var(--surface);
        box-shadow: var(--leiste-schatten);
        -webkit-backdrop-filter: blur(20px) saturate(1.6);
        backdrop-filter: blur(20px) saturate(1.6);
        content: '';
    }

    
    .hub-page > .hub-up,
    .hub-page > main,
    .hub-page.hub-page--reise > .hub-up,
    .hub-page.hub-page--reise > main {
        padding-bottom: var(--inhalt-unten);
        scroll-padding-bottom: var(--inhalt-unten);
    }

    .hub-page > .hub-tabs > a:not(.hub-tabs__plus) {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 54px;
        padding: 6px 2px 5px;
        border-radius: 20px;
        background: transparent;
        color: var(--text-2);
        
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
        transition: transform var(--d-fade) var(--ease), background-color var(--d-fade) var(--ease);
    }

    .hub-page > .hub-tabs > a:not(.hub-tabs__plus) > span:not(.hub-zaehler) {
        max-width: 100%;
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hub-page > .hub-tabs > a:not(.hub-tabs__plus) svg {
        width: 24px;
        height: 24px;
        stroke-width: 1.8;
    }

    .hub-page > .hub-tabs > a:not(.hub-tabs__plus)[aria-current='page'] {
        background: transparent;
        color: var(--accent);
    }

    .hub-page > .hub-tabs > a:not(.hub-tabs__plus)[aria-current='page'] svg {
        stroke-width: 2.1;
    }

    .hub-page > .hub-tabs > a:not(.hub-tabs__plus):active {
        background: var(--surface-muted);
        transform: scale(0.95);
    }

    .hub-page > .hub-tabs > a:not(.hub-tabs__plus) .hub-zaehler--punkt {
        position: absolute;
        top: 4px;
        left: calc(50% + 6px);
    }

    

    
    .hub-page > .hub-tabs > .hub-tabs__plus {
        position: relative;
        z-index: 6;
        flex: none;
        display: grid;
        place-items: center;
        width: var(--plus-groesse);
        height: var(--plus-groesse);
        margin: 0 6px;
        border-radius: 50%;
        background: var(--plus-flaeche);
        color: var(--plus-zeichen);
        box-shadow: var(--plus-schatten);
        transform: translateY(calc(-1 * var(--plus-versatz)));
        transition:
            transform var(--d-panel) var(--ease-panel),
            background-color var(--d-panel) var(--ease-panel),
            color var(--d-panel) var(--ease-panel);
        -webkit-tap-highlight-color: transparent;
    }

    .hub-page > .hub-tabs > .hub-tabs__plus svg {
        width: 28px;
        height: 28px;
        stroke-width: 2.2;
        transition: transform var(--d-panel) var(--ease-panel);
    }

    .hub-page > .hub-tabs > .hub-tabs__plus:active {
        transform: translateY(calc(-1 * var(--plus-versatz))) scale(0.92);
    }

    .hub-page > .hub-tabs > .hub-tabs__plus:focus-visible {
        outline: 3px solid var(--focus);
        outline-offset: 3px;
    }

    
    .hub-page > .hub-tabs--offen > .hub-tabs__plus {
        background: var(--elevated);
        color: var(--text-strong);
        box-shadow: var(--sh-overlay);
    }

    .hub-page > .hub-tabs--offen > .hub-tabs__plus svg {
        transform: rotate(45deg);
    }
}



.hub-plus-schleier,
.hub-plus {
    display: none;
}

@media (max-width: 767px) {
    
    .hub-plus-schleier:not([hidden]) {
        position: absolute;
        top: -200vh;
        left: -100vw;
        right: -100vw;
        bottom: -120px;
        z-index: 4;
        display: block;
        border: 0;
        background: var(--sheet-backdrop-color);
        opacity: 0;
        -webkit-backdrop-filter: blur(var(--sheet-backdrop-blur));
        backdrop-filter: blur(var(--sheet-backdrop-blur));
        transition: opacity var(--d-panel) var(--ease);
        cursor: default;
    }

    .hub-tabs--offen .hub-plus-schleier {
        opacity: 1;
    }

    .hub-plus:not([hidden]) {
        position: absolute;
        left: 0;
        right: 0;
        bottom: max(
            calc(100% + 26px),
            calc(var(--plus-tastatur, 0px) - var(--leiste-unten) + 12px)
        );
        z-index: 5;
        display: block;
        max-height: calc(
            100dvh - env(safe-area-inset-top) - 28px
            - max(var(--plus-tastatur, 0px) + 12px, var(--leiste-unten) + var(--leiste-polster) + var(--leiste-hoehe) + 26px)
        );
        overflow: auto;
        overscroll-behavior: contain;
        padding: 8px;
        border: 1px solid var(--leiste-linie);
        border-radius: 26px;
        background: var(--panel-flaeche);
        box-shadow: var(--sh-overlay);
        -webkit-backdrop-filter: blur(24px) saturate(1.5);
        backdrop-filter: blur(24px) saturate(1.5);
        
        transform-origin: 50% calc(100% + 46px);
        opacity: 0;
        transform: translateY(18px) scale(0.86);
        transition:
            opacity calc(var(--d-panel) * 0.8) var(--ease),
            transform var(--d-panel) var(--ease-panel);
    }

    .hub-tabs--offen .hub-plus {
        opacity: 1;
        transform: none;
    }

    .hub-plus__griff {
        display: block;
        width: 36px;
        height: 5px;
        margin: 4px auto 6px;
        border-radius: 3px;
        background: var(--line);
    }

    .hub-plus__liste {
        display: grid;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .hub-plus__liste > li {
        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity 200ms var(--ease) calc(40ms + var(--i, 0) * 28ms),
            transform 260ms var(--ease-panel) calc(40ms + var(--i, 0) * 28ms);
    }

    .hub-tabs--offen .hub-plus__liste > li {
        opacity: 1;
        transform: none;
    }

    .hub-plus__aktion {
        display: flex;
        align-items: center;
        gap: var(--sp-4);
        min-height: 58px;
        padding: var(--sp-2) var(--sp-3);
        border-radius: 18px;
        color: var(--text-strong);
        text-decoration: none;
        transition: background-color var(--d-fade) var(--ease), transform var(--d-fade) var(--ease);
    }

    .hub-plus__aktion:active {
        background: var(--surface-muted);
        transform: scale(0.98);
    }

    .hub-plus__aktion:focus-visible {
        outline: 3px solid var(--focus);
        outline-offset: -3px;
    }

    .hub-plus__zeichen {
        display: grid;
        flex: none;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: var(--ton-blau);
        color: var(--accent);
    }

    .hub-plus__text {
        display: grid;
        gap: 1px;
        min-width: 0;
    }

    .hub-plus__text strong {
        font-size: var(--fs-card);
        font-weight: 600;
        line-height: 1.25;
    }

    .hub-plus__text span {
        overflow: hidden;
        color: var(--text-2);
        font-size: 14px;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    

    .hub-plus--editor {
        padding: 0 var(--sp-4) var(--sp-4);
    }

    .hub-plus__kopf {
        position: sticky;
        top: 0;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        min-height: 56px;
        margin: 0 calc(-1 * var(--sp-4)) var(--sp-2);
        padding: var(--sp-1) var(--sp-2);
        border-bottom: 1px solid var(--line-soft);
        background: var(--panel-flaeche);
    }

    .hub-plus__editortitel {
        font-size: var(--fs-card);
        font-weight: 650;
        text-align: center;
    }

    .hub-plus__zurueck,
    .hub-plus__abbrechen {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        min-height: var(--tap-min);
        padding: 0 8px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--accent);
        font: inherit;
        font-size: 16px;
        cursor: pointer;
    }

    .hub-plus__zurueck {
        justify-self: start;
    }

    .hub-plus__abbrechen {
        justify-self: end;
    }

    .hub-plus__zurueck:focus-visible,
    .hub-plus__abbrechen:focus-visible {
        outline: 3px solid var(--focus);
        outline-offset: -3px;
    }

    .hub-plus__laden {
        display: block;
        height: 54px;
        margin-top: 12px;
        border-radius: var(--r-input);
    }

    .hub-plus__hinweis,
    .hub-plus__meldung {
        display: grid;
        gap: var(--sp-1);
        margin: var(--sp-2) 0 var(--sp-1);
        padding: var(--sp-3) var(--sp-4);
        border: 1px solid var(--warning-line);
        border-radius: 14px;
        background: var(--warning-soft);
        color: var(--text-strong);
        font-size: 15px;
    }

    .hub-plus__verwerfen {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
        margin: var(--sp-2) 0;
        padding: var(--sp-3);
        border-radius: 14px;
        background: var(--surface-muted);
    }

    .hub-plus__verwerfen > span {
        flex: 1 1 100%;
        font-weight: 600;
    }

    .hub-plus__verwerfen .hub-button {
        flex: 1;
        min-height: 48px;
    }
}


@media (max-width: 767px) and (max-height: 700px) {
    .hub-plus__liste {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-1);
    }

    .hub-plus__aktion {
        flex-direction: column;
        justify-content: center;
        gap: var(--sp-1);
        min-height: 56px;
        padding: var(--sp-1) var(--sp-2);
        text-align: center;
    }

    .hub-plus__zeichen {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .hub-plus__text span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-plus,
    .hub-plus:not([hidden]),
    .hub-plus__liste > li,
    .hub-plus-schleier:not([hidden]),
    .hub-tabs__plus,
    .hub-page > .hub-tabs > .hub-tabs__plus svg {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }

    .hub-plus:not([hidden]),
    .hub-plus__liste > li {
        transform: none !important;
    }
}


@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .hub-page > .hub-tabs::before,
    .hub-plus:not([hidden]) {
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .hub-plus-schleier:not([hidden]) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .hub-page > .hub-tabs::before,
    .hub-plus:not([hidden]) {
        background: var(--surface);
    }
}



.hub-schnell--einzeln {
    border: 0;
    background: none;
    padding: 0;
}

.hub-schnell--einzeln .hub-schnell__form {
    display: grid;
    gap: var(--sp-4);
    margin: 0;
    padding: var(--sp-1) 0 0;
}

.hub-schnell--einzeln .hub-field {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
}

.hub-schnell__zeit {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--sp-3);
}

.hub-schnell__zone {
    color: var(--text-2);
    font-weight: 500;
}

.hub-schnell__kontext {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    justify-self: start;
    min-height: 36px;
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    border-radius: 999px;
    background: var(--ton-blau);
    color: var(--text-strong);
    font-size: 15px;
}

.hub-schnell__kontext svg {
    color: var(--accent);
}

.hub-schnell--einzeln .hub-schnell__mehr {
    border-top: 1px solid var(--line-soft);
    padding-top: var(--sp-3);
}

.hub-schnell--einzeln .hub-schnell__mehr > summary {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
}




.hub-gruppe {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    list-style: none;
}

.hub-gruppe > li {
    position: relative;
}


.hub-gruppe > li + li::before {
    position: absolute;
    top: 0;
    left: 64px;
    right: 0;
    height: 1px;
    background: var(--line-card);
    content: '';
}

.hub-gruppe__titel {
    margin: var(--sp-6) var(--sp-1) var(--sp-2);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}

.hub-gruppe__zeile {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: 58px;
    padding: var(--sp-2) var(--sp-4);
    color: var(--text-strong);
    text-decoration: none;
    transition: background-color var(--d-fade) var(--ease);
}

a.hub-gruppe__zeile:active {
    background: var(--surface-muted);
}

a.hub-gruppe__zeile:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
    border-radius: var(--r-card);
}

.hub-gruppe__zeile--ruhig {
    flex-wrap: wrap;
}

.hub-gruppe__zeichen {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ton-blau);
    color: var(--accent);
}

.hub-gruppe__zeichen--gruen { background: var(--ton-gruen); color: var(--done); }
.hub-gruppe__zeichen--orange { background: var(--ton-orange); color: var(--akzent-warm-ink); }
.hub-gruppe__zeichen--violett { background: var(--ton-violett); color: #5B4BB7; }
.hub-gruppe__zeichen--grau { background: var(--surface-muted); color: var(--text-2); }

:root[data-theme='dark'] .hub-gruppe__zeichen--violett { color: #B7ACF5; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .hub-gruppe__zeichen--violett { color: #B7ACF5; }
}

.hub-gruppe__text {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-body);
    font-weight: 500;
}

.hub-gruppe__zahl {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 var(--sp-2);
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 700;
}

.hub-gruppe__winkel {
    flex: none;
    color: var(--text-3);
}



.hub-mehrseite {
    max-width: 640px;
}

.hub-mehrseite > h1 {
    margin-bottom: 16px;
}

.hub-mehrseite__konto {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: 76px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    color: var(--text-strong);
    text-decoration: none;
}

.hub-mehrseite__konto:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.hub-mehrseite__kontotext {
    display: grid;
    flex: 1;
    gap: 2px;
}

.hub-mehrseite__kontotext strong {
    font-size: 18px;
}

.hub-mehrseite__abmelden {
    margin-top: 28px;
}

.hub-mehrseite__abmelden .hub-button {
    width: 100%;
}



.hub-heute,
.hub-reisen {
    max-width: 760px;
}

.hub-heute__kopf {
    margin-bottom: var(--sp-4);
}

.hub-heute__zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 48px;
}

.hub-heute__gruss {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-zweit);
    font-weight: 500;
}

.hub-heute__knoepfe {
    display: flex;
    gap: var(--sp-1);
    margin-right: -8px;
}

.hub-heute__kopf h1,
.hub-seitenkopf h1 {
    margin: 2px 0 0;
    color: var(--text-strong);
    font-size: var(--fs-titel);
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.hub-heute__datum {
    margin: var(--sp-1) 0 0;
    color: var(--text-2);
    font-size: 16px;
}


.hub-rundknopf {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--tap-min);
    height: var(--tap-min);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-strong);
    cursor: pointer;
    transition: background-color var(--d-fade) var(--ease), transform var(--d-fade) var(--ease);
}

.hub-rundknopf:active {
    background: var(--surface-muted);
    transform: scale(0.94);
}

.hub-rundknopf:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 0;
}

.hub-rundknopf__punkt {
    position: absolute;
    top: 6px;
    right: 5px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--sp-1);
    border: 2px solid var(--bg);
    border-radius: 999px;
    background: var(--error);
    color: var(--on-error);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}




.hub-reisekarte {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10.5;
    border-radius: var(--r-hero);
    background: var(--reise-verlauf, linear-gradient(165deg, hsl(220 38% 30%), hsl(220 42% 16%)));
    color: #FFFFFF;
    text-decoration: none;
    isolation: isolate;
    box-shadow: var(--sh-raised);
    transition: transform var(--d-fade) var(--ease);
}


@media (min-width: 1024px) {
    .hub-reisekarte--gross {
        aspect-ratio: 21 / 9;
    }
}

.hub-reisekarte:active {
    transform: scale(0.985);
}

.hub-reisekarte:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.hub-reisekarte__bild {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-reisekarte__schleier {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(4 14 30 / 0.04) 30%, rgb(4 14 30 / 0.30) 58%, rgb(4 14 30 / 0.78) 100%);
}

.hub-reisekarte__status {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 30px;
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    background: rgb(8 20 40 / 0.46);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 650;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hub-reisekarte__punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #48D597;
    box-shadow: 0 0 0 3px rgb(72 213 151 / 0.28);
}

.hub-reisekarte__inhalt {
    position: absolute;
    left: 18px;
    right: 64px;
    bottom: 16px;
    display: grid;
    gap: 2px;
}

.hub-reisekarte__titel {
    overflow: hidden;
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.25);
    white-space: nowrap;
}

.hub-reisekarte__datum {
    font-size: 15px;
    font-weight: 500;
    opacity: 0.95;
}





.hub-reisekarte__weiter {
    position: absolute;
    right: 16px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.22);
    color: #FFFFFF;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}



.hub-naechstes {
    padding: var(--sp-3) var(--sp-3) var(--sp-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
}

.hub-naechstes__titel {
    margin: 2px var(--sp-1) var(--sp-2);
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

.hub-naechstes__karte {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: 72px;
    margin: 0 -4px;
    padding: var(--sp-2) var(--sp-1) var(--sp-3);
    border-radius: 14px;
    color: var(--text-strong);
    text-decoration: none;
}

.hub-naechstes__karte:active {
    background: var(--surface-muted);
}

.hub-naechstes__karte:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 0;
}

.hub-naechstes__zeichen,
.hub-tagesliste__zeichen {
    display: grid;
    flex: none;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--ton-blau);
    color: var(--accent);
}

.hub-naechstes__text,
.hub-tagesliste__text {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.hub-naechstes__text strong,
.hub-tagesliste__text strong {
    overflow: hidden;
    font-size: var(--fs-karte);
    font-weight: 650;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-naechstes__zeit {
    color: var(--text);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.hub-naechstes__ort,
.hub-tagesliste__ort {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    overflow: hidden;
    color: var(--text-2);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.hub-heute__abschnitt {
    margin-top: var(--sp-6);
}

.hub-abschnittkopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 0 2px var(--sp-3);
}

.hub-abschnittkopf h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: var(--fs-abschnitt);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.hub-abschnittkopf a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    margin: -12px 0;
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}



.hub-tagesliste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-tagesliste > li + li {
    border-top: 1px solid var(--line-soft);
}

.hub-tagesliste__zeile {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: 76px;
    padding: var(--sp-3) 2px;
    color: var(--text-strong);
    text-decoration: none;
}

.hub-tagesliste__zeile:active {
    background: var(--surface-muted);
}

.hub-tagesliste__zeile:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
    border-radius: 12px;
}

.hub-tagesliste__zeit {
    color: var(--text-2);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.hub-tagesliste__zeile--erledigt strong {
    color: var(--text-3);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}



.hub-kalenderblatt {
    display: grid;
    flex: none;
    place-items: center;
    align-content: center;
    width: 40px;
    height: 44px;
    border-radius: 11px;
    background: var(--ton-blau);
    color: var(--accent);
    line-height: 1;
}

.hub-kalenderblatt > span {
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
}

.hub-kalenderblatt > strong {
    margin-top: 2px;
    font-size: 17px;
}

.hub-gruppe__text strong {
    display: block;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-gruppe__text .hub-meta {
    display: block;
}

.hub-gruppe__link {
    color: inherit;
    text-decoration: none;
}

.hub-button--klein {
    min-height: 40px;
    padding: 0 var(--sp-4);
    border-radius: 12px;
    font-size: 15px;
}


.hub-button--klein {
    position: relative;
}

.hub-button--klein::after {
    position: absolute;
    inset: -4px 0;
    content: '';
}

.hub-heute__familie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--sp-3);
    margin-top: var(--sp-8);
    padding: var(--sp-4) var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    color: var(--text-strong);
    font-weight: 600;
    text-decoration: none;
}

.hub-heute__familie > svg {
    color: #5B4BB7;
}

.hub-heute__familie > .hub-meta {
    flex: 1 1 60%;
    order: 3;
    margin-left: var(--sp-8);
    font-weight: 400;
}

.hub-heute__familie > .hub-gruppe__winkel {
    margin-left: auto;
}

.hub-heute .hub-erinnerungen {
    margin-top: 0;
}




.hub-heute__kopf .hub-heute__datum {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-meta);
    font-weight: 500;
}

.hub-heute__kopf h1.hub-heute__gruss {
    margin: var(--sp-1) 0 0;
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: var(--fs-page);
    font-weight: var(--fw-display);
    letter-spacing: -0.01em;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.hub-heute__summe {
    margin: var(--sp-2) 0 0;
    color: var(--text-2);
    font-size: var(--fs-body);
}


.hub-heute .hub-abschnittkopf h2,
.hub-heute .hub-naechstes__titel {
    font-family: var(--font-display);
    font-size: var(--fs-section);
    font-weight: 600;
    letter-spacing: 0;
}

.hub-heute .hub-abschnittkopf h2 {
    font-size: 1.375rem;
}

.hub-heute .hub-reisekarte__titel {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    letter-spacing: -0.01em;
}


.hub-heute__spalten {
    display: flex;
    flex-direction: column;
}

.hub-heute__haupt,
.hub-heute__rand {
    display: contents;
}

.hub-heute .hub-reisekarte { order: 1; }
.hub-heute .hub-naechstes { order: 2; }
.hub-heute__s-programm { order: 3; }
.hub-heute__s-kalender { order: 4; }
.hub-heute__s-denk { order: 5; }
.hub-heute__s-woche { order: 6; }
.hub-heute__s-aufgaben { order: 7; }
.hub-heute__s-fotos { order: 8; }
.hub-heute__s-schnell { order: 9; }
.hub-heute__familie { order: 10; }
.hub-heute .hub-naechstes { margin-top: var(--sp-4); }
.hub-heute .hub-home-install { margin-bottom: var(--sp-4); }


.hub-agenda__zeit {
    flex: none;
    width: 52px;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.hub-agenda > li + li::before {
    left: var(--sp-4);
}


.hub-schnellraster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
}

.hub-schnellraster__knopf {
    display: grid;
    gap: var(--sp-2);
    justify-items: start;
    align-content: start;
    min-height: 96px;
    padding: var(--sp-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    color: var(--text-strong);
    font-weight: 600;
    text-decoration: none;
}

.hub-schnellraster__knopf > svg {
    color: var(--accent);
}

.hub-schnellraster__knopf:active {
    background: var(--surface-muted);
}

.hub-schnellraster__knopf:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}


@media (max-width: 767px) {
    .hub-heute__s-schnell {
        display: none;
    }
}

@media (min-width: 1024px) {
    .hub-heute {
        max-width: 1120px;
    }

    .hub-heute__spalten {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
        gap: 0 var(--sp-8);
        align-items: start;
    }

    .hub-heute__haupt,
    .hub-heute__rand {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .hub-heute__rand > :first-child,
    .hub-heute__haupt > .hub-heute__abschnitt:first-child {
        margin-top: 0;
    }

    
    .hub-heute .hub-heute__rand .hub-heute__abschnitt:first-child {
        margin-top: 0;
    }
}



.hub-seitenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 56px;
    margin: var(--sp-1) 0 var(--sp-4);
}

.hub-seitenkopf__knoepfe {
    display: flex;
    gap: 2px;
    margin-right: -8px;
}




.hub-segmente {
    display: flex;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    overflow-x: auto;
    
    overflow-y: hidden;
    scrollbar-width: none;
}

.hub-segmente::-webkit-scrollbar {
    display: none;
}

.hub-segmente > a {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 38px;
    padding: 0 var(--sp-4);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--d-fade) var(--ease), color var(--d-fade) var(--ease);
}


.hub-segmente > a::after {
    position: absolute;
    inset: -5px 0;
    content: '';
}

.hub-segmente > a[aria-current='true'] {
    background: var(--accent);
    color: var(--on-accent);
}

.hub-segmente > a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}


nav.hub-segmente[aria-label='Reisen filtern'] > a {
    min-height: var(--tap-min);
}




.hub-segmente--gross > a {
    min-height: var(--tap-min);
}

.hub-segmente > a[aria-current='page'] {
    background: var(--accent);
    color: var(--on-accent);
}


.hub-grid--klein {
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: var(--sp-3);
    align-items: stretch;
}

.hub-grid--klein .hub-bildkachel {
    min-height: 0;
    aspect-ratio: 1 / 1;
}

.hub-grid--klein .hub-bildkachel__inhalt {
    min-height: 0;
    padding: var(--sp-3);
}

.hub-grid--klein .hub-bildkachel__titel {
    font-size: var(--fs-card);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .hub-grid--klein {
        grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    }
}






.hub-mehr-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--accent);
    font-size: var(--fs-body);
    font-weight: 600;
    text-decoration: none;
}



























.hub-zeitleiste__reihenfolge {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}


.hub-fotogitter {
    --kachel-min: 112px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--kachel-min), 1fr));
    grid-auto-flow: row dense;
    gap: 2px;
    touch-action: pan-x pan-y;
}

.hub-fotogitter[data-groesse='1'] { --kachel-min: 64px; }
.hub-fotogitter[data-groesse='2'] { --kachel-min: 88px; }
.hub-fotogitter[data-groesse='4'] { --kachel-min: 160px; }
.hub-fotogitter[data-groesse='5'] { --kachel-min: 220px; }


.hub-fotogitter--reihe {
    --kachel-min: 96px;
    touch-action: auto;
}

.hub-fotogitter__monat {
    grid-column: 1 / -1;
    margin: var(--sp-6) 0 var(--sp-2);
    color: var(--text-strong);
    font-size: var(--fs-section);
    font-weight: 700;
    scroll-margin-top: var(--sp-6);
}

.hub-fotogitter__monat:first-child {
    margin-top: 0;
}

.hub-fotokachel {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-foto); 
    background: var(--surface-muted);
}

.hub-fotokachel--gross {
    grid-column: span 2;
    grid-row: span 2;
}


.hub-fotogitter[data-groesse='4'] .hub-fotokachel--gross,
.hub-fotogitter[data-groesse='5'] .hub-fotokachel--gross,
.hub-fotogitter--reihe .hub-fotokachel--gross {
    grid-column: auto;
    grid-row: auto;
}

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

.hub-fotokachel__platzhalter {
    display: grid;
    place-items: center;
    height: 100%;
    padding: var(--sp-2);
    color: var(--text-2);
    font-size: var(--fs-meta);
    text-align: center;
}

.hub-fotokachel__video {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    font-size: 12px;
}




.hub-fotokachel__video,
.hub-kachel__video {
    z-index: 1;
}


.hub-fotokachel:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
    box-shadow: inset 0 0 0 6px rgb(0 0 0 / 0.7);
}


@media (prefers-reduced-motion: no-preference) {
    .hub-fotokachel img {
        transition: transform var(--d-fade) var(--ease);
    }

    .hub-fotokachel:active img {
        transform: scale(0.97);
    }
}

.hub-fotos__stand {
    min-height: 1.4em;
    margin-top: var(--sp-3);
    text-align: center;
}












.hub-reise-tabs > .hub-reise-mehr {
    flex: 0 0 52px;
}

.hub-reise-tabs__mehr > svg {
    display: block;
}


.hub-unterkopf {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 56px;
    margin: 4px 0 4px -8px;
}

.hub-unterkopf .hub-meta {
    margin: 0;
}

.hub-unterkopf h1 {
    margin: 0;
    color: var(--text-strong);
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.hub-naechstes__zeichen--warm {
    background: var(--ton-orange);
    color: var(--akzent-warm-ink);
}

.hub-naechstes .hub-naechstes__karte + .hub-naechstes__karte {
    border-top: 1px solid var(--line-soft);
    border-radius: 0;
}


















.hub-plan-hinweis {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: var(--sp-1) 0 0;
    color: var(--akzent-warm-ink);
    font-size: 14px;
    font-weight: 600;
}










.hub-fokuskopf {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-2);
    min-height: 56px;
    margin: 0 -16px;
    padding: var(--sp-1) var(--sp-2);
    background: var(--bg);
}

.hub-fokuskopf__titel {
    text-align: center;
}





.hub-fokuskopf__abbrechen,
.hub-fokuskopf__fertig {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--sp-2);
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: var(--fs-karte);
    text-decoration: none;
    cursor: pointer;
}

.hub-fokuskopf__fertig {
    justify-self: end;
    font-weight: 700;
}








.hub-planliste__punkt {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
        'griff text pfeile'
        'griff aktionen aktionen';
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    background: var(--surface);
    transition: box-shadow var(--d-fade) var(--ease), opacity var(--d-fade) var(--ease);
}

.hub-planliste__punkt--zieht {
    position: relative;
    z-index: 2;
    box-shadow: var(--sh-raised);
    transition: none;
}

.hub-planliste__griff {
    grid-area: griff;
    display: grid;
    place-items: center;
    align-self: stretch;
    width: 44px;
    min-height: var(--tap-min);
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--text-3);
    cursor: grab;
    touch-action: none;
}



.hub-planliste__punkt--zieht .hub-planliste__griff {
    cursor: grabbing;
}





.hub-planliste__umzug {
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
}












.hub-planliste__entfernen {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--sp-3);
    border-radius: 12px;
    color: var(--error);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}











.hub-planliste__punkt:has(.hub-planliste__entfernen input:checked) {
    border-style: dashed;
    background: transparent;
}

.hub-planliste__punkt:has(.hub-planliste__entfernen input:checked) .hub-planliste__text {
    opacity: 0.55;
}

.hub-planliste__punkt:has(.hub-planliste__entfernen input:checked) .hub-planliste__text strong {
    text-decoration: line-through;
}









@media (prefers-reduced-motion: reduce) {
    .hub-planliste__punkt {
        transition: none;
    }
}










.hub-listenkarte__wer {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    overflow: hidden;
    color: var(--text-2);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.hub-familie-personen {
    display: flex;
    gap: var(--sp-1);
    margin: 0 -16px;
    padding: 0 var(--sp-3) var(--sp-1);
    overflow-x: auto;
    scroll-padding-inline: var(--sp-3);
    list-style: none;
    scrollbar-width: none;
}

.hub-familie-personen::-webkit-scrollbar {
    display: none;
}

.hub-familie-personen__person {
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    width: 84px;
    padding: var(--sp-2) 2px;
    border-radius: 16px;
    color: var(--text-strong);
    text-align: center;
    text-decoration: none;
}

.hub-familie-personen a:active {
    background: var(--surface-muted);
}

.hub-familie-personen a:focus-visible {
    outline: 3px solid var(--focus);
}

.hub-familie-personen__name {
    max-width: 100%;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-familie-personen__zusatz {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-2);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
main > h1 + .hub-segmente { margin-top: var(--sp-4); }








.hub-merken__fehler {
    color: var(--error);
    font-weight: 600;
}


.hub-schnell--einzeln .hub-label,
.hub-trip-day__neu-form .hub-label {
    color: var(--text-strong);
    font-size: var(--fs-zweit);
    letter-spacing: 0;
    text-transform: none;
}


@media (max-width: 400px) {
    .hub-planliste__punkt {
        grid-template-columns: 40px auto 1fr;
        grid-template-areas:
            'griff text text'
            'griff pfeile aktionen';
    }
}





input[type='checkbox'] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 1.25em;
    height: 1.25em;
    margin: 0;
    border: 2px solid var(--line-strong);
    border-radius: 7px;
    background: var(--feld);
    vertical-align: middle;
    cursor: pointer;
}

input[type='checkbox']:checked {
    border-color: var(--accent);
    background: var(--accent)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
        center / 72% no-repeat;
}

.hub-option input[type='checkbox']:checked {
    border-color: var(--done-flaeche);
    background-color: var(--done-flaeche);
}

input[type='checkbox']:disabled {
    opacity: .5;
    cursor: not-allowed;
}


input.hub-input[type='date'],
input.hub-input[type='time'],
input.hub-input[type='datetime-local'] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
    min-height: var(--h-input);
    text-align: left;
}

input.hub-input[type='date']::-webkit-date-and-time-value,
input.hub-input[type='time']::-webkit-date-and-time-value,
input.hub-input[type='datetime-local']::-webkit-date-and-time-value {
    min-height: 1.2em;
    text-align: left;
}


[data-kuerzel] {
    text-transform: uppercase;
}

[data-kuerzel]::placeholder {
    text-transform: none;
}


.hub-hero__zurueck {
    max-width: min(60vw, 260px);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.hub-hero__oben > .hub-hero__pille {
    flex: none;
}

.hub-hero__zurueck > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}


.hub-plus:focus {
    outline: none;
}




.hub-trip-map__orte-kopf {
    flex-wrap: wrap;
}

.hub-trip-map__orte-kopf > .hub-mehr__griff {
    
    flex: none;
    margin: 0 calc(50% - 22px);
}

.leaflet-popup-content .hub-meta + strong {
    display: block;
    margin-top: var(--sp-2);
}

.hub-trip-map__ort {
    grid-template-columns: 12px minmax(0, 1fr) auto;
}

.hub-trip-map__route {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--sp-3);
    border-radius: var(--r-chip);
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.hub-trip-map__route:hover,
.hub-trip-map__route:focus-visible {
    background: var(--accent-soft);
}

.leaflet-popup-content .hub-trip-map__route {
    min-height: var(--tap-min);
    margin-top: var(--sp-2);
    padding: 0;
}


:root[data-theme='dark'] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .leaflet-tile-pane {
        filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9);
    }
}




@media (max-width: 359px) {
    .hub-planliste__punkt {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-areas:
            'griff text'
            'griff pfeile'
            'griff aktionen';
    }

    
}


.hub-field {
    grid-template-columns: minmax(0, 1fr);
}






@keyframes hubBlatt {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hubBestaetigt {
    0% { transform: scale(1); }
    45% { transform: scale(1.04); }
    100% { transform: scale(1); }
}


.hub-mehr__blatt,
.hub-neu__blatt,
.hub-reise-mehr__blatt,
.hub-reise-neu__blatt,
.hub-media-mehr__blatt,
.hub-feedback__blatt,
.hub-inline-mehr__blatt,
.hub-karten__blatt {
    animation: hubBlatt var(--d-panel) var(--ease-panel);
}

details[open] > .hub-sheet-backdrop {
    animation: hubFade var(--d-panel) var(--ease);
}


.hub-page > .hub-tabs > a:not(.hub-tabs__plus) {
    transition:
        transform var(--d-fade) var(--ease),
        background-color var(--d-fade) var(--ease),
        color var(--d-fade) var(--ease);
}


.hub-haken {
    
    transition:
        transform var(--d-fade) var(--ease),
        background-color var(--d-fade) var(--ease),
        border-color var(--d-fade) var(--ease),
        color var(--d-fade) var(--ease);
}

.hub-haken.hub-bestaetigt {
    animation: hubBestaetigt 220ms var(--ease);
}

[data-controller~='sortable'] .hub-zeile__titel {
    text-decoration-line: line-through;
    text-decoration-color: transparent;
    transition: color var(--d-fade) var(--ease), text-decoration-color var(--d-fade) var(--ease);
}

[data-controller~='sortable'] .hub-zeile--erledigt .hub-zeile__titel {
    text-decoration-color: currentColor;
}


.hub-staffel > * {
    animation: hubUp var(--d-up) var(--ease) backwards;
}

.hub-staffel > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.hub-staffel > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.hub-staffel > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.hub-staffel > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.hub-staffel > :nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.hub-staffel > :nth-child(7) { animation-delay: calc(var(--stagger) * 6); }
.hub-staffel > :nth-child(n + 8) { animation-delay: calc(var(--stagger) * 7); }

@media (prefers-reduced-motion: reduce) {
    .hub-staffel > * {
        animation-name: hubFade;
    }
}


.hub-bestaetigt:not(.hub-haken) {
    animation: hubFade var(--d-up) var(--ease);
}


[data-plus-target='formular'] > :not(.hub-skeleton),
[data-schnell-target='ziel'] > :not(.hub-skeleton),
[data-map-target='liste'] > * {
    animation: hubFade var(--d-fade) var(--ease);
}


@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    .hub-reisekarte,
    .hub-hero {
        view-transition-name: var(--uebergang, none);
        view-transition-class: reise;
    }

    .hub-page > .hub-tabs {
        view-transition-name: hub-leiste;
    }

    .hub-seite {
        view-transition-name: hub-seitenleiste;
    }

    
    ::view-transition-old(root) {
        animation: hubFade var(--dur-quick) var(--ease) reverse;
    }

    ::view-transition-new(root) {
        animation: hubFade var(--dur-base) var(--ease);
    }

    
    ::view-transition-group(hub-leiste),
    ::view-transition-group(hub-seitenleiste) {
        animation-duration: var(--dur-base);
    }

    
    ::view-transition {
        pointer-events: none;
    }

    ::view-transition-group(*.reise) {
        animation-duration: var(--d-panel);
        animation-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1);
    }

    ::view-transition-image-pair(*.reise) {
        overflow: hidden;
        border-radius: 26px;
    }

    ::view-transition-old(*.reise),
    ::view-transition-new(*.reise) {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-mehr__blatt,
    .hub-neu__blatt,
    .hub-reise-mehr__blatt,
    .hub-reise-neu__blatt,
    .hub-media-mehr__blatt,
    .hub-feedback__blatt,
    .hub-inline-mehr__blatt,
    .hub-karten__blatt {
        animation: hubFade var(--d-fade) var(--ease);
    }

    .hub-haken.hub-bestaetigt {
        animation: none;
    }
}




.hub-feedback > summary {
    list-style: none;
    cursor: pointer;
}

.hub-feedback > summary::-webkit-details-marker {
    display: none;
}

.hub-feedback > summary:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
}

.hub-feedback > summary:active {
    background: var(--surface-muted);
}


.hub-feedback__blatt {
    position: fixed;
    inset: auto 0 0;
    bottom: var(--feedback-tastatur, 0px);
    z-index: var(--z-sheet-media);
    width: min(520px, 100%);
    max-height: min(88dvh, calc(var(--feedback-sicht, 100dvh) - var(--sp-3)));
    margin-inline: auto;
    padding: var(--sp-3) var(--sp-4) 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--material-line);
    border-bottom: 0;
    border-radius: var(--r-dialog) var(--r-dialog) 0 0;
    
    background: var(--surface);
    box-shadow: 0 -18px 50px rgb(0 0 0 / .14);
}

.hub-feedback:not([open]) > .hub-feedback__blatt {
    display: none;
}


.hub-gruppe:has(> li > .hub-feedback[open]) {
    overflow: visible;
}

.hub-feedback__blatt .hub-mehr__titel {
    padding-inline: 0;
}

.hub-feedback__eingabe {
    min-height: 120px;
    padding: var(--sp-3);
    line-height: 1.4;
    resize: vertical;
}

.hub-feedback__vorschau {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.hub-feedback__vorschau[hidden] {
    display: none;
}

.hub-feedback__vorschau img {
    max-width: 50%;
    max-height: 120px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-field);
    object-fit: contain;
}


.hub-feedback__haken {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--tap-min);
    color: var(--text);
    font-size: var(--fs-sub);
    cursor: pointer;
}

.hub-feedback__haken input {
    flex: none;
    width: 24px;
    height: 24px;
    accent-color: var(--accent);
}


.hub-feedback__senden {
    position: sticky;
    bottom: 0;
    margin-inline: calc(-1 * var(--sp-4));
    padding: var(--sp-3) var(--sp-4) max(var(--sp-4), env(safe-area-inset-bottom));
    background: var(--material-strong);
}

.hub-feedback__senden .hub-button {
    width: 100%;
}




.hub-logistikmaske .hub-reihe > .hub-field {
    flex: 1 1 140px;
    min-width: 0;
}











.hub-bildnachweis { white-space: pre-line; overflow-wrap: anywhere; }

.hub-ki-hinweis { display: block; white-space: pre-line; overflow-wrap: anywhere; font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.hub-hero__nachweis.hub-ki-hinweis { color: inherit; }
.hub-hero__nachweis { font-size: 12px; margin-top: var(--sp-2); }
.hub-hero__nachweis[open] { max-height: 120px; overflow: auto; }

.hub-planung section { scroll-margin-top: 90px; }
.hub-planung .hub-segmente { flex-wrap: wrap; overflow: visible; }
.hub-planung .hub-segmente > a { min-height: var(--tap-min); }
.hub-planung .hub-segmente > a::after { inset: 0; }
.hub-planung__auswahl, .hub-planung__form { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }
.hub-planung__auswahl .hub-field, .hub-planung__form .hub-field { flex: 1 1 140px; min-width: 0; }
.hub-planung .hub-input { width: 100%; min-width: 0; }
.hub-planung__artikel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.hub-planung__artikel > div { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.hub-planung__artikel--gekauft > div > strong { text-decoration: line-through; color: var(--text-2); }
.hub-planung__zusatz { display: block; }
.hub-planung__bearbeiten[open] { flex: 1 1 100%; }
.hub-planung__woche { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.hub-planung__tage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--sp-3); }
.hub-planung__tag, .hub-planung__abstimmung { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-field); min-width: 0; overflow-wrap: anywhere; background: var(--surface); }
.hub-planung__tag h3, .hub-planung__abstimmung h3 { margin-top: 0; }
.hub-planung__antworten { border: 0; padding: 0; margin: 0; }
.hub-planung__antwort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; min-height: var(--tap-min); }
.hub-planung__antwort > span:first-of-type { flex: 1 1 140px; overflow-wrap: anywhere; }
.hub-planung summary { min-height: var(--tap-min); padding-block: var(--sp-2); cursor: pointer; }
.hub-planung__konflikt { display: flex; flex-wrap: wrap; gap: var(--sp-2); overflow-wrap: anywhere; }
.hub-planung__konflikt p { flex-basis: 100%; }
.hub-planung__konflikt .hub-button { max-width: 100%; white-space: normal; }

.hub-unterwegs__liste { display: grid; gap: var(--sp-3); }
.hub-unterwegs .hub-seitenkopf { display: block; }
.hub-unterwegs__karte { padding: var(--sp-4); margin: 0; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); min-width: 0; overflow-wrap: anywhere; }
.hub-unterwegs__karte h3 { margin-top: 0; }
.hub-unterwegs__aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hub-unterwegs__aktionen .hub-button { min-height: var(--tap-min); max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.hub-unterwegs summary { min-height: var(--tap-min); padding-block: var(--sp-2); cursor: pointer; }



.hub-offline-album__fotos { margin-top: var(--sp-3); }
.hub-offline-album__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-1); margin-top: var(--sp-2); }
.hub-offline-album__kachel { display: block; min-height: var(--tap-min); aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-field); overflow: hidden; background: var(--surface-muted); cursor: zoom-in; }
.hub-offline-album__kachel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-offline-album__kachel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hub-offline-album__ansicht { max-width: min(96vw, 1400px); max-height: 96vh; padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); color: var(--text); }
.hub-offline-album__ansicht::backdrop { background: rgb(0 0 0 / .8); }
.hub-offline-album__ansicht form { display: flex; justify-content: flex-end; margin-bottom: var(--sp-2); }
.hub-offline-album__ansicht .hub-button { min-height: var(--tap-min); }
.hub-offline-album__ansicht img { display: block; max-width: 100%; max-height: calc(96vh - 96px); margin-inline: auto; object-fit: contain; }
.hub-heute__ereignisbild { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r-field); margin-block: var(--sp-3); }
.hub-heute .hub-naechstes__text strong { white-space: normal; overflow-wrap: anywhere; }



.hub-sprung {
    position: fixed;
    inset-block-start: max(var(--sp-2), env(safe-area-inset-top));
    inset-inline-start: max(var(--sp-2), env(safe-area-inset-left));
    z-index: calc(var(--z-toast) + 1);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-field);
    background: var(--navy);
    color: var(--on-navy);
    transform: translateY(-200%);
}
.hub-sprung:focus { transform: none; }
.hub-kartentitel { font-size: var(--fs-card); letter-spacing: -0.015em; }
.hub-chips.hub-chips--umbruch { flex-wrap: wrap; overflow: visible; }
main:focus-visible { outline-offset: -3px; }
main :is(input, select, textarea, button, summary, a[href]) { scroll-margin-block: var(--sp-4); }

.hub-plus__kopf--auswahl {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
}
.hub-plus__kopf--auswahl h2 { margin: 0; }

@media (max-width: 767px) {
    
    .hub-inline-mehr__blatt,
    .hub-media-mehr__blatt,
    .hub-reise-mehr__blatt,
    .hub-reise-neu__blatt,
    .hub-feedback__blatt {
        padding-left: calc(var(--sp-4) + env(safe-area-inset-left));
        padding-right: calc(var(--sp-4) + env(safe-area-inset-right));
    }
}


.leaflet-control-attribution a {
    text-decoration: underline;
}




.hub-pin-huelle {
    background: none;
    border: 0;
}

.hub-pin {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
}

.hub-pin__kopf {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: var(--sh-raised);
    color: var(--on-accent);
    font-size: var(--fs-meta);
    font-weight: 700;
    line-height: 1;
}

.hub-pin--place .hub-pin__kopf {
    width: 20px;
    height: 20px;
    background: var(--navy);
}

.hub-pin--lodging .hub-pin__kopf {
    background: var(--akzent-warm);
    color: var(--on-akzent-warm);
}

.hub-pin--haufen .hub-pin__kopf {
    width: 38px;
    height: 38px;
    background: var(--navy);
    color: var(--on-navy);
}

.hub-pin--besucht .hub-pin__kopf {
    opacity: .6;
}

.hub-pin--now .hub-pin__kopf,
.hub-pin--next .hub-pin__kopf {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 4px var(--focus-ring), var(--sh-raised);
}

.hub-pin--now .hub-pin__kopf {
    background: var(--akzent-warm);
    color: var(--on-akzent-warm);
}

.hub-pin__label {
    position: absolute;
    top: 50%;
    left: calc(50% + 24px);
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: var(--r-chip);
    background: var(--surface);
    box-shadow: var(--sh-rest);
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    transform: translateY(-50%);
    white-space: nowrap;
}

.leaflet-marker-icon:focus-visible .hub-pin__kopf {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.hub-trip-map__auskunft {
    display: grid;
    gap: var(--sp-3);
    min-width: 220px;
}

.hub-trip-map__block {
    display: grid;
    gap: var(--sp-1);
}

.hub-trip-map__block + .hub-trip-map__block {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line-soft);
}

.hub-trip-map__bild {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-kachel);
    object-fit: cover;
}

.hub-trip-map__chips,
.hub-trip-map__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.hub-trip-map__chip {
    padding: 2px 10px;
    border-radius: var(--r-chip);
    background: var(--surface-muted);
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
}

.hub-trip-map__chip--jetzt {
    background: var(--akzent-warm);
    color: var(--on-akzent-warm);
}

.hub-trip-map__chip--naechster {
    background: var(--accent-soft);
    color: var(--text-strong);
}

.hub-trip-map__chip--fest {
    background: var(--ton-gruen);
    color: var(--text-strong);
}

.hub-trip-map__werkzeuge {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4) 0;
}

.hub-trip-map__werkzeuge:not(:has(*:not([hidden]):not(:empty))) {
    display: none;
}

.hub-trip-map__filterreihe {
    display: flex;
    gap: var(--sp-2);
}

.hub-trip-map__filter[aria-pressed='false'] {
    opacity: .55;
    text-decoration: line-through;
}

.hub-trip-map__ort {
    grid-template-columns: minmax(0, 1fr) auto;
}

.hub-trip-map__ort[aria-current='true'] {
    background: var(--accent-soft);
}

.hub-trip-map__ort-knopf {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: center;
    min-height: var(--tap-min);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hub-trip-map__nr {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-meta);
    font-weight: 700;
}

.hub-trip-map__nr:empty {
    width: 10px;
    height: 10px;
    margin: 0 9px;
    background: var(--navy);
}

.hub-trip-map__tagesroute {
    width: 100%;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .leaflet-zoom-anim .leaflet-zoom-animated,
    .leaflet-fade-anim .leaflet-popup {
        transition: none;
    }
}


















































































































.hub-thema--umbruch {
    flex-wrap: wrap;
}

.hub-thema--umbruch form {
    flex: 1 1 30%;
}

.hub-thema button:disabled {
    opacity: 0.45;
    cursor: default;
}

















.hub-abo__text {
    display: block;
    padding: var(--sp-3);
    border-radius: var(--r-field);
    background: var(--surface-muted);
    color: var(--text-strong);
    font-size: var(--fs-meta);
    
    overflow-wrap: anywhere;
    -webkit-user-select: all;
    user-select: all;
}

.hub-abo__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.hub-abo__knoepfe [hidden] {
    display: none;
}


[data-kopieren-target='knopf'] {
    min-inline-size: 19ch;
}

button[data-controller~='teilen'] {
    min-inline-size: calc(17ch + 4.5rem);
}

.hub-link-aktionen {
    flex-wrap: wrap;
}

.hub-ticket-scan[open] {
    animation: hubFade var(--d-fade) var(--ease);
}

.hub-ticket-scan::backdrop {
    background: var(--sheet-backdrop-color);
    animation: hubFade var(--d-fade) var(--ease);
}

.hub-notice[data-controller~='kopieren'] {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

[data-teilen-target='aufschrift'] {
    display: inline-block;
}

.hub-trip-map__rechts,
.hub-trip-map__standort {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-2);
    min-width: 0;
}

.hub-trip-map__standort > * {
    pointer-events: auto;
}