:root{ --papier:#f6f3ea; --karte:#fffdf7; --tinte:#1f2a1c; --grau:#5d6656; --gruen:#3f8f2f; --gruen-hell:#cfe8b8; --linie:#e2ddcf; }
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--papier); color:var(--tinte); font:17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }
main{ max-width:720px; margin:0 auto; padding:max(20px,env(safe-area-inset-top)) 16px 48px; }
.kopf{ text-align:center; margin:8px 0 12px; }
.spitz{ margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gruen); font-weight:700; }
h1{ margin:4px 0 0; font-size:clamp(30px,8vw,44px); line-height:1.1; }
h2{ margin:0 0 14px; font-size:21px; }
.buehne{ position:relative; }
model-viewer{ display:block; width:100%; height:min(72vh,560px); border-radius:24px; border:1px solid var(--linie);
  background:radial-gradient(ellipse at 50% 40%, #fffef9 0%, #f1edde 70%, #e9e3d0 100%); --poster-color:transparent; --progress-bar-color:var(--gruen); }
.ar-knopf{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:10px;
  min-height:56px; padding:0 24px; border:0; border-radius:999px; background:var(--gruen); color:#fff; font:inherit; font-size:18px; font-weight:700;
  white-space:nowrap; cursor:pointer; box-shadow:0 14px 30px -14px rgba(31,42,28,.6); }
.ar-knopf:active{ transform:translateX(-50%) scale(.97); }
.hinweis{ margin:10px 4px 0; text-align:center; color:var(--grau); font-size:15px; }
.karte{ margin-top:22px; padding:20px; background:var(--karte); border:1px solid var(--linie); border-radius:20px; }
.schritte{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.schritte li{ display:flex; gap:12px; align-items:flex-start; }
.schritte span{ flex:0 0 30px; height:30px; border-radius:50%; background:var(--gruen-hell); color:var(--tinte); font-weight:700; display:grid; place-items:center; font-size:15px; }
.videos{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
figure{ margin:0; }
video{ display:block; width:100%; aspect-ratio:1/1; border-radius:16px; background:#e9e3d0; }
figcaption{ margin-top:8px; color:var(--grau); font-size:15px; text-align:center; }
.original img{ display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--linie); }
button:not(:disabled), a[href], [role="button"]{ cursor:pointer; }
.tuer{ max-width:420px; padding-top:12vh; }
.tuer input{ width:100%; min-height:52px; padding:0 16px; font:inherit; border:1px solid var(--linie); border-radius:14px; background:#fff; }
.los{ margin-top:14px; width:100%; min-height:52px; border:0; border-radius:999px; background:var(--gruen); color:#fff; font:inherit; font-weight:700; font-size:18px; }
.fehler{ margin:12px 0 0; color:#a3341f; }