*{box-sizing:border-box}
:root{
  --bg:#020508;--panel:#071019;--text:#f5f7fa;--muted:#98a4af;
  --line:rgba(163,190,211,.18);--blue:#098aff;--blue2:#35a8ff;
  --header:82px;
}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
a{color:inherit}
button{font:inherit}
.site-header{
  position:fixed;top:0;left:0;right:0;height:var(--header);z-index:100;
  display:flex;align-items:center;padding:0 5.2vw;border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(2,5,8,.92);backdrop-filter:blur(18px)
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:205px}
.brand-mark{
  width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--blue);
  color:var(--blue);font-weight:800;letter-spacing:-.05em
}
.brand>span:last-child{display:flex;flex-direction:column}
.brand b{font-size:1.08rem;line-height:1}
.brand small{font-size:.56rem;letter-spacing:.12em;color:#a9b3bc;margin-top:6px}
.nav-links{margin:auto;display:flex;align-items:center;height:100%;gap:clamp(22px,3.3vw,58px)}
.nav-links a{
  height:100%;display:flex;align-items:center;position:relative;text-decoration:none;
  font-size:.76rem;letter-spacing:.055em;font-weight:700;color:#d5dae0
}
.nav-links a:hover,.nav-links a.active{color:var(--blue2)}
.nav-links a.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--blue)}
.slide-counter{min-width:105px;display:flex;justify-content:flex-end;align-items:center;gap:9px;color:#75818c;font-size:.67rem;letter-spacing:.08em}
.slide-counter span:first-child{color:var(--blue2)}
.slide-counter i{width:24px;height:1px;background:#4a5660}
.menu-toggle{display:none;background:none;border:0;color:white;font-size:1.4rem;cursor:pointer}

.horizontal-track{
  position:fixed;left:0;right:0;top:var(--header);bottom:0;
  display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;overscroll-behavior-x:contain;
  scrollbar-width:none;touch-action:pan-x
}
.horizontal-track::-webkit-scrollbar{display:none}
.slide{
  position:relative;flex:0 0 100vw;width:100vw;height:calc(100vh - var(--header));
  scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;
  background:#030609
}
.slide-inner{width:min(1400px,89vw);height:100%;margin:0 auto;position:relative;z-index:3}
.grid-overlay{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:48px 48px}
.hero-slide{
  background:radial-gradient(circle at 67% 42%,rgba(64,80,96,.38),transparent 29%),radial-gradient(circle at 43% 15%,rgba(18,43,67,.35),transparent 32%),linear-gradient(100deg,#020406,#071018 50%,#020406)
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:4vw}
.hero-copy{padding-left:5vw}
.eyebrow{margin:0 0 25px;color:var(--blue2);font-size:.67rem;font-weight:700;letter-spacing:.22em}
.hero h1{margin:0;font-size:clamp(4.3rem,7.2vw,7.6rem);line-height:.87;letter-spacing:-.055em}
.hero h1 span{display:block}
.hero h1 strong{display:block;color:var(--blue);font-weight:800;margin-top:16px}
.accent-line{width:170px;height:2px;margin:28px 0 23px;background:linear-gradient(90deg,var(--blue),transparent)}
.claim{margin:0;font-size:clamp(.9rem,1.35vw,1.12rem);letter-spacing:.28em;line-height:1.75}
.claim.blue{color:var(--blue2);margin-top:3px}
.instagram-btn{
  margin-top:29px;width:fit-content;display:flex;align-items:center;gap:22px;padding:15px 20px;
  border:1px solid var(--blue);text-decoration:none;color:var(--blue2);font-size:.78rem;font-weight:800;letter-spacing:.055em;
  background:rgba(0,75,130,.04);transition:.2s
}
.instagram-btn:hover{background:var(--blue);color:white;box-shadow:0 12px 38px rgba(9,138,255,.2)}
.portrait-stage{position:relative;width:min(555px,43vw);aspect-ratio:1;display:grid;place-items:center;justify-self:center}
.portrait{position:relative;z-index:3;width:68%;height:68%;object-fit:cover;object-position:52% 46%;border-radius:50%;filter:brightness(1.15) contrast(1.07) saturate(.78);box-shadow:0 30px 90px rgba(0,0,0,.72)}
.lens-ring{position:absolute;border-radius:50%;border:1px solid rgba(84,155,211,.2);z-index:4;pointer-events:none}
.r1{width:78%;height:78%}.r2{width:89%;height:89%}.r3{width:100%;height:100%}
.lens-ticks{position:absolute;z-index:4;width:96%;height:96%;border-radius:50%;opacity:.34;background:repeating-conic-gradient(rgba(43,144,224,.65) 0deg .55deg,transparent .55deg 4deg);-webkit-mask:radial-gradient(circle,transparent 0 46%,#000 46.5% 48%,transparent 48.5%);mask:radial-gradient(circle,transparent 0 46%,#000 46.5% 48%,transparent 48.5%)}
.lens-label{position:absolute;z-index:5;color:rgba(32,148,238,.62);font-size:.72rem;letter-spacing:.08em;right:1%}
.l1{top:31%;transform:rotate(84deg)}.l2{top:58%;transform:rotate(82deg)}
.hud{position:absolute;z-index:5;color:rgba(42,151,236,.75);font-size:.7rem;letter-spacing:.1em}
.rec{left:6%;top:7%}.rec span{display:inline-block;width:7px;height:7px;background:var(--blue);border-radius:50%;margin-right:7px}
.battery{right:6%;top:7%;letter-spacing:2px;color:#7c8994}
.corner{position:absolute;width:36px;height:36px;border-color:rgba(115,151,179,.34);z-index:2}
.c1{left:5%;top:7%;border-left:1px solid;border-top:1px solid}.c2{right:5%;top:7%;border-right:1px solid;border-top:1px solid}.c3{left:5%;bottom:7%;border-left:1px solid;border-bottom:1px solid}.c4{right:5%;bottom:7%;border-right:1px solid;border-bottom:1px solid}
.next-slide{
  position:absolute;z-index:8;right:5.2vw;bottom:4.2vh;background:transparent;border:0;border-bottom:1px solid rgba(53,168,255,.55);
  color:var(--blue2);padding:9px 0;cursor:pointer;font-size:.68rem;font-weight:800;letter-spacing:.12em
}
.next-slide span{font-size:1.15rem;margin-left:13px}
.back-home{right:auto;left:5.2vw}
.panel-content{padding:7vh 0 8vh;display:flex;flex-direction:column;justify-content:center}
.services-slide,.references-slide{background:radial-gradient(circle at 77% 20%,rgba(9,138,255,.09),transparent 27rem),linear-gradient(180deg,#030609,#071018 54%,#030609)}
.panel-heading{display:grid;grid-template-columns:1fr .75fr;gap:6vw;align-items:end;margin-bottom:5vh}
.panel-heading h2,.contact-intro h2{margin:0;font-size:clamp(3.5rem,6.7vw,6.8rem);line-height:.86;letter-spacing:-.05em}
.panel-heading h2 span,.contact-intro h2 span{color:var(--blue)}
.panel-heading>p{justify-self:end;max-width:510px;margin:0 0 5px;color:var(--muted);font-size:.9rem;line-height:1.7}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{min-height:335px;padding:37px 34px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(16,24,31,.94),rgba(3,7,10,.94));position:relative;transition:.25s}
.service-card:hover{transform:translateY(-7px);border-color:rgba(53,168,255,.5)}
.service-card .num{position:absolute;right:29px;top:27px;color:var(--blue2);font-size:.7rem;letter-spacing:.1em}
.service-symbol{color:var(--blue);font-size:2.2rem;margin:18px 0 35px}
.service-card h3{font-size:1.35rem;margin:0 0 20px;line-height:1.18}
.service-card p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.75;max-width:320px}
.references-slide .panel-content{padding-top:5vh}
.panel-heading.compact{margin-bottom:3.5vh}
.references-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;min-height:0}
.reference-card{border:1px solid var(--line);background:linear-gradient(145deg,#0b1117,#05080b);min-width:0;overflow:hidden}
.video-wrap{position:relative;height:clamp(250px,43vh,440px);background:#000}
.video-wrap video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.video-num{position:absolute;z-index:3;right:15px;top:15px;border:1px solid rgba(53,168,255,.55);background:rgba(2,5,8,.78);color:var(--blue2);font-size:.65rem;letter-spacing:.1em;padding:7px 9px;pointer-events:none}
.reference-meta{padding:18px 20px 20px;border-top:1px solid var(--line)}
.reference-meta span{font-size:.57rem;letter-spacing:.17em;color:var(--blue2);font-weight:700}
.reference-meta h3{margin:8px 0 0;font-size:1.15rem}
.about-slide{background:radial-gradient(circle at 25% 55%,rgba(9,138,255,.1),transparent 26rem),linear-gradient(100deg,#030609,#071017)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;padding:5vh 0}
.about-title h2{margin:0;font-size:clamp(3.4rem,5.8vw,6rem);line-height:.9;letter-spacing:-.05em}
.about-title h2 span{color:var(--blue)}
.about-photo-frame{width:min(315px,28vw);height:180px;margin-top:4vh;border:1px solid var(--line);overflow:hidden}
.about-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;filter:brightness(1.08) saturate(.75)}
.about-copy{max-width:650px}
.about-copy p{color:#aeb8c2;font-size:1rem;line-height:1.8;margin:0 0 19px}
.about-copy .lead{color:#fff;font-weight:700;font-size:1.08rem}
.about-copy .blue-statement{color:var(--blue2);font-weight:700}
.text-link{display:inline-block;margin-top:6px;text-decoration:none;color:var(--blue2);border-bottom:1px solid var(--blue);padding-bottom:5px;font-size:.75rem;font-weight:800;letter-spacing:.09em}
.contact-slide{background:radial-gradient(circle at 73% 36%,rgba(9,138,255,.1),transparent 25rem),#030609}
.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-content:center;padding:7vh 0 10vh}
.contact-intro>p:last-child{max-width:500px;color:var(--muted);line-height:1.75;margin-top:30px}
.contact-list{border-top:1px solid var(--line)}
.contact-list a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"small arrow" "strong arrow";gap:7px 25px;padding:26px 10px;border-bottom:1px solid var(--line);text-decoration:none;transition:.2s}
.contact-list a:hover{padding-left:20px;background:rgba(9,138,255,.035)}
.contact-list small{grid-area:small;color:var(--blue2);font-size:.59rem;letter-spacing:.17em}
.contact-list strong{grid-area:strong;font-size:clamp(.95rem,1.5vw,1.25rem);overflow-wrap:anywhere}
.contact-list span{grid-area:arrow;align-self:center;color:var(--blue2);font-size:1.2rem}
.legal-footer{position:absolute;left:0;right:0;bottom:3.5vh;display:flex;justify-content:space-between;gap:25px;color:#6f7983;font-size:.67rem}
.legal-footer div{display:flex;gap:24px}.legal-footer a{text-decoration:none;color:#83909b}.legal-footer a:hover{color:var(--blue2)}
.swipe-hint{position:fixed;z-index:90;bottom:14px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:12px;color:#6d7b87;font-size:.56rem;letter-spacing:.14em;pointer-events:none}
.swipe-hint span{color:var(--blue2);font-size:.9rem}
@media(max-width:1000px){
  :root{--header:72px}
  .site-header{padding:0 22px}
  .brand{min-width:0}.brand-mark{width:36px;height:36px}
  .slide-counter{display:none}
  .menu-toggle{display:block;margin-left:auto}
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;height:auto;background:rgba(2,5,8,.98);padding:8px 24px 17px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .nav-links a{height:auto;padding:13px 0}
  .nav-links a.active:after{display:none}
  .slide{overflow-y:auto}
  .slide-inner{width:min(92vw,850px);height:auto;min-height:100%}
  .hero-grid{grid-template-columns:1fr;padding:38px 0 90px;text-align:center}
  .portrait-stage{order:-1;width:min(330px,72vw)}
  .hero-copy{padding-left:0}.eyebrow{margin-bottom:18px}
  .hero h1{font-size:clamp(3.2rem,13vw,5.3rem)}
  .accent-line,.instagram-btn{margin-left:auto;margin-right:auto}
  .claim{font-size:.82rem;letter-spacing:.17em}
  .hud,.corner{display:none}
  .panel-content{padding:55px 0 95px;justify-content:flex-start}
  .panel-heading{grid-template-columns:1fr;gap:18px;margin-bottom:35px}
  .panel-heading>p{justify-self:start}
  .services-grid{grid-template-columns:1fr}
  .service-card{min-height:230px}
  .references-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:15px;padding-bottom:12px}
  .reference-card{flex:0 0 82vw;max-width:600px;scroll-snap-align:start}
  .video-wrap{height:330px}
  .about-grid,.contact-layout{grid-template-columns:1fr;padding:55px 0 100px;gap:45px}
  .about-photo-frame{width:100%;max-width:420px;height:190px}
  .legal-footer{position:static;margin-top:30px;padding-top:25px;border-top:1px solid var(--line);flex-direction:column}
  .swipe-hint{display:flex}
  .next-slide{bottom:23px}
}
@media(max-width:560px){
  .brand>span:last-child{display:none}
  .hero-grid{padding-top:30px}
  .portrait-stage{width:min(280px,76vw)}
  .hero h1{font-size:clamp(2.9rem,16vw,4.3rem)}
  .panel-heading h2,.contact-intro h2{font-size:clamp(3rem,14vw,4.8rem)}
  .video-wrap{height:260px}
  .reference-card{flex-basis:88vw}
  .next-slide{display:none}
}


/* HOME – größere Darstellung wie in der ursprünglichen Version */
@media (min-width: 1001px) {
  .hero-grid {
    grid-template-columns: 1.15fr .85fr;
    gap: 2vw;
  }

  .hero-copy {
    padding-left: 2vw;
  }

  .hero h1 {
    font-size: clamp(5.7rem, 8.8vw, 9.4rem);
    line-height: .84;
    letter-spacing: -.06em;
  }

  .hero h1 strong {
    margin-top: 18px;
  }

  .hero .eyebrow {
    font-size: .76rem;
    margin-bottom: 28px;
  }

  .hero .accent-line {
    width: 225px;
    margin: 32px 0 26px;
  }

  .hero .claim {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    letter-spacing: .25em;
  }

  .hero .instagram-btn {
    margin-top: 34px;
    padding: 17px 23px;
    font-size: .82rem;
  }

  .portrait-stage {
    width: min(620px, 45vw);
  }

  .portrait {
    width: 72%;
    height: 72%;
  }
}

@media (max-width: 1000px) {
  .hero-grid {
    padding-top: 24px;
  }

  .portrait-stage {
    width: min(360px, 76vw);
  }

  .hero h1 {
    font-size: clamp(4rem, 15vw, 6rem);
    line-height: .83;
  }

  .hero .eyebrow {
    font-size: .7rem;
  }

  .hero .claim {
    font-size: clamp(.86rem, 3.2vw, 1.05rem);
  }
}

@media (max-width: 560px) {
  .portrait-stage {
    width: min(300px, 79vw);
  }

  .hero h1 {
    font-size: clamp(3.45rem, 17vw, 5rem);
  }

  .hero .claim {
    letter-spacing: .13em;
  }
}


/* HOME – EXTRA GROSS */
@media (min-width: 1001px) {
  .hero-grid {
    grid-template-columns: 1.32fr .68fr !important;
    gap: 0 !important;
  }

  .hero-copy {
    padding-left: 0 !important;
    transform: translateX(-1vw);
  }

  .hero h1 {
    font-size: clamp(7.4rem, 11.2vw, 12rem) !important;
    line-height: .78 !important;
    letter-spacing: -.065em !important;
    white-space: nowrap;
  }

  .hero h1 strong {
    margin-top: 25px !important;
  }

  .hero .eyebrow {
    font-size: .86rem !important;
    margin-bottom: 34px !important;
  }

  .hero .accent-line {
    width: 300px !important;
    height: 3px !important;
    margin: 40px 0 30px !important;
  }

  .hero .claim {
    font-size: clamp(1.18rem, 1.8vw, 1.55rem) !important;
    line-height: 1.65 !important;
    letter-spacing: .23em !important;
  }

  .hero .instagram-btn {
    margin-top: 38px !important;
    padding: 19px 26px !important;
    font-size: .9rem !important;
  }

  .portrait-stage {
    width: min(660px, 42vw) !important;
    transform: translateX(2vw);
  }

  .portrait {
    width: 74% !important;
    height: 74% !important;
  }
}

@media (max-width: 1000px) {
  .hero h1 {
    font-size: clamp(5rem, 19vw, 7.3rem) !important;
    line-height: .78 !important;
    letter-spacing: -.055em !important;
  }

  .hero .eyebrow {
    font-size: .76rem !important;
  }

  .hero .claim {
    font-size: clamp(.98rem, 3.7vw, 1.25rem) !important;
    line-height: 1.65 !important;
  }

  .portrait-stage {
    width: min(390px, 82vw) !important;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: clamp(4.1rem, 20vw, 6.1rem) !important;
  }

  .portrait-stage {
    width: min(320px, 82vw) !important;
  }

  .hero .claim {
    letter-spacing: .10em !important;
  }
}


/* HOME Name exakt auf die Größenwirkung der LEISTUNGEN-Überschrift abstimmen */
@media (min-width: 1001px) {
  .hero h1 {
    font-size: clamp(3.5rem, 6.7vw, 6.8rem) !important;
    line-height: .86 !important;
    letter-spacing: -.05em !important;
    white-space: normal !important;
  }

  .hero h1 strong {
    margin-top: 12px !important;
  }
}

@media (max-width: 1000px) {
  .hero h1 {
    font-size: clamp(3.5rem, 12vw, 6.8rem) !important;
    line-height: .86 !important;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: clamp(3.2rem, 14vw, 5rem) !important;
  }
}


/* FINAL HOME TYPOGRAPHY OVERRIDE – sichtbar deutlich größer */
@media (min-width: 1001px) {
  #home .hero-copy h1,
  #home h1 {
    font-size: clamp(5.4rem, 8vw, 8.2rem) !important;
    line-height: .82 !important;
    letter-spacing: -.055em !important;
    max-width: none !important;
  }

  #home .hero-copy h1 strong {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  #home .hero-copy .eyebrow {
    font-size: 1rem !important;
    letter-spacing: .22em !important;
    margin-bottom: 30px !important;
  }

  #home .hero-copy .claim {
    font-size: clamp(1.35rem, 1.8vw, 1.7rem) !important;
    line-height: 1.65 !important;
    letter-spacing: .22em !important;
  }

  #home .hero-copy .instagram-btn {
    font-size: 1rem !important;
    padding: 20px 28px !important;
    margin-top: 36px !important;
  }

  #home .hero-copy .accent-line {
    width: 240px !important;
    height: 3px !important;
    margin: 34px 0 28px !important;
  }

  #home .hero-copy {
    padding-left: 0 !important;
    width: 115% !important;
  }
}

@media (max-width: 1000px) {
  #home .hero-copy h1,
  #home h1 {
    font-size: clamp(4.2rem, 16vw, 6.6rem) !important;
    line-height: .82 !important;
  }

  #home .hero-copy .eyebrow {
    font-size: .82rem !important;
  }

  #home .hero-copy .claim {
    font-size: clamp(1rem, 4vw, 1.3rem) !important;
  }

  #home .hero-copy .instagram-btn {
    font-size: .9rem !important;
    padding: 18px 24px !important;
  }
}


/* Leistungen: Überschrift bewusst kleiner */
@media (min-width: 1001px) {
  #leistungen .panel-heading h2 {
    font-size: clamp(3.1rem, 4.7vw, 4.9rem) !important;
    line-height: .9 !important;
  }
  #leistungen .panel-heading {
    margin-bottom: 4vh !important;
  }

  /* Referenzen: Überschrift ebenfalls kleiner */
  #referenzen .panel-heading h2 {
    font-size: clamp(3.1rem, 4.7vw, 4.9rem) !important;
    line-height: .9 !important;
  }

  /* Referenzen: Aftermovie links groß, rechts zwei halbhohe Projekte übereinander */
  #referenzen .references-grid {
    display: grid !important;
    grid-template-columns: 1.35fr .65fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 16px !important;
    height: min(62vh, 610px) !important;
    overflow: visible !important;
  }

  #referenzen .reference-card {
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #referenzen .reference-card:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  #referenzen .reference-card:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #referenzen .reference-card:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #referenzen .reference-card:nth-child(1) .video-wrap {
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  #referenzen .reference-card:nth-child(2) .video-wrap,
  #referenzen .reference-card:nth-child(3) .video-wrap {
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  #referenzen .video-wrap video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #referenzen .reference-meta {
    flex: 0 0 auto !important;
  }

  #referenzen .reference-card:nth-child(2) .reference-meta,
  #referenzen .reference-card:nth-child(3) .reference-meta {
    padding: 11px 15px 13px !important;
  }

  #referenzen .reference-card:nth-child(2) .reference-meta h3,
  #referenzen .reference-card:nth-child(3) .reference-meta h3 {
    font-size: .92rem !important;
    margin-top: 5px !important;
  }

  #referenzen .reference-card:nth-child(2) .reference-meta span,
  #referenzen .reference-card:nth-child(3) .reference-meta span {
    font-size: .5rem !important;
  }
}


