/*
//
//   Gymnasium Schrobenhausen - Michael Schindler
//   --------------------------------------------
//
//   GymSOB Infoportal CSS - Zentrale Bausteine (Designsystem)
//
//   Wird über header.inc.php auf jeder Seite geladen.
//   Übersicht aller Bausteine: gsip.ui.muster.php
//
//   Regeln:
//   - Alle Klassen beginnen mit "g-", damit sie nicht mit bestehenden Klassen oder jQuery UI kollidieren.
//   - Farben, Linien und Schatten nur über die Variablen unten, keine festen Farbwerte in Seiten-CSS.
//   - Seiten-CSS enthält nur noch, was es wirklich nur auf dieser Seite gibt.
//   - Zustände werden mit Zusatzklassen angegeben: g-ok, g-warn, g-err, g-info, g-neutral
*/

/* =========================================================
   Grundwerte
   ========================================================= */

:root {
    /* Schulfarben */
    --g-gelb: #F9C11D;
    --g-gelb-dunkel: #DDA60A;
    --g-schwarz: #000000;
    --g-weiss: #FFFFFF;

    /* Text */
    --g-text: #222222;
    --g-text-2: #333333;
    --g-text-3: #555555;
    --g-grau: #727271;          /* Nebentexte, Beschriftungen, Kanten von Eingabefeldern */
    --g-grau-hell: #9A9A99;     /* Hinweise in Klammern */
    --g-grau-muted: #8A8A89;

    /* Flächen und Linien */
    --g-hintergrund: #EDEDEB;   /* Seitenhintergrund */
    --g-flaeche: #F3F3F2;       /* Kopfzeilen, Fußzeilen */
    --g-flaeche-hover: #EAEAE8;
    --g-flaeche-zeile: #FAFAF9; /* Tabellenzeile beim Überfahren */
    --g-silber: #C5C6C6;        /* Rahmen von Eingabefeldern, Tabellenkopf-Linie */
    --g-linie: #DCDCDA;         /* Rahmen, Trennlinien */
    --g-linie-hell: #E4E4E3;    /* Zeilentrenner */

    /* Signalfarben (Balken, Punkte, Buttons) */
    --g-rot: #D7211E;
    --g-rot-dunkel: #B91B18;
    --g-gruen: #5E9E3A;
    --g-gruen-dunkel: #4E8A2E;
    --g-blau: #2F6FA8;

    /* Badges: Fläche + Text */
    --g-ok-bg: #DCEFD6;      --g-ok-text: #2F6B1A;
    --g-warn-bg: #FFF1C2;    --g-warn-text: #6B5300;
    --g-err-bg: #F9D9D8;     --g-err-text: #A30F0C;
    --g-info-bg: #DCEBF7;    --g-info-text: #1F4E79;
    --g-neutral-bg: #EAEAE8; --g-neutral-text: #333333;

    /* Hinweisflächen */
    --g-hinweis-gelb: #FFFBEA;
    --g-hinweis-rot: #FDF2F2;

    /* Schatten und Fokus */
    --g-schatten: var(--gsip-ui-shadow, 0 1px 2px rgba(0,0,0,0.12), 0 8px 22px -12px rgba(0,0,0,0.4));
    --g-schatten-klein: 0 1px 2px rgba(0,0,0,0.08);
    --g-fokus: 0 0 0 3px var(--g-gelb);
    --g-spinner-spur: rgba(0,0,0,0.1);
}


/* =========================================================
   Seite
   ========================================================= */

/* Seitenrahmen: <div class="g-page"> … </div> (Seitenhintergrund wird automatisch grau) */
body:has(.g-page) {
    background: var(--g-hintergrund);
}

.g-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 96px 20px 40px;
    box-sizing: border-box;
    color: var(--g-text);
    line-height: 1.45;
}

.g-page.g-page-breit {
    max-width: 1680px;
}

.g-page *,
.g-page *::before,
.g-page *::after,
.g-form *,
.g-form *::before,
.g-form *::after {
    box-sizing: border-box;
}

.g-title {
    margin: 0;
    font-size: 34px;
    font-weight: normal;
    color: var(--g-schwarz);
}

.g-subtitle {
    margin: 0 0 18px;
    font-size: 16px;
    color: var(--g-grau);
}

/* Nur für Screenreader sichtbar */
.g-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* =========================================================
   Hinweise
   ========================================================= */

/* <div class="g-notice"><i class="fas fa-info-circle"></i><span>Text</span></div>  (+ g-warn / g-err / g-ok) */
.g-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 22px;
    padding: 10px 14px;
    border-left: 4px solid var(--g-grau);
    background: var(--g-weiss);
    box-shadow: var(--g-schatten-klein);
    font-size: 15px;
    color: var(--g-text-2);
}

