/* --------------------------------------------------------------------------
   style.css — "Marke graubünden" / Val Surses, modern interpretiert
   --------------------------------------------------------------------------
   Markenkern bleibt: Signatur-Rot #C60219, Granit #3C3C3C, warme Sandtöne,
   Marken-Webfonts (CircularGraubuendenWeb / TheMix), Logo.
   Modernisiert: weiche Rundungen, dezente Elevation/Schatten, mehr Weißraum,
   Segmented-Tabs, sanfte Hover-/Focus-Microinteractions, luftige Typografie.
   No CDN, no framework.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Marken-Webfonts (lokal aus /assets/fonts)
   ========================================================================== */

/* Body: Circular graubünden Web — Book (400) + Bold (700) */
@font-face {
    font-family: "CircularGraubuendenWeb";
    src: url("/assets/fonts/CirculargraubuendenWeb-Book.woff2") format("woff2"),
         url("/assets/fonts/CirculargraubuendenWeb-Book.woff")  format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "CircularGraubuendenWeb";
    src: url("/assets/fonts/CirculargraubuendenWeb-Bold.woff2") format("woff2"),
         url("/assets/fonts/CirculargraubuendenWeb-Bold.woff")  format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Überschriften: TheMix — Medium (500) + Bold (700) */
@font-face {
    font-family: "TheMix";
    src: url("/assets/fonts/TheMix_500_.woff2") format("woff2"),
         url("/assets/fonts/TheMix_500_.woff")  format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "TheMix";
    src: url("/assets/fonts/TheMix_700_.woff2") format("woff2"),
         url("/assets/fonts/TheMix_700_.woff")  format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- graubünden Markenfarben ---- */
    --grb-red:         #C60219;
    --grb-red-dark:    #A80215;
    --grb-red-tint:    #F9E6E8;
    --grb-gold:        #F2A900;
    --grb-granit:      #3C3C3C;
    --grb-granit-soft: #6E6E6C;
    --grb-white:       #FFFFFF;
    --grb-sand-50:     #F9F9F7;
    --grb-sand-100:    #F2F2F0;
    --grb-sand-200:    #E7E6E1;
    --grb-sand-300:    #D8D7CF;
    --grb-green:       #2F5D39;
    --grb-green-tint:  #EDF3EE;

    /* ---- Rollen-Aliase ---- */
    --color-bg:           var(--grb-sand-50);
    --color-surface:      var(--grb-white);
    --color-text:         var(--grb-granit);
    --color-muted:        var(--grb-granit-soft);
    --color-border:       var(--grb-sand-200);
    --color-border-input: var(--grb-sand-300);
    --color-primary:      var(--grb-red);
    --color-primary-dark: var(--grb-red-dark);
    --color-danger:       var(--grb-red);
    --color-error:        var(--grb-red);

    /* ---- moderne Form/Tiefe ---- */
    --radius-lg: 20px;   /* Karten */
    --radius:    12px;   /* Buttons, Inputs */
    --radius-sm: 9px;    /* kleine Controls */
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(60,60,60,.05), 0 1px 3px rgba(60,60,60,.07);
    --shadow-md: 0 6px 18px rgba(60,60,60,.07), 0 2px 6px rgba(60,60,60,.05);
    --shadow-lg: 0 18px 48px rgba(48,48,48,.10), 0 6px 14px rgba(48,48,48,.06);
    --ring:      0 0 0 4px rgba(198,2,25,.14);

    --gap: 1rem;
    --maxw: 740px;

    --font-body: "CircularGraubuendenWeb","Circular",BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    --font-head: "TheMix",BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--color-text);
    line-height: 1.6;
    font-size: 16px;
    /* warmer, leicht durchscheinender Verlauf + zarte rote Lichtquelle oben –
       gibt Tiefe ohne die Marke zu verlassen */
    background:
        radial-gradient(1100px 420px at 78% -8%, rgba(198,2,25,.06), transparent 60%),
        linear-gradient(180deg, #FBFBFA 0%, var(--grb-sand-100) 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

h1, h2, legend { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.85rem; line-height: 1.15; margin: 0 0 .35rem; }
h2 { font-size: 1.05rem; margin: 0 0 .85rem; }

/* moderner, kurzer Akzentstrich statt Voll-Unterstrich */
.page-public h1,
.admin-main h1 { position: relative; padding-bottom: .85rem; margin-bottom: 1.4rem; }
.page-public h1::after,
.admin-main h1::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 56px; height: 4px; border-radius: var(--radius-pill);
    background: var(--grb-red);
}

a  { color: var(--grb-red); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--grb-red-dark); text-decoration: underline; }
code { background: var(--grb-sand-100); padding: .12em .4em; border-radius: 6px; font-size: .9em; }
.muted, .page-info { color: var(--color-muted); }

/* ---------- Marken-Logo ---------- */
.brand { margin-bottom: 1.9rem; }
.brand-logo { display: block; height: 38px; width: auto; }
.brand-logo--admin { height: 26px; filter: brightness(0) invert(1); }
.brand-logo--login { height: 34px; margin: 0 auto 1.4rem; }

/* ---------- Öffentliches Layout ---------- */
.page-public { display: flex; min-height: 100vh; }
.page-public .container {
    width: 100%;
    max-width: var(--maxw);
    margin: clamp(1rem, 5vw, 3.5rem) auto;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Formular-Wechsler als Dropdown */
.form-switcher {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.9rem;
}
.form-switcher label {
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grb-granit-soft);
}
.form-switcher-select { position: relative; display: inline-block; }
/* Custom-Chevron (das native Pfeil-Icon wird per appearance:none ausgeblendet) */
.form-switcher-select::after {
    content: "";
    position: absolute;
    right: .95rem;
    top: 50%;
    width: .5rem;
    height: .5rem;
    margin-top: -.36rem;
    border-right: 2px solid var(--grb-granit-soft);
    border-bottom: 2px solid var(--grb-granit-soft);
    transform: rotate(45deg);
    pointer-events: none;
}
.form-switcher select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: .6rem 2.6rem .6rem 1.1rem;
    border: 1.5px solid var(--color-border-input);
    border-radius: var(--radius-pill);
    background: var(--grb-white);
    font: inherit;
    font-weight: 600;
    color: var(--grb-granit);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-switcher select:hover { border-color: var(--grb-granit-soft); }
.form-switcher select:focus {
    outline: none;
    border-color: var(--grb-red);
    box-shadow: var(--ring);
}

/* ---------- Formulare ---------- */
.form fieldset.form-group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.6rem 1.7rem;
    margin: 0 0 1.5rem;
    background: linear-gradient(180deg, #fff, var(--grb-sand-50));
}
.form legend {
    padding: 0 .6rem; font-size: .82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--grb-granit-soft);
}

.form-field { margin-bottom: 1.25rem; }
.form-field > label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .45rem; }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="password"],
.form-field input[type="search"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: .72rem .9rem;
    border: 1.5px solid var(--color-border-input);
    border-radius: var(--radius);
    font: inherit;
    color: var(--grb-granit);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: #b6b5ad; }

/* Feld-Selects: eigenes Chevron statt des nativen Pfeils — etwas grösser
   und mit Abstand zum Feldrahmen (Farbe = --grb-granit-soft). */
.form-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.9rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%236E6E6C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: .85rem auto;
    cursor: pointer;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--grb-red);
    box-shadow: var(--ring);
}

