/* ============================================================
   MAIMAR MARKETING — Premium Website Stylesheet
   Fonts: Cormorant Garamond (Display) + DM Sans (Body)
   Palette: Black · Deep Gold · White
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  --bg:          #070707;
  --bg-2:        #0d0d0d;
  --bg-3:        #111111;
  --bg-card:     #0f0f0f;
  --gold:        #c9a84c;
  --gold-light:  #dfc07a;
  --gold-dim:    rgba(201,168,76,0.12);
  --gold-border: rgba(201,168,76,0.22);
  --white:       #ffffff;
  --off-white:   #ece9e2;
  --gray-l:      #b8b8b8;
  --gray:        #777777;
  --gray-d:      #333333;
  --border-sub:  rgba(255,255,255,0.07);
  --ff-display:  'Cormorant Garamond', Georgia, serif;
  --ff-body:     'DM Sans', system-ui, sans-serif;
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --t-med:       0.32s var(--ease);
  --t-fast:      0.18s ease;
  --shadow-card: 0 24px 64px rgba(0,0,0,0.55);
  --r:           3px;
  --r-lg:        8px;
  --max-w:       1240px;
  --section-gap: 130px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body {
  background:var(--bg);
  color:var(--white);
  font-family:var(--ff-body);
  font-weight:300;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
img { display:block; max-width:100%; }
a  { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:var(--ff-body); }
input, textarea, select { font-family:var(--ff-body); }
::selection { background:var(--gold); color:var(--bg); }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(201,168,76,0.3); }

/* ── Custom Cursor ─────────────────────────────────────── */
.cursor-dot {
  position:fixed; top:0; left:0;
  width:8px; height:8px;
  background:var(--gold); border-radius:50%;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-ring {
  position:fixed; top:0; left:0;
  width:36px; height:36px;
  border:1px solid rgba(201,168,76,0.45); border-radius:50%;
  pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease), border-color .25s;
  will-change:transform;
}
.cursor-ring.hovered { width:56px; height:56px; border-color:var(--gold); }
@media (hover:none) { .cursor-dot, .cursor-ring { display:none; } }

/* ── Utility ───────────────────────────────────────────── */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 40px; }
.section    { padding:var(--section-gap) 0; }
.gold       { color:var(--gold); }
.italic     { font-style:italic; }

/* Reveal animations (triggered by JS) */
.reveal { opacity:1; transform:none; transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.delay-1 { transition-delay:.1s; }
.reveal.delay-2 { transition-delay:.2s; }
.reveal.delay-3 { transition-delay:.3s; }
.reveal.delay-4 { transition-delay:.4s; }
.reveal.visible { opacity:1; transform:none; }

/* ── Section Label ─────────────────────────────────────── */
.section-label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px;
}
.section-label::before { content:''; width:28px; height:1px; background:var(--gold); }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 34px;
  font-family:var(--ff-body); font-size:.8rem;
  font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  border-radius:var(--r); position:relative; overflow:hidden;
  white-space:nowrap; transition:all var(--t-med);
}
.btn-primary {
  background:var(--gold); color:var(--bg); font-weight:600;
  box-shadow:0 8px 28px rgba(201,168,76,0.28);
}
.btn-primary:hover {
  background:var(--gold-light);
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(201,168,76,0.38);
}
.btn-outline {
  border:1px solid var(--gold-border); color:var(--white);
  transition:all .28s cubic-bezier(0.25,0.46,0.45,0.94);
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,168,76,0.14); }
.btn-outline:active { transform:scale(0.982); transition-duration:.10s; }
.btn-icon { transition:transform var(--t-fast); }
.btn:hover .btn-icon { transform:translateX(4px); }

