/* =====================================================================
   Awarenessnetz NRW – Corporate Identity im Schichtplan
   Ausgeliefert von /design/ci.css, geladen nach dem Theme von Engelsystem.

   Die Lage setzt vor allem CSS-Variablen neu. Das kompilierte Bootstrap
   bezieht seine Farben daraus – 387 Variablen –, also faerbt eine Handvoll
   Zeilen den ganzen Schichtplan um, ohne dass irgendetwas neu gebaut werden
   muss. Wo Bootstrap Farben beim Uebersetzen festgeschrieben hat (Knoepfe,
   Hinweise, Abzeichen), stehen die Variablen der Komponente selbst weiter
   unten.

   Barrierefreiheit ist hier kein Beiwerk, sondern der Grund fuer die
   Farbwahl. Joyful Magenta auf Weiss erreicht nur 4,4:1 und reicht damit
   nicht fuer Fliesstext. Deshalb:
     - Berry Purple #9E1B63 traegt weisse Schrift        7,5:1  ✓ AA
     - #B41E5A ist die Magenta fuer Text auf hell        6,4:1  ✓ AA
     - #F07AB0 ist die Magenta fuer Text auf dunkel      7,3:1  ✓ AA
     - Joyful Magenta bleibt Akzent, Rahmen, Hover
   ===================================================================== */

/* ---------- Schriften, aus gleicher Herkunft ---------- */

@font-face {
    font-family: 'Inter AWN';
    src: url('/design/datei?name=inter-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    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+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter AWN';
    src: url('/design/datei?name=inter-latin-ext-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    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;
}
@font-face {
    font-family: 'Montserrat AWN';
    src: url('/design/datei?name=montserrat-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    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+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat AWN';
    src: url('/design/datei?name=montserrat-latin-ext-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    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;
}

/* ---------- Die Marke ---------- */

:root {
    --awn-dk:       #1A0A29;   /* Deep Awareness */
    --awn-be:       #9E1B63;   /* Berry Purple   */
    --awn-mg:       #D93685;   /* Joyful Magenta */
    --awn-mg-hell:  #F07AB0;   /* Magenta fuer Text auf dunklem Grund */
    --awn-mg-text:  #B41E5A;   /* Magenta fuer Text auf hellem Grund  */
    --awn-lt:       #F9EDF4;   /* Soft Lilac */
    --awn-lt-2:     #FDF6FA;
    --awn-gy:       #6B7280;
    --awn-gy-text:  #4B5563;
    --awn-bd:       #E5E7EB;
    --awn-bd-soft:  #F1F3F5;

    --awn-serifenlos: 'Inter AWN', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --awn-headline:   'Montserrat AWN', 'Inter AWN', system-ui, sans-serif;
}

/* ---------- Gemeinsames ---------- */

body {
    font-family: var(--awn-serifenlos);
    --bs-body-font-family: var(--awn-serifenlos);
    --bs-font-sans-serif: var(--awn-serifenlos);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand {
    font-family: var(--awn-headline);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Bootstrap faerbt Knoepfe und Hinweise ueber eigene Variablen je Komponente.
   Die hier gelten in beiden Spielarten gleich. */
.btn-primary {
    --bs-btn-bg:               var(--awn-be);
    --bs-btn-border-color:     var(--awn-be);
    --bs-btn-color:            #fff;
    --bs-btn-hover-bg:         var(--awn-mg);
    --bs-btn-hover-border-color: var(--awn-mg);
    --bs-btn-hover-color:      #fff;
    --bs-btn-active-bg:        var(--awn-dk);
    --bs-btn-active-border-color: var(--awn-dk);
    --bs-btn-active-color:     #fff;
    --bs-btn-disabled-bg:      var(--awn-be);
    --bs-btn-disabled-border-color: var(--awn-be);
}
.btn-outline-primary {
    --bs-btn-color:            var(--awn-be);
    --bs-btn-border-color:     var(--awn-be);
    --bs-btn-hover-bg:         var(--awn-be);
    --bs-btn-hover-border-color: var(--awn-be);
    --bs-btn-hover-color:      #fff;
    --bs-btn-active-bg:        var(--awn-be);
    --bs-btn-active-border-color: var(--awn-be);
}
.btn-secondary {
    --bs-btn-bg:               var(--awn-gy-text);
    --bs-btn-border-color:     var(--awn-gy-text);
    --bs-btn-hover-bg:         var(--awn-dk);
    --bs-btn-hover-border-color: var(--awn-dk);
}

/* Sichtbarer Fokus. Wer mit der Tastatur arbeitet, muss sehen koennen, wo
   er ist - der schmale Standardring von Bootstrap reicht dafuer nicht. */
:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    outline: 3px solid var(--awn-mg) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* ---------- Das Signet in der Navigationsleiste ---------- */

.navbar-brand { display: inline-flex; align-items: center; gap: .6rem; }

/* Der Engel des Kerns weicht dem Kraken. Nur in der Marke - im uebrigen
   Text bleibt das Symbol, wo es steht. */
.navbar-brand .icon-icon_angel,
.navbar-brand svg:first-of-type { display: none !important; }

/* Der Krake ist tiefdunkel bis magenta - auf Deep Awareness verschwaende er.
   Deshalb sitzt er auf einer weissen Scheibe, so wie im Logo selbst. Das
   traegt auf hellem wie auf dunklem Grund. */
.navbar-brand::before {
    content: "";
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #FFFFFF url('/design/datei?name=marke.png') center / 76% no-repeat;
}
.navbar-brand strong { font-weight: 700; letter-spacing: .01em; }

/* ---------- Helle Spielart: wie die Webseite ---------- */

body[data-theme_type="light"] {
    --bs-body-bg:            #FFFFFF;
    --bs-body-color:         var(--awn-dk);
    --bs-emphasis-color:     var(--awn-dk);
    --bs-heading-color:      var(--awn-dk);
    --bs-secondary-color:    var(--awn-gy-text);
    --bs-secondary-bg:       var(--awn-lt);
    --bs-tertiary-color:     var(--awn-gy);
    --bs-tertiary-bg:        var(--awn-lt-2);
    --bs-border-color:       var(--awn-bd);
    --bs-border-color-translucent: var(--awn-bd);

    --bs-primary:            var(--awn-be);
    --bs-primary-rgb:        158, 27, 99;
    --bs-primary-text-emphasis: var(--awn-mg-text);
    --bs-primary-bg-subtle:  var(--awn-lt);
    --bs-primary-border-subtle: #EFC9DC;

    --bs-link-color:         var(--awn-mg-text);
    --bs-link-color-rgb:     180, 30, 90;
    --bs-link-hover-color:   var(--awn-dk);
    --bs-code-color:         var(--awn-mg-text);
    --bs-highlight-bg:       var(--awn-lt);
}
body[data-theme_type="light"] .navbar {
    --bs-navbar-color:              var(--awn-dk);
    --bs-navbar-hover-color:        var(--awn-mg-text);
    --bs-navbar-active-color:       var(--awn-mg-text);
    --bs-navbar-brand-color:        var(--awn-dk);
    --bs-navbar-brand-hover-color:  var(--awn-dk);
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--awn-bd);
}
body[data-theme_type="light"] .card,
body[data-theme_type="light"] .list-group-item {
    --bs-card-bg: #FFFFFF;
    --bs-card-border-color: var(--awn-bd);
    --bs-list-group-bg: #FFFFFF;
    --bs-list-group-border-color: var(--awn-bd);
}
/* Auch hell: .bg-dark am Anmeldekaertchen wuerde einen schwarzen Block in
   eine helle Seite setzen. Es wird ein Kaertchen in Soft Lilac. */
body[data-theme_type="light"] .card.bg-dark {
    background-color: var(--awn-lt-2) !important;
    color: var(--awn-dk);
    border-color: var(--awn-bd);
}
body[data-theme_type="light"] .card.bg-dark .text-light { color: var(--awn-dk) !important; }
body[data-theme_type="light"] .table {
    --bs-table-color:        var(--awn-dk);
    --bs-table-border-color: var(--awn-bd);
    --bs-table-striped-bg:   var(--awn-lt-2);
    --bs-table-hover-bg:     var(--awn-lt);
}
body[data-theme_type="light"] #footer,
body[data-theme_type="light"] .footer {
    background: var(--awn-lt);
}
body[data-theme_type="light"] #footer hr { border-color: var(--awn-bd); opacity: 1; }

/* ---------- Dunkle Spielart: Deep Awareness als Grund ---------- */

body[data-theme_type="dark"] {
    --bs-body-bg:            var(--awn-dk);
    --bs-body-color:         #EDE7F1;
    --bs-emphasis-color:     #FFFFFF;
    --bs-heading-color:      #FFFFFF;
    --bs-secondary-color:    #B9AEC4;
    --bs-secondary-bg:       #2A1440;
    --bs-tertiary-color:     #9E92AB;
    --bs-tertiary-bg:        #241036;
    --bs-border-color:       #3D2352;
    --bs-border-color-translucent: #3D2352;

    --bs-primary:            var(--awn-mg);
    --bs-primary-rgb:        217, 54, 133;
    --bs-primary-text-emphasis: var(--awn-mg-hell);
    --bs-primary-bg-subtle:  #2A1440;
    --bs-primary-border-subtle: #5B2A47;

    --bs-link-color:         var(--awn-mg-hell);
    --bs-link-color-rgb:     240, 122, 176;
    --bs-link-hover-color:   #FFFFFF;
    --bs-code-color:         var(--awn-mg-hell);
    --bs-highlight-bg:       #3D2352;
}
body[data-theme_type="dark"] {
    background-color: var(--awn-dk);
}
body[data-theme_type="dark"] .navbar {
    --bs-navbar-color:              #EDE7F1;
    --bs-navbar-hover-color:        var(--awn-mg-hell);
    --bs-navbar-active-color:       var(--awn-mg-hell);
    --bs-navbar-brand-color:        #FFFFFF;
    --bs-navbar-brand-hover-color:  #FFFFFF;
    background-color: #150820 !important;
    border-bottom: 1px solid #3D2352;
}
body[data-theme_type="dark"] .card,
body[data-theme_type="dark"] .list-group-item {
    --bs-card-bg: #221033;
    --bs-card-border-color: #3D2352;
    --bs-list-group-bg: #221033;
    --bs-list-group-border-color: #3D2352;
}
/* Der Kern setzt an einigen Karten die Utility .bg-dark - die schreibt die
   Farbe direkt und uebergeht --bs-card-bg. Deshalb hier noch einmal
   ausdruecklich, sonst steht eine fast schwarze Karte auf Aubergine. */
body[data-theme_type="dark"] .card.bg-dark,
body[data-theme_type="dark"] .bg-dark {
    background-color: #221033 !important;
    color: #EDE7F1;
}
body[data-theme_type="dark"] .table {
    --bs-table-color:        #EDE7F1;
    --bs-table-bg:           transparent;
    --bs-table-border-color: #3D2352;
    --bs-table-striped-bg:   #241036;
    --bs-table-striped-color: #EDE7F1;
    --bs-table-hover-bg:     #2A1440;
    --bs-table-hover-color:  #FFFFFF;
}
body[data-theme_type="dark"] .form-control,
body[data-theme_type="dark"] .form-select {
    background-color: #150820;
    border-color: #3D2352;
    color: #EDE7F1;
}
/* Die Anhaengsel am Eingabefeld kamen grau daher und rissen die Zeile
   auseinander. Sie gehoeren zum Feld, also sehen sie auch so aus. */
body[data-theme_type="dark"] .input-group-text {
    background-color: #2A1440;
    border-color: #3D2352;
    color: #B9AEC4;
}
body[data-theme_type="light"] .input-group-text {
    background-color: var(--awn-lt);
    border-color: var(--awn-bd);
    color: var(--awn-gy-text);
}
body[data-theme_type="light"] .form-control,
body[data-theme_type="light"] .form-select {
    border-color: var(--awn-bd);
    color: var(--awn-dk);
}
body[data-theme_type="dark"] #footer,
body[data-theme_type="dark"] .footer {
    background: #150820;
}
body[data-theme_type="dark"] #footer hr { border-color: #3D2352; opacity: 1; }
/* In der dunklen Spielart traegt Magenta genug Kontrast fuer weisse
   Schrift auf Flaechen - fuer Text daneben nicht. Deshalb bleibt der
   Knopf magenta, die Verlinkung wird aufgehellt. */
body[data-theme_type="dark"] .btn-primary {
    --bs-btn-bg:               var(--awn-mg);
    --bs-btn-border-color:     var(--awn-mg);
    --bs-btn-hover-bg:         var(--awn-mg-hell);
    --bs-btn-hover-border-color: var(--awn-mg-hell);
    --bs-btn-hover-color:      var(--awn-dk);
}
body[data-theme_type="dark"] .btn-outline-primary {
    --bs-btn-color:            var(--awn-mg-hell);
    --bs-btn-border-color:     var(--awn-mg-hell);
    --bs-btn-hover-bg:         var(--awn-mg-hell);
    --bs-btn-hover-color:      var(--awn-dk);
}

/* ---------- Themes, die direkt malen ----------

   Die meisten Themes von Engelsystem beziehen ihre Farben aus
   --bs-*-Variablen; dort genuegt, was oben steht. Zwei (eh22-dark und
   eh22-light) schreiben stattdessen background-color direkt, mit Selektoren
   wie "a.btn.btn-primary". Eine Variable zu setzen hilft dagegen nichts.

   Deshalb hier dieselben Flaechen noch einmal, direkt gemalt und mit
   body[data-theme_type] davor - das sind drei Klassen und schlaegt die zwei
   des Themes. Damit sieht der Schichtplan in allen 23 Themes nach
   Awarenessnetz aus und nicht nur in 21.
   ------------------------------------------------------------------ */

body[data-theme_type="light"] .btn.btn-primary,
body[data-theme_type="light"] a.btn.btn-primary,
body[data-theme_type="light"] button.btn.btn-primary {
    background-color: var(--awn-be);
    border-color: var(--awn-be);
    color: #FFFFFF;
}
body[data-theme_type="light"] .btn.btn-primary:hover,
body[data-theme_type="light"] .btn.btn-primary:focus,
body[data-theme_type="light"] a.btn.btn-primary:hover,
body[data-theme_type="light"] button.btn.btn-primary:hover {
    background-color: var(--awn-mg);
    border-color: var(--awn-mg);
    color: #FFFFFF;
}
body[data-theme_type="dark"] .btn.btn-primary,
body[data-theme_type="dark"] a.btn.btn-primary,
body[data-theme_type="dark"] button.btn.btn-primary {
    background-color: var(--awn-mg);
    border-color: var(--awn-mg);
    color: #FFFFFF;
}
body[data-theme_type="dark"] .btn.btn-primary:hover,
body[data-theme_type="dark"] .btn.btn-primary:focus,
body[data-theme_type="dark"] a.btn.btn-primary:hover,
body[data-theme_type="dark"] button.btn.btn-primary:hover {
    background-color: var(--awn-mg-hell);
    border-color: var(--awn-mg-hell);
    color: var(--awn-dk);
}

body[data-theme_type="light"] input.form-control,
body[data-theme_type="light"] textarea.form-control,
body[data-theme_type="light"] select.form-select {
    background-color: #FFFFFF;
    border-color: var(--awn-bd);
    color: var(--awn-dk);
}
body[data-theme_type="dark"] input.form-control,
body[data-theme_type="dark"] textarea.form-control,
body[data-theme_type="dark"] select.form-select {
    background-color: #150820;
    border-color: #3D2352;
    color: #EDE7F1;
}

body[data-theme_type="light"] .navbar.navbar,
body[data-theme_type="light"] nav.navbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--awn-bd);
}
body[data-theme_type="dark"] .navbar.navbar,
body[data-theme_type="dark"] nav.navbar {
    background-color: #150820 !important;
    border-bottom: 1px solid #3D2352;
}
body[data-theme_type="light"] .navbar .navbar-brand { color: var(--awn-dk); }
body[data-theme_type="dark"]  .navbar .navbar-brand { color: #FFFFFF; }

body[data-theme_type="light"] div.card,
body[data-theme_type="light"] div.card.bg-dark { background-color: #FFFFFF; }
body[data-theme_type="light"] div.card.bg-dark { background-color: var(--awn-lt-2); }
body[data-theme_type="dark"] div.card,
body[data-theme_type="dark"] div.card.bg-dark { background-color: #221033; }

/* ---------- Der Anmeldebildschirm, erste Begegnung ---------- */

body[data-theme_type="light"] .container > .row > .col-md-4 .card,
body[data-theme_type="light"] form[action*="login"] {
    border-color: var(--awn-bd);
}

/* ---------- Auf dem Handy ----------

   Der Schichtplan war auf dem Telefon breiter als das Display: Text rechts
   abgeschnitten, die Seite liess sich seitlich schieben.

   Ursache ist ein Fehler im Kern, kein Gestaltungsproblem. navbar.twig
   schreibt an den Namen der Instanz die Klasse "visible-lg-inline" - die
   stammt aus Bootstrap 3 und existiert in Bootstrap 5 nicht mehr (im
   kompilierten Theme: null Treffer). Gemeint war "erst ab grossen Schirmen
   zeigen"; tatsaechlich stand der Name immer da, und weil .navbar-brand
   nicht umbricht, hat er die ganze Seite auseinandergezogen.

   Wir geben der Klasse zurueck, was sie bedeuten sollte. Damit ist der
   Ueberlauf an der Wurzel weg, nicht nur zugedeckt.
   ------------------------------------------------------------------ */

.visible-lg-inline { display: none !important; }
@media (min-width: 992px) {
    .visible-lg-inline { display: inline !important; }
}

/* Auf kleinen Schirmen traegt das Signet allein - es ist die Marke. */
@media (max-width: 991.98px) {
    .navbar-brand { gap: 0; }
    .navbar-brand::before { width: 2rem; height: 2rem; }
}

/* Bewusst KEIN "overflow-x: hidden" auf html/body. Das haette den Ueberlauf
   nur abgeschnitten - samt Menueknopf - statt ihn zu beheben, und beim
   naechsten Mal faellt er niemandem mehr auf. Stattdessen duerfen lange
   Woerter brechen und breite Bloecke in sich scrollen. */
@media (max-width: 767.98px) {
    pre, code { overflow-x: auto; word-break: break-word; }
    /* Qualifikationsnamen, Mailadressen, Veranstaltungstitel */
    h1, h2, h3, .card-body, td, th { overflow-wrap: anywhere; }
}

/* iOS zoomt beim Antippen in jedes Feld, dessen Schrift kleiner als 16px
   ist. Das reisst das Layout auseinander und muss jedes Mal von Hand
   zurueckgezogen werden. */
@media (max-width: 767.98px) {
    input.form-control, textarea.form-control, select.form-select,
    .input-group-lg > .form-control, .input-group-lg > .form-select {
        font-size: 16px;
    }
}

/* Was man mit dem Daumen trifft: die Empfehlung sind 44 px Kantenlaenge.
   Die Zeilen im ausgeklappten Menue lagen deutlich darunter. */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link { padding-top: .7rem; padding-bottom: .7rem; }
    .navbar-toggler { padding: .5rem .75rem; }
    /* Ueber den Innenabstand, nicht ueber display: inline-flex - das haette
       Knopfgruppen und Symbolknoepfe aus der Reihe gebracht. */
    .btn:not(.btn-sm) { padding-top: .6rem; padding-bottom: .6rem; }
}

/* Tabellen - Schichtplan, Materialbestand - schieben auf dem Handy sonst
   die Seite. Sie sollen in sich scrollen. */
@media (max-width: 991.98px) {
    .table-responsive { -webkit-overflow-scrolling: touch; }
    #content > .container-fluid,
    #content > .container { padding-left: .75rem; padding-right: .75rem; }
}

/* ---------- Die Begruessung auf der Startseite ---------- */

.awn-willkommen { border-left: 4px solid var(--awn-mg); }
.awn-willkommen h2 { margin-bottom: .5rem; }
.awn-willkommen p:last-child { margin-bottom: 0; }
body[data-theme_type="light"] .awn-willkommen { background: var(--awn-lt-2); }
body[data-theme_type="dark"]  .awn-willkommen { background: #221033; }

/* ---------- Gedruckte Seiten fasst diese Lage nicht an ----------
   Belege und Vertraege bringen ihr eigenes Blatt mit (AwarenessHonorar).
   Alles andere soll beim Drucken schlicht schwarz auf weiss sein. */
@media print {
    :root { color-scheme: light; }
    body { background: #fff !important; color: #000 !important; }
    .navbar, #footer, .footer { display: none !important; }
}