/* rahmen.css - automatisch aus der Live-Seite (werkzeug/rahmen-bauen.py): Inline-Stile von Kopf und Navigation. */
:root {--ghost-accent-color: #FF1A75;}

.count.mv-zahl-warte{visibility:hidden}

/* Aufklappmenue in der Kopfnavigation. Es sitzt in derselben Reihe wie die
       Verweise und uebernimmt deren Schriftbild. */
    /* Drei Spalten, der Shop-Knopf sitzt in der mittleren und damit exakt
       ueber dem Logo. Die alten Regeln in style.css treffen nur direkte
       Kinder von .container, deshalb hier die Entsprechung fuer die Gruppen. */
    /* Der Abstand von 25 px stammt aus style.css und ergibt zusammen mit den
       20 px Innenabstand der Verweise 65 px zwischen den Beschriftungen. Er muss
       sowohl zwischen den Rasterspalten als auch innerhalb der Gruppen gelten,
       sonst stehen die Verweise enger als frueher und neben dem Shop-Knopf
       anders als untereinander. */
    #nav .container { display: grid !important; grid-template-columns: 1fr auto 1fr;
                      align-items: center; gap: 25px; }
    #nav .nav-gruppe { display: flex; align-items: center; gap: 25px; }
    #nav .nav-gruppe.links { justify-content: flex-end; }
    #nav .nav-gruppe.rechts { justify-content: flex-start; }
    #nav .nav-gruppe > a { color: #fff !important; padding: 20px; font-size: 19px; font-weight: 800; }
    .nav-mehr { position: relative; }
    .nav-mehr-knopf {
        border: none; background: transparent; color: #fff; cursor: pointer;
        font-family: inherit; font-size: 19px; font-weight: 800; padding: 20px;
        display: inline-flex; align-items: center; gap: 8px; line-height: 1;
    }
    .nav-mehr-knopf i { font-size: 13px; transition: transform .16s; opacity: .8; }
    .nav-mehr-knopf[aria-expanded="true"] i { transform: rotate(180deg); }
    .nav-mehr-feld {
        position: absolute; top: calc(100% - 8px); left: 50%; transform: translateX(-50%);
        background: #fff; border-radius: 12px; padding: 8px; min-width: 210px;
        box-shadow: 0 12px 34px rgba(15,23,42,.22); z-index: 40; text-align: left;
    }
    .nav-mehr-feld[hidden] { display: none; }
    /* Variante D2b: Inhaltsseiten links (Item-Preise, Elterninformation), Landingpage Vote mittig */
    @media (min-width: 601px) {
      .mv-shop .mv-kopf, .mv-shop .mv-kopf h1, .mv-shop .mv-kopf > p { text-align: left !important; }
      .mv-shop .mv-suchzeile { margin-left: 0 !important; }
      .mv-eltern-header { max-width: 1000px !important; margin-left: auto !important; margin-right: auto !important; }
      .mv-eltern-header, .mv-eltern-header h1, .mv-eltern-header > p { text-align: left !important; }
      .mv-vote-header, .mv-vote-header h1, .mv-vote-header > p { text-align: center !important; }
    }
    /* Ueberschriften (Leon 04.11.2026): Rechtstexte am PC linksbuendig wie ihr Text; lange Woerter am Handy mit
       Trennstrich statt "Geschaeftsbeding / ungen" (lang="de" ist gesetzt). */
    .article-header .article-title { -webkit-hyphens: auto; hyphens: auto; }
    @media (min-width: 601px) { .article-header .article-title { text-align: left; } }
    /* Fusszeile: soziale Netzwerke rechts neben "Zurueck nach oben" (Leon 04.11.2026), gleiche Farbe/Abstaende wie der Pfeil.
       Inline-SVG, weil die Font-Awesome-Teilmenge nur Discord kennt; kein style-Attribut (CSP auf /team/, /creator/). */
    #footer .footer-col .right ul > li > a.mv-sozial svg { width: 20px; height: 20px; display: block; }
    .nav-mehr-feld a {
        display: block; padding: 11px 15px; border-radius: 8px; color: #334155 !important;
        font-size: 15px !important; font-weight: 700; white-space: nowrap;
    }
    .nav-mehr-feld a:hover { background: #f0f9ff; color: #0082ab !important; }

/* Logo: im Original als style-Attribut (CSP) */
#logo img { aspect-ratio: 800 / 483; }

/* Fusszeile: Umbruch nur zwischen den Verweisen (rahmen-bauen.py, 04.11.2026) */
#footer small a { white-space: nowrap; }