/* ====================================================
   Tillodo · Core CSS
   ==================================================== */

:root {
    /* Farben */
    --color-bg:           #FAFAF9;
    --color-bg-secondary: #F4F2EE;
    --color-bg-card:      #FFFFFF;
    --color-text:         #1F1F1D;
    --color-text-soft:    #5F5E5A;
    --color-text-muted:   #888780;
    --color-border:       #E5E3DC;
    --color-border-soft:  #EFEDE6;

    --color-primary:        #6366F1;
    --color-primary-hover:  #5256E5;
    --color-primary-soft:   #EEEDFE;
    --color-primary-text:   #3C3489;

    --color-success:      #0F6E56;
    --color-success-bg:   #E1F5EE;
    --color-warning:      #854F0B;
    --color-warning-bg:   #FAEEDA;
    --color-danger:       #A32D2D;
    --color-danger-bg:    #FBEAEA;
    --color-info:         #185FA5;
    --color-info-bg:      #E6F1FB;

    /* Maße */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 1px 3px rgba(0,0,0,0.05), 0 0 0 0.5px rgba(0,0,0,0.05);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.05);

    --container-width: 1100px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ====================================================
   Reset & Basis
   ==================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; display: block; }

/* ====================================================
   Layout
   ==================================================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.container-narrow {
    max-width: 720px;
}
.main { min-height: calc(100vh - 320px); }

/* ====================================================
   Navbar
   ==================================================== */
.navbar {
    background: var(--color-bg-card);
    border-bottom: 0.5px solid var(--color-border);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 50;
}
.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    color: var(--color-text);
}
.brand:hover { color: var(--color-text); }
.brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 17px;
}
.brand-name { font-size: 16px; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 14px;
}
.nav-links > a {
    color: var(--color-text-soft);
    font-weight: 400;
}
.nav-links > a:hover { color: var(--color-text); }

.lang-switch {
    display: flex;
    gap: 0.25rem;
    margin-right: 0.25rem;
    font-size: 12px;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.lang-switch a {
    padding: 4px 9px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.lang-switch a.active {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}

/* ====================================================
   Buttons
   ==================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    border: 0.5px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    line-height: 1.4;
}
.btn-lg {
    padding: 0.7rem 1.5rem;
    font-size: 15px;
}
.btn-primary {
    background: var(--color-primary);
    color: #fff;
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    color: #fff;
}
.btn-secondary {
    background: var(--color-bg-card);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}
.btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-ghost:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}
.btn-block {
    display: flex;
    width: 100%;
}

/* ====================================================
   Hero
   ==================================================== */
.hero {
    padding: 4rem 0 5rem;
    text-align: center;
}
.demo-banner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    border-radius: var(--radius);
    margin-bottom: 2rem;
    font-size: 13px;
    line-height: 1.5;
}
.demo-banner strong { font-weight: 500; }
.demo-banner span { color: var(--color-primary-text); opacity: 0.8; }

.hero-title {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 500;
    margin: 0 0 1rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.hero-subtitle {
    font-size: 17px;
    color: var(--color-text-soft);
    max-width: 580px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.hero-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
}

.hero-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 110px;
    gap: 12px;
    max-width: 880px;
    margin: 0 auto;
    padding: 14px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

/* Tile-Sammlung */
.tile {
    background: var(--color-bg-secondary);
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tile-2x2 { grid-column: span 2; grid-row: span 2; }
.tile-2x1 { grid-column: span 2; }
.tile-accent {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}
.tile-accent .tile-label { color: var(--color-primary-text); opacity: 0.85; }
.tile-accent .tile-value { color: var(--color-primary-text); }
.tile-accent .tile-sublabel { color: var(--color-primary-text); opacity: 0.75; }
.tile-label {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}
.tile-value-xl {
    font-size: 38px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.tile-value {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}
.tile-sublabel {
    font-size: 11px;
    color: var(--color-text-soft);
    margin-top: 0.25rem;
}
.tile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.8;
}
.tile-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.check {
    width: 12px;
    height: 12px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    flex-shrink: 0;
}

/* ====================================================
   Sections
   ==================================================== */
.section-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 500;
    text-align: center;
    margin: 0 0 0.5rem;
    letter-spacing: -0.015em;
}
.section-subtitle {
    text-align: center;
    color: var(--color-text-soft);
    font-size: 16px;
    margin: 0 0 3rem;
}

.features {
    padding: 4rem 0;
    background: var(--color-bg-secondary);
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.feature-grid-detail {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.feature-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: transform 0.15s, box-shadow 0.15s;
}
.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.feature-card h3 {
    margin: 0 0 0.5rem;
    font-size: 17px;
    font-weight: 500;
}
.feature-card p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: 1.6;
}
.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 1rem;
    font-weight: 500;
}
.feature-icon-purple { background: #EEEDFE; color: #534AB7; }
.feature-icon-green  { background: #E1F5EE; color: #0F6E56; }
.feature-icon-blue   { background: #E6F1FB; color: #185FA5; }
.feature-icon-orange { background: #FAEEDA; color: #854F0B; }

/* ====================================================
   CTA
   ==================================================== */
.cta {
    padding: 5rem 0;
    text-align: center;
}
.cta h2 {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 500;
    margin: 0 0 0.5rem;
    letter-spacing: -0.015em;
}
.cta p {
    color: var(--color-text-soft);
    margin: 0 0 1.75rem;
    font-size: 16px;
}
.cta-mini {
    text-align: center;
    margin-top: 3rem;
}

/* ====================================================
   Pricing
   ==================================================== */
.pricing-section {
    padding: 4rem 0;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 920px;
    margin: 0 auto;
    align-items: stretch;
}
.price-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
}
.price-card-popular {
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow);
}
.price-badge {
    position: absolute;
    top: -10px;
    left: 1rem;
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
}
.price-name {
    font-size: 13px;
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.price-amount {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.price-suffix {
    font-size: 13px;
    color: var(--color-text-soft);
    font-weight: 400;
}
.price-description {
    color: var(--color-text-soft);
    font-size: 13px;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
}
.price-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 13px;
    color: var(--color-text);
}
.price-features li.feature-off {
    color: var(--color-text-muted);
}
.check-icon {
    color: var(--color-success);
    font-weight: 500;
    flex-shrink: 0;
    width: 16px;
}
.feature-off .check-icon {
    color: var(--color-text-muted);
}

/* ====================================================
   Auth Pages
   ==================================================== */
.auth-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-secondary);
}
.auth-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.auth-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2.5rem 2rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
}
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    color: var(--color-text);
}
.auth-step-badge {
    display: inline-block;
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}
.auth-title {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 0.5rem;
}
.auth-subtitle {
    color: var(--color-text-soft);
    font-size: 14px;
    margin: 0 0 2rem;
    line-height: 1.5;
}
.auth-form { text-align: left; }
.form-group {
    margin-bottom: 1.25rem;
}
.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-soft);
    margin-bottom: 0.4rem;
}
.form-group input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-family: inherit;
    font-size: 14px;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 0.15s, background 0.15s;
}
.form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-card);
}
.auth-hint {
    margin-top: 1.25rem;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.auth-link { font-weight: 500; }
.auth-sep { color: var(--color-text-muted); margin: 0 0.4rem; }
.auth-back {
    margin-top: 0.5rem;
    font-size: 12px;
}
.auth-back a {
    color: var(--color-text-muted);
}

.code-inputs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1.25rem 0 1.5rem;
}
.code-digit {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 0.15s, background 0.15s;
}
.code-digit:focus {
    outline: none;
    border-color: var(--color-primary);
    border-width: 2px;
    background: var(--color-bg-card);
}

.auth-footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 12px;
    color: var(--color-text-muted);
}
.auth-footer a { color: var(--color-text-muted); margin: 0 0.25rem; }
.auth-footer a:hover { color: var(--color-text-soft); }
.auth-footer-sep { margin: 0 0.5rem; }

/* ====================================================
   Footer
   ==================================================== */
.footer {
    background: var(--color-bg-card);
    border-top: 0.5px solid var(--color-border);
    padding: 2rem 0;
    margin-top: 4rem;
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}
.footer-links {
    display: flex;
    gap: 1.5rem;
    font-size: 13px;
}
.footer-links a { color: var(--color-text-soft); }
.footer-links a:hover { color: var(--color-text); }
.footer-copy {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ====================================================
   Flash Messages
   ==================================================== */
.flash-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 360px;
}
.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 13px;
    box-shadow: var(--shadow-lg);
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
}
.flash-success { background: var(--color-success-bg); color: var(--color-success); }
.flash-info    { background: var(--color-info-bg);    color: var(--color-info); }
.flash-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.flash-error   { background: var(--color-danger-bg);  color: var(--color-danger); }

/* ====================================================
   Error & Maintenance Pages
   ==================================================== */
.error-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    padding: 2rem;
}
.error-page {
    text-align: center;
    max-width: 440px;
}
.error-code {
    font-size: 84px;
    font-weight: 500;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: -0.04em;
}
.error-icon {
    font-size: 48px;
    margin-bottom: 1rem;
}
.error-page h1 {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 0.5rem;
}
.error-page p {
    color: var(--color-text-soft);
    margin: 0 0 1.75rem;
}

/* ====================================================
   Legal pages
   ==================================================== */
.legal {
    padding: 3rem 0;
}
.legal h1 {
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 1.5rem;
}
.legal-placeholder {
    color: var(--color-text-muted);
    padding: 1.5rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius);
    text-align: center;
}

/* ====================================================
   Mobile
   ==================================================== */
@media (max-width: 720px) {
    .nav-links {
        gap: 0.75rem;
        font-size: 13px;
    }
    .nav-links > a:not(.btn) {
        display: none;
    }
    .nav-links > a:not(.btn).btn,
    .nav-links > .btn { display: inline-flex; }
    .lang-switch { display: flex; }
    .hero { padding: 2rem 0 3rem; }
    .hero-preview {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 90px;
    }
    .tile-2x2, .tile-2x1 { grid-column: span 2; }
    .tile-2x2 { grid-row: span 2; }
    .footer-inner { flex-direction: column; text-align: center; }
}
/* ====================================================
   Tillodo · Phase 1B Schritt 3 · CSS-Erweiterungen
   ====================================================
   Diese Datei wird an core.css ANGEHÄNGT
   (oder ersetzt einfach die alte core.css komplett)
   ==================================================== */

/* ====================================================
   User-Navbar Erweiterungen
   ==================================================== */
.btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 13px;
}
.btn-xs {
    padding: 0.3rem 0.65rem;
    font-size: 12px;
}
.nav-user {
    color: var(--color-text-soft);
    font-size: 13px;
    font-weight: 500;
}
.nav-admin-link {
    background: var(--color-primary-soft);
    color: var(--color-primary-text) !important;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
}
.nav-admin-link:hover {
    background: #DCDAFB;
    color: var(--color-primary-text) !important;
}

/* ====================================================
   Dashboard-Platzhalter
   ==================================================== */
.dashboard-placeholder {
    padding: 3rem 0;
}
.dashboard-greeting {
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 2rem;
    letter-spacing: -0.015em;
}
.placeholder-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--shadow);
}
.placeholder-icon {
    font-size: 48px;
    margin-bottom: 1rem;
}
.placeholder-card h2 {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 0.5rem;
}
.placeholder-card > p {
    color: var(--color-text-soft);
    margin: 0 0 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.placeholder-stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.placeholder-stat {
    text-align: center;
}
.placeholder-stat-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
.placeholder-stat-value {
    font-size: 18px;
    font-weight: 500;
}
.placeholder-stat-small {
    font-size: 14px;
}

/* ====================================================
   Admin-Bereich
   ==================================================== */
.admin-body {
    background: var(--color-bg-secondary);
}
.admin-navbar {
    background: var(--color-bg-card);
}
.admin-badge {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-badge-small {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: 9px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 0.4rem;
    text-transform: uppercase;
}
.admin-nav-links a {
    color: var(--color-text-soft);
}
.admin-nav-links a.active {
    color: var(--color-primary-text);
    font-weight: 500;
}
.admin-nav-links a:hover { color: var(--color-text); }
.admin-nav-links a.active:hover { color: var(--color-primary-text); }
.nav-sep { color: var(--color-border); }
.nav-back { font-size: 12px; color: var(--color-text-muted) !important; }

.admin-section {
    padding: 2.5rem 0 4rem;
}
.admin-h1 {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 1.5rem;
    letter-spacing: -0.015em;
}
.admin-h1-count {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 18px;
    margin-left: 0.4rem;
}
.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.admin-search {
    flex: 0 1 320px;
}
.admin-search-input {
    width: 100%;
    padding: 0.5rem 0.85rem;
    font-family: inherit;
    font-size: 13px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
}
.admin-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Stats-Boxen */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.admin-stat {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}
.admin-stat-label {
    font-size: 11px;
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}
.admin-stat-value {
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.admin-stat-sub {
    font-size: 11px;
    color: var(--color-success);
    margin-top: 0.4rem;
}

/* Karten-Grid */
.admin-grid-2 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 720px) {
    .admin-grid-2 { grid-template-columns: 1fr; }
}
.admin-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}
.admin-card-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 1rem;
    color: var(--color-text);
}
.admin-card-text {
    color: var(--color-text-soft);
    font-size: 13px;
    margin: 0 0 1rem;
}
.admin-card-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 500;
}
.admin-empty {
    color: var(--color-text-muted);
    font-size: 13px;
    margin: 0;
}

.admin-user-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.admin-user-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-top: 0.5px solid var(--color-border-soft);
    font-size: 13px;
}
.admin-user-list li:first-child { border-top: 0; }
.admin-user-name {
    font-weight: 500;
    color: var(--color-text);
}
.admin-user-email {
    color: var(--color-text-soft);
    font-size: 12px;
}
.admin-user-meta {
    color: var(--color-text-muted);
    font-size: 12px;
}
.admin-inline-form {
    margin: 0;
}

/* Tabelle */
.admin-table-wrap {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    overflow-x: auto;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.admin-table thead th {
    background: var(--color-bg-secondary);
    text-align: left;
    padding: 0.6rem 1rem;
    font-weight: 500;
    color: var(--color-text-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 0.5px solid var(--color-border);
}
.admin-table tbody td {
    padding: 0.7rem 1rem;
    border-top: 0.5px solid var(--color-border-soft);
    vertical-align: middle;
}
.admin-table tbody tr:first-child td { border-top: 0; }
.admin-table .muted { color: var(--color-text-muted); font-size: 12px; }
.user-email { font-weight: 500; }

.status-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-active { background: var(--color-success-bg); color: var(--color-success); }
.status-suspended { background: var(--color-danger-bg); color: var(--color-danger); }
.self-badge {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 0.3rem;
    font-weight: 500;
}

/* Aktionen */
.row-actions {
    position: relative;
}
.row-actions summary {
    cursor: pointer;
    list-style: none;
    padding: 4px 12px;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-soft);
    display: inline-block;
}
.row-actions summary::-webkit-details-marker { display: none; }
.row-actions[open] summary { background: var(--color-primary-soft); color: var(--color-primary-text); }
.row-actions-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 220px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.row-form {
    display: flex;
    gap: 0.4rem;
    margin: 0;
}
.row-select {
    flex: 1;
    padding: 0.3rem 0.5rem;
    font-size: 12px;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
}
.row-action-btn {
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.6rem;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 12px;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.row-action-btn:hover {
    background: var(--color-bg-secondary);
}
/* ====================================================
   Tillodo · Phase 1C Schritt 1 · Dashboard CSS
   Wird an core.css ANGEHÄNGT
   ==================================================== */

/* ====================================================
   Dashboard / Page Tabs
   ==================================================== */
.dashboard {
    padding: 1rem 0 4rem;
}
.page-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 1.5rem;
    margin-bottom: 1.25rem;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.tabs-strip {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.page-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 12px;
    border-radius: var(--radius);
    color: var(--color-text-soft);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}
.page-tab:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}
.page-tab.active {
    background: var(--color-bg-card);
    color: var(--color-text);
    border: 0.5px solid var(--color-border);
}
.tab-default-icon {
    color: var(--color-warning);
    font-size: 11px;
}

.page-tab-more, .page-tab-new {
    position: relative;
}
.page-tab-more summary, .page-tab-new summary {
    cursor: pointer;
    list-style: none;
    padding: 6px 12px;
    border-radius: var(--radius);
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    font-size: 13px;
    font-weight: 500;
}
.page-tab-more summary::-webkit-details-marker,
.page-tab-new summary::-webkit-details-marker { display: none; }
.page-tab-new summary {
    background: transparent;
    border: 0.5px dashed var(--color-border-secondary);
    color: var(--color-text-muted);
}
.page-tab-new summary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
}

