/* =========================================
   Track & Taste — Website
   Design-Tokens & Layout übernommen aus dem
   Genspark-Design-Handoff (hifi).
   ========================================= */

:root{
  --orange: #F26B1F;
  --orange-deep: #E85D1A;
  --orange-soft: #fff4e8;
  --green: #4CAF50;
  --green-deep: #3E8E43;
  --green-soft: #e8f5e9;
  --primary-color: #F26B1F;
  --accent-color: #4CAF50;

  --ink: #1a1613;
  --ink-2: #3d3530;
  --muted: #8b827c;
  --line: #ede7df;
  --line-2: #f3ede4;
  --paper: #faf7f3;
  --paper-2: #f5f0e8;
  --white: #ffffff;

  --shadow-sm: 0 2px 8px -2px rgba(26,22,19,0.06);
  --shadow-md: 0 12px 32px -12px rgba(26,22,19,0.14);
  --shadow-lg: 0 24px 64px -24px rgba(26,22,19,0.22);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --container: 1240px;
  --nav-h: 76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv11";
  line-height:1.5;
}
h1,h2,h3,h4{margin:0;letter-spacing:-0.02em;text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 32px}

/* ---------------------- Buttons ---------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:600;font-size:14px;line-height:1;
  padding:12px 20px;border-radius:var(--radius-pill);
  border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:15px 26px;font-size:15px}
.btn-block{width:100%}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:var(--orange);box-shadow:0 8px 20px -8px rgba(242,107,31,0.5)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--white);border-color:var(--ink-2)}
.btn-cta{background:var(--orange);color:var(--white)}
.btn-cta:hover{background:var(--orange-deep);box-shadow:0 8px 20px -8px rgba(242,107,31,0.6)}
.btn-sm{padding:9px 16px;font-size:13px}
.btn-ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.35)}
.btn-ghost-light:hover{background:rgba(255,255,255,0.12);border-color:var(--white)}

/* ---------------------- NAV ---------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,243,0.88);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(26,22,19,0.06);
}
.nav-inner{display:flex;align-items:center;gap:24px;height:var(--nav-h)}
.brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.brand-wordmark{display:inline-flex;align-items:center;gap:12px}
.brand-icon{height:44px;width:auto;flex-shrink:0}
.brand-text{display:inline-flex;flex-direction:column;line-height:1;gap:3px}
.brand-name{font-size:22px;font-weight:800;letter-spacing:-0.03em;color:var(--ink);line-height:1}
.brand-name em{color:var(--primary-color);font-style:normal;font-weight:800;margin:0 1px}
.brand-tag{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:0.24em;color:var(--muted);
}
.nav-menu{display:flex;gap:28px;margin-left:32px;font-size:14px;font-weight:500;color:var(--ink-2)}
.nav-menu a{position:relative;padding:6px 0}
.nav-menu a:hover{color:var(--ink)}
.nav-menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.nav-menu a:hover::after,.nav-menu a.is-active::after{transform:scaleX(1)}
.btn-cta{margin-left:auto}
.nav-toggle{
  display:none;background:none;border:0;padding:8px;cursor:pointer;
  flex-direction:column;gap:5px;margin-left:auto;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}

@media (max-width:1080px){
  .nav-menu{display:none;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--white);flex-direction:column;padding:24px 32px;gap:16px;box-shadow:var(--shadow-md);border-top:1px solid var(--line);margin-left:0}
  .nav-menu.open{display:flex}
  .nav-toggle{display:flex}
  .btn-cta{margin-left:0}
}

/* ---------------------- HERO ---------------------- */
.hero{padding:80px 0 100px;overflow:hidden;position:relative}
.hero::before{
  content:"";position:absolute;top:-10%;right:-10%;width:60%;height:80%;
  background:radial-gradient(ellipse at center, rgba(242,107,31,0.08), transparent 60%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--orange);letter-spacing:0.14em;text-transform:uppercase;
  margin-bottom:24px;font-weight:500;
}
.eyebrow .dot{
  width:6px;height:6px;background:var(--orange);border-radius:50%;
  box-shadow:0 0 0 4px rgba(242,107,31,0.15);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(242,107,31,0.15)}
  50%{box-shadow:0 0 0 8px rgba(242,107,31,0.05)}
}
.hero-h1{font-size:clamp(40px,5.6vw,76px);font-weight:900;letter-spacing:-0.035em;line-height:0.98;margin-bottom:24px}
.hero-h1 em{color:var(--orange);font-style:normal;position:relative;white-space:nowrap}
.hero-h1 em::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:6%;height:12%;
  background:var(--orange-soft);z-index:-1;border-radius:4px;
}
.hero-lede{font-size:18px;line-height:1.55;color:var(--muted);max-width:480px;margin-bottom:36px}
.hero-ctas{display:flex;gap:12px;margin-bottom:56px;flex-wrap:wrap}
.hero-stats{display:flex;align-items:center;gap:32px;padding-top:32px;border-top:1px solid var(--line)}
.stat-sep{width:1px;height:44px;background:var(--line)}
.stat-num{font-size:28px;font-weight:800;letter-spacing:-0.02em;color:var(--ink);line-height:1}
.stat-unit{font-size:14px;font-weight:600;color:var(--muted);margin-left:2px}
.stat-lbl{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.3}
.hero-image-wrap{position:relative}
.hero-image{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-lg)}
.hero-image img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-image-wrap{max-width:520px;margin:0 auto}
  .hero-stats{gap:20px}
  .stat-sep{height:36px}
}

/* ---------------------- SECTION HEAD ---------------------- */
.section-head{margin-bottom:48px;max-width:720px}
.section-head-flex{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;max-width:none;flex-wrap:wrap}
.section-head-center{text-align:center;margin-left:auto;margin-right:auto}
.section-title{font-size:clamp(30px,3.5vw,44px);font-weight:800;letter-spacing:-0.03em;line-height:1.05;margin-bottom:16px}
.section-lede{font-size:17px;color:var(--muted);max-width:560px;line-height:1.55}
.section-head-center .section-lede{margin-left:auto;margin-right:auto}

/* ---------------------- TRACKING ---------------------- */
.tracking{padding:120px 0;background:var(--white)}
.tracking-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.track-card{
  padding:32px 28px;background:var(--paper);border-radius:var(--radius-lg);
  border:1px solid var(--line);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.track-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--orange-soft)}
.track-icon{
  width:56px;height:56px;border-radius:var(--radius-md);background:var(--orange-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.track-card h3{font-size:18px;font-weight:700;margin-bottom:8px;letter-spacing:-0.01em}
.track-card p{font-size:14px;color:var(--muted);line-height:1.55}
@media (max-width:900px){.tracking-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tracking-grid{grid-template-columns:1fr}}

/* ---------------------- MENU ---------------------- */
.menu{padding:120px 0;background:var(--paper)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bowl-card{
  background:var(--white);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.bowl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.bowl-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.bowl-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.bowl-card:hover .bowl-img img{transform:scale(1.04)}
.bowl-tag{
  position:absolute;top:16px;left:16px;background:var(--orange);color:var(--white);
  font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--radius-pill);
}
.bowl-tag-green{background:var(--green)}
.bowl-tag-dark{background:var(--ink)}
.bowl-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:14px;flex:1}
.bowl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bowl-head h3{font-size:22px;font-weight:700;letter-spacing:-0.02em}
.bowl-price{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:500;color:var(--ink)}
.bowl-desc{font-size:14px;color:var(--muted);line-height:1.55}
.bowl-macros{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding-top:16px;border-top:1px dashed var(--line);margin-top:auto;
}
.mac{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.mac-val{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:600;color:var(--ink);line-height:1}
.mac-unit{font-size:11px;color:var(--muted);margin-top:-2px}
.mac-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-top:2px}
.mac-kcal .mac-val{color:var(--orange)}
.mac-kcal{grid-column:span 1;text-align:right;align-items:flex-end}
@media (max-width:900px){.menu-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* ---------------------- KONFIGURATOR ---------------------- */
.config{padding:120px 0;background:var(--white)}
.config-grid{display:grid;grid-template-columns:1fr 400px;gap:48px;align-items:start}
.config-choices{display:flex;flex-direction:column;gap:32px}
.choice-step{background:var(--paper);border-radius:var(--radius-lg);padding:28px 28px 26px;border:1px solid var(--line)}
.choice-head{margin-bottom:20px}
.choice-head h3{font-size:20px;font-weight:700;letter-spacing:-0.01em}
.choice-hint{font-size:13px;color:var(--muted);font-weight:500}
.choice-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:14px 16px;background:var(--white);border:1.5px solid var(--line);
  border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:all .15s ease;
}
.opt:hover{border-color:var(--ink-2);transform:translateY(-1px)}
.opt.active{border-color:var(--orange);background:var(--orange-soft);box-shadow:0 4px 12px -4px rgba(242,107,31,0.3)}
.opt.active .opt-name{color:var(--orange-deep)}
.opt-name{font-weight:600;font-size:14px;color:var(--ink)}
.opt-info{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace}
@media (max-width:1100px){.choice-options{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.choice-options{grid-template-columns:1fr}}
.config-summary{position:sticky;top:calc(var(--nav-h) + 24px)}
.summary-inner{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
.summary-head{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.summary-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:0.14em;text-transform:uppercase}
.summary-head h3{font-size:24px;font-weight:800;letter-spacing:-0.02em;margin-top:4px}
.summary-macros{margin-bottom:24px}
.macro-bar{margin-bottom:20px}
.macro-bar-head{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:8px}
.macro-bar-head b{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--ink);font-weight:600}
.bar{height:6px;background:var(--line);border-radius:var(--radius-pill);overflow:hidden}
.bar-fill{height:100%;background:var(--orange);border-radius:var(--radius-pill);transition:width .3s cubic-bezier(.22,1,.36,1)}
.bar-kcal{background:linear-gradient(90deg, var(--orange), var(--orange-deep))}
.bar-note{font-size:11px;color:var(--muted);margin-top:6px;font-family:'JetBrains Mono',monospace}
.macro-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
.mrow{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--white);border-radius:var(--radius-sm)}
.mrow-head{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--ink-2)}
.mrow-val{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:var(--ink)}
.chip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font-size:11px;font-weight:700;color:var(--white)}
.chip-orange{background:var(--orange)}
.chip-green{background:var(--green)}
.chip-ink{background:var(--ink)}
.summary-selected{min-height:60px;padding:16px;background:var(--white);border-radius:var(--radius-md);border:1px dashed var(--line);margin-bottom:20px}
.empty-hint{font-size:13px;color:var(--muted);text-align:center;padding:12px 0}
.selected-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px}
.selected-item + .selected-item{border-top:1px dashed var(--line-2)}
.selected-item .sel-name{color:var(--ink-2)}
.selected-item .sel-group{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-right:8px}
.selected-item .sel-kcal{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.summary-price{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px;
}
.summary-price > span:first-child{font-size:14px;font-weight:500;color:var(--muted)}
.price-val{font-size:22px;font-weight:800;letter-spacing:-0.02em}
.price-val b{font-family:'JetBrains Mono',monospace;font-weight:800}
.summary-note{font-size:11px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}
@media (max-width:960px){.config-grid{grid-template-columns:1fr}.config-summary{position:static}}

/* ---------------------- SO FUNKTIONIERT'S ---------------------- */
.how{padding:120px 0;background:var(--paper)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.how-step{
  background:var(--white);border-radius:var(--radius-lg);padding:32px 28px;
  border:1px solid var(--line);display:flex;flex-direction:column;gap:20px;min-height:280px;
}
.how-step-image{padding:0;overflow:hidden;border:0}
.how-step-image img{width:100%;height:100%;object-fit:cover;min-height:280px}
.how-body h3{font-size:22px;font-weight:700;letter-spacing:-0.02em;margin-bottom:10px}
.how-body p{font-size:14px;color:var(--muted);line-height:1.55}
.how-time{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-2);
  display:flex;align-items:center;gap:8px;
}
.how-time::before{content:"⏱";font-size:14px}
@media (max-width:900px){
  .how-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .how-step-image{order:99}
  .how-step{min-height:auto}
}

/* ---------------------- INSTAGRAM ---------------------- */
.social{padding:120px 0;background:var(--white)}
.insta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.insta-tile{aspect-ratio:1/1;border-radius:var(--radius-md);overflow:hidden;position:relative;background:var(--paper)}
.insta-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.insta-tile:hover img{transform:scale(1.05)}
.insta-quote{display:flex;flex-direction:column;justify-content:center;padding:32px;background:var(--orange);color:var(--white)}
.quote-mark{font-size:64px;font-weight:900;line-height:0.6;margin-bottom:12px;opacity:0.4}
.insta-quote p{font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-0.01em}
.quote-author{font-size:12px;margin-top:16px;opacity:0.85;font-weight:500}
@media (max-width:700px){.insta-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.insta-grid{grid-template-columns:1fr}}

/* ---------------------- QR SECTION ---------------------- */
.qr-section{padding:120px 0;background:var(--primary-color);color:var(--white)}
.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.qr-title{font-size:clamp(32px,4.2vw,56px);font-weight:900;letter-spacing:-0.035em;line-height:0.98;margin-bottom:20px;color:inherit}
.qr-lede{font-size:17px;line-height:1.6;opacity:0.9;max-width:460px;margin-bottom:28px}
.qr-lede strong{font-weight:700}
.qr-features{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.qr-feat{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500}
.qr-feat svg{flex-shrink:0;background:rgba(255,255,255,0.15);padding:4px;border-radius:50%;width:28px;height:28px}
.btn-qr{
  background:var(--white);color:var(--ink);padding:15px 26px;font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-pill);
}
.btn-qr:hover{background:var(--ink);color:var(--white);box-shadow:0 8px 20px -8px rgba(0,0,0,0.35)}
.qr-card-wrap{display:flex;justify-content:center;align-items:center}
.qr-card{
  background:var(--white);border-radius:var(--radius-xl);padding:24px;max-width:380px;width:100%;
  box-shadow:0 32px 80px -24px rgba(0,0,0,0.35);color:var(--ink);
  transform:rotate(-2deg);transition:transform .3s ease;
}
.qr-card:hover{transform:rotate(0deg) scale(1.02)}
.qr-card-head{
  display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-2);
}
.qr-card-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-color);box-shadow:0 0 0 3px rgba(76,175,80,0.15)}
.qr-card-url{font-weight:500}
.qr-card-image{padding:20px 12px;display:flex;justify-content:center}
.qr-card-image img{width:100%;height:auto;max-width:280px;display:block}
.qr-card-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;border-top:1px solid var(--line)}
.qr-card-foot > div{display:flex;flex-direction:column;gap:2px}
.qr-card-foot strong{font-size:15px;font-weight:700;letter-spacing:-0.01em}
.qr-card-foot span{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;letter-spacing:0.04em}
.qr-card-logo{height:36px;width:auto}
@media (max-width:900px){.qr-grid{grid-template-columns:1fr;gap:48px}.qr-card{transform:none}}

