/* ============================================================
   TOLEVIA — Bausteine
   ============================================================ */

/* ---------- Hero ---------- */

.hero{
  min-height:calc(100svh - 5rem);
  display:flex;
  padding-block:clamp(2rem, 6vh, 5rem) clamp(2rem, 5vh, 3.5rem);
}
.hero > .wrap{
  flex:1;
  /* Ohne min-width:0 schrumpft ein Flex-Element nie unter die Breite seines
     Inhalts — die unzerbrechliche Wortmarke würde die Spalte aufspreizen
     und beim Verkleinern des Fensters eine falsche Breite melden. */
  min-width:0;
  display:flex;
  flex-direction:column;
}
.hero-body{min-width:0}
/* Inhalt mittig, Scroll-Hinweis unten — die Freiräume teilen sich gleichmäßig */
.hero-body{margin-block:auto}
.hero .eyebrow{display:block;margin-bottom:clamp(1.25rem, 3vw, 2rem)}

/* Wortmarke */
.mark{
  font-size:var(--mark-size);
  line-height:1;
  letter-spacing:-.028em;
  text-transform:uppercase;
  font-weight:560;
  white-space:nowrap;
  user-select:none;
  -webkit-user-select:none;
  transform-origin:left center;
  will-change:transform;
}
.mark .letter{
  display:inline-block;
  font-variation-settings:'wght' var(--mark-wght);
}
/* Hinweis auf das Easter Egg: Gewicht lässt sich mit der Maus schieben */
@media (hover:hover) and (pointer:fine){
  .mark{cursor:grab}
  .mark.is-dragging{cursor:grabbing}
}

/* Der Satz unter der Wortmarke */
.tagline{
  margin-top:clamp(1.25rem, 2.5vw, 2rem);
  font-size:clamp(1.125rem, 2.6vw, 2rem);
  font-weight:440;
  letter-spacing:-.014em;
  line-height:1.25;
}
.tagline .word{display:inline-block}

/* Der Pinselstrich liegt unter dem Satz und wird beim Auftakt gezogen —
   die Worte erscheinen in seiner Spur. Gefüllte, ungleich starke Form
   statt gleichmäßiger Linie: nur so wirkt es gemalt, nicht gezeichnet. */
.tagline-line{position:relative;display:inline-block}
.tagline .stroke{
  position:absolute;
  left:-.1em;
  right:-.16em;
  bottom:-.44em;
  height:.62em;
  pointer-events:none;
  rotate:-.35deg;
}
.tagline .stroke svg{
  width:100%;
  height:100%;
  fill:var(--ink);
  overflow:visible;
}

.hero-note{
  margin-top:clamp(1.5rem, 3vw, 2.25rem);
  font-size:.6875rem;
  font-weight:560;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mut);
}
.hero-scroll{
  margin-top:auto;
  padding-top:clamp(2rem, 5vh, 4rem);
  font-size:.6875rem;
  font-weight:560;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mut);
  text-decoration:none;
  align-self:flex-start;
}

/* ---------- Aussagen ---------- */

/* Kapitelnummer im Eyebrow: „01 / Studio" */
.eyebrow em{font-style:normal;color:var(--ink);font-weight:640}

.statement{
  font-size:clamp(1.375rem, 2.6vw, 2rem);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.35;
  text-wrap:balance;
  max-width:24em;
}
.statement + .statement{margin-top:1em}

/* Die große Aussage — Wort für Wort im Gewicht enthüllt */
.lead{
  font-size:clamp(1.75rem, 4.6vw, 3.5rem);
  font-weight:500;
  letter-spacing:-.024em;
  line-height:1.12;
  max-width:15em;
}

/* Drei ruhige Zeilen — keine Liste, keine Nummern, keine Linien */
.principles{
  margin-top:clamp(2.25rem, 4.5vw, 3.5rem);
  max-width:38rem;
}
.principles li{
  font-size:clamp(1.0625rem, 1.5vw, 1.1875rem);
  font-weight:500;
  color:var(--ink-soft);
  padding-block:.42rem;
}

/* ---------- Plattformen ---------- */

.platforms{border-top:1px solid var(--line);max-width:52rem}
.platform{border-bottom:1px solid var(--line)}
/* Flexibel statt starrem Raster — sonst läuft ein langer Name
   wie „Spreadshirt" in die Spalte daneben. */
.platform-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.4rem 1.1rem;
  padding-block:1.5rem;
  text-decoration:none;
}
a.platform-row{transition:padding-left .3s var(--ease-out)}
a.platform-row:hover{padding-left:.7rem}
/* Logos liegen als eigene Dateien in assets/logos/ und werden eingefärbt.
   Neue Plattform: eine Datei ablegen und hier eine Zeile ergänzen. */
.platform-logo{
  width:1.375rem;
  height:1.375rem;
  flex:none;
  align-self:center;
  background:var(--ink);
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.platform-logo--etsy{-webkit-mask-image:url('logos/etsy.svg');mask-image:url('logos/etsy.svg')}
.platform-logo--spreadshirt{-webkit-mask-image:url('logos/spreadshirt.svg');mask-image:url('logos/spreadshirt.svg')}
.platform-logo--pinterest{-webkit-mask-image:url('logos/pinterest.svg');mask-image:url('logos/pinterest.svg')}
.platform-name{
  font-size:1.0625rem;
  font-weight:640;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.platform-note{font-size:.9375rem;color:var(--mut);flex:1 1 16rem}
.platform-status{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  margin-left:auto;
}
.platform-status--soon{color:var(--mut)}
.platform--pending .platform-logo{opacity:.55}
@media (max-width: 44em){
  .platform-note{flex-basis:100%}
  .platform-status{margin-left:0}
}

/* ---------- Finds ---------- */

.notice{
  font-size:.8125rem;
  line-height:1.65;
  color:var(--mut);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1rem 1.25rem;
  max-width:44rem;
}
.notice strong{color:var(--ink);font-weight:600}

.finds{margin-top:clamp(2.25rem, 4vw, 3.5rem);border-top:1px solid var(--line);max-width:52rem}
.find{border-bottom:1px solid var(--line)}
.find a{
  display:grid;
  grid-template-columns:minmax(0, 3fr) minmax(0, 6fr) auto;
  gap:.5rem 2rem;
  align-items:baseline;
  padding-block:1.6rem;
  text-decoration:none;
  transition:padding-left .3s var(--ease-out);
}
.find a:hover{padding-left:.7rem}
.find-kat{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mut);
}
.find-was h2{
  font-size:clamp(1.125rem, 1.9vw, 1.375rem);
  font-weight:560;
  letter-spacing:-.015em;
  margin-bottom:.25rem;
}
.find-was p{font-size:.9375rem;color:var(--mut)}
.find-go{
  justify-self:end;
  text-align:right;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.find-go small{
  display:block;
  font-weight:560;
  letter-spacing:.12em;
  color:var(--mut);
  margin-top:.3rem;
}
@media (max-width: 56em){
  .find a{grid-template-columns:1fr;gap:.35rem}
  .find-go{justify-self:start;text-align:left;margin-top:.4rem}
}

.empty{
  border-block:1px solid var(--line);
  padding-block:clamp(2.5rem, 5vw, 4rem);
  color:var(--mut);
  max-width:52rem;
  margin-top:clamp(2.25rem, 4vw, 3.5rem);
}

/* ---------- Projekthinweis ---------- */

.project h2{
  font-size:clamp(1.5rem, 3.2vw, 2.375rem);
  font-weight:570;
  letter-spacing:-.02em;
  line-height:1.1;
}
.project p{margin-top:.9rem;color:var(--ink-soft);max-width:30em}
.project a{
  display:inline-block;
  margin-top:1.35rem;
  font-size:clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight:560;
}

/* ---------- Monument im Fuß ---------- */

.foot-mark{
  font-size:clamp(2.8rem, 12.5vw, 11rem);
  line-height:1;
  font-weight:560;
  letter-spacing:-.028em;
  text-transform:uppercase;
  white-space:nowrap;
  user-select:none;
  margin-top:clamp(2rem, 5vw, 3.5rem);
}

/* ---------- Rechtstexte ---------- */

.itrk-legaltext{font-size:.9375rem;line-height:1.7;max-width:52rem}
.itrk-legaltext h1{display:none}
.itrk-legaltext h2{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;margin:2.25em 0 .75em}
.itrk-legaltext h3{font-size:1.0625rem;font-weight:600;margin:1.75em 0 .5em}
.itrk-legaltext p{margin-bottom:.9em}
.itrk-legaltext ul,.itrk-legaltext ol{margin:0 0 .9em 1.25em;list-style:disc}
.itrk-legaltext a{text-underline-offset:2px}
noscript p{color:var(--mut);font-size:.9375rem}