/* ==========================================================================
   PACfilms — shared subpage layer (Team, Mediathek)
   Extends site.css.
   ========================================================================== */

/* -------------------------------- Page hero ------------------------------ */
.page-hero{padding:clamp(8rem,15vw,12rem) 0 0}
.page-hero__title{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(2.1rem,7.2vw,7rem);line-height:1.02;letter-spacing:-.022em;
}
.page-hero__title em{font-style:italic}
/* Diese beiden Klassen fehlten: Vorspann und CTA lagen deshalb ohne jeden
   Abstand direkt an der Headline. */
.page-hero__lead{
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
  color:var(--mute);max-width:54ch;
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);line-height:1.65;
}
.page-hero__cta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1.25rem,3vw,2.5rem);
  margin-top:clamp(2.25rem,4.5vw,3.5rem);
}
.page-hero__foot{
  display:grid;gap:clamp(1.75rem,3vw,3rem);
  margin-top:clamp(2rem,4vw,3.5rem);padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--line);
}
.page-hero__foot p{color:var(--mute);max-width:48ch}
.page-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,2.5vw,2.25rem)}
@media (min-width:900px){.page-hero__foot{grid-template-columns:1fr auto;align-items:center}}
.page-hero__media{margin-top:clamp(3rem,7vw,6rem);padding-inline:var(--gut)}
.page-hero__media img{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  aspect-ratio:21/9;object-fit:cover;background:var(--sand);
}
@media (max-width:700px){.page-hero__media img{aspect-ratio:4/3}}

/* --------------------- Editorial header: type behind media ---------------
   The headline runs full-bleed and the clip stands in front of it, so the
   words are interrupted rather than stacked above the media. */
.editorial{
  position:relative;min-height:100svh;overflow:clip;background:var(--sand);
  display:grid;place-items:center;
  padding:clamp(7rem,12vw,9rem) var(--gut) clamp(4rem,7vw,6rem);
}
.editorial__rail{
  position:absolute;left:clamp(.5rem,1.5vw,1.5rem);top:50%;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  font-weight:600;color:var(--mute-2);
}
.editorial__stage{width:100%;max-width:var(--maxw);margin-inline:auto}
.editorial__type{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(.5rem,2vw,2rem);
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1.8rem,5.6vw,5.2rem);line-height:1.02;letter-spacing:-.03em;
}
/* Vier eigenständige Rasterplätze statt zweier Spaltenstapel: die Wörter
   stehen im Quelltext in Lesereihenfolge, die Anordnung um den Clip macht
   allein das Raster. align-content zentriert die beiden Zeilen als Block,
   so wie es vorher die Flex-Stapel taten. */
/* Der Clip überspannt beide Zeilen und bestimmt damit ihre Höhe. Ohne
   Zutun stünde je ein Wort in der Mitte seiner halben Bühne und die beiden
   Zeilen klafften auseinander. Zeile eins dockt deshalb unten an, Zeile zwei
   oben — dazwischen bleibt nur der Zeilenabstand. */
.editorial__type{row-gap:.1em}
.editorial__w--a{grid-column:1;grid-row:1;justify-self:end;align-self:end;text-align:right}
.editorial__w--b{grid-column:3;grid-row:1;justify-self:start;align-self:end;text-align:left}
.editorial__media{grid-column:2;grid-row:1 / span 2}
.editorial__w--c{grid-column:1;grid-row:2;justify-self:end;align-self:start;text-align:right}
.editorial__w--d{grid-column:3;grid-row:2;justify-self:start;align-self:start;text-align:left}
.editorial__w em{font-style:italic;letter-spacing:-.015em}
.editorial__media{
  position:relative;z-index:2;
  /* Zwei Grenzen: seitlich braucht „Monatelang“ den Rest der Zeile, sonst
     drückt das Wort die Spalte über die Bühne hinaus. Und 37svh hält den
     Hochkant-Clip auf flachen Bildschirmen im ersten Bild. */
  width:min(clamp(200px,23.5vw,400px),37svh);
  box-shadow:0 50px 100px -50px rgba(10,60,77,.6);
}
.editorial__media video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--paper);display:block}
.editorial__badge{margin-top:clamp(2rem,4vw,3rem)}
.editorial__note{
  position:absolute;right:var(--gut);bottom:clamp(2.5rem,6vw,5rem);
  z-index:3;max-width:32ch;text-align:right;
}
.editorial__note p{
  font-family:var(--f-display);font-style:italic;color:var(--petrol);
  font-size:clamp(.95rem,1.5vw,1.2rem);line-height:1.45;margin-bottom:1rem;
}
.editorial__note .ghost{margin-left:auto}
@media (max-width:900px){
  .editorial{place-items:start center;padding-top:clamp(6rem,18vw,8rem)}
  .editorial__type{
    position:static;transform:none;white-space:normal;text-align:center;
    font-size:clamp(2.4rem,11vw,4.5rem);margin-bottom:1.5rem;
  }
  .editorial__line:first-child,.editorial__line:last-child{transform:none}
  .editorial__media{width:clamp(180px,52vw,260px);margin-inline:auto}
  .editorial__note{position:static;text-align:center;max-width:38ch;margin:2rem auto 0}
  .editorial__note .ghost{margin-inline:auto}
  .editorial__rail{display:none}
}

/* ------------------------- Mediathek: drifting collage ------------------- */
.collage{
  position:relative;min-height:100svh;overflow:clip;
  display:grid;place-items:center;
  padding:clamp(7rem,13vw,10rem) var(--gut) clamp(4rem,8vw,7rem);
  background:var(--sand);
}
.drift{position:absolute;inset:0;pointer-events:none}
.drift__i{
  position:absolute;object-fit:cover;
  box-shadow:0 24px 50px -34px rgba(10,60,77,.45);
  opacity:.85;
  animation:float var(--dur,26s) ease-in-out var(--del,0s) infinite alternate;
  will-change:transform;
}
@keyframes float{
  from{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
  to{transform:translate3d(var(--dx,14px),var(--dy,-22px),0) rotate(calc(var(--rot,0deg) + var(--dr,2deg)))}
}
/* scattered, none of them aligned to a grid */
.drift .i1 {left:2%;  top:8%;  width:clamp(80px,10vw,150px); aspect-ratio:9/16; --rot:-6deg;--dx:18px;--dy:-26px;--dur:24s;--del:-2s}
.drift .i2 {left:14%; top:52%; width:clamp(96px,13vw,200px); aspect-ratio:3/2;  --rot:4deg; --dx:-16px;--dy:20px;--dur:31s;--del:-6s}
.drift .i3 {left:5%;  top:76%; width:clamp(70px,9vw,132px);  aspect-ratio:9/16; --rot:8deg; --dx:12px;--dy:-18px;--dur:27s;--del:-10s}
.drift .i4 {left:26%; top:4%;  width:clamp(84px,11vw,168px); aspect-ratio:4/3;  --rot:-3deg;--dx:-14px;--dy:24px;--dur:34s;--del:-4s}
.drift .i5 {right:3%; top:10%; width:clamp(80px,10vw,150px); aspect-ratio:9/16; --rot:7deg; --dx:-20px;--dy:22px;--dur:29s;--del:-8s}
.drift .i6 {right:16%;top:58%; width:clamp(96px,13vw,200px); aspect-ratio:3/2;  --rot:-5deg;--dx:16px;--dy:-20px;--dur:33s;--del:-1s}
.drift .i7 {right:6%; top:78%; width:clamp(70px,9vw,132px);  aspect-ratio:9/16; --rot:3deg; --dx:-12px;--dy:-24px;--dur:26s;--del:-12s}
.drift .i8 {right:27%;top:2%;  width:clamp(84px,11vw,160px); aspect-ratio:4/5;  --rot:6deg; --dx:14px;--dy:18px;--dur:30s;--del:-5s}
.drift .i9 {left:38%; top:84%; width:clamp(70px,9vw,124px);  aspect-ratio:9/16; --rot:-8deg;--dx:-10px;--dy:-16px;--dur:28s;--del:-9s}
.drift .i10{right:38%;top:86%; width:clamp(84px,10vw,150px); aspect-ratio:3/2;  --rot:5deg; --dx:18px;--dy:-14px;--dur:35s;--del:-3s}
@media (max-width:820px){
  /* keep only the outer ring on small screens so the card stays clear */
  .drift .i2,.drift .i4,.drift .i6,.drift .i8,.drift .i9,.drift .i10{display:none}
  .drift__i{opacity:.55}
}

.collage__card{
  position:relative;z-index:2;text-align:center;
  width:min(100%,44rem);
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.75rem,4vw,4rem);
  background:var(--paper);
  box-shadow:0 50px 110px -60px rgba(10,60,77,.55);
}
.collage__card .hero__kicker{justify-content:center;text-align:center}
.collage__title{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(2rem,5.6vw,4.4rem);line-height:1.04;letter-spacing:-.025em;
}
.collage__title em{font-style:italic}
.collage__lead{color:var(--mute);max-width:40ch;margin:clamp(1.25rem,2.5vw,2rem) auto 0;text-wrap:pretty}
.collage__actions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(1rem,2.5vw,2rem);margin-top:clamp(2rem,4vw,3rem);
}

