/* ============================================================================
   rw-topnav.css - die Kopfleiste von redweb.app, ohne Fremdvorlage
   ----------------------------------------------------------------------------
   Gehoert zu:
     templates/skelet/topnav/rw_topnav.html.twig      (Auszeichnung)
     public/js/rw-topnav.js                           (Verhalten)

   Warum es diese Datei gibt
   -------------------------
   Die alte Leiste war aus der gekauften Vorlage "Unify" gebaut und lud dafuer
   von src.06rz.com: unifyrw.css (die ganzen g-* und u-* Klassen),
   bootstrap.min.css (navbar, row, col-*), hs.megamenurw.css (die Tafeln),
   hamburgers.min.css (der Knopf) und dazu jQuery, tether, bootstrap.js und
   hs.megamenu.js. Fuer ein Menue also gut ein Dutzend fremde Dateien.

   Hier steht dasselbe Aussehen noch einmal, aber vollstaendig und mit eigenen
   Klassen. Alle Masse unten sind an der alten Leiste ausgemessen und nicht
   geschaetzt, damit der Umbau nichts verschiebt:

     Leiste gesamt      95,86px  (11,43 + 73 + 11,43)
     Innenkasten        Breite (100% + 30px) * 11/12 - 30px, mittig
                        entspricht Bootstraps .row > .col-md-11
     nav                Innenabstand 4px 16px
     Profilbild         65 x 65, roter Ring 5px, Abstand rechts 16px
     Menuepunkt         Schrift 1.2em, fett 600, Zeilenhoehe 1.3,
                        Innenabstand .35rem oben/unten, Aussenabstand
                        11,43px ab 992px und 17,14px ab 1200px
     Tafel              oben 19,43px unter der nav, rechtsbuendig,
                        Breite 75% ab 1200px, 91,667% ab 992px,
                        Innenabstand 34,29px, roter Deckel 2px

   Die einzige bewusste Abweichung steht bei .rwhn-badge ganz unten.
   ========================================================================== */

/* Farben und Masse an einer Stelle. Sie stehen an :root und nicht an .rwtn,
   weil die Suchflaeche ein Geschwister der Leiste ist und dieselben Werte
   braucht. Eigene Namen, sie koennen mit nichts kollidieren. */
:root {
    --rwtn-red: #980a0a;
    --rwtn-accent: #d2691e;
    --rwtn-text: #fff;
    --rwtn-bar-bg: #000;
    --rwtn-pad-y: 11.4286px;      /* frueher .g-py-10 */
    --rwtn-nav-pad-x: 16px;       /* frueher Bootstraps .navbar */
    --rwtn-item-gap: 11.4286px;   /* frueher .g-mx-10--lg */
    --rwtn-panel-gap: 19.4286px;  /* frueher .g-mt-17 */
    --rwtn-panel-pad: 34.2858px;  /* frueher .g-pa-30 */
    --rwtn-font: "Share Tech Mono", "Roboto Slab", ui-monospace, monospace;
}

.rwtn {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 900;
    font-family: var(--rwtn-font);
}

/* Die Leiste rechnet ihre Breiten selbst aus und darf sich dabei nicht
   darauf verlassen, dass irgendein fremdes Blatt box-sizing gesetzt hat.
   Frueher kam das von Bootstrap. */
.rwtn,
.rwtn *,
.rwtn *::before,
.rwtn *::after,
.rwtn-search,
.rwtn-search * {
    box-sizing: border-box;
}

/* Die dunkle Flaeche hinter der Leiste. Lag frueher als eigenes fixiertes
   div am Ende der Vorlage und war 120px hoch. */
.rwtn__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: rgba(0, 0, 5, .88);
    z-index: 55;
}

.rwtn__bar {
    position: relative;
    z-index: 495;
    width: 100%;
    background-color: var(--rwtn-bar-bg);
}

/* Der mittige Kasten. Die Rechnung ahmt .row (Aussenabstand -15px) mit
   .col-md-11 (11/12 Breite, 15px Innenabstand) nach, damit die Leiste an
   jeder Fensterbreite genau dort steht wie vorher. */
.rwtn__section {
    width: 100%;
    margin: 0 auto;
    padding: var(--rwtn-pad-y) 0;
}

@media (min-width: 768px) {
    .rwtn__section {
        width: calc((100% + 30px) * 11 / 12 - 30px);
    }
}

.rwtn__nav {
    position: relative;              /* Bezug fuer die Tafeln */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px var(--rwtn-nav-pad-x);
    background-color: var(--rwtn-bar-bg);
    font-family: var(--rwtn-font);
    color: var(--rwtn-accent);
}

/* ------------------------------------------------------------ Logo / Bild */

.rwtn__brand {
    display: block;
    margin-right: var(--rwtn-nav-pad-x);
    padding: 4px 0;
    color: var(--rwtn-text);
    text-decoration: none;
    font-size: 20px;
    line-height: 1;
}

.rwtn__brand:hover,
.rwtn__brand:focus {
    color: var(--rwtn-text);
    text-decoration: none;
}

/* Angemeldet: das Profilbild im roten Ring. */
.rwtn__brand--avatar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    padding: 0;
    border: 5px solid var(--rwtn-red);
    border-radius: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
}

.rwtn__brand--avatar img {
    height: 48px;
    width: auto;
    max-width: 50px;
    border-radius: 25px;
    display: block;
}

/* Abgemeldet: das weisse R. Die Hoehe der Leiste haengt am Bild, deshalb
   bekommt der Kasten dieselben 65px wie der Ring. */
.rwtn__brand--logo {
    display: flex;
    align-items: center;
    height: 65px;
}

.rwtn__brand--logo img {
    height: 50px;
    width: auto;
    display: block;
}

/* -------------------------------------------------------------- Hamburger */

/* Ersetzt hamburgers.min.css. Drei Striche, beim Oeffnen ein Kreuz. */
.rwtn__burger {
    display: none;
    margin-left: auto;
    padding: 10px;
    border: 0;
    background: transparent;
    color: var(--rwtn-text);
    cursor: pointer;
    line-height: 0;
}

.rwtn__burger-box {
    position: relative;
    display: block;
    width: 40px;
    height: 24px;
}

.rwtn__burger-bar,
.rwtn__burger-bar::before,
.rwtn__burger-bar::after {
    position: absolute;
    left: 0;
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background-color: var(--rwtn-red);
    transition: transform .15s ease, opacity .15s ease, background-color .15s ease;
}

.rwtn__burger-bar {
    top: 10px;
}

.rwtn__burger-bar::before,
.rwtn__burger-bar::after {
    content: "";
}

.rwtn__burger-bar::before {
    top: -10px;
}

.rwtn__burger-bar::after {
    top: 10px;
}

.rwtn__burger[aria-expanded="true"] .rwtn__burger-bar {
    background-color: transparent;
}

.rwtn__burger[aria-expanded="true"] .rwtn__burger-bar::before {
    top: 0;
    transform: rotate(45deg);
}

.rwtn__burger[aria-expanded="true"] .rwtn__burger-bar::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ------------------------------------------------------------- Menueliste */

.rwtn__collapse {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    /* frueher .g-pt-5--lg: schiebt die Liste um 2,86px nach unten und
       setzt sie damit gegen die Bildmitte leicht versetzt, genau wie
       in der alten Leiste. */
    padding-top: 5.7143px;
}

.rwtn__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 0 auto;              /* frueher .ml-auto: alles nach rechts */
    padding: 0;
    list-style: none;
    font-size: 1.2em;
    font-weight: 600;
    text-transform: uppercase;
}

.rwtn__item {
    max-height: 60px;                /* Vorgabe: kein Punkt hoeher als 60px */
    margin: 0 var(--rwtn-item-gap);
}

@media (min-width: 1200px) {
    .rwtn__item {
        margin: 0 17.1429px;         /* frueher .g-mx-15--xl */
    }
}

.rwtn__link {
    display: block;
    padding: .35rem 0;
    line-height: 1.3;
    color: var(--rwtn-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .18s ease;
}

.rwtn__link:hover,
.rwtn__link:focus {
    color: var(--rwtn-text);
    text-decoration: none;
    opacity: .78;
}

/* Die Punkte, die frueher .opv2-font trugen. */
.rwtn__link--accent {
    color: var(--rwtn-accent);
}

.rwtn__ico {
    color: var(--rwtn-red);
}

.rwtn__logo-img {
    height: 22px;
    vertical-align: middle;
    position: relative;
    top: -3px;
}

/* Der Pfeil hat bewusst dieselbe Groesse wie der Text daneben: an ihm
   haengt die Breite des Menuepunkts, und die soll bleiben wie sie war. */
.rwtn__caret {
    font-size: inherit;
}

/* Der rote Umriss um einen einzelnen Buchstaben ("A r tist HUB"). */
.rwtn__outline {
    color: var(--rwtn-text);
    text-shadow:
        -2px -2px 0 var(--rwtn-red), 2px -2px 0 var(--rwtn-red),
        -2px  2px 0 var(--rwtn-red), 2px  2px 0 var(--rwtn-red),
        -2px  0   0 var(--rwtn-red), 2px  0   0 var(--rwtn-red),
         0   -2px 0 var(--rwtn-red), 0    2px 0 var(--rwtn-red);
}

/* ------------------------------------------------------------------ Tafel */

.rwtn__panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 2;
    margin-top: var(--rwtn-panel-gap);
    padding: var(--rwtn-panel-pad);
    width: 91.66667%;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--rwtn-bar-bg);
    color: var(--rwtn-text);
    border-top: 2px solid var(--rwtn-red);
    box-shadow: 0 0 2px #ccc;
    font-weight: 400;
    text-transform: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease;
}

