/* ==========================================================================
   PRPmed Antikoagulans-Mengenrechner · style.css v3.0.0
   Designsystem prpmed.de (Tokens aus ../shell.css): Anthrazit, Gold,
   flache Karten ohne Rundung. Nur helles Schema. Keine Webfonts.
   ========================================================================== */
#prpm-ac-app{
  --bg:#fff;--panel:#fff;--panel2:var(--pm-soft);
  --ink:var(--pm-ink);--text:var(--pm-text);--muted:var(--pm-muted);
  --line:var(--pm-line);--line2:var(--pm-line-2);
  --brand:var(--pm-ink);--brand2:var(--pm-gold);
  --safe:var(--pm-ok);--amber:var(--pm-warn);--err:var(--pm-bad);
  --blood:#7f2933;--blood-hi:#8b2d37;--blood-lo:#6a1f28;
  --ac:#d5a62d;--ac-hi:#e2bd52;--ac-lo:#c49112;
  --wrap:min(calc(100% - 40px),var(--pm-max,1180px));
  background:#fff;color:var(--text);font-family:var(--pm-sans);overflow:hidden;color-scheme:light
}
#prpm-ac-app *{box-sizing:border-box}
#prpm-ac-app h1,#prpm-ac-app h2,#prpm-ac-app h3{color:var(--ink)}
#prpm-ac-app a{color:inherit}
#prpm-ac-app :focus-visible{outline:2px solid var(--pm-gold);outline-offset:2px}

/* ---------- Hero ---------- */
#prpm-ac-app .hero{padding:44px 0 40px;background:#fff;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
#prpm-ac-app .hero-inner,#prpm-ac-app .shell{width:var(--wrap);margin:0 auto}
#prpm-ac-app .hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:40px;align-items:center}
#prpm-ac-app .hero-copy{min-width:0}
#prpm-ac-app .crumb{margin-bottom:16px}
#prpm-ac-app h1{font-size:clamp(30px,4.2vw,50px);line-height:1.04;letter-spacing:-.035em;font-weight:800;margin:0;max-width:820px}
#prpm-ac-app .lead{max-width:760px;font-size:clamp(16px,1.9vw,18.5px);line-height:1.65;color:var(--text);margin:18px 0 0}
#prpm-ac-app .hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
#prpm-ac-app .tag{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:600;color:var(--ink)}
#prpm-ac-app .tag::before{content:"";width:5px;height:5px;background:var(--pm-gold);flex:none}

/* Orbit-Grafik: flach, Anthrazit/Gold/Blut */
#prpm-ac-app .hero-orbit{position:relative;display:grid;grid-template-rows:330px auto;justify-items:center;align-items:center}
#prpm-ac-app .orbit-core{position:relative;width:156px;height:156px;border-radius:50%;display:grid;place-items:center;background:var(--pm-soft);border:1px solid var(--line)}
#prpm-ac-app .orbit-core:before,#prpm-ac-app .orbit-core:after{content:"";position:absolute;border-radius:50%;border:1px solid var(--line2)}
#prpm-ac-app .orbit-core:before{inset:-38px}
#prpm-ac-app .orbit-core:after{inset:-76px;border-style:dashed;border-color:var(--line2)}
#prpm-ac-app .orbit-core strong{font-size:29px;letter-spacing:-.04em;color:var(--ink);z-index:2;font-weight:800}
#prpm-ac-app .orbit-core span{position:absolute;bottom:40px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pm-gold-ink);font-weight:700}
#prpm-ac-app .orb{position:absolute;left:50%;top:165px;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%}
#prpm-ac-app .orb.b1{background:var(--blood);transform:translate(96px,-45px)}
#prpm-ac-app .orb.b2{background:var(--blood);transform:translate(-104px,58px);width:24px;height:24px;margin:-12px 0 0 -12px}
#prpm-ac-app .orb.a1{background:var(--ac);transform:translate(-42px,-114px)}
#prpm-ac-app .orb.a2{background:var(--ac);transform:translate(124px,72px);width:13px;height:13px;margin:-6.5px 0 0 -6.5px}
#prpm-ac-app .hero-orbit .orbit-label{position:static;font-size:11.5px;color:var(--muted);max-width:270px;text-align:center;line-height:1.45;margin-top:2px}

