/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* Dark mode (default) */
:root {
    --color-bg:           #09090b;
    --color-bg-gradient:  linear-gradient(135deg, #09090b 0%, #0c0c14 50%, #09090b 100%);
    --color-surface:      rgba(255, 255, 255, 0.03);
    --color-surface-2:    rgba(255, 255, 255, 0.06);
    --color-surface-3:    rgba(255, 255, 255, 0.09);
    --color-border:       rgba(255, 255, 255, 0.06);
    --color-border-hover: rgba(255, 255, 255, 0.12);
    --color-primary:      #3b82f6;
    --color-primary-hover:#2563eb;
    --color-primary-glow: rgba(59, 130, 246, 0.15);
    --color-text:         #fafafa;
    --color-text-muted:   rgba(255, 255, 255, 0.45);
    --color-error-bg:     rgba(239, 68, 68, 0.08);
    --color-error-text:   #f87171;
    --color-error-border: rgba(239, 68, 68, 0.15);
    --color-surface-hover: rgba(255, 255, 255, 0.06);
    --color-surface-alt:  rgba(255, 255, 255, 0.04);
    --color-primary-subtle: rgba(59, 130, 246, 0.10);
    --color-danger:       #ef4444;
    --color-success:      #22c55e;

    --radius:     10px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --shadow:     0 0 0 1px rgba(255,255,255,0.03), 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.4);
    --shadow-soft: 0 0 0 1px rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.3);
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15), 0 0 60px rgba(59, 130, 246, 0.05);

    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', sans-serif;
    --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
}

/* Light mode */
[data-theme="light"] {
    --color-bg:           #fafafa;
    --color-bg-gradient:  linear-gradient(135deg, #fafafa 0%, #f0f0f5 50%, #fafafa 100%);
    --color-surface:      rgba(255, 255, 255, 0.8);
    --color-surface-2:    rgba(0, 0, 0, 0.03);
    --color-surface-3:    rgba(0, 0, 0, 0.06);
    --color-border:       rgba(0, 0, 0, 0.06);
    --color-border-hover: rgba(0, 0, 0, 0.12);
    --color-primary:      #2563eb;
    --color-primary-hover:#1d4ed8;
    --color-primary-glow: rgba(37, 99, 235, 0.12);
    --color-text:         #18181b;
    --color-text-muted:   rgba(0, 0, 0, 0.45);
    --color-error-bg:     rgba(239, 68, 68, 0.06);
    --color-error-text:   #dc2626;
    --color-error-border: rgba(239, 68, 68, 0.12);
    --color-surface-hover: rgba(0, 0, 0, 0.04);
    --color-surface-alt:  rgba(0, 0, 0, 0.03);
    --color-primary-subtle: rgba(37, 99, 235, 0.06);
    --color-danger:       #dc2626;
    --color-success:      #16a34a;

    --shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
    --shadow-soft: 0 0 0 1px rgba(0,0,0,0.03), 0 2px 8px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.08), 0 0 60px rgba(37, 99, 235, 0.03);
}

html, body {
    height: 100%;
    font-family: var(--font-text);
    font-size: 14px;
    background: var(--color-bg);
    background-image: var(--color-bg-gradient);
    background-attachment: fixed;
    color: var(--color-text);
    line-height: 1.5;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   Layout helpers
   ============================================================ */
.body--centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.app-body {
    display:    flex;
    min-height: calc(100vh - 48px);
}

/* ── Sidebar wrapper: holds trigger strip + sidebar panel ── */
.sidebar-wrapper {
    position: fixed;
    top:      48px;
    left:     0;
    height:   calc(100vh - 48px);
    z-index:  200;
}

/* Trigger strip — invisible but wide enough to catch hover */
.sidebar-trigger {
    position: absolute;
    top:      0;
    left:     0;
    width:    18px;
    height:   100%;
    z-index:  1;
}

/* Visible tab that peeks out from the left edge */
.sidebar-tab {
    position:        absolute;
    top:             50%;
    left:            0;
    transform:       translateY(-50%);
    width:           14px;
    height:          40px;
    background:      var(--color-surface);
    border:          none;
    border-radius:   0 8px 8px 0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-text-muted);
    box-shadow:      none;
    transition:      opacity .2s, transform .25s ease;
    opacity:         0.4;
}

.sidebar-tab:hover {
    opacity: 0.8;
}

/* Tab fades out as sidebar opens */
.sidebar-wrapper:hover .sidebar-tab {
    opacity:   0;
    transform: translateY(-50%) translateX(-6px);
}

.sidebar {
    position:   absolute;
    top:        0;
    left:       0;
    width:      240px;
    height:     100%;
    overflow-y: auto;
    padding:    1rem .625rem;
    background: var(--color-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--color-border);
    box-shadow: none;
    transform:  translateX(-100%);
    transition: transform .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Slide in when hovering the trigger strip or the sidebar itself */
.sidebar-wrapper:hover .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.15);
}

/* ── Sidebar pinned state ── */

/* Anti-Flash: gesetzt durch inline-Script im <head>, bevor JS die Klasse
   direkt auf .sidebar-wrapper setzt — verhindert Layout-Flackern beim Laden */
.sidebar-will-pin .sidebar-wrapper {
    position:    relative;
    top:         auto;
    left:        auto;
    width:       240px;
    height:      calc(100vh - 48px);
    flex-shrink: 0;
    z-index:     auto;
}

.sidebar-will-pin .sidebar-wrapper .sidebar {
    transform:  translateX(0);
    box-shadow: none;
    position:   relative;
    height:     100%;
}

.sidebar-will-pin .sidebar-wrapper .sidebar-trigger {
    display: none;
}

/* Finale gepinnte Klasse (via JS) */
.sidebar-wrapper.sidebar--pinned {
    position:    relative;
    top:         auto;
    left:        auto;
    width:       240px;
    height:      calc(100vh - 48px);
    flex-shrink: 0;
    z-index:     auto;
}

.sidebar-wrapper.sidebar--pinned .sidebar {
    transform:  translateX(0);
    box-shadow: none;
    position:   relative;
    height:     100%;
}

.sidebar-wrapper.sidebar--pinned .sidebar-trigger {
    display: none;
}

/* Pin-Button */
.sidebar__pin-btn {
    position:        absolute;
    top:             .6rem;
    right:           .5rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           26px;
    height:          26px;
    padding:         0;
    background:      transparent;
    border:          1px solid transparent;
    border-radius:   5px;
    color:           var(--color-text-muted);
    cursor:          pointer;
    opacity:         0;
    transition:      opacity .15s, color .15s, background .15s, transform .22s ease;
    /* Rotation im ungepinnten Zustand: Icon leicht geneigt */
    transform:       rotate(45deg);
}

/* Button einblenden, wenn Sidebar offen ist (hover) oder gepinnt */
.sidebar-wrapper:hover .sidebar__pin-btn,
.sidebar-wrapper.sidebar--pinned .sidebar__pin-btn {
    opacity: 1;
}

.sidebar__pin-btn:hover {
    background: var(--color-surface-hover, rgba(0,0,0,.05));
    color:      var(--color-text);
    border-color: var(--color-border);
}

/* Aktiver Zustand: Icon aufrecht = "eingepinnt" */
.sidebar__pin-btn--active {
    transform: rotate(0deg);
    color:     var(--color-primary);
    opacity:   1;
}

.sidebar__pin-btn--active:hover {
    background: var(--color-primary-subtle, rgba(0,113,227,.15));
    border-color: var(--color-primary);
}

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

.sidebar__item {
    display:         flex;
    align-items:     center;
    gap:             .5rem;
    padding:         .45rem .65rem;
    border-radius:   8px;
    font-size:       .8125rem;
    font-weight:     400;
    color:           var(--color-text-muted);
    text-decoration: none;
    transition:      background .15s, color .15s;
    overflow:        hidden;
    letter-spacing:  -0.12px;
}

/* Grid icon never shrinks */
.sidebar__item > svg {
    flex-shrink: 0;
}

