/* ===== V2: gemeinsamer Rahmen ===== */
.v2-rahmen {
    border: 1.5px solid #1e5fbf;
    border-radius: 8px;
    background: white;
    margin-bottom: 0.5rem;
}

.v2-rahmen__kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #e3e8f0;
}

.v2-rahmen__titel {
    flex: 1;
    font-weight: 600;
    min-width: 0;
}

.v2-rahmen__aktionen {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}

.v2-rahmen__inhalt {
    padding: 0.5rem 0.6rem;
}

/* ===== V2: Panel ===== */
.v2-panel {
    border-width: 2.5px;
    background: #eef4fc;
}

/* Bearbeitungs-Modus: gestrichelter Rand, damit er sich von der Anzeige abhebt */
.v2-panel--bearbeiten {
    border-style: dashed;
    margin-bottom: 1.5rem;
}

/* Anzeige-Modus: nur die hellblaue Fläche, ohne Rand; Kacheln nutzen die ganze Breite */
.v2-panel--ansicht {
    border: none;
}

.v2-panel--ansicht > .v2-rahmen__inhalt {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.17rem; /* ein Drittel des früheren Abstands zu den Knöpfen darüber */
}

/* ===== V2: FrageKachel ===== */
.v2-kachel {
    border-width: 2px;
}

/* ===== V2: Zweig ===== */
.v2-zweig {
    border-color: #999;
    background: #fafafa;
}

/* Frage-Text und Zweig-Buttons (Anzeige) */
.v2-frage {
    margin: 0 0 0.6rem 0;
    font-weight: 500;
}

.v2-zweig-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.v2-zweig-button {
    flex: 1 1 0;
    min-width: 8rem;
    padding: 0.6rem 1rem;
    border: 1.5px solid #1e5fbf;
    border-radius: 8px;
    background: white;
    color: #1e5fbf;
    font-size: 1rem;
    cursor: pointer;
}

    .v2-zweig-button:hover {
        background: #eaf1fb;
    }

/* Zweige direkt unter einem Zweig: links und rechts etwas eingerückt */
.v2-zweig-buttons--unter {
    margin-left: 0.6rem;
    margin-right: 0.6rem;
}

.v2-flach .v2-zweig-buttons--unter {
    margin-left: 1.2rem;
    margin-right: 1.2rem;
}

/* "fest": alle Buttons in einer Reihe, jeder so breit wie sein Text (Fläche wird per zweigFest.js breiter) */
.v2-zweig-buttons--fest {
    flex-wrap: nowrap;
}

    .v2-zweig-buttons--fest > .v2-zweig-button {
        flex: 1 0 auto;
    }

/* "fest", aber selbst bis zum Browserrand zu breit: wie gewohnt umbrechen */
.v2-zweig-buttons--fest.v2-zweig-buttons--umbruch {
    flex-wrap: wrap;
}

/* Anzeige-Fläche: kann für feste Reihen breiter werden als die Seite */
.v2-anzeige {
    box-sizing: border-box;
}

/* Checkbox "fest" im Zweig-Kopf (nur Bearbeitung); rot = passt in diesem Fenster nicht */
.v2-fest {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8rem;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

.v2-fest--rot {
    color: #c0392b;
    font-weight: 600;
}

    .v2-fest--rot input {
        accent-color: #c0392b;
        outline: 2px solid #c0392b;
    }

.v2-fest-warnung {
    margin: 0.3rem 0.6rem;
}

/* Link-Knöpfe L1 … L30 in der Knopfreihe (Aussehen der Werkzeugleiste) */
.v2-link-btn {
    text-decoration: none;
    font-size: 0.8rem;
}

/* Link-Verwalter (Zahnrad "Links") */
.v2-link-verwalter {
    margin-bottom: 0.75rem;
}

.v2-link-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid #eee;
}

.v2-link-zeile__name {
    font-weight: 600;
    min-width: 2rem;
}

.v2-link-zeile__text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

    .v2-link-zeile__text small {
        color: #666;
        margin-left: 0.4rem;
    }

/* Blauer Kopf (FrageKachel, gewählter Zweig) */
.v2-rahmen--blau {
    border-color: #1e5fbf;
    background: #f5f5f0; /* wie die Seite */
    overflow: hidden;
}

    .v2-rahmen--blau > .v2-rahmen__kopf {
        background: #1e5fbf;
        color: white;
        border-bottom: none;
    }

/* Anklickbarer Kopf (auf/zu) */
.v2-rahmen__kopf--klickbar {
    cursor: pointer;
    user-select: none;
}

/* Meldung im Zweig-Panel */
.v2-meldung {
    margin: 0;
    color: #555;
    white-space: pre-line;
}

/* Kleine Aktions-Buttons im Kopf */
.v2-aktion-button {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    padding: 0 0.3rem;
    cursor: pointer;
}

/* Schalter "Rahmen als Tiefe anzeigen" aus (Standard): alle Rahmen linksbündig in voller Breite,
   nur die Inhalte (Texte, Buttons, Formulare) behalten ihren Abstand zum Rand */
.v2-flach .v2-rahmen__inhalt {
    padding-left: 0;
    padding-right: 0;
}

.v2-flach .v2-frage,
.v2-flach .v2-meldung,
.v2-flach .v2-verweis,
.v2-flach .v2-hinweis,
.v2-flach .v2-zweig-buttons,
.v2-flach .v2-add-btn,
.v2-flach .ui-editor__form,
.v2-flach .ui-editor__confirm {
    margin-left: 0.6rem;
    margin-right: 0.6rem;
}

/* Bearbeitung: Zeile mit ▲▼ links (Aussehen aus ui-editor.css), Abstand kommt schon vom Rahmen */
.v2-move-row {
    margin-bottom: 0;
}

/* Bearbeitung: "+ Neuer Zweig" und "+ Neue Kachel" nebeneinander */
.v2-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .v2-add-row .v2-add-btn {
        margin-right: 0;
    }

/* Bearbeitung: "+"-Buttons (Aussehen aus ui-editor.css), etwas Abstand nach unten */
.v2-add-btn {
    margin-bottom: 0.5rem;
}

/* Bearbeitung: Hinweis auf eine Marke statt deren Inhalt */
.v2-verweis {
    margin: 0.3rem 0;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 600;
    color: #c0392b; /* rot: gut sichtbar */
}

/* Zahnrad-Menü: "Load" (V2) ist ein label um InputFile – Text mittig wie bei den echten Buttons */
.v2-label-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Baustein ohne Rahmen (Zahnrad "Kachel-Rahmen anzeigen" oder eigene Einstellung im Farbfeld) */
.v2-ohne-rahmen {
    border-color: transparent;
}

/* Farbfeld rechts im Kachel-Kopf (öffnet die Leiste für Kopf-Farbe und Rahmen) */
.v2-farbfeld {
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: 1.5px solid white;
    outline: 1px solid #999;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Leiste für Kopf-Farbe und Rahmen direkt unter dem Kopf (außerhalb des Inhalts) */
.v2-rahmen > .ui-editor__form {
    margin: 0.4rem 0.6rem;
}

/* M-Feld rechts im Kopf (nur Bearbeitung): Kachel <-> Marke umwandeln */
.v2-markefeld {
    background: white;
    color: #1e5fbf;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

/* SP-Feld (nur Marken in der Bearbeitung) etwas breiter für zwei Buchstaben */
.v2-spfeld {
    width: 1.5rem;
}

/* SP: Liste der Verwendungen – jeder Eintrag ist klickbar */
.v2-verwendung {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0.2rem 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: white;
    color: #1e5fbf;
    cursor: pointer;
}

    .v2-verwendung:hover {
        background: #eaf1fb;
    }

/* SP: Anker um den Zweig (Fokus nur zum Scrollen, ohne Rand) und kurzes gelbes Aufleuchten */
.v2-anker {
    outline: none;
}

.v2-hervorheben > .v2-rahmen {
    animation: v2-aufleuchten 3s ease-out;
}

@keyframes v2-aufleuchten {
    0%, 40% {
        background-color: #fff3a0;
    }
}

/* Roter Hinweis am Zweig */
.v2-hinweis {
    margin: 0.3rem 0;
    color: #c0392b;
    font-size: 0.9rem;
}

/* Gemeinsame Farbwahl: Farbwähler mit Vorschau daneben */
.v2-farbwahl {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: 0.6rem;
}

.v2-farbwahl__vorschau {
    font-size: 0.9rem;
}

/* Vorschau des Kachel-Kopfs (Standard-Blau, wenn keine eigene Farbe) */
.v2-farbwahl__kopf {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border: 2px solid #1e5fbf;
    border-radius: 6px;
    color: white;
    font-weight: 600;
}

.v2-farbwahl__kopf--ohne-rahmen {
    border-color: transparent;
}

.v2-farbwahl__rahmen {
    display: block;
    margin-top: 0.5rem;
}

/* Zahnrad: Button in eigener Zeile unter den Einstellungen */
.v2-einstellung-btn {
    grid-column: 1 / -1;
    justify-self: start; /* eigene Zeile, aber normale Breite */
}

/* Einstellung im Zahnrad-Menü (nur bei aktivem V2): eigene Zeile unter den Buttons, volle Breite */
.v2-einstellung {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    cursor: pointer;
}

/* Knopfreihe oben (KnopfReiheV2): eine durchgehende Reihe, rechtsbündig; reicht der Platz nicht, geht sie Zeile für Zeile weiter */
.v2-knopfreihe {
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

/* ◀ und ▶: schmaler als die übrigen Knöpfe */
.v2-knopfreihe__pfeil {
    width: 22px;
    font-size: 0.75rem;
}

/* Ein Knopf in der Knopfreihe; bei geöffneter Bearbeitung verschiebbar (dragSort.js) */
.v2-knopfreihe__platz {
    display: flex;
}

    /* Trennstrich vor UI, wenn aufgeklappt (links davon die versteckten Knöpfe) */
    .v2-knopfreihe__platz--trenner {
        border-left: 1.5px solid #b8c9e6;
        padding-left: 0.5rem;
    }

    .v2-knopfreihe[data-drag-on] .v2-knopfreihe__platz {
        cursor: grab;
        -webkit-touch-callout: none; /* kein Link-Menü beim langen Drücken */
        user-select: none;
    }

/* Während des Ziehens (dragSort.js): gezogener Knopf und Ablage-Stelle */
.v2-drag-aktiv {
    opacity: 0.5;
    cursor: grabbing;
}

.v2-drag-ziel {
    outline: 2px dashed #1e5fbf;
    outline-offset: 2px;
}

/* Bilder-Ablage im Verwalter "Links & Bild" */
.v2-ablage__titel {
    margin-top: 0.75rem;
}

/* Bearbeitung: Anzahl der Link-Knöpfe (LinkAnzahlV2) */
.v2-link-anzahl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.3rem 0 0.5rem;
}

.v2-link-anzahl__feld {
    width: 4rem;
    margin-left: 0.3rem;
}

/* Bearbeitung: Bausteine am Kopf ziehen (dragSort.js) */
/* Finger: Blättern bleibt möglich; erst nach langem Drücken wird gezogen (dann ist Blättern aus) */
.v2-bearbeitung[data-drag-on] [data-drag-id] > .v2-rahmen > .v2-rahmen__kopf {
    cursor: grab;
    -webkit-touch-callout: none;
    user-select: none;
}