/* LehrLynx v58 · Lernkapitel Erste Hilfe (sicherheit-erste-hilfe.html)
   Nur vorhandene Farbvariablen aus farbansichten.css (Original/Hell/Kontrast). Grundgerüst: safety-* (orientierung.css). */

/* Hinweis oben */
.eh-start{padding-top:10px}
.eh-hinweis{border:2px solid var(--cr-ff8a8a);background:var(--cf-ff6b6b-a100);border-radius:18px;padding:20px 24px;max-width:950px}
.eh-hinweis p{margin:0 0 10px;line-height:1.75;color:var(--ct-f3f6fb)}
.eh-hinweis p:last-child{margin-bottom:0}
.eh-hinweis-titel{font-size:1.15rem;font-weight:800;color:var(--ct-ffb4b4)!important}
.eh-notruf-zeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px!important}
.eh-notruf-gross{display:inline-flex;align-items:center;justify-content:center;min-width:86px;min-height:52px;padding:4px 14px;border-radius:12px;
  border:2px solid var(--cr-ff8a8a);color:var(--ct-ffb4b4);font-size:1.9rem;font-weight:900;letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* Abschnitte */
.eh-abschnitt .eyebrow{color:var(--ct-7ee7c8)}
.eh-h3{margin:30px 0 12px;font-size:1.15rem}
.eh-klein-text{font-size:.94rem;color:var(--ct-abb5c8)}
.eh-liste{padding-left:20px;margin:0 0 12px}
.eh-liste li{color:var(--ct-abb5c8)}
.eh-liste li+li{margin-top:8px}
.eh-merke,.eh-achtung{border-radius:14px;padding:15px 20px;margin:18px 0;line-height:1.75;max-width:950px}
.eh-merke{border:1px solid var(--cr-7ee7c8-a333);background:var(--cf-111722);color:var(--ct-f3f6fb)}
.eh-merke strong{color:var(--ct-7ee7c8)}
.eh-achtung{border:2px solid var(--cr-f6d58a);background:var(--cf-f6d58a-a100);color:var(--ct-f3f6fb)}
.eh-achtung strong{color:var(--ct-f6d58a)}
.safety-lesson-grid>article{min-width:0}

/* Notrufnummern */
.eh-nummern{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:0 0 8px}
.eh-nummer{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--cr-6f8396-a333);border-radius:14px;background:var(--cf-111722);padding:14px 16px;min-width:0}
.eh-nr{flex:0 0 auto;min-width:64px;font-size:1.35rem;font-weight:900;color:var(--ct-ffb4b4);font-variant-numeric:tabular-nums;line-height:1.3}
.eh-nummer:last-child .eh-nr{font-size:1.05rem;min-width:0}
.eh-nummer:last-child{flex-direction:column;gap:4px}
.eh-nr-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.eh-nr-text small{color:var(--ct-abb5c8);font-size:.88rem;line-height:1.5}

/* Herzdruckmassage auf einen Blick */
.eh-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 4px}
.eh-zahlen>div{border:1px solid var(--cr-ff8a8a);border-radius:14px;background:var(--cf-111722);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.eh-zahl{font-size:1.75rem;font-weight:900;color:var(--ct-ffb4b4);font-variant-numeric:tabular-nums;line-height:1.2}
.eh-zahlen>div>span:last-child{color:var(--ct-abb5c8);font-size:.92rem;line-height:1.5}

/* Grafiken */
.eh-figur{margin:22px 0;max-width:820px}
.eh-figur figcaption{margin-top:8px;color:var(--ct-abb5c8);font-size:.92rem;line-height:1.6}
.eh-svg{display:block;width:100%;height:auto}
.eh-svg.eh-klein{max-width:330px}
.eh-svg.eh-mittel{max-width:600px}
.eh-svg.eh-hoch{display:none;max-width:360px}
.safety-lesson-grid .eh-figur{margin:16px 0}

/* Weiterlernen */
.eh-weiter{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:20px}
.eh-weiter-karte{display:flex;flex-direction:column;gap:4px;border:1px solid var(--cr-6f8396-a333);border-radius:14px;background:var(--cf-111722);
  padding:14px 16px;text-decoration:none;min-height:44px}
.eh-weiter-karte strong{color:var(--ct-7ee7c8)}
.eh-weiter-karte span{color:var(--ct-abb5c8);font-size:.9rem;line-height:1.5}
.eh-weiter-karte:hover,.eh-weiter-karte:focus-visible{border-color:var(--cr-7ee7c8-a333)}

@media (max-width:900px){
  .eh-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .eh-svg.eh-quer{display:none}
  .eh-svg.eh-hoch{display:block}
  .eh-hinweis{padding:16px 16px}
  .eh-nummern{grid-template-columns:1fr}
  .eh-zahl{font-size:1.45rem}
}

/* Druckansicht: hell, ohne Navigation, Kontrollfragen aufgeklappt */
@media print{
  @page{margin:14mm 12mm}
  html:has(.eh-kapitel),body:has(.eh-kapitel){background:var(--cf-ffffff)!important;color:var(--ct-111111)!important}
  body:has(.eh-kapitel) .site-header,body:has(.eh-kapitel) .skip-link,body:has(.eh-kapitel) .consent-bar,body:has(.eh-kapitel) .tr-fab,
  body:has(.eh-kapitel) .area-nav,body:has(.eh-kapitel) .favorite-tools,body:has(.eh-kapitel) .site-footer,body:has(.eh-kapitel) .floating-top,
  body:has(.eh-kapitel) .deko-layer,body:has(.eh-kapitel) .deko-badge,body:has(.eh-kapitel) .page-jumps,body:has(.eh-kapitel) .ub-umzug,
  body:has(.eh-kapitel) .related-learning,body:has(.eh-kapitel) #weiterlernen{display:none!important}
  body:has(.eh-kapitel) main{padding:0!important;margin:0!important}
  body:has(.eh-kapitel) main *{color:var(--ct-111111)!important;box-shadow:none!important;text-shadow:none!important}
  body:has(.eh-kapitel) .page-hero{padding:0 0 8px!important;margin:0!important;min-height:0!important;background:none!important}
  body:has(.eh-kapitel) .page-hero h1{font-size:20pt!important;margin:4px 0!important;line-height:1.15!important}
  body:has(.eh-kapitel) .gradient-text{background:none!important;-webkit-text-fill-color:var(--ct-111111)!important}
  body:has(.eh-kapitel) .container{max-width:none!important;width:auto!important;padding:0!important}
  body:has(.eh-kapitel) .safety-lesson{padding-top:10px!important}
  body:has(.eh-kapitel) .safety-lesson>.container{border-top:1px solid var(--cr-111111)!important;padding-top:10px!important}
  body:has(.eh-kapitel) .safety-lesson h2{font-size:15pt!important;break-after:avoid;page-break-after:avoid}
  body:has(.eh-kapitel) h3{break-after:avoid;page-break-after:avoid}
  body:has(.eh-kapitel) .safety-lesson-grid{display:block!important}
  body:has(.eh-kapitel) .safety-lesson-grid>article,body:has(.eh-kapitel) .eh-hinweis,body:has(.eh-kapitel) .eh-nummer,
  body:has(.eh-kapitel) .eh-zahlen>div,body:has(.eh-kapitel) .safety-error,body:has(.eh-kapitel) .safety-reflect{
    background:var(--cf-ffffff)!important;border:1px solid var(--cr-111111)!important;margin:6px 0!important}
  body:has(.eh-kapitel) .eh-merke,body:has(.eh-kapitel) .eh-achtung{background:var(--cf-ffffff)!important;border:2px solid var(--cr-111111)!important;break-inside:avoid;page-break-inside:avoid}
  body:has(.eh-kapitel) .eh-nummern{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important}
  body:has(.eh-kapitel) .eh-zahlen{grid-template-columns:repeat(4,1fr)!important}
  body:has(.eh-kapitel) .eh-nummer,body:has(.eh-kapitel) .eh-zahlen>div,body:has(.eh-kapitel) li,body:has(.eh-kapitel) .eh-figur{break-inside:avoid;page-break-inside:avoid}
  body:has(.eh-kapitel) .eh-svg{max-width:420px!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body:has(.eh-kapitel) .eh-svg.eh-quer{display:block!important;max-width:560px!important}
  body:has(.eh-kapitel) .eh-svg.eh-hoch{display:none!important}
  body:has(.eh-kapitel) details.safety-reflect::details-content{content-visibility:visible;display:block}
  body:has(.eh-kapitel) details.safety-reflect>p{display:block!important}
}