/* mitglieder.css – ausgelagertes Stylesheet
   Wird vom Browser zwischengespeichert und muss nicht bei jedem
   Seitenaufruf neu geladen werden. Reihenfolge der Regeln ist
   identisch zur früheren Einbettung. */



*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Nunito Sans',sans-serif;font-size:15px;background:#f0f2f5;color:#1a1a1a;overflow-x:hidden}
:root{
  --g:#84BC34;--gd:#6aa228;--gl:#f0f8e5;
  --dark:#1a1a1a;--g1:#f0f2f5;--g2:#e8eaed;--g3:#d4d4d4;--g4:#8a8a8a;--g5:#374151;
  --w:#fff;--red:#e11d48;--blue:#0057a8;--orange:#f97316;--amber:#f59e0b;
  --r:10px;--rx:18px;--sh:0 2px 8px rgba(0,0,0,.08);--shm:0 6px 24px rgba(0,0,0,.12);
  --nb:250px;
}
a{color:inherit;text-decoration:none}ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;width:100%;padding:9px 13px;border:1.5px solid var(--g2);border-radius:var(--r);font-size:.9rem;color:var(--dark);background:var(--w);outline:none;transition:.2s}
input:focus,select:focus,textarea:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(132,188,52,.12)}
textarea{resize:vertical;min-height:80px}
label{font-size:.82rem;font-weight:700;color:var(--g5);display:block;margin-bottom:4px}
.fg{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Auth screen */
#authScreen{display:flex;align-items:center;justify-content:center;min-height:100%;background:linear-gradient(140deg,#1a2a0a,#2a4d18);padding:24px}
.auth-card{background:var(--w);border-radius:var(--rx);padding:36px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.auth-logo-m{width:42px;height:42px;background:var(--g);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:1rem}
.auth-logo-t{font-weight:900;font-size:1.05rem;line-height:1.2}
.auth-logo-t span{color:var(--g)}
.auth-err{background:#fee2e2;border:1px solid #fca5a5;color:#b91c1c;padding:10px 14px;border-radius:var(--r);font-size:.85rem;margin-bottom:14px;display:none}
.auth-card h2{font-size:1.3rem;margin-bottom:6px}
.auth-card p{font-size:.85rem;color:var(--g4);margin-bottom:20px}

/* App layout */
#app{display:none;min-height:100%}
#app.active{display:flex;flex-direction:column}
.app-topnav{background:var(--dark);padding:0;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.tn-inner{display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 20px;gap:12px}
.tn-logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tn-logo-m{width:30px;height:30px;background:var(--g);border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.82rem;color:#fff}
.tn-logo-t{font-weight:900;font-size:.92rem;color:#fff}
.tn-logo-t span{color:var(--g)}
.tn-pts{display:flex;align-items:center;gap:6px;background:rgba(132,188,52,.15);border:1px solid rgba(132,188,52,.3);border-radius:50px;padding:4px 12px;font-size:.82rem;font-weight:800;color:#a3d55b;flex-shrink:0}
.tn-user{font-size:.82rem;color:rgba(255,255,255,.65);font-weight:600;flex-shrink:0}
.tn-logout{font-size:.8rem;color:rgba(255,255,255,.4);font-weight:700;padding:5px 10px;border-radius:6px;transition:.18s;cursor:pointer;flex-shrink:0}
.tn-logout:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
.app-tabs{background:var(--dark2,#252525);border-bottom:1px solid rgba(255,255,255,.07);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.app-tabs::-webkit-scrollbar{display:none}
.at-list{display:flex;align-items:center;padding:0 16px;gap:0;min-width:max-content}
.at-item{display:flex;align-items:center;gap:7px;padding:13px 16px;font-size:.87rem;font-weight:700;color:rgba(255,255,255,.45);cursor:pointer;border-bottom:2.5px solid transparent;transition:.18s;white-space:nowrap}
.at-item:hover{color:rgba(255,255,255,.8)}
.at-item.active{color:var(--g);border-bottom-color:var(--g)}
.app-content{flex:1;max-width:1100px;width:100%;margin:0 auto;padding:24px 20px}

/* Vacation banner */
.vac-banner{background:linear-gradient(135deg,#92400e,#78350f);color:#fef3c7;padding:14px 20px;font-size:.9rem;font-weight:700;border-radius:var(--r);margin-bottom:20px;display:flex;align-items:center;gap:10px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 20px;border-radius:50px;font-weight:700;font-size:.87rem;border:2px solid transparent;cursor:pointer;transition:all .18s;white-space:nowrap}
.btn-g{background:var(--g);color:#fff;border-color:var(--g)}.btn-g:hover{background:var(--gd)}
.btn-outline{background:transparent;color:var(--g);border-color:var(--g)}.btn-outline:hover{background:var(--gl)}
.btn-dark{background:var(--dark);color:#fff}.btn-dark:hover{opacity:.85}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#c01039}
.btn-blue{background:var(--blue);color:#fff}
.btn-ghost{background:var(--g1);color:var(--g5);border-color:var(--g2)}.btn-ghost:hover{background:var(--g2)}
.btn-sm{padding:6px 14px;font-size:.8rem}
.btn-xs{padding:4px 10px;font-size:.75rem}
.btn-full{width:100%;justify-content:center}

/* Cards */
.card{background:var(--w);border-radius:var(--rx);border:1.5px solid var(--g2);box-shadow:var(--sh);overflow:hidden}
.card-h{padding:16px 20px;border-bottom:1px solid var(--g2);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-h h3{font-size:.95rem;margin:0;font-weight:800}
.card-b{padding:20px}
.card-b-0{padding:0}

/* Section heading */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.sec-head h2{font-size:1.3rem;margin:0}

/* Badge */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:50px;font-size:.73rem;font-weight:700;white-space:nowrap}
.badge-g{background:var(--gl);color:var(--gd)}.badge-r{background:#fee2e2;color:#b91c1c}
.badge-o{background:#fff3e5;color:#c2540a}.badge-b{background:#e5f0ff;color:var(--blue)}
.badge-am{background:#fef3c7;color:#78350f}.badge-grey{background:var(--g2);color:var(--g5)}

/* Alert */
.alert{border-radius:var(--r);padding:13px 18px;margin-bottom:16px;display:flex;align-items:flex-start;gap:12px;font-size:.88rem}
.alert-ok{background:var(--gl);border:1px solid #a3d563;color:#14532d}
.alert-warn{background:#fef3c7;border:1px solid #fcd34d;color:#78350f}
.alert-info{background:#e5f0ff;border:1px solid #93c5fd;color:#1e40af}
.alert-err{background:#fee2e2;border:1px solid #fca5a5;color:#b91c1c}

/* Tables */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{padding:9px 14px;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--g4);text-align:left;border-bottom:2px solid var(--g2);background:var(--g1);white-space:nowrap}
td{padding:11px 14px;font-size:.88rem;border-bottom:1px solid var(--g2);vertical-align:middle}
tr:last-child td{border:none}

/* Stats */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.stat-c{background:var(--w);border-radius:var(--rx);border:1.5px solid var(--g2);padding:18px;text-align:center;box-shadow:var(--sh)}
.stat-n{font-size:1.6rem;font-weight:900}
.stat-l{font-size:.72rem;font-weight:700;color:var(--g4);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}

/* Points circle */
.pts-ring{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--gd));color:#fff;box-shadow:0 8px 24px rgba(132,188,52,.35)}
.pts-ring .num{font-size:2rem;font-weight:900;line-height:1}
.pts-ring .lbl{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}

/* Goodie grid */
.goodie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.gc{background:var(--w);border-radius:var(--rx);border:1.5px solid var(--g2);overflow:hidden;transition:.2s}
.gc:hover{box-shadow:var(--shm);border-color:var(--g3)}
.gc-img{height:130px;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:2.5rem;overflow:hidden}
.gc-img img{width:100%;height:100%;object-fit:cover}
.gc-b{padding:13px}
.gc-name{font-weight:800;font-size:.9rem;margin-bottom:4px}
.gc-pts{font-size:.82rem;color:var(--gd);font-weight:700}

/* Ticket chat */
.ticket-thread{display:flex;flex-direction:column;gap:12px;padding:16px 0}
.t-msg{display:flex;flex-direction:column}
.t-msg.customer{align-items:flex-start}
.t-msg.admin{align-items:flex-end}
.t-bubble{max-width:82%;padding:10px 14px;border-radius:14px;font-size:.88rem;line-height:1.55}
.t-bubble.customer{background:var(--g2);color:var(--dark);border-radius:14px 14px 14px 4px}
.t-bubble.admin{background:var(--g);color:#fff;border-radius:14px 14px 4px 14px}
.t-meta{font-size:.72rem;color:var(--g4);margin-top:3px}

/* Quick links */
.qlink{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--w);border-radius:var(--r);border:1.5px solid var(--g2);transition:.2s;color:var(--dark)}
.qlink:hover{border-color:var(--g);background:var(--gl);color:var(--gd);box-shadow:var(--sh)}
.qlink-icon{width:44px;height:44px;border-radius:10px;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.qlink-name{font-weight:800;font-size:.92rem}
.qlink-sub{font-size:.78rem;color:var(--g4)}
.qlink-arr{margin-left:auto;color:var(--g4)}
.qlink:hover .qlink-arr{color:var(--g)}

/* Offers */
.offer-strip{background:var(--w);border-radius:var(--rx);border:1.5px solid var(--g2);padding:16px;margin-bottom:10px;display:flex;align-items:center;gap:14px}
.offer-strip-img{width:56px;height:56px;border-radius:10px;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;overflow:hidden}
.offer-strip-img img{width:100%;height:100%;object-fit:cover}

/* Docs */
.doc-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--g1);border-radius:var(--r);border:1.5px solid var(--g2);margin-bottom:8px}

/* Modal */
#modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;align-items:center;justify-content:center;padding:16px}
#modal.open{display:flex}
.modal-box{background:var(--w);border-radius:var(--rx);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.3)}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--g2);display:flex;align-items:center;justify-content:space-between}
.modal-head h3{font-size:1rem;margin:0;font-weight:800}
.modal-close{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--g4);transition:.18s;cursor:pointer;border:none;background:none}
.modal-close:hover{background:var(--g1)}
.modal-body{padding:22px}
.modal-foot{padding:14px 22px;border-top:1px solid var(--g2);display:flex;justify-content:flex-end;gap:10px}

/* Toast */
#toasts{position:fixed;top:14px;right:14px;z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--dark);color:#fff;padding:9px 18px;border-radius:50px;font-size:.85rem;font-weight:700;box-shadow:var(--shm);animation:ti .25s ease forwards;pointer-events:auto}
.toast-ok{background:#15803d}.toast-err{background:#b91c1c}.toast-warn{background:#d97706}
@keyframes ti{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Profile */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info-row{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--g2)}
.info-row:last-child{border:none}
.info-key{font-size:.75rem;font-weight:800;color:var(--g4);text-transform:uppercase;letter-spacing:.04em}
.info-val{font-weight:700}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes countNum{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes offerBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.75;transform:scale(1.04)}}
@keyframes notifPulse{0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.5)}50%{box-shadow:0 0 0 6px rgba(225,29,72,0)}}
.anim-fadeup{animation:fadeUp .4s cubic-bezier(.4,0,.2,1) both}
.anim-popin{animation:popIn .35s cubic-bezier(.34,1.56,.64,1) both}
.stat-c{transition:box-shadow .2s,transform .2s}
.stat-c:hover{box-shadow:var(--shm);transform:translateY(-2px)}
/* Tier cards */
.tier-card{border-radius:var(--rx);padding:22px;overflow:hidden;position:relative;margin-bottom:18px}
.tier-bronze{background:linear-gradient(135deg,#78350f,#92400e)}
.tier-silber{background:linear-gradient(135deg,#1e293b,#334155)}
.tier-gold{background:linear-gradient(135deg,#92400e,#b45309)}
.tier-platin{background:linear-gradient(135deg,#1a2a0a,#2a4d18)}
.tier-name{font-size:1.4rem;font-weight:900;color:#fff;margin-bottom:3px}
.tier-subtitle{font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:14px}
.tier-bar-track{height:8px;background:rgba(255,255,255,.2);border-radius:50px;overflow:hidden;margin-bottom:6px}
.tier-bar-fill{height:100%;border-radius:50px;background:rgba(255,255,255,.9);width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.tier-bar-labels{display:flex;justify-content:space-between;font-size:.7rem;color:rgba(255,255,255,.5);font-weight:700}
.tier-icon{font-size:3rem;position:absolute;right:20px;top:50%;transform:translateY(-50%);opacity:.3}
/* Badges */
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.badge-card{background:var(--w);border-radius:var(--rx);border:1.5px solid var(--g2);padding:14px;text-align:center;transition:.2s;position:relative}
.badge-card:hover{box-shadow:var(--shm);transform:translateY(-2px)}
.badge-card.earned{border-color:var(--g);background:var(--gl)}
.badge-card.locked{opacity:.4;filter:grayscale(.7)}
.badge-icon{font-size:1.9rem;margin-bottom:5px}
.badge-name{font-size:.72rem;font-weight:800;color:var(--dark);margin-bottom:2px}
.badge-desc{font-size:.65rem;color:var(--g4)}
.badge-check{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:900}
/* Notifications */
.notif-wrap{position:relative;display:inline-flex}
.notif-count{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:50px;background:var(--red);color:#fff;font-size:.62rem;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 3px;animation:notifPulse 2s infinite;border:2px solid #1a1a1a}
/* Greeting */
.greeting-card{background:linear-gradient(135deg,#1a2a0a,#2a4d18);border-radius:var(--rx);padding:20px 24px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.greeting-name{font-size:1.2rem;font-weight:900;color:#fff;margin-bottom:3px}
.greeting-sub{font-size:.82rem;color:rgba(255,255,255,.6)}
/* Notifications list */
.notif-item{padding:12px 16px;border-bottom:1px solid var(--g2);display:flex;gap:12px;align-items:flex-start;cursor:pointer;transition:.18s;animation:fadeUp .3s ease both}
.notif-item:hover{background:var(--g1)}
.notif-item.unread{background:#f0f8e5;border-left:3px solid var(--g)}
.notif-dot-g{width:8px;height:8px;border-radius:50%;background:var(--g);flex-shrink:0;margin-top:4px}
/* Responsive */

/* ══ RESPONSIVE LAYOUT (Sidebar + Mobile Bottom Nav) ══ */
.app-body{display:flex;max-width:1200px;margin:0 auto;width:100%;align-items:flex-start}
.app-sidebar{width:240px;flex-shrink:0;padding:18px 12px;position:sticky;top:54px;max-height:calc(100vh - 54px);overflow-y:auto}
.sb-group{margin-bottom:18px}
.sb-grouplabel{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;padding:0 12px 6px}
.sb-link{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border:none;background:none;border-radius:10px;font-family:inherit;font-size:.86rem;font-weight:700;color:#475569;cursor:pointer;transition:.13s;text-align:left;margin-bottom:1px}
.sb-link:hover{background:#f1f5f9;color:#1a2a0a}
.sb-link.active{background:var(--g,#84BC34);color:#fff}
.sb-link.active:hover{background:var(--g,#84BC34)}
.sb-ic{font-size:1.05rem;width:22px;text-align:center;flex-shrink:0}
.app-content{flex:1;min-width:0;max-width:none;padding:24px 22px}

.mobile-bottomnav{display:none}
.mobile-drawer-overlay{display:none}

@media(max-width:900px){
  .app-body{display:block}
  .app-sidebar{display:none}
  .app-content{padding:16px 14px 90px}
  .mobile-bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e2e8f0;z-index:200;box-shadow:0 -2px 12px rgba(0,0,0,.06);padding-bottom:env(safe-area-inset-bottom,0)}
  .mb-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:none;background:none;font-family:inherit;cursor:pointer;color:#94a3b8;transition:.13s}
  .mb-item span{font-size:1.25rem;line-height:1}
  .mb-item small{font-size:.62rem;font-weight:700}
  .mb-item.active{color:var(--g,#84BC34)}
  .mobile-drawer-overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;animation:fadeIn .2s}
  .mobile-drawer{position:fixed;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom,0));z-index:301;animation:slideUp .25s;max-height:80vh;overflow-y:auto}
  .md-handle{width:40px;height:4px;background:#cbd5e1;border-radius:50px;margin:6px auto 14px}
  .md-title{font-weight:800;font-size:1rem;margin-bottom:14px;padding:0 4px}
  .md-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .md-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:14px;font-family:inherit;font-size:.74rem;font-weight:700;color:#374151;cursor:pointer;transition:.13s}
  .md-tile:active{background:#eef2f6;transform:scale(.97)}
  .md-tile span{font-size:1.5rem}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}

@media(max-width:768px){
  .app-content{padding:16px}
  .fg-row{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .goodie-grid{grid-template-columns:1fr 1fr}
  .profile-grid{grid-template-columns:1fr}
  .tn-user{display:none}
}
@media(max-width:480px){
  .stats-row{grid-template-columns:1fr}
  .goodie-grid{grid-template-columns:1fr}
}


/* ════════════════════════════════════════════════════════════
   MODERN DESIGN ENHANCEMENT LAYER (Final)
   ════════════════════════════════════════════════════════════ */

/* Smooth scrolling & font rendering */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* ═══ 3D-VIEW-TRANSITIONS (einheitliches System) ═══════════════
   Beim Sektionswechsel kippen die Inhalte sanft aus der Tiefe
   ins Bild (Perspektive + rotateX + translateZ), gestaffelt. */
.app-content{perspective:1200px;perspective-origin:50% 20%}
#appContent>*{
  animation:view3dIn .55s cubic-bezier(.16,1,.3,1) both;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
/* Stagger: jedes Element kommt einen Tick später */
#appContent>*:nth-child(1){animation-delay:0s}
#appContent>*:nth-child(2){animation-delay:.05s}
#appContent>*:nth-child(3){animation-delay:.1s}
#appContent>*:nth-child(4){animation-delay:.15s}
#appContent>*:nth-child(5){animation-delay:.2s}
#appContent>*:nth-child(n+6){animation-delay:.25s}
@keyframes view3dIn{
  from{opacity:0;transform:rotateX(7deg) translateY(22px) translateZ(-40px)}
  60%{opacity:1}
  to{opacity:1;transform:none}
}
/* Interaktive 3D-Karten: heben & kippen leicht bei Hover */
.card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .25s ease;will-change:transform}
@media(hover:hover){
  .card:hover{transform:translateY(-4px) rotateX(1.1deg) scale(1.004);box-shadow:0 14px 34px rgba(26,26,26,.12),0 3px 10px rgba(132,188,52,.10);border-color:rgba(132,188,52,.45)}
}
/* Druck-Feedback: Buttons sinken minimal in die Tiefe */
.btn{transition:transform .15s ease,box-shadow .2s ease,filter .2s ease}
.btn:active{transform:scale(.965) translateY(1px)}
.btn:not(:disabled):hover{filter:brightness(1.04)}
/* Stat-Kacheln: Pop mit Tiefe */
.stat-card,.stat{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
@media(hover:hover){.stat-card:hover,.stat:hover{transform:translateY(-3px) scale(1.02)}}
/* Sanftes helles Ambiente: dezenter Farbverlauf hinter dem Inhalt */
body{background:
  radial-gradient(1100px 500px at 85% -10%,rgba(132,188,52,.10),transparent 60%),
  radial-gradient(900px 420px at -10% 30%,rgba(0,87,168,.06),transparent 55%),
  var(--g1)}
/* Barrierefreiheit: Bewegungen respektvoll abschalten */
@media(prefers-reduced-motion:reduce){
  #appContent>*{animation:none!important}
  .card,.btn,.stat-card,.stat{transition:none!important}
  .card:hover{transform:none!important}
}

/* Sidebar links - smooth hover with slide indicator */
.sb-link{position:relative;overflow:hidden}
.sb-link::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--g);border-radius:0 3px 3px 0;transition:height .25s cubic-bezier(.16,1,.3,1)}
.sb-link.active::before{height:60%}
.sb-link:hover{transform:translateX(2px)}

/* Cards - subtle lift on hover */
.card,[class*="card"]{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}

/* Buttons - press feedback + shine */
button,.btn{transition:transform .15s cubic-bezier(.16,1,.3,1),box-shadow .2s,background .2s,border-color .2s}
button:active,.btn:active{transform:scale(.96)}
.btn-primary,.btn-g{position:relative;overflow:hidden}
.btn-primary::after,.btn-g::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transition:left .5s}
.btn-primary:hover::after,.btn-g:hover::after{left:100%}

/* Mobile bottom-nav active dot indicator */
.mb-item{position:relative}
.mb-item.active::before{content:'';position:absolute;top:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--g);animation:dotIn .3s}
@keyframes dotIn{from{transform:translateX(-50%) scale(0)}to{transform:translateX(-50%) scale(1)}}

/* Mobile tiles - staggered entrance */
.md-grid .md-tile{animation:tileIn .35s backwards}
.md-grid .md-tile:nth-child(1){animation-delay:.02s}.md-grid .md-tile:nth-child(2){animation-delay:.04s}
.md-grid .md-tile:nth-child(3){animation-delay:.06s}.md-grid .md-tile:nth-child(4){animation-delay:.08s}
.md-grid .md-tile:nth-child(5){animation-delay:.10s}.md-grid .md-tile:nth-child(6){animation-delay:.12s}
.md-grid .md-tile:nth-child(7){animation-delay:.14s}.md-grid .md-tile:nth-child(8){animation-delay:.16s}
.md-grid .md-tile:nth-child(n+9){animation-delay:.18s}
@keyframes tileIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* Topnav - subtle glass effect */
.app-topnav{backdrop-filter:saturate(1.2)}

/* Points pill - gentle pulse to draw attention */
.tn-pts{transition:transform .2s}
.tn-pts:hover{transform:scale(1.05)}

/* Skeleton shimmer for loading states */
.spinner{animation:spin .7s linear infinite}

/* Stat numbers count-up feel */
.stat-value,[class*="stat-value"]{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Inputs - modern focus ring */
input,select,textarea{transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,select:focus,textarea:focus{outline:none}

/* Modal entrance polish */
#modal.open #modalBox,#modalBox{animation:modalIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}

/* Section headers with accent */
.sec-head h2{position:relative;display:inline-block}

/* Smooth reduced-motion respect (accessibility) */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Better mobile touch targets */
@media(max-width:900px){
  button,.btn,.sb-link,.md-tile,a[onclick]{min-height:44px}
  .app-content{padding-bottom:96px}
}

/* Hover only on devices that support it (no sticky hover on mobile) */
@media(hover:hover){
  .card:hover,[class*="stat-card"]:hover{transform:translateY(-2px);box-shadow:var(--shm)}
}

/* Mobile content safety: stack everything */
@media(max-width:560px){
  [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important}
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:repeat(2,1fr) !important}
  .app-content h2{font-size:1.15rem !important}
  .sec-head{flex-wrap:wrap;gap:8px}
}

/* ══ MODERNE ANIMATIONEN & POLISH ══ */
@keyframes cf-fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cf-pop{0%{transform:scale(.96);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes cf-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes cf-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* (View-Transition wird zentral vom 3D-System oben gesteuert) */

/* Card-Hover modern */
.sb-link{position:relative;overflow:hidden}
.sb-link::after{content:'';position:absolute;left:0;top:0;height:100%;width:3px;background:var(--g);transform:scaleY(0);transition:.2s;border-radius:0 3px 3px 0}
.sb-link.active::after{transform:scaleY(1)}

/* Buttons: sanftes Feedback */
button,.btn,.sb-link,.mb-item,.md-tile{transition:transform .12s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease}
button:active,.btn:active{transform:scale(.97)}

/* Skeleton-Loading shimmer */
.cf-skeleton{background:linear-gradient(90deg,#eef2f6 25%,#e2e8f0 50%,#eef2f6 75%);background-size:800px 100%;animation:cf-shimmer 1.4s infinite;border-radius:8px}

/* Bottom-Nav aktiver Tab: kleiner Bounce */
.mb-item.active span{animation:cf-pop .3s ease}

/* Smooth scroll global */
html{scroll-behavior:smooth}

/* Spinner moderner */
.spinner{display:inline-block;width:28px;height:28px;border:3px solid rgba(132,188,52,.2);border-top-color:var(--g);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fdspin{to{transform:rotate(360deg)}}

/* Topnav: leichter Blur-Effekt beim Scrollen */
.app-topnav{backdrop-filter:saturate(1.2)}

/* Sidebar-Scrollbar dezent */
.app-sidebar::-webkit-scrollbar{width:6px}
.app-sidebar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:50px}
.app-sidebar::-webkit-scrollbar-track{background:transparent}

/* Karten heben sich beim Hover leicht */
.app-content [style*="border-radius:16px"]:hover,.app-content [style*="border-radius:14px"]:hover{box-shadow:0 8px 30px rgba(0,0,0,.08)}

/* Fokus-Ringe für Barrierefreiheit */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--g);outline-offset:2px}

/* Leere Zustände (wurden benutzt, waren aber nie definiert) */
.empty-state{text-align:center;padding:34px 18px;color:var(--g4);background:#fff;border:1.5px dashed var(--g2);border-radius:14px}
.empty-icon{font-size:2.6rem;line-height:1;margin-bottom:8px;opacity:.6}
.empty-state p{margin:0;font-size:.88rem}

/* ═══ DASHBOARD: klare Abschnitte, ruhige Struktur ═══ */
.dash-section{margin-bottom:22px}
.dash-section-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.dash-section-t{font-size:1.02rem;font-weight:900;color:#1a1a1a;letter-spacing:-.01em}
.dash-section-sub{font-size:.76rem;color:var(--g4);font-weight:600}

/* Wichtige Hinweise */
.alert-stack{display:flex;flex-direction:column;gap:8px}
.alert-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1.5px solid;background:#fff;flex-wrap:wrap}
.alert-warn{border-color:#f59e0b;background:linear-gradient(135deg,#fffbeb,#fff)}
.alert-info{border-color:#3b82f6;background:linear-gradient(135deg,#eff6ff,#fff)}
.alert-ok{border-color:var(--g);background:linear-gradient(135deg,var(--fn-lt,#f0f8e5),#fff)}
.alert-ic{font-size:1.8rem;flex-shrink:0;line-height:1}
.alert-body{flex:1;min-width:190px;display:flex;flex-direction:column;gap:2px}
.alert-title{font-weight:800;font-size:.95rem;color:#1a1a1a}
.alert-text{font-size:.83rem;color:var(--g4);line-height:1.45}
.alert-btn{flex-shrink:0;font-weight:800}

/* Erste Schritte */
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.step-card{background:#fff;border:1.5px solid var(--g2);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--g);color:#fff;font-weight:900;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.step-title{font-weight:800;font-size:.92rem}
.step-desc{font-size:.8rem;color:var(--g4);line-height:1.45;flex:1}

/* Schnellzugriff */
.quick-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
.quick-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;background:#fff;border:1.5px solid var(--g2);border-radius:14px;cursor:pointer;font-family:inherit;transition:.15s}
.quick-tile:hover{border-color:var(--g);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.quick-ic{font-size:1.5rem;line-height:1}
.quick-lbl{font-size:.74rem;font-weight:700;color:#1a1a1a;text-align:center;line-height:1.2}

/* Angebote im Dashboard */
.dash-offer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.dash-offer{background:#fff;border:1.5px solid var(--g2);border-radius:14px;overflow:hidden;cursor:pointer;transition:.15s;display:flex;flex-direction:column}
.dash-offer:hover{border-color:var(--g);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.do-img{height:120px;background:linear-gradient(135deg,#f0f8e5,#e2eed0);display:flex;align-items:center;justify-content:center;font-size:2.2rem;overflow:hidden;padding:8px}
.do-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.do-body{padding:11px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.do-title{font-weight:800;font-size:.86rem;line-height:1.3}
.do-net{font-size:.72rem;color:var(--gd);font-weight:700}
.do-price{font-weight:900;color:var(--gd);font-size:1rem;margin-top:auto}
.do-price small{font-size:.68rem;font-weight:400;color:var(--g4)}

/* Angebot anfordern */
.dash-summary{cursor:pointer;padding:14px 16px;font-weight:800;font-size:.94rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.dash-summary::-webkit-details-marker{display:none}
.dash-summary-hint{font-size:.78rem;color:var(--g4);font-weight:600}
.request-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.request-tile{flex-direction:column;gap:5px;padding:12px 8px;height:auto;font-size:.78rem;font-weight:800}

/* Letzte Antworten */
.reply-row{padding:12px 16px;border-bottom:1px solid var(--g2);cursor:pointer;transition:.12s}
.reply-row:last-child{border-bottom:none}
.reply-row:hover{background:var(--fn-lt,#f0f8e5)}
.reply-subj{font-weight:700;font-size:.86rem}
.reply-text{font-size:.78rem;color:var(--g4);margin-top:2px}

/* Berater */
.advisor-card{background:linear-gradient(135deg,#1a2a0a,#2a4d18);overflow:hidden}
.advisor-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.advisor-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.45);margin-bottom:3px}
.advisor-name{font-size:1.1rem;font-weight:900;color:#fff;margin-bottom:4px}
.advisor-meta{font-size:.8rem;color:rgba(255,255,255,.7);line-height:1.5}
.advisor-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.share-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

@media(max-width:640px){
  .alert-btn{width:100%}
  .advisor-actions{flex-direction:row;width:100%}
  .advisor-actions .btn{flex:1}
  .dash-offer-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}


/* ═══ REZEPT-LEXIKON ═══ */
.rc-card{background:#fff;border:1.5px solid var(--g2);border-radius:14px;overflow:hidden;cursor:pointer;
         display:flex;flex-direction:column;transition:.15s}
.rc-card:hover{border-color:var(--g);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.rc-img{position:relative;height:130px;background:linear-gradient(135deg,#f0f8e5,#e2eed0);display:flex;
        align-items:center;justify-content:center;font-size:2.2rem;overflow:hidden}
.rc-img img{width:100%;height:100%;object-fit:cover;display:block}
.rc-badge{position:absolute;left:7px;bottom:7px;background:rgba(0,0,0,.72);color:#fff;font-size:.66rem;
          font-weight:800;padding:3px 8px;border-radius:20px}
.rc-fav{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:none;
        background:rgba(255,255,255,.9);cursor:pointer;font-size:1rem;color:#9ca3af;line-height:1}
.rc-fav.on{color:#f59e0b}
.rc-body{padding:10px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.rc-title{font-weight:800;font-size:.88rem;line-height:1.3}
.rc-meta{font-size:.72rem;color:var(--g4)}
.rc-hero{width:100%;height:200px;border-radius:12px;overflow:hidden;background:#f4f7ee}
.rc-hero img{width:100%;height:100%;object-fit:cover;display:block}
.rc-h{font-size:.95rem;font-weight:900;margin:18px 0 6px}
.rc-portions{display:flex;align-items:center;gap:10px;background:var(--gl);border-radius:12px;padding:10px 14px;margin-top:12px}
.rc-pbtn{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--g);background:#fff;color:var(--gd);
         font-weight:900;font-size:1.1rem;cursor:pointer;line-height:1}
.rc-ings{list-style:none;padding:0;margin:0}
.rc-ings li{padding:7px 0;border-bottom:1px solid var(--g2);font-size:.88rem}
.rc-ings li:last-child{border-bottom:none}
.rc-amt{display:inline-block;min-width:74px;font-weight:800;color:var(--gd)}
.rc-steps{padding-left:20px;margin:0}
.rc-steps li{margin-bottom:9px;font-size:.88rem;line-height:1.55}
.rc-timerbadge{display:inline-block;background:var(--gl);color:var(--gd);font-size:.7rem;font-weight:800;
               padding:2px 8px;border-radius:20px;margin-left:6px;white-space:nowrap}
.rc-stars{display:flex;gap:4px}
.rc-star{background:none;border:none;font-size:1.7rem;color:#d1d5db;cursor:pointer;padding:0;line-height:1}
.rc-star.on{color:#f59e0b}

/* Kochmodus */
.cook-ov{position:fixed;inset:0;background:#fff;z-index:2000;display:flex;flex-direction:column}
.cook-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1.5px solid var(--g2);flex-shrink:0}
.cook-x{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--g2);background:#fff;cursor:pointer;font-size:1rem}
.cook-title{flex:1;font-weight:900;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cook-prog{font-size:.8rem;font-weight:800;color:var(--gd);background:var(--gl);padding:4px 10px;border-radius:20px}
.cook-body{flex:1;overflow-y:auto;padding:22px 18px;max-width:620px;margin:0 auto;width:100%}
.cook-stepno{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--g4)}
.cook-text{font-size:1.22rem;line-height:1.6;margin:10px 0 18px}
.cook-timer{font-size:3rem;font-weight:900;text-align:center;color:var(--gd);font-variant-numeric:tabular-nums;margin:6px 0 12px}
.cook-timer.done{color:#dc2626;animation:cookBlink .7s ease-in-out 4}
@keyframes cookBlink{50%{opacity:.35}}
.cook-check{display:flex;align-items:center;gap:10px;background:var(--gl);border-radius:12px;padding:14px 16px;
            margin:18px 0;font-weight:800;font-size:.92rem;cursor:pointer}
.cook-check input{width:22px;height:22px;accent-color:var(--g)}
.cook-ings{border:1.5px solid var(--g2);border-radius:12px;padding:12px 14px}
.cook-ings summary{cursor:pointer;font-weight:800;font-size:.86rem}
.cook-ings ul{margin:10px 0 0;padding-left:18px;font-size:.86rem}
.cook-nav{display:flex;gap:10px;padding:14px 18px;border-top:1.5px solid var(--g2);flex-shrink:0;
          max-width:620px;margin:0 auto;width:100%}
.cook-nav .btn{flex:1;justify-content:center}

/* Einkaufszettel */
.sl-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--g2);cursor:pointer}
.sl-row:last-child{border-bottom:none}
.sl-row input{width:20px;height:20px;accent-color:var(--g);flex-shrink:0}
.sl-txt{flex:1;font-size:.9rem}
.sl-row.done .sl-txt{text-decoration:line-through;color:#9ca3af}
.sl-del{background:none;border:none;color:#cbd5e1;cursor:pointer;font-size:.9rem;padding:4px 6px}
.sl-del:hover{color:#dc2626}

/* Wochenplan */
.mp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.mp-day{background:#fff;border:1.5px solid var(--g2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.mp-day.today{border-color:var(--g);box-shadow:0 0 0 3px rgba(132,188,52,.13)}
.mp-dayhead{display:flex;justify-content:space-between;font-weight:900;font-size:.82rem;
            border-bottom:1px solid var(--g2);padding-bottom:5px}
.mp-dayhead span{font-weight:400;color:var(--g4);font-size:.74rem}
.mp-slotlbl{font-size:.66rem;font-weight:800;text-transform:uppercase;color:#94a3b8;letter-spacing:.05em}
.mp-rec{display:flex;align-items:center;gap:4px;background:var(--gl);border-radius:8px;padding:6px 8px;margin-top:3px}
.mp-rec span{flex:1;font-size:.76rem;font-weight:700;color:var(--gd);cursor:pointer;line-height:1.3}
.mp-rec button{background:none;border:none;color:#9ca3af;cursor:pointer;font-size:.75rem;padding:0 2px}
.mp-add{width:100%;margin-top:3px;border:1.5px dashed var(--g2);background:#fff;border-radius:8px;
        padding:6px;cursor:pointer;color:#9ca3af;font-size:1rem;line-height:1}
.mp-add:hover{border-color:var(--g);color:var(--gd)}
.mp-pickitem{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;
             background:#fff;border:1.5px solid var(--g2);border-radius:10px;padding:10px 12px;margin-bottom:6px;
             cursor:pointer;font-family:inherit;font-size:.86rem;font-weight:700}
.mp-pickitem:hover{border-color:var(--g)}
.mp-pickitem small{color:var(--g4);font-weight:400;font-size:.74rem;white-space:nowrap}

/* Portal-FAQ + Filter-Chips */
.pfaq-a.open{display:block !important}
.pfaq-answer img{display:block;max-width:100%;max-height:300px;width:auto;height:auto;object-fit:contain;border-radius:10px;margin:10px auto;background:#f4f7ee}
.pfaq-answer h3{font-size:1rem;margin:10px 0 5px}
.pfaq-answer p{margin:0 0 8px}
.pfaq-answer ul,.pfaq-answer ol{margin:0 0 10px;padding-left:20px}
.pfaq-answer a{color:var(--gd)}
.chip{padding:6px 14px;border-radius:50px;border:1.5px solid var(--g2);background:#fff;font-weight:700;font-size:.78rem;cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--g)}
.chip-on{background:var(--g);color:#fff;border-color:var(--g)}

/* Angebotskarten – einheitliche, saubere Bildskalierung */
.offer-card{background:#fff;border:1.5px solid #e8eaed;border-radius:14px;overflow:hidden;cursor:pointer;transition:.15s;display:flex;flex-direction:column}
.offer-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-2px)}
.offer-img-placeholder{width:100%;height:150px;display:flex;align-items:center;justify-content:center;font-size:2.4rem;background:linear-gradient(135deg,#f0f8e5,#e2eed0);overflow:hidden;padding:8px}
.offer-img-placeholder img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.offer-body{padding:12px 14px;flex:1;display:flex;flex-direction:column;gap:4px}
.offer-title{font-weight:800;font-size:.9rem;line-height:1.3;color:#1a1a1a}
.offer-tag{font-size:.72rem;color:#5a8022;font-weight:700}
.offer-price{font-weight:900;color:#5a8022;font-size:1.05rem;margin-top:auto}
.offer-price span{font-size:.72rem;font-weight:400;color:#6b7280}
.offer-conn{font-size:.72rem;color:#6b7280;margin-top:1px}
.offer-conn.ok{color:#5a8022;font-weight:700}
.do-conn,.dash-offer .offer-conn{font-size:.7rem}
/* News-Inline-Bilder im Kundenportal einheitlich */
.app-content .news-content img,.app-content .od-review img{display:block;max-width:100%;max-height:320px;width:auto;height:auto;object-fit:contain;border-radius:10px;margin:12px auto;background:#f4f7ee}

/* ---- Zusammenklappbare Menügruppen ---- */
.sb-grouptoggle{display:flex;align-items:center;width:100%;background:none;border:none;
  font:inherit;color:inherit;cursor:pointer;text-align:left}
.sb-grouptoggle .sb-caret{margin-left:auto;font-size:.75em;opacity:.5;transition:transform .2s}
.sb-group.sb-zu .sb-grouptoggle .sb-caret{transform:rotate(-90deg)}
.sb-group.sb-zu .sb-link{display:none}
.sb-grouptoggle:hover{opacity:.75}


/* ══════════════════════════════════════════════════════════════
   r262 – Neues Seitenmenü: fuenf Bereiche, aufklappbar, mit Suche
   Farbschema Dunkelblau, passend zur oeffentlichen Seite.
   ══════════════════════════════════════════════════════════════ */
:root{
  --pb:#1e5799;        /* Blau */
  --pb-dk:#123f73;
  --pb-lt:#eef4fb;
  --pb-akz:#3d8fd6;
  --pn:#0d1f38;        /* Marineblau */
  --pn-2:#173c5e;
  --pl:#dde6f0;        /* Linie */
  --pt2:#5a6b80;       /* Text gedaempft */
}

.sb-nav{display:flex;flex-direction:column;height:100%;overflow:hidden}

/* ── Suche ── */
.sb-suche-wrap{padding:12px 12px 8px;flex-shrink:0}
.sb-suche{
  width:100%;padding:10px 13px;font-size:.88rem;font-family:inherit;
  border:1.5px solid var(--pl);border-radius:10px;background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.sb-suche:focus{
  outline:none;border-color:var(--pb);
  box-shadow:0 0 0 3px rgba(30,87,153,.12);
}
.sb-treffer{padding:0 8px 12px;overflow-y:auto}
.sb-kein-treffer{padding:16px 12px;font-size:.85rem;color:var(--pt2);text-align:center}

.sb-inhalt{flex:1;overflow-y:auto;padding:0 8px 16px;-webkit-overflow-scrolling:touch}
.sb-inhalt::-webkit-scrollbar{width:6px}
.sb-inhalt::-webkit-scrollbar-thumb{background:var(--pl);border-radius:3px}

/* ── Gruppen ── */
.sb-gruppe{margin-bottom:3px}
.sb-kopf{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 12px;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:.88rem;font-weight:800;color:var(--pn);
  border-radius:9px;text-align:left;
  transition:background .18s ease;
}
.sb-kopf:hover{background:var(--pb-lt)}
.sb-kopf-ic{font-size:1.05rem;flex-shrink:0}
.sb-kopf-text{flex:1;min-width:0}
.sb-pfeil{
  font-size:.85rem;color:var(--pt2);flex-shrink:0;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.sb-gruppe.offen .sb-pfeil{transform:rotate(180deg)}

/* Aufklappen: max-height statt display, damit es weich laeuft */
.sb-punkte{
  max-height:0;overflow:hidden;
  transition:max-height .3s cubic-bezier(.2,.8,.2,1);
}
.sb-gruppe.offen .sb-punkte{max-height:620px}

/* ── Einträge ── */
.sb-link{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px 9px 20px;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:.86rem;font-weight:600;color:#334155;
  border-radius:8px;text-align:left;
  transition:background .16s ease,color .16s ease,padding-left .16s ease;
}
.sb-link:hover{background:var(--pb-lt);color:var(--pb-dk);padding-left:24px}
.sb-link.active{
  background:var(--pb);color:#fff;font-weight:800;
}
.sb-link.active:hover{background:var(--pb);padding-left:20px}
.sb-ic{font-size:1rem;flex-shrink:0;width:20px;text-align:center}

.sb-solo{
  padding-left:12px;font-weight:800;font-size:.9rem;margin-bottom:6px;
}
.sb-solo:hover{padding-left:14px}

.sb-fuss{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--pl);
}
.sb-fuss .sb-link{padding-left:12px}
.sb-fuss .sb-link:hover{padding-left:16px}

.sb-treffer .sb-link{padding-left:12px}

@media (prefers-reduced-motion:reduce){
  .sb-punkte{transition:none}
  .sb-pfeil,.sb-link,.sb-kopf{transition:none}
  .sb-link:hover{padding-left:12px}
}


/* ══ DASHBOARD r262 ═════════════════════════════════════════ */
.db-kopf{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:linear-gradient(140deg,var(--pn),var(--pn-2));
  color:#fff;border-radius:16px;padding:22px 24px;margin-bottom:16px;flex-wrap:wrap;
}
.db-hallo{font-size:1.4rem;font-weight:900;line-height:1.2}
.db-sub{font-size:.85rem;color:rgba(255,255,255,.7);margin-top:3px}
.db-kopf-btn{
  background:rgba(255,255,255,.14);border:none;color:#fff;cursor:pointer;
  padding:10px 18px;border-radius:9px;font-family:inherit;font-weight:800;font-size:.86rem;
  transition:background .2s ease;
}
.db-kopf-btn:hover{background:rgba(255,255,255,.26)}

/* Drei Zahlen – nicht mehr. Vier oder fuenf liest niemand. */
.db-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.db-zahl{
  background:#fff;border:1.5px solid var(--pl);border-radius:14px;
  padding:16px 12px;cursor:pointer;font-family:inherit;text-align:center;
  display:flex;flex-direction:column;gap:3px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease;
}
.db-zahl:hover{transform:translateY(-2px);border-color:var(--pb)}
.db-zahl-wert{font-size:1.7rem;font-weight:900;color:var(--pb);line-height:1}
.db-zahl-text{font-size:.78rem;color:var(--pt2);font-weight:700;text-transform:uppercase;letter-spacing:.04em}

.db-h2{font-size:1.05rem;font-weight:900;margin-bottom:10px}

.db-hinweise{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.db-hinweis{
  display:flex;align-items:center;gap:13px;
  background:#fff;border:1.5px solid var(--pl);border-left-width:4px;
  border-radius:12px;padding:14px 16px;flex-wrap:wrap;
}
.db-hinweis.db-warn{border-left-color:#f59e0b;background:#fffbeb}
.db-hinweis.db-info{border-left-color:var(--pb);background:var(--pb-lt)}
.db-hinweis-ic{font-size:1.4rem;flex-shrink:0}
.db-hinweis-text{flex:1;min-width:160px;display:flex;flex-direction:column;gap:2px}
.db-hinweis-text strong{font-size:.93rem}
.db-hinweis-text span{font-size:.84rem;color:var(--pt2);line-height:1.5}
.db-hinweis-btn{
  background:var(--pb);color:#fff;border:none;cursor:pointer;font-family:inherit;
  padding:9px 16px;border-radius:8px;font-weight:800;font-size:.83rem;flex-shrink:0;
}
.db-hinweis-btn:hover{background:var(--pb-akz)}

.db-ruhig{
  display:flex;align-items:center;gap:13px;
  background:#f0fdf4;border:1.5px solid #86efac;border-radius:12px;
  padding:16px 18px;margin-bottom:22px;
}
.db-ruhig-ic{font-size:1.5rem}
.db-ruhig strong{display:block;font-size:.95rem}
.db-ruhig span{font-size:.85rem;color:var(--pt2)}

/* ── Tabs ── */
.db-tabs{display:flex;gap:4px;border-bottom:2px solid var(--pl);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.db-tabs::-webkit-scrollbar{display:none}
.db-tab{
  background:none;border:none;cursor:pointer;font-family:inherit;white-space:nowrap;
  padding:11px 15px;font-size:.88rem;font-weight:800;color:var(--pt2);
  border-bottom:3px solid transparent;margin-bottom:-2px;
  transition:color .18s ease,border-color .18s ease;
}
.db-tab:hover{color:var(--pb)}
.db-tab.aktiv{color:var(--pn);border-bottom-color:var(--pb)}
.db-tab-inhalt{display:none}
.db-tab-inhalt.aktiv{display:block;animation:dbEin .25s cubic-bezier(.2,.8,.2,1)}
@keyframes dbEin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.db-lade,.db-leer{padding:26px;text-align:center;color:var(--pt2);font-size:.88rem}

.db-angebot-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.db-angebot{
  display:flex;flex-direction:column;gap:5px;
  background:#fff;border:1.5px solid var(--pl);border-radius:12px;
  padding:12px;text-decoration:none;color:inherit;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease;
}
.db-angebot:hover{transform:translateY(-3px);border-color:var(--pb)}
.db-ang-bild{
  display:block;position:relative;width:100%;aspect-ratio:4/3;
  background:var(--pb-lt);border-radius:8px;overflow:hidden;
}
.db-ang-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px}
.db-ang-platz{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.8rem;opacity:.4}
.db-ang-titel{font-size:.85rem;font-weight:700;line-height:1.35}
.db-ang-preis{font-size:1.05rem;font-weight:900;color:var(--pb)}
.db-ang-preis small{font-size:.7rem;color:var(--pt2);font-weight:600}

.db-liste{display:flex;flex-direction:column;gap:7px}
.db-zeile{
  display:flex;align-items:center;gap:11px;width:100%;
  background:#fff;border:1.5px solid var(--pl);border-radius:11px;
  padding:12px 14px;cursor:pointer;font-family:inherit;text-align:left;
  transition:border-color .18s ease,transform .18s ease;
}
.db-zeile:hover{border-color:var(--pb);transform:translateX(3px)}
.db-zeile-ic{font-size:1.2rem;flex-shrink:0}
.db-zeile-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.db-zeile-text strong{font-size:.9rem}
.db-zeile-text span{font-size:.8rem;color:var(--pt2)}
.db-zeile-pfeil{color:var(--pb);font-weight:900;flex-shrink:0}

.db-hilfe-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.db-kachel{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  background:#fff;border:1.5px solid var(--pl);border-radius:12px;
  padding:18px 10px;cursor:pointer;font-family:inherit;
  font-size:.84rem;font-weight:700;color:var(--pn);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease;
}
.db-kachel:hover{transform:translateY(-3px);border-color:var(--pb)}
.db-kachel span{font-size:1.5rem}

.db-mehr{
  display:block;width:100%;margin-top:13px;
  background:var(--pb-lt);color:var(--pb-dk);border:none;cursor:pointer;
  font-family:inherit;padding:12px;border-radius:10px;font-weight:800;font-size:.87rem;
  transition:background .18s ease;
}
.db-mehr:hover{background:#dbeafe}

.db-berater{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:linear-gradient(140deg,var(--pn),var(--pn-2));color:#fff;
  border-radius:14px;padding:16px 20px;margin-top:24px;flex-wrap:wrap;
}
.db-berater-text strong{display:block;font-size:.95rem}
.db-berater-text span{font-size:.82rem;color:rgba(255,255,255,.72)}
.db-berater-btn{
  background:#25D366;color:#fff;text-decoration:none;
  padding:10px 18px;border-radius:9px;font-weight:800;font-size:.86rem;white-space:nowrap;
}

@media(max-width:600px){
  .db-kopf{padding:18px;gap:12px}
  .db-hallo{font-size:1.2rem}
  .db-kopf-btn{width:100%}
  .db-zahl-wert{font-size:1.4rem}
  .db-zahl-text{font-size:.7rem}
  .db-hinweis-btn{width:100%}
  .db-berater{flex-direction:column;align-items:flex-start}
  .db-berater-btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .db-tab-inhalt.aktiv{animation:none}
  .db-zahl,.db-angebot,.db-zeile,.db-kachel{transition:none}
  .db-zahl:hover,.db-angebot:hover,.db-zeile:hover,.db-kachel:hover{transform:none}
}


/* ══ NEUE NACHRICHTEN ═══════════════════════════════════════
   Banner ganz oben. Auffaellig genug, um nicht uebersehen zu
   werden – aber in der Hausfarbe statt in Alarmrot: Eine
   Nachricht ist keine Warnung. */
.db-neu-banner{
  display:flex;align-items:center;gap:13px;width:100%;
  background:linear-gradient(135deg,var(--pb),var(--pb-dk));
  color:#fff;border:none;cursor:pointer;font-family:inherit;
  border-radius:14px;padding:15px 18px;margin-bottom:14px;text-align:left;
  box-shadow:0 4px 16px rgba(30,87,153,.25);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease;
}
.db-neu-banner:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(30,87,153,.35);
}
.db-neu-punkt{
  width:11px;height:11px;border-radius:50%;background:#fff;flex-shrink:0;
  /* Langsames Pulsieren – zieht den Blick, ohne zu flackern */
  animation:neuPuls 2.2s ease-in-out infinite;
}
@keyframes neuPuls{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.7) }
  50%    { box-shadow:0 0 0 7px rgba(255,255,255,0) }
}
.db-neu-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.db-neu-text strong{font-size:.95rem;font-weight:900;line-height:1.35}
.db-neu-text span{font-size:.82rem;color:rgba(255,255,255,.8)}
.db-neu-pfeil{font-size:1.2rem;font-weight:900;flex-shrink:0}

/* Der Eintrag unter „Das steht an" */
.db-hinweis.db-neu{
  border-left-color:var(--pb);
  background:var(--pb-lt);
}

@media(max-width:600px){
  .db-neu-banner{padding:13px 15px;gap:11px}
  .db-neu-text strong{font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  .db-neu-punkt{animation:none}
  .db-neu-banner{transition:none}
  .db-neu-banner:hover{transform:none}
}