@media (prefers-reduced-motion:reduce){
  .drift__i{animation:none}
}

/* wide still beside the vertical clip, so both formats read at once */
.hero-split{
  display:grid;gap:clamp(1rem,2.5vw,2.5rem);align-items:end;
  width:100%;max-width:var(--maxw);margin:clamp(3rem,7vw,6rem) auto 0;
  padding-inline:var(--gut);
}
@media (min-width:820px){.hero-split{grid-template-columns:minmax(0,1fr) minmax(0,clamp(200px,20vw,300px))}}
.hero-split__img img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--sand)}
.phone--solo{width:100%;margin:0}
@media (max-width:819px){.phone--solo{width:clamp(180px,52vw,260px);margin-inline:auto}}

/* ------------------------- Team: das Haus zuerst ------------------------- */
.haus-hero{
  padding:clamp(7rem,12vw,9rem) 0 clamp(3rem,6vw,5rem);
  text-align:center;
}
.haus-hero .hero__kicker{justify-content:center;margin-bottom:1rem}
.haus-hero__seal{margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
/* the cards need room above them for the portrait that lifts out on hover */
.people{padding-top:calc(var(--sec) + 3rem)}
.cards{row-gap:clamp(3.5rem,6vw,5rem)}
.haus-hero__draw{
  width:min(100%,clamp(280px,46vw,620px));margin:0 auto clamp(1.5rem,3vw,2.5rem);
}
.haus-hero__draw video{
  width:100%;aspect-ratio:4/3;object-fit:contain;mix-blend-mode:multiply;
}
.haus-hero__title{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(2rem,5.6vw,4.6rem);line-height:1.04;letter-spacing:-.025em;
}
.haus-hero__title em{font-style:italic}
.haus-hero__tag{
  margin-top:clamp(1rem,2vw,1.5rem);
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--mute-2);
}

/* --------------------------------- Wer wir sind -------------------------- */
.about{padding:var(--sec) 0;background:var(--sand)}
.about__grid{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media (min-width:960px){.about__grid{grid-template-columns:1.05fr .95fr;gap:clamp(3rem,6vw,6rem)}}
.about__title{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.022em;
  margin-bottom:clamp(1.25rem,2.5vw,2rem);
}
.about__title em{font-style:italic}
.about__txt p{color:var(--mute);max-width:46ch;margin-bottom:1.1rem}
.about__txt .stance__quote{
  font-size:clamp(1.15rem,2.2vw,1.7rem);text-align:left;max-width:30ch;
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding-left:1.25rem;
  border-left:2px solid var(--accent);
}
.about__img img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--paper)}
@media (max-width:959px){.about__img img{aspect-ratio:4/3}}

/* --------------------------------- Stance -------------------------------- */
.stance{padding:var(--sec) 0;text-align:center}
.stance__quote{
  font-family:var(--f-display);color:var(--petrol);
  font-size:clamp(1.7rem,4.6vw,4rem);line-height:1.16;letter-spacing:-.018em;
  max-width:22ch;margin-inline:auto;text-wrap:balance;
}
.stance__quote em{font-style:italic;color:var(--accent)}
.stance .hand{text-align:center}

/* ---------------------------- Team: Visitenkarten ------------------------ */
.people{padding:var(--sec) 0;background:var(--sand)}
.cards{display:grid;gap:clamp(.85rem,1.6vw,1.25rem)}
@media (min-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(4,1fr)}}

/* A business card: name, role and the person's own text always readable on
   white. The portrait is dealt out on top of it on hover, tilted, the way the
   reference card does it. */
