/* =========================================
   WARM.CSS (DOMAIN B - MAGAZIN)
   100% KOMPLETT - Inklusive Silo-Pills & 900px Layout
   ========================================= */

:root {
  --bg-primary: #fdfbf7;
  --bg-secondary: #ffffff;
  --bg-hero: #1b4332;
  --text-main: #2d3748;
  --text-light: #fdfbf7;
  --accent: #c5a059;
  --accent-hover: #b08d4b;
  --border: #e2e8f0;
  --font-base: "Georgia", "Merriweather", serif;
  --font-heading: "Georgia", "Merriweather", serif;
  --radius: 12px;
  
  /* Zentrale Breitensteuerung */
  --width-content: 1000px;
  --width-layout: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-base);
  background-color: var(--bg-primary);
  color: var(--text-main);
  line-height: 1.8;
  font-size: 18px;
}

img, video, iframe { max-width: 100%; height: auto; }

h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.25; margin-top: 0; margin-bottom: 1rem; color: var(--bg-hero); font-weight: 400; font-family: var(--font-heading); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.3; color: var(--bg-hero); font-weight: 400; font-family: var(--font-heading); margin-top: 2rem; }
h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.4; color: var(--bg-hero); font-weight: 400; font-family: var(--font-heading); }

.page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.content-area { flex: 1; width: 100%; }
.mag-article-view { width: 100%; }

/* --- HEADER --- */
#mag-topbar { background-color: var(--bg-primary); padding: 1.5rem; border-bottom: 1px solid var(--border); position: static !important; width: 100%; margin: 0; }
.mag-topbar-container { max-width: var(--width-layout); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.mag-logo-text { font-family: var(--font-heading); font-size: 1.4rem; font-weight: bold; color: var(--bg-hero); text-decoration: none; }
.mag-menu { display: flex; align-items: center; }
.mag-menu-items { display: flex; list-style: none; margin: 0; padding: 0; gap: 1.5rem; align-items: center; }
.mag-menu-items a { color: var(--text-main); text-decoration: none; font-size: 1rem; font-family: system-ui, sans-serif; }
.mag-menu-items a:hover { color: var(--accent); }
.mag-has-submenu { position: relative; }
.mag-submenu { display: none; position: absolute; top: 100%; left: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); list-style: none; padding: 0.5rem 0; min-width: 260px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); z-index: 1000; }
.mag-has-submenu:hover .mag-submenu { display: block; }
.mag-submenu li { margin: 0; }
.mag-submenu li a { display: block; padding: 0.75rem 1.2rem; }
.mag-submenu li a:hover { background: var(--bg-primary); color: var(--accent); }
.mag-cta-wrap { flex-shrink: 0; }
.mag-cta-btn { background-color: var(--accent); color: #ffffff; padding: 0.8rem 1.5rem; border-radius: 50px; text-decoration: none; font-weight: 600; font-family: system-ui, sans-serif; display: inline-block; transition: background-color 0.2s; }
.mag-cta-btn:hover { background-color: var(--accent-hover); }

/* Mobile Optimierung */
@media (max-width: 768px) {
  #mag-topbar { padding: 1rem; }
  .mag-topbar-container { flex-direction: column; gap: 1.2rem; text-align: center; }
  .mag-logo-text { font-size: 1.25rem; line-height: 1.3; display: block; }
  .mag-menu-items { flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .mag-cta-wrap { width: 100%; }
  .mag-cta-btn { display: block; width: 100%; text-align: center; box-sizing: border-box; }
  .mag-has-submenu:hover .mag-submenu, .mag-has-submenu:active .mag-submenu { display: none !important; }
}

/* --- HERO SECTION --- */
.mag-hero-header { background-color: var(--bg-hero); color: var(--text-light); padding: 4rem 1.5rem; text-align: center; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.mag-hero-inner { max-width: var(--width-content); margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
.mag-topic-tag { display: inline-block; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.2); color: var(--text-light); font-family: system-ui, sans-serif; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; padding: 8px 24px; border-radius: 30px; }
.mag-hero-inner h1 { color: var(--text-light); margin: 0; }
.mag-hero-inner p { font-size: clamp(1.1rem, 2vw, 1.25rem); color: rgba(253,251,247,0.9); margin: 0; line-height: 1.6; }

/* --- HAUPTINHALT & FLIESSTEXT --- */
.mag-reading-container { max-width: var(--width-content); margin: 2rem auto; padding: 0 1.5rem; }
.mag-prose { line-height: 1.8; font-size: 1.05rem; margin-bottom: 3.5rem; }
.mag-prose p { margin-bottom: 1.5rem; }
.mag-prose ul, .mag-prose ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.mag-prose li { margin-bottom: 0.5rem; }
.mag-prose strong { color: var(--bg-hero); }

/* --- REDAKTIONELLES ZITAT --- */
.mag-ed-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; margin: 2rem 0 3.5rem 0; box-shadow: 0 10px 25px rgba(0,0,0,0.03); }
.mag-ed-badge { display: inline-block; background: var(--bg-primary); border: 1px solid var(--border); color: var(--bg-hero); font-family: system-ui, sans-serif; font-size: 0.825rem; font-weight: 700; padding: 0.35rem 0.85rem; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; }
.mag-ed-quote { margin: 0 0 1.5rem 0; padding: 0; border: none; }
.mag-ed-quote p { font-style: italic; font-size: clamp(1.2rem, 3vw, 1.4rem); color: var(--bg-hero); line-height: 1.5; margin: 0; }
.mag-ed-checklist { list-style: none; padding: 0; margin: 0; font-size: 1.05rem; color: var(--text-main); }
.mag-ed-checklist li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; }
.mag-ed-icon { font-weight: bold; color: var(--accent); }

/* --- SILO DIRECTORY (Städte & Bundesländer nach Screenshot) --- */
.mag-silo-container { margin: 4rem 0; display: flex; flex-direction: column; gap: 4rem; }
.mag-silo-section { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 3rem; }
.mag-silo-head h2 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.6rem; color: var(--text-main); }
.mag-silo-head p { font-size: 1.05rem; color: var(--text-main); margin-bottom: 2rem; border-bottom: 2px solid var(--accent); padding-bottom: 1.5rem; }