/* ---------- Arbeitsbereich ---------- */
#prpm-ac-app .shell{padding:30px 0 8px}
#prpm-ac-app .notice{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--pm-gold);background:#fff;margin-bottom:22px}
#prpm-ac-app .notice b{display:block;margin-bottom:4px;color:var(--ink)}
#prpm-ac-app .notice p{margin:0;color:var(--text);line-height:1.55;font-size:14px}
#prpm-ac-app .notice .icon{width:30px;height:30px;display:grid;place-items:center;background:var(--pm-gold-soft);color:var(--pm-gold-ink);font-weight:800;font-family:Georgia,"Times New Roman",serif;font-style:italic}

#prpm-ac-app .tabs{display:flex;gap:0;overflow-x:auto;margin:0 0 18px;border-bottom:1px solid var(--line);scrollbar-width:thin}
#prpm-ac-app .tab{position:relative;min-height:46px;white-space:nowrap;border:1px solid var(--line);border-bottom:0;margin-right:-1px;background:#fff;color:var(--ink);padding:11px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s ease}
#prpm-ac-app .tab:hover{background:var(--pm-soft)}
#prpm-ac-app .tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;z-index:1}
#prpm-ac-app .tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--pm-gold)}

#prpm-ac-app .workspace{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);gap:20px;align-items:stretch}
#prpm-ac-app .panel{background:#fff;border:1px solid var(--line);overflow:hidden}
#prpm-ac-app .workspace>.panel{height:100%}
#prpm-ac-app .workspace>.panel:last-child{border-top:3px solid var(--ink)}
#prpm-ac-app .panel-head{padding:20px 22px 15px;border-bottom:1px solid var(--line)}
#prpm-ac-app .panel-head h2{font-size:18px;margin:0 0 5px;font-weight:700;letter-spacing:-.015em}
#prpm-ac-app .panel-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
#prpm-ac-app .panel-body{padding:22px}
#prpm-ac-app .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#prpm-ac-app .field{min-width:0}
#prpm-ac-app label{display:block;font-weight:600;font-size:14px;margin-bottom:7px;color:var(--ink)}
#prpm-ac-app .hint{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:6px}
#prpm-ac-app .input-wrap{display:flex;align-items:stretch;border:1px solid var(--line2);background:#fff;overflow:hidden;min-height:48px;transition:border-color .15s ease}
#prpm-ac-app .input-wrap:hover{border-color:var(--muted)}
#prpm-ac-app .input-wrap:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 0 0 4px var(--pm-gold-soft)}
#prpm-ac-app input,#prpm-ac-app select{width:100%;min-width:0;border:0;border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;font-weight:600;padding:12px 13px;outline:none}
#prpm-ac-app input:focus,#prpm-ac-app select:focus{box-shadow:none}
#prpm-ac-app .unit{display:flex;align-items:center;padding:0 12px;border-left:1px solid var(--line);font-size:13px;color:var(--muted);font-weight:600;background:var(--pm-soft)}
#prpm-ac-app .ratio-wrap{display:grid;grid-template-columns:auto 1fr;align-items:stretch}
#prpm-ac-app .ratio-prefix{display:grid;place-items:center;min-width:46px;background:var(--pm-soft);border-right:1px solid var(--line);font-weight:700;color:var(--ink)}
#prpm-ac-app .examples{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
#prpm-ac-app .examples-top{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
#prpm-ac-app .examples-top span:first-child{font-weight:600;font-size:13px;color:var(--ink)}
#prpm-ac-app .examples-top span:last-child{font-size:11.5px;color:var(--muted)}

#prpm-ac-app .results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
#prpm-ac-app .metric{padding:15px 16px;background:var(--pm-soft);border:1px solid var(--line);min-width:0}
#prpm-ac-app .metric .k{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
#prpm-ac-app .metric .v{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.025em;color:var(--ink);overflow-wrap:anywhere}
#prpm-ac-app .metric.primary{background:#fff;border-color:var(--ink);box-shadow:inset 0 3px 0 var(--pm-gold)}
#prpm-ac-app .metric.primary .k{color:var(--pm-gold-ink)}
#prpm-ac-app .metric.primary .v{color:var(--ink)}