/* Title text truncates */
.sidebar__item span {
    flex:          1;
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.sidebar__item:hover {
    background: var(--color-surface-hover, rgba(0,0,0,.05));
    color:      var(--color-text);
}

.sidebar__item--active {
    background: var(--color-primary-subtle);
    color:      var(--color-primary);
    font-weight: 600;
}

/* "Neues Dashboard" button at the bottom of the sidebar */
.sidebar__add-btn {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    width:       100%;
    margin-top:  .25rem;
    padding:     .45rem .65rem;
    background:  none;
    border:      none;
    border-top:  1px solid var(--color-border);
    cursor:      pointer;
    color:       var(--color-text-muted);
    font-size:   .8125rem;
    font-weight: 400;
    text-align:  left;
    border-radius: 0;
    transition:  background .12s, color .12s;
    letter-spacing: -0.12px;
}

.sidebar__add-btn:hover {
    background: var(--color-surface-hover, rgba(0,0,0,.05));
    color:      var(--color-text);
}

.main {
    flex:      1 1 0;
    min-width: 0;
    padding:   1.5rem 2rem;
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 48px;
    background: var(--color-surface);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar__brand {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
    font-family: var(--font-display);
}

.navbar__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.navbar__user {
    font-size: .75rem;
    color: var(--color-text-muted);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 7px 14px;
    border-radius: var(--radius);
    font-size: .8125rem;
    font-weight: 500;
    font-family: var(--font-text);
    letter-spacing: -0.011em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s ease;
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.97);
}

.btn--primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, #4f8ff7 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), var(--shadow-glow);
}
.btn--primary:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 24px rgba(59,130,246,0.2), 0 0 60px rgba(59,130,246,0.08);
}

.btn--ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.btn--ghost:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

.btn--sm   { padding: 5px 10px; font-size: .75rem; }
.btn--full  { width: 100%; }
.btn--icon  { padding: 6px; }
.btn--danger {
    background: var(--color-error-bg);
    color:      var(--color-error-text);
}
.btn--danger:hover { background: rgba(239, 68, 68, 0.15); }

/* Navbar ghost buttons */
.navbar .btn--ghost {
    border-color: transparent;
    color: var(--color-text-muted);
}
.navbar .btn--ghost:hover {
    background: var(--color-surface-hover);
    border-color: transparent;
    color: var(--color-text);
}

/* Theme toggle: show sun in dark mode, moon in light mode */
.icon--sun  { display: none; }
.icon--moon { display: block; }

[data-theme="light"] .icon--sun  { display: block; }
[data-theme="light"] .icon--moon { display: none; }

body.edit-mode #edit-toggle { color: var(--color-primary); }

/* ============================================================
   Login Card
   ============================================================ */
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-soft);
}

.login-card__logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.75rem;
}

.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius);
}

.logo-text {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-family: var(--font-display);
}

.login-card__title {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.14;
    font-family: var(--font-display);
    margin-bottom: .35rem;
}

.login-card__subtitle {
    color: var(--color-text-muted);
    font-size: .9rem;
    margin-bottom: 1.75rem;
}

.login-card__hint {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .82rem;
    color: var(--color-text-muted);
    opacity: .7;
}

/* ============================================================
   Form
   ============================================================ */
.form { display: flex; flex-direction: column; gap: .75rem; }

.form__group { display: flex; flex-direction: column; gap: .25rem; }

.form__label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.form__input {
    padding: .5rem .75rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: .8125rem;
    font-family: var(--font-text);
    letter-spacing: -0.011em;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

.form__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* ============================================================
   Alert
   ============================================================ */
.alert {
    padding: .7rem 1rem;
    border-radius: var(--radius);
    font-size: .88rem;
    margin-bottom: .5rem;
}

.alert--error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}

.alert--success {
    background: rgba(52, 199, 89, .08);
    color:      #34c759;
    border:     1px solid rgba(52, 199, 89, .2);
}

/* ============================================================
   Page header
   ============================================================ */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    gap: 1rem;
}

.page-header__title {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.14;
    font-family: var(--font-display);
}

.page-header__subtitle {
    color: var(--color-text-muted);
    font-size: .9rem;
    margin-top: .2rem;
}

/* ============================================================
   GridStack overrides
   ============================================================ */
.grid-stack {
    background: transparent;
}

/* E resize handle only: same SVG as GridStack's diagonal handles, rotated 90° */
.grid-stack-item > .ui-resizable-e {
    background-image:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     20px 20px;
    top:                 50% !important;
    bottom:              auto !important;
    height:              24px !important;
    width:               16px !important;
    transform:           translateY(-50%) rotate(90deg);
}

/* Visual overrides – higher specificity (0,1,2) to beat GridStack's own rule.
   Do NOT override position – GridStack sets position:absolute to fill the item. */
.grid-stack > .grid-stack-item > .grid-stack-item-content {
    background:      var(--color-surface);
    backdrop-filter:  blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-lg);
    overflow:        hidden;
    box-sizing:      border-box;
    container-type:  size;
    container-name:  tile;
    box-shadow:      var(--shadow-soft);
    transition:      border-color .2s ease, box-shadow .2s ease;
}

.widget {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    height: 100%;
    overflow: hidden;
}

.widget__title {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: -0.011em;
    line-height: 1.4;
    margin-bottom: .375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget__body {
    font-size: .875rem;
    color: var(--color-text-muted);
    overflow: hidden;
    flex: 1;
    letter-spacing: -0.224px;
}

/* Text widget – markdown body */
.widget__body--editable {
    cursor:        text;
    outline:       none;
    border-radius: calc(var(--radius) - 2px);
    overflow-y:    auto;
    word-break:    break-word;
    min-height:    2rem;
    position:      relative;
}

.widget__body--editable:empty::before {
    content:        'Klicken zum Bearbeiten …';
    color:          var(--color-text-muted);
    opacity:        .45;
    pointer-events: none;
    font-size:      .82rem;
}

/* Inline formatting — text widget display + editor */
.widget__body--editable b,
.widget__body--editable strong,
.rt-content b,
.rt-content strong { font-weight: 700; }

.widget__body--editable i,
.widget__body--editable em,
.rt-content i,
.rt-content em { font-style: italic; }

.widget__body--editable u,
.rt-content u { text-decoration: underline; }

.widget__body--editable s,
.widget__body--editable strike,
.rt-content s,
.rt-content strike { text-decoration: line-through; }

.widget__body--editable h1,
.rt-content h1 { font-size: 1.15rem; font-weight: 700; margin: .4em 0 .2em; }

.widget__body--editable h2,
.rt-content h2 { font-size: 1rem; font-weight: 700; margin: .4em 0 .2em; }

.widget__body--editable ul,
.widget__body--editable ol { margin: .3em 0; padding-left: 1.25em; }

.widget__body--editable ul li { list-style: disc; }
.widget__body--editable ol li { list-style: decimal; }

/* Markdown rendered output */
.md-rendered h1,
.md-rendered h2,
.md-rendered h3,
.md-rendered h4 {
    font-weight:   700;
    line-height:   1.25;
    margin:        .5em 0 .25em;
    color:         var(--color-text);
}
.md-rendered h1 { font-size: 1.15rem; }
.md-rendered h2 { font-size: 1rem; }
.md-rendered h3,
.md-rendered h4 { font-size: .875rem; }

.md-rendered p  { margin: .3em 0; line-height: 1.55; }

.md-rendered ul,
.md-rendered ol {
    margin:       .3em 0;
    padding-left: 1.25em;
}
.md-rendered ul li { list-style: disc; }
.md-rendered ol li { list-style: decimal; }

.md-rendered strong,
.md-rendered b { font-weight: 700; }

.md-rendered em,
.md-rendered i { font-style: italic; }

.md-rendered del,
.md-rendered s { text-decoration: line-through; }

.md-rendered a {
    color:           var(--color-primary);
    text-decoration: underline;
}

.md-rendered code {
    font-family:   var(--font-mono, 'Fira Code', monospace);
    font-size:     .8em;
    background:    var(--color-surface-alt, rgba(0,0,0,.07));
    border-radius: 3px;
    padding:       .1em .3em;
}

.md-rendered pre {
    background:    var(--color-surface-alt, rgba(0,0,0,.07));
    border-radius: 4px;
    padding:       .5rem .75rem;
    overflow-x:    auto;
    font-size:     .8em;
    margin:        .4em 0;
}
.md-rendered pre code {
    background: none;
    padding:    0;
}

.md-rendered blockquote {
    border-left: 3px solid var(--color-primary);
    margin:      .4em 0;
    padding:     .1em .75em;
    color:       var(--color-text-muted);
}

.md-rendered hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: .5em 0;
}

/* Rich text editor container */
.rt-editor {
    display:        flex;
    flex-direction: column;
    height:         100%;
    min-height:     10rem;
    border:         2px solid var(--color-primary);
    border-radius:  calc(var(--radius) - 2px);
    overflow:       hidden;
}

.rt-content {
    flex:        1;
    overflow-y:  auto;
    padding:     6px 8px;
    outline:     none;
    font-size:   .85rem;
    line-height: 1.55;
    color:       var(--color-text);
    word-break:  break-word;
    min-height:  3rem;
}

.rt-content:empty::before {
    content:        'Text eingeben …';
    color:          var(--color-text-muted);
    opacity:        .45;
    pointer-events: none;
}

.rt-content h1, .rt-content h2, .rt-content h3, .rt-content h4 {
    font-weight: 700;
    line-height: 1.25;
    margin:      .5em 0 .25em;
}
.rt-content h1 { font-size: 1.15rem; }
.rt-content h2 { font-size: 1rem; }
.rt-content h3,
.rt-content h4 { font-size: .875rem; }
.rt-content p   { margin: .3em 0; }
.rt-content ul,
.rt-content ol  { margin: .3em 0; padding-left: 1.25em; }
.rt-content ul li { list-style: disc; }
.rt-content ol li { list-style: decimal; }

.md-toolbar {
    display:     flex;
    align-items: center;
    gap:         2px;
    padding:     3px 6px;
    background:  var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    flex-wrap:   nowrap;
    overflow-x:  auto;
    scrollbar-width: none;
}
.md-toolbar::-webkit-scrollbar { display: none; }

.md-toolbar__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       42px;
    height:          38px;
    padding:         0 10px;
    border:          none;
    border-radius:   4px;
    background:      transparent;
    color:           var(--color-text-muted);
    font-size:       1rem;
    font-weight:     700;
    font-family:     var(--font-mono, monospace);
    cursor:          pointer;
    transition:      background .1s, color .1s;
}
.md-toolbar__btn:hover {
    background: var(--color-border);
    color:      var(--color-text);
}

.md-toolbar__sep {
    width:      1px;
    height:     14px;
    background: var(--color-border);
    margin:     0 3px;
    flex-shrink: 0;
}


/* Link widget – entire card is clickable */
.widget--link {
    text-decoration: none;
    color:           var(--color-text);
    align-items:     center;
    justify-content: center;
    text-align:      center;
}

/* Card-level hover for both normal and compact link widgets */
.grid-stack > .grid-stack-item > .grid-stack-item-content:has(.widget--link:hover),
.grid-stack > .grid-stack-item > .grid-stack-item-content:has(.widget--link-overlay:hover) {
    border-color: var(--color-border-hover);
    box-shadow:   var(--shadow-soft), var(--shadow-glow);
    transition:   border-color .15s, box-shadow .15s;
}

/* Compact link overlay – covers the full card, sits below the edit button */
.widget--link-overlay {
    position:      absolute;
    inset:         0;
    border-radius: calc(var(--radius) - 1px);
    z-index:       1;
}

.widget--link .widget__title {
    margin-bottom:  0;
    font-size:      1.1rem;
    font-weight:    600;
    color:          var(--color-text);
    letter-spacing: -0.02em;
    font-family:    var(--font-display);
}

/* Compact: icon left, title right — height: auto lets GridStack measure content height */
.widget--compact {
    position:        relative;
    height:          auto;
    flex-direction:  row;
    justify-content: flex-start;
    align-items:     center;
    text-align:      left;
    padding:         .75rem 1rem;
    gap:             .75rem;
}


.widget--compact .widget__icon {
    width:         32px;
    height:        32px;
    margin-bottom: 0;
    flex-shrink:   0;
}

.widget--compact .widget__title {
    font-size:      1.1rem;
    font-weight:    700;
    letter-spacing: -.02em;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.widget__icon {
    display:          block;
    width:            clamp(24px, 15cqw, 56px);
    height:           clamp(24px, 15cqw, 56px);
    margin-bottom:    .75rem;
    object-fit:       contain;
    border-radius:    12px;
    image-rendering:  -webkit-optimize-contrast;
    flex-shrink:      0;
}

/* ── Normales Layout (groß): Icon oben, Text unten, zentriert ──
   Explizit definiert damit Container Queries sauber zurückfallen können. */
.widget--link {
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    gap:             0;
}

.widget--link .widget__icon {
    margin-bottom: .75rem;
    width:         clamp(24px, 15cqw, 64px);
    height:        clamp(24px, 15cqw, 64px);
}

/* Container Query: automatisch Zeilenlayout wenn Tile-Höhe <= 90px.
   widget--row (PHP-Klasse) wird nicht mehr verwendet — nur noch Container Queries
   reagieren dynamisch auf Größenänderungen ohne Reload. */
@container tile (max-height: 90px) {
    .widget--link {
        flex-direction:  row;
        justify-content: flex-start;
        text-align:      left;
        align-items:     center;
        gap:             .75rem;
    }

    .widget--link .widget__icon {
        margin-bottom: 0;
        width:         clamp(20px, 10cqh, 40px);
        height:        clamp(20px, 10cqh, 40px);
    }

    .widget--link .widget__title {
        font-size: clamp(.85rem, 3cqh, 1.2rem);
    }
}

/* Container Query: kleinere Icons bei schmalen/kleinen Tiles */
@container tile (max-width: 120px) {
    .widget__icon {
        width:         clamp(20px, 12cqw, 40px);
        height:        clamp(20px, 12cqw, 40px);
    }
}

/* Iframe widget */
.widget--iframe iframe {
    width: 100%;
    flex: 1;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    margin-top: .5rem;
}

/* Empty state */
.empty-state {
    color: var(--color-text-muted);
    text-align: center;
    padding: 6rem 0;
    font-size: .9375rem;
    letter-spacing: -0.224px;
}

/* ============================================================
   Toast notifications
   ============================================================ */
.toast-container {
    position:       fixed;
    bottom:         1.5rem;
    right:          1.5rem;
    z-index:        1100;
    display:        flex;
    flex-direction: column;
    gap:            .5rem;
    pointer-events: none;
    max-width:      min(400px, calc(100vw - 3rem));
}

.toast {
    display:        flex;
    align-items:    flex-start;
    gap:            .5rem;
    padding:        .625rem .875rem;
    background:     var(--color-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius);
    font-size:      .8125rem;
    line-height:    1.5;
    color:          var(--color-text);
    box-shadow:     var(--shadow);
    opacity:        0;
    transform:      translateY(.4rem);
    transition:     opacity .25s ease, transform .25s ease;
    pointer-events: auto;
    word-break:     break-word;
}

.toast--visible {
    opacity:   1;
    transform: translateY(0);
}

.toast--hiding {
    opacity:   0;
    transform: translateY(.4rem);
}

.toast--success { border-left-color: #22c55e; }
.toast--error   { border-left-color: var(--color-error-text); }
.toast--info    { border-left-color: var(--color-primary); }

.toast__close {
    flex-shrink:     0;
    margin-left:     auto;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           20px;
    height:          20px;
    padding:         0;
    background:      transparent;
    border:          none;
    border-radius:   var(--radius);
    color:           var(--color-text-muted);
    cursor:          pointer;
    transition:      color .15s;
}

.toast__close:hover { color: var(--color-text); }

.toast__link {
    color:           var(--color-primary);
    text-decoration: underline;
    font-weight:     500;
}

.toast__link:hover { color: var(--color-primary-hover); }

/* form hint below file input */
.form__hint {
    font-size:    .8rem;
    color:        var(--color-text-muted);
    margin-top:   .3rem;
    line-height:  1.4;
}

/* ============================================================
   Widget action buttons (edit + delete)
   ============================================================ */
.widget-actions {
    position:       absolute;
    top:            6px;
    right:          6px;
    z-index:        10;
    display:        flex;
    gap:            4px;
    opacity:        0;
    pointer-events: none;
    transition:     opacity .15s;
}

body.edit-mode .grid-stack > .grid-stack-item > .grid-stack-item-content:hover .widget-actions {
    opacity:        1;
    pointer-events: auto;
}

.widget-edit-btn,
.widget-delete-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    padding:         0;
    background:      rgba(0, 0, 0, 0.5);
    backdrop-filter:  blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border:          none;
    border-radius:   8px;
    color:           rgba(255, 255, 255, 0.8);
    cursor:          pointer;
    transition:      background .15s, color .15s;
}

.widget-edit-btn:hover {
    background:   rgba(0, 0, 0, 0.7);
    color:        #fff;
}

.widget-delete-btn:hover {
    background:   rgba(255, 59, 48, 0.8);
    color:        #fff;
}

/* In view mode, links are fully clickable; in edit mode, block them so drag works */
body.edit-mode .widget--link,
body.edit-mode .widget--link-overlay {
    pointer-events: none;
}

/* Link-Tile Tooltip: zeigt Rechtsklick-Hinweis beim Hover (nur im View-Modus).
   overflow:visible nötig damit der Tooltip nicht durch overflow:hidden abgeschnitten wird.
   :not(.edit-mode) = body-Klasse fehlt → View-Modus aktiv */
body:not(.edit-mode) .grid-stack > .grid-stack-item > .grid-stack-item-content:has(.widget--link),
body:not(.edit-mode) .grid-stack > .grid-stack-item > .grid-stack-item-content:has(.widget--link-overlay) {
    overflow: visible;
}

body:not(.edit-mode) .grid-stack > .grid-stack-item > .grid-stack-item-content:has(.widget--link)::after,
body:not(.edit-mode) .grid-stack > .grid-stack-item > .grid-stack-item-content:has(.widget--link-overlay)::after {
    content:          'Rechtsklick = neuer Tab';
    position:         absolute;
    bottom:           calc(100% + 6px);
    left:             50%;
    transform:        translateX(-50%);
    white-space:      nowrap;
    background:       var(--color-surface-2);
    color:            var(--color-text-muted);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius);
    font-size:        .7rem;
    padding:          .2rem .55rem;
    pointer-events:   none;
    opacity:          0;
    transition:       opacity .15s;
    z-index:          10;
}