.page-tab-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 50;
}
.dropdown-label {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px 4px;
}
.dropdown-item {
    display: block;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--color-text);
    border-radius: var(--radius-sm);
}
.dropdown-item:hover { background: var(--color-bg-secondary); color: var(--color-text); }
.dropdown-action { color: var(--color-primary); font-weight: 500; }
.dropdown-sep {
    height: 0.5px;
    background: var(--color-border);
    margin: 4px 0;
}

.new-page-form {
    display: flex;
    gap: 6px;
    padding: 6px;
}
.new-page-form input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    font-size: 13px;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.new-page-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.page-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ====================================================
   Page Canvas / Grid
   ==================================================== */
.page-canvas {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.empty-state {
    background: var(--color-bg-card);
    border: 0.5px dashed var(--color-border-secondary);
    border-radius: var(--radius-lg);
    padding: 4rem 2rem;
    text-align: center;
    margin: 2rem 0;
}
.empty-icon {
    font-size: 48px;
    margin-bottom: 1rem;
}
.empty-state h2 {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 0.5rem;
}
.empty-state p {
    color: var(--color-text-soft);
    margin: 0;
}

/* ====================================================
   GridStack Kacheln
   ==================================================== */
.grid-stack {
    background: transparent;
}
.grid-stack-item-content {
    inset: 0 !important;
}
.tile-wrap {
    width: 100%;
    height: 100%;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s, transform 0.15s;
}
.tile-wrap:hover {
    box-shadow: var(--shadow);
}
.tile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 0.5px solid var(--color-border-soft);
    opacity: 0;
    transition: opacity 0.15s;
    height: 0;
    overflow: hidden;
}
body.editing .tile-header {
    opacity: 1;
    height: auto;
}
.tile-name {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tile-delete-form { margin: 0; }
.tile-delete-btn {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.tile-delete-btn:hover {
    background: var(--color-danger);
    color: #fff;
}
.tile-body {
    flex: 1;
    padding: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Während des Bearbeitens: Kacheln verschiebbar markieren */
body.editing .grid-stack-item {
    cursor: move;
}
body.editing .tile-wrap {
    border: 1px dashed var(--color-primary);
}

/* ====================================================
   Uhrzeit-App
   ==================================================== */
.app-clock {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.clock-time {
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}
.clock-time.time-sm { font-size: 18px; }
.clock-time.time-md { font-size: 32px; }
.clock-time.time-lg { font-size: 48px; }
.clock-time.time-xl { font-size: 64px; }
.clock-date {
    font-size: 13px;
    color: var(--color-text-soft);
    margin-top: 0.5rem;
}

.tile-error {
    color: var(--color-danger);
    font-size: 12px;
    padding: 1rem;
    text-align: center;
}

/* ====================================================
   Pages Overview
   ==================================================== */
.pages-overview {
    padding: 2.5rem 0 4rem;
}
.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.overview-title {
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 0.25rem;
    letter-spacing: -0.015em;
}
.overview-subtitle {
    color: var(--color-text-soft);
    margin: 0;
    font-size: 14px;
}

.new-page-trigger {
    position: relative;
}
.new-page-trigger summary {
    cursor: pointer;
    list-style: none;
}
.new-page-trigger summary::-webkit-details-marker { display: none; }
.new-page-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 280px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 50;
}
.new-page-popover-card {
    left: 0;
    right: auto;
}

.page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.page-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px;
    position: relative;
    transition: box-shadow 0.15s, transform 0.15s;
}
.page-card:hover {
    box-shadow: var(--shadow);
}
.page-card-default {
    border-color: var(--color-primary);
}
.badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 999px;
    z-index: 2;
}
.badge-default {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}
.page-card-preview {
    display: block;
    background: var(--color-bg-secondary);
    border-radius: var(--radius);
    aspect-ratio: 16 / 10;
    margin-bottom: 12px;
    overflow: hidden;
    padding: 8px;
    transition: opacity 0.15s;
}
.page-card-preview:hover { opacity: 0.85; }

.preview-skeleton {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 4px;
    width: 100%;
    height: 100%;
}
.skeleton-tile {
    background: var(--color-border-soft);
    border-radius: 3px;
}
.skeleton-tile-0 { grid-column: span 2; grid-row: span 2; background: var(--color-primary-soft); }
.skeleton-tile-1 { grid-column: span 2; }
.skeleton-tile-2 { grid-column: span 1; }
.skeleton-tile-3 { grid-column: span 1; }
.skeleton-tile-4 { grid-column: span 2; }
.skeleton-tile-5 { display: none; }

.page-card-body {
    padding: 0 4px;
}
.page-card-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.rename-trigger { position: relative; flex: 1; min-width: 0; }
.rename-trigger summary {
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rename-trigger summary::-webkit-details-marker { display: none; }
.rename-pencil {
    color: var(--color-text-muted);
    font-size: 11px;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.rename-trigger:hover .rename-pencil,
.rename-trigger[open] .rename-pencil { opacity: 1; }
.rename-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 50;
    display: flex;
    gap: 6px;
}
.rename-popover input[type="text"] {
    padding: 6px 10px;
    font-size: 13px;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.rename-popover input[type="text"]:focus {
    outline: none; border-color: var(--color-primary);
}

.page-card-menu { position: relative; flex-shrink: 0; }
.page-card-menu summary {
    cursor: pointer;
    list-style: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    font-size: 14px;
    letter-spacing: 1px;
}
.page-card-menu summary::-webkit-details-marker { display: none; }
.page-card-menu summary:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}
.page-card-actions {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 50;
    min-width: 180px;
}
.action-link, .action-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 12px;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.action-link:hover, .action-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}
.action-danger { color: var(--color-danger); }
.action-danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }

.page-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 11px;
}
.meta-visibility {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 500;
}
.meta-private {
    background: var(--color-bg-secondary);
    color: var(--color-text-soft);
}
.meta-public {
    background: var(--color-info-bg);
    color: var(--color-info);
}
.meta-password {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}
.meta-ip_restricted {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
.meta-tiles { color: var(--color-text-muted); }

/* Empty Slot */
.new-page-card-trigger { position: relative; }
.new-page-card-trigger summary {
    cursor: pointer;
    list-style: none;
}
.new-page-card-trigger summary::-webkit-details-marker { display: none; }
.page-card-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0.5px dashed var(--color-border-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    min-height: 220px;
    color: var(--color-text-muted);
    transition: all 0.15s;
}
.page-card-empty:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
}
.empty-icon-large {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.empty-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.empty-sub {
    font-size: 11px;
}
/* ====================================================
   Tillodo · Hotfix CSS-Erweiterung
   An core.css ANHÄNGEN
   ==================================================== */

/* Tile Header: Buttons-Container */
.tile-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}
.tile-config-btn {
    background: var(--color-bg-secondary);
    color: var(--color-text-soft);
    border: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.tile-config-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}

/* Stadt-Label in der Uhr-Kachel */
.clock-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

/* ====================================================
   Modal für Tile-Konfiguration
   ==================================================== */
.config-modal {
    position: fixed;
    inset: 0;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.config-modal[hidden] { display: none; }
.config-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}
.config-modal-box {
    position: relative;
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 440px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
.config-modal-content {
    padding: 1.5rem;
}
.config-loading {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-muted);
}

body.modal-open {
    overflow: hidden;
}

.tile-config-form {
    margin: 0;
}
.config-title {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 0.5px solid var(--color-border);
    letter-spacing: -0.01em;
}
.config-row {
    margin-bottom: 1rem;
}
.config-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-soft);
    margin-bottom: 0.3rem;
}
.config-input {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
}
.config-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
select.config-input {
    cursor: pointer;
}
.config-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    cursor: pointer;
}
.config-checkbox input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
.config-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 0.5px solid var(--color-border);
}

/* ====================================================
   Upsell (gesperrter Neue-Seite-Button)
   ==================================================== */
.page-tab-new-locked summary {
    background: linear-gradient(135deg, #FAEEDA 0%, #EEEDFE 100%);
    color: var(--color-warning);
    border: 0.5px solid var(--color-warning);
    border-style: solid;
}
.page-tab-new-locked summary:hover {
    background: linear-gradient(135deg, #F5E0BF 0%, #DCDAFB 100%);
}
.lock-icon {
    margin-left: 4px;
    font-size: 11px;
}

.upsell-popover {
    width: 280px;
    padding: 1.25rem !important;
    text-align: center;
}
.upsell-icon {
    font-size: 32px;
    margin-bottom: 0.5rem;
}
.upsell-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 0.5rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.upsell-text {
    font-size: 12px;
    color: var(--color-text-soft);
    line-height: 1.5;
    margin: 0 0 1rem;
}

.upsell-btn {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%) !important;
    color: #fff !important;
    border: 0;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.upsell-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

.page-card-upsell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EEEDFE 0%, #FAEEDA 100%);
    border: 0.5px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    min-height: 220px;
    text-align: center;
    color: var(--color-text);
    transition: transform 0.15s, box-shadow 0.15s;
}
.page-card-upsell:hover {
    color: var(--color-text);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.upsell-icon-large {
    font-size: 36px;
    margin-bottom: 0.5rem;
}
.upsell-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: var(--color-text);
}
.upsell-sub {
    font-size: 11px;
    color: var(--color-text-soft);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.upsell-arrow {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary-text);
    background: var(--color-bg-card);
    padding: 6px 12px;
    border-radius: 999px;
    border: 0.5px solid var(--color-primary);
}
/* ====================================================
   Tillodo · Phase 1C Schritt 2 · Erweiterungen
   ==================================================== */

/* ====================================================
   Floating Action Button
   ==================================================== */
.fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    font-weight: 500;
    font-size: 14px;
    z-index: 40;
    transition: transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
}
.fab:hover {
    background: var(--color-primary-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}
.fab-icon {
    font-size: 20px;
    line-height: 1;
}

/* ====================================================
   Modal-System
   ==================================================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal[hidden] { display: none; }
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    cursor: pointer;
    z-index: 1;
}
.modal-card {
    position: relative;
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    z-index: 2;
}
.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    color: var(--color-text-muted);
    cursor: pointer;
}
.modal-close:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}
.modal-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 1.25rem;
    padding-right: 30px;
}

/* ====================================================
   Tile Header Actions (Zahnrad + Löschen)
   ==================================================== */
.tile-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}
.tile-config-btn,
.tile-delete-btn {
    background: var(--color-bg-secondary);
    border: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-text-soft);
}
.tile-config-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}
.tile-delete-btn {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    font-size: 16px;
}
.tile-delete-btn:hover {
    background: var(--color-danger);
    color: #fff;
}

/* ====================================================
   Form-Elemente in Modals
   ==================================================== */
.form-row {
    margin-bottom: 1rem;
}
.form-row label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-soft);
    margin-bottom: 0.4rem;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row input[type="search"],
.form-row input[type="tel"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row input[type="datetime-local"],
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-family: inherit;
    font-size: 14px;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    box-sizing: border-box;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-card);
}
.form-row textarea {
    resize: vertical;
    min-height: 80px;
}
.checkbox-row {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text);
}
.checkbox-row input[type="checkbox"] {
    margin: 0;
}
.form-info {
    background: var(--color-bg-secondary);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--color-text-soft);
    margin-bottom: 1rem;
    line-height: 1.5;
}
.form-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0.4rem 0 0;
    line-height: 1.5;
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* Color-Picker für Notizen */
.color-picker {
    display: flex;
    gap: 8px;
}
.color-option {
    cursor: pointer;
    margin: 0 !important;
}
.color-option input[type="radio"] {
    display: none;
}
.color-swatch {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: transform 0.1s;
}
.color-yellow .color-swatch { background: #FEF08A; }
.color-blue   .color-swatch { background: #BFDBFE; }
.color-green  .color-swatch { background: #BBF7D0; }
.color-pink   .color-swatch { background: #FBCFE8; }
.color-white  .color-swatch { background: #F4F2EE; border-color: var(--color-border); }
.color-option input:checked + .color-swatch {
    border-color: var(--color-primary);
    transform: scale(1.1);
}

/* Bookmarks Link-Editor */
.links-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.link-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 6px;
}
.link-row input {
    padding: 6px 10px !important;
    font-size: 13px !important;
}
.link-remove {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
}
.link-remove:hover {
    background: var(--color-danger);
    color: #fff;
}

/* ====================================================
   Notizen-App
   ==================================================== */
.app-notes {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-sm);
    padding: 12px;
    margin: -14px;
    box-sizing: border-box;
    position: relative;
}
.app-notes-yellow { background: #FEF7C7; color: #713F12; }
.app-notes-blue   { background: #DBEAFE; color: #1E3A8A; }
.app-notes-green  { background: #DCFCE7; color: #14532D; }
.app-notes-pink   { background: #FCE7F3; color: #831843; }
.app-notes-white  { background: var(--color-bg-card); color: var(--color-text); border: 0.5px solid var(--color-border); }

.notes-title {
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    padding: 0 0 6px;
    width: 100%;
    outline: none;
}
.notes-title::placeholder {
    color: currentColor;
    opacity: 0.5;
}
.notes-content {
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    color: inherit;
    flex: 1;
    resize: none;
    outline: none;
    width: 100%;
    line-height: 1.5;
}
.notes-content::placeholder {
    color: currentColor;
    opacity: 0.4;
}
.notes-status {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.notes-status.show {
    opacity: 0.7;
}

/* ====================================================
   Lesezeichen-App
   ==================================================== */
.app-bookmarks {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.bookmarks-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-soft);
    margin-bottom: 8px;
}
.bookmarks-empty {
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 1rem;
    text-align: center;
    line-height: 1.5;
}
.bookmarks-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bookmarks-list li {
    margin: 0;
}
.bookmarks-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    transition: background 0.1s;
}
.bookmarks-list a:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}
.bookmark-favicon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
}
.bookmark-favicon-placeholder {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
}
.bookmark-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ====================================================
   App-Store
   ==================================================== */
.store-section {
    padding: 2.5rem 0 4rem;
}
.store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.store-title {
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 0.25rem;
    letter-spacing: -0.015em;
}
.store-subtitle {
    color: var(--color-text-soft);
    margin: 0;
    font-size: 14px;
}

.store-filters {
    margin-bottom: 1.5rem;
}
.store-search-input {
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-family: inherit;
    font-size: 15px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.store-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.store-categories {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.cat-pill {
    padding: 6px 14px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-soft);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.cat-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}
.cat-pill.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.store-app-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s, transform 0.15s;
}
.store-app-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.store-app-card.app-locked {
    opacity: 0.7;
}
.store-app-card.app-locked:hover {
    transform: none;
    box-shadow: none;
}

.store-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 9px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.store-badge.featured {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}
.store-badge.plan-badge.plan-pro {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}
.store-badge.plan-badge.plan-teams {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.store-app-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.store-icon-svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
}
.store-app-name {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 0.4rem;
}
.store-app-desc {
    color: var(--color-text-soft);
    font-size: 12px;
    margin: 0 0 1rem;
    flex: 1;
    line-height: 1.5;
}
.store-add-form {
    margin: 0;
}
.store-page-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 13px;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}
.store-empty-search {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

/* ====================================================
   Page Visibility Settings
   ==================================================== */
.visibility-section {
    padding: 2.5rem 0 4rem;
}
.visibility-header {
    margin-bottom: 2rem;
}
.back-link {
    display: inline-block;
    color: var(--color-text-soft);
    font-size: 13px;
    margin-bottom: 0.75rem;
    text-decoration: none;
}
.back-link:hover {
    color: var(--color-text);
}
.visibility-title {
    font-size: 26px;
    font-weight: 500;
    margin: 0 0 0.4rem;
    letter-spacing: -0.015em;
}
.visibility-subtitle {
    color: var(--color-text-soft);
    margin: 0;
    font-size: 14px;
}

.visibility-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.visibility-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
}
.visibility-option:hover {
    border-color: var(--color-text-soft);
}
.visibility-option.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.visibility-option.visibility-locked {
    cursor: not-allowed;
    opacity: 0.55;
}
.visibility-option.visibility-locked:hover {
    border-color: var(--color-border);
}
.visibility-option input[type="radio"] {
    margin-top: 4px;
    flex-shrink: 0;
}
.vo-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.vo-content { flex: 1; }
.vo-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vo-pro-badge {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vo-desc {
    font-size: 13px;
    color: var(--color-text-soft);
    line-height: 1.5;
}

.visibility-detail {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    display: none;
}
.visibility-detail h3 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 1rem;
}

.slug-input {
    display: flex;
    align-items: stretch;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.slug-prefix {
    padding: 0.55rem 0.75rem;
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    font-size: 13px;
    border-right: 0.5px solid var(--color-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}
.slug-input input {
    flex: 1;
    border: 0 !important;
    background: var(--color-bg-card) !important;
    border-radius: 0 !important;
}

.public-url-display {
    background: var(--color-bg-secondary);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 13px;
}
.public-url-display strong {
    font-weight: 500;
    color: var(--color-text-soft);
}
.public-url-display a {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-primary);
}

/* ====================================================
   Upsell-Popover (für Free → Pro)
   ==================================================== */
.upsell-popover {
    text-align: center;
    padding: 1rem !important;
    min-width: 240px;
}
.upsell-popover-icon {
    font-size: 28px;
    margin-bottom: 0.5rem;
}
.upsell-popover-title {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 0.4rem;
}
.upsell-popover-text {
    font-size: 12px;
    color: var(--color-text-soft);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.page-tab-locked summary {
    color: var(--color-text-muted) !important;
    background: transparent !important;
    border: 0.5px dashed var(--color-border-secondary);
}

/* ====================================================
   Public Page (geteilte Seiten)
   ==================================================== */
.public-page-body {
    background: var(--color-bg-secondary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.public-page-body .main {
    flex: 1;
}
.public-page {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
}
.public-page-header {
    text-align: center;
    margin-bottom: 2rem;
}
.public-page-header h1 {
    font-size: 32px;
    font-weight: 500;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}
.public-page-author {
    color: var(--color-text-soft);
    font-size: 14px;
    margin: 0;
}
.public-tile {
    box-shadow: var(--shadow);
}
.public-page-footer {
    padding: 1.5rem;
    text-align: center;
    background: var(--color-bg-card);
    border-top: 0.5px solid var(--color-border);
}
.public-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 12px;
    text-decoration: none;
}
.public-footer-brand:hover {
    color: var(--color-text);
}
.public-footer-brand .brand-logo {
    width: 20px;
    height: 20px;
    font-size: 11px;
}

/* Public Password Screen */
.public-password-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--color-bg-secondary);
}
.password-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow);
    max-width: 380px;
    width: 100%;
    text-align: center;
}
.password-icon {
    font-size: 48px;
    margin-bottom: 1rem;
}
.password-card h1 {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 0.5rem;
}
.password-card p {
    color: var(--color-text-soft);
    font-size: 14px;
    margin: 0 0 1.75rem;
}
.password-form input[type="password"] {
    width: 100%;
    padding: 0.7rem 1rem;
    font-family: inherit;
    font-size: 15px;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    text-align: center;
    letter-spacing: 0.1em;
}
.password-form input[type="password"]:focus {
    outline: none;
    border-color: var(--color-primary);
}
/* ====================================================
   HOTFIX 1C-2a: Notizen Box-in-Box-Problem
   ====================================================
   Diese Regeln ans Ende der core.css anhängen.
   ==================================================== */

/* Bei Notiz-Kacheln: Outer-Wrap transparent + ohne Border, damit nur
   die farbige Notiz-Innenfläche sichtbar ist. */
.tile-app-notes {
    background: transparent !important;
    border: 0 !important;
    overflow: visible;
}
.tile-app-notes .tile-body {
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius);
}
.tile-app-notes:hover {
    box-shadow: none;
}

/* Im Bearbeiten-Modus: gestrichelter Rahmen außenrum */
body.editing .tile-app-notes {
    border: 1px dashed var(--color-primary) !important;
    border-radius: var(--radius);
}

/* Notiz selbst füllt komplett den Body aus */
.app-notes {
    margin: 0;
    border-radius: var(--radius);
    padding: 14px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    box-shadow: var(--shadow);
}

/* Im Bearbeiten-Modus: Header oben sitzen lassen, Notiz-Body kürzer */
body.editing .tile-app-notes .tile-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 0;
}

