/* ============================================================
   Einbürgerungstest – Shared Stylesheet
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg:        #FCFAF7;
  --color-surface:   #ffffff;
  --color-primary:   #0a7ea4;
  --color-primary-h: #086e8f;
  --color-accent:    #22c55e;
  --color-amber:     #d97706;
  --color-text:      #0f172a;
  --color-muted:     #64748b;
  --color-border:    #e2e8f0;
  --color-answer-bg: #f0fdf4;
  --color-answer-bd: #22c55e;
  --color-cta-bg:    #e8f4f8;
  --color-cta-bd:    #b2dce8;
  --radius:          12px;
  --shadow:          0 1px 6px rgba(0,0,0,.07);
  --max-w:           760px;
  --font:            system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:        #121212;
    --color-surface:   #1C1C1E;
    --color-text:      #f1f5f9;
    --color-muted:     #94a3b8;
    --color-border:    #1e293b;
    --color-answer-bg: #052e16;
    --color-answer-bd: #22c55e;
    --color-cta-bg:    #0c2d3a;
    --color-cta-bd:    #0a7ea4;
  }
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  padding: 0 1rem 4rem;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-h); }

/* ── Layout ── */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: .75rem 1rem;
  margin: 0 -1rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.site-header .inner {
  max-width: var(--max-w);
  margin: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-logo {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--color-primary);
  letter-spacing: -.02em;
}
.lang-switcher {
  margin-inline-start: auto;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.lang-switcher a {
  font-size: .78rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-muted);
  transition: background .15s;
}
.lang-switcher a:hover,
.lang-switcher a.active {
  background: var(--color-primary);
  color: #fff;
  border-color: transparent;
}

main {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ── Breadcrumbs ── */
.breadcrumb {
  font-size: .82rem;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: center;
}
.breadcrumb li + li::before {
  content: '›';
  margin-inline-end: .25rem;
  color: var(--color-border);
}
[dir="rtl"] .breadcrumb li + li::before { content: '‹'; }
.breadcrumb a { text-decoration: none; color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-primary); }

/* ── Question card ── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}

.state-badge {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--color-cta-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-cta-bd);
  border-radius: 999px;
  padding: .15rem .65rem;
  margin-bottom: .85rem;
}

h1.question {
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

/* ── Question image ── */
.question-image {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  display: block;
  margin: 0 auto 1.5rem;
}

/* ── Answer options list ── */
.answers {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.answers li {
  padding: .75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: .97rem;
  background: var(--color-bg);
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  transition: border-color .15s;
}
.answers li:hover { border-color: var(--color-primary); }
.answer-label {
  font-weight: 700;
  color: var(--color-primary);
  min-width: 1.4rem;
  flex-shrink: 0;
}

/* ── Reveal box — styled like a prominent app button ── */
.reveal-box {
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(10,126,164,.18);
}
.reveal-box summary {
  cursor: pointer;
  list-style: none;
  background: var(--color-primary);
  color: #fff;
  padding: 1rem 1.5rem;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  user-select: none;
  letter-spacing: .01em;
  border-radius: var(--radius);
  transition: background .15s, transform .1s;
}
.reveal-box[open] summary { border-radius: var(--radius) var(--radius) 0 0; }
.reveal-box summary:hover { background: var(--color-primary-h); transform: translateY(-1px); }
.reveal-box summary::-webkit-details-marker { display: none; }
.reveal-box summary::before { content: '\25B6'; font-size: .75rem; transition: transform .2s; }
.reveal-box[open] summary::before { transform: rotate(90deg); }

.answer-content {
  background: var(--color-answer-bg);
  border: 1px solid var(--color-answer-bd);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1.25rem 1.5rem;
}
.correct-answer-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-accent);
  margin-bottom: .4rem;
}
.correct-answer-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
.explanation-text {
  font-size: .94rem;
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.7;
}
.source-link {
  font-size: .8rem;
  color: var(--color-muted);
}
.source-link a { color: var(--color-primary); }

/* ── CTA section ── */
.cta-card {
  background: var(--color-cta-bg);
  border: 1px solid var(--color-cta-bd);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.cta-card p {
  font-size: .97rem;
  margin-bottom: 1.25rem;
  color: var(--color-text);
}
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1.35rem;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }

.btn-appstore  { background: #000; color: #fff; }
.btn-playstore { background: #1a73e8; color: #fff; }
.btn-web       { background: var(--color-primary); color: #fff; }
.btn-next      { background: var(--color-surface); color: var(--color-primary); border: 2px solid var(--color-primary); }

/* ── Like button ── */
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .75rem;
  padding: .45rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: .88rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.like-btn:hover,
.like-btn.liked {
  background: #fef9c3;
  color: #ca8a04;
  border-color: #fde68a;
}

/* ── Related questions section ── */
.related-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}
.related-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}
.related-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.related-list li {
  padding: .5rem .75rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: .9rem;
  transition: border-color .15s, background .15s;
}
.related-list li:hover { border-color: var(--color-primary); background: var(--color-cta-bg); }
.related-list a {
  text-decoration: none;
  color: var(--color-text);
  display: block;
}
.related-list a:hover { color: var(--color-primary); }

/* ── Next question section ── */
.next-section {
  text-align: center;
  margin-top: .5rem;
}

/* ── Card go-to-app pill (inside question card, below H1) ── */
.card-app-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .5rem;
  margin-bottom: 1.1rem;
  padding: .38rem 1.1rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff !important;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: opacity .15s;
}
.card-app-link:hover { opacity: .85; }

/* ── Footer ── */
.site-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: .8rem;
  color: var(--color-muted);
  text-align: center;
}

/* ── RTL overrides ── */
[dir="rtl"] .breadcrumb { flex-direction: row-reverse; }
[dir="rtl"] .answers li { flex-direction: row-reverse; }
[dir="rtl"] .reveal-box summary { flex-direction: row-reverse; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .card { padding: 1.25rem; }
  .related-section { padding: 1.25rem; }
  .cta-buttons { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
}

/* ══════════════════════════════════════════════════════
   State Landing Pages – Additional Styles
   ══════════════════════════════════════════════════════ */

/* ── Hero ── */
.hero-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-h) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(10,126,164,.25);
}
.hero-inner {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.state-wappen {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.hero-text { flex: 1; }
.hero-h1 {
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  font-weight: 800;
  margin-bottom: .5rem;
  color: #fff;
  line-height: 1.3;
}
.hero-tagline {
  display: inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: .2rem .75rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .75rem;
}
.hero-desc {
  font-size: .95rem;
  opacity: .92;
  line-height: 1.65;
  color: #fff;
}

/* ── Section titles ── */
.section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}
.section-intro {
  font-size: .92rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* ── Roadmap ── */
.roadmap-section { margin-bottom: 1.25rem; }
.roadmap-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: .5rem;
}
.roadmap-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.roadmap-number {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(10,126,164,.3);
}
.roadmap-title { font-weight: 700; font-size: .97rem; display: block; margin-bottom: .2rem; }
.roadmap-desc  { font-size: .88rem; color: var(--color-muted); line-height: 1.55; }

/* ── State question list ── */
.state-questions { margin-bottom: 1.25rem; }
.question-list {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .5rem;
}
.question-list-item { font-size: .93rem; }
.question-list-item a { text-decoration: none; color: var(--color-text); }
.question-list-item a:hover { color: var(--color-primary); text-decoration: underline; }

/* ── Official resources ── */
.resources-section { margin-bottom: 1.25rem; }
.resource-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: .5rem;
}
.resource-link {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color .15s, background .15s;
}
.resource-link:hover { border-color: var(--color-primary); background: var(--color-cta-bg); color: var(--color-text); }
.resource-link strong { font-size: .95rem; color: var(--color-primary); }
.resource-desc        { font-size: .83rem; color: var(--color-muted); }

/* ── FAQ ── */
.faq-section { margin-bottom: 1.25rem; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .5rem;
}
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface);
}
.faq-question {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: .94rem;
  padding: .85rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  color: var(--color-text);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: '﹢'; font-size: 1.1rem; color: var(--color-primary); }
details[open] .faq-question::after { content: '﹣'; }
.faq-answer {
  padding: .75rem 1rem 1rem;
  font-size: .9rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  line-height: 1.65;
}

/* ── CTA title on state pages ── */
.state-cta .cta-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .75rem;
  color: var(--color-text);
  display: block;
}

/* ── Hero CTA button ── */
.hero-app-btn {
  display: inline-block;
  margin-top: .9rem;
  background: #fff;
  color: var(--color-primary) !important;
  font-weight: 700;
  border-radius: 999px;
  padding: .5rem 1.4rem;
  font-size: .92rem;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: opacity .15s;
}
.hero-app-btn:hover { opacity: .88; }

/* ── Store resource links ── */
.resource-link--store { border-color: var(--color-primary); }
.resource-link--store strong { color: var(--color-primary); }

/* ── RTL overrides ── */
[dir="rtl"] .hero-inner     { flex-direction: row-reverse; }
[dir="rtl"] .roadmap-item   { flex-direction: row-reverse; }
[dir="rtl"] .faq-question   { flex-direction: row-reverse; }

/* ── Responsive ── */
@media (max-width: 520px) {
  .hero-inner { flex-direction: column; align-items: center; text-align: center; }
  .hero-h1    { text-align: center; }
  .hero-tagline { display: block; text-align: center; }
}