/* Wolke – ruhiges, helles Design: Salbeigrün und Sonnenorange auf warmem Weiß (Entwurf vom 2026-10-26). */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --grund: #f7f6f1;
  --leiste: #f2f1eb;
  --karte: #ffffff;
  --rand: #ebe8df;
  --rand-stark: #dcd8cc;
  --text: #1f3833;
  --text-2: #4d5f5a;
  --leise: #7d8a85;
  --salbei: #5f7a69;
  --salbei-dunkel: #4c6656;
  --salbei-hell: #e7ece6;
  --salbei-zart: #f0f3ee;
  --sonne: #f2a33a;
  --sonne-hell: #fcefd9;
  --himmel: #5b8fd0;
  --rot: #c4563f;
  --rot-hell: #f8e4df;
  --schatten: 0 1px 2px rgba(40, 50, 45, .04), 0 4px 16px rgba(40, 50, 45, .04);
  --radius: 14px;
  --radius-klein: 10px;
  --schrift: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--salbei-dunkel); }
[hidden] { display: none !important; }
.leise { color: var(--leise); }
.klein { font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------------ Logo */
.logo { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--salbei); text-decoration: none; }
.logo svg.wolke-zeichen { width: 108px; height: auto; display: block; margin-bottom: -16px; }
.logo .wortmarke { font-size: 46px; font-weight: 500; letter-spacing: -.5px; line-height: 1; color: #5c7363; }
.logo .wortmarke i { font-style: normal; color: var(--sonne); }
.logo .unterzeile { font-size: 11px; color: var(--text-2); margin-top: 8px; line-height: 1.4; }
.logo.klein svg.wolke-zeichen { width: 44px; margin-bottom: -7px; }
.logo.klein .wortmarke { font-size: 22px; }

/* ------------------------------------------------------------------ Grundgerüst */
/* Menü links wie in DONNA (rand_menue.js): ausgeblendet, kommt über den Griff in der Mitte des linken Rands und legt sich über die Seite.
   Bewegung: hinein weich auslaufend, hinaus etwas schneller; nur transform. */
:root { --rand-hinein: .22s cubic-bezier(.2, .8, .2, 1); --rand-hinaus: .17s cubic-bezier(.4, 0, .7, .2); }
.rahmen { min-height: 100vh; }
.leiste {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 45; width: 262px;
  background: var(--leiste); border-right: 1px solid var(--rand); box-shadow: 12px 0 34px rgba(30, 45, 40, .14);
  padding: 28px 20px 20px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
  transform: translate3d(calc(-100% - 40px), 0, 0); visibility: hidden; will-change: transform; backface-visibility: hidden;
  transition: transform var(--rand-hinaus), visibility 0s linear .17s;
}
.rand-links-auf .leiste { transform: none; visibility: visible; transition: transform var(--rand-hinein); }
.rand-griff { position: fixed; z-index: 44; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--rand-stark);
  background: #fff; color: var(--text-2); opacity: .6; transition: opacity .15s, color .15s; cursor: pointer; }
.rand-griff:hover, .rand-griff:focus-visible, .rand-griff[aria-expanded="true"] { opacity: 1; color: var(--salbei-dunkel); }
.rand-griff.links { left: 0; top: 50%; width: 18px; height: 56px; border-left: 0; border-radius: 0 10px 10px 0; transform: translateY(-50%); box-shadow: var(--schatten); }
.rand-griff.links svg { width: 13px; height: 13px; }
.rand-links-auf .rand-griff.links { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .leiste { transition: none !important; } }
/* Logo oben links am Dashboard, auch wenn das Menü weg ist */
.kopf-logo { display: block; text-decoration: none; margin-right: 10px; }   /* auf jeder Seite: Klick führt zum Dashboard */
/* „Zurück“ neben dem Logo, nicht am Dashboard */
.kopf-zurueck { flex: none; gap: 6px; padding: 8px 14px 8px 10px; }
.kopf-zurueck svg { width: 18px; height: 18px; }
@media (max-width: 1199px) { .kopf-zurueck { padding: 8px 10px; } .kopf-zurueck span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }   /* schmal: nur der Pfeil */
.auf-start .kopf-zurueck { display: none; }
.rahmen:not(.auf-start) .kopf-logo .logo .unterzeile { display: none; }   /* Slogan nur am Dashboard – sonst bleibt der Kopf flach */
.kopf-logo .logo { flex-direction: column; align-items: flex-start; }
.kopf-logo .logo svg.wolke-zeichen { width: 58px; margin-bottom: -9px; margin-left: 2px; }
.kopf-logo .logo .wortmarke { font-size: 30px; }
.kopf-logo .logo .unterzeile { font-size: 11px; margin-top: 5px; text-align: left; }
.leiste .logo { margin-bottom: 26px; }
.leiste nav { display: flex; flex-direction: column; gap: 2px; }
.leiste .nav-trenner { height: 1px; background: var(--rand); margin: 18px 4px; }
.nav-punkt {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 16px; border-radius: 12px;
  color: var(--text); text-decoration: none; font-size: 15.5px; font-weight: 500;
  border: 0; background: none; cursor: pointer; text-align: left; width: 100%;
}
.nav-punkt svg { width: 22px; height: 22px; flex: none; color: var(--text-2); }
.nav-punkt:hover { background: rgba(95, 122, 105, .07); }
.nav-punkt.aktiv { background: #e5e9e2; }
.nav-punkt .marke { margin-left: auto; font-size: 11px; color: var(--leise); font-weight: 500; }

.haupt { min-width: 0; padding: 20px 34px 40px; max-width: 1640px; margin: 0 auto; }
.kopf { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.suche {
  flex: 1; max-width: 600px; position: relative;
}
.suche input {
  width: 100%; border: 1px solid transparent; background: #efeee8; border-radius: 999px;
  padding: 11px 18px 11px 48px; font-size: 14.5px; outline: none;
}
.suche input:focus { background: #fff; border-color: var(--rand-stark); }
.suche > svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-2); }
.suche-ergebnis {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(30, 40, 35, .12);
  max-height: 420px; overflow: auto; padding: 6px;
}
.suche-ergebnis button { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.suche-ergebnis button:hover, .suche-ergebnis button.fokus { background: var(--salbei-zart); }
.suche-ergebnis .art { font-size: 11px; color: var(--leise); width: 92px; flex: none; text-transform: uppercase; letter-spacing: .4px; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.glocke { position: relative; border: 0; background: none; cursor: pointer; padding: 6px; color: var(--text-2); }
.glocke svg { width: 24px; height: 24px; }
.glocke .punkt { position: absolute; top: 4px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--sonne); border: 2px solid var(--grund); }
.profil { display: flex; align-items: center; gap: 12px; border: 0; background: none; cursor: pointer; text-align: left; padding: 4px; border-radius: 12px; }
.profil:hover { background: rgba(95, 122, 105, .06); }
.profil .name { font-weight: 600; font-size: 15px; }
.profil .praxis { font-size: 12.5px; color: var(--text-2); }
.profil svg { width: 16px; height: 16px; color: var(--text-2); }
.kreis {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px; color: var(--salbei-dunkel); background: var(--salbei-hell);
}
.kreis.k1 { background: #fbe9d2; color: #a5651b; }
.kreis.k2 { background: #e2ecef; color: #3e6878; }
.kreis.k3 { background: #efe6ee; color: #7a4f73; }
.kreis.klein { width: 34px; height: 34px; font-size: 12.5px; }
.kreis.gross { width: 64px; height: 64px; font-size: 20px; }

.aufklapp {
  position: absolute; z-index: 40; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(30, 40, 35, .14); padding: 6px; min-width: 240px;
}
.aufklapp button, .aufklapp a { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-decoration: none; color: var(--text); font-size: 14.5px; }
.aufklapp button:hover, .aufklapp a:hover { background: var(--salbei-zart); }
.aufklapp svg { width: 18px; height: 18px; color: var(--text-2); }
.aufklapp .kopfzeile { padding: 10px 12px; border-bottom: 1px solid var(--rand); margin-bottom: 4px; font-size: 13px; color: var(--text-2); }

/* ------------------------------------------------------------------ Karten und Bausteine */
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); }
.karte-kopf { display: flex; align-items: center; gap: 12px; padding: 20px 20px 10px; }
.karte-kopf h2 { margin: 0; font-size: 18px; font-weight: 600; }
.karte-kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.karte-inhalt { padding: 6px 20px 20px; }
.textlink { border: 0; background: none; color: var(--salbei-dunkel); font-weight: 500; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px; text-decoration: none; }
.textlink svg { width: 16px; height: 16px; }
.textlink:hover { text-decoration: underline; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--rand-stark); background: #fff; color: var(--text);
  padding: 10px 18px; border-radius: 999px; font-weight: 500; font-size: 14.5px; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.knopf:hover { background: var(--salbei-zart); }
.knopf svg { width: 18px; height: 18px; }
.knopf.haupt-knopf { background: var(--salbei); border-color: var(--salbei); color: #fff; }
.knopf.haupt-knopf:hover { background: var(--salbei-dunkel); }
.knopf.gefahr { color: var(--rot); border-color: #ecc9c0; }
.knopf.gefahr:hover { background: var(--rot-hell); }
.knopf.still { border-color: transparent; background: none; }
.knopf.still:hover { background: rgba(95, 122, 105, .08); }
.knopf:disabled { opacity: .55; cursor: default; }
.icon-knopf { border: 0; background: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--text-2); display: inline-flex; }
.icon-knopf:hover { background: rgba(95, 122, 105, .1); }
.icon-knopf svg { width: 20px; height: 20px; }

.seite-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.seite-kopf h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.3px; }
.seite-kopf .rechts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.punkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--salbei); }
.etikett { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--salbei-hell); color: var(--salbei-dunkel); }
.etikett.sonne { background: var(--sonne-hell); color: #9a5b12; }
.etikett.grau { background: #eeede8; color: var(--text-2); }
.etikett.rot { background: var(--rot-hell); color: var(--rot); }
.etikett.himmel { background: #e3edf8; color: #2f5f96; }
.tn-app { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rand-stark); display: flex; flex-direction: column; gap: 8px; }
.leer { padding: 28px 10px; text-align: center; color: var(--leise); font-size: 14px; }
.hinweis { padding: 12px 16px; border-radius: var(--radius-klein); background: var(--sonne-hell); color: #7a4b0f; font-size: 14px; }
.hinweis.gruen { background: var(--salbei-hell); color: var(--salbei-dunkel); }
.hinweis.rot { background: var(--rot-hell); color: var(--rot); }

/* ------------------------------------------------------------------ Dashboard */
.schnell { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 18px; }
.schnell button {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 22px 20px 18px; text-align: left; cursor: pointer; transition: transform .12s, border-color .12s;
}
.schnell button:hover { transform: translateY(-1px); border-color: var(--rand-stark); }
.schnell .rund { width: 60px; height: 60px; border-radius: 50%; background: var(--salbei-hell); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; color: var(--salbei-dunkel); }
.schnell .rund svg { width: 30px; height: 30px; }
.schnell b { display: block; font-weight: 500; font-size: 15px; }
.schnell span { display: block; font-size: 13px; color: var(--leise); margin-top: 3px; }

.raster-drei { display: grid; grid-template-columns: 1.15fr 1fr 1.05fr; gap: 16px; margin-bottom: 18px; }
.heute-kopf { display: flex; align-items: center; gap: 8px; color: var(--leise); font-size: 15px; }
.zeile {
  display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid #f0eee8;
  width: 100%; border-left: 0; border-right: 0; border-top: 0; background: none; text-align: left; cursor: pointer;
}
.zeile:last-child { border-bottom: 0; }
.zeile:hover { background: #fbfaf7; }
.zeile .zeit { width: 118px; flex: none; color: var(--text-2); font-size: 15px; }
.zeile .was { flex: 1; min-width: 0; }
.zeile .was b { display: block; font-weight: 500; font-size: 15px; }
.zeile .was small { display: block; color: var(--leise); font-size: 13.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile .weiter { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.zeile .video { width: 22px; height: 22px; color: var(--text-2); }
.zeile .faellig { font-size: 13px; color: var(--leise); flex: none; }
.zeile .faellig.heute { color: var(--sonne); font-weight: 500; }
.zeile .faellig.ueber { color: var(--rot); font-weight: 500; }
.karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px 18px; }

.haken { width: 20px; height: 20px; border: 1.6px solid #b9bfb9; border-radius: 4px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #fff; cursor: pointer; padding: 0; }
.haken.an { background: var(--salbei); border-color: var(--salbei); color: #fff; }
.haken svg { width: 14px; height: 14px; }
.erledigt-text { text-decoration: line-through; color: var(--leise); }

.infokarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.infokarte {
  position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--rand); min-height: 186px;
  padding: 28px 28px 28px 46%; background: #f1f3ee; cursor: pointer; text-align: left;
}
.infokarte.sonne { background: #fbf1e3; }
.infokarte.grau { background: #eff1ec; }
.infokarte svg.bild { position: absolute; left: 0; bottom: 0; height: 100%; width: 44%; }
.infokarte h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.infokarte p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.infokarte .pfeil { position: absolute; right: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--schatten); }
.infokarte .pfeil svg { width: 20px; height: 20px; }

/* Laptop und breiter: alles auf einen Blick, ohne zu rollen – flache Schnellzugriffe, vier Karten in einer Reihe, kompakte Bildkarten */
.raster-vier { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin-bottom: 18px; }
.raster-vier > *, .raster-drei > * { min-width: 0; }
@media (min-width: 1001px) {
  .schnell { gap: 12px; margin-bottom: 16px; }
  .schnell button { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; }
  .schnell .rund { grid-row: 1 / 3; width: 42px; height: 42px; margin: 0; }
  .schnell .rund svg { width: 22px; height: 22px; }
  .schnell b { font-size: 14.5px; }
  .schnell span { font-size: 12.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .raster-drei > .karte, .raster-vier > .karte { display: flex; flex-direction: column; max-height: min(540px, calc(100vh - 400px)); min-height: 300px; }
  .raster-drei > .karte > .karte-inhalt, .raster-vier > .karte > .karte-inhalt { flex: 1; overflow-y: auto; min-height: 0; }
  .raster-drei > .karte > .karte-fuss, .raster-vier > .karte > .karte-fuss { padding-top: 10px; }
  .infokarte { min-height: 112px; padding: 18px 64px 18px 31%; }
  .infokarte svg.bild { width: 29%; }
  .infokarte h3 { font-size: 16px; margin-bottom: 6px; }
  .infokarte p { font-size: 13.5px; line-height: 1.45; }
  .infokarte .pfeil { width: 36px; height: 36px; right: 14px; bottom: 14px; }
}
.hh-karte .hh-punkt { flex-wrap: wrap; gap: 6px 10px; }
/* vier Karten nebeneinander: kompakte Köpfe, Knöpfe unter dem Text, lange Texte auf zwei Zeilen */
.raster-vier .karte-kopf { padding: 16px 16px 8px; flex-wrap: wrap; row-gap: 4px; }
.raster-vier .karte-kopf h2 { font-size: 16.5px; white-space: nowrap; }
.raster-vier .karte-kopf .rechts { gap: 4px; }
.raster-vier .karte-kopf .textlink { font-size: 13px; white-space: nowrap; }
.raster-vier .heute-kopf { font-size: 13px; gap: 2px; }
.raster-vier .karte-inhalt { padding: 4px 16px 14px; }
.raster-vier .karte-fuss { padding: 0 16px 14px; flex-wrap: wrap; }
.raster-vier .karte-fuss .knopf { white-space: nowrap; padding: 9px 14px; }
.raster-vier .karte-fuss .textlink { white-space: nowrap; }
.raster-vier .zeile .zeit { width: 92px; font-size: 14px; }
.raster-vier .hh-punkt .hh-text { flex: 1 1 calc(100% - 70px); }
.raster-vier .hh-punkt .hh-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.raster-vier .hh-punkt .hh-knoepfe { flex-basis: 100%; justify-content: flex-end; }

/* ------------------------------------------------------------------ Listen und Tabellen */
.liste { width: 100%; border-collapse: collapse; }
.liste th { text-align: left; font-size: 12px; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: .4px; padding: 12px 14px; border-bottom: 1px solid var(--rand); }
.liste td { padding: 13px 14px; border-bottom: 1px solid #f0eee8; vertical-align: middle; }
.liste tr.klickbar { cursor: pointer; }
.liste tr.klickbar:hover td { background: #fbfaf7; }
.liste .name-zelle { display: flex; align-items: center; gap: 12px; }
.filter { display: flex; gap: 8px; flex-wrap: wrap; }
.filter button { border: 1px solid var(--rand-stark); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13.5px; cursor: pointer; }
.filter button.an { background: var(--salbei-hell); border-color: #cbd6cc; color: var(--salbei-dunkel); font-weight: 500; }
.feld-suche { border: 1px solid var(--rand-stark); border-radius: 999px; padding: 9px 16px; background: #fff; min-width: 220px; outline: none; }
.feld-suche:focus { border-color: var(--salbei); }

/* Klient:in im Detail */
.detail { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.detail > * { min-width: 0; }                                        /* sonst drückt der breite Inhalt (Reiter, Tabellen) die Seite am Handy auseinander */
.steckbrief .kopfteil { display: flex; align-items: center; gap: 16px; padding: 22px 20px 12px; }
.steckbrief h2 { margin: 0; font-size: 21px; }
.steckbrief dl { margin: 0; padding: 4px 20px 20px; display: grid; grid-template-columns: 110px 1fr; gap: 9px 12px; font-size: 14px; }
.steckbrief dt { color: var(--leise); }
.steckbrief dd { margin: 0; overflow-wrap: anywhere; }
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--rand); padding: 0 16px; overflow-x: auto; scrollbar-width: thin; }
.reiter button { border: 0; background: none; padding: 14px 14px 12px; cursor: pointer; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: none; }
.reiter button.an { color: var(--text); border-bottom-color: var(--salbei); }
.doku-eintrag { padding: 16px 20px; border-bottom: 1px solid #f0eee8; cursor: pointer; }
.doku-eintrag:hover { background: #fbfaf7; }
.doku-eintrag:last-child { border-bottom: 0; }
.doku-eintrag .oben { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.doku-eintrag .auszug { color: var(--text-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doku-liste { display: flex; flex-direction: column; }
.doku-lesen-liste { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 8px; }
.doku-lesen { border: 1px solid #ebe8e0; border-radius: 12px; padding: 14px 18px; scroll-margin-top: 8px; }
.doku-lesen.gewaehlt { border-color: var(--salbei-dunkel); box-shadow: 0 0 0 3px var(--salbei-zart); }
.doku-lesen-kopf { font-weight: 600; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.doku-lesen h4 { margin: 12px 0 2px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.doku-lesen p { margin: 0; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.doku-lesen-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.doku-zeile { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 20px; border: 0; border-bottom: 1px solid #f0eee8; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.doku-zeile:last-child { border-bottom: 0; }
.doku-zeile:hover, .doku-zeile:focus-visible { background: #fbfaf7; }
.doku-zeile .name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doku-zeile .datum { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ Kalender */
.kal-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.kal-leiste h2 { margin: 0 8px; font-size: 19px; font-weight: 600; min-width: 220px; }
.kal-woche { display: grid; grid-template-columns: 56px repeat(7, 1fr); overflow: hidden; }
.kal-woche.tag { grid-template-columns: 56px 1fr; }
.kal-kopfzelle { padding: 12px 6px; text-align: center; border-bottom: 1px solid var(--rand); font-size: 13px; color: var(--text-2); background: #fcfbf8; position: sticky; top: 0; z-index: 2; }
.kal-kopfzelle b { display: block; font-size: 19px; font-weight: 600; color: var(--text); margin-top: 2px; }
.kal-kopfzelle.heute b { display: flex; width: 34px; height: 34px; margin: 2px auto 0; border-radius: 50%; align-items: center; justify-content: center; background: var(--salbei); color: #fff; }
.kal-zeiten { position: relative; padding-top: 0; }
.kal-zeiten div:first-child { visibility: hidden; }
.kal-zeiten div { height: 52px; font-size: 11.5px; color: var(--leise); text-align: right; padding-right: 8px; transform: translateY(-7px); }
.kal-spalte { position: relative; border-left: 1px solid #f0eee8; background-image: linear-gradient(#f0eee8 1px, transparent 1px); background-size: 100% 52px; cursor: copy; }
.kal-spalte.wochenende { background-color: #fbfaf6; }
.kal-termin {
  position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 5px 8px; font-size: 12.5px; overflow: hidden; cursor: pointer;
  background: var(--salbei-hell); border-left: 3px solid var(--salbei); color: var(--text); line-height: 1.3;
}
.kal-termin b { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-termin span { color: var(--text-2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-termin.abgesagt { opacity: .55; text-decoration: line-through; }
.kal-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--sonne); z-index: 1; }
.kal-jetzt::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--sonne); }
.kal-monat { display: grid; grid-template-columns: repeat(7, 1fr); }
.kal-monat .wtag { padding: 10px; font-size: 12px; color: var(--leise); text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--rand); }
.kal-monat .mtag { min-height: 112px; border-right: 1px solid #f0eee8; border-bottom: 1px solid #f0eee8; padding: 6px; cursor: copy; }
.kal-monat .mtag:nth-child(7n) { border-right: 0; }
.kal-monat .mtag.fremd { background: #fbfaf6; color: var(--leise); }
.kal-monat .mtag .nr { font-size: 13px; font-weight: 500; margin-bottom: 4px; display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; }
.kal-monat .mtag.heute .nr { background: var(--salbei); color: #fff; }
.kal-monat .mini { display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 2px 4px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; }
.kal-monat .mini:hover { background: var(--salbei-zart); }
.kal-monat .mini .punkt { width: 8px; height: 8px; }

/* ------------------------------------------------------------------ Dialoge und Formulare */
dialog.fenster {
  border: 0; padding: 0; border-radius: 18px; width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 32px);
  box-shadow: 0 24px 70px rgba(20, 30, 25, .25); color: var(--text); background: #fff;
}
dialog.fenster.breit { width: min(860px, calc(100vw - 24px)); }
dialog.fenster::backdrop { background: rgba(31, 45, 40, .35); }
.fenster-kopf { display: flex; align-items: center; gap: 12px; padding: 20px 24px 8px; }
.fenster-kopf h2 { margin: 0; font-size: 20px; font-weight: 600; }
.fenster-kopf .icon-knopf { margin-left: auto; }
.fenster-inhalt { padding: 10px 24px 8px; overflow: auto; }
/* Knöpfe bleiben sichtbar, der Inhalt rollt (wichtig am Handy bei langen Fenstern wie „Beleg buchen“) */
dialog.fenster > form { display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
dialog.fenster > form > .fenster-inhalt { flex: 1 1 auto; min-height: 0; }
dialog.fenster > form > .fenster-kopf, dialog.fenster > form > .fenster-fuss { flex: none; }
dialog.fenster > form > .fenster-fuss { border-top: 1px solid var(--rand); padding-top: 12px; }
.fenster-fuss { display: flex; gap: 10px; align-items: center; padding: 14px 24px 22px; flex-wrap: wrap; }
.fenster-fuss .rechts { margin-left: auto; display: flex; gap: 10px; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.formular .ganz { grid-column: 1 / -1; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > span { font-size: 13px; font-weight: 500; color: var(--text-2); }
.feld input, .feld select, .feld textarea {
  border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); padding: 10px 12px; background: #fff; outline: none; width: 100%;
}
.feld textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--salbei); box-shadow: 0 0 0 3px rgba(95, 122, 105, .15); }
.feld small { color: var(--leise); font-size: 12.5px; }
.schalter { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; }
.schalter input { width: 18px; height: 18px; accent-color: var(--salbei); }
.fehlertext { color: var(--rot); font-size: 14px; min-height: 1em; }
.farben { display: flex; gap: 8px; flex-wrap: wrap; }
.farben label { cursor: pointer; }
.farben input { position: absolute; opacity: 0; }
.farben span { display: block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--rand-stark); }
.farben input:checked + span { box-shadow: 0 0 0 2px var(--text); }

.meldung {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100;
  background: #26403a; color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  animation: hoch .2s ease-out;
}
.meldung.fehler { background: var(--rot); }
@keyframes hoch { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ------------------------------------------------------------------ Anmeldung */
.anmeldung h1 { font-size: 30px; margin: 0 0 8px; font-weight: 600; letter-spacing: -.4px; }
.anmeldung .einleitung { color: var(--text-2); margin: 0 0 26px; }
.anmeldung form { display: flex; flex-direction: column; gap: 16px; }
.anmeldung .knopf.haupt-knopf { padding: 13px 18px; font-size: 15.5px; }
.anmeldung .wechsel { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: 14.5px; }
.anmeldung .sicher { margin-top: 30px; display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--leise); }
.anmeldung .sicher svg { width: 20px; height: 20px; flex: none; color: var(--salbei); }
.code-anzeige { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 19px; letter-spacing: .5px; text-align: center; padding: 18px 12px; border-radius: var(--radius); background: var(--salbei-zart); border: 1px dashed #b8c6ba; user-select: all; line-height: 1.6; }
.code-anzeige span { white-space: nowrap; }
.laden { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: dreh .8s linear infinite; }
.knopf:not(.haupt-knopf) .laden { border-color: rgba(0, 0, 0, .15); border-top-color: var(--salbei); }
@keyframes dreh { to { transform: rotate(360deg); } }
.start-laden { min-height: 100vh; display: flex; align-items: center; justify-content: center; }

/* ------------------------------------------------------------------ Platzhalter-Seiten */
.bald { max-width: 720px; }
.bald .karte { padding: 28px; }
.bald h2 { margin: 0 0 10px; }
.bald ul { margin: 12px 0 0; padding-left: 20px; color: var(--text-2); line-height: 1.8; }

/* ------------------------------------------------------------------ Schmale Bildschirme */
@media (max-width: 1350px) {
  .raster-drei { grid-template-columns: 1fr 1fr; }
  .raster-drei > :last-child { grid-column: 1 / -1; }
}
/* kleine Laptops (1001–1350 px): Schnellzugriffe ohne Untertitel, Karten schmaler; niedrige Bildschirme ohne Bildkarten, damit nichts rollt */
@media (min-width: 1001px) and (max-width: 1350px) {
  .schnell { gap: 10px; }
  .schnell button { padding: 10px 12px; column-gap: 10px; grid-template-columns: 36px 1fr; }
  .schnell .rund { width: 36px; height: 36px; }
  .schnell .rund svg { width: 19px; height: 19px; }
  .schnell span { display: none; }
  .schnell b { font-size: 14px; }
  .raster-vier { gap: 12px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); }
  .schnell button { align-content: center; }
  .raster-vier .zeile .zeit { width: 78px; font-size: 13px; }
  .raster-vier .karte-kopf h2 { font-size: 15.5px; }
}
@media (min-width: 1001px) and (max-height: 960px) {
  .kopf-logo .logo .unterzeile { display: none; }
  .raster-drei > .karte, .raster-vier > .karte { max-height: calc(100vh - 318px); min-height: 220px; }
  .raster-drei, .raster-vier { margin-bottom: 12px; }
  .infokarten { gap: 12px; }
  .infokarte { min-height: 76px; padding: 12px 54px 12px 21%; border-radius: 14px; }
  .infokarte svg.bild { width: 19%; }
  .infokarte h3 { font-size: 15px; margin-bottom: 3px; }
  .infokarte p { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .infokarte .pfeil { width: 32px; height: 32px; right: 12px; bottom: 50%; transform: translateY(50%); }
  .kopf { margin-bottom: 14px; }
  .haupt { padding-top: 14px; padding-bottom: 14px; }
  }
@media (max-width: 1000px) {
  .schnell { grid-template-columns: repeat(3, 1fr); }
  .raster-vier { grid-template-columns: 1fr 1fr; }
  .infokarte { padding-left: 40%; }
}
@media (max-width: 1000px) {
  .infokarten { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
        }
@media (max-width: 700px) {
  .haupt { padding: 14px 14px 40px; }
  .kopf { gap: 10px; }
  .profil .name, .profil .praxis, .profil > svg { display: none; }
  .kopf { flex-wrap: wrap; }
  .auf-start .kopf-logo { flex-basis: 100%; }
  .kopf-logo .logo .unterzeile br { display: none; }
  .schnell { grid-template-columns: repeat(2, 1fr); }
  .suche { flex: 1 1 0; min-width: 0; }
  .kopf-rechts { gap: 8px; }
  .raster-drei, .raster-vier { grid-template-columns: 1fr; }
  .formular { grid-template-columns: 1fr; }
  .zeile .zeit { width: 96px; font-size: 14px; }
  .kal-woche:not(.tag) { grid-template-columns: 34px repeat(7, minmax(0, 1fr)); font-size: 11px; }
  .kal-monat .mtag { min-height: 70px; }
  .kal-monat .mini span:not(.punkt) { display: none; }
  .liste .breit-nur { display: none; }
  /* Tabellen am Handy (schmal.js): Karten mit Überschrift je Zelle, sonst in sich rollen */
  table.liste:not(.karten) { display: block; overflow-x: auto; max-width: 100%; }
  table.liste.karten, table.liste.karten tbody { display: block; width: 100%; }
  table.liste.karten thead { display: none; }
  table.liste.karten tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 2px; border-bottom: 1px solid #f0eee8; }
  table.liste.karten td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; overflow-wrap: anywhere; }
  table.liste.karten td:first-child { flex: 1 1 100%; }
  table.liste.karten td[data-l]:not(:first-child)::before { content: attr(data-l) " "; color: var(--leise); font-size: 12px; margin-right: 2px; }
  table.liste.karten td:empty { display: none; }
  table.liste.karten td:last-child:has(button, .knopf, a) { margin-left: auto; }
  .zeile { flex-wrap: wrap; row-gap: 6px; }
  .zeile .textlink { white-space: nowrap; }
  .seite-kopf .rechts { flex-wrap: wrap; }
  .raster-zwei > *, .raster-drei > *, .raster-vier > * { min-width: 0; }
  .rechts { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .feld-suche { min-width: 0; flex: 1 1 180px; max-width: 100%; }
  .liste.monate th, .liste.monate td { padding-left: 8px; padding-right: 8px; }
}
@media print {
  .leiste, .kopf, .seite-kopf .rechts { display: none !important; }
  .rahmen { display: block; }
}

/* ------------------------------------------------------------------ Rechnungen und Finanzen */
.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste th.zahl { text-align: right; }
.minus { color: var(--rot); }
.plus { color: var(--salbei-dunkel); }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kennzahlen .karte { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.kennzahlen span { font-size: 13px; color: var(--text-2); }
.kennzahlen b { font-size: 23px; font-weight: 600; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.kennzahlen small { font-size: 12px; color: var(--leise); }
.kennzahlen .warn b { color: var(--rot); }
.positionen { width: 100%; border-collapse: collapse; }
.positionen th { text-align: left; font-size: 12px; font-weight: 600; color: var(--leise); padding: 6px 4px; border-bottom: 1px solid var(--rand); }
.positionen td { padding: 4px; vertical-align: middle; }
.positionen input, .positionen select { width: 100%; border: 1px solid var(--rand-stark); border-radius: 8px; padding: 7px 8px; background: #fff; outline: none; font-size: 14px; }
.positionen input:focus, .positionen select:focus { border-color: var(--salbei); }
.positionen input.zahl { text-align: right; }
.summen { margin: 14px 0 0 auto; max-width: 300px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.summen div { display: flex; justify-content: space-between; gap: 20px; color: var(--text-2); }
.summen .gesamt { border-top: 2px solid var(--salbei); padding-top: 6px; margin-top: 4px; color: var(--text); font-size: 16px; }
.was-passiert { padding: 20px 22px; margin-bottom: 16px; background: linear-gradient(180deg, #fbf8f0, #fff); }
.was-passiert h2 { margin: 0 0 12px; font-size: 18px; }
.was-passiert .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.raster-zwei { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.monate td.zahl { position: relative; }
.balken { position: absolute; left: 14px; bottom: 6px; height: 3px; border-radius: 2px; max-width: calc(100% - 28px); }
.balken.ein { background: #9fbfa8; }
.balken.aus { background: #f2c48a; }
.abrechnen-gruppe { padding: 12px 0; border-bottom: 1px solid #f0eee8; display: flex; flex-direction: column; gap: 8px; }
.abrechnen-gruppe .schalter { font-size: 14px; }
.rechnung-blick .zeilen-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rechnung-blick .zeilen-info div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 14px; }
select.knopf { appearance: auto; }
@media (max-width: 1000px) { .raster-zwei { grid-template-columns: 1fr; } .rechnung-blick .zeilen-info { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .positionen thead { display: none; }
  .positionen tr { display: grid; grid-template-columns: 1fr 1fr 40px; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
  .positionen td:nth-child(2) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ E-Mail (am Handy wie Gmail: Ordner im Menü, Auswahl mit Sammelaktionen, Schreiben unten rechts) */
.mail-rahmen { display: grid; grid-template-columns: 210px 380px 1fr; gap: 14px; align-items: start; }
.mail-ordner { padding: 8px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 14px; }
.mail-ordner button { display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px; color: var(--text); min-width: 0; }
.mail-ordner button svg { width: 18px; height: 18px; flex: none; color: var(--text-2); }
.mail-ordner .mo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mail-ordner .mo-zahl { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-2); }
.mail-ordner button:hover { background: var(--salbei-zart); }
.mail-ordner button.an { background: var(--salbei-hell); font-weight: 600; }
.mail-ordner button.an svg { color: var(--salbei-dunkel); }
.mail-ordner .mo-kopf, .mail-ordner .mo-fuss, .mail-leiste, .mail-schleier, .mail-schreiben { display: none; }
.mail-liste { max-height: calc(100vh - 190px); overflow-y: auto; padding: 0; }
.mail-ordnertitel, .mail-auswahl { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px 4px 16px; background: #fff; border-bottom: 1px solid #f0eee8; }
.mail-ordnertitel span { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--leise); flex: 1; }
.mail-ordnertitel .textlink { font-size: 13px; }
.mail-auswahl { background: var(--salbei-hell); padding-left: 6px; }
.mail-auswahl b { font-size: 16px; min-width: 18px; }
.mail-auswahl .textlink { font-size: 13px; }
.mail-luecke { flex: 1; }
.mail-zeile { display: flex; align-items: flex-start; gap: 12px; width: 100%; border-bottom: 1px solid #f0eee8; padding: 11px 14px 11px 11px; border-left: 3px solid transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mail-zeile:hover { background: #fbfaf7; }
.mail-zeile.aktiv { background: var(--salbei-zart); border-left-color: var(--salbei); }
.mail-zeile.gewaehlt { background: var(--salbei-hell); }
.mail-wisch { position: relative; overflow: hidden; }
.mail-wisch-grund { position: absolute; inset: 0 0 1px; display: none; align-items: center; justify-content: space-between; padding: 0 24px; background: #e9b8ab; color: #fff; }
.mail-wisch-grund svg { width: 24px; height: 24px; transition: transform .12s; }
.mail-wisch.wischt .mail-wisch-grund { display: flex; }
.mail-wisch.genug .mail-wisch-grund { background: var(--rot); }
.mail-wisch.genug .mail-wisch-grund svg { transform: scale(1.18); }
.mail-wisch.links .mail-wisch-grund svg:first-child, .mail-wisch.rechts .mail-wisch-grund svg:last-child { visibility: hidden; }
.mail-wisch .mail-zeile { position: relative; background: #fff; touch-action: pan-y; }
.mail-wisch .mail-zeile.gewaehlt { background: var(--salbei-hell); }
.mail-wisch .mail-zeile.aktiv { background: var(--salbei-zart); }
.mail-wisch .mail-zeile:not(.gewaehlt, .aktiv):hover { background: #fbfaf7; }
.mail-rueck { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 18px; min-width: min(360px, calc(100vw - 24px));
  max-width: calc(100vw - 24px); padding: 10px 10px 10px 20px; border-radius: 14px; background: #1f3833; color: #fff; font-size: 14.5px; box-shadow: 0 8px 24px rgba(20, 30, 28, .25); }
.mail-rueck span { flex: 1; }
.mail-rueck button { border: 0; background: none; color: var(--sonne); font: inherit; font-weight: 700; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.mail-rueck button:hover { background: rgba(255, 255, 255, .08); }
.mail-bild-knopf { flex: none; border: 0; background: none; padding: 0; margin-top: 1px; cursor: pointer; border-radius: 50%; }
.mail-bild { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; font-size: 16px; font-weight: 600; }
.mail-bild.gewaehlt { background: var(--salbei-dunkel); }
.mail-bild.gewaehlt svg { width: 20px; height: 20px; stroke-width: 2.4; }
.mail-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.mail-zeile .oben { display: flex; justify-content: space-between; gap: 8px; }
.mail-zeile .oben b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-zeile .oben .klein { flex: none; }
.mail-zeile .betreff { font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-zeile.ungelesen { border-left-color: var(--sonne); }
.mail-zeile.ungelesen .oben b, .mail-zeile.ungelesen .betreff, .mail-zeile.ungelesen .oben .klein { font-weight: 700; color: var(--text); }
.mail-zusatz { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; font-size: 12px; color: var(--leise); }
.mail-zusatz .etikett { font-size: 11.5px; padding: 1px 8px; }
.mail-anhang { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--rand); border-radius: 999px; padding: 1px 8px; }
.mail-anhang svg { width: 12px; height: 12px; }
.mail-entwurf { color: var(--rot); font-weight: 600; }
.mail-ansicht { padding: 22px; min-height: 420px; }
.mail-lese-leiste { display: flex; align-items: center; gap: 2px; margin: -10px -10px 8px; }
.mail-lesen h2 { margin: 0 0 12px; font-size: 20px; overflow-wrap: anywhere; }
.mail-kopf { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--rand); margin-bottom: 14px; }
.mail-kopf-text { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.mail-kopf .leise.klein { flex-basis: 100%; }
.mail-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.mail-anhaenge { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mail-anhaenge button.etikett { border: 0; cursor: pointer; }
.mail-html { width: 100%; height: 62vh; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: #fff; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.6; }
.mail-zurueck { display: none; }
.mail-ziele { display: flex; flex-direction: column; gap: 2px; }
.mail-ziele button { display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 11px 12px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 15px; color: var(--text); }
.mail-ziele button:hover { background: var(--salbei-zart); }
.mail-ziele button svg { width: 18px; height: 18px; color: var(--text-2); flex: none; }
@media (max-width: 1250px) { .mail-rahmen { grid-template-columns: 330px 1fr; } .mail-ordner { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; position: static; } }
@media (max-width: 800px) {
  .mail-seitenkopf { display: none; }
  .mail-leiste { display: flex; align-items: center; gap: 4px; margin: 0 -4px 12px; }
  .mail-leiste.offen { display: none; }
  .mail-leiste .icon-knopf { padding: 10px; }
  .mail-leiste .icon-knopf svg { width: 22px; height: 22px; }
  .mail-suchfeld { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; background: #fff; border: 1px solid var(--rand); border-radius: 999px; box-shadow: var(--schatten); color: var(--leise); }
  .mail-suchfeld svg { width: 19px; height: 19px; flex: none; }
  .mail-suchfeld .feld-suche { flex: 1 1 auto; min-width: 0; border: 0; padding: 0; background: none; font: inherit; font-size: 16px; color: var(--text); }
  .mail-rahmen { grid-template-columns: minmax(0, 1fr); }
  .mail-rahmen.offen .mail-liste { display: none; }
  .mail-rahmen:not(.offen) .mail-ansicht { display: none; }
  .mail-liste { max-height: none; overflow: visible; margin-bottom: 84px; }
  .mail-ordnertitel, .mail-auswahl { top: 0; border-radius: var(--radius) var(--radius) 0 0; }
  .mail-auswahl { min-height: 52px; }
  .mail-auswahl .icon-knopf { padding: 9px; }
  .mail-auswahl .icon-knopf svg { width: 22px; height: 22px; }
  .mail-zeile { padding: 12px 12px 12px 9px; }
  .mail-zeile:hover { background: none; }
  .mail-wisch .mail-zeile:not(.gewaehlt, .aktiv):hover { background: #fff; }
  .mail-rueck { left: 12px; right: 12px; transform: none; min-width: 0; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .mail-zeile.gewaehlt { background: var(--salbei-hell); }
  .mail-bild { width: 40px; height: 40px; }
  .mail-zeile .oben b { font-size: 15px; }
  .mail-zeile .betreff { font-size: 14px; }
  /* Ordner: Menü von links */
  .mail-ordner { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 86; width: min(300px, 84vw); border-radius: 0 var(--radius) var(--radius) 0;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 10px 14px; overflow-y: auto; flex-direction: column; flex-wrap: nowrap;
    transform: translateX(-105%); visibility: hidden; transition: transform var(--rand-hinaus), visibility 0s linear .17s; box-shadow: 12px 0 34px rgba(30, 45, 40, .16); }
  .mail-rahmen.menue-auf .mail-ordner { transform: none; visibility: visible; transition: transform var(--rand-hinein); }
  .mail-ordner button { padding: 12px 14px; font-size: 15px; border-radius: 0 999px 999px 0; margin-left: -10px; padding-left: 24px !important; }
  .mail-ordner .mo-kopf { display: flex; flex-direction: column; gap: 2px; padding: 4px 14px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--rand); }
  .mail-ordner .mo-kopf b { font-size: 19px; }
  .mail-ordner .mo-kopf .klein { overflow: hidden; text-overflow: ellipsis; }
  .mail-ordner .mo-fuss { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rand); }
  .mail-rahmen.menue-auf .mail-schleier { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(31, 56, 51, .28); }
  /* Schreiben unten rechts – nicht beim Lesen und nicht während der Auswahl */
  .mail-schreiben { display: inline-flex; align-items: center; gap: 10px; position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: 18px; background: var(--sonne-hell); color: var(--text); font: inherit; font-size: 15px; font-weight: 600;
    box-shadow: 0 2px 6px rgba(40, 50, 45, .12), 0 8px 22px rgba(40, 50, 45, .14); cursor: pointer; }
  .mail-schreiben svg { width: 22px; height: 22px; }
  .mail-rahmen:is(.offen, .waehlen, .menue-auf) ~ .mail-schreiben { display: none; }
  .mail-ansicht { padding: 14px 16px 20px; }
  .mail-lese-leiste { margin: -6px -8px 8px; position: sticky; top: 0; z-index: 2; background: #fff; }
  .mail-lese-leiste .icon-knopf { padding: 10px; }
  .mail-lese-leiste .icon-knopf svg { width: 22px; height: 22px; }
  .mail-zurueck { display: inline-flex; }
  .mail-html { height: 70vh; }
  .mail-knoepfe .knopf { flex: 1; justify-content: center; }
}

/* ------------------------------------------------------------------ Editor (aus BR.os) beim Schreiben von E-Mails */
#editor-lage { position: fixed; inset: 0; z-index: 70; background: var(--grund); display: flex; flex-direction: column; }
#editor-lage iframe { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
#editor-lage .editor-warte { position: absolute; inset: 40% 0 auto; text-align: center; color: var(--leise); }
#editor-lage .editor-warte[hidden] { display: none; }
#editor-lage .editor-meldung { flex: none; margin: 0; padding: 8px 18px; background: var(--rot-hell); color: var(--rot); font-size: 14px; }
#editor-lage .editor-meldung[hidden] { display: none; }
body.editor-eingebettet { overflow: hidden; }
body.editor-eingebettet #seite { visibility: hidden; }
#editor-lage.eingebettet { inset: auto; bottom: 18px; z-index: 40; background: transparent; }
#editor-lage.eingebettet > .editor-kopf { border: 1px solid var(--rand); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
#editor-lage.eingebettet iframe { border: 1px solid var(--rand); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--schatten); }
.editor-kopf { flex: none; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 14px 18px 12px; background: #fff; border-bottom: 1px solid var(--rand); }
.editor-kopf .ek-kopfzeile { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.editor-kopf .ek-kopfzeile h1 { flex: 1; min-width: 160px; margin: 0; font-size: 21px; font-weight: 600; }
.editor-kopf label { font-size: 13.5px; color: var(--leise); }
.editor-kopf input { border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); padding: 8px 12px; background: #fff; outline: none; width: 100%; }
.editor-kopf input:focus { border-color: var(--salbei); }
.editor-kopf select { border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); padding: 8px 12px; background: #fff; outline: none; width: 100%; max-width: 380px; font: inherit; }   /* Notiz: Zu Klient:in */
.editor-kopf #ek-betreff { font-weight: 600; }
.editor-kopf .ek-anhaenge { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.editor-kopf .ek-anhaenge:empty { display: none; }
.editor-kopf .ek-meldung { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--salbei-dunkel); }
.editor-kopf .ek-meldung.fehler { color: var(--rot); }
.editor-kopf .ek-meldung[hidden] { display: none; }
.editor-kopf .ek-platzhalter { grid-column: 1 / -1; font-size: 13.5px; }
.editor-kopf .ek-platzhalter summary { cursor: pointer; color: var(--salbei-dunkel); font-weight: 500; }
.editor-kopf .ek-platzhalter > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.editor-kopf .ek-platzhalter > div b { min-width: 70px; font-size: 12.5px; color: var(--leise); font-weight: 600; }
.editor-kopf .ek-platzhalter p { margin: 6px 0 0; }
.platzhalter { border: 1px solid var(--rand-stark); background: var(--salbei-hell); color: var(--salbei-dunkel); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.platzhalter:hover { border-color: var(--salbei); }

/* ------------------------------------------------------------------ Vorlagen: Übersicht der Platzhalter */
.platzhalter-hilfe { padding: 16px 20px; }
.platzhalter-hilfe summary { cursor: pointer; }
.platzhalter-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 24px; margin-top: 12px; font-size: 14px; }
.platzhalter-raster h3 { margin: 6px 0 4px; }
.platzhalter-raster code { font-size: 13px; color: var(--salbei-dunkel); }
@media (max-width: 760px) {
  .editor-kopf { grid-template-columns: 52px minmax(0, 1fr); padding: 10px 12px; gap: 6px 8px; }
  .editor-kopf .ek-kopfzeile h1 { font-size: 18px; flex-basis: 100%; }
  .editor-kopf .ek-kopfzeile .knopf { padding: 8px 12px; font-size: 13.5px; }
}

/* ------------------------------------------------------------------ Als App installieren (Knopf in der Kopfzeile neben der Suche) */
.installieren-knopf { flex: none; padding: 9px 16px; background: var(--sonne-hell); border-color: #f0d3a6; color: #8a5312; }
.installieren-knopf:hover { background: #fbe4c0; }
.installieren-knopf[hidden] { display: none; }
@media (max-width: 1100px) { .installieren-knopf span { display: none; } .installieren-knopf { padding: 9px 11px; } }

/* ------------------------------------------------------------------ Buchhaltung (doppelt) */
.fibu-reiter { margin: 0 0 14px; align-items: center; }
.fibu-reiter .leise { margin-left: auto; }
.liste.journal td { vertical-align: top; }
.liste.journal tr:not(.erste) td { border-top: 0; }
.liste.journal tr.erste td { border-top: 1px solid var(--rand); }
.liste.journal tr.nachtraeglich td { background: #fff7ea; }
.liste tr.gewaehlt td { background: var(--salbei-zart); }
.bilanz .liste tr.ebene-1 td { font-weight: 600; padding-top: 12px; }
.liste tr.summe td { font-weight: 700; border-top: 2px solid var(--salbei); }

/* ------------------------------------------------------------------ Wolke Pay (Kasse) */
.kasse-hinweise { display: grid; gap: 8px; margin-bottom: 14px; }
.kasse-hinweise:empty { display: none; }
.kasse-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 24px; }
.kasse-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }
@media (max-width: 820px) { .kasse-raster { grid-template-columns: 1fr; } }
.kasse-h { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.kasse-leistungen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kasse-leistung { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; min-height: 84px; border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--salbei-zart); cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.kasse-leistung:hover { background: var(--salbei-hell); border-color: var(--salbei); }
.kasse-leistung b { font-size: 17px; margin-top: auto; }
.kasse-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.kasse-knoepfe { display: grid; gap: 8px; justify-items: start; }
.kasse-rechts { border-left: 1px solid var(--rand); padding-left: 24px; }
@media (max-width: 820px) { .kasse-rechts { border-left: 0; padding-left: 0; } }
.kasse-korb td { padding: 8px 6px; }
.kasse-summe { display: flex; justify-content: space-between; font-size: 22px; font-weight: 600; margin: 14px 0 4px; }
.kasse-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.kasse-zahlen .knopf:last-child { grid-column: 1 / -1; }
.knopf.gross { justify-content: center; padding: 16px; font-size: 17px; }
.kasse-rueckgeld { font-size: 18px; font-weight: 600; }
.kasse-karte-status { font-size: 18px; padding: 18px 4px; }
.kasse-schritte { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.kasse-schritte li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.kasse-schritte li svg { width: 18px; height: 18px; flex: none; color: var(--salbei); margin-top: 2px; }
.kasse-schritte li.fehler svg { color: var(--rot); }
.kasse-schritte li .punkt { width: 18px; height: 18px; flex: none; border: 2px solid var(--rand-stark); border-radius: 50%; margin-top: 2px; }
.kasse-schritte li.ok { color: var(--text); }
.kasse-daten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 10px; font-size: 14px; }
.kasse-daten dt { color: var(--leise); }
.kasse-daten dd { margin: 0; word-break: break-all; }
.kasse-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.kasse-wahl-knopf { display: flex; flex-direction: column; gap: 6px; padding: 18px; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.kasse-wahl-knopf:hover { border-color: var(--salbei); }
.kasse-wahl-knopf span { color: var(--text-2); font-size: 14px; }
.beleg-ansicht { background: var(--grund); padding: 16px; border-radius: var(--radius-klein); }

/* ------------------------------------------------------------------ Laufende Sitzung (sitzung.js) und offene Dokumentation */
.knopf.klein { padding: 6px 12px; font-size: 13px; }
#sitzung-leiste { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: min(380px, calc(100vw - 40px)); background: #fff; border: 1px solid var(--rand-stark);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(31, 56, 51, .16); overflow: hidden; }
#sitzung-leiste .sl-balken { height: 4px; background: var(--salbei-hell); }
#sitzung-leiste .sl-balken span { display: block; height: 100%; background: var(--salbei); transition: width 1s linear; }
#sitzung-leiste .sl-zeile { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
#sitzung-leiste .sl-zeile > svg { width: 20px; height: 20px; color: var(--salbei-dunkel); flex: none; }
#sitzung-leiste .sl-unten { display: flex; align-items: center; gap: 12px; margin: -4px 12px 8px; font-size: 12.5px; }
#sitzung-leiste .sl-unten .textlink { font-size: 12.5px; }
#sitzung-leiste .sl-unten [data-zuweisen] svg { width: 14px; height: 14px; }
#sitzung-leiste .sl-fehl { margin-left: auto; color: var(--rot); }
.textlink.gefahr-text { color: var(--rot); }
#sitzung-leiste .sl-text { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sitzung-leiste [data-rest] { color: var(--text-2); font-variant-numeric: tabular-nums; }
#sitzung-leiste .sl-um { padding: 0 12px 12px; color: var(--rot); font-size: 15px; }
#sitzung-leiste.bald { border-color: var(--sonne); }
#sitzung-leiste.bald .sl-balken span { background: var(--sonne); }
#sitzung-leiste.um { border: 2px solid var(--rot); animation: sitzung-um 1.6s ease-in-out infinite; }
#sitzung-leiste.um .sl-balken span { background: var(--rot); }
@keyframes sitzung-um { 50% { box-shadow: 0 0 0 8px rgba(196, 86, 63, .18), 0 10px 30px rgba(31, 56, 51, .16); } }
@media (prefers-reduced-motion: reduce) { #sitzung-leiste.um { animation: none; } }
.sitzung-rechnung { border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: 12px 14px; background: var(--salbei-zart); }
.sitzung-rechnung > div { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.sitzung-zahlart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sitzung-zahlart .knopf { padding: 14px 10px; }
#doku-erinnerung { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-klein);
  background: var(--sonne-hell); border: 1px solid #f0d3a6; color: #6b420c; font-size: 14px; }
#doku-erinnerung[hidden] { display: none; }
#doku-erinnerung .de-text { flex: 1; display: flex; gap: 10px; align-items: center; min-width: 240px; }
#doku-erinnerung .de-text svg { width: 20px; height: 20px; flex: none; }
#doku-erinnerung .de-knoepfe { display: flex; gap: 8px; }
/* „Sitzung starten“ als kleiner Knopf im Kopf der Karte „Heute“, eine Zeile */
.heute-karte-kopf { flex-wrap: nowrap !important; }
.heute-karte-kopf h2 { flex: none; }
.heute-karte-kopf h2 small { font-size: 12.5px; font-weight: 500; color: var(--leise); margin-left: 7px; }
.sitzung-start { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; padding: 4px 11px 4px 8px; border: 0; border-radius: 999px;
  background: var(--salbei); color: #fff; font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.3; cursor: pointer; white-space: nowrap; }
.sitzung-start:hover { background: var(--salbei-dunkel); }
.sitzung-start svg { width: 15px; height: 15px; flex: none; }
.sitzung-start span { overflow: hidden; text-overflow: ellipsis; }
.heute-karte-kopf .rechts { flex: none; }
.sitzung-start { padding: 6px 13px 6px 10px; font-size: 13.5px; }
.sitzung-start svg { width: 16px; height: 16px; }
.sitzung-start.laeuft { background: #c46f17; }
.sitzung-start.laeuft:hover { background: #a85d10; }
.sitzung-start.laeuft svg { fill: currentColor; }
.sitzung-start i { font-style: normal; }
.heute-karte-kopf { container-type: inline-size; }
@container (max-width: 300px) { .sitzung-start .sk-lang { display: none; } }   /* schmale Karte: „Sitzung“ bzw. „Beenden“ */
/* Schnellstart-Fenster (sitzung.schnellstart): ein Klick auf eine Zeile startet */
.ss-titel { margin: 4px 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--leise); }
.ss-liste { border: 1px solid var(--rand); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.ss-klienten { max-height: min(300px, 40vh); overflow-y: auto; }
.ss-zeile { width: 100%; padding: 10px 12px; gap: 12px; }
.ss-zeile > svg { width: 18px; height: 18px; color: var(--salbei-dunkel); flex: none; }
.ss-zeile[hidden] { display: none; }
.ss-suche { width: 100%; margin-bottom: 8px; }
.ss-fuss { margin: 0; }
.ss-genau { display: flex; align-items: center; gap: 6px; margin-top: 8px; cursor: pointer; }

/* ------------------------------------------------------------------ Berichte und Diagramme (berichte.js, diagramm.js) */
.raster-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .raster-zwei { grid-template-columns: 1fr; } }
.auf-einen-blick { margin: 0; padding: 4px 22px 20px 40px; display: grid; gap: 10px; font-size: 15px; line-height: 1.5; }
.auf-einen-blick b { font-weight: 600; }
.dg { width: 100%; height: auto; display: block; overflow: visible; }
.dg .dg-achse { font-size: 11px; fill: #7d8a85; font-variant-numeric: tabular-nums; }
.dg .dg-wert { font-size: 12px; fill: var(--text); font-weight: 600; }
.dg [data-tip]:focus, .dg [data-linie]:focus { outline: 2px solid var(--salbei); outline-offset: -2px; }
.dg-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); margin: 0 0 8px; }
.dg-legende span { display: inline-flex; align-items: center; gap: 6px; }
.dg-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dg-balken { display: grid; gap: 2px; }
.dg-zeile { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; gap: 12px; align-items: center; padding: 5px 4px; border-radius: 6px; font-size: 14px; }
.dg-zeile:hover, .dg-zeile:focus { background: var(--salbei-zart); outline: none; }
.dg-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-spur { height: 14px; }
.dg-spur i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.dg-zahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dg-zahl small { color: var(--leise); margin-left: 4px; }
.dg-tabelle { margin-top: 10px; font-size: 13.5px; }
.dg-tabelle summary { cursor: pointer; color: var(--salbei-dunkel); font-weight: 500; }
.dg-tabelle td.zahl, .dg-tabelle th.zahl, .bericht-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.dg-tip { position: fixed; z-index: 120; pointer-events: none; background: #fff; border: 1px solid var(--rand-stark); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; box-shadow: 0 6px 20px rgba(31, 56, 51, .14); max-width: 260px; }
.dg-tip[hidden] { display: none; }
.dg-tip b { display: block; margin-bottom: 2px; }
.bericht-tabelle th .textlink { padding: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--leise); font-weight: 600; }
.bericht-tabelle th .textlink.an { color: var(--text); }
.wenn .regler { display: grid; gap: 2px; margin-bottom: 12px; }
.wenn .regler-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.wenn .regler-kopf b { font-weight: 500; }
.wenn .regler-kopf output { font-variant-numeric: tabular-nums; font-weight: 600; }
.wenn input[type=range] { width: 100%; accent-color: var(--salbei); }
.wenn-ergebnis { margin: 16px 0 10px; padding: 14px 16px; border-radius: var(--radius-klein); background: var(--salbei-zart); border: 1px solid var(--rand); font-size: 14px; }
.wenn-zahlen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wenn-zahlen > div { display: grid; }
.wenn-zahlen span { font-size: 12.5px; color: var(--text-2); }
.wenn-zahlen b { font-size: 22px; font-weight: 600; }
.wenn-zahlen .pfeil { font-size: 20px; color: var(--leise); }

/* ------------------------------------------------------------------ Praxis-Haushalt (haushalt_ui.js) */
.hh-karte { margin-bottom: 18px; }
.hh-punkt { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0eee8; }
.hh-punkt:last-child { border-bottom: 0; }
.hh-punkt .hh-text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 14.5px; }
.hh-punkt .hh-text small { color: var(--text-2); font-size: 13px; }
.hh-punkt .hh-knoepfe { display: flex; align-items: center; gap: 4px; flex: none; }
.hh-punkt .icon-knopf svg { width: 16px; height: 16px; }
.hh-frist .hh-text b::before { content: "Frist · "; color: var(--rot); font-weight: 600; }
.hh-bald .hh-text b::before { content: "Bald · "; color: #9a5b12; font-weight: 600; }
.hh-angebote { display: grid; gap: 10px; }
.hh-angebot { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--radius-klein); }
.hh-angebot > div { flex: 1; display: grid; gap: 2px; }
.hh-angebot small { color: var(--text-2); font-size: 13px; }
.hh-posten input, .hh-posten select { width: 100%; }
.hh-posten tr.hh-andere td { opacity: .55; }
.hh-roh { white-space: pre-wrap; font-size: 12px; max-height: 220px; overflow: auto; background: var(--salbei-zart); padding: 10px; border-radius: 8px; }
.hh-lesen { position: fixed; inset: 0; z-index: 110; background: rgba(31, 56, 51, .25); display: grid; place-items: center; }
.hh-lesen .karte { padding: 20px 24px; display: grid; gap: 10px; min-width: 280px; }
.hh-lesen .sl-balken { height: 6px; background: var(--salbei-hell); border-radius: 3px; overflow: hidden; }
.hh-lesen .sl-balken span { display: block; height: 100%; background: var(--salbei); transition: width .3s; }
.hh-zettel { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.hh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hh-katalog { align-items: flex-start; margin: 4px 0; }
tr.hh-aus td { opacity: .5; }
.hh-ohne { border-top: 1px solid var(--rand); }
.hh-ohne summary { cursor: pointer; padding: 14px 20px; }

/* ------------------------------------------------------------------ Warenwirtschaft und Ideen (wawi.js, wawi_ideen.js) */
.wi-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.wi-idee { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.wi-idee h3 { margin: 4px 0 0; font-size: 16px; font-weight: 600; }
.wi-idee p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; flex: 1; }
.wi-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.wi-schritte { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.wi-suche { display: flex; gap: 8px; margin-bottom: 8px; }
.wi-suche input { flex: 1; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); padding: 7px 10px; }
.wi-treffer { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0eee8; }
.wi-treffer > div { flex: 1; display: grid; gap: 2px; font-size: 14px; }
.wi-treffer small { color: var(--text-2); }
.wi-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; font-size: 14px; }
.wi-links b { font-weight: 500; margin-right: 4px; }
.wi-links.klein { font-size: 12.5px; }
.wi-feedback { display: flex; gap: 6px; align-items: center; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rand); }
.wi-details summary { cursor: pointer; padding: 14px 20px; }
.wi-details ul { margin: 6px 0 10px; padding-left: 18px; }

/* Bilder zu Ideen und Artikeln */
.hh-bild { width: 72px; height: 54px; flex: none; border-radius: 8px; overflow: hidden; background: #e7ece6; }
.hh-bild svg { width: 100%; height: 100%; display: block; }
.wi-bild { margin: -16px -18px 8px; height: 110px; overflow: hidden; background: #e7ece6; border-radius: var(--radius) var(--radius) 0 0; }
.wi-bild svg { width: 100%; height: 100%; display: block; }
.wi-cover { width: 44px; height: 62px; flex: none; border-radius: 4px; background: var(--salbei-hell); overflow: hidden; }
.wi-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-daumen { width: 40px; height: 40px; border-radius: 8px; background: var(--salbei-hell); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--salbei-dunkel); vertical-align: middle; }
.wa-daumen img { width: 100%; height: 100%; object-fit: cover; }
.wa-daumen svg { width: 20px; height: 20px; }
.wa-form { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start; }
.wa-bild { display: grid; gap: 8px; justify-items: center; }
.wa-bild > img, .wa-bild > span { width: 180px; height: 180px; border-radius: 12px; object-fit: cover; background: var(--salbei-hell); display: flex; align-items: center; justify-content: center; color: var(--salbei-dunkel); }
.wa-bild > span svg { width: 56px; height: 56px; }
.wa-bild-knoepfe { display: flex; gap: 6px; }
.wa-gruppe { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rand); font-size: 13px; color: var(--leise); text-transform: uppercase; letter-spacing: .4px; }
@media (max-width: 760px) { .wa-form { grid-template-columns: 1fr; } }
.kasse-ware { background: var(--sonne-hell); border-color: #f0d3a6; }
.kasse-ware small { font-size: 12px; color: var(--text-2); }

/* Handy: Beleg direkt auf der Startseite fotografieren und buchen */
.beleg-handy { display: none; }
@media (max-width: 760px) {
  .beleg-handy { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 14px; padding: 16px 18px; border: 0; border-radius: var(--radius);
    background: var(--salbei); color: #fff; text-align: left; cursor: pointer; box-shadow: var(--schatten); }
  .beleg-handy svg { width: 34px; height: 34px; flex: none; }
  .beleg-handy span { display: grid; gap: 2px; }
  .beleg-handy b { font-size: 17px; font-weight: 600; }
  .beleg-handy small { font-size: 13px; opacity: .9; }
}

/* Etiketten: Vorschau im Fenster (gleiche Gestaltung wie im Druck) */
.et-vorschau .et-reihe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.et-vorschau .et-rahmen { border: 1px dashed var(--rand-stark); border-radius: 4px; overflow: hidden; background: #fff; }
.et-vorschau .et { padding: 2mm; overflow: hidden; display: flex; flex-direction: column; gap: .4mm; font-family: Arial, Helvetica, sans-serif; color: #000; }
.et-vorschau .et-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 2mm; font-size: 2mm; line-height: 1.1; color: #333; }
.et-vorschau .et-kopf span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-vorschau .et-kopf b { font-size: 3.4mm; color: #000; white-space: nowrap; }
.et-vorschau .et-name { font-size: 2.9mm; font-weight: bold; line-height: 1.15; max-height: 3.4mm; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.et-vorschau .et-codes { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5mm; min-height: 0; }
.et-vorschau .et-codes svg { display: block; }

/* ------------------------------------------------------------------ Demo (demo.js) */
.anmeldung .demo-knopf { margin-top: 6px; }
.anmeldung .demo-knopf svg { width: 18px; height: 18px; color: var(--sonne); }
.demo-branchen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-branche { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 12px 14px; border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein); background: var(--karte); font: inherit; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.demo-branche:hover, .demo-branche:focus-visible { border-color: var(--salbei); background: var(--salbei-zart); }
.demo-branche b { font-weight: 600; font-size: 14.5px; }
.demo-branche small { color: var(--leise); font-size: 12.5px; }
.demo-branche .laden { margin: 6px 0; }
@media (max-width: 700px) { .demo-branchen { grid-template-columns: 1fr; } }
/* ------------------------------------------------------------------ Startseite und Anmeldung (landing.js) */
.lp { --lp-grund: #faf8f2; --lp-text: #1e3530; background: var(--lp-grund); color: var(--lp-text); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.lp > * { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
.lp :where(button:not(.knopf, .textlink)) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.lp-marke { display: inline-flex; flex-direction: column; align-items: flex-start; color: #5c7363; line-height: 1; }
.lp-marke svg.wolke-zeichen { width: 62px; margin: 0 0 -9px 4px; }
.lp-marke .wortmarke { font-size: 34px; font-weight: 500; letter-spacing: -.6px; color: #5c7363; }
.lp-marke .wortmarke i { font-style: normal; color: var(--sonne); }
.lp-marke.klein svg.wolke-zeichen { width: 44px; margin-bottom: -7px; }
.lp-marke.klein .wortmarke { font-size: 24px; }
.lp-kopf { display: flex; align-items: center; gap: 24px; padding-top: 18px; padding-bottom: 18px; position: relative; }
.lp-kopf::after { content: ""; position: absolute; left: 32px; right: 32px; bottom: 0; border-bottom: 1px solid #e6e1d4; }
.lp-nav { flex: 1; display: flex; justify-content: center; gap: 48px; font-size: 15.5px; }
.lp-nav button:hover, .lp-anmelden:hover { color: var(--salbei); }
.lp-kopf-rechts { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.lp-anmelden { font-weight: 500; }
.lp-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-weight: 500; border-radius: 999px; transition: background .15s, transform .15s; }
.lp-knopf svg { width: 18px; height: 18px; }
.lp-knopf.voll { background: #5f7a69; color: #fff !important; padding: 15px 30px; font-size: 16px; box-shadow: 0 6px 18px rgba(63, 90, 75, .18); }
.lp-knopf.voll:hover { background: #4c6656; transform: translateY(-1px); }
.lp-knopf.rand { border: 1.5px solid var(--lp-text); color: var(--lp-text); padding: 10px 22px; border-radius: 12px; font-size: 15px; }
.lp-knopf.rand:hover { background: #fff; }
.lp-link { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; font-size: 15.5px; }
.lp-hand { font-family: "Caveat", "Segoe Print", cursive; font-weight: 500; color: #5f7a69; line-height: 1.15; }
.lp-zeile { text-transform: uppercase; letter-spacing: .28em; font-size: 13px; color: #3c524b; margin: 0 0 22px; }
.lp-inhalt { flex: 1; }

/* Held */
.lp-held { display: grid; grid-template-columns: 1.08fr 1fr; gap: 40px; align-items: center; padding: 70px 0 70px; border-bottom: 1px solid #e6e1d4; }
.lp-held h1 { font-size: clamp(44px, 5.2vw, 70px); line-height: 1.02; font-weight: 700; letter-spacing: -2.4px; margin: 0 0 26px; color: var(--lp-text); }
.lp-betont { color: #5f7a69; position: relative; display: inline-block; }
.lp-unterstrich { position: absolute; left: -2%; bottom: -14px; width: 104%; height: 18px; }
.lp-lead { font-size: 19px; line-height: 1.55; color: #4a5c56; max-width: 470px; margin: 0 0 34px; }
.lp-aktionen { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.lp-hand-held { font-size: 32px; margin: 30px 0 0 -6px; transform: rotate(-7deg); position: relative; display: inline-block; }
.lp-hand-held span { margin-left: 40px; }
.lp-hand-held .lp-strahlen { position: absolute; right: -54px; top: 22px; width: 32px; transform: rotate(7deg) scaleX(-1); }
.lp-held-bild { position: relative; min-height: 470px; display: flex; align-items: center; justify-content: center; }
.lp-fleck { position: absolute; pointer-events: none; }
.lp-fleck.gross { left: -90px; top: -50px; width: calc(100% + 150px); height: calc(100% + 130px); }
.lp-held-bild .lp-sonne { position: absolute; top: -32px; right: 0; width: 118px; }
.lp-held-bild .lp-wolke-linie { position: absolute; top: -26px; right: 110px; width: 190px; }
.lp-held-bild .lp-zweig { position: absolute; right: -14px; bottom: 30px; width: 54px; }
.lp-vorschau { position: relative; transform: rotate(4deg); width: min(100%, 540px); }
.lp-app { display: grid; grid-template-columns: 150px 1fr; background: #fff; border-radius: 18px; box-shadow: 0 30px 60px rgba(40, 55, 48, .16), 0 4px 12px rgba(40, 55, 48, .06); overflow: hidden; font-size: 13px; }
.lp-app aside { background: #f4f3ee; padding: 18px 12px; display: flex; flex-direction: column; gap: 6px; }
.lp-app aside .lp-marke { margin: 0 0 18px 6px; }
.lp-app aside > span { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: #34483f; }
.lp-app aside > span.an { background: #e1e8df; font-weight: 600; }
.lp-app aside svg { width: 17px; height: 17px; flex: none; }
.lp-app-haupt { padding: 16px 22px 22px; display: flex; flex-direction: column; }
.lp-app-kopf { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #efece4; margin-bottom: 14px; }
.lp-app-kopf svg { width: 16px; height: 16px; }
.lp-app .kreis { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eceae3; font-size: 11px; font-weight: 600; }
.lp-app-gruss { font-size: 22px; letter-spacing: -.3px; }
.lp-app-haupt small { color: #6c7b75; margin: 2px 0 16px; }
.lp-app-haupt em { font-style: normal; font-weight: 600; margin-bottom: 8px; }
.lp-app-termin { display: grid; grid-template-columns: 44px 14px 1fr auto; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #efece4; border-radius: 10px; margin-bottom: 7px; }
.lp-app-termin i { width: 8px; height: 8px; border-radius: 50%; }
.lp-app-termin i.salbei { background: #9fb3a3; } .lp-app-termin i.sonne { background: #f2b33d; }
.lp-app-notiz { margin-top: 8px; display: flex; gap: 10px; align-items: flex-start; background: #fdf1d3; border-radius: 10px; padding: 12px 14px; font-family: "Caveat", cursive; font-size: 18px; line-height: 1.15; color: #4a4030; }
.lp-app-notiz b { font-weight: 500; }
.lp-app-notiz .lp-strahlen { width: 22px; flex: none; }

/* Vorteile */
.lp-vorteile { padding: 64px 0 50px; }
.lp-vorteile h2, .lp-praxis h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; letter-spacing: -.8px; text-align: center; margin: 0 0 44px; color: var(--lp-text); }
.lp-vorteile-raster { display: grid; grid-template-columns: repeat(4, 1fr); }
.lp-vorteil { padding: 0 28px; border-left: 1px solid #e6e1d4; }
.lp-vorteil:first-child { border-left: 0; padding-left: 0; }
.lp-symbol { position: relative; display: grid; place-items: center; width: 82px; height: 74px; margin-bottom: 14px; }
.lp-symbol .lp-fleck { inset: 0; width: 100%; height: 100%; }
.lp-symbol > svg:last-child { position: relative; width: 38px; height: 38px; color: #2c403a; stroke-width: 1.5; }
.lp-vorteil h3 { font-size: 19px; margin: 0 0 6px; font-weight: 600; }
.lp-vorteil p { margin: 0; color: #4a5c56; font-size: 16px; line-height: 1.5; }

/* Für deine Praxis */
.lp-praxis { padding: 26px 0 60px; text-align: center; }
.lp-praxis h2 { margin-bottom: 12px; }
.lp-praxis > div > p { color: #4a5c56; font-size: 17px; max-width: 640px; margin: 0 auto 24px; line-height: 1.55; }
.lp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.lp .lp-chip { padding: 10px 18px; border-radius: 999px; border: 1px solid #d9d4c6; background: #fff; font-size: 14.5px; transition: border-color .15s, background .15s; }
.lp .lp-chip:hover { border-color: #5f7a69; background: #eef2ec; }
.lp-sicher { display: inline-flex; gap: 10px; align-items: flex-start; text-align: left; max-width: 640px; margin: 30px auto 0; font-size: 13.5px; color: #6c7b75; }
.lp-sicher svg { width: 20px; height: 20px; flex: none; color: #5f7a69; }

/* Mitgestalten */
.lp-mit { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 54px 64px 60px !important; margin-bottom: 30px !important;
  border-radius: 26px; background: #dfe6d9; isolation: isolate; max-width: 1116px !important; }
.lp-mit > .lp-fleck.flaeche { inset: 0; width: 100%; height: 100%; z-index: -1; }
.lp-mit h2 { font-size: clamp(32px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -1.2px; font-weight: 700; margin: 0 0 18px; }
.lp-mit-text p { font-size: 19px; line-height: 1.55; color: #33463f; margin: 0; max-width: 470px; }
.lp-zettel { position: relative; background: #fcf8ee; border-radius: 14px; padding: 34px 40px 22px; box-shadow: 0 14px 30px rgba(40, 55, 48, .12); transform: rotate(-1.2deg);
  display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lp-band { position: absolute; top: -13px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(214, 196, 158, .55); border-radius: 2px; }
.lp-zettel-oben { display: flex; align-items: center; gap: 14px; width: 100%; justify-content: center; }
.lp-zettel-oben .lp-wolke-linie { width: 100px; flex: none; stroke: #2f413a; }
.lp-zettel-oben .lp-wolke-linie path { stroke: #2f413a; stroke-width: 3.5; }
.lp-zettel .lp-hand { font-size: 31px; color: #2b3d37; margin: 0; transform: rotate(-5deg); }
.lp-zettel-oben .lp-strahlen { width: 30px; flex: none; transform: scaleX(-1); align-self: flex-start; }
.lp-zettel small { color: #4a5c56; font-size: 14px; }
.lp-mit .lp-zweig { position: absolute; width: 50px; bottom: 6px; }
.lp-mit .lp-zweig.links { left: -8px; transform: scaleX(-1) rotate(-8deg); }
.lp-mit .lp-zweig.rechts { right: -6px; }

/* Fuß */
.lp-fuss { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 26px; font-size: 14px; color: #4a5c56; position: relative; }
.lp-fuss::before { content: ""; position: absolute; left: 32px; right: 32px; top: 0; border-top: 1px solid #e6e1d4; }
.lp-fuss-links { display: flex; align-items: center; gap: 20px; }
.lp-trenner { width: 1px; height: 26px; background: #b9b3a3; }
.lp-fuss a { color: inherit; text-decoration: none; }
.lp-fuss a:hover { text-decoration: underline; }
.lp-fuss nav { display: flex; gap: 30px; }

/* Anmeldung im selben Rahmen */
.lp-zugang { display: grid; grid-template-columns: 1fr minmax(380px, 470px); gap: 64px; align-items: center; padding: 64px 0 70px; }
.lp-zugang-bild { position: relative; padding: 40px 20px 40px 10px; }
.lp-zugang-bild .lp-fleck.gross { left: -40px; top: -10px; width: calc(100% + 80px); height: calc(100% + 30px); }
.lp-zugang-bild .lp-sonne { position: absolute; right: 20px; top: -20px; width: 100px; }
.lp-zugang-bild > p { position: relative; }
.lp-zugang-titel { font-size: clamp(40px, 5vw, 62px); line-height: 1.04; font-weight: 700; letter-spacing: -1.8px; margin: 0 0 22px; color: var(--lp-text); }
.lp-zugang-bild .lp-hand { font-size: 32px; transform: rotate(-5deg); margin: 0 0 0 30px; }
.lp-karte { background: #fff; border-radius: 22px; padding: 36px 38px 30px; box-shadow: 0 24px 50px rgba(40, 55, 48, .10), 0 2px 6px rgba(40, 55, 48, .05); }
.lp .anmeldung h1 { font-size: 28px; }
.lp .anmeldung .textlink { color: var(--salbei-dunkel); }

@media (max-width: 960px) {
  .lp > * { padding-left: 20px; padding-right: 20px; }
  .lp-kopf::after, .lp-fuss::before { left: 20px; right: 20px; }
  .lp-nav { display: none; }
  .lp-kopf { justify-content: space-between; }
  .lp-held, .lp-zugang { grid-template-columns: 1fr; padding-top: 40px; }
  .lp-held-bild { min-height: 0; padding: 30px 0 10px; }
  .lp-vorschau { width: min(100%, 470px); }
  .lp-vorteile-raster { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .lp-vorteil:nth-child(3) { border-left: 0; padding-left: 0; }
  .lp-mit { grid-template-columns: 1fr; padding: 40px 28px !important; margin-left: 16px !important; margin-right: 16px !important; width: auto !important; }
  .lp-zugang-bild { padding: 10px 0; }
  .lp-zugang-bild .lp-hand { display: none; }
}
@media (max-width: 560px) {
  .lp-kopf-rechts .lp-knopf.rand { display: none; }
  .lp-app { grid-template-columns: 1fr; font-size: 12px; }
  .lp-app aside { display: none; }
  .lp-vorteile-raster { grid-template-columns: 1fr; }
  .lp-vorteil { border-left: 0; padding-left: 0; }
  .lp-zettel { padding: 30px 20px 20px; }
  .lp-zettel .lp-hand { font-size: 26px; }
  .lp-fuss { flex-direction: column; align-items: flex-start; }
  .lp-karte { padding: 26px 22px; }
  .lp-zugang-titel { font-size: 36px; }
}
.lp-nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------ Gruppentermine (termin_form.js, gruppe.js) */
.tn-bereich { border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: 14px 16px; background: var(--salbei-zart); display: flex; flex-direction: column; gap: 10px; }
.tn-bereich[hidden] { display: none; }
.tn-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tn-kopf b { font-size: 15px; }
.tn-kopf .rot-text { color: var(--rot); font-weight: 600; }
.tn-plaetze { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.tn-plaetze input { width: 80px; padding: 6px 8px; border: 1px solid var(--rand-stark); border-radius: 8px; font: inherit; }
.tn-tabelle { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
.tn-tabelle td { padding: 7px 10px; border-bottom: 1px solid var(--rand); font-size: 14px; vertical-align: middle; }
.tn-tabelle tr:last-child td { border-bottom: 0; }
.tn-tabelle td small { display: block; color: var(--leise); font-size: 12px; }
.tn-tabelle td:nth-child(2) { width: 160px; }
.tn-tabelle td:last-child { width: 40px; text-align: right; }
.tn-tabelle select, .tn-neu select { width: 100%; padding: 6px 8px; border: 1px solid var(--rand-stark); border-radius: 8px; font: inherit; font-size: 13.5px; background: #fff; }
.tn-neu { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tn-neu select { flex: 1; min-width: 180px; width: auto; }
.tn-person { display: flex; gap: 8px; flex-wrap: wrap; }
.tn-person[hidden] { display: none; }
.tn-person input { flex: 1; min-width: 120px; padding: 7px 9px; border: 1px solid var(--rand-stark); border-radius: 8px; font: inherit; font-size: 14px; }
.tn-aktionen { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
/* schmale Laptops (1001–1180 px): vier Karten als 2 × 2, jede rollt in sich – die Seite selbst bleibt fest */
@media (min-width: 1001px) and (max-width: 1180px) {
  .raster-vier { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .raster-vier > .karte { max-height: calc((100vh - 344px) / 2) !important; min-height: 180px !important; }
  .raster-vier > .karte > .karte-fuss { padding-top: 6px; }
}

/* Demo-Abzeichen in der Kopfzeile (demo.js) – statt einer eigenen Leiste */
.demo-marke { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 14px; border-radius: 999px; border: 1px solid #efd3a0; background: var(--sonne-hell);
  color: #6b430d; font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.demo-marke b { font-weight: 700; letter-spacing: .3px; }
.demo-marke span { color: #8a5a17; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.demo-marke svg { width: 15px; height: 15px; }
.demo-marke:hover { background: #fae5c4; }
.demo-menue-innen { width: 300px; }
.aufklapp .demo-menue-text { line-height: 1.45; }
.aufklapp .demo-menue-text b { color: var(--text); }
.demo-menue-branchen { padding: 4px 0; border-bottom: 1px solid var(--rand); }
.aufklapp .demo-menue-branchen button { padding: 7px 12px; font-size: 14px; gap: 10px; }
.aufklapp .demo-menue-branchen button i { width: 18px; flex: none; }
.aufklapp .demo-menue-branchen button.an { font-weight: 600; }
.aufklapp .demo-menue-branchen button.an svg { color: var(--salbei); }
.demo-menue-fuss { display: flex; flex-direction: column; gap: 6px; padding: 10px 4px 4px; }
.aufklapp .demo-menue-fuss .knopf { width: 100%; box-sizing: border-box; justify-content: center; border: 1px solid var(--rand-stark); padding: 8px 10px; font-size: 13.5px; white-space: nowrap; }
.aufklapp .demo-menue-fuss .knopf.haupt-knopf { border-color: transparent; color: #fff; }
.aufklapp .demo-menue-fuss .knopf.haupt-knopf:hover { background: var(--salbei-dunkel); }
@media (max-width: 1100px) { .demo-marke span { display: none; } }

/* Dashboard-Reihe: etwas kleinere Schrift, damit mehr Einträge sichtbar sind (bleibt gut lesbar) */
.raster-drei .karte-kopf h2, .raster-vier .karte-kopf h2 { font-size: 15.5px; }
.raster-drei .karte-kopf, .raster-vier .karte-kopf { padding-top: 14px; padding-bottom: 6px; }
.raster-drei .zeile, .raster-vier .zeile { padding: 8px 2px; gap: 10px; }
.raster-drei .zeile .was b, .raster-vier .zeile .was b { font-size: 13.5px; line-height: 1.3; }
.raster-drei .zeile .was small, .raster-vier .zeile .was small { font-size: 12px; }
.raster-drei .zeile .zeit, .raster-vier .zeile .zeit { width: auto; min-width: 78px; white-space: nowrap; font-size: 12.5px; }
.raster-drei .zeile .faellig, .raster-vier .zeile .faellig { font-size: 12px; }
.raster-drei .zeile .kreis, .raster-vier .zeile .kreis { width: 34px; height: 34px; font-size: 12px; }
.raster-drei .karte-fuss, .raster-vier .karte-fuss { font-size: 13px; }
.raster-drei .karte-fuss .textlink, .raster-vier .karte-fuss .textlink { font-size: 13px; }
.raster-vier .hh-punkt { padding-top: 9px; padding-bottom: 9px; }
.raster-vier .hh-punkt b, .raster-vier .hh-text b { font-size: 13.5px; }
.raster-vier .hh-punkt small, .raster-vier .hh-text small { font-size: 12px; }
.raster-vier .hh-knoepfe .knopf { padding: 5px 11px; font-size: 12.5px; }

/* Startseite ab Laptopbreite: die Seite füllt genau die Fensterhöhe, ohne Rollen.
   Echte Praxis: die vier Karten nehmen den Platz, die drei Bildkacheln unten bleiben flach.
   Demo: die drei Bildkacheln unten nehmen den Rest ein (Schaufenster für Besucher:innen). */
@media (min-width: 1001px) {
  .rahmen.auf-start .haupt { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 560px; }
  .rahmen.auf-start #seite { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .rahmen.auf-start:not(.demo-modus) .raster-vier, .rahmen.auf-start:not(.demo-modus) .raster-drei { flex: 1; min-height: 240px; grid-auto-rows: minmax(0, 1fr); }
  .rahmen.auf-start:not(.demo-modus) .raster-vier > .karte, .rahmen.auf-start:not(.demo-modus) .raster-drei > .karte { max-height: none !important; min-height: 0 !important; height: 100%; }
  .rahmen.auf-start:not(.demo-modus) .infokarten { flex: none; }
  .rahmen.auf-start.demo-modus .infokarten { flex: 1; min-height: 76px; grid-template-rows: minmax(0, 1fr); }
  .rahmen.auf-start.demo-modus .infokarte { min-height: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 10px 60px 10px 40%; container-type: size; }
  .rahmen.auf-start.demo-modus .infokarte svg.bild { width: 38%; height: 100%; max-height: none; }
  .rahmen.auf-start.demo-modus .infokarte h3 { font-size: 15px; margin-bottom: 3px; }
  .rahmen.auf-start.demo-modus .infokarte p { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; }
}
/* Schrift wächst mit der Kachel (nicht mit dem Fenster) */
@container (min-height: 150px) {
  .infokarte h3 { font-size: 18px !important; margin-bottom: 8px !important; }
  .infokarte p { font-size: 14.5px !important; -webkit-line-clamp: 3 !important; }
}
@container (min-height: 260px) {
  .infokarte h3 { font-size: 22px !important; }
  .infokarte p { font-size: 16px !important; line-height: 1.5 !important; -webkit-line-clamp: 4 !important; }
}

/* Überschrift eines Dokumentationsfelds umbenennen (doku.js feldnamenBearbeitbar) */
.feld-titel { display: inline-flex; align-items: center; gap: 4px; }
.doku-feld { display: flex; flex-direction: column; gap: 6px; }
.doku-feld .feld-kopf { display: flex; align-items: center; gap: 4px; min-height: 24px; }
.doku-feld .feld-kopf label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.doku-feld .feld-kopf label[hidden], .doku-feld .feld-stift[hidden] { display: none; }
.doku-feld:hover .feld-stift, .doku-feld:focus-within .feld-stift { opacity: 1; }
.feld-stift { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--leise); cursor: pointer; opacity: .55; transition: opacity .15s, background .15s; }
.feld-stift svg { width: 14px; height: 14px; }
label.feld:hover .feld-stift, .feld-stift:focus-visible { opacity: 1; }
.feld-stift:hover { background: var(--salbei-zart); color: var(--salbei-dunkel); }
.feld-stift.ok { opacity: 1; color: var(--salbei-dunkel); }

/* Diktat (diktat.js): Mikrofon neben der Feldüberschrift, Stand unter dem Feld */
.feld-stift.diktat-knopf { opacity: .85; color: var(--salbei-dunkel); margin-left: auto; }
@media (pointer: coarse) { .feld-stift.diktat-knopf { width: 36px; height: 32px; } .feld-stift.diktat-knopf svg { width: 18px; height: 18px; } }
.feld-stift.diktat-knopf[hidden] { display: none; }
.doku-feld .feld-kopf .notiz-gestalten { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 13px; }   /* Notiz im Editor gestalten (doku.js) */
.doku-feld .feld-kopf .notiz-gestalten svg { width: 15px; height: 15px; }
.doku-feld .feld-kopf:not(:has(.diktat-knopf:not([hidden]))) .notiz-gestalten { margin-left: auto; }
.feld-stift.diktat-knopf.an { opacity: 1; color: #fff; background: #c4563f; animation: diktat-puls 1.6s ease-in-out infinite; }
@keyframes diktat-puls { 50% { box-shadow: 0 0 0 5px rgba(196, 86, 63, .2); } }
.feld-stift.diktat-knopf.pause { opacity: 1; color: #c4563f; background: rgba(196, 86, 63, .12); }
.diktat-bereich { display: flex; flex-direction: column; gap: 4px; }
.diktat-bereich:empty { display: none; }
.diktat-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.diktat-zeit { font-size: 13px; color: #c4563f; font-variant-numeric: tabular-nums; margin-right: auto; }
.diktat-zeit.pause { color: var(--text-2); }
.diktat-stand { font-size: 13px; color: var(--text-2); }
.diktat-stand.fehler { color: #b3412c; }
.diktat-stand.fertig { color: var(--salbei-dunkel); }
@media (prefers-reduced-motion: reduce) { .feld-stift.diktat-knopf.an { animation: none; } }
.feld-titel-eingabe { font: inherit; font-size: 13.5px; padding: 3px 8px; border: 1px solid var(--salbei); border-radius: 6px; min-width: 260px; outline: none; }

/* Installierte App mit echter Praxis: die drei Bildkacheln am Dashboard doppelt so hoch (Nutzerwunsch 2026-10-29) */
@media (min-width: 1001px) {
  .rahmen.auf-start.als-app:not(.demo-modus) .infokarte { min-height: 224px; padding-left: 34%; }
  .rahmen.auf-start.als-app:not(.demo-modus) .infokarte svg.bild { width: 31%; }
  .rahmen.auf-start.als-app:not(.demo-modus) .infokarte h3 { font-size: 18px; margin-bottom: 8px; }
  .rahmen.auf-start.als-app:not(.demo-modus) .infokarte p { font-size: 14.5px; -webkit-line-clamp: 4; }
}
@media (min-width: 1001px) and (max-height: 960px) {
  .rahmen.auf-start.als-app:not(.demo-modus) .infokarte { min-height: 174px; }
}

/* Farben der Praxis auf Rechnungen (Einstellungen → Rechnungen) */
.ci-farben { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ci-farben label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.ci-farben input[type=color] { width: 42px; height: 32px; padding: 2px; border: 1px solid var(--rand-stark); border-radius: 8px; background: #fff; cursor: pointer; }

/* Termin abgeschlossen: Dokumentieren und Abrechnen (termin_abschluss.js) */
.abschluss-schritte { display: flex; flex-direction: column; gap: 10px; }
.abschluss-schritt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: #fff; }
.abschluss-schritt > svg { width: 24px; height: 24px; flex: none; color: var(--salbei-dunkel); }
.abschluss-schritt > div { flex: 1; min-width: 0; }
.abschluss-schritt b { display: block; font-weight: 600; }
.abschluss-schritt small { display: block; color: var(--leise); font-size: 13px; margin-top: 2px; }
.abschluss-schritt.erledigt { background: var(--salbei-zart); }
.abschluss-schritt.erledigt > svg { color: var(--salbei); }

/* Dashboard: Aufgaben, die die Praxis von selbst erkennt (fehlende Dokumentation, Abrechnen) */
.zeile.auto-aufgabe > svg:first-child { width: 22px; height: 22px; flex: none; color: var(--salbei); margin: 0 1px; }
.auto-mehr { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 2px 2px; }
.auto-mehr .textlink { font-size: 12.5px; padding: 2px 0; }

/* Blöcke/Mehrfachkarten und Verordnungen in der Klientenakte (kontingent_ui.js) */
.kontingente { border-top: 1px solid var(--rand); margin: 4px 20px 0; padding: 12px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.kontingente-kopf { display: flex; align-items: center; gap: 10px; }
.kontingente-kopf b { flex: 1; font-size: 13px; color: var(--text-2); }
.kontingente-kopf .textlink { font-size: 13px; }
.kontingent-zeile { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--rand); border-radius: 10px; background: #fff; padding: 8px 10px; cursor: pointer; font: inherit; }
.kontingent-zeile:hover { border-color: var(--salbei); }
.kontingent-zeile > span:first-child { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--sonne-hell); color: #8a5a17; flex: none; }
.kontingent-zeile > span.verordnung { background: var(--salbei-hell); color: var(--salbei-dunkel); }
.kontingent-zeile svg { width: 17px; height: 17px; }
.kontingent-zeile b { display: block; font-size: 13.5px; font-weight: 600; }
.kontingent-zeile small { display: block; font-size: 12px; color: var(--leise); }
.kontingent-zeile.vorbei { opacity: .65; }
.kontingent-stand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kontingent-stand b { font-size: 18px; }
.abschluss-knoepfe { display: flex; gap: 8px; flex: none; }
.abschluss-tn, .abschluss-zeiten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.abschluss-tn .knopf svg, .abschluss-zeiten .knopf svg { width: 14px; height: 14px; }
.abschluss-schritt > div { align-self: center; }

/* Verlaufswerte in der Dokumentation */
.mw-bereich { display: flex; flex-direction: column; gap: 6px; }
.mw-titel { font-size: 13px; font-weight: 500; color: var(--text-2); }
.mw-zeile { display: grid; grid-template-columns: 1fr 110px 36px; gap: 8px; align-items: center; }
.mw-zeile input { padding: 8px 10px; border: 1px solid var(--rand-stark); border-radius: 8px; font: inherit; font-size: 14px; }
.mw-bereich .textlink { align-self: flex-start; font-size: 13px; }
.meldung.demo { background: #8a5a17; }
.meldung.demo::before { content: "Demo · "; font-weight: 700; }
.fehlertext.demo-hinweis { color: #8a5a17; background: var(--sonne-hell); padding: 8px 12px; border-radius: 8px; }
.abschluss-weiterer summary { cursor: pointer; font-size: 13px; margin-top: 6px; display: inline-block; }
.kontingent-zahlung { margin: 6px 0 0; font-size: 13.5px; } .kontingent-zahlung.offen { color: #9a5b12; } .kontingent-zahlung.ok { color: var(--salbei-dunkel); }
.anmeldung .klein-text { font-size: .8rem; margin: 10px 0 0; }
.haken-feld { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: .85rem; line-height: 1.4; cursor: pointer; }
.haken-feld[hidden] { display: none; }
.haken-feld input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--salbei-dunkel); }

/* Team (Einstellungen → Team, team.js) */
.team-plaetze { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--salbei-hell); line-height: 1.5; }
.team-plaetze svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--salbei-dunkel); }
.team-wahl { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.team-wahl legend { padding: 0; margin-bottom: 6px; font-size: .85rem; color: var(--text-2); }
.team-wahl label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; cursor: pointer; }
.team-wahl label:has(input:checked) { border-color: var(--salbei-dunkel); background: var(--salbei-hell); }
.team-wahl input { width: auto; height: auto; flex: none; margin-top: 3px; accent-color: var(--salbei-dunkel); }
.team-wahl span { display: grid; gap: 2px; }
.team-wahl small { color: var(--text-2); line-height: 1.4; }
.kal-person { height: 38px; border: 1px solid var(--rand); border-radius: 10px; padding: 0 10px; background: #fff; font: inherit; margin-left: auto; }
.kal-bei { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,.08); }

/* Abo (Einstellungen → Abo, abo_ui.js) */
.abo-marke { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; border: 1px solid #efd3a0; background: var(--sonne-hell);
  color: #7a4b0f; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.abo-marke.vorbei { background: var(--rot-hell); border-color: transparent; color: var(--rot); }
.abo-stand { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 0 0 8px; }
.abo-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--salbei-hell); color: var(--salbei-dunkel); }
.abo-chip.test { background: var(--sonne-hell); color: #7a4b0f; }
.abo-chip.gekuendigt { background: var(--rot-hell); color: var(--rot); }
.abo-starten { margin: 12px 0 4px; padding: 14px 16px; border: 1px solid var(--rand); border-radius: 12px; }
.abo-ki { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.abo-ki-balken { flex: 0 1 260px; height: 8px; border-radius: 99px; background: var(--rand); overflow: hidden; }
.abo-ki-balken i { display: block; height: 100%; background: var(--salbei); border-radius: 99px; }

/* Einführung (einfuehrung.js) – Entwurf vom 2026-10-30: Begrüßung und Abschluss als Wolke mit Sonne, Hinweise als helle Kärtchen
   mit orangem Nummernpunkt. Die Hinweise sind Popover in der obersten Ebene, am Bedienelement oder unten angedockt. */
:root { --wolke-weiss: #fbf9f3; }

/* ---- Hinweis am Bedienelement: kleine Wolke (Kuppen oben und seitlich), Gedankenblasen zum Ziel */
.tour-hinweis[popover], .tour-hinweis {
  position: fixed; inset: auto; margin: 0; padding: 14px 20px 12px; width: 340px; max-width: calc(100vw - 36px); height: auto; overflow: visible;
  background: transparent; color: var(--text); border: 0; border-radius: 0; box-shadow: none; font: 14px/1.5 var(--schrift); z-index: 1000;
  filter: drop-shadow(0 0 1px rgba(31, 45, 40, .22)) drop-shadow(0 14px 22px rgba(31, 45, 40, .16)) drop-shadow(0 1px 2px rgba(31, 45, 40, .08));
  animation: tour-rein .2s ease-out;
}
.tour-hinweis::backdrop { display: none; }
.th-form { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.th-form span, .th-blase { position: absolute; background: var(--wolke-weiss); border-radius: 50%; }
.th-form .th-grund { inset: 0; border-radius: 30px; }
.th-b1 { width: 46%; height: 76px; left: 5%; top: -24px; }
.th-b2 { width: 40%; height: 92px; left: 32%; top: -36px; }
.th-b3 { width: 36%; height: 66px; right: 4%; top: -18px; }
.th-b4 { width: 64px; height: 58%; left: -13px; top: 16%; }
.th-b5 { width: 58px; height: 52%; right: -12px; top: 28%; }
.th-blase { z-index: 0; box-shadow: 0 0 0 1px rgba(31, 45, 40, .07); }
.th-blase.gross { width: 22px; height: 22px; }
.th-blase.klein { width: 13px; height: 13px; }
.th-blase[hidden] { display: none; }
.th-inhalt { position: relative; z-index: 1; }
.tour-hinweis p { margin: 8px 0 12px; color: var(--text-2); }
.tour-kopf { display: flex; align-items: center; gap: 10px; }
.tour-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sonne); color: #fff; display: inline-grid; place-items: center;
  font-size: 13px; font-weight: 700; box-shadow: 0 0 0 4px var(--sonne-hell); }
.tour-nr.info { background: var(--salbei-hell); color: var(--salbei-dunkel); box-shadow: none; }
.tour-nr.info svg { width: 16px; height: 16px; }
.tour-titel { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tour-titel small { color: var(--leise); font-size: 11.5px; letter-spacing: .2px; }
.tour-titel b { font-size: 15px; font-weight: 600; }
.tour-zu { border: 0; background: none; color: var(--leise); cursor: pointer; padding: 5px; margin: -6px -8px 0 0; align-self: flex-start; display: inline-flex; border-radius: 50%; }
.tour-zu:hover { background: var(--salbei-zart); color: var(--text); }
.tour-zu svg { width: 18px; height: 18px; }
.tour-fuss { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.tour-fuss .knopf.klein { border-radius: 999px; padding: 8px 16px; }
.tour-fuss .knopf svg { width: 16px; height: 16px; }
.tour-fuss .textlink { font-size: 13px; padding: 4px 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rand-stark); }
.tour-fuss [data-t="spaeter"] { margin-left: auto; color: var(--text-2); }
.tour-ablauf { list-style: none; margin: 12px 0 14px; padding: 0; display: grid; gap: 10px; position: relative; }
.tour-ablauf li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-2); font-size: 13.5px; line-height: 1.45; position: relative; }
.tour-ablauf li:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: -12px; border-left: 2px dotted #c3cbc1; }
.tour-ablauf b { color: var(--text); font-weight: 600; }
.tour-punkt { flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--sonne); color: #fff; font: 700 11px/21px var(--schrift); text-align: center; margin-top: 0; }
.tour-ziel { outline: 3px solid var(--sonne) !important; outline-offset: 3px; border-radius: var(--radius-klein); animation: tour-puls 1.8s ease-in-out infinite; position: relative; z-index: 2; }
@keyframes tour-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 163, 58, .35); } 50% { box-shadow: 0 0 0 8px rgba(242, 163, 58, 0); } }
@keyframes tour-rein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Begrüßung und Abschluss: Wolke */
dialog.tour-wolke { width: min(980px, calc(100vw - 16px)); max-width: none; max-height: calc(100dvh - 12px); padding: 0; border: 0; background: transparent; overflow: auto; color: var(--text); }
dialog.tour-wolke::backdrop { background: rgba(247, 246, 241, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tw-rahmen { position: relative; padding: 0 0 30px; }
.tw-sonne { position: absolute; width: 190px; top: 6px; left: calc(50% + 120px); }
.tw-form { position: absolute; inset: 0 0 30px; filter: drop-shadow(0 18px 34px rgba(31, 45, 40, .14)); }
.tw-form span { position: absolute; background: var(--wolke-weiss); border-radius: 50%; }
.tw-form .tw-grund { left: 5%; right: 3%; top: 150px; bottom: 0; border-radius: 150px; }
.tw-b1 { width: 380px; height: 380px; left: calc(50% - 215px); top: 22px; }
.tw-b2 { width: 290px; height: 290px; left: 9%; top: 110px; }
.tw-b3 { width: 270px; height: 270px; right: 11%; top: 120px; }
.tw-b4 { width: 280px; height: 280px; right: 0; top: 260px; }
.tw-b5 { width: 280px; height: 280px; left: 0; top: 230px; }
.tw-blase1 { width: 44px; height: 44px; left: 6.5%; bottom: 2px; }
.tw-blase2 { width: 24px; height: 24px; left: 9.5%; bottom: -26px; }
.tw-inhalt { position: relative; padding: 70px 12% 16px; text-align: center; }
.tw-inhalt .logo { margin-bottom: 26px; }
.tw-inhalt .logo svg.wolke-zeichen { width: 70px; margin-bottom: -10px; }
.tw-inhalt .logo .wortmarke { font-size: 34px; }
.tw-zu { position: absolute; top: 150px; right: 15%; border: 0; background: none; color: var(--text-2); cursor: pointer; padding: 6px; border-radius: 50%; display: inline-flex; }
.tw-zu:hover { background: var(--salbei-zart); }
.tw-zu svg { width: 20px; height: 20px; }
.tw-inhalt h2 { margin: 0; font-size: clamp(25px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.3px; }
.tw-unter { margin: 8px 0 0; font-size: clamp(17px, 2vw, 22px); font-weight: 500; }
.tw-claim { margin: 6px 0 0; color: var(--text-2); font-size: 15px; }
.tw-text { margin: 18px auto 0; color: var(--text-2); font-size: 14px; max-width: 560px; }
.tw-merkmale { display: grid; grid-template-columns: 1fr 1fr; margin: 28px auto 0; max-width: 720px; text-align: left; }
.tw-merkmale > div { display: flex; align-items: center; gap: 14px; padding: 2px 22px; }
.tw-merkmale > div + div { border-left: 1px solid var(--rand-stark); }
.tw-merkmale b { display: block; font-size: 15px; font-weight: 600; }
.tw-merkmale small { display: block; color: var(--text-2); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.tw-rund { flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--salbei-hell); color: var(--salbei-dunkel); display: grid; place-items: center; }
.tw-rund svg { width: 24px; height: 24px; }
.tw-trenner { display: flex; align-items: center; gap: 14px; margin: 26px 0 20px; color: var(--text-2); font-size: 13.5px; }
.tw-trenner::before, .tw-trenner::after { content: ""; flex: 1; border-top: 1px solid var(--rand-stark); }
.tw-claim + .tw-schritte { margin-top: 30px; }
.tw-kurz { display: none; }
.tw-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tw-schritte li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tw-schritte li:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: calc(50% + 40px); right: calc(-50% + 40px); border-top: 2px dotted #b9c2b8; }
.tw-symbol { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--salbei-hell); color: var(--salbei-dunkel); display: grid; place-items: center; margin-bottom: 8px; }
.tw-symbol svg { width: 24px; height: 24px; }
.tw-symbol i { position: absolute; top: -4px; right: -4px; width: 19px; height: 19px; border-radius: 50%; background: var(--sonne); color: #fff; font: 700 11px/19px var(--schrift); font-style: normal; display: grid; place-items: center; }
.tw-symbol i svg { width: 12px; height: 12px; }
.tw-schritte.erledigt .tw-symbol i { background: var(--salbei); }
.tw-schritte b { font-size: 13.5px; font-weight: 600; }
.tw-schritte small { font-size: 12px; color: var(--text-2); }
.tw-knoepfe { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }
.tw-knoepfe .knopf.haupt-knopf { border-radius: 999px; padding: 13px 26px; font-size: 15px; gap: 12px; }
.tw-knoepfe .knopf svg { width: 18px; height: 18px; }
.tw-selbst { border: 0; background: none; color: var(--text); font: 500 14.5px var(--schrift); cursor: pointer; padding: 6px 2px; text-decoration: underline; text-underline-offset: 7px; text-decoration-color: var(--rand-stark); }
.tw-selbst:hover { text-decoration-color: var(--salbei); }
.tw-fuss { margin: 16px 0 0; color: var(--leise); font-size: 12.5px; }

/* Laptop und Tablet: weniger Seitenwolken */
@media (max-width: 900px) {
  .tw-inhalt { padding-left: 9%; padding-right: 9%; }
  .tw-b4, .tw-b5 { display: none; }
  .tw-form .tw-grund { left: 2%; right: 2%; border-radius: 90px; }
  .tw-zu { right: 8%; }
}
/* Handy: eine Wolkenkappe oben, Schritte nur mit Titel */
@media (max-width: 640px) {
  .tour-hinweis[popover], .tour-hinweis { padding: 12px 16px 10px; }
  .tour-fuss .knopf.klein { padding: 9px 16px; }
  dialog.tour-wolke { width: calc(100vw - 12px); }
  .tw-rahmen { padding-bottom: 6px; }
  .tw-form { inset: 0 0 6px; }
  .tw-form .tw-grund { left: 0; right: 0; top: 70px; border-radius: 36px; }
  .tw-b1 { width: 210px; height: 210px; left: calc(50% - 105px); top: 8px; }
  .tw-b2 { width: 150px; height: 150px; left: 4%; top: 46px; }
  .tw-b3 { width: 140px; height: 140px; right: 6%; top: 50px; }
  .tw-blase1, .tw-blase2 { display: none; }
  .tw-sonne { width: 110px; left: calc(50% + 40px); top: 0; }
  .tw-inhalt { padding: 34px 20px 18px; }
  .tw-inhalt .logo { margin-bottom: 14px; }
  .tw-inhalt .logo svg.wolke-zeichen { width: 54px; margin-bottom: -8px; }
  .tw-inhalt .logo .wortmarke { font-size: 27px; }
  .tw-zu { top: 76px; right: 8px; }
  .tw-claim { font-size: 14px; }
  .tw-merkmale { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .tw-merkmale > div { padding: 0; }
  .tw-merkmale > div + div { border-left: 0; }
  .tw-rund { width: 44px; height: 44px; }
  .tw-trenner { margin: 18px 0 14px; font-size: 12.5px; }
  .tw-schritte li::after, .tw-schritte small { display: none; }
  .tw-symbol { width: 42px; height: 42px; margin-bottom: 4px; }
  .tw-symbol svg { width: 19px; height: 19px; }
  .tw-schritte b { font-size: 11.5px; font-weight: 600; line-height: 1.25; }
  .tw-lang { display: none; }
  .tw-kurz { display: inline; }
  .tw-claim + .tw-schritte { margin-top: 20px; }
  .tw-knoepfe { margin-top: 18px; flex-direction: column; gap: 8px; }
  .tw-knoepfe .knopf.haupt-knopf { width: 100%; justify-content: center; }
  .tw-fuss { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .tour-ziel, .tour-hinweis { animation: none; } }

/* ------------------------------------------------------------------ Handy (Nutzerwunsch 2026-10-30)
   Oben eine Zeile: Logo links, „Installieren“ etwa mittig (nur solange die Wolke nicht als App läuft; Nutzerwunsch 2026-10-30), Glocke, Profil und
   das Menü rechts – keine Suche, kein Demo-Abzeichen (Branche wechseln steht im Profilmenü). Das Menü kommt von rechts.
   Startseite: nur „Beleg fotografieren“, Termine und Aufgaben, genau eine Bildschirmhöhe; die Listen rollen in ihren Karten. */
@media (max-width: 700px) {
  .kopf .suche, .kopf .demo-marke { display: none !important; }
  .kopf .installieren-knopf:not([hidden]) { display: inline-flex; margin: 0 auto; padding: 7px 11px; gap: 5px; font-size: 13px; white-space: nowrap; flex: none; }
  .kopf .installieren-knopf svg { width: 16px; height: 16px; }
  .kopf .installieren-knopf span { display: none; }
  .kopf .installieren-knopf::after { content: "Installieren"; }
  .kopf { flex-wrap: nowrap; gap: 4px; margin-bottom: 12px; padding-right: 52px; min-height: 48px; }
  .kopf-logo, .auf-start .kopf-logo { display: block; flex-basis: auto; margin-right: auto; }
  .kopf-zurueck { display: none; }                                 /* Handy: Zurück per Wischgeste bzw. Systemtaste */
  .kopf-logo:has(~ .installieren-knopf:not([hidden])) { margin-right: 0; }
  .kopf-logo .logo svg.wolke-zeichen { width: 42px; margin-bottom: -7px; }
  .kopf-logo .logo .wortmarke { font-size: 22px; }
  .kopf-logo .logo .unterzeile { display: none; }
  .kopf-rechts { margin-left: 0; gap: 2px; }
  .glocke { padding: 9px; }
  .rand-griff.links { position: absolute; left: auto; right: 14px; top: 16px; transform: none; width: 46px; height: 46px; border: 1px solid var(--rand-stark);
    border-radius: 14px; opacity: 1; box-shadow: none; background: #fff; color: var(--text); }
  .rand-griff.links svg { width: 21px; height: 21px; }
  .leiste { left: auto; right: 0; width: min(290px, 84vw); border-right: 0; border-left: 1px solid var(--rand); box-shadow: -12px 0 34px rgba(30, 45, 40, .14);
    transform: translate3d(calc(100% + 40px), 0, 0); }
  .rand-links-auf .leiste { transform: none; }

  .rahmen.auf-start .haupt { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-bottom: 12px; }
  .rahmen.auf-start #seite { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .rahmen.auf-start .beleg-handy { flex: none; margin-bottom: 12px; }
  .rahmen.auf-start .schnell, .rahmen.auf-start .infokarten,
  .rahmen.auf-start :is(.raster-vier, .raster-drei) > :not(.karte-heute):not(.karte-aufgaben) { display: none; }
  .rahmen.auf-start :is(.raster-vier, .raster-drei) { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; margin: 0; }
  .rahmen.auf-start :is(.karte-heute, .karte-aufgaben) { flex: 1 1 0; min-height: 0; max-height: none; display: flex; flex-direction: column; }
  .rahmen.auf-start :is(.karte-heute, .karte-aufgaben) > .karte-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .rahmen.auf-start :is(.karte-heute, .karte-aufgaben) > :is(.karte-kopf, .karte-fuss) { flex: none; }
}
@media (max-width: 380px) { .kopf .installieren-knopf::after { content: "App"; } }
@media (max-width: 340px) { .kopf .installieren-knopf::after { content: none; } .kopf .installieren-knopf:not([hidden]) { padding: 8px; } }

/* Kalender am Handy: Woche Mo–Fr (kal-woche.fuenf), Knopf „Sa/So“ schaltet das Wochenende dazu */
.kal-we { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rand-stark); background: #fff; color: var(--text-2); border-radius: 999px;
  padding: 6px 11px; font: 600 12.5px var(--schrift); cursor: pointer; position: relative; }
.kal-we.an { background: var(--salbei-hell); border-color: var(--salbei); color: var(--salbei-dunkel); }
.kal-we .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--sonne); }
@media (max-width: 700px) {
  .kal-woche.fuenf:not(.tag) { grid-template-columns: 34px repeat(5, minmax(0, 1fr)); font-size: 12px; }
}

/* Termin ansehen (Handy, termin_form.terminAnsicht): übersichtlich, nur lesen; „Bearbeiten“ klein unten rechts */
.termin-ansicht { display: grid; gap: 10px; padding-bottom: 4px; }
.ta-kopf { display: flex; gap: 12px; align-items: stretch; margin-bottom: 4px; }
.ta-balken { flex: none; width: 5px; border-radius: 3px; background: var(--ta-farbe); }
.ta-kopf b { display: block; font-size: 19px; font-weight: 600; line-height: 1.3; }
.ta-kopf small { color: var(--text-2); font-size: 14px; }
.ta-klient { border: 0; background: none; padding: 2px 0; margin: 0; font: 500 15px var(--schrift); color: var(--salbei-dunkel); cursor: pointer; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: var(--rand-stark); text-align: left; }
.ta-zeile { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--text); }
.ta-zeile svg { width: 19px; height: 19px; flex: none; color: var(--text-2); }
.ta-zeile small { color: var(--leise); font-size: 13px; }
.ta-zeile a { color: var(--salbei-dunkel); }
.ta-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ta-marke { font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--salbei-zart); color: var(--text-2); border: 1px solid var(--rand); }
.ta-marke.stattgefunden, .ta-marke.gruen { background: var(--salbei-hell); color: var(--salbei-dunkel); border-color: transparent; }
.ta-marke.abgesagt, .ta-marke.nicht_erschienen { background: var(--rot-hell); color: var(--rot); border-color: transparent; }
.ta-marke.geplant { background: var(--sonne-hell); color: #8a5a12; border-color: transparent; }
.ta-notiz { margin: 2px 0 0; padding: 10px 12px; border-radius: var(--radius-klein); background: var(--salbei-zart); color: var(--text-2); font-size: 14px; white-space: pre-wrap; }
.ta-bearbeiten { padding: 7px 14px; font-size: 13.5px; }
.ta-bearbeiten svg { width: 15px; height: 15px; }
dialog.fenster:has(.termin-ansicht) { width: min(420px, calc(100vw - 24px)); }

/* Kalender: Termine anderer im Team nur „Belegt“ (grau); Raumplan „Räume“ (je Raum eine Spalte, Farbe je Person) */
.kal-termin.fremd b { color: var(--text-2); font-weight: 600; }
.kal-auswahl { display: contents; }
.kal-raeume .raum-kopf { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-left: 4px; padding-right: 4px; min-width: 0; }
.kal-raeume .raum-kopf b { font-size: 13.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-raeume .raum-kopf small { font-size: 11.5px; color: var(--leise); font-weight: 400; }
.kal-termin.raum-belegt b { text-transform: none; }

/* Kalender am Handy: Kopf rückt zusammen – Heute ‹ › und Tag · Woche · Monat (· Räume) in einer Zeile, Titel mit Sa/So, Filter nebeneinander */
@media (max-width: 700px) {
  .kal-seitenkopf { margin-bottom: 8px !important; align-items: center; }
  .kal-seitenkopf h1 { font-size: 22px; }
  .kal-seitenkopf .knopf.haupt-knopf { padding: 8px 14px; font-size: 14px; }
  .kal-seitenkopf .lang { display: none; }
  .kal-leiste { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "heute zur vor ansicht ansicht" "titel titel titel titel we" "wahl wahl wahl wahl wahl";
    align-items: center; gap: 6px 2px; margin-bottom: 8px; }
  .kal-leiste > * { min-width: 0; }
  .kal-leiste [data-heute] { grid-area: heute; padding: 6px 10px; font-size: 13px; }
  .kal-leiste [data-schritt="-1"] { grid-area: zur; }
  .kal-leiste [data-schritt="1"] { grid-area: vor; }
  .kal-leiste .icon-knopf { width: 28px; height: 30px; padding: 0; justify-content: center; align-items: center; }
  .kal-leiste .kal-ansichten { grid-area: ansicht; justify-self: end; margin: 0 !important; gap: 0; flex-wrap: nowrap; border: 1px solid var(--rand-stark);
    border-radius: 999px; background: #fff; overflow: hidden; }
  .kal-leiste .kal-ansichten button { border: 0; border-radius: 0; padding: 6px 8px; font-size: 12.5px; background: none; white-space: nowrap; }
  .kal-leiste .kal-ansichten button + button { border-left: 1px solid var(--rand); }
  .kal-leiste .kal-ansichten button.an { background: var(--salbei-hell); }
  .kal-woche:not(.tag):not(.kal-raeume) .kal-bei.ich { display: none; }
  .kal-leiste h2 { grid-area: titel; margin: 0 2px; min-width: 0; font-size: 15px; line-height: 1.3; }
  .kal-leiste .kal-we { grid-area: we; justify-self: end; padding: 5px 10px; }
  .kal-leiste .kal-auswahl { grid-area: wahl; display: flex; gap: 6px; }
  .kal-leiste .kal-auswahl select { flex: 1 1 0; min-width: 0; padding: 6px 8px; font-size: 13px; height: 34px; }
  .kal-raeume { --kal-zeit: 34px; }
  .kal-raeume .raum-kopf b { font-size: 11.5px; line-height: 1.25; white-space: normal; hyphens: auto; -webkit-hyphens: auto; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kal-legende { font-size: 12px; }
}
@media (max-width: 370px) { .kal-leiste .kal-ansichten button { padding: 6px 6px; font-size: 12px; } .kal-leiste [data-heute] { padding: 6px 8px; } }

/* Umstieg (umstieg.js): vier Karten zum Übernehmen */
.umstieg-arten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.umstieg-art { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 14px 16px; border: 1px solid var(--rand); border-radius: 14px; background: var(--flaeche, #fff);
  cursor: pointer; font: inherit; color: var(--text); line-height: 1.45; }
.umstieg-art:hover { border-color: var(--salbei); background: #f4f8f5; }
.umstieg-art svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--salbei); }
.umstieg-spalten select { max-width: 100%; }
@media (max-width: 700px) { .umstieg-spalten th:nth-child(2), .umstieg-spalten td:nth-child(2) { display: none; } .umstieg-spalten td, .umstieg-spalten th { padding-left: 6px; padding-right: 6px; } }

/* Belege (finanzen_belege.js) */
.belege-leiste { flex-wrap: wrap; gap: 10px 16px; }
.belege-leiste .rechts { margin-left: auto; }
.beleg-daumen { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rand); background: #fff; display: block; }
.beleg-daumen.pdf { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #b04a3a; background: #fbefec; border-color: #f0d5cf; }
.beleg-daumen.pdf.gross { width: 56px; height: 64px; font-size: 13px; }
.beleg-titel { margin: 0 0 10px; color: var(--text-2); }
.beleg-ansicht { background: #f3f1ec; border-radius: 10px; padding: 8px; max-height: 70vh; overflow: auto; text-align: center; }
.beleg-bild { max-width: 100%; max-height: calc(70vh - 16px); cursor: zoom-in; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.beleg-bild.voll { max-width: none; max-height: none; cursor: zoom-out; }
.beleg-pdf-kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.beleg-text { white-space: pre-wrap; font-size: 12.5px; line-height: 1.45; background: #f7f6f2; border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px; max-height: 45vh; overflow: auto; margin: 0 0 10px; }
.etikett-knopf { border: 0; cursor: pointer; font: inherit; }
#druckbereich { display: none; }
@media print {
  body.druck-bilder > *:not(#druckbereich) { display: none !important; }
  body.druck-bilder #druckbereich { display: block !important; }
  .druck-beleg-seite { page-break-after: always; break-after: page; text-align: center; }
  .druck-beleg-seite:last-child { page-break-after: auto; break-after: auto; }
  .druck-beleg-seite p { font: 11px/1.4 sans-serif; text-align: left; margin: 0 0 6px; }
  .druck-beleg-seite img { max-width: 100%; max-height: 255mm; }
}

/* Klienten-App (klienten_app.js) */
.kapp-zahl { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--sonne); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.kapp-anfrage { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--rand); }
.kapp-anfrage:last-of-type { border-bottom: 0; }
.kapp-anfrage .was { flex: 1; min-width: 0; }
.kapp-anfrage .was p { margin: 6px 0 0; }
.kapp-anfrage .nachricht { background: var(--salbei-zart); border-radius: var(--radius-klein); padding: 8px 12px; font-size: 14px; }
.kapp-anfrage .knoepfe { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 440px; }
.kapp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kapp-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rand-stark); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 14px; background: #fff; }
.kapp-chip input { width: auto; padding: 0; margin: 0; box-shadow: none; accent-color: var(--salbei); }
.kapp-chip:has(input:checked) { background: var(--salbei-hell); border-color: var(--salbei); }
.kapp-zeiten fieldset { border: 0; padding: 0; margin: 0; }
.kapp-zeiten legend { font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 8px; padding: 0; }
.kapp-tage { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; margin-bottom: 6px; }
.kapp-tage label { display: flex; align-items: center; gap: 10px; }
.kapp-tage label span { width: 28px; font-weight: 500; color: var(--text-2); }
.kapp-tage input { flex: 1; min-width: 0; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); padding: 9px 12px; background: #fff; outline: none; }
.kapp-tage input:focus { border-color: var(--salbei); box-shadow: 0 0 0 3px rgba(95, 122, 105, .15); }
.kapp-vorschau { background: var(--salbei-zart); border-radius: var(--radius-klein); padding: 10px 14px; font-size: 14px; line-height: 2; }
.kapp-start h2 { font-size: 20px; }
.kapp-punkte { padding-left: 20px; line-height: 1.7; max-width: 760px; }
.kapp-app { padding-top: 20px; }
.kapp-qr-karte { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.kapp-qr { width: 190px; flex: none; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 8px; }
.kapp-qr svg { width: 100%; height: auto; display: block; }
.kapp-qr-karte > div:last-child { flex: 1; min-width: 240px; }
.kapp-titel { display: flex; gap: 12px; align-items: center; }
.kapp-titel img { border-radius: 10px; box-shadow: 0 0 0 1px var(--rand); }
.kapp-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.kapp-gefahr { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rand); max-width: 760px; }
.kapp-gefahr .knopf { margin: 4px 8px 0 0; }
/* Vorschau der Klienten-App: die App läuft in echter Handygröße (390 × 844, wie ein übliches Handy) und wird nur verkleinert gezeigt –
   so sieht man exakt, was Klient:innen sehen (Maßstab --kapp-s, passt sich in klienten_app.js der Höhe an) */
.kapp-handy { --kapp-s: .76; width: calc(390px * var(--kapp-s) + 20px); height: calc(844px * var(--kapp-s) + 20px); max-width: none; margin: 0 auto;
  border: 10px solid #1f2f2b; border-radius: calc(46px * var(--kapp-s) + 10px); overflow: hidden; background: #fff; flex: none; }
.kapp-handy iframe { width: 390px; height: 844px; border: 0; display: block; transform: scale(var(--kapp-s)); transform-origin: 0 0; }
@media (max-width: 700px) {
  .kapp-anfrage { flex-direction: column; }
  .kapp-anfrage .knoepfe { justify-content: flex-start; max-width: none; }
}

/* Klienten-App: Fotos (kapp_fotos.js), Schrift- und Farbwahl */
.foto-abschnitt { border-top: 1px solid var(--rand); }
.foto-abschnitt h2 { font-size: 18px; margin: 4px 0 8px; }
.foto-abschnitt h3 { font-size: 14px; font-weight: 600; color: var(--text-2); margin: 18px 0 8px; }
.foto-reihe { display: flex; flex-wrap: wrap; gap: 12px; }
.foto-kachel { width: 150px; border: 1px solid var(--rand); background: #fff; border-radius: var(--radius-klein); padding: 0 0 8px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; text-align: center; color: var(--text); }
.foto-kachel img { width: 100%; height: 120px; object-fit: cover; display: block; }
.foto-kachel span { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.foto-kachel em { font-style: normal; font-size: 11.5px; color: var(--leise); }
.foto-kachel.aus img { opacity: .45; }
.foto-kachel.leer { height: 170px; justify-content: center; border-style: dashed; padding: 8px; background: var(--salbei-zart); }
.foto-kachel.leer svg { width: 30px; height: 30px; color: var(--salbei); }
.foto-kachel:disabled { cursor: default; }
.kapp-farbe { display: flex; gap: 8px; align-items: center; }
.kapp-farbe select { flex: 1; }
.kapp-farbe input[type=color] { width: 52px; height: 42px; padding: 2px; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); background: #fff; }
.kapp-farbe [hidden] { display: none; }
.kapp-schrift-probe { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--radius-klein); background: color-mix(in srgb, var(--farbe, #4c6656) 9%, #fff);
  border-left: 4px solid var(--farbe, #4c6656); }
.kapp-schrift-probe b { font-size: 19px; color: var(--farbe, #4c6656); }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/quicksand-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
.kapp-schrift-probe[data-schrift=freundlich] { font-family: "Nunito", sans-serif; }
.kapp-schrift-probe[data-schrift=klassisch] { font-family: "Lora", serif; }
.kapp-schrift-probe[data-schrift=elegant] { font-family: "Source Sans 3", sans-serif; }
.kapp-schrift-probe[data-schrift=elegant] b { font-family: "Playfair Display", serif; }
.kapp-schrift-probe[data-schrift=leicht] { font-family: "Quicksand", sans-serif; }
.kapp-schrift-probe[data-schrift=persoenlich] { font-family: "Nunito", sans-serif; }
.kapp-schrift-probe[data-schrift=persoenlich] b { font-family: "Caveat", cursive; font-size: 26px; }

/* Klienten-App: „Dein Auftritt“ (klienten_app.js appSicht) */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
.kapp-auftritt { padding-top: 20px; }
.kapp-auftritt h2 { font-size: 22px; margin: 0 0 4px; }
.kapp-auftritt h3 { font-size: 15px; font-weight: 600; margin: 22px 0 10px; }
.kapp-auftritt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.kapp-auftritt-vorschau { position: sticky; top: 16px; }

.kapp-zeile-karte { display: flex; align-items: center; gap: 14px; border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; margin: 10px 0; background: #fffdf9; }
.kapp-zeile-karte > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kapp-zeile-karte small { font-size: 12px; color: var(--leise); }
.kapp-logo-klein { width: 64px; height: 44px; object-fit: contain; flex: none; }
.kapp-logo-klein.leer { background: var(--salbei-zart); border-radius: 8px; }
.kapp-profilbild { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.kapp-profilbild.leer { display: grid; place-items: center; background: var(--salbei-zart); color: var(--salbei); }
.kapp-schriften { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kapp-schrift-karte { position: relative; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--rand); border-radius: 14px; padding: 12px 14px; cursor: pointer; background: #fffdf9; }
.kapp-schrift-karte input { position: absolute; opacity: 0; pointer-events: none; }
.kapp-schrift-karte b { font-size: 30px; font-weight: 500; line-height: 1.1; }
.kapp-schrift-karte span { font-size: 12px; color: var(--leise); }
.kapp-schrift-karte em { font-style: normal; font-size: 13.5px; margin-top: 4px; }
.kapp-schrift-karte.an { border-color: var(--salbei); box-shadow: 0 0 0 2px var(--salbei-hell); }
.kapp-schrift-karte.an::after { content: "✓"; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--salbei); color: #fff;
  font-size: 13px; display: grid; place-items: center; }
.kapp-schrift-karte:has(input:focus-visible) { outline: 2px solid var(--salbei); outline-offset: 2px; }
.kapp-schrift-karte[data-schrift=klar] :is(b, em) { font-family: "Inter", sans-serif; }
.kapp-schrift-karte[data-schrift=klassisch] :is(b, em) { font-family: "Lora", serif; }
.kapp-schrift-karte[data-schrift=freundlich] :is(b, em) { font-family: "Nunito", sans-serif; }
.kapp-schrift-karte[data-schrift=modern] :is(b, em) { font-family: "Montserrat", sans-serif; }
.kapp-schrift-karte[data-schrift=elegant] b { font-family: "Playfair Display", serif; }
.kapp-schrift-karte[data-schrift=elegant] em { font-family: "Source Sans 3", sans-serif; }
.kapp-schrift-karte[data-schrift=leicht] :is(b, em) { font-family: "Quicksand", sans-serif; }
.kapp-schrift-karte[data-schrift=persoenlich] b { font-family: "Caveat", cursive; }
.kapp-schrift-karte[data-schrift=persoenlich] em { font-family: "Nunito", sans-serif; }
.kapp-farbe-zeile { display: flex; align-items: center; gap: 12px; }
.kapp-farbpunkt { width: 40px; height: 40px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--rand-stark); }
.kapp-speichern { margin-top: 20px; width: 100%; justify-content: center; padding: 12px; font-size: 16px; }
.kapp-auftritt .kapp-qr-karte { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rand); }
.kapp-news-bild { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kapp-news-bild > span { width: 100%; font-size: 13px; font-weight: 500; color: var(--text-2); }
.kapp-news-bild img { max-height: 120px; max-width: 220px; border-radius: 10px; display: block; }
@media (max-width: 1000px) { .kapp-auftritt-raster { grid-template-columns: 1fr; } .kapp-auftritt-vorschau { position: static; } }

/* Klienten-App: Chat (kapp_chat.js) */
.kchat-raster { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; min-height: 420px; }
.kchat-liste { display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--rand); padding-right: 12px; }
.kchat-person { position: relative; text-align: left; border: 0; background: none; border-radius: var(--radius-klein); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; }
.kchat-person small { color: var(--leise); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kchat-person.an { background: var(--salbei-zart); }
.kchat-person .kapp-zahl { position: absolute; right: 8px; top: 10px; }
.kchat-verlauf-rahmen { display: flex; flex-direction: column; min-width: 0; }
.kchat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rand); }
.kchat-verlauf { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 4px; max-height: 420px; overflow-y: auto; }
.kchat-blase { max-width: 78%; padding: 8px 12px 5px; border-radius: 14px; background: #f3f2ec; }
.kchat-blase.ich { align-self: flex-end; background: var(--salbei); color: #fff; }
.kchat-blase p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kchat-blase time { display: block; text-align: right; font-size: 11px; opacity: .7; }
.kchat-eingabe { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--rand); }
.kchat-eingabe textarea { flex: 1; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); padding: 9px 12px; resize: vertical; font: inherit; }
@media (max-width: 700px) { .kchat-raster { grid-template-columns: 1fr; } .kchat-liste { border-right: 0; padding-right: 0; flex-direction: row; overflow-x: auto; } .kchat-person { flex: none; } }

/* Fotos zuschneiden (bild_editor.js) */
.be-rahmen { position: relative; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #222; touch-action: none; cursor: grab; user-select: none; }
.be-rahmen:active { cursor: grabbing; }
.be-rahmen canvas { width: 100%; height: 100%; display: block; }
.be-gitter { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 33.333% 33.333%; background-position: -1px -1px; opacity: .6; }
.be-regler { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 4px; }
.be-regler label { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.be-regler input[type=range] { flex: 1; accent-color: var(--salbei); }
.be-rund { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.be-rund-bild { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--salbei-zart); box-shadow: 0 0 0 1px var(--rand); }
.be-rund-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.termin-app-hinweis { display: flex; gap: 10px; align-items: flex-start; background: var(--salbei-zart); border-radius: var(--radius-klein); padding: 10px 12px; }
.termin-app-hinweis svg { width: 20px; height: 20px; flex: none; color: var(--salbei-dunkel); margin-top: 1px; }
.termin-app-hinweis[hidden], .feld[hidden] { display: none; }

/* Sitzung beendet: Dauer korrigieren (sitzung.js) */
.sitzung-dauer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: var(--radius-klein); }
.sitzung-dauer label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.sitzung-dauer input { border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); padding: 7px 9px; font: inherit; }
.sitzung-dauer .sd-text { display: flex; flex-direction: column; flex: 1; min-width: 110px; }
.sitzung-dauer .sd-text b { font-size: 16px; }
.sitzung-dauer [hidden], .hinweis[hidden] { display: none; }

/* Dashboard: Kacheln „Neue Chats“ (start.js nachrichtenKarte, Mitte) und „Neue E-Mails“ (mailKarte, rechts) – Aufbau wie die anderen Bildkacheln */
.nachrichten-karte, .mail-karte { cursor: default; }
.nachrichten-karte h3 .nk-zahl, .mail-karte h3 .nk-zahl { display: inline-block; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 6px; border-radius: 11px; background: var(--sonne);
  color: #fff; font-style: normal; font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; vertical-align: 2px; }
.mail-karte h3 .nk-zahl { background: var(--salbei); }
.nk-liste { display: grid; gap: 2px; }
.nk-liste p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.nk-zeile { display: block; width: 100%; border: 0; background: none; padding: 4px 0; text-align: left; font: inherit; font-size: 14px; color: var(--text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-zeile:hover b { text-decoration: underline; }
.nk-zeile .leise { font-size: 12.5px; margin-left: 4px; }
.nk-betreff { color: var(--text-2); margin-left: 6px; }
.nachrichten-karte .pfeil, .mail-karte .pfeil { text-decoration: none; color: var(--text); }
@media (max-width: 700px) {
  .rahmen.auf-start { --handy-kachel: 84px; }                     /* „Beleg fotografieren“ und „Neue Chats“ gleich hoch */
  .rahmen.auf-start .beleg-handy { height: var(--handy-kachel); padding-top: 0; padding-bottom: 0; order: 0; }
  /* Kacheln einzeln in die Reihenfolge der Startseite: Beleg → Neue Chats → Termine/Aufgaben → Neue E-Mails (vorerst zuletzt, Nutzer 2026-10-31) */
  .rahmen.auf-start .infokarten { display: contents !important; }
  .rahmen.auf-start .infokarten > :not(.nachrichten-karte):not(.mail-karte) { display: none; }
  .rahmen.auf-start .nachrichten-karte { order: 1; }
  .rahmen.auf-start :is(.raster-vier, .raster-drei) { order: 2; }
  .rahmen.auf-start .mail-karte { order: 3; margin-top: 12px; }
  .rahmen.auf-start .infokarten :is(.nachrichten-karte, .mail-karte) { flex: none; height: var(--handy-kachel); min-height: 0; padding: 0 52px 0 27% !important;
    display: flex; flex-direction: column; justify-content: center; border-radius: var(--radius); margin-bottom: 12px; }
  .rahmen.auf-start .infokarten .nachrichten-karte { background: #fbf1e3; }      /* gleiche Farbe wie am Computer */
  .rahmen.auf-start .infokarten .mail-karte { background: #eff1ec; margin-bottom: 0; }
  .rahmen.auf-start .infokarten :is(.nachrichten-karte, .mail-karte) svg.bild { width: 24%; }
  .rahmen.auf-start .infokarten :is(.nachrichten-karte, .mail-karte) h3 { font-size: 16px; margin: 0 0 1px; }
  .rahmen.auf-start .nk-liste { gap: 0; }
  .rahmen.auf-start .nk-liste > :not(:first-child):not(.nk-neu) { display: none; }      /* nur die neueste Meldung und „Chat schreiben“ */
  .rahmen.auf-start .nk-neu { margin-top: 2px; padding: 0; font-size: 13px; }
  .rahmen.auf-start .nk-zeile, .rahmen.auf-start .nk-liste p { padding: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rahmen.auf-start .nk-zeile .leise { display: none; }
  .rahmen.auf-start .infokarten :is(.nachrichten-karte, .mail-karte) .pfeil { width: 32px; height: 32px; right: 12px; bottom: 50%; transform: translateY(50%); }
}

/* Chatfenster (Kachel „Neue Chats“): links Chats bzw. Auswahl für einen neuen Chat, rechts der Verlauf; am Handy einspaltig */
.nachrichten-karte button.pfeil { border: 0; cursor: pointer; padding: 0; }
.nk-liste button.textlink { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; cursor: pointer; text-align: left; justify-self: start; }
.nk-neu { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-weight: 600; }
.nk-neu svg { width: 16px; height: 16px; }
dialog.fenster.chatfenster-dialog { width: min(920px, calc(100vw - 24px)); }
dialog.fenster.chatfenster-dialog > form > .fenster-fuss { display: none; }
dialog.fenster.chatfenster-dialog .fenster-inhalt { padding-bottom: 18px; }
.chatfenster { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; height: min(560px, calc(100dvh - 140px)); }
.cf-links { display: flex; flex-direction: column; gap: 8px; min-height: 0; border-right: 1px solid var(--rand); padding-right: 12px; }
.cf-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
.cf-kopf .textlink { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.cf-kopf svg { width: 16px; height: 16px; }
.cf-suche { width: 100%; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); padding: 9px 12px; font: inherit; }
.cf-liste { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.cf-liste .kchat-person { width: 100%; font: inherit; }
.cf-liste .kchat-person.ohne-app b { color: var(--text-2); font-weight: 500; }
.cf-rechts { min-height: 0; }
.cf-rechts .kchat-verlauf { max-height: none; min-height: 0; }
.cf-rechts > .leer { margin: auto; text-align: center; }
.cf-hinweis { max-width: 420px; line-height: 1.55; padding-top: 40px; }
.cf-zurueck { display: none; }
@media (max-width: 720px) {
  dialog.fenster.chatfenster-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.fenster.chatfenster-dialog > form { height: 100dvh; max-height: 100dvh; }
  dialog.fenster.chatfenster-dialog .fenster-inhalt { padding: 6px 14px 12px; }
  .chatfenster { grid-template-columns: 1fr; height: 100%; }
  .cf-links { border-right: 0; padding-right: 0; }
  .chatfenster.im-chat .cf-links, .chatfenster:not(.im-chat) .cf-rechts { display: none; }
  .cf-zurueck { display: inline-flex; margin-right: auto; }
  .kchat-kopf b { flex: 1; }
}
.cf-kopf .knopf { white-space: nowrap; flex: none; }

/* Hilfe & Handbuch (js/hilfe.js, HANDBUCH.md) – nach BR.os */
.hb-tour { max-width: 980px; margin-bottom: 18px; }
.hb { display: flex; flex-direction: column; gap: 14px; }
.hb-kopf { position: sticky; top: 0; z-index: 3; padding: 6px 0 8px; background: var(--grund); }
.hb-suche { position: relative; display: block; max-width: 980px; }
.hb-suche svg { position: absolute; left: 15px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; color: var(--leise); pointer-events: none; }
.hb-suche input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px 0 44px; font: inherit; font-size: 16px; border-radius: 24px;
  border: 1px solid var(--rand-stark); background: var(--karte); color: var(--text); box-shadow: var(--schatten); }
.hb-suche input:focus { outline: none; border-color: var(--salbei); box-shadow: 0 0 0 3px var(--salbei-hell); }
.hb-stand { margin: 6px 6px 0; font-size: 12.5px; }
.hb-rumpf { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: start; }
.hb-inhalt { position: sticky; top: 76px; max-height: calc(100vh - 110px); overflow: auto; padding-right: 6px; font-size: 13.5px; }
.hb-inhalt-gruppe p { margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.hb-inhalt-gruppe:first-child p { margin-top: 0; }
.hb-inhalt a { display: block; padding: 4px 10px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; color: var(--text); text-decoration: none; line-height: 1.35; }
.hb-inhalt a:hover { background: var(--salbei-zart); }
.hb-inhalt a.aktiv { border-left-color: var(--salbei); background: var(--salbei-hell); color: var(--salbei-dunkel); font-weight: 600; }
.hb-haupt { min-width: 0; }
.hb-haupt h2 { font-size: 17px; margin: 24px 0 10px; }
.hb-haupt > h2:first-child, .hb-treffer h2 { margin-top: 0; }
.hb-haupt svg { width: 22px; height: 22px; flex: none; color: var(--salbei); }
.hb-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.hb-kachel { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; row-gap: 2px; align-items: start; padding: 13px 15px; border-radius: var(--radius-klein);
  border: 1px solid var(--rand); background: var(--karte); color: var(--text); text-decoration: none; box-shadow: var(--schatten); }
.hb-kachel:hover { border-color: var(--salbei); }
.hb-kachel svg { grid-row: span 2; }
.hb-kachel b { font-size: 14px; font-weight: 600; }
.hb-kachel span { font-size: 12.5px; color: var(--leise); line-height: 1.45; min-width: 0; }
.hb-pfad { margin: 0 0 6px; font-size: 12.5px; color: var(--leise); }
.hb-pfad a { color: var(--salbei-dunkel); }
.hb-titel { display: flex; align-items: center; gap: 10px; font-size: 22px !important; margin: 0 0 12px !important; }
.hb-titel svg { width: 26px !important; height: 26px !important; }
.hb-hin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 16px; }
.hb-hin-knopf { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 13px; border-radius: 15px; border: 1px solid var(--salbei); color: var(--salbei-dunkel);
  font-size: 13px; text-decoration: none; background: var(--karte); }
.hb-hin-knopf:hover { background: var(--salbei); color: #fff; }
.hb-text { font-size: 14.5px; line-height: 1.65; max-width: 820px; color: var(--text); }
.hb-text h3 { font-size: 15.5px; margin: 22px 0 6px; }
.hb-text p { margin: 0 0 10px; }
.hb-text ul, .hb-text ol { margin: 0 0 12px; padding-left: 22px; }
.hb-text li { margin: 0 0 7px; }
.hb-text code { font-size: 12.5px; padding: 1px 5px; border-radius: 4px; background: var(--salbei-zart); border: 1px solid var(--rand); }
.hb-hinweis { margin: 14px 0; padding: 12px 16px; border-radius: var(--radius-klein); border-left: 4px solid var(--sonne); background: var(--sonne-hell); }
.hb-tab-rahmen { overflow-x: auto; margin: 6px 0 14px; }
.hb-tab { border-collapse: collapse; width: 100%; font-size: 13.5px; line-height: 1.5; background: var(--karte); border-radius: var(--radius-klein); }
.hb-tab th, .hb-tab td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--rand); }
.hb-tab th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); font-weight: 600; }
.hb-tab td:first-child { font-weight: 600; }
.hb-foto { margin: 0 0 18px; max-width: 820px; }
.hb-foto-k { display: block; width: 100%; padding: 0; border: 1px solid var(--rand); border-radius: var(--radius-klein); overflow: hidden; background: var(--karte); cursor: zoom-in; }
.hb-foto img { display: block; width: 100%; height: auto; }
.hb-foto figcaption { font-size: 12px; color: var(--leise); margin-top: 5px; }
.hb-lupe-lage { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px;
  background: rgba(31, 56, 51, .82); cursor: zoom-out; }
.hb-lupe-lage img { max-width: 100%; max-height: calc(100vh - 90px); border-radius: 8px; box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
.hb-bild { margin: 10px 0 18px; padding: 14px 16px 12px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--salbei-zart); max-width: 820px; }
.hb-bild figcaption { font-weight: 600; font-size: 13.5px; margin: 0 0 12px; }
.hb-bild-fluss { display: flex; align-items: stretch; gap: 6px; }
.hb-bild-fluss + .hb-bild-fluss { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rand-stark); }
.hb-bild-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.hb-schritt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 10px 8px;
  border-radius: var(--radius-klein); background: var(--karte); border: 1px solid var(--rand); }
.hb-schritt b { font-size: 13px; line-height: 1.3; font-weight: 600; }
.hb-schritt > span:not(.hb-nummer) { font-size: 12px; line-height: 1.4; color: var(--text-2); }
.hb-schritt .hb-sym { width: 30px; height: 30px; color: var(--salbei); margin-bottom: 2px; }
.hb-schritt.gut { border-color: var(--salbei); } .hb-schritt.gut .hb-sym { color: var(--salbei-dunkel); }
.hb-schritt.aussen { border-style: dashed; } .hb-schritt.aussen .hb-sym { color: var(--leise); }
.hb-nummer { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sonne); color: #fff;
  font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.hb-ablauf { background: var(--sonne-hell); border-color: #f3dcb4; }
.hb-pfeil { flex: none; width: 16px; align-self: center; height: 2px; background: var(--rand-stark); position: relative; }
.hb-pfeil::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--rand-stark); border-right: 0; }
.hb-bild-fuss { margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }
.hb-trefferliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hb-treffer-k { display: flex; flex-direction: column; gap: 4px; padding: 11px 15px; border-radius: var(--radius-klein); border: 1px solid var(--rand); background: var(--karte);
  color: var(--text); text-decoration: none; box-shadow: var(--schatten); }
.hb-treffer-k:hover, .hb-treffer-k:focus-visible { border-color: var(--salbei); outline: none; }
.hb-treffer-kopf { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--salbei-dunkel); }
.hb-treffer-kopf svg { width: 16px !important; height: 16px !important; }
.hb-treffer-text { font-size: 13.5px; line-height: 1.5; }
.hb mark { background: var(--sonne-hell); color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px #f3dcb4; }
.hb-blitz { animation: hb-blitz 2.4s ease-out; border-radius: 6px; }
@keyframes hb-blitz { 0%, 30% { background: var(--sonne-hell); box-shadow: 0 0 0 6px var(--sonne-hell); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
.hb-weiter { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rand); max-width: 820px; }
.hb-weiter .knopf { white-space: normal; text-align: left; height: auto; min-height: 36px; }
@media (max-width: 900px) {
  .hb-rumpf { grid-template-columns: 1fr; }
  .hb-inhalt { display: none; }
}
@media (max-width: 700px) {
  .hb-tab thead { display: none; }
  .hb-tab tr { display: block; padding: 8px 10px; border-bottom: 1px solid var(--rand); }
  .hb-tab td { display: block; border: 0; padding: 2px 0; }
  .hb-tab td:not(:first-child)::before { content: attr(data-kopf) ": "; color: var(--leise); font-size: 12px; }
  .hb-bild-fluss { flex-direction: column; }
  .hb-schritt { display: grid; grid-template-columns: 30px 1fr; text-align: left; align-items: center; column-gap: 10px; }
  .hb-schritt .hb-sym, .hb-schritt .hb-nummer { grid-row: span 2; justify-self: center; }
  .hb-pfeil { width: 2px; height: 14px; }
  .hb-pfeil::after { right: -4px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid var(--rand-stark); border-bottom: 0; }
  .hb-bild-raster { grid-template-columns: 1fr 1fr; }
}

/* Marketing: Flyer, Plakate, Ankündigungen (gestalten.js) */
.gs-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.gs-art { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 2px; text-align: left; align-items: start;
  border: 1px solid var(--rand); background: #fff; border-radius: 14px; padding: 16px; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.gs-art:hover, .gs-art:focus-visible { border-color: var(--salbei); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.gs-art .gs-art-bild { grid-row: span 2; }
.gs-art-bild { display: block; width: 44px; height: 56px; border-radius: 4px; background: var(--salbei-hell); position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.gs-art-bild::before, .gs-art-bild::after { content: ""; position: absolute; left: 6px; right: 6px; border-radius: 2px; }
.gs-art-flyer { background: #fff; }
.gs-art-flyer::before { top: 0; left: 0; right: 0; height: 24px; background: var(--salbei); border-radius: 0; }
.gs-art-flyer::after { top: 30px; height: 4px; background: #d9ded9; box-shadow: 0 8px 0 #d9ded9, 0 16px 0 var(--sonne); right: 14px; }
.gs-art-plakat { width: 48px; height: 64px; background: var(--salbei); }
.gs-art-plakat::before { top: 10px; height: 10px; background: #fff; box-shadow: 0 14px 0 #fff; right: 10px; }
.gs-art-plakat::after { bottom: -14px; left: -10px; width: 34px; height: 34px; border-radius: 50%; background: var(--sonne); right: auto; }
.gs-art-ankuendigung { background: #fff; }
.gs-art-ankuendigung::before { top: 0; left: 0; right: 0; height: 14px; background: var(--salbei); border-radius: 0; }
.gs-art-ankuendigung::after { top: 20px; height: 3px; background: #d9ded9; box-shadow: 0 6px 0 #d9ded9, 0 12px 0 #d9ded9, 0 18px 0 #d9ded9, 0 24px 0 #d9ded9; }
.gs-h2 { font-size: 16px; font-weight: 600; margin: 22px 0 12px; }
.gs-h2 .klein { font-weight: 400; margin-left: 6px; }
.gs-hinweis .karte-inhalt { display: flex; flex-direction: column; gap: 6px; }
.gs-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.gs-karte { background: #fff; border: 1px solid var(--rand); border-radius: 14px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; }
.gs-karte:hover, .gs-karte:focus-visible { border-color: #cbd6cc; box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.gs-bild { background: #f1efe9; display: flex; align-items: center; justify-content: center; padding: 14px; min-height: 150px; }
.gs-bild canvas { max-width: 100%; height: auto; box-shadow: 0 2px 8px rgba(0,0,0,.14); border-radius: 2px; background: #fff; }
.gs-karte .gs-bild canvas { max-height: 240px; width: auto !important; }
.gs-unter { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gs-unter b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gs-chip { border: 1px solid var(--rand-stark); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.gs-chip.an { border-color: var(--salbei); background: var(--salbei-hell); color: var(--salbei-dunkel); }
.gs-farben { display: inline-flex; }
.gs-farben i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.gs-farben i + i { margin-left: -4px; }
.gs-segment { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rand-stark); border-radius: 10px; overflow: hidden; width: fit-content; max-width: 100%; }
.gs-segment button { border: 0; background: #fff; padding: 8px 14px; font: inherit; cursor: pointer; color: var(--text-2); }
.gs-segment button + button { border-left: 1px solid var(--rand-stark); }
.gs-segment button.an { background: var(--salbei-hell); color: var(--salbei-dunkel); font-weight: 600; }
.gs-archiv-filter { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gs-archiv-filter .feld { min-width: 180px; }
.gs-wahl { display: grid; gap: 10px; }
.gs-wahl-art { display: flex; gap: 14px; align-items: center; border: 1px solid var(--rand); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.gs-wahl-art:has(input:checked) { border-color: var(--salbei); background: var(--salbei-hell); }
.gs-wahl-art input { margin: 0; }
.gs-wahl-art small { display: block; margin-top: 2px; }
dialog.fenster.gs-fenster { width: min(1220px, calc(100vw - 24px)); }
.gs-fenster .fenster-inhalt { padding-top: 0; }
.gs-editor { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 22px; align-items: start; }
.gs-steuer { min-width: 0; }
.gs-steuer-kopf { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; background: #fff; z-index: 2; margin: 0 0 12px; border-bottom: 1px solid var(--rand); }
.gs-steuer-kopf { flex-wrap: wrap; row-gap: 4px; }
.gs-reiter { border: 0; padding: 0; flex: 1 1 100%; order: 2; }
.gs-reiter button { padding: 12px 11px 10px; }
.gs-ki-knopf { flex: none; order: 1; margin-top: 2px; }
.gs-vorschau { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.gs-papier { width: 100%; display: flex; justify-content: center; background: #f1efe9; border-radius: 12px; padding: 18px; }
.gs-papier canvas { box-shadow: 0 4px 18px rgba(0,0,0,.16); background: #fff; max-width: 100%; }
.gs-idee { max-width: 520px; text-align: center; margin: 0; }
.gs-design h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 16px 0 8px; font-weight: 600; }
.gs-design h3:first-child { margin-top: 4px; }
.gs-design h3 .klein { text-transform: none; letter-spacing: 0; font-weight: 400; }
.gs-layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gs-layout { border: 1px solid var(--rand); background: #faf9f6; border-radius: 10px; padding: 8px 6px 6px; cursor: pointer; font: inherit; font-size: 12.5px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; }
.gs-layout canvas { box-shadow: 0 1px 4px rgba(0,0,0,.15); max-height: 96px; width: auto !important; }
.gs-layout.an { border-color: var(--salbei); background: var(--salbei-hell); font-weight: 600; }
.gs-eigen { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; }
.gs-eigen label { display: flex; align-items: center; gap: 8px; }
.gs-eigen input[type=color] { width: 38px; height: 30px; border: 1px solid var(--rand-stark); border-radius: 6px; padding: 2px; background: #fff; }
.gs-schriftwahl { margin-top: 10px; border: 1px solid var(--rand); border-radius: 10px; padding: 8px 12px; background: #faf9f6; }
.gs-schriftwahl summary { cursor: pointer; font-size: 14px; }
.gs-schriftwahl summary b { font-size: 16px; margin: 0 4px; }
.gs-schriftwahl[open] summary { margin-bottom: 8px; }
.gs-gruppe { margin: 8px 0 4px; }
.gs-gruppe > small { display: block; margin-bottom: 6px; }
.gs-schrift { font-size: 16px; }
.gs-regler { display: flex; flex-direction: column; gap: 10px; }
.gs-regler label:not(.schalter) { display: grid; grid-template-columns: 104px 1fr 82px; align-items: center; gap: 10px; font-size: 14px; }
.gs-regler input[type=range] { width: 100%; accent-color: var(--salbei); }
.gs-regler output { font-size: 13px; color: var(--text-2); text-align: right; }
.gs-regler .textlink { align-self: flex-start; }
.gs-hilfe { margin-top: -6px; }
.gs-ki-ergebnis h3 { font-size: 15px; margin: 18px 0 10px; }
.gs-ki-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gs-ki-karte { border: 1px solid var(--rand); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.gs-ki-karte > b, .gs-ki-karte > span { padding: 0 12px; }
.gs-ki-karte > .knopf { margin: 4px 12px 0; align-self: flex-start; }
@media (max-width: 900px) {
  .gs-editor { grid-template-columns: 1fr; }
  .gs-vorschau { position: static; order: -1; }
  .gs-papier { padding: 10px; }
  .gs-start { grid-template-columns: 1fr; }
  .gs-ki-raster { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .gs-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gs-bild { min-height: 120px; padding: 10px; }
  .gs-steuer-kopf { flex-wrap: wrap; position: static; }
  .gs-fenster .fenster-fuss { flex-wrap: wrap; gap: 6px; }
  .gs-fenster .fenster-fuss .rechts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .gs-fenster .fenster-fuss .knopf { padding: 8px 6px; justify-content: center; font-size: 13px; min-width: 0; }
  .gs-fenster .fenster-fuss .rechts [type=submit] { grid-column: 1 / -1; }
}
@media print { body.druck-bilder #druckbereich img.gs-druck { max-width: none; max-height: none; display: block; } }
.gs-bogen { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.gs-bogen .gs-papier { width: auto; padding: 14px; }
.gs-bogen-wahl { display: flex; flex-direction: column; gap: 10px; }
.gs-bogen-wahl p { margin: 0; }
@media (max-width: 700px) { .gs-bogen { grid-template-columns: 1fr; } .gs-bogen .gs-papier { justify-content: center; } }

/* Marketing: Bild-Ebene (gestalten_bilder.js) */
.gs-blatt { position: relative; display: inline-block; line-height: 0; }
.gs-ebenen { position: absolute; inset: 0; pointer-events: none; }
.gs-ebenen.an { pointer-events: auto; touch-action: none; }
.gs-ebene-rahmen { position: absolute; border: 1.5px dashed rgba(255,255,255,.9); outline: 1px dashed rgba(0,0,0,.45); cursor: move; box-sizing: border-box; }
.gs-ebene-rahmen.an { border: 2px solid var(--sonne); outline: 1px solid rgba(0,0,0,.25); }
.gs-griff { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--sonne); border: 2px solid #fff; cursor: nwse-resize; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.gs-ebenen-liste { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.gs-ebenen-liste:empty { display: none; }
.gs-ebene-knopf { position: relative; width: 58px; height: 58px; padding: 0; border: 2px solid var(--rand); border-radius: 10px; overflow: hidden; cursor: pointer; background: #f1efe9; }
.gs-ebene-knopf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-ebene-knopf span { position: absolute; left: 3px; top: 3px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; border-radius: 8px; padding: 0 5px; line-height: 16px; }
.gs-ebene-knopf.an { border-color: var(--sonne); }
.gs-ebene-steuer { border-top: 1px solid var(--rand); margin-top: 12px; }
.gs-form { display: inline-block; width: 14px; height: 12px; background: var(--salbei); }
.gs-form-kreis, .gs-form-oval { border-radius: 50%; } .gs-form-kreis, .gs-form-quadrat, .gs-form-sechseck { width: 12px; }
.gs-form-abgerundet { border-radius: 3px; } .gs-form-oval { width: 16px; height: 11px; }
.gs-form-bogen { border-radius: 7px 7px 0 0; } .gs-form-blatt { border-radius: 8px 0 8px 0; }
.gs-form-dreieck { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .gs-form-raute { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.gs-form-sechseck { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); } .gs-form-wolke { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
.gs-ablage { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.gs-ablage-bild { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gs-ablage-bild > button:first-child { padding: 0; border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #f1efe9; }
.gs-ablage-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-ablage-bild span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Marketing: Social Media (gestalten_social.js) */
.gs-art-social { width: 34px; height: 60px; border-radius: 7px; background: var(--salbei); border: 3px solid #2f3a35; }
.gs-art-social::before { top: 10px; height: 16px; left: 4px; right: 4px; background: var(--sonne); border-radius: 3px; }
.gs-art-social::after { bottom: 8px; height: 4px; left: 4px; right: 10px; background: #fff; box-shadow: 0 -7px 0 #fff; }
.gs-plattformen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.gs-plattform { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; border: 1px solid var(--rand); border-radius: 10px; padding: 7px 10px; cursor: pointer; font-size: 13.5px; }
.gs-plattform small { grid-column: 2; font-size: 11.5px; }
.gs-plattform input { grid-row: span 2; margin: 0; }
.gs-plattform.an { border-color: var(--salbei); background: var(--salbei-hell); }
.gs-posts-titel { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 20px 0 8px; }
.gs-post { border: 1px solid var(--rand); border-radius: 12px; padding: 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.gs-post-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gs-post textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; border: 1px solid var(--rand-stark); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.gs-zaehler { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
.gs-zaehler.zu-lang { color: #b3261e; font-weight: 600; }
.gs-formate { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gs-formate:empty { display: none; }
.gs-format { border: 1px solid var(--rand); background: #fff; border-radius: 10px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; font-size: 12px; max-width: 150px; color: inherit; }
.gs-format canvas { box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.gs-format small { color: var(--text-2); font-size: 10.5px; text-align: center; line-height: 1.3; }
.gs-format.an { border-color: var(--salbei); background: var(--salbei-hell); font-weight: 600; }

/* Marketing: Texte direkt in der Vorschau (antippen = ändern, ziehen = verschieben) */
.gs-texte { position: absolute; inset: 0; pointer-events: none; }
.gs-texte.an { pointer-events: auto; touch-action: none; }
.gs-texte.an .gs-text-flaeche { position: absolute; border-radius: 4px; cursor: text; outline: 1.5px dashed transparent; transition: outline-color .12s, background .12s; }
.gs-texte.an .gs-text-flaeche:hover { outline-color: rgba(242,163,58,.95); background: rgba(242,163,58,.08); cursor: move; }
.gs-texte.an .gs-text-flaeche.an { outline: 2px solid var(--sonne); }
.gs-text-zurueck { position: absolute; right: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--sonne); color: #fff; font-size: 14px; line-height: 24px; padding: 0; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.gs-text-eingabe { position: absolute; z-index: 3; box-sizing: border-box; font: 15px/1.4 Inter, system-ui, sans-serif; color: #1d1d1f; background: rgba(255,255,255,.97);
  border: 2px solid var(--sonne); border-radius: 8px; padding: 6px 8px; box-shadow: 0 6px 20px rgba(0,0,0,.2); resize: vertical; line-height: 1.4; }
.gs-texte-hinweis { margin: 0; text-align: center; }
.gs-texte-hinweis:empty { display: none; }

/* Marketing: Design-Elemente (gestalten_zeichnen.deko) */
.gs-element-rahmen { position: absolute; box-sizing: border-box; border: 1.5px dashed transparent; border-radius: 4px; cursor: move; }
.gs-ebenen.an .gs-element-rahmen:hover { border-color: rgba(91,143,208,.9); background: rgba(91,143,208,.08); }
.gs-element-rahmen.an { border: 2px solid #5b8fd0; background: rgba(91,143,208,.06); }
.gs-element-rahmen .gs-griff { background: #5b8fd0; }
.gs-elemente { border: 1px solid var(--rand); border-radius: 12px; padding: 4px 12px 12px; margin-bottom: 10px; background: #fafbfd; }
.gs-element-steuer { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.gs-aufklapp { border: 1px solid var(--rand); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
.gs-aufklapp summary { cursor: pointer; }
.gs-aufklapp[open] summary { margin-bottom: 6px; }

/* Startklar – erste Einrichtung nach der Registrierung (startklar.js) */
.sk-schritte { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; flex-wrap: wrap; }
.sk-schritte li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--leise); flex: 1; min-width: 0; padding-bottom: 8px; border-bottom: 3px solid var(--rand); }
.sk-schritte li span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--rand); color: var(--text); font-size: 13px; font-weight: 600; flex: none; }
.sk-schritte li span svg { width: 14px; height: 14px; }
.sk-schritte li em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-schritte li.jetzt { color: var(--text); font-weight: 600; border-color: var(--salbei); }
.sk-schritte li.jetzt span, .sk-schritte li.erledigt span { background: var(--salbei); color: #fff; }
.sk-schritte li.erledigt { border-color: var(--salbei-hell); }
.sk-teil h3 { margin: 0 0 4px; }
.sk-teil > p.leise { margin: 0 0 14px; }
.sk-leistung { display: grid; grid-template-columns: 1fr 108px 118px 36px; gap: 8px; align-items: center; margin-bottom: 8px; }
.sk-leistung input { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--rand-stark); border-radius: 10px; font: inherit; color: var(--text); background: #fff; }
.sk-leistung label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--leise); }
.sk-wahlen { display: grid; gap: 8px; margin-top: 4px; }
.sk-wahl { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 12px; cursor: pointer; }
.sk-wahl:has(input:checked) { border-color: var(--salbei); background: var(--salbei-zart); }
.sk-wahl input { width: auto; flex: none; margin-top: 3px; accent-color: var(--salbei); }
.sk-wahl > span { flex: 1; text-align: left; }
.sk-wahl small, .sk-los small { display: block; color: var(--leise); font-size: 13px; margin-top: 2px; }
.sk-loslegen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 14px 0; }
.sk-los { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border: 1px solid var(--rand); border-radius: 14px; background: #fff; font: inherit; color: var(--text); cursor: pointer; }
.sk-los:hover, .sk-los:focus-visible { border-color: var(--salbei); background: var(--salbei-zart); }
.sk-los svg { width: 22px; height: 22px; color: var(--salbei); flex: none; margin-top: 2px; }
.reg-bereiche { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.reg-gruppe { margin-top: 8px; }
.reg-gruppe > small { display: block; margin-bottom: -2px; }
.reg-bereiche label { display: inline-flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 6px; width: auto; text-align: left; margin: 0; font-weight: 400; color: var(--text); padding: 7px 12px; border: 1px solid var(--rand-stark); border-radius: 999px; font-size: 14px; cursor: pointer; background: #fff; }
.reg-bereiche label:has(input:checked) { border-color: var(--salbei); background: var(--salbei-zart); }
.reg-bereiche input { width: auto; flex: none; padding: 0; accent-color: var(--salbei); margin: 0; }
@media (max-width: 560px) {
  .sk-leistung { grid-template-columns: 1fr 1fr 36px; }
  .sk-leistung > input[name=name] { grid-column: 1 / -1; }
  .sk-schritte li:not(.jetzt) { flex: none; }
  .sk-schritte li:not(.jetzt) em { display: none; }
  .sk-leistung { padding-bottom: 8px; border-bottom: 1px solid var(--rand); }
}

/* Finanzen → Betriebsprüfung (pruefexport_ui.js) */
.pe-h { font-size: 14px; margin: 6px 0 4px; }
.pe-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.pe-liste li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.pe-liste li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--salbei); }
.pe-liste li.pe-fehlt .punkt { background: var(--sonne); margin-top: 5px; }

/* Tätigkeiten (taetigkeit.js): Umschalter im Kopf, schlanke Startseite je Tätigkeit */
.taetigkeit-knopf { flex: none; gap: 9px; padding: 6px 14px 6px 12px; background: var(--salbei-dunkel); border-color: var(--salbei-dunkel); color: #fff;
  box-shadow: 0 2px 8px rgba(76, 102, 86, .28); }   /* farbig und mit Namen, damit man die Tätigkeiten findet (Nutzer 2026-11-04) */
.taetigkeit-knopf:hover { background: #3f5748; border-color: #3f5748; }
.taetigkeit-knopf svg { width: 20px; height: 20px; }
.taetigkeit-knopf > svg:last-child { width: 15px; height: 15px; opacity: .85; margin-left: -1px; }
.taetigkeit-knopf .tk-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.taetigkeit-knopf .tk-text small { font-size: 10.5px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; opacity: .8; }
.taetigkeit-knopf .tk-text b { font-size: 15px; font-weight: 600; }
.taetigkeit-knopf.an { background: var(--sonne); border-color: var(--sonne); color: #3d2606; box-shadow: 0 2px 8px rgba(242, 163, 58, .35); }   /* eine Tätigkeit gewählt: Menü ist gefiltert */
.taetigkeit-knopf.an:hover { background: #e8952a; border-color: #e8952a; }
.aufklapp.taetigkeit-menue { width: 320px; max-width: calc(100vw - 16px); }
.aufklapp .taetigkeit-wahl { align-items: flex-start; }
.aufklapp .taetigkeit-wahl svg { margin-top: 2px; }
.aufklapp .taetigkeit-wahl b { display: block; font-weight: 500; }
.aufklapp .taetigkeit-wahl small { display: block; color: var(--leise); font-size: 12.5px; margin-top: 1px; }
.aufklapp .taetigkeit-wahl.an { background: var(--salbei-zart); }
.aufklapp .taetigkeit-wahl.an b { font-weight: 600; color: var(--salbei-dunkel); }
.nav-alles { color: var(--salbei-dunkel); margin-top: 6px; }
.auf-tk-start:not(.mit-verlauf) .kopf-zurueck { display: none; }   /* Startseite einer Tätigkeit: „Zurück“ nur, wenn es eine vorige Seite gibt (Nutzer 2026-11-04) */
@media (max-width: 1440px) { .installieren-knopf span { display: none; } .installieren-knopf { padding: 9px 11px; } }   /* Platz für Umschalter und Suche: „App installieren“ nur als Symbol */
.tk-kopf { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; }
.tk-kopf h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.3px; }
.tk-kopf p { margin: 4px 0 0; }
.tk-schnell { grid-template-columns: repeat(4, 1fr); }
.tk-raster { margin-bottom: 18px; }
.tk-raster .karte { min-width: 0; }
.tk-raster .karte-inhalt { max-height: 420px; overflow: auto; }
.tk-raster .karte-kopf h2 .nk-zahl { font-style: normal; font-size: 13px; font-weight: 500; color: var(--text-2); margin-left: 6px; }
.tk-raster small.ueber { color: var(--rot); }
.tk-raster .zeile { gap: 12px; color: inherit; text-decoration: none; }
.tk-bild { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #eff1ec; }
.tk-bild svg { width: 40px; height: 40px; display: block; }
.tk-bild.sonne { background: #fbf1e3; }
.tk-bild.rot { background: var(--rot-hell); }
.tk-bild.gross { width: 96px; height: 96px; border-radius: 22px; }
.tk-bild.gross svg { width: 84px; height: 84px; }
.tk-leer { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tk-schnell .rund.tk-bild { border-radius: 16px; }
.tk-schnell .rund.tk-bild.grau { background: #eff1ec; }
.tk-schnell .rund.tk-bild.sonne { background: #fbf1e3; }
.tk-schnell .rund.tk-bild svg { width: 90%; height: 90%; }
@media (min-width: 1001px) {   /* Tätigkeiten: Bilder in den Schnellknöpfen größer als die Symbole am Dashboard */
  .tk-schnell button { grid-template-columns: 54px 1fr; column-gap: 14px; padding: 12px 16px 12px 12px; }
  .tk-schnell .rund.tk-bild { width: 54px; height: 54px; }
}
@media (min-width: 1001px) and (max-width: 1350px) { .tk-schnell b { grid-row: 1 / 3; } .tk-schnell .rund.tk-bild { width: 48px; height: 48px; } .tk-schnell button { grid-template-columns: 48px 1fr; } }   /* Untertitel ist hier ausgeblendet: Titel mittig */
.tk-raster .zeile.auto-aufgabe > .tk-bild { margin: 0; }
.tk-infokarten { grid-template-columns: repeat(2, 1fr); }
.tk-raster .zeile .weiter svg { width: 18px; height: 18px; display: block; }
.tk-sitzung { display: flex; align-items: center; gap: 18px; padding: 22px 24px; margin-bottom: 18px; border-radius: var(--radius);
  background: var(--salbei-zart); border: 1px solid var(--rand); }
.tk-sitzung.laeuft { background: var(--sonne-hell); border-color: transparent; }
.tk-sitzung .kreis { width: 64px; height: 64px; font-size: 20px; flex: none; }
.tk-sitzung .kreis svg { width: 28px; height: 28px; }
.tk-sitzung-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tk-sitzung-text b { font-size: 22px; font-weight: 600; }
.tk-sitzung-text i { font-style: normal; font-weight: 600; }
.tk-sitzung .sitzung-start { flex: none; padding: 12px 22px 12px 18px; font-size: 16px; gap: 8px; }
.tk-sitzung .sitzung-start svg { width: 20px; height: 20px; }
.tk-letztes .karte-inhalt p { margin: 0 0 10px; line-height: 1.5; white-space: pre-line; }
.tk-letztes .karte-inhalt p.leise { margin-bottom: 6px; }
@media (max-width: 1000px) { .tk-schnell { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .taetigkeit-knopf { padding: 9px 8px 9px 10px; gap: 3px; }
  .taetigkeit-knopf .tk-text { display: none; }   /* Handy: farbiges Symbol mit Pfeil, der Name steht als Überschrift der Startseite */
  .taetigkeit-knopf svg { width: 19px; height: 19px; }
  .taetigkeit-knopf > svg:last-child { width: 13px; height: 13px; margin-left: 0; }
  .tk-kopf h1 { font-size: 22px; }
  .tk-sitzung { flex-wrap: wrap; padding: 16px; gap: 14px; }
  .tk-sitzung .kreis { width: 48px; height: 48px; font-size: 16px; }
  .tk-sitzung-text b { font-size: 18px; }
  .tk-sitzung .sitzung-start { width: 100%; justify-content: center; }
  .tk-infokarten { grid-template-columns: 1fr; }
  .tk-schnell { gap: 10px; }
  .tk-schnell button { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; align-content: center; padding: 12px; min-width: 0; }
  .tk-schnell .rund { width: 40px; height: 40px; margin: 0; grid-row: 1 / 3; align-self: center; }
  .tk-schnell .rund svg { width: 21px; height: 21px; }
  .tk-schnell b { font-size: 14.5px; }
  .tk-schnell span:not(.rund) { font-size: 12px; }
}

/* Beleg-Scanner (scanner.js): dunkle Vollbildansicht wie eine Scanner-App */
html.sc-offen, html.sc-offen body { overflow: hidden; }
.sc { position: fixed; inset: 0; z-index: 3000; background: #14201c; color: #fff; display: grid; grid-template-rows: 1fr auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.sc-bild { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 0; }
.sc-bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-bild > .sc-lage { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sc-hinweis { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 96px); padding: 9px 16px; border-radius: 999px;
  background: rgba(20, 32, 28, .72); backdrop-filter: blur(6px); font-size: 14px; font-weight: 500; text-align: center; pointer-events: none; }
.sc-hinweis:empty { display: none; }
.sc-leiste { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px 16px max(18px, env(safe-area-inset-bottom)); background: #14201c; }
.sc-leiste > :first-child { justify-self: start; } .sc-leiste > :last-child { justify-self: end; }
.sc-knopf { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; padding: 6px 8px; background: none; border: 0; color: #e6ece7; font: inherit; font-size: 12.5px; cursor: pointer; }
.sc-knopf svg { width: 24px; height: 24px; }
.sc-ausloeser { position: relative; width: 78px; height: 78px; padding: 0; border: 0; background: none; cursor: pointer; }
.sc-ausloeser svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-ausloeser .sc-ring { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 4; }
.sc-ausloeser .sc-fort { fill: none; stroke: #f2a33a; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 226.2; stroke-dashoffset: 226.2; transition: stroke-dashoffset .12s linear; }
.sc-ausloeser i { position: absolute; inset: 11px; border-radius: 50%; background: #fff; transition: transform .1s; }
.sc-ausloeser:active i { transform: scale(.9); }
.sc-weiter { gap: 8px; padding: 13px 22px; font-size: 16px; }
.sc-weiter svg { width: 20px; height: 20px; }
.sc-licht { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(20, 32, 28, .72); color: #fff; display: grid; place-items: center; }
.sc-licht[aria-pressed="true"] { background: #f2a33a; color: #14201c; }
.sc-licht svg { width: 22px; height: 22px; }
.sc.sc-blitz::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: .7; pointer-events: none; animation: sc-blitz .22s ease-out forwards; }
@keyframes sc-blitz { to { opacity: 0; } }
.sc-foto { position: relative; }
.sc-foto .sc-foto-bild, .sc-foto .sc-lage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-griff { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 0; padding: 0; background: none; touch-action: none; cursor: grab; }
.sc-griff::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; border: 3px solid #f2a33a; box-shadow: 0 1px 6px rgba(0,0,0,.4); transition: transform .1s; }
.sc-griff.zieht::before { transform: scale(1.35); }
.sc-ohne { max-width: 340px; padding: 24px; display: grid; gap: 8px; text-align: center; line-height: 1.5; }
.sc-ohne span { color: #c9d5c6; font-size: 14px; }

/* Rundgang (rundgang.js): abgedunkelte Seite, wandernder Lichtkegel, gezeichneter Pfeil, Erklärkarte; Kapitel oben anwählbar */
.rundgang[popover], .rundgang { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; overflow: hidden; color: var(--text); font: 14px/1.5 var(--schrift); z-index: 3000; }
.rundgang::backdrop { display: none; }
.rg-flaeche { position: absolute; inset: 0; }
.rg-loch { position: fixed; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(24, 38, 33, .58);
  transition: left .5s cubic-bezier(.3, .9, .3, 1), top .5s cubic-bezier(.3, .9, .3, 1), width .5s cubic-bezier(.3, .9, .3, 1), height .5s cubic-bezier(.3, .9, .3, 1), border-radius .5s;
  animation: rg-dunkel .35s ease-out; }
.rg-loch::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid var(--sonne); animation: rg-ring 1.9s ease-out infinite; }
.rg-loch.leer { border-radius: 50%; }
.rg-loch.leer::after { display: none; }
.rundgang.sucht .rg-loch::after { opacity: 0; }
@keyframes rg-dunkel { from { box-shadow: 0 0 0 200vmax rgba(24, 38, 33, 0); } }
@keyframes rg-ring { 0% { box-shadow: 0 0 0 0 rgba(242, 163, 58, .55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(242, 163, 58, 0); } }

.rg-pfeil { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rg-pfeil.aus, .rundgang.sucht .rg-pfeil { opacity: 0; }
.rg-pfeil path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rg-schein { stroke: rgba(255, 255, 255, .55); stroke-width: 9; }
.rg-linie { stroke: var(--sonne); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rg-spitze { stroke: var(--sonne); stroke-width: 4.5; }
.rg-pfeil.zeichnet .rg-linie { animation: rg-zeichnen .6s .25s cubic-bezier(.5, 0, .3, 1) backwards; }
.rg-pfeil.zeichnet .rg-schein { animation: rg-auf .6s .25s backwards; }
.rg-pfeil.zeichnet .rg-spitze { animation: rg-auf .2s .8s backwards, rg-stups 1.6s 1.1s ease-in-out infinite; }
@keyframes rg-zeichnen { from { stroke-dashoffset: 1; } }
@keyframes rg-auf { from { opacity: 0; } }
@keyframes rg-stups { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.rg-kapitel { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; max-width: calc(100vw - 20px);
  overflow-x: auto; scrollbar-width: none; background: rgba(251, 249, 243, .96); border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.rg-kapitel button { flex: none; border: 0; background: none; font: 600 12.5px/1 var(--schrift); color: var(--text-2); padding: 8px 13px; border-radius: 999px; cursor: pointer; }
.rg-kapitel button:hover { background: var(--salbei-zart); color: var(--text); }
.rg-kapitel button.fertig { color: var(--salbei-dunkel); }
.rg-kapitel button.fertig::before { content: "✓ "; }
.rg-kapitel button.an { background: var(--salbei); color: #fff; }

.rg-karte { position: fixed; width: 380px; background: var(--wolke-weiss); border-radius: 20px; padding: 16px 18px 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28), 0 0 0 1px rgba(31, 45, 40, .06);
  transition: left .5s cubic-bezier(.3, .9, .3, 1), top .5s cubic-bezier(.3, .9, .3, 1); animation: rg-karte-rein .4s ease-out; }
@keyframes rg-karte-rein { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.rg-kopf { display: flex; align-items: center; gap: 10px; }
.rg-nr { flex: none; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 99px; background: var(--sonne); color: #fff; display: inline-grid; place-items: center;
  font: 700 13px/1 var(--schrift); box-shadow: 0 0 0 4px var(--sonne-hell); }
.rg-wo { flex: 1; color: var(--leise); font-size: 12px; letter-spacing: .2px; }
.rg-zu { border: 0; background: none; color: var(--leise); cursor: pointer; padding: 5px; margin: -6px -8px 0 0; display: inline-flex; border-radius: 50%; }
.rg-zu:hover { background: var(--salbei-zart); color: var(--text); }
.rg-zu svg { width: 18px; height: 18px; }
.rg-text h3 { margin: 12px 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -.2px; }
.rg-text p { margin: 0 0 14px; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.rg-text.rein { animation: rg-text-rein .45s ease-out; }
@keyframes rg-text-rein { from { opacity: 0; transform: translateX(10px); } }
.rg-balken { position: relative; height: 4px; border-radius: 99px; background: var(--rand); overflow: hidden; margin-bottom: 12px; }
.rg-balken i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.rg-stand { background: var(--salbei); transition: width .5s ease; }
.rg-uhr { background: var(--sonne); width: 0; opacity: .9; }
.rg-fuss { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.rg-fuss .knopf { border-radius: 999px; padding: 8px 16px; }
.rg-fuss .knopf svg { width: 16px; height: 16px; }
.rg-auto { margin-right: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rand-stark); background: #fff; color: var(--salbei-dunkel);
  display: inline-grid; place-items: center; cursor: pointer; }
.rg-auto:hover { background: var(--salbei-zart); }
.rg-auto.an { background: var(--sonne-hell); border-color: var(--sonne); color: #8a5310; }
.rg-auto svg { width: 16px; height: 16px; }
@media (max-width: 700px) {
  .rg-karte { border-radius: 18px; padding: 14px 16px 12px; }
  .rg-text h3 { font-size: 17px; margin-top: 10px; }
  .rg-text p { font-size: 14px; }
  .rg-zurueck span { display: none; }
  /* Kapitelleiste in der Karte (rundgang.js setzen()): verdeckt so nie das erklärte Element */
  .rg-karte .rg-kapitel { position: static; transform: none; max-width: none; margin: -4px -6px 10px; padding: 3px; box-shadow: none; background: var(--salbei-zart); }
  .rg-karte .rg-kapitel button { padding: 7px 11px; font-size: 12px; }
  .rg-karte.knapp .rg-kapitel, .rg-karte.knapp .rg-balken { display: none; }
  .rg-karte.knapp .rg-text p { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-loch, .rg-karte, .rg-stand { transition: none; }
  .rg-loch, .rg-loch::after, .rg-karte, .rg-text.rein, .rg-pfeil.zeichnet path { animation: none !important; }
}
/* Hilfe: Karte „Rundgang“ */
.rg-hilfe { max-width: 980px; margin-bottom: 12px; }
.rg-hilfe .karte-inhalt { padding: 18px 20px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.rg-hilfe-bild { flex: none; width: 64px; height: 64px; border-radius: 18px; background: var(--sonne-hell); color: #b06a14; display: grid; place-items: center; }
.rg-hilfe-bild svg { width: 30px; height: 30px; }
.rg-hilfe-text { flex: 1 1 260px; min-width: 0; }
.rg-hilfe-text p { margin: 4px 0 10px; }
.rg-hilfe-kapitel { display: flex; gap: 6px; flex-wrap: wrap; }
.rg-hilfe-kapitel .textlink { font-size: 13px; padding: 4px 10px; border: 1px solid var(--rand-stark); border-radius: 999px; text-decoration: none; }
/* Rundgang: Hinweis auf die ersten Tage (automatisch gestartet) */
.rg-erste { margin: -4px 0 12px; padding: 9px 12px; border-radius: 12px; background: var(--sonne-hell); color: #6b4310; font-size: 13px; line-height: 1.45; }
.rg-erste .textlink { display: inline-block; margin-top: 4px; font-size: 12.5px; color: #6b4310; text-decoration: underline; text-underline-offset: 3px; }

/* Eltern / Erziehungsberechtigte (eltern_ui.js) */
.eltern-liste { display: grid; gap: 6px; margin-top: 4px; }
.eltern-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 10px; background: var(--karte); }
.eltern-zeile label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* Schulferien und Schularbeiten (pruefungen_ui.js) */
.kal-kopfzelle.ferien, .mtag.ferien { background: #fdf6e8; }
.kal-ferien { display: block; margin: 4px auto 0; font-size: 11px; color: #a06a12; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtag .kal-ferien { margin: 0 0 2px; text-align: left; }
.kal-pruefung { display: block; margin-top: 3px; padding: 2px 6px; border-radius: 6px; background: #eef3fb; color: #2f5f9e; font-size: 11px; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.kal-pruefung:hover { background: #e1eaf8; }
.pruef-abschnitt { margin: 4px 20px 0; padding: 12px 0 4px; border-top: 1px solid var(--rand); }
.pruef-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pruef-zeile { display: flex; gap: 10px; width: 100%; text-align: left; padding: 7px 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.pruef-zeile:hover { background: var(--salbei-zart); }
.pruef-zeile.vorbei { opacity: .7; }
.pruef-datum { min-width: 74px; color: var(--text-2); font-size: 13px; }

/* Übungen und Abgaben im Chat (kapp_chat.js) */
.kchat-uebung { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); }
.kchat-uebung small, .kchat-abgabe { font-size: 11.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; opacity: .75; }
.kchat-uebung p { margin: 2px 0 0; }
.kchat-datei { margin-top: 6px; display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--rand); background: #fff; font: inherit; font-size: 13px; cursor: pointer; color: var(--text); text-align: left; }
.kchat-datei:disabled { opacity: .6; cursor: default; }
.kchat-blase.ich .kchat-uebung { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.kchat-blase.ich .kchat-uebung p { color: #fff; }

/* Serienbrief (serienbrief.js) */
.sb-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .sb-raster { grid-template-columns: 1fr; } }
.sb-liste { max-height: 52vh; overflow: auto; border: 1px solid var(--rand); border-radius: 10px; }
.sb-zeile { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-bottom: 1px solid var(--rand); cursor: pointer; }
.sb-zeile:last-child { border-bottom: 0; }
.sb-zeile input { margin-top: 3px; }
.sb-fehlt .sb-hinweis { color: #b4532a; }

/* Ausfüllen und Unterschreiben am Gerät (unterschrift.js): Vollbild, Blatt rollt, unten das Unterschriftsfeld */
html.us-offen, html.us-offen body { overflow: hidden; }
.us-vollbild { position: fixed; inset: 0; z-index: 1000; background: #f4f3ef; display: flex; flex-direction: column; }
.us-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--rand); }
.us-kopf b { flex: 1; font-size: 17px; }
.us-blatt { flex: 1; overflow: auto; background: #fff; margin: 12px auto 0; width: min(800px, calc(100% - 24px)); padding: 24px 28px; border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); font-size: 17px; line-height: 1.55; -webkit-overflow-scrolling: touch; }
.us-blatt img { max-width: 100%; }
.us-kasten { font: inherit; font-size: 1.35em; line-height: 1; border: 0; background: none; padding: 2px 6px; margin: -2px 0; cursor: pointer; color: var(--salbei-dunkel, #3f5d4b); min-width: 44px; min-height: 40px; }
.us-unten { background: #fff; border-top: 1px solid var(--rand); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); width: 100%; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: end; max-width: 900px; margin: 0 auto; }
.us-name { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-2); }
.us-name input { font-size: 16px; padding: 8px 10px; }
.us-hinweis { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.us-flaeche { grid-column: 1 / -1; width: 100%; height: clamp(120px, 22vh, 240px); border: 2px dashed #b9c4bd; border-radius: 12px; background:
  linear-gradient(transparent calc(100% - 38px), #c8cfca calc(100% - 38px), #c8cfca calc(100% - 36px), transparent calc(100% - 36px)); touch-action: none; cursor: crosshair; }
.us-knoepfe { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; }
.us-knoepfe .knopf { min-height: 46px; padding-inline: 22px; }
.us-fehler { grid-column: 1 / -1; color: var(--rot); margin: 0; min-height: 1em; font-size: 14px; }
.us-ansicht { max-height: 60vh; overflow: auto; border: 1px solid var(--rand); border-radius: 10px; padding: 16px 20px; background: #fff; }
.us-ansicht img { max-width: 100%; }

/* Sprachwahl (sprache.js) */
.sprachwahl { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.sprachwahl select { font: inherit; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--rand); background: #fff; max-width: 170px; }
.lp-sprache { margin-right: 6px; }
@media (max-width: 700px) { .lp-sprache span { display: none; } .lp-sprache select { max-width: 110px; padding: 5px 6px; } }

/* Handelsedition (HANDEL.md): „Handel“ unter der Wortmarke – Startseite und Logo in der App */
.lp-edition { display: block; font-size: .3em; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--sonne); margin: 3px 0 0 2px; line-height: 1; }
.logo.klein .lp-edition { font-size: 8.5px; margin-top: 2px; }

/* Werkstatt (werkstatt_ui.js, Handelsedition) */
.etikett.ws-fertig { background: #e3efe5; color: #2f6b43; }
.ws-schritte { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.ws-angaben p { margin: 0 0 8px; }
.ws-angaben a { color: inherit; }
.ws-haken { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.ws-verlauf { padding: 6px 0; border-bottom: 1px solid var(--rand); font-size: 14px; }
.ws-verlauf:last-child { border-bottom: 0; }
.ws-geraet { border: 1px solid var(--rand); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.ws-geraet-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-geraet-kopf .icon-knopf { margin-left: auto; }
.ws-liste td small { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.ueber, small.ueber { color: var(--rot, #b3412e); }
@media (max-width: 700px) { .ws-schritte .knopf { flex: 1 1 45%; } }
/* Handelsedition am Handy: Werkstatt statt „Heute“ auf der Startseite (Termine sind im Geschäft selten) */
@media (max-width: 700px) {
  html[data-edition=handel] .rahmen.auf-start .karte-heute { display: none; }
  html[data-edition=handel] .rahmen.auf-start :is(.raster-vier, .raster-drei) > .karte-werkstatt { flex: 1 1 0; min-height: 0; max-height: none; display: flex; flex-direction: column; }
  html[data-edition=handel] .rahmen.auf-start .karte-werkstatt > .karte-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  html[data-edition=handel] .rahmen.auf-start .karte-werkstatt > :is(.karte-kopf, .karte-fuss) { flex: none; }
}

/* Kasse im Laden (kasse_laden.js): Strichcode-Zeile, Kamera, Rabatt, Zählprotokoll */
.kasse-scan { display: flex; gap: 8px; margin-bottom: 14px; }
.kasse-scan input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--rand-stark); border-radius: 12px; background: #fff; }
.kasse-korb .textlink.klein { font-size: 12.5px; margin-left: 4px; }
.kasse-rabatt td { color: var(--salbei-dunkel, #3f5f4b); }
.rabatt-schnell { display: flex; flex-wrap: wrap; gap: 6px; }
dialog.scan-fenster { padding: 0; border: 0; border-radius: 18px; width: min(560px, 96vw); background: #111; color: #fff; overflow: hidden; }
dialog.scan-fenster::backdrop { background: rgba(0, 0, 0, .7); }
.scan-bild { position: relative; aspect-ratio: 4 / 3; background: #000; }
.scan-bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-linie { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: #f2a33a; box-shadow: 0 0 10px #f2a33a; }
.scan-bild::after { content: ""; position: absolute; inset: 28% 8%; border: 2px solid rgba(255, 255, 255, .75); border-radius: 12px; }
.scan-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; font-size: 14px; }
.zaehl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px 12px; }
.zaehl-feld { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-2); }
.zaehl-feld input { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--rand-stark); border-radius: 10px; text-align: right; }
.zaehl-summe { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 6px; font-size: 15px; }
.zaehl-summe b.ueber { color: var(--rot, #b3412e); }