/* ==========================================================================
   Artefact Aid — Stylesheet
   Marke: Power Grotesk (Bold 700 / Medium 500 / Light 300), Laufweite 0,
   Display-Zeilenhöhe 1.0, Radius 30px auf Flächen und 20px auf kleinem Gerät.
   Regelwerk siehe BRAND.md im Projekt.
   ========================================================================== */

@font-face{font-family:'Power Grotesk';font-weight:300;font-style:normal;font-display:swap;
  src:url('../fonts/PowerGrotesk-Light.woff2') format('woff2');}
@font-face{font-family:'Power Grotesk';font-weight:500;font-style:normal;font-display:swap;
  src:url('../fonts/PowerGrotesk-Medium.woff2') format('woff2');}
@font-face{font-family:'Power Grotesk';font-weight:700;font-style:normal;font-display:swap;
  src:url('../fonts/PowerGrotesk-Bold.woff2') format('woff2');}

:root{
  --burg:#3E0720;
  --burg-deep:#2A0516;
  --lime:#E5FE88;
  --paper:#FFFCFA;
  --ink:#1C1C1C;
  --muted:#3A3539;          /* war #7B5265 — das Rot wirkte schmutzig im Fliesstext */
  --muted-soft:#6B6468;     /* nur für wirklich Nachgeordnetes: Bildunterschriften, Rechtliches */
  --line:rgba(62,7,32,.16);
  --font:'Power Grotesk','Futura','Century Gothic','Trebuchet MS',sans-serif;
  --gutter:clamp(20px, 6vw, 140px);
  --radius:30px;
  --radius-sm:20px;
  --section:clamp(64px, 8vw, 124px);
  --tile-h:clamp(240px, 30vw, 380px);
  --inset:clamp(10px, 1.4vw, 20px);
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:300;
  font-size:17px;
  line-height:1.55;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
a{color:var(--burg);text-decoration:none;}
a:hover{color:var(--muted);}
/* Die Zeile darüber gilt für Fliesstext-Links auf hellem Grund. Auf dunklen
   Flächen würde sie Text fast unsichtbar machen — dort gilt Lime.
   Buttons sind ausgenommen: sie bringen ihre eigene Schriftfarbe mit, sonst
   stünde Lime auf Lime. */
.on-dark a:not(.btn):hover{color:var(--lime);}

:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px;}
.on-dark :focus-visible{outline-color:var(--lime);}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:14px 22px;border-radius:0 0 var(--radius-sm) 0;
  background:var(--lime);color:var(--burg);font-weight:500;
}
.skip-link:focus{left:0;}

.wrap{padding-inline:var(--gutter);}
.section{padding-block:var(--section);}

/* --- Typografie ---------------------------------------------------------- */
h1,h2,h3{margin:0;font-weight:700;line-height:1;letter-spacing:0;text-wrap:balance;}
h3{font-weight:500;line-height:1.2;}
p{margin:0;text-wrap:pretty;}

.t-hero{font-size:clamp(42px, 7vw, 100px);}
.t-h2{font-size:clamp(32px, 4.4vw, 60px);}
.t-h2-s{font-size:clamp(28px, 3.2vw, 44px);}
.t-h3{font-size:clamp(23px, 2vw, 28px);}
.t-lead{font-size:clamp(16px, 1.45vw, 20px);line-height:1.55;}
.t-body{font-size:clamp(15px, 1.15vw, 17px);line-height:1.55;}
.t-small{font-size:14px;line-height:1.55;}
.t-caption{font-size:13px;line-height:1.5;color:var(--muted-soft);}

/* Sektionslabel: gesetzt statt gesperrt in Versalien — die wirkten technisch. */
.label{
  display:block;font-size:clamp(15px, 1.35vw, 18px);font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--burg);
}
.on-dark .label{color:var(--lime);}
.gate .label,.tile .label{font-size:14px;color:var(--muted);}
.gate--filled .label{color:var(--lime);}
.muted{color:var(--muted);}
.on-dark{color:var(--paper);}
.on-dark p{color:var(--paper);opacity:.88;}

.label-row{margin-bottom:clamp(18px,2.4vw,30px);}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 clamp(24px,3vw,34px);
  border:1.5px solid transparent;border-radius:var(--radius);
  font-family:var(--font);font-size:clamp(15px,1.2vw,17px);font-weight:500;
  cursor:pointer;transition:transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--lime);color:var(--burg);}
.btn--primary:hover{background:#EEFFA8;color:var(--burg);}
.btn--ghost{border-color:rgba(255,252,250,.42);color:var(--paper);}
.btn--ghost:hover{border-color:var(--paper);color:var(--paper);}
.btn--sm{min-height:46px;padding:0 24px;font-size:15px;}
.btn svg{flex-shrink:0;}

/* --- Eingerückte Blöcke -----------------------------------------------------
   Die dunklen Flächen stehen nicht randlos, sondern schwimmen als abgerundete
   Karten auf dem Papierweiss — übernommen von der bisherigen Seite.
   Die innere Rinne wird um den Einzug verringert, damit der Text trotzdem auf
   derselben Kante sitzt wie in den hellen Abschnitten. */
.inset{margin:var(--inset);border-radius:var(--radius);overflow:hidden;}
.inset + .inset{margin-top:0;}
.inset > .wrap,
.inset .band__inner{padding-inline:calc(var(--gutter) - var(--inset));}
.site-foot.inset{margin-top:0;}

/* --- Kopfzeile -----------------------------------------------------------
   Wortmarke und Menü stehen auf dem Papierweiss über dem dunklen Block —
   so wie auf der bisherigen Seite. */
.topbar{position:relative;z-index:5;background:var(--paper);}
.site-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:24px;}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font-weight:700;
  font-size:clamp(22px,2.2vw,28px);line-height:1;color:var(--ink);white-space:nowrap;}
.wordmark:hover{color:var(--burg);}
/* Dieselbe Wortmarke steht auch im dunklen Footer — dort in Lime. */
.site-foot .wordmark,.site-foot .wordmark:hover{color:var(--lime);}
.nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,36px);color:var(--burg);}
.nav a{font-size:15px;font-weight:500;color:var(--burg);}
.nav a:hover{color:var(--muted);}
.nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px;}
.nav .ig{display:flex;align-items:center;gap:9px;}
/* `.nav a` ist spezifischer als die Button-Klassen und würde deren Textfarbe
   überschreiben. Deshalb hier ausdrücklich zurückholen. */
.nav a.btn--primary,.nav a.btn--primary:hover{background:var(--burg);color:var(--lime);}

.nav-toggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;
  color:var(--burg);border:1.5px solid rgba(62,7,32,.3);border-radius:var(--radius);
  background:none;cursor:pointer;}

@media (max-width:860px){
  .nav-toggle{display:flex;}
  .nav{
    position:absolute;top:calc(100% - 4px);right:var(--gutter);left:var(--gutter);
    flex-direction:column;align-items:stretch;gap:0;
    padding:10px;border-radius:var(--radius-sm);
    background:var(--paper);border:1.5px solid var(--line);
    box-shadow:0 20px 50px rgba(62,7,32,.14);
  }
  .nav[hidden]{display:none;}
  .nav a{display:flex;align-items:center;min-height:52px;padding-inline:16px;font-size:16px;}
  .nav .btn{margin-top:6px;}
}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg, var(--burg-deep) 0%, var(--burg) 48%, var(--burg-deep) 100%);}
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}

.hero__body{padding-block:clamp(56px,8vw,104px) clamp(52px,9vw,118px);max-width:960px;}
.hero__body h1{color:var(--paper);}
.hero__body h1 em{font-style:normal;color:var(--lime);}
.hero__lead{max-width:640px;margin-top:clamp(22px,3vw,36px);}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,44px);}

.page-head{position:relative;overflow:hidden;background:var(--burg);isolation:isolate;}
.page-head__body{padding-block:clamp(48px,6vw,80px) clamp(46px,7vw,86px);max-width:900px;}
.page-head__body h1{color:var(--paper);font-size:clamp(38px,5.6vw,72px);}

/* --- Ansatz -------------------------------------------------------------- */
.split{display:grid;gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,82px);}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);}}

.steps{display:grid;gap:clamp(28px,4vw,56px);}
@media (min-width:820px){.steps{grid-template-columns:repeat(3, minmax(0,1fr));}}
.step{border-top:1.5px solid var(--burg);padding-top:clamp(20px,2.4vw,28px);}
.step__no{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(54px,5vw,68px);height:clamp(54px,5vw,68px);
  margin-bottom:clamp(16px,2vw,24px);
  border-radius:var(--radius-sm);background:var(--burg);
  font-weight:700;font-size:clamp(27px,2.6vw,34px);line-height:1;color:var(--lime);
}
.step h3{margin-bottom:12px;color:var(--burg);}

/* --- Momente-Slider ------------------------------------------------------ */
.momente{padding-bottom:var(--section);overflow:hidden;}
.momente__head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  padding-bottom:clamp(22px,3vw,36px);}
.momente__intro{max-width:620px;}

.slider-nav{display:flex;gap:12px;flex-shrink:0;}
.slider-nav button{
  display:flex;align-items:center;justify-content:center;
  width:clamp(44px,4vw,50px);height:clamp(44px,4vw,50px);
  border:1.5px solid rgba(62,7,32,.28);border-radius:999px;
  background:none;color:var(--burg);cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.slider-nav button:hover:not(:disabled){background:var(--burg);border-color:var(--burg);color:var(--lime);}
.slider-nav button:disabled{opacity:.3;cursor:default;}
.slider-nav svg{stroke:currentColor;}

.strip{
  display:flex;gap:clamp(14px,1.6vw,20px);
  padding-left:var(--gutter);padding-right:var(--gutter);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-padding-left:var(--gutter);
}
.strip::-webkit-scrollbar{display:none;}

/* Breite der Kachel folgt dem Seitenverhältnis, nicht der Bildunterschrift —
   sonst zieht ein langer Text die Hochkant-Kachel in die Breite. */
.tile{display:flex;flex-direction:column;gap:14px;flex-shrink:0;scroll-snap-align:start;min-width:0;}
.tile--wide {width:calc(var(--tile-h) * 16 / 9);}
.tile--photo{width:calc(var(--tile-h) * 3 / 2);}
.tile--tall {width:calc(var(--tile-h) * 3 / 4);}
.tile--vert {width:calc(var(--tile-h) * 9 / 16);}
.tile__frame{
  position:relative;width:100%;height:var(--tile-h);
  border-radius:var(--radius);overflow:hidden;background:var(--burg);
}
.tile__frame img,.tile__frame video{width:100%;height:100%;object-fit:cover;}
/* Ersatztext im <video> — erscheint nur, wenn der Browser kein MP4 abspielt.
   Ohne eigene Farbe stuende Burgund auf Burgund. */
.tile__frame video p{padding:20px;color:var(--paper);font-size:14px;line-height:1.55;}
.tile__frame video a{color:var(--lime);text-decoration:underline;text-underline-offset:3px;}
.tile figcaption{min-width:0;}

.tile__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;padding:0;
}
.tile__play span{
  display:flex;align-items:center;justify-content:center;
  width:clamp(46px,4.6vw,64px);height:clamp(46px,4.6vw,64px);
  border-radius:999px;background:var(--lime);
  transition:transform .18s ease;
}
.tile__play:hover span{transform:scale(1.08);}
.tile__badge{
  position:absolute;top:16px;left:16px;padding:5px 11px;border-radius:var(--radius-sm);
  background:rgba(42,5,22,.72);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime);
}

/* --- Weichen ------------------------------------------------------------- */
.gates{display:grid;gap:clamp(16px,2vw,28px);}
@media (min-width:840px){.gates{grid-template-columns:repeat(3, minmax(0,1fr));}}
.gate{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(300px,30vw,392px);padding:clamp(28px,3.2vw,40px);
  border:1.5px solid var(--burg);border-radius:var(--radius);
  transition:transform .18s ease, box-shadow .18s ease;
}
.gate,.gate:hover{color:var(--ink);}
.gate:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(62,7,32,.12);}
.gate--filled,.gate--filled:hover{background:var(--burg);border-color:var(--burg);color:var(--paper);}
.gate--filled .label{color:var(--lime);}
.gate--filled p{color:var(--paper);opacity:.86;}
.gate h3{margin-block:16px;font-weight:700;font-size:clamp(26px,2.8vw,34px);line-height:1.08;}
.gate__more{display:flex;align-items:center;gap:12px;margin-top:28px;font-size:16px;font-weight:500;}
.gate--filled .gate__more{color:var(--lime);}

/* --- Bänder -------------------------------------------------------------- */
.band{position:relative;overflow:hidden;background:var(--burg);isolation:isolate;}
.band__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(26px,4vw,90px);padding-block:clamp(56px,7vw,106px);}
.band__text{max-width:620px;}
.band__text h2{margin-bottom:20px;color:var(--paper);}

/* --- Partner -------------------------------------------------------------
   Die Logos sind gestalterisch sehr verschieden — weisse Schrift auf schwarzem
   Kasten neben pastellfarbenen Lettern. Eine gemeinsame Kachel fasst sie zu
   einer Reihe zusammen, ohne an den Logos selbst etwas zu verändern.
   Keine Deckkraft unter 100 %: das macht fremde Marken nur schmutzig. */
.partners .label{display:block;margin-bottom:clamp(16px,2vw,24px);}

.logo-grid{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(8px,1vw,12px);list-style:none;margin:0;padding:0;
}
@media (min-width:560px){.logo-grid{grid-template-columns:repeat(3, minmax(0,1fr));}}
@media (min-width:900px){.logo-grid{grid-template-columns:repeat(4, minmax(0,1fr));}}

.logo-grid li{
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(104px,10vw,128px);padding:20px;
  border-radius:var(--radius-sm);background:var(--paper);
  border:1.5px solid var(--line);
  transition:border-color .18s ease;
}
.logo-grid li:hover{border-color:rgba(62,7,32,.4);}
.logo-grid a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.logo-grid img{max-width:100%;width:auto;object-fit:contain;}

/* nach den Media Queries, damit die Einzelkachel nicht wieder aufgeteilt wird */
.logo-grid--single{grid-template-columns:minmax(0,200px);}

/* --- Fußzeile ------------------------------------------------------------ */
.site-foot{background:var(--burg-deep);color:var(--paper);padding-block:clamp(40px,5vw,56px) 40px;}
.site-foot__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:clamp(28px,4vw,60px);padding-bottom:32px;border-bottom:1px solid rgba(255,252,250,.14);}
.site-foot__cols{display:flex;flex-wrap:wrap;gap:clamp(32px,4.5vw,64px);}
.foot-col{display:flex;flex-direction:column;gap:4px;}
.foot-col strong{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);opacity:.75;padding-bottom:8px;}
.foot-col a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--paper);opacity:.78;}
.foot-col a:hover{color:var(--lime);opacity:1;}
.site-foot__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding-top:24px;font-size:13px;opacity:.55;}
/* Trefferfläche vergrössern, ohne die Zeile auseinanderzuziehen. Die Unterstreichung
   kommt vom Textdekor, nicht von border-bottom — ein Rahmen sässe am Rand der
   gepolsterten Box statt am Text. */
.site-foot__bottom a{display:inline-block;padding:15px 3px;margin:-15px 0;color:inherit;
  text-decoration:none;}
/* Ohne Unterstreichung im Ruhezustand bleibt der Link beim Darüberfahren erkennbar. */
.site-foot__bottom a:hover{color:var(--lime);}
.site-foot .wordmark{margin-bottom:12px;}

/* --- Inhaltsseiten (Presse, Impressum, Datenschutz) ---------------------- */
.rows{max-width:1160px;}
.row{display:grid;gap:clamp(10px,3vw,80px);padding-block:clamp(24px,3vw,36px);
  border-top:1.5px solid var(--line);}
@media (min-width:820px){.row{grid-template-columns:300px minmax(0,1fr);}}
.row:last-child{border-bottom:1.5px solid var(--line);}
.row__value{font-size:clamp(16px,1.2vw,17px);line-height:1.7;color:var(--burg);max-width:680px;}
.row__value a{border-bottom:1.5px solid rgba(62,7,32,.35);}

.prose{max-width:760px;}
.prose h2{margin-top:clamp(40px,5vw,64px);margin-bottom:18px;color:var(--burg);
  font-size:clamp(24px,2.4vw,32px);line-height:1.15;}
.prose h2:first-child{margin-top:0;}
.prose p{margin-bottom:18px;color:var(--ink);line-height:1.7;}
.prose ul{margin:0 0 18px;padding-left:22px;color:var(--ink);line-height:1.7;}
.prose li{margin-bottom:8px;}
.prose a{color:var(--burg);border-bottom:1.5px solid rgba(62,7,32,.35);}

.cols-2{display:grid;gap:clamp(24px,3vw,44px) clamp(28px,4vw,56px);}
@media (min-width:820px){.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}}

.card{padding:clamp(28px,3.2vw,40px);border:1.5px solid var(--burg);border-radius:var(--radius);}
.card--filled{background:var(--burg);border-color:var(--burg);color:var(--paper);}
.card--filled p{color:var(--paper);opacity:.86;}
.card h3{margin-bottom:18px;font-weight:700;font-size:clamp(24px,2.3vw,28px);line-height:1.1;color:var(--burg);}
.card--filled h3{color:var(--paper);}

.stats{display:grid;gap:clamp(24px,3vw,44px);}
@media (min-width:720px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));}}
.stat__no{font-weight:700;font-size:clamp(36px,4vw,48px);line-height:1;color:var(--lime);margin-bottom:14px;}

.ph{color:var(--muted);background:rgba(229,254,136,.34);
  box-shadow:inset 0 -1px 0 rgba(62,7,32,.3);padding:0 5px;}
/* Auf dunklem Grund kippt die Auszeichnung, sonst verschwindet der Text darin. */
.on-dark .ph,.site-foot .ph{color:var(--lime);background:rgba(229,254,136,.14);
  box-shadow:inset 0 -1px 0 rgba(229,254,136,.5);}

.notice{display:flex;gap:20px;max-width:860px;padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,34px);
  border-radius:var(--radius);background:rgba(229,254,136,.34);}
.notice svg{flex-shrink:0;margin-top:2px;}
.notice p{font-size:15px;line-height:1.6;color:var(--burg);}

.divider{border-top:1.5px solid var(--line);padding-top:clamp(32px,4vw,56px);}

/* --- Bewegung sparsam ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .strip{scroll-snap-type:none;}
}