/* ---------- Farbvariablen ---------- */
:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --primary: #0061ff;
  --primary-dark: #0046b3;
  --secondary: #6c757d;
  --danger: #dc3545;
  --success: #28a745;
  --text: #212529;
  --shadow: 0 2px 8px rgba(0,0,0,.08);
  --radius: 12px;
  --transition: .18s ease;
}

/* ---------- Grundlayout ---------- */
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:system-ui,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
h1,h2,h3 { margin:0 0 .8rem; }

/* ---------- Header & Back ---------- */
.site-header { text-align:center; padding:1.2rem .5rem; }
.back-button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;padding:.65rem 1.4rem;
  border-radius:var(--radius);text-decoration:none;font-weight:600;
  box-shadow:var(--shadow);transition:var(--transition);
}
.back-button:hover{background:var(--primary-dark);}

/* ---------- Fortschrittsbalken ---------- */
#progress{
  position:sticky;top:0;height:5px;background:var(--primary);
  width:0%;transition:width .4s ease;z-index:999;
}

/* ---------- Tabbed Navigation ---------- */
.tab-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.tab-btn{
  padding:.7rem 1.2rem;border:none;border-radius:var(--radius) var(--radius) 0 0;
  background:var(--surface);box-shadow:var(--shadow);
  cursor:pointer;font-weight:600;transition:var(--transition);
}
.tab-btn[aria-selected="true"]{background:var(--primary);color:#fff;}
.tab-btn:focus-visible{outline:2px solid var(--primary-dark);}

/* ---------- Grid & Karten ---------- */
.container{padding:0 1rem 2rem;}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));}
.card{
  background:var(--surface);padding:1.4rem;border-radius:var(--radius);box-shadow:var(--shadow);
}

/* ---------- Formular ---------- */
fieldset{border:none;padding:0;margin:0 0 1rem;}
legend{font-weight:700;margin-bottom:.6rem;}
.form-control{margin-bottom:.9rem;}
label{
  display:flex;align-items:center;font-weight:600;margin-bottom:.35rem;
}
.info-btn{
  background:none;border:none;cursor:pointer;
  font-size:1.1em;margin-left:.4rem;color:var(--primary);
}
input[type="checkbox"]{margin-right:.5rem;transform:scale(1.2);}
select,textarea,input[type="number"],input[type="text"]{
  width:100%;padding:.65rem;border:1px solid #ccc;border-radius:6px;
  background:#fcfcfc;font-size:1rem;transition:border-color var(--transition);
}
select:focus,textarea:focus,input:focus{border-color:var(--primary);outline:none;}
textarea{resize:vertical;min-height:90px;font-family:inherit;}

/* ---------- Action Buttons ---------- */
.actions{
  position:sticky;bottom:0;display:flex;gap:1rem;flex-wrap:wrap;
  padding:1rem;background:var(--surface);box-shadow:0 -2px 6px rgba(0,0,0,.08);
}
.actions button{
  flex:1 1 160px;padding:.8rem;border:none;border-radius:var(--radius);
  font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition) transform .1s;
}
.primary{background:var(--primary);color:#fff;}
.primary:hover{background:var(--primary-dark);}
.secondary{background:var(--secondary);color:#fff;}
.secondary:hover{background:#545b62;}
.danger{background:var(--danger);color:#fff;}
.danger:hover{background:#b02a37;}
.actions button:active{transform:translateY(2px);}

/* ---------- Copy-Buttons ---------- */
.copy-btn{
  background:var(--success);color:#fff;border:none;border-radius:6px;
  padding:.6rem .9rem;font-size:.95rem;font-weight:600;cursor:pointer;
  transition:var(--transition);
}
.copy-btn:disabled{opacity:.55;cursor:not-allowed;}
.copy-btn:hover:not(:disabled){background:#1e7e34;}

/* ---------- Code-Ausgabe ---------- */
pre{
  background:#272822;color:#f8f8f2;padding:1rem;border-radius:var(--radius);
  max-height:260px;overflow:auto;white-space:pre-wrap;font-size:.9rem;
  font-family:"Fira Mono","Consolas","Courier New",monospace;
}
.output-block{margin-bottom:1.4rem;}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:20px;right:20px;background:#333;color:#fff;
  padding:.7rem 1rem;border-radius:6px;z-index:1000;opacity:0;animation:fade 2s forwards;
}
@keyframes fade{0%{opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{opacity:0;}}

/* ---------- Responsive ---------- */
@media(max-width:600px){
  .tab-nav{gap:.2rem;}
  .tab-btn{padding:.55rem .8rem;font-size:.92rem;}
  .actions{padding:.8rem;}
}

/* === UX Enhancements 2025-07-07 === */
.scene-description textarea{
  border:2px solid var(--primary);
  background:#fffdf5;
  font-size:1.05rem;
  font-weight:500;
}
.tag-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0;}
.tag-btn{
  border:1px solid var(--primary);
  background:transparent;
  color:var(--primary);
  padding:.45rem .9rem;
  border-radius:var(--radius);
  cursor:pointer;
  font-size:.9rem;
  transition:var(--transition);
}
.tag-btn:hover{background:var(--primary-dark);color:#fff;}
.tag-btn.active{background:var(--primary);color:#fff;}
.sug-list{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem;}
.sug-btn{
  background:var(--surface);
  border:1px dashed var(--primary);
  padding:.4rem .6rem;
  border-radius:var(--radius);
  font-size:.85rem;
  cursor:pointer;
  text-align:left;
  transition:var(--transition);
}
.sug-btn:hover{background:var(--primary);color:#fff;}