/* =========================================================
   MYHUTA -- styles.css (Backlog #62)
   Ausgelagert aus der Single-File-HTML, v2.391, 25.07.2026.
   Reihenfolge der Bloecke = Reihenfolge im urspruenglichen
   Dokument. NICHT umsortieren -- spaetere Bloecke ueberschreiben
   bewusst Regeln frueherer Bloecke.
   Einbindung: <link rel="stylesheet" href="styles.css?v=NNN">
   Bei jeder Aenderung hier NNN in der HTML hochzaehlen.
   ========================================================= */

/* ============================================================
   Block 1 von 6 -- ausgelagert aus huta_v2_390_TEST.html
   Originaltag: <style>   (Zeilen 18-875)
   ============================================================ */

/* ===== DESIGN TOKENS ===== */
:root{
  /* Grüne Skala */
  --green-50:#F0F9E8;--green-100:#DFF0CC;--green-200:#C2E09E;
  --green-500:var(--green-accent);--green-700:#2E5226;--green-900:#1E3A20;
  --green-dark:#28452E;--green-accent:#A8C878;--green-gold:#C7A45D;

  /* Semantik */
  --bg:#F6F4EF;--surface:white;--border:rgba(168,200,120,.18);
  --text:#2C2520;--text-muted:var(--text-muted);--text-light:var(--text-light);

  /* Schatten */
  --shadow-xs:0 1px 3px rgba(40,69,46,.06);
  --shadow-sm:0 2px 12px rgba(40,69,46,.08);
  --shadow-md:0 4px 20px rgba(40,69,46,.10);
  --shadow-lg:0 8px 32px rgba(40,69,46,.14);
  --shadow-xl:0 16px 64px rgba(40,69,46,.18);

  /* Typografie */
  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'DM Mono',monospace;

  /* Radien */
  --r:16px;--r-sm:10px;--r-xs:6px;

  /* Animation */
  --ease-out:cubic-bezier(.22,1,.36,1);

  /* Hundefarben-Palette (harmonisch, warme Töne) */
  --dog-c0:#E07A5F;--dog-c1:#3D9BE9;--dog-c2:#81B29A;--dog-c3:#F2CC8F;
  --dog-c4:#9C7BB5;--dog-c5:#E8A838;--dog-c6:#5E8B6D;--dog-c7:#C97DA0;
}

/* ===== DARK MODE ===== */

[data-theme="light"]{
  --bg:#F6F4EF;--surface:white;--surface-alt:#FAFCF7;
  --border:rgba(168,200,120,.18);
  --text:#2C2520;--text-muted:var(--text-muted);--text-light:var(--text-light);
  --shadow-xs:0 1px 3px rgba(40,69,46,.06);--shadow-sm:0 2px 12px rgba(40,69,46,.08);
  --shadow-md:0 4px 20px rgba(40,69,46,.10);--shadow-lg:0 8px 32px rgba(40,69,46,.14);--shadow-xl:0 16px 64px rgba(40,69,46,.18);
  --success-bg:#EAF4DF;--success-text:#2A6634;--success-border:#BDD8A8;
  --danger-bg:#FCECEA;--danger-text:#8B2E1E;--danger-border:#EAB8B0;
  --warning-bg:#FEF6E4;--warning-text:#7A5A1E;--warning-border:#E8D0A0;
}

[data-theme="dark"]{
  --bg:#1A1D18;--surface:#242920;--surface-alt:rgba(255,255,255,.03);
  --border:rgba(168,200,120,.14);
  --text:#F7F5F0;--text-muted:#CBC6BA;--text-light:#B0AA9C;
  --shadow-xs:0 1px 3px rgba(0,0,0,.30);--shadow-sm:0 2px 12px rgba(0,0,0,.35);
  --shadow-md:0 4px 20px rgba(0,0,0,.40);--shadow-lg:0 8px 32px rgba(0,0,0,.45);--shadow-xl:0 16px 64px rgba(0,0,0,.50);
  --success-bg:rgba(74,167,89,.16);--success-text:#8FD9A0;--success-border:rgba(129,178,106,.35);
  --danger-bg:rgba(224,90,74,.16);--danger-text:#F2A093;--danger-border:rgba(224,90,74,.35);
  --warning-bg:rgba(200,164,60,.16);--warning-text:#E8C87A;--warning-border:rgba(200,164,60,.35);
}

/* Rechnungen/Druckansicht bleiben immer hell (Swiss-Letter-Format, Druckoptimierung) */
.lcard button.btn,.lcard .btn{color:white !important}
.lcard{background:white !important;color-scheme:light}






/* Dark Mode Toggle Button */
#dm-toggle{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);cursor:pointer;
  font-size:12px;color:rgba(255,255,255,.75);font-weight:600;
  font-family:var(--font-body);
  transition:background .15s;text-align:left
}
#dm-toggle:hover{background:rgba(255,255,255,.1)}
#dm-toggle .dm-icon{font-size:16px;flex-shrink:0}
@media print{#dm-toggle{display:none!important}}


/* ===== RESET & BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{display:flex;min-height:100vh}

/* ===== SIDEBAR ===== */
.sb{
  width:248px;flex-shrink:0;
  background:linear-gradient(175deg,#2E5226 0%,var(--green-dark) 40%,#1E3522 75%,#162A1A 100%);
  display:flex;flex-direction:column;padding-bottom:0;overflow:hidden;position:relative;
  box-shadow:4px 0 24px rgba(0,0,0,.12)
}
.ct{flex:1;padding:28px;overflow-y:auto;background:var(--bg)}

/* Logo area */
.slogo{
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:11px
}
/* #148 (v2.560): deckend WEISS statt halbtransparent. betrieb_einstellungen.logo_url
   bedient Rechnung UND Sidebar; seit dem Wechsel auf das dunkle Logo (07.08.2026, damit
   die Rechnung stimmt) stand es schwarz auf dem dunkelgruenen Verlauf. Mit weissem Grund
   traegt EIN dunkles Logo beide Stellen und der Inhaber pflegt eine Datei. */
.slogo-paw{
  width:84px;height:84px;border-radius:50%;
  background:#FFFFFF;border:1.5px solid rgba(168,200,120,.45);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  font-size:20px;flex-shrink:0
}
.slogo-text{min-width:0}
.slogo-name{font-family:var(--font-display);font-size:17px;font-weight:400;color:white;line-height:1.2}
.slogo-name span{color:var(--green-accent)}
.slogo-sub{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:.13em;text-transform:uppercase;font-weight:600;margin-top:2px;display:block}

/* Role pill */
.srole{padding:10px 12px 6px}
.role-pill{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:9px 13px;cursor:pointer;
  transition:background .15s;width:100%;border-width:1px;
  font-family:var(--font-body)
}
.role-pill:hover{background:rgba(255,255,255,.1)}
.role-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:background .2s}
.role-pill-label{font-size:12px;color:rgba(255,255,255,.85);font-weight:600;flex:1;text-align:left}
.role-pill-chevron{font-size:11px;color:rgba(255,255,255,.3)}

.sdiv{border-top:1px solid rgba(255,255,255,.05);margin:4px 0}

/* Nav */
.snav{flex:1;padding:6px 10px;overflow-y:auto;overflow-x:hidden}
.nav-sec-lbl{
  font-size:9px;color:rgba(255,255,255,.32);letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;padding:10px 10px 3px;
  pointer-events:none
}
.nb{
  display:flex;align-items:center;width:100%;text-align:left;
  padding:8px 10px;border-radius:10px;border:none;
  background:transparent;color:rgba(255,255,255,.7);
  font-size:13px;font-weight:500;cursor:pointer;margin-bottom:1px;
  font-family:var(--font-body);
  transition:all .15s;letter-spacing:.01em;gap:10px
}
.nb .ni{
  width:28px;height:28px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:14px;background:rgba(255,255,255,.06);
  flex-shrink:0;transition:background .15s
}
.nb:hover{color:rgba(255,255,255,.95);background:rgba(255,255,255,.06)}
.nb:hover .ni{background:rgba(255,255,255,.1)}
.nb.on{background:rgba(168,200,120,.22);color:#D0F0A0;font-weight:600;position:relative}
.nb.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--green-accent);border-radius:0 2px 2px 0}
.nb.on .ni{background:rgba(168,200,120,.32)}
.nav-badge{
  margin-left:auto;background:rgba(200,100,100,.35);color:#F4A0A0;
  font-size:10px;font-weight:700;border-radius:20px;padding:1px 7px;line-height:1.6
}
.nb.on .nav-badge{background:rgba(168,200,120,.3);color:#A8E878}

/* User info */
.su{
  margin:8px 12px 10px;padding:10px 13px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:10px
}
.su-avatar{
  width:32px;height:32px;border-radius:50%;
  background:rgba(168,200,120,.12);border:1.5px solid rgba(168,200,120,.35);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0
}
.su-info{}
.su small{font-size:9px;color:rgba(255,255,255,.3);display:block;margin-bottom:2px;letter-spacing:.06em;text-transform:uppercase}
.su b{font-size:12px;color:var(--green-accent);font-weight:600}

/* ===== CARDS & LAYOUT ===== */
.card{
  background:var(--surface);border-radius:var(--r);padding:22px;
  border:1px solid var(--border);
  margin-bottom:18px;
  box-shadow:var(--shadow-sm);
  color:var(--text)
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;min-height:44px;border-radius:var(--r-sm);border:none;
  background:var(--green-dark);color:white;
  font-size:13px;font-weight:600;cursor:pointer;
  font-family:var(--font-body);
  transition:background .15s,box-shadow .15s,transform .15s var(--ease-out);
  letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(40,69,46,.28)
}
.btn:hover{background:#2E5226;box-shadow:0 4px 16px rgba(40,69,46,.32);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:0 1px 4px rgba(40,69,46,.2)}
.btn:focus-visible{outline:3px solid rgba(168,200,120,.5);outline-offset:2px}

.btn2{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;min-height:44px;border-radius:var(--r-sm);
  border:1.5px solid #C8D8B8;
  background:var(--surface);color:var(--green-dark);
  font-size:13px;font-weight:500;cursor:pointer;
  font-family:var(--font-body);
  transition:background .15s,border-color .15s,box-shadow .15s
}
.btn2:hover{background:var(--green-50);border-color:var(--green-accent);box-shadow:0 2px 8px rgba(40,69,46,.08)}
.btn2:focus-visible{outline:3px solid rgba(168,200,120,.5);outline-offset:2px}

/* Destructive */
.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;min-height:44px;border-radius:var(--r-sm);border:none;
  background:var(--danger-bg);color:var(--danger-text);
  font-size:13px;font-weight:600;cursor:pointer;
  font-family:var(--font-body);
  border:1.5px solid var(--danger-border);
  transition:background .15s,border-color .15s
}
.btn-danger:hover{background:#f8d5d0;border-color:#C0706A}

.bsm{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 14px;min-height:38px;border-radius:var(--r-sm);border:none;
  background:var(--green-dark);color:white;font-size:12px;font-weight:600;cursor:pointer;
  font-family:var(--font-body);
  transition:background .15s,transform .15s var(--ease-out);
  box-shadow:0 2px 6px rgba(40,69,46,.2)
}
.bsm:hover{background:#2E5226;transform:translateY(-1px)}

.bsm2{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 14px;min-height:38px;border-radius:var(--r-sm);
  border:1.5px solid #C8D8B8;background:var(--surface);
  color:var(--green-dark);font-size:12px;font-weight:500;cursor:pointer;
  font-family:var(--font-body);transition:background .15s,border-color .15s
}
.bsm2:hover{background:var(--green-50);border-color:var(--green-accent)}

/* ===== INPUTS ===== */
.inp{
  width:100%;padding:11px 14px;border-radius:10px;
  border:1.5px solid #DAE4D0;background:#F8FAF6;
  font-size:14px;color:var(--green-dark);font-family:var(--font-body);
  outline:none;transition:all .2s;box-sizing:border-box
}
.inp:focus{border-color:var(--green-dark);background:var(--surface);box-shadow:0 0 0 3px rgba(40,69,46,.15);outline:none}
.inp:hover:not(:focus){border-color:var(--green-accent)}
/* Kompakte Datumsfelder (Impfungen): normal-app-grosse statt XL-Felder */
.impfdate{padding:6px 8px!important;font-size:13px!important;border-radius:8px!important}
.btnxs{min-height:0!important}

/* ===== BADGES ===== */
.badge{border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-block;white-space:nowrap;letter-spacing:.02em}
/* Gebuchte-Tage Buttons */
button.day-tag-btn{color:var(--text)}


/* Wochenplan Blätter-Buttons */
button.wp-nav-btn{color:var(--text)}
span.wp-nav-lbl{color:var(--text)}


/* Rollen-Switch Buttons im Mehr-Tab */




.bg{background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border)}
.br{background:var(--danger-bg);color:var(--danger-text);border:1px solid var(--danger-border)}
.by{background:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning-border)}
.bgr{background:#F2F2EE;color:#5A5550;border:1px solid #D4D0CC}
.bbl{background:#EAF0F8;color:#1E3A6A;border:1px solid #B4C8E8}

/* ===== TIMELINE (Tageszeitachse) ===== */
.tl{display:grid;gap:10px}
.tl-ev{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--border);background:var(--surface-alt);border-radius:14px}
.tl-time{font-size:12px;font-weight:800;color:var(--text-muted);text-align:right}
.tl-main b{display:block;font-size:13px;font-weight:700;color:var(--text)}
.tl-main span{display:block;font-size:12px;color:var(--text-muted);margin-top:1px}
@media(max-width:560px){.tl-ev{grid-template-columns:44px 1fr auto;padding:9px 10px}.tl-ev .badge{font-size:10px;padding:2px 7px}}

/* ===== GRIDS ===== */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g2>div{min-width:0}
input[type="date"]{min-width:0;max-width:100%;box-sizing:border-box}
/* #240 (v2.617) -- DIESELBE ABSICHERUNG FUER type="time". DIE ZEILE DARUEBER GAB ES SEIT
   #219/#221, FUER time NIE.
   BEFUND: Oeffnungszeiten (rmoeff/oeffRowHTML) auf dem iPhone. Die Inhaber-Zeile traegt pro
   Wochentag vier Zeitfelder plus einen 168px-Block fuer Tagname und Offen/Geschlossen.
   oeffZeitInput() setzt width:88px;flex:0 0 88px -- auf dem Desktop haelt das, auf iOS Safari
   nicht: input[type=time] hat dort eine intrinsische Mindestbreite, und ein Flex-Item steht
   per Default auf min-width:auto und gibt darunter NICHT nach. Die Zeile wurde damit breiter
   als der Viewport. Exakt die Bauart aus #219/#221, nur an einem anderen Feldtyp.
   WARUM ES IN DER EMULATION NICHT AUFFIEL (Testbericht 18.08.2026, \"#240 nicht reproduziert\"):
   die intrinsische Breite des Time-Pickers kommt von der Plattform, nicht von der Viewport-
   Breite. Ein 390px-Fenster im Desktop-Browser zeigt den Fehler darum nicht.
   -webkit-appearance:none steht bereits inline an jedem Feld und reicht allein nicht -- es
   nimmt die Optik, nicht die Mindestbreite. */
input[type="time"]{min-width:0;max-width:100%;box-sizing:border-box}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px;margin-bottom:22px}
.row{display:flex;gap:10px;align-items:center}
.bw{display:flex;justify-content:space-between;align-items:center}

/* ===== TABLES ===== */
table{width:100%;border-collapse:collapse}
th{
  padding:13px 16px;text-align:left;
  font-size:10px;font-weight:700;color:var(--text-muted);
  background:#F5F8F0;letter-spacing:.07em;text-transform:uppercase;
  border-bottom:2px solid #E8EEE0
}
td{padding:14px 16px;border-top:1px solid #EEF2E8;font-size:13px;color:#2E3A28}
tbody tr{cursor:pointer;transition:background .15s}
tbody tr:nth-child(even) td{background:var(--surface-alt)}
tbody tr:hover td{background:rgba(168,200,120,.14)}
.selrow td{background:rgba(168,200,120,.18)!important}

/* #12 Hover-Actions in Tabellen */
.tbl-actions{
  display:flex;gap:6px;align-items:center;justify-content:flex-end;
  opacity:0;transition:opacity .15s;white-space:nowrap
}
tbody tr:hover .tbl-actions{opacity:1}
.tbl-act-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:6px;border:1.5px solid;
  font-size:11px;font-weight:600;cursor:pointer;
  font-family:var(--font-body);transition:background .12s
}
.tbl-act-btn.edit{border-color:#C8D8B8;color:var(--green-dark);background:var(--surface)}
.tbl-act-btn.edit:hover{background:#F0F9E8}
.tbl-act-btn.del{border-color:var(--danger-border);color:var(--danger-text);background:var(--surface)}
.tbl-act-btn.del:hover{background:var(--danger-bg)}

/* #8 Inline-Confirm */
.inline-confirm{
  display:none;align-items:center;gap:6px;
  background:var(--danger-bg);border:1px solid var(--danger-border);
  border-radius:8px;padding:5px 10px;
  font-size:12px;color:var(--danger-text);font-weight:600;white-space:nowrap
}
.inline-confirm.show{display:inline-flex}
.inline-confirm button{
  padding:2px 8px;border-radius:5px;border:none;cursor:pointer;
  font-size:11px;font-weight:700;font-family:var(--font-body)
}
.inline-confirm .ic-yes{background:var(--danger-text);color:white}
.inline-confirm .ic-yes:hover{background:#6B1E0E}
.inline-confirm .ic-no{background:var(--surface);color:var(--green-dark);border:1px solid #C8D8B8}
.inline-confirm .ic-no:hover{background:#F0F9E8}

/* ===== MODAL ===== */
.mbg{
  position:fixed;inset:0;
  background:rgba(20,36,16,.65);
  z-index:1000;display:none;align-items:center;justify-content:center;
  padding:16px;backdrop-filter:blur(8px)
}
.mbox{
  background:var(--surface);border-radius:20px;width:100%;max-width:560px;
  max-height:92vh;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(168,200,120,.2);
  box-shadow:0 24px 80px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.12);
  animation:slideUp .28s var(--ease-out)
}
.mbox-scroll{flex:1 1 auto;overflow-y:auto;min-height:0}
.mbox-footer{flex:0 0 auto;padding:14px 19px;border-top:1px solid var(--border);background:var(--surface)}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ===== CALENDAR DAY CELLS ===== */
.dc{
  text-align:center;padding:8px 4px;border-radius:10px;cursor:pointer;
  border:2px solid var(--border);user-select:none;
  transition:all .15s;background:var(--surface);color:var(--text);
  box-shadow:0 1px 3px rgba(40,69,46,.06)
}
.dc:hover{border-color:var(--green-dark);box-shadow:0 2px 8px rgba(40,69,46,.12)}
.dc.on{background:var(--green-dark);border-color:var(--green-dark);box-shadow:0 2px 8px rgba(40,69,46,.3)}
.dc.full{background:var(--danger-bg);border-color:var(--danger-border);cursor:pointer}
.dc.gesperrt{background:var(--surface-alt);border-color:var(--border);cursor:not-allowed}
.dc.wlsel{background:#F5E1A8;border-color:#C7924A;box-shadow:0 2px 8px rgba(199,146,74,.35);cursor:pointer}

/* Capacity calendar: color-coded free slots */
.dc-free{border-color:var(--green-accent)!important;background:#F0F9E8!important}
.dc-warn{border-color:var(--green-gold)!important;background:var(--warning-bg)!important}
.dc-full-cap{border-color:#E8B8B0!important;background:var(--danger-bg)!important}

/* #1 Kapazitäts-Balken in Kalender-Zellen */
.dc-bar{height:4px;border-radius:2px;margin-top:5px;background:#E8EEE0;overflow:hidden}
.dc-bar-fill{height:100%;border-radius:2px;background:var(--green-accent);transition:width .3s}
.dc-bar-fill.warn{background:var(--green-gold)}
.dc-bar-fill.full{background:#D96060}

/* ===== WEEK TABS ===== */
.szc{
  flex:1;padding:11px 6px;border-radius:12px;cursor:pointer;text-align:center;
  border:2px solid var(--border);transition:all .15s;background:var(--surface);color:var(--text);
  box-shadow:0 1px 3px rgba(40,69,46,.06)
}
.szc:hover{border-color:var(--green-dark)}
.szc.on{border-color:var(--green-dark);background:var(--success-bg);box-shadow:0 2px 8px rgba(40,69,46,.12)}
/* v2.387: Groessen-Chip, der nicht zur im Hundeprofil hinterlegten Groesse passt -- sichtbar,
   aber nicht anklickbar (Preisorientierung bleibt erhalten, Fehlbuchung wird verhindert). */
.szc.locked{opacity:.42;cursor:not-allowed;filter:grayscale(.5);box-shadow:none}
.szc.locked:hover{border-color:var(--border)}

/* ===== STATUS CIRCLES ===== */
.sc{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:#E4EDD8;color:#7A9068}
.sc.d{background:var(--green-accent);color:var(--green-dark)}
.sc.c{background:var(--green-dark);color:white}

/* ===== LIST ITEMS ===== */
.ci{
  padding:13px 15px;border-radius:13px;cursor:pointer;
  border:2px solid var(--border);background:var(--surface);margin-bottom:6px;
  transition:all .15s;box-shadow:0 1px 3px rgba(40,69,46,.05);
  position:relative;color:var(--text)
}
/* Helle Kacheln - immer Light Mode, Safari soll nichts umfärben */
.lcard{
  background:white!important;
  color:#2C2520!important;
  color-scheme:light;
  -webkit-color-scheme:light;
}
.lcard *{color:inherit}
/* Spezifische Überschreibungen für farbige Elemente innerhalb lcard */
.lcard [style*="color:#A0432E"]{color:#A0432E!important}
.lcard [style*="color:#4A7C59"]{color:#4A7C59!important}
.lcard [style*="color:#3A6B47"]{color:#3A6B47!important}
.lcard [style*="color:var(--text-muted)"]{color:var(--text-muted)!important}
.lcard [style*="color:#B06040"]{color:#B06040!important}
.ci:hover{border-color:var(--green-dark);box-shadow:0 2px 8px rgba(40,69,46,.1)}
.ci.on{border-color:var(--green-dark);background:#EBF4E0}
/* #6 Chevron als visueller Klick-Indikator */
.ci::after{
  content:'›';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:18px;color:var(--green-accent);opacity:.6;font-weight:400;
  transition:opacity .15s,right .15s
}
.ci:hover::after{opacity:1;right:11px}

/* ===== TOGGLE ===== */
.tgl{width:40px;height:22px;border-radius:11px;cursor:pointer;position:relative;flex-shrink:0;display:inline-block;vertical-align:middle;transition:background .2s}
.tgl-dot{position:absolute;top:3px;width:16px;height:16px;border-radius:50%;background:white;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* ===== LABELS ===== */
.lbl{font-size:11px;color:#7A9068;font-weight:700;display:block;margin-bottom:5px;letter-spacing:.04em;text-transform:uppercase}

/* ===== HAMBURGER (mobile) ===== */
#hbg{
  display:none;position:fixed;top:12px;left:12px;z-index:999;
  background:var(--green-dark);border:none;color:white;
  width:44px;height:44px;border-radius:12px;cursor:pointer;font-size:18px;
  font-family:var(--font-body);
  box-shadow:0 4px 12px rgba(40,69,46,.3)
}
#ovl{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:800}

/* ===== TYPOGRAPHY ===== */
h1{font-family:var(--font-display);font-weight:400;font-size:34px;color:var(--text);letter-spacing:-.02em;line-height:1.15}
h2{font-family:var(--font-display);font-weight:400;font-size:24px;color:var(--text);letter-spacing:-.01em}
h3{font-family:var(--font-body);font-weight:600;font-size:16px;color:var(--text);letter-spacing:.01em}

/* ===== PAGE HEADER PATTERN ===== */
.ph{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:24px;gap:12px;
  position:sticky;top:0;z-index:100;
  background:rgba(246,244,239,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:14px 0 12px;margin-top:-14px;
}
.ph h1{font-size:28px;font-style:italic}
.ph-sub{font-size:13px;color:var(--text-muted);margin-top:4px;font-weight:400;letter-spacing:.01em}
/* Section titles */
.section-title{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid rgba(168,200,120,.2)}

/* #13 Formular-Sektionen */
.form-section{
  background:var(--surface-alt);border:1.5px solid #E8EEE0;
  border-radius:14px;padding:18px 18px 14px;margin-bottom:16px
}
.form-section .section-title{
  margin-top:0;color:var(--green-dark);border-color:rgba(168,200,120,.3)
}

/* ===== GOLD ACCENT ===== */
.gold{color:var(--green-gold);font-weight:600}
.gold-bg{background:var(--warning-bg);border:1px solid var(--warning-border)}

/* ===== DASHBOARD KPI CARDS ===== */
.kpi-card{
  background:var(--surface);border-radius:var(--r);padding:20px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:4px;
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
  position:relative;overflow:hidden;cursor:pointer
}
.kpi-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--kpi-accent,var(--green-accent))
}
.kpi-icon{
  width:36px;height:36px;border-radius:10px;
  background:var(--kpi-icon-bg,var(--green-50));
  display:flex;align-items:center;justify-content:center;
  font-size:18px;margin-bottom:6px;flex-shrink:0
}
.kpi-label{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.kpi-value{
  font-size:40px;font-weight:400;font-style:italic;
  color:var(--kpi-accent,var(--green-dark));
  font-family:var(--font-display);line-height:1;margin:2px 0
}
.kpi-sub{font-size:11px;color:var(--text-light);letter-spacing:.01em}

/* #2 KPI Trend-Pfeil */
.kpi-trend{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:700;margin-top:2px;
  border-radius:20px;padding:2px 7px;
}
.kpi-trend.up{color:var(--success-text);background:var(--success-bg)}
.kpi-trend.down{color:var(--danger-text);background:var(--danger-bg)}
.kpi-trend.neutral{color:var(--warning-text);background:var(--warning-bg)}

/* #3 Donut SVG in KPI */
.kpi-donut{display:flex;justify-content:center;margin:4px 0}
.kpi-donut svg{transform:rotate(-90deg)}

/* ===== KPI-KARTEN, KOMPAKTE ZEILEN-VARIANTE (v2.241, Michael: "stylischer, eleganter, aber
   nicht so breit und untereinander") -- eigene Klassennamen bewusst getrennt von .kpi-card/.kpi-
   value/etc, da diese an mehreren Stellen spaeter im Stylesheet mit !important ueberschrieben
   werden (Skin-Layer + Serif-Redesign-Layer) und ein Wiederverwenden dort unvorhersehbar mit
   diesen Regeln kollidiert haette. Statt der grossen quadratischen Kachel (viel Weissraum um eine
   einzelne grosse Zahl) jetzt eine schlanke Zeile: Icon links, Label+Zahl+Zusatzinfo rechts in
   kompakter Hoehe -- wirkt auch bei voller Bildschirmbreite nicht "breit", da der Inhalt die
   Flaeche gleichmaessig ausfuellt statt viel Leerraum stehen zu lassen. */
.kpi-h-wrap{display:flex;flex-direction:column;gap:10px}
.kpi-h-card{
  background:var(--surface);border-radius:16px;padding:13px 15px;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:12px;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .18s var(--ease-out,ease),box-shadow .18s var(--ease-out,ease)
}
.kpi-h-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.kpi-h-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--kpi-accent,var(--green-accent))}
.kpi-h-icon{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:var(--kpi-icon-bg,var(--green-50));
  display:flex;align-items:center;justify-content:center;font-size:19px
}
.kpi-h-body{flex:1;min-width:0}
.kpi-h-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.kpi-h-label{font-size:10.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-h-row{display:flex;align-items:baseline;gap:8px;margin-top:2px;flex-wrap:wrap}
.kpi-h-value{font-size:24px;font-weight:400;font-style:italic;font-family:var(--font-display);line-height:1;color:var(--kpi-accent,var(--green-dark))}
.kpi-h-sub{font-size:11.5px;color:var(--text-light);letter-spacing:.01em}
.kpi-h-badge{
  display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;
  border-radius:20px;padding:2px 8px;white-space:nowrap;flex-shrink:0
}
.kpi-h-badge.up{color:var(--success-text);background:var(--success-bg)}
.kpi-h-badge.down{color:var(--danger-text);background:var(--danger-bg)}
.kpi-h-badge.neutral{color:var(--warning-text);background:var(--warning-bg)}
@media(min-width:681px){.kpi-h-wrap{max-width:460px}}
/* Fix (Michael 17.07.2026): auf Laptop/Desktop-Breite genug Platz, um "Hunde heute",
   "Offene Rechnungen" und "Überfällig" nebeneinander statt untereinander zu zeigen -- max-width-
   Regel oben (fuer Tablet-Breite) bleibt bestehen, ab 900px wird sie hier ueberschrieben.
   max-width entfernt (statt fix 820px wie bei 2 Kacheln), damit sich 3 Kacheln gleichmaessig
   ueber die verfuegbare Breite verteilen; auf Handy/Tablet bleibt es unveraendert untereinander. */
@media(min-width:900px){
  .kpi-h-wrap{flex-direction:row;max-width:none}
  .kpi-h-card{flex:1;min-width:0}
}

/* ===== RESPONSIVE ===== */
@media(max-width:680px){
  #hbg{display:none}
  .sb{position:fixed;top:0;left:0;bottom:0;z-index:900;transform:translateX(-100%);transition:transform .25s;width:268px;padding-top:env(safe-area-inset-top,0px)}
  .sb.op{transform:translateX(0)}
  #ovl.op{display:block}
  /* #203 (v2.579): ACHTUNG BEIM LESEN -- diese Zeile ist auf dem Handy WIRKUNGSLOS. Der
     Block @media(max-width:900px) weiter unten setzt .ct{padding:...!important} und gewinnt.
     Die 68px hier haben auf keinem Mobilgeraet je gegolten; wer den Abstand oben aendern
     will, muss die 900er-Regel anfassen, nicht diese (Lehre 2, !important-Falle). Sie bleibt
     nur stehen und wird mitgepflegt, damit die beiden Stellen nicht Verschiedenes sagen. */
  .ct{padding:14px;padding-top:calc(68px + env(safe-area-inset-top,0px));padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .g4{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr 1fr}
  .g2{grid-template-columns:1fr}
  .kg{grid-template-columns:1fr!important}
  /* impfgrid obsolete – removed */
  .card{padding:16px;margin-bottom:14px;border-radius:14px}
  .btn,.btn2{min-height:50px;font-size:14px;padding:13px 18px}
  .btnxs{min-height:0!important;font-size:11px!important;padding:5px 11px!important}
  .bsm,.bsm2{min-height:46px;font-size:13px;padding:11px 14px}
  .inp{font-size:16px!important;padding:13px 14px}
  .impfdate{font-size:16px!important;padding:6px 8px!important}
  select{font-size:16px!important}
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card table{min-width:max-content}
  th{font-size:11px;padding:9px 10px;white-space:nowrap}
  td{font-size:12px;padding:9px 10px;white-space:nowrap}
  .g4 .card{padding:14px 12px}
  .g4 .card h2{font-size:26px}
  .dc{padding:5px 2px;min-width:40px;border-radius:8px}
  .dc>div:first-child{font-size:12px}
  .dc .dc-num{font-size:18px!important;line-height:1}
  .szc{padding:9px 5px;font-size:12px}
  .mbox{border-radius:16px;max-height:96vh}
  .mbg{padding:8px;align-items:flex-end}
  .badge{font-size:10px;padding:2px 8px}
  #hbg{width:46px;height:46px;font-size:20px;border-radius:12px;top:10px;left:10px}
  h1{font-size:22px!important}
  h2{font-size:18px!important}
  .nb{font-size:14px;padding:12px 14px;min-height:46px}
  .wl-hint{font-size:13px}
  .row{flex-wrap:wrap}
  /* #10 Tab-Scroll-Fade-Indicator */
  .wplan-tabs{
    overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;
    position:relative
  }
  .wplan-tabs-wrap{
    position:relative
  }
  .wplan-tabs-wrap::after{
    content:'';position:absolute;right:0;top:0;bottom:4px;width:32px;
    background:linear-gradient(to right,transparent,rgba(246,244,239,.95));
    pointer-events:none;border-radius:0 12px 12px 0;
    opacity:1;transition:opacity .2s
  }
  .wplan-tabs-wrap.scrolled-end::after{opacity:0}
  .lbl{font-size:11px}
  .ausl-grid{grid-template-columns:1fr!important}
  .kpi-card{padding:16px}
  .kpi-value{font-size:28px}

  /* ===== Mobile bottom nav -- #168 (v2.561): EINZIGE massgebende Regel =====
     Der Leerraum unter den Beschriftungen hatte drei Quellen, die sich gegenseitig nicht
     kannten: diese Basisregel, ein zweiter Block bei @media(max-width:768px) und ein
     dritter, medienloser Block im Skin-Teil (".mob-nav, nav.mob-nav, .pill-nav"). Der
     mittlere gewann mit !important, der untere bei den Eigenschaften ohne -- welcher Wert
     tatsaechlich zaehlte, hing an der Eigenschaft. Genau darum kam der Fehler immer wieder:
     wer die naheliegende Stelle korrigierte, korrigierte die falsche (Architektur-Lehre 4).
     Alle drei sind jetzt hier zusammengelegt; die beiden anderen Bloecke sind entfernt.
     BREAKPOINT: 680px, nicht 768px. Ab 681px steht .mob-nav{display:none} -- der 768er-Block
     hat nie etwas Sichtbares gesteuert, er hat nur die Zustaendigkeit verschleiert.
     ABSTAND NACH UNTEN: env(safe-area-inset-bottom) BLEIBT (auf dem iPhone im
     Startbildschirm-Modus 34px fuer den Home-Indicator, im Browser-Tab 0). Die zusaetzlichen
     8px Innenabstand darunter sind weg, die Knopfhoehe unten von 11px auf 6px zurueck --
     zusammen rund 17px weniger Totraum, ohne dass die Leiste ueber den Indicator rutscht.
     Michael 10.08.2026: "dass es nicht so hoch auf dem Handy ersichtlich ist."
     NICHT ZURUECK ZUR SCHWEBENDEN PILLE (Entscheid 20.07.2026) -- randlose Tab-Leiste. */
  .mob-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;width:100%;
    padding:8px 8px calc(env(safe-area-inset-bottom, 0px));
    border-radius:20px 20px 0 0;
    background:color-mix(in oklab, var(--nx-cream) 82%, white);
    backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px);
    border:1px solid var(--nx-line-strong);
    border-left:none;border-right:none;border-bottom:none;
    box-shadow:0 -8px 24px rgba(21,24,18,.12);
    z-index:700
  }
  html.dark .mob-nav, [data-theme="dark"] .mob-nav{
    background:color-mix(in oklab, #101208 85%, white 3%);
  }
  .mob-nav-btn{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:8px 4px 6px;border:none;background:transparent;cursor:pointer;
    border-radius:16px;
    font-size:10px;font-weight:600;color:#9DB090;font-family:var(--font-body);
    transition:background .2s var(--nx-ease), color .2s var(--nx-ease), transform .2s var(--nx-spring);
    position:relative
  }
  .mob-nav-btn:active{transform:scale(.94)}
  /* #168 (v2.561): der Strich-Indikator ueber dem aktiven Knopf ist entfallen. Er war seit
     der Umstellung auf die Pillen-Markierung ohnehin abgeschaltet (display:none) und stand
     nur noch als toter Rest da. */
  .mob-nav-btn.on{
    background:linear-gradient(180deg, color-mix(in oklab, var(--nx-moss) 22%, transparent), color-mix(in oklab, var(--nx-moss) 10%, transparent));
    color:var(--nx-forest);
  }
  html.dark .mob-nav-btn.on, [data-theme="dark"] .mob-nav-btn.on{
    background:linear-gradient(180deg, color-mix(in oklab, var(--nx-moss) 38%, transparent), color-mix(in oklab, var(--nx-moss) 20%, transparent));
    color:#EAF6DE;
  }
  .mob-nav-btn span:first-child{font-size:22px;line-height:1}
  /* Platz ueber der Leiste, damit der letzte Inhalt nicht darunter verschwindet. */
  .shell, main, body{padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px))!important}
}

@media(min-width:681px){
  .mob-nav{display:none}
}

@media(max-width:390px){
  .g4{grid-template-columns:1fr 1fr}
  .card{padding:13px}
  th,td{font-size:11px;padding:8px 9px}
  .btn,.btn2{font-size:13px}
}

/* ===== MOBILE CARD-ROW TABLES ===== */
@media(max-width:680px){
  .wl-tbl thead{display:none}
  .wl-tbl tbody tr{display:block;border-bottom:1px solid #EEF2E8;padding:12px 14px;position:relative}
  .wl-tbl tbody td{display:inline;padding:0;border:none;white-space:normal;font-size:13px}
  .wl-tbl tbody td::before{content:attr(data-label);font-size:10px;font-weight:700;color:#A0B090;text-transform:uppercase;letter-spacing:.04em;display:block;margin-top:8px}
  .wl-tbl td.wl-actions{display:block;margin-top:10px}
  .rg-tbl thead{display:none}
  .rg-tbl tbody tr{display:block;border-bottom:1px solid #EEF2E8;padding:12px 14px}
  .rg-tbl tbody td{display:block;padding:1px 0;border:none;white-space:normal;font-size:13px}
  .rg-tbl td.rg-nr{font-weight:700;font-size:12px;color:#7A9068}
  .rg-tbl td.rg-betrag{font-size:15px;font-weight:800;display:inline!important}
  .rg-tbl td.rg-status{display:inline!important;margin-left:6px}
  .rg-tbl td.rg-fael{font-size:11px;color:var(--text-muted);display:inline!important;margin-left:8px}
  .rg-tbl td.rg-actions{margin-top:8px}
  .impf-tbl{min-width:480px}
}

/* ===== PRINT MODE ===== */
#pm{
  display:none;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:12px;color:#1A1A1A;background:white;
  width:100%;box-sizing:border-box;margin:0 auto;padding:20px 16px
}
body.pm-open{overflow-x:hidden;background:#e8e4de}
@media(min-width:640px){#pm{padding:32px 40px}}
#pm .rg-addr-row{flex-wrap:wrap;gap:16px}
#pm .rg-meta{flex-wrap:wrap}
#pm .rg-meta-cell{min-width:120px}
@media(max-width:480px){#pm .rg-addr-row{flex-direction:column;gap:12px}#pm .rg-meta{flex-direction:column}#pm table{font-size:11px}}

/* Rechnung-spezifische Klassen */
#pm .rg-page{position:relative}

/* Header Bereich */
#pm .rg-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px}
#pm .rg-logo-block{}
#pm .rg-logo-name{font-size:22px;font-weight:700;color:#1E3A20;letter-spacing:-.02em;line-height:1.1}
#pm .rg-logo-name span{color:#5A8A3A}
#pm .rg-logo-sub{font-size:10px;color:#8A8078;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
#pm .rg-type-block{text-align:right}
#pm .rg-type-title{font-size:28px;font-weight:300;color:#1E3A20;letter-spacing:-.01em}
#pm .rg-type-nr{font-size:11px;color:#8A8078;margin-top:4px;letter-spacing:.04em}

/* Grüne Trennlinie */
#pm .rg-rule{height:2px;background:linear-gradient(to right,#2E5226,var(--green-accent));margin:0 0 32px;border:none}

/* Adressen */
#pm .rg-addr-row{display:flex;gap:40px;margin-bottom:36px}
#pm .rg-addr-block{flex:1}
#pm .rg-addr-lbl{font-size:9px;font-weight:700;color:#8A8078;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;border-bottom:1px solid #E8E0D5;padding-bottom:4px}
#pm .rg-addr-name{font-size:14px;font-weight:700;color:#1A1A1A;margin-bottom:2px}
#pm .rg-addr-line{font-size:12px;color:#5A5550;line-height:1.7}

/* Meta-Zeilen (Datum, Fällig, Status) */
#pm .rg-meta{display:flex;gap:0;margin-bottom:32px;border:1px solid #E8E0D5;border-radius:4px;overflow:hidden}
#pm .rg-meta-cell{flex:1;padding:10px 16px;border-right:1px solid #E8E0D5}
#pm .rg-meta-cell:last-child{border-right:none}
#pm .rg-meta-lbl{font-size:9px;font-weight:700;color:#8A8078;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
#pm .rg-meta-val{font-size:13px;font-weight:600;color:#1A1A1A}
#pm .rg-meta-val.faellig{color:#C0392B}
#pm .rg-meta-val.bezahlt{color:#2E7D4A}
#pm .rg-meta-val.offen{color:#C0392B}

/* Positionstabelle */
#pm .rg-tbl{width:100%;border-collapse:collapse;margin-bottom:0;table-layout:fixed}
#pm .rg-tbl thead tr{border-bottom:2px solid #1E3A20}
#pm .rg-tbl thead th{padding:10px 12px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5A5550;text-align:left;background:none!important;border:none!important}
#pm .rg-tbl thead th.r{text-align:right}
#pm .rg-tbl tbody tr{border-bottom:1px solid #EDE8E0}
#pm .rg-tbl tbody tr:last-child{border-bottom:none}
#pm .rg-tbl tbody td{padding:11px 12px;font-size:13px;color:#2A2520;vertical-align:top;border:none!important;background:none}
#pm .rg-tbl tbody td.r{text-align:right;font-weight:600;white-space:nowrap}
#pm .rg-tbl tbody td .td-sub{font-size:10px;color:#8A8078;margin-top:1px}
#pm .rg-tbl tbody tr:nth-child(even) td{background:#FAFAF8!important}
#pm .rg-tbl tfoot tr{border-top:2px solid #1E3A20;background:#F4F0EA!important}
#pm .rg-tbl tfoot td{padding:13px 12px;font-size:15px;font-weight:800;color:#1E3A20;border:none!important;background:#F4F0EA!important}
#pm .rg-tbl tfoot td.r{text-align:right;font-size:18px}
#pm .rg-tbl .gs-row td{color:#C0392B}

/* Status-Badge */
#pm .rg-status-bar{margin-top:24px;padding:14px 20px;border-radius:4px;display:flex;align-items:center;gap:10px}
#pm .rg-status-bar.bezahlt{background:#EDF7F0;border:1px solid var(--success-border)}
#pm .rg-status-bar.offen{background:#FEF0EE;border:1px solid #EABBB5}
#pm .rg-status-bar .sb-icon{font-size:18px}
#pm .rg-status-bar .sb-text{font-size:13px;font-weight:600}
#pm .rg-status-bar.bezahlt .sb-text{color:#2E7D4A}
#pm .rg-status-bar.offen .sb-text{color:#C0392B}
#pm .rg-status-bar .sb-sub{font-size:11px;color:#8A8078;margin-left:auto}

/* Bemerkung */
#pm .rg-notiz{margin-top:20px;padding:12px 16px;background:#F8F4EE;border-left:3px solid var(--green-accent);font-size:12px;color:#5A5550;line-height:1.6}
#pm .rg-notiz b{color:#2E5226}

/* Footer */
#pm .rg-footer{margin-top:48px;padding-top:14px;border-top:1px solid #E8E0D5;display:flex;justify-content:space-between;align-items:center}
#pm .rg-footer-left{font-size:10px;color:#A09890;line-height:1.7}
#pm .rg-footer-right{font-size:10px;color:#A09890;text-align:right}

/* Wochenplan/Tagesblatt bleiben mit alten Klassen */
#pm h1{font-size:20px;color:#1a3d12;margin:0 0 4px;font-weight:800;letter-spacing:-.01em}
#pm h2{font-size:13px;color:#1a3d12;margin:18px 0 6px;font-weight:700}
#pm .sub{font-size:12px;color:#7A7068;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid #E0D8D0}
#pm table:not(.rg-tbl){width:100%;border-collapse:separate;border-spacing:0;margin-bottom:14px;font-size:11px;table-layout:fixed}
#pm table:not(.rg-tbl) colgroup{}
#pm table:not(.rg-tbl) th{background:var(--green-dark);color:white;padding:6px 10px;text-align:left;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#pm .rg-tbl th{background:none!important;color:inherit!important;border:none!important;padding:0!important}
#pm table:not(.rg-tbl) td{border:1px solid #E0D8D0;border-left:none;border-right:none;padding:6px 10px;vertical-align:top;word-break:break-word}
#pm table:not(.rg-tbl) tr:nth-child(even) td{background:#F8F5F0}
#pm table:not(.rg-tbl) tr:hover td{background:#F0EDE8}
#pm .bn{font-weight:700}
#pm .tot td{font-weight:700;background:#F0EBE0!important}
#pm .gs{color:#A09890}
#pm .med{color:#A0432E}
#pm .bb{break-inside:avoid;margin-bottom:20px;border-radius:8px;border:1px solid #E0D8D0;box-shadow:0 1px 4px rgba(0,0,0,.06)}
#pm table:not(.rg-tbl) tr{page-break-inside:avoid;break-inside:avoid}
#pm table:not(.rg-tbl) thead{display:table-header-group}
#pm table:not(.rg-tbl) thead tr{break-after:avoid;page-break-after:avoid}
#pm .bb table:not(.rg-tbl){margin-bottom:0}
#pm .bb table:not(.rg-tbl) tbody tr:last-child td:first-child{border-radius:0 0 0 7px}
#pm .bb table:not(.rg-tbl) tbody tr:last-child td:last-child{border-radius:0 0 7px 0}
#pm .bh{padding:9px 14px;color:white;font-weight:800;font-size:13px;letter-spacing:.02em;border-radius:7px 7px 0 0}
#pm .iok{color:#4A7C59;font-weight:700}
#pm .iwarn{color:#D4860A;font-weight:700}
#pm .ifehlt{color:#A0432E;font-weight:700}
#pm .ts{margin-top:16px;font-size:9px;color:#A09890;border-top:1px solid #E0D5C0;padding-top:6px}

#pm-close{display:none;position:fixed;top:0;left:0;right:0;background:var(--green-dark);color:white;padding:10px 16px;align-items:center;justify-content:space-between;z-index:9999;gap:10px}
@media screen{
  body.pm-open{background:#EDEAE4;min-height:100vh}
  #pm{margin-top:60px;border-radius:12px;box-shadow:0 4px 32px rgba(0,0,0,.12);background:white;min-width:min(900px,100%)}
  #pm .bb{overflow-x:auto}
  #pm table:not(.rg-tbl){min-width:700px}
}
@media print{
  @page{size:A4 landscape;margin:12mm 14mm}
  #pm-close{display:none!important}
  #pm{display:block!important;padding:0;max-width:none;font-size:11px}
  #app{display:none!important}
  #pm .rg-rule{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #pm .rg-tbl tfoot tr{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #pm .rg-status-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #pm .bh{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #pm th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #pm table:not(.rg-tbl) th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #pm .bb{box-shadow:none}
}
/* #pa entfernt - doPrint() nutzt #pm */

/* ===== SUBTLE ANIMATIONS ===== */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.card{animation:fadeIn .28s var(--ease-out)}
.kpi-card{animation:fadeIn .22s var(--ease-out)}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C8D8B8;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--green-accent)}

/* ===== MISC UTILITIES ===== */
.text-muted{color:var(--text-muted)}
.text-sm{font-size:12px}
.text-xs{font-size:11px}
.fw-bold{font-weight:700}
.fw-semi{font-weight:600}

/* ===== EMPTY STATES ===== */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  padding:52px 24px;text-align:center;gap:8px
}
.empty-state .es-icon{font-size:44px;opacity:.35;margin-bottom:4px;line-height:1}
.empty-state .es-title{font-family:var(--font-display);font-size:18px;font-style:italic;color:var(--text-muted)}
.empty-state .es-body{font-size:13px;color:var(--text-light);max-width:280px;line-height:1.6}
.empty-state .es-action{margin-top:12px}

/* v2.367 (Michael: "Nein kein Fehler" -- Buchung fuer Bello kam trotzdem nie in Supabase an):
   #huta-test-panel wurde bisher komplett ungestyled per appendChild ans Ende von <body> gehaengt --
   dadurch waren Sync-Fehlermeldungen (z.B. fehlgeschlagener Rechnung/Buchung-Insert) zwar technisch
   im DOM vorhanden, aber unsichtbar (kein z-index/Position, irgendwo im normalen Fluss versteckt).
   Jetzt als fixierter, auffaelliger Banner am unteren Bildschirmrand -- Tap schliesst ihn wieder. */
#huta-test-panel{
  position:fixed;left:10px;right:10px;bottom:14px;z-index:99999;
  background:#A0432E;color:#fff;font-family:inherit;font-size:12px;line-height:1.5;
  padding:12px 14px;border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.35);
  white-space:pre-wrap;max-height:40vh;overflow-y:auto;cursor:pointer
}
#huta-test-panel:empty{display:none!important}

/* ============================================================
   Block 2 von 6 -- ausgelagert aus huta_v2_390_TEST.html
   Originaltag: <style id="myhuta-next-skin">   (Zeilen 890-1108)
   ============================================================ */
:root{
  --nx-ink:#151812;
  --nx-ink-2:#3a4038;
  --nx-cream:#FAF7F0;
  --nx-cream-2:#F3EEE3;
  --nx-forest:#1E3A20;
  --nx-forest-2:var(--green-dark);
  --nx-moss:#7FA463;
  --nx-gold:#B08a3e;
  --nx-line:rgba(21,24,18,.08);
  --nx-line-strong:rgba(21,24,18,.14);
  --nx-shadow-soft:0 1px 2px rgba(21,24,18,.04), 0 8px 24px -12px rgba(21,24,18,.12);
  --nx-shadow-lift:0 2px 4px rgba(21,24,18,.05), 0 20px 40px -18px rgba(21,24,18,.22);
  --nx-shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --nx-radius:18px;
  --nx-radius-sm:12px;
  --nx-radius-lg:24px;
  --nx-ease:cubic-bezier(.22,.61,.36,1);
  --nx-spring:cubic-bezier(.34,1.56,.64,1);
}
html.dark, [data-theme="dark"]{
  --nx-ink:#F5F2EA;
  --nx-ink-2:#C6C0B2;
  --nx-cream:#14170F;
  --nx-cream-2:#1B1F16;
  --nx-line:rgba(255,255,255,.07);
  --nx-line-strong:rgba(255,255,255,.12);
  --nx-shadow-soft:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --nx-shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 20px 40px -18px rgba(0,0,0,.7);
  --nx-shadow-inset:inset 0 1px 0 rgba(255,255,255,.04);
}

/* Global body polish + safe-area */
body{
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-feature-settings:"ss01","cv11","tnum" 1;
  letter-spacing:-.005em;
  color:var(--nx-ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, color-mix(in oklab, var(--nx-moss) 10%, transparent), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, color-mix(in oklab, var(--nx-gold) 8%, transparent), transparent 60%),
    var(--nx-cream) !important;
  padding-left:max(0px, env(safe-area-inset-left));
  padding-right:max(0px, env(safe-area-inset-right));
}

/* Refined display type for headings */
h1,h2,h3,.slogo-title,.hero-title,.box-title,.welcome,.kpi-value{
  font-family:'Fraunces', 'Times New Roman', serif !important;
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 96;
  letter-spacing:-.02em;
  font-weight:600 !important;
}

/* Cards: crisper edges, elegant lift */
.card, .kpi-card, .box{
  border-radius:var(--nx-radius) !important;
  border:1px solid var(--nx-line) !important;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--nx-cream) 60%, white) 0%, var(--nx-cream) 100%) !important;
  box-shadow:var(--nx-shadow-soft), var(--nx-shadow-inset) !important;
  transition:transform .35s var(--nx-ease), box-shadow .35s var(--nx-ease) !important;
}
html.dark .card, html.dark .kpi-card, html.dark .box,
[data-theme="dark"] .card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .box{
  background:linear-gradient(180deg, color-mix(in oklab, var(--nx-cream) 92%, white 4%) 0%, var(--nx-cream) 100%) !important;
}
.card:hover, .kpi-card:hover{
  transform:translateY(-2px) !important;
  box-shadow:var(--nx-shadow-lift), var(--nx-shadow-inset) !important;
}

/* KPI value refinement */
.kpi-value{ font-size:34px !important; line-height:1.05 !important; letter-spacing:-.03em !important; }
.kpi-label{ letter-spacing:.14em !important; font-size:10.5px !important; opacity:.75; }

/* Buttons: primary as forest w/ subtle gradient + press */
.btn{
  border-radius:14px !important;
  background:linear-gradient(180deg, var(--nx-forest-2), var(--nx-forest)) !important;
  color:#F5F1E3 !important;
  border:1px solid rgba(0,0,0,.15) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 6px 18px -8px rgba(30,58,32,.7),
    0 1px 2px rgba(0,0,0,.08) !important;
  font-weight:600 !important;
  letter-spacing:.005em !important;
  transition:transform .18s var(--nx-spring), box-shadow .25s var(--nx-ease), background .25s var(--nx-ease) !important;
}
.btn:hover{ transform:translateY(-1px) !important; box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 12px 28px -10px rgba(30,58,32,.75), 0 2px 4px rgba(0,0,0,.1) !important; }
.btn:active{ transform:translateY(1px) scale(.985) !important; }

.btn2{
  border-radius:14px !important;
  background:color-mix(in oklab, var(--nx-cream) 70%, white) !important;
  color:var(--nx-ink) !important;
  border:1px solid var(--nx-line-strong) !important;
  box-shadow:var(--nx-shadow-soft) !important;
  transition:transform .18s var(--nx-spring), background .2s var(--nx-ease) !important;
}
.btn2:hover{ background:white !important; transform:translateY(-1px) !important; }
html.dark .btn2, [data-theme="dark"] .btn2{ background:color-mix(in oklab, var(--nx-cream) 88%, white 4%) !important; color:var(--nx-ink) !important; }

/* Inputs: bigger tap target, refined focus */
.inp, input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="tel"], select, textarea{
  border-radius:12px !important;
  border:1px solid var(--nx-line-strong) !important;
  background:white !important;
  box-shadow:0 1px 0 rgba(0,0,0,.02) inset !important;
  transition:border-color .2s var(--nx-ease), box-shadow .2s var(--nx-ease) !important;
  font-family:inherit !important;
}
html.dark .inp, html.dark input, html.dark select, html.dark textarea,
[data-theme="dark"] .inp, [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{
  background:color-mix(in oklab, var(--nx-cream) 85%, black 6%) !important;
  color:var(--nx-ink) !important;
}
.inp:focus, input:focus, select:focus, textarea:focus{
  outline:none !important;
  border-color:var(--nx-moss) !important;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--nx-moss) 25%, transparent) !important;
}

/* Sticky topbar with glass */
.topbar, .slogo-topbar, header{
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  background:color-mix(in oklab, var(--nx-cream) 78%, transparent) !important;
  border-bottom:1px solid var(--nx-line) !important;
}

/* #168 (v2.561): der frueher hier stehende zweite .mob-nav-Block (@media max-width:768px)
   ist in die Regel bei @media(max-width:680px) gewandert -- eine Leiste, eine Zustaendigkeit.
   Nichts anderes an dieser Stelle einfuegen; ein neuer .mob-nav-Block hier baut den Konflikt
   wieder auf, den #168 beseitigt hat. */

/* FAB: layered, satisfying */
.fab-main{
  background:radial-gradient(120% 120% at 30% 20%, #3a6a3f 0%, var(--nx-forest) 55%, #16311a 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 10px 24px -6px rgba(30,58,32,.55),
    0 24px 60px -20px rgba(0,0,0,.35) !important;
  transition:transform .25s var(--nx-spring), box-shadow .25s var(--nx-ease) !important;
}
.fab-main:hover{ transform:translateY(-2px) scale(1.02) !important; }
.fab-main:active{ transform:scale(.94) !important; }

/* Badges get a softer shape */
.badge, .nav-badge, .wl-badge{
  border-radius:999px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
}

/* Subtle entrance for cards */
@keyframes nxRise{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.card, .kpi-card{ animation:nxRise .5s var(--nx-ease) both; }

/* Larger, easier tap targets on mobile */
@media (max-width:768px){
  .btn, .btn2{ min-height:52px !important; border-radius:14px !important; }
  .quick-btn{ border-radius:14px !important; }
}

/* Selection */
::selection{ background:color-mix(in oklab, var(--nx-moss) 45%, transparent); color:var(--nx-ink); }

/* v2.198: dezenter Gold-Akzentpunkt vor der Eyebrow-Zeile im Hero (Referenz-Mockup-Ton) */
.v2-hero .v2-eyebrow{ position:relative; padding-left:14px; }
.v2-hero .v2-eyebrow::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--nx-gold); }

/* v2.198: Suchfeld und Zaehl-Badges runder/weicher, naeher am Mockup-Pill-Look */
.v2-search{ border-radius:999px !important; }
.v2-wl-badge, .badge, .nav-badge{ border-radius:999px !important; }

/* Scrollbar (webkit) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--nx-line-strong); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:color-mix(in oklab, var(--nx-ink) 35%, transparent); }
/* ============================================================
   Block 3 von 6 -- ausgelagert aus huta_v2_390_TEST.html
   Originaltag: <style id="huta-redesign-v3">   (Zeilen 1120-1632)
   ============================================================ */
/* ---------- 1. TOKENS (OKLCH-basiert, semantisch) ---------- */
:root{
  /* Neutrals warm */
  --n-0:  oklch(99% 0.005 95);
  --n-50: oklch(97.2% 0.008 92);
  --n-100:oklch(94% 0.012 92);
  --n-200:oklch(88% 0.014 92);
  --n-300:oklch(78% 0.014 92);
  --n-500:oklch(56% 0.015 92);
  --n-700:oklch(38% 0.015 92);
  --n-900:oklch(22% 0.012 92);
  --n-950:oklch(15% 0.010 92);

  /* Brand grün (harmonisiert) */
  --brand-50:  oklch(96%  0.045 132);
  --brand-100: oklch(91%  0.075 132);
  --brand-300: oklch(78%  0.11  132);
  --brand-500: oklch(62%  0.12  138);
  --brand-600: oklch(52%  0.11  140);
  --brand-700: oklch(42%  0.09  142);
  --brand-900: oklch(28%  0.06  142);

  /* Akzent Gold (sparsam) */
  --gold-400: oklch(80% 0.11 82);
  --gold-500: oklch(72% 0.13 78);
  --gold-600: oklch(62% 0.13 72);

  /* Status */
  --status-ok:      oklch(65% 0.14 148);
  --status-ok-bg:   oklch(96% 0.05 148);
  --status-warn:    oklch(72% 0.14 78);
  --status-warn-bg: oklch(96% 0.06 90);
  --status-danger:  oklch(60% 0.19 25);
  --status-danger-bg:oklch(96% 0.04 25);
  --status-info:    oklch(62% 0.13 240);
  --status-info-bg: oklch(96% 0.03 240);

  /* Semantisch */
  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-alt:   var(--n-100);
  --surface-sunken:oklch(95% 0.010 92);
  --border:        oklch(88% 0.012 92 / 0.9);
  --border-strong: oklch(78% 0.014 92);
  --text:          var(--n-900);
  --text-muted:    var(--n-700);
  --text-light:    var(--n-500);
  --text-inverse:  var(--n-0);
  --accent:        var(--brand-600);
  --accent-hover:  var(--brand-700);
  --accent-soft:   var(--brand-100);
  --focus-ring:    oklch(62% 0.14 240 / .55);

  /* Radien */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full:9999px;

  /* Elevation – warm-grün getönt */
  --shadow-xs: 0 1px 2px oklch(30% 0.03 140 / .06);
  --shadow-sm: 0 2px 6px oklch(30% 0.03 140 / .06), 0 1px 2px oklch(30% 0.03 140 / .04);
  --shadow-md: 0 6px 16px oklch(30% 0.03 140 / .08), 0 2px 4px oklch(30% 0.03 140 / .05);
  --shadow-lg: 0 14px 34px oklch(30% 0.03 140 / .10), 0 4px 8px oklch(30% 0.03 140 / .06);
  --shadow-xl: 0 24px 60px oklch(30% 0.03 140 / .14);

  /* Spacing 8pt */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10:40px;
  --s-12:48px; --s-16:64px;

  /* Typografie */
  --font-display: 'Fraunces', 'DM Serif Display', Georgia, serif;
  --font-body:    'Manrope', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --measure: 68ch;

  /* Motion */
  --ease-standard:  cubic-bezier(.2,.0,0,1);
  --ease-emphasized:cubic-bezier(.2,.0,0,1.15);
  --ease-out-soft:  cubic-bezier(.22,1,.36,1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
}

/* Dark Mode – eigenständig, keine Invertierung */
html[data-theme="dark"], [data-theme="dark"]{
  --bg:            oklch(16% 0.012 150);
  --surface:       oklch(20% 0.014 150);
  --surface-alt:   oklch(23% 0.016 150);
  --surface-sunken:oklch(14% 0.010 150);
  --border:        oklch(30% 0.018 150 / .8);
  --border-strong: oklch(40% 0.020 150);
  --text:          oklch(96% 0.010 92);
  --text-muted:    oklch(78% 0.012 92);
  --text-light:    oklch(62% 0.014 92);
  --accent:        oklch(72% 0.13 138);
  --accent-hover:  oklch(80% 0.13 138);
  --accent-soft:   oklch(30% 0.05 140);
  --status-ok-bg:   oklch(30% 0.06 148);
  --status-warn-bg: oklch(30% 0.06 78);
  --status-danger-bg:oklch(30% 0.06 25);
  --status-info-bg: oklch(30% 0.04 240);
  --shadow-xs: 0 1px 2px #0006;
  --shadow-sm: 0 2px 6px #0007;
  --shadow-md: 0 6px 20px #0008;
  --shadow-lg: 0 16px 40px #0009;
  --shadow-xl: 0 28px 70px #000a;
  color-scheme: dark;
}

/* ---------- 2. BASE & TYPO ---------- */
html body{
  font-family: var(--font-body);
  font-feature-settings: "cv11","ss01","ss03","kern";
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,.serif,.display{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text);
  font-variation-settings: "opsz" 96;
}
h1{ font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; }
h2{ font-size: clamp(22px, 2.4vw, 28px); }
h3{ font-size: 18px; font-weight: 600; font-family: var(--font-body); letter-spacing: -0.01em; }
p, li{ max-width: var(--measure); }
small, .small{ font-size: 12.5px; color: var(--text-muted); }

/* Zahlen tabellar & mono-tight überall */
.num, table td, table th, .kpi, .badge, .price, [data-num],
input[type="number"], input[type="date"], input[type="time"]{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum","cv11";
}

/* Selection */
::selection{ background: var(--accent-soft); color: var(--text); }

/* Fokus – konsistent, sichtbar, ruhig */
*:focus{ outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- 3. LAYOUT-CONTAINER ---------- */
main, .content, .page{ max-width: 1200px; margin-inline: auto; padding-inline: var(--s-6); }
@media (max-width: 640px){ main, .content, .page{ padding-inline: var(--s-4); } }

/* ---------- 4. CARDS ---------- */
.card, .lcard-container > .card, .kpi-card, .dash-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--s-6);
  transition: box-shadow var(--dur-2) var(--ease-standard),
              transform var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard);
}
.card:hover{ box-shadow: var(--shadow-sm); }
.card.is-interactive:hover, a.card:hover{
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* ---------- 5. BUTTONS (3-Tier-System) ---------- */
.btn, button.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  height: 40px; padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-weight: 600; font-size: 14px; letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-standard),
              border-color var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard),
              box-shadow var(--dur-1) var(--ease-standard);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn.btn-sm{ height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-xs); }
.btn.btn-lg{ height: 48px; padding: 0 20px; font-size: 15px; border-radius: var(--r); }

/* Primary */
.btn-primary, .btn.primary, button.btn-primary{
  background: var(--accent);
  color: var(--text-inverse);
  box-shadow: var(--shadow-xs), inset 0 1px 0 oklch(100% 0 0 / .15);
}
.btn-primary:hover{ background: var(--accent-hover); box-shadow: var(--shadow-sm); }

/* Secondary (outline) */
.btn-secondary, .btn.secondary, .btn-outline{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover{ background: var(--surface-alt); border-color: var(--accent); color: var(--accent); }

/* Ghost (tertiary) */
.btn-ghost, .btn.ghost, .btn-tertiary{
  background: transparent; color: var(--text-muted); border-color: transparent;
}
.btn-ghost:hover{ background: var(--surface-alt); color: var(--text); }

/* Danger */
.btn-danger{ background: var(--status-danger); color: var(--text-inverse); }
.btn-danger:hover{ filter: brightness(.95); }

/* ---------- 6. INPUTS ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea{
  font-family: var(--font-body);
  font-size: 14px;
  height: 40px;
  padding: 0 var(--s-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-1) var(--ease-standard),
              box-shadow var(--dur-1) var(--ease-standard),
              background var(--dur-1) var(--ease-standard);
  width: 100%;
}
select{height:auto;min-height:40px;padding:9px var(--s-3);box-sizing:border-box}
textarea{ height: auto; padding: 10px 12px; min-height: 96px; line-height: 1.5; }
input::placeholder, textarea::placeholder{ color: var(--text-light); }
input:hover, select:hover, textarea:hover{ border-color: var(--accent); }
input:focus, select:focus, textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
label{ font-size: 12.5px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.01em; }

/* ---------- 7. BADGES ---------- */
.badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  line-height: 1.4;
}
.badge-ok, .badge-success{ background: var(--status-ok-bg); color: var(--status-ok); border-color: color-mix(in oklch, var(--status-ok) 25%, transparent); }
.badge-warn, .badge-warning{ background: var(--status-warn-bg); color: var(--status-warn); border-color: color-mix(in oklch, var(--status-warn) 25%, transparent); }
.badge-danger, .badge-error{ background: var(--status-danger-bg); color: var(--status-danger); border-color: color-mix(in oklch, var(--status-danger) 25%, transparent); }
.badge-info{ background: var(--status-info-bg); color: var(--status-info); border-color: color-mix(in oklch, var(--status-info) 25%, transparent); }

/* ---------- 8. TABLES ---------- */
table{ border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
table th{
  text-align: left; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-light);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
}
table td{
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
table tr:hover td{ background: var(--surface-alt); }
table tr:last-child td{ border-bottom: none; }

/* ---------- 9. SIDEBAR / TOPBAR (Glass) ---------- */
.topbar, .glass-topbar, header.appbar{
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  background: color-mix(in oklch, var(--surface) 78%, transparent);
  border-bottom: 1px solid var(--border);
}

/* ---------- 10. FLOATING NAV + FAB (Konflikt lösen) ---------- */
/* #168 (v2.561): die .mob-nav-Regeln, die hier standen, sind entfernt. Sie hatten kein
   @media und griffen darum auch dort, wo die Leiste gar nicht sichtbar ist; ihre Werte
   (padding:6px, border-radius:var(--r-full)) wurden vom Block weiter oben mit !important
   ueberschrieben -- ausser bei backdrop-filter, wo sie als spaetere Regel gewannen. Ergebnis
   war eine Leiste, deren Aussehen aus zwei Bloecken zugleich kam. Das mitadressierte
   ".pill-nav" kommt im Markup nirgends vor (nur <nav class="mob-nav" id="mob-nav">) und ist
   mitentfallen. Die Leiste wird ausschliesslich im 680er-Block gesetzt. */

/* FAB – kleiner, subtiler, klar unter Nav */
/* #213 (13.08.2026): DIESER BLOCK IST TOT. Das Element heisst id="v2fab" OHNE Bindestrich
   (skin.js, fab()), und weder class="fab" noch [data-fab] kommt in irgendeiner JS-Datei vor
   -- geprueft am 13.08.2026. Keiner der drei Selektoren matcht je etwas, auch die
   safe-area-Regel im 768er-Block darunter nicht. BEWUSST NICHT REPARIERT: wer hier auf
   .v2-fab umstellt, aktiviert schlagartig 52px, border-radius und var(--accent) und
   ueberschreibt damit das heutige Aussehen aus Zeile ~1615 (58px, gruener Verlauf). Das ist
   eine sichtbare Designaenderung und keine Aufraeumarbeit -- gehoert entschieden, nicht
   nebenbei gemacht. */
#v2-fab, .fab, [data-fab]{
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  box-shadow: var(--shadow-lg),
              0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent);
  display: grid; place-items: center;
  font-size: 22px; font-weight: 400;
  transition: transform var(--dur-2) var(--ease-emphasized),
              box-shadow var(--dur-2) var(--ease-standard);
  z-index: 640 !important;
}
#v2-fab:hover, .fab:hover{ transform: scale(1.06); }
#v2-fab:active{ transform: scale(.96); }
@media (max-width: 768px){
  /* #168 (v2.561): die Leiste ist rund 17px niedriger, der Knopf rueckt mit -- sonst
     schwebt er mit sichtbarer Luecke darueber. Abstand zur Leiste bleibt etwa gleich. */
  #v2-fab{ bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- 11. HUNDE-HISTORIE / TIMELINE ---------- */
.hh-timeline, .timeline{
  position: relative;
  padding-left: var(--s-6);
}
.hh-timeline::before, .timeline::before{
  content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(to bottom, var(--border-strong), var(--border) 60%, transparent);
  border-radius: 2px;
}
.hh-timeline .hh-day, .timeline-item{
  position: relative; padding: var(--s-4) 0; margin-left: var(--s-2);
}
.hh-timeline .hh-day::before, .timeline-item::before{
  content: ""; position: absolute; left: -22px; top: calc(var(--s-4) + 6px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hh-timeline .hh-date, .timeline-date{
  position: sticky; top: 72px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 14px; color: var(--text-muted);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter: blur(6px);
  padding: 4px 0;
  z-index: 5;
}

/* "Bis heute" als Text-Link statt Button (Fortsetzung von v2.194) */
.hh-jump-today, a.hh-bis-heute{
  background: transparent !important;
  border: none !important;
  color: var(--accent) !important;
  padding: 0 !important;
  height: auto !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in oklch, var(--accent) 40%, transparent);
  cursor: pointer;
}
.hh-jump-today:hover{ text-decoration-color: var(--accent) !important; }

/* Kalender-Tag als "Ring" mit Aktivitäts-Status */
.cal-day, .calendar-day{
  border-radius: var(--r-full);
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  transition: background var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard);
}
.cal-day:hover{ background: var(--accent-soft); }
.cal-day.today{
  color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cal-day.selected, .cal-day.active{
  background: var(--accent); color: var(--text-inverse);
  transform: scale(1.04);
}
.cal-day.has-activity{
  background: radial-gradient(circle at center, transparent 55%, var(--accent-soft) 55%);
}

/* ---------- 12. KPI CARDS ---------- */
.kpi-card, .dash-card{
  display: flex; flex-direction: column; gap: var(--s-2);
}
.kpi-card .kpi-label, .dash-card .label{
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-light); font-weight: 600;
}
.kpi-card .kpi-value, .dash-card .value{
  font-family: var(--font-display); font-weight: 500;
  font-size: 32px; line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 144;
}
.kpi-card .kpi-delta{ font-size: 12px; font-weight: 600; }
.kpi-card .kpi-delta.up{ color: var(--status-ok); }
.kpi-card .kpi-delta.down{ color: var(--status-danger); }

/* ---------- 13. MODAL ---------- */
.modal, .modal-content, dialog{
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  background: var(--surface);
}
.modal-backdrop, dialog::backdrop{
  background: oklch(15% 0.010 150 / .45);
  backdrop-filter: blur(6px);
}

/* ---------- 14. TOGGLES / SWITCHES ---------- */
.toggle input:checked + .toggle-track,
.switch input:checked + .switch-track{
  background: var(--accent);
}
.toggle-track, .switch-track{ background: var(--border-strong); transition: background var(--dur-1) var(--ease-standard); }

/* ---------- 15. LIST ITEMS ---------- */
.list-item, li.row{
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease-standard);
}
.list-item:hover, li.row:hover{ background: var(--surface-alt); }

/* ---------- 16. HUNDEFARB-CHIPS harmonisieren ---------- */
:root{
  --dog-c0: oklch(68% 0.15 30);
  --dog-c1: oklch(66% 0.14 230);
  --dog-c2: oklch(70% 0.12 155);
  --dog-c3: oklch(82% 0.13 82);
  --dog-c4: oklch(65% 0.13 305);
  --dog-c5: oklch(75% 0.14 68);
  --dog-c6: oklch(60% 0.11 155);
  --dog-c7: oklch(70% 0.12 350);
}

/* ---------- 17. MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* View transitions (weiche Seitenwechsel) */
@supports (view-transition-name: root){
  :root{ view-transition-name: root; }
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration: var(--dur-3);
    animation-timing-function: var(--ease-standard);
  }
}

/* ---------- 18. SCROLLBAR ---------- */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: color-mix(in oklch, var(--text-light) 40%, transparent);
  border-radius: var(--r-full);
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover{ background: var(--text-light); }

/* ---------- 19. DIVIDER / SEPARATOR ---------- */
hr, .divider{
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--s-6) 0;
}

/* ---------- 20. UTILITIES ---------- */
.text-muted{ color: var(--text-muted); }
.text-light{ color: var(--text-light); }
.text-accent{ color: var(--accent); }
.stack > * + *{ margin-top: var(--s-3); }
.stack-lg > * + *{ margin-top: var(--s-6); }
.row-8{ display: flex; gap: var(--s-2); align-items: center; }
.row-16{ display: flex; gap: var(--s-4); align-items: center; }

/* Print bleibt unangetastet (bestehende .lcard-Regeln greifen) */
@media print{
  #v2-fab, .fab, .mob-nav, .pill-nav{ display: none !important; }
}
/* ============================================================
   Block 4 von 6 -- ausgelagert aus huta_v2_390_TEST.html
   Originaltag: <style id="huta-v201-style">   (Zeilen 12696-12813)
   ============================================================ */
:root{
  --v2-bg:var(--bg);--v2-panel:var(--surface);--v2-ink:var(--text);--v2-muted:var(--text-muted);--v2-soft:var(--surface-alt);
  --v2-green:var(--green-dark);--v2-green-2:#3D6B47;--v2-lime:var(--green-accent);--v2-gold:var(--green-gold);
  --v2-red:#B84A3A;--v2-orange:#B87521;--v2-blue:#315F88;
  --v2-line:var(--border);--v2-shadow:var(--shadow-xl);--v2-shadow-sm:var(--shadow-md);
  --v2-radius:22px;--v2-radius-sm:14px;
}
html{scroll-behavior:smooth} body{background:radial-gradient(circle at 15% 0%,rgba(168,200,120,.22),transparent 32%),var(--bg)!important;color:var(--v2-ink)!important}.wrap{background:transparent}.ct{background:transparent!important;padding:24px 30px 42px!important}.sb{width:264px!important;background:linear-gradient(180deg,#1E3A20 0%,#243F27 48%,#162719 100%)!important;border-right:1px solid rgba(255,255,255,.08);box-shadow:8px 0 34px rgba(24,42,24,.18)!important}.slogo{padding:18px 16px 16px!important}.slogo-paw{width:84px!important;height:84px!important}.slogo-name{font-size:20px!important;letter-spacing:-.01em}.slogo-sub{opacity:.95;color:rgba(255,255,255,.42)!important}.role-pill,.su,#dm-toggle{border-radius:16px!important;background:rgba(255,255,255,.07)!important}.nav-sec-lbl{padding:16px 12px 6px!important;color:rgba(255,255,255,.34)!important}.nb{border-radius:15px!important;padding:10px 12px!important;margin-bottom:4px!important}.nb .ni{width:32px!important;height:32px!important;border-radius:12px!important}.nb.on{background:linear-gradient(135deg,rgba(168,200,120,.26),rgba(168,200,120,.10))!important;color:#F2FFE1!important}.nb.on::before{display:none}.nav-badge{background:#EFC36D!important;color:#2B210D!important}.card,.kpi-card{border-radius:var(--v2-radius)!important;border:1px solid var(--v2-line)!important;box-shadow:var(--v2-shadow-sm)!important;background:var(--surface)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.card:hover,.kpi-card:hover{box-shadow:var(--v2-shadow)!important;transform:translateY(-2px)}.ph{border:1px solid var(--border);border-radius:0 0 24px 24px;padding:16px 18px!important;margin:0 -18px 22px!important;background:var(--surface)!important;box-shadow:0 10px 35px rgba(40,69,46,.07)}h1{font-family:var(--font-display)!important;color:var(--text)!important}h2{color:var(--text)!important}.btn{border-radius:14px!important;background:linear-gradient(135deg,var(--green-dark),#38663F)!important;box-shadow:0 10px 26px rgba(40,69,46,.22)!important}.btn2,.bsm2{border-radius:14px!important;background:var(--surface)!important;border:1px solid rgba(40,69,46,.16)!important;color:var(--text)!important}.bsm{border-radius:12px!important;background:var(--green-dark)!important}.inp{border-radius:15px!important;background:var(--surface)!important;border:1px solid rgba(40,69,46,.15)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:var(--text)!important}table{border-collapse:separate!important;border-spacing:0 7px!important}th{background:transparent!important;border-bottom:none!important;color:var(--text-muted)!important;padding:8px 14px!important}td{background:var(--surface)!important;border-top:none!important;border-bottom:1px solid var(--border);color:var(--text)}tbody tr td:first-child{border-radius:14px 0 0 14px}tbody tr td:last-child{border-radius:0 14px 14px 0}.ci{border-radius:18px!important;border:1px solid rgba(40,69,46,.13)!important;box-shadow:0 6px 20px rgba(40,69,46,.06)!important}.ci.on{background:var(--success-bg)!important}.badge{border-radius:999px!important}
.v2-shell{max-width:1280px;margin:0 auto}.v2-topbar{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-bottom:20px}.v2-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--v2-muted);font-weight:800}.v2-title{font-family:var(--font-display);font-size:34px;line-height:1.05;color:var(--v2-ink);font-style:italic}.v2-sub{color:var(--v2-muted);font-size:13px;margin-top:5px}.v2-search{display:flex;align-items:center;gap:10px;min-width:360px;background:var(--surface);border:1px solid var(--v2-line);border-radius:18px;padding:10px 12px;box-shadow:var(--v2-shadow-sm)}.v2-search span{font-size:18px;opacity:.65}.v2-search input{border:none;outline:none;background:transparent;width:100%;font:600 14px var(--font-body);color:var(--v2-ink)}.v2-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.v2-hero{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:18px}.v2-welcome{background:linear-gradient(135deg,#1F3B23 0%,#315F38 62%,var(--green-accent) 160%);border-radius:28px;padding:24px;color:white;box-shadow:0 20px 70px rgba(40,69,46,.23);position:relative;overflow:hidden}.v2-welcome:after{content:'🐾';position:absolute;right:24px;bottom:-26px;font-size:132px;opacity:.08;pointer-events:none}.v2-welcome h2{color:white!important;font-size:31px!important;margin-bottom:8px}.v2-welcome p{color:rgba(255,255,255,.74);max-width:560px}.v2-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.v2-metric{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:14px;display:flex;flex-direction:column;justify-content:space-between}.v2-metric b{display:block;font-family:var(--font-display);font-size:31px;font-weight:400;line-height:1;color:white}.v2-metric span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.66);font-weight:800}.v2-panel{background:var(--surface);border:1px solid var(--v2-line);border-radius:28px;padding:20px;box-shadow:var(--v2-shadow-sm)}.v2-panel-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--v2-muted);margin-bottom:12px}.v2-task{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--surface-alt);margin-bottom:9px}.v2-task i{font-style:normal;width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--success-bg)}.v2-task b{display:block;font-size:13px}.v2-task span{display:block;color:var(--v2-muted);font-size:12px}.v2-fab{position:fixed;right:26px;bottom:26px;z-index:850}.v2-fab-main{width:58px;height:58px;border-radius:22px;border:none;background:linear-gradient(135deg,var(--green-dark),#4A7C59);color:white;font-size:30px;line-height:1;box-shadow:0 18px 45px rgba(40,69,46,.35);cursor:pointer}.v2-fab-menu{position:absolute;right:0;bottom:70px;display:none;min-width:190px;background:var(--surface);border:1px solid var(--v2-line);border-radius:18px;padding:6px;box-shadow:var(--v2-shadow)}.v2-fab.open .v2-fab-menu{display:block}.v2-fab-menu button{display:flex;width:100%;gap:10px;align-items:center;padding:9px 11px;border:none;background:transparent;border-radius:12px;cursor:pointer;text-align:left;font:600 13px var(--font-body);color:var(--v2-ink)}.v2-fab-menu button:hover{background:var(--success-bg)}.v2-quick-strip{display:none;gap:10px;margin-top:14px}
.v2-quick-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 14px;border-radius:14px;border:none;background:rgba(255,255,255,.15);color:white;font:700 13px var(--font-body);cursor:pointer;white-space:nowrap}
.v2-quick-btn:active{background:rgba(255,255,255,.22)}
.v2-quick-wl{background:rgba(212,134,10,.25);border:1px solid rgba(212,134,10,.4)}
.v2-chiprow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.v2-chip{background:var(--surface);border:1px solid var(--v2-line);border-radius:999px;padding:7px 11px;color:var(--v2-muted);font-size:12px;font-weight:700}.v2-content>.bw:first-child,.v2-content>h2:first-child{margin-top:4px}
@media(max-width:900px){.v2-topbar{grid-template-columns:1fr}.v2-search{min-width:0}.v2-hero{grid-template-columns:1fr}.ct{padding:calc(18px + env(safe-area-inset-top,0px)) 16px 96px!important}.v2-title{font-size:28px}.v2-fab{right:18px;bottom:calc(104px + env(safe-area-inset-bottom));z-index:650}.v2-welcome{padding:20px;border-radius:24px}.v2-metrics{grid-template-columns:repeat(2,1fr)}.v2-quick-strip{display:flex}}
@media(max-width:680px){.sb{width:286px!important}.v2-topbar{margin-bottom:12px}.v2-search{border-radius:16px}.v2-actions .btn,.v2-actions .btn2{flex:1;min-height:46px}.v2-metrics{gap:9px}.v2-metric{padding:12px}.v2-metric b{font-size:25px}.card{padding:16px!important}.ph{position:relative!important;margin:0 0 16px!important;border-radius:22px!important}.v2-fab-main{width:56px;height:56px}.v2-fab-menu{right:0;bottom:66px}.g4,.g3{gap:10px!important}}
/* Fix (Michael 17.07.2026, Hunde-Historie, mehrfach "unschoen"): das echte <input type=date> ist
   jetzt unsichtbar (opacity:0) und liegt absolut positioniert ueber einer rein selbstgestylten
   Pille (.hh-date-pill) -- damit wird nichts Natives mehr sichtbar gerendert. */
.hh-date-wrap{position:relative;display:inline-block;max-width:100%}
.hh-date-pill{background:var(--surface);border:1.5px solid var(--border);border-radius:11px;padding:7px 14px;text-align:center;font-weight:700;font-size:13.5px;color:var(--text);box-shadow:0 1px 4px rgba(40,69,46,.05);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
input.hh-date-real{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:none;margin:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.hh-date-wrap:focus-within .hh-date-pill{border-color:var(--green-dark,#2E4E32);box-shadow:0 0 0 3px rgba(168,200,120,.25)}
/* Fix (Michael 17.07.2026, "mach doch eine Tabelle mit zwei Zellen"): VON/BIS jetzt als echtes
   <table> mit zwei <td>-Zellen statt Flexbox-Divs -- table-layout:fixed erzwingt exakt 50%/50%
   Spaltenbreite unabhaengig vom Inhalt, was noch robuster gegen die iOS-Safari-Eigenheit ist
   (natives <input type=date> kann eine Tabellenspalte nicht aufsprengen, anders als bei Flex).
   Da <table>/<td> global fuer echte Datentabellen gestylt sind (Zebra-Hintergrund, Bottom-Border,
   abgerundete Pillenform an erster/letzter Spalte), muss das hier explizit zurueckgesetzt werden --
   sonst sehen VON/BIS wie eine Datenzeile aus statt wie zwei einfache Eingabefelder. */
.hh-date-table{border-spacing:0!important}
.hh-date-table td{background:transparent!important;border:none!important;border-radius:0!important}
tbody tr.hh-date-table-tr td:first-child,.hh-date-table td:first-child,.hh-date-table td:last-child{border-radius:0!important}
@media print{.v2-topbar,.v2-hero,.v2-fab{display:none!important}}
/* v2.232 (Michael, Screenshot: "Zuteilung nach Betreuer" erscheint auf dem Laptop doppelt) --
   Root Cause: mehrere .mob-only-Elemente (u.a. die "Zuteilung nach Betreuer"-Swipe-Reihe) tragen
   zusaetzlich ein eigenes inline style="display:flex". Eine einfache Klassen-Regel wie
   .mob-only{display:none} kann ein inline style NIE ueberstimmen (Inline-Styles haben immer
   hoehere Spezifitaet als jeder Klassenselektor) -- auf breiten Bildschirmen (>1366px, wo die
   @media-Regel unten gar nicht erst greift) blieb das .mob-only-Element also trotz "display:none"
   sichtbar und lag zusaetzlich zum .desk-only-Grid auf der Seite: das beobachtete Duplikat. Fix:
   !important auf die Basisregel, damit sie inline-Styles zuverlaessig schlaegt (die @media-Regel
   weiter unten gewinnt bei aktivem Breakpoint weiterhin, da gleiche Spezifitaet + spaeter in der
   Kaskade). */
.desk-only{display:block}.mob-only{display:none!important}
/* Michael (12.07.2026, iPad-Screenshots): Wochenplan/Alle-Hunde-Tabelle/Zuteilung-Grid liefen auf
   dem iPad (Portrait bzw. Split-View, deutlich breiter als ein Handy aber schmaler als ein
   Desktop-Fenster) noch ueber den bisherigen 680px-Handy-Breakpoint hinaus und zeigten die
   ueberlaufende Desktop-Tabelle statt der mobilen Tag-Tabs/Karten-Ansicht aus v2.199. Erster
   Versuch (v2.204) mit 1024px reichte laut Folge-Screenshots nicht -- iPad Pro 12.9" landscape hat
   eine logische Breite von 1366px, das lag also weiterhin ueber dem Breakpoint. Auf 1366px erhoeht,
   damit ALLE Standard-iPad-Groessen in beiden Ausrichtungen (Portrait wie Landscape, bis 12.9")
   sicher die mobile Ansicht bekommen. Eigener, breiterer Breakpoint NUR fuer diese drei Widgets --
   bewusst als separate Regel, damit die uebrigen @media(max-width:680px)-Anpassungen (Sidebar,
   FAB, Nav-Pille etc., die fuers Handy-Layout gedacht sind) unveraendert bleiben. */
@media(max-width:1366px){.desk-only{display:none!important}.mob-only{display:block!important}
/* v2.299 (Michael, Screenshot): "Check-in offen"/"Abholung offen"-Kacheln zeigten auf Mobile
   das Icon oben und den Text darunter statt wie bei den anderen KPI-Kacheln (z.B. "Offene
   Rechnungen") nebeneinander. Root Cause: die generische .mob-only{display:block!important}-
   Regel direkt oberhalb ueberschreibt das display:flex von .kpi-h-card (gleiche !important-
   Prioritaet, aber die zuletzt/spezifischste Regel gewinnt) -- dadurch wurden Icon-Div und
   Body-Div zu normalen block-Elementen und stapelten sich, statt wie gewollt in einer Reihe zu
   stehen. Fix: eigene, spezifischere Regel .kpi-h-card.mob-only stellt display:flex!important
   wieder her (align-items/gap kommen weiterhin unveraendert aus der Basis-.kpi-h-card-Regel). */
.kpi-h-card.mob-only{display:flex!important}}
.wp-daytabs::-webkit-scrollbar,.bt-mobscroll::-webkit-scrollbar{display:none}
.wp-daytabs,.bt-mobscroll{scrollbar-width:none}

.v2-actions .btn,.v2-actions .btn2{padding:10px 16px!important;font-size:13px!important;min-height:44px!important;border-radius:14px!important;font-weight:700!important;white-space:nowrap}
.v2-wl-btn{position:relative}
.v2-wl-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:#D4860A;color:white;
  font-size:11px;font-weight:800;line-height:1;
  border-radius:999px;
  margin-left:6px;vertical-align:middle;
  box-shadow:0 2px 6px rgba(212,134,10,.35);
}
.v2-metrics{grid-template-columns:repeat(3,1fr)!important}

/* ===== NEUER HUND (v2.352: eigene Seite statt Bottom-Sheet-Modal) ===== */
#nhSheet{padding:22px 20px 30px;}
#nhSheet h3{font-family:var(--font-display,'Georgia');font-size:22px;font-weight:400;margin:0 0 18px;}
#nhSheet .lbl{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--text-muted);display:block;margin-bottom:4px;margin-top:11px;}
#nhSheet .inp{width:100%;box-sizing:border-box;padding:9px 11px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;background:var(--surface);color:var(--text);}
#nhSheet .inp:focus{outline:none;border-color:var(--green-dark);background:var(--surface);}
#nhSheet .g2{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
#nhSheet .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
#nhSheet .nh-check{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--surface-alt);border:1.5px solid var(--border);border-radius:10px;font-size:14px;cursor:pointer;}
#nhSheet .nh-check input{width:17px;height:17px;accent-color:#4A7C59;cursor:pointer;}
#nhSheet .nh-err{display:none;background:var(--danger-bg);border:1px solid var(--danger-border);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--danger-text);margin-bottom:12px;}
#nhSheet .nh-actions{display:flex;gap:10px;margin-top:20px;}
#nhSheet .nh-actions .btn{flex:1;}
#nhSheet .nh-actions .btn2{flex:0 0 auto;padding:11px 18px;}

/* v2.189: Fix Impfungen-Datumsfelder im Dark Mode -- die Boxen (GEIMPFT AM/GUELTIG BIS)
   sind bewusst IMMER hell (weiss/#FBFAF7), aber die .inp-Regel weiter oben in diesem
   Style-Block setzt color:var(--text)!important, was im Dark Mode fast weiss ist ->
   unlesbar auf dem hellen Feld. Datumstext hier fest auf dunkles Gruen, unabhaengig vom Theme. */
input.impfdate.inp{color:var(--green-dark)!important}

/* v2.189: Dark-Mode-Hintergrund app-weit an den Login-Screen angeglichen (dunkles
   Tannengruen-Verlauf + dezentes Pfotenmuster), statt des bisherigen einfarbigen --bg. */
[data-theme="dark"] body{
  background:
    radial-gradient(circle at 20% 15%, rgba(176,141,87,0.10), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(176,141,87,0.08), transparent 50%),
    linear-gradient(160deg, #0F1F17 0%, #16281E 55%, #0F1F17 100%) !important;
  background-attachment:fixed!important;
}
[data-theme="dark"] body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><g fill='%23FFFFFF' fill-opacity='0.025'><ellipse cx='70' cy='95' rx='16' ry='12'/><ellipse cx='50' cy='72' rx='6' ry='8'/><ellipse cx='68' cy='64' rx='6' ry='8'/><ellipse cx='86' cy='72' rx='6' ry='8'/></g></svg>");
  background-size:140px 140px;
}
[data-theme="dark"] .wrap,[data-theme="dark"] .ct{position:relative;z-index:1}
/* ============================================================
   Block 5 von 6 -- ausgelagert aus huta_v2_390_TEST.html
   Originaltag: <style>   (Zeilen 13069-13096)
   ============================================================ */
  #huta-supabase-status{
    position:fixed;
    top:calc(20px + env(safe-area-inset-top,0px));
    right:16px;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--surface, #fff);
    border:1px solid var(--border, #E8E0D0);
    box-shadow:0 2px 8px rgba(0,0,0,.14);
    pointer-events:none;
  }
  #huta-supabase-status .txt{display:none;}
  #huta-supabase-status .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#9A7A45;
  }
  #huta-supabase-status.ok .dot{background:#4A7C59;}
  #huta-supabase-status.err .dot{background:#A0432E;}
  #huta-supabase-status.missing{opacity:.55;}
/* ============================================================
   Block 6 von 6 -- ausgelagert aus huta_v2_390_TEST.html
   Originaltag: <style>   (Zeilen 13224-13283)
   ============================================================ */
  /* v2.130: Login-Screen-Redesign (Michael) -- dunkles Tannengruen/Messing statt
     heller Standard-Card; Hundemarken-Motiv (Ring + Badge) als Signature-Element;
     dezentes Pfotenmuster im Hintergrund. Turnstile-Widget/Paulis.PNG unveraendert
     eingebunden, nur neu gerahmt. */
  #huta-auth-gate{
    position:fixed;inset:0;z-index:999999;
    display:flex;align-items:center;justify-content:center;
    background:
      radial-gradient(circle at 20% 15%, rgba(176,141,87,0.10), transparent 45%),
      radial-gradient(circle at 82% 78%, rgba(176,141,87,0.08), transparent 50%),
      linear-gradient(160deg, #0F1F17 0%, #16281E 55%, #0F1F17 100%);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    padding:24px;
  }
  #huta-auth-gate::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><g fill='%23FFFFFF' fill-opacity='0.025'><ellipse cx='70' cy='95' rx='16' ry='12'/><ellipse cx='50' cy='72' rx='6' ry='8'/><ellipse cx='68' cy='64' rx='6' ry='8'/><ellipse cx='86' cy='72' rx='6' ry='8'/></g></svg>");
    background-size:140px 140px;
  }
  #huta-auth-gate .stage{position:relative;width:100%;max-width:380px;}
  #huta-auth-gate .tag-loop{
    width:32px;height:32px;margin:0 auto -16px;position:relative;z-index:3;
    border-radius:50%;border:5px solid #B08D57;background:transparent;
  }
  #huta-auth-gate .box{
    position:relative;width:100%;background:#F5F0E3;border:none;
    border-radius:26px;overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(15,31,23,.55), 0 0 0 1px rgba(255,255,255,.04);
  }
  #huta-auth-gate .box-logo{
    background:linear-gradient(160deg,#1E3A29,#0F1F17);
    padding:38px 24px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  #huta-auth-gate .box-logo img{width:78px;height:78px;object-fit:contain;border-radius:18px;border:2px solid rgba(245,240,227,.85);margin-bottom:14px;}
  #huta-auth-gate .box-logo .wordmark{font-family:var(--font-display,Georgia,serif);color:#F5F0E3;font-size:22px;letter-spacing:.5px;}
  #huta-auth-gate .box-logo .subword{margin-top:3px;color:#B08D57;font-size:10px;letter-spacing:2.6px;text-transform:uppercase;font-weight:600;}
  #huta-auth-gate .box-body{padding:28px 24px 26px;}
  #huta-auth-gate h1{font-size:20px;margin:0 0 8px;color:#241F17;font-family:var(--font-display,Georgia,serif);}
  #huta-auth-gate p{font-size:13px;color:#786F5D;margin:0 0 18px;line-height:1.5;}
  #huta-auth-gate label{display:block;font-size:11.5px;font-weight:700;color:#241F17;margin-bottom:6px;letter-spacing:.2px;}
  #huta-auth-gate input{
    width:100%;box-sizing:border-box;padding:13px 14px;border-radius:12px;
    border:1.5px solid #EAE1CB;font-size:14.5px;margin-bottom:14px;font-family:inherit;
    background:#fff;color:#241F17;outline:none;transition:border-color .15s ease,box-shadow .15s ease;
  }
  #huta-auth-gate input:focus{border-color:#B08D57;box-shadow:0 0 0 4px rgba(176,141,87,.18);}
  #huta-auth-gate button{
    width:100%;padding:14px 0;border-radius:12px;border:none;
    background:linear-gradient(160deg,#2A4E37,#0F1F17);color:#F5F0E3;
    font-weight:600;font-size:15px;cursor:pointer;letter-spacing:.2px;
    box-shadow:0 12px 24px -10px rgba(15,31,23,.6);transition:transform .15s ease,background .2s ease;
  }
  #huta-auth-gate button:hover{background:linear-gradient(160deg,#8F6F41,#16281E);transform:translateY(-1px);}
  #huta-auth-gate button:disabled{opacity:.6;cursor:default;transform:none;}
  #huta-auth-gate .msg{font-size:12.5px;margin-top:14px;line-height:1.4;}
  #huta-auth-gate .msg.ok{color:#2E6644;}
  #huta-auth-gate .msg.err{color:#A0432E;}
  #huta-auth-gate .footnote{text-align:center;margin-top:18px;font-size:11px;color:#8F887A;}

/* ===================================================================
   SERIEN-DATUMSFELDER AB/BIS (v2.544)
   ===================================================================
   DRITTER ANLAUF, und diesmal nach dem Muster, das im Projekt seit
   Monaten funktioniert -- die Impfdaten in kunden.js/stammdaten.js
   (Michael: "orientiere dich an den Impfungen, wo die Felder schoen
   nebeneinander stehen").
   WARUM DIE ERSTEN ZWEI ANLAEUFE NICHT REICHTEN: v2.540 hat die Felder
   gestapelt, v2.542 in eine <table> mit table-layout:fixed gelegt.
   Beides begrenzt den CONTAINER -- ein natives <input type=date> in
   iOS-Safari haelt sich daran aber nicht. Es bringt eine intrinsische
   Mindestbreite mit und zeichnet ueber seine Zelle hinaus, egal was
   width, max-width und box-sizing sagen.
   DAS IMPFUNGEN-MUSTER LOEST GENAU DAS, und zwar an der Wurzel:
     (1) Wrapper mit position:relative und overflow:hidden -- er ist
         das sichtbare Feld (Rahmen, Radius, Hintergrund, feste Hoehe).
     (2) Das echte Input liegt absolut positioniert DARIN. Absolut
         positionierte Elemente sind aus dem Fluss genommen und koennen
         die Breite ihres Elternteils nicht beeinflussen -- die
         intrinsische Mindestbreite laeuft damit ins Leere.
     (3) overflow:hidden am Wrapper schneidet ab, was trotzdem noch
         hinausragen wollte. Der Wrapper kann nicht ueberlaufen, weil
         er ein gewoehnlicher Block ist.
     (4) -webkit-appearance:none nimmt dem Feld die native Zeichnung,
         sodass Rahmen und Radius vom Wrapper kommen und in beiden
         Feldern identisch aussehen.
   Die <table> mit table-layout:fixed bleibt daneben stehen: sie macht
   die 50/50-Aufteilung und kostet nichts. Sie war nie falsch, nur
   allein nicht genug.
   DIE td-RESETS SIND PFLICHT: <table>/<td> sind global fuer echte
   Datentabellen gestylt (Zebra, Unterkante, Pillenradius, border-
   spacing 0 7px, teils mit !important in styles.css:1618). Ohne
   Ruecksetzung saehen AB/BIS wie eine Datenzeile aus. Die hoehere
   Spezifitaet von ".serdat td" gegenueber "td" entscheidet.
   =================================================================== */
table.serdat{width:100%;table-layout:fixed;border-collapse:separate!important;border-spacing:0!important;margin:0 0 9px}
table.serdat td{width:50%;vertical-align:top;padding:0!important;background:transparent!important;border:none!important;border-radius:0!important}
tbody tr.serdat-tr td:first-child,table.serdat td:first-child,table.serdat td:last-child{border-radius:0!important}
table.serdat tr:hover td{background:transparent!important}
table.serdat td.serdat-l{padding-right:6px!important}
table.serdat td.serdat-r{padding-left:6px!important}
.serdat-lbl{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 8px;font-size:9.5px;margin-bottom:4px}
.serdat-max{font-size:9.5px;font-weight:700;color:var(--text-light);text-transform:none;letter-spacing:0;white-space:nowrap}
/* (1) der Wrapper IST das sichtbare Feld */
.serdat-box{position:relative;overflow:hidden;height:42px;border-radius:12px;border:1px solid rgba(40,69,46,.15);background:var(--surface);box-sizing:border-box}
.serdat-box:focus-within{border-color:var(--green-dark);box-shadow:0 0 0 3px rgba(168,200,120,.25)}
/* (2)-(4) das echte Input liegt absolut darin und zeichnet nichts Eigenes */
.serdat-inp{position:absolute;top:50%;left:0;transform:translateY(-50%);
  width:100%;box-sizing:border-box!important;
  border:none!important;background:transparent!important;box-shadow:none!important;
  border-radius:0!important;font-size:14px!important;padding:0 12px!important;
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important}
.serdat-leer{font-size:10px;color:var(--text-light);margin-top:3px;letter-spacing:.02em}

/* =========================================================
   #219 / #221 (v2.593) -- ZWEI MOBILE-BEFUNDE, EINE URSACHE
   Beide entstehen daraus, dass ein Flex-Kind nicht nachgibt und das
   Geschwister daneben kein min-width:0 traegt. Auf dem Desktop faellt
   es nie auf, weil Platz da ist.
   PRUEFBREITE IST 320px (#208), nicht 390: bei aktivem iOS-Anzeigezoom
   ist der Schmalfall das regulaere Layout, nicht die Ausnahme.
   ========================================================= */

/* #221 -- DIE BETRAGSZELLE BRICHT ZWISCHEN "CHF" UND DER ZAHL UM.
   Die Zelle ist ein Flex-Kind ohne nowrap und ohne flex-shrink:0; der
   Textblock daneben gibt nicht nach, also schrumpft die Zelle, bis das
   Leerzeichen umbricht ("CHF" oben, "302.00" darunter).
   EINE Klasse statt fuenf Inline-Wiederholungen -- fuenf Stellen, die
   dasselbe entscheiden, laufen sonst auseinander (Lehre 4).
   KEIN !important noetig: die bestehenden Inline-Styles setzen
   font-size/color/min-width, aber weder white-space noch flex-shrink.
   Wo sie text-align setzen, gewinnt weiterhin das Inline-Style -- das
   ist gewollt, die Zellen sollen ihre Feinheiten behalten (Lehre 2). */
.chfz{white-space:nowrap;flex-shrink:0;text-align:right}
/* Das Gegenstueck: der Textblock DANEBEN muss nachgeben duerfen. Ohne
   min-width:0 kann ein Flex-Kind nicht unter seine Inhaltsbreite
   schrumpfen -- das ist die eigentliche Ursache, nicht die Betragszelle. */
.chfz-txt{min-width:0;flex:1;overflow-wrap:anywhere}

/* #222b (v2.597) -- DER VERSANDCHIP BEKOMMT EINEN FESTEN PLATZ.
   Er ist das letzte Kind der Metazeile in der Rechnungsliste, und die
   traegt flex-wrap:wrap. Ob er rechts neben der Faelligkeit stand oder
   allein auf der naechsten Zeile, entschied damit allein die Pixelbreite
   von Nummer, Datum und Faelligkeit -- zwei gleiche Sachverhalte sahen
   auf zwei Karten untereinander verschieden aus. tabular-nums half nicht:
   es gilt nur fuer die Ziffern, Wortabstaende und der Punkt im Datum
   bleiben proportional.
   flex-basis:100% erzwingt den Umbruch IMMER, auf 320px wie auf dem
   Desktop. Das kostet auf breiten Schirmen eine Zeile Hoehe -- Entscheid
   Michael 16.08.2026, Variante (b): vorhersagbar schlaegt kompakt.
   KEIN eigenes margin: die Zeile setzt gap:10px, und das gilt bei
   flex-wrap auch senkrecht -- ein zusaetzlicher Abstand hier waere ein
   zweiter Ort fuer dieselbe Entscheidung. */
.rg-chipzeile{flex:0 0 100%;display:flex}

/* #219 -- DIE KUNDENINFO STEHT IN EINER HALBEN SPALTE.
   Im Kundendetail liegt der GANZE Karteninhalt im linken Kind einer
   .bw-Zeile, deren rechtes Kind (Bearbeiten/Inaktiv) mit flex-shrink:0
   rund 200px belegt. Auf 320-390px bleiben dem Text ~150px, und zwar
   fuer die ganze Karte -- darum bricht schon der Name um.
   NICHT .bw AENDERN: die Klasse ist projektweit im Einsatz (Lehre 2 --
   sie ist eine Flex-Zeile, keine Karte). Stattdessen eine eigene Klasse
   nur fuer diesen Kartenkopf. */
.kdet-head{flex-wrap:wrap;gap:10px}
/* v2.594 -- DER UMBRUCH HAENGT AN DER FLEX-BASIS, NICHT AN EINER BILDSCHIRMBREITE.
   Die erste Fassung (v2.593) verliess sich allein auf @media(max-width:600px). Damit
   wanderten die Knoepfe zwar nach unten, aber NUR wenn die Regel auch ankommt -- und
   selbst dann blieb der Textblock schmal, weil flex:1 ohne Basis jede Breite akzeptiert.
   flex-basis 260px heisst: unterschreitet der Platz fuer den Textblock 260px, kann die
   Zeile nicht mehr beide Kinder tragen und der Knopfblock rutscht von selbst auf eine
   eigene Zeile. Das gilt in JEDEM Container -- auch in einer schmalen Karte auf einem
   breiten Bildschirm, wo eine Viewport-Regel gar nicht greifen wuerde. */
.kdet-head>.kdet-main{flex:1 1 260px;min-width:0}
.kdet-head>.kdet-actions{flex:0 0 auto;margin-left:auto}
@media(max-width:600px){
  /* Auf dem Handy rutschen die Knoepfe UNTER die Daten und nehmen die
     volle Breite -- der Text bekommt damit die ganze Karte. Symbolknoepfe
     oben rechts waeren die Alternative gewesen; sie haetten Platz
     gespart, aber "Inaktiv" laesst sich nicht als Symbol sagen, ohne
     dass man raten muss. */
  .kdet-head>.kdet-actions{width:100%;margin-left:0;margin-top:4px}
  .kdet-head>.kdet-actions .bsm2{flex:1}
  /* Lange, unteilbare Angaben (Telefonnummern, Emailadressen, Strassen) brechen sonst
     Wort fuer Wort um, sobald der Block doch einmal schmal wird. */
  .kdet-head>.kdet-main{flex-basis:100%;overflow-wrap:anywhere}
}

/* ===================================================================
   #270 (v2.615) -- DER FAB NIMMT SICH ZURUECK
   ===================================================================
   BEFUND Michael 17.08.2026: "Diese Floating Button nervt, kannst du das nicht
   anstaendiger eleganter machen? Steht auch rechts aus dem Bild raus."
   DREI URSACHEN, drei Antworten:
   (1) ZU GROSS UND ZU LAUT. 58px mit einem Schatten ueber 45px Streuung -- auf dem
       Telefon ein Objekt, das mehr Aufmerksamkeit zieht als der Inhalt darunter.
       Neu 52px, weicherer Radius, halb so tiefer Schatten.
   (2) RECHTS AUS DEM BILD. right:18px rechnet ohne die Safe Area; auf einem Geraet mit
       abgerundeten Ecken oder im Querformat sitzt der Knopf damit unter der Kante.
       env(safe-area-inset-right) kommt dazu -- dieselbe Rechnung, die die Navigations-
       leiste unten laengst macht.
   (3) ER STEHT IMMER IM WEG. Beim Lesen einer langen Rechnungskarte deckt er die
       rechte untere Ecke ab -- genau dort, wo Betraege und Knoepfe stehen. Neu zieht er
       sich beim Scrollen nach unten weg und kommt zurueck, sobald man nach oben scrollt
       oder stehenbleibt (skin.js, v2FabAutoHide).
   POINTER-EVENTS AUS im eingezogenen Zustand: ein unsichtbarer Knopf, der noch Klicks
   frisst, waere schlimmer als der sichtbare. */
.v2-fab{
  right:calc(18px + env(safe-area-inset-right,0px)) !important;
  transition:transform .28s var(--nx-spring,cubic-bezier(.2,.8,.2,1)), opacity .22s ease;
}
.v2-fab-main{
  width:52px !important;height:52px !important;border-radius:18px !important;
  font-size:26px !important;
  box-shadow:0 10px 26px -10px rgba(40,69,46,.45) !important;
}
.v2-fab.tucked{
  transform:translateY(96px) scale(.9);
  opacity:0;
  pointer-events:none;
}
/* Ist das Menue offen, bleibt der Knopf stehen -- sonst verschwindet er unter dem
   eigenen aufgeklappten Menue weg. */
.v2-fab.open.tucked{transform:none;opacity:1;pointer-events:auto}

/* ===================================================================
   #273 (v2.617) -- DER AKTIONSBALKEN IM BUCHUNGS-ASSISTENTEN BEKOMMT SEINE BREITE
   ===================================================================
   #bkFixedFooter steht seit v2.354 auf position:fixed und traegt inline nur bottom,
   padding, Rand, Hintergrund, z-index und Schatten -- KEIN left, KEIN right, KEIN width.
   Ein fixed positioniertes Element ohne left/right nimmt seine Shrink-to-fit-Breite an der
   statischen Position ein. Mit drei Knoepfen (Abbrechen / Zurueck / Weiter, letzterer flex:1)
   laeuft es auf schmalen Geraeten ueber den rechten Rand hinaus.
   DIE REGEL WURDE SEIT v2.537 IN KOMMENTAREN ZITIERT, ABER NIE GESCHRIEBEN: buchungsmodal.js
   verweist an der Fundstelle woertlich auf "steht in styles.css (#bkFixedFooter), weil sie
   eine Media Query brauchen". In styles.css stand dazu nichts. Ein Kommentar, der auf eine
   nicht existierende Regel zeigt, ist schlimmer als kein Kommentar -- er verhindert, dass
   jemand nachsieht.
   v2.537 WOLLTE AUSDRUECKLICH KEINE VOLLE VIEWPORT-BREITE ("der Balken ... ist zu dominant im
   Bild") -- auf dem Desktop lief die Leiste sonst quer ueber die Sidebar. Darum die Einrueckung
   ab 681px, demselben Breakpoint, an dem .mob-nav verschwindet und die Sidebar erscheint.
   BEKANNTE KOPPLUNG: die 264px sind die Sidebarbreite aus dem Skin-Block (.sb{width:264px
   !important}), die dort die Basisregel von 248px ueberschreibt. Zwei Stellen, eine Zahl --
   das ist Lehre 4 im Kleinen und hier bewusst in Kauf genommen, weil die Alternative eine
   neue Variable durch den ganzen Skin-Block waere. Wer .sb verbreitert, muss hier nachziehen;
   var() mit Fallback laesst eine spaetere Umstellung auf eine Variable ohne Bruch zu. */
#bkFixedFooter{
  left:0;right:0;width:auto;
  box-sizing:border-box;
  flex-wrap:wrap;
}
@media(min-width:681px){
  #bkFixedFooter{left:var(--sb-w,264px)}
}