/* Farben, Schrift und Bogen wie im Patientenbereich (bereich.html). */
:root{
  --bg:#faf8f5; --bg-alt:#f1ede7; --tinte:#23282e; --grau:#5a6068;
  --linie:#e2ddd5; --accent:#a4553f; --accent-dunkel:#8a4634; --karte:#fff;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--tinte);
  font:17px/1.65 var(--sans); -webkit-font-smoothing:antialiased}
a{color:var(--accent-dunkel)}
.kopf{background:var(--bg); border-bottom:1px solid var(--linie); padding:20px 0 18px}
.kopf-innen{max-width:760px; margin:0 auto; padding:0 20px; text-align:center}
.marke{height:40px; width:auto; display:block; margin:0 auto 10px}
.kopf h1{margin:0; font-size:24px; font-weight:500; letter-spacing:.01em}
.kopf p{margin:7px 0 0; font-size:15px; color:var(--grau)}
.inhalt{max-width:760px; margin:0 auto; padding:24px 20px 60px}
.karte{background:var(--karte); border:1px solid var(--linie); border-radius:14px;
  padding:24px 26px; margin-bottom:18px}
.karte h2{margin:0 0 14px; font-size:21px; font-weight:600}
.leise{color:var(--grau); font-size:15.5px}

/* Aufklappbare Punkte — antippen, dann steht die Erklärung da. */
details.punkt{border-top:1px solid var(--linie)}
details.punkt:first-of-type{border-top:0}
details.punkt summary{list-style:none; cursor:pointer; padding:15px 30px 15px 0;
  position:relative; font-size:17.5px; font-weight:600; line-height:1.4}
details.punkt summary::-webkit-details-marker{display:none}
details.punkt summary::after{content:"+"; position:absolute; right:2px; top:13px;
  font-size:22px; font-weight:400; color:var(--accent); line-height:1}
details.punkt[open] summary::after{content:"–"}
details.punkt summary:hover{color:var(--accent-dunkel)}
details.punkt .antwort{padding:0 0 18px; font-size:16.5px}
details.punkt .antwort p{margin:0 0 11px}
details.punkt .antwort p:last-child{margin-bottom:0}
details.punkt .antwort ul{margin:0 0 11px; padding-left:22px}
details.punkt .antwort li{margin:0 0 6px}
.merk{background:var(--bg-alt); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:11px 14px; margin:12px 0; font-size:16px}
.notfall{background:var(--karte); border:1px solid var(--accent); border-radius:14px;
  padding:20px 24px; margin-bottom:18px}
.notfall h2{margin:0 0 10px; font-size:19px; font-weight:600; color:var(--accent-dunkel)}
.nummern{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:12px}
.nummern a{display:block; background:var(--bg-alt); border-radius:10px; padding:12px 14px;
  text-decoration:none; color:var(--tinte); font-weight:600; font-size:17px}
.nummern a span{display:block; font-weight:400; font-size:14px; color:var(--grau); margin-top:2px}
.zurueck{display:inline-block; margin:0 0 18px; font-weight:600; text-decoration:none;
  border-bottom:2px solid var(--linie); padding-bottom:2px}
.zurueck:hover{border-bottom-color:var(--accent)}
.fuss{margin-top:34px; padding-top:20px; border-top:1px solid var(--linie);
  font-size:13.5px; color:var(--grau); text-align:center; line-height:1.8}
.fuss a{color:var(--grau)}
@media(max-width:680px){
  body{font-size:16.5px}
  .inhalt{padding:18px 16px 46px}
  .karte{padding:20px 18px}
  .kopf{padding:16px 0 14px}
  .kopf .marke{height:34px}
  .karte h2{font-size:20px}
}

/* Sprachwahl über den Karten */
.sprachen{max-width:760px; margin:0 auto; padding:14px 20px 0; font-size:15px; color:var(--grau)}
.sprachen b{color:var(--tinte)}
.sprachen a{text-decoration:none; border-bottom:1px solid var(--linie); padding-bottom:1px}
.sprachen a:hover{border-bottom-color:var(--accent)}