/* Sqlprobe: Schema oben, Abfrage in der Mitte, Ergebnis unten.
 *
 * Die Farben kommen aus dem Theme (Bootstrap-Variablen), damit der Kasten im
 * hellen und im dunklen Modus lesbar bleibt - anders als die Codeprobe zeigt
 * er keine fremde Seite, sondern eine Tabelle der Plattform.
 */

.sqlprobe {
    margin: 1rem 0;
    padding: 0;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: .5rem;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
}

.sqlprobe-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .75rem;
    border-bottom: 1px solid var(--bs-border-color, #d1d5db);
    background: var(--bs-tertiary-bg, #f3f4f6);
}

/* Aufklapper zum Datenmodell: der Pfeil dreht sich, wenn es offen steht */
.sqlprobe-aufklapper {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    padding: 0;
    background: none;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6b7280);
}

.sqlprobe-aufklapper:hover { color: var(--bs-body-color, #111827); }

.sqlprobe-aufklapper .bi-chevron-right { transition: transform .15s ease-in-out; }

.sqlprobe-aufklapper.ist-offen .bi-chevron-right { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    .sqlprobe-aufklapper .bi-chevron-right { transition: none; }
}

/* Detailgrad: gilt für alle Kästen, deshalb im Kopf und nicht im Modell */
.sqlprobe-grad {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .75rem;
    color: var(--bs-secondary-color, #6b7280);
}

.sqlprobe-grad select { width: auto; font-size: .75rem; }

.sqlprobe-bauplan-knopf { font-size: .75rem; }

/* --- Lightbox mit dem Bauplan ---------------------------------------
 *
 * Sie haengt am body (siehe sqlprobe.js), deshalb gilt "fixed" hier auch
 * wirklich zum Fenster.
 */
.sqlprobe-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .55);
}

.sqlprobe-lightbox-fenster {
    display: flex;
    flex-direction: column;
    width: min(46rem, 100%);
    max-height: min(80vh, 44rem);
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: .5rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
    overflow: hidden;
}

.sqlprobe-lightbox-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--bs-border-color, #d1d5db);
    background: var(--bs-tertiary-bg, #f3f4f6);
}

.sqlprobe-lightbox-titel {
    flex: 1 1 auto;
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
}

.sqlprobe-lightbox-zu { flex: 0 0 auto; }

.sqlprobe-lightbox-inhalt {
    margin: 0;
    padding: .75rem;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre;
}

@media (max-width: 575.98px) {
    /* Auf dem Handy zaehlt jede Zeile: der Bauplan bricht um statt zu scrollen */
    .sqlprobe-lightbox-inhalt { white-space: pre-wrap; font-size: .8rem; }
}

/* Datenmodell: ein Kästchen je Tabelle, nebeneinander solange Platz ist */
.sqlprobe-uebersicht {
    padding: .75rem;
    border-bottom: 1px solid var(--bs-border-color, #d1d5db);
    background: var(--bs-secondary-bg, #f8f9fa);
    font-size: .85rem;
}

/* Leinwand: die Kästchen liegen frei darin und lassen sich verschieben.
 * Die Höhe darf die Lernende selbst ziehen (resize), das Karo hilft beim
 * Ausrichten, ohne dass etwas einrastet. */
.sqlprobe-modell {
    position: relative;
    height: 24rem;
    min-height: 10rem;
    overflow: auto;
    resize: vertical;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: .35rem;
    background-color: var(--bs-body-bg, #fff);
}

@media (max-width: 575.98px) {
    .sqlprobe-modell { height: 18rem; }
}

/* Die Linien liegen unter den Kästchen und fangen keine Klicks ab */
.sqlprobe-linien {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.sqlprobe-linie {
    fill: none;
    stroke: var(--bs-secondary-color, #6b7280);
    stroke-width: 1.5;
}

.sqlprobe-linie-spitze { fill: var(--bs-secondary-color, #6b7280); }

.sqlprobe-linie-fuss {
    fill: none;
    stroke: var(--bs-secondary-color, #6b7280);
    stroke-width: 1.5;
}

.sqlprobe-kaestchen {
    position: absolute;
    width: max-content;
    /* Reicht für "alle Angaben" samt Verweisziel, ohne dass ein Kästchen die
     * halbe Leinwand einnimmt */
    max-width: 30rem;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: .35rem;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
}

.sqlprobe-kaestchen {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    /* Beim Ziehen soll der Finger das Kästchen bewegen, nicht die Leinwand */
    touch-action: none;
}

.sqlprobe-kaestchen.ist-in-bewegung {
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
    opacity: .95;
}

.sqlprobe-kaestchen-kopf {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--bs-border-color, #d1d5db);
    background: var(--bs-tertiary-bg, #f3f4f6);
    cursor: grab;
    /* Ohne das markiert ein schneller Zug den Text im Kopf, und der Browser
     * startet sein eigenes Ziehen - das Kästchen bleibt dann liegen */
    user-select: none;
    -webkit-user-select: none;
}

.sqlprobe-kaestchen.ist-in-bewegung .sqlprobe-kaestchen-kopf { cursor: grabbing; }

.sqlprobe-griff {
    color: var(--bs-secondary-color, #6b7280);
    line-height: 1;
}

.sqlprobe-name {
    padding: 0;
    border: 0;
    background: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: var(--bs-body-color, #111827);
}

.sqlprobe-name:hover { text-decoration: underline; }

.sqlprobe-felder {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
}

.sqlprobe-felder th {
    padding: .2rem .5rem;
    border-bottom: 1px solid var(--bs-border-color, #d1d5db);
    font-family: var(--adminuiux-content-font, sans-serif);
    font-size: .7rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--bs-secondary-color, #6b7280);
}

.sqlprobe-felder td {
    padding: .2rem .5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .1));
    vertical-align: top;
}

.sqlprobe-felder tr:last-child td { border-bottom: 0; }

.sqlprobe-ist-schluessel { background: var(--bs-tertiary-bg, #f3f4f6); }

.sqlprobe-feldname { white-space: nowrap; font-weight: 600; }

.sqlprobe-typ, .sqlprobe-vorgabe { color: var(--bs-secondary-color, #6b7280); }

.sqlprobe-extra {
    font-family: var(--adminuiux-content-font, sans-serif);
    font-size: .75rem;
    color: var(--bs-secondary-color, #6b7280);
}

/* PK und FK: zwei Buchstaben statt eines Symbols - so heißt es in der Prüfung */
.sqlprobe-marke {
    display: inline-block;
    min-width: 1.9em;
    margin-right: .35rem;
    padding: 0 .25em;
    border-radius: .2rem;
    font-family: var(--adminuiux-content-font, sans-serif);
    font-size: .65rem;
    font-weight: 700;
    text-align: center;
    vertical-align: baseline;
}

.sqlprobe-marke-pk {
    background: var(--bs-warning-bg-subtle, #fff3cd);
    color: var(--bs-warning-text-emphasis, #664d03);
}

.sqlprobe-marke-fk {
    background: var(--bs-info-bg-subtle, #cff4fc);
    color: var(--bs-info-text-emphasis, #055160);
}

.sqlprobe-verbindungen {
    margin: .6rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    color: var(--bs-secondary-color, #6b7280);
}

.sqlprobe-label {
    display: block;
    margin: .75rem .75rem .25rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6b7280);
}

/* Auch ohne Skript lesbar: dann steht hier nur das Textfeld */
.sqlprobe textarea {
    display: block;
    width: calc(100% - 1.5rem);
    margin: 0 .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
    line-height: 1.5;
    tab-size: 4;
    resize: vertical;
}

.sqlprobe-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .5rem .75rem;
}

.sqlprobe-tasten {
    margin-left: auto;
    font-size: .75rem;
    color: var(--bs-secondary-color, #6b7280);
}

@media (max-width: 575.98px) {
    /* Auf dem Handy ist die Tastenkombination ohnehin kein Weg */
    .sqlprobe-tasten { display: none; }
}

.sqlprobe-melder:not(:empty) {
    margin: 0 .75rem .5rem;
    padding: .4rem .6rem;
    border-radius: .35rem;
    font-size: .875rem;
    background: var(--bs-secondary-bg, #f8f9fa);
}

.sqlprobe-melder.sqlprobe-fehler {
    background: var(--bs-danger-bg-subtle, #f8d7da);
    color: var(--bs-danger-text-emphasis, #842029);
}

.sqlprobe-melder.sqlprobe-gut {
    background: var(--bs-success-bg-subtle, #d1e7dd);
    color: var(--bs-success-text-emphasis, #0f5132);
}

.sqlprobe-ausgabe:not(:empty) { padding: 0 .75rem .5rem; }

.sqlprobe-ergebnis {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
}

.sqlprobe-ergebnis th { white-space: nowrap; }

.sqlprobe-zahl { text-align: right; font-variant-numeric: tabular-nums; }

.sqlprobe-null {
    font-style: italic;
    color: var(--bs-secondary-color, #6b7280);
}

.sqlprobe-fuss {
    margin: .25rem 0 .75rem;
    font-size: .8rem;
    color: var(--bs-secondary-color, #6b7280);
}

/* Hinweise auf alles, was SQLite annimmt und die Prüfung nicht kennt */
.sqlprobe-hinweise {
    margin: .25rem 0 .5rem;
    padding: .5rem .75rem .5rem 1.75rem;
    border-left: 3px solid var(--bs-warning, #ffc107);
    border-radius: .25rem;
    background: var(--bs-warning-bg-subtle, #fff3cd);
    color: var(--bs-warning-text-emphasis, #664d03);
    font-size: .85rem;
}

.sqlprobe-hinweise li + li { margin-top: .25rem; }

/* --- Kontextmenü (Rechtsklick auf Leinwand oder Kästchen) ------------
 *
 * Wie die Lightbox am body, damit "fixed" zum Fenster gilt.
 */
.sqlprobe-menue {
    position: fixed;
    z-index: 1070;
    min-width: 13rem;
    padding: .25rem;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: .35rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2);
}

.sqlprobe-menue-eintrag {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .3rem .5rem;
    border: 0;
    border-radius: .25rem;
    background: none;
    font-size: .85rem;
    text-align: left;
    color: var(--bs-body-color, #111827);
}

.sqlprobe-menue-eintrag:hover,
.sqlprobe-menue-eintrag:focus {
    background: var(--bs-tertiary-bg, #f3f4f6);
    outline: none;
}

.sqlprobe-menue-eintrag.ist-gefahr { color: var(--bs-danger-text-emphasis, #842029); }

.sqlprobe-menue-eintrag.ist-gefahr:hover,
.sqlprobe-menue-eintrag.ist-gefahr:focus { background: var(--bs-danger-bg-subtle, #f8d7da); }

.sqlprobe-menue-trenner { margin: .25rem .5rem; opacity: .35; }

/* --- Formular des Modell-Editors ------------------------------------- */

.sqlprobe-lightbox-fenster.ist-weit { width: min(64rem, 100%); }

/* Im Formular steht Fließtext, kein Code - der Bauplan-Block darüber erbt
 * seine Schreibmaschinenschrift, hier wäre sie fehl am Platz */
.sqlprobe-lightbox-formular {
    white-space: normal;
    font-family: var(--adminuiux-content-font, sans-serif);
}

.sqlprobe-formular-kopf { margin-bottom: .75rem; }

.sqlprobe-formular-kopf .sqlprobe-label { margin: 0; }

.sqlprobe-formular-kopf input { margin-top: .2rem; max-width: 20rem; }

.sqlprobe-formular-felder {
    width: 100%;
    margin-bottom: .5rem;
    border-collapse: collapse;
}

.sqlprobe-formular-felder th {
    padding: .2rem .4rem;
    border-bottom: 1px solid var(--bs-border-color, #d1d5db);
    font-size: .7rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--bs-secondary-color, #6b7280);
}

.sqlprobe-formular-felder td {
    padding: .2rem .4rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .1));
    vertical-align: top;
}

.sqlprobe-formular-felder tr.ist-schluessel { background: var(--bs-tertiary-bg, #f3f4f6); }

.sqlprobe-formular-felder input[type="text"],
.sqlprobe-formular-felder select {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
}

.sqlprobe-feldname-feld { min-width: 7rem; }
.sqlprobe-typ-feld { min-width: 8rem; }
.sqlprobe-vorgabe-feld { min-width: 6rem; }

.sqlprobe-haken {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: .2rem 0 0;
    font-size: .7rem;
    white-space: nowrap;
    color: var(--bs-secondary-color, #6b7280);
}

.sqlprobe-zaehlt { margin-top: .25rem; }

.sqlprobe-feld-weg { padding: .1rem .4rem; }

.sqlprobe-formular-meldung:empty { display: none; }

.sqlprobe-formular-meldung {
    margin: .5rem 0 0;
    padding: .4rem .6rem;
    border-radius: .35rem;
    background: var(--bs-secondary-bg, #f8f9fa);
    font-size: .85rem;
}

.sqlprobe-formular-meldung.ist-fehler {
    background: var(--bs-danger-bg-subtle, #f8d7da);
    color: var(--bs-danger-text-emphasis, #842029);
}

.sqlprobe-formular-hinweis {
    margin: 0 0 .75rem;
    font-size: .85rem;
    color: var(--bs-secondary-color, #6b7280);
}

/* Was die Änderung mit den vorhandenen Zeilen macht - der Teil, den man
 * gelesen haben muss, bevor man auf Ausführen drückt */
.sqlprobe-warnkasten {
    margin-bottom: .75rem;
    padding: .5rem .75rem;
    border-left: 3px solid var(--bs-warning, #ffc107);
    border-radius: .25rem;
    background: var(--bs-warning-bg-subtle, #fff3cd);
    color: var(--bs-warning-text-emphasis, #664d03);
    font-size: .85rem;
}

.sqlprobe-warnkopf { margin: 0 0 .25rem; font-weight: 600; }

.sqlprobe-warnkasten ul { margin: 0; padding-left: 1.1rem; }

.sqlprobe-warnkasten li + li { margin-top: .2rem; }

.sqlprobe-sql-vorschau {
    margin: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: .35rem;
    background: var(--bs-tertiary-bg, #f3f4f6);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.sqlprobe-lightbox-fuss {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-top: 1px solid var(--bs-border-color, #d1d5db);
    background: var(--bs-tertiary-bg, #f3f4f6);
}

/* --- Größe des Modells ------------------------------------------------
 *
 * Die Bühne spannt die Fläche auf, die das Skalierte einnimmt; die Skala
 * traegt den Inhalt und wird als Ganzes vergroessert. transform allein
 * aendert am Scrollbereich nichts, deshalb die zwei Ebenen.
 *
 * Wichtig: transform hier kapert den Bezug von "fixed" fuer alles, was
 * darin liegt. Lightbox und Kontextmenue haengen deshalb am body.
 */
.sqlprobe-buehne { position: relative; }

.sqlprobe-skala {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    /* Das Karo liegt auf der skalierten Ebene und waechst deshalb mit -
     * sonst behielte es seine Groesse, waehrend alles andere zoomt */
    background-image:
        linear-gradient(var(--bs-border-color-translucent, rgba(0, 0, 0, .06)) 1px, transparent 1px),
        linear-gradient(90deg, var(--bs-border-color-translucent, rgba(0, 0, 0, .06)) 1px, transparent 1px);
    background-size: 1.5rem 1.5rem;
}

.sqlprobe-zoom {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

.sqlprobe-zoom-knopf { padding: .1rem .4rem; }

.sqlprobe-zoom-wert {
    min-width: 4rem;
    padding: .1rem .3rem;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

/* --- Farben der Tabellen ---------------------------------------------
 *
 * Drei Buntheiten, geprüft mit dem Farbprüfer des dataviz-Regelwerks gegen
 * alle Paarungen gleichzeitig und in beiden Modi (die Kästchen stehen ja
 * nebeneinander). Eine vierte war entweder bei Farbenblindheit oder auch mit
 * vollem Farbsehen nicht mehr sicher zu unterscheiden; ab der vierten Tabelle
 * beginnt die Reihe deshalb von vorn. Die Farbe ordnet zu - benannt wird die
 * Tabelle durch ihren Namen, der überall danebensteht.
 */
.sqlprobe {
    --sqlprobe-t1: #2a78d6;
    --sqlprobe-t2: #eb6834;
    --sqlprobe-t3: #1baf7a;
    /* Die Tönung für Kopfleisten und den Namen im Editor */
    --sqlprobe-t1-hauch: rgba(42, 120, 214, .12);
    --sqlprobe-t2-hauch: rgba(235, 104, 52, .14);
    --sqlprobe-t3-hauch: rgba(27, 175, 122, .14);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) .sqlprobe {
        --sqlprobe-t1: #3987e5;
        --sqlprobe-t2: #d95926;
        --sqlprobe-t3: #199e70;
        --sqlprobe-t1-hauch: rgba(57, 135, 229, .22);
        --sqlprobe-t2-hauch: rgba(217, 89, 38, .22);
        --sqlprobe-t3-hauch: rgba(25, 158, 112, .22);
    }
}

[data-bs-theme="dark"] .sqlprobe {
    --sqlprobe-t1: #3987e5;
    --sqlprobe-t2: #d95926;
    --sqlprobe-t3: #199e70;
    --sqlprobe-t1-hauch: rgba(57, 135, 229, .22);
    --sqlprobe-t2-hauch: rgba(217, 89, 38, .22);
    --sqlprobe-t3-hauch: rgba(25, 158, 112, .22);
}

.sqlprobe-farbe-1 { --farbe: var(--sqlprobe-t1); --hauch: var(--sqlprobe-t1-hauch); }
.sqlprobe-farbe-2 { --farbe: var(--sqlprobe-t2); --hauch: var(--sqlprobe-t2-hauch); }
.sqlprobe-farbe-3 { --farbe: var(--sqlprobe-t3); --hauch: var(--sqlprobe-t3-hauch); }

/* Das Kästchen trägt seine Farbe als Streifen und als Tönung im Kopf - nicht
 * als Schriftfarbe: Der Tabellenname muss lesbar bleiben, und zwei der drei
 * Farben halten als Text auf Weiß den Kontrast nicht. */
.sqlprobe-kaestchen[class*="sqlprobe-farbe-"] { border-color: var(--farbe); }

.sqlprobe-kaestchen[class*="sqlprobe-farbe-"] .sqlprobe-kaestchen-kopf {
    border-left: 4px solid var(--farbe);
    background: var(--hauch);
}

/* Linien und ihre Enden in der Farbe der Tabelle, auf die sie zeigen */
.sqlprobe-linie[class*="sqlprobe-farbe-"],
.sqlprobe-linie-fuss[class*="sqlprobe-farbe-"] { stroke: var(--farbe); }

.sqlprobe-linie-spitze[class*="sqlprobe-farbe-"] { fill: var(--farbe); }

/* --- Editor mit Farben -----------------------------------------------
 *
 * Das gefärbte <pre> liegt unter dem Textfeld, dessen Schrift durchsichtig
 * ist. Beide müssen in Schrift, Zeilenabstand und Abständen übereinstimmen,
 * sonst laufen Zeichen und Farbe auseinander.
 */
.sqlprobe-editor {
    position: relative;
    margin: 0 .75rem;
}

.sqlprobe-editor .sqlprobe-abfrage,
.sqlprobe-faerbung {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: .375rem .75rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.sqlprobe-editor .sqlprobe-abfrage {
    position: relative;
    z-index: 1;
    background: transparent;
    color: transparent;
    caret-color: var(--bs-body-color, #111827);
    /* Die Höhe kommt aus dem Skript und folgt dem Text; von Hand ziehen würde
     * die beiden Ebenen auseinanderbringen. Kein Scrollbalken, keine
     * abweichenden Umbrüche. */
    resize: none;
    overflow: hidden;
}

.sqlprobe-editor .sqlprobe-abfrage::selection { background: rgba(42, 120, 214, .25); }

.sqlprobe-faerbung {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bs-body-bg, #fff);
    border-color: var(--bs-border-color, #d1d5db);
    color: var(--bs-body-color, #111827);
}

/* Ohne Skript steht nur das Textfeld da - dann mit sichtbarer Schrift */
.sqlprobe:not(:has(.sqlprobe-faerbung)) textarea { color: inherit; }

.hl-wort { color: var(--sqlprobe-t1); font-weight: 600; }
.hl-typ { color: var(--sqlprobe-t3); }
.hl-funktion { color: var(--sqlprobe-t2); }
.hl-text { color: var(--bs-success-text-emphasis, #0f5132); }
.hl-zahl { color: var(--bs-danger-text-emphasis, #842029); }
.hl-kommentar { color: var(--bs-secondary-color, #6b7280); font-style: italic; }

/* Tabellennamen tragen die Farbe ihres Kästchens - als Tönung hinter dem Wort,
 * damit die Schrift ihren Kontrast behält */
/* Nichts hier darf die Laufweite ändern: Die Färbung liegt unter einem
 * Textfeld, das dieselben Zeichen an denselben Stellen erwartet. padding,
 * margin, border oder letter-spacing verschieben jedes Zeichen danach - und
 * damit Schreibmarke und Anzeige gegeneinander. Hintergrund, Farbe und
 * box-shadow sind layoutneutral und deshalb erlaubt. */
.hl-tabelle {
    border-radius: .2rem;
    font-weight: 600;
    background: var(--hauch);
    box-shadow: -.12em 0 0 var(--hauch), .12em 0 0 var(--hauch), inset 0 -2px 0 var(--farbe);
}

.hl-farbe-1 { --farbe: var(--sqlprobe-t1); --hauch: var(--sqlprobe-t1-hauch); }
.hl-farbe-2 { --farbe: var(--sqlprobe-t2); --hauch: var(--sqlprobe-t2-hauch); }
.hl-farbe-3 { --farbe: var(--sqlprobe-t3); --hauch: var(--sqlprobe-t3-hauch); }

/* --- Legende zu PK und FK --------------------------------------------- */

.sqlprobe-legende {
    margin-top: .6rem;
    font-size: .8rem;
    color: var(--bs-secondary-color, #6b7280);
}

.sqlprobe-legende p {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: 0 0 .2rem;
}

.sqlprobe-legende strong { color: var(--bs-body-color, #111827); font-weight: 600; }

.sqlprobe-legende .sqlprobe-marke { flex: 0 0 auto; margin: 0; }

/* Umbenennen an Ort und Stelle: das Eingabefeld sitzt genau dort, wo eben
 * noch der Name stand - gleiche Schrift, damit nichts springt. */
.sqlprobe-inline {
    box-sizing: content-box;
    padding: 0 .15rem;
    border: 1px solid var(--bs-primary, #0d6efd);
    border-radius: .2rem;
    background: var(--bs-body-bg, #fff);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: inherit;
    font-weight: inherit;
    color: var(--bs-body-color, #111827);
}

.sqlprobe-inline:focus { outline: 2px solid var(--bs-primary-border-subtle, #9ec5fe); outline-offset: 1px; }

/* Der Feldname ist jetzt ein eigenes Element - im Modell soll er aussehen
 * wie vorher der blanke Text, aber anklickbar sein. */
.sqlprobe-feldwort { cursor: text; }

.sqlprobe-kaestchen .sqlprobe-feldwort:hover {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

/* --- Datenblatt: die Zeilen einer Tabelle, zum Ändern ------------------ */

.sqlprobe-datenleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.sqlprobe-datenzahl {
    margin-left: auto;
    font-size: .75rem;
    color: var(--bs-secondary-color, #6b7280);
}

.sqlprobe-daten {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    background: var(--bs-body-bg, #fff);
}

.sqlprobe-daten th {
    white-space: nowrap;
    font-family: var(--adminuiux-content-font, sans-serif);
    font-size: .7rem;
    color: var(--bs-secondary-color, #6b7280);
}

.sqlprobe-daten td { vertical-align: middle; }

/* Eine änderbare Zelle sieht aus wie ein Feld, sobald der Zeiger darauf steht */
.sqlprobe-zelle { cursor: text; }

.sqlprobe-zelle:hover,
.sqlprobe-zelle:focus {
    background: var(--bs-tertiary-bg, #f3f4f6);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--bs-border-color, #d1d5db);
}

.sqlprobe-zellfeld {
    min-width: 5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
}

.sqlprobe-zeile-weg { padding: .1rem .4rem; }

.sqlprobe-zeile-neu { font-size: .75rem; }

.sqlprobe-datenleer {
    margin: 0 0 .5rem;
    font-size: .85rem;
    color: var(--bs-secondary-color, #6b7280);
}

.sqlprobe-wertfeld { min-width: 10rem; }