/* ==================================================================
   nextparty24 - Adminbereich

   EIGENES DESIGN, nicht das der Webseite.

   Bis zum 18.09.2026 trug der Adminbereich den kompletten Auftritt der
   oeffentlichen Seite: Claymorphismus (Kissen und Mulden aus je drei
   Schatten), zwei Hausfarben, eine Aurora aus weichen Lichtflecken im
   Hintergrund, Verlaufskanten an Seiten- und Kopfleiste, die Wortmarke
   mit tuerkisem Kasten. Das sah aus wie die Buehne, auf der es keine
   gibt. Wer hier arbeitet, fuellt Formulare aus und liest Listen.

   Seitdem gilt: flach und ruhig.

     Flaechen     eine Farbe, eine 1 px Kante, kleiner Radius. Keine
                  Innenschatten. Schatten nur, wo etwas WIRKLICH ueber
                  dem Rest liegt - aufgeklapptes Menue, Wartefenster.
     Farbe        Graustufen tragen alles. Das Hausgelb bleibt, aber nur
                  an drei Stellen: Hauptknopf, aktiver Menuepunkt,
                  offener Reiter. Dazu der Fokusrahmen - der DARF laut
                  sein, er sagt, wo die Tastatur steht.
     Cyan         ist raus. Ein zweiter Akzent ordnet ein, wo es viel zu
                  ordnen gibt; hier gab es nur mehr Buntheit.
     Schrift      Plus Jakarta Sans bleibt, aber in 600 statt 800 -
                  Ueberschriften sollen gliedern, nicht rufen. Expansiva
                  ist raus, das ist die Schrift der Wortmarke.
     Marke        einfarbig, schwarz oder weiss je nach Schema.

   Dass es hier eigene Farbwerte gibt statt eines Verweises auf
   style.css, war schon vorher so und ist jetzt der Punkt: aendert sich
   die Webseite, aendert sich hier nichts.

   Keine externen Ressourcen - die Content-Security-Policy laesst nur
   Dateien aus dem eigenen Haus zu.
   ================================================================== */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Gemeinsame Tokens - Farben, Schrift, Schriftgroessen, Abstaende,
       Rundungen, Linien, Fokusrahmen - stehen in css/tokens.css und
       gelten fuer Webseite, Admin und Kundenbereich. Seit dem 04.10.2026
       auch dieselben runden Radien wie die Webseite: ein Baukasten fuer
       alles. Hier steht nur, was allein Admin und Kundenbereich betrifft. */

    /* Sagt dem Browser, dass es dunkel ist - sonst kommen Auswahllisten
       und Bildlaufleisten weiss auf schwarz. */
    color-scheme: dark;

    /* 600, nicht 800: eine Ueberschrift soll hier gliedern, nicht rufen.
       Die 800 der Webseite sind eine Gestaltungsentscheidung fuer eine
       Seite, die auffallen will - ein Formular will das nicht. */
    --weight-heading: 600;

}


/* ---------- Helles Schema ----------
   Gesetzt ueber data-farbschema="hell" am <html> (adminlayout.php,
   AdminFarbschema). Dieselben Tokens, gespiegelt: Grund hell, Text
   dunkel, der Akzent eine Stufe tiefer, damit er auf Weiss noch traegt.
   Alles Uebrige bezieht sich auf die Tokens und muss hier nicht
   angefasst werden. */
:root[data-farbschema="hell"] {
    color-scheme: light;

    --color-bg: #f4f4f7;
    --color-surface: #ffffff;
    --color-text: #131317;
    --color-divider: color-mix(in srgb, #131317 12%, transparent);

    --color-neutral-300: #40404a;
    --color-neutral-400: #5c5c66;
    --color-neutral-600: #9d9da8;
    --color-neutral-700: #c9c9d1;
    --color-neutral-900: #e9e9ee;

    /* Gelb bleibt Gelb - die Flaeche traegt auch auf Weiss, solange die
       Schrift darauf dunkel ist. Nur der Schriftton muss tief werden:
       ein helles Gelb auf Weiss waere nicht zu lesen. */
    --color-accent: #c2dd1c;
    --color-on-accent: #15170a;
    --color-accent-300: #5c6b0e;
    --color-accent-700: #3d470a;

    --color-fehler: #c2432b;
    --color-ok: #1f8a58;
    --color-warnung: #a85c0a;

    /* Auf Weiss reicht weniger Kontrast fuer dieselbe Deutlichkeit -
       eine Linie, die auf Schwarz zart wirkt, ist hier schon ein Strich. */
    --linie: 1px solid var(--color-divider);
    --linie-stark: 1px solid color-mix(in srgb, var(--color-text) 26%, transparent);

    --schatten-menue: 0 6px 20px rgba(20, 16, 60, .12);
    --schatten-warten: 0 8px 26px rgba(20, 16, 60, .14);

    --fokus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

button, input, select, textarea {
    font-family: inherit;
}

/* ---------- Grund ----------
   Eine Farbe, sonst nichts. Hier lagen zwei weiche Lichtflecken in den
   Hausfarben, wie die Aurora hinter dem Hero der Webseite. Hinter einem
   Anmeldeformular hat Buehnenlicht nichts verloren. */
.admin-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    background: var(--color-bg);
    position: relative;
    isolation: isolate;
}

/* ---------- Karte ---------- */
.admin-karte {
    width: 100%;
    max-width: min(432px, 100%);
    min-width: 0;
    padding: var(--space-8) var(--space-8) var(--space-6);
    background: var(--color-surface);
    border: var(--linie);
    border-radius: var(--radius-lg);
}

.admin-karte--weit { max-width: 560px; }

/* ---------- Marke ---------- */
.admin-marke {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--space-6);
}

.admin-marke img {
    width: 190px;
    height: auto;
    display: block;
}

/* Plus Jakarta Sans im Ueberschriftengewicht der Webseite (--weight-heading, siehe
   Design.md). Expansiva bleibt der Wortmarke vorbehalten, die steht
   direkt darueber schon im Logo. */
.admin-titel {
    margin: 0 0 var(--space-6);
    font-size: var(--text-2xl);
    font-weight: var(--weight-heading);
    letter-spacing: -.01em;
    color: var(--color-text);
}

/* Kicker ueber dem Titel. Er stand in der Schrift der Wortmarke und in
   der Hausfarbe - beides ist raus: er ordnet den Titel ein ("Adminbereich
   > Anmeldung") und ist damit das Leiseste auf der Karte, nicht das
   Lauteste. */
.admin-kicker {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--color-neutral-400);
}
/* Gelbe Fassung, wie der Kicker der Webseite (.np-kicker). Fuer Stellen
   auf dunklem Grund in BEIDEN Schemata, etwa auf dem Foto der
   Kundenanmeldung: --color-accent bleibt auch im hellen Schema gelb,
   --color-accent-300 wird dort dunkel und waere auf dem Foto unlesbar. */
.admin-kicker--akzent {
    font-weight: 600;
    color: var(--color-accent);
}

/* ---------- Text ---------- */
.admin-text {
    margin: 0 0 var(--space-4);
    font-size: var(--text-base);
    color: var(--color-neutral-300);
}

.admin-text--klein {
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
}

.admin-text strong { color: var(--color-text); font-weight: 500; }

/* ---------- Formularfelder ---------- */
.admin-feld {
    display: block;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-neutral-300);
}

/* Die Beschriftung, wenn der Kasten darunter kein Eingabefeld ist,
   sondern ein errechneter Wert. Ein <label> ohne Feld waere falsch
   ausgezeichnet, also traegt hier ein <span> die Beschriftung - und
   braucht denselben Abstand, den das Etikett von selbst hat. */
.admin-feld__kopf { display: block; margin-bottom: var(--space-1); }

/* Ein Wert, den man nicht aendern kann, weil er sich aus anderen Feldern
   ergibt - die Gesamtzahl aus den Lagerbestaenden. Sieht aus wie ein
   Feld, damit die Zeile nicht auseinanderfaellt, ist aber erkennbar
   nicht anfassbar. */
.admin-eingabe--lesen {
    background: transparent;
    border-style: dashed;
    color: var(--color-text);
    cursor: default;
}

/* Der kleine Satz unter einem Eingabefeld.

   Es gab dafuer zwei Muster, die verschieden aussahen: dieses hier steht
   IM Etikett gleich unter dem Feld, das andere als eigener Absatz
   darunter (.admin-text--klein). Dasselbe gesagt, zweierlei gezeigt -
   das eine klebte am Feld und war blasser als das andere.

   Beide tragen jetzt dieselbe Groesse, dieselbe Farbe und denselben
   Abstand. Angeglichen wird hier und nicht im Markup: eine Regel deckt
   alle Stellen im Adminbereich ab, waehrend 29 Handgriffe im HTML
   irgendwo einen vergessen haetten.

   Die 16 px oben sind nicht gegriffen, sondern gerechnet: beim anderen
   Muster entsteht der Abstand aus .admin-feld { margin-bottom }. Damit
   stehen beide Fassungen pixelgleich untereinander. Das display: block
   muss sein, weil ein <span> senkrechte Abstaende sonst schluckt. */
.admin-feld__zusatz {
    display: block;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
}

/* Eingabefeld (.admin-eingabe): Aussehen aus css/bausteine.css. Hier nur
   der Abstand zur Beschriftung darueber - im Admin steht das Feld IM
   Etikett, auf der Webseite daneben (dort gibt .field den Abstand). */
.admin-eingabe { margin-top: var(--space-1); }

/* ---------- Passwort mit Auge ---------- */
.admin-passwortfeld {
    position: relative;
    margin-top: var(--space-1);
}

.admin-passwortfeld > .admin-eingabe {
    margin-top: 0;
    padding-right: var(--space-10);
}

.admin-auge {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-neutral-400);
    cursor: pointer;
}

.admin-auge:hover {
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    color: var(--color-text);
}

.admin-auge svg { width: 18px; height: 18px; }

.admin-feststelltaste {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-warnung);
}

.admin-feststelltaste::before { content: "\21EA"; font-size: var(--text-base); line-height: 1; }

/* Das hidden-Attribut muss immer greifen - .admin-feststelltaste setzt
   display:flex und wuerde das sonst ueberstimmen. */
[hidden] { display: none !important; }

/* ---------- Meldungen ----------
   Aussehen aus css/bausteine.css. Hier nur der Abstand im Fluss der
   Adminseiten. */
.admin-hinweis { margin: 0 0 var(--space-4); }

/* ---------- Aktionsleiste ---------- */
.admin-aktionen {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
}

/* ---------- Knoepfe: css/bausteine.css ---------- */

/* ---------- Fusszeile der Karte ---------- */
.admin-fusszeile {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    text-align: center;
    color: var(--color-neutral-400);
}

.admin-link { color: var(--color-accent-300); text-decoration: none; }
.admin-link:hover { text-decoration: underline; }
.admin-link--leise { color: var(--color-neutral-400); }

/* ---------- Kleine Datenliste (Dashboard) ---------- */
.admin-liste {
    margin: 0 0 var(--space-6);
    border-top: 1px solid var(--color-divider);
}

.admin-liste__zeile {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-divider);
    font-size: var(--text-sm);
}

.admin-liste dt { color: var(--color-neutral-400); }
.admin-liste dd { color: var(--color-text); text-align: right; }
/* Ein Geldbetrag bricht nie um ("60,00" und "€" auf zwei Zeilen). */
.admin-betrag { white-space: nowrap; }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 520px) {
    .admin-body { padding: var(--space-4); }
    .admin-karte { padding: var(--space-6) var(--space-4) var(--space-4); }
    .admin-marke img { width: 160px; }
}

/* ==================================================================
   Sprachumschalter

   Ein <details>-Aufklappmenue - derselbe Aufbau wie auf der Webseite.
   Der Knopf zeigt die aktuelle Sprache, die Liste alle verfuegbaren.
   Oeffnet und schliesst ohne JavaScript; js/admin.js ergaenzt nur
   Klick-nach-draussen und Escape.

   Die Flagge ist das einzige farbige Element - klein, gedaempft, und
   erst beim Ueberfahren voll sichtbar. Der Akzent bleibt damit der
   Marke und den Linien vorbehalten, wie Design.md es verlangt.
   ================================================================== */
/* Sprachumschalter (.admin-sprache, voll und klein): css/bausteine.css */

/* Kopfzeile der Anmeldekarte: Wortmarke links, Umschalter rechts, mit
   Platz dazwischen. Uebereinander standen sie zu dicht beieinander. */
.admin-karte__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* In der Karte steht die Marke links, nicht mittig - sie teilt sich die
   Zeile mit dem Umschalter. */
.admin-karte__kopf .admin-marke {
    justify-content: flex-start;
    margin: 0;
    min-width: 0;
}

/* 200 px: so gross, wie es neben dem Sprachumschalter in der 432-px-Karte
   noch Platz hat, ohne dass einer von beiden schrumpfen muss. */
.admin-karte__kopf .admin-marke img { width: 230px; max-width: 100%; }

/* Beide Seiten der Kopfzeile duerfen schrumpfen. Ohne min-width: 0
   bestehen Flex-Kinder auf ihrer Inhaltsbreite - und der Umschalter
   steht auf "white-space: nowrap". Dann waechst die Karte ueber den
   Bildschirmrand hinaus. */
.admin-karte__kopf > * { min-width: 0; }

/* ==================================================================
   Dashboard: Navigation links, Leiste oben, Inhalt rechts
   ================================================================== */
.admin-dash {
    min-height: 100vh;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    background: var(--color-bg);
    position: relative;
    isolation: isolate;
}

.admin-dash__raster {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    min-height: 100vh;
}

/* ---------- Navigation ----------
   Die Seitenleiste ist so hoch wie das Fenster und bleibt beim Scrollen
   stehen (sticky). Ohne das dehnt das Raster sie auf die Hoehe des
   Inhalts rechts - und "Zur Webseite" und "Abmelden" haengen am unteren
   Ende einer langen Seite, weit ausserhalb des Sichtfelds. Wird die
   Leiste selbst einmal hoeher als das Fenster, scrollt sie fuer sich. */
.admin-nav {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Der Balken ist unsichtbar, bis man mit der Maus in der Leiste ist
       oder per Tastatur darin steht - erst dann scrollt man dort. Sein
       Platz bleibt, damit das Menue beim Einblenden nicht springt. */
    scrollbar-color: transparent transparent;
    padding: var(--space-6) var(--space-4);
    border-right: 1px solid var(--color-divider);
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}

.admin-nav:hover,
.admin-nav:focus-within { scrollbar-color: var(--color-neutral-600) transparent; }

/* Kopf der Seitenleiste: Marke links, Schliessen-Knopf rechts. Der Knopf
   ist nur in der schmalen Ansicht sichtbar - dort deckt die ausgefahrene
   Schublade den Burger ab, mit dem man sie geoeffnet hat. */
.admin-nav__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    padding-inline: var(--space-2);
}

.admin-nav__marke img { width: 195px; height: auto; display: block; }

.admin-nav__zu {
    display: none;               /* erst in der schmalen Ansicht */
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    color: var(--color-neutral-300);
    cursor: pointer;
}

.admin-nav__zu:hover {
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    color: var(--color-text);
}

/* Der Schatten hinter der Schublade. Ein Klick darauf schliesst sie, weil
   das Label auf dieselbe Checkbox zeigt wie der Burger. */
.admin-schatten {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(0, 0, 0, .6);
    cursor: pointer;
}

.admin-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-nav__punkt {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-neutral-300);
    font-size: var(--text-base);
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.admin-nav__punkt:not(.on):hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
}

/* Der aktive Punkt bekommt eine Akzentlinie, keine Akzentflaeche. */
.admin-nav__punkt.on {
    position: relative;
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    color: var(--color-text);
}

.admin-nav__punkt.on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: var(--radius-xs);
    background: var(--color-accent);
}

/* Unterpunkte (z. B. Pakete unter Artikel): eingerueckt hinter einer
   feinen Linie, ohne Symbol, eine Stufe kleiner. Die Regel fuer
   .admin-nav ul (flex: 1 1 auto) darf hier nicht greifen, sonst dehnt
   sich die Unterliste und schiebt den Fuss weg. */
.admin-nav .admin-nav__unter {
    flex: 0 0 auto;
    margin: 2px 0 0 var(--space-6);
    padding: 0 0 0 var(--space-3);
    border-left: 1px solid var(--color-divider);
}

.admin-nav .admin-nav__punkt--unter {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

.admin-nav .admin-nav__punkt--unter.on::before { top: 6px; bottom: 6px; }

/* Die Gruppe (z. B. Artikel): ein <details>, der Kopf sieht aus wie ein
   Punkt, traegt aber einen Pfeil und fuehrt nirgendwohin - er klappt
   die Unterpunkte auf. Markiert ist er nur ueber die Schrift, die
   Akzentlinie gehoert dem aktiven Unterpunkt. */
.admin-nav__gruppe summary { list-style: none; cursor: pointer; }
.admin-nav__gruppe summary::-webkit-details-marker { display: none; }
.admin-nav .admin-nav__punkt--gruppe.on { background: transparent; }
.admin-nav .admin-nav__punkt--gruppe.on::before { display: none; }
.admin-nav__caret { margin-left: auto; width: 14px; height: 14px; opacity: .6; transition: transform .15s; }
.admin-nav__gruppe[open] .admin-nav__caret { transform: rotate(180deg); }

/* Noch nicht gebaute Bereiche: sichtbar, damit man sieht wohin es geht,
   aber klar als "kommt noch" gekennzeichnet. */
.admin-nav__punkt.is-later {
    color: var(--color-neutral-600);
    cursor: default;
}

.admin-nav__spaeter {
    margin-left: auto;
    font-size: var(--text-xs);
    font-style: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-neutral-700);
}

.admin-nav__fuss {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
    display: flex;
    flex-direction: column;
    gap: var(--space-05);
}

.admin-icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Leiste oben ---------- */
.admin-haupt { display: flex; flex-direction: column; min-width: 0; }

.admin-topbar {
    /* Bleibt beim Scrollen oben stehen - wie der Kopf der Webseite.
       z-index 10: ueber dem Inhalt, aber unter Schatten (15) und
       Schublade (20) der schmalen Ansicht. Die Aufklappmenues fuer
       Sprache und Konto liegen im selben Stapel und bleiben sichtbar. */
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--color-divider);
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ---------- Konto oben rechts ----------
   Die Initiale ist ein Aufklappmenue: dahinter liegen Einstellungen und
   Abmelden. In der schmalen Ansicht ist die Seitenleiste eingeklappt -
   ohne dieses Menue kaeme man dort gar nicht mehr zum Abmelden. */
.admin-konto { position: relative; }

.admin-konto__knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-divider);
    border-radius: 50%;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-neutral-300);
    cursor: pointer;
    list-style: none;
    transition: background-color .15s, color .15s;
}

.admin-konto__knopf::-webkit-details-marker { display: none; }

.admin-konto__knopf:hover,
.admin-konto[open] > .admin-konto__knopf {
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    color: var(--color-text);
}

.admin-konto__menue {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    padding: var(--space-1);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--schatten-menue);
}

/* Wer ist angemeldet - steht oben im Menue, damit man es bei mehreren
   Konten sofort sieht. */
.admin-konto__wer {
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-divider);
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
    word-break: break-all;
}

.admin-konto__punkt {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-05);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-neutral-300);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.admin-konto__punkt:hover {
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    color: var(--color-text);
}

.admin-burger {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: auto;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    color: var(--color-neutral-300);
    cursor: pointer;
}

/* ---------- Zaehler: roter Kreis mit Zahl (neue Anfragen) ----------
   Im Menuepunkt rechtsbuendig hinter dem Text. Die kleine Fassung sitzt
   oben rechts auf dem Burger - auf dem Handy ist das Menue zu, und man
   soll trotzdem sehen, dass etwas wartet. */
.admin-zaehler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-5);
    height: var(--space-5);
    margin-left: auto;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-zaehler);
    color: var(--color-on-zaehler);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
}
.admin-zaehler--klein {
    position: absolute;
    top: calc(var(--space-2) * -1);
    right: calc(var(--space-2) * -1);
    margin-left: 0;
}

/* ---------- Inhalt ----------
   1080 px statt 900 (15.10.2026): Tabellen wie die Auftragsliste
   brauchten sonst einen Rollbalken, und Desktop-Bildschirme haben den
   Platz. Darunter schrumpft der Inhalt wie bisher mit. */
.admin-inhalt {
    padding: var(--space-8) var(--space-6);
    max-width: 1080px;
}

.admin-h1 {
    margin: 0 0 var(--space-6);
    font-size: var(--text-2xl);
    font-weight: var(--weight-heading);
    letter-spacing: -.01em;
}

.admin-karte-innen {
    padding: var(--space-6);
    border: var(--linie);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

/* ---------- Kennzahlen ---------- */
.admin-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.admin-zahl {
    padding: var(--space-4);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.admin-zahl__wert {
    font-size: var(--text-2xl);
    line-height: 1.1;
    color: var(--color-text);
}

.admin-zahl__text {
    margin-top: var(--space-05);
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
}

/* ==================================================================
   Schmale Bildschirme

   Die Navigation faehrt als Schublade von links ein. Der Schalter ist
   eine Checkbox - dadurch braucht das Auf- und Zuklappen kein
   JavaScript.
   ================================================================== */
@media (max-width: 860px) {
    .admin-dash__raster { grid-template-columns: minmax(0, 1fr); }

    .admin-nav {
        position: fixed;
        z-index: 20;
        top: 0;
        bottom: 0;
        left: 0;
        height: auto;            /* top und bottom bestimmen die Hoehe */
        width: min(280px, 84vw);
        transform: translateX(-100%);
        transition: transform .2s ease;
        background: var(--color-surface);
        border-right: 1px solid var(--color-divider);
        overflow-y: auto;
    }

    .admin-dash__schalter:checked ~ .admin-dash__raster .admin-nav { transform: translateX(0); }

    /* Schatten und Schliessen-Knopf gibt es nur hier - und nur, solange
       die Schublade offen ist. */
    .admin-dash__schalter:checked ~ .admin-schatten { display: block; }

    .admin-nav__zu { display: inline-flex; }

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

    .admin-inhalt { padding: var(--space-6) var(--space-4); }

    /* Auf schmalen Bildschirmen ist jeder Sprachknopf der kleine - eine
       Regel am Baustein, nicht je Ort (siehe .admin-sprache--klein). */
    .admin-sprache__text { display: none; }

    /* Mehr Luft: die Eintraege werden hoeher, damit man sie mit dem Daumen
       sicher trifft. */
    .admin-nav__punkt { padding-block: var(--space-3); font-size: var(--text-base); }
    .admin-nav__fuss .admin-nav__punkt { padding-block: var(--space-3); }
    .admin-konto__punkt { padding-block: var(--space-3); font-size: var(--text-base); }
    .admin-sprache__eintrag { padding-block: var(--space-3); }
    .admin-sprache__knopf { padding-block: var(--space-2); }

    /* Auch die Anmeldekarte darf hoeher atmen. */
    .admin-body { padding: var(--space-4); align-items: flex-start; padding-top: var(--space-8); }
    .admin-karte { padding: var(--space-6) var(--space-4) var(--space-6); }
    .admin-karte__kopf { margin-bottom: var(--space-4); }
    .admin-karte__kopf .admin-marke img { width: 160px; }

    .admin-feld { margin-bottom: var(--space-4); }
   /* 16px: iOS zoomt sonst beim Tippen */
}

/* ==================================================================
   Warte-Symbol

   Liegt mittig ueber dem Inhaltsbereich, solange nachgeladen wird. Der
   Inhalt darunter bleibt stehen und wird nur blasser - so springt das
   Layout nicht, und man sieht, wo man herkommt.
   ================================================================== */
.admin-warten {
    position: fixed;
    z-index: 40;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--color-divider);
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--schatten-warten);
}

.admin-warten__kreis {
    display: block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-divider);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: admin-dreht .7s linear infinite;
}

@keyframes admin-dreht {
    to { transform: rotate(360deg); }
}

/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt statt der
   Drehung ein ruhiges Pulsieren. */
@media (prefers-reduced-motion: reduce) {
    .admin-warten__kreis {
        animation: admin-pulst 1.2s ease-in-out infinite;
        border-top-color: var(--color-accent);
    }
    @keyframes admin-pulst {
        0%, 100% { opacity: .35; }
        50%      { opacity: 1; }
    }
}

.admin-inhalt.is-laedt {
    opacity: .45;
    pointer-events: none;
    transition: opacity .12s;
}

/* Nach dem Wechsel bekommt die Ueberschrift den Fokus - der Rahmen waere
   dort aber nur Zierat, gemeint ist die Vorleseposition. */
.admin-inhalt h1:focus { outline: none; }

/* ==================================================================
   Einstellungen
   ================================================================== */
.admin-block {
    margin-bottom: var(--space-6);
    padding: var(--space-6);
    border: var(--linie);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.admin-h2 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
}
/* Ueberschrift eines weiteren Abschnitts auf derselben Seite (etwa die
   Abonnenten unter der Newsletter-Liste): deutlich Luft nach oben, sonst
   klebt sie an der Tabelle davor. */
.admin-h2--abschnitt { margin-top: var(--space-12); }

/* Zustandsetikett neben der Ueberschrift: "Eingerichtet" oder nicht.
   Der aktive Zustand bekommt eine Linie in Akzentfarbe, keine Flaeche. */
.admin-status {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--color-neutral-400);
}

.admin-status.on {
    border-color: color-mix(in srgb, var(--color-ok) 55%, transparent);
    color: var(--color-ok);
}

/* ---------- QR-Code ----------
   Weisser Grund mit Rand: auf dem dunklen Untergrund koennen viele
   Kameras einen invertierten Code nicht lesen. */
.admin-qr__box {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
}

.admin-qr {
    display: block;
    width: 220px;
    height: 220px;
    padding: 0;
    border-radius: var(--radius-md);
    background: #ffffff;
}

/* ---------- Das Geheimnis zum Abtippen ----------
   Feste Zeichenbreite und Blockabstaende, damit man beim Uebertragen
   nicht die Zeile verliert. */
.admin-geheimnis {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-neutral-900) 70%, transparent);
    color: var(--color-text);
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-size: var(--text-base);
    letter-spacing: .08em;
    word-break: break-all;
    text-align: center;
    user-select: all;              /* ein Klick markiert alles */
}

/* Das Codefeld: sechs Ziffern, gross und weit gesetzt. */
.admin-eingabe--code {
    max-width: 220px;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-size: var(--text-xl);
    letter-spacing: .32em;
    text-align: center;
}

/* Innerhalb eines Blocks braucht die Aktionsleiste keine zweite Linie -
   der Block hat schon einen Rahmen. */
.admin-block .admin-aktionen {
    border-top: 0;
    padding-top: var(--space-2);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==================================================================
   Artikelverwaltung
   ================================================================== */
.admin-kopfzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.admin-kopfzeile .admin-h1 { margin: 0; }

.admin-h3 {
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
}

/* ---------- Filterzeile ---------- */
.admin-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
    margin-bottom: var(--space-6);
}

.admin-filter__feld { flex: 1 1 180px; min-width: 0; }
.admin-filter__feld .admin-eingabe { margin-top: 0; }

/* ---------- Tabelle ----------
   Der Rahmen scrollt waagerecht, nicht die Seite. Sonst wandert auf
   schmalen Bildschirmen das ganze Layout mit.

   position: relative ist Pflicht: die unsichtbaren Spaltentitel
   (.visually-hidden) sind absolut positioniert. Ohne positionierten
   Vorfahren haengen sie an der Seite statt am Rahmen, landen an der
   Stelle der letzten Spalte - rechts ausserhalb des Bildschirms - und
   die ganze Seite liess sich auf dem Handy nach rechts schieben. */
.admin-tabelle__rahmen {
    position: relative;
    overflow-x: auto;
    border: var(--linie);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.admin-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

/* Zellen brechen nicht um: "A-2026-0002", "21.11.2026 (1 Tag)" oder
   "60,00 €" bleiben auf einer Zeile. Wird die Tabelle dadurch breiter
   als der Bildschirm, scrollt sie in ihrem Rahmen (.admin-tabelle__rahmen),
   nicht die Seite. Seit 13.10.2026, auf Wunsch. */
.admin-tabelle th,
.admin-tabelle td {
    padding: var(--space-3) var(--space-3);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-divider);
    white-space: nowrap;
}

.admin-tabelle thead th {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-neutral-400);
    white-space: nowrap;
}

.admin-tabelle tbody tr:last-child td { border-bottom: 0; }
.admin-tabelle tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* Versteckte Artikel stehen blasser da - man sieht auf einen Blick,
   was der Besucher nicht zu sehen bekommt. */
.admin-tabelle tr.is-versteckt td { opacity: .55; }

.admin-tabelle__rechts { text-align: right; }
.admin-tabelle__bild { width: 68px; }

.admin-tabelle__bild img {
    display: block;
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-neutral-900);
}

.admin-tabelle__leer {
    display: block;
    width: 56px;
    height: 42px;
    border: 1px dashed var(--color-divider);
    border-radius: var(--radius-sm);
}

.admin-tabelle__zusatz {
    display: block;
    margin-top: var(--space-05);
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
}

.admin-etikett {
    display: inline-block;
    padding: 1px var(--space-2);
    white-space: nowrap;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
}

.admin-etikett--aus {
    border-color: color-mix(in srgb, var(--color-warnung) 45%, transparent);
    color: var(--color-warnung);
}


/* ---------- Formularraster ----------
   Felder im Raster tragen keinen eigenen Abstand nach unten - den gibt
   das Raster: zwischen den Reihen so viel wie zwischen zwei einzeln
   gestapelten Feldern (--space-4), nach dem Raster ebenso viel. So sehen
   Raster und Einzelfelder gleich aus, egal ob ein Feld direkt im Raster
   steht oder in einem eigenen <div> (Kundenkonto). Vorher hing der
   Abstand am Feld, und .admin-block .admin-feld:last-child nahm ihn
   jedem Feld in einem <div> weg - "Strasse" klebte am Raster darueber. */
.admin-zwei,
.admin-vier {
    display: grid;
    gap: var(--space-4) var(--space-3);
    margin-bottom: var(--space-4);
}
.admin-zwei .admin-feld,
.admin-vier .admin-feld { margin-bottom: 0; }

/* Die Fehlermeldung unter einem Feld (AccountField, Annahme von Hand):
   immer --space-2 unter dem Feld, egal ob es allein steht (dort hat es
   sonst --space-4) oder im Raster (dort 0). Vorher hing der Abstand am
   Platz des Felds - unter "Strasse" luftig, unter PLZ und Ort klebend
   (Betreiber, 11.11.2026). Steht hinter der Rasterregel, damit sie auch
   dort gilt. */
.admin-feld:has(+ .admin-hinweis--fehler) { margin-bottom: var(--space-2); }

.admin-zwei { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.admin-vier { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* Datum, kurze Zahl, Datum (Angebot: Erster Miettag, Miettage, Gueltig
   bis). Die Zahl braucht drei Ziffern, ein Datum auf dem Handy aber die
   ganze halbe Breite - in gleich breiten Spalten wurde es abgeschnitten.
   Schmal rutscht das zweite Datum unter das erste. */
.admin-vier--datum { grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 1fr); }
@media (max-width: 520px) {
    .admin-vier--datum { grid-template-columns: minmax(0, 1fr) 6.5rem; }
}

/* Ein Feld, das mehr Platz braucht als seine Nachbarn.

   Es braucht ZWEI Angaben, weil die Klasse in zwei verschiedenen
   Umgebungen vorkommt: in der Flexzeile .admin-zuwahl wirkt die
   flex-Angabe, in den Rastern .admin-zwei und .admin-vier nur die
   Spaltenangabe. Fehlt eine davon, tut die Klasse dort still gar nichts -
   das Feld bleibt so schmal wie die anderen, seine Beschriftung bricht
   um, und das Eingabefeld rutscht gegenueber der Zeile nach unten. Genau
   so ist es in der Lagermaske passiert. */
.admin-feld--breit { flex: 1 1 260px; }
.admin-zwei > .admin-feld--breit,
.admin-vier > .admin-feld--breit { grid-column: span 2; }

.admin-haken {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-neutral-300);
}

/* Aussehen und Hand: css/bausteine.css. Hier nur die Lage neben dem Text. */
.admin-haken input { margin-top: var(--space-1); }

/* ---------- Beispielrechnung zur Preisstaffel ----------
   Zeigt sofort, was die vier Betraege in Summe bedeuten. Serverseitig
   gefuellt; das Skript rechnet beim Tippen mit. */
.admin-beispiel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    align-items: baseline;
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-neutral-900) 60%, transparent);
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
}

