@font-face{font-family:NotoSans;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/NotoSans-Regular.woff2) format("woff2")}
@font-face{font-family:NotoSans;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/NotoSans-Medium.woff2) format("woff2")}
@font-face{font-family:NotoSans;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/NotoSans-SemiBold.woff2) format("woff2")}
@font-face{font-family:NotoSans;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/NotoSans-Bold.woff2) format("woff2")}
:root{
  --red:#E4170F; --red-h:#B4120C; --red-soft:#FDEDEC; --blue:#004B9C;
  --ink:#303030; --mute:#707070; --line:#DADADA; --bg:#F2F2F2; --card:#FFFFFF;
  --r:14px; --w:760px; --safe:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:NotoSans,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}


/* ---------- App-Rahmen ---------- */
.app{min-height:100%;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid #ececec}
.top-in{max-width:var(--w);margin:0 auto;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.mark svg{display:block;width:104px;height:auto;color:var(--red)}
@media (min-width:900px){.mark svg{width:128px}}
.mark span{font-size:13px;color:var(--mute);font-weight:500}
.lang{display:flex;background:var(--bg);border-radius:999px;padding:3px}
.lang button{border:0;background:transparent;padding:5px 11px;border-radius:999px;font-size:13px;font-weight:600;color:var(--mute);cursor:pointer;min-height:32px}
.lang button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bar{height:3px;background:#ececec}
.bar i{display:block;height:100%;width:0;background:var(--red);transition:width .45s var(--ease)}

main{flex:0 0 auto;width:100%;max-width:var(--w);margin:0 auto;padding:22px 16px 16px}
.screen{animation:in .38s var(--ease) both}
.screen.out{animation:out .18s ease-in both}
@keyframes in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.screen.back{animation-name:inb}
@keyframes inb{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes out{to{opacity:0;transform:translateX(-18px)}}
@media (prefers-reduced-motion:reduce){.screen,.screen.out{animation:none}.bar i{transition:none}}

.kick{font-size:13px;font-weight:600;color:var(--mute);letter-spacing:.02em;margin:0 0 8px;display:flex;gap:8px;align-items:center}
.kick .tag{background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-weight:500}
h1:focus{outline:none}
h1{font-size:clamp(21px,5.4vw,27px);line-height:1.25;margin:0 0 6px;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.hint{color:var(--mute);font-size:14px;margin:0 0 18px}

/* ---------- Optionen ---------- */
.opts{display:grid;gap:10px;margin-top:18px}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 16px;background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;transition:border-color .15s,background .15s,transform .08s}
.opt:active{transform:scale(.985)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .box{flex:none;width:22px;height:22px;border:2px solid #bdbdbd;border-radius:50%;display:grid;place-items:center;transition:.15s}
.opt.multi .box{border-radius:6px}
.opt .box svg{width:14px;height:14px;opacity:0;transform:scale(.6);transition:.15s}
.opt:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.opt:has(input:checked) .box{background:var(--red);border-color:var(--red)}
.opt:has(input:checked) .box svg{opacity:1;transform:none}
.opt:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.opt:has(input:disabled){opacity:.45;cursor:not-allowed}
.counter{font-size:13px;font-weight:600;color:var(--mute);margin-top:12px;text-align:right}
.counter b{color:var(--red)}

/* ---------- Hover (nur Geräte mit Maus) ---------- */
@media (hover:hover){
  .opt:hover{background:#F7F7F7;border-color:#C8C8C8}
  .opt:has(input:checked):hover{background:#FBE3E1;border-color:var(--red)}
  .opt:has(input:disabled):hover{background:var(--card);border-color:var(--line)}
  .scale label:hover span{background:#F2F2F2;border-color:#C8C8C8}
  .scale label:hover input:checked+span{background:var(--red-h);border-color:var(--red-h)}
  .pc:hover{background:#F7F7F7}
  .pc:not(:has(input:checked)):hover{border-color:#DADADA}
  .lupe:hover{background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.25)}
  .done-list button:hover{background:#F7F7F7}
  .lang button[aria-pressed=false]:hover{color:var(--ink);background:#E8E8E8}
  .ghost:hover{color:var(--ink)}
}

/* ---------- Skala item-by-item ---------- */
.items{display:flex;gap:6px;margin:16px 0 14px}
.items i{flex:1;height:4px;border-radius:2px;background:#e3e3e3;transition:background .2s}
.items i.done{background:var(--ink)} .items i.now{background:var(--red)}
.icard{background:var(--card);border-radius:18px;padding:20px 16px 18px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05)}
.icard h2{margin:0 0 16px;font-size:19px;font-weight:700}
.scale{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px}
.scale label{position:relative}
.scale input{position:absolute;opacity:0}
.scale span{display:grid;place-items:center;height:52px;border-radius:12px;border:1.5px solid var(--line);font-weight:700;background:#fff;cursor:pointer;transition:.15s}
.scale label:active span{transform:scale(.95)}
.scale input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
.scale input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.ends{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--mute);margin-top:8px}
.ends span:last-child{text-align:right}
.done-list{margin-top:14px;display:grid;gap:6px}
.done-list button{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;border:0;border-bottom:1px solid #e6e6e6;padding:9px 2px;font-size:14px;color:var(--mute);cursor:pointer;text-align:left}
.done-list button b{color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;min-width:30px;text-align:center;padding:1px 6px}

.mrows{display:grid;gap:10px}
.mrow{background:var(--card);border-radius:16px;padding:14px 14px 14px;border:1.5px solid transparent;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:border-color .2s}
.mlbl{font-weight:600;margin:0 0 10px}
.mrow .scale span{height:46px}
@media (min-width:900px){.mrow{display:grid;grid-template-columns:1fr 330px;align-items:center;gap:16px}.mlbl{margin:0}}
/* ---------- Differenzial ---------- */
.split{display:grid;gap:14px;margin-top:16px}
.dcard{padding:8px}
.diff{display:grid;gap:4px}
.drow{padding:10px 10px 12px;border-radius:12px}
.drow:nth-child(odd){background:#F5F5F5}
.drow.is-done .lbl{color:var(--ink)}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:start}
  .split .shot{position:sticky;top:84px}
  .split .shot.tall img{max-height:calc(100vh - 340px)}
}
.drow .lbl{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:7px}
.drow .scale span{height:44px;font-size:13px;color:transparent;border-radius:50%;width:100%;aspect-ratio:1;height:auto;max-width:44px;margin:auto}
.drow .scale input:checked+span{color:transparent}
.drow .scale{gap:4px}

/* ---------- Bilder ---------- */
.shot{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.07);cursor:zoom-in}
.shot img{display:block;width:100%;height:auto}
.shot.tall img{max-height:44vh;object-fit:contain;background:#f6f6f6}
.shot img{max-height:calc(100dvh - 300px);object-fit:contain;background:#f6f6f6}
.zoomhint{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;align-items:center;background:rgba(20,20,20,.72);color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:6px 10px;backdrop-filter:blur(6px)}
.zoomhint svg{width:14px;height:14px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;letter-spacing:.04em}
.steps3{display:flex;gap:6px;margin:4px 0 14px}
.steps3 i{width:26px;height:4px;border-radius:2px;background:#ddd}.steps3 i.on{background:var(--red)}

.pick{display:grid;gap:10px;margin-top:16px;grid-template-columns:repeat(var(--c),1fr)}
.pc{position:relative;background:#fff;border:2px solid transparent;border-radius:16px;padding:6px 6px 10px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05);cursor:pointer;transition:border-color .15s,transform .08s}
.pc:active{transform:scale(.98)}
.pc input{position:absolute;opacity:0}
.pc img{display:block;width:100%;aspect-ratio:var(--ar);object-fit:cover;object-position:top;border-radius:11px;background:#f4f4f4}
.pc .cap{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;font-weight:700;font-size:14px}
.pc .dot{width:18px;height:18px;border-radius:50%;border:2px solid #bdbdbd;display:grid;place-items:center;flex:none}
.pc .dot svg{width:11px;height:11px;opacity:0}
.pc:has(input:checked){border-color:var(--red)}
.pc:has(input:checked) .dot{background:var(--red);border-color:var(--red)}
.pc:has(input:checked) .dot svg{opacity:1}
.pc:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.how{display:flex;flex-wrap:wrap;gap:6px 16px}
.how span{display:inline-flex;align-items:center;gap:7px}
.how .ring{width:16px;height:16px;border-radius:50%;border:2px solid #bdbdbd;display:inline-block}
.how .mag{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);display:inline-grid;place-items:center;color:var(--ink)}
.how .mag svg{width:14px;height:14px}
.lupe{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.22);display:grid;place-items:center;cursor:pointer}
.lupe svg{width:18px;height:18px}
.cmp{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:10px;margin-top:4px}
.cmpi{margin:0;text-align:center}
.cmpi figcaption{font-weight:700;font-size:15px;margin:0 0 6px}
.cmpi{display:flex;flex-direction:column;align-items:center}
.cimg{position:relative;display:inline-block;max-width:100%;padding:6px;border:0;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05);cursor:zoom-in}
.cimg img{display:block;width:auto;max-width:100%;height:auto;max-height:var(--imgh,52dvh);border-radius:11px;background:#f4f4f4}
/* Wischen, wenn nebeneinander zu schmal (< 150 px je Bild) */
.cmp.swipe{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding:0 16px 4px;scroll-padding-inline:16px;gap:12px}
.cmp.swipe::-webkit-scrollbar{display:none}
.cmp.swipe .cmpi{scroll-snap-align:start}
.dots{display:none;justify-content:center;align-items:center;gap:6px;margin:10px 0 2px;font-size:12px;color:var(--mute)}
.dots i{width:7px;height:7px;border-radius:50%;background:#cfcfcf;transition:.2s}
.dots i.on{background:var(--ink);width:18px;border-radius:4px}
.dots span{margin-left:8px}
.cmp.swipe+.dots{display:flex}
.oth{width:30px;height:42px;object-fit:cover;object-position:top;border-radius:5px;flex:none;background:#eee}
@media (min-width:900px){.optrow{grid-template-columns:repeat(var(--n),minmax(0,1fr))}.optrow .opt{justify-content:flex-start}}
.cimg .zb{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.22);display:grid;place-items:center}
.cimg .zb svg{width:17px;height:17px}
.cimg:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (hover:hover){.cimg:hover{box-shadow:0 2px 6px rgba(0,0,0,.1),0 8px 22px rgba(0,0,0,.08)}}
@media (max-width:420px){.cimg .zb{width:28px;height:28px;right:9px;bottom:9px}.cmpi figcaption{font-size:14px}}

textarea{width:100%;min-height:140px;resize:vertical;border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff;line-height:1.5;margin-top:16px}
textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,75,156,.15)}
.opt-tag{display:inline-block;font-size:12px;font-weight:600;color:var(--blue);background:#E6EEF7;border-radius:999px;padding:2px 9px;margin-left:4px;vertical-align:middle}

/* ---------- Start / Ende ---------- */
.hero{background:#fff;border-radius:22px;padding:26px 20px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 30px rgba(0,0,0,.06)}
.hero h1{font-size:clamp(25px,6.6vw,34px)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.facts span{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
.facts svg{width:15px;height:15px}
.fine{font-size:13px;color:var(--mute);margin-top:16px}
.fine a{color:var(--blue)}
.big-ok{width:72px;height:72px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin:8px 0 18px;animation:pop .5s var(--ease) both}
.big-ok svg{width:36px;height:36px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ---------- Aktionsleiste ---------- */
.act{padding:8px 16px calc(28px + var(--safe))}
.act-in{max-width:var(--w);margin:0 auto;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:0 6px}
.btn{position:relative;flex:1;height:54px;border:0;background:transparent;color:#fff;font-weight:700;font-size:16px;letter-spacing:.01em;cursor:pointer;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:8px}
.btn::before{content:"";position:absolute;inset:0;background:var(--red);transform:skewX(-10deg);border-radius:4px;z-index:-1;transition:background .15s,transform .08s}
.btn:hover::before{background:var(--red-h)}
.btn:active::before{transform:skewX(-10deg) scale(.98)}
.btn.muted{color:#4a4a4a}
.btn.muted::before{background:#e1e1e1}
.btn.muted:hover::before{background:#d6d6d6}
.need{animation:need 1.2s ease}
@keyframes need{0%,100%{box-shadow:0 0 0 0 rgba(228,23,15,0)}25%,60%{box-shadow:0 0 0 3px rgba(228,23,15,.55)}}
.needmsg{color:var(--red);font-size:14px;font-weight:600;margin:0 0 8px}
.needmsg.inrow{font-size:13px;margin:0 0 6px}
.mrow .needmsg{grid-column:1/-1}
.missing{outline:2px solid var(--red);outline-offset:-2px}
.opts.missing{outline:0}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.btn svg{width:18px;height:18px}
.ghost{height:54px;padding:0 14px 0 6px;border:0;background:transparent;color:var(--mute);font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.ghost svg{width:18px;height:18px}
.save{font-size:12px;color:var(--mute);text-align:center;margin-top:8px;max-width:760px;margin-inline:auto;display:flex;justify-content:center;gap:6px;align-items:center}
.save svg{width:13px;height:13px}
@media (min-width:900px){
  :root{--w:960px}
  main{padding-top:40px}
  .act{padding:12px 16px 40px}
  .act-in{padding:0 10px 0 0}
  .pick.c2{grid-template-columns:repeat(4,1fr)}
  .save{margin-top:4px}
  .btn{flex:0 0 240px}
  .save{justify-content:flex-end}
}

/* ---------- Lupe ---------- */
dialog.lb{padding:0;border:0;max-width:none;max-height:none;width:100%;height:100dvh;inset:0;background:#0d0d0d;color:#fff}
dialog.lb[open]{display:flex;flex-direction:column}
dialog.lb::backdrop{background:#000}
dialog.lb[open]{animation:fade .2s ease both}
@keyframes fade{from{opacity:0}}
.lb-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center;padding:4px 12px}
.lb-stage img{max-width:100%;max-height:100%;transform-origin:0 0;user-select:none;-webkit-user-drag:none;will-change:transform}
.lb-top{flex:none;display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;background:linear-gradient(rgba(0,0,0,.55),transparent);z-index:2}
.lb-top b{font-size:15px}
.lb-x{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-x svg{width:20px;height:20px}
.lb-bot{flex:none;padding:10px 16px calc(14px + var(--safe));display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2}
.lb-bot small{opacity:.7;font-size:12px}
.lb-z{display:flex;gap:8px}
.lb-z button{min-width:48px;height:44px;border-radius:22px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:20px;font-weight:700;cursor:pointer}
.lb-z button#z0{font-size:14px}
@media (hover:hover){.lb-z button:hover{background:rgba(255,255,255,.24)}}
.lb-bot .btn{width:100%;max-width:420px;flex:none}

/* ---------- Ergänzungen für die serverseitige Fassung ---------- */
.lang form{display:contents}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.act{padding-left:0;padding-right:0;margin-top:22px}
a.ghost{text-decoration:none}
h2.q2{font-size:clamp(19px,4.8vw,23px);line-height:1.25;margin:30px 0 6px;font-weight:700}

.ends-top{margin:0 0 8px}
.icard .scale.missing{outline-offset:4px;border-radius:12px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0}
.seg span{display:grid;place-items:center;min-height:46px;padding:4px 6px;text-align:center;border-radius:12px;border:1.5px solid var(--line);font-weight:600;font-size:14px;line-height:1.2;background:#fff;cursor:pointer;transition:.15s}
.seg input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
@media (hover:hover){.seg label:hover span{background:#F2F2F2;border-color:#C8C8C8}.seg label:hover input:checked+span{background:var(--red-h);border-color:var(--red-h)}}
@media (min-width:900px){.mchoice .mrow{grid-template-columns:1fr 420px}}
/* Matrix: jede Zeile ist eine eigene Karte mit Abstand — eine Farbe für alle (Jan, 16.10.) */
@media (hover:hover){.mrows .mrow:hover{background:#EFEFEF}}
@media (max-width:359px){.cmp{grid-template-columns:1fr!important}.cmp.swipe{grid-auto-flow:row}}
/* Die Einblend-Animation (translateX 28 px) und der Wisch-Streifen dürfen die Seite nicht verbreitern:
   Mobile Browser vergrößern sonst das Layout-Fenster, und die Lupe sitzt verschoben (gemessen 15.10.: 402/418 statt 390 px). */
main{overflow-x:clip}
.foot{max-width:var(--w);margin:8px auto 0;padding:14px 16px calc(22px + var(--safe));display:flex;gap:18px;justify-content:center;font-size:13px;border-top:1px solid #e4e4e4;width:100%}
.foot a{color:var(--mute);text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}
.act{padding-bottom:18px}

/* ---------- Admin ---------- */
.adm{max-width:1100px}
.adm-time{font-size:13px;color:var(--mute)}
.adm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:18px}
.adm-big{font-size:32px;font-weight:700}.adm-big small{font-size:15px;color:var(--mute);font-weight:600}
.adm-dl{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 6px}
.adm-dl .btn{flex:0 1 320px;text-decoration:none}
.adm-h{font-size:18px;margin:26px 0 10px}
.adm-table{overflow-x:auto;background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.adm-table table{width:100%;border-collapse:collapse;font-size:14px}
.adm-table th,.adm-table td{text-align:left;padding:9px 12px;border-bottom:1px solid #eee;white-space:nowrap}
.adm-table th{font-size:12px;color:var(--mute);font-weight:600}
.adm-pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;background:#eee}
.st-abgeschlossen .adm-pill{background:#E3F1E6;color:#1F6B33}
.st-begonnen .adm-pill{background:#FFF3D6;color:#7A5A00}
.adm-regions{display:flex;flex-wrap:wrap;gap:8px}.adm-regions span{background:#fff;border-radius:999px;padding:5px 12px;font-size:14px}

/* Zoom in der Box: Die Box bleibt so breit wie die Antworten darunter, das Bild steht darin wie bisher (contain).
   Gezoomt wird das Bild innerhalb der Box, mindestens auf volle Boxbreite. Kein will-change: sonst rastert der
   Browser das Bild in Anzeigegröße und vergrößert dann unscharf. */
figure.shot{touch-action:pan-y;user-select:none;-webkit-user-select:none}
figure.shot img{transform-origin:0 0;-webkit-user-drag:none;transition:transform .2s var(--ease)}
figure.shot.zoomed{cursor:grab}
figure.shot.zoomed:active{cursor:grabbing}
figure.shot.dragging img{transition:none}
figure.shot:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
figure.shot .zoomhint{pointer-events:none}
.shot.tall{margin:14px 0 4px}
.split .shot.tall{margin:0}
/* Matrix: Endpunkte je Zeile direkt über den Knöpfen */
.ends-row{margin:0 0 6px;font-size:12.5px;line-height:1.25;font-weight:500}
.ends-row span{max-width:48%}
@media (min-width:900px){.mrow{align-items:end}.mrow .mlbl{align-self:center}}
/* Skalen-Endpunkte: kräftiger als Hinweistext (Jan, 16.10.: „mehr Kontrast“) — #3E3E3E auf Weiß ≈ 10,7 : 1 */
.ends{color:#3E3E3E;font-weight:600;font-size:14px}
.ends-row{font-size:13px}
.drow .lbl{color:#3E3E3E}

/* ---------- Einheitlich (Jan, 16.10.: Konsistenz) ----------
   Eine Frage = eine Karte im Stil der Antwortkarten (weiß, grauer Rand, kein Schatten). Matrix und Differenzial:
   Zeilen in der Karte, getrennt durch feine Linien. Hover überall hellgrau innerhalb der weißen Karte. */
.icard,.mrows{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);box-shadow:none}
.icard{padding:16px}
.mrows{display:block;overflow:hidden}
.mrows .mrow{background:transparent;border:0;border-radius:0;box-shadow:none;border-top:1px solid #ECECEC;padding:14px 16px;transition:background .15s}
.mrows .mrow:first-child{border-top:0}
.dcard{padding:0;overflow:hidden}
.diff{gap:0}
.drow,.drow:nth-child(odd){background:transparent;border-radius:0;border-top:1px solid #ECECEC;padding:12px 16px 14px}
.drow:first-child{border-top:0}
@media (hover:hover){
  .mrows .mrow:hover,.drow:hover{background:#F7F7F7}
  .icard:hover{border-color:#C8C8C8}
}
.mrows .mrow.missing,.drow.missing{outline:2px solid var(--red);outline-offset:-2px}
/* Bildbox: Rand neben dem Bild weiß (Produktfotos sind weiß freigestellt), Fokusrahmen nur per Tastatur */
.shot img,.shot.tall img{background:#fff}
figure.shot:focus{outline:none}
figure.shot.kbd:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.mrows{margin-top:16px}
.adm-warn{background:#FDEDEC;border:1.5px solid var(--red);color:#7a120c;border-radius:12px;padding:12px 16px;font-weight:600;margin:0 0 16px}