/* Die Container übereinander statt nebeneinander */
.mag-silo-content { display: flex; flex-direction: column; gap: 3rem; }
.mag-silo-column h3 { font-size: 1.2rem; margin-bottom: 1.5rem; color: var(--text-main); }

/* Bundesländer (Grid mit 3 Spalten + Pfeil-Design) */
.mag-state-list { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 1rem; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.mag-state-list a { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0.8rem 1.2rem; 
    background: var(--bg-secondary); 
    border: 1px solid var(--border); 
    border-radius: 50px; 
    text-decoration: none; 
    color: var(--text-main); 
    font-family: system-ui, sans-serif; 
    font-size: 0.95rem; 
    transition: all 0.2s; 
}
/* Roter Pin per CSS eingefügt (falls im HTML nicht vorhanden) */
.mag-state-list a::before { content: '📍'; margin-right: 8px; font-size: 0.9em; filter: grayscale(100%) sepia(100%) hue-rotate(300deg) saturate(500%); }
/* Kleiner Pfeil rechts */
.mag-state-list a::after { content: '→'; color: #94a3b8; font-size: 1.1em; }
.mag-state-list a:hover { border-color: var(--accent); box-shadow: 0 4px 10px rgba(0,0,0,0.05); color: var(--accent); }
.mag-state-list a:hover::after { color: var(--accent); }

/* Städte (Kleine Pills nebeneinander) */
.mag-city-list { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.8rem; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.mag-city-list a { 
    display: inline-block; 
    padding: 0.6rem 1.2rem; 
    background: var(--bg-secondary); 
    border: 1px solid var(--border); 
    border-radius: 50px; 
    text-decoration: none; 
    color: var(--text-main); 
    font-family: system-ui, sans-serif; 
    font-size: 0.95rem; 
    transition: all 0.2s; 
}
.mag-city-list a:hover { border-color: var(--accent); color: var(--accent); }

/* --- LEAD FORMULAR --- */
.mag-inline-form { margin: 3.5rem 0; }
.mag-inquiry-box { background: var(--bg-secondary); color: var(--text-main); padding: 2.5rem; border-radius: var(--radius); box-shadow: 0 10px 25px rgba(0,0,0,0.05); border: 1px solid var(--border); }
.mag-inquiry-intro h3 { margin-top: 0; margin-bottom: 0.5rem; }
.mag-inquiry-intro p { font-size: 0.95rem; margin-bottom: 2rem; color: #64748b; font-family: system-ui, sans-serif; }
.mag-field-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.mag-list-item { display: flex; flex-direction: column; font-family: system-ui, sans-serif; }
.mag-lbl { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; }
.mag-fld { width: 100%; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 1rem; background: var(--bg-primary); color: var(--text-main); font-family: system-ui, sans-serif; }
.mag-fld:focus { border-color: var(--accent); outline: none; }
.mag-action-area { margin-top: 2rem; text-align: center; }
.mag-submit-btn { background-color: var(--accent); color: #ffffff; padding: 1.2rem 2.5rem; border-radius: 50px; border: none; font-weight: 600; cursor: pointer; display: inline-block; width: 100%; font-size: 1.1rem; font-family: system-ui, sans-serif; transition: background-color 0.2s; }
.mag-submit-btn:hover { background-color: var(--accent-hover); }
.mag-secure-note { display: block; margin-top: 1rem; font-size: 0.85rem; color: #64748b; font-family: system-ui, sans-serif; }

/* --- BREADCRUMBS --- */
.mag-breadcrumb-wrapper { max-width: 1000px; margin: 0 auto; padding: 15px 25px; font-family: system-ui, sans-serif; }
.mag-breadcrumb-list { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.mag-bc-item { display: flex; align-items: center; }
.mag-bc-link { color: var(--accent); text-decoration: none; }
.mag-bc-link:hover { text-decoration: underline; }
.mag-bc-sep { color: #94a3b8; margin: 0 4px; }
.mag-bc-current { color: var(--text-main); font-weight: 600; }

/* --- AUTHOR BOX --- */
.mag-author-profile { background: var(--bg-secondary); border: 1px solid var(--border); padding: 2.5rem; border-radius: var(--radius); margin-top: 3rem; display: flex; align-items: flex-start; gap: 20px; }
.mag-author-pic { background: var(--bg-hero); color: var(--text-light); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: system-ui, sans-serif; flex-shrink: 0; }
.mag-author-bio h4 { margin: 0 0 8px 0; font-size: 1.2rem; color: var(--bg-hero); }
.mag-author-bio p { margin: 0; font-size: 1rem; color: var(--text-main); }

/* --- FAQ --- */
.mag-qna-section { margin: 4rem 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; }
.mag-qna-head h2 { margin-top: 0; margin-bottom: 2rem; text-align: center; }
.mag-qna-items { list-style: none; padding: 0; margin: 0; }
.mag-qna-items li { margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
.mag-qna-items li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.mag-question { display: block; font-size: 1.2rem; color: var(--bg-hero); margin-bottom: 10px; font-weight: 600; font-family: var(--font-heading); }
.mag-answer { display: block; font-size: 1.05rem; color: var(--text-main); }

/* --- LOCATION MAP --- */
.mag-map-figure { margin: 3rem 0; padding: 0; background: var(--bg-secondary); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.mag-map-caption { background: var(--bg-primary); padding: 1rem 1.5rem; font-family: var(--font-heading); font-size: 1.1rem; color: var(--bg-hero); border-bottom: 1px solid var(--border); font-style: italic; }
.mag-map-embed { display: block; line-height: 0; }
.mag-map-embed iframe { border: none; width: 100%; }

/* --- TRUST FACTS --- */
.mag-fact-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; margin: 2rem 0; }
.mag-fact-head h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.3rem; }
.mag-fact-head p { color: var(--accent); font-family: system-ui, sans-serif; font-size: 0.95rem; margin-bottom: 1.5rem; margin-top: 0; }
.mag-fact-list { list-style: none; padding: 0; margin: 0; }
.mag-fact-list li { margin-bottom: 0.75rem; font-size: 1.05rem; color: var(--text-main); }
.mag-fact-list li:last-child { margin-bottom: 0; }
.mag-fact-list strong { color: var(--bg-hero); }

/* --- QUIZ --- */
.mag-wizard-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; margin: 3rem 0; }
.mag-wizard-top h3 { margin-top: 0; margin-bottom: 1rem; }
.mag-wizard-track { background: var(--border); height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 2rem; }
#mag-wizard-fill { display: block; background: var(--accent); height: 100%; width: 10%; transition: width 0.4s ease; }
.mag-slide h4 { font-size: 1.3rem; margin-bottom: 1.5rem; color: var(--bg-hero); }
.mag-choices { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.mag-choice-lbl { display: flex; align-items: center; gap: 12px; background: var(--bg-primary); border: 1px solid var(--border); padding: 1rem 1.5rem; border-radius: var(--radius); cursor: pointer; transition: border-color 0.2s; font-family: system-ui, sans-serif; font-size: 1.05rem; }
.mag-choice-lbl:hover { border-color: var(--accent); }
.mag-fields { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; font-family: system-ui, sans-serif; }
.mag-fields label { font-size: 0.95rem; font-weight: 600; display: flex; flex-direction: column; gap: 0.5rem; }
.mag-fields input { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 1rem; background: var(--bg-primary); }
.mag-btn-action { background: var(--accent); color: #ffffff; border: none; padding: 1.2rem 2.5rem; border-radius: 50px; font-weight: 600; cursor: pointer; width: 100%; font-size: 1.1rem; font-family: system-ui, sans-serif; transition: background 0.2s; }
.mag-btn-action:hover { background: var(--accent-hover); }

/* --- FOOTER --- */
.mag-bottom-area { background-color: var(--bg-secondary); border-top: 1px solid var(--border); padding: 4rem 0 2rem 0; margin-top: 5rem; }
.mag-footer-inner { max-width: var(--width-layout); margin: 0 auto; padding: 0 1.5rem; }
.mag-footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; margin-bottom: 3rem; }
.mag-footer-logo { font-family: var(--font-heading); font-size: 1.5rem; color: var(--bg-hero); display: block; margin-bottom: 1rem; font-weight: bold; }
.mag-about-text { font-size: 1rem; color: var(--text-main); }
.mag-sub-heading { color: var(--bg-hero); font-size: 1.2rem; display: block; margin-bottom: 1.2rem; font-family: var(--font-heading); }
.mag-footer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; font-family: system-ui, sans-serif; }
.mag-footer-menu a { color: var(--text-main); text-decoration: none; font-size: 1rem; }
.mag-footer-menu a:hover { color: var(--accent); }
.mag-footer-meta { border-top: 1px solid var(--border); padding-top: 2rem; text-align: center; font-size: 0.9rem; color: #64748b; font-family: system-ui, sans-serif; }

/* --- BUNDESLAND HUB A-Z (Listen) --- */
.mag-hub-main { max-width: var(--width-content); margin: 0 auto; padding: 0 1.5rem; }
.mag-hub-prose { margin-bottom: 4rem; }
.mag-az-jump { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 3rem; font-family: system-ui, sans-serif; }
.mag-az-jump a { display: block; padding: 10px 15px; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-main); text-decoration: none; border-radius: var(--radius); font-weight: bold; }
.mag-az-jump a:hover { background: var(--bg-primary); border-color: var(--accent); }
.mag-letter-block { margin-bottom: 3rem; scroll-margin-top: 100px; }
.mag-letter-block h3 { font-size: 1.8rem; color: var(--bg-hero); border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: 1.5rem; }
/* Auch hier die schönen Pill-Buttons für das Verzeichnis anwenden */
.mag-letter-block .mag-city-list { display: flex; flex-wrap: wrap; gap: 0.8rem; list-style: none; padding: 0; margin: 0; }
.mag-letter-block .mag-city-list a { display: inline-block; padding: 0.6rem 1.2rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 50px; text-decoration: none; color: var(--text-main); font-family: system-ui, sans-serif; font-size: 0.95rem; transition: all 0.2s; }
.mag-letter-block .mag-city-list a:hover { border-color: var(--accent); color: var(--accent); }

/* --- CITY LAYOUT (Verwandte Orte) --- */
.mag-related-locations { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.mag-related-locations h3 { font-size: 1.4rem; margin-top: 0; margin-bottom: 1.5rem; }
.mag-location-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; font-family: system-ui, sans-serif; }
.mag-location-list a { display: inline-block; background: var(--bg-secondary); border: 1px solid var(--border); padding: 10px 20px; border-radius: 50px; color: var(--text-main); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: all 0.2s; }
.mag-location-list a:hover { background: var(--bg-hero); color: var(--text-light); border-color: var(--bg-hero); }

/* --- RATGEBER ARTIKEL (Komplett) --- */
.mag-article-layout { 
  max-width: var(--width-content); 
  margin: 3rem auto; 
  padding: 0 1.5rem; 
  width: 100%; 
}

.mag-article-header { text-align: center; margin-bottom: 3.5rem; }
.mag-article-meta { color: var(--accent); font-family: system-ui, sans-serif; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 1rem; }
.mag-article-title { margin: 0 0 1.5rem 0; }
.mag-article-intro { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--text-main); font-style: italic; line-height: 1.6; margin: 0 auto; max-width: 850px; }

/* Fließtext-Styling (analog zu .mag-prose) */
.mag-article-content { line-height: 1.8; font-size: 1.05rem; margin-bottom: 3.5rem; }
.mag-article-content p { margin-bottom: 1.5rem; }
.mag-article-content ul, .mag-article-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.mag-article-content li { margin-bottom: 0.5rem; }
.mag-article-content strong { color: var(--bg-hero); }
.mag-article-content h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.mag-article-content h3 { margin-top: 2rem; margin-bottom: 1rem; }

.mag-article-form { margin: 3.5rem 0; }

.mag-article-more { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.mag-more-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; font-family: system-ui, sans-serif; }
.mag-more-link { display: inline-block; color: var(--text-main); text-decoration: none; font-size: 1.05rem; font-weight: 600; padding: 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.2s; }
.mag-more-link:hover { border-color: var(--accent); color: var(--bg-hero); transform: translateY(-2px); }