/* HOME – ausgewogene mittlere Größe */
@media (min-width: 1001px) {
  #home .hero-copy h1,
  #home h1 {
    font-size: clamp(4.4rem, 6.4vw, 6.7rem) !important;
    line-height: .84 !important;
  }

  #home .hero-copy .eyebrow {
    font-size: .82rem !important;
  }

  #home .hero-copy .claim {
    font-size: clamp(1.08rem, 1.45vw, 1.35rem) !important;
  }

  #home .hero-copy .instagram-btn {
    font-size: .88rem !important;
    padding: 17px 23px !important;
    margin-top: 32px !important;
  }

  #home .hero-copy .accent-line {
    width: 205px !important;
    height: 2px !important;
    margin: 30px 0 25px !important;
  }
}


/* FINAL: WIENERROITHER blau + Leistungen/Referenzen exakt gleiche Überschriftenhöhe */
#home .hero-copy h1 strong {
  color: var(--blue) !important;
}

@media (min-width: 1001px) {
  #leistungen .panel-content,
  #referenzen .panel-content {
    padding-top: 5vh !important;
    justify-content: flex-start !important;
  }

  #leistungen .panel-heading,
  #referenzen .panel-heading {
    margin-top: 0 !important;
    margin-bottom: 3.5vh !important;
    align-items: end !important;
  }

  #leistungen .panel-heading .eyebrow,
  #referenzen .panel-heading .eyebrow {
    margin-top: 0 !important;
    margin-bottom: 25px !important;
  }

  #leistungen .panel-heading h2,
  #referenzen .panel-heading h2 {
    font-size: clamp(3.1rem, 4.7vw, 4.9rem) !important;
    line-height: .9 !important;
    margin: 0 !important;
  }
}


