/* ============================================================
   GetDogWalkers · Dashboard v2
   iOS 26 · "Liquid Glass" — Brandfarben & Schriften beibehalten
   ============================================================ */

/* ---- Fonts (local, DSGVO-konform) ---- */
/* Manrope · latin + latin-ext */
/* ===== Manrope — alleinige Dashboard-Schrift =====
   Nur EIN Schnitt (Regular 400). Fettungen werden vom Browser synthetisiert;
   die Hierarchie tragen deshalb zusätzlich Größe, Farbe und Laufweite.
   Designer: Richard Mandona · Licence Amicale — nicht öffentlich weitergeben. */
@font-face { font-family:"Manrope"; src:url("fonts/manrope-400-normal-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-400-normal-latin-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-500-normal-latin.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-500-normal-latin-ext.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-600-normal-latin.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-600-normal-latin-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-700-normal-latin.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-700-normal-latin-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-800-normal-latin.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-800-normal-latin-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Cormorant Garamond · latin + latin-ext */
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-400-normal-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-400-normal-latin-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-500-normal-latin.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-500-normal-latin-ext.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-600-normal-latin.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-600-normal-latin-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-700-normal-latin.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-700-normal-latin-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-600-italic-latin.woff2") format("woff2"); font-weight:600; font-style:italic; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-600-italic-latin-ext.woff2") format("woff2"); font-weight:600; font-style:italic; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ============================================================
   DESIGN-TOKENS · "Ruhig & professionell" (g31)
   ============================================================
   Flache, opake Flächen · 1px-Hairlines · kleine Radien (8/12/14)
   · Schatten nur auf erhobenen Ebenen (Modal, Popover) · Spacing
   4/8/12/16/24/32 · Manrope (UI) + Cormorant (Titel, große Zahlen).
   Alte Token-Namen (--glass, --r-xl, --gold …) bleiben als Aliase.
   ============================================================ */
:root {
  /* Marke */
  --cream:#F6F4EA; --cream-2:#EFECE0; --paper:#FFFFFF;
  /* --cream-soft war nirgends definiert: an zwei Stellen ohne Fallback
     (Hintergrund wurde transparent), an zwei weiteren mit hartem Hellwert,
     der im dunklen Theme Text auf fast gleicher Fläche zeigte (1,16:1). */
  --cream-soft:#FBF9EF;
  --bark:#3E372A; --bark-2:#6B6655; --muted:#6F6E5C;
  --sage:#7E9079; --sage-deep:#5C6E54; --sage-pale:#EDF1E8; --sage-line:#CBD5C3;
  --amber:#B8893E; --amber-bg:#F7EEDC; --amber-text:#8A5E1B;
  /* Füllfarben für Flächen, auf denen KLEINER Text in --on-accent liegt.
     --sage (3,41:1) und --amber (3,14:1) reichen dafür im hellen Theme nicht;
     als Rahmen- und Icon-Farbe bleiben sie unverändert. Im dunklen Theme ist
     --on-accent fast schwarz, dort sind die hellen Töne die richtigen. */
  --sage-fill:#5C6E54; --amber-fill:#94682A;
  --rose:#B25555; --rose-bg:#F7E6E4; --rose-text:#9A3F3F;
  --green:#5C6E54; --green-bg:#E7EFE3; --green-text:#3E5237;
  /* Manrope als alleinige Dashboard-Schrift: echte Schnitte 300-800 statt
     synthetisch verdicktem Ein-Schnitt-Font (bessere Lesbarkeit + Hierarchie). */
  --serif:"Manrope",system-ui,-apple-system,sans-serif;
  --sans:"Manrope",system-ui,-apple-system,sans-serif;

  /* Flächen & Linien */
  --bg:var(--cream);
  --surface:#FFFFFF;                 /* Karten, Inputs, Sidebar */
  --surface-2:#F3F6EE;               /* dezent getönte Pane */
  --surface-warm:#FBF4E6; --surface-warm-line:#E6CDA0;
  --line:#E3E0D4; --line-strong:#CFCBBC; --line-soft:#ECE9DE;
  --input-bg:#FFFFFF; --hover-surface:#F7F5EC;
  --on-accent:#FFFFFF; --accent-grad:var(--sage-deep);
  --skeleton-a:#EFECE0; --skeleton-b:#F9F7EF;

  /* Radien · Schatten · Abstände */
  --radius-sm:8px; --radius:12px; --radius-lg:14px;
  --shadow-1:0 1px 2px rgba(62,55,42,.06);
  --shadow-2:0 4px 10px -2px rgba(62,55,42,.10), 0 16px 40px -16px rgba(62,55,42,.22);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --sidebar-w:240px; --sidebar-w-collapsed:68px; --topbar-h:64px; --bottombar-h:60px;

  /* ---- Aliase für ältere Regeln ---- */
  --gold:var(--sage); --gold-deep:var(--sage-deep); --gold-pale:var(--sage-pale);
  /* Lichtstreifen des „Hierher schauen“-Moments — leitet sich aus dem Akzent
     ab, damit er in hellem wie dunklem Theme zur Welt gehört. */
  --gold-wash:color-mix(in srgb, var(--gold) 55%, transparent);
  --amber-pale:var(--amber-bg);
  --glass:var(--surface); --glass-thick:var(--surface); --glass-thin:var(--surface);
  --glass-line:var(--line); --glass-line-dk:var(--line-strong);
  --blur:none; --blur-lg:none;
  --r-xl:var(--radius-lg); --r-lg:var(--radius); --r-md:var(--radius); --r-sm:var(--radius-sm);
  --hi:0 0 0 0 transparent;
  --sh-1:var(--shadow-1); --sh-2:var(--shadow-1); --sh-pop:var(--shadow-2);
  --bp-mobile:600px; --bp-tablet:900px;
  color-scheme:light dark;
}

/* ============================================================
   DARK MODE · „bei Nacht" — warmes Rinden-Dunkel,
   Salbei-Akzente aufgehellt (Kontrast ≥ 4.5:1 auf allen Flächen).
   Greift (a) automatisch per System-Einstellung, sofern nicht
   manuell "Hell" gewählt wurde, und (b) bei manueller Wahl "Dunkel".
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream:#1B1915; --cream-2:#201D18; --paper:#242119; --cream-soft:#201D18;
    --bark:#EDE8DA; --bark-2:#C4BCA8; --muted:#B3AC98;
    --sage:#93A58D; --sage-deep:#AEC0A6; --sage-pale:rgba(147,165,141,.14); --sage-line:rgba(147,165,141,.35);
    --amber:#DDB46B; --amber-bg:rgba(221,180,107,.14); --amber-text:#E6C58A;
    --sage-fill:#93A58D; --amber-fill:#DDB46B;
    --rose:#E09A9A; --rose-bg:rgba(224,154,154,.14); --rose-text:#EBB0B0;
    --green:#93A58D; --green-bg:rgba(147,165,141,.14); --green-text:#BFD0B8;
    --bg:var(--cream);
    --surface:#242119; --surface-2:#282E23; --surface-warm:#2F2920; --surface-warm-line:#4E4229;
    --line:#35312A; --line-strong:#48423A; --line-soft:#2E2A24;
    --input-bg:#1F1C17; --hover-surface:#2B2720;
    --on-accent:#1B1915; --accent-grad:var(--sage-deep);
    --skeleton-a:rgba(255,255,255,.04); --skeleton-b:rgba(255,255,255,.10);
    --shadow-1:0 1px 2px rgba(0,0,0,.30);
    --shadow-2:0 4px 10px -2px rgba(0,0,0,.35), 0 20px 50px -20px rgba(0,0,0,.7);
    --gold:var(--sage); --gold-deep:var(--sage-deep); --gold-pale:var(--sage-pale); --amber-pale:var(--amber-bg);
    --glass:var(--surface); --glass-thick:var(--surface); --glass-thin:var(--surface);
    --glass-line:var(--line); --glass-line-dk:var(--line-strong);
    --hi:0 0 0 0 transparent;
    --sh-1:var(--shadow-1); --sh-2:var(--shadow-1); --sh-pop:var(--shadow-2);
  }
}
:root[data-theme="dark"] {
  --cream:#1B1915; --cream-2:#201D18; --paper:#242119; --cream-soft:#201D18;
  --bark:#EDE8DA; --bark-2:#C4BCA8; --muted:#B3AC98;
  --sage:#93A58D; --sage-deep:#AEC0A6; --sage-pale:rgba(147,165,141,.14); --sage-line:rgba(147,165,141,.35);
  --amber:#DDB46B; --amber-bg:rgba(221,180,107,.14); --amber-text:#E6C58A;
  --sage-fill:#93A58D; --amber-fill:#DDB46B;
  --rose:#E09A9A; --rose-bg:rgba(224,154,154,.14); --rose-text:#EBB0B0;
  --green:#93A58D; --green-bg:rgba(147,165,141,.14); --green-text:#BFD0B8;
  --bg:var(--cream);
  --surface:#242119; --surface-2:#282E23; --surface-warm:#2F2920; --surface-warm-line:#4E4229;
  --line:#35312A; --line-strong:#48423A; --line-soft:#2E2A24;
  --input-bg:#1F1C17; --hover-surface:#2B2720;
  --on-accent:#1B1915; --accent-grad:var(--sage-deep);
  --skeleton-a:rgba(255,255,255,.04); --skeleton-b:rgba(255,255,255,.10);
  --shadow-1:0 1px 2px rgba(0,0,0,.30);
  --shadow-2:0 4px 10px -2px rgba(0,0,0,.35), 0 20px 50px -20px rgba(0,0,0,.7);
  --gold:var(--sage); --gold-deep:var(--sage-deep); --gold-pale:var(--sage-pale); --amber-pale:var(--amber-bg);
  --glass:var(--surface); --glass-thick:var(--surface); --glass-thin:var(--surface);
  --glass-line:var(--line); --glass-line-dk:var(--line-strong);
  --hi:0 0 0 0 transparent;
  --sh-1:var(--shadow-1); --sh-2:var(--shadow-1); --sh-pop:var(--shadow-2);
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
html { font-size:14.5px; }
body {
  font-family:var(--sans); color:var(--bark); line-height:1.5;
  background:var(--bg);
  min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

a { color:var(--gold-deep); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { font-family:var(--serif); font-weight:500; color:var(--bark); margin:0; letter-spacing:0; }
em { font-style:italic; color:var(--gold-deep); }
::selection { background:rgba(126,144,121,.28); }
strong, b { font-weight:600; }

/* ============================================================
   APP-SHELL · Sidebar links + Inhalt rechts (g31)
   ============================================================ */
.app-shell { display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); min-height:100vh; }
body.sb-collapsed .app-shell { grid-template-columns:var(--sidebar-w-collapsed) minmax(0,1fr); }
.sidebar {
  position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--s2);
  background:var(--surface); border-right:1px solid var(--line);
  padding:var(--s4) var(--s3) var(--s3);
  z-index:60;
}
.sb-brand { display:flex; align-items:center; gap:10px; padding:2px 4px 14px; border-bottom:1px solid var(--line); margin-bottom:var(--s2); min-width:0; }
.sb-brand .logo-badge { width:40px; height:40px; border-radius:10px; flex:none; display:grid; place-items:center; background:#F4F1E6; border:1px solid var(--line); overflow:hidden; padding:4px; text-decoration:none; }
.sb-brand .logo-badge img { width:100%; height:100%; object-fit:contain; display:block; }
.sb-brand .brand-block { min-width:0; line-height:1.1; }
.sb-brand .brand { font-family:var(--serif); font-size:20px; font-weight:600; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--bark); }
.sb-brand .brand-sub { font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:4px; white-space:nowrap; }
.sb-nav { display:flex; flex-direction:column; gap:2px; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.sb-foot { display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line); padding-top:var(--s2); }
.nav-item, .sb-item {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border-radius:var(--radius-sm); border:1px solid transparent;
  background:transparent; color:var(--bark-2); font-family:inherit; font-size:.9rem; font-weight:600;
  text-align:left; cursor:pointer; white-space:nowrap; min-width:0; position:relative;
  transition:background .15s, color .15s;
}
.nav-item:hover, .sb-item:hover { background:var(--hover-surface); color:var(--bark); }
.nav-item.active { background:var(--sage-pale); color:var(--sage-deep); }
.nav-item.active::before { content:""; position:absolute; left:-13px; top:8px; bottom:8px; width:3px; border-radius:0 2px 2px 0; background:var(--sage-deep); }
.nav-item .sb-ico, .sb-item .sb-ico { width:22px; height:22px; flex:none; display:grid; place-items:center; color:inherit; }
.nav-item .sb-ico .ico, .sb-item .sb-ico .ico { display:block; vertical-align:0; }
.nav-item .sb-label, .sb-item .sb-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.sb-badge {
  flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--amber-fill); color:var(--on-accent); font-size:.72rem; font-weight:600; line-height:20px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.nav-item.active .sb-badge { background:var(--sage-deep); color:var(--on-accent); }
.sb-divider { height:1px; background:var(--line); margin:var(--s2) 4px; }
.sb-user img { width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--line); margin-left:-3px; }
.sb-user .sb-label { display:flex; flex-direction:column; line-height:1.15; }
.sb-user .u-name { font-size:.84rem; font-weight:600; color:var(--bark); }
.sb-user .u-role { font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.theme-toggle .tt-sun, .theme-toggle .tt-moon { display:none; }
:root[data-theme="light"] .theme-toggle .tt-moon { display:grid; }
:root[data-theme="dark"] .theme-toggle .tt-sun { display:grid; }
:root:not([data-theme]) .theme-toggle .tt-moon { display:grid; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .tt-moon { display:none; }
  :root:not([data-theme]) .theme-toggle .tt-sun { display:grid; }
}
/* eingeklappt: nur Icons */
body.sb-collapsed .sidebar { padding-left:10px; padding-right:10px; }
body.sb-collapsed .sb-brand { justify-content:center; padding-left:0; padding-right:0; }
body.sb-collapsed .sb-brand .brand-block, body.sb-collapsed .sb-label, body.sb-collapsed .sb-user .sb-label { display:none; }
body.sb-collapsed .nav-item, body.sb-collapsed .sb-item { justify-content:center; padding:9px 0; }
body.sb-collapsed .nav-item.active::before { left:-11px; }
body.sb-collapsed .sb-badge { position:absolute; top:4px; right:4px; min-width:16px; height:16px; line-height:16px; font-size:.62rem; padding:0 4px; }
body.sb-collapsed .sb-user img { margin:0; }

/* Inhalt */
.app-main { min-width:0; padding:0 clamp(16px,3vw,32px) 64px; }
.top-row {
  display:flex; align-items:center; gap:var(--s3); min-height:var(--topbar-h);
  padding:var(--s3) 0 var(--s2); margin-bottom:var(--s2);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40; background:var(--bg);
}
body.has-banner .top-row { top:46px; }
.top-row .page-title { font-family:var(--serif); font-size:1.9rem; font-weight:500; line-height:1.1; margin:0; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-actions { display:flex; align-items:center; gap:var(--s2); flex:none; }
.topbar-search { width:auto; padding:0 10px 0 9px; gap:8px; border-radius:var(--radius-sm); }
.tb-kbd { font:600 .62rem/1 var(--sans); letter-spacing:.04em; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:3px 5px; }
.chat-indicator .chat-ind-n { background:var(--rose); }
.btn-tb { display:none; }
.notif-bell { width:40px; height:40px; }

/* Mobile: Bottom-Bar + "Mehr"-Sheet */
.bottom-bar { display:none; }
.more-sheet[hidden] { display:none; }
@media (max-width:900px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .app-main { padding:0 14px calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px) + 24px); }
  .bottom-bar {
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    background:var(--surface); border-top:1px solid var(--line);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    min-height:var(--bottombar-h);
  }
  .bb-item {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:6px 2px 4px; border:0; background:transparent; border-radius:var(--radius-sm);
    color:var(--muted); font-family:inherit; font-size:.64rem; font-weight:600; letter-spacing:.01em;
    cursor:pointer; position:relative; min-width:0;
  }
  .bb-item .sb-ico { width:24px; height:24px; display:grid; place-items:center; }
  .bb-item .sb-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bb-item.active { color:var(--sage-deep); }
  .bb-item.active .sb-ico { background:var(--sage-pale); border-radius:8px; width:40px; }
  .bb-item .sb-badge { position:absolute; top:2px; right:calc(50% - 22px); min-width:16px; height:16px; line-height:16px; font-size:.6rem; padding:0 4px; }
  .more-sheet { position:fixed; inset:0; z-index:80; }
  .ms-backdrop { position:absolute; inset:0; background:rgba(30,27,20,.42); }
  .ms-card {
    position:absolute; left:0; right:0; bottom:0; background:var(--surface);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0; border-top:1px solid var(--line);
    box-shadow:var(--shadow-2); padding:8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    max-height:80vh; overflow-y:auto; animation:sheetUp .2s ease-out;
  }
  .ms-grip { width:36px; height:4px; border-radius:2px; background:var(--line-strong); margin:4px auto 10px; }
  .ms-list { display:flex; flex-direction:column; gap:2px; }
  .ms-list .nav-item.active::before { display:none; }
  body.more-open { overflow:hidden; }
  .top-row { top:0; min-height:56px; }
  .top-row .page-title { font-size:1.55rem; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
main.app-main { max-width:1360px; width:100%; margin:0; justify-self:stretch; }
.page-head { display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; padding:var(--s2) 0 var(--s4); }
.page-head h1, .page-head h2 { font-size:clamp(2.2rem,4.4vw,3.1rem); line-height:1; font-weight:600; }
.page-head .sub { color:var(--bark-2); margin:0; font-size:.9rem; max-width:70ch; }
.page-head .grow { flex:1; }
.eyebrow { display:inline-flex; align-items:center; gap:6px; padding:5px 13px; background:var(--glass); border:1px solid var(--glass-line); border-radius:999px; font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); box-shadow:var(--hi); }

/* glass surface helper */
.glass, .card, .stat, .price-card { }

/* ---- Stat tiles ---- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 22px; }
.stat { position:relative; overflow:hidden; padding:var(--s4) 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:none; }
.stat .ico { position:absolute; right:14px; top:14px; color:var(--sage); opacity:.55; line-height:0; }
.stat .k { font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bark-2); }
.stat .v { font-family:var(--serif); font-size:2.2rem; line-height:1; margin-top:9px; font-weight:600; }
.stat .v small { font-size:.95rem; color:var(--bark-2); font-family:var(--sans); font-weight:600; }
.stat.accent { color:var(--on-accent); border-color:var(--sage-deep);
  background:var(--sage-deep);
  box-shadow:none; }
/* .9 statt .82: bei .82 fiel das Label im hellen Theme auf 4,33:1 —
   knapp unter die Grenze. Jetzt 4,82:1 hell und 7,48:1 dunkel. */
.stat.accent .k { color:var(--on-accent); opacity:.9; }
.stat.accent .v { color:var(--on-accent); }
.stat.forecast {
  background:var(--surface);
  border-color:var(--line);
}
.stat.forecast .v { color:var(--gold-deep); font-size:1.8rem; }
.stat.forecast .hint {
  font-size:.7rem; color:var(--bark-2); margin-top:6px; line-height:1.4;
  font-weight:500;
}
@media (max-width:840px){ .stats { grid-template-columns:repeat(2,1fr);} }

/* ---- Master / detail ---- */
.grid-2 { display:grid; grid-template-columns:minmax(360px,400px) 1fr; gap:20px; align-items:start; }
@media (max-width:1180px){ .grid-2 { grid-template-columns:minmax(320px,360px) 1fr; gap:16px; } }
@media (max-width:1000px){ .grid-2 { grid-template-columns:1fr; gap:16px; } }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:none; padding:clamp(14px,1.8vw,20px); }
.card.tight { padding:12px; }
.card h2 { font-size:1.5rem; }

/* iOS search field */
.search { position:relative; margin-bottom:10px; }
.search input { padding-left:38px; background:var(--input-bg); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:none; }
.search input:focus { background:var(--surface); }
.search .mag { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); line-height:0; pointer-events:none; }

/* ---- Customer list rows ---- */
.list-scroll { max-height:calc(100vh - 250px); overflow-y:auto; margin:0 -4px; padding:2px 4px; display:flex; flex-direction:column; gap:7px; scrollbar-width:thin; }
.cust-card { display:flex; align-items:center; gap:11px; padding:10px 8px 10px 10px;
  background:var(--glass-thin); border:1px solid transparent; border-radius:var(--r-md); cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), background .2s, box-shadow .2s;
  min-width:0; }
.cust-card:hover { background:var(--hover-surface); box-shadow:none; transform:translateY(-1px); }
.cust-card.active { background:var(--sage-pale); border-color:var(--sage-line); box-shadow:var(--hi), 0 12px 30px -14px rgba(92,110,84,.5); }
.cust-card.active::before { content:""; position:absolute; }
.cc-av { position:relative; width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--gold-deep);
  background:var(--surface); border:1px solid var(--glass-line); box-shadow:var(--hi); }
.cc-av .dot { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border:2.5px solid var(--cream); }
.cust-card.active .cc-av .dot { border-color:#fff; }
.cc-body { flex:1 1 auto; min-width:0; }
.cc-body h3 { font-size:1.02rem; line-height:1.18; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-body .meta { font-size:.74rem; color:var(--bark-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-body .tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.dog-tag { font-size:.66rem; background:var(--glass); border:1px solid var(--glass-line); border-radius:999px; padding:1px 7px; color:var(--bark-2); white-space:nowrap; }
.status-line { display:flex; align-items:center; gap:8px; margin-top:5px; flex-wrap:nowrap; min-width:0; }
.status-line .tiny { font-size:.7rem; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-line .spacer-grow { flex:1; min-width:0; }
.cc-chev { font-size:1.25rem; color:var(--muted); opacity:.45; flex:none; line-height:1; }
.chip { font-size:.58rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:999px; border:1px solid; white-space:nowrap; flex:none; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.chip.abo { background:var(--gold-pale); color:var(--gold-deep); border-color:rgba(92,110,84,.3); }

/* Vertrags-Status-Chip in der Kunden-Liste — auf einen Blick erkennen
   wer noch offene Verträge hat. 3 = Aufnahmebogen + Vertrag + Anlage 1. */
.chip.docs-chip { font-size:.62rem; padding:2px 7px; }
.chip.docs-chip.docs-done    { background:rgba(126,144,121,.18); color:#3a4d36; border-color:rgba(92,110,84,.45); }
.chip.docs-chip.docs-partial { background:rgba(255,231,184,.55); color:#7a5424; border-color:rgba(186,138,68,.45); }
.chip.docs-chip.docs-pending { background:rgba(255,196,93,.20);  color:#8a5400; border-color:rgba(186,138,68,.5); }
.chip.docs-chip.docs-empty   { background:rgba(207,214,196,.25); color:var(--bark-2); border-color:rgba(207,214,196,.55); }
.chip.muted { background:var(--glass); color:var(--bark-2); border-color:var(--glass-line); }

.dot { width:9px; height:9px; border-radius:50%; flex:none; box-shadow:0 0 0 .5px rgba(0,0,0,.06); }
.dot.aktiv{background:#5C6E54;} .dot.anfrage{background:var(--amber);} .dot.probewalk{background:#9a8bb0;} .dot.pausiert{background:var(--muted);} .dot.beendet{background:#b9b3a4;}

/* ============================================================
   BUTTONS — flach, 10px Radius
   ============================================================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; min-height:38px;
  background:var(--sage-deep); color:var(--on-accent); border:1px solid var(--sage-deep); border-radius:10px;
  font-family:inherit; font-weight:600; font-size:.88rem; line-height:1.2; cursor:pointer; text-decoration:none;
  box-shadow:none; transition:background .15s, border-color .15s, color .15s; }
.btn:hover { background:#4F6048; border-color:#4F6048; text-decoration:none; }
/* Dunkles Theme: --on-accent ist dort fast schwarz. Auf dem dunklen #4F6048
   ergäbe das 2,59:1 statt 10,47:1 auf dem hellen Ton. Die manuelle Umschaltung
   war abgedeckt, die AUTOMATISCHE (Systemeinstellung) nicht — und Auto ist der
   Auslieferungszustand, betraf also den Normalfall. */
:root[data-theme="dark"] .btn:hover { background:#BCCDB4; border-color:#BCCDB4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:hover { background:#BCCDB4; border-color:#BCCDB4; }
}
.btn:active { transform:scale(.985); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-ghost { background:var(--surface); color:var(--bark); border:1px solid var(--line-strong); }
.btn-ghost:hover { background:var(--hover-surface); border-color:var(--bark-2); }
.btn-soft { background:var(--sage-pale); color:var(--sage-deep); border:1px solid var(--sage-line); }
.btn-soft:hover { background:var(--sage-line); border-color:var(--sage-line); }
.btn-danger { background:var(--rose-bg); color:var(--rose-text); border:1px solid rgba(178,85,85,.3); }
.btn-danger:hover { background:rgba(178,85,85,.18); }
.btn-sm { padding:6px 12px; font-size:.8rem; min-height:32px; }
.btn-block { width:100%; }
.btn .ico { flex:none; vertical-align:0; }

/* Icon-Button (quadratisch, hairline) */
.gbtn { width:38px; height:38px; border-radius:10px; display:inline-grid; place-items:center; flex:none;
  background:var(--surface); border:1px solid var(--line); color:var(--bark-2);
  font-size:1rem; line-height:0; cursor:pointer; text-decoration:none; box-shadow:none; transition:background .15s, color .15s, border-color .15s; }
.gbtn:hover { background:var(--hover-surface); color:var(--bark); border-color:var(--line-strong); text-decoration:none; }
.gbtn:active { transform:scale(.94); }
.gbtn.sm { width:32px; height:32px; font-size:.95rem; }
@media (max-width: 720px) { .gbtn.sm { width:38px; height:38px; } }
.gbtn.danger { color:var(--rose); }
.gbtn.danger:hover { background:var(--rose-bg); border-color:rgba(178,85,85,.3); }

/* ============================================================
   DETAIL — hero + segmented tabs
   ============================================================ */
.detail { display:flex; flex-direction:column; gap:16px; }
.detail-hero { position:relative; overflow:hidden; padding:20px clamp(18px,2.4vw,24px);
  border-radius:var(--radius-lg); border:1px solid var(--line);
  background:var(--surface);
  box-shadow:none; }
.detail-hero::after { display:none; }
.hero-top { display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:relative; z-index:1; }
.hero-avatar { width:60px; height:60px; border-radius:12px; flex:none; display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:1.7rem; color:var(--on-accent);
  background:var(--sage-deep); box-shadow:none; }
.hero-main { flex:1; min-width:180px; }
.hero-main h2 { font-size:clamp(1.6rem,2.8vw,2rem); line-height:1.08; margin-top:4px; font-weight:500; }
.hero-sub { color:var(--bark-2); font-size:.92rem; margin-top:5px; }
.hero-actions { display:flex; gap:8px; }
.status-pill { display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:999px; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--line); box-shadow:none;
  font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--bark-2); }

/* Tabs (Unterstrich-Stil) */
.seg { display:flex; gap:2px; padding:0; border-radius:0;
  background:transparent; border:0; border-bottom:1px solid var(--line);
  box-shadow:none; overflow-x:auto; scrollbar-width:none; }
.seg::-webkit-scrollbar { display:none; }
.seg-btn { flex:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; padding:10px 12px; border-radius:0;
  display:inline-flex; align-items:center; gap:6px;
  font-family:inherit; font-weight:600; font-size:.86rem; color:var(--bark-2); cursor:pointer;
  transition:color .15s, border-color .15s; white-space:nowrap; }
.seg-btn .ico { vertical-align:0; opacity:.8; }
.seg-btn:hover { color:var(--bark); }
.seg-btn.active { background:transparent; color:var(--sage-deep); border-bottom-color:var(--sage-deep); box-shadow:none; }
.seg-btn.active .ico { opacity:1; }
.seg-btn:active { transform:scale(.985); }

.tab-wrap { animation:fadeUp .22s cubic-bezier(.16,1,.3,1) both; }
@keyframes fadeUp { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.panel { display:flex; flex-direction:column; gap:14px; }
.panel-head { display:flex; align-items:center; gap:12px; }
.panel-head h3 { font-size:1.45rem; flex:1; }

.glass-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:none; padding:var(--s4) 20px; }
.gc-head { font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:flex; align-items:center; gap:6px; }

.kv { display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:.94rem; line-height:1.5; }
.kv dt { color:var(--bark-2); font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding-top:2px; }
.kv dd { margin:0; color:var(--bark); }
.note-box { margin-top:14px; padding:13px 16px; background:rgba(255,253,247,.55); border:1px solid var(--glass-line); border-radius:var(--r-sm); font-size:.88rem; color:var(--bark-2); line-height:1.55; }

/* quick tiles (overview) */
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:560px){ .quick-grid { grid-template-columns:1fr; } }
.quick-tile { position:relative; text-align:left; padding:16px 16px 15px; border-radius:var(--r-lg); cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--hi), var(--sh-1);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .2s; display:flex; flex-direction:column; gap:3px; font-family:inherit; }
.quick-tile:hover { transform:translateY(-2px); box-shadow:var(--hi), var(--sh-2); }
.quick-tile .qt-ico { font-size:1.4rem; margin-bottom:6px; }
.quick-tile b { font-family:var(--serif); font-size:1.55rem; font-weight:600; line-height:1; color:var(--bark); }
.quick-tile small { color:var(--bark-2); font-size:.8rem; }
.quick-tile .qt-chev { position:absolute; right:14px; top:14px; color:var(--muted); font-size:1.3rem; opacity:.55; }

/* dog / thing rows */
.thing-row { display:flex; gap:14px; align-items:center; padding:13px 14px; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-md); box-shadow:var(--hi); }
.thing-row .av { width:44px; height:44px; border-radius:12px; background:var(--surface); border:1px solid var(--glass-line); display:grid; place-items:center; font-size:1.2rem; flex:none; overflow:hidden; box-shadow:var(--hi); }
.thing-row .av img{ width:100%; height:100%; object-fit:cover; }
.thing-row .info { flex:1; min-width:0; } .thing-row .info strong { display:block; font-size:1.02rem; } .thing-row .info small { color:var(--bark-2); font-size:.8rem; }
.thing-row .acts { display:flex; gap:6px; }

/* ---- Booking summary ---- */
.book-grid { display:grid; grid-template-columns:1fr 290px; gap:16px; align-items:start; }
@media (max-width:680px){ .book-grid { grid-template-columns:1fr; } }
.price-card { color:var(--on-accent); border-radius:var(--r-lg); padding:22px 24px; border:1px solid transparent;
  background:var(--sage-fill); box-shadow:var(--hi), 0 22px 46px -20px rgba(76,93,68,.7); }
.price-card .lbl { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; opacity:.82; }
.price-card .big { font-family:var(--serif); font-size:2.9rem; line-height:1; margin:6px 0 2px; font-weight:600; }
.price-card .per { font-size:.84rem; opacity:.82; }
.price-card hr { border:0; border-top:1px solid rgba(255,255,255,.22); margin:15px 0; }
.price-line { display:flex; justify-content:space-between; gap:10px; font-size:.85rem; padding:3px 0; }
.price-line span:last-child { font-weight:600; white-space:nowrap; }
.book-facts { display:grid; gap:10px; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--hi); }
.fact { display:flex; gap:12px; align-items:flex-start; font-size:.92rem; }
.fact .fi { width:34px; height:34px; border-radius:10px; background:var(--gold-pale); display:grid; place-items:center; flex:none; font-size:1rem; box-shadow:var(--hi); }
.fact .ft { line-height:1.4; padding-top:2px; } .fact .ft b{ display:block; } .fact .ft small{ color:var(--bark-2); }
.daypills { display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.daypill { font-size:.73rem; font-weight:600; padding:3px 10px; border-radius:999px; border:1px solid var(--glass-line); color:var(--bark-2); background:var(--glass); }
.daypill.on { background:var(--gold-deep); color:var(--on-accent); border-color:transparent; box-shadow:var(--hi); }

/* ---- Document center ---- */
.doc-list { display:grid; gap:12px; }
.doc-item { border:1px solid var(--glass-line); border-radius:var(--r-lg); overflow:hidden; background:var(--glass); box-shadow:var(--hi), var(--sh-1); }
.doc-item .di-top { display:flex; align-items:center; gap:14px; padding:15px 18px; }
.doc-item .di-ico { width:46px; height:46px; border-radius:12px; background:var(--surface); border:1px solid var(--glass-line); display:grid; place-items:center; font-size:1.35rem; flex:none; box-shadow:var(--hi); }
.doc-item .di-info { flex:1; min-width:0; } .doc-item .di-info strong { font-size:1.05rem; display:block; } .doc-item .di-info small { color:var(--bark-2); font-size:.82rem; line-height:1.4; display:block; margin-top:2px; }
.doc-status { display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:5px 11px; border-radius:999px; white-space:nowrap; box-shadow:var(--hi); }
.doc-status.offen { background:var(--glass); color:var(--bark-2); border:1px solid var(--glass-line); }
.doc-status.gesendet { background:var(--amber-pale); color:var(--amber); border:1px solid rgba(184,137,62,.3); }
.doc-status.signiert { background:var(--gold-deep); color:var(--on-accent); border:1px solid transparent; }
.doc-item .di-acts { display:flex; gap:8px; padding:0 18px 15px; flex-wrap:wrap; }

/* ============================================================
   FORMS
   ============================================================ */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.form-grid .full { grid-column:1/-1; }
.fld { display:block; }
.fld > span, label.fld-l { display:block; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--bark-2); margin-bottom:5px; }
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=search],input[type=time],input[type=password],input[type=url],select,textarea {
  width:100%; padding:9px 12px; min-height:38px; background:var(--input-bg); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  font-family:inherit; font-size:.9rem; color:var(--bark); transition:border-color .15s, box-shadow .15s; box-shadow:none; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--sage-deep); box-shadow:0 0 0 3px rgba(126,144,121,.18); background:var(--surface); }
textarea { min-height:66px; resize:vertical; }
.check { display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--bark); cursor:pointer; padding:9px 0; }
.check input { width:18px; height:18px; accent-color:var(--gold-deep); }
.subhead { font-family:var(--serif); font-size:1.3rem; font-weight:600; margin:20px 0 10px; grid-column:1/-1; color:var(--gold-deep); }
.subhead:first-child { margin-top:0; }

/* abo segmented options */
.abo-opts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:560px){ .abo-opts{ grid-template-columns:repeat(2,1fr);} }
.abo-opt { position:relative; border:1px solid var(--glass-line); border-radius:var(--r-md); padding:16px 10px; text-align:center; cursor:pointer; background:var(--glass); box-shadow:var(--hi); transition:transform .14s, box-shadow .2s, background .15s; }
.abo-opt:hover { transform:translateY(-2px); box-shadow:var(--hi),var(--sh-1); }
.abo-opt input { position:absolute; opacity:0; }
.abo-opt .freq { font-weight:600; font-size:.9rem; }
.abo-opt .pr { font-family:var(--serif); font-size:1.6rem; font-weight:600; color:var(--gold-deep); margin-top:4px; }
.abo-opt .pp { font-size:.69rem; color:var(--bark-2); }
.abo-opt.sel { border-color:transparent; background:var(--surface); box-shadow:var(--hi), 0 0 0 2.5px var(--gold-deep), 0 12px 26px -14px rgba(76,93,68,.7); }
.abo-opt.sel .pr { color:var(--gold-deep); }
.abo-opt .pop { position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:.56rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:var(--amber-fill); color:var(--on-accent); padding:3px 9px; border-radius:999px; white-space:nowrap; box-shadow:var(--hi); }

.day-choose { display:flex; gap:8px; flex-wrap:wrap; }
.day-choose label { flex:1; min-width:62px; text-align:center; border:1px solid var(--glass-line); border-radius:var(--r-sm); padding:10px 4px; cursor:pointer; background:var(--glass); box-shadow:var(--hi); font-size:.86rem; font-weight:600; color:var(--bark-2); transition:.15s; }
.day-choose label.on { background:var(--gold-deep); color:var(--on-accent); border-color:transparent; }
/* display:none ersetzt — siehe „Visuell versteckt, aber bedienbar" am Dateiende */

.extra-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.extra-row:last-child{ border-bottom:0; }
.extra-row .er-cb { width:19px; height:19px; accent-color:var(--gold-deep); flex:none; }
.extra-row .er-info { flex:1; } .extra-row .er-info b{ font-size:.92rem; } .extra-row .er-info small{ display:block; color:var(--bark-2); font-size:.78rem; }
.extra-row .er-price { font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--gold-deep); }
.extra-row .er-qty { width:56px; }
/* Editierbare Preiszelle pro Extra (überschreibt Standardpreis individuell). */
.extra-row .er-price-wrap {
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:none;
}
.extra-row .er-price-input {
  width:78px;
  padding:8px 28px 8px 10px;
  text-align:right;
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  color:var(--gold-deep);
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
}
.extra-row .er-price-input:focus {
  outline:none;
  border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(140,109,42,.15);
}
.extra-row .er-price-input::placeholder { color:var(--bark-2); opacity:.55; font-weight:500; }
.extra-row .er-price-suffix {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  color:var(--bark-2);
  font-size:.85rem;
  pointer-events:none;
}
/* Mobile: kompakter — Quantity + Price können nebeneinander knapper werden */
@media (max-width: 520px){
  .extra-row { flex-wrap:wrap; gap:8px 10px; }
  .extra-row .er-info { flex:1 1 100%; }
  .extra-row .er-qty { width:64px; }
  .extra-row .er-price-input { width:72px; }
}

