/**
 * Öffentliche Hub-Seiten (feedivo.de/@handle) — eigenständiges Blatt ohne
 * Bootstrap. Theme über [data-hub-theme], Akzentfarbe über --hub-accent
 * (validierter Inline-Token), Button-Gestalt über .hub-btn--*-Modifikatoren.
 * Diese Datei ist öffentlich abrufbar.
 */

/* Die Farbwelt hängt am Attribut, nicht am body: so kann auch ein
   einzelner Container eine Hub-Seite in seinem Theme zeigen. */
:root {
    --hub-accent: #40b8a9;
    --hub-bg: #f6f8f8;
    --hub-surface: #ffffff;
    --hub-ink: #1f2933;
    --hub-muted: #5b6670;
    --hub-line: #e2e6e8;
}

[data-hub-theme="dunkel"] {
    --hub-bg: #171d22;
    --hub-surface: #212930;
    --hub-ink: #eef1f2;
    --hub-muted: #9aa7ad;
    --hub-line: #323c44;
}

[data-hub-theme="warm"] {
    --hub-bg: #faf6f0;
    --hub-surface: #ffffff;
    --hub-line: #eadfd2;
}

[data-hub-theme="mint"] {
    --hub-bg: #eef6f4;
    --hub-surface: #ffffff;
    --hub-line: #d8e8e4;
}

* { box-sizing: border-box; }

body.hub-body {
    margin: 0;
    min-height: 100vh;
    background: var(--hub-bg);
    color: var(--hub-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Hintergrund „Verlauf“: Markenfarbe läuft oben sanft in die Fläche aus.
   min-height am Body, damit der Verlauf auch kurze Seiten füllt.
   background-color trägt den Startton getrennt vom Bild: nur eine Farbe
   überträgt sich auf die Seitenfläche des Browsers und deckt damit den
   Bereich, den ein Gerät beim Überziehen über den Seitenanfang zeigt. */
body.hub-bg--gradient {
    --hub-bg-top: color-mix(in srgb, var(--hub-accent) 22%, var(--hub-bg));
    background-color: var(--hub-bg-top);
    background-image: linear-gradient(170deg, var(--hub-bg-top), var(--hub-bg) 420px);
}

.hub-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 20px 40px;
}

/* Seite als Karte (Design-Option): die Seite steht als Fläche auf farbigem
   Grund, Verlauf oder Bild. In der Karte tauschen Fläche und Grund die
   Rollen, damit Buttons und Kacheln sich weiter von ihr abheben. */
body.hub-layout--card {
    --hub-card: var(--hub-surface);
    background-color: color-mix(in srgb, var(--hub-accent) 26%, var(--hub-bg));
}

body.hub-layout--card.hub-bg--gradient {
    --hub-bg-top: color-mix(in srgb, var(--hub-accent) 58%, var(--hub-bg));
    background-color: var(--hub-bg-top);
    background-image: linear-gradient(165deg, var(--hub-bg-top), color-mix(in srgb, var(--hub-accent) 14%, var(--hub-bg)));
}

/* Hintergrundbild: fest hinter der Karte und leicht abgedunkelt. Ein
   Pseudo-Element statt background-attachment: fixed, das iOS nicht kennt. */
body.hub-layout--card.hub-bg--image { background-color: #1f2429; }

body.hub-layout--card.hub-bg--image::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(rgb(16 22 28 / 0.2), rgb(16 22 28 / 0.2)), var(--hub-bg-image) center / cover no-repeat;
}

body.hub-layout--card .hub-page {
    --hub-surface: var(--hub-bg);
    max-width: 560px;
    margin: 40px auto;
    padding: 30px 22px 22px;
    border-radius: 26px;
    background: var(--hub-card);
    box-shadow: 0 24px 60px -24px rgb(16 22 28 / 0.5), 0 2px 8px rgb(16 22 28 / 0.08);
}

body.hub-layout--card.hub-shape--square .hub-page { border-radius: 0; }

@media (max-width: 480px) {
    body.hub-layout--card .hub-page { margin: 28px 12px 18px; padding: 24px 16px 18px; border-radius: 22px; }
}

/* ── Kopf ─────────────────────────────────────────────────────────────── */

/* Feedivo-Störer (Free): dezente Pille über dem Kopf, opak gegen den
   Verlaufs-Hintergrund. Gegenstück zum Banner am Seitenende. */
.hub-fdv-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    margin: 0 0 10px;
    padding: 5px 12px;
    border: 1px solid var(--hub-line);
    border-radius: 999px;
    background: var(--hub-surface);
    color: var(--hub-muted);
    font-size: 0.76rem;
    line-height: 1.2;
    text-decoration: none;
}

