/* navalo.at — Firmenseite und Kundenzugang.
 *
 * Eigenes Stylesheet, nicht portal.css. Das Portal ist ein Werkzeug und darf
 * nüchtern sein; diese Seite muss verkaufen. Zwei Aufgaben, zwei Handschriften
 * — und eine Änderung am Schaufenster soll dem Kunden nicht das Portal
 * verstellen.
 *
 * Ein fester Look, kein Tag- und Nachtmodus: Wer eine Firmenseite aufruft, will
 * sie so sehen, wie sie gedacht ist. Dunkle Bühne, helles Feld, dunkle Fußzeile.
 */

:root {
  --n-rot: #E11B22;
  --n-rot-hell: #F04248;      /* auf dunklem Grund, sonst verliert das Rot */
  --n-schwarz: #15171B;
  --n-schwarz-weich: #1D2026;
  --n-grund: #FFFFFF;
  --n-grund-still: #F7F6F4;
  --n-tinte: #15171B;
  --n-tinte-leise: #55585E;
  --n-tinte-still: #8A8D93;
  --n-linie: #E6E3DF;
  --n-linie-dunkel: #2C3037;

  --n-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --n-rund: 14px;
  --n-breit: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0; font-family: var(--n-sans); color: var(--n-tinte);
  background: var(--n-grund); -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; }

/* --- Marke --------------------------------------------------------------- */

/* Die ganze Marke haengt an einer einzigen Groesse: der Schriftgroesse des
   Wortes. Die Schildhoehe rechnet sich daraus, sonst laufen die beiden beim
   naechsten Aendern auseinander.
 *
 * Faktor 1.53: Das weisse N sitzt im Schild zwischen y=24 und y=76 einer
 * Zeichenflaeche von 112 - es fuellt also nur 46 % der Schildhoehe. Damit es
 * neben dem kleingeschriebenen "avalo" als Grossbuchstabe liest, muss der
 * Schild entsprechend groesser sein als die Schrift. Bei gleicher Hoehe wirkt
 * das N zu klein und das Wort rutscht optisch nach unten. */
.n-marke { display: inline-flex; align-items: center; gap: 0; line-height: 1; }
.n-marke svg { height: 1.53em; display: block; }

/* "avalo" schließt eng an das Schild-N an — der Schild IST der Anfangsbuchstabe.
   Ein Zwischenraum würde daraus zwei Zeichen machen statt einem Wort.
   Die Verschiebung nach oben gleicht aus, dass die Schildspitze unten
   weiterlaeuft, das N aber schon vorher endet. */
.n-wort {
  font-weight: 600; letter-spacing: -0.03em;
  margin-left: -0.13em; transform: translateY(-0.13em);
}

/* --- Kopfzeile ----------------------------------------------------------- */

.n-kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 26px;
  padding: 14px 28px;
  background: rgba(21, 23, 27, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: #fff;
}
.n-kopf-marke { text-decoration: none; display: inline-flex; }
.n-kopf-weg { display: flex; gap: 22px; margin-left: auto; }
.n-kopf-weg a {
  text-decoration: none; font-size: 14px; color: rgba(255, 255, 255, .72);
  transition: color .15s;
}
.n-kopf-weg a:hover { color: #fff; }

/* --- Knöpfe -------------------------------------------------------------- */

.n-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 100px; text-decoration: none;
  font-size: 15px; font-weight: 600; border: 1px solid transparent;
  transition: transform .12s, background .15s, border-color .15s;
  white-space: nowrap;
}
.n-knopf:active { transform: translateY(1px); }
.n-knopf-klein { padding: 8px 16px; font-size: 13.5px; }

.n-knopf-rot { background: var(--n-rot); color: #fff; }
.n-knopf-rot:hover { background: #C8161C; }

.n-knopf-geist {
  border-color: rgba(255, 255, 255, .28); color: #fff;
}
.n-knopf-geist:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.n-kopf .n-knopf-klein {
  background: var(--n-rot); color: #fff;
}
.n-kopf .n-knopf-klein:hover { background: #C8161C; }

/* --- Durchsage ----------------------------------------------------------- */

.n-durchsage {
  background: #FDF4F4; border-bottom: 1px solid #F3D9D9;
  padding: 12px 28px; font-size: 14.5px; text-align: center;
}
.n-durchsage p { margin: 0; }

/* --- Bühne --------------------------------------------------------------- */

.n-buehne {
  background: var(--n-schwarz); color: #fff;
  padding: clamp(72px, 11vw, 132px) 28px clamp(80px, 12vw, 140px);
  position: relative; overflow: hidden;
}
/* Ein einzelner roter Schein hinter der Überschrift. Mehr Schmuck bräuchte die
   Seite nicht — sie verkauft Nachweisbarkeit, nicht Buntheit. */
.n-buehne::before {
  content: ""; position: absolute; inset: -40% 30% 40% -20%;
  background: radial-gradient(closest-side, rgba(225, 27, 34, .30), transparent);
  pointer-events: none;
}
.n-buehne-innen { max-width: var(--n-breit); margin: 0 auto; position: relative; }

.n-oberzeile {
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--n-rot-hell); font-weight: 600; margin-bottom: 20px;
}
.n-buehne h1 {
  font-size: clamp(36px, 6vw, 64px); font-weight: 700; max-width: 15ch;
}
.n-vorspann {
  margin-top: 24px; font-size: clamp(16.5px, 2vw, 19.5px);
  color: rgba(255, 255, 255, .74); max-width: 56ch;
}
.n-buehne-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.n-buehne-fuss {
  margin-top: 34px; font-size: 14px; color: rgba(255, 255, 255, .45);
  max-width: 50ch;
}

/* --- Abschnitte ---------------------------------------------------------- */

.n-abschnitt { padding: clamp(64px, 9vw, 104px) 28px; }
.n-abschnitt-still { background: var(--n-grund-still); }
.n-abschnitt-kopf { max-width: var(--n-breit); margin: 0 auto 48px; }

.n-marke-zeile {
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--n-rot); font-weight: 600; margin-bottom: 14px;
}
.n-abschnitt h2 { font-size: clamp(27px, 4vw, 40px); font-weight: 700; }

/* Vorspann unter einer Abschnittsueberschrift. Traegt den Satz, der frueher
   in der Buehne stand - die gehoert jetzt dem Unternehmen. */
.n-abschnitt-vorspann {
  margin-top: 18px; font-size: 17px; color: var(--n-tinte-leise); max-width: 62ch;
}

/* --- Das Unternehmen ----------------------------------------------------- */

/* Das volle Wappen bekommt hier seinen Platz: eine ganze Seitenbreite, heller
   Grund, Navalo als Absender. Genau der Fall, fuer den es gedacht ist - in der
   Kopfzeile waere es bei 24 Pixeln ein grauer Fleck, dort bleibt die
   Schildmarke. */
.n-firma {
  max-width: var(--n-breit); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 54px; align-items: center;
}
.n-firma-wappen { text-align: center; }
.n-firma-wappen img { width: 100%; max-width: 380px; height: auto; }

.n-firma-text h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
.n-firma-satz {
  margin-top: 16px; font-size: 17px; color: var(--n-tinte-leise); max-width: 52ch;
}

.n-eckdaten { margin: 32px 0 0; }
/* Spaltenbreite nach dem laengsten Begriff bemessen: UNTERNEHMENSGEGENSTAND
   ist ein einziges Wort ohne Trennstelle und lief bei 160 px in den Text
   hinein. Dazu overflow-wrap als Netz - kommt spaeter ein noch laengerer
   Begriff dazu, bricht er um, statt sich zu ueberlagern. */
.n-eckdaten > div {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px;
  padding: 16px 0; border-top: 1px solid var(--n-linie);
}
.n-eckdaten dt {
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--n-tinte-still); font-weight: 600; padding-top: 2px;
  overflow-wrap: anywhere; line-height: 1.35;
}
.n-eckdaten dd { margin: 0; font-size: 15px; color: var(--n-tinte-leise); }

