/* --- Hinweis zu :hover ---
   Alle :hover-Regeln in dieser Datei stehen in
   @media (hover: hover) and (pointer: fine). Ohne diese Abfrage bleibt auf
   Touch der Hover-Zustand nach dem ersten Tippen kleben. */

/* ============================================
   PDF-WERKZEUGKASTEN
   Nur das Eigene — Karte, Stufen, Drop-Zone, Knöpfe und
   Toasts kommen aus ../converter/converter.css.
   ============================================ */

/* Marken-Symbol (Blatt) in der Kopfzeile — gleiche Machart wie
   .yk-brand-icon (Yoink): Emoji mit blauem Schein, Bewegung nur über
   transform. `color` faerbt ein Emoji nicht und faellt deshalb weg. */
.pd-brand-icon {
    font-size: 1.1rem;
    line-height: 1;
    display: inline-block;
    filter: drop-shadow(0 0 10px rgba(41, 151, 255, 0.5));
    animation: pdBlatt 3.6s ease-in-out infinite;
}
@keyframes pdBlatt {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-2px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pd-brand-icon { animation: none; }
}

/* --- Arbeitsfläche --- */
.pd-work {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}
/* Ergebniszeile und Auslöser laufen über beide Spalten. In der 300 px
   schmalen rechten Spalte brach „Zusammenfügen und laden" zweizeilig um
   (70 px hoch statt 50) und der Knopf hing rechts statt unter der Karte.
   Genauso macht es /pdf/seiten-verwalten.html schon. */
.pd-work > .pd-out-meta,
.pd-work > .cv-actions {
    grid-column: 1 / -1;
}
.pd-work > .pd-out-meta {
    text-align: center;
    margin-bottom: 0.2rem;
}
/* Werkzeuge ohne Seitenvorschau (Passwort) bekommen eine Spalte, sonst
   bleiben 300 px der Karte dauerhaft leer. */
.pd-work-einspaltig {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}
@media (max-width: 860px) {
    .pd-work { grid-template-columns: 1fr; gap: 1.4rem; }
    .pd-work-einspaltig { grid-template-columns: minmax(0, 1fr); }
}

/* --- Dateiliste (Zusammenfügen) --- */
.pd-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}
.pd-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    /* Beim Umsortieren springt die Zeile an ihren neuen Platz. Ohne diesen
       Übergang sieht es aus, als wäre nichts passiert. */
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] .pd-item { background: rgba(0, 0, 0, 0.025); }
.pd-item.neu { animation: pdRein 0.45s cubic-bezier(0.16,1,0.3,1); }
@keyframes pdRein {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.pd-item.geht { opacity: 0; transform: translateX(-24px); }

.pd-nr {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pd-thumb {
    flex: none;
    width: 34px;
    height: 46px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--border);
}
[data-theme="light"] .pd-thumb { background: rgba(0, 0, 0, 0.05); }
.pd-item-info { flex: 1; min-width: 0; }
.pd-item-name {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-item-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
    font-variant-numeric: tabular-nums;
}
.pd-item-btns { flex: none; display: flex; gap: 0.25rem; }
.pd-mini {
    appearance: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.pd-mini:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
    .pd-mini:not(:disabled):hover { color: var(--text); border-color: rgba(41,151,255,0.4); background: rgba(41,151,255,0.08); }
    .pd-mini.weg:not(:disabled):hover { color: #ff453a; border-color: rgba(255,69,58,0.45); background: rgba(255,69,58,0.1); }
}

/* Auf Touch sind 34 px zu wenig: die Sortierknöpfe liegen dicht
   nebeneinander, und wer daneben tippt, wirft aus Versehen eine Datei raus.
   44 px ist das Maß, ab dem das zuverlässig funktioniert. */
@media (pointer: coarse) {
    .pd-mini { width: 44px; height: 44px; font-size: 1.1rem; }
    .pd-item-btns { gap: 0.35rem; }
}

.pd-add {
    appearance: none;
    width: 100%;
    padding: 0.7rem;
    border-radius: 14px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
    .pd-add:hover { border-color: var(--primary); background: rgba(41,151,255,0.06); }
}

/* --- Kopfzeile bei einer einzelnen Datei --- */
.pd-src {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    margin-bottom: 1.4rem;
}
[data-theme="light"] .pd-src { background: rgba(0, 0, 0, 0.025); }
.pd-src-icon { font-size: 1.4rem; line-height: 1; flex: none; }
.pd-src-info { flex: 1; min-width: 0; }
.pd-src-name {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-src-meta { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.15rem; font-variant-numeric: tabular-nums; }

/* --- Steuerelemente (gleiche Sprache wie /bild/) --- */
.pd-field { display: block; margin-bottom: 1rem; }
.pd-field > span {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.pd-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: 0.35rem;
    text-transform: none;
    letter-spacing: 0;
}
.pd-input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    min-height: 42px;
    transition: border-color 0.3s ease, background 0.3s ease;
}
[data-theme="light"] .pd-input { background: rgba(0, 0, 0, 0.03); }
.pd-input:focus { border-color: var(--primary); outline: none; }
.pd-input.falsch { border-color: #ff453a; }

.pd-choice { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pd-choice-btn {
    appearance: none;
    padding: 0.45rem 0.8rem;
    min-height: 38px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
    -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .pd-choice-btn { background: rgba(0, 0, 0, 0.03); }
.pd-choice-btn.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(41, 151, 255, 0.32);
}
@media (hover: hover) and (pointer: fine) {
    .pd-choice-btn:not(.active):hover {
        color: var(--text);
        border-color: rgba(41, 151, 255, 0.35);
        transform: translateY(-1px);
    }
}

.pd-note { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.2rem; }
.pd-warn { font-size: 0.85rem; color: #ff9f0a; line-height: 1.5; margin-bottom: 1rem; }
.pd-warn:empty { display: none; }

/* --- Ergebnisspalte --- */
.pd-out-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
    min-height: 3em;
}
.pd-out-meta strong { color: var(--text); }
.pd-preview {
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.8rem;
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.5rem;
    max-height: 340px;
    overflow-y: auto;
}
[data-theme="light"] .pd-preview { background: rgba(0, 0, 0, 0.02); }
.pd-preview:empty { display: none; }
.pd-page {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff;
    aspect-ratio: 1 / 1.414;
    display: block;
}
.pd-page img, .pd-page canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-page-nr {
    position: absolute;
    left: 3px;
    bottom: 3px;
    padding: 0 5px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pd-page.leer { display: grid; place-items: center; color: var(--text-muted); font-size: 0.7rem; background: rgba(128,128,128,0.12); }

/* --- Übersichtsseite --- */
.pd-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1.6rem;
}
.pd-tool {
    display: block;
    padding: 1.4rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.035);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.35s ease, background 0.35s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] .pd-tool { background: rgba(0, 0, 0, 0.02); }
@media (hover: hover) and (pointer: fine) {
    .pd-tool:hover {
        border-color: rgba(41, 151, 255, 0.4);
        background: rgba(41, 151, 255, 0.06);
        transform: translateY(-3px);
    }
}
.pd-tool-emoji { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: 0.6rem; }
.pd-tool h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.pd-tool p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; }

.pd-cat-text { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; }
.pd-cat-text code {
    font-family: var(--font-mono, monospace);
    font-size: 0.85em;
    padding: 0.05em 0.35em;
    border-radius: 5px;
    background: rgba(128, 128, 128, 0.16);
}
.pd-more { text-align: center; margin-top: 2rem; font-size: 0.95rem; line-height: 1.7; }
.pd-more a { color: var(--primary); font-weight: 600; }

@media (max-width: 520px) {
    .pd-choice-btn { font-size: 0.8rem; padding: 0.4rem 0.7rem; }
    .pd-preview { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}

/* ============================================
   SEITEN VERWALTEN
   ============================================ */
.pd-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    margin-bottom: 1.2rem;
    /* Beim Blättern durch ein langes Dokument soll die Leiste erreichbar
       bleiben — sonst scrollt man für jede Drehung wieder nach oben. */
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
[data-theme="light"] .pd-toolbar { background: rgba(255, 255, 255, 0.75); }
.pd-toolbar-gruppe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pd-toolbar .pd-note { width: 100%; margin: 0; font-size: 0.82rem; }
.pd-choice-btn.gefahr { color: #ff9f8a; }
@media (hover: hover) and (pointer: fine) {
    .pd-choice-btn.gefahr:hover { color: #ff453a; border-color: rgba(255,69,58,0.45); background: rgba(255,69,58,0.1); }
}

.pd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}
.pd-kachel {
    appearance: none;
    position: relative;
    padding: 0;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: #fff;
    aspect-ratio: 1 / 1.414;
    overflow: hidden;
    cursor: pointer;
    display: grid;
    place-items: center;
    /* Ohne das blitzt beim Antippen auf dem Handy ein grauer Kasten auf. */
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.25s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}
.pd-kachel canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.pd-kachel.fertig canvas { opacity: 1; }
.pd-kachel.gewaehlt {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.28);
    transform: translateY(-2px);
}
.pd-kachel.gewaehlt::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
    .pd-kachel:not(.gewaehlt):hover { border-color: rgba(41, 151, 255, 0.5); transform: translateY(-2px); }
}
.pd-kachel-nr {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 0 5px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pd-kachel-hin {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0 5px;
    border-radius: 5px;
    background: rgba(255, 159, 10, 0.9);
    color: #1d1d1f;
    font-size: 0.62rem;
    font-weight: 700;
}
@media (max-width: 520px) {
    .pd-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 0.6rem; }
    .pd-toolbar { position: static; }
}

/* --- Regler, Häkchen, Farbwahl (wie in /bild/) --- */
/* Aussehen kommt aus .cv-range (converter.css) — hier nur die Einbettung. */
.pd-range { flex: 1; width: 100%; }
.pd-range-row { display: flex; align-items: center; gap: 0.7rem; }
.pd-range-val {
    flex: none;
    min-width: 3.6em;
    text-align: right;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.pd-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 1rem;
    cursor: pointer;
}
.pd-check input { flex: none; width: 18px; height: 18px; accent-color: var(--primary); }
.pd-color {
    width: 100%;
    height: 42px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
}
/* Die Wasserzeichen-Vorschau zeigt EINE Seite groß statt vieler Miniaturen. */
.pd-preview:has(.pd-page.gross) { grid-template-columns: 1fr; max-height: none; }
.pd-page.gross { aspect-ratio: auto; }
.pd-page.gross canvas { height: auto; }

/* --- Passwortfeld mit Augen-Knopf --- */
.pd-pass { display: flex; gap: 0.5rem; align-items: stretch; }
.pd-pass .pd-input { flex: 1; }
.pd-pass .pd-mini { flex: none; height: auto; align-self: stretch; width: 44px; }

/* Auf Touch zu klein: 38 px bei den Auswahlknoepfen, 42 px bei den
   Eingabefeldern. Der Richtwert fuer eine zuverlaessige Tippflaeche liegt
   bei 44 px — am Desktop bleibt es bei den kleineren Werten, dort ist die
   Maus genau genug. (Aufgefallen an /bild/hintergrund.html, wo die
   Browser-Pruefung genau das gemessen hat.) */
@media (pointer: coarse) {
    .pd-input { min-height: 44px; }
    .pd-choice-btn { min-height: 44px; padding-top: 0.6rem; padding-bottom: 0.6rem; }
}