/* =============================================================
   ELG – App Styles
   Baut auf colors_and_type.css (ÜSTRA Design Tokens) auf.
   ============================================================= */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
img, svg { display: block; }

/* ---------- LOGIN-SEITE ---------- */
.login-page {
    background: var(--mist);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--sp-3);
}

.login-wrap {
    width: 100%;
    max-width: 440px;
}

.login-header {
    text-align: center;
    margin-bottom: var(--sp-4);
}

.login-logo {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-56);
    font-weight: var(--fw-display);
    letter-spacing: var(--tr-tight);
    color: var(--ink);
    line-height: 1;
    margin-bottom: var(--sp-1);
}

.login-header .eyebrow {
    margin: 0;
    font-size: var(--fs-14);
}

.login-card {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-top: 4px solid var(--uestra-green);
    padding: var(--sp-5);
}

.login-card h1 {
    font-size: var(--fs-32);
    margin-bottom: var(--sp-4);
}

.login-intro {
    margin-top: calc(-1 * var(--sp-2));
    margin-bottom: var(--sp-4);
    color: var(--ink-2);
    font-size: var(--fs-14);
}

.login-footer {
    text-align: center;
    margin-top: var(--sp-3);
}

/* ---------- FORMULARE ---------- */
.form-group {
    margin-bottom: var(--sp-3);
}

.form-group label {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-14);
    margin-bottom: var(--sp-1);
    color: var(--ink-2);
}

.form-hint {
    display: block;
    font-size: var(--fs-12);
    color: var(--ink-3);
    margin-top: 6px;
}

/* Input mit optionalem Toggle-Button */
.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrap input {
    flex: 1;
    padding-right: 48px; /* Platz für Toggle-Button */
}

.pw-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--ink-3);
    line-height: 0;
    transition: color var(--t-fast) var(--easing);
}

.pw-toggle:hover { color: var(--ink); }

/* Alle Text-Inputs (form-group-Kontext) */
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"],
.form-group textarea,
.form-group select {
    display: block;
    width: 100%;
    padding: 12px var(--sp-2);
    font-family: var(--font-body);
    font-size: var(--fs-17);
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    outline: none;
    transition: border-color var(--t-fast) var(--easing),
                box-shadow    var(--t-fast) var(--easing);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--uestra-green-soft);
}

.form-group textarea { resize: vertical; min-height: 80px; }

/* ---------- ALERTS ---------- */
.alert {
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    border-left: 4px solid;
    font-size: var(--fs-14);
    line-height: var(--lh-normal);
}

.alert--error {
    background: #FEF2F0;
    border-color: var(--error);
    color: #8B1E16;
}

.alert--success {
    background: var(--uestra-green-soft);
    border-color: var(--uestra-green);
    color: var(--ink);
}

/* ---------- BUTTON-VARIANTEN ---------- */
.btn--full {
    width: 100%;
    justify-content: center;
    margin-top: var(--sp-2);
}

/* ---------- SEITEN-LAYOUT (App nach Login) ---------- */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    background: var(--paper);
    box-shadow: var(--shadow-header);
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.site-logo {
    font-family: var(--font-display);
    font-size: var(--fs-24);
    font-weight: var(--fw-display);
    letter-spacing: var(--tr-tight);
    color: var(--ink);
}

