/* ==========================================================================
   FUNDAMENT – Website
   Struktur dieser Datei:
   1. Schrift & Variablen   2. Grundlagen   3. Header & Navigation
   4. Hero   5. Über uns   6. Leistungen   7. Referenzen   8. Stimmen
   9. Kontakt   10. Footer   11. Animationen   12. Mobile Anpassungen
   Design-Regeln: eckige Formen (kein border-radius), Gold #c2a465, Oswald überall.
   ========================================================================== */

/* 1. Schrift & Variablen ------------------------------------------------- */
@font-face{font-family:"Oswald";font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/oswald-latin-variable.woff2) format("woff2");}
@font-face{font-family:"Oswald";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/oswald-latin-variable.woff2) format("woff2");}
@font-face{font-family:"Oswald";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/oswald-latin-variable.woff2) format("woff2");}
@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/oswald-latin-variable.woff2) format("woff2");}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/oswald-latin-variable.woff2) format("woff2");}

:root{
  --gold:#c2a465;
  --gold-light:#f0dfb0;
  --gold-dark:#8a7038;
  --gold-hover:#d8bd85;
  --bg:#0a0a0a;
  --panel:#101014;
  --card:#18181c;
  --ref-bg:#141517;
  --line:rgba(194,164,101,.15);
  --text:#fff;
  --text-soft:#d0d1db;
  --muted:rgba(255,255,255,.62);
  --header-h:83px;
  --container:1360px;
  --gutter:40px;
}

/* 2. Grundlagen ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;border-radius:0;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%;overflow-anchor:none;}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Oswald",sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;}
button,input,textarea{font:inherit;color:inherit;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--panel);padding:10px 16px;font-weight:600;}
.skip-link:focus{top:12px;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* Goldener Verlauf mit Schimmer (Headlines, Wortmarke) */
.gold{
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 25%,var(--gold) 50%,var(--gold-dark) 75%,var(--gold) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shimmer 1.8s linear infinite;
}
@keyframes shimmer{from{background-position:0% center;}to{background-position:200% center;}}

/* Schaltflächen */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:20px 46px;background:var(--gold);color:var(--panel);
  font-size:16.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  border:0;cursor:pointer;
  transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.btn:hover{background:var(--gold-hover);transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(194,164,101,.5);}
.btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;}

/* Section-Überschriften */
.section-title{font-size:clamp(40px,5.6vw,82px);font-weight:500;line-height:1.1;letter-spacing:-.02em;}

/* 3. Header & Navigation ------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--panel);}
.header-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
}
.logo{justify-self:start;display:block;}
.logo img{height:36px;width:auto;}
.nav{display:flex;align-items:center;gap:20px;}
.nav a,.mobile-menu a.mm-link{
  position:relative;padding:10px;font-size:18px;line-height:1;letter-spacing:-.1px;color:var(--text);
  transition:color .25s ease;
}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .3s ease;}
.nav a:hover{color:var(--gold);}
.nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.header-contact{justify-self:end;display:flex;align-items:center;gap:6px;}
.pill{
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-width:32px;height:32px;padding:7px;color:var(--gold);
  font-size:14.5px;font-weight:500;letter-spacing:.02em;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease;
}
.pill svg{width:15px;height:15px;flex:none;}
.pill span{display:none;line-height:1;}
.pill:hover{background:var(--gold);color:var(--panel);}
@media (min-width:1440px){.pill{padding:7px 12px;}.pill span{display:inline;}}

.menu-toggle{display:none;}
.mobile-menu{display:none;}

/* 4. Hero ---------------------------------------------------------------- */
.hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));
  padding:140px 40px 80px;
  background:linear-gradient(rgba(8,8,8,.5),rgba(8,8,8,.75)),url(../assets/img/bg-beton.jpg) center/cover no-repeat;
}
.hero-inner{width:100%;max-width:1200px;margin:0 auto;}
.hero-sub{font-size:24px;font-weight:500;line-height:1.3;letter-spacing:.12em;white-space:nowrap;color:rgba(255,255,255,.5);margin-bottom:24px;}
.hero h1{font-size:clamp(40px,4.5vw,64px);font-weight:700;line-height:1.15;letter-spacing:-.015em;}

