/* ============================================================
   4FALT.media — Stylesheet
   Tokens · Base · Navigation · Hero · Sections · Team · Kontakt
   ============================================================ */

/* ---------- Brand tokens ---------- */
:root{
  /* the four pinwheel colours */
  --turquoise:#2FB7B0;
  --yellow:#F4C430;
  --purple:#8E6CCB;
  --red:#E4574E;
  /* deeper shades pulled from the logo */
  --turquoise-d:#1F807A;
  --yellow-d:#C8961A;
  --purple-d:#3E2F63;
  --red-d:#A8392F;

  /* neutrals — warm */
  --ink:#1b1a18;
  --ink-soft:#3a3733;
  --muted:#736c62;
  --line:#e4ddd1;
  --paper:#f8f5ef;
  --paper-2:#f0eadf;
  --white:#ffffff;

  /* themeable surface tokens (overridden per look) */
  --bg:var(--paper);
  --bg-alt:var(--paper-2);
  --fg:var(--ink);
  --fg-soft:var(--ink-soft);
  --fg-muted:var(--muted);
  --hairline:var(--line);
  --card:var(--white);
  --card-line:var(--line);

  /* user-tweakable */
  --accent:var(--purple);
  --accent-fg:#ffffff;
  --radius:18px;
  --font-display:"Poppins", system-ui, sans-serif;
  --font-body:-apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw:1200px;
  --gutter:clamp(20px, 5vw, 64px);
  --shadow:0 18px 50px -28px rgba(27,26,24,.45);
}

/* ---------- LOOK B — dunkel / editorial ---------- */
[data-look="b"]{
  --bg:#16140f;
  --bg-alt:#1e1b15;
  --fg:#f6f1e7;
  --fg-soft:#d8d0c2;
  --fg-muted:#9b9384;
  --hairline:#322d24;
  --card:#211d16;
  --card-line:#332e24;
  --shadow:0 24px 60px -30px rgba(0,0,0,.7);
}

/* ---------- LOOK C — reduziert / hell ---------- */
[data-look="c"]{
  --bg:#fcfbf9;
  --bg-alt:#f5f2ec;
  --fg:#191815;
  --fg-soft:#403c36;
  --fg-muted:#807a70;
  --hairline:#ece6db;
  --card:#ffffff;
  --card-line:#eee8dd;
  --radius:8px;
  --shadow:0 14px 40px -30px rgba(0,0,0,.35);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:clip;}
a,button,.btn,.lang button,.nav__burger,input,textarea,select{-webkit-tap-highlight-color:rgba(0,0,0,0);}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .4s ease, color .4s ease;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.04;margin:0;letter-spacing:-.02em;color:var(--fg);}
p{margin:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* section rhythm */
section{padding-block:clamp(100px, 16vh, 200px);}
.eyebrow{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:.6em;
  margin:0 0 18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;display:inline-block;}
.eyebrow::after{content:"";width:26px;height:2px;background:currentColor;display:inline-block;}

/* zentrierte Abschnitts-Überschrift */
.shead{max-width:760px;margin:0 auto clamp(46px,7vh,78px);text-align:center;}
.shead .eyebrow{justify-content:center;}
.shead h2{font-size:clamp(2.1rem,4.4vw,3.4rem);}
.shead__sub{color:var(--fg-soft);margin-top:16px;font-size:1.12rem;}
/* Label „Kernkompetenzen" nicht mehr fett */
#kompetenzen .eyebrow{font-weight:400;}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px var(--gutter);
  background:color-mix(in srgb, #ffffff 92%, transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, padding .3s ease, background .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
  will-change:transform;
  transform:translateZ(0);
}
.nav.hide{transform:translateY(-100%);}
.nav.scrolled{border-bottom-color:var(--hairline);padding-block:10px;background:color-mix(in srgb, #ffffff 98%, transparent);}
.nav__brand{display:flex;align-items:center;gap:14px;min-width:0;font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.01em;}
.nav__brand img{height:40px;width:auto;transition:transform .3s ease;}
.nav__brand:hover img{transform:scale(1.06);}
.nav__brand .brandmark{
  font-size:1.62rem;font-weight:700;letter-spacing:-.01em;color:var(--purple);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav__brand b{font-weight:700;}
.nav__brand span{color:var(--accent);}
.nav__links{display:flex;align-items:center;gap:30px;}
.nav__links a{font-size:.95rem;font-weight:500;color:var(--fg-soft);position:relative;padding:4px 0;transition:color .2s;}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--accent);transition:width .25s ease;}
.nav__links a:hover{color:var(--fg);}
.nav__links a:hover::after{width:100%;}
.nav__right{display:flex;align-items:center;gap:18px;flex:0 0 auto;}
.nav__links .nav__links-cta{display:none;}
.lang{display:inline-flex;border:1px solid color-mix(in srgb,var(--ink) 22%, transparent);border-radius:999px;overflow:hidden;flex:0 0 auto;}
.lang button{background:none;border:0;padding:8px 14px;min-height:40px;font-size:.8rem;font-weight:600;color:var(--fg-muted);letter-spacing:.04em;cursor:pointer;touch-action:manipulation;transition:.2s;}
.lang button[aria-pressed="true"]{background:#5e564c;color:#fff;}
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--accent);color:var(--accent-fg);
  border:0;border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  padding:13px 26px;
  transition:transform .18s ease, box-shadow .25s ease, filter .2s;
  box-shadow:0 12px 26px -10px color-mix(in srgb, var(--accent) 88%, transparent), 0 2px 7px rgba(0,0,0,.24);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04);}
.btn--ghost{background:transparent;color:var(--fg);border:1.5px solid var(--fg);box-shadow:none;}
.btn--ghost:hover{background:var(--fg);color:var(--bg);}
.nav__burger{display:none;background:none;border:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;min-width:46px;min-height:46px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.nav__burger span{width:24px;height:2px;background:var(--fg);display:block;border-radius:2px;transform-origin:center;transition:transform .3s ease, opacity .2s ease;}
.nav.open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.open .nav__burger span:nth-child(2){opacity:0;}
.nav.open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- dynamische Scroll-Elemente ---- */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;transform:scaleX(0);transform-origin:left;will-change:transform;
  background:linear-gradient(90deg,var(--turquoise),var(--yellow) 40%,var(--purple) 70%,var(--red));}
.totop{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:55;
  width:50px;height:50px;border-radius:50%;background:var(--accent);color:var(--accent-fg);border:0;
  display:grid;place-items:center;box-shadow:0 14px 32px -12px color-mix(in srgb,var(--accent) 70%, transparent);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility .3s;}
.totop.show{opacity:1;visibility:visible;transform:none;}
.totop:hover{filter:brightness(1.05);transform:translateY(-2px);}
.totop svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.2;fill:none;}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(120px,14vh,180px);padding-bottom:clamp(80px,12vh,150px);
  background:var(--hero-bg);color:var(--hero-fg);transition:background .4s ease,color .4s ease;}
[data-look="a"]{--hero-bg:color-mix(in srgb,var(--purple) 24%, var(--paper));--hero-fg:var(--ink);}
[data-look="a"] .hero{background:
  radial-gradient(130% 92% at 50% 6%, color-mix(in srgb,var(--purple) 46%, transparent), transparent 62%),
  linear-gradient(180deg, color-mix(in srgb,var(--purple) 30%, var(--paper)) 0%, var(--paper) 90%);}
[data-look="b"]{--hero-bg:#211a3a;--hero-fg:#f6f1e7;}
[data-look="c"]{--hero-bg:var(--paper);--hero-fg:var(--ink);}
.hero > .wrap{position:relative;z-index:2;}
.hero h1{color:var(--hero-fg);}
.hero__lead{color:var(--hero-fg);opacity:.93;}
.hero__kicker{color:var(--hero-fg);opacity:.8;}
[data-look="c"] .hero__kicker{color:var(--fg-muted);opacity:1;}
[data-look="b"] .hero .btn:not(.btn--ghost){background:#fff;color:var(--purple);box-shadow:0 14px 30px -16px rgba(0,0,0,.55);}
[data-look="b"] .hero .btn--ghost{border-color:rgba(255,255,255,.7);color:#fff;}
[data-look="b"] .hero .btn--ghost:hover{background:#fff;color:var(--purple);border-color:#fff;}

/* kräftige farbige Abschnitts-Tönungen (Look "hell") */
[data-look="a"] .about{background:color-mix(in srgb,var(--turquoise) 62%, var(--paper));}
[data-look="a"] .team{background:color-mix(in srgb,var(--yellow) 58%, var(--paper));}
[data-look="a"] #kontakt{background:color-mix(in srgb,var(--red) 60%, var(--paper));}
.hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center;}
.hero__kicker{
  font-family:var(--font-display);font-weight:600;font-size:.85rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted);
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
}
.hero__kicker .dots{display:inline-flex;gap:5px;}
.hero__kicker{justify-content:center;}
.hero__kicker .dots i{width:9px;height:9px;border-radius:2px;display:block;
  transform:rotate(45deg);transform-origin:center;
  animation:dotWave 2.4s cubic-bezier(.45,0,.25,1) infinite;
  box-shadow:0 0 0 0 transparent;}
.hero__kicker .dots i:nth-child(1){background:var(--turquoise);animation-delay:0s;}
.hero__kicker .dots i:nth-child(2){background:var(--purple);animation-delay:.18s;}
.hero__kicker .dots i:nth-child(3){background:var(--red);animation-delay:.36s;}
.hero__kicker .dots i:nth-child(4){background:var(--yellow);animation-delay:.54s;}
@keyframes dotWave{
  0%,55%,100%{transform:translateY(0) rotate(45deg) scale(1);}
  18%{transform:translateY(-7px) rotate(225deg) scale(1.35);}
  36%{transform:translateY(0) rotate(405deg) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .hero__kicker .dots i{animation:none;}
}
.hero h1{
  font-size:clamp(2rem,4vw,3.2rem);
  letter-spacing:-.03em;
}
.hero h1 span{display:block;}
.hero h1 .accentword{
  position:relative;white-space:nowrap;
  background:none;color:#fff;-webkit-text-fill-color:#fff;
}
.hero__lead{
  font-size:1.15rem;
  color:var(--fg-soft);max-width:42ch;margin:14px auto 22px;
}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;}
.hero__meta{display:flex;gap:30px;margin-top:48px;flex-wrap:wrap;}
.hero__meta div{display:flex;flex-direction:column;}
.hero__meta b{font-family:var(--font-display);font-size:1.9rem;font-weight:700;line-height:1;}
.hero__meta small{color:var(--fg-muted);font-size:.85rem;margin-top:6px;letter-spacing:.02em;}

/* logo art (statisch, groß, zentriert) */
.hero__art{position:relative;display:grid;place-items:center;margin-bottom:30px;}
.pinwheel{width:clamp(190px,25vw,290px);filter:drop-shadow(0 24px 48px rgba(27,26,24,.2));}
.hero__art .halo{
  position:absolute;inset:0;margin:auto;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 26%, transparent), transparent 68%);
  filter:blur(8px);z-index:-1;
}

/* colour bar strip */
/* eleganter 4-Farben-Balken */
.spectrum{display:flex;height:7px;width:min(360px,72%);border-radius:999px;overflow:hidden;margin-top:54px;box-shadow:0 0 0 1px color-mix(in srgb,var(--hero-fg) 42%, transparent);}
.spectrum i{flex:1;display:block;}
.spectrum i+i{box-shadow:inset 1.5px 0 0 color-mix(in srgb,var(--hero-fg) 55%, transparent);}
.spectrum i:nth-child(1){background:var(--turquoise);}
.spectrum i:nth-child(2){background:var(--yellow);}
.spectrum i:nth-child(3){background:var(--purple);}
.spectrum i:nth-child(4){background:var(--red);}

/* moderner Abschnitts-Trenner: vier Marken-Rauten auf einer feinen Linie */
.divider{position:relative;display:flex;justify-content:center;align-items:center;gap:12px;
  height:auto;padding-block:clamp(14px,3vh,30px);background:var(--bg);transform:none;}
.divider::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(540px,64%);height:1px;
  background:linear-gradient(90deg,transparent,var(--hairline) 22%,var(--hairline) 78%,transparent);}
.divider i{display:block;width:9px;height:9px;border-radius:2px;position:relative;z-index:1;
  transform:rotate(45deg);opacity:1;box-shadow:0 0 0 7px var(--bg);}
.divider i:nth-child(1){background:var(--turquoise);}
.divider i:nth-child(2){background:var(--purple);}
.divider i:nth-child(3){background:var(--red);}
.divider i:nth-child(4){background:var(--yellow);}
/* mit aktivem JS: erst versteckt, beim Reinscrollen per Keyframe-Animation einblenden.
   Eine Animation spielt zuverlässig ab, sobald die Klasse „in“ gesetzt wird —
   unabhängig davon, ob der versteckte Zustand vorher schon gezeichnet wurde (das ist
   beim ersten Trenner direkt unter dem Hero der Fall). Ruhezustand ist sichtbar
   (opacity:1), daher bleibt nie etwas unsichtbar hängen; „backwards“ zeigt während der
   gestaffelten Verzögerung den Startzustand. Ohne JS sind die Rauten ohnehin sichtbar. */
.anim .divider i{opacity:0;transform:rotate(45deg) scale(.3);}
.anim .divider.in i{opacity:1;transform:rotate(45deg) scale(1);
  animation:diamondIn .7s cubic-bezier(.22,1,.36,1) backwards;}
.anim .divider.in i:nth-child(2){animation-delay:.12s;}
.anim .divider.in i:nth-child(3){animation-delay:.24s;}
.anim .divider.in i:nth-child(4){animation-delay:.36s;}
@keyframes diamondIn{from{opacity:0;transform:rotate(45deg) scale(.3);}to{opacity:1;transform:rotate(45deg) scale(1);}}
@media (prefers-reduced-motion:reduce){.anim .divider i,.divider i{opacity:1!important;transform:rotate(45deg);animation:none;}}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--bg-alt);transition:background .4s ease;}
.about__inner{max-width:780px;margin:0 auto;text-align:center;}
.about__lead{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:28px;}
.about__body{color:var(--fg-soft);font-size:1.1rem;max-width:64ch;margin:0 auto;}
.about__body p+p{margin-top:1.1em;}
.values{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px;justify-content:center;}
.values span{
  border:1px solid var(--card-line);background:var(--card);
  border-radius:999px;padding:8px 16px;font-size:.9rem;font-weight:500;color:var(--fg-soft);
  display:inline-flex;align-items:center;gap:8px;
}
.values span::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--accent);}
.values span:nth-child(4n+1)::before{background:var(--turquoise);}
.values span:nth-child(4n+2)::before{background:var(--yellow);}
.values span:nth-child(4n+3)::before{background:var(--purple);}
.values span:nth-child(4n+4)::before{background:var(--red);}

/* ============================================================
   KOMPETENZEN
   ============================================================ */
.komp__head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:50px;}
.komp__head h2{font-size:clamp(2rem,4vw,3.2rem);}
.komp__head p:not(.eyebrow){color:var(--fg-soft);max-width:42ch;}
#kompetenzen{background:var(--bg);}
.komp__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.kard{
  position:relative;background:var(--kc);
  border:0;
  border-radius:var(--radius);padding:36px 28px 40px;overflow:hidden;color:#fff;
  display:flex;flex-direction:column;align-items:center;text-align:center;min-height:300px;
  box-shadow:0 16px 40px -28px rgba(27,26,24,.55);
}
/* gefaltete Ecke — das "Falt"-Motiv */
.kard::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 44px 44px 0;border-color:transparent color-mix(in srgb,var(--kc) 58%, #000) transparent transparent;}
.kard::before{content:"";position:absolute;top:0;right:0;width:44px;height:44px;clip-path:polygon(100% 0,100% 100%,0 0);background:linear-gradient(225deg,rgba(0,0,0,.22),transparent 65%);z-index:1;}
.kard__icon{
  width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  background:rgba(255,255,255,.22);color:#fff;margin:0 auto 22px;backdrop-filter:blur(2px);
}
.kard__icon svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.8;fill:none;}
.kard h3{font-size:1.32rem;margin-top:14px;color:#fff;}
.kard p{color:rgba(255,255,255,.92);font-size:.97rem;margin-top:10px;}
.kard:nth-child(1){--kc:var(--turquoise);}
.kard:nth-child(2){--kc:var(--yellow);color:var(--ink);background:var(--yellow);}
.kard:nth-child(2) h3{color:var(--ink);}
.kard:nth-child(2) p{color:rgba(27,26,24,.82);}
.kard:nth-child(2) .kard__icon{background:rgba(0,0,0,.12);color:var(--ink);}
.kard:nth-child(3){--kc:var(--purple);}
.kard:nth-child(4){--kc:var(--red);}

/* ============================================================
   TEAM
   ============================================================ */
.team{background:var(--bg-alt);transition:background .4s ease;}
.team__head{max-width:54ch;margin-bottom:54px;}
.team__head h2{font-size:clamp(2rem,4vw,3.2rem);}
.team__head p:not(.eyebrow){color:var(--fg-soft);margin-top:18px;}
.team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.person{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--card-line);}
.person__ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg-alt);}
.person__ph img.person__base{width:100%;height:100%;object-fit:cover;object-position:50% var(--imgPosY,0%);filter:grayscale(.15);
  transform-origin:center top;transform:scale(calc(var(--imgScale,1) * var(--imgHover,1))) translate(var(--imgX,0),var(--imgY,0));
  transition:transform .6s cubic-bezier(.22,1,.36,1), filter .4s, opacity .5s ease;}
.person:hover .person__ph img.person__base{--imgHover:1.04;filter:grayscale(0);}
/* Verspieltes Hover-Bild (Hula-Hoop): liegt über dem Porträt, blendet beim Hovern ein */
.person__ph img.person__hov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--hovPosY,30%);
  opacity:0;z-index:2;transition:opacity .5s ease;pointer-events:none;}
.person:hover .person__ph img.person__hov{opacity:1;}
/* Gesichter auf gleicher Höhe: pro Person Zoom (Kopfgröße) + vertikaler Versatz (Augenlinie) — als Variablen am <article> gesetzt */
.person__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, color-mix(in srgb,var(--pc) 78%, transparent), transparent 52%);opacity:0;transition:opacity .4s;mix-blend-mode:multiply;}
.person:hover .person__ph::after{opacity:.9;}
.person__bar{height:6px;background:var(--pc);}
.person__info{padding:20px 22px 26px;text-align:center;}
.person__info h3{font-size:1.22rem;min-height:2.6em;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.12;}
.person__name .fn{display:block;font-weight:700;}
.person__name .ln{display:block;font-weight:700;}
.person__role{min-height:1.4em;}
.person__info h3{font-size:1.22rem;}
.person__role{color:var(--pc);font-weight:600;font-size:.92rem;margin-top:6px;font-family:var(--font-display);}
.person:nth-child(4) .person__role{color:#E0A100;}
.person__bio{color:var(--fg-muted);font-size:.92rem;margin-top:12px;line-height:1.5;}
.person:nth-child(1){--pc:var(--turquoise);}
.person:nth-child(2){--pc:var(--yellow-d);}
.person:nth-child(3){--pc:var(--purple);}
.person:nth-child(4){--pc:var(--red);}

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,6vw,80px);align-items:start;}
.kontakt__intro h2{font-size:clamp(2rem,4vw,3.1rem);margin:4px 0 14px;}
.kontakt__intro p{color:var(--fg-soft);font-size:1.15rem;max-width:36ch;}
.kontakt__detail{margin-top:32px;display:flex;flex-direction:column;gap:16px;}
.kontakt__detail a,.kontakt__detail span{display:flex;align-items:center;gap:14px;color:var(--fg-soft);font-size:1rem;}
.kontakt__detail .ic{width:40px;height:40px;border-radius:12px;background:var(--card);border:1px solid var(--card-line);display:grid;place-items:center;color:var(--red);flex:none;}
.kontakt__detail .ic svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;}

form.kontakt__form{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);padding:clamp(26px,4vw,42px);box-shadow:var(--shadow);}
form.kontakt__form button[type="submit"]{background:var(--red);box-shadow:0 10px 24px -12px color-mix(in srgb, var(--red) 70%, transparent);}
.field{margin-bottom:20px;}
.field label{display:block;font-family:var(--font-display);font-weight:600;font-size:.9rem;margin-bottom:8px;color:var(--fg);}
.field input,.field textarea{
  width:100%;background:var(--bg);border:1.5px solid var(--card-line);border-radius:12px;
  padding:13px 15px;font-family:inherit;font-size:1rem;color:var(--fg);transition:border-color .2s, box-shadow .2s;
}
.field textarea{resize:vertical;min-height:130px;}
.field input::placeholder,.field textarea::placeholder{color:#6f685c;opacity:1;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%, transparent);}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field.row2 .field{margin:0;}
.field .err{color:var(--red);font-size:.82rem;margin-top:6px;display:none;}
.field.invalid input,.field.invalid textarea{border-color:var(--red);}
.field.invalid .err{display:block;}
.form__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px;}
.form__note{font-size:.82rem;color:var(--fg-soft);max-width:38ch;}
.form__note a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.form__ok{display:none;background:color-mix(in srgb,var(--turquoise) 14%, var(--card));border:1px solid color-mix(in srgb,var(--turquoise) 40%, transparent);color:var(--turquoise-d);border-radius:12px;padding:14px 18px;font-weight:500;margin-top:18px;}
.form__ok.show{display:block;}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--fg-soft);margin-bottom:20px;}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);flex:none;}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);color:#e9e3d7;padding-block:64px 30px;}
[data-look="c"] .foot{background:#16140f;}
.foot__top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12);}
.foot__lead{display:flex;flex-direction:column;align-items:flex-start;text-align:left;}
.foot__lead p{text-align:left;}
.foot__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:#fff;margin-left:-8px;}
.foot__brand img{height:46px;margin-left:-6px;}
.foot__cols{display:flex;gap:60px;flex-wrap:wrap;}
.foot__col h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#8d8576;margin-bottom:14px;font-weight:600;}
.foot__col a,.foot__col p{display:block;color:#cfc9bc;font-size:.95rem;margin-bottom:9px;transition:color .2s;}
.foot__col a:hover{color:#fff;}
.foot__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:.82rem;color:#8d8576;}
.foot__bottom .spectrum{margin:0;width:120px;height:6px;}
/* Rechts-Navigation im Footer der Rechtsseiten — Impressum etc. von überall in 1 Klick */
.foot__legalnav{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-bottom:20px;}
.foot__legalnav a{color:#cfc9bc;font-size:.95rem;transition:color .2s;}
.foot__legalnav a:hover{color:#fff;}
.foot__legalnav a[aria-current="page"]{color:#fff;font-weight:600;}
/* Spamschutz-Honeypot: visuell verborgen, aber für Bots ausfüllbar */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ============================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ============================================================ */
.legal{padding-top:clamp(120px,16vh,170px);padding-bottom:clamp(60px,9vh,110px);}
.legal__back{display:inline-flex;align-items:center;gap:8px;color:var(--fg-muted);font-weight:500;font-size:.92rem;margin-bottom:30px;transition:color .2s;}
.legal__back:hover{color:var(--accent);}
.legal h1{font-size:clamp(2.1rem,4.5vw,3.2rem);margin-bottom:8px;}
.legal__sub{color:var(--fg-muted);margin-bottom:46px;}
.legal__doc{max-width:760px;}
.legal__doc h2{font-size:1.35rem;margin:42px 0 12px;padding-top:26px;border-top:1px solid var(--hairline);}
.legal__doc h2:first-of-type{border-top:0;padding-top:0;}
.legal__doc h3{font-size:1.05rem;margin:24px 0 6px;font-family:var(--font-display);}
.legal__doc p,.legal__doc li{color:var(--fg-soft);font-size:1rem;line-height:1.7;}
.legal__doc p+p{margin-top:12px;}
.legal__doc ul{margin:10px 0;padding-left:22px;}
.legal__doc li{margin-bottom:6px;}
.legal__doc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.placeholder{background:color-mix(in srgb,var(--yellow) 22%, var(--card));border:1px dashed color-mix(in srgb,var(--yellow-d) 60%, transparent);color:var(--ink-soft);border-radius:8px;padding:2px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:1;transform:none;}
/* Sichtbarer Zustand wird von app.js per Inline-Style gesteuert (gewinnt zuverlässig
   gegen höher spezifische Inhaltsregeln). Hier nur noch die Staffel-Verzögerung. */
.reveal.d1{transition-delay:.12s;}
.reveal.d2{transition-delay:.26s;}
.reveal.d3{transition-delay:.40s;}
.reveal.d4{transition-delay:.54s;}
.reveal.d5{transition-delay:.68s;}
@media (prefers-reduced-motion:reduce){
  .anim .reveal{opacity:1;transform:none;transition:none;}
  .pinwheel.fold{animation:none;}
  .anim .divider i{transform:none;transition:none;}
  .person__ph img{transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  :root{--maxw:980px;}
}

/* ---- Tablet: Burger-Navigation ---- */
@media (max-width:900px){
  .nav__links{display:none;}
  .nav__burger{display:flex;}
  .nav__right .btn{display:none;}
  .nav__brand img{height:56px;}
  .nav__brand .brandmark{font-size:1.4rem;}
  .nav.open .nav__links{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--hairline);
    padding:6px var(--gutter) 18px;box-shadow:var(--shadow);
  }
  .nav.open .nav__links a{padding:14px 2px;border-bottom:1px solid var(--hairline);font-size:1.05rem;}
  .nav.open .nav__links a::after{display:none;}
  .nav.open .nav__links .nav__links-cta{display:inline-flex;justify-content:center;margin-top:14px;border-bottom:0;padding:11px 20px;font-size:.92rem;color:#fff;}
  .hero__art{margin-bottom:24px;}
  .kontakt__grid{grid-template-columns:1fr;}
  .komp__grid{grid-template-columns:repeat(2,1fr);}
  .team__grid{grid-template-columns:repeat(2,1fr);}
}

/* ---- Tablet / iPad (Hochformat, ~641–900px): Hero & Typo ausbalancieren ---- */
@media (min-width:641px) and (max-width:900px){
  section{padding-block:clamp(84px,10vh,130px);}
  .hero{min-height:92vh;padding-top:clamp(120px,16vh,180px);padding-bottom:clamp(60px,9vh,110px);}
  /* Foto etwas höher, damit auf hohen iPad-Schirmen alle Gesichter sichtbar bleiben */
  .hero__bg{background-position:center, center 24%;}
  /* Kicker zuverlässig einzeilig halten */
  .hero__kicker{flex-wrap:nowrap;white-space:nowrap;font-size:clamp(.55rem,1.5vw,.78rem);letter-spacing:.1em;gap:10px;}
  .hero__kicker span[data-i18n]{white-space:nowrap;}
  .hero__kicker .dots{flex:0 0 auto;}
  .hero h1{font-size:clamp(2rem,4.6vw,2.8rem);}
  .hero__lead{font-size:1.08rem;max-width:46ch;}
  .shead h2,.komp__head h2,.team__head h2,.kontakt__intro h2{font-size:clamp(1.9rem,4.6vw,2.7rem);}
  .about__lead{font-size:clamp(1.6rem,4.2vw,2.3rem);}
}

/* ---- Großes Smartphone ---- */
@media (max-width:640px){
  body{font-size:16.5px;}
  section{padding-block:clamp(72px,12vh,120px);}
  .hero{min-height:auto;padding-top:clamp(140px,22vh,200px);}
  /* Foto höher positionieren, damit alle Gesichter im Bildausschnitt bleiben */
  .hero__bg{background-position:center, center 20%;}
  .hero__kicker{flex-wrap:nowrap;white-space:nowrap;font-size:.6rem;letter-spacing:.06em;gap:8px;margin-bottom:5px;}
  .hero__kicker span[data-i18n]{white-space:nowrap;}
  .hero__kicker .dots{gap:4px;flex:0 0 auto;}
  .hero__kicker .dots i{width:6px;height:6px;}
  .hero h1{font-size:clamp(1.1rem,4.2vw,1.5rem);}
  .hero__lead{font-size:.74rem;margin:6px auto 11px;max-width:30ch;}
  .hero__cta{gap:8px;}
  .hero__cta .btn{padding:7px 12px;font-size:.7rem;}
  /* Überschriften kompakter */
  .shead h2,.komp__head h2,.team__head h2,.kontakt__intro h2{font-size:clamp(1.5rem,6vw,2.1rem);line-height:1.12;text-wrap:balance;}
  #kompetenzen .shead h2{line-height:1.12;}
  .about__lead{font-size:clamp(1.45rem,6vw,2rem);}
  .komp__grid{grid-template-columns:1fr;}
  .kard{min-height:0;padding:30px 24px 34px;}
  .field.row2{grid-template-columns:1fr;}
  .hero__meta{gap:22px;}
  .foot__top{flex-direction:column;gap:30px;}
  .foot__cols{gap:32px 48px;}
}

/* ---- Kompaktes Smartphone ---- */
@media (max-width:460px){
  :root{--gutter:16px;}
  .nav{gap:8px;}
  .nav__right{gap:8px;}
  .nav__brand{gap:9px;}
  .nav__brand img{height:38px;}
  .nav__brand .brandmark{font-size:1.04rem;overflow:visible;text-overflow:clip;}
  .lang button{padding:8px 10px;font-size:.72rem;min-height:40px;}
  .nav__burger{min-width:44px;min-height:44px;padding:8px 6px;}
  .hero__kicker{font-size:clamp(.42rem,2.55vw,.58rem);letter-spacing:.03em;gap:5px;margin-bottom:4px;}
  .hero__kicker .dots{gap:3px;}
  .hero__kicker .dots i{width:5px;height:5px;}
  .hero h1{font-size:clamp(1rem,4.6vw,1.35rem);}
  .hero__lead{font-size:.7rem;margin:5px auto 10px;max-width:26ch;}
  .team__grid{grid-template-columns:1fr;}
  .person__info h3{min-height:0;}
  .hero__cta{width:100%;gap:7px;}
  .hero__cta .btn{flex:1 1 auto;justify-content:center;padding:7px 10px;font-size:.68rem;}
  .form__foot{flex-direction:column;align-items:flex-start;gap:12px;}
  .kontakt__detail a,.kontakt__detail span{font-size:.95rem;align-items:flex-start;}
}

/* ---- Niedrige Viewports (Laptops): Hero-Text kompakt + tief halten, damit die
   Gesichter im Foto frei bleiben ---- */
@media (max-height:840px){
  .hero{padding-bottom:clamp(34px,5vh,72px);}
  .hero h1{font-size:clamp(2rem,4vw,3.2rem);}
  .hero__lead{font-size:1.15rem;margin:12px auto 20px;max-width:42ch;}
  .hero__kicker{margin-bottom:13px;}
}


/* ===== Hero-Textfarben auf farbigem Grund (höchste Priorität, am Dateiende) ===== */
.hero h1{color:var(--hero-fg);}
.hero .hero__lead{color:var(--hero-fg);opacity:.93;}
.hero .hero__kicker{color:var(--hero-fg);opacity:.82;}
[data-look="a"] .hero .hero__kicker,[data-look="c"] .hero .hero__kicker{color:#fff;opacity:.92;}


/* ============================================================
   HINTERGRUNDBILDER (Fotos hinter Hero & Abschnitten)
   ============================================================ */
/* Hero: Gruppenfoto im Reifen — Reifen rahmt die Headline ein */
.hero__bg{position:absolute;inset:0;z-index:0;filter:saturate(.92) brightness(.97);
  background:
    linear-gradient(180deg,
      rgba(142,108,203,.58) 0%,
      rgba(120,88,178,.54) 24%,
      rgba(74,50,102,.60) 38%,
      rgba(30,20,42,.74) 50%,
      rgba(12,8,16,.85) 66%,
      rgba(4,3,6,.93) 100%),
    url("assets/bg-hero.jpg") center 29.5% / cover no-repeat;}
.hero__bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(96% 78% at 50% 34%, transparent 36%, rgba(10,6,16,.5) 100%);
}
.hero > .wrap{position:relative;z-index:2;}
/* Anker-Ziele nicht unter der fixierten Navi verstecken (Klick „Projekt anfragen" etc.) */
#top,#kompetenzen,#about,#team,#kontakt{scroll-margin-top:96px;}
/* Helle Hero-Schrift auf dem Foto + Schatten für Lesbarkeit */
.hero h1 span:not(.accentword){color:#fff;}
.hero h1{filter:drop-shadow(0 2px 12px rgba(0,0,0,.42));line-height:1.08;}
.hero h1 span{padding-bottom:.08em;}
.hero h1 .accentword{padding-bottom:.14em;margin-bottom:-.06em;}
.hero .hero__lead{color:#fff;opacity:.97;text-shadow:0 1px 14px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.55);}
.hero .hero__kicker{color:#fff;opacity:.9;text-shadow:0 1px 12px rgba(0,0,0,.55);}
.hero .hero__kicker .dots i{filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));}
.hero .hero__kicker .dots i:nth-child(2){background:#b39ae8;}
/* Hero-Buttons auf dem Foto klar sichtbar */
.hero .hero__cta .btn--ghost{border-color:rgba(255,255,255,.72);color:#fff;background:rgba(255,255,255,.10);backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);}
.hero .hero__cta .btn--ghost:hover{background:#fff;color:var(--purple);border-color:#fff;}

/* Abschnitte: Fotos kräftig hinterlegt (Multiply hält die Markenfarbe satt) */
#kompetenzen,#about,#kontakt{position:relative;overflow:hidden;}
.sec-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  mix-blend-mode:multiply;opacity:.5;}
.sec-bg--komp{background-image:url("assets/bg-beton.jpg");background-position:center;background-size:cover;mix-blend-mode:multiply;opacity:.5;}
.sec-bg--beton{background-image:url("assets/bg-beton.jpg");background-position:center;opacity:.42;}
/* Über uns: buntes K-Bild prominent, mit dunklem Scrim für hellen Text */
.sec-bg--about{background-image:url("assets/bg-about-color.jpg");background-position:center;mix-blend-mode:normal;opacity:1;}
.sec-bg--about::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,22,.5),rgba(14,13,22,.64));}
#about .about__lead,#about .about__body p{color:#fff;}
#about .about__lead{color:#fff;}
#about .eyebrow{color:#fff;opacity:.92;}
#kontakt .kontakt__intro h2,#kontakt .kontakt__intro p,#kontakt .kontakt__detail a,#kontakt .kontakt__detail span{color:#fff;}
#kontakt .kontakt__detail .ic{color:var(--red);}
/* heller Schleier hinter Überschrift & Fließtext → Text immer gut lesbar auf dem Beton */
#kompetenzen::after{content:"";position:absolute;left:0;right:0;top:0;height:64%;z-index:0;pointer-events:none;
  background:radial-gradient(78% 100% at 50% 34%,
    color-mix(in srgb,var(--paper) 94%, transparent) 0%,
    color-mix(in srgb,var(--paper) 78%, transparent) 42%,
    color-mix(in srgb,var(--paper) 40%, transparent) 66%,
    transparent 84%);}
/* Kompetenzen-Text klar lesbar (kräftiges Schwarz, dezenter heller Halo) */
#kompetenzen .eyebrow{color:#5b3fb0;}
#kompetenzen .shead h2{color:#141318;text-shadow:0 1px 3px rgba(248,245,239,.85);white-space:pre-line;}
#kompetenzen .shead__sub{color:#2c2a27;text-shadow:0 1px 2px rgba(248,245,239,.8);}
#kompetenzen > .wrap,#about > .wrap,#kontakt > .wrap{position:relative;z-index:1;}
/* Deko-Neonschilder auf der Betonwand: ON AIR links, Mikro rechts */
.komp-deco{position:absolute;z-index:0;pointer-events:none;user-select:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.28));}
.komp-deco--onair{top:clamp(22px,4vw,54px);left:clamp(14px,3vw,52px);width:clamp(200px,24vw,360px);transform:rotate(-1deg);}
.komp-deco--mic{top:clamp(26px,4.5vw,60px);right:clamp(20px,3.5vw,64px);width:clamp(86px,10vw,156px);}
@media (max-width:720px){
  .komp-deco--onair{width:150px;top:14px;left:10px;}
  .komp-deco--mic{width:64px;top:16px;right:12px;}
}