@media (max-width: 860px) {
  .n-firma { grid-template-columns: 1fr; gap: 34px; }
  .n-firma-wappen img { max-width: 260px; }
  .n-eckdaten > div { grid-template-columns: 1fr; gap: 6px; }
}

/* --- Produktkarten ------------------------------------------------------- */

.n-karten {
  max-width: var(--n-breit); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}
.n-karte {
  background: var(--n-grund); border: 1px solid var(--n-linie);
  border-radius: var(--n-rund); padding: 34px 30px 30px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform .16s, box-shadow .16s;
}
/* Die rote Kante oben nimmt das Schild auf, ohne es zu wiederholen. */
.n-karte::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--n-rot);
}
.n-karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(21, 23, 27, .09);
}
.n-karte h3 { font-size: 26px; font-weight: 700; }
.n-karte-satz { color: var(--n-tinte-leise); margin-top: 6px; font-size: 15.5px; }

.n-liste { list-style: none; padding: 0; margin: 26px 0 0; flex: 1; }
.n-liste li {
  position: relative; padding-left: 26px; margin-bottom: 14px;
  font-size: 15px; color: var(--n-tinte-leise);
}
.n-liste li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--n-rot); opacity: .85;
}

.n-preis {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--n-linie);
  font-size: 15px; color: var(--n-tinte-leise);
}
.n-preis strong { font-size: 22px; color: var(--n-tinte); font-weight: 700; }
.n-preis-still { color: var(--n-tinte-still); }

/* --- Punkteraster -------------------------------------------------------- */

.n-raster {
  max-width: var(--n-breit); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 34px 40px;
}
.n-punkt h4 {
  font-size: 17px; font-weight: 600; margin-bottom: 9px;
  padding-left: 16px; position: relative;
}
.n-punkt h4::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px;
  background: var(--n-rot); border-radius: 2px;
}
.n-punkt p { font-size: 15px; color: var(--n-tinte-leise); padding-left: 16px; }

/* --- Tarife -------------------------------------------------------------- */

/* Drei Tarife sind drei Tarife - fest gesetzt statt automatisch umbrechen.
   Sonst stehen bei mittlerer Fensterbreite zwei oben und einer allein
   darunter, und der Vergleich, um den es geht, ist hin. */
.n-tarife {
  max-width: var(--n-breit); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 780px) { .n-tarife { grid-template-columns: 1fr; } }
.n-tarif {
  border: 1px solid var(--n-linie); border-radius: var(--n-rund);
  padding: 28px 26px; text-align: center;
}
/* Der mittlere Tarif ist der, den die meisten brauchen — bis 50 Leute deckt
   den typischen Betrieb ab. Er darf das auch zeigen. */
.n-tarif-hervor { border-color: var(--n-rot); border-width: 2px; }
.n-tarif-name {
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--n-tinte-still); font-weight: 600;
}
.n-tarif-preis {
  font-size: 42px; font-weight: 700; margin: 10px 0 4px;
  letter-spacing: -0.03em;
}
.n-tarif-preis span {
  font-size: 15px; font-weight: 500; color: var(--n-tinte-still);
  letter-spacing: 0;
}
.n-tarif-satz { font-size: 14.5px; color: var(--n-tinte-leise); }

.n-hinweis {
  max-width: 70ch; margin: 26px auto 0; text-align: center;
  font-size: 14px; color: var(--n-tinte-still);
}

/* Ein Block je Produkt. Die Ueberschrift traegt die Abrechnungsart mit -
   "monatlich" gegen "jaehrlich" ist der Unterschied, der sonst verwechselt
   wird: 150 Euro neben 79 Euro liest sich als teurer, obwohl es ein Zwoelftel
   davon ist. */
.n-tarifblock { max-width: var(--n-breit); margin: 0 auto 46px; }
.n-tarifblock:last-of-type { margin-bottom: 0; }
.n-tarifblock-kopf {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--n-linie);
}
.n-tarifblock-kopf h3 { font-size: 21px; font-weight: 700; }
.n-tarifblock-kopf p { font-size: 14.5px; color: var(--n-tinte-still); }
.n-tarifblock-fuss {
  margin-top: 18px; font-size: 14.5px; color: var(--n-tinte-leise);
  max-width: 76ch;
}
.n-tarifblock-fuss strong { color: var(--n-tinte); font-weight: 600; }

/* --- Aufruf -------------------------------------------------------------- */

.n-ruf {
  max-width: var(--n-breit); margin: 64px auto 0;
  background: var(--n-schwarz); color: #fff;
  border-radius: var(--n-rund); padding: clamp(38px, 6vw, 58px) 34px;
  text-align: center;
}
.n-ruf h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; }
.n-ruf p {
  margin: 14px auto 28px; color: rgba(255, 255, 255, .70);
  max-width: 50ch; font-size: 16px;
}