/* ── Navbar ────────────────────────────────────────────── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:24px 0;
  transition:background var(--t-med), padding var(--t-med), border-color var(--t-med);
  border-bottom:1px solid transparent;
}
#navbar.scrolled {
  background:rgba(7,7,7,0.92); backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding:12px 0; border-color:var(--border-sub);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--max-w); margin:0 auto; padding:0 40px;
}
.nav-logo {
  font-family:var(--ff-display); font-size:1.25rem; font-weight:600;
  letter-spacing:.04em; color:var(--white); display:flex; align-items:center; gap:12px;
  padding:4px 0;
}
.nav-logo img { height:34px; width:auto; }
.nav-logo span { color:var(--gold); }
.nav-links { display:flex; align-items:center; gap:36px; }
.nav-link {
  font-size:.75rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gray-l);
  transition:color .18s ease; position:relative;
}
.nav-link::after {
  content:''; position:absolute; bottom:-5px; left:0;
  width:0; height:1px; background:var(--gold); transition:width var(--t-med);
}
.nav-link:hover, .nav-link.active { color:var(--white); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-cta {
  padding:10px 22px; font-size:.73rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--gold-border); border-radius:var(--r); color:var(--gold);
  transition:all var(--t-fast);
}
.nav-cta:hover { background:var(--gold); color:var(--bg); }

/* Hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px;
}
.nav-hamburger span {
  display:block; width:24px; height:1.5px; background:var(--white);
  border-radius:2px; transition:all var(--t-fast);
}
.nav-hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px); }
.nav-mobile {
  display:none; position:fixed; inset:0; z-index:999;
  background:rgba(7,7,7,0.97); backdrop-filter:blur(20px);
  flex-direction:column; align-items:center; justify-content:center; gap:40px;
}
.nav-mobile.open { display:flex; }
.nav-mobile .nav-link { font-size:1.5rem; }
.nav-mobile .nav-link::after { bottom:-8px; }

/* ── Hero ──────────────────────────────────────────────── */
#hero {
  min-height:100vh; padding-top:120px; padding-bottom:80px;
  display:flex; align-items:center; position:relative; overflow:hidden;
}
.hero-bg-gradient {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 72% 50%, rgba(201,168,76,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 18% 30%, rgba(201,168,76,0.04) 0%, transparent 60%);
}
.hero-grid-overlay {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 100%);
}
.hero-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 420px;
  gap:80px; align-items:center;
  width:100%; max-width:var(--max-w); margin:0 auto; padding:0 40px;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:28px;
}
.hero-eyebrow-dot {
  width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0;
  animation:pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow:0 0 0 0 rgba(201,168,76,0.5); }
  50%      { box-shadow:0 0 0 9px rgba(201,168,76,0); }
}
.hero-title {
  font-size:clamp(2.8rem, 5.5vw, 4.8rem);
  font-weight:400; line-height:1.1; margin-bottom:26px;
}
.hero-title em { font-style:italic; color:var(--gold); font-weight:300; }
.hero-subtitle {
  font-size:.98rem; color:var(--gray-l); max-width:520px;
  margin-bottom:44px; line-height:1.85;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:64px; }
.hero-stats { display:flex; gap:0; flex-wrap:wrap; }
.hero-stat {
  display:flex; flex-direction:column; gap:4px;
  padding:0 32px; border-right:1px solid var(--border-sub);
}
.hero-stat:first-child { padding-left:0; }
.hero-stat:last-child  { border-right:none; padding-right:0; }
.hero-stat-num {
  font-family:var(--ff-display); font-size:clamp(1.5rem, 2.8vw, 2rem);
  font-weight:500; color:var(--white); line-height:1;
  white-space:nowrap;
}
.hero-stat-num span { color:var(--gold); }
.hero-stat-label { font-size:.7rem; color:var(--gray); max-width:150px; line-height:1.4; }

/* Hero Image */
.hero-visual { position:relative; }
.hero-image-wrap {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
}
.hero-image-wrap::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:35%;
  background:linear-gradient(to top, rgba(7,7,7,0.7), transparent);
  pointer-events:none; z-index:1;
}
.hero-corner {
  position:absolute; width:22px; height:22px; z-index:3;
}
.hero-corner.tl { top:14px; left:14px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); border-radius:1px 0 0 0; }
.hero-corner.tr { top:14px; right:14px; border-top:2px solid var(--gold); border-right:2px solid var(--gold); border-radius:0 1px 0 0; }
.hero-corner.bl { bottom:14px; left:14px; border-bottom:2px solid var(--gold); border-left:2px solid var(--gold); border-radius:0 0 0 1px; }
.hero-corner.br { bottom:14px; right:14px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); border-radius:0 0 1px 0; }
.hero-frame {
  position:absolute; inset:-1px;
  border:1px solid var(--gold-border); border-radius:var(--r-lg);
  pointer-events:none; z-index:2;
}
.hero-photo {
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top center;
  display:block;
}
/* Placeholder if no photo yet */
.hero-photo-placeholder {
  width:100%; aspect-ratio:4/5;
  background:linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.placeholder-icon { font-size:3rem; opacity:.2; }
.placeholder-text { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray); opacity:.5; }
.hero-caption {
  position:absolute; bottom:20px; left:16px; right:16px; z-index:4;
  background:rgba(7,7,7,0.78); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.08); border-radius:var(--r);
  padding:14px 18px;
}
.hero-caption-name {
  font-family:var(--ff-display); font-size:1.05rem; font-weight:500;
  display:block; color:var(--white);
}
.hero-caption-role {
  font-size:.7rem; color:var(--gray-l); margin-top:3px; display:block; line-height:1.5;
}

/* ── Services ──────────────────────────────────────────── */
#leistungen { background:var(--bg-2); }
.section-header { margin-bottom:72px; }
.section-header h2 {
  font-size:clamp(2rem, 4vw, 3.2rem); font-weight:400; line-height:1.15; margin-bottom:16px;
}
.section-header p { color:var(--gray-l); max-width:560px; font-size:.95rem; }

