:root {
  --red: #E46952;
  --blue: #55848A;
  --blue-2: #8FBBC0;
  --yellow: #DFAE2A;
  --bg: linear-gradient(180deg, var(--blue) 0%, var(--blue-2) 100%);
  --ink: #10353a;
  --ink-2: #1f4f55;
  --white: #ffffff;
  --shadow: 0 8px rgba(0,0,0,.15);
  --radius: 16px;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--bg);
  background-attachment: fixed; /* Verlauf bleibt immer gleich lang */
  background-size: cover;       /* über gesamte Fläche strecken */
}

body {
  min-height: 100%;
  font-family: "Comic Neue", "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: transparent; /* Verlauf nur im html, nicht im Body wiederholen */
  color: #fff;
  margin: 0;
}

.container { max-width: 980px; margin: 0 auto; padding: 1rem; }
.site-header { text-align: center; padding: 1.5rem 1rem .5rem; }
.site-header h1 { color: var(--yellow); margin: 0; text-shadow: 2px 2px rgba(0,0,0,.2); font-weight: 800; }
.subtitle { margin: .5rem 0 1rem; opacity: .95; }

/* Progress (Wizard) */
.progress {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
  gap: .5rem; list-style: none; padding: 0; margin: 0 0 1rem;
}
.progress li {
  background: rgba(0,0,0,.15); padding: .6rem .8rem; border-radius: .75rem; text-align: center; font-weight: 800; opacity: .6;
}
.progress li.active { background: rgba(0,0,0,.25); opacity: 1; outline: 3px dashed rgba(0,0,0,.2); }

/* Step wrapper */
.step-root { background: rgba(255,255,255,.12); border-radius: var(--radius); padding: 1rem; min-height: 360px; box-shadow: var(--shadow); }

/* Forms */
label { display: block; margin: .5rem 0 .25rem; font-weight: 700; }
input[type="text"], textarea, select, input[type="number"], input[type="range"], input[type="color"]{
  width: 100%; padding: .75rem; border-radius: .75rem;
  border: 2px solid var(--yellow); background: #fff; color: var(--ink);
}
input[type="range"]{ padding: .4rem; }
input[type="color"]{ padding: .2rem; height: 2.5rem; }
textarea{ min-height: 120px; }

/* Buttons */
.btn { background: var(--red); border: 0; color: #fff; border-radius: 1rem; padding: .7rem 1.25rem; font-size: 1.1rem; box-shadow: 0 4px rgba(0,0,0,.2); cursor: pointer; font-weight: 800; }
.btn:disabled { background: #aaa; box-shadow: none; cursor: not-allowed; }
.btn:hover:not(:disabled) { transform: translateY(-1px) scale(1.02); }
.btn:active{ transform: translateY(0); }
.btn-accent { background: #ff806b; }
.btn-cta { background: #2ECC71; }
.btn-ghost { background: transparent; color: #fff; border: 2px dashed rgba(255,255,255,.5); }

.controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.help { font-size: .95rem; opacity: .95; }
.small { font-size: .9rem; opacity: .9; }
.row { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px){ .row-2 { grid-template-columns: repeat(2,1fr); } }
.hidden { display: none !important; }

.card { background: rgba(0,0,0,.12); border-radius: var(--radius); padding: .9rem; }
.status { min-height: 1.5rem; margin-top: .5rem; }
.status-ok { color: var(--yellow); }
.status-err { color: #fff; background: rgba(255,0,0,.35); padding: .35rem .6rem; border-radius: .5rem; display: inline-block; }

/* Media */
audio, canvas, img.preview { width: 100%; max-width: 520px; border-radius: 1rem; display: block; margin: .5rem auto; }

/* Toolbar (Zeichenfläche) */
.toolbar{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.toolbar .muted{ opacity:.85; font-weight:700; }
.canvas-wrap{ display:block; }

/* Immer sichtbare Farbpalette */
.palette{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.palette .swatch{ width:24px; height:24px; border-radius:4px; border:1px solid rgba(0,0,0,.25); cursor:pointer; }

/* Themenraster */
.topics{ display:grid; gap:1rem; }
@media (min-width:720px){ .topics{ grid-template-columns: 1fr; } }
.topic.card > p{ margin:.25rem 0 .5rem; font-weight:800; }

/* Tabs (kinderfreundlich, projektfarben) */
.tab-nav{ display:flex; gap:.5rem; background: rgba(255,255,255,.14); padding:.5rem; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1rem; }
.tab-nav button{ flex:1; position:relative; border:0; cursor:pointer; background: transparent; color:#fff; font-weight:900; font-size:1.2rem; padding:.8rem; border-radius: .9rem; transition: transform .15s ease, color .2s ease; }
.tab-nav button:hover{ transform: translateY(-1px); }
.tab-nav button::after{ content:""; position:absolute; left:12%; right:12%; bottom:6px; height:4px; border-radius:4px; background: transparent; transition: background .25s ease; }
.tab-nav button.is-active{ color: var(--yellow); background: rgba(0,0,0,.10); outline: 3px dashed rgba(0,0,0,.18); }
.tab-nav button.is-active::after{ background: var(--yellow); }

.tab-content{ background: rgba(255,255,255,.10); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }

/* Wizard-Navigation unten */
.wizard-nav{ display:flex; justify-content:space-between; gap:.75rem; margin-top:1rem;margin-bottom:1rem; }
.wizard-nav .left{ display:flex; gap:.5rem; }
.wizard-nav .right{ display:flex; gap:.5rem; }

/* Fokus-Styles für Tastatur-Nutzer */
:focus-visible{ outline: 3px dashed var(--yellow); outline-offset: 3px; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* Kleinere Hilfs-Utilities */
.muted{ opacity:.85; }
.center{ text-align:center; }
.mt-1{ margin-top:.5rem; } .mt-2{ margin-top:1rem; } .mt-3{ margin-top:1.5rem; }
.grid-auto-2{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: .75rem; }

/* Bildvorschau-Gitter im Images-Step */
.topic .card{ background: rgba(0,0,0,.08); }
.topic .card img{ display:block; width:100%; border-radius: .6rem; }
.topic .card .actions{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; }


/* --- Button/Control Reset (Firefox & Co.) ------------------- */
.btn, .btn-ghost, .btn-accent, .wizard-nav button, .tab-nav button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: inherit;
  font-weight:bold;
  
}
.btn[disabled],.btn[disabled]:hover{
     filter: grayscale(100%)!important;
     
}

/* --- Toolbar-Feinschliff (Images) --------------------------- */
.toolbar input[type="color"] {
  width: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 8px;
  display: inline-block;
}

.toolbar input[type="range"] {
  width: clamp(220px, 60%, 520px);
}

.toolbar .btn,
.actions .btn,
.controls .btn {
  /* sorge dafür, dass Theme-Buttons sich visuell abheben */
  padding: .55rem 1rem;
}

/* Farb-Swatches etwas größer & weich */
.palette .swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.25);
}

/* Karten-Header (Titel links, Umschalter rechts) */
.topic .controls {
  align-items: center;
}


/* DRAW */
/* ========= Malen-Tab (scoped) ========= */
.images-draw {
  --md-gap: 10px;
  --lg-gap: 14px;
  --rounded: 16px;
  --shadow: 0 4px 14px rgba(0,0,0,0.12);
  --soft: rgba(255,255,255,0.85);
}

/* Kartenrahmen nur hier etwas „fluffiger“ */
.images-draw.card,
.images-draw .card {
  border-radius: var(--rounded);
  box-shadow: var(--shadow);
  backdrop-filter: saturate(120%) blur(2px);
}

/* Toolbars: klare Zeilen, viel Luft, kindgerecht große Klickflächen */
.images-draw .toolbar {
  display: flex;
  align-items: center;
  gap: var(--md-gap);
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.6);
}

/* Zeilenabstände */
.images-draw .row2 { margin-top: var(--md-gap); }
.images-draw .row3 { margin-top: var(--md-gap); }
.images-draw .row4 { margin-top: var(--md-gap); }
.images-draw .row5 { margin-top: var(--md-gap); }

/* Buttons: runder, größer, mit sanfter Animation */
.images-draw .btn {
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600;
  transform: translateZ(0); /* glatter hover */
  transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.2s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}
.images-draw .btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.10);
}

/* Primär-/Akzent-Buttons klarer */
.images-draw .btn-accent {
  background: var(--yellow);
  color: #222;
}
.images-draw .btn-accent:hover { filter: brightness(1.05); }

/* Ghost-Buttons dezenter */
.images-draw .btn.btn-ghost {
  background: rgba(255,255,255,0.55);
  border: 2px dashed rgba(0,0,0,0.12);
}

/* „Zurück/Nochmal/Leeren“ optisch als Werkzeugleiste */
.images-draw .row2 .btn {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.08);
}

/* Slider + Farbauswahl größer & griffig */
.images-draw .row3 input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 220px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0.18));
  outline: none;
}
.images-draw .row3 input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(0,0,0,0.5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.images-draw .row3 input[type='color'] {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 3px solid rgba(0,0,0,0.2);
  padding: 0;
  overflow: hidden;
}

/* Palette: runde Farbpastillen + dezent hervorgehoben */
.images-draw .palette { padding: 4px 0 2px; }
.images-draw .palette .btn {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.2);
  padding: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Pinsel/Radierer/Größe Zeile etwas größer beschriften */
.images-draw .row5 .muted {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.8;
}

/* Canvas-Rahmen & Hintergrund */
.images-draw .drawarea {
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.images-draw .drawarea:focus { outline: none; }

/* Thumbnails hübscher */
.images-draw .palette + .topics, /* fallback falls Struktur anders wäre */ 
.images-draw .thumbs { margin-top: var(--lg-gap); }
.images-draw img {
  image-rendering: auto;
}

/* Galerie (Thumbnails) */
.images-draw .muted { color: rgba(0,0,0,0.7); }
.images-draw .card .muted { padding-left: 2px; }

/* Kleine Hilfetexte unter Buttons via Tooltip (nur Optik, keine Logik) */
.images-draw .btn[title] {
  position: relative;
}
.images-draw .btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -28px;
  white-space: nowrap;
  background: rgba(0,0,0,0.8);
  color: #fff; font-size: 12px; line-height: 1;
  padding: 6px 8px; border-radius: 8px;
  pointer-events: none;
  z-index: 20;
}
/* --- Kontraststarke Werkzeugleiste (Row 2) --- */
.images-draw .row2 .btn-strong {
  background: #2B3A67;      /* dunkles Blau */
  color: #fff;
  border: 1px solid rgba(0,0,0,0.15);
}
.images-draw .row2 .btn-strong:hover { filter: brightness(1.05); }

.images-draw .row2 .btn-danger {
  background: #D64545;      /* freundliches Rot */
  color: #fff;
  border: 1px solid rgba(0,0,0,0.15);
}
.images-draw .row2 .btn-danger:hover { filter: saturate(1.05) brightness(1.02); }

/* Farbfeld vor Palette (Row 3): größer & klar */
.images-draw .row3 input[type='color'] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 3px solid rgba(0,0,0,0.25);
  padding: 0;
}

/* Row 4: Palette + „Farbe merken“ hinter der Palette */
.images-draw .row4 .palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.images-draw .row4 .btn { /* „Farbe merken“ */
  margin-left: 8px;
}

/* Palette-Pastillen */
.images-draw .palette .btn {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.2);
  padding: 0;
}

/* Row 5: Pinsel / Radierer / Größe (Slider + Anzeige) */
.images-draw .row5 .btn {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.08);
}
.images-draw .row5 input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 220px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
  margin: 0 6px;
}
.images-draw .row5 input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(0,0,0,0.5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.images-draw .row5 .muted {
  font-weight: 600;
  opacity: .85;
}
/* Malen-Tab: Buttons in Row 5 immer dunkle Schriftfarbe */
.images-draw .row5 .btn {
  color: #222;              /* gut lesbar auf hellem Button */
}

/* Falls aktiv (btn-accent), bleibt es ohnehin dunkel */
.images-draw .row5 .btn-accent {
  color: #222;
}

/* Optional: Radierer im inaktiven Zustand leicht grau hinterlegen */
.images-draw .row5 .btn:not(.btn-accent) {
  background: rgba(255,255,255,0.95);
}

#privacy{
    font-size: .8em;
}