/* ---------------------- FOOTER ---------------------- */
.footer{background:var(--ink);color:rgba(255,255,255,0.75);padding:80px 0 32px}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-brand p{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.6);max-width:320px;margin-top:20px}
.footer-wordmark{display:inline-flex;align-items:center;gap:14px}
.footer-icon{height:52px;width:auto}
.footer-brand-name{display:block;font-size:22px;font-weight:800;letter-spacing:-0.03em;color:var(--white);line-height:1}
.footer-brand-name em{color:var(--primary-color);font-style:normal;font-weight:800;margin:0 1px}
.footer-brand-tag{
  display:block;margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:0.24em;color:rgba(255,255,255,0.5);
}
.footer-col h4{color:var(--white);font-size:14px;font-weight:600;margin-bottom:16px;letter-spacing:-0.01em}
.footer-col p{font-size:14px;line-height:1.75;color:rgba(255,255,255,0.6)}
.footer-col p + p{margin-top:12px}
.footer-col a{color:rgba(255,255,255,0.75);transition:color .15s ease}
.footer-col a:hover{color:var(--orange)}
.footer-bottom{
  display:flex;justify-content:space-between;padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.1);font-size:12px;color:rgba(255,255,255,0.5);
}
.footer-bottom a:hover{color:var(--orange)}
@media (max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
}
@media (max-width:520px){.footer-inner{grid-template-columns:1fr}}

/* ---------------------- MODAL ---------------------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(26,22,19,0.55);backdrop-filter:blur(6px)}
.modal-inner{
  position:relative;background:var(--white);border-radius:var(--radius-lg);
  padding:40px;max-width:440px;width:100%;text-align:center;
  box-shadow:var(--shadow-lg);animation:pop .3s cubic-bezier(.22,1,.36,1);
}
@keyframes pop{from{transform:scale(0.92) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-close{
  position:absolute;top:16px;right:16px;background:transparent;border:0;
  font-size:28px;color:var(--muted);cursor:pointer;width:36px;height:36px;border-radius:50%;transition:background .15s ease;
}
.modal-close:hover{background:var(--paper)}
.modal-icon{margin-bottom:20px}
.modal-inner h3{font-size:24px;font-weight:800;letter-spacing:-0.02em;margin-bottom:10px}
.modal-inner p{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:20px}
.modal-summary{background:var(--paper);border-radius:var(--radius-md);padding:16px;text-align:left;font-size:13px;color:var(--ink-2);line-height:1.7;margin-bottom:24px}
.modal-summary strong{color:var(--ink);font-weight:600}
.modal-summary .msum-row{display:flex;justify-content:space-between;gap:12px}
.modal-summary .msum-row + .msum-row{border-top:1px dashed var(--line);padding-top:6px;margin-top:6px}

/* =========================================
   SUBPAGES (Logo-Kit, Druck)
   ========================================= */
.subpage{padding:64px 0 120px}
.breadcrumb{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:28px;
  display:flex;gap:10px;align-items:center;
}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb span{opacity:0.5}

.page-title{font-size:clamp(34px,4.6vw,60px);font-weight:900;letter-spacing:-0.035em;line-height:1.0;margin-bottom:20px;max-width:820px}
.page-lede{font-size:18px;color:var(--muted);line-height:1.6;max-width:660px;margin-bottom:16px}
.page-meta{
  display:flex;gap:24px;flex-wrap:wrap;margin-top:28px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted);
}
.page-meta b{display:block;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);text-transform:none;margin-top:4px}

.block{margin-top:88px}
.block-head{margin-bottom:32px;max-width:720px}
.block-head h2{font-size:clamp(24px,2.8vw,34px);font-weight:800;letter-spacing:-0.03em;margin-bottom:10px}
.block-head p{font-size:16px;color:var(--muted);line-height:1.6}

/* Logo variant cards */
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.logo-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.logo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.logo-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.logo-card-head h3{font-size:16px;font-weight:700;letter-spacing:-0.01em}
.logo-canvas{
  padding:32px;background:
    linear-gradient(45deg, var(--line-2) 25%, transparent 25%, transparent 75%, var(--line-2) 75%),
    linear-gradient(45deg, var(--line-2) 25%, transparent 25%, transparent 75%, var(--line-2) 75%);
  background-size:22px 22px;background-position:0 0,11px 11px;
  display:flex;align-items:center;justify-content:center;min-height:260px;
}
.logo-canvas img{max-height:200px;width:auto;object-fit:contain}
.logo-card-body{padding:22px;display:flex;flex-direction:column;gap:14px;flex:1}
.logo-note{font-size:13px;color:var(--muted);line-height:1.55}
.logo-best{
  display:inline-flex;align-self:flex-start;
  font-size:11px;font-weight:600;color:var(--orange-deep);background:var(--orange-soft);
  padding:3px 8px;border-radius:6px;
}
.logo-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
@media (max-width:900px){.logo-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

.asset-list{display:flex;flex-direction:column;gap:2px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-2)}
.asset-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dashed var(--line)}
.asset-row:last-child{border-bottom:0}
.asset-row span:last-child{color:var(--muted)}

/* Swatches */
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.swatch{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.swatch-color{height:88px}
.swatch-info{padding:14px 16px}
.swatch-info strong{display:block;font-size:13px;font-weight:700;margin-bottom:2px}
.swatch-hex{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--orange-deep)}
.swatch-use{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.45}

/* Background test strip */
.bg-test{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bg-sample{
  aspect-ratio:1/1;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  padding:16px;border:1px solid var(--line);
}
.bg-sample img{max-height:70%;max-width:80%;object-fit:contain}
.bg-sample .lbl{
  position:relative;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:0.08em;text-transform:uppercase;
}
@media (max-width:900px){.bg-test{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.bg-test{grid-template-columns:repeat(2,1fr)}}

/* Scale test */
.scale-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.scale-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.scale-card h4{font-size:14px;font-weight:700;margin-bottom:6px}
.scale-rows{display:flex;flex-direction:column;gap:0}
.scale-row{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-top:1px dashed var(--line)}
.scale-row:first-child{border-top:0}
.scale-label{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
@media (max-width:900px){.scale-grid{grid-template-columns:1fr}}

/* Slide / browser / packaging mockups */
.mock-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.mock-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.mock-label{
  padding:14px 20px;border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);
}
.mock-body{padding:28px;display:flex;align-items:center;justify-content:center;background:var(--paper);flex:1}
@media (max-width:900px){.mock-grid{grid-template-columns:1fr}}

/* 16:9 slide mock */
.slide-frame{
  aspect-ratio:16/9;width:100%;background:linear-gradient(180deg,#faf7f3 0%,#ffffff 100%);
  border-radius:var(--radius-md);box-shadow:0 24px 64px -24px rgba(0,0,0,0.35);
  padding:4.5% 5.5%;display:flex;flex-direction:column;
}
.slide-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:auto}
.slide-head img{height:38px;width:auto}
.slide-clock{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:0.08em}
.slide-kicker{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--orange);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:8px}
.slide-title{font-size:clamp(16px,2.6vw,34px);font-weight:800;letter-spacing:-0.03em;line-height:0.95}
.slide-title em{color:var(--orange);font-style:normal}
.slide-lede{font-size:clamp(8px,1vw,13px);color:var(--muted);margin-top:10px;line-height:1.5;max-width:70%}

/* Browser mock */
.browser-frame{width:100%;background:#e9e4dd;border-radius:var(--radius-md);padding:14px;box-shadow:0 24px 64px -24px rgba(0,0,0,0.25)}
.browser-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.browser-dots{display:flex;gap:5px}
.browser-dots i{width:9px;height:9px;border-radius:50%;background:rgba(26,22,19,0.15);display:block}
.browser-url{
  flex:1;background:var(--white);border-radius:var(--radius-pill);padding:6px 14px;
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-2);
  display:flex;align-items:center;gap:8px;
}
.browser-url i{width:7px;height:7px;border-radius:50%;background:var(--green);display:block;flex-shrink:0}
.browser-body{background:var(--white);border-radius:var(--radius-sm);overflow:hidden}
.browser-nav{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line)}
.browser-nav img{height:26px;width:auto}
.browser-nav .bn-links{display:flex;gap:14px;font-size:10px;font-weight:500;color:var(--ink-2)}
.browser-nav .bn-cta{
  margin-left:auto;background:var(--orange);color:var(--white);font-size:9px;font-weight:600;
  padding:6px 12px;border-radius:var(--radius-pill);
}
.browser-hero{display:grid;grid-template-columns:1.1fr 0.9fr;gap:20px;padding:22px 20px 26px;align-items:center}
.browser-hero h5{font-size:clamp(13px,1.6vw,20px);font-weight:800;letter-spacing:-0.03em;line-height:1.05;margin-bottom:8px}
.browser-hero p{font-size:10px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.browser-pills{display:flex;gap:8px}
.browser-pills span{font-size:9px;font-weight:600;padding:6px 12px;border-radius:var(--radius-pill);background:var(--ink);color:var(--white)}
.browser-pills span:last-child{background:transparent;color:var(--ink);border:1px solid var(--line)}
.browser-canvas{
  aspect-ratio:1/1;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#fff4e8,#e8f5e9);
}
.browser-canvas img{max-height:70%;max-width:74%;object-fit:contain}

/* Packaging */
.pack-grid{display:grid;grid-template-columns:1.1fr 0.9fr 0.9fr;gap:20px}
.pack{position:relative;border-radius:var(--radius-md);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:280px}
.pack-lid{
  background:radial-gradient(circle at 35% 30%, #d4a574, #a67846 55%, #8b6236 100%);
}
.pack-lid::after{
  content:"";position:absolute;inset:9%;border:2px dotted rgba(255,255,255,0.4);border-radius:50%;
}
.pack-lid img{max-height:44%;max-width:56%;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15))}
.pack-shirt{background:linear-gradient(160deg,#2d3130,#1a1c1c)}
.pack-shirt img{max-width:65%;max-height:42%;object-fit:contain}
.pack-card{
  background:#faf7f3;aspect-ratio:1.618/1;min-height:0;
  padding:7% 8%;flex-direction:column;align-items:flex-start;justify-content:space-between;
  box-shadow:0 12px 32px -8px rgba(0,0,0,0.2);
}
.pack-card img{max-height:44px;width:auto;align-self:flex-start}
.pack-card .pc-meta{align-self:flex-start}
.pack-card .pc-name{font-size:11px;font-weight:700;letter-spacing:-0.01em;color:var(--ink)}
.pack-card .pc-line{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);line-height:1.6}
.pack-caption{padding:14px 20px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);background:var(--white)}
@media (max-width:900px){.pack-grid{grid-template-columns:1fr}}

/* Typography table */
.type-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.type-table th,.type-table td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
.type-table th{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--paper);
}
.type-table tr:last-child td{border-bottom:0}
.type-table td:last-child{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-2)}

/* Download / chezmoi cards */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.dl-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:20px;display:flex;flex-direction:column;gap:12px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.dl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.dl-card h4{font-size:15px;font-weight:700}
.dl-card p{font-size:13px;color:var(--muted);line-height:1.55}
.dl-card .btn{align-self:flex-start;margin-top:auto}

/* Note callout */
.note{
  display:flex;gap:14px;padding:20px 22px;border-radius:var(--radius-md);
  background:var(--orange-soft);border-left:3px solid var(--orange);
  font-size:14px;line-height:1.6;color:var(--ink-2);
}
.note svg{flex-shrink:0;margin-top:2px}
.note-dark{background:var(--ink);color:rgba(255,255,255,0.8);border-left-color:var(--orange)}
.note-dark strong{color:var(--white)}

/* QR hero on brand page */
.qr-hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.qr-hero img{max-width:300px;width:100%}
@media (max-width:900px){.qr-hero{grid-template-columns:1fr;gap:32px}}

/* ---------------------- REDUCED MOTION ---------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---------------------- PRINT SHEETS ---------------------- */
.sheet{
  background:var(--white);border-radius:var(--radius-md);border:1px solid var(--line);
  padding:48px;margin-bottom:28px;
}
.sheet h3{font-size:20px;font-weight:800;letter-spacing:-0.02em;margin-bottom:6px}
.sheet .sheet-note{font-size:13px;color:var(--muted);margin-bottom:28px}
.sheet-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:center}
.sheet-item{text-align:center}
.sheet-item .cap{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.sheet-full{display:flex;justify-content:center}
@media (max-width:760px){.sheet{padding:28px}.sheet-row{grid-template-columns:1fr}}

@media print{
  .nav,.footer,.no-print{display:none !important}
  body{background:#fff}
  .subpage{padding:0}
  .sheet{break-inside:avoid;page-break-inside:avoid;border:0;padding:0;margin-bottom:48px}
}