/* ==========================================================================
   LEO – Design-System
   Die EINE Datei für Farben, Schrift, Abstände und Bausteine.
   Regel: zwei Farben (G&B-Türkis, Orange für „Achtung“), sonst nur Grautöne.
   Zarte Tönungen davon sind erlaubt. Die Objektfotos sind die eigentliche Farbe.
   ========================================================================== */

/* ---------- 1. Schrift (lokal, nichts von externen Servern) ---------- */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/InterDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/InterDisplay-Bold.woff2") format("woff2"); }

/* ---------- 2. Design-Werte (Tokens) ---------- */
:root {
  /* ===== Farben: nur diese 11, alles andere wird daraus abgeleitet ===== */
  /* Türkis (G&B) – Hauptaktionen, ausgewählt, Haken */
  --farbe-akzent: #007A8A;
  --farbe-akzent-dunkel: #006977;    /* Darüberfahren */
  --farbe-akzent-hell: #E3F3F5;
  --farbe-akzent-zart: color-mix(in srgb, var(--farbe-akzent) 10%, transparent);    /* Symbolfelder */
  --farbe-akzent-zart-stark: color-mix(in srgb, var(--farbe-akzent) 16%, transparent);      /* ausgewählt, ruhige Hinweise */
  /* Orange – nur Achtung */
  --farbe-achtung: #B8572F;
  --farbe-achtung-hell: #F8EEEA;
  /* Neutral: von Weiß bis Dunkel */
  --farbe-weiss: #FFFFFF;            /* Karten */
  --farbe-hintergrund: #FBFAF8;      /* Arbeitsfläche */
  --farbe-grau-hell: #EFECE7;        /* Rahmen, ruhige Flächen */
  --farbe-grau-mittel: #D5D0C9;      /* Rahmen beim Darüberfahren, leere Haken */
  --farbe-grau: #86868B;             /* Hinweistext, zweitrangige Schrift */
  --farbe-grau-dunkel: #5C5C61;      /* Schrift auf grauen Flächen (Umschalter), Kontrast 5,6:1 */
  --farbe-dunkel: #1D1D1F;           /* Text und „In Propstack übernehmen“ */
  /* Hintergrund hinter den Profilbildern: dunkles G&B-Türkis – hebt sich von braunen und blonden Haaren ab
     (Braun verworfen 29.10.2026, zu nah an Haarfarben). Nur hier ändern, gilt für alle. */
  --farbe-profilbild: var(--farbe-akzent-dunkel);

  /* KI: Verlauf aus dem Türkis (✦) */
  --verlauf-ki: linear-gradient(115deg, var(--farbe-akzent-dunkel) 0%, var(--farbe-akzent) 50%, color-mix(in srgb, var(--farbe-akzent) 72%, var(--farbe-weiss)) 100%);

  /* Durchsichtig – nur für Glas, Schleier und Schatten */
  --glas-hell: rgba(255, 255, 255, 0.85);   /* Etiketten und Knöpfe auf Fotos, Kopfleiste */
  --glas-zart: rgba(255, 255, 255, 0.35);   /* Hilfslinien auf Fotos */
  --zuschnitt-maske: rgba(29, 29, 31, 0.6); /* abgedunkelt: was beim Zuschneiden wegfällt */
  --zuschnitt-ecke: 22px;
  --glas-dunkel: rgba(29, 29, 31, 0.88);    /* Meldungen, Tooltips */
  --schleier: rgba(29, 29, 31, 0.55);       /* hinter Fenstern, KI-Kennzeichnung */
  --schleier-leicht: rgba(29, 29, 31, 0.3); /* hinter Rückfragen, leere Haken auf Fotos */
  --farbe-schatten: rgba(29, 29, 31, 0.18);
  --glas-unschaerfe: blur(28px) saturate(180%);
  --glas-rand: var(--farbe-grau-hell);       /* dünner Rand am Glas: Kopfleiste und Etiketten auf Objektfotos */
  /* Kopfleiste: fast deckend in der Farbe der Arbeitsfläche, ohne Farbverstärkung – sonst schimmert der türkise
     Verlauf hinter der Arbeitsfläche durch das Glas und färbt die Kopfleiste bläulich */
  --glas-kopfleiste: rgba(251, 250, 248, 0.94);
  --glas-unschaerfe-ruhig: blur(28px);
  --glas-foto: rgba(255, 255, 255, 0.92);   /* etwas kräftigeres Glas, damit Etiketten auf jedem Foto lesbar bleiben */

  /* Schatten */
  --schatten-karte: 0 1px 2px rgba(40, 30, 20, 0.04);
  --schatten-schwebend: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(40, 30, 20, 0.08);
  --schatten-fenster: 0 24px 64px var(--farbe-schatten);   /* Dialoge und große Fenster */
  --handyleiste-hoehe: 92px;                                 /* Leiste unten am Handy (schwebende Pille, nur Symbole) */
  --handyleiste-innen: 76px;                                 /* Pille des aktiven Ziels und das Plus – mittig, ringsum 8 px Abstand */
  --handyleiste-plus: var(--handyleiste-innen);              /* Plus: genau mittig in der Leiste, so hoch wie die Pillen */
  /* Tiefe wie bei Apple: weicher grauer Schatten, dazu eine feine Lichtkante oben – kein farbiger Schimmer */
  --schatten-leiste: 0 12px 32px rgba(20, 24, 31, 0.14), 0 2px 8px rgba(20, 24, 31, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --schatten-plus: 0 6px 16px rgba(20, 24, 31, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --handyleiste-abstand: 20px;                               /* … so weit über dem Home-Balken des Handys und von den Seiten */
  --schatten-griff: 0 1px 4px var(--farbe-schatten);       /* Griffe: Regler, Schalter, Vergleich */
  --schatten-pille: 0 1px 3px color-mix(in srgb, var(--farbe-dunkel) 8%, transparent);   /* gewählte Pille in der Schiene: hebt sich nur leicht ab */
  --schiene-hover: color-mix(in srgb, var(--farbe-weiss) 55%, transparent);   /* nicht gewählte Pille beim Darüberfahren */

  /* Bildformat */
  --bildformat-quer: 4;              /* Einheitliches Bildformat der Objektbilder (Einstellung) */
  --bildformat-hoch: 3;
  --bildformat: var(--bildformat-quer) / var(--bildformat-hoch);

  /* Schrift */
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-display: "Inter Display", "Inter", -apple-system, sans-serif;
  --text-winzig: 9px;
  --text-mini: 10px;
  --text-label: 11px;
  --text-etikett: 12px;
  --text-klein: 13px;
  --text-mittel: 14px;
  --text-normal: 15px;
  --text-knopf-gross: 16px;  /* Schrift im großen Aktions-Button */
  --text-gross: 17px;
  --text-logo: 22px;
  --titel-4: 17px;                   /* Kartentitel */
  --titel-3: 20px;                   /* Abschnittstitel */
  --titel-2: 28px;
  --titel-1: clamp(28px, 3.4vw, 36px);

  /* Abstände – viel Weißraum */
  --abstand-0: 2px;   /* zwischen Titel und Unterzeile */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;
  --abstand-7: 48px;
  --abstand-8: 64px;

  /* Rundungen */
  --rundung-mini: 4px;     /* Markierungen im Text, kleine Etiketten auf Fotos */
  --rundung-klein: 8px;
  --rundung-symbol: 12px;  /* Symbolfelder in Karten */    /* kleine Teile: Vorschaubilder, Symbole, Hinweisblasen */
  --rundung: 16px;         /* Kästen, mehrzeilige Eingaben */
  --rundung-bild: 16px;    /* alle Bilder */
  --rundung-gross: 24px;   /* Karten und Fenster */
  --rundung-flaeche: 28px; /* die App-Fläche */
  --rundung-pille: 999px;  /* Buttons, Pillen, einzeilige Eingaben */

  /* Feste Größen für wiederkehrende Bausteine */
  --haken: 24px;           /* Haken-Kreis */
  --haken-klein: 20px;     /* Haken in Listen */
  --auswahl-hoehe: 36px;   /* Reiter, Auswahl-Pillen */
  /* Nur zwei Button-Größen */
  /* Symbolgrößen: feste Stufen, damit gleiche Aufgaben überall gleich groß sind */
  --symbol-pille: 12px;    /* in Pillen und Etiketten */
  --symbol-text: 16px;     /* neben Hinweistext */
  --symbol: 18px;          /* in Knöpfen, Suche, Rück-Link */
  --knopf-hoehe: 40px;            /* normale Buttons: „In Propstack übernehmen“, Fotos hinzufügen, Zurücksetzen … */
  --knopf-innen: 20px;
  --knopf-symbol: 18px;
  --knopf-gross-hoehe: 48px;      /* Hauptaktion eines Reiters oder Werkzeug-Schritts (türkis) */
  --knopf-gross-innen: 24px;
  --knopf-gross-symbol: 20px;
  --etikett-innen: var(--abstand-1) var(--abstand-3);   /* Innenabstand Etiketten */
  --etikett-innen-foto: var(--abstand-1) var(--abstand-2);
  --sortier-blass: 0.65;   /* Platz des gezogenen Bildes in der Freigabe: leicht blass */
  --deaktiviert: 0.4;      /* ausgegraut: überall gleich */
  --textfeld-gross: 440px; /* Höhe Objektbeschreibung, Lage, Ausstattung */
  --werkzeugkachel-hoehe: 88px; /* Werkzeug-Kacheln im Bearbeiten-Fenster */
  --textfeld-mittel: 240px;/* Höhe Sonstiges */

  /* Bewegung – ruhig, nie verspielt */
  --dauer-kurz: 150ms;
  --dauer: 300ms;
  --wisch-dauer: 900ms;   /* „Alle Bilder optimieren“: so lange wischt das fertige Bild über eine Kachel */
  --kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Startseite oben: flache Leiste mit gesparten Stunden und Wochen-Balken */
  --startkopf-hoehe: 152px;
  --zeitzahl-groesse: 56px;
  --zaehlen-dauer: 1200ms;         /* Zahl zählt von 0 hoch */
  --zaehlen-kurve: cubic-bezier(0.25, 1, 0.5, 1);   /* ease-out: schnell los, weich ankommen */
  /* Ladezustände: nur Türkis, seine hellen Töne und Grau */
  --lade-schwelle: 400ms;          /* erst ab dieser Dauer etwas zeigen (kein Flackern) */
  --lade-mindestens: 600ms;        /* einmal gezeigt, mindestens so lange */
  --lade-kurve: ease-in-out;
  --lade-glanz-dauer: 2s;          /* Lichtstreifen über Fotos und PDF */
  --lade-puls-dauer: 1.8s;         /* türkises Leuchten am Rand, ruhiges Pulsieren */
  --lade-schimmer-dauer: 1.4s;     /* Platzhalter-Zeilen */
  --lade-scan-dauer: 1.8s;         /* Scan-Linie im PDF */
  --lade-dreh-dauer: 0.9s;         /* kleiner Kreis im Button */
  --schwaerzen-dauer: 8s;          /* PDF schwärzen: Scanner-Linie läuft über die Seite, die Balken ziehen sich auf */
  --lade-aufbau-dauer: 7s;         /* Grundriss: unscharfer Plan baut sich Raum für Raum auf */
  --lade-ueberblenden: 300ms;      /* neues Bild blendet ein */
  --lade-text-einblenden: 200ms;   /* fertiger Text blendet ein */
  --lade-unschaerfe: 6px;
  --lade-schleier: color-mix(in srgb, var(--farbe-dunkel) 20%, transparent);
  --lade-glanz: color-mix(in srgb, var(--farbe-weiss) 55%, transparent);
  --lade-glimmen: var(--farbe-akzent);
  --lade-glimmen-weich: color-mix(in srgb, var(--farbe-akzent) 45%, transparent);
  --lade-platzhalter: var(--farbe-grau-hell);
  --lade-schimmer: color-mix(in srgb, var(--farbe-weiss) 75%, transparent);
  /* Button mit Fortschritt: Füllung in einem Ton der Button-Farbe, Schrift bleibt lesbar */
  --knopf-fuellung-tuerkis: color-mix(in srgb, var(--farbe-akzent-dunkel) 78%, var(--farbe-dunkel));
  --knopf-fuellung-dunkel: color-mix(in srgb, var(--farbe-dunkel) 78%, var(--farbe-weiss));
  --knopf-fuellung-hell: var(--farbe-akzent-hell);
  --knopf-fuellung-kante: 24px;      /* weiche Vorderkante der Füllung */
  --knopf-fortschritt-dauer: 400ms;  /* so weich folgt die Füllung dem Fortschritt */
  --knopf-fertig-dauer: 800ms;       /* so lange steht der Haken */

  /* Layout */
  --rahmen-abstand: 12px;
  --leiste-breite: 72px;
  --inhalt-max: 1200px;
  --grundriss-leiste: 272px;   /* Tool Grundriss: Leisten links und rechts */
}

/* ---------- 3. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(50% 50% at 92% 0%, var(--farbe-akzent-hell), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, var(--farbe-grau-hell), transparent 70%),
    var(--farbe-grau-hell);
  color: var(--farbe-dunkel);
  font-family: var(--schrift);
  font-size: var(--text-normal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: var(--farbe-akzent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; border-radius: var(--rundung-klein); }

/* ---------- 4. Typografie ---------- */
.titel-1, .titel-2, .titel-3 { font-family: var(--schrift-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.titel-1 { font-size: var(--titel-1); }
.titel-2 { font-size: var(--titel-2); }
.titel-3 { font-size: var(--titel-3); font-weight: 600; letter-spacing: -0.01em; }
.titel-4 { font-family: var(--schrift-display); font-size: var(--titel-4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.titel-grau { color: var(--farbe-grau); }   /* zweifarbige Überschrift: zweiter Teil grau */
.label {
  font-size: var(--text-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--farbe-grau);
}
.text-grau { color: var(--farbe-grau); }
.text-klein { font-size: var(--text-klein); }
.zahl { font-family: var(--schrift-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- 5. App-Rahmen ----------
   Außenrand · schmale Symbol-Leiste · Arbeitsfläche. Für den Desktop gemacht,
   passt sich der Fenstergröße an (kein eigenes Handy-Design).                 */
.app {
  height: 100vh; height: 100dvh; padding: var(--rahmen-abstand);
  display: grid; grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
}

/* Symbol-Leiste */
.navigation {
  position: relative; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: var(--abstand-2);
  padding: var(--abstand-2) 0 var(--abstand-2);
  margin-right: var(--rahmen-abstand);
}
.navigation__logo {
  height: 44px; display: flex; align-items: center; margin-bottom: var(--abstand-5);
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-logo); letter-spacing: -0.03em; color: var(--farbe-dunkel);
}
.navigation__logo span { color: var(--farbe-akzent); }
.navigation__link {
  position: relative; width: 44px; height: 44px; border-radius: var(--rundung);
  display: grid; place-items: center; color: var(--farbe-dunkel);
  transition: background var(--dauer-kurz), box-shadow var(--dauer-kurz);
}
.navigation__link svg { width: 20px; height: 20px; stroke: var(--farbe-grau); }
.navigation__link:hover { background: var(--glas-hell); }
.navigation__link[aria-current="page"] { background: var(--farbe-weiss); box-shadow: var(--schatten-schwebend); }
.navigation__link[aria-current="page"] svg { stroke: var(--farbe-akzent); }
.navigation__text { display: none; }
/* Name erscheint beim Darüberfahren */
.navigation__link::after, .navigation__fuss::after {
  content: attr(data-name); position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%);
  padding: var(--abstand-1) var(--abstand-2); border-radius: var(--rundung-klein); white-space: nowrap; pointer-events: none;
  background: var(--glas-dunkel); color: var(--farbe-weiss); font-size: var(--text-etikett); font-weight: 500;
  opacity: 0; transition: opacity var(--dauer-kurz), transform var(--dauer-kurz);
}
.navigation__link:hover::after, .navigation__fuss:hover::after { opacity: 1; transform: translate(0, -50%); }
/* Avatar unten links = Mein Profil */
.navigation__fuss { position: relative; margin-top: auto; border-radius: 50%; color: var(--farbe-dunkel); transition: box-shadow var(--dauer-kurz); }
.navigation__fuss:hover, .navigation__fuss[aria-current="page"] { box-shadow: 0 0 0 3px var(--farbe-weiss), 0 0 0 5px var(--farbe-akzent); }

/* Arbeitsfläche */
.arbeitsflaeche {
  position: relative; min-width: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--farbe-hintergrund); border-radius: var(--rundung-flaeche);
  border: 1px solid var(--glas-hell); box-shadow: var(--schatten-schwebend);
  container-type: inline-size;
}
.kopfzeile {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 440px) minmax(0, 1fr); align-items: center; gap: var(--abstand-4);
  min-height: 96px; padding: var(--abstand-4) var(--abstand-6);
  background: var(--glas-kopfleiste); border-bottom: 1px solid var(--glas-rand);
  backdrop-filter: var(--glas-unschaerfe-ruhig); -webkit-backdrop-filter: var(--glas-unschaerfe-ruhig);
}
.zurueck-link { display: inline-flex; align-items: center; gap: var(--abstand-1); font-size: var(--text-normal); font-weight: 500; color: var(--farbe-dunkel); justify-self: start; }
.zurueck-link svg { width: var(--symbol); height: var(--symbol); stroke: currentColor; }
.zurueck-link:hover { color: var(--farbe-akzent); }
/* Objekt-Seiten: kompakter Kopf in der oberen Leiste, erscheint erst beim Scrollen */
.kopfzeile--objekt { grid-template-columns: minmax(0, 1fr) auto; }
.kopfzeile--schritte, .kopfzeile--mitte { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }   /* PDF schwärzen: Schritte mittig in der Kopfleiste; Aushänge: Fenster | Liste */
.kopfzeile__rechts--ende { justify-self: end; }   /* rechte Spalte der dreiteiligen Kopfleiste: Knopf ganz rechts */
.kopfzeile__links { display: flex; align-items: center; gap: var(--abstand-4); min-width: 0; white-space: nowrap; }
.kopfzeile__rechts { display: flex; align-items: center; gap: var(--abstand-3); flex-shrink: 0; white-space: nowrap; }
.kopfzeile .zurueck-link { flex-shrink: 0; }
.kopfzeile__trenner { flex-shrink: 0; width: 1px; height: 22px; background: var(--farbe-grau-mittel); }
/* Schmalere Fenster: Beschriftungen werden zu Symbolen, dann fallen Status, Kurz | Lang und Reiter weg – nichts bricht um */
@container (max-width: 1240px) {
  .kopfzeile__rechts .button .kopfzeile__text { display: none; }
  .kopfzeile .kopfzeile__rechts .button.kopfzeile__kompakt { padding: 0 var(--abstand-3); }
}
@container (max-width: 1040px) { .kopfzeile__objekt .pille { display: none; } }
@container (max-width: 900px) { .kopfzeile .segment--kompakt, .kopfzeile .kopfzeile__trenner { display: none; } }
@container (max-width: 760px) { .kopfzeile .reiter--kompakt { display: none; } }
.kopfzeile__objekt { display: flex; align-items: center; gap: var(--abstand-2); min-width: 0; font-size: var(--text-normal); font-weight: 600; }
.kopfzeile__objekt::before { content: ""; flex-shrink: 0; width: 1px; height: 20px; margin-right: var(--abstand-2); background: var(--farbe-grau-hell); }
.kopfzeile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopfzeile__objekt .pille { flex-shrink: 0; }
/* Kleine Reiter neben dem Objektnamen */
.kopfzeile .reiter--kompakt { margin: 0 0 0 var(--abstand-2); overflow: visible; }
.kopfzeile__kompakt {
  opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), visibility 0s linear var(--dauer);
}
.kopfzeile--kompakt .kopfzeile__kompakt { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }

/* Suchfeld oben in der Mitte */
.kopfsuche { position: relative; margin: 0; }
.kopfsuche svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: var(--symbol); height: var(--symbol); stroke: var(--farbe-grau); pointer-events: none; }
.kopfsuche input {
  width: 100%; height: 46px; padding: 0 var(--abstand-4) 0 42px; border-radius: var(--rundung-pille);
  border: 1px solid var(--farbe-grau-hell); background: var(--glas-hell); font-size: var(--text-normal);
  transition: border-color var(--dauer-kurz), background var(--dauer-kurz);
}
.kopfsuche input::placeholder { color: var(--farbe-grau); }
.kopfsuche input:focus { outline: none; border-color: var(--farbe-akzent); background: var(--farbe-weiss); }
.kopfsuche input::-webkit-search-cancel-button { display: none; }

.inhalt { padding: var(--abstand-6) var(--abstand-7) var(--abstand-8); }
.inhalt__rahmen { max-width: var(--inhalt-max); margin: 0 auto; }

/* ---------- 6. Seitenkopf ---------- */
.seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--abstand-5); flex-wrap: wrap; margin-bottom: var(--abstand-6); }
.seitenkopf__text { display: flex; flex-direction: column; gap: var(--abstand-2); }
.seitenkopf__unterzeile { margin: 0; color: var(--farbe-grau); }
/* „In Propstack übernehmen“ oben rechts, senkrecht mittig zur Titelzeile */
.seitenkopf > .button--uebertragen, .seitenkopf > form > .button--uebertragen { margin-top: calc((var(--titel-1) * 1.15 - var(--knopf-hoehe)) / 2); }
.titelzeile { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; }
.abschnitt { margin-top: var(--abstand-7); }
.abschnitt__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abstand-4); margin-bottom: var(--abstand-4); }
.abschnitt__rechts { display: flex; align-items: baseline; gap: var(--abstand-3); flex-wrap: wrap; justify-content: flex-end; }
.abschnitt--eng { margin-top: var(--abstand-6); }
.abschnitt--erster { margin-top: 0; }

/* ---------- 7. Karten ---------- */
.karte, .objektkachel {
  background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); box-shadow: var(--schatten-karte);
}
.karte { border-radius: var(--rundung-gross); padding: var(--abstand-5); }

/* Startseite oben: gleiches Raster wie die Objektkacheln darunter (Kachel mind. 250 px, Abstand 24 px).
   Ab 4 Spalten: Begrüßung 3 + Werkzeuge 1 · schmaler: Werkzeuge unter der Begrüßung */
.startkopf { container-type: inline-size; }
.startkopf__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-5); }
@container (min-width: 1072px) {
  .startkopf__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .begruessung { grid-column: span 3; }
}

/* Begrüßung: flache helle Leiste, Gruß links, gesparte Stunden rechts */
.begruessung {
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-5) var(--abstand-6); flex-wrap: wrap;
  min-height: var(--startkopf-hoehe); padding: var(--abstand-5) var(--abstand-6); border-radius: var(--rundung-gross);
  border: 1px solid var(--farbe-grau-hell); box-shadow: var(--schatten-karte);
  background:
    radial-gradient(70% 140% at 100% 0%, var(--farbe-akzent-hell), transparent 70%),
    linear-gradient(120deg, var(--farbe-weiss) 0%, var(--farbe-hintergrund) 100%);
}
.begruessung__titel { margin: var(--abstand-1) 0 0; font-family: var(--schrift-display); font-weight: 700; font-size: var(--titel-1); letter-spacing: -0.02em; line-height: 1.15; }
.begruessung__rechts { display: flex; align-items: flex-end; gap: var(--abstand-6); margin-left: auto; }
.zeitzahl { display: flex; flex-direction: column; align-items: flex-end; gap: var(--abstand-1); text-align: right; }
.zeitzahl__wert { display: flex; align-items: baseline; color: var(--farbe-akzent); font-size: var(--zeitzahl-groesse); }
.zeitzahl__wert small { margin-left: 0.1em; font-size: var(--text-gross); letter-spacing: 0; }
.zeitzahl__text { color: var(--farbe-grau); font-size: var(--text-klein); }


/* Kästen auf der Startseite: zwei weiße Karten untereinander, zusammen so hoch wie die Begrüßung.
   Welche Werkzeuge darin stehen, stellt der Admin ein (Funktionen → Allgemeine Einstellungen). */
.startwerkzeuge { display: flex; flex-direction: column; gap: var(--abstand-3); }
.startwerkzeuge__eintrag {
  flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: var(--abstand-4); padding: var(--abstand-3) var(--abstand-4) var(--abstand-3) var(--abstand-5);
  background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung-gross); box-shadow: var(--schatten-karte);
  color: var(--farbe-grau-dunkel); font-size: var(--text-normal); font-weight: 500; text-decoration: none; cursor: pointer;
}
/* Symbol und Schrift wie bei den Werkzeug-Kacheln im Bearbeiten-Fenster: 24 px, dunkelgrau, ohne Feld */
.startwerkzeuge__symbol { position: relative; flex-shrink: 0; display: grid; place-items: center; }
.startwerkzeuge__symbol svg { width: 24px; height: 24px; stroke: currentColor; }
.startwerkzeuge__symbol .zahlpunkt { top: calc(-1 * var(--abstand-3)); right: calc(-1 * var(--abstand-2)); box-shadow: 0 0 0 2px var(--farbe-weiss); }
.startwerkzeuge__name { min-width: 0; }   /* bricht nur um, wenn es wirklich zu schmal wird */
.startwerkzeuge__eintrag:focus-visible { border-radius: var(--rundung-gross); }
@container (min-width: 524px) and (max-width: 1071px) {
  .startwerkzeuge { flex-direction: row; }   /* untereinander: die zwei Karten nebeneinander */
}
/* Admin: kleine Vorschau der zwei Kästen */
.startkaesten-vorschau { display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-3); border-radius: var(--rundung); background: var(--farbe-hintergrund); pointer-events: none; }
.startkaesten-vorschau .startwerkzeuge__eintrag { min-height: 64px; font-size: var(--text-normal); }

/* Objekte auf der Startseite: nur der Link „Alle anzeigen“ rechts, kleiner Abstand */
.startliste { margin-top: var(--abstand-5); }
.startliste .abschnitt__kopf { justify-content: flex-end; margin-bottom: var(--abstand-2); }


/* ---------- 8. Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2);
  min-height: var(--knopf-hoehe); padding: 0 var(--knopf-innen);
  border-radius: var(--rundung-pille); border: 1px solid transparent;
  font-weight: 600; font-size: var(--text-normal); cursor: pointer; white-space: nowrap;
  transition: background var(--dauer-kurz), border-color var(--dauer-kurz), transform var(--dauer-kurz);
}
.button:active { transform: scale(0.98); }
.button svg { width: var(--knopf-symbol); height: var(--knopf-symbol); flex-shrink: 0; stroke: currentColor; }
/* Großer Aktions-Button: Hauptaktion des Reiters (Alle Bilder optimieren, Alle Texte generieren) oder des Werkzeug-Schritts.
   Ein neutraler Button direkt daneben bekommt dieselbe Größe (z. B. „Fotos hinzufügen“). */
