/* ============================================================
   B2B RELEVANT — style-v4.css
   Font : Manrope via @fontsource CDN
   Palette: Rose #9d174d (auf hell) · Pink #f472b6 (auf dunkel) · Burgund #6d1233
   ============================================================ */

@import url('https://cdn.jsdelivr.net/npm/@fontsource/manrope@5/index.css');

:root {
  --bg-light:  #f7f2f4;
  --bg-dark:   #0f0a0d;
  --bg-dark-2: #0c0709;

  --text:           #1a0a10;
  --text-muted:     #6b4558;
  --text-light:     #fdf2f8;
  --text-light-dim: rgba(253,242,248,.60);

  /* Auf HELL-Hintergründen */
  --rose:     #b91c6d;
  --rose-h:   #9d174d;
  --burgundy: #7a1340;

  /* Auf DUNKEL-Hintergründen — lesbar! */
  --pink:      #f472b6;
  --pink-dim:  rgba(244,114,182,.32);

  --border-l:  rgba(26,10,16,.1);
  --border-d:  rgba(253,242,248,.09);

  --nav-h:     72px;
  --container: 1200px;
  --pad:       clamp(32px,4vw,56px);
  --ease:      cubic-bezier(.4,0,.2,1);
  --font:      'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-dark);color:var(--text-light);font-family:var(--font);
     line-height:1.72;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

h1{font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.08;font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(1.55rem,3.2vw,2.8rem);line-height:1.12;font-weight:700;letter-spacing:-.025em}
h3{font-size:clamp(1rem,1.5vw,1.18rem);font-weight:700;letter-spacing:-.01em}
p{font-size:clamp(1rem,1.25vw,1.08rem);line-height:1.8}

.section-inner{max-width:var(--container);margin:0 auto;padding:var(--pad) clamp(24px,5vw,80px)}
.accent-rule{width:48px;height:3px;background:var(--rose);margin:16px 0 32px}
.accent-rule-pink{width:48px;height:3px;background:var(--pink);margin:16px 0 32px}

/* ── NAV ─────────────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
     background:transparent;transition:background .3s var(--ease),border-color .3s;
     border-bottom:1px solid transparent}
#nav.scrolled{background:rgba(15,10,13,.95);backdrop-filter:blur(16px);
              -webkit-backdrop-filter:blur(16px);border-bottom-color:var(--border-d)}
.nav-inner{max-width:var(--container);margin:0 auto;height:100%;
           display:flex;align-items:center;justify-content:space-between;
           padding:0 clamp(24px,5vw,80px)}
.nav-logo{display:flex;align-items:center;gap:6px}
.nav-logo-img{height:36px;width:auto;display:block;
              filter:brightness(0) invert(1);
              transition:opacity .2s}
.nav-logo:hover .nav-logo-img{opacity:.8}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;
             font-weight:600;color:var(--text-light-dim);transition:color .2s}
.nav-links a:hover{color:var(--text-light)}
.nav-cta{background:var(--rose)!important;color:var(--text-light)!important;
         padding:8px 20px;transition:background .2s var(--ease)!important}
.nav-cta:hover{background:var(--burgundy)!important}
.nav-burger{display:none;flex-direction:column;gap:5px;
            background:none;border:none;cursor:pointer;padding:6px}
.nav-burger span{display:block;width:24px;height:2px;background:var(--text-light);
                 transition:transform .3s var(--ease),opacity .3s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;
             background:rgba(15,10,13,.97);backdrop-filter:blur(20px);
             -webkit-backdrop-filter:blur(20px);z-index:99;
             padding:36px clamp(24px,5vw,80px) 40px;border-bottom:1px solid var(--border-d)}
.mobile-menu.open{display:block}
.mobile-menu ul{display:flex;flex-direction:column;gap:28px}
.mobile-menu a{font-size:1rem;letter-spacing:.07em;text-transform:uppercase;
               font-weight:700;color:var(--text-light);transition:color .2s}
.mobile-menu a:hover{color:var(--pink)}

/* ── HERO ────────────────────────────────────────────────── */
#hero{position:relative;min-height:100vh;display:flex;align-items:center;
      overflow:hidden;background:var(--bg-dark-2);padding-top:var(--nav-h)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;
          object-fit:cover;object-position:65% top}
.hero-overlay{position:absolute;inset:0;
  background:linear-gradient(
    to right,
    rgba(12,7,9,.97) 0%,
    rgba(12,7,9,.80) 38%,
    rgba(12,7,9,.25) 65%,
    transparent 100%
  )}