.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.service-card {
  background:var(--bg-card); padding:52px 40px;
  border:1px solid var(--border-sub); position:relative; overflow:hidden;
  transition:background .28s ease, transform .28s cubic-bezier(0.25,0.46,0.45,0.94), border-color .28s ease, box-shadow .28s ease;
}
.service-card::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--gold), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-med);
}
.service-card:hover { background:#131313; transform:translateY(-4px); border-color:var(--gold-border); box-shadow:0 16px 48px rgba(0,0,0,0.4); }
.service-card:hover::before { transform:scaleX(1); }
.service-card.featured {
  background:linear-gradient(140deg, #0f0f0e 0%, #100f0a 100%);
  border-color:var(--gold-border);
}
.service-card.featured::after {
  content:'Hauptfokus';
  position:absolute; top:22px; right:22px;
  font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-dim);
  padding:4px 10px; border-radius:20px; border:1px solid var(--gold-border);
}
.service-num {
  font-family:var(--ff-display); font-size:4.5rem; font-weight:300;
  color:rgba(201,168,76,0.08); line-height:1; margin-bottom:24px;
  transition:color var(--t-med);
}
.service-card:hover .service-num { color:rgba(201,168,76,0.16); }
.service-icon-wrap {
  width:44px; height:44px; margin-bottom:22px;
  background:var(--gold-dim); border:1px solid var(--gold-border);
  border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; transition:background var(--t-fast);
}
.service-card:hover .service-icon-wrap { background:rgba(201,168,76,0.2); }
.service-title {
  font-family:var(--ff-display); font-size:1.55rem; font-weight:500;
  margin-bottom:14px; color:var(--white);
}
.service-text { font-size:.87rem; color:var(--gray-l); line-height:1.85; }

/* ── Stats ─────────────────────────────────────────────── */
#ergebnisse { background:var(--bg); position:relative; overflow:hidden; }
#ergebnisse::before {
  content:''; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:700px; height:350px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(201,168,76,0.05) 0%, transparent 70%);
  pointer-events:none;
}
.stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border-sub);
  border:1px solid var(--border-sub); border-radius:var(--r-lg);
  overflow:hidden; margin-top:72px;
}
.stat-box {
  background:var(--bg-card); padding:60px 44px;
  text-align:center; position:relative;
  transition:background var(--t-med);
}
.stat-box:hover { background:#111111; transform:translateY(-3px); transition:background .28s ease, transform .28s cubic-bezier(0.25,0.46,0.45,0.94); }
.stat-box::after {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:44px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.stat-value {
  font-family:var(--ff-display);
  font-size:clamp(2.8rem, 5vw, 4.5rem);
  font-weight:400; color:var(--white); line-height:1; margin-bottom:8px;
}
.stat-value .accent { color:var(--gold); }
.stat-label {
  font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gray); margin-bottom:18px;
}
.stat-desc { font-size:.84rem; color:var(--gray-l); max-width:220px; margin:0 auto; line-height:1.7; }

/* ── About ─────────────────────────────────────────────── */
#ueber-mich { background:var(--bg-2); }
.about-grid {
  display:grid; grid-template-columns:5fr 6fr; gap:96px; align-items:center;
}
.about-visual { position:relative; }
.about-image-wrap {
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border-sub); position:relative;
}
.about-image-wrap::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(135deg, rgba(201,168,76,0.05) 0%, transparent 55%);
}
.about-photo {
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 10%;
  background:linear-gradient(160deg, #1a1a1a, #0a0a0a); display:block;
}
.about-badge {
  position:absolute; bottom:-20px; right:-20px;
  background:var(--bg-card); border:1px solid var(--gold-border);
  border-radius:var(--r-lg); padding:20px 24px; box-shadow:var(--shadow-card); z-index:2;
}
.about-badge-num {
  font-family:var(--ff-display); font-size:2.2rem; font-weight:500;
  color:var(--gold); display:block; line-height:1;
}
.about-badge-text { font-size:.7rem; color:var(--gray-l); letter-spacing:.05em; }
.about-content h2 {
  font-size:clamp(2rem, 3.5vw, 3rem); font-weight:400; margin-bottom:22px;
}
.about-intro { font-size:.97rem; color:var(--gray-l); margin-bottom:36px; }
.about-pillars { display:flex; flex-direction:column; gap:16px; margin-bottom:44px; }
.about-pillar {
  display:flex; gap:18px; align-items:flex-start;
  padding:20px 22px; border:1px solid var(--border-sub);
  border-radius:var(--r); background:var(--bg-card);
  transition:border-color .22s ease, background .22s ease, transform .22s ease;
}
.about-pillar:hover { border-color:var(--gold-border); background:#111111; transform:translateX(3px); }
.pillar-icon {
  width:36px; height:36px; flex-shrink:0;
  background:var(--gold-dim); border:1px solid var(--gold-border);
  border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.pillar-title {
  font-family:var(--ff-display); font-size:1.1rem; font-weight:500; margin-bottom:4px;
}
.pillar-text { font-size:.84rem; color:var(--gray-l); line-height:1.7; }

/* ── References ────────────────────────────────────────── */
#referenzen { background:var(--bg); }
.references-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:72px;
}
.reference-card {
  background:var(--bg-card); padding:48px 44px;
  border:1px solid var(--border-sub); position:relative; overflow:hidden;
  transition:background .28s ease, border-color .28s ease, transform .28s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow .28s ease;
}
.reference-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0; transition:opacity var(--t-med);
}
.reference-card:hover { background:#121212; border-color:var(--gold-border); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,0.35); }
.reference-card:hover::before { opacity:1; }
.ref-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; }
.ref-client { font-family:var(--ff-display); font-size:1.65rem; font-weight:500; }
.ref-tag {
  font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-dim);
  padding:5px 11px; border-radius:20px; border:1px solid var(--gold-border);
  white-space:nowrap; align-self:flex-start;
}
.ref-results { display:flex; gap:28px; margin-bottom:26px; flex-wrap:wrap; }
.ref-result-num { font-family:var(--ff-display); font-size:1.75rem; font-weight:500; color:var(--gold); line-height:1; }
.ref-result-label { font-size:.7rem; color:var(--gray); margin-top:2px; }
.ref-divider { height:1px; background:var(--border-sub); margin-bottom:22px; }
.ref-bullets { display:flex; flex-direction:column; gap:10px; }
.ref-bullet {
  display:flex; align-items:flex-start; gap:12px;
  font-size:.84rem; color:var(--gray-l); line-height:1.65;
}
.ref-bullet::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex-shrink:0; margin-top:7px;
}

