/* ==========================================================================
   Studio Rathjen — Websiteidee 2026.2
   Konzept: "Ein Strich." Das Handzeichnungs-Motiv vom Buchcover (die
   ineinander greifenden Hände) wird zur durchgehenden Formensprache der
   ganzen Seite: dünne, einzügige Linienzeichnungen statt Icons, warmes
   Cremepapier statt dunkler Bühne, Veilchen als durchgehende Studio-Tinte,
   Terracotta und Amber bleiben den Projekten vorbehalten, die sie tragen.
   ========================================================================== */

:root{
  --paper:      #FBF6EA;
  --paper-2:    #F3ECDC;
  --surface:    #FFFEF9;
  --ink:        #1C2B3A;
  --ink-soft:   #57677A;
  --ink-faint:  #93A0AC;
  --line:       #E4D9C3;
  --line-strong:#D3C6A9;
  --violet:     #6B4FD6;
  --violet-soft:#EDE6FB;
  --terracotta: #C25A2E;
  --terracotta-soft:#F6E2D3;
  --amber:      #C97A18;
  --amber-soft: #F8E7C9;
  --measure:    62ch;
  --radius:     20px;
  --radius-sm:  12px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Karla", -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Bricolage Grotesque", "Karla", sans-serif;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}

p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
img{ -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
address{ font-style:normal; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--violet); color:#fff; }
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:4px; }

.mono{ font-family:"Space Mono", ui-monospace, monospace; }
.eyebrow{
  font-family:"Space Mono", monospace;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:"—"; color:var(--violet); }

.wrap{ max-width:1160px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.75rem); }
.measure{ max-width:var(--measure); }

.skip-link{
  position:absolute; left:1rem; top:-3rem; background:var(--violet); color:#fff;
  padding:.6rem 1rem; border-radius:6px; font-weight:700; transition:top .15s ease; z-index:100;
}
.skip-link:focus{ top:1rem; }

/* Header ------------------------------------------------------------------*/
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; gap:1.5rem; padding-block:.9rem; }
.brand{ display:flex; align-items:center; gap:.7rem; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.1rem; margin-right:auto; }
.brand-mark{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--violet); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:.82rem;
}
.brand small{ display:block; white-space:nowrap; font-family:"Space Mono",monospace; font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:400; margin-top:1px; }

.main-nav{ display:flex; gap:1.5rem; font-size:.92rem; font-weight:600; white-space:nowrap; }
.main-nav a{ color:var(--ink-soft); padding-block:2px; border-bottom:2px solid transparent; transition:border-color .15s ease, color .15s ease; }
.main-nav a:hover, .main-nav a:focus-visible{ color:var(--ink); border-color:var(--violet); }

.nav-cta{ flex-shrink:0; background:var(--ink); color:var(--paper); padding:.55rem 1.15rem; border-radius:999px; font-size:.84rem; font-weight:700; transition:background .15s ease; }
.nav-cta:hover{ background:var(--violet); }

.menu-toggle{ display:none; flex-shrink:0; appearance:none; width:38px; height:38px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink); cursor:pointer; align-items:center; justify-content:center; }
.menu-toggle svg{ width:18px; height:18px; }
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-open{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }

.mobile-nav{ display:none; flex-direction:column; gap:.2rem; border-top:1px solid var(--line); background:var(--surface); padding:.75rem clamp(1.25rem,4vw,2.75rem) 1.25rem; }
.mobile-nav a{ display:block; padding:.7rem .25rem; color:var(--ink-soft); font-weight:600; border-bottom:1px solid var(--line); }
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-nav a:hover{ color:var(--ink); }
@media (max-width:900px){
  .main-nav, .nav-cta{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .mobile-nav.is-open{ display:flex; }
}

/* Buttons -------------------------------------------------------------------*/
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:999px; font-weight:700; font-size:.92rem; transition:transform .15s ease, background .15s ease, border-color .15s ease; }
.btn-primary{ background:var(--violet); color:#fff; }
.btn-primary:hover{ background:#5B3FC0; transform:translateY(-2px); }
.btn-ghost{ border:1.5px solid var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--violet); color:var(--violet); transform:translateY(-2px); }

/* Hero ------------------------------------------------------------------------*/
.hero{ padding-block:clamp(2rem,5vw,3.5rem) clamp(1.75rem,4vw,2.5rem); position:relative; overflow:clip; }
.hero-top{ display:flex; align-items:center; justify-content:space-between; gap:clamp(1.5rem,4vw,3rem); }
.hero-copy{ max-width:38rem; }
.hero-copy h1{ font-size:clamp(2.4rem,4.6vw,3.9rem); margin-top:.7rem; }
.hero-underline{ position:relative; white-space:nowrap; }
.hero-underline svg{ position:absolute; left:-2%; right:-2%; bottom:-.12em; width:104%; height:.5em; overflow:visible; }
.hero-copy .lede{ margin-top:1.1rem; color:var(--ink-soft); font-size:1.14rem; max-width:44ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; }

.hero-stamp{ flex-shrink:0; text-align:center; }
.hero-stamp-photo{
  width:clamp(220px,30vw,500px); height:clamp(220px,30vw,500px); border-radius:50%; overflow:hidden; margin-inline:auto;
  border:4px solid var(--surface); box-shadow:0 0 0 2px var(--line-strong), 0 30px 60px -24px rgba(28,43,58,.4);
}
.hero-stamp-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-stamp span{ display:block; margin-top:.9rem; font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
@media (max-width:900px){
  .hero-top{ flex-direction:column; text-align:center; }
  .hero-copy{ display:flex; flex-direction:column; align-items:center; }
  .hero-actions{ justify-content:center; }
  .hero-stamp-photo{ width:min(60vw,320px); height:min(60vw,320px); }
}

/* Shelf ------------------------------------------------------------------------*/
.shelf{ margin-top:clamp(1.75rem,4vw,2.75rem); }
.shelf-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2vw,1.5rem); }
.shelf-item{
  display:flex; flex-direction:column; align-items:center; gap:.8rem; text-align:center;
  padding:1.3rem 1rem 1.1rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.shelf-item:hover, .shelf-item:focus-visible{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 20px 34px -22px rgba(28,43,58,.28); }
.shelf-icon{ width:58px; height:58px; border-radius:27%; box-shadow:0 10px 20px -10px rgba(28,43,58,.35), 0 0 0 1px var(--line); }
.shelf-icon.book{ width:46px; height:66px; border-radius:3px; object-fit:cover; object-position:top; }
.shelf-item b{ font-family:"Bricolage Grotesque",sans-serif; font-size:1.02rem; font-weight:700; }
.shelf-item span{ font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; }
@media (max-width:640px){ .shelf-row{ grid-template-columns:1fr; } }

/* Section scaffolding ---------------------------------------------------------*/
.section{ padding-block:clamp(2.25rem,5vw,3.75rem); }
.section-head{ max-width:52ch; margin-bottom:clamp(1.5rem,3vw,2.1rem); }
.section-head h2{ font-size:clamp(1.9rem,4vw,2.6rem); margin-top:.6rem; }
.section-head .lede{ color:var(--ink-soft); margin-top:.9rem; font-size:1.05rem; }
.tinted{ background:var(--tint,transparent); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* About ---------------------------------------------------------------------*/
.about-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(1.5rem,3vw,3rem); align-items:start; }
.about-grid p{ color:var(--ink-soft); font-size:1.03rem; }
.about-grid p + p{ margin-top:1rem; }
.pull-note{
  margin-top:1.6rem; font-family:"Bricolage Grotesque",serif; font-style:italic; font-weight:500;
  font-size:clamp(1.2rem,1rem+1vw,1.5rem); color:var(--ink); padding-left:1.1rem; position:relative;
}
.pull-note::before{ content:""; position:absolute; left:0; top:.15em; bottom:.1em; width:3px; border-radius:2px; background:var(--violet); }
.type-list{ margin-top:1.3rem; display:grid; gap:.55rem; }
.type-list li{ display:flex; gap:.7rem; font-size:.96rem; color:var(--ink); }
.type-list li::before{ content:"—"; color:var(--violet); font-family:"Space Mono",monospace; flex-shrink:0; }

.fact-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.4rem 1.5rem; }
.fact-card dl{ display:grid; gap:.9rem; margin:0; }
.fact-card .fact{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); }
.fact-card .fact:last-child{ border-bottom:none; padding-bottom:0; }
.fact-card dt{ font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.fact-card dd{ margin:0; font-weight:700; text-align:right; }
@media (max-width:780px){ .about-grid{ grid-template-columns:1fr; } }

/* Product sections --------------------------------------------------------------*/
.product-head{ display:flex; align-items:center; gap:1rem; margin-bottom:.6rem; }
.product-icon{ width:54px; height:54px; border-radius:26%; box-shadow:0 12px 26px -12px rgba(28,43,58,.4), 0 0 0 1px var(--line); flex-shrink:0; }
.status-pill{ display:inline-flex; align-items:center; gap:.45em; font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--line-strong); border-radius:999px; padding:.35em .8em; color:var(--ink-soft); margin-top:.9rem; background:var(--surface); }
.status-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }

.check-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem 1.4rem; margin-top:1.3rem; }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; color:var(--ink); }
.check-list .tick{ flex-shrink:0; width:19px; height:19px; margin-top:.15rem; }
.check-list .tick svg{ width:100%; height:100%; }
@media (max-width:640px){ .check-list{ grid-template-columns:1fr; } }

.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.tag-chip{ font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.03em; border:1px solid var(--line-strong); border-radius:999px; padding:.35em .8em; color:var(--ink-soft); background:var(--surface); }

/* Fanned screenshot stack -------------------------------------------------------*/
.fan{ margin-top:clamp(1.4rem,3vw,2rem); display:flex; justify-content:center; padding-block:.6rem 1.4rem; }
.fan-inner{ position:relative; display:flex; }
.fan-inner img{
  width:clamp(120px,18vw,180px); border-radius:16px; border:3px solid var(--surface);
  box-shadow:0 22px 40px -20px rgba(28,43,58,.4); transition:transform .2s ease;
}
.fan-inner .f1{ transform:rotate(-8deg) translateX(18px); z-index:1; }
.fan-inner .f2{ transform:translateY(-10px); z-index:2; position:relative; }
.fan-inner .f3{ transform:rotate(8deg) translateX(-18px); z-index:1; }
.fan-inner:hover .f1{ transform:rotate(-11deg) translateX(10px) translateY(4px); }
.fan-inner:hover .f3{ transform:rotate(11deg) translateX(-10px) translateY(4px); }
@media (max-width:560px){
  .fan-inner{ flex-direction:column; align-items:center; gap:1rem; }
  .fan-inner img{ width:min(62vw,220px); }
  .fan-inner .f1, .fan-inner .f2, .fan-inner .f3{ transform:none; }
}

.badge-row{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:1.5rem; }
.badge-link{ display:inline-block; line-height:0; border-radius:10px; transition:transform .15s ease; }
.badge-link img{ height:50px; width:auto; border-radius:10px; }
.badge-link:hover{ transform:translateY(-2px); }
.badge-note{ font-family:"Space Mono",monospace; font-size:.72rem; color:var(--ink-faint); }
.text-link{ font-weight:700; border-bottom:1px solid currentColor; padding-bottom:1px; color:var(--accent); }
.text-link:hover{ opacity:.75; }

/* Balkonizer live-readout mock ---------------------------------------------------*/
.readout{ margin-top:clamp(1.4rem,3vw,2rem); display:flex; justify-content:center; }
.readout-tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:1.4rem 1.7rem; display:flex; align-items:center; gap:1.6rem; box-shadow:0 20px 40px -26px rgba(28,43,58,.3);
}
.readout-num{ font-family:"Space Mono",monospace; font-size:2.1rem; font-weight:700; color:var(--amber); }
.readout-num sup{ font-size:.9rem; margin-left:.15em; color:var(--ink-faint); }
.readout-bars{ display:flex; align-items:flex-end; gap:3px; height:34px; }
.readout-bars i{ display:block; width:5px; background:var(--amber); opacity:.55; border-radius:2px 2px 0 0; }
.readout-label{ font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }

/* Book section ----------------------------------------------------------------*/
.book-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2.2rem,5vw,4rem); align-items:center; }
.book-cover-frame{ transform:rotate(-3deg); }
.book-cover-frame img{ border-radius:6px; box-shadow:0 40px 70px -28px rgba(28,43,58,.4), 0 0 0 1px var(--line-strong); max-width:280px; margin-inline:auto; }
.book-copy .subtitle{ font-family:"Bricolage Grotesque",serif; font-style:italic; font-weight:500; color:var(--terracotta); font-size:1.12rem; margin-top:.6rem; }
.book-copy p.body{ color:var(--ink-soft); margin-top:1.25rem; font-size:1rem; }
.book-copy p.body + p.body{ margin-top:.85rem; }
.book-quote{
  margin-top:1.3rem; padding:1.3rem 1.6rem; border-left:3px solid var(--terracotta);
  background:var(--surface); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-family:"Bricolage Grotesque",serif; font-style:italic; font-size:1.15rem; font-weight:500;
}
.receipt{ margin-top:1.3rem; background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius-sm); padding:1.1rem 1.4rem; }
.receipt-row{ display:flex; justify-content:space-between; font-family:"Space Mono",monospace; font-size:.86rem; padding-block:.4rem; border-bottom:1px dotted var(--line-strong); }
.receipt-row:last-child{ border-bottom:none; }
.book-actions{ margin-top:1.3rem; }
@media (max-width:820px){ .book-grid{ grid-template-columns:1fr; } .book-cover-frame{ max-width:220px; margin-inline:auto; } }

/* CTA -----------------------------------------------------------------------*/
.cta-banner{
  border-radius:28px; background:var(--ink); color:var(--paper);
  padding:clamp(2.4rem,5vw,3.8rem); display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:center;
  position:relative; overflow:hidden;
}
.cta-banner::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 85% 15%, rgba(107,79,214,.35), transparent 55%); pointer-events:none; }
.cta-banner h2{ color:var(--paper); font-size:clamp(1.8rem,3.6vw,2.5rem); position:relative; }
.cta-banner .lede{ color:rgba(251,246,234,.75); margin-top:.8rem; max-width:40ch; position:relative; }
.cta-banner .btn-primary{ background:var(--paper); color:var(--ink); position:relative; }
.cta-banner .btn-primary:hover{ background:#fff; }
@media (max-width:760px){ .cta-banner{ grid-template-columns:1fr; } }

/* Footer ----------------------------------------------------------------------*/
.site-footer{ border-top:1px solid var(--line); padding-block:2.2rem 1.6rem; }
.footer-grid{ display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:space-between; }
.footer-brand{ max-width:32ch; }
.footer-brand .brand{ margin-bottom:.8rem; }
.footer-brand p{ color:var(--ink-soft); font-size:.9rem; }
.footer-links{ display:flex; gap:3rem; flex-wrap:wrap; }
.footer-links h4{ font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.9rem; font-weight:700; }
.footer-links ul{ display:grid; gap:.55rem; }
.footer-links a{ color:var(--ink); font-size:.92rem; }
.footer-links a:hover{ color:var(--violet); }
.footer-bottom{ margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; color:var(--ink-faint); font-size:.8rem; font-family:"Space Mono",monospace; }

/* Legal pages -------------------------------------------------------------------*/
.legal-hero{ padding-block:clamp(2.5rem,5vw,4rem) 2rem; border-bottom:1px solid var(--line); }
.legal-hero h1{ font-size:clamp(2rem,5vw,2.8rem); margin-top:.6rem; }
.legal-hero .lede{ color:var(--ink-soft); margin-top:.8rem; }
.legal-body{ padding-block:clamp(2.5rem,5vw,3.5rem); }
.legal-body .measure{ display:grid; gap:2.2rem; }
.legal-body h2{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.15rem; color:var(--violet); margin-bottom:.7rem; }
.legal-body p, .legal-body li{ color:var(--ink-soft); font-size:.98rem; }
.legal-body strong{ color:var(--ink); }
.legal-body a.inline-link{ color:var(--terracotta); text-decoration:underline; text-underline-offset:3px; }
.legal-body ul{ padding-left:1.2rem; display:grid; gap:.4rem; list-style:disc; }
.legal-section{ border-top:1px solid var(--line); padding-top:2.2rem; }
.legal-section:first-child{ border-top:none; padding-top:0; }
.back-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:2.5rem; color:var(--ink-soft); font-size:.9rem; font-weight:700; }
.back-link:hover{ color:var(--violet); }

/* Reveal-on-scroll --------------------------------------------------------------*/
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }