/* Schriften liegen lokal: beim Seitenaufruf entsteht keine
   Verbindung zu Google, damit ist keine Einwilligung noetig. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(schriften/archivo.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(schriften/archivo.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(schriften/archivo.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(schriften/archivo.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(schriften/archivo.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(schriften/dm-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(schriften/dm-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(schriften/instrument-sans.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(schriften/instrument-sans.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(schriften/instrument-sans.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   FR VIDEOGRAPHY — Nürnberg
   One committed visual world: brand light/dark banding.
   Type: Archivo (display) + Instrument Sans (text) + DM Mono (micro).
   Structure carried by rules and bands, not repeated card chrome.
   ============================================================ */

:root{
  --ink:       #0A0812;
  --ink-soft:  #15111F;
  --ink-deep:  #050308;
  --bone:      #F2EFE7;
  --paper:     #FBFAF6;
  --slate:     #131118;
  --violet:    #8B44E0;
  --violet-hi: #C09BF5;
  --lime:      #D8F04B;
  --green:     #4CB93C;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,monospace;

  --s1:8px; --s2:16px; --s3:24px; --s4:36px;
  --s5:52px; --s6:76px; --s7:104px; --s8:136px;
  --shell:1220px;
  --topbar-h:71px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--lime);color:var(--slate);}

/* ---------- BANDS ------------------------------------------- */
.band{background:var(--bg);color:var(--fg);position:relative;}
.band--dark{
  --bg:var(--ink); --fg:var(--bone); --dim:#A79FBC;
  --rule:rgba(242,239,231,.16); --accent:var(--lime); --emph:var(--violet-hi);
}
.band--deep{
  --bg:var(--ink-deep); --fg:var(--bone); --dim:#A79FBC;
  --rule:rgba(242,239,231,.14); --accent:var(--lime); --emph:var(--violet-hi);
}
.band--paper{
  --bg:var(--paper); --fg:var(--slate); --dim:#565064;
  --rule:rgba(19,17,24,.16); --accent:var(--violet); --emph:var(--violet);
}
.band--lime{
  --bg:var(--lime); --fg:var(--slate); --dim:#3E4415;
  --rule:rgba(19,17,24,.26); --accent:var(--slate); --emph:var(--slate);
}
.band--glow{
  --bg:var(--ink); --fg:var(--bone); --dim:#BEB5D3;
  --rule:rgba(242,239,231,.2); --accent:var(--lime); --emph:var(--violet-hi);
  background:
    radial-gradient(115% 85% at 76% 106%, var(--violet) 0%, rgba(139,68,224,.40) 27%, transparent 63%),
    radial-gradient(85% 65% at 10% -8%, rgba(139,68,224,.20) 0%, transparent 56%),
    var(--ink);
}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:clamp(20px,5vw,60px);}
section{padding-block:clamp(60px,8.5vw,var(--s8));}
/* keep anchored sections clear of the fixed bar */
section[id]{scroll-margin-top:var(--topbar-h);}

.band-tight{padding-block:clamp(46px,6vw,84px);}

/* ---------- TYPE -------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.4vw,4.9rem);font-weight:900;}
h2{font-size:clamp(2rem,4.4vw,3.5rem);}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.015em;line-height:1.18;}
p{margin:0;}

.eyebrow{
  font-family:var(--display);font-weight:800;
  font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin:0;
}
.lede{font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--dim);max-width:60ch;}
.lede--wide{max-width:66ch;}

.emph{color:var(--emph);}
.mark{
  background:var(--lime);color:var(--slate);
  padding:.02em .2em .08em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.band--lime .mark{background:var(--slate);color:var(--lime);}

/* ---------- BUTTONS ----------------------------------------- */
/* wird sowohl auf <a> als auch auf <button> gesetzt — ohne diese Ruecksetzung
   schlaegt beim Knopf der Eigenstil des Browsers durch (Rahmen, Flaeche, Schrift) */
.cta{
  display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;cursor:pointer;
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;
  -webkit-appearance:none;appearance:none;
}
.cta__pill{
  background:var(--lime);color:var(--slate);
  font-family:var(--body);font-weight:600;font-size:1rem;
  padding:16px 30px;border-radius:999px;white-space:nowrap;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.cta__disc{
  width:54px;height:54px;flex:none;border-radius:50%;
  border:1.5px solid var(--lime);color:var(--lime);
  display:grid;place-items:center;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.cta:hover .cta__pill{background:#E4F96A;transform:translateY(-2px);}
.cta:hover .cta__disc{background:var(--lime);color:var(--slate);transform:translateY(-2px) rotate(45deg);}
.cta:focus-visible{outline:none;}
.cta:focus-visible .cta__pill{outline:3px solid var(--emph);outline-offset:3px;}

.cta--dark .cta__pill{background:var(--slate);color:var(--lime);}
.cta--dark:hover .cta__pill{background:#25212F;}
.cta--dark .cta__disc{border-color:var(--slate);color:var(--slate);}
.cta--dark:hover .cta__disc{background:var(--slate);color:var(--lime);}

.cta--line .cta__pill{background:transparent;color:var(--fg);border:1.5px solid var(--rule);}
.cta--line:hover .cta__pill{background:transparent;border-color:var(--accent);color:var(--accent);}
.cta--line .cta__disc{border-color:var(--rule);color:var(--fg);}
.cta--line:hover .cta__disc{background:transparent;border-color:var(--accent);color:var(--accent);}

.tlink{
  font-weight:600;text-decoration:none;color:var(--accent);
  display:inline-flex;align-items:center;gap:8px;font-size:.95rem;
  border-bottom:1px solid transparent;transition:border-color .18s var(--ease);
}
.tlink:hover{border-color:currentColor;}

/* ---------- NAV --------------------------------------------- */
/* Fixed, not sticky: the hero's gradient has to run underneath the bar so
   there is no seam at the top of the page. The solid state below is the
   no-JS default — with JS the bar starts transparent and only fills in once
   the top sentinel has scrolled away, so bone text never sits untreated on
   the light bands. */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,8,18,.9);
  backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid rgba(242,239,231,.1);
  transition:background .28s var(--ease),border-color .28s var(--ease);
}
.js .topbar:not(.is-stuck){
  background:transparent;
  backdrop-filter:none;
  border-bottom-color:transparent;
}
#top-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;}
/* Nav is centred on the ROW, not inside a grid track: a `1fr` track cannot
   shrink below its content, so the wider action cluster would otherwise push
   the middle track off-centre. Below the breakpoint the nav becomes an
   overlay and leaves this flow entirely. */
.topbar__row{
  position:relative;
  max-width:var(--shell);margin:0 auto;
  padding:12px clamp(20px,5vw,60px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--bone);}
/* Das Logo traegt den Namen selbst — daneben steht nur noch der Zusatz */
/* 50px sichtbar, aber nur 46px im Fluss: die Kopfzeile ist fest 71px hoch
   (--topbar-h), darauf bauen Sprungziele und Menue. */
.brand__logo{height:50px;width:auto;flex:none;display:block;margin-block:-2px;}
.brand small{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;line-height:1.55;
  color:#8C84A3;display:block;text-transform:uppercase;
  white-space:nowrap;   /* sonst waechst der Kopf ueber seine feste Hoehe */
  padding-left:13px;border-left:1px solid rgba(242,239,231,.2);
}
.brand small span{display:block;}
@media(max-width:640px){.brand__logo{height:42px;margin-block:0;}}

/* Der Zusatz neben dem Logo braucht Platz: auf schmalen Geraeten
   stiesse er an die Knopfleiste und tritt deshalb zurueck. */
@media(max-width:640px){ .brand small{display:none;} }

.mainnav{
  display:flex;gap:clamp(12px,1.8vw,28px);
  position:absolute;left:50%;transform:translateX(-50%);
}
.mainnav a{
  font-family:var(--body);font-weight:500;font-size:.97rem;
  letter-spacing:0;text-decoration:none;
  color:#C7C0D6;padding:8px 2px;position:relative;
  transition:color .16s var(--ease);white-space:nowrap;
}
.mainnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.mainnav a:hover,.mainnav a:focus-visible{color:var(--bone);}
.mainnav a:hover::after,.mainnav a:focus-visible::after{transform:scaleX(1);}

.topbar__actions{justify-self:end;display:flex;align-items:center;gap:12px;}
.iconbtn{
  width:44px;height:44px;flex:none;border-radius:50%;
  border:1px solid rgba(242,239,231,.2);
  display:grid;place-items:center;color:var(--bone);text-decoration:none;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.iconbtn:hover{border-color:var(--lime);color:var(--lime);}
.iconbtn svg{width:19px;height:19px;}

/* pill with the arrow badge tucked inside, as in the reference */
.navcta{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--body);font-weight:600;font-size:.95rem;
  text-decoration:none;white-space:nowrap;
  background:var(--lime);color:var(--slate);
  padding:7px 7px 7px 21px;border-radius:999px;
  transition:background .2s var(--ease);
}
.navcta:hover{background:#E4F96A;}
.navcta__disc{
  width:32px;height:32px;flex:none;border-radius:50%;
  background:var(--slate);color:var(--lime);
  display:grid;place-items:center;
  transition:transform .22s var(--ease);
}
.navcta:hover .navcta__disc{transform:rotate(45deg);}
.navcta__disc svg{width:14px;height:14px;}

.burger{
  display:none;background:none;border:1px solid rgba(242,239,231,.22);
  color:var(--bone);width:46px;height:46px;
  align-items:center;justify-content:center;cursor:pointer;
}
@media(max-width:1200px){
  .mainnav{
    position:fixed;inset:var(--topbar-h) 0 auto 0;background:var(--ink);
    flex-direction:column;gap:0;left:0;
    padding:var(--s2) clamp(20px,5vw,60px) var(--s5);
    border-bottom:1px solid rgba(242,239,231,.14);
    /* clear the panel's own height AND the offset from the top, otherwise the
       closed panel still hangs over the header and swallows burger clicks */
    transform:translateY(calc(-100% - var(--topbar-h)));
    transition:transform .32s var(--ease);
    max-height:calc(100dvh - var(--topbar-h));overflow-y:auto;
  }
  .mainnav[data-open="true"]{transform:translateY(0);}
  .mainnav a{
    font-family:var(--display);font-weight:800;font-size:1.3rem;
    letter-spacing:-.02em;padding:15px 0;
    border-bottom:1px solid rgba(242,239,231,.1);
  }
  .mainnav a::after{display:none;}
  .burger{display:flex;}
  .navcta{display:none;}
}
@media(max-width:420px){.iconbtn{display:none;}}

/* ---------- HERO -------------------------------------------- */
/* the bar no longer occupies flow, so the hero carries its height itself */
.hero{padding-block:calc(var(--topbar-h) + clamp(44px,6vw,80px)) 0;overflow:hidden;}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr);
  gap:clamp(20px,3vw,48px);align-items:end;
}
@media(max-width:980px){.hero__grid{grid-template-columns:1fr;align-items:start;}}
.hero h1{max-width:13ch;}
.hero__sub{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.25rem,2.4vw,1.9rem);letter-spacing:-.02em;line-height:1.14;
  margin-top:.45em;max-width:24ch;color:var(--fg);
}
.hero__meta{
  margin-top:var(--s4);padding-top:var(--s2);
  border-top:1px solid var(--rule);
  font-size:1rem;color:var(--dim);max-width:46ch;
}
.hero__meta b{font-weight:600;color:var(--fg);}
.hero__actions{margin-top:var(--s4);padding-bottom:clamp(32px,5vw,64px);}

.portrait{position:relative;align-self:end;max-width:400px;margin-left:auto;width:100%;}
@media(max-width:980px){.portrait{max-width:320px;margin-inline:auto 0;}}
.portrait::before{
  content:"";position:absolute;
  left:2%;right:-8%;bottom:0;height:74%;
  background:radial-gradient(56% 60% at 50% 62%, rgba(192,155,245,.32), transparent 72%);
  filter:blur(6px);pointer-events:none;
}
.portrait__img{position:relative;}
.portrait__img img{
  width:100%;height:auto;
  /* cut-out is carried by the mask's ALPHA channel (RGBA png), which is what
     mask-mode:alpha reads; the jpeg underneath is matted dark so a failed
     mask degrades to a dark ground rather than a white box. */
  -webkit-mask-image:url("bilder/finn-hero-maske.png");
  mask-image:url("bilder/finn-hero-maske.png");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-source-type:alpha;mask-mode:alpha;
  filter:drop-shadow(0 22px 38px rgba(3,2,6,.55));
}

/* ---------- CLIENT LINE ------------------------------------- */
/* extra head room: this is the hero's dark-to-light edge, the most visible
   one on the page, so it gets a full fade and the label still clears it */
/* ---------- SOZIALE KANAELE --------------------------------- */
/* ---------- GEGENUEBERSTELLUNG -------------------------------
   Links der Ist-Zustand, rechts was daraus wird, dazwischen der
   Pfeil. Auf schmalen Geraeten stapeln die Spalten und der Pfeil
   dreht sich mit, damit er weiter in die Leserichtung zeigt.   */
.vs{
  display:grid;gap:clamp(16px,2.2vw,26px);
  max-width:640px;margin-inline:auto;justify-items:stretch;
}
.vs__spalte{
  padding:clamp(22px,2.6vw,36px);
  border:1px solid var(--rule);
  display:flex;flex-direction:column;
}
.vs__spalte--ist{background:rgba(242,239,231,.035);}
.vs__spalte--soll{
  background:rgba(212,246,74,.07);
  border-color:rgba(212,246,74,.32);
}
.vs__kopf{margin-bottom:clamp(20px,2.6vw,30px);}
.vs__kopf h2{
  font-size:clamp(1.28rem,2.2vw,1.7rem);margin:8px 0 0;letter-spacing:-.02em;
}
.vs__spalte--ist .vs__kopf h2{color:var(--dim);}
.vs__liste{list-style:none;margin:0;padding:0;display:grid;gap:clamp(15px,1.9vw,21px);}
.vs__liste li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;}
.vs__zeichen{
  width:23px;height:23px;border-radius:50%;flex:none;margin-top:2px;
  display:grid;place-items:center;
}
.vs__spalte--ist .vs__zeichen{border:1px solid var(--rule);color:var(--dim);}
.vs__spalte--soll .vs__zeichen{background:var(--lime);color:var(--slate);}
.vs__liste b{
  font-family:var(--display);font-weight:700;font-size:1.01rem;
  line-height:1.32;display:block;letter-spacing:-.01em;
}
.vs__spalte--ist .vs__liste b{color:var(--dim);}
.vs__liste p{margin:6px 0 0;font-size:.89rem;line-height:1.55;color:var(--dim);}
.vs__pfeil{
  justify-self:center;
  width:56px;height:56px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  border:1.5px solid rgba(212,246,74,.42);color:var(--lime);
}
.follow__kopf{margin-top:var(--s4);}
.follow__row{
  list-style:none;margin:var(--s3) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,44px);
}
.follow__row a{
  display:flex;align-items:center;gap:13px;
  text-decoration:none;color:var(--fg);
}
.follow__row svg{width:27px;height:27px;flex:none;color:var(--accent);}
.follow__row b{
  font-family:var(--display);font-weight:800;font-size:1.04rem;
  letter-spacing:-.01em;line-height:1.15;display:block;
}
.follow__txt{display:block;}
.follow__txt span{
  display:block;margin-top:3px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.follow__row a:hover b,.follow__row a:focus-visible b{text-decoration:underline;}

.clients{padding-block:clamp(56px,7vw,96px);}
/* Marquee: slots are a fixed quarter of the strip, so exactly four logos are
   in view whatever their individual widths. cqw measures the strip itself,
   not the viewport — the px value is the fallback where cq units are missing. */
.mq{
  container-type:inline-size;
  overflow:hidden;margin-top:var(--s4);
  padding-top:var(--s4);border-top:1px solid var(--rule);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.mq__track{display:flex;list-style:none;margin:0;padding:0;width:max-content;}
.mq[data-ready] .mq__track{animation:logo-run 36s linear infinite;}
.mq__slot{
  flex:0 0 220px;flex-basis:25cqw;
  display:grid;place-items:center;padding-inline:clamp(8px,1.4vw,20px);
}
.clogo{
  height:calc(var(--h) * var(--logo-scale,1));
  width:auto;max-width:100%;display:block;
}
/* one full set of six is exactly half the doubled track */
@keyframes logo-run{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.mq[data-ready]{cursor:pointer;}
.mq[data-paused] .mq__track{animation-play-state:paused;}
.mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused;}

@media(max-width:900px){.mq{--logo-scale:.86;}}
@media(max-width:560px){.mq{--logo-scale:.56;}.mq__slot{padding-inline:6px;}}
@media (prefers-reduced-motion: reduce){
  .mq__track{animation:none;}
}

/* ---------- SPLIT ------------------------------------------- */
.split{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,5vw,72px);align-items:center;
}
@media(max-width:900px){.split{grid-template-columns:1fr;}}
.split--flip .split__media{order:2;}
@media(max-width:900px){.split--flip .split__media{order:0;}}
.stack{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;}

.shot{width:100%;height:auto;display:block;border:1px solid rgba(242,239,231,.13);}
.band--paper .shot{border-color:rgba(19,17,24,.14);}
.slot{
  aspect-ratio:4/3;position:relative;display:grid;place-items:center;
  background:
    radial-gradient(70% 60% at 30% 18%, rgba(139,68,224,.26), transparent 66%),
    linear-gradient(150deg,#211A32,#0D0A16);
  border:1px solid rgba(242,239,231,.13);
}
.slot > svg{width:66px;height:66px;color:rgba(242,239,231,.22);}
.slot b{
  position:absolute;left:0;bottom:0;
  font-family:var(--mono);font-weight:400;font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(242,239,231,.62);background:rgba(5,3,8,.74);padding:7px 12px;
}

/* ---------- SECTION HEAD ------------------------------------ */
.head{max-width:22ch;display:flex;flex-direction:column;gap:var(--s2);margin-bottom:clamp(34px,4.6vw,var(--s6));}
.head--wide{max-width:28ch;}
.head .lede{margin-top:var(--s1);}
.duo{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,5vw,var(--s6));align-items:start;
}
@media(max-width:900px){.duo{grid-template-columns:1fr;}}
.duo .head{margin-bottom:0;position:sticky;top:96px;}
@media(max-width:900px){.duo .head{position:static;}}

/* ---------- RUNNING LIST ------------------------------------ */
.runlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,var(--s6));}
@media(max-width:760px){.runlist{grid-template-columns:1fr;}}
.run{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 var(--s3);align-items:start;
  padding:var(--s3) 0;border-top:1px solid var(--rule);
}
.run__n{
  font-family:var(--display);font-weight:900;font-size:1.15rem;line-height:1.3;
  color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:0;
}
.run h3{margin-bottom:7px;}
.run p{color:var(--dim);font-size:.99rem;}

/* ---------- LIME BAND ITEMS --------------------------------- */
.gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3.4vw,var(--s5));}
@media(max-width:900px){.gains{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.gains{grid-template-columns:1fr;}}
.gain{padding:var(--s3) 0;border-top:2px solid var(--rule);}
.gain h3{margin-bottom:8px;}
.gain p{font-size:.99rem;color:var(--dim);}

/* ---------- SERVICES ---------------------------------------- */
.svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,var(--s5));}
@media(max-width:900px){.svcs{grid-template-columns:1fr;max-width:640px;}}
/* keine Bildkaesten: das Symbol steht frei unter derselben Linie, die
   auch die Ziele- und Ablauf-Abschnitte gliedert */
.svc{padding-top:var(--s3);border-top:2px solid var(--rule);}
.svc__icon{
  width:42px;height:42px;color:var(--accent);
  display:block;margin-bottom:var(--s3);
}
.svc h3{margin-bottom:10px;}
.svc p{color:var(--dim);font-size:.99rem;margin-bottom:var(--s2);}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.97rem;}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--fg);}
.ticks svg{width:16px;height:16px;flex:none;margin-top:5px;color:var(--accent);}

/* ---------- VIDEO FACADES ------------------------------------
   Project videos use a click facade: nothing is requested from YouTube
   until the visitor actually asks for the video, so no consent is
   needed to show the page — the current site's player is blocked by
   its own cookie banner, which this avoids.               */

/* click-to-load facade for the project videos */
.vfacade{
  display:block;position:relative;aspect-ratio:var(--vr,5/4);overflow:hidden;
  text-decoration:none;color:var(--bone);
  background:
    radial-gradient(70% 60% at 30% 18%, rgba(139,68,224,.26), transparent 66%),
    linear-gradient(150deg,#211A32,#0D0A16);
  border:1px solid rgba(242,239,231,.13);
}
/* vertical Short vs landscape film */
/* echtes Reel-Format; Breite gedeckelt, sonst wird die Kachel zu hoch */
.vfacade--short{--vr:9/16;max-width:300px;}
.vfacade--wide{--vr:16/9;}
.vfacade__poster{width:100%;height:100%;object-fit:cover;display:block;}
/* scrim: keeps the play control and label legible over a real photo */
.vfacade::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,3,8,.20) 0%,rgba(5,3,8,.05) 38%,rgba(5,3,8,.62) 100%);
}
.vfacade__play,.vfacade__label{z-index:2;}
/* once playing, the tile becomes the player: scrim and controls step aside */
.vfacade.is-playing{cursor:default;}
.vfacade.is-playing::after{display:none;}
.vfacade__frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;}
.vfacade__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;
  border:1.5px solid rgba(242,239,231,.6);
  background:rgba(5,3,8,.42);
  display:grid;place-items:center;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.vfacade__play svg{width:22px;height:22px;margin-left:3px;color:var(--bone);}
.vfacade:hover .vfacade__play,.vfacade:focus-visible .vfacade__play{
  background:var(--lime);border-color:var(--lime);transform:translate(-50%,-50%) scale(1.06);
}
.vfacade:hover .vfacade__play svg,.vfacade:focus-visible .vfacade__play svg{color:var(--slate);}
.vfacade:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.vfacade__label{
  position:absolute;left:0;bottom:0;
  font-family:var(--mono);font-weight:400;font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(242,239,231,.72);
  background:rgba(5,3,8,.74);padding:7px 12px;
}

/* ---------- FIGURES ----------------------------------------- */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;}
@media(max-width:820px){.figs{grid-template-columns:repeat(2,minmax(0,1fr));}}
.fig{padding:var(--s3) clamp(14px,2vw,var(--s3)) var(--s3) clamp(16px,2.2vw,var(--s3));border-left:1px solid var(--rule);}
.figs > .fig:first-child{border-left:none;padding-left:0;}
@media(max-width:820px){
  .figs > .fig:nth-child(3){border-left:none;padding-left:0;}
  .figs > .fig:nth-child(n+3){border-top:1px solid var(--rule);margin-top:var(--s2);padding-top:var(--s4);}
}
.fig b{
  display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(2.7rem,5.8vw,4.2rem);line-height:.92;letter-spacing:-.045em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.fig span{display:block;margin-top:12px;font-size:.97rem;color:var(--dim);max-width:22ch;}

/* ---------- PROJECTS ---------------------------------------- */
.proj{
  display:grid;grid-template-columns:auto minmax(0,.82fr) minmax(0,1.18fr);
  gap:var(--s3) clamp(22px,3.4vw,var(--s5));align-items:center;
  padding:var(--s5) 0;border-top:1px solid var(--rule);
}
.proj:last-of-type{border-bottom:1px solid var(--rule);}
@media(max-width:860px){
  .proj{grid-template-columns:1fr;}
  .proj__n{order:-1;}
}
.proj__n{
  font-family:var(--display);font-weight:900;font-size:1.15rem;line-height:1.3;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.proj .stack{gap:var(--s2);}
.proj__facts{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);
}
.proj__facts i{font-style:normal;color:var(--fg);}

/* ---------- PROCESS ----------------------------------------- */
.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,var(--s4));}
@media(max-width:900px){.phases{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.phases{grid-template-columns:1fr;}}
.phase{padding-top:var(--s3);border-top:2px solid var(--accent);}
.phase b{
  display:block;font-family:var(--mono);font-weight:500;font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:11px;
}
.phase h3{margin-bottom:9px;}
.phase p{color:var(--dim);font-size:.99rem;}
@media(max-width:900px){.phase{margin-bottom:var(--s4);}}

/* ---------- PLANS ------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:stretch;}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:520px;}}
.plan{
  padding:var(--s4) clamp(18px,2.4vw,var(--s4));
  border-left:1px solid var(--rule);
  display:flex;flex-direction:column;gap:var(--s2);
}
.plans > .plan:first-child{border-left:none;}
@media(max-width:900px){
  .plan{border-left:none;border-top:1px solid var(--rule);padding-inline:0;}
  .plans > .plan:first-child{border-top:none;}
}
.plan__price{font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:-.03em;color:var(--fg);}
.plan__price small{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-top:8px;
}
.plan p{color:var(--dim);font-size:.99rem;}
.plan .cta{margin-top:auto;padding-top:var(--s2);}
.plan .flag{
  font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);opacity:.6;
}
.plan--lead{
  background:var(--lime);color:var(--slate);
  border-left-color:transparent;position:relative;
  margin-block:calc(var(--s3) * -1);
  padding-block:calc(var(--s4) + var(--s3));
}
@media(max-width:900px){.plan--lead{margin-block:0;padding:var(--s4) var(--s3);}}
.plan--lead h3,.plan--lead .plan__price{color:var(--slate);}
.plan--lead p,.plan--lead .plan__price small{color:#3E4415;}
.plan--lead .ticks li,.plan--lead .ticks svg{color:var(--slate);}

/* ---------- ABOUT ------------------------------------------- */
.pull{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.16;letter-spacing:-.02em;
  padding-left:var(--s3);border-left:4px solid var(--lime);color:var(--fg);
}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chips span{
  font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--rule);padding:9px 16px;color:var(--fg);
}

/* ---------- QUOTES ------------------------------------------ */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3.6vw,var(--s5));}
@media(max-width:900px){.quotes{grid-template-columns:1fr;max-width:640px;}}
.q{margin:0;display:flex;flex-direction:column;gap:var(--s2);}
/* rating is a single svg, not five text characters: the star glyph is
   font-dependent and renders differently across platforms. role+aria-label
   carry the value for screen readers, since colour and shape alone do not. */
.q__stars{width:96px;height:16px;display:block;fill:var(--accent);flex:none;}
.q blockquote{margin:0;font-size:1.02rem;line-height:1.52;color:var(--fg);}
.q figcaption{
  margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--rule);
  font-family:var(--display);font-weight:800;font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg);
}
.q figcaption em{
  display:block;font-family:var(--body);font-style:normal;font-weight:400;
  font-size:.86rem;letter-spacing:0;text-transform:none;color:var(--dim);margin-top:5px;
}

/* ---------- FAQ --------------------------------------------- */
.faq{max-width:840px;}
.qa{border-bottom:1px solid var(--rule);}
.faq > .qa:first-child{border-top:1px solid var(--rule);}
.qa summary{
  list-style:none;cursor:pointer;padding:var(--s3) 0;
  display:flex;gap:var(--s3);align-items:center;justify-content:space-between;
  font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,1.6vw,1.28rem);
  letter-spacing:-.02em;line-height:1.22;color:var(--fg);
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.qa__sign{flex:none;width:26px;height:26px;position:relative;}
.qa__sign::before,.qa__sign::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--accent);
  transform:translate(-50%,-50%);
}
.qa__sign::before{width:16px;height:2px;}
.qa__sign::after{width:2px;height:16px;transition:transform .24s var(--ease);}
.qa[open] .qa__sign::after{transform:translate(-50%,-50%) scaleY(0);}
.qa__a{padding-bottom:var(--s3);color:var(--dim);max-width:60ch;}

/* ---------- CONTACT ----------------------------------------- */
.contact{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(30px,5vw,var(--s7));align-items:start;}
@media(max-width:860px){.contact{grid-template-columns:1fr;}}
.dial{display:flex;flex-direction:column;}
.dial a{
  display:flex;align-items:baseline;gap:var(--s2);
  padding:var(--s3) 0;text-decoration:none;color:var(--fg);
  border-bottom:1px solid var(--rule);transition:color .18s var(--ease);
}
.dial a:first-child{border-top:1px solid var(--rule);}
.dial a:hover{color:var(--accent);}
.dial i{
  font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);width:5.6em;flex:none;
}
.dial b{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;}
.socials{display:flex;gap:11px;margin-top:var(--s4);}
.socials a{
  width:50px;height:50px;border:1.5px solid var(--rule);
  display:grid;place-items:center;color:var(--fg);text-decoration:none;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.socials a:hover{border-color:var(--accent);color:var(--accent);}
.socials svg{width:20px;height:20px;}

/* ---------- ABSCHNITTS-CTA ----------------------------------
   Abschlusszeile statt Werbebanner: eine kurze Frage, die den
   gelesenen Abschnitt aufgreift, daneben der Knopf. Der Text wechselt
   pro Abschnitt — sechs identische Bloecke wuerden nach dem zweiten
   ueberlesen. */
.scta{
  margin-top:clamp(34px,4.5vw,var(--s5));
  padding-top:var(--s4);
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3);
}
.scta p{
  margin:0;max-width:28ch;
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.16;color:var(--fg);
}

/* ---------- KONTAKTFORMULAR ---------------------------------
   Sichtbare Labels statt Platzhaltertext, Fehler direkt am Feld und
   ueber aria-describedby verknuepft, Eingabehoehe >= 44px fuer
   Fingerbedienung. Ohne JavaScript sendet das Formular ganz normal
   per POST an kontakt.php. */
.contact__left{display:flex;flex-direction:column;gap:var(--s5);}
.formwrap{
  background:rgba(10,8,18,.5);border:1px solid var(--rule);
  padding:clamp(20px,3vw,32px);backdrop-filter:blur(8px);
}
.kform{display:flex;flex-direction:column;gap:var(--s3);}
.kform__intro{color:var(--dim);font-size:1rem;margin:0;}
.field{display:flex;flex-direction:column;gap:7px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
@media(max-width:560px){.field-row{grid-template-columns:1fr;}}
.field label{
  font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg);
}
.req{color:var(--lime);}
.field input,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--fg);
  background:rgba(5,3,8,.45);
  border:1px solid var(--rule);border-radius:0;
  padding:13px 14px;min-height:48px;width:100%;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.5;}
.field input:hover,.field textarea:hover{border-color:rgba(242,239,231,.34);}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--lime);background:rgba(5,3,8,.7);
}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:#FF8A7A;}
.field__err{margin:0;font-size:.9rem;color:#FF8A7A;}
.kform__hint{margin:0;font-size:.88rem;color:var(--dim);}
.kform__hint a{color:var(--lime);}
.kform__alert{
  margin:0;padding:14px 16px;font-size:.97rem;border:1px solid;
}
.kform__alert[data-kind="ok"]{border-color:var(--lime);background:rgba(216,240,75,.1);color:var(--fg);}
.kform__alert[data-kind="fehler"]{border-color:#FF8A7A;background:rgba(255,138,122,.1);color:var(--fg);}
.kform__alert:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}
.kform button[disabled]{opacity:.55;cursor:progress;}
/* Honigtopf gegen Spam: vom Bildschirm genommen, aber nicht display:none,
   sonst fuellen manche Bots ihn trotzdem und wir sperren echte Leute aus */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- COOKIE-/EINWILLIGUNGSBANNER ---------------------
   Steuert genau eine Sache: ob der YouTube-Player direkt auf der Seite
   laden darf. Ohne Zustimmung oeffnen die Videos in einem neuen Tab.
   Die Entscheidung liegt im lokalen Browserspeicher und ist ueber die
   Fusszeile jederzeit widerrufbar. */
/* ---------- INSTAGRAM-FEED ----------------------------------
   Gleiches Prinzip wie bei den Videos: vor der Freigabe geht keine
   einzige Anfrage an einen Dritten. Die Wand ist echter Inhalt,
   kein Ladebalken — Profilname und Link stehen auch ohne Feed.  */
.igwall{
  border:1px solid var(--rule);
  padding:clamp(20px,3.4vw,34px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3);
}
.igwall__who{max-width:46ch;}
.igwall__handle{
  display:flex;align-items:center;gap:10px;margin:0 0 8px;
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.4vw,1.5rem);
}
.igwall__note{margin:0;color:var(--dim);font-size:.95rem;line-height:1.6;}
.igwall__do{display:flex;flex-wrap:wrap;align-items:center;gap:18px;flex:none;}
.igwall__load{
  font-family:var(--body);font-size:.95rem;font-weight:600;
  padding:13px 22px;min-height:46px;border-radius:999px;cursor:pointer;
  background:var(--lime);border:1px solid var(--lime);color:var(--slate);
  -webkit-appearance:none;appearance:none;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.igwall__load:hover{background:#E4F96A;border-color:#E4F96A;}
.igwall__load:focus-visible{outline:2px solid var(--slate);outline-offset:3px;}
/* Die Hoehe setzt lightwidget.js selbst. Die Mindesthoehe ist nur
   ein Auffangnetz, falls das Skript einmal nicht durchkommt —
   niedrig genug, um ihm nie in die Quere zu kommen. */
.igframe{width:100%;border:0;display:block;min-height:200px;overflow:hidden;}
@media(max-width:640px){.igwall__do{width:100%;}}

/* ---------- EINWILLIGUNGS-EINSTELLUNGEN ----------------------
   Vier Kategorien, jede aufklappbar. Der Schalter sitzt in der
   Kopfzeile, die Kurzbeschreibung steht immer da — aufgeklappt
   wird nur, wer es genau wissen will.                        */
.einst__kennung{
  margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(242,239,231,.12);
  color:#8F87A6;font-size:.82rem;line-height:1.65;
}
.einst__kennung code{font-family:var(--mono);color:#A79FBC;word-break:break-all;}

.kat{border-bottom:1px solid rgba(242,239,231,.12);padding:18px 0;}
.kat:last-of-type{border-bottom:0;}
.kat__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.kat__auf{
  display:flex;align-items:center;gap:9px;
  background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;
  font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  color:var(--bone);-webkit-appearance:none;appearance:none;
}
.kat__auf svg{flex:none;transition:transform .2s var(--ease);}
.kat__auf[aria-expanded="true"] svg{transform:rotate(90deg);}
.kat__auf:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}
.kat__kurz{margin:9px 0 0;color:#A79FBC;font-size:.93rem;line-height:1.55;}
.kat__mehr{
  margin:12px 0 0;padding:12px 14px;color:#9990AE;font-size:.88rem;line-height:1.65;
  border-left:2px solid rgba(212,246,74,.4);background:rgba(242,239,231,.03);
}
.kat__immer{
  flex:none;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:#A79FBC;
  border:1px solid rgba(242,239,231,.22);border-radius:999px;padding:7px 13px;
}
/* Schalter */
.sw{flex:none;display:inline-flex;position:relative;cursor:pointer;}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.sw span{
  width:48px;height:28px;border-radius:999px;display:block;position:relative;
  background:rgba(242,239,231,.13);border:1px solid rgba(242,239,231,.28);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.sw span::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--bone);transition:transform .18s var(--ease),background .18s var(--ease);
}
.sw input:checked + span{background:var(--lime);border-color:var(--lime);}
.sw input:checked + span::after{transform:translateX(20px);background:var(--slate);}
.sw input:focus-visible + span{outline:2px solid var(--lime);outline-offset:3px;}
/* Fusszeile des Einstellungsdialogs */
.sheet__foot{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;
  padding:var(--s3) clamp(20px,4vw,40px);
  border-top:1px solid rgba(242,239,231,.14);
}
@media(max-width:560px){.sheet__foot .cb__btn{flex:1 1 100%;}}

.cb{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:rgba(10,8,18,.97);backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid rgba(242,239,231,.18);
  padding:var(--s3) clamp(20px,5vw,60px);
  transform:translateY(110%);transition:transform .34s var(--ease);
}
.cb[data-open]{transform:translateY(0);}
.cb__inner{
  max-width:var(--shell);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);
}
.cb__text{max-width:64ch;}
.cb__text h2{
  font-family:var(--display);font-weight:800;font-size:1rem;
  letter-spacing:.02em;color:var(--bone);margin:0 0 6px;
}
.cb__text p{margin:0;font-size:.93rem;line-height:1.55;color:#A79FBC;}
.cb__text a{color:var(--lime);}
.cb__btns{display:flex;flex-wrap:wrap;align-items:center;gap:18px;flex:none;}
.cb__mehr{color:var(--lime);font-size:.93rem;white-space:nowrap;}
.cb__btn{
  font-family:var(--body);font-size:.95rem;font-weight:600;
  padding:13px 22px;min-height:46px;border-radius:999px;cursor:pointer;
  background:none;border:1px solid rgba(242,239,231,.3);color:var(--bone);
  -webkit-appearance:none;appearance:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.cb__btn:hover{border-color:var(--bone);}
.cb__btn--yes{background:var(--lime);border-color:var(--lime);color:var(--slate);}
.cb__btn--yes:hover{background:#E4F96A;border-color:#E4F96A;}
.cb__btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}

/* ---------- FOOTER ------------------------------------------ */
.foot{padding-block:var(--s4);border-top:1px solid rgba(242,239,231,.12);}
.foot__row{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:#8C84A3;
}
.foot__row nav{display:flex;flex-wrap:wrap;gap:var(--s3);}
.foot__row a,.foot__link{text-decoration:none;color:#8C84A3;transition:color .16s var(--ease);}
.foot__link{background:none;border:0;padding:0;font:inherit;cursor:pointer;}
.foot__row a:hover,.foot__link:hover{color:var(--lime);}

/* ---------- LEGAL SHEETS ------------------------------------
   Native <dialog>: focus is trapped and Esc closes it without any
   JavaScript of ours, which is the accessible default. */
.sheet{
  width:min(760px,calc(100vw - 32px));
  max-height:min(84dvh,900px);
  padding:0;border:1px solid rgba(242,239,231,.16);
  background:var(--ink);color:var(--bone);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
}
.sheet::backdrop{background:rgba(5,3,8,.74);backdrop-filter:blur(4px);}
.sheet__bar{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) clamp(20px,4vw,40px);
  background:rgba(10,8,18,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(242,239,231,.14);
}
.sheet__bar h2{font-size:clamp(1.3rem,2.4vw,1.9rem);}
.sheet__close{
  flex:none;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(242,239,231,.22);background:none;color:var(--bone);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.sheet__close:hover{border-color:var(--lime);color:var(--lime);}
.sheet__close:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}
.sheet__body{padding:var(--s4) clamp(20px,4vw,40px) var(--s5);overflow-y:auto;}
.sheet__body h3{
  font-size:1.1rem;margin:var(--s4) 0 var(--s1);color:var(--bone);
}
.sheet__body h3:first-child{margin-top:0;}
.sheet__body p,.sheet__body li{color:#A79FBC;font-size:1rem;}
.sheet__body p{margin-bottom:var(--s2);max-width:66ch;}
.sheet__body ul{margin:0 0 var(--s2);padding-left:1.2em;}
.sheet__body li{margin-bottom:6px;}
.sheet__body a{color:var(--lime);}
.sheet__body dl{margin:0 0 var(--s3);}
.sheet__body dt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8C84A3;margin-top:var(--s2);
}
.sheet__body dd{margin:4px 0 0;color:var(--bone);}
/* anything the owner still has to supply, impossible to miss */
.todo{
  background:var(--lime);color:var(--slate);
  font-weight:600;padding:1px 7px;border-radius:3px;
  font-family:var(--body);font-size:.94rem;
}
.sheet__note{
  border-left:3px solid var(--lime);padding:var(--s2) var(--s3);
  background:rgba(216,240,75,.07);margin-bottom:var(--s4);
}
.sheet__note p{color:var(--bone);margin:0;font-size:.97rem;}

/* ---------- MOTION / A11Y ----------------------------------- */
/* Progressive enhancement: content is visible by default. Only once the
   inline script has confirmed JS is running do we hide it for the reveal,
   so the page is never blank if the script fails to run. */
@keyframes steigen{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
[data-rise].is-in{animation:steigen .5s var(--ease) backwards;}

.skip{
  position:fixed;left:-9999px;top:0;z-index:200;
  background:var(--lime);color:var(--slate);padding:12px 20px;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-rise].is-in{animation:none;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}

/* =====================================================================
   UNTERSEITEN
   Alles hier baut auf den Band-Farben der Startseite auf (--fg, --dim,
   --rule, --accent). Keine neuen Farben, keine neuen Schriften.
   ===================================================================== */

/* ---------- Navigation: aktuelle Seite markieren ---------------------- */
.mainnav a[aria-current="page"]{color:var(--bone);}
.mainnav a[aria-current="page"]::after{transform:scaleX(1);}

/* ---------- Seitenkopf ----------------------------------------------- */
/* Kompakter als der Hero der Startseite: Unterseiten sollen sofort
   zur Sache kommen, nicht einen Bildschirm lang Anlauf nehmen.      */
.seitenkopf{padding-block:calc(var(--topbar-h) + clamp(34px,5vw,64px)) clamp(48px,6.5vw,88px);}
.seitenkopf__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);}
.seitenkopf h1{font-size:clamp(2.2rem,5vw,3.9rem);max-width:22ch;}
.seitenkopf .lede{margin:0;max-width:56ch;}
.seitenkopf__raster{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(28px,4.5vw,72px);align-items:center;
}
.seitenkopf__bild img{width:100%;height:auto;display:block;border:1px solid var(--rule);}
.seitenkopf--404{min-height:62vh;display:flex;align-items:center;}
@media(max-width:860px){
  .seitenkopf__raster{grid-template-columns:1fr;}
  .seitenkopf__bild{max-width:380px;}
}

/* ---------- Brotkrumen ----------------------------------------------- */
.krumen ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;row-gap:4px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);
}
.krumen li + li::before{content:"/";margin:0 10px;opacity:.55;}
.krumen a{color:var(--dim);text-decoration:none;transition:color .16s var(--ease);}
.krumen a:hover,.krumen a:focus-visible{color:var(--accent);}
.krumen [aria-current]{color:var(--fg);}

/* ---------- Dispo-Zeile ---------------------------------------------- */
/* Eckdaten wie auf einem Drehplan: Format, Laenge, Drehtage.        */
.dispo{
  display:flex;flex-wrap:wrap;margin:var(--s1) 0 0;padding:0;width:100%;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.dispo div{
  padding:14px clamp(16px,2.4vw,30px) 14px 0;margin-right:clamp(16px,2.4vw,30px);
  border-right:1px solid var(--rule);
}
.dispo div:last-child{border-right:0;margin-right:0;padding-right:0;}
.dispo dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:5px;
}
.dispo dd{
  margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(.98rem,1.35vw,1.12rem);color:var(--fg);
}
@media(max-width:620px){
  .dispo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .dispo div{border-right:0;margin-right:0;padding-right:var(--s2);}
  .dispo div:nth-child(n+3){border-top:1px solid var(--rule);}
}

/* ---------- Fliesstext (Ratgeber, Rechtliches) ------------------------ */
.prosa{max-width:70ch;}
.prosa > :first-child{margin-top:0;}
.prosa h2{
  font-size:clamp(1.45rem,2.6vw,2rem);margin:clamp(44px,5.5vw,68px) 0 var(--s2);
  scroll-margin-top:calc(var(--topbar-h) + 24px);
}
.prosa h3{margin:var(--s4) 0 var(--s1);}
.prosa p,.prosa li{font-size:1.04rem;line-height:1.72;color:var(--dim);}
.prosa p{margin:0 0 var(--s2);}
.prosa ul,.prosa ol{margin:0 0 var(--s3);padding-left:1.25em;}
.prosa li{margin-bottom:6px;}
.prosa strong,.prosa em{color:var(--fg);}
.prosa a{color:var(--accent);text-underline-offset:3px;}
.prosa dl{margin:0 0 var(--s3);}
.prosa dt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-top:var(--s2);
}
.prosa dd{margin:4px 0 0;color:var(--fg);line-height:1.6;}
/* Die Antwort in einem Satz — zuerst, damit man nicht suchen muss */
.prosa .kurz{font-size:1.16rem;line-height:1.6;color:var(--fg);}
.prosa .ticks{padding-left:0;margin:0 0 var(--s3);gap:10px;}
.prosa .ticks li{margin:0;color:var(--fg);font-size:1rem;line-height:1.55;}
.prosa .phases{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:var(--s3) 0 var(--s4);}
.prosa .phase p{font-size:.97rem;}
.prosa--recht h2{font-size:clamp(1.12rem,1.7vw,1.35rem);margin-top:var(--s5);}
@media(max-width:560px){.prosa .phases{grid-template-columns:1fr;}}

/* ---------- Ratgeber: Inhaltsverzeichnis neben dem Text --------------- */
.artikel{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(28px,5vw,88px);align-items:start;
}
.inhalt{position:sticky;top:calc(var(--topbar-h) + 28px);}
.inhalt p{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:0 0 var(--s2);
}
.inhalt ol{list-style:none;margin:0;padding:0;counter-reset:abschnitt;border-left:1px solid var(--rule);}
.inhalt li{counter-increment:abschnitt;}
.inhalt a{
  display:grid;grid-template-columns:2.3em minmax(0,1fr);padding:7px 0 7px 14px;
  font-size:.9rem;line-height:1.38;color:var(--fg);text-decoration:none;
  transition:color .16s var(--ease);
}
.inhalt a::before{
  content:counter(abschnitt,decimal-leading-zero);
  font-family:var(--mono);font-size:.68rem;color:var(--accent);padding-top:2px;
}
.inhalt a:hover,.inhalt a:focus-visible{color:var(--accent);}
@media(max-width:900px){
  .artikel{grid-template-columns:1fr;}
  .inhalt{position:static;}
}

/* ---------- Vergleichstabelle ---------------------------------------- */
.tabelle{overflow-x:auto;margin:var(--s2) 0 var(--s4);}
.vergleich{width:100%;min-width:520px;border-collapse:collapse;font-size:.95rem;}
.vergleich th,.vergleich td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);}
.vergleich thead th{
  font-family:var(--mono);font-weight:500;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);
}
.vergleich tbody th{font-weight:600;color:var(--fg);}
.vergleich td{color:var(--dim);}
.vergleich .hier{color:var(--fg);font-weight:600;}

/* ---------- Varianten vorhandener Bausteine --------------------------- */
.gains--2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:620px){.gains--2{grid-template-columns:1fr;}}
.proj--solo{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);}
@media(max-width:860px){.proj--solo{grid-template-columns:1fr;}}
.svc .tlink{margin-top:var(--s2);}
.mehr{margin:var(--s4) 0 0;}
.einzelstimme{max-width:46rem;margin-top:var(--s5);}
.split .ticks{margin-top:var(--s1);}
.split__media .shot{max-height:640px;width:auto;max-width:100%;margin-inline:auto;}

/* ---------- Region: Orte und Karte ------------------------------------ */
.region{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,80px);align-items:start;
}
.orte{list-style:none;margin:0;padding:0;}
.orte li{
  display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);
  gap:8px var(--s3);padding:var(--s3) 0;border-top:1px solid var(--rule);
}
.orte li:last-child{border-bottom:1px solid var(--rule);}
.orte h3{font-size:clamp(1.05rem,1.6vw,1.26rem);}
.orte p{margin:0;color:var(--dim);}
.orte .bezug{
  display:block;margin-top:8px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);line-height:1.5;
}
.karte{margin:0;position:sticky;top:calc(var(--topbar-h) + 28px);}
.karte svg{width:100%;height:auto;display:block;}
.karte .linie{stroke:var(--rule);stroke-width:1;fill:none;}
.karte .punkt{fill:var(--fg);}
.karte .ref{fill:none;stroke:var(--fg);stroke-width:1.5;}
.karte .sitz{fill:var(--lime);stroke:var(--fg);stroke-width:2;}
.karte text{font-family:var(--mono);font-size:12px;letter-spacing:.04em;fill:var(--fg);}
.karte .gross{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:0;}
.karte .klein{fill:var(--dim);font-size:10.5px;}
.karte .mass{stroke:var(--fg);stroke-width:1.5;}
.karte figcaption{
  margin-top:var(--s2);font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);
}
@media(max-width:900px){
  .region{grid-template-columns:1fr;}
  .karte{position:static;max-width:460px;}
}
@media(max-width:560px){.orte li{grid-template-columns:1fr;}}

/* ---------- 404 ------------------------------------------------------- */
.sprung{list-style:none;margin:var(--s1) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.sprung a{
  display:inline-block;padding:11px 18px;border:1px solid var(--rule);
  color:var(--fg);text-decoration:none;font-weight:600;font-size:.95rem;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.sprung a:hover,.sprung a:focus-visible{border-color:var(--accent);color:var(--accent);}

/* ---------- Fusszeile ------------------------------------------------- */
.foot{padding-block:0 var(--s3);}
.fuss{
  display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));
  gap:var(--s4) clamp(20px,3vw,48px);
  padding-block:clamp(44px,5.5vw,72px) var(--s5);
}
.fuss__logo{height:60px;width:auto;display:block;margin-bottom:var(--s2);}
.fuss__marke p{
  margin:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8C84A3;
}
.fuss__titel{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8C84A3;margin:0 0 var(--s2);
}
.fuss__spalte ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.fuss__spalte a{color:var(--bone);text-decoration:none;font-size:.95rem;transition:color .16s var(--ease);}
.fuss__spalte a:hover,.fuss__spalte a:focus-visible{color:var(--lime);}
.fuss__spalte address{font-style:normal;color:#A79FBC;font-size:.95rem;line-height:1.75;}
.fuss + .foot__row{border-top:1px solid rgba(242,239,231,.12);padding-top:var(--s3);}
@media(max-width:900px){.fuss{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.fuss{grid-template-columns:1fr;}}

/* ---------- Knoepfe auf dem Limetten-Band ------------------------------ */
/* Ein limetter Knopf auf limettem Grund ist unsichtbar. Auf diesem Band
   bekommen alle gefuellten Knoepfe automatisch die dunkle Fassung.     */
.band--lime .cta:not(.cta--line) .cta__pill{background:var(--slate);color:var(--lime);}
.band--lime .cta:not(.cta--line):hover .cta__pill{background:#25212F;}
.band--lime .cta:not(.cta--line) .cta__disc{border-color:var(--slate);color:var(--slate);}
.band--lime .cta:not(.cta--line):hover .cta__disc{background:var(--slate);color:var(--lime);}

/* Knopf unter den Profil-Verweisen braucht Luft */
.follow__row + .cta{margin-top:var(--s4);}