/* ── Partners ──────────────────────────────────────────── */
#partner { background:var(--bg-2); padding:80px 0; }
.partner-inner { text-align:center; }
.partner-label {
  font-size:.7rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gray); margin-bottom:40px; display:block;
}
.partner-logos { display:flex; justify-content:center; align-items:center; gap:56px; flex-wrap:wrap; }
.partner-item {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:1 !important;
  transition:background .25s ease;
}
.partner-item:hover { background:rgba(201,168,76,0.06); }
.partner-name { font-family:var(--ff-display); font-size:1.45rem; font-weight:600; letter-spacing:.04em; }
.partner-tag { font-size:.62rem; color:var(--gray); letter-spacing:.1em; text-transform:uppercase; }
.partner-sep { width:1px; height:36px; background:var(--border-sub); }

/* ── Contact ───────────────────────────────────────────── */
#kontakt { background:var(--bg); }
.contact-wrap { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.contact-left h2 { font-size:clamp(2rem, 3.5vw, 3rem); font-weight:400; margin-bottom:18px; }
.contact-left p  { color:var(--gray-l); font-size:.95rem; margin-bottom:36px; }
.contact-items { display:flex; flex-direction:column; gap:14px; }
.contact-item {
  display:flex; align-items:center; gap:16px;
  padding:17px 20px; border:1px solid var(--border-sub);
  border-radius:var(--r); background:var(--bg-card);
  transition:border-color var(--t-fast);
}
.contact-item:hover { border-color:var(--gold-border); background:#111111; }
.contact-item a { display:contents; }
.contact-item-icon {
  width:38px; height:38px; flex-shrink:0;
  background:var(--gold-dim); border:1px solid var(--gold-border);
  border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.contact-item-label { font-size:.68rem; color:var(--gray); letter-spacing:.08em; text-transform:uppercase; }
.contact-item-val   { font-size:.9rem; color:var(--white); margin-top:1px; }

.contact-form-wrap {
  background:var(--bg-card); border:1px solid var(--border-sub);
  border-radius:var(--r-lg); padding:44px 40px;
}
.form-title {
  font-family:var(--ff-display); font-size:1.4rem; font-weight:500; margin-bottom:28px;
}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group.full { grid-column:1/-1; }
.form-label { font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }
.form-input, .form-textarea, .form-select {
  background:var(--bg-2); border:1px solid var(--border-sub);
  border-radius:var(--r); padding:12px 15px;
  color:var(--white); font-size:.88rem;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
  outline:none; width:100%; -webkit-appearance:none; appearance:none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color:var(--gold-border); box-shadow:0 0 0 3px rgba(201,168,76,0.08);
  outline:none; transition:border-color .18s ease, box-shadow .18s ease;
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--gray-d); }
.form-textarea { resize:vertical; min-height:110px; }
.form-select { cursor:pointer; }
.form-select option { background:var(--bg-2); }
.form-note { font-size:.73rem; color:var(--gray); margin:14px 0; padding-top:14px; border-top:1px solid var(--border-sub); }
.form-submit { width:100%; justify-content:center; margin-top:6px; }

/* ── Footer ────────────────────────────────────────────── */
#footer {
  background:var(--bg-2); border-top:1px solid var(--border-sub); padding:56px 0 30px;
}
.footer-inner { display:flex; flex-direction:column; gap:40px; }
.footer-top {
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:36px;
}
.footer-logo { font-family:var(--ff-display); font-size:1.3rem; font-weight:600; margin-bottom:8px; }
.footer-logo span { color:var(--gold); }
.footer-tagline { font-size:.8rem; color:var(--gray); max-width:260px; }
.footer-col-title {
  font-size:.65rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gray); margin-bottom:14px;
}
.footer-link { display:block; font-size:.82rem; color:var(--gray-l); margin-bottom:9px; transition:color var(--t-fast); }
.footer-link:hover { color:var(--gold); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:22px; border-top:1px solid var(--border-sub); flex-wrap:wrap; gap:10px;
}
.footer-copy { font-size:.76rem; color:var(--gray); }
.footer-copy span { color:var(--gold); }
.footer-legal { display:flex; gap:18px; }
.footer-legal a { font-size:.76rem; color:var(--gray); transition:color var(--t-fast); }
.footer-legal a:hover { color:var(--gray-l); }

/* ── Back to top ───────────────────────────────────────── */
#back-top {
  position:fixed; bottom:30px; right:30px; z-index:500;
  width:42px; height:42px;
  background:var(--bg-card); border:1px solid var(--gold-border);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:.95rem;
  opacity:0; pointer-events:none; transition:opacity var(--t-fast), transform var(--t-fast);
}
#back-top.visible { opacity:1; pointer-events:all; }
#back-top:hover { transform:translateY(-3px); background:var(--gold); color:var(--bg); }

/* ── Hero entry animations ─────────────────────────────── */
@keyframes heroUp  { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes heroFade{ from{opacity:0} to{opacity:1} }
.h-a1 { animation:heroUp  .9s cubic-bezier(0.16,1,0.3,1) .08s both; }
.h-a2 { animation:heroUp  .9s cubic-bezier(0.16,1,0.3,1) .22s both; }
.h-a3 { animation:heroUp  .9s cubic-bezier(0.16,1,0.3,1) .36s both; }
.h-a4 { animation:heroUp  .9s cubic-bezier(0.16,1,0.3,1) .50s both; }
.h-a5 { animation:heroUp  .9s cubic-bezier(0.16,1,0.3,1) .64s both; }
.h-img{ animation:heroFade 1.1s cubic-bezier(0.16,1,0.3,1) .18s both; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1024px) {
  :root { --section-gap:100px; }
  .hero-inner { grid-template-columns:1fr; gap:60px; }
  .hero-visual { max-width:420px; margin:0 auto; }
  .about-grid { grid-template-columns:1fr; gap:56px; }
  .about-visual { max-width:400px; }
  .about-badge { bottom:-14px; right:0; }
  .services-grid { grid-template-columns:1fr !important; }
  .service-card[style*="grid-column"] { grid-column:auto !important; display:block !important; }
  .references-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr; }
  .contact-wrap { grid-template-columns:1fr; gap:56px; }
}