/* ====================================================
   HOTFIX 2d: 3-Punkte-Menü auf Kacheln + Bookmark-Import
   ==================================================== */

/* Tile-Menü ist absolut oben rechts in jeder Kachel */
.tile-menu {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
}
.tile-menu summary {
    cursor: pointer;
    list-style: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 1;
    user-select: none;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    opacity: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.tile-menu summary::-webkit-details-marker { display: none; }

/* Beim Hover über die Kachel: Menü-Button erscheinen */
.tile-wrap:hover .tile-menu summary,
.tile-menu[open] summary {
    opacity: 1;
}
.tile-menu summary:hover {
    background: var(--color-bg-card);
    color: var(--color-text);
}
.tile-menu[open] summary {
    background: var(--color-primary);
    color: #fff;
}

/* Touch-Geräte: immer sichtbar */
@media (hover: none) {
    .tile-menu summary { opacity: 0.7; }
}

/* Popover */
.tile-menu-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    line-height: 1.2;
}
.tile-menu-item:hover {
    background: var(--color-bg-secondary);
}
.tile-menu-icon {
    width: 18px;
    text-align: center;
    color: var(--color-text-soft);
    font-size: 14px;
    flex-shrink: 0;
}
.tile-menu-sep {
    height: 0.5px;
    background: var(--color-border);
    margin: 4px 6px;
}
.tile-menu-danger { color: var(--color-danger); }
.tile-menu-danger:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
.tile-menu-danger .tile-menu-icon { color: var(--color-danger); }

/* Kachel relative — damit absolutes Menü positioniert werden kann */
.tile-wrap {
    position: relative;
}

/* Im Bearbeiten-Modus: Kachel-Header (Drag-Handle) wieder oben */
body.editing .tile-wrap {
    border: 1px dashed var(--color-primary);
}
body.editing .tile-menu summary { opacity: 1; }

/* ====================================================
   Bookmark-Import: Tabbar + Import-UI
   ==================================================== */
.tabbar {
    display: flex;
    gap: 4px;
    border-bottom: 0.5px solid var(--color-border);
    margin-bottom: 1.25rem;
    padding-bottom: 0;
}
.tab-btn {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text-muted);
    cursor: pointer;
    margin-bottom: -0.5px;
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn.active {
    color: var(--color-primary-text);
    border-bottom-color: var(--color-primary);
    font-weight: 500;
}
.tab-panel {
    animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.import-howto {
    margin-bottom: 8px;
}
.import-howto summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary-text);
    padding: 4px 0;
}
.import-howto summary::-webkit-details-marker { display: none; }
.import-howto summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.15s;
}
.import-howto[open] summary::before {
    transform: rotate(90deg);
}
.import-steps {
    margin: 6px 0 8px 24px;
    padding: 0;
    color: var(--color-text-soft);
    font-size: 12px;
    line-height: 1.6;
}

.file-input {
    display: block;
    width: 100%;
    padding: 8px;
    background: var(--color-bg-secondary);
    border: 1px dashed var(--color-border-secondary);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
}
.file-input:hover {
    border-color: var(--color-primary);
}

.bookmarks-import-results {
    margin-top: 1rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius);
    overflow: hidden;
}
.import-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-card);
    border-bottom: 0.5px solid var(--color-border);
}
.import-count {
    font-size: 12px;
    color: var(--color-text-soft);
    font-weight: 500;
}
.import-count::before {
    content: '';
}
.import-count::after {
    content: ' Lesezeichen gefunden';
    font-weight: 400;
}
:root[lang="en"] .import-count::after,
html[lang="en"] .import-count::after {
    content: ' bookmarks found';
}

.import-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}
.import-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    margin: 0;
}
.import-item:hover {
    background: var(--color-bg-card);
}
.import-item input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.import-item-info {
    flex: 1;
    min-width: 0;
}
.import-item-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.import-item-url {
    font-size: 11px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.import-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 1.5rem 1rem;
    font-size: 13px;
    margin: 0;
}
.import-error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 12px;
    margin-top: 0.75rem;
}

/* Modal-Card etwas breiter für Import */
.modal-card {
    max-width: 560px;
}

/* Tile-Header und alte tile-actions sind jetzt obsolet, ausblenden falls noch da */
.tile-header { display: none; }

/* ====================================================
   HOTFIX 2e: Solo-Edit + smartes Menü bei kleinen Kacheln
   ==================================================== */

/* Im globalen Edit-Modus: dashed border auf ALLEN Kacheln (alt) */
body.editing .tile-wrap {
    border: 1px dashed var(--color-primary);
}
/* WICHTIG: Im Solo-Edit-Mode sollen NICHT alle Kacheln umrandet werden,
   sondern nur die ausgewählte. Default: kein dashed-border. */
