/* === Schulio design system =====================================
 *
 * FARB-SYSTEM (alle Brand-Farben via _Layout.cshtml gesetzt, on-* per
 * WCAG-Luminanz automatisch berechnet):
 *
 *   --schulio-primary           Identitaet. Grosse gefaerbte Flaechen:
 *                               Header, Footer, .btn Default, Card-Border
 *                               im Fokus, Selected-State im Form-Builder.
 *   --schulio-on-primary        Auto-Kontrast-Text auf Primary.
 *   --schulio-on-primary-muted  Sekundaerer Text auf Primary (Sub-Labels).
 *
 *   --schulio-secondary         Zustandsfarbe. Alles was "Primary aber
 *                               aktiver/getroffen": Hover/Active von Buttons,
 *                               Selected-Indikator in Navigation, Focus-Glow,
 *                               .nav-pills .nav-link.active.
 *   --schulio-on-secondary      Auto-Kontrast-Text auf Secondary.
 *
 *   --schulio-accent            Aufmerksamkeit. Pop-Farbe fuer "schau hier!":
 *                               CTA (Registrieren), Badges, Activity-Banner,
 *                               .btn.accent.
 *   --schulio-on-accent         Auto-Kontrast-Text auf Accent.
 *
 *   --schulio-heading           Headings (h1-h3) auf weissem Background.
 *                               CI-Regel: Primary wenn lesbar, sonst Accent
 *                               wenn lesbar, sonst Slate #0f172a. Secondary
 *                               ist NICHT Teil dieser Text-Kette.
 *   --schulio-link              Inline-Links auf weissem Background.
 *                               Gleiche Logik, Fallback: Blue-700 #1d4ed8.
 *
 * Regel: Brand-Farben werden NIE hardcoded — entweder var(--schulio-*) oder
 * die on-* / heading / link Auto-Variablen. Neutralfarben (Slate, Gray) duerfen
 * direkt rein.
 * ================================================================= */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    /* Sticky-Footer per Flex: body fuellt den Viewport, main waechst auf
       1fr, der Footer sitzt automatisch am Ende. Kein min-height-Hack mehr
       der auf iOS Safari ueberschiesst (100vh ignoriert die URL-Leiste). */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #0f172a;
    background: #ffffff;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; width: 100%; box-sizing: border-box; }
main.container {
    padding-top: 2rem; padding-bottom: 4rem;
    flex: 1 0 auto;
    /* In Flex-Column waere align-self: stretch der Default, aber Safari/iPad
       behandelt das in Kombination mit max-width unzuverlaessig — der
       Container schrumpft auf Content-Breite. width: 100% + align-self
       stretch erzwingt die volle Cross-Achse, max-width capt es bei 1120. */
    align-self: stretch;
    width: 100%;
}
footer.footer { flex-shrink: 0; }

/* --- typography ------------------------------------------------- */

h1, h2, h3, h4 { color: var(--schulio-heading); line-height: 1.25; margin: 0 0 .8rem; font-weight: 600; }
h1 { font-size: 1.85rem; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; margin-top: 2rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: .95rem; color: #0f172a; }   /* h4 immer Slate — soll dezent bleiben */

/* Body-Scroll-Lock waehrend Mobile-Burger offen ist. */
body.mobile-nav-open { overflow: hidden; }

p { margin: 0 0 1rem; }
small, .muted { color: #64748b; }

a { color: var(--schulio-link); text-decoration: none; transition: color .15s; }
a:hover { text-decoration: underline; }

code { background: #eef2f7; padding: .1em .35em; border-radius: 4px; font-size: .9em; }

/* --- topbar / footer ------------------------------------------- */

.topbar {
    background: var(--schulio-primary);
    border-bottom: 1px solid color-mix(in srgb, var(--schulio-primary) 80%, black);
    color: var(--schulio-on-primary);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}
.brand {
    display: inline-flex;
    gap: .65rem;
    align-items: center;
    font-weight: 700;
    color: var(--schulio-on-primary);
    font-size: 1.05rem;
}
.brand:hover { text-decoration: none; color: var(--schulio-on-primary); }
.brand img { height: 32px; max-width: 140px; object-fit: contain; }

/* Mobile-Burger: nur auf <= 720px sichtbar (siehe Media-Query weiter unten). */
.nav-burger {
    display: none;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    width: 2.6rem; height: 2.6rem;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.nav-burger:hover { background: color-mix(in srgb, var(--schulio-on-primary) 12%, transparent); }
.nav-burger:focus-visible { outline: 2px solid var(--schulio-accent); outline-offset: 2px; }
.nav-burger-bar {
    display: block;
    width: 22px; height: 2px;
    background: var(--schulio-on-primary); border-radius: 2px;
    transition: transform .18s ease, opacity .12s;
}
.nav-burger.is-open .nav-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open .nav-burger-bar:nth-child(2) { opacity: 0; }
.nav-burger.is-open .nav-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Platform-Mark im Header: etwas kleiner als die volle 32px Tenant-Logo-Hoehe,
   damit "Schulio" daneben gut atmet. */
.brand img.brand-platform-mark { height: 28px; width: 28px; max-width: 28px; }
/* Topnav: alle Einträge auf gleicher Text-Baseline statt zentriert. So liegen
   die Buchstaben-Linien aller Items exakt übereinander, unabhängig davon ob
   ein Item eine größere Badge oder ein Icon enthält. */
.topnav { display: flex; align-items: center; gap: 1.3rem; line-height: 1.4; }
.topnav a,
.topnav .topnav-dropdown-label {
    color: var(--schulio-on-primary-muted);
    font-weight: 500;
    font-size: .95rem;
}
.topnav a:hover,
.topnav .topnav-dropdown-label:hover { color: var(--schulio-on-primary); text-decoration: none; }
/* CTA = primaere Aktions-Highlight in der Topnav. Auf primary-Header die
   Akzentfarbe einsetzen, damit der Button visuell rausspringt. */
.topnav .cta {
    background: var(--schulio-accent);
    color: var(--schulio-on-accent);
    padding: .45rem .9rem;
    border-radius: 6px;
    font-weight: 600;
}
.topnav .cta:hover {
    background: color-mix(in srgb, var(--schulio-accent) 85%, black);
    color: var(--schulio-on-accent);
}
.inline-form { display: inline; margin: 0; }
.linkish { background: none; border: none; cursor: pointer; font: inherit; padding: 0; color: #475569; }
.linkish:hover { color: var(--schulio-link); }

.footer {
    border-top: 1px solid color-mix(in srgb, var(--schulio-primary) 80%, black);
    background: var(--schulio-primary);
    padding: 1.6rem 0;
    color: var(--schulio-on-primary-muted);
    font-size: .85rem;
}
.footer a { color: var(--schulio-on-primary); }
.footer a:hover { color: var(--schulio-on-primary); text-decoration: underline; }

/* --- flash messages -------------------------------------------- */

.flash {
    padding: .8rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: 1px solid;
}
.flash.success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.flash.error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.flash.info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* --- cards / grid ---------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.admin-section {
    margin-top: 2.25rem;
}
.admin-section:first-of-type { margin-top: 1.5rem; }
.admin-section > header {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: .35rem;
    margin-bottom: .25rem;
}
.admin-section > header h2 {
    font-size: 1.05rem;
    margin: 0 0 .15rem;
    color: var(--schulio-link);
    letter-spacing: .01em;
}
.admin-section > header p {
    margin: 0;
    font-size: .88rem;
}

/* Admin-Tabs auf /Admin: enger an die Topbar, weniger Margin als der
   generische .tabs-Block der z.B. im Branding-Editor lebt. */
.admin-tabs { margin-top: 1rem; }
.admin-tabs .tab-panel { padding-top: 1rem; }

/* Kompakte Karten-Variante fuer die Admin-Tabs: Icon links neben dem Text,
   einheitliche Hoehe und Breite ueber alle Karten — gibt dem Grid optisch
   Ruhe, auch wenn Beschreibungstexte unterschiedlich lang sind. */
.card-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 1fr;   /* alle Reihen gleich hoch */
    gap: .75rem;
    margin-top: 0;
}
.card.card--compact {
    display: flex; align-items: center; gap: .85rem;
    padding: 1rem 1.1rem;
    min-height: 96px;       /* gleiche Mindesthoehe → ruhigeres Bild */
}
.card.card--compact > div { flex: 1; min-width: 0; }
.card.card--compact .card-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    margin: 0;
    color: var(--schulio-link);
}
.card.card--compact h3 {
    margin: 0 0 .2rem;
    font-size: 1rem;
    line-height: 1.25;
}
.card.card--compact p {
    margin: 0;
    font-size: .85rem;
    color: #64748b;
    line-height: 1.35;
}
/* Compact summary banner on /Admin for non-global admins:
   shows the tenants they administer, with a visual cue for cascaded scope. */
.scope-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    margin: 1rem 0 0;
    padding: .55rem .9rem;
    background: #f1f5f9;
    border-left: 3px solid var(--schulio-primary);
    border-radius: 0 6px 6px 0;
    font-size: .88rem;
}
.scope-summary > .pill {
    background: white;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
}
.scope-summary > .pill.cascaded {
    background: color-mix(in srgb, var(--schulio-primary) 8%, white);
    border-color: color-mix(in srgb, var(--schulio-primary) 30%, transparent);
    color: var(--schulio-link);
}
.card {
    display: block;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.card:hover {
    border-color: var(--schulio-link);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .12);
}
.card h3 { margin: 0 0 .4rem; color: var(--schulio-link); }
.card p { margin: 0; color: #64748b; font-size: .92rem; }

/* --- data tables ----------------------------------------------- */

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    overflow: hidden;
}
.data-table th, .data-table td {
    padding: .8rem 1rem;
    text-align: left;
    border-bottom: 1px solid #eef0f4;
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table th {
    background: #f8fafc;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
}
.data-table tbody tr:hover { background: #fbfcfd; }

/* --- buttons --------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.05rem;
    border-radius: 7px;
    border: 1px solid var(--schulio-primary);
    background: var(--schulio-primary);
    color: var(--schulio-on-primary);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .05s;
    line-height: 1;
}
.btn:hover { background: var(--schulio-secondary); border-color: var(--schulio-secondary); color: var(--schulio-on-secondary); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.secondary {
    background: #fff;
    color: #334155;
    border-color: #d1d5db;
}
.btn.secondary:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.btn.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn.small { padding: .35rem .7rem; font-size: .82rem; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--schulio-link); }
.btn.ghost:hover { background: #eef2ff; color: var(--schulio-link); }

/* Akzent-Button: nutzt die Akzentfarbe (z.B. fuer Highlight-CTAs ausserhalb
   der Topnav). Textfarbe automatisch passend per --schulio-on-accent. */
.btn.accent { background: var(--schulio-accent); border-color: var(--schulio-accent); color: var(--schulio-on-accent); }
.btn.accent:hover {
    background: color-mix(in srgb, var(--schulio-accent) 85%, black);
    border-color: color-mix(in srgb, var(--schulio-accent) 85%, black);
    color: var(--schulio-on-accent);
}

/* --- forms ----------------------------------------------------- */

.form-card {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 12px;
    padding: 1.75rem 2rem;
    /* Volle Container-Breite — admin-Formulare mit Branding-Vorschau,
       Logo-Slots, Adress-Grids etc. brauchen den Platz. */
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.form-grid > .form-row.full,
.form-grid > fieldset,
.form-grid > .actions { grid-column: 1 / -1; }

.form-row { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.form-row label {
    font-weight: 500;
    color: #334155;
    font-size: .9rem;
}
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row input[type=url],
.form-row input[type=tel],
.form-row input[type=search],
.form-row input[type=datetime-local],
.form-row input[type=date],
.form-row input[type=number],
.form-row input[type=file],
.form-row select,
.form-row textarea {
    padding: .55rem .7rem;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    background: #fff;
    color: #0f172a;
    transition: border-color .15s, box-shadow .15s;
}
/* Date/Time-Inputs sind im Browser-Default hoeher als Text-Inputs (Picker-
   Widget). Mit fixer Hoehe + matching Padding bleibt die Zeile bündig zu
   den Geschwistern in der gleichen form-row Reihe. */
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row input[type=url],
.form-row input[type=tel],
.form-row input[type=search],
.form-row input[type=datetime-local],
.form-row input[type=date],
.form-row input[type=number],
.form-row select {
    height: 2.5rem;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--schulio-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--schulio-secondary) 22%, transparent);
}
.form-row textarea { min-height: 5rem; resize: vertical; font-family: inherit; }
.form-row input[type=color] {
    width: 3.4rem;
    height: 2.4rem;
    padding: 2px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
}
.form-row .help { color: #64748b; font-size: .82rem; }
.form-row .field-validation-error { color: #dc2626; font-size: .82rem; }
.form-row.checkbox { flex-direction: row; align-items: center; gap: .5rem; }
.form-row.checkbox label { margin: 0; }
input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--schulio-link); }

fieldset {
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    padding: 1rem 1.25rem .25rem;
    margin: 0 0 1.5rem;
    background: #fafbfc;
}
fieldset > legend {
    font-weight: 600;
    padding: 0 .5rem;
    color: var(--schulio-link);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.actions {
    margin-top: 1rem;
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

.validation-summary-errors {
    background: #fef2f2;
    color: #991b1b;
    padding: .8rem 1rem;
    border-radius: 8px;
    border: 1px solid #fecaca;
    margin-bottom: 1.5rem;
}
.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }

/* --- image upload widget --------------------------------------- */

.image-upload {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: .75rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #fff;
}
.image-upload .preview {
    width: 80px; height: 80px;
    border-radius: 8px;
    background: #f1f5f9 center/contain no-repeat;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.image-upload .preview.empty::after {
    content: "—";
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: #94a3b8;
}
.image-upload .controls { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.image-upload .current { font-size: .82rem; color: #64748b; word-break: break-all; }
.image-upload input[type=file] { font-size: .85rem; }

/* --- pills / badges -------------------------------------------- */

.pill {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}
.pill.draft     { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.pill.open      { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.pill.editonly  { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.pill.upcoming  { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.pill.closed    { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.pill.archived  { background: #e5e7eb; color: #374151; border-color: #d1d5db; }
.pill.notpublic { background: #f3f4f6; color: #64748b; border-color: #e5e7eb; }

/* --- public landing page -------------------------------------- */

.landing-logo {
    display: flex;
    justify-content: center;
    margin: .5rem 0 2rem;
}
.landing-logo img {
    width: 100%;
    max-width: 800px;
    height: auto;
    object-fit: contain;
    display: block;
}
/* Flush-Variante: nutzt negatives margin-top, um das padding-top von
   main.container (2rem) zu absorbieren — das Logo sitzt damit direkt
   unter der Topbar ohne weisse Lücke. */
.landing-logo.landing-logo--flush {
    margin-top: -2rem;
    margin-bottom: 1.25rem;
}

/* === Mobile / responsive ====================================== */

/* Tables: scroll on tablet, card layout on phone */
@media (max-width: 1080px) {
    .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 720px) {
    /* Convert data tables to a card-per-row layout */
    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table tr,
    .data-table th,
    .data-table td { display: block; width: auto; }
    .data-table { overflow: visible; border: none; background: transparent; border-radius: 0; }
    .data-table thead { position: absolute; left: -9999px; }
    .data-table tbody tr {
        margin-bottom: .8rem;
        padding: .85rem 1rem;
        background: #fff;
        border: 1px solid #e6e8ee;
        border-radius: 10px;
    }
    .data-table tbody tr:hover { background: #fff; }
    .data-table td {
        padding: .25rem 0;
        border: none;
        font-size: .92rem;
    }
    .data-table td::before {
        content: attr(data-label);
        display: block;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #64748b;
        font-weight: 600;
        margin-bottom: .1rem;
    }
    .data-table td:empty,
    .data-table td:has(.row-actions:empty) { display: none; }
    .data-table td .row-actions {
        margin-top: .35rem; flex-wrap: wrap; gap: .35rem;
    }
    .data-table td:last-child {
        border-top: 1px solid #f1f5f9;
        margin-top: .5rem;
        padding-top: .55rem;
    }
    .data-table td:last-child::before { display: none; }

    /* Form field grid collapses */
    .form-fields-grid > * { grid-column: 1 / -1 !important; }

    /* Form builder preview/props stack */
    .fb-grid > .fb-card { grid-column: 1 / -1 !important; }
    .fb-resize { display: none; }

    /* Top-bar: groesser, Burger statt Inline-Nav.
       Brand-Logo + Schriftgroesse spuerbar groesser, mehr Vertical-Space. */
    .topbar-inner {
        height: auto;
        min-height: 72px;
        padding: .65rem 1rem;
        gap: .5rem;
        position: relative;   /* Ankerpunkt fuer absolut positioniertes .topnav */
    }
    .brand { font-size: 1.2rem; gap: .55rem; }
    .brand img { height: 40px; max-width: 160px; }
    .brand img.brand-platform-mark { height: 34px; width: 34px; max-width: 34px; }

    .nav-burger { display: inline-flex; }

    /* Topnav als Full-Screen-Overlay unter dem sticky Header. Header bleibt
       sichtbar/fix, der gesamte Rest unter ihm gehoert dem Menue. Innen
       scrollbar fuer lange Menues. body bekommt overflow:hidden waehrend
       offen ist (siehe JS). */
    .topnav {
        position: fixed;
        top: 72px; left: 0; right: 0; bottom: 0;
        flex-direction: column; align-items: stretch;
        background: #fff;
        gap: 0;
        padding: 0 0 1rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        display: none;
        z-index: 49;   /* knapp unter dem sticky Header (z=50) */
    }
    .topbar-inner[data-open="1"] .topnav { display: flex; }
    .topnav > a,
    .topnav > .topnav-dropdown > a,
    .topnav > .topnav-dropdown > .topnav-dropdown-label {
        display: block;
        padding: .9rem 1.25rem;
        font-size: 1.05rem;
        font-weight: 500;
        color: #0f172a;
        border-bottom: 1px solid #f1f5f9;
    }
    .topnav > a:active,
    .topnav-dropdown-menu a:active { background: #eef2ff; }
    .topnav .cta {
        margin: .8rem 1rem .4rem;
        text-align: center;
        padding: .9rem 1rem;
        font-size: 1.05rem;
        border-radius: 8px;
    }

    /* Dropdowns inline ausgeklappt. Label ("Konto") = normaler Top-Level-
       Eintrag in voller Breite, visuell gleichwertig zu "Start" / "Administration".
       Children volle Breite, leicht eingerueckt mit Akzent-Leiste links und
       dezentem Hintergrund, um Hierarchie zu zeigen ohne aufdringlich zu sein.

       WICHTIG: !important auf display/width — die Desktop-Regeln stehen
       WEITER UNTEN in der Datei (Block "Topnav-Dropdown Desktop" um Zeile
       1850) und gewinnen sonst trotz Media-Query (gleiche Specificity, spaeter). */
    .topnav-dropdown { display: block !important; }
    .topnav > .topnav-dropdown > .topnav-dropdown-label,
    .topnav > .topnav-dropdown > a {
        display: flex !important;
        align-items: center !important;
        gap: .4rem;
        width: 100% !important;
        padding: .9rem 1.25rem;
        font-size: 1.05rem;
        font-weight: 500;
        color: #0f172a;
        background: transparent;
        text-transform: none;
        letter-spacing: normal;
        border-bottom: 1px solid #f1f5f9;
        cursor: pointer;
    }
    .topnav > .topnav-dropdown > .topnav-dropdown-label:active,
    .topnav > .topnav-dropdown > a:active { background: #eef2ff; }

    .topnav-dropdown-menu {
        position: static !important;
        left: auto !important; top: auto !important;
        box-shadow: none !important;
        border: none !important;
        background: #f8fafc !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        min-width: 0 !important;
        width: 100% !important;
        border-bottom: 1px solid #e2e8f0 !important;
        border-radius: 0 !important;
    }
    .topnav-dropdown-menu a,
    .topnav-dropdown-menu .dropdown-link {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        width: 100% !important;
        padding: .8rem 1.25rem .8rem 2rem !important;
        font-size: 1rem;
        font-weight: 500;
        color: #1f2937;
        border: none;
        border-bottom: 1px solid #e2e8f0;
        border-left: 3px solid transparent;
        text-align: left;
        background: transparent;
    }
    .topnav-dropdown-menu a:last-child,
    .topnav-dropdown-menu > form:last-child .dropdown-link { border-bottom: none; }
    .topnav-dropdown-menu a:active,
    .topnav-dropdown-menu .dropdown-link:active {
        background: #eef2ff;
        border-left-color: var(--schulio-link);
    }
    .topnav-dropdown-menu .dropdown-form {
        display: block; margin: 0; padding: 0;
        border: none; background: transparent; box-shadow: none;
    }

    .topnav-dropdown-menu .topnav-badge.inline,
    .topnav > .topnav-dropdown > .topnav-dropdown-label .topnav-badge {
        display: inline-block;
        background: var(--schulio-primary); color: #fff;
        border-radius: 999px; padding: .05rem .45rem;
        font-size: .72rem; margin-left: auto;
    }
    .topnav .caret { display: none; }

    /* Footer address blocks stack */
    .footer-addr { gap: .75rem; }

    /* Containers tighter */
    .container { padding: 0 1rem; }
    main.container { padding-top: 1.25rem; padding-bottom: 2.5rem; }
    .form-card { padding: 1rem; }

    /* Page-header stays vertical */
    .page-header { gap: .5rem; }
    .page-header h1 { font-size: 1.4rem; }

    /* Process / school cards single column */
    .card-grid { grid-template-columns: 1fr; }
    .school-grid { grid-template-columns: 1fr; }

    /* List toolbar — filter rows full width */
    .list-toolbar .form-row { min-width: 0; width: 100%; }
    .list-toolbar .actions { width: 100%; justify-content: flex-end; }

    /* Tabs scroll horizontally */
    .tab-strip { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .tab-btn { white-space: nowrap; }

    /* Subdomain preview link wraps */
    .subdomain-preview .sys-link { max-width: 100%; word-break: break-all; }
}

/* === end mobile ============================================== */

/* --- form builder (WYSIWYG) ----------------------------------- */

.builder-toolbar {
    background: #fff; border: 1px solid #e6e8ee; border-radius: 12px;
    padding: 1rem 1.1rem; margin-bottom: 1rem;
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between;
}
.builder-add { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.builder-add .muted { margin-right: .4rem; }
.builder-tpl { display: flex; gap: .4rem; align-items: center; }

/* Palette: zwei Gruppen (Felder + Bloecke), Kachel-Look mit Drag-Affordance */
.builder-palette {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem 1.5rem;
    flex: 1 1 auto;
    min-width: 0;
}
.builder-palette-group { min-width: 0; }
.builder-palette-head {
    display: flex; align-items: baseline; gap: .6rem;
    margin-bottom: .45rem;
}
.builder-palette-title {
    font-weight: 600; color: var(--schulio-link);
    font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
}
.builder-palette-hint { font-size: .78rem; }
.builder-palette-tiles { display: flex; flex-wrap: wrap; gap: .4rem; }

.palette-tile {
    appearance: none; background: #fff; border: 1px solid #d8dde6; border-radius: 8px;
    padding: .35rem .6rem; min-width: 5.2rem;
    display: inline-flex; align-items: center; gap: .4rem;
    font: inherit; color: #1f2937; cursor: grab;
    transition: border-color .12s, background .12s, transform .08s, box-shadow .12s;
}
.palette-tile:hover { border-color: var(--schulio-link); background: #f5f8ff; }
.palette-tile:active { cursor: grabbing; transform: translateY(1px); }
.palette-tile.dragging { opacity: .5; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.palette-tile-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 5px;
    background: #eef2ff; color: var(--schulio-link);
    padding: .2rem;
    flex: 0 0 auto;
}
.palette-tile svg.palette-tile-ic { width: 1.5rem; height: 1.5rem; }
.palette-tile-lbl { font-size: .88rem; }
.palette-tile-sub {
    margin-left: auto; font-size: .72rem; padding-left: .4rem;
}
.palette-tile-layout .palette-tile-ic { background: #fef3c7; color: #92400e; }

.builder-palette-blocks .builder-palette-title { color: #047857; }
.palette-tile-block {
    border: 1px solid #a7f3d0; background: #ecfdf5;
    padding: .5rem .75rem; min-width: 10rem;
}
.palette-tile-block:hover { border-color: #059669; background: #d1fae5; }
.palette-tile-block svg.palette-tile-ic,
.palette-tile-block .palette-tile-ic {
    background: #d1fae5; color: #047857;
    width: 1.75rem; height: 1.75rem; padding: .25rem;
}
.palette-tile-block .palette-tile-lbl { font-weight: 600; }
.palette-tile.is-disabled,
.palette-tile:disabled {
    opacity: .45; cursor: not-allowed; background: #f4f5f7; border-color: #e5e7eb;
}
.palette-tile.is-disabled:hover { border-color: #e5e7eb; background: #f4f5f7; }

@media (max-width: 900px) {
    .builder-palette { grid-template-columns: 1fr; }
}

/* Preview-Drop-Hervorhebung waehrend Palette-Drag */
.builder-preview.fb-accepting-add { background: #f0f9ff; border-color: var(--schulio-link); }
.builder-preview.fb-accepting-add .fb-grid { outline: 2px dashed transparent; }
.fb-empty {
    border: 2px dashed #cbd5e1; border-radius: 10px;
    padding: 2.5rem 1rem; text-align: center; background: #fff;
    transition: border-color .12s, background .12s;
}
.fb-empty.fb-drop-into { border-color: var(--schulio-link); background: #eef6ff; }

/* Profil-Block: kompakter Header + immer sichtbare Chip-Liste */
.fb-render-block { padding: .1rem 0; }
.fb-block-head {
    display: flex; align-items: center; gap: .55rem;
    margin-bottom: .35rem;
}
.fb-block-icon {
    width: 1.6rem; height: 1.6rem; padding: .25rem;
    background: #ecfdf5; color: #047857; border-radius: 6px;
    flex: 0 0 auto;
}
.fb-block-head strong { font-size: .95rem; }
.fb-block-meta { font-size: .75rem; }

.fb-sub-chips {
    display: flex; flex-wrap: wrap; gap: .25rem;
}
.fb-sub-chip {
    display: inline-block;
    background: #fff; border: 1px solid #d1d5db; border-radius: 999px;
    padding: .1rem .5rem; font-size: .75rem; line-height: 1.5;
    color: #1f2937;
    cursor: help;
}

.fb-card.fb-layout .fb-render-block { padding-top: .15rem; }

/* Template-Kachel: farblich akzentuiert (lila), klar erkennbar als "Special" */
.palette-tile-template {
    border-color: #ddd6fe; background: #f5f3ff;
    color: #5b21b6; font-weight: 600;
}
.palette-tile-template:hover { border-color: #7c3aed; background: #ede9fe; }
.palette-tile-template svg.palette-tile-ic,
.palette-tile-template .palette-tile-ic {
    background: #ede9fe; color: #6d28d9;
}

/* Template-Dialog */
.tpl-dialog {
    border: 1px solid #e6e8ee; border-radius: 12px;
    padding: 1.4rem 1.6rem; max-width: 32rem; width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    background: #fff;
}
.tpl-dialog::backdrop { background: rgba(15, 23, 42, .35); }
.tpl-dialog-form { margin: 0; padding: 0; background: transparent; border: none; box-shadow: none; }
.tpl-dialog-form h3 { margin: 0 0 .5rem; color: var(--schulio-link); }
.tpl-dialog-form p { margin: 0 0 .5rem; }
.tpl-dialog-form .form-row { margin: 1rem 0 0; }
.tpl-dialog-form select { width: 100%; }
.tpl-dialog-form .actions {
    margin-top: 1.4rem; display: flex; gap: .5rem; justify-content: flex-end;
}

.builder {
    display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;
    align-items: start; margin-bottom: 1.5rem;
}
.builder-preview {
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px;
    padding: 1rem; min-height: 14rem;
}
.builder-preview .empty-hint { text-align: center; padding: 2rem 0; }
.builder-props {
    background: #fff; border: 1px solid #e6e8ee; border-radius: 12px;
    padding: 1.25rem; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto;
}
.builder-props h3 { margin-top: 0; color: var(--schulio-link); }
.builder-props .form-row { margin-bottom: .9rem; }
.builder-props input[type=text],
.builder-props input[type=range],
.builder-props select,
.builder-props textarea { width: 100%; padding: .45rem .55rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }
.builder-props input[type=range] { padding: 0; }
.builder-props fieldset { padding: .8rem 1rem; margin: 1rem 0; }

.fb-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .6rem; }
.fb-card {
    position: relative;
    background: #fff; border: 1px solid #e6e8ee; border-radius: 8px;
    padding: .55rem .7rem .6rem;
    cursor: grab;
    transition: border-color .12s, box-shadow .12s;
}
.fb-card:hover { border-color: #94a3b8; }
.fb-card.selected { border-color: var(--schulio-secondary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--schulio-secondary) 30%, transparent); }
.fb-card.fb-layout { background: transparent; border: 1px dashed #cbd5e1; }
.fb-card.dragging { opacity: .4; }
.fb-card.drag-target { border-color: var(--schulio-link); border-style: dashed; }
.fb-card.resizing { user-select: none; cursor: ew-resize; }
/* Group cards: visually distinct container header */
.fb-card.fb-group {
    background: #f0f9ff;
    border: 2px solid color-mix(in srgb, var(--schulio-primary) 35%, transparent);
    border-style: dashed;
    /* Group cards span full row, regardless of width slider. */
    grid-column: 1 / -1 !important;
}
.fb-card.fb-group .fb-render-group { padding: .3rem 0; }
.fb-card.fb-group .fb-group-icon { font-size: 1.1rem; color: var(--schulio-link); }
.fb-card.fb-group .fb-group-hint { font-size: .82rem; margin: .3rem 0 0; font-style: italic; }
/* The inner drop-zone of a group — the "panel" the user drags fields into. */
.fb-group-body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .6rem;
    margin: .6rem 0 0;
    padding: .5rem;
    background: rgba(255, 255, 255, .55);
    border: 2px dashed color-mix(in srgb, var(--schulio-primary) 25%, transparent);
    border-radius: 8px;
    min-height: 60px;
}
.fb-group-body.fb-drop-into {
    background: color-mix(in srgb, var(--schulio-primary) 8%, white);
    border-color: var(--schulio-link);
}
.fb-group-body-hint {
    grid-column: 1 / -1;
    text-align: center; font-style: italic; font-size: .85rem;
    padding: .75rem; opacity: .7;
    /* Wichtig: darf Mouse-Events NICHT abfangen — sonst landet dragover/drop
       am Hint statt am Group-Body und die Container-Handler greifen nie. */
    pointer-events: none;
}
.fb-group-body > .fb-card { margin: 0; }
/* Top-level grid drop-into highlight (when dragging back to top-level) */
.fb-grid.fb-drop-into {
    outline: 2px dashed color-mix(in srgb, var(--schulio-primary) 35%, transparent);
    outline-offset: 4px;
    border-radius: 8px;
}
/* Drop position indicator on individual cards (between elements) */
.fb-card { position: relative; }
.fb-card.fb-drop-before::before,
.fb-card.fb-drop-after::after {
    content: ""; position: absolute; left: -2px; right: -2px;
    height: 3px; background: var(--schulio-primary);
    border-radius: 2px; pointer-events: none; z-index: 5;
}
.fb-card.fb-drop-before::before { top: -5px; }
.fb-card.fb-drop-after::after { bottom: -5px; }
/* Fields that are members of a group: small accent stripe on the left edge */
.fb-card.fb-in-group {
    border-left: 4px solid color-mix(in srgb, var(--schulio-primary) 50%, transparent);
    margin-left: 0;
}
.fb-meta .fb-in-group-badge {
    background: color-mix(in srgb, var(--schulio-primary) 12%, transparent);
    color: var(--schulio-link);
    padding: 1px 6px; border-radius: 4px;
    font-size: .75rem; font-weight: 500;
}

body.fb-resizing, body.fb-resizing * { cursor: ew-resize !important; user-select: none; }

.span-1  { grid-column: span 1; }   .span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }   .span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }   .span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }   .span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }   .span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }  .span-12 { grid-column: span 12; }

/* Meta strip on top of card */
.fb-meta {
    display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
    margin-bottom: .4rem; font-size: .72rem; color: #64748b;
}
.fb-drag {
    cursor: grab; padding: 0 .25rem; color: #94a3b8;
    user-select: none;
}
.fb-type, .fb-cond, .fb-width {
    display: inline-block; padding: .05rem .4rem; border-radius: 999px;
    font-size: .7rem; line-height: 1.5;
    background: #f1f5f9; color: #475569;
}
.fb-cond  { background: #fef3c7; color: #854d0e; }
.fb-width { background: #e0e7ff; color: #3730a3; }
.fb-del {
    margin-left: auto;
    background: transparent; border: none; color: #94a3b8;
    font-size: 1rem; line-height: 1; cursor: pointer;
    padding: 0 .25rem; border-radius: 4px;
}
.fb-del:hover { color: #dc2626; background: #fee2e2; }

/* Actual rendered field (looks like the public form) */
.fb-render { pointer-events: none; }
.fb-render-label {
    display: block; font-size: .82rem; font-weight: 500;
    color: #334155; margin-bottom: .25rem;
}
.fb-render-label .req { color: #dc2626; }
.fb-render-help {
    display: block; color: #64748b; font-size: .75rem; margin-top: .2rem;
}
.fb-render-heading { margin: 0; color: var(--schulio-link); font-size: 1.15rem; font-weight: 600; }
.fb-render-desc { margin: 0; color: #475569; font-size: .9rem; }
.fb-render-input,
.fb-render textarea,
.fb-render select,
.fb-render input {
    width: 100%; padding: .35rem .55rem;
    border: 1px solid #d1d5db; border-radius: 6px;
    font: inherit; font-size: .85rem; background: #fff;
    color: #0f172a; pointer-events: none;
}
.fb-render textarea { resize: none; }
.fb-render-bool { font-size: .85rem; color: #334155; }
.fb-render-bool input { width: auto; }

/* Resize handle in bottom-right */
.fb-resize {
    position: absolute; right: 2px; bottom: 2px;
    width: 14px; height: 14px;
    cursor: ew-resize;
    color: #94a3b8; font-size: .8rem; line-height: 14px; text-align: center;
    user-select: none;
}
.fb-resize:hover { color: var(--schulio-link); }
.fb-card.selected .fb-resize { color: var(--schulio-link); }

@media (max-width: 900px) {
    .builder { grid-template-columns: 1fr; }
    .builder-props { position: static; max-height: none; }
}

/* --- public form rendering (12-col grid) ---------------------- */

.form-fields-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .9rem 1rem; }
.form-fields-grid .form-row { margin-bottom: 0; }
.form-fields-grid .full-row { grid-column: 1 / -1; }
.form-fields-grid h2.section-heading { grid-column: 1 / -1; margin: 1rem 0 .25rem; color: var(--schulio-link); }
.form-fields-grid p.section-description { grid-column: 1 / -1; color: #475569; margin: 0; }

/* --- field editor (legacy inline rows, kept for compat) ------- */

.field-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: .75rem;
    align-items: stretch;
    padding: .75rem;
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    margin-bottom: .6rem;
}
.field-row-handle {
    background: #f1f5f9;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #475569;
    font-weight: 600;
    font-size: .9rem;
}
.field-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .75rem;
}
.field-row-grid .form-row { margin-bottom: .6rem; }
.field-row-grid .form-row.full { grid-column: 1 / -1; }
.field-row-actions {
    display: flex; flex-direction: column; gap: .3rem;
}
#fields-list:empty + .actions::before {
    content: "Noch keine Felder. Mit „Feld hinzufügen" beginnen oder eine Vorlage anwenden.";
    color: #64748b;
    font-style: italic;
    display: block;
    padding: 1rem 0;
}

/* --- parent group link / school cards (public) ---------------- */

.tenant-parent-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 999px;
    color: #475569;
    font-size: .9rem;
    margin: 0 0 1.25rem;
}
/* Position-Varianten — gesteuert vom Branding-Editor.
   „Bündig" (.pos-left / .pos-right) = Pille per z-index ueber dem Logo,
   ohne sichtbare Luecke zwischen Topnav und Logo.
   „Mit Abstand" (.pos-left-spaced / .pos-right-spaced) = Pille zwischen
   Topnav und Logo, schiebt das Logo aktiv nach unten. */
.tenant-parent-link.pos-left-spaced  { margin: .5rem 0 .75rem 1rem; }
.tenant-parent-link.pos-right-spaced { margin: .5rem 1rem .75rem auto; display: flex; width: max-content; }

/* Overlay-Variante: absolute Position ueber dem Logo, oben links/rechts. */
.landing-area { position: relative; }
.tenant-parent-link--overlay {
    position: absolute;
    top: .65rem;
    z-index: 5;
    margin: 0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
.tenant-parent-link--overlay.pos-left  { left: 1rem; }
.tenant-parent-link--overlay.pos-right { right: 1rem; }
.tenant-parent-link a { color: var(--schulio-link); display: inline-flex; align-items: center; gap: .25rem; }
.tenant-parent-link a:hover { text-decoration: underline; }

.school-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2rem;
}
.school-card {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    border-left: 4px solid var(--card-accent, var(--schulio-primary));
}
.school-card:hover {
    border-color: var(--card-accent, var(--schulio-primary));
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .12);
}
.school-card-logo {
    width: 56px; height: 56px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #f8fafc;
    border-radius: 10px;
    color: var(--card-accent, var(--schulio-primary));
}
.school-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.school-card-logo .icon { width: 1.8rem; height: 1.8rem; }
.school-card-body { flex: 1; min-width: 0; }
.school-card-body h3 { margin: 0 0 .25rem; color: #0f172a; font-size: 1.05rem; }
.school-card-body p {
    margin: 0 0 .5rem; color: #64748b; font-size: .9rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.school-card-link {
    color: var(--card-accent, var(--schulio-primary));
    font-size: .85rem;
    display: inline-flex; align-items: center; gap: .25rem;
    font-weight: 500;
}
/* Pille in der Schul-Kachel, die meldet, ob diese Schule aktuell offene
   Anmeldeverfahren hat. Faerbung nimmt --card-accent, damit jede Schule in
   ihrer eigenen Primaerfarbe aufblitzt. */
.school-card-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    margin: 0 0 .5rem;
    padding: .15rem .55rem;
    background: color-mix(in srgb, var(--card-accent, var(--schulio-primary)) 12%, white);
    color: var(--card-accent, var(--schulio-primary));
    border: 1px solid color-mix(in srgb, var(--card-accent, var(--schulio-primary)) 30%, white);
    border-radius: 999px;
    font-size: .78rem; font-weight: 600;
}
.school-card-badge .icon { width: .9em; height: .9em; }

/* --- process list (public) ------------------------------------ */

.process-actions {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: .9rem;
}

.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .75rem;
}
.role-card {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    background: #fafbfc;
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    padding: .9rem 1.1rem;
}
.role-card.active { border-color: var(--schulio-link); background: color-mix(in srgb, var(--schulio-primary) 6%, #fff); }
.role-card.active.danger { border-color: #dc2626; background: #fef2f2; }
.role-card strong { display: inline-flex; align-items: center; gap: .35rem; }
.role-card p { margin: .25rem 0 0; font-size: .85rem; }
.role-card form { margin: 0; }
.role-card button:disabled { opacity: .5; cursor: not-allowed; }

.process-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .8rem; }
.process-list li {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.process-list li strong { font-size: 1.05rem; }
.process-list .meta { color: #64748b; font-size: .9rem; margin-top: .25rem; }

/* --- quill overrides ------------------------------------------- */

.ql-container.ql-snow { border-radius: 0 0 7px 7px; border-color: #d1d5db; min-height: 10rem; font-family: inherit; font-size: 1rem; }
.ql-toolbar.ql-snow  { border-radius: 7px 7px 0 0; border-color: #d1d5db; background: #fafbfc; }
.ql-editor { min-height: 10rem; line-height: 1.55; }
/* Headings inside Quill editor preview adopt branding colors */
.ql-editor h1 { color: var(--schulio-link); font-size: 1.7rem; font-weight: 700; margin: .6em 0 .3em; line-height: 1.2; }
.ql-editor h2 { color: var(--schulio-link); font-size: 1.3rem; font-weight: 600; margin: .8em 0 .3em; }
.ql-editor h3 { color: var(--schulio-heading); font-size: 1.05rem; font-weight: 600; margin: .8em 0 .25em; }
.ql-editor img { max-width: 100%; height: auto; border-radius: 6px; margin: .25rem 0; cursor: pointer; }
.ql-editor a { color: var(--schulio-link); text-decoration: underline; }

/* WYSIWYG-Tabelle: sichtbarer Rahmen, kompaktes Padding, bleibt fluide. */
.ql-editor table.wysiwyg-table,
.ql-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: .5rem 0;
    table-layout: fixed;
}
.ql-editor table th, .ql-editor table td {
    border: 1px solid #cbd5e1;
    padding: .35rem .5rem;
    vertical-align: top;
    word-wrap: break-word;
}
.ql-editor table th {
    background: #f1f5f9;
    font-weight: 600;
    text-align: left;
}
.cms-body table, .legal-body table {
    border-collapse: collapse;
    width: 100%;
    margin: .75rem 0;
}
.cms-body table th, .cms-body table td,
.legal-body table th, .legal-body table td {
    border: 1px solid #cbd5e1;
    padding: .4rem .55rem;
    vertical-align: top;
}
.cms-body table th, .legal-body table th { background: #f1f5f9; text-align: left; }

/* Image-Resize-Overlay: 4 Ecken-Handles um das geklickte Bild. */
.wysiwyg-img-overlay {
    position: absolute;
    pointer-events: none;
    outline: 2px dashed #2563eb;
    z-index: 1000;
    display: none;
}
.wysiwyg-img-handle {
    position: absolute;
    width: 12px; height: 12px;
    background: #2563eb;
    border: 2px solid #fff;
    border-radius: 50%;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.wysiwyg-img-handle-nw { top: -6px;    left: -6px;   cursor: nwse-resize; }
.wysiwyg-img-handle-ne { top: -6px;    right: -6px;  cursor: nesw-resize; }
.wysiwyg-img-handle-sw { bottom: -6px; left: -6px;   cursor: nesw-resize; }
.wysiwyg-img-handle-se { bottom: -6px; right: -6px;  cursor: nwse-resize; }

/* Link-picker modal */
.schulio-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .35);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.schulio-modal-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .35);
    padding: 1.5rem; max-width: 480px; width: calc(100% - 2rem);
    max-height: 80vh; display: flex; flex-direction: column;
}
.schulio-modal-card h3 { margin: 0 0 .25rem; color: var(--schulio-link); }
.schulio-modal-card .muted { font-size: .85rem; margin: 0 0 .8rem; }
.schulio-modal-card input[type=text] {
    width: 100%; padding: .55rem .7rem;
    border: 1px solid #d1d5db; border-radius: 7px;
    font: inherit;
}
.schulio-modal-card #lp-suggestions {
    list-style: none; padding: 0; margin: .6rem 0;
    overflow-y: auto; max-height: 280px;
    border: 1px solid #e6e8ee; border-radius: 7px;
}
.schulio-modal-card #lp-suggestions li {
    display: flex; justify-content: space-between; align-items: center;
    padding: .5rem .8rem;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}
.schulio-modal-card #lp-suggestions li:last-child { border-bottom: none; }
.schulio-modal-card #lp-suggestions li:hover,
.schulio-modal-card #lp-suggestions li.selected {
    background: color-mix(in srgb, var(--schulio-primary) 8%, #fff);
}
.schulio-modal-card .lp-label { font-weight: 500; color: #0f172a; }
.schulio-modal-card .lp-url { font-size: .8rem; color: #64748b; font-family: ui-monospace, monospace; }
.schulio-modal-card .actions { margin-top: 1rem; display: flex; gap: .5rem; justify-content: flex-end; }

/* --- small helpers --------------------------------------------- */

.breadcrumb { color: #64748b; font-size: .9rem; margin-bottom: .5rem; }
.breadcrumb a { color: #64748b; }
.breadcrumb a:hover { color: var(--schulio-link); }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.page-header h1 { margin: 0; }
.page-header .actions { margin-top: 0; }
.row-actions { display: flex; gap: .4rem; }

.list-toolbar {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: end;
    margin-bottom: 1rem; padding: .9rem 1rem;
    background: #fff; border: 1px solid #e6e8ee; border-radius: 10px;
}
.list-toolbar .form-row { margin: 0; min-width: 12rem; flex: 0 1 auto; }
.list-toolbar .form-row.grow { flex: 1 1 14rem; }
.list-toolbar .form-row label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.list-toolbar .actions { margin: 0; }

.data-table th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.data-table th a:hover { color: var(--schulio-link); }
.data-table .sys-link {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .82rem; color: #64748b;
    padding: .15rem .5rem; border: 1px solid #e6e8ee; border-radius: 999px;
}
.data-table .sys-link:hover { color: var(--schulio-link); border-color: var(--schulio-link); text-decoration: none; }
.data-table .sys-link::after,
.subdomain-preview .sys-link::after { content: none; }
.data-table .sys-link > .icon,
.subdomain-preview .sys-link > .icon { margin-left: .15rem; }
.data-table tr.system-row { background: #fbfbfd; }
.data-table tr.system-row td:first-child code { color: #475569; }

.subdomain-preview {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .35rem; font-size: .85rem;
}
.subdomain-preview .sys-link {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--schulio-link);
    padding: .15rem .5rem; border: 1px solid #d0dbf0; border-radius: 999px;
    background: #f5f8ff;
    text-decoration: none;
}
.subdomain-preview .sys-link:hover { background: #e9efff; }

@media (max-width: 720px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-card { padding: 1.25rem; }
    .topnav { gap: .8rem; }
    h1 { font-size: 1.55rem; }
}

/* --- icons ------------------------------------------------------ */

.icon {
    width: 1.05em; height: 1.05em;
    display: inline-block;
    vertical-align: -0.18em;
    flex-shrink: 0;
}
.btn .icon { width: 1.05em; height: 1.05em; }
.btn.small .icon { width: 1em; height: 1em; }
.icon-only {
    padding: .35rem !important;
    line-height: 0;
    aspect-ratio: 1;
    justify-content: center;
}
.icon-only .icon { width: 1.05rem; height: 1.05rem; vertical-align: middle; }
.card-icon {
    width: 1.8rem; height: 1.8rem;
    color: var(--schulio-link);
    margin-bottom: .35rem;
}

/* --- tabs ------------------------------------------------------- */

.tabs { margin: 1.5rem 0; }
.tab-strip {
    display: flex; flex-wrap: wrap; gap: .25rem;
    border-bottom: 1px solid #e6e8ee;
    margin-bottom: 1.25rem;
}
.tab-btn {
    background: transparent; border: none;
    padding: .65rem 1rem;
    font: inherit; font-weight: 500;
    color: #64748b; cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 6px 6px 0 0;
}
.tab-btn:hover { color: var(--schulio-link); background: #f8fafc; }
.tab-btn.active {
    color: var(--schulio-link);
    border-bottom-color: var(--schulio-link);
    background: transparent;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* "aus Profil"-Hinweis unter Auto-Feldern: Schloss-Icon im selben Line-Style
   wie die anderen Icons (statt Emoji), in muted-Farbe. */
.auto-key-hint {
    display: inline-flex; align-items: center; gap: .25rem;
    color: #64748b;
}
.auto-key-hint .icon { width: .9em; height: .9em; opacity: .7; }
.auto-key-hint-empty { color: #b45309; }
.auto-key-hint-empty .icon { opacity: .9; }

/* Section-Headings mit Inline-Action (z.B. "Verwalten" bei EB-Sektionen). */
.section-heading.with-action {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem;
}
.section-heading .section-action {
    font-size: .85rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--schulio-link); text-decoration: none;
    padding: .25rem .6rem; border: 1px solid #cbd5e1; border-radius: 6px;
    background: #fff;
}
.section-heading .section-action:hover {
    border-color: var(--schulio-link);
    background: color-mix(in srgb, var(--schulio-primary) 8%, white);
}
.section-heading .section-action .icon { width: 1em; height: 1em; }

/* Erziehungsberechtigte: Mode-Auswahl als 3 klickbare Karten + Person-Karten. */
.eb-mode-tiles {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 720px) { .eb-mode-tiles { grid-template-columns: 1fr; } }
.eb-mode-tile {
    position: relative;
    display: flex; flex-direction: column; gap: .25rem;
    padding: 1rem;
    border: 2px solid #e2e8f0; border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.eb-mode-tile:hover { border-color: #cbd5e1; }
.eb-mode-tile.active {
    border-color: var(--schulio-link);
    background: color-mix(in srgb, var(--schulio-primary) 6%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--schulio-primary) 18%, transparent);
}
.eb-mode-tile input[type=radio] {
    position: absolute; opacity: 0; pointer-events: none;
}
.eb-mode-icon { font-size: 1.6rem; line-height: 1; }
.eb-mode-title { font-weight: 600; color: #0f172a; }
.eb-mode-desc { font-size: .82rem; color: #64748b; }

.eb-person-card {
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e2e8f0; border-radius: 10px;
    background: #fafbfc;
}
.eb-person-card legend {
    padding: 0 .5rem; font-weight: 600; color: #0f172a;
}
.eb-shared-addr {
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--schulio-primary);
    border-radius: 10px;
    background: color-mix(in srgb, var(--schulio-primary) 4%, white);
}
.eb-shared-addr legend { color: var(--schulio-link); font-weight: 600; padding: 0 .5rem; }

/* Aktion-Leiste: erscheint einheitlich UNTER der Tabelle, links angedockt.
   Primary-Aktionen (Neue Schule, Neuer Prozess, ...) gehoeren hier rein,
   nicht in den Page-Header. */
.table-actions {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: 1rem 0;
    justify-content: flex-start;
}

/* Wizard-Schrittanzeige (Registrierungs-Wizard). */
.wizard-steps {
    list-style: none; padding: 0; margin: 0 0 1.5rem;
    display: flex; gap: .5rem; flex-wrap: wrap;
}
.wizard-steps li {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: #f1f5f9; color: #64748b;
    font-size: .9rem;
}
.wizard-steps li.current { background: var(--schulio-primary); color: #fff; font-weight: 600; }
.wizard-steps li.done    { background: #dcfce7; color: #166534; }
.wizard-steps li .num {
    display: inline-flex; width: 1.5em; height: 1.5em; border-radius: 50%;
    background: rgba(255,255,255,.25); align-items: center; justify-content: center;
    font-weight: 700;
}
.wizard-steps li.todo    .num { background: #e2e8f0; color: #475569; }
.wizard-steps li.done    .num { background: #bbf7d0; color: #166534; }

/* Plattform-Root Hero (wenn kein Tenant aufgeloest wurde). */
.platform-hero {
    max-width: 540px; margin: 3rem auto; text-align: center;
}
.platform-hero-logo { max-width: 320px; width: 100%; height: auto; }
.platform-hero-tagline {
    margin: 1.25rem 0 .5rem; font-size: 1.15rem; color: #0f172a;
}
.platform-hero-note { color: #64748b; }

/* Footer-Navigation aus dem Menue-Editor (Place=Footer). Horizontale
   Linkleiste ueber den Pflicht-Links Impressum/AGB/Datenschutz. */
.footer-nav {
    display: flex; flex-wrap: wrap; gap: 1.2rem;
    margin: 1rem 0 .5rem;
    font-size: .9rem;
}
.footer-nav a { color: inherit; text-decoration: none; opacity: .85; }
.footer-nav a:hover { opacity: 1; text-decoration: underline; }

/* ===== Branding-CI Live-Preview =================================
   Zwei-Spalten-Layout im CI-Tab: links Eingaben, rechts Vorschau.
   Bei schmalem Viewport rutscht die Vorschau unter die Eingaben.
*/
.branding-ci-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1.5rem;
}
@media (max-width: 980px) {
    .branding-ci-grid { grid-template-columns: 1fr; }
}
.branding-ci-form { margin: 0; }

.branding-ci-preview {
    position: sticky; top: 1rem;
    align-self: flex-start;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    display: flex; flex-direction: column; gap: .85rem;
    font-size: .9rem;
}
.branding-ci-preview .preview-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: #64748b; font-weight: 700;
}
.branding-ci-preview .preview-topnav {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .75rem;
    border-radius: 8px;
    /* Farben werden vom JS gesetzt */
}
.branding-ci-preview .preview-logo-dot {
    width: 1.4em; height: 1.4em; border-radius: 50%;
    display: inline-block;
    border: 2px solid rgba(255,255,255,.6);
}
.branding-ci-preview .preview-topnav-title { font-weight: 700; }
.branding-ci-preview .preview-topnav-spacer { flex: 1 1 auto; }
.branding-ci-preview .preview-topnav-link {
    font-size: .82rem; opacity: .9;
}

.branding-ci-preview .preview-section {
    padding: .5rem .25rem 0;
}
.branding-ci-preview .preview-heading {
    font-size: 1.1rem; font-weight: 700; margin-bottom: .25rem;
}
.branding-ci-preview .preview-body {
    margin: 0; color: #334155; font-size: .88rem; line-height: 1.4;
}
.branding-ci-preview .preview-body a {
    font-weight: 600; text-decoration: underline;
}

.branding-ci-preview .preview-row {
    display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.branding-ci-preview .preview-row .btn {
    padding: .4rem .7rem; font-size: .82rem;
    border: 1px solid transparent;
}
.branding-ci-preview .preview-row .btn.ghost {
    background: transparent; color: #475569; border-color: #cbd5e1;
}
.branding-ci-preview .preview-row .pill {
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .78rem; font-weight: 600;
}

.branding-ci-preview .preview-swatches {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem;
    margin-top: .25rem;
}
.branding-ci-preview .swatch {
    display: flex; flex-direction: column; gap: .25rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: .4rem;
    font-size: .75rem;
}
.branding-ci-preview .swatch .swatch-chip {
    height: 44px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem;
    border: 1px solid rgba(0,0,0,.08);
}
.branding-ci-preview .swatch .swatch-meta {
    display: flex; flex-direction: column;
    line-height: 1.2;
}
.branding-ci-preview .swatch code {
    font-size: .7rem; color: #475569;
}


/* Footer address block */
.footer-addr {
    display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
    margin-bottom: .75rem;
}
.footer-addr address { font-style: normal; font-size: .9rem; line-height: 1.5; color: var(--schulio-on-primary-muted); }
.footer-addr strong { color: var(--schulio-on-primary); }
.footer-parent { font-size: .9rem; color: var(--schulio-on-primary-muted); margin: .5rem 0; display: inline-flex; align-items: center; gap: .35rem; }
.footer-parent a { color: var(--schulio-on-primary); font-weight: 500; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .85rem; margin-top: .5rem; }
.footer-legal a { color: var(--schulio-on-primary-muted); }
.footer-legal a:hover { color: var(--schulio-on-primary); }
/* Copyright + "betrieben mit Schulio"-Link: gleiche Farbtoene wie die
   legal-Links daneben, damit der Footer als ein Block wirkt und nicht
   die Brand-Farbe leakt. */
.footer-credit { color: var(--schulio-on-primary-muted); }
.footer-credit-link {
    color: var(--schulio-on-primary-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.footer-credit-link:hover { color: var(--schulio-on-primary); }

/* About-Page: schmale zentrierte Karte. Bewusst minimal — Logo, Name,
   Version mit Kanal-Badge, Build-Datum, Copyright, kurzer Hinweis. */
.about-card {
    max-width: 32rem;
    margin: 3rem auto;
    padding: 2.2rem 2rem;
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.about-mark {
    width: 72px; height: 72px;
    margin: 0 auto .5rem;
    display: block;
}
.about-name {
    margin: 0 0 .25rem;
    font-size: 1.9rem;
    color: var(--schulio-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.about-tagline {
    margin: 0 0 1.6rem;
    color: #64748b;
    font-size: .95rem;
}
.about-version {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    background: #f8fafc;
    border: 1px solid #e6e8ee;
    border-radius: 999px;
    font-size: 1rem;
}
.about-version strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.about-builddate {
    margin: .55rem 0 0;
    color: #64748b;
    font-size: .85rem;
}
.about-copyright {
    margin: 1.6rem 0 0;
    color: #475569;
    font-size: .85rem;
}
.about-note {
    margin: 1.2rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid #f1f5f9;
    color: #94a3b8;
    font-size: .8rem;
    line-height: 1.5;
}

.legal-body { max-width: 760px; }
.legal-body h2 { margin-top: 1.5rem; }

/* === Identity UI (Bootstrap) restyling ========================= */
/* The default Identity scaffold ships Bootstrap markup. We map its
   classes onto the Schulio look without scaffolding every page. */

main.container > .row { display: block; }
main.container > .row > [class*=" col-"],
main.container > .row > [class^="col-"] {
    width: 100%; max-width: 460px; margin: 0 auto; padding: 0;
}

/* Wrap auth forms into a card */
form#account, form#login-form, form#register-form,
form[action*="/Account/Login"], form[action*="/Account/Register"],
form[action*="/Account/ForgotPassword"], form[action*="/Account/ResetPassword"],
form[action*="/Account/Manage"] {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 12px;
    padding: 1.75rem 2rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

/* Floating labels → normal stacked labels */
.form-floating { position: static; margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.form-floating > label {
    position: static !important;
    transform: none !important;
    padding: 0 !important;
    height: auto !important;
    pointer-events: auto !important;
    color: #334155;
    font-weight: 500;
    font-size: .9rem;
    background: transparent !important;
    order: -1;
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext { height: auto !important; padding: .55rem .7rem !important; }

/* Generic Bootstrap inputs */
.form-control, .form-select {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font: inherit;
    background: #fff;
    color: #0f172a;
    transition: border-color .15s, box-shadow .15s;
    line-height: 1.4;
}
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--schulio-link);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--schulio-primary) 18%, transparent);
}
.form-label { display: block; margin-bottom: .35rem; color: #334155; font-weight: 500; font-size: .9rem; }
.form-text  { color: #64748b; font-size: .82rem; margin-top: .25rem; display: block; }

/* Checkboxes (RememberMe etc.) */
.form-check { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 1rem; padding: 0; }
.form-check-input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--schulio-link); }
.form-check-label { color: #334155; font-size: .92rem; }
.checkbox { margin: .25rem 0 1rem; }
.checkbox > label { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; color: #334155; }

/* Bootstrap buttons → Schulio buttons */
.btn-primary, .btn-lg.btn-primary, button[type=submit].btn {
    background: var(--schulio-primary) !important;
    border: 1px solid var(--schulio-primary) !important;
    color: var(--schulio-on-primary) !important;
    padding: .6rem 1.1rem !important;
    border-radius: 7px !important;
    font-weight: 500 !important;
    width: auto !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn-primary:hover {
    background: var(--schulio-secondary) !important;
    border-color: var(--schulio-secondary) !important;
    color: var(--schulio-on-secondary) !important;
}
.btn-link { color: var(--schulio-link); text-decoration: none; }
.btn-link:hover { color: var(--schulio-link); text-decoration: underline; filter: brightness(.9); }

/* Submit buttons that span full width in Identity defaults */
.w-100 { width: 100% !important; }
form#account button[type=submit].w-100,
form#login-form button[type=submit].w-100,
form#register-form button[type=submit].w-100 {
    margin-top: .5rem;
}

/* Validation messages */
.text-danger, .field-validation-error { color: #dc2626 !important; font-size: .82rem; }
[data-valmsg-summary="true"]:not(:empty),
.validation-summary-errors:not(:empty) {
    background: #fef2f2;
    color: #991b1b;
    padding: .8rem 1rem;
    border-radius: 8px;
    border: 1px solid #fecaca;
    margin-bottom: 1.25rem;
}
/* Leere Validation-Summaries verstecken — sonst leere Kacheln auf z.B.
   Identity/Konto-Forms (validation-summary-valid Class kommt von der
   Tag-Helper-Output wenn keine Fehler vorliegen). */
.validation-summary-valid { display: none; }
[data-valmsg-summary="true"] ul, .validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }

/* Section dividers (h2 inside auth forms) */
form h1, form > h1, main.container > h1 {
    margin-bottom: 1.25rem;
}
main.container > h2:not(:first-child),
form h2, form > h2 {
    margin-top: 0;
    font-size: 1.15rem;
    color: var(--schulio-link);
}

/* "Or" divider + external providers (if any) */
hr { border: none; border-top: 1px solid #e6e8ee; margin: 1.5rem 0; }

/* Manage area layout (Konto-Verwaltung) */
.manage-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: start;
}
.manage-sidebar {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    padding: .6rem;
}
.manage-content {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 12px;
    padding: 1.75rem 2rem;
    min-width: 0;
}
.manage-content h3,
.manage-content h2 { margin-top: 0; color: var(--schulio-link); }
.manage-content form { background: transparent; border: none; padding: 0; box-shadow: none; }
@media (max-width: 720px) {
    .manage-grid { grid-template-columns: 1fr; gap: 1rem; }
    .manage-content { padding: 1.25rem; }
}

/* Manage / left side nav (Konto-Verwaltung) */
.nav-pills { display: flex; flex-direction: column; gap: .2rem; padding: 0; margin: 0 0 1.5rem; list-style: none; }
.nav-pills .nav-link {
    display: block;
    padding: .5rem .8rem;
    border-radius: 7px;
    color: #334155;
    text-decoration: none;
    font-weight: 500;
    font-size: .92rem;
}
.nav-pills .nav-link:hover { background: color-mix(in srgb, var(--schulio-secondary) 10%, white); color: var(--schulio-link); text-decoration: none; }
.nav-pills .nav-link.active {
    background: var(--schulio-secondary);
    color: var(--schulio-on-secondary);
}

/* Tight spacing for stacked rows in Manage */
main.container > .row > .col-md-3,
main.container > .row > .col-md-9 {
    max-width: none;
}
@media (min-width: 900px) {
    main.container > .row:has(> .col-md-3) {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 2rem;
        max-width: 960px;
        margin: 0 auto;
    }
}

/* External logins list */
.btn-outline-primary, .btn-outline-secondary {
    background: #fff;
    color: #334155;
    border: 1px solid #d1d5db;
    padding: .55rem 1rem;
    border-radius: 7px;
    font: inherit;
    cursor: pointer;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover {
    background: #f8fafc; border-color: #cbd5e1; color: #0f172a;
}

/* ===== Topnav-Dropdown ===== */
.topnav-dropdown { position: relative; display: inline-block; }
/* Dropdown-Label im Topnav muss exakt wie ein normaler <a>-Eintrag wirken:
   gleiche Farbe, gleiche Font-Größe, gleicher Hover. Sonst „sticht" Konto
   optisch raus, weil es als <span> gerendert wird. */
.topnav-dropdown > a,
.topnav-dropdown > .topnav-dropdown-label {
    /* align-items: baseline lässt den Konto-Text exakt auf der gleichen Linie
       liegen wie die Geschwister-Links — die Badge richtet sich an dieser
       Baseline aus und ragt nur nach oben/unten in Pillen-Form. */
    display: inline-flex; align-items: baseline; gap: .35rem;
    color: var(--schulio-on-primary-muted); font-weight: 500; font-size: .95rem;
    cursor: pointer;
    line-height: 1.4;
}
.topnav-dropdown > a:hover,
.topnav-dropdown > .topnav-dropdown-label:hover { color: var(--schulio-on-primary); }
.topnav-dropdown .caret { font-size: .6em; opacity: .55; margin-left: .15rem; }
.topnav-dropdown-menu {
    position: absolute; left: 0; top: 100%;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    padding: .35rem 0;
    display: none;
    z-index: 1000;
}
.topnav-dropdown:hover .topnav-dropdown-menu,
.topnav-dropdown:focus-within .topnav-dropdown-menu { display: block; }
.topnav-dropdown-menu a {
    display: block; padding: .45rem .85rem;
    color: #0f172a; text-decoration: none;
    font-size: .95rem;
}
.topnav-dropdown-menu a:hover { background: #f1f5f9; color: var(--schulio-link); }
/* Dropdown items can be mixed link + form (e.g. Logout) — make them visually
   consistent so the form-button looks like another link. */
.topnav-dropdown-menu a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.topnav-dropdown-menu .dropdown-form { margin: 0; padding: 0; }
.topnav-dropdown-menu .dropdown-link {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer;
    padding: .45rem .85rem; font: inherit; color: #0f172a;
}
.topnav-dropdown-menu .dropdown-link:hover { background: #f1f5f9; color: var(--schulio-link); }
.topnav-dropdown.account-dropdown > .topnav-dropdown-menu { right: 0; left: auto; }

/* Konto-Pille im Header: dezent abgesetzt mit weichem Hintergrund + Avatar-
   Icon. Macht den persoenlichen Bereich auf den ersten Blick erkennbar,
   ohne das uebrige Topnav-Bild zu erschlagen. */
.topnav-dropdown.account-dropdown > .topnav-dropdown-label {
    align-items: center;
    gap: .4rem;
    padding: .25rem .55rem .25rem .4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--schulio-on-primary) 10%, transparent);
    transition: background .12s;
}
.topnav-dropdown.account-dropdown > .topnav-dropdown-label:hover {
    background: color-mix(in srgb, var(--schulio-on-primary) 18%, transparent);
}
.account-icon {
    width: 1.2rem; height: 1.2rem;
    flex: 0 0 auto;
    opacity: .9;
}
@media (max-width: 720px) {
    /* Auf Mobile sind alle Topnav-Eintraege ohnehin volle Breite — die Pille
       wuerde dort wie ein doppeltes Highlight wirken. Wir blenden das
       Hintergrund-Tinting aus und lassen nur das Icon stehen. */
    .topnav-dropdown.account-dropdown > .topnav-dropdown-label {
        background: transparent !important;
        padding: .9rem 1.25rem !important;
        border-radius: 0 !important;
    }
    .account-icon { width: 1.3rem; height: 1.3rem; }
}
/* Notification badge — small pill aligned to the text baseline of its sibling.
   Padding-only (no fixed height) so the badge never pushes the line-height of
   the wrapping topnav-label past a plain link's. */
.topnav-badge {
    display: inline-block;
    padding: .05em .55em;
    border-radius: 999px;
    background: var(--schulio-accent);
    color: #1f2937;
    font-size: .72rem; font-weight: 700;
    line-height: 1.3;
    vertical-align: baseline;
}
.topnav-badge.inline { background: color-mix(in srgb, var(--schulio-primary) 18%, transparent); color: var(--schulio-link); }
/* Topnav-Link mit Badge daneben — Layout-Glue, damit der Badge auf
   gleicher Linie liegt und nicht zu weit weg vom Text wirkt. */
.topnav-with-badge { display: inline-flex; align-items: center; gap: .4rem; }

/* ===== Einheitliche Table-Toolbar =================================
   Eine Toolbar pro Liste: Suchfeld | Sort | Filter-Toggle | Apply.
   Filter-Felder leben in einem ausklappbaren Panel darunter; angewandte
   Filter erscheinen als Chips mit X.
*/
.table-toolbar-form {
    margin: 1rem 0;
}
.table-toolbar {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem;
    padding: .5rem; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 10px;
}
.table-toolbar {
    /* Tighter gap zwischen Controls — sah vorher zu weit auseinander aus
       und das Suchfeld wurde dadurch unnoetig stark gequetscht. */
    gap: .35rem !important;
}
.table-toolbar .toolbar-search,
.table-toolbar .toolbar-sort,
.table-toolbar .toolbar-count,
.table-toolbar .toolbar-inline-zone .form-row > select,
.table-toolbar .toolbar-inline-zone .form-row > input,
.table-toolbar .btn {
    /* Alle Toolbar-Elemente auf exakt gleicher Hoehe — Buttons haben kein
       browser-implicit Baseline-Padding, Inputs/Selects schon. Wir fixen das
       mit explizitem height + box-sizing, sonst wirkt das Suchfeld groesser
       als die Buttons daneben. */
    height: 2.25rem;
    line-height: 1.2;
    box-sizing: border-box;
}
/* Count-Slot anstelle der Suche (Menus): nimmt linken Space wie die Suche,
   aber nur Text – kein Border, kein Background. */
.table-toolbar .toolbar-count {
    flex: 1 1 12rem;
    min-width: 8rem;
    display: inline-flex; align-items: center;
    padding: 0 .25rem;
    color: #64748b;
}
/* Browser-Default-Clear-Buttons in type=search verstecken — Edge/Chrome
   zeigen sonst rechts im Suchfeld ein kleines Icon, das wie ein Mail-
   Symbol aussieht und den Placeholder ueberlappt. */
.table-toolbar .toolbar-search::-webkit-search-cancel-button,
.table-toolbar .toolbar-search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.table-toolbar .toolbar-search::-ms-clear,
.table-toolbar .toolbar-search::-ms-reveal { display: none; width: 0; height: 0; }
.table-toolbar .toolbar-search {
    flex: 1 1 12rem;            /* darf wachsen, hat aber sinnvolle Min-Breite */
    min-width: 11rem;           /* damit der Placeholder nie abgeschnitten wird */
    padding: 0 .75rem;
    border: 1px solid #cbd5e1; border-radius: 7px;
    background: #fff;
    font: inherit;
    text-overflow: ellipsis;
}
.table-toolbar .toolbar-sort {
    flex: 0 1 auto;
    /* Sort steht rechts neben dem Apply-Button - Apply hat order:11,
       Sort order:10, der Rest default 0. Damit ist die visuelle Folge
       immer: ... Filter | Sort | Anwenden. */
    order: 10;
    padding: 0 1.6rem 0 .6rem;  /* rechts Platz fuer den nativen <select>-Pfeil */
    border: 1px solid #cbd5e1; border-radius: 7px;
    background: #fff;
    font: inherit;
    /* Die Labels sind jetzt "Feldname: A bis Z" — laenger als vorher.
       Etwas mehr Breite spendiert, damit nichts abgeschnitten wird. */
    max-width: 14rem;
}
/* Inline-Form-Row-Controls in der Toolbar: globale "height: 2.5rem"-Regel
   fuer .form-row input/select kollidiert sonst mit den 2.25rem hier. */
.table-toolbar .toolbar-inline-zone .form-row > select,
.table-toolbar .toolbar-inline-zone .form-row > input {
    padding: 0 .55rem;
}
.table-toolbar .toolbar-filter-trigger {
    position: relative;
    flex: 0 0 auto;
    white-space: nowrap;
}
/* Inline-Zone: das JS hebt Filter-Rows aus dem Panel hierher solange Platz da
   ist. Im Panel sehen Filter wie normale form-rows aus (Label oben, Select
   drunter); hier sind sie auf eine kompakte Inline-Pille reduziert. */
.table-toolbar .toolbar-inline-zone {
    display: flex; flex: 0 1 auto; flex-wrap: nowrap;
    align-items: center; gap: .4rem;
    min-width: 0;
}
.table-toolbar .toolbar-inline-zone .form-row {
    display: flex; flex-direction: row; align-items: center;
    margin: 0; gap: 0;
}
.table-toolbar .toolbar-inline-zone .form-row > label { display: none; }
.table-toolbar .toolbar-inline-zone .form-row > select {
    padding: 0 1.5rem 0 .5rem;   /* Pfeil-Slot rechts */
    border: 1px solid #cbd5e1; border-radius: 7px;
    background: #fff; font: inherit;
    max-width: 11rem;            /* enger als vorher (180px), Text wird trotzdem
                                    nicht abgeschnitten weil Selects nur den
                                    optionalen Text-Header anzeigen */
    text-overflow: ellipsis;
}
.table-toolbar .toolbar-filter-trigger .filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4em; height: 1.4em; padding: 0 .35em;
    margin-left: .35rem;
    border-radius: 999px;
    background: var(--schulio-primary); color: #fff;
    font-size: .72rem; font-weight: 700;
}
.table-toolbar .toolbar-apply { flex: 0 0 auto; order: 11; }
/* Bei sehr engem Viewport: Sort wird kleiner, Filter-Trigger geht aufs Icon */
@media (max-width: 720px) {
    .table-toolbar .toolbar-sort { max-width: 130px; }
    .table-toolbar .toolbar-filter-trigger span:not(.filter-badge) { display: none; }
}

/* Aktive Filter als Chips zwischen Toolbar und Tabelle */
.table-active-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    /* Symmetrische Margin oben/unten — vorher .6/.25, das wirkte gequetscht
       Richtung Tabelle. */
    margin: .75rem 0;
    font-size: .88rem;
    line-height: 1.2;
}
.table-active-filters .chip {
    display: inline-flex; align-items: center; gap: .35rem;
    /* Symmetrische vertikale Hoehe (.3rem oben/unten); ohne line-height: 1
       wirkt die Pille durch Browser-Default-Leading visuell unten dicker. */
    padding: .3rem .35rem .3rem .65rem;
    line-height: 1;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1e3a8a;
}
.table-active-filters .chip .chip-label { color: #475569; line-height: 1; }
.table-active-filters .chip .chip-value { font-weight: 500; line-height: 1; }
.table-active-filters .chip .chip-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem;
    border-radius: 999px;
    color: #475569;
    text-decoration: none;
    line-height: 1;
    font-size: 1rem;
}
.table-active-filters .chip .chip-remove:hover { background: #dbeafe; color: #1e40af; }
.table-active-filters .reset-all {
    margin-left: .35rem;
    color: #64748b; text-decoration: none;
    font-size: .85rem;
}
.table-active-filters .reset-all:hover { color: var(--schulio-link); text-decoration: underline; }

/* Filter-Panel: ausklappbar unter der Toolbar */
.table-filter-panel {
    display: none;
    background: #fff;
    border: 1px solid #e2e8f0; border-top: none;
    border-radius: 0 0 10px 10px;
    margin-top: -1px;
    padding: 1rem;
}
.table-filter-panel.open { display: block; }
.table-filter-panel .form-grid { margin: 0; }
.table-filter-panel .panel-actions {
    margin-top: .75rem;
    display: flex; gap: .5rem; justify-content: flex-end;
}

/* Server-side Pagination footer fuer Admin-Listen. */
.pagination {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    padding: .75rem 0 0;
    border-top: 1px solid #e2e8f0;
    margin-top: .5rem;
    font-size: .9rem;
}
.pagination.empty { justify-content: center; border-top: none; padding-top: 1.5rem; }
.pagination-summary { white-space: nowrap; }
.pagination-controls { display: flex; align-items: center; gap: .5rem; }
.pagination-pages { white-space: nowrap; min-width: 100px; text-align: center; color: #475569; }
.pagination-size { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.pagination .btn.disabled { pointer-events: none; opacity: .4; }

/* Banner auf der Teilnehmen-Page (Mode 3): bestehende Anmeldungen der
   eigenen Kinder zum Weiter-Ausfuellen. */
.continue-existing {
    background: color-mix(in srgb, var(--schulio-primary) 8%, white);
    border-left: 3px solid var(--schulio-primary);
    border-radius: 0 6px 6px 0;
    padding: .65rem .9rem;
    margin: 0 0 1rem;
    font-size: .92rem;
}
.continue-existing strong { display: block; margin-bottom: .45rem; }
.continue-existing-list { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Suggested-process cards on /eltern/anmeldungen — only shown on platform root */
.suggestion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: .5rem;
}
.suggestion-card {
    display: block;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s, transform .12s, box-shadow .12s;
}
.suggestion-card:hover {
    border-color: var(--schulio-link);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.suggestion-card-meta {
    display: flex; gap: .5rem; align-items: center;
    font-size: .82rem; margin-bottom: .35rem;
}
.suggestion-card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.suggestion-card-deadline { margin: .35rem 0; font-size: .85rem; }
.suggestion-card-cta {
    display: inline-block;
    margin-top: .5rem;
    font-size: .9rem; font-weight: 500;
    color: var(--schulio-link);
}

/* DSGVO retention chooser — large radio cards that make the options legible
   and the consequence clear. */
.retention-option {
    display: flex; align-items: flex-start; gap: .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: .75rem 1rem;
    margin: .5rem 0;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.retention-option:hover { background: #f8fafc; }
.retention-option input[type=radio] { margin-top: .3rem; flex-shrink: 0; }
.retention-option strong { display: block; margin-bottom: .15rem; }
.retention-option p { margin: 0; font-size: .88rem; }
.retention-option.danger { border-color: color-mix(in srgb, #dc2626 30%, transparent); }
.retention-option.danger strong { color: #b91c1c; }
.retention-option input[type=radio]:checked + div { font-weight: 500; }

/* Homepage banner that nudges the user toward unfinished registrations. */
.user-activity-banner {
    display: flex; align-items: center; gap: .85rem;
    padding: .75rem 1rem;
    margin: 0 0 1.25rem;
    background: color-mix(in srgb, var(--schulio-accent) 16%, white);
    border-left: 4px solid var(--schulio-accent);
    border-radius: 0 8px 8px 0;
}
.user-activity-banner .icon { width: 22px; height: 22px; color: #92400e; flex-shrink: 0; }
.user-activity-banner > div { flex: 1; }
.user-activity-banner strong { color: #111827; }
.user-activity-banner .btn { flex-shrink: 0; }

/* ===== Tenant-Tabs (für Editor-Seiten, die pro Tenant arbeiten) ===== */
.tenant-tabs {
    display: flex; flex-wrap: wrap; gap: .25rem;
    margin: .5rem 0 0;
    border-bottom: 2px solid #e2e8f0;
}
.tenant-tab {
    display: inline-flex; align-items: center;
    padding: .55rem 1rem;
    color: #475569; text-decoration: none;
    font-size: .92rem; font-weight: 500;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: -2px;
    transition: background-color .12s;
}
.tenant-tab:hover { background: #f1f5f9; color: var(--schulio-link); }
.tenant-tab.active {
    background: #fff;
    color: var(--schulio-link);
    border-color: #e2e8f0;
    border-bottom: 2px solid #fff;
    font-weight: 600;
}
.active-tenant-banner {
    display: flex; align-items: center; gap: .5rem;
    background: #eff6ff; border-left: 3px solid var(--schulio-primary);
    padding: .6rem .9rem; margin: 1rem 0 .25rem;
    font-size: .95rem;
    border-radius: 0 6px 6px 0;
}
.active-tenant-banner .icon { color: var(--schulio-link); }

/* ===== Menu-Editor ===== */
.menu-editor { margin-top: 1rem; }
.menu-editor h3 { margin: 1.25rem 0 .5rem; font-size: 1rem; color: #475569; }
.menu-system { list-style: none; padding: 0; margin: 0; }
.menu-system .locked {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; margin: .25rem 0;
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px;
    color: #64748b; font-size: .92rem;
}
.menu-system .locked .icon { width: 14px; height: 14px; flex-shrink: 0; }

.menu-tree { list-style: none; padding: 0; margin: .5rem 0; min-height: 1.5rem; }
.menu-tree:empty::before {
    content: "Keine Einträge — füge unten welche hinzu.";
    color: #94a3b8; font-style: italic; font-size: .9rem;
    display: block; padding: .75rem; border: 1px dashed #e2e8f0; border-radius: 8px;
}
.menu-node {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    margin: .35rem 0; padding: .5rem;
    position: relative;
}
.menu-node.dragging { opacity: .5; }
/* Drop-Indikator: dicker farbiger Strich oberhalb (drop-before) bzw. unterhalb (drop-after) */
.menu-node.drop-before::before,
.menu-node.drop-after::after {
    content: ""; position: absolute; left: 0; right: 0;
    height: 3px; background: var(--schulio-primary);
    border-radius: 2px;
    pointer-events: none;
}
.menu-node.drop-before::before { top: -5px; }
.menu-node.drop-after::after { bottom: -5px; }
.menu-node-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.menu-node-head .drag-handle {
    cursor: grab; color: #94a3b8; padding: 0 .3rem; user-select: none;
    font-size: 1.2rem; line-height: 1;
}
.menu-node-head .drag-handle:active { cursor: grabbing; }
.menu-node-head .menu-label { flex: 1 1 180px; min-width: 120px; }
.menu-node-head .menu-target,
.menu-node-head .menu-target-value-wrap select,
.menu-node-head .menu-target-value-wrap input { font-size: .92rem; padding: .3rem .45rem; }
.menu-node-head .menu-newtab { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; color: #475569; }
.menu-children {
    list-style: none; padding: 0 0 0 1.5rem; margin: .4rem 0 0;
    border-left: 2px dashed #e2e8f0;
}
.menu-children:empty { display: none; }
.menu-children .menu-node { background: #f8fafc; }

/* Transparente Gruppe im Teilnehmen-Formular: kein Rahmen, kein margin,
   nur logischer Block fuer gemeinsames Conditional-Show. */
.form-group.form-group-transparent {
    border: none; padding: 0; margin: 0;
    background: transparent;
}

/* Builder-Vorschau: kleine Pille "transparent" am Group-Header. */
.fb-group-flag {
    display: inline-block;
    background: #fef3c7; color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 999px;
    padding: .05rem .5rem;
    font-size: .68rem; font-weight: 600;
    letter-spacing: .03em;
    margin-left: .4rem;
    text-transform: uppercase;
    vertical-align: middle;
}

/* === Tenant-Picker ============================================= *
 * Ersetzt grosse vorbefuellte <select>-Dropdowns durch einen Trigger
 * + Dialog mit Such-Eingabe und seitenweisem Nachladen. Verwendet in
 * Listen-Toolbars (Schools/Processes/Students Index) und bald auch
 * in Create/Edit-Formularen.
 * ================================================================ */
.tenant-picker {
    display: inline-block;
    position: relative;
    min-width: 12rem;
    width: 100%;            /* full column width im form-grid Kontext */
    box-sizing: border-box;
}
/* In der Toolbar-Inline-Zone Filter-Pillen soll der Picker kompakt bleiben
   und nicht 100% der Toolbar einnehmen. Limitiert auf 16rem mit Ellipsis. */
.table-toolbar .toolbar-inline-zone .tenant-picker {
    /* Picker laeuft hier neben den Toolbar-Selects (max-width 11rem) und der
       Suche (flex 1 1 12rem). Damit er nicht "schrumpelt" wenn der Label
       kurz ist, geben wir ihm dieselbe Mindestbreite wie die Selects und
       lassen ihn bis 16rem wachsen (Ellipsis greift dann). */
    display: inline-flex;
    min-width: 11rem;
    max-width: 16rem;
    flex: 0 1 auto;
}
.table-toolbar .toolbar-inline-zone .tenant-picker .tenant-picker-trigger {
    height: 2.25rem;          /* Toolbar-Hoehe, NICHT die 2.5rem-Form-Variante */
}
.tenant-picker .tenant-picker-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.tenant-picker-trigger {
    display: inline-flex; align-items: center; gap: .45rem;
    width: 100%;
    /* padding-right gross genug fuer den absolut positionierten Clear-X,
       der ueber dem rechten Rand des Triggers sitzt. */
    padding: 0 2rem 0 .65rem;
    height: 2.25rem;
    border: 1px solid #d1d5db; border-radius: 7px;
    background: #fff;
    font: inherit;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    line-height: 1.2;
    transition: border-color .12s, background .12s;
}
.tenant-picker-trigger:hover { border-color: var(--schulio-secondary); }
/* Im Formular-Kontext (form-row) sind Inputs/Selects 2.5rem hoch. Picker
   muss bündig sein, sonst springt die Zeile. Außerhalb (z.B. Toolbar) bleibt
   2.25rem die Default-Höhe. Wir nehmen auch den gleichen Border-Style wie
   die anderen Form-Inputs. */
.form-row > .tenant-picker .tenant-picker-trigger,
.form-grid .tenant-picker .tenant-picker-trigger {
    height: 2.5rem;
    padding: 0 2rem 0 .7rem;
}
/* Chevron rechts im Trigger als Dialog-Affordance — analog zur Select-Pfeil-
   Konvention. Absolut positioniert ueber dem Padding-Slot rechts; wird vom
   Clear-X verdeckt sobald eine Auswahl getroffen ist (siehe :has-Regel unten). */
.tenant-picker-trigger-ic {
    position: absolute;
    right: .55rem; top: 50%;
    transform: translateY(-50%);
    width: .95rem; height: .95rem;
    color: #64748b;
    pointer-events: none;
    z-index: 0;
}
.tenant-picker:has(.tenant-picker-clear:not([hidden])) .tenant-picker-trigger-ic { display: none; }
.tenant-picker-label {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Clear-X im Input-Rahmen, NICHT als Geschwister nach dem Trigger
   (das wuerde bei langem Label umbrechen). absolute zum .tenant-picker
   Wrapper, mittig auf der Achse. */
.tenant-picker-clear {
    appearance: none; background: transparent; border: none; padding: 3px;
    border-radius: 4px; cursor: pointer; color: #64748b;
    position: absolute;
    right: .3rem; top: 50%;
    transform: translateY(-50%);
    display: inline-flex; align-items: center;
    z-index: 1;
}
.tenant-picker-clear:hover { background: #f1f5f9; color: #0f172a; }
.tenant-picker-clear .icon { width: .85rem; height: .85rem; }
.tenant-picker-clear[hidden] { display: none !important; }

.tenant-picker-dialog {
    border: 1px solid #e6e8ee; border-radius: 12px;
    /* !important schlaegt UA-Default 'dialog { padding: 1em }' garantiert,
       falls Specificity-Konflikte mit anderen dialog-Rules entstehen. */
    padding: 0 !important;
    max-width: 32rem; width: 92%;
    background: #fff;
    box-shadow: 0 12px 40px rgba(15,23,42,.18);
    overflow: hidden;
}
.tenant-picker-dialog::backdrop { background: rgba(15, 23, 42, .35); }
.tenant-picker-dialog-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem .5rem;
}
.tenant-picker-dialog-head h3 { margin: 0; }
.tenant-picker-search {
    /* Search-Icon links neben dem Input — Position absolut, das Input bekommt
       links Platz mit padding-left. Konsistent zur globalen Such-Konvention. */
    position: relative;
    padding: .25rem 1.2rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.tenant-picker-search-ic {
    position: absolute;
    left: calc(1.2rem + .6rem); top: 50%;
    transform: translateY(calc(-50% - .375rem));   /* halbe padding-bottom Korrektur */
    width: 1rem; height: 1rem;
    color: #64748b;
    pointer-events: none;
    z-index: 1;
}
.tenant-picker-search input { padding-left: 2.1rem !important; }
.tenant-picker-search input {
    width: 100%;
    border: 1px solid #d1d5db; border-radius: 7px;
    padding: .45rem .6rem;
    font: inherit;
    background: #fff;
    color: #0f172a;
    box-sizing: border-box;
}
.tenant-picker-search input:focus {
    outline: none;
    border-color: var(--schulio-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--schulio-secondary) 22%, transparent);
}
.tenant-picker-table-wrap {
    max-height: 22rem;
    overflow-y: auto;
    border-top: 1px solid #f1f5f9;
}
/* Picker-Tabelle MUSS auch unter <=720px/<=1080px eine echte Tabelle
   bleiben — sonst greift die globale Mobile-Regel (.data-table -> Karten
   pro Zeile) und Name + Auswaehlen stehen untereinander. */
.tenant-picker-table,
.tenant-picker-table thead,
.tenant-picker-table tbody,
.tenant-picker-table tr,
.tenant-picker-table th,
.tenant-picker-table td {
    display: revert !important;
    width: auto !important;
}
.tenant-picker-table { display: table !important; width: 100% !important; margin: 0 !important; overflow: visible !important; }
.tenant-picker-table thead { display: table-header-group !important; position: static !important; left: auto !important; }
.tenant-picker-table tbody { display: table-row-group !important; }
.tenant-picker-table tr {
    display: table-row !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important;
    border: none !important; border-radius: 0 !important;
}
.tenant-picker-table th,
.tenant-picker-table td {
    display: table-cell !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: .55rem .85rem !important;
    font-size: .92rem;
    vertical-align: middle;
}
.tenant-picker-table tr:last-child td { border-bottom: none !important; }
.tenant-picker-table td::before { content: none !important; display: none !important; }
.tenant-picker-table th { position: sticky; top: 0; z-index: 1; background: #f8fafc; }
.tenant-picker-table tbody tr { cursor: pointer; }
.tenant-picker-table tbody tr:hover {
    background: color-mix(in srgb, var(--schulio-secondary) 8%, white);
}
.tenant-picker-table tbody tr:focus-visible {
    outline: 2px solid var(--schulio-secondary);
    outline-offset: -2px;
}
.tenant-picker-table strong { color: #0f172a; }
.tenant-picker-pick-col {
    text-align: right; width: 1%;
    white-space: nowrap;
}
.tenant-picker-cascade { font-size: .75rem; margin-left: .4rem; }
.tenant-picker-loading,
.tenant-picker-empty {
    padding: 1.25rem !important;
    color: #64748b;
    text-align: center !important;
}
.tenant-picker-pagination {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
    padding: .65rem 1.2rem 1rem;
    border-top: 1px solid #f1f5f9;
    margin: 0;
}
.tenant-picker-pagination .pagination-controls { gap: .35rem; }
.tenant-picker-pagination button:disabled,
.tenant-picker-pagination button.ghost { opacity: .5; cursor: not-allowed; }

/* === Quill "Variable einfuegen"-Button + Dropdown ============== */
.ql-toolbar button.ql-variable {
    width: auto !important;
    padding: 0 .55rem !important;
    border-radius: 4px;
    color: #475569;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.6;
    background: transparent;
}
.ql-toolbar button.ql-variable:hover {
    color: var(--schulio-link);
    background: #f1f5f9;
}
.ql-toolbar button.ql-variable .ql-variable-lbl {
    display: inline-flex; align-items: center; gap: .2rem;
    white-space: nowrap;
}

.ql-variable-menu {
    position: absolute; z-index: 4000;
    width: 280px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .15);
    max-height: 22rem;
    overflow-y: auto;
    padding: .25rem 0;
}
.ql-variable-menu-head {
    padding: .55rem .85rem .25rem;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: #94a3b8; font-weight: 600;
    border-top: 1px solid #f1f5f9;
}
.ql-variable-menu-head:first-child { border-top: none; }
.ql-variable-menu-loading { padding: 1rem; color: #64748b; text-align: center; }
.ql-variable-menu-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .5rem .85rem;
    border: none; background: transparent;
    font: inherit; color: #0f172a;
    cursor: pointer;
    text-align: left;
}
.ql-variable-menu-row:hover,
.ql-variable-menu-row:focus-visible {
    background: color-mix(in srgb, var(--schulio-secondary) 8%, white);
    outline: none;
}
.ql-variable-menu-label { flex: 1; min-width: 0; }
.ql-variable-menu-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem; color: #64748b;
    background: #f3f4f6; padding: .05rem .35rem; border-radius: 4px;
    white-space: nowrap;
}