/* ===================================================================
   Bildkonverter im reussMEDIA-Stil.

   Diese Datei wird NACH stil-klassisch.css geladen und legt nur das
   Aussehen darüber: Schriften, Farben, Kanten, Abstände. Das Gerüst
   (Raster, Zuschneide-Rahmen, Griffe) bleibt, wie es ist – so kann
   nichts kaputtgehen, was vorher funktioniert hat.
   Blau ist immer #164D9D.
   =================================================================== */

@font-face{font-family:'Nunito';src:url('../../fonts/woff2/nunito-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito';src:url('../../fonts/woff2/nunito-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Nunito';src:url('../../fonts/woff2/nunito-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../../fonts/woff2/playfair-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root {
    --primary: #164D9D;
    --primary-dark: #0f3870;
    --primary-light: #4a7bc4;
    --background: #f5f7fa;
    --text-color: #16243b;
    --text-light: #666666;
    --card-bg: #ffffff;
    --linie: #e3e6ec;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
    --transition: all .18s ease;
}

body { background: var(--background); font-size: 1.02rem; }

/* ---------- Kopfzeile ---------- */
.header {
    background: #fff;
    border-bottom: 1px solid var(--linie);
    box-shadow: none;
    padding: 3rem 0 2.4rem;
    text-align: center;
}
.kopf-logo { display: block; height: 2.6rem; width: auto; margin: 0 auto 1rem; }
.header .marke {
    font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--primary); margin: 0 0 .5rem;
}
.header h1 {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.4rem; font-weight: 600; line-height: 1.15;
    color: var(--text-color); margin: 0 0 .7rem;
}
.header-subtitle {
    background: none; color: var(--text-light); padding: 0; margin: 0;
}
.header-subtitle p { font-size: 1.02rem; max-width: 40rem; margin: 0 auto; opacity: 1; }

/* ---------- Karten ---------- */
.main-content { padding: 2.6rem 0 4rem; }
.section {
    background: var(--card-bg);
    border: 1px solid var(--linie);
    border-radius: .6rem;
    box-shadow: none;
    padding: 1.6rem;
    margin-bottom: 1.2rem;
}
.section:hover { box-shadow: none; transform: none; }
.section h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem; font-weight: 600; color: var(--text-color);
    border: 0; padding: 0; margin: 0 0 1rem;
}
.section h2::after { display: none; }
.sections-container { gap: 1.2rem; }
@media (min-width: 1200px) {
    .section { padding: 1.8rem; margin-bottom: 1.2rem; }
    .section h2 { font-size: 1.25rem; margin-bottom: 1rem; }
}

/* ---------- Felder ---------- */
label { font-size: .92rem; font-weight: 600; color: var(--text-color); margin-bottom: .35rem; }
input[type="text"], input[type="number"], select, textarea {
    width: 100%; padding: .55rem .65rem; font: inherit; font-size: .95rem;
    color: var(--text-color); background: #fff;
    border: 1px solid #c9cfda; border-radius: .35rem; box-shadow: none;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(22, 77, 157, .12);
}
.form-group { margin-bottom: 1rem; }
.form-row { gap: 1rem; }

/* ---------- Knöpfe ---------- */
.btn {
    background: var(--primary); color: #fff;
    border: 1px solid var(--primary);
    padding: .6rem 1.3rem; border-radius: 2rem;
    font-size: .95rem; font-weight: 700; box-shadow: none;
    margin-right: .6rem; margin-bottom: .6rem;
}
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: none; box-shadow: none; }
.btn:disabled { background: #e9edf3; border-color: #e0e5ec; color: #9aa3b2; opacity: 1; }
.btn-secondary { background: #fff; color: var(--primary); border: 1px solid var(--primary); box-shadow: none; }
.btn-secondary:hover { background: #eef2f9; color: var(--primary-dark); box-shadow: none; }
.btn-secondary:disabled { background: #f6f7f9; border-color: #e0e5ec; color: #9aa3b2; box-shadow: none; }

/* ---------- Dateien hineinziehen ---------- */
.upload-area {
    background: #fbfcfe; border: 2px dashed #c9cfda; border-radius: .5rem;
    padding: 2.2rem 1.4rem; transition: var(--transition);
}
.upload-area:hover, .upload-area.dragover {
    border-color: var(--primary); background: #f2f6fc; transform: none; box-shadow: none;
}
.upload-icon { font-size: 2.2rem; }
.upload-area p { color: var(--text-light); }
.upload-area p strong { color: var(--text-color); }

/* ---------- Bilderliste ---------- */
.image-preview { gap: 1rem; margin-top: 1.2rem; }
.image-item {
    border: 1px solid var(--linie); border-radius: .5rem; box-shadow: none;
}
.image-item:hover { transform: none; box-shadow: 0 .4rem 1.4rem rgba(22, 77, 157, .1); border-color: var(--primary); }
.image-item img { height: 11rem; }
.image-info { padding: .9rem 1rem; font-size: .88rem; }
.remove-btn { background: #c2553b; border-radius: 50%; box-shadow: none; }

/* ---------- Fortschritt ---------- */
.progress-bar { background: #e9edf3; border-radius: 2rem; }
.progress-fill { background: var(--primary); }

/* ---------- Hinweise ---------- */
.crop-status {
    background: #f2f6fc; border-left: 3px solid var(--primary);
    border-radius: .35rem; color: var(--text-color); font-weight: 400;
    padding: .7rem .9rem; font-size: .92rem;
}
.crop-status.crop-required { background: #fdf4ec; border-left-color: #c4780d; }

/* ---------- Fenster zum Zuschneiden ---------- */
.crop-content {
    background: #fff; border: 1px solid var(--linie);
    border-radius: .6rem; box-shadow: 0 1.2rem 3rem rgba(22, 36, 59, .22);
}
.crop-content h2 { font-family: var(--font-heading); font-weight: 600; }
.crop-overlay { border: 2px dashed var(--primary); background: rgba(22, 77, 157, .1); }
.resize-handle { background: var(--primary); }

/* ---------- Hinweise unter den Feldern, graue Bereiche ---------- */
.feldhinweis { display: block; margin-top: .3rem; font-size: .82rem; color: #8a8a8a; }
.nochnicht { opacity: .55; pointer-events: none; }
.wartehinweis { font-size: .9rem; color: #8a8a8a; margin: 0 0 .8rem; }

/* Im Rahmen einer anderen Seite braucht es die eigene Kopfzeile nicht. */
.imrahmen .header { display: none; }
.imrahmen .main-content { padding-top: 0; }