body.solo-editing .tile-wrap {
    border: 0.5px solid var(--color-border);
}
body.solo-editing .grid-stack-item.solo-active .tile-wrap {
    border: 1px dashed var(--color-primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}
/* Andere Kacheln im Solo-Mode leicht abdunkeln */
body.solo-editing .grid-stack-item:not(.solo-active) .tile-wrap {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.15s;
}
body.solo-editing .grid-stack-item.solo-active {
    cursor: move;
}

/* Nur die aktive Kachel zeigt das ··· Menü im Solo-Mode */
body.solo-editing .grid-stack-item:not(.solo-active) .tile-menu summary {
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   Smart Menü-Positionierung bei kleinen Kacheln
   ============================================ */
/* Standard: Menü liegt drinnen, oben rechts, geht nach unten auf */
.tile-menu-popover {
    top: calc(100% + 6px);
    right: 0;
    left: auto;
}
/* Bei kleinen Kacheln: Popover springt RAUS aus der Kachel,
   öffnet sich rechts neben dem ···-Button */
.tile-menu.menu-outside .tile-menu-popover {
    top: 0;
    right: auto;
    left: calc(100% + 6px);
    z-index: 100;
}
/* Falls am rechten Rand: dann doch nach links auf */
@media (max-width: 1100px) {
    .tile-menu.menu-outside .tile-menu-popover {
        left: auto;
        right: calc(100% + 6px);
    }
}

/* Tile-Menü beim Hover sicher oben drüber */
.tile-menu[open] {
    z-index: 50;
}
.grid-stack-item:hover {
    z-index: 5;
}

/* Im Solo-Mode wirkt das Popover fokussierter */
body.solo-editing .grid-stack-item.solo-active .tile-menu summary {
    opacity: 1;
    background: var(--color-primary);
    color: #fff;
}

/* ====================================================
   HOTFIX 2f: Menü-Popover kommt zuverlässig nach oben
   ==================================================== */

/* Wenn ein Menü offen ist, soll das ENTHALTENDE grid-stack-item
   im Stack ganz oben liegen — sonst wird das Popover von Nachbar-Kacheln verdeckt. */
.grid-stack-item:has(.tile-menu[open]) {
    z-index: 11 !important;
}

/* Fallback für Browser ohne :has() (sehr selten heute, aber sicher ist sicher) */
.grid-stack-item.menu-open-active {
    z-index: 11 !important;
}

/* Das Popover selbst ganz oben */
.tile-menu[open] .tile-menu-popover {
    z-index: 250;
}

/* Die Kachel auch ohne Stacking-Context-Reset zeigen, falls nötig */
.tile-menu.menu-outside .tile-menu-popover {
    /* Bestehende Regel ergänzen — hier nochmal mit !important für sichere Position */
    box-shadow: var(--shadow-lg), 0 0 0 0.5px var(--color-border);
}

/* ====================================================
   HOTFIX 2g: Floating Tile-Menu (am Body, nicht im Grid)
   ==================================================== */

/* Trigger-Button auf jeder Kachel */
.tile-menu-trigger {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 1;
    user-select: none;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    opacity: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 0;
    font-family: inherit;
}
.tile-wrap:hover .tile-menu-trigger,
.tile-menu-trigger.is-active,
.tile-menu-trigger:focus-visible {
    opacity: 1;
}
.tile-menu-trigger:hover {
    background: var(--color-bg-card);
    color: var(--color-text);
}
.tile-menu-trigger.is-active {
    background: var(--color-primary);
    color: #fff;
}
@media (hover: none) {
    .tile-menu-trigger { opacity: 0.7; }
}
body.editing .tile-menu-trigger,
body.solo-editing .grid-stack-item.solo-active .tile-menu-trigger {
    opacity: 1;
}

/* Globales Floating-Popover am <body> */
.tile-menu-floating {
    position: fixed;
    min-width: 220px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 9999;  /* sehr hoch, am body kein Stacking-Context-Konflikt */
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.12s ease-out;
}
.tile-menu-floating[hidden] {
    display: none;
}

/* Alte details-basierte Tile-Menu-Klassen abschalten, falls noch vorhanden */
.tile-menu { display: none; }
/* ====================================================
   Tillodo · Phase 1C Schritt 3
   Dark Mode + Wetter + Kalender
   ==================================================== */

/* ====================================================
   Dark Mode
   Aktiviert wenn html.theme-dark-actual gesetzt ist
   (durch JS basierend auf [data-theme])
   ==================================================== */
html.theme-dark-actual {
    --color-bg-secondary: #161616;
    --color-bg-card:      #1F1F1F;
    --color-text:         #E8E6E0;
    --color-text-soft:    #A8A6A0;
    --color-text-muted:   #6F6E68;
    --color-border:       #2A2A2A;
    --color-border-soft:  #232323;
    --color-border-secondary: #383838;
    --color-primary-soft: #2D2A4D;
    --color-primary-text: #A8A4F8;
    --color-warning-bg:   #2D2410;
    --color-success-bg:   #102D1F;
    --color-info-bg:      #102433;
    --color-danger-bg:    #2D1416;
    --shadow:    0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
}
html.theme-dark-actual body {
    background: #0F0F0F;
    color: var(--color-text);
}
html.theme-dark-actual .navbar {
    background: rgba(15, 15, 15, 0.85);
    border-bottom-color: var(--color-border);
}
html.theme-dark-actual .public-page-body,
html.theme-dark-actual .public-password-screen {
    background: #0F0F0F;
}
html.theme-dark-actual .admin-body {
    background: #0F0F0F;
}
html.theme-dark-actual input[type="text"],
html.theme-dark-actual input[type="email"],
html.theme-dark-actual input[type="url"],
html.theme-dark-actual input[type="password"],
html.theme-dark-actual input[type="search"],
html.theme-dark-actual textarea,
html.theme-dark-actual select {
    color-scheme: dark;
}
html.theme-dark-actual .modal-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

/* Theme-Switcher in der Navbar */
.theme-switch {
    display: inline-flex;
    background: var(--color-bg-secondary);
    border-radius: 999px;
    padding: 2px;
    gap: 1px;
}
.theme-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-muted);
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    min-width: 26px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme-btn:hover { color: var(--color-text); }
.theme-btn.active {
    background: var(--color-bg-card);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ====================================================
   Wetter-App
   ==================================================== */
.app-weather {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    overflow: hidden;
}
.weather-error {
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
    padding: 1rem;
    line-height: 1.5;
}

/* Mini (1×1) */
.weather-mini {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.weather-mini .weather-icon { font-size: 24px; line-height: 1; }
.weather-mini .weather-temp {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.weather-mini .weather-city {
    font-size: 10px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Wide (2×1) */
.weather-wide {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}
.weather-icon-lg { font-size: 36px; line-height: 1; }
.weather-info { flex: 1; min-width: 0; }
.weather-info .weather-temp-lg {
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.weather-info .weather-city {
    font-size: 12px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* Medium (2×2) */
.weather-medium {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}
.weather-medium .weather-city {
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.weather-icon-xl { font-size: 48px; line-height: 1; margin-bottom: 4px; }
.weather-temp-xl {
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.weather-medium .weather-label {
    font-size: 12px;
    color: var(--color-text-soft);
    margin-top: 4px;
}

/* Large (3×2 / 4×2 / 4×3) */
.weather-large {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;
}
.weather-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.weather-city-lg {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.weather-large .weather-label {
    font-size: 12px;
    color: var(--color-text-soft);
}
.weather-main {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex: 1;
}
.weather-temp-huge {
    font-size: 52px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
}
.weather-meta {
    font-size: 11px;
    color: var(--color-text-soft);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 4px;
}
.weather-forecast {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    border-top: 0.5px solid var(--color-border);
    padding-top: 10px;
}
.forecast-day {
    flex: 1;
    text-align: center;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.forecast-weekday {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}
.forecast-icon { font-size: 20px; line-height: 1; }
.forecast-temps {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-weight: 500;
}
.forecast-min { color: var(--color-text-muted); font-weight: 400; }

/* ====================================================
   Kalender-App
   ==================================================== */
.app-calendar {
    width: 100%;
    height: 100%;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cal-empty {
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
    padding: 1rem;
    line-height: 1.5;
    margin: auto;
}
.cal-error { color: var(--color-danger); }

/* Date-Modus (1×1) */
.cal-date-widget {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.cal-date-month {
    color: var(--color-danger);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cal-date-day {
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.cal-date-weekday {
    font-size: 11px;
    color: var(--color-text-soft);
    margin-top: 4px;
}

/* Mini-Monat (2×2) */
.cal-mini {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.cal-mini-header {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 6px;
    color: var(--color-text);
}
.cal-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    flex: 1;
}
.cal-mini-wd {
    font-size: 9px;
    color: var(--color-text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    padding: 2px 0;
}
.cal-mini-day {
    font-size: 10px;
    text-align: center;
    padding: 2px 0;
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-soft);
    position: relative;
}
.cal-mini-day.is-today {
    background: var(--color-primary);
    color: #fff;
    font-weight: 500;
}
.cal-mini-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-primary);
}
.cal-mini-day.is-today.has-event::after { background: #fff; }
.cal-mini-empty { visibility: hidden; }

/* Liste (3×2+) */
.cal-list {
    overflow-y: auto;
    height: 100%;
    padding-right: 4px;
}
.cal-day-group {
    margin-bottom: 12px;
}
.cal-day-group:last-child { margin-bottom: 0; }
.cal-day-head {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    padding: 4px 0;
    border-bottom: 0.5px solid var(--color-border);
    margin-bottom: 6px;
}
.cal-event {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    align-items: flex-start;
}
.cal-event-time {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    width: 50px;
    color: var(--color-text);
    padding-top: 1px;
}
.cal-allday {
    font-size: 9px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.cal-event-content {
    flex: 1;
    min-width: 0;
}
.cal-event-title {
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cal-event-location {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ====================================================
   HOTFIX 3a: Admin Users Action-Popover (am body)
   ==================================================== */

/* Trigger-Button (das ··· in der Tabellenzeile) */
.row-actions-trigger {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1.5px;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.row-actions-trigger:hover {
    background: var(--color-primary);
    color: #fff;
}
.row-actions-trigger.is-active {
    background: var(--color-primary);
    color: #fff;
}

/* Floating-Popover am Body */
.admin-row-popover {
    position: fixed;
    z-index: 9999;
    min-width: 240px;
    max-width: 320px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    animation: fadeIn 0.12s ease-out;
}
.admin-row-popover[hidden] { display: none; }

.popover-section {
    padding: 4px 0;
}
.popover-section + .popover-section {
    border-top: 0.5px solid var(--color-border);
    margin-top: 8px;
    padding-top: 12px;
}
.popover-label {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin-bottom: 6px;
}

.admin-row-popover .row-form {
    display: flex;
    gap: 6px;
    margin: 0;
}
.admin-row-popover .row-select {
    flex: 1;
    padding: 6px 10px;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
}

.popover-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-row-popover .row-action-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
}
.admin-row-popover .row-action-btn:hover {
    background: var(--color-bg-secondary);
}

/* Alte details-row-actions ausblenden, falls noch im DOM */
.row-actions { display: none; }

/* ====================================================
   To-Do-App
   ==================================================== */
.app-todo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--color-text);
}
.todo-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-soft);
    margin-bottom: 8px;
}

/* Eingabefeld + Add-Button */
.todo-input-wrap {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.todo-input {
    flex: 1;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
    outline: none;
    min-width: 0;
}
.todo-input:focus {
    border-color: var(--color-primary);
    background: var(--color-bg-card);
}
.todo-input::placeholder {
    color: var(--color-text-muted);
}
.todo-add-btn {
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    font-family: inherit;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.todo-add-btn:hover { background: var(--color-primary-hover, #5249d4); }

/* Aufgabenliste */
.todo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.todo-empty {
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
    padding: 1.5rem 0.5rem;
    line-height: 1.5;
}

.todo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
    position: relative;
}
.todo-item:hover {
    background: var(--color-bg-secondary);
}

/* Custom-Checkbox */
.todo-check-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
.todo-check {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}
.todo-check-mark {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-border-secondary, var(--color-border));
    border-radius: 4px;
    background: var(--color-bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.todo-check-wrap:hover .todo-check-mark {
    border-color: var(--color-primary);
}
.todo-check:checked + .todo-check-mark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.todo-check:checked + .todo-check-mark::after {
    content: '';
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

.todo-text {
    flex: 1;
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.3;
    word-break: break-word;
    min-width: 0;
}
.todo-item.is-done .todo-text {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.todo-remove {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s, background 0.1s, color 0.1s;
    padding: 0;
    font-family: inherit;
}
.todo-item:hover .todo-remove {
    opacity: 1;
}
.todo-remove:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Footer mit Zähler */
.todo-footer {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 0.5px solid var(--color-border);
    font-size: 11px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.todo-footer-count {
    flex-shrink: 0;
}
.todo-clear-done {
    background: transparent;
    border: 0;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.todo-clear-done:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
.todo-clear-done[hidden] {
    display: none !important;
}

/* Großer Modus: etwas mehr Abstand */
.app-todo-large .todo-item {
    padding: 6px 6px;
}
.app-todo-large .todo-text {
    font-size: 14px;
}

/* Touch-Geräte: Remove-Button immer sichtbar */
@media (hover: none) {
    .todo-remove {
        opacity: 0.5;
    }
}

/* ====================================================
   Pomodoro-App
   ==================================================== */
.app-pomodoro {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    text-align: center;
    gap: 6px;
    padding: 4px;
    box-sizing: border-box;
}

.pomo-mode {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    transition: color 0.2s;
}
.app-pomodoro.mode-focus .pomo-mode { color: var(--color-primary-text); }
.app-pomodoro.mode-short .pomo-mode { color: #1D9E75; }
.app-pomodoro.mode-long  .pomo-mode { color: #185FA5; }

/* Timer + Ring */
.pomo-timer-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pomo-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.pomo-ring-bg {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 5;
}
.pomo-ring-progress {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.2s;
}
.app-pomodoro.mode-short .pomo-ring-progress { stroke: #1D9E75; }
.app-pomodoro.mode-long  .pomo-ring-progress { stroke: #185FA5; }

.pomo-time {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    z-index: 1;
}

/* Controls */
.pomo-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.pomo-btn {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border: 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}
.pomo-btn-primary {
    background: var(--color-primary);
    color: #fff;
    padding: 7px 18px;
    min-width: 70px;
}
.app-pomodoro.mode-short .pomo-btn-primary { background: #1D9E75; }
.app-pomodoro.mode-long  .pomo-btn-primary { background: #185FA5; }
.pomo-btn-primary:hover { filter: brightness(1.08); }
.pomo-btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    padding: 6px 8px;
    font-size: 13px;
}
.pomo-btn-ghost:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}

/* Tagesstats */
.pomo-stats {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2px;
    line-height: 1.2;
}
.pomo-stats-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.pomo-dots {
    font-size: 10px;
    line-height: 1;
}
.pomo-count {
    font-weight: 500;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}

/* Größenmodi */
.app-pomodoro-medium {
    gap: 8px;
}
.app-pomodoro-medium .pomo-timer-wrap {
    width: 130px;
    height: 130px;
}
.app-pomodoro-medium .pomo-time {
    font-size: 30px;
}

.app-pomodoro-large {
    gap: 12px;
}
.app-pomodoro-large .pomo-mode {
    font-size: 13px;
}
.app-pomodoro-large .pomo-timer-wrap {
    width: 170px;
    height: 170px;
}
.app-pomodoro-large .pomo-time {
    font-size: 42px;
}
.app-pomodoro-large .pomo-btn {
    font-size: 13px;
    padding: 8px 18px;
}
.app-pomodoro-large .pomo-btn-primary {
    padding: 10px 24px;
    min-width: 90px;
}
.app-pomodoro-large .pomo-stats {
    font-size: 11px;
}

/* Pulsierender Ring beim Laufen */
.app-pomodoro.is-running .pomo-time {
    animation: pomoBlink 1s ease-in-out infinite;
}
@keyframes pomoBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ====================================================
   Zeiterfassungs-App
   ==================================================== */
.app-timetrack {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    overflow: hidden;
    font-size: 13px;
}

/* Stoppuhr-Bereich */
.tt-clock-area {
    flex-shrink: 0;
    margin-bottom: 10px;
}

.tt-running {
    background: var(--color-primary-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    text-align: center;
}
.tt-project-active {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--color-primary-text);
    font-weight: 500;
}
.tt-elapsed {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    margin-bottom: 8px;
}
.tt-stop-btn {
    background: var(--color-danger);
    color: #fff;
    border: 0;
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}
.tt-stop-btn:hover { filter: brightness(0.92); }

.tt-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tt-idle .tt-pick-label {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tt-empty-projects {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
    padding: 0.5rem 0.5rem;
    line-height: 1.4;
}
.tt-project-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 100px;
    overflow-y: auto;
}
.tt-project-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: var(--color-text);
    text-align: left;
    transition: all 0.1s;
    line-height: 1.3;
}
.tt-project-btn:hover {
    background: var(--color-bg-card);
    border-color: var(--p-color, var(--color-primary));
}
.tt-project-btn .tt-project-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tagesübersicht */
.tt-day-summary {
    flex: 1;
    overflow-y: auto;
    border-top: 0.5px solid var(--color-border);
    padding-top: 10px;
    min-height: 0;
}
.tt-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.tt-day-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.tt-day-total {
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.tt-day-projects {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tt-day-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 2px 0;
}
.tt-day-pname {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}
.tt-day-pdur {
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.tt-day-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 12px;
    padding: 0.5rem 0;
}

/* Footer-Aktionen */
.tt-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 0.5px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}
.tt-link {
    background: transparent;
    border: 0;
    color: var(--color-primary-text);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 4px;
}
.tt-link:hover { text-decoration: underline; }
.tt-link:disabled { opacity: 0.6; cursor: default; }

/* Größenmodi */
.app-timetrack-large .tt-elapsed { font-size: 36px; }
.app-timetrack-large .tt-project-active { font-size: 13px; }
.app-timetrack-large .tt-running { padding: 14px; }

/* Modal: Projekte verwalten */
.tt-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.tt-modal[hidden] { display: none; }
.tt-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    cursor: pointer;
}
.tt-modal-card {
    position: relative;
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.tt-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    color: var(--color-text-muted);
    cursor: pointer;
}
.tt-modal-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 1.25rem;
    padding-right: 30px;
}

.tt-modal-add {
    display: flex;
    gap: 6px;
    margin-bottom: 1rem;
    align-items: center;
}
.tt-modal-add input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
}
.tt-modal-add input[type="color"] {
    width: 40px;
    height: 36px;
    padding: 2px;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    cursor: pointer;
}

.tt-projects-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tt-projects-item {
    display: flex;
    gap: 6px;
    align-items: center;
    background: var(--color-bg-secondary);
    padding: 8px;
    border-radius: var(--radius-sm);
}
.tt-projects-item .tt-pcolor {
    width: 32px;
    height: 28px;
    padding: 2px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
}
.tt-projects-item .tt-pname {
    flex: 1;
    padding: 6px 10px;
    border: 0.5px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-card);
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
    min-width: 0;
}
.tt-projects-item .tt-pdelete {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}
.tt-projects-item .tt-pdelete:hover {
    background: var(--color-danger);
    color: #fff;
}
.tt-projects-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 1rem;
    list-style: none;
}

/* ====================================================
   Aktien-App
   ==================================================== */
.app-stocks {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    overflow: hidden;
}

/* Up/Down Farben */
.stocks-up   { color: #1D9E75; }
.stocks-down { color: #D9444F; }

/* Fehler-Zustand */
.stocks-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 1rem;
    gap: 6px;
}
.stocks-error-icon { font-size: 24px; opacity: 0.6; }
.stocks-error-text {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.stocks-error-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* ============================ MINI ============================ */
.stocks-mini {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.stocks-mini-symbol {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.stocks-mini-price {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stocks-mini-change {
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ============================ WATCHLIST ============================ */
.stocks-watchlist {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.stocks-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.stocks-row {
    border-bottom: 0.5px solid var(--color-border);
}
.stocks-row:last-child { border-bottom: 0; }
.stocks-row-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    gap: 8px;
    transition: background 0.12s;
}
.stocks-row.is-expandable .stocks-row-summary {
    cursor: pointer;
}
.stocks-row.is-expandable .stocks-row-summary:hover {
    background: var(--color-bg-secondary);
    margin: 0 -6px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 6px;
}
.stocks-row-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.stocks-row-chevron {
    font-size: 9px;
    color: var(--color-text-muted);
    transition: transform 0.18s ease;
    line-height: 1;
}
.stocks-row.is-open .stocks-row-chevron {
    transform: rotate(180deg);
}
.stocks-row-symbol {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.stocks-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.stocks-row-price {
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.stocks-row-change {
    font-size: 10px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ===== Aufgeklappte Detail-Sektion ===== */
.stocks-row-expand[hidden] {
    display: none;
}
.stocks-row-expand {
    padding: 8px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: stocks-expand-fade 0.2s ease;
}
@keyframes stocks-expand-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.stocks-row-name {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.stocks-row-chart {
    background: var(--color-bg-secondary);
    border-radius: 6px;
    padding: 8px;
    width: 100%;
    overflow: hidden;
}
.stocks-row-chart svg {
    width: 100%;
    height: auto;
    display: block;
}
.stocks-row-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px 12px;
    font-size: 11px;
}
.stocks-row-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.stocks-row-stat-label {
    color: var(--color-text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stocks-row-stat-val {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* ============================ DETAIL ============================ */
.stocks-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
}
.stocks-detail-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stocks-detail-symbol {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.stocks-detail-fullname {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stocks-detail-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.stocks-detail-price {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stocks-detail-change {
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Chart */
.stocks-chart-wrap {
    flex: 1;
    min-height: 60px;
    max-height: 130px;
    margin: 4px 0;
    display: flex;
    align-items: stretch;
}
.stocks-chart {
    width: 100%;
    height: 100%;
    display: block;
}

/* Range-Buttons */
.stocks-range-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.stocks-range-btn {
    background: transparent;
    border: 0.5px solid var(--color-border);
    color: var(--color-text-soft);
    padding: 4px 9px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    transition: all 0.1s;
    line-height: 1;
}
.stocks-range-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}
.stocks-range-btn.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Meta-Daten */
.stocks-meta {
    display: flex;
    gap: 12px;
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 2px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.stocks-meta-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.stocks-meta-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 9px;
}
.stocks-meta-value {
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Disclaimer */
.stocks-disclaimer {
    font-size: 9px;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.3;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 0.5px solid var(--color-border);
    flex-shrink: 0;
    opacity: 0.7;
}

/* Größenmodi */
.app-stocks-mini .stocks-mini-price { font-size: 20px; }

/* In sehr großen Kacheln (4×4): Chart darf dicker werden */
.app-stocks .stocks-detail .stocks-chart-wrap {
    flex: 1;
}

/* Stocks-Konfig-Modal Styles */
.stocks-cfg {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stocks-cfg-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
    padding: 6px;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.stocks-cfg-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    color: var(--color-text);
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.stocks-cfg-pill-x {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: all 0.1s;
}
.stocks-cfg-pill-x:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
.stocks-cfg-empty {
    color: var(--color-text-muted);
    font-size: 12px;
    padding: 4px;
}
.stocks-cfg-add {
    display: flex;
    gap: 6px;
}
.stocks-cfg-add input {
    flex: 1;
    padding: 6px 10px;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
}
.stocks-cfg-popular {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
}
.stocks-cfg-popular-label {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-right: 4px;
}
.stocks-cfg-chip {
    background: transparent;
    border: 0.5px solid var(--color-border);
    color: var(--color-text-soft);
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.1s;
}
.stocks-cfg-chip:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    border-color: var(--color-primary);
}

/* ====================================================
   Suche-App
   ==================================================== */
.app-search {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    color: var(--color-text);
}
.search-form {
    display: flex;
    align-items: center;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: 999px;
    padding: 4px 4px 4px 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
    margin: 0;
}
.search-form:focus-within {
    border-color: var(--engine-color, var(--color-primary));
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}
.search-engine-btn {
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.search-engine-btn svg { display: block; }
.search-input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 8px 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--color-text);
    outline: none;
    min-width: 0;
}
.search-input::placeholder { color: var(--color-text-muted); }
.search-submit-btn {
    background: var(--engine-color, var(--color-primary));
    border: 0;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 0.15s;
}
.search-submit-btn:hover { filter: brightness(0.92); }

/* Vorschläge */
.search-suggestions {
    list-style: none;
    margin: 6px 0 0;
    padding: 6px 0;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
}
.search-suggestions[hidden] { display: none; }
.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text);
    transition: background 0.1s;
}
.search-suggestion-item:hover,
.search-suggestion-item.is-active {
    background: var(--color-bg-secondary);
}
.search-suggestion-item svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Größenmodi */
.app-search-large .search-input {
    font-size: 16px;
    padding: 10px 8px;
}
.app-search-large .search-submit-btn {
    width: 34px;
    height: 34px;
}

/* ====================================================
   Routenplaner-App
   ==================================================== */
.app-routes {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    overflow: hidden;
    gap: 6px;
}

/* Eingabefelder */
.routes-form {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.routes-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 6px 0 0;
}
.routes-input-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    flex-shrink: 0;
}
.routes-icon-from { background: #1D9E75; }
.routes-icon-to   { background: #D9444F; }

.routes-input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 7px 8px;
    font-family: inherit;
    font-size: 12px;
    color: var(--color-text);
    outline: none;
    min-width: 0;
}
.routes-input::placeholder { color: var(--color-text-muted); }
.routes-icon-btn {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.routes-icon-btn:hover { color: var(--color-primary); }
.routes-icon-btn:disabled { opacity: 0.4; cursor: default; }

/* Suggestion-Liste */
.routes-suggest {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 180px;
    overflow-y: auto;
    margin-top: 2px;
}
.routes-suggest[hidden] { display: none; }
.routes-suggest-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text);
    line-height: 1.3;
}
.routes-suggest-item:hover { background: var(--color-bg-secondary); }

/* Modus-Buttons + GO */
.routes-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}
.routes-modes {
    display: flex;
    gap: 2px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    padding: 2px;
}
.routes-mode-btn {
    background: transparent;
    border: 0;
    color: var(--color-text-soft);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.routes-mode-btn:hover { color: var(--color-text); }
.routes-mode-btn.is-active {
    background: var(--color-bg-card);
    color: var(--color-primary-text);
    box-shadow: var(--shadow);
}
.routes-go-btn {
    flex: 1;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
}
.routes-go-btn:hover { filter: brightness(1.08); }

/* Karte */
.routes-map-wrap {
    position: relative;
    flex: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 100px;
    border: 0.5px solid var(--color-border);
}
.routes-map {
    width: 100%;
    height: 100%;
    background: var(--color-bg-secondary);
}
.routes-map .leaflet-container {
    font-family: inherit;
}

/* Marker A/B */
.routes-marker {
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.routes-marker > * { transform: rotate(45deg); }
.routes-marker-a { background: #1D9E75; }
.routes-marker-b { background: #D9444F; }

/* Overlay */
.routes-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--color-text-soft);
    z-index: 500;
}
html.theme-dark-actual .routes-overlay { background: rgba(20, 20, 20, 0.85); }
.routes-overlay[hidden] { display: none; }

/* Result-Stats */
.routes-result {
    flex-shrink: 0;
    display: flex;
    gap: 16px;
    padding: 6px 4px;
    border-top: 0.5px solid var(--color-border);
    font-size: 11px;
}
.routes-result[hidden] { display: none; }
.routes-result-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.routes-result-label {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 9px;
    font-weight: 500;
}
.routes-result-value {
    color: var(--color-text);
    font-weight: 500;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ====================================================
   HOTFIX: Such-Vorschläge am <body> (umgeht Stacking)
   ==================================================== */
.search-suggestions-floating {
    position: fixed;
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    display: none;
    animation: searchSuggFadeIn 0.1s ease-out;
}
@keyframes searchSuggFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.search-suggestions-floating .search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text);
    transition: background 0.1s;
    line-height: 1.3;
}
.search-suggestions-floating .search-suggestion-item:hover,
.search-suggestions-floating .search-suggestion-item.is-active {
    background: var(--color-bg-secondary);
}
.search-suggestions-floating .search-suggestion-item svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Alte In-Tile-Liste ausblenden, falls noch im DOM */
.app-search .search-suggestions { display: none !important; }


/* ====================================================
   HOVER-DRAG-SYSTEM für Kacheln (Desktop)
   Saubere, aufgeräumte Version
   ==================================================== */

/* ---- 1) Move-Zone (innerer Rand, JS-gesteuert) ---- */

/* Beim Hover über den inneren Rand: Greif-Hand am ganzen Item */
body.hover-drag-active .grid-stack-item.tile-zone-move {
    cursor: grab;
}
body.hover-drag-active .grid-stack-item.tile-zone-move:active {
    cursor: grabbing;
}

/* Visuelles Feedback: dezenter lila Innen-Rahmen */
body.hover-drag-active .grid-stack-item.tile-zone-move > .grid-stack-item-content {
    box-shadow: inset 0 0 0 1.5px var(--color-primary, #6366F1);
    transition: box-shadow 0.12s ease-out;
}

/* ---- 2) Resize-Handles (GridStack-eigene, immer aktiv) ---- */

/* Visuell unsichtbar, aber funktional. Cursor wird per Handle-spezifischer Regel gesetzt. */
body.hover-drag-active .grid-stack-item > .ui-resizable-handle {
    background: transparent !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    z-index: 100;
}

/* Hit-Areas an den 4 Kanten — schmal und nur am Rand */
body.hover-drag-active .grid-stack-item > .ui-resizable-n,
body.hover-drag-active .grid-stack-item > .ui-resizable-s {
    height: 8px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    cursor: ns-resize !important;
}
body.hover-drag-active .grid-stack-item > .ui-resizable-n { top: -2px !important; }
body.hover-drag-active .grid-stack-item > .ui-resizable-s { bottom: -2px !important; }

body.hover-drag-active .grid-stack-item > .ui-resizable-e,
body.hover-drag-active .grid-stack-item > .ui-resizable-w {
    width: 8px !important;
    top: 16px !important;
    bottom: 16px !important;
    height: auto !important;
    cursor: ew-resize !important;
}
body.hover-drag-active .grid-stack-item > .ui-resizable-e { right: -2px !important; }
body.hover-drag-active .grid-stack-item > .ui-resizable-w { left: -2px !important; }

/* Hit-Areas an den 4 Ecken — Quadrate */
body.hover-drag-active .grid-stack-item > .ui-resizable-ne,
body.hover-drag-active .grid-stack-item > .ui-resizable-nw,
body.hover-drag-active .grid-stack-item > .ui-resizable-se,
body.hover-drag-active .grid-stack-item > .ui-resizable-sw {
    width: 16px !important;
    height: 16px !important;
}
body.hover-drag-active .grid-stack-item > .ui-resizable-ne {
    top: -2px !important; right: -2px !important;
    cursor: nesw-resize !important;
}
body.hover-drag-active .grid-stack-item > .ui-resizable-nw {
    top: -2px !important; left: -2px !important;
    cursor: nwse-resize !important;
}
body.hover-drag-active .grid-stack-item > .ui-resizable-se {
    bottom: -2px !important; right: -2px !important;
    cursor: nwse-resize !important;
}
body.hover-drag-active .grid-stack-item > .ui-resizable-sw {
    bottom: -2px !important; left: -2px !important;
    cursor: nesw-resize !important;
}

/* ---- 3) ···-Menü-Eintrag „Verschieben/Größe ändern" auf Desktop verstecken ---- */
body.hover-drag-active .tile-menu-edit-layout {
    display: none;
}

/* ---- 4) Während Drag/Resize: schöner Schatten ---- */
.grid-stack-item.ui-draggable-dragging,
.grid-stack-item.ui-resizable-resizing {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

/* ====================================================
   APP-STORE DETAIL-SEITEN
   ==================================================== */

/* Container */
.store-detail .container {
    max-width: 880px;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

/* Zurück-Link */
.store-back {
    margin-bottom: 1.5rem;
}
.store-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-soft);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 999px;
    transition: background 0.15s;
}
.store-back-link:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}

/* App-Detail-Header */
.store-detail-header {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 1.5rem;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow);
}
.store-detail-icon {
    width: 96px;
    height: 96px;
    background: var(--color-primary-soft);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}
.store-detail-icon img,
.store-detail-icon object,
.store-detail-icon svg {
    width: 56px;
    height: 56px;
    color: inherit;
    pointer-events: none;
}
.store-detail-headtext {
    min-width: 0;
}
.store-detail-name {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.store-detail-publisher {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.store-publisher-link {
    color: var(--color-primary-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.store-publisher-link:hover { text-decoration: underline; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.badge-official {
    background: var(--color-primary);
    color: #fff;
}
.badge-verified {
    background: #1D9E75;
    color: #fff;
}

.store-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}
.store-meta-sep { opacity: 0.6; }

.store-detail-tagline {
    font-size: 14px;
    color: var(--color-text-soft);
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.store-detail-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 0.5px solid var(--color-border);
    padding-top: 1.25rem;
    margin-top: 0.5rem;
}
.store-detail-actions .form-select {
    padding: 8px 14px;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
    min-width: 180px;
}
.store-detail-actions .store-add-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.btn-lg {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Markdown-Inhalt (.prose) */
.prose {
    max-width: none;
    color: var(--color-text);
    line-height: 1.65;
    font-size: 15px;
    margin-bottom: 2.5rem;
}
.prose h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 2rem 0 0.75rem;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}
.prose h1 {
    /* in detail-seiten: app-name ist schon h1, also nochmal h1 in markdown vermeiden */
    display: none;
}
.prose p { margin: 0.75rem 0; }
.prose ul {
    margin: 0.75rem 0;
    padding-left: 1.25rem;
    line-height: 1.7;
}
.prose li { margin: 4px 0; }
.prose strong { font-weight: 600; }
.prose code {
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}
.prose hr {
    border: 0;
    border-top: 0.5px solid var(--color-border);
    margin: 1.5rem 0;
}
.prose a {
    color: var(--color-primary-text);
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
}
.prose a:hover { text-decoration-thickness: 1.5px; }

/* Verfügbare Größen */
.store-detail-sizes {
    margin-bottom: 2.5rem;
}
.store-detail-sizes h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 1rem;
}
.store-sizes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.store-size-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
    position: relative;
}
.store-size-card.is-default {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary-soft);
}
.store-size-preview {
    --w: 2;
    --h: 2;
    background: var(--color-primary-soft);
    border: 1px dashed var(--color-primary);
    border-radius: 6px;
    aspect-ratio: calc(var(--w) / var(--h));
    max-width: 90px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.store-size-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary-text);
    font-variant-numeric: tabular-nums;
}
.store-size-default-badge {
    display: inline-block;
    font-size: 9px;
    text-transform: uppercase;
    color: var(--color-primary-text);
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* Technische Details */
.store-detail-tech {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
}
.store-detail-tech h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 1rem;
}
.store-tech-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 24px;
    margin: 0;
    font-size: 13px;
}
.store-tech-list dt {
    color: var(--color-text-muted);
    font-weight: 400;
}
.store-tech-list dd {
    margin: 0;
    color: var(--color-text);
}
.store-tech-list dd a {
    color: var(--color-primary-text);
    text-decoration: none;
}
.store-tech-list dd a:hover { text-decoration: underline; }

/* Publisher-Seite */
.store-publisher-header {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
}
.store-publisher-name {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.store-publisher-badges {
    display: flex;
    gap: 6px;
    margin-bottom: 1rem;
}
.store-publisher-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-soft);
    margin: 0 0 1.25rem;
}
.store-publisher-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 0.5px solid var(--color-border);
    padding-top: 1rem;
}
.store-publisher-link-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-soft);
    text-decoration: none;
}
.store-publisher-link-meta:hover {
    color: var(--color-primary-text);
}

.store-publisher-apps h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 1rem;
}
.store-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.store-app-card-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.1s;
}
.store-app-card-link:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}
.store-app-card-icon {
    width: 44px;
    height: 44px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.store-app-card-icon img,
.store-app-card-icon object,
.store-app-card-icon svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
}
.store-app-card-text { min-width: 0; }
.store-app-card-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 2px;
}
.store-app-card-desc {
    font-size: 12px;
    color: var(--color-text-soft);
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Store-Übersicht: Karten als klickbare Links */
.store-app-card-link {
    cursor: pointer;
}
.store-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--color-primary-text);
    font-weight: 500;
}

/* ====================================================
   KALENDER-APP: Multi-Kalender UI (Konfig-Modal)
   ==================================================== */
.cal-config-list {
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    margin-bottom: 8px;
    max-height: 240px;
    overflow-y: auto;
}
.cal-config-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}
.cal-config-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 0.5px solid var(--color-border);
    transition: background 0.12s;
}
.cal-config-item:last-child { border-bottom: 0; }
.cal-config-item:hover { background: var(--color-bg-secondary); }

.cal-config-toggle {
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}
.cal-config-toggle.is-on {
    color: var(--color-primary);
}
.cal-config-toggle:hover { background: rgba(99, 102, 241, 0.08); }

.cal-config-info {
    flex: 1;
    min-width: 0;
}
.cal-config-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 2px;
}
.cal-config-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--color-bg-card);
}
.cal-config-url {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cal-config-action {
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background 0.1s, color 0.1s;
}
.cal-config-action:hover {
    color: var(--color-text);
    background: var(--color-bg-secondary);
}
.cal-config-delete:hover {
    color: #A32D2D;
    background: rgba(163, 45, 45, 0.08);
}

/* Inneres Editor-Modal */
.cal-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: calEditorFade 0.12s ease-out;
}
@keyframes calEditorFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cal-editor-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
    animation: calEditorPop 0.16s ease-out;
}
@keyframes calEditorPop {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.cal-editor-card h3 {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 600;
}
.cal-color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cal-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 0 2px var(--color-bg-card), 0 0 0 3px transparent;
    transition: box-shadow 0.12s, transform 0.1s;
}
.cal-color-swatch:hover { transform: scale(1.05); }
.cal-color-swatch.is-selected {
    box-shadow: 0 0 0 2px var(--color-bg-card), 0 0 0 4px var(--color-text);
}
.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* ====================================================
   KALENDER-APP: Tile mit Farb-Streifen
   ==================================================== */
.cal-event {
    display: flex;
    gap: 8px;
    padding: 6px 0 6px 0;
    position: relative;
}
.cal-event-stripe {
    width: 3px;
    border-radius: 1.5px;
    background: var(--cal-color, var(--color-primary));
    flex-shrink: 0;
    align-self: stretch;
    margin-right: 2px;
}
.cal-event-source {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Mini-Monats-Punkte (mehrere Farben pro Tag) */
.cal-mini-day {
    position: relative;
}
.cal-mini-dots {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    justify-content: center;
}
.cal-mini-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}
/* Bestehende has-event-Punkt-Anzeige durch unsere ersetzen */
.cal-mini-day.has-event::after { display: none !important; }

/* Fehler-Liste am Ende */
.cal-errors {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 0.5px dashed var(--color-border);
}
.cal-error-item {
    font-size: 11px;
    color: var(--color-text-muted);
    padding: 2px 0;
}

/* ====================================================
   KALENDER-EDITOR: Tab-Switcher (Vorlage / Eigene URL)
   ==================================================== */
.cal-editor-tabs {
    display: flex;
    gap: 4px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 18px;
}
.cal-editor-tab {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-soft);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    font-family: inherit;
}
.cal-editor-tab:hover {
    color: var(--color-text);
}
.cal-editor-tab.is-active {
    background: var(--color-bg-card);
    color: var(--color-primary-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.cal-editor-pane[hidden] { display: none; }

/* ====================================================
   RSS-READER APP
   ==================================================== */
.app-rss {
    height: 100%;
    overflow-y: auto;
    padding: 4px 0;
}
.app-rss .rss-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}
.app-rss .rss-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.app-rss .rss-item {
    border-bottom: 0.5px solid var(--color-border);
    padding: 0;
    transition: opacity 0.15s, background 0.12s;
}
.app-rss .rss-item:last-child { border-bottom: 0; }
.app-rss .rss-item:hover { background: var(--color-bg-secondary); }
.app-rss .rss-item.is-read { opacity: 0.5; }
.app-rss .rss-item.is-read .rss-title { font-weight: 500; }

.app-rss .rss-link {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    border-left: 3px solid var(--rss-color, var(--color-primary));
    margin-left: 0;
}
.app-rss .rss-content { flex: 1; min-width: 0; }
.app-rss .rss-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.32;
    color: var(--color-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.app-rss .rss-desc {
    font-size: 11px;
    color: var(--color-text-soft);
    margin-top: 4px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.app-rss .rss-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 10px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.app-rss .rss-source-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rss-color, var(--color-primary));
    flex-shrink: 0;
}
.app-rss .rss-source-name { font-weight: 600; }
.app-rss .rss-meta-sep { color: var(--color-border); }

.app-rss .rss-thumb {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-bg-secondary);
}
.app-rss .rss-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Compact-Modus: kleinere Schrift, weniger Padding */
.app-rss-compact .rss-link { padding: 8px 10px; }
.app-rss-compact .rss-title { font-size: 12px; -webkit-line-clamp: 2; }

/* Preview-Modus: größere Schrift in der Headline */
.app-rss-preview .rss-link { padding: 12px 14px; }
.app-rss-preview .rss-title { font-size: 14px; -webkit-line-clamp: 2; }
.app-rss-preview .rss-thumb { width: 100px; height: 70px; }

.app-rss .rss-errors {
    margin-top: 8px;
    padding: 8px 12px;
    border-top: 0.5px dashed var(--color-border);
}
.app-rss .rss-error-item {
    font-size: 11px;
    color: var(--color-text-muted);
    padding: 2px 0;
}

/* ====================================================
   EINHEITLICHER TILE-APP-HEADER (alle Apps)
   Eigener Klassenname, damit nicht mit altem .tile-header (Edit-Mode) kollidiert.
   ==================================================== */
.tile-app-header {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 0 0 8px 0;
    margin: 0 0 8px 0;
    border-bottom: 0.5px solid var(--color-border);
    flex-shrink: 0;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}
.tile-app-header-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Bei Apps mit eingebautem Header (Notes, Todo) ggf. Margins kompensieren */
.app-todo.has-tile-app-header .todo-title,
.app-notes.has-tile-app-header .notes-title {
    display: none; /* alter App-spezifischer Title-Header wird ausgeblendet */
}

/* Den Header bei ganz kleinen Größen ausblenden, da kein Platz */
.app-clock-1x1 .tile-app-header,
.app-search-1x1 .tile-app-header,
.app-calendar-date .tile-app-header {
    display: none !important;
}

/* Generell: Sehr kleine Kacheln (1x1) bekommen keinen Header */
.grid-stack-item[gs-w="1"][gs-h="1"] .tile-app-header {
    display: none !important;
}

/* ====================================================
   TILE-TITEL-FELD im Konfig-Modal (sauber & schön)
   ==================================================== */
.tile-title-row {
    margin-bottom: 18px;
    padding: 12px 14px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    border: 0.5px solid var(--color-border);
}
.tile-title-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.tile-title-header > label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.2px;
}

/* iOS-style Switch */
.tile-title-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.tile-title-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.tile-title-switch-track {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    background: #D5D2CC;
    border-radius: 999px;
    transition: background 0.18s ease;
    flex-shrink: 0;
}
.tile-title-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.18s ease;
}
.tile-title-switch input:checked ~ .tile-title-switch-track {
    background: var(--color-primary);
}
.tile-title-switch input:checked ~ .tile-title-switch-track .tile-title-switch-thumb {
    transform: translateX(16px);
}
.tile-title-switch-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    min-width: 30px;
}

/* Eingabefeld */
.tile-title-row input[name="tile_title"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 13px;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    color: var(--color-text);
    transition: opacity 0.15s, background 0.15s;
}
.tile-title-row input[name="tile_title"]:focus {
    outline: none;
    border-color: var(--color-primary);
}
.tile-title-row.is-off input[name="tile_title"] {
    opacity: 0.45;
    color: var(--color-text-muted);
    background: var(--color-bg-secondary);
    cursor: not-allowed;
}
.tile-title-row .form-hint {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ====================================================
   APP-STORE: MOCKUP-GALERIE (wiederhergestellt)
   ==================================================== */

/* Wrapper mit fester Breite, damit überschüssige Mockups horizontal scrollen */
.store-mockup-gallery {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 2rem;
    padding: 4px 0 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.store-mockup-gallery::-webkit-scrollbar { height: 6px; }
.store-mockup-gallery::-webkit-scrollbar-track { background: transparent; }
.store-mockup-gallery::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

/* Mockup-Karte: einheitliche Höhe, Breite ergibt sich aus SVG-Verhältnis */
.store-mockup-card {
    flex-shrink: 0;
    flex-grow: 0;
    scroll-snap-align: start;
    background: var(--color-bg-secondary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow);
    height: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.store-mockup-card svg {
    height: 100%;
    width: auto;
    max-width: none;
    display: block;
    border-radius: 10px;
}

/* Auf kleineren Bildschirmen: noch etwas kleiner */
@media (max-width: 640px) {
    .store-mockup-card {
        height: 180px;
        padding: 8px;
    }
}

/* Dark-Mode: Mockups haben weiße Tile-Backgrounds, daher Karte hell halten */
html.theme-dark-actual .store-mockup-card {
    background: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.1);
}

/* ====================================================
   STOCKS-AUTOCOMPLETE im Konfig-Modal
   ==================================================== */
.stocks-autocomplete-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.stocks-autocomplete-wrap input[data-stocks-newinput] {
    width: 100%;
    text-transform: none; /* normaler Text bei Suche, nicht uppercase */
}
.stocks-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow-y: auto;
    z-index: 1100;
    padding: 4px;
}
.stocks-autocomplete-dropdown[hidden] {
    display: none;
}
.stocks-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.1s;
}
.stocks-autocomplete-item:hover,
.stocks-autocomplete-item.is-active {
    background: var(--color-bg-secondary);
}
.stocks-autocomplete-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--color-primary-soft);
    border-radius: 6px;
}
.stocks-autocomplete-info {
    flex: 1;
    min-width: 0;
}
.stocks-autocomplete-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stocks-autocomplete-sym {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

/* "Chart nicht verfügbar"-Hinweis im Watchlist-Expand */
.stocks-row-chart-empty {
    background: var(--color-bg-secondary);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 11px;
    font-style: italic;
}

/* ====================================================
   Termine-App (events)
   ==================================================== */
.app-events {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.events-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.events-icon {
    font-size: 1.1rem;
}
.events-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.events-list {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0;
    overflow-y: auto;
    flex: 1;
}
.events-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.85rem;
    border-bottom: 1px solid var(--color-border);
}
.events-item:last-child {
    border-bottom: none;
}
.events-item-soon {
    background: var(--color-primary-soft);
}
.events-item-date {
    font-size: 0.78rem;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
}
.events-item-rel {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.events-item-title {
    font-size: 0.92rem;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.events-empty,
.events-empty-list,
.events-error {
    padding: 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}
.events-error {
    color: #993556;
}
.events-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    text-align: center;
    gap: 0.5rem;
}
.events-empty-icon {
    font-size: 2rem;
    opacity: 0.6;
}
.events-empty-text {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
/* Compact-Modus (2x2): kleinere Schrift */
.app-events-compact .events-item-title {
    font-size: 0.85rem;
    -webkit-line-clamp: 1;
}
.app-events-compact .events-item-date {
    font-size: 0.72rem;
}
.app-events-compact .events-header {
    padding: 0.5rem 0.7rem 0.4rem;
}

/* ====================================================
   Sprit-Preise-App (fuel)
   ==================================================== */
.app-fuel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fuel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.fuel-icon {
    font-size: 1.1rem;
}
.fuel-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}
.fuel-meta {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fuel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}
.fuel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--color-border);
}
.fuel-item:last-child {
    border-bottom: none;
}
.fuel-item-best {
    background: rgba(29, 158, 117, 0.07);
}
.fuel-item-left {
    flex: 1;
    min-width: 0;
}
.fuel-item-brand {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fuel-item-place {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fuel-item-right {
    text-align: right;
    flex-shrink: 0;
}
.fuel-item-price {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.fuel-item-best .fuel-item-price {
    color: #1D9E75;
    font-size: 1.05rem;
}
.fuel-item-diff {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.fuel-attribution {
    font-size: 10px;
    color: var(--color-text-muted);
    text-align: center;
    padding: 0.3rem 0.5rem 0.5rem;
    font-style: italic;
    flex-shrink: 0;
}
.fuel-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    text-align: center;
    gap: 0.5rem;
}
.fuel-empty-icon {
    font-size: 2rem;
    opacity: 0.6;
}
.fuel-empty-text {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.fuel-empty-list {
    padding: 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

/* ====================================================
   Pollenflug-App (pollen)
   ==================================================== */
.app-pollen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pollen-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.pollen-icon {
    font-size: 1.1rem;
}
.pollen-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}
.pollen-region {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.pollen-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0.85rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pollen-item {
    display: grid;
    grid-template-columns: minmax(60px, 25%) 1fr auto;
    gap: 0.5rem;
    align-items: center;
}
.pollen-item-name {
    font-size: 0.85rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pollen-item-bar {
    width: 100%;
}
.pollen-bar-track {
    width: 100%;
    height: 8px;
    background: var(--color-bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}
.pollen-bar-fill {
    height: 100%;
    transition: width 0.4s ease;
    border-radius: 4px;
}
.pollen-bar-l0 { background: #d8d8d8; }
.pollen-bar-l1 { background: #c0e6d0; }
.pollen-bar-l2 { background: #82d0a8; }
.pollen-bar-l3 { background: #f5d96b; }
.pollen-bar-l4 { background: #f5b956; }
.pollen-bar-l5 { background: #ec8a4f; }
.pollen-bar-l6 { background: #c84545; }
.pollen-item-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: right;
    min-width: 60px;
}
.pollen-no-load {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    color: var(--color-text-soft);
    gap: 0.5rem;
}
.pollen-no-load-icon {
    font-size: 2rem;
}
.pollen-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    text-align: center;
    gap: 0.5rem;
}
.pollen-empty-icon {
    font-size: 2rem;
    opacity: 0.6;
}
.pollen-empty-text {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.pollen-attribution {
    font-size: 10px;
    color: var(--color-text-muted);
    text-align: center;
    padding: 0.3rem 0.5rem 0.5rem;
    font-style: italic;
    flex-shrink: 0;
}

/* ====================================================
   Habit-Tracker (habit)
   ==================================================== */
.app-habit {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.6rem 0.7rem;
    box-sizing: border-box;
}
.habit-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}
.habit-icon {
    color: var(--color-primary);
    font-weight: bold;
}
.habit-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}
.habit-streak-best {
    margin-left: auto;
    font-size: 0.8rem;
    background: rgba(255, 165, 0, 0.12);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
    color: #cc6600;
}
.habit-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
}
.habit-empty-icon {
    font-size: 2rem;
    color: var(--color-text-muted);
    opacity: 0.5;
}
.habit-empty-text {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.habit-grid-header {
    display: flex;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
}
.habit-grid-name {
    flex: 1;
}
.habit-grid-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    width: 50%;
    max-width: 220px;
}
.habit-day-label {
    text-align: center;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    padding: 0.1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.habit-day-today {
    color: var(--color-primary);
    font-weight: 700;
}
.habit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}
.habit-row {
    display: flex;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border);
}
.habit-row:last-child {
    border-bottom: none;
}
.habit-row-name {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.habit-row-emoji {
    font-size: 1rem;
}
.habit-row-text {
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}
.habit-row-streak {
    font-size: 0.7rem;
    color: #cc6600;
    font-weight: 600;
}
.habit-row-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    width: 50%;
    max-width: 220px;
}
.habit-cell {
    aspect-ratio: 1;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: white;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.habit-cell:disabled {
    cursor: default;
}
.habit-cell.is-today {
    border-color: var(--color-primary);
    border-width: 2px;
}
.habit-cell.is-done {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.habit-cell[data-habit-toggle]:hover:not(.is-done) {
    background: var(--color-primary-soft);
}
.habit-footer {
    padding-top: 0.4rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.82rem;
    padding: 0.2rem 0.5rem;
}
.btn-link:hover {
    text-decoration: underline;
}

/* ====================================================
   Einkaufsliste (shopping)
   ==================================================== */
.app-shopping {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.6rem 0.7rem;
    box-sizing: border-box;
}
.shopping-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}
.shopping-icon {
    font-size: 1.1rem;
}
.shopping-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}
.shopping-stats {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.shopping-form {
    display: flex;
    gap: 0.4rem;
    margin: 0.5rem 0 0.4rem;
}
.shopping-input {
    flex: 1;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    color: var(--color-text);
    font-size: 0.88rem;
    font-family: inherit;
    min-width: 0;
}
.shopping-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.shopping-add-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--color-primary);
    color: white;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.shopping-add-btn:hover {
    filter: brightness(1.1);
}
.shopping-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.shopping-empty-text {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-align: center;
}
.shopping-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}
.shopping-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.1rem;
    border-bottom: 1px solid var(--color-border);
}
.shopping-item:last-child {
    border-bottom: none;
}
.shopping-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-card);
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shopping-item.is-done .shopping-checkbox {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.shopping-item-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shopping-item.is-done .shopping-item-text {
    text-decoration: line-through;
    color: var(--color-text-muted);
}
.shopping-item-qty {
    margin-left: 0.3rem;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    background: var(--color-bg-secondary);
    padding: 0.05rem 0.4rem;
    border-radius: 8px;
}
.shopping-delete {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.3rem;
    opacity: 0.5;
    flex-shrink: 0;
}
.shopping-delete:hover {
    color: #c84545;
    opacity: 1;
}
.shopping-footer {
    padding-top: 0.4rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

/* ====================================================
   Kalorienzähler (calories)
   ==================================================== */
.app-calories {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.6rem 0.7rem;
    box-sizing: border-box;
}
.cal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}
.cal-icon {
    font-size: 1.1rem;
}
.cal-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}
.cal-summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
}
.cal-progress-ring {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}
.cal-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.cal-ring-bg {
    fill: none;
    stroke: var(--color-bg-secondary);
    stroke-width: 3;
}
.cal-ring-fill {
    fill: none;
    stroke: #1D9E75;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s ease;
}
.cal-progress-close .cal-ring-fill { stroke: #cc8800; }
.cal-progress-over  .cal-ring-fill { stroke: #c84545; }
.cal-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.05;
}
.cal-ring-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.cal-ring-label {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.cal-meta {
    flex: 1;
    min-width: 0;
}
.cal-remaining {
    font-size: 0.85rem;
    color: var(--color-text-soft);
}
.cal-remaining strong {
    color: var(--color-text);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}
.cal-remaining.cal-over strong {
    color: #c84545;
}
.cal-form {
    display: flex;
    gap: 0.3rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.cal-input-name {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    color: var(--color-text);
    font-size: 0.85rem;
    font-family: inherit;
    min-width: 0;
}
.cal-input-kcal {
    width: 60px;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    color: var(--color-text);
    font-size: 0.85rem;
    font-family: inherit;
    text-align: right;
    flex-shrink: 0;
}
.cal-input-name:focus,
.cal-input-kcal:focus {
    outline: none;
    border-color: var(--color-primary);
}
.cal-add-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--color-primary);
    color: white;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.cal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}
.cal-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.1rem;
    border-bottom: 1px solid var(--color-border);
}
.cal-item:last-child {
    border-bottom: none;
}
.cal-item-name {
    flex: 1;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-item-kcal {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.cal-item-delete {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.3rem;
    opacity: 0.5;
}
.cal-item-delete:hover {
    color: #c84545;
    opacity: 1;
}
.cal-history {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 50px;
    padding-top: 0.4rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0.3rem;
}
.cal-hist-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    position: relative;
    cursor: default;
}
.cal-hist-bar-fill {
    background: var(--color-primary-soft);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}
.cal-hist-bar.is-today .cal-hist-bar-fill {
    background: var(--color-primary);
}
.cal-hist-bar-label {
    text-align: center;
    font-size: 0.6rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    text-transform: uppercase;
}
.cal-hist-bar.is-today .cal-hist-bar-label {
    color: var(--color-primary);
    font-weight: 700;
}

/* ====================================================
   Habit-Tracker — Emoji-Picker-Modal
   ==================================================== */
.habit-modal-card {
    max-width: 480px;
}
.habit-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    padding: 4px 0;
}
.habit-emoji-btn {
    aspect-ratio: 1;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-card);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.habit-emoji-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    transform: scale(1.05);
}
.habit-emoji-btn.is-selected {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: 0 0 0 2px var(--color-primary-soft);
}
@media (max-width: 480px) {
    .habit-emoji-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   Tracker-Apps: Klickbarkeit fixen
   GridStack's ui-resizable-handles haben inline z-index: 100 und liegen
   über den Buttons → Klicks gehen verloren. Wir lifteten unsere
   interaktiven Elemente auf z-index: 200 mit position: relative.
   ============================================ */
.app-habit .habit-cell,
.app-habit [data-habit-add],
.app-habit .btn-link {
    position: relative;
    z-index: 11;
}
.app-shopping .shopping-checkbox,
.app-shopping .shopping-add-btn,
.app-shopping .shopping-delete,
.app-shopping .shopping-input,
.app-shopping .btn-link {
    position: relative;
    z-index: 11;
}
.app-calories .cal-add-btn,
.app-calories .cal-item-delete,
.app-calories .cal-input-name,
.app-calories .cal-input-kcal {
    position: relative;
    z-index: 11;
}

/* ============================================================
   MARKETING-STARTSEITE
   Hybrid: Apple-Hero · Notion-Mitte · Linear-Footer
   Prefix: m- (für Marketing)
   ============================================================ */

/* CSS-Variablen für Marketing nur falls nicht schon definiert */
:root {
    --m-grad-from: #6366F1;
    --m-grad-to:   #A855F7;
    --m-bg-soft:   #FAF8F4;
    --m-bg-dark:   #0F0F1A;
}

/* Reset für Section-Spacing */
.m-hero,
.m-trust,
.m-three-up,
.m-use-cases,
.m-apps,
.m-how,
.m-faq,
.m-final-cta {
    padding: 4rem 1.2rem;
}

/* ===== HERO — Apple-Stil ===== */
.m-hero {
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 6rem;
    background: linear-gradient(180deg, #FAF8F4 0%, #FFFFFF 100%);
    position: relative;
    overflow: hidden;
}
.m-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.m-hero-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.m-hero-title {
    font-size: clamp(2.4rem, 5.5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin: 0 0 1.5rem;
    color: var(--color-text);
}
.m-grad {
    background: linear-gradient(120deg, var(--m-grad-from), var(--m-grad-to));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.m-hero-subtitle {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    color: var(--color-text-soft);
    line-height: 1.55;
    margin: 0 auto 2rem;
    max-width: 640px;
}
.m-hero-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.m-hero-fineprint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Browser-Mockup */
.m-hero-mockup {
    max-width: 1080px;
    margin: 4rem auto 0;
    perspective: 1500px;
}
.m-browser {
    background: var(--color-bg-card);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(99, 102, 241, 0.18), 0 8px 24px rgba(0,0,0,0.06);
    overflow: hidden;
    transform: rotateX(2deg);
    transform-origin: top center;
    transition: transform 0.4s ease;
}
.m-browser:hover {
    transform: rotateX(0deg);
}
.m-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    background: #F1F1F4;
    border-bottom: 1px solid var(--color-border);
}
.m-browser-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.m-browser-dot-r { background: #FF5F57; }
.m-browser-dot-y { background: #FEBC2E; }
.m-browser-dot-g { background: #28C840; }
.m-browser-url {
    margin-left: 0.7rem;
    background: white;
    border-radius: 8px;
    padding: 0.3rem 0.9rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    flex: 1;
    max-width: 360px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.m-browser-body {
    padding: 1.5rem;
    background: var(--m-bg-soft);
}
.m-mock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 0.9rem;
    min-height: 320px;
}
.m-mock-tile {
    background: white;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
    font-size: 0.85rem;
}
.m-mock-tile-title {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-bottom: 0.3rem;
    font-weight: 600;
}
.m-mock-clock { background: linear-gradient(135deg, #6366F1, #A855F7); color: white; }
.m-mock-clock .m-mock-label { font-size: 1.6rem; font-weight: 700; }
.m-mock-clock .m-mock-sub { font-size: 0.75rem; opacity: 0.9; }
.m-mock-weather .m-mock-icon { font-size: 1.5rem; }
.m-mock-weather .m-mock-temp { font-size: 1.6rem; font-weight: 700; color: var(--color-text); }
.m-mock-weather .m-mock-sub { font-size: 0.72rem; color: var(--color-text-muted); }
.m-mock-bookmark, .m-mock-todo-item, .m-mock-cal-event, .m-mock-stock {
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
}
.m-mock-bm-fav {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #6366F1;
    color: white;
    font-size: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.m-mock-cb {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1.5px solid var(--color-border);
    flex-shrink: 0;
}
.m-mock-cb-done {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.m-mock-cal-time {
    font-size: 0.7rem;
    color: var(--color-primary);
    font-weight: 600;
    width: 36px;
}
.m-mock-stock {
    justify-content: space-between;
}
.m-mock-stock-up { color: #1D9E75; font-weight: 600; }
.m-mock-stock-down { color: #c84545; font-weight: 600; }

/* ===== TRUST-Streifen ===== */
.m-trust {
    background: var(--m-bg-soft);
    padding: 2.5rem 1.2rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.m-trust-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.m-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.m-trust-num {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
}
.m-trust-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.m-trust-divider {
    width: 1px;
    height: 36px;
    background: var(--color-border);
}

/* ===== Section-Header (geteilt) ===== */
.m-section-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.8rem;
}
.m-section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 0.7rem;
    line-height: 1.15;
}
.m-section-sub {
    font-size: 1.05rem;
    color: var(--color-text-soft);
    text-align: center;
    margin: 0 auto 3rem;
    max-width: 600px;
    line-height: 1.55;
}

/* ===== 3 KERN-FUNKTIONEN ===== */
.m-three-up-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.m-feature {
    text-align: center;
    padding: 1.5rem;
}
.m-feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.2rem;
    background: var(--color-primary-soft);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}
.m-feature-icon-startseite { background: rgba(99, 102, 241, 0.10); }
.m-feature-icon-bookmark   { background: rgba(168, 85, 247, 0.10); }
.m-feature-icon-share      { background: rgba(29, 158, 117, 0.10); }
.m-feature h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 0.6rem;
    color: var(--color-text);
}
.m-feature p {
    color: var(--color-text-soft);
    line-height: 1.55;
    margin: 0;
}

/* ===== USE CASES (Notion-Stil) ===== */
.m-use-cases {
    background: var(--m-bg-soft);
}
.m-uc-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
.m-uc-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 2.2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: transform 0.2s, box-shadow 0.2s;
}
.m-uc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}
.m-uc-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.6rem 0 0.7rem;
    color: var(--color-text);
}
.m-uc-content p {
    color: var(--color-text-soft);
    line-height: 1.6;
    margin: 0 0 1.2rem;
}
.m-uc-emoji {
    font-size: 2.2rem;
    line-height: 1;
}
.m-uc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.m-uc-list li {
    padding: 0.4rem 0 0.4rem 1.7rem;
    position: relative;
    color: var(--color-text-soft);
    font-size: 0.95rem;
}
.m-uc-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* Mini-Mockups in Use-Case-Karten */
.m-uc-mockup {
    background: var(--m-bg-soft);
    border-radius: 14px;
    padding: 1.2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    min-height: 240px;
    align-content: center;
}
.m-mock-mini-tile {
    background: white;
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
}
.m-mock-mini-tile strong {
    font-size: 0.95rem;
    color: var(--color-text);
}
.m-mock-mini-tile small {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
/* Akzentfarben für Mini-Mockups (variieren leicht je Karte) */
.m-uc-card-1 .m-uc-mockup { background: linear-gradient(135deg, #EEF0FF, #F5F1FF); }
.m-uc-card-2 .m-uc-mockup { background: linear-gradient(135deg, #FFF4E6, #FFFAEB); }
.m-uc-card-3 .m-uc-mockup { background: linear-gradient(135deg, #E6F4FF, #F0F8FF); }
.m-uc-card-4 .m-uc-mockup { background: linear-gradient(135deg, #FFE6F0, #FFF0F5); }
.m-uc-card-5 .m-uc-mockup { background: linear-gradient(135deg, #E6FFF0, #F0FFF5); }

/* ===== APPS PARADE ===== */
.m-app-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.8rem;
    max-width: 1100px;
    margin: 0 auto;
}
.m-app-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.15s;
}
.m-app-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}
.m-app-card span {
    font-size: 1.6rem;
}
.m-app-card strong {
    font-size: 0.85rem;
    color: var(--color-text);
    text-align: center;
    font-weight: 500;
}
.m-app-card-more {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}
.m-app-card-more strong {
    color: var(--color-primary);
    font-weight: 600;
}

/* ===== HOW IT WORKS — 3 Steps ===== */
.m-how {
    background: var(--m-bg-soft);
}
.m-steps {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.m-step {
    flex: 1;
    min-width: 220px;
    text-align: center;
    padding: 1.5rem;
}
.m-step-num {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--m-grad-from), var(--m-grad-to));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}
.m-step h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.m-step p {
    color: var(--color-text-soft);
    line-height: 1.55;
    margin: 0;
}
.m-step-arrow {
    color: var(--color-text-muted);
    font-size: 1.5rem;
    align-self: center;
    flex: 0 0 auto;
    opacity: 0.4;
}

/* ===== FAQ ===== */
.m-faq-container {
    max-width: 720px;
}
.m-faq-item {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-card);
    margin-bottom: 0.7rem;
    transition: box-shadow 0.15s;
}
.m-faq-item[open] {
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.m-faq-item summary {
    padding: 1rem 1.4rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    color: var(--color-text);
    font-size: 1rem;
    position: relative;
    padding-right: 3rem;
}
.m-faq-item summary::-webkit-details-marker { display: none; }
.m-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: var(--color-text-muted);
    transition: transform 0.2s;
}
.m-faq-item[open] summary::after {
    content: '−';
}
.m-faq-item p {
    padding: 0 1.4rem 1.2rem;
    margin: 0;
    color: var(--color-text-soft);
    line-height: 1.6;
}

/* ===== FINAL CTA — Linear-Stil (dunkel) ===== */
.m-final-cta {
    padding: 5rem 1.2rem;
}
.m-final-card {
    background: linear-gradient(135deg, #0F0F1A 0%, #1F1F3A 100%);
    border-radius: 24px;
    padding: 4rem 2rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    color: white;
    position: relative;
    overflow: hidden;
}
.m-final-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.4) 0%, transparent 60%);
    pointer-events: none;
}
.m-final-card > * {
    position: relative;
    z-index: 1;
}
.m-final-title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    line-height: 1.15;
}
.m-final-sub {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 auto 2rem;
    max-width: 540px;
    line-height: 1.55;
}
.m-final-actions {
    margin-bottom: 1.8rem;
}
.m-final-actions .btn-primary {
    background: white;
    color: var(--m-bg-dark);
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.m-final-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
    background: white;
    filter: brightness(0.95);
}
.m-final-perks {
    display: flex;
    justify-content: center;
    gap: 1.8rem;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .m-three-up-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .m-uc-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .m-uc-card .m-uc-mockup {
        order: 2;
    }
    .m-uc-card-2 .m-uc-mockup,
    .m-uc-card-4 .m-uc-mockup {
        order: 2;
    }
    .m-step-arrow { display: none; }
    .m-mock-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .m-trust-row {
        gap: 1.2rem;
    }
    .m-trust-divider { display: none; }
    .m-final-card { padding: 2.5rem 1.5rem; }
}
@media (max-width: 560px) {
    .m-hero { padding-top: 3rem; padding-bottom: 4rem; }
    .m-hero-mockup { display: none; } /* Mobile: Mockup weg, schlankerer Hero */
    .m-uc-mockup {
        grid-template-columns: 1fr 1fr;
        min-height: 180px;
    }
    .m-app-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ====================================================
   Countdown-App
   ==================================================== */
.app-countdown {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0.7rem;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}
.app-countdown-empty {
    color: var(--color-text-muted);
}
.cd-empty-emoji {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}
.cd-empty-text {
    font-size: 0.85rem;
    margin: 0;
}
.cd-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}
.cd-emoji {
    font-size: 1.2rem;
}
.cd-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
}
.cd-num-big {
    font-size: clamp(2.2rem, 8vw, 4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.cd-today {
    font-size: clamp(2.2rem, 6vw, 3rem);
}
.cd-label-big {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    margin-top: 0.2rem;
}
.cd-live {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    margin: 0.5rem 0;
    width: 100%;
    max-width: 360px;
}
.cd-cell {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    padding: 0.5rem 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cd-num {
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.cd-unit {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.15rem;
}
.cd-footer {
    margin-top: 0.6rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.app-countdown.is-past {
    opacity: 0.7;
}
.app-countdown-mini .cd-header { margin-bottom: 0.2rem; }
.app-countdown-mini .cd-emoji  { display: none; }
.app-countdown-mini .cd-num-big { font-size: 1.6rem; }
.app-countdown-mini .cd-label-big { font-size: 0.7rem; }

/* ====================================================
   Vereins-Cockpit
   ==================================================== */
.app-club {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.6rem 0.7rem;
    box-sizing: border-box;
}
.club-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}
.club-icon { font-size: 1.1rem; }
.club-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}
.club-tabs {
    display: flex;
    gap: 0.3rem;
    margin: 0.4rem 0 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.club-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.4rem 0.3rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    position: relative;
    z-index: 11;
    font-family: inherit;
}
.club-tab:hover {
    color: var(--color-text);
}
.club-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
.club-pane {
    display: none;
    flex: 1;
    overflow-y: auto;
    flex-direction: column;
}
.club-pane.is-active {
    display: flex;
}
.club-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    color: var(--color-text-muted);
    gap: 0.3rem;
}
.club-empty p {
    margin: 0;
    font-size: 0.85rem;
}
.club-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
}
.club-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.1rem;
    border-bottom: 1px solid var(--color-border);
}
.club-list-item:last-child { border-bottom: none; }
.club-list-item.is-past {
    opacity: 0.6;
}
.club-day-badge {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    min-width: 30px;
    text-align: center;
}
.club-list-content {
    flex: 1;
    min-width: 0;
}
.club-list-time {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.club-list-note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.club-fixture-date {
    background: var(--color-bg-secondary);
    color: var(--color-text-soft);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 50px;
    text-align: center;
}
.club-fixture-team {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text);
}
.club-fixture-ha {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.club-fixture-ha.is-home {
    background: rgba(29, 158, 117, 0.12);
    color: #1D9E75;
}
.club-fixture-ha.is-away {
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-primary);
}
.club-fixture-opp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.club-fixture-score {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.club-fixture-time {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}
.club-table {
    list-style: none;
    margin: 0;
    padding: 0;
}
.club-table-row {
    display: grid;
    grid-template-columns: 28px 1fr 28px 36px 18px;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.1rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}
.club-table-row:last-child { border-bottom: none; }
.club-table-row.is-own {
    background: var(--color-primary-soft);
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
}
.club-table-pos {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-align: center;
    font-weight: 600;
}
.club-table-team {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}
.club-table-row.is-own .club-table-team {
    font-weight: 700;
    color: var(--color-primary);
}
.club-table-games {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.club-table-points {
    font-weight: 700;
    color: var(--color-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.club-delete {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.2rem;
    opacity: 0.5;
    flex-shrink: 0;
    position: relative;
    z-index: 11;
}
.club-delete:hover {
    color: #c84545;
    opacity: 1;
}
.club-pane-footer {
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.club-form-row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* ====================================================
   Kontaktformular
   ==================================================== */
.app-contact {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.7rem 0.8rem;
    box-sizing: border-box;
}
.contact-title-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}
.contact-icon { font-size: 1.2rem; }
.contact-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}
.contact-warning {
    background: rgba(251, 191, 36, 0.12);
    border-left: 3px solid #ca8a04;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    margin-top: 0.5rem;
}
.contact-warning p {
    margin: 0;
    font-size: 0.85rem;
    color: #92400e;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.contact-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.contact-form-row label {
    font-size: 0.78rem;
    color: var(--color-text-soft);
    font-weight: 500;
}
.contact-required {
    color: #c84545;
}
.contact-form-row input,
.contact-form-row textarea {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    color: var(--color-text);
    font-size: 0.88rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 11;
}
.contact-form-row input:focus,
.contact-form-row textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}
.contact-form-row textarea {
    resize: vertical;
    min-height: 60px;
}
/* Honeypot — komplett unsichtbar, aber DOM-vorhanden */
.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.contact-form-actions {
    margin-top: 0.4rem;
}
.contact-submit {
    width: 100%;
    position: relative;
    z-index: 11;
}
.contact-feedback {
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-top: 0.4rem;
}
.contact-feedback-info {
    background: var(--color-bg-secondary);
    color: var(--color-text-soft);
}
.contact-feedback-success {
    background: rgba(29, 158, 117, 0.12);
    color: #1D9E75;
}
.contact-feedback-error {
    background: rgba(200, 69, 69, 0.12);
    color: #c84545;
}

/* Konfig-Modal: Custom-Field-Editor */
.contact-custom-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.contact-custom-row {
    display: grid;
    grid-template-columns: 1fr 90px 30px 24px;
    gap: 0.4rem;
    align-items: center;
}
.contact-custom-row input[type="text"],
.contact-custom-row select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    font-size: 0.85rem;
    font-family: inherit;
    min-width: 0;
}
.contact-custom-req {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    cursor: pointer;
}
.contact-custom-del {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.contact-custom-del:hover { color: #c84545; }


}

/* ============================================
   Admin: Apps-Verwaltung
   ============================================ */
.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.2rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-page-sub {
    color: var(--color-text-muted);
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
}
.admin-breadcrumb {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
}
.admin-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.admin-breadcrumb a:hover {
    color: var(--color-primary);
}
.admin-h1-sub {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 1rem;
    margin-left: 0.5rem;
}
.admin-app-slug-h1 {
    background: var(--color-bg-secondary);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 1.4rem;
    font-weight: 600;
}

.admin-stat-link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
    display: block;
}
.admin-stat-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.admin-apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1rem;
}
.admin-app-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    transition: box-shadow 0.15s;
}
.admin-app-card:hover {
    box-shadow: var(--shadow-lg);
}
.admin-app-card.is-inactive {
    opacity: 0.65;
    background: var(--color-bg-secondary);
}
.admin-app-header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.admin-app-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-app-icon img {
    width: 28px;
    height: 28px;
}
.admin-app-info {
    flex: 1;
    min-width: 0;
}
.admin-app-name {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.admin-app-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.admin-app-badge-locked {
    background: rgba(200, 69, 69, 0.12);
    color: #c84545;
}
.admin-app-badge-beta {
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-primary);
}
.admin-app-badge-featured {
    background: rgba(251, 191, 36, 0.15);
    color: #ca8a04;
}
.admin-app-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.78rem;
}
.admin-app-slug {
    background: var(--color-bg-secondary);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    color: var(--color-text-soft);
    font-size: 0.78rem;
}
.admin-app-version,
.admin-app-category {
    color: var(--color-text-muted);
}
.admin-app-plan {
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.7rem;
}
.admin-app-plan.plan-free {
    background: var(--color-bg-secondary);
    color: var(--color-text-soft);
}
.admin-app-plan.plan-pro {
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-primary);
}
.admin-app-plan.plan-teams {
    background: rgba(29, 158, 117, 0.12);
    color: #1D9E75;
}
.admin-app-stats {
    display: flex;
    gap: 1.5rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.admin-app-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.admin-app-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.admin-app-stat-label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.admin-app-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.admin-app-actions .btn-sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}
.btn-ghost-danger {
    background: transparent;
    color: #c84545;
    border: 1px solid var(--color-border);
}
.btn-ghost-danger:hover {
    background: rgba(200, 69, 69, 0.08);
    border-color: #c84545;
}

/* App-Edit-View */
.admin-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1rem 0.5rem;
    margin: 0 0 1rem;
}
.admin-fieldset-legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--color-text-soft);
    font-size: 0.85rem;
}
.admin-card-subtitle {
    margin: 1.2rem 0 0.6rem;
    font-size: 0.95rem;
    color: var(--color-text-soft);
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}
.admin-info-list {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 0.4rem 1rem;
}
.admin-info-list dt {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.admin-info-list dd {
    margin: 0;
    color: var(--color-text);
    font-size: 0.85rem;
}
.admin-info-list code {
    font-size: 0.78rem;
    background: var(--color-bg-secondary);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
}
.admin-card-hint {
    margin: 1rem 0 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-style: italic;
}
.admin-banner {
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.admin-banner-warning {
    background: rgba(251, 191, 36, 0.12);
    color: #92400e;
    border-left: 3px solid #ca8a04;
}
.admin-status-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}
.admin-status-active {
    background: rgba(29, 158, 117, 0.12);
    color: #1D9E75;
}
.admin-status-suspended {
    background: rgba(200, 69, 69, 0.12);
    color: #c84545;
}

@media (max-width: 640px) {
    .admin-apps-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Store-Promo-Card (App-Idee einreichen)
   ============================================================ */
.store-promo-card {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #2563EB 100%);
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.25);
}
.store-promo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(79, 70, 229, 0.35);
}
.store-promo-glow {
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.18) 0%, transparent 60%);
    pointer-events: none;
}
.store-promo-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.store-promo-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 0.9rem;
    backdrop-filter: blur(8px);
}
.store-promo-eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.store-promo-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.store-promo-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    margin: 0 0 1rem;
    flex: 1;
}
.store-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    background: rgba(255, 255, 255, 0.22);
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    width: fit-content;
    backdrop-filter: blur(8px);
    transition: background 0.2s;
}
.store-promo-card:hover .store-promo-cta {
    background: rgba(255, 255, 255, 0.32);
}

/* ============================================================
   App-Idea-Page
   ============================================================ */
.app-idea-section {
    padding: 2.5rem 1.2rem 4rem;
    min-height: calc(100vh - 80px);
    background: var(--color-bg-secondary);
}
.app-idea-container {
    max-width: 720px;
}
.app-idea-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    transition: color 0.15s;
}
.app-idea-back:hover {
    color: var(--color-primary);
}
.app-idea-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}
.app-idea-hero-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: white;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3);
}
.app-idea-title {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.6rem;
    letter-spacing: -0.02em;
}
.app-idea-subtitle {
    font-size: 1rem;
    color: var(--color-text-soft);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 540px;
}

.app-idea-form {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
}
.app-idea-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.app-idea-form-grid > .form-row {
    margin-bottom: 0;
}

.app-idea-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}
.app-idea-type-card {
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--color-bg-card);
    text-align: left;
}
.app-idea-type-card:hover {
    border-color: var(--color-primary);
}
.app-idea-type-card.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
}
.app-idea-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.app-idea-type-icon {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
}
.app-idea-type-name {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.2rem;
    font-size: 0.95rem;
}
.app-idea-type-desc {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.app-idea-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--color-border);
}