.g-notice > .fas,
.g-notice > .far,
.g-notice > .fa {
    margin-top: 3px;
    color: var(--g-grau);
}

.g-notice.g-warn { border-left-color: var(--g-gelb); background: var(--g-hinweis-gelb); }
.g-notice.g-err  { border-left-color: var(--g-rot); background: var(--g-hinweis-rot); color: var(--g-err-text); }
.g-notice.g-ok   { border-left-color: var(--g-gruen); }
.g-notice.g-warn > .fas, .g-notice.g-warn > .far, .g-notice.g-warn > .fa { color: var(--g-gelb-dunkel); }
.g-notice.g-err > .fas, .g-notice.g-err > .far, .g-notice.g-err > .fa { color: var(--g-rot); }
.g-notice.g-ok > .fas, .g-notice.g-ok > .far, .g-notice.g-ok > .fa { color: var(--g-gruen); }

/* Kurze Fehlermeldung in Formularen */
.g-formerror {
    margin: 0 0 14px;
    padding: 6px 10px;
    border-left: 4px solid var(--g-rot);
    background: var(--g-hinweis-rot);
    color: var(--g-err-text);
    font-size: 14px;
}


/* =========================================================
   Karten
   ========================================================= */

/*  <section class="g-card">
        <header class="g-card-head"><h2>Titel <span class="g-count">3</span></h2> … Werkzeuge … </header>
        <div class="g-card-body"> … </div>
    </section>
    Ohne Werkzeuge geht auch direkt <h2 class="g-card-head">Titel</h2>. */
.g-card {
    margin: 0 0 22px;
    background: var(--g-weiss);
    box-shadow: var(--g-schatten);
}

.g-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    margin: 0;
    padding: 8px 12px 8px 18px;
    border-left: 4px solid var(--g-gelb);
    border-bottom: 1px solid var(--g-linie);
    background: var(--g-flaeche);
}

/* Überschrift selbst als Kopfzeile: Inhalt (z. B. Zähler, Badge) direkt hinter dem Text */
:is(h1, h2, h3).g-card-head {
    justify-content: flex-start;
}

.g-card-head > :is(h1, h2, h3),
:is(h1, h2, h3).g-card-head {
    margin: 0;
    font-size: 20px;
    font-weight: normal;
    color: var(--g-schwarz);
}

.g-card-body {
    padding: 16px 18px;
}

/* Fußzeile einer Karte oder eines Dialogs (bleibt in Dialogen unten stehen) */
.g-card-foot {
    position: sticky;
    bottom: 0;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--g-linie);
    background: var(--g-flaeche);
}

/* Zähler hinter einer Überschrift */
.g-count {
    display: inline-block;
    min-width: 26px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 12px;
    background: var(--g-linie);
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    vertical-align: 2px;
    color: var(--g-text-2);
}

/* Leerzustand / Laden */
.g-empty {
    margin: 0;
    padding: 22px 20px;
    color: var(--g-grau);
}

.g-empty img,
.g-empty .g-spinner {
    vertical-align: middle;
    margin-right: 6px;
}

/* Ladeanzeige
   Ring:            <span class="g-spinner" role="status" aria-label="Wird geladen"></span>
                    Größen: g-spinner-klein (18 px, im Fließtext), Standard (32 px), g-spinner-gross (48 px)
   Ring mit Text:   <p class="g-loading"><span class="g-spinner" aria-hidden="true"></span> Wird geladen …</p>
   Balken an Karte: Klasse g-laedt an einer Karte oder einem Kasten, solange geladen wird */
.g-spinner {
    display: inline-block;
    flex: none;
    width: 32px;
    height: 32px;
    border: 3px solid var(--g-spinner-spur);
    border-top-color: var(--g-gelb);
    border-radius: 50%;
    box-sizing: border-box;
    vertical-align: middle;
    animation: g-dreh .75s linear infinite;
}

.g-spinner.g-spinner-klein {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.g-spinner.g-spinner-gross {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

.g-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 22px 20px;
    color: var(--g-grau);
}

.g-laedt {
    position: relative;
}

.g-laedt::after {
    content: "";
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0, var(--g-gelb) 30%, var(--g-gelb) 70%, transparent 100%) no-repeat;
    background-size: 40% 100%;
    animation: g-balken 1.1s ease-in-out infinite;
    pointer-events: none;
}

@keyframes g-dreh {
    to { transform: rotate(360deg); }
}

@keyframes g-balken {
    from { background-position: -70% 0; }
    to { background-position: 170% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .g-spinner { animation-duration: 2.4s; }
    .g-laedt::after { animation: none; background-size: 100% 100%; opacity: .6; }
}


/* =========================================================
   Tabellen
   ========================================================= */

/* <div class="g-tablewrap"><table class="g-table"> … </table></div> */
.g-tablewrap {
    overflow-x: auto;
}

.g-table {
    width: 100%;
    border-collapse: collapse;
}

.g-table th {
    padding: 9px 12px;
    border: none;
    border-bottom: 2px solid var(--g-silber);
    background: none;
    color: var(--g-grau);
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
}

.g-table td {
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--g-linie-hell);
    vertical-align: top;
}

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

.g-table tbody tr:hover td {
    background: var(--g-flaeche-zeile);
}

/* Spalte für Knöpfe ganz rechts */
.g-table .g-col-tools {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* Statusstreifen links an einer Tabellenzeile: <tr class="g-stripe g-ok"> */
.g-table tr.g-stripe > td:first-child {
    box-shadow: inset 4px 0 0 var(--g-linie);
    padding-left: 16px;
}

.g-table tr.g-stripe.g-ok > td:first-child   { box-shadow: inset 4px 0 0 var(--g-gruen); }
.g-table tr.g-stripe.g-warn > td:first-child { box-shadow: inset 4px 0 0 var(--g-gelb); }
.g-table tr.g-stripe.g-err > td:first-child  { box-shadow: inset 4px 0 0 var(--g-rot); }
.g-table tr.g-stripe.g-info > td:first-child { box-shadow: inset 4px 0 0 var(--g-blau); }

/* Statusstreifen an anderen Elementen (Listeneinträge, Kästen) */
.g-stripe:not(tr) {
    padding-left: 10px;
    border-left: 3px solid var(--g-linie);
}

.g-stripe.g-ok:not(tr)   { border-left-color: var(--g-gruen); }
.g-stripe.g-warn:not(tr) { border-left-color: var(--g-gelb); }
.g-stripe.g-err:not(tr)  { border-left-color: var(--g-rot); }
.g-stripe.g-info:not(tr) { border-left-color: var(--g-blau); }


/* =========================================================
   Badges, Tags, Punkte
   ========================================================= */

/* Status: <span class="g-badge g-ok">genehmigt</span>  (runde Form wie in Statistik/Abrechnung) */
.g-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 11px;
    background: var(--g-hintergrund);
    color: #444444;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.g-badge.g-ok   { background: var(--g-ok-bg);   color: var(--g-ok-text); }
.g-badge.g-warn { background: var(--g-warn-bg); color: var(--g-warn-text); }
.g-badge.g-err  { background: var(--g-err-bg);  color: var(--g-err-text); }
.g-badge.g-info { background: var(--g-info-bg); color: var(--g-info-text); }

/* Merkmal: <span class="g-tags"><span class="g-tag">privat</span><span class="g-tag g-tag-hl">…</span></span> */
.g-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.g-tag {
    display: inline-block;
    padding: 0 7px;
    border: 1px solid var(--g-linie);
    background: var(--g-flaeche);
    font-size: 13px;
    line-height: 20px;
    color: var(--g-text-2);
    white-space: nowrap;
}

.g-tag.g-tag-hl {
    border-color: #F2D27A;
    background: #FFF6D6;
}

.g-tag.g-tag-muted {
    color: var(--g-grau-muted);
}

/* Farbpunkt: <span class="g-dot g-ok"></span> */
.g-dot {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--g-linie);
}

.g-dot.g-ok   { background: var(--g-gruen); }
.g-dot.g-warn { background: var(--g-gelb); }
.g-dot.g-err  { background: var(--g-rot); }
.g-dot.g-info { background: var(--g-blau); }


/* =========================================================
   Formulare
   ========================================================= */

/*  <div class="g-form"> … alle Textfelder darin bekommen den Stil … </div>
    oder einzeln: <input class="g-input"> / <select class="g-select"> / <textarea class="g-input"> */
.g-field {
    margin: 0 0 14px;
}

.g-field > label,
.g-label {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
    color: var(--g-grau);
}

/* Kleiner Zusatz in einer Beschriftung, z. B. "(optional)" */
.g-hint-inline {
    font-size: 13px;
    color: var(--g-grau-hell);
}

/* Kurzer Hinweis direkt im Feld unter dem Eingabeelement: <div class="g-field"> … <small>Text</small></div> */
.g-field small {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--g-grau);
}

/* Hinweis unter einem Feld */
.g-hint {
    margin: 5px 0 14px;
    font-size: 13px;
    color: var(--g-grau);
}

/* Zweispaltiges Raster für Felder (auf dem Handy einspaltig) */
.g-formgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 16px;
}

.g-formgrid .g-field {
    margin-bottom: 0;
}

.g-input,
.g-form :is(input[type=text], input[type=search], input[type=email], input[type=number], input[type=password], input[type=date], input[type=time], input[type=datetime-local]),
.g-form textarea {
    display: block;
    width: 100%;
    padding: 0 10px;
    border: 1px solid var(--g-silber);
    border-bottom: 2px solid var(--g-grau);
    border-radius: 0;
    background: var(--g-weiss);
    color: var(--g-text);
    font: inherit;
    font-size: 16px;
}

input.g-input,
.g-form input:is([type=text], [type=search], [type=email], [type=number], [type=password], [type=date], [type=time], [type=datetime-local]) {
    height: 40px;
}

textarea.g-input,
.g-form textarea {
    min-height: 96px;
    padding: 8px 10px;
    resize: vertical;
}

.g-input:disabled,
.g-form :is(input, textarea):disabled {
    background: var(--g-flaeche);
    color: var(--g-text-3);
}

/* Auswahllisten in einem g-form: so hoch und breit wie Textfelder, mit eigenem Pfeil */
.g-form select:not([multiple]):not([size]):not(.g-select) {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 34px 0 10px;
    border: 1px solid var(--g-silber);
    border-bottom: 2px solid var(--g-grau);
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--g-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23333333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--g-text);
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}

/* Auswahlliste mit eigenem Pfeil, kompakt (z. B. in einer Zeile mit Text) */
.g-select {
    height: 34px;
    padding: 0 30px 0 8px;
    border: 1px solid var(--g-silber);
    border-bottom: 2px solid var(--g-grau);
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--g-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23333333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: var(--g-text);
    font: inherit;
    cursor: pointer;
}

/* Listen (select mit size oder multiple) in einem g-form: volle Breite, ruhiger Rahmen, deutliche Auswahl */
.g-form select:is([multiple], [size]) {
    display: block;
    width: 100%;
    padding: 4px 0;
    border: 1px solid var(--g-silber);
    border-bottom: 2px solid var(--g-grau);
    border-radius: 0;
    background: var(--g-weiss);
    color: var(--g-text);
    font: inherit;
    font-size: 15px;
}

.g-form select:is([multiple], [size]) option {
    padding: 3px 10px;
}

.g-form select:is([multiple], [size]) option:checked {
    background: var(--g-schwarz) linear-gradient(var(--g-schwarz), var(--g-schwarz));
    color: var(--g-weiss);
}

/* Datei-Auswahl in einem g-form */
.g-form input[type=file] {
    display: block;
    width: 100%;
    padding: 6px;
    border: 1px dashed var(--g-silber);
    background: var(--g-flaeche-zeile);
    font: inherit;
    font-size: 15px;
}

.g-form input[type=file]::file-selector-button {
    margin-right: 10px;
    padding: 5px 12px;
    border: 1px solid var(--g-silber);
    background: var(--g-weiss);
    color: var(--g-text);
    font: inherit;
    cursor: pointer;
}

.g-input:focus,
.g-select:focus,
.g-form :is(input, textarea, select):focus {
    outline: none;
    border-color: var(--g-schwarz);
    box-shadow: var(--g-fokus);
}

/* Auswahl aus wenigen Möglichkeiten (Radio-Knöpfe nebeneinander)
   <div class="g-segment" role="radiogroup">
       <input type="radio" name="x" id="x1" checked><label for="x1">eins</label>
       <input type="radio" name="x" id="x2"><label for="x2">zwei</label>
   </div>
   Kleiner, z. B. als Filter in einer Kartenkopfzeile: g-segment g-segment-sm */
.g-segment {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--g-silber);
    background: var(--g-weiss);
}

.g-segment > input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.g-segment > label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    font-size: 15px;
    line-height: 36px;
    color: var(--g-text-2);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.g-segment > label + input + label {
    border-left: 1px solid var(--g-silber);
}

.g-segment > input:checked + label {
    background: var(--g-schwarz);
    color: var(--g-weiss);
}

.g-segment > input:focus-visible + label {
    box-shadow: inset 0 0 0 3px var(--g-gelb);
}

.g-segment > input:disabled + label {
    opacity: .35;
    cursor: default;
}

.g-segment.g-segment-sm > label {
    padding: 0 12px;
    font-size: 14px;
    line-height: 32px;
}

.g-segment.g-segment-sm > label + input + label {
    border-left-color: var(--g-linie);
}

.g-segment.g-segment-sm > input:not(:checked) + label:hover {
    background: var(--g-flaeche);
}

/* Zahl in einem Segment-Knopf */
.g-segment-num {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--g-flaeche-hover);
    color: var(--g-text-3);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.g-segment-num:empty {
    display: none;
}

.g-segment > input:checked + label .g-segment-num {
    background: rgba(255,255,255,0.25);
    color: var(--g-weiss);
}

/* Schalter (Checkbox)
   <label class="g-switch"><input type="checkbox"><span class="g-switch-track" aria-hidden="true"></span><span>Text</span></label> */
.g-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    margin: 0;
    color: var(--g-text);
    font-size: 15px;
    cursor: pointer;
}

.g-field > label.g-switch {
    display: inline-flex;
    margin-bottom: 0;
    font-size: 15px;
    color: var(--g-text);
}

.g-switch > input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.g-switch-track {
    display: inline-block;
    position: relative;
    flex: none;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: var(--g-silber);
    transition: background .15s;
}

.g-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--g-weiss);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: transform .15s;
}

.g-switch > input:checked + .g-switch-track {
    background: var(--g-schwarz);
}

/* Schalter, der eingeschaltet rot ist (z. B. "hohe Priorität"): g-switch g-err */
.g-switch.g-err > input:checked + .g-switch-track {
    background: var(--g-rot);
}

.g-switch > input:checked + .g-switch-track::after {
    transform: translateX(18px);
}

.g-switch > input:focus-visible + .g-switch-track {
    box-shadow: var(--g-fokus);
}


/* =========================================================
   Knöpfe
   ========================================================= */

/* Grundknopf ist der jQuery-UI-Button (GSIP-Theme). Zusätze:
   g-btn-ok / g-btn-err: grüner bzw. roter Knopf (auch als jQuery-UI-Button)
   g-iconbtn: kleiner Symbolknopf in Tabellen, g-iconbtn g-danger: rot beim Überfahren
   g-linkbtn: Knopf, der wie ein Link aussieht */
/* Gleiche Grundform wie der jQuery-UI-Button (flach, 1px Rahmen), wenn ein
   g-btn-ok/g-btn-err ohne .button() verwendet wird - sonst zeigt der Browser
   seinen Standardrahmen (3D-Effekt) */
button.g-btn-ok:not(.ui-button),
button.g-btn-err:not(.ui-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 0 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .12s, border-color .12s;
}

button.g-btn-ok:not(.ui-button):focus-visible,
button.g-btn-err:not(.ui-button):focus-visible {
    outline: 2px solid var(--g-schwarz);
    outline-offset: 1px;
}

button.g-btn-ok:not(.ui-button):disabled,
button.g-btn-err:not(.ui-button):disabled {
    opacity: .5;
    cursor: default;
}

.g-btn-ok.ui-button,
button.g-btn-ok:not(.ui-button) {
    border-color: var(--g-gruen-dunkel);
    background: var(--g-gruen);
    color: var(--g-weiss);
}

.g-btn-ok.ui-button.ui-state-hover,
.g-btn-ok.ui-button.ui-state-focus,
button.g-btn-ok:not(.ui-button):hover {
    background: var(--g-gruen-dunkel);
    color: var(--g-weiss);
}

.g-btn-err.ui-button,
button.g-btn-err:not(.ui-button) {
    border-color: var(--g-rot-dunkel);
    background: var(--g-rot);
    color: var(--g-weiss);
}

.g-btn-err.ui-button.ui-state-hover,
.g-btn-err.ui-button.ui-state-focus,
button.g-btn-err:not(.ui-button):hover {
    background: var(--g-rot-dunkel);
    color: var(--g-weiss);
}

.g-btnrow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.g-btnrow .ui-button {
    margin: 0;
}

.g-btnrow .fa,
.g-btnrow .fas {
    margin-right: 4px;
}

.g-iconbtn.ui-button {
    margin: 0 0 0 4px;
    font-size: 14px;
}

.g-iconbtn .ui-button-text {
    padding: .45em .75em;
}

.g-iconbtn.g-danger.ui-state-hover,
.g-iconbtn.g-danger.ui-state-focus {
    border-color: var(--g-rot);
    color: var(--g-rot);
}

.g-linkbtn {
    margin-left: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--g-schwarz);
    font: inherit;
    text-decoration: underline;
    text-decoration-color: var(--g-gelb);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    cursor: pointer;
}


/* =========================================================
   Tabellen mit DataTables (jQuery-UI-Variante)
   ========================================================= */

/*  Container um die Tabelle mit class="g-dt", z. B. <section class="g-card g-dt">.
    Passt Suche, Seitenlänge, Knöpfe (Buttons), Sortierpfeile, Markierung (Select) und Seitenwahl an die Bausteine an.
    Zahlenspalten: <td class="g-num"> bzw. <th class="g-num"> (rechtsbündig). */
.g-dt .dataTables_wrapper {
    margin-bottom: 4px;
}

.g-dt .dataTables_wrapper .fg-toolbar.ui-widget-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 8px 0;
    border: none;
    background: none;
    color: var(--g-text-2);
    font-weight: normal;
}

.g-dt .dataTables_wrapper .fg-toolbar::before,
.g-dt .dataTables_wrapper .fg-toolbar::after {
    display: none;
}

.g-dt .dataTables_length,
.g-dt .dataTables_filter,
.g-dt .dataTables_info,
.g-dt .dataTables_paginate,
.g-dt .dt-buttons {
    float: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 15px;
}

.g-dt .dataTables_filter {
    margin-left: auto;
}

.g-dt .dataTables_length label,
.g-dt .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--g-grau);
    font-size: 15px;
    white-space: nowrap;
}

.g-dt .dataTables_length select {
    display: inline-block;
    width: auto;
    height: 34px;
    padding: 0 30px 0 8px;
    border: 1px solid var(--g-silber);
    border-bottom: 2px solid var(--g-grau);
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--g-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23333333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: var(--g-text);
    font: inherit;
    font-size: 15px;
}

.g-dt .dataTables_filter input {
    display: inline-block;
    width: 220px;
    height: 34px;
    margin: 0;
    padding: 0 10px 0 32px;
    border: 1px solid var(--g-silber);
    border-bottom: 2px solid var(--g-grau);
    border-radius: 0;
    background: var(--g-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.6' fill='none' stroke='%23727271' stroke-width='1.7'/%3E%3Cpath d='M9.4 9.4l3.4 3.4' stroke='%23727271' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px center;
    color: var(--g-text);
    font: inherit;
    font-size: 15px;
}

.g-dt .dataTables_length select:focus,
.g-dt .dataTables_filter input:focus {
    outline: none;
    border-color: var(--g-schwarz);
    box-shadow: var(--g-fokus);
}

/* Knöpfe (Kopieren, Excel, Drucken …) als zusammenhängende Leiste */
.g-dt .dt-buttons {
    display: inline-flex;
    flex-wrap: wrap;
}

.g-dt .dt-buttons .dt-button.ui-button {
    margin: 0 -1px 0 0;
    padding: 0 12px;
    height: 34px;
    border: 1px solid var(--g-silber);
    border-radius: 0;
    background: var(--g-weiss);
    color: var(--g-text-2);
    font-size: 14px;
    line-height: 32px;
}

.g-dt .dt-buttons .dt-button.ui-button:hover,
.g-dt .dt-buttons .dt-button.ui-button:focus-visible {
    position: relative;
    border-color: var(--g-grau-hell);
    background: var(--g-flaeche-hover);
    color: var(--g-schwarz);
}

.g-dt .dt-buttons .dt-button .fa,
.g-dt .dt-buttons .dt-button .far,
.g-dt .dt-buttons .dt-button .fas {
    margin-right: 4px;
}

/* Tabelle: Kopf wie g-table, Sortierpfeile als Symbole */
.g-dt table.dataTable {
    width: 100% !important;
    margin: 0;
    border-collapse: collapse;
}

.g-dt table.dataTable thead th.ui-state-default {
    padding: 9px 12px;
    border: none;
    border-bottom: 2px solid var(--g-silber);
    background: none;
    color: var(--g-grau);
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.g-dt table.dataTable thead th.ui-state-default:hover {
    color: var(--g-schwarz);
}

.g-dt table.dataTable thead th:is(.sorting_asc, .sorting_desc) {
    color: var(--g-schwarz);
    font-weight: 600;
}

.g-dt table.dataTable thead th.sorting_disabled {
    cursor: default;
}

.g-dt table.dataTable thead .DataTables_sort_wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 0;
}

.g-dt table.dataTable thead th.g-num {
    text-align: right;
}

.g-dt table.dataTable thead th.g-num .DataTables_sort_wrapper {
    justify-content: flex-end;
}

.g-dt table.dataTable thead .DataTables_sort_icon.ui-icon {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    text-indent: 0;
    overflow: visible;
    font-size: 12px;
    color: var(--g-silber);
}

.g-dt table.dataTable thead .DataTables_sort_icon.ui-icon::before {
    content: "\f0dc";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.g-dt table.dataTable thead th.sorting_asc .DataTables_sort_icon.ui-icon::before {
    content: "\f0de";
}

.g-dt table.dataTable thead th.sorting_desc .DataTables_sort_icon.ui-icon::before {
    content: "\f0dd";
}

.g-dt table.dataTable thead th.sorting_disabled .DataTables_sort_icon.ui-icon {
    display: none;
}

.g-dt table.dataTable thead th:is(.sorting_asc, .sorting_desc) .DataTables_sort_icon.ui-icon {
    color: var(--g-gelb-dunkel);
}

.g-dt table.dataTable tbody td {
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--g-linie-hell);
    background: none;
    vertical-align: top;
}

.g-dt table.dataTable tbody tr {
    background: none;
}

.g-dt table.dataTable tbody tr:hover td {
    background: var(--g-flaeche-zeile);
}

.g-dt table.dataTable td.g-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.g-dt table.dataTable.no-footer {
    border-bottom: 1px solid var(--g-linie);
}

.g-dt table.dataTable td.dataTables_empty {
    padding: 20px 12px;
    color: var(--g-grau);
    text-align: left;
}

/* Markieren von Zeilen (Select-Erweiterung, Spalte mit class select-checkbox) */
.g-dt table.dataTable td.select-checkbox {
    position: relative;
    width: 18px;
    padding-right: 4px;
    cursor: pointer;
}

.g-dt table.dataTable tbody td.select-checkbox::before,
.g-dt table.dataTable tbody td.select-checkbox::after {
    top: 11px;
    left: 12px;
    margin: 0;
}

.g-dt table.dataTable tbody td.select-checkbox::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--g-grau-hell);
    border-radius: 2px;
    background: var(--g-weiss);
    box-sizing: border-box;
}

.g-dt table.dataTable tbody tr.selected td.select-checkbox::before {
    border-color: var(--g-schwarz);
    background: var(--g-schwarz);
}

.g-dt table.dataTable tbody tr.selected td.select-checkbox::after {
    content: "\f00c";
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    text-shadow: none;
    color: var(--g-weiss);
}

.g-dt table.dataTable tbody tr.selected td,
.g-dt table.dataTable tbody tr.selected:hover td {
    background: var(--g-hinweis-gelb);
    color: var(--g-text);
}

.g-dt table.dataTable tbody tr.selected a {
    color: inherit;
}

/* Seitenwahl wie g-pagination */
.g-dt .dataTables_info {
    color: var(--g-grau);
}

.g-dt .dataTables_info .select-info,
.g-dt .dataTables_info .select-item {
    margin-left: 6px;
    color: var(--g-text-2);
    font-weight: 600;
}

.g-dt .dataTables_paginate {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

.g-dt .dataTables_paginate > span {
    display: contents;
}

.g-dt .dataTables_paginate .fg-button.ui-button {
    display: inline-block;
    min-width: 34px;
    height: 34px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--g-linie);
    border-radius: 0;
    background: var(--g-weiss);
    color: var(--g-text-2);
    font-size: 15px;
    line-height: 32px;
    text-align: center;
    opacity: 1;
    cursor: pointer;
}

.g-dt .dataTables_paginate .fg-button.ui-button:not(.ui-state-disabled):hover {
    border-color: var(--g-silber);
    background: var(--g-flaeche);
    color: var(--g-schwarz);
}

/* aktuelle Seite (in der jQuery-UI-Darstellung ebenfalls "disabled") */
.g-dt .dataTables_paginate > span > .fg-button.ui-state-disabled {
    border-color: var(--g-schwarz);
    background: var(--g-schwarz);
    color: var(--g-weiss);
    cursor: default;
}

/* Zurück/Nächste nicht möglich */
.g-dt .dataTables_paginate > .fg-button.ui-state-disabled {
    color: var(--g-silber);
    cursor: default;
}

.g-dt .dataTables_paginate .ellipsis {
    padding: 0 4px;
    line-height: 34px;
    color: var(--g-grau);
}

@media (max-width: 800px) {
    .g-dt .dataTables_wrapper {
        overflow-x: auto;
    }

    .g-dt .dataTables_filter,
    .g-dt .dataTables_filter label,
    .g-dt .dataTables_filter input {
        width: 100%;
        margin-left: 0;
    }

    .g-dt .dataTables_paginate {
        margin-left: 0;
    }
}


/* =========================================================
   Schülerauswahl (gsip.asv.studentselector.*)
   ========================================================= */

/* Feld auf der Seite: Anzeige der Anzahl + Knöpfe "Auswählen…", Kopieren, Einfügen */
.studsel_field {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    max-width: 100%;
    vertical-align: middle;
}

.studsel_field .gsip_core_studentselector_infobox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--g-silber);
    border-right: none;
    background: var(--g-flaeche);
    color: var(--g-text);
    font-size: 15px;
    font-weight: 600;
    font-style: normal;
    border-radius: 0;
    white-space: nowrap;
}

.studsel_field .gsip_core_studentselector_infobox::before {
    content: "\f0c0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 13px;
    color: var(--g-grau);
}

.studsel_field .gsip_core_studentselector_infobox.studsel_leer {
    color: var(--g-grau);
    font-weight: normal;
}

.studsel_field .gsip_core_studentselector_infobox.studsel_kopiert {
    background: var(--g-ok-bg);
    color: var(--g-ok-text);
}

.studsel_field .gsip_core_studentselector_infobox.studsel_kopiert::before {
    display: none;
}

.studsel_field > button,
.studsel_field > button.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    margin: 0 0 0 -1px;
    padding: 0 14px;
    border: 1px solid var(--g-silber);
    border-radius: 0;
    background: var(--g-weiss);
    color: var(--g-text);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.studsel_field > button.studsel_icon {
    width: 38px;
    padding: 0;
    color: var(--g-text-3);
}

.studsel_field > button:hover {
    position: relative;
    border-color: var(--g-grau-hell);
    background: var(--g-flaeche-hover);
    color: var(--g-schwarz);
}

.studsel_field > button:focus-visible {
    position: relative;
    outline: none;
    box-shadow: var(--g-fokus);
}

.studsel_field > button.studsel_open {
    border-color: var(--g-gelb-dunkel);
    background: var(--g-gelb);
    color: var(--g-schwarz);
    font-weight: 600;
}

.studsel_field > button.studsel_open:hover {
    background: var(--g-gelb-dunkel);
}

/* Dialog: zwei Listen mit Pfeilen dazwischen */
.studsel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.studsel_head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    margin-bottom: 5px;
}

.studsel_head .g-label {
    margin: 0;
}

.studsel_head .g-count {
    margin-left: 0;
}

.studsel select[multiple] {
    width: 100%;
}

.studsel #gsip_core_studentselector_group {
    margin-bottom: 8px;
}

.studsel input[type=search].studsel_filter {
    height: 36px;
    margin-bottom: -1px;
    padding-left: 32px;
    border-bottom: 1px solid var(--g-linie);
    background: var(--g-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.6' fill='none' stroke='%23727271' stroke-width='1.7'/%3E%3Cpath d='M9.4 9.4l3.4 3.4' stroke='%23727271' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px center;
    font-size: 15px;
}

.studsel_tools {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 120px;
}

.studsel_tools .ui-button {
    width: 44px;
    margin: 0;
}

.studsel_stat {
    margin-top: 8px;
    font-size: 13px;
    color: var(--g-grau);
}

.studsel_stat .g-badge {
    margin: 0 4px 4px 0;
    font-weight: normal;
}

.studsel_klassen {
    margin-top: 2px;
}

.studsel_hint {
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .studsel {
        grid-template-columns: minmax(0, 1fr);
    }

    .studsel_tools {
        flex-direction: row;
        justify-content: center;
        padding-top: 0;
    }

    .studsel_tools .fas {
        transform: rotate(90deg);
    }
}


/* =========================================================
   Seitenwahl
   ========================================================= */

/*  <div class="g-pagebar"><p class="g-pageinfo">1–20 von 640</p>
        <nav class="g-pagination"><button>1</button><span class="g-page-current">2</span><span class="g-page-gap">…</span>
        <span class="g-page-disabled">›</span></nav></div>
    Knöpfe mit Klasse g-page-far werden auf schmalen Bildschirmen ausgeblendet. */
.g-pagebar:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    padding: 12px 14px;
    border-top: 1px solid var(--g-linie-hell);
}

.g-pageinfo {
    margin: 0;
    font-size: 14px;
    color: var(--g-grau);
}

.g-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

.g-pagination > button,
.g-pagination > a,
.g-pagination > span {
    display: inline-block;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--g-linie);
    background: var(--g-weiss);
    color: var(--g-text-2);
    font: inherit;
    font-size: 15px;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
}

.g-pagination > button {
    cursor: pointer;
}

.g-pagination > :is(button, a):hover,
.g-pagination > :is(button, a):focus-visible {
    border-color: var(--g-silber);
    background: var(--g-flaeche);
    color: var(--g-schwarz);
    outline: none;
}

.g-pagination > .g-page-current {
    border-color: var(--g-schwarz);
    background: var(--g-schwarz);
    color: var(--g-weiss);
}

.g-pagination > .g-page-disabled {
    color: var(--g-silber);
}

.g-pagination > .g-page-gap {
    min-width: 20px;
    padding: 0 2px;
    border-color: transparent;
    background: none;
    color: var(--g-grau);
}


/* =========================================================
   Dialoge (jQuery UI) mit Bausteinen
   ========================================================= */

/* dialogClass: 'g-dialog' und Inhalt mit class="g-form" */
.g-dialog {
    max-width: calc(100vw - 16px);
}

.g-dialog .ui-dialog-content {
    padding: 14px 18px 0;
    color: var(--g-text);
    line-height: 1.45;
}

.g-dialog .ui-dialog-content .g-card-foot {
    margin: 4px -18px 0;
}

/* Kopfzeile in einem Dialog, z. B. "Beantragen für …" */
.g-dialoghead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-left: 4px solid var(--g-gelb);
    background: var(--g-hinweis-gelb);
    font-size: 16px;
}

/* Zwischenüberschrift in Dialogen und Karten */
.g-subhead {
    margin: 18px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--g-linie-hell);
    font-size: 17px;
    font-weight: normal;
    color: var(--g-schwarz);
}


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

@media (max-width: 800px) {
    .g-page {
        padding: 72px 10px 24px;
    }

    .g-title {
        font-size: 28px;
    }

    .g-formgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .g-pagination {
        margin-left: 0;
    }

    .g-pagination > .g-page-far {
        display: none;
    }
}