/* =========================================================================
   imguploader.de — Gestaltung
   Aufbau: 1 Grundlagen · 2 Rahmen · 3 Startseite · 4 Bildseite
           5 Textseiten · 6 Zustände · 7 Anpassungen
   ========================================================================= */

/* ---------- 1 Grundlagen ---------- */
:root{
  /* Flächen — von tief nach hell gestaffelt, damit Ebenen ohne harte Linien lesbar sind */
  --bg:#0b0f17;
  --bg-soft:#111725;
  --bg-card:#151d2e;
  --bg-raise:#1b2438;

  --line:#26314a;
  --line-soft:#1d2639;

  --fg:#eaeff8;
  --fg-dim:#a3b1c9;
  --fg-mute:#6d7d99;

  --accent:#4d9fff;
  --accent-hi:#84c1ff;
  --accent-deep:#2b7fe0;
  --ok:#3ed597;
  --warn:#ffc857;
  --err:#ff6b6b;

  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 4px 16px rgba(0,0,0,.28);
  --shadow-lg:0 18px 48px rgba(0,0,0,.42);
  --glow:0 0 0 4px rgba(77,159,255,.16);

  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --wrap:1080px;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* Stellen, die frueher feste Farben hatten — sie muessen im Hellmodus
     mitwechseln, sonst bleiben Kopfleiste und Hinweise dunkel. */
  --glow-a:rgba(77,159,255,.16);
  --glow-b:rgba(124,92,255,.11);
  --head-bg:rgba(11,15,23,.76);
  --foot-bg:rgba(0,0,0,.2);
  --drop-bg:linear-gradient(180deg,var(--bg-soft),rgba(17,23,37,.5));
  --tint-accent:rgba(77,159,255,.11);
  --tint-accent-ring:rgba(77,159,255,.26);
  --tint-err:rgba(255,107,107,.1);
  --tint-err-line:rgba(255,107,107,.36);
  --err-text:#ffb3b3;
  --tint-warn:rgba(255,200,87,.09);
  --tint-warn-line:rgba(255,200,87,.26);
  --logo-glow:0 3px 12px rgba(77,159,255,.4);
  --head-grad:linear-gradient(180deg,#fff,#b9cbe6);
  --check-a:#1a2233;
  --check-b:#141b29;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;
}

/* Ruhiger Lichtschein hinter dem Kopfbereich */
body::before{
  content:"";position:fixed;inset:0 0 auto;height:620px;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 380px at 18% -120px,var(--glow-a),transparent 68%),
    radial-gradient(680px 340px at 84% -80px,var(--glow-b),transparent 66%);
}
body>*{position:relative;z-index:1}

a{color:var(--accent);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--accent-hi)}

main{flex:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px 80px}

h1,h2,h3{line-height:1.22;margin:0 0 .5em;font-weight:650;letter-spacing:-.021em}
h1{font-size:clamp(1.85rem,4.4vw,2.85rem)}
h2{font-size:clamp(1.2rem,2.3vw,1.5rem)}
h3{font-size:1.05rem}
p{margin:0 0 1em}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Tastatur-Sprungmarke */
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--accent);color:#04070d;padding:10px 18px;
  border-radius:0 0 var(--radius-sm) 0;font-weight:600;
}
.skip:focus{left:0}

