/*
  Blech-Assistent: der geführte Katalog-Dialog.

  Gestaltungsregeln dieser Datei:
  - Sie erbt das Dark-Glassmorphism-Fundament aus main.css und benutzt
    ausschließlich dessen CSS-Variablen (--glass-bg, --text-primary,
    --cta-gradient …), wo es sie gibt. Keine neuen Markenfarben.
  - Alle Selektoren sind mit `ai-` gescoped - kein Bestandsselektor wird
    berührt, die bestehende Kalkulator-Oberfläche bleibt unangetastet.
  - Touchziele sind mindestens 44 px hoch/breit.
  - Kein horizontales Scrollen bei 375/768/1024/1440 px: Der Dialog ist
    mobil bildschirmfüllend, breite Inhalte (Maßtabelle, Zeichnung)
    scrollen in ihrem eigenen Container.
*/

/* --- Overlay und Dialograhmen ------------------------------------------ */
.ai-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060; /* über Bootstrap-Modals des Bestands */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(5, 5, 10, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow-y: auto;
}

/* `hidden` muss IMMER gewinnen - auch gegen display:flex-Regeln dieser
   Datei. Ohne diese Regel wuerde z. B. der versteckte Wartehinweis
   (display:flex) trotz hidden-Attribut sichtbar bleiben. */
.ai-dialog-overlay[hidden],
.ai-dialog [hidden] {
    display: none !important;
}

body.ai-dialog-offen {
    overflow: hidden;
}

.ai-dialog {
    background: var(--dark-bg);
    background-image: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 45%,
        rgba(255, 255, 255, 0.05) 100%
    );
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    color: var(--text-primary);
    /* 920 px waren die Breite fuer EINE Spalte. Seit dem 30.08.2026 steht
       neben den Eingaben die Live-Skizze - in 920 px werden daraus zwei
       enge Spalten. Christian dazu: *"Aufteilung und so alles zu eng."* */
    width: min(1180px, 100%);
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-dialog-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0.75rem;
}

.ai-dialog-kopf h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}

.ai-dialog-kopf h2:focus {
    outline: none;
}

.ai-dialog-schliessen {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-secondary);
    min-width: 44px;
    min-height: 44px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.ai-dialog-schliessen:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

/* --- Fortschrittsanzeige ------------------------------------------------ */
/* Der Fortschritt ist seit dem 31.08.2026 eine Balkenreihe, nicht mehr eine
   Reihe nummerierter Kreise (Designpaket, Abschnitt 7). Gestaltet wird er in
   `nocad-dialog.css` unter `.nocad-progress`; hier bleibt nur der seitliche
   Rand, damit er mit Kopf, Inhalt und Fuss auf einer Flucht steht.

   Die frueheren Regeln fuer `li`, `::before`, `.ai-aktuell` und
   `.ai-erledigt` sind mit den Kreisen entfallen - sie zielten auf Elemente,
   die es nicht mehr gibt. */
.ai-dialog-schritte {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* --- Status- und Meldungsbereiche -------------------------------------- */
.ai-dialog-status {
    margin: 0;
    padding: 0 1.5rem;
    min-height: 1.3rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ai-dialog-fehler,
.ai-fehlerblock,
.ai-warnblock {
    margin: 0.5rem 1.5rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
}

.ai-fehlerblock,
.ai-warnblock {
    margin: 0 0 1rem;
}

.ai-dialog-fehler,
.ai-fehlerblock {
    background: rgba(245, 87, 108, 0.12);
    border: 1px solid rgba(245, 87, 108, 0.45);
    color: var(--text-primary);
}

.ai-warnblock {
    background: rgba(246, 231, 96, 0.1);
    border: 1px solid rgba(246, 231, 96, 0.45);
    color: var(--text-primary);
}

.ai-fehlerblock ul,
.ai-warnblock ul {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}

.ai-fehlerblock button {
    background: none;
    border: none;
    color: var(--text-primary);
    text-decoration: underline;
    cursor: pointer;
    padding: 0.35rem 0;
    min-height: 44px;
    text-align: left;
    font-size: 0.9rem;
}

/* --- Inhalt und Schritte ------------------------------------------------ */
.ai-dialog-inhalt {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Unten mehr Luft als oben: Der Fussbereich mit "Weiter" schliesst
       direkt an. Mit nur 1rem klebte der letzte Inhalt am Knopf -
       Christian am 31.08.2026: *"Text und Button zu sehr
       zusammengequetscht."* */
    padding: 0.5rem 1.5rem 1.75rem;
    overscroll-behavior: contain;
}

.ai-schritt-titel {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0.25rem 0 0.75rem;
}

.ai-schritt-titel:focus {
    outline: none;
}

.ai-schritt-hilfe {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

/* Der Einstiegssatz traegt mehr Gewicht als die uebrigen Schritt-Titel:
   Er ist das Erste, was der Kunde liest (Designpaket 7.1). */
.ai-intro-h2 {
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
    max-width: 24ch;
}

@media (max-width: 640px) {
    .ai-intro-h2 { font-size: 1.35rem; }
}

/* Die vier Schritte auf einen Blick (Designpaket 7.1). Sie ersetzen die
   Aufzaehlung der Einschraenkungen: Zuerst steht, was geht - und in welcher
   Reihenfolge. */
.ai-intro-schritte {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
}

.ai-intro-schritte li {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.9rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

.ai-intro-nummer {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: #4a545e;
}

/* Nur die erste Nummer traegt Farbe - sie zeigt, wo es losgeht. */
.ai-intro-schritte li:first-child .ai-intro-nummer {
    color: var(--nocad-accent-soft, #c77ce4);
}

.ai-intro-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ai-intro-hinweis {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Die Grenzen stehen nach dem, was geht - ruhig, nicht als Warnung. */
.ai-intro-grenzen {
    margin: 0.9rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.3rem;
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.ai-intro-grenzen li::marker {
    color: #4a545e;
}

@media (max-width: 640px) {
    /* Vier Kacheln nebeneinander waeren am Telefon je 80 px breit. Zwei
       Reihen zu zweit bleiben lesbar. */
    .ai-intro-schritte {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ai-intro-liste {
    margin: 1rem 0 0;
    padding-left: 1.3rem;
    display: grid;
    gap: 0.55rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.ai-intro-liste li::marker {
    color: var(--stale-color);
}

/* --- Katalogkarten ------------------------------------------------------ */
.ai-katalog-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.8rem;
}

.ai-karte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 72px;
    padding: 0.9rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease,
        box-shadow 0.2s ease;
}

.ai-karte:hover:not([aria-disabled="true"]) {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: 0 8px 24px -8px var(--hover-glow, rgba(158, 39, 251, 0.5));
}

.ai-karte.ai-gewaehlt {
    border-color: transparent;
    background: var(--primary-gradient);
}

/* Das Teilebild auf der Kachel (AP18). Der Kunde waehlt sein Teil nach dem
   Bild aus - deshalb steht es oben und traegt die volle Kachelbreite.
   `aspect-ratio` haelt das Raster ruhig, auch waehrend die Bilder noch
   laden: Ohne sie springen die Kacheln beim Nachladen. */
.ai-karte-bild {
    width: 100%;
    /* `height: auto` ist hier KEINE Kosmetik, sondern Pflicht.
       Das Bild traegt die Attribute `width="640" height="480"` - sie
       reservieren den Platz, bevor die Datei da ist, und verhindern das
       Springen der Kachelwand. Ohne `height: auto` gewinnt aber die 480 aus
       dem Attribut: Die Kachel wird volle Breite mal 480 Pixel hoch, und
       das Teil schwimmt in der Mitte einer riesigen Flaeche. Genau so sah
       es am 27.08.2026 in der Beta aus. Mit `height: auto` gilt wieder das
       Seitenverhaeltnis. */
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 0.15rem;
}

.ai-karte-titel {
    font-weight: 600;
    font-size: 0.95rem;
}

.ai-karte-gruppe {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ai-karte.ai-gewaehlt .ai-karte-gruppe {
    color: rgba(255, 255, 255, 0.8);
}

.ai-karte[aria-disabled="true"] {
    cursor: default;
    opacity: 0.55;
}

.ai-karte-bald {
    font-size: 0.75rem;
    color: var(--stale-color);
}

/* --- Formular ----------------------------------------------------------- */
#ai-formular-felder {
    display: grid;
    gap: 1.1rem;
}

.ai-abschnitt {
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1rem 1.1rem 1.1rem;
    margin: 0;
    background: rgba(255, 255, 255, 0.02);
}

.ai-abschnitt legend {
    float: none;
    width: auto;
    padding: 0 0.4rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ai-feldraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.8rem 1rem;
}

.ai-feld {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ai-feld[hidden] {
    display: none;
}

.ai-feld label {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.ai-feld-einheit {
    color: var(--text-secondary);
}

.ai-feld input[type="number"],
.ai-feld select {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-primary);
    font-size: 1rem;
    width: 100%;
}

.ai-feld select option {
    background-color: #14141c;
    color: var(--text-primary);
}

.ai-feld-kontrollzeile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
}

.ai-feld input[type="checkbox"],
.ai-freigabe-zeile input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
    accent-color: #9e27fb;
    flex: 0 0 auto;
}

.ai-feld-hilfe {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
}

.ai-feld-fehler {
    font-size: 0.8rem;
    color: var(--error-color);
    margin: 0;
}

.ai-feld.ai-feld-ungueltig input,
.ai-feld.ai-feld-ungueltig select {
    border-color: var(--error-color);
}

.ai-wiederholung-eintrag {
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
    padding: 0.8rem;
    margin-bottom: 0.8rem;
}

.ai-wiederholung-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Phase 2f: Der Weg zur Kartenwand aus dem Skizzenschritt. Bewusst ein
   Textknopf und keine Karte: Er ist die ZWEITE Wahl und soll neben dem
   Hochladefeld nicht um Aufmerksamkeit ringen - erreichbar in einem Klick,
   aber nicht lauter als der Hauptweg (9.1). Trotzdem ein echter <button>
   mit 44px Trefferflaeche, kein verkleideter Link. */
.ai-ohne-skizze {
    margin: -0.2rem 0 0.9rem;
}

.ai-textknopf {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.35rem 0;
    background: none;
    border: none;
    color: var(--accent-color, #7ab2ff);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ai-textknopf:hover,
.ai-textknopf:focus-visible {
    color: #a8ccff;
}

.ai-nebenknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ai-nebenknopf:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}

.ai-nebenknopf:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Vorschau: Register, Zeichnung, Freigabe ---------------------------- */
.ai-wartehinweis {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.2rem 0.2rem;
    color: var(--text-secondary);
}

.ai-register {
    display: flex;
    gap: 0.4rem;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 1rem;
}

.ai-register-knopf {
    min-height: 44px;
    padding: 0.6rem 1.1rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
}

.ai-register-knopf[aria-selected="true"] {
    color: var(--text-primary);
    border-bottom-color: #9e27fb;
    font-weight: 600;
}

.ai-panel {
    min-height: 260px;
}

#ai-panel-modell model-viewer {
    width: 100%;
    height: min(48vh, 420px);
    background-color: transparent;
    border-radius: 12px;
}

.ai-zoomleiste {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.ai-zoom-knopf {
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.75rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.ai-zoom-knopf:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ai-zeichnung-halter {
    overflow: auto;
    /* Die Zeichnung ist der Kern des Freigabeschritts - an ihr entscheidet
       sich, ob gefertigt wird. Wie viel Platz sie bekommt, steht am Panel
       (`#ai-panel-zeichnung`). Hier steht nur die Obergrenze fuer den
       Fall, dass sie ohne Flex-Panel verwendet wird - sie muss ueber der
       Panel-Kappe (860 px) liegen, sonst deckelt sie das Panel wieder. */
    max-height: min(75vh, 880px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: #ffffff;
    touch-action: pan-x pan-y;
}

.ai-zeichnung-halter img {
    display: block;
    max-width: none;
    /* Gezoomt wird seit dem 03.09.2026 ueber die Pixelbreite, nicht mehr
       per transform - das SVG wird je Stufe neu gerastert und bleibt
       scharf; die Hoehe folgt dem Seitenverhaeltnis von selbst. */
    transition: width 0.15s ease;
}

.ai-masstabelle-halter {
    margin-top: 0.75rem;
    /* Nie zusammendruecken lassen: Vor dem 03.09.2026 quetschte das feste
       Zeichnungs-Panel die offene Tabelle auf einen Streifen mit
       Mini-Scrollbalken ("gar nicht lesbar"). Jetzt ist sie zugeklappt
       einzeilig; aufgeklappt scrollt sie im eigenen Bereich. */
    flex: 0 0 auto;
}

.ai-masstabelle-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.55rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    list-style: none;
}

.ai-masstabelle-summary::before {
    content: '▸';
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}

.ai-masstabelle-details[open] > .ai-masstabelle-summary::before {
    transform: rotate(90deg);
}

.ai-masstabelle-summary::-webkit-details-marker {
    display: none;
}

.ai-masstabelle-summary:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ai-masstabelle-scroll {
    max-height: min(34vh, 320px);
    overflow: auto;
    margin-top: 0.6rem;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0 0.5rem;
}

.ai-masstabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.ai-masstabelle th,
.ai-masstabelle td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--glass-border);
    text-align: left;
    color: var(--text-primary);
}

.ai-masstabelle th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-freigabe {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.ai-freigabe-hinweis {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ai-freigabe-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.ai-freigabe-zeile label {
    font-size: 0.95rem;
    padding-top: 0.05rem;
    cursor: pointer;
}

.ai-freigabe-zeile input:disabled + label {
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* --- Preis -------------------------------------------------------------- */
/* Die Positionstabelle scrollt in ihrem eigenen Container (wie die
   Maßtabelle) - auf 375 px schiebt sonst die Tabelle den ganzen
   Schrittinhalt horizontal aus dem Bild. */
.ai-preis-tabelle-halter {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.ai-preis-positionen {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.ai-preis-positionen th,
.ai-preis-positionen td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--glass-border);
    text-align: left;
}

.ai-preis-positionen th {
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-preis-summen {
    display: grid;
    gap: 0.35rem;
    justify-items: end;
    padding: 1rem 1.1rem;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.ai-preis-zeile {
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    width: 100%;
    max-width: 340px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.ai-preis-zeile.ai-preis-brutto {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    border-top: 1px solid var(--glass-border);
    padding-top: 0.45rem;
    margin-top: 0.25rem;
}

/* Innendienst-Knoepfe unter dem Preis (03.09.2026). Kunden sehen den
   Block nie - er wird nur fuer admin/employee gerendert. Die gestrichelte
   Kante markiert ihn als internen Bereich, nicht als Kundenweg. */
.ai-preis-innendienst {
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
}

.ai-preis-innendienst-hinweis {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.ai-preis-innendienst-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Der STEP-Download ist ein Anker im Knopfgewand - ohne diese Zeile
   unterstriche ihn der Browser wie einen Textlink. */
a.ai-nebenknopf {
    text-decoration: none;
}

/* Die Vorgangsmappe im internen Bereich (03.09.2026): mehrere Positionen
   sammeln, Schachtelplan erzeugen, easybill-Auftrag anlegen. */
.ai-vorgang {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--glass-border);
}

.ai-vorgang-titel {
    margin: 0 0 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.ai-vorgang-liste {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.ai-vorgang-liste li {
    margin-bottom: 0.2rem;
}

.ai-vorgang-entfernen {
    border: none;
    background: none;
    padding: 0 0.2rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}

.ai-vorgang-ausgabe {
    margin-top: 0.6rem;
    font-size: 0.88rem;
}

.ai-vorgang-ausgabe a {
    color: inherit;
    font-weight: 600;
}

.ai-vorgang-hinweis {
    margin: 0.35rem 0;
    color: var(--text-secondary);
}

.ai-vorgang-fehler {
    margin: 0.35rem 0;
    color: #ffb0b0;
}

.ai-vorgang-datei {
    margin: 0.35rem 0;
}

.ai-easybill {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-easybill-suchzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ai-easybill-suchzeile select,
.ai-easybill-suchzeile input {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.ai-easybill-suchzeile input {
    flex: 1 1 14rem;
    min-width: 0;
}

.ai-easybill-treffer {
    margin: 0;
    font-size: 0.88rem;
}

.ai-beta-hinweis {
    margin: 1.25rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(246, 231, 96, 0.1);
    border: 1px solid rgba(246, 231, 96, 0.45);
    font-size: 0.9rem;
}

.ai-beta-hinweis i {
    margin-right: 0.45rem;
    color: var(--stale-color);
}

/* --- Bestätigung und Fußzeile ------------------------------------------- */
.ai-dialog-bestaetigung {
    margin: 0 1.5rem 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(245, 87, 108, 0.45);
    border-radius: 14px;
    background: rgba(245, 87, 108, 0.1);
}

.ai-dialog-bestaetigung p {
    margin: 0 0 0.8rem;
}

.ai-bestaetigung-knoepfe {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.ai-dialog-fuss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem 1.35rem;
    border-top: 1px solid var(--glass-border);
    /* Der Fuss liegt ueber dem scrollenden Inhalt. Ohne eigenen Grund
       scheint der letzte Text hindurch, sobald gescrollt wird - und die
       Trennlinie allein reicht dafuer nicht. */
    background: var(--dark-bg);
}

.ai-dialog-fuss #ai-weiter {
    min-height: 48px;
    margin-left: auto;
}

/* --- Beschreiben-Weg (AP10) ---------------------------------------------- */
.ai-beschreiben-einstieg {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
}

.ai-karte-beschreiben {
    width: 100%;
    border-style: dashed;
}

.ai-beschreiben-textfeld textarea {
    width: 100%;
    min-height: 6.5rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font: inherit;
    resize: vertical;
}

.ai-beschreiben-zaehler {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: right;
}

.ai-beschreiben-upload {
    margin-top: 0;
}

/* Schritt "Skizze oder Form": Text links, Hochladen rechts.

   Bis zum 30.08.2026 standen beide untereinander, dazu ein vierzeiliger
   Einleitungstext und ein neunzeiliger Dateihinweis. Ergebnis: Man musste
   scrollen, bevor man ueberhaupt etwas eingeben konnte - Christians
   Punkt 1 vom selben Tag. */
/* Eine Spalte, nicht mehr zwei (Designpaket 7.2, 31.08.2026).

   Zwei Spalten waren richtig, solange Textfeld und Ablageflaeche
   GLEICHZEITIG dastanden. Seit der Kunde vorher den Weg waehlt, ist immer
   nur eines davon sichtbar - in zwei Spalten stuende es dann auf der halben
   Breite, und die vier Kacheln darueber waren nur 129 statt 190 px breit
   (die Titel brachen um). */
#ai-beschreiben-eingabe {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Der Dateihinweis: richtig, aber erst interessant, wenn etwas
   schiefgeht. Zugeklappt kostet er eine Zeile statt neun. */
.ai-beschreiben-dateihilfe {
    margin-top: 0.7rem;
}

.ai-beschreiben-dateihilfe > summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ai-beschreiben-dateihilfe[open] > summary {
    margin-bottom: 0.4rem;
}

.ai-beschreiben-upload-titel {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.ai-dropzone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 44px;
    padding: 0.85rem 1rem;
    border: 2px dashed var(--glass-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    text-align: center;
}

.ai-dropzone.ai-dropzone-aktiv {
    border-color: #b06bff;
    background: rgba(176, 107, 255, 0.08);
}

.ai-beschreiben-uploads {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.ai-upload-zeile {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.ai-upload-thumbnail {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
}

.ai-upload-info {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.ai-upload-name {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-upload-status {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.ai-upload-status.ai-upload-bereit {
    color: #7ee2a8;
}

.ai-upload-status.ai-upload-fehler {
    color: #ff9c9c;
}

.ai-beschreiben-keine {
    margin: 0.75rem 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.9rem;
}

.ai-kandidat {
    text-align: left;
}

/* Die Vorschlagsliste ist keine Kachelwand. Hier stehen zwei oder drei
   Karten, nicht 23 - mit der Rasterbreite des Katalogs geraten sie zu
   schmalen Streifen am linken Rand, waehrend rechts daneben nichts steht.
   Deshalb eigene Spuren: mindestens 200, hoechstens 260 Pixel breit, leere
   Spuren fallen weg (`auto-fit`). So liegen zwei Vorschlaege nebeneinander
   und sind gross genug, dass man das Teil auf dem Bild erkennt. */
.ai-kandidatenliste {
    grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
}

/* Status-Abzeichen der vorbefüllten Formularfelder */
.ai-feld-abzeichen {
    justify-self: start;
    display: inline-block;
    margin-bottom: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ai-abzeichen-erkannt {
    background: rgba(126, 226, 168, 0.14);
    border: 1px solid rgba(126, 226, 168, 0.5);
    color: #7ee2a8;
}

/* Die Teileliste eines Blattes mit mehreren Teilen (Abschnitt 6a).
   Bewusst ruhig und ohne Warnfarbe: Mehrere Teile auf einem Blatt sind
   der Normalfall eines Bauvorhabens, kein Problemfall. */
.ai-teileliste {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.ai-teileliste-hilfe {
    margin: 0.3rem 0 0.6rem;
    font-size: 0.88rem;
    opacity: 0.85;
}

.ai-teileliste-eintraege {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ai-teileliste-knopf {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ai-teileliste-knopf:hover,
.ai-teileliste-knopf:focus-visible {
    border-color: rgba(122, 178, 255, 0.7);
    background: rgba(122, 178, 255, 0.1);
}

.ai-teileliste-hier {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(122, 178, 255, 0.55);
    border-radius: 8px;
    background: rgba(122, 178, 255, 0.12);
}

.ai-teileliste-name {
    font-weight: 600;
}

.ai-teileliste-stand,
.ai-teileliste-marke {
    font-size: 0.8rem;
    opacity: 0.8;
    white-space: nowrap;
}

/* Berechnet: der Wert stand NICHT als Zahl auf dem Blatt, ergibt sich aber
   zwingend aus anderen Angaben (Lochmitte aus Abstaenden, Restkante des
   Konturschliessers). Eigene Farbe, weil weder "erkannt" noch "angenommen"
   stimmt: Es ist keine Annahme - es ist eine Rechnung, und der Kunde soll
   sie nachrechnen koennen (6e.4). */
.ai-abzeichen-berechnet {
    background: rgba(122, 178, 255, 0.14);
    border: 1px solid rgba(122, 178, 255, 0.55);
    color: #7ab2ff;
}

/* Angenommen: der Wert stand NICHT in der Skizze, sondern ist die fachlich
   uebliche Lage eines erkannten Merkmals. Bewusst auffaelliger als
   "Erkannt" - der Kunde muss hier wirklich hinsehen. */
.ai-abzeichen-angenommen {
    background: rgba(255, 167, 64, 0.16);
    border: 1px solid rgba(255, 167, 64, 0.6);
    color: #ffa740;
}

.ai-abzeichen-fehlt {
    background: rgba(246, 231, 96, 0.12);
    border: 1px solid rgba(246, 231, 96, 0.5);
    color: var(--stale-color, #f6e760);
}

.ai-abzeichen-konflikt {
    background: rgba(245, 87, 108, 0.12);
    border: 1px solid rgba(245, 87, 108, 0.55);
    color: #ff9c9c;
}

/* Die Vermerke des Annahmenkatalogs (6e.5). Sie sind bewusst KEINE
   Warnung: Eine Annahme ist eine Feststellung, die man mit einem Klick
   bestaetigt - keine Frage, die eine Eingabe erzwingt. Deshalb ruhige
   Farben und normale Schrift, kein Rot und kein Ausrufezeichen. */
.ai-annahmen-liste {
    margin: 0.35rem 0 0.75rem;
    padding-left: 1.15rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ai-annahmen-liste li {
    margin-bottom: 0.3rem;
}

/* Eine Annahme ist antippbar: „Passt so" oder zum Feld springen (2e).
   Der Satz steht links, die zwei Knöpfe rechts daneben - auf schmalen
   Bildschirmen rutschen sie darunter. */
.ai-annahmen-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
}

.ai-annahme-text {
    flex: 1 1 220px;
}

.ai-annahme-knoepfe {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.ai-annahme-knopf {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.ai-annahme-knopf:hover {
    border-color: transparent;
    background: var(--primary-gradient);
}

.ai-annahme-knopf[aria-pressed="true"] {
    border-color: rgba(120, 220, 150, 0.6);
    color: #8fe0a8;
}

/* Durchgesehen - der Satz tritt zurück, verschwindet aber nicht: Eine
   Annahme bleibt sichtbar, solange sie gilt (6e.5). */
.ai-annahme-bestaetigt .ai-annahme-text {
    opacity: 0.7;
}

.ai-annahme-hinweis {
    font-size: 0.8rem;
    opacity: 0.75;
}

/* Nach zwei Rückfragerunden wird ein Mensch angeboten (5.3 Punkt 4). Kein
   Rot: Es ist kein Fehler des Kunden, dass die Skizze schwierig ist. */
.ai-manuelle-pruefung {
    margin: 0.6rem 0 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--glass-bg);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Ab vier Annahmen an einem Teil: Scheingenauigkeit ist dann das eigentliche
   Risiko, und der Hinweis darf auffallen (Abschnitt 15). */
.ai-annahmen-warnung {
    margin: 0.5rem 0 0.25rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 167, 64, 0.55);
    background: rgba(255, 167, 64, 0.1);
    font-size: 0.88rem;
}

.ai-feld-annahme-hinweis {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    opacity: 0.85;
}

.ai-beschreiben-keine p {
    margin: 0 0 0.5rem;
}

.ai-beschreiben-keine p:last-child {
    margin-bottom: 0;
}

.ai-feld-konflikt-hinweis {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: #ff9c9c;
}

/* --- Abbruch ohne Datenrest (Phase 2e) ---------------------------------- */
/* Der Knopf ist bewusst zurückhaltend: Er ist der Ausweg, nicht das Ziel.
   Auffällig genug, um ihn zu finden - nicht so auffällig, dass jemand
   versehentlich seine Skizze löscht. */
.ai-abbruchknopf {
    color: #ff9c9c;
    border-color: rgba(245, 87, 108, 0.45);
}

.ai-abbruchknopf:hover {
    border-color: rgba(245, 87, 108, 0.8);
    background: rgba(245, 87, 108, 0.12);
}

.ai-abbruch-hinweis {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    opacity: 0.8;
}

/* --- „Vertauscht - Maße tauschen" (Abschnitt 8.3) ------------------------ */
/* Steht direkt unter dem 3D-Bild: Dort trifft der Kunde die Entscheidung,
   nicht im Formular. Ruhige Farben - es ist eine Feststellung mit einem
   Ausweg, keine Warnung. */
.ai-vertausch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--glass-bg);
}

.ai-vertausch-text {
    margin: 0;
    flex: 1 1 240px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.ai-vertausch-knopf {
    flex: 0 0 auto;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ai-vertausch-knopf:hover:not(:disabled) {
    border-color: transparent;
    background: var(--primary-gradient);
}

.ai-vertausch-knopf:disabled {
    opacity: 0.55;
    cursor: default;
}

/* --- Fokus-Sichtbarkeit -------------------------------------------------- */
.ai-dialog button:focus-visible,
.ai-dialog input:focus-visible,
.ai-dialog select:focus-visible,
.ai-dialog textarea:focus-visible,
.ai-dialog [role="tabpanel"]:focus-visible,
.ai-karte:focus-visible {
    outline: 3px solid #b06bff;
    outline-offset: 2px;
    border-radius: 10px;
}

/* --- Responsiv ----------------------------------------------------------- */
@media (max-width: 767px) {
    .ai-dialog-overlay {
        padding: 0;
        align-items: stretch;
    }

    .ai-dialog {
        width: 100%;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .ai-dialog-kopf,
    .ai-dialog-schritte,
    .ai-dialog-status,
    .ai-dialog-inhalt,
    .ai-dialog-fuss,
    .ai-dialog-bestaetigung,
    .ai-dialog-fehler {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-left: 0;
        margin-right: 0;
    }

    .ai-feldraster {
        grid-template-columns: 1fr;
    }

    .ai-katalog-liste {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    /* Kompaktere Preisspalten mobil; nowrap haelt die Zellen lesbar,
       gescrollt wird im eigenen Halter. */
    .ai-preis-positionen th,
    .ai-preis-positionen td {
        padding: 0.45rem 0.5rem;
        font-size: 0.82rem;
        white-space: nowrap;
    }
}

/* --- Reduzierte Bewegung -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ai-dialog *,
    .ai-dialog {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Beta-Kennzeichnung und Anfrage (29.08.2026)

   Das Band steht ueber ALLEN Schritten des Dialogs, nicht erst beim Preis:
   Wer seine Skizze hochlaedt, hat sonst schon Arbeit investiert, bevor er
   erfaehrt, dass er hier nicht bestellen kann.
   --------------------------------------------------------------------------- */

.ai-beta-plakette {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 193, 7, 0.18);
    border: 1px solid rgba(255, 193, 7, 0.5);
    color: #ffc107;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
    vertical-align: middle;
}

.ai-beta-band {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 193, 7, 0.35);
    border-left: 3px solid #ffc107;
    background: rgba(255, 193, 7, 0.08);
    font-size: 0.9rem;
    line-height: 1.45;
}

.ai-beta-band i {
    margin-top: 2px;
    color: #ffc107;
    flex: 0 0 auto;
}

/* Ein einspaltiges Formular: Auf dem Telefon ist alles andere unbrauchbar,
   und auf dem Rechner sind fuenf Felder zu wenig, als dass zwei Spalten
   etwas sparen wuerden. */
.ai-anfrage-felder {
    display: grid;
    gap: 4px 0;
    max-width: 460px;
}

.ai-anfrage-felder label {
    margin-top: 10px;
    font-size: 0.86rem;
    color: var(--text-secondary, #b4b4b4);
}

.ai-anfrage-felder input,
.ai-anfrage-felder textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
    background: var(--glass-bg, rgba(255, 255, 255, 0.05));
    color: inherit;
    font: inherit;
}

.ai-anfrage-felder textarea {
    resize: vertical;
    min-height: 68px;
}

.ai-pflicht {
    color: #ffc107;
}

.ai-anfrage-erklaerung {
    margin: 0 0 4px;
}

.ai-anfrage-datenschutz {
    margin: 14px 0 10px;
    max-width: 460px;
    font-size: 0.8rem;
    color: var(--text-secondary, #b4b4b4);
}

.ai-anfrage-fehler {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--error-color, #f5576c);
    background: rgba(245, 87, 108, 0.1);
    font-size: 0.88rem;
}

.ai-anfrage-danke {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(40, 167, 69, 0.4);
    background: rgba(40, 167, 69, 0.08);
}

.ai-anfrage-danke i {
    color: var(--success-color, #28a745);
    margin-right: 6px;
}

.ai-anfrage-danke p {
    margin: 0 0 8px;
}

.ai-anfrage-danke p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Der Vorschau-Schritt passt sich der Fensterhoehe an (29.08.2026)

   Vorher hatte die 3D-Ansicht eine feste Hoehe (`min(48vh, 420px)`). Zusammen
   mit Kopf, Schrittleiste, Registern, Zoomleiste, Freigabebox und Fusszeile
   war das mehr, als der Dialog hoch ist - man musste zum Freigabehaken
   scrollen, ohne dass irgendetwas darauf hindeutete. Christian hat es
   gemeldet: "In der Ansicht muss man so doof scrollen."

   Die Loesung ist keine kleinere feste Hoehe (die waere auf einem grossen
   Bildschirm Verschwendung und auf einem kleinen immer noch zu gross),
   sondern eine, die sich den uebrigen Platz teilt: Alles Feste bekommt
   seinen Raum zuerst, die 3D-Ansicht nimmt den Rest.

   `min-height: 0` ist dabei kein Beiwerk. Ohne diese Angabe weigert sich ein
   Flex-Element, kleiner zu werden als sein Inhalt - die Ansicht wuerde also
   NICHT schrumpfen, und alles bliebe beim Alten.
   --------------------------------------------------------------------------- */

.ai-dialog-inhalt {
    display: flex;
    flex-direction: column;
}

#ai-schritt-vorschau {
    flex: 1 1 auto;
    min-height: 0;
}

/* Nur wenn der Schritt sichtbar ist - `hidden` gewinnt oben per !important,
   diese Regel darf ihm nicht in die Quere kommen. */
#ai-schritt-vorschau:not([hidden]) {
    display: flex;
    flex-direction: column;
}

#ai-vorschau-inhalt:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Das Modellfeld nimmt den Rest - die Freigabebox darunter behaelt ihren
   Platz und bleibt sichtbar. */
#ai-panel-modell:not([hidden]) {
    display: flex;
    flex: 1 1 auto;
    min-height: 180px;
}

#ai-panel-modell model-viewer {
    flex: 1 1 auto;
    height: auto;
    min-height: 180px;
}

/* Die Zeichnung scrollt in sich selbst, statt den ganzen Dialog zu
   verlaengern - dort ist Scrollen richtig, weil ein Plan nun einmal
   groesser ist als der Bildschirm. */
#ai-panel-zeichnung:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* Hier - und nur hier - steht, wie viel Platz die Zeichnung bekommt.
       Der Halter darin darf schrumpfen und scrollen; das Panel sorgt
       dafuer, dass ueberhaupt etwas zu schrumpfen da ist.

       Bis zum 03.09.2026 stand hier `min(58vh, 520px)` - auf grossen
       Bildschirmen verschenkte die 520-px-Kappe ein Drittel der Hoehe,
       waehrend die Zeichnung winzig blieb (Christian: "das fenster
       muesste groesser sein"). Auf kleinen Fenstern (58vh unter 520 px)
       aendert sich nichts; die Kappe liegt jetzt erst bei 860 px, damit
       Freigabekasten und Fusszeile sichtbar bleiben. */
    height: min(58vh, 860px);
}

/* Im Vorschau-Schritt (Klasse setzt aiDesign.js) waechst der Dialog auf die
   volle Fensterhoehe und die Zeichnung nimmt allen Platz, den Freigabebox
   und Fusszeile uebrig lassen. Vorher galt nur die feste Kappe oben - auf
   einem grossen Bildschirm blieb die weisse Zeichenflaeche bei rund einem
   Drittel des Fensters stehen (Christian, 03.09.2026: "die weisse
   zeichenflaeche nimmt nur 30% des screens ein und muss groesser
   werden"). */
.ai-dialog.ai-dialog-vorschau {
    height: calc(100vh - 3rem);
}

.ai-dialog-vorschau #ai-panel-zeichnung:not([hidden]) {
    flex: 1 1 auto;
    height: auto;
    min-height: min(50vh, 520px);
}

.ai-dialog-vorschau .ai-zeichnung-halter {
    /* Die Hoehe regelt hier das Flex-Panel; die Kappe der Einzelnutzung
       wuerde sonst mitten im grossen Dialog deckeln. */
    max-height: none;
}

/* ---------------------------------------------------------------------------
   Vollbild-Zeichnung (03.09.2026)
   ---------------------------------------------------------------------------
   Der Knopf "Vollbild" in der Zoomleiste schaltet den Dialog in eine reine
   Zeichnungsansicht: voller Bildschirm, weisse Flaeche maximal, dazu nur
   die wichtigsten Werkzeuge (Zoomleiste, Masstabelle, Schliessen). Esc
   oder ein zweiter Klick fuehren zurueck - der Dialogzustand bleibt
   unveraendert stehen.
   -------------------------------------------------------------------------*/
.ai-dialog-overlay.ai-vollbild-offen {
    padding: 0;
}

.ai-dialog.ai-zeichnung-vollbild {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
}

/* Alles, was nicht Zeichnung oder Werkzeug ist, tritt im Vollbild ab. Die
   Freigabebox gehoert bewusst dazu: Freigegeben wird nach dem Pruefen, in
   der normalen Ansicht mit dem ganzen Kontext. */
.ai-dialog.ai-zeichnung-vollbild .ai-dialog-schritte,
.ai-dialog.ai-zeichnung-vollbild .ai-dialog-status,
.ai-dialog.ai-zeichnung-vollbild #ai-beta-band,
.ai-dialog.ai-zeichnung-vollbild #ai-vorschau-titel,
.ai-dialog.ai-zeichnung-vollbild .ai-register,
.ai-dialog.ai-zeichnung-vollbild #ai-vertausch,
.ai-dialog.ai-zeichnung-vollbild #ai-kette,
.ai-dialog.ai-zeichnung-vollbild #ai-freigabe,
.ai-dialog.ai-zeichnung-vollbild .ai-dialog-fuss {
    display: none !important;
}

.ai-dialog.ai-zeichnung-vollbild #ai-panel-zeichnung:not([hidden]) {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

#ai-zeichnung-halter {
    flex: 1 1 auto;
    /* `min-height: 0` ist hier KEINE Feinheit, sondern Voraussetzung.
       Ohne sie darf ein Flex-Element nicht unter seine Inhaltsgroesse
       schrumpfen - der Halter waechst dann auf die volle Hoehe des
       Bildes, und `overflow: auto` greift nie.

       Am 30.08.2026 wurde sie entfernt, um das Briefschlitz-Fenster zu
       beheben. Das war die falsche Stellschraube: Am 31.08.2026 war die
       Ansicht dadurch komplett unbrauchbar - der Halter so hoch wie die
       Zeichnung, der Freigabekasten irgendwo weit darunter.

       Die Mindesthoehe gehoert an das PANEL (siehe oben), nicht an den
       scrollenden Halter. */
    min-height: 0;
    overflow: auto;
}

/* Die Freigabebox darf nie schrumpfen: Sie ist der Grund, warum dieser
   Schritt existiert. */
#ai-freigabe {
    flex: 0 0 auto;
}

.ai-panel {
    min-height: 0;
}

/* Auf sehr niedrigen Fenstern (Notebook mit offener Werkzeugleiste) wird die
   3D-Ansicht als Erstes kleiner - lieber ein kleineres Modell als ein
   unsichtbarer Freigabeknopf. */
@media (max-height: 760px) {
    #ai-panel-modell:not([hidden]),
    #ai-panel-modell model-viewer {
        min-height: 140px;
    }
}

/* ---------------------------------------------------------------------------
   Die Live-Skizze (30.08.2026)
   ---------------------------------------------------------------------------
   Christian am 30.08.2026: *"Die Bilder irritieren, weil man z.B. einen
   Winkel moechte, bekommt dann aber das Bild der Kantteilfamilie angezeigt.
   Der Kunde denkt: oh, das will ich nicht."*

   Deshalb steht neben den Feldern jetzt keine Beispielabbildung mehr,
   sondern SEIN Teil - vom Server aus den bisherigen Angaben gezeichnet und
   bei jeder Eingabe neu geholt.

   Die zwei Spalten sind zugleich die Antwort auf *"das Scrollen muss aus
   dem Interface komplett raus"*: Sie halbieren die Hoehe des Formulars.
   -------------------------------------------------------------------------*/
.ai-formular-buehne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: 2rem;
    align-items: start;
}

/* Unter 900 px steht die Skizze ueber den Feldern, nicht daneben: Zwei
   Spalten auf einem Telefon ergaeben zwei zu schmale Spalten. Oben und
   nicht unten, weil sie sonst niemand sieht, der beim Tippen ist. */
@media (max-width: 900px) {
    .ai-formular-buehne {
        grid-template-columns: minmax(0, 1fr);
    }
    .ai-live-skizze {
        order: -1;
    }
}

.ai-live-skizze {
    margin: 0;
    padding: 0.75rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    /* Bleibt beim Scrollen der Felderspalte stehen. Ohne `top` waere
       "sticky" wirkungslos. */
    position: sticky;
    top: 1rem;
}

.ai-live-skizze img {
    display: block;
    width: 100%;
    height: auto;
    /* Dieselbe Flaeche wie die SVG-Leinwand (420 x 320). Sie reserviert den
       Platz, bevor das Bild da ist - sonst springt die Spalte bei jeder
       Aktualisierung. */
    aspect-ratio: 420 / 320;
    /* Die Zeichnung kommt in dunklen Linien auf durchsichtigem Grund. Auf
       der dunklen Oberflaeche waere sie unsichtbar - deshalb bekommt sie
       ihr eigenes helles Blatt. So sieht sie auch aus wie das, was sie
       ist: eine Skizze auf Papier. */
    background: #f7f9fc;
    border-radius: 10px;
}

.ai-live-skizze figcaption {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-muted, rgba(255, 255, 255, 0.62));
}

/* Dieselbe Zeichnung, kleiner, auf den Vorschlagskarten. Dort ersetzt sie
   das Katalogbild: Der Kunde vergleicht zwei erkannte Teileformen - beide
   mit SEINEN Zahlen, nicht mit fremden Beispielmassen. */
.ai-karte-skizze {
    width: 100%;
    height: auto;
    aspect-ratio: 420 / 320;
    object-fit: contain;
    border-radius: 10px;
    background: #f7f9fc;
    margin-bottom: 0.15rem;
}

/* ---------------------------------------------------------------------------
   Der Fokus-Modus: eine Frage pro Bildschirm (30.08.2026)
   ---------------------------------------------------------------------------
   Christian: *"Der Kunde sollte den Schritt, in dem die Maske nach den
   Daten kommt, gar nicht sehen, weil das viel zu kompliziert ist."*

   Das Formular bleibt vollstaendig im DOM - es wird nur bis auf ein Feld
   ausgeblendet. Das ist keine Kosmetik, sondern Absicht: Am Formular
   haengen Typisierung, Feldabhaengigkeiten und das Absenden.

   WICHTIG: Hier steht `display: none` ueber eine Klasse und NICHT das
   `hidden`-Attribut. Ein Feldeintrag liefert seinen Wert nur, solange sein
   Rahmen nicht `hidden` ist - mit `hidden` versteckte Felder wuerden beim
   Absenden geloescht.
   -------------------------------------------------------------------------*/
.ai-fokus .ai-abschnitt {
    border: none;
    padding: 0;
    margin: 0;
}

/* Im Fokus-Modus verschwinden die Abschnittsueberschriften ("Material,
   Dicke und Menge"). Eine Ueberschrift ueber genau einem Feld ordnet
   nichts - sie verdoppelt nur den Text ueber dem Kaestchen. */
.ai-fokus .ai-abschnitt > legend {
    display: none;
}

/* Wiederholabschnitte - Lochbilder, Ausschnitte, Gewinde - sind im
   Fokus-Modus komplett weg. Sie sind nie Pflicht, und ihre Knoepfe
   "Eintrag hinzufuegen" standen am 30.08.2026 zu dritt unter einer Frage
   nach dem Material. Christian: *"Das kapiert auch keiner."*
   Wer ein Loch braucht, kommt ueber "Lieber alle Angaben auf einmal"
   heran. */
.ai-fokus .ai-abschnitt-wiederholung {
    display: none;
}

.ai-fokus .ai-feld {
    display: none;
}

.ai-fokus .ai-feld.ai-feld-im-fokus {
    display: block;
}

/* Das eine sichtbare Feld darf gross sein - es ist das Einzige auf dem
   Bildschirm. */
.ai-fokus .ai-feld-im-fokus input,
.ai-fokus .ai-feld-im-fokus select {
    font-size: 1.15rem;
    padding: 0.7rem 0.8rem;
}

.ai-fokus-frageblock {
    margin-bottom: 0.9rem;
}

.ai-fokus-zaehler {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
}

.ai-fokus-frage {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35;
    font-weight: 600;
}

#ai-fokus-umschalter {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Ein Bildschirm, eine Aufgabe (30.08.2026)
   ---------------------------------------------------------------------------
   Christian nach dem zweiten Durchlauf: *"Bei Punkt 2 muss ich noch immer
   scrollen!! Das nervt! Stell dir vor du waerst Apple - mach das Interface
   so, als wuerde Apple es machen."*

   Der Umbau davor hatte an den Symptomen gearbeitet (zwei Spalten, kuerzere
   Texte). Der Grund lag darin, dass in jedem Schritt MEHRERE Aufgaben
   gleichzeitig standen: Eingabe UND Auswahl, Annahmen UND Frage,
   Rueckfragenliste UND dieselben Fragen einzeln.

   Diese Regeln setzen die Reihenfolge durch: Was gerade nicht die Aufgabe
   ist, ist zugeklappt oder weg.
   -------------------------------------------------------------------------*/

/* Die Vorschlagskarten: drei nebeneinander, ohne dass die Wand waechst.
   Die Skizze bekommt eine feste, moderate Hoehe - vorher richtete sie sich
   nach der Kachelbreite, und drei Karten waren zusammen hoeher als der
   halbe Dialog. */
.ai-kandidatenliste .ai-karte-skizze {
    aspect-ratio: auto;
    height: clamp(96px, 15vh, 150px);
    object-fit: contain;
}

.ai-kandidatenliste .ai-karte {
    padding: 0.6rem;
    gap: 0.2rem;
}

.ai-kandidatenliste .ai-karte-gruppe {
    font-size: 0.72rem;
}

/* Der Annahmen-Kasten: eine Zeile, bis jemand sie aufklappt.

   Nicht weglassen - eine Annahme ohne sichtbaren Vermerk gilt als
   unzulaessig (6e.5). Aber "sichtbar" heisst nicht "aufgeklappt". */
.ai-annahmen-kasten > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.15rem 0;
}

.ai-annahmen-kasten[open] > summary {
    margin-bottom: 0.5rem;
}

.ai-annahmen-kasten .ai-annahmen-liste {
    margin-top: 0;
}

/* Der Warnblock im Formularschritt darf den Bildschirm nicht fuellen.
   Bleibt er trotz allem zu hoch, scrollt ER - nicht der ganze Schritt.
   Die Frage darunter bleibt damit immer sichtbar. */
#ai-formular-fragen,
#ai-formular-warnung {
    max-height: 32vh;
    overflow-y: auto;
}

/* --- Zeichenflaeche (31.08.2026) ---------------------------------------

   Der dritte Weg im Skizzenschritt: hochladen, beschreiben oder hier
   zeichnen. Die Flaeche ERSETZT die Eingabe, statt unter ihr zu stehen -
   untereinander waere der Schritt so hoch, dass gescrollt werden muss.

   `min-height: 0` steht hier aus demselben Grund wie weiter oben in dieser
   Datei: Ohne die Null weigert sich ein Flex-Kind zu schrumpfen, die
   Leinwand draengt den Fuss mit den zwei Knoepfen aus dem Bild, und
   "Zeichnung uebernehmen" waere nicht mehr erreichbar. */
#ai-beschreiben-zeichenflaeche {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0.7rem;
}

.ai-zeichnen-werkzeuge {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ai-zeichnen-werkzeug {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.ai-zeichnen-werkzeug:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Das gewaehlte Werkzeug muss man SEHEN - sonst zeichnet jemand mit dem
   Massband, weil er den letzten Klick vergessen hat. */
.ai-zeichnen-werkzeug.ist-aktiv {
    border-color: #b06bff;
    background: rgba(176, 107, 255, 0.16);
    color: #fff;
}

/* Das Massband hebt sich ab: Es ist das einzige Werkzeug, das nach dem
   Ziehen noch eine Eingabe verlangt. */
.ai-zeichnen-werkzeug.ai-zeichnen-mass.ist-aktiv {
    border-color: #e0705f;
    background: rgba(224, 112, 95, 0.18);
}

.ai-zeichnen-verwalten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Weisse Flaeche mitten im dunklen Dialog: Der Kunde soll ein Blatt Papier
   sehen, und die Erkennung bekommt spaeter genau dieses Bild. */
.ai-zeichnen-leinwand {
    display: block;
    width: 100%;
    /* Dasselbe Seitenverhaeltnis wie das erzeugte PNG (1400 x 1000). Ohne
       das saehe die Zeichnung nach dem Uebernehmen anders aus als beim
       Zeichnen - gestaucht oder abgeschnitten. */
    aspect-ratio: 1400 / 1000;
    max-height: 52vh;
    min-height: 0;
    border-radius: 14px;
    background: #fff;
    cursor: crosshair;
    /* Ohne diese Zeile scrollt das Smartphone die Seite, statt zu zeichnen. */
    touch-action: none;
}

.ai-zeichnen-fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem;
}

/* Der Zeichnen-Einstieg steht gleichwertig neben "Skizze auswählen" in der
   Ablageflaeche. Er ist kein Nebenweg: Wer kein Papier zur Hand hat, hat
   hier seinen Hauptweg. */
.ai-zeichnen-einstieg {
    gap: 0.45rem;
}

/* Welche Form die Erkennung gewaehlt hat - und der Weg zu einer anderen.
   Die Wahl wird dem Kunden abgenommen, aber nicht verschwiegen: Eine stille
   Entscheidung waere schlimmer als die Frage, die sie ersetzt. */
.ai-formwechsel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: -0.2rem 0 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Die Massabfrage unter der Leinwand. Sie ersetzt ein `prompt()`: Das sieht
   in diesem Dialog wie ein Fremdkoerper aus und wird auf manchen
   Smartphones gar nicht angezeigt - dort waere das Masswerkzeug dann still
   wirkungslos. */
.ai-zeichnen-massabfrage {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(224, 112, 95, 0.08);
}

.ai-zeichnen-massabfrage label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.ai-zeichnen-masszeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ai-zeichnen-masszeile input {
    flex: 1 1 8rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 0.8rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
}

.ai-zeichnen-masszeile input:focus-visible {
    outline: 2px solid #e0705f;
    outline-offset: 1px;
}

/* --- Die vier Wege in Schritt 2 (Designpaket 7.2) ---------------------- */

/* Die Kacheln kommen aus `nocad-dialog.css` (.nocad-choices/.nocad-choice).
   Hier steht nur, was sie im Bestand brauchen: Sie sind <button>, und der
   Bestand gibt Knoepfen eine eigene Schrift und Ausrichtung. */
#ai-beschreiben-wege .nocad-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    min-width: 0;
}

#ai-beschreiben-wege .nocad-choice__icon {
    flex-shrink: 0;
    color: var(--text-secondary);
}

#ai-beschreiben-wege .nocad-choice[aria-checked="true"] .nocad-choice__icon {
    color: var(--nocad-accent-pale, #d9a6f2);
}

/* Der Haken erscheint nur auf der gewaehlten Kachel - sonst waere er ein
   Muster statt einer Aussage. */
#ai-beschreiben-wege .nocad-choice__check {
    display: none;
}

#ai-beschreiben-wege .nocad-choice[aria-checked="true"] .nocad-choice__check {
    display: flex;
}

.ai-weg-inhalt {
    margin-top: 1rem;
}

@media (max-width: 640px) {
    /* Am Telefon werden aus den vier Kacheln Zeilen: Symbol links, Titel und
       Hinweis rechts. Vier Spalten waeren je 80 px breit (Designpaket 7.2). */
    #ai-beschreiben-wege {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    #ai-beschreiben-wege .nocad-choice {
        flex-direction: row;
        align-items: center;
        gap: 0.8rem;
        min-height: 64px;
        padding: 0.7rem 0.9rem;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "symbol titel" "symbol hinweis";
        column-gap: 0.8rem;
    }

    #ai-beschreiben-wege .nocad-choice[aria-checked="true"] {
        padding: calc(0.7rem - 1px) calc(0.9rem - 1px);
    }

    #ai-beschreiben-wege .nocad-choice__icon {
        grid-area: symbol;
        align-self: center;
        margin-bottom: 0;
    }

    #ai-beschreiben-wege .nocad-choice__title { grid-area: titel; }
    #ai-beschreiben-wege .nocad-choice__hint { grid-area: hinweis; }
}