/* ======================================================================
   i-video24 – Generator UI (Layout, Komponenten, Overlays)
   Design-Ziele:
   - Klar, kontrastreich, mobilfreundlich
   - Keine Oberkante: UI beginnt pixelgenau oben
   - Moderne, ruhige Typografie
   =================================================================== */

/* --------- Reset / Base --------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

:root{
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #11161c;
  --text: #e6edf3;
  --muted: #8b949e;
  --border: #2b3138;
  --brand: #0A66FF;
  --brand-2:#2f6dff;
  --ok: #23d18b;
  --warn: #ffb020;
  --danger:#ff4d4f;
  --ghost: #263041;

  --radius: 14px;
  --radius-sm: 10px;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.25);
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f8fa;
    --panel: #ffffff;
    --panel-2:#f8fafc;
    --text: #0b0d12;
    --muted:#5b6470;
    --border:#e6e9ef;
    --ghost:#e9eef7;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

/* --------- Layout --------- */
.container{
  width: min(1150px, 92vw);
  margin: 0 auto;
  padding: 18px 12px;
}

.header-row{
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

h1{
  margin: 0;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: .2px;
}

.grid-2{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}

.stack{
  display: grid;
  gap: 14px;
}

.section{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.grid-2-sm{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px){
  .grid-2-sm{ grid-template-columns: 1fr; }
}

.row{
  display: flex;
  align-items: center;
  gap: 12px;
}
.space-between{ justify-content: space-between; }
.grow{ flex: 1; }
.mt-10{ margin-top: 10px; }

/* --------- Header / UI-Lang Switch --------- */
.ui-lang-switch{
  display: flex;
  gap: 8px;
  background: var(--panel);
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.ui-lang-btn{
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.ui-lang-btn[aria-current="true"]{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px rgba(10,102,255,.35);
}

/* --------- Form Controls --------- */
.label{
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

input[type="text"],
input[type="url"],
input[type="number"],
select,
textarea{
  width: 100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea{ resize: vertical; }

input:focus,
select:focus,
textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(10,102,255,.2);
}

.muted{
  color: var(--muted);
  display: inline-block;
  margin-top: 6px;
}

/* Checkbox & Switch */
.checkbox{
  display: flex;
  gap: 10px;
  align-items: center;
}
.checkbox input{ transform: scale(1.15); }

.switch{
  display: flex;
  align-items: center;
  gap: 10px;
}
.switch input{
  appearance: none;
  width: 44px;
  height: 26px;
  background: var(--ghost);
  border: 1px solid var(--border);
  border-radius: 999px;
  position: relative;
  transition: background .2s ease, border-color .2s ease;
  cursor: pointer;
}
.switch input::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  transition: left .2s ease;
}
.switch input:checked{
  background: var(--brand);
  border-color: var(--brand);
}
.switch input:checked::after{ left: 22px; }

/* Status Pill */
.status-pill{
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
}
.status-pill strong{ color: var(--text); }

/* Buttons */
.btn{
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn.primary{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 22px rgba(10,102,255,.28);
}
.btn.primary:hover{ background: var(--brand-2); }

.btn.secondary{
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn.ghost{
  background: transparent;
  color: var(--text);
  border: 1px dashed var(--border);
}

.actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.action-feedback{
  min-height: 22px;
  font-size: 14px;
  color: var(--muted);
}

/* Powered by */
.powered-by{
  margin-top: 8px;
  color: var(--muted);
}

/* Links */
a.link{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.link:hover{ color: var(--brand); }

/* --------- Preview / Video Shell --------- */
.preview{
  background: #000;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Platzhaltertext solange keine URL */
.placeholder{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #cfd5e1;
  background:
    radial-gradient(1200px 600px at 50% -20%, rgba(10,102,255,.12), transparent 60%),
    linear-gradient(to bottom, rgba(255,255,255,.04), rgba(0,0,0,.12));
  text-align: center;
  padding: 16px;
}

/* Video-Shell – Container für echtes Video/Player */
.video-shell{
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #000;
}

/* Zentraler runder Play-CTA */
.play-cta{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  z-index: 20;
}
.play-cta .circle{
  width: clamp(70px, 11vw, 110px);
  height: clamp(70px, 11vw, 110px);
  border-radius: 50%;
  background: rgba(10,102,255,.18);
  border: 2px solid rgba(10,102,255,.65);
  display: grid;
  place-items: center;
  animation: pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 8px rgba(10,102,255,.08);
}
.play-cta .triangle{
  width: 0; height: 0;
  border-left: calc(clamp(70px, 11vw, 110px) * .35) solid #fff;
  border-top:  calc(clamp(70px, 11vw, 110px) * .20) solid transparent;
  border-bottom: calc(clamp(70px, 11vw, 110px) * .20) solid transparent;
  margin-left: 6px;
}
.play-cta .label{
  margin-top: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  animation: pulseText 1.8s ease-in-out infinite;
  text-align: center;
}

@keyframes pulse{
  0%, 100%{ transform: scale(1);   box-shadow: 0 0 0 8px rgba(10,102,255,.08); }
  50%     { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(10,102,255,.12); }
}
@keyframes pulseText{
  0%, 100%{ opacity: .95 }
  50%     { opacity: .65 }
}

/* Sound-CTA (Autoplay) – mittig und auffällig */
.sound-cta{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10,102,255,.22);
  border: 2px solid rgba(10,102,255,.66);
  backdrop-filter: blur(3px);
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  animation: pulse 1.8s ease-in-out infinite;
  cursor: pointer;
}
.sound-cta .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.25);
}

/* Rechtsklick-Badge (Position dynamisch per JS) */
.badge{
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(0,0,0,.4);
  z-index: 30;
}
.badge a{
  color: #fff;
  text-decoration: none;
}
.badge a:hover{ text-decoration: underline; }

/* --------- Footer --------- */
.footer{
  padding-bottom: 28px;
  color: var(--muted);
}
.footer a{ color: var(--text); }
.footer a:hover{ color: var(--brand); }