/* ---------- Visualisierungen ---------- */
#prpm-ac-app .visual-area{margin-top:20px}
#prpm-ac-app .viz-grid{display:grid;grid-template-columns:minmax(180px,.85fr) minmax(0,1.15fr);gap:14px;align-items:stretch;margin-top:12px}
#prpm-ac-app .visual-area>.viz-grid{margin-top:0;grid-template-columns:minmax(250px,.78fr) minmax(340px,1.22fr)}
#prpm-ac-app .tube-card,#prpm-ac-app .mix-card{background:#fff;border:1px solid var(--line);padding:16px 18px;min-width:0}
#prpm-ac-app .tube-card h3,#prpm-ac-app .mix-card h3{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;color:var(--muted)}
#prpm-ac-app .tube-layout{display:flex;gap:16px;align-items:center;justify-content:center}
#prpm-ac-app .tube{position:relative;width:62px;height:176px;border:3px solid rgba(34,38,41,.38);border-top:0;border-radius:0 0 24px 24px;overflow:hidden;background:#fff}
#prpm-ac-app .tube-cap{position:absolute;z-index:4;top:0;left:-4px;width:64px;height:18px;border-radius:2px;background:var(--ink)}
#prpm-ac-app .tube-blood,#prpm-ac-app .tube-ac{position:absolute;left:0;right:0;transition:height .4s ease,bottom .4s ease}
#prpm-ac-app .tube-blood{background:linear-gradient(var(--blood-hi),var(--blood-lo))}
#prpm-ac-app .tube-ac{background:linear-gradient(var(--ac-hi),var(--ac-lo));z-index:2}
#prpm-ac-app .tube-scale{display:grid;gap:9px;font-size:12.5px;color:var(--text)}
#prpm-ac-app .legend-row{display:flex;gap:8px;align-items:center}
#prpm-ac-app .sw{width:10px;height:10px;border-radius:50%;flex:none}
#prpm-ac-app .sw.blood{background:var(--blood)}
#prpm-ac-app .sw.ac{background:var(--ac)}
#prpm-ac-app .donut-wrap{display:flex;align-items:center;gap:18px}
#prpm-ac-app .donut{width:114px;height:114px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;position:relative;background:conic-gradient(var(--ac) 0 var(--ac-pct),var(--blood) var(--ac-pct) 100%)}
#prpm-ac-app .donut:after{content:"";position:absolute;inset:20px;border-radius:50%;background:#fff}
#prpm-ac-app .donut strong{position:relative;z-index:2;font-size:16px;font-weight:800;color:var(--ink);text-align:center;line-height:1.1}
#prpm-ac-app .donut-wrap b{color:var(--ink)}
#prpm-ac-app .bar{height:10px;overflow:hidden;display:flex;background:var(--line);margin:14px 0 8px}
#prpm-ac-app .bar-ac{height:100%;background:var(--ac);transition:width .4s ease}
#prpm-ac-app .bar-blood{height:100%;background:var(--blood);transition:width .4s ease}
#prpm-ac-app .mix-note{font-size:12.5px;line-height:1.5;color:var(--muted)}
/* Inline-Stile der I.E.-Skala angleichen */
#prpm-ac-app #unitResult .mix-card>div[style]{border-radius:0!important;border-color:var(--line2)!important}
#prpm-ac-app #microBar{background:linear-gradient(90deg,var(--ac-hi),var(--ac-lo))!important}

#prpm-ac-app .labviz{margin-top:16px;border:1px solid var(--line);background:#fff;padding:18px;overflow:hidden}
#prpm-ac-app .labviz-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
#prpm-ac-app .labviz-head h3{font-size:15px;margin:0;font-weight:700}
#prpm-ac-app .labviz-head p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
#prpm-ac-app .lab-actions{display:flex;gap:8px;flex-wrap:wrap}
#prpm-ac-app .lab-btn{min-height:38px;border:1px solid var(--line2);background:#fff;color:var(--ink);padding:7px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
#prpm-ac-app .lab-btn:hover{border-color:var(--ink)}
#prpm-ac-app .lab-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
#prpm-ac-app .lab-stage{position:relative;border:1px solid var(--line);color:var(--ink);background:
linear-gradient(transparent 23px,rgba(222,223,220,.55) 24px),
linear-gradient(90deg,transparent 23px,rgba(222,223,220,.55) 24px),
var(--pm-soft);background-size:24px 24px;min-height:286px;overflow:hidden}
#prpm-ac-app .lab-stage svg{display:block;width:100%;height:auto;min-height:286px}
#prpm-ac-app .lab-source ~ .lab-source text{fill:var(--pm-ink)}
#prpm-ac-app .flow-path{fill:none;stroke-linecap:round;stroke-dasharray:8 10;animation:prpm-flow 1.1s linear infinite}
#prpm-ac-app .flow-blood{stroke:var(--blood)}
#prpm-ac-app .flow-ac{stroke:var(--ac)}
#prpm-ac-app .mix-liquid{transition:y .35s ease,height .35s ease,fill .35s ease}
#prpm-ac-app .mix-wave{transform-origin:center;animation:prpm-wave 2.8s ease-in-out infinite}
#prpm-ac-app .cell{animation:prpm-cell 3.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
#prpm-ac-app .cell.c2{animation-delay:-1.3s}
#prpm-ac-app .cell.c3{animation-delay:-2.4s}
#prpm-ac-app .cell.c4{animation-delay:-.7s}
#prpm-ac-app .lab-meter{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:14px}
#prpm-ac-app .lab-meter label{margin:0;font-size:12.5px;color:var(--muted);font-weight:600}
#prpm-ac-app .lab-meter input[type="range"]{accent-color:var(--pm-gold);padding:0;min-height:36px}
#prpm-ac-app .lab-meter output{font-size:13px;font-weight:800;color:var(--ink);min-width:52px;text-align:right}
#prpm-ac-app .lab-caption{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
#prpm-ac-app .lab-caption div{padding:10px 12px;background:var(--pm-soft);border:1px solid var(--line);font-size:11.5px;line-height:1.45;color:var(--muted)}
#prpm-ac-app .lab-caption b{display:block;color:var(--ink);font-size:12px;margin-bottom:2px}
#prpm-ac-app .labviz.paused .flow-path,#prpm-ac-app .labviz.paused .mix-wave,#prpm-ac-app .labviz.paused .cell{animation-play-state:paused}
@keyframes prpm-flow{to{stroke-dashoffset:-36}}
@keyframes prpm-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes prpm-cell{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,-5px) rotate(12deg)}}

#prpm-ac-app .formula{margin-top:16px;border:1px solid var(--line);border-left:3px solid var(--pm-gold);background:var(--pm-soft);padding:13px 16px}
#prpm-ac-app .formula .title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--pm-gold-ink);font-weight:700;margin-bottom:6px}
#prpm-ac-app .formula code{font-family:var(--pm-mono);font-size:13.5px;white-space:normal;color:var(--ink)}
#prpm-ac-app .status{margin-top:12px;padding:11px 14px;font-size:13px;line-height:1.5;border:1px solid var(--line);background:#fff;color:var(--text)}
#prpm-ac-app .status.ok{border-left:3px solid var(--safe)}
#prpm-ac-app .status.warn{border-left:3px solid var(--amber)}
#prpm-ac-app .status.err{border-left:3px solid var(--err);background:var(--pm-bad-soft)}
#prpm-ac-app .visual-area>.formula{margin-top:16px}
#prpm-ac-app .visual-area>.status{margin-top:12px}

/* ---------- Info, Links, Meta ---------- */
#prpm-ac-app .below{margin-top:28px;display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
#prpm-ac-app .info-section{background:#fff;border:1px solid var(--line);padding:22px}
#prpm-ac-app .info-section h2,#prpm-ac-app .related-links h2{display:flex;align-items:center;gap:10px;font-size:19px;margin:0 0 12px;font-weight:700;letter-spacing:-.015em}
#prpm-ac-app .info-section h2::before,#prpm-ac-app .related-links h2::before{content:"";width:18px;height:2px;background:var(--pm-gold);flex:none}
#prpm-ac-app .info-section p{font-size:14px;line-height:1.65;color:var(--text);margin:0 0 12px}
#prpm-ac-app .two-col-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
#prpm-ac-app .mini{border:1px solid var(--line);background:var(--pm-soft);padding:13px 14px}
#prpm-ac-app .mini b{font-size:13px;display:block;margin-bottom:4px;color:var(--ink)}
#prpm-ac-app .mini span{font-size:12.5px;color:var(--muted);line-height:1.45;display:block}
#prpm-ac-app details{border-top:1px solid var(--line);padding:13px 0}
#prpm-ac-app details:first-of-type{margin-top:6px}
#prpm-ac-app summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--ink)}
#prpm-ac-app summary::marker{color:var(--pm-gold)}
#prpm-ac-app details p{margin:9px 0 0}

#prpm-ac-app .related-links{margin-top:22px;background:#fff;border:1px solid var(--line);padding:22px}
#prpm-ac-app .related-links>p{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.55}
#prpm-ac-app .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#prpm-ac-app .related-card{display:block;position:relative;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);padding:15px 38px 15px 16px;min-height:92px;transition:border-color .15s ease,background-color .15s ease}
#prpm-ac-app .related-card::after{content:"↗";position:absolute;top:13px;right:14px;font-size:15px;font-weight:700;color:var(--pm-gold);transition:transform .15s ease}
#prpm-ac-app .related-card:hover{border-color:var(--ink);background:var(--pm-soft)}
#prpm-ac-app .related-card:hover::after{transform:translate(2px,-2px)}
#prpm-ac-app .related-card b{display:block;font-size:14px;margin-bottom:5px;color:var(--ink)}
#prpm-ac-app .related-card span{display:block;font-size:12.5px;line-height:1.45;color:var(--muted)}
#prpm-ac-app .tool-meta{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:24px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
#prpm-ac-app .tool-meta span:first-child{color:var(--ink);font-weight:600}

#prpm-ac-app .hidden{display:none!important}

@media(max-width:900px){
  #prpm-ac-app .hero-grid,#prpm-ac-app .workspace,#prpm-ac-app .below{grid-template-columns:1fr}
  #prpm-ac-app .hero-orbit{grid-template-rows:330px}
  #prpm-ac-app .hero-orbit .orbit-label{display:none}
  #prpm-ac-app .viz-grid,#prpm-ac-app .visual-area>.viz-grid{grid-template-columns:1fr 1fr}
  #prpm-ac-app .related-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  #prpm-ac-app{--wrap:calc(100% - 32px)}
  #prpm-ac-app .hero{padding:28px 0 22px}
  #prpm-ac-app .hero-orbit{grid-template-rows:330px;transform:scale(.78);margin:-36px 0 -40px}
  #prpm-ac-app .field-grid,#prpm-ac-app .viz-grid,#prpm-ac-app .visual-area>.viz-grid,#prpm-ac-app .two-col-list,#prpm-ac-app .lab-caption,#prpm-ac-app .related-grid{grid-template-columns:1fr}
  #prpm-ac-app .panel-body{padding:16px}
  #prpm-ac-app .panel-head{padding:16px 16px 13px}
  #prpm-ac-app .tabs{display:grid;grid-template-columns:1fr;border-bottom:0;overflow:visible}
  #prpm-ac-app .tab{font-size:13.5px;padding:11px 14px;margin:0 0 -1px;border-bottom:1px solid var(--line);text-align:left;white-space:normal}
  #prpm-ac-app .metric{padding:13px 12px}
  #prpm-ac-app .metric .k{font-size:10.5px;letter-spacing:.06em}
  #prpm-ac-app .donut-wrap{justify-content:flex-start}
  #prpm-ac-app .tube-card{min-height:0}
  #prpm-ac-app .lab-meter{grid-template-columns:1fr auto}
  #prpm-ac-app .lab-meter label{grid-column:1/-1}
  #prpm-ac-app .labviz,#prpm-ac-app .info-section,#prpm-ac-app .related-links{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  #prpm-ac-app *{scroll-behavior:auto!important;transition:none!important}
  #prpm-ac-app .flow-path,#prpm-ac-app .mix-wave,#prpm-ac-app .cell{animation:none!important}
}
@media print{#prpm-ac-app .hero-orbit,#prpm-ac-app .labviz,#prpm-ac-app .related-links{display:none!important}}
