/*
*****************************************************************************
Ticketsystem, V0.1 - 2026
(c) 2026 copyright by Frank Schwarz
Alle Rechte vorbehalten, Frank Schwarz; schwarz@beka.de, fs@csskoeln.de
*****************************************************************************
$Id: kopf.css 1 25.09.2026 @fs$
*****************************************************************************
*/
/*
 * Die Kopfzeile - EINMAL fuer alle Seiten. Gestaltung nach der kopf.css des Veranstaltungshubs.
 * Eingebunden VOR ticketsystem.css.
 *
 * Schriften lokal in assets/fonts/ (SIL Open Font License):
 *   RobotoSlab-Bold.ttf, Montserrat-Medium.ttf, Montserrat-Bold.ttf
 * Montserrat zusaetzlich in 700, damit Fettdruck nicht kuenstlich erzeugt wird.
 */
@font-face { font-family: "beka Slab"; src: url("../fonts/RobotoSlab-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "beka Sans"; src: url("../fonts/Montserrat-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "beka Sans"; src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root { --blau: #203A74; --limette: #C9D526; --hell: #EAF6FE; --weiss: #FFFFFF; }

.kopf {
    font-family: "beka Sans", "Segoe UI", Arial, sans-serif;
    font-size: 16px; line-height: 1.5; color: var(--blau);
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding: 28px 32px 20px;
    background: var(--weiss);
    border-bottom: 4px solid var(--limette);
}
/* Marke: Logo (wenn hochgeladen) und das Wort Ticketsystem. Kopfzeile: Name neben dem Logo; in der Seitenleiste darunter. */
.marke { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--blau); }
.marke img { height: 46px; width: auto; display: block; }
.markenname { font-family: "beka Slab", Georgia, serif; font-weight: 700; font-size: 26px; line-height: 1.1; }

.hauptmenue { display: flex; gap: 20px; flex-wrap: wrap; }
.hauptmenue a { color: var(--blau); text-decoration: none; font-weight: 700; padding-bottom: 2px; }
.hauptmenue a:hover { background: var(--limette); }
.hauptmenue a[aria-current="page"] { border-bottom: 2px solid var(--limette); }

.kopfknoepfe { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.kopfsymbol {
    width: 40px; height: 40px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hell); color: var(--blau);
    border: 0; border-radius: 50%; cursor: pointer; text-decoration: none; padding: 0;
}
.kopfsymbol:hover { background: var(--limette); }
.kopfsymbol.hier, .kopfsymbol.hier:hover { background: var(--blau); color: #fff; }
.kopfsymbol:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

.werda { display: flex; flex-direction: column; line-height: 1.25; margin-left: 6px; }
.werda b { font-size: 14px; color: var(--blau); white-space: nowrap; }
.kopf .abmelden {
    color: var(--blau); font-size: 13px; font-weight: 700; text-decoration: none;
    border-bottom: 2px solid var(--limette); white-space: nowrap; padding-bottom: 2px;
}
.kopf .abmelden:hover { background: var(--limette); }

@media (max-width: 720px) {
    .kopf { gap: 14px; padding: 18px 16px 14px; }
    .marke img { height: 34px; }
    .markenname { font-size: 20px; }
    .kopf .abmelden { font-size: 14px; }
}
@media (max-width: 420px) { .markenname { font-size: 18px; } }