/* ============================================================
   MODAL — iOS sheet
   ============================================================ */
.modal-bg { position:fixed; inset:0; background:rgba(30,27,20,.45); display:grid; place-items:end center; padding:24px 14px; z-index:80; overflow-y:auto; }
.modal-bg[hidden]{ display:none !important; }
@media (min-width:720px){ .modal-bg { place-items:start center; padding:36px 16px; } }
.modal-card { position:relative; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:var(--shadow-2); width:min(720px,100%); margin:auto auto 0;
  animation:sheetUp .2s ease-out; }
@media (min-width:720px){ .modal-card { margin:auto; border-radius:var(--radius-lg); animation:popIn .18s ease-out; } }
.modal-card.wide { width:min(960px,100%); }
.modal-card.wiz-xl { width:min(1180px,100%); }
@keyframes sheetUp { from{ transform:translateY(40px);} to{ transform:none;} }
@keyframes popIn { from{ transform:translateY(14px) scale(.985);} to{ transform:none;} }
.modal-card::before { content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:40px; height:5px; border-radius:999px; background:rgba(62,55,42,.22); }
@media (min-width:720px){ .modal-card::before { display:none; } }
.modal-head { padding:22px clamp(20px,3vw,28px) 4px; }
.modal-head h2 { font-size:1.55rem; font-weight:500; }
.modal-head .modal-sub { color:var(--bark-2); font-size:.9rem; margin-top:5px; line-height:1.5; }
.modal-body { padding:16px clamp(20px,3vw,28px); }
.modal-actions { padding:15px clamp(20px,3vw,32px) 22px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:8px; position:sticky; bottom:0; background:var(--surface); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.modal-x { position:absolute; right:12px; top:12px; width:36px; height:36px; background:transparent; border:1px solid transparent; font-size:1.3rem; color:var(--bark-2); cursor:pointer; line-height:1; border-radius:8px; box-shadow:none; transition:.15s; z-index:2; display:inline-flex; align-items:center; justify-content:center; }
.modal-x:hover { background:var(--surface); color:var(--bark); }

/* tabs (modal) */
.tabs { display:flex; gap:4px; padding:0 clamp(20px,3vw,32px); border-bottom:1px solid var(--glass-line); flex-wrap:wrap; }
.tab { padding:11px 14px; font-size:.85rem; font-weight:600; color:var(--bark-2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab.active { color:var(--gold-deep); border-bottom-color:var(--gold-deep); }

/* email preview */
.mail-frame { border:1px solid var(--glass-line); border-radius:var(--r-md); overflow:hidden; background:var(--cream); box-shadow:inset 0 1px 3px rgba(62,55,42,.06); }
.mail-meta { padding:13px 18px; background:var(--glass-thick); border-bottom:1px solid var(--glass-line); font-size:.85rem; }
.mail-meta .ml { color:var(--bark-2); width:70px; display:inline-block; font-weight:600; }
.mail-render { max-height:52vh; overflow-y:auto; }

/* Composer: editor links, live-preview rechts (mobile gestapelt) */
.composer { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:780px){ .composer { grid-template-columns:1fr; } }
.composer-edit { display:flex; flex-direction:column; gap:0; }
.composer-edit textarea { font-family:inherit; }
.composer-edit code {
  background:rgba(120,130,110,.12); padding:1px 6px; border-radius:5px;
  font-size:.8rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--gold-deep);
}
.composer-preview {
  position:sticky; top:8px;
  background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-lg);
  padding:16px; box-shadow:var(--hi),var(--sh-1);
  max-height:74vh; overflow:hidden; display:flex; flex-direction:column;
}
.composer-preview .mail-frame { flex:1; overflow:hidden; }
.composer-preview .mail-render { max-height:64vh; }

/* signature */
.sig-wrap { border:2px dashed var(--line); border-radius:14px; background:rgba(255,255,255,.5); padding:10px; transition:border-color .2s; }
.sig-wrap.active { border-color:var(--gold-deep); }
.sig-wrap canvas { display:block; width:100%; height:190px; background:var(--surface); border-radius:10px; touch-action:none; cursor:crosshair; box-shadow:inset 0 1px 3px rgba(62,55,42,.07); }
.sig-tools { display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px; flex-wrap:wrap; }

/* signed badge inside doc item */
.signed-meta { font-size:.76rem; color:var(--gold-deep); display:flex; align-items:center; gap:6px; padding:0 18px 10px; }

/* Online-Aufnahmebogen-Badge */
.intake-badge {
  margin:0 18px 10px; padding:8px 13px; border-radius:10px;
  font-size:.78rem; font-weight:600; display:flex; align-items:center; gap:8px;
  border:1px solid; line-height:1.4;
}
.intake-badge.pending { background:var(--amber-pale); color:var(--amber); border-color:rgba(184,137,62,.3); }
.intake-badge.done    { background:var(--gold-pale);  color:var(--gold-deep); border-color:rgba(92,110,84,.3); }

/* toast */
.toast { position:fixed; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%) translateY(12px); background:var(--bark); color:var(--cream); padding:11px 18px 11px 14px; border-radius:10px; box-shadow:var(--shadow-2); border:1px solid rgba(255,255,255,.08); font-size:.88rem; font-weight:600; display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:opacity .14s ease-in, transform .16s ease-in; z-index:100; max-width:90vw; }
/* Ankunft ruhig, Abgang schneller — ein langsamer Abgang liest sich als Verzögerung. */
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); transition:opacity .22s, transform .3s cubic-bezier(.16,1,.3,1); }
@media (max-width:900px){ .toast { bottom:calc(var(--bottombar-h) + 14px + env(safe-area-inset-bottom, 0px)); } }
.toast.err { background:var(--rose); color:var(--on-accent); }
.toast .ti { font-size:1.1rem; }

/* empty */
.empty { text-align:center; padding:48px 22px; color:var(--bark-2); }
.empty img { width:104px; height:104px; object-fit:contain; opacity:.92; margin-bottom:10px; filter:drop-shadow(0 12px 18px rgba(62,55,42,.18)); }
.empty h2 { margin-bottom:6px; font-size:1.7rem; }
.empty.sm { padding:30px 16px; }
.empty.sm img { width:74px; height:74px; }

.muted { color:var(--bark-2); }
.tiny { font-size:.78rem; }
.warn { font-size:.82rem; color:var(--rose); margin-top:10px; }
.spacer-grow { flex:1; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.grow { flex:1; }

/* scrollbars */
.list-scroll::-webkit-scrollbar, .mail-render::-webkit-scrollbar { width:8px; }
.list-scroll::-webkit-scrollbar-thumb, .mail-render::-webkit-scrollbar-thumb { background:rgba(92,110,84,.28); border-radius:999px; }

/* ============================================================
   NOTIFICATION BELL + PANEL
   ============================================================ */
.notif-bell {
  position:relative; width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center; cursor:pointer;
  background:var(--glass-thin); border:1px solid var(--glass-line); color:var(--gold-deep);
  box-shadow:var(--hi); transition:background .2s, transform .15s, color .2s;
}
.notif-bell:hover { background:var(--surface); transform:translateY(-1px); color:var(--bark); }
.notif-bell:active { transform:scale(.94); }
.notif-bell.has-unread { animation:notifPulse 2.4s ease-in-out infinite; }
.notif-bell.has-unread .paw-ico { animation:pawWiggle .8s ease 2; }
.notif-dog {
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  box-shadow:var(--hi), 0 2px 6px -2px rgba(62,55,42,.3);
  background:var(--gold-pale);
}
.notif-bell { padding:0; overflow:visible; background:transparent; border:0; }
.notif-bell:hover { transform:translateY(-1px) scale(1.04); background:transparent; }
.notif-bell:active { transform:scale(.94); }
.notif-bell.has-unread .notif-dog { animation:dogWiggle .8s ease 2; }
@keyframes dogWiggle {
  0%,100% { transform:rotate(0) scale(1); }
  20%     { transform:rotate(-12deg) scale(1.05); }
  40%     { transform:rotate(10deg)  scale(1.05); }
  60%     { transform:rotate(-6deg)  scale(1); }
  80%     { transform:rotate(4deg); }
}
/* Badge oben rechts in der Ecke */
.notif-badge {
  position:absolute; top:-3px; right:-3px;
}
.notif-badge {
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--rose); color:var(--on-accent);
  font-size:.62rem; font-weight:600; line-height:18px; text-align:center;
  box-shadow:0 2px 6px -2px rgba(178,85,85,.6); border:1.5px solid var(--cream);
}
@keyframes notifPulse {
  0%,100% { box-shadow:var(--hi); }
  50%     { box-shadow:var(--hi), 0 0 0 6px rgba(178,85,85,.18); }
}
@keyframes notifShake {
  0%,100% { transform:rotate(0); }
  20%     { transform:rotate(-12deg); }
  40%     { transform:rotate(10deg); }
  60%     { transform:rotate(-8deg); }
  80%     { transform:rotate(6deg); }
}