/* --- Fußzeile ------------------------------------------------------------ */

.n-fuss {
  background: var(--n-schwarz-weich); color: rgba(255, 255, 255, .62);
  padding: 66px 28px 26px; font-size: 14.5px;
}
.n-fuss-innen {
  max-width: var(--n-breit); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}
.n-fuss-block h3 {
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .40); font-weight: 600; margin-bottom: 14px;
}
.n-fuss-block p { margin-bottom: 14px; }
.n-fuss .n-marke { color: #fff; }
.n-fuss-satz { margin-top: 16px; }
.n-fuss a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.n-fuss a:hover { color: #fff; text-decoration: underline; }
.n-fuss-zeile {
  max-width: var(--n-breit); margin: 48px auto 0;
  padding-top: 22px; border-top: 1px solid var(--n-linie-dunkel);
  font-size: 13px; color: rgba(255, 255, 255, .38);
}

/* --- Anmeldung und Kundenbereich ----------------------------------------- */

.n-mitte {
  min-height: 74vh; display: flex; align-items: center; justify-content: center;
  padding: 56px 24px; background: var(--n-grund-still);
}
.n-formular {
  width: 100%; max-width: 420px; background: var(--n-grund);
  border: 1px solid var(--n-linie); border-radius: var(--n-rund);
  padding: 38px 34px;
}
.n-formular h1 { font-size: 25px; font-weight: 700; }
.n-formular > p { color: var(--n-tinte-leise); margin-top: 8px; font-size: 15px; }

.n-feld { display: block; margin-top: 22px; }
.n-feld > span {
  display: block; font-size: 13px; color: var(--n-tinte-leise);
  margin-bottom: 7px; font-weight: 500;
}
.n-feld input {
  width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--n-linie); border-radius: 10px; background: #fff;
  color: var(--n-tinte);
}
.n-feld input:focus {
  outline: 2px solid var(--n-rot); outline-offset: -1px; border-color: transparent;
}
.n-formular .n-knopf { width: 100%; margin-top: 26px; }

.n-fehler {
  margin-top: 20px; padding: 12px 14px; border-radius: 10px;
  background: #FDF1F1; border: 1px solid #F3D9D9; color: #96181D;
  font-size: 14.5px;
}
.n-klein { margin-top: 22px; font-size: 13.5px; color: var(--n-tinte-still); }

/* --- Kundenbereich ------------------------------------------------------- */

.n-bereich { max-width: var(--n-breit); margin: 0 auto; padding: 48px 28px 80px; }
.n-bereich-kopf {
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
  margin-bottom: 34px;
}
.n-bereich-kopf h1 { font-size: 30px; font-weight: 700; }
.n-bereich-kopf p { color: var(--n-tinte-leise); margin-top: 6px; }
/* Die Knoepfe oben rechts im Bereich. Frueher waren es drei nackte
   Textlinks, jeder mit margin-left:auto - dadurch klebten sie aneinander
   und lasen sich wie ein umgebrochener Satz.

   Verwendet werden die HAUSKNOEPFE .n-knopf/.n-knopf-rot/.n-knopf-geist.
   Ich hatte hier zuerst ein zweites .n-knopf definiert und damit die
   Knoepfe auf zehn anderen Seiten ueberschrieben - eine Klasse, die es
   schon gibt, wird verwendet und nicht neu erfunden. */
.n-kopfknoepfe {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.n-bereich-kopf .n-abmelden {
  font-size: 14px; color: var(--n-tinte-leise); text-decoration: none;
  padding: 10px 6px;
}
.n-bereich-kopf .n-abmelden:hover { color: var(--n-tinte); }

.n-betrieb {
  border: 1px solid var(--n-linie); border-radius: var(--n-rund);
  padding: 26px 26px 22px; margin-bottom: 18px;
}
.n-betrieb-kopf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--n-linie);
}
.n-betrieb-kopf h2 { font-size: 21px; font-weight: 700; }
.n-betrieb-kopf .n-adresse { color: var(--n-tinte-still); font-size: 14px; }

.n-schild {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; padding: 3px 10px; border-radius: 100px;
  border: 1px solid var(--n-linie);
  color: var(--n-tinte-leise);
}
.n-schild.n-schild-warnung {
  border-color: #E9C98A; background: #FDF6E8; color: #7A4E06;
}
.n-schild.n-schild-ernst {
  border-color: #F0C4C4; background: #FDF1F1; color: #96181D;
}

.n-module { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.n-modul {
  flex: 1 1 240px; display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--n-linie); border-radius: 12px;
  padding: 16px 18px; text-decoration: none;
  transition: border-color .15s, background .15s;
}
.n-modul:hover { border-color: var(--n-rot); background: #FDF7F7; }
.n-modul-name { font-weight: 600; font-size: 16px; }
.n-modul-satz { font-size: 13.5px; color: var(--n-tinte-still); }
.n-modul-pfeil { margin-left: auto; color: var(--n-tinte-still); font-size: 18px; }

.n-nicht-gebucht {
  flex: 1 1 240px; border: 1px dashed var(--n-linie); border-radius: 12px;
  padding: 16px 18px; color: var(--n-tinte-still); font-size: 14px;
}

@media (max-width: 640px) {
  .n-kopf { padding: 12px 18px; gap: 14px; }
  .n-kopf-weg { display: none; }
  .n-abschnitt, .n-buehne { padding-left: 20px; padding-right: 20px; }
  .n-bereich { padding-left: 20px; padding-right: 20px; }
}

/* --- Textblatt: Impressum und Rechtliches -------------------------------- */

/* Schmaler als der Rest der Seite. Rechtstexte werden gelesen, nicht
   ueberflogen - bei voller Breite verliert man in jeder Zeile den Anschluss. */
.n-blatt { max-width: 760px; margin: 0 auto; }
.n-blatt h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 700; }
.n-blatt h2 {
  font-size: 22px; font-weight: 700; margin-top: 52px; padding-top: 28px;
  border-top: 1px solid var(--n-linie);
}
.n-blatt-vorspann { margin-top: 14px; color: var(--n-tinte-leise); }
.n-blatt p { margin-top: 16px; color: var(--n-tinte-leise); font-size: 15.5px; }
.n-blatt strong { color: var(--n-tinte); font-weight: 600; }
.n-blatt a { color: var(--n-rot); }
.n-blatt .n-eckdaten { margin-top: 34px; }

