/* ============================================================
   THE MORNING CAT — brand site stylesheet
   Shared by the EN and DE landing pages.
   ------------------------------------------------------------
   Direction: the brand's signature is the Instagram "reel label" —
   a coral-orange sticker tag with bold white text, weekday-themed
   (sampled from the feed: #F8583F). The page alternates warm
   "paper" sections with dark "scene" sections (the reel backdrop)
   and is structured by the week. Display face Bricolage Grotesque,
   body Hanken Grotesk. Pure CSS/SVG — no image dependencies.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --orange:#F8583F;        /* the reel label — signature accent */
  --orange-700:#D8431F;    /* hover / pressed                  */
  --amber:#F2A63C;         /* warm sun, used sparingly         */
  --ink:#17120E;           /* warm near-black (scene sections) */
  --ink-2:#241B14;         /* raised surface on dark           */
  --ink-soft:#C9B9A4;      /* muted text on dark               */
  --paper:#F4ECDD;         /* latte background                 */
  --card:#FFFCF6;          /* light card surface               */
  --espresso:#241A12;      /* text on paper                    */
  --muted:#8A7560;         /* captions on paper                */
  --line:#E3D5BF;          /* hairline on paper                */
  --line-dark:#3A2C20;     /* hairline on dark                 */

  --r-pill:999px;
  --r-lg:24px;
  --r-md:16px;
  --r-tag:7px;
  --maxw:1180px;
  --shadow:0 24px 60px -30px rgba(35,18,8,.55);
  --shadow-sm:0 12px 30px -20px rgba(35,18,8,.5);

  --f-display:"Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --f-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--espresso);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.04;margin:0;letter-spacing:-.02em}
::selection{background:var(--orange);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:96px 0}

/* visible keyboard focus everywhere */
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

/* ============================================================
   SIGNATURE — the reel label tag
   ============================================================ */
.tag{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--orange);color:#fff;
  font-family:var(--f-body);font-weight:800;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.42em .72em;border-radius:var(--r-tag);
  box-shadow:0 10px 22px -12px rgba(216,67,31,.85);
  white-space:nowrap;
}
.tag--tilt{transform:rotate(-2.5deg)}
.tag .day{opacity:1}
.tag .sep{opacity:.6;font-weight:700}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--f-body);font-weight:800;font-size:1rem;
  padding:.92em 1.6em;border-radius:var(--r-pill);border:2px solid transparent;
  cursor:pointer;transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn svg{width:18px;height:18px}
.btn--orange{background:var(--orange);color:#fff;box-shadow:0 14px 30px -16px rgba(216,67,31,.9)}
.btn--orange:hover{background:var(--orange-700);transform:translateY(-2px)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{transform:translateY(-2px);background:#000}
.btn--ghost-d{background:transparent;border-color:rgba(244,236,221,.45);color:var(--paper)}
.btn--ghost-d:hover{border-color:var(--paper);transform:translateY(-2px)}
.btn--ghost-l{background:transparent;border-color:var(--espresso);color:var(--espresso)}
.btn--ghost-l:hover{background:var(--espresso);color:var(--paper);transform:translateY(-2px)}

/* ---------- eyebrow ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-700)}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--orange)}
.on-dark .eyebrow{color:var(--amber)}

/* ============================================================
   PROMO + HEADER
   ============================================================ */
.promo{background:var(--ink);color:var(--paper);text-align:center;font-size:.84rem;font-weight:600;padding:.6em 1em}
.promo b{color:var(--amber)}

header.site{position:sticky;top:0;z-index:60;background:rgba(244,236,221,.85);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:800;font-size:1.28rem;letter-spacing:-.02em;color:var(--espresso)}
.brand img{width:40px;height:40px;flex:0 0 auto}
.brand .mark{width:40px;height:40px;flex:0 0 auto}
.nav-links{display:flex;gap:28px;margin-left:auto;font-weight:700;font-size:.96rem}
.nav-links a{position:relative;padding:.3em 0;color:var(--espresso)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-3px;height:3px;width:0;background:var(--orange);border-radius:3px;transition:width .2s ease}
.nav-links a:hover::after{width:100%}
.nav-cta{margin-left:4px}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:9px}
.burger span{display:block;width:24px;height:2.5px;background:var(--espresso);margin:5px 0;border-radius:3px;transition:.25s}

/* ============================================================
   HERO — dark "scene" + reel-still mockup
   ============================================================ */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;padding:84px 0 96px}
.hero::before{content:"";position:absolute;width:680px;height:680px;top:-260px;right:-160px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(242,166,60,.22), rgba(248,88,63,.08) 45%, rgba(0,0,0,0) 70%);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.7rem,6vw,4.7rem);margin:22px 0 0}
.hero h1 .hl{color:var(--paper)}
.hero h1 .tag{font-size:.42em;vertical-align:.28em;margin:0 .12em}
.hero .lead{font-size:1.18rem;color:var(--ink-soft);max-width:40ch;margin:22px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;color:var(--ink-soft);font-weight:700;font-size:.82rem}
.hero-meta span{display:inline-flex;align-items:center;gap:.5em}
.hero-meta b{color:var(--paper);font-size:1.05rem}

/* reel-still mockup */
.reel-stage{position:relative;display:flex;justify-content:center}
.reel{
  position:relative;width:min(310px,82%);aspect-ratio:9/16;border-radius:28px;overflow:hidden;
  background:linear-gradient(165deg,#2c2017,#191510 60%,#120e0a);
  border:1px solid var(--line-dark);box-shadow:var(--shadow);
}
.reel--float{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(-1deg)}}
.reel .scene{position:absolute;inset:0}
.reel .glow{position:absolute;left:50%;top:30%;width:84%;height:52%;transform:translateX(-50%);
  background:radial-gradient(circle at center, rgba(242,166,60,.32), rgba(0,0,0,0) 68%)}
/* foreground scrim so the caption stays legible over the cat */
.reel .scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(to top, rgba(10,7,5,.72), rgba(10,7,5,0))}
.reel .cat{position:absolute;left:50%;bottom:0;width:92%;transform:translateX(-50%)}
.reel .reel-tag{position:absolute;top:16px;left:16px;z-index:2}
.reel .ricon{position:absolute;top:15px;right:15px;z-index:2;color:var(--paper);opacity:.92}
.reel .ricon svg{width:24px;height:24px}
.reel .ui{position:absolute;right:14px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:16px;align-items:center;color:var(--paper)}
.reel .ui svg{width:24px;height:24px}
.reel .ui b{font-size:.7rem;font-weight:700;margin-top:-10px}
.reel .cap{position:absolute;left:16px;right:62px;bottom:16px;z-index:2;color:var(--paper);font-size:.82rem;line-height:1.35;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.reel .cap .handle{font-weight:800}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{background:var(--orange);color:#fff;overflow:hidden;border-top:3px solid var(--orange-700);border-bottom:3px solid var(--orange-700)}
.ticker-track{display:flex;gap:42px;white-space:nowrap;padding:14px 0;font-family:var(--f-display);font-weight:800;font-size:1.05rem;letter-spacing:.01em;animation:scroll 30s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:18px}
.ticker-track span::after{content:"●";font-size:.5em;opacity:.7}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   THE WEEK — 7 reel cards
   ============================================================ */
.week{background:var(--paper)}
.head{max-width:680px;margin:0 auto 52px;text-align:center}
.head h2{font-size:clamp(2rem,4.4vw,3rem);margin-top:16px}
.head p{color:var(--muted);font-size:1.08rem;margin:14px 0 0}
.week-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.qcard{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 22px 24px;box-shadow:var(--shadow-sm);overflow:hidden;
  display:flex;flex-direction:column;gap:16px;min-height:230px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.qcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.qcard::after{content:"";position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(242,166,60,.18), rgba(0,0,0,0) 70%)}
.qcard .top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.qcard .play-mini{width:40px;height:40px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center}
.qcard .play-mini svg{width:12px;height:12px;margin-left:2px;fill:var(--paper)}
.qcard blockquote{margin:0;font-family:var(--f-display);font-weight:700;font-size:1.18rem;line-height:1.22;color:var(--espresso);position:relative;z-index:1}
.qcard .meta{margin-top:auto;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.78rem;font-weight:700;position:relative;z-index:1}
.qcard .meta .dot{width:6px;height:6px;border-radius:50%;background:var(--orange)}
/* Sunday card spans wide as the closer */
.qcard--sun{grid-column:span 2;background:var(--ink);border-color:var(--line-dark)}
.qcard--sun blockquote{color:var(--paper);font-size:1.42rem}
.qcard--sun .meta{color:var(--ink-soft)}
.week-cta{text-align:center;margin-top:44px}

/* ============================================================
   SHOPS — dark, Instagram as home base + 3 platforms
   ============================================================ */
.shops{background:var(--ink);color:var(--paper)}
.shops .head p{color:var(--ink-soft)}
.home-base{
  max-width:760px;margin:0 auto 44px;background:linear-gradient(135deg,#2a1f16,#1c1610);
  border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:30px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;
}
.home-base .ig{display:flex;align-items:center;gap:18px}
.home-base .ig .ig-mark{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#F2A63C,#F8583F 55%,#D8431F);flex:0 0 auto}
.home-base .ig .ig-mark svg{width:30px;height:30px;stroke:#fff}
.home-base h3{font-size:1.3rem}
.home-base p{margin:4px 0 0;color:var(--ink-soft);font-size:.95rem}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shop{
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r-md);
  padding:26px 24px;display:flex;flex-direction:column;gap:8px;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.shop:hover{transform:translateY(-4px);border-color:var(--orange);background:#2c2118}
.shop .num{font-family:var(--f-display);font-weight:800;color:var(--amber);font-size:.85rem;letter-spacing:.05em}
.shop h3{font-size:1.32rem}
.shop p{color:var(--ink-soft);font-size:.92rem;margin:2px 0 14px}
.shop .go{margin-top:auto;font-weight:800;color:var(--paper);display:inline-flex;align-items:center;gap:.45em;font-size:.92rem}
.shop:hover .go{color:var(--orange)}
.shop .go svg{width:16px;height:16px}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.about-art{position:relative;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 120% at 30% 20%, #fff4df, #f0e0c4 60%, #e7d3b2);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center}
.about-art .tag{position:absolute;top:18px;left:18px}
.about h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin-top:14px}
.about p{color:var(--espresso);font-size:1.08rem;margin:16px 0 0}
.about p .lede::first-letter{font-family:var(--f-display);font-size:3rem;line-height:.8;float:left;margin:.04em .1em 0 0;color:var(--orange)}
.about .sig{margin-top:18px;color:var(--muted);font-weight:700;font-size:.92rem}

/* ============================================================
   FOLLOW CTA — orange block
   ============================================================ */
.follow{background:var(--orange);color:#fff;text-align:center;position:relative;overflow:hidden}
.follow::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%)}
.follow-inner{position:relative;z-index:1;max-width:660px;margin:0 auto}
.follow h2{font-size:clamp(2.1rem,4.8vw,3.3rem);color:#fff}
.follow p{font-size:1.12rem;color:rgba(255,255,255,.9);margin:16px auto 28px;max-width:44ch}
.btn--onorange{background:#fff;color:var(--orange-700)}
.btn--onorange:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{background:var(--ink);color:var(--ink-soft);padding:60px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.foot-brand .brand{color:var(--paper);margin-bottom:14px}
.foot-brand .brand img{width: 40px;}
.foot-brand p{max-width:32ch;font-size:.94rem}
.foot-col h4{font-family:var(--f-body);font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px}
.foot-col a{display:block;color:var(--paper);font-size:.94rem;padding:4px 0;opacity:.8;transition:opacity .15s, color .15s}
.foot-col a:hover{opacity:1;color:var(--orange)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:.84rem}
.foot-bottom .socials{display:flex;gap:12px}
.foot-bottom .socials a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;color:var(--paper)}
.foot-bottom .socials a:hover{background:var(--orange);border-color:var(--orange)}
.foot-bottom svg{width:17px;height:17px}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .section{padding:72px 0}
  .hero{padding:64px 0 76px}
  .hero-grid{grid-template-columns:1fr;gap:42px}
  .reel-stage{order:-1}
  .week-grid{grid-template-columns:repeat(2,1fr)}
  .qcard--sun{grid-column:span 2}
  .shop-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:34px}
  .about-art{order:-1;max-width:420px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .nav-links,.nav-cta{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:74px;left:0;right:0;background:var(--paper);
    padding:16px 24px;gap:4px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-links.open a{padding:.6em 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .week-grid{grid-template-columns:1fr}
  .qcard--sun{grid-column:span 1}
  .home-base{flex-direction:column;align-items:flex-start;text-align:left}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- language switch (DE/EN via browser translation) ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:2px;margin-left:6px;
  background:rgba(23,18,14,.06);border-radius:999px;padding:3px}
.lang-btn{font:inherit;font-weight:800;font-size:.78rem;letter-spacing:.04em;line-height:1;
  border:0;cursor:pointer;color:var(--espresso);background:transparent;
  padding:.34em .7em;border-radius:999px;transition:background .18s ease,color .18s ease}
.lang-btn:hover{color:var(--orange-700)}
.lang-btn.is-active{background:var(--orange);color:#fff}

/* keep the switch visible on mobile even though the nav links/CTA collapse;
   tighten spacing so the pill + burger both fit (body has overflow-x:hidden) */
@media (max-width:620px){
  .nav{gap:10px}
  .nav .brand{font-size:1.06rem;gap:8px}
  .nav .brand img{width:34px;height:34px}
  .lang-switch{margin-left:auto}
  .lang-btn{padding:.3em .56em;font-size:.74rem}
  .burger{margin-left:0;padding:9px 2px 9px 4px}
}

/* hide the Google website-translate chrome (we drive it from our own buttons) */
#google_translate_element{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.goog-te-banner-frame.skiptranslate,.skiptranslate iframe{display:none!important}
body{top:0!important}
#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}

/* ---------- legal pages (Impressum / Datenschutz) ---------- */
.legal{background:var(--paper);padding:56px 0 88px}
.legal .wrap{max-width:820px}
.legal .eyebrow{margin-bottom:16px}
.legal h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.02em;margin:0 0 6px}
.legal .updated{color:var(--espresso);opacity:.55;font-size:.9rem;margin:0 0 8px}
.legal h2{font-family:var(--f-display);font-weight:800;font-size:1.4rem;margin:42px 0 6px;letter-spacing:-.01em}
.legal h3{font-family:var(--f-display);font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;margin:26px 0 4px;color:var(--orange-700)}
.legal p{margin:10px 0;line-height:1.66;color:var(--espresso)}
.legal ul{margin:10px 0;padding-left:1.25em;line-height:1.6}
.legal li{margin:4px 0}
.legal address{font-style:normal;line-height:1.7}
.legal a{color:var(--orange-700);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.legal a:hover{color:var(--orange)}
.legal .back{display:inline-flex;align-items:center;gap:.5em;margin-top:44px;font-weight:700;text-decoration:none}
.legal .back:hover{color:var(--orange-700)}
.legal .note{margin-top:18px;padding:14px 16px;border-left:3px solid var(--orange);background:rgba(248,88,63,.06);border-radius:6px;font-size:.96rem}