/* Webcam Altheim – klassischer, plastischer Look */
:root{
  --paper:#e6dfd1; --panel:#f6f2e9; --panel2:#ece6d8;
  --edge:#b6aa92; --edge-d:#8d8067;
  --ink:#2c2822; --ink-2:#6a6152;
  --moss:#3a6b4a; --moss-d:#2a5138; --moss-l:#5d9070;
  --rust:#9c4a2f;
  --frame:#4a4136; --frame-hi:#6b6053;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#181511; --panel:#241f18; --panel2:#1d1913;
    --edge:#463d30; --edge-d:#2e2820;
    --ink:#e7dfcd; --ink-2:#9a8f7a;
    --moss:#7aab88; --moss-d:#5c8a6a; --moss-l:#9ec7a9;
    --rust:#c97a5c;
    --frame:#0f0d0a; --frame-hi:#2a241c;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(0,0,0,.07), transparent 50%);
  background-attachment:fixed;
  font:16px/1.55 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
.wrap{max-width:780px;margin:0 auto;padding:22px 16px 34px}
.wrap.narrow{max-width:600px}

h1{
  font:600 1.9rem/1.2 Georgia,"Times New Roman",serif;
  margin:0 0 2px; text-align:center; letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) h1{text-shadow:0 1px 0 rgba(0,0,0,.6)}}
h2{font:600 1.05rem/1.3 Georgia,serif;margin:0 0 12px;
   padding-bottom:7px;border-bottom:1px solid var(--edge)}
.rule{height:2px;margin:10px auto 18px;max-width:170px;
  background:linear-gradient(90deg,transparent,var(--edge-d),transparent)}

/* Bildrahmen */
.frame{
  padding:9px; border-radius:4px;
  background:linear-gradient(160deg,var(--frame-hi),var(--frame));
  box-shadow:0 2px 3px rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.24),
             inset 0 1px 0 rgba(255,255,255,.14);
}
.frame .inner{
  background:#000; border-radius:2px; overflow:hidden; position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 9px rgba(0,0,0,.65);
  /* Wird beim Laden auf das echte Seitenverhaeltnis des Bildes gesetzt */
  aspect-ratio:var(--ar, 16/9);
  display:flex; align-items:center; justify-content:center;
}
.frame img{width:100%;height:100%;object-fit:contain;display:block}
.frame .note{position:absolute;color:#9c968a;font-size:.88rem;text-align:center;padding:18px}

.cap{text-align:center;color:var(--ink-2);font-size:.88rem;margin:10px 0 0;
     font-variant-numeric:tabular-nums}

/* Knoepfe */
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:15px}
button,.btn{
  font:600 .95rem/1 "Segoe UI",system-ui,sans-serif; cursor:pointer;
  padding:12px 20px; border-radius:6px; color:var(--ink);
  border:1px solid var(--edge-d);
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 1px 2px rgba(0,0,0,.22);
  text-decoration:none; display:inline-block; text-align:center;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) button,
  :root:not([data-theme="light"]) .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.5)}}
button:hover,.btn:hover{filter:brightness(1.04)}
button:active,.btn:active{
  box-shadow:inset 0 2px 5px rgba(0,0,0,.28); transform:translateY(1px)}
button:disabled{opacity:.55;cursor:default;transform:none}
button.primary{
  color:#fff; border-color:var(--moss-d);
  background:linear-gradient(180deg,var(--moss-l),var(--moss));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.3)}
/* Dunkelmodus: dunkle Schrift auf dem hellen Grünton */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) button.primary{
    color:#12200f; border-color:#41654c;
    text-shadow:0 1px 0 rgba(255,255,255,.18);
  }
}
button.danger{color:#fff;border-color:#7d3a23;
  background:linear-gradient(180deg,#c06248,var(--rust))}
button.small{padding:8px 13px;font-size:.86rem}

.hint{text-align:center;color:var(--ink-2);font-size:.82rem;margin:9px 0 0}
.foot{text-align:center;color:var(--ink-2);font-size:.82rem;margin-top:26px;
      padding-top:14px;border-top:1px solid var(--edge)}
a{color:var(--moss)}
a.plain{color:var(--ink-2);text-decoration:none}
a.plain:hover{text-decoration:underline}

/* Bedienfelder */
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--edge-d); border-radius:7px; padding:15px; margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.14);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .panel{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 3px rgba(0,0,0,.4)}}
label{display:block;font-size:.83rem;color:var(--ink-2);margin:11px 0 4px}
label:first-child{margin-top:0}
input,select,textarea{
  width:100%;padding:10px;border-radius:5px;font:inherit;font-size:.93rem;
  border:1px solid var(--edge-d);color:var(--ink);
  background:var(--paper);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
}
input[type=range]{padding:0;box-shadow:none;background:transparent;accent-color:var(--moss)}
input[type=color]{padding:3px;height:40px}
input[type=checkbox]{width:auto;margin:0 8px 0 0;vertical-align:-2px;box-shadow:none}
.chk{display:flex;align-items:center;gap:0;font-size:.93rem;color:var(--ink);margin:10px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.grid2{grid-template-columns:1fr}}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
    font-size:.9rem;border-bottom:1px dotted var(--edge)}
.kv:last-child{border:0}
.kv span:first-child{color:var(--ink-2)}
.kv span:last-child{font-variant-numeric:tabular-nums}
.msg{font-size:.86rem;padding:9px 11px;border-radius:5px;margin-top:11px;border:1px solid}
.msg.ok{background:rgba(58,107,74,.13);border-color:var(--moss);color:var(--moss)}
.msg.bad{background:rgba(156,74,47,.13);border-color:var(--rust);color:var(--rust)}
.msg.info{background:rgba(0,0,0,.05);border-color:var(--edge-d);color:var(--ink-2)}
.hide{display:none!important}
.bar{height:5px;background:var(--panel2);border-radius:3px;overflow:hidden;
     border:1px solid var(--edge-d);box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(180deg,var(--moss-l),var(--moss));transition:width .25s}