/* chrome.css — Seitenleiste, Kopfleiste auf dem Handy und Bedienung.
 *
 * Diese Regeln standen in neun Seiten je einmal, mit kleinen Abweichungen, die
 * niemand beabsichtigt hatte: Auf einigen Seiten fehlte der Uebergang beim
 * Einblenden des Schleiers, auf anderen klebte der untere Block der
 * Seitenleiste nicht am Boden. Hier steht jetzt die verbindliche Fassung.
 *
 * Was NICHT hierher gehoert: die Fussleiste und die Knoepfe. Beide sehen je
 * nach Seite bewusst anders aus.
 */

/* ===== SIDEBAR ===== */
.sidebar{
    position:fixed;top:0;left:0;width:260px;height:100vh;
    background:var(--sidebar-bg);z-index:1000;
    display:flex;flex-direction:column;padding:2rem 1.5rem;
    overflow-y:auto;border-right:1px solid var(--card-border);
}
.sidebar-logo{text-align:center;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--card-border)}
.sidebar-logo a{text-decoration:none}
.sidebar-logo img{width:180px;height:auto}
.nav-group{margin-bottom:0.5rem}
.nav-group-label{
    display:block;font-size:0.7rem;font-weight:700;text-transform:uppercase;
    letter-spacing:1.2px;color:var(--gold);padding:0 1rem;margin-bottom:0.3rem;
    font-variant:small-caps;
}
.sidebar-nav{list-style:none}
.sidebar-nav li{margin-bottom:0.1rem}
.sidebar-nav a{
    display:block;padding:0.5rem 1rem;color:var(--text-muted);
    text-decoration:none;font-weight:500;font-size:0.92rem;
    border-radius:8px;transition:all 0.3s;
}
.sidebar-nav a:hover{background:rgba(212,165,116,0.08);color:var(--gold)}
.sidebar-nav a.active{background:rgba(212,165,116,0.12);color:var(--gold)}
.sidebar-bottom{padding-top:1rem;border-top:1px solid var(--card-border);margin-top:auto}
.sidebar-legal a{
    display:block;padding:0.35rem 1rem;font-size:0.8rem;
    color:var(--text-dim);text-decoration:none;transition:color 0.2s;
}
.sidebar-legal a:hover{color:var(--gold)}

/* Sound Toggle */
.sound-toggle{
    display:flex;align-items:center;gap:0.5rem;
    padding:0.5rem 1rem;margin-top:0.8rem;cursor:pointer;
    background:rgba(212,165,116,0.05);border:1px solid rgba(212,165,116,0.2);
    border-radius:8px;color:var(--text-dim);font-size:0.8rem;
    transition:all 0.3s;font-family:'Inter',sans-serif;width:100%;
}
.sound-toggle:hover{background:rgba(212,165,116,0.1);color:var(--gold)}

/* Sound Toggle */
.sound-toggle{
    display:flex;align-items:center;gap:0.5rem;
    padding:0.5rem 1rem;margin-top:0.8rem;cursor:pointer;
    background:rgba(212,165,116,0.05);border:1px solid rgba(212,165,116,0.2);
    border-radius:8px;color:var(--text-dim);font-size:0.8rem;
    transition:all 0.3s;font-family:'Inter',sans-serif;width:100%;
}
.sound-toggle:hover{background:rgba(212,165,116,0.1);color:var(--gold)}

/* ===== MOBILE TOPBAR ===== */
.mobile-topbar{
    display:none;position:fixed;top:0;left:0;width:100%;height:56px;
    background:var(--sidebar-bg);z-index:1001;padding:0 1rem;
    align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--card-border);
}
.mobile-topbar .mobile-logo{display:flex;align-items:center;gap:0.6rem;text-decoration:none}
.mobile-topbar .mobile-logo img{height:36px;width:auto}
.mobile-topbar .mobile-logo span{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--text-muted)}
.mobile-menu-btn{
    width:40px;height:40px;background:transparent;
    border:1px solid rgba(212,165,116,0.3);border-radius:8px;cursor:pointer;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    transition:all 0.3s;
}
.mobile-menu-btn:hover{background:rgba(212,165,116,0.1)}
.mobile-menu-btn span{display:block;width:20px;height:2px;background:var(--gold);transition:all 0.3s}
.sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:999;opacity:0;transition:opacity 0.3s;pointer-events:none}
.sidebar-overlay.active{display:block;opacity:1;pointer-events:auto}

/* ==================== BEDIENUNG ====================
   Lag als Inline-Block nur in index.html. Damit hatte jede neue
   Seite weder Sprungmarke noch sichtbaren Fokus — news.html hat
   genau das vorgefuehrt. Gehoert allen Seiten gemeinsam. */
/* Sprungmarke: nur sichtbar, wenn sie den Tastaturfokus hat. Ohne sie muss
   sich jeder Tastaturnutzer durch das ganze Menue arbeiten. */
.zum-inhalt {
    position: absolute; left: -9999px; top: 0; z-index: 10000;
    padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0;
    background: #d4a574; color: #1a1510; font-weight: 700; text-decoration: none;
}
.zum-inhalt:focus { left: 0; }

/* Sichtbarer Fokus. Vorher gab es dafuer drei bis fuenf Regeln auf der ganzen
   Seite - wer mit der Tastatur navigiert, sah meist nicht, wo er steht. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #d4a574;
    outline-offset: 2px;
    border-radius: 4px;
}
/* Fuer Browser ohne :focus-visible */
a:focus, button:focus { outline-color: #d4a574; }

/* Verweise im Fliesstext etwas heller: der Datenschutz-Verweis im
   Kontaktformular lag bei 4,09 statt der noetigen 4,5. */
.checkbox-group a, .form-group a, label a { color: #e0b98a; }

/* ==================== WAS ANDERE SAGEN ====================
   Bewusst ohne YouTube-Vorschaubilder: Die wuerden bei jedem Aufruf
   eine Verbindung zu Google oeffnen. Genau das vermeidet die Seite an
   allen anderen Stellen auch, deshalb Text und ein Abspielzeichen. */

#stimmen .container{padding-top:2rem}
.st-raster{display:grid;gap:1.1rem}
@media(min-width:760px){.st-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.st-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}

.st-karte{
    display:flex;flex-direction:column;gap:0.8rem;
    background:var(--card-bg);border:1px solid var(--card-border);
    border-radius:12px;padding:1.3rem 1.4rem;
    transition:transform 0.25s ease,border-color 0.25s ease;
}
.st-karte:hover{transform:translateY(-3px);border-color:rgba(212,165,116,0.32)}

.st-kopf{display:flex;align-items:center;gap:0.7rem}
.st-zeichen{
    width:34px;height:34px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
    background:rgba(212,165,116,0.1);border:1px solid var(--card-border);
    color:var(--gold);font-size:0.9rem;line-height:1;
}
.st-serie .st-zeichen{color:#e06b5c;border-color:rgba(224,107,92,0.35);background:rgba(224,107,92,0.08)}
.st-wer{font-weight:600;color:var(--text-light);font-size:0.95rem;line-height:1.25}
.st-wer a{color:inherit;text-decoration:none}
.st-wer a:hover{color:var(--gold)}
.st-quelle{
    display:block;font-size:0.7rem;letter-spacing:0.09em;text-transform:uppercase;
    color:var(--text-dim);opacity:0.7;margin-top:0.1rem;
}
.st-zitat{
    margin:0;font-size:0.95rem;line-height:1.65;color:var(--text-dim);
    border-left:2px solid rgba(212,165,116,0.3);padding-left:0.9rem;
}
.st-zitat.st-woertlich{font-style:italic;color:var(--text-muted)}
.st-hin{
    margin-top:auto;padding-top:0.3rem;font-size:0.85rem;font-weight:600;
    color:var(--gold);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;
}
.st-hin:hover{color:var(--copper)}
.st-fuss{
    margin:1.6rem auto 0;text-align:center;font-size:0.85rem;
    color:var(--text-dim);opacity:0.75;max-width:60ch;
}

/* ----- Sprachumschalter -----
   Stand nur in den Unterseiten. Auf der Startseite sind die Knoepfe ueber
   style-Attribute im Markup gesetzt — deshalb fehlte die Regel im grossen
   Stylesheet und damit hier. */
.lang-switcher{
    display:flex;align-items:center;justify-content:center;gap:0;
    border:1px solid rgba(212,165,116,0.4);border-radius:50px;
    overflow:hidden;margin-top:1rem;
}
.lang-btn{
    background:transparent;border:none;padding:0.35rem 1.2rem;cursor:pointer;
    font-weight:600;font-size:0.85rem;font-family:'Inter',sans-serif;
    color:var(--text-dim);transition:all 0.3s;flex:1;text-align:center;
}
.lang-btn.active{background:var(--gold);color:#fff}
.lang-btn:not(.active):hover{background:rgba(212,165,116,0.15);color:var(--text-muted)}

/* ----- je nach Bildschirmbreite ----- */
@media(max-width:768px){
    .sidebar{transform:translateX(-100%);transition:transform 0.3s ease;z-index:1002;width:min(280px, 85vw)}
    .sidebar.open{transform:translateX(0)}
    .sidebar-overlay{pointer-events:none}
    .sidebar-overlay.active{display:block;pointer-events:auto}
    .mobile-topbar{display:flex}
}
@media(min-width:1920px){
    .sidebar{width:280px}
}
@media(min-width:2560px){
    .sidebar{width:300px}
}