@media (max-width:768px) {
  :root { --section-gap:64px; }

  /* Layout */
  .container, .nav-inner, .hero-inner { padding:0 18px; }

  /* Nav */
  .nav-links, .nav-cta { display:none; }
  .nav-hamburger { display:flex; }
  #navbar { padding:16px 0; }
  .nav-logo img { height:52px !important; }

  /* Hero */
  #hero { padding-top:96px; padding-bottom:56px; min-height:auto; }
  .hero-inner { grid-template-columns:1fr; gap:40px; }
  .hero-visual { max-width:100%; order:1; }
  .hero-content { order:2; }
  .hero-title { font-size:2.4rem; line-height:1.1; }
  .hero-subtitle { font-size:.9rem; max-width:100%; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { justify-content:center; width:100%; }
  .hero-photo { aspect-ratio:4/5; max-height:380px; object-fit:cover; object-position:top; }
  .hero-caption { padding:10px 14px; }
  .hero-caption-name { font-size:.9rem; }
  .hero-caption-role { font-size:.62rem; }

  /* Hero Stats — volle Breite, kein Clipping */
  .hero-stats {
    display:flex; flex-direction:column; gap:0;
    border:1px solid var(--border-sub); border-radius:var(--r);
    overflow:hidden; margin-top:0;
  }
  .hero-stat {
    padding:14px 16px !important;
    border-right:none !important;
    border-bottom:1px solid var(--border-sub);
  }
  .hero-stat:first-child { padding-left:16px !important; }
  .hero-stat:last-child  { border-bottom:none; }
  .hero-stat-num   { font-size:1.5rem; }
  .hero-stat-label { font-size:.7rem; max-width:100%; }

  /* Services */
  .services-grid { grid-template-columns:1fr !important; }
  .service-card { grid-column:auto !important; display:block !important; padding:32px 24px; }
  /* Featured card: disable inner grid layout on mobile */
  .service-card.featured { display:block !important; }
  .service-card.featured > div[style*="grid-template-columns"] { display:block !important; }

  /* Service Tags overflow fix */
  .service-card div[style*="display:flex;flex-wrap:wrap"] { flex-wrap:wrap !important; gap:6px !important; overflow:hidden; }
  .service-card span[style*="font-size:.68rem"] { font-size:.64rem !important; padding:3px 8px !important; }

  /* Stats */
  .stats-grid { grid-template-columns:1fr; }
  .stat-box { padding:40px 24px; }
  .stat-value { font-size:2.8rem; }

  /* About — Bild auf Mobile ausgeblendet (bereits im Hero sichtbar) */
  .about-grid   { grid-template-columns:1fr; gap:0; }
  .about-visual { display:none !important; }

  /* References */
  .references-grid { grid-template-columns:1fr; }
  .reference-card { padding:32px 24px; }
  .ref-results { flex-wrap:wrap; gap:16px; }
  .ref-client { font-size:1.25rem; }
  .ref-header { flex-wrap:wrap; gap:10px; }

  /* Partners */
  .partner-logos { grid-template-columns:repeat(2,1fr) !important; }
  .partner-item { padding:22px 14px !important; }
  .partner-sep { display:none; }

  /* Contact */
  .contact-wrap { grid-template-columns:1fr; gap:44px; }
  .contact-form-wrap { padding:28px 20px; }
  .form-grid { grid-template-columns:1fr; }
  .contact-items { gap:10px; }

  /* Footer */
  .footer-top { flex-direction:column; gap:28px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-legal { flex-wrap:wrap; }

  /* Section headers */
  .section-header { margin-bottom:44px; }
  .section-header h2 { font-size:1.85rem; }

  /* Services Badge — kein Overflow */
  #leistungen [style*="Flexible"] {
    font-size:.7rem !important;
    padding:8px 14px !important;
    white-space:normal !important;
    text-align:center;
    max-width:100%;
  }
}

@media (max-width:480px) {
  :root { --section-gap:52px; }

  .container, .nav-inner, .hero-inner { padding:0 16px; }
  .hero-title { font-size:2rem; }
  .hero-eyebrow { font-size:.6rem; letter-spacing:.12em; }
  h2 { font-size:1.65rem !important; }
  .btn { padding:13px 22px; font-size:.73rem; }

  .service-card { padding:28px 20px; }
  .service-title { font-size:1.25rem; }
  .service-num { font-size:2.8rem; }
  .service-text { font-size:.83rem; }

  .stat-box { padding:32px 18px; }
  .stat-value { font-size:2.4rem; }
  .stat-desc { font-size:.8rem; }

  .reference-card { padding:26px 18px; }
  .ref-result-num { font-size:1.35rem; }
  .ref-bullet { font-size:.8rem; }

  .contact-form-wrap { padding:22px 16px; }
  .form-title { font-size:1.15rem; }
  .contact-item { padding:14px 16px; }

  .partner-logos { grid-template-columns:1fr 1fr !important; }
  .partner-name { font-size:.95rem !important; }
  .partner-item { padding:18px 10px !important; }

  .about-badge { padding:14px 16px; }
  .about-badge-num { font-size:1.6rem; }
  .about-image-wrap { max-height:280px; }
  .about-photo { height:280px; max-height:280px; }

  .section-header h2 { font-size:1.6rem !important; }
  .section-header p { font-size:.88rem; }

  .hero-stat-num { font-size:1.3rem; }
  .hero-stat-label { font-size:.65rem; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE-FIRST PREMIUM OPTIMIERUNGEN
   ═══════════════════════════════════════════════════════════ */

/* ─ CTA Button Premium Glow ────────────────────────────── */
.btn-primary {
  position: relative;
  transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 32px rgba(201,168,76,0.45), 0 0 0 1px rgba(201,168,76,0.3);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 12px rgba(201,168,76,0.3);
  transition-duration: 0.1s;
}
.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(201,168,76,0.2);
}
.btn-outline:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}

/* ─ Hero Spacing kompakter ──────────────────────────────── */
#hero {
  min-height: 100vh;
  padding-top: 110px;
  padding-bottom: 60px;
}