/* LEGAL PAGES – abgestimmt auf das horizontale Portfolio */
.legal-body {
  min-height: 100vh;
  overflow: auto;
  background:
    radial-gradient(circle at 80% 10%, rgba(9,138,255,.08), transparent 28rem),
    linear-gradient(180deg, #020508, #050a0f 55%, #020508);
  color: var(--text);
}

.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 min(5vw, 72px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(2,5,8,.92);
  backdrop-filter: blur(16px);
}

.legal-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.legal-brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-weight: 800;
  letter-spacing: -.04em;
}

.legal-brand > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.legal-brand b {
  font-size: .95rem;
}

.legal-brand small {
  margin-top: 5px;
  color: #8f9aa5;
  font-size: .51rem;
  letter-spacing: .11em;
}

.legal-home {
  text-decoration: none;
  color: var(--blue2);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.legal-home span {
  margin-left: 8px;
  font-size: .9rem;
}

.legal-page {
  min-height: calc(100vh - 72px);
  padding: 70px 0 90px;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 52px 52px;
}

.legal-shell {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
}

.legal-hero {
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.legal-eyebrow {
  margin: 0 0 12px;
  color: var(--blue2);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
}

.legal-hero h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 4.2rem);
  line-height: .95;
  letter-spacing: -.04em;
}

.legal-hero h1 span {
  color: var(--blue);
}

.legal-sub {
  margin: 14px 0 0;
  color: #7f8b96;
  font-size: .82rem;
  line-height: 1.6;
}

.legal-content {
  display: grid;
  gap: 0;
}

.legal-content h2 {
  margin: 0;
  padding-top: 30px;
  color: #f4f7fa;
  font-size: .98rem;
  letter-spacing: .01em;
}

.legal-content h2::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: 11px;
  vertical-align: middle;
  background: var(--blue);
}

.legal-content p,
.legal-content li {
  color: #a6b0ba;
  font-size: .86rem;
  line-height: 1.72;
}

.legal-content p {
  margin: 10px 0 0;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.legal-content ul,
.legal-content ol {
  margin-top: 10px;
  padding-left: 19px;
}

.legal-content a {
  color: var(--blue2);
  text-decoration: none;
  border-bottom: 1px solid rgba(53,168,255,.32);
}

.legal-content a:hover {
  border-bottom-color: var(--blue2);
}

.legal-warning {
  margin: 0 0 24px !important;
  padding: 15px 17px !important;
  border: 1px solid rgba(53,168,255,.22) !important;
  border-left: 2px solid var(--blue) !important;
  background: rgba(9,138,255,.045) !important;
  color: #91a0ae !important;
  font-size: .78rem !important;
  line-height: 1.6 !important;
}

.placeholder {
  display: inline;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: inherit !important;
}

.legal-bottom {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #65717c;
  font-size: .63rem;
  letter-spacing: .05em;
}

.legal-bottom a {
  color: var(--blue2);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .09em;
}

@media (max-width: 640px) {
  .legal-topbar {
    padding: 0 16px;
  }

  .legal-brand > span:last-child {
    display: none;
  }

  .legal-page {
    padding: 48px 0 70px;
  }

  .legal-shell {
    width: min(100% - 28px, 920px);
  }

  .legal-hero h1 {
    font-size: clamp(2.4rem, 12vw, 3.6rem);
  }

  .legal-content h2 {
    font-size: .92rem;
  }

  .legal-content p,
  .legal-content li {
    font-size: .82rem;
  }

  .legal-bottom {
    flex-direction: column;
  }
}


/* =========================
   ANIMATION TESTVERSION
   ========================= */

:root {
  --ease-cine: cubic-bezier(.22,.8,.2,1);
}

/* Slide-Inhalte starten leicht versetzt und werden aktiv eingeblendet */
.slide .slide-inner {
  opacity: .28;
  transform: translateX(28px) scale(.992);
  transition:
    opacity .7s var(--ease-cine),
    transform .85s var(--ease-cine);
}

.slide.is-active .slide-inner {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Home-Text */
#home .hero-copy > * {
  opacity: 0;
  transform: translateY(22px);
}

#home.is-active .hero-copy > * {
  animation: homeReveal .75s var(--ease-cine) forwards;
}

#home.is-active .hero-copy .eyebrow { animation-delay: .05s; }
#home.is-active .hero-copy h1 { animation-delay: .12s; }
#home.is-active .hero-copy .accent-line { animation-delay: .22s; }
#home.is-active .hero-copy .claim { animation-delay: .28s; }
#home.is-active .hero-copy .instagram-btn { animation-delay: .36s; }

@keyframes homeReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Blaue Linie zeichnet sich auf */
#home .accent-line {
  transform-origin: left center;
  transform: scaleX(.05);
}

#home.is-active .accent-line {
  animation:
    homeReveal .6s var(--ease-cine) forwards,
    lineDraw .8s .2s var(--ease-cine) forwards;
}

@keyframes lineDraw {
  to { transform: scaleX(1); }
}

/* Profilbild sehr subtil "atmet" */
#home .portrait-stage {
  transition: transform .8s var(--ease-cine), filter .8s var(--ease-cine);
}

#home.is-active .portrait-stage {
  animation: portraitFloat 6s ease-in-out infinite;
}

@keyframes portraitFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.01); }
}

/* Lens rings sanft rotieren */
#home .r2 {
  animation: ringRotate 18s linear infinite;
}
#home .r3 {
  animation: ringRotateReverse 24s linear infinite;
}

@keyframes ringRotate {
  to { transform: rotate(360deg); }
}
@keyframes ringRotateReverse {
  to { transform: rotate(-360deg); }
}

/* Überschriften in Leistungen/Referenzen/About/Kontakt */
#leistungen .panel-heading,
#referenzen .panel-heading,
#ueber-mich .about-title,
#kontakt .contact-intro {
  opacity: 0;
  transform: translateY(24px);
}

#leistungen.is-active .panel-heading,
#referenzen.is-active .panel-heading,
#ueber-mich.is-active .about-title,
#kontakt.is-active .contact-intro {
  animation: sectionReveal .72s var(--ease-cine) forwards;
}

@keyframes sectionReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Karten nacheinander */
#leistungen .service-card,
#referenzen .reference-card,
#kontakt .contact-list a {
  opacity: 0;
  transform: translateY(22px) scale(.985);
}

#leistungen.is-active .service-card,
#referenzen.is-active .reference-card,
#kontakt.is-active .contact-list a {
  animation: cardReveal .65s var(--ease-cine) forwards;
}

#leistungen.is-active .service-card:nth-child(1),
#referenzen.is-active .reference-card:nth-child(1),
#kontakt.is-active .contact-list a:nth-child(1) { animation-delay: .12s; }

#leistungen.is-active .service-card:nth-child(2),
#referenzen.is-active .reference-card:nth-child(2),
#kontakt.is-active .contact-list a:nth-child(2) { animation-delay: .22s; }

#leistungen.is-active .service-card:nth-child(3),
#referenzen.is-active .reference-card:nth-child(3),
#kontakt.is-active .contact-list a:nth-child(3) { animation-delay: .32s; }

@keyframes cardReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* About Text */
#ueber-mich .about-copy {
  opacity: 0;
  transform: translateX(26px);
}

#ueber-mich.is-active .about-copy {
  animation: aboutCopyReveal .8s .12s var(--ease-cine) forwards;
}

@keyframes aboutCopyReveal {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Buttons / Cards etwas lebendiger */
.service-card,
.reference-card,
.instagram-btn,
.contact-list a {
  transition:
    transform .28s var(--ease-cine),
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease;
}

.service-card:hover,
.reference-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 55px rgba(0,0,0,.28);
}

/* Menüindikator gleitet */
.nav-links a::after {
  transition: transform .35s var(--ease-cine), opacity .35s ease;
  transform-origin: center;
}

/* Respektiert reduzierte Bewegungen im Betriebssystem */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* HOME Profilbild: leicht dunkler, Gesichtsschatten bleiben sichtbar */
#home .portrait {
  filter: brightness(1.04) contrast(1.02) saturate(.76) !important;
}

/* HOME Profilbild: etwas heller + mehr Kontrast */
#home .portrait {
  filter: brightness(1.10) contrast(1.10) saturate(.80) !important;
}

/* HOME Profilbild: weniger Kontrast, Augen-/Gesichtsschatten heller */
#home .portrait {
  filter: brightness(1.12) contrast(1.025) saturate(.79) !important;
}

/* sehr dezente Aufhellung im oberen Gesichtsbereich */
#home .portrait-stage::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: 52%;
  height: 34%;
  left: 24%;
  top: 25%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,.055) 0%,
    rgba(255,255,255,.025) 42%,
    rgba(255,255,255,0) 72%
  );
  mix-blend-mode: screen;
}