.hub-fdv-badge strong { color: var(--hub-ink); font-weight: 700; }

.hub-fdv-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hub-accent);
    flex-shrink: 0;
}

.hub-fdv-badge:hover {
    border-color: var(--hub-accent);
    color: var(--hub-ink);
}

.hub-head { text-align: center; padding: 8px 0 4px; }

.hub-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 12px;
}

.hub-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hub-accent);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}

/* Profilbild-Form (Design-Option; Standard bleibt der Kreis). */
body.hub-av--rounded .hub-avatar { border-radius: 22px; }
body.hub-av--square .hub-avatar { border-radius: 0; }

.hub-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.hub-bio {
    margin: 4px auto 0;
    max-width: 46ch;
    color: var(--hub-muted);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

/* ── Blöcke ───────────────────────────────────────────────────────────── */

.hub-blocks {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 20px;
}

.hub-heading {
    margin: 14px 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-muted);
    text-align: center;
}

/* Überschrift im Block: gehört zu dem, was unter ihr steht, hält deshalb
   weniger Abstand als die Lücke zwischen zwei Blöcken. Freistehende
   Überschriften sind Flex-Kinder und beziehen ihren Abstand aus der Lücke. */
.hub-block > .hub-heading { margin-bottom: 10px; }

.hub-heading--medium,
.hub-heading--large {
    letter-spacing: 0;
    text-transform: none;
    color: var(--hub-ink);
}

.hub-heading--medium { font-size: 1.15rem; }
.hub-heading--large { font-size: 1.45rem; }

.hub-text {
    margin: 0 auto;
    max-width: 54ch;
    color: var(--hub-muted);
    font-size: 0.95rem;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Editor-Inhalte (Text-Block und gehostete Rechtstexte): linksbündige Prosa
   mit Überschriften, Listen und Links. */
.hub-richtext { text-align: left; color: var(--hub-ink); }
.hub-richtext > :first-child { margin-top: 0; }
.hub-richtext > :last-child { margin-bottom: 0; }
.hub-richtext h2 { margin: 18px 0 6px; font-size: 1.18rem; }
.hub-richtext h3 { margin: 14px 0 5px; font-size: 1.04rem; }
.hub-richtext h4 { margin: 12px 0 4px; font-size: 0.95rem; }
.hub-richtext p { margin: 0 0 10px; }
.hub-richtext ul,
.hub-richtext ol { margin: 0 0 10px; padding-left: 22px; }
.hub-richtext blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--hub-line); color: var(--hub-muted); }
.hub-richtext a { color: var(--hub-accent); }

/* Link-Buttons: Gestalt (Form + Stil) kommt aus den Design-Einstellungen. */
.hub-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 20px;
    font-weight: 600;
    font-size: 0.98rem;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgba(31, 41, 51, 0.10);
}

.hub-btn--pill    { border-radius: 999px; }
.hub-btn--rounded { border-radius: 12px; }
.hub-btn--square  { border-radius: 0; }

.hub-btn--solid {
    background: var(--hub-accent);
    color: #fff;
    border: 1.5px solid var(--hub-accent);
}

.hub-btn--outline {
    background: var(--hub-surface);
    color: var(--hub-ink);
    border: 1.5px solid var(--hub-accent);
}

.hub-btn--soft {
    background: color-mix(in srgb, var(--hub-accent) 16%, var(--hub-surface));
    color: var(--hub-ink);
    border: 1.5px solid transparent;
}

/* Button-Größe (Design-Option; Standard ist „normal“ aus .hub-btn). */
body.hub-size--compact .hub-btn { min-height: 44px; padding: 9px 16px; font-size: 0.92rem; }
body.hub-size--large .hub-btn { min-height: 62px; padding: 18px 24px; font-size: 1.06rem; }

.hub-btn:hover { filter: brightness(0.96); }
.hub-btn:focus-visible,
.hub-soc:focus-visible,
a.hub-cta-card:focus-visible,
.hub-fdv-badge:focus-visible,
.hub-fdv-banner__cta:focus-visible,
.hub-platform-brand:focus-visible {
    outline: 2px solid var(--hub-accent);
    outline-offset: 2px;
}

.hub-link-note {
    margin: 6px 0 0;
    text-align: center;
    color: var(--hub-muted);
    font-size: 0.82rem;
}

/* Social-Icons */
.hub-socials {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hub-soc {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hub-surface);
    border: 1px solid var(--hub-line);
    color: var(--hub-ink);
}

.hub-soc svg { width: 18px; height: 18px; fill: currentColor; }
.hub-soc:hover { border-color: var(--hub-accent); color: var(--hub-accent); }

/* Social-Icons „Gefüllt“ (Design-Option; Standard bleibt dezent umrandet). */
body.hub-socstyle--filled .hub-soc {
    background: var(--hub-accent);
    border-color: var(--hub-accent);
    color: #fff;
}