.admin-beispiel__titel {
    flex: 1 0 100%;
    font-size: var(--text-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-beispiel__zeile { display: inline-flex; gap: var(--space-2); align-items: baseline; }
.admin-beispiel__zeile strong { color: var(--color-text); font-weight: 500; }

/* ---------- Foto ---------- */
.admin-bild {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.admin-bild img {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    background: var(--color-neutral-900);
}

/* ---------- Zubehoerliste ---------- */
.admin-zuliste {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    border-top: 1px solid var(--color-divider);
}

.admin-zuliste li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-divider);
    font-size: var(--text-sm);
}

/* ---------- Dialog ----------

   Ein <dialog> ohne "open" ist von selbst zu - ohne eine Zeile
   JavaScript. Mit "open" steht es aufgeklappt IN der Seite, mit
   showModal() als Fenster darueber. Genau darauf baut die Lagerkarte:
   ohne JavaScript bringt der Bearbeiten-Link die Seite mit offenem
   Dialog zurueck, mit JavaScript oeffnet er ihn an Ort und Stelle.

   Deshalb zwei Fassungen: aufgeklappt in der Seite (volle Breite, wie
   ein Kasten) und als Fenster (schmaler, mittig, mit Hintergrund). */
.admin-dialog {
    width: 100%;
    max-width: 680px;
    margin: var(--space-4) 0;
    padding: var(--space-6);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
}
.admin-dialog:modal {
    margin: auto;
    max-height: calc(100vh - 2 * var(--space-8));
}
.admin-dialog::backdrop { background: rgba(0, 0, 0, .55); }

.admin-dialog .admin-h2 { margin-top: 0; }

/* ---------- Das Kreuz oben rechts ----------
   Die Leiste klebt beim Scrollen oben. In einem langen Fenster - auf dem
   Telefon ist das die Regel - waere ein Kreuz, das mit dem Inhalt nach
   oben verschwindet, genau dann weg, wenn man es sucht.

   Die negativen Raender ziehen die Leiste ueber das Polster des
   Fensters: sonst liefe der Inhalt beim Scrollen daneben durch, weil
   ein klebendes Element erst an der Polsterkante haengenbleibt. */
.admin-dialog__kopf {
    position: sticky;
    /* Nicht top: 0. Ein klebendes Element haengt an der INHALTSKANTE des
       Fensters, also unterhalb des Polsters - die Leiste rutschte damit
       um ein Polster nach unten und saesse nicht mehr in der Ecke. Der
       negative Haltepunkt hebt sie genau um dieses Polster an, sodass
       sie buendig oben sitzt und dort auch beim Scrollen bleibt. */
    top: calc(var(--space-6) * -1);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-2);
    background: var(--color-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.admin-dialog__x {
    /* Immer rechts aussen, auch wenn links kein Entfernen steht. */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40 px: gross genug fuer einen Daumen, ohne als Knopf zu wirken. */
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    opacity: .7;
    transition: opacity .12s, background .12s;
}
.admin-dialog__x:hover,
.admin-dialog__x:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    text-decoration: none;
}
.admin-dialog__x .admin-icon { width: 20px; height: 20px; }

/* Abbrechen und Speichern am Fuss, rechts - wie in den anderen Masken. */
.admin-dialog__fuss {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--space-6);
}

/* Das Entfernen steht oben links in der Kopfleiste, gegenueber dem
   Kreuz (partials/dialog-close.php). Nicht in einer Reihe mit dem
   Speichern unten rechts, sonst klickt man es im Vorbeigehen. */
.admin-dialog__weg {
    /* Im Quelltext steht es hinter dem Kreuz (Fokus beim Oeffnen, siehe
       dialog-close.php), angezeigt wird es links davor. */
    order: -1;
    margin: 0;
}

.admin-zuwahl {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
    /* Luft zur Tabelle bzw. Liste darueber - ohne sie klebt die Zeile
       "hinzufuegen" an der letzten Position. */
    margin-top: var(--space-8);
}

.admin-zuwahl .admin-feld { margin-bottom: 0; }
.admin-zuwahl .admin-eingabe { margin-top: 0; }

/* ---------- Texte je Sprache (Paketformular) ----------
   Ein <fieldset> je Sprache, damit Screenreader die Gruppe kennen. Den
   Browser-Rahmen und die eingerueckte Legende braucht das nicht - die
   Legende wird eine Zwischenueberschrift wie .admin-h3. min-width: 0,
   weil ein Fieldset sonst nicht schmaler als sein Inhalt wird und auf
   dem Handy aus der Karte ragt. */
.admin-sprachfeld {
    min-width: 0;
    margin: 0 0 var(--space-2);
    padding: 0;
    border: 0;
}

.admin-sprachfeld legend {
    padding: 0;
    margin: var(--space-3) 0 var(--space-2);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text);
}

.admin-sprachfeld + .admin-sprachfeld legend { margin-top: var(--space-4); }

/* ---------- Paketinhalt ----------
   Je Zeile ein kleines Formular: Mengenfeld und Haken nebeneinander. Das
   Feld ist so breit wie drei Ziffern brauchen - mehr Stueck als 999
   passen in kein Paket. */
.admin-mengeform {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.admin-eingabe--menge {
    width: 72px;
    margin-top: 0;
    text-align: right;
}

/* ---------- Paketpreis ----------
   Drei Zeilen wie die Datenliste auf der Uebersicht: normaler Gesamtpreis,
   Eingabefeld, Ersparnis. Der Zusatz unter dem Begriff ist der Hinweis,
   der bei einem Feld sonst unter dem Feld stuende. */
.admin-preisliste { margin-bottom: 0; }
.admin-preisliste dt { display: flex; flex-direction: column; gap: var(--space-05); flex: 1 1 200px; min-width: 0; }
.admin-preisliste dd { flex: 0 0 auto; margin-left: auto; }

/* Wird es schmal, rutscht der Betrag unter den Begriff - rechtsbuendig,
   dank margin-left: auto. Ohne den Umbruch ragte die Zeile auf dem Handy
   ueber die Karte hinaus. */
.admin-preisliste .admin-liste__zeile { align-items: center; flex-wrap: wrap; }

.admin-preisfeld {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-neutral-400);
}

.admin-eingabe--preis {
    width: 120px;
    margin-top: 0;
    text-align: right;
}

/* Der Loeschblock hebt sich ab - hier soll niemand aus Versehen klicken. */
.admin-block--warnung { border-color: color-mix(in srgb, var(--color-fehler) 35%, var(--color-divider)); }
.admin-block--warnung .admin-h2 { color: var(--color-fehler); }

.admin-aktionen--gross { margin-bottom: var(--space-8); }
/* Steht die Knopfzeile zwischen zwei Karten ("Speichern" vor "Per
   E-Mail senden"), braucht die naechste Karte Abstand - sonst klebt sie
   am Knopf. */
.admin-aktionen + .admin-block { margin-top: var(--space-8); }

/* ==================================================================
   Registerkarten im Artikel- und Standortformular

   Gebaut aus versteckten Radioknoepfen und ihren Beschriftungen. Kein
   JavaScript noetig, und die Tastaturbedienung stimmt von selbst: die
   Pfeiltasten laufen durch die Gruppe, genau wie man es von Reitern
   erwartet.

   Die Knoepfe sind NICHT display:none - sonst waeren sie nicht mehr
   erreichbar. Sie liegen unsichtbar an derselben Stelle; der Fokusrahmen
   wandert per Selektor auf die zugehoerige Beschriftung.
   ================================================================== */
.admin-reiter { position: relative; }

/* Der versteckte Radioknopf liegt im Etikett - der Bezugspunkt dafuer
   steht bei .admin-reiter__knopf (position: relative). */
