/* Festkiste, Kopfzeile neu (06.11.2026). Eigene Datei, weil die Unterseiten boho.css nicht laden; Farben mit Rückfall auf die Werte aus boho.css. Quelle: _bau/kopf_neu.css, Markup: _bau/kopf_bauen.py */
/* ---------- Kopf neu (Jairo 06.11.2026: anschaulicher, übersichtlicher; gebaut von _bau/kopf_bauen.py) -------- */
.kopf--neu .kopf__in { gap: 1.25rem; min-height: 4.6rem; }
.kopf--neu .marke { gap: .7rem; font-size: 1.5rem; line-height: 1; }
.kopf--neu .marke__zeichen { height: 3.1rem; }
.kopf--neu .marke__wort { display: flex; flex-direction: column; gap: .22rem; }
.kopf--neu .marke small { display: block; margin: 0; font-size: .74rem; letter-spacing: .02em; color: var(--terra-text, #8B5814); white-space: nowrap; }
@media (max-width: 30rem) { .kopf--neu .marke small { display: none; } .kopf--neu .marke { font-size: 1.35rem; } .kopf--neu .marke__zeichen { height: 2.7rem; } }
@media (min-width: 56rem) and (max-width: 64rem) { .kopf--neu .marke small { display: none; } }
@media (min-width: 64rem) and (max-width: 79.99rem) { .kopf--neu .marke small { display: block; } }

/* Navigation: Pillen statt nackter Wörter, Unterstrich bleibt als Lauf-Effekt */
.kopf--neu .nav { align-items: center; gap: .25rem; }
@media (min-width: 56rem) and (max-width: 64rem) { .kopf--neu .nav { gap: 0; } .kopf--neu .nav > a.nav__mehr { display: none; } .kopf--neu .kopf__in { gap: .75rem; } .kopf--neu .nav > a, .angebot__knopf { padding: .45rem .65rem; } }
.kopf--neu .marke { flex: none; }
.kopf--neu .nav { flex: none; }
.kopf--neu .nav > a, .angebot__knopf { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: .45rem .85rem; border-radius: 999px; font: inherit; font-weight: 500; color: var(--tinte, #283B13); background: none; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
.kopf--neu .nav > a:hover, .kopf--neu .nav > a[aria-current], .angebot__knopf:hover, .angebot.ist-offen > .angebot__knopf, .angebot:hover > .angebot__knopf, .angebot--hier > .angebot__knopf { background: color-mix(in srgb, var(--rose-hell, #EAE5D8) 70%, transparent); }
.kopf--neu .nav > a::after { bottom: .35rem; left: .85rem; right: calc(100% - .85rem); }
.kopf--neu .nav > a:hover::after { right: .85rem; }
.angebot__knopf { font-weight: 600; color: var(--terra-tief, #AC6114); }
.angebot__pfeil { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.angebot.ist-offen .angebot__pfeil, .angebot:hover .angebot__pfeil { transform: rotate(180deg); }

/* Ausklapper «Angebot»: drei Mietsachen mit Symbol und einem Satz */
.angebot { position: relative; }
.angebot__blatt { position: absolute; left: 0; top: calc(100% + .55rem); z-index: 60; display: grid; gap: .15rem; width: 20rem; padding: .55rem; background: var(--leinen-hell, #FDF9F5); border-radius: 18px; border: 1px solid var(--linie, rgba(40, 59, 19, .16)); box-shadow: 0 18px 40px -12px rgba(40, 30, 10, .28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s; }
.angebot.ist-offen .angebot__blatt, .angebot:hover .angebot__blatt, .angebot:focus-within .angebot__blatt { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.angebot__blatt::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; } /* Brücke, damit die Maus den Weg vom Knopf ins Blatt übersteht */
.angebot__item, .kopf--neu .menue__liste .menue__item { display: flex; align-items: center; gap: .8rem; padding: .65rem .75rem; border-radius: 12px; text-decoration: none; color: var(--tinte, #283B13); }
.angebot__item:hover, .angebot__item:focus-visible, .menue__item:hover, .menue__item:focus-visible { background: color-mix(in srgb, var(--rose-hell, #EAE5D8) 75%, transparent); }
.angebot__item[aria-current], .menue__item[aria-current] { background: color-mix(in srgb, var(--rose-hell, #EAE5D8) 75%, transparent); box-shadow: inset 3px 0 0 var(--terra, #CD6B14); }
.angebot__ikon, .menue__ikon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--papier-dunkel, #F8E7D4); color: var(--terra-tief, #AC6114); }
.angebot__ikon svg, .menue__ikon svg { width: 1.3rem; height: 1.3rem; }
.angebot__text, .menue__text { display: grid; gap: .1rem; min-width: 0; }
.angebot__text b, .menue__text b { font-weight: 600; }
.angebot__text small, .menue__text small { font-size: .82rem; color: var(--tinte-weich, #46571E); line-height: 1.3; }
.angebot__alle { display: block; margin-top: .25rem; padding: .6rem .75rem; border-top: 1px solid var(--linie, rgba(40, 59, 19, .16)); font-size: .9rem; font-weight: 600; color: var(--terra-tief, #AC6114); text-decoration: none; }
.angebot__alle:hover { text-decoration: underline; }

/* Rechts: Instagram, Knopf, Menü (Menü nur unter 56 rem, darüber trägt die Navigation alles) */
.kopf--neu .kopf__rechts { gap: .45rem; }
@media (min-width: 56rem) { .kopf--neu .menue { display: none; } }
.kopf--neu .menue > summary { gap: .4rem; padding: 0 .8rem; border-radius: 999px; background: color-mix(in srgb, var(--rose-hell, #EAE5D8) 70%, transparent) !important; color: var(--tinte, #283B13); }
.kopf--neu .menue[open] > summary { background: var(--rose-hell, #EAE5D8) !important; }
@media (max-width: 30rem) { .kopf--neu .menue > summary { padding: 0 .55rem; } }

/* Menü-Blatt mobil: zwei Gruppen und der Bestellknopf */
.kopf--neu .menue__liste { width: min(22rem, 100vw - 2 * var(--pad, 1rem)); padding: .6rem; border-radius: 18px; border: 1px solid var(--linie, rgba(40, 59, 19, .16)); background: var(--leinen-hell, #FDF9F5); box-shadow: 0 18px 40px -12px rgba(40, 30, 10, .28); max-height: calc(100vh - 7rem); overflow: auto; }
.menue__titel { margin: .35rem .75rem .25rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--terra-text, #8B5814); }
.menue__titel + .menue__titel, .menue__item + .menue__titel, .menue__raster + .menue__titel { margin-top: .9rem; }
.kopf--neu .menue__liste .menue__item { padding: .55rem .75rem; }
.menue__raster { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; }
.kopf--neu .menue__liste .menue__raster a { padding: .6rem .75rem; font-weight: 500; }
.kopf--neu .menue__liste .menue__knopf { display: inline-flex; justify-content: center; margin: .75rem .25rem .2rem; }
.kopf--neu .menue__liste .menue__knopf .knopf-kurz { display: none; }
.kopf--neu .menue__liste .menue__knopf .knopf-lang { display: inline; }
@media (max-width: 30rem) { .kopf--neu .kopf__insta { display: none; } .kopf--neu .kopf__in { gap: .6rem; } .kopf--neu .kopf__rechts { gap: .3rem; } } /* 06.11.2026: bei 360 px war der Kopf 26 px zu breit, Instagram steht dafür im Menü */