.notif-panel {
  position:fixed; top:72px; right:clamp(12px,3vw,28px); z-index:90;
  width:min(380px, calc(100vw - 32px));
  background:var(--paper); border:1px solid var(--glass-line); border-radius:14px;
  box-shadow:var(--sh-pop), var(--hi);
  opacity:0; transform:translateY(-8px) scale(.96); pointer-events:none;
  transition:opacity .22s, transform .22s cubic-bezier(.2,.9,.3,1);
  max-height:calc(100vh - 110px); overflow:hidden; display:flex; flex-direction:column;
}
.notif-panel.open { opacity:1; transform:none; pointer-events:auto; }
.notif-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line-soft);
  font-family:var(--serif); font-size:1.05rem;
}
.notif-close {
  background:transparent; border:0; font-size:1.5rem; color:var(--bark-2);
  width:44px; height:44px; border-radius:50%; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.notif-close:hover { background:var(--cream); color:var(--bark); }

.notif-perm {
  display:flex; gap:12px; align-items:center; padding:12px 16px;
  background:var(--gold-pale); border-bottom:1px solid var(--line-soft);
}
.notif-perm-text { flex:1; }
.notif-perm-text strong { display:block; font-size:.86rem; color:var(--gold-deep); }
.notif-perm-text small { display:block; font-size:.74rem; color:var(--bark-2); margin-top:2px; line-height:1.4; }

.notif-list { flex:1; overflow-y:auto; max-height:60vh; }
.notif-item {
  display:flex; gap:11px; padding:13px 16px; cursor:pointer;
  border-bottom:1px solid var(--line-soft); transition:background .15s;
}
.notif-item:hover { background:var(--cream); }
.notif-item:last-child { border-bottom:0; }
.notif-item-ico {
  width:36px; height:36px; border-radius:12px; flex:none;
  background:var(--surface);
  border:1px solid var(--glass-line); display:grid; place-items:center;
  font-size:1rem; box-shadow:var(--hi);
}
.notif-item-body { flex:1; min-width:0; }
.notif-item-body strong { font-size:.88rem; display:block; }
.notif-item-text { font-size:.8rem; color:var(--bark-2); margin-top:2px; line-height:1.45; }
.notif-item-when { font-size:.7rem; color:var(--muted); margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.notif-action {
  background:var(--gold-deep); color:var(--on-accent);
  padding:2px 9px; border-radius:99px;
  font-size:.7rem; font-weight:600;
  letter-spacing:.02em;
}

.notif-empty {
  padding:30px 18px; text-align:center; color:var(--muted); font-style:italic; font-size:.88rem;
}
.notif-foot {
  padding:10px 16px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:flex-end;
}

@media (max-width:560px) {
  .notif-panel { left:8px; right:8px; width:auto; top:72px; }
}

/* (g31) View-Switcher lebt jetzt in der Sidebar (.nav-item) — Badge-Klasse bleibt für Tabs */
.view-tab-badge {
  display:inline-block; margin-left:6px; min-width:18px; height:18px; line-height:18px;
  padding:0 5px; border-radius:9px;
  background:var(--amber-fill); color:var(--on-accent);
  font-size:.68rem; font-weight:600; letter-spacing:.02em; text-align:center;
}

/* ============================================================
   ANFRAGEN VIEW (Webseite-Kontaktformular)
   ============================================================ */
.inq-head {
  margin:18px clamp(12px,3vw,26px) 24px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}
.inq-head h1, .inq-head h2 { font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 4px; color:var(--bark); font-weight:600; }
.inq-head h1 em { color:var(--gold-deep); font-style:italic; font-weight:500; }
.inq-head .sub { color:var(--bark-2); font-size:.95rem; margin:0; max-width:640px; }

.inq-filter-bar {
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 clamp(12px,3vw,26px) 22px;
}
.inq-filter {
  background:var(--glass); border:1px solid var(--glass-line); padding:8px 16px;
  border-radius:999px; font-family:inherit; font-weight:600; font-size:.84rem; color:var(--bark-2);
  cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:8px;
}
.inq-filter:hover { color:var(--bark); border-color:var(--bark-2); }
.inq-filter.active { background:var(--bark); color:var(--cream); border-color:var(--bark); }
.inq-filter-count {
  display:inline-block; padding:1px 7px; background:rgba(255,255,255,.18); border-radius:999px;
  font-size:.74rem; font-weight:600; min-width:18px; text-align:center;
}
.inq-filter:not(.active) .inq-filter-count { background:rgba(62,55,42,.08); color:var(--bark-2); }

.inq-list {
  margin:0 clamp(12px,3vw,26px) 24px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:16px;
}

.inq-card {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; box-shadow:var(--hi), 0 1px 3px rgba(62,55,42,.04);
  display:flex; flex-direction:column; gap:12px;
  transition:transform .15s, box-shadow .15s;
}
.inq-card:hover { transform:translateY(-2px); box-shadow:var(--hi), var(--sh-2); }
.inq-card.is-new { border-left:4px solid var(--gold-deep); }
.inq-card.is-holiday { border-left:4px solid #5C6E54; }
.inq-card.is-holiday.is-new { border-left:4px solid var(--gold-deep); }

/* Holiday-Banner in Inquiry-Card */
.inq-holiday-banner {
  margin:10px 0 12px;
  background:#f0f4eb;
  border:1px solid rgba(92,110,84,.25);
  border-radius:10px; padding:12px 16px;
}
.inq-hb-dates {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:14px; align-items:center;
}
@media (max-width:540px) {
  .inq-hb-dates { grid-template-columns:1fr; text-align:center; }
}
.inq-hb-date { display:flex; align-items:center; gap:10px; }
.inq-hb-date-ico { font-size:1.6rem; }
.inq-hb-date small {
  display:block; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--green-text); font-weight:600;
}
.inq-hb-date strong {
  display:block; font-family:var(--serif); font-size:1.05rem;
  color:var(--bark); margin-top:2px;
}
.inq-hb-nights {
  text-align:center; background:var(--surface); border-radius:10px;
  padding:8px 14px; border:1px solid rgba(92,110,84,.2);
  min-width:80px;
}
.inq-hb-nights-num {
  font-family:var(--serif); font-size:1.5rem; font-weight:600;
  color:var(--sage-deep); line-height:1;
}
.inq-hb-nights-lbl {
  font-size:.7rem; color:var(--bark-2); text-transform:uppercase;
  letter-spacing:.06em; margin-top:2px;
}

.inq-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.inq-card-meta { display:flex; flex-direction:column; gap:3px; }
.inq-type-tag {
  font-family:var(--serif); font-style:italic; font-size:.82rem; color:var(--bark-2);
  letter-spacing:.02em;
}
.inq-card-time { font-size:.74rem; color:var(--bark-2); letter-spacing:.04em; }
.inq-status-pill {
  display:inline-block; padding:4px 11px; border-radius:999px;
  font-family:var(--sans); font-weight:600; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
}

.inq-card-body {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.inq-card-name { font-family:var(--serif); font-size:1.12rem; color:var(--bark); display:block; margin-bottom:3px; font-weight:600; }
.inq-card-contact { font-size:.84rem; color:var(--bark-2); line-height:1.55; }
.inq-card-contact a { color:var(--bark-2); text-decoration:none; }
.inq-card-contact a:hover { color:var(--gold-deep); text-decoration:underline; }
.inq-card-contact .dot { margin:0 5px; opacity:.6; }
.inq-card-dog { font-size:.86rem; color:var(--bark); line-height:1.55; }
.inq-card-service { font-family:var(--serif); font-style:italic; color:var(--sage-deep); font-size:.92rem; margin-top:2px; }
.inq-card-period { font-size:.76rem; color:var(--bark-2); margin-top:2px; }

.inq-card-message {
  font-family:var(--serif); font-style:italic; font-size:.92rem; line-height:1.55;
  color:var(--bark); background:var(--cream); padding:10px 14px; border-radius:9px;
  border-left:3px solid var(--gold-deep);
}

.inq-card-actions {
  display:flex; flex-wrap:wrap; gap:6px; padding-top:8px;
  border-top:1px solid var(--line-soft);
}

.inq-detail-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.inq-detail-table th {
  text-align:left; padding:8px 14px 8px 0; vertical-align:top;
  width:140px; color:var(--bark-2); font-weight:600; font-size:.82rem;
  letter-spacing:.04em; text-transform:uppercase;
  border-bottom:1px solid var(--line-soft);
}
.inq-detail-table td { padding:8px 0; color:var(--bark); border-bottom:1px solid var(--line-soft); }
.inq-detail-head {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1.5px solid var(--line);
}
.inq-detail-time { font-size:.82rem; color:var(--bark-2); }
.inq-detail-msg {
  font-family:var(--serif); font-style:italic; font-size:1rem; line-height:1.6;
  background:var(--cream); padding:12px 16px; border-radius:9px;
  border-left:3px solid var(--gold-deep);
}

.inq-original-preview {
  background:var(--cream); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 16px; font-size:.86rem; line-height:1.65; color:var(--bark-2);
}
.inq-original-preview strong { color:var(--bark); }
.inq-original-preview em { color:var(--bark); font-family:var(--serif); }

/* Inquiry-Reply Composer – kompakte Original-Karte oben im Editor */
.inq-reply-source {
  background:#F6F4EA;
  border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; margin-bottom:18px;
}
.inq-reply-source-head {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--line-soft);
}
.inq-reply-source-tag {
  font-family:var(--serif); font-style:italic; font-size:.86rem; color:var(--gold-deep);
  font-weight:600;
}
.inq-reply-source-meta {
  font-size:.92rem; color:var(--bark); line-height:1.65;
}
.inq-reply-source-meta a { color:var(--bark); text-decoration:none; }
.inq-reply-source-meta a:hover { color:var(--gold-deep); }
.inq-reply-source-meta .dot { margin:0 5px; opacity:.5; color:var(--bark-2); }
.inq-reply-source-svc {
  font-family:var(--serif); font-style:italic; color:var(--sage); font-size:.92rem; margin-top:3px;
}
.inq-reply-source-msg {
  font-family:var(--serif); font-style:italic; font-size:.96rem; line-height:1.55;
  color:var(--bark); background:var(--surface); padding:10px 14px; border-radius:9px;
  border-left:3px solid var(--gold-deep); margin-top:10px;
}

/* ============================================================
   TODAY-WIDGET
   ============================================================ */
.today-widget {
  margin:0 0 var(--s4);
  background:transparent; border:0; border-radius:0;
  padding:0; box-shadow:none;
}
.today-widget:empty { display:none; }

/* Geburtstags-Widget */
.birthday-widget {
  margin:0 0 14px;
  background:#fff7e5;
  border:1px solid rgba(220, 168, 64, .4);
  border-radius:var(--r-lg);
  padding:16px 20px;
  box-shadow:var(--hi), var(--sh-1);
}
.bd-head {
  font-family:var(--serif); font-size:1.18rem; font-weight:600;
  color:#8c6b1e; display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.bd-head span { font-size:1.05rem; }
.bd-list { display:flex; flex-direction:column; gap:8px; }
.bd-card {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px; align-items:center;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(220, 168, 64, .2);
  border-radius:10px;
  padding:11px 14px;
}
.bd-icon { font-size:1.6rem; line-height:1; }
.bd-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.bd-body strong { font-size:.98rem; color:var(--bark); }
.bd-body small { color:var(--bark-2); font-size:.78rem; }
.bd-actions { display:flex; gap:6px; flex-wrap:wrap; }

/* Vorlagen-Manager (Snippets-Tab) */
.snippets-list { display:flex; flex-direction:column; gap:14px; margin-bottom:10px; }
.snippet-card {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 16px; box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:8px;
}
.snippet-head { display:flex; align-items:center; gap:10px; }
.snippet-label { font-weight:600; font-family:var(--serif); }
.snippet-subject { font-size:.9rem; color:var(--bark-2); }
.snippet-body { font-family:inherit; font-size:.92rem; line-height:1.55; resize:vertical; min-height:90px; }
.settings-empty {
  text-align:center; padding:30px 20px; color:var(--bark-2); font-size:.92rem;
  background:rgba(120,130,110,.05); border-radius:10px;
}

/* Hunde-Profilbild im Modal */
.dog-photo-section {
  display:flex; gap:18px; align-items:center;
  padding:14px 16px; background:rgba(120,130,110,.06);
  border:1px solid var(--line-soft); border-radius:12px;
  margin-bottom:8px;
}
.dog-photo-avatar {
  width:96px; height:96px; border-radius:50%;
  background:#f0eadc;
  border:3px solid #fff; box-shadow:var(--sh-1);
  display:grid; place-items:center;
  overflow:hidden; flex:none;
}
.dog-photo-avatar.has-photo { background:var(--surface); }
.dog-photo-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.dog-photo-placeholder { font-size:2.4rem; opacity:.4; }
.dog-photo-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.dog-photo-actions small { color:var(--bark-2); font-size:.74rem; }
/* Hunde-Avatar in der Liste mit Foto */
.thing-row .av.has-photo {
  padding:0; background:var(--surface); overflow:hidden;
  width:44px; height:44px;
}
.thing-row .av.has-photo img {
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Hunde-Gesundheits-Dossier */
.dh-hero {
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px; padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.dh-hero-icon { font-size:2.4rem; }
.dh-hero-info h3 { margin:0; font-family:var(--serif); font-size:1.4rem; }
.dh-hero-info small { color:var(--bark-2); font-size:.86rem; }
.dh-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:18px;
}
@media (max-width: 640px) { .dh-grid { grid-template-columns:1fr; } }
.dh-block {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:10px;
  padding:11px 14px;
}
.dh-block-head { font-family:var(--serif); font-size:.92rem; font-weight:600; color:var(--bark); margin-bottom:6px; }
.dh-block-body { font-size:.88rem; color:var(--bark); line-height:1.55; display:flex; flex-direction:column; gap:3px; }
.dh-block.dh-block-warn { background:#fff5e6; border-color:rgba(220,140,40,.3); }
.dh-vacc-block { margin-bottom:14px; }
.dh-vacc-block h4 { margin:0 0 10px; font-family:var(--serif); font-size:1.02rem; }
.dh-vacc-list { display:flex; flex-direction:column; gap:6px; }
.dh-vacc {
  display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  padding:8px 12px; background:var(--surface); border-radius:9px; border:1px solid var(--line-soft);
  font-size:.85rem;
}
.dh-vacc.expired { background:#fbeae9; border-color:rgba(180,60,60,.3); }
.dh-vacc.soon { background:#fcf5e3; border-color:rgba(180,140,40,.3); }
.dh-vacc-name { font-weight:600; color:var(--bark); }
.dh-vacc-date { color:var(--bark-2); font-size:.76rem; }
.dh-vacc-due { font-weight:600; font-size:.76rem; }
.dh-vacc-due.expired { color:var(--rose-text); }
.dh-vacc-due.soon { color:var(--amber-text); }
.dh-vacc-due.ok { color:var(--green-text); }
.dh-emergency-section { background:rgba(217,79,79,.05); border:1px solid rgba(217,79,79,.2); border-radius:10px; padding:12px 14px; }
.dh-emergency-section h4 { margin:0 0 10px; font-family:var(--serif); color:#b53232; }
.dh-tel-row { display:flex; flex-direction:column; gap:4px; padding:6px 0; border-bottom:1px solid rgba(217,79,79,.1); }
.dh-tel-row:last-child { border-bottom:0; }

/* Foto-Galerie pro Hund */
.dog-gallery-head {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.dog-gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:8px;
}
.dog-gallery-tile {
  margin:0; position:relative; cursor:pointer;
  border-radius:10px; overflow:hidden;
  aspect-ratio: 1 / 1;
  background:#f0eadc;
  transition:transform .15s, box-shadow .2s;
}
.dog-gallery-tile:hover { transform:translateY(-2px); box-shadow:var(--sh-2); }
.dog-gallery-tile img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.dog-gallery-tile figcaption {
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.65);
  color:#fff; padding:18px 8px 6px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.72rem; font-weight:600;
}
.dog-gallery-lightbox {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.92); display:grid; place-items:center;
  padding:30px;
  animation:fadeIn .2s;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.dog-gallery-lightbox img {
  max-width:100%; max-height:75vh; border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.dog-gallery-lightbox .dog-gallery-lb-info {
  position:absolute; left:30px; right:30px; bottom:30px;
  color:#fff; text-align:center; max-width:600px; margin:0 auto;
}
.dog-gallery-lightbox .dog-gallery-lb-info strong { display:block; font-size:1rem; margin-bottom:6px; }
.dog-gallery-lightbox .dog-gallery-lb-info p { font-size:.88rem; opacity:.85; margin:0; line-height:1.5; }
.dog-gallery-lb-close {
  position:absolute; top:20px; right:24px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none;
  color:#fff; font-size:1.5rem; cursor:pointer;
  display:grid; place-items:center;
}
.dog-gallery-lb-close:hover { background:rgba(255,255,255,.25); }

/* Walk-Plan Sub-Navigation (Heute / Woche / Monat) */
.cal-subnav {
  display:flex; gap:6px; padding:6px;
  background:rgba(120,130,110,.06); border-radius:12px;
  margin-bottom:18px;
}
.cal-subnav-btn {
  flex:1; padding:9px 14px;
  background:transparent; border:none; border-radius:9px;
  font-family:inherit; font-size:.92rem; font-weight:600; color:var(--bark-2);
  cursor:pointer; transition:all .15s;
}
.cal-subnav-btn:hover { color:var(--bark); background:rgba(255,255,255,.5); }
.cal-subnav-btn.active {
  background:var(--surface); color:var(--bark);
  box-shadow:var(--hi), 0 2px 6px -2px rgba(62,55,42,.18);
}

/* Monats-Kalender */
.cal-month-head {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:14px; flex-wrap:wrap; gap:10px;
}
.cal-month-head h1, .cal-month-head h2 { font-family:var(--serif); font-size:1.6rem; margin:0; text-transform:capitalize; }
.cal-month-grid {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
  background:var(--surface); border-radius:12px; padding:8px;
  box-shadow:var(--sh-1);
}
.cal-month-wd {
  text-align:center; font-size:.74rem; font-weight:600;
  color:var(--bark-2); text-transform:uppercase; letter-spacing:.06em;
  padding:6px 0;
}
.cal-month-cell {
  min-height:78px; padding:6px 8px;
  background:var(--cream-soft);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s;
  display:flex; flex-direction:column; gap:4px;
}
.cal-month-cell:hover { background:var(--surface); box-shadow:var(--sh-1); }
.cal-month-cell.out { opacity:.35; cursor:default; }
.cal-month-cell.out:hover { background:var(--cream-soft); box-shadow:none; }
.cal-month-cell.today { background:var(--surface); border:1px solid var(--gold-deep); }
.cal-month-num { font-family:var(--serif); font-weight:600; font-size:.95rem; color:var(--bark); }
.cal-month-events { display:flex; flex-direction:column; gap:2px; }
.cal-month-event {
  font-size:.7rem; padding:2px 5px; background:rgba(92,110,84,.15); color:var(--bark);
  border-radius:5px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .15s;
}
.cal-month-event:hover { background:rgba(92,110,84,.3); }
.cal-month-more { font-size:.68rem; color:var(--bark-2); padding:0 5px; }
@media (max-width: 720px) {
  .cal-month-cell { min-height:60px; padding:4px 5px; }
  .cal-month-event { font-size:.62rem; padding:1px 3px; }
}

/* Tagesplan-View */
.today-view-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:14px; margin-bottom:22px;
}
.today-view-date {
  font-family:var(--serif); font-size:1.2rem; color:var(--gold-deep);
  margin:6px 0 0; font-style:italic;
}
.today-view-nav {
  display:flex; gap:6px; flex-wrap:wrap;
}
.today-view-empty {
  text-align:center; padding:60px 20px; color:var(--bark-2);
}
.today-view-empty img { width:90px; opacity:.5; margin-bottom:14px; }
.today-block {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:var(--s3); box-shadow:none;
}
.today-block h2 {
  font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px; padding-bottom:10px; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--line);
}
.today-block h2 .ico { color:var(--sage); }
.today-block.today-block-birthday { border-left:3px solid var(--amber); }
.today-block.today-block-arrival { border-left:3px solid var(--sage-deep); }
.today-block.today-block-depart { border-left:3px solid var(--amber); }
.today-block.today-block-stay { border-left:3px solid var(--sage); }
.today-row {
  display:flex; flex-wrap:wrap; gap:6px;
  padding:6px 0; font-size:.95rem;
  border-bottom:1px solid rgba(120,130,110,.1);
}
.today-row:last-child { border-bottom:0; }
.today-walk-card {
  display:grid; grid-template-columns:120px 1fr auto;
  gap:14px; align-items:center;
  padding:11px 0; border-bottom:1px solid rgba(120,130,110,.1);
}
.today-walk-card:last-child { border-bottom:0; }
.today-walk-card.is-appt .today-walk-time { color:var(--gold-deep); font-weight:600; }
.today-walk-time { font-family:var(--serif); font-size:.95rem; color:var(--bark); }
.today-walk-info { display:flex; flex-direction:column; gap:2px; }
.today-walk-info strong { font-size:1rem; color:var(--bark); }
.today-walk-info small { font-size:.82rem; color:var(--bark-2); }
.today-walk-hb { color:var(--gold-deep) !important; font-weight:600; }
@media (max-width: 640px) {
  .today-walk-card { grid-template-columns:1fr; gap:6px; }
}
@media print {
  .sidebar, .top-row, .bottom-bar, .more-sheet, .today-view-nav, .back-top, .emergency-btn { display:none !important; }
  .today-view { padding:20px; }
  .today-block { break-inside:avoid; box-shadow:none; border:1px solid #ccc; }
}

/* Auslastungs-Monitor */
.capacity-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px;
}
.capacity-day {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:11px 14px;
}
.capacity-day.is-today { border-color:var(--gold-deep); box-shadow:0 0 0 2px rgba(140,109,42,.15); }
.capacity-day.full { background:#fbeae9; border-color:rgba(180,60,60,.3); }
.capacity-day.busy { background:#fcf5e3; border-color:rgba(180,140,40,.3); }
.capacity-day.free { background:#f0f4eb; border-color:rgba(92,110,84,.25); }
.cap-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--line-soft); }
.cap-head strong { font-family:var(--serif); font-size:.95rem; }
.cap-head small { color:var(--bark-2); font-size:.78rem; }
.cap-slot { display:grid; grid-template-columns:80px 1fr 50px; gap:8px; align-items:center; padding:4px 0; font-size:.8rem; }
.cap-slot-lbl { color:var(--bark-2); font-size:.74rem; }
.cap-slot-bar { height:8px; background:rgba(120,130,110,.15); border-radius:99px; overflow:hidden; }
.cap-slot-fill { height:100%; background:#5C6E54; transition:width .3s; }
.cap-slot-num { text-align:right; font-variant-numeric:tabular-nums; }

/* EÜR-Tab */
.euer-stats {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  margin-bottom:14px;
}
@media (max-width: 720px) { .euer-stats { grid-template-columns:1fr; } }
.euer-stat {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 18px; box-shadow:var(--sh-1);
}
.euer-stat .lbl { font-size:.78rem; color:var(--bark-2); text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-bottom:6px; }
.euer-stat .val { font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--bark); margin-bottom:4px; }
.euer-stat small { font-size:.78rem; color:var(--bark-2); }
.euer-stat.income { background:#f0f4eb; border-color:rgba(92,110,84,.25); }
.euer-stat.income .val { color:var(--green-text); }
.euer-stat.expense { background:#fcf3eb; border-color:rgba(180,120,40,.25); }
.euer-stat.expense .val { color:var(--amber-text); }
.euer-stat.profit { background:#fff; border-color:var(--gold-deep); }
.euer-stat.profit .val { color:var(--gold-deep); }
.euer-stat.profit.negative .val { color:var(--rose-text); }
.euer-table-wrap { overflow-x:auto; }
.euer-table {
  width:100%; border-collapse:collapse; font-size:.92rem;
  background:var(--surface); border-radius:10px; overflow:hidden;
  box-shadow:var(--sh-1);
}
.euer-table th, .euer-table td {
  padding:8px 12px; text-align:right;
}
.euer-table th { background:rgba(120,130,110,.08); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--bark-2); }
.euer-table th:first-child, .euer-table td:first-child { text-align:left; }
.euer-table tbody tr:not(.empty):not(.sum) { border-bottom:1px solid var(--line-soft); }
.euer-table tbody tr.empty { color:var(--bark-2); opacity:.6; }
.euer-table tbody tr.sum { background:#fbf5e3; font-size:1rem; }
.euer-table .pos { color:var(--green-text); }
.euer-table .neg { color:var(--rose-text); }

/* Update-Tab */
.update-status {
  background:rgba(120,130,110,.06); border-radius:10px; padding:12px 14px;
  font-size:.92rem;
}
.update-version-row { display:flex; align-items:baseline; gap:10px; }
.update-ver {
  font-family:monospace; background:var(--surface); padding:3px 9px; border-radius:7px;
  border:1px solid var(--line-soft); font-size:.88rem;
}
.update-dropzone {
  background:var(--surface);
  border:2px dashed var(--line); border-radius:12px;
  padding:30px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  cursor:pointer; transition:all .15s;
}
.update-dropzone:hover, .update-dropzone.dragging {
  border-color:var(--gold-deep); background:var(--surface);
  transform:translateY(-1px);
}
.ud-icon { font-size:3rem; line-height:1; opacity:.85; }
.ud-text { display:flex; flex-direction:column; gap:4px; }
.ud-text strong { font-family:var(--serif); font-size:1.05rem; color:var(--bark); }
.ud-text small { color:var(--bark-2); font-size:.84rem; }
.update-preview {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:10px;
  padding:14px 16px; margin-top:14px;
}
.update-preview-head {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:.95rem; margin-bottom:10px;
  padding-bottom:8px; border-bottom:1px solid var(--line-soft);
}
.update-detail { margin:8px 0; }
.update-detail summary {
  cursor:pointer; padding:6px 0; font-weight:600; font-size:.88rem;
}
.update-detail-reject summary { color:var(--amber-text); }
.update-file-list {
  list-style:none; padding:0 0 0 14px; margin:6px 0; max-height:240px; overflow-y:auto;
}
.update-file-list li {
  padding:3px 0; font-size:.82rem; font-family:monospace;
  border-bottom:1px solid rgba(120,130,110,.08);
}
.update-actions {
  display:flex; gap:8px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap;
}
.update-backups { background:var(--surface); border:1px solid var(--line-soft); border-radius:10px; padding:6px; }
.backup-list { list-style:none; padding:0; margin:0; }
.backup-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border-bottom:1px solid var(--line-soft); font-size:.88rem;
}
.backup-row:last-child { border-bottom:0; }
.backup-name { font-family:monospace; color:var(--bark); }
.backup-row small { color:var(--bark-2); font-size:.78rem; }

/* Broadcast-Tab (Massen-Mail) */
.broadcast-filters {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
  background:rgba(120,130,110,.05);
  border-radius:10px; padding:12px 14px;
}
.broadcast-filters .check {
  background:var(--surface); padding:10px 14px; border-radius:9px;
  border:1px solid var(--line-soft);
  font-size:.92rem;
}
.broadcast-filters .check input { margin-right:8px; accent-color:var(--gold-deep); }
.broadcast-filters .muted { font-size:.78rem; color:var(--bark-2); }

/* Notfall-Knopf — inline im Customer-Detail-Header (nicht mehr floating) */
.emergency-btn {
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background:#d94f4f;
  border:2px solid #fff;
  color:#fff; font-size:1.2rem; cursor:pointer;
  box-shadow:0 4px 10px -2px rgba(181,50,50,.45);
  transition:transform .15s, box-shadow .2s, filter .15s;
  -webkit-tap-highlight-color:transparent;
}
.emergency-btn:hover { transform:translateY(-1px) scale(1.05); filter:brightness(1.08); }
.emergency-btn:active { transform:scale(.95); }

/* ============================================================
   NOTFALL-MODAL · Brand-Redesign 🆘 (Hammer UI)
   ============================================================ */
.er-shell { display:flex; flex-direction:column; gap:18px; }

/* Hero-Bar mit Avatar + Kunde-Name */
.er-hero {
  display:flex; align-items:center; gap:14px;
  background:#fff7e8;
  border:1px solid rgba(220, 168, 64, .35);
  border-radius:14px;
  padding:16px 20px;
  position:relative; overflow:hidden;
}
.er-hero::before {
  content:''; position:absolute; right:-30px; top:-30px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.4), transparent);
  pointer-events:none;
}
.er-hero-empty {
  background:#f8f5e8;
  border-color:var(--line);
}
.er-hero-avatar {
  width:54px; height:54px; border-radius:50%;
  background:#5C6E54;
  color:#fff; display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:1.15rem;
  border:3px solid #fff; box-shadow:0 6px 14px -4px rgba(76,93,68,.5);
  flex:none;
}
.er-hero-info { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.er-hero-label {
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; color:var(--amber-text); opacity:.85;
}
.er-hero-name {
  font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--bark);
  line-height:1.15;
}
.er-hero-dog { color:var(--bark-2); font-size:.86rem; }
.er-hero-puls {
  width:14px; height:14px; border-radius:50%;
  background:#d94f4f; flex:none;
  box-shadow:0 0 0 0 rgba(217,79,79,.6);
  animation:pulseSos 1.8s ease-out infinite;
}
@keyframes pulseSos {
  0% { box-shadow:0 0 0 0 rgba(217,79,79,.6); }
  60% { box-shadow:0 0 0 14px rgba(217,79,79,0); }
  100% { box-shadow:0 0 0 0 rgba(217,79,79,0); }
}

/* Section-Titel */
.er-section-title {
  font-family:var(--serif); font-size:1.02rem; font-weight:600;
  color:var(--bark); margin:6px 0 -4px;
  display:flex; align-items:center; gap:10px;
}
.er-section-title::before {
  content:''; flex:none; width:3px; height:18px;
  background:var(--gold-deep);
  border-radius:99px;
}

/* Warn-Cards (Allergien, Medikamente) */
.er-warn-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
@media (max-width:560px) { .er-warn-grid { grid-template-columns:1fr; } }
.er-warn-card {
  background:#fbeae9;
  border:1px solid rgba(180,60,60,.35);
  border-radius:12px;
  padding:13px 16px;
  position:relative; overflow:hidden;
}
.er-warn-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:#d94f4f;
}
.er-warn-head {
  font-family:var(--serif); font-size:.95rem; font-weight:600;
  color:var(--rose-text); margin-bottom:5px;
}
.er-warn-body {
  color:var(--bark); font-size:.88rem; line-height:1.55;
}

/* Telefon-Action-Cards (Tap to call) */
.er-phone-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
@media (max-width:540px) { .er-phone-grid { grid-template-columns:1fr; } }
.er-phone-card {
  display:grid; grid-template-columns:auto 1fr auto;
  gap:14px; align-items:center;
  padding:14px 16px; border-radius:12px;
  text-decoration:none; color:var(--bark);
  background:var(--surface); border:1.5px solid var(--line);
  transition:all .15s;
  position:relative; overflow:hidden;
}
.er-phone-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform:translateX(-100%); transition:transform .5s;
}
.er-phone-card:hover::before { transform:translateX(100%); }
.er-phone-card:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 28px -10px rgba(62,55,42,.25);
}
.er-phone-card:active { transform:translateY(0); }
.er-phone-ico {
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-size:1.45rem;
  flex:none; box-shadow:0 4px 10px -2px rgba(0,0,0,.1);
}
.er-phone-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.er-phone-label {
  font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  font-weight:600; color:var(--bark-2); opacity:.85;
}
.er-phone-name {
  font-size:.95rem; color:var(--bark); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.er-phone-num {
  font-family:monospace; font-size:.85rem; color:var(--bark-2);
}
.er-phone-action {
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  font-size:1.1rem;
  background:var(--sage);
  color:#fff; flex:none;
  box-shadow:0 4px 10px -2px rgba(76,93,68,.4);
}

/* Phone-Card Varianten */
.er-phone-vet {
  background:#fff;
  border-color:rgba(140,109,42,.3);
}
.er-phone-vet .er-phone-ico {
  background:#fff;
  border:1px solid rgba(140,109,42,.3);
}
.er-phone-emergency {
  background:#fff7e8;
  border-color:rgba(220, 140, 40, .35);
}
.er-phone-emergency .er-phone-ico {
  background:#ffe7c8;
}
.er-phone-emergency .er-phone-action {
  background:#d94f4f;
  box-shadow:0 4px 10px -2px rgba(217,79,79,.5);
  animation:phoneShake 2.4s ease-in-out infinite;
}
@keyframes phoneShake {
  0%, 90%, 100% { transform:rotate(0); }
  92%, 96% { transform:rotate(-10deg); }
  94%, 98% { transform:rotate(10deg); }
}
.er-phone-owner .er-phone-ico {
  background:var(--gold-pale);
  color:#fff;
}
.er-phone-self {
  background:#f3f6ec;
  border-color:rgba(92,110,84,.3);
}
.er-phone-self .er-phone-ico {
  background:var(--sage);
  color:#fff;
}

/* GPS-Card */
.er-gps-card {
  display:grid; grid-template-columns:auto 1fr auto;
  gap:14px; align-items:center;
  padding:16px 20px; border-radius:12px;
  background:#eaf1f6;
  border:1px solid rgba(80, 140, 180, .3);
}
.er-gps-pin {
  font-size:2rem; line-height:1;
  animation:gpsBounce 2s ease-in-out infinite;
}
@keyframes gpsBounce {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}
.er-gps-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.er-gps-loading { color:#3a6a8a; font-style:italic; font-size:.9rem; }
.er-gps-coords {
  font-family:var(--serif); font-weight:600; font-size:1.1rem;
  color:var(--bark); text-decoration:none;
  border-bottom:1px dashed rgba(80,140,180,.5);
  display:inline-block;
}
.er-gps-coords:hover { border-bottom-style:solid; color:#244a64; }
.er-gps-acc { font-size:.74rem; color:#3a6a8a; }
.er-gps-err { color:var(--rose-text); font-size:.86rem; }
.er-gps-btn {
  width:38px; height:38px; border-radius:50%;
  background:rgba(80,140,180,.15); border:1px solid rgba(80,140,180,.3);
  font-size:1rem; cursor:pointer; transition:all .15s;
}
.er-gps-btn:hover { background:rgba(80,140,180,.3); transform:scale(1.08); }

.er-hint {
  text-align:center; font-size:.84rem; color:var(--bark-2);
  margin:8px 0 0; line-height:1.5;
  padding:10px 14px; background:rgba(120,130,110,.06); border-radius:10px;
}

/* Audit-Log Liste */
.audit-list {
  display:flex; flex-direction:column; gap:6px;
  max-height:600px; overflow-y:auto;
  border:1px solid var(--line-soft); border-radius:12px;
  padding:8px; background:var(--surface);
}
.audit-row {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px; align-items:center;
  padding:9px 12px;
  border-radius:8px;
  border:1px solid transparent;
  transition:background .15s;
}
.audit-row:hover { background:rgba(120,130,110,.05); }
.audit-icon { font-size:1.2rem; line-height:1; flex:none; }
.audit-body { display:flex; flex-direction:column; gap:1px; min-width:0; }
.audit-body strong { font-size:.86rem; color:var(--bark); }
.audit-body small { font-size:.74rem; color:var(--bark-2); line-height:1.4; }
.audit-meta { text-align:right; display:flex; flex-direction:column; gap:1px; }
.audit-meta span { font-size:.76rem; color:var(--bark-2); font-variant-numeric:tabular-nums; }
.audit-meta small { font-size:.68rem; color:var(--bark-2); opacity:.7; }
@media (max-width: 640px) {
  .bd-card { grid-template-columns:1fr; gap:8px; }
  .bd-actions { width:100%; }
  .bd-actions .btn { flex:1; }
}

/* Mahnwesen-Widget */
.dunning-widget {
  margin:0 0 14px;
  background:#fbeae9;
  border:1px solid rgba(180,60,60,.3);
  border-radius:var(--r-lg); padding:14px 18px;
  box-shadow:var(--hi), var(--sh-1);
}
.dn-head {
  font-family:var(--serif); font-size:1.05rem; font-weight:600;
  color:var(--rose-text); display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.dn-list { display:flex; flex-direction:column; gap:6px; }
.dn-card {
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
  background:var(--surface); border:1px solid rgba(180,60,60,.2);
  border-radius:10px; padding:10px 14px;
}
.dn-body strong { font-size:.92rem; color:var(--bark); display:block; }
.dn-body small { font-size:.78rem; color:var(--rose-text); }
.dn-actions { display:flex; gap:6px; flex-wrap:wrap; }
@media (max-width: 640px) {
  .dn-card { grid-template-columns:1fr; }
  .dn-actions { width:100%; }
  .dn-actions .btn { flex:1; }
}

/* Wetter-Widget (5-Tage-Forecast, open-meteo) */
.weather-widget {
  margin:0 0 14px;
  background:var(--sage-pale);
  border:1px solid var(--sage-line);
  border-radius:var(--r-lg);
  padding:14px 18px;
  box-shadow:var(--hi), var(--sh-1);
}
.wt-head {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:12px; flex-wrap:wrap; gap:8px;
}
.wt-title {
  font-family:var(--serif); font-size:1.05rem; font-weight:600;
  color:var(--bark);
}
.wt-sub { font-size:.74rem; }
.wt-grid {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:6px;
}
@media (max-width: 540px) {
  .wt-grid { grid-template-columns:repeat(4, 1fr); gap:4px; }
  .wt-day { padding:8px 3px 6px; }
}
.wt-day { min-width:0; }
.wt-day {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 6px 8px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:transform .15s;
}
.wt-day:hover { transform:translateY(-1px); }
.wt-day.heat {
  background:var(--amber-bg);
  border-color:var(--amber-line);
}
.wt-day.storm {
  background:var(--rose-bg);
  border-color:var(--rose-line);
}
.wt-day-label {
  font-size:.74rem; font-weight:600; color:var(--bark-2);
  text-transform:uppercase; letter-spacing:.04em;
}
.wt-day-icon { font-size:1.7rem; line-height:1; }
.wt-day-temps {
  font-family:var(--serif); display:flex; gap:5px; align-items:baseline;
  font-variant-numeric:tabular-nums;
}
.wt-day-temps strong { font-size:1.15rem; color:var(--bark); font-weight:600; }
.wt-day-temps small { font-size:.78rem; color:var(--bark-2); }
.wt-day-precip { font-size:.7rem; color:var(--sage-deep); font-weight:600; }

.wt-warnings {
  margin-top:10px; display:flex; flex-direction:column; gap:5px;
}
.wt-warning {
  padding:8px 12px; border-radius:9px; font-size:.84rem; line-height:1.5;
  font-weight:500;
}
.wt-warning-heat {
  background:var(--amber-bg); color:var(--amber-text);
  border:1px solid var(--amber-line);
}
.wt-warning-storm {
  background:var(--rose-bg); color:var(--rose-text);
  border:1px solid var(--rose-line);
}
.wt-warning-rain {
  background:var(--surface-2); color:var(--bark-2);
  border:1px solid var(--line);
}

/* Review-Reminder-Widget */
.review-widget {
  margin:0 0 14px;
  background:#f0f4eb;
  border:1px solid rgba(92,110,84,.3);
  border-radius:var(--r-lg);
  padding:14px 18px;
  box-shadow:var(--hi), var(--sh-1);
}
.rv-head {
  font-family:var(--serif); font-size:1.05rem; font-weight:600;
  color:var(--sage-deep); display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.rv-list { display:flex; flex-direction:column; gap:6px; }
.rv-card {
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px; align-items:center;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(92,110,84,.15);
  border-radius:10px;
  padding:10px 14px;
}
.rv-body strong { font-size:.92rem; color:var(--bark); display:block; }
.rv-body small { font-size:.78rem; color:var(--bark-2); }
.rv-actions { display:flex; gap:6px; flex-wrap:wrap; }
@media (max-width: 640px) {
  .rv-card { grid-template-columns:1fr; }
  .rv-actions { width:100%; }
}
.today-head-row {
  font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:8px; margin:var(--s2) 0 var(--s3);
}
.today-head-row .ico { color:var(--sage); }
.today-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.today-grid > * { min-width:0; }  /* ohne dies sprengt langer Text die Spalte */
@media (max-width:680px){ .today-grid { grid-template-columns:1fr; } }
.today-head { font-weight:600; font-size:.86rem; margin-bottom:9px; }
.today-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.today-list li {
  display:flex; align-items:center; gap:8px; padding:8px 11px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:.86rem; cursor:pointer; transition:transform .15s, box-shadow .15s;
  flex-wrap:wrap; min-width:0;
}
.today-list li:hover { transform:none; box-shadow:none; border-color:var(--sage); background:var(--hover-surface); }
.today-list .t-paw { line-height:0; color:var(--sage); display:inline-grid; }
.today-list .t-dog { font-weight:600; color:var(--gold-deep); min-width:0; overflow-wrap:anywhere; }
.today-list .t-cust { color:var(--bark-2); font-size:.8rem; min-width:0; overflow-wrap:anywhere; }
.today-list .t-time {
  /* Zeitfenster ist frei eingegebener Text (z. B. ganze Wochenpläne).
     Früher white-space:nowrap -> Zeile konnte nicht umbrechen und lief aus dem Raster. */
  margin-left:auto; font-size:.76rem; color:var(--bark-2);
  min-width:0; max-width:100%; text-align:right; overflow-wrap:anywhere;
}
.today-list .t-hb { font-size:.74rem; color:var(--gold-deep); background:var(--gold-pale); padding:1px 7px; border-radius:6px; min-width:0; overflow-wrap:anywhere; }
.today-empty { padding:14px; color:var(--muted); font-style:italic; text-align:center; }

/* ============================================================
   STATUS FILTER PILLS
   ============================================================ */
.status-filter { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.sf-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-line);
  font-family:inherit; font-weight:600; font-size:.78rem; color:var(--bark-2);
  cursor:pointer; transition:all .15s;
}
.sf-pill:hover { background:var(--surface); color:var(--bark); }
.sf-pill.active { background:var(--gold-deep); color:var(--on-accent); border-color:transparent; }
.sf-pill .sf-n { font-size:.7rem; opacity:.7; background:rgba(0,0,0,.08); padding:1px 7px; border-radius:8px; }
.sf-pill.active .sf-n { background:rgba(255,255,255,.18); }

#listCount { display:flex; align-items:center; gap:6px; }
.search-hint { cursor:help; opacity:.5; font-size:.85rem; }

/* ============================================================
   VACCINATION ALERT
   ============================================================ */
.vacc-alert {
  margin-top:6px; padding:5px 10px; border-radius:8px;
  font-size:.74rem; font-weight:600; border:1px solid; display:inline-block;
}
.vacc-alert.expired { background:rgba(178,85,85,.1); color:var(--rose); border-color:rgba(178,85,85,.3); }
.vacc-alert.soon    { background:var(--amber-pale); color:var(--amber); border-color:rgba(184,137,62,.3); }
.vacc-alert.check   { background:var(--gold-pale); color:var(--gold-deep); border-color:rgba(92,110,84,.3); }

/* ============================================================
   WALK REPORTS
   ============================================================ */
.walk-list { display:flex; flex-direction:column; gap:14px; }
.walk-card {
  background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--hi), var(--sh-1);
}
.walk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.walk-head strong { font-size:1.05rem; display:block; }
.walk-head small { color:var(--bark-2); font-size:.78rem; }
.walk-mood { font-size:1.4rem; }
.walk-note { font-size:.92rem; line-height:1.55; margin:0 0 12px; color:var(--bark); }
.walk-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-bottom:12px; }
.walk-photos img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; }
.walk-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.78rem; }
.tag-pill { background:var(--sage-pale); color:var(--sage-deep); border:1px solid var(--sage-line); padding:2px 9px; border-radius:999px; font-weight:600; font-size:.72rem; }
.tag-pill.warn { background:var(--amber-bg); color:var(--amber-text); border-color:rgba(184,137,62,.35); }

/* Walk-Report Modal */
.mood-row { display:flex; gap:6px; flex-wrap:wrap; }
.mood-pill { padding:7px 12px; border-radius:999px; border:1px solid var(--line-soft); cursor:pointer; font-size:.85rem; background:var(--glass); }
/* display:none ersetzt — siehe „Visuell versteckt, aber bedienbar" am Dateiende */
.mood-pill:has(input:checked) { background:var(--gold-deep); color:var(--on-accent); border-color:transparent; }
.walk-prev { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; margin-top:10px; }
.walk-prev-img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; }

/* ============================================================
   MESSAGES TAB
   ============================================================ */
.msg-list { display:flex; flex-direction:column; gap:8px; }
.msg-card {
  background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-md);
  box-shadow:var(--hi); overflow:hidden;
}
.msg-card summary {
  display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; list-style:none;
}
.msg-card summary::-webkit-details-marker { display:none; }
.msg-ico { width:36px; height:36px; border-radius:12px; background:var(--surface); display:grid; place-items:center; font-size:1rem; flex:none; box-shadow:var(--hi); }
.msg-meta { flex:1; min-width:0; }
.msg-meta strong { font-size:.94rem; display:block; }
.msg-meta small { font-size:.76rem; }
.msg-chev { color:var(--muted); transition:transform .2s; }
.msg-card[open] .msg-chev { transform:rotate(90deg); }
.msg-body { padding:0 16px 16px; color:var(--bark); font-size:.92rem; line-height:1.6; white-space:pre-wrap; }
/* Verlauf-Varianten: outgoing (default), incoming (Antwort/Eingang), auto (Cron-Mails) */
.msg-card.msg-incoming .msg-ico { background:#f0f4eb; }
.msg-card.msg-incoming { border-left:3px solid #5C6E54; }
.msg-card.msg-auto .msg-ico { background:#fbf5e3; }
.msg-card.msg-auto { border-left:3px solid var(--gold-deep); }
.msg-cat {
  display:inline-block; font-weight:600; color:var(--gold-deep);
  text-transform:uppercase; letter-spacing:.04em; font-size:.7rem;
}
.msg-tag {
  display:inline-block; margin-left:6px;
  padding:1px 7px; border-radius:99px;
  font-size:.62rem; font-weight:600;
  vertical-align:middle;
}
.msg-tag.auto { background:rgba(140,109,42,.15); color:var(--gold-deep); }
.msg-tag.in { background:rgba(92,110,84,.15); color:var(--green-text); }

/* ============================================================
   WOCHENKALENDER
   ============================================================ */
.alt-view { padding:14px 8px 24px; }
.cal-head { padding:6px 8px 18px; }
.cal-head h1, .cal-head h2 { font-size:clamp(2rem,4vw,2.8rem); line-height:1; font-weight:600; }
.cal-head .sub { color:var(--bark-2); margin:8px 0 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
@media (max-width:1240px){ .cal-grid { grid-template-columns:repeat(4,1fr); gap:10px; } }
@media (max-width:980px){ .cal-grid { grid-template-columns:repeat(2,1fr); gap:10px; } }
@media (max-width:560px){ .cal-grid { grid-template-columns:1fr; } }
.cal-day {
  background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-lg);
  padding:14px 14px 16px; min-height:200px;
  box-shadow:var(--hi);
}
.cal-day.today { border-color:var(--gold-deep); box-shadow:var(--hi), 0 0 0 1.5px var(--gold-deep), var(--sh-1); }
.cal-day-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; padding-bottom:10px; border-bottom:1px solid var(--line-soft); margin-bottom:10px; }
.cal-day-head strong { font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--bark); }
.cal-date { font-size:.78rem; color:var(--bark-2); }
.cal-count { margin-left:auto; font-size:.7rem; font-weight:600; background:var(--gold-pale); color:var(--gold-deep); padding:2px 8px; border-radius:999px; }
.cal-day-list { display:flex; flex-direction:column; gap:7px; }
.cal-card {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:8px 11px; cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.cal-card:hover { transform:translateY(-1px); box-shadow:var(--sh-1); border-color:var(--gold); }
.cal-card-dog { font-weight:600; font-size:.86rem; color:var(--gold-deep); }
.cal-card-cust { font-size:.78rem; color:var(--bark); margin-top:2px; }
.cal-card-meta { font-size:.7rem; color:var(--bark-2); margin-top:2px; }
.cal-empty { color:var(--muted); font-style:italic; font-size:.86rem; padding:6px 4px; }
.cal-hint { margin-top:20px; padding:0 8px; }

/* ============================================================
   RECHNUNGEN
   ============================================================ */
.inv-list { display:flex; flex-direction:column; gap:8px; padding:0 4px; }
.inv-row {
  display:grid; grid-template-columns:2fr auto auto 1fr; gap:14px; align-items:center;
  padding:13px 18px; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-md);
  box-shadow:var(--hi);
}
@media (max-width:780px){ .inv-row { grid-template-columns:1fr; gap:8px; } }
.inv-row.paid { background:var(--gold-pale); }
.inv-row.sent { border-color:rgba(184,137,62,.4); }
/* Feste Hellwerte ersetzt: der geerbte Text --bark ist im dunklen Theme fast
   weiß und lag damit auf diesen hellen Flächen bei 1,04–1,16:1 — praktisch
   unsichtbar. --amber-bg/--rose-bg samt zugehöriger Textfarbe kippen korrekt. */
.inv-row.is-cancel { background:var(--amber-bg); border-color:var(--amber); color:var(--amber-text); }
.inv-row.is-cancel .inv-amount.neg { color:#A0612B; }
.inv-cust strong { font-size:.96rem; display:block; }
.inv-cust small { font-size:.78rem; }
.inv-tag {
  display:inline-block; margin-left:8px; padding:1px 8px; border-radius:6px;
  font-size:.66rem; font-weight:600; letter-spacing:.04em;
  background:var(--gold-pale); color:var(--gold-deep); border:1px solid rgba(92,110,84,.22);
}
.inv-tag-storno {
  background:#FFE7B8; color:#8A6A3B; border-color:#D9B57F;
}
.inv-amount { font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--gold-deep); }
.inv-amount.neg { color:#A0612B; }

/* Storno-Rechnung – Markierung auf der PDF/HTML-Ansicht */
.inv-cancel-badge {
  display:inline-block; padding:6px 14px; margin:0 0 12px;
  background:#FFE7B8;
  color:#7A5424; border:1.5px solid #D9B57F; border-radius:8px;
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.inv-items.is-cancel .c-sum { color:#A0612B; }
.inv-status { font-size:.82rem; color:var(--bark-2); }
.inv-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

/* ============================================================
   TERMIN-COMPOSER (Neuer/Bearbeiten-Modal)
   ============================================================ */
.appt-composer {
  display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start;
}
@media (max-width:880px) { .appt-composer { grid-template-columns:1fr; } }

.appt-edit { display:flex; flex-direction:column; gap:24px; }
.appt-edit .settings-group { gap:10px; }
.appt-edit .settings-form { padding:0; }

/* Termin-Typ als Card-Grid */
.appt-type-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
@media (max-width:560px) { .appt-type-grid { grid-template-columns:repeat(2,1fr); } }
.appt-type-card {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:13px 10px 11px; cursor:pointer; text-align:center;
  transition:all .15s; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.appt-type-card:hover { border-color:var(--gold); transform:translateY(-1px); }
.appt-type-card.sel {
  background:var(--surface);
  border-color:var(--gold-deep);
  box-shadow:var(--hi), 0 0 0 2.5px var(--gold-deep), 0 8px 16px -10px rgba(76,93,68,.5);
}
.appt-type-card input { position:absolute; opacity:0; pointer-events:none; }
.appt-type-icon { font-size:1.4rem; line-height:1; }
.appt-type-label { font-size:.82rem; font-weight:600; color:var(--bark); line-height:1.2; }
.appt-type-card.sel .appt-type-label { color:var(--gold-deep); }

/* Preview-Pane rechts — weißer Karten-Look */
.appt-preview-pane {
  position:sticky; top:14px;
  background:var(--surface);
  border:1px solid var(--line-soft); border-radius:14px;
  padding:18px; box-shadow:0 4px 14px -8px rgba(62,55,42,.08);
  display:flex; flex-direction:column; gap:14px;
}
.appt-preview-label {
  font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); display:flex; align-items:center; gap:6px;
}
.appt-preview-label::before {
  content:""; width:14px; height:1.5px; background:var(--gold-deep); border-radius:1px;
}

/* Hero-Card im Composer */
.appt-hero-card {
  background:var(--gold-deep);
  color:var(--on-accent); border-radius:12px; padding:20px 16px; text-align:center;
  box-shadow:0 12px 26px -14px rgba(76,93,68,.6);
  min-height:200px; display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.appt-hero-card .appt-hero-eyebrow {
  font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  opacity:.92; margin-bottom:6px;
}
.appt-hero-card .appt-hero-wd { font-family:var(--serif); font-size:.95rem; opacity:.92; margin-top:4px; }
.appt-hero-card .appt-hero-date {
  font-family:var(--serif); font-size:2.1rem; line-height:1.05; font-weight:600; margin:2px 0;
}
.appt-hero-card .appt-hero-year { font-family:var(--serif); font-size:.95rem; opacity:.92; }
.appt-hero-card .appt-hero-time {
  margin-top:10px; display:inline-block; padding:6px 16px; align-self:center;
  background:rgba(255,253,247,.18); border:1px solid rgba(255,253,247,.32);
  border-radius:999px; font-size:.86rem; font-weight:600; letter-spacing:.04em;
}
.appt-hero-card .appt-hero-duration {
  margin-top:6px; font-size:.74rem; opacity:.85; letter-spacing:.05em;
  display:flex; align-items:center; gap:6px; justify-content:center; flex-wrap:wrap;
}
.appt-hero-card .appt-hero-duration .dot { width:3px; height:3px; background:rgba(255,253,247,.6); border-radius:50%; }
.appt-hero-placeholder {
  font-style:italic; opacity:.7; font-family:var(--serif); font-size:1rem;
}

/* Mail-Frame mit Logo-Header */
.appt-mail-frame {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  font-size:.86rem; overflow:hidden;
}
.appt-mail-brand-bar {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--gold-deep);
  color:var(--on-accent);
}
.appt-mail-logo {
  width:32px; height:32px; border-radius:50%; flex:none;
  background:var(--surface); padding:3px; box-shadow:0 2px 6px -2px rgba(0,0,0,.2);
}
.appt-mail-logo img { width:100%; height:100%; object-fit:contain; display:block; border-radius:50%; }
.appt-mail-brand-text { line-height:1.1; }
.appt-mail-brand-text strong { font-family:var(--serif); font-size:.96rem; font-weight:600; display:block; }
.appt-mail-brand-text small { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; opacity:.82; }

.appt-mail-head { padding:12px 16px 10px; border-bottom:1px solid var(--line-soft); }
.appt-mail-tag {
  display:inline-block; padding:2px 10px; background:var(--gold-pale); color:var(--gold-deep);
  border:1px solid rgba(92,110,84,.22); border-radius:999px;
  font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.appt-mail-subject {
  font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--bark); margin-top:7px;
}
.appt-mail-recipient { font-size:.74rem; color:var(--bark-2); margin-top:3px; }
.appt-mail-body {
  font-size:.84rem; line-height:1.6; color:var(--bark);
  white-space:pre-wrap; max-height:240px; overflow-y:auto; padding:12px 16px;
}

/* Editor-Bereich: noch sauberer mit weißen Karten */
.appt-edit > .settings-group {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:18px 20px; box-shadow:0 2px 8px -4px rgba(62,55,42,.06);
}
.appt-edit > .settings-toggle {
  background:var(--surface);
}

/* ============================================================
   TERMINE / APPOINTMENTS
   ============================================================ */
.appt-list { display:flex; flex-direction:column; gap:12px; }
.appt-card {
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:flex-start;
  background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-lg);
  padding:14px 18px; box-shadow:var(--hi), var(--sh-1);
  position:relative; overflow:hidden;
}
.appt-card::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--gold-deep);
}
.appt-card.past::before { background:var(--muted); }
.appt-card.cancelled::before { background:var(--rose); }
.appt-card.cancelled { opacity:.65; }
@media (max-width:680px) {
  .appt-card { grid-template-columns:1fr; gap:10px; }
}

.appt-when { display:flex; gap:10px; align-items:center; min-width:90px; }
.appt-icon {
  width:44px; height:44px; border-radius:12px; flex:none;
  background:var(--surface);
  border:1px solid var(--glass-line); display:grid; place-items:center;
  font-size:1.25rem; box-shadow:var(--hi);
}
.appt-date { line-height:1.1; }
.appt-day  { font-family:var(--serif); font-size:1.25rem; font-weight:600; color:var(--bark); }
.appt-time { font-size:.78rem; color:var(--bark-2); margin-top:2px; font-weight:600; }
.appt-body strong { font-size:.96rem; display:block; }
.appt-body small  { font-size:.78rem; color:var(--bark-2); display:block; margin-top:2px; }
.appt-notes { margin:8px 0 0; font-size:.86rem; color:var(--bark); line-height:1.5; }
.appt-status { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.appt-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-self:center; }
@media (max-width:680px) {
  .appt-actions { justify-content:flex-start; }
}

/* Termin-Marker im Wochenkalender */
.cal-card.appt {
  background:var(--surface);
  border-color:rgba(184,137,62,.32);
}
.cal-card.appt .cal-card-dog { color:var(--amber); display:flex; align-items:center; gap:6px; }
.cal-card.appt .cal-time     { font-family:var(--serif); font-size:1rem; }

/* Today-Widget – Termine sind golden statt sage */
.today-list li.is-appt { border-left:3px solid var(--amber); background:#FFFCF5; }
.today-list li.is-appt .t-dog { color:var(--amber); }

/* (g31) Pfötchen-Hintergrund entfernt — ruhige, flache Fläche */

/* ============================================================
   SETTINGS-VIEW · neue Multi-Tab-Optik
   ============================================================ */
.settings-shell {
  max-width:1100px; margin:0 auto; padding:8px 4px 24px;
}
.settings-header {
  padding:4px 0 20px;
}
.settings-h1 {
  font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.1rem); font-weight:500; color:var(--bark);
  margin:0 0 6px; line-height:1.1;
}
.settings-lead {
  color:var(--bark-2); font-size:.92rem; margin:0; max-width:70ch;
}

.settings-layout {
  display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start;
}
@media (max-width:880px) {
  .settings-layout { grid-template-columns:1fr; gap:14px; }
}

/* === Side-Nav === */
.settings-nav {
  position:sticky; top:calc(var(--topbar-h) + 12px);
  display:flex; flex-direction:column; gap:4px;
  background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-lg);
  padding:8px; box-shadow:var(--hi), var(--sh-1);
}
@media (max-width:880px) {
  .settings-nav {
    position:static; flex-direction:row; overflow-x:auto; padding:8px;
    scrollbar-width:none;
  }
  .settings-nav::-webkit-scrollbar { display:none; }
}
.settings-nav-item {
  display:flex; align-items:center; gap:11px;
  background:transparent; border:0; cursor:pointer;
  padding:11px 14px; border-radius:12px;
  font-family:inherit; font-size:.92rem; font-weight:600;
  color:var(--bark-2); text-align:left;
  transition:background .2s, color .2s, transform .15s;
  white-space:nowrap;
}
.settings-nav-item:hover { background:var(--hover-surface); color:var(--bark); }
.settings-nav-item.active {
  background:var(--sage-pale); color:var(--sage-deep);
  box-shadow:none;
}
.settings-nav-ico {
  width:22px; height:22px; flex:none; display:grid; place-items:center;
}
.settings-nav-ico svg { width:20px; height:20px; }
.settings-nav-label { line-height:1; }

/* === Content === */
.settings-content {
  background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-xl);
  padding:clamp(20px,3vw,32px); box-shadow:var(--hi), var(--sh-2);
}
.settings-section-head {
  padding:0 0 18px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:24px;
}
.settings-h2 {
  font-family:var(--serif); font-size:1.6rem; font-weight:600; color:var(--bark);
  margin:0 0 6px; line-height:1.1;
}
.settings-section-desc {
  color:var(--bark-2); font-size:.94rem; margin:0; max-width:62ch; line-height:1.55;
}

.settings-form { display:flex; flex-direction:column; gap:28px; }
.settings-group {
  display:flex; flex-direction:column; gap:14px;
}
.settings-group-title {
  font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); margin:0;
  display:flex; align-items:center; gap:8px;
}
.settings-group-title::before {
  content:""; width:18px; height:1.5px; background:var(--gold-deep); border-radius:1px;
}

/* Form grids */
.form-grid-3 { grid-template-columns:repeat(3,1fr); }
.form-grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:760px){ .form-grid-3, .form-grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .form-grid-3, .form-grid-4 { grid-template-columns:1fr; } }

