/* =====================================================================
   LebensWerk® Gürtelmanufaktur – Kundenportal
   Design „Onyx & Gold": kühles Anthrazit + Gold, Schrift: Inter
   Standard = Dunkel (Onyx) · Hell = kühles Platin (umschaltbar)
   ===================================================================== */

:root{   /* Hell: Platin */
  --bg:#eef0f2; --surface:#ffffff; --surface-2:#f6f7f9;
  --text:#2b2f36; --muted:#828892; --heading:#1f242b;
  --accent:#d6a52a; --accent-2:#e8be4e; --accent-dark:#a8781a; --accent-ink:#241d10;
  --primary:#a8781a; --primary-dark:#8a6210; --primary-ink:#241d10;
  --border:#e2e6ea; --hairline:rgba(168,120,26,.30);
  --sheen:linear-gradient(135deg,#e8be4e,#d6a52a 45%,#bb8c1e);
  --shadow-sm:0 1px 2px rgba(20,24,30,.05);
  --shadow:0 2px 6px rgba(20,24,30,.06), 0 24px 48px -28px rgba(20,24,30,.28);
  --shadow-lg:0 2px 8px rgba(20,24,30,.07), 0 40px 70px -34px rgba(20,24,30,.38);
  --radius:18px; --radius-sm:12px; --radius-xs:8px;
  --field:#ffffff; --header-bg:rgba(238,240,242,.85);
}
:root[data-theme="dark"]{   /* Dunkel: Onyx */
  --bg:#15171c; --surface:#1e2128; --surface-2:#23272f;
  --text:#eef0f3; --muted:#9aa1aa; --heading:#ffffff;
  --accent:#e6b23a; --accent-2:#f4cd66; --accent-dark:#e6b23a; --accent-ink:#15171c;
  --primary:#e6b23a; --primary-dark:#f4cd66; --primary-ink:#15171c;
  --border:#2d323b; --hairline:rgba(230,178,58,.34);
  --sheen:linear-gradient(135deg,#f4cd66,#e6b23a 45%,#c2901c);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 6px rgba(0,0,0,.45), 0 28px 56px -30px rgba(0,0,0,.75);
  --shadow-lg:0 2px 8px rgba(0,0,0,.55), 0 46px 84px -34px rgba(0,0,0,.85);
  --field:#191c22; --header-bg:rgba(21,23,28,.82);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16.5px;font-weight:400;color:var(--text);background:var(--bg);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .3s ease,color .3s ease}

/* ===== Typografie ===== */
h1,h2,h3{font-family:'Inter',sans-serif;color:var(--heading);line-height:1.12;
  margin:0 0 .4em;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.2rem,5.4vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.3rem;font-weight:600}
p{margin:0 0 1rem}
a{color:var(--primary-dark);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--accent)}
.container{width:100%;max-width:1040px;margin:0 auto;padding:0 24px}
.page{padding:2.6rem 24px 4rem}
.muted{color:var(--muted)} .small{font-size:.9rem}
.lead{font-size:1.2rem;line-height:1.6;color:var(--muted);font-weight:300;max-width:62ch}

/* Eyebrow-Section-Label */
.section-label{display:flex;align-items:center;gap:.85rem;margin:2.6rem 0 1.1rem;
  text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:600;color:var(--accent-dark)}
.section-label::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--hairline),transparent)}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--border)}
.site-header::after{content:"";position:absolute;left:0;bottom:-1px;width:170px;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:1rem;flex-wrap:wrap}
.logo{font-family:'Inter',sans-serif;font-weight:800;font-size:1.5rem;color:var(--heading);
  text-decoration:none;display:flex;align-items:center;gap:.55rem;white-space:nowrap;flex-shrink:0;letter-spacing:-.02em}
.logo-mark{height:44px;width:44px;display:block;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
@media(max-width:640px){.logo-mark{height:36px;width:36px}.logo{font-size:1.3rem}}
.logo-sub{font-weight:600;font-size:.62rem;text-transform:uppercase;letter-spacing:.22em;color:var(--accent-dark);align-self:center}
.nav{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.nav-desktop>a:not(.btn):not(.nav-profil-btn){position:relative;color:var(--text);text-decoration:none;
  font-size:.84rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;padding:.2rem 0;opacity:.9}
.nav-desktop>a:not(.btn):not(.nav-profil-btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;
  height:2px;background:var(--accent);transition:right .28s ease}
.nav-desktop>a:not(.btn):not(.nav-profil-btn):hover{opacity:1;color:var(--heading)}
.nav-desktop>a:not(.btn):not(.nav-profil-btn):hover::after{right:0}

/* ===== Buttons ===== */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;padding:.9rem 1.8rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .25s,border-color .25s,color .2s}
.btn:active{transform:translateY(0) scale(.99)}
.btn-sm{padding:.55rem 1.1rem;font-size:.78rem}
.btn-lg{padding:1.05rem 2.1rem;font-size:.98rem}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.btn-accent{background:var(--sheen);color:var(--accent-ink);
  box-shadow:0 10px 26px -8px color-mix(in srgb,var(--accent) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-accent::after{content:"";position:absolute;top:-20%;left:-70%;width:45%;height:140%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-22deg);transition:left .6s cubic-bezier(.2,.7,.3,1);pointer-events:none}
.btn-accent:hover{transform:translateY(-2px)}
.btn-accent:hover::after{left:130%}
.btn-outline{background:transparent;border-color:var(--border);color:var(--text)}
.btn-outline:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent-dark);
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
.btn-danger{background:transparent;border-color:color-mix(in srgb,#e0584b 55%,var(--border));color:#e0584b}
.btn-danger:hover{transform:translateY(-2px);background:rgba(224,88,75,.1);border-color:#e0584b}

/* ===== Karten & Formulare ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.7rem;box-shadow:var(--shadow);margin-bottom:1.5rem;
  transition:transform .25s ease,box-shadow .3s ease,border-color .25s ease}
.form{display:flex;flex-direction:column;gap:1.1rem;max-width:520px}
.form label,.form-grid label{display:flex;flex-direction:column;gap:.4rem;
  font-weight:500;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.form input,.form select,.form textarea,
.form-grid input,.form-grid select,.form-grid textarea{
  font-family:'Inter',sans-serif;padding:.85rem .95rem;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);font-size:1rem;background:var(--field);color:var(--text);
  text-transform:none;letter-spacing:0;font-weight:400;transition:border-color .2s,box-shadow .2s}
.form textarea,.form-grid textarea{resize:vertical;line-height:1.6}
.form input:focus,.form select:focus,.form textarea:focus,
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;max-width:none}
.form-grid .full{grid-column:1/-1}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.edit-card{border-top:3px solid var(--accent)}

/* Meldungen */
.error,.success{padding:.95rem 1.15rem;border-radius:var(--radius-sm);font-weight:500;margin-bottom:1rem;border-left:3px solid currentColor}
.error{background:color-mix(in srgb,#e0584b 12%,var(--surface));color:#e0584b}
.success{background:color-mix(in srgb,#3fb27f 14%,var(--surface));color:#3fb27f}

/* ===== Badges ===== */
.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:.28rem .75rem;border-radius:999px;text-transform:uppercase;letter-spacing:.08em}
.badge-soft{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent-dark)}
.badge-gray{background:color-mix(in srgb,var(--muted) 20%,transparent);color:var(--muted)}
.status-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;padding:.32rem .82rem;border-radius:999px;
  background:color-mix(in srgb,var(--sc) 15%,transparent);color:var(--sc);
  border:1px solid color-mix(in srgb,var(--sc) 34%,transparent)}

/* ===== Tabelle ===== */
.user-table{width:100%;border-collapse:collapse}
.user-table th,.user-table td{text-align:left;padding:.85rem .55rem;border-bottom:1px solid var(--border);vertical-align:middle}
.user-table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.user-table tr:hover td{background:var(--surface-2)}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border);padding:2.4rem 0;text-align:center;margin-top:2rem;position:relative}
.site-footer::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:130px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.site-footer p{margin:.2rem 0;color:var(--muted)}
.site-footer strong{font-weight:800;font-size:1.2rem;color:var(--heading);letter-spacing:-.02em}

/* ===== Dashboard-Kacheln ===== */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:1.15rem;margin-top:1rem}
.dash-tile{position:relative;overflow:hidden;text-decoration:none;color:var(--text);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:1.9rem 1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .25s}
.dash-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--sheen);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.dash-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 38%,var(--border))}
.dash-tile:hover::before{transform:scaleX(1)}
.dash-emoji{font-size:2.4rem;margin-bottom:.55rem;line-height:1;transition:transform .25s ease}
.dash-tile:hover .dash-emoji{transform:scale(1.12)}
.dash-emoji-rel{position:relative;display:inline-block}
.dash-tile-badge{position:absolute;top:-6px;right:-12px;background:var(--sheen);color:var(--accent-ink);
  font-size:.66rem;font-weight:700;min-width:20px;height:20px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--surface);line-height:1}
.dash-tile h3{margin:0 0 .15rem;font-size:1.2rem}
.dash-tile p{margin:0;color:var(--muted);font-size:.9rem}

/* ===== Nav-Badge ===== */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);
  color:var(--accent-ink);font-size:.68rem;font-weight:700;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;margin-left:5px;line-height:1;vertical-align:middle}
.nav-postfach{position:relative}

