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

:root {
    --hub-accent: #40b8a9;
    --hub-bg: #f6f8f8;
    --hub-surface: #ffffff;
    --hub-ink: #1f2933;
    --hub-muted: #5b6670;
    --hub-line: #e2e6e8;
}

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

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

body[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. */
body.hub-bg--gradient {
    background: linear-gradient(
        170deg,
        color-mix(in srgb, var(--hub-accent) 22%, var(--hub-bg)),
        var(--hub-bg) 420px
    );
}

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

/* ── 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,
.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; }

/* 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); }

/* ── 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; }