/* ============================================================
   GAG-Design für die ÖFFENTLICHEN Seiten (Anmeldeformular
   index.php und Selbst-Abmeldung abmelden.php).

   Grundlage: "GAG-Dokumentdesign" (Hausordnung 2025) - ruhig,
   seriös, gut lesbar, Farbe nur dezent als Akzent; Farben aus dem
   Schullogo, schmaler Farbstreifen oben als Markenzeichen.

   Diese Datei wird NACH style.css geladen und gilt nur für Seiten
   mit <body class="gag">. admin.php und einstellungen.php bleiben
   dadurch unverändert.

   Schriften liegen im Ordner schriften/ auf dem eigenen Webspace
   (keine Google-Fonts, DSGVO):
     "GAG Titel" = Poppins  (Überschriften, Titel, Nummern, Knöpfe)
     "GAG Text"  = Carlito  (Fließtext, Beschriftungen, Eingaben)
   ============================================================ */

@font-face { font-family: "GAG Titel"; font-weight: 300; font-style: normal; font-display: swap; src: url("schriften/gag-titel-300.woff") format("woff"); }
@font-face { font-family: "GAG Titel"; font-weight: 500; font-style: normal; font-display: swap; src: url("schriften/gag-titel-500.woff") format("woff"); }
@font-face { font-family: "GAG Titel"; font-weight: 700; font-style: normal; font-display: swap; src: url("schriften/gag-titel-700.woff") format("woff"); }
@font-face { font-family: "GAG Text";  font-weight: 400; font-style: normal; font-display: swap; src: url("schriften/gag-text-400.woff") format("woff"); }
@font-face { font-family: "GAG Text";  font-weight: 700; font-style: normal; font-display: swap; src: url("schriften/gag-text-700.woff") format("woff"); }

body.gag {
    /* Design-Tokens aus dem Dokumentdesign */
    --ink: #23262b;
    --muted: #5d6570;
    --navy: #27355a;
    --blue: #2b6f9e;
    --teal: #2f9fb8;
    --green: #4f8f45;
    --red: #c9473d;
    --orange: #d9853b;
    --magenta: #b8467e;
    --gelb: #b98a3e;
    --tint1: #eef4f9;
    --tint2: #eef6ef;
    --linie: #dde2e8;
    --linie-hell: #e3e7ec;
    --warn-rand: #e6c7c3;
    --warn-grund: #fbf1ef;

    --titel: "GAG Titel", Poppins, Montserrat, "Segoe UI", Arial, sans-serif;
    --text: "GAG Text", Carlito, Calibri, Lato, "Source Sans Pro", "Segoe UI", Arial, sans-serif;

    /* Die allgemeinen Variablen aus style.css auf die GAG-Farben umstellen,
       damit auch alle übrigen Regeln dort automatisch passen. */
    --farbe-primaer: var(--blue);
    --farbe-primaer-dunkel: var(--navy);
    --farbe-primaer-hell: var(--tint1);
    --farbe-akzent: var(--orange);
    --farbe-erfolg: var(--green);
    --farbe-fehler: var(--red);
    --farbe-text: var(--ink);
    --farbe-text-schwach: var(--muted);
    --farbe-rand: #cfd6de;

    font-family: var(--text);
    font-size: 17px;
    line-height: 1.45;
    color: var(--ink);
    background: #eef1f4;
    padding: 2.2rem 1rem 2rem;
    -webkit-text-size-adjust: 100%;
}

/* ---- Die "Seite" ------------------------------------------------ */
body.gag .karte {
    position: relative;
    max-width: 760px;
    border-radius: 6px;
    padding: 2.4rem 2.3rem 2rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(35, 38, 43, 0.06), 0 6px 24px rgba(35, 38, 43, 0.07);
    container-type: inline-size;
    container-name: seite;
}

