@charset "UTF-8";
/* ============================================================
   Das Haus
   ============================================================

   Das Zeichen des Betriebs ist ein Haus mit Sprechblasenzipfel.
   Hier wird es benutzt, wofür es steht: Das Gebäude sagt selbst,
   woran zu arbeiten ist. Jedes Bauteil ist ein Verweis.

   ZWEITER AUFBAU, 23.08.2026. Bis dahin war das Haus gezeichnet:
   flache Farbflächen mit schwarzer Kontur, gerechnet von
   haus_bauen.py. Sauber, aber es sah nach Piktogramm aus. Jetzt
   steht dort ein Foto, und die sieben Bauteile liegen als
   unsichtbare Flächen darüber.

   Daraus folgt der ganze Rest dieser Datei. Beim gezeichneten Haus
   konnte das angefasste Bauteil einfach seine Farbe wechseln. Auf
   einem Foto sieht man an einer gefärbten Fläche vor allem, wo sie
   die Kontur verfehlt. Also bleibt sie unsichtbar und ist nur die
   Klickfläche; sichtbar reagiert der Punkt mit seiner Sprechblase.

   Die Geometrie steht in teile/haus.php und wird von haus_bauen.py
   gerechnet. Hier stehen ausschliesslich Farbe, Zustand und
   Übergang.

   Ohne JavaScript vollständig bedienbar: Es sind echte <a> im SVG,
   sie nehmen Tabulator und Eingabetaste, und jedes trägt ein
   <title>. Die Liste darunter zeigt dieselben sieben Verweise als
   Text · sie ist am Telefon die Hauptdarstellung und nicht der
   Notnagel.
   ============================================================ */

.hausfeld {
  display: grid;
  gap: var(--luft-mittel);
  /*
   * minmax(0, 1fr) und NICHT 1fr.
   *
   * 1fr heisst minmax(auto, 1fr), und auto ist beim Bild seine
   * Eigenbreite von 2384 Punkten. Am Telefon sprengt das die Spalte,
   * und die ganze Seite lässt sich seitlich schieben · sichtbar nur
   * daran, dass rechts Text abgeschnitten ist.
   */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.hausfeld__bild { min-width: 0; }

@media (min-width: 62rem) {
  .hausfeld { grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 1fr); gap: var(--luft-gross); }
}

/* ─── Bild und Netz ───────────────────────────────────────────

   Das Bild ist ein gewöhnliches <img> und kein <image> im SVG.
   Der Unterschied ist srcset: Am Telefon lädt es 84 kB, am
   Schreibtisch mit doppelter Punktdichte 245 kB. Ein <image> im
   SVG kennt nur eine einzige Adresse und lüde überall die grosse.

   Das SVG liegt deckungsgleich darüber. Beide tragen dasselbe
   Seitenverhältnis, deshalb sitzen die Flächen in jeder Breite auf
   ihrem Bauteil.
   ──────────────────────────────────────────────────────────── */

.haus {
  position: relative;
  display: block;
}

.haus__foto {
  display: block;
  width: 100%;
  height: auto;
}

.haus__netz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;   /* die Fahnen dürfen über den Rand ragen */
  /*
   * Das Netz selbst fängt nichts ab. Ohne diese Zeile liegt über
   * dem ganzen Bild eine unsichtbare Scheibe: Der Zeiger steht
   * dann überall auf dem SVG und nirgends auf dem Foto.
   */
  pointer-events: none;
}

.haus__teil { pointer-events: auto; }

/* ─── Die Flächen sind unsichtbar ─────────────────────────────

   ZWEITER ANLAUF, 23.08.2026. Zuerst färbte sich das angefasste
   Bauteil türkis ein, wie beim gezeichneten Haus. Eike sah es
   sofort: „die Bereiche gucken raus und es passt nicht ganz."

   Das ist kein Messfehler, sondern die Sache selbst. Ein Vieleck
   trifft die Kontur eines Fotos nie ganz · nicht an einer
   Dachziegelkante, nicht an einer Markise mit Volant, und schon gar
   nicht in jeder Bildbreite. Sichtbar wird an so einer Fläche immer
   nur die Abweichung.

   Also bleibt sie unsichtbar. Sie ist die Klickfläche und sonst
   nichts, und dort darf sie großzügig sein. Sichtbar reagiert
   allein der Punkt, der auf dem Bauteil sitzt: Er dreht seine
   Farben um, bekommt einen Hof, und die Sprechblase klappt auf.
   Was gemeint ist, sagt der Name in der Blase · genauer als jede
   Umrandung.

   `fill` darf NICHT `none` sein. Eine Fläche ohne Füllung nimmt
   keine Zeigerereignisse an, und dann ist das Haus nicht mehr
   anklickbar. Unsichtbar wird sie über die Deckkraft.
   ──────────────────────────────────────────────────────────── */

.haus__flaeche {
  fill: #ffffff;
  fill-opacity: 0;
  stroke: none;
}

/* ─── Angefasst ─────────────────────────────────────────────── */

/*
 * Der Tastaturweg braucht mehr als der Zeiger: Wer mit dem
 * Tabulator kommt, sieht keinen Mauszeiger und muss am Bild selbst
 * erkennen, wo er steht. Hier ist die Umrandung deshalb richtig,
 * auch wenn sie nicht auf den Punkt sitzt · sie ersetzt den
 * Fokusrahmen, den es sonst nirgends gäbe.
 */
.haus__teil:focus-visible .haus__flaeche {
  fill-opacity: 0.22;
  stroke: var(--tinte);
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ─── Punkte und Sprechblasen ─────────────────────────────── */

/*
 * Beide liegen in einer eigenen Ebene ganz zum Schluss, nicht im
 * <a> des Bauteils. Sonst malte die Wärmepumpe die Fahne der
 * Fassade wieder zu · die Malreihenfolge im SVG ist die Reihenfolge
 * im Quelltext, und ein z-index gibt es dort nicht.
 *
 * Die Ebene nimmt keine Zeigerereignisse an. Läge sie vor dem
 * Verweis, den sie beschriftet, wäre das Bauteil ausgerechnet an
 * der Stelle des Punktes nicht mehr anklickbar.
 */
.haus__marken { pointer-events: none; }

/*
 * --an ist der Zustand: 0 in Ruhe, 1 angefasst. CSS kann den Namen
 * des Bauteils nicht in die Marke tragen, deshalb steht jedes der
 * sieben zweimal da. Der Umweg über eine Zahl spart die zweite und
 * dritte Wiederholung derselben Liste.
 */
.haus__marken [data-marke] {
  --an: 0;
  transition: opacity 120ms ease-out;
}

.haus:has(.haus__teil[data-teil="dach"]:hover)         [data-marke="dach"],
.haus:has(.haus__teil[data-teil="dach"]:focus-visible) [data-marke="dach"],
.haus:has(.haus__teil[data-teil="fassade"]:hover)         [data-marke="fassade"],
.haus:has(.haus__teil[data-teil="fassade"]:focus-visible) [data-marke="fassade"],
.haus:has(.haus__teil[data-teil="fenster"]:hover)         [data-marke="fenster"],
.haus:has(.haus__teil[data-teil="fenster"]:focus-visible) [data-marke="fenster"],
.haus:has(.haus__teil[data-teil="sonne"]:hover)         [data-marke="sonne"],
.haus:has(.haus__teil[data-teil="sonne"]:focus-visible) [data-marke="sonne"],
.haus:has(.haus__teil[data-teil="lueftung"]:hover)         [data-marke="lueftung"],
.haus:has(.haus__teil[data-teil="lueftung"]:focus-visible) [data-marke="lueftung"],
.haus:has(.haus__teil[data-teil="wb"]:hover)         [data-marke="wb"],
.haus:has(.haus__teil[data-teil="wb"]:focus-visible) [data-marke="wb"],
.haus:has(.haus__teil[data-teil="wp"]:hover)         [data-marke="wp"],
.haus:has(.haus__teil[data-teil="wp"]:focus-visible) [data-marke="wp"] { --an: 1; }

/*
 * Der Hof ist der Ring, der beim Anfassen aufgeht. Er liegt hinter
 * dem Punkt und waechst nach aussen, weil eine Linie zur Haelfte
 * ausserhalb ihres Pfades liegt. Damit ist der Punkt auch dann
 * deutlich, wenn er auf dem dunklen Dach sitzt.
 */
.haus__punkt-hof {
  fill: none;
  stroke: var(--akzent);
  stroke-width: 9;
  stroke-opacity: calc(var(--an) * 0.55);
  vector-effect: non-scaling-stroke;
  /*
   * KEIN transition auf dieser Zeile, und das ist kein Versehen.
   *
   * Steht auf einer Eigenschaft, deren Wert aus einem Eigenwert
   * kommt, zusaetzlich ein Uebergang, dann rechnet Chrome sie beim
   * Wechsel des Eigenwerts nicht neu · gemessen am 23.08.2026:
   * --an stand nachweislich auf 1, stroke-opacity blieb auf 0.
   * Ohne Uebergang greift derselbe Ausdruck sofort.
   *
   * Und nicht ueber transform vergroessern: Die Gruppe traegt
   * schon ein transform-Attribut mit ihrer Lage, die CSS-
   * Eigenschaft wuerde es ersetzen · der Punkt spraenge in die
   * linke obere Ecke.
   */
}

/*
 * Der Punkt trägt einen weissen Saum. Auf dem gezeichneten Haus
 * lag er immer auf einer bekannten Farbe, auf dem Foto liegt er
 * mal auf dunklem Dach, mal auf heller Wand.
 */
.haus__punkt-ring {
  fill: color-mix(in srgb, #1d231c calc(var(--an) * 100%), #ffffff);
  stroke: #ffffff;
  stroke-width: 2;
  stroke-opacity: 0.85;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgba(16, 20, 15, 0.35));
}
.haus__punkt-kern {
  fill: color-mix(in srgb, #ffffff calc(var(--an) * 100%), var(--akzent));
}
.haus__punkt-kreuz {
  stroke: color-mix(in srgb, #ffffff calc(var(--an) * 100%), #1d231c);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.haus__fahne-feld { overflow: visible; opacity: var(--an); }

.haus__fahne {
  display: block;
  width: max-content;
  max-width: 14.5rem;
  padding: 0.5rem 0.78rem 0.6rem;
  background: #1d231c;
  color: #ffffff;
  font: 400 0.94rem/1.3 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
/* Der Zipfel sitzt an der Ecke, an der die Fahne am Punkt hängt ·
   dieselbe Form wie im Zeichen des Betriebs. */
.haus__fahne--rechts { border-radius: 3px 13px 13px 13px; }
.haus__fahne--links  { border-radius: 13px 3px 13px 13px; margin-left: auto; }

.haus__fahne-name { display: block; font-weight: 600; }
.haus__fahne-satz {
  display: block;
  margin-top: 0.1rem;
  color: #a8e0db;
  font: 400 0.78rem/1.3 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: -0.02em;
}

/*
 * Am Telefon skaliert das ganze Bild auf ein Drittel. Eine Fahne
 * darin wäre vier Punkte hoch. Dort bleibt sie weg, und die Liste
 * darunter übernimmt · sie steht ohnehin immer da.
 */
@media (max-width: 61.9375rem) {
  .haus__fahne-feld { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .haus__marken [data-marke] { transition: none; }
}

/* ─── Die Liste neben dem Haus ────────────────────────────── */

.hausliste { margin: 0; padding: 0; list-style: none; }

.hausliste__punkt + .hausliste__punkt { border-top: 1px solid var(--linie); }

.hausliste__weg {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0 0.7rem;
  align-items: baseline;
  padding: 0.72rem 0.2rem;
  color: inherit;
  text-decoration: none;
}
.hausliste__weg:hover .hausliste__name,
.hausliste__weg:focus-visible .hausliste__name { color: var(--akzent-tinte); }

.hausliste__zahl {
  grid-row: span 2;
  align-self: center;
  font: 500 0.82rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--akzent-tinte);
  text-align: right;
}
.hausliste__name {
  font-weight: 600;
  letter-spacing: -0.015em;
}
.hausliste__satz {
  grid-column: 2;
  color: var(--tinte-leise);
  font-size: 0.92rem;
  line-height: 1.35;
}