.hero-content{position:relative;z-index:1;width:100%;
              max-width:var(--container);margin:0 auto;
              padding:80px clamp(24px,5vw,80px)}
.hero-eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
              color:var(--pink);font-weight:700;margin-bottom:32px}
.hero-text{max-width:620px}
.hero-text h1{color:var(--text-light);margin-bottom:20px}
.hero-positioning{font-size:clamp(.95rem,1.3vw,1.1rem);color:var(--text-light);
                  font-weight:500;line-height:1.62;margin-bottom:16px;
                  max-width:560px;opacity:.88}
.hero-sub{color:var(--text-light-dim);font-size:.88rem;font-weight:600;
          letter-spacing:.08em;text-transform:uppercase;margin-bottom:44px}
.btn-hero{display:inline-block;background:var(--rose);color:var(--text-light);
          padding:14px 36px;font-size:.8rem;font-weight:700;
          letter-spacing:.09em;text-transform:uppercase;
          transition:background .2s var(--ease)}
.btn-hero:hover{background:var(--burgundy)}
.hero-scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
             display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-scroll-line{width:1px;height:44px;
                  background:linear-gradient(to bottom,transparent,rgba(253,242,248,.25))}

/* ── KI-INTRO — dunkles Marken-Segment direkt nach Hero ─── */
#ki-intro{background:var(--bg-dark)}
.ki-intro-inner{max-width:var(--container);margin:0 auto;
                padding:clamp(64px,8vh,100px) clamp(24px,5vw,80px);
                display:grid;grid-template-columns:1fr 1fr;
                gap:clamp(40px,6vw,100px);align-items:center}
.ki-intro-left{display:flex;align-items:flex-start;
               gap:clamp(20px,3vw,44px)}
.ki-intro-right{display:flex;flex-direction:column;gap:20px}
@media(max-width:900px){
  .ki-intro-inner{grid-template-columns:1fr;gap:40px}
  .ki-intro-left{flex-direction:column;gap:16px}
}

/* ── KI-STATEMENT — Gesicht links (Grid), ragt in Text rein ─ */
#ki-statement{background:var(--bg-dark)}

/* Grid: Gesicht 3fr links, Text 5fr rechts */
.ki-sticky-wrap{display:grid;grid-template-columns:3fr 5fr;position:relative}

/* Sticky Gesicht — linke Spalte, bleibt stehen; darf nach rechts überlaufen */
.ki-sticky-img{position:sticky;top:0;height:100vh;
               overflow:visible;background:var(--bg-dark);z-index:1}

/* Gesicht: vollständig sichtbar — nur oben/unten auslaufen, rechts keine Kürzung */
.ki-sticky-img img{
  width:125%;height:100%;
  object-fit:cover;object-position:center top;display:block;
  animation:faceBreathe 5s ease-in-out infinite;
  /* Nur obere + untere Kante fließen in Schwarz */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 5%, black 96%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 5%, black 96%, transparent 100%);
}
@keyframes faceBreathe{
  0%,100%{filter:brightness(1) contrast(1.02) saturate(1)}
  40%{filter:brightness(1.12) contrast(1.08) saturate(1.15)}
  60%{filter:brightness(1.06) contrast(1.05) saturate(1.1)}
}

/* Atmosphärisches Glühen */
.ki-face-glow{position:absolute;inset:0;
              background:radial-gradient(ellipse 60% 50% at 50% 38%,
                rgba(244,114,182,.16) 0%,transparent 70%);
              pointer-events:none;z-index:2;
              animation:faceGlow 4s ease-in-out infinite}
@keyframes faceGlow{0%,100%{opacity:.45}50%{opacity:1}}

/* Leuchtpunkte */
.ki-face-dot{position:absolute;border-radius:50%;
             background:var(--pink);pointer-events:none;z-index:4}

.ki-face-dot:not([class*="dot-"]){top:36%;left:51%;
  width:9px;height:9px;
  animation:dotPulse 1.6s ease-in-out infinite}

.ki-face-dot-2{top:30%;left:40%;width:5px;height:5px;
               animation:dotPulse 2.1s ease-in-out infinite;
               animation-delay:.6s;opacity:.8}

.ki-face-dot-3{top:46%;left:60%;width:6px;height:6px;
               animation:dotPulse 2.6s ease-in-out infinite;
               animation-delay:1.2s;opacity:.7}

.ki-face-dot-4{top:62%;left:48%;width:4px;height:4px;
               animation:dotPulse 1.9s ease-in-out infinite;
               animation-delay:1.8s;opacity:.6}

@keyframes dotPulse{
  0%,100%{transform:scale(1);
          box-shadow:0 0 0 0 rgba(244,114,182,.9),
                     0 0 8px 2px rgba(244,114,182,.4)}
  35%{transform:scale(2.2);
      box-shadow:0 0 0 6px rgba(244,114,182,.5),
                 0 0 24px 6px rgba(244,114,182,.25)}
  55%{transform:scale(1.5);
      box-shadow:0 0 0 14px rgba(244,114,182,.1),
                 0 0 32px 8px rgba(244,114,182,.1)}
  70%{transform:scale(.8);
      box-shadow:0 0 0 0 rgba(244,114,182,0),
                 0 0 6px 1px rgba(244,114,182,.2)}
}

/* Rechte Scroll-Spalte — z-index über dem Gesicht, Gradient für Lesbarkeit */
.ki-scroll-col{display:flex;flex-direction:column;
               border-left:none;
               position:relative;z-index:2;
               background:linear-gradient(to right,
                 rgba(15,10,13,.5) 0%,
                 rgba(15,10,13,.88) 38%,
                 var(--bg-dark) 62%)}

/* Panels: normale Breite, normales Padding */
.ki-panel{
  min-height:100vh;
  padding:clamp(48px,7vh,88px) clamp(32px,4vw,64px);
  display:flex;flex-direction:column;justify-content:center;gap:24px;
  border-bottom:none
}

/* Panel 1: Logo + Claims als Zeile, dann Heading + Accent + Sub */
.ki-panel-1-top{display:flex;align-items:flex-start;
                gap:clamp(20px,3vw,40px);margin-bottom:8px}
.ki-logo{height:clamp(80px,12vh,140px);width:auto;
         filter:brightness(0) invert(1);opacity:.9;flex-shrink:0}
.ki-claims{list-style:none;display:flex;flex-direction:column;
           gap:6px;padding-top:8px;flex:1}
.ki-claims li{font-size:clamp(1rem,1.4vw,1.2rem);font-weight:300;
              color:var(--text-light);line-height:1.5;letter-spacing:-.01em}
.ki-panel-h2{font-size:clamp(1.3rem,2vw,1.8rem);font-weight:800;
             color:var(--text-light);letter-spacing:-.03em;line-height:1.1}
.ki-h-accent{width:48px;height:3px;background:var(--pink);
             border-radius:2px;margin:2px 0 4px}
.ki-panel-sub{color:rgba(253,242,248,.7);line-height:1.8;max-width:440px}

/* Panel 2: Methode */
.ki-panel-method{gap:20px;min-height:56vh}
.ki-method-h2{color:var(--text-light);font-size:clamp(1.3rem,2.2vw,2rem);
              letter-spacing:-.025em;line-height:1.15;font-weight:700}
.ki-method-body{display:flex;flex-direction:column;gap:18px;max-width:560px}
.ki-method-body p{color:rgba(253,242,248,.78);line-height:1.82}
.ki-method-body strong{color:var(--text-light);font-weight:700}

/* Panel 3: Zitat — direkt nach Panel 2, wenig Abstand */
.ki-panel-quote{justify-content:center;gap:0;
                min-height:49vh;
                padding:clamp(32px,4vh,56px) clamp(32px,4vw,64px)
                        clamp(48px,6vh,72px)}
.ki-quote-mark{font-size:clamp(7rem,12vw,11rem);line-height:.8;
               color:var(--pink);opacity:.55;font-weight:800;
               font-family:Georgia,serif;display:block;margin-bottom:-12px}
.ki-panel-quote blockquote{font-size:clamp(1.5rem,2.8vw,2.4rem);font-weight:700;
                            color:var(--text-light);
                            letter-spacing:-.02em;line-height:1.32;
                            max-width:480px}

/* ── INTRO STRIP (hell) ──────────────────────────────────── */
#intro{background:var(--bg-light)}
.intro-inner{max-width:var(--container);margin:0 auto;
             padding:100px clamp(24px,5vw,80px);
             display:grid;grid-template-columns:200px 1fr;gap:80px;align-items:center}
.intro-logo-img{width:160px;height:auto;display:block}
.intro-text{display:flex;gap:60px;align-items:flex-start}
.intro-list{display:flex;flex-direction:column;gap:6px;padding-top:4px}
.intro-list li{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
               color:var(--text-muted);font-weight:700}
.intro-claim-title{font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:800;color:var(--text);
                   margin-bottom:16px;letter-spacing:-.03em;line-height:1.1}
.intro-claim p{color:var(--text-muted);font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.65;font-weight:400}
.intro-claim-bold{font-size:clamp(1.2rem,1.8vw,1.5rem)!important;font-weight:800!important;
                  color:var(--text)!important;margin-top:16px;letter-spacing:-.02em;line-height:1.2}

/* ── MESH / METHODE ──────────────────────────────────────── */
#methode{background:#06030a;position:relative;overflow:hidden;
         min-height:clamp(700px,90vh,960px);
         display:flex;align-items:flex-start;justify-content:flex-end}

/* Mesh links — groß, mittig-links */
.methode-mesh-tl{position:absolute;
                 left:clamp(-60px,-8vw,-20px);
                 top:clamp(-20px,-3vh,10px);
                 width:clamp(420px,52vw,760px);
                 pointer-events:none;z-index:1}
.mesh-img{width:100%;height:auto;display:block;opacity:.95;
          animation:meshDrift 14s ease-in-out infinite}
@keyframes meshDrift{
  0%,100%{transform:scale(1)    translate(0%,   0%)}
  30%    {transform:scale(1.06) translate(-1.5%, 1%)}
  65%    {transform:scale(1.04) translate(1%,   -1%)}
}
.mesh-canvas-overlay{position:absolute;inset:0;width:100%;height:100%;opacity:.35}

/* Mesh unten rechts — groß, blaue Tönung */
.methode-mesh-br{position:absolute;
                 right:clamp(-80px,-10vw,-20px);
                 bottom:clamp(-80px,-10vh,-20px);
                 width:clamp(380px,48vw,680px);
                 pointer-events:none;z-index:1}
.methode-mesh-br img{width:100%;height:auto;display:block;
                     opacity:.78;
                     filter:hue-rotate(215deg) saturate(.6) brightness(.8);
                     transform:rotate(180deg) scaleX(-1);
                     animation:meshDrift 18s ease-in-out infinite reverse}

/* Text oben-rechts */
.methode-text{position:relative;z-index:2;
              max-width:460px;
              padding:clamp(48px,7vh,88px) clamp(48px,6vw,96px)
                      clamp(48px,7vh,88px) clamp(24px,3vw,48px)}
.methode-text h2{color:var(--text-light);margin-bottom:20px;
                 text-transform:uppercase;letter-spacing:.04em;
                 font-size:clamp(1.2rem,2vw,1.8rem);font-weight:800}
.methode-text .accent-rule-pink{margin-bottom:28px}
.methode-text p{color:var(--text-light);margin-bottom:16px;max-width:440px}
.methode-text strong{color:var(--text-light);font-weight:700}
.methode-intro{color:rgba(253,242,248,.82);margin-bottom:28px;max-width:440px}
.methode-steps{list-style:none;display:flex;flex-direction:column;gap:22px}
.methode-steps li{display:flex;align-items:flex-start;gap:18px}
.ms-nr{font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--pink);
       min-width:28px;padding-top:2px;text-transform:uppercase}
.ms-text{color:rgba(253,242,248,.85);line-height:1.8}

/* ── LEISTUNGEN (dunkel, canvas bg, Glas-Kacheln) ───────── */
#leistungen{background:var(--bg-dark);position:relative;overflow:hidden;
            /* Hintergrundbild: Datei in images/ ablegen und hier eintragen: */
            /* background-image:url('images/leistungen-bg.jpg'); */
            background-size:cover;background-position:center}

/* Abdunk-Overlay über dem BG-Bild */
#leistungen::before{content:'';position:absolute;inset:0;
                    background:rgba(10,4,8,.78);z-index:0;pointer-events:none}

#canvasLeistungen{position:absolute;inset:0;width:100%;height:100%;opacity:.25;z-index:1}
.leistungen-inner{position:relative;z-index:2;
                  max-width:var(--container);margin:0 auto;
                  padding:var(--pad) clamp(24px,5vw,80px)}
.leistungen-title{color:var(--text-light);margin-bottom:4px}
.leistungen-subtitle{color:rgba(253,242,248,.65);line-height:1.78;
                     max-width:680px;margin-top:20px;margin-bottom:8px;
                     font-size:clamp(.95rem,1.2vw,1.05rem)}

/* Grid 2×2 mit echtem Abstand */
.leistungen-grid{display:grid;grid-template-columns:repeat(2,1fr);
                 gap:16px;margin-top:32px}

/* Glas-Kacheln */
.l-card{position:relative;overflow:hidden;
        background:rgba(255,255,255,.07);
        border:1px solid rgba(255,255,255,.18);
        backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
        padding:36px 32px;
        display:flex;flex-direction:column;gap:12px;
        transition:background .28s var(--ease),border-color .28s,
                   color .28s,box-shadow .28s}
.l-card:hover{background:#fff;border-color:#fff;
              box-shadow:0 16px 48px rgba(0,0,0,.35)}

/* Kein besonderer Accent mehr */
.l-card--accent{background:rgba(255,255,255,.07)}

/* Wasserzeichen-Zahlen hinter jeder Kachel */
.l-card::before{
  position:absolute;
  top:-8px;right:8px;
  font-size:clamp(5rem,10vw,9rem);
  font-weight:800;
  line-height:1;
  color:rgba(255,255,255,.06);
  pointer-events:none;
  z-index:0;
  letter-spacing:-.05em;
  animation:numFloat 7s ease-in-out infinite;
  font-family:var(--font)
}
.leistungen-grid .l-card:nth-child(1)::before{content:"01";animation-delay:0s}
.leistungen-grid .l-card:nth-child(2)::before{content:"02";animation-delay:1.75s}
.leistungen-grid .l-card:nth-child(3)::before{content:"03";animation-delay:3.5s}
.leistungen-grid .l-card:nth-child(4)::before{content:"04";animation-delay:5.25s}
@keyframes numFloat{
  0%,100%{transform:translateY(0) scale(1);opacity:.06}
  50%{transform:translateY(-8px) scale(1.03);opacity:.11}
}
/* Karten-Inhalt über Wasserzeichen */
.l-card > *{position:relative;z-index:1}

.l-tag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
       color:var(--pink);font-weight:700;
       transition:color .28s}
.l-card:hover .l-tag{color:var(--rose)}

.l-card h3{color:var(--text-light);font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:700;
           letter-spacing:.01em;line-height:1.35;margin:0;
           transition:color .28s}
.l-card:hover h3{color:#111}

.l-card p{color:rgba(253,242,248,.75);line-height:1.78;margin:0;
          font-size:clamp(1rem,1.2vw,1.08rem);
          transition:color .28s}
.l-card:hover p{color:rgba(0,0,0,.8)}

/* GIF-Hintergrund (optional, wird aktiv wenn bg-leistungen.gif vorhanden) */
.leistungen-gif-bg{position:absolute;inset:0;
                   background-image:url('images/bg-leistungen.gif');
                   background-size:cover;background-position:center;
                   opacity:.07;z-index:0}

/* ── ÜBER MICH (hell) ────────────────────────────────────── */
#ueber-mich{background:var(--bg-light)}
.ueber-inner{max-width:var(--container);margin:0 auto;
             padding:var(--pad) clamp(24px,5vw,80px);
             display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.ueber-photo img{width:100%;max-width:500px;aspect-ratio:3/4;
                 object-fit:cover;object-position:top;filter:contrast(1.04)}
.ueber-right h2{color:var(--text);margin-bottom:24px}
.ueber-right p{color:var(--text-muted);margin-bottom:18px;max-width:480px}

/* ── REFERENZEN (dunkel) ─────────────────────────────────── */
#referenzen{background:var(--bg-dark-2)}
.referenzen-grid{display:grid;grid-template-columns:repeat(3,1fr);
                 gap:1px;background:var(--border-d);margin-bottom:64px}
.referenz-item{background:var(--bg-dark);padding:40px 36px;transition:background .25s}
.referenz-item:hover{background:rgba(244,114,182,.05)}
.referenz-item h3{color:var(--text-light);font-size:.78rem;letter-spacing:.13em;
                  text-transform:uppercase;padding-bottom:14px;
                  border-bottom:1px solid var(--border-d);margin-bottom:16px}
.referenz-item p{color:rgba(253,242,248,.82);font-size:.95rem;line-height:1.78}
.ref-link{display:inline-block;margin-top:14px;font-size:.78rem;
          color:var(--pink);transition:color .2s}
.ref-link:hover{color:var(--text-light)}
.awards-heading{font-weight:800;color:var(--text-light);
                margin-top:clamp(48px,6vw,80px);margin-bottom:40px;letter-spacing:-.025em}
.awards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
             border-top:1px solid var(--border-d);padding-top:52px;margin-top:52px}
.award-card{display:flex;flex-direction:column;gap:20px;
            background:transparent;border-radius:6px;overflow:hidden;
            transition:transform .3s var(--ease);cursor:pointer;color:inherit}
.award-card:hover{transform:translateY(-4px)}
.award-card[href]:hover .award-nm{color:var(--pink)}
.award-img-wrap{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:6px 6px 0 0}
.award-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;
                    transform:scale(1.002);
                    transition:transform .5s var(--ease);
                    backface-visibility:hidden;will-change:transform}
.award-card:hover .award-img-wrap img{transform:scale(1.04)}
.award-info{display:flex;flex-direction:column;gap:6px;padding:16px 20px 20px}
.award-info--solo{padding:32px 24px}
.award-yr{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
          color:var(--pink);font-weight:700}
.award-nm{font-size:.95rem;font-weight:700;color:var(--text-light);line-height:1.35}
.award-detail{font-size:.8rem;color:rgba(253,242,248,.55);line-height:1.4;margin-top:2px}
.award-card--text{justify-content:center;border:1px solid var(--border-d);min-height:200px}

/* ── STRUKTURBILD BANNER ─────────────────────────────────── */
.strukturbild-banner{width:100%;overflow:hidden;line-height:0;display:block;
                     background:var(--bg-dark);position:relative;z-index:1}
.strukturbild-banner img{width:100%;height:auto;display:block;
                         object-fit:cover;max-height:400px;object-position:center;
                         /* Obere + untere Kante fließen in Schwarz */
                         -webkit-mask-image:
                           linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
                         mask-image:
                           linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%)}

/* ── ANSATZ (hell, linksbündig, bündig mit Kacheln) ─────── */
#ansatz{background:var(--bg-light)}
.ansatz-inner{max-width:var(--container);margin:0 auto;
              padding:clamp(48px,6vh,72px) clamp(24px,5vw,80px)}
#ansatz h2{color:var(--text)}
.ansatz-copy{color:var(--text-muted);line-height:1.78;max-width:480px}

/* ── LEISTUNGS-KACHELN (hell, animierte Kurve) ──────────── */
#leistungen-kacheln{background:var(--bg-light);position:relative;overflow:hidden}
.kacheln-canvas-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.kacheln-inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto;
               padding:clamp(40px,5vh,64px) clamp(24px,5vw,80px) clamp(32px,4vh,48px);
               display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
               align-items:start}
.kachel{position:relative;z-index:1;background:var(--kachel-bg);border-radius:8px;
        padding:28px 28px;color:#fff;display:flex;flex-direction:column;gap:14px;
        border:3px solid transparent;
        transition:padding .4s var(--ease),gap .4s var(--ease),
                   background .3s,color .3s,border-color .3s,box-shadow .3s}
.kachel:hover{padding:56px 44px;gap:28px;z-index:20;
              background:#fff !important;color:#000;
              border-color:var(--kachel-bg);
              box-shadow:0 24px 64px rgba(0,0,0,.5)}
