/* ==================================================================
   THULS pre-launch — direction A: refined center
   ================================================================== */
:root{
  --ink:#000000;
  --ink-soft:#6B635C;
  --rule:#D8D2CB;
  --bg:#FFFFFF;
  --measure:88ch;
  --sans:"Aktiv Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Marcellus",Georgia,"Times New Roman",serif;
  --img-w:clamp(280px,38vw,440px);
  --btn-w:var(--img-w);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(15px,1.15vw,18px);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;min-height:100svh;
}
a{color:inherit}
img,svg{max-width:100%;height:auto;display:block}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.shell{
  flex:1 0 auto;width:100%;max-width:920px;margin:0 auto;
  padding:clamp(.75rem,2vw,1.5rem) clamp(1.25rem,5vw,2.5rem) clamp(2.5rem,5vw,3.5rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

.wordmark{
  width:100%;margin:0 auto clamp(1.25rem,2.75vw,2rem);
  padding:.75rem 0;
  display:flex;justify-content:center;
}
.wordmark img{width:clamp(140px,15vw,185px)}

.hero{width:var(--img-w);margin:0 auto clamp(.4rem,.9vw,.65rem)}
.hero img{width:100%;border-radius:1px}

.lede{max-width:var(--measure);margin:0 auto;text-wrap:balance;font-size:clamp(12px,.85vw,14px)}
/* No paragraph margin, so the gap between the two paragraphs matches the gap
   between the wrapped lines inside the second one. With .25em here the first
   gap ran ~15% wider than the rest at every desktop width. */
.lede p{margin:0}

.signup{
  margin:clamp(.5rem,1vw,.75rem) auto 0;width:var(--btn-w);
}
.field{display:flex;flex-direction:column;gap:.75rem}

/* The box is the wrapper, not the input. That lets the Join button sit flush
   inside the same border rather than hanging off the end of it. */
.input-wrap{
  display:flex;align-items:stretch;
  border:1px solid var(--ink);background:transparent;
}
.input-wrap:focus-within{outline:2px solid var(--ink);outline-offset:2px}

/* Caps on both the placeholder and the typed value, so the field reads as one
   piece with the footer. Purely visual: text-transform does not change the value
   submitted, so the address reaches EmailOctopus exactly as it was typed. */
input[type=email]{
  font:inherit;font-family:var(--serif);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);text-align:center;
  flex:1 1 auto;min-width:0;
  padding:.6rem 1rem;background:transparent;
  border:0;border-radius:0;
}
input[type=email]::placeholder{
  color:var(--ink);opacity:1;
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
}
input[type=email]:focus-visible{outline:none}

/* Collapsed until the field has something in it. :placeholder-shown matches only
   while the input is empty, so the reveal needs no JavaScript. max-width rather
   than display:none so it can animate; visibility keeps it out of the tab order
   while hidden, so a keyboard user never lands on an invisible control. */
.input-wrap button{
  font:inherit;font-family:var(--serif);font-size:11px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--ink);border:0;border-radius:0;
  cursor:pointer;white-space:nowrap;overflow:hidden;
  flex:0 0 auto;
  max-width:0;padding:.6rem 0;opacity:0;visibility:hidden;
  transition:max-width .22s ease,padding .22s ease,opacity .18s ease;
}
.input-wrap input:not(:placeholder-shown) ~ button{
  max-width:10rem;padding-left:1.1rem;padding-right:1.1rem;
  opacity:1;visibility:visible;
}
.input-wrap button:hover{opacity:.82}
.input-wrap button:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* Tracks the field width, but never narrows past what two lines need. Without
   the floor it inherits the image width, and a dozen pixels either side of
   ~285px is the difference between two lines and three. Balance then evens
   them rather than leaving a long line and a stub. */
.consent{
  margin:.5rem auto 0;
  max-width:max(var(--btn-w), 240px);
  text-align:center;text-wrap:balance;
  font-size:.625rem;line-height:1.6;letter-spacing:.01em;color:var(--ink);
}
.consent a{color:var(--ink);text-underline-offset:2px}
.desktop-break{display:none}

/* Same type as the lede: after confirming, this paragraph takes its place. */
.status{
  margin:1rem auto 0;max-width:var(--measure);
  font-size:clamp(12px,.85vw,14px);line-height:1.65;text-wrap:balance;
}
.status:empty{margin:0}
.status[data-tone=err]{color:var(--ink)}

/* Once the signup succeeds the shell gets .confirmed: the image, the lede, the
   form and the consent line all go, leaving wordmark, message and footer. */
.shell.confirmed .hero,
.shell.confirmed .lede,
.shell.confirmed #eo-form,
.shell.confirmed .consent{display:none}
.shell.confirmed{justify-content:center}

/* The signup block is normally pinned to the field width. With the form gone,
   release it so the message isn't squeezed into the old field's footprint. */
.shell.confirmed .signup{width:auto;max-width:var(--measure)}

.site-foot{
  flex-shrink:0;width:100%;max-width:920px;margin:0 auto;
  padding:0 clamp(1.25rem,5vw,2.5rem) clamp(1.75rem,4vw,2.75rem);
  display:flex;align-items:center;justify-content:center;gap:clamp(2rem,11vw,7.5rem);flex-wrap:nowrap;
  font-family:var(--serif);font-size:.6875rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
}
.site-foot a{text-decoration:none;text-underline-offset:3px;white-space:nowrap}
.site-foot a:hover,.site-foot a:focus-visible{text-decoration:underline}

@media (max-width:480px){
  .shell{padding-left:1rem;padding-right:1rem;padding-bottom:1rem}

  /* Reclaim vertical space so the footer clears the fold on a phone, once the
     browser's own chrome has taken its share of the viewport. */
  .wordmark{padding:.25rem 0;margin-bottom:.75rem}
  .signup{margin-top:1.125rem}
  .site-foot{padding-bottom:1.125rem}

  /* Lede matches the image width so the two align, and lines fill that width
     rather than being evened out by text-wrap:balance. */
  .lede{
    font-size:10.5px;line-height:1.9;
    width:var(--img-w);max-width:100%;text-wrap:wrap;
  }

  input[type=email]{font-size:8.5px;padding-left:.75rem;padding-right:.75rem}
  input[type=email]::placeholder{font-size:8.5px}
  /* Tighter than desktop: the field is only ~280px wide here, so the button has
     to leave room for a full address at 8.5px. */
  .input-wrap button{font-size:8.5px;padding-top:.6rem;padding-bottom:.6rem}
  .input-wrap input:not(:placeholder-shown) ~ button{
    max-width:7rem;padding-left:.8rem;padding-right:.8rem;
  }
  .status{font-size:10.5px;line-height:1.9;width:var(--img-w);max-width:100%}

  /* Balance evens the two lines instead of leaving one long line and a stub. */
  /* Full field width, with balance evening the two lines rather than leaving
     one long line and a stub. 26ch was too narrow and produced three. */
  .consent{font-size:8px;max-width:var(--btn-w);text-wrap:balance}

  .site-foot{
    gap:clamp(1.25rem,8vw,2.25rem);
    font-size:.5rem;letter-spacing:.06em;
  }
}
@media (min-width:769px){
  :root{
    --img-w:clamp(125px, min(37vw, calc((100vh - 364px) / 1.274)), 430px);
    --btn-w:var(--img-w);
  }
  html,body{height:100%}
  body{height:100vh;overflow:hidden}
  .shell{flex:1 1 auto;min-height:0;padding-top:clamp(.5rem,1.5vw,1rem);padding-bottom:clamp(1.5rem,3vw,2.25rem)}
  .wordmark{padding:.5rem 0;margin-bottom:clamp(1rem,2vw,1.5rem)}
  .wordmark img{width:clamp(115px,12vw,150px)}
  .hero{
    width:100%;flex:1 1 0%;min-height:110px;max-height:calc(430px * 1.274);
    margin:0 0 clamp(.4rem,.9vw,.65rem);overflow:hidden;
  }
  .hero img{width:auto;height:100%;max-width:100%;margin:0 auto;display:block}
  .signup{margin-top:clamp(1.25rem,2.5vw,1.75rem)}
  .consent{font-size:8px}
  .site-foot{padding-bottom:clamp(1.25rem,3vw,2rem)}
  .desktop-break{display:block}
}
/* Phones whose browser chrome leaves a short viewport: compress the image
   rather than pushing the footer below the fold. Full size everywhere else. */
@media (max-width:480px) and (max-height:700px){
  .hero{width:auto;max-width:var(--img-w);margin-left:auto;margin-right:auto}
  .hero img{width:auto;max-width:100%;max-height:44svh;margin:0 auto;display:block}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* --- embedded fonts, ignore --------------------------------------- */
@font-face{font-family:"Inter";src:url("/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Marcellus";src:url("/fonts/marcellus-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------
   Rules below are used by the pages the v2 design did not cover:
   impressum.html, datenschutz.html, danke.html and 404.html.
   ------------------------------------------------------------------ */

.doc{
  flex:1 0 auto;width:100%;max-width:720px;margin:0 auto;
  padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,2.5rem) clamp(2rem,4vw,3rem);
  text-align:left;
}
.doc .wordmark{margin-left:0;margin-right:auto;width:clamp(120px,13vw,150px)}
/* Only the page title is Marcellus and set in caps. Section headings and body
   copy are Inter, as they were. */
.doc h1{
  font-family:var(--serif);font-weight:400;
  font-size:1.25rem;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 1.75rem;
}
.doc h2{font-size:.9375rem;font-weight:600;margin:2.25rem 0 .5rem}
/* Bilingual pages: the German text is authoritative, the English follows below. */
.doc .langswitch{margin:-1.25rem 0 1.75rem;font-size:.75rem;letter-spacing:.02em}
.doc .langswitch a{color:var(--ink-soft)}
.doc .langrule{border:0;border-top:1px solid var(--rule);margin:3.5rem 0 2.5rem}
.doc .langnote{font-size:.75rem;color:var(--ink-soft);margin:-1.25rem 0 2rem;line-height:1.6}
.doc section[lang] h1{margin-top:0}
.doc p,.doc li{margin:0 0 .85rem;color:var(--ink);font-size:.875rem;line-height:1.7}
.doc ul{padding-left:1.1rem;margin:0 0 .85rem}
.doc .meta{color:var(--ink-soft);font-size:.8125rem;border-top:1px solid var(--rule);padding-top:1.25rem;margin-top:2.5rem}
.doc a{text-underline-offset:2px}

.ig-cta{
  display:block;text-align:center;text-decoration:none;
  font-family:var(--serif);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--ink);border:1px solid var(--ink);
  padding:.6rem 1rem;transition:opacity .15s ease;
}
.ig-cta:hover{opacity:.82}
.ig-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* The v2 home page is a fixed, non-scrolling viewport on desktop. The document
   pages are long-form and must scroll, so that lock is released for them. */
@media (min-width:769px){
  body:has(.doc){height:auto;overflow:auto}
}