/* Bordapotheke und Bordchemie – gemeinsame Stile. Baut auf style.css auf (Farben, Fraunces). */

.bord-kopf{padding:48px 24px 8px}
.bord-kopf h1{font-size:clamp(30px,5vw,46px);font-weight:400;margin-bottom:8px}
.bord-kopf .intro{color:var(--muted);font-size:18px;max-width:62ch;margin-bottom:0}
.bord-wechsel{margin-top:14px;font-size:15px}
.bord-wechsel a{font-family:'Fraunces',serif;font-weight:700}

.bord-haupt{padding:20px 24px 56px}
.bord-haupt .wrap{max-width:1040px;padding:0}

.bord-sos{background:#FCE9EC;border-left:6px solid #C8283E;border-radius:6px;padding:14px 18px;margin:0 0 22px;font-size:16px;line-height:1.5}
.bord-sos b{color:#C8283E}

.bord-suche{width:100%;font:inherit;font-size:18px;padding:13px 16px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--navy)}
.bord-suche:focus{outline:none;border-color:var(--navy)}

.bord-frage{font-family:'Fraunces',serif;font-weight:700;font-size:20px;margin:18px 0 10px}
.bord-chips{display:flex;flex-wrap:wrap;gap:8px}
.bord-chips button{font-family:Georgia,serif;font-size:16px;padding:9px 15px;min-height:44px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
.bord-chips button:hover{border-color:var(--gold)}
.bord-chips button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.bord-chips button:focus-visible,.bord-suche:focus-visible,.bord-druck:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.bord-leiste{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 10px}
.bord-status{color:var(--muted);font-size:15px;margin:0}
.bord-druck{font-family:'Fraunces',serif;font-weight:700;font-size:14px;background:var(--navy);color:var(--cream);border:none;border-radius:999px;padding:9px 18px;cursor:pointer}
.bord-druck:hover{background:var(--red)}

.bord-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.bord-karte{display:grid;grid-template-columns:116px 1fr;gap:14px;align-items:start;background:#fff;border:1px solid var(--line);border-left:7px solid var(--c,var(--gold));border-radius:10px;padding:12px;line-height:1.4}
.bord-karte .bild{width:116px;height:116px;border-radius:6px;display:block;object-fit:cover;background:#2a2f38}
.bord-karte.med .bild{object-fit:contain}
.bord-karte button.bildknopf{padding:0;border:0;background:none;cursor:zoom-in;display:block;border-radius:6px}
.bord-karte .keinbild{width:116px;height:116px;border-radius:6px;background:var(--cream-card);border:1px dashed var(--line);color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px}
.bord-karte .grp{font-family:'Fraunces',serif;font-size:13px;font-weight:700;color:var(--c,var(--gold));margin:0}
.bord-karte h3{font-size:19px;line-height:1.2;margin:2px 0 3px}
.bord-karte .wirk{font-size:14px;color:var(--muted);margin:0 0 6px}
.bord-karte .for{margin:0;font-weight:700;font-size:16px}
.bord-karte:not(.med) .for{font-weight:400}
.bord-karte .hint{margin:7px 0 0;font-size:15px;padding-left:10px;border-left:3px solid #C8283E}
.bord-karte .rx{display:inline-block;font-size:12px;font-weight:700;border:1.5px solid var(--navy);border-radius:4px;padding:0 5px;margin-left:6px;vertical-align:2px;font-family:Georgia,serif}
.bord-leer{padding:20px;background:#fff;border-radius:10px;border:1px dashed var(--line)}

.bord-legende{margin-top:30px;color:var(--muted);font-size:15px}
.bord-legende span{display:inline-flex;align-items:center;gap:6px;margin:4px 14px 4px 0}
.bord-legende i{width:14px;height:14px;border-radius:3px;background:var(--c);display:inline-block}

.bord-warn{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 20px}
.bord-warn h2{font-size:20px;margin:0 0 8px}
.bord-warn ul{margin:0;padding-left:20px}
.bord-warn li{margin:4px 0}

/* Foto groß anzeigen (Bordchemie) */
#bord-gross{position:fixed;inset:0;background:rgba(13,20,35,.9);display:none;align-items:center;justify-content:center;flex-direction:column;z-index:200;padding:20px}
#bord-gross.offen{display:flex}
#bord-gross img{max-width:100%;max-height:82vh;border-radius:8px}
#bord-gross p{color:#fff;margin:12px 0 0;font-family:'Fraunces',serif;font-size:18px;text-align:center}
#bord-gross button{position:absolute;top:14px;right:18px;background:none;border:none;color:#fff;font-size:40px;line-height:1;cursor:pointer}

/* Farben der Gruppen – Medikamente */
.g-schmerz{--c:#C8283E}.g-erkaelt{--c:#C9601B}.g-see{--c:#0B8793}.g-magen{--c:#A87700}.g-durchfall{--c:#2A62C9}
.g-allergie{--c:#7446BF}.g-anti{--c:#1D3553}.g-venen{--c:#A8426D}.g-dauer{--c:#3F7250}
/* Farben der Gruppen – Bordchemie */
.g-dichten{--c:#B5541C}.g-reparatur{--c:#8A5A00}.g-schrauben{--c:#4A5A6B}.g-fette{--c:#6B4E2E}.g-oele{--c:#2F6B4F}
.g-gleit{--c:#246A8A}.g-reinigen{--c:#5B3FA0}.g-wasser{--c:#1C6FA8}.g-lack{--c:#8C3A4E}.g-pflege{--c:#3D6E2E}

@media(max-width:420px){
  .bord-karte{grid-template-columns:92px 1fr;gap:12px}
  .bord-karte .bild,.bord-karte .keinbild{width:92px;height:92px}
}

/* Druck / PDF: nur der Inhalt, zweispaltig, ohne Bedienelemente */
@media print{
  .site-header,.site-footer,.bord-suche,.bord-frage,.bord-chips,.bord-druck,.bord-wechsel,#bord-gross{display:none !important}
  body{background:#fff;font-size:12px}
  .bord-kopf{padding:0 0 6px}
  .bord-kopf h1{font-size:24px}
  .bord-kopf .intro{font-size:12px}
  .bord-haupt{padding:0}
  .bord-sos{font-size:12px;padding:8px 10px}
  .bord-liste{grid-template-columns:1fr 1fr;gap:6px}
  .bord-karte{grid-template-columns:64px 1fr;gap:8px;padding:6px;break-inside:avoid;border-radius:4px}
  .bord-karte .bild,.bord-karte .keinbild{width:64px;height:64px}
  .bord-karte h3{font-size:13px}
  .bord-karte .for,.bord-karte .hint,.bord-karte .wirk{font-size:11px}
  .bord-warn{break-inside:avoid}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}