/* Schaltflächen */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--radius-sm);border:1px solid transparent;
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  color:#04070d;font:inherit;font-weight:640;font-size:.95rem;
  cursor:pointer;white-space:nowrap;
  box-shadow:var(--shadow-sm);
  transition:transform .14s var(--ease),box-shadow .2s var(--ease),filter .15s var(--ease);
}
.btn:hover{color:#04070d;filter:brightness(1.08);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--fg-dim);box-shadow:none}
.btn-ghost:hover{background:var(--bg-soft);border-color:var(--accent);color:var(--fg);filter:none}
.btn-danger{background:linear-gradient(180deg,#ff7d7d,#e34a4a);color:#2a0505}
.btn-danger:hover{color:#2a0505}

.linklike{
  background:none;border:0;padding:0;font:inherit;color:var(--accent);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.linklike:hover{color:var(--accent-hi)}

/* ---------- 2 Rahmen: Kopf und Fuß ---------- */
.site-head{
  position:sticky;top:0;z-index:20;
  backdrop-filter:saturate(150%) blur(14px);
  background:var(--head-bg);
  border-bottom:1px solid var(--line-soft);
}
.site-head>div{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:var(--wrap);margin:0 auto;padding:14px 22px;width:100%;
}
.brand{display:inline-flex;align-items:center;gap:13px;font-weight:700;font-size:1.06rem;color:var(--fg);letter-spacing:-.02em}
.brand:hover{color:var(--fg)}
.brand-mark{
  display:block;width:30px;height:30px;flex:0 0 30px;
  border-radius:9px;
}
.site-head nav{display:flex;gap:6px}
.site-head nav a{
  color:var(--fg-dim);font-size:.93rem;font-weight:500;
  padding:7px 13px;border-radius:8px;transition:background .15s var(--ease),color .15s var(--ease);
}
.site-head nav a:hover{background:var(--bg-soft);color:var(--fg)}

.site-foot{
  border-top:1px solid var(--line-soft);margin-top:auto;
  background:var(--foot-bg);
  padding:34px 22px;color:var(--fg-mute);font-size:.88rem;
}
.site-foot>div{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.site-foot p{margin:0}
.site-foot nav{display:flex;gap:20px;flex-wrap:wrap}
.site-foot a{color:var(--fg-mute)}
.site-foot a:hover{color:var(--fg-dim)}

/* ---------- 3 Startseite ---------- */
.hero{text-align:center;padding:64px 0 40px;max-width:760px;margin:0 auto}
.hero h1{margin-bottom:.42em;background:var(--head-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1rem,1.7vw,1.16rem);color:var(--fg-dim);margin:0 auto;max-width:64ch}

.trust{
  display:flex;flex-wrap:wrap;gap:9px 22px;justify-content:center;
  margin:26px 0 0;padding:0;list-style:none;
  color:var(--fg-mute);font-size:.88rem;
}
.trust li{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:15px;height:15px;color:var(--ok);flex:0 0 15px}

/* Ablagefläche */
.uploader{max-width:840px;margin:0 auto}
.dropzone{
  position:relative;
  border:2px dashed var(--line);border-radius:var(--radius-lg);
  background:var(--drop-bg);
  padding:58px 26px;text-align:center;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.dropzone:hover{border-color:var(--accent);background:var(--bg-card)}
.dropzone:focus-visible{border-color:var(--accent);box-shadow:var(--glow)}
.dropzone.over{
  border-color:var(--accent);border-style:solid;background:var(--bg-card);
  transform:scale(1.008);box-shadow:var(--glow),var(--shadow-lg);
}
.dz-icon{
  width:52px;height:52px;color:var(--accent);margin-bottom:16px;
  transition:transform .25s var(--ease);
}
.dropzone.over .dz-icon{transform:translateY(-5px)}
.dz-title{font-size:1.28rem;font-weight:620;margin:0 0 7px;letter-spacing:-.015em}
.dz-hint{color:var(--fg-dim);margin:0 0 14px;font-size:.96rem}
.dz-meta{color:var(--fg-mute);font-size:.83rem;margin:0}
kbd{
  font:inherit;font-family:var(--mono);font-size:.82em;
  background:var(--bg-raise);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;color:var(--fg-dim);
}

.opts{
  display:flex;align-items:center;gap:11px;justify-content:center;
  margin:18px 0 0;color:var(--fg-dim);font-size:.91rem;flex-wrap:wrap;
}
select{
  font:inherit;font-size:.91rem;padding:8px 13px;border-radius:8px;
  background:var(--bg-card);color:var(--fg);border:1px solid var(--line);cursor:pointer;
}
select:hover{border-color:var(--accent)}

/* Ergebnisliste */
.results{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.result{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--bg-card);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:15px;box-shadow:var(--shadow-sm);
  animation:rise .32s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.result-thumb{
  width:78px;height:78px;flex:0 0 78px;border-radius:var(--radius-sm);
  object-fit:cover;background:var(--bg-raise);border:1px solid var(--line-soft);
}
.result-body{flex:1;min-width:0}
.result-name{font-weight:600;margin:0 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-meta{color:var(--fg-mute);font-size:.83rem;margin:0 0 11px}
.result.is-error{border-color:var(--tint-err-line)}
.result.is-error .result-name{color:var(--err)}

.bar{height:4px;border-radius:99px;background:var(--bg-raise);overflow:hidden;margin-top:9px}
.bar span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),#7c5cff);transition:width .25s var(--ease)}

/* Kopierbare Zeile */
.share-row{display:flex;align-items:center;gap:9px;margin:0 0 8px;flex-wrap:wrap}
.share-row label{
  flex:0 0 104px;color:var(--fg-mute);font-size:.8rem;
  text-transform:uppercase;letter-spacing:.055em;font-weight:600;
}
.share-row input{
  flex:1;min-width:170px;font:inherit;font-family:var(--mono);font-size:.845rem;
  padding:9px 12px;border-radius:8px;
  background:var(--bg);color:var(--fg-dim);border:1px solid var(--line);
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.share-row input:focus{border-color:var(--accent);color:var(--fg);outline:none}
.copy{
  font:inherit;font-size:.85rem;font-weight:600;padding:9px 15px;border-radius:8px;
  background:var(--bg-raise);color:var(--fg-dim);border:1px solid var(--line);cursor:pointer;
  transition:all .15s var(--ease);
}
.copy:hover{background:var(--accent);border-color:var(--accent);color:#04070d}
.copy.done{background:var(--ok);border-color:var(--ok);color:#04140c}

/* Vorzüge */
.features{
  display:grid;gap:18px;margin:78px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.features article{
  background:var(--bg-card);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:24px;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.features article:hover{border-color:var(--line);transform:translateY(-2px)}
.feat-icon{
  display:grid;place-items:center;width:38px;height:38px;margin-bottom:14px;
  border-radius:10px;background:var(--tint-accent);color:var(--accent);
}
.feat-icon svg{width:19px;height:19px}
.features h2{font-size:1.03rem;margin-bottom:.42em}
.features p{color:var(--fg-dim);font-size:.92rem;margin:0}

/* Ablauf in drei Schritten */
.steps{margin:78px 0 0}
.steps>h2{text-align:center;margin-bottom:1.5em}
.steps ol{
  list-style:none;counter-reset:s;padding:0;margin:0;
  display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));
}
.steps li{counter-increment:s;padding-left:50px;position:relative}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-3px;
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:var(--tint-accent);
  color:var(--accent);font-weight:700;font-size:.96rem;
  border:1px solid var(--tint-accent-ring);
}
.steps h3{margin-bottom:.3em}
.steps p{color:var(--fg-dim);font-size:.92rem;margin:0}

/* Fragen auf der Startseite (zahlt auf das FAQ-Suchergebnis ein) */
.faq-teaser{margin:78px 0 0}
.faq-teaser>h2{text-align:center;margin-bottom:1.3em}
details.qa{
  background:var(--bg-card);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden;
}
details.qa summary{
  padding:15px 19px;cursor:pointer;font-weight:570;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{
  content:"+";color:var(--accent);font-size:1.25rem;line-height:1;flex:0 0 auto;
  transition:transform .2s var(--ease);
}
details.qa[open] summary::after{transform:rotate(45deg)}
details.qa summary:hover{background:var(--bg-raise)}
details.qa .qa-body{padding:0 19px 17px;color:var(--fg-dim);font-size:.94rem}
details.qa .qa-body p:last-child{margin:0}

/* ---------- 4 Bildseite ---------- */
.crumbs{font-size:.85rem;color:var(--fg-mute);margin:22px 0 14px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--fg-mute)}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-current]{color:var(--fg-dim)}

.image-view{padding-bottom:20px}
.image-view h1{font-size:clamp(1.35rem,2.9vw,1.85rem);margin-bottom:.28em;overflow-wrap:anywhere}
.image-sub{color:var(--fg-mute);font-size:.9rem;margin:0 0 22px}

.image-frame{
  margin:0 0 26px;padding:14px;
  background:var(--bg-soft);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow);
}
.image-frame img{
  max-width:100%;height:auto;display:block;margin:0 auto;
  border-radius:var(--radius-sm);
  background:
    linear-gradient(45deg,var(--check-a) 25%,transparent 25%,transparent 75%,var(--check-a) 75%),
    linear-gradient(45deg,var(--check-a) 25%,var(--check-b) 25%,var(--check-b) 75%,var(--check-a) 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;
}
.image-frame figcaption{color:var(--fg-dim);font-size:.9rem;margin-top:13px;padding:0 6px}

.share{
  background:var(--bg-card);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:22px;margin-bottom:22px;
}
.share h2{font-size:1.02rem;margin-bottom:1em}

.owner-box{
  background:var(--bg-card);border:1px solid var(--line-soft);
  border-left:3px solid var(--err);
  border-radius:var(--radius);padding:22px;margin-bottom:22px;
}
.owner-box h2{font-size:1.02rem;margin-bottom:.9em;display:flex;align-items:center;gap:9px}
.owner-box h2::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--err)}
.share-row-delete input{border-color:var(--tint-err-line);color:var(--err-text)}
.share-row-delete label{color:var(--err-text)}
.delete-note{color:var(--fg-mute);font-size:.85rem;margin:4px 0 0}

.image-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0}

/* ---------- 5 Textseiten ---------- */
.prose{max-width:74ch;margin:34px auto 0}
.prose h1{margin-bottom:.7em}
.prose h2{margin:2em 0 .6em;padding-top:.3em}
.prose h3{margin:1.6em 0 .45em;color:var(--fg-dim)}
.prose p,.prose li{color:var(--fg-dim)}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.1em}
.prose li{margin-bottom:.42em}
.prose code{
  font-family:var(--mono);font-size:.87em;
  background:var(--bg-raise);padding:2px 7px;border-radius:5px;
  color:var(--accent-hi);border:1px solid var(--line-soft);
}
.prose pre{
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:17px 19px;overflow-x:auto;
  font-family:var(--mono);font-size:.85rem;line-height:1.6;margin:0 0 1.3em;
}
.prose pre code{background:none;border:0;padding:0;color:var(--fg)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.92rem}
.prose th,.prose td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line-soft)}
.prose th{color:var(--fg);font-weight:620;background:var(--bg-soft)}
.prose td{color:var(--fg-dim)}
.prose tr:last-child td{border-bottom:0}
.prose blockquote{
  margin:0 0 1.3em;padding:2px 0 2px 18px;
  border-left:3px solid var(--accent);color:var(--fg-dim);
}
.prose hr{border:0;border-top:1px solid var(--line-soft);margin:2.4em 0}
.prose a{text-decoration:underline;text-underline-offset:2px}

/* ---------- 6 Zustände ---------- */
.error-page,.confirm-delete{text-align:center;padding:76px 0;max-width:540px;margin:0 auto}
.error-page h1{font-size:clamp(3.4rem,10vw,5.2rem);color:var(--accent);opacity:.24;margin-bottom:0;line-height:1}
.error-page .lead{margin-bottom:1.5em}

.confirm-preview{margin:0 0 26px}
.confirm-preview img{
  width:210px;height:210px;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-soft);
}
.confirm-preview figcaption{color:var(--fg-mute);font-size:.88rem;margin-top:11px}
.confirm-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.noscript-note{
  margin-top:16px;padding:13px 17px;border-radius:var(--radius-sm);
  background:var(--tint-warn);border:1px solid var(--tint-warn-line);
  color:var(--warn);font-size:.9rem;
}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--bg-raise);border:1px solid var(--line);
  color:var(--fg);padding:11px 20px;border-radius:99px;
  font-size:.9rem;font-weight:550;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:60;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 7 Anpassungen ---------- */
@media (max-width:640px){
  main{padding:0 16px 60px}
  .site-head>div{padding:12px 16px}
  .hero{padding:42px 0 30px}
  .dropzone{padding:40px 18px}
  .share-row label{flex:0 0 100%}
  .share-row input{min-width:0}
  .features,.steps ol{margin-top:52px}
  .result{flex-direction:column}
  .result-thumb{width:100%;height:148px;flex:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media print{
  .site-head,.site-foot,.share,.owner-box,.image-actions,.uploader{display:none!important}
  body{background:#fff;color:#000}
  body::before{display:none}
}

/* ---------- API-Schlüssel: Anforderung ---------- */
.hero-key{padding-bottom:26px}
.keyform-wrap{
  display:grid;gap:22px;align-items:start;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  max-width:960px;margin:0 auto;
}
.keyform{
  background:var(--bg-card);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);
}
.keyform h2{margin-bottom:1em}
.field{margin-bottom:19px}
.field label{display:block;font-weight:590;margin-bottom:6px;font-size:.94rem}
.req,.opt{font-weight:400;font-size:.78rem;letter-spacing:.03em;margin-left:5px}
.req{color:var(--err)}
.opt{color:var(--fg-mute)}
.field input,.field select{
  width:100%;font:inherit;font-size:.96rem;padding:11px 14px;border-radius:var(--radius-sm);
  background:var(--bg);color:var(--fg);border:1px solid var(--line);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:var(--glow);outline:none}
.field input::placeholder{color:var(--fg-mute)}
.field-hint{color:var(--fg-mute);font-size:.83rem;margin:6px 0 0}
.btn-lg{width:100%;padding:14px 22px;font-size:1rem;margin-top:4px}
.form-foot{color:var(--fg-mute);font-size:.82rem;margin:14px 0 0;text-align:center}
.form-error{
  background:var(--tint-err);border:1px solid var(--tint-err-line);
  color:var(--err-text);padding:11px 15px;border-radius:var(--radius-sm);
  font-size:.9rem;margin:0 0 18px;
}
.keyside{
  background:var(--bg-soft);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:24px;
}
.keyside h2{font-size:1rem;margin-bottom:.9em}
.keyside pre{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:15px;overflow-x:auto;font-family:var(--mono);font-size:.79rem;
  line-height:1.6;margin:0 0 12px;color:var(--fg-dim);
}
.keyside-note{color:var(--fg-mute);font-size:.86rem;margin:0}

.notice{
  max-width:620px;margin:0 auto;padding:26px 28px;
  border-radius:var(--radius-lg);border:1px solid var(--line-soft);background:var(--bg-card);
}
.notice-ok{border-left:3px solid var(--ok)}
.notice h2{font-size:1.14rem;margin-bottom:.6em}
.notice p{color:var(--fg-dim);margin:0 0 .7em}
.notice-sub{color:var(--fg-mute);font-size:.88rem;margin:0}

/* ---------- API-Schlüssel: Anzeige ---------- */
.key-ready{max-width:680px;margin:0 auto;padding-top:34px}
.keybox{
  background:var(--bg-card);border:1px solid var(--line-soft);
  border-left:3px solid var(--ok);border-radius:var(--radius);
  padding:22px;margin:24px 0;
}
.keybox .share-row input{font-size:.9rem;color:var(--fg)}
.keyfacts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));margin:0 0 32px}
.keyfacts>div{background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:14px 16px}
.keyfacts dt{color:var(--fg-mute);font-size:.79rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.keyfacts dd{margin:0;font-weight:590}
.key-ready pre{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:.82rem;
  line-height:1.6;margin:0 0 26px;color:var(--fg-dim);
}

@media (max-width:820px){
  .keyform-wrap{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   HELLMODUS
   Gilt automatisch, wenn das Betriebssystem auf hell steht, und
   ausserdem, wenn der Besucher ausdruecklich hell gewaehlt hat.
   Die Auswahl liegt in data-theme am <html>-Element und schlaegt
   die Systemeinstellung.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#f7f9fc;
    --bg-soft:#ffffff;
    --bg-card:#ffffff;
    --bg-raise:#eef2f9;

    --line:#d3dcea;
    --line-soft:#e3e9f3;

    --fg:#111826;
    --fg-dim:#44536b;
    --fg-mute:#5a6883;

    --accent:#1668d6;
    --accent-hi:#0f4fa8;
    --accent-deep:#0d47a0;
    --ok:#0f8a5f;
    --warn:#9a6600;
    --err:#c62b2b;

    --shadow-sm:0 1px 2px rgba(16,32,64,.07);
    --shadow:0 4px 16px rgba(16,32,64,.09);
    --shadow-lg:0 18px 48px rgba(16,32,64,.14);
    --glow:0 0 0 4px rgba(22,104,214,.15);

    --glow-a:rgba(22,104,214,.09);
    --glow-b:rgba(124,92,255,.07);
    --head-bg:rgba(255,255,255,.82);
    --foot-bg:rgba(16,32,64,.035);
    --drop-bg:linear-gradient(180deg,#ffffff,#f3f6fc);
    --tint-accent:rgba(22,104,214,.09);
    --tint-accent-ring:rgba(22,104,214,.22);
    --tint-err:rgba(198,43,43,.07);
    --tint-err-line:rgba(198,43,43,.3);
    --err-text:#a81f1f;
    --tint-warn:rgba(154,102,0,.08);
    --tint-warn-line:rgba(154,102,0,.26);
    --logo-glow:0 3px 12px rgba(22,104,214,.28);
    --head-grad:linear-gradient(180deg,#0d1626,#31506f);
    --check-a:#dfe6f1;
    --check-b:#eef2f9;

    color-scheme:light;
  }
}

:root[data-theme="light"] {
  --bg:#f7f9fc;
  --bg-soft:#ffffff;
  --bg-card:#ffffff;
  --bg-raise:#eef2f9;

  --line:#d3dcea;
  --line-soft:#e3e9f3;

  --fg:#111826;
  --fg-dim:#44536b;
  --fg-mute:#5a6883;

  --accent:#1668d6;
  --accent-hi:#0f4fa8;
  --accent-deep:#0d47a0;
  --ok:#0f8a5f;
  --warn:#9a6600;
  --err:#c62b2b;

  --shadow-sm:0 1px 2px rgba(16,32,64,.07);
  --shadow:0 4px 16px rgba(16,32,64,.09);
  --shadow-lg:0 18px 48px rgba(16,32,64,.14);
  --glow:0 0 0 4px rgba(22,104,214,.15);

  --glow-a:rgba(22,104,214,.09);
  --glow-b:rgba(124,92,255,.07);
  --head-bg:rgba(255,255,255,.82);
  --foot-bg:rgba(16,32,64,.035);
  --drop-bg:linear-gradient(180deg,#ffffff,#f3f6fc);
  --tint-accent:rgba(22,104,214,.09);
  --tint-accent-ring:rgba(22,104,214,.22);
  --tint-err:rgba(198,43,43,.07);
  --tint-err-line:rgba(198,43,43,.3);
  --err-text:#a81f1f;
  --tint-warn:rgba(154,102,0,.08);
  --tint-warn-line:rgba(154,102,0,.26);
  --logo-glow:0 3px 12px rgba(22,104,214,.28);
  --head-grad:linear-gradient(180deg,#0d1626,#31506f);
  --check-a:#dfe6f1;
  --check-b:#eef2f9;

  color-scheme:light;
}

/* Umschalter in der Kopfleiste */
.theme-toggle{
  display:inline-grid;place-items:center;
  width:38px;height:38px;flex:none;
  border:1px solid var(--line);border-radius:10px;
  background:var(--bg-card);color:var(--fg-dim);
  cursor:pointer;padding:0;margin-left:4px;
  transition:color .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease);
}
.theme-toggle:hover{color:var(--accent);border-color:var(--tint-accent-ring);background:var(--bg-raise)}
.theme-toggle svg{width:19px;height:19px;display:block}
/* Sonne im Dunkelmodus (= "auf hell schalten"), Mond im Hellmodus */
.theme-toggle .i-sun{display:block}
.theme-toggle .i-moon{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-toggle .i-sun{display:none}
  :root:not([data-theme="dark"]) .theme-toggle .i-moon{display:block}
}

/* Bildflaechen im Hellmodus dezent absetzen, damit weisse Bilder
   nicht mit dem Hintergrund verschwimmen */
:root[data-theme="light"] .shot,
:root[data-theme="light"] .image-stage{background:#eef2f9}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .shot,
  :root:not([data-theme="dark"]) .image-stage{background:#eef2f9}
}

@media (max-width:560px){
  /* Gleich gross wie der Burgerknopf daneben, sonst wirkt es schief. */
  .theme-toggle{width:44px;height:44px}
}

/* ══════════════════════════════════════════════════════════════
   BURGERMENÜ (nur auf schmalen Schirmen)
   Am Rechner bleibt die Navigation eine normale Zeile. Unter 760px
   verschwindet sie hinter einem Knopf, weil die Kopfleiste sonst
   577px braucht und die Seite seitlich wegläuft.
   ══════════════════════════════════════════════════════════════ */
.nav-toggle{display:none}

@media (max-width:760px){
  .nav-toggle{
    display:grid;place-items:center;
    width:44px;height:44px;flex:0 0 44px;   /* 44px = bequeme Tippfläche */
    border:1px solid var(--line);border-radius:10px;
    background:var(--bg-soft);color:var(--fg-dim);cursor:pointer;
    order:3;                                 /* ganz nach rechts */
    transition:color .15s var(--ease),border-color .15s var(--ease);
  }
  .nav-toggle:hover{color:var(--fg);border-color:var(--accent)}
  .nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  .burger{display:block;width:18px;height:13px;position:relative}
  .burger i{
    position:absolute;left:0;width:100%;height:2px;border-radius:2px;
    background:currentColor;transition:transform .22s var(--ease),opacity .18s var(--ease),top .22s var(--ease);
  }
  .burger i:nth-child(1){top:0}
  .burger i:nth-child(2){top:5.5px}
  .burger i:nth-child(3){top:11px}

  /* Offen: die drei Striche werden ein Kreuz */
  .nav-toggle[aria-expanded="true"] .burger i:nth-child(1){top:5.5px;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .burger i:nth-child(3){top:5.5px;transform:rotate(-45deg)}

  .site-head>div{flex-wrap:wrap;gap:10px}
  .brand{order:1;margin-right:auto}
  .theme-toggle{order:2}

  /* Die Navigation rutscht unter die Kopfzeile, volle Breite */
  .site-head nav{
    order:4;flex-basis:100%;flex-direction:column;gap:2px;
    display:none;
    padding:6px 0 4px;margin-top:2px;
    border-top:1px solid var(--line-soft);
  }
  .site-head nav.offen{display:flex}
  .site-head nav a{
    padding:13px 12px;border-radius:10px;font-size:1rem;
    min-height:44px;display:flex;align-items:center;
    margin-left:-12px;   /* Innenabstand ausgleichen: Text fluchtet mit dem Logo */
    margin-right:-12px;
  }
  /* Die aktuelle Seite hervorheben.
     Der Hintergrund allein reicht nicht: gemessen nur 1,07 Kontrast
     gegen die Kopfleiste, also praktisch unsichtbar. Darum zusaetzlich
     ein farbiger Balken links und die Akzentfarbe. */
  .site-head nav a[aria-current="page"]{
    background:var(--bg-soft);color:var(--accent);font-weight:600;
    position:relative;
  }
  /* Gerader Balken statt inset-Schatten: der folgte der 10px-Rundung
     und lief oben/unten bogenfoermig aus (nachgemessen). */
  .site-head nav a[aria-current="page"]::before{
    content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
    border-radius:2px;background:var(--accent);
  }
}

/* ══════════════════════════════════════════════════════════════
   SEITLICHES WEGLAUFEN AUF DEM HANDY
   Gemessen: /api war 4px, /api-key 27px breiter als das Fenster.
   Ursache sind Elemente mit eigener Mindestbreite in einem Raster
   bzw. eine Tabelle, die nicht schrumpfen will.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* Rasterfelder duerfen unter ihre Inhaltsbreite schrumpfen */
  .keyform,.keyside{min-width:0}
  .keyform-wrap{min-width:0}

  /* Breite Tabellen bekommen eine eigene Rollflaeche,
     statt die ganze Seite breiter zu machen. */
  .prose table{display:block;overflow-x:auto;width:100%}

  /* Lange Befehle brechen um, statt seitlich rauszuragen */
  .prose pre,.keyside pre,.key-ready pre{white-space:pre-wrap;word-break:break-word}
}