.button--aktion { min-height: var(--knopf-gross-hoehe); padding: 0 var(--knopf-gross-innen); font-size: var(--text-knopf-gross); }
.button--aktion svg { width: var(--knopf-gross-symbol); height: var(--knopf-gross-symbol); }
/* Gleich für alle Buttons: Fokus-Ring, ausgegraut */
.button:focus-visible { border-radius: var(--rundung-pille); }
.button:disabled { opacity: var(--deaktiviert); cursor: not-allowed; transform: none; box-shadow: none; }
.button--primaer { background: var(--farbe-akzent); color: var(--farbe-weiss); }
.button--primaer:hover { background: var(--farbe-akzent-dunkel); }
/* „Speichern“ im Admin: grau, solange alles gespeichert ist – Farbe erst, wenn sich etwas geändert hat */
.button--speichern:disabled { opacity: 1; background: var(--farbe-grau-hell); color: var(--farbe-grau); cursor: default; }
/* ✦ KI-Buttons (LEO erzeugt etwas): Farbverlauf aus dem G&B-Türkis, beim Darüberfahren wandert er leicht */
.button--ki, .chat__senden, .markier-plus { background: var(--verlauf-ki); background-size: 140% 100%; background-position: 0% 50%; color: var(--farbe-weiss); box-shadow: var(--schatten-karte); transition: background-position var(--dauer) var(--kurve), box-shadow var(--dauer); }
.button--ki:hover:not(:disabled), .chat__senden:hover:not(:disabled), .markier-plus:hover { background-position: 100% 50%; box-shadow: var(--schatten-schwebend); }
.button--ki svg { stroke: var(--farbe-weiss); }
.button--sekundaer { background: var(--farbe-weiss); border-color: var(--farbe-grau-hell); color: var(--farbe-dunkel); }
.button--sekundaer:hover { background: var(--farbe-grau-hell); }
/* Übertragen nach Propstack: dunkel, ernst und ruhig – nur beim Darüberfahren Türkis */
.button--uebertragen { background: var(--farbe-dunkel); color: var(--farbe-weiss); }
.button--uebertragen:hover:not(:disabled) { background: var(--farbe-akzent); }
.button--text { background: none; color: var(--farbe-akzent); padding: 0 var(--abstand-2); }
/* Gewählt, nicht klickbar (z. B. „Titelbild“): helle türkise Auswahl, nicht der dunkle Propstack-Stil */
.button--gewaehlt, .button--gewaehlt:hover { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent-hell); color: var(--farbe-akzent); cursor: default; }
/* Text-Link: sieht aus wie ein Text-Button („Alle auswählen“) – für „Alle anzeigen“, „Zu den Bildern“, „Ansehen“ */
.textlink { color: var(--farbe-akzent); font-size: var(--text-normal); font-weight: 600; white-space: nowrap; transition: color var(--dauer-kurz); }
.textlink:hover, .button--text:hover:not(:disabled) { color: var(--farbe-akzent-dunkel); }

/* Runder Symbol-Knopf (Glocke, Suche, Schließen …) */
.symbolknopf {
  position: relative; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--glas-hell); border: 1px solid var(--farbe-grau-hell);
  transition: background var(--dauer-kurz);
}
.symbolknopf:hover { background: var(--farbe-weiss); }
.symbolknopf svg { width: var(--symbol); height: var(--symbol); stroke: var(--farbe-dunkel); }

/* ---------- 9. Status-Pillen & Chips ---------- */
.pille {
  display: inline-flex; align-items: center; gap: var(--abstand-1);
  padding: var(--etikett-innen); border-radius: var(--rundung-pille);
  background: var(--farbe-grau-hell); color: var(--farbe-dunkel);
  font-size: var(--text-etikett); font-weight: 500; white-space: nowrap;
}
.pille--achtung { background: var(--farbe-achtung-hell); color: var(--farbe-achtung); }
.pille--achtung::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--farbe-achtung); }
.pille--erledigt { background: var(--farbe-akzent-hell); color: var(--farbe-akzent); }
.pille--auf-foto { background: var(--glas-hell); backdrop-filter: var(--glas-unschaerfe); -webkit-backdrop-filter: var(--glas-unschaerfe); }

/* Auswahl-Pillen – ein gemeinsamer Stil für Reiter, Umschalter (Kurz | Lang), Werkzeug-Pillen und Vorschläge.
   Nicht gewählt: hellgrau gefüllt mit grauer Schrift. Gewählt: Türkis hell mit türkiser Schrift. Kein Umriss. */
.chip, .segment button, .reiter button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-1); flex-shrink: 0; white-space: nowrap; cursor: pointer;
  min-height: var(--auswahl-hoehe); padding: 0 var(--abstand-4); border: 0; border-radius: var(--rundung-pille);
  background: var(--farbe-grau-hell); font-size: var(--text-klein); font-weight: 500; color: var(--farbe-grau);
  transition: background var(--dauer-kurz), color var(--dauer-kurz);
}
.chip:hover, .segment button:hover, .reiter button:hover { background: var(--farbe-grau-mittel); color: var(--farbe-dunkel); }
.chip--aktiv, .chip--aktiv:hover,
.segment button[aria-pressed="true"], .segment button[aria-pressed="true"]:hover,
.reiter button[aria-selected="true"], .reiter button[aria-selected="true"]:hover { background: var(--farbe-akzent-hell); color: var(--farbe-akzent); }
.segment button:disabled { color: var(--farbe-grau-mittel); cursor: not-allowed; }

/* Umschalter-Schiene – nur in der Kopfleiste (Reiter und Kurz | Lang beim Scrollen).
   Fest gefüllt, ohne Transparenz und Unschärfe, damit sie über jedem Hintergrund gleich gut lesbar ist.
   Gewählt: weiße Pille mit türkiser Schrift und ganz leichtem Schatten, ohne Rand. */
.kopfzeile .reiter--kompakt, .kopfzeile .segment--kompakt {
  display: inline-flex; align-items: center; gap: var(--abstand-0); flex-shrink: 0;
  padding: 3px; border: 1px solid var(--farbe-grau-mittel); border-radius: var(--rundung-pille);
  background: var(--farbe-grau-hell);
}
.kopfzeile .reiter--kompakt button, .kopfzeile .segment--kompakt button {
  min-height: 28px; border: 1px solid transparent; background: transparent; color: var(--farbe-grau-dunkel);
}
.kopfzeile .reiter--kompakt button:hover, .kopfzeile .segment--kompakt button:hover { background: var(--schiene-hover); color: var(--farbe-grau-dunkel); }
.kopfzeile .reiter--kompakt button[aria-selected="true"], .kopfzeile .reiter--kompakt button[aria-selected="true"]:hover,
.kopfzeile .segment--kompakt button[aria-pressed="true"], .kopfzeile .segment--kompakt button[aria-pressed="true"]:hover {
  background: var(--farbe-weiss); color: var(--farbe-akzent); border-color: transparent; box-shadow: var(--schatten-pille); font-weight: 600;
}
/* Tastatur: türkiser Ring nur bei Tastatur-Fokus, nicht beim Klicken */
.kopfzeile .reiter--kompakt button:focus-visible, .kopfzeile .segment--kompakt button:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; border-radius: var(--rundung-pille); }
/* Kleiner grauer Punkt an einer Pille: in der gerade nicht gezeigten Ansicht ist etwas abgewählt */
.segment__punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--farbe-grau); }
.chip svg { width: 14px; height: 14px; stroke: var(--farbe-akzent); }


/* ---------- 10. Avatar ---------- */
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: var(--farbe-dunkel); color: var(--farbe-weiss);
  display: grid; place-items: center; font-weight: 600; font-size: var(--text-mittel); letter-spacing: 0.02em;
}

/* ---------- 11. Objekt-Kacheln (Foto randlos oben) ---------- */
.objektraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--abstand-5); }
.objektkachel {
  display: flex; flex-direction: column; overflow: hidden; color: inherit;
  border-radius: var(--rundung-gross);
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer);
}
.objektkachel:hover { transform: translateY(-2px); box-shadow: var(--schatten-schwebend); }
.objektkachel__foto { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--farbe-grau-hell); }
.objektkachel__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--kurve); }
.objektkachel:hover .objektkachel__foto img { transform: scale(1.03); }
/* Status oben links auf dem Foto, im gleichen Glas wie die Kopfleiste */
.objektkachel__status {
  position: absolute; top: var(--abstand-3); left: var(--abstand-3);
  display: inline-flex; align-items: center; gap: var(--abstand-1);
  padding: var(--etikett-innen); border-radius: var(--rundung-pille); border: 1px solid var(--glas-rand);
  background: var(--glas-foto); backdrop-filter: var(--glas-unschaerfe); -webkit-backdrop-filter: var(--glas-unschaerfe);
  box-shadow: var(--schatten-griff); color: var(--farbe-dunkel); font-size: var(--text-klein); font-weight: 500; white-space: nowrap;
}
/* Faktenfehler: einzige Warnfarbe – leicht oranges Glas mit kleinem Punkt */
.objektkachel__status--achtung { background: color-mix(in srgb, var(--farbe-achtung-hell) 70%, var(--glas-foto)); border-color: var(--farbe-achtung-hell); color: var(--farbe-achtung); }
.objektkachel__status--achtung::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--farbe-achtung); }
/* Fertig: ruhig, mit kleinem grauem Haken */
.objektkachel__status svg { width: var(--symbol-pille); height: var(--symbol-pille); stroke: var(--farbe-grau); stroke-width: 2.5; }
.objektkachel__text { flex: 1; padding: var(--abstand-4) var(--abstand-5) var(--abstand-5); display: flex; flex-direction: column; gap: var(--abstand-1); }
.objektkachel__text .objektkachel__nr:last-child { margin-top: auto; }   /* Nr. sitzt unten – in jeder Reihe auf einer Linie */
.objektkachel__titel { font-family: var(--schrift-display); font-weight: 600; font-size: var(--titel-4); letter-spacing: -0.01em; line-height: 1.25; }
.objektkachel__fakten { color: var(--farbe-grau); font-size: var(--text-klein); font-variant-numeric: tabular-nums; }
/* Objektnummer: kleine graue Zeile, damit man sieht, wonach man suchen kann */
.objektkachel__nr { display: block; color: var(--farbe-grau); font-size: var(--text-etikett); font-variant-numeric: tabular-nums; }
/* Ruhiger Hinweis, wenn die Suche nichts findet */
.leerhinweis { margin: 0; padding: var(--abstand-5) 0; list-style: none; color: var(--farbe-grau); font-size: var(--text-klein); }

/* ---------- 13. Formulare: Suche, Filter, Segment-Schalter ---------- */
.eingabe, .auswahl {
  width: 100%; min-height: var(--knopf-hoehe); padding: 0 var(--abstand-4);
  background-color: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell);
  border-radius: var(--rundung-pille); font-size: var(--text-normal);
}
.eingabe::placeholder { color: var(--farbe-grau); }
.eingabe:focus, .auswahl:focus { outline: none; border-color: var(--farbe-akzent); }
.auswahl {
  width: auto; padding-right: 36px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2386868B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.segment { display: inline-flex; gap: var(--abstand-2); }
.segment--breit { display: flex; }
.segment--breit button { flex: 1; padding: 0 var(--abstand-2); white-space: nowrap; }

/* ---------- 14. Hinweise ---------- */
.hinweis {
  display: flex; align-items: center; gap: var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4); border-radius: var(--rundung);
  background: var(--farbe-akzent-hell); font-size: var(--text-klein);
}
.hinweis svg { width: var(--symbol); height: var(--symbol); stroke: var(--farbe-akzent); flex-shrink: 0; }
.hinweis--achtung { background: var(--farbe-achtung-hell); color: var(--farbe-achtung); }
.hinweis--achtung svg { stroke: var(--farbe-achtung); }

/* ---------- 15. Reiter (Objekt) als Pillen ---------- */
.reiter { display: flex; align-items: center; gap: var(--abstand-2); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--abstand-6); padding: 2px; }
.reiter::-webkit-scrollbar { display: none; }

/* ---------- 16. Fortschritt (Ladeanzeige mit Zähler) ---------- */
.fortschritt { display: flex; flex-direction: column; gap: var(--abstand-2); }
.fortschritt__zeile { display: flex; justify-content: space-between; font-size: var(--text-klein); }
.fortschritt__schritte { display: flex; align-items: center; gap: var(--abstand-2); font-size: var(--text-klein); color: var(--farbe-grau); }
.fortschritt__schritte svg { width: 14px; height: 14px; stroke: var(--farbe-grau); }
.fortschritt__schritt--aktiv { color: var(--farbe-akzent); font-weight: 600; }
.fortschritt__schritt--fertig { color: var(--farbe-dunkel); }
.fortschritt__balken { height: 4px; border-radius: var(--rundung-pille); background: var(--farbe-grau-hell); overflow: hidden; }
.fortschritt__fuellung { height: 100%; width: 0; background: var(--farbe-akzent); border-radius: inherit; transition: width var(--dauer) var(--kurve); }

/* ---------- 17. Regler (Stärke 1–5) ---------- */
.regler { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; cursor: pointer; }
.regler::-webkit-slider-runnable-track { height: 4px; border-radius: var(--rundung-pille); background: linear-gradient(to right, var(--farbe-akzent) var(--wert, 50%), var(--farbe-grau-hell) var(--wert, 50%)); }
.regler::-moz-range-track { height: 4px; border-radius: var(--rundung-pille); background: var(--farbe-grau-hell); }
.regler::-moz-range-progress { height: 4px; border-radius: var(--rundung-pille); background: var(--farbe-akzent); }
.regler::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); box-shadow: var(--schatten-griff); }
.regler::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); box-shadow: var(--schatten-griff); }
.regler__skala { display: flex; justify-content: space-between; font-size: var(--text-etikett); color: var(--farbe-grau); padding: 0 var(--abstand-2); font-variant-numeric: tabular-nums; }

/* ---------- 18. Vorher/Nachher-Vergleich ---------- */
.vergleich {
  position: relative; aspect-ratio: var(--bildformat); overflow: hidden; border-radius: var(--rundung-bild);
  background: var(--farbe-grau-hell); user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize;
}
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vergleich__nachher { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 var(--teilung, 50%)); }
.vergleich__linie { position: absolute; top: 0; bottom: 0; left: var(--teilung, 50%); width: 2px; margin-left: -1px; background: var(--farbe-weiss); pointer-events: none; transition: opacity var(--dauer); }
.vergleich__griff {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--glas-hell); box-shadow: var(--schatten-griff);
  backdrop-filter: var(--glas-unschaerfe); -webkit-backdrop-filter: var(--glas-unschaerfe);
  display: grid; place-items: center;
}
.vergleich__griff svg { width: 20px; height: 20px; stroke: var(--farbe-dunkel); }
/* Zoom im Bearbeiten-Fenster: Ebenen unter den Fotos, Linie und Beschriftungen bleiben fest am Rahmen */
.vergleich__ebene { position: absolute; inset: 0; transform-origin: 0 0; pointer-events: none; }
.vergleich--gezoomt { cursor: grab; touch-action: none; }
.vergleich--gezoomt .vergleich__ebene, .vergleich--gezoomt .zuschnitt { will-change: transform; }
.vergleich--gezoomt .zuschnitt { transform-origin: 0 0; }
.vergleich--schiebt, .vergleich--schiebt .zuschnitt { cursor: grabbing; }
.vergleich__zoom-wert { position: absolute; left: var(--abstand-4); bottom: var(--abstand-4); z-index: 2; border: 0; cursor: pointer; font-family: inherit; font-variant-numeric: tabular-nums; }
.vergleich__beschriftung { position: absolute; top: var(--abstand-4); pointer-events: none; }
.vergleich__beschriftung--links { left: var(--abstand-4); }
.vergleich__beschriftung--rechts { right: var(--abstand-4); }

/* ---------- 19. Bilder-Galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand-4); }
@container (max-width: 900px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 640px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-3); } }
/* Reiter Bilder: größere Karten, damit man die Qualität erkennt */
.galerie--gross { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-5) var(--abstand-4); }
@container (max-width: 900px) { .galerie--gross { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.galerie__rahmen { overflow: hidden; border-radius: var(--rundung-bild); }
/* „Alle Bilder optimieren“: das fertige Bild wischt von links nach rechts über das alte, eine helle Linie führt.
   Bei „Bewegung reduzieren“ nur sanft überblenden (--blende) */
.galerie__rahmen .galerie__neu { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; clip-path: inset(0 100% 0 0); animation: wischen var(--wisch-dauer) var(--kurve) forwards; }
.galerie__rahmen .galerie__neu--blende { clip-path: none; animation: lade-ein var(--dauer) var(--kurve) forwards; }
.galerie__wischer { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--farbe-weiss); box-shadow: 0 0 12px 3px var(--farbe-akzent); pointer-events: none; animation: wischer var(--wisch-dauer) var(--kurve) forwards; }
@keyframes wischen { to { clip-path: inset(0 0 0 0); } }
@keyframes wischer { to { left: 100%; } }
/* Nach „Alle Bilder optimieren“: die gerade fertige Karte blendet ruhig auf */
.galerie__bild--frisch .galerie__rahmen img { animation: frisch 700ms var(--kurve); }
@keyframes frisch { from { opacity: 0.35; } to { opacity: 1; } }
/* Etikett, was gezeigt wird: „Optimiert“ oder „✦ KI“ */
.galerie__etikett { position: absolute; top: var(--abstand-2); left: var(--abstand-2); padding: var(--etikett-innen-foto); }
.galerie__bild { position: relative; }
/* Sortieren per Ziehen (Freigabe): Hand-Cursor, gezogene Karte hebt sich, Zielplatz hell-türkis */
.galerie--sortierbar { position: relative; }   /* Bezugspunkt für die festen Plätze beim Ziehen */
.galerie--sortierbar .galerie__oeffnen { cursor: grab; }
.wird-gezogen, .wird-gezogen * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.galerie--sortierbar .galerie__bild { touch-action: manipulation; -webkit-touch-callout: none; }
.galerie--sortierbar img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
/* Tastatur: aufgenommene Karte hebt sich leicht */
.galerie__bild--gezogen { transform: scale(1.03); box-shadow: var(--schatten-schwebend); border-radius: var(--rundung-bild); }
/* Maus/Finger: die Karte bleibt an ihrem (neuen) Platz sichtbar, nur leicht blass – so sieht man, wo sie landet */
.galerie__bild--platz { opacity: var(--sortier-blass); }
/* Mitgezogenes Foto: leicht größer, weicher Schatten */
.sortier-geist { position: fixed; z-index: 100; display: block; overflow: hidden; margin: 0; border-radius: var(--rundung-bild); pointer-events: none; transform: scale(1.03) rotate(1deg); box-shadow: var(--schatten-fenster); }
.sortier-geist img { width: 100%; height: 100%; object-fit: cover; }
.galerie__oeffnen { display: block; width: 100%; padding: 3px; border: 0; background: none; cursor: pointer; text-align: left; }
.galerie__rahmen { position: relative; display: block; }
.galerie__bild img, .galerie__version img { aspect-ratio: var(--bildformat); width: 100%; object-fit: cover; border-radius: var(--rundung-bild); transition: opacity var(--dauer-kurz); }   /* gleich für aufgeklappte KI-Bilder */
.galerie__bild[aria-current="true"] img { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.galerie__oeffnen:hover img { opacity: 0.9; }
.galerie__name { display: block; font-size: var(--text-mittel); font-weight: 500; padding: var(--abstand-2) 2px 0; }
.galerie__kopf { align-items: center; flex-wrap: wrap; }
.galerie__knoepfe { justify-content: flex-end; }
/* Haken nach Bedeutung:
   dunkel (wie „In Propstack übernehmen“) = wird in Propstack übernommen · Türkis hell = sonstige Auswahl (Orte im Text, Fundstellen …)
   Kreis-Haken „In Propstack verwenden“ auf jeder Vorschau */
.galerie__haken {
  position: absolute; top: calc(3px + var(--abstand-2)); right: calc(3px + var(--abstand-2)); width: var(--haken); height: var(--haken); padding: 0; cursor: pointer;
  border-radius: 50%; border: 1.5px solid var(--glas-hell); background: var(--schleier-leicht);
  display: grid; place-items: center; transition: background var(--dauer-kurz), border-color var(--dauer-kurz);
}
.galerie__haken svg { width: 13px; height: 13px; stroke: var(--farbe-weiss); stroke-width: 3; opacity: 0; }
.galerie__haken--an { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); }
.galerie__haken--an svg { opacity: 1; }

/* Haken-Feld (Checkbox als runder Haken) */
.haken-feld { display: flex; align-items: center; gap: var(--abstand-3); font-weight: 500; cursor: pointer; }
.haken-feld input { position: absolute; opacity: 0; pointer-events: none; }
.haken-feld__kreis {
  width: var(--haken); height: var(--haken); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  border: 1.5px solid var(--farbe-grau-mittel); background: var(--farbe-weiss); transition: background var(--dauer-kurz), border-color var(--dauer-kurz);
}
.haken-feld__kreis svg { width: 13px; height: 13px; stroke: var(--farbe-weiss); stroke-width: 3; opacity: 0; }
.haken-feld input:checked + .haken-feld__kreis { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); }
.haken-feld:hover input:not(:checked):not(:disabled) + .haken-feld__kreis { border-color: var(--farbe-grau); }
/* Sonstige Auswahl (nicht für Propstack): Türkis hell mit türkisem Haken */
.haken-feld--auswahl input:checked + .haken-feld__kreis { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent-hell); }
.haken-feld--auswahl input:checked + .haken-feld__kreis svg { stroke: var(--farbe-akzent); }
.haken-feld input:checked + .haken-feld__kreis svg { opacity: 1; }
.haken-feld input:disabled + .haken-feld__kreis { background: var(--farbe-akzent-hell); border-color: transparent; }
.haken-feld input:disabled + .haken-feld__kreis svg { stroke: var(--farbe-akzent); }
.haken-feld:has(input:disabled) { cursor: default; color: var(--farbe-akzent); }
.haken-feld input:focus-visible + .haken-feld__kreis { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.haken-feld--klein { font-weight: 400; font-size: var(--text-klein); gap: var(--abstand-2); }
.haken-feld--klein .haken-feld__kreis { width: var(--haken-klein); height: var(--haken-klein); }

/* Schon in Propstack: derselbe dunkle Kreis, fest – kein eigenes Etikett */
.galerie__haken--fest { cursor: default; }
/* Freigabe: Wasserzeichen am Titelbild – türkiser Kreis neben „Titelbild“, gefüllt = mit Wasserzeichen übernehmen */
.galerie__etiketten--aussen { top: calc(3px + var(--abstand-2)); left: calc(3px + var(--abstand-2)); }   /* außerhalb des Rahmens, gleiche Stelle */
.galerie__wz { width: var(--haken); height: var(--haken); padding: 0; border-radius: 50%; border: 2px solid var(--farbe-akzent); background: var(--glas-hell); cursor: pointer; pointer-events: auto; transition: background var(--dauer-kurz); }
.galerie__wz--an { background: var(--farbe-akzent); box-shadow: inset 0 0 0 2px var(--farbe-weiss); }
.galerie__wz:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.pille--erledigt svg { width: var(--symbol-pille); height: var(--symbol-pille); stroke: currentColor; stroke-width: 3; }

/* Bestätigung (Dialog) */
.dialog {
  border: 0; padding: var(--abstand-6); max-width: 420px; width: calc(100% - 32px); border-radius: var(--rundung-gross);
  background: var(--farbe-weiss); color: var(--farbe-dunkel); box-shadow: var(--schatten-fenster);
}
.dialog::backdrop { background: var(--schleier-leicht); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dialog__text { margin: 0 0 var(--abstand-5); font-size: var(--text-gross); font-weight: 500; line-height: 1.45; }
.dialog__knoepfe { display: flex; justify-content: flex-end; gap: var(--abstand-2); flex-wrap: wrap; }
/* Oranger Hinweis im Dialog, z. B. Zahl weicht vom Faktenblatt ab */
.dialog__text:has(+ .dialog__warnung) { margin-bottom: var(--abstand-3); }
.dialog .dialog__warnung { align-items: flex-start; margin: 0 0 var(--abstand-5); line-height: 1.45; }
.dialog__warnung svg { margin-top: 1px; }
.dialog__warnung > span { display: flex; flex-direction: column; gap: var(--abstand-0); }
.dialog__betrifft { font-size: var(--text-etikett); }

/* Overlay: Großansicht über der Seite (Bild oder Text) */
.overlay {
  border: 0; padding: 0; width: min(1100px, calc(100% - 32px)); max-height: calc(100dvh - 32px); border-radius: var(--rundung-gross);
  background: var(--farbe-weiss); color: var(--farbe-dunkel); box-shadow: var(--schatten-fenster); overflow: hidden;
}
.overlay[open] { display: flex; flex-direction: column; }
.overlay:focus { outline: none; }
.overlay::backdrop { background: var(--schleier); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.overlay__kopf { display: flex; align-items: center; gap: var(--abstand-3); padding: var(--abstand-4) var(--abstand-5); border-bottom: 1px solid var(--farbe-grau-hell); flex-wrap: wrap; }
.overlay__kopf h2 { margin-right: auto; }
/* Bild-Großansicht: Fenster ca. 90 % des Bildschirms, das Bild füllt den Platz im festen Format */
.overlay--bild { width: min(1100px, 90vw); height: 90dvh; max-height: 90dvh; }
.overlay--bild .overlay__kopf { flex-wrap: nowrap; }
.overlay--bild .overlay__kopf h2 { margin-right: 0; }
.overlay--bild .overlay__kopf .symbolknopf { margin-left: auto; }
.overlay--bild .overlay__kopf .symbolknopf + .symbolknopf { margin-left: 0; }
.grossansicht { position: relative; flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; padding: var(--abstand-4) var(--abstand-5); }
.grossansicht__flaeche {
  position: relative; overflow: hidden; border-radius: var(--rundung-bild);
  width: min(100cqw, 100cqh * var(--bildformat-quer) / var(--bildformat-hoch)); aspect-ratio: var(--bildformat);
}
.grossansicht__flaeche > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.grossansicht__pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: var(--glas-hell); box-shadow: var(--schatten-schwebend); backdrop-filter: var(--glas-unschaerfe); -webkit-backdrop-filter: var(--glas-unschaerfe); }
.grossansicht__pfeil--links { left: var(--abstand-2); }
.grossansicht__pfeil--rechts { right: var(--abstand-2); }
.grossansicht__pfeil:disabled { opacity: 0; pointer-events: none; }
/* Kleiner Hinweis am Bild, verschwindet nach dem ersten Ziehen */
.grossansicht__tipp { position: absolute; top: var(--abstand-4); left: 50%; transform: translateX(-50%); pointer-events: none; }
.grossansicht__tipp svg { width: 14px; height: 14px; stroke: currentColor; }
@container (max-width: 600px) { .grossansicht__tipp { display: none; } } /* auf schmalen Bildern reicht der Griff */
/* Ruhige Leiste unter dem Bild */
.grossansicht__leiste { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4); padding: var(--abstand-3) var(--abstand-5) var(--abstand-4); }
.grossansicht__gruppe { display: flex; align-items: center; gap: var(--abstand-4); flex-wrap: wrap; min-width: 0; }
/* Oranges Etikett am Bild, wenn etwas zu prüfen ist */
.grossansicht__warnung { position: absolute; left: var(--abstand-4); bottom: var(--abstand-4); flex-wrap: wrap; white-space: normal; max-width: calc(50% - var(--abstand-5)); border-radius: var(--rundung-klein); }
.foto-warnung { color: var(--farbe-achtung); }
.foto-warnung::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--farbe-achtung); }
/* Etiketten oben links am Bild: „Original“ im Vergleich, darunter „Titelbild“ */
.grossansicht__etiketten { position: absolute; top: var(--abstand-4); left: var(--abstand-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--abstand-2); pointer-events: none; }
.grossansicht__etiketten .vergleich__beschriftung { position: static; }
.vergleich--einzeln .grossansicht__etiketten .vergleich__beschriftung { display: none; }
.grossansicht__warnung-tipp { flex-basis: 100%; padding-left: var(--abstand-3); font-weight: 400; color: var(--farbe-grau); }
/* „Titelbild“ als Auswahl-Kreis mit Stern: aus = Rahmen, an = türkis gefüllt */