/* ===== Bestellungen ===== */
.order-list{display:flex;flex-direction:column;gap:1.1rem}
.order-card{position:relative;padding:1.5rem 1.7rem;overflow:hidden}
.order-card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:var(--sheen)}
.order-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:.6rem}
.order-title{margin:0 0 .25rem;font-size:1.4rem}
.order-no{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.order-meta{display:flex;flex-wrap:wrap;gap:.55rem 1.3rem;font-size:.92rem;color:var(--muted);margin-top:.7rem}
.order-meta strong{color:var(--text)}
.order-desc{margin:.8rem 0 0;font-size:1rem}
.order-note{margin-top:.8rem;background:var(--surface-2);border-left:3px solid var(--accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:.75rem 1rem;font-size:.95rem}
.termin-chip{display:inline-flex;align-items:center;gap:.4rem;background:color-mix(in srgb,var(--accent) 16%,transparent);
  color:var(--accent-dark);font-weight:600;font-size:.84rem;padding:.32rem .82rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.status-track{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem}
.status-step{flex:1;min-width:48px;height:6px;border-radius:999px;background:var(--border)}
.status-step.done{background:var(--sheen);box-shadow:0 1px 6px -1px color-mix(in srgb,var(--accent) 60%,transparent)}

/* ===== Inhalte ===== */
.cat-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.5rem}
.cat-tab{background:var(--surface);border:1.5px solid var(--border);border-radius:999px;
  padding:.5rem 1.15rem;font-size:.82rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
  transition:background .2s,border-color .2s,color .2s,transform .15s}
.cat-tab:hover{border-color:var(--accent);color:var(--accent-dark);transform:translateY(-1px)}
.cat-tab.active{background:var(--sheen);color:var(--accent-ink);border-color:transparent;
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 55%,transparent)}
.content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.5rem;margin-top:1rem}
.content-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.content-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 32%,var(--border))}
.content-img{width:100%;aspect-ratio:16/10;object-fit:cover}
.content-card-body{padding:1.3rem 1.5rem;display:flex;flex-direction:column;flex:1}
.content-cat{font-size:.72rem;font-weight:600;color:var(--accent-dark);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.4rem}
.content-card h3{margin:.1rem 0 .5rem;font-size:1.35rem}
.content-card p{color:var(--muted);font-size:.95rem;margin:0 0 1rem;line-height:1.6}
.content-card .btn{margin-top:auto;align-self:flex-start}

/* Video & Kalender */
.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-sm);margin-top:.8rem}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.cal-frame{padding:0;overflow:hidden}
.cal-frame iframe{display:block;width:100%;height:1150px;border:0;background:var(--surface)}
@media(max-width:640px){.cal-frame iframe{height:1450px}}

/* ===== Postfach ===== */
.postfach-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem;flex-wrap:wrap;gap:.7rem}
.postfach-header h1{margin:0}
.postfach-back{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.postfach-with{color:var(--muted)}
.convo-list{display:flex;flex-direction:column;gap:.7rem}
.convo-item{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--text);padding:1.1rem 1.3rem}
.convo-item:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 35%,var(--border));box-shadow:var(--shadow-lg)}
.convo-unread{border-left:4px solid var(--accent)}
.convo-info{flex:1;display:flex;flex-direction:column;gap:.15rem}
.convo-name{font-weight:600;font-size:1.05rem}
.convo-badge{background:var(--sheen);color:var(--accent-ink);font-size:.74rem;font-weight:700;
  min-width:23px;height:23px;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.thread{display:flex;flex-direction:column;gap:.8rem;max-height:56vh;overflow-y:auto;
  padding:1.2rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius)}
.bubble-wrap{display:flex;flex-direction:column;max-width:78%}
.bubble-own{align-self:flex-end;align-items:flex-end}
.bubble-other{align-self:flex-start;align-items:flex-start}
.bubble-name{font-size:.74rem;font-weight:600;color:var(--muted);margin-bottom:.25rem;padding:0 .5rem;text-transform:uppercase;letter-spacing:.05em}
.bubble{padding:.72rem 1.05rem;border-radius:16px;line-height:1.5;word-break:break-word;box-shadow:var(--shadow-sm);font-size:.98rem}
.bubble-own .bubble{background:var(--sheen);color:var(--accent-ink);border-bottom-right-radius:5px}
.bubble-other .bubble{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:5px}
.bubble-footer{display:flex;align-items:center;gap:.4rem;margin-top:.25rem;padding:0 .3rem}
.bubble-time{font-size:.74rem;color:var(--muted)}

/* ===== Notif-Banner ===== */
.notif-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  border-radius:var(--radius);padding:.95rem 1.15rem;margin-bottom:1rem;font-size:.95rem}
.notif-banner span{flex:1;min-width:170px}

/* ===== Admin-KPIs ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem;margin-bottom:1.4rem}
@media(max-width:700px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat-card{text-align:center;padding:1.7rem 1rem;position:relative;overflow:hidden;
  text-decoration:none;color:inherit;display:block}
.stat-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--sheen)}
a.stat-card{transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .25s}
a.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 38%,var(--border))}
.stat-number{font-size:3rem;font-weight:800;line-height:1;color:var(--heading);letter-spacing:-.03em}
.stat-label{font-size:.8rem;font-weight:500;margin:.45rem 0 0;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* ===== Avatare ===== */
.avatar{width:var(--av,36px);height:var(--av,36px);border-radius:50%;object-fit:cover;flex-shrink:0;display:inline-flex}
.avatar-letter{align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:calc(var(--av,36px) / 2.3);user-select:none}

/* ===== Profil-Nav ===== */
.nav-profil-btn{display:flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--text);
  border:1.5px solid var(--border);border-radius:999px;padding:.28rem .8rem .28rem .32rem;transition:border-color .2s,background .2s}
.nav-profil-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.nav-profil-name{font-size:.85rem;font-weight:500;white-space:nowrap}
@media(max-width:640px){.nav-profil-name{display:none}.nav-profil-btn{padding:.28rem}}

/* ===== Zugangsdaten-Box ===== */
.creds-box{background:var(--surface);border:1px solid color-mix(in srgb,#3fb27f 42%,var(--border));
  border-radius:var(--radius);overflow:hidden;margin-bottom:1.4rem;box-shadow:var(--shadow)}
.creds-head{background:#3fb27f;color:#06231a;padding:.85rem 1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.88rem}
.creds-body{padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.8rem}
.creds-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.creds-label{font-size:.76rem;font-weight:600;color:var(--muted);min-width:130px;flex-shrink:0;text-transform:uppercase;letter-spacing:.06em}
.creds-val{background:var(--field);border:1px solid var(--border);border-radius:var(--radius-xs);
  padding:.45rem .9rem;font-size:1.02rem;font-family:ui-monospace,monospace;font-weight:600;flex:1;letter-spacing:.04em;user-select:all}

/* ===== Detail ===== */
.detail-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;font-size:.98rem;padding:.5rem 0;border-bottom:1px solid var(--border)}
.detail-row:last-child{border-bottom:none}
.detail-label{font-weight:500;min-width:150px;flex-shrink:0;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem}

/* Werber-Checkbox */
.werber-check-label{display:flex;align-items:center;gap:.6rem;font-weight:500;cursor:pointer;text-transform:none;letter-spacing:0;font-size:1rem}
.werber-check-label input{width:19px;height:19px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}

/* Status-Select */
.status-select{font-family:'Inter',sans-serif;padding:.5rem .8rem;border:1.5px solid var(--border);border-radius:var(--radius-xs);background:var(--field);color:var(--text);cursor:pointer;font-size:.88rem}

/* ===== Mobile Nav ===== */
.nav-mobile-tools{display:none}
@media(max-width:640px){
  .nav-desktop{display:none !important}
  .nav-mobile-tools{display:flex;align-items:center;gap:.5rem}
  .mobile-start-btn{font-weight:600}
  .header-inner{padding:.5rem .4rem;min-height:60px}
  .logo-sub{display:none}
  .page{padding-top:1.4rem;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px) + .5rem)}
  .content-grid{grid-template-columns:1fr}
  .card{padding:1.35rem}
}

/* ===== Bottom Navigation ===== */
.bottom-nav{display:none}
@media(max-width:640px){
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--header-bg);
    backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);
    border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -6px 24px -8px rgba(0,0,0,.4)}
}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:.7rem .2rem .55rem;text-decoration:none;color:var(--muted);transition:color .2s;-webkit-tap-highlight-color:transparent}
.bnav-item:active{opacity:.7}
.bnav-active{color:var(--accent)}
.bnav-active .bnav-icon{transform:scale(1.16)}
.bnav-icon{font-size:1.4rem;line-height:1;transition:transform .2s;display:block}
.bnav-icon-rel{position:relative}
.bnav-label{font-size:.62rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.bnav-badge{position:absolute;top:-5px;right:-7px;background:var(--sheen);color:var(--accent-ink);
  font-size:.52rem;font-weight:700;min-width:16px;height:16px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--surface)}

/* ===== Theme-Toggle ===== */
.theme-toggle{background:transparent;border:1.5px solid var(--border);border-radius:999px;width:42px;height:42px;
  font-size:1.1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;color:var(--text);
  transition:border-color .2s,transform .2s,background .2s}
.theme-toggle:hover{border-color:var(--accent);transform:translateY(-1px) rotate(-12deg);background:color-mix(in srgb,var(--accent) 9%,transparent)}

/* ===== Feinschliff ===== */
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--heading)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 40%,var(--border));border-radius:999px;border:3px solid var(--bg)}