.admin-reiter__wahl {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Die Reiter ----------
   Eine Reihe runder Knoepfe, kein an das Blatt angeklebter Karteireiter.
   Grund: der angeklebte Reiter braucht Ecken, die exakt aufeinander
   liegen, und eine Leiste, die nie umbricht. Auf schmalen Bildschirmen
   ging beides schief - die Leiste musste scrollen, die -1px-Ueberlappung
   erzeugte einen zweiten Rollbalken, und die abgerundete Ecke des
   Blatts stand neben statt unter dem offenen Reiter.

   Runde Knoepfe, die umbrechen duerfen, kennen das Problem nicht: sie
   sehen bei 1200 px genauso aus wie bei 400 px, nur in zwei Zeilen. Das
   Blatt darunter ist eine normale Karte mit vier runden Ecken.
   Gleiche Form wie die Sprachwahl im Blatt, nur eine Stufe groesser. */
.admin-reiter__leiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.admin-reiter__knopf {
    /* Bezugspunkt fuer den versteckten Radioknopf darin - ohne das legt
       er sich an die naechste positionierte Kiste weiter oben. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color .15s, background-color .15s, border-color .15s;
}

.admin-reiter__knopf:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

/* Die offene Karte: gefuellt wie der aktive Menuepunkt - man soll auf
   einen Blick sehen, worauf man steht.

   Hier stand frueher eine Liste mit einer Zeile je Karte, weil der
   Radioknopf VOR der Leiste stand und CSS zwei Attributwerte nicht
   vergleichen kann. Eine vergessene Zeile hiess: Karte oeffnet sich,
   Knopf bleibt grau - genau das war beim FAQ-Reiter der Fall, und es
   faellt nur auf, wenn jemand hinsieht.

   Seit der Radioknopf IM Etikett steht, findet :has() das Paar selbst.
   Eine neue Karte braucht keine Zeile mehr im Stylesheet. */
.admin-reiter__knopf:has(.admin-reiter__wahl:checked) {
    color: var(--color-on-accent);
    border-color: var(--color-accent);
    background: var(--color-accent);
    font-weight: 600;
}

/* Tastatur: der Rahmen muss sichtbar sein, obwohl der Knopf es nicht ist. */
.admin-reiter__knopf:has(.admin-reiter__wahl:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.admin-reiter__punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-fehler);
    flex: 0 0 auto;
}

/* ---------- Die Blaetter ----------
   Eine Karte wie .admin-block, unter der Knopfreihe. */
.admin-reiter__blatt {
    display: none;
    padding: var(--space-6);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

/* Welches Blatt sichtbar ist, bleibt namentlich verdrahtet: CSS kann
   den Wert von data-reiter nicht mit dem von data-blatt vergleichen, und
   eine Zuordnung ueber die Reihenfolge waere stiller kaputt, sobald
   jemand die Karten umsortiert. Eine vergessene Zeile faellt hier aber
   sofort auf - die Karte oeffnet sich dann gar nicht.
   werkzeuge/reiter-pruefen.php haelt die Liste gegen die Karten. */
.admin-reiter:has([data-reiter="grund"]:checked)     [data-blatt="grund"],
.admin-reiter:has([data-reiter="preise"]:checked)    [data-blatt="preise"],
.admin-reiter:has([data-reiter="bestand"]:checked)   [data-blatt="bestand"],
.admin-reiter:has([data-reiter="inhalt"]:checked)    [data-blatt="inhalt"],
.admin-reiter:has([data-reiter="merkmale"]:checked)  [data-blatt="merkmale"],
.admin-reiter:has([data-reiter="faq"]:checked)       [data-blatt="faq"],
.admin-reiter:has([data-reiter="fotos"]:checked)     [data-blatt="fotos"],
.admin-reiter:has([data-reiter="zubehoer"]:checked)  [data-blatt="zubehoer"],
.admin-reiter:has([data-reiter="adresse"]:checked)   [data-blatt="adresse"],
.admin-reiter:has([data-reiter="kontakt"]:checked)   [data-blatt="kontakt"],
.admin-reiter:has([data-reiter="hinweis"]:checked)   [data-blatt="hinweis"],
.admin-reiter:has([data-reiter="impressum"]:checked) [data-blatt="impressum"],
.admin-reiter:has([data-reiter="urlaub"]:checked)    [data-blatt="urlaub"],
.admin-reiter:has([data-reiter="varianten"]:checked) [data-blatt="varianten"],
.admin-reiter:has([data-reiter="lager"]:checked)      [data-blatt="lager"] { display: block; }

/* Rueckfallebene fuer Browser ohne :has(): lieber alle Karten
   untereinander als eine leere Seite. Das Formular bleibt vollstaendig
   bedienbar, es ist nur laenger. */
@supports not selector(:has(*)) {
    .admin-reiter__blatt { display: block; }
}

.admin-reiter__blatt > .admin-h2:not(:first-child) { margin-top: var(--space-8); }

/* ---------- Mini-FAQ je Artikel ----------
   Eine Zeile ist ein fieldset: Frage und Antwort gehoeren zusammen, und
   der Rahmen zeigt das auch dann, wenn zehn Zeilen untereinander
   stehen. Die Nummer in der legend ist der einzige Anhaltspunkt dafuer,
   welche Zeile die Fehlermeldung meint. */
.admin-faqzeile {
    margin: var(--space-4) 0 0;
    padding: var(--space-4);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}
.admin-faqzeile__nr {
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-neutral-400);
}
.admin-faqzeile .admin-feld + .admin-feld { margin-top: var(--space-3); }

/* Die Speicherleiste gehoert zu den Karten mit Feldern des
   Hauptformulars. Fotos, Zubehoer und der Paketinhalt haben eigene
   Knoepfe - zwei Knoepfe nebeneinander, die Verschiedenes tun, waeren
   eine Falle. */
.admin-reiter__fuss {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-8);
}

.admin-reiter:has([data-reiter="fotos"]:checked)    .admin-reiter__fuss,
.admin-reiter:has([data-reiter="inhalt"]:checked)   .admin-reiter__fuss,
.admin-reiter:has([data-reiter="zubehoer"]:checked) .admin-reiter__fuss,
.admin-reiter:has([data-reiter="varianten"]:checked) .admin-reiter__fuss,
.admin-reiter:has([data-reiter="urlaub"]:checked)   .admin-reiter__fuss { display: none; }

/* Auf schmalen Bildschirmen fuellen die Knoepfe die Zeile zu zweit -
   nichts scrollt, nichts steht ueber. */
@media (max-width: 620px) {
    .admin-reiter__knopf { flex: 1 1 40%; padding: var(--space-3) var(--space-3); }
    .admin-reiter__blatt { padding: var(--space-4); }
}

/* ==================================================================
   Loeschen
   ================================================================== */
.admin-kopfzeile__aktionen {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Dieselbe Knopfreihe in einer rechtsbuendigen Tabellenzelle - etwa
   "Deaktivieren" und "Bearbeiten" in der Standortliste. */
.admin-tabelle__rechts .admin-kopfzeile__aktionen { justify-content: flex-end; }
.admin-tabelle__rechts .admin-kopfzeile__aktionen form { margin: 0; }



.admin-loeschkopf {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.admin-loeschkopf img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-neutral-900);
    flex: 0 0 auto;
}

.admin-loeschname {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-text);
}

.admin-folgen {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-neutral-300);
}

.admin-folgen li { margin-bottom: var(--space-05); }

/* Abbrechen links, Loeschen rechts: der Weg zurueck liegt dort, wo die
   Hand ohnehin ist, und der gefaehrliche Knopf nicht daneben. */
.admin-aktionen--verteilt { justify-content: space-between; align-items: center; }

/* ==================================================================
   Sprachwahl im Artikelformular

   Dieselbe Mechanik wie die Registerkarten: eine zweite Gruppe
   versteckter Radioknoepfe, ihre Beschriftungen sitzen als Leiste am
   Kopf jeder Karte mit Sprachfeldern.

   Die Knoepfe heissen sprache-1 bis sprache-8, nicht sprache-de und
   sprache-en. Grund: CSS kann keine Paare erzeugen, die es noch nicht
   kennt, und im Adminbereich ist ein Inline-Stylesheet durch die CSP
   ausgeschlossen. Acht Nummern reichen fuer acht Sprachen; erst die
   neunte braucht hier wieder eine Zeile.
   ================================================================== */
.admin-sprachwahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 var(--space-6);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-divider);
}

.admin-sprachwahl__titel {
    margin-right: var(--space-2);
    font-size: var(--text-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

.admin-sprachwahl__knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
    cursor: pointer;
    user-select: none;
    transition: color .15s, background-color .15s, border-color .15s;
}

.admin-sprachwahl__knopf:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

#sprache-1:checked ~ [data-blatt] [data-sprache-nr="1"],
#sprache-2:checked ~ [data-blatt] [data-sprache-nr="2"],
#sprache-3:checked ~ [data-blatt] [data-sprache-nr="3"],
#sprache-4:checked ~ [data-blatt] [data-sprache-nr="4"],
#sprache-5:checked ~ [data-blatt] [data-sprache-nr="5"],
#sprache-6:checked ~ [data-blatt] [data-sprache-nr="6"],
#sprache-7:checked ~ [data-blatt] [data-sprache-nr="7"],
#sprache-8:checked ~ [data-blatt] [data-sprache-nr="8"] {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

#sprache-1:focus-visible ~ [data-blatt] [data-sprache-nr="1"],
#sprache-2:focus-visible ~ [data-blatt] [data-sprache-nr="2"],
#sprache-3:focus-visible ~ [data-blatt] [data-sprache-nr="3"],
#sprache-4:focus-visible ~ [data-blatt] [data-sprache-nr="4"],
#sprache-5:focus-visible ~ [data-blatt] [data-sprache-nr="5"],
#sprache-6:focus-visible ~ [data-blatt] [data-sprache-nr="6"],
#sprache-7:focus-visible ~ [data-blatt] [data-sprache-nr="7"],
#sprache-8:focus-visible ~ [data-blatt] [data-sprache-nr="8"] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ---------- Die Felder je Sprache ----------
   Alle Sprachen stehen im HTML und werden mit abgeschickt; sichtbar ist
   nur die gewaehlte. Deshalb verliert ein Sprachwechsel nichts und
   "Speichern" nimmt alle Sprachen mit. */
.admin-sprachblatt { display: none; }

#sprache-1:checked ~ [data-blatt] [data-sprachblatt="1"],
#sprache-2:checked ~ [data-blatt] [data-sprachblatt="2"],
#sprache-3:checked ~ [data-blatt] [data-sprachblatt="3"],
#sprache-4:checked ~ [data-blatt] [data-sprachblatt="4"],
#sprache-5:checked ~ [data-blatt] [data-sprachblatt="5"],
#sprache-6:checked ~ [data-blatt] [data-sprachblatt="6"],
#sprache-7:checked ~ [data-blatt] [data-sprachblatt="7"],
#sprache-8:checked ~ [data-blatt] [data-sprachblatt="8"] { display: block; }

/* ---------- Die Fassung der Grundsprache ----------
   Steht unter dem Feld, das sie uebersetzt. Eingerueckt und leise, damit
   sie beim Lesen nicht mit der Eingabe verwechselt wird. */
.admin-vorlage {
    display: flex;
    gap: var(--space-2);
    margin: calc(var(--space-3) * -1) 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--color-neutral-400);
}

.admin-vorlage__marke {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

/* Mehrzeiliges (Beschreibung, Eigenschaften) behaelt seine Umbrueche -
   sonst klebte eine Liste zu einem Absatz zusammen. */
.admin-vorlage__text { white-space: pre-line; min-width: 0; }

/* Trennt die sprachabhaengigen Felder von denen, die fuer alle
   Sprachen gelten. */
.admin-trenner {
    height: 0;
    margin: var(--space-6) 0;
    border: 0;
    border-top: 1px solid var(--color-divider);
}

@media (max-width: 620px) {
    .admin-sprachwahl__titel { flex: 1 0 100%; margin-bottom: var(--space-1); }
    .admin-vorlage { flex-direction: column; gap: var(--space-05); }
}

/* Vergangene Urlaube in der Liste: bleiben sichtbar, treten aber zurueck. */
.admin-zuliste li.is-vorbei { opacity: .55; }

/* ---------- Schlagworte mit Symbol (Artikelformular) ----------
   Eine Zeile je Etikett: links die Symbolauswahl mit Vorschau, rechts
   der Text. Auf dem Handy bricht die Zeile um. Die Vorschau ist ein
   Symbol aus dem Sprite der Webseite, das AdminSprite() einbettet. */
.admin-tagliste {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.admin-tagzeile {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}
.admin-tagzeile .admin-feld { margin-bottom: 0; }
.admin-tagzeile .admin-eingabe { margin-top: 0; }
.admin-tagzeile__symbol { flex: 0 1 240px; }
.admin-tagzeile__symbol--fest { flex: 0 0 auto; }
.admin-tagzeile__text { flex: 1 1 200px; }
.admin-tagzeile__wahl {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.admin-tagzeile__vorschau {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: currentColor;
    color: var(--color-accent);
}

/* ---------- Hinweisbox (Artikel- und Paketformular) ----------
   Die Symbolauswahl der Karte "Hinweis". Sie borgt sich Vorschau und
   Anordnung bei den Schlagworten (.admin-tagzeile__wahl) - es ist
   dieselbe Auswahl, nur einmal statt je Zeile. Deshalb steht hier auch
   nur, was sich unterscheidet: sie ist breiter als eine Tagzeile, und
   in einer Uebersetzung steht das Symbol zur Erinnerung neben dem Satz,
   der sagt, dass es fuer alle Sprachen gilt. */
.admin-infosymbol { max-width: 420px; }
.admin-infosymbol .admin-tagzeile__wahl { margin-top: var(--space-1); }
.admin-infosymbol__fest {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ---------- Video (Artikelformular) ----------
   Kleiner Player in der Breite des Fotos, daneben Groesse und der Knopf
   zum Entfernen. */
.admin-video__player {
    display: block;
    width: 240px;
    max-width: 100%;
    border-radius: var(--radius-md);
    background: #000;
}
.admin-stack { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Newsletter: Baukasten und Versand ----------
   Ein Block ist eine Karte mit Typ, Aktionen (hoch, runter, weg) und
   den Feldern des Typs. Die Rueckfrage-Box dient auch fuer Loeschen
   und Versandfortschritt. */
.admin-rueckfrage {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.admin-rueckfrage .admin-text { margin-top: 0; }
.admin-aktionen--oben { margin-bottom: var(--space-4); }
.admin-bloecke {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.admin-block {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-neutral-900) 40%, transparent);
}
.admin-block__kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.admin-block__typ {
    font-size: var(--text-sm);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-neutral-300);
}
.admin-block .admin-feld:last-child,
.admin-block > .admin-zwei:last-child,
.admin-block > .admin-vier:last-child { margin-bottom: 0; }
.admin-block-neu { margin-bottom: var(--space-4); }
.admin-fortschritt {
    display: block;
    width: 100%;
    height: 10px;
    margin: var(--space-2) 0 var(--space-3);
    accent-color: var(--color-accent);
}

/* ==================================================================
   Farbschema-Schalter und Logo in zwei Fassungen
   ================================================================== */

/* Rechts in der Kopfzeile der Karte stehen Sprache und Schema nebeneinander. */
.admin-karte__werkzeuge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Der Schalter: ein runder Knopf wie die Initiale des Kontos, nur mit
   Sonne oder Mond darin. */
.admin-schema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-divider);
    border-radius: 50%;
    color: var(--color-neutral-300);
    text-decoration: none;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.admin-schema:hover {
    color: var(--color-accent);
    border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.admin-schema:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.admin-schema .admin-icon { width: 17px; height: 17px; }

/* Dunkles Schema: die Sonne (Klick macht hell). Helles: der Mond. */
.admin-schema__mond { display: none; }
:root[data-farbschema="hell"] .admin-schema__sonne { display: none; }
:root[data-farbschema="hell"] .admin-schema__mond  { display: block; }

/* Das Logo liegt zweimal im HTML (AdminLogo in adminlayout.php) - helle
   Schrift fuer den dunklen Grund, dunkle fuer den hellen. */
.admin-logo.admin-logo--hell { display: none; }
:root[data-farbschema="hell"] .admin-logo.admin-logo--dunkel { display: none; }
:root[data-farbschema="hell"] .admin-logo.admin-logo--hell   { display: block; }

/* ==================================================================
   Wo die Hausfarbe bleibt

   Drei Stellen, und alle drei beantworten dieselbe Frage: "wo bin ich?"
   Der aktive Menuepunkt, der offene Reiter, der Knopf, der die Sache
   abschliesst. Dazu der Fokusrahmen, der dasselbe fuer die Tastatur tut.

   Was hier vorher stand und weg ist: ein Farbstreifen oben auf der
   Anmeldekarte, ein gelber Schein um sie herum, Verlaufskanten an
   Seiten- und Kopfleiste, ein Akzentanteil in JEDEM Rahmen, gelbe
   Tabellenkoepfe, ein Verlauf in den Kennzahlkacheln, ein Akzentstrich
   unter jeder Ueberschrift. Jedes einzelne war vertretbar; zusammen war
   die Hausfarbe ueberall, und damit sagte sie nichts mehr.
   ================================================================== */

/* Das Auge im Passwortfeld reagiert im Akzent - es ist ein Schalter. */
.admin-karte .admin-auge:hover { color: var(--color-accent); }

/* Der aktive Menuepunkt ist die Flaeche, die auf JEDER Adminseite zu
   sehen ist - deshalb traegt gerade er die Hausfarbe voll. */
.admin-nav__punkt.on {
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 600;
}
.admin-nav__punkt.on::before { display: none; }
.admin-nav__punkt.on .admin-icon { color: var(--color-on-accent); }

/* Aufhellen nur bei den NICHT aktiven Punkten. Ohne das :not() galt die
   Aufhellung auch fuer den aktiven: blassgelbes Symbol auf gelber
   Flaeche, beim Ueberfahren praktisch unsichtbar. Beide Regeln sind
   gleich spezifisch, also gewinnt die spaetere - und das war diese. */
.admin-nav__punkt:not(.on):hover .admin-icon { color: var(--color-accent-300); }

/* Der aktive Punkt reagiert trotzdem: die Flaeche wird eine Spur heller,
   Schrift und Symbol bleiben dunkel. */
.admin-nav__punkt.on:hover {
    background: color-mix(in srgb, var(--color-accent) 88%, #fff);
    color: var(--color-on-accent);
}
.admin-nav__punkt.on:hover .admin-icon { color: var(--color-on-accent); }

/* Der aufgeklappte Gruppenkopf (z. B. "Artikel") bleibt ruhig - sonst
   leuchteten zwei Punkte gleichzeitig. Die Flaeche gehoert dem
   Unterpunkt, auf dem man wirklich steht. */
.admin-nav .admin-nav__punkt--gruppe.on {
    background: transparent;
    color: var(--color-accent-300);
    font-weight: 600;
    /* Kein Kissen: der Gruppenkopf ist keine Flaeche, sonst schwebte um
       "Artikel" ein leerer Rahmen. */
    box-shadow: none;
}
.admin-nav .admin-nav__punkt--gruppe.on .admin-icon { color: var(--color-accent); }

/* Seiten- und Kopfleiste grenzen sich mit einer Linie ab. Hier lagen
   Verlaufskanten von Gelb nach Cyan, dazu ein warmer und ein kuehler
   Hauch in der Leiste. */
.admin-nav    { border-right: var(--linie); background-image: none; }
.admin-topbar { border-bottom: var(--linie); background-image: none; }

/* Der Seitentitel trug einen kurzen Akzentstrich. Eine Ueberschrift, die
   gross und fett genug ist, braucht keine Unterstreichung dazu. */
.admin-h1 { padding-bottom: 0; }

/* Die Kennzahlkacheln der Uebersicht: Flaeche und Kante wie jede andere
   Karte, die Zahl gross. Vorher lag ein Verlauf in der Hausfarbe darin
   und oben eine 3 px Kante von Gelb nach Cyan - das Erste nach der
   Anmeldung sah aus wie ein Werbebanner. */
.admin-zahl__wert {
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--color-text);
}

/* Tabellenkopf: eine sehr leise Flaeche, damit er sich von den Zeilen
   abhebt, ohne die Liste zu zerschneiden. Er war gelb hinterlegt. */
.admin-tabelle thead th {
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
    color: var(--color-neutral-300);
    font-weight: 600;
}

/* Etiketten in Listen ("Sichtbar", "Versteckt") sind Auskunft, keine
   Aktion - graue Kante, graue Schrift. */
.admin-etikett {
    border-color: color-mix(in srgb, var(--color-text) 22%, transparent);
    color: var(--color-neutral-400);
}


/* Sprach-, Schema- und Kontoknopf reagieren mit der Schriftfarbe - es
   sind Schalter in der Kopfleiste, keine Hauptaktionen. */
.admin-sprache__knopf:hover,
.admin-konto__knopf:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

/* ==================================================================
   Artikel je Standort
   ================================================================== */

/* Stammdaten-Karten fuer Standort-Admins: ein disabled-Fieldset ohne
   eigenes Aussehen - die Felder sind gesperrt, der Hinweis darueber
   sagt warum. */
.admin-nurlesen { border: 0; padding: 0; margin: 0; min-width: 0; opacity: .72; }
.admin-nurlesen__hinweis { margin-bottom: var(--space-4); color: var(--color-accent-300); }

/* Standortschalter in Kopfzeilen: Auswahl und Knopf in einer Reihe. */
.admin-standortschalter { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.admin-standortschalter .admin-feld { margin: 0; }
.admin-standortschalter .admin-eingabe { min-width: 160px; }
.admin-standortkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.admin-standortkopf .admin-h2 { margin: 0; }

/* ==================================================================
   Ausfuehrungen (Varianten)

   Die Liste in der Artikelkarte und die Farbwahl im Variantenformular.
   Der farbige Punkt selbst kommt aus VariantSwatch() und traegt die
   Klassen der Webseite (np-swatch) - die Form steht hier, damit die
   Verwaltung nicht das ganze Stylesheet der Seite laden muss.
   ================================================================== */
.np-swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
}
.np-swatch--foto { background: var(--color-neutral-300); }
.np-swatch--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-swatch--leer {
    background: repeating-linear-gradient(45deg,
        var(--color-neutral-400) 0 3px, var(--color-neutral-300) 3px 6px);
}

.admin-variantenliste {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    border-top: 1px solid var(--color-divider);
}
.admin-variantenliste__zeile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-divider);
    font-size: var(--text-sm);
}
/* Eine versteckte Ausfuehrung bleibt lesbar, tritt aber zurueck - wie
   ein vergangener Urlaub in der Standortkarte. */
.admin-variantenliste__zeile.is-versteckt { opacity: .55; }
.admin-variantenliste__text { display: flex; flex-direction: column; gap: var(--space-05); min-width: 0; flex: 1 1 auto; }
.admin-variantenliste__preis { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-05); text-align: right; }

/* ---------- Die Farbwahl ----------
   Der Waehler des Browsers und daneben das Kaestchen "ohne Farbe":
   <input type="color"> hat keinen leeren Zustand, ohne den Schalter
   liesse sich eine einmal gesetzte Farbe nie wieder loswerden. */
.admin-farbwahl { display: flex; align-items: center; gap: var(--space-3); }
.admin-farbwahl__feld {
    width: 56px;
    height: 38px;
    padding: var(--space-05);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
}
.admin-farbwahl .admin-haken { margin: 0; }

/* ---------- Weitere Fotos ---------- */
.admin-fotos {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
}
.admin-fotos__eintrag {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}
.admin-fotos__eintrag img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    display: block;
}