.settings-input {
  width:100%; padding:11px 14px;
  background:var(--surface);
  border:1px solid var(--line-soft); border-radius:10px;
  font-family:inherit; font-size:.95rem; color:var(--bark);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.settings-input:focus {
  outline:none; border-color:var(--gold-deep);
  box-shadow:0 0 0 4px rgba(126,144,121,.15);
}
.fld-label {
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bark); margin-bottom:6px;
}

/* Input + Suffix */
.input-with-suffix {
  position:relative;
}
.input-with-suffix .settings-input { padding-right:54px; }
.input-suffix {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:.78rem; font-weight:600; color:var(--bark-2); pointer-events:none;
  letter-spacing:.02em;
}

/* Toggle-Block */
.settings-toggle {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 18px;
}
.settings-toggle .check { padding:0; align-items:flex-start; }
.settings-toggle .check strong { display:block; font-weight:600; font-size:.94rem; color:var(--bark); }
.settings-toggle .check small  { display:block; color:var(--bark-2); font-size:.82rem; line-height:1.5; margin-top:3px; }
.settings-toggle .check input[type=checkbox] { margin-top:3px; }

/* Help-Text */
.settings-help {
  font-size:.82rem; color:var(--bark-2); margin:6px 0 0; line-height:1.5;
}
.settings-help code {
  background:rgba(120,130,110,.12); padding:1px 6px; border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem;
  color:var(--gold-deep);
}

/* Walk-Zeitfenster */
.time-windows-list {
  display:flex; flex-direction:column; gap:12px;
}
.time-window-row {
  display:grid; grid-template-columns:1fr 1.5fr auto auto; gap:12px; align-items:flex-end;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 16px;
}
@media (max-width:780px) {
  .time-window-row { grid-template-columns:1fr 1fr; }
  .time-window-row .settings-radio { grid-column:1/-1; justify-content:flex-start; }
}
.time-window-row .fld { display:block; }

.settings-radio {
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px;
  background:var(--gold-pale); border:1px solid rgba(92,110,84,.22); border-radius:999px;
  cursor:pointer; font-size:.82rem; font-weight:600; color:var(--gold-deep);
  user-select:none;
}
.settings-radio:has(input:checked) {
  background:var(--gold-deep); color:var(--on-accent); border-color:transparent;
}
/* display:none ersetzt — siehe „Visuell versteckt, aber bedienbar" am Dateiende */

/* Actions-Bar */
.settings-actions {
  display:flex; justify-content:flex-end; gap:10px; margin-top:24px;
  padding-top:20px; border-top:1px solid var(--line-soft);
}

/* btn-icon */
.btn-icon {
  width:44px; height:44px; border-radius:10px; border:1px solid var(--line-soft);
  background:var(--surface); color:var(--rose);
  display:grid; place-items:center; cursor:pointer; font-family:inherit;
  transition:background .15s, transform .15s;
}
.btn-icon:hover { background:rgba(178,85,85,.08); transform:translateY(-1px); }
.btn-icon svg { width:16px; height:16px; }

/* ============================================================
   INVOICE DETAIL
   ============================================================ */
.invoice-detail { display:flex; flex-direction:column; gap:14px; }
.invoice-meta {
  display:flex; gap:18px; flex-wrap:wrap; padding:12px 16px;
  background:var(--gold-pale); border:1px solid rgba(92,110,84,.3); border-radius:12px;
  font-size:.88rem;
}
.invoice-meta strong { color:var(--bark-2); font-weight:600; }
.invoice-preview {
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:6px; max-height:60vh; overflow:auto;
  -webkit-overflow-scrolling:touch;
}
/* Mobile: A4-Padding (18mm/22mm) skaliert zu eng. Komplett überschreiben
   und Inhalt rauflisten lassen — die "Papier"-Anmutung opfern wir für
   Lesbarkeit auf 320-412px. Bei Druck/PDF greift die @print-Regel weiter
   und das richtige A4-Layout kommt zurück. */
@media (max-width: 720px) {
  .invoice-preview {
    padding: 4px;
    max-height: none;       /* sonst doppelt verschachteltes Scroll */
    background: var(--cream);
    border: 0;
  }
  .invoice-doc .doc-page.invoice-page {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 14px 18px !important;
    box-shadow: var(--shadow-sm);
    font-size: .88rem;
    min-height: auto !important;
  }
  /* Header-Block (Logo + Rechnungs-Meta) untereinander stapeln */
  .invoice-doc .doc-head,
  .invoice-doc .inv-head,
  .invoice-doc .inv-billto,
  .invoice-doc .inv-period {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .invoice-doc .doc-logo,
  .invoice-doc .inv-logo { max-width: 80px !important; }
  /* Tabellen-Spalten: schmaler + word-wrap erlauben */
  .invoice-doc table { font-size: .82rem !important; }
  .invoice-doc th, .invoice-doc td {
    padding: 6px 4px !important;
    word-break: break-word;
  }
  /* Footer-Zeile (Bank/Steuer): rechts ausgerichteter Text → linksbündig */
  .invoice-doc .inv-footer,
  .invoice-doc .inv-totals {
    text-align: left !important;
    align-items: stretch !important;
  }
  /* Pfötchen-Wasserzeichen klein halten, sonst nimmt es viel mobile Höhe */
  .invoice-doc .inv-paw-bg,
  .invoice-doc .paw-watermark { display: none; }
}
.inv-total-edit { padding:14px 18px; background:var(--gold-pale); border-radius:12px; }

/* ============================================================
   INVOICE — Brand-Style mit Logo, Pfötchen-Wasserzeichen, Manrope + Cormorant
   ============================================================ */
.invoice-doc .doc-page.invoice-page {
  position:relative;
  width:100%; max-width:780px; margin:0 auto;
  padding:18mm 20mm 18mm 22mm;
  background:#FFFFFF;
  background-image:
    radial-gradient(circle at 95% 5%, rgba(126,144,121,.06), transparent 200px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='rgba(92,110,84,.035)' transform='rotate(-12 90 90)'><ellipse cx='90' cy='105' rx='24' ry='19'/><ellipse cx='58' cy='68' rx='10' ry='14' transform='rotate(-18 58 68)'/><ellipse cx='78' cy='48' rx='9' ry='13'/><ellipse cx='102' cy='48' rx='9' ry='13'/><ellipse cx='122' cy='68' rx='10' ry='14' transform='rotate(18 122 68)'/></g></svg>");
  background-repeat:no-repeat, repeat;
  background-size:auto, 200px 200px;
  font-family:"Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size:10.5pt; line-height:1.55; color:#3E372A;
  letter-spacing:.005em;
}

/* ============== Header (Logo + Brand-Block + Meta) ============== */
.inv-head {
  display:flex; justify-content:space-between; align-items:flex-start; gap:20mm;
  padding-bottom:6mm; border-bottom:.6pt solid #CFD6C4;
  margin-bottom:10mm;
}
.inv-brand { display:flex; align-items:center; gap:10mm; }
.inv-logo {
  width:22mm; height:22mm; object-fit:contain;
  background:#FFFFFF; border-radius:50%; border:.5pt solid #CFD6C4;
  padding:2mm; box-shadow:0 4px 14px -8px rgba(62,55,42,.18);
}
.inv-brand-text { line-height:1.15; }
.inv-brand-name {
  font-family:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:22pt; font-weight:600; color:#2b2419; letter-spacing:.005em;
}
.inv-brand-sub {
  font-family:"Manrope", sans-serif;
  font-size:8pt; letter-spacing:.18em; text-transform:uppercase; color:var(--sage-deep);
  margin-top:1.5mm; font-weight:600;
}
.inv-head-meta {
  text-align:right; font-size:8.5pt; line-height:1.6; color:#6B6655;
}
.inv-head-line { white-space:nowrap; }

/* ============== Adressfeld + Info-Block ============== */
.inv-address-row {
  display:grid; grid-template-columns:1.4fr 1fr; gap:14mm;
  margin-bottom:14mm; align-items:start;
}
.inv-address-block {}
.inv-sender-mini {
  font-size:7pt; color:var(--sage-deep); border-bottom:.3pt solid #CFD6C4;
  padding-bottom:1mm; margin-bottom:4mm; letter-spacing:.02em;
}
.inv-address {
  font-size:11pt; line-height:1.5;
}
.inv-address strong { font-weight:600; color:#2b2419; }

.inv-info {
  background:#F6F4EA; border:.5pt solid #CFD6C4; border-radius:3mm;
  padding:5mm 6mm; font-size:9pt; line-height:1.7;
}
.inv-info-row {
  display:flex; justify-content:space-between; gap:4mm; align-items:baseline;
}
.inv-info-l {
  color:#6B6655; font-size:7.5pt; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.inv-info-v { color:#2b2419; font-weight:600; }

/* ============== Subject + Body ============== */
.inv-subject {
  font-family:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16pt; font-weight:600; color:#2b2419;
  margin:0 0 6mm; line-height:1.25;
}
.inv-greeting { margin:0 0 4mm; font-size:10.5pt; }
.inv-body     { margin:0 0 8mm; font-size:10.5pt; }

/* ============== Positionen-Tabelle ============== */
.inv-items {
  width:100%; border-collapse:collapse; margin:0 0 6mm;
  font-family:"Manrope", sans-serif; font-size:10pt;
}
.inv-items thead th {
  text-align:left;
  font-size:8pt; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sage-deep); border-bottom:.8pt solid #5C6E54;
  padding:2.5mm 2mm;
}
.inv-items tbody td {
  padding:3mm 2mm; border-bottom:.3pt solid #E4E6D8; vertical-align:top;
}
.inv-items .c-pos  { width:11mm; color:#6B6655; font-weight:600; }
.inv-items .c-qty  { width:18mm; text-align:right; color:#3E372A; }
.inv-items .c-sum  { width:28mm; text-align:right; font-weight:600; white-space:nowrap; }
.inv-items .c-desc small { display:block; color:#6B6655; font-size:8.5pt; margin-top:1mm; }

.inv-items .inv-total-row td {
  border-top:1.2pt solid #5C6E54; border-bottom:0;
  font-family:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14pt; font-weight:600; color:#2b2419;
  padding-top:4mm;
}
.inv-items .inv-total-row .c-sum { color:var(--sage-deep); }

.inv-note {
  margin:4mm 0 6mm; padding:3mm 6mm;
  background:#EBF0E7; border-left:3pt solid #5C6E54; border-radius:0 2mm 2mm 0;
  font-size:9pt; color:#3E372A;
}

/* ============== Zahlungsbereich (Text + QR) ============== */
.inv-payment-row {
  display:grid; grid-template-columns:1fr auto; gap:14mm; align-items:start;
  margin:8mm 0 8mm;
  padding:6mm; background:#F6F4EA; border:.5pt solid #CFD6C4; border-radius:3mm;
}
@media (max-width:560px) { .inv-payment-row { grid-template-columns:1fr; } }
.inv-payment-text {}
.inv-payment-head {
  font-family:"Manrope", sans-serif;
  font-size:7.5pt; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sage-deep); margin-bottom:3mm;
}
.inv-payment-text p { margin:0 0 4mm; font-size:10pt; }
.inv-bank {
  display:grid; grid-template-columns:auto 1fr; gap:1.5mm 6mm;
  font-size:9pt; margin:0;
}
.inv-bank dt {
  color:#6B6655; font-size:7.5pt; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding-top:.5mm;
}
.inv-bank dd { margin:0; color:#2b2419; font-weight:500; }
.inv-bank dd.iban { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9.5pt; }

.inv-qr {
  text-align:center; padding-left:6mm; border-left:.5pt dashed #CFD6C4;
}
.inv-qr-svg {
  width:30mm; height:30mm; background:#FFF; padding:1.5mm; border-radius:2mm;
  display:inline-block; border:.5pt solid #E4E6D8;
}
.inv-qr-svg svg { display:block; width:100%; height:100%; }
.inv-qr-label {
  font-size:7.5pt; font-weight:600; color:var(--sage-deep);
  letter-spacing:.04em; text-transform:uppercase; margin-top:2mm;
}
.inv-qr-sub { font-size:7pt; color:#6B6655; margin-top:.5mm; }

/* ============== Closing + Signature ============== */
.inv-closing { margin:8mm 0 2mm; font-size:10pt; }
.inv-signature {
  font-family:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14pt; font-weight:600;
  color:var(--sage-deep); margin:6mm 0 0; line-height:1.3;
}
.inv-signature-sub {
  display:block; font-family:"Manrope", sans-serif; font-size:8.5pt; color:#6B6655;
  font-weight:400; margin-top:1mm; letter-spacing:.02em;
}

/* ============== Footer ============== */
.inv-foot {
  margin-top:12mm; padding-top:4mm; border-top:.5pt solid #CFD6C4;
  display:grid; grid-template-columns:repeat(3,1fr); gap:6mm;
  font-size:7.5pt; line-height:1.7; color:#6B6655;
}
.inv-foot strong { color:#2b2419; font-weight:600; }
.inv-foot em { font-style:italic; color:var(--sage-deep); }

/* ============== Wasserzeichen (dezentes Pfötchen unten rechts) ============== */
.inv-watermark {
  position:absolute; right:18mm; bottom:32mm;
  width:32mm; height:32mm; fill:rgba(92,110,84,.04);
  pointer-events:none;
}

@media print {
  .invoice-doc .doc-page.invoice-page {
    width:210mm; max-width:none; min-height:297mm;
    margin:0; padding:18mm 20mm 18mm 22mm;
    box-shadow:none;
  }
  @page { size:A4; margin:0; }
}

/* ============================================================
   PORTAL-LOGIN & PORTAL-VIEW (Customer Self-Service)
   ============================================================ */
.portal-login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; }
.login-bg { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:-1; }
.bg-blob {
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.4;
}
.bg-blob.b1 { top:-10%; left:-10%; width:50vw; height:50vw; background:radial-gradient(circle, var(--gold) 0%, transparent 70%); }
.bg-blob.b2 { bottom:-15%; right:-10%; width:55vw; height:55vw; background:radial-gradient(circle, var(--amber) 0%, transparent 70%); opacity:.25; }

.login-shell {
  display:flex; flex-direction:column; align-items:center; gap:24px; max-width:440px; width:100%;
}
.login-brand {
  display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
  padding:8px 18px; background:var(--glass); border:1px solid var(--glass-line); border-radius:999px;
  box-shadow:var(--hi);
}
.login-brand img { width:42px; height:42px; border-radius:50%; background:var(--surface); padding:4px; }
.login-brand-name { font-family:var(--serif); font-size:1.15rem; font-weight:600; line-height:1; }
.login-brand-sub { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bark-2); margin-top:3px; }

.login-card {
  background:var(--paper); border:1px solid var(--glass-line); border-radius:var(--r-xl);
  padding:32px 30px; width:100%; box-shadow:var(--sh-pop);
}
.login-card-head { text-align:center; margin-bottom:22px; }
.login-card-head h1 {
  font-family:var(--serif); font-size:1.8rem; font-weight:600; color:var(--bark);
  margin:0 0 6px; line-height:1.1;
}
.login-card-head p { color:var(--bark-2); margin:0; font-size:.94rem; }

.login-form { display:flex; flex-direction:column; gap:14px; }
.login-submit { padding:14px 22px; font-size:1rem; justify-content:center; }
.login-foot { margin-top:18px; padding-top:18px; border-top:1px solid var(--line-soft); font-size:.84rem; color:var(--bark-2); line-height:1.6; }
.login-foot p { margin:0 0 5px; }
.login-foot .muted { font-size:.82rem; }

.login-help { font-size:.82rem; color:var(--bark-2); text-align:center; line-height:1.6; padding:0 20px; }
.login-help a { color:var(--gold-deep); }

.login-alert { padding:13px 17px; border-radius:10px; margin-bottom:14px; font-size:.9rem; }
.login-alert.err { background:rgba(178,85,85,.08); color:var(--rose); border:1px solid rgba(178,85,85,.2); }
.login-alert.ok  { background:var(--gold-pale); color:var(--gold-deep); border:1px solid rgba(92,110,84,.3); }

/* Portal-Hülle */
.portal-content { padding:14px 8px 90px; max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }

.portal-hero {
  background:var(--surface);
  border:1px solid var(--glass-line); border-radius:var(--r-xl);
  padding:24px 28px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  box-shadow:var(--hi), var(--sh-2);
}
.portal-hero-text h1 {
  font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:600;
  line-height:1.05; margin:6px 0 6px;
}
.portal-hero-text p { color:var(--bark-2); margin:0; }
.portal-hero-dog { width:90px; height:90px; border-radius:50%; object-fit:cover; box-shadow:var(--hi), 0 8px 20px -10px rgba(76,93,68,.4); background:var(--surface); padding:4px; }

.portal-next-walk { display:flex; align-items:center; gap:18px; padding:12px 0; }
.portal-next-walk-day {
  width:64px; height:64px; border-radius:12px; flex:none;
  background:var(--gold-deep); color:var(--on-accent);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.portal-next-walk-day .big { font-family:var(--serif); font-size:1.7rem; font-weight:600; line-height:1; }
.portal-next-walk-day .sub { font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; opacity:.85; margin-top:2px; }

.portal-walk-row {
  display:flex; gap:14px; align-items:center; padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.portal-walk-row:last-child { border-bottom:0; }
.portal-walk-row .walk-day {
  width:54px; text-align:center; flex:none;
}
.portal-walk-row .walk-day .num { font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--gold-deep); line-height:1; }
.portal-walk-row .walk-day .mon { font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bark-2); }
.portal-walk-row .walk-info strong { display:block; font-size:.96rem; }
.portal-walk-row .walk-info small  { display:block; font-size:.8rem; color:var(--bark-2); margin-top:2px; }

.portal-report {
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.portal-report:last-child { border-bottom:0; }
.portal-report-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.portal-report p { margin:8px 0; font-size:.92rem; line-height:1.55; }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:8px; margin-top:10px; }
.photo-grid img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; }

.portal-invoice {
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line-soft);
}
.portal-invoice:last-child { border-bottom:0; }
.portal-invoice strong { font-size:.96rem; display:block; }
.portal-invoice small { font-size:.78rem; color:var(--bark-2); display:block; margin-top:2px; }
.portal-invoice-amount { font-family:var(--serif); font-size:1.25rem; font-weight:600; color:var(--gold-deep); }
.portal-invoice-status { font-size:.78rem; font-weight:600; color:var(--bark-2); }
.portal-invoice.paid .portal-invoice-status { color:var(--gold-deep); }
.portal-invoice.paid { background:var(--gold-pale); border-radius:10px; padding:12px 14px; border-bottom:0; }

/* ============================================================
   BUCHHALTUNG · CSV-Export für den Steuerberater
   ============================================================ */
.bh-section {
  margin:24px 0 0;
  background:var(--surface);
  border:1px solid var(--glass-line); border-radius:var(--r-xl);
  padding:24px clamp(18px,2.4vw,28px);
  box-shadow:var(--hi), var(--sh-1);
}
.bh-head { margin-bottom:18px; }
.bh-title {
  font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--bark);
  margin:0 0 4px;
}
.bh-sub { color:var(--bark-2); font-size:.92rem; margin:0; }

.bh-filters {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:16px 18px; margin-bottom:16px;
}
.bh-filter-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
@media (max-width:760px) { .bh-filter-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .bh-filter-grid { grid-template-columns:1fr; } }

.bh-presets {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line-soft);
}
.bh-preset {
  background:var(--gold-pale); border:1px solid rgba(92,110,84,.22);
  color:var(--gold-deep); padding:5px 12px; border-radius:999px;
  font-family:inherit; font-size:.78rem; font-weight:600; cursor:pointer;
  transition:all .15s;
}
.bh-preset:hover { background:var(--gold-deep); color:var(--on-accent); border-color:transparent; }

.bh-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px;
}
@media (max-width:680px) { .bh-stats { grid-template-columns:repeat(2,1fr); } }
.bh-stat {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 16px; text-align:center;
}
.bh-stat.paid { background:var(--gold-pale); border-color:rgba(92,110,84,.3); }
.bh-stat.open { background:var(--amber-pale); border-color:rgba(184,137,62,.3); }
.bh-stat-num {
  font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1;
  color:var(--bark);
}
.bh-stat.paid .bh-stat-num { color:var(--gold-deep); }
.bh-stat.open .bh-stat-num { color:var(--amber-text); }
.bh-stat-lbl {
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bark-2); margin-top:6px;
}

.bh-actions {
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:14px 16px; background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
}

/* ============================================================
   WALK-REPORT (neuer Composer)
   ============================================================ */
.wr {
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px; align-items:start;
}
@media (max-width:880px) { .wr { grid-template-columns:1fr; } }
.wr-edit { display:flex; flex-direction:column; gap:16px; min-width:0; }
.wr-preview {
  position:sticky; top:14px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:14px;
  padding:18px; box-shadow:0 4px 14px -8px rgba(62,55,42,.08);
  display:flex; flex-direction:column; gap:14px; min-width:0;
  max-height:calc(100vh - 200px); overflow-y:auto;
}

.wr-card {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:18px 20px; box-shadow:0 2px 8px -4px rgba(62,55,42,.06);
}
.wr-card-head { display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.wr-step {
  width:32px; height:32px; border-radius:50%;
  background:var(--gold-deep); color:var(--on-accent);
  display:grid; place-items:center; font-weight:600; font-size:.92rem; flex:none;
}
.wr-card-head h3 { font-family:var(--serif); font-size:1.15rem; font-weight:600; margin:0; color:var(--bark); }
.wr-card-head small { display:block; font-size:.78rem; color:var(--bark-2); margin-top:1px; }

.wr-dog-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px;
}
.wr-dog-card {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:12px 10px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:all .15s; font-family:inherit;
}
.wr-dog-card:hover { border-color:var(--gold); transform:translateY(-1px); }
.wr-dog-card.sel {
  background:var(--surface); border-color:var(--gold-deep);
  box-shadow:var(--hi), 0 0 0 2px var(--gold-deep);
}
.wr-dog-icon { font-size:1.5rem; }
.wr-dog-card strong { font-size:.92rem; }
.wr-dog-card small  { color:var(--bark-2); font-size:.74rem; }

.wr-gps-btn {
  cursor:pointer; text-align:left; font-family:inherit;
  background:var(--surface) !important;
  border:1px solid var(--line-soft);
  display:flex; align-items:center; transition:all .15s;
}
.wr-gps-btn:hover { border-color:var(--gold); }
.wr-gps-btn.on {
  background:var(--surface) !important;
  border-color:var(--gold-deep);
  color:var(--gold-deep); font-weight:600;
}

.wr-mood-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
@media (max-width:560px) { .wr-mood-grid { grid-template-columns:repeat(2,1fr); } }
.wr-mood {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 8px 10px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:all .15s; font-family:inherit;
}
.wr-mood:hover { border-color:var(--gold); transform:translateY(-1px); }
.wr-mood.sel {
  background:var(--surface); border-color:var(--gold-deep);
  box-shadow:var(--hi), 0 0 0 2px var(--gold-deep);
}
.wr-mood-emoji { font-size:1.8rem; line-height:1; }
.wr-mood-label { font-size:.78rem; font-weight:600; color:var(--bark); }
.wr-mood.sel .wr-mood-label { color:var(--gold-deep); }

.wr-hint {
  margin:12px 0 0; padding:10px 14px;
  background:#FFFCF5; border:1px dashed var(--line); border-radius:10px;
  font-size:.78rem; color:var(--bark-2); line-height:1.5;
}
.wr-hint strong { color:var(--gold-deep); }

.wr-upload {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px 18px;
  background:var(--surface); border:2px dashed var(--line); border-radius:12px;
  cursor:pointer; text-align:center; transition:all .15s;
}
.wr-upload:hover { border-color:var(--gold-deep); background:var(--gold-pale); }
.wr-upload-ico { font-size:2rem; }
.wr-upload strong { font-size:.92rem; color:var(--bark); }
.wr-upload small  { color:var(--bark-2); font-size:.78rem; }

/* Neue 2-Button-Variante: Kamera + Galerie/Dateien für Walk-Reports.
   Header zeigt Icon + Beschreibung, darunter zwei klare Aktion-Buttons. */
.wr-upload-card {
  background:var(--surface); border:2px dashed var(--line); border-radius:12px;
  padding:16px 18px; transition:border-color .15s;
}
.wr-upload-card:hover { border-color:var(--gold-deep); }
.wr-upload-head {
  display:flex; align-items:center; gap:14px;
  margin-bottom:14px;
}
.wr-upload-head .wr-upload-ico { font-size:1.8rem; line-height:1; }
.wr-upload-head strong { display:block; font-size:.92rem; color:var(--bark); margin-bottom:2px; }
.wr-upload-head small  { color:var(--bark-2); font-size:.78rem; }
.wr-upload-actions {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.wr-upload-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; border-radius:10px;
  background:var(--sage-fill); color:var(--on-accent);
  font-size:.88rem; font-weight:600; line-height:1.2;
  cursor:pointer; transition:transform .12s, background-color .15s;
  border:1px solid transparent; user-select:none;
  text-align:center; min-height:44px; /* tap-target */
}
.wr-upload-btn:hover { background:var(--sage-dark); transform:translateY(-1px); }
.wr-upload-btn:active { transform:translateY(0); }
.wr-upload-btn--alt {
  background:var(--paper); color:var(--bark);
  border-color:var(--line);
}
.wr-upload-btn--alt:hover { background:var(--paper-deep); border-color:var(--gold-deep); }
.wr-upload-btn span:first-child { font-size:1.1rem; }
@media (max-width: 480px) {
  /* Auf Mobile: Buttons untereinander, vollbreite tap-targets */
  .wr-upload-actions { grid-template-columns:1fr; }
}