/* ---------- Wiederholgruppen (repeater) ---------- */
.form-repeater-rows { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .6rem; }
.form-repeater-row {
    display: flex; align-items: flex-end; gap: .6rem;
    padding: .75rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--grb-sand-50);
}
.form-repeater-cells {
    display: grid; gap: .6rem; flex: 1;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.form-repeater-cell > label {
    display: block; font-weight: 600; font-size: .82rem; margin-bottom: .3rem;
}
.form-repeater-cell input,
.form-repeater-cell select,
.form-repeater-cell textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1.5px solid var(--color-border-input);
    border-radius: var(--radius);
    font: inherit;
    color: var(--grb-granit);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-repeater-cell input:focus,
.form-repeater-cell select:focus,
.form-repeater-cell textarea:focus {
    outline: none; border-color: var(--grb-red); box-shadow: var(--ring);
}
.rep-remove {
    flex: 0 0 auto;
    width: 2rem; height: 2rem; margin-bottom: .2rem;
    border: 1.5px solid var(--color-border-input); border-radius: var(--radius);
    background: #fff; color: var(--grb-granit-soft);
    font-size: 1.05rem; line-height: 1; cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.rep-remove:hover:not(:disabled) { border-color: var(--grb-red); color: var(--grb-red); }
.rep-remove:disabled { opacity: .35; cursor: default; }

.form-options { display: flex; flex-direction: column; gap: .15rem; }
.form-option {
    display: flex; align-items: center; gap: .65rem;
    font-weight: 400; cursor: pointer;
    padding: .5rem .65rem; margin: 0 -.65rem; border-radius: var(--radius-sm);
    transition: background-color .14s ease;
}
.form-option:hover { background: var(--grb-sand-100); }
.form-option input { width: auto; accent-color: var(--grb-red); width: 1.05rem; height: 1.05rem; }

.form-help  { display: block; color: var(--color-muted); font-size: .85rem; margin-top: .3rem; }
.form-ref   { display: block; color: var(--color-muted); font-size: .8rem; margin-top: .25rem; font-style: italic; }
.form-warn  { display: block; color: #7A5A00; font-size: .85rem; margin-top: .35rem; font-weight: 600; }
.required   { color: var(--grb-red); }

.form-error { display: block; color: var(--grb-red); font-size: .85rem; margin-top: .35rem; font-weight: 600; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--grb-red); box-shadow: var(--ring); }

.form-actions { margin-top: 1.5rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .72rem 1.4rem;
    border: 1.5px solid var(--color-border-input);
    border-radius: var(--radius);
    background: #fff;
    color: var(--grb-granit);
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--grb-sand-100); transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-small { padding: .42rem .85rem; font-size: .85rem; border-radius: var(--radius-sm); }

.btn-primary {
    background: var(--grb-red);
    border-color: var(--grb-red);
    color: #fff;
    box-shadow: 0 6px 16px rgba(198,2,25,.22);
}
.btn-primary:hover { background: var(--grb-red-dark); border-color: var(--grb-red-dark); color: #fff; box-shadow: 0 10px 22px rgba(198,2,25,.28); }
.btn-danger { background: var(--grb-red); border-color: var(--grb-red); color: #fff; }
.btn-danger:hover { background: var(--grb-red-dark); border-color: var(--grb-red-dark); color: #fff; }

/* ---------- Alerts ---------- */
.alert {
    padding: 1.1rem 1.3rem; border-radius: var(--radius-lg); margin-bottom: 1.4rem;
    border: 1px solid transparent; box-shadow: var(--shadow-sm);
}
.alert-error   { background: var(--grb-red-tint);   border-color: #f1cdd2; color: #8a0813; }
.alert-success { background: var(--grb-green-tint); border-color: #cfe3d3; color: var(--grb-green); }
.alert-warning { background: #FDF4DE; border-color: #F0DFB1; color: #7A5A00; }
.alert-success h1 { margin-top: 0; color: inherit; padding: 0; }
.alert-success h1::after { display: none; }

/* ---------- Admin: Login ---------- */
.page-login { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1.5rem; }
.login-box {
    width: 400px; max-width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.4rem 2.2rem;
    text-align: center;
}
.login-box h1 { font-size: 1.45rem; margin-bottom: 2rem; }
.login-box h1::after { left: 50%; transform: translateX(-50%); }
.login-box .form { text-align: left; }
.login-box .made-by { margin-top: 1.75rem; }

/* ---------- Admin: Grundgerüst ---------- */
.admin-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1.6rem;
    background: var(--grb-granit);
    color: #fff;
    box-shadow: var(--shadow-md);
    position: sticky; top: 0; z-index: 20;
}
.admin-header .btn { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.06); }
.admin-header .btn:hover { background: #fff; color: var(--grb-granit); }
.admin-brand { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-head); font-weight: 700; letter-spacing: .01em; font-size: .98rem; }
.admin-header-right { display: inline-flex; align-items: center; gap: 1rem; }
.admin-user { color: rgba(255,255,255,.78); font-size: .88rem; }
.admin-user strong { color: #fff; font-weight: 600; }

.admin-layout { display: flex; align-items: flex-start; gap: 1.5rem; padding: clamp(1rem, 3vw, 2rem); max-width: 1760px; margin: 0 auto; }
.admin-nav {
    flex: 0 0 240px; position: sticky; top: 84px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
}
.admin-nav h2 { margin-top: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--grb-granit-soft); }
.admin-nav .admin-nav-sep { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border); }
.admin-nav ul { list-style: none; margin: 0; padding: 0; }
.admin-nav li { margin-bottom: .25rem; }
.admin-nav a {
    display: block; padding: .6rem .8rem; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--grb-granit); font-weight: 600; font-size: .94rem;
    transition: background-color .14s ease, color .14s ease;
}
.admin-nav a:hover { background: var(--grb-sand-100); }
.admin-nav a.is-active { background: var(--grb-red); color: #fff; box-shadow: 0 6px 14px rgba(198,2,25,.2); }

/* Formular-Auswahl als Dropdown (spart Platz bei vielen Formularen). */
.admin-nav-select { margin: 0; }
.admin-nav-select select {
    width: 100%;
    padding: .6rem 2.4rem .6rem .8rem;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    border: 1.5px solid var(--color-border-input); border-radius: var(--radius-sm);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%236E6E6C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .85rem center; background-size: .8rem auto;
    font: inherit; font-weight: 600; font-size: .94rem; color: var(--grb-granit);
    cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-nav-select select:hover { border-color: var(--grb-granit-soft); }
.admin-nav-select select:focus { outline: none; border-color: var(--grb-red); box-shadow: var(--ring); }
.admin-nav-select noscript { display: block; margin-top: .5rem; }

/* Nur für Screenreader (visuell ausgeblendet). */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.admin-main {
    flex: 1; min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.25rem, 3vw, 2rem);
}

.admin-toolbar { display: flex; gap: .75rem; align-items: center; margin: 1.1rem 0 1.5rem; flex-wrap: wrap; }
/* Filter als abgesetzte Gruppe (heller Kasten + Rahmen + „Filter"-Label). */
.admin-filter {
    display: flex; gap: .55rem; align-items: center; flex-wrap: wrap;
    padding: .5rem .7rem;
    background: var(--grb-sand-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.admin-filter-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--grb-granit-soft); padding-right: .1rem;
}
.admin-filter select {
    padding: .5rem 2.2rem .5rem .8rem;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    border: 1.5px solid var(--color-border-input); border-radius: var(--radius-sm);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%236E6E6C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center; background-size: .8rem auto;
    font: inherit; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-filter select:hover { border-color: var(--grb-granit-soft); }
.admin-filter select:focus { outline: none; border-color: var(--grb-red); box-shadow: var(--ring); }
.admin-toolbar .admin-export { margin-left: auto; }
/* Dezenter Button (z. B. „Zurücksetzen" innerhalb der Filter-Gruppe). */
.btn-ghost {
    background: transparent; box-shadow: none;
    border-color: transparent; color: var(--grb-granit-soft);
}
.btn-ghost:hover { background: var(--grb-sand-100); color: var(--grb-granit); }

/* Sortierbare Spaltenköpfe */
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--grb-red); }
.sort-link.is-active { color: var(--grb-red); }

/* ---------- Admin: Datentabelle ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.data-table { width: 100%; border-collapse: collapse; font-size: .86rem; background: var(--grb-white); }
.data-table th, .data-table td {
    padding: .55rem .7rem; text-align: left; vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);   /* vertikale Zelltrennung */
}
.data-table th:last-child, .data-table td:last-child { border-right: 0; }
.data-table thead th {
    background: var(--grb-sand-100); color: var(--grb-granit-soft);
    position: sticky; top: 0;
    white-space: nowrap;
    font-family: var(--font-body); font-weight: 700; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 2px solid var(--grb-sand-300);
}
.data-table tbody tr { transition: background-color .12s ease; }
.data-table tbody tr:nth-child(even) { background: var(--grb-sand-50); }   /* Zebra */
.data-table tbody tr:hover { background: var(--grb-sand-100); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tr.is-editing { background: var(--grb-red-tint); }
.data-table .col-actions { white-space: nowrap; }
.data-table input, .data-table select, .data-table textarea {
    width: 100%; padding: .45rem .55rem; border: 1.5px solid var(--color-border-input); border-radius: var(--radius-sm); font: inherit;
}
.data-table input:focus, .data-table select:focus, .data-table textarea:focus { outline: none; border-color: var(--grb-red); box-shadow: var(--ring); }
.cell-check { display: block; font-size: .8rem; }

/* Kompakte Darstellung langer Zell-Inhalte (Wiederholgruppen, lange Texte). */
.cell-badge {
    display: inline-block; white-space: nowrap;
    padding: .1rem .5rem; border-radius: var(--radius-pill);
    background: #EEE7FA; color: #5B3E96;
    font-size: .78rem; font-weight: 600;
}
.cell-preview { color: var(--color-muted); font-size: .82rem; margin-left: .35rem; }
.cell-clip {
    display: inline-block; max-width: 22rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: bottom; cursor: help;
}
.inline-form { display: inline; }

.empty { padding: 3rem 2rem; text-align: center; color: var(--color-muted); }

.pagination { display: flex; align-items: center; gap: .85rem; margin-top: 1.5rem; }

/* ---------- Admin: Benutzerverwaltung ---------- */
.badge {
    display: inline-block; margin-left: .5rem;
    padding: .1rem .55rem; border-radius: var(--radius-pill);
    background: var(--grb-sand-100); color: var(--grb-granit-soft);
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    vertical-align: middle;
}
.badge-admin { background: var(--grb-red-tint); color: var(--grb-red-dark); }
.badge-forms { background: var(--grb-green-tint); color: var(--grb-green); }
.user-edit-fields { display: flex; flex-direction: column; gap: .4rem; max-width: 340px; }

/* Rechte-Raster (Formular-Freigaben) */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .2rem .75rem; }

/* Öffentliche Kopfleiste (angemeldeter Benutzer / Logout) */
.public-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
    margin: -.5rem 0 1.5rem; padding-bottom: .9rem;
    border-bottom: 1px solid var(--color-border);
    font-size: .88rem; color: var(--color-muted);
}
.public-header .public-actions { display: inline-flex; gap: 1rem; }

/* Breadcrumb auf der Detailseite */
.breadcrumb { margin: 0 0 .5rem; font-size: .9rem; }

/* Dezenter Hersteller-Hinweis (tipic.swiss) */
.made-by {
    display: flex; align-items: center; justify-content: center;
    gap: .5rem; flex-wrap: wrap;
    margin-top: 2.25rem;
    font-size: .72rem; letter-spacing: .02em; color: var(--color-muted);
    opacity: .8; transition: opacity .15s ease;
}
.made-by:hover { opacity: 1; }
.made-by img { height: 16px; width: auto; display: block; }
.made-by a { line-height: 0; }

/* Im öffentlichen Container linksbündig unter dem Inhalt absetzen */
.page-public .container .made-by {
    justify-content: flex-start;
    margin-top: 2rem; padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

/* In der Admin-Seitenleiste unten andocken */
.admin-nav .made-by {
    margin-top: 1.5rem; padding-top: 1.1rem;
    border-top: 1px solid var(--color-border);
    justify-content: flex-start;
}

.user-create {
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
.user-create h2 { font-family: var(--font-head); }
.user-create-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    align-items: end;
    max-width: 620px;
}
.user-create-form .form-actions { grid-column: 1 / -1; margin-top: .25rem; }
@media (max-width: 560px) {
    .user-create-form { grid-template-columns: 1fr; }
}

/* ---------- Bestätigungsseite: Werte-Zusammenfassung ---------- */
.confirmation-table th[scope="row"] {
    width: 45%; font-weight: 600; background: var(--grb-sand-50);
}

/* ---------- Admin: Vollständigkeits-Matrix ---------- */
.matrix-table .matrix-month { text-align: center; }
.matrix-table .matrix-current { color: var(--grb-red); }
.matrix-cell { text-align: center; font-weight: 700; }
.matrix-cell.matrix-ok      { color: var(--grb-green); background: var(--grb-green-tint); }
.matrix-cell.matrix-missing { color: var(--grb-red);   background: var(--grb-red-tint); }
.matrix-cell.matrix-future  { color: var(--color-muted); background: var(--grb-sand-100); }
.matrix-legend { margin-top: 1rem; }
.matrix-swatch {
    display: inline-block; min-width: 1.6rem; padding: 0 .3rem; text-align: center;
    border-radius: 6px; font-weight: 700;
}
.matrix-swatch.matrix-ok      { color: var(--grb-green); background: var(--grb-green-tint); }
.matrix-swatch.matrix-missing { color: var(--grb-red);   background: var(--grb-red-tint); }
.matrix-swatch.matrix-future  { background: var(--grb-sand-100); }
.matrix-swatch.matrix-future::after { content: "\00a0"; }

/* ---------- Admin: Formbuilder ---------- */
.fb-meta-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.25rem;
}
.fb-list { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.fb-row {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: .55rem .7rem;
}
.fb-row.dragging { opacity: .55; border-style: dashed; }
.fb-drag { cursor: grab; color: var(--color-muted); font-size: 1.1rem; user-select: none; padding: 0 .35rem; }
.fb-group { display: flex; align-items: center; gap: .55rem; }
/* Gruppen-Inputs im gleichen Look wie die übrigen Formularfelder */
.fb-group input {
    flex: 1; min-width: 0;
    padding: .72rem .9rem;
    border: 1.5px solid var(--color-border-input);
    border-radius: var(--radius);
    font: inherit;
    color: var(--grb-granit);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fb-group input::placeholder { color: #b6b5ad; }
.fb-group input:focus { outline: none; border-color: var(--grb-red); box-shadow: var(--ring); }
.fb-field { transition: box-shadow .12s ease; }
.fb-field:hover { box-shadow: var(--shadow-sm); }
.fb-field.is-open { border-color: var(--grb-granit-soft); box-shadow: var(--shadow-sm); }
.fb-field-head { display: flex; align-items: center; gap: .65rem; min-height: 2.2rem; cursor: pointer; }

/* Typ-Badge: farbcodiert nach Feld-Kategorie */
.fb-type-badge {
    flex: 0 0 auto; min-width: 5.2rem; text-align: center;
    padding: .18rem .55rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; letter-spacing: .02em;
    background: var(--grb-sand-100); color: var(--grb-granit);
}
.fb-type-badge[data-type="number"]   { background: var(--grb-green-tint); color: var(--grb-green); }
.fb-type-badge[data-type="select"],
.fb-type-badge[data-type="radio"],
.fb-type-badge[data-type="checkbox"] { background: #FDF4DE; color: #7A5A00; }
.fb-type-badge[data-type="date"]     { background: var(--grb-red-tint); color: var(--grb-red-dark); }
.fb-type-badge[data-type="repeater"] { background: #EEE7FA; color: #5B3E96; }

/* Zweizeilige Zusammenfassung: Beschriftung + technische Details */
.fb-summary { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fb-sum-label { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-sum-meta {
    color: var(--color-muted); font-size: .78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fb-field-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.25rem;
    margin-top: .8rem; padding-top: .3rem; border-top: 1px solid var(--color-border);
}
/* WICHTIG: display:grid würde sonst das hidden-Attribut aushebeln
   (Author-CSS überschreibt das Browser-Default [hidden] -> display:none) —
   deshalb war das Akkordeon wirkungslos und alles immer offen. */
.fb-field-body[hidden] { display: none; }
.fb-field-body .form-field { margin-bottom: .5rem; }

/* Sektions-Überschriften strukturieren den Detailbereich */
.fb-section {
    grid-column: 1 / -1; margin: .7rem 0 .1rem;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-muted);
}
.fb-section:first-child { margin-top: .3rem; }

@media (max-width: 700px) {
    .fb-meta-grid, .fb-field-body { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .admin-layout { flex-direction: column; }
    .admin-nav { flex: 1 1 auto; width: 100%; position: static; }
}

/* Sanftere Bewegungen respektieren Nutzer-Einstellungen */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}