/* Der Preisblock einer Ausfuehrung, solange "eigene Preise" aus ist.
   Nur zurueckgenommen, nicht gesperrt: wer den Schalter umlegt, soll
   die Werte schon dastehen sehen und nicht erst freischalten muessen. */
[data-preisfelder].is-aus { opacity: .45; }

/* Der Weg zu Preisen und Fotos im Fuss eines Fensters. Er steht links
   und abgesetzt: er verlaesst das Fenster, waehrend Abbrechen und
   Speichern es schliessen. margin-right:auto schiebt die beiden nach
   rechts, ohne dass der Fuss eine zweite Reihe braucht. */
.admin-dialog__weiter { margin-right: auto; }


/* ==================================================================
   Akkordeon (seit 13.10.2026, erster Einsatz: Positionen im Angebot)

   Ein <details> je Eintrag. Zu: eine Zeile mit Titel links, Wert rechts
   und dem Pfeil - so liest sich die Liste wie die Summenuebersicht.
   Auf: die Felder darunter. Ohne JavaScript voll bedienbar.
   ================================================================== */
.admin-akkordeon-liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.admin-akkordeon {
    border: var(--linie);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.admin-akkordeon__kopf {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    list-style: none;
    cursor: pointer;
}
.admin-akkordeon__kopf::-webkit-details-marker { display: none; }
.admin-akkordeon__titel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    color: var(--color-text);
}
.admin-akkordeon__wert {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--color-text);
    font-weight: 600;
}
.admin-akkordeon__kopf > .admin-icon {
    color: var(--color-neutral-400);
    transition: transform .15s;
}
.admin-akkordeon[open] > .admin-akkordeon__kopf > .admin-icon { transform: rotate(180deg); }
.admin-akkordeon__inhalt {
    padding: var(--space-2) var(--space-4) var(--space-4);
    border-top: var(--linie);
}
.admin-akkordeon__inhalt > .admin-haken { margin-bottom: 0; }

/* Zum Entfernen markiert: blass und durchgestrichen, bis gespeichert ist. */
.admin-akkordeon:has(.admin-akkordeon__weg:checked) { opacity: .55; }
.admin-akkordeon:has(.admin-akkordeon__weg:checked) .admin-akkordeon__titel,
.admin-akkordeon:has(.admin-akkordeon__weg:checked) .admin-akkordeon__wert { text-decoration: line-through; }

/* Ein Abschnitt innerhalb einer Karte, mit Linie abgesetzt
   ("Aus der Anfrage entfernt", "Position hinzufuegen"). */
.admin-unterblock {
    margin-top: var(--space-5);
    margin-bottom: var(--space-6);
    padding-top: var(--space-2);
    border-top: var(--linie);
}

/* Etikett, das auf etwas hinweist ("geaendert", "ergaenzt"): Cyan, in
   beiden Farbschemata lesbar - mit der Schriftfarbe gemischt. */
.admin-etikett--hinweis {
    border-color: color-mix(in srgb, var(--color-accent2) 50%, transparent);
    color: color-mix(in srgb, var(--color-accent2) 60%, var(--color-text));
}

/* Knopfzeile innerhalb eines Abschnitts: ohne eigene Trennlinie, links. */
.admin-aktionen--innen {
    justify-content: flex-start;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Auswahl und Mengenwahl nebeneinander (Katalogartikel ergaenzen). */
.admin-vier--wahl { grid-template-columns: minmax(0, 1fr) 6.5rem; }

/* ------------------------------------------------------------------
   Artikelliste: Reihenfolge per Ziehen (admin.js, reihenfolge)
   Der Griff ist der Symbolknopf (.btn-icon--klein); hier nur, was das
   Ziehen braucht: die Hand als Zeiger, kein Scrollen beim Ziehen am
   Handy, und die gezogene Zeile hebt sich ab.
   ------------------------------------------------------------------ */
.admin-tabelle__griff { width: 1%; padding-right: 0; }
.admin-griff { cursor: grab; touch-action: none; }
.admin-tabelle tr.is-gezogen { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.admin-tabelle tr.is-gezogen .admin-griff { cursor: grabbing; }