/* Übersicht: Faktenblatt */
.faktenblatt { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--abstand-5) var(--abstand-5); margin: 0; }
.fakt { display: flex; align-items: flex-start; gap: var(--abstand-3); }
/* Symbol ohne Hintergrund, im Stil der Werkzeug-Kacheln */
.fakt > svg { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; stroke: var(--farbe-grau-dunkel); }
.fakt dd { margin: var(--abstand-1) 0 0; font-weight: 500; }

/* Übersicht: Mein Eindruck */
.eindruck { scroll-margin-top: 120px; display: flex; flex-direction: column; gap: var(--abstand-3); }
.eindruck__karte { position: relative; padding: var(--abstand-4); }
.eindruck__feld {
  width: 100%; min-height: 180px; padding: var(--abstand-2) 72px var(--abstand-2) var(--abstand-2); border: 0; resize: vertical; outline: none;
  background: none; font-size: var(--text-gross); line-height: 1.6;
}
.eindruck__feld::placeholder { color: var(--farbe-grau); }
.eindruck__mikro { position: absolute; top: var(--abstand-4); right: var(--abstand-4); display: flex; flex-direction: column; align-items: center; gap: var(--abstand-1); font-size: var(--text-label); color: var(--farbe-grau); }
.mikro {
  position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--farbe-akzent-hell); display: grid; place-items: center; transition: background var(--dauer-kurz);
}
.mikro svg { width: 22px; height: 22px; stroke: var(--farbe-akzent); }
.mikro:hover { background: var(--farbe-akzent-hell); }
/* Beim Zuhören: ruhiges Pulsieren */
.mikro--hoert { background: var(--farbe-akzent); }
.mikro--hoert svg { stroke: var(--farbe-weiss); }
.mikro--hoert::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--farbe-akzent); animation: pulsieren 1.6s ease-out infinite; }
@keyframes pulsieren { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.6); opacity: 0; } }
.mikro:disabled { cursor: default; opacity: var(--deaktiviert); }
/* Sprechen im Blatt (Handy-Mikrofon): das Feld „Mein Eindruck“ oben (schreibt sich live mit), darunter der große Knopf */
.eindruck--blatt { display: flex; flex-direction: column; gap: var(--abstand-3); min-height: 0; }
.eindruck--blatt .eingabe--mehrzeilig { min-height: 0; height: 32dvh; resize: none; }
.eindruck__feld[readonly], .eindruck--blatt .eingabe[readonly] { cursor: default; }
.mikro--gross { width: 96px; height: 96px; }
.mikro--gross svg { width: 36px; height: 36px; }
.sprechen { display: flex; flex-direction: column; align-items: center; gap: var(--abstand-3); padding: var(--abstand-2) 0; }
.sprechen__zeit { color: var(--farbe-grau); font-variant-numeric: tabular-nums; text-align: center; }

/* Übersicht: Freigabe */
.freigabe { display: flex; flex-direction: column; gap: var(--abstand-4); }
.freigabe .abschnitt__kopf { margin-bottom: 0; }
.freigabe__block { display: flex; flex-direction: column; gap: var(--abstand-4); }

/* Tools → PDF schwärzen: fünf Schritte, eine Ansicht pro Schritt */
.schritte { display: flex; gap: var(--abstand-2); list-style: none; margin: 0 0 var(--abstand-6); padding: 0; flex-wrap: wrap; }
.schritte li { display: flex; align-items: center; gap: var(--abstand-2); font-size: var(--text-klein); color: var(--farbe-grau); }
.schritte li + li::before { content: ""; width: 24px; height: 1px; background: var(--farbe-grau-hell); }
.schritte__nr { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-etikett); font-weight: 600; border: 1px solid var(--farbe-grau-hell); background: var(--farbe-weiss); }
.schritte li[aria-current="step"] { color: var(--farbe-akzent); font-weight: 600; }
.schritte li[aria-current="step"] .schritte__nr { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent-hell); }
.schritte li.schritte--fertig .schritte__nr { background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: var(--farbe-weiss); }
@media (max-width: 860px) { .schritte__text { display: none; } .schritte li[aria-current="step"] .schritte__text { display: inline; } }
.schritte--kopf { margin: 0; flex-wrap: nowrap; white-space: nowrap; }
.ablauf__schritt { display: flex; flex-direction: column; gap: var(--abstand-5); }
.ablauf__navigation { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-3); }
.ablauf__hinweis { display: flex; align-items: center; gap: var(--abstand-2); font-size: var(--text-klein); color: var(--farbe-grau); }
.ablauf__hinweis svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
.objektwahl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--abstand-2); max-height: 380px; overflow-y: auto; }
.objektwahl__eintrag {
  display: flex; align-items: center; gap: var(--abstand-3); width: 100%; padding: var(--abstand-2); text-align: left; cursor: pointer;
  border-radius: var(--rundung); border: 1px solid var(--farbe-grau-hell); background: var(--farbe-weiss);
  transition: border-color var(--dauer-kurz), background var(--dauer-kurz);
}
.objektwahl__eintrag:hover { border-color: var(--farbe-grau-mittel); }
.objektwahl__eintrag[aria-pressed="true"] { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent-hell); }
.objektwahl__eintrag img { width: 64px; height: 44px; border-radius: var(--rundung-klein); object-fit: cover; flex-shrink: 0; }
.objektwahl__titel { display: block; font-weight: 600; }
.objektwahl__eintrag--gewaehlt { cursor: default; background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent-hell); }
/* PDF schwärzen, Schritt 4: Karte „Ziel“ */
.ziel { display: flex; flex-direction: column; gap: var(--abstand-4); }
.ziel .objektwahl { max-height: 420px; }
.ziel__datei { display: flex; align-items: center; gap: var(--abstand-3); }
.ziel__datei > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ziel__dateiname { font-size: var(--text-klein); font-weight: 600; overflow-wrap: anywhere; }
.ablage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-3); width: 100%;
  min-height: 280px; padding: var(--abstand-6); border-radius: var(--rundung-gross); cursor: pointer; text-align: center;
  border: 2px dashed var(--farbe-grau-mittel); background: var(--farbe-weiss); color: var(--farbe-grau);
  transition: border-color var(--dauer-kurz), background var(--dauer-kurz);
}
.ablage:hover, .ablage--drueber { border-color: var(--farbe-akzent); background: var(--farbe-akzent-hell); }
.ablage svg { width: 44px; height: 44px; stroke: var(--farbe-akzent); }
.ablage__titel { font-size: var(--text-gross); font-weight: 600; color: var(--farbe-dunkel); }
.datei { display: flex; align-items: center; gap: var(--abstand-3); }
.datei__symbol { width: 44px; height: 52px; border-radius: var(--rundung-klein); background: var(--farbe-akzent-hell); color: var(--farbe-akzent); display: grid; place-items: center; font-size: var(--text-label); font-weight: 700; flex-shrink: 0; }
.pruefung { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--abstand-5); align-items: start; }
@container (max-width: 760px) { .pruefung { grid-template-columns: 1fr; } }
/* Platzhalter-Dokument */
.pdf-seite {
  background: var(--farbe-weiss); border-radius: var(--rundung-klein); box-shadow: var(--schatten-schwebend); border: 1px solid var(--farbe-grau-hell);
  padding: var(--abstand-6) var(--abstand-6); font-family: Georgia, "Times New Roman", serif; font-size: var(--text-klein); line-height: 1.9; color: var(--farbe-dunkel);
}
.pdf-seite { position: relative; overflow: hidden; }
.pdf-vorschau { max-width: 640px; }
.pdf-titel-laedt { max-width: 420px; padding: var(--abstand-2) 0; }
.ablage__balken { width: min(320px, 80%); }
.pdf-seite h4 { margin: 0 0 var(--abstand-3); font-size: var(--text-normal); font-family: inherit; }
.pdf-seite p { margin: 0; }
.pdf-zeile { display: block; height: 8px; margin: var(--abstand-2) 0; border-radius: var(--rundung-mini); background: var(--farbe-grau-hell); }
.pdf-zeile--lang { width: 90%; }
.pdf-zeile--mittel { width: 75%; }
.pdf-zeile--kurz { width: 55%; }
.fund { padding: 1px 3px; border-radius: var(--rundung-mini); background: var(--farbe-achtung-hell); outline: 1.5px solid var(--farbe-achtung); transition: background var(--dauer), color var(--dauer), outline-color var(--dauer); }
.fund--aus { background: none; outline: 1px dashed var(--farbe-grau-mittel); }
.fund--aktiv { outline: 2px solid var(--farbe-achtung); }
.fund--geschwaerzt { background: var(--farbe-dunkel); color: transparent; outline: 0; }
/* Echte Seiten (App): Seite als Bild, Balken darüber – Lage in % kommt von LEO. Gelb wie ein Textmarker (Text bleibt lesbar),
   gestrichelt = entfernt, beim Schwärzen schwarz. Neue Balken zieht man mit der Maus. */
.pdf-seiten { display: flex; flex-direction: column; gap: var(--abstand-5); }
.pdf-blatt { position: relative; overflow: hidden; background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung-klein); box-shadow: var(--schatten-schwebend); user-select: none; }
.pdf-blatt img { display: block; width: 100%; height: auto; }
.pdf-seiten__ende { display: block; height: 1px; }   /* Markierung unter der letzten Seite (bis unten gescrollt?) */
.pdf-blatt--zeichnen { cursor: crosshair; touch-action: none; }
.pdf-balken { position: absolute; padding: 0; border: 0; border-radius: var(--rundung-mini); background: var(--farbe-achtung-hell); mix-blend-mode: multiply; outline: 1.5px solid var(--farbe-achtung); cursor: pointer; transition: background var(--dauer), outline-color var(--dauer); }
.pdf-balken--aus { background: none; outline: 1px dashed var(--farbe-grau-mittel); }
.pdf-balken--aktiv { outline-width: 2.5px; }
/* Maus über einer Angabe (Zeile rechts oder Balken links): alle ihre Balken kräftig, ihre Zeile hinterlegt */
.pdf-balken--hover { background: var(--farbe-achtung); outline: 3px solid var(--farbe-achtung); }
.pdf-balken--aus.pdf-balken--hover { background: none; outline: 2px dashed var(--farbe-achtung); }
.pdf-balken--neu { background: none; mix-blend-mode: normal; outline: 1.5px dashed var(--farbe-akzent); pointer-events: none; }
.pdf-blatt--schwarz .pdf-balken { background: var(--farbe-dunkel); mix-blend-mode: normal; outline: 0; border-radius: 0; cursor: default; }
.pdf-blatt--schwarz .pdf-balken--aus { display: none; }
/* Einbrennen: Die Scanner-Linie läuft von oben nach unten, wo sie vorbeikommt, zieht sich der schwarze Balken von links auf */
.pdf-blatt--einbrennen .pdf-balken { transform-origin: left center; animation: balken-aufziehen var(--dauer) var(--kurve) both; animation-delay: calc(var(--schwaerzen-dauer) * var(--anteil, 0)); }
.schwaerz-scanner { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 3px; background: var(--farbe-akzent); box-shadow: 0 0 24px 8px var(--farbe-akzent); pointer-events: none; animation: scanner-lauf var(--schwaerzen-dauer) linear both; }
@keyframes balken-aufziehen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes scanner-lauf { from { top: 0; } to { top: 100%; } }
.fundkarte { position: sticky; top: 112px; max-height: calc(100dvh - 144px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--abstand-4); }
.fundliste__fehlt { display: block; }
/* Liste der Funde: Zeilen wie .listenzeile (Luft oben und unten, feine Linie dazwischen), anklickbar wie .listenzeile--klick */
.fundliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fundliste li + li { border-top: 1px solid var(--farbe-grau-hell); }
.fundliste .haken-feld { align-items: flex-start; font-weight: 400; font-size: var(--text-klein); margin: 0 calc(-1 * var(--abstand-3)); padding: var(--abstand-3); border-radius: var(--rundung); transition: background var(--dauer-kurz); }
.fundliste .fundliste__zeile--hover { background: var(--farbe-achtung-hell); }
.fundliste__art { display: block; }   /* zusammen mit .label */
.erfolg { display: flex; flex-direction: column; align-items: center; gap: var(--abstand-4); padding: var(--abstand-7) var(--abstand-5); text-align: center; }
.erfolg__haken { width: 72px; height: 72px; border-radius: 50%; background: var(--farbe-akzent); display: grid; place-items: center; animation: erfolg 500ms var(--kurve) both; }
.erfolg__haken svg { width: 34px; height: 34px; stroke: var(--farbe-weiss); stroke-width: 2.6; }
@keyframes erfolg { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Tools-Kachel „PDF schwärzen“: Dokument mit geschwärzten Zeilen statt Foto */
.werkzeugbild { display: grid; place-items: center; background: var(--farbe-grau-hell); }
.werkzeugbild__seite {
  width: 42%; aspect-ratio: 1 / 1.25; padding: 9% 8%; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--farbe-weiss); border-radius: var(--rundung-mini); box-shadow: var(--schatten-schwebend);
  transition: transform 600ms var(--kurve);
}
.werkzeugbild__zeile { position: relative; height: 6%; border-radius: var(--rundung-pille); background: var(--farbe-grau-hell); }
.werkzeugbild__zeile:nth-child(1) { width: 55%; height: 8%; background: var(--farbe-grau-mittel); }
.werkzeugbild__zeile:nth-child(3), .werkzeugbild__zeile:nth-child(8) { width: 70%; }
.werkzeugbild__zeile:nth-child(5) { width: 85%; }
.werkzeugbild__balken { position: absolute; top: -20%; bottom: -20%; border-radius: var(--rundung-pille); background: var(--farbe-dunkel); transform-origin: left; transition: transform 450ms var(--kurve); }
.werkzeugbild__balken--a { left: 28%; width: 46%; }
.werkzeugbild__balken--b { left: 0; width: 38%; }
.werkzeugbild__balken--c { left: 18%; width: 54%; }
.werkzeugbild__balken--d { left: 0; width: 44%; }
/* Beim Darüberfahren schieben sich zwei weitere Balken über die Zeilen */
.werkzeugbild__balken--spaeter { transform: scaleX(0); }
.objektkachel:hover .werkzeugbild__balken--spaeter { transform: scaleX(1); }
.objektkachel:hover .werkzeugbild__balken--d { transition-delay: 90ms; }
.objektkachel:hover .werkzeugbild__seite { transform: scale(1.02); }


.textkachel {
  display: flex; flex-direction: column; gap: var(--abstand-3); cursor: pointer;
  transition: box-shadow var(--dauer), transform var(--dauer) var(--kurve);
}
.textkachel:hover { box-shadow: var(--schatten-schwebend); transform: translateY(-2px); }
.textkachel__kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--abstand-2); }
.textkachel__kopf .haken-kreis, .textkachel__kopf .pille--erledigt { margin-left: auto; }
/* Freigabe → Beschreibung: Umschalter Kurz | Lang neben dem Titel, darunter je Feld eine Karte in voller Breite.
   Jede Karte ist so hoch wie ihr Text, nichts wird abgeschnitten. */
.freigabe-texte { display: flex; flex-direction: column; gap: var(--abstand-3); }
.freigabe__titel { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; }
.textkachel--voll { gap: var(--abstand-2); padding: var(--abstand-4) var(--abstand-5); transition: border-color var(--dauer-kurz); }
.textkachel--voll:hover { transform: none; box-shadow: var(--schatten-karte); border-color: var(--farbe-akzent); }
.textkachel__text { font-size: var(--text-normal); line-height: 1.7; }

/* Texte-Reiter: ein Feld pro breiter Karte, Text direkt bearbeitbar */
.textliste { display: flex; flex-direction: column; gap: var(--abstand-2); }
/* Ringsum gleicher Abstand; Titel → Feld etwas Luft */
.textfeld { display: flex; flex-direction: column; gap: var(--abstand-3); padding: var(--abstand-4); scroll-margin-top: 120px; cursor: pointer; transition: border-color var(--dauer-kurz), box-shadow var(--dauer-kurz); }
.textfeld:hover { border-color: var(--farbe-grau-mittel); }
/* Aktives Feld: türkiser Rand */
.textfeld--aktiv, .textfeld--aktiv:hover { border-color: var(--farbe-akzent); box-shadow: 0 0 0 1px var(--farbe-akzent); }
.textfeld__name { margin: 0; font-family: var(--schrift-display); font-size: var(--titel-4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.textfeld--hervor { box-shadow: 0 0 0 2px var(--farbe-akzent); }
.textfeld__kopf { display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; }
.textfeld__titel { margin-right: auto; display: flex; align-items: center; gap: var(--abstand-2) var(--abstand-3); flex-wrap: wrap; }
/* Reiter und Kurz | Lang auf einer Ebene, getrennt durch einen senkrechten Strich */
.reiterzeile { display: flex; align-items: center; min-height: var(--knopf-gross-hoehe); gap: var(--abstand-3); flex-wrap: wrap; row-gap: var(--abstand-3); margin-bottom: var(--abstand-5); }
.reiterzeile .reiter { margin-bottom: 0; }
.reiterzeile__trenner { width: 1px; height: 28px; margin: 0 var(--abstand-1); background: var(--farbe-grau-mittel); }
.reiterzeile__rechts { display: flex; align-items: center; gap: var(--abstand-3); margin-left: auto; }
/* Inhalt direkt unter der Reiterzeile mit normalem Abschnittsabstand */
.reiterzeile ~ .galerie__abschnitt { margin-top: 0; }
/* Titel „Beschreibung“ über beiden Spalten: Seitenfeld und oberste Karte beginnen auf einer Linie */
.textfeld__rahmen { position: relative; }
/* Haken-Kreis auf hellem Grund */
.haken-kreis {
  width: var(--haken); height: var(--haken); border-radius: 50%; padding: 0; cursor: pointer; flex-shrink: 0;
  border: 1.5px solid var(--farbe-grau-mittel); background: var(--farbe-weiss); display: grid; place-items: center;
}
.haken-kreis svg { width: 13px; height: 13px; stroke: var(--farbe-weiss); stroke-width: 3; opacity: 0; }
.haken-kreis:hover:not([aria-pressed="true"]) { border-color: var(--farbe-grau); }
.haken-kreis[aria-pressed="true"] { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); }
.haken-kreis[aria-pressed="true"] svg { opacity: 1; }
/* Bearbeitbarer Text: Rahmen beim Darüberfahren, Klick macht ihn direkt editierbar */
.textkarte__text {
  margin: 0; padding: var(--abstand-4); border-radius: var(--rundung); border: 1px solid var(--farbe-grau-hell);
  font-size: var(--text-normal); line-height: 1.65; cursor: text; outline: none; background: var(--farbe-hintergrund);
  transition: border-color var(--dauer-kurz), background var(--dauer-kurz), opacity var(--dauer);
}
/* Inhalt der Texte: Absätze, beim Lang-Text auch Zwischenüberschriften, Fett und Aufzählungen */
.textkarte__text p, .textkarte__text ul { margin: 0 0 var(--abstand-3); }
.textkarte__text > :last-child { margin-bottom: 0; }
.textkarte__text h3 { margin: var(--abstand-4) 0 var(--abstand-1); font-family: var(--schrift-display); font-size: var(--titel-4); font-weight: 600; line-height: 1.3; }
.textkarte__text > h3:first-child { margin-top: 0; }
.textkarte__text ul { padding-left: var(--abstand-5); }
.textkarte__text strong { font-weight: 600; }
.textkarte__text:empty::before { content: attr(data-leer); color: var(--farbe-grau); }
.textkarte__text:hover { border-color: var(--farbe-grau-mittel); }
.textkarte__text:focus { border-color: var(--farbe-akzent); background: var(--farbe-weiss); }
/* In der Textkarte: Eingabefeld mit leichtem Rahmen wie alle mehrzeiligen Eingaben (.eingabe--mehrzeilig):
   hellgrau, beim Darüberfahren etwas dunkler, beim Tippen türkis. Rundung = Kartenrundung minus Abstand (24 − 16 = 8),
   damit die Kurven von Karte und Feld parallel laufen */
.textfeld .textkarte__text { padding: var(--abstand-3) var(--abstand-4); margin: 0; border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung-klein); background: var(--farbe-weiss); cursor: text; }
.textfeld .textkarte__text:hover { border-color: var(--farbe-grau-mittel); }
.textfeld .textkarte__text:focus { border-color: var(--farbe-akzent); background: var(--farbe-weiss); }
/* Texte → „In der Nähe“ unter der Lage: Orte als Auswahl-Pillen. Angehakt (steht im Lagetext) = Türkis hell mit Haken,
   sonst grau wie jede nicht gewählte Pille. Die Entfernung steht etwas leiser daneben. */
.orte { cursor: default; }
.orte__formular { display: flex; flex-direction: column; gap: var(--abstand-3); }
.orte__formular > p { margin: 0; }
.orte__gruppen { display: flex; flex-direction: column; gap: var(--abstand-2); }
.orte__gruppe { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: var(--abstand-3); }
.orte__gruppe-name { font-weight: 500; }
@media (max-width: 600px) { .orte__gruppe { grid-template-columns: 1fr; gap: var(--abstand-1); } }
.orte__liste { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.orte__ort { position: relative; }
.orte__ort input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.orte__ort svg { display: none; }
.orte__ort:has(input:checked), .orte__ort:has(input:checked):hover { background: var(--farbe-akzent-hell); color: var(--farbe-akzent); }
.orte__ort:has(input:checked) svg { display: block; }
.orte__ort:has(input:focus-visible) { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.orte__entfernung { font-weight: 400; opacity: 0.75; }
.orte__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); flex-wrap: wrap; }
.orte__fuss a { color: inherit; text-decoration: underline; }
/* Reiter Texte: links die Karten (ca. 2/3), rechts das feste Seitenfeld (ca. 1/3) */
.textseite { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--abstand-5); align-items: start; }
.textwerkzeug { position: sticky; top: 112px; max-height: calc(100dvh - 144px); overflow-y: auto; overscroll-behavior: contain; }
.textwerkzeug__leer { display: flex; flex-direction: column; align-items: center; gap: var(--abstand-3); margin: 0; padding: var(--abstand-6) var(--abstand-3); text-align: center; color: var(--farbe-grau); font-size: var(--text-klein); }
.textwerkzeug__leer svg { width: 22px; height: 22px; stroke: var(--farbe-grau); }
.textwerkzeug__kopf { display: flex; flex-direction: column; gap: var(--abstand-0); }
.textwerkzeug .lagepunkte { grid-template-columns: 1fr; padding: 0; background: none; }
.textwerkzeug--chat { display: flex; flex-direction: column; gap: var(--abstand-3); min-height: 380px; max-height: calc(100dvh - 144px); padding: var(--abstand-4); overflow: hidden; }
/* Chatverlauf: ruhige Sprechblasen, Nutzer rechts, LEO links */
.chat__verlauf { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-1) 2px; }
.chat__leer { margin-top: auto; display: flex; flex-direction: column; gap: var(--abstand-2); }
.blase { max-width: 88%; padding: var(--abstand-2) var(--abstand-3); border-radius: var(--rundung); font-size: var(--text-klein); line-height: 1.5; }
.blase--nutzer { align-self: flex-end; background: var(--farbe-grau-hell); border-bottom-right-radius: var(--rundung-mini); }
.blase--leo { align-self: flex-start; display: flex; gap: var(--abstand-2); background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); border-bottom-left-radius: var(--rundung-mini); }
.blase__symbol { color: var(--farbe-akzent); font-weight: 600; }
.blase__zitat { display: block; margin-bottom: var(--abstand-1); padding-left: var(--abstand-2); border-left: 2px solid var(--farbe-grau-mittel); color: var(--farbe-grau); font-size: var(--text-etikett); }
.blase__rueck { display: block; margin-top: 2px; font-size: var(--text-etikett); }
.blase__rueck.button--text { padding: 0; min-height: 0; }
/* LEO schreibt: drei ruhige Punkte */
/* Eingabe unten, optional mit Zitat der markierten Stelle */
.chat__eingabe { display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-2); border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung); background: var(--farbe-weiss); transition: border-color var(--dauer-kurz); }
.chat__eingabe:focus-within { border-color: var(--farbe-grau); }
.chat__zitat { display: flex; align-items: flex-start; gap: var(--abstand-2); padding: var(--abstand-1) var(--abstand-2); border-radius: var(--rundung-klein); background: var(--farbe-grau-hell); color: var(--farbe-grau); font-size: var(--text-etikett); line-height: 1.45; }
.chat__zitat span { flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chat__zitat-weg { flex-shrink: 0; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.chat__zitat-weg:hover { background: var(--farbe-grau-hell); }
.chat__zitat-weg svg { width: var(--symbol-pille); height: var(--symbol-pille); stroke: var(--farbe-grau); }
.chat__zeile { display: flex; align-items: center; gap: var(--abstand-2); }
.chat__zeile input { flex: 1; min-width: 0; height: 36px; padding: 0 var(--abstand-2); border: 0; outline: none; background: none; font-size: var(--text-mittel); }
.chat__zeile input::placeholder { color: var(--farbe-grau); }
/* Senden: runder türkiser Knopf */
.chat__senden { flex-shrink: 0; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.chat__senden svg { width: var(--symbol); height: var(--symbol); stroke: var(--farbe-weiss); stroke-width: 2.2; }
.chat__senden:disabled { opacity: var(--deaktiviert); cursor: default; }
/* Lage: einklappbarer Abschnitt „Orte im Text“ unter dem Chat */
.orte { flex-shrink: 0; max-height: 40%; overflow-y: auto; padding-top: var(--abstand-3); border-top: 1px solid var(--farbe-grau-hell); }
.orte summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--abstand-2); font-size: var(--text-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--farbe-grau); }
.orte summary::-webkit-details-marker { display: none; }
.orte summary::before { content: "›"; display: inline-block; font-size: var(--text-mittel); transition: transform var(--dauer-kurz); }
.orte[open] summary::before { transform: rotate(90deg); }
.orte .lagepunkte { margin: var(--abstand-2) 0; }
/* Markieren: runder „+“-Button direkt neben der markierten Stelle */
.markier-plus { position: fixed; z-index: 30; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.markier-plus svg { width: 15px; height: 15px; stroke: var(--farbe-weiss); stroke-width: 2.4; }
/* Geänderte Stelle leuchtet kurz türkis auf */
.neu-markiert { border-radius: var(--rundung-mini); animation: aufleuchten 1.6s var(--kurve); }
.textkarte__text--aufleuchten { animation: aufleuchten 1.6s var(--kurve); }
@keyframes aufleuchten { from { background-color: var(--farbe-akzent-hell); } to { background-color: transparent; } }
@container (max-width: 980px) {
  .textseite { grid-template-columns: 1fr; }
  .textwerkzeug { position: static; max-height: none; }
}
.textkarte__text--laedt { opacity: var(--deaktiviert); pointer-events: none; }
/* Viel Platz zum Lesen und Schreiben: Objektbeschreibung, Lage, Ausstattung groß, Sonstiges mittel */
.textkarte__text--gross { min-height: var(--textfeld-gross); }
.textkarte__text--mittel { min-height: var(--textfeld-mittel); }
/* Feste Höhe: das Feld wächst nicht mit dem Text, längere Texte scrollen innen (auch die Schimmer-Zeilen haben diese Höhe) */
.textkarte__text--fest.textkarte__text--gross { height: var(--textfeld-gross); }
.textkarte__text--fest.textkarte__text--mittel { height: var(--textfeld-mittel); }
.textkarte__text--fest { overflow-y: auto; overscroll-behavior: contain; }
/* Schimmer-Zeilen in der Textkarte: derselbe Kasten wie das Textfeld (Rahmen, Rundung, Höhe), die Zeilen im Takt
   der Textzeilen über das ganze Feld – so springt nichts, wenn der Text kommt */
.textfeld .platzhalter {
  gap: var(--abstand-3); padding: var(--abstand-4); border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung-klein);
  background: var(--farbe-weiss); font-size: var(--text-normal);
}
.textfeld .platzhalter:not(.textkarte__text--fest) { justify-content: center; min-height: calc(1.65em + 2 * var(--abstand-3) + 2px); padding-block: var(--abstand-3); }
.platzhalter.textkarte__text--fest { overflow: hidden; }

.werkzeugzeile { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; margin-top: var(--abstand-5); }
.werkzeugzeile ~ .fortschritt { margin-top: var(--abstand-5); }
.werkzeugzeile__hinweise { flex: 1 1 300px; display: flex; flex-direction: column; gap: var(--abstand-2); }
.werkzeugzeile__knoepfe { display: flex; gap: var(--abstand-2); flex-wrap: wrap; }
.lagepunkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--abstand-2) var(--abstand-4); padding: var(--abstand-4); border-radius: var(--rundung); background: var(--farbe-grau-hell); }
.faktenfehler { background: var(--farbe-achtung-hell); color: var(--farbe-achtung); padding: 0 var(--abstand-1); border-radius: var(--rundung-mini); font-weight: 600; }
.hinweis { margin: 0; }

