/* ============================================================================
   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;

    /* Hoehe der Leiste: 11,4286 + 4 + 65 (Profilbild bzw. Logo) + 4 + 11,4286.
       Daran haengt das Schubfach auf dem Telefon, siehe ganz unten. */
    --rwtn-bar-h: 96px;
}

.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);
}

/* Die Beschriftung eines Punktes, der auf dem Desktop nur sein Zeichen zeigt.
   Hier ausgeblendet, damit das gewohnte Bild der Leiste unveraendert bleibt.
   Im Schubfach des Telefons wird sie sichtbar, siehe ganz unten. */
.rwtn__label {
    display: none;
}

.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. Genau die Grenze hatte auch die
   alte Leiste (navbar-toggleable-md und breakpoint 991 im Aufruf von
   HSMegaMenu).

   Bis zum 19.09.2026 stand hier die Form der alten Unify-Vorlage: die Liste
   klappte als schmaler Block links unter der Leiste auf, die Punkte waren
   so klein wie auf dem Desktop, und eine Tafel sprang als Vollbild mit
   150px Innenabstand darueber. Auf dem Telefon war das weder zu treffen
   noch zu ueberblicken.

   Seitdem: ein Schubfach ueber die ganze Flaeche unter der Leiste. Jeder
   Punkt ist eine eigene Zeile von mindestens 56px mit dem Zeichen in einer
   festen Spalte links und der Beschriftung daneben, und die Tafeln klappen
   als Ziehharmonika INNERHALB der Liste auf statt darueber. Der Weg zurueck
   ist immer derselbe: der Hamburger, der offen ein Kreuz ist.

   ⚠ Alles davon steht in dieser Abfrage. Am Desktop aendert sich nichts,
   dessen Masse sind an der alten Leiste ausgemessen (siehe Kopf der Datei). */
