/* ==========================================================================
   Illustrationen (js/illu.js): Linie 1,5 px, Flächen in Powder-Blau, ein Punkt in Orange.
   Bewegung dezent: Linien zeichnen sich beim Erscheinen ein, Hauptmotiv schwebt langsam.
   Beides aus bei prefers-reduced-motion und in den Einstellungen (html.ohne-bewegung).
   ========================================================================== */
.illu { display: block; width: 120px; height: 90px; flex: none; overflow: visible; }
.illu-klein { width: 72px; height: 54px; }
.illu-gross { width: 200px; height: 150px; }
.il-l, .il-b { fill: none; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.il-l { stroke: var(--ink-3); }
.il-b { stroke: var(--blue-haupt); }
.il-f { fill: var(--blue-flaeche); stroke: none; }
.il-o { fill: var(--accent); stroke: none; }
.il-gestr { stroke-dasharray: .06 .05; }
.il-z { stroke-dasharray: 1; stroke-dashoffset: 0; animation: il-zeichnen .7s var(--ease-out) both; }
.il-gestr.il-z { stroke-dasharray: .06 .05; animation: none; }
.il-schweb { animation: il-schweben 6s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes il-zeichnen { from { stroke-dashoffset: 1; opacity: .3; } }
@keyframes il-schweben { to { transform: translateY(-3px); } }
@media (hover: hover) and (pointer: fine) {
  .empty:hover .il-o, .illu:hover .il-o { transform: scale(1.15); }
  .il-o { transform-box: fill-box; transform-origin: center; transition: transform var(--dauer-2) var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) { .il-z, .il-schweb { animation: none; } .il-o { transition: none; } }
html.ohne-bewegung .il-z, html.ohne-bewegung .il-schweb { animation: none; }

/* Leerer Zustand: Illustration statt Symbolkachel */
.empty .illu { margin-bottom: 4px; }

/* Straßenschild für Adressen */
.il-schild {
  display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 14px; border-radius: var(--r-klein);
  background: var(--blue-flaeche); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink);
}
.il-schild b { font-size: var(--t-text); font-weight: var(--w-fett); letter-spacing: -.01em; }
.il-schild span { font-size: var(--t-label); color: var(--ink-2); }

/* Gebäude: Etagen als Stapel, belegt in Blau, leer gestrichelt (views/portfolio.js, Übersicht einer Immobilie) */
.geb-karte .card-head { margin-bottom: 12px; }
.geb-inhalt { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.geb-haus { display: flex; flex-direction: column; gap: 4px; flex: 1 1 280px; min-width: 0; padding-bottom: 6px; border-bottom: 1.5px solid var(--ink-3); }
.geb-etage { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: stretch; gap: 8px; }
.geb-name { align-self: center; font-size: 11px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.geb-zellen { display: flex; gap: 4px; min-width: 0; }
.geb-zelle {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  border-radius: var(--r-klein); background: var(--blue-flaeche); color: var(--ink); font-size: 12px; text-decoration: none;
  transition: background-color var(--dauer-1) ease;
}
.geb-zelle b { font-weight: var(--w-mittel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geb-zelle span { color: var(--ink-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geb-zelle.leer { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
@media (hover: hover) and (pointer: fine) { .geb-zelle:hover { background: var(--hover); } }
.geb-zelle:focus-visible { outline: none; box-shadow: var(--ring); }
.geb-seite { display: flex; flex-direction: column; gap: 10px; flex: 0 1 300px; min-width: 0; }
.geb-zl-titel { margin: 0; }

/* Offline */
.offline-leiste { position: fixed; left: 50%; top: 72px; z-index: 95; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--r-rund); background: var(--raised); box-shadow: var(--shadow-pop); font-size: var(--t-klein); color: var(--ink); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); }
.offline-leiste .illu { width: 40px; height: 30px; }

/* Illustration in Tarif, Anmeldung, Galerie */
.pro-illu { margin: 0 0 8px; }
.gal-nav .illu { margin: 16px auto 0; opacity: .9; }
@media (max-width: 760px) { .gal-nav .illu { display: none; } .geb-seite { flex-basis: 100%; } .offline-leiste { top: 62px; } }