.card{
  position:relative;
  display:flex;flex-direction:column;gap:.9rem;
  padding:clamp(1.25rem,2.2vw,1.75rem);
  background:var(--paper);border:1px solid var(--line-2);
  min-height:clamp(15rem,24vw,20rem);
  transition:border-color .45s var(--ease-out),box-shadow .5s var(--ease-out);
}
.card__head{display:flex;flex-direction:column;gap:.25rem}
.card__name{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1.02rem,1.7vw,1.28rem);line-height:1.15;letter-spacing:-.015em;
}
.card__role{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--signal-ink)}
.card__bio{color:var(--mute);font-size:.85rem;line-height:1.55;margin-top:auto}

/* the portrait card, hidden until the pointer arrives */
.card__photo{
  position:absolute;left:50%;top:-8%;z-index:3;margin:0;
  width:78%;pointer-events:none;
  opacity:0;transform:translate(-50%,26px) rotate(0deg) scale(.94);
  transition:opacity .45s var(--ease-out),transform .6s var(--ease-out);
  box-shadow:0 40px 70px -34px rgba(10,60,77,.6);
}
.card__photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.card__photo figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.4rem 1rem .9rem;
  background:linear-gradient(to top,rgba(6,40,49,.94),rgba(6,40,49,.55) 55%,transparent);
  color:var(--paper);display:flex;flex-direction:column;gap:.15rem;
}
.card__photo figcaption b{font-family:var(--f-display);font-weight:400;font-size:1rem;letter-spacing:-.01em}
.card__photo figcaption span{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}

@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:transparent;box-shadow:0 30px 60px -40px rgba(10,60,77,.35)}
  .card:hover .card__photo{opacity:1;transform:translate(-50%,0) rotate(-3deg) scale(1)}
  .card:nth-child(even):hover .card__photo{transform:translate(-50%,0) rotate(3deg) scale(1)}
}
/* Ohne Zeigegerät gibt es kein Hover: das Porträt steht dann fest über dem
   Text. Es behält sein natürliches 4:5 — auf 16:10 beschnitten schneidet
   „cover“ den Kopf ab. Und die Bildunterschrift entfällt, weil Name und Rolle
   schon zwei Zeilen darüber stehen. */
@media (hover:none){
  .card{padding-top:clamp(1.25rem,2.2vw,1.75rem)}
  .card__photo{
    position:static;width:auto;opacity:1;transform:none;box-shadow:none;
    margin:0;order:-1;
  }
  .card__photo img{aspect-ratio:4/5}
  .card__photo figcaption{display:none}
}
/* Auftritt einer Karte: das Porträt entwickelt sich, der Name steigt Wort für
   Wort auf, Rolle und Text folgen versetzt. Ohne diese Staffelung erscheint
   die Karte als ein Block — auf dem Telefon, wo immer nur eine im Bild steht,
   wirkte die Seite dadurch wie ein Ausdruck. */
.card__role,.card__bio{
  opacity:0;transform:translateY(14px);
  transition:opacity .75s var(--ease-out),transform .85s var(--ease-out);
}
.card.is-in .card__role{opacity:1;transform:none;transition-delay:.3s}
.card.is-in .card__bio{opacity:1;transform:none;transition-delay:.42s}
.card__name .w-line>span{transition-duration:.8s}
/* Ein Bindestrich-Name wie „Rozorea-Schaffarczik“ passt nicht in eine
   Wortmaske: inline-block mit overflow:hidden kann nicht umbrechen und schiebt
   die Seite hinaus. Innerhalb der Maske deshalb Trennung erlauben. */
.card__name .w-line,.card__name .w-line>span{max-width:100%;overflow-wrap:break-word;hyphens:auto}

/* Das Porträt bekommt seinen Auftritt nur dort, wo es fest in der Karte steht.
   Bei Zeigegeräten ist es die Hover-Karte und trägt eine eigene transform
   (translate(-50%)) — die darf hier nicht überschrieben werden, sonst rutscht
   das absolut positionierte Bild aus der Seite. */
@media (hover:none){
  .card__photo{
    opacity:0;transform:translateY(18px) scale(.985);filter:blur(7px);
    transition:opacity .75s var(--ease-out),transform .85s var(--ease-out),filter .85s var(--ease-out);
  }
  .card.is-in .card__photo{opacity:1;transform:none;filter:blur(0);transition-delay:.04s}
}

@media (max-width:619px){
  /* Einspaltig tritt jede Karte für sich auf. Der Index-Versatz der Gruppe
     wäre hier nur Verzögerung — bis zu 490 ms, bevor überhaupt etwas passiert. */
  .cards>.card{transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){
  .card__role,.card__bio{opacity:1!important;transform:none!important}
  @media (hover:none){
    .card__photo{opacity:1!important;transform:none!important;filter:none!important}
  }
}

.card--open{border-style:dashed;border-color:var(--line);background:transparent}
.card--open .card__link{
  margin-top:1rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--petrol);border-bottom:1px solid var(--line);
  padding-bottom:.2rem;align-self:flex-start;
}
.card--open{border-style:dashed;border-color:var(--line);background:transparent}
.card--open .card__link{
  margin-top:.75rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--petrol);border-bottom:1px solid var(--line);
  padding-bottom:.2rem;align-self:flex-start;
}
.card--open:hover{transform:translateY(-6px)}

/* -------------------------------- Gallery -------------------------------- */
.page-gallery{padding:var(--sec) 0}
.gallery{display:grid;gap:clamp(.85rem,1.8vw,1.5rem)}
@media (min-width:900px){
  .gallery{grid-template-columns:repeat(12,1fr);align-items:start}
  .gallery__a{grid-column:1/6}
  .gallery__b{grid-column:6/10;margin-top:clamp(2rem,5vw,5rem)}
  .gallery__c{grid-column:10/13}
  .gallery__d{grid-column:3/9;margin-top:clamp(1rem,2vw,2rem)}
}
.gallery figure{overflow:hidden;background:var(--sand)}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.gallery__b img,.gallery__c img{aspect-ratio:3/4}

/* ------------------------------ Mediathek -------------------------------- */
.plan{padding:var(--sec) 0;background:var(--sand)}
.plan__head{max-width:56rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.plan__title{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1.9rem,4.6vw,3.8rem);line-height:1.06;letter-spacing:-.022em;
}
.plan__title em{font-style:italic}
.plan__lead{color:var(--mute);max-width:52ch;margin-top:clamp(1.25rem,2.5vw,2rem)}

/* Stated once, because all three plans carry the same rights. Repeating them
   per tier would be three identical bullet lists. */
.rights{
  display:grid;gap:clamp(1rem,2vw,1.5rem);
  padding:clamp(1.5rem,3vw,2rem) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
@media (min-width:760px){.rights{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}}
.rights li{display:flex;flex-direction:column;gap:.3rem}
.rights b{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1rem,1.6vw,1.25rem);letter-spacing:-.01em;
}
.rights span{color:var(--mute-2);font-size:.85rem;line-height:1.45}

/* Three tiers, not three equal cards: only the recommended one carries a
   surface, the others sit open on the page and are held by a hairline. */
.tiers{display:grid;gap:clamp(2rem,4vw,2.5rem)}
@media (min-width:900px){
  .tiers{grid-template-columns:1fr 1.15fr 1fr;gap:0;align-items:stretch}
}
.tier{
  display:flex;flex-direction:column;gap:.55rem;
  padding:clamp(1.75rem,3vw,2.5rem) 0;
  border-top:1px solid var(--petrol);
}
@media (min-width:900px){
  .tier{padding:clamp(2rem,3.4vw,2.75rem) clamp(1.5rem,2.6vw,2.25rem)}
  /* the featured tier breaks the baseline so the row is not a flat trio */
  .tier--top{
    margin-top:clamp(-3.5rem,-4vw,-2.5rem);
    background:var(--paper);
    border-top:2px solid var(--accent);
    box-shadow:0 30px 70px -50px rgba(10,60,77,.55);
  }
}
.tier--top{background:var(--paper);border-top:2px solid var(--accent)}

/* Einspaltig trug nur das empfohlene Paket eine Fläche, die anderen standen
   offen auf dem Sand und gingen darin unter. Und weil das seitliche Polster
   erst ab 900 px greift, klebten Zahlen und Text an der Kante. Auf schmalen
   Geräten bekommt deshalb jedes Paket eine eigene Fläche mit Polster. */
@media (max-width:899px){
  .tier{
    background:var(--paper);
    padding:clamp(1.5rem,5.5vw,2.25rem);
    border:1px solid var(--line-2);
    border-top:2px solid var(--petrol);
    box-shadow:0 18px 44px -34px rgba(10,60,77,.45);
  }
  .tier--top{
    border-top-color:var(--accent);
    box-shadow:0 26px 60px -36px rgba(10,60,77,.6);
  }
}
.tier__flag{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--accent);
}
.tier__name{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;letter-spacing:-.02em;
}
.tier__vol{color:var(--mute);font-size:1rem;line-height:1.45;margin-top:.4rem}
.tier__vol b{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.02em;
  vertical-align:-.06em;
}
.tier__vol i{font-style:italic;color:var(--mute-2)}
.tier__len{color:var(--mute-2);font-size:.82rem}
.tier__price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.15rem .5rem;
  margin-top:auto;padding-top:clamp(1.5rem,3vw,2.25rem);
  font-family:var(--f-display);color:var(--petrol);
  font-size:clamp(1.2rem,2vw,1.6rem);
}
.tier__price span{font-size:clamp(2.6rem,5vw,4.2rem);line-height:.9;letter-spacing:-.04em}
.tier__price small{
  flex-basis:100%;font-family:var(--f-ui);font-size:.78rem;
  color:var(--mute-2);letter-spacing:.02em;
}
.tier__ask{font-size:clamp(1.5rem,2.6vw,2.1rem)!important;font-style:italic;color:var(--accent)}
.tier .btn{margin-top:1.5rem;justify-content:center}

.plan__foot{
  display:grid;gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--line);
}
@media (min-width:900px){.plan__foot{grid-template-columns:1.2fr 1fr;gap:clamp(2rem,4vw,4rem)}}
.plan__setup{color:var(--mute);font-size:.92rem;max-width:52ch}
.plan__setup b{font-family:var(--f-display);font-weight:400;color:var(--petrol);font-size:1.05rem}
.plan__term{color:var(--mute-2);font-size:.85rem;max-width:44ch}

/* --------------------------------- Steps --------------------------------- */
.steps{padding:var(--sec) 0}
.steps__list{display:grid;gap:clamp(2rem,4vw,3rem);border-top:1px solid var(--line-2)}
@media (min-width:820px){.steps__list{grid-template-columns:repeat(3,1fr)}}
.steps__list li{padding-top:clamp(1.5rem,3vw,2.25rem)}
.steps__list span{display:block;font-size:.66rem;letter-spacing:.2em;font-weight:600;color:var(--accent);margin-bottom:.85rem}
.steps__list b{
  display:block;font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1.4rem,2.6vw,2.1rem);letter-spacing:-.02em;margin-bottom:.65rem;
}
.steps__list p{color:var(--mute);font-size:.95rem}
.steps .hand{text-align:center;margin-top:clamp(3rem,6vw,5rem)}

/* -------------------------------- Samples -------------------------------- */
.samples{padding:var(--sec) 0 calc(var(--sec) * .6);background:var(--sand);overflow:hidden}

/* -------------------------------- CTA band ------------------------------- */
.cta-band{padding:var(--sec) 0;text-align:center}
.cta-band__inner{
  max-width:52rem;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:clamp(1.25rem,2.5vw,2rem);
}
.cta-band__title{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1.9rem,5vw,4.2rem);line-height:1.06;letter-spacing:-.022em;
}
.cta-band__title em{font-style:italic}
.cta-band p{color:var(--mute);max-width:48ch}
.cta-band .award__hand{color:var(--accent)}

/* ------------------------------- Kontakt --------------------------------- */
/* Der Clip steht hier über die ganze Spalte, nicht in einer Rasterhälfte wie
   auf der Startseite — bei 4:3 wäre er sonst über einen Meter hoch. */
.kontakt-film{padding-top:clamp(2.5rem,6vw,4.5rem)}
.kontakt-film .contact__media{aspect-ratio:16/9;margin:0}
@media (max-width:700px){.kontakt-film .contact__media{aspect-ratio:4/3}}

.kontakt-data{padding:clamp(3.5rem,8vw,6.5rem) 0 var(--sec)}
.kontakt-grid{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line);padding-top:clamp(2.5rem,5vw,4rem);
}
@media (min-width:820px){.kontakt-grid{grid-template-columns:repeat(3,1fr)}}
.kontakt-col{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.kontakt-col h2{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--mute-2);margin-bottom:.85rem;
}
.kontakt-big{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1.15rem,2.1vw,1.55rem);letter-spacing:-.018em;
  position:relative;padding-bottom:.15rem;
}
/* Unterstrich wächst von links, statt hart einzublenden */
.kontakt-big::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--petrol);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.kontakt-big:hover::after{transform:scaleX(1)}
.kontakt-hours{display:grid;gap:.5rem;width:100%;max-width:22rem}
.kontakt-hours > div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.kontakt-hours dt{color:var(--mute);font-size:.9rem}
.kontakt-hours dd{margin:0;color:var(--petrol);font-size:.9rem;font-weight:600}
.kontakt-adr{font-style:normal;color:var(--petrol);font-size:.95rem;line-height:1.65}
.kontakt-note{color:var(--mute);font-size:.85rem;line-height:1.65;max-width:34ch;margin-top:.9rem}
.kontakt-col .seals{margin-top:1rem}
.kontakt-faq{padding:var(--sec) 0;background:var(--sand)}

/* ------------------------- Rechtliche Seiten ------------------------------ */
/* Lesetext, kein Layout-Stück: eine Spalte, feste Zeilenlänge, viel Luft
   zwischen den Abschnitten. Die Seite muss man lesen können, nicht bestaunen. */
.legal{padding:calc(var(--sec) * .7) 0 var(--sec)}
.legal__title{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(2.2rem,7vw,5rem);line-height:1.02;letter-spacing:-.028em;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.legal__toc{
  display:flex;flex-wrap:wrap;gap:.5rem .35rem;
  max-width:52rem;padding:clamp(1.25rem,2.5vw,1.75rem) 0;
  border-block:1px solid var(--line);margin-bottom:clamp(2.5rem,5vw,4rem);
}
.legal__toc a{
  font-size:.74rem;letter-spacing:.06em;color:var(--mute);
  padding:.35rem .8rem;border:1px solid var(--line-2);border-radius:100px;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.legal__toc a:hover{color:var(--petrol);border-color:var(--petrol);background:var(--sand)}
.legal__body{max-width:46rem}
.legal__body h2{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1.2rem,2.4vw,1.75rem);line-height:1.2;letter-spacing:-.018em;
  margin:clamp(2.5rem,5vw,3.75rem) 0 .9rem;
  /* Sprungziel darf nicht unter der fixierten Navigation landen */
  scroll-margin-top:6rem;
}
.legal__body h2:first-child{margin-top:0}
.legal__body p{color:var(--mute);font-size:.94rem;line-height:1.72;margin-bottom:1rem;max-width:62ch}
.legal__body ul{margin:0 0 1.25rem;padding-left:1.1rem;list-style:disc}
.legal__body li{color:var(--mute);font-size:.94rem;line-height:1.72;margin-bottom:.5rem;max-width:60ch}
.legal__body li::marker{color:var(--signal-deep)}
.legal__body b{font-weight:600;color:var(--petrol)}
.legal__body a{color:var(--petrol);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.legal__body a:hover{color:var(--signal-deep)}
.legal__stamp{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.25rem;
  border-top:1px solid var(--line-2);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);
}

/* Einleitung und Cookie-Tabelle auf den Rechtsseiten */
.legal__intro{
  color:var(--mute);font-size:.95rem;line-height:1.7;max-width:52ch;
  margin:-1rem 0 clamp(2rem,4vw,3rem);
}
.legal__body h3{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  font-size:clamp(1.05rem,1.9vw,1.3rem);margin:2rem 0 .7rem;letter-spacing:-.015em;
}
/* Cookiebot liefert eine eigene Tabelle: die darf hier nur nicht ausbrechen */
.legal__decl{margin:1.5rem 0;overflow-x:auto}
.legal__decl table{width:100%;font-size:.85rem}
/* Widerruf-Schalter sieht aus wie ein Link, ist aber ein Button */
.legal__link{
  display:inline;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--petrol);
  text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;
}
.legal__link:hover{color:var(--signal-deep)}

/* Der Mediathek-Kopf setzt die Headline links und rechts neben den Clip.
   Auf 375 px braucht das 572 px und wird abgeschnitten — dort stapeln.

   Die beiden Spalten dürfen dabei nicht als Block untereinander rutschen: aus
   „Einmal drehen. Monatelang nutzen.“ würde sonst „Einmal Monatelang“ über
   „drehen. nutzen.“. Die Seiten lösen sich deshalb auf (display:contents), und
   die vier Wortgruppen ordnen sich paarweise neu — eine Zeile über dem Clip,
   eine darunter. */
@media (max-width:900px){
  .editorial__type{
    grid-template-columns:auto auto;justify-content:center;
    gap:clamp(.6rem,2.5vw,1.1rem) .3em;
    font-size:clamp(1.9rem,8.4vw,3.4rem);
  }
  /* beide Zeilen teilen sich eine Mittelachse, sonst stehen die Wortpaare
     verschieden weit auseinander */
  .editorial__w--a{grid-column:1;grid-row:1;justify-self:end}
  .editorial__w--b{grid-column:2;grid-row:1;justify-self:start}
  .editorial__media{grid-column:1/-1;grid-row:2}
  .editorial__w--c{grid-column:1;grid-row:3;justify-self:end}
  .editorial__w--d{grid-column:2;grid-row:3;justify-self:start}
}

/* ---------------------- Kundenprojekte: Stimmen --------------------------- */
/* Die Stimmen stehen direkt unter der Kopfzeile und sollen deren Satzbild
   fortsetzen, nicht als Kachelreihe daneben stehen. Deshalb: keine Flächen,
   keine Rahmen — eine Leitstimme fast auf Überschriftengröße, darunter die
   beiden kurzen als Paar, gehalten von einer Haarlinie. */
.kp-voices{padding:clamp(2.5rem,5vw,4rem) 0 clamp(3.5rem,7vw,6rem)}
.kp-voices__label{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--mute-2);margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}

.kp-voice{margin:0;display:flex;flex-direction:column;gap:clamp(.85rem,1.6vw,1.15rem)}
.kp-voice__stars{
  color:var(--signal-deep);letter-spacing:.3em;font-size:.8rem;line-height:1;
}
.kp-voice__text{
  font-family:var(--f-display);font-weight:400;color:var(--petrol);
  letter-spacing:-.015em;text-wrap:pretty;
  /* Anführungszeichen hängen in den Rand, damit die linke Kante gerade bleibt */
  hanging-punctuation:first;
}
.kp-voice__wer{
  font-style:normal;display:flex;flex-direction:column;gap:.1rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);
}
.kp-voice__wer b{
  font-weight:700;letter-spacing:.12em;color:var(--petrol);
}

/* Die Leitstimme trägt den Abschnitt. Sie ist lang: auf Überschriftengröße
   und schmaler Spalte ergäbe sie elf Zeilen und eine leere rechte Hälfte.
   Deshalb eine Stufe kleiner, auf echter Lesebreite, und Bewertung samt Name
   wandern in eine schmale zweite Spalte — das füllt die Zeile und liest sich
   als Doppelseite statt als Textblock. */
.kp-voice--leit{margin-bottom:clamp(2.5rem,5vw,4rem)}
/* Grenze in em statt ch: die Null dieser Displayschrift ist ungewöhnlich
   breit, ein ch misst rund 0,76 em. Über ch gerechnet lag die Zeile bei 29
   Zeichen. 29 em treffen die angestrebten rund fünfzig. */
.kp-voice--leit .kp-voice__text{
  font-size:clamp(1.25rem,2.2vw,1.95rem);line-height:1.34;max-width:29em;
}
@media (min-width:900px){
  .kp-voice--leit{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,13rem);
    /* Erste Zeile nur so hoch wie die Sterne, damit der Name direkt darunter
       sitzt. Ohne das verteilt das Zitat, das beide Zeilen aufspannt, seine
       Höhe gleichmäßig und reißt die beiden auseinander. */
    grid-template-rows:min-content 1fr;
    column-gap:clamp(2.5rem,5vw,5rem);row-gap:.9rem;align-items:start;
  }
  .kp-voice--leit .kp-voice__text{grid-column:1;grid-row:1 / span 2;margin:0}
  .kp-voice--leit .kp-voice__stars{grid-column:2;grid-row:1}
  .kp-voice--leit .kp-voice__wer{grid-column:2;grid-row:2}
}

.kp-voices__paar{
  display:grid;gap:clamp(1.75rem,3.5vw,3rem);
  border-top:1px solid var(--line-2);padding-top:clamp(1.75rem,3.5vw,2.75rem);
}
@media (min-width:820px){
  .kp-voices__paar{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,4rem)}
}
.kp-voices__paar .kp-voice__text{
  font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:1.45;max-width:34ch;
}