/* Bild bearbeiten (Popup): Bedienung rechts */
.bildarbeitsplatz__seite { display: flex; flex-direction: column; gap: var(--abstand-5); }
.bildarbeitsplatz__gruppe { display: flex; flex-direction: column; gap: var(--abstand-3); }
.bildarbeitsplatz__gruppe + .bildarbeitsplatz__gruppe { padding-top: var(--abstand-5); border-top: 1px solid var(--farbe-grau-hell); }
.zeile--eng { flex-wrap: nowrap; }
.zeile--eng .button--text { padding: 0; }
.bildarbeitsplatz__panel { display: flex; flex-direction: column; gap: var(--abstand-5); }
.bildarbeitsplatz__panel > .pille { align-self: flex-start; }
.bildarbeitsplatz__abschluss { padding-top: var(--abstand-5); border-top: 1px solid var(--farbe-grau-hell); }
[data-erstellen], [data-dieses-optimieren] { align-self: flex-start; }
.bildarbeitsplatz__panel .bildarbeitsplatz__gruppe + .bildarbeitsplatz__gruppe { padding-top: 0; border-top: 0; }
.bildarbeitsplatz__panel--ohne-linie { padding-top: 0; border-top: 0; }
/* Ganz unten im Feld: Titelbild-Schalter links, Originalgröße rechts */
.bildarbeitsplatz__fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); flex-wrap: wrap; }
.bildarbeitsplatz__fuss .bildinfo__zusatz { margin-left: auto; }

/* KI-Zeichen ✦ */
.ki-stern { color: var(--farbe-akzent); font-size: 0.95em; }
.button--primaer .ki-stern, .button--uebertragen .ki-stern, .button--ki .ki-stern { color: var(--farbe-weiss); }
.segment button[aria-pressed="true"] .ki-stern, .pille .ki-stern { color: var(--farbe-akzent); }

/* Bildname: normaler Text, direkt bearbeitbar (Text-Cursor), einzeilig mit „…“, beim Bearbeiten ganz sichtbar */
.raumname { min-height: 36px; display: flex; align-items: center; min-width: 0; }
.bildname { display: block; min-width: 0; max-width: 100%; cursor: text; outline: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bildname:focus { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* Leiser Hinweis, dass der Name änderbar ist: beim Darüberfahren eine zarte Fläche dahinter
   (Fläche über einen Schatten nach außen – so verschiebt sich nichts und nichts wird abgeschnitten) */
.bildname { border-radius: var(--rundung-mini); transition: background var(--dauer-kurz), box-shadow var(--dauer-kurz); }
.bildname:hover:not(:focus) { background: var(--farbe-grau-hell); box-shadow: 0 0 0 var(--abstand-1) var(--farbe-grau-hell); }

/* Runde Pfeile zum Wechseln zwischen Bildern */
.symbolknopf--gross { width: 48px; height: 48px; background: var(--farbe-weiss); box-shadow: var(--schatten-karte); }
.symbolknopf--gross svg { width: 20px; height: 20px; }
.symbolknopf:disabled { opacity: var(--deaktiviert); cursor: default; }
.links { align-self: flex-start; padding-left: 0; }

/* Varianten nach „Einrichten“: zwei kleine Vorschaubilder zum Antippen */
.varianten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-2); }
.variante { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--rundung-bild); }
.variante img { width: 100%; aspect-ratio: var(--bildformat); object-fit: cover; border-radius: var(--rundung-bild); }
.variante[aria-pressed="true"] img { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }

/* Feste KI-Kennzeichnung auf jedem eingerichteten Bild – dezent, unten links */
.ki-kennzeichnung {
  position: absolute; left: var(--abstand-3); bottom: var(--abstand-3); pointer-events: none;
  padding: var(--etikett-innen-foto); border-radius: var(--rundung-mini); white-space: nowrap;
  background: var(--schleier); color: var(--farbe-weiss); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.01em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ki-kennzeichnung--klein { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px var(--abstand-1); font-size: var(--text-winzig); line-height: 1.3; white-space: normal; border-radius: var(--rundung-mini); }
/* Im großen Bild sitzt sie unten links auf der eingerichteten Seite des Reglers */
.vergleich--einzeln { cursor: default; }
.vergleich--einzeln .vergleich__nachher, .vergleich--einzeln .vergleich__linie, .vergleich--einzeln .vergleich__beschriftung--rechts { display: none; }
.vergleich__ki { left: calc(var(--teilung, 50%) + var(--abstand-3)); max-width: calc(100% - var(--teilung, 50%) - 2 * var(--abstand-3)); white-space: normal; line-height: 1.35; }

.anpassen { display: flex; flex-direction: column; gap: var(--abstand-2); }
.pillenreihe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); flex-wrap: wrap; }


/* ---------- 21. Kleine Rückmeldung (Toast) ---------- */
.toast {
  position: fixed; left: 50%; bottom: var(--abstand-6); transform: translate(-50%, 20px); opacity: 0;
  background: var(--glas-dunkel); backdrop-filter: var(--glas-unschaerfe); -webkit-backdrop-filter: var(--glas-unschaerfe);
  color: var(--farbe-weiss); padding: var(--abstand-3) var(--abstand-5);
  border-radius: var(--rundung-pille); font-size: var(--text-klein); font-weight: 500; z-index: 50;
  width: max-content; max-width: calc(100vw - 32px); text-align: center;
  transition: opacity var(--dauer), transform var(--dauer) var(--kurve); pointer-events: none;
}
.toast--sichtbar { opacity: 1; transform: translate(-50%, 0); }

.leerzustand { text-align: center; padding: var(--abstand-8) var(--abstand-5); display: flex; flex-direction: column; align-items: center; gap: var(--abstand-4); }


/* ---------- 22b. Bildformat, Titelbild, Wasserzeichen, Ausschnitt ---------- */

/* Etiketten oben links auf der Kachel (Titelbild, Optimiert, ✦ KI) */
.galerie__etiketten { position: absolute; top: var(--abstand-2); left: var(--abstand-2); right: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1); pointer-events: none; }
.galerie__etiketten .galerie__etikett { position: static; }
/* Unter dem Bild: Raumname + Stern, darunter kleine Hinweise */
.galerie__unterzeile { display: flex; align-items: center; gap: var(--abstand-1); padding: var(--abstand-2) var(--abstand-1) 0; }
.galerie__unterzeile .galerie__name { padding: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Stapel: nicht angehakte KI-Bilder liegen hinter dem Original – oben schauen zwei weiße Karten mit weichem Schatten hervor,
   jede etwas schmaler; das Foto liegt mit sanftem Schatten obenauf (wie ein kleiner Stapel Fotos) */
.galerie__bild--stapel .galerie__oeffnen { position: relative; isolation: isolate; }
.galerie__bild--stapel .galerie__oeffnen::before, .galerie__bild--stapel .galerie__oeffnen::after {
  content: ""; position: absolute; z-index: -1; bottom: 50%; border-radius: var(--rundung-bild);
  background: var(--farbe-weiss); box-shadow: var(--schatten-karte), 0 0 0 1px var(--farbe-grau-hell);
}
.galerie__bild--stapel .galerie__oeffnen::before { top: calc(3px - var(--abstand-1)); left: var(--abstand-3); right: var(--abstand-3); }
.galerie__bild--stapel .galerie__oeffnen::after { top: calc(3px - var(--abstand-2)); left: var(--abstand-5); right: var(--abstand-5); z-index: -2; }
.galerie__bild--stapel .galerie__rahmen { box-shadow: var(--schatten-schwebend); }
/* „✦ 2 Versionen ›“: klappt den Stapel rechts daneben auf */
.galerie__versionen {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--abstand-1); padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--farbe-akzent); font-size: var(--text-etikett); font-weight: 600; white-space: nowrap;
}
.galerie__versionen:hover { color: var(--farbe-akzent-dunkel); }
.galerie__versionen:focus-visible { border-radius: var(--rundung-mini); }
.galerie__versionen-pfeil { display: inline-block; font-size: var(--text-normal); line-height: 1; transition: transform var(--dauer) var(--kurve); }
.galerie__versionen[aria-expanded="true"] .galerie__versionen-pfeil { transform: rotate(180deg); }
/* Aufgeklappte KI-Bilder: genau wie eine normale Karte (gleiche Bildgröße, Name und Haken an derselben Stelle),
   dahinter eine ruhige warmgraue Fläche, die etwas über die Karte hinausreicht – so sieht man den eigenen Bereich */
/* Original und aufgeklappte KI-Bilder bilden eine Gruppe: die Fläche beginnt hinter dem Original und läuft ohne Lücke
   bis hinter das letzte KI-Bild (je eine halbe Rasterlücke nach links und rechts, so treffen sich die Flächen genau). */
.galerie__version, .galerie__bild--offen { position: relative; isolation: isolate; }
.galerie__version { animation: einblenden var(--dauer) var(--kurve) both; }
.galerie__version::before, .galerie__bild--offen::before {
  content: ""; position: absolute; z-index: -1; background: var(--farbe-grau-hell);
  top: calc(-1 * var(--abstand-2)); bottom: calc(-1 * var(--abstand-2)); left: calc(-1 * var(--abstand-4) / 2); right: calc(-1 * var(--abstand-4) / 2);
}
.galerie__bild--offen::before { left: calc(-1 * var(--abstand-2)); border-radius: var(--rundung-gross) 0 0 var(--rundung-gross); }
.galerie__version--letzte::before { right: calc(-1 * var(--abstand-2)); border-radius: 0 var(--rundung-gross) var(--rundung-gross) 0; }
.galerie__version-bild { display: block; width: 100%; padding: 3px; border: 0; background: none; cursor: pointer; text-align: left; }   /* wie .galerie__oeffnen */
.galerie__version-bild:focus-visible { border-radius: var(--rundung-bild); }
.galerie__hinweis { margin: var(--abstand-1) 0 0 var(--abstand-1); padding: var(--etikett-innen-foto); }

/* Stern: „Als Titelbild festlegen“ – gefüllt = Titelbild */
.bildinfo { display: flex; flex-direction: column; gap: var(--abstand-2); }
.bildinfo .pille--achtung { align-self: flex-start; }
.bildinfo .button--text { padding: 0; }
.bildinfo__titel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--abstand-0); }

/* Wasserzeichen-Vorschau: nur auf dem Titelbild, unten rechts, halbtransparent */
.wasserzeichen { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--abstand-1) var(--abstand-2); pointer-events: none; }
.wasserzeichen span { color: var(--glas-hell); font-size: var(--text-mini); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; text-shadow: 0 1px 3px var(--farbe-schatten); }
.wasserzeichen--gross { padding: var(--abstand-4) var(--abstand-5); }
.wasserzeichen--gross span { font-size: var(--text-gross); }
/* Im Vergleich nur auf der rechten Seite – das Original links bleibt ohne */
.vergleich .wasserzeichen { clip-path: inset(0 0 0 var(--teilung, 50%)); }
.vergleich--einzeln .wasserzeichen { clip-path: none; }


/* ---------- 24. Reiter Bilder: Galerie-Kopf, Fortschritt ---------- */
.optimiert-zeile { display: flex; align-items: center; gap: var(--abstand-2); margin: 0; font-size: var(--text-klein); font-weight: 500; }
.optimiert-zeile svg { width: var(--symbol-text); height: var(--symbol-text); stroke: var(--farbe-akzent); stroke-width: 2.4; }
.optimiert-zeile__pruefen { color: var(--farbe-achtung); }

/* ---------- 25. Bild bearbeiten: großes Popup ---------- */
.overlay--editor { width: 90vw; max-width: 1600px; }
.bildeditor { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.bildeditor__buehne { position: relative; min-width: 0; container-type: size; display: grid; place-items: center; padding: var(--abstand-5); background: var(--farbe-hintergrund); }
/* Das Bild füllt den Platz im festen Format 4:3 */
.bildeditor__flaeche {
  position: relative; width: min(100cqw, 100cqh * var(--bildformat-quer) / var(--bildformat-hoch)); aspect-ratio: var(--bildformat);
}
.bildeditor__flaeche > .vergleich, .bildeditor__flaeche > .bildbuehne { position: absolute; inset: 0; aspect-ratio: auto; }
.bildeditor__seite { padding: var(--abstand-5); overflow-y: auto; border-left: 1px solid var(--farbe-grau-hell); }
.bildeditor__fuss { margin: auto 0 0; text-align: right; }   /* ganz unten rechts im Fenster */
/* Titelbild: kleine Zeile unten auf der Bühne „Das Titelbild bekommt ein Wasserzeichen · Zeigen · Ohne …“ – nur wenn Platz ist */
.bildeditor__wz { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; align-items: center; justify-content: center; gap: var(--abstand-3); font-size: var(--text-klein); white-space: nowrap; }
.bildeditor__wz[hidden] { display: none; }
.bildeditor__wz .button--text { min-height: 0; padding: 0; font-size: var(--text-klein); }
@container (max-height: 420px) or (max-width: 560px) { .bildeditor__wz { display: none; } }
.vergleich .vergleich__wasserzeichen { z-index: 1; }
.vergleich--wasserzeichen .vergleich__linie, .vergleich--wasserzeichen .vergleich__beschriftung { visibility: hidden; }
/* Kleiner Schalter, z. B. in der Wasserzeichen-Zeile */
.schalter--klein { gap: var(--abstand-2); font-weight: 400; }
.schalter--klein .schalter__bahn { width: 30px; height: 18px; }
.schalter--klein .schalter__bahn::after { width: 14px; height: 14px; }
.schalter--klein input:checked + .schalter__bahn::after { transform: translateX(12px); }
/* Werkzeug-Kacheln im Bearbeiten-Fenster: weiß, klar klickbar; gewählt = hell-türkis */
.werkzeugkacheln { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-3); }
.werkzeugkachel {
  min-height: var(--werkzeugkachel-hoehe); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-2);
  padding: var(--abstand-2); border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung); background: var(--farbe-weiss); box-shadow: var(--schatten-karte);
  color: var(--farbe-grau-dunkel); font-size: var(--text-normal); font-weight: 500; text-align: center; cursor: pointer;
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve), border-color var(--dauer-kurz), background var(--dauer-kurz), color var(--dauer-kurz);
}
.werkzeugkachel svg { width: 24px; height: 24px; stroke: currentColor; transition: stroke var(--dauer-kurz); }
.werkzeugkachel--ki svg { stroke: var(--farbe-akzent); }   /* KI behält ihr türkises Zeichen */
.werkzeugkachel:hover { transform: translateY(-2px); box-shadow: var(--schatten-schwebend); border-color: var(--farbe-akzent); }
.werkzeugkachel:hover svg { stroke: var(--farbe-akzent); }
.werkzeugkachel:active { transform: translateY(-1px); }
.werkzeugkachel:focus-visible { border-radius: var(--rundung); }
.werkzeugkachel[aria-pressed="true"] { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent); box-shadow: inset 0 0 0 0.5px var(--farbe-akzent); color: var(--farbe-akzent); }
.werkzeugkachel[aria-pressed="true"] svg { stroke: var(--farbe-akzent); }
.bildinfo__zusatz { font-size: var(--text-klein); color: var(--farbe-grau); }

/* Ausschnitt verschieben: Hand-Cursor, ruhiger Hinweis beim Überfahren, „Zurücksetzen“ nach dem Verschieben */
.vergleich--ziehbar { cursor: grab; }
.vergleich--ziehbar.vergleich--am-regler { cursor: ew-resize; }
.vergleich--zieht, .vergleich--zieht.vergleich--am-regler { cursor: grabbing; }
.verschieben { position: absolute; bottom: var(--abstand-4); left: 50%; transform: translateX(-50%); display: flex; gap: var(--abstand-2); z-index: 1; }
.verschieben__tipp { pointer-events: none; opacity: 0; transition: opacity var(--dauer); }
.vergleich--ziehbar:hover .verschieben__tipp { opacity: 1; }
.vergleich--zieht .verschieben__tipp { opacity: 0; }
.verschieben__zurueck { border: 0; cursor: pointer; color: var(--farbe-akzent); }
.verschieben__zurueck:hover { background: var(--glas-hell); }
.foto-warnungen { position: absolute; left: var(--abstand-4); top: calc(var(--abstand-4) + 36px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--abstand-1); pointer-events: none; }

/* Werkzeug-Bühne (Linien, Entfernen): ersetzt das große Bild */
.bildbuehne { position: relative; overflow: hidden; border-radius: var(--rundung-bild); background: var(--farbe-dunkel); user-select: none; -webkit-user-select: none; }
.bildbuehne > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform var(--dauer) var(--kurve); }
.bildbuehne__tipp { position: absolute; top: var(--abstand-4); left: 50%; transform: translateX(-50%); pointer-events: none; white-space: nowrap; }
/* Hilfsgitter */
.bildbuehne__gitter {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--glas-zart) 1px, transparent 1px), linear-gradient(to bottom, var(--glas-zart) 1px, transparent 1px);
  background-size: 12.5% 16.666%;
}
.bildbuehne__zeichnung { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.linie { stroke: var(--farbe-akzent); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 2px var(--farbe-schatten)); }
.linie--entwurf { stroke-dasharray: 6 6; }
.linie__griff { fill: var(--farbe-weiss); stroke: var(--farbe-akzent); stroke-width: 3; vector-effect: non-scaling-stroke; cursor: move; }
/* Regler mit Nullpunkt in der Mitte: türkis von der Mitte bis zum Wert */
.regler--mitte::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--farbe-grau-hell) var(--von, 50%), var(--farbe-akzent) var(--von, 50%), var(--farbe-akzent) var(--bis, 50%), var(--farbe-grau-hell) var(--bis, 50%));
}
/* Kleiner Symbolknopf neben einer Beschriftung (z. B. Stift „Selbst einstellen“); offen = türkis */
.symbolknopf--klein { width: 28px; height: 28px; }
.symbolknopf--klein svg { width: 15px; height: 15px; }
.symbolknopf[aria-expanded="true"], .symbolknopf[aria-pressed="true"] { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent-hell); }
.symbolknopf[aria-expanded="true"] svg, .symbolknopf[aria-pressed="true"] svg { stroke: var(--farbe-akzent); }
/* Vorher/Nachher ohne Split: ganzes Bild, Knopf in der Ecke schaltet zwischen Original und Ergebnis */
.vergleich--umschalten { cursor: default; }
.vergleich--umschalten .vergleich__linie, .vergleich--umschalten .vergleich__beschriftung { display: none; }
/* „Ausrichten“ und „Zuschneiden“: Foto per Transformation gedreht/entzerrt (leo.js), genau auf seine Fläche beschnitten –
   so reicht der Rahmen bis an jede Kante. Beim Zuschneiden außerhalb des Rahmens abgedunkelt; zu klein für das
   Bildformat: Rahmen orange */
.zuschnitt { position: absolute; inset: 0; overflow: hidden; background: var(--farbe-dunkel); touch-action: none; }
.zuschnitt__foto { position: absolute; overflow: hidden; }
.vergleich .zuschnitt__bild { inset: auto; left: 0; top: 0; width: auto; height: auto; max-width: none; object-fit: fill; transform-origin: 0 0; }
.zuschnitt__rahmen { position: absolute; border: 2px solid var(--farbe-weiss); box-shadow: 0 0 0 100vmax var(--zuschnitt-maske); cursor: move; }
.zuschnitt__rahmen--klein { border-color: var(--farbe-achtung); }
/* Gefundene Kanten türkis auf dem Foto: im Fenster bewegen sie sich beim „Gerade ausrichten“ mit, bis sie gerade stehen;
   in der Galerie erscheinen sie kurz, bevor das fertige Bild darüberwischt */
.kanten { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: visible; pointer-events: none; opacity: 0; transition: opacity var(--dauer) var(--kurve); filter: drop-shadow(0 0 1px var(--farbe-weiss)); }
.kanten--an { opacity: 1; }
.kanten line { stroke: var(--farbe-akzent); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.zuschnitt__ecke { position: absolute; width: var(--zuschnitt-ecke); height: var(--zuschnitt-ecke); border: 4px solid var(--farbe-weiss); }
.zuschnitt__rahmen--klein .zuschnitt__ecke { border-color: var(--farbe-achtung); }
.zuschnitt__ecke--lo { left: -5px; top: -5px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.zuschnitt__ecke--ro { right: -5px; top: -5px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.zuschnitt__ecke--lu { left: -5px; bottom: -5px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.zuschnitt__ecke--ru { right: -5px; bottom: -5px; border-left: 0; border-top: 0; cursor: nwse-resize; }
.vergleich__umschalter { position: absolute; right: var(--abstand-4); bottom: var(--abstand-4); border: 0; cursor: pointer; font-family: inherit; }
.feld--aus .regler, .feld--aus .regler__skala { opacity: var(--deaktiviert); }
/* Pinsel: türkise, halbtransparente Markierung, Kreis zeigt die Pinselgröße */
.bildbuehne__maske { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--farbe-akzent); opacity: 0.55; cursor: none; touch-action: none; transition: opacity var(--dauer); }
.bildbuehne__maske--laedt { opacity: 0.25; }
.bildbuehne__pinsel { position: absolute; border-radius: 50%; border: 2px solid var(--farbe-weiss); box-shadow: 0 0 0 1px var(--farbe-schatten); transform: translate(-50%, -50%); pointer-events: none; }
.hinweis--klein { padding: var(--abstand-2) var(--abstand-3); font-size: var(--text-etikett); align-items: flex-start; line-height: 1.45; }
.hinweis--klein svg { width: var(--symbol-text); height: var(--symbol-text); margin-top: 1px; }

/* Schalter (an/aus) */
.schalter { display: flex; align-items: center; gap: var(--abstand-3); font-weight: 500; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; pointer-events: none; }
.schalter__bahn { position: relative; flex-shrink: 0; width: 40px; height: 24px; border-radius: var(--rundung-pille); background: var(--farbe-grau-mittel); transition: background var(--dauer-kurz); }
.schalter__bahn::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--farbe-weiss); box-shadow: var(--schatten-griff); transition: transform var(--dauer-kurz) var(--kurve); }
.schalter input:checked + .schalter__bahn { background: var(--farbe-akzent); }
.schalter input:checked + .schalter__bahn::after { transform: translateX(16px); }
.schalter:has(input:disabled) { cursor: default; }
.schalter input:disabled + .schalter__bahn { opacity: var(--deaktiviert); }
.schalter input:focus-visible + .schalter__bahn { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }

/* ---------- 26. Stilbogen (Prüfseite für die Gestaltung) ---------- */
.stilbogen__abschnitt { display: flex; flex-direction: column; gap: var(--abstand-4); }
.stilbogen__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--abstand-3); }
.stilbogen__muster { display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-3); border-radius: var(--rundung); background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); }
.stilbogen__muster code, .stilbogen__zeile code { font-size: var(--text-etikett); color: var(--farbe-grau); }
.stilbogen__probe { display: block; height: 56px; border-radius: var(--rundung-klein); }
.stilbogen__probe--farbe { background: var(--muster); border: 1px solid var(--farbe-grau-hell); }
.stilbogen__probe--verlauf { background: var(--verlauf-ki); }
.stilbogen__probe--rundung { background: var(--farbe-akzent-hell); border-radius: var(--muster); }
.stilbogen__probe--abstand { height: var(--abstand-4); width: var(--muster); border-radius: 0; background: var(--farbe-akzent); }
.stilbogen__probe--schatten { background: var(--farbe-weiss); box-shadow: var(--muster); }
.stilbogen__regeln p { margin: 0 0 var(--abstand-2); }
.stilbogen__regeln p:last-child { margin-bottom: 0; }
.stilbogen__liste { display: flex; flex-direction: column; }
.stilbogen__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-5); padding: var(--abstand-4) 0; border-bottom: 1px solid var(--farbe-grau-hell); }
.stilbogen__zeile:first-child { padding-top: 0; }
.stilbogen__zeile:last-child { padding-bottom: 0; border-bottom: 0; }
.stilbogen__zeile > code { flex-shrink: 0; text-align: right; }
.stilbogen__knopf { display: flex; flex-direction: column; gap: var(--abstand-2); }
.stilbogen__knopf p { margin: 0; max-width: 560px; }
.zeile--start { justify-content: flex-start; }
.stilbogen-link { margin-top: var(--abstand-7); }
.stilbogen__ohne-abstand { margin: 0; }
.stilbogen__karte-klein { flex: 0 1 420px; cursor: default; }
.stilbogen__breit { flex: 0 1 460px; }
.stilbogen__fuellung { width: 42%; }
.stilbogen__foto { position: relative; width: 320px; border-radius: var(--rundung-bild); overflow: hidden; }
.stilbogen__foto img { width: 100%; aspect-ratio: var(--bildformat); object-fit: cover; }
.stilbogen__foto .galerie__haken { top: var(--abstand-2); right: var(--abstand-2); }
.stilbogen__fotos .fotobox-foto { width: 200px; }
.stilbogen__knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3) var(--abstand-5); }
.stilbogen__knopfpaar { display: flex; align-items: center; gap: var(--abstand-2); }
.stilbogen__abspielen { display: flex; flex-direction: column; align-items: flex-end; gap: var(--abstand-2); flex-shrink: 0; }
.stilbogen__reihe { display: flex; gap: var(--abstand-3); }
.stilbogen__foto--klein { width: 140px; }
.stilbogen__karten { width: 260px; }
.stilbogen__liste-muster { grid-template-columns: 1fr; }
.stilbogen__pdf { width: 320px; padding: var(--abstand-5); }
.stilbogen__mustertext { margin: 0; line-height: 1.6; }
.stilbogen__menu { width: 220px; position: static; }
.stilbogen__mini { flex: 0 1 460px; min-width: 0; }