.site-logo--link {
    text-decoration: none;
    border-bottom: 3px solid var(--uestra-green);
    padding-bottom: 2px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.site-nav .user-name {
    font-size: var(--fs-14);
    color: var(--ink-2);
}

.btn--ghost {
    font-size: var(--fs-14);
    gap: var(--sp-1);
}

/* Hauptinhalt */
.site-main {
    flex: 1;
    padding: var(--sp-7) 0;
}

/* Footer */
.site-footer {
    background: var(--mist);
    border-top: 1px solid var(--hairline);
    padding: var(--sp-3) 0;
    text-align: center;
}

/* ---------- STEP-INDICATOR ---------- */
.step-bar {
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    padding: var(--sp-3) 0;
}

.step-list {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
}

.step-item {
    flex: 1;
    min-width: 72px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Verbindungslinie zwischen den Schritten */
.step-item + .step-item::before {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(-50% + 16px);
    right: calc(50% + 16px);
    height: 1px;
    background: var(--hairline);
}

.step-item.completed + .step-item::before {
    background: var(--uestra-green);
}

.step-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    text-decoration: none;
    color: inherit;
}

a.step-inner:hover .step-label { text-decoration-color: var(--uestra-green); }

/* Nummern-Box */
.step-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-14);
    background: var(--paper);
    border: 2px solid var(--hairline);
    color: var(--ink-3);
    position: relative;
    z-index: 1;
    transition: background var(--t-fast) var(--easing),
                border-color var(--t-fast) var(--easing),
                color var(--t-fast) var(--easing);
}

.step-item.completed .step-num {
    background: var(--uestra-green);
    border-color: var(--uestra-green);
    color: var(--paper);
}

.step-item.active .step-num {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* Label */
.step-label {
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    color: var(--ink-3);
    white-space: nowrap;
    text-align: center;
}

.step-item.completed .step-label { color: var(--ink-2); }

.step-item.active .step-label {
    color: var(--ink);
    font-weight: var(--fw-bold);
    border-bottom: 2px solid var(--uestra-green);
}

/* ---------- STEP-CONTENT & NAVIGATION ---------- */
.step-content {
    padding: var(--sp-6) 0 var(--sp-4);
}

.step-placeholder {
    border: 1px dashed var(--hairline);
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    background: var(--mist);
}

.step-placeholder .eyebrow { margin-bottom: var(--sp-1); }
.step-placeholder h2 { margin-bottom: var(--sp-2); }
.step-placeholder p  { margin: 0; color: var(--ink-2); font-size: var(--fs-14); }

.step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-4) 0 var(--sp-6);
    border-top: 1px solid var(--hairline);
}

.step-nav__back { gap: var(--sp-1); }
.step-nav__next { gap: var(--sp-1); }

/* ---------- DASHBOARD ----------*/
.dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
}

.dashboard-head h2 { margin: 0; }

/* Leer-Zustand */
.empty-state {
    border: 1px solid var(--hairline);
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--ink-2);
}

.empty-state__icon {
    margin: 0 auto var(--sp-3);
    color: var(--hairline);
    width: fit-content;
}

.empty-state h3 {
    font-size: var(--fs-20);
    margin-bottom: var(--sp-2);
    color: var(--ink-2);
}

.empty-state p {
    font-size: var(--fs-14);
    margin: 0;
    color: var(--ink-3);
}

/* Projektkarten */
.project-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.project-card {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--hairline);
    background: var(--paper);
    transition: border-color var(--t-fast) var(--easing);
}

.project-card:hover { border-color: var(--ink); }

.project-card__link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    text-decoration: none;
    color: inherit;
    gap: var(--sp-3);
}

.project-card__body { display: flex; flex-direction: column; gap: var(--sp-1); }

.project-card__title {
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
    color: var(--ink);
    margin: 0;
}

.project-card:hover .project-card__title {
    text-decoration: underline;
    text-decoration-color: var(--uestra-green);
    text-decoration-thickness: 2px;
}

.project-card__meta {
    font-size: var(--fs-14);
    color: var(--ink-3);
    margin: 0;
}

.project-card__arrow { color: var(--ink-3); flex-shrink: 0; }

.project-card__delete {
    display: flex;
    align-items: center;
    border-left: 1px solid var(--hairline);
    padding: 0 var(--sp-2);
}

.btn--icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: var(--sp-1);
    cursor: pointer;
    color: var(--ink-3);
    transition: color var(--t-fast) var(--easing);
}

.btn--icon-only:hover { color: var(--error); }

/* ---------- FORMULAR-ABSCHNITTE ---------- */
fieldset { border: 0; padding: 0; margin: 0; }
fieldset legend {
    display: block;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-14);
    margin-bottom: var(--sp-2);
    color: var(--ink-2);
}

.form-section { margin-bottom: var(--sp-6); }

.form-section__title {
    font-size: var(--fs-20);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--hairline);
}

.form-section__title--optional { color: var(--ink-2); }

.form-group--nested {
    margin-top: var(--sp-2);
    margin-left: var(--sp-5);
}

.form-required { color: var(--uestra-green); }
.form-optional { font-size: var(--fs-14); font-weight: var(--fw-regular); color: var(--ink-3); }
.hidden { display: none !important; }

.form-actions {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--hairline);
}

/* ---------- CHECKBOXEN ---------- */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    font-size: var(--fs-17);
    user-select: none;
    padding: var(--sp-05) 0;
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--hairline);
    background: var(--paper);
    cursor: pointer;
    position: relative;
    transition: background var(--t-fast) var(--easing),
                border-color var(--t-fast) var(--easing);
}

.checkbox-label input[type="checkbox"]:checked {
    background: var(--uestra-green);
    border-color: var(--uestra-green);
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 8px;
    height: 12px;
    border: 2.5px solid var(--paper);
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
}

.checkbox-label input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ---------- RADIO-KARTEN (Modultyp) ---------- */
.radio-group {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.radio-card {
    flex: 1;
    min-width: 140px;
    display: flex;
    cursor: pointer;
    border: 2px solid var(--hairline);
    padding: var(--sp-3);
    transition: border-color var(--t-fast) var(--easing);
    position: relative;
    user-select: none;
}

.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-card:hover { border-color: var(--ink-2); }

.radio-card--checked,
.radio-card:has(input:checked) {
    border-color: var(--ink);
    border-bottom-color: var(--uestra-green);
    border-bottom-width: 3px;
}

.radio-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.radio-card__body strong {
    font-family: var(--font-display);
    font-size: var(--fs-17);
    font-weight: var(--fw-bold);
    color: var(--ink);
}

.radio-card__body span { font-size: var(--fs-14); color: var(--ink-2); }
.radio-card__body small { font-size: var(--fs-12); color: var(--ink-3); }

/* ---------- TOGGLE-SCHALTER ---------- */
.toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
}

.toggle-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toggle-label-text {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-17);
}

.toggle {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 2px;
}

.toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle__track {
    display: block;
    width: 48px;
    height: 26px;
    background: var(--hairline);
    cursor: pointer;
    position: relative;
    transition: background var(--t-base) var(--easing);
}

.toggle__track::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    background: var(--paper);
    transition: transform var(--t-base) var(--easing);
}

.toggle input:checked + .toggle__track { background: var(--uestra-green); }
.toggle input:checked + .toggle__track::after { transform: translateX(22px); }
.toggle input:focus-visible + .toggle__track {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ---------- DATEI-UPLOAD ---------- */
.file-drop {
    position: relative;
    border: 2px dashed var(--hairline);
    transition: border-color var(--t-fast) var(--easing),
                background    var(--t-fast) var(--easing);
    margin-top: var(--sp-2);
}

.file-drop--dragover,
.file-drop:focus-within {
    border-color: var(--uestra-green);
    background: var(--uestra-green-soft);
}

.file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.file-drop__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-4) var(--sp-3);
    text-align: center;
    color: var(--ink-3);
    gap: var(--sp-1);
    pointer-events: none;
}

.file-drop__inner p { margin: 0; font-size: var(--fs-14); color: var(--ink-2); }
.file-drop__inner small { font-size: var(--fs-12); }
.file-drop__link { color: var(--ink); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--uestra-green); }

.file-list {
    list-style: none;
    padding: var(--sp-2) var(--sp-3);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.file-list:empty { display: none; }

.file-list li {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-14);
    padding: var(--sp-1) var(--sp-2);
    background: var(--paper);
    border: 1px solid var(--hairline);
}

.file-list li small { margin-left: auto; color: var(--ink-3); }

.file-list--new li { background: var(--uestra-green-soft); border-color: var(--uestra-green); }

/* ---------- STEP 2: SKRIPT-GENERIERUNG ---------- */

/* Eingaben-Zusammenfassung oben */
.input-summary {
    padding: var(--sp-3) var(--sp-4);
    background: var(--mist);
    border: 1px solid var(--hairline);
    margin-bottom: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.input-summary__title { font-size: var(--fs-24); margin: 0; }
.input-summary__meta  { font-size: var(--fs-14); color: var(--ink-2); margin: 0; }

/* Aufforderung zur Generierung */
.generate-prompt {
    border: 1px solid var(--hairline);
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    margin-bottom: var(--sp-4);
}

.generate-prompt__icon {
    margin: 0 auto var(--sp-3);
    color: var(--uestra-green);
    width: fit-content;
}

.generate-prompt h3 { font-size: var(--fs-24); margin-bottom: var(--sp-2); }
.generate-prompt p  { font-size: var(--fs-14); color: var(--ink-2); margin: 0; }

/* Generieren-Button (groß, mittig) */
#btn-generate-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-5);
}

.btn--generate {
    gap: var(--sp-2);
    padding: 18px 32px;
    font-size: var(--fs-20);
}

/* Lade-Spinner */
.generate-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-7) var(--sp-4);
    gap: var(--sp-2);
    border: 1px solid var(--hairline);
    margin-bottom: var(--sp-4);
    text-align: center;
}

.generate-loading p     { margin: 0; font-size: var(--fs-17); color: var(--ink-2); }
.generate-loading small { color: var(--ink-3); }

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--hairline);
    border-top-color: var(--uestra-green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Skriptanzeige */
.script-display {
    border: 1px solid var(--hairline);
    margin-bottom: var(--sp-5);
}

.script-display__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--hairline);
    background: var(--mist);
}

.btn--sm { font-size: var(--fs-14); padding: 8px 14px; gap: var(--sp-1); }

.script-display__body {
    padding: var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-17);
    line-height: 1.6;
    word-break: break-word;
    max-height: 600px;
    overflow-y: auto;
}

/* ---------- STEP 3: SKRIPT-EDITOR ---------- */

.form-label { display: block; font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: var(--sp-1); }

.script-editor-wrap { margin-bottom: var(--sp-4); }

.script-editor {
    display: block;
    width: 100%;
    min-height: 380px;
    padding: var(--sp-3);
    font-family: var(--font-body);
    font-size: var(--fs-17);
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    resize: vertical;
    outline: none;
    transition: border-color var(--t-fast) var(--easing),
                box-shadow    var(--t-fast) var(--easing);
}
.script-editor:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--uestra-green-soft);
}

.refine-box {
    background: var(--mist);
    border: 1px solid var(--hairline);
    padding: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.refine-row {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
}

.refine-input {
    flex: 1;
    padding: 10px var(--sp-2);
    font-family: var(--font-body);
    font-size: var(--fs-17);
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    resize: none;
    outline: none;
    transition: border-color var(--t-fast) var(--easing),
                box-shadow    var(--t-fast) var(--easing);
}
.refine-input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--uestra-green-soft);
}

.refine-btn { white-space: nowrap; align-self: flex-end; }

/* ---------- STEP 7: EXPORT ---------- */

.export-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    background: var(--mist);
    border: 1px solid var(--hairline);
    margin-bottom: var(--sp-5);
}

.export-box__icon {
    color: var(--uestra-green);
    margin-bottom: var(--sp-3);
}

.export-box h3 {
    font-family: var(--font-display);
    font-size: var(--fs-22);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--sp-2);
}

.export-box p {
    color: var(--ink-2);
    max-width: 480px;
    margin: 0 0 var(--sp-4);
}

.export-btn { gap: var(--sp-2); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px) {
    .login-card  { padding: var(--sp-4) var(--sp-3); }
    .login-logo  { font-size: var(--fs-40); }
    .dashboard-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
    .site-nav .user-name { display: none; }
    .step-label  { font-size: 11px; }
    .step-num    { width: 24px; height: 24px; font-size: 12px; }
    .project-card__link { padding: var(--sp-2) var(--sp-3); }
}