/* =====================================================================
   NEUES DESIGN „Hell" (15.10.2026)
   Vorlage: „Falax-App Redesign – Hell".
   JEDE Regel hier beginnt mit html[data-design="neu"] — ohne diesen Schalter
   wirkt diese Datei nicht, das klassische Design bleibt unangetastet.
   Werte (Farben, Rundungen, Abstände, Bewegungen) sind aus der Vorlage übernommen.
   ===================================================================== */

@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Kalam'; src: url('/fonts/kalam-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- 1. Farben: die Variablen der App auf die Werte der Vorlage ---------- */
html[data-design="neu"] {
  --bg: #F6F6F3;
  --canvas: #F6F6F3;
  --card: #FFFFFF;
  --ink: #111827;
  --muted: #4B5563;
  --line: #E7E5E0;
  --brand: #FDB913;
  --brand-dark: #F5B301;
  --brand-soft: #FFF4D1;
  --brand-ink: #111827;
  --brand-text: #8A5A00;
  --navy: #111827;
  --navy-deep: #0B1220;
  --sidebar: #111827;
  --sidebar-ink: #C9CED8;
  --sidebar-muted: #9CA3AF;
  --ok: #047857;
  --warn: #B91C1C;
  --warn-strong: #DC2626;
  --warn-bg: #FEF2F2;
  --warn-line: #FBD5D5;
  --shadow: 0 1px 3px rgba(17, 24, 39, .05);
  --serif: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --topbar-bg: #F6F6F3;
  --topbar-ink: #111827;
  --topbar-ink-soft: #4B5563;
  --dn-gelb: #FDB913;
  --dn-gelb-2: #F5B301;
  --dn-dunkel: #111827;
  --dn-rand: #E7E5E0;
  --dn-trenner: #EFEEEA;
  --dn-text2: #4B5563;
  --dn-text3: #6B7280;
}
html[data-design="neu"] body,
html[data-design="neu"] button,
html[data-design="neu"] input,
html[data-design="neu"] select,
html[data-design="neu"] textarea { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }
html[data-design="neu"] body { background: #F6F6F3; color: #111827; }
html[data-design="neu"] .layout,
html[data-design="neu"] main.content { background: #F6F6F3; }
html[data-design="neu"] a:hover { color: #B7791F; }
html[data-design="neu"] button:active:not(:disabled) { transform: scale(.97); }

/* ---------- 2. Rahmen: Menü links über die ganze Höhe, Kopfzeile darüber nur rechts ---------- */
@media (min-width: 1025px) {
  html[data-design="neu"] #appView:not(.hidden) { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
  html[data-design="neu"] #appView > header.topbar { grid-column: 2; grid-row: 1; }
  html[data-design="neu"] #appView > .layout { display: contents; }
  html[data-design="neu"] nav.side { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; width: auto; }
  html[data-design="neu"] main.content { grid-column: 2; grid-row: 2; max-width: none; margin: 0; }
  html[data-design="neu"] body.nav-zu #appView:not(.hidden) { grid-template-columns: minmax(0, 1fr); }
  html[data-design="neu"] body.nav-zu nav.side { display: none !important; }   /* ☰ hat das Menü eingeklappt */
  html[data-design="neu"] body.nav-zu #appView > header.topbar,
  html[data-design="neu"] body.nav-zu main.content { grid-column: 1; }
}

/* ---------- 3. Kopfzeile ---------- */
html[data-design="neu"] header.topbar {
  background: #F6F6F3; border-bottom: 0; box-shadow: none;
  padding: 16px clamp(16px, 2.6vw, 32px); gap: 14px; justify-content: flex-start;
}
html[data-design="neu"] header.topbar .brand,
html[data-design="neu"] header.topbar .topbar-spruch { display: none; }
html[data-design="neu"] header.topbar .right { margin-left: auto; gap: 12px; flex-wrap: nowrap; flex-shrink: 0; }
html[data-design="neu"] header.topbar { flex-wrap: nowrap; }
html[data-design="neu"] .dn-suche {
  flex: 1 1 300px; min-width: 0; max-width: 420px; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px 0 14px;
  border-radius: 12px; background: #FFFFFF; border: 1px solid #E7E5E0; color: #6B7280; font-size: 14px; text-align: left; cursor: text;
}
html[data-design="neu"] .dn-suche:hover { border-color: #FDB913; box-shadow: 0 0 0 3px rgba(253, 185, 19, .18); }
html[data-design="neu"] .dn-suche-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-suche kbd { font: 700 11px 'Plus Jakarta Sans', sans-serif; padding: 4px 8px; border-radius: 6px; border: 1px solid #E7E5E0; background: #F6F6F3; color: #4B5563; }
html[data-design="neu"] .topbar-winbtn,
html[data-design="neu"] .topbar-search,
html[data-design="neu"] .nav-toggle,
html[data-design="neu"] .acct-toggle {
  min-height: 44px; min-width: 44px; border-radius: 12px; border: 1px solid #E7E5E0; background: #FFFFFF; color: #111827;
  align-items: center; justify-content: center; gap: 8px; transition: background-color .2s, transform .2s, border-color .2s;
}
html[data-design="neu"] .topbar-winbtn:hover,
html[data-design="neu"] .topbar-search:hover,
html[data-design="neu"] .nav-toggle:hover,
html[data-design="neu"] .acct-toggle:hover { border-color: #FDB913; background: #FFFCF2; }
html[data-design="neu"] .topbar-search { display: none; }   /* das Suchfeld links ersetzt die Lupe */
html[data-design="neu"] .topbar-anfragen { padding: 0 14px; font-size: 13px; font-weight: 700; background: #FFFFFF; color: #111827; border-color: #E7E5E0; }
html[data-design="neu"] .topbar-anfragen .ico { --ico: #1D4ED8; color: #1D4ED8; }
html[data-design="neu"] .topbar-anfragen .anfr-zahl { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #E5E7EB; color: #374151; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
html[data-design="neu"] .acct-toggle { padding: 0 12px 0 6px; border: 0; background: transparent; font-weight: 700; font-size: 14px; }
html[data-design="neu"] .acct-toggle .ico { width: 34px; height: 34px; border-radius: 999px; background: #111827; color: #FDB913; --ico: #FDB913; display: inline-flex; align-items: center; justify-content: center; }
html[data-design="neu"] .acct-caret { color: #4B5563; }
html[data-design="neu"] .acct-panel { border-radius: 14px; border: 1px solid #E7E5E0; box-shadow: 0 16px 30px -12px rgba(17, 24, 39, .3); }
html[data-design="neu"] .dn-umschalter { padding: 0 12px; font-size: 13px; font-weight: 700; }
html[data-design="neu"] .dn-umschalter svg { color: #F5B301; }
/* Im klassischen Design ist der Knopf ein normaler Kopfzeilen-Knopf mit Wort */
.dn-umschalter { gap: 6px; }
.dn-umschalter-wort { font-size: 13px; font-weight: 600; }
@media (max-width: 900px) { .dn-umschalter-wort { display: none; } }
/* Am Handy hat die Kopfzeile ihren eigenen Aufbau (handyKopf) — dort kein zusätzliches Suchfeld
   und kein Umschalt-Knopf; umgeschaltet wird dann in den Einstellungen. */
@media (max-width: 720px) {
  .dn-umschalter,
  html[data-design="neu"] .dn-suche { display: none !important; }
}

/* =====================================================================
   HANDY & TABLET HOCHKANT — nach der Handy-Vorlage
   (gleiche Weiche wie die Handy-Ansicht der App in styles.css)
   ===================================================================== */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  html[data-design="neu"] { --h-gruen: #111827; --h-akzent: #FDB913; --h-hell: #FFF4D1; --h-grund: #F4F4F1; --h-ink: #111827; --h-grau: #6B7280; --h-rot: #DC2626; --h-rahmen: #ECEAE4; --h-gruen-matt: #9CA3AF; }
  html[data-design="neu"] body,
  html[data-design="neu"] main.content,
  html[data-design="neu"] .layout { background: #F4F4F1; }
  html[data-design="neu"] .dn-suche { display: none !important; }
  /* Kopfzeile: dunkle, schwebende Leiste mit Goldschimmer */
  html[data-design="neu"] header.topbar {
    margin: 10px 12px 0 !important; padding: 0 8px !important; min-height: 58px; border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important; color: #FFFFFF;
    /* Wunsch 16.10.2026: „weniger Licht" — Gold- und Blauschimmer deutlich gedämpft */
    background: radial-gradient(70% 160% at 100% 0%, rgba(253, 185, 19, .12) 0%, rgba(253, 185, 19, 0) 60%), radial-gradient(60% 140% at 0% 100%, rgba(59, 130, 246, .08) 0%, rgba(59, 130, 246, 0) 60%), linear-gradient(135deg, #1E2A44 0%, #151D2E 55%, #111827 100%) !important;
    box-shadow: 0 14px 28px -16px rgba(17, 24, 39, .8), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    position: relative;
    padding-right: 6px !important;
  }
  /* Begrüßung und Vers genau in der Mitte der Leiste (nicht zwischen Logo und Knöpfen eingeklemmt) */
  html[data-design="neu"] header.topbar .h-gruss { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 210px); text-align: center; align-items: center; }
  html[data-design="neu"] header.topbar .h-gruss > * { max-width: 100%; text-align: center; }
  /* Knöpfe kleiner und ganz nach rechts */
  html[data-design="neu"] header.topbar .right { margin-left: auto; gap: 4px !important; flex: 0 0 auto !important; }
  html[data-design="neu"] header.topbar .brand { display: flex !important; flex: 0 0 auto; }
  html[data-design="neu"] header.topbar .brand-logo { height: 30px; border-radius: 8px; background: #FFFFFF; padding: 3px 6px; }
  html[data-design="neu"] .h-gruss-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 800; color: #FFFFFF !important; }
  html[data-design="neu"] .h-gruss-datum { font-size: 10px; color: #9CA3AF !important; }
  html[data-design="neu"] .h-gruss-spruch { font-size: 10px; font-style: normal; color: #E8B84A !important; max-width: 130px; }
  html[data-design="neu"] .h-gruss { min-width: 0; overflow: hidden; }
  html[data-design="neu"] header.topbar .h-kopf-knopf { display: flex; width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: #FFFFFF !important; --ico: #FFFFFF; box-shadow: none; margin-left: 0; }
  html[data-design="neu"] header.topbar .h-kopf-knopf svg { width: 15px; height: 15px; }
  html[data-design="neu"] .h-kopf-punkt { background: #EF4444; border-color: #1A2438; }
  /* Untere Leiste: dunkle, schwebende Pille, Wörter unter den Symbolen, Scannen in Gelb */
  html[data-design="neu"] .h-leiste {
    /* left/right NICHT setzen: Am Tablet zentriert die App die Leiste (left 50 % + translateX) */
    bottom: 16px; height: 58px; padding: 0 4px; border-radius: 20px; justify-content: space-around;
    border: 1px solid rgba(255, 255, 255, .08);
    background: radial-gradient(60% 160% at 50% 0%, rgba(253, 185, 19, .22) 0%, rgba(253, 185, 19, 0) 60%), radial-gradient(50% 140% at 0% 100%, rgba(59, 130, 246, .2) 0%, rgba(59, 130, 246, 0) 60%), linear-gradient(135deg, #263453 0%, #172033 55%, #111827 100%);
    box-shadow: 0 16px 30px -14px rgba(17, 24, 39, .75), inset 0 1px 0 rgba(255, 255, 255, .12);
  }
  html[data-design="neu"] .h-leiste-knopf { flex: 1 1 0; flex-direction: column; gap: 2px; width: auto !important; height: 46px; padding: 0 !important; border-radius: 12px; background: transparent !important; color: #C9CED8; --ico: #C9CED8; }
  html[data-design="neu"] .h-leiste-knopf svg { width: 20px; height: 20px; }
  html[data-design="neu"] .h-leiste-knopf .h-leiste-wort { display: inline !important; font-size: 11px; font-weight: 700; }
  html[data-design="neu"] .h-leiste-knopf.aktiv { color: #FDB913; --ico: #FDB913; }
  html[data-design="neu"] .h-leiste-knopf.aktiv svg { background: rgba(253, 185, 19, .28); border-radius: 999px; padding: 2px 9px; box-sizing: content-box; }
  html[data-design="neu"] .h-leiste-scan { margin-top: 0; width: auto; height: 46px; border-radius: 12px; box-shadow: none; background: transparent !important; color: #FDB913; --ico: #111827; }
  html[data-design="neu"] .h-leiste-scan svg { width: 18px; height: 18px; padding: 4px 11px; border-radius: 999px; background: linear-gradient(140deg, #FDD34D, #F5A700); box-sizing: content-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 14px rgba(253, 185, 19, .55); animation: dn-scanleuchten 2.4s ease-in-out infinite; }
  @keyframes dn-scanleuchten { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 8px rgba(253, 185, 19, .35); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 18px rgba(253, 185, 19, .8); } }
  html[data-design="neu"] .h-leiste-scan .h-leiste-wort { color: #FDB913; }
  html[data-design="neu"] #scanFab.scan-fab { display: none !important; }   /* „Scannen" sitzt in der Leiste */

  /* Startseite: Schnellknöpfe als getönte Kacheln */
  html[data-design="neu"] .hs-kacheln { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 6px; }
  html[data-design="neu"] .hs-kachel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #111827; }
  html[data-design="neu"] .hs-kachel-sym { width: 54px !important; height: 54px !important; border-radius: 18px !important; display: flex; align-items: center; justify-content: center; background: #FFF4D1 !important; border: 1px solid #F6DE94; color: #B07800; --ico: #B07800; box-shadow: 0 10px 18px -14px #B07800, inset 0 1px 0 #FFFFFF; }
  html[data-design="neu"] .hs-kachel:nth-child(5n+2) .hs-kachel-sym { background: #E3F5EC !important; border-color: #BDE6CF; color: #047857; --ico: #047857; box-shadow: 0 10px 18px -14px #047857, inset 0 1px 0 #FFFFFF; }
  html[data-design="neu"] .hs-kachel:nth-child(5n+3) .hs-kachel-sym { background: #E8EFFE !important; border-color: #C9D8FB; color: #1D4ED8; --ico: #1D4ED8; box-shadow: 0 10px 18px -14px #1D4ED8, inset 0 1px 0 #FFFFFF; }
  html[data-design="neu"] .hs-kachel:nth-child(5n+4) .hs-kachel-sym { background: #F0EAFE !important; border-color: #DCCDFB; color: #6D28D9; --ico: #6D28D9; box-shadow: 0 10px 18px -14px #6D28D9, inset 0 1px 0 #FFFFFF; }
  html[data-design="neu"] .hs-kachel:nth-child(5n+5) .hs-kachel-sym { background: #FEECEC !important; border-color: #FBD5D5; color: #B91C1C; --ico: #B91C1C; box-shadow: 0 10px 18px -14px #B91C1C, inset 0 1px 0 #FFFFFF; }
  html[data-design="neu"] .hs-kachel-wort { font-size: 11px; font-weight: 700; color: #111827; }
  /* Rechnungen fehlen: rote Karte */
  html[data-design="neu"] .portal-erinnerung { background: linear-gradient(120deg, #DC2626, #F05252) !important; border: 0 !important; color: #FFFFFF !important; border-radius: 16px; box-shadow: 0 12px 22px -14px #DC2626 !important; padding: 12px 14px; }
  html[data-design="neu"] .portal-erinnerung > b { color: #FFFFFF !important; }
  html[data-design="neu"] .portal-erinnerung > .ico { background: rgba(255, 255, 255, .22) !important; }
  html[data-design="neu"] .portal-erinnerung-liste .btn.secondary { background: rgba(255, 255, 255, .18) !important; border-color: rgba(255, 255, 255, .3) !important; color: #FFFFFF !important; }
  html[data-design="neu"] .portal-erinnerung .hs-mehr { background: rgba(255, 255, 255, .22) !important; color: #FFFFFF !important; }
  /* kompakt wie in der Vorlage: Symbol · Überschrift mit Portalen darunter · Pfeil */
  html[data-design="neu"] .portal-erinnerung { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px; }
  html[data-design="neu"] .portal-erinnerung > .ico { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 10px; animation: dn-hupf 3.2s ease-in-out infinite; }
  html[data-design="neu"] .portal-erinnerung > b { grid-column: 2; font-size: 14px; font-weight: 800; }
  html[data-design="neu"] .portal-erinnerung-liste { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
  html[data-design="neu"] .portal-erinnerung-liste .btn.secondary { min-height: 0 !important; padding: 2px 8px !important; font-size: 11px !important; font-weight: 600; border-radius: 8px !important; }
  html[data-design="neu"] .portal-erinnerung .hs-mehr { grid-column: 3; grid-row: 1 / span 2; padding: 6px 10px; }
  /* Karten und Listen */
  html[data-design="neu"] .hs-karte,
  html[data-design="neu"] .hs-aufgaben { background: #FFFFFF; border: 1px solid #ECEAE4; border-radius: 16px; box-shadow: 0 6px 18px -14px rgba(17, 24, 39, .35); }
  html[data-design="neu"] .hs-karte-kopf h2 { display: flex; align-items: center; gap: 7px; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 12px !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #111827; }
  html[data-design="neu"] .hs-karte-kopf h2::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: #FDB913; }
  html[data-design="neu"] .hs-mehr { border: 0; background: #FFF4D1; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #92400E; }
  html[data-design="neu"] .hs-termin-strich { background: #FDB913 !important; width: 4px; border-radius: 2px; }
  html[data-design="neu"] .hs-termin-titel { font-weight: 800; }
  /* Kennzahlen: getönte Kacheln mit farbiger Kante */
  html[data-design="neu"] .hs-zahl { position: relative; overflow: hidden; border-radius: 18px !important; border: 1px solid #C9D8FB !important; background: #E8EFFE !important; box-shadow: 0 12px 22px -18px #1D4ED8; padding-left: 16px !important; }
  html[data-design="neu"] .hs-zahl::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: #1D4ED8; }
  html[data-design="neu"] .hs-zahl .hs-zahl-wert { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 18px !important; font-weight: 800; color: #1D4ED8; }
  html[data-design="neu"] .hs-zahl:first-child { border-color: #BDE6CF !important; background: #E3F5EC !important; box-shadow: 0 12px 22px -18px #047857; }
  html[data-design="neu"] .hs-zahl:first-child::before { background: #047857; }
  html[data-design="neu"] .hs-zahl:first-child .hs-zahl-wert { color: #047857; }
  html[data-design="neu"] .hs-zahl-titel { font-size: 11px; font-weight: 800; color: #111827; }
  html[data-design="neu"] .hs-aufgabe input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #D6CDB6; background: #FFFFFF; display: inline-grid; place-content: center; }
  html[data-design="neu"] .hs-aufgabe input[type="checkbox"]:checked { background: #FDB913; border-color: #FDB913; }
  html[data-design="neu"] .hs-aufgabe input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border-left: 2.5px solid #111827; border-bottom: 2.5px solid #111827; transform: rotate(-45deg) translate(1px, -1px); }
  /* Seitentitel am Handy etwas kleiner */
  html[data-design="neu"] main.content h2.buch-titel,
  html[data-design="neu"] main.content .dn-seitenkopf h1 { font-size: 24px; }
}

/* =====================================================================
   HANDY-STARTSEITE 1:1 (Maße aus der Handy-Vorlage)
   ===================================================================== */
html[data-design="neu"] .dn-h-start { display: flex; flex-direction: column; gap: 18px; padding: 2px 2px 8px; }
html[data-design="neu"] .dn-h-schnell { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
html[data-design="neu"] .dn-h-schnellknopf { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #111827; font: inherit; cursor: pointer; }
html[data-design="neu"] .dn-h-schnellknopf > span { width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(160deg, #FFFFFF 0%, var(--qt) 100%); border: 1px solid var(--ql); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 18px -14px var(--qi), inset 0 1px 0 #FFFFFF; transition: transform .2s; }
html[data-design="neu"] .dn-h-schnellknopf:active > span { transform: scale(.94); }
html[data-design="neu"] .dn-h-schnellknopf b { font-size: 11px; font-weight: 700; }
html[data-design="neu"] .dn-h-fehlt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 0; background: linear-gradient(120deg, #DC2626, #F05252); text-align: left; color: #FFFFFF; box-shadow: 0 12px 22px -14px #DC2626; font: inherit; cursor: pointer; }
html[data-design="neu"] .dn-h-fehlt-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; background: rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center; animation: dn-hupf 3.2s ease-in-out infinite; }
html[data-design="neu"] .dn-h-fehlt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html[data-design="neu"] .dn-h-fehlt-text b { font-size: 14px; font-weight: 800; }
html[data-design="neu"] .dn-h-fehlt-text small { font-size: 11px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-h-pfeil { font-size: 18px; }
html[data-design="neu"] .dn-h-start .dn-zuerst { margin: 0; }
html[data-design="neu"] .dn-h-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-design="neu"] .dn-h-kpi { position: relative; overflow: hidden; display: flex; align-items: center; gap: 6px; padding: 12px 10px 12px 14px; border-radius: 18px; border: 1px solid var(--kl); background: linear-gradient(135deg, #FFFFFF 0%, var(--kt) 100%); text-align: left; color: #111827; box-shadow: 0 12px 22px -18px var(--ki); font: inherit; cursor: pointer; }
html[data-design="neu"] .dn-h-kpi::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ki); }
html[data-design="neu"] .dn-h-kpi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html[data-design="neu"] .dn-h-kpi-text b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ki); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-design="neu"] .dn-h-kpi-text strong { font-size: 11px; font-weight: 800; white-space: nowrap; }
html[data-design="neu"] .dn-h-kpi-text small { font-size: 10px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-design="neu"] .dn-h-kpi-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--ki); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 14px -8px var(--ki), inset 0 1px 0 rgba(255, 255, 255, .25); }
html[data-design="neu"] .dn-h-kopf { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; margin-bottom: -6px; }
html[data-design="neu"] .dn-h-kopf > span { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #111827; }
html[data-design="neu"] .dn-h-kopf i { width: 4px; height: 14px; border-radius: 2px; background: #FDB913; }
html[data-design="neu"] .dn-h-kopfknopf { border: 0; background: #FFF4D1; padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 800; color: #92400E; cursor: pointer; }
html[data-design="neu"] .dn-h-liste { background: #FFFFFF; border: 1px solid #ECEAE4; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px -14px rgba(17, 24, 39, .35); }
html[data-design="neu"] .dn-h-leer { margin: 0; padding: 14px; font-size: 13px; color: #6B7280; }
html[data-design="neu"] .dn-h-zeile { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; background: transparent; text-align: left; color: #111827; font: inherit; cursor: pointer; }
html[data-design="neu"] .dn-h-zeile + .dn-h-zeile { border-top: 1px solid #F3F2EE; }
html[data-design="neu"] .dn-h-datum { width: 42px; height: 42px; flex: none; border-radius: 12px; color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
html[data-design="neu"] .dn-h-datum small { font-size: 9px; font-weight: 800; opacity: .9; }
html[data-design="neu"] .dn-h-datum b { font-size: 16px; font-weight: 800; }
html[data-design="neu"] .dn-h-zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html[data-design="neu"] .dn-h-zeile-text > b { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-h-zeile-text small { font-size: 12px; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-h-pille { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; color: #374151; white-space: nowrap; }
html[data-design="neu"] .dn-h-ini { width: 40px; height: 40px; flex: none; border-radius: 999px; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
html[data-design="neu"] .dn-h-zeile-oben { display: flex; justify-content: space-between; gap: 8px; }
html[data-design="neu"] .dn-h-zeile-oben b { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-h-zeile-oben em { font-style: normal; font-size: 11px; font-weight: 700; color: #8A8F98; white-space: nowrap; }
html[data-design="neu"] .dn-h-zeile-mitte { display: flex; align-items: center; gap: 8px; min-width: 0; }
html[data-design="neu"] .dn-h-phase { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
html[data-design="neu"] .dn-h-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
html[data-design="neu"] .dn-h-schritte i { height: 5px; border-radius: 999px; transform-origin: left; animation: dn-breiter .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dn-breiter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html[data-design="neu"] .dn-h-akt { background: #FFFFFF; border: 1px solid #ECEAE4; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px -14px rgba(17, 24, 39, .35); padding: 6px 14px; }
html[data-design="neu"] .dn-h-akt-zeile { position: relative; display: flex; gap: 12px; padding: 9px 0; }
html[data-design="neu"] .dn-h-akt-ic { position: relative; width: 30px; flex: none; display: flex; justify-content: center; }
html[data-design="neu"] .dn-h-akt-ic i { position: absolute; top: 30px; bottom: -12px; width: 2px; background: #ECEAE4; }
html[data-design="neu"] .dn-h-akt-ic span { position: relative; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
html[data-design="neu"] .dn-h-finanzen { border-radius: 18px; background: linear-gradient(140deg, #1F2A44, #111827); color: #FFFFFF; box-shadow: 0 16px 28px -18px #111827; }
html[data-design="neu"] .dn-h-fin-oben,
html[data-design="neu"] .dn-h-fin-unten { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; border: 0; background: transparent; text-align: left; color: #FFFFFF; font: inherit; cursor: pointer; }
html[data-design="neu"] .dn-h-fin-oben .dn-h-zeile-oben { align-items: baseline; }
html[data-design="neu"] .dn-h-fin-oben small { font-size: 12px; font-weight: 700; color: #C9CED8; }
html[data-design="neu"] .dn-h-fin-oben .dn-h-zeile-oben b { font-size: 20px; font-weight: 800; color: #FDB913; }
html[data-design="neu"] .dn-h-fin-balken { width: 100%; display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; transform-origin: left; animation: dn-breiter 1s cubic-bezier(.2, .8, .2, 1) both; }
html[data-design="neu"] .dn-h-fin-balken i { display: block; }
html[data-design="neu"] .dn-h-fin-legende { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: #C9CED8; }
html[data-design="neu"] .dn-h-fin-unten { flex-direction: row; align-items: flex-end; gap: 12px; padding: 14px 16px 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
html[data-design="neu"] .dn-h-fin-umsatz { flex: 1; display: flex; flex-direction: column; gap: 2px; }
html[data-design="neu"] .dn-h-fin-umsatz small { font-size: 12px; font-weight: 700; color: #C9CED8; }
html[data-design="neu"] .dn-h-fin-umsatz b { font-size: 20px; font-weight: 800; }
html[data-design="neu"] .dn-h-fin-umsatz em { font-style: normal; font-size: 11px; color: #9CA3AF; }
html[data-design="neu"] .dn-h-mini { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
html[data-design="neu"] .dn-h-mini i { width: 7px; border-radius: 3px; transform-origin: bottom; animation: dn-wachsen .9s cubic-bezier(.2, .8, .2, 1) both; }
/* Untere Leiste in der Reihenfolge der Vorlage */
html[data-design="neu"] .h-leiste-knopf[data-ziel="home"] { order: 1; }
html[data-design="neu"] .h-leiste-knopf[data-ziel="tasks"] { order: 2; }
html[data-design="neu"] .h-leiste-knopf[data-ziel="scan"] { order: 3; }
html[data-design="neu"] .h-leiste-knopf[data-ziel="karten"] { order: 4; }   /* 17.10.2026: Kundenkarten neben Scannen */
html[data-design="neu"] .h-leiste-knopf[data-ziel="kalender"] { order: 5; }
html[data-design="neu"] .h-leiste-knopf[data-ziel="menue"] { order: 6; }

/* Anmeldeseite im neuen Design (gilt, sobald auf diesem Gerät einmal „Neu" gewählt wurde) */
html[data-design="neu"] .login-wrap { background: #F6F6F3; position: relative; overflow: hidden; }
html[data-design="neu"] .login-wrap::before { content: ""; position: absolute; width: 420px; height: 420px; top: -160px; right: -120px; border-radius: 999px; background: rgba(253, 185, 19, .35); filter: blur(60px); pointer-events: none; }
html[data-design="neu"] .login-card { position: relative; border-radius: 24px; border: 1px solid #E7E5E0; box-shadow: 0 40px 80px -40px rgba(17, 24, 39, .45); overflow: hidden; }
html[data-design="neu"] .login-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background-image: repeating-linear-gradient(-45deg, #111827 0 10px, #FDB913 10px 20px); background-size: 28.28px 100%; animation: dn-streifen 1.2s linear infinite; }
html[data-design="neu"] .login-card h1 { color: #111827; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
html[data-design="neu"] .login-card p.sub { color: #4B5563; }
html[data-design="neu"] .login-logo { border-radius: 22px; box-shadow: 0 10px 24px -12px rgba(253, 185, 19, .9); }
html[data-design="neu"] .login-target { border-radius: 14px; border: 1px solid #E7E5E0; }
html[data-design="neu"] .login-target.sel { border: 2px solid #FDB913; background: #FFF8E6; }
html[data-design="neu"] .login-card .btn { min-height: 48px; border-radius: 12px; font-size: 15px; }
html[data-design="neu"] .login-card input { border-radius: 12px !important; min-height: 44px; }

/* Postfach: Abstand gehört an die Wisch-Hülle, nicht an die Zeile — sonst scheint der farbige
   Hintergrund der Wischgeste unter jeder Karte als Streifen durch. */
html[data-design="neu"] .mail-swipe { margin: 0 0 8px; border-radius: 14px; }
html[data-design="neu"] .mail-swipe .mail-row2 { margin: 0; }

/* Handy insgesamt kleiner (Wunsch 16.10.2026: „auf dem Handy soll alles kleiner werden").
   Der Seiteninhalt wird gleichmäßig auf 88 % gesetzt — so bleibt alles im Verhältnis.
   Kopf- und Fußleiste werden einzeln verkleinert (sie liegen außerhalb des Inhalts). */
@media (max-width: 720px) {
  html[data-design="neu"] main.content { zoom: .88; }
  /* 20.10.2026: nicht beim Kalkulator — sein Rahmen bekommt die Höhe in echten Pixeln (bis zur Handy-Leiste); mit 88 % blieb
     unten ein Streifen von ~90 px leer, und der Kalkulator hat ohnehin seine eigene Handy-Darstellung. */
  html[data-design="neu"] body.view-kalkulator main.content { zoom: 1; }
  /* 16.10.2026, gemeldet: Der Kopf überdeckt oben die Schnellknöpfe. Ursache: styles.css setzt am Handy (≤700 px)
     `top: 6px` für den klebenden Kopf der klassischen Ansicht — hier steht er aber im Fluss (relative), also wurde er
     nur SICHTBAR 6 px tiefer gezeichnet, der Inhalt rückte nicht mit. Mit größerer Systemschrift am Handy wird der Kopf
     höher und überdeckt dann sichtbar. Jetzt: kein Versatz, derselbe Abstand als echter Rand, und unter dem Kopf auf
     allen Seiten dieselbe Luft. */
  html[data-design="neu"] header.topbar { top: 0 !important; min-height: 50px !important; margin: 14px 10px 0 !important; border-radius: 18px !important; }
  html[data-design="neu"] main.content { padding-top: 12px !important; }
  html[data-design="neu"] header.topbar .brand-logo { height: 26px; }
  html[data-design="neu"] .h-gruss-name { font-size: 12.5px !important; }
  html[data-design="neu"] .h-gruss-datum,
  html[data-design="neu"] .h-gruss-spruch { font-size: 9.5px !important; }
  html[data-design="neu"] header.topbar .h-kopf-knopf { width: 28px; height: 28px; }
  html[data-design="neu"] header.topbar .h-kopf-knopf svg { width: 14px; height: 14px; }
  html[data-design="neu"] .h-leiste { height: 52px !important; bottom: 12px !important; border-radius: 18px !important; }
  html[data-design="neu"] .h-leiste-knopf { height: 42px !important; }
  html[data-design="neu"] .h-leiste-knopf svg { width: 18px !important; height: 18px !important; }
  html[data-design="neu"] .h-leiste-knopf .h-leiste-wort { font-size: 10px !important; }
  html[data-design="neu"] .h-leiste-scan svg { width: 16px !important; height: 16px !important; padding: 3px 10px !important; }
}

/* Kalender am Handy (Wunsch 16.10.2026: „Kalender größer und Knöpfe oben kleiner"):
   hier KEINE Verkleinerung des Inhalts, dafür flachere Knöpfe und deutlich höhere Tage. */
@media (max-width: 720px) {
  html[data-design="neu"] body.view-kalender main.content { zoom: 1; padding-left: 6px !important; padding-right: 6px !important; }
  html[data-design="neu"] body.view-kalender .rech-titelzeile { margin-bottom: 8px; gap: 6px; }
  html[data-design="neu"] body.view-kalender .rech-toolbar-actions { gap: 6px; }
  html[data-design="neu"] body.view-kalender .rech-toolbar-actions .btn { min-height: 34px !important; height: 34px; padding: 0 12px !important; font-size: 13px !important; border-radius: 10px !important; box-shadow: none; }
  html[data-design="neu"] body.view-kalender .cal-kopf { gap: 6px; margin-bottom: 8px; }
  html[data-design="neu"] body.view-kalender .cal-nav { gap: 4px; }
  html[data-design="neu"] body.view-kalender .cal-pfeil { width: 32px !important; height: 32px !important; min-width: 32px; border-radius: 9px; font-size: 14px; padding: 0; }
  html[data-design="neu"] body.view-kalender select.cal-jump {
    height: 32px; padding: 0 18px 0 8px !important; font-size: 13px !important; border-radius: 9px !important; width: auto !important; min-width: 0;
    /* schmaler eigener Pfeil statt des breiten eingebauten — sonst wird „2026" abgeschnitten */
    -webkit-appearance: none; appearance: none;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center !important;
  }
  html[data-design="neu"] body.view-kalender .cal-nav select.cal-jump:first-of-type { width: 102px !important; max-width: none; }
  html[data-design="neu"] body.view-kalender .cal-nav select.cal-jump:last-of-type { width: 72px !important; max-width: none; }
  html[data-design="neu"] body.view-kalender .cal-heute { padding: 0 8px !important; }
  html[data-design="neu"] body.view-kalender .cal-fieldwrap .btn { padding: 0 8px !important; }
  html[data-design="neu"] body.view-kalender .cal-kopf { flex-wrap: nowrap !important; justify-content: space-between; }
  html[data-design="neu"] body.view-kalender .cal-nav { flex-wrap: nowrap !important; min-width: 0; }
  html[data-design="neu"] body.view-kalender .cal-nav > div { display: flex; gap: 4px; }
  html[data-design="neu"] body.view-kalender .cal-heute,
  html[data-design="neu"] body.view-kalender .cal-fieldwrap .btn { min-height: 32px !important; height: 32px; padding: 0 10px !important; font-size: 12.5px !important; border-radius: 9px !important; }
  html[data-design="neu"] body.view-kalender .cal-kacheln { padding: 8px 4px; border-radius: 16px; }
  html[data-design="neu"] body.view-kalender .kgrid-row { gap: 3px; }
  html[data-design="neu"] body.view-kalender .kday { height: auto !important; min-height: 74px !important; border-radius: 10px; padding: 5px 4px; }
  html[data-design="neu"] body.view-kalender .kwd { font-size: 10.5px; padding-bottom: 4px; }
}

/* Postfach am Handy kompakt (Wunsch 16.10.2026: „das soll kleiner sein") */
@media (max-width: 720px) {
  html[data-design="neu"] .mail-swipe { margin: 0 0 6px; border-radius: 12px; }
  html[data-design="neu"] .mail-row2 { padding: 8px 10px !important; gap: 9px !important; border-radius: 12px !important; border-left-width: 4px !important; min-height: 0 !important; }
  html[data-design="neu"] .mail-ava { width: 32px !important; height: 32px !important; min-width: 32px; font-size: 13px !important; }
  html[data-design="neu"] .mail-row2-top { gap: 6px !important; }
  html[data-design="neu"] .mail-row2-from { font-size: 13.5px !important; }
  html[data-design="neu"] .mail-row2-date { font-size: 11px !important; }
  html[data-design="neu"] .mail-acc-tag { font-size: 10px !important; padding: 1px 6px !important; }
  html[data-design="neu"] .mail-row2-adr { font-size: 11px !important; line-height: 1.3; }
  html[data-design="neu"] .mail-row2-sub,
  html[data-design="neu"] .mail-row2-subtext { font-size: 12.5px !important; line-height: 1.35; }
  html[data-design="neu"] .mail-star { font-size: 15px !important; width: 24px; }
  html[data-design="neu"] .mail-daygroup { font-size: 11px !important; padding: 8px 4px 6px !important; letter-spacing: .06em; }
  html[data-design="neu"] .mail-cats { gap: 6px !important; padding: 6px 0 !important; }
  html[data-design="neu"] .mail-cat { min-height: 30px !important; padding: 0 10px !important; font-size: 12px !important; }
  html[data-design="neu"] .mail-cat-badge { font-size: 10px !important; padding: 0 5px !important; }
  html[data-design="neu"] .mail-toolbar { gap: 6px !important; padding: 4px 0 !important; flex-wrap: nowrap !important; }
  html[data-design="neu"] .mail-toollimit { flex: 0 1 auto; min-width: 0; }
  html[data-design="neu"] .mail-toollimit select { max-width: 104px; padding-right: 22px !important; }
  html[data-design="neu"] .mail-toolicons { gap: 4px !important; flex: none; }
  html[data-design="neu"] .mail-toolicons .mail-icobtn { width: 30px; min-width: 30px !important; height: 30px; min-height: 30px !important; padding: 0 !important; }
  html[data-design="neu"] .mail-icobtn,
  html[data-design="neu"] .mail-toolbar .btn { min-height: 34px !important; height: 34px; min-width: 34px; padding: 0 8px !important; border-radius: 10px !important; }
  html[data-design="neu"] .mail-toolbar select { height: 34px; font-size: 13px !important; border-radius: 10px !important; }
  html[data-design="neu"] .mailsort-panel { border-radius: 12px !important; }
  html[data-design="neu"] .mailsort-head { padding: 7px 10px !important; font-size: 13px !important; min-height: 0 !important; }
  html[data-design="neu"] .mailsort-head .btn { min-height: 30px !important; padding: 0 10px !important; font-size: 12px !important; }
}

/* KI-Scanner am Handy: Wahlknöpfe als große Zeilen über die volle Breite (Handy-Vorlage „Beleg scannen") */
@media (max-width: 720px) {
  /* Rechnungen am Handy: Reiter in EINER wischbaren Zeile, Kennzahlen 2 × 2 */
  html[data-design="neu"] .acc-reiter { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  html[data-design="neu"] .acc-reiter::-webkit-scrollbar { display: none; }
  html[data-design="neu"] .acc-reiter-knopf { flex: none; white-space: nowrap; }
  html[data-design="neu"] .bilanz-kacheln { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; gap: 10px; }
  html[data-design="neu"] .bilanz-kachel { min-width: 0 !important; width: auto !important; padding: 12px; }
  html[data-design="neu"] .bilanz-kachel b { font-size: 18px; }
  html[data-design="neu"] .rech-status-leiste { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  html[data-design="neu"] .rech-status-leiste::-webkit-scrollbar { display: none; }
  html[data-design="neu"] .rech-status { flex: none; }
  html[data-design="neu"] .scan-knopfreihe { grid-template-columns: 1fr !important; gap: 8px; }
  html[data-design="neu"] .scan-knopfreihe .btn { justify-content: flex-start; min-height: 56px; padding: 0 16px; border-radius: 14px; font-size: 14px; white-space: normal; text-align: left; }
  html[data-design="neu"] .scan-knopfreihe .btn:not(.secondary) { background: linear-gradient(135deg, #FDD34D, #F5A700); }
  html[data-design="neu"] .scan-knopfreihe .btn.secondary { border: 1px solid #E7E5E0; background: #FFFFFF; }
}

/* Belege: Titel + „Beleg scannen" in einer Zeile */
html[data-design="neu"] .dn-belege-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
html[data-design="neu"] .dn-belege-kopf .dn-btn-gelb { min-height: 44px; }

/* Kalender-Kopf */
html[data-design="neu"] main.content h2.buch-titel:has(.dn-kal-jahr) { display: block; }
html[data-design="neu"] .dn-kal-jahr { color: #F5B301; display: inline; }

/* Wetter-Karte (Übersicht) */
html[data-design="neu"] .dn-wetter { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E7E5E0; cursor: default; }
html[data-design="neu"] .dn-sonne svg { animation: dn-dreh 18s linear infinite; display: block; }
html[data-design="neu"] .dn-wetter-text { display: flex; flex-direction: column; gap: 2px; }
html[data-design="neu"] .dn-wetter-text small { font-size: 12px; color: #4B5563; }
html[data-design="neu"] .dn-wetter-temp { font-size: 28px; font-weight: 800; }

/* Handy-Kunden: Status-Knöpfe (Vorlage) */
html[data-design="neu"] .dn-kchips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 4px 0 6px; scrollbar-width: none; }
html[data-design="neu"] .dn-kchips::-webkit-scrollbar { display: none; }
html[data-design="neu"] .dn-kchip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #E7E5E0; background: #FFFFFF; color: #111827; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
html[data-design="neu"] .dn-kchip i { width: 8px; height: 8px; border-radius: 999px; }
html[data-design="neu"] .dn-kchip span { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #F3F4F6; color: #4B5563; }
html[data-design="neu"] .dn-kchip.aktiv { background: #111827; border-color: #111827; color: #FFFFFF; box-shadow: 0 8px 18px -10px rgba(17, 24, 39, .6); }
html[data-design="neu"] .dn-kchip.aktiv span { background: #FDB913; color: #111827; }
/* 19.10.2026 Kundenakte am Handy: Belegtitel („Angebot AN-… — Fliesenarbeiten") liefen über den Rand und schoben Datum,
   Betrag und „Öffnen" aus dem Bild — die Tabelle erbte nowrap (am Tablet mit Rollbalken). Titel jetzt umbrechen, Zahlen bleiben einzeilig. */
@media (max-width: 1100px) {
  html[data-design="neu"] .kunde-fach table { white-space: normal; }
  html[data-design="neu"] .kunde-fach table td:not(:first-child) { white-space: nowrap; }
  html[data-design="neu"] .kunde-fach table td:first-child .link { display: inline-flex !important; align-items: flex-start !important; max-width: 100%; line-height: 1.35; white-space: normal; }
  html[data-design="neu"] .kunde-fach table td:first-child .link > span { white-space: normal; }
  html[data-design="neu"] .kunde-fach table td:first-child .link .ico { margin-top: 2px; }
}
html[data-design="neu"] .hl-zeile { border-radius: 14px; }
html[data-design="neu"] .hl-marke { border-radius: 999px !important; background: #FFEFC2 !important; color: #111827 !important; font-weight: 800; }
html[data-design="neu"] .hl-chip { border-radius: 999px; font-weight: 800; }

/* Handy „Mehr": Bereiche als Kacheln (Vorlage), darunter die vollständige Liste */
html[data-design="neu"] .dn-mehr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
html[data-design="neu"] .dn-mehr-karte { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; min-height: 96px; border-radius: 16px; border: 1px solid #ECEAE4; background: linear-gradient(160deg, #FFFFFF 55%, var(--mt)); text-align: left; color: #111827; font: inherit; cursor: pointer; transition: transform .2s; }
html[data-design="neu"] .dn-mehr-karte:active { transform: scale(.97); }
html[data-design="neu"] .dn-mehr-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--mi); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 16px -10px var(--mi); }
html[data-design="neu"] .dn-mehr-text { display: flex; flex-direction: column; gap: 2px; }
html[data-design="neu"] .dn-mehr-text b { font-size: 15px; font-weight: 800; }
html[data-design="neu"] .dn-mehr-text small { font-size: 12px; color: #6B7280; }
html[data-design="neu"] .dn-mehr-zahl { position: absolute; top: 12px; right: 12px; height: 20px; padding: 0 7px; border-radius: 999px; background: #DC2626; color: #FFFFFF; font-size: 10px; font-weight: 800; display: flex; align-items: center; animation: dn-hupf 3.2s ease-in-out infinite; }
html[data-design="neu"] .hm-titel { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #111827; }
html[data-design="neu"] .hm-titel::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: #FDB913; }
html[data-design="neu"] .hm-liste { background: #FFFFFF; border: 1px solid #ECEAE4; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px -14px rgba(17, 24, 39, .35); }
html[data-design="neu"] .hm-zeile { font-weight: 700; }
html[data-design="neu"] .hm-sym { border-radius: 10px; background: #FFF4D1 !important; color: #B07800 !important; --ico: #B07800 !important; }
/* 16.10.2026, Wunsch: „die unteren Seiten wie oben, in 4er-Reihe — damit es übersichtlich ist".
   Jeder Menüpunkt wird eine Kachel im Stil der Karten darüber: farbiges Symbol, Name darunter, Zahl als Blase.
   Nur die Bereiche — der Abschnitt KONTO (Sprache, Abmelden) bleibt eine Liste. Farben wechseln reihum. */
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; background: none; border: 0; box-shadow: none; overflow: visible; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-zeile { position: relative; flex-direction: column; justify-content: flex-start; align-items: center; gap: 7px; height: auto; min-height: 88px; padding: 12px 3px 10px; border: 1px solid #ECEAE4 !important; border-radius: 16px; background: linear-gradient(165deg, #FFFFFF 52%, var(--hm-tint, #FFF4D1)); box-shadow: 0 6px 16px -14px rgba(17, 24, 39, .4); text-align: center; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-zeile + .hm-zeile { border-top: 1px solid #ECEAE4; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-sym { width: 40px; height: 40px; border-radius: 12px; background: var(--hm-farbe, #B07800) !important; color: #FFFFFF !important; --ico: #FFFFFF !important; box-shadow: 0 6px 14px -8px var(--hm-farbe, #B07800); }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-name { flex: 0 0 auto; width: 100%; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; color: #111827; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-pfeil { display: none; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-zahl:not(:empty) { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #DC2626; color: #FFFFFF; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-zeile:nth-child(8n+1) { --hm-farbe: #3B82F6; --hm-tint: #E8EFFE; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-zeile:nth-child(8n+2) { --hm-farbe: #F97316; --hm-tint: #FFF0E6; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-zeile:nth-child(8n+3) { --hm-farbe: #10B981; --hm-tint: #E3F5EC; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-zeile:nth-child(8n+4) { --hm-farbe: #8B5CF6; --hm-tint: #F0EAFE; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-zeile:nth-child(8n+5) { --hm-farbe: #14B8A6; --hm-tint: #E3F6F4; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-zeile:nth-child(8n+6) { --hm-farbe: #C2410C; --hm-tint: #FFF0E6; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-zeile:nth-child(8n+7) { --hm-farbe: #B07800; --hm-tint: #FFF4D1; }
html[data-design="neu"] .hm-abschnitt:not(.hm-konto) .hm-zeile:nth-child(8n+8) { --hm-farbe: #DC2626; --hm-tint: #FEECEC; }

/* Aufgaben: Fortschritt + Schnelleingabe */
html[data-design="neu"] .dn-aufg-kopf { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
html[data-design="neu"] .dn-aufg-fortschritt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; background: linear-gradient(140deg, #3B82F6, #1D4ED8); color: #FFFFFF; box-shadow: 0 14px 24px -16px #1D4ED8; }
html[data-design="neu"] .dn-aufg-kreis { position: absolute; right: -20px; top: -30px; width: 100px; height: 100px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
html[data-design="neu"] .dn-aufg-mitte { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; }
html[data-design="neu"] .dn-aufg-mitte small { font-size: 11px; font-weight: 800; letter-spacing: .08em; opacity: .85; }
html[data-design="neu"] .dn-aufg-mitte b { font-size: 18px; font-weight: 800; }
html[data-design="neu"] .dn-aufg-spur { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; display: block; }
html[data-design="neu"] .dn-aufg-spur i { display: block; height: 100%; border-radius: 999px; background: #FDB913; animation: dn-fuellen 1.4s cubic-bezier(.2, .8, .2, 1) .3s both; }
html[data-design="neu"] .dn-aufg-ueber { position: relative; padding: 6px 10px; border-radius: 999px; background: #DC2626; color: #FFFFFF; font-size: 11px; font-weight: 800; animation: dn-hupf 3.2s ease-in-out infinite; white-space: nowrap; }
html[data-design="neu"] .dn-aufg-eingabe { display: flex; gap: 10px; padding: 8px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E7E5E0; }
html[data-design="neu"] main.content .dn-aufg-feld { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; font-size: 15px; padding: 0 10px; min-height: 42px; }
html[data-design="neu"] .dn-aufg-eingabe .dn-btn-gelb { min-height: 42px; }
@media (max-width: 720px) { html[data-design="neu"] .dn-aufg-eingabe { display: none; } }   /* am Handy: Knopf „+ Aufgabe" wie bisher */

/* Karte „Jetzt zuerst" (Handy-Startseite) */
html[data-design="neu"] .dn-zuerst { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 16px; margin: 0 0 14px; border-radius: 18px; background: linear-gradient(135deg, #FDD34D, #F5A700); color: #111827; box-shadow: 0 16px 26px -16px #D99A00; }
html[data-design="neu"] .dn-zuerst-kreis { position: absolute; right: -26px; bottom: -40px; width: 120px; height: 120px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
html[data-design="neu"] .dn-zuerst-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html[data-design="neu"] .dn-zuerst-marke { padding: 3px 9px; border-radius: 999px; background: #111827; color: #FDB913; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
html[data-design="neu"] .dn-zuerst-wann { font-size: 11px; font-weight: 800; color: #7C2D12; }
html[data-design="neu"] .dn-zuerst-text { display: flex; flex-direction: column; gap: 2px; position: relative; }
html[data-design="neu"] .dn-zuerst-text b { font-size: 17px; font-weight: 800; line-height: 1.2; }
html[data-design="neu"] .dn-zuerst-text small { font-size: 12px; color: #5B4300; }
html[data-design="neu"] .dn-zuerst-knoepfe { position: relative; display: flex; gap: 8px; }
html[data-design="neu"] .dn-zuerst-dunkel,
html[data-design="neu"] .dn-zuerst-hell { flex: 1; min-height: 40px; border-radius: 12px; border: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; text-decoration: none; }
html[data-design="neu"] .dn-zuerst-dunkel { background: #111827; color: #FFFFFF !important; }
html[data-design="neu"] .dn-zuerst-hell { background: rgba(255, 255, 255, .55); color: #111827; }

/* ---------- 4. Menü links ---------- */
html[data-design="neu"] nav.side {
  background: #111827; color: #FFFFFF; border-right: 0; padding: 22px 16px; display: flex; flex-direction: column; gap: 6px;
  --ico: currentColor;
}
html[data-design="neu"] nav.side .nav-suche { display: none; }
html[data-design="neu"] nav.side button {
  position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px;
  margin: 0; border: 0; border-radius: 12px; background: transparent; color: #C9CED8; font-size: 14px; font-weight: 500; text-align: left; box-shadow: none;
  transition: background-color .2s, transform .2s; animation: dn-navin .55s cubic-bezier(.2, .8, .2, 1) both;
}
html[data-design="neu"] nav.side button::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 4px; border-radius: 0 3px 3px 0; background: #FDB913;
  transform: scaleY(0); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
html[data-design="neu"] nav.side button:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; transform: translateX(3px); }
html[data-design="neu"] nav.side button:hover::before { transform: scaleY(1); }
html[data-design="neu"] nav.side button:hover svg { animation: dn-kipp .5s ease-in-out; }
html[data-design="neu"] nav.side button.active:not(.nav-gruppe):not(.nav-unterpunkt) {
  background: #FDB913; color: #111827; font-weight: 800; box-shadow: 0 8px 18px -10px rgba(253, 185, 19, .9);
  animation: dn-navin .55s cubic-bezier(.2, .8, .2, 1) both, dn-leuchten 2.6s ease-in-out 1s infinite;
}
html[data-design="neu"] nav.side button.active:not(.nav-gruppe):not(.nav-unterpunkt) span,
html[data-design="neu"] #nav .nav-unterpunkt.active span { color: #111827 !important; }
html[data-design="neu"] nav.side button.active:not(.nav-gruppe):not(.nav-unterpunkt)::before { display: none; }
html[data-design="neu"] nav.side button.active:not(.nav-gruppe):not(.nav-unterpunkt)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: dn-wisch 3.8s ease-in-out 1.2s infinite; pointer-events: none;
}
html[data-design="neu"] nav.side .nav-chip { background: transparent !important; color: inherit !important; --ico: currentColor !important; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
html[data-design="neu"] nav.side .nav-chip svg { width: 18px; height: 18px; stroke-width: 1.9; }
html[data-design="neu"] nav.side button.nav-gruppe.active { background: rgba(255, 255, 255, .06); color: #FFFFFF; box-shadow: inset 4px 0 0 #FDB913; font-weight: 700; }
html[data-design="neu"] nav.side button.nav-gruppe.active::before { display: none; }
html[data-design="neu"] .nav-unter { border-left: 2px solid #2A3242; margin: 2px 0 6px 21px; padding-left: 10px; }
html[data-design="neu"] #nav .nav-unterpunkt { min-height: 34px; font-size: 13px; color: #9CA3AF; padding: 0 10px; border-radius: 10px; }
html[data-design="neu"] #nav .nav-unterpunkt:hover { color: #FFFFFF; }
html[data-design="neu"] #nav .nav-unterpunkt.active { background: #FDB913; color: #111827; font-weight: 800; box-shadow: 0 8px 18px -10px rgba(253, 185, 19, .9); }
html[data-design="neu"] #nav .nav-unterpunkt.active::before { display: none; }
html[data-design="neu"] .nav-abschnitt { color: #6B7280; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 14px 12px 4px; }
html[data-design="neu"] .nav-badge { background: #FFEFC2; color: #6B4E00; font-weight: 700; border-radius: 999px; padding: 2px 8px; height: auto; animation: dn-hupf 3.2s ease-in-out infinite; }
html[data-design="neu"] nav.side button.nav-add { border: 1px dashed #2A3242; color: #9CA3AF; }

/* Firmen-Umschalter oben im Menü */
html[data-design="neu"] .dn-firma { position: relative; margin-bottom: 14px; }
html[data-design="neu"] nav.side .dn-firma-knopf {
  min-height: 62px; padding: 0 12px 0 10px; gap: 10px; border-radius: 14px; border: 1px solid #2A3242; background: #1B2232; color: #FFFFFF;
  transition: border-color .25s, box-shadow .25s, transform .2s; animation: none;
}
html[data-design="neu"] nav.side .dn-firma-knopf::before { display: none; }
html[data-design="neu"] nav.side .dn-firma-knopf:hover { border-color: #FDB913; box-shadow: 0 0 0 3px rgba(253, 185, 19, .18); background: #1B2232; transform: none; }
html[data-design="neu"] nav.side .dn-firma-knopf:hover .dn-windrad { animation-duration: 2.5s; }
html[data-design="neu"] .dn-firma-logo { width: 44px; height: 44px; flex: none; border-radius: 12px; background: #FFFFFF; box-shadow: 0 6px 16px -8px rgba(253, 185, 19, .9); display: flex; align-items: center; justify-content: center; overflow: hidden; animation: dn-logo .8s cubic-bezier(.3, 1.5, .5, 1) both; }
html[data-design="neu"] .dn-firma-logo img { width: 40px; height: 40px; border-radius: 999px; }
html[data-design="neu"] .dn-firma-logo:not(.gross) { width: 24px; height: 24px; border-radius: 6px; box-shadow: none; border: 1px solid #E7E5E0; animation: none; }
html[data-design="neu"] .dn-firma-logo:not(.gross) img { width: 22px; height: 22px; }
html[data-design="neu"] .dn-windrad { animation: dn-dreh 14s linear infinite; }
html[data-design="neu"] .dn-firma-kurz { width: 24px; height: 24px; flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #111827; }
html[data-design="neu"] .dn-firma-kurz.gross { width: 40px; height: 40px; border-radius: 10px; font-size: 14px; }
html[data-design="neu"] .dn-firma-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html[data-design="neu"] .dn-firma-text small { font-size: 11px; color: #9CA3AF; }
html[data-design="neu"] .dn-firma-text b { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-firma-liste {
  position: absolute; z-index: 5; left: 0; right: 0; top: 66px; padding: 6px; border-radius: 12px; background: #FFFFFF; border: 1px solid #E7E5E0;
  box-shadow: 0 16px 30px -12px rgba(17, 24, 39, .3); display: flex; flex-direction: column; gap: 2px; transform-origin: top; animation: dn-pop .45s cubic-bezier(.3, 1.6, .5, 1) both;
}
html[data-design="neu"] .dn-firma-liste[hidden] { display: none; }
html[data-design="neu"] nav.side .dn-firma-zeile { min-height: 40px; padding: 0 10px; gap: 10px; border-radius: 8px; background: #FFFFFF; color: #111827; font-size: 13px; font-weight: 600; animation: none; }
html[data-design="neu"] nav.side .dn-firma-zeile::before { display: none; }
html[data-design="neu"] nav.side .dn-firma-zeile:hover { background: #FFF8E6; color: #111827; transform: none; }
html[data-design="neu"] nav.side .dn-firma-zeile.aktiv { font-weight: 800; background: #FFF8E6; }

/* Leitsatz unten im Menü */
html[data-design="neu"] .dn-leitsatz { margin-top: auto; padding: 24px 8px 4px; display: flex; flex-direction: column; gap: 8px; }
html[data-design="neu"] .dn-leitsatz-ic { width: 44px; height: 44px; border-radius: 12px; background: #FFF4D1; display: flex; align-items: center; justify-content: center; animation: dn-wippen 3.2s ease-in-out infinite; }
html[data-design="neu"] .dn-leitsatz b { font-size: 17px; font-weight: 800; line-height: 1.25; color: #FFFFFF; }
html[data-design="neu"] .dn-leitsatz small { font-size: 12px; color: #9CA3AF; line-height: 1.5; }
html[data-design="neu"] .dn-leitsatz i { width: 36px; height: 3px; border-radius: 2px; background: #F5B301; }

/* ---------- 5. Allgemeine Bausteine aller Seiten ---------- */
html[data-design="neu"] main.content { padding: 4px clamp(16px, 2.6vw, 32px) 40px; }
/* „backwards" statt „both" (16.10.2026): Eine Bewegung, die nach dem Ende stehen bleibt (Füllmodus forwards/both),
   macht das Element in Chrome dauerhaft zum Bezugsrahmen für alles mit position: fixed darin — die feste
   Aktionsleiste der geöffneten E-Mail klebte dadurch am Ende der Mail statt am Bildschirmrand. Der Endzustand
   (transform: none) ist ohnehin der Normalzustand, also sieht man keinen Unterschied. */
html[data-design="neu"] main.content > * { animation: dn-hoch .5s cubic-bezier(.2, .8, .2, 1) backwards; }
html[data-design="neu"] .card { background: #FFFFFF; border: 1px solid #E7E5E0; border-radius: 20px; box-shadow: 0 1px 3px rgba(17, 24, 39, .05); }
html[data-design="neu"] .card h2,
html[data-design="neu"] .card h3,
html[data-design="neu"] main.content h1,
html[data-design="neu"] main.content h2,
html[data-design="neu"] main.content h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em; color: #111827; }
html[data-design="neu"] main.content > .card > h2:first-child,
html[data-design="neu"] main.content > h1:first-child { font-size: 28px; letter-spacing: -.02em; }
html[data-design="neu"] .btn {
  background: #FDB913; color: #111827; border: 0; border-radius: 12px; font-weight: 800; min-height: 42px; padding: 0 18px;
  box-shadow: 0 8px 18px -12px rgba(253, 185, 19, .9); transition: transform .2s, box-shadow .2s, background-color .2s;
}
html[data-design="neu"] .btn:hover { background: #F5B301; transform: translateY(-1px); }
html[data-design="neu"] .btn.small { min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
html[data-design="neu"] .btn.secondary { background: #FFFFFF; color: #111827; border: 1px solid #E7E5E0; font-weight: 700; box-shadow: none; }
html[data-design="neu"] .btn.secondary:hover { background: #FFFCF2; border-color: #FDB913; }
html[data-design="neu"] .btn.danger { background: #DC2626; color: #FFFFFF; box-shadow: none; }
html[data-design="neu"] .field label { color: #4B5563; font-weight: 600; font-size: 13px; }
html[data-design="neu"] .field input,
html[data-design="neu"] .field select,
html[data-design="neu"] .field textarea,
html[data-design="neu"] main.content input[type="text"],
html[data-design="neu"] main.content input[type="search"],
html[data-design="neu"] main.content input[type="email"],
html[data-design="neu"] main.content input[type="number"],
html[data-design="neu"] main.content input[type="date"],
html[data-design="neu"] main.content select,
html[data-design="neu"] main.content textarea,
html[data-design="neu"] .modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
html[data-design="neu"] .modal select,
html[data-design="neu"] .modal textarea { border: 1px solid #E7E5E0; border-radius: 12px; background: #FFFFFF; color: #111827; }
html[data-design="neu"] .field input:focus,
html[data-design="neu"] .field select:focus,
html[data-design="neu"] .field textarea:focus,
html[data-design="neu"] main.content input:focus,
html[data-design="neu"] main.content select:focus,
html[data-design="neu"] main.content textarea:focus,
html[data-design="neu"] .modal input:focus,
html[data-design="neu"] .modal select:focus,
html[data-design="neu"] .modal textarea:focus { outline: none; border-color: #FDB913; box-shadow: 0 0 0 3px rgba(253, 185, 19, .18); }
html[data-design="neu"] .badge { border-radius: 999px; font-weight: 800; font-size: 11px; padding: 4px 10px; }
html[data-design="neu"] table th { color: #6B7280; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
html[data-design="neu"] table td { border-color: #EFEEEA; }
html[data-design="neu"] tr:hover td { background: #FFF8E6; }
html[data-design="neu"] .modal-backdrop { background: rgba(17, 24, 39, .45); backdrop-filter: blur(4px); }
/* Keine eigene Bewegung am Fenster: Manche Fenster werden über transform mittig gesetzt — eine
   Animation mit transform würde sie aus der Mitte schieben. */
html[data-design="neu"] .modal { border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(17, 24, 39, .6); }
html[data-design="neu"] .modal::before { content: ""; display: block; height: 8px; margin: -24px -24px 18px; background-image: repeating-linear-gradient(-45deg, #111827 0 10px, #FDB913 10px 20px); background-size: 28.28px 100%; animation: dn-streifen 1.2s linear infinite; }
html[data-design="neu"] .hint { color: #4B5563; }
html[data-design="neu"] .link { color: #92400E; font-weight: 700; }

/* KI-Scanner-Knopf unten rechts: dunkle Pille „Beleg scannen" wie in der Vorlage */
html[data-design="neu"] #scanFab.scan-fab {
  width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 999px; background: #111827; color: #FFFFFF; gap: 0;   /* 17.10.2026: nur die Kamera, kein Text */
  box-shadow: 0 16px 30px -12px rgba(17, 24, 39, .6); animation: dn-klingel 1.8s ease-out infinite; display: inline-flex; align-items: center;
}
html[data-design="neu"] #scanFab.scan-fab .ico { width: 34px; height: 34px; border-radius: 999px; background: #FDB913; color: #111827; --ico: #111827; display: inline-flex; align-items: center; justify-content: center; }
html[data-design="neu"] #scanFab.scan-fab .ico svg { width: 18px; height: 18px; }
html[data-design="neu"] #scanFab.scan-fab::after { content: none; }

/* Rote Leiste „Rechnungen fehlen" (klassisch: .portal-erinnerung) */
html[data-design="neu"] .portal-erinnerung {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px;
  background: #FEF2F2; border: 1px solid #FBD5D5; border-left: 5px solid #DC2626; color: #B91C1C; box-shadow: none; margin: 0;
}
html[data-design="neu"] .portal-erinnerung > .ico { width: 30px; height: 30px; border-radius: 9px; background: #DC2626; --ico: #FFFFFF; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; animation: dn-puls-rot 1.6s ease-out infinite; }
html[data-design="neu"] .portal-erinnerung > b { font-size: 14px; font-weight: 800; color: #B91C1C; }
html[data-design="neu"] .portal-erinnerung-liste { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; }
html[data-design="neu"] .portal-erinnerung-liste .btn.secondary { min-height: 32px; padding: 6px 10px; border-radius: 8px; background: #FFFFFF; border: 1px solid #FBD5D5; font-size: 13px; font-weight: 600; color: #111827; }
html[data-design="neu"] .portal-erinnerung-liste .btn.secondary .ico { display: none; }
html[data-design="neu"] .portal-erinnerung .hs-mehr { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 0; background: #DC2626; color: #FFFFFF; font-size: 13px; font-weight: 800; }

/* ---------- 6. Übersicht (dn-home) ---------- */
html[data-design="neu"] .dn-home { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
html[data-design="neu"] .dn-mitte { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
html[data-design="neu"] .dn-seite { flex: 1 1 320px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 18px; animation: dn-rein .4s cubic-bezier(.2, .8, .2, 1) both; }
@media (min-width: 1200px) { html[data-design="neu"] .dn-seite { max-width: 380px; } }

/* Banner */
html[data-design="neu"] .dn-hero {
  position: relative; overflow: hidden; border-radius: 24px; background-color: #111827; color: #FFFFFF; border: 1px solid #1F2937;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 26px 26px 0;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 28px 28px; animation: dn-gitter 6s linear infinite;
}
html[data-design="neu"] .dn-blob { position: absolute; width: 280px; height: 280px; top: -120px; left: 40%; border-radius: 999px; background: rgba(253, 185, 19, .45); filter: blur(40px); pointer-events: none; animation: dn-blob 16s ease-in-out infinite; }
html[data-design="neu"] .dn-hero-text { position: relative; flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px; }
html[data-design="neu"] .dn-hero-chip { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #FFFFFF; font-size: 12px; font-weight: 700; color: #6B4E00; box-shadow: 0 2px 8px -4px rgba(120, 90, 20, .4); }
html[data-design="neu"] .dn-live-punkt { width: 8px; height: 8px; border-radius: 999px; background: #EF4444; color: #EF4444; animation: dn-puls 1.6s ease-out infinite; }
html[data-design="neu"] main.content .dn-hero h1 { margin: 0; font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: #FFFFFF; }
html[data-design="neu"] .dn-welle { display: inline-block; color: #F2A900; transform-origin: 70% 80%; animation: dn-welle 2.6s ease-in-out .8s 3; }
html[data-design="neu"] .dn-tippen { margin: 0; max-width: 44ch; font-size: 15px; line-height: 1.6; color: #C9CED8; animation: dn-tippen 1.4s steps(40) .5s both; }
html[data-design="neu"] .dn-hero-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
html[data-design="neu"] .dn-btn-gelb { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 12px; border: 0; background: #FDB913; color: #111827; font-size: 14px; font-weight: 800; cursor: pointer; }
html[data-design="neu"] .dn-btn-gelb.klein { min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13px; align-self: flex-start; }
html[data-design="neu"] .dn-btn-rand { min-height: 46px; padding: 0 18px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .6); background: transparent; color: #FFFFFF; font-size: 14px; font-weight: 700; cursor: pointer; }
html[data-design="neu"] .dn-btn-rand:hover { background: rgba(255, 255, 255, .08); }
html[data-design="neu"] .dn-hero-bild {
  position: relative; width: 340px; max-width: 100%; height: auto; display: block; mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 75% 95% at 50% 70%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 75% 95% at 50% 70%, #000 62%, transparent 100%);
  animation: dn-hero .9s cubic-bezier(.2, .8, .2, 1) .2s both;
}
/* Bannerbild bearbeitbar (16.10.2026) */
html[data-design="neu"] .dn-hero-bildbox { position: relative; align-self: flex-end; display: flex; justify-content: center; }
html[data-design="neu"] .dn-hero-bild.ohne-verschmelzen { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
html[data-design="neu"] .dn-hero-anpassen { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(17, 24, 39, .55); color: #FFFFFF; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; opacity: 0; transition: opacity .2s, background-color .2s; }
html[data-design="neu"] .dn-hero:hover .dn-hero-anpassen, html[data-design="neu"] .dn-hero-anpassen:focus-visible { opacity: 1; }
html[data-design="neu"] .dn-hero-anpassen:hover { background: #FDB913; color: #111827; border-color: #FDB913; }
@media (pointer: coarse) { html[data-design="neu"] .dn-hero-anpassen { opacity: .9; } }
html[data-design="neu"] .dn-hero.dn-bild-bearbeiten { overflow: visible; }
html[data-design="neu"] .dn-hero.dn-bild-bearbeiten .dn-hero-bild { cursor: grab; touch-action: none; animation: none; outline: 2px dashed #FDB913; outline-offset: 6px; }
html[data-design="neu"] .dn-hero.dn-bild-bearbeiten .dn-hero-bild.zieht { cursor: grabbing; }
html[data-design="neu"] .dn-bild-werkzeuge { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; flex-direction: column; gap: 10px; width: min(300px, calc(100% - 24px)); padding: 14px; border-radius: 16px; background: #FFFFFF; color: #111827; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); }
html[data-design="neu"] .dn-bild-werkzeuge p { margin: 0; font-size: 12px; color: #4B5563; }
html[data-design="neu"] .dn-bw-zeile { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
html[data-design="neu"] .dn-bw-zeile input[type=range] { flex: 1; accent-color: #FDB913; }
html[data-design="neu"] .dn-bw-zeile b { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
html[data-design="neu"] .dn-bw-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-design="neu"] .dn-bw-knoepfe button { min-height: 34px; padding: 0 11px; border-radius: 10px; border: 1px solid #E7E5E0; background: #F7F6F2; color: #111827; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
html[data-design="neu"] .dn-bw-knoepfe button:hover { border-color: #FDB913; }
html[data-design="neu"] .dn-bw-ende { justify-content: flex-end; border-top: 1px solid #EFEEEA; padding-top: 10px; }
html[data-design="neu"] .dn-bw-knoepfe .dn-bw-fertig { background: #FDB913; border-color: #FDB913; }
html[data-design="neu"] .dn-baustreifen { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background-image: repeating-linear-gradient(-45deg, #111827 0 10px, #FDB913 10px 20px); background-size: 28.28px 100%; animation: dn-streifen 1.2s linear infinite; }
html[data-design="neu"] .dn-baustreifen.klein { top: 0; bottom: auto; left: auto; width: 120px; height: 8px; border-radius: 0 0 0 6px; }

/* Karten mit Hebe-Effekt */
html[data-design="neu"] .dn-karte { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; text-align: left; font: inherit; color: #111827; cursor: pointer; }
html[data-design="neu"] .dn-karte:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(120, 90, 20, .35); }
html[data-design="neu"] .dn-glanz { position: relative; overflow: hidden; }
html[data-design="neu"] .dn-glanz::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: dn-glanz 4.5s ease-in-out infinite; pointer-events: none; }

/* Kennzahlen */
html[data-design="neu"] .dn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; }
html[data-design="neu"] .dn-kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid #E7E5E0; background: #FFFFFF; }
html[data-design="neu"] .dn-kpi-ic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
html[data-design="neu"] .dn-kpi:hover .dn-kpi-ic { transform: rotate(-8deg) scale(1.08); }
html[data-design="neu"] .dn-kpi-label { font-size: 14px; font-weight: 700; padding-top: 8px; }
html[data-design="neu"] .dn-kpi-wert { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
html[data-design="neu"] .dn-kpi-fuss { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; font-size: 12px; color: #4B5563; }
html[data-design="neu"] .dn-pfeil-rund { width: 26px; height: 26px; flex: none; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
html[data-design="neu"] .dn-karte:hover .dn-pfeil-rund,
html[data-design="neu"] .dn-karte:hover .dn-pfeil,
html[data-design="neu"] .dn-link:hover .dn-pfeil { transform: translateX(4px); }
html[data-design="neu"] .dn-pfeil { display: inline-block; color: #F5B301; transition: transform .2s; }

/* Frist + Pipeline */
html[data-design="neu"] .dn-zweier { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
html[data-design="neu"] .dn-frist { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 22px; border-radius: 20px; background: #111827; color: #FFFFFF; cursor: default; }
html[data-design="neu"] .dn-ring { position: relative; width: 112px; height: 112px; flex: none; }
html[data-design="neu"] .dn-ringzug { animation: dn-ringzug 1.6s cubic-bezier(.2, .8, .2, 1) .4s both; }
html[data-design="neu"] .dn-ring-mitte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
html[data-design="neu"] .dn-ring-mitte b { font-size: 34px; font-weight: 800; line-height: 1; }
html[data-design="neu"] .dn-ring-mitte small { font-size: 11px; color: #C9CED8; }
html[data-design="neu"] .dn-frist-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html[data-design="neu"] .dn-frist-text b { font-size: 18px; font-weight: 800; line-height: 1.25; }
html[data-design="neu"] .dn-frist-text small { font-size: 13px; color: #C9CED8; }
html[data-design="neu"] .dn-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #6B7280; }
html[data-design="neu"] .dn-eyebrow.gelb { color: #FDB913; }
html[data-design="neu"] .dn-pipe { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 20px; background: #FFFFFF; border: 1px solid #E7E5E0; }
html[data-design="neu"] .dn-pipe-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; }
html[data-design="neu"] .dn-pipe-kopf > span:first-child { display: flex; flex-direction: column; gap: 4px; }
html[data-design="neu"] .dn-pipe-summe { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html[data-design="neu"] .dn-pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
html[data-design="neu"] .dn-pill.gruen { background: #E3F5EC; color: #047857; }
html[data-design="neu"] .dn-pipe-balken { display: flex; gap: 4px; height: 14px; width: 100%; }
html[data-design="neu"] .dn-fuell { display: block; height: 100%; animation: dn-fuellen 1.4s cubic-bezier(.2, .8, .2, 1) .5s both; }
html[data-design="neu"] .dn-streifen { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35) 0 7px, transparent 7px 14px); background-size: 28px 100%; animation: dn-fuellen 1.4s cubic-bezier(.2, .8, .2, 1) .5s both, dn-streifen 1s linear infinite; }
/* 19.10.2026: Pipeline neu — Kopf mit Abschlussquote, schlanker Balken, drei Stufen mit Pfeilen */
html[data-design="neu"] .dn-pipe { gap: 16px; }
html[data-design="neu"] .dn-pipe-kopf { align-items: flex-start; }
html[data-design="neu"] .dn-pipe-unter { font-size: 12px; color: #6B7280; font-weight: 500; }
html[data-design="neu"] .dn-pipe-quote { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 8px 12px; border-radius: 14px; background: #FFF7DB; border: 1px solid #F6DE94; flex: none; }
html[data-design="neu"] .dn-pipe-quote b { font-size: 20px; font-weight: 800; color: #8A5A00; font-variant-numeric: tabular-nums; line-height: 1; }
html[data-design="neu"] .dn-pipe-quote small { font-size: 11px; font-weight: 700; color: #8A5A00; letter-spacing: .02em; }
html[data-design="neu"] .dn-pipe-quote.leer { background: #F3F4F6; border-color: #E5E7EB; }
html[data-design="neu"] .dn-pipe-quote.leer b, html[data-design="neu"] .dn-pipe-quote.leer small { color: #6B7280; }
html[data-design="neu"] .dn-pipe .dn-pipe-balken { height: 8px; gap: 3px; background: #F1F2F4; border-radius: 999px; overflow: hidden; }
html[data-design="neu"] .dn-pipe .dn-pipe-balken .dn-fuell { border-radius: 999px; }
html[data-design="neu"] .dn-pipe-stufen { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); align-items: stretch; gap: 6px; width: 100%; }
html[data-design="neu"] .dn-pipe-pfeil { display: flex; align-items: center; justify-content: center; color: #CBD5E1; font-size: 22px; font-weight: 700; }
html[data-design="neu"] .dn-pipe-stufe { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: #FAFAF9; border: 1px solid #EEECE8; min-width: 0; text-align: left; }
html[data-design="neu"] .dn-pipe-stufe-kopf { display: flex; align-items: center; gap: 6px; }
html[data-design="neu"] .dn-pipe-stufe-kopf i { width: 8px; height: 8px; border-radius: 50%; background: var(--st); flex: none; }
html[data-design="neu"] .dn-pipe-stufe-kopf small { font-size: 12px; font-weight: 700; color: #374151; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-pipe-stufe-kopf em { font-style: normal; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid #E5E7EB; color: #111827; }
html[data-design="neu"] .dn-pipe-stufe > b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-design="neu"] .dn-pipe-mini { display: block; height: 4px; border-radius: 999px; background: #ECEAE6; overflow: hidden; }
html[data-design="neu"] .dn-pipe-mini .dn-fuell { background: var(--st); border-radius: 999px; }
html[data-design="neu"] .dn-pipe-anz { font-size: 11px; color: #6B7280; }
/* Schmale Karte (PC mit Seitenleiste, Handy): Stufen als Zeilen untereinander statt abgeschnitten nebeneinander */
html[data-design="neu"] .dn-pipe { container: dn-pipe / inline-size; }
@container dn-pipe (max-width: 470px) {
  html[data-design="neu"] .dn-pipe-stufen { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  html[data-design="neu"] .dn-pipe-pfeil { display: none; }
  html[data-design="neu"] .dn-pipe-stufe { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kopf betrag" "mini mini"; align-items: center; gap: 6px 10px; padding: 9px 12px; }
  html[data-design="neu"] .dn-pipe-stufe-kopf { grid-area: kopf; }
  html[data-design="neu"] .dn-pipe-stufe > b { grid-area: betrag; font-size: 15px; }
  html[data-design="neu"] .dn-pipe-mini { grid-area: mini; }
  html[data-design="neu"] .dn-pipe-anz { display: none; }
}
@container dn-pipe (max-width: 300px) {
  html[data-design="neu"] .dn-pipe-kopf { flex-wrap: wrap; }
  html[data-design="neu"] .dn-pipe-quote { align-items: flex-start; flex-direction: row; gap: 6px; align-items: baseline; }
}

/* 19.10.2026: Kennzahlen — in schmaler Spalte 2×2, Beträge passen sich der Breite an statt abgeschnitten zu werden */
html[data-design="neu"] .dn-kpis-huelle { container: dn-kpis / inline-size; }
@container dn-kpis (max-width: 880px) { html[data-design="neu"] .dn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container dn-kpis (max-width: 420px) { html[data-design="neu"] .dn-kpis { grid-template-columns: minmax(0, 1fr); } }
html[data-design="neu"] .dn-kpi-flach .dn-kpi-text { container-type: inline-size; }
html[data-design="neu"] .dn-kpi-flach .dn-kpi-wert { font-size: clamp(18px, 15cqi, 28px); }
html[data-design="neu"] .dn-kpi-hinweis { line-height: 1.35; }

html[data-design="neu"] .dn-pipe-teile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
html[data-design="neu"] .dn-pipe-teile > span { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 3px solid; }
html[data-design="neu"] .dn-pipe-teile small { font-size: 12px; color: #4B5563; }
html[data-design="neu"] .dn-pipe-teile b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Abschnitte */
html[data-design="neu"] .dn-abschnitt { display: flex; flex-direction: column; gap: 14px; }
html[data-design="neu"] .dn-abschnitt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
html[data-design="neu"] main.content .dn-abschnitt-kopf h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
html[data-design="neu"] main.content .dn-abschnitt-kopf h2.klein { font-size: 18px; }
html[data-design="neu"] .dn-strich { width: 6px; height: 22px; border-radius: 3px; background: #FDB913; }
html[data-design="neu"] .dn-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: #111827; cursor: pointer; padding: 0; }
html[data-design="neu"] .dn-link.braun { color: #92400E; font-size: 12px; }

/* Projektkarten */
html[data-design="neu"] .dn-projekte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
html[data-design="neu"] .dn-projekt { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #E7E5E0; background: #FFFFFF; padding: 0; }
html[data-design="neu"] .dn-projekt-kopf { position: relative; display: block; height: 128px; overflow: hidden; background: linear-gradient(135deg, var(--pf, #FDB913), #111827 140%); }
html[data-design="neu"] .dn-projekt-ic { position: absolute; left: 14px; bottom: 12px; opacity: .9; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
html[data-design="neu"] .dn-projekt:hover .dn-projekt-ic { transform: scale(1.12); }
html[data-design="neu"] .dn-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 24, 39, 0) 30%, rgba(17, 24, 39, .75)); display: flex; align-items: flex-end; justify-content: flex-end; padding: 10px 12px; opacity: 0; transition: opacity .3s; }
html[data-design="neu"] .dn-ov span { font-size: 12px; font-weight: 800; color: #FFFFFF; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
html[data-design="neu"] .dn-projekt:hover .dn-ov { opacity: 1; }
html[data-design="neu"] .dn-projekt-marke { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; animation: dn-marke 2.4s ease-in-out infinite; }
/* Animierte Szene je Phase (16.10.2026) */
html[data-design="neu"] .dn-projekt-szene { position: absolute; inset: 0; display: block;
  background: linear-gradient(to top, #E9E2D2 0 12.7%, #D8CDB4 12.7% 14.5%, transparent 14.5%),
    linear-gradient(color-mix(in srgb, var(--pf, #FDB913) 50%, #FFFDF7), color-mix(in srgb, var(--pf, #FDB913) 12%, #FFFDF7)); }
html[data-design="neu"] .dn-projekt-szene svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
html[data-design="neu"] .dn-projekt:hover .dn-projekt-szene svg { transform: scale(1.05); }
html[data-design="neu"] .dn-sz * { transform-box: fill-box; transform-origin: center; }
html[data-design="neu"] .dn-sz-wolke { animation: dnSzWolke 22s linear infinite; }
html[data-design="neu"] .dn-sz-wolke.dn-sz-spaet { animation-duration: 30s; animation-delay: -12s; }
html[data-design="neu"] .dn-sz-katze { animation: dnSzKatze 5s ease-in-out infinite alternate; }
html[data-design="neu"] .dn-sz-haken { animation: dnSzHaken 2.5s ease-in-out infinite alternate; }
html[data-design="neu"] .dn-sz-platte { animation: dnSzPlatte 5s ease-in-out infinite; }
html[data-design="neu"] .dn-sz-blink { animation: dnSzBlink 1.4s ease-in-out infinite; }
html[data-design="neu"] .dn-sz-staub { animation: dnSzStaub 2.1s ease-out infinite; }
html[data-design="neu"] .dn-sz-zeichnen { stroke-dasharray: 420; animation: dnSzZeichnen 5.5s ease-in-out infinite; }
html[data-design="neu"] .dn-sz-stift { animation: dnSzStift 2.2s ease-in-out infinite alternate; }
html[data-design="neu"] .dn-sz-heben { animation: dnSzHeben 3.6s ease-in-out infinite alternate; }
html[data-design="neu"] .dn-sz-pop { animation: dnSzPop 3.2s cubic-bezier(.3, 1.6, .5, 1) infinite; }
html[data-design="neu"] .dn-sz-konfetti { animation: dnSzKonfetti 2.6s linear infinite; }
@keyframes dnSzWolke { from { transform: translateX(-260px); } to { transform: translateX(560px); } }
@keyframes dnSzKatze { from { transform: translateX(0); } to { transform: translateX(-74px); } }
@keyframes dnSzHaken { from { transform: translateY(-4px); } to { transform: translateY(10px); } }
@keyframes dnSzPlatte { 0% { transform: translateY(-34px); opacity: 0; } 25% { opacity: 1; } 45%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes dnSzBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes dnSzStaub { 0% { transform: translate(0, 0); opacity: 0; } 25% { opacity: .9; } 100% { transform: translate(10px, -16px); opacity: 0; } }
@keyframes dnSzZeichnen { 0% { stroke-dashoffset: 420; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes dnSzStift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-12px, 6px) rotate(-6deg); } }
@keyframes dnSzHeben { from { transform: translateY(2px); } to { transform: translateY(-3px); } }
@keyframes dnSzPop { 0% { transform: scale(.4); opacity: 0; } 18% { transform: scale(1.12); opacity: 1; } 28%, 100% { transform: scale(1); opacity: 1; } }
@keyframes dnSzKonfetti { 0% { transform: translateY(-10px) rotate(0deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(96px) rotate(300deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html[data-design="neu"] .dn-sz *, html[data-design="neu"] .dn-projekt-szene svg { animation: none !important; transition: none !important; } }
html[data-design="neu"] .dn-projekt-inhalt { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
html[data-design="neu"] .dn-projekt-inhalt > span:first-child { display: flex; flex-direction: column; gap: 3px; }
html[data-design="neu"] .dn-projekt-inhalt b { font-size: 15px; font-weight: 800; }
html[data-design="neu"] .dn-projekt-inhalt small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #4B5563; }
html[data-design="neu"] .dn-phase { display: flex; flex-direction: column; gap: 6px; }
html[data-design="neu"] .dn-phase > span:first-child { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
html[data-design="neu"] .dn-phase-spur { height: 7px; border-radius: 999px; background: #EEEDE9; overflow: hidden; display: block; }
html[data-design="neu"] .dn-phase-spur .dn-fuell { border-radius: 999px; }
html[data-design="neu"] .dn-projekt-daten { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid #EFEEEA; font-size: 12px; }
html[data-design="neu"] .dn-projekt-daten > span { display: flex; justify-content: space-between; gap: 8px; }
html[data-design="neu"] .dn-projekt-daten > span > span { color: #4B5563; }
html[data-design="neu"] .dn-projekt-daten b { font-size: 12px; font-weight: 700; }

/* Letzte Aktivitäten */
html[data-design="neu"] .dn-karte-flach { border-radius: 20px; background: #FFFFFF; border: 1px solid #E7E5E0; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
html[data-design="neu"] .dn-karte-flach .dn-abschnitt-kopf { padding-bottom: 8px; }
html[data-design="neu"] .dn-online-text { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #047857; }
html[data-design="neu"] .dn-online-punkt { width: 7px; height: 7px; border-radius: 999px; background: #22C55E; color: #22C55E; animation: dn-puls 2s ease-out infinite; flex: none; }
html[data-design="neu"] .dn-akt { display: flex; flex-direction: column; }
html[data-design="neu"] .dn-zeile { display: flex; align-items: center; gap: 14px; padding: 10px 6px; border-radius: 12px; transition: background-color .15s; }
html[data-design="neu"] .dn-zeile:hover { background-color: #FFF8E6; }
html[data-design="neu"] .dn-akt-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
html[data-design="neu"] .dn-akt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-design="neu"] .dn-akt-text b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-akt-text small { font-size: 12px; color: #4B5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-akt-wann { font-size: 12px; font-weight: 700; color: #6B7280; white-space: nowrap; }

/* Spruch + Kunden */
html[data-design="neu"] .dn-dreier { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
html[data-design="neu"] .dn-spruch { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E7E5E0; cursor: default; }
html[data-design="neu"] .dn-anf { font-size: 28px; line-height: .6; font-weight: 800; color: #9CA3AF; }
html[data-design="neu"] .dn-spruch b { font-size: 14px; font-weight: 600; line-height: 1.45; }
html[data-design="neu"] .dn-spruch small { font-size: 12px; color: #4B5563; }
html[data-design="neu"] .dn-kunden { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E7E5E0; }
html[data-design="neu"] .dn-kunden > span:last-child { display: flex; flex-direction: column; gap: 2px; }
html[data-design="neu"] .dn-kunden small { font-size: 12px; color: #4B5563; }
html[data-design="neu"] .dn-kunden-zahl { font-size: 26px; font-weight: 800; line-height: 1; }
html[data-design="neu"] .dn-kunden em { font-style: normal; font-size: 12px; font-weight: 700; color: #047857; }
html[data-design="neu"] .dn-stapel { display: flex; }
html[data-design="neu"] .dn-stapel span { width: 34px; height: 34px; border-radius: 999px; border: 2px solid #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #111827; }
html[data-design="neu"] .dn-stapel span + span { margin-left: -10px; }
html[data-design="neu"] .dn-float1 { animation: dn-schweben 4s ease-in-out infinite; }
html[data-design="neu"] .dn-float2 { animation: dn-schweben 4s ease-in-out 1s infinite; }
html[data-design="neu"] .dn-float3 { animation: dn-schweben 4s ease-in-out 2s infinite; }

/* Rechte Spalte */
html[data-design="neu"] .dn-seitenkarte { border-radius: 16px; background: #FFFFFF; border: 1px solid #E7E5E0; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
html[data-design="neu"] main.content .dn-seitenkarte h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; }
html[data-design="neu"] .dn-seiten-kopf { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; }
html[data-design="neu"] .dn-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid #EFEEEA; }
html[data-design="neu"] .dn-tag { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; border-radius: 10px; border: 0; background: transparent; color: #4B5563; font: inherit; cursor: pointer; transition: transform .2s; }
html[data-design="neu"] .dn-tag:hover { transform: translateY(-3px); }
html[data-design="neu"] .dn-tag small { font-size: 10px; font-weight: 700; opacity: .75; }
html[data-design="neu"] .dn-tag b { font-size: 14px; font-weight: 800; }
html[data-design="neu"] .dn-tag i { width: 5px; height: 5px; border-radius: 999px; }
html[data-design="neu"] .dn-tag.heute { background: #111827; color: #FFFFFF; }
html[data-design="neu"] .dn-tag.belegt { background: #FFF8E6; color: #111827; }
html[data-design="neu"] .dn-zeitleiste-rahmen { position: relative; }
html[data-design="neu"] .dn-linie { position: absolute; left: 64px; top: 14px; bottom: 14px; width: 2px; background: #E7E5E0; transform-origin: top; animation: dn-zeichnen 1.4s cubic-bezier(.2, .8, .2, 1) .3s both; }
html[data-design="neu"] .dn-zeitleiste { position: relative; display: flex; flex-direction: column; }
html[data-design="neu"] .dn-termin { display: grid; grid-template-columns: 46px 14px 1fr; gap: 10px; padding: 9px 4px; border-radius: 10px; cursor: pointer; align-items: start; }
html[data-design="neu"] .dn-termin-tag { display: flex; flex-direction: column; font-size: 12px; color: #4B5563; line-height: 1.3; }
html[data-design="neu"] .dn-termin-tag b { font-weight: 700; color: #111827; }
html[data-design="neu"] .dn-termin-punkt { width: 10px; height: 10px; margin-top: 4px; border-radius: 999px; animation: dn-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
html[data-design="neu"] .dn-termin-punkt.dn-live { color: #EF4444; animation: dn-pop .45s cubic-bezier(.3, 1.6, .5, 1) both, dn-puls 1.6s ease-out infinite; }
html[data-design="neu"] .dn-termin-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html[data-design="neu"] .dn-termin-text b { font-size: 13px; font-weight: 700; }
html[data-design="neu"] .dn-termin-text small { font-size: 12px; color: #4B5563; }
html[data-design="neu"] .dn-leer { margin: 6px 0; font-size: 13px; color: #6B7280; }
/* Seitenkarten einstellbar (16.10.2026): klappen, Größe S/M/L, verschieben */
html[data-design="neu"] .dn-sk-rechts { display: flex; align-items: center; gap: 6px; }
html[data-design="neu"] .dn-sk-werkzeuge { display: flex; gap: 1px; opacity: .4; transition: opacity .2s; }
html[data-design="neu"] .dn-sk:hover .dn-sk-werkzeuge, html[data-design="neu"] .dn-sk:focus-within .dn-sk-werkzeuge { opacity: 1; }
@media (pointer: coarse) { html[data-design="neu"] .dn-sk-werkzeuge { opacity: .85; } }
html[data-design="neu"] .dn-sk-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 28px; height: 28px; padding: 0 3px; border: 0; border-radius: 8px; background: transparent; color: #6B7280; font: inherit; cursor: pointer; transition: background-color .15s, color .15s; }
html[data-design="neu"] .dn-sk-knopf:hover { background: #F3F1EA; color: #111827; }
html[data-design="neu"] .dn-sk-knopf:focus-visible { outline: 2px solid #FDB913; outline-offset: 1px; }
html[data-design="neu"] .dn-sk-knopf small { font-size: 9.5px; font-weight: 800; }
html[data-design="neu"] .dn-sk-griff { cursor: grab; touch-action: none; }
html[data-design="neu"] .dn-sk.zieht { position: relative; z-index: 2; transform: scale(1.02); outline: 2px dashed #FDB913; outline-offset: 2px; box-shadow: 0 18px 40px -18px rgba(17, 24, 39, .45); }
html[data-design="neu"] .dn-sk.zieht .dn-sk-griff { cursor: grabbing; }
html[data-design="neu"] .dn-sk-klapp svg { transition: transform .25s; }
html[data-design="neu"] .dn-sk.zu .dn-sk-klapp svg { transform: rotate(-90deg); }
html[data-design="neu"] .dn-sk-titel { cursor: pointer; user-select: none; }
html[data-design="neu"] .dn-sk-koerper { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
html[data-design="neu"] .dn-sk.zu .dn-sk-koerper { grid-template-rows: 0fr; }
html[data-design="neu"] .dn-sk-innen { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
html[data-design="neu"] .dn-sk.zu .dn-seiten-kopf { padding-bottom: 0; }
html[data-design="neu"] .dn-sk-mehr { align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
html[data-design="neu"] .dn-sk-klein .dn-schnell { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-design="neu"] .dn-sk-klein .dn-schnell-knopf { justify-content: center; padding: 0; }
html[data-design="neu"] .dn-sk-klein .dn-schnell-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html[data-design="neu"] .dn-sk-gross .dn-schnell-knopf { min-height: 62px; font-size: 14px; }
html[data-design="neu"] .dn-sk-klein .dn-woche .dn-tag:nth-child(n+8) { display: none; }
@media (prefers-reduced-motion: reduce) { html[data-design="neu"] .dn-sk-koerper, html[data-design="neu"] .dn-sk-klapp svg { transition: none; } }
html[data-design="neu"] .dn-schnell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
html[data-design="neu"] .dn-schnell-knopf { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 0; background: #FFFCF2; color: #111827; font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; transition: transform .2s, box-shadow .2s, background-color .2s; }
html[data-design="neu"] .dn-schnell-knopf:hover { transform: translateY(-2px); background-color: #FFFFFF; box-shadow: 0 8px 18px -10px rgba(120, 90, 20, .4); }
html[data-design="neu"] .dn-schnell-knopf:hover svg { animation: dn-kipp .5s ease-in-out; }
html[data-design="neu"] .dn-team { padding: 8px 4px; gap: 12px; }
html[data-design="neu"] .dn-avatar { width: 40px; height: 40px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #111827; }
html[data-design="neu"] .dn-team-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html[data-design="neu"] .dn-team-text b { font-size: 14px; font-weight: 700; }
html[data-design="neu"] .dn-team-text small { font-size: 12px; color: #4B5563; }
html[data-design="neu"] .dn-imteam { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #15803D; }

/* Erscheinen der Bereiche nacheinander */
html[data-design="neu"] .dn-hoch > * { animation: dn-hoch .6s cubic-bezier(.2, .8, .2, 1) both; }
html[data-design="neu"] .dn-hoch > *:nth-child(1) { animation-delay: .05s; }
html[data-design="neu"] .dn-hoch > *:nth-child(2) { animation-delay: .13s; }
html[data-design="neu"] .dn-hoch > *:nth-child(3) { animation-delay: .21s; }
html[data-design="neu"] .dn-hoch > *:nth-child(4) { animation-delay: .29s; }
html[data-design="neu"] .dn-hoch > *:nth-child(5) { animation-delay: .37s; }
html[data-design="neu"] .dn-hoch > *:nth-child(n+6) { animation-delay: .45s; }
/* Die schwebenden Karten behalten ihr Schweben (die Erscheinen-Animation würde es sonst ersetzen) */
html[data-design="neu"] .dn-hoch > .dn-float1 { animation: dn-hoch .6s cubic-bezier(.2, .8, .2, 1) both, dn-schweben 4s ease-in-out .6s infinite; }
html[data-design="neu"] .dn-hoch > .dn-float2 { animation: dn-hoch .6s cubic-bezier(.2, .8, .2, 1) .13s both, dn-schweben 4s ease-in-out 1.6s infinite; }
html[data-design="neu"] .dn-hoch > .dn-float3 { animation: dn-hoch .6s cubic-bezier(.2, .8, .2, 1) .21s both, dn-schweben 4s ease-in-out 2.6s infinite; }

/* =====================================================================
   8. GERÜST WIE IM ENTWURF: dritte Spalte, Menü, Kopfzeile
   ===================================================================== */
@media (min-width: 1280px) {
  html[data-design="neu"] body.dn-mit-seite #appView:not(.hidden) { grid-template-columns: 248px minmax(0, 1fr) 340px; }
  html[data-design="neu"] body.dn-mit-seite #appView > header.topbar { grid-column: 2 / -1; }
  html[data-design="neu"] #dnSeite { grid-column: 3; grid-row: 2; align-self: start; position: sticky; top: 16px; padding: 4px clamp(16px, 2.6vw, 32px) 40px 0; max-width: none; }
  html[data-design="neu"] body.dn-mit-seite main.content { padding-right: 24px; }
  html[data-design="neu"] body.nav-zu.dn-mit-seite #appView:not(.hidden) { grid-template-columns: minmax(0, 1fr) 340px; }
  html[data-design="neu"] body.nav-zu.dn-mit-seite #appView > header.topbar { grid-column: 1 / -1; }
  html[data-design="neu"] body.nav-zu.dn-mit-seite main.content { grid-column: 1; }
  html[data-design="neu"] body.nav-zu.dn-mit-seite #dnSeite { grid-column: 2; }
}
@media (max-width: 1279px) { html[data-design="neu"] #dnSeite { display: none; } }
html[data-design="neu"] .dn-mitte { flex-basis: 100%; }

/* Menü: Punkte wie im Entwurf */
html[data-design="neu"] nav.side .dn-nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] nav.side .dn-nav svg { flex: none; }
html[data-design="neu"] nav.side button.dn-nav.active { background: #FDB913; color: #111827; font-weight: 800; box-shadow: 0 8px 18px -10px rgba(253, 185, 19, .9); animation: dn-navin .55s cubic-bezier(.2, .8, .2, 1) both, dn-leuchten 2.6s ease-in-out 1s infinite; }
html[data-design="neu"] nav.side button.dn-nav.active span { color: #111827 !important; }
html[data-design="neu"] nav.side button.dn-nav.active::before { display: none; }
html[data-design="neu"] nav.side button.dn-nav.active::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: dn-wisch 3.8s ease-in-out 1.2s infinite; pointer-events: none; }
html[data-design="neu"] nav.side button.dn-nav.active svg { animation: dn-kipp 1s ease-in-out 1.4s; }
html[data-design="neu"] nav.side .dn-nav-zahl { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #FFEFC2; color: #6B4E00; animation: dn-hupf 3.2s ease-in-out infinite; }
html[data-design="neu"] nav.side button.dn-nav:nth-of-type(1) { animation-delay: .05s; }
html[data-design="neu"] nav.side button.dn-nav:nth-of-type(2) { animation-delay: .1s; }
html[data-design="neu"] nav.side button.dn-nav:nth-of-type(3) { animation-delay: .15s; }
html[data-design="neu"] nav.side button.dn-nav:nth-of-type(4) { animation-delay: .2s; }
html[data-design="neu"] nav.side button.dn-nav:nth-of-type(5) { animation-delay: .25s; }
html[data-design="neu"] nav.side button.dn-nav:nth-of-type(6) { animation-delay: .3s; }
html[data-design="neu"] nav.side button.dn-nav:nth-of-type(7) { animation-delay: .35s; }
html[data-design="neu"] nav.side button.dn-nav:nth-of-type(8) { animation-delay: .4s; }
html[data-design="neu"] nav.side button.dn-nav:nth-of-type(9) { animation-delay: .45s; }
html[data-design="neu"] nav.side button.dn-nav:nth-of-type(n+10) { animation-delay: .5s; }

/* Kopfzeile: Anfragen · Postfach · Glocke · Profil */
html[data-design="neu"] .dn-versteckt { display: none !important; }
/* Am PC ersetzt der Postfach-Knopf oben die Handy-Knöpfe — NUR am PC (gleiche Weiche wie die Handy-Ansicht der App) */
@media (min-width: 1025px) and (pointer: fine), (min-width: 1101px), (pointer: coarse) and (orientation: landscape) and (min-width: 1000px) { html[data-design="neu"] body header.topbar .h-kopf-knopf { display: none !important; } }   /* 19.10.2026: „body" macht die Regel stärker als display:grid !important weiter unten — sonst doppelt am PC */
html[data-design="neu"] .topbar-anfragen.hat-neue { background: #FFFFFF !important; border-color: #FDB913 !important; }
html[data-design="neu"] .topbar-anfragen.hat-neue .anfr-zahl { background: #DC2626; color: #FFFFFF; }
html[data-design="neu"] .dn-seite .dn-seitenkarte h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: 0; color: #111827; line-height: 1.3; }
html[data-design="neu"] .dn-post { position: relative; width: 44px; padding: 0; }
html[data-design="neu"] .dn-post-zahl { position: absolute; top: -7px; right: -9px; height: 20px; padding: 0 6px; border-radius: 999px; border: 2px solid #F6F6F3; background: #DC2626; color: #FFFFFF; font-size: 10px; font-weight: 800; display: flex; align-items: center; animation: dn-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
html[data-design="neu"] .dn-glocke { position: relative; width: 44px; padding: 0; border: 0 !important; background: transparent !important; }
html[data-design="neu"] .dn-glocke-punkt { position: absolute; top: 10px; right: 11px; width: 9px; height: 9px; border-radius: 999px; background: #F5B301; animation: dn-klingel-punkt 1.8s ease-out infinite; }
@keyframes dn-klingel-punkt { 0% { box-shadow: 0 0 0 0 rgba(245, 179, 1, .5); } 100% { box-shadow: 0 0 0 10px rgba(245, 179, 1, 0); } }
html[data-design="neu"] .acct-toggle { gap: 10px; }
html[data-design="neu"] .dn-profil-kreis { width: 42px; height: 42px; border-radius: 999px; background: #111827; color: #FDB913; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; }
html[data-design="neu"] .dn-profil { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
html[data-design="neu"] .dn-profil b { font-size: 14px; font-weight: 700; color: #111827; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-profil small { font-size: 12px; color: #4B5563; font-weight: 500; }
html[data-design="neu"] .acct-item.dn-acct-item { display: flex; align-items: center; gap: 10px; }
/* Mittlere Breiten: in der Kopfzeile nur noch Symbole, damit nichts rechts herausragt */
@media (max-width: 1300px) {
  html[data-design="neu"] .dn-umschalter-wort,
  html[data-design="neu"] .dn-profil,
  html[data-design="neu"] .topbar-anfragen .anfr-wort { display: none !important; }
  html[data-design="neu"] .dn-umschalter,
  html[data-design="neu"] .topbar-anfragen { padding: 0 10px; }
  html[data-design="neu"] header.topbar .right { gap: 8px; }
}
html[data-design="neu"] .acct-item.dn-acct-item svg { width: 16px; height: 16px; flex: none; }

/* =====================================================================
   9. SEITEN IM AUFBAU DES ENTWURFS
   Die Seiten der App bleiben dieselben (gleiche Knöpfe, gleiche Funktionen) — hier ändert
   sich nur, wie sie aussehen: Titel frei auf dem Grund, Einträge als einzelne Karten.
   ===================================================================== */
/* Seitenkopf: Die Karte um die ganze Seite fällt weg, der Titel steht frei wie im Entwurf */
html[data-design="neu"] main.content > .card:has(> .buch-titel),
html[data-design="neu"] main.content > .card:has(> .rech-titelzeile),
html[data-design="neu"] main.content > .card:has(> .pj-kopf),
html[data-design="neu"] main.content > .card.einst-kopf { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
html[data-design="neu"] main.content h2.buch-titel { margin: 0 0 4px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #111827; }
html[data-design="neu"] main.content .buch-titel-firma { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: #4B5563; }
html[data-design="neu"] .rech-titelzeile,
html[data-design="neu"] .pj-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
html[data-design="neu"] .rech-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
html[data-design="neu"] .dn-seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
html[data-design="neu"] main.content .dn-seitenkopf h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
html[data-design="neu"] .dn-seitenkopf p { margin: 4px 0 0; font-size: 13px; color: #4B5563; }
html[data-design="neu"] .dn-seitenkopf-rechts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
html[data-design="neu"] .dn-btn-rand-hell { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid #111827; background: #FFFFFF; color: #111827; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* Reiter (wie „Angebote · Auftragsbestätigungen · Rechnungen" im Entwurf) */
html[data-design="neu"] .acc-reiter,
html[data-design="neu"] .dn-reiterleiste { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: #EFEEEA; border: 0; }
html[data-design="neu"] .acc-reiter-knopf,
html[data-design="neu"] .dn-reiter { min-height: 38px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; color: #4B5563; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: none; }
html[data-design="neu"] .acc-reiter-knopf.aktiv,
html[data-design="neu"] .dn-reiter.aktiv { background: #FFFFFF; color: #111827; box-shadow: 0 2px 6px rgba(120, 90, 20, .15); }
html[data-design="neu"] .acc-reiter-knopf .ico { --ico: currentColor; }

/* Filter-Chips (Projekte nach Phase, Rechnungen nach Status …) */
html[data-design="neu"] .rech-status-leiste,
html[data-design="neu"] .pj-filter,
html[data-design="neu"] .dn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
html[data-design="neu"] body.view-tasks .rech-status-leiste { overflow-y: hidden; }   /* 19.10.2026: am Tablet standen Scrollpfeile ▲▼ neben „Offen/Erledigt/Alle" (1 px Überhang) */
html[data-design="neu"] .rech-status,
html[data-design="neu"] .pj-filterknopf,
html[data-design="neu"] .dn-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #E7E5E0; background: #FFFFFF; color: #111827; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s; }
html[data-design="neu"] .dn-chip.eckig { border-radius: 10px; min-width: 52px; justify-content: center; }
html[data-design="neu"] .rech-status.aktiv,
html[data-design="neu"] .pj-filterknopf.aktiv,
html[data-design="neu"] .dn-chip.aktiv { border-color: #111827; background: #111827; color: #FDB913; box-shadow: 0 8px 18px -10px rgba(17, 24, 39, .6); }
html[data-design="neu"] .trk-reiter-zahl,
html[data-design="neu"] .pj-zahl { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #F3F4F6; color: #4B5563; }
html[data-design="neu"] .rech-status.aktiv .trk-reiter-zahl,
html[data-design="neu"] .pj-filterknopf.aktiv .pj-zahl { background: #FDB913; color: #111827; }

/* Kennzahl-Kacheln der Seiten (Rechnungen, Projekte) im Stil der Übersicht */
html[data-design="neu"] .bilanz-kacheln,
html[data-design="neu"] .pj-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; margin: 14px 0; }
html[data-design="neu"] .bilanz-kachel,
html[data-design="neu"] .pj-kennzahl { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid #E7E5E0; border-top: 4px solid #FDB913; background: #FFFFFF; text-align: left; box-shadow: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
html[data-design="neu"] button.bilanz-kachel:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(120, 90, 20, .35); }
html[data-design="neu"] .bilanz-kachel b,
html[data-design="neu"] .pj-kennzahl strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: #111827; }
html[data-design="neu"] .bilanz-kachel-kopf,
html[data-design="neu"] .pj-kennzahl span { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
html[data-design="neu"] .bilanz-kachel small { font-size: 12px; color: #4B5563; }
html[data-design="neu"] .bilanz-kachel.pos { border-top-color: #10B981; }
html[data-design="neu"] .bilanz-kachel.ok { border-top-color: #3B82F6; }
html[data-design="neu"] .pj-kennzahl.verzug { border-top-color: #DC2626; }
html[data-design="neu"] .pj-kennzahl.verzug strong { color: #B91C1C; }

/* Einträge als Karten mit farbiger Kante (Rechnungen, Aufgaben) */
html[data-design="neu"] .rech-karte,
html[data-design="neu"] .task-card.aufg-zeile {
  background: #FFFFFF; border: 1px solid #E7E5E0; border-left-width: 5px; border-radius: 14px; box-shadow: 0 1px 3px rgba(17, 24, 39, .05);
  margin: 0 0 10px; transition: background-color .15s, transform .2s, box-shadow .2s;
}
html[data-design="neu"] .task-card.aufg-zeile { border-left-color: #FDB913; padding: 16px 18px; }
html[data-design="neu"] .rech-karte:hover,
html[data-design="neu"] .task-card.aufg-zeile:hover { background-color: #FFF8E6; transform: translateX(4px); box-shadow: 0 10px 22px -14px rgba(17, 24, 39, .35); }
/* 19.10.2026 (Nutzer: „dieses Gelb ist komisch“): Belegkarten (Tabellenzeile als Karte) — beim Überfahren färbte
   tr:hover td jedes Feld einzeln gelb (Flecken), und translateX schob die Karte über den Rand → Rollbalken unter der Liste.
   Jetzt: ganze Karte ruhig hinterlegt, leichter Schatten, kein Verrutschen. */
html[data-design="neu"] table.rech-tabelle tr.rech-karte:hover { transform: none; background-color: #FFFDF7; box-shadow: 0 8px 20px -14px rgba(17, 24, 39, .35); }
html[data-design="neu"] table.rech-tabelle tr.rech-karte:hover td { background: transparent !important; }
html[data-design="neu"] .rech-avatar { border-radius: 10px; font-weight: 800; }
html[data-design="neu"] .rech-monat { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; margin: 18px 0 8px; }
html[data-design="neu"] .task-text2 { font-size: 15px; font-weight: 700; }
html[data-design="neu"] .aufg-faellig { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #F3F4F6; color: #374151; }
html[data-design="neu"] .aufg-faellig.spaet { background: #FEECEC; color: #B91C1C; }
html[data-design="neu"] .task-card.aufg-zeile:has(.aufg-faellig.spaet) { border-left-color: #EF4444; }
html[data-design="neu"] .task-card input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: none; margin: 0; border-radius: 8px; border: 2px solid #D6CDB6; background: #FFFFFF; cursor: pointer; transition: all .2s; display: inline-grid; place-content: center;
}
html[data-design="neu"] .task-card input[type="checkbox"]:checked { background: #FDB913; border-color: #FDB913; }
html[data-design="neu"] .task-card input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border-left: 2.6px solid #111827; border-bottom: 2.6px solid #111827; transform: rotate(-45deg) translate(1px, -1px); }

/* Projekte: Kacheln mit Bild oben (wie im Entwurf) */
html[data-design="neu"] .pj-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; }
html[data-design="neu"] .pj-kachel { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #E7E5E0; background: #FFFFFF; box-shadow: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
html[data-design="neu"] .pj-kachel:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(120, 90, 20, .35); }
html[data-design="neu"] .pj-bild { width: 100% !important; height: 110px !important; min-height: 0 !important; flex: none !important; overflow: hidden; border-radius: 0; }
html[data-design="neu"] .pj-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
html[data-design="neu"] .pj-kachel:hover .pj-bild img { transform: scale(1.07); }
html[data-design="neu"] .pj-bild-leer { background: linear-gradient(135deg, #FDB913, #111827 150%) !important; color: #FFFFFF !important; display: flex !important; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; }
html[data-design="neu"] .pj-inhalt { padding: 14px; }
html[data-design="neu"] .pj-suchbox { border-radius: 12px; border: 1px solid #E7E5E0; background: #FFFFFF; }

/* Team: Mitarbeiter als Karten mit farbigem Kopf und großem Kürzel */
html[data-design="neu"] .emp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 16px; }
html[data-design="neu"] .emp-row { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 34px 16px 16px; border-radius: 16px; border: 1px solid #E7E5E0; background: #FFFFFF; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
html[data-design="neu"] .emp-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 68px; background: #FFF4D1; }
html[data-design="neu"] .emp-row:nth-child(5n+2)::before { background: #DBEAFE; }
html[data-design="neu"] .emp-row:nth-child(5n+3)::before { background: #DCFCE7; }
html[data-design="neu"] .emp-row:nth-child(5n+4)::before { background: #F3E8FF; }
html[data-design="neu"] .emp-row:nth-child(5n+5)::before { background: #FEE2E2; }
html[data-design="neu"] .emp-row:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(120, 90, 20, .35); }
html[data-design="neu"] .emp-ava { position: relative; width: 72px !important; height: 72px !important; border-radius: 999px !important; border: 4px solid #FFFFFF; font-size: 24px !important; font-weight: 800; box-shadow: 0 6px 16px -8px rgba(17, 24, 39, .35); }
html[data-design="neu"] .emp-name { position: relative; font-size: 17px; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 4px; }
html[data-design="neu"] .emp-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* 19.10.2026 Team: Der Zugangs-Hinweis („Erstanmeldung offen · Passwort von dir gesetzt am …") lief am Tablet links und rechts
   aus der Karte (geerbtes nowrap aus styles.css). Am Handy blendete eine alte Regel ALLE <span> in den Knöpfen aus — auch die
   Symbole, übrig blieben leere Kästchen. Und eine Karte pro Bildschirm war zu viel: am Handy jetzt kompakte Zeilen. */
html[data-design="neu"] .emp-name { white-space: normal; overflow: visible; max-width: 100%; min-width: 0; }
html[data-design="neu"] .emp-zugang { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; font-size: 12px; line-height: 1.4; font-weight: 600; white-space: normal; }
@media (max-width: 560px) {
  html[data-design="neu"] .emp-actions .btn.small span { display: inline-flex; }
  html[data-design="neu"] .emp-list { gap: 10px; }
  html[data-design="neu"] .emp-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; text-align: left; gap: 10px 14px; padding: 14px 14px 14px 20px; }
  html[data-design="neu"] .emp-row::before { right: auto; bottom: 0; width: 6px; height: auto; }
  html[data-design="neu"] .emp-row:hover { transform: none; }
  html[data-design="neu"] .emp-ava { width: 56px !important; height: 56px !important; font-size: 20px !important; border: 0; }
  html[data-design="neu"] .emp-name { align-items: flex-start; gap: 3px; font-size: 16px; }
  html[data-design="neu"] .emp-zugang { justify-content: flex-start; }
  html[data-design="neu"] .emp-actions { grid-column: 1 / -1; justify-content: flex-start; }
  html[data-design="neu"] .emp-actions .btn.small { min-height: 38px; }
}

/* Belege (Buchhaltung): Monate als Chips, Aktionen als runde Knöpfe */
html[data-design="neu"] .acc-monatsleiste { background: #FFFFFF; border: 1px solid #E7E5E0; border-radius: 16px; padding: 12px 14px; }
html[data-design="neu"] .acc-monat { min-height: 38px; border-radius: 10px; border: 1px solid #E7E5E0; background: #FFFFFF; color: #111827; font-weight: 700; }
html[data-design="neu"] .acc-monat.aktiv,
html[data-design="neu"] .acc-monat[aria-current="true"],
html[data-design="neu"] .acc-monat.sel { background: #111827; color: #FDB913; border-color: #111827; }
html[data-design="neu"] .buch-akt { min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid #E7E5E0; background: #FFFFFF; color: #111827; font-weight: 700; }
html[data-design="neu"] .buch-akt:hover { border-color: #FDB913; background: #FFFCF2; }

/* Kunden: Board-Spalten und Karten */
html[data-design="neu"] .kan-col { background: #EFEEEA; border: 0; border-radius: 16px; }
html[data-design="neu"] .kan-head { font-weight: 800; }
html[data-design="neu"] .kan-count { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #FFFFFF; color: #4B5563; }
html[data-design="neu"] .kan-card { background: #FFFFFF; border: 1px solid #E7E5E0; border-radius: 14px; box-shadow: 0 1px 3px rgba(17, 24, 39, .05); transition: transform .2s, box-shadow .2s, background-color .15s; }
html[data-design="neu"] .kan-card:hover { background: #FFF8E6; transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(17, 24, 39, .35); }
html[data-design="neu"] .cust-name { font-weight: 800; }
html[data-design="neu"] .docview-switch { border-radius: 12px; background: #EFEEEA; padding: 4px; border: 0; }
html[data-design="neu"] .docview-btn { border-radius: 10px; font-weight: 700; }
html[data-design="neu"] .docview-btn.active { background: #FFFFFF; color: #111827; box-shadow: 0 2px 6px rgba(120, 90, 20, .15); }

/* Kalender: Tage als runde Kacheln, heute dunkel umrandet */
html[data-design="neu"] .cal-kacheln { background: #FFFFFF; border: 1px solid #E7E5E0; border-radius: 20px; padding: 14px; }
html[data-design="neu"] .kwd { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
html[data-design="neu"] .kday { border-radius: 14px; border: 1px solid #EFEEEA; background: #FCFCFA; }
html[data-design="neu"] .kday.out { background: transparent; border-color: transparent; }
html[data-design="neu"] .kday.vorbei { color: #9CA3AF; }
html[data-design="neu"] .kday.heute,
html[data-design="neu"] .kday.today { border: 2px solid #111827; background: #FFFFFF; }
html[data-design="neu"] .cal-pfeil { width: 42px; height: 42px; border-radius: 12px; border: 1px solid #E7E5E0; background: #FFFFFF; font-weight: 800; }
html[data-design="neu"] select.cal-jump { border-radius: 12px; font-weight: 800; }

/* Einstellungen: Abschnitte als Zeilen mit gelber Kante wie im Entwurf */
html[data-design="neu"] .einst-gruppe { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: #111827; text-transform: none; }
html[data-design="neu"] .einst-gruppe::before { content: ""; width: 6px; height: 20px; border-radius: 3px; background: #FDB913; flex: none; }
html[data-design="neu"] .card.setting-acc { border: 1px solid #E7E5E0; border-left: 5px solid #FDB913; border-radius: 14px; box-shadow: 0 1px 3px rgba(17, 24, 39, .05); margin-bottom: 10px; }
html[data-design="neu"] .setting-acc > .setting-acc-head { font-size: 15px; font-weight: 800; }
html[data-design="neu"] .setting-acc > .setting-acc-head:hover { background: #FFF8E6; }
html[data-design="neu"] .dn-profilkarte { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 20px; background: #111827; color: #FFFFFF; margin-bottom: 18px; }
html[data-design="neu"] .dn-profilkarte .dn-profil-kreis { width: 56px; height: 56px; background: #FDB913; color: #111827; font-size: 18px; }
html[data-design="neu"] .dn-profilkarte b { display: block; font-size: 18px; font-weight: 800; }
html[data-design="neu"] .dn-profilkarte small { font-size: 13px; color: #C9CED8; }
html[data-design="neu"] .dn-profilkarte button { margin-left: auto; min-height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #FFFFFF; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
html[data-design="neu"] .dn-profilkarte button.dn-profil-kreis { margin-left: 0; min-height: 0; padding: 0; border: 0; border-radius: 16px; background: #FDB913; color: #111827; font-size: 18px; flex: none; }   /* 20.10.2026: Foto-Kreis ist auch ein Knopf — darf nicht nach rechts rutschen */

/* Postfach: Liste in Karten, Kategorien als Chips */
html[data-design="neu"] .card.mail-card { background: transparent; border: 0; box-shadow: none; }
html[data-design="neu"] .mail-cat { border-radius: 999px; border: 1px solid #E7E5E0; background: #FFFFFF; font-weight: 700; }
html[data-design="neu"] .mail-cat.active { background: #111827; color: #FDB913; border-color: #111827; }
/* 19.10.2026 Postfach ohne Konto: Karte statt grauem Satz */
html[data-design="neu"] .mail-leer { max-width: 560px; margin: 24px auto; padding: 32px 28px; border-radius: 20px; border: 1px solid #E7E5E0; background: #FFFFFF; text-align: center; box-shadow: 0 18px 40px -28px rgba(17, 24, 39, .35); }
html[data-design="neu"] .mail-leer-symbol { width: 68px; height: 68px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: #FFF4D1; --ico: #B45309; }
html[data-design="neu"] main.content .mail-leer-titel { margin: 0 0 6px; font-size: 21px; font-weight: 800; color: #111827; }
html[data-design="neu"] .mail-leer-text { margin: 0 auto 18px; max-width: 420px; font-size: 14px; line-height: 1.5; color: #4B5563; }
html[data-design="neu"] .mail-leer-punkte { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
html[data-design="neu"] .mail-leer-punkte li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #FAF8F3; font-size: 13.5px; line-height: 1.4; color: #1F2937; }
html[data-design="neu"] .mail-leer-punkte li .ico { flex: none; margin-top: 1px; }
html[data-design="neu"] .mail-leer-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
html[data-design="neu"] .mail-leer-knoepfe .btn { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 560px) {
  html[data-design="neu"] .mail-leer { margin: 12px; padding: 24px 18px; }
  html[data-design="neu"] .mail-leer-knoepfe .btn { flex: 1 1 100%; justify-content: center; }
}
html[data-design="neu"] .mail-row2 { background: #FFFFFF; border: 1px solid #E7E5E0; border-left: 5px solid #3B82F6; border-radius: 14px; margin: 0 0 8px; }
html[data-design="neu"] .mail-row2.sel { border-color: #FDB913; border-left-color: #FDB913; background: #FFF8E6; box-shadow: none; }
html[data-design="neu"] .mail-row2:hover { background: #FFF8E6; }
html[data-design="neu"] .mail-newbtn { background: #FDB913; color: #111827; border-radius: 12px; font-weight: 800; }

/* „Alle Bereiche" */
html[data-design="neu"] .dn-bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 16px; }
html[data-design="neu"] .dn-bereich { border-radius: 16px; background: #FFFFFF; border: 1px solid #E7E5E0; overflow: hidden; display: flex; flex-direction: column; }
html[data-design="neu"] .dn-bereich-kopf { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--bt); border-bottom: 3px solid var(--bf); }
html[data-design="neu"] .dn-bereich-kopf b { font-size: 14px; font-weight: 800; color: var(--bi); }
html[data-design="neu"] .dn-bereich-kopf span { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #FFFFFF; color: var(--bi); }
html[data-design="neu"] .dn-bereich-punkt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; border-top: 1px solid #EFEEEA; background: #FFFFFF; color: #111827; font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color .15s, transform .2s; }
html[data-design="neu"] .dn-bereich-punkt:hover { background: #FFF8E6; transform: translateX(3px); }
html[data-design="neu"] .dn-bereich-punkt i { width: 7px; height: 7px; border-radius: 999px; background: var(--bf); flex: none; }
html[data-design="neu"] .dn-bereich-punkt span { flex: 1; }
html[data-design="neu"] .dn-bereich-punkt em { font-style: normal; color: #9CA3AF; }
/* Kachel-Fassung wie im Handy-Menü (16.10.2026): Gruppen als Karten, darin 4 Kacheln je Reihe. */
html[data-design="neu"] .dn-bereiche.dn-kacheln { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 18px; align-items: start; }
html[data-design="neu"] .dn-bk-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px; }
html[data-design="neu"] .dn-bk { position: relative; border: 1px solid #ECEAE4; border-radius: 16px; background: linear-gradient(165deg, #FFFFFF 52%, var(--bk-tint, #FFF4D1)); box-shadow: 0 6px 16px -14px rgba(17, 24, 39, .4); transition: transform .18s, box-shadow .18s, border-color .18s; }
html[data-design="neu"] .dn-bk:hover { transform: translateY(-3px); border-color: var(--bk-farbe, #B07800); box-shadow: 0 12px 22px -16px var(--bk-farbe, #B07800); }
html[data-design="neu"] .dn-bk-gehe { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 96px; padding: 14px 4px 10px; border: 0; border-radius: 16px; background: none; color: #111827; font: inherit; cursor: pointer; text-align: center; }
html[data-design="neu"] .dn-bk-gehe:focus-visible { outline: 2px solid var(--bk-farbe, #B07800); outline-offset: 2px; }
/* Stecknadel: Seite ins Hauptmenü legen / herausnehmen. Aus = blass, an = gelb gefüllt. */
html[data-design="neu"] .dn-bk-pin { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #9CA3AF; cursor: pointer; opacity: .55; transition: opacity .15s, background-color .15s, color .15s; }
html[data-design="neu"] .dn-bk:hover .dn-bk-pin, html[data-design="neu"] .dn-bk-pin:focus-visible { opacity: 1; }
html[data-design="neu"] .dn-bk-pin:hover { background: #FFFFFF; border-color: #E7E5E0; color: #111827; }
html[data-design="neu"] .dn-bk-pin:focus-visible { outline: 2px solid #FDB913; outline-offset: 1px; }
html[data-design="neu"] .dn-bk-pin.an { opacity: 1; background: #FDB913; border-color: #FDB913; color: #111827; }
html[data-design="neu"] .dn-bk-pin.an svg path { fill: currentColor; }
html[data-design="neu"] .dn-bk.im-menue { border-color: #F5D27A; }
@media (pointer: coarse) { html[data-design="neu"] .dn-bk-pin { opacity: .85; } }
html[data-design="neu"] .dn-nav-ic { display: inline-flex; --ico: currentColor; }
/* Zweiton-Symbole (design-neu-symbole.js): Linie = Schriftfarbe, Fläche = Akzent mit wenig Deckkraft. */
html[data-design="neu"] .ni { display: inline-flex; flex: none; line-height: 0; }
html[data-design="neu"] .ni svg { display: block; overflow: visible; }
html[data-design="neu"] .ni-f { fill: var(--ni-akzent, #FDB913); opacity: var(--ni-deck, .22); }
/* Stil 6 „Gold gefüllt" (Wahl des Nutzers, 16.10.2026): jedes Symbol in einer vollen goldenen Kachel,
   dunkle Linie. Aktiver Punkt (selbst gold) dreht es um: dunkle Kachel, goldenes Symbol.
   Die Zweiton-Fläche ist hier nur ein Hauch Dunkel (0,12), damit die Form Tiefe bekommt. */
html[data-design="neu"] nav.side .dn-nav .ni { width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 9px; background: #FDB913; color: #111827; --ni-akzent: #111827; --ni-deck: .12; box-shadow: 0 5px 12px -7px rgba(253, 185, 19, .75); transition: transform .2s, box-shadow .2s; }
html[data-design="neu"] nav.side .dn-nav .ni svg { width: 18px; height: 18px; }
html[data-design="neu"] nav.side .dn-nav:hover .ni { transform: scale(1.07); box-shadow: 0 7px 16px -7px rgba(253, 185, 19, .95); }
/* #nav (ID): sonst gewinnt die ältere Regel „button.active:not(...) span { color: dunkel !important }". */
html[data-design="neu"] #nav button.dn-nav.active .ni { background: #111827; color: #FDB913 !important; --ni-akzent: #FDB913; --ni-deck: .28; box-shadow: none; animation: dn-kipp 1s ease-in-out 1.4s; }
html[data-design="neu"] .dn-bk-sym .ni { color: #FFFFFF; --ni-akzent: #FFFFFF; --ni-deck: .3; }
@media (prefers-reduced-motion: reduce) { html[data-design="neu"] nav.side .dn-nav .ni { transition: none; animation: none; } }
html[data-design="neu"] .dn-bk-sym { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: var(--bk-farbe, #B07800); color: #FFFFFF; --ico: #FFFFFF; box-shadow: 0 6px 14px -8px var(--bk-farbe, #B07800); }
html[data-design="neu"] .dn-bk-name { width: 100%; font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
html[data-design="neu"] .dn-bk:nth-child(8n+1) { --bk-farbe: #3B82F6; --bk-tint: #E8EFFE; }
html[data-design="neu"] .dn-bk:nth-child(8n+2) { --bk-farbe: #F97316; --bk-tint: #FFF0E6; }
html[data-design="neu"] .dn-bk:nth-child(8n+3) { --bk-farbe: #10B981; --bk-tint: #E3F5EC; }
html[data-design="neu"] .dn-bk:nth-child(8n+4) { --bk-farbe: #8B5CF6; --bk-tint: #F0EAFE; }
html[data-design="neu"] .dn-bk:nth-child(8n+5) { --bk-farbe: #14B8A6; --bk-tint: #E3F6F4; }
html[data-design="neu"] .dn-bk:nth-child(8n+6) { --bk-farbe: #C2410C; --bk-tint: #FFF0E6; }
html[data-design="neu"] .dn-bk:nth-child(8n+7) { --bk-farbe: #B07800; --bk-tint: #FFF4D1; }
html[data-design="neu"] .dn-bk:nth-child(8n+8) { --bk-farbe: #DC2626; --bk-tint: #FEECEC; }
@media (prefers-reduced-motion: reduce) { html[data-design="neu"] .dn-bk, html[data-design="neu"] .dn-bk:hover { transition: none; transform: none; } }

/* „Auswertung" */
html[data-design="neu"] .dn-jahrwahl { display: inline-flex; align-items: center; gap: 6px; }
html[data-design="neu"] .dn-jahrwahl button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #E7E5E0; background: #FFFFFF; font-weight: 800; cursor: pointer; }
html[data-design="neu"] .dn-jahrwahl b { font-size: 15px; font-weight: 800; min-width: 48px; text-align: center; }
html[data-design="neu"] .dn-aw-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
html[data-design="neu"] .dn-aw-karte { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E7E5E0; border-top: 4px solid #FDB913; }
html[data-design="neu"] .dn-aw-karte b { font-size: 32px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html[data-design="neu"] .dn-aw-karte small { font-size: 12px; color: #4B5563; }
html[data-design="neu"] .dn-aw-karte.dunkel { background: #111827; color: #FFFFFF; border-color: #111827; }
html[data-design="neu"] .dn-aw-karte.dunkel small { color: #C9CED8; }
html[data-design="neu"] .dn-aw-karte.lila { border-top-color: #8B5CF6; }
html[data-design="neu"] .dn-aw-karte.lila .dn-eyebrow { color: #6D28D9; }
html[data-design="neu"] .dn-aw-karte.gruen { border-top-color: #10B981; }
html[data-design="neu"] .dn-aw-karte.gruen .dn-eyebrow { color: #047857; }
html[data-design="neu"] .dn-aw-karte.breit { margin-bottom: 16px; }
html[data-design="neu"] main.content .dn-h2 { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
html[data-design="neu"] .dn-balken { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; min-height: 270px; }
html[data-design="neu"] .dn-balken-spalte { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; border: 0; background: transparent; cursor: pointer; font: inherit; padding: 0; height: 100%; }
html[data-design="neu"] .dn-balken-spalte small { font-size: 11px; font-weight: 700; color: #4B5563; }
html[data-design="neu"] .dn-balken-spalte i { width: 100%; border-radius: 10px 10px 4px 4px; transform-origin: bottom; animation: dn-wachsen 1s cubic-bezier(.2, .8, .2, 1) both; transition: transform .2s; }
html[data-design="neu"] .dn-balken-spalte:hover i { transform: translateY(-4px); }
html[data-design="neu"] .dn-balken-spalte span { font-size: 12px; font-weight: 700; }
@keyframes dn-wachsen { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Einstellungen: Karte „Design der App" (in beiden Designs sichtbar) */
.dn-design-wahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.dn-design-wahl { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.dn-design-wahl b { font-size: 15px; }
.dn-design-wahl small { color: var(--muted); font-size: 13px; }
.dn-design-wahl.aktiv { border-color: var(--brand); background: var(--brand-soft); }

/* ---------- 7. Bewegungen (aus der Vorlage) ---------- */
@keyframes dn-hoch { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes dn-hero { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes dn-rein { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes dn-wippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes dn-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes dn-fuellen { from { width: 0; } }
@keyframes dn-pop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes dn-klingel { 0% { box-shadow: 0 16px 30px -12px rgba(17, 24, 39, .6), 0 0 0 0 rgba(245, 179, 1, .5); } 100% { box-shadow: 0 16px 30px -12px rgba(17, 24, 39, .6), 0 0 0 10px rgba(245, 179, 1, 0); } }
@keyframes dn-glanz { 0%, 70% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(220%) skewX(-20deg); } }
@keyframes dn-streifen { to { background-position: 28px 0; } }
@keyframes dn-puls { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes dn-puls-rot { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); } 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes dn-blob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.1); } 66% { transform: translate(-30px, 20px) scale(.95); } }
@keyframes dn-tippen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dn-welle { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-10deg); } }
@keyframes dn-zeichnen { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dn-marke { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes dn-logo { 0% { transform: translateY(-20px) scale(.6); opacity: 0; } 60% { transform: translateY(3px) scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes dn-kipp { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes dn-ringzug { from { stroke-dashoffset: 289; } }
@keyframes dn-gitter { to { background-position: 28px 28px; } }
@keyframes dn-navin { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes dn-dreh { to { transform: rotate(360deg); } }
@keyframes dn-hupf { 0%, 80%, 100% { transform: translateY(0) scale(1); } 86% { transform: translateY(-4px) scale(1.12); } 92% { transform: translateY(0) scale(.96); } }
@keyframes dn-leuchten { 0%, 100% { box-shadow: 0 8px 18px -10px rgba(253, 185, 19, .9); } 50% { box-shadow: 0 10px 26px -6px rgba(253, 185, 19, 1); } }
@keyframes dn-wisch { 0%, 65% { transform: translateX(-140%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
@media (prefers-reduced-motion: reduce) {
  html[data-design="neu"] *, html[data-design="neu"] *::before, html[data-design="neu"] *::after { animation: none !important; transition: none !important; }
}

/* Seitenleiste ruhig (16.10.2026, Wunsch: „hier bitte keine großen Bewegungen").
   Aus: Einfliegen der Punkte, pulsierendes Leuchten und Glanz-Wisch am aktiven Punkt, Kippen und
   Vergrößern der Symbole. Es bleibt nur ein weicher Farbwechsel beim Darüberfahren.
   Bewusst am Dateiende mit #nav, damit es alle früheren Regeln sicher überstimmt. */
html[data-design="neu"] #nav button.dn-nav, html[data-design="neu"] #nav button.dn-nav.active { animation: none !important; transform: none !important; }
html[data-design="neu"] #nav button.dn-nav.active::after { display: none !important; }
html[data-design="neu"] #nav button.dn-nav .ni, html[data-design="neu"] #nav button.dn-nav:hover .ni, html[data-design="neu"] #nav button.dn-nav.active .ni, html[data-design="neu"] #nav button.dn-nav svg { animation: none !important; transform: none !important; }
html[data-design="neu"] #nav button.dn-nav { transition: background-color .15s, color .15s; }

/* Zitat im Banner (16.10.2026): wechselt alle 9 s, aus den 1013 Sprüchen in /sprueche.json. */
html[data-design="neu"] .dn-hero-zitat { position: relative; z-index: 1; flex: 1 1 200px; max-width: 380px; align-self: center; margin: 0 0 30px; padding-left: 14px; border-left: 3px solid #FDB913; text-align: left; pointer-events: none; }
html[data-design="neu"] .dn-hero-zitat q { display: block; quotes: "„" "“"; font-size: clamp(15px, 1.35vw, 19px); font-weight: 700; font-style: italic; line-height: 1.45; color: #FFF6DA; text-wrap: balance; text-shadow: 0 2px 14px rgba(17, 24, 39, .55); opacity: 0; transform: translateY(6px); transition: opacity .7s ease, transform .7s ease; }
html[data-design="neu"] .dn-hero-zitat q.an { opacity: 1; transform: none; }
html[data-design="neu"] .dn-hero-zitat small { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FDB913; opacity: .85; }
@media (prefers-reduced-motion: reduce) { html[data-design="neu"] .dn-hero-zitat q { transition: none; transform: none; } }
/* Kunden-Board Vorschlag I: Ampel-Rand links muss die allgemeine Kartenregel überstimmen */
html[data-design="neu"] .kan-card.kan-gross { border-left: 4px solid var(--ampel, #E7E5E0); border-radius: 14px; }

/* ===== Startseite Fassung A „Feinschliff" (16.10.2026) ===== */
/* Banner: Lichtkranz hinter der Figur statt Fleck in der Mitte */
html[data-design="neu"] .dn-hero .dn-blob { display: none; }
html[data-design="neu"] .dn-hero-bildbox::before { content: ""; position: absolute; left: 50%; bottom: -60px; width: 420px; height: 420px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(253, 185, 19, .55) 0%, rgba(253, 185, 19, .22) 38%, rgba(253, 185, 19, 0) 68%); pointer-events: none; }
html[data-design="neu"] .dn-hero-bildbox .dn-hero-bild { position: relative; z-index: 1; }
/* Hinweis „Rechnungen fehlen": Bernstein statt Alarm-Rot, schmaler */
html[data-design="neu"] .portal-erinnerung.dn-fehlt { background: #FFFBEB !important; border: 1px solid #FCD34D !important; box-shadow: none !important; color: #92400E !important; padding: 8px 12px !important; border-radius: 14px; }
html[data-design="neu"] .portal-erinnerung.dn-fehlt > b { color: #92400E !important; font-size: 13.5px; }
html[data-design="neu"] .portal-erinnerung.dn-fehlt > .ico { background: #F59E0B !important; animation: none; }
html[data-design="neu"] .portal-erinnerung.dn-fehlt .portal-erinnerung-liste .btn.secondary { background: #FFFFFF !important; border: 1px solid #FDE68A !important; color: #78350F !important; }
html[data-design="neu"] .portal-erinnerung.dn-fehlt .hs-mehr, html[data-design="neu"] .portal-erinnerung.dn-fehlt .btn:not(.secondary) { background: #F59E0B !important; border-color: #F59E0B !important; color: #FFFFFF !important; }
/* Kennzahlen flach: Symbol links, Zahl groß */
html[data-design="neu"] .dn-kpi.dn-kpi-flach { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; border-top: 3px solid var(--kpi-akzent, #FDB913); }
html[data-design="neu"] .dn-kpi-flach .dn-kpi-ic { width: 48px; height: 48px; flex: none; }
html[data-design="neu"] .dn-kpi-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
html[data-design="neu"] .dn-kpi-flach .dn-kpi-label { padding-top: 0; font-size: 13px; color: #4B5563; }
html[data-design="neu"] .dn-kpi-flach .dn-kpi-wert { font-size: 28px; white-space: nowrap; }
html[data-design="neu"] .dn-kpi-hinweis { font-size: 12px; color: #6B7280; }
html[data-design="neu"] .dn-kpi-flach .dn-pfeil-rund { align-self: flex-end; flex: none; }
/* Frist: rechts die nächsten Fristen */
html[data-design="neu"] .dn-frist-danach { display: flex; flex-direction: column; gap: 6px; margin-left: auto; padding-left: 18px; border-left: 1px solid #2A3242; min-width: 0; max-width: 42%; font-size: 12.5px; color: #E5E7EB; }
html[data-design="neu"] .dn-frist-danach small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: #9CA3AF; }
html[data-design="neu"] .dn-frist-danach > span { display: flex; gap: 8px; min-width: 0; }
html[data-design="neu"] .dn-frist-danach b { color: #FDB913; font-weight: 800; flex: none; }
html[data-design="neu"] .dn-frist-danach > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Projekte: benannte Schritte, fehlende Adresse */
html[data-design="neu"] .dn-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
html[data-design="neu"] .dn-schritte > span { padding: 5px 2px; border-radius: 7px; background: #F3F4F6; color: #9CA3AF; font-size: 11px; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-schritte > span.ok { background: #DCFCE7; color: #166534; }
html[data-design="neu"] .dn-schritte > span.jetzt { background: #FDB913; color: #111827; font-weight: 800; }
html[data-design="neu"] .dn-projekt-inhalt small.dn-adresse-fehlt { color: #B45309; font-weight: 600; }
/* Wetter + neueste E-Mails */
html[data-design="neu"] .dn-wetter-mails { align-items: stretch; }
html[data-design="neu"] .dn-wetter, html[data-design="neu"] .dn-mailkarte { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid #E7E5E0; background: #FFFFFF; cursor: default; }
html[data-design="neu"] .dn-wetter:hover, html[data-design="neu"] .dn-mailkarte:hover { transform: none; box-shadow: none; }
html[data-design="neu"] .dn-wetter-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
html[data-design="neu"] .dn-wetter-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
html[data-design="neu"] .dn-wtag { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px; border-radius: 12px; background: #F8F7F3; text-align: center; }
html[data-design="neu"] .dn-wtag small { font-size: 11.5px; font-weight: 800; color: #4B5563; }
html[data-design="neu"] .dn-wtag b { font-size: 15px; font-weight: 800; color: #111827; line-height: 1; }
html[data-design="neu"] .dn-wtag-min { font-size: 11.5px; color: #9CA3AF; }
html[data-design="neu"] .dn-wtag-regen { font-size: 10.5px; font-weight: 700; color: #047857; }
html[data-design="neu"] .dn-wtag.schlecht { background: #EFF6FF; box-shadow: inset 0 0 0 1px #BFDBFE; }
html[data-design="neu"] .dn-wtag.schlecht .dn-wtag-regen { color: #B91C1C; }
html[data-design="neu"] .dn-wetter-hinweis { padding: 8px 12px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FCD34D; color: #92400E; font-size: 12.5px; font-weight: 700; }
html[data-design="neu"] .dn-mails { display: flex; flex-direction: column; gap: 2px; }
html[data-design="neu"] .dn-mail { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-radius: 10px; background: transparent; font: inherit; text-align: left; color: #111827; cursor: pointer; transition: background-color .12s; }
html[data-design="neu"] .dn-mail + .dn-mail { border-top: 1px solid #F0EEE9; border-radius: 0; }
html[data-design="neu"] .dn-mail:hover { background: #FFFBEF; border-radius: 10px; }
html[data-design="neu"] .dn-avatar.klein { width: 32px; height: 32px; font-size: 12px; flex: none; }
html[data-design="neu"] .dn-mail-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
html[data-design="neu"] .dn-mail-text b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-mail-text span { font-size: 12.5px; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-mail.neu .dn-mail-text b { font-weight: 800; }
html[data-design="neu"] .dn-mail.neu .dn-mail-text span { color: #111827; }
html[data-design="neu"] .dn-mail.neu::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2563EB; flex: none; margin-right: -4px; }
html[data-design="neu"] .dn-mail-zeit { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11.5px; color: #9CA3AF; font-weight: 600; }
@media (max-width: 720px) {
  html[data-design="neu"] .dn-wetter-tage { grid-template-columns: repeat(7, minmax(44px, 1fr)); overflow-x: auto; }
  html[data-design="neu"] .dn-frist-danach { display: none; }
}

/* Auswertung erweitert (17.10.2026) */
html[data-design="neu"] .dn-aw-vier { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
html[data-design="neu"] .dn-aw-karte.blau { border-top-color: #3B82F6; }
html[data-design="neu"] .dn-aw-karte.blau .dn-eyebrow { color: #1D4ED8; }
html[data-design="neu"] .dn-trend { align-self: flex-start; display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
html[data-design="neu"] .dn-trend.hoch { background: rgba(34, 197, 94, .18); color: #16A34A; }
html[data-design="neu"] .dn-trend.runter { background: rgba(239, 68, 68, .16); color: #DC2626; }
html[data-design="neu"] .dn-aw-karte.dunkel .dn-trend.hoch { color: #86EFAC; }
html[data-design="neu"] .dn-aw-karte.dunkel .dn-trend.runter { color: #FCA5A5; }
html[data-design="neu"] .dn-aw-zwei { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin: 14px 0; }
@media (max-width: 1000px) { html[data-design="neu"] .dn-aw-zwei { grid-template-columns: 1fr; } }
html[data-design="neu"] .dn-balken-flach { min-height: 220px; }
html[data-design="neu"] .dn-balken-spalte.zukunft span, html[data-design="neu"] .dn-balken-spalte.zukunft small { color: #C4C9D2; }
html[data-design="neu"] .dn-rang { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
html[data-design="neu"] .dn-rang-nr { flex: none; width: 24px; height: 24px; border-radius: 8px; background: #111827; color: #FDB913; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
html[data-design="neu"] .dn-rang:nth-child(n+5) .dn-rang-nr { background: #F3F4F6; color: #4B5563; }
html[data-design="neu"] .dn-rang-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html[data-design="neu"] .dn-rang-text > span:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
html[data-design="neu"] .dn-rang-text b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-rang-text em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
html[data-design="neu"] .dn-rang-spur { height: 6px; border-radius: 3px; background: #F3F4F6; overflow: hidden; }
html[data-design="neu"] .dn-rang-spur i { display: block; height: 100%; border-radius: 3px; background: #FDB913; }
html[data-design="neu"] .dn-aw-zeile { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; width: 100%; padding: 10px 6px; border: 0; border-top: 1px solid #F0EEE9; background: none; font: inherit; text-align: left; color: #111827; cursor: pointer; border-radius: 8px; }
html[data-design="neu"] .dn-aw-zeile:hover { background: #FFFBEF; }
html[data-design="neu"] .dn-aw-datum { font-size: 12.5px; font-weight: 700; color: #6B7280; font-variant-numeric: tabular-nums; }
html[data-design="neu"] .dn-aw-text { display: flex; flex-direction: column; min-width: 0; }
html[data-design="neu"] .dn-aw-text b { font-size: 13.5px; font-weight: 700; }
html[data-design="neu"] .dn-aw-text small { font-size: 12px; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-aw-status { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #F3F4F6; color: #4B5563; white-space: nowrap; }
html[data-design="neu"] .dn-aw-status.gut { background: #DCFCE7; color: #166534; }
html[data-design="neu"] .dn-aw-status.warn { background: #FEF3C7; color: #92400E; }
html[data-design="neu"] .dn-aw-status.schlecht { background: #FEE2E2; color: #991B1B; }
html[data-design="neu"] .dn-aw-betrag { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Kalkulator und Jarvis blenden das Menü aus (Kalkulator: Schublade, Jarvis: ganz). Das Raster hielt die
   248-px-Spalte trotzdem frei — am Tablet quer stand der Inhalt dadurch weit rechts, links leer (17.10.2026). */
@media (min-width: 1025px) {
  html[data-design="neu"] body.view-kalkulator #appView:not(.hidden),
  html[data-design="neu"] body.view-jarvis #appView:not(.hidden) { grid-template-columns: minmax(0, 1fr); }
  html[data-design="neu"] body.view-kalkulator #appView > header.topbar,
  html[data-design="neu"] body.view-kalkulator main.content,
  html[data-design="neu"] body.view-jarvis main.content { grid-column: 1; }
}

/* 17.10.2026: Am Handy/Tablet lag das Seitenende hinter der schwebenden Leiste — eine Regel des neuen Designs setzte
   den Abstand unten auf 40 px, die Leiste braucht aber rund 90. Kalkulator, Jarvis und Postfach haben eigene Maße. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  html[data-design="neu"] body:not(.view-kalkulator):not(.view-jarvis):not(.view-mailbox) main.content { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
}
/* 17.10.2026 Fehler aus v568: Kalkulator hat EINE Spalte — das Menü muss dort als Schublade über der Seite liegen
   (wie in styles.css gedacht). Das Raster des neuen Designs machte es „sticky" in Spalte 1 → mit ☰ geöffnet
   nahm es die volle Breite ein und schob den Kalkulator weg. */
@media (min-width: 1025px) {
  html[data-design="neu"] body.view-kalkulator nav.side { position: fixed; left: 0; top: 0; width: 248px; height: 100vh; grid-column: auto; grid-row: auto; z-index: 56; }
}

/* Kalender verfeinert (17.10.2026, „ähnlich wie das, was ich habe" + „zu klein"): gleicher Aufbau, größere Tage,
   lesbare Termine (getönte Fläche + Farbstreifen, Uhrzeit fett, zweizeilig), heute golden, Wochenende getönt. */
@media (min-width: 701px) {
  html[data-design="neu"] .cal-kacheln .kgrid-row { gap: 8px; }
  html[data-design="neu"] .cal-kacheln .khead { gap: 8px; }
  html[data-design="neu"] .kweek + .kweek { margin-top: 8px; }
  html[data-design="neu"] .kday { min-height: 136px; padding: 8px 8px 10px; border: 1px solid #E7E4DC; border-radius: 13px; gap: 5px; }
  html[data-design="neu"] .kday.out { min-height: 0; border: 0; background: transparent; }
  html[data-design="neu"] .kday.we { background: #FAF8F3; }
  html[data-design="neu"] .kday.vorbei { background: #FCFCFB; }
  html[data-design="neu"] .kday.vorbei .kpill { opacity: .6; }
  html[data-design="neu"] .kday:hover { border-color: #FDB913; }
  html[data-design="neu"] .kday.today { border: 2px solid #FDB913; background: #FFFDF6; box-shadow: 0 8px 20px rgba(253, 185, 19, .18); }
  html[data-design="neu"] .kday-kopf { display: flex; align-items: center; gap: 6px; }
  html[data-design="neu"] .kday-num { min-width: 30px; height: 30px; margin: 0; font-size: 15px; font-weight: 800; }
  html[data-design="neu"] .kday.today .kday-num { background: #FDB913; color: #111827; }
  html[data-design="neu"] .kday-heute { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #B45309; }
  html[data-design="neu"] .kpill, html[data-design="neu"] .kbar { background: color-mix(in srgb, var(--c, #2f6fed) 14%, #FFFFFF); color: color-mix(in srgb, var(--c, #2f6fed) 60%, #111827); border-left: 3px solid var(--c, #2f6fed); border-radius: 7px; font-size: 12.5px; box-shadow: none; }
  html[data-design="neu"] .kpill-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 600; line-height: 1.3; }
  html[data-design="neu"] .kbar .kpill-title { -webkit-line-clamp: 1; }
  html[data-design="neu"] .kpill-zeit { font-weight: 800; }
  html[data-design="neu"] .kpill .kpill-label { padding: 4px 7px; }
}
@media (max-width: 700px) {
  html[data-design="neu"] .kday-heute { display: none; }
}
/* 19.10.2026 Kalender: Die Zieh-Griffe ‹ › nahmen jedem Termin im Monat 26 px Breite weg — am Tablet blieb nur „07…" stehen.
   Griffe liegen jetzt unsichtbar am Rand des Termins und erscheinen erst beim Überfahren mit der Maus (Ziehen geht weiter). */
@media (min-width: 701px) {
  html[data-design="neu"] .kday .kpill { position: relative; }
  html[data-design="neu"] .kday .kpill-grip { position: absolute; top: 0; bottom: 0; z-index: 1; width: 12px; opacity: 0; }
  html[data-design="neu"] .kday .kpill-grip-l { left: 0; border-radius: 7px 0 0 7px; }
  html[data-design="neu"] .kday .kpill-grip-r { right: 0; border-radius: 0 7px 7px 0; }
  html[data-design="neu"] .kday .kpill:hover .kpill-grip { opacity: .85; }
  html[data-design="neu"] .kday .kpill-title { -webkit-line-clamp: 3; }   /* Uhrzeit + Titel: „07:00 · Baustelle · Treppenhaus" statt „Baustelle…" */
}
@media (min-width: 701px) and (max-width: 1100px) {
  html[data-design="neu"] .kday .kpill { font-size: 11.5px; }
  html[data-design="neu"] .kday .kpill .kpill-label { padding: 4px 5px; }
  html[data-design="neu"] .kday .kpill-ico { display: none; }
}
/* Handy-Terminliste: Titel zweizeilig statt „Besprechung Ne…" */
@media (max-width: 700px) {
  html[data-design="neu"] .cal-liste-zeit { flex-basis: 52px; }
  html[data-design="neu"] .cal-liste-text b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
  html[data-design="neu"] .cal-liste-wann { padding: 2px 8px; font-size: 11px; }
}
html[data-design="neu"] .cal-liste-tag { padding: 16px 6px 8px; font-size: 12.5px; color: #111827; }
html[data-design="neu"] .cal-liste-tag.heute { color: #B45309; }
html[data-design="neu"] .cal-liste-zeile { padding: 12px 8px; font-size: 14px; border-radius: 10px; }
html[data-design="neu"] .cal-liste-zeile:hover { background: #FFFBEF; }
html[data-design="neu"] .cal-liste-wann { margin-left: auto; flex: none; padding: 2px 10px; border-radius: 999px; background: #F3F4F6; font-size: 12px; font-weight: 700; color: #4B5563; white-space: nowrap; }
html[data-design="neu"] .cal-liste-zeile.heute .cal-liste-wann { background: #FDB913; color: #111827; }
/* 17.10.2026 „zu groß, mittig und kleiner": Termin-Fenster am PC/Tablet 640 px breit und mittig. Eine alte
   Handy-Regel (.modal { max-width: calc(100vw - 20px) } in styles.css) hebt die 480-px-Grenze überall auf. */
@media (min-width: 701px) {
  html[data-design="neu"] .modal:has(.termin-form) { width: 640px; max-width: calc(100vw - 40px); padding: 22px 26px; }
  html[data-design="neu"] .modal:has(.termin-form)::before { margin: -22px -26px 18px; }
}

/* Projektkarten ruhiger + 5 statt 3 (17.10.2026: „stört mich … nicht so auffällig“, „lieber 5 Projekte statt 3“) */
html[data-design="neu"] .dn-projekte { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }   /* auto-fit: 5 Karten füllen die Reihe, keine leere Spalte */
html[data-design="neu"] .dn-projekt-kopf { height: 96px; }
html[data-design="neu"] .dn-projekt-marke { animation: none; }
html[data-design="neu"] .dn-projekt-szene { background: linear-gradient(color-mix(in srgb, var(--pf, #FDB913) 14%, #FFFFFF), color-mix(in srgb, var(--pf, #FDB913) 5%, #FFFFFF)); }
html[data-design="neu"] .dn-sz-ruhig { color: color-mix(in srgb, var(--pf, #FDB913) 55%, #1F2937); opacity: .5; padding: 0 10px 0 0; }
html[data-design="neu"] .dn-projekt:hover .dn-projekt-szene svg { transform: none; }
html[data-design="neu"] .dn-projekt:hover .dn-sz-ruhig { opacity: .7; }
html[data-design="neu"] .dn-sz-skizze { stroke-dasharray: 260; animation: dnSzSkizze 9s ease-in-out infinite; }
html[data-design="neu"] .dn-sz-stift2 { animation: dnSzStift2 9s ease-in-out infinite; }
html[data-design="neu"] .dn-sz-pendel { transform-origin: 50% 0; transform-box: fill-box; animation: dnSzPendel 6s ease-in-out infinite alternate; }
html[data-design="neu"] .dn-sz-ein { animation: dnSzEin 1.2s ease-out both; }
@keyframes dnSzSkizze { 0% { stroke-dashoffset: 260; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes dnSzStift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4px, 3px); } }
@keyframes dnSzPendel { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes dnSzEin { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-design="neu"] .dn-sz-skizze, html[data-design="neu"] .dn-sz-stift2, html[data-design="neu"] .dn-sz-pendel, html[data-design="neu"] .dn-sz-ein { animation: none !important; stroke-dasharray: none; } }

/* Projekt-Szenen: freundliche Illustration, sanft bewegt (17.10.2026, „bitte schönere Bilder mit Animationen“) */
html[data-design="neu"] .dn-projekt-szene { background: linear-gradient(color-mix(in srgb, var(--pf, #FDB913) 22%, #FFFFFF), color-mix(in srgb, var(--pf, #FDB913) 6%, #FFFFFF)); }
html[data-design="neu"] .dn-sz2 * { transform-box: fill-box; }
html[data-design="neu"] .dn-sz2-sonne { transform-origin: center; animation: dnSz2Atmen 7s ease-in-out infinite; }
html[data-design="neu"] .dn-sz2-wolke { animation: dnSz2Wolke 48s linear infinite; }
html[data-design="neu"] .dn-sz2-wolke.dn-sz2-spaet { animation-duration: 64s; animation-delay: -30s; }
html[data-design="neu"] .dn-sz2-heben { animation: dnSz2Heben 6s ease-in-out infinite alternate; }
html[data-design="neu"] .dn-sz2-rauch { transform-origin: 0 100%; animation: dnSz2Rauch 5s ease-in-out infinite; }
html[data-design="neu"] .dn-sz2-baum { transform-origin: 50% 100%; animation: dnSz2Baum 6s ease-in-out infinite alternate; }
html[data-design="neu"] .dn-sz2-haken { transform-origin: center; animation: dnSz2Atmen 5s ease-in-out infinite; }
html[data-design="neu"] .dn-sz2-lampe { animation: dnSz2Glimmen 3s ease-in-out infinite; }
html[data-design="neu"] .dn-sz2-check { stroke-dasharray: 14; stroke-dashoffset: 14; animation: dnSz2Haken 4.8s ease-in-out infinite; }
html[data-design="neu"] .dn-sz2-stift { animation: dnSz2Stift 4.8s ease-in-out infinite; }
@keyframes dnSz2Atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes dnSz2Wolke { from { transform: translateX(-140px); } to { transform: translateX(360px); } }
@keyframes dnSz2Heben { from { transform: translateY(0); } to { transform: translateY(14px); } }
@keyframes dnSz2Rauch { 0% { transform: translateY(4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
@keyframes dnSz2Baum { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes dnSz2Glimmen { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes dnSz2Haken { 0%, 10% { stroke-dashoffset: 14; } 30%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 14; } }
@keyframes dnSz2Stift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-80px, -2px); } 66% { transform: translate(-80px, 10px); } }
@media (prefers-reduced-motion: reduce) { html[data-design="neu"] .dn-sz2 * { animation: none !important; } html[data-design="neu"] .dn-sz2-check { stroke-dashoffset: 0; } }

/* Projektkarten: Higgsfield-Bild + Endlosanimation (17.10.2026) */
html[data-design="neu"] .dn-projekt-szene { background: #FDF3D7; }
html[data-design="neu"] .dn-pb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 62%; display: block; pointer-events: none; }
html[data-design="neu"] .dn-projekt:hover .dn-pb { transform: scale(1.03); transition: transform .8s ease; }
@media (prefers-reduced-motion: reduce) { html[data-design="neu"] .dn-pb-video { display: none; } }
html[data-design="neu"] .dn-projekt-kopf .dn-projekt-marke { right: auto; left: 10px; }   /* rechts liegt das Motiv des Bildes */
html[data-design="neu"] .dn-pb-zoom { animation: dnPbZoom 24s ease-in-out infinite alternate; transform-origin: 78% 62%; }   /* Gewerk-Bilder: ganz langsamer Zoom, bis es Videos gibt */
@keyframes dnPbZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { html[data-design="neu"] .dn-pb-zoom { animation: none; } }


/* 17.10.2026: Symbole sitzen genau in der Mitte ihrer Kreise (Suche, Chat, Post). Vorher drückte der
   Innenabstand (6px 9px) bei nur 28 px Kreisgröße das Symbol 3–4 px nach unten. */
html[data-design="neu"] header.topbar .h-kopf-knopf { padding: 0 !important; display: grid !important; place-items: center; line-height: 0; }
html[data-design="neu"] header.topbar .h-kopf-knopf > .ico { display: block; width: auto; height: auto; margin: 0; line-height: 0; }
html[data-design="neu"] header.topbar .h-kopf-knopf svg { display: block; }

/* =====================================================================
   SCHNELL (18.10.2026, „die App soll leicht anklickbar sein und schnell reagieren")
   Gemessen: Inhalt steht nach 7–60 ms da — aber jede Seite schob sich danach 0,5 s herein,
   die Startseite durch gestaffelte Verzögerungen sogar über 1 s, und das Menü flog bei JEDEM
   Seitenwechsel 0,55 s neu herein. Das fühlte sich träge an. Jetzt: 0,12 s Einblenden, keine
   Verzögerungen. Dauer-Animationen (Schweben, Leuchten) bleiben, sie halten nichts auf.
   ===================================================================== */
@keyframes dn-blitz { from { opacity: .35; } to { opacity: 1; } }
html[data-design="neu"] main.content > * { animation: dn-blitz .12s ease-out backwards; }
html[data-design="neu"] .dn-seite { animation: dn-blitz .12s ease-out both; }
html[data-design="neu"] .dn-hoch > *,
html[data-design="neu"] .dn-hoch > *:nth-child(n) { animation: dn-blitz .12s ease-out both; animation-delay: 0s; }
html[data-design="neu"] .dn-hoch > .dn-float1 { animation: dn-blitz .12s ease-out both, dn-schweben 4s ease-in-out .6s infinite; }
html[data-design="neu"] .dn-hoch > .dn-float2 { animation: dn-blitz .12s ease-out both, dn-schweben 4s ease-in-out 1.6s infinite; }
html[data-design="neu"] .dn-hoch > .dn-float3 { animation: dn-blitz .12s ease-out both, dn-schweben 4s ease-in-out 2.6s infinite; }
html[data-design="neu"] nav.side button { animation: none; transition: background-color .1s; }
html[data-design="neu"] nav.side button.active:not(.nav-gruppe):not(.nav-unterpunkt) { animation: dn-leuchten 2.6s ease-in-out 1s infinite; }
html[data-design="neu"] .dn-h-schritte i, html[data-design="neu"] .dn-aufg-spur i, html[data-design="neu"] .dn-fuell { animation-duration: .35s; animation-delay: 0s; }
html[data-design="neu"] .dn-termin-punkt { animation-duration: .2s; }
@media (hover: none) {
  /* Am Handy bleibt :hover nach dem Tippen „hängen" — kein Wegrutschen der Menüpunkte */
  html[data-design="neu"] nav.side button:hover { transform: none; }
}
/* Balken und Logo: wachsen schnell statt fast eine Sekunde lang (18.10.2026) */
html[data-design="neu"] .dn-h-fin-balken, html[data-design="neu"] .dn-h-mini i, html[data-design="neu"] .dn-balken-spalte i { animation-duration: .3s !important; animation-delay: 0s !important; }
html[data-design="neu"] .dn-firma-logo { animation-duration: .25s; }

/* ---------- Rechtstexte auf der Anmeldeseite ---------- */
html[data-design="neu"] .login-recht { margin-top: 14px; font-size: 12.5px; text-align: center; color: #6B7280; }
html[data-design="neu"] .login-recht a { color: #6B7280; }

/* ---------- Testphase: Hinweis und Sperrseite ---------- */
html[data-design="neu"] .test-hinweis { position: fixed; z-index: 900; top: calc(var(--topbar-h, 60px) + 10px); right: 18px; display: flex; gap: 10px; align-items: center;
  background: #111827; color: #fff; border-radius: 999px; padding: 7px 8px 7px 16px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 18px rgba(17,24,39,.18); }
html[data-design="neu"] .test-hinweis.bald { background: #B45309; }
html[data-design="neu"] .test-hinweis button { border: 0; border-radius: 999px; background: #FDB913; color: #111827; font-weight: 700; padding: 6px 12px; cursor: pointer; }
html[data-design="neu"] .test-sperre { position: fixed; inset: 0; z-index: 2000; background: rgba(246,246,243,.97); display: grid; place-items: center; padding: 16px; overflow: auto; }
html[data-design="neu"] .test-sperre-kasten { max-width: 760px; width: 100%; background: #fff; border-radius: 18px; padding: 26px 24px; box-shadow: 0 10px 40px rgba(17,24,39,.12); }
html[data-design="neu"] .test-sperre-kasten h2 { margin-top: 0; }
html[data-design="neu"] .test-sperre-kasten > .btn { margin-top: 10px; }

/* ---------- Tarif (Basis / Pro / Max) — Einstellungen und Mitarbeiterliste ---------- */
html[data-design="neu"] .tarif-zeile { display: inline-block; font-size: 13px; font-weight: 600; color: #047857; background: #E3F5EC; border-radius: 999px; padding: 3px 10px; }
html[data-design="neu"] .tarif-zeile.voll { color: #8A5A00; background: #FFF4D1; }
html[data-design="neu"] .tarif-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
html[data-design="neu"] .tarif-box { border: 1px solid #E5E7EB; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
html[data-design="neu"] .tarif-box.aktiv { border: 2px solid #FDB913; background: #FFFBEF; }
html[data-design="neu"] .tarif-box b { font-size: 16px; }
html[data-design="neu"] .tarif-preis { font-size: 24px; font-weight: 800; color: #111827; }
html[data-design="neu"] .tarif-preis small { font-size: 12px; font-weight: 500; color: #4B5563; }
html[data-design="neu"] .tarif-marke { align-self: flex-start; font-size: 12px; font-weight: 700; color: #8A5A00; background: #FFF4D1; border-radius: 999px; padding: 2px 10px; }
html[data-design="neu"] .tarif-box .btn { align-self: flex-start; }

/* 18.10.2026: Gewerke-Auswahl (Unternehmen, erster Login) */
html[data-design="neu"] .gw-wahl{display:flex;flex-direction:column;gap:6px}
html[data-design="neu"] .gw-gruppe{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6B7280);margin-top:6px}
html[data-design="neu"] .gw-reihe{display:flex;flex-wrap:wrap;gap:8px}
html[data-design="neu"] .gw-kachel{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line,#E5E7EB);background:var(--card,#fff);color:inherit;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
html[data-design="neu"] .gw-kachel .gw-haken{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line,#CBD5E1);font-size:11px;color:transparent}
html[data-design="neu"] .gw-kachel.an{border-color:#2563EB;background:color-mix(in srgb,#2563EB 9%,transparent)}
html[data-design="neu"] .gw-kachel.an .gw-haken{background:#2563EB;border-color:#2563EB;color:#fff}

/* 19.10.2026: Logo „Falax Handwerk“ unten in der Seitenleiste (statt Leitsatz) */
html[data-design="neu"] .dn-leitsatz-logo { padding: 18px 6px 6px; align-items: center; }
html[data-design="neu"] .dn-leitsatz-logo img { display: block; width: 100%; max-width: 132px; height: auto; opacity: .92; }
@media (prefers-reduced-motion: reduce) { html[data-design="neu"] .dn-leitsatz-logo img { animation: none; } }

/* 19.10.2026: Hauptlogo „Falax Handwerk" auf der Anmeldung (breites Logo statt quadratischem Symbol) */
html[data-design="neu"] .login-logo.login-logo-fh { width: 230px; max-width: 80%; height: auto; border-radius: 0; box-shadow: none; filter: none; margin: 4px auto 18px; }

/* 19.10.2026: Papier-Designs (Einstellungen → Beleg-Layout) */
html[data-design="neu"] .papier-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
html[data-design="neu"] .papier-karte{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:8px 8px 10px;cursor:pointer;color:var(--ink);font:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
html[data-design="neu"] .papier-karte:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(17,24,39,.45)}
html[data-design="neu"] .papier-karte img{width:100%;aspect-ratio:210/297;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#fff}
html[data-design="neu"] .papier-karte b{font-size:14px;margin-top:4px}
html[data-design="neu"] .papier-karte small{font-size:12px;color:var(--muted);line-height:1.35}
html[data-design="neu"] .papier-karte.an{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(253,185,19,.25)}
html[data-design="neu"] .papier-wie{width:100%;aspect-ratio:210/297;border-radius:10px;border:1px dashed var(--line);display:grid;place-items:center;color:var(--brand-text);background:var(--canvas)}
@media (max-width:600px){html[data-design="neu"] .papier-raster{grid-template-columns:repeat(2,1fr)}}

/* 19.10.2026: Steuerberater-Zugang (Einstellungen) */
html[data-design="neu"] .stb-liste{display:flex;flex-direction:column;margin:6px 0 10px}
html[data-design="neu"] .stb-zeile{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
html[data-design="neu"] .stb-sym{width:38px;height:38px;border-radius:12px;background:var(--brand-soft);color:var(--brand-text);display:grid;place-items:center;flex:none}
html[data-design="neu"] .stb-mitte{flex:1 1 200px;min-width:0;display:flex;flex-direction:column}
html[data-design="neu"] .stb-mitte small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
html[data-design="neu"] .stb-marke{font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap}
html[data-design="neu"] .stb-marke.gruen{background:#ECFDF5;color:var(--ok)}
html[data-design="neu"] .stb-marke.gelb{background:var(--brand-soft);color:var(--brand-text)}
html[data-design="neu"] .stb-marke.grau{background:#F3F4F6;color:var(--muted)}
html[data-design="neu"] .stb-knoepfe{display:flex;gap:6px;flex-wrap:wrap}

/* 19.10.2026: Kassenbuch */
html[data-design="neu"] .kb-zahlen{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;margin-bottom:16px}
html[data-design="neu"] .kb-zahlen>div{background:var(--canvas);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
html[data-design="neu"] .kb-zahlen small{font-size:12px;font-weight:700;color:var(--muted)}
html[data-design="neu"] .kb-zahlen b{font-size:18px}
html[data-design="neu"] .kb-zahlen .kb-bestand{background:var(--navy);border-color:var(--navy);color:#fff}
html[data-design="neu"] .kb-zahlen .kb-bestand small{color:var(--sidebar-ink)}
html[data-design="neu"] .kb-zahlen .kb-bestand b{font-size:26px;color:var(--brand)}
html[data-design="neu"] .kb-zahlen .kb-bestand.minus b{color:#FCA5A5}
html[data-design="neu"] .kb-erfassen{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:6px}
html[data-design="neu"] .kb-erfassen h3,html[data-design="neu"] .kb-kopf h3{margin:0 0 10px}
html[data-design="neu"] .kb-arten{display:inline-flex;background:var(--canvas);border-radius:999px;padding:4px;gap:4px;margin-bottom:10px}
html[data-design="neu"] .kb-art{border:0;background:transparent;border-radius:999px;padding:8px 16px;font:inherit;font-weight:800;cursor:pointer;color:var(--muted)}
html[data-design="neu"] .kb-art.an.einnahme{background:#ECFDF5;color:var(--ok)}
html[data-design="neu"] .kb-art.an.ausgabe{background:var(--warn-bg);color:var(--warn)}
html[data-design="neu"] .kb-kopf{display:flex;justify-content:space-between;align-items:center;margin:18px 0 6px;gap:10px;flex-wrap:wrap}
html[data-design="neu"] .kb-tabelle{min-width:640px}
html[data-design="neu"] .kb-datum{white-space:nowrap;color:var(--muted)}
html[data-design="neu"] .kb-text{font-weight:600}
html[data-design="neu"] .kb-kat{color:var(--muted);font-size:12.5px}
html[data-design="neu"] .kb-betrag{text-align:right;white-space:nowrap;font-weight:700}
html[data-design="neu"] .kb-plus{color:var(--ok)}
html[data-design="neu"] .kb-minus{color:var(--warn)}
html[data-design="neu"] .kb-storniert td{opacity:.55;text-decoration:line-through}
html[data-design="neu"] .kb-storniert td:last-child{text-decoration:none}
html[data-design="neu"] .kb-marke{font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 10px;background:var(--brand-soft);color:var(--brand-text)}
html[data-design="neu"] .kb-marke.grau{background:#F3F4F6;color:var(--muted)}
@media (max-width:600px){html[data-design="neu"] .kb-zahlen{grid-template-columns:1fr 1fr}html[data-design="neu"] .kb-zahlen .kb-bestand{grid-column:1/-1}}

/* 19.10.2026: Hilfe-Assistent */
html[data-design="neu"] .hilfe-box{display:flex;flex-direction:column;min-width:min(560px,86vw)}
html[data-design="neu"] .hilfe-log{display:flex;flex-direction:column;gap:8px;max-height:min(52vh,460px);min-height:180px;overflow-y:auto;padding:4px 2px 8px}
html[data-design="neu"] .hilfe-blase{border-radius:16px;padding:11px 14px;max-width:88%;line-height:1.5;font-size:14.5px}
html[data-design="neu"] .hilfe-blase p{margin:4px 0 0}
html[data-design="neu"] .hilfe-blase b{display:block;font-size:15px}
html[data-design="neu"] .hilfe-blase .btn{margin-top:10px;display:inline-flex;align-items:center;gap:6px}
html[data-design="neu"] .hilfe-blase.du{align-self:flex-end;background:var(--brand-soft);color:var(--ink);font-weight:600}
html[data-design="neu"] .hilfe-blase.ki{align-self:flex-start;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
html[data-design="neu"] .hilfe-tippt{letter-spacing:3px;font-weight:800;color:var(--muted)}
html[data-design="neu"] .hilfe-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 10px}
html[data-design="neu"] .hilfe-chips-titel{font-size:12px;font-weight:700;color:var(--muted);margin-right:2px}
html[data-design="neu"] .hilfe-chip{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:6px 11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
html[data-design="neu"] .hilfe-chip:hover{border-color:var(--brand);background:var(--brand-soft)}
html[data-design="neu"] .hilfe-eingabe{display:flex;gap:8px}
html[data-design="neu"] .hilfe-eingabe input{flex:1;min-width:0}

/* 19.10.2026: Vertrag kündigen */
html[data-design="neu"] .kuend-box{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
html[data-design="neu"] .kuend-kopf{display:flex;flex-direction:column;gap:2px}
html[data-design="neu"] .kuend-stand{display:flex;flex-direction:column;gap:2px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:14px;padding:10px 14px;flex:1 1 280px}
html[data-design="neu"] .kuend-stand b{color:var(--warn)}

/* 19.10.2026: Lösch-Nachweis im Protokoll */
html[data-design="neu"] .nw-box{background:var(--canvas);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:6px 0 14px}
html[data-design="neu"] .nw-box summary{cursor:pointer;font-weight:800;display:flex;align-items:center;gap:6px}
html[data-design="neu"] .nw-liste{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto}
html[data-design="neu"] .nw-liste li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13.5px}
html[data-design="neu"] .nw-liste small{display:block;color:var(--muted);margin-top:2px}

/* 19.10.2026: Zusatz-Funktionen je Tarif (Social Media nur Max) */
html[data-design="neu"] .tarif-extra{margin-top:4px;font-size:12.5px;font-weight:700;color:var(--brand-text)}

/* 19.10.2026: Automatisches Mahnwesen */
html[data-design="neu"] .ma-box{min-width:min(640px,88vw)}
html[data-design="neu"] .ma-schalter{display:flex;align-items:center;gap:8px;font-weight:800;margin:6px 0 12px;padding:10px 12px;background:var(--brand-soft);border-radius:12px}
html[data-design="neu"] .ma-liste{display:flex;flex-direction:column;gap:6px;margin:6px 0}
html[data-design="neu"] .ma-zeile{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
html[data-design="neu"] .ma-mitte{flex:1;min-width:0;display:flex;flex-direction:column}
html[data-design="neu"] .ma-mitte small{color:var(--muted);font-size:12.5px}
html[data-design="neu"] .ma-stufe{font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap;background:var(--brand-soft);color:var(--brand-text)}
html[data-design="neu"] .ma-stufe.s2{background:#FFEDD5;color:#9A3412}
html[data-design="neu"] .ma-stufe.s3{background:var(--warn-bg);color:var(--warn)}
html[data-design="neu"] .ma-ueber{margin-top:8px}
html[data-design="neu"] .ma-ueber summary{cursor:pointer;font-weight:700;font-size:13.5px}

/* 19.10.2026: GAEB einlesen */
html[data-design="neu"] .gaeb-box{min-width:min(720px,90vw)}
html[data-design="neu"] .gaeb-kopf{display:flex;flex-direction:column;gap:2px;background:var(--brand-soft);border-radius:12px;padding:10px 12px;margin:8px 0}
html[data-design="neu"] .gaeb-kopf small{color:var(--brand-text);font-size:12.5px}
html[data-design="neu"] .gaeb-tabelle{max-height:46vh;overflow:auto}
html[data-design="neu"] .gaeb-oz{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
html[data-design="neu"] .gaeb-titel td{font-weight:800;background:var(--canvas)}
html[data-design="neu"] .gaeb-marke{margin-left:8px;font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px;background:#F3F4F6;color:var(--muted)}

/* 19.10.2026: Stempeluhr auf dem Handy-Start (Chef) — kompakt, im Look der Handy-Karten */
html[data-design="neu"] .dn-h-stempel .bs-terminal { margin: 0; padding: 14px 16px; border-radius: 18px; background: #FFFFFF; border: 1px solid #E7E5E0; box-shadow: 0 1px 2px rgba(17, 24, 39, .04); gap: 4px; }
html[data-design="neu"] .dn-h-stempel .bs-terminal-kopf h3 { font-size: 15px; font-weight: 800; }
html[data-design="neu"] .dn-h-stempel .bs-terminal-zeile { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 9px 0; }
html[data-design="neu"] .dn-h-stempel .bs-terminal-zeile .bs-knoepfe { grid-column: auto; flex-wrap: nowrap; }
html[data-design="neu"] .dn-h-stempel .bs-terminal-name { min-width: 0; gap: 8px; }
html[data-design="neu"] .dn-h-stempel .bs-terminal-name b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
html[data-design="neu"] .dn-h-stempel .bs-avatar { width: 32px; height: 32px; font-size: 12px; flex: none; }
html[data-design="neu"] .dn-h-stempel .btn.small { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 10px; }
html[data-design="neu"] .dn-h-stempel .bs-terminal-name > :not(.bs-avatar) { min-width: 0; overflow: hidden; }
/* 20.10.2026: Am Handy (bis 460 px, also alle gängigen Telefone) überdeckte „● seit 21:33“ den Namen — dort ohne das Kästchen;
   eingestempelt erkennt man an „Pause/Ausstempeln“, die Stunden stehen unter dem Namen. */
@media (max-width: 460px) {
  html[data-design="neu"] .dn-h-stempel .bs-terminal-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  html[data-design="neu"] .dn-h-stempel .bs-terminal-zeile > .bs-marke { display: none; }
}

/* ======================================================================
   19.10.2026: Projekte, Angebote, Rechnungen, Belege — PC / Tablet / Handy
   ====================================================================== */
/* Projekte: Kürzel auf dem Kachelbild weiß (vorher Projektfarbe auf Gelb — kaum lesbar) */
html[data-design="neu"] .pj-bild-leer span { color: #FFFFFF !important; font-family: inherit; font-size: 34px; font-weight: 800; letter-spacing: .04em; text-shadow: 0 2px 10px rgba(17, 24, 39, .25); }
/* Kennzahlen: kein weißer Kasten mit Rahmen mehr um die Kacheln (Altlast der Trennlinien-Reihe) */
html[data-design="neu"] .pj-kennzahlen { border: 0; border-radius: 0; background: transparent; overflow: visible; }
html[data-design="neu"] .pj-kennzahl { min-width: 0; }
@media (max-width: 700px) {
  html[data-design="neu"] .pj-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* drei Kacheln: die letzte über die ganze Breite statt allein mit Loch daneben */
  html[data-design="neu"] .pj-kennzahl:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html[data-design="neu"] .pj-kennzahl { padding: 12px 14px; border-left: 1px solid #E7E5E0; }
  html[data-design="neu"] .pj-kennzahl strong { font-size: 21px; }
}
/* Projektakte, Reiter „Belege“: Belegnummer und Datum nicht umbrechen (AN-2026-↵0201) */
html[data-design="neu"] body.view-projekte .tabelle-rollbar td .link { white-space: nowrap; }

/* Angebote / AB / Rechnungen: Ist die Liste schmaler als die Tabelle (PC mit Seitenspalte, Tablet),
   werden die Zeilen zu Karten — vorher lagen die Knöpfe rechts unter der Seitenspalte bzw. am Tablet
   „Verschickt“ über der Nummer. Am Handy bleibt die eigene Handy-Karte aus styles.css. */
html[data-design="neu"] .rech-tabelle-box { container: rech-liste / inline-size; }
@container rech-liste (max-width: 1000px) {
  @media (min-width: 701px) {
    html[data-design="neu"] table.rech-tabelle,
    html[data-design="neu"] table.rech-tabelle tbody { display: block !important; width: 100%; margin: 0; }
    html[data-design="neu"] table.rech-tabelle thead { display: none; }
    html[data-design="neu"] table.rech-tabelle tr.rech-monat { display: block; }
    html[data-design="neu"] table.rech-tabelle tr.rech-monat td { display: block; padding: 14px 2px 8px !important; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte {
      display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "kunde kunde betrag" "kunde kunde offen" "status nr akt";
      column-gap: 14px; row-gap: 2px; align-items: center; padding: 12px 14px 10px 16px; border-left-color: var(--st);
    }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td { display: block; min-width: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-kunde { grid-area: kunde; align-self: start; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-kunde > div:last-child { max-width: none; margin-left: 37px; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-betrag { grid-area: betrag; text-align: right !important; font-size: 16px; font-weight: 800 !important; color: #111827 !important; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-offen { grid-area: offen; text-align: right !important; font-size: 12.5px; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-offen:not(.offen) { display: none; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-offen.offen::before { content: "offen "; font-weight: 600; color: #6B7280; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-datum { display: none; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-status,
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-nr,
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-akt { margin-top: 8px; padding-top: 8px !important; border-top: 1px solid #F0EEE9 !important; align-self: stretch; display: flex; align-items: center; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-status { grid-area: status; font-size: 12.5px; white-space: nowrap; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-nr { grid-area: nr; font-size: 12.5px; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-nr::after { content: attr(data-datum); white-space: nowrap; }
    html[data-design="neu"] table.rech-tabelle tr.rech-karte td.z-akt { grid-area: akt; justify-content: flex-end; }
  }
}
/* Status-Filter am Tablet: wischbar ohne Mini-Bildlaufleiste daneben */
@media (max-width: 1024px) {
  html[data-design="neu"] .rech-status-leiste { overflow-y: hidden; scrollbar-width: none; padding-bottom: 10px; margin-bottom: 6px; }
  html[data-design="neu"] .rech-status-leiste::-webkit-scrollbar { display: none; }
}
/* Kennzahlen am Handy: Untertitel umbrechen statt über den Kachelrand zu laufen */
@media (max-width: 720px) {
  html[data-design="neu"] .bilanz-kacheln .bilanz-kachel small { white-space: normal; overflow-wrap: anywhere; }
}

/* Belege (Buchhaltung): Monatsleiste — am PC alle zwölf Monate in einer Reihe (vorher stand „Dez“
   allein in Zeile zwei), schmal wischbar ohne graue Leiste */
html[data-design="neu"] body.view-accounting .acc-monatsleiste { container: acc-monate / inline-size; }
@container acc-monate (min-width: 600px) {
  html[data-design="neu"] body.view-accounting .acc-monate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); flex: 1 1 100%; }
  html[data-design="neu"] body.view-accounting .acc-monat { justify-content: center; padding-left: 4px; padding-right: 4px; gap: 5px; }
}
@container acc-monate (max-width: 599px) {
  html[data-design="neu"] body.view-accounting .acc-monate { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  html[data-design="neu"] body.view-accounting .acc-monate::-webkit-scrollbar { display: none; }
  html[data-design="neu"] body.view-accounting .acc-monat { flex: none; }
}
/* Belegliste: bei schmaler Liste bekam der Dateiname nur ~150 px, Symbole und „Hochgeladen von“
   hatten feste Breiten. Jetzt bekommt der Name den Platz. */
html[data-design="neu"] body.view-accounting .firm-list { container: belegliste / inline-size; }
@container belegliste (max-width: 900px) {
  @media (min-width: 701px) {
    html[data-design="neu"] body.view-accounting .firm-list .firm-doc { grid-template-columns: minmax(0, 1fr) auto minmax(0, 130px); }
    html[data-design="neu"] body.view-accounting .firm-list.mit-betrag .firm-doc { grid-template-columns: minmax(0, 1fr) 96px auto minmax(0, 130px); }
    html[data-design="neu"] body.view-accounting .firm-list .firm-doc > .by-badge { max-width: 130px; }
  }
}
/* Belege nebeneinander (Kacheln): Name über die volle Breite, „Hochgeladen von“ darunter */
html[data-design="neu"] body.view-accounting .firm-doccol-foot { flex-wrap: wrap; row-gap: 4px; }
html[data-design="neu"] body.view-accounting .firm-doccol-foot > .firm-doc-nameblock { flex: 1 1 100%; min-width: 0; }

/* Beleg-Editor (Angebot/Rechnung) am PC mit Seitenspalte: die Positionszeile brauchte ~930 px,
   „Betrag“ und die Knöpfe lagen unter der Seitenspalte. Ist der Editor schmaler, steht die
   Bezeichnung oben und alle Zahlenfelder mit Beschriftung in EINER Reihe darunter.
   (Bis 900 px Bildschirmbreite gilt die Handy-Karte aus styles.css.) */
html[data-design="neu"] .rech-editor { container: rech-editor / inline-size; }
@container rech-editor (max-width: 980px) {
  @media (min-width: 901px) {
    html[data-design="neu"] .rech-editor .sev-poskopf { display: none; }
    /* Kopf: Belegnummer war nur ~78 px breit („AN-“ und Zahnrad) — Abstand kleiner, Nummer breiter */
    html[data-design="neu"] .rech-editor .sev-kopf { gap: 24px 28px; }
    html[data-design="neu"] .rech-editor .sev-reihe:has(.sev-nr) { grid-template-columns: minmax(0, 1.8fr) minmax(128px, 1fr); gap: 12px; }
    html[data-design="neu"] .rech-editor .sev-nr .sev-zusatz { flex: 0 0 52px; }
    html[data-design="neu"] .rech-editor .sev-poszeile {
      grid-template-columns: 26px minmax(56px, .8fr) minmax(84px, 1fr) minmax(86px, 1.2fr) minmax(76px, .9fr) minmax(76px, .9fr) minmax(96px, auto) 82px;
      grid-template-areas:
        "nr name  name    name  name name  name   del"
        ".  besch besch   besch besch besch besch besch"
        ".  menge einheit preis ust  rab   betrag betrag";
      gap: 8px 10px; align-items: end;
    }
    html[data-design="neu"] .rech-editor .sev-poszeile > .p-nr,
    html[data-design="neu"] .rech-editor .sev-poszeile > .p-del { align-self: center; }
    html[data-design="neu"] .rech-editor .sev-poszeile > .p-betrag { padding-bottom: 9px; font-weight: 800; text-align: right; }
    html[data-design="neu"] .rech-editor .sev-poszeile > [data-lbl]:not(.p-name)::before {
      content: attr(data-lbl); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; color: #6B7280;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
    }
    html[data-design="neu"] .rech-editor .sev-poszeile > .p-betrag[data-lbl]:not(.p-name)::before { text-align: right; }
    html[data-design="neu"] .rech-editor .sev-poszeile select { padding-left: 8px; padding-right: 22px; }
    html[data-design="neu"] .rech-editor .sev-poszeile > .p-name input { font-weight: 700; }
  }
}
/* Kennzahlen Angebote/Rechnungen/Belege am Tablet: 2 × 2 wie im Dashboard (vorher 3 + 1 allein) */
@media (min-width: 701px) and (max-width: 1024px) {
  html[data-design="neu"] body.view-rechnungen .bilanz-kacheln,
  html[data-design="neu"] body.view-accounting .bilanz-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Projekte am Tablet: Kennzahlen in einer Reihe (vorher drei + „Stunden“ allein darunter) */
@media (min-width: 701px) and (max-width: 1024px) {
  html[data-design="neu"] .pj-kennzahlen { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
  html[data-design="neu"] .pj-kennzahl { padding: 14px; }
  html[data-design="neu"] .pj-kennzahl strong { font-size: 22px; }
}
/* =====================================================================
   19.10.2026: Auswertung, Einstellungen — Prüfung PC / Tablet / Handy
   ===================================================================== */
/* Auswertung: vier Kennzahlen wie am Dashboard — breit 4 nebeneinander, sonst 2×2 (vorher 3 + 1 allein).
   Die Beträge passen sich der Kachelbreite an, statt am Handy riesig untereinander zu stehen. */
html[data-design="neu"] .dn-aw-huelle { container: dn-aw / inline-size; }
html[data-design="neu"] .dn-aw-huelle .dn-aw-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-design="neu"] .dn-aw-huelle .dn-aw-karte { min-width: 0; container-type: inline-size; }
html[data-design="neu"] .dn-aw-huelle .dn-aw-karte > b { font-size: clamp(17px, 14cqi, 32px); white-space: nowrap; }
html[data-design="neu"] .dn-aw-huelle .dn-aw-karte .dn-eyebrow { overflow-wrap: anywhere; }
@container dn-aw (max-width: 900px) { html[data-design="neu"] .dn-aw-huelle .dn-aw-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container dn-aw (max-width: 520px) {
  html[data-design="neu"] .dn-aw-huelle .dn-aw-vier { gap: 10px; }
  html[data-design="neu"] .dn-aw-huelle .dn-aw-karte { padding: 14px; gap: 6px; border-radius: 14px; }
  html[data-design="neu"] .dn-aw-huelle .dn-aw-karte .dn-eyebrow { font-size: 10.5px; letter-spacing: .05em; }
  html[data-design="neu"] .dn-aw-huelle .dn-aw-karte small { font-size: 11px; line-height: 1.35; }
  html[data-design="neu"] .dn-aw-huelle .dn-trend { font-size: 11px; padding: 2px 8px; }
}
@container dn-aw (max-width: 280px) { html[data-design="neu"] .dn-aw-huelle .dn-aw-vier { grid-template-columns: minmax(0, 1fr); } }
/* Monate als gleichmäßiges Raster: 12 in einer Reihe, am Handy 6 × 2 über die volle Breite (vorher „Dez" allein) */
html[data-design="neu"] .dn-aw-monate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
html[data-design="neu"] .dn-aw-monate .dn-chip.eckig { min-width: 0; padding: 0 4px; }
@media (max-width: 560px) { html[data-design="neu"] .dn-aw-monate { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Einstellungen: Häkchen in einem .field wurden auf 100 % Breite gezogen (.field input) — das Kästchen stand
   dann mitten im Feld oder allein in einer Zeile (SSL, „Bei jeder Anmeldung …", „Echte Stimme …"). */
html[data-design="neu"] body.view-settings .field input[type="checkbox"],
html[data-design="neu"] body.view-settings .field input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none; }
html[data-design="neu"] body.view-settings .field > label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; }
/* „SSL" steht als Überschrift über dem Häkchen, in Höhe der Eingabefelder daneben */
html[data-design="neu"] body.view-settings .field > label:has(> span:first-child + input[type="checkbox"]) { flex-direction: column; align-items: flex-start; gap: 0; }
html[data-design="neu"] body.view-settings .field > label > span:first-child + input[type="checkbox"] { margin-top: 13px; }
html[data-design="neu"] body.view-settings .row > .field:has(> label > span:first-child + input[type="checkbox"]) { flex: 0 0 auto; min-width: 0; }
/* Tablet: „Alle zuklappen" als normaler Knopf rechts statt als Balken über die volle Breite.
   Handy: Seitentitel steht oben in der Kopfzeile — übrig blieb ein einsamer Pfeil-Knopf ohne Text. */
@media (max-width: 900px) {
  html[data-design="neu"] .einst-kopf .rech-titelzeile .rech-toolbar-actions { justify-content: flex-end; }
  html[data-design="neu"] .einst-kopf .rech-titelzeile .rech-toolbar-actions > .btn { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  html[data-design="neu"] .einst-kopf .rech-titelzeile .rech-toolbar-actions > .btn.secondary > span:not(.ico) { display: inline; }
}
/* Beleg-Layout: Zahlenfelder als Raster, Felder unten bündig (umbrechende Beschriftungen verschoben sie),
   Häkchen je in eigener Zeile statt hintereinander geklebt */
html[data-design="neu"] .layout-gruppe > .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; align-items: end; }
html[data-design="neu"] .layout-gruppe > .row + .row { margin-top: 10px; }
html[data-design="neu"] .layout-gruppe > .row > .field { min-width: 0; margin-bottom: 0; }
html[data-design="neu"] .layout-gruppe > .row > .field > input,
html[data-design="neu"] .layout-gruppe > .row > .field > select { width: 100% !important; }
html[data-design="neu"] .layout-gruppe > .row > .field > div > input:not([type="color"]) { flex: 1; min-width: 0; width: auto !important; }
html[data-design="neu"] .layout-gruppe > label.check { display: flex; align-items: flex-start; margin: 10px 0 0; }
html[data-design="neu"] .layout-gruppe > label.check > input { margin-top: 2px; flex: none; }
/* Nummernkreise am Handy: Name über die volle Breite, darunter Kürzel / Nächste Nr. / Stellen in einer Reihe */
html[data-design="neu"] .nummernkreis { container: dn-nk / inline-size; }
@container dn-nk (max-width: 560px) {
  html[data-design="neu"] .nummernkreis > .row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr); gap: 8px 10px; align-items: end; }
  html[data-design="neu"] .nummernkreis > .row > .field { min-width: 0 !important; margin-bottom: 0; }
  html[data-design="neu"] .nummernkreis > .row > .field:first-child { grid-column: 1 / -1; }
  html[data-design="neu"] .nummernkreis > .row > .field > input { width: 100% !important; }
}
/* Jahr-Tabelle: Monate ohne Umsatz und ohne Angebote dezent */
html[data-design="neu"] .dn-aw-zeile.leer .dn-aw-text b, html[data-design="neu"] .dn-aw-zeile.leer .dn-aw-betrag { color: #9CA3AF; font-weight: 600; }
html[data-design="neu"] .dn-aw-text small.dn-aw-umbruch { white-space: normal; }
html[data-design="neu"] .layout-gruppe > label.check + .row { margin-top: 10px; }
/* 19.10.2026: Alle Bereiche am Handy — die Kacheln sind dort ~75 px breit, die Stecknadel lag über dem Symbol.
   Nadel kleiner in die Ecke, Symbol etwas tiefer und kleiner. */
@media (max-width: 560px) {
  html[data-design="neu"] .dn-bk-raster { gap: 8px; padding: 12px; }
  html[data-design="neu"] .dn-bk-gehe { padding: 26px 3px 9px; gap: 7px; min-height: 96px; }
  html[data-design="neu"] .dn-bk-pin { top: 3px; right: 3px; width: 22px; height: 22px; }
  html[data-design="neu"] .dn-bk-pin svg { width: 12px; height: 12px; }
  html[data-design="neu"] .dn-bk-pin::after { content: ""; position: absolute; inset: -7px; }   /* Tippfläche bleibt groß genug */
  html[data-design="neu"] .dn-bk-sym { width: 40px; height: 40px; border-radius: 12px; }
  html[data-design="neu"] .dn-bk-name { font-size: 11.5px; }
}

/* 19.10.2026: Materialkatalog ohne Bilder (neutraler Gewerke-Katalog) — kompakte Karten statt leerer Bildkästen */
html[data-design="neu"] .matkat.ohne-bild .matkat-bildbox { display: none; }
html[data-design="neu"] .matkat.ohne-bild .matkat-gitter { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
html[data-design="neu"] .matkat.ohne-bild .matkat-karte { border-top: 3px solid #FDB913; }
html[data-design="neu"] .matkat.ohne-bild .matkat-name { -webkit-line-clamp: 3; min-height: 0; }
html[data-design="neu"] .matkat-haendler.rp { background: #FFF4D1; color: #8A5A00; }
html[data-design="neu"] .matkat-chips { max-height: 112px; overflow-y: auto; }

/* 19.10.2026: E-Mail-Konto-Fenster — lesbare Breite, SSL-Häkchen direkt neben dem Port */
html[data-design="neu"] .modal.mailkonto-fenster { max-width: 780px; width: calc(100% - 32px); margin-left: auto; margin-right: auto; }
html[data-design="neu"] .mailkonto-form .row { align-items: flex-end; }
html[data-design="neu"] .mailkonto-form .mk-port { flex: 0 0 110px; }
html[data-design="neu"] .mailkonto-form .mk-ssl { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 40px; margin-bottom: 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
html[data-design="neu"] .mailkonto-form .mk-ssl input { width: 18px; height: 18px; margin: 0; accent-color: #FDB913; }
@media (max-width: 600px) { html[data-design="neu"] .mailkonto-form .mk-port { flex: 1 1 90px; } }

/* 19.10.2026 (Nutzer: „alle Fenster, die so aussehen, kleiner machen“): Eine alte Handy-Regel in styles.css
   (.modal { max-width: calc(100vw - 20px) }) gilt ohne Media-Query und hebt die 480-px-Grenze auf jedem Bildschirm
   auf — auf breiten Monitoren wurden Formular-Fenster (Mitarbeiter, E-Mail-Konto …) bildschirmbreit.
   Jetzt am PC/Tablet: Formulare höchstens 760 px und mittig, Fenster mit Tabelle oder Katalog bis 1180 px.
   Fenster mit eigener (kleinerer) Breite bleiben, wie sie sind. Am Handy bleibt das Vollbild. */
@media (min-width: 701px) {
  html[data-design="neu"] .modal-backdrop > .modal:not(.modal-doc):not(.modal-wide):not(.media-modal):not(.scan-editor):not(.frage-modal):not(.mv-vorlagen-modal):not(.kk-scan-modal):not(:has(.matkat)):not(:has(.scan-dialog)):not(:has(.termin-form)):not(:has(.fam-dialog)) {
    width: min(760px, calc(100vw - 40px)); max-width: min(760px, calc(100vw - 40px)); margin-left: auto; margin-right: auto;
  }
  html[data-design="neu"] .modal-backdrop > .modal:not(.modal-doc):not(.modal-wide):not(.media-modal):not(.scan-editor):not(:has(.matkat)):has(table) {
    width: min(1180px, calc(100vw - 40px)); max-width: min(1180px, calc(100vw - 40px));
  }
}
html[data-design="neu"] .matkat.ohne-bild .matkat-chips { flex-wrap: wrap; overflow-x: visible; }

/* 19.10.2026: Kündigung in Schritten */
html[data-design="neu"] .modal.kuend-fenster { max-width: 560px; }
html[data-design="neu"] .kuend-assi h3 { margin: 6px 0 4px; font-size: 18px; }
html[data-design="neu"] .kuend-punkte { display: flex; gap: 6px; margin: -6px 0 12px; }
html[data-design="neu"] .kuend-punkte i { flex: 1; height: 5px; border-radius: 999px; background: #E5E7EB; }
html[data-design="neu"] .kuend-punkte i.fertig { background: #9CA3AF; }
html[data-design="neu"] .kuend-punkte i.jetzt { background: #FDB913; }
html[data-design="neu"] .kuend-gruende { display: grid; gap: 8px; margin: 10px 0 12px; }
html[data-design="neu"] .kuend-grund { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid #E5E7EB; border-radius: 12px; cursor: pointer; font-weight: 600; }
html[data-design="neu"] .kuend-grund.an { border-color: #FDB913; background: #FFFBEB; }
html[data-design="neu"] .kuend-grund input { accent-color: #FDB913; width: 18px; height: 18px; margin: 0; }
html[data-design="neu"] .kuend-angebot { padding: 14px 16px; border-radius: 14px; background: #F0FDF4; border: 1px solid #BBF7D0; margin: 10px 0; }
html[data-design="neu"] .kuend-angebot p { margin: 0 0 10px; }
html[data-design="neu"] .kuend-angebot.leise { background: #F9FAFB; border-color: #E5E7EB; }
html[data-design="neu"] .kuend-angebot.leise p { margin: 0; font-size: 13px; color: #4B5563; }
html[data-design="neu"] .kuend-zusammen { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #F9FAFB; border: 1px solid #E5E7EB; margin: 8px 0 12px; }
html[data-design="neu"] .kuend-zusammen div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
html[data-design="neu"] .kuend-zusammen span { color: #6B7280; }
html[data-design="neu"] .kuend-warnung { padding: 12px 14px; border-radius: 12px; background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; font-size: 13.5px; }
html[data-design="neu"] .kuend-endgueltig { background: #DC2626 !important; border-color: #DC2626 !important; color: #FFFFFF !important; }
html[data-design="neu"] .kuend-fertig { padding: 16px; border-radius: 14px; background: #F9FAFB; border: 1px solid #E5E7EB; }
html[data-design="neu"] .kuend-fertig b { font-size: 17px; }

/* 19.10.2026 (Nutzer: „bisschen kleiner machen“): Kassenbuch kompakter — höchstens 1100 px breit,
   Erfassung in einer Zeile (Datum · Betrag schmal, Kategorie · Beschreibung breit, Buchen daneben). */
html[data-design="neu"] .card.kb-seite { max-width: 1100px; }
html[data-design="neu"] .kb-zahlen > div { padding: 10px 14px; }
html[data-design="neu"] .kb-zahlen .kb-bestand b { font-size: 22px; }
html[data-design="neu"] .kb-erfassen { padding: 14px 16px; }
html[data-design="neu"] .kb-erfassen { container: kb-erf / inline-size; }
@container kb-erf (min-width: 760px) {
  html[data-design="neu"] .kb-erfassen .form-grid { display: grid; grid-template-columns: 150px 120px minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; }
  html[data-design="neu"] .kb-erfassen .form-grid .field { margin: 0; }
}
html[data-design="neu"] .kb-erfassen input { min-height: 38px; }
html[data-design="neu"] .kb-bericht { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html[data-design="neu"] .kb-bericht .kb-monat { min-height: 34px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font: inherit; font-size: 13px; }
html[data-design="neu"] .kb-tabelle td { padding-top: 9px; padding-bottom: 9px; }

/* 19.10.2026 (Nutzer: „das schöner“): Reiter-Leiste (Übersicht · Angebote · … · Finanzen) — hell mit feinem Rahmen,
   aktiver Reiter dunkel mit gelbem Symbol (wie „Offen“ bei den Aufgaben), Zahl als gelbes Abzeichen. */
html[data-design="neu"] .acc-reiter { background: #FFFFFF; border: 1px solid #E7E5E0; border-radius: 14px; padding: 5px; gap: 2px; box-shadow: 0 1px 2px rgba(17, 24, 39, .04); }
html[data-design="neu"] .acc-reiter-knopf { min-height: 38px; padding: 0 14px; border-radius: 10px; gap: 7px; color: #4B5563; transition: background-color .15s, color .15s; }
html[data-design="neu"] .acc-reiter-knopf .ico { --ico: #9CA3AF; }
html[data-design="neu"] .acc-reiter-knopf:hover { background: #F6F5F1; color: #111827; }
html[data-design="neu"] .acc-reiter-knopf:hover .ico { --ico: #B07800; }
html[data-design="neu"] .acc-reiter-knopf.aktiv { background: #111827; color: #FFFFFF; box-shadow: 0 6px 14px -8px rgba(17, 24, 39, .6); }
html[data-design="neu"] .acc-reiter-knopf.aktiv .ico { --ico: #FDB913; }
html[data-design="neu"] .acc-reiter-zahl { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #FDB913; color: #111827; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
html[data-design="neu"] .rech-kopfleiste .buch-weitere > summary { min-height: 38px; border-radius: 12px; border: 1px solid #E7E5E0; background: #FFFFFF; padding: 0 14px; }
html[data-design="neu"] .rech-kopfleiste .buch-weitere.aktiv > summary { background: #111827; color: #FFFFFF; border-color: #111827; --ico: #FDB913; }

/* 19.10.2026 (Nutzer: „das auch kleiner“): Aufgaben — höchstens 980 px breit, flacherer Fortschritts-Kasten */
html[data-design="neu"] body.view-tasks #content > .card { max-width: 980px; }
html[data-design="neu"] body.view-tasks .dn-aufg-fortschritt { padding: 12px 16px; border-radius: 16px; box-shadow: 0 10px 20px -16px rgba(29, 78, 216, .7); }
html[data-design="neu"] body.view-tasks .dn-aufg-mitte b { font-size: 16px; }
html[data-design="neu"] body.view-tasks .dn-aufg-spur { height: 6px; }

/* 19.10.2026: ganze Beleg-Zeile/Kachel ist anklickbar (öffnet den Beleg) */
html[data-design="neu"] .ganz-klickbar { cursor: pointer; }
html[data-design="neu"] .ganz-klickbar:hover { border-color: #F6DE94; }

/* 19.10.2026: Kassenbuch — Zeitraum (Jahr + Monate) */
html[data-design="neu"] .kb-zeitraum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
html[data-design="neu"] .kb-zeitraum .kb-jahr { min-height: 36px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font: inherit; font-size: 13px; font-weight: 700; }
html[data-design="neu"] .kb-monate { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 12px; background: #FFFFFF; border: 1px solid #E7E5E0; }
html[data-design="neu"] .kb-mon { min-height: 30px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; color: #9CA3AF; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
html[data-design="neu"] .kb-mon.hat { color: #374151; }
html[data-design="neu"] .kb-mon:hover:not([disabled]) { background: #F6F5F1; }
html[data-design="neu"] .kb-mon.an { background: #111827; color: #FFFFFF; }
html[data-design="neu"] .kb-mon[disabled] { opacity: .45; cursor: default; }

/* 19.10.2026: „Dein Plan" auf dem Handy-Start der Mitarbeiter */
html[data-design="neu"] .dn-plan-karte { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px 16px; border-radius: 18px; background: #FFFFFF; border: 1px solid #E7E5E0; box-shadow: 0 1px 2px rgba(17, 24, 39, .04); text-align: left; font: inherit; color: inherit; cursor: pointer; }
html[data-design="neu"] .dn-plan-kopf { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 15px; }
html[data-design="neu"] .dn-plan-link { font-size: 12px; font-weight: 700; color: #B07800; }
html[data-design="neu"] .dn-plan-tag > small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; margin-bottom: 4px; }
html[data-design="neu"] .dn-plan-liste { display: grid; gap: 6px; }
html[data-design="neu"] .dn-plan-zeile { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border-radius: 12px; background: #F9FAFB; border-left: 3px solid #FDB913; }
html[data-design="neu"] .dn-plan-zeile > b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
html[data-design="neu"] .dn-plan-zeile > span { display: flex; flex-direction: column; min-width: 0; }
html[data-design="neu"] .dn-plan-titel { font-weight: 700; font-size: 13.5px; }
html[data-design="neu"] .dn-plan-zeile small { font-size: 12px; color: #6B7280; }
html[data-design="neu"] .dn-plan-frei { margin: 0; font-size: 13px; color: #9CA3AF; }

/* 19.10.2026: Menügruppe „Mitarbeiter“ mit Unterseiten */
html[data-design="neu"] .dn-nav-gruppe .dn-nav-pfeil { margin-left: auto; font-size: 18px; line-height: 1; opacity: .7; transition: transform .2s; }
html[data-design="neu"] .dn-nav-gruppe.offen .dn-nav-pfeil { transform: rotate(90deg); }
html[data-design="neu"] .dn-nav-kinder { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 22px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .12); }
html[data-design="neu"] .dn-nav-kinder[hidden] { display: none; }
html[data-design="neu"] .dn-nav.dn-nav-kind { min-height: 34px; padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; }
html[data-design="neu"] .dn-nav-punkt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; margin: 0 6px 0 4px; }
html[data-design="neu"] .dn-nav-kind.active .dn-nav-punkt { opacity: 1; }

/* 19.10.2026 (Nutzer: „bessere Struktur“): Aufgaben — oben Schnelleingabe mit Fälligkeit + Zahlen, Liste nach Fälligkeit gruppiert */
html[data-design="neu"] .dn-aufg-oben { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
html[data-design="neu"] .dn-aufg-eingabe { margin: 0; }
html[data-design="neu"] .dn-aufg-wann { min-height: 40px; padding: 4px 10px; border-radius: 10px; border: 1px solid #E7E5E0; background: #F9FAFB; font: inherit; font-size: 13px; font-weight: 600; color: #374151; }
html[data-design="neu"] .dn-aufg-zahlen { display: flex; gap: 6px; }
html[data-design="neu"] .dn-aufg-zahl { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 86px; padding: 8px 12px; border-radius: 14px; background: #FFFFFF; border: 1px solid #E7E5E0; }
html[data-design="neu"] .dn-aufg-zahl b { font-size: 20px; font-weight: 800; line-height: 1; }
html[data-design="neu"] .dn-aufg-zahl small { font-size: 11px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: .04em; }
html[data-design="neu"] .dn-aufg-zahl.rot b { color: #DC2626; }
html[data-design="neu"] .dn-aufg-zahl.gruen b { color: #047857; }
html[data-design="neu"] .dn-aufg-zahl .dn-aufg-spur { height: 4px; margin-top: 4px; background: #E5E7EB; }
html[data-design="neu"] .dn-aufg-zahl .dn-aufg-spur i { background: #22C55E; }
@media (max-width: 760px) { html[data-design="neu"] .dn-aufg-oben { grid-template-columns: 1fr; } html[data-design="neu"] .dn-aufg-zahl { flex: 1; min-width: 0; } }
html[data-design="neu"] .aufg-gruppe-kopf { display: flex; align-items: center; gap: 8px; margin: 18px 2px 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
html[data-design="neu"] .aufg-gruppe-kopf:first-child { margin-top: 6px; }
html[data-design="neu"] .aufg-gruppe-zahl { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #F3F4F6; color: #374151; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
html[data-design="neu"] .aufg-gruppe-kopf.ueber { color: #B91C1C; }
html[data-design="neu"] .aufg-gruppe-kopf.ueber .aufg-gruppe-zahl { background: #FEE2E2; color: #B91C1C; }
html[data-design="neu"] .aufg-gruppe-kopf.heute { color: #B07800; }
html[data-design="neu"] .aufg-gruppe-kopf.heute .aufg-gruppe-zahl { background: #FDB913; color: #111827; }
html[data-design="neu"] .aufg-gruppe.ueber .task-card.aufg-zeile { border-left-color: #EF4444; }
html[data-design="neu"] .aufg-gruppe.erledigt .task-card.aufg-zeile { border-left-color: #22C55E; opacity: .75; }
html[data-design="neu"] .aufg-gruppe.ohne .task-card.aufg-zeile, html[data-design="neu"] .aufg-gruppe.spaeter .task-card.aufg-zeile { border-left-color: #CBD5E1; }

/* 19.10.2026: Arbeitsverträge — Bereich „Eigenes Vertragsmuster" (Upload DOCX/TXT, Platzhalter-Liste) */
html[data-design="neu"] .vertragsmuster { display: flex; flex-direction: column; gap: 10px; }
html[data-design="neu"] .vertragsmuster .hint { margin: 0; }
html[data-design="neu"] .vm-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
html[data-design="neu"] .vm-kopf .contract-sub { border: 0; padding: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink); }
html[data-design="neu"] .vm-datei { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); min-width: 0; }
html[data-design="neu"] .vm-name { min-width: 0; }
html[data-design="neu"] .vm-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .vm-art { flex: none; padding: 6px 8px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-text); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
html[data-design="neu"] .vm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-design="neu"] .vm-chips code, html[data-design="neu"] .vm-platzhalter code { padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; color: var(--ink); white-space: nowrap; }
html[data-design="neu"] .vm-warnung { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); font-size: 13px; }
html[data-design="neu"] .vm-hinweis { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px; padding: 8px 10px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); font-size: 13px; font-weight: 600; }
html[data-design="neu"] .vm-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-design="neu"] .vm-knoepfe .danger-text { color: var(--warn); }
html[data-design="neu"] .vm-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); font-size: 11px; font-weight: 700; font-family: inherit; vertical-align: middle; }
html[data-design="neu"] .vm-text { width: 100%; min-height: 280px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
html[data-design="neu"] .vm-vorschau { max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 13px; }
html[data-design="neu"] .vm-platzhalter { width: 100%; border-collapse: collapse; }
html[data-design="neu"] .vm-platzhalter td, html[data-design="neu"] .vm-platzhalter th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
html[data-design="neu"] .vm-kopieren { cursor: pointer; }
@media (max-width: 560px) {
  html[data-design="neu"] .vm-knoepfe .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  html[data-design="neu"] .vm-knoepfe .btn:first-child { flex-basis: 100%; }
  html[data-design="neu"] .vm-platzhalter, html[data-design="neu"] .vm-platzhalter tbody { display: block; width: 100%; }
  html[data-design="neu"] .vm-platzhalter thead { display: none; }
  html[data-design="neu"] .vm-platzhalter tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); }
  html[data-design="neu"] .vm-platzhalter td { display: block; padding: 2px 4px; border: 0; }
}

/* 20.10.2026: KI-Helfer oben rechts (öffnet den Hilfe-Assistenten) */
html[data-design="neu"] .dn-ki-helfer { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #FDE68A; background: linear-gradient(135deg, #FFF8E1, #FEF3C7); color: #92400E; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; margin-right: 6px; }
html[data-design="neu"] .dn-ki-helfer:hover { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
html[data-design="neu"] .dn-ki-helfer svg { color: #D97706; flex: none; }
@media (max-width: 900px) { html[data-design="neu"] .dn-ki-helfer { display: none; } }   /* Handy/Tablet hoch: dort gibt es das „?“ im Kopf */
html[data-design="neu"] .hilfe-ki-marke { display: block; font-size: 11.5px; font-weight: 700; color: #B45309; }   /* 20.10.2026: KI-Antwort im Hilfe-Assistenten */

/* 20.10.2026: Konto-Menü oben rechts neu (Kopf mit Foto, Firmen mit Kürzel, einheitliche Symbole) */
html[data-design="neu"] .acct-panel.dn-konto { width: 340px; max-width: calc(100vw - 24px); padding: 8px; border-radius: 18px; border: 1px solid #ECEAE4; box-shadow: 0 24px 48px -18px rgba(17, 24, 39, .35); }
html[data-design="neu"] .dn-konto .dn-konto-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; margin: 0 0 6px; border-radius: 12px; background: #111827; color: #fff; font-size: 14px; }
html[data-design="neu"] .dn-konto .dn-konto-kopf .dn-profil-kreis { width: 44px; height: 44px; background: #FDB913; color: #111827; }
html[data-design="neu"] .dn-konto-wer { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
html[data-design="neu"] .dn-konto-wer b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-konto-wer small { font-size: 12.5px; color: #C9CED8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="neu"] .dn-konto .acct-section { padding: 10px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #9CA3AF; }
html[data-design="neu"] .dn-konto .acct-divider { margin: 6px 4px; height: 1px; background: #EFEDE8; }
html[data-design="neu"] .dn-konto .acct-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 10px; background: transparent; color: #1F2937; font-size: 14px; text-align: left; }
html[data-design="neu"] .dn-konto .acct-item:hover { background: #F7F6F2; }
html[data-design="neu"] .dn-konto .acct-item svg { width: 18px; height: 18px; flex: none; color: #6B7280; stroke: currentColor; }
html[data-design="neu"] .dn-konto .acct-item:hover svg { color: #B45309; }
html[data-design="neu"] .dn-konto-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
html[data-design="neu"] .dn-konto-text b { font-weight: 600; font-size: 14px; }
html[data-design="neu"] .dn-konto-text small { font-size: 12px; color: #9CA3AF; font-weight: 500; }
html[data-design="neu"] .dn-konto .dn-konto-firma.active { background: #FFF8E1; color: #111827; font-weight: 700; }
html[data-design="neu"] .dn-konto-kurz { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; color: #111827; font-size: 12px; font-weight: 800; flex: none; }
html[data-design="neu"] .dn-konto-haken { color: #B45309; display: inline-flex; }
html[data-design="neu"] .dn-konto .acct-item.danger { margin-top: 2px; color: #DC2626; }
html[data-design="neu"] .dn-konto .acct-item.danger svg { color: #DC2626; }
html[data-design="neu"] .dn-konto .acct-item.danger:hover { background: #FEF2F2; }

/* 20.10.2026: Rechnungen von Falax in „Dein Tarif" (lib/anbieter-rechnungen.js) */
html[data-design="neu"] .anbr-box{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
html[data-design="neu"] .anbr-titel{font-size:15px}
html[data-design="neu"] .anbr-liste{display:flex;flex-direction:column;gap:8px}
html[data-design="neu"] .anbr-zeile{border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:var(--card);display:flex;flex-direction:column;gap:6px}
html[data-design="neu"] .anbr-zeile.neu{border-color:#FDB913;background:#FFFBEF}
html[data-design="neu"] .anbr-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html[data-design="neu"] .anbr-daten{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:13.5px;color:var(--muted, #6B7280)}
html[data-design="neu"] .anbr-betrag{font-weight:700;color:var(--ink)}
html[data-design="neu"] .anbr-knoepfe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
html[data-design="neu"] .anbr-knoepfe a.btn{text-decoration:none}
html[data-design="neu"] .anbr-marke{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px}
html[data-design="neu"] .anbr-marke.neu{color:#8A5A00;background:#FFF4D1}
html[data-design="neu"] .anbr-marke.ok{color:#047857;background:#E3F5EC}
html[data-design="neu"] .anbr-marke.offen{color:#B91C1C;background:#FEF2F2}