/* ════════════════ Design-Tokens (aus dem Screen-Design) ════════════════ */
        
        :root {
            --paper: #F4F7F6;
            --card: #FFFFFF;
            --ink: #0E1614;
            --muted: #5F6E6A;
            --line: #E3EAE8;
            --mint: #12C2AD;
            --mint-deep: #0B9484;
            --mint-tint: #DFF6F1;
            --mint-text: #0A7D70;
            --deep: #0A1B18;
            --deep-2: #102622;
            --deep-line: rgba(255, 255, 255, .09);
            --deep-text: #E9F4F1;
            --deep-muted: #8FA8A2;
            --err: #B23A3A;
            --ok: var(--mint-deep);
            --r-lg: 24px;
            --r-md: 16px;
            --r-sm: 12px;
            --display: "Bricolage Grotesque", sans-serif;
            --body: "Instrument Sans", -apple-system, sans-serif;
            --mono: "Spline Sans Mono", Menlo, monospace;
            --navH: 64px;
            --miniH: 58px;
            --safe-b: env(safe-area-inset-bottom, 0px);
            /* Typo-Skala (UX-Analyse #9) – ersetzt die zuvor verstreuten 11–16px-Werte */
            --fs-2xs: 11px;
            --fs-xs: 12px;
            --fs-sm: 14px;
            --fs-md: 16px;
            --fs-lg: 20px;
            --fs-xl: 28px;
            /* Spacing-Skala (4-pt) – Standard für neue/überarbeitete Abstände */
            --sp-1: 4px;
            --sp-2: 8px;
            --sp-3: 12px;
            --sp-4: 16px;
            --sp-5: 20px;
            --sp-6: 24px;
            --sp-8: 32px;
            /* Elevation-Tokens – ersetzen die ad-hoc box-shadows */
            --e-sm: 0 6px 16px -6px rgba(14, 22, 20, .5);
            --e-md: 0 12px 28px -20px rgba(14, 22, 20, .4);
            --e-mint: 0 8px 22px -8px rgba(18, 194, 173, .6);
        }
        
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }
        
        html {
            color-scheme: light
        }
        
        html,
        html, body {
            overscroll-behavior-y: contain;   /* kein Pull-to-Refresh-Reload (App-Verhalten) */
        }
        body {
            background: var(--paper);
            color: var(--ink);
            font-family: var(--body);
            font-size: var(--fs-md);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased
        }
        
        button {
            font: inherit;
            cursor: pointer;
            background: none;
            border: none;
            color: inherit
        }
        
        a {
            color: inherit;
            text-decoration: none
        }
        
        input,
        textarea {
            font: inherit;
            color: inherit
        }
        
        ::placeholder {
            color: #6E7E7A
        }

        :focus-visible {
            outline: 2px solid var(--ink);
            outline-offset: 2px;
            border-radius: 4px
        }
        
        @media (prefers-reduced-motion:reduce) {
            *,
            *::before,
            *::after {
                animation: none!important;
                transition: none!important
            }
        }
        /* ════════════════ App-Shell ════════════════ */
        
        .app {
            max-width: 520px;
            margin: 0 auto;
            min-height: 100dvh;
            background: var(--paper);
            padding-bottom: calc(var(--navH) + var(--miniH) + var(--safe-b) + 8px);
            position: relative;
        }
        
        @media (min-width:560px) {
            .app {
                border-left: 1px solid var(--line);
                border-right: 1px solid var(--line)
            }
        }
        
        .view {
            display: none;
            animation: vfade .18s ease
        }
        
        .view.active {
            display: block
        }
        
        @keyframes vfade {
            from {
                opacity: 0;
                transform: translateY(4px)
            }
            to {
                opacity: 1;
                transform: none
            }
        }
        
        .pad {
            padding: 0 20px
        }
        
        .eyebrow {
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--mint-text)
        }
        
        .f-label {
            font-family: var(--mono);
            font-size: var(--fs-2xs);
            font-weight: 500;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #45534F;
            padding: 22px 20px 9px;
            display: block
        }
        
        .section-h {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 24px 20px 10px
        }
        
        .section-h b {
            font-family: var(--display);
            font-weight: 600;
            font-size: var(--fs-md);
            letter-spacing: -.01em
        }
        
        .section-h button {
            font-size: var(--fs-xs);
            color: var(--mint-deep);
            font-weight: 500
        }
        
        .empty-hint {
            padding: 8px 20px 0;
            font-size: var(--fs-sm);
            color: var(--muted);
            line-height: 1.5
        }
        /* Topzeile */
        
        .top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 18px 20px 0
        }
        
        h1.greet {
            font-family: var(--display);
            font-weight: 700;
            letter-spacing: -.03em;
            font-size: 26px;
            line-height: 1.08;
            margin-top: 4px
        }
        
        h1.vtitle {
            font-family: var(--display);
            font-weight: 700;
            letter-spacing: -.03em;
            font-size: 24px;
            padding: 18px 20px 0
        }
        
        .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            flex-shrink: 0;
            border: none;
            background: linear-gradient(135deg, #0F2522, #1E5A4F);
            color: #CFF5EC;
            font-family: var(--display);
            font-weight: 600;
            font-size: var(--fs-sm);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .login-banner {
            margin: 14px 20px 0;
            display: none;
            align-items: center;
            gap: 10px;
            background: var(--mint-tint);
            border-radius: var(--r-md);
            padding: 12px 15px;
            font-size: var(--fs-sm);
            color: #0B5F54;
        }
        
        .login-banner.show {
            display: flex
        }
        
        .login-banner a {
            margin-left: auto;
            font-weight: 600;
            white-space: nowrap;
            color: #0B5F54;
            text-decoration: underline;
            text-underline-offset: 3px
        }
        /* Klangfaden */
        
        .thread {
            display: flex;
            align-items: flex-end;
            gap: 2.5px;
            height: 26px
        }
        
        .thread i {
            width: 3px;
            border-radius: 2px;
            background: currentColor;
            opacity: .32;
            display: block
        }
        
        .thread i.hot {
            opacity: 1;
            background: var(--mint)
        }
        /* Hero-Karte (Heute) */
        
        .hero-card {
            margin: 18px 20px 16px;
            border-radius: var(--r-lg);
            width: calc(100% - 40px);
            text-align: left;
            background: linear-gradient(160deg, #0C211D 0%, #0A1B18 60%, #0E2A24 100%);
            color: var(--deep-text);
            padding: 20px 20px 18px;
            position: relative;
            display: block;
        }
        
        .hero-card .eyebrow {
            color: var(--mint)
        }
        
        .hero-card h3 {
            font-family: var(--display);
            font-weight: 600;
            font-size: 19px;
            letter-spacing: -.02em;
            line-height: 1.25;
            margin-top: 8px
        }
        
        .hero-card .meta {
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--deep-muted);
            margin-top: 8px
        }
        
        .hero-thread {
            margin-top: 16px;
            color: #3E5A53
        }
        
        .hero-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 14px;
            gap: 12px
        }
        
        .hero-foot .segs {
            font-size: var(--fs-xs);
            color: var(--deep-muted);
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
        
        .playbtn {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--mint);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--e-mint);
        }
        
        .playbtn svg {
            display: block
        }
        /* Briefing-Listenelemente */
        
        .b-item {
            display: flex;
            gap: 12px;
            align-items: center;
            padding: 12px 20px;
            width: 100%;
            text-align: left
        }
        
        .b-item+.b-item {
            border-top: 1px solid var(--line)
        }
        
        .b-ico {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            flex-shrink: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            background: #EEF1F0;
            font-family: var(--display);
            font-weight: 600;
            color: var(--mint-deep);
        }
        
        .b-ico img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }
        
        .b-ico.t1 {
            background: var(--mint-tint)
        }
        
        .b-ico.imp {
            background: #fff;
            border: 1.5px dashed #C3D0CC
        }
        
        .b-body {
            flex: 1;
            min-width: 0
        }
        
        .b-body b {
            font-size: var(--fs-sm);
            font-weight: 600;
            letter-spacing: -.01em;
            display: block;
            line-height: 1.3
        }
        
        .b-body .bm {
            font-family: var(--mono);
            font-size: 9.5px;
            color: var(--muted);
            display: flex;
            gap: 7px;
            margin-top: 3px;
            flex-wrap: wrap
        }
        
        .bm .ok {
            color: var(--mint-deep)
        }
        
        .b-play {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1.5px solid var(--line);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
        }
        
        .b-play.playing {
            background: var(--ink);
            border-color: var(--ink);
            color: #fff
        }
        
        .tag-impuls {
            font-family: var(--mono);
            font-size: 8.5px;
            letter-spacing: .1em;
            color: var(--muted);
            border: 1px dashed #B9C6C2;
            border-radius: 5px;
            padding: 2px 5px;
            vertical-align: 1px;
            margin-left: 5px;
            white-space: nowrap;
        }
        /* Chips */
        
        .chip {
            font-size: var(--fs-xs);
            font-weight: 500;
            border-radius: 999px;
            padding: 7px 13px;
            border: 1px solid var(--line);
            background: #fff;
            color: var(--ink);
            white-space: nowrap;
        }
        
        .chip.on {
            background: var(--ink);
            color: #fff;
            border-color: var(--ink)
        }
        
        .row-chips {
            display: flex;
            gap: 7px;
            overflow-x: auto;
            padding: 0 20px;
            scrollbar-width: none
        }
        
        .row-chips::-webkit-scrollbar {
            display: none
        }
        /* Suche */
        
        .search {
            margin: 14px 20px 0;
            display: flex;
            align-items: center;
            gap: 9px;
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 0 14px;
            background: #FAFCFB;
        }
        
        .search svg {
            flex-shrink: 0;
            color: var(--muted)
        }
        
        .search input {
            border: none;
            background: none;
            flex: 1;
            padding: 12px 0;
            font-size: var(--fs-sm);
            outline: none
        }
        /* Bibliothek */
        
        .lib-item {
            border-top: 1px solid var(--line);
            position: relative;
            overflow: hidden;
            background: var(--paper);
        }

        .lib-item:first-child {
            border-top: none
        }

        /* Swipe-to-Delete */
        .lib-del-action {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 84px;
            border: none;
            background: var(--err);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .lib-swipe {
            position: relative;
            background: var(--paper);
            transition: transform .22s ease;
            will-change: transform;
            touch-action: pan-y;
        }
        .lib-item.swiping .lib-swipe {
            transition: none;
        }

        .lib-row {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            padding: 12px 20px;
            width: 100%;
            text-align: left
        }
        
        .lib-x {
            padding: 12px 20px 14px;
            display: none
        }
        
        .lib-item.open .lib-x {
            display: block
        }
        
        .lib-x h4 {
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted);
            margin: 10px 0 6px
        }
        
        .lib-x h4:first-child {
            margin-top: 0
        }
        
        .lib-x ul {
            padding-left: 18px;
            font-size: var(--fs-sm);
            color: var(--ink)
        }
        
        .lib-x li {
            margin-bottom: 4px
        }
        
        .src-chip {
            display: inline-block;
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--mint-deep);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 4px 10px;
            margin: 0 5px 5px 0;
            background: #fff;
        }
        
        .lib-del {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: var(--fs-xs);
            color: var(--err);
            margin-top: 12px;
            padding: 6px 0;
            background: none;
        }
        /* Entdecken: Fokus-/Inspirations-Karten */
        
        .focus-card {
            margin: 0 20px 10px;
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            background: #fff;
            padding: 14px 15px 13px;
        }
        
        .focus-card.lateral {
            border-style: dashed;
            border-color: #C3D0CC
        }
        
        .fc-top {
            display: flex;
            align-items: flex-start;
            gap: 8px
        }
        
        .fc-top b {
            flex: 1;
            font-family: var(--display);
            font-weight: 600;
            font-size: var(--fs-sm);
            letter-spacing: -.01em;
            line-height: 1.3
        }
        
        .fc-act {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--muted);
            flex-shrink: 0
        }
        
        .fc-act.fav-active {
            color: #D6455D
        }
        
        .fc-rat {
            font-size: var(--fs-xs);
            color: var(--muted);
            line-height: 1.5;
            margin-top: 6px
        }
        
        .fc-cta {
            margin-top: 11px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--ink);
            color: #fff;
            border-radius: 11px;
            padding: 9px 14px;
            font-size: var(--fs-xs);
            font-weight: 600;
        }
        
        .fc-cta:disabled {
            opacity: .55;
            cursor: default
        }
        /* Vorschlag bereits als Briefing erstellt & verfügbar */
        .fc-cta-ready {
            background: var(--mint-tint);
            color: var(--mint-text);
            border: 1px solid #BFE9E1;
        }
        /* Vorschlag wird gerade erstellt */
        .fc-cta-busy {
            background: #EFF3F2;
            color: var(--muted);
            border: 1px solid var(--line);
        }
        .fc-spin {
            width: 11px; height: 11px;
            border: 2px solid currentColor; border-top-color: transparent;
            border-radius: 50%; display: inline-block;
            animation: fcspin .8s linear infinite;
        }
        @keyframes fcspin { to { transform: rotate(360deg) } }
        /* ── Bibliothek-Redesign: Liste (Gruppen/Counts/Teaser/Fortschritt) ── */
        .lib-sub { font-size: var(--fs-sm); color: var(--muted); margin: 4px 20px 0 }
        .lib-sub b { color: var(--mint-text); font-weight: 600 }
        .lib-clr { border: none; background: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 4px; flex: none }
        .lib-bar { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-right: 20px }
        .lib-bar .row-chips { flex: 1; min-width: 0 }
        .chip .n { font-family: var(--mono); opacity: .55; margin-left: 5px }
        .chip.on .n { opacity: .85 }
        .lib-sort { flex: none; border: none; background: none; font: 600 var(--fs-xs)/1 var(--mono); color: var(--mint-text); white-space: nowrap; cursor: pointer }
        .lib-sec { display: flex; align-items: center; gap: 7px; margin: 18px 20px 8px }
        .lib-sec b { font: 600 var(--fs-2xs)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mint-text) }
        .lib-sec.plain b { color: var(--muted) }
        .lib-sec .c { font: 600 var(--fs-2xs)/1 var(--mono); color: var(--muted) }
        .lib-item { margin: 8px 20px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden }
        .lib-item:first-child { border-top: 1px solid var(--line) }
        .lib-swipe { background: var(--card) }   /* verdeckt die rote Lösch-Aktion, bis nach links gewischt wird */
        .lib-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 13px; width: 100%; text-align: left; cursor: pointer }
        .lib-row .lr-top { display: flex; align-items: center; gap: 12px }
        .lib-row .b-body b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
        .lib-row .tease { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
        .lib-row .b-chev { color: #9DACA8; flex: none; display: flex }
        .lp { font: 600 9.5px/1 var(--mono); padding: 3px 6px; border-radius: 6px; white-space: nowrap }
        .lp.heard { background: #EEF3F1; color: var(--mint-text) }
        .lp.partial { background: var(--mint-tint); color: var(--mint-text) }
        .lp.new { background: #FCEFD8; color: #8A5A1A }
        .lib-prog { height: 3px; border-radius: 3px; background: var(--line); margin: 10px 0 1px; overflow: hidden }
        .lib-prog > i { display: block; height: 100%; background: var(--mint); border-radius: 3px }
        .lib-reset { border: none; background: none; color: var(--mint-text); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: inherit }
        /* ── Episode-Detail-Sheet ── */
        .ep-card { padding: 0 0 calc(14px + var(--safe-b)); max-height: 90vh; display: flex; flex-direction: column }
        .ep-grab { height: 5px; width: 40px; background: #D6DEDC; border-radius: 3px; margin: 10px auto 2px; flex: none }
        .ep-head { display: flex; gap: 13px; align-items: flex-start; padding: 8px 18px 0; flex: none }
        .ep-cover { width: 60px; height: 60px; border-radius: 14px; flex: none; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--mint-text); background: var(--mint-tint); overflow: hidden }
        .ep-cover img { width: 100%; height: 100%; object-fit: cover }
        .ep-ht { flex: 1; min-width: 0 }
        .ep-title { font-family: var(--display); font-weight: 600; font-size: var(--fs-lg); line-height: 1.15; letter-spacing: -.01em }
        .ep-meta { font: 500 var(--fs-2xs)/1.4 var(--mono); color: var(--muted); margin-top: 6px }
        .ep-x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: #F0F4F2; color: var(--muted); border: none; flex: none; cursor: pointer; font-size: 14px }
        .ep-play { margin: 16px 18px 0; width: calc(100% - 36px); display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--ink); color: #fff; border: none; border-radius: 14px; padding: 14px; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; flex: none }
        .ep-prog { height: 4px; border-radius: 4px; background: var(--line); margin: 10px 18px 0; overflow: hidden; flex: none }
        .ep-prog > i { display: block; height: 100%; background: var(--mint); border-radius: 4px }
        .ep-body { padding: 4px 18px 0; overflow: auto; overscroll-behavior: contain }
        .ep-card.dragging { transition: none !important }
        .ep-body h4 { font: 600 var(--fs-2xs)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint-text); margin: 18px 0 7px }
        .ep-body p { font-size: var(--fs-sm); line-height: 1.55 }
        .ep-body ul { margin: 0; padding-left: 18px }
        .ep-body li { font-size: var(--fs-sm); line-height: 1.5; margin: 5px 0 }
        .ep-body .srcs { display: flex; flex-wrap: wrap; gap: 7px }
        .ep-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 18px 0; padding-top: 14px; border-top: 1px solid var(--line); flex: none }
        .ep-ai { font: 500 var(--fs-2xs)/1.3 var(--mono); color: var(--muted); display: flex; align-items: center; gap: 6px }
        .ep-del { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: none; border: none; cursor: pointer; flex: none }
        .ep-share-btn { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: 650; background: var(--mint-deep); color: #fff; border: none; border-radius: 10px; padding: 8px 14px; cursor: pointer; flex: none }
        .ag-go { width: 100%; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: #fff; border: none; border-radius: 14px; padding: 15px; font-weight: 600; font-size: var(--fs-sm); cursor: pointer }
        /* Mini-Player taucht beim Runterscrollen weg (gibt Platz frei), kommt beim Hochscrollen zurück */
        .mini { transition: transform .28s ease }
        .mini.tucked { transform: translateX(-50%) translateY(calc(100% + var(--navH) + var(--safe-b) + 8px)) }
        /* Swipe-links: Mini rutscht nach links und gibt die Close-Aktion frei */
        .mini.peek { transform: translateX(calc(-50% - 76px)) }
        .mini-close { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--navH) + var(--safe-b)); width: 100%; max-width: 520px; height: var(--miniH); z-index: 39; display: none; align-items: center; justify-content: flex-end }
        .mini.show ~ .mini-close { display: flex }
        .mini.tucked ~ .mini-close { display: none }
        .mini-close .x { width: 76px; height: 100%; border: none; background: #5F6E6A; color: #fff; display: grid; place-items: center; cursor: pointer }
        /* Outcome-Feedback (adaptiv: heller Sheet & dunkler Player) */
        #eps-feedback { padding: 0 18px }
        #player-feedback { padding: 0 20px }
        .fb { margin-top: 14px; padding: 13px 14px; border: 1px solid rgba(127,135,133,.32); border-radius: 14px }
        .fb-q { font-size: var(--fs-sm); font-weight: 600 }
        .fb-thumbs { display: flex; gap: 10px; margin-top: 10px }
        .fb-tb { width: 52px; height: 40px; border: 1px solid rgba(127,135,133,.4); border-radius: 12px; background: transparent; font-size: 18px; cursor: pointer; color: inherit }
        .fb-tb.on { border-color: var(--mint); background: rgba(18,194,173,.16) }
        .fb-more { margin-top: 11px }
        .fb-chips { display: flex; flex-wrap: wrap; gap: 7px }
        .fb-chip { font-size: var(--fs-xs); border: 1px solid rgba(127,135,133,.4); border-radius: 999px; padding: 6px 11px; background: transparent; color: inherit; cursor: pointer }
        .fb-chip.on { border-color: var(--mint); background: rgba(18,194,173,.16) }
        .fb-text { width: 100%; margin-top: 9px; border: 1px solid rgba(127,135,133,.4); border-radius: 10px; background: transparent; color: inherit; padding: 8px 10px; font: inherit; font-size: var(--fs-sm); resize: vertical }
        .fb-send { margin-top: 9px; background: var(--mint); color: #06302A; border: none; border-radius: 10px; padding: 9px 16px; font-weight: 600; font-size: var(--fs-sm); cursor: pointer }
        .fb-done { margin-top: 14px; font-size: var(--fs-sm); color: var(--mint-text); font-weight: 600 }
        @media (min-width: 1000px) {
          .lib-bar { padding-right: 0 }
          #lib-list .lib-sec { grid-column: 1 / -1; margin: 18px 0 6px }
          .lib-item { margin: 0 }
        }
        
        .fc-err {
            display: block;
            color: var(--err);
            font-size: var(--fs-xs);
            margin-top: 6px
        }
        
        .skel {
            margin: 0 20px 10px;
            border: 1px dashed var(--line);
            border-radius: var(--r-md);
            padding: 16px;
            font-size: var(--fs-xs);
            color: var(--muted)
        }
        
        .skel .bar {
            height: 9px;
            border-radius: 5px;
            background: var(--line);
            margin-bottom: 8px;
            animation: pulse 1.2s infinite
        }
        
        @keyframes pulse {
            0%,
            100% {
                opacity: .5
            }
            50% {
                opacity: 1
            }
        }
        /* Inspire-Progress */
        
        .ip-panel {
            margin: 14px 20px 0;
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            padding: 13px 15px;
            background: #fff;
            display: none
        }
        
        .ip-panel.show {
            display: block
        }
        
        .ip-track {
            height: 4px;
            border-radius: 2px;
            background: var(--line);
            margin-top: 10px;
            overflow: hidden
        }
        
        .ip-fill {
            height: 100%;
            width: 0;
            background: var(--mint);
            transition: width .5s ease;
            border-radius: 2px
        }
        
        .ip-status {
            font-size: var(--fs-xs);
            color: var(--muted);
            margin-top: 8px
        }
        
        .ip-status.err {
            color: var(--err)
        }
        /* Erstellen */
        
        .inspire-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 26px 20px 4px;
            color: var(--muted)
        }
        
        .inspire-divider::before,
        .inspire-divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: var(--line)
        }
        
        .inspire-divider span {
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .12em;
            text-transform: uppercase
        }
        
        .profhint {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 11px 22px 0;
            font-size: var(--fs-2xs);
            color: var(--muted)
        }
        
        .pd {
            display: flex;
            gap: 3px
        }
        
        .pd i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--mint);
            display: block
        }
        
        .pd i.off {
            background: #D6E0DD
        }
        
        .composer {
            margin: 14px 20px 0;
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            background: #fff;
            padding: 13px 14px
        }
        
        .composer textarea {
            width: 100%;
            border: none;
            outline: none;
            resize: none;
            background: none;
            font-size: var(--fs-sm);
            line-height: 1.5;
            min-height: 84px;
        }
        
        .cta {
            margin: 16px 20px 0;
            width: calc(100% - 40px);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--ink);
            color: #fff;
            border-radius: 14px;
            padding: 15px;
            font-weight: 600;
            font-size: var(--fs-sm);
        }
        
        .pc-revoke-btn {
            background: transparent;
            color: var(--err);
            border: 1.5px solid var(--err);
        }
        .pc-revoke-btn:hover { background: var(--err); color: #fff }

        .cta:disabled {
            opacity: .45;
            cursor: default
        }

        /* ── Neues Briefing: strukturierte Pfad-Karten ── */
        .view-sub {
            padding: 6px 20px 0;
            font-size: var(--fs-sm);
            color: var(--muted);
            line-height: 1.5;
        }
        .create-card {
            margin: 16px 20px 0;
            border: 1px solid var(--line);
            border-radius: var(--r-lg);
            background: #fff;
            padding: 16px;
        }
        .create-card .cc-head {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            margin-bottom: 14px;
        }
        .cc-ico {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--mint-tint);
            color: var(--mint-deep);
        }
        .cc-ico.dark {
            background: var(--ink);
            color: #fff;
        }
        .cc-head b {
            font-family: var(--display);
            font-weight: 600;
            font-size: var(--fs-md);
            letter-spacing: -.01em;
            display: block;
        }
        .cc-head p {
            font-size: var(--fs-xs);
            color: var(--muted);
            line-height: 1.45;
            margin-top: 3px;
        }
        /* Kinder innerhalb der Karte: volle Breite, keine doppelten Außenabstände */
        .create-card .composer {
            margin: 0;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #FAFCFB;
            padding: 12px 13px;
        }
        .create-card .cta {
            margin: 14px 0 0;
            width: 100%;
        }
        .create-card #btn-inspire {
            max-width: none;
            margin: 0;
        }
        .create-card .profhint {
            padding: 12px 2px 0;
        }
        .create-card .ip-panel {
            margin: 12px 0 0;
        }
        /* Ergebnisbereich der Vorschläge */
        #insp-results .row-chips {
            margin-top: 18px;
        }

        .cta.mint {
            background: var(--mint);
            color: #06302A
        }
        /* Job-Karten (laufende Erstellungen) */
        
        .job {
            margin: 10px 20px 0;
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            background: #fff;
            padding: 12px 14px;
        }
        
        .job b {
            font-size: var(--fs-sm);
            font-weight: 600;
            display: block;
            line-height: 1.35
        }
        
        .job .jl {
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--muted);
            margin-top: 6px;
            white-space: pre-wrap;
            max-height: 88px;
            overflow: auto
        }
        
        .job .jl .lok {
            color: var(--ok)
        }
        
        .job .jl .lerr {
            color: var(--err)
        }
        
        .job .thread {
            height: 16px;
            color: #C9D6D2;
            margin-top: 8px
        }

        /* ── In-Progress-Karte in Bibliothek ── */
        .lib-job {
            border: 1.5px solid var(--mint);
            border-radius: var(--r-md);
            background: #fff;
            padding: 16px 16px 14px;
            margin: 0 20px 12px;   /* Gutter wie übrige Karten – nicht breiter als Briefings */
        }
        .lib-job-head {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 14px;
        }
        .lib-job-title {
            font-family: var(--display);
            font-weight: 600;
            font-size: var(--fs-md);
            letter-spacing: -.01em;
            line-height: 1.3;
            flex: 1;
        }
        .lib-job-time {
            font-family: var(--mono);
            font-size: var(--fs-2xs);
            color: var(--muted);
            flex-shrink: 0;
        }
        .lib-job-steps { display: flex; flex-direction: column; }
        .lib-job-step {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 9px 0;
            border-top: 1px solid var(--line);
            font-size: var(--fs-sm);
            color: var(--muted);
        }
        .lib-job-step:first-child { border-top: none; }
        .step-circle {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            flex-shrink: 0;
            border: 2px solid #D4DFDC;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }
        .lib-job-step.active { color: var(--ink); }
        .lib-job-step.active .step-label { font-weight: 600; }
        .lib-job-step.active .step-circle {
            border-color: var(--mint);
            border-top-color: transparent;
            animation: ljspin .8s linear infinite;
        }
        .lib-job-step.done .step-circle {
            background: var(--mint-tint);
            border-color: var(--mint-deep);
        }
        .lib-job-step.done .step-circle::after {
            content: '';
            width: 4px;
            height: 7px;
            border: 1.8px solid var(--mint-deep);
            border-top: none;
            border-left: none;
            transform: rotate(45deg) translateY(-1px);
            display: block;
        }
        @keyframes ljspin { to { transform: rotate(360deg); } }
        .lib-job-bar {
            height: 3px;
            border-radius: 2px;
            background: var(--line);
            margin-top: 14px;
            overflow: hidden;
        }
        .lib-job-fill {
            height: 100%;
            width: 4%;
            background: var(--ink);
            border-radius: 2px;
            transition: width .7s ease;
        }
        .lib-job-status {
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--muted);
            margin-top: 8px;
        }

        /* Profil */
        
        .prof-head {
            margin: 16px 20px 0;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            padding: 13px 15px;
            background: #fff;
        }
        
        .prof-head b {
            font-size: var(--fs-sm);
            font-weight: 600;
            display: block;
            letter-spacing: -.01em
        }
        
        .prof-head span {
            font-size: var(--fs-2xs);
            color: var(--muted);
            word-break: break-all
        }
        
        .prof-head .pd {
            margin-left: auto;
            flex-shrink: 0
        }
        
        .pf-field {
            margin: 0 20px 10px
        }
        
        .pf-field label {
            display: block;
            font-family: var(--mono);
            font-size: 9.5px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 5px
        }
        
        .pf-field .hintq {
            display: block;
            font-size: var(--fs-2xs);
            color: #9FAFAB;
            font-style: italic;
            margin-bottom: 5px
        }
        
        .pf-input {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff;
            padding: 11px 13px;
            font-size: var(--fs-sm);
            outline: none;
            resize: none;
        }
        
        .pf-input:focus {
            border-color: var(--mint)
        }
        
        textarea.pf-input {
            min-height: 92px;
            line-height: 1.5
        }

        .danger-btn {
            width: 100%;
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--err);
            color: #fff;
            border-radius: 14px;
            padding: 14px;
            font-weight: 600;
            font-size: var(--fs-sm);
        }
        #reset-modal .sheet p,
        #del-modal .sheet p {
            margin-top: 8px;
        }
        #del-modal .del-title {
            font-weight: 600;
            color: var(--ink);
        }

        .prof-foot {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 4px 20px 0
        }
        
        .prof-foot .st {
            font-size: var(--fs-2xs);
            color: var(--mint-deep);
            min-height: 16px
        }
        
        .legal-foot {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            padding: 24px 20px 8px;
            font-size: var(--fs-xs);
            color: var(--muted);
        }
        .legal-foot a, .legal-foot button {
            color: var(--muted);
            text-decoration: underline;
            text-underline-offset: 3px;
            font-size: var(--fs-xs);
            background: none;
        }
        .prof-foot button {
            margin-left: auto;
            font-size: var(--fs-xs);
            color: var(--muted);
            text-decoration: underline;
            text-underline-offset: 3px
        }

        /* ── Profilstärke-Banner ── */
        .pf-strength {
            margin: 14px 20px 0;
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            background: linear-gradient(160deg, #F2FBF9 0%, #FFFFFF 70%);
            padding: 15px 16px 16px;
        }
        .pf-strength .pf-st-top {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
        }
        .pf-strength b {
            font-family: var(--display);
            font-weight: 600;
            font-size: var(--fs-sm);
            letter-spacing: -.01em;
        }
        .pf-strength .pf-st-count {
            font-family: var(--mono);
            font-size: var(--fs-2xs);
            color: var(--mint-deep);
            flex-shrink: 0;
        }
        .pf-strength p {
            font-size: var(--fs-xs);
            color: var(--muted);
            line-height: 1.5;
            margin-top: 5px;
        }
        .pf-st-bar {
            height: 6px;
            border-radius: 3px;
            background: var(--line);
            margin-top: 12px;
            overflow: hidden;
        }
        .pf-st-fill {
            height: 100%;
            width: 0;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--mint-deep), var(--mint));
            transition: width .5s ease;
        }

        /* ── Fokusthemen-Chips ── */
        .ftopics {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin: 0 20px 4px;
        }
        .ftopic {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--ink);
            color: #fff;
            border-radius: 999px;
            padding: 10px 14px;
            font-size: var(--fs-sm);
            font-weight: 500;
            letter-spacing: -.01em;
            max-width: 100%;
        }
        .ftopic span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ftopic .ft-del {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .18);
            color: #fff;
            font-size: var(--fs-xs);
            line-height: 1;
            flex-shrink: 0;
        }
        .ft-add {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1.5px solid var(--line);
            color: var(--muted);
            background: #fff;
            flex-shrink: 0;
        }
        .ft-add:hover {
            border-color: var(--mint);
            color: var(--mint-deep);
        }
        .ft-input {
            border: 1.5px solid var(--mint);
            border-radius: 999px;
            padding: 9px 14px;
            font-size: var(--fs-sm);
            outline: none;
            background: #fff;
            min-width: 160px;
            max-width: 100%;
        }
        .ft-hint {
            font-size: var(--fs-2xs);
            color: #9FAFAB;
            font-style: italic;
            padding: 0 20px;
            margin-top: 6px;
        }

        .prow {
            margin: 0 20px 10px;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            padding: 12px 14px;
            background: #fff;
            width: calc(100% - 40px);
            text-align: left;
        }
        
        .prow .ico {
            width: 36px;
            height: 36px;
            border-radius: 11px;
            background: var(--mint-tint);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }
        
        .prow b {
            font-size: var(--fs-sm);
            font-weight: 600;
            display: block
        }
        
        .prow span {
            font-size: var(--fs-2xs);
            color: var(--muted)
        }
        
        .prow .arr {
            margin-left: auto;
            color: var(--muted)
        }

        .usage-card {
            margin: -2px 20px 10px;
            width: calc(100% - 40px);
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            padding: 12px 14px;
            background: #fff;
        }
        .usage-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: 8px;
            gap: 10px;
        }
        .usage-head #usage-plan { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
        .usage-head #usage-count { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
        .usage-track { height: 7px; border-radius: 5px; background: var(--line); overflow: hidden; }
        .usage-fill { height: 100%; border-radius: 5px; background: var(--mint); width: 0; transition: width .35s ease; }
        .usage-fill.full { background: #E0872F; }
        .usage-break { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
        .usage-reset { margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); opacity: .8; }
        /* Bottom-Navigation */
        
        .nav {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            width: 100%;
            max-width: 520px;
            z-index: 40;
            border-top: 1px solid var(--line);
            background: color-mix(in srgb, #fff 94%, transparent);
            backdrop-filter: blur(10px) saturate(150%);
            -webkit-backdrop-filter: blur(10px) saturate(150%);
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 14px calc(10px + var(--safe-b));
            height: calc(var(--navH) + var(--safe-b));
        }
        
        .nav .n {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            font-size: var(--fs-2xs);
            color: var(--muted);
            font-weight: 500;
            flex: 1;
            height: 44px
        }
        
        .nav .n.on {
            color: var(--ink)
        }
        /* Erstellen als abgesetzte Aktion rechts (kein Navigations-Ort) */
        
        .nav .n[data-view="erstellen"] {
            flex: 0 0 auto;
            width: 48px;
            margin-left: 6px
        }
        
        .nav .n-add {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            background: var(--ink);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--e-sm)
        }
        /* Mini-Player */
        
        .mini {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: calc(var(--navH) + var(--safe-b));
            width: 100%;
            max-width: 520px;
            z-index: 40;
            height: var(--miniH);
            display: none;
            align-items: center;
            gap: 10px;
            padding: 0 16px;
            background: var(--deep);
            color: var(--deep-text);
            border-top: 1px solid #16302B;
            cursor: pointer;
        }
        
        .mini.show {
            display: flex
        }
        
        .mini-row {
            display: contents
        }
        
        .mini .thread {
            height: 16px;
            color: #3E5A53;
            flex-shrink: 0
        }
        
        .mini .mt {
            flex: 1;
            min-width: 0;
            text-align: left
        }
        
        .mini .mt b {
            font-size: var(--fs-xs);
            font-weight: 600;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }
        
        .mini .mt span {
            font-family: var(--mono);
            font-size: 9px;
            color: var(--deep-muted)
        }
        
        .mini .playbtn {
            width: 34px;
            height: 34px;
            box-shadow: none
        }
        /* ════════════════ Vollbild-Player (dunkel) ════════════════ */
        
        .player {
            position: fixed;
            inset: 0;
            z-index: 60;
            background: var(--deep);
            color: var(--deep-text);
            display: none;
            flex-direction: column;
            max-width: 520px;
            margin: 0 auto;
            padding-bottom: calc(12px + var(--safe-b));
        }
        
        .player.open {
            display: flex;
            animation: pup .22s ease
        }
        
        @keyframes pup {
            from {
                transform: translateY(24px);
                opacity: .4
            }
            to {
                transform: none;
                opacity: 1
            }
        }
        
        .p-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px 0;
            flex-shrink: 0
        }
        
        .p-top .icbtn {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1px solid var(--deep-line);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--deep-muted)
        }
        
        .p-top .now {
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .12em;
            color: var(--deep-muted);
            text-transform: uppercase
        }
        
        .p-title {
            padding: 20px 24px 0;
            flex-shrink: 0
        }
        
        .p-title h3 {
            font-family: var(--display);
            font-weight: 600;
            font-size: var(--fs-lg);
            letter-spacing: -.02em;
            line-height: 1.25
        }
        
        .p-title .meta {
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--deep-muted);
            margin-top: 7px;
            text-transform: uppercase
        }

        /* KI-Transparenzhinweis (EU AI Act) */
        .ai-note {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: var(--fs-2xs);
            line-height: 1.3;
            color: var(--muted);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 4px 10px;
            background: #fff;
        }
        .ai-note svg { flex-shrink: 0; opacity: .8 }
        .ai-note-dark {
            margin-top: 12px;
            color: var(--deep-muted);
            background: rgba(255, 255, 255, .04);
            border-color: var(--deep-line);
        }

        .chapters {
            padding: 14px 24px 0;
            overflow-y: auto;
            min-height: 0
        }
        
        .ch {
            display: flex;
            gap: 12px;
            align-items: baseline;
            padding: 7px 0;
            font-size: var(--fs-xs);
            color: var(--deep-muted);
            width: 100%;
            text-align: left
        }
        
        .ch .t {
            font-family: var(--mono);
            font-size: 10px;
            width: 38px;
            flex-shrink: 0
        }
        
        .ch.live {
            color: var(--deep-text);
            font-weight: 500
        }
        
        .ch.live .t {
            color: var(--mint)
        }
        
        .ch .dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--mint);
            flex-shrink: 0;
            align-self: center;
            margin-left: auto
        }
        
        .facts {
            display: flex;
            gap: 8px;
            padding: 12px 24px 0;
            flex-shrink: 0;
            flex-wrap: wrap
        }
        
        .facts span {
            font-family: var(--mono);
            font-size: 9.5px;
            color: var(--deep-muted);
            border: 1px solid var(--deep-line);
            border-radius: 999px;
            padding: 5px 10px;
        }
        
        .facts b {
            color: var(--mint);
            font-weight: 500
        }

        .fact-btn {
            font-family: var(--mono);
            font-size: 9.5px;
            color: var(--deep-muted);
            border: 1px solid var(--deep-line);
            border-radius: 999px;
            padding: 5px 10px;
            background: none;
            cursor: pointer;
            transition: border-color .15s, color .15s;
        }
        .fact-btn:hover, .fact-btn.active {
            border-color: rgba(18,194,173,.6);
            color: var(--deep-text);
        }
        #p-detail {
            display: none;
            padding: 10px 24px 0;
            flex-shrink: 0;
            overflow-y: auto;
            max-height: 150px;
        }
        .pd-head {
            font-family: var(--mono);
            font-size: 9px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--mint);
            margin-bottom: 8px;
        }
        .pd-list {
            padding-left: 16px;
            font-size: var(--fs-xs);
            color: var(--deep-text);
            line-height: 1.55;
        }
        .pd-list li { margin-bottom: 4px; }
        .pd-chips { display: flex; flex-wrap: wrap; gap: 6px; }

        .wave-zone {
            margin-top: auto;
            padding: 14px 24px 0;
            flex-shrink: 0
        }
        
        .bigthread {
            display: flex;
            align-items: flex-end;
            gap: 3px;
            height: 54px;
            color: #2C4640;
            cursor: pointer;
            touch-action: none
        }
        
        .bigthread i {
            flex: 1;
            border-radius: 2px;
            background: currentColor;
            display: block;
            min-width: 2px
        }
        
        .bigthread i.done {
            background: var(--mint)
        }
        
        .timecodes {
            display: flex;
            justify-content: space-between;
            font-family: var(--mono);
            font-size: 10px;
            color: var(--deep-muted);
            margin-top: 8px
        }
        
        .askbtn {
            margin: 14px 24px 0;
            display: flex;
            align-items: center;
            gap: 10px;
            width: calc(100% - 48px);
            text-align: left;
            border: 1px solid rgba(18, 194, 173, .45);
            background: rgba(18, 194, 173, .10);
            border-radius: 999px;
            padding: 11px 16px;
            color: var(--deep-text);
            flex-shrink: 0;
        }
        
        .askbtn:disabled {
            opacity: .4
        }
        
        .askbtn .mic {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--mint);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center
        }
        
        .askbtn b {
            font-size: var(--fs-sm);
            font-weight: 600;
            display: block;
            letter-spacing: -.01em
        }
        
        .askbtn small {
            font-size: var(--fs-2xs);
            color: var(--deep-muted);
            display: block;
            margin-top: 1px
        }
        
        .p-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 34px;
            padding: 14px 0 6px;
            flex-shrink: 0
        }
        
        .p-controls .skip {
            font-family: var(--mono);
            font-size: 10px;
            color: var(--deep-muted);
            text-align: center
        }
        
        .p-controls .skip svg {
            display: block;
            margin: 0 auto 3px
        }
        
        .bigplay {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--mint);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--e-mint);
        }
        /* ════════════════ Frag-nach-Sheet ════════════════ */
        
        .ask {
            position: fixed;
            inset: 0;
            z-index: 70;
            background: var(--deep);
            color: var(--deep-text);
            display: none;
            flex-direction: column;
            max-width: 520px;
            margin: 0 auto;
            padding-bottom: calc(12px + var(--safe-b));
        }
        
        .ask.open {
            display: flex;
            animation: pup .22s ease
        }
        
        .pausebadge {
            margin: 14px 24px 0;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            align-self: flex-start;
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--mint);
            border: 1px solid rgba(18, 194, 173, .4);
            border-radius: 999px;
            padding: 5px 11px;
            flex-shrink: 0;
        }
        
        .pausebadge .pp {
            display: flex;
            gap: 2px
        }
        
        .pausebadge .pp i {
            width: 2.5px;
            height: 9px;
            background: var(--mint);
            border-radius: 1px;
            display: block
        }
        
        .msgs {
            flex: 1;
            overflow-y: auto;
            padding: 14px 20px 6px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 0
        }
        
        .bub {
            max-width: 86%;
            border-radius: var(--r-md);
            padding: 11px 14px;
            font-size: var(--fs-sm);
            line-height: 1.5
        }
        
        .bub.user {
            align-self: flex-end;
            background: rgba(18, 194, 173, .16);
            border: 1px solid rgba(18, 194, 173, .3)
        }
        
        .bub.bot {
            align-self: flex-start;
            background: var(--deep-2);
            border: 1px solid var(--deep-line)
        }
        
        .bub.bot .who {
            font-family: var(--mono);
            font-size: 9px;
            letter-spacing: .12em;
            color: var(--mint);
            text-transform: uppercase;
            display: block;
            margin-bottom: 5px
        }
        
        .bub .audio-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 9px;
            font-size: var(--fs-2xs);
            font-weight: 600;
            color: var(--mint);
            border: 1px solid rgba(18, 194, 173, .4);
            border-radius: 999px;
            padding: 5px 11px;
        }
        
        .typing {
            align-self: flex-start;
            display: flex;
            gap: 4px;
            padding: 12px 14px
        }
        
        .typing i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--deep-muted);
            animation: tp 1s infinite
        }
        
        .typing i:nth-child(2) {
            animation-delay: .15s
        }
        
        .typing i:nth-child(3) {
            animation-delay: .3s
        }
        
        @keyframes tp {
            0%,
            100% {
                opacity: .3;
                transform: translateY(0)
            }
            50% {
                opacity: 1;
                transform: translateY(-3px)
            }
        }
        
        .ask-status {
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .1em;
            color: var(--deep-muted);
            padding: 0 24px 6px;
            text-transform: uppercase;
            min-height: 20px;
            flex-shrink: 0
        }
        
        .sugg {
            display: flex;
            gap: 7px;
            overflow-x: auto;
            padding: 4px 20px 0;
            flex-shrink: 0;
            scrollbar-width: none
        }
        
        .sugg::-webkit-scrollbar {
            display: none
        }
        
        .sugg button {
            font-size: var(--fs-2xs);
            color: var(--deep-muted);
            border: 1px solid var(--deep-line);
            border-radius: 999px;
            padding: 7px 12px;
            white-space: nowrap
        }
        
        /* Voice-Gespräch aktiv: Textfeld + Vorschläge aus, animierte Wellen-Anzeige */
        .ask.voice-active #sugg { display: none }
        .ask.voice-active .ask-bar .field { display: none }
        .ask-wave { display: none }
        .ask.voice-active .ask-wave {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            gap: 5px;
            height: 44px
        }
        .ask-wave i {
            width: 4px;
            height: 8px;
            border-radius: 2px;
            background: var(--mint);
            animation: askwave 1s ease-in-out infinite
        }
        .ask-wave i:nth-child(2) { animation-delay: .12s }
        .ask-wave i:nth-child(3) { animation-delay: .24s }
        .ask-wave i:nth-child(4) { animation-delay: .36s }
        .ask-wave i:nth-child(5) { animation-delay: .48s }
        @keyframes askwave {
            0%, 100% { height: 8px; opacity: .5 }
            50% { height: 24px; opacity: 1 }
        }
        .ask-bar .rbtn.stop {
            background: var(--err);
            border-color: var(--err);
            color: #fff
        }

        .ask-bar {
            margin: 12px 20px 0;
            display: flex;
            gap: 8px;
            align-items: flex-end;
            flex-shrink: 0
        }
        
        .ask-bar .field {
            flex: 1;
            border: 1.5px solid var(--deep-line);
            background: var(--deep-2);
            border-radius: 22px;
            padding: 11px 16px;
            font-size: var(--fs-sm);
            color: var(--deep-text);
            outline: none;
            resize: none;
            max-height: 120px;
            line-height: 1.4;
        }
        
        .ask-bar .field:focus {
            border-color: var(--mint)
        }
        
        .ask-bar .rbtn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            flex-shrink: 0;
            background: rgba(18, 194, 173, .14);
            border: 1px solid rgba(18, 194, 173, .45);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--mint);
        }
        
        .ask-bar .rbtn.send {
            background: var(--mint);
            color: #06302A
        }
        
        .ask-bar .rbtn.recording {
            background: var(--err);
            border-color: var(--err);
            color: #fff;
            animation: rec 1.2s infinite
        }
        
        @keyframes rec {
            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(178, 58, 58, .5)
            }
            50% {
                box-shadow: 0 0 0 9px rgba(178, 58, 58, 0)
            }
        }
        
        .resume-cta {
            margin: 12px 20px 0;
            width: calc(100% - 40px);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--mint);
            color: #06302A;
            border-radius: 14px;
            padding: 14px;
            font-weight: 600;
            font-size: var(--fs-sm);
            flex-shrink: 0;
        }
        /* ════════════════ Paywall ════════════════ */
        
        .modal {
            position: fixed;
            inset: 0;
            z-index: 90;
            background: rgba(10, 27, 24, .55);
            display: none;
            align-items: flex-end;
            justify-content: center
        }
        
        .modal.open {
            display: flex
        }
        
        .modal .sheet {
            width: 100%;
            max-width: 520px;
            background: #fff;
            border-radius: 24px 24px 0 0;
            padding: 22px 20px calc(24px + var(--safe-b));
            animation: pup .22s ease;
            max-height: 92vh;
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        .boost-btn {
            width: 100%;
            margin-top: 14px;
            padding: 14px;
            border-radius: 14px;
            border: 1.5px solid var(--mint-deep);
            background: var(--mint-tint);
            color: var(--mint-text);
            font-weight: 600;
            font-size: var(--fs-sm);
            font-family: inherit;
            cursor: pointer;
        }
        .boost-btn:hover { background: var(--mint); color: #fff; }
        .boost-btn:disabled { opacity: .6; cursor: default; }
        
        .modal h3 {
            font-family: var(--display);
            font-weight: 700;
            font-size: var(--fs-lg);
            letter-spacing: -.02em
        }
        
        .modal p {
            font-size: var(--fs-sm);
            color: var(--muted);
            margin-top: 6px;
            line-height: 1.5
        }
        
        .plan {
            margin-top: 12px;
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: left;
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            padding: 14px 15px;
        }
        
        .plan b {
            font-family: var(--display);
            font-size: var(--fs-md);
            display: block
        }
        
        .plan span {
            font-size: var(--fs-xs);
            color: var(--muted)
        }
        
        .plan .pr {
            margin-left: auto;
            font-family: var(--mono);
            font-size: var(--fs-xs);
            color: var(--mint-deep);
            white-space: nowrap
        }
        .plan.on {
            border-color: var(--ink);
            box-shadow: 0 0 0 1px var(--ink) inset;
        }
        .plan.on .pr { color: var(--ink); font-weight: 600; }
        .plan.on .pr::after { content: " ✓"; color: var(--mint-deep); }

        /* Abrechnungsintervall-Umschalter */
        .bill-toggle {
            display: flex;
            gap: 4px;
            margin-top: 14px;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 4px;
            background: #FAFCFB;
        }
        .bt-opt {
            flex: 1;
            text-align: center;
            padding: 9px 6px;
            font-size: var(--fs-xs);
            font-weight: 500;
            border-radius: 9px;
            color: var(--muted);
        }
        .bt-opt.on {
            background: var(--ink);
            color: #fff;
        }

        /* Button-Lösung: Einwilligung + zahlungspflichtiger Bestell-Button */
        .pay-consent {
            display: flex;
            gap: 9px;
            align-items: flex-start;
            margin-top: 16px;
            font-size: var(--fs-xs);
            line-height: 1.45;
            color: var(--ink);
        }
        .pay-consent input {
            margin-top: 2px;
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            accent-color: var(--mint-deep);
        }
        .pay-note {
            font-size: var(--fs-2xs);
            color: var(--muted);
            margin-top: 10px;
            line-height: 1.45;
        }
        #paywall .cta {
            margin: 14px 0 0;
            width: 100%;
        }

        .modal .close {
            margin-top: 14px;
            width: 100%;
            text-align: center;
            font-size: var(--fs-sm);
            color: var(--muted);
            padding: 8px
        }
        
        .toast {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: calc(var(--navH) + var(--miniH) + var(--safe-b) + 16px);
            background: var(--ink);
            color: #fff;
            font-size: var(--fs-xs);
            border-radius: 999px;
            padding: 9px 16px;
            z-index: 95;
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s;
        }
        
        .toast.show {
            opacity: 1
        }
        /* ═══════════════════════════════════════════════════════════════════════
   DESKTOP (≥ 1000px) — eigenes Bedienkonzept, kein verbreitertes Mobile
   · Linke Sidebar mit Labels + persistenter Mini-Player unten links
   · Player/Frag-nach kontextabhängig:
       – Dock-Modus  : rechte Spalte, Liste links bleibt bedienbar (Default)
       – Fokus-Modus : großer zentrierter Dialog (Umschalter im Player-Kopf, Taste F)
   · Mehrspalten-Listen, Hover-Affordances, Tastatur-Shortcuts
   Mobile (< 1000px) bleibt unverändert.
   ═══════════════════════════════════════════════════════════════════════ */
        
        .nav-brand {
            display: none
        }
        
        .n-lbl {
            display: none
        }
        
        .dock-toggle {
            display: none
        }
        
        @media (hover:hover) and (pointer:fine) {
            .b-item,
            .lib-item,
            .lib-row,
            .chip,
            .focus-card,
            .nav .n,
            .prow {
                transition: background .12s ease, border-color .12s ease, box-shadow .15s ease
            }
            .b-item:hover,
            .lib-row:hover {
                background: #FBFDFC
            }
            /* Klare Klickbarkeits-Affordance der Bibliotheks-Kacheln auf Desktop:
               sanfter Schatten beim Hover (Cursor ist bereits pointer, Text+Bild erben ihn). */
            .lib-item:hover {
                box-shadow: var(--e-md)
            }
            .chip:hover {
                border-color: #BFD0CC
            }
            .nav .n:hover {
                color: var(--ink)
            }
            .focus-card:hover {
                box-shadow: var(--e-md)
            }
            .prow:hover {
                border-color: #BFD0CC
            }
            .b-play:hover {
                border-color: var(--ink)
            }
        }
        
        @media (min-width:1000px) {
             :root {
                --side: 244px;
                --dockW: 404px;
            }
            /* ---- Grundlayout: feste Sidebar links, Inhalt daneben ---- */
            body {
                background: var(--paper)
            }
            .app {
                max-width: none;
                margin: 0;
                border: none;
                padding-left: var(--side);
                padding-bottom: 48px;
                min-height: 100dvh;
                transition: padding-right .24s cubic-bezier(.4, 0, .2, 1);
            }
            .view {
                max-width: 1040px;
                margin: 0 auto;
                padding: 16px 44px 56px;
                animation: none
            }
            .pad {
                padding: 0
            }
            h1.vtitle,
            h1.greet {
                font-size: 32px;
                letter-spacing: -.035em
            }
            h1.vtitle {
                padding: 30px 20px 0
            }
            .top {
                padding: 30px 20px 0
            }
            /* ---- Sidebar (war Bottom-Nav) ---- */
            .nav {
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                right: auto;
                transform: none;
                z-index: 45;
                width: var(--side);
                max-width: none;
                height: auto;
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                gap: 3px;
                padding: 22px 14px 16px;
                border-top: none;
                border-right: 1px solid var(--line);
                background: #fff;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            .nav-brand {
                display: flex;
                align-items: center;
                gap: 9px;
                padding: 4px 12px 20px;
                font-family: var(--display);
                font-weight: 700;
                font-size: var(--fs-lg);
                letter-spacing: -.02em;
                color: var(--ink);
                order: -2;
            }
            .nav-brand .nav-logo {
                height: 26px;
                width: auto;
                max-width: 150px;
                object-fit: contain;
                display: block;
            }
            .nav-brand .brand-mark {
                display: inline-flex;
                align-items: flex-end;
                gap: 2.5px;
                height: 18px
            }
            .nav-brand .brand-mark i {
                width: 3.5px;
                border-radius: 2px;
                background: var(--mint);
                display: block
            }
            .nav-brand .brand-mark i:nth-child(1) {
                height: 8px
            }
            .nav-brand .brand-mark i:nth-child(2) {
                height: 17px
            }
            .nav-brand .brand-mark i:nth-child(3) {
                height: 12px
            }
            .nav-brand .brand-mark i:nth-child(4) {
                height: 6px
            }
            .nav .n {
                flex: 0 0 auto;
                flex-direction: row;
                justify-content: flex-start;
                gap: 13px;
                width: 100%;
                min-width: 0;
                height: auto;
                font-size: var(--fs-sm);
                font-weight: 500;
                padding: 11px 13px;
                border-radius: 12px;
                color: var(--muted);
            }
            .nav .n svg {
                flex-shrink: 0
            }
            .nav .n.on {
                background: var(--mint-tint);
                color: var(--ink)
            }
            .nav .n-lbl {
                display: inline
            }
            /* „Erstellen“ wird zur prominenten Aktion oben, nicht zum FAB in der Mitte */
            .nav .n[data-view="erstellen"] {
                order: -1;
                background: var(--ink);
                color: #fff;
                margin-bottom: 8px;
                margin-left: 0;
                flex: 0 0 auto;
                width: 100%;
            }
            .nav .n[data-view="erstellen"].on {
                background: var(--ink);
                color: #fff
            }
            .nav .n[data-view="erstellen"] .n-add {
                width: 24px;
                height: 24px;
                border-radius: 8px;
                margin: 0;
                background: rgba(255, 255, 255, .18);
            }
            .nav .n[data-view="profil"] {
                margin-top: auto
            }
            /* ---- Mini-Player: unten links unter der Sidebar-Navigation ---- */
            .mini {
                position: fixed;
                left: 0;
                right: auto;
                bottom: 0;
                transform: none;
                z-index: 46;
                width: var(--side);
                max-width: none;
                height: auto;
                min-height: 64px;
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
                padding: 12px 14px calc(14px + var(--safe-b));
                border-top: 1px solid var(--line);
                border-right: 1px solid var(--line);
                background: var(--deep);
            }
            .mini .mt {
                order: 1;
                text-align: left
            }
            .mini-row {
                display: flex;
                align-items: center;
                gap: 10px;
                order: 2
            }
            .mini .thread {
                display: flex
            }
            .mini .playbtn {
                margin-left: auto
            }
            .app {
                --navH: 0px
            }
            /* ===================== DOCK-MODUS (Default) ===================== */
            /* Player als rechte Spalte; Inhalt bekommt rechts Platz */
            body.has-audio .app {
                padding-right: var(--dockW)
            }
            .player {
                inset: auto;
                top: 0;
                right: 0;
                bottom: 0;
                left: auto;
                width: var(--dockW);
                max-width: none;
                height: 100dvh;
                margin: 0;
                border-left: 1px solid #16302B;
                border-radius: 0;
                transform: translateX(100%);
                transition: transform .26s cubic-bezier(.4, 0, .2, 1);
                display: flex;
                visibility: hidden;
                padding-bottom: calc(18px + var(--safe-b));
            }
            body.has-audio .player {
                transform: translateX(0);
                visibility: visible
            }
            .player.open {
                display: flex
            }
            /* open behält JS-Kompatibilität */
            .dock-toggle {
                display: flex
            }
            /* p-close bleibt im Dock-Modus sichtbar (Dock-/Fokus-Toggle entfernt) */
            .ask {
                inset: auto;
                top: 0;
                right: 0;
                bottom: 0;
                left: auto;
                width: var(--dockW);
                max-width: none;
                height: 100dvh;
                margin: 0;
                border-left: 1px solid #16302B;
                border-radius: 0;
                transform: translateX(100%);
                transition: transform .26s cubic-bezier(.4, 0, .2, 1);
                visibility: hidden;
                display: flex;
                z-index: 62;
                padding-bottom: calc(18px + var(--safe-b));
            }
            .ask.open {
                transform: translateX(0);
                visibility: visible
            }
            /* ===================== FOKUS-MODUS ===================== */
            /* Großer zentrierter Dialog; Inhalt rückt nicht, Backdrop legt sich darüber */
            body.focus-mode .app {
                padding-right: 0
            }
            body.focus-mode .player,
            body.focus-mode .ask {
                top: 50%;
                right: auto;
                bottom: auto;
                left: calc(50% + var(--side)/2);
                width: 480px;
                height: min(860px, 92vh);
                border: 1px solid #16302B;
                border-left: 1px solid #16302B;
                border-radius: 30px;
                overflow: hidden;
                transform: translate(-50%, -50%) scale(.98);
                visibility: hidden;
                transition: transform .2s ease, opacity .2s ease, visibility .2s;
                opacity: 0;
            }
            body.focus-mode.has-audio .player,
            body.focus-mode .ask.open {
                transform: translate(-50%, -50%) scale(1);
                visibility: visible;
                opacity: 1;
                box-shadow: 0 0 0 200vmax rgba(10, 27, 24, .5), 0 50px 100px -30px rgba(0, 0, 0, .6);
            }
            body.focus-mode #p-close {
                display: flex
            }
            body.focus-mode .player .dock-toggle .ic-expand {
                display: none
            }
            body.focus-mode .player .dock-toggle .ic-collapse {
                display: block
            }
            /* Player innen etwas luftiger auf Desktop */
            .p-title h3 {
                font-size: 22px
            }
            .chapters {
                max-height: none
            }
            /* ---- HEUTE: Hero links groß, Vorschläge rechts daneben ---- */
            #view-heute.active {
                display: grid;
                grid-template-columns: 1.12fr .88fr;
                column-gap: 34px;
                align-content: start;
                grid-template-areas: "vtop vtop" "vbanner vbanner" "vhero vshead" "vhero vslist" "vjobs vslist" "vx vslist";
            }
            #view-heute .top {
                grid-area: vtop
            }
            #view-heute .login-banner {
                grid-area: vbanner;
                margin-left: 20px;
                margin-right: 20px
            }
            #hero-slot {
                grid-area: vhero;
                align-self: start
            }
            #jobs-heute {
                grid-area: vjobs
            }
            #sug-head {
                grid-area: vshead;
                padding: 30px 20px 8px
            }
            #sug-list {
                grid-area: vslist;
                align-self: start
            }
            .hero-card {
                margin: 18px 0 0 20px;
                padding: 28px 28px 24px;
                border-radius: var(--r-lg)
            }
            .hero-card h3 {
                font-size: 24px;
                margin-top: 10px
            }
            .hero-card .hero-thread {
                margin-top: 22px
            }
            #sug-list .b-item {
                border: 1px solid var(--line);
                border-radius: var(--r-md);
                background: #fff;
                margin: 0 20px 10px 0;
                padding: 13px 16px;
            }
            #sug-list .b-item+.b-item {
                border-top: 1px solid var(--line)
            }
            /* ---- BIBLIOTHEK: zweispaltiges Karten-Raster, Filter als Toolbar ---- */
            #view-bibliothek .search {
                max-width: 440px
            }
            #lib-list {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                padding: 4px 20px 0;
                align-items: start
            }
            #lib-list .lib-job {
                grid-column: 1 / -1;   /* Status-Karte über volle Rasterbreite */
                margin: 0
            }
            .lib-item {
                border: 1px solid var(--line);
                border-radius: var(--r-md);
                background: #fff;
                align-self: start
            }
            .lib-item:first-child {
                border: 1px solid var(--line)
            }
            .lib-swipe {
                background: #fff;
                transform: none !important;   /* kein Swipe auf Desktop */
            }
            .lib-del-action {
                display: none   /* Desktop nutzt den Löschen-Button im Detailbereich */
            }
            .lib-row {
                padding: 14px 16px
            }
            .lib-x {
                padding: 0 16px 16px
            }
            /* ---- ENTDECKEN: zweispaltige Vorschlagskarten, Aktion oben begrenzt ---- */
            #btn-inspire {
                max-width: 300px;
                margin-left: 20px
            }
            .ip-panel {
                max-width: 520px
            }
            #focus-core,
            #focus-lateral {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                padding: 0 20px
            }
            .focus-card {
                margin: 0
            }
            .skel {
                margin: 0
            }
            /* ---- ERSTELLEN & PROFIL: ruhige, schmale Formularspalte ---- */
            #view-erstellen,
            #view-profil {
                max-width: 760px
            }
            .composer textarea {
                min-height: 130px
            }
            /* ---- Paywall mittig statt Bottom-Sheet ---- */
            .modal {
                align-items: center
            }
            .modal .sheet {
                border-radius: 24px;
                max-width: 440px;
                padding-bottom: 24px;
                animation: dlgpop .2s ease
            }
            @keyframes dlgpop {
                from {
                    opacity: 0;
                    transform: scale(.97)
                }
                to {
                    opacity: 1;
                    transform: none
                }
            }
            .toast {
                bottom: 24px;
                left: calc(50% + var(--side)/2)
            }
        }
        
        @media (min-width:1320px) {
             :root {
                --dockW: 440px
            }
            .view {
                max-width: 1140px
            }
        }

        /* iOS Safari: mind. 16px auf allen Inputs verhindert Auto-Zoom beim Antippen.
           !important nötig, weil spezifischere Regeln (z.B. .pf-input, .search input)
           sonst kleinere Größen setzen und iOS trotzdem zoomt. */
        input, textarea { font-size: var(--fs-md) !important; }

        /* ── Cookie-/Consent-Banner ── */
        .consent {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            width: 100%;
            max-width: 560px;
            z-index: 120;
            display: none;
            background: var(--deep);
            color: var(--deep-text);
            border-top: 1px solid #16302B;
            padding: 16px 18px calc(16px + var(--safe-b));
        }
        .consent.show { display: block; }
        .consent b {
            font-family: var(--display);
            font-weight: 600;
            font-size: var(--fs-md);
            display: block;
            margin-bottom: 4px;
        }
        .consent p {
            font-size: var(--fs-xs);
            color: var(--deep-muted);
            line-height: 1.5;
        }
        .consent p a { color: var(--mint); }
        .consent-row {
            display: flex;
            gap: 9px;
            margin-top: 12px;
        }
        .consent-row button {
            flex: 1;
            border-radius: 12px;
            padding: 11px;
            font-weight: 600;
            font-size: var(--fs-sm);
        }
        .consent .c-accept { background: var(--mint); color: #06302A; }
        .consent .c-decline { background: rgba(255,255,255,.10); color: var(--deep-text); border: 1px solid var(--deep-line); }
        /* ── A11y-Fixes (UX-Analyse): sichtbarer Tastatur-Fokus auf Eingabefeldern ──
           überschreibt das feldeigene outline:none; gewinnt per Spezifität + Quellreihenfolge */
        .pf-input:focus-visible,
        .search input:focus-visible,
        #lib-search:focus-visible,
        .field:focus-visible {
            outline: 2px solid var(--ink);
            outline-offset: 2px;
        }
        /* ── Loading-Skeletons (UX-Analyse #8): Status sichtbar, Loading ≠ Empty ── */
        .sk-el {
            background: linear-gradient(90deg, #ECF2F0 25%, #E0EAE7 37%, #ECF2F0 63%);
            background-size: 400% 100%;
            animation: sk-sh 1.3s ease infinite;
            border-radius: 8px;
        }
        @keyframes sk-sh { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
        @media (prefers-reduced-motion: reduce) { .sk-el { animation: none } }
        .sk-row { display: flex; gap: var(--sp-3); align-items: center; padding: 14px 20px; border-top: 1px solid var(--line) }
        .sk-ico { width: 44px; height: 44px; border-radius: 12px; flex: none }
        .sk-col { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2) }
        .sk-l1 { height: 12px; width: 70% }
        .sk-l2 { height: 10px; width: 40% }
        .sk-hero { margin: 14px 20px 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff }
        /* ── Neues Briefing: Composer-first (UX-Phase 1) ── */
        .create-expect { margin: 10px 2px 0; font-family: var(--mono); font-size: var(--fs-2xs); color: var(--muted); text-align: center; letter-spacing: .02em }
        .create-card.inspire-card { background: transparent; border: none; box-shadow: none; padding: 18px 4px 4px; margin-top: 6px }
        /* ── Quellen-Pills (UX-Phase 2) ── */
        .src { margin-top: 12px }
        .src-pills { display: flex; gap: 7px; flex-wrap: wrap }
        .src-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 500; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; color: var(--muted); background: #fff }
        .src-pill.web { cursor: default }
        .src-pill.on { background: var(--ink); color: #fff; border-color: var(--ink) }
        .src-pill.pro { color: var(--mint-text) }
        .src-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint) }
        /* Datei-Upload-Chip: per ID ansprechen, NICHT per .src-chip-Klasse –
           sonst überschreibt display:none die Quellen-Chips (gleiche Klasse) und
           versteckt sie in den Briefing-Details. */
        #src-chip { display: none; align-items: center; gap: 8px; margin-top: 9px; font-size: var(--fs-sm); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px }
        #src-chip #src-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px }
        #src-chip #src-remove { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer }
        .src-hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 8px }
        .feed-head { margin-top: 4px; align-items: center }
        #feed-regen { font-size: var(--fs-xs); font-weight: 600; color: var(--mint-text); background: var(--mint-tint); border: 1px solid #BFE9E1; border-radius: 999px; padding: 7px 13px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
        #feed-regen:active { transform: scale(.97) }
        #feed-regen:disabled { opacity: .5 }
        .feed-sub { margin: 2px 20px 0; font-size: var(--fs-xs); color: var(--muted) }
        .insp-prof { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
        .insp-prof #insp-prof-msg { font-size: var(--fs-xs); color: var(--muted) }
        .insp-prof-link { font-size: var(--fs-xs); font-weight: 600; color: var(--mint-text); text-decoration: underline; text-underline-offset: 2px; background: none; border: none; padding: 0 }
/* Persistenter Hinweis, wenn „Vorschläge generieren" ohne Profilbasis geklickt wird */
.insp-need { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 14px 16px; background: var(--mint-tint); border: 1px solid var(--mint); border-radius: 14px }
.insp-need-ico { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--card); color: var(--mint-text) }
.insp-need-body { display: flex; flex-direction: column; gap: 4px }
.insp-need-body b { font-size: var(--fs-sm); color: var(--ink); font-weight: 700 }
.insp-need-body p { font-size: var(--fs-xs); color: var(--mint-text); margin: 0 }
.insp-need-btn { align-self: flex-start; margin-top: 6px; font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--mint-deep); border: none; border-radius: 999px; padding: 8px 14px; cursor: pointer }
.insp-need-btn:hover { background: var(--mint-text) }
        /* ── Fokus-Chips (Schnellstart) + Inline-Lifecycle (UX-Phase 3) ── */
        .composer-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 12px }
        .composer-chips .cchip-lbl { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em }
        .cchip { font-size: var(--fs-xs); font-weight: 500; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; background: #fff; color: var(--ink) }
        #create-active:empty { display: none }
        .create-done { margin: 12px 20px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px }
        .create-done .cd-row { display: flex; align-items: center; gap: 10px }
        .create-done .cd-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--mint-tint); color: var(--mint-text); display: grid; place-items: center; font-weight: 700; flex: none }
        .create-done.err .cd-ic { background: #FCEFEF; color: var(--err) }
        .create-done b { font-size: var(--fs-sm) }
        .create-done .cd-actions { display: flex; gap: 8px; margin-top: 12px }
        .create-done .cta.mint { margin: 0; flex: 1; width: auto }
        .create-done .cd-lib { border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; font-weight: 600; font-size: var(--fs-sm); background: #fff; color: var(--ink) }
        /* ── Neues Briefing v2: Umschalter + Quellen-Typ (UX-Redesign) ── */
        .seg { display: flex; gap: 4px; margin: 14px 20px 0; padding: 4px; background: #EAF0EE; border: 1px solid var(--line); border-radius: 14px }
        .seg button { flex: 1; border: none; background: none; font: 600 var(--fs-sm)/1 var(--body); color: var(--muted); padding: 11px; border-radius: 11px; cursor: pointer }
        .seg button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px -3px rgba(14, 22, 20, .3) }
        .src-lbl { display: block; font: 600 var(--fs-2xs)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint-text); margin-bottom: 9px }
        .types { display: flex; gap: 7px }
        .type { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 11px 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); position: relative }
        .type svg { width: 18px; height: 18px }
        .type.on { border-color: var(--ink); background: var(--ink); color: #fff }
        .type.pro::after { content: "PRO"; position: absolute; top: -7px; right: -4px; font: 700 .55rem/1 var(--mono); background: var(--mint-tint); color: var(--mint-text); padding: 3px 5px; border-radius: 6px }
        .type-desc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin: 11px 2px 22px }
        .src-limit { font-size: var(--fs-xs); color: var(--mint-text); background: var(--mint-tint); border-radius: 8px; padding: 7px 10px; margin: -12px 2px 14px; line-height: 1.45 }
        .type-desc b { color: var(--ink) }
        .dropzone { width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed #BBD8D1; border-radius: var(--r-md); background: #FAFEFD; padding: 16px; color: var(--mint-text); font-weight: 600; font-size: var(--fs-sm); cursor: pointer }
        #src-url-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px }
        .url-row { display: flex; align-items: center; gap: 8px }
        .url-row .url-in { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #FAFCFB; padding: 11px 13px; font-size: var(--fs-sm); font-family: var(--body) }
        .url-row .url-in:focus { outline: none; border-color: var(--mint-deep) }
        .url-row .url-del { flex: none; width: 36px; height: 36px; border: none; background: #F0F4F2; color: var(--muted); border-radius: 10px; cursor: pointer; font-size: 17px; line-height: 1; display: grid; place-items: center }
        .url-add { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; border: 1.5px dashed #BBD8D1; background: #FAFEFD; color: var(--mint-text); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: var(--fs-sm); cursor: pointer }
        #src-file-wrap .src-chip, #src-url-wrap { }
    

        /* ── Morgen-Routine (Profil-Karte) ── */
        .routine-card { margin: 22px 20px 38px; padding: 16px 18px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md) }
        .routine-card h3 { margin: 0 0 4px; font: 700 1.02em/1.3 var(--display) }
        .routine-card .rt-sub { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 12px }
        .rt-toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; cursor: pointer }
        .rt-toggle-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--mint-deep) }
        .rt-toggle-row input[type=time] { font: inherit; padding: 5px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: inherit }
        .rt-toggle-row input[type=time]:focus { outline: none; border-color: var(--mint-deep) }
        .rt-days { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px }
        .rt-day { width: 40px; padding: 7px 0; text-align: center; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease }
        .rt-day:hover { border-color: var(--mint-deep); color: var(--mint-text) }
        .rt-day.on { background: var(--mint-deep); border-color: var(--mint-deep); color: #fff }
        .rt-next { font-size: var(--fs-sm); color: var(--mint-text); margin-top: 2px }
        .rt-warn { font-size: var(--fs-sm); color: var(--err); margin-top: 6px }
        .rt-dim { font-size: var(--fs-2xs); color: var(--muted); margin-top: 8px }
        .rt-status { font-size: var(--fs-sm); color: var(--ok); margin-top: 6px; min-height: 1.2em }
        .rt-status.err { color: var(--err) }
        .cd-routine-tipp { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: var(--fs-sm); color: var(--muted); line-height: 1.5 }
        .cd-routine-tipp b { color: var(--ink) }
        .cd-routine-tipp button { border: none; background: none; padding: 0; color: var(--mint-deep); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap }
        /* ── „Heute": Platzhalter für das nächste Routine-Briefing ── */
        .routine-next-card { margin: 0 20px 14px; padding: 13px 15px; border: 1.5px dashed #BBD8D1; border-radius: var(--r-md); display: flex; gap: 12px; align-items: center; background: #FAFEFD; cursor: pointer }
        .routine-next-card .rn-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--mint-tint); display: grid; place-items: center; color: var(--mint-deep) }
        .routine-next-card b { display: block; font-size: var(--fs-sm) }
        .routine-next-card > div { flex: 1; min-width: 0 }
        .routine-next-card > div span { font-size: var(--fs-2xs); color: var(--muted) }
        .routine-next-card .arr { color: var(--muted); font-size: .9em }
        .routine-next-card.is-paused { border-color: #E9A9A0; background: #FCEEEC; border-style: solid }
        .routine-next-card.is-paused .rn-ic { background: #F7DAD5; color: #B4463B }

        .quota-warn-card { margin: 0 20px 14px; padding: 12px 14px; border-radius: var(--r-md); display: flex; align-items: center; gap: 12px; border: 1px solid #F1C38A; background: #FDF3E6 }
        .quota-warn-card.is-exhausted { border-color: #E9A9A0; background: #FCEEEC }
        .quota-warn-card .qw-txt { flex: 1; min-width: 0 }
        .quota-warn-card .qw-txt b { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink) }
        .quota-warn-card .qw-txt span { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; margin-top: 1px }
        .quota-warn-card .qw-cta { flex: none; background: var(--ink); color: #fff; border: none; border-radius: 10px; padding: 9px 13px; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; white-space: nowrap }
        .quota-warn-card .qw-cta:hover { background: var(--mint-deep) }

        .person-nudge { margin: 0 20px 14px; padding: 13px 15px; border-radius: var(--r-md); border: 1px solid var(--mint-deep); background: var(--mint-tint); display: flex; flex-direction: column; gap: 10px }
        .person-nudge .pn-txt b { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: 3px }
        .person-nudge .pn-txt span { display: block; font-size: var(--fs-xs); color: var(--mint-text); line-height: 1.5 }
        .person-nudge .pn-actions { display: flex; gap: 8px }
        .person-nudge .pn-grant { background: var(--ink); color: #fff; border: none; border-radius: 10px; padding: 9px 14px; font-size: var(--fs-xs); font-weight: 600; cursor: pointer }
        .person-nudge .pn-grant:hover { background: var(--mint-deep) }
        .person-nudge .pn-dismiss { background: transparent; color: var(--muted); border: none; border-radius: 10px; padding: 9px 12px; font-size: var(--fs-xs); font-weight: 500; cursor: pointer }
        .pf-input.invalid { border-color: var(--err); box-shadow: 0 0 0 2px rgba(178,58,58,.15); }
        .nudge-err { color: var(--err); font-size: var(--fs-sm); margin-top: 8px; min-height: 1em; }