/* Kopfzeile + Aufklappmenü – gemeinsam für App (base.html.twig) und Stammdaten (EasyAdmin).
   Maße in em relativ zu .kopf (16px), weil EasyAdmin eine andere Grundschriftgröße hat. */
.kopf { position: sticky; top: 0; z-index: 1040; display: flex; align-items: center; gap: .5em 1em; flex-wrap: wrap; padding: 0 1em; min-height: 3.5em;
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--on-brand);
    background: linear-gradient(135deg, var(--brand), var(--brand-deep)); border-bottom: 3px solid var(--accent); }
.kopf a { color: var(--on-brand); }
.marke { font-weight: 800; font-size: 1.1em; text-decoration: none; letter-spacing: .02em; }
.kopf nav { display: flex; align-items: center; gap: 0; flex-wrap: wrap; flex: 1; }
.kopf nav > a, .kopf nav .menue > summary { display: inline-flex; align-items: center; gap: .3em; min-height: 3em; padding: 0 .6em; border-radius: 8px;
    font-size: .95em; text-decoration: none; color: color-mix(in srgb, var(--on-brand) 86%, transparent); cursor: pointer; transition: background-color var(--ruhig), color var(--ruhig); }
.kopf nav > a:hover, .kopf nav .menue > summary:hover, .kopf nav .menue[open] > summary { background: color-mix(in srgb, var(--on-brand) 12%, transparent); color: var(--on-brand); }
.kopf nav > a.aktiv, .kopf nav .menue > summary.aktiv { color: var(--on-brand); font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent); border-radius: 8px 8px 0 0; }
.kopf nav .menue-rechts { margin-left: auto; }
.benutzer { display: flex; align-items: center; gap: .6em; font-size: .85em; color: color-mix(in srgb, var(--on-brand) 80%, transparent); }
.symbol { width: 1.2em; height: 1.2em; flex: none; }
.benutzer .symbol { width: 1.4em; height: 1.4em; }
.themenschalter { display: inline-grid; place-items: center; width: 3em; height: 3em; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--on-brand) 35%, transparent);
    background: transparent; color: var(--on-brand); cursor: pointer; transition: background-color var(--ruhig); }
.themenschalter:hover { background: color-mix(in srgb, var(--on-brand) 15%, transparent); }

.menue { position: relative; }
.menue summary { list-style: none; }
.menue summary::-webkit-details-marker { display: none; }
.menue summary::after { content: ""; width: .4em; height: .4em; margin-left: .1em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.15em) rotate(45deg); opacity: .7; }
.menue-inhalt { position: absolute; z-index: 50; top: calc(100% + .4em); left: 0; width: 22em; max-width: 90vw; display: grid; gap: .9em; padding: 1em;
    color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.menue-rechts .menue-inhalt { left: auto; right: 0; }
.menue-liste { width: auto; min-width: 11em; gap: .15em; padding: .35em; }
.kopf .menue-liste a { color: var(--ink); padding: .55em .75em; border-radius: 8px; text-decoration: none; font-size: .95em; }
.kopf .menue-liste a:hover { background: var(--brand-wash); }
.kopf .menue-liste a.aktiv { background: var(--brand-soft); font-weight: 700; color: var(--brand-ink); }

@media (max-width: 900px) {
    .kopf { position: static; padding: .4em 1em; }
    .kopf nav { order: 3; flex-basis: 100%; padding-bottom: .3em; }
    .kopf nav .menue-rechts { margin-left: 0; }
    .benutzer { margin-left: auto; }
}
@media print { .kopf { display: none; } }