body.hub-socstyle--filled .hub-soc:hover { filter: brightness(0.94); color: #fff; }

/* Markenfarben je Plattform (Social-Icons, Link-Karte, CTA-Abzeichen):
   --soc-fill ist die Fläche, --soc-on das Symbol darauf (Standard Weiß),
   --soc-mark das Symbol auf hellem Grund, --soc-ink ersetzt es in der dunklen
   Farbwelt. Ohne Eintrag gilt die Markenfarbe der Seite. */
.hub-soc--instagram { --soc-fill: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); --soc-mark: #d62976; }
.hub-soc--facebook  { --soc-fill: #1877f2; --soc-mark: #1877f2; }
.hub-soc--threads   { --soc-fill: #000000; --soc-mark: #000000; }
.hub-soc--pinterest { --soc-fill: #e60023; --soc-mark: #e60023; }
.hub-soc--youtube   { --soc-fill: #ff0000; --soc-mark: #e00000; }
.hub-soc--tiktok    { --soc-fill: #000000; --soc-mark: #111111; }
.hub-soc--x         { --soc-fill: #000000; --soc-mark: #000000; }
.hub-soc--linkedin  { --soc-fill: #0a66c2; --soc-mark: #0a66c2; }
.hub-soc--whatsapp  { --soc-fill: #25d366; --soc-mark: #128c7e; }
.hub-soc--telegram  { --soc-fill: #229ed9; --soc-mark: #1b8ad3; }
.hub-soc--twitch    { --soc-fill: #9146ff; --soc-mark: #9146ff; }
.hub-soc--spotify   { --soc-fill: #1db954; --soc-mark: #1aa34a; }
.hub-soc--github    { --soc-fill: #181717; --soc-mark: #181717; }
.hub-soc--discord   { --soc-fill: #5865f2; --soc-mark: #5865f2; }
.hub-soc--snapchat  { --soc-fill: #fffc00; --soc-on: #000000; --soc-mark: #111111; }

[data-hub-theme="dunkel"] :is(.hub-soc--threads, .hub-soc--tiktok, .hub-soc--x, .hub-soc--github) { --soc-fill: #ffffff; --soc-on: #000000; --soc-ink: #ffffff; }
[data-hub-theme="dunkel"] .hub-soc--whatsapp { --soc-ink: #25d366; }
[data-hub-theme="dunkel"] .hub-soc--linkedin { --soc-ink: #4b9be6; }
[data-hub-theme="dunkel"] .hub-soc--snapchat { --soc-ink: #fffc00; }

/* Social-Icons „Markenfarben“ (Fläche) und „Farbige Symbole“. */
body.hub-socstyle--brand .hub-soc {
    background: var(--soc-fill, var(--hub-accent));
    border-color: transparent;
    color: var(--soc-on, #fff);
}

body.hub-socstyle--brand .hub-soc:hover { filter: brightness(0.94); border-color: transparent; color: var(--soc-on, #fff); }
body.hub-socstyle--brandicon .hub-soc { color: var(--soc-ink, var(--soc-mark, var(--hub-accent))); }
body.hub-socstyle--brandicon .hub-soc:hover { border-color: currentColor; color: var(--soc-ink, var(--soc-mark, var(--hub-accent))); }

/* Link-Karte: ein Link-Button mit Vorschaubild. Form und Stil folgen den
   Buttons, die Höhe gibt das Bild vor — unabhängig von der Button-Größe,
   deshalb der höhere Selektor. */
body .hub-btn.hub-lc {
    justify-content: flex-start;
    gap: 12px;
    min-height: 68px;
    padding: 8px 14px 8px 8px;
    text-align: left;
}

body .hub-btn--pill.hub-lc { padding-right: 20px; }

.hub-lc__thumb,
.hub-lc__icon { flex: none; width: 52px; height: 52px; border-radius: 9px; }
.hub-lc__thumb { display: block; object-fit: cover; }

.hub-lc__icon {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--soc-ink, var(--soc-mark, var(--hub-accent))) 13%, var(--hub-surface));
    color: var(--soc-ink, var(--soc-mark, var(--hub-accent)));
}

.hub-lc__icon svg { width: 22px; height: 22px; fill: currentColor; }
.hub-btn--pill .hub-lc__thumb,
.hub-btn--pill .hub-lc__icon { border-radius: 50%; }
.hub-btn--square .hub-lc__thumb,
.hub-btn--square .hub-lc__icon { border-radius: 0; }

.hub-lc__body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.hub-lc__title { font-size: 0.97rem; font-weight: 600; line-height: 1.3; }
.hub-lc__sub { font-size: 0.8rem; font-weight: 400; line-height: 1.35; color: var(--hub-muted); }
.hub-lc__chev { flex: none; width: 16px; height: 16px; opacity: 0.55; }
.hub-btn--solid .hub-lc__sub { color: rgb(255 255 255 / 0.86); }
.hub-btn--solid .hub-lc__icon { background: rgb(255 255 255 / 0.2); color: #fff; }

/* Feed-Teaser: die Kacheln stylt feed-layouts.css; hier nur die Einbettung. */
.hub-feed { min-width: 0; }

/* Rechtliches des Inhabers */
.hub-legal-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hub-legal-links a {
    border: 1px solid var(--hub-line);
    background: var(--hub-surface);
    color: var(--hub-ink);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.hub-legal-links a:hover { border-color: var(--hub-accent); }

/* ── Bild-Block und CTA-Banner ────────────────────────────────────────── */

/* Ecken folgen der Button-Form (hub-shape--* am Wurzelelement der Seite). */
.hub-image__img,
.hub-cta-card,
.hub-map { border-radius: 14px; }
.hub-shape--pill .hub-image__img,
.hub-shape--pill .hub-cta-card,
.hub-shape--pill .hub-map { border-radius: 18px; }
.hub-shape--rounded .hub-image__img,
.hub-shape--rounded .hub-cta-card,
.hub-shape--rounded .hub-map { border-radius: 12px; }
.hub-shape--square .hub-image__img,
.hub-shape--square .hub-cta-card,
.hub-shape--square .hub-map { border-radius: 0; }

/* Ein Bild oder zwei nebeneinander; die Breite gilt für den ganzen Block. */
.hub-image { display: grid; gap: 14px; margin: 0 auto; width: 100%; }
.hub-image--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-image--medium { width: 66%; }
.hub-image--small { width: 40%; }

/* figure bringt einen eigenen Seitenabstand mit — der muss weg. */
.hub-image__item { margin: 0; min-width: 0; }
.hub-image__img { display: block; width: 100%; height: auto; object-fit: cover; }
.hub-image--ratio-square .hub-image__img { aspect-ratio: 1 / 1; }
.hub-image--ratio-landscape .hub-image__img { aspect-ratio: 16 / 9; }
.hub-image--ratio-wide .hub-image__img { aspect-ratio: 21 / 9; }
.hub-image--ratio-portrait .hub-image__img { aspect-ratio: 4 / 5; }

.hub-image__caption {
    margin: 6px 0 0;
    text-align: center;
    color: var(--hub-muted);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

/* Zwei Banner stehen nebeneinander, auf schmalen Bildschirmen untereinander. */
.hub-cta { display: grid; gap: 14px; }
.hub-cta--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hub-cta-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--hub-surface);
    border: 1px solid var(--hub-line);
    color: inherit;
    text-decoration: none;
}

a.hub-cta-card:hover { border-color: var(--hub-accent); }

.hub-cta-card__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.hub-cta--ratio-original .hub-cta-card__img { aspect-ratio: auto; }
.hub-cta--ratio-square .hub-cta-card__img { aspect-ratio: 1 / 1; }
.hub-cta--ratio-wide .hub-cta-card__img { aspect-ratio: 21 / 9; }
.hub-cta--ratio-portrait .hub-cta-card__img { aspect-ratio: 4 / 5; }

.hub-cta-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    padding: 14px 16px 16px;
}

.hub-cta-card__title { margin: 0; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.hub-cta-card__text { margin: 0; color: var(--hub-muted); font-size: 0.9rem; overflow-wrap: anywhere; }

/* Der Button im Banner ist kleiner als ein Link-Button und sitzt unten, damit
   zwei Banner nebeneinander auf einer Linie enden. */
.hub-cta-card__btn { margin-top: auto; }

.hub-cta-card__btn.hub-btn,
body.hub-size--large .hub-cta-card__btn.hub-btn {
    min-height: 44px;
    padding: 9px 16px;
    font-size: 0.92rem;
    box-shadow: none;
}

/* „Text auf dem Bild“: Titel und Text liegen auf einem Verlauf am unteren
   Bildrand, das Symbol der Zielplattform oben links. */
.hub-cta--overlay .hub-cta-card { position: relative; border: 0; background: #1b2126; isolation: isolate; }
.hub-cta--overlay .hub-cta-card__img { height: 100%; }

.hub-cta--overlay .hub-cta-card__body {
    position: absolute;
    inset: auto 0 0 0;
    gap: 2px;
    padding: 46px 14px 13px;
    background: linear-gradient(to top, rgb(10 14 18 / 0.84), rgb(10 14 18 / 0.5) 55%, rgb(10 14 18 / 0));
    color: #fff;
}

.hub-cta--overlay .hub-cta-card__title { color: #fff; }
.hub-cta--overlay .hub-cta-card__text { color: rgb(255 255 255 / 0.86); }
.hub-cta--overlay.hub-cta--pair .hub-cta-card__title { font-size: 0.92rem; line-height: 1.3; }
.hub-cta--overlay.hub-cta--pair .hub-cta-card__text { font-size: 0.78rem; line-height: 1.35; }

.hub-cta-card__badge {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.94);
    color: var(--soc-mark, #1f2933);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}

.hub-cta-card__badge svg { width: 15px; height: 15px; fill: currentColor; }

/* Zwei Banner mit Text auf dem Bild bleiben auch schmal nebeneinander. */
@media (max-width: 480px) {
    .hub-image--medium { width: 80%; }
    .hub-image--small { width: 55%; }
    .hub-image--pair,
    .hub-cta--pair { grid-template-columns: minmax(0, 1fr); }
    .hub-cta--overlay.hub-cta--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Standort-Karte ───────────────────────────────────────────────────── */

/* Die Karte ist eine dekorative Inline-Grafik in den Farben der Seite; die
   Flächen mischen sich aus den Theme-Tokens, damit auch die dunkle Farbwelt
   eine dunkle Karte bekommt. Darüber liegt der Button. */
.hub-map {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--hub-line);
    background: var(--hub-surface);
}

.hub-map__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hub-map__ground { fill: var(--hub-surface); }
.hub-map__water  { fill: color-mix(in srgb, #3b82f6 16%, var(--hub-surface)); }
.hub-map__park   { fill: color-mix(in srgb, var(--hub-accent) 14%, var(--hub-surface)); }
.hub-map__block  { fill: color-mix(in srgb, var(--hub-ink) 7%, var(--hub-surface)); }
.hub-map__road   { fill: none; stroke: var(--hub-line); stroke-width: 6; }
.hub-map__main   { fill: none; stroke: color-mix(in srgb, var(--hub-ink) 12%, var(--hub-surface)); stroke-width: 12; stroke-linecap: round; }

.hub-map__overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 210px;
    padding: 24px 20px;
}

.hub-map__pin {
    width: 40px;
    height: 40px;
    color: var(--hub-accent);
    filter: drop-shadow(0 2px 3px rgba(31, 41, 51, 0.22));
}

.hub-map__pin svg { width: 100%; height: 100%; fill: currentColor; }
.hub-map__pin-dot { fill: #fff; }

/* Der Button steht frei in der Mitte statt über die volle Breite. */
.hub-map__btn.hub-btn { display: inline-flex; width: auto; min-width: 12rem; }

.hub-map__address {
    max-width: 100%;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hub-surface) 88%, transparent);
    color: var(--hub-muted);
    font-size: 0.82rem;
    text-align: center;
    overflow-wrap: anywhere;
}

/* ── Fuß: Feedivo-Banner (Free) + Plattform-Zeile (immer) ─────────────── */

.hub-footer { padding-top: 26px; }

.hub-fdv-banner {
    background: linear-gradient(135deg, #2ba393, #40b8a9);
    border-radius: 16px;
    padding: 18px 16px;
    text-align: center;
    color: #fff;
}

.hub-fdv-banner p { margin: 0 0 12px; font-size: 0.92rem; font-weight: 600; }

.hub-fdv-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #1f2933;
    border-radius: 999px;
    padding: 9px 20px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.hub-fdv-banner__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #40b8a9;
    display: inline-block;
}

.hub-platform-line {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hub-line);
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.7;
    color: var(--hub-muted);
}

.hub-platform-line strong { color: var(--hub-ink); font-weight: 700; }
.hub-platform-line a { color: var(--hub-muted); text-decoration: underline; }
/* Unterstreichung am Link selbst abschalten: ein text-decoration am Kind hebt sie nicht auf. */
.hub-platform-line .hub-platform-brand { color: var(--hub-ink); text-decoration: none; }
.hub-platform-line .hub-platform-brand:hover { text-decoration: underline; }

/* ── Rechtstext-Seite (/@handle/impressum …) ──────────────────────────── */

.hub-page--doc { max-width: 640px; }

.hub-backlink { margin: 0 0 14px; font-size: 0.85rem; }
.hub-backlink a { color: var(--hub-muted); text-decoration: none; }
.hub-backlink a:hover { color: var(--hub-ink); }

.hub-doc-title { margin: 0 0 14px; font-size: 1.25rem; }

.hub-doc-body {
    background: var(--hub-surface);
    border: 1px solid var(--hub-line);
    border-radius: 14px;
    padding: 18px;
    font-size: 0.92rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

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

/* Editor-Vorschau: Links sind stillgelegt, der Zeiger zeigt es an. */
.hub-preview a { cursor: default; }