body:not(.edit-mode) .grid-stack > .grid-stack-item > .grid-stack-item-content:has(.widget--link:hover)::after,
body:not(.edit-mode) .grid-stack > .grid-stack-item > .grid-stack-item-content:has(.widget--link-overlay:hover)::after {
    opacity: 1;
}

/* ── Add-widget dropdown ───────────────────────────────────── */
.add-widget-dropdown {
    position: relative;
}

.add-widget-dropdown__menu {
    position:      absolute;
    top:           calc(100% + 6px);
    right:         0;
    min-width:     160px;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow:    0 8px 24px rgba(0,0,0,.12);
    list-style:    none;
    padding:       .35rem;
    z-index:       300;
}

.add-widget-dropdown__menu li button {
    display:       flex;
    align-items:   center;
    gap:           .6rem;
    width:         100%;
    padding:       .45rem .65rem;
    background:    none;
    border:        none;
    border-radius: 4px;
    font-size:     .875rem;
    color:         var(--color-text);
    cursor:        pointer;
    text-align:    left;
    transition:    background .12s;
}

.add-widget-dropdown__menu li button:hover {
    background: var(--color-surface-hover, rgba(0,0,0,.05));
}

/* ── Dashboard actions panel (3-dot menu) ─────────────────── */
.dashboard-actions-panel {
    position:      absolute;
    top:           calc(100% + 6px);
    right:         0;
    min-width:     170px;
    background:    var(--color-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    padding:       .25rem;
    z-index:       300;
}

.dashboard-actions-panel__item {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    width:         100%;
    padding:       .4rem .6rem;
    background:    none;
    border:        none;
    border-radius: 6px;
    font-size:     .8125rem;
    color:         var(--color-text);
    cursor:        pointer;
    text-align:    left;
    text-decoration: none;
    transition:    background .12s;
}

.dashboard-actions-panel__item:hover {
    background: var(--color-surface-hover);
}

/* Active edit state shown on the panel item */
body.edit-mode #edit-toggle.dashboard-actions-panel__item {
    color: var(--color-primary);
}

.dashboard-actions-panel__sep {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: .2rem 0;
}

.dashboard-actions-panel__item--danger {
    color: var(--color-danger);
}
.dashboard-actions-panel__item--danger:hover {
    background: var(--color-error-bg);
}

/* "Fertig"-Button im Edit-Mode */
.edit-mode-done {
    animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   Modal
   ============================================================ */
.modal {
    border:        1px solid var(--color-border);
    padding:       0;
    border-radius: var(--radius-lg);
    background:    #18181b;
    color:         var(--color-text);
    box-shadow:    0 16px 48px rgba(0, 0, 0, 0.5);
    width:         100%;
    max-width:     440px;
    position:      fixed;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    margin:        0;
}

[data-theme="light"] .modal {
    background: #fff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal__inner {
    padding: 1.25rem;
}

.modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   .875rem;
}

.modal__title {
    font-size:      1.1rem;
    font-weight:    600;
    letter-spacing: -0.02em;
    font-family:    var(--font-display);
}

.modal__body {
    padding: 1rem 0;
}

.modal__subtitle {
    margin: 0 0 1rem;
    font-size: .875rem;
    color: var(--color-text-muted);
}

.modal__confirm-text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.5;
}

.modal__footer {
    display:         flex;
    justify-content: flex-end;
    gap:             .5rem;
    margin-top:      1rem;
}

/* ============================================================
   Icon preview (modal)
   ============================================================ */
.icon-preview-row {
    display:     flex;
    align-items: center;
    gap:         .75rem;
}

.icon-preview-row .form__input {
    flex: 1;
}

.icon-preview {
    flex-shrink:     0;
    width:           44px;
    height:          44px;
    border:          1px solid var(--color-border);
    border-radius:   var(--radius);
    background:      var(--color-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
}

.icon-preview img {
    width:      36px;
    height:     36px;
    object-fit: contain;
}

.icon-preview__placeholder {
    font-size:  1rem;
    color:      var(--color-text-muted);
}

/* ============================================================
   Logo upload (modal)
   ============================================================ */
.logo-upload-row {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    flex-wrap:   wrap;
}

/* Thumbnail preview of the currently saved / selected logo */
.logo-upload-preview {
    position:      relative;
    width:         56px;
    height:        56px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:    var(--color-bg);
    overflow:      visible;
    flex-shrink:   0;
}

.logo-upload-preview img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    border-radius: calc(var(--radius) - 1px);
    display:    block;
}

/* Remove button — sits in the top-right corner of the preview */
.logo-upload-preview__remove {
    position:        absolute;
    top:             -7px;
    right:           -7px;
    width:           18px;
    height:          18px;
    padding:         0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--color-surface-2);
    border:          1px solid var(--color-border);
    border-radius:   50%;
    color:           var(--color-text-muted);
    cursor:          pointer;
    transition:      background .12s, color .12s;
    z-index:         1;
}

.logo-upload-preview__remove:hover {
    background: var(--color-error-bg);
    color:      var(--color-error-text);
    border-color: var(--color-error-border);
}

/* Upload button — styled like btn--ghost but with file-input hidden inside */
.logo-upload-btn {
    display:      inline-flex;
    align-items:  center;
    gap:          .45rem;
    padding:      .4rem .85rem;
    border:       1px solid var(--color-border);
    border-radius: var(--radius);
    background:   transparent;
    color:        var(--color-text-muted);
    font-size:    .82rem;
    font-weight:  500;
    cursor:       pointer;
    transition:   border-color .15s, color .15s;
    white-space:  nowrap;
}

.logo-upload-btn:hover {
    border-color: var(--color-text-muted);
    color:        var(--color-text);
}

/* The real <input type="file"> is visually hidden but remains accessible */
.logo-upload-input {
    position: absolute;
    width:    1px;
    height:   1px;
    opacity:  0;
    overflow: hidden;
    clip:     rect(0, 0, 0, 0);
}

/* ============================================================
   Widget logo (non-link widgets)
   ============================================================ */
.widget__logo {
    display:       block;
    width:         40px;
    height:        40px;
    object-fit:    contain;
    border-radius: 6px;
    margin-bottom: .5rem;
    flex-shrink:   0;
    image-rendering: -webkit-optimize-contrast;
}

/* Checkbox row in form */
.form__group--check { justify-content: center; }

.form__check {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    font-size:   .88rem;
    color:       var(--color-text-muted);
    cursor:      pointer;
    user-select: none;
}

.form__check input[type="checkbox"] {
    width:  16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Make select and textarea look like text inputs */
select.form__input {
    appearance: none;
    cursor:     pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8fa8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right .75rem center;
    padding-right: 2.25rem;
}

textarea.form__input {
    resize:     vertical;
    min-height: 80px;
}

/* ============================================================
   RSS Widget
   ============================================================ */
.widget--rss {
    display:        flex;
    flex-direction: column;
    gap:            .5rem;
    padding:        1rem;
    height:         100%;
    overflow:       hidden;
}

.widget--rss .widget__title {
    font-size:      .8rem;
    font-weight:    600;
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink:    0;
}

.rss-list {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            .6rem;
    overflow-y:     auto;
    flex:           1 1 0;
    min-height:     0;
    padding:        2px 2px 0;
    margin:         0 -2px;
}

.rss-loading,
.rss-empty {
    font-size: .85rem;
    color:     var(--color-text-muted);
}

.rss-item {
    display:        flex;
    flex-direction: column;
    gap:            .3rem;
    padding:        .55rem .6rem;
    border-radius:  6px;
    transition:     background .15s;
}

.rss-item:hover {
    background: var(--color-surface-hover, rgba(0,0,0,.04));
}

/* Link: full block — clicking anywhere on the item opens it */
.rss-item__title {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             .4rem;
    font-size:       .875rem;
    font-weight:     600;
    color:           var(--color-text);
    text-decoration: none;
    line-height:     1.4;
}

/* Arrow icon that appears on hover */
.rss-item__title::after {
    content:     '';
    display:     block;
    flex-shrink: 0;
    width:       14px;
    height:      14px;
    margin-top:  2px;
    opacity:     0;
    transition:  opacity .15s;
    background:  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234f8ef7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>') center/contain no-repeat;
}

.rss-item:hover .rss-item__title {
    color: var(--color-primary);
}

.rss-item:hover .rss-item__title::after {
    opacity: 1;
}

.rss-item__meta {
    display:     flex;
    align-items: center;
    gap:         .4rem;
}

.rss-item__date {
    font-size:     .7rem;
    font-weight:   500;
    color:         var(--color-text-muted);
    background:    var(--color-border);
    padding:       .1rem .4rem;
    border-radius: 99px;
    white-space:   nowrap;
}

.rss-item__summary {
    font-size:   .78rem;
    color:       var(--color-text-muted);
    line-height: 1.5;
}

/* ── RSS: Bild + Text nebeneinander ──────────────────────── */
.rss-item__layout {
    display:     flex;
    align-items: flex-start;
    gap:         .5rem;
}

.rss-item__thumb {
    flex-shrink: 0;
    width:       48px;
    height:      48px;
    border-radius: 4px;
    object-fit:  cover;
    background:  var(--color-surface-2);
}

/* Text-Spalte nimmt den restlichen Platz */
.rss-item__text {
    flex:        1 1 0;
    min-width:   0;
    display:     flex;
    flex-direction: column;
    gap:         .3rem;
}

/* Wenn das Bild nicht geladen werden konnte, volle Breite */
.rss-item__layout--no-img {
    display: block;
}

/* ── RSS: Gelesen-Status ─────────────────────────────────── */
.rss-item--read {
    opacity: .5;
}

.rss-item--read .rss-item__title {
    text-decoration: line-through;
    color:           var(--color-text-muted);
}

.rss-item--read:hover .rss-item__title {
    color: var(--color-text-muted);
}

/* ============================================================
   TODO Widget
   ============================================================ */
.widget--todo {
    display:        flex;
    flex-direction: column;
    gap:            .25rem;
    padding:        1rem;
    height:         100%;
    overflow:       hidden;
}

.widget--todo .widget__title {
    font-size:   .8rem;
    font-weight: 600;
    color:       var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
}

.todo-list {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        .25rem;
    overflow-y: auto;
    flex:       1 1 0;
    min-height: 0;
    padding:    2px 2px 0;
    margin:     0 -2px;
}

.todo-item {
    list-style:  none;
    display:     flex;
    align-items: flex-start;
    gap:         .4rem;
    transition:  opacity .15s ease;
}

/* Kurzes Ausblenden beim Sortieren */
.todo-item--sorting {
    opacity: 0;
}

.todo-label {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    cursor:      pointer;
}

.todo-check {
    margin-top:   3px;
    flex-shrink:  0;
    width:        15px;
    height:       15px;
    accent-color: var(--color-primary);
    cursor:       pointer;
}

.todo-body {
    display:     flex;
    align-items: flex-start;
    flex:        1 1 0;
    min-width:   0;
    gap:         .25rem;
}

.todo-text {
    flex:        0 1 auto;
    min-width:   8rem;
    font-size:   .88rem;
    line-height: 1.5;
    word-break:  break-word;
    outline:     none;
    border-radius: 3px;
}

.todo-text:focus {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.todo-item--done .todo-text {
    text-decoration: line-through;
    color:           var(--color-text-muted);
}

.todo-delete {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    margin-top:      2px;
    padding:         2px;
    border:          none;
    background:      none;
    color:           var(--color-text-muted);
    cursor:          pointer;
    border-radius:   3px;
    opacity:         0;
    transition:      opacity .15s;
}

.todo-item:hover .todo-delete { opacity: 1; }

.todo-delete:hover {
    color:      var(--color-error-text);
    background: var(--color-error-bg);
}

.todo-footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-shrink:     0;
    padding-top:     .625rem;
    margin-top:      .25rem;
    border-top:      1px solid var(--color-border);
}

/* ============================================================
   Admin page
   ============================================================ */
.admin-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.admin-page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.admin-page__title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.admin-page__subtitle {
    margin-top: .2rem;
    font-size: .85rem;
    color: var(--color-text-muted);
}

/* Card */
.admin-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.admin-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.admin-card__title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.admin-table th {
    text-align: left;
    padding: .75rem 1.5rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
}

.admin-table td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}

.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-table tbody tr:hover td { background: var(--color-surface-2); }

.admin-table__muted { color: var(--color-text-muted); font-size: .85rem; }

.admin-table__action { width: 1%; white-space: nowrap; }

.admin-table__action-wrap {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

.admin-table__self {
    font-size: .8rem;
    color: var(--color-text-muted);
    padding: .25rem .6rem;
    background: var(--color-surface-2);
    border-radius: 99px;
}

/* User cell with avatar */
.admin-user-cell {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.admin-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Role badge */
.admin-badge {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
}

.admin-badge--admin {
    background: rgba(0,113,227,.15);
    color: var(--color-primary);
}

.admin-badge--user {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}

/* Create form */
.admin-create-form {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin-create-form__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.admin-create-form__fields .form__group:last-child {
    grid-column: 1 / -1;
    max-width: 320px;
}

.admin-create-form__footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: .25rem;
}

.admin-checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}

.admin-checkbox input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form__label-hint {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: .8em;
    margin-left: .3rem;
}

/* ============================================================
   Searchbar widget
   ============================================================ */
.widget--searchbar .widget__body {
    display:     flex;
    align-items: center;
    padding:     .5rem .75rem .75rem;
    flex:        1;
}

.searchbar-form {
    display:     flex;
    align-items: center;
    width:       100%;
    gap:         .6rem;
}

.searchbar-form__field {
    flex:            1;
    display:         flex;
    align-items:     center;
    gap:             .5rem;
    border:          1.5px solid var(--color-border);
    border-radius:   var(--radius);
    padding:         .45rem .75rem;
    background:      var(--color-bg);
    transition:      border-color .15s, box-shadow .15s;
    min-width:       0;
}

.searchbar-form__field:focus-within {
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px var(--color-primary-glow);
}

.searchbar-form__engine-icon {
    flex-shrink: 0;
    width:       15px;
    height:      15px;
    object-fit:  contain;
}

.searchbar-form__input {
    flex:        1;
    border:      none;
    outline:     none;
    background:  transparent;
    font-size:   .88rem;
    color:       var(--color-text);
    min-width:   0;
}

.searchbar-form__input::placeholder {
    color: var(--color-text-muted);
}

/* reset browser search-input styles */
.searchbar-form__input::-webkit-search-decoration,
.searchbar-form__input::-webkit-search-cancel-button { display: none; }

.searchbar-form__btn {
    flex-shrink:     0;
    background:      linear-gradient(135deg, var(--color-primary) 0%, #4f8ff7 100%);
    color:           #fff;
    border:          none;
    border-radius:   var(--radius);
    width:           34px;
    height:          34px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    box-shadow:      0 1px 4px rgba(59,130,246,0.3);
    transition:      all .15s ease;
}

.searchbar-form__btn:hover {
    box-shadow:  0 2px 8px rgba(59,130,246,0.4);
    transform:   translateY(-1px);
}

.searchbar-form__btn:active {
    transform:  translateY(0);
    box-shadow: 0 1px 3px rgba(59,130,246,0.25);
}

.widget--searchbar-compact {
    padding:         .5rem .75rem;
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
}

.widget--searchbar-compact .searchbar-form {
    width: 100%;
}

/* ============================================================
   Separator widget
   ============================================================ */
.widget--separator {
    background:  transparent;
    box-shadow:  none;
    border:      none;
    padding:     0;
    align-items: center;
    justify-content: center;
    overflow:    visible;
}

/* Separator-Karte: transparent, kein Rahmen, kein Schatten */
.grid-stack > .grid-stack-item > .grid-stack-item-content:has(.widget--separator) {
    background:    transparent;
    border:        none;
    box-shadow:    none;
    overflow:      visible;
}

.separator__line {
    border:     none;
    background: var(--color-border);
    margin:     0;
    flex-shrink: 0;
}

/* Horizontal: volle Breite, minimale Höhe */
.widget--separator-horizontal {
    flex-direction: row;
}

.widget--separator-horizontal .separator__line {
    width:  100%;
    height: 1px;
}

/* Vertikal: volle Höhe, minimale Breite */
.widget--separator-vertical {
    flex-direction: column;
}

.widget--separator-vertical .separator__line {
    width:  1px;
    height: 100%;
}

/* ── Form-Reihe mit gleichbreiten Spalten nebeneinander ─────────────────── */
.form__row {
    display: flex;
    gap: .75rem;
}

.form__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.form__label--sub {
    font-size: .78rem;
    color: var(--color-text-muted);
}

/* ============================================================
   Navbar: Start-Bereich (Hamburger + Brand)
   ============================================================ */
.navbar__start {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

/* Hamburger-Button: auf Desktop/Tablet versteckt */
.navbar__hamburger {
    display: none;
}

/* Sidebar-Toggle: auf Desktop sichtbar */
.navbar__sidebar-toggle {
    display: inline-flex;
}
.navbar__sidebar-toggle--active {
    color:       var(--color-primary);
    background:  var(--color-primary-subtle);
}

/* ============================================================
   Mobile Navigation Overlay
   ============================================================ */
.mobile-nav-overlay {
    position:   fixed;
    inset:      0;
    z-index:    500;
    background: rgba(0, 0, 0, .55);
    /* Sichtbarkeit: visibility + opacity statt display,
       damit der CSS-Übergang funktioniert */
    visibility: hidden;
    opacity:    0;
    transition: opacity .22s ease, visibility 0s linear .22s;
    pointer-events: none;
}

.mobile-nav-overlay--open {
    visibility:     visible;
    opacity:        1;
    pointer-events: auto;
    transition:     opacity .22s ease, visibility 0s linear 0s;
}

.mobile-nav-panel {
    position:   absolute;
    top:        0;
    left:       0;
    bottom:     0;
    width:      min(80vw, 280px);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .2);
    display:    flex;
    flex-direction: column;
    /* Slide-in-Übergang */
    transform:  translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
}

.mobile-nav-overlay--open .mobile-nav-panel {
    transform: translateX(0);
}

.mobile-nav-panel__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1rem .75rem;
    border-bottom:   1px solid var(--color-border);
    flex-shrink:     0;
}

.mobile-nav-panel__title {
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: -.02em;
}

.mobile-nav-panel__nav {
    flex:       1;
    padding:    .75rem;
    overflow-y: auto;
}

/* ============================================================
   Responsive – Tablet (768px – 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .main {
        padding: 1.5rem 1.75rem;
    }

    .navbar {
        padding: 0 1.5rem;
    }
}

/* ============================================================
   Responsive – Mobile (< 768px)
   ============================================================ */
@media (max-width: 767px) {

    /* ── Navbar ── */
    .navbar {
        padding:  0 1rem;
        height:   48px;
        gap:      .5rem;
    }

    .navbar__actions {
        gap: .4rem;
    }

    /* Username in der Navbar ausblenden — spart Platz */
    .navbar__user {
        display: none;
    }

    /* Hamburger einblenden, Sidebar-Toggle verstecken */
    .navbar__hamburger {
        display: inline-flex;
    }
    .navbar__sidebar-toggle {
        display: none;
    }

    /* ── App-Body: kein Flex mehr, Sidebar weg ── */
    .app-body {
        display: block;
        min-height: calc(100vh - 48px);
    }

    /* Sidebar auf Mobile komplett ausblenden — Navigation passiert über Hamburger-Menü */
    .sidebar-wrapper {
        display: none;
    }

    /* ── Main Content ── */
    .main {
        padding: 1rem;
    }

    /* ── Page Header ── */
    .page-header {
        margin-bottom: 1.25rem;
    }

    .page-header__title {
        font-size: 1.2rem;
    }

    /* ── Edit-Toggle + Add-Widget auf Mobile verstecken ── */
    #edit-toggle,
    #add-widget-dropdown {
        display: none !important;
    }

    /* ── Mobile Widget Stack:
          .grid-stack wird zu einem normalen Block-Container.
          GridStack-Klassen werden per JS entfernt; hier stellen wir
          sicher, dass der Fallback-Zustand sauber aussieht. ── */
    .grid-stack {
        /* GridStack setzt display:block — wir überschreiben es für die
           native mobile Ansicht NICHT, weil JS GridStack deaktiviert. */
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }

    /* GridStack setzt auf seinen Items position:absolute — das
       müssen wir für mobile zurücksetzen sobald JS das Grid deaktiviert.
       Die Klasse .mobile-stack wird per JS auf .grid-stack gesetzt. */
    .mobile-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: .75rem !important;
        /* GridStack-interne Höhenberechnung neutralisieren */
        height: auto !important;
    }

    .mobile-stack > .grid-stack-item {
        position:  static !important;
        transform: none !important;
        width:     100% !important;
        /* GridStack setzt inline height — per JS entfernt, hier als Fallback */
        height:    auto !important;
        left:      0 !important;
        top:       0 !important;
    }

    .mobile-stack > .grid-stack-item > .grid-stack-item-content {
        position:     static !important;
        width:        100% !important;
        height:       auto !important;
        /* Container-Queries brauchen eine definierte Größe */
        container-type: inline-size;
        container-name: tile;
        min-height:   60px;
    }

    /* Separator: volle Breite, minimale Höhe */
    .mobile-stack .widget--separator-horizontal {
        min-height: 16px !important;
    }

    .mobile-stack .widget--separator-vertical {
        display: none !important;
    }

    /* iFrame auf Mobile: feste sinnvolle Höhe statt 100% */
    .mobile-stack .widget--iframe {
        height: 280px;
    }

    .mobile-stack .widget--iframe iframe {
        height: 100%;
    }

    /* RSS auf Mobile: max. Höhe damit die Liste nicht riesig wird */
    .mobile-stack .widget--rss {
        max-height: 360px;
    }

    /* Todo auf Mobile */
    .mobile-stack .widget--todo {
        max-height: 400px;
    }

    /* Text-Widget auf Mobile */
    .mobile-stack .widget--text .widget__body--editable {
        min-height: 4rem;
        max-height: 200px;
        overflow-y: auto;
    }

    /* Link-Widgets auf Mobile: kompaktere Darstellung */
    .mobile-stack .widget--link {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        align-items: center;
        gap: .75rem;
        padding: .9rem 1.1rem;
        min-height: 56px;
    }

    .mobile-stack .widget--link .widget__icon {
        width:  36px;
        height: 36px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .mobile-stack .widget--link .widget__title {
        font-size: 1rem;
        font-weight: 600;
    }

    /* Compact-Link auf Mobile: gleiche Zeilen-Darstellung */
    .mobile-stack .widget--compact {
        padding:    .85rem 1rem;
        min-height: 52px;
    }

    /* Searchbar auf Mobile: volle Breite, etwas größer */
    .mobile-stack .widget--searchbar .searchbar-form__input {
        font-size: 1rem;
    }

    .mobile-stack .widget--searchbar-compact {
        padding: .75rem;
    }

    /* Touch-Targets: Submit-Button größer */
    .mobile-stack .searchbar-form__btn {
        width:  44px;
        height: 44px;
    }

    /* Modal auf Mobile: volle Breite */
    .modal {
        max-width:    calc(100vw - 2rem);
        top:          auto;
        bottom:       1rem;
        transform:    translateX(-50%);
        border-radius: var(--radius-lg) var(--radius-lg) var(--radius) var(--radius);
    }

    /* Toast-Container auf Mobile: volle Breite */
    .toast-container {
        bottom:    1rem;
        right:     1rem;
        left:      1rem;
        max-width: none;
    }
}

/* ============================================================
   Profil-Seite
   ============================================================ */

/* Profilbild-Sektion */
.profile-avatar-section {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
    padding:     1.5rem;
}

.profile-avatar-preview {
    flex-shrink: 0;
}

.profile-avatar-img {
    width:         80px;
    height:        80px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid var(--color-border);
}

.profile-avatar-initial {
    width:     80px;
    height:    80px;
    font-size: 2rem;
}

.profile-avatar-actions {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            .75rem;
}

.profile-avatar-hint {
    width:     100%;
    font-size: .8rem;
    color:     var(--color-text-muted);
    margin-top: -.25rem;
}

/* Formular-Body (Kontodaten-Karte) */
.profile-form-body {
    padding:        1.5rem;
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.profile-divider {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     0;
}

.profile-section-label {
    font-size:   .88rem;
    font-weight: 600;
    color:       var(--color-text-muted);
}

.profile-form-footer {
    display:     flex;
    align-items: center;
    gap:         1rem;
    padding-top: .25rem;
}

/* LDAP-Hinweis */
.profile-ldap-notice {
    display:       flex;
    align-items:   flex-start;
    gap:           .6rem;
    padding:       .85rem 1rem;
    background:    var(--color-surface-2);
    border-radius: var(--radius);
    font-size:     .88rem;
    color:         var(--color-text-muted);
    border:        1px solid var(--color-border);
}

.profile-ldap-notice svg {
    flex-shrink: 0;
    margin-top:  .1rem;
}

/* Export-Liste */
.profile-export-list {
    padding: .5rem 0;
}

.profile-export-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .85rem 1.5rem;
    border-bottom:   1px solid var(--color-border);
    gap:             1rem;
}

.profile-export-item:last-child {
    border-bottom: none;
}

.profile-export-item__info {
    display:     flex;
    align-items: center;
    gap:         .6rem;
    color:       var(--color-text-muted);
    min-width:   0;
}

.profile-export-item__name {
    color:         var(--color-text);
    font-weight:   500;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* LDAP-Badge (ergaenzend zu admin-badge) */
.admin-badge--ldap {
    background: rgba(251,191,36,.12);
    color:      #f59e0b;
}

/* ── Navbar-Avatar-Button ────────────────────────────────────────────────── */
.navbar__avatar-btn {
    background:    none;
    border:        none;
    padding:       0;
    cursor:        pointer;
    border-radius: 50%;
    width:         28px;
    height:        28px;
    overflow:      hidden;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    box-shadow .15s;
    flex-shrink:   0;
}

.navbar__avatar-btn:hover {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.navbar__avatar-img {
    width:         28px;
    height:        28px;
    border-radius: 50%;
    object-fit:    cover;
    display:       block;
}

.navbar__avatar-initial {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--color-primary);
    color:           #fff;
    font-size:       .75rem;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    user-select:     none;
}

/* ── Profil-Modal ────────────────────────────────────────────────────────── */
.profile-modal {
    max-width: 540px;
}

.profile-modal .modal__inner {
    padding: 2rem;
}

/* Avatar-Bereich im Modal */
.pm-avatar-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .6rem;
    margin-bottom:  1.5rem;
    text-align:     center;
}

.pm-avatar-circle {
    position:      relative;
    width:         96px;
    height:        96px;
    border-radius: 50%;
    overflow:      hidden;
    cursor:        pointer;
    flex-shrink:   0;
}

.pm-avatar-circle img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.pm-avatar-circle .pm-avatar-overlay {
    position:        absolute;
    inset:           0;
    background:      rgba(0,0,0,.5);
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    transition:      opacity .2s;
    color:           #fff;
}

.pm-avatar-circle:hover .pm-avatar-overlay,
.pm-avatar-circle:focus .pm-avatar-overlay {
    opacity: 1;
}

.pm-avatar-initial-lg {
    width:           96px;
    height:          96px;
    border-radius:   50%;
    background:      var(--color-primary);
    color:           #fff;
    font-size:       2.5rem;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    position:        relative;
    user-select:     none;
    flex-shrink:     0;
}

.pm-avatar-initial-lg .pm-avatar-overlay {
    position:        absolute;
    inset:           0;
    border-radius:   50%;
    background:      rgba(0,0,0,.35);
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    transition:      opacity .2s;
    color:           #fff;
}

.pm-avatar-initial-lg:hover .pm-avatar-overlay,
.pm-avatar-initial-lg:focus .pm-avatar-overlay {
    opacity: 1;
}

.pm-user-name {
    font-size:   1.05rem;
    font-weight: 600;
    margin:      0;
}

.pm-user-email {
    font-size: .85rem;
    color:     var(--color-text-muted);
    margin:    0;
}

.pm-avatar-actions {
    display:     flex;
    gap:         .5rem;
    align-items: center;
    flex-wrap:   wrap;
    justify-content: center;
}

.pm-avatar-hint {
    font-size: .78rem;
    color:     var(--color-text-muted);
    margin:    0;
}

/* Tabs */
.pm-tabs {
    display:       flex;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.25rem;
    gap:           0;
}

.pm-tab {
    background:    none;
    border:        none;
    padding:       .6rem 1rem;
    font-size:     .85rem;
    font-weight:   500;
    color:         var(--color-text-muted);
    cursor:        pointer;
    border-bottom: 2px solid transparent;
    transition:    color .15s, border-color .15s;
    margin-bottom: -1px;
}

.pm-tab:hover {
    color: var(--color-text);
}

.pm-tab.pm-tab--active {
    color:              var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.pm-panel {
    display: none;
}

.pm-panel.pm-panel--active {
    display: block;
}

/* Responsive: auf schmalen Screens etwas weniger Padding */
@media (max-width: 560px) {
    .profile-modal .modal__inner {
        padding: 1.25rem 1rem;
    }
}

/* ============================================================
   Link-Gruppe Widget
   ============================================================ */

/* Ruhezustand: zentrierter Trigger (Icon + Titel + Badge) */
.widget--linkgroup {
    position:        relative;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    overflow:        visible;
}

/* Overflow auf allen Eltern-Containern aufheben damit die Links sichtbar bleiben */
.grid-stack-item:has(.widget--linkgroup),
.grid-stack-item:has(.widget--linkgroup) > .grid-stack-item-content {
    overflow: visible;
}

.linkgroup__trigger {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .4rem;
    pointer-events:  none;
    z-index:         1;
    position:        relative;
    min-height:      0;
    overflow:        hidden;
    transition:      opacity 0.2s ease, transform 0.2s ease;
}

body:not(.edit-mode) .widget--linkgroup:hover .linkgroup__trigger {
    transform: scale(1.08);
}

/* Wenn zu wenig vertikaler Platz: Icon und Titel in eine Zeile */
@container tile (max-height: 80px) {
    .linkgroup__trigger {
        flex-direction: row;
        gap:            .5rem;
    }

    .linkgroup__trigger-icon {
        flex-shrink: 0;
    }

    .linkgroup__badge {
        display: none;
    }
}

.linkgroup__trigger-icon {
    color:   var(--color-text-muted);
    display: block;
}

.widget--linkgroup .widget__title {
    font-size:   1.1rem;
    font-weight: 700;
    margin:      0;
}

.linkgroup__badge {
    font-size:    .7rem;
    color:        var(--color-text-muted);
    background:   var(--color-surface-3, rgba(0,0,0,.08));
    padding:      .15rem .45rem;
    border-radius: 99px;
    white-space:  nowrap;
}

/* Items-Container: sitzt über dem Trigger */
.linkgroup__items {
    position: absolute;
    inset:    0;
    pointer-events: none; /* deaktiviert im Ruhezustand */
}

/* Einzelner Link — startet unsichtbar in Mitte des Widgets */
.linkgroup__item {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%) scale(0.6);
    opacity:         0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .25rem;
    text-decoration: none;
    color:           var(--color-text);
    background:      var(--color-surface-2);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius);
    padding:         .4rem .5rem;
    width:           72px;
    pointer-events:  none;
    transition:      transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                     opacity   0.2s  ease,
                     box-shadow 0.15s ease;
    z-index:         10;
    white-space:     nowrap;
    box-shadow:      0 2px 6px rgba(0,0,0,.12);
}

.linkgroup__item-icon {
    width:  28px;
    height: 28px;
    object-fit:    contain;
    border-radius: 6px;
    display:       block;
}

.linkgroup__item-icon--fallback {
    background:    var(--color-surface-3, rgba(0,0,0,.08));
    border-radius: 6px;
}

.linkgroup__item-label {
    font-size:     .68rem;
    max-width:     72px;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* ── Offen-Zustand (via JS .is-open statt :hover — verhindert Zucken bei Lücken) ── */
body:not(.edit-mode) .widget--linkgroup.is-open .linkgroup__trigger {
    opacity: 0;
    pointer-events: none;
}

body:not(.edit-mode) .widget--linkgroup.is-open .linkgroup__items {
    pointer-events: auto;
}

body:not(.edit-mode) .widget--linkgroup.is-open .linkgroup__item {
    opacity:        1;
    pointer-events: auto;
    scale:          1;
}

/* ── Vertikal: Items übereinander nach oben ── */
body:not(.edit-mode) .widget--linkgroup.is-open[data-direction="vertical"] .linkgroup__item {
    transform: translate(-50%, calc(-50% - (var(--i) + 1) * var(--fan-step, 64px)));
}

/* ── Horizontal: Items nebeneinander nach rechts ── */
body:not(.edit-mode) .widget--linkgroup.is-open[data-direction="horizontal"] .linkgroup__item {
    transform: translate(calc(-50% + (var(--i) + 1) * var(--fan-step, 72px)), -50%);
}

/* ── Radial: Items im Halbkreis nach oben ── */
body:not(.edit-mode) .widget--linkgroup.is-open[data-direction="radial"] .linkgroup__item {
    --angle: calc((var(--i) * 40deg) - 80deg);
    transform: translate(-50%, -50%)
               rotate(var(--angle))
               translateY(-90px)
               rotate(calc(-1 * var(--angle)));
}

/* Item-Hover: leichter Highlight */
.linkgroup__item:hover {
    background:  var(--color-surface-3, var(--color-surface-2));
    border-color: var(--color-primary);
    box-shadow:  0 4px 12px rgba(0,0,0,.18);
}

/* Transition-Verzögerung pro Index für einen gestaffelten Effekt */
.linkgroup__item { transition-delay: calc(var(--i) * 0.06s); }

/* ── Link-Gruppe Modal: Zeilenlayout für Link-Einträge ── */
.modal--linkgroup {
    max-width: 780px;
}

.linkgroup-row {
    display:   grid;
    grid-template-columns: 1fr 1.4fr 1fr auto;
    gap:       .4rem;
    margin-bottom: .4rem;
    align-items: center;
}

.linkgroup-row__remove {
    color:      var(--color-text-muted);
    flex-shrink: 0;
}

/* ── Crop Modal ────────────────────────────────────────────────────── */
.crop-modal {
    max-width: 500px;
}
.crop-container {
    max-height: 400px;
    overflow: hidden;
}
.crop-container img {
    display: block;
    max-width: 100%;
}

/* ── AI Chat Widget ────────────────────────────────────────────────────────── */
.widget--aichat {
    display: flex;
    flex-direction: column;
    padding: .75rem;
    gap: .5rem;
}

.aichat__messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .25rem .25rem .25rem 0;
}

.aichat__message {
    max-width: 82%;
    padding: .5rem .75rem;
    font-size: .8125rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    position: relative;
}

.aichat__message--user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--color-primary) 0%, #4f8ff7 100%);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.aichat__message--assistant {
    align-self: flex-start;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 16px 16px 16px 4px;
}

.aichat__message--thinking {
    align-self: flex-start;
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 16px 16px 16px 4px;
    padding: .625rem .875rem;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 52px;
    min-height: 32px;
}

.aichat__message--error {
    align-self: flex-start;
    color: var(--color-error-text);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: 16px 16px 16px 4px;
    font-size: .75rem;
}

/* Typing indicator dots */
.typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: typingPulse 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingPulse {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1);
    }
}

.aichat__input-row {
    display: flex;
    gap: .35rem;
    align-items: center;
}

.aichat__input {
    flex: 1;
    font-size: .8125rem;
    padding: .35rem .6rem;
    border-radius: 20px;
}

.aichat__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -.15rem;
}

.aichat__clear {
    align-self: flex-end;
    background: none;
    border: none;
    color: var(--color-text-muted);
    padding: .15rem;
    cursor: pointer;
    border-radius: 6px;
    transition: color .15s, background .15s;
    opacity: .6;
}
.aichat__clear:hover {
    opacity: 1;
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

/* ── AI Chat Modal ─────────────────────────────────────────────────────────── */
dialog.aichat-modal {
    /* Fullscreen, transparent — backdrop übernimmt den Hintergrund */
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    align-items: stretch;
    overflow: hidden;
}

dialog.aichat-modal[open] {
    display: flex;
}
dialog.aichat-modal::backdrop {
    background: rgba(6, 6, 16, .70);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── Sidebar ── */
.aichat-modal__sidebar {
    width: 230px;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,.055);
    border-right: 1px solid rgba(255,255,255,.09);
    overflow: hidden;
}
.aichat-modal__sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 1.1rem 1rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.aichat-modal__sidebar-title {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}
.aichat-modal__new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0;
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.aichat-modal__new-btn:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.aichat-modal__session-list {
    flex: 1;
    overflow-y: auto;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    list-style: none;
    margin: 0;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
.aichat-modal__session-list::-webkit-scrollbar { width: 4px; }
.aichat-modal__session-list::-webkit-scrollbar-track { background: transparent; }
.aichat-modal__session-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.aichat-modal__session-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .65rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: .84rem;
    color: rgba(255,255,255,.65);
    transition: background .13s, color .13s;
    user-select: none;
}
.aichat-modal__session-item:hover {
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.9);
}
.aichat-modal__session-item--active {
    background: rgba(0,113,227,.22);
    color: #fff;
}
.aichat-modal__session-item--active:hover {
    background: rgba(0,113,227,.3);
}
.aichat-modal__session-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aichat-modal__session-name[contenteditable="true"] {
    outline: none;
    background: rgba(255,255,255,.1);
    border-radius: 4px;
    padding: 0 .25rem;
    cursor: text;
}
.aichat-modal__session-del {
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .2rem;
    color: rgba(255,255,255,.35);
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity .13s, color .13s;
    flex-shrink: 0;
}
.aichat-modal__session-item:hover .aichat-modal__session-del { opacity: 1; }
.aichat-modal__session-del:hover { color: #ff7070; }

/* ── Chat-Bereich ── */
.aichat-modal__chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.aichat-modal__chat-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.25rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.aichat-modal__chat-title {
    flex: 1;
    font-size: .95rem;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aichat-modal__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.45);
    cursor: pointer;
    transition: background .13s, color .13s;
    flex-shrink: 0;
}
.aichat-modal__close-btn:hover {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.9);
}
.aichat-modal__close-btn:focus-visible {
    outline: 2px solid rgba(0,113,227,.7);
    outline-offset: 2px;
}

/* ── Nachrichten ── */
.aichat-modal__messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.5rem 2rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
}
.aichat-modal__messages::-webkit-scrollbar { width: 4px; }
.aichat-modal__messages::-webkit-scrollbar-track { background: transparent; }
.aichat-modal__messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

/* Nachrichten-Bubbles */
.aichat-modal__messages .aichat__message {
    max-width: min(72%, 640px);
    padding: .625rem 1rem;
    font-size: .875rem;
    line-height: 1.55;
    word-break: break-word;
    white-space: normal;
}
.aichat-modal__messages .aichat__message--user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--color-primary) 0%, #4f8ff7 100%);
    color: #fff;
    border-radius: 20px 20px 6px 20px;
    box-shadow: 0 2px 12px rgba(59,130,246,.25);
}
.aichat-modal__messages .aichat__message--assistant {
    align-self: flex-start;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.93);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px 20px 20px 6px;
}
.aichat-modal__messages .aichat__message--assistant .md-rendered {
    color: rgba(255,255,255,.93);
}
.aichat-modal__messages .aichat__message--assistant .md-rendered a {
    color: #90c0ff;
    text-decoration: underline;
}
.aichat-modal__messages .aichat__message--assistant .md-rendered code {
    background: rgba(0,0,0,.25);
    color: #e2ecff;
    border-radius: 4px;
    padding: .1em .35em;
}
.aichat-modal__messages .aichat__message--assistant .md-rendered pre {
    background: rgba(0,0,0,.3);
    border-radius: 8px;
    padding: .75rem 1rem;
    overflow-x: auto;
}
.aichat-modal__messages .aichat__message--assistant .md-rendered pre code {
    background: none;
    padding: 0;
}
.aichat-modal__messages .aichat__message--thinking {
    align-self: flex-start;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px 20px 20px 6px;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 64px;
    min-height: 40px;
    font-style: normal;
    font-size: 0;
    color: transparent;
    max-width: none;
}
.aichat-modal__messages .aichat__message--thinking .typing-dot {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,.45);
}
.aichat-modal__messages .aichat__message--error {
    align-self: flex-start;
    color: #ff9494;
    font-size: .85rem;
    background: rgba(255,80,80,.08);
    border: 1px solid rgba(255,80,80,.2);
    padding: .45rem .9rem;
    border-radius: 10px;
}

/* ── Eingabefeld ── */
.aichat-modal__input-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 1.5rem 1.25rem;
    padding: .55rem .55rem .55rem 1.1rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    box-shadow: 0 4px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
    transition: border-color .15s, box-shadow .15s;
    flex-shrink: 0;
}
.aichat-modal__input-row:focus-within {
    border-color: rgba(0,113,227,.55);
    box-shadow: 0 4px 28px rgba(0,0,0,.2), 0 0 0 3px rgba(0,113,227,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
.aichat-modal__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255,255,255,.93);
    font-size: .93rem;
    line-height: 1.4;
    caret-color: var(--color-primary);
    min-width: 0;
}
.aichat-modal__input::placeholder {
    color: rgba(255,255,255,.32);
}
.aichat-modal__send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #4f8ff7 100%);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity .15s, transform .1s;
    box-shadow: 0 2px 10px rgba(59,130,246,.35);
}
.aichat-modal__send-btn:hover { opacity: .88; }
.aichat-modal__send-btn:active { transform: scale(.93); }
.aichat-modal__send-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.aichat-modal__send-btn:focus-visible {
    outline: 2px solid rgba(0,113,227,.7);
    outline-offset: 2px;
}