:root{
  color-scheme: dark;
  --cd-page-bg-color: #060c16;
  --cd-page-bg-gradient: radial-gradient(110% 88% at 50% 52%, rgba(140, 190, 255, .50) 0%, rgba(100, 150, 240, .38) 26%, rgba(50, 82, 140, .65) 49%, rgba(18, 30, 56, .88) 67%, rgba(9, 15, 28, .96) 82%, #060c16 100%);
  --cd-border: rgba(124, 157, 209, .28);
  --cd-border-strong: rgba(138, 180, 255, .40);
  --cd-text: #eaf1ff;
  --cd-text-muted: #b8c8e5;
  --cd-space-1: 4px;
  --cd-space-2: 8px;
  --cd-space-3: 12px;
  --cd-space-4: 16px;
  --cd-space-5: 24px;
}

/* Utility: JS-controlled hidden state — use instead of inline style="display:none" */
[hidden], .cd-hidden{ display: none !important; }

html{
  min-height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  /* Solid-color fallback before ::before paints */
  background-color: var(--cd-page-bg-color);
}

/* Truly fixed gradient background — position:fixed on html::before is safe
   because html has no isolation:isolate stacking context (unlike body::before). */
html::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-color: var(--cd-page-bg-color);
  background-image: var(--cd-page-bg-gradient);
  will-change: transform;
}

body{
  font-family: 'Inter', system-ui, Arial, sans-serif;
  margin: 0;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  background: transparent;
  color: var(--cd-text);
}

/* Globale Focus-Styles — nur bei Tastatur-Navigation sichtbar (:focus-visible) */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid rgba(63,157,255,.80);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Global scrollbar style (same look as prompt input) */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(138,180,255,.45) rgba(255,255,255,.06);
}

*::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: rgba(138,180,255,.42);
}

*::-webkit-scrollbar-track{
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

*::-webkit-scrollbar-button{
  display: none;
  width: 0;
  height: 0;
}

/* Skip-to-content link — sichtbar nur beim Fokus (Tastatur-Navigation) */
.cd-skip-link{
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(63,157,255,.95);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.40);
  transform: translateY(-200px);
  transition: transform .15s ease;
}
.cd-skip-link:focus{
  transform: translateY(0);
  outline: 2px solid rgba(255,255,255,.70);
  outline-offset: 2px;
}

.wrap{
  max-width: 1220px;
  margin: 40px auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

@media (max-width: 700px){
  .wrap{
    margin: 14px auto 10px;
    padding: 0 12px;
  }
}

.cd-app-stage{
  position: relative;
  margin-top: 12px;
  padding: 18px;
  border-radius: 22px;
  isolation: isolate;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .34),
    0 38px 86px rgba(1, 6, 18, .44);
}

.cd-app-stage::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: rgba(5, 10, 18, .42);
  border: 1px solid rgba(95, 132, 190, .20);
}

.cd-app-stage > .card{
  position: relative;
  z-index: 2;
  margin-top: 0;
  border-color: rgba(164, 196, 248, .58);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, .96),
    0 0 0 3px rgba(178, 208, 255, .24),
    0 24px 58px rgba(0, 0, 0, .44);
}

@media (max-width: 700px){
  .cd-app-stage{
    padding: 10px;
    border-radius: 16px;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, .24),
      0 20px 46px rgba(1, 6, 18, .34);
  }
}

.cd-global-lang{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}


.cd-lang-switch{
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(26, 33, 50, .92), rgba(18, 24, 38, .82));
  color: #e6efff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

.cd-lang-switch:hover{
  border-color: rgba(63,233,255,.42);
  box-shadow: 0 0 0 1px rgba(63,233,255,.14), 0 0 12px rgba(63,233,255,.10);
}

.cd-lang-switch img{
  width: 18px;
  height: 12px;
  border-radius: 2px;
  display: block;
  flex: 0 0 auto;
}

.cd-lang-switch__code{
  line-height: 1;
}

.cd-theme-switch{
  height: 36px;
  width: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(26, 33, 50, .92), rgba(18, 24, 38, .82));
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.cd-theme-switch:active{
  transform: translateY(1px);
}

.cd-theme-switch:focus-visible{
  outline: 2px solid rgba(138,180,255,.65);
  outline-offset: 2px;
}

.cd-theme-switch img{
  width: 20px;
  height: 20px;
  display: block;
}

.cd-theme-switch img:first-child{
  filter: brightness(0) invert(1);
}

.cd-theme-switch img:last-child{
  display: none;
}

.lightmode .cd-theme-switch img:first-child{
  display: none;
}

.lightmode .cd-theme-switch img:last-child{
  display: block;
}

body.lightmode{
  --cd-page-bg-color: #f0f4fa;
  --cd-page-bg-gradient: radial-gradient(118% 90% at 50% 50%, rgba(254, 255, 255, 1) 0%, rgba(246, 249, 253, .995) 24%, rgba(225, 232, 241, .98) 50%, rgba(176, 186, 201, .96) 73%, rgba(122, 131, 145, .94) 89%, rgba(88, 96, 109, .93) 100%);
  color: #141d2d;
  /* Hintergrund kommt von html:has(body.lightmode) → kein scrollender Gradient auf body */
}

/* Lightmode: override CSS vars on html so html::before picks them up via inheritance */
html:has(body.lightmode){
  --cd-page-bg-color: #f0f4fa;
  --cd-page-bg-gradient: radial-gradient(118% 90% at 50% 50%, rgba(254, 255, 255, 1) 0%, rgba(246, 249, 253, .995) 24%, rgba(225, 232, 241, .98) 50%, rgba(176, 186, 201, .96) 73%, rgba(122, 131, 145, .94) 89%, rgba(88, 96, 109, .93) 100%);
}

h1, h2, h3, h4{
  font-family: 'Inter', system-ui, Arial, sans-serif;
  margin: 0;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
}

h1{ font-size: clamp(20px, 3vw, 26px); font-weight: 800; margin-bottom: 10px; }
h2{ font-size: clamp(17px, 2.5vw, 21px); font-weight: 700; }
h3{ font-size: 15px; font-weight: 700; }
h4{ font-size: 13px; font-weight: 600; letter-spacing: 0; }

.card{
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--cd-border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24, 36, 58, .94), rgba(16, 26, 44, .96));
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* For glow-cards the animated ring is the visible border; avoid double-outline. */
.card.glow-card{
  border-color: transparent;
}

a{ color: #8ab4ff; }

textarea, select{
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(98, 116, 150, .52);
  background: linear-gradient(180deg, rgba(14, 20, 33, .96), rgba(10, 15, 25, .96));
  color: #e5f0ff;
  font-family: 'Inter', system-ui, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .18s ease, box-shadow .18s ease;
}

select{
  cursor: pointer;
}

select:hover{
  border-color: rgba(138, 180, 255, .48);
  box-shadow: 0 0 0 1px rgba(138, 180, 255, .14);
}

select:focus-visible{
  outline: 2px solid rgba(63, 157, 255, .80);
  outline-offset: 3px;
  border-color: rgba(138, 180, 255, .56);
}

textarea:focus-visible, select:focus-visible{
  outline: 2px solid rgba(63, 157, 255, .80);
  outline-offset: 3px;
}

label{
  display: block;
  font-family: 'Inter', system-ui, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .005em;
  opacity: 0.85;
  margin-top: 8px;
}

button{
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #2b2b2f;
  background: #1a1a20;
  color: #eaeaea;
  cursor: pointer;
}

.row{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

/* ── Scroll-Performance ────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}