.wr-photos-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; margin-top:12px;
}
.wr-photo-tile { position:relative; }
.wr-photo-tile img {
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; border:1px solid var(--line-soft);
}
.wr-photo-rm {
  position:absolute; top:4px; right:4px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(46,42,32,.86); color:#fff; border:0;
  font-size:1.15rem; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
@media (max-width: 720px) { .wr-photo-rm { width:40px; height:40px; } }
.wr-photo-rm:hover { background:var(--rose); }

/* ============================================================
   MANUELLE RECHNUNG (neue UI)
   ============================================================ */
.m-inv {
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start;
}
@media (max-width:880px) { .m-inv { grid-template-columns:1fr; } }
.m-inv-edit { display:flex; flex-direction:column; gap:16px; min-width:0; }
.m-inv-summary {
  position:sticky; top:14px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:14px;
  padding:18px; box-shadow:0 4px 14px -8px rgba(62,55,42,.08);
  display:flex; flex-direction:column; gap:14px; min-width:0;
}

.m-inv-card {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:18px 20px; box-shadow:0 2px 8px -4px rgba(62,55,42,.06);
}
.m-inv-card-head {
  display:flex; gap:14px; align-items:center; margin-bottom:14px;
}
.m-inv-step-num {
  width:32px; height:32px; border-radius:50%;
  background:var(--gold-deep); color:var(--on-accent);
  display:grid; place-items:center; font-weight:600; font-size:.92rem; flex:none;
}
.m-inv-card-head h3 { font-family:var(--serif); font-size:1.15rem; font-weight:600; margin:0; color:var(--bark); }
.m-inv-card-head small { display:block; font-size:.78rem; color:var(--bark-2); margin-top:1px; }

/* Kunden-Picker */
.m-inv-cust-sel {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px; background:var(--surface);
  border:1px solid rgba(92,110,84,.3); border-radius:12px;
}
.m-inv-cust-sel strong { display:block; font-size:.95rem; }
.m-inv-cust-sel small  { display:block; font-size:.78rem; color:var(--bark-2); margin-top:2px; }
.m-inv-cust-pick { display:flex; flex-direction:column; gap:10px; }
.m-inv-cust-list {
  max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:5px;
  border:1px solid var(--line-soft); border-radius:10px; padding:5px; background:#fafaf6;
}
.m-inv-cust-item {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:9px;
  padding:9px 12px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:1px;
  transition:all .15s; font-family:inherit;
}
.m-inv-cust-item:hover { border-color:var(--gold); transform:translateY(-1px); }
.m-inv-cust-item strong { font-size:.9rem; }
.m-inv-cust-item small  { font-size:.74rem; color:var(--bark-2); }
.m-inv-cust-item .dogs  { color:var(--gold-deep); font-weight:600; }

/* Schnellvorlagen */
.m-inv-quick-items {
  display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin-bottom:18px;
}
@media (max-width:560px) { .m-inv-quick-items { grid-template-columns:1fr; } }
.m-inv-quick {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:10px;
  padding:9px 13px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:2px; font-family:inherit;
  transition:all .15s;
}
.m-inv-quick:hover { border-color:var(--gold-deep); background:var(--gold-pale); transform:translateY(-1px); }
.m-inv-quick-label { font-size:.85rem; font-weight:600; color:var(--gold-deep); }
.m-inv-quick-meta  { font-size:.72rem; color:var(--bark-2); }

/* Positionen-Editor (Tabelle) */
.m-inv-lines-head, .m-inv-line {
  display:grid; grid-template-columns:1.5fr 60px 110px 90px 36px; gap:8px; align-items:center;
}
@media (max-width:680px) {
  .m-inv-lines-head { display:none; }
  .m-inv-line { grid-template-columns:1fr 60px; gap:6px; padding:10px; border:1px solid var(--line-soft); border-radius:10px; }
  .m-inv-line .m-line-label { grid-column:1/-1; }
  .m-inv-line .input-with-suffix { grid-column:1/2; }
  .m-inv-line .m-line-total { grid-column:2/3; text-align:right; }
  .m-inv-line .m-line-del { grid-column:2/3; justify-self:end; }
}
.m-inv-lines-head {
  font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bark-2); padding:0 4px 6px;
}
.m-inv-lines { display:flex; flex-direction:column; gap:6px; }
.m-inv-line .settings-input { padding:8px 10px; font-size:.88rem; }
.m-inv-line .m-line-total {
  font-family:var(--serif); font-size:1rem; font-weight:600; color:var(--gold-deep); text-align:right;
}

/* Live-Summary rechts */
.m-inv-sum-card {
  background:var(--surface);
  border:1px solid rgba(92,110,84,.3); border-radius:12px; padding:16px 18px;
}
.m-inv-sum-head {
  padding-bottom:10px; border-bottom:1px solid rgba(92,110,84,.2); margin-bottom:10px;
}
.m-inv-sum-head strong { display:block; font-size:1rem; }
.m-inv-sum-head small  { display:block; font-size:.74rem; color:var(--bark-2); margin-top:3px; }
.m-inv-sum-lines { display:flex; flex-direction:column; gap:4px; font-size:.85rem; }
.m-inv-sum-line { display:flex; justify-content:space-between; gap:8px; padding:2px 0; }
.m-inv-sum-line strong { font-weight:600; white-space:nowrap; color:var(--gold-deep); }
.m-inv-sum-total {
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:10px; margin-top:10px; border-top:2px solid var(--gold-deep);
  font-family:var(--serif); font-size:1.3rem; color:var(--gold-deep);
}
.m-inv-sum-total strong { font-weight:600; }
.m-inv-sum-note { margin-top:8px; font-size:.76rem; color:var(--bark-2); font-style:italic; }

.m-inv-tips {
  background:#FFFCF5; border:1px dashed var(--line); border-radius:10px;
  padding:12px 14px;
}
.m-inv-tips-head { font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:5px; }
.m-inv-tips p { margin:0; font-size:.82rem; color:var(--bark-2); line-height:1.5; }

/* ============================================================
   DATEN & DEMO-TAB
   ============================================================ */
.data-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
@media (max-width:560px) { .data-stats { grid-template-columns:1fr; } }
.data-stat-card {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; padding:14px 16px;
  text-align:center;
}
.data-stat-num { font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--gold-deep); line-height:1; }
.data-stat-lbl { font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bark-2); margin-top:4px; }
.data-actions {
  display:flex; flex-wrap:wrap; gap:10px;
}

/* Demo-Tag bei Kundenkarten */
.cust-card.is-demo { border-left:3px solid var(--amber); }
.demo-tag {
  display:inline-block; margin-left:6px; padding:1px 7px;
  background:var(--amber-pale); color:var(--amber); border:1px solid rgba(184,137,62,.32);
  border-radius:6px; font-size:.55rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  vertical-align:middle;
}

/* ============================================================
   VERTRAGS-VORSCHAU MODAL
   ============================================================ */
.contract-preview { display:flex; flex-direction:column; gap:12px; }
.contract-preview-bar {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:10px 14px; background:var(--gold-pale); border:1px solid rgba(92,110,84,.3);
  border-radius:12px; font-size:.86rem;
}
.contract-preview-doc {
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:6px; max-height:62vh; overflow:auto;
}
.contract-preview-doc.compact { padding:4px; max-height:520px; }
.contract-preview-doc.compact .doc-page { padding:20px 26px; }
.contract-preview-doc.compact .doc-title { font-size:20px; }
.contract-preview-doc.compact .doc-subtitle { font-size:13px; }
.contract-preview-doc.compact .doc-clause h4 { font-size:12px; }
.contract-preview-doc.compact .doc-clause p { font-size:11px; }
.contract-preview-doc.compact .doc-field { font-size:11px; }

/* Wizard-Preview-Tabs */
.wiz-preview-tabs {
  display:flex; gap:4px; padding:4px;
  background:rgba(120,130,110,.13); border-radius:10px;
}
.wiz-preview-tab {
  flex:1; background:transparent; border:0; padding:7px 12px; border-radius:8px;
  font-family:inherit; font-weight:600; font-size:.74rem; color:var(--bark-2); cursor:pointer;
  transition:.15s;
}
.wiz-preview-tab.active {
  background:var(--surface); color:var(--bark);
  box-shadow:var(--hi), 0 2px 5px -2px rgba(62,55,42,.2);
}

/* ============================================================
   HOLIDAY MODULE — Hunde-Hotel-Buchungen
   ============================================================ */
.holiday-tabs {
  display:flex; gap:6px; padding:5px;
  background:rgba(120,130,110,.13); border-radius:12px; max-width:300px; margin:0 4px 22px;
}
.holiday-tab {
  flex:1; background:transparent; border:0; padding:10px 14px; border-radius:10px;
  font-family:inherit; font-weight:600; font-size:.88rem; color:var(--bark-2); cursor:pointer;
}
.holiday-tab.active { background:var(--surface); color:var(--bark); box-shadow:var(--hi), 0 2px 6px -2px rgba(62,55,42,.2); }

.holiday-filter-bar {
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:0 4px 14px;
}
.holiday-status-pills { display:flex; gap:6px; flex-wrap:wrap; }
.hp-pill {
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-line);
  font-family:inherit; font-size:.78rem; font-weight:600; color:var(--bark-2); cursor:pointer;
  transition:all .15s;
}
.hp-pill:hover { background:var(--surface); color:var(--bark); }
.hp-pill.active { background:var(--gold-deep); color:var(--on-accent); border-color:transparent; }
.hp-pill span { font-size:.7rem; opacity:.7; background:rgba(0,0,0,.08); padding:1px 7px; border-radius:8px; }
.hp-pill.active span { background:rgba(255,255,255,.18); opacity:.95; }

/* ============================================================
   FAHRTENBUCH — Trips-View
   ============================================================ */
.trips-stats {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:18px 0 22px;
}
@media (max-width: 720px) {
  .trips-stats { grid-template-columns:1fr; }
}
.trips-stat {
  background:var(--surface);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  padding:14px 18px;
  box-shadow:var(--hi), var(--sh-1);
}
.trips-stat-label { font-size:.78rem; color:var(--bark-2); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.trips-stat-value { font-family:var(--serif); font-size:1.8rem; font-weight:600; color:var(--bark); margin:6px 0 3px; line-height:1.1; }
.trips-stat-sub { font-size:.82rem; color:var(--gold-deep); font-weight:500; }

.trips-filter-bar {
  display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
  margin-bottom:18px; padding:14px 16px; background:var(--cream-soft); border-radius:var(--r-lg);
  border:1px solid var(--glass-line);
}
.trips-filter-label { display:flex; flex-direction:column; gap:5px; font-size:.82rem; color:var(--bark-2); font-weight:600; min-width:200px; }
.trips-type-pills { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

.trips-list-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 4px 12px;
}
.trips-list-summary { font-size:.95rem; color:var(--bark-2); }
.trips-list-summary strong { color:var(--bark); }

.trips-list { display:flex; flex-direction:column; gap:10px; padding:0 4px 30px; }

.trip-row {
  display:grid;
  grid-template-columns: 180px 1fr auto;
  gap:14px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:14px 18px;
  box-shadow:var(--sh-1);
  transition:box-shadow .15s, transform .15s;
}
.trip-row:hover { box-shadow:var(--sh-2); transform:translateY(-1px); }

.trip-row-date { display:flex; flex-direction:column; gap:3px; }
.trip-date-day { font-family:var(--serif); font-size:1.02rem; font-weight:600; color:var(--bark); }
.trip-date-km { font-size:.74rem; color:var(--bark-2); font-variant-numeric:tabular-nums; }

.trip-row-body { display:flex; flex-direction:column; gap:5px; min-width:0; }
.trip-row-route { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.trip-type-chip {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(140,109,42,.12); color:var(--gold-deep);
  padding:3px 9px; border-radius:99px; font-size:.78rem; font-weight:600;
}
/* Pauschal-Badge: hervorgehoben in Sage-Grün, damit man auf einen Blick sieht „mit Pauschal" */
.trip-flat-chip {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(92,110,84,.14); color:#3e4d39;
  padding:3px 9px; border-radius:99px; font-size:.78rem; font-weight:600;
  border:1px solid rgba(92,110,84,.3);
}
.trip-roundtrip-chip {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(167,188,173,.18); color:var(--sage-deep);
  padding:3px 9px; border-radius:99px; font-size:.74rem; font-weight:500;
}
.trip-customer { font-size:.85rem; color:var(--bark-2); }
.trip-row-from-to {
  font-size:.88rem; color:var(--bark); line-height:1.5;
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.trip-dot { color:var(--gold-deep); font-size:.7em; }
.trip-arrow { color:var(--bark-2); margin:0 4px; }
.trip-row-purpose { font-size:.85rem; color:var(--bark); }
.trip-row-notes { font-size:.78rem; line-height:1.45; margin-top:2px; }

.trip-row-right { display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex:none; }
.trip-row-km {
  font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--gold-deep);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.trip-row-actions { display:flex; gap:4px; }

/* Modal: km-Auto-Calc-Display */
.trip-total-display {
  background:var(--cream-soft); border:1px dashed var(--line); border-radius:var(--r-md);
  padding:11px 14px; font-size:.92rem; color:var(--bark-2); text-align:center;
  transition:background .2s, border-color .2s, color .2s;
}
.trip-total-display.on {
  background:rgba(140,109,42,.08); border-color:var(--gold-deep); border-style:solid; color:var(--bark);
}
.trip-total-display.warn {
  background:rgba(200,80,80,.08); border-color:rgba(200,80,80,.5); color:var(--rose-text);
}

.trip-form .subhead { margin-top:18px; margin-bottom:8px; }

/* ============================================================
   TRIP-WIZARD — 4-Step Flow Styles
   ============================================================ */
.trip-wiz-steps { margin-bottom:24px; }

/* Fahrtart-Kachel-Grid (Step 1) */
.trip-type-tiles {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}
.trip-type-tile {
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:18px 12px 14px;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:all .15s;
  font-family:inherit;
  text-align:center;
  position:relative;
}
.trip-type-tile:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--sh-1); }
.trip-type-tile.sel {
  background:#fff;
  border-color:var(--gold-deep);
  box-shadow:var(--hi), 0 0 0 2px var(--gold-deep);
}
.trip-type-tile-icon { font-size:1.8rem; line-height:1; }
.trip-type-tile-label { font-size:.86rem; font-weight:600; color:var(--bark); line-height:1.25; }
.trip-type-tile-hint {
  position:absolute; top:6px; right:6px;
  background:rgba(140,109,42,.15); color:var(--gold-deep);
  font-size:.65rem; font-weight:600; padding:2px 7px; border-radius:99px;
}

/* Customer-Suche (Step 2) */
.trip-cust-section { margin:18px 0 0; }
.trip-cust-search-bar {
  position:relative; display:flex; align-items:center;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:0 14px 0 40px;
  margin:8px 0 12px;
  transition:border-color .15s, box-shadow .15s;
}
.trip-cust-search-bar:focus-within {
  border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(140,109,42,.12);
}
.trip-cust-search-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:.95rem; pointer-events:none; opacity:.6;
}
.trip-cust-search-input {
  flex:1; padding:13px 0; border:none; outline:none; background:transparent;
  font-family:inherit; font-size:.95rem; color:var(--bark); min-width:0;
}
.trip-cust-search-clear {
  background:rgba(120,130,110,.15); border:none; color:var(--bark-2);
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; flex:none;
  font-size:1rem; font-weight:600; transition:background .15s;
}
.trip-cust-search-clear:hover { background:rgba(120,130,110,.3); color:var(--bark); }

/* Selected-Customer-Karte (oben in Step 2) */
.trip-cust-selected { margin-bottom:14px; }
.trip-cust-selected .wiz-cust-card.sel { cursor:default; }

/* wiz-cust-card erweitert für Fahrtenbuch-Suche (Avatar + Body + Check) */
.wiz-cust-card {
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:11px 14px;
}
.wiz-cust-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--sage-fill);
  color:var(--on-accent); font-weight:600; font-size:.85rem;
  display:grid; place-items:center;
  border:2px solid #fff;
  flex:none;
}
.wiz-cust-body { display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; }
.wiz-cust-body strong { font-size:.92rem; }
.wiz-cust-body small { color:var(--bark-2); font-size:.78rem; line-height:1.4; }
.wiz-cust-body small.dogs { color:var(--gold-deep); font-weight:600; }
.wiz-cust-check {
  background:var(--gold-deep); color:var(--on-accent);
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-weight:600; font-size:.85rem;
  flex:none;
}
.wiz-cust-empty {
  text-align:center; padding:24px 16px;
  color:var(--bark-2); font-size:.86rem; line-height:1.5;
}

/* Zusammenfassungs-Card (Step 4) */
.trip-wiz-summary {
  margin-top:24px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:16px 20px;
  box-shadow:var(--sh-1);
}
.trip-wiz-summary-head {
  font-family:var(--serif); font-size:1.05rem; font-weight:600;
  color:var(--bark); margin-bottom:12px;
  padding-bottom:8px; border-bottom:1px solid var(--line-soft);
}
.trip-wiz-summary-row {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; padding:6px 0; font-size:.88rem;
}
.trip-wiz-summary-row .lbl { color:var(--bark-2); font-weight:500; flex:none; }
.trip-wiz-summary-row .val { color:var(--bark); text-align:right; word-break:break-word; }
.trip-wiz-summary-row.total {
  margin-top:6px; padding-top:10px;
  border-top:1px solid var(--line-soft);
  font-size:1.02rem;
}
.trip-wiz-summary-row.total .val strong {
  font-family:var(--serif);
  font-size:1.3rem;
  color:var(--gold-deep);
}

/* Pauschal-Details-Toggle (Step 3, wenn nicht pickup) */
.trip-flat-details summary { padding:8px 12px; background:rgba(120,130,110,.05); border-radius:8px; user-select:none; }
.trip-flat-details[open] summary { margin-bottom:8px; }

/* Wizard im Modal — etwas Spacing */
.wiz-pane .form-grid { margin-bottom:8px; }
.wiz-pane > .subhead { margin-top:18px; }

/* Mobile-Anpassung: Trip-Row stapelt */
@media (max-width: 720px) {
  .trip-row {
    grid-template-columns: 1fr;
    gap:10px;
  }
  .trip-row-right { flex-direction:row; justify-content:space-between; align-items:center; }
  .trip-row-km { font-size:1.15rem; }
}

.holiday-list { display:flex; flex-direction:column; gap:12px; padding:0 4px; }
.holiday-card {
  position:relative; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--hi), var(--sh-1); cursor:pointer;
  transition:transform .15s, box-shadow .2s;
}
.holiday-card:hover { transform:translateY(-2px); box-shadow:var(--hi), var(--sh-2); }
.hb-status {
  position:absolute; top:12px; right:14px; padding:4px 11px; border-radius:999px;
  font-size:.66rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.hb-head { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; padding-right:120px; }
.hb-number { font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--gold-deep); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hb-overbook-tag {
  display:inline-block; padding:2px 10px; border-radius:999px;
  background:var(--amber-pale); color:var(--amber); border:1px solid rgba(184,137,62,.32);
  font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.holiday-card.is-overbook { border-left:3px solid var(--amber); }
.hb-dates { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.92rem; }
.hb-arrow { color:var(--bark-2); font-weight:600; }
.hb-days { color:var(--bark-2); font-size:.82rem; }
.hb-body { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.hb-dog { font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--bark); }
.hb-cust { font-size:.82rem; color:var(--bark-2); margin-top:2px; }
.hb-price { font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--gold-deep); }
.hb-actions { display:flex; gap:6px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--line-soft); }

/* ============== Holiday Calendar ============== */
.hc-head {
  display:flex; justify-content:space-between; align-items:center; padding:0 4px 12px; gap:10px;
}
.hc-month { font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--bark); margin:0; }
.hc-legend {
  display:flex; gap:14px; flex-wrap:wrap; padding:8px 6px 16px;
  font-size:.78rem; color:var(--bark-2);
}
.hc-legend span { display:inline-flex; align-items:center; gap:6px; }
.hc-legend-dot { width:12px; height:12px; border-radius:3px; display:inline-block; }
.hc-legend-dot.free    { background:var(--surface); border:1px solid var(--line); }
.hc-legend-dot.partial { background:var(--gold-pale); }
.hc-legend-dot.busy    { background:var(--amber-bg); }
.hc-legend-dot.full    { background:var(--rose-bg); }

.hc-grid-head {
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:0 4px 6px;
  font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bark-2);
}
.hc-grid-head > div { text-align:center; }
.hc-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:0 4px;
}
/* Holiday-Kalender 7-Spalten: bei <560px in horizontal scrollbares Grid wechseln,
   sonst werden Tag-Zellen unleserlich klein (41px @ 320px Viewport). */
@media (max-width: 560px) {
  .hc-grid, .hc-grid-head {
    grid-template-columns: repeat(7, minmax(56px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .hc-grid::-webkit-scrollbar, .hc-grid-head::-webkit-scrollbar { display: none; }
  .hc-day { scroll-snap-align: start; min-height: 64px; padding: 6px 5px; }
}
.hc-day {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:10px;
  padding:8px 9px; min-height:78px; cursor:pointer; position:relative;
  display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s;
}
.hc-day.empty { background:transparent; border:none; cursor:default; }
.hc-day:hover:not(.empty) { transform:translateY(-1px); box-shadow:var(--sh-1); border-color:var(--gold); }
.hc-day.today { border-color:var(--gold-deep); box-shadow:0 0 0 1px var(--gold-deep); }
.hc-day-num { font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--bark); }
.hc-day-load { font-size:.74rem; font-weight:600; color:var(--bark-2); margin-top:auto; }
.hc-day-dots { display:flex; gap:2px; flex-wrap:wrap; margin-top:4px; }
.hc-dot { width:6px; height:6px; border-radius:50%; background:var(--gold-deep); }
.hc-day.free    { background:var(--surface); }
.hc-day.partial { background:var(--gold-pale); }
.hc-day.busy    { background:var(--amber-bg); color:var(--amber-text); }
.hc-day.full    { background:var(--rose-bg); color:var(--rose-text); }

.hd-detail-row {
  display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line-soft); cursor:pointer;
  align-items:center; gap:12px;
}
.hd-detail-row:hover { background:rgba(255,255,255,.5); }
.hd-detail-row:last-child { border-bottom:0; }
.hd-detail-info strong { display:block; }
.hd-detail-info small  { display:block; font-size:.76rem; color:var(--bark-2); margin-top:2px; }
.hd-detail-dates { font-size:.88rem; color:var(--bark-2); text-align:right; }

/* ============== Wizard ============== */
.wiz-steps {
  display:flex; gap:0; margin:0 0 24px; padding:0; align-items:center;
  background:rgba(120,130,110,.06); border-radius:12px; padding:6px;
}
.wiz-step {
  flex:1; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px;
  font-size:.78rem; color:var(--bark-2); position:relative;
}
.wiz-step.active { background:var(--surface); color:var(--bark); box-shadow:var(--hi), 0 2px 6px -2px rgba(62,55,42,.18); }
.wiz-step.done .wiz-step-num { background:var(--gold-deep); color:var(--on-accent); }
.wiz-step-num {
  width:24px; height:24px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:600; font-size:.78rem;
  background:rgba(120,130,110,.18); color:var(--bark-2);
}
.wiz-step.active .wiz-step-num { background:var(--gold-deep); color:var(--on-accent); }
.wiz-step-label { font-weight:600; white-space:nowrap; }
@media (max-width:680px) {
  .wiz-step-label { display:none; }
}

.wiz-pane { padding:6px 2px; }
.wiz-title { font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--bark); margin:0 0 18px; }

.wiz-tabs { display:flex; gap:8px; margin-bottom:18px; }
.wiz-tab-radio {
  flex:1; padding:11px 14px; background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  cursor:pointer; font-weight:600; font-size:.9rem; color:var(--bark-2); text-align:center;
}
/* display:none ersetzt — siehe „Visuell versteckt, aber bedienbar" am Dateiende */
.wiz-tab-radio.active { background:var(--gold-deep); color:var(--on-accent); border-color:transparent; }
.wiz-tab-radio:has(input:disabled) { opacity:.5; cursor:not-allowed; }

.wiz-cust-list {
  max-height:380px; overflow-y:auto; display:flex; flex-direction:column; gap:6px;
  padding:4px; border:1px solid var(--line-soft); border-radius:12px;
}
.wiz-cust-card {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:10px;
  padding:11px 14px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:2px;
  transition:all .15s; font-family:inherit;
}
.wiz-cust-card:hover { border-color:var(--gold); transform:translateY(-1px); }
.wiz-cust-card.sel {
  background:var(--surface); border-color:var(--gold-deep);
  box-shadow:var(--hi), 0 0 0 2px var(--gold-deep);
}
.wiz-cust-card strong { font-size:.95rem; }
.wiz-cust-card small  { color:var(--bark-2); font-size:.78rem; }
.wiz-cust-card .dogs  { color:var(--gold-deep); font-weight:600; }

.wiz-dog-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px;
}
.wiz-dog-card {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 12px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:all .15s; font-family:inherit;
}
.wiz-dog-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.wiz-dog-card.sel {
  background:var(--surface); border-color:var(--gold-deep);
  box-shadow:var(--hi), 0 0 0 2px var(--gold-deep);
}
.wiz-dog-icon { font-size:1.6rem; }
.wiz-dog-card strong { font-size:.95rem; }
.wiz-dog-card small { color:var(--bark-2); font-size:.78rem; }

.wiz-cap-summary {
  display:flex; gap:14px; align-items:center; padding:14px 18px; border-radius:12px;
  margin-top:14px; background:var(--gold-pale); border:1px solid rgba(92,110,84,.3);
}
.wiz-cap-summary.fail { background:var(--rose-bg); border-color:var(--rose); color:var(--rose-text); }
.wiz-cap-summary.overbook { background:var(--amber-pale); border-color:rgba(184,137,62,.4); }
.wiz-cap-icon {
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--gold-deep); color:var(--on-accent); font-weight:600; font-size:1.1rem;
}
.wiz-cap-summary.fail .wiz-cap-icon { background:var(--rose); }
.wiz-cap-summary.overbook .wiz-cap-icon { background:var(--amber); }

.wiz-overbook-actions {
  display:flex; gap:12px; align-items:center; margin-top:12px; flex-wrap:wrap;
}
.wiz-cap-summary strong { display:block; font-size:.94rem; }
.wiz-cap-summary div + div { font-size:.84rem; color:var(--bark-2); }

.wiz-cap-days {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:6px; margin-top:14px;
}
.wiz-cap-day {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:9px;
  padding:8px 10px; font-size:.78rem; display:flex; justify-content:space-between;
}
.wiz-cap-day.free    { }
.wiz-cap-day.partial { background:var(--gold-pale); }
.wiz-cap-day.busy    { background:var(--amber-bg); color:var(--amber-text); }
.wiz-cap-day.full    { background:var(--rose-bg); color:var(--rose-text); border-color:var(--rose); }
.wiz-cap-day .cap-n  { font-weight:600; }

.wiz-service-base {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; background:var(--surface);
  border:1px solid rgba(92,110,84,.3); border-radius:12px; margin-bottom:14px;
}
.wiz-service-name strong { display:block; font-size:.96rem; }
.wiz-service-name small { color:var(--bark-2); font-size:.8rem; }
.wiz-service-price { font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--gold-deep); }

.wiz-services { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.wiz-service-row {
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; cursor:pointer;
}
.wiz-service-row.sel { background:var(--surface); border-color:var(--gold-deep); }
.wiz-service-row input[type=checkbox] { width:20px; height:20px; accent-color:var(--gold-deep); }
.wiz-service-info { flex:1; }
.wiz-service-info strong { display:block; font-size:.92rem; }
.wiz-service-info small  { color:var(--bark-2); font-size:.78rem; }
.wiz-service-qty { width:60px; padding:8px; border:1px solid var(--line-soft); border-radius:8px; font-family:inherit; text-align:center; }

/* Dynamisches Preismodell: Per-Day-Override-Editor (collapsible) */
.wiz-perday-wrap {
  margin:0 0 16px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
}
.wiz-perday-wrap > summary {
  cursor:pointer; list-style:none; padding:4px 0; user-select:none;
  font-size:.92rem; color:var(--bark);
}
.wiz-perday-wrap > summary::-webkit-details-marker { display:none; }
.wiz-perday-wrap > summary::before {
  content:'▸'; display:inline-block; margin-right:8px;
  color:var(--gold-deep); transition:transform .15s ease;
}
.wiz-perday-wrap[open] > summary::before { transform:rotate(90deg); }
.wiz-perday-grid {
  margin-top:14px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px;
}
.wiz-perday-row {
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:8px;
  padding:8px 10px; background:var(--cream); border:1px solid var(--line-soft); border-radius:9px;
  font-size:.84rem;
}
.wiz-perday-row.is-we { background:var(--amber-bg); border-color:var(--amber); }
.wiz-perday-date { display:flex; flex-direction:column; min-width:64px; }
.wiz-perday-date strong { font-size:.82rem; color:var(--bark); }
.wiz-perday-date small  { color:var(--bark-2); font-size:.7rem; }
.wiz-perday-input {
  width:70px; padding:5px 7px; border:1px solid var(--line-soft); border-radius:7px;
  font-family:inherit; text-align:right; background:var(--surface);
}
.wiz-perday-input:focus { outline:2px solid var(--gold-deep); outline-offset:1px; }
.wiz-perday-eff { font-size:.78rem; color:var(--gold-deep); font-weight:600; min-width:58px; text-align:right; }
.wiz-perday-clear {
  width:22px; height:22px; padding:0; border:none; background:transparent;
  font-size:1.2rem; line-height:1; color:var(--bark-2); cursor:pointer; border-radius:50%;
}
.wiz-perday-clear:hover { background:var(--line-soft); color:var(--bark); }

.wiz-total {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; padding:16px 20px;
}
.wiz-total-lines { font-size:.88rem; }
.wiz-total-line { display:flex; justify-content:space-between; padding:5px 0; }
.wiz-total-sum {
  display:flex; justify-content:space-between; padding-top:12px; margin-top:8px;
  border-top:2px solid var(--gold-deep); font-family:var(--serif); font-size:1.3rem; color:var(--gold-deep);
}
.wiz-total-sum strong { font-weight:600; }

/* Step 6: 2-Spalten Layout mit Live-Vorschau */
.wiz-summary-pane {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start;
}
@media (max-width:980px) { .wiz-summary-pane { grid-template-columns:1fr; } }
.wiz-summary-left  { display:flex; flex-direction:column; gap:14px; min-width:0; }
.wiz-summary-right {
  position:sticky; top:14px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:14px;
  padding:18px; box-shadow:0 4px 14px -8px rgba(62,55,42,.08);
  display:flex; flex-direction:column; gap:14px; min-width:0;
  max-height:calc(100vh - 200px); overflow-y:auto;
}

.wiz-summary {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media (max-width:980px) { .wiz-summary { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .wiz-summary { grid-template-columns:1fr; } }
.wiz-summary-section.full { grid-column:1/-1; }
.wiz-summary-section {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; padding:13px 16px;
  min-width:0;
}
.wiz-summary-section > div,
.wiz-summary-section > .wiz-sum-line { word-break:break-word; overflow-wrap:break-word; }

/* Toggles im Wizard sauber stacken */
.wiz-summary-left .settings-toggle {
  margin:0;
}
.wiz-toggle-group {
  display:flex; flex-direction:column; gap:10px; margin-top:6px;
}
.wiz-summary-section.full { grid-column:1/-1; }
.wiz-summary-head {
  font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:6px;
}
.wiz-summary-section > div { font-size:.92rem; line-height:1.5; }
.wiz-summary-section .muted { color:var(--bark-2); font-size:.82rem; }
.wiz-sum-line { display:flex; justify-content:space-between; padding:3px 0; font-size:.86rem; }
.wiz-sum-total {
  display:flex; justify-content:space-between; padding-top:8px; margin-top:6px;
  border-top:1px solid var(--gold-deep); font-family:var(--serif); font-size:1.1rem; color:var(--gold-deep); font-weight:600;
}

/* ============== Holiday Detail Modal ============== */
.hd-detail-hero {
  background:var(--gold-deep);
  color:var(--on-accent); padding:24px 22px; border-radius:12px; text-align:center; margin-bottom:18px;
  position:relative;
}
.hd-detail-status {
  position:absolute; top:14px; right:16px; padding:5px 14px; border-radius:999px;
  font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.hd-detail-number {
  font-family:var(--serif); font-size:1.6rem; font-weight:600; opacity:.95;
  margin-bottom:10px;
}
.hd-detail-dates {
  font-family:var(--serif); font-size:1.35rem; display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap;
}
.hd-arrow { opacity:.7; }
.hd-detail-meta { font-size:.86rem; opacity:.85; margin-top:8px; }

.hd-detail-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media (max-width:680px) { .hd-detail-grid { grid-template-columns:1fr; } }
.hd-detail-section {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; padding:14px 16px;
}
.hd-detail-section.full { grid-column:1/-1; }
.hd-detail-section h4 {
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 8px;
}
.hd-detail-section div { font-size:.9rem; line-height:1.55; margin-bottom:3px; }
.hd-detail-section .muted { color:var(--bark-2); font-style:italic; }
.hd-line { display:flex; justify-content:space-between; padding:3px 0; font-size:.86rem; }
.hd-line.total {
  padding-top:8px; margin-top:6px; border-top:1px solid var(--gold-deep);
  font-family:var(--serif); font-size:1.1rem; color:var(--gold-deep); font-weight:600;
}

/* ============================================================
   PRINT — single document
   ============================================================ */
#printRoot { display:none; }
@media screen { #printRoot { display:none !important; } }
@media print {
  body { background:#fff !important; background-image:none !important; }
  body > *:not(#printRoot) { display:none !important; }
  #printRoot { display:block !important; }
  @page { size:A4; margin:18mm 16mm; }
}

/* ============================================================
   MOBILE-OPTIMIERUNG (gesammelt am Ende, damit der Kaskaden-
   Override über allen Modulen wirkt)
   ============================================================ */
@media (max-width: 760px) {
  /* Hauptbereich enger */
  main { padding: 14px 12px 80px; }

  /* Page-Head stacken */
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-head .grow { display: none; }
  .page-head > button, .page-head .btn { width: 100%; justify-content: center; }
  .page-head h1, .page-head h2 { font-size: 1.6rem; }
  .page-head .sub { font-size: .88rem; }
}

/* ============================================================
   iOS Zoom-Vermeidung — UNGATED (gilt für alle Viewports inkl.
   iPad portrait @ 768px, wo der bisherige max-width:720px-Gate
   nicht greifen würde und Safari zoom-on-focus triggert)
   ============================================================ */
.fld input, .fld textarea, .fld select, .settings-input,
input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"],
input[type="month"], input[type="url"], input[type="search"],
input[type="password"], textarea, select {
  font-size: 16px;
}

/* ============================================================
   Hover-Guard für Touch-Devices: Hover-State-Reset auf
   Touchscreens, damit Karten nach Tap nicht "schweben" bleiben
   (iOS-Sticky-Hover-Bug).
   ============================================================ */
@media (hover: none) {
  .cust-card:hover, .quick-tile:hover, .inq-card:hover,
  .appt-type-card:hover, .wr-mood:hover, .wr-dog-card:hover,
  .wiz-cust-card:hover, .wiz-dog-card:hover, .hc-day:hover,
  .holiday-card:hover, .cal-card:hover, .thing-row:hover,
  /* :not(:active) — auf Touch greift beim Tippen oft :hover UND :active.
     Ohne die Ausnahme hätte dieses !important die Druck-Rückmeldung genau
     dort ausgeschaltet, wo sie am meisten trägt. */
  .gbtn:hover:not(:active), .btn:hover:not(:active), .btn-tb:hover:not(:active),
  .doc-item:hover, .inv-card:hover, .appt-card:hover {
    transform: none !important;
    /* Nicht filter/background komplett resetten — manche brauchen Aktiv-Feedback,
       aber Translate-Verschiebung muss raus, sonst klemmt sie nach :active wieder. */
  }
}

/* ============================================================
   Safe-Area-Insets ungated (auch iOS Safari ohne PWA-Standalone
   hat Notch / Dynamic Island)
   ============================================================ */
@supports (padding: max(0px)) {
  .sidebar { padding-top: max(16px, env(safe-area-inset-top)); }
}

@media (max-width: 720px) {
  /* === TOPBAR komprimieren === */
  .topbar {
    margin: 8px 8px 0;
    padding: 6px 8px 6px 6px;
    gap: 8px;
    min-height: 54px;
    border-radius:14px;
  }
  .topbar .logo-badge { width: 42px; height: 42px; padding: 4px; }
  .topbar .brand-block { margin-left: 2px; padding-right: 4px; min-width: 0; overflow: hidden; }
  .topbar .brand {
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
  }
  .topbar .brand-sub { display: none; }
  .topbar .spacer { flex: 0 1 6px; }

  .topbar .user { padding: 2px !important; gap: 0 !important; }
  .topbar .user img { width: 30px !important; height: 30px !important; }
  .topbar .user > div { display: none; }

  .notif-bell { width: 36px; height: 36px; }
  .notif-bell .notif-dog { width: 28px; height: 28px; }

  .btn-tb { padding: 6px 10px; font-size: .72rem; }

  /* === VIEW-BAR: horizontal scrollbar mit Sticky-Offset für Mobile-Topbar (54px) === */
  .view-bar {
    margin: 12px 6px 0;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: auto;
    max-width: calc(100vw - 12px);
    flex-wrap: nowrap;
    border-radius:12px;
    scroll-padding-inline-end: 24px;
    /* Sticky-Offset: Topbar ist auf Mobile nur 54px (nicht 86px wie Desktop) */
    top: calc(54px + 8px + env(safe-area-inset-top, 0px)) !important;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  .view-bar::-webkit-scrollbar { display: none; }
  .view-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 11px 14px;     /* min-height 44px erreicht */
    font-size: .82rem;
    min-height: 44px;
    display: inline-flex; align-items: center; gap: 6px;
  }

  /* === GRID-2: Liste + Detail stacken === */
  .grid-2 { grid-template-columns: 1fr !important; gap: 14px; }
  .list-scroll { max-height: 420px; }
  .card.tight { padding: 12px; }

  /* === STATS-Karten kompakter === */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stats .stat { padding: 14px 14px; min-width: 0; overflow: hidden; }
  .stats .stat-big { font-size: 1.6rem; }
  .stats .stat-label { font-size: .68rem; letter-spacing: .14em; }
  /* Bei sehr engen Phones (<340px / iPhone 5/SE 1) auf 1 Spalte stacken */
  @media (max-width: 340px) {
    .stats { grid-template-columns: 1fr; }
  }

  /* === MODAL: Full-Screen-Modus auf Mobile ===
     WICHTIG: JS-Code emittiert .modal-bg + .modal-actions (NICHT .modal-backdrop/.modal-foot!).
     Frühere Audit-Findings hatten diese Selector-Drift; ist jetzt korrigiert. */
  #modalRoot .modal-bg { padding: 0; place-items: stretch; align-items: stretch; }
  #modalRoot .modal-card,
  #modalRoot .modal-card.wiz-xl,
  #modalRoot .modal-card.wide {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;     /* dynamic vh berücksichtigt iOS Safari URL-Bar */
    max-height: 100dvh;
    border-radius:0;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #modalRoot .modal-head { padding: 14px 16px 10px; flex: 0 0 auto; }
  #modalRoot .modal-head h2 { font-size: 1.15rem; }
  #modalRoot .modal-head .sub { font-size: .82rem; }
  #modalRoot .modal-body {
    padding: 12px 14px 16px;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;          /* verhindert Background-Body-Scroll bei iOS */
  }
  #modalRoot .modal-actions {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    flex: 0 0 auto;
    gap: 8px;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--line-soft);
  }
  #modalRoot .modal-actions .btn,
  #modalRoot .modal-actions button {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;       /* Touch-Target ≥ 44pt */
    justify-content: center;
  }

  /* === COMPOSER: stacken (Editor + Preview untereinander) === */
  .composer { grid-template-columns: 1fr !important; gap: 16px; }
  .composer-preview { order: 2; }
  .composer-edit textarea { min-height: 180px !important; }

  /* === Appt-Composer === */
  .appt-composer { grid-template-columns: 1fr !important; gap: 16px; }
  .appt-preview-pane { order: 2; }
  .appt-type-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid-2 { grid-template-columns: 1fr; }

  /* === Walk-Report-Composer === */
  .wr { grid-template-columns: 1fr !important; gap: 14px; }
  .wr-preview { order: 2; position: static; max-height: none; }
  .wr-dog-grid { grid-template-columns: repeat(2, 1fr); }
  .wr-mood-grid { grid-template-columns: repeat(3, 1fr); }
  .wr-photos-grid { grid-template-columns: repeat(3, 1fr); }

  /* === Holiday-Wizard === */
  .wiz-grid { grid-template-columns: 1fr !important; }
  .wiz-preview-card { position: static !important; max-height: none; }
  .wiz-step-progress { font-size: .72rem; }

  /* === Manuelle Rechnung === */
  .m-inv { grid-template-columns: 1fr !important; gap: 14px; }
  .m-inv-preview { order: 2; position: static; }

  /* === Status-Filter & andere Pill-Bars scrollbar === */
  #statusFilterBar { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  #statusFilterBar::-webkit-scrollbar { display: none; }
  .inq-filter-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    margin: 0 8px 16px;
  }
  .inq-filter-bar::-webkit-scrollbar { display: none; }
  .inq-filter { flex: 0 0 auto; white-space: nowrap; }

  /* === Settings: Tab-Bar scrollbar === */
  .settings-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-tab { flex: 0 0 auto; white-space: nowrap; }
  .settings-grid { grid-template-columns: 1fr !important; }

  /* === Rechnungs-Liste: zu Kacheln statt 4-Spalten-Grid === */
  .inv-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px 14px !important;
  }
  .inv-row .inv-amount {
    font-size: 1.15rem !important;
    text-align: left;
  }
  .inv-actions { justify-content: flex-start !important; }

  /* === Holiday-Cards === */
  .holiday-card { padding: 14px; }
  .hb-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hb-dates { font-size: .86rem; flex-wrap: wrap; }
  .hb-actions { gap: 6px; }
  .hb-actions .btn { font-size: .76rem; padding: 7px 10px; }

  /* === Inquiry-Karten === */
  .inq-list { grid-template-columns: 1fr !important; padding: 0 8px; }
  .inq-card-body { grid-template-columns: 1fr !important; gap: 8px; }
  .inq-card-actions { gap: 6px; }
  .inq-card-actions .btn { font-size: .76rem; padding: 7px 10px; }

  /* === Detail-Hero kompakter (FIX: vorher .hero-wrap → existiert nicht, JS emittiert .detail-hero + .hero-top) === */
  .detail-hero { padding: 14px 14px !important; }
  .hero-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-top .hero-avatar { width: 56px !important; height: 56px !important; border-radius:14px !important; align-self: flex-start; }
  .hero-top .hero-main { min-width: 0 !important; width: 100%; }
  .hero-top .hero-main h2 { font-size: 1.4rem !important; line-height: 1.15; word-break: break-word; }
  .hero-top .hero-sub { font-size: .82rem !important; word-break: break-word; }
  .hero-top .hero-actions {
    width: 100%;
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 4px;
  }
  .hero-top .hero-actions .gbtn {
    min-width: 44px; min-height: 44px;       /* Touch-Target */
    flex: 0 0 auto;
  }
  /* Segmented Control: horizontal scrollbar + Touch-Targets ≥ 44 */
  .seg {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scroll-padding-inline-end: 24px;
  }
  .seg::-webkit-scrollbar { display: none; }
  .seg-btn {
    flex: 0 0 auto; white-space: nowrap;
    padding: 11px 14px; font-size: .82rem;
    min-height: 44px;
    display: inline-flex; align-items: center; gap: 4px;
  }
  /* Tab-Wrap Karten-Padding kompakter */
  .tab-wrap { padding: 0; }
  .tab-wrap > .card, .tab-wrap .gc-card { padding: 14px 14px; }

  /* === Toast === */
  .toast {
    left: 8px !important;
    right: 8px !important;
    bottom: 12px !important;
    transform: none !important;
    max-width: none !important;
  }

  /* (iOS-Zoom-Vermeidung wurde ungated nach oben verschoben — siehe oben im File) */

  /* === TAB-/PILL-/SEG-Controls: alle Touch-Targets auf min 44px === */
  .sf-pill, .inq-filter, .hp-pill, .bh-preset, .tab,
  .seg-btn, .holiday-tab, .view-tab {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
    display: inline-flex; align-items: center; gap: 6px;
  }

  /* === Form-Label Größe bumpen (war .68rem, zu klein für outdoor) === */
  .fld > span, .fld-label, .gc-head, .eyebrow, .doc-status, .chip {
    font-size: .78rem;
  }

  /* === Toast nach rechts schieben, weil FAB unten links sitzt === */
  .toast {
    left: 8px !important; right: 80px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* === Resize-Handle für Textareas auf Mobile blocken === */
  textarea { resize: none; }

  /* === Reduzierter Backdrop-Filter für schwächere Mobile-CPUs === */
  .topbar, .modal-card, .notif-panel {
  }
}

@media (max-width: 480px) {
  /* Sehr enge Phones */
  .wr-mood-grid { grid-template-columns: repeat(2, 1fr); }
  .appt-type-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  #modalRoot .modal-actions { flex-direction: column-reverse; align-items: stretch; }
  #modalRoot .modal-actions .btn,
  #modalRoot .modal-actions button { width: 100%; }
}

@media (max-width: 420px) {
  /* Sehr kleines Display: Topbar zeigt nur Logo, Bell und Mini-Logout */
  .topbar .brand-block { display: none; }
  .topbar .logo-badge { width: 38px; height: 38px; }
  .btn-tb#logoutBtn {
    font-size: 0;
    padding: 8px;
    width: 44px;        /* Touch-Target ≥ 44pt */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-tb#logoutBtn::before {
    content: "↪";
    font-size: 18px;
    line-height: 1;
    font-weight:600;
  }
}

/* ============================================================
   PWA · Safe-Area-Insets für iPhone-Notch
   ============================================================ */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

html.pwa-standalone body { background: var(--cream); }
html.pwa-standalone .topbar {
  /* Status-Bar-Bereich respektieren (iPhone-Notch / Android-Status) */
  margin-top: max(8px, var(--safe-top));
  padding-left: max(6px, var(--safe-left));
  padding-right: max(6px, var(--safe-right));
}
html.pwa-standalone main {
  padding-bottom: max(80px, calc(var(--safe-bottom) + 24px));
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
}
html.pwa-standalone .toast {
  bottom: max(12px, calc(var(--safe-bottom) + 12px)) !important;
}

/* Beim Standalone-Modus: kein "browser-tab style" – logo-link soll nicht
   den Tab wechseln (er navigiert ja zur Startseite, was im Browser sinnvoll
   ist, aber in der App eher merkwürdig wirkt) */
html.pwa-standalone .topbar .logo-badge { pointer-events: none; cursor: default; }
html.pwa-standalone .topbar .logo-badge:hover { transform: none; }

/* iOS-Status-Bar-Hintergrund: wenn black-translucent, sehen wir den Body
   durch die Statusbar; das passt zu unserem cream-Bg */
@supports (padding: env(safe-area-inset-top)) {
  html.pwa-standalone {
    background: var(--cream);
  }
}

/* ============================================================
   PWA · INSTALL-BANNER
   ============================================================ */
.pwa-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--safe-bottom));
  z-index: 9000;
  background:var(--surface);
  border: 1px solid var(--line);
  border-radius:14px;
  padding: 16px 16px 14px;
  box-shadow:
    0 18px 40px -12px rgba(62,55,42,.28),
    0 4px 12px -4px rgba(62,55,42,.12);
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s;
  max-width: 520px;
  margin: 0 auto;
}
.pwa-banner.show { transform: translateY(0); opacity: 1; }

.pwa-banner-close {
  position: absolute;
  top: 4px; right: 6px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--bark-2);
  cursor: pointer;
  width: 44px; height: 44px;
  border-radius:50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.pwa-banner-close:hover { background: var(--cream); color: var(--bark); }

.pwa-banner-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
  padding-right: 24px;
}

.pwa-banner-icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius:12px;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 6px;
  display: grid; place-items: center;
}
.pwa-banner-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.pwa-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}
.pwa-banner-text strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--bark);
  line-height: 1.2;
  margin-bottom: 3px;
}
.pwa-banner-text small {
  display: block;
  font-size: .8rem;
  color: var(--bark-2);
  line-height: 1.4;
}

.pwa-banner-btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 0;
  border-radius:999px;
  background: var(--gold-deep);
  color: var(--on-accent);
  font-family: inherit;
  font-weight:600;
  font-size: .86rem;
  cursor: pointer;
  transition: background .2s, transform .15s;
  box-shadow: 0 4px 14px -4px rgba(92,110,84,.5);
}
.pwa-banner-btn:hover { background: var(--bark); }
.pwa-banner-btn:active { transform: scale(.96); }

/* iOS-Anleitung */
.pwa-banner-ios {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pwa-step {
  display: flex; align-items: center; gap: 12px;
  font-size: .86rem;
  color: var(--bark);
  line-height: 1.4;
}
.pwa-step-num {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius:50%;
  background: var(--gold-deep);
  color: var(--on-accent);
  font-weight:600;
  font-size: .8rem;
  display: grid; place-items: center;
}

.pwa-banner-foot {
  margin-top: 10px;
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}
.pwa-banner-link {
  background: transparent;
  border: 0;
  color: var(--bark-2);
  font-family: inherit;
  font-size: .78rem;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: .5px;
}
.pwa-banner-link:hover { color: var(--gold-deep); }

@media (max-width: 420px) {
  .pwa-banner { left: 8px; right: 8px; padding: 14px 14px 12px; }
  .pwa-banner-text strong { font-size: 1rem; }
  .pwa-banner-text small { font-size: .76rem; }
}

/* ============================================================
   PWA · Settings-Tab (App-Installation)
   ============================================================ */
.pwa-status-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 22px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius:14px;
}
.pwa-status-card.is-installed {
  background: var(--gold-pale);
  border-color: rgba(92,110,84,.32);
}
.pwa-status-icon {
  font-size: 28px;
  line-height: 1;
  flex: 0 0 auto;
}
.pwa-status-card strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--bark);
  margin-bottom: 4px;
}
.pwa-status-card small {
  display: block;
  font-size: .9rem;
  color: var(--bark-2);
  line-height: 1.55;
}

.pwa-howto p { font-size: .92rem; line-height: 1.55; }
.pwa-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pwa-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background:var(--surface);
  border: 1px solid var(--line-soft);
  border-radius:12px;
  padding: 12px 14px;
}
.pwa-steps .step-num {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius:50%;
  background: var(--gold-deep);
  color: var(--on-accent);
  font-weight:600;
  font-size: .86rem;
  display: grid; place-items: center;
}
.pwa-steps li div { font-size: .94rem; color: var(--bark); line-height: 1.5; }
.pwa-steps li div strong { font-weight: 600; color: var(--gold-deep); }

.pwa-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .pwa-benefits { grid-template-columns: 1fr; }
}
.pwa-benefits li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background:var(--surface);
  border: 1px solid var(--line-soft);
  border-radius:12px;
  padding: 12px 14px;
}
.pwa-benefit-ico {
  font-size: 24px;
  line-height: 1;
  flex: 0 0 auto;
}
.pwa-benefits strong {
  display: block;
  font-size: .94rem;
  font-weight:600;
  color: var(--bark);
  margin-bottom: 2px;
}
.pwa-benefits small {
  display: block;
  font-size: .82rem;
  color: var(--bark-2);
  line-height: 1.5;
}


/* ============================================================
   Wartungsmodus + Backup-UI (Settings-Tab "maintenance")
   ============================================================ */
.maintenance-card {
  background:var(--surface);
  border: 1px solid var(--line);
  border-radius:12px;
  padding: 18px 20px;
  transition: border-color .2s, background .2s;
}
.maintenance-card.is-active {
  border-color: #d77a4f;
  background: #FFF6EE;
}
.maintenance-status {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.maintenance-status > div:nth-child(2) {
  flex: 1 1 200px; min-width: 200px;
}
.maintenance-status strong { display: block; font-size: 1rem; color: var(--bark); margin-bottom: 3px; }
.maintenance-status small  { color: var(--bark-2); font-size: .82rem; line-height: 1.5; }
.maintenance-light {
  width: 14px; height: 14px; border-radius:50%;
  background: var(--sage); flex: none;
  box-shadow: 0 0 0 3px rgba(92,110,84,.18);
  position: relative;
}
.maintenance-card.is-active .maintenance-light {
  background: #d77a4f;
  box-shadow: 0 0 0 3px rgba(215,122,79,.22);
  animation: maintenancePulse 1.6s ease-in-out infinite;
}
@keyframes maintenancePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: .75; }
}
.maintenance-info {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: .85rem; line-height: 1.6; color: var(--bark-2);
}
.maintenance-info p { margin: 0 0 6px; }
.maintenance-info p:last-child { margin-bottom: 0; }
.maintenance-info strong { color: var(--bark); }

/* Backup-Info */
.backup-info-card {
  background:var(--surface);
  border: 1px solid var(--line);
  border-radius:12px;
  padding: 4px 0;
}
.backup-info-row {
  display: flex; gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.backup-info-row:last-child { border-bottom: 0; }
.backup-info-icon {
  font-size: 1.6rem; flex: none; line-height: 1;
}
.backup-info-row > div:nth-child(2) {
  flex: 1; min-width: 0;
}
.backup-info-row strong { display: block; font-size: .92rem; color: var(--bark); margin-bottom: 4px; }
.backup-info-row small  { color: var(--bark-2); font-size: .8rem; line-height: 1.55; }
.backup-cron {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--paper);
  border-radius:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: .8rem; color: var(--bark);
  white-space: pre-wrap; word-break: break-all;
  border-left: 3px solid var(--gold);
}

/* ============================================================
   g30 · DARK MODE — Komponenten-Feinschliff
   (Token-Swap oben deckt 95 % ab; hier nur Stellen mit fest
   verdrahteten Hell-Farben, die im Dunkeln stören würden.)
   ============================================================ */
