/**
 * Seite „PDF-Teile zusammenfügen“.
 * Nutzt ausschließlich die Tokens aus /kalkulator/frontend-tokens.css, ist
 * ansonsten aber unabhängig vom Kalkulator-Stylesheet — die Seite soll auch
 * dann funktionieren, wenn am Konfigurator gearbeitet wird.
 *
 * Bewusst app-artig statt Website-artig: Desktop-Werkzeug, das ohne Scrollen
 * auf einen Bildschirm passen soll (wie ein PDF-Programm), kein mobiles Layout.
 */

* { box-sizing: border-box; }

/* Mehrere Elemente unten setzen display per Klasse (flex) — ohne das hier
   gewinnt die Klasse gegen das UA-[hidden] und das Element bleibt sichtbar. */
[hidden] { display: none !important; }

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

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height);
    overflow: hidden;
}

/* ─────────────────────────── App-Gerüst ─────────────────────────── */

.app {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.appbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.appbar__titel {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--heading-3);
    font-weight: 600;
    color: var(--color-primary);
}

.appbar__abzeichen {
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary);
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    white-space: nowrap;
}

.appbar__abzeichen:hover { background: var(--color-accent); color: var(--color-white); }
.appbar__abzeichen:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.appbar__spacer { flex: 1 1 auto; }

.app__body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.fussleiste {
    flex: 0 0 auto;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.fussleiste__spacer { flex: 1 1 auto; }

/* ─────────────────────────── Sidebar (Dateien) ─────────────────────────── */

.sidebar {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--space-4);
    border-right: 1px solid var(--color-border);
    background: var(--color-surface);
    overflow: hidden;
}

/* ─────────────────────────── Ablagefläche ─────────────────────────── */

.dropzone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px dashed var(--color-border-input);
    border-radius: var(--radius);
    cursor: pointer;
    background: var(--color-bg);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dropzone:hover,
.dropzone:focus-visible {
    border-color: var(--color-accent);
    outline: none;
}