/* ─ Stat Numbers stärker hervorheben ────────────────────── */
.hero-stat-num {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero-stat-num span { color: var(--gold); }

/* ─ Section-header Spacing ──────────────────────────────── */
.section-header { margin-bottom: 60px; }

/* ─ Subtle Background Glow hinter CTA ──────────────────── */
.hero-actions {
  position: relative;
}
.hero-actions::before {
  content: '';
  position: absolute;
  left: -20px; bottom: -20px;
  width: 220px; height: 80px;
  background: radial-gradient(ellipse, rgba(201,168,76,0.08) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(12px);
}

/* ─ Gold Zahlen in Stats stärker ────────────────────────── */
.stat-value { letter-spacing: -0.03em; }
.stat-box { transition: background 0.4s ease, transform 0.3s ease; }
.stat-box:hover { transform: translateY(-4px); }

/* ══════════════════════════════════════════════════════════
   TABLET (max 1024px)
   ══════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  :root { --section-gap:88px; }
  .hero-inner           { grid-template-columns:1fr; gap:52px; }
  .hero-visual          { max-width:460px; margin:0 auto; }
  .about-grid           { grid-template-columns:1fr; gap:52px; }
  .about-visual         { max-width:420px; }
  .about-badge          { bottom:-14px; right:0; }
  .services-grid        { grid-template-columns:1fr !important; }
  .service-card[style*="grid-column"] { grid-column:auto !important; display:block !important; }
  .references-grid      { grid-template-columns:1fr; }
  .stats-grid           { grid-template-columns:1fr; }
  .contact-wrap         { grid-template-columns:1fr; gap:52px; }
  .partner-logos        { grid-template-columns:repeat(2,1fr) !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE (max 768px) — vollständig überarbeitet
   ══════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root { --section-gap:56px; }

  /* ─ Allgemein ─ */
  html { font-size: 15px; }
  body { overflow-x: hidden; }
  * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
  .container, .nav-inner, .hero-inner { padding: 0 16px; }

  /* ─ Navbar ─ */
  #navbar            { padding: 12px 0; }
  #navbar.scrolled   { padding: 9px 0; }
  .nav-links, .nav-cta { display: none !important; }
  .nav-hamburger     { display: flex; }
  .nav-logo img      { height: 44px !important; filter: drop-shadow(0 0 10px rgba(201,168,76,0.35)) !important; }

  /* ─ Mobile Menu ─ */
  .nav-mobile { padding: 36px 20px; }
  .nav-mobile .nav-link { font-size: 1.25rem; }

  /* ─ Hero ─ */
  #hero            { padding-top: 82px; padding-bottom: 44px; min-height: auto; }
  .hero-inner      { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual     { order: 1; max-width: 100%; }
  .hero-content    { order: 2; }
  .hero-bg-gradient { opacity: 0.7; }

  .hero-eyebrow    { font-size: .62rem; margin-bottom: 14px; gap: 8px; }
  .hero-title      { font-size: 2.2rem; line-height: 1.08; margin-bottom: 16px; }
  .hero-subtitle   { font-size: .88rem; margin-bottom: 24px; line-height: 1.75; }

  /* Hero Foto */
  .hero-image-wrap { border-radius: 6px; }
  .hero-photo      { aspect-ratio: 4/5; max-height: 420px; object-position: top center; width: 100%; }
  .hero-corner     { width: 14px; height: 14px; }
  .hero-corner.tl  { top: 10px; left: 10px; }
  .hero-corner.tr  { top: 10px; right: 10px; }
  .hero-corner.bl  { bottom: 10px; left: 10px; }
  .hero-corner.br  { bottom: 10px; right: 10px; }
  .hero-caption    { padding: 10px 13px; bottom: 10px; left: 8px; right: 8px; }
  .hero-caption-name { font-size: .88rem; }
  .hero-caption-role { font-size: .6rem; line-height: 1.4; }

  /* Hero Buttons */
  .hero-actions    { flex-direction: column; gap: 10px; margin-bottom: 28px; }
  .hero-actions .btn { width: 100%; justify-content: center; padding: 15px 20px; font-size: .78rem; }
  .hero-actions::before { display: none; }

  /* Hero Stats */
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-sub);
    border-radius: var(--r);
    overflow: hidden;
    margin-top: 0;
    gap: 0;
  }
  .hero-stat {
    padding: 13px 14px;
    border-right: 1px solid var(--border-sub);
    border-bottom: 1px solid var(--border-sub);
  }
  .hero-stat:nth-child(2)  { border-right: none; }
  .hero-stat:last-child    { grid-column: 1/-1; border-bottom: none; border-right: none; }
  .hero-stat-num           { font-size: 1.25rem; }
  .hero-stat-label         { font-size: .62rem; max-width: 100%; line-height: 1.35; margin-top: 3px; }

  /* ─ Leistungen ─ */
  .services-grid           { grid-template-columns: 1fr !important; gap: 0; }
  .service-card            { padding: 30px 22px; }
  .service-card.featured   { display: block !important; grid-column: auto !important; }
  .service-card > div[style*="grid-template-columns"] { display: block !important; }
  .service-num             { font-size: 3rem; margin-bottom: 14px; }
  .service-title           { font-size: 1.3rem; margin-bottom: 12px; }
  .service-text            { font-size: .84rem; line-height: 1.8; }
  .service-icon-wrap       { width: 36px; height: 36px; font-size: .95rem; margin-bottom: 18px; }

  /* ─ Ergebnisse ─ */
  .stats-grid  { grid-template-columns: 1fr; background: transparent; border: none; border-radius: 0; }
  .stat-box    { padding: 38px 22px; border-radius: var(--r); margin-bottom: 2px; }
  .stat-box:hover { transform: none; }
  .stat-value  { font-size: 2.6rem; }
  .stat-label  { font-size: .68rem; }
  .stat-desc   { font-size: .82rem; max-width: 100%; }

  /* ─ Über mich ─ */
  .about-grid   { grid-template-columns: 1fr; gap: 36px; }
  .about-visual { max-width: 100%; }
  .about-photo  { aspect-ratio: 4/5; max-height: 380px; object-position: top center; }
  .about-badge  { position: relative; bottom: auto; right: auto;
                  margin-top: 12px; align-self: flex-end; padding: 14px 18px; }
  .about-badge-num  { font-size: 1.7rem; }
  .about-badge-text { font-size: .62rem; }
  .about-content h2 { font-size: 1.9rem; }
  .about-intro      { font-size: .86rem; line-height: 1.8; }
  .about-pillars    { gap: 12px; margin-bottom: 32px; }
  .about-pillar     { padding: 15px 16px; gap: 14px; }
  .pillar-icon      { width: 32px; height: 32px; font-size: .85rem; flex-shrink: 0; }
  .pillar-title     { font-size: 1rem; }
  .pillar-text      { font-size: .81rem; }
  .section-header   { margin-bottom: 36px; }
  .section-header h2 { font-size: 1.85rem; }
  .section-header p  { font-size: .86rem; }
  .section-label     { font-size: .63rem; }

  /* ─ Referenzen ─ */
  .references-grid  { grid-template-columns: 1fr; }
  .reference-card   { padding: 28px 20px; }
  .ref-header       { flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .ref-client       { font-size: 1.25rem; }
  .ref-tag          { font-size: .58rem; padding: 4px 10px; align-self: flex-start; }
  .ref-results      { flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
  .ref-result-num   { font-size: 1.35rem; }
  .ref-result-label { font-size: .63rem; }
  .ref-bullet       { font-size: .81rem; line-height: 1.6; }
  .ref-bullet::before { margin-top: 6px; }

  /* ─ Sponsoren ─ */
  #partner { padding: 48px 0; }
  .partner-logos {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--border-sub);
    border-radius: var(--r-lg);
    overflow: hidden;
    width: 100%;
  }
  .partner-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 14px !important;
    opacity: 1 !important;
    border-right: 1px solid var(--border-sub) !important;
    border-bottom: 1px solid var(--border-sub) !important;
  }
  .partner-item:nth-child(even)       { border-right: none !important; }
  .partner-item:nth-last-child(-n+2)  { border-bottom: none !important; }
  .partner-name  { font-size: .9rem !important; text-align: center; color: #fff !important; }
  .partner-tag   { font-size: .58rem; text-align: center; color: #888 !important; }
  .partner-sep   { display: none; }
  .partner-label { font-size: .63rem; margin-bottom: 28px; }

  /* ─ Kontakt ─ */
  .contact-wrap        { grid-template-columns: 1fr; gap: 40px; }
  .contact-left h2     { font-size: 1.85rem; }
  .contact-left p      { font-size: .86rem; margin-bottom: 24px; }
  .contact-items       { gap: 9px; }
  .contact-item        { padding: 13px 15px; gap: 13px; }
  .contact-item-icon   { width: 32px; height: 32px; font-size: .82rem; flex-shrink: 0; }
  .contact-item-label  { font-size: .63rem; }
  .contact-item-val    { font-size: .84rem; }
  .contact-form-wrap   { padding: 26px 18px; border-radius: var(--r); }
  .form-title          { font-size: 1.25rem; margin-bottom: 20px; }
  .form-grid           { grid-template-columns: 1fr; gap: 11px; margin-bottom: 11px; }
  .form-label          { font-size: .63rem; }
  .form-input, .form-textarea, .form-select { padding: 11px 13px; font-size: .85rem; }
  .form-textarea       { min-height: 95px; }
  .form-note           { font-size: .68rem; padding-top: 12px; margin: 12px 0; }
  .form-submit         { padding: 14px; font-size: .76rem; }

  /* ─ Footer ─ */
  .footer-top          { flex-direction: column; gap: 24px; }
  .footer-bottom       { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 18px; }
  .footer-logo img     { height: 40px !important; }
  .footer-tagline      { font-size: .78rem; }
  .footer-col-title    { font-size: .63rem; margin-bottom: 10px; }
  .footer-link         { font-size: .78rem; margin-bottom: 7px; }
  .footer-copy, .footer-legal a { font-size: .7rem; }
  .footer-legal        { gap: 14px; }

  /* ─ Back to Top ─ */
  #back-top { bottom: 18px; right: 16px; width: 36px; height: 36px; font-size: .82rem; }
}

/* ══════════════════════════════════════════════════════════
   KLEIN (max 390px) — iPhone SE / kleine Androids
   ══════════════════════════════════════════════════════════ */
@media (max-width:390px) {
  :root { --section-gap:44px; }
  html  { font-size: 14px; }
  .container, .nav-inner, .hero-inner { padding: 0 13px; }

  #hero         { padding-top: 76px; padding-bottom: 36px; }
  .hero-title   { font-size: 1.95rem; }
  .hero-subtitle { font-size: .84rem; }
  .section-header h2 { font-size: 1.65rem !important; }

  .nav-logo img { height: 38px !important; }

  .hero-stat-num  { font-size: 1.1rem; }
  .hero-stat      { padding: 11px 13px !important; }
  .hero-stat:first-child { padding-left: 13px !important; }
  .stat-value     { font-size: 2.2rem; }
  .ref-result-num { font-size: 1.2rem; }

  .service-card   { padding: 24px 16px; }
  .reference-card { padding: 24px 16px; }
  .stat-box       { padding: 30px 16px; }
  .about-pillar   { padding: 13px 14px; }

  .btn  { padding: 12px 16px; font-size: .72rem; }
  .hero-actions .btn { padding: 14px 16px; }

  .contact-form-wrap { padding: 20px 14px; }
  .partner-item  { padding: 16px 10px !important; }
  .partner-name  { font-size: .82rem !important; }
}