.n-hinweis-kasten {
  border: 1px solid #E9C98A; background: #FDF6E8; color: #6B4405;
  border-radius: 12px; padding: 14px 16px; font-size: 15px;
}

.n-still { color: var(--n-tinte-still); font-size: 14px; }

/* --- Kontaktformular ----------------------------------------------------- */

.n-formular-breit { max-width: 620px; }
.n-feldpaar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 560px) { .n-feldpaar { grid-template-columns: 1fr; } }

.n-feld textarea {
  width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--n-linie); border-radius: 10px; background: #fff;
  color: var(--n-tinte); resize: vertical; line-height: 1.5;
}
.n-feld textarea:focus {
  outline: 2px solid var(--n-rot); outline-offset: -1px; border-color: transparent;
}

/* Das Lockfeld muss fuer Menschen unsichtbar sein, aber im Quelltext stehen.
   Nicht display:none - manche Werbeprogramme pruefen genau darauf und lassen
   solche Felder dann aus. */
.n-lockfeld {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.n-mitte-text { text-align: center; }
.n-mitte-text p { margin: 14px 0 26px; color: var(--n-tinte-leise); }

/* Firmendaten unter Mein Bereich. Ein langes Formular, das man einmal
   ausfuellt und dann jahrelang nicht mehr anfasst - deshalb ruhig gesetzt und
   in Abschnitte geteilt, statt alles in einem Block. */
.n-formular-titel {
  margin: 38px 0 4px; font-size: 19px; font-weight: 700;
  padding-bottom: 10px; border-bottom: 1px solid var(--n-linie);
}
.n-formular-titel:first-of-type { margin-top: 0; }

.n-vorschau {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 22px; padding: 14px 16px;
  background: var(--n-grund-still); border-radius: 10px;
}
.n-vorschau img { max-height: 60px; max-width: 100%; }
.n-vorschau .n-klein { margin-top: 0; }

.n-hinweis-ernst {
  text-align: left; margin-left: 0; padding: 12px 14px; border-radius: 8px;
  background: rgba(225, 27, 34, 0.08);
  border-left: 3px solid var(--n-rot, #E11B22);
  color: var(--n-tinte);
}

/* Der Weg zu den Firmendaten, unter den Modulkacheln. */
.n-fuss-weg {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--n-linie);
}
.n-fuss-weg a { font-weight: 600; }
.n-fuss-weg .n-klein { display: block; margin-top: 4px; }

/* "Einstellungen" im Kopf jedes Betriebs. Umrandet statt gefuellt: Es ist
   nicht die Handlung, wegen der man hereinkommt - arbeiten will man in den
   Modulen. Sichtbar muss er trotzdem sein, also ein Knopf und kein Textlink,
   und rechts aussen, wo man ihn sucht. */
.n-knopf-rand {
  border-color: var(--n-linie); color: var(--n-tinte);
  background: var(--n-grund-still);
}
.n-knopf-rand:hover {
  border-color: var(--n-tinte-still); background: #fff;
}
.n-betrieb-einstellungen { margin-left: auto; align-self: center; }

@media (max-width: 560px) {
  .n-betrieb-einstellungen { margin-left: 0; width: 100%; }
}


/* --- Formular im Navalo-Bereich --------------------------------------- */

/* Erklaerung unter einem Feld. Sie steht DARUNTER und nicht als Platzhalter
   im Feld selbst: Ein Platzhalter verschwindet beim Tippen, und dann ist die
   Erklaerung genau dann weg, wenn man sie braucht. */
.n-hilfe {
  margin: 6px 0 0; font-size: 13.5px; line-height: 1.55;
  color: var(--n-tinte-leise); max-width: 62ch;
}
.n-hilfe b { color: var(--n-tinte); font-weight: 600; }
.n-hilfe code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

.n-feldtitel {
  margin: 26px 0 10px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--n-tinte-leise);
}

/* Haken mit Text daneben, nicht darunter. Das Kaestchen bleibt oben buendig,
   damit eine zweizeilige Beschriftung es nicht in die Mitte zieht. */
.n-haken {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 9px 0; font-size: 15px; line-height: 1.5;
}
.n-haken input { margin: 3px 0 0; width: 17px; height: 17px; flex: none; }
.n-haken b { font-weight: 600; }

/* Auswahlfelder sahen anders aus als Eingabefelder - dieselbe Form fuer
   beide, sonst wirkt das Formular zusammengestueckelt. */
.n-feld select {
  width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--n-linie); border-radius: 10px; background: #fff;
  color: var(--n-tinte);
}
.n-feld select:focus {
  outline: 2px solid var(--n-rot); outline-offset: -1px;
  border-color: transparent;
}

/* ===========================================================================
   Wien-Karte im Navalo-Bereich

   Selbst gezeichnet, ohne Kachelserver. Die Nadeln behalten beim Zoomen ihre
   Groesse — dafuer steht --mass, die Kartenkoordinaten je Bildpunkt, und wird
   von karte.js bei jeder Bewegung gesetzt.
   =========================================================================== */

/* Die Karte fuellt, was unter der Kopfzeile uebrigbleibt. NICHT fixed
   inset:0 - das lag unter der sticky Kopfzeile mit z-index 20, und der
   Schalterbalken war dadurch unsichtbar. Die Hoehe misst karte.js und setzt
   sie als --kopfhoehe; fest verdrahtet waere sie beim ersten Umbruch der
   Kopfzeile falsch. */
.k-seite {
  position: relative; display: flex;
  height: calc(100dvh - var(--kopfhoehe, 58px));
  background: #0E1116; overflow: hidden;
}
.k-buehne { flex: 1; height: 100%; background: #0E1116; }

/* WISCHEN VERSCHIEBT DIE KARTE, ES GEHT NICHT ZURÜCK.

   Mario am 10.08.2026: "wenn ich auf der app nach links wische komme ich
   zurück zum portal, das möchte ich nicht, es soll die karte verschieben".

   Der Browser deutet ein Wischen am Rand als "eine Seite zurück". Auf einer
   Karte ist das die falsche Deutung — dort ist Wischen das wichtigste
   Werkzeug überhaupt. overscroll-behavior nimmt dem Browser die Geste ab;
   touch-action sagt zusätzlich, dass diese Fläche ihre Berührungen selbst
   auswertet und nichts an die Seite weiterreicht. */
html:has(.k-buehne), body:has(.k-buehne) {
  overscroll-behavior-x: none;
  overflow: hidden;
}
.k-buehne { touch-action: none; overscroll-behavior: none; }

/* Die Schalter sitzen in der Kopfzeile, neben dem Logo. */
.n-kopf-weg .k-schalter { display: flex; gap: 18px; flex-wrap: wrap;
  align-items: center; }
.k-zurueck-weg { white-space: nowrap; }

/* --- Das Suchfeld in der Kopfzeile --------------------------------------- */

/* `position: relative`, damit die Vorschlagsliste daran haengt und nicht am
   Fenster. Ohne das steht sie beim Schwenken der Karte still an ihrem
   Platz. */
.k-suche { position: relative; }
.k-suchfeld {
  width: 210px; padding: 7px 12px; border-radius: 100px;
  background: rgba(255,255,255,.07); color: #E9ECF2; font-size: 14px;
  border: 1px solid rgba(255,255,255,.16); outline: none;
  transition: border-color .15s, background .15s, width .15s;
}
.k-suchfeld::placeholder { color: rgba(255,255,255,.42); }
.k-suchfeld:focus {
  width: 260px; background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.45);
}

/* Die Liste liegt UEBER der Karte: z-index hoeher als Leaflets Ebenen (400)
   und Bedienelemente (800) - dieselbe Falle wie bei der Tafel. */
.k-vorschlaege {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 1200;
  min-width: 320px; max-width: 460px; margin: 0; padding: 6px;
  list-style: none; border-radius: 12px;
  background: #141A22; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  max-height: 60vh; overflow-y: auto;
}
.k-vorschlag {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: #E9ECF2; white-space: nowrap;
}
.k-vorschlag.k-anliegend { background: rgba(255,255,255,.11); }
.k-vorschlag-name { overflow: hidden; text-overflow: ellipsis; }
.k-vorschlag-zusatz { margin-left: auto; padding-left: 14px;
  color: #8A93A3; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.k-kein-treffer { padding: 9px 10px; color: #8A93A3; font-size: 13px;
  white-space: normal; line-height: 1.45; }
.k-heraus-knopf {
  position: absolute; top: 14px; right: 14px; z-index: 500;
  background: rgba(20,26,34,.92); color: #E9ECF2; font-size: 17px;
  cursor: pointer; border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px; width: 34px; height: 32px;
}
.k-heraus-knopf:hover { background: rgba(255,255,255,.14); }

.k-schalter-feld { display: flex; align-items: center; gap: 7px;
  cursor: pointer; user-select: none; font-size: 14px;
  color: rgba(255,255,255,.72); }
.k-schalter-feld:hover { color: #fff; }
.k-punkt { width: 11px; height: 11px; border-radius: 50%; display: block; }
/* Der Ring in der Legende sieht aus wie auf der Karte: hohl, roter Rand. */
.k-ring { background: transparent; border: 2px solid #E11B22;
  width: 13px; height: 13px; }
.k-zahl { color: rgba(255,255,255,.45); font-size: 12px; margin-left: 3px;
  font-variant-numeric: tabular-nums; }
.k-schalter-feld input:not(:checked) ~ * { opacity: .38; }
/* Eine feste Anzeige ohne Kästchen — die gemeldeten Einkaufswagen sind
   nicht abschaltbar. Kein Zeigefinger, kein Aufhellen beim Darüberfahren:
   Es gibt hier nichts zu klicken, und das soll man sehen, bevor man es
   versucht. */
.k-schalter-fest { cursor: default; color: rgba(255,255,255,.62); }
.k-schalter-fest:hover { color: rgba(255,255,255,.62); }

/* Leaflet an den dunklen Bildschirm anpassen. */
.leaflet-container { background: #0E1116; font: inherit; }
.leaflet-control-zoom a {
  background: rgba(20,26,34,.92); color: #E9ECF2;
  border-color: rgba(255,255,255,.18);
}
.leaflet-control-zoom a:hover { background: rgba(255,255,255,.14);
  color: #fff; }
.leaflet-control-attribution {
  background: rgba(14,17,22,.78); color: rgba(255,255,255,.5);
  font-size: 10.5px;
}
.leaflet-control-attribution a { color: rgba(255,255,255,.7); }
.k-schwebe.leaflet-tooltip {
  background: rgba(20,26,34,.96); color: #E9ECF2;
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  padding: 8px 11px; font-size: 13px; line-height: 1.45;
  box-shadow: 0 10px 26px rgba(0,0,0,.45); white-space: nowrap;
}
.k-schwebe.leaflet-tooltip-top::before { border-top-color: rgba(255,255,255,.16); }
.k-schwebe-kette { color: rgba(255,255,255,.5); font-size: 12px; }

.k-buehne { position: relative; flex: 1; cursor: grab; overflow: hidden; }
.k-buehne.k-zieht { cursor: grabbing; }
#k-karte { width: 100%; height: 100%; display: block; }
.k-laedt { position: absolute; inset: 0; display: grid; place-items: center;
  color: #8A93A3; font-size: 14px; margin: 0; }

/* Bezirke: Flaeche kaum sichtbar, Grenzen als feine Linie. Die Stadt soll
   erkennbar sein, ohne dass sie mit den Nadeln um Aufmerksamkeit ringt. */
.k-bezirke path { fill: rgba(255,255,255,.035);
  stroke: rgba(255,255,255,.16);
  stroke-width: calc(var(--mass, 1) * 1px); }
.k-strassen path { fill: none; stroke: rgba(255,255,255,.13);
  stroke-width: calc(var(--mass, 1) * 1.1px); stroke-linecap: round; }

/* Nadelkoepfe in gleichbleibender Groesse: Der Radius ist 1, skaliert wird
   ueber --mass. Ohne das deckt eine Nadel beim Hineinzoomen den Bezirk zu. */
.k-nadel { cursor: pointer; }
.k-kopf { r: calc(var(--mass, 1) * 5px);
  stroke: rgba(10,12,16,.85); stroke-width: calc(var(--mass, 1) * 1.2px); }
/* Ungenaue Lage: hohl. Wer einer geschaetzten Nadel glaubt, sucht spaeter
   ein Objekt, das dort nicht steht. */
/* Ungenaue Lage: hohl, aber in der Kettenfarbe. Frueher war sie fast
   durchsichtig mit currentColor als Rand - auf dunklem Grund ein dunkler
   Fleck, den man weder zuordnen noch treffen konnte. */
.k-kopf.k-ungenau { fill-opacity: .12;
  stroke-width: calc(var(--mass, 1) * 2.4px); }
.k-nadel:hover .k-kopf { r: calc(var(--mass, 1) * 7px); }

/* Die Trefferflaeche. Unsichtbar, aber deutlich groesser als der Kopf -
   sonst muss man auf fuenf Bildpunkte zielen. pointer-events: all faengt
   auch bei fill:none. */
.k-treffer { fill: transparent; pointer-events: all;
  r: calc(var(--mass, 1) * 11px); }

.k-ring-um { fill: none; stroke: #E11B22;
  r: calc(var(--mass, 1) * 9px);
  stroke-width: calc(var(--mass, 1) * 2.2px); }
/* Schalter aus: nur der Ring verschwindet, die Nadel bleibt. */
body.k-ohne-ring .k-ring-um { display: none; }

/* Die Tafel rechts, ueber die volle Hoehe. */
/* z-index UEBER LEAFLET. Ohne den war die Tafel unsichtbar, obwohl sie
   offen war und an der richtigen Stelle stand: Leaflet gibt seinen Ebenen
   z-index 400 und den Bedienelementen 800, und `.leaflet-container` bildet
   keinen eigenen Stapel. Die Kacheln lagen also ueber der Tafel. Das sieht
   aus, als reagiere der Klick nicht - tatsaechlich hat er gewirkt. */
.k-tafel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 86vw;
  z-index: 1000;
  background: #141A22; border-left: 1px solid rgba(255,255,255,.12);
  padding: 22px 24px; color: #E9ECF2; overflow-y: auto;
  transform: translateX(101%); transition: transform .18s ease-out;
  box-shadow: -18px 0 40px rgba(0,0,0,.35);
}
.k-tafel.k-offen { transform: translateX(0); }
.k-zu { position: absolute; top: 12px; right: 14px; background: transparent;
  border: 0; color: #8A93A3; font-size: 24px; cursor: pointer; line-height: 1; }
.k-zu:hover { color: #fff; }
.k-tafel-kopf { display: flex; gap: 8px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 2px solid; margin-bottom: 16px; }
.k-marke { display: inline-block; padding: 3px 10px; border-radius: 5px;
  font-size: 12px; font-weight: 600; color: #15171B; letter-spacing: .02em; }
.k-marke-wichtig { background: #E11B22; color: #fff; }
.k-tafel h2 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
.k-nr { margin: 0 0 4px; color: #8A93A3; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.k-adresse { margin: 0 0 14px; color: #C3C9D4; font-size: 14px; }
/* Die Rufnummer waehlbar. Am Telefon ist das ein Tippen statt Abschreiben -
   und am Rechner tut der Verweis nichts Schaedliches. */
.k-telefon-zeile { margin: 8px 0 0; display: flex; align-items: baseline;
  gap: 10px; }
.k-telefon-art { font-size: 12px; color: #8A93A3; padding: 2px 8px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 100px; }
.k-telefon { color: #E9ECF2; font-size: 15px; text-decoration: none;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 1px; }
.k-telefon:hover { color: #fff; border-bottom-color: #fff; }
.k-warnung { margin: 14px 0 0; font-size: 13px; color: #F6C820;
  border-left: 3px solid #F6C820; padding-left: 11px; line-height: 1.5; }

/* Die Strassennamen aufhellen - nur sie, nicht die ganze Karte.
   CARTO liefert die Beschriftung als eigene Kachelebene, deshalb wirkt der
   Filter genau dort. `brightness` allein reicht nicht: Die Schrift ist ein
   mittleres Grau, das erst nach mehr Kontrast weiss wird. Die Reihenfolge
   zaehlt - erst spreizen, dann aufhellen. */
.leaflet-pane[class*="beschriftung"] img {
  filter: contrast(1.35) brightness(2.2);
}

/* Der Punkt in der Legende für Wiener Wohnen: halb so groß wie die anderen,
   genau wie die Nadeln auf der Karte. Wer die Leiste liest, soll die Größe
   schon dort sehen. */
.k-punkt-klein { width: 7px; height: 7px; }

/* Die Sammelnadel als divIcon: sieht aus wie der frühere circleMarker, lässt
   sich aber ziehen — Leaflet kann nur `Marker` bewegen, keinen Kreis. */
.k-sammelnadel { background: none; border: 0; }
.k-sammelnadel i {
  display: block; width: 7px; height: 7px; margin: 5.5px;
  border-radius: 50%; background: #FF9A3C;
  border: 1px solid rgba(10,12,16,.9);
}
/* HOHL HEISST GESCHÄTZT. Mehrere Sammelpunkte einer Anlage fallen auf
   dieselbe Adresse, weil die Stiege in keinem Datensatz der Stadt Wien
   steht. Sie werden auf einem kleinen Kranz auseinandergezogen, damit man
   jeden einzeln greifen kann — aber dieser Versatz ist erfunden. Eine volle
   Nadel steht am Platz, eine hohle steht bei der Adresse. */
.k-sammelnadel-offen i {
  background: transparent;
  border: 1.5px dashed #FF9A3C;
  box-shadow: none;
}
.k-schwebe-offen { color: #FFC98A; font-style: italic; }

/* Im Verschiebemodus größer und mit Greifhand: Man soll sehen, dass die
   Nadel jetzt etwas anderes tut als sonst. */
.k-schiebt .k-sammelnadel { cursor: grab; }
.k-schiebt .k-sammelnadel i {
  width: 11px; height: 11px; margin: 3.5px;
  box-shadow: 0 0 0 3px rgba(255,154,60,.32);
}
.k-schiebt .leaflet-marker-dragging .k-sammelnadel i { cursor: grabbing; }
.k-schalter-schieben { padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.14); }

/* GEMELDETE EINKAUFSWAGEN — ein X, kein Punkt.

   Marios Vorschlag vom 09.08.2026: „sollen wir ein x machen zur
   kennzeichnung statt einen nadelkopf?" Alles andere auf dieser Karte ist
   rund — Filialen, Sammelpunkte, Bereiche. Ein X fällt schon durch die
   FORM auf und nicht erst durch die Farbe; das hält auch, wenn jemand die
   Karte auf einem schlechten Handybildschirm in der Sonne anschaut.

   Das Rot ist das Navalo-Rot und kommt auf der Karte sonst nirgends vor.
   Penny ist blass (#FF7A7A), Wiener Wohnen orange — verwechseln kann man
   das nicht. Der weiße Saum darum, weil das X über Häusern, Wiesen und
   Wasser liegen kann.

   Die Zahl daneben ist die Zahl UNSERER Wagen. Ohne sie wäre jedes X
   gleich wichtig, und der Fahrer müsste jedes einzeln antippen. */
/* Das Zeichen in der Schalterleiste: dasselbe X, nur klein. */
.k-punkt-ekw {
  position: relative; background: none; border: 0;
}
.k-punkt-ekw::before, .k-punkt-ekw::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2.5px; margin: -1.25px 0 0 -6px;
  background: #E11B22; border-radius: 1px;
}
.k-punkt-ekw::before { transform: rotate(45deg); }
.k-punkt-ekw::after { transform: rotate(-45deg); }

.k-ekw { background: none; border: 0; }
.k-ekw::before, .k-ekw::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 24px; height: 5px; margin: -2.5px 0 0 -12px;
  background: #E11B22; border-radius: 1.5px;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.92);
}
.k-ekw::before { transform: rotate(45deg); }
.k-ekw::after { transform: rotate(-45deg); }
/* DIE ZAHL TRÄGT DIE FARBE DER KETTE — Billa gelb, Penny hellrot, wie die
   Filialnadeln. Mario am 09.08.2026. Stehen an einer Adresse beide Ketten,
   stehen zwei Zahlen nebeneinander: Billa-Wagen und Penny-Wagen gehen an
   verschiedene Filialen, zusammengezählt wäre die Auskunft schlechter.

   Dunkle Schrift, nicht weiße: Auf dem Billa-Gelb (#F6C820) wäre Weiß
   nicht zu lesen. Die Farbe kommt aus der Datenbank und steht am Element,
   damit hier nichts doppelt gepflegt werden muss. */
.k-ekw-zahlen {
  position: absolute; left: 17px; top: -11px;
  display: flex; gap: 2px; white-space: nowrap;
}
.k-ekw-zahl {
  min-width: 11px; padding: 1px 4px;
  font: 700 12px/1.25 system-ui, sans-serif; text-align: center;
  color: #15171B; border-radius: 9px;
  border: 1.5px solid rgba(255,255,255,.92);
}

/* UNTER DREI EIGENEN WAGEN LOHNT DIE FAHRT NICHT — Mario am 08.08.2026:
   „der benzin zu der adresse mehr kostet als die sache wert ist." Weg ist
   die Meldung deshalb nicht: Wer ohnehin in der Gegend ist, nimmt sie mit.
   Also blasser, nicht unsichtbar. */
.k-ekw-klein::before, .k-ekw-klein::after {
  background: #B9525A; width: 18px; height: 4px;
  margin: -2px 0 0 -9px;
}
/* MENGE UNBEKANNT — sie steht nur im Foto. Grau, damit sie nicht wie eine
   gezählte Zahl aussieht, aber sichtbar: Die Adresse ist sicher, und wer
   klickt, sieht das Bild. */
.k-ekw-frage { background: #C9CDD4; color: #15171B; }

/* Das Zeichen der meldenden Stelle. Heller Grund, weil die Marke der Stadt
   Wien für weißen Untergrund gemacht ist — auf der dunklen Tafel wäre das
   Schwarz im Zeichen unsichtbar. Schmal gehalten: Es ist eine Herkunfts-
   angabe, keine Überschrift. */
.k-quellzeichen {
  display: block; max-width: 190px; width: 100%; height: auto;
  margin: 12px 0 4px; padding: 6px 8px;
  background: #fff; border-radius: 6px;
}

/* Das Foto in der Tafel. Volle Breite, damit man auf einem Müllplatzfoto
   etwas erkennt; der Klick öffnet es groß. */
.k-ekw-foto {
  display: block; width: 100%; height: auto; margin: 10px 0 0;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.14);
}

.k-ekw-klein .k-ekw-zahlen { left: 12px; top: -9px; }
/* Die Kettenfarbe bleibt — nur gedämpft, damit das X nicht schreit. Die
   Farbe steht am Element und lässt sich hier nicht überschreiben, deshalb
   der Filter. */
.k-ekw-klein .k-ekw-zahl {
  font-size: 11px; font-weight: 600; padding: 0 3px;
  filter: saturate(.55) brightness(.86);
}

/* --- Die Karte am Handy -------------------------------------------------- */

/* HIER GILT DIE AUSNAHME ZU `.n-kopf-weg { display: none }` von weiter oben.
   Die Regel blendet unter 640 px die ganze Kopfleiste aus - und weil die
   Schalter der Karte darin wohnen, verschwand mit ihnen auch das Suchfeld.
   Mario am 08.08.2026: "am handy sehe kann ich die karte wunderbar aufmachen
   aber es würde kein menü geben wo man eine filiale suchen kann."

   Am Handy bleibt also genau eine Bedienung uebrig: die Suche. Alle Ebenen
   sind an, die Schalter dafuer weg - `karte.js` setzt die Kaestchen passend
   und sperrt Sonderfilialen und Verschieben. Ausgeblendet, nicht entfernt:
   Ohne die Kaestchen im Dokument findet `karte.js` keine Ebene.

   `:has()` statt einer eigenen Klasse an der Kopfzeile, weil die Kopfzeile
   in `navalo-grund.html` steht und nichts von der Karte wissen soll. */
@media (max-width: 640px) {
  /* DIE KOPFZEILE BRICHT UM. Nebeneinander blieben dem Suchfeld 26 Pixel -
     gemessen bei 375 px Breite: Logo 73, Weg zurueck 95, Abmelden 114, dazu
     die Abstaende. Also bekommt die Suche eine eigene Zeile ueber die ganze
     Breite. Die Kartenhoehe stimmt trotzdem: `karte.js` misst die Kopfzeile
     und setzt sie als --kopfhoehe, statt sie fest zu verdrahten. */
  .n-kopf:has(.k-schalter) { flex-wrap: wrap; }
  .n-kopf-weg:has(.k-schalter) {
    display: flex; flex-basis: 100%; margin-left: 0; gap: 12px;
    order: 3; align-items: center;
  }
  .n-kopf-weg .k-schalter { flex: 1; gap: 0; }
  .k-schalter .k-schalter-feld { display: none; }
  .k-suche { flex: 1; }
  .k-suchfeld, .k-suchfeld:focus { width: 100%; }
  /* Der Weg zurueck bleibt - sonst kommt man nur ueber die Zurueck-Taste
     des Browsers aus der Karte heraus. Er steht in der zweiten Zeile neben
     der Suche und braucht dort keine 95 Pixel fuer das Wort "Mein Bereich".
     Die Regel muss `.n-kopf-weg a` schlagen, deshalb der doppelte Weg. */
  .n-kopf-weg a.k-zurueck-weg { font-size: 0; padding: 0 4px; }
  .n-kopf-weg a.k-zurueck-weg::before { content: "‹"; font-size: 22px; }
  /* Die Tafel deckt am Handy die ganze Breite. Bei 86 vw schaut links ein
     Streifen Karte heraus, den man beim Lesen erwischt - dann schliesst sie
     sich mitten im Satz. */
  .k-tafel { width: 100%; max-width: none; padding: 20px 18px; }

  /* KEIN FUSS UNTER DER KARTE. Gemessen: Der Fuss ist am Handy 805 px hoch
     und haengt unter einem Bildschirm, den die Karte schon fuellt. Wer die
     Karte nach oben schiebt, schiebt in Wahrheit die Seite und sieht
     ploetzlich Impressum statt Wien. Auf allen anderen Seiten bleibt er -
     und ueber "Mein Bereich" ist er weiter erreichbar. */
  .n-kopf:has(.k-schalter) ~ .n-fuss { display: none; }
}

/* Die Rückmeldung nach dem Ziehen. Unten mittig, verschwindet von selbst. */
.k-sager {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 1100; padding: 9px 18px; border-radius: 100px;
  background: rgba(20,26,34,.94); color: #E9ECF2; font-size: 14px;
  border: 1px solid rgba(255,255,255,.16); white-space: nowrap;
  opacity: 0; transition: opacity .18s; pointer-events: none;
}
.k-sager-da { opacity: 1; }
.k-sager-schlecht { border-color: #E11B22; color: #FFD8D8; }

/* Der Hinweis in der Filialtafel: welche Wohnhausanlagen von Wiener Wohnen
   hierher liefern und an welchem Tag. */
.k-wienerwohnen { border-left: 3px solid #FF9A3C; padding: 2px 0 2px 11px; }
.k-ww-anlage { margin: 0 0 3px; font-size: 14px; color: #E9ECF2; }
.k-ww-tag { margin: 6px 0 0; font-size: 13px; color: #FFB259;
  font-weight: 600; }

/* Der Bezirksschalter in der Legende: eine weisse Linie statt eines Punkts. */
.k-linie { width: 14px; height: 0; border-top: 2px solid rgba(255,255,255,.8);
  border-radius: 0; }

/* Die Bezirksnummer. Weiss mit dunklem Schatten ringsum - auf einer dunklen
   Karte ist weisse Schrift ueberall lesbar ausser dort, wo eine helle
   Strasse darunterliegt, und genau dort steht sie sonst. */
.k-bezirk-zahl { background: none; border: 0; }
.k-bezirk-zahl span {
  display: block; text-align: center; line-height: 34px;
  font-size: 17px; font-weight: 700; color: #fff;
  text-shadow: 0 0 4px #000, 0 0 9px #000, 0 1px 2px #000;
  pointer-events: none; user-select: none;
}
/* Die Schildmarke am eigenen Sitz. Kein Ring, keine Nadel - der Punkt, von
   dem aus betreut wird, ist keine Filiale. */
.k-sitz { filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }

/* Das Kettenzeichen in der Tafel. Auf weissem Grund, weil die Vorlagen von
   Billa und Penny darauf gezeichnet sind - auf dunklem Grund verschwindet
   das Gelb von Billa im Nichts. */
.k-kettenzeichen {
  height: 34px; width: auto; background: #fff; border-radius: 6px;
  padding: 4px 8px; display: block;
}
/* Die Sammlungen je Monat. */
.k-abschnitt { margin: 22px 0 8px; font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.5); }
.k-monate { width: 100%; border-collapse: collapse; font-size: 14px; }
.k-monate th { text-align: left; font-weight: 400; color: #C3C9D4;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.k-monate td { text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.07); }
/* Zwei Zahlenspalten: Einsaetze und EKW. Feste Breite, damit die Zahlen
   untereinander stehen - eine Spalte, die je nach Wert wandert, laesst sich
   nicht ueberfliegen. */
.k-monate td { width: 68px; }
.k-monate-kopf th, .k-monate-kopf td {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 6px; }
/* Ein Monat ohne Einsatz gehoert in die Reihe, damit die Luecke sichtbar
   ist - aber leiser als ein Monat, in dem gearbeitet wurde. */
.k-leer th, .k-leer td { color: rgba(255,255,255,.3); font-weight: 400; }
.k-summe th, .k-summe td { border-top: 1px solid rgba(255,255,255,.22);
  border-bottom: 0; padding-top: 8px; color: #fff; font-weight: 700; }
.k-schnitt { margin: 14px 0 0; font-size: 14px; color: rgba(255,255,255,.6); }
.k-schnitt strong { color: #fff; font-size: 17px;
  font-variant-numeric: tabular-nums; }
.k-hinweis { margin: 14px 0 0; font-size: 13px; color: rgba(255,255,255,.55);
  border-left: 3px solid rgba(255,255,255,.2); padding-left: 11px;
  line-height: 1.5; }
.k-monat { font-size: 13px; color: rgba(255,255,255,.45); white-space: nowrap; }

/* Der Weg zurueck nach oben. Unten rechts, ueber allem, mit Abstand zur
   Aussparung am iPhone. Kein Verweis, sondern ein Knopf: Ein Sprung auf
   "#oben" haengt sich in den Verlauf und macht die Zurueck-Taste kaputt. */
.nach-oben {
  position: fixed; right: 16px; z-index: 900;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); background: #141A22;
  color: #E9ECF2; font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  -webkit-tap-highlight-color: transparent;
}
.nach-oben:active { filter: brightness(.94); }