.app-idea-success {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--shadow);
}
.app-idea-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    background: rgba(29, 158, 117, 0.15);
    color: #1D9E75;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 700;
}
.app-idea-success h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.6rem;
}
.app-idea-success p {
    color: var(--color-text-soft);
    line-height: 1.6;
    margin: 0 auto 1.5rem;
    max-width: 420px;
}
.app-idea-success-actions {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.app-idea-errors {
    background: rgba(200, 69, 69, 0.08);
    border-left: 3px solid #c84545;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    color: #92403e;
}
.app-idea-errors strong {
    display: block;
    margin-bottom: 0.4rem;
    color: #c84545;
}
.app-idea-errors ul {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.9rem;
}

.app-idea-inspiration {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
}
.app-idea-inspiration h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
}
.app-idea-inspiration p {
    color: var(--color-text-soft);
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.app-idea-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}
.app-idea-example {
    padding: 0.35rem 0.8rem;
    background: var(--color-bg-secondary);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--color-text-soft);
}

@media (max-width: 600px) {
    .app-idea-form-grid,
    .app-idea-type-cards {
        grid-template-columns: 1fr;
    }
    .app-idea-form {
        padding: 1.5rem;
    }
}

/* ============================================================
   Paketverfolgung-App
   ============================================================ */
.app-parcel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.6rem 0.7rem;
    box-sizing: border-box;
}
.parcel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}
.parcel-icon {
    font-size: 1.1rem;
}
.parcel-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.parcel-count {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}

.parcel-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-muted);
    padding: 0.8rem;
    gap: 0.5rem;
}
.parcel-empty-icon {
    font-size: 2.2rem;
    opacity: 0.5;
}
.parcel-empty-text {
    font-size: 0.82rem;
    margin: 0;
    line-height: 1.45;
}

.parcel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.parcel-item {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    border: 1px solid transparent;
    transition: border-color 0.15s;
}
.parcel-item:hover {
    border-color: var(--color-border);
}

.parcel-row-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.parcel-carrier-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    min-width: 38px;
    text-align: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.parcel-content {
    flex: 1;
    min-width: 0;
}
.parcel-name {
    font-size: 0.86rem;
    color: var(--color-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.parcel-no-name {
    color: var(--color-text-muted);
    font-style: italic;
    font-weight: 400;
}
.parcel-number {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    margin-top: 0.1rem;
}
.parcel-delete {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.3rem;
    opacity: 0.5;
    flex-shrink: 0;
    border-radius: 4px;
    position: relative;
    z-index: 11;
}
.parcel-delete:hover {
    color: #c84545;
    opacity: 1;
    background: rgba(200, 69, 69, 0.08);
}

.parcel-row-meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--color-border);
    font-size: 0.74rem;
    color: var(--color-text-muted);
}
.parcel-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.parcel-track-link {
    margin-left: auto;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--color-primary-soft);
    font-size: 0.72rem;
    transition: background 0.15s;
    position: relative;
    z-index: 11;
}
.parcel-track-link:hover {
    background: var(--color-primary);
    color: white;
}