/* HOME Profilbild: natürlicher, weniger Kontrast, Augenbereich heller */
#home .portrait {
  filter: brightness(1.13) contrast(.97) saturate(.80) !important;
}

/* Augen-/Schattenbereich sanfter aufhellen */
#home .portrait-stage::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: 48%;
  height: 27%;
  left: 26%;
  top: 27%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,.075) 0%,
    rgba(255,255,255,.035) 38%,
    rgba(255,255,255,0) 72%
  );
  mix-blend-mode: screen;
}


/* Neues Profilbild – weniger Zoom, mehr Hintergrund sichtbar */
#home .portrait {
  width: 64% !important;
  height: 64% !important;
  object-fit: cover !important;
  object-position: 50% 45% !important;
  filter: none !important;
}

/* =========================================================
   MOBILE RESPONSIVE PATCH – 2026-08-25
   Hält das Desktop-Design unverändert und verhindert auf
   Smartphones übergroße/cropped Inhalte.
   ========================================================= */

html, body {
  max-width: 100%;
}

/* Die Slides übernehmen auf modernen Mobilbrowsern die echte
   sichtbare Höhe des Tracks statt einer problematischen 100vh-Höhe. */
.horizontal-track {
  max-width: 100vw;
}

.slide {
  max-width: 100vw;
}

@supports (height: 100dvh) {
  @media (max-width: 1000px) {
    .horizontal-track {
      height: calc(100dvh - var(--header));
      bottom: auto;
    }
    .slide {
      height: 100%;
      min-height: 100%;
    }
  }
}

@media (max-width: 560px) {
  .site-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .slide-inner {
    width: calc(100vw - 32px);
    max-width: 100%;
  }

  /* Home: gleiche Optik, aber auf kleinen Displays vollständig sichtbar. */
  #home .hero-grid {
    padding: 18px 0 72px;
    gap: 10px;
  }

  #home .portrait-stage {
    width: min(250px, 64vw) !important;
  }

  #home .hero-copy h1,
  #home h1 {
    font-size: clamp(2.55rem, 12.8vw, 3.85rem) !important;
    line-height: .86 !important;
    letter-spacing: -.045em !important;
    max-width: 100% !important;
    overflow-wrap: normal;
  }

  #home .hero-copy .eyebrow {
    font-size: .66rem !important;
    margin-bottom: 14px !important;
  }

  #home .hero-copy .claim {
    font-size: clamp(.76rem, 3.4vw, .96rem) !important;
    line-height: 1.55 !important;
    letter-spacing: .09em !important;
  }

  #home .hero-copy .accent-line {
    width: 145px !important;
    margin: 20px auto 17px !important;
  }

  #home .hero-copy .instagram-btn {
    margin-top: 22px !important;
    padding: 13px 17px !important;
    font-size: .75rem !important;
  }

  /* Unterseiten: Überschriften dürfen nie über den Viewport hinausragen. */
  .panel-heading h2,
  .contact-intro h2,
  .about-title h2 {
    font-size: clamp(2.5rem, 12vw, 3.8rem) !important;
    line-height: .92 !important;
    overflow-wrap: break-word;
  }

  .panel-content,
  .about-grid,
  .contact-layout {
    padding-left: 0;
    padding-right: 0;
  }

  .service-card {
    padding: 28px 24px;
  }

  #referenzen .references-grid {
    width: 100%;
  }

  #referenzen .reference-card {
    flex: 0 0 calc(100vw - 44px);
    max-width: calc(100vw - 44px);
  }

  #referenzen .video-wrap {
    height: min(58vw, 245px);
  }

  .about-copy p {
    font-size: .94rem;
    line-height: 1.68;
  }

  .contact-list a {
    padding-left: 4px;
    padding-right: 4px;
    gap: 7px 14px;
  }

  .contact-list strong {
    font-size: .92rem;
    max-width: calc(100vw - 78px);
    overflow-wrap: anywhere;
  }

  .swipe-hint {
    bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* Sehr kleine/kurze Smartphones: zusätzlich vertikal Luft schaffen. */
@media (max-width: 390px), (max-width: 560px) and (max-height: 720px) {
  #home .portrait-stage {
    width: min(210px, 55vw) !important;
  }

  #home .hero-grid {
    padding-top: 12px;
    padding-bottom: 54px;
  }

  #home .hero-copy h1,
  #home h1 {
    font-size: clamp(2.3rem, 11.8vw, 3.35rem) !important;
  }

  #home .hero-copy .eyebrow {
    margin-bottom: 10px !important;
  }

  #home .hero-copy .accent-line {
    margin-top: 15px !important;
    margin-bottom: 13px !important;
  }

  #home .hero-copy .instagram-btn {
    margin-top: 16px !important;
  }
}