.kachel:hover h3{color:#000}
.kachel:hover p{color:rgba(0,0,0,.82)}
.kachel:hover strong{color:#000}
.kachel h3{font-size:clamp(1.4rem,2.1vw,1.9rem);font-weight:800;line-height:1.08;
           letter-spacing:-.03em;color:#fff;transition:color .3s,font-size .4s var(--ease)}
.kachel:hover h3{font-size:clamp(1.7rem,2.6vw,2.3rem)}
.kachel p{font-size:1rem;line-height:1.78;color:rgba(255,255,255,.9);transition:color .3s}
.kachel strong{color:#fff;font-weight:700;transition:color .3s}
.kacheln-cta{position:relative;z-index:1;max-width:var(--container);margin:0 auto;
             padding:0 clamp(24px,5vw,80px) clamp(40px,5vh,64px);
             display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.kacheln-question{font-size:clamp(1.1rem,1.8vw,1.5rem);color:var(--text);
                  font-weight:600;line-height:1.5;max-width:560px;letter-spacing:-.01em}
.btn-kacheln-cta{display:inline-block;background:var(--rose);color:#fff;
                 border:2px solid var(--rose);padding:14px 40px;
                 font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
                 transition:background .2s var(--ease),color .2s,border-color .2s}
.btn-kacheln-cta:hover{background:var(--burgundy);border-color:var(--burgundy);color:#fff}

/* ── PROJEKT-KACHELN + HOVER-PANEL ───────────────────────── */
.proj-grid-wrapper{margin-top:8px}

/* Kacheln-Reihe — 3 nebeneinander */
.proj-cards{display:grid;grid-template-columns:repeat(3,1fr);
            gap:1px;background:var(--border-d)}

.proj-card{background:var(--bg-dark);padding:36px 32px 32px;cursor:default;
           display:flex;flex-direction:column;gap:12px;
           border-bottom:3px solid transparent;
           transition:background .25s var(--ease),border-color .25s var(--ease)}
.proj-card.is-active,
.proj-card:hover{background:rgba(181,23,158,.07);border-bottom-color:var(--pink)}

.proj-card-label{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
                 color:var(--pink);font-weight:700}
.proj-card h3{font-size:clamp(1.3rem,2.2vw,2rem);font-weight:800;
              color:var(--text-light);letter-spacing:-.03em;line-height:1.1}
.proj-card-teaser{color:rgba(253,242,248,.62);line-height:1.78;
                  flex:1}
.proj-card-cue{font-size:1.1rem;color:var(--pink);margin-top:8px;
               opacity:0;transform:translateY(-4px);
               transition:opacity .25s,transform .25s var(--ease)}
.proj-card.is-active .proj-card-cue,
.proj-card:hover .proj-card-cue{opacity:1;transform:translateY(0)}

/* Zeilen-Panel — öffnet direkt unterhalb der jeweiligen Kachelreihe */
.proj-row-panel{grid-column:1/-1;max-height:0;overflow:hidden;
                transition:max-height .5s var(--ease)}
.proj-row-panel.is-open{max-height:640px}

.proj-panel-inner{background:#fff;
                  display:grid;grid-template-columns:1fr 1.6fr;gap:48px;
                  padding:40px clamp(24px,4vw,56px)}

.proj-panel-heading{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
                    color:var(--pink);font-weight:700;margin-bottom:4px}
.proj-panel-text{display:flex;flex-direction:column;gap:12px;color:#111}
.proj-panel-text p{line-height:1.82;color:rgba(0,0,0,.78)}
.proj-panel-source{font-size:.8rem!important;color:rgba(0,0,0,.5)!important;
                   font-style:italic;margin-top:4px}
.proj-panel-text .ref-link{color:var(--pink);font-size:.8rem;letter-spacing:.07em;
                            font-weight:700;text-transform:uppercase;margin-top:4px}
.proj-panel-text .ref-link:hover{color:#000}

/* YouTube Thumbnail (Embed deaktiviert → externer Link) */
.proj-yt-thumb{position:relative;display:block;border-radius:6px;overflow:hidden;
               aspect-ratio:16/9}
.proj-yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;
                   transition:transform .4s ease}
.proj-yt-thumb:hover img{transform:scale(1.04)}
.proj-yt-play-btn{position:absolute;inset:0;display:flex;align-items:center;
                  justify-content:center;font-size:2.4rem;color:#fff;
                  background:rgba(0,0,0,.35);
                  transition:background .25s}
.proj-yt-thumb:hover .proj-yt-play-btn{background:rgba(157,23,77,.55)}

.proj-panel-visuals{display:flex;flex-direction:column;gap:8px}
.proj-main-img{width:100%;border-radius:6px;display:block;
               aspect-ratio:16/10;object-fit:cover;object-position:top}
.proj-img-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.proj-img-row img{width:100%;aspect-ratio:4/3;object-fit:cover;
                  border-radius:4px;display:block}

@media(max-width:900px){
  .proj-cards{grid-template-columns:repeat(2,1fr)}
  .proj-panel-inner{grid-template-columns:1fr;gap:24px}
  .proj-img-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .proj-cards{grid-template-columns:1fr}
}

/* ── KONTAKT (hell, linksbündig) ────────────────────────── */
#kontakt{background:var(--bg-light);border-top:1px solid var(--border-l)}
.kontakt-inner{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.kontakt-inner h2{color:var(--text);max-width:640px;line-height:1.18}
.btn-kontakt{display:inline-block;background:var(--rose);color:#fff;
             padding:16px 46px;font-size:.82rem;font-weight:700;
             letter-spacing:.1em;text-transform:uppercase;
             transition:background .2s var(--ease)}
.btn-kontakt:hover{background:var(--burgundy)}
.kontakt-data{display:flex;flex-direction:column;gap:8px}
.kontakt-data p{font-size:.87rem;color:var(--text-muted)}
.kontakt-data a{color:var(--text-muted);transition:color .2s}
.kontakt-data a:hover{color:var(--rose)}

/* ── KONTAKT-FORMULAR ────────────────────────────────────── */
.kontakt-form{width:100%;max-width:640px;display:flex;flex-direction:column;gap:20px}
.form-honeypot{display:none!important;visibility:hidden}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-group{display:flex;flex-direction:column;gap:7px}
.form-group label{font-size:.78rem;font-weight:700;letter-spacing:.06em;
                  text-transform:uppercase;color:var(--text-muted)}
.req{color:var(--rose);font-weight:700}
.form-group input,
.form-group textarea{width:100%;padding:12px 16px;
                     background:#fff;color:var(--text);
                     border:1.5px solid rgba(26,10,16,.2);
                     font-family:var(--font);font-size:1rem;
                     outline:none;
                     transition:border-color .2s var(--ease),box-shadow .2s}
.form-group input:focus,
.form-group textarea:focus{border-color:var(--rose);
                            box-shadow:0 0 0 3px rgba(185,28,109,.12)}
.form-group textarea{resize:vertical;min-height:120px;line-height:1.65}
.form-footer{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
             margin-top:8px}
.form-hinweis{font-size:.78rem;color:var(--text-muted);line-height:1.5;max-width:480px}
.form-success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);
              padding:18px 22px;max-width:640px}
.form-success p{color:#065f46;font-weight:600}
.form-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);
            padding:18px 22px;max-width:640px}
.form-error p,.form-error a{color:#991b1b}
@media(max-width:600px){
  .form-row-2{grid-template-columns:1fr}
}

/* ── FOOTER ──────────────────────────────────────────────── */
footer{background:var(--bg-dark-2);border-top:1px solid var(--border-d)}
.footer-inner{max-width:var(--container);margin:0 auto;
              padding:52px clamp(24px,5vw,80px);
              display:flex;align-items:flex-start;justify-content:space-between;
              flex-wrap:wrap;gap:40px}

/* Linke Seite: Logo + Nav nebeneinander auf einer Linie */
.footer-brand{display:flex;flex-direction:row;align-items:flex-start;gap:40px}
.footer-logo-img{height:80px;width:auto;display:block;filter:brightness(0) invert(1);flex-shrink:0}
.footer-nav{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.footer-nav a{font-size:.72rem;letter-spacing:.12em;
              text-transform:uppercase;color:rgba(253,242,248,.65);transition:color .2s}
.footer-nav a:hover{color:var(--text-light)}

/* Rechte Seite: LinkedIn-Icon (kein Rahmen) + Linksspalte */
.footer-right{display:flex;align-items:flex-start;gap:28px}
.footer-linkedin-btn{display:block;color:rgba(253,242,248,.75);
                     flex-shrink:0;
                     transition:color .2s}
.footer-linkedin-btn:hover{color:#fff}
.footer-links-col{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.footer-links-col a{font-size:.72rem;letter-spacing:.1em;
                    text-transform:uppercase;color:rgba(253,242,248,.65);transition:color .2s}
.footer-links-col a:hover{color:var(--pink)}

.footer-bottom{max-width:var(--container);margin:0 auto;
               padding:18px clamp(24px,5vw,80px);border-top:1px solid var(--border-d)}
.footer-bottom p{font-size:.72rem;color:rgba(253,242,248,.55)}
.footer-bottom a{color:rgba(253,242,248,.55);transition:color .2s}
.footer-bottom a:hover{color:var(--text-light)}

/* ── REVEAL ──────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);
        transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px){
  /* KI: Gesicht ausblenden auf Mobile */
  .ki-sticky-wrap{grid-template-columns:1fr}
  .ki-sticky-img{display:none}
  .ki-panel-method{gap:20px}
  .ki-panel-1-top{flex-direction:column;gap:16px}
  .ki-logo{height:clamp(60px,10vh,100px)}
  .ueber-inner{grid-template-columns:1fr;gap:0}
  #methode{justify-content:center;align-items:flex-end;min-height:auto;padding-bottom:40px}
  .methode-mesh-tl{width:clamp(240px,55vw,380px);top:-10px;left:-20px}
  .methode-mesh-br{display:none}
  .methode-text{padding:clamp(240px,40vw,340px) clamp(24px,5vw,48px) 48px}
  .intro-inner{grid-template-columns:1fr;gap:40px}
  .intro-text{flex-direction:column;gap:24px}
  .referenzen-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-burger{display:flex}
  .hero-text{max-width:100%}
  .hero-overlay{background:linear-gradient(
    to bottom,rgba(12,7,9,.92) 0%,rgba(12,7,9,.62) 50%,rgba(12,7,9,.85) 100%)}
  .methode-mesh-br{display:none}
  .ueber-photo{order:-1}
  .ueber-photo img{max-width:300px;margin:0 auto}
  .awards-grid{grid-template-columns:1fr 1fr}
  .kacheln-inner{grid-template-columns:1fr}
}
@media(max-width:600px){
  .referenz-item{padding:28px 20px}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .leistungen-grid{grid-template-columns:1fr}
}