/* Rezeptseite: links das Formular in drei Schritten, rechts die nachgezeichnete Verordnung mit Frist und Terminreihe */
.rezept{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:-56px;padding-bottom:clamp(72px,9vw,120px);position:relative}
.rezept__formular{display:grid;gap:20px}
.schritt{background:var(--flaeche);border-radius:16px;padding:32px;box-shadow:0 1px 0 var(--linie),0 30px 60px -48px rgba(17,37,44,.5)}
.schritt h2{display:flex;align-items:center;gap:14px;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin-bottom:22px}
.schritt__nr{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--nacht);color:var(--band);font:600 1.2rem/1 var(--f-display);flex:none}
.felder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 20px;margin-bottom:6px}
.feld{display:grid;gap:7px;align-content:start}
.feld--breit{grid-column:1/-1}
.feld label,.gruppe legend{font-weight:700;font-size:1rem}
.feld small{font-weight:400;color:var(--tinte-weich)}
.feld input,.feld select,.feld textarea{width:100%;min-height:50px;padding:11px 14px;border-radius:10px;border:2px solid var(--linie);background:#fff;font:400 1.05rem/1.3 var(--f-text);color:var(--tinte)}
.feld textarea{resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--tinte);box-shadow:0 0 0 3px rgba(232,163,58,.45)}
.feld input[aria-invalid="true"]{border-color:#B3261E}
.feld__titel{font-weight:700;font-size:1rem}
.foto__knopf{display:flex;align-items:center;flex-wrap:wrap;gap:12px;cursor:pointer}
.foto__knopf input{position:absolute;opacity:0;width:1px;height:1px}
.foto__knopf:has(input:focus-visible) .knopf{outline:3px solid var(--band);outline-offset:3px}
.foto__knopf:hover .knopf{background:var(--tinte);color:#fff}
.foto__name{color:var(--tinte-weich);font-size:.95rem;overflow-wrap:anywhere}
.marke-nr{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:5px;background:#F6E6CB;color:var(--band-text);font:700 .78rem/1 var(--f-text);vertical-align:1px}
.haken{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 14px;border-radius:10px;border:2px solid var(--linie);cursor:pointer;font-weight:700}
.haken input{width:22px;height:22px;accent-color:var(--nacht);flex:none}
.haken:has(input:checked){border-color:var(--tinte)}
.gruppe{border:0;margin:0 0 18px;padding:0;min-width:0}
.gruppe legend{margin-bottom:10px;padding:0}
#foto-vorschau-platz img{max-width:220px;border-radius:10px;margin-top:8px;box-shadow:0 0 0 1px var(--linie)}
.schritt .knopf{margin-top:20px}
.klein{font-size:.92rem;margin-top:12px}
.fehler{margin-bottom:20px;padding:14px 16px;border-radius:10px;background:#FBE9E7;color:#7A1C14;border:2px solid #E5A79F}
.fehler ul{margin:6px 0 0;padding-left:1.2em}
.fehler a{color:#7A1C14}

.rezept__seite{position:sticky;top: calc(var(--hit-h,0px) + calc(var(--kopf) + 20px));display:grid;gap:18px}
/* nachgezeichnete Verordnung: rosa wie das echte Formular, aber nur schematisch */
.vo{background:#FDF0EE;border-radius:12px;padding:16px 16px 12px;box-shadow:0 30px 60px -40px rgba(17,37,44,.55),inset 0 0 0 1px #EFC9C2;transform:rotate(-1deg);color:#5B2A24}
.vo__kopf{display:flex;justify-content:space-between;font:700 .82rem/1 var(--f-text);letter-spacing:.04em;text-transform:uppercase;padding-bottom:10px;border-bottom:1.5px solid #E7B3AA}
.vo__kasse{font-weight:400;opacity:.7}
.vo__zeile{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin:10px 0}
.vo__zeile i{height:10px;border-radius:3px;background:#F1D2CC}
.vo__raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vo__f{position:relative;min-height:62px;padding:8px 10px 8px 34px;border:1.5px solid #E7B3AA;border-radius:6px;background:#FFF8F7;display:grid;align-content:start;gap:2px;transition:box-shadow .2s,border-color .2s}
.vo__f--breit{grid-column:span 2}
.vo__f b{position:absolute;left:8px;top:8px;width:19px;height:19px;display:grid;place-items:center;border-radius:4px;background:#F6E6CB;color:var(--band-text);font-size:.72rem}
.vo__f small{font-size:.74rem;opacity:.75}
.vo__f span{font:600 1.08rem/1.15 var(--f-display);color:#2C1512}
.vo__f.an{border-color:var(--band);box-shadow:0 0 0 3px rgba(232,163,58,.5)}
.vo__x{font-size:1.4rem!important}
.vo__stempel{margin-top:10px;padding-top:24px;border-top:1.5px dashed #E7B3AA;font-size:.74rem;opacity:.7;text-align:right}

.ergebnis{display:grid;gap:14px}
.frist{padding:18px 20px;border-radius:14px;background:var(--nacht);color:var(--hell)}
.frist__etikett{font:700 .8rem/1.2 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--band)}
.frist__datum{font:600 clamp(1.7rem,1.3rem + 1vw,2.2rem)/1.05 var(--f-display);letter-spacing:-.02em;margin:6px 0 8px}
.frist p:last-child{color:var(--hell-weich);font-size:.98rem}
.frist--knapp .frist__etikett{color:#FFD18A}
.frist--aus{background:#7A1C14}
.frist--aus .frist__etikett{color:#FFD8D2}
.serie{padding:18px 20px;border-radius:14px;background:var(--flaeche);box-shadow:0 0 0 1px var(--linie)}
.serie h3{font-size:1.2rem;letter-spacing:-.015em;margin-bottom:12px}
.serie ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.serie li{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--linie);font-variant-numeric:tabular-nums}
.serie li span{font-size:.8rem;color:var(--tinte-weich);min-width:1.2em}
.serie__hinweis{margin-top:12px;font-size:.95rem;color:var(--tinte-weich)}
.serie--warn .serie__hinweis{color:#7A1C14;font-weight:700}
.zuzahlung{font-size:.95rem;color:var(--tinte-weich);padding:0 4px}
.zuzahlung b{display:block;color:var(--tinte)}

.fertig{margin-top:-56px;padding-bottom:clamp(72px,9vw,120px);position:relative}
.fertig__karte{max-width:44rem;background:var(--flaeche);border-radius:16px;padding:40px;box-shadow:0 30px 60px -48px rgba(17,37,44,.5);display:grid;gap:16px}
.fertig__karte h2{font-size:clamp(2rem,1.5rem + 2vw,3rem)}
.fertig__serie{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.fertig__serie li{padding:8px 12px;border-radius:8px;background:#F6E6CB;font-variant-numeric:tabular-nums}
.fertig:focus{outline:none}

@media (max-width:980px){
  .rezept{grid-template-columns:minmax(0,1fr);gap:20px}
  .rezept__formular{display:contents}
  .rezept__formular > .schritt:first-child{order:1}
  .rezept__seite{position:static;order:2}
  .rezept__formular > .schritt:nth-child(2){order:3}
  .rezept__formular > .schritt:nth-child(3){order:4}
  .vo{transform:none}
}
@media (max-width:560px){
  .schritt{padding:22px 18px}
  .fertig__karte{padding:26px 20px}
  .felder{grid-template-columns:minmax(0,1fr)}
  .vo__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vo__f--breit{grid-column:1/-1}
  .serie ol{grid-template-columns:minmax(0,1fr)}
}