/* ---------- 26. Fotobox (Fotos vom Handy) ---------- */
/* Zahl neuer Fotos an „Fotobox“ – in der Leiste links und unten am Handy */
.zahlpunkt {
  position: absolute; top: 0; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--rundung-pille);
  display: grid; place-items: center; background: var(--farbe-akzent); color: var(--farbe-weiss);
  font-size: var(--text-etikett); font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--farbe-hintergrund);
}
/* Aktionen oben rechts im Seitenkopf, senkrecht mittig zum Titel (wie die Buttons der Reiterzeile) */
.seitenkopf__aktionen { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; justify-content: flex-end; margin-top: calc((var(--titel-1) * 1.15 - var(--knopf-gross-hoehe)) / 2); }
/* Fotobox am PC: jeder Stapel eine weiße Karte; Knöpfe rechts genau auf einer Höhe */
.fotobox-stapel + .fotobox-stapel { margin-top: var(--abstand-4); }
.fotobox-stapel .abschnitt__kopf { align-items: flex-end; }
.fotobox-stapel .abschnitt__rechts { align-items: center; }
/* Fotos vom Rechner hineinziehen: die Karte (oder Fläche), in die sie fallen, leuchtet zart türkis */
[data-ablage], .fotobox-stapel { transition: background-color var(--dauer) var(--kurve), outline-color var(--dauer) var(--kurve); outline: 2px dashed transparent; outline-offset: 4px; border-radius: var(--rundung-gross); }
.ablage--ziel { background-color: var(--farbe-akzent-hell); outline-color: var(--farbe-akzent); }
.fotobox-stapel .seitenkopf__text { gap: var(--abstand-1); }
/* Ein Foto in der Fotobox: Klick wählt aus; ausgewählt = türkiser Haken und 2 px türkiser Rand – dieselbe Farbe wie
   „In LEO übernehmen“, weil die Auswahl dorthin geht (dunkle Haken bleiben für Propstack).
   Beim Darüberfahren oben links ein Papierkorb, der rot wird. */
.fotobox-foto { position: relative; cursor: pointer; padding: 3px; transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve); }
.fotobox-foto img { width: 100%; aspect-ratio: var(--bildformat); object-fit: cover; border-radius: var(--rundung-bild); }
.fotobox-foto--an img { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.fotobox-foto .galerie__haken--an { background: var(--farbe-akzent); border-color: var(--farbe-akzent); }
.fotobox-foto__loeschen {   /* genau wie der Haken-Kreis, nur links: gleiche Größe, gleicher Abstand, gleiches Glas */
  position: absolute; top: calc(3px + var(--abstand-2)); left: calc(3px + var(--abstand-2)); width: var(--haken); height: var(--haken); padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--glas-hell); background: var(--schleier-leicht);
  opacity: 0; transition: opacity var(--dauer-kurz), background var(--dauer-kurz), border-color var(--dauer-kurz);
}
.fotobox-foto__loeschen svg { width: 13px; height: 13px; stroke: var(--farbe-weiss); stroke-width: 2.25; }
.fotobox-foto:hover .fotobox-foto__loeschen, .fotobox-foto__loeschen:focus-visible { opacity: 1; }
.fotobox-foto__loeschen:hover { background: var(--farbe-achtung); border-color: var(--farbe-achtung); }
/* „Löschen“ oben, sobald Fotos ausgewählt sind */
.pille--loeschen { min-height: var(--knopf-hoehe); padding: 0 var(--abstand-4); border: 0; cursor: pointer; font: inherit; font-size: var(--text-klein); font-weight: 600;
  background: var(--farbe-achtung-hell); color: var(--farbe-achtung); transition: background var(--dauer-kurz), color var(--dauer-kurz); }
.pille--loeschen svg { width: var(--symbol-text); height: var(--symbol-text); stroke: currentColor; }
.pille--loeschen:hover { background: var(--farbe-achtung); color: var(--farbe-weiss); }
.pille--loeschen[hidden] { display: none; }
.fotobox-foto--weg { opacity: 0; transform: scale(0.96); }
/* Fotobox am PC: je Stapel genau zwei Reihen (4, 3 oder 2 Fotos je Reihe), „Mehr anzeigen“ klappt alle auf */
.fotobox-reihen:not(.fotobox-reihen--alle) > :nth-child(n+9) { display: none; }
@container (max-width: 900px) { .fotobox-reihen:not(.fotobox-reihen--alle) > :nth-child(n+7) { display: none; } }
@container (max-width: 640px) { .fotobox-reihen:not(.fotobox-reihen--alle) > :nth-child(n+5) { display: none; } }
.fotobox-mehr { margin-top: var(--abstand-2); }
.fotobox-stapel .abschnitt__rechts .button svg { width: var(--symbol-text); height: var(--symbol-text); }
/* Kopf einer Fotokarte: runde Symbolknöpfe für den ganzen Stapel, „Alle auswählen“ durch einen Strich getrennt */
.fotobox-stapel .abschnitt__rechts { gap: var(--abstand-2); }
.fotobox-stapel .abschnitt__rechts .symbolknopf svg { stroke: var(--farbe-akzent); }
.fotobox-alle { margin-left: var(--abstand-2); padding-left: var(--abstand-4); border-left: 1px solid var(--farbe-grau-hell); border-radius: 0; }
/* Name eines Symbolknopfs beim Darüberfahren (wie in der Navigation) */
[data-tipp] { position: relative; }
[data-tipp]::after {
  content: attr(data-tipp); position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); z-index: 5;
  padding: var(--abstand-1) var(--abstand-2); border-radius: var(--rundung-klein); white-space: nowrap; pointer-events: none;
  background: var(--glas-dunkel); color: var(--farbe-weiss); font-size: var(--text-etikett); font-weight: 500;
  opacity: 0; transition: opacity var(--dauer-kurz), transform var(--dauer-kurz);
}
[data-tipp]:hover::after, [data-tipp]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* Lösch-Frist: grau, ab 3 Tagen orange */
.frist { color: var(--farbe-grau); }
.frist--bald { color: var(--farbe-achtung); font-weight: 500; }
.fotobox-fuss { margin: var(--abstand-7) 0 0; }
.fotobox-leer svg { width: 40px; height: 40px; stroke: var(--farbe-grau-mittel); }
.fotobox-leer p { margin: 0; color: var(--farbe-grau); }
/* Meldung mit Link (z. B. „Zu den Bildern“) */
.toast--link { pointer-events: auto; }
.toast__link { color: var(--farbe-akzent-hell); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Blatt: ein Fenster in der Mitte, das aufpoppt – am PC wie am Handy */
.blatt {
  border: 0; width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 64px); padding: var(--abstand-5);
  border-radius: var(--rundung-gross); background: var(--farbe-weiss); color: var(--farbe-dunkel); box-shadow: var(--schatten-fenster);
}
.blatt[open] { display: flex; flex-direction: column; gap: var(--abstand-4); animation: blatt-auf 220ms var(--kurve) both; }
.blatt::backdrop { background: var(--schleier-leicht); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.blatt__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); }
.blatt__liste { display: flex; flex-direction: column; gap: var(--abstand-2); min-height: 0; overflow-y: auto; }
.blatt__liste .label { margin-top: var(--abstand-2); }
.blatt__liste .objektwahl { max-height: none; overflow: visible; }
.blatt__breit { width: 100%; }
/* Große Zeile im Blatt: „Foto aufnehmen“, „Aus Fotos wählen“ */
.blatt__zeile {
  display: flex; align-items: center; gap: var(--abstand-4); width: 100%; min-height: 64px; padding: 0 var(--abstand-4); cursor: pointer;
  border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung); background: var(--farbe-weiss);
  font-size: var(--text-normal); font-weight: 600; text-align: left; transition: border-color var(--dauer-kurz);
}
.blatt__zeile:hover { border-color: var(--farbe-grau-mittel); }
.blatt__zeile svg { width: 24px; height: 24px; stroke: var(--farbe-akzent); flex-shrink: 0; }

/* Hochladen am Handy: Fortschritt oben, darunter jedes Foto mit Zustand */
.hochladen { display: flex; flex-direction: column; gap: var(--abstand-4); padding: var(--abstand-4); }
.hochladen__raster { display: flex; flex-direction: column; gap: var(--abstand-2); }
.hochladen__foto { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--abstand-3); row-gap: var(--abstand-1); align-items: center; }
.hochladen__foto img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--rundung-klein); transition: opacity var(--dauer); }
.hochladen__foto--wartet img { opacity: 0.45; }
.hochladen__status { grid-column: 2; display: flex; align-items: center; gap: var(--abstand-1); font-size: var(--text-normal); color: var(--farbe-grau); }
.hochladen__foto--laedt .hochladen__status { color: var(--farbe-dunkel); }
.hochladen__status svg { width: var(--symbol-text); height: var(--symbol-text); stroke: var(--farbe-grau); stroke-width: 2.2; flex-shrink: 0; }
.hochladen__balken { grid-column: 2; height: 3px; border-radius: var(--rundung-pille); background: var(--farbe-grau-hell); overflow: hidden; }
.hochladen__balken span { display: block; height: 100%; background: var(--farbe-akzent); transition: width var(--dauer-kurz) linear; }

/* Fotobox am Handy: Stapel nach Datum */
.stapel { display: flex; flex-direction: column; gap: var(--abstand-3); padding: var(--abstand-4); margin-bottom: var(--abstand-4); }
.stapel__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abstand-3); }
.stapel__kopf .titel-4 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stapel__kopf .text-grau { flex-shrink: 0; }
.stapel__hinweis { margin: 0; font-size: var(--text-klein); color: var(--farbe-grau); }
.stapel__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-1); }
.stapel .fotobox-foto { padding: 0; cursor: default; }
.stapel .fotobox-foto img { aspect-ratio: 1; border-radius: var(--rundung-klein); }
.stapel__aktionen { display: flex; align-items: center; gap: var(--abstand-2); }
.stapel__aktionen > .button { flex: 1; }
.stapel__aktionen > .button[aria-label] { flex: 0 0 auto; }
.stapel__aktionen form { margin-left: auto; }

/* Profil */
.profil { max-width: 640px; }
.profil__kopf { display: flex; align-items: center; gap: var(--abstand-4); margin-bottom: var(--abstand-6); }
.avatar--gross { width: 72px; height: 72px; }
.profil__home { display: flex; flex-direction: column; gap: var(--abstand-3); }
.schrittliste { margin: 0; padding-left: var(--abstand-5); line-height: 1.7; }
.profil__abmelden { margin-top: var(--abstand-5); }

/* Fotobox am Handy, leer: „So geht's“ – Schritte nebeneinander, auf schmalen Handys rutschen sie in die nächste Zeile */
.sogehts { list-style: none; margin: 0; padding: var(--abstand-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--abstand-4) var(--abstand-3); }
.sogehts li { display: flex; flex-direction: column; align-items: center; gap: var(--abstand-2); text-align: center; font-size: var(--text-klein); line-height: 1.4; }
.sogehts li > span {
  flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--farbe-akzent-hell); color: var(--farbe-akzent); font-size: var(--text-etikett); font-weight: 700;
}
/* Ganz unten in der Fotobox am Handy: dieses Handy, angemeldet bis, „Abmelden“ – klein und grau */
.handyfuss { margin: var(--abstand-6) 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--abstand-2); font-size: var(--text-klein); color: var(--farbe-grau); }
.handyfuss .button--text { padding: 0; color: var(--farbe-achtung); font-size: inherit; }
.profil__handys { display: flex; flex-direction: column; gap: var(--abstand-4); margin-bottom: var(--abstand-5); }
.profil__handys > form { align-self: flex-start; }
/* Letzte Handy-Ereignisse aus dem Protokoll: klein und grau unter der Liste */
.handyverlauf { display: flex; flex-direction: column; gap: var(--abstand-2); }
.handyverlauf h3 { margin: 0; }
.handyverlauf ul { display: flex; flex-direction: column; gap: var(--abstand-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-klein); color: var(--farbe-grau); font-variant-numeric: tabular-nums; }
/* PIN zum Handy verbinden: groß zum Abtippen */
.pinanzeige { display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-4); border-radius: var(--rundung); background: var(--farbe-akzent-hell); }
.pinanzeige__zahl { font-family: var(--schrift-display); font-size: var(--titel-1); font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--farbe-akzent); }
.eingabe--pin { font-size: var(--text-gross); letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }

/* Nur am Handy sichtbar */
.handyleiste, .handyhinweis, .nur-handy { display: none; }

/* Handy-Leiste unten: Fotobox · + · Profil als schwebende weiße Pille über dem Home-Balken, nur Symbole (Namen für Vorleser).
   Alles sitzt auf einer Mittellinie: aktive Pille und Plus gleich hoch, ringsum 8 px Abstand zum Rand der Leiste.
   Tiefe wie bei Apple (weicher Schatten, Lichtkante oben), damit die Leiste auf hellem Grund klar zu sehen ist.
   (Nur am Handy sichtbar; im Stilbogen als Muster.) */
.handyleiste {
  position: fixed; left: var(--handyleiste-abstand); right: var(--handyleiste-abstand); z-index: 40;
  bottom: calc(var(--handyleiste-abstand) + env(safe-area-inset-bottom));
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--abstand-2);
  height: var(--handyleiste-hoehe); padding: 0 calc((var(--handyleiste-hoehe) - var(--handyleiste-innen)) / 2);
  border-radius: var(--rundung-pille); border: 0.5px solid rgba(20, 24, 31, 0.08);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-leiste);
}
.handyleiste__link {
  position: relative; justify-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--handyleiste-innen); border: 0; border-radius: var(--rundung-pille); background: none; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--farbe-grau-dunkel);
  transition: background var(--dauer-kurz), color var(--dauer-kurz), transform var(--dauer-kurz) var(--kurve);
}
.handyleiste__link svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.8; }
.handyleiste__link[aria-current="page"] { background: var(--farbe-akzent-hell); color: var(--farbe-akzent); }
.handyleiste__link:active { transform: scale(0.95); }
.handyleiste__link .zahlpunkt { top: calc(50% - 26px); right: calc(50% - 28px); box-shadow: 0 0 0 2px var(--farbe-weiss); }
.handyleiste__plus {
  width: var(--handyleiste-plus); height: var(--handyleiste-plus); border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--farbe-akzent) 82%, white), var(--farbe-akzent));
  box-shadow: var(--schatten-plus);
  transition: transform var(--dauer-kurz) var(--kurve), filter var(--dauer-kurz);
}
.handyleiste__plus:active { transform: scale(0.93); filter: brightness(0.92); }
.handyleiste__plus svg { width: 34px; height: 34px; stroke: var(--farbe-weiss); stroke-width: 2.4; }

/* Andere Seiten: ruhiger Hinweis oben, die Seite darunter bleibt wie am PC */
.handyhinweis { flex-direction: column; align-items: flex-start; gap: var(--abstand-3); padding: var(--abstand-4); margin-bottom: var(--abstand-5); border-radius: var(--rundung); background: var(--farbe-akzent-hell); }
.handyhinweis p { margin: 0; }

.handyleiste--muster { display: grid; position: relative; left: auto; right: auto; bottom: auto; width: 390px; max-width: 100%; }
.handyhinweis--muster { display: flex; max-width: 390px; margin: 0; }

/* Handy-Vorschau am Mac (?handy=1): die App in einem 390 px breiten Rahmen */
.handyrahmen__seite { margin: 0; background: var(--farbe-grau-hell); }
.handyrahmen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-3); padding: var(--abstand-5); }
.handyrahmen__geraet { width: 390px; height: min(844px, calc(100dvh - 80px)); border: 10px solid var(--farbe-dunkel); border-radius: 52px; background: var(--farbe-weiss); box-shadow: var(--schatten-fenster); }

/* ---------- 27. Handy (unter 768 px): nur Fotos hochladen, Fotobox und Profil ----------
   Touch-Flächen mindestens 44 px, Schrift mindestens 15 px (Etiketten 12 px), 16 px Rand. */
@media (max-width: 767px) {
  html { overflow-x: hidden; }
  .app { display: block; height: auto; min-height: 100dvh; padding: 0; }
  .navigation, .kopfzeile { display: none; }
  .arbeitsflaeche {
    overflow: visible; overflow-x: clip; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none;
    padding-bottom: calc(var(--handyleiste-hoehe) + var(--handyleiste-abstand) + env(safe-area-inset-bottom) + var(--abstand-5));
  }
  .inhalt { padding: var(--abstand-5) var(--abstand-4); }
  .seitenkopf { margin-bottom: var(--abstand-5); }
  .seitenkopf__aktionen, .fotobox-stapel { display: none; }
  .nur-handy { display: block; }
  .nicht-handy { display: none !important; }   /* z. B. Grundriss: gibt es nur am Computer */
  .text-klein, .seitenkopf__unterzeile { font-size: var(--text-normal); }
  .button--text { min-height: 44px; }


  .handyleiste { display: grid; }
  .handyhinweis { display: flex; }

  /* Ruhig wie eine App: kein Zoomen (auch nicht beim Tippen in ein Feld – erst ab 16 px zoomt iOS nicht),
     kein Doppeltipp-Zoom, kein Nachfedern der Seite, keine graue Tipp-Markierung */
  html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
  body { touch-action: manipulation; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
  input, select, textarea, .kopfsuche input { font-size: 16px; }
  .handyleiste, .blatt__zeile, .button, .handyleiste__plus, .objektwahl__eintrag { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

  /* Blatt: Popup in der Mitte, ringsum 16 px Rand – passt auf jede Handygröße */
  .blatt { width: calc(100% - 32px); max-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: var(--abstand-4); }
  .blatt .kopfsuche input { height: 48px; }
  .toast { bottom: calc(var(--handyleiste-hoehe) + var(--handyleiste-abstand) + env(safe-area-inset-bottom) + var(--abstand-4)); }
}
@keyframes blatt-auf { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 28. Admin ---------- */
/* Leiste links: „Admin“ unten über dem Avatar */
.navigation__admin { margin-top: auto; }
.navigation__admin + .navigation__fuss { margin-top: var(--abstand-2); }
/* Schmales Menü links im Inhalt, Inhalt rechts */
.admin { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--abstand-6); align-items: start; }
.admin__menu { position: sticky; top: 112px; display: flex; flex-direction: column; gap: var(--abstand-0); }
.admin__menu a {
  display: flex; align-items: center; min-height: var(--knopf-hoehe); padding: 0 var(--abstand-4); border-radius: var(--rundung);
  font-size: var(--text-normal); font-weight: 500; color: var(--farbe-grau-dunkel); transition: background var(--dauer-kurz), color var(--dauer-kurz);
}
.admin__menu a:hover { background: var(--farbe-grau-hell); color: var(--farbe-dunkel); }
.admin__menu a[aria-current="page"] { background: var(--farbe-akzent-hell); color: var(--farbe-akzent); font-weight: 600; }
.admin__inhalt, .admin__stapel { min-width: 0; display: flex; flex-direction: column; gap: var(--abstand-5); }
.admin__inhalt > .seitenkopf { margin-bottom: 0; }
.admin__inhalt .abschnitt--eng { margin-top: var(--abstand-3); }
/* Schmale Fenster: Menü als Reihe von Pillen über dem Inhalt */
@container (max-width: 900px) {
  .admin { grid-template-columns: minmax(0, 1fr); gap: var(--abstand-5); }
  .admin__menu { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--abstand-2); }
  .admin__menu a { min-height: var(--auswahl-hoehe); border-radius: var(--rundung-pille); background: var(--farbe-grau-hell); font-size: var(--text-klein); color: var(--farbe-grau); }
}
.zurueck-knopf { align-self: flex-start; padding: 0; }
.notiz { display: flex; align-items: center; gap: var(--abstand-2); margin: 0; font-size: var(--text-klein); color: var(--farbe-grau); }
.notiz svg { width: var(--symbol-text); height: var(--symbol-text); stroke: currentColor; flex-shrink: 0; }

/* Avatar mit Initialen (ohne Foto): grau, 40 px in Zeilen, 32 px in Avatar-Reihen */
.avatar--initialen { background: var(--farbe-grau-hell); color: var(--farbe-grau-dunkel); font-size: var(--text-klein); font-weight: 600; }
.avatar--klein { width: 32px; height: 32px; font-size: var(--text-etikett); }
.avatar--initialen.avatar--gross { font-size: var(--titel-3); }
/* Avatar-Reihe zum Zuteilen: gewählt = heller türkiser Ring, nicht gewählt = ausgegraut */
.avatarreihe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.avatarknopf { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; transition: opacity var(--dauer-kurz), box-shadow var(--dauer-kurz); }
.avatarknopf[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--farbe-weiss), 0 0 0 4px var(--farbe-akzent-hell); }
.avatarknopf[aria-pressed="false"] { opacity: var(--deaktiviert); }
.avatarknopf:hover { opacity: 1; }
/* Kleiner türkiser Punkt: eigene Einstellung */
.avatarknopf--punkt::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--farbe-akzent); box-shadow: 0 0 0 2px var(--farbe-weiss); }

/* Kennzahlen oben */
.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand-4); }
.kennzahlen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kennzahl { display: flex; flex-direction: column; gap: var(--abstand-1); }
.kennzahl__name { font-size: var(--text-klein); color: var(--farbe-grau); }
.kennzahl__wert { font-family: var(--schrift-display); font-size: var(--titel-2); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@container (max-width: 1100px) { .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kennzahlen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 700px) { .kennzahlen, .kennzahlen--drei { grid-template-columns: minmax(0, 1fr); } }
.zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-4); }
.zweispaltig--eng { gap: var(--abstand-3); }
@container (max-width: 900px) { .zweispaltig { grid-template-columns: minmax(0, 1fr); } }
.karte__titel { margin-bottom: var(--abstand-3); }
.karte > p:last-child { margin-bottom: 0; }

/* Zeilen in einer Karte */
.zeilenliste { list-style: none; margin: 0; padding: 0; }
.listenzeile { display: flex; align-items: center; gap: var(--abstand-3); padding: var(--abstand-3) 0; border-bottom: 1px solid var(--farbe-grau-hell); }
.zeilenliste > li:last-child .listenzeile, .zeilenliste > .listenzeile:last-child { border-bottom: 0; }
.zeilenliste > li:first-child .listenzeile, .zeilenliste > .listenzeile:first-child { padding-top: 0; }
.listenzeile__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--abstand-0); }
/* Schreibprofil: Texte eines Propstack-Objekts zum Anhaken, Text zum Aufklappen */
.profilwahl { padding-bottom: var(--abstand-4); border-bottom: 1px solid var(--farbe-grau-hell); }
.profilwahl__text { display: flex; flex-direction: column; gap: var(--abstand-1); padding: var(--abstand-3) 0; border-bottom: 1px solid var(--farbe-grau-hell); }
.profilwahl__text:last-child { border-bottom: 0; }
.profilwahl__klappe summary { cursor: pointer; }
.profilwahl__voll { margin: var(--abstand-2) 0 0; font-size: var(--text-klein); white-space: normal; }
.profilwahl__liste { max-height: 480px; }
.profilwahl__liste .objektwahl__eintrag { color: inherit; text-decoration: none; }
.profilwahl__eintrag-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.profilwahl__ohne-bild { width: 64px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--rundung-klein); background: var(--farbe-grau-hell); }
.profilwahl__ohne-bild svg { width: var(--symbol); height: var(--symbol); stroke: var(--farbe-grau); }
.listenzeile__zahl { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; font-variant-numeric: tabular-nums; }
.listenzeile > svg { width: 16px; height: 16px; stroke: var(--farbe-grau); flex-shrink: 0; }
.listenzeile--klick { margin: 0 calc(-1 * var(--abstand-3)); padding-left: var(--abstand-3); padding-right: var(--abstand-3); border-radius: var(--rundung); color: inherit; transition: background var(--dauer-kurz); }
.listenzeile--klick:hover { background: var(--farbe-hintergrund); }
.zeilenliste > li:first-child .listenzeile--klick { padding-top: var(--abstand-3); }
.listenzeile--hoch { flex-wrap: wrap; align-items: center; }
.punkt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--farbe-grau-mittel); }
.punkt--achtung { background: var(--farbe-achtung); }
.button--inline { min-height: 0; padding: 0; font-size: inherit; }

/* Funktionen: je Karte Schalter und „Wer darf das?“ */
.kartenliste { display: flex; flex-direction: column; gap: var(--abstand-3); }
.funktionskarte { display: flex; flex-direction: column; gap: var(--abstand-4); }
.funktionskarte__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--abstand-4); }
.funktionskarte__kopf .seitenkopf__text { gap: var(--abstand-0); }
.funktionskarte__wer, .gilt-fuer { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; }
.funktionskarte--aus .funktionskarte__wer { opacity: var(--deaktiviert); }
.einstellung { display: flex; flex-direction: column; gap: var(--abstand-4); }
.einstellung p { margin: 0; }
.einstellung--oben { align-self: start; }
.ablage--klein { min-height: 120px; padding: var(--abstand-4); gap: var(--abstand-2); border-radius: var(--rundung); }
.ablage--klein svg { width: 24px; height: 24px; }
.ablage--klein .ablage__titel { font-size: var(--text-normal); }
/* Wasserzeichen-Vorschau auf einem Beispielfoto (Maske = dunkles Band unten) */
.wz-vorschau { position: relative; border-radius: var(--rundung-bild); overflow: hidden; }
.wz-vorschau img { display: block; width: 100%; aspect-ratio: var(--bildformat); object-fit: cover; }
.wz-vorschau__maske { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(to top, var(--schleier), transparent); pointer-events: none; }
.wz-vorschau--links .wasserzeichen { left: var(--abstand-4); right: auto; }
.wz-vorschau--mitte .wasserzeichen { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%); }
.wz-vorschau--klein .wasserzeichen span { font-size: var(--text-mini); }
.wz-vorschau--gross .wasserzeichen span { font-size: var(--text-gross); }

/* KI-Anweisungen */
.kartenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--abstand-4); }
.kikarte { display: flex; flex-direction: column; gap: var(--abstand-2); color: inherit; transition: border-color var(--dauer-kurz); }
.kikarte:hover { border-color: var(--farbe-akzent); }
.kiformular { display: flex; flex-direction: column; gap: var(--abstand-4); }
.kiformular p { margin: 0; }
.feld { display: flex; flex-direction: column; gap: var(--abstand-2); min-width: 0; }
.feld .auswahl { width: 100%; }
.eingabe--mehrzeilig { min-height: 160px; padding: var(--abstand-3) var(--abstand-4); border-radius: var(--rundung); line-height: 1.6; resize: vertical; }
/* Vergleich bisher / neu */
.vergleich-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-4); }
.vergleich-zwei figure { margin: 0; display: flex; flex-direction: column; gap: var(--abstand-2); }
.vergleich-zwei__bild { position: relative; border-radius: var(--rundung-bild); overflow: hidden; }
.vergleich-zwei__bild img { display: block; width: 100%; aspect-ratio: var(--bildformat); object-fit: cover; }
.vergleich-zwei__text { margin: 0; padding: var(--abstand-4); border-radius: var(--rundung); background: var(--farbe-hintergrund); line-height: 1.6; }
.vergleich-zwei__text--absaetze { white-space: pre-wrap; }
/* Änderung sichtbar machen (z. B. Schreibprofil): hinzugekommen türkis hinterlegt, weggefallen grau durchgestrichen */
.text-neu { text-decoration: none; background: var(--farbe-akzent-hell); color: var(--farbe-akzent); border-radius: var(--rundung-mini); }
.text-weg { color: var(--farbe-grau); }
@container (max-width: 700px) { .vergleich-zwei { grid-template-columns: minmax(0, 1fr); } }

/* Ausgaben: Filter, Säulen, Anteile, Tabelle */
.filterzeile { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; }
.filterzeile__rechts { display: flex; gap: var(--abstand-2); flex-wrap: wrap; margin-left: auto; }
.zeitraum { display: flex; align-items: center; gap: var(--abstand-2); }
.zeitraum__titel { min-width: 120px; text-align: center; font-weight: 600; }
.symbolknopf:disabled { opacity: var(--deaktiviert); cursor: not-allowed; }
.diagramm { display: flex; flex-direction: column; gap: var(--abstand-3); }
.saeulen { display: flex; align-items: flex-end; gap: 3px; height: 200px; padding-top: var(--abstand-5); border-bottom: 1px solid var(--farbe-grau-hell); }
.saeule { position: relative; flex: 1; min-width: 0; border-radius: var(--rundung-mini) var(--rundung-mini) 0 0; background: var(--farbe-akzent); opacity: 0.45; transition: opacity var(--dauer-kurz); }
.saeule--aktuell { opacity: 1; background: var(--farbe-akzent-dunkel); }
.saeule:hover, .saeule:focus-visible { opacity: 1; outline: none; }
/* Wert beim Darüberfahren */
.saeule::after {
  content: attr(data-wert); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: var(--abstand-1) var(--abstand-2); border-radius: var(--rundung-klein); background: var(--glas-dunkel); color: var(--farbe-weiss);
  font-size: var(--text-etikett); font-weight: 500; opacity: 0; transition: opacity var(--dauer-kurz);
}
.saeule:hover::after, .saeule:focus-visible::after { opacity: 1; }
.saeulen__achse { display: flex; gap: 3px; }
.saeulen__achse span { flex: 1; min-width: 0; text-align: center; font-size: var(--text-etikett); color: var(--farbe-grau); overflow: visible; white-space: nowrap; }
.anteil { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) auto 44px; align-items: center; gap: var(--abstand-3); padding: var(--abstand-2) 0; font-size: var(--text-klein); }
.anteil__spur { height: 8px; border-radius: var(--rundung-pille); background: var(--farbe-grau-hell); overflow: hidden; }
.anteil__spur span { display: block; height: 100%; border-radius: inherit; background: var(--farbe-akzent); }
.anteil__wert { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.anteil__prozent { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle__rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--text-normal); }
.tabelle th { text-align: left; padding: 0 var(--abstand-3) var(--abstand-2) 0; border-bottom: 1px solid var(--farbe-grau-hell); font-size: var(--text-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--farbe-grau); }
.tabelle th button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.tabelle th button:hover { color: var(--farbe-dunkel); }
.tabelle td { padding: var(--abstand-3) var(--abstand-3) var(--abstand-3) 0; border-bottom: 1px solid var(--farbe-grau-hell); font-variant-numeric: tabular-nums; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .rechts { text-align: right; }
.tabelle th.rechts button { margin-left: auto; display: block; }

/* Speicher: geteilter Balken (Türkis-Stufen und Grau) */
.balken-geteilt { display: flex; gap: var(--abstand-0); height: 12px; border-radius: var(--rundung-pille); background: var(--farbe-grau-hell); overflow: hidden; }
.balken-geteilt__teil { min-width: 2px; }    /* auch ein kleiner Anteil bleibt sichtbar */
.balken-geteilt__teil--1 { background: var(--farbe-akzent-dunkel); }
.balken-geteilt__teil--2 { background: var(--farbe-akzent); }
.balken-geteilt__teil--3 { background: var(--farbe-grau-mittel); }
.balken-geteilt__teil--4 { background: var(--farbe-grau); }
.balken-geteilt__teil--5 { background: var(--farbe-dunkel); }
.legende { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-5); margin-top: var(--abstand-3); font-size: var(--text-klein); }
.legende > span { display: flex; align-items: center; gap: var(--abstand-2); }
.legende__farbe { width: 10px; height: 10px; border-radius: 3px; }
.legende__farbe--frei { background: var(--farbe-grau-hell); }
.formzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4); flex-wrap: wrap; padding: var(--abstand-3) 0; border-bottom: 1px solid var(--farbe-grau-hell); }
.formzeile:first-child { padding-top: 0; }
.formzeile__knoepfe { padding-top: var(--abstand-4); }
.zahlfeld { display: flex; align-items: center; gap: var(--abstand-2); }
.zahlfeld .eingabe { width: 88px; text-align: right; }
/* Makler-Seite */
.maklerkopf { align-items: center; }
.maklerkopf__person { display: flex; align-items: center; gap: var(--abstand-4); }
.maklerkopf .seitenkopf__aktionen { margin-top: 0; }
.nutzung { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--abstand-4); margin: 0; }
.nutzung div { display: flex; flex-direction: column; gap: var(--abstand-0); }
.nutzung dt { font-size: var(--text-klein); color: var(--farbe-grau); }
.nutzung dd { margin: 0; font-family: var(--schrift-display); font-size: var(--titel-4); font-weight: 600; }
/* Vom Admin gesperrte Funktion im Bild-Fenster */
.chip--gesperrt { opacity: var(--deaktiviert); }
.nicht-verfuegbar { display: flex; align-items: center; gap: var(--abstand-2); margin: 0; font-size: var(--text-klein); color: var(--farbe-grau); }
.nicht-verfuegbar svg { width: var(--symbol-text); height: var(--symbol-text); stroke: currentColor; }
button.toast__link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* ---------- 29. Ladezustände (ohne Text, nur Bewegung) ----------
   Erscheinen erst nach --lade-schwelle und bleiben mindestens --lade-mindestens (steuert lade() im Skript).
   Bildschirmleser hören „Wird verarbeitet“ (.nur-vorlesen), der Bereich trägt aria-busy. */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 1. KI-Bildbearbeitung: Foto leicht abgedunkelt, Ränder weich, Lichtstreifen, türkises Leuchten am Rand */
.ki-laden {
  position: absolute; inset: 0; z-index: 4; border-radius: var(--rundung-bild); overflow: hidden; cursor: progress;
  background: var(--lade-schleier);
  animation: lade-ein var(--lade-ueberblenden) var(--lade-kurve) both, lade-glimmen var(--lade-puls-dauer) var(--lade-kurve) infinite;
  transition: opacity var(--lade-ueberblenden) var(--lade-kurve);
}
.ki-laden::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  backdrop-filter: blur(var(--lade-unschaerfe)); -webkit-backdrop-filter: blur(var(--lade-unschaerfe));
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 55%, #000 100%); mask-image: radial-gradient(ellipse at center, transparent 55%, #000 100%);
}
.ki-laden::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -50%; width: 100%;
  background: linear-gradient(110deg, transparent 30%, var(--lade-glanz) 50%, transparent 70%);
  animation: lade-glanz var(--lade-glanz-dauer) var(--lade-kurve) infinite;
}
.ki-laden--weg { opacity: 0; }
@keyframes lade-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes lade-glanz { from { transform: translateX(-60%); } to { transform: translateX(160%); } }
@keyframes lade-glimmen {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--lade-glimmen-weich), inset 0 0 12px var(--lade-glimmen-weich); }
  50% { box-shadow: inset 0 0 0 2px var(--lade-glimmen), inset 0 0 28px var(--lade-glimmen-weich); }
}
/* Das neue Bild blendet kurz über */
.lade-neu { animation: lade-ein var(--lade-ueberblenden) var(--lade-kurve) both; }
.lade-text-neu { animation: lade-ein var(--lade-text-einblenden) var(--lade-kurve) both; }

/* 3. Button arbeitet: kleiner Kreis statt Symbol, gleiche Größe, gesperrt, Beschriftung bleibt */
.button--laedt, .button--fortschritt, .button--fertig { position: relative; overflow: hidden; isolation: isolate; }
.button--laedt { cursor: progress; }
.button--laedt:disabled { opacity: 1; }
.button--laedt > svg { display: none; }
.button--laedt::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: lade-drehen var(--lade-dreh-dauer) linear infinite; }
.button--sekundaer.button--laedt::before, .button--text.button--laedt::before { color: var(--farbe-akzent); border-color: var(--farbe-akzent-hell); border-top-color: var(--farbe-akzent); }
/* Dauer unbekannt (KI): ein weiches Lichtband wandert durch den Button */
.button--laedt:not(.button--fortschritt)::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 60%; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--lade-glanz), transparent);
  animation: knopf-lichtband var(--lade-glanz-dauer) var(--lade-kurve) infinite;
}
.button--sekundaer.button--laedt:not(.button--fortschritt)::after, .button--text.button--laedt:not(.button--fortschritt)::after { background: linear-gradient(90deg, transparent, var(--farbe-akzent-hell), transparent); }
@keyframes knopf-lichtband { to { left: 100%; } }

/* Button mit Fortschritt: der Button selbst ist der Balken. Füllung von links nach rechts (--fortschritt 0–100 %),
   in einem Ton der Button-Farbe. Größe, Form, Symbol-Platz und Beschriftung bleiben. Am Ende kurz ein Haken. */
.button--fortschritt { --fuellung: var(--knopf-fuellung-tuerkis); }
.button--uebertragen.button--fortschritt { --fuellung: var(--knopf-fuellung-dunkel); }
.button--sekundaer.button--fortschritt, .button--text.button--fortschritt { --fuellung: var(--knopf-fuellung-hell); }
.button--fortschritt::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; pointer-events: none;
  width: calc(var(--fortschritt, 0%) + var(--knopf-fuellung-kante));
  background: linear-gradient(90deg, var(--fuellung) calc(100% - var(--knopf-fuellung-kante)), transparent);
  transition: width var(--knopf-fortschritt-dauer) ease-out, opacity var(--dauer) var(--lade-kurve);
}
.button--fortschritt-aus::after { opacity: 0; }
.button--fortschritt:disabled { opacity: 1; cursor: progress; }
/* Fertig: Haken statt Symbol */
.button--fertig > svg { display: none; }
.button--fertig::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: lade-ein var(--dauer) var(--lade-kurve) both;
}
.button--sekundaer.button--fertig::before, .button--text.button--fertig::before { background: var(--farbe-akzent); }
.button--fertig:disabled { opacity: 1; }
@keyframes lade-drehen { to { transform: rotate(360deg); } }

/* 4./5. Platzhalter mit Schimmer: Textzeilen, Zeilen, Karten – so groß wie der fertige Inhalt */
.platzhalter { display: flex; flex-direction: column; gap: var(--abstand-3); padding: var(--abstand-1) 0; }
.platzhalter__zeile, .platzhalter__block { position: relative; overflow: hidden; background: var(--lade-platzhalter); }
.platzhalter__zeile { height: 12px; border-radius: var(--rundung-pille); }
.platzhalter__zeile:nth-child(5n + 1) { width: 100%; }
.platzhalter__zeile:nth-child(5n + 2) { width: 92%; }
.platzhalter__zeile:nth-child(5n + 3) { width: 97%; }
.platzhalter__zeile:nth-child(5n + 4) { width: 74%; }
.platzhalter__zeile:nth-child(5n + 5) { width: 58%; }
.platzhalter__block { border-radius: var(--rundung); }
.platzhalter__zeile::after, .platzhalter__block::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--lade-schimmer), transparent);
  animation: lade-schimmer var(--lade-schimmer-dauer) var(--lade-kurve) infinite;
}
@keyframes lade-schimmer { to { transform: translateX(100%); } }
/* Platzhalter-Karte in Größe einer Objektkachel */
.platzhalter-karte { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--rundung-gross); background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); }
.platzhalter-karte .platzhalter__block { aspect-ratio: 3 / 2; border-radius: 0; }
.platzhalter-karte .platzhalter { padding: var(--abstand-4); }
.ausgaben-platzhalter__diagramm { height: 230px; }
.fotobox-platzhalter { display: flex; flex-direction: column; gap: var(--abstand-4); margin-top: var(--abstand-6); }
.fotobox-platzhalter > .platzhalter { max-width: 320px; }
.fotobox-platzhalter__foto { aspect-ratio: var(--bildformat); border-radius: var(--rundung-bild); }
.galerie__bild[aria-busy="true"] { pointer-events: none; }
/* Während die KI am Foto arbeitet, ruhen die Bedienelemente daneben */
.bildeditor[aria-busy="true"] .bildeditor__seite, .bildeditor[aria-busy="true"] .vergleich { pointer-events: none; }
.hochladen__bild { position: relative; grid-row: 1 / span 2; width: 48px; height: 48px; }
.hochladen__bild .ladering { position: absolute; inset: 0; margin: auto; }

/* Chat: LEO schreibt – drei Punkte in der Sprechblase */
.blase--tippt { gap: var(--abstand-1); padding: var(--abstand-3); }
.blase--tippt > span:not(.nur-vorlesen) { width: 6px; height: 6px; border-radius: 50%; background: var(--farbe-grau); animation: lade-punkte var(--lade-puls-dauer) var(--lade-kurve) infinite; }
.blase--tippt > span:nth-child(2) { animation-delay: 0.2s; }
.blase--tippt > span:nth-child(3) { animation-delay: 0.4s; }
@keyframes lade-punkte { 0%, 70%, 100% { opacity: 0.25; } 35% { opacity: 1; } }

/* 6. Fortschritt mit Ende: dünner Balken (fortschritt__balken) oder kleiner Ring auf dem Vorschaubild */
.ladering { width: 28px; height: 28px; transform: rotate(-90deg); }
.ladering circle { fill: none; stroke-width: 3; }
.ladering__spur { stroke: var(--glas-hell); }
.ladering__wert { stroke: var(--farbe-akzent); stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset var(--dauer-kurz) linear; }
/* Großer Ring mit Prozent in der Mitte: lange Aufgaben mit echtem Fortschritt (PDF schwärzen: Prüfen) */
.fortschritt-ring { display: flex; flex-direction: column; align-items: center; gap: var(--abstand-3); padding: var(--abstand-6) var(--abstand-3); text-align: center; }
.fortschritt-ring__kreis { position: relative; display: grid; place-items: center; }
.ladering--gross { width: 96px; height: 96px; }
.ladering--gross .ladering__spur { stroke: var(--farbe-grau-hell); }
.ladering--gross .ladering__wert { transition-duration: var(--dauer); }
.fortschritt-ring__zahl { position: absolute; font-size: var(--text-mittel); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 7. PDF: Lichtstreifen und Scan-Linie von oben nach unten */
.scan-laden { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; pointer-events: none; }
.scan-laden::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -50%; width: 100%;
  background: linear-gradient(110deg, transparent 30%, var(--lade-glanz) 50%, transparent 70%);
  animation: lade-glanz var(--lade-glanz-dauer) var(--lade-kurve) infinite;
}
.scan-laden::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--lade-glimmen);
  box-shadow: 0 -16px 24px var(--lade-glimmen-weich);
  animation: lade-scan var(--lade-scan-dauer) var(--lade-kurve) infinite;
}
@keyframes lade-scan { from { top: 0; } to { top: 100%; } }


/* ---------- 30. Eingang: Login und Passwort ----------
   Eine weiße Karte mittig auf dem App-Hintergrund, ohne Leiste. */
.eingang { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--abstand-5) var(--abstand-4); }
.eingang__karte { width: 100%; max-width: 420px; padding: var(--abstand-7) var(--abstand-6); display: flex; flex-direction: column; gap: var(--abstand-5); }
.eingang__logo { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-logo); letter-spacing: -0.03em; color: var(--farbe-dunkel); }
.eingang__logo span { color: var(--farbe-akzent); }
.eingang__text { margin: 0; color: var(--farbe-grau); }
.eingang__fuss { margin: 0; text-align: center; }
.eingang__trenner { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--farbe-grau-hell); }
.eingang__ansicht { display: flex; flex-direction: column; gap: var(--abstand-5); }
.eingang__meldungen { display: flex; flex-direction: column; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }

/* Formulare: Felder untereinander, Hauptknopf über die ganze Breite */
.formular { display: flex; flex-direction: column; gap: var(--abstand-4); margin: 0; }
.formular__aktionen { display: flex; flex-direction: column; gap: var(--abstand-3); margin-top: var(--abstand-2); }
.formular__aktionen .button { width: 100%; }
.feld__name { font-size: var(--text-klein); font-weight: 500; }
.feld__hilfe { color: var(--farbe-grau); font-size: var(--text-klein); }
.feld__hilfe ul { margin: 0; padding-left: var(--abstand-4); }
.feld__hilfe a { font-weight: 600; }   /* z. B. „Passwort vergessen?“ unter dem Passwort */
.feld__fehler { margin: 0; padding: 0; list-style: none; color: var(--farbe-achtung); font-size: var(--text-klein); }
.feld--haken { flex-direction: row; align-items: center; }
.eingabe[aria-invalid="true"] { border-color: var(--farbe-achtung); }
.eingabe:disabled, .eingabe[readonly] { background-color: var(--farbe-hintergrund); color: var(--farbe-grau-dunkel); }

/* ---------- 31. Übergang Beta: Teile, die erst später dazukommen ---------- */
/* Startseite ohne die zwei Werkzeug-Kästen: Begrüßung über die ganze Breite */
.startkopf__raster--allein .begruessung { grid-column: 1 / -1; }
/* Profilbild: rund auf dem Braun, feiner weißer Rand, weicher Schatten */
.avatar--bild { background: var(--farbe-profilbild); border: 2px solid var(--farbe-weiss); box-shadow: var(--schatten-griff); }

/* Profilbild aus der Auswahl (Admin → Profilbilder): Raster runder Bilder mit Namen, das gewählte mit Türkis-Ring */
.bildwahl-klappe { display: flex; flex-direction: column; gap: var(--abstand-3); }
.bildwahl-klappe > summary { align-self: flex-start; list-style: none; cursor: pointer; }
.bildwahl-klappe > summary::-webkit-details-marker { display: none; }
.bildwahl-klappe > .textlink { align-self: flex-start; font-size: var(--text-klein); }
.bildwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--abstand-4) var(--abstand-3); margin: 0; padding: 0; list-style: none; }
.bildwahl__bild { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--abstand-2); padding: var(--abstand-2); border-radius: var(--rundung); font-size: var(--text-klein); text-align: center; cursor: pointer; transition: background var(--dauer-kurz); }
.bildwahl__bild:hover { background: var(--farbe-hintergrund); }
.bildwahl__bild input { position: absolute; opacity: 0; pointer-events: none; }
.bildwahl__bild:has(input:checked) { background: var(--farbe-akzent-hell); color: var(--farbe-akzent); font-weight: 600; }
.bildwahl__bild:has(input:checked) .avatar { box-shadow: 0 0 0 3px var(--farbe-akzent); }
.bildwahl__bild:has(input:focus-visible) { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.bildwahl__bild form { margin-top: calc(-1 * var(--abstand-2)); }
/* Profilbild wählen: Vorschau links, Knöpfe rechts */
.profilbild-wahl { display: flex; align-items: center; gap: var(--abstand-4); }
.profilbild-wahl__text { display: flex; flex-direction: column; gap: var(--abstand-2); min-width: 0; }
.avatar svg { width: 45%; height: 45%; stroke: currentColor; }
/* Werkzeug-Kachel, die es noch nicht gibt: ausgegraut, ohne Anheben */
.werkzeugkachel:disabled, .werkzeugkachel:disabled:hover { opacity: var(--deaktiviert); cursor: not-allowed; transform: none; box-shadow: var(--schatten-karte); border-color: var(--farbe-grau-hell); }
.werkzeugkachel:disabled:hover svg { stroke: currentColor; }
/* KI-Anweisungen: Scan-Ergebnis kompakt, Testbild klein darunter */
/* Übersicht: Grundriss-Entwürfe als kleine Vorschau (Räume als Rechtecke), Klick zeichnet weiter */
.grundriss-vorschauen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 260px)); gap: var(--abstand-4); }
.grundriss-vorschau { display: flex; flex-direction: column; gap: var(--abstand-3); padding: var(--abstand-3); color: inherit; transition: border-color var(--dauer-kurz); }
.grundriss-vorschau:hover { border-color: var(--farbe-akzent); }
.grundriss-vorschau__bild { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--rundung-klein); background: var(--farbe-hintergrund); }
.grundriss-vorschau__bild rect { fill: var(--farbe-weiss); stroke: var(--farbe-grau-dunkel); stroke-width: 0.12; }
.grundriss-vorschau__text { display: flex; flex-direction: column; gap: var(--abstand-0); padding: 0 var(--abstand-1); }
.faktenblatt--eng { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--abstand-3); }
.ki-testbild { width: 240px; aspect-ratio: var(--bildformat); object-fit: cover; border-radius: var(--rundung-bild); }
/* Startpasswort: gut lesbar, zum Abtippen */
[data-startpasswort] { margin: 0; letter-spacing: 0.04em; user-select: all; }
/* Hinweis oben auf der Seite (z. B. Propstack gerade nicht erreichbar) */
.inhalt__rahmen > .hinweis { margin-bottom: var(--abstand-5); }


/* ---------- 32. Tool: Grundriss (static/js/grundriss.js) ----------
   Drei Spalten wie im Bild-Fenster: Räume links, Zeichenfläche in der Mitte, Einrichtung/Eigenschaften rechts.
   Die Zeichnung selbst (Wände, Raumfarben) malt das Skript; hier nur die Oberfläche. */
.inhalt__rahmen--breit { max-width: none; }
/* Vollbild: Name, Etagen, Flächen und Speichern in der Kopfleiste; der Arbeitsbereich füllt den Rest, außen scrollt nichts */
@media (min-width: 768px) {
  .arbeitsflaeche:has(> .inhalt--vollbild) { display: flex; flex-direction: column; overflow: hidden; }
  .inhalt--vollbild { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--abstand-4) var(--abstand-5); }
  .inhalt--vollbild > .inhalt__rahmen { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
}
.grundriss { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kopfzeile--grundriss { grid-template-columns: minmax(0, 1fr) auto; }
.kopfzeile--grundriss .zurueck-link { padding: var(--abstand-1); }
.kopfzeile--grundriss .grundriss__name { font-size: var(--titel-3); }
.grundriss__objekt { overflow: hidden; text-overflow: ellipsis; }
.grundriss__name {
  flex: 1; min-width: 0; padding: var(--abstand-1) 0; border: 0; border-bottom: 1px solid transparent; background: none;
  font-family: var(--schrift-display); font-size: var(--titel-2); font-weight: 700; letter-spacing: -0.02em; color: var(--farbe-dunkel);
  transition: border-color var(--dauer-kurz);
}
.grundriss__name::placeholder { color: var(--farbe-grau-mittel); }
.grundriss__name:hover { border-bottom-color: var(--farbe-grau-hell); }
.grundriss__name:focus { outline: none; border-bottom-color: var(--farbe-akzent); }
.grundriss__etagen { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--abstand-2); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.grundriss__etage { display: flex; align-items: center; }
.grundriss__etage-weg { border: 0; background: none; color: var(--farbe-grau); font-size: var(--text-gross); padding: 0 var(--abstand-2); cursor: pointer; border-radius: var(--rundung-pille); }
.grundriss__etage-weg:hover { color: var(--farbe-achtung); }
.grundriss__etagenname { width: 180px; min-height: var(--auswahl-hoehe); font-size: var(--text-klein); }
.grundriss__summen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--abstand-3) var(--abstand-5); font-size: var(--text-klein); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Zähler: passt die gezeichnete Fläche zur Fläche aus Propstack? Türkis = passt, Orange = zu viel */
.grundriss__summe--passt, .grundriss__summe--passt .text-grau { color: var(--farbe-akzent); }
.grundriss__summe--zuviel { color: var(--farbe-achtung); }
.grundriss__namenszeile { flex: 0 1 300px; min-width: 140px; display: flex; flex-direction: column; gap: var(--abstand-0); }
.grundriss__namenszeile .grundriss__name { flex: none; width: 100%; }

.grundriss__arbeit { flex: 1; min-height: 0; display: flex; gap: var(--abstand-4); }
.grundriss__leiste {
  flex: none; width: var(--grundriss-leiste); overflow-y: auto; scrollbar-width: thin; padding: var(--abstand-5);
  display: flex; flex-direction: column; gap: var(--abstand-3);
  background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung-gross); box-shadow: var(--schatten-karte);
}
.grundriss__titelzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2); }
.grundriss__titel { margin: 0; font-size: var(--titel-4); font-weight: 600; }
.grundriss__hilfe { margin: 0; color: var(--farbe-grau); font-size: var(--text-etikett); line-height: 1.5; }
.grundriss__tipp { margin-top: auto; padding-top: var(--abstand-4); font-size: var(--text-label); }
.grundriss__trenner { width: 100%; margin: var(--abstand-3) 0; border: 0; border-top: 1px solid var(--farbe-grau-hell); }
.grundriss__breit { width: 100%; }
.grundriss__links { align-self: flex-start; padding: 0; }
.grundriss__knoepfe { display: flex; gap: var(--abstand-2); margin-top: var(--abstand-2); }
.grundriss__knoepfe .button { flex: 1; }
.grundriss__schalterliste { display: flex; flex-direction: column; gap: var(--abstand-3); font-size: var(--text-klein); }
.grundriss__abschnitt { display: flex; flex-direction: column; gap: var(--abstand-3); padding-top: var(--abstand-4); border-top: 1px solid var(--farbe-grau-hell); font-size: var(--text-klein); }
.grundriss__raumtitel { flex: 1; min-width: 0; font-weight: 600; }
.grundriss__einheit { display: flex; align-items: center; gap: var(--abstand-2); }
.grundriss__flaechenart { display: flex; flex-direction: column; gap: var(--abstand-1); }
.grundriss__flaechenart label { display: flex; align-items: center; gap: var(--abstand-2); padding: var(--abstand-1) 0; cursor: pointer; }
.grundriss__flaechenart input { accent-color: var(--farbe-akzent); }

/* Räume links und Werkzeug-Kacheln: gleiche Kästen wie die Werkzeug-Kacheln im Bild-Fenster
   (weiß, feiner Rand, Rundung, Kartenschatten; beim Darüberfahren türkis und leicht angehoben) */
.grundriss__raeume { display: flex; flex-direction: column; gap: var(--abstand-2); }
.grundriss__raum, .grundriss__kachel {
  border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung); background: var(--farbe-weiss); box-shadow: var(--schatten-karte);
  color: var(--farbe-grau-dunkel); font-weight: 500; cursor: grab; user-select: none;
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve), border-color var(--dauer-kurz), background var(--dauer-kurz), color var(--dauer-kurz);
}
.grundriss__raum { display: flex; align-items: center; gap: var(--abstand-3); min-height: 48px; padding: var(--abstand-2) var(--abstand-4); font-size: var(--text-klein); }
.grundriss__raum:hover, .grundriss__kachel:hover { transform: translateY(-2px); box-shadow: var(--schatten-schwebend); border-color: var(--farbe-akzent); color: var(--farbe-dunkel); }
.grundriss__raum:active, .grundriss__kachel:active { transform: translateY(-1px); }
.grundriss__raum:focus-visible, .grundriss__kachel:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.grundriss__raum--platziert, .grundriss__raum--platziert:hover { transform: none; box-shadow: none; color: var(--farbe-grau); background: var(--farbe-hintergrund); border-color: var(--farbe-grau-hell); cursor: default; }
.grundriss__raumsymbol { display: grid; place-items: center; flex: none; }
.grundriss__raumsymbol svg { width: var(--symbol); height: var(--symbol); stroke: currentColor; transition: stroke var(--dauer-kurz); }
.grundriss__raum:hover .grundriss__raumsymbol svg { stroke: var(--farbe-akzent); }
.grundriss__raum--platziert:hover .grundriss__raumsymbol svg { stroke: currentColor; }
.grundriss__raumname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grundriss__haken { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--farbe-akzent-hell); }
.grundriss__haken svg { width: 14px; height: 14px; stroke: var(--farbe-akzent); }

.grundriss__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-2); }
.grundriss__kachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-2); min-height: var(--werkzeugkachel-hoehe);
  padding: var(--abstand-2); font-size: var(--text-etikett); text-align: center;
}
.grundriss__kachel--aktiv, .grundriss__kachel--aktiv:hover { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent); box-shadow: inset 0 0 0 0.5px var(--farbe-akzent); color: var(--farbe-akzent); }
.grundriss__kachelbild { display: grid; place-items: center; width: 60px; height: 36px; color: var(--farbe-grau-dunkel); transition: color var(--dauer-kurz); }
.grundriss__kachel:hover .grundriss__kachelbild, .grundriss__kachel--aktiv .grundriss__kachelbild { color: var(--farbe-akzent); }
.grundriss__kachelbild svg { width: 60px; height: 36px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.grundriss__kachelbild svg * { vector-effect: non-scaling-stroke; }   /* gleiche Linienstärke, egal wie groß das Möbel ist */
.grundriss__gruppe { border-bottom: 1px solid var(--farbe-grau-hell); }
.grundriss__gruppe:last-child { border-bottom: 0; }
.grundriss__gruppe summary { display: flex; align-items: center; justify-content: space-between; padding: var(--abstand-3) 0; list-style: none; cursor: pointer; font-size: var(--text-klein); font-weight: 600; }
.grundriss__gruppe summary::-webkit-details-marker { display: none; }
.grundriss__gruppe summary::after { content: "+"; color: var(--farbe-grau); font-size: var(--text-gross); font-weight: 400; }
.grundriss__gruppe[open] summary::after { content: "–"; }
.grundriss__gruppe .grundriss__kacheln { padding-bottom: var(--abstand-3); }

/* Raum- und Textfarbe */
.grundriss__farben { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }
.grundriss__farbe, .grundriss__farbwahl { position: relative; width: 26px; height: 26px; padding: 0; border: 1px solid var(--farbe-grau-mittel); border-radius: 50%; cursor: pointer; }
.grundriss__farbwahl { padding: 2px; background: var(--farbe-weiss); }
.grundriss__farbe--aktiv { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.grundriss__farbe--aktiv::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--text-etikett); font-weight: 700; color: var(--farbe-dunkel); }
.grundriss__farbe--dunkel::after { color: var(--farbe-weiss); }

/* Zeichenfläche */
.grundriss__flaeche { position: relative; flex: 1; min-width: 0; overflow: hidden; background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung-gross); }
.grundriss__plan { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.grundriss__plan--ziehen { cursor: grabbing; }
.grundriss__plan--werkzeug { cursor: crosshair; }
.grundriss__raster { fill: none; stroke: var(--farbe-grau-hell); stroke-width: 0.65; }
/* Beim Hineinziehen bleibt die Zeichenfläche selbst das Ziel */
.grundriss__flaeche--ziel #roomLayer, .grundriss__flaeche--ziel #wallLayer, .grundriss__flaeche--ziel #openingLayer,
.grundriss__flaeche--ziel #furnitureLayer, .grundriss__flaeche--ziel #labelLayer, .grundriss__flaeche--ziel #overlayLayer { pointer-events: none !important; }
.grundriss__oben, .grundriss__unten { position: absolute; left: var(--abstand-4); right: var(--abstand-4); display: flex; justify-content: space-between; gap: var(--abstand-3); pointer-events: none; }
.grundriss__oben { top: var(--abstand-4); align-items: flex-start; }
.grundriss__unten { bottom: var(--abstand-3); align-items: flex-end; }
.grundriss__oben > * { pointer-events: auto; }
.grundriss__hinweis {
  padding: var(--abstand-2) var(--abstand-3); border-radius: var(--rundung-pille); background: var(--glas-hell); border: 1px solid var(--farbe-grau-hell);
  font-size: var(--text-etikett); color: var(--farbe-grau-dunkel); backdrop-filter: var(--glas-unschaerfe); -webkit-backdrop-filter: var(--glas-unschaerfe);
}
.grundriss__hinweis--ziel { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
/* „Grundriss aus Foto“ liest: Schleier über der Zeichenfläche, dahinter ein unscharfer Plan im Aufbau, davor der Ring */
.grundriss__lesen {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-4);
  background: color-mix(in srgb, var(--farbe-weiss) 72%, transparent); backdrop-filter: blur(var(--lade-unschaerfe)); -webkit-backdrop-filter: blur(var(--lade-unschaerfe));
  animation: lade-ein var(--lade-ueberblenden) var(--lade-kurve) both;
}
.grundriss__lesen[hidden] { display: none; }
.grundriss__skelett { position: absolute; top: 50%; left: 50%; width: min(72%, 620px); transform: translate(-50%, -50%); filter: blur(2px); opacity: 0.7; pointer-events: none; }
.grundriss__skelett-raum {
  fill: var(--farbe-akzent-hell); fill-opacity: 0; stroke: var(--farbe-akzent); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: grundriss-aufbau var(--lade-aufbau-dauer) var(--lade-kurve) infinite; animation-delay: calc(var(--i) * 0.45s);
}
@keyframes grundriss-aufbau {
  0% { stroke-dashoffset: 100; fill-opacity: 0; opacity: 1; }
  25% { stroke-dashoffset: 0; fill-opacity: 0; }
  40%, 80% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 0; }
}
.grundriss__ring { position: relative; width: 132px; height: 132px; display: grid; place-items: center; border-radius: 50%; background: var(--glas-hell); box-shadow: var(--schatten-schwebend); }
.grundriss__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.grundriss__ring-bahn, .grundriss__ring-wert { fill: none; stroke-width: 6; }
.grundriss__ring-bahn { stroke: var(--farbe-grau-hell); }
.grundriss__ring-wert { stroke: var(--farbe-akzent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s linear; }
.grundriss__ring-zahl { position: relative; font-size: var(--titel-3); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--farbe-dunkel); }
.grundriss__lesen-text { position: relative; margin: 0; font-size: var(--text-klein); font-weight: 500; color: var(--farbe-grau-dunkel); }

.grundriss__leer {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 260px; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--abstand-2); text-align: center; color: var(--farbe-grau); font-size: var(--text-klein);
}
.grundriss__leer[hidden] { display: none; }
.grundriss__leer svg { width: 40px; height: 40px; stroke: var(--farbe-grau-mittel); }
.grundriss__massstab { font-size: var(--text-mini); color: var(--farbe-grau-dunkel); }
.grundriss__massstab-linie { height: 6px; margin-top: var(--abstand-1); border: 1px solid var(--farbe-grau-dunkel); border-top: 0; }
.grundriss__vermerk { max-width: 280px; text-align: right; font-size: var(--text-mini); color: var(--farbe-grau); }

/* Vorschau vor dem Herunterladen */
.grundriss__vorschau { max-width: 880px; }
.grundriss__vorschaubild { display: block; width: 100%; max-height: 60vh; margin-bottom: var(--abstand-5); object-fit: contain; border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung-bild); }

/* Tools-Seite: Kachel mit kleinem Grundriss, Liste „Meine Grundrisse“ */
.werkzeugbild__plan {
  width: 52%; padding: 6%; overflow: visible; background: var(--farbe-weiss); border-radius: var(--rundung-mini); box-shadow: var(--schatten-schwebend);
  fill: none; stroke: var(--farbe-dunkel); stroke-width: 3; stroke-linecap: square; transition: transform 600ms var(--kurve);
}
.werkzeugbild__raum { stroke: none; fill: var(--farbe-akzent-hell); opacity: 0; transition: opacity 450ms var(--kurve); }
.werkzeugbild__tuer { stroke-width: 1.5; }
.werkzeugbild__plan--fein { stroke-width: 2; stroke-linecap: round; }
.objektkachel:hover .werkzeugbild__plan { transform: scale(1.02); }
.objektkachel:hover .werkzeugbild__raum { opacity: 1; }
/* Bewegung von selbst (ohne Darüberfahren), gut sichtbar, aber ruhig: alle drei Kacheln im 14-Sekunden-Takt.
   Schwärzen: Zeilen werden nacheinander schwarz und wieder frei. Grundriss: zeichnet sich Wand für Wand, dann füllt sich
   ein Raum. Aushänge: zwei Blätter tauschen die Plätze, eins wird neu aufgehängt und leuchtet türkis.
   Nur Größe, Lage, Deckkraft und Strich – das rechnet die Grafikkarte nebenbei, kein JavaScript, keine Last auf dem
   Server. Bei „Bewegung reduzieren“ (Windows: „Animationseffekte“ aus) still (Regel ganz unten). Beim Darüberfahren
   steht alles fertig da. */
.werkzeugbild__balken { animation: werkzeug-balken 14s var(--kurve) infinite; }
.werkzeugbild__balken--b { animation-delay: 1s; }
.werkzeugbild__balken--c { animation-delay: 2s; }
.werkzeugbild__balken--d { animation-delay: 3s; }
@keyframes werkzeug-balken { 0%, 6% { transform: scaleX(0); } 16%, 58% { transform: scaleX(1); } 70%, 100% { transform: scaleX(0); } }
.werkzeugbild__strich { stroke-dasharray: 1 2; animation: werkzeug-zeichnen 14s ease-in-out infinite; }
.werkzeugbild__strich--2 { animation-delay: 0.7s; }
.werkzeugbild__strich--3 { animation-delay: 1.4s; }
.werkzeugbild__strich--4 { animation-delay: 2.1s; }
.werkzeugbild__strich--5 { animation-delay: 2.8s; }
@keyframes werkzeug-zeichnen { 0% { stroke-dashoffset: 1.1; } 40%, 76% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: -1.1; } }
.werkzeugbild__raum { fill: var(--farbe-akzent); fill-opacity: 0.3; animation: werkzeug-fuellen 14s ease-in-out infinite; }
@keyframes werkzeug-fuellen { 0%, 46% { opacity: 0; } 56%, 74% { opacity: 1; } 86%, 100% { opacity: 0; } }
.objektkachel:hover .werkzeugbild__balken, .objektkachel:hover .werkzeugbild__strich, .objektkachel:hover .werkzeugbild__raum { animation: none; }
.objektkachel:hover .werkzeugbild__balken { transform: none; }
/* Aushänge: Schaufenster mit 2 × 4 Blättern (Foto, zwei Zeilen) */
.aushangbild__blatt rect:last-child { fill: none; stroke-width: 1.5; }
.aushangbild__foto { fill: var(--farbe-grau-hell); stroke: none; }
.aushangbild__zeile { stroke: var(--farbe-grau-mittel); stroke-width: 1.5; }
.aushangbild__licht { fill: var(--farbe-akzent); fill-opacity: 0.3; stroke: none; opacity: 0; transition: opacity 450ms var(--kurve); }
.aushangbild__blatt--2 { animation: aushang-nach-rechts 14s var(--kurve) infinite; }
.aushangbild__blatt--3 { animation: aushang-nach-links 14s var(--kurve) infinite; }
.aushangbild__blatt--7 { animation: aushang-neu 14s var(--kurve) infinite; }
.aushangbild__blatt--7 .aushangbild__licht { animation: aushang-licht 14s ease-in-out infinite; }
.aushangbild__blatt--7 rect:last-child { animation: aushang-rand 14s ease-in-out infinite; }
@keyframes aushang-nach-rechts { 0%, 8% { transform: none; } 16% { transform: translate(11px, -5px); } 24%, 62% { transform: translateX(22px); } 70% { transform: translate(11px, -5px); } 78%, 100% { transform: none; } }
@keyframes aushang-nach-links { 0%, 8% { transform: none; } 16% { transform: translate(-11px, 5px); } 24%, 62% { transform: translateX(-22px); } 70% { transform: translate(-11px, 5px); } 78%, 100% { transform: none; } }
@keyframes aushang-neu { 0%, 30% { opacity: 1; transform: none; } 38% { opacity: 0; transform: translateY(-8px); } 46%, 100% { opacity: 1; transform: none; } }
@keyframes aushang-licht { 0%, 40% { opacity: 0; } 48%, 76% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes aushang-rand { 0%, 40%, 88%, 100% { stroke: var(--farbe-dunkel); } 48%, 76% { stroke: var(--farbe-akzent); } }
.objektkachel:hover .aushangbild__blatt, .objektkachel:hover .aushangbild__licht, .objektkachel:hover .aushangbild__blatt rect:last-child { animation: none; }
.objektkachel:hover .aushangbild__blatt--8 .aushangbild__licht { opacity: 1; }
.objektkachel:hover .aushangbild__blatt--8 rect:last-child { stroke: var(--farbe-akzent); }
/* Objekt wählen für den Grundriss: schlanke Kacheln im Stil von „Meine Objekte“ (werkzeuge/_objekt_kachel.html),
   flacheres Foto, Entwurf als Glas-Pille, unten „geändert …“ – ein Klick auf die Kachel zeichnet */
.objektkachel__foto--flach { aspect-ratio: 16 / 9; }
.objektkachel__status--entwurf svg { stroke: var(--farbe-akzent); }
.grundriss-kachel__fuss { margin-top: auto; padding-top: var(--abstand-3); }
.grundriss-objekte { display: flex; flex-direction: column; gap: var(--abstand-5); }
button.objektkachel { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.grundriss-liste { display: flex; flex-direction: column; gap: var(--abstand-4); margin-top: var(--abstand-7); }
.grundriss-liste .listenzeile__text { color: inherit; text-decoration: none; }
.grundriss-liste .listenzeile__text:hover strong { color: var(--farbe-akzent); }

/* ---------- 33. Tool: Aushänge (static/js/aushaenge.js) ----------
   Übersicht wie im Prototyp (prototyp/aushaenge.html): Standorte so, wie sie in echt hängen. Jeder Platz ist ein
   Mini-Aushang im A4-Hochformat. Alle Aushänge sind gleich groß und wachsen mit der Breite mit (bis 172 px),
   die Felder bleiben immer nebeneinander. Hinweise: Abhängen = Orange kräftig, Neu drucken = Orange hell,
   Austauschen? = Grau, Alles aktuell = Türkis hell. */
.aushaenge { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--abstand-6); align-items: stretch; }
.aushaenge__haupt { min-width: 0; container-type: inline-size; }
.aushaenge__inhalt {
  --wand-abstand: var(--abstand-4); --feld-abstand: var(--abstand-3);
  /* Breite nach Platz nebeneinander UND nach Bildschirmhöhe: --aushang-hoehe misst aushaenge.js so, dass die erste Wand
     genau ins Fenster passt (auf großen Monitoren entsprechend größer) */
  --aushang-breite: clamp(64px, min(calc((100cqw - 9 * var(--feld-abstand) - 4 * var(--wand-abstand) - 3 * var(--abstand-6)) / 6), var(--aushang-hoehe, calc((100vh - 210px) / 5.1))), 400px);
  width: calc(6 * var(--aushang-breite) + 9 * var(--feld-abstand) + 4 * var(--wand-abstand) + 3 * var(--abstand-6)); max-width: 100%; margin: 0 auto;
}
/* Rechts „Neue Objekte“: genau so hoch wie links die Wände, darin scrollt die Liste (zählt nicht zur Höhe) */
.aushaenge__seite { position: relative; min-height: 320px; border-left: 1px solid var(--farbe-grau-hell); }
.aushaenge__seite-innen { position: absolute; inset: 0 0 var(--abstand-6) var(--abstand-5); display: flex; flex-direction: column; }
.aushaenge__seite-innen .aushaenge__kandidaten { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 2px 2px var(--abstand-2); }
.aushaenge__mehr { margin: var(--abstand-2) 0 0; font-size: var(--text-etikett); color: var(--farbe-grau); }
.aushaenge__seitentitel { margin: 0 0 var(--abstand-1); font-size: var(--text-etikett); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--farbe-grau); }
.aushaenge__seitenhinweis { margin: 0 0 var(--abstand-4); font-size: var(--text-klein); color: var(--farbe-grau); line-height: 1.45; }
.aushaenge__kandidaten { display: flex; flex-direction: column; gap: var(--abstand-4); }
.aushaenge__kandidaten .objektkachel { flex-shrink: 0; cursor: grab; }   /* nie zusammendrücken – die Liste scrollt */
/* Objekt hängt schon im Fenster: türkiser Umriss */
.aushaenge__kandidaten .objektkachel--haengt { outline: 2px solid var(--farbe-akzent); outline-offset: -2px; }
.objektkachel__haengt { color: var(--farbe-akzent); }
.aushaenge__kandidat-zeile { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aushaenge__kandidaten .objektkachel__text { padding: var(--abstand-3) var(--abstand-4) var(--abstand-4); }
.aushaenge__kandidaten .objektkachel--ziehen { opacity: var(--deaktiviert); }
.aushaenge__leer { padding: var(--abstand-3); border-radius: var(--rundung); background: var(--farbe-grau-hell); font-size: var(--text-klein); color: var(--farbe-grau-dunkel); }
@media (max-width: 1100px) {
  .aushaenge { grid-template-columns: minmax(0, 1fr); }
  .aushaenge__seite { min-height: 0; padding-top: var(--abstand-5); border-left: 0; border-top: 1px solid var(--farbe-grau-hell); }
  .aushaenge__seite-innen { position: static; }
  .aushaenge__kandidaten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Aushänge: links Titel mit Stand (.aushang-kopf wie im Editor), daneben was zu tun ist – Pillen in den Farben der Kacheln */
.zutun-filter { display: flex; align-items: center; gap: var(--abstand-2); margin-left: var(--abstand-2); }
.zutun-filter .pille { gap: var(--abstand-1); border: 0; font: inherit; font-size: var(--text-klein); font-weight: 500; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--dauer-kurz), opacity var(--dauer-kurz); }
.zutun-filter .pille:hover { opacity: 0.88; }
.zutun-filter .pille b { font-weight: 700; font-variant-numeric: tabular-nums; }
.zutun-filter .pille[aria-pressed="true"] { outline-color: var(--farbe-grau-dunkel); }
.zutun-filter .pille--achtung-stark[aria-pressed="true"], .zutun-filter .pille--achtung[aria-pressed="true"] { outline-color: var(--farbe-achtung); }
@container (max-width: 1240px) { .zutun-filter .zutun-text { display: none; } }
@container (max-width: 1040px) { .kopfzeile .aushang-kopf__unter { display: none; } }

/* Standort: eine Wand mit Feldern (Fenster, Schaukästen) nebeneinander */
.wand-ort { margin-bottom: var(--abstand-6); }
.wand-ort__kopf { display: flex; align-items: baseline; gap: var(--abstand-3); margin-bottom: var(--abstand-3); }
.wand-ort__kopf h2 { margin: 0; font-size: var(--titel-4); font-weight: 600; }
.wand-ort__kopf span { font-size: var(--text-klein); color: var(--farbe-grau); }
.wand {
  display: flex; flex-wrap: nowrap; justify-content: space-evenly; gap: var(--wand-abstand); width: 100%; padding: var(--wand-abstand);
  background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung); box-shadow: var(--schatten-karte);
}
.wand__feld { flex: none; display: flex; align-items: center; padding: var(--feld-abstand); background: var(--farbe-grau-hell); border-radius: var(--rundung-klein); }
/* „Vorne“ / „Hinten“ quer links neben dem Feld (von unten nach oben zu lesen) – spart Höhe */
.wand__feldname { flex: none; margin: 0 var(--feld-abstand) 0 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--text-label); font-weight: 600; letter-spacing: 0.04em; line-height: 1; color: var(--farbe-grau-dunkel); }
.wand__raster { display: grid; grid-template-columns: repeat(var(--spalten, 2), var(--aushang-breite)); gap: var(--feld-abstand); justify-content: center; }

/* Ein Platz = Mini-Aushang (A4 hoch). Die Schrift wächst und schrumpft mit dem Aushang. */
.aushangkachel {
  position: relative; aspect-ratio: 210 / 297; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 7%;
  border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung-mini); background: var(--farbe-weiss); color: var(--farbe-dunkel);
  font: inherit; font-size: calc(var(--aushang-breite) * 0.0846); text-align: left; cursor: pointer;
  transition: border-color var(--dauer-kurz), opacity var(--dauer-kurz), box-shadow var(--dauer);
}
.aushangkachel:hover { border-color: var(--farbe-akzent); }
.aushangkachel[draggable="true"] { cursor: grab; }
.aushangkachel--ziehen { opacity: 0.35; }
.aushangkachel--ziel, .aushangkachel--markiert { border-color: var(--farbe-akzent); box-shadow: 0 0 0 3px var(--farbe-akzent-hell); }
.aushangkachel--blass { opacity: 0.28; }
.aushangkachel--err { border-color: var(--farbe-achtung); }
.aushangkachel--idle { border-color: var(--farbe-grau-dunkel); }
.aushangkachel--warn { border-color: color-mix(in srgb, var(--farbe-achtung) 40%, var(--farbe-grau-hell)); }
.aushangkachel__bild { flex: none; height: 42%; margin-bottom: 7%; display: grid; place-items: center; border-radius: 2px; background: var(--farbe-grau-hell); color: var(--farbe-grau-mittel); }
.aushangkachel__bild svg { width: 28%; height: auto; stroke: currentColor; }
.aushangkachel__bild:has(img) { overflow: hidden; }
.aushangkachel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aushangkachel__art { overflow: hidden; font-size: 0.75em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: var(--farbe-akzent); }
.aushangkachel__ort { overflow: hidden; font-size: 1.1em; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.aushangkachel__preis { font-variant-numeric: tabular-nums; }
.aushangkachel__fuss { margin-top: auto; display: flex; justify-content: space-between; font-size: 0.82em; color: var(--farbe-grau); }
.aushangkachel__fuss b { font-weight: 600; color: var(--farbe-dunkel); }
.aushangkachel > .pille { position: absolute; top: 9%; left: 50%; z-index: 2; transform: translateX(-50%); font-size: 0.95em; }
.pille--achtung-stark { background: var(--farbe-achtung); color: var(--farbe-weiss); }
.pille--austauschen { background: var(--farbe-grau-dunkel); color: var(--farbe-weiss); }   /* Aushänge: hängt lange – deutlich, aber ruhiger als „Abhängen“ */
/* Freier Platz: „+“, beim Darüberfahren „Aushang erstellen“ */
.aushangkachel--leer { align-items: center; justify-content: center; gap: var(--abstand-1); border: 1.5px dashed var(--farbe-grau-mittel); background: transparent; text-align: center; font-size: 1.04em; color: var(--farbe-grau); }
.aushangkachel--leer b { width: 3.4em; height: 3.4em; display: grid; place-items: center; border-radius: 50%; background: var(--farbe-weiss); box-shadow: var(--schatten-griff); font-size: 2em; font-weight: 300; color: var(--farbe-akzent); transition: transform var(--dauer-kurz), background var(--dauer-kurz), color var(--dauer-kurz); }
.aushangkachel--leer span { opacity: 0; font-weight: 500; transition: opacity var(--dauer-kurz); }
.aushangkachel--leer:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); background: var(--glas-zart); }
.aushangkachel--leer:hover b { transform: scale(1.08); background: var(--farbe-akzent); color: var(--farbe-weiss); }
.aushangkachel--leer:hover span { opacity: 1; }
/* Platzhalter (Siegel, Werbeplakat): eigenes Motiv, verschiebbar, eigenes Bild draufziehen */
.aushangkachel--fest { align-items: center; justify-content: center; gap: 3px; padding: 9%; text-align: center; cursor: grab; }
.aushangkachel--fest:hover { border-color: var(--farbe-grau-mittel); }
.aushangkachel--siegel { background: var(--farbe-hintergrund); color: var(--farbe-grau-dunkel); }
.aushangkachel--werbung { background: var(--farbe-akzent-hell); color: var(--farbe-akzent); }
.aushangkachel__abzeichen { width: 46%; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 4px; color: var(--farbe-akzent); }
.aushangkachel__abzeichen svg { width: 100%; height: 100%; }
.aushangkachel__festtitel { font-size: 1.13em; font-weight: 700; line-height: 1.2; color: var(--farbe-dunkel); }
.aushangkachel__sterne { font-size: 0.95em; letter-spacing: 2px; color: var(--farbe-akzent); }
.aushangkachel__festtext { font-size: 0.95em; line-height: 1.3; }
.aushangkachel__festhinweis { margin-top: auto; font-size: 0.87em; color: var(--farbe-grau); }
.aushangkachel--eigenes-bild { padding: 0; background: var(--farbe-weiss); }
.aushangkachel--eigenes-bild img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.aushangkachel__etikett { position: absolute; left: 6%; bottom: 5%; padding: 1px 7px; border-radius: var(--rundung-pille); background: var(--glas-foto); font-size: 0.87em; color: var(--farbe-grau-dunkel); }
/* Mini-Aushang: so, wie er gedruckt wurde (Foto, Preis-Etikett, Titel) */
.aushangkachel--mini { gap: 0; padding: 6%; background: var(--farbe-hintergrund); }
.aushangkachel__m-kopf { flex: none; height: 5%; margin-bottom: 3%; display: flex; justify-content: space-between; align-items: center; }
.aushangkachel__m-kopf i { display: block; width: 18%; height: 35%; border-radius: 2px; background: var(--farbe-grau-mittel); }
.aushangkachel__m-kopf i + i { width: 32%; height: 70%; background: var(--farbe-akzent-hell); }
.aushangkachel__m-titelbild { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 2px; background: var(--farbe-grau-hell); }
.aushangkachel__m-titelbild img, .aushangkachel__m-reihe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aushangkachel__m-preis { position: absolute; bottom: 5%; left: 5%; padding: 0.25em 0.4em; border-radius: 2px; background: var(--farbe-weiss); box-shadow: var(--schatten-griff); font-size: 0.65em; font-weight: 700; white-space: nowrap; color: var(--farbe-akzent); }
.aushangkachel__m-preis--rechts { left: auto; right: 5%; }
.aushangkachel__m-preis--umgekehrt { background: var(--farbe-akzent); color: var(--farbe-weiss); }
.aushangkachel__m-reihe { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; height: 13%; margin-top: 3%; }
.aushangkachel__m-reihe span { overflow: hidden; border-radius: 1px; background: var(--farbe-grau-hell); }
.aushangkachel__m-kicker { margin-top: 4%; overflow: hidden; font-size: 0.4em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; white-space: nowrap; color: var(--farbe-akzent); }
.aushangkachel__m-titel { margin-top: 1%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.7em; font-weight: 700; line-height: 1.15; text-align: center; }
.aushangkachel__m-fakten { display: flex; justify-content: center; gap: 6%; margin-top: 4%; }
.aushangkachel__m-fakten i { display: block; width: 12%; height: 3px; border-radius: 2px; background: var(--farbe-grau-mittel); }
.aushangkachel__m-fuss { flex: none; height: 9%; margin-top: 5%; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--farbe-grau-hell); border-radius: 2px; background: var(--farbe-weiss); font-size: 0.57em; color: var(--farbe-grau); }
.aushangkachel__m-fuss b { color: var(--farbe-dunkel); }
/* Aktion direkt auf dem Aushang, wenn ein Zu-tun-Punkt gewählt ist */
.aushangkachel__aktion {
  position: absolute; left: 8%; right: 8%; bottom: 8%; z-index: 3; display: block; padding: 0.5em 0.3em;
  border: 0; border-radius: var(--rundung-pille); box-shadow: var(--schatten-schwebend);
  font: inherit; font-size: 1em; font-weight: 600; text-align: center; color: var(--farbe-weiss); background: var(--farbe-akzent); cursor: pointer;
}
.aushangkachel__aktion--err, .aushangkachel__aktion--warn { background: var(--farbe-achtung); }
/* Liste: ganze Zeile anklickbar */
.tabelle__zeile--klickbar { cursor: pointer; }
.tabelle__zeile--klickbar:hover td { background: var(--farbe-hintergrund); }

/* Kleines Fenster an einem Element (Popover): Angaben und Aktionen zu einem Aushang oder Platz */
.popover {
  position: fixed; z-index: 40; width: 310px; max-height: calc(100vh - 24px); overflow-y: auto; padding: var(--abstand-4);
  background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung); box-shadow: var(--schatten-fenster);
}
.popover__titel { margin: 0 0 2px; font-size: var(--text-normal); font-weight: 600; }
.popover__unter { margin-bottom: var(--abstand-3); font-size: var(--text-klein); color: var(--farbe-grau); }
.popover__werte { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--abstand-4); margin-bottom: var(--abstand-4); font-size: var(--text-klein); font-variant-numeric: tabular-nums; }
.popover__werte span { color: var(--farbe-grau); }
.popover__werte b { font-weight: 600; }
.popover__hinweis { margin-bottom: var(--abstand-3); padding: var(--abstand-2) var(--abstand-3); border-radius: var(--rundung-klein); font-size: var(--text-klein); }
.popover__hinweis--err, .popover__hinweis--warn { background: var(--farbe-achtung-hell); color: var(--farbe-achtung); }
.popover__hinweis--idle { background: var(--farbe-grau-hell); color: var(--farbe-grau-dunkel); }
.popover__knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.popover__option { display: block; width: 100%; margin-top: 6px; padding: var(--abstand-2) var(--abstand-3); border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung-klein); background: var(--farbe-weiss); color: inherit; font-size: var(--text-klein); text-align: left; cursor: pointer; }
.popover__option:hover { border-color: var(--farbe-akzent); }
.popover__option small { display: block; font-size: var(--text-etikett); color: var(--farbe-grau); }
.popover .eingabe { margin-top: var(--abstand-2); min-height: 36px; font-size: var(--text-klein); }


/* ---------- 34. Tool: Aushang-Editor (static/js/aushang.js) ----------
   Wie im Prototyp (prototyp/aushang.html): Der Aushang ist der Editor. Links die Bühne mit dem A4-Aushang (immer ganz
   sichtbar, skaliert), rechts die schmale Leiste. Der Aushang selbst ist in mm/pt gebaut, damit er beim Drucken genau
   eine A4-Seite füllt; Farben nur aus den Design-Werten (G&B-Türkis statt Petrol). */
.kopfzeile--aushang { grid-template-columns: minmax(0, 1fr) auto; }
.kopfzeile--aushang .zurueck-link { padding: var(--abstand-1); }
.aushang-kopf { min-width: 0; }
.aushang-kopf__titel, .aushang-kopf__unter { margin: 0; line-height: 1.3; }
.aushang-kopf__titel { overflow: hidden; font-size: var(--titel-4); font-weight: 600; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.aushang-kopf__unter { max-width: 520px; overflow: hidden; font-size: var(--text-klein); color: var(--farbe-grau); text-overflow: ellipsis; white-space: nowrap; }
/* Was fehlt (Pflichtangaben): links neben dem grauen PDF-Knopf, anklickbar → beheben */
.aushang-fehlt { display: none; align-items: center; gap: var(--abstand-2); max-width: 420px; padding: var(--abstand-1); border: 0; background: none; overflow: hidden; font-size: var(--text-klein); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; color: var(--farbe-achtung); cursor: pointer; }
.aushang-fehlt--sichtbar { display: inline-flex; }
.aushang-fehlt:hover { text-decoration: underline; }
.aushang-fehlt i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--farbe-achtung); }

.aushang-editor { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: var(--abstand-4); }
.aushang-buehne { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: var(--abstand-6); background: var(--farbe-grau-hell); border-radius: var(--rundung-gross); }
.aushang-skalierer { position: relative; flex: none; }
.aushang-skalierer .plakat { position: absolute; top: 0; left: 0; transform-origin: top left; box-shadow: var(--schatten-schwebend); }
.aushang-leiste {
  overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: var(--abstand-5); padding: var(--abstand-5);
  background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung-gross); box-shadow: var(--schatten-karte);
}
.aushang-leiste__titel { margin-bottom: var(--abstand-2); font-size: var(--text-etikett); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--farbe-grau); }
.aushang-leiste__schalter { justify-content: space-between; margin-top: var(--abstand-3); font-size: var(--text-klein); }
.aushang-leiste > div > .aushang-leiste__schalter:first-child { margin-top: 0; }
.aushang-leiste__abstand { margin-top: var(--abstand-3); }
.aushang-leiste__tipp { padding: var(--abstand-3); border-radius: var(--rundung); background: var(--farbe-hintergrund); font-size: var(--text-etikett); line-height: 1.5; color: var(--farbe-grau); }
.aushang-leiste__tipp b { font-weight: 600; color: var(--farbe-dunkel); }
.aushang-leiste__fuss { margin-top: auto; display: flex; flex-direction: column; gap: var(--abstand-1); }
.aushang-leiste__fuss small { font-size: var(--text-label); line-height: 1.4; color: var(--farbe-grau); }
.aushang-leiste__neu { align-self: flex-start; padding: 0; font-size: var(--text-klein); }
/* Prüfung: was fehlt (Orange), was besser wäre (grau), alles drin (Türkis) */
.pruefliste { display: flex; flex-direction: column; gap: 6px; }
.pruefpunkt { width: 100%; display: flex; gap: var(--abstand-2); align-items: flex-start; padding: var(--abstand-2) var(--abstand-3); border: 0; border-radius: var(--rundung-klein); background: var(--farbe-achtung-hell); font-size: var(--text-klein); line-height: 1.35; text-align: left; color: var(--farbe-dunkel); cursor: pointer; }
.pruefpunkt--warn { background: var(--farbe-hintergrund); }
.pruefpunkt--ok { align-items: center; background: var(--farbe-akzent-hell); cursor: default; }
.pruefpunkt small { display: block; font-size: var(--text-etikett); color: var(--farbe-grau); }
.pruefpunkt__punkt { flex: none; width: 16px; height: 16px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; font-size: var(--text-mini); font-weight: 700; color: var(--farbe-weiss); background: var(--farbe-achtung); }
.pruefpunkt__punkt--warn { background: var(--farbe-grau); }
.pruefpunkt__punkt--ok { margin: 0; background: var(--farbe-akzent); }

/* Bildleiste: fährt bei „Bild tauschen“ von unten hoch */
.bildleiste {
  position: absolute; left: var(--abstand-5); right: var(--abstand-5); bottom: var(--abstand-5); z-index: 20; padding: var(--abstand-3) var(--abstand-4) var(--abstand-4);
  background: var(--farbe-weiss); border-radius: var(--rundung); box-shadow: var(--schatten-fenster);
  transform: translateY(16px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform var(--dauer-kurz), opacity var(--dauer-kurz), visibility var(--dauer-kurz);
}
.bildleiste--offen { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
.bildleiste__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--abstand-3); font-size: var(--text-klein); }
.bildleiste__kopf b { font-weight: 600; }
.bildleiste__kopf span { color: var(--farbe-grau); }
.bildleiste__kopf .symbolknopf { width: 28px; height: 28px; }
.bildleiste__bilder { display: flex; gap: var(--abstand-3); overflow-x: auto; scrollbar-width: thin; }
.bildleiste__bild { position: relative; flex: none; width: 104px; height: 72px; overflow: hidden; border: 2px solid transparent; border-radius: var(--rundung-klein); background: var(--farbe-grau-hell); cursor: pointer; }
.bildleiste__bild:hover { border-color: var(--farbe-akzent); }
.bildleiste__bild img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.bildleiste__haken { position: absolute; top: 5px; right: 5px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; font-size: var(--text-mini); color: var(--farbe-weiss); background: var(--farbe-akzent); }
.bildleiste__bild--neu { display: grid; place-items: center; border: 1.5px dashed var(--farbe-grau-mittel); background: transparent; font-size: var(--text-etikett); line-height: 1.3; text-align: center; color: var(--farbe-grau); }

/* Popover im Editor: zwei Spalten, Beschriftungen */
.popover p { margin: 0 0 var(--abstand-3); font-size: var(--text-etikett); line-height: 1.4; color: var(--farbe-grau); }
.popover label { display: block; margin: var(--abstand-2) 0 var(--abstand-1); font-size: var(--text-etikett); color: var(--farbe-grau); }
.popover .auswahl, .popover__zwei .eingabe { width: 100%; min-height: 36px; margin-top: 0; font-size: var(--text-klein); }
.popover__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--abstand-2); }
.popover__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.popover__chips .chip { min-height: 30px; padding: 0 var(--abstand-3); font-size: var(--text-etikett); }
.popover__chips .chip svg { width: 14px; height: 14px; stroke: currentColor; }
.chip__zahl { width: 15px; height: 15px; display: inline-grid; place-items: center; border-radius: 50%; font-size: var(--text-mini); background: var(--farbe-weiss); color: var(--farbe-akzent); }
.chip__wert { opacity: 0.7; }

/* Platzwahl vor dem PDF (Drucken = Eintragen) */
.dialog.platzwahl { width: min(760px, calc(100% - 32px)); max-width: none; max-height: calc(100vh - 40px); padding: 0; flex-direction: column; }
.dialog.platzwahl[open] { display: flex; }
.platzwahl__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--abstand-4); padding: var(--abstand-5) var(--abstand-5) var(--abstand-2); }
.platzwahl__kopf h3 { margin: 0; font-size: var(--titel-4); }
.platzwahl__kopf p { margin: var(--abstand-1) 0 0; font-size: var(--text-klein); color: var(--farbe-grau); }
.platzwahl__inhalt { overflow: auto; padding: var(--abstand-3) var(--abstand-5) var(--abstand-1); }
.platzwahl__ort { margin-bottom: var(--abstand-4); }
.platzwahl__ort h4 { margin: 0 0 var(--abstand-2); font-size: var(--text-klein); }
.platzwahl__wand { width: fit-content; display: flex; flex-wrap: nowrap; gap: 10px; padding: 10px; border-radius: var(--rundung); background: var(--farbe-hintergrund); border: 1px solid var(--farbe-grau-hell); }
.platzwahl__feld { padding: var(--abstand-2); border-radius: var(--rundung-klein); background: var(--farbe-grau-hell); }
.platzwahl__feld small { display: block; margin: 0 0 6px 2px; font-size: var(--text-mini); font-weight: 600; color: var(--farbe-grau-dunkel); }
.platzwahl__raster { display: grid; grid-template-columns: repeat(var(--spalten, 2), 52px); gap: 6px; }
.platzwahl__platz { aspect-ratio: 210 / 297; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px; border: 1px solid var(--farbe-grau-hell); border-radius: var(--rundung-mini); background: var(--farbe-weiss); font-size: var(--text-mini); line-height: 1.2; text-align: center; color: var(--farbe-grau); cursor: pointer; transition: border-color var(--dauer-kurz), background var(--dauer-kurz); }
.platzwahl__platz b { font-size: var(--text-mini); color: var(--farbe-dunkel); }
.platzwahl__platz:not(.platzwahl__platz--fest):hover { border-color: var(--farbe-akzent); }
.platzwahl__platz--frei { border: 1.5px dashed var(--farbe-grau-mittel); background: transparent; font-size: var(--text-normal); color: var(--farbe-akzent); }
.platzwahl__platz--fest { border-color: var(--farbe-grau-mittel); background: transparent; cursor: default; font-size: var(--text-winzig); }
.platzwahl__platz--selbst { border-color: var(--farbe-akzent); background: var(--farbe-akzent-hell); }
.platzwahl__platz--gewaehlt, .platzwahl__platz--gewaehlt:hover { border: 2px solid var(--farbe-akzent); background: var(--farbe-akzent); color: var(--farbe-weiss); }
.platzwahl__platz--gewaehlt b { color: var(--farbe-weiss); }
.platzwahl__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); padding: var(--abstand-4) var(--abstand-5) var(--abstand-5); border-top: 1px solid var(--farbe-grau-hell); font-size: var(--text-klein); color: var(--farbe-grau); }
.platzwahl__fuss b { color: var(--farbe-dunkel); }

/* Der Aushang (A4). Feste Größen in mm/pt – so wird er gedruckt. */
.plakat {
  --plakat-farbe: var(--farbe-akzent); --plakat-text: var(--farbe-dunkel); --plakat-grau: var(--farbe-grau-dunkel);
  --plakat-linie: var(--farbe-grau-hell); --plakat-papier: var(--farbe-hintergrund);
  width: 210mm; height: 297mm; padding: 10mm; overflow: hidden; display: flex; flex-direction: column; gap: 3.6mm;
  background: var(--plakat-papier); color: var(--plakat-text); font-family: var(--schrift);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.plakat__kopf { flex: none; height: 10mm; display: flex; justify-content: space-between; align-items: center; }
.plakat__nr { font-size: 7.5pt; letter-spacing: 0.04em; line-height: 1; color: var(--plakat-grau); }
.plakat__logo { display: block; height: 100%; width: auto; max-width: 80mm; object-fit: contain; object-position: right center; }
.plakat__bild { position: relative; overflow: hidden; border-radius: 2.6mm; background: var(--farbe-grau-hell); cursor: pointer; }
.plakat__bild > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 80ms linear; }
.plakat__ohne-bild { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9pt; color: var(--farbe-grau); }
.plakat__bild--ziel, .plakat__bild--aktiv { box-shadow: 0 0 0 0.8mm var(--plakat-farbe); }
.plakat__bild--bearbeiten { box-shadow: 0 0 0 0.8mm var(--plakat-farbe); cursor: grab; }
.plakat__bild--bearbeiten:active { cursor: grabbing; }
.plakat__titelbild { flex: 1 1 auto; min-height: 62mm; }
.plakat__band { position: absolute; top: 10mm; right: -16mm; padding: 2.2mm 20mm; transform: rotate(35deg); background: var(--plakat-farbe); box-shadow: 0 1mm 3mm var(--farbe-schatten); font-size: 11pt; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--farbe-weiss); pointer-events: none; }
.plakat__band--verkauft { background: var(--farbe-dunkel); }
.plakat__titelblock { display: contents; }
.plakat__kopftext { flex: none; position: relative; text-align: center; }
.plakat__kicker { display: inline-block; margin-bottom: 1.6mm; font-size: 8pt; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--plakat-farbe); }
.plakat__titel { max-height: 2.56em; margin: 0; padding: 0.06em 0 0.1em; overflow: hidden; font-family: var(--schrift-display); font-size: 26pt; font-weight: 700; line-height: 1.2; letter-spacing: -0.022em; }
.plakat__info { display: contents; }
.plakat__fakten { position: relative; flex: none; display: grid; padding: 2mm 0; }
.plakat__fakt { padding: 0 2mm; border-left: 0.25mm solid var(--plakat-linie); text-align: center; }
.plakat__fakt:first-child { border-left: 0; }
.plakat__wert { font-size: 15pt; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.plakat__fakten--dicht .plakat__wert { font-size: 13pt; }
.plakat__bezeichnung { margin-top: 0.6mm; font-size: 7.2pt; letter-spacing: 0.02em; color: var(--plakat-grau); }
.plakat__waehlen { position: absolute; left: 50%; top: -2.6mm; padding: 1.2mm 3mm; transform: translateX(-50%); opacity: 0; border: 0; border-radius: var(--rundung-pille); background: var(--farbe-akzent-hell); font: inherit; font-size: 7.5pt; font-weight: 600; white-space: nowrap; color: var(--farbe-akzent); cursor: pointer; transition: opacity var(--dauer-kurz); }
.plakat__fakten:hover .plakat__waehlen, .plakat__fakten:focus-within .plakat__waehlen { opacity: 1; }
.plakat__reihe { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; height: 37mm; }
.plakat__highlights { flex: none; display: grid; padding: 1mm 0; }
.plakat__highlight { padding: 0 1.5mm; text-align: center; }
.plakat__highlight svg { display: block; width: 7mm; height: 7mm; margin: 0 auto 1.4mm; color: var(--plakat-farbe); }
.plakat__highlight span { font-size: 7.2pt; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-grau-dunkel); }
.plakat__highlights-leer { padding: 3mm; font-size: 9pt; text-align: center; color: var(--farbe-grau); }
/* Bildreihe oben: Bilder oben, dann Titel, Info-Karte, Preis, Kontakt */
.plakat--reihe-oben .plakat__info { flex: none; display: flex; flex-direction: column; padding: 3.4mm 5mm; background: var(--farbe-weiss); border: 0.25mm solid var(--plakat-linie); border-radius: 2.6mm; }
.plakat--reihe-oben .plakat__fakten { padding: 0 0 3.4mm; border-bottom: 0.25mm solid var(--plakat-linie); }
.plakat--reihe-oben .plakat__highlights { padding: 3.4mm 0 0; }
.plakat--reihe-oben .plakat__kopftext { margin-top: 1.5mm; }
.plakat--reihe-oben .plakat__pflicht { order: 2; padding-top: 0; border-top: 0; }
.plakat--reihe-oben .plakat__fuss { order: 3; }
.plakat__pflicht { flex: none; padding: 1.8mm 0.5mm 0.5mm; border-top: 0.25mm solid var(--plakat-linie); font-size: 6.6pt; line-height: 1.45; text-align: center; color: var(--plakat-grau); }
.plakat__pflicht b { font-weight: 600; color: var(--farbe-dunkel); }
.plakat__energie { padding: 0.3mm 0.6mm; }
/* Preis-Etikett auf dem Titelbild – Provision steht direkt beim Preis (BGH III ZR 62/11) */
.plakat__preis { position: absolute; left: 5mm; bottom: 5mm; z-index: 2; display: flex; flex-direction: column; padding: 2.6mm 5mm 2.8mm; border-radius: 2.4mm; background: var(--farbe-weiss); box-shadow: 0 1.2mm 5mm var(--farbe-schatten); }
.plakat__preis--rechts { left: auto; right: 5mm; align-items: flex-end; text-align: right; }
.plakat__preis small { font-size: 7pt; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plakat-grau); }
.plakat__preis b { font-size: 21pt; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--plakat-farbe); }
.plakat__preis span { font-size: 8pt; color: var(--plakat-grau); }
.plakat__preis span:empty { display: none; }
.plakat__preis em { margin-top: 0.6mm; font-size: 6.8pt; font-style: normal; color: var(--plakat-grau); }
.plakat__preis--umgekehrt { background: var(--plakat-farbe); }
.plakat__preis--umgekehrt b { color: var(--farbe-weiss); }
.plakat__preis--umgekehrt small, .plakat__preis--umgekehrt span, .plakat__preis--umgekehrt em { color: color-mix(in srgb, var(--farbe-weiss) 80%, transparent); }
.plakat__fuss { flex: none; display: grid; grid-template-columns: 1.25fr 1fr auto; gap: 5mm; align-items: center; padding: 3.6mm 4.5mm; background: var(--farbe-weiss); border: 0.25mm solid var(--plakat-linie); border-radius: 2.6mm; }
.plakat__makler { display: flex; align-items: center; gap: 3.6mm; padding: 1mm; }
.plakat__avatar { flex: none; width: 17mm; height: 17mm; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: var(--farbe-profilbild); font-size: 13pt; font-weight: 700; color: var(--farbe-weiss); }
.plakat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.plakat__klein { font-size: 7.2pt; line-height: 1.5; color: var(--plakat-grau); }
.plakat__name { margin: 0 0 0.8mm; font-size: 10pt; font-weight: 700; color: var(--plakat-text); }
.plakat__firma { padding-left: 5mm; border-left: 0.25mm solid var(--plakat-linie); }
.plakat__firma b { display: block; margin-bottom: 0.4mm; font-size: 8pt; font-weight: 600; color: var(--plakat-text); }
.plakat__qr { padding: 1mm; text-align: center; }
.plakat__qrcode { width: 21mm; height: 21mm; margin: 0 auto; }
.plakat__qrcode img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
/* Direkt im Aushang bearbeiten */
.plakat [data-edit] { outline: none; border-radius: 1mm; cursor: text; transition: background var(--dauer-kurz), box-shadow var(--dauer-kurz); }
.plakat [data-edit]:hover { box-shadow: 0 0 0 0.5mm var(--farbe-akzent-zart-stark); }
.plakat [data-edit]:focus { box-shadow: 0 0 0 0.6mm var(--farbe-akzent); background: var(--farbe-akzent-zart); }
.plakat__preis--umgekehrt [data-edit]:hover, .plakat__preis--umgekehrt [data-edit]:focus { box-shadow: 0 0 0 0.5mm var(--glas-hell); background: var(--glas-zart); }
.plakat__klickbar { border-radius: 1.5mm; cursor: pointer; transition: box-shadow var(--dauer-kurz); }
.plakat__klickbar:hover { box-shadow: 0 0 0 0.5mm var(--farbe-akzent-zart-stark); }
.plakat__fehlt, .plakat__preis.plakat__fehlt { box-shadow: 0 0 0 0.6mm var(--farbe-achtung) !important; background: var(--farbe-achtung-hell); }
.plakat__tauschen { position: absolute; left: 50%; top: 50%; padding: 2.2mm 4.5mm; transform: translate(-50%, -50%); opacity: 0; border: 0; border-radius: var(--rundung-pille); background: var(--glas-foto); box-shadow: var(--schatten-schwebend); font: inherit; font-size: 9pt; font-weight: 600; white-space: nowrap; color: var(--farbe-dunkel); cursor: pointer; transition: opacity var(--dauer-kurz); }
.plakat__bild:hover .plakat__tauschen, .plakat__bild--aktiv .plakat__tauschen { opacity: 1; }
.plakat__bildleiste { position: absolute; left: 50%; bottom: 2.5mm; z-index: 3; display: none; align-items: center; gap: 1mm; padding: 1mm 1.2mm 1mm 3mm; transform: translateX(-50%); border-radius: var(--rundung-pille); background: var(--glas-foto); box-shadow: var(--schatten-schwebend); white-space: nowrap; }
.plakat__bild--bearbeiten .plakat__bildleiste { display: flex; }
.plakat__reihe .plakat__bildleiste span { display: none; }
.plakat__bildleiste span { margin-right: 1.5mm; font-size: 7pt; color: var(--farbe-grau); }
.plakat__bildleiste button { min-width: 6.5mm; height: 6.5mm; padding: 0 2mm; border: 0; border-radius: var(--rundung-pille); background: var(--farbe-grau-hell); font: inherit; font-size: 9pt; font-weight: 600; color: var(--farbe-dunkel); cursor: pointer; }
.plakat__bildleiste button[data-a="swap"] { background: var(--farbe-akzent); font-size: 7.5pt; color: var(--farbe-weiss); }
.plakat__bild--mit-bild:not(.plakat__bild--bearbeiten):hover::after { content: "Klicken zum Bearbeiten"; position: absolute; left: 50%; top: 50%; padding: 2mm 4mm; transform: translate(-50%, -50%); border-radius: var(--rundung-pille); background: var(--glas-foto); box-shadow: var(--schatten-schwebend); font-size: 8.5pt; font-weight: 600; white-space: nowrap; color: var(--farbe-dunkel); pointer-events: none; }
@media (max-width: 900px) {
  .aushang-editor { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .aushang-leiste { max-height: 40vh; }
}

/* Drucken = PDF: nur die Kopie des Aushangs, genau eine A4-Seite */
.druckbereich { display: none; }
@page aushang { size: A4; margin: 0; }
@media print {
  body:has(> .druckbereich--aktiv) > :not(.druckbereich) { display: none !important; }
  body:has(> .druckbereich--aktiv) { background: var(--farbe-weiss); }
  .druckbereich--aktiv { display: block; page: aushang; }
  .druckbereich .plakat { box-shadow: none; }
  .druckbereich .plakat__tauschen, .druckbereich .plakat__bildleiste, .druckbereich .plakat__waehlen,
  .druckbereich .plakat__ohne-bild, .druckbereich .plakat__highlights-leer { display: none !important; }
  .druckbereich .plakat__bild::after { content: none !important; }
  .druckbereich [data-edit], .druckbereich .plakat__klickbar, .druckbereich .plakat__bild, .druckbereich .plakat__fehlt { box-shadow: none !important; }
  .druckbereich .plakat__fehlt:not(.plakat__preis) { background: none; }
}


/* ---------- 23. Ruhige Animationen ---------- */
@view-transition { navigation: auto; }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.einblenden { animation: einblenden 500ms var(--kurve) both; }
.einblenden--2 { animation-delay: 60ms; }
.einblenden--3 { animation-delay: 120ms; }
.einblenden--4 { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}

/* Ladezustände bei ruhiger Bewegung – steht nach der allgemeinen Regel oben, damit das langsame Pulsieren bleibt */
/* Ruhige Bewegung gewünscht: kein Streifen, kein Scan, kein Drehen – nur langsames Pulsieren und ruhiges Leuchten */
@media (prefers-reduced-motion: reduce) {
  .ki-laden, .scan-laden, .platzhalter__zeile, .platzhalter__block, .button--laedt::before, .blase--tippt > span:not(.nur-vorlesen) {
    animation: lade-puls var(--lade-puls-dauer) var(--lade-kurve) infinite !important;
  }
  .ki-laden { box-shadow: inset 0 0 0 2px var(--lade-glimmen), inset 0 0 20px var(--lade-glimmen-weich); }
  .ki-laden::after, .scan-laden::after, .scan-laden::before, .platzhalter__zeile::after, .platzhalter__block::after, .button--laedt:not(.button--fortschritt)::after { display: none; }
  .button--fortschritt::after { transition: none; } /* Füllung springt in Stufen statt zu gleiten */
  .scan-laden { box-shadow: inset 0 0 0 2px var(--lade-glimmen); }
  .grundriss__skelett-raum { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
  .grundriss__ring-wert { transition: none; }
}
@keyframes lade-puls { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }