/* HaushaltMGM — Knotenpunkt und Anmeldung.
   Der Grund ist derselbe Anthrazit mit feinem Rauschen, den MampfMGM nachts
   trägt; LadeMGM liegt mit #0F1117 fast auf demselben Ton. Der Hub
   sitzt mit #101219 dazwischen und gehört so zu beiden. */

:root {
  --grund: #101219;
  --flaeche: #191C25;
  --linie: rgba(236, 237, 242, .12);
  --text: #ECEDF2;
  --gedaempft: #8A91A3;
  --leise: #6E7587;
  --gruen: #10B981;
  --warnung: #EE7A62;
  --achtung: #F0B429;

  --rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");

  /* Radius der Bahn und Größe der Zeichen wachsen mit dem Bildschirm
     (Prozentskalierung, 16.09.2026). Bis dahin gab es zwei feste Stufen: am
     Handy 152 px Radius und 84 px Kacheln, ab 900 px Breite 310 und 128. Ein
     Tablet hochkant (800 px breit) bekam damit die Handygröße - ein kleines
     Mobile mitten auf einem großen Schirm. Quer bei 800 px Höhe schnitt das
     Feld den Namen der unteren Kachel ab.
     Jetzt gilt, was knapper ist: die halbe Höhe, die nach Kopfzeile und
     Etiketten bleibt, oder die Breite, in die die beiden seitlichen Kacheln
     passen müssen (sie sitzen bei 40 Grad, cos 40° = 0,77). Kacheln und Mitte
     sind Anteile des Radius. Am Handy kommt dabei fast dasselbe heraus wie
     vorher (390 px breit: 159, 83, 112). */
  --r: clamp(84px, min((100svh - 180px) * .5, 46vw - 20px), 380px);
  --satellit: max(56px, calc(var(--r) * .52));
  --mitte: calc(var(--satellit) * 1.35);
  /* Platz unter einer Kachel: Name und Ampel, mit Tastatur auch die Taste. */
  --etikett: 62px;
}

@media (min-width: 900px) and (hover: hover) {
  :root { --etikett: 90px; }
}

* { box-sizing: border-box; }

/* Keine Scrollbalken - in keiner App des Hauses (15.09.2026). Gerollt wird
   trotzdem, mit Finger, Rad und Tastatur. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* min-height, nicht height: Mit height:100% wächst der Rumpf nicht mit dem
   Inhalt. Was darüber hinausging, stand außerhalb — sichtbar abgeschnitten
   und ohne Möglichkeit, dorthin zu rollen. */
html, body { min-height: 100%; }

/* Die äußere Bahn ist absichtlich breiter als der Bildschirm. Ohne diese
   Bremse macht sie die ganze Seite breiter, und das Handy lässt einen zur
   Seite schieben — das sieht aus, als sei alles zu groß. */
body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--rauschen) var(--grund);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }

/* ── Anmeldung ─────────────────────────────────────────────────────────── */

.anmeldung {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 42%, rgba(150, 166, 214, .13), transparent 58%);
}

.anmeldung .marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.anmeldung .marke svg {
  border-radius: 25px;
  box-shadow: 0 0 0 1px rgba(236, 237, 242, .10), 0 20px 50px rgba(0, 0, 0, .6);
}

.wortmarke {
  font-family: Fraunces, Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.anmeldung form {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.feld label {
  font-size: 12.5px;
  color: var(--gedaempft);
  padding-left: 2px;
}

.feld input {
  height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--text);
  /* 16px, damit iOS beim Hineintippen nicht hineinzoomt. */
  font-size: 16px;
  font-family: inherit;
}

.feld input:focus {
  outline: none;
  border-color: rgba(236, 237, 242, .34);
  background: #1D212C;
}

.anmeldung button[type="submit"] {
  height: 52px;
  margin-top: 6px;
  border: none;
  border-radius: 14px;
  background: #ECEDF2;
  color: #16181F;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.anmeldung button[type="submit"]:active { background: #CFD2DC; }

.fehler {
  font-size: 13px;
  color: var(--warnung);
  text-align: center;
  margin: 0;
}

.fusszeile {
  font-size: 12px;
  color: var(--leise);
  text-align: center;
  max-width: 300px;
  text-wrap: pretty;
  margin: 0;
}

/* ── Knotenpunkt ───────────────────────────────────────────────────────── */

.hub {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 53%, rgba(150, 166, 214, .13), transparent 58%);
}

.kopf {
  width: 100%;
  max-width: 1180px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--gedaempft);
}

.punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gruen);
  flex: none;
}

.rund {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: none;
  color: var(--gedaempft);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.rund:hover { color: var(--text); border-color: rgba(236, 237, 242, .28); }

/* Das Feld, in dem die Bahn liegt. Es ist mindestens so hoch wie die Gruppe
   aus Hauszeichen, Kacheln und Etiketten - nicht wie der ganze Kreis: Die
   Kacheln hängen alle unter der Mitte, die obere Hälfte der Bahn ist nur
   Zeichnung und darf angeschnitten sein. */
.bahnfeld {
  position: relative;
  flex-grow: 1;
  width: 100%;
  min-height: calc(var(--mitte) * .5 + var(--r) + var(--satellit) * .5 + var(--etikett) + 12px);
  /* Wo die Mitte steht: so, dass die Gruppe senkrecht mittig im Feld liegt.
     Mit der Mitte auf 50 % blieb oben leerer Raum, und unten wurde es eng. */
  --y: calc(50% - (var(--r) + var(--satellit) * .5 + var(--etikett) - var(--mitte) * .5) / 2);
  display: grid;
  place-items: center;
  /* Schneidet die äußere Bahn am Rand ab, statt die Seite zu verbreitern. */
  overflow: hidden;
}

.bahn, .speiche, .mitte, .satellit { position: absolute; }

.bahn {
  left: 50%;
  top: var(--y);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.bahn.innen {
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border: 1px dashed rgba(236, 237, 242, .13);
}

/* Die äußere Bahn ist angeschnitten: dort ist Platz für eine dritte App. */
.bahn.aussen {
  width: calc(var(--r) * 2.82);
  height: calc(var(--r) * 2.82);
  border: 1px solid rgba(236, 237, 242, .055);
}

.speiche {
  left: 50%;
  top: var(--y);
  width: var(--r);
  height: 1.2px;
  transform-origin: 0 50%;
  transform: rotate(var(--w));
  pointer-events: none;
}

.mitte {
  left: 50%;
  top: var(--y);
  width: var(--mitte);
  height: var(--mitte);
  transform: translate(-50%, -50%);
  border-radius: calc(var(--mitte) * .22);
  box-shadow: 0 0 0 1px rgba(236, 237, 242, .10),
              0 20px 50px rgba(0, 0, 0, .6),
              0 0 60px rgba(150, 166, 214, .10);
}

.mitte svg { display: block; width: 100%; height: 100%; }

.satellit {
  left: 50%;
  top: var(--y);
  width: var(--satellit);
  height: var(--satellit);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: calc(var(--satellit) * .22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 38px var(--schein);
  transform: translate(-50%, -50%) rotate(var(--w)) translate(var(--r)) rotate(calc(-1 * var(--w)));
  transition: box-shadow .2s ease;
}

.satellit:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 56px var(--schein); }
.satellit:active { box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 30px var(--schein); }
.satellit:focus-visible { outline: 2px solid rgba(236, 237, 242, .5); outline-offset: 6px; }

.satellit > svg { display: block; width: 100%; height: 100%; }

.etikett {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* Der Name wächst mit der Kachel. Untergrenze 13,5 px: Auf schmalen Geräten
   reicht der Platz neben "LadeMGM" sonst nicht - der Name steht in einem
   Stück und kann nicht umbrechen. */
.etikett .name {
  font-size: clamp(13.5px, calc(var(--satellit) * .12 + 3.5px), 19px);
  font-weight: 500;
  letter-spacing: -.01em;
}

.etikett .zustand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--gedaempft);
}

.etikett .zustand i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--leise);
  transition: background .35s ease;
}
/* Die Ampel unter der Kachel. Grün heißt: ein fremdes Netz hat uns eben
   noch gesehen. Alles andere heißt, dass vom Handy unterwegs nichts
   ankommt — die Auskunft, die am 07.09.2026 den ganzen Tag gefehlt hat. */
.zustand.gruen   i { background: var(--gruen); }
.zustand.achtung i { background: var(--achtung); }
.zustand.rot     i { background: var(--warnung); }
.zustand.grau    i { background: var(--leise); }
.etikett .zustand.achtung,
.etikett .zustand.rot { color: var(--text); }

/* Dieselbe Ampel oben in der Kopfzeile, für den Knotenpunkt selbst. */
.kopf .status .zustand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 9px;
  padding-left: 9px;
  border-left: 1px solid var(--linie);
}

.taste {
  margin-top: 3px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  border: 1px solid var(--linie);
  background: rgba(236, 237, 242, .04);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--gedaempft);
}

/* Die Taste nur, wo es eine Tastatur gibt. Ein Tablet quer ist breiter als
   900 px, hat aber keine - dort war sie nur ein Kästchen, das unter der
   Kachel Platz nahm. */
@media (min-width: 900px) and (hover: hover) {
  .taste { display: flex; }
}

/* Der Knopf bleibt verborgen, bis der Browser das Installieren wirklich
   anbietet — sonst stünde dort einer, der nichts tut. */
.installieren {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px;
  margin-bottom: 18px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: rgba(236, 237, 242, .04);
  color: var(--gedaempft);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.installieren[hidden] { display: none; }
.installieren:hover { color: var(--text); border-color: rgba(236, 237, 242, .28); }
.installieren:active { background: rgba(236, 237, 242, .08); }

.anleitung {
  max-width: 300px;
  margin: -8px 0 18px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--gedaempft);
  text-align: center;
  text-wrap: pretty;
}

.anleitung b { color: var(--text); font-weight: 600; }

.anleitung .pruefung {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--leise);
  text-align: left;
}

.anleitung .pruefung b { color: var(--warnung); }

.hinweis {
  max-width: 320px;
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  color: var(--leise);
  text-wrap: pretty;
}

@media (min-width: 900px) {
  .hinweis { max-width: 620px; font-size: 12.5px; }
}

/* ── Ladeanimation ─────────────────────────────────────────────────────── */

.laden {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  width: 100%;
  cursor: pointer;
  animation: einblenden .3s ease-out;
}

.laden[hidden] { display: none; }

.laden .kranz {
  position: relative;
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
}

@media (min-width: 900px) {
  .laden .kranz { width: 260px; height: 260px; }
}

.laden .schein {
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 22%;
  filter: blur(26px);
  animation: atmen 1.9s ease-in-out infinite;
}

.laden .ring { position: absolute; inset: 0; width: 100%; height: 100%; }

.laden .ring .bahn2 { stroke: rgba(236, 237, 242, .08); }

.laden .ring .zug {
  stroke-dasharray: 128 450;
  animation: ziehen 1.5s linear infinite;
}

.laden .zeichen {
  width: var(--mitte);
  height: var(--mitte);
  animation: heranziehen .46s cubic-bezier(.2, .8, .2, 1);
}

.laden .zeichen svg { display: block; width: 100%; height: 100%; }

.laden .titel {
  font-family: Fraunces, Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-top: 34px;
}

@media (min-width: 900px) { .laden .titel { font-size: 30px; } }

.laden .lage { font-size: 13px; color: #9198AA; margin-top: 9px; }

.laden .abbruch {
  position: absolute;
  bottom: calc(58px + env(safe-area-inset-bottom));
  font-size: 11.5px;
  color: #5E6577;
}

.laden .lage.stockt { color: var(--warnung); }

@keyframes einblenden { from { opacity: 0 } to { opacity: 1 } }
@keyframes heranziehen {
  from { transform: scale(.58) translateY(128px); opacity: 0 }
  to { transform: none; opacity: 1 }
}
@keyframes atmen {
  0%, 100% { transform: scale(.88); opacity: .10 }
  50% { transform: scale(1.10); opacity: .30 }
}
@keyframes ziehen { from { stroke-dashoffset: 0 } to { stroke-dashoffset: -578 } }

@media (prefers-reduced-motion: reduce) {
  .laden, .laden .zeichen, .laden .schein { animation: none !important; }
  .laden .ring .zug { animation-duration: 3s }
}

/* ── Vollbild ──────────────────────────────────────────────────────────── */

.buehne {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--grund);
  /* KEINE Animation mehr (16.09.2026). Sie hob die Bühne von scale(.94) auf 1.
     Steht das Blatt beim Öffnen gerade still - weil die Seite verborgen ist,
     aus dem Hintergrund zurückkommt oder das Gerät die Zeitleiste anhält -,
     dann bleibt die Bühne auf 94 %: ringsum drei Prozent Rand, unten also ein
     Streifen wie eine fremde Leiste, und KEIN Polster in einer App bekommt den
     je weg. Hier am Rechner mit verborgenem Blatt nachgestellt: 592 statt 630
     Pixel hoch, 19 Pixel oben und unten. Den Übergang macht ohnehin schon der
     Ladebildschirm davor. */
  /* Der Knotenpunkt liegt randlos (viewport-fit=cover). Der Rahmen oben
     nicht: Eine App, die die Statusleiste nicht kennt, legt ihre Kopfzeile
     sonst darunter - samt Plus-Knopf, der dann nicht mehr zu treffen ist.
     Genau das ist am 16.09.2026 passiert, als dieses Polster einmal weg war
     und auf dem Handy noch der alte, zwischengespeicherte Stand von
     MampfMGM lief.

     Deshalb ist das Polster der REGELFALL und die App muss es abbestellen:
     Wer den oberen Abstand selbst verarbeitet, meldet "rand-an", und erst
     dann nimmt der Knotenpunkt es für diesen Rahmen weg (hub.html, "Die
     Ränder oben und unten"). Unten liegt kein Polster mehr - dort verdeckte
     es seit dem 15.09.2026 nichts, es blieb nur ein Streifen stehen.

     Links und rechts bleibt es immer: Dort liegt quer die Kerbe, und damit
     rechnet keine der Apps. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           0 env(safe-area-inset-left);
}

.buehne[hidden] { display: none; }

/* Im Fluss, nicht absolut: ein absolut gesetztes Kind richtet sich nach der
   Außenkante der Bühne und übergeht ihr Polster. So lag MampfMGMs Kopfzeile
   samt Plus-Knopf seit dem ersten Stand doch unter der Statusleiste des
   iPhones. Sichtbar ist ohnehin immer nur ein Rahmen (.vorn). */
.buehne iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: none;
}

.buehne iframe.vorn { display: block; }

/* Der schwebende Zurück-Knopf ist entfallen: Zurück geht es über Zeichen und
   Namen der App selbst. Ein Knopf, der über allem liegt, verdeckt immer
   irgendetwas. */

/* ── Die Tafel: Einstellungen hinter dem Logo ──────────────────────────────
   Sie liegt ueber allem, aber nicht auf der ganzen Flaeche: Am Handy ein
   Blatt von unten, am Rechner ein Kasten in der Mitte. Der Grund dahinter
   bleibt sichtbar und dunkel - man soll merken, dass man nur kurz
   danebengetreten ist und nicht die Seite verlassen hat. */
.mitte { padding: 0; border: none; background: none; cursor: pointer; }
.mitte:hover { box-shadow: 0 0 0 1px rgba(236, 237, 242, .18),
                           0 20px 50px rgba(0, 0, 0, .6),
                           0 0 76px rgba(150, 166, 214, .16); }
.mitte:focus-visible { outline: 2px solid rgba(236, 237, 242, .5); outline-offset: 6px; }

.tafel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 9, 13, .72);
  animation: einblenden .2s ease-out;
}

/* Ohne diese Zeile bliebe die Tafel immer offen: display:flex aus der Regel
   darueber schlaegt das display:none, das der Browser einem [hidden] gibt.
   Dieselbe Zeile steht bei .laden und .buehne - genau aus dem Grund. */
.tafel[hidden] { display: none; }

@media (min-width: 700px) { .tafel { align-items: center; } }

.tafel-blatt {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 18px 18px 0 0;
  padding: 20px 20px 28px;
}

@media (min-width: 700px) { .tafel-blatt { border-radius: 18px; } }

.tafel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.tafel-titel { font-size: 1.05rem; font-weight: 600; }

.tafel-zu {
  border: none;
  background: none;
  color: var(--gedaempft);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}
.tafel-zu:hover { color: var(--text); background: rgba(236, 237, 242, .06); }

.tafel-teil h2 {
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

.tafel-lage { margin: 0 0 14px; font-size: .9rem; line-height: 1.5; }
.tafel-lage.gut { color: var(--gruen); }
.tafel-lage.schlecht { color: var(--warnung); }

.tafel-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

.knopf {
  border: 1px solid transparent;
  background: var(--text);
  color: var(--grund);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: 11px 16px;
  border-radius: 10px;
  cursor: pointer;
}
.knopf:hover { opacity: .9; }
.knopf:disabled { opacity: .45; cursor: default; }
.knopf.leise {
  background: none;
  color: var(--text);
  border-color: var(--linie);
  font-weight: 500;
}
.knopf.leise:hover { background: rgba(236, 237, 242, .06); }

.tafel-liste { list-style: none; margin: 16px 0 0; padding: 0; }
.tafel-liste li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--linie);
  font-size: .84rem;
}
.tafel-liste .wer { color: var(--text); }
.tafel-liste .wann { color: var(--leise); white-space: nowrap; }

.tafel-fussnote {
  margin: 16px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--leise);
}

/* Eine Zeile je Geraet: oben wer und seit wann, darunter die Haekchen. */
.tafel-liste li.geraet {
  display: block;
  padding: 14px 0;
}

.geraet-kopf {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.geraet-warnung {
  font-size: .76rem;
  line-height: 1.45;
  color: var(--achtung);
  margin: 0 0 8px;
}

.haken {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.haken label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--gedaempft);
  cursor: pointer;
}

.haken input { accent-color: var(--gruen); width: 16px; height: 16px; }

.tafel-ruhe {
  margin: 14px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--achtung);
}