/* Farbstreifen oben: 9 Logofarben, gleich breit - das Markenzeichen */
.farbstreifen {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    display: flex;
}
.farbstreifen span { flex: 1; }
.farbstreifen span:nth-child(1) { background: #2b5a7f; }
.farbstreifen span:nth-child(2) { background: #4c9f38; }
.farbstreifen span:nth-child(3) { background: #d24b3e; }
.farbstreifen span:nth-child(4) { background: #e0a43c; }
.farbstreifen span:nth-child(5) { background: #35aac4; }
.farbstreifen span:nth-child(6) { background: #b6874a; }
.farbstreifen span:nth-child(7) { background: #c03c7f; }
.farbstreifen span:nth-child(8) { background: #27355a; }
.farbstreifen span:nth-child(9) { background: #72b262; }

/* ---- Kopf: Logo links, Kicker + Titel rechts --------------------- */
body.gag .kopfbereich {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem 2rem;
    text-align: right;
    margin: 0 0 1.7rem;
    padding: 0.2rem 0 1.4rem;
    border-bottom: 1px solid var(--linie);
}
body.gag .kopfbereich.ohne-logo { justify-content: flex-start; text-align: left; }
body.gag .schullogo { margin: 0; flex: none; }
body.gag .titelbox { min-width: 0; flex: 1 1 auto; }

body.gag .kicker {
    font-family: var(--titel);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0 0 0.35rem;
}
body.gag h1 {
    font-family: var(--titel);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin: 0;
    /* Keine automatische Silbentrennung im Titel (sähe je nach Browser
       unterschiedlich aus); nur ein überlanges Einzelwort darf umbrechen. */
    hyphens: manual;
    overflow-wrap: break-word;
    text-wrap: balance;
}
body.gag .unterzeile {
    font-family: var(--titel);
    font-weight: 300;
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0.35rem 0 0;
}

/* Große Logos, lange Titel oder schmale Bildschirme: Logo oben, Titel darunter */
body.gag .kopfbereich.logo-gross,
body.gag .kopfbereich.titel-lang {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
@container seite (max-width: 600px) {
    body.gag .kopfbereich {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 1rem;
    }
    body.gag h1 { font-size: 1.65rem; }
}

/* ---- Einleitung als "Präambel" ----------------------------------- */
body.gag .intro-text {
    position: relative;
    background: var(--tint1);
    border: none;
    border-radius: 10px;
    padding: 1.15rem 1.4rem 1.15rem 1.6rem;
    margin: 0 0 1.9rem;
    color: var(--ink);
    font-size: 1.02rem;
    hyphens: auto;
}
body.gag .intro-text::before {
    content: "";
    position: absolute;
    left: 0; top: 0.9rem; bottom: 0.9rem;
    width: 5px;
    border-radius: 0 4px 4px 0;
    background: var(--teal);
}
body.gag .intro-text p { margin: 0 0 0.55rem; }
body.gag .intro-text p:last-child { margin-bottom: 0; }
/* Erster Absatz (nur wenn es mehrere gibt) größer in der Titelschrift */
body.gag .intro-text p.einstieg {
    font-family: var(--titel);
    font-weight: 500;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--navy);
}
body.gag .intro-text strong { color: var(--navy); }
body.gag .intro-text a, body.gag .outro-text a, body.gag .infotext a { color: var(--blue); }

/* ---- Abschnitte: farbiges Quadrat mit römischer Ziffer ----------- */
body.gag form { counter-reset: abschnitt; }
body.gag .formular-abschnitt {
    counter-increment: abschnitt;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--titel);
    font-weight: 500;
    font-size: 1.18rem;
    line-height: 1.25;
    color: var(--navy);
    margin: 2.1rem 0 1.15rem;
    padding-top: 1.7rem;
    border-top: 1px solid var(--linie-hell);
    --abschnittsfarbe: var(--blue);
}
body.gag .formular-abschnitt::before {
    content: counter(abschnitt, upper-roman);
    flex: none;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.5rem;
    background: var(--abschnittsfarbe);
    color: #fff;
    font-family: var(--titel);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.gag .formular-abschnitt:first-of-type { margin-top: 0.2rem; padding-top: 0; border-top: none; }
body.gag .formular-abschnitt:nth-of-type(6n+2) { --abschnittsfarbe: var(--green); }
body.gag .formular-abschnitt:nth-of-type(6n+3) { --abschnittsfarbe: var(--orange); }
body.gag .formular-abschnitt:nth-of-type(6n+4) { --abschnittsfarbe: var(--magenta); }
body.gag .formular-abschnitt:nth-of-type(6n+5) { --abschnittsfarbe: var(--gelb); }
body.gag .formular-abschnitt:nth-of-type(6n+6) { --abschnittsfarbe: var(--teal); }

/* ---- Felder ------------------------------------------------------ */
body.gag label,
body.gag fieldset.feld-gruppe legend {
    font-family: var(--text);
    font-weight: 700;
    font-size: 1rem;
    color: var(--navy);
    margin-bottom: 0.3rem;
}
body.gag .feld { margin-bottom: 1.1rem; }
body.gag .feld-reihe { gap: 1.1rem; }
body.gag .feld-hinweis { font-size: 0.9rem; color: var(--muted); }
body.gag .required { color: var(--red); }

body.gag input,
body.gag select,
body.gag textarea {
    font-family: var(--text);
    font-size: 1.05rem;
    color: var(--ink);
    border: 1px solid var(--farbe-rand);
    border-radius: 6px;
    padding: 0.62rem 0.75rem;
    background: #fff;
}
body.gag input:hover, body.gag select:hover, body.gag textarea:hover { border-color: #aeb8c3; }
body.gag input:focus,
body.gag select:focus,
body.gag textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(43, 111, 158, 0.16);
}
body.gag input[type="checkbox"], body.gag input[type="radio"] { accent-color: var(--blue); }
body.gag .hat-fehler input, body.gag .hat-fehler select, body.gag .hat-fehler textarea { border-color: var(--red); }
body.gag .field-error { color: var(--red); font-size: 0.93rem; font-weight: 700; }

body.gag .checkbox-option { font-weight: 400; color: var(--ink); }
body.gag .feld-einzel-checkbox label { font-weight: 400; color: var(--ink); gap: 0.55rem; align-items: flex-start; }
body.gag .feld-einzel-checkbox input { margin-top: 0.22rem; }

/* ---- Termin-Auswahl ---------------------------------------------- */
body.gag fieldset.feld-termin {
    background: #f7f9fb;
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: 1.15rem 1.2rem 0.75rem;
    margin-top: 1.6rem;
}
body.gag fieldset.feld-termin > legend {
    font-family: var(--titel);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--navy);
}
body.gag .termin-option {
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: 8px;
    padding: 0.8rem 0.95rem;
}
body.gag .termin-option:hover:not(.option-ausgebucht) { border-color: var(--blue); background: #fff; }
body.gag .termin-option:has(input:checked) {
    border-color: var(--blue);
    background: var(--tint1);
    box-shadow: inset 4px 0 0 var(--blue);
}
body.gag .termin-option input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin-top: 0.18rem; flex: none; }
body.gag .termin-option-label { font-weight: 700; font-size: 1.05rem; color: var(--navy); }
body.gag .termin-zeit { color: var(--muted); font-size: 0.95em; font-weight: 400; }
body.gag .termin-info { font-size: 0.92rem; font-weight: 700; }
body.gag .termin-info-frei { color: var(--green); }
body.gag .termin-info-wenige { color: #b3621b; }
body.gag .termin-info-warteliste { color: var(--farbe-warteliste); }
body.gag .termin-info-voll { color: var(--muted); }

/* ---- Hinweisboxen ------------------------------------------------ */
body.gag .infotext,
body.gag .outro-text {
    background: #f4f6f8;
    border: none;
    border-left: 3px solid var(--linie);
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.97rem;
    padding: 0.8rem 1rem;
    hyphens: auto;
}
body.gag .outro-text { margin-top: 1.4rem; }
body.gag .infotext strong, body.gag .outro-text strong { color: var(--ink); }

/* Fehler / geschlossen: Warnkasten wie "Bei Verstößen" */
body.gag .allgemeiner-fehler {
    background: var(--warn-grund);
    border: 1.2px solid var(--warn-rand);
    border-radius: 10px;
    color: var(--ink);
    font-size: 1rem;
    padding: 0.9rem 1.1rem;
}
body.gag .allgemeiner-fehler strong { color: var(--red); }

body.gag .geschlossen {
    text-align: left;
    color: var(--ink);
    background: var(--warn-grund);
    border: 1.2px solid var(--warn-rand);
    border-radius: 10px;
    padding: 1rem 1.2rem;
}
body.gag .geschlossen p { margin: 0 0 0.4rem; }
body.gag .geschlossen p:last-child { margin-bottom: 0; }
body.gag .geschlossen strong { color: var(--red); }
/* Pause: kein Fehler, sondern ein Hinweis - daher im Stil der Präambel */
body.gag .geschlossen:has(.pause-hinweis) { background: none; border: none; padding: 0; }
body.gag .pause-hinweis {
    position: relative;
    background: var(--tint1);
    border: none;
    border-radius: 10px;
    padding: 1.1rem 1.3rem 1.1rem 1.6rem;
    color: var(--navy);
    font-family: var(--titel);
    font-weight: 500;
    font-size: 1.02rem;
}
body.gag .pause-hinweis::before {
    content: "";
    position: absolute;
    left: 0; top: 0.9rem; bottom: 0.9rem;
    width: 5px;
    border-radius: 0 4px 4px 0;
    background: var(--teal);
}

/* Hinweis "Sie stehen auf der Warteliste" (Erfolgsseite): gleiche Bauart
   wie der Abmelde-Kasten, aber mit violettem Balken */
body.gag .warteliste-hinweis {
    position: relative;
    background: #f1ecf8;
    border: none;
    border-radius: 10px;
    color: var(--ink);
    padding: 1.15rem 1.3rem 1.1rem 1.6rem;
    margin: 0 0 1.1rem;
    text-align: left;
    font-size: 1rem;
}
body.gag .warteliste-hinweis::before {
    content: "";
    position: absolute;
    left: 0; top: 0.9rem; bottom: 0.9rem;
    width: 5px;
    border-radius: 0 4px 4px 0;
    background: var(--farbe-warteliste);
}
body.gag .warteliste-hinweis p { margin: 0 0 0.6rem; font-size: 1rem; line-height: 1.5; }
body.gag .warteliste-hinweis p:last-child { margin-bottom: 0; }
body.gag .warteliste-hinweis .warteliste-titel {
    font-family: var(--titel);
    font-weight: 500;
    font-size: 1.08rem;
    color: var(--navy);
}
body.gag .warteliste-hinweis strong { font-weight: 700; color: var(--navy); }
body.gag .warteliste-hinweis ul { margin: 0 0 0.6rem; padding-left: 1.2rem; }
body.gag .warteliste-hinweis li { margin: 0 0 0.25rem; line-height: 1.45; }

/* ---- Absenden ---------------------------------------------------- */
body.gag button[type="submit"] {
    background: var(--navy);
    box-shadow: none;
    border-radius: 6px;
    font-family: var(--titel);
    font-weight: 500;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
    padding: 0.85rem 1.4rem;
    margin-top: 0.6rem;
}
body.gag button[type="submit"]:hover { background: var(--blue); box-shadow: none; }
body.gag button[type="submit"]:focus-visible { outline: 3px solid rgba(43, 111, 158, 0.4); outline-offset: 2px; }

body.gag .datenschutz {
    font-size: 0.9rem;
    color: var(--muted);
    border-top: 1px solid var(--linie);
    hyphens: auto;
}

/* ---- Erfolgsseite ------------------------------------------------ */
body.gag .erfolg { text-align: center; margin-bottom: 1.4rem; }
body.gag .erfolg .haken {
    width: 3.2rem; height: 3.2rem;
    margin: 0 auto 0.7rem;
    border-radius: 50%;
    background: var(--tint2);
    color: var(--green);
    font-size: 1.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.gag .erfolg p { margin: 0 0 0.3rem; }
body.gag .erfolg p strong {
    font-family: var(--titel);
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--navy);
}

body.gag .abmelde-hinweis {
    position: relative;
    background: var(--tint1);
    border: none;
    border-radius: 10px;
    box-shadow: none;
    padding: 1.15rem 1.3rem 1.1rem 1.6rem;
}
body.gag .abmelde-hinweis::before {
    content: "";
    position: absolute;
    left: 0; top: 0.9rem; bottom: 0.9rem;
    width: 5px;
    border-radius: 0 4px 4px 0;
    background: var(--teal);
}
body.gag .abmelde-hinweis p { font-size: 1rem; }
body.gag .abmelde-hinweis .abmelde-hinweis-titel {
    font-family: var(--titel);
    font-weight: 500;
    font-size: 1.08rem;
    color: var(--navy);
}
body.gag .abmelde-hinweis .abmelde-hinweis-klein { font-size: 0.95rem; }
body.gag .abmelde-knopf {
    background: var(--navy);
    border-radius: 6px;
    font-family: var(--titel);
    font-weight: 500;
    font-size: 0.95rem;
}
body.gag .abmelde-knopf:hover { background: var(--blue); }

/* ---- Abmeldeseite ------------------------------------------------ */
body.gag .abmelde-text { font-size: 1.02rem; }
body.gag .abmelde-auswahl-titel {
    font-family: var(--titel);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--navy);
}
body.gag .abmelde-termin {
    border: 1px solid var(--linie);
    border-radius: 8px;
}
body.gag .abmelde-termin:hover { border-color: var(--blue); }
body.gag .abmelde-termin:has(input:checked) {
    border-color: var(--blue);
    background: var(--tint1);
    box-shadow: inset 4px 0 0 var(--blue);
}
body.gag .abmelde-termin-titel { font-weight: 700; font-size: 1.05rem; color: var(--navy); }
body.gag .abmelde-liste { border: 1px solid var(--linie); border-radius: 8px; }
body.gag .abmelde-liste li { color: var(--navy); }

/* ---- Fußzeile ---------------------------------------------------- */
body.gag .seiten-fuss {
    max-width: 760px;
    font-family: var(--text);
    font-size: 0.88rem;
    color: var(--muted);
}
body.gag .seiten-fuss a { color: var(--muted); }
body.gag .seiten-fuss a:hover { color: var(--navy); }

/* ---- Handy ------------------------------------------------------- */
@media (max-width: 560px) {
    body.gag { padding: 0.9rem 0.6rem 1.5rem; }
    body.gag .karte { padding: 1.9rem 1.15rem 1.5rem; }
    body.gag .intro-text { padding: 1rem 1rem 1rem 1.3rem; }
    body.gag fieldset.feld-termin { padding: 1rem 0.8rem 0.6rem; }
    body.gag .formular-abschnitt { font-size: 1.08rem; }
    body.gag h1 { font-size: 1.5rem; }
}
/* Auf schmalen Bildschirmen stehen Feldpaare untereinander - dann
   keinen zusätzlichen Abstand zum Feldabstand addieren. */
@media (max-width: 480px) {
    body.gag .feld-reihe { gap: 0; }
}

/* ---- Drucken (falls jemand die Erfolgsseite ausdruckt) ------------ */
@media print {
    body.gag { background: #fff; padding: 0; }
    body.gag .karte { box-shadow: none; max-width: none; padding: 1.2rem 0 0; }
    body.gag .farbstreifen { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Kontakt-Satz ganz unten im weißen Kasten ---------------------- */
body.gag .kontakt-hinweis {
    margin: 1.6rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linie);
    text-align: center;
    font-size: 1rem;
    color: var(--muted);
}
body.gag .kontakt-hinweis a { color: var(--blue); }
body.gag .kontakt-hinweis a:hover { color: var(--navy); }
/* Im Formular: direkt unter dem Anmelde-Knopf, über dem Datenschutzhinweis */
body.gag .kontakt-hinweis.im-formular {
    margin: 1.1rem 0 0;
    padding-top: 0;
    border-top: none;
}