.rwtn__panel::-webkit-scrollbar {
    display: none;
}

.rwtn__item.is-open > .rwtn__panel {
    visibility: visible;
    opacity: 1;
}

@media (min-width: 1200px) {
    .rwtn__panel {
        width: 75%;                  /* frueher .col-xl-9 */
    }
}

.rwtn__panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
}

.rwtn__panel-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Ueberschrift einer Spalte. Der Abstand nach unten ersetzt das <br>,
   das frueher hinter jeder Ueberschrift stand: 8px Aussenabstand plus
   eine Zeile (34,56px). */
.rwtn__head {
    display: flex;
    align-items: center;
    gap: .5em;
    margin: 0 0 42.6px;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--rwtn-text);
}

.rwtn__head a {
    color: inherit;
    text-decoration: none;
}

.rwtn__panel-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Oben ausgerichtet, damit das Zeichen bei einem zweizeiligen Eintrag auf
   der ERSTEN Zeile steht und nicht zwischen beiden schwebt. Genau so stand
   es vorher, als Zeichen und Text noch eine gemeinsame Zeile waren. */
.rwtn__row {
    display: flex;
    align-items: flex-start;
    padding: 11.4286px 0;
    line-height: 1.6;
}

/* Feste Spalte fuer das Zeichen. 57px ist der Abstand, den die alten
   &nbsp;-Ketten erzeugt haben, hier nur ohne Zufall: vorher war er je
   Eintrag anders, je nachdem wie viele &nbsp; dahinter standen.

   Das Zeichen ist 1,33 mal so gross wie der Text (frueher fa-lg) und wuerde
   die Zeile dadurch aufblaehen. Deshalb bekommt sein Kasten genau eine
   Textzeile Hoehe (1.6em der Zeilenschrift, also 34,56px auf dem Desktop
   und 26,88px auf dem Smartphone) und das Zeichen sitzt darin mittig. So
   bleibt eine Zeile 57,4px hoch, exakt wie in der alten Leiste. */
.rwtn__row-ico {
    flex: 0 0 57px;
    display: flex;
    align-items: center;
    height: 1.6em;                   /* genau eine Textzeile hoch */
    color: var(--rwtn-text);
}

.rwtn__row-ico > i {
    font-size: 1.33333em;            /* frueher fa-lg */
    line-height: 1;
}

.rwtn__row a {
    color: var(--rwtn-text);
    text-decoration: none;
}

.rwtn__row a:hover {
    color: var(--rwtn-text);
    text-decoration: underline;
}

/* Abmelden steht abgesetzt und in der zweiten Farbe. Der Abstand ersetzt
   die leere Zeile (<li>&nbsp;</li>), die vorher davor stand. */
.rwtn__row--quit {
    margin-top: 1.6em;
}

.rwtn__row--quit .rwtn__row-ico,
.rwtn__row--quit a {
    color: var(--rwtn-accent);
}

.rwtn__row-note {
    display: block;
    margin: 0;
    font-size: .8em;
    line-height: 1.35;
}

/* Eine Zeile, die es nur auf dem Smartphone gibt (frueher d-md-none). */
.rwtn__row--nur-klein {
    display: none;
}

@media (max-width: 767.98px) {
    .rwtn__row--nur-klein {
        display: flex;
    }
}

/* Gedaempfte Liste, frueher als color:#555 an jedem Link. */
.rwtn__panel-list--matt .rwtn__row a,
.rwtn__panel-list--matt .rwtn__row-ico {
    color: #555;
}

/* --------------------------------------------------------- Kleines Menue */

/* Ein einfaches Untermenue statt einer breiten Tafel: schmal, linksbuendig
   unter seinem Punkt. Frueher .hs-sub-menu. */
.rwtn__submenu {
    right: auto;
    left: 0;
    width: auto;
    min-width: 240px;
    margin-top: 20px;
    padding: .4rem 0;
    list-style: none;
    overflow: visible;
}

@media (min-width: 1200px) {
    .rwtn__submenu {
        width: auto;
    }
}

.rwtn__item--sub {
    position: relative;
}

.rwtn__submenu-link {
    display: block;
    padding: .55rem 1.1rem;
    color: var(--rwtn-text);
    text-decoration: none;
}

.rwtn__submenu-link:hover {
    color: #000;
    background: #fff;
    text-decoration: none;
}

/* Der Schliessknopf, den es nur auf dem Smartphone gibt. */
.rwtn__close {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    padding: 8px 14px;
    border: 0;
    border-radius: 4px;
    background: #4a4a4a;
    color: var(--rwtn-red);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

/* --------------------------------------------------- Smartphone / Tablet */

/* Bis 991,98px ist die Liste eingeklappt und die Tafeln werden Vollbild.
   Genau die Grenze hatte auch die alte Leiste (navbar-toggleable-md und
   breakpoint 991 im Aufruf von HSMegaMenu). */
@media (max-width: 991.98px) {
    .rwtn__burger {
        display: block;
    }

    .rwtn__collapse {
        display: none;
        order: 10;
        flex: 0 0 100%;
        width: 100%;
        padding-top: 11.4286px;
    }

    .rwtn__collapse.is-open {
        display: block;
    }

    .rwtn__list {
        display: block;
        margin: 0;
        width: 100%;
    }

    .rwtn__item {
        margin: 0;
        max-height: none;
    }

    /* ⚠ Der Menuepunkt bleibt auch eingeklappt ein Blockkasten und wird
       NICHT zu display:flex. Ein Punkt wie "A<span>r</span>tist HUB" besteht
       aus mehreren Textstuecken; als Flexkasten wuerde jedes davon ein
       eigenes Kaestchen mit Abstand daneben, und da stuende "A R TIST HUB". */

    .rwtn__panel {
        position: fixed;
        top: 80px;
        left: 0;
        right: auto;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        padding: 150px 50px;
        border-top: 0;
        box-shadow: none;
        z-index: 199;
        display: none;
    }

    .rwtn__item.is-open > .rwtn__panel {
        display: block;
    }

    /* Untereinander statt nebeneinander. Die Spalten brauchen dann einen
       Abstand, sonst klebt die naechste Ueberschrift an der Liste darueber. */
    .rwtn__panel-grid,
    .rwtn__panel-grid--2 {
        grid-template-columns: 1fr;
    }

    .rwtn__panel-grid > div + div {
        margin-top: 28px;
    }

    .rwtn__close {
        display: block;
    }

    /* Das kleine Untermenue bleibt klein: es klappt einfach in der Liste
       auf, statt Vollbild zu werden. */
    .rwtn__submenu {
        position: static;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
        padding: 0 0 0 20px;
    }

    .rwtn__item--sub.is-open > .rwtn__submenu {
        display: block;
    }

    .rwtn__submenu .rwtn__close {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .rwtn__head {
        font-size: 22px;
        margin-bottom: 24px;
    }

    .rwtn__panel {
        padding: 110px 24px 60px;
    }
}

/* --------------------------------------------------------- Melder-Zaehler */

/* Umschlag und Glocke bringen ihr Aussehen aus head-notify.css mit. Dort
   klebt die Zahl mit position:absolute an der rechten oberen Ecke des
   Links. Das passt, solange der Link nur so breit ist wie sein Zeichen.
   Eingeklappt ist er aber zeilenbreit, und die Zahl landete am rechten
   Bildschirmrand, weit weg von ihrem Symbol. Deshalb steht sie hier unter
   992px einfach daneben. Das ist die einzige gewollte Abweichung vom
   alten Bild. */
@media (max-width: 991.98px) {
    .rwtn__link.rwhn-trigger .rwhn-badge {
        position: static;
        top: auto;
        right: auto;
        display: inline-block;
        margin-left: 8px;
        vertical-align: middle;
        box-shadow: none;
    }
}

/* Die Tafeln der beiden Melder sind schmale Kaesten, keine Mega-Tafeln:
   Breite und Rahmen stehen in head-notify.css, hier nur die Lage. */
.rwtn__panel--notify {
    width: auto;
    padding: 0;
    border-top: 0;
    overflow: visible;
}

@media (min-width: 1200px) {
    .rwtn__panel--notify {
        width: auto;
    }
}

/* ------------------------------------------------------------------ Suche */

.rwtn-search {
    position: fixed;
    top: 120px;
    left: 0;
    width: 100%;
    z-index: 100;
    display: none;
    padding: 20px;
    background-color: rgba(255, 255, 255, .98);
    color: #000;
    text-align: left;
    font-family: var(--rwtn-font);
}

.rwtn-search.is-open {
    display: block;
}

.rwtn-search__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rwtn-search__title {
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
    font-size: 1.6em;
}

.rwtn-search__close {
    flex: 0 0 auto;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: #f00;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.rwtn-search__field {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px auto 25px;
    max-width: 900px;
}

.rwtn-search__field > i {
    flex: 0 0 auto;
    font-size: 2em;
}

.rwtn-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .5rem .75rem;
    font-size: 1.25rem;
    line-height: 1.5;
    color: #464a4c;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0;
}

.rwtn-search__input:focus {
    outline: 0;
    border-color: var(--rwtn-red);
}

.rwtn-search__results {
    height: 72vh;
    overflow: auto;
}