/* Dashboard contentspark.de/mathie: hell, damit jedes Logo in seinen Originalfarben steht.
   Aufbau wie das Admin-Dashboard (feste Leiste links, Inhalt rechts), die Blöcke wie in Notion. */
:root {
  --grund: #f5f5f7;
  --karte: #fff;
  --text: #1d1d1f;
  --leise: #6e6e73;
  --linie: #e3e3e8;
  --hover: #ececf0;
  --marke: #00adef;
  --marke-schrift: #007fb3;
  --fest: #1a7f4b;
  --offen: #a65f00;
  --fehler: #c5221f;
  --knopf-text: #fff; --invers-hover: #000; --hinweis-link: #7fd6fa; --ziel: #dff3fc; --leicht: #fafafc; --platzhalter: #a1a1a8;  /* Hell/Dunkel: Werte, die vorher fest im Blatt standen */
  --leiste-breite: 256px;
  --schrift: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--grund); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--text);
  font: 16px/1.45 var(--schrift); -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--marke-schrift); outline-offset: 2px; }

/* Hülle: auf jeder Seite gleich */
.huelle { display: grid; grid-template-columns: var(--leiste-breite) minmax(0, 1fr); min-height: 100dvh; }
.leiste {
  position: sticky; top: 0; align-self: start; height: 100dvh;
  display: flex; flex-direction: column; gap: 22px;
  padding: 24px 14px 16px; background: var(--grund); border-right: 1px solid var(--linie);
}
.leiste-logo { display: block; padding: 0 10px; }
.leiste-logo img { display: block; height: 40px; width: auto; }
#navi { display: grid; gap: 2px; }
.navi-titel {
  margin: 16px 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--leise);
}
.navi-punkt {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 10px;
  border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500;
  transition: background .15s ease;
}
.navi-punkt:hover { background: var(--hover); }
.navi-punkt.aktiv { background: var(--karte); box-shadow: 0 1px 2px rgba(0, 0, 0, .07); font-weight: 600; }
.navi-punkt.ziel { background: var(--ziel); box-shadow: inset 0 0 0 2px var(--marke); }
.navi-punkt img, .navi-punkt svg { flex: none; display: block; width: 26px; height: 26px; }
.navi-punkt img { border-radius: 6px; }
.navi-punkt svg { padding: 3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.navi-punkt .raus { width: 16px; height: 16px; padding: 0; margin-left: auto; color: var(--leise); }
.speicherstand { margin: auto 10px 0; font-size: 13px; color: var(--leise); min-height: 18px; }
.speicherstand.fehler { color: var(--fehler); }

#inhalt { min-width: 0; padding: 40px 48px 72px; }
.seite { max-width: 1040px; margin: 0 auto; }
.seite h1 { margin: 0 0 4px; font-size: 38px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.unterzeile { margin: 0 0 28px; color: var(--leise); }
.abschnitt { margin-top: 36px; }
.abschnitt > h2 {
  margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--leise);
}

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kachel { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; background: var(--karte); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.kachel h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--leise); }
.kachel .zahl { font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kachel .zahl .zusatz { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--leise); }
.kachel .klein { margin: 8px 0 0; font-size: 14px; color: var(--leise); }
.kachel .klein + .klein { margin-top: 2px; }
.kachel .fokus { flex: 1; font-size: 18px; line-height: 1.35; font-weight: 600; }
.kachel-link { display: flex; flex-direction: column; flex: 1; margin: -18px -20px; padding: 18px 20px; border-radius: 14px; color: inherit; text-decoration: none; }
.kachel-link:hover { background: var(--leicht); }
.kachel-link:hover .mehr { text-decoration: underline; text-underline-offset: 3px; }
.kachel .mehr { margin: auto 0 0; padding-top: 10px; font-size: 14px; font-weight: 600; color: var(--marke-schrift); }

/* Kosten-Liste und Finanzplan: fertige Seiten im Rahmen */
.zurueck { display: inline-block; margin-bottom: 10px; color: var(--marke-schrift); font-weight: 600; text-decoration: none; }
.zurueck:hover { text-decoration: underline; text-underline-offset: 3px; }
.rahmen { display: block; width: 100%; height: 70vh; border: 0; border-radius: 14px; background: var(--karte); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }

/* Unternehmen */
.firmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.firma {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px;
  background: var(--karte); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  color: inherit; text-decoration: none; transition: box-shadow .2s ease;
}
.firma:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, .09); }
.firma-kopf { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.firma-kopf img { width: 30px; height: 30px; border-radius: 7px; }
.firma .rolle { font-size: 14px; font-weight: 600; color: var(--marke-schrift); }
.firma .naechster { margin: 0; font-size: 14px; color: var(--leise); }

/* Kopf einer Unternehmensseite */
.seite-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.seite-kopf img { width: 44px; height: 44px; border-radius: 10px; }
.seite-kopf h1 { margin: 0; }
.kopf-felder { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; margin-bottom: 8px; }
.feld { display: grid; gap: 4px; padding: 12px 16px; background: var(--karte); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.feld > span { font-size: 13px; font-weight: 600; color: var(--leise); }

/* Blöcke */
.tx {
  display: block; width: 100%; padding: 0; border: 0; outline: 0; background: none; resize: none;
  overflow: hidden; font: inherit; color: inherit; field-sizing: content;
}
.tx::placeholder, .zelle::placeholder { color: var(--platzhalter); }
.bloecke { padding: 14px 10px 8px 4px; background: var(--karte); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.b { position: relative; display: flex; align-items: flex-start; gap: 4px; padding: 3px 0; border-radius: 6px; }
.griff {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--platzhalter); cursor: grab; touch-action: none; opacity: 0; transition: opacity .12s ease;
}
.griff:hover { background: var(--hover); color: var(--text); }
.griff svg { width: 14px; height: 14px; fill: currentColor; }
.b:hover .griff, .b:focus-within .griff { opacity: 1; }
.b-inhalt { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding-top: 1px; }
.b.titel { margin-top: 12px; }
.b.titel:first-child { margin-top: 0; }
.b.titel .griff { margin-top: 2px; }
.b.titel .tx { font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.b.aufgabe input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--marke-schrift); }
.b.aufgabe.erledigt .tx { color: var(--leise); text-decoration: line-through; }
.b.zieht { opacity: .35; }
body.ziehen { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.griff { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.b.einfuegen-davor::before, .b.einfuegen-danach::after {
  content: ""; position: absolute; left: 30px; right: 0; height: 3px; background: var(--marke); border-radius: 2px;
}
.b.einfuegen-davor::before { top: -2px; }
.b.einfuegen-danach::after { bottom: -2px; }
.geist {
  position: fixed; z-index: 30; max-width: 420px; padding: 7px 12px; pointer-events: none;
  background: var(--karte); border-radius: 8px; box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.link-zeile .still { margin: 0; padding: 0; }
.link-zeile a { color: var(--marke-schrift); text-underline-offset: 3px; overflow-wrap: anywhere; }
.link-felder { flex: 1; display: grid; gap: 6px; min-width: 0; }
.link-felder input { min-height: 36px; padding: 0 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--karte); outline: 0; }
.link-felder input:focus { border-color: var(--marke-schrift); }
.neuer-block { display: block; margin: 8px 0 2px 30px; padding: 6px 0; border: 0; background: none; color: var(--leise); cursor: pointer; font-size: 15px; }
.neuer-block:hover { color: var(--text); }

/* Menü eines Blocks */
.menue {
  position: fixed; z-index: 40; width: 228px; max-height: calc(100dvh - 24px); overflow: auto; padding: 6px;
  background: var(--karte); border-radius: 12px; box-shadow: 0 12px 38px rgba(0, 0, 0, .2);
}
.menue button { display: block; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 7px; background: none; text-align: left; cursor: pointer; }
.menue button:hover, .menue button:focus-visible { background: var(--hover); outline: 0; }
.menue button[aria-current="true"] { font-weight: 600; }
.menue .gefahr { color: var(--fehler); }
.menue p { margin: 8px 10px 2px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--leise); }

/* Geld */
.geld-tafel { padding: 4px 16px 8px; background: var(--karte); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.geld-kopf, .zeile { display: grid; grid-template-columns: minmax(130px, 1.1fr) 104px 166px 92px minmax(170px, 2fr) 32px; gap: 8px; align-items: center; }
.geld-tafel.kosten .geld-kopf, .geld-tafel.kosten .zeile { grid-template-columns: minmax(130px, 1.1fr) 104px minmax(170px, 2fr) 32px; }
.geld-kopf { padding: 10px 0 6px; font-size: 13px; font-weight: 600; color: var(--leise); }
.zeile { padding: 5px 0; border-top: 1px solid var(--linie); }
.zelle { width: 100%; min-height: 34px; padding: 5px 6px; border: 1px solid transparent; border-radius: 7px; background: none; outline: 0; }
textarea.zelle { resize: none; overflow: hidden; line-height: 1.35; font-size: 14px; color: var(--leise); field-sizing: content; }
.zelle:hover { background: var(--grund); }
.zelle:focus { background: var(--karte); border-color: var(--marke-schrift); }
.zelle.betrag { text-align: right; font-variant-numeric: tabular-nums; }
.zelle.falsch { border-color: var(--fehler); }
.geld-kopf .rechts { text-align: right; padding-right: 7px; }
.zelle.stand-fest { color: var(--fest); font-weight: 600; }
.zelle.stand-offen { color: var(--offen); font-weight: 600; }
.zeile-weg { width: 32px; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--leise); cursor: pointer; font-size: 18px; line-height: 1; }
.zeile-weg:hover { background: var(--hover); color: var(--fehler); }
.neue-zeile { margin: 6px 0 2px; padding: 6px 0; border: 0; background: none; color: var(--leise); cursor: pointer; font-size: 15px; }
.neue-zeile:hover { color: var(--text); }

/* Hinweis unten, z. B. Rückgängig */
.hinweis {
  position: fixed; z-index: 50; left: 16px; right: 16px; bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 680px; margin-inline: auto; padding: 10px 16px;
  background: var(--text); color: var(--knopf-text); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: 15px;
}
.hinweis button { flex: none; padding: 2px 0; border: 0; background: none; color: var(--hinweis-link); font-weight: 600; cursor: pointer; }

/* Anmeldung und Störung */
.still { display: inline-block; margin-top: 8px; padding: 6px 0; border: 0; background: none; color: var(--leise); font: 14px/1.3 var(--schrift); cursor: pointer; }
.still:hover { color: var(--text); }
.fehler { margin: 8px 0 0; color: var(--fehler); font-size: 14px; }
.fehler:empty { display: none; }
.anmelden { display: grid; gap: 12px; max-width: 380px; margin: 12vh auto 0; padding: 34px; background: var(--karte); border-radius: 22px; }
.anmelden img { height: 40px; width: auto; }
.anmelden h1 { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -.016em; }
.anmelden p { margin: 0; color: var(--leise); font-size: 15px; }
.anmelden .fehler { margin: 0; color: var(--fehler); font-size: 14px; }
.anmelden input { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); font-size: 16px; outline: 0; }
.anmelden input:focus { border-color: var(--marke-schrift); }
.anmelden button { min-height: 48px; border: 0; border-radius: 980px; background: var(--text); color: var(--knopf-text); font-weight: 600; cursor: pointer; }
.anmelden button:hover { background: var(--invers-hover); }
#anmeldung { padding: 0 16px; }
#meldung { margin-top: 12vh; text-align: center; color: var(--leise); }

@media (max-width: 1240px) {
  #inhalt { padding: 32px 24px 64px; }
  .kacheln, .firmen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kacheln > :last-child, .firmen > :last-child { grid-column: 1 / -1; }
  .geld-kopf { display: none; }
  .geld-tafel.kosten .zeile { grid-template-columns: minmax(0, 1fr) 104px 32px; }
  .geld-tafel.kosten .zeile .notiz { grid-column: 1 / -1; grid-row: 2; }
  .geld-tafel:not(.kosten) .zeile { grid-template-columns: minmax(0, 1fr) 104px 32px; }
  .geld-tafel:not(.kosten) .zeile .wann { grid-column: 1; grid-row: 2; }
  .geld-tafel:not(.kosten) .zeile .stand { grid-column: 2 / 4; grid-row: 2; }
  .geld-tafel:not(.kosten) .zeile .notiz { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 760px) {
  .huelle { display: block; }
  .leiste {
    position: sticky; z-index: 20; height: auto; display: block; padding: max(8px, env(safe-area-inset-top)) 8px 6px;
    border-right: 0; border-bottom: 1px solid var(--linie);
  }
  .leiste-logo, .navi-titel { display: none; }
  #navi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .navi-punkt { flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: 4px 2px; font-size: 12px; line-height: 1.15; text-align: center; }
  .navi-punkt span { max-width: 100%; overflow-wrap: anywhere; }
  .navi-punkt .raus { display: none; }
  .speicherstand { position: fixed; right: 10px; bottom: max(6px, env(safe-area-inset-bottom)); margin: 0; min-height: 0; font-size: 12px; pointer-events: none; }
  #inhalt { padding: 22px 16px 64px; }
  .seite h1 { font-size: 30px; }
  .kacheln, .firmen, .kopf-felder { grid-template-columns: minmax(0, 1fr); }
  .kachel .zahl { font-size: 28px; }
  .griff { width: 30px; height: 30px; }
  .bloecke { padding-left: 2px; }
  .geld-tafel { padding: 2px 10px 6px; }
  .geld-tafel.kosten .zeile { grid-template-columns: minmax(0, 1fr) 96px 32px; }
}

/* Touch: iOS zoomt bei Feldern unter 16 px, und ohne Hover muss der Griff immer zu sehen sein */
@media (pointer: coarse) {
  .tx, .zelle, textarea.zelle, .link-felder input { font-size: 16px; }
}
@media (hover: none) {
  .griff { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Marken-Themen je Seite (03.11.): zeichnen() setzt data-marke auf #inhalt. Die Leiste bleibt MaThie e-Com, das Dach.
   Werte aus den Brandbooks Website/branding/brandbook-geruest/<marke>/ (Kapitel 03 Farben, 04 Schrift, 06 Bewegung).
   [Rechnung] = abgeleitet, steht so nicht im Buch. Menü, Geist und Hinweis hängen am body und bleiben MaThie. */
#inhalt { background: var(--grund); }
#inhalt[data-marke] { font-family: var(--schrift); color: var(--text); }  /* body setzt beides einmal; hier neu, damit die Marken-Werte greifen */

/* MaThie WebDesign: MTWD/07-website/assets/mtwd.css :root (Buch mtwd, Kapitel 03/04/06). Albert Sans liegt nicht auf dem Server,
   die Seite fällt auf Avenir Next zurück, wie die Rahmen im Buch. */
#inhalt[data-marke="mtwd"] {
  --grund: #F2F2F2; --text: #231F20; --leise: #706D6E; --linie: rgba(35, 31, 32, .10); --hover: #e8e8e8; /* hover [Rechnung] */
  --marke: #00ADEF; --marke-schrift: #007FB0;
  --schrift: "Albert Sans", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mt-t2: 390ms; --mt-k-ein: cubic-bezier(0, 0, .2, 1);
}
#inhalt[data-marke="mtwd"] .seite > * { animation: mt-ein var(--mt-t2) var(--mt-k-ein) both; }
#inhalt[data-marke="mtwd"] .seite > :nth-child(2) { animation-delay: 60ms; }
#inhalt[data-marke="mtwd"] .seite > :nth-child(3) { animation-delay: 120ms; }
#inhalt[data-marke="mtwd"] .seite > :nth-child(n+4) { animation-delay: 180ms; }
@keyframes mt-ein { from { opacity: 0; transform: translateY(12px); } }

/* Sunicorn: Buch sunicorn, Kapitel 03 (Hell #F4F1EA, Grund #121016, Dunkel #271C23, Amber #C87013, alle [Beleg] aus dem Logo);
   helle Fläche, damit Logo und Felder lesbar bleiben. Keine Bewegung: Sunicorn hat noch keine Oberfläche (Kapitel 06 Offen). */
#inhalt[data-marke="sunicorn"] {
  --grund: #F4F1EA; --text: #121016; --leise: #5E525A; --linie: rgba(18, 16, 22, .12); --hover: #ebe6dc; /* leise, linie, hover [Rechnung] */
  --marke: #C87013; --marke-schrift: #8C4D0B; /* marke-schrift [Rechnung]: Amber dunkler für Text auf Hell */
  --schrift: "Avenir Next", Avenir, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ContentSpark: Website/frontend/css/tokens.css [data-theme="light"] (Buch contentspark, Kapitel 03/04/06). Schriften von der eigenen Domain. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-variable-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-variable-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-variable-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-variable-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
#inhalt[data-marke="contentspark"] {
  --grund: #FAFAFE; --karte: #FFFFFF; --text: #1A1A24; --leise: #6B6B85; --linie: #DCDCE6; --hover: #F0F0F8;
  --marke: #FF4081; --marke-schrift: #C2185B;
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#inhalt[data-marke="contentspark"] h1, #inhalt[data-marke="contentspark"] .b.titel .tx { font-family: "Space Grotesk", "Inter", sans-serif; }
#inhalt[data-marke="contentspark"] .seite > * { animation: cs-ein .7s cubic-bezier(.2, .7, .2, 1) both; }
#inhalt[data-marke="contentspark"] .seite > :nth-child(2) { animation-delay: .09s; }
#inhalt[data-marke="contentspark"] .seite > :nth-child(3) { animation-delay: .18s; }
#inhalt[data-marke="contentspark"] .seite > :nth-child(4) { animation-delay: .27s; }
#inhalt[data-marke="contentspark"] .seite > :nth-child(n+5) { animation-delay: .36s; }
@keyframes cs-ein { from { opacity: 0; transform: translateY(34px); } }

/* Leiste: der aktive Punkt trägt die Farbe seiner Marke als Strich links */

/* Hauptmenü als Übersicht (04.11.): oben die drei Firmen mit Rolle und nächstem Schritt, darunter Geld und Plan als Kacheln,
   unten Maltes Notizen. Die Firmen-Karte führt zum Dashboard der Firma; „Notizen“ bzw. „Neustart“ auf die Seite hier. */
.firmen { gap: 16px; }
.firma { position: relative; gap: 10px; padding: 20px 20px 16px; border-top: 4px solid var(--linie); }
.firma[data-firma="webdesign"] { border-top-color: #00ADEF; }
.firma[data-firma="sunicorn"] { border-top-color: #C87013; }
.firma[data-firma="contentspark"] { border-top-color: #FF4081; }
.firma-kopf img { width: 40px; height: 40px; border-radius: 9px; }
.firma-name { color: inherit; text-decoration: none; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.firma-name::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }  /* ganze Karte klickbar */
.firma-name:focus-visible { outline: 0; }
.firma:has(.firma-name:focus-visible) { outline: 2px solid var(--marke-schrift); outline-offset: 2px; }
.firma .rolle { align-self: flex-start; padding: 2px 10px; border-radius: 980px; background: var(--grund); font-size: 13px; }
.firma-schritt { display: grid; gap: 2px; }
.firma-schritt > span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.firma .naechster { color: var(--text); font-size: 15px; line-height: 1.4; }
.firma-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linie); font-size: 14px; font-weight: 600; }
.firma-oeffnen { color: var(--marke-schrift); }
.firma:hover .firma-oeffnen { text-decoration: underline; text-underline-offset: 3px; }
.firma-notiz { position: relative; z-index: 1; padding: 4px 10px; margin: -4px -10px; border-radius: 8px; color: var(--leise); text-decoration: none; }
.firma-notiz:hover { background: var(--hover); color: var(--text); }

.haupt .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kachel-fokus { grid-column: span 2; }
.kachel h2 { display: flex; align-items: center; gap: 6px; }
.kachel h2 svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kachel-text { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.geld-bearbeiten { margin-top: 14px; }
.geld-bearbeiten > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 980px;
  background: var(--karte); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none;
}
.geld-bearbeiten > summary::-webkit-details-marker { display: none; }
.geld-bearbeiten > summary::before { content: "▸"; color: var(--leise); transition: transform .15s ease; }
.geld-bearbeiten[open] > summary::before { transform: rotate(90deg); }
.geld-bearbeiten .abschnitt { margin-top: 20px; }
.seite-kopf { flex-wrap: wrap; }
.zum-dashboard { margin-left: auto; padding: 8px 14px; border-radius: 980px; background: var(--karte); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); color: var(--marke-schrift); font-size: 14px; font-weight: 600; text-decoration: none; }
.zum-dashboard:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1240px) {
  .haupt .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel-fokus { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* Leiste oben: eine Zeile, die seitlich wischt, statt drei Zeilen Symbole */
  #navi { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  #navi::-webkit-scrollbar { display: none; }
  .navi-punkt { flex: 0 0 74px; }
  .navi-punkt span[data-kurz] { font-size: 0; }
  .navi-punkt span[data-kurz]::after { content: attr(data-kurz); font-size: 12px; }
  .haupt .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .haupt .kachel { padding: 14px 14px; }
  .haupt .kachel-link { margin: -14px; padding: 14px; }
  .haupt .kachel .zahl { font-size: 24px; }
  .kachel-text { font-size: 17px; }
  .haupt .kachel .klein { font-size: 13px; }
  .zum-dashboard { margin-left: 0; }
}

/* Hell/Dunkel (Malte 04.11.: „Dark White Mode Button“). Ein Schlüssel `mathie-thema` in localStorage für alle /mathie/*-Dashboards
   (/mathie/sunicorn/ und /mathie/webdesign/ lesen ihn mit); ohne Wahl bleibt jede Shell bei ihrem Standard, hier hell.
   Dunkel-Werte für Grund, Karte, Text, Leise, Linie: Website/frontend/css/tokens.css [data-theme="dark"]; Marken-Akzente und
   Statusfarben heller gestellt, damit sie auf Dunkel lesbar bleiben [Rechnung]. */
:root[data-thema="dunkel"] {
  --grund: #111113; --karte: #1B1B1E; --text: #F5F5F5; --leise: #9A9AA0; --linie: #2A2A2E; --hover: #1F1F23;
  --marke-schrift: #4FC3F7; --fest: #5CC98A; --offen: #E0A94D; --fehler: #F28B82;
  --knopf-text: #111113; --invers-hover: #fff; --hinweis-link: #007fb3; --ziel: #0d3a4d; --leicht: #20202a; --platzhalter: #6e6e73;
  color-scheme: dark;
}
/* Logo-SVG hat feste dunkle Füllung: im dunklen Thema Helligkeit umkehren, Farbton bleibt (Cyan bleibt Cyan) */
:root[data-thema="dunkel"] .leiste-logo img, :root[data-thema="dunkel"] .anmelden img { filter: invert(1) hue-rotate(180deg); }
:root[data-thema="dunkel"] #inhalt[data-marke="mtwd"] { --grund: #141213; --karte: #231F20; --text: #F2F2F2; --leise: #A9A6A7; --linie: rgba(255, 255, 255, .12); --hover: #2E292A; --marke-schrift: #5BC8F2; }
:root[data-thema="dunkel"] #inhalt[data-marke="sunicorn"] { --grund: #121016; --karte: #271C23; --text: #F4F1EA; --leise: #B9AFB3; --linie: rgba(244, 241, 234, .16); --hover: #33262E; --marke-schrift: #E39A4A; }
:root[data-thema="dunkel"] #inhalt[data-marke="contentspark"] { --grund: #111113; --karte: #1B1B1E; --text: #F5F5F5; --leise: #B5B5BA; --linie: rgba(255, 255, 255, .08); --hover: #262628; --marke-schrift: #FF79A8; }
:root[data-thema="dunkel"] .navi-punkt.aktiv { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

/* Der Umschalter sitzt in der Leiste unter dem Menü; auf dem Handy als runder Knopf unten links (die Leiste ist dort eine Zeile) */
.thema-knopf {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font-weight: 500; cursor: pointer; text-align: left; transition: background .15s ease;
}
.thema-knopf:hover { background: var(--hover); }
.thema-knopf svg { flex: none; width: 26px; height: 26px; padding: 3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .thema-knopf { position: fixed; left: 10px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 5; min-height: 0; padding: 8px; border-radius: 999px; background: var(--karte); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
  .thema-knopf:hover { background: var(--karte); }
  .thema-knopf span { display: none; }
}