:root[data-theme="dark"] body { background-image:none; }
:root[data-theme="dark"] .topbar .logo-badge { background:#F4F1E6; }
:root[data-theme="dark"] .detail-hero { background:var(--surface); }
:root[data-theme="dark"] .settings-nav-item:hover,
:root[data-theme="dark"] .cal-subnav-btn:hover { background:rgba(255,255,255,.06); }
:root[data-theme="dark"] .chip.docs-chip.docs-done    { color:#CFE0C8; }
:root[data-theme="dark"] .chip.docs-chip.docs-partial { background:rgba(255,231,184,.14); color:#E9CF9A; }
:root[data-theme="dark"] .chip.docs-chip.docs-pending { background:rgba(255,196,93,.14);  color:#EBC983; }
:root[data-theme="dark"] .birthday-widget,
:root[data-theme="dark"] .today-block.today-block-birthday { border-left:3px solid var(--amber); }
:root[data-theme="dark"] .bd-head { color:#E4C57C; }
:root[data-theme="dark"] .bd-card { background:rgba(255,255,255,.05); border-color:rgba(220,168,64,.18); }
:root[data-theme="dark"] .today-block.today-block-arrival { background:#26302A; }
:root[data-theme="dark"] .today-block.today-block-depart  { background:#332A20; }
:root[data-theme="dark"] .today-block.today-block-stay    { background:var(--surface); }
:root[data-theme="dark"] .today-list li.is-appt { background:#2E2A20; }
:root[data-theme="dark"] .inq-holiday-banner { background:#27302A; }
:root[data-theme="dark"] .inv-row.is-cancel { background:#2F2920; border-color:var(--surface-warm-line); }
:root[data-theme="dark"] .inv-row.is-cancel .inv-amount.neg, :root[data-theme="dark"] .inv-amount.neg { color:#E0A86C; }
:root[data-theme="dark"] .inv-tag-storno { background:rgba(255,231,184,.14); color:#E9CF9A; border-color:rgba(217,181,127,.4); }
:root[data-theme="dark"] .dh-block.dh-block-warn { background:#33291C; }
:root[data-theme="dark"] .dh-vacc.expired { background:rgba(178,85,85,.16); }
:root[data-theme="dark"] .dh-vacc.soon { background:rgba(184,137,62,.14); }
:root[data-theme="dark"] .dh-vacc-due.expired { color:#E09A9A; }
:root[data-theme="dark"] .dh-vacc-due.soon { color:#E9CF9A; }
:root[data-theme="dark"] .dh-vacc-due.ok { color:#B8CDB0; }
:root[data-theme="dark"] .dh-emergency-section h4 { color:#E09A9A; }
:root[data-theme="dark"] .stat.forecast { background:var(--surface); }
:root[data-theme="dark"] .stat.forecast .v { color:var(--gold-deep); }
:root[data-theme="dark"] .euer-stat.profit { background:var(--surface); }
:root[data-theme="dark"] .hc-day.busy { background:rgba(184,137,62,.16); }
:root[data-theme="dark"] .hc-day.full { background:rgba(178,85,85,.18); }
:root[data-theme="dark"] .dog-photo-avatar { background:#3A342A; border-color:var(--surface); }
:root[data-theme="dark"] .dog-gallery-tile { background:#2E2921; }
:root[data-theme="dark"] .sig-wrap { background:rgba(255,255,255,.04); }
:root[data-theme="dark"] .sig-wrap canvas { background:#F4F1E6; }
:root[data-theme="dark"] .mail-frame { background:#F4F1E6; color:#3E372A; }
:root[data-theme="dark"] .cal-month-cell.today,
:root[data-theme="dark"] .hc-day.today { background:var(--surface); }
:root[data-theme="dark"] .sf-pill .sf-n, :root[data-theme="dark"] .hp-pill span { background:rgba(255,255,255,.08); }
:root[data-theme="dark"] .inq-filter:not(.active) .inq-filter-count { background:rgba(255,255,255,.08); }
:root[data-theme="dark"] .modal-bg { background:rgba(0,0,0,.55); }
:root[data-theme="dark"] .modal-card::before { background:rgba(255,255,255,.22); }
:root[data-theme="dark"] .toast { background:rgba(60,55,45,.92); }
:root[data-theme="dark"] .toast.err { background:var(--rose); }
:root[data-theme="dark"] .seg { background:rgba(255,255,255,.05); }
:root[data-theme="dark"] .holiday-tabs, :root[data-theme="dark"] .cal-subnav { background:rgba(255,255,255,.05); }
:root[data-theme="dark"] .empty img, :root[data-theme="dark"] .today-view-empty img { filter:drop-shadow(0 12px 18px rgba(0,0,0,.4)) brightness(.92); }
:root[data-theme="dark"] .invoice-doc, :root[data-theme="dark"] .print-doc, :root[data-theme="dark"] .doc-page { color-scheme:light; }
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator { filter:invert(.8); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-image:none; }
  :root:not([data-theme="light"]) .topbar .logo-badge { background:#F4F1E6; }
  :root:not([data-theme="light"]) .detail-hero { background:var(--surface); }
  :root:not([data-theme="light"]) .settings-nav-item:hover,
  :root:not([data-theme="light"]) .cal-subnav-btn:hover { background:rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .chip.docs-chip.docs-done    { color:#CFE0C8; }
  :root:not([data-theme="light"]) .chip.docs-chip.docs-partial { background:rgba(255,231,184,.14); color:#E9CF9A; }
  :root:not([data-theme="light"]) .chip.docs-chip.docs-pending { background:rgba(255,196,93,.14);  color:#EBC983; }
  :root:not([data-theme="light"]) .birthday-widget,
  :root:not([data-theme="light"]) .today-block.today-block-birthday { border-left:3px solid var(--amber); }
  :root:not([data-theme="light"]) .bd-head { color:#E4C57C; }
  :root:not([data-theme="light"]) .bd-card { background:rgba(255,255,255,.05); border-color:rgba(220,168,64,.18); }
  :root:not([data-theme="light"]) .today-block.today-block-arrival { background:#26302A; }
  :root:not([data-theme="light"]) .today-block.today-block-depart  { background:#332A20; }
  :root:not([data-theme="light"]) .today-block.today-block-stay    { background:var(--surface); }
  :root:not([data-theme="light"]) .today-list li.is-appt { background:#2E2A20; }
  :root:not([data-theme="light"]) .inq-holiday-banner { background:#27302A; }
  :root:not([data-theme="light"]) .inv-row.is-cancel { background:#2F2920; border-color:var(--surface-warm-line); }
  :root:not([data-theme="light"]) .inv-row.is-cancel .inv-amount.neg, :root:not([data-theme="light"]) .inv-amount.neg { color:#E0A86C; }
  :root:not([data-theme="light"]) .inv-tag-storno { background:rgba(255,231,184,.14); color:#E9CF9A; border-color:rgba(217,181,127,.4); }
  :root:not([data-theme="light"]) .dh-block.dh-block-warn { background:#33291C; }
  :root:not([data-theme="light"]) .dh-vacc.expired { background:rgba(178,85,85,.16); }
  :root:not([data-theme="light"]) .dh-vacc.soon { background:rgba(184,137,62,.14); }
  :root:not([data-theme="light"]) .dh-vacc-due.expired { color:#E09A9A; }
  :root:not([data-theme="light"]) .dh-vacc-due.soon { color:#E9CF9A; }
  :root:not([data-theme="light"]) .dh-vacc-due.ok { color:#B8CDB0; }
  :root:not([data-theme="light"]) .dh-emergency-section h4 { color:#E09A9A; }
  :root:not([data-theme="light"]) .stat.forecast { background:var(--surface); }
  :root:not([data-theme="light"]) .stat.forecast .v { color:var(--gold-deep); }
  :root:not([data-theme="light"]) .euer-stat.profit { background:var(--surface); }
  :root:not([data-theme="light"]) .hc-day.busy { background:rgba(184,137,62,.16); }
  :root:not([data-theme="light"]) .hc-day.full { background:rgba(178,85,85,.18); }
  :root:not([data-theme="light"]) .dog-photo-avatar { background:#3A342A; border-color:var(--surface); }
  :root:not([data-theme="light"]) .dog-gallery-tile { background:#2E2921; }
  :root:not([data-theme="light"]) .sig-wrap { background:rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .sig-wrap canvas { background:#F4F1E6; }
  :root:not([data-theme="light"]) .mail-frame { background:#F4F1E6; color:#3E372A; }
  :root:not([data-theme="light"]) .cal-month-cell.today,
  :root:not([data-theme="light"]) .hc-day.today { background:var(--surface); }
  :root:not([data-theme="light"]) .sf-pill .sf-n, :root:not([data-theme="light"]) .hp-pill span { background:rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .inq-filter:not(.active) .inq-filter-count { background:rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .modal-bg { background:rgba(0,0,0,.55); }
  :root:not([data-theme="light"]) .modal-card::before { background:rgba(255,255,255,.22); }
  :root:not([data-theme="light"]) .toast { background:rgba(60,55,45,.92); }
  :root:not([data-theme="light"]) .seg { background:rgba(255,255,255,.05); }
  :root:not([data-theme="light"]) .holiday-tabs, :root:not([data-theme="light"]) .cal-subnav { background:rgba(255,255,255,.05); }
  :root:not([data-theme="light"]) .empty img, :root:not([data-theme="light"]) .today-view-empty img { filter:drop-shadow(0 12px 18px rgba(0,0,0,.4)) brightness(.92); }
  :root:not([data-theme="light"]) .invoice-doc, :root:not([data-theme="light"]) .print-doc, :root:not([data-theme="light"]) .doc-page { color-scheme:light; }
  :root:not([data-theme="light"]) input[type=date]::-webkit-calendar-picker-indicator { filter:invert(.8); }
}

/* Theme-Toggle in der Topbar */
.theme-toggle { font-size:1.05rem; }
.theme-toggle .tt-sun, .theme-toggle .tt-moon { display:none; line-height:1; }
:root[data-theme="light"] .theme-toggle .tt-moon { display:block; }
:root[data-theme="dark"] .theme-toggle .tt-sun { display:block; }
:root:not([data-theme]) .theme-toggle .tt-moon { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .tt-moon { display:none; }
  :root:not([data-theme]) .theme-toggle .tt-sun { display:block; }
}
/* Darstellungs-Wahl in den Einstellungen */
.theme-opts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.theme-opt { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px; border-radius:var(--r-md); border:1px solid var(--glass-line); background:var(--glass); box-shadow:var(--hi); cursor:pointer; text-align:center; transition:transform .14s, box-shadow .2s; }
.theme-opt:hover { transform:translateY(-2px); box-shadow:var(--hi), var(--sh-1); }
.theme-opt input { position:absolute; opacity:0; pointer-events:none; }
.theme-opt .to-ico { font-size:1.6rem; line-height:1; }
.theme-opt strong { font-size:.9rem; }
.theme-opt small { color:var(--bark-2); font-size:.74rem; }
.theme-opt:has(input:checked) { border-color:transparent; background:var(--surface); box-shadow:var(--hi), 0 0 0 2.5px var(--gold-deep); }
@media (max-width:600px) { .theme-opts { grid-template-columns:1fr; } }

/* ============================================================
   g30 · KPI-COCKPIT (Heute-Seite)
   ============================================================ */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 16px; }
.kpi-card {
  position:relative; display:flex; flex-direction:column; gap:4px; min-width:0;
  padding:14px 16px 12px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); box-shadow:none;
}
.kpi-card:hover { transform:none; box-shadow:none; border-color:var(--line-strong); }
.kpi-card.is-warn { border-color:rgba(184,137,62,.45); }
.kpi-card.is-full { border-color:rgba(178,85,85,.45); }
.kpi-label { font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--bark-2); display:flex; align-items:center; gap:6px; }
.kpi-label .kpi-ico { line-height:0; color:var(--sage); display:inline-grid; }
.kpi-row { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; min-width:0; }
.kpi-num { font-family:var(--serif); font-variant-numeric:tabular-nums; font-size:2.2rem; line-height:1; font-weight:500; color:var(--bark); letter-spacing:-.01em; white-space:nowrap; }
.kpi-num small { font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--bark-2); margin-left:2px; }
.kpi-sub { font-size:.74rem; color:var(--bark-2); line-height:1.35; min-height:1.1em; }
.kpi-spark { flex:none; width:64px; height:22px; color:var(--gold-deep); opacity:.9; }
.kpi-spark svg { width:100%; height:100%; display:block; overflow:visible; }
.kpi-spark polyline { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.kpi-spark .spark-fill { fill:currentColor; opacity:.12; stroke:none; }
.kpi-spark .spark-dot { fill:currentColor; }
.kpi-badge { flex:none; display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 9px; border-radius:999px; background:var(--gold-pale); color:var(--gold-deep); font-family:var(--sans); font-weight:600; font-size:.86rem; font-variant-numeric:tabular-nums; border:1px solid rgba(92,110,84,.22); }
.kpi-card.is-warn .kpi-badge { background:var(--amber-pale); color:var(--amber); border-color:rgba(184,137,62,.3); }
.kpi-bar { height:5px; border-radius:999px; background:rgba(120,130,110,.16); overflow:hidden; margin-top:4px; }
.kpi-bar i { display:block; height:100%; border-radius:999px; background:var(--accent-grad); transition:width .5s cubic-bezier(.2,.8,.3,1); }
.kpi-card.is-full .kpi-bar i { background:#c46a6a; }
.kpi-card.is-warn .kpi-bar i { background:#d0a45a; }
@media (max-width:900px) { .kpi-grid { gap:10px; } .kpi-num { font-size:2rem; } }
@media (max-width:600px) { .kpi-grid { grid-template-columns:repeat(2,1fr); gap:8px; } .kpi-card { padding:12px 13px 10px; } .kpi-num { font-size:1.8rem; } .kpi-spark { width:52px; } }

/* ============================================================
   g30 · LOADING SKELETONS
   ============================================================ */
@keyframes shimmer { from { background-position:-200% 0; } to { background-position:200% 0; } }
.skel { position:relative; overflow:hidden; border-radius:12px; background:var(--skeleton-a); }
.skel::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, var(--skeleton-b) 50%, transparent 100%);
  background-size:200% 100%; animation:shimmer 1.6s linear infinite;
}
.skel-line { height:12px; margin:8px 0; }
.skel-line.w40 { width:40%; } .skel-line.w60 { width:60%; } .skel-line.w80 { width:80%; }
.skel-card { padding:18px 20px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--hi), var(--sh-1); }
.skel-card .skel-num { height:32px; width:48%; border-radius:10px; margin-top:8px; }
.skel-row { display:flex; align-items:center; gap:11px; padding:10px; border-radius:var(--r-md); background:var(--glass-thin); }
.skel-row .skel-av { width:42px; height:42px; border-radius:50%; flex:none; }
.skel-row .skel-body { flex:1; }
.skel-status { text-align:center; padding:14px 10px 4px; color:var(--bark-2); font-size:.86rem; display:flex; flex-direction:column; align-items:center; gap:8px; }
.skel-status .skel-paw { line-height:0; color:var(--sage); display:inline-grid; animation:dogWiggle 1.6s ease-in-out infinite; display:inline-block; }
.skel-status .skel-slow { color:var(--amber); font-weight:600; font-size:.82rem; max-width:44ch; line-height:1.5; animation:fadeIn .4s both; }
.skel-detail { padding:40px 22px; text-align:center; }
.skel-detail .skel-line { margin-left:auto; margin-right:auto; }

/* ============================================================
   g30 · HUNDE-AVATARE (überall)
   ============================================================ */
.dog-avatar {
  display:inline-grid; place-items:center; flex:none; border-radius:50%; overflow:hidden;
  width:36px; height:36px; font-family:var(--serif); font-weight:600; line-height:1;
  color:var(--gold-deep); background:var(--surface);
  border:1px solid var(--glass-line); box-shadow:var(--hi), 0 0 0 2px rgba(126,144,121,.18), 0 2px 6px -2px rgba(62,55,42,.35);
  vertical-align:middle; user-select:none;
}
.dog-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.dog-avatar.has-photo { background:var(--surface); }
.dog-avatar.xs { box-shadow:var(--hi), 0 0 0 1.5px rgba(126,144,121,.22); }
.dog-avatars { display:inline-flex; align-items:center; }
.dog-avatars .dog-avatar { margin-left:-8px; border:2px solid var(--cream); box-shadow:0 2px 6px -2px rgba(62,55,42,.4); }
.dog-avatars .dog-avatar:first-child { margin-left:0; }
.hero-dogs { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.hero-dogs .dog-avatars .dog-avatar { border-color:rgba(255,255,255,.65); }
.hero-dogs small { color:var(--bark-2); font-size:.8rem; }
.cc-av.has-dog { background:var(--surface); overflow:visible; padding:0; }
.cc-av.has-dog .dog-avatar { width:42px; height:42px; box-shadow:var(--hi); }
.cc-av.has-dog .dot { z-index:1; }
.thing-row .dog-avatar { width:44px; height:44px; border-radius:12px; font-size:1.2rem; }
.walk-head .walk-who { display:flex; align-items:center; gap:10px; min-width:0; }
.hb-dog { display:flex; align-items:center; gap:8px; }
.hd-dog-line { display:flex; align-items:center; gap:10px; }
.today-list .dog-avatar, .today-row .dog-avatar { width:26px; height:26px; font-size:.72rem; }
.today-walk-card .dog-avatar { width:32px; height:32px; font-size:.8rem; }
.today-walk-info { flex-direction:row; align-items:center; gap:10px; }
.today-walk-info .twi-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.today-row { align-items:center; }
:root[data-theme="dark"] .dog-avatars .dog-avatar { border-color:var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dog-avatars .dog-avatar { border-color:var(--surface); } }

/* ============================================================
   g30 · MOTION — Stagger, View-Wechsel, Micro-Interactions
   ============================================================ */
@keyframes stagger-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.stagger > * { animation:stagger-in .24s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i,0) * 22ms); }
/* Ein Durchgang statt zwei gestapelter Animationen — fadeUp blendet jetzt selbst ein. */
main.view-enter > :not(.top-row) { animation:fadeUp .2s cubic-bezier(.16,1,.3,1) both; }
.btn, .btn-tb, .gbtn, .seg-btn, .view-tab, .sf-pill, .hp-pill, .inq-filter, .settings-nav-item { transition:transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .2s, background .2s, color .2s, filter .2s; }
.sf-pill:active, .hp-pill:active, .inq-filter:active, .settings-nav-item:active, .btn-tb:active, .view-tab:active { transform:scale(.98); }

/* Karten: der Hover-Lift wurde in g31 bewusst entfernt (flache, ruhige Welt) —
   die transform/box-shadow-Transitions liefen danach ins Leere. Statt Bewegung
   antworten die Karten jetzt über Fläche und Kante, was zur flachen Welt passt. */
.glass-card, .stat-card, .stat, .walk-card, .holiday-card, .inv-row, .today-block, .appt-card, .doc-item { transition:background-color .16s ease, border-color .16s ease; }
.glass-card:hover, .stat-card:hover, .stat:hover, .walk-card:hover, .inv-row:hover, .today-block:hover, .doc-item:hover { transform:none; box-shadow:none; }
@media (hover: hover) {
  .walk-card:hover, .inv-row:hover, .today-block:hover, .doc-item:hover, .appt-card:hover, .holiday-card:hover { border-color:var(--line-strong); }
}
@media (hover: none) {
  .glass-card:hover, .stat-card:hover, .stat:hover, .walk-card:hover, .inv-row:hover, .today-block:hover, .kpi-card:hover, .theme-opt:hover, .empty-state:hover { transform:none !important; }
}
/* Reduzierte Bewegung heißt weniger und sanfter — nicht „alles aus“.
   Vorher löschte ein pauschales * mit !important auch die Übergänge, die eine
   Aktion bestätigen (Druck, Fokus, Farbe, Zustand); die Oberfläche sprang dann
   hart um und Rückmeldung ging verloren. Jetzt fällt die räumliche Bewegung
   weg, Deckkraft und Farbe bleiben als Bedeutungsträger erhalten. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }

  /* Ortsveränderung raus — Einblenden bleibt */
  .stagger > *, main.view-enter > :not(.top-row), .tab-wrap {
    animation:fadeIn .16s ease both !important; animation-delay:0ms !important;
  }
  .modal-card { animation:fadeIn .16s ease both !important; }
  .toast { transition:opacity .2s !important; transform:translateX(-50%) !important; }

  /* Druck-/Hover-Verschiebungen: Zustand ja, Bewegung nein */
  .btn:active, .gbtn:active, .seg-btn:active, .sf-pill:active, .hp-pill:active,
  .inq-filter:active, .settings-nav-item:active, .btn-tb:active, .view-tab:active,
  .notif-bell:active, .emergency-btn:active, .pwa-banner-btn:active { transform:none !important; }

  /* Der Lichtstreifen wird zur ruhigen Markierung */
  .gs-flash::after { animation:none !important; background:none !important; }
  .gs-flash { animation:gsSettle 1.2s linear both !important; }

  /* Endlosschleifen anhalten */
  .skel::after { animation:none !important; }
  [class*="Pulse"], .notif-dot { animation:none !important; }
}

/* ============================================================
   g30 · EMPTY STATES mit Charakter
   ============================================================ */
.empty-state {
  text-align:center; padding:36px 22px 30px; margin:6px 0;
  background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius);
  box-shadow:none;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.empty-state.sm { padding:26px 16px 22px; }
.empty-state .es-ico { line-height:0; margin-bottom:8px; color:var(--sage); display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--sage-pale); }
.empty-state .es-ico:has(img) { width:auto; height:auto; background:transparent; }
.empty-state.sm .es-ico { font-size:2.1rem; }
.empty-state .es-ico img { width:84px; height:84px; object-fit:contain; display:block; }
.empty-state h3 { font-family:var(--serif); font-size:1.4rem; font-weight:500; color:var(--bark); margin:0; }
.empty-state.sm h3 { font-size:1.25rem; }
.empty-state p { color:var(--bark-2); font-size:.88rem; line-height:1.55; margin:0; max-width:44ch; }
.empty-state .es-cta { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

/* ============================================================
   g30 · ZAHLEN-TYPOGRAFIE (tabular-nums)
   ============================================================ */
.num, .kpi-num, .price, .euro, td.amount, .inv-amount, .price-line span:last-child, .price-card .big,
.hb-price, .hd-line strong, .hd-line.total strong, .wiz-total-line span:last-child, .wiz-total-sum strong, .wiz-sum-total strong,
.inv-items .c-qty, .inv-items .c-sum, .inv-items .c-price, .euer-table td, .data-table td, .stat .v, .abo-opt .pr, .extra-row .er-price,
.bh-stat-val, .cal-time, .appt-time, .sf-pill .sf-n, .hp-pill span, .view-tab-badge, .inq-filter-count, .today-list .t-time {
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.inv-items .inv-total-row .c-sum, .inv-items .inv-total-row td:last-child { font-family:var(--serif); font-size:1.35em; font-weight:600; letter-spacing:-.01em; }
.hb-price { font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--gold-deep); }
.hd-line.total strong, .wiz-sum-total strong { font-family:var(--serif); font-size:1.45rem; font-weight:600; }
.wiz-total-sum { font-size:1.5rem; }
.inv-amount { font-size:1.45rem; }

/* ============================================================
   g30 · MOBILE-TIERS (konsolidiert: ≤900px Tablet · ≤600px Mobile)
   Nur die Kernbereiche — Nav, Liste/Detail, KPI, Tabellen, Modals.
   ============================================================ */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; border-radius:12px; }
@media (max-width:900px) {
  .grid-2 { grid-template-columns:1fr; gap:14px; }
  .view-bar { width:auto; max-width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .view-bar::-webkit-scrollbar { display:none; }
  .view-tab { flex:0 0 auto; white-space:nowrap; }
  .modal-card.wide, .modal-card.wiz-xl { width:100%; }
}
@media (max-width:600px) {
  .modal-bg { padding:0; place-items:end center; }
  .modal-card { width:100%; max-width:100%; border-radius:14px 14px 0 0; margin:auto auto 0; }
  .modal-actions { border-radius:0; padding-bottom:max(18px, env(safe-area-inset-bottom)); }
  .modal-actions .btn { flex:1 1 auto; justify-content:center; }

  .empty-state { padding:28px 14px 22px; }
}

/* g30 · Dark-Mode: Widgets & Sonderflächen (generiert für manuell + Auto) */
:root[data-theme="dark"] .weather-widget { background:var(--sage-pale); border-color:var(--sage-line); }
:root[data-theme="dark"] .wt-title { color:var(--bark); }
:root[data-theme="dark"] .wt-day { background:rgba(255,255,255,.05); border-color:rgba(120,170,200,.18); }
:root[data-theme="dark"] .wt-day.heat { background:#33291C; }
:root[data-theme="dark"] .wt-day.storm { background:var(--surface-2); }
:root[data-theme="dark"] .dunning-widget { background:#332222; border-color:rgba(200,90,90,.35); }
:root[data-theme="dark"] .dn-head, :root[data-theme="dark"] .dn-body small { color:#E6A3A3; }
:root[data-theme="dark"] .dn-card { background:rgba(255,255,255,.05); border-color:rgba(200,90,90,.22); }
:root[data-theme="dark"] .review-widget { background:#26302A; }
:root[data-theme="dark"] .rv-head { color:var(--gold-deep); }
:root[data-theme="dark"] .rv-card { background:rgba(255,255,255,.05); }
:root[data-theme="dark"] .note-box { background:rgba(255,255,255,.04); }
:root[data-theme="dark"] .inq-reply-source { background:#2A261F; }
:root[data-theme="dark"] .capacity-day.full { background:#3A2424; }
:root[data-theme="dark"] .capacity-day.busy { background:#332C1C; }
:root[data-theme="dark"] .capacity-day.free { background:#26302A; }
:root[data-theme="dark"] .euer-stat.income { background:#26302A; }
:root[data-theme="dark"] .euer-stat.expense { background:#332A20; }
:root[data-theme="dark"] .euer-table tbody tr.sum { background:#2E2A1F; }
:root[data-theme="dark"] .er-hero { background:#33291C; }
:root[data-theme="dark"] .er-hero-empty { background:#2A2721; }
:root[data-theme="dark"] .er-warn-card { background:#3A2424; }
:root[data-theme="dark"] .er-phone-vet { background:var(--surface); }
:root[data-theme="dark"] .er-phone-vet .er-phone-ico { background:#3A342A; }
:root[data-theme="dark"] .er-phone-emergency { background:#33291C; }
:root[data-theme="dark"] .er-phone-emergency .er-phone-ico { background:#4A3A22; }
:root[data-theme="dark"] .er-phone-self { background:#26302A; }
:root[data-theme="dark"] .msg-card.msg-incoming .msg-ico { background:#26302A; }
:root[data-theme="dark"] .msg-card.msg-auto .msg-ico { background:#2E2A1F; }
:root[data-theme="dark"] .inv-cancel-badge { background:#4A3A22; color:#F0D6A0; border-color:#6A5636; }
:root[data-theme="dark"] .portal-hero, :root[data-theme="dark"] .bh-section { background:rgba(48,44,36,.82); }
:root[data-theme="dark"] .trips-stat { background:rgba(48,44,36,.85); }
:root[data-theme="dark"] .trip-type-tile.sel { background:var(--surface); }
:root[data-theme="dark"] .hd-detail-row:hover { background:rgba(255,255,255,.05); }
:root[data-theme="dark"] .maintenance-card.is-active { background:#33291C; }
:root[data-theme="dark"] .settings-nav-item:hover { background:rgba(255,255,255,.06); }
:root[data-theme="dark"] .hc-day.free { background:var(--surface); }
:root[data-theme="dark"] .dh-block, :root[data-theme="dark"] .dh-vacc { background:var(--surface); }
:root[data-theme="dark"] .cust-card.active { background:var(--surface); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .weather-widget { background:var(--sage-pale); border-color:var(--sage-line); }
  :root:not([data-theme="light"]) .wt-title { color:var(--bark); }
  :root:not([data-theme="light"]) .wt-day { background:rgba(255,255,255,.05); border-color:rgba(120,170,200,.18); }
  :root:not([data-theme="light"]) .wt-day.heat { background:#33291C; }
  :root:not([data-theme="light"]) .wt-day.storm { background:var(--surface-2); }
  :root:not([data-theme="light"]) .dunning-widget { background:#332222; border-color:rgba(200,90,90,.35); }
  :root:not([data-theme="light"]) .dn-head, :root:not([data-theme="light"]) .dn-body small { color:#E6A3A3; }
  :root:not([data-theme="light"]) .dn-card { background:rgba(255,255,255,.05); border-color:rgba(200,90,90,.22); }
  :root:not([data-theme="light"]) .review-widget { background:#26302A; }
  :root:not([data-theme="light"]) .rv-head { color:var(--gold-deep); }
  :root:not([data-theme="light"]) .rv-card { background:rgba(255,255,255,.05); }
  :root:not([data-theme="light"]) .note-box { background:rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .inq-reply-source { background:#2A261F; }
  :root:not([data-theme="light"]) .capacity-day.full { background:#3A2424; }
  :root:not([data-theme="light"]) .capacity-day.busy { background:#332C1C; }
  :root:not([data-theme="light"]) .capacity-day.free { background:#26302A; }
  :root:not([data-theme="light"]) .euer-stat.income { background:#26302A; }
  :root:not([data-theme="light"]) .euer-stat.expense { background:#332A20; }
  :root:not([data-theme="light"]) .euer-table tbody tr.sum { background:#2E2A1F; }
  :root:not([data-theme="light"]) .er-hero { background:#33291C; }
  :root:not([data-theme="light"]) .er-hero-empty { background:#2A2721; }
  :root:not([data-theme="light"]) .er-warn-card { background:#3A2424; }
  :root:not([data-theme="light"]) .er-phone-vet { background:var(--surface); }
  :root:not([data-theme="light"]) .er-phone-vet .er-phone-ico { background:#3A342A; }
  :root:not([data-theme="light"]) .er-phone-emergency { background:#33291C; }
  :root:not([data-theme="light"]) .er-phone-emergency .er-phone-ico { background:#4A3A22; }
  :root:not([data-theme="light"]) .er-phone-self { background:#26302A; }
  :root:not([data-theme="light"]) .msg-card.msg-incoming .msg-ico { background:#26302A; }
  :root:not([data-theme="light"]) .msg-card.msg-auto .msg-ico { background:#2E2A1F; }
  :root:not([data-theme="light"]) .inv-cancel-badge { background:#4A3A22; color:#F0D6A0; border-color:#6A5636; }
  :root:not([data-theme="light"]) .portal-hero, :root:not([data-theme="light"]) .bh-section { background:rgba(48,44,36,.82); }
  :root:not([data-theme="light"]) .trips-stat { background:rgba(48,44,36,.85); }
  :root:not([data-theme="light"]) .trip-type-tile.sel { background:var(--surface); }
  :root:not([data-theme="light"]) .hd-detail-row:hover { background:rgba(255,255,255,.05); }
  :root:not([data-theme="light"]) .maintenance-card.is-active { background:#33291C; }
  :root:not([data-theme="light"]) .settings-nav-item:hover { background:rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .hc-day.free { background:var(--surface); }
  :root:not([data-theme="light"]) .dh-block, :root:not([data-theme="light"]) .dh-vacc { background:var(--surface); }
  :root:not([data-theme="light"]) .cust-card.active { background:var(--surface); }
}
/* Mobile: Topbar hat keinen Platz für den Theme-Toggle — Wahl bleibt in Einstellungen → Darstellung */
@media (max-width:600px) { .topbar .theme-toggle { display:none; } }

/* ============================================================
   g30 · FEATURES — Globale Suche · Auswertung · Offline-Walks ·
   Wetter-Chips · Portal-Chat · Topbar-Buttons
   (ausschließlich Tokens → Dark-Mode automatisch)
   ============================================================ */

/* ---- Topbar: Suche + Chat-Indikator ---- */
.topbar .topbar-search { width:auto; padding:0 12px 0 11px; border-radius:999px; gap:7px; font-size:1rem; }
.topbar .tb-kbd { font:600 .62rem/1 var(--sans); letter-spacing:.04em; color:var(--bark-2); background:var(--input-bg); border:1px solid var(--glass-line-dk); border-radius:6px; padding:3px 5px; }
@media (max-width:760px){ .topbar .tb-kbd { display:none; } .topbar .topbar-search { width:40px; padding:0; } }
.topbar .chat-indicator { position:relative; color:var(--gold-deep); }
.topbar .chat-indicator .chat-ind-n {
  position:absolute; top:-3px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--rose); color:var(--on-accent); font-size:.62rem; font-weight:600; line-height:18px; text-align:center;
  border:1.5px solid var(--cream); box-shadow:0 2px 6px -2px rgba(178,85,85,.6);
}
.topbar .chat-indicator:not([hidden]) { animation:notifPulse 2.4s ease-in-out infinite; }
.chip.chat-chip { background:rgba(178,85,85,.12); color:var(--rose); border-color:rgba(178,85,85,.28); font-weight:600; }

/* ---- Globale Suche (⌘K) ---- */
.gs-overlay { position:fixed; inset:0; z-index:120; background:rgba(30,27,20,.42); display:flex; align-items:flex-start; justify-content:center; padding:clamp(48px,12vh,120px) 14px 24px; }
.gs-overlay[hidden] { display:none !important; }
body.gs-open { overflow:hidden; }
.gs-box { width:min(680px,100%); max-height:min(72vh,640px); display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); overflow:hidden; animation:gsIn .15s ease-out; }
@keyframes gsIn { from { opacity:0; transform:translateY(-8px) scale(.985); } to { opacity:1; transform:none; } }
.gs-inputrow { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--glass-line-dk); }
.gs-mag { line-height:0; color:var(--muted); display:inline-grid; }
.gs-input { flex:1; min-width:0; border:0; background:transparent; font:500 1.05rem/1.3 var(--sans); color:var(--bark); outline:none; }
.gs-input::placeholder { color:var(--muted); }
.gs-input::-webkit-search-cancel-button { -webkit-appearance:none; }
.gs-kbd, .gs-foot kbd { font:600 .62rem/1 var(--sans); letter-spacing:.04em; color:var(--bark-2); background:var(--input-bg); border:1px solid var(--glass-line-dk); border-radius:6px; padding:4px 6px; }
.gs-results { flex:1; overflow-y:auto; padding:6px 8px 10px; }
.gs-group { font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--bark-2); padding:12px 12px 4px; }
.gs-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; cursor:pointer; transition:background .12s; }
.gs-item.active { background:var(--sage-pale); box-shadow:none; }
.gs-av { display:inline-grid; place-items:center; width:32px; height:32px; }
.gs-ico { line-height:0; color:var(--sage-deep); display:inline-grid; place-items:center; width:32px; height:32px; border-radius:8px; background:var(--sage-pale); }
.gs-body { min-width:0; display:flex; flex-direction:column; }
.gs-body strong { font-size:.92rem; color:var(--bark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-body small { font-size:.75rem; color:var(--bark-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-chev { color:var(--muted); font-size:1.1rem; opacity:0; transition:opacity .12s; }
.gs-item.active .gs-chev { opacity:1; }
.gs-foot { display:flex; gap:18px; padding:9px 18px; border-top:1px solid var(--glass-line-dk); font-size:.7rem; color:var(--bark-2); }
.gs-foot span { display:inline-flex; align-items:center; gap:4px; }
/* „Hierher schauen“ — das eine gestaltete Bewegungsmoment des Dashboards.
   Vorher ein 1,6 s stehender Ring: so lang, dass es wie Ladezeit wirkte, und als
   Halo ohne Versatz reine Dekoration. Jetzt zieht ein Lichtstreifen einmal über
   die Zeile, in Leserichtung — die Aufmerksamkeit wandert mit, statt zu warten.
   Die Kante bleibt danach kurz markiert, damit die Zeile auffindbar bleibt. */
.gs-flash { position:relative; animation:gsSettle .9s cubic-bezier(.16,1,.3,1) both; }
.gs-flash::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(100deg, transparent 32%, var(--gold-wash, rgba(125,143,111,.5)) 50%, transparent 68%);
  background-size:260% 100%;
  /* Gleichmäßige Geschwindigkeit: eine stark ausklingende Kurve hätte den
     Streifen in den ersten 150 ms durchgezogen und danach stehen lassen. */
  animation:gsSweep .58s linear both;
}
/* Der Streifen wandert in Leserichtung (links → rechts) und hält seine Deckkraft,
   bis er durch ist — sonst ist er über der Zeile schon halb verblasst. */
@keyframes gsSweep {
  0%   { background-position:-60% 0;  opacity:0; }
  12%  { opacity:1; }
  70%  { opacity:1; }
  100% { background-position:160% 0;  opacity:0; }
}
@keyframes gsSettle { 0% { box-shadow:inset 0 0 0 1.5px var(--gold); } 70% { box-shadow:inset 0 0 0 1.5px var(--gold); } 100% { box-shadow:inset 0 0 0 0 transparent; } }
@media (max-width:560px){ .gs-foot { display:none; } .gs-overlay { padding-top:24px; } }

/* ---- Auswertung (Analytics) ---- */
.ana .seg.ana-period { display:inline-flex; gap:2px; padding:4px; background:var(--glass-thin); border:1px solid var(--glass-line); border-radius:12px; box-shadow:var(--hi); }
.ana .seg.ana-period .seg-btn { flex:none; padding:8px 14px; font-size:.82rem; }
.ana-kpis { margin-top:18px; }
.ana-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
@media (max-width:900px){ .ana-grid { grid-template-columns:1fr; } }
.ana-card { padding:16px 18px 14px; min-width:0; }
.ana-card canvas { display:block; width:100%; margin-top:8px; }
.ana-top-list { display:flex; flex-direction:column; gap:4px; margin-top:10px; }
.ana-top-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:7px 10px; border:0; background:transparent; border-radius:10px; font:inherit; color:var(--bark); cursor:pointer; text-align:left; transition:background .12s; }
.ana-top-row:hover { background:var(--surface); }
.ana-top-row b { font-family:var(--serif); font-size:1.05rem; color:var(--gold-deep); }
.tabular { font-variant-numeric:tabular-nums; }

/* ---- Offline-Walk-Reports ---- */
.offline-banner { display:flex; align-items:center; gap:12px; margin:14px 0 4px; padding:11px 16px; border-radius:14px;
  background:var(--surface-warm); border:1px solid var(--surface-warm-line); box-shadow:var(--hi), var(--sh-1); }
.offline-banner.is-offline { background:rgba(178,85,85,.08); border-color:rgba(178,85,85,.3); }
.offline-banner .ob-ico { line-height:0; color:var(--amber-text); display:inline-grid; }
.offline-banner.is-syncing .ob-ico { display:inline-block; animation:obSpin 1.2s linear infinite; }
@keyframes obSpin { to { transform:rotate(360deg); } }
.offline-banner .ob-text { flex:1; min-width:0; display:flex; flex-direction:column; }
.offline-banner .ob-text strong { font-size:.9rem; color:var(--bark); }
.offline-banner .ob-text small { font-size:.76rem; color:var(--bark-2); }
.offline-banner .ob-count { font-family:var(--serif); font-size:1.4rem; font-weight:600; color:var(--amber); padding:0 4px; }
.tag-pill.offline { background:var(--amber-pale); color:var(--amber); border-color:rgba(184,137,62,.35); }
@media (max-width:560px){ .offline-banner { flex-wrap:wrap; } .offline-banner .btn { width:100%; } }

/* ---- Wetter-Chips ---- */
.wx-strip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding:9px 12px; border-radius:12px;
  background:var(--glass-thin); border:1px solid var(--glass-line); box-shadow:var(--hi); }
.wx-strip[hidden] { display:none; }
.wx-strip-title { font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--bark-2); margin-right:4px; }
.wx-day { display:inline-flex; align-items:center; gap:6px; }
.wx-day-lbl { font-size:.74rem; font-weight:600; color:var(--bark-2); }
.wx-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:var(--surface); border:1px solid var(--glass-line-dk); font-size:.78rem; color:var(--bark); white-space:nowrap; box-shadow:var(--hi); }
.wx-chip .wx-ico { line-height:0; color:var(--sage-deep); display:inline-grid; }
.wx-chip .wx-ico .wx-svg { width:16px; height:16px; }
.wx-chip .wx-pop, .wx-chip .wx-hint { display:inline-flex; align-items:center; gap:3px; }
.wx-chip .wx-t small { color:var(--bark-2); font-size:.7rem; }
.wx-chip .wx-pop { font-size:.7rem; color:var(--bark-2); }
.wx-chip.rainy { border-color:rgba(100,150,200,.45); }
.wx-chip.rainy .wx-pop { color:var(--gold-deep); font-weight:600; }
.wx-chip .wx-hint { font-size:.7rem; font-weight:600; color:var(--amber); background:var(--amber-pale); border-radius:999px; padding:2px 7px; }
.wx-inline { margin:4px 0 6px; }
.wx-inline[hidden] { display:none; }
.wx-inline .wx-chip { font-size:.72rem; padding:3px 8px; }
.wx-inline-lg { margin-top:8px; }
.wx-inline-lg .wx-chip { font-size:.82rem; padding:5px 11px; }
@media print { .wx-chip .wx-hint { background:none; } }

/* ---- Portal-Chat (Dashboard) ---- */
.chat-card { padding:16px 18px 14px; }
.chat-thread { display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; padding:6px 2px 10px; scroll-behavior:smooth; }
.chat-day { display:flex; justify-content:center; margin:6px 0 2px; }
.chat-day span { font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bark-2); background:var(--input-bg); border-radius:999px; padding:3px 10px; }
.chat-msg { display:flex; align-items:flex-end; gap:8px; max-width:82%; }
.chat-msg.kunde { align-self:flex-start; }
.chat-msg.admin { align-self:flex-end; flex-direction:row-reverse; }
.chat-av-owner { width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; box-shadow:var(--hi), 0 2px 6px -2px rgba(62,55,42,.4); }
.chat-msg .dog-avatar { flex:none; }
.chat-bubble { padding:9px 13px; border-radius:14px; background:var(--surface); border:1px solid var(--glass-line-dk); box-shadow:var(--hi), 0 2px 8px -6px rgba(62,55,42,.3); min-width:0; }
.chat-msg.kunde .chat-bubble { border-bottom-left-radius:5px; }
.chat-msg.admin .chat-bubble { border-bottom-right-radius:5px; background:var(--accent-grad); color:var(--on-accent); border-color:transparent; }
.chat-msg.admin.legacy .chat-bubble { background:var(--gold-pale); color:var(--bark); border-color:rgba(92,110,84,.22); }
.chat-msg.kunde.unread .chat-bubble { box-shadow:0 0 0 2px var(--rose), var(--hi); }
.chat-text { font-size:.9rem; line-height:1.5; word-break:break-word; }
.chat-meta { font-size:.66rem; margin-top:4px; opacity:.72; }
.chat-msg.admin .chat-meta { text-align:right; }
.chat-msg .chat-new { color:var(--rose); }
.chat-reply { border-top:1px solid var(--glass-line-dk); padding-top:12px; margin-top:6px; }
.chat-reply textarea { width:100%; resize:vertical; min-height:56px; }
.chat-reply-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.chat-reply-row .grow { flex:1; }
@media (max-width:560px){ .chat-msg { max-width:94%; } }

/* ============================================================
   g31 · ICON-SYSTEM (assets/icons.js) + TYPO-SKALA + FEINSCHLIFF
   ============================================================ */
.ico { display:inline-block; vertical-align:-0.2em; flex:none; }
.ico-sm { width:16px !important; height:16px !important; } .ico-lg { width:22px !important; height:22px !important; }
.es-svg { width:36px; height:36px; vertical-align:0; }

/* Typo */
.page-head h1, .page-head h2, .cal-head h1, .cal-head h2, .inq-head h1, .inq-head h2,
.settings-h1, .today-view-header h1, .today-view-header h2 { font-family:var(--serif); font-weight:500; letter-spacing:0; }
.cal-head h1, .inq-head h1 { font-size:clamp(1.6rem,3vw,2.1rem); line-height:1.1; }
.cal-head { padding:4px 0 16px; }
.cal-head .sub, .inq-head .sub { font-size:.92rem; }
.section-title, .settings-group-title { font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.num, .kpi-num, .price, .euro, td.amount, .amount, .inv-amount, .stat .v, .hb-price, .tabular, .t-time, .cal-time, .appt-time,
.kpi-badge, .sb-badge, .view-tab-badge, .chip, .status-pill, table td { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.stat .v { font-weight:500; font-size:2rem; }
.stat .k { font-weight:600; letter-spacing:.06em; color:var(--muted); }
.alt-view { padding:var(--s2) 0 var(--s5); }
.today-view-header { padding:0 0 16px; }
.today-view-date { font-size:.95rem; }

/* Tabellen */
table { border-collapse:collapse; }
.data-table th, .inq-detail-table th, .euer-table th { font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.data-table td, .inq-detail-table td, .euer-table td { border-bottom:1px solid var(--line); }

/* Statische Icon-Container */
.sb-ico .ico, .kpi-ico .ico, .t-paw .ico, .gs-ico .ico, .wx-ico .ico, .ob-ico .ico, .es-ico .ico, .stat .ico .ico, .search .mag .ico { vertical-align:0; }
.today-walk-time .ico, .today-walk-hb .ico, .tag-pill .ico, .chip .ico, .wx-pop .ico, .wx-hint .ico, .search-hint .ico { vertical-align:-0.15em; }
.search-hint { opacity:.7; }
.hero-actions { flex-wrap:wrap; }
.hero-actions .gbtn .ico { width:18px; height:18px; }
.emergency-btn .ico { width:18px; height:18px; }
.wt-day-icon .ico, .wt-day-icon .wx-svg { width:24px; height:24px; color:var(--sage-deep); }
.today-block h2 .ico { width:16px; height:16px; }

/* Ruhige Hover-Zustände (kein Lift) */
.holiday-card:hover, .inq-card:hover, .cal-card:hover, .cal-day:hover, .theme-opt:hover, .quick-tile:hover, .appt-card:hover, .doc-item:hover, .hc-day:hover, .thing-row:hover { transform:none; box-shadow:none; border-color:var(--line-strong); }
.cal-month-cell:hover { box-shadow:none; }
.inq-card, .holiday-card, .inv-row, .cal-day, .cal-card, .doc-item, .appt-card, .walk-card, .quick-tile, .thing-row, .notif-panel, .composer-preview, .mail-frame { box-shadow:none; }
.notif-panel, .gs-box, .modal-card, .ms-card { box-shadow:var(--shadow-2); }
.settings-content, .settings-nav { box-shadow:none; border-color:var(--line); }
.settings-content { border-radius:var(--radius-lg); }
.chip { box-shadow:none; }
.status-pill .dot { width:7px; height:7px; }

/* Sichtbarkeits-Fixes */
.sb-item[hidden], .nav-item[hidden], .bb-item[hidden] { display:none !important; }
.topbar-search { display:inline-flex; align-items:center; white-space:nowrap; }

/* Split-View: Detailspalte darf nicht über den Viewport hinauswachsen */
.grid-2 { grid-template-columns:minmax(340px,400px) minmax(0,1fr); }
@media (max-width:1180px){ .grid-2 { grid-template-columns:minmax(300px,360px) minmax(0,1fr); } }
@media (max-width:1000px){ .grid-2 { grid-template-columns:minmax(0,1fr); } }
#detailPane, .grid-2 > * { min-width:0; }

/* Suchfeld: Platz für das Lupen-Icon (spezifischer als die generische Input-Regel) */
.search input[type=search] { padding-left:38px; }
@media print { .app-shell { display:block; } .app-main { padding:0; } }

/* ============================================================
   g32 · MODERNISIERUNG + EIN-SCHNITT-TYPOGRAFIE (Vercetti 400)
   ------------------------------------------------------------
   Vercetti liefert nur Regular. Fette Schnitte werden synthetisch
   erzeugt und "verschmieren" ab 700. Darum gilt hier:
     · genau ZWEI Stufen  → 400 (normal) und 600 (betont)
     · Hierarchie trägt GRÖSSE, FARBE, LAUFWEITE, VERSALIEN, RAUM
   Alles darunter ist der flache, moderne SaaS-Look.
   ============================================================ */

/* ---- 1 · Dokumente/Print/Mail: ebenfalls Manrope (einheitliche Schrift) ---- */
.doc, .doc-page, .invoice-doc, .print-doc, #printRoot,
.contract-preview-doc, .mail-preview, .mail-prev, .email-preview {
  --sans:"Manrope", system-ui, -apple-system, sans-serif;
  --serif:"Manrope", system-ui, -apple-system, sans-serif;
}
.doc, .doc-page, .invoice-doc, .print-doc, #printRoot,
.contract-preview-doc, .mail-preview, .mail-prev, .email-preview,
.doc strong, .doc b, .invoice-doc strong, .invoice-doc b,
#printRoot strong, #printRoot b { font-synthesis-weight:auto; }

/* ---- 2 · Globale Typo-Regeln ---- */
body {
  font-synthesis-weight:none;      /* keine Fake-Bold-Schmierer */
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:.002em;
}
strong, b { font-weight:600; color:var(--bark); }
h1, h2, h3, h4 { font-family:var(--serif); font-weight:600; letter-spacing:-.02em; color:var(--bark); }
h1 { font-size:1.9rem; line-height:1.12; }
h2 { font-size:1.35rem; line-height:1.18; }
h3 { font-size:1.1rem;  line-height:1.22; }
h4 { font-size:.95rem;  line-height:1.3; }
/* Mikro-Labels: Versalien + weite Laufweite statt Fettung */
.eyebrow, .gc-head, .stat .k, .kv dt, .sb-user .u-role,
.section-head .sh-eyebrow, .kpi-label, .tbl-head, .sb-brand .brand-sub {
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
/* Zahlen immer tabellarisch und in Primärfarbe */
.stat .v, .kpi-num, .quick-tile b, .price-card .big, .euer-stat .val,
td.num, th.num, .amount, .inv-amount, .money {
  font-variant-numeric:tabular-nums; color:var(--bark); letter-spacing:-.015em;
}
.muted, .tiny.muted, small.muted { color:var(--muted); }
.sub, .hero-sub, .cc-body .meta, .thing-row .info small { color:var(--bark-2); }

/* ---- 3 · Top-Row: Titel links, Aktionen rechts, kein Overlap ---- */
.top-row { gap:var(--s4); flex-wrap:nowrap; }
.top-row .page-title {
  font-size:1.6rem; font-weight:600; letter-spacing:-.02em; line-height:1.15;
  flex:1 1 auto; min-width:0;
}
.top-row .page-sub { font-size:.8rem; color:var(--muted); margin:2px 0 0; }
.top-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.top-actions > * { flex:none; }

/* Suche = "Input-artige" Pille, rein inline-flex, keine Absolutwerte */
.topbar-search {
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 10px 0 12px; min-width:0; width:auto;
  background:var(--input-bg); border:1px solid var(--line); border-radius:10px;
  color:var(--muted); font-family:inherit; font-size:.85rem; font-weight:400;
  cursor:pointer; white-space:nowrap; box-shadow:none;
  transition:background .15s, border-color .15s, color .15s;
}
.topbar-search:hover { background:var(--hover-surface); border-color:var(--line-strong); color:var(--bark); }
.topbar-search .ts-ico { display:grid; place-items:center; line-height:0; flex:none; }
.topbar-search .ts-label { flex:none; }
.topbar-search .tb-kbd {
  flex:none; margin:0 0 0 6px;
  font:400 .68rem/1 var(--sans); letter-spacing:.02em; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:4px 6px;
}
.top-actions .gbtn, .top-actions .notif-bell { width:40px; height:40px; border-radius:10px; }
@media (max-width:600px) {
  .topbar-search { width:40px; padding:0; justify-content:center; }
  .topbar-search .ts-label, .topbar-search .tb-kbd { display:none; }
}

/* ---- 4 · Sidebar ---- */
:root { --sidebar-w:248px; }
.sidebar { padding:var(--s4) var(--s3) var(--s3); gap:var(--s1); }
.sb-brand { gap:10px; padding:0 4px 14px; }
.sb-brand .logo-badge { width:36px; height:36px; border-radius:9px; }
.sb-brand .brand { font-size:1.05rem; font-weight:600; letter-spacing:-.01em; }
.sb-brand .brand-sub { font-size:.56rem; letter-spacing:.14em; margin-top:3px; }
.nav-item, .sb-item {
  min-height:44px; padding:0 10px; border-radius:10px;
  font-size:.88rem; font-weight:400; letter-spacing:0; gap:11px;
}
.nav-item.active, .sb-item.active {
  background:var(--sage-pale); color:var(--sage-deep); font-weight:600;
}
.nav-item.active::before { display:none; }   /* 3px-Marker entfällt */
.nav-item:hover, .sb-item:hover { background:var(--surface-2); }
.nav-item.active:hover { background:var(--sage-pale); }
.nav-item .sb-ico, .sb-item .sb-ico { width:20px; height:20px; }
.nav-item .sb-ico .ico, .sb-item .sb-ico .ico { width:20px; height:20px; }
.sb-foot { gap:var(--s1); padding-top:var(--s2); }
.sb-user { min-height:52px; }
.sb-user img { width:32px; height:32px; }
.sb-user .u-name { font-size:.84rem; font-weight:600; letter-spacing:-.01em; }
.sb-user .u-role { font-size:.58rem; }
.sb-badge { font-weight:600; }
body.sb-collapsed .nav-item, body.sb-collapsed .sb-item { padding:0; }

/* ---- 5 · Karten & Flächen ---- */
.card, .glass-card, .detail-hero { border-radius:14px; box-shadow:none; }
.card { padding:20px; }
.card.tight { padding:16px; }
.app-main { padding:0 clamp(16px,2.5vw,32px) 64px; }
@media (max-width:900px) { .app-main { padding:0 16px calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px) + 24px); } }
.panel { gap:var(--s5); }
.detail { gap:var(--s5); }

/* ---- 6 · KPI-Kacheln ---- */
.stats { grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:var(--s3); margin:0 0 var(--s5); }
@media (max-width:900px) { .stats { grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); } }
@media (max-width:480px) { .stats { grid-template-columns:1fr; } }
.stat { padding:16px 18px 18px; border-radius:14px; }
.stat .ico {
  position:static; display:grid; place-items:center; width:34px; height:34px; margin:0 0 12px;
  border-radius:50%; background:var(--sage-pale); color:var(--sage-deep); opacity:1;
}
.stat.accent .ico { background:color-mix(in srgb, var(--on-accent) 18%, transparent); color:var(--on-accent); }
.stat .k { font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.stat .v { font-size:1.9rem; font-weight:600; line-height:1.05; margin-top:6px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat .v small { font-size:.85rem; font-weight:400; color:var(--muted); }
.stat .hint { font-size:.74rem; color:var(--muted); margin-top:6px; font-weight:400; }
.stat.forecast .v { font-size:1.9rem; }

/* ---- 7 · Section-Header ---- */
.panel-head, .section-head {
  display:flex; align-items:center; gap:10px;
  padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:var(--s3);
}
.panel-head h3, .section-head h3 { font-size:1.05rem; font-weight:600; letter-spacing:-.015em; flex:1; min-width:0; }
.panel-head .ico, .section-head .ico { color:var(--sage-deep); flex:none; }
.gc-head { font-size:.68rem; color:var(--muted); margin-bottom:10px; }

/* ---- 8 · Segmented Controls ---- */
.seg-bar, .segmented, .view-tabs {
  display:inline-flex; gap:2px; padding:3px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line);
}
.seg-bar > button, .segmented > button, .view-tab {
  border:1px solid transparent; background:transparent; border-radius:9px;
  padding:7px 14px; font-family:inherit; font-size:.83rem; font-weight:400; color:var(--bark-2);
  cursor:pointer; white-space:nowrap; transition:background .15s, color .15s;
}
.seg-bar > button:hover, .segmented > button:hover, .view-tab:hover { color:var(--bark); }
.seg-bar > button.active, .segmented > button.active, .view-tab.active {
  background:var(--surface); border-color:var(--line); color:var(--bark);
  font-weight:600; box-shadow:var(--shadow-1);
}
.seg-btn { font-weight:400; font-size:.86rem; }
.seg-btn.active { font-weight:600; }

/* ---- 9 · Zeilen / Listen ---- */
.cust-card, .thing-row, .today-row, .inv-row, .hol-card, .inq-card {
  border-radius:10px; transition:background .15s;
}
.cust-card { min-height:60px; padding:10px 10px; box-shadow:none; }
.cust-card:hover { background:var(--surface-2); transform:none; box-shadow:none; }
.cust-card.active { background:var(--sage-pale); border-color:var(--sage-line); box-shadow:none; }
.cc-av { width:38px; height:38px; font-size:.92rem; font-weight:600; }
.cc-body h3 { font-size:.95rem; font-weight:600; letter-spacing:-.01em; color:var(--bark); }
.cc-body .meta { font-size:.74rem; color:var(--muted); }
.thing-row { min-height:60px; padding:12px 14px; background:var(--surface); border-color:var(--line); box-shadow:none; }
.thing-row:hover { background:var(--surface-2); }
.thing-row .av { width:38px; height:38px; border-radius:10px; box-shadow:none; }
.thing-row .info strong { font-size:.95rem; font-weight:600; letter-spacing:-.01em; }
.chip, .dog-tag, .status-pill { font-weight:600; }
.chip { font-size:.6rem; letter-spacing:.05em; }

/* ---- 10 · Tabellen ---- */
table th {
  font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--line); text-align:left; padding:9px 10px;
}
table td { border-bottom:1px solid var(--line-soft); padding:10px; font-size:.88rem; }
table td.num, table th.num, table td.right, table th.right { text-align:right; font-variant-numeric:tabular-nums; }
.table-scroll, .tbl-wrap { overflow:auto; }
.table-scroll thead th, .tbl-wrap thead th { position:sticky; top:0; z-index:2; background:var(--surface); }

/* ---- 11 · Buttons & Inputs ---- */
.btn { min-height:40px; border-radius:10px; font-weight:600; font-size:.86rem; letter-spacing:0; gap:8px; }
.btn-sm { min-height:32px; padding:5px 12px; font-size:.79rem; }
.gbtn { width:40px; height:40px; border-radius:10px; }
.gbtn.sm { width:32px; height:32px; }
/* Der Fokusring lag vorher als 3px --sage-pale auf der Fläche — 1,14:1 gegen Weiß,
   also praktisch unsichtbar; getragen wurde er nur von einer 1px-Linie darum.
   Jetzt ein echtes 2px-outline in --sage-deep: 4,99–5,51:1 im hellen, 7,23–9,10:1
   im dunklen Theme, und outline folgt der Elementform statt sie zu überdecken.
   Die Liste deckt jetzt alle Bedienelemente ab, nicht nur sieben. */
.btn:focus-visible, .gbtn:focus-visible, .nav-item:focus-visible, .sb-item:focus-visible,
.topbar-search:focus-visible, .seg-btn:focus-visible, .view-tab:focus-visible,
.bb-item:focus-visible, .modal-x:focus-visible, .cal-subnav-btn:focus-visible,
.settings-nav-item:focus-visible, .sf-pill:focus-visible, .hp-pill:focus-visible,
.inq-filter:focus-visible, .gs-item:focus-visible, .wiz-cust-card:focus-visible,
.m-inv-cust-item:focus-visible, .cust-card:focus-visible, .btn-tb:focus-visible,
.quick-tile:focus-visible, .thing-row:focus-visible, .doc-item:focus-visible,
.notif-bell:focus-visible, .ana-top-row:focus-visible, a:focus-visible {
  outline:2px solid var(--sage-deep); outline-offset:2px; box-shadow:none;
}
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border-radius:10px; border:1px solid var(--line); background:var(--input-bg);
  font-family:inherit; font-size:.88rem; color:var(--bark);
}
input:not([type=checkbox]):not([type=radio]), select { min-height:40px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  /* Gleicher Grund wie oben: der Ersatzring war nicht wahrnehmbar. */
  outline:2px solid var(--sage-deep); outline-offset:1px;
  border-color:var(--sage-deep); box-shadow:none;
}
label, .field-label, .form-label { font-size:.78rem; font-weight:600; color:var(--muted); letter-spacing:.01em; }

/* ---- 12 · Modals · Popover · Toast ---- */
.modal-card, .popover, .dropdown, .gs-panel, .notif-panel, .ms-card {
  border-radius:16px; box-shadow:var(--shadow-2); border:1px solid var(--line); background:var(--surface);
}
.modal-head h3, .modal-card h3 { font-size:1.15rem; font-weight:600; letter-spacing:-.02em; }
.toast {
  background:var(--bark); color:var(--cream); border-radius:12px; border:0;
  box-shadow:var(--shadow-2); font-size:.86rem; font-weight:400;
  display:flex; align-items:center; gap:9px;
}
:root[data-theme="dark"] .toast { background:#3A362C; color:var(--bark); }
/* Die Dark-Regel oben (Spezifität 0,3,0) schlug .toast.err (0,2,0): Fehler- und
   Erfolgsmeldung sahen im dunklen Theme identisch aus, der Unterschied lag nur
   noch im Icon. Jetzt gewinnt die Fehlerfarbe in beiden Themes wieder. */
:root[data-theme="dark"] .toast.err { background:var(--rose); color:var(--on-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toast.err { background:var(--rose); color:var(--on-accent); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { background:#3A362C; color:var(--bark); } }

/* ---- 13 · Widget-Tönungen zurück in die Palette ---- */
.weather-widget { background:var(--sage-pale); border-color:var(--sage-line); box-shadow:none; }
.wt-title { color:var(--bark); }
.birthday-widget { background:var(--amber-bg); border-color:rgba(184,137,62,.32); box-shadow:none; }
.bd-head { color:var(--amber-text); }
.dunning-widget { background:var(--rose-bg); border-color:rgba(178,85,85,.3); box-shadow:none; }
.dn-head { color:var(--rose-text); }
.review-widget { background:var(--surface-2); border-color:var(--line); box-shadow:none; }
.rv-head { color:var(--bark); }
.capacity-day.full { background:var(--rose-bg); border-color:rgba(178,85,85,.3); }
.capacity-day.busy { background:var(--amber-bg); border-color:rgba(184,137,62,.3); }
.capacity-day.free { background:var(--sage-pale); border-color:var(--sage-line); }
.euer-stat.income  { background:var(--sage-pale); border-color:var(--sage-line); }
.euer-stat.income .val  { color:var(--sage-deep); }
.euer-stat.expense { background:var(--amber-bg); border-color:rgba(184,137,62,.3); }
.euer-stat.expense .val { color:var(--amber-text); }
.euer-stat.profit  { background:var(--surface); border-color:var(--sage-deep); }
.euer-stat.profit.negative .val { color:var(--rose-text); }
.euer-table tbody tr.sum { background:var(--surface-2); }
.euer-table .pos { color:var(--sage-deep); } .euer-table .neg { color:var(--rose-text); }
.dh-emergency-section h4 { color:var(--rose-text); }
.er-phone-emergency { background:var(--rose-bg); }
.er-phone-emergency .er-phone-ico { background:rgba(178,85,85,.2); color:var(--rose-text); }
.inv-tag-storno { background:var(--surface-2); color:var(--muted); border-color:var(--line-strong); }
.note-box { background:var(--surface-2); border-color:var(--line); }
.quick-tile { background:var(--surface); border-color:var(--line); box-shadow:none; border-radius:12px; }
.quick-tile:hover { transform:none; background:var(--surface-2); box-shadow:none; }
.quick-tile b { font-size:1.5rem; font-weight:600; letter-spacing:-.02em; }
.price-card { background:var(--sage-deep); box-shadow:none; border-radius:14px; }
.price-card .big { font-weight:600; letter-spacing:-.025em; }

/* Dark-Mode: die alten Sonderfarben der Widgets zurücknehmen */
:root[data-theme="dark"] .weather-widget,
:root[data-theme="dark"] .dunning-widget,
:root[data-theme="dark"] .review-widget,
:root[data-theme="dark"] .birthday-widget,
:root[data-theme="dark"] .capacity-day.full,
:root[data-theme="dark"] .capacity-day.busy,
:root[data-theme="dark"] .capacity-day.free,
:root[data-theme="dark"] .euer-stat.income,
:root[data-theme="dark"] .euer-stat.expense,
:root[data-theme="dark"] .euer-table tbody tr.sum,
:root[data-theme="dark"] .er-phone-emergency { background:inherit; }
:root[data-theme="dark"] .weather-widget { background:var(--sage-pale); border-color:var(--sage-line); }
:root[data-theme="dark"] .birthday-widget { background:var(--amber-bg); border-color:rgba(221,180,107,.3); }
:root[data-theme="dark"] .dunning-widget { background:var(--rose-bg); border-color:rgba(224,154,154,.3); }
:root[data-theme="dark"] .review-widget { background:var(--surface-2); border-color:var(--line); }
:root[data-theme="dark"] .capacity-day.full { background:var(--rose-bg); }
:root[data-theme="dark"] .capacity-day.busy { background:var(--amber-bg); }
:root[data-theme="dark"] .capacity-day.free { background:var(--sage-pale); }
:root[data-theme="dark"] .euer-stat.income { background:var(--sage-pale); }
:root[data-theme="dark"] .euer-stat.expense { background:var(--amber-bg); }
:root[data-theme="dark"] .euer-table tbody tr.sum { background:var(--surface-2); }
:root[data-theme="dark"] .er-phone-emergency { background:var(--rose-bg); }
:root[data-theme="dark"] .inv-tag-storno { background:var(--surface-2); color:var(--muted); border-color:var(--line-strong); }
:root[data-theme="dark"] .sb-brand .logo-badge { background:var(--surface-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .weather-widget { background:var(--sage-pale); border-color:var(--sage-line); }
  :root:not([data-theme="light"]) .birthday-widget { background:var(--amber-bg); border-color:rgba(221,180,107,.3); }
  :root:not([data-theme="light"]) .dunning-widget { background:var(--rose-bg); border-color:rgba(224,154,154,.3); }
  :root:not([data-theme="light"]) .review-widget { background:var(--surface-2); border-color:var(--line); }
  :root:not([data-theme="light"]) .capacity-day.full { background:var(--rose-bg); }
  :root:not([data-theme="light"]) .capacity-day.busy { background:var(--amber-bg); }
  :root:not([data-theme="light"]) .capacity-day.free { background:var(--sage-pale); }
  :root:not([data-theme="light"]) .euer-stat.income { background:var(--sage-pale); }
  :root:not([data-theme="light"]) .euer-stat.expense { background:var(--amber-bg); }
  :root:not([data-theme="light"]) .euer-table tbody tr.sum { background:var(--surface-2); }
  :root:not([data-theme="light"]) .er-phone-emergency { background:var(--rose-bg); }
  :root:not([data-theme="light"]) .inv-tag-storno { background:var(--surface-2); color:var(--muted); border-color:var(--line-strong); }
  :root:not([data-theme="light"]) .sb-brand .logo-badge { background:var(--surface-2); }
}

/* ---- 14 · Bewegung ≤180 ms ----
   Diese Regel setzte für alle genannten Elemente eine einzige transition-duration.
   Für .btn & Co. überschrieb sie damit die abgestufte Zeitgebung der Kurzschreibweise
   (Druck .12s, Farbe .2s) und plättete alles auf einen Wert — Timing kann so nicht
   mehr ausdrücken, wie weit und wie folgenreich eine Änderung ist.
   Für die fünf Selektoren darunter war sie dagegen die einzige Übergangsquelle,
   deshalb bekommen sie jetzt eigene, benannte Eigenschaften statt `all`. */
.nav-item, .sb-item, .cust-card, .thing-row, .topbar-search {
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Der zweite, pauschale reduced-motion-Block stand im Widerspruch zum Block
   weiter oben und überschrieb ihn (spätere Regel gleicher Spezifität) —
   entfernt, die differenzierte Fassung gilt. */

/* ============================================================
   g32 · Icon-Ausrichtung (Emoji → SVG-Icons)
   ============================================================ */
.ico { vertical-align:-0.16em; flex:none; }
.gc-head .ico, .bd-head .ico, .dn-head .ico, .rv-head .ico, .wt-title .ico,
.today-head-row .ico, .panel-head .ico, .section-head .ico,
.tag-pill .ico, .chip .ico, .dog-tag .ico, .status-pill .ico,
.walk-meta .ico, .btn .ico, .appt-hero-eyebrow .ico, .trip-type-chip .ico,
.wiz-step-label .ico, .settings-nav-ico .ico, .msg-ico .ico, .audit-icon .ico,
.notif-item-ico .ico, .hp-pill .ico, .inv-tag .ico, .lbl .ico { vertical-align:-0.16em; }
.qt-ico, .appt-type-icon, .appt-icon, .fi, .dh-block-head .ico, .wr-dog-icon,
.wr-upload-ico, .ud-icon, .backup-info-icon, .wiz-dog-icon, .wiz-cap-icon,
.dh-hero-icon, .er-hero-avatar, .er-gps-pin, .er-phone-action, .bd-icon,
.pwa-status-icon, .pwa-benefit-ico, .trip-type-tile-icon, .cal-count,
.t-paw, .inq-hb-date-ico, .trip-cust-search-icon, .to-ico {
  display:inline-flex; align-items:center; justify-content:center; line-height:0;
}
.qt-ico .ico, .appt-type-icon .ico, .appt-icon .ico, .fi .ico { color:var(--sage-deep); }
.msg-ico, .audit-icon, .notif-item-ico { display:inline-flex; align-items:center; justify-content:center; color:var(--sage-deep); }

/* Stimmung im Walk-Report */
.wr-mood-emoji { display:inline-flex; line-height:0; color:var(--sage-deep); }
.walk-mood { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color:var(--bark-2); }
.walk-mood .ico { color:var(--sage-deep); }

/* Sterne-Bewertung */
.star-rating { display:inline-flex; align-items:center; gap:2px; }
.star-rating .star-on  { color:var(--amber); fill:currentColor; }
.star-rating .star-off { color:var(--line-strong); }

/* Kapazitäts-Legende */
.cap-legend { display:inline-flex; align-items:center; gap:5px; }
.cap-legend .lg { width:9px; height:9px; border-radius:50%; display:inline-block; }
.cap-legend .lg.free { background:var(--sage-deep); }
.cap-legend .lg.busy { background:var(--amber); }
.cap-legend .lg.full { background:var(--rose); }

/* Toast-Icon */
.toast .ti { display:inline-flex; align-items:center; line-height:0; flex:none; }

/* ============================================================
   TYPOGRAFIE-HIERARCHIE (Manrope, echte Schnitte 300-800)
   Der vorherige Ein-Schnitt-Font hatte alles auf 600 normiert —
   hier bekommen Titel/Zahlen wieder echtes Gewicht und Kontur.
   ============================================================ */
#pageTitle, .page-title, h1 {
  font-weight:800; letter-spacing:-.022em;
}
h2, .settings-h2, .panel-head h3, .sec-title, .gc-head, .wt-title {
  font-weight:700; letter-spacing:-.012em;
}
.kpi-num, .stat .v, .bh-stat-num, .hb-price, .price-total, .inv-total,
.wiz-total-sum strong, .v, .di-name, .cust-name, .hero-name {
  font-weight:800; letter-spacing:-.015em; font-variant-numeric:tabular-nums;
}
.nav-item { font-weight:600; }
.nav-item.active { font-weight:700; }
.btn, .btn-soft, .btn-ghost, .seg-btn.active { font-weight:700; }
.muted, .tiny, .sub, .wt-day-label, .kpi-label { font-weight:500; }

/* ============================================================
   Safari-Fix: die statisch im HTML stehenden Sidebar-Knoten
   (Fußzeile) werden — anders als die per render() neu gebauten
   Nav-Einträge — nie ersetzt; Safari löst `var()`-Farben dort
   beim Theme-Wechsel nicht neu auf. Deshalb hier ausnahmsweise
   feste Werte je Theme (identisch mit --bark-2 / --bark / --sage-deep).
   ============================================================ */
:root[data-theme="light"] .nav-item, :root[data-theme="light"] .sb-item { color:#6B6655; }
:root[data-theme="light"] .nav-item:hover, :root[data-theme="light"] .sb-item:hover { color:#3E372A; }
:root[data-theme="light"] .nav-item.active { color:var(--sage-deep); }
:root[data-theme="dark"] .nav-item, :root[data-theme="dark"] .sb-item { color:#C4BCA8; }
:root[data-theme="dark"] .nav-item:hover, :root[data-theme="dark"] .sb-item:hover { color:#EDE8DA; }
:root[data-theme="dark"] .nav-item.active { color:#AEC0A6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .nav-item, :root:not([data-theme]) .sb-item { color:#C4BCA8; }
  :root:not([data-theme]) .nav-item:hover, :root:not([data-theme]) .sb-item:hover { color:#EDE8DA; }
  :root:not([data-theme]) .nav-item.active { color:#AEC0A6; }
}

/* ============================================================
   Visuell versteckt, aber bedienbar
   ============================================================
   display:none entfernt ein Eingabefeld vollständig — aus der Tab-Reihenfolge
   UND aus dem Barrierefreiheitsbaum. Die vier Regeln unten versteckten so
   Radios und Checkboxen hinter klickbaren Labels: mit der Maus bedienbar,
   mit der Tastatur gar nicht. Stattdessen wird das Feld jetzt auf einen
   unsichtbaren Punkt reduziert, bleibt aber fokussierbar; der Fokus wird auf
   dem sichtbaren Label dargestellt. */
.day-choose input, .mood-pill input, .settings-radio input, .wiz-tab-radio input {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  border:0; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.day-choose input:focus-visible + *, .mood-pill input:focus-visible + *,
.settings-radio input:focus-visible + *, .wiz-tab-radio input:focus-visible + * {
  outline:2px solid var(--sage-deep); outline-offset:2px;
}
.day-choose label:has(input:focus-visible), .mood-pill:has(input:focus-visible),
.settings-radio:has(input:focus-visible), .wiz-tab-radio:has(input:focus-visible) {
  outline:2px solid var(--sage-deep); outline-offset:2px;
}

/* ============================================================
   Berührflächen auf Mobil (WCAG 2.5.8 · mindestens 24×24, Ziel 44×44)
   ============================================================
   Gemessen bei 375 px waren fünf Bedienelemente zu klein: der Schließen-Button
   jedes Modals (36×36), die Glocke (40×40 bzw. 36×36), das Suchfeld (40×40),
   die Tagespreis-Eingabe (70×40) und die Extras-Checkbox (19×19).
   Die Fläche wächst, die sichtbare Gestaltung bleibt. */
@media (max-width:900px) {
  .modal-x { width:44px; height:44px; right:8px; top:8px; }
  .notif-bell { width:44px; height:44px; }
  .topbar .topbar-search { min-width:44px; min-height:44px; }
  .wiz-perday-input { min-height:44px; }
  /* Checkbox bleibt optisch klein, bekommt aber über das Label eine volle
     Trefferfläche — deshalb Padding am Zeilencontainer statt am Kästchen. */
  .extra-row { min-height:44px; }
  .extra-row label, .extra-row .er-cb-wrap { min-height:44px; display:flex; align-items:center; }
  .extra-row .er-cb { width:22px; height:22px; }
}

/* ============================================================
   Freie Texteingaben umbrechen
   ============================================================
   Ein einzelner langer String ohne Leerzeichen (typisch: eine URL in den
   internen Notizen) zog bei 375 px das GESAMTE Dokument auf 579 px — die
   ganze Seite scrollte seitlich. Betroffen waren alle Felder, die
   nutzereigenen Text unverändert ausgeben. */
.note-box, .msg-body, .care-plan, .inq-msg, .dh-block-body,
.doc-note, .hb-note, .wr-note, .trip-notes, .es-text,
dd[style*="pre-line"], [style*="pre-wrap"], [style*="pre-line"] {
  overflow-wrap:anywhere; word-break:break-word; min-width:0;
}

/* ============================================================
   Sprungmarke zum Hauptinhalt
   ============================================================
   Sichtbar nur bei Tastaturfokus; ohne sie musste man die komplette
   Seitenleiste durchtabben, bevor der Inhalt erreichbar war. */
.skip-link {
  position:absolute; left:8px; top:-100px; z-index:1000;
  background:var(--sage-fill); color:var(--on-accent);
  padding:10px 16px; border-radius:0 0 10px 10px;
  font-weight:600; font-size:.88rem; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus { top:0; outline:2px solid var(--sage-deep); outline-offset:2px; }

/* ============================================================
   Nur für Screenreader
   ============================================================
   Im Projekt gab es bisher keine solche Klasse, weshalb an mehreren Stellen
   display:none benutzt wurde — das entfernt den Inhalt jedoch vollständig. */
.sr-only {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  border:0; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.sr-only:focus, .sr-only:active { position:static; width:auto; height:auto; margin:0; clip:auto; clip-path:none; }

/* ============================================================
   Scroll-Listen: Elemente dürfen nicht gestaucht werden
   ============================================================
   Diese Container sind Spalten-Flexboxen mit begrenzter Höhe. Flex-Elemente
   haben dort standardmäßig flex-shrink:1 — sobald der Inhalt die Höhe
   übersteigt, werden die Einträge zusammengedrückt (Kundenkarte: 70 → 60 px)
   und ihr Inhalt läuft sichtbar in den nächsten Eintrag hinein. Genau das war
   die Überlagerung von Status-Zeile und Name in der Kundenliste.
   overflow-y:auto verhindert das nicht; nur flex-shrink:0 tut es. */
.list-scroll > *,
.sb-nav > *,
.m-inv-cust-list > *,
.wiz-cust-list > *,
.chat-thread > * {
  flex-shrink: 0;
}