@media (max-width: 991.98px) {
    /* 60 x 48 Trefferflaeche statt 60 x 44. */
    .rwtn__burger {
        display: block;
        padding: 12px 10px;
    }

    /* ---------------------------------------------------------- Schubfach */

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

    /* Fest unter der Leiste bis zum unteren Rand. Es scrollt fuer sich:
       overscroll-behavior haelt den Schwung im Schubfach, sonst schiebt
       die Seite dahinter weiter, sobald das Ende erreicht ist. */
    .rwtn__collapse.is-open {
        display: block;
        position: fixed;
        top: var(--rwtn-bar-h);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 600;
        padding: 0 0 48px;
        background: #0b0b0e;
        border-top: 2px solid var(--rwtn-red);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .rwtn__list {
        display: block;
        margin: 0;
        width: 100%;
        font-size: 1rem;
        text-transform: none;
    }

    .rwtn__item {
        margin: 0;
        max-height: none;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    /* ⚠ head-notify.css klemmt die beiden Melder auf max-height:60px fest,
       damit ein Melder die waagerechte Leiste nie aufblaehen kann. Im
       Schubfach steht die Tafel aber IM Punkt: mit dem Deckel bliebe der
       Punkt 60px hoch, die Tafel liefe aus ihm heraus und legte sich als
       Ueberlagerung ueber die Zeilen darunter, statt sie nach unten zu
       schieben. Zwei Klassen im Waehler schlagen die eine drueben, die
       sonst gewinnt, weil head-notify.css spaeter geladen wird. */
    .rwtn__item.rwhn-item {
        max-height: none;
    }

    /* ---------------------------------------------------------- Eine Zeile */

    /* ⚠ 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".
       Die Spalte fuer das Zeichen kommt deshalb aus einer festen Breite am
       Zeichen selbst und nicht aus einem Flexkasten. */
    .rwtn__link {
        padding: 16px 18px;
        min-height: 56px;            /* Fingerkuppe, nicht Mauszeiger */
        line-height: 24px;
        font-weight: 600;
        white-space: normal;
    }

    .rwtn__link:active {
        background: rgba(255, 255, 255, .06);
        opacity: 1;
    }

    .rwtn__link > i {
        display: inline-block;
        width: 26px;
        margin-right: 14px;
        font-size: 20px;
        text-align: center;
        vertical-align: middle;
    }

    /* ⚠ Die Zeichen behalten auch hier --rwtn-red (#980a0a). Ein hellerer
       Ton waere auf dem schwarzen Grund zwar besser zu sehen, ist aber
       ausdruecklich nicht gewollt: alle roten Zeichen tragen dasselbe Rot. */

    .rwtn__label {
        display: inline;
        vertical-align: middle;
    }

    /* Der Pfeil gehoert an den rechten Rand und nicht in die Zeichenspalte.
       Hoehere Auswahlschaerfe als .rwtn__link > i, damit dessen Breite und
       Abstand hier nicht gelten. */
    .rwtn__link > i.rwtn__caret {
        float: right;
        width: auto;
        margin: 0;
        font-size: 18px;
        line-height: 24px;
        opacity: .65;
        transition: transform .2s ease;
    }

    .rwtn__item.is-open > .rwtn__link > i.rwtn__caret {
        transform: rotate(180deg);
    }

    /* Der Punkt mit dem Redweb-Bild. Das Bild ist der Schriftzug selbst und
       steht an der Stelle des Zeichens, also linksbuendig mit allen anderen
       Zeichen der Liste. Es ist breiter als die 26px-Spalte und laeuft
       einfach nach rechts aus; das Wort "Redweb" daneben waere doppelt
       gemoppelt und bleibt aus. */
    .rwtn__logo-img {
        display: inline-block;
        position: static;
        top: auto;
        height: 22px;
        width: auto;
        vertical-align: middle;
    }

    .rwtn__link--logo .rwtn__label {
        display: none;
    }

    /* --------------------------------------------------- Tafel als Auszug */

    /* Keine Vollbildflaeche mehr, sondern ein abgesetzter Block direkt unter
       seinem Punkt, der mit dem Schubfach mitscrollt. */
    .rwtn__panel {
        position: static;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
        margin: 0;
        padding: 0 0 8px;
        background: rgba(255, 255, 255, .035);
        border-top: 0;
        box-shadow: none;
        overflow: visible;
        display: none;
    }

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

    /* Untereinander statt nebeneinander, mit einem Strich zwischen den
       Spalten statt eines grossen Lochs. */
    .rwtn__panel-grid,
    .rwtn__panel-grid--2 {
        grid-template-columns: 1fr;
    }

    .rwtn__panel-grid > div + div {
        margin-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, .07);
    }

    /* Die Ueberschrift einer Spalte wird zur kleinen Abschnittsmarke. */
    .rwtn__head {
        margin: 0;
        padding: 16px 18px 6px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .14em;
        line-height: 1.4;
        text-transform: uppercase;
        color: #8e8e96;
    }

    .rwtn__head i {
        font-size: 13px;
    }

    .rwtn__row {
        align-items: center;
        min-height: 48px;
        padding: 12px 18px 12px 32px;
        line-height: 1.4;
        font-size: 1rem;
    }

    .rwtn__row + .rwtn__row {
        border-top: 1px solid rgba(255, 255, 255, .05);
    }

    .rwtn__row-ico {
        flex: 0 0 32px;
        height: auto;
    }

    .rwtn__row a {
        flex: 1 1 auto;
    }

    /* Abmelden steht abgesetzt, braucht hier aber keine ganze Leerzeile. */
    .rwtn__row--quit {
        margin-top: 0;
    }

    /* Das Kreuz in der Tafel entfaellt: zu ist das Schubfach ueber den
       Hamburger, der offen ein Kreuz zeigt. Zwei Kreuze nebeneinander
       waeren nur verwirrend. */
    .rwtn__close {
        display: none;
    }

    /* Das kleine Untermenue klappt genauso auf wie eine Tafel. */
    .rwtn__submenu {
        position: static;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
        margin: 0;
        padding: 0;
    }

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

    .rwtn__submenu-link {
        min-height: 48px;
        padding: 13px 18px 13px 32px;
    }

    .rwtn__submenu li + li .rwtn__submenu-link {
        border-top: 1px solid rgba(255, 255, 255, .05);
    }
}

/* --------------------------------------------------------- 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;
    }
}

/* Im Schubfach ist die Melder-Tafel Teil der Liste und nicht mehr ein
   schwebender Kasten. head-notify.css setzt dort width:100vw !important;
   zwei Klassen im Waehler schlagen das, ohne die Datei anzufassen. */
@media (max-width: 991.98px) {
    .rwtn__panel--notify {
        padding: 0;
        background: transparent;
    }

    .rwtn__panel.rwhn-panel {
        width: 100% !important;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ------------------------------------------------------------------ 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;
    /* Der Titel ist kein Ueberschriften-Element mehr, deshalb steht die
       Schriftstaerke jetzt hier statt aus dem Standard des Browsers. */
    font-weight: 700;
}

.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;
}