/* =====================================================================
   NEUES DESIGN „Falax-Bau hell" (15.10.2026)
   Vorlage: „Falax-App Redesign – H · Falax-Bau hell – klickbar (Favorit)".
   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 „Falax-Bau – Handy (klickbar)"
   (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; }
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; }
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"] header.topbar .h-kopf-knopf { display: none !important; } }
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"] .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); }
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; }

/* 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; }

/* 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; }
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; }
}
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; }