/* =============================================================================
   HOKAR Landingpage
   Farben, Muster, Bildmarke und Bildwelt stammen 1:1 aus dem Handout
   HOKAR_Construction_A4.pdf (siehe tools/assets.py).
   ========================================================================== */

/* ---------------------------------------------------------------- Schriften */
/* Selbst gehostet, kein Google-Request. Roca und Glorify aus dem Handout sind
   lizenzpflichtig; Marcellus (Versalien), Prata (Display) und Spectral (Fliess-
   text) sind die naechstliegenden freien Entsprechungen. */
@font-face{font-family:Marcellus;src:url(/assets/fonts/marcellus-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF}
@font-face{font-family:Marcellus;src:url(/assets/fonts/marcellus-400-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Prata;src:url(/assets/fonts/prata-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Spectral;src:url(/assets/fonts/spectral-200-latin.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF}
@font-face{font-family:Spectral;src:url(/assets/fonts/spectral-200-latin-ext.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Spectral;src:url(/assets/fonts/spectral-300-latin.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF}
@font-face{font-family:Spectral;src:url(/assets/fonts/spectral-300-latin-ext.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Spectral;src:url(/assets/fonts/spectral-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF}
@font-face{font-family:Spectral;src:url(/assets/fonts/spectral-400-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

/* ------------------------------------------------------------------- Tokens */
:root{
  --ink:        #060607;                    /* Seitengrund, aus dem Handout */
  --ink-2:      #0a0a0b;
  --ink-3:      #101011;
  --cream:      #dccfbd;                    /* Textfarbe, aus dem Handout */
  --cream-70:   rgba(220,207,189,.70);
  --cream-62:   rgba(220,207,189,.62);
  --cream-45:   rgba(220,207,189,.45);
  --cream-28:   rgba(220,207,189,.28);
  --copper:     #643e2e;                    /* Akzent, aus dem Handout */
  --copper-lit: #9a6544;                    /* aufgehellt fuer Linien und Hover */
  --line:       rgba(220,207,189,.11);
  --line-soft:  rgba(220,207,189,.06);

  --wrap: 1280px;
  --gut: clamp(1.5rem, 5vw, 5rem);
  --sec: clamp(6rem, 13vh, 11rem);

  --ease: cubic-bezier(.16,1,.3,1);
  --slow: 1.1s var(--ease);
}

/* --------------------------------------------------------------- Grundlagen */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  position:relative;              /* Bezugsrahmen fuer den roten Faden */
  background:var(--ink);
  color:var(--cream);
  font:300 clamp(1rem,.95rem + .25vw,1.125rem)/1.72 Spectral,Georgia,serif;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

::selection{background:var(--copper);color:#f3ece2}

:focus-visible{outline:1px solid var(--copper-lit);outline-offset:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:.9rem 1.4rem;background:var(--ink-3);color:var(--cream);
}
.skip:focus{left:1rem;top:1rem}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.section-flush{padding-block:var(--sec)}

/* Zweispaltiges Grundraster: schmale Marginalie, breiter Textkoerper */
.grid{display:grid;gap:clamp(2rem,4vw,4.5rem);grid-template-columns:1fr}
@media (min-width:900px){
  .grid{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
  .col-label{padding-top:.65rem}
}

/* ------------------------------------------------------------ Marke als Maske */
/* Bildmarke und Wortmarke liegen als weisse Alpha-PNGs vor und werden per
   CSS-Maske eingefaerbt, damit sie Farbe und Uebergaenge mitmachen. */
.mark,.word{display:block;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.mark{-webkit-mask-image:url(/assets/img/logo-mark.png);mask-image:url(/assets/img/logo-mark.png);aspect-ratio:716/842}
.word{-webkit-mask-image:url(/assets/img/logo-word.png);mask-image:url(/assets/img/logo-word.png);aspect-ratio:1113/162}
.mark--sm{width:22px}
.word--sm{width:86px}
.mark--hero{width:clamp(60px,7vw,88px)}
.word--hero{width:clamp(150px,17vw,224px)}

/* ------------------------------------------------------------------ Typo-Sets */
.eyebrow{
  font-family:Marcellus,serif;font-size:.72rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--cream-45);
}
.display{
  font-family:Prata,Georgia,serif;font-weight:400;
  font-size:clamp(1.85rem,1.1rem + 2.6vw,3.15rem);
  line-height:1.16;letter-spacing:-.012em;
  max-width:20ch;
}
.display--lg{font-size:clamp(2.1rem,1.2rem + 3.2vw,3.8rem)}
.display--xl{font-size:clamp(2.4rem,1rem + 5.4vw,5.6rem);line-height:1.04;max-width:none}
.lead{
  font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.6;
  color:var(--cream-70);max-width:46ch;
}
.prose{max-width:56ch;color:var(--cream-70);display:grid;gap:1.35em}
.prose p{max-width:56ch}

/* ================================================================ Navigation */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:transform .5s var(--ease),background-color .5s ease,backdrop-filter .5s ease,border-color .5s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,6,7,.72);backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line-soft);
}
.nav.is-hidden{transform:translateY(-101%)}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:1.15rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.nav__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--cream);transition:color .4s ease}
.nav__brand:hover{color:#fff}
.nav__links{display:flex;align-items:center;gap:clamp(1.1rem,2.5vw,2.4rem)}
.nav__links a{
  font-family:Marcellus,serif;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--cream-45);transition:color .4s ease;
}
.nav__links a:hover{color:var(--cream)}
.nav__cta{position:relative;color:var(--cream)!important}
.nav__cta::after{
  content:"";position:absolute;left:0;right:0;bottom:-.45rem;height:1px;
  background:var(--copper-lit);transform:scaleX(1);transform-origin:left;
  transition:transform .6s var(--ease);
}
.nav__cta:hover::after{transform:scaleX(0);transform-origin:right}
@media (max-width:560px){
  .nav__links a:not(.nav__cta){display:none}
}

/* ====================================================================== Hero */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  padding:7rem var(--gut) 3rem;overflow:hidden;text-align:center;
}
.hero__pattern{
  position:absolute;inset:-20% -10%;
  background:url(/assets/img/pattern.png) repeat;
  background-size:clamp(260px,26vw,380px) auto;
  opacity:.055;
  animation:drift 140s linear infinite;
  will-change:transform;
}
@keyframes drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-379px,-242px,0)}   /* genau eine halbe Kachel */
}
.hero__glow{
  position:absolute;inset:0;
  background:
    radial-gradient(52% 42% at 50% 42%, rgba(100,62,46,.30), transparent 72%),
    radial-gradient(46% 38% at 50% 46%, rgba(6,6,7,.78), transparent 75%),
    radial-gradient(120% 90% at 50% 50%, transparent 32%, rgba(6,6,7,.9) 74%, var(--ink) 100%);
}
.hero__inner{position:relative;display:grid;justify-items:center;gap:0}
.hero__logo{display:grid;justify-items:center;gap:clamp(1rem,1.6vw,1.5rem);color:var(--copper-lit)}
.hero .eyebrow{margin-top:clamp(2.2rem,4vw,3.4rem)}
.hero__claim{
  margin-top:1.4rem;
  font-family:Prata,Georgia,serif;font-weight:400;
  font-size:clamp(1.7rem,.9rem + 3vw,3.4rem);
  line-height:1.22;letter-spacing:-.015em;
  display:grid;gap:.12em;
}
.hero__en{
  margin-top:1.6rem;font-size:.95rem;letter-spacing:.03em;color:var(--cream-45);
  font-style:italic;
}
.hero__scroll{
  margin-top:clamp(2.4rem,5.5vh,4.5rem);
  display:grid;justify-items:center;gap:.9rem;text-decoration:none;
  font-family:Marcellus,serif;font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--cream-28);transition:color .4s ease;
}
.hero__scroll:hover{color:var(--cream-70)}
.hero__scroll-line{display:block;width:1px;height:52px;background:linear-gradient(var(--copper-lit),transparent);position:relative;overflow:hidden}
.hero__scroll-line::after{
  content:"";position:absolute;inset:0;background:var(--cream);
  animation:trickle 3.4s var(--ease) infinite;
}
@keyframes trickle{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}

/* Auftritt beim Laden, gestaffelt */
[data-stage]{opacity:0;transform:translateY(16px);filter:blur(4px)}
.is-ready [data-stage]{
  opacity:1;transform:none;filter:none;
  transition:opacity 1.5s var(--ease),transform 1.5s var(--ease),filter 1.5s var(--ease);
}
.is-ready [data-stage="1"]{transition-delay:.15s}
.is-ready [data-stage="2"]{transition-delay:.45s}
.is-ready [data-stage="3"]{transition-delay:.6s}
.is-ready [data-stage="4"]{transition-delay:.85s}
.is-ready [data-stage="5"]{transition-delay:1.15s}

/* ================================================================== Manifest */
.manifest .display{margin-bottom:clamp(1.8rem,3vw,2.6rem);max-width:24ch}

/* ==================================================================== Kraefte */
.forces{display:grid;gap:0}
.force{
  padding-block:clamp(1.6rem,3vw,2.4rem);
  display:grid;gap:.7rem;
  transition:background-color .7s var(--ease);
}
.force__word{
  font-family:Marcellus,serif;
  font-size:clamp(1.9rem,.9rem + 3.2vw,3.5rem);
  line-height:1;letter-spacing:.02em;text-transform:uppercase;
  color:var(--cream);
  transition:color .7s var(--ease),transform .7s var(--ease),letter-spacing .7s var(--ease);
}
.force__text{color:var(--cream-62);max-width:58ch;transition:color .7s var(--ease)}
@media (min-width:900px){
  .force{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:baseline;gap:0}
  .force__text{border-left:1px solid var(--line);padding-left:clamp(2rem,4vw,4rem)}
  .force:hover .force__word{color:var(--copper-lit);letter-spacing:.05em}
  .force:hover .force__text{color:var(--cream-70)}
}

/* ================================================================== Statement */
.statement{position:relative;padding-block:0}
.statement__media{margin:0;position:relative;height:clamp(320px,62vh,640px);overflow:hidden}
.statement__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s var(--ease)}
.statement__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(6,6,7,.45) 26%,rgba(6,6,7,.55) 60%,var(--ink) 100%);
}
.statement__copy{
  position:absolute;inset:0;display:grid;align-items:center;
  max-width:var(--wrap);margin-inline:auto;left:0;right:0;
}
.statement__copy .display{color:var(--cream);text-shadow:0 2px 40px rgba(6,6,7,.7)}
.statement__circle{
  margin:0;position:relative;z-index:2;
  width:clamp(130px,20vw,240px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:1px solid rgba(154,101,68,.55);
  margin-top:clamp(-120px,-9vw,-70px);
  margin-left:auto;margin-right:clamp(1.5rem,10vw,12rem);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.statement__circle img{width:100%;height:100%;object-fit:cover}

/* =================================================================== Bereiche */
.bereiche .lead{margin-bottom:clamp(2.5rem,5vw,4rem)}
.fields{display:grid;gap:0}
.field{
  padding-block:clamp(1.6rem,3vw,2.2rem);
  display:grid;gap:.5rem;
}
.field__no{
  font-family:Marcellus,serif;font-size:.72rem;letter-spacing:.28em;color:var(--copper-lit);
}
.field__title{font-family:Prata,Georgia,serif;font-size:clamp(1.25rem,1rem + .9vw,1.7rem);line-height:1.3}
.field p{color:var(--cream-62);max-width:60ch}
@media (min-width:900px){
  .field{grid-template-columns:auto minmax(0,5fr) minmax(0,7fr);align-items:baseline;gap:clamp(1.5rem,3vw,2.6rem)}
  .field__no{padding-top:.35rem}
}

/* ==================================================================== Materie */
.materie .display{margin-bottom:1.6rem}
.marquee{
  margin-block:clamp(3.5rem,7vw,6rem);
  border-block:1px solid var(--line);
  padding-block:clamp(1rem,1.6vw,1.4rem);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:slide 90s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__set{
  font-family:Marcellus,serif;font-size:clamp(.9rem,.8rem + .5vw,1.2rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--cream-28);
  white-space:nowrap;padding-right:2rem;
}
.marquee__set i{color:var(--copper-lit);font-style:normal;padding-inline:.35em}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.plates{display:grid;gap:clamp(.6rem,1.4vw,1.2rem);grid-template-columns:repeat(3,1fr)}
.plate{position:relative;overflow:hidden;background:var(--ink-2)}
.plate img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.4s var(--ease),filter 1.4s var(--ease);filter:saturate(.85) brightness(.92)}
.plate:hover img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.plate__cap{
  position:absolute;left:0;bottom:0;padding:1rem 1.2rem;
  font-family:Marcellus,serif;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cream-70);
  background:linear-gradient(0deg,rgba(6,6,7,.85),transparent);width:100%;
}
@media (max-width:700px){
  .plates{grid-template-columns:1fr}
  .plate img{aspect-ratio:16/10}
}

/* =================================================================== Segmente */
.segs{
  display:grid;gap:0;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.segs li{
  padding-block:clamp(.9rem,1.7vw,1.35rem);
  font-family:Prata,Georgia,serif;
  font-size:clamp(1.3rem,1rem + 1.5vw,2.3rem);line-height:1.25;
  color:var(--cream-70);
  transition:color .6s var(--ease),padding-left .6s var(--ease);
}
.segs li:hover{color:var(--cream);padding-left:.6rem}

/* ===================================================================== Studio */
.studio__grid{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media (min-width:900px){.studio__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.studio__media{margin:0;overflow:hidden;background:var(--ink-2)}
.studio__media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 16%;transition:transform 1.6s var(--ease)}
.studio__media:hover img{transform:scale(1.03)}
.studio__copy{display:grid;gap:1.5rem}
.studio__copy .display{max-width:16ch}
.signature{
  font-family:Marcellus,serif;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--copper-lit);
}

/* ==================================================================== Kontakt */
.kontakt{position:relative;overflow:hidden;background:var(--ink-2)}
.kontakt__pattern{
  position:absolute;inset:0;
  background:url(/assets/img/pattern.png) repeat;
  background-size:clamp(240px,22vw,340px) auto;
  opacity:.05;
}
.kontakt::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 20% 0%, rgba(100,62,46,.22), transparent 65%);
}
.kontakt__grid{position:relative;display:grid;gap:clamp(3rem,6vw,6rem)}
@media (min-width:960px){.kontakt__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.kontakt__intro{display:grid;gap:1.5rem;align-content:start}

.facts{margin:1.5rem 0 0;display:grid;gap:1.8rem}
.facts dt{
  font-family:Marcellus,serif;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cream-28);margin-bottom:.5rem;
}
.facts dd{margin:0;color:var(--cream-70);line-height:1.65}
.facts dd a{
  text-decoration:none;color:var(--cream-70);margin-right:1.4rem;
  border-bottom:1px solid var(--copper);padding-bottom:2px;
  transition:color .4s ease,border-color .4s ease;
}
.facts dd a:hover{color:var(--cream);border-color:var(--copper-lit)}

/* ------------------------------------------------------------------ Formular */
/* Das Formular sitzt auf einer eigenen Karte. Ohne sie laeuft das Monogramm-Muster
   hinter den duennen Feldlinien durch und macht die Beschriftungen unruhig. */
.form{
  display:grid;gap:1.6rem;align-content:start;align-self:start;
  padding:clamp(1.5rem,3vw,2.6rem);
  border:1px solid var(--line);
  border-radius:clamp(12px,1.4vw,18px);
  background:linear-gradient(180deg,rgba(21,20,21,.93),rgba(11,11,12,.95));
  backdrop-filter:blur(12px) saturate(115%);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  box-shadow:0 50px 100px -60px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(220,207,189,.05);
}
.field-row{display:grid;gap:1.6rem}
@media (min-width:600px){.field-row{grid-template-columns:1fr 1fr}}

.input{position:relative}
.input input,.input textarea,.input select{
  width:100%;appearance:none;background:transparent;color:var(--cream);
  border:0;border-bottom:1px solid var(--line);
  padding:1.45rem 0 .65rem;
  font:300 1rem/1.6 Spectral,Georgia,serif;
  border-radius:0;
  transition:border-color .5s var(--ease);
}
.input textarea{resize:vertical;min-height:7rem}
.input select{cursor:pointer;padding-right:1.6rem}
.input select option{background:var(--ink-3);color:var(--cream)}
.input--select::after{
  content:"";position:absolute;right:2px;bottom:1.35rem;width:7px;height:7px;
  border-right:1px solid var(--cream-45);border-bottom:1px solid var(--cream-45);
  transform:rotate(45deg);pointer-events:none;
}
.input label{
  position:absolute;left:0;top:1.45rem;pointer-events:none;
  font-family:Marcellus,serif;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-62);
  transition:transform .45s var(--ease),color .45s var(--ease),font-size .45s var(--ease);
  transform-origin:left top;
}
.input input:focus,.input textarea:focus,.input select:focus{outline:0;border-bottom-color:var(--copper-lit)}
.input input:focus + label,
.input input:not(:placeholder-shown) + label,
.input textarea:focus + label,
.input textarea:not(:placeholder-shown) + label,
.input select:focus + label,
.input select:valid + label{
  transform:translateY(-1.35rem) scale(.78);color:var(--cream-28);
}
.input .opt{letter-spacing:.06em;text-transform:none}
.input.is-error input,.input.is-error textarea,.input.is-error select{border-bottom-color:#a4523a}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;align-items:start;color:var(--cream-62);font-size:.88rem;line-height:1.6}
.consent .hinweis-feld{grid-column:2}
.consent label{cursor:pointer}
.consent input{
  appearance:none;flex:0 0 auto;width:16px;height:16px;margin-top:.28rem;
  border:1px solid var(--cream-28);background:transparent;cursor:pointer;
  transition:border-color .4s ease,background-color .4s ease;
}
.consent input:checked{background:var(--copper-lit);border-color:var(--copper-lit)}
.consent:hover input{border-color:var(--cream-45)}
.consent.is-error input{border-color:#a4523a}

.btn{
  justify-self:start;position:relative;margin-top:.6rem;
  background:transparent;border:0;padding:0 0 .7rem;cursor:pointer;color:var(--cream);
  font-family:Marcellus,serif;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;
}
.btn__line{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--cream-28);overflow:hidden}
.btn__line::after{
  content:"";position:absolute;inset:0;background:var(--copper-lit);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.btn:hover .btn__line::after,.btn:focus-visible .btn__line::after{transform:scaleX(1)}
.btn[disabled]{opacity:.45;cursor:progress}

.form__note{min-height:1.4rem;font-size:.9rem;color:var(--cream-62);transition:color .4s ease}
.form__note.is-ok{color:var(--copper-lit)}
.form__note.is-bad{color:#c07a5c}

.form.is-sent{gap:0;min-height:14rem;align-content:center}
.form.is-sent > *:not(.form__note){display:none}
.form__note.is-final{
  font-family:Prata,Georgia,serif;font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem);
  line-height:1.35;color:var(--cream);max-width:22ch;min-height:0;
}

/* ===================================================================== Footer */
.footer{border-top:1px solid var(--line-soft);padding-block:clamp(3rem,6vw,4.5rem)}
.footer__inner{display:grid;gap:1.6rem;justify-items:center;text-align:center}
.footer__brand{display:grid;justify-items:center;gap:.7rem;color:var(--copper-lit);text-decoration:none;transition:color .5s ease}
.footer__brand .mark--sm{width:30px}
.footer__brand .word--sm{width:104px}
.footer__brand:hover{color:var(--cream)}
.footer__claim{font-family:Prata,Georgia,serif;font-size:clamp(.95rem,.9rem + .3vw,1.15rem);color:var(--cream-45)}
.footer__meta{font-size:.78rem;color:var(--cream-28);max-width:52ch;line-height:1.7}
.footer__meta a{color:var(--cream-45);text-decoration:none;border-bottom:1px solid var(--copper);transition:color .4s ease}
.footer__meta a:hover{color:var(--cream)}

/* ============================================================ Bewegung
   Grundsatz: Inhalte stehen einfach da. Bewegt wird nur Licht und Linie.
   Nur die grossen Display-Zeilen kommen noch herein, und zwar zurueckhaltend. */
.reveal{opacity:0;transform:translateY(12px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);
}
.statement__media img.is-in-media{transform:scale(1)}

/* --- Linien, die sich ziehen ---------------------------------------------
   Jede Trennlinie zeichnet sich einmal von links nach rechts, statt dass der
   Inhalt darunter einblendet. */
.line{position:relative}
.line::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.5s var(--ease);
}
.line.is-in::after{transform:scaleX(1)}

/* Die Oberkante einer Liste ist die erste Linie der Gruppe. */
.rail{position:relative}
.rail::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.5s var(--ease);
}
.rail.is-in::before{transform:scaleX(1)}

/* --- Licht, das ueber die Linie laeuft -----------------------------------
   Sparsam: nur auf der Oberkante der drei Listen, versetzt und langsam. */
.sheen.is-in::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(154,101,68,.85),transparent);
  background-size:200px 100%;background-repeat:no-repeat;background-position:-200px 0;
  animation:zug 12s linear 1.4s infinite;
}
@keyframes zug{
  0%   {background-position:-200px 0;opacity:0}
  4%   {opacity:1}
  40%  {opacity:1}
  50%  {background-position:100% 0;opacity:0}
  100% {background-position:100% 0;opacity:0}
}
.fields.sheen.is-in::after{animation-delay:5s}
.segs.sheen.is-in::after{animation-delay:8.6s}

/* --- Der rote Faden ------------------------------------------------------
   Eine Bahn über die gesamte Seitenhöhe, die sich an den Aussagen der Seite
   entlanghangelt und an der oberen linken Ecke der Formularkarte andockt.
   Darauf eine Sternschnuppe auf der Leseposition.

   Die Bahn liegt bei z-index 1, also über den Flächen, aber unter allem, was
   hier ausdrücklich hochgesetzt wird. Dadurch taucht sie hinter dem Bildmotiv
   und hinter dem Gründerfoto ab, statt immer obenauf zu liegen. */
.faden{
  position:absolute;top:0;left:0;z-index:1;
  pointer-events:none;overflow:visible;
}
.faden__bahn{fill:none;stroke:rgba(220,207,189,.035);stroke-width:1}
.faden__weg{fill:none;stroke:rgba(154,101,68,.07);stroke-width:1;stroke-linecap:round}

/* Vier gestaffelte Längen ergeben einen weichen Verlauf statt einer harten
   Kante. stroke-linecap bleibt butt, sonst setzt jedes Ende einen Punkt. */
.faden__schweif{fill:none;stroke-width:1;stroke-linecap:butt}
.faden__schweif.s1{stroke:rgba(226,180,140,.16)}
.faden__schweif.s2{stroke:rgba(226,180,140,.09)}
.faden__schweif.s3{stroke:rgba(226,180,140,.05)}
.faden__schweif.s4{stroke:rgba(226,180,140,.025)}

/* Der Funke: kurz aufleuchten, wenn die Sternschnuppe im Mittelpunkt einer
   Marke ankommt. Derselbe Gedanke wie beim Rahmen der Formularkarte. */
.faden__ring{
  fill:none;stroke:rgba(243,222,196,.5);stroke-width:1;opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.faden__ring.blitzt{animation:funke 1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes funke{
  0%   {opacity:0;   transform:scale(.5)}
  10%  {opacity:.5}
  100% {opacity:0;   transform:scale(11)}
}

.faden__stern.blitzt{animation:aufleuchten 1s var(--ease)}
@keyframes aufleuchten{
  0%   {transform:scale(1);   fill:#c9a884}
  12%  {transform:scale(2.2); fill:#fbeedd}
  100% {transform:scale(1);   fill:#c9a884}
}

.faden__stern{
  fill:#c9a884;
  transform-box:fill-box;transform-origin:center;
  transition:opacity .9s var(--ease);
  filter:drop-shadow(0 0 2px rgba(226,180,140,.3))
         drop-shadow(0 0 6px rgba(154,101,68,.18));
}

/* Auf schmalen Schirmen bleibt für die Ausschläge kein Platz. Dort läuft eine
   abgeschwächte Fassung: ein leises Wandern im linken Rand, kleinerer Kopf,
   kürzerer Schweif. Die Ankunft und das Aufflammen bleiben. */
@media (max-width:759px){
  .faden__ring.blitzt{animation-name:funke-schmal}
  @keyframes funke-schmal{
    0%   {opacity:0;   transform:scale(.5)}
    10%  {opacity:.4}
    100% {opacity:0;   transform:scale(8)}
  }
  .faden__weg{stroke:rgba(154,101,68,.08)}
  .faden__schweif.s1{stroke:rgba(226,180,140,.11)}
  .faden__schweif.s2{stroke:rgba(226,180,140,.06)}
  .faden__schweif.s3{stroke:rgba(226,180,140,.03)}
  .faden__schweif.s4{stroke:rgba(226,180,140,.015)}
  .faden__stern{
    filter:drop-shadow(0 0 2px rgba(226,180,140,.25))
           drop-shadow(0 0 5px rgba(154,101,68,.14));
  }
}

/* --- Die Marken ----------------------------------------------------------
   Drei Zeichen aus der HOKAR-Markenreihe, jeweils mit der Sternschnuppe als
   leuchtendem Mittelpunkt. Sie liegen bei z-index -1, also hinter dem Text:
   davor würden ihre Linien über die Schrift laufen. Der Seitengrund steht am
   Wurzelelement, deshalb bleiben sie trotz negativem Index sichtbar. */
.figuren{
  position:absolute;top:0;left:0;z-index:-1;
  pointer-events:none;overflow:visible;
}

.figur{opacity:0}
.figur line,.figur circle,.figur path{
  fill:none;stroke:rgba(226,180,140,.30);stroke-width:1;
}
.figur .fein{stroke:rgba(226,180,140,.15)}
.figur .punkt{fill:rgba(240,214,183,.6);stroke:none}
.figur .gestrichelt{stroke:rgba(226,180,140,.16);stroke-dasharray:2 7}

/* Schmal steht die Marke mitten im Text statt im Rand, also etwas leiser. */
@media (max-width:759px){
  .figur line,.figur circle,.figur path{stroke:rgba(226,180,140,.20)}
  .figur .fein{stroke:rgba(226,180,140,.10)}
  .figur .punkt{fill:rgba(240,214,183,.45)}
  .figur .gestrichelt{stroke:rgba(226,180,140,.11)}
}

/* Ankunft: die Sternschnuppe verglimmt an der Karte und entzündet dabei
   einmal deren Rahmen. Läuft genau einmal, danach bleibt die Karte ruhig. */
.form::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid transparent;pointer-events:none;opacity:0;
}
.form.is-entzuendet::after{animation:entzuenden 2.8s var(--ease) forwards}
@keyframes entzuenden{
  0%{
    opacity:0;border-color:rgba(240,205,170,0);
    box-shadow:0 0 0 0 rgba(154,101,68,0);
  }
  14%{
    opacity:1;border-color:rgba(243,214,183,.85);
    box-shadow:0 0 26px 1px rgba(154,101,68,.45),
               inset 0 0 34px rgba(154,101,68,.16);
  }
  45%{
    opacity:1;border-color:rgba(226,180,140,.35);
    box-shadow:0 0 18px 0 rgba(154,101,68,.2),
               inset 0 0 20px rgba(154,101,68,.07);
  }
  100%{
    opacity:0;border-color:rgba(226,180,140,0);
    box-shadow:0 0 0 0 rgba(154,101,68,0);
  }
}

/* Wovor die Sternschnuppe abtaucht. */
.statement__media,
.studio__media,
.plate,
.form{position:relative;z-index:2}

/* ====================================================== Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal,[data-stage]{opacity:1!important;transform:none!important;filter:none!important}
  .line::after,.rail::before{transform:scaleX(1)!important}
  .faden__ring{display:none}
  .sheen.is-in::after{display:none}
  .faden{display:none}
  .statement__media img{transform:none}
}

/* ================================================================ Rechtstexte */
/* Eigenes, ruhiges Layout fuer Impressum und Datenschutz. Gleiche Marke,
   gleiche Farben, aber ohne Bildwelt und ohne Bewegung. */
.legal{padding:clamp(8rem,16vh,12rem) 0 var(--sec)}
.legal__head{display:grid;gap:1.1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.legal__head .display{max-width:none}
.legal__back{
  justify-self:start;display:inline-flex;align-items:center;gap:.6rem;
  font-family:Marcellus,serif;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream-45);text-decoration:none;transition:color .4s ease,gap .4s var(--ease);
}
.legal__back:hover{color:var(--cream);gap:.9rem}
.legal__back span[aria-hidden]{color:var(--copper-lit)}

.legal__body{max-width:68ch;display:grid;gap:clamp(2rem,3.5vw,2.8rem)}
.legal__body section{display:grid;gap:.9rem}
.legal__body h2{
  font-family:Marcellus,serif;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--copper-lit);
}
.legal__body h3{
  font-family:Prata,Georgia,serif;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);
  line-height:1.35;color:var(--cream);margin-top:.4rem;
}
.legal__body p,.legal__body li{color:var(--cream-70);line-height:1.75}
.legal__body a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--copper);transition:border-color .4s ease}
.legal__body a:hover{border-color:var(--copper-lit)}
.legal__body ul{display:grid;gap:.5rem;padding-left:1.1rem;list-style:none}
.legal__body li{position:relative}
.legal__body li::before{
  content:"";position:absolute;left:-1.1rem;top:.75em;width:4px;height:1px;background:var(--copper-lit);
}
.legal__body dl{display:grid;gap:.35rem;color:var(--cream-70)}

/* Offen gekennzeichnete Luecken: was HOKAR selbst eintragen muss. */
.todo{
  color:var(--cream-45);border-bottom:1px dotted var(--copper-lit);
  font-style:italic;
}
.hinweis{
  border:1px solid var(--line);border-left:2px solid var(--copper-lit);
  border-radius:clamp(8px,1vw,12px);
  padding:clamp(1.1rem,2vw,1.5rem) clamp(1.2rem,2.2vw,1.7rem);
  background:rgba(21,20,21,.6);
  color:var(--cream-70);font-size:.95rem;line-height:1.7;
}
.hinweis strong{color:var(--cream);font-weight:400}

.legal__stand{font-size:.82rem;color:var(--cream-28);letter-spacing:.02em}

/* Fussleiste mit Rechtslinks */
.footer__links{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:center}
.footer__links a{
  font-family:Marcellus,serif;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-45);text-decoration:none;transition:color .4s ease;
}
.footer__links a:hover{color:var(--cream)}

/* Der Link in der Einwilligung darf das Klicken auf das Kaestchen nicht ausloesen */
.consent a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--copper)}
.consent a:hover{border-color:var(--copper-lit)}
.legal__body dd{margin:0}

/* --------------------------------------------------- Telefon mit Vorwahl */
/* Die Vorwahl sitzt links im selben Feld. Die Beschriftung steht hier immer
   oben, weil sonst die Vorwahl und die Beschriftung uebereinander laegen. */
/* Von oben positioniert, nicht von unten: sonst rutscht die Vorwahl mit,
   sobald unter dem Feld ein Fehlerhinweis erscheint und das Feld waechst.
   Feste Breite, damit der Trenner auch bei dreistelligen Vorwahlen sitzt. */
.input--tel select{
  position:absolute;left:0;top:1.5rem;z-index:2;
  width:5rem;border:0;border-right:1px solid var(--line);
  padding:0 .6rem 0 0;background:transparent;
  color:var(--cream);cursor:pointer;
  font:300 1rem/1.6 Spectral,Georgia,serif;
}
.input--tel select:focus{outline:0;border-right-color:var(--copper-lit)}
.input--tel input{padding-left:5.8rem}
.input--tel label{transform:translateY(-1.35rem) scale(.78);color:var(--cream-28)}

/* ------------------------------------------------ Fehler deutlich zeigen */
/* Ein getoenter Rahmen allein wird uebersehen. Also Farbe auf Text und
   Beschriftung, dazu ein Hinweis direkt am Feld. */
.input.is-error label,.input.is-error select{color:#c9765a}
.consent.is-error label{color:#c9765a}
.hinweis-feld{
  display:block;margin-top:.45rem;font-size:.78rem;color:#c9765a;
  letter-spacing:.01em;
}
.form__note.is-bad{
  color:#c9765a;font-size:.95rem;
  border-left:2px solid #a4523a;padding-left:.9rem;
}