/* Autokratische Freunde Deutschlands – statische One-Page
   Look: kühl, staatlich, „Aktenordner-Ästhetik“ (Satire) */

/* ==========================================================
   Design Tokens
   ========================================================== */

:root{
  --bg: #0b0d12;
  --bg2:#101522;
  --card:#0f1420;
  --line:#24304a;
  --text:#e8eefc;
  --muted:#b7c2dd;
  --accent:#d4b36a; /* „Gold“ */
  --accent2:#9fb6ff;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --max: 1120px;
  --serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ==========================================================
   Reset & Base
   ========================================================== */

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 15% 10%, rgba(159,182,255,.18), transparent 60%),
    radial-gradient(1000px 700px at 85% 0%, rgba(212,179,106,.14), transparent 55%),
    linear-gradient(180deg, var(--bg), #07080b 85%);
  font-family: var(--sans);
  letter-spacing:.2px;
}

a{ color:inherit; text-decoration:none; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

/* ==========================================================
   🔒 Globale Medien-Sicherung (WICHTIG)
   verhindert übergroße Wappen / Grafiken
   ========================================================== */

img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
  display:block;
}

/* ==========================================================
   Topbar / Navigation
   ========================================================== */

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(11,13,18,.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(36,48,74,.55);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
}

.brand__mark{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(212,179,106,.55);
  border-radius:9px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.brand__name{
  font-weight:800;
  letter-spacing:.6px;
}

.brand__tag{
  color:var(--muted);
  font-size:13px;
  border-left:1px solid rgba(183,194,221,.22);
  padding-left:10px;
}

.nav{
  display:flex;
  gap:14px;
}

.nav a{
  color:var(--muted);
  font-size:13px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
}

.nav a:hover{
  color:var(--text);
  border-color: rgba(159,182,255,.22);
  background: rgba(16,21,34,.55);
}

/* ==========================================================
   Hero / Content
   ========================================================== */

.hero{
  padding:44px 0 34px;
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap:26px;
  align-items:start;
}

.kicker{
  display:inline-block;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.9px;
  text-transform:uppercase;
  border:1px solid rgba(212,179,106,.28);
  padding:8px 10px;
  border-radius:999px;
  background: rgba(16,21,34,.35);
}

.hero__title{
  margin:14px 0 10px;
  font-family: var(--serif);
  font-weight:700;
  line-height:1.12;
  font-size: clamp(28px, 4.2vw, 46px);
}

.hero__lead{
  margin:12px 0 18px;
  max-width:62ch;
  line-height:1.6;
}

/* ==========================================================
   Cards / Panels
   ========================================================== */

/* Container für 2-Spalten Layout im Desktop */
.card-grid{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 980px){
  .card-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.card,
.panel{
  border:1px solid rgba(36,48,74,.7);
  border-radius: var(--radius);
  background: rgba(15,20,32,.55);
  box-shadow: var(--shadow);
}

.card{
  overflow:hidden;
}

.card__header{
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(36,48,74,.55);
  background: linear-gradient(
    180deg,
    rgba(16,21,34,.85),
    rgba(15,20,32,.55)
  );
}

.card__content{
  padding:14px;
}

/* gezielte Bildbegrenzung in Cards (Wappen etc.) */
.card img,
.hero__visual img{
  max-height:420px;
  object-fit:contain;
  margin:0 auto;
}

.section{
  padding:44px 0;
  border-top:1px solid rgba(36,48,74,.45);
}

/* ==========================================================
   HYMNS / PLAYER – integriertes Modul
   ========================================================== */

.hymn-player{
  margin-top:2.5rem;
  padding:2rem;
  background: rgba(15,20,32,.55);
  border:1px solid rgba(36,48,74,.65);
  border-radius: var(--radius);
}

/* Karten */
.hymn-cards{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}

.hymn-card{
  min-width:300px;
  max-width:420px;
  padding:20px;
  scroll-snap-align:start;
  background: rgba(15,20,32,.6);
  border:1px solid rgba(36,48,74,.65);
  border-radius: var(--radius);
  cursor:pointer;
}

.hymn-card.active{
  border-color: rgba(212,179,106,.7);
  box-shadow: 0 0 0 1px rgba(212,179,106,.35);
}

/* Sprache */
.language-selector{
  display:flex;
  gap:10px;
  justify-content:center;
  margin:20px 0;
}

.language-selector button{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(36,48,74,.65);
  background: rgba(16,21,34,.55);
  color:var(--muted);
}

.language-selector button.active{
  color:var(--text);
  border-color: rgba(212,179,106,.55);
}

/* Player */
.player{
  margin-bottom:2rem;
  padding:1.25rem;
  border:1px solid rgba(36,48,74,.65);
  background: rgba(15,20,32,.55);
}

.player-controls{
  display:flex;
  gap:1rem;
  margin-top:.75rem;
}

.control-btn{
  background: rgba(16,21,34,.65);
  border:1px solid rgba(36,48,74,.65);
  color:var(--text);
}

/* Progress */
.progress-bar{
  height:4px;
  background: rgba(36,48,74,.55);
}

.progress-fill{
  background: var(--accent);
}

/* Lyrics */
.lyrics-container{
  margin-top:2rem;
  padding:1.5rem;
  background: rgba(15,20,32,.55);
  border:1px solid rgba(36,48,74,.65);
  border-radius: var(--radius);
}

/* Song Info */
.song-info{
  margin-top:2rem;
  padding:1.25rem;
  border-top:1px solid rgba(212,179,106,.45);
}

.song-info h3{
  color: var(--accent);
  font-size:.9rem;
  text-transform:uppercase;
}

/* ==========================================================
   Footer
   ========================================================== */

.footer{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(36,48,74,.5);
  font-size:12px;
  color:var(--muted);
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 980px){
  .hero__grid{ grid-template-columns:1fr; }
  .nav{ display:none; }
}
/* ==========================================================
   Hamburger Menu & Sidebar Navigation (Central CSS)
   Theme-specific colors are overridden in theme files
   ========================================================== */

/* Navigation Row */
.nav-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--spacing-md, 1rem) 0;
}

/* Hamburger Menu Toggle Button - Always visible */
.mobile-menu-toggle {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 2px solid var(--color-accent, var(--accent, #d4b36a));
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2147483647;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
  touch-action: manipulation;
}

.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Hamburger Icon - SVG für Safari-Kompatibilität */
.hamburger-icon {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--color-accent, var(--accent, #d4b36a));
  flex-shrink: 0;
}


/* Navigation Overlay */
.mobile-nav-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.75);
  z-index: 2147483647 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  isolation: isolate;
  pointer-events: none;
}

.mobile-nav-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

/* Höhere Spezifität für .active State */
#mobile-nav-overlay.mobile-nav-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Navigation Sidebar - Always from left */
.mobile-nav-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: min(340px, 85vw);
  height: 100vh !important;
  background: var(--color-panel-bg, var(--bg2, #101522));
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
  transform: translateX(-100%);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 2147483647 !important;
  visibility: visible !important;
}

.mobile-nav-overlay.active .mobile-nav-sidebar {
  transform: translateX(0) !important;
}

/* Höhere Spezifität für Sidebar Transform */
#mobile-nav-overlay.active .mobile-nav-sidebar {
  transform: translateX(0) !important;
}

/* Navigation Header */
.mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1rem;
  background: var(--color-nav-bg, var(--bg, #0b0d12));
  border-bottom: 2px solid var(--color-accent, var(--accent, #d4b36a));
  font-weight: bold;
  font-size: 1.125rem;
  color: var(--color-text, var(--text, #e8eefc));
  flex-shrink: 0;
  visibility: visible !important;
}

.mobile-nav-close {
  background: transparent;
  border: 2px solid var(--color-accent, var(--accent, #d4b36a));
  color: var(--color-text, var(--text, #e8eefc));
  font-size: 1.5rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  visibility: visible !important;
}

.mobile-nav-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

/* Navigation List */
.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  visibility: visible !important;
  display: block !important;
  min-height: 400px;
}

.mobile-nav-list li {
  border-bottom: 1px solid var(--color-border, var(--line, #24304a));
  visibility: visible !important;
}

.mobile-nav-list a {
  display: block;
  padding: 1rem 1.2rem;
  color: var(--color-muted, var(--muted, #b7c2dd));
  font-weight: 500;
  font-size: 1.125rem;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
  text-decoration: none;
  visibility: visible !important;
}

.mobile-nav-list a:hover,
.mobile-nav-list a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--color-accent, var(--accent, #d4b36a));
  color: var(--color-text, var(--text, #e8eefc));
  padding-left: calc(1.2rem + 8px);
}

.mobile-nav-list a[aria-current="page"] {
  font-weight: 700;
  border-left-width: 6px;
}

/* Navigation Controls */
.mobile-nav-controls {
  padding: 1rem;
  background: var(--color-nav-bg, var(--bg, #0b0d12));
  border-top: 2px solid var(--color-border, var(--line, #24304a));
  flex-shrink: 0;
  visibility: visible !important;
}

.mobile-nav-controls label {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-muted, var(--muted, #b7c2dd));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  visibility: visible !important;
}

.mobile-nav-controls .pill {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.mobile-nav-controls .pill button {
  flex: 1;
}