:root{
  /* Brand – bitte ggf. an euer Farbschema anpassen */
  --brand: #E63946;         /* Primär (z.B. Button) */
  --brand-600:#d22f3b;
  --ink: #0f172a;           /* Text dunkel */
  --ink-2:#334155;          /* Sekundärtext */
  --bg: #ffffff;            /* Hintergrund hell */
  --card: #f8fafc;          /* Kartenhintergrund */
  --border:#e5e7eb;         /* Linien */
  --accent:#457B9D;         /* Sekundärfarbe */
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#e5e7eb;
    --ink-2:#cbd5e1;
    --bg:#0b0f17;
    --card:#111827;
    --border:#1f2937;
    --brand:#ef476f;
    --brand-600:#e23b63;
    --accent:#8ecae6;
  }
}

*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; line-height:1.45;}

.container{width:min(1100px, 92vw); margin-inline:auto;}

.site-header{padding:32px 0 20px; border-bottom:1px solid var(--border);}
.site-header h1{margin:0 0 6px; font-size: clamp(1.4rem, 2.5vw, 2rem);}
.tagline{margin:0; color:var(--ink-2);}

.cards{display:grid; gap:16px; padding:24px 0;}
@media (min-width:560px){ .cards{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .cards{grid-template-columns:repeat(3,1fr);} }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 1px 1px rgba(0,0,0,.05);
}

.card h3{margin:0; font-size:1.05rem;}
.card p{margin:0; color:var(--ink-2); font-size:.95rem;}

audio{width:100%; height:40px; border-radius:8px; outline:none;}


.site-footer{padding:28px 0; border-top:1px solid var(--border); text-align:center; color:var(--ink-2);}
.site-footer strong{color:var(--ink);}

.badge{
  display:inline-block; background:rgba(69,123,157,.12);
  color:var(--accent); font-weight:600; font-size:.75rem; padding:4px 8px; border-radius:999px;
}

/* Small niceties */
.meta{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.title-wrap{display:flex; flex-direction:column; gap:4px;}
.title-wrap .subtitle{font-size:.9rem; color:var(--ink-2);}
/* Container für alle Dialoge */
/* Greift für beide: <section id="dialogs" class="cards"> */
#dialogs,
.cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
}

/* Jede Karte */
details.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}


/* Summary (Titel-Zeile) */
details summary {
  cursor: pointer;
  padding: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details summary::-webkit-details-marker { display: none; }

details[open] summary { border-bottom: 1px solid var(--border); }

/* Inhalt */
details .content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Basis-Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.55rem 1rem;
  border-radius: 0.6rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid #a8b2bd;
  background: transparent;
  color: #1d3557;
}

.btn:hover {
  background: #f5f7fa;
}

/* Secondary = gleich wie Tertiary */
.btn.secondary,
.btn.tertiary {
  /* exakt gleiche Styles */
}

/* CTA Back-Button */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.55rem 1rem;
  border-radius: 0.6rem;
  background: #edf2f7;
  color: #2c5282;
  border: 1px solid #cbd5e0;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-back:hover {
  background: #e2e8f0;
}

/* Container für CTA */
.cta {
  margin-top: 1.2rem;
  text-align: center;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  .btn {
    color: #cbd5e0;
    border-color: #4a5568;
  }
  .btn:hover {
    background: #2d3748;
  }

  .btn-back {
    background: #2c5282;
    color: #edf2f7;
    border-color: #2a4365;
  }
  .btn-back:hover {
    background: #2b6cb0;
  }
}