/* ------------------------------------------------------------------
   Nyx 28.07.2026 — "Stoebern" im mobilen Header
   GRUNDREGEL: Das Original wird NIE ausgeblendet.
   Im Sticky waechst es mit der Bildschirmbreite mit - aber nur so weit,
   wie tatsaechlich Platz da ist (clamp + Restplatz-Rechnung).
   Rueckbau: Datei loeschen + Zeile aus meta.html.twig, Deploy-Sequenz.
   ------------------------------------------------------------------ */
.pcl-stoebern-col {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}
.pcl-stoebern-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .25rem;
    line-height: 1;
    border: 0;
    background: none;
    min-width: 0;
}
.pcl-stoebern-img {
    display: block;
    width: var(--pcl-stoebern-breite, 68px);
    height: auto;          /* Verhaeltnis bleibt - keine Verzerrung */
    max-width: 100%;
}

/* ===== STICKY: waechst mit der Bildschirmbreite =====
   Rechnung: die 4 runden Symbole + Menue + Herz belegen zusammen rund
   240px. Was uebrig bleibt, darf "Stoebern" haben - gedeckelt bei 130px,
   Minimum 48px, damit auf kleinen Geraeten nichts umbricht.
   clamp(min, wunsch, max) - der Browser rechnet, ich rate nicht.     */
body.pcl-header-sticky  .pcl-stoebern-img,
body.is-sticky-nav-main .pcl-stoebern-img,
body.twt-sticky-header  .pcl-stoebern-img {
    /* Deckel = die NORMALE Groesse. Im Sticky nie groesser als oben,
       nur kleiner wenn der Platz nicht reicht. (Die Lupe ist 17,6px hoch,
       81px waeren gleichauf - aber normal sind es nur 68px, also gilt 68.) */
    width: clamp(0px, calc(100vw - 313px), var(--pcl-stoebern-breite, 68px));
}
body.pcl-header-sticky  .pcl-stoebern-btn,
body.is-sticky-nav-main .pcl-stoebern-btn,
body.twt-sticky-header  .pcl-stoebern-btn {
    padding: 0 .15rem;
}

/* Herz-Logo im Sticky enger an den Rand (ergaenzt margin-left:5%) */
body.pcl-header-sticky  #sticky-logo,
body.is-sticky-nav-main #sticky-logo {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

/* Nichts darf umbrechen: Aktionsleiste bleibt einzeilig */
.header-actions-col .row { flex-wrap: nowrap; }

/* Die Menue-Spalte enthaelt das Herz-Logo (.mobile-logo) - sie darf
   NICHT schrumpfen und das Herz nicht in die naechste Zeile drueckt. */
.header-actions-col .row > .col.d-sm-none { flex-shrink: 0; }
.menu-button { white-space: nowrap; display: flex; align-items: center; }
.mobile-logo { flex-shrink: 0; }

/* Sehr schmale Geraete im Sticky: Stoebern weglassen statt quetschen -
   dort ist schlicht kein Platz neben Herz + 4 Symbolen. */
@media (max-width: 344px) {
    body.pcl-header-sticky  .pcl-stoebern-col,
    body.is-sticky-nav-main .pcl-stoebern-col { display: none !important; }
}

/* Kleine Geraete: etwas zurueckhaltender starten */
@media (max-width: 375px) { .pcl-stoebern-col { --pcl-stoebern-breite: 60px; } }
@media (max-width: 340px) { .pcl-stoebern-col { --pcl-stoebern-breite: 52px; } }

/* Kopie im nav-main-Balken (nur falls dieser Balken sichtbar ist) */
#pcl-stoebern-sticky { display: none; }
#pcl-stoebern-sticky a { display: flex; align-items: center; height: 50px; padding: 0 4px; }
#pcl-stoebern-sticky img { display: block; width: 78px; height: auto; filter: invert(1) brightness(2); }
body.is-sticky-nav-main #pcl-stoebern-sticky { display: block; float: left; line-height: 50px; }