.parcel-footer {
    padding-top: 0.5rem;
    margin-top: 0.4rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

/* Compact-Modus für 2x2 — kompaktere Items */
.app-parcel-compact .parcel-row-main {
    gap: 0.4rem;
}
.app-parcel-compact .parcel-carrier-badge {
    font-size: 0.62rem;
    min-width: 32px;
    padding: 0.15rem 0.35rem;
}
.app-parcel-compact .parcel-name {
    font-size: 0.78rem;
}
.app-parcel-compact .parcel-number {
    font-size: 0.68rem;
}
.app-parcel-compact .parcel-row-meta {
    font-size: 0.68rem;
    gap: 0.4rem;
}

/* ============================================================
   Webradio-App
   ============================================================ */
.app-radio {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.7rem 0.8rem;
    box-sizing: border-box;
    background: linear-gradient(160deg, var(--color-bg-card) 0%, var(--color-bg-secondary) 100%);
}

/* Empty State */
.radio-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-muted);
    gap: 0.5rem;
    padding: 0.8rem;
}
.radio-empty-icon {
    color: var(--color-primary);
    opacity: 0.4;
    margin-bottom: 0.3rem;
}
.radio-empty-text {
    font-size: 0.82rem;
    margin: 0;
    line-height: 1.45;
}

/* Title-Bar (optional) */
.radio-title-bar {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

/* Now-Playing-Bereich */
.radio-now-playing {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 0;
    margin-bottom: 0.5rem;
}
.radio-station-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.radio-metadata {
    font-size: 0.78rem;
    color: var(--color-text-soft);
    margin-top: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}
.radio-metadata.is-error {
    color: #c84545;
    font-style: italic;
}

/* Player-Steuerung */
.radio-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.radio-btn {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-soft);
    transition: all 0.15s;
    font-family: inherit;
    position: relative;
    z-index: 11;
}
.radio-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}
.radio-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.radio-play-pause {
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.radio-play-pause:hover {
    background: var(--color-primary);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

/* Loading-Spinner */
.radio-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: radio-spin 0.7s linear infinite;
}
@keyframes radio-spin {
    to { transform: rotate(360deg); }
}

/* Volume-Slider */
.radio-volume {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.3rem auto;
    max-width: 180px;
    width: 100%;
    padding: 0 0.5rem;
}
.radio-vol-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.radio-volume-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    background: var(--color-border);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 11;
}
.radio-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
}
.radio-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Stations-Pills (large mode) */
.radio-stations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    max-height: 60px;
    overflow-y: auto;
}
.radio-station-pill {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text-soft);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    position: relative;
    z-index: 11;
    white-space: nowrap;
}
.radio-station-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.radio-station-pill.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    font-weight: 600;
}
.radio-station-pill-add {
    background: transparent;
    border-style: dashed;
}

/* Manage-Button (default mode) */
.radio-manage-btn {
    background: transparent;
    border: 1px dashed var(--color-border);
    color: var(--color-text-muted);
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    margin: 0.3rem auto 0;
    align-self: center;
    position: relative;
    z-index: 11;
}
.radio-manage-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    border-style: solid;
}

/* === Mini-Modus (1x1) === */
.app-radio-mini {
    padding: 0.4rem;
}
.app-radio-mini .radio-station-name {
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
}
.app-radio-mini .radio-controls { gap: 0; margin: 0; }
.app-radio-mini .radio-play-pause {
    width: 38px;
    height: 38px;
}

/* === Compact-Modus (2x1) === */
.app-radio-compact {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0.7rem;
    gap: 0.6rem;
}
.app-radio-compact .radio-now-playing {
    flex: 1;
    text-align: left;
    margin: 0;
}
.app-radio-compact .radio-station-name {
    font-size: 0.88rem;
    font-weight: 600;
}
.app-radio-compact .radio-controls {
    margin: 0;
    flex-shrink: 0;
}
.app-radio-compact .radio-play-pause {
    width: 36px;
    height: 36px;
    box-shadow: none;
}
.app-radio-compact .radio-manage-btn,
.app-radio-compact .radio-title-bar {
    display: none;
}

/* ============================================================
   Radio-Manage-Modal
   ============================================================ */
.radio-modal-card {
    max-width: 540px;
}
.radio-modal-tabs {
    display: flex;
    gap: 0.3rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}
.radio-modal-tab {
    background: transparent;
    border: none;
    padding: 0.5rem 0.9rem;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: inherit;
    transition: all 0.15s;
}
.radio-modal-tab:hover {
    color: var(--color-text);
}
.radio-modal-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
.radio-modal-pane {
    display: none;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
}
.radio-modal-pane.is-active {
    display: block;
}
.radio-modal-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 2rem;
    font-size: 0.9rem;
}

/* Meine-Sender-Liste */
.radio-station-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.radio-station-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    border: 1px solid transparent;
}
.radio-station-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.radio-station-info strong {
    font-size: 0.9rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.radio-station-info small {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
.radio-station-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.radio-default-badge {
    color: #f59e0b;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    background: rgba(245, 158, 11, 0.12);
    border-radius: 999px;
}
.btn-link-mini {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-soft);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.btn-link-mini:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-link-mini:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.radio-remove-btn {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 0.4rem;
    line-height: 1;
    border-radius: 4px;
}
.radio-remove-btn:hover {
    color: #c84545;
    background: rgba(200, 69, 69, 0.08);
}

/* Preset-Liste */
.radio-preset-search {
    width: 100%;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    font-family: inherit;
    font-size: 0.88rem;
    margin-bottom: 0.6rem;
    box-sizing: border-box;
}
.radio-preset-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.radio-preset-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    transition: background 0.15s;
}
.radio-preset-item:hover {
    background: var(--color-bg-secondary);
}
.radio-preset-item.is-added {
    opacity: 0.5;
}
.radio-preset-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.radio-preset-info strong {
    font-size: 0.88rem;
    color: var(--color-text);
}
.radio-preset-info small {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}