.dropzone--aktiv {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.dropzone__text {
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: 500;
}

/* ─────────────────────────── Seitenanzeige ─────────────────────────── */

.viewer {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: var(--space-5);
}

.leerhinweis--viewer {
    margin: auto;
}

.seitenanzeige {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: var(--space-3);
}

.seitenanzeige__buehne {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-4);
    background: var(--color-primary-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.seitenkarte {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.seitenkarte__leinwand {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seitenanzeige__canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}

.seitenanzeige__fahne {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: var(--color-accent);
    color: var(--color-white);
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    cursor: help;
}

.seitenanzeige__fahne--warnung {
    background: var(--color-error);
}

.seitenkarte__unterschrift {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.seitenkarte__herkunft { overflow-wrap: anywhere; }

/*
 * Doppelseite: die beiden Bögen stoßen in der Mitte an — wie im Upload-Preflight und wie
 * im aufgeschlagenen Buch. Nur wenn Karte 2 wirklich sichtbar ist; das Deckblatt steht in
 * der Doppelseitenansicht allein und bleibt dann normal mittig.
 * Die Karten behalten je eine halbe Bühnenbreite, die Leinwände rücken an die Innenkanten —
 * so trifft sich der Bund exakt in der Mitte, unabhängig von der Länge der Bildunterschrift.
 */
.seitenanzeige__buehne:has(#seitenKarte2:not([hidden])) {
    gap: 0;
}

.seitenanzeige__buehne:has(#seitenKarte2:not([hidden])) #seitenKarte1 .seitenkarte__leinwand {
    justify-content: flex-end;
}

.seitenanzeige__buehne:has(#seitenKarte2:not([hidden])) #seitenKarte2 .seitenkarte__leinwand {
    justify-content: flex-start;
}

.seitenanzeige__leiste {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.seiten__pfeil {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border-input);
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.seiten__pfeil:hover:not(:disabled) { border-color: var(--color-accent); }
.seiten__pfeil:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.seiten__pfeil:disabled { opacity: 0.3; cursor: default; }

.seitenanzeige__zaehler {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.seitenanzeige__eingabe {
    width: 3.5em;
    text-align: center;
    padding: 4px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.seitenanzeige__eingabe:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ─────────────────────────── Icon-Knöpfe ─────────────────────────── */

.icon-knopf {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-input);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.icon-knopf:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-primary); }
.icon-knopf:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.icon-knopf--warnung:hover:not(:disabled) { color: var(--color-error); border-color: var(--color-error-border); }

.icon-knopf--klein {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.icon-knopf[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* ─────────────────────────── Rückgängig, Fortschritt, Ergebnis (Fußleiste) ─────────────────────────── */

.rueckgaengig,
.fortschritt,
.ergebnis-leiste,
.aktionen {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
}

.rueckgaengig { background: var(--color-primary-light); border-bottom: 1px solid var(--color-border); }

.rueckgaengig__knopf {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fortschritt { color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }

.fortschritt__punkt {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: pulsieren 1.1s ease-in-out infinite;
}

@keyframes pulsieren {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .fortschritt__punkt { animation: none; opacity: 1; }
}

.ergebnis-leiste { background: var(--color-accent-light); }

.ergebnis-leiste__text {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-primary);
    white-space: nowrap;
}

.ergebnis-leiste__hinweise summary {
    cursor: pointer;
    color: var(--color-text-muted);
}

.ergebnis-leiste__hinweise ul {
    position: absolute;
    margin: var(--space-2) 0 0;
    padding: var(--space-3) var(--space-4);
    max-width: 48ch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    list-style: disc;
    padding-left: calc(var(--space-4) + var(--space-3));
}

.ergebnis-leiste__hinweise li { margin-bottom: var(--space-2); }
.ergebnis-leiste__hinweise li:last-child { margin-bottom: 0; }

.ergebnis-leiste__weiter {
    color: var(--color-text-muted);
    text-decoration-color: var(--color-border);
    text-underline-offset: 3px;
    white-space: nowrap;
}

.ergebnis-leiste__weiter:hover { color: var(--color-primary); }

/* ─────────────────────────── Meldungen (Sidebar) ─────────────────────────── */

.meldungen:not(:empty) { flex: 0 0 auto; margin-top: var(--space-3); }

.meldung {
    margin: 0 0 var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

.meldung--fehler {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error);
}

.meldung--erfolg {
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    color: var(--color-text);
}

/* ─────────────────────────── Barrierefreiheit ─────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─────────────────────────── Teile-Liste ─────────────────────────── */

.leerhinweis {
    margin: 0;
    padding: var(--space-6) 0;
    color: var(--color-text-light);
    font-size: var(--text-sm);
    text-align: center;
}

.teile {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
    min-height: 0;
}

.bilanz {
    flex: 0 0 auto;
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.teil {
    display: grid;
    grid-template-columns: 16px 36px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: grab;
}

.teil--zieht { opacity: 0.4; }

.teil--ziel {
    border-color: var(--color-accent);
    box-shadow: 0 -2px 0 -1px var(--color-accent);
}

.teil--fehler {
    border-color: var(--color-error-border);
    background: var(--color-error-bg);
}

.teil--pruefe { opacity: 0.6; cursor: default; }

.teil--leer { opacity: 0.55; }

.teil__nummer {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-light);
    text-align: right;
}

.teil__vorschau {
    width: 36px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}

.teil__vorschau:disabled { cursor: default; }
.teil__vorschau:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.teil__vorschau img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.teil__text { min-width: 0; }

.teil__name {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.teil__meta {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.teil__meta--fehler { color: var(--color-error); }

.teil__rat {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.teil__zuruecksetzen {
    display: block;
    margin: var(--space-2) 0 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: var(--text-xs);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.teil__knoepfe {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: center;
}

.teil__pfeil,
.teil__entfernen {
    width: 22px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.teil__pfeil:hover:not(:disabled),
.teil__entfernen:hover:not(:disabled) {
    border-color: var(--color-border);
    background: var(--color-bg);
    color: var(--color-primary);
}

.teil__entfernen:hover:not(:disabled) { color: var(--color-error); }

.teil__pfeil:disabled,
.teil__entfernen:disabled { opacity: 0.3; cursor: default; }

/* ─────────────────────────── Knöpfe ─────────────────────────── */

.knopf {
    min-height: 36px;
    padding: 0 var(--space-5);
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.knopf:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.knopf--haupt {
    background: var(--color-primary);
    color: var(--color-white);
}

.knopf--haupt:hover:not(:disabled) { background: var(--color-primary-dark); }

.knopf--zweit {
    background: var(--color-surface);
    border-color: var(--color-border-input);
    color: var(--color-primary);
}

.knopf--zweit:hover:not(:disabled) { border-color: var(--color-primary); }

.knopf--still {
    background: transparent;
    color: var(--color-text-muted);
    padding: 0 var(--space-3);
}

.knopf--still:hover:not(:disabled) { color: var(--color-error); }

.knopf:disabled { opacity: 0.4; cursor: default; }

/* ─────────────────────────── Hilfe-Dialog ─────────────────────────── */

.hilfe-dialog--klein { width: min(420px, 90vw); }

.hilfe-dialog--klein p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.hilfe-dialog--klein p:last-child { margin-bottom: 0; }

.hilfe-dialog {
    width: min(480px, 90vw);
    max-height: 80vh;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
    font-family: var(--font-sans);
}

.hilfe-dialog::backdrop {
    background: rgba(20, 27, 46, 0.45);
}

.hilfe-dialog__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--space-4);
}

.hilfe-dialog__kopf h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--heading-3);
    color: var(--color-primary);
}

.hilfe-dialog__intro {
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.hilfe-dialog details {
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-3) 0;
}

.hilfe-dialog details:last-of-type { border-bottom: 1px solid var(--color-border-light); }

.hilfe-dialog summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-primary);
}

.hilfe-dialog details p {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.hilfe-dialog__fuss {
    display: flex;
    gap: var(--space-5);
    margin-top: var(--space-5);
    font-size: var(--text-xs);
}

.hilfe-dialog__fuss a {
    color: var(--color-text-muted);
    text-decoration-color: var(--color-border);
    text-underline-offset: 3px;
}

.hilfe-dialog__fuss a:hover { color: var(--color-primary); }