/* 5. Über uns ------------------------------------------------------------ */
.about{background:var(--bg);padding:48px 0 0;overflow:hidden;}
.about-inner{padding:0 clamp(24px,3.4vw,48px);}
.about h2{font-size:clamp(40px,5.6vw,82px);font-weight:500;line-height:1.1;letter-spacing:-.02em;margin-bottom:28px;}
.reveal-text{font-size:clamp(20px,4.5vw,46px);font-weight:600;line-height:1.3;letter-spacing:-.04em;hyphens:auto;overflow-wrap:break-word;margin-bottom:10px;}
.reveal-text .w{opacity:.12;color:#d0d1db;transition:opacity .25s ease,color .25s ease;}
.about-cta{display:flex;justify-content:center;padding:36px 0 8px;}

/* Team-Banner: Wortmarke + Personen (Größen setzt js/main.js) */
.people-banner{position:relative;margin-top:5px;padding-top:15px;padding-bottom:16vw;overflow:hidden;}
.wordmark{
  display:block;width:100%;white-space:nowrap;text-align:left;user-select:none;
  font-weight:700;font-size:min(24vw,340px);line-height:1;
  animation-duration:3.6s;
}
.people-row{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,3.6vw,56px);
  border-bottom:1px solid var(--gold);pointer-events:none;
}
.person{position:relative;display:flex;align-items:flex-end;pointer-events:auto;z-index:1;transition:transform .35s ease;}
.person:hover{z-index:3;}
.person img{position:relative;z-index:1;height:33vw;width:auto;object-fit:contain;object-position:bottom;transform-origin:50% 100%;transition:transform .35s ease,filter .35s ease;}
.person:first-child img{transform-origin:0 100%;}
.person:last-child img{transform-origin:100% 100%;}
.person:hover img{transform:scale(1.07);animation:person-glow 1.8s ease-in-out infinite;}
/* Nur der Umriss der Person schimmert golden (Filter folgt der Silhouette) */
@keyframes person-glow{
  0%,100%{filter:drop-shadow(0 0 2px rgba(194,164,101,.3));}
  50%{filter:drop-shadow(0 0 4px rgba(240,223,176,.6));}
}
.person-label{
  position:absolute;bottom:41%;left:100%;margin-left:18px;z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap;
  opacity:0;transform:translateX(-6px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.person:hover .person-label,.person:focus-within .person-label{opacity:1;transform:translateX(0);}
.person-name{font-size:19px;line-height:1.1;font-weight:600;letter-spacing:.02em;color:#fff;}
.person-rule{display:block;align-self:flex-start;width:0;height:1px;margin-left:-92px;background:var(--gold);transition:width .45s ease .05s;}
.person:hover .person-rule,.person:focus-within .person-rule{width:var(--rule-w,150px);}
.person-role{font-size:19px;line-height:1.1;letter-spacing:.02em;color:var(--gold);}
.person--flip .person-label{left:auto;right:100%;margin-left:0;margin-right:18px;align-items:flex-start;transform:translateX(6px);}
.person--flip:hover .person-label,.person--flip:focus-within .person-label{transform:translateX(0);}
.person--flip .person-rule{align-self:flex-end;margin-left:0;margin-right:-92px;}

/* 6. Leistungen ---------------------------------------------------------- */
.services{
  overflow-x:clip;padding:90px 0 72px;
  background:linear-gradient(to bottom,#060606 0,rgba(6,6,6,.68) 220px,rgba(6,6,6,.68) 100%),url(../assets/img/bg-beton.jpg) center/cover no-repeat;
}
.services .section-title{text-align:center;margin-bottom:104px;}
.ref-tile:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 24px 48px -12px rgba(194,164,101,.28);}

/* Leistungen als große Zeilen: Nummer | Titel + Stichpunkte | Mockup */
.service-list{display:flex;flex-direction:column;gap:clamp(40px,6vw,88px);}
/* Abwechselnd: Mockup links/Text rechts, dann Text links/Mockup rechts.
   Jede Zeile ist ein Block (links bzw. rechts am Rand) mit immer gleichem Abstand zwischen Mockup und Text.
   --ink / --left: sichtbarer Anteil des Mockups an seiner Zeichenfläche (damit der Abstand zur sichtbaren Kante gilt). */
.service-row{
  container-type:inline-size;
  display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;
  gap:clamp(32px,7.4vw,107px);
}
.service-row:nth-child(even){flex-direction:row;justify-content:flex-end;}
.service-row .service-text{flex:0 1 auto;max-width:680px;min-width:0;}
.service-visual{--ink:.92;--left:.04;flex:none;width:calc(38cqw * var(--ink));}
.service-row:nth-child(2) .service-visual{--ink:.624;--left:.186;}
.service-row:nth-child(3) .service-visual{--ink:.81;--left:.10;}
.service-visual .mock{width:calc(100% / var(--ink));margin-left:calc(var(--left) / var(--ink) * -100%);}
.service-text h3{
  font-size:clamp(46px,6.4vw,100px);font-weight:500;line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:2px var(--gold);transition:color .4s ease;
}
.service-row:hover .service-text h3{color:var(--gold);}
.service-text h3{margin-bottom:22px;}
/* Aufklappbare Unterpunkte: Plus-Button unter dem Titel, Wörter bündig mit dem Titel */
.service-toggle{
  position:relative;display:block;width:40px;height:40px;padding:0;cursor:pointer;
  background:none;border:1px solid rgba(194,164,101,.5);color:var(--gold);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.service-toggle:hover{background:var(--gold);color:var(--panel);border-color:var(--gold);}
.service-toggle-icon::before,.service-toggle-icon::after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:currentColor;
  transition:transform .3s ease;
}
.service-toggle-icon::after{transform:rotate(90deg);}
.service-row.is-open .service-toggle-icon::after{transform:rotate(0deg);}
.service-details{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease;}
.service-row.is-open .service-details{grid-template-rows:1fr;}
.service-details-inner{overflow:hidden;visibility:hidden;transition:visibility 0s .4s;}
.service-row.is-open .service-details-inner{visibility:visible;transition-delay:0s;}
.service-text ul{list-style:none;margin:0;padding:22px 0 0;}
.service-text li{padding:6px 0;font-size:20px;line-height:1.4;color:rgba(255,255,255,.85);}
.service-visual{transition:transform .5s ease;}
.service-row:hover .service-visual{transform:translateY(-8px);}

/* Mockups: reine HTML/CSS-Grafiken, skalieren über Container-Einheiten (cqw) */
.mock{position:relative;aspect-ratio:16/10;container-type:inline-size;}
/* Laptop im Stil eines modernen Notebooks: dünner Rahmen, Kamera-Aussparung, Alu-Gehäuse mit Griffmulde (bewusst ohne Marken- oder Logo-Elemente) */
.laptop{position:absolute;left:50%;top:50%;width:84cqw;transform:translate(-50%,-52%);filter:drop-shadow(0 3cqw 3.4cqw rgba(0,0,0,.6));}
.laptop-screen{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:#000;
  border:.75cqw solid #050506;border-radius:1.6cqw 1.6cqw 0 0;
  box-shadow:0 0 0 .3cqw #6a6c73,0 0 0 .45cqw #34353a;
}
.laptop-screen::after{content:"";position:absolute;left:50%;top:0;width:7cqw;height:1.25cqw;margin-left:-3.5cqw;background:#050506;border-radius:0 0 .8cqw .8cqw;}
.laptop-screen img{width:100%;height:100%;object-fit:cover;object-position:top;}
.laptop-base{
  position:relative;height:1.7cqw;margin:.45cqw -3.2cqw 0;
  background:linear-gradient(#c3c5ca,#8d8f96 55%,#6a6c73);
  border-radius:0 0 2.4cqw 2.4cqw/0 0 1.4cqw 1.4cqw;
}
.laptop-base::before{content:"";position:absolute;left:50%;top:0;width:13cqw;height:.7cqw;margin-left:-6.5cqw;background:linear-gradient(#5a5c62,#8d8f96);border-radius:0 0 1cqw 1cqw;}
/* Handys im Stil aktueller Smartphones: abgerundetes Metallgehäuse, schmaler Rand, Kamera-Insel, Seitentasten (ohne Marken-Elemente) */
.phone{
  position:absolute;width:27cqw;aspect-ratio:9/19.3;background:#08080a;border:.45cqw solid #08080a;border-radius:5cqw;
  box-shadow:0 0 0 .32cqw #7a7c83,0 0 0 .5cqw #2d2e33,0 2.6cqw 3.4cqw rgba(0,0,0,.6);
}
.phone--back{left:21cqw;top:3.5cqw;transform:rotate(-7deg) scale(.94);}
.phone--front{left:52cqw;top:1.5cqw;transform:rotate(4deg);}
.phone::before{content:"";position:absolute;left:-.95cqw;top:11cqw;width:.45cqw;height:3.4cqw;background:#6a6c73;border-radius:.3cqw 0 0 .3cqw;box-shadow:0 5.2cqw 0 #6a6c73,0 9.4cqw 0 #6a6c73,0 -4cqw 0 -.05cqw #6a6c73;}
.phone::after{content:"";position:absolute;right:-.95cqw;top:16cqw;width:.45cqw;height:6.2cqw;background:#6a6c73;border-radius:0 .3cqw .3cqw 0;}
.phone-screen{position:relative;width:100%;height:100%;background:#0d0d10;border-radius:4.5cqw;overflow:hidden;}
.phone-screen::before{content:"";position:absolute;left:50%;top:1.1cqw;width:8.2cqw;height:2.3cqw;margin-left:-4.1cqw;border-radius:1.2cqw;background:#000;z-index:3;}
.phone-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.story-bars{position:absolute;left:2.2cqw;right:2.2cqw;top:4.6cqw;display:flex;gap:.6cqw;z-index:2;}
.story-bars i{flex:1;height:.4cqw;background:rgba(255,255,255,.35);}
.story-bars i:first-child{background:#fff;}
.story-side{position:absolute;right:1.6cqw;bottom:5cqw;display:flex;flex-direction:column;gap:2cqw;color:#fff;z-index:2;}
.story-side svg{width:3.4cqw;height:3.4cqw;filter:drop-shadow(0 0 .6cqw rgba(0,0,0,.6));}
.post{display:flex;flex-direction:column;padding-top:4.6cqw;}
.post-head{display:flex;align-items:center;gap:1.2cqw;padding:1.4cqw 1.6cqw;}
.post-avatar{width:3.6cqw;height:3.6cqw;border-radius:50%;background:#101014;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;}
.post-avatar img{width:1.8cqw;height:auto;}
.post-name{font-size:1.7cqw;font-weight:600;color:#fff;}
.phone-screen>.post-img{position:static;width:100%;height:auto;aspect-ratio:1;}
.post-actions{display:flex;gap:1.6cqw;padding:1.6cqw;color:#fff;}
.post-actions svg{width:3cqw;height:3cqw;}
.post-lines{padding:0 1.6cqw;display:flex;flex-direction:column;gap:1cqw;}
.post-lines i{display:block;height:.9cqw;background:rgba(255,255,255,.22);}
.post-lines i:last-child{width:60%;}
.bcard{position:absolute;width:42cqw;aspect-ratio:1.75;box-shadow:0 2.4cqw 3.2cqw rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;}
.bcard--gold{left:12cqw;top:9cqw;transform:rotate(-9deg);background:linear-gradient(135deg,#d9c188,#b8964f);color:var(--panel);font-size:3.6cqw;font-weight:700;letter-spacing:.06em;}
.bcard--dark{left:46cqw;top:24cqw;transform:rotate(5deg);background:#141418;border:1px solid rgba(194,164,101,.4);color:var(--gold);font-size:1.7cqw;letter-spacing:.18em;text-transform:uppercase;}
.bcard--dark img{width:7cqw;height:auto;}
.swatches{position:absolute;left:10cqw;bottom:5cqw;display:flex;gap:1.2cqw;}
.swatches i{display:block;width:7cqw;height:7cqw;box-shadow:0 1cqw 1.6cqw rgba(0,0,0,.5);}
.sw-gold{background:#c2a465;}.sw-dark{background:#101014;border:1px solid rgba(194,164,101,.45);}.sw-light{background:#f0dfb0;}
.type-tile{position:absolute;right:9cqw;top:5cqw;width:14cqw;height:14cqw;border:1px solid rgba(194,164,101,.5);display:flex;align-items:center;justify-content:center;font-size:8cqw;font-weight:500;color:var(--gold);}
.services-cta{display:flex;justify-content:center;padding-top:48px;}

/* 7. Referenzen ---------------------------------------------------------- */
.references{background:var(--ref-bg);padding:80px 0;}
.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,220px);grid-auto-rows:220px;gap:16px;}
.ref-tile{
  position:relative;overflow:hidden;background:#1a191b;border:1px solid var(--line);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.ref-tile--large{grid-column:span 2;grid-row:span 2;}
.ref-tile--tall{grid-row:span 2;}
.ref-tile--wide{grid-column:span 2;}
.ref-status{position:absolute;left:20px;top:18px;z-index:1;padding:5px 11px;background:rgba(10,10,10,.72);border:1px solid rgba(194,164,101,.6);color:var(--gold);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.ref-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ref-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
  background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,0) 78%);
}
/* Kachel mit bereits dunklem Bild: schwächerer Verlauf, damit die Farben des Bildes nicht abgedunkelt werden */
.ref-tile--dark .ref-overlay{background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 42%);}
.ref-overlay h3{font-size:24px;font-weight:600;line-height:1.15;}
.ref-overlay p{margin-top:6px;font-size:14px;font-weight:300;line-height:1.4;color:#e2ddd2;}
.ref-tile--large .ref-overlay h3{font-size:34px;}
.ref-tile--large .ref-overlay p{font-size:16px;max-width:90%;}
/* Nur der Titel ist sichtbar, der Text klappt beim Hovern auf (auf Touch-Geräten ohne Hover bleibt er sichtbar) */
@media (hover:hover){
  .ref-overlay p{max-height:0;opacity:0;margin-top:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease,margin-top .35s ease;}
  .ref-tile:hover .ref-overlay p,.ref-tile:focus-within .ref-overlay p{max-height:8em;opacity:1;margin-top:6px;}
}

/* 8. Stimmen ------------------------------------------------------------- */
.testimonials{
  padding:75px 0;
  background:linear-gradient(to bottom,#060606 0,rgba(6,6,6,.72) 220px,rgba(6,6,6,.72) 100%),url(../assets/img/bg-beton.jpg) center/cover no-repeat;
}
.testimonials .section-title{text-align:center;}
.carousel{position:relative;max-width:1100px;margin:48px auto 0;}
.carousel-viewport{overflow:hidden;}
.carousel-track{display:flex;transition:transform .6s cubic-bezier(.65,0,.35,1);}
.slide{
  flex:0 0 100%;display:flex;align-items:center;gap:40px;padding:36px;
  background:rgba(20,20,22,.6);border:1px solid var(--line);
}
.slide-photo{flex:0 0 46%;aspect-ratio:4/3;overflow:hidden;}
.slide-photo img{width:100%;height:100%;object-fit:cover;}
.slide-body{flex:1;min-width:0;}
.quote-mark{font-family:Georgia,serif;font-size:56px;line-height:1;color:var(--gold);margin-bottom:-20px;}
.quote{font-size:21px;line-height:1.55;color:#f0efec;margin-bottom:22px;}
.author{display:flex;align-items:center;gap:16px;margin:46px 0 16px;}
.author img{width:64px;height:64px;border-radius:50%;object-fit:cover;}
.avatar-placeholder{flex:none;width:64px;height:64px;border-radius:50%;background:rgba(194,164,101,.12);border:1px solid rgba(194,164,101,.35);}
.author-name{font-size:22px;font-weight:600;}
.author-project{margin-top:2px;font-size:15px;color:#9a968d;}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:none;border:0;color:var(--gold);filter:drop-shadow(0 1px 6px rgba(0,0,0,.6));
  transition:color .25s ease,transform .25s ease;
}
.carousel-arrow:hover{color:var(--gold-light);}
.carousel-arrow--prev:hover{transform:translateY(-50%) translateX(-3px);}
.carousel-arrow--next:hover{transform:translateY(-50%) translateX(3px);}
.carousel-arrow--prev{left:-23px;}
.carousel-arrow--next{right:-23px;}
.carousel-arrow svg{width:26px;height:46px;overflow:visible;}

/* 9. Kontakt ------------------------------------------------------------- */
.contact{background:var(--panel);padding:60px 0;}
.contact-grid{display:grid;gap:100px;}
.contact-info{display:flex;flex-direction:column;gap:40px;padding-top:40px;}
.contact-intro{font-size:20px;line-height:1.5;letter-spacing:.01em;color:var(--gold);}
.contact-details{display:flex;flex-direction:column;gap:0;margin-top:36px;}
.contact-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:10px 0;}
.contact-row dt{font-size:18px;font-weight:600;letter-spacing:-.1px;}
.contact-row dd{margin:0;font-size:18px;color:var(--text-soft);letter-spacing:-.1px;text-align:right;}
.contact-row a:hover{color:var(--gold);}
.social{display:flex;flex-direction:column;gap:15px;}
.social h3{font-size:18px;font-weight:600;letter-spacing:-.1px;}
.social-links{display:flex;gap:20px;}
.social-links a{display:block;width:24px;height:24px;color:#fff;transition:color .25s ease,transform .25s ease;}
.social-links a:hover{color:var(--gold);transform:translateY(-2px);}
.social-links svg{width:24px;height:24px;}

/* Desktop: Kontaktdaten links, Formular rechts; Social-Icons schließen unten mit dem Formular ab */
@media (min-width:1024px){
  .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:stretch;}
  .contact-info{padding-top:0;gap:32px;}
  .contact-details{margin-top:12px;margin-bottom:-10px;}
}
.contact-form{display:flex;flex-direction:column;gap:16px;}
.field{display:flex;flex-direction:column;}
.field--grow{flex:1;}
.field input,.field textarea{
  width:100%;padding:14px 12px;background:var(--card);border:1px solid rgba(194,164,101,.25);
  font-size:16px;line-height:1.3;letter-spacing:-.1px;outline:none;
  transition:border-color .25s ease,background-color .25s ease;
}
.field textarea{flex:1;min-height:100px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.5);opacity:1;}
.field input:focus,.field textarea:focus{border-color:var(--gold);background:#1d1d22;}
.field input:user-invalid,.field textarea:user-invalid{border-color:#ff2244;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;}
.form-submit{width:100%;padding:14px 18px;}
.form-status{min-height:0;font-size:16px;}
.form-status:empty{display:none;}
.form-status.ok{color:var(--gold);}
.form-status.err{color:#ff6b81;}

/* 10. Footer ------------------------------------------------------------- */
.site-footer{background:var(--panel);border-top:1px solid var(--gold);padding:60px 0;}
.footer-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:40px;}
.footer-social{align-items:center;text-align:center;}
.footer-social .social-links{justify-content:center;}
.footer-logo img{width:94px;height:auto;}
.footer-nav{justify-self:end;display:grid;grid-template-columns:repeat(2,auto);gap:12px 80px;}
.footer-nav a{font-size:18px;line-height:1.5;color:var(--text-soft);letter-spacing:-.1px;transition:color .25s ease;}
.footer-nav a:hover{color:var(--gold);}

/* Rechtstexte (Impressum, später Datenschutz) */
.legal{padding:96px 0 120px;background:var(--bg);}
.legal-inner{max-width:800px;}
.legal h1{font-size:clamp(40px,5.6vw,82px);font-weight:500;line-height:1.1;letter-spacing:-.02em;margin-bottom:40px;}
.legal h2{font-size:24px;font-weight:600;line-height:1.3;margin:44px 0 12px;color:var(--gold);}
.legal p{font-size:18px;line-height:1.7;color:var(--text-soft);margin-bottom:14px;}
.legal a{text-decoration:underline;text-decoration-color:rgba(194,164,101,.5);text-underline-offset:3px;transition:color .25s ease;}
.legal a:hover{color:var(--gold);}
.legal--long h1{margin-bottom:56px;}
.legal--long h2{font-size:clamp(26px,3vw,36px);margin:72px 0 8px;padding-top:28px;border-top:1px solid var(--line);}
.legal--long h3{font-size:22px;font-weight:600;line-height:1.3;margin:36px 0 10px;color:var(--text);}
.legal--long h4{font-size:18px;font-weight:600;margin:26px 0 8px;color:var(--gold);}
.legal--long ul{margin:0 0 18px;padding-left:22px;color:var(--text-soft);}
.legal--long li{font-size:18px;line-height:1.7;margin-bottom:8px;}
.legal--long li::marker{color:var(--gold);}
.legal a{overflow-wrap:anywhere;}
.footer-legal{margin-top:40px;padding-top:28px;border-top:1px solid rgba(208,209,219,.1);display:flex;gap:28px;font-size:15px;}
.cookie-settings{padding:0;background:none;border:0;cursor:pointer;font:inherit;color:rgba(208,209,219,.7);transition:color .25s ease;}
.cookie-settings:hover{color:var(--gold);}
.cookie-settings[hidden]{display:none;}
.footer-legal a{color:rgba(208,209,219,.7);transition:color .25s ease;}
.footer-legal a:hover{color:var(--gold);}

/* 11. Animationen -------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease;}
.js .reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .gold{animation:none;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  .carousel-track{transition:none;}
  .service-visual,.service-details{transition:none;}
}

/* 12. Responsive --------------------------------------------------------- */
@media (max-width:1023px){
  .nav{display:none;}
  .header-inner{grid-template-columns:1fr auto 1fr;}
  .menu-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:8px;justify-self:center;
    width:46px;height:46px;padding:0 3px;background:none;border:0;cursor:pointer;
  }
  .menu-toggle span{display:block;height:2px;background:var(--gold);transition:transform .3s ease,opacity .3s ease;}
  .menu-open .menu-toggle span:nth-child(1){transform:translateY(10px) rotate(45deg);}
  .menu-open .menu-toggle span:nth-child(2){opacity:0;}
  .menu-open .menu-toggle span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}
  .mobile-menu{
    position:fixed;inset:var(--header-h) 0 0 0;z-index:49;display:flex;flex-direction:column;
    padding:32px var(--gutter);background:var(--panel);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease,visibility .25s;
  }
  .menu-open .mobile-menu{opacity:1;visibility:visible;transform:none;}
  .mobile-menu a.mm-link{padding:16px 0;font-size:30px;font-weight:500;border-bottom:1px solid rgba(208,209,219,.1);}
  .mobile-menu a.mm-link:hover{color:var(--gold);}
  .mobile-menu .mm-contact{margin-top:32px;display:flex;flex-direction:column;gap:12px;color:var(--gold);font-size:18px;}
  .menu-open{overflow:hidden;}
}
@media (max-width:1023px) and (min-width:810px){
  .hero{padding-top:140px;}
}
@media (max-width:900px){
  .service-row,.service-row:nth-child(even){flex-direction:column;justify-content:flex-start;align-items:stretch;gap:24px;}
  .service-row .service-text{flex:none;}
  .service-row .service-visual,.service-row:nth-child(n) .service-visual{--ink:1;--left:0;width:100%;max-width:520px;margin:0 auto;}
  .carousel-arrow--prev{left:4px;}
  .carousel-arrow--next{right:4px;}
}
@media (max-width:809px){
  :root{--gutter:16px;}
  .header-inner{padding:0 24px;}
  .logo img{height:44px;}
  .header-contact .pill--mail{display:none;}
  .header-contact .pill{width:46px;height:46px;}
  .header-contact .pill svg{width:22px;height:22px;}
  .hero{padding:140px 24px 56px;}
  .hero-sub{font-size:clamp(11px,3.7vw,18px);letter-spacing:.08em;margin-bottom:18px;}
  .hero h1{font-size:clamp(26px,7.6vw,40px);}
  .btn{width:100%;padding:16px 30px;font-size:14.5px;}
  .about-cta,.services-cta{padding-left:16px;padding-right:16px;}
  .about h2{margin-bottom:20px;}
  .reveal-text{font-size:clamp(18px,5.6vw,26px);line-height:1.35;}
  .people-banner{margin-top:0;}
  .person img{height:30vw;}
  .services{padding:64px 0 56px;}
  .services .section-title{margin-bottom:56px;}
  .references{padding:56px 0;}
  .ref-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:210px;gap:12px;}
  .ref-tile--large{grid-column:span 2;grid-row:span 1;}
  .ref-tile--tall{grid-row:span 2;}
  .ref-overlay{padding:16px;}
  .ref-overlay h3{font-size:22px;}
  .ref-tile--large .ref-overlay h3{font-size:28px;}
  .ref-overlay p,.ref-tile--large .ref-overlay p{font-size:13px;max-width:100%;}
  .testimonials{padding:56px 0;}
  .carousel{margin-top:24px;}
  .slide{flex-direction:column;gap:20px;padding:24px;align-items:stretch;}
  .slide-photo{flex:none;width:100%;aspect-ratio:16/9;}
  .author{margin-top:24px;}
  .quote{font-size:18px;}
  .author-name{font-size:20px;}
  .carousel-arrow{top:calc(25px + (100vw - 82px) * .28125);}
  .contact{padding:48px 0;}
  .contact-grid{gap:48px;}
  .contact-info{padding-top:0;gap:28px;}
  .contact-intro{font-size:20px;}
  .contact-row{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 0;}
  .contact-row dd{text-align:left;}
  .footer-inner{display:flex;flex-direction:column;align-items:center;gap:36px;}
  .footer-social{order:2;}
  .footer-nav{order:3;}
  .footer-nav{width:100%;justify-self:auto;gap:12px 24px;}
}