/* Erzeugt von scripts/baue-ratgeber.mjs – nicht von Hand ändern.
   Eigenes Stilblatt statt App.css: Die Ratgeberseiten sollen ohne
   das 1-MB-Paket der App auskommen und sofort dastehen. */
:root{
  --primary:#7c3aed; --primary-dark:#6d28d9; --gold:#ffc800;
  --navy:#241338; --muted:#756a85; --bg:#f5f0fc; --karte:#fff; --rand:#ebe3f7;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--navy);
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:var(--primary-dark)}
main,.titelblock{max-width:720px;margin:0 auto;padding:0 20px}

.kopf{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1080px;margin:0 auto;padding:16px 20px;
}
.marke{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.3rem;color:var(--navy);text-decoration:none}
.marke-zeichen{
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(145deg,#8b5cf6,#6d28d9);font-size:1.4rem;font-weight:900;
}
.kopf-knopf{
  background:var(--primary);color:#fff;text-decoration:none;font-weight:800;
  padding:10px 20px;border-radius:12px;box-shadow:0 3px 0 var(--primary-dark);
}

.titelblock{padding-top:24px;padding-bottom:8px}
.brotkrumen{font-size:.86rem;color:var(--muted);margin:0 0 14px}
.brotkrumen a{color:var(--muted)}
h1{font-size:2.15rem;line-height:1.2;font-weight:900;letter-spacing:-.5px;margin:0 0 14px}
.anreisser{font-size:1.14rem;color:#4a4160;margin:0 0 10px}
.meta{font-size:.86rem;color:var(--muted);margin:0 0 8px}

h2{font-size:1.5rem;font-weight:900;line-height:1.3;margin:40px 0 14px}
h3{font-size:1.16rem;font-weight:800;margin:26px 0 8px}
p{margin:0 0 16px}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin-bottom:9px}
code{background:#ede6f9;padding:2px 6px;border-radius:5px;font-size:.92em}
blockquote{
  margin:22px 0;padding:14px 18px;border-left:4px solid var(--gold);
  background:#fffaeb;border-radius:0 12px 12px 0;font-style:italic;
}
blockquote p{margin:0}

.kasten{
  background:var(--karte);border:1px solid var(--rand);border-radius:16px;
  padding:18px 20px;margin:24px 0;
}
.kasten-titel{font-weight:800;margin:0 0 8px;color:var(--primary-dark)}
.kasten p:last-child{margin-bottom:0}

.tabelle-rahmen{overflow-x:auto;margin:22px 0}
table{border-collapse:collapse;width:100%;background:var(--karte);border-radius:12px;overflow:hidden;font-size:.95rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rand)}
th{background:#f3ecff;font-weight:800}
tr:last-child td{border-bottom:none}

.cta{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;border-radius:20px;padding:26px 24px;margin:38px 0;text-align:center;
}
.cta-titel{font-size:1.3rem;font-weight:900;margin:0 0 8px}
.cta p{margin:0 0 18px;opacity:.93}
.cta-knopf{
  display:inline-block;background:var(--gold);color:var(--navy);font-weight:900;
  padding:13px 30px;border-radius:13px;text-decoration:none;box-shadow:0 3px 0 #d19b00;
}

.faq{margin-top:40px}
details{background:var(--karte);border:1px solid var(--rand);border-radius:13px;padding:14px 18px;margin-bottom:10px}
summary{font-weight:800;cursor:pointer}
details p{margin:10px 0 0}

.weiter{margin-top:44px}
.karten{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.karten{grid-template-columns:1fr 1fr}.karten-gross{grid-template-columns:1fr 1fr}}
.karte{
  display:block;background:var(--karte);border:1px solid var(--rand);border-radius:16px;
  padding:18px;text-decoration:none;color:var(--navy);
}
.karte:hover{border-color:var(--primary);box-shadow:0 4px 18px rgba(124,58,237,.12)}
.karte-emoji{font-size:1.6rem;display:block;margin-bottom:8px}
.karte-titel{display:block;font-weight:900;line-height:1.3;margin-bottom:6px}
.karte-text{display:block;font-size:.92rem;color:var(--muted);line-height:1.55}
.karte-mehr{display:block;margin-top:10px;font-weight:800;color:var(--primary-dark);font-size:.92rem}

.fuss{
  max-width:720px;margin:56px auto 0;padding:24px 20px 40px;
  border-top:1px solid var(--rand);font-size:.9rem;color:var(--muted);text-align:center;
}
/* Senkrechte Polsterung, damit die Links am Handy 44 px hoch sind.
   Ohne sie waren es 20 px bei 17 px Lücke – zu eng für Daumen. */
.fuss a{color:var(--muted);text-decoration:none;display:inline-block;padding:11px 7px}
.fuss a:hover{color:var(--primary-dark)}
.fuss-recht{margin:10px 0}
.fuss-klein{font-size:.84rem;margin:10px 0 0}

@media(max-width:560px){
  body{font-size:17px}
  h1{font-size:1.72rem}
  h2{font-size:1.3rem}
}