/* =========================================================================
   RUHR360 — Design System
   Ruhig, präzise, cinematisch, industriell, ehrlich, hochwertig.
   =========================================================================

   SCHRIFTEN — verbindlicher Marken-Fontsatz, ausschließlich diese drei:
     Berthold Akzidenz-Grotesk BE Extended → Logo, Hero-Headlines,
       Section-Titles, große Zahlen (assets/fonts/AkzidenzGroteskBEEx.ttf)
     Gotham Book → Fließtext, Beschreibungen, Cards, Formulare
       (assets/fonts/GothamBook.otf)
     Gotham Bold → Navigation, Buttons, CTAs, Labels, kleine Überschriften
       (assets/fonts/GothamBold.otf)

   Alle drei Dateien liegen lokal unter assets/fonts/ — kein externer
   Font-Request, keine anderen Schriften im Einsatz.
   ========================================================================= */

@font-face{
  font-family:'Akzidenz Grotesk BE Ex';
  src:url('../fonts/AkzidenzGroteskBEEx.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gotham Book';
  src:url('../fonts/GothamBook.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gotham Bold';
  src:url('../fonts/GothamBold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Design tokens ---------- */
:root{
  /* Farben */
  --bg:#111113;
  --bg-raised:#0c0c0d;
  --surface:#1a1a1d;
  --surface-2:#222225;
  --fg:#f5f5f3;
  --muted:#a3a3a8;
  --muted-2:#6e6e73;
  --accent:#e22a2a;
  --accent-dim:rgba(226,42,42,.14);
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --gold:#c9a15a;

  /* Typografie — nur diese drei Marken-Schriften */
  --font-display:'Akzidenz Grotesk BE Ex', sans-serif;
  --font-body:'Gotham Book', sans-serif;
  --font-nav:'Gotham Bold', sans-serif;

  /* Abstände (4px-Basis) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* Raster */
  --content-max:1280px;
  --content-pad:32px;

  /* Bewegung */
  --ease:cubic-bezier(.16,.8,.24,1);
  --dur-fast:.2s;
  --dur-med:.5s;
  --dur-slow:.9s;
}

@media (max-width:640px){
  :root{ --content-pad:20px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img, video{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:1.1; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; }

/* Sichtbare Fokus-States überall — Barrierefreiheit hat Vorrang vor Optik */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---------- Layout / Grid ---------- */
.wrap{ max-width:var(--content-max); margin:0 auto; padding:0 var(--content-pad); }
.grid-12{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--sp-5); }
@media (max-width:900px){ .grid-12{ grid-template-columns:repeat(4, 1fr); } }

section{ padding:var(--sp-9) 0; }
@media (max-width:720px){ section{ padding:var(--sp-7) 0; } }

.mono{
  font-family:var(--font-nav); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2);
}
.eyebrow{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3); }

.section-head{ max-width:640px; margin-bottom:var(--sp-7); }
.section-head h1, .section-head h2{ font-size:clamp(28px,3.6vw,44px); margin-top:var(--sp-3); }
.section-head p{ color:var(--muted); font-size:16px; line-height:1.7; margin-top:var(--sp-4); }
.section-head.wide{ max-width:820px; }

/* Kürzere Textbreiten für Fließtext (statt durchgängig 640px) */
.prose{ max-width:560px; color:var(--muted); font-size:16px; line-height:1.75; }
.prose strong{ color:var(--fg); font-weight:600; }
.prose + .prose{ margin-top:var(--sp-4); }

.text-lg{ font-size:clamp(20px,2.2vw,26px); color:var(--fg); font-family:var(--font-display); font-weight:400; line-height:1.35; max-width:680px; }

/* ---------- Der rote Punkt — sparsam eingesetzt ---------- */
/* Nur: Logo, ein zentraler CTA, ausgewählte technische Labels, eine Animation. */
.rec-dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; display:inline-block;
}
.rec-dot.live{ animation:recpulse 2.4s ease-in-out infinite; }
@keyframes recpulse{
  0%, 100%{ opacity:1; } 50%{ opacity:.35; }
}
@media (prefers-reduced-motion: reduce){ .rec-dot.live{ animation:none; } }

/* ---------- Wiederkehrendes rotes-Punkt-Motiv (wie auf der bisherigen Website) ---------- */
.dotsep{ width:4px; height:4px; border-radius:50%; background:var(--accent); display:inline-block; flex:none; }
@keyframes recblink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:.15; } }

/* ---------- Nav-CTA-Button (schlanker Ghost-Button mit blinkendem Punkt, wie im Original) ---------- */
.btn-nav{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; font-size:12.5px;
  border:1px solid var(--border-strong); border-radius:2px; letter-spacing:.02em; font-weight:600;
  color:var(--fg); text-decoration:none; opacity:1; transform:translateY(0) scale(1);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
             opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear 0s;
}
.btn-nav:hover{ border-color:var(--fg); background:rgba(255,255,255,.04); }
.btn-nav .dotsep{ animation:recblink 1.6s steps(1) infinite; }
@media (prefers-reduced-motion: reduce){ .btn-nav .dotsep{ animation:none; } }
/* Blendet sich weich aus (Fade + leichtes Hochgleiten), sobald eine eigene Kontakt-
   Möglichkeit (CTA-Band / Kontaktformular) im Viewport sichtbar ist — siehe
   hideNavCtaNearContact() in script.js. visibility wechselt erst NACH dem Fade auf
   "hidden" (verzögerter Transition), damit der Button beim Ausblenden nicht abrupt
   aus der Klickbarkeit/dem Layout verschwindet, sondern sichtbar wegfadet. */
.btn-nav.is-hidden{
  opacity:0; transform:translateY(-6px) scale(.96); pointer-events:none;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
             opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
  visibility:hidden;
}
@media (prefers-reduced-motion: reduce){
  .btn-nav{ transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), opacity var(--dur-fast) linear, visibility 0s linear 0s; }
  .btn-nav.is-hidden{ transform:none; transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), opacity var(--dur-fast) linear, visibility 0s linear var(--dur-fast); }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:15px 28px; border-radius:2px; font-size:14px; font-weight:700; font-family:var(--font-nav);
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary{ background:var(--fg); color:var(--bg-raised); }
.btn-primary:hover{ background:#fff; transform:translateY(-1px); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:#c92222; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--border-strong); }
.btn-ghost:hover{ border-color:var(--fg); }
.btn-row{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }

/* ---------- Premium-CTA mit blinkendem Punkt (skalierte Variante von .btn-nav) ---------- */
.btn-rec{ background:transparent; color:var(--fg); border-color:var(--border-strong); }
.btn-rec:hover{ border-color:var(--fg); background:rgba(255,255,255,.04); transform:translateY(-1px); }
.btn-rec .dotsep{ width:6px; height:6px; animation:recblink 1.6s steps(1) infinite; }
@media (prefers-reduced-motion: reduce){ .btn-rec .dotsep{ animation:none; } }

.link-arrow{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-nav); font-size:14px; font-weight:700; text-decoration:none; color:var(--fg); border-bottom:1px solid var(--border-strong); padding-bottom:2px; transition:border-color var(--dur-fast) var(--ease); }
.link-arrow:hover{ border-color:var(--fg); }
.link-arrow svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease); }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ---------- Navigation ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(17,17,19,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:center; gap:var(--sp-2); text-decoration:none; }
.brand-mark{ display:inline-flex; align-items:center; gap:5px; }
.brand-mark img{ height:36px; width:auto; display:block; }
footer .brand-mark img{ height:38px; }
.brand-mark .rec-dot{ margin-left:0; }

.navlinks{ display:flex; align-items:center; gap:var(--sp-6); position:relative; }
.navlinks a{ font-family:var(--font-nav); font-size:14px; font-weight:700; text-decoration:none; color:var(--muted); padding:8px 2px; position:relative; transition:color var(--dur-fast) var(--ease); }
.navlinks a:hover, .navlinks a[aria-current="page"]{ color:var(--fg); }

/* ---------- Nav-Indikator: gleitender Strich, morpht beim Wechsel kurz zum roten Punkt ---------- */
.nav-indicator{
  position:absolute; left:var(--nav-left,0); width:var(--nav-width,0); bottom:-2px; height:1px;
  background:var(--accent); border-radius:0; opacity:0; pointer-events:none;
}
.nav-indicator.is-visible{ opacity:1; }
.nav-indicator.is-animating{ animation:navIndicatorMove .22s linear forwards; }
@keyframes navIndicatorMove{
  0%   { left:var(--nav-from-left); width:var(--nav-from-width); height:1px; bottom:-2px; border-radius:0; }
  42%  { left:calc(var(--nav-from-left) + var(--nav-from-width)/2 - 3px); width:6px; height:6px; bottom:-4.5px; border-radius:50%; }
  58%  { left:calc(var(--nav-to-left) + var(--nav-to-width)/2 - 3px); width:6px; height:6px; bottom:-4.5px; border-radius:50%; }
  100% { left:var(--nav-to-left); width:var(--nav-to-width); height:1px; bottom:-2px; border-radius:0; }
}
@media (prefers-reduced-motion: reduce){
  .nav-indicator.is-animating{ animation:none; left:var(--nav-left,0); width:var(--nav-width,0); }
}

.nav-drop{ position:relative; }
.nav-drop-toggle{ background:none; border:none; color:var(--muted); font-family:var(--font-nav); font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:8px 2px; }
.nav-drop-toggle:hover{ color:var(--fg); }
.nav-drop-toggle svg{ width:10px; height:10px; transition:transform var(--dur-fast) var(--ease); }
.nav-drop[data-open="true"] .nav-drop-toggle svg{ transform:rotate(180deg); }
.nav-drop-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  background:var(--surface); border:1px solid var(--border-strong); min-width:260px; padding:var(--sp-3);
  opacity:0; visibility:hidden; transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-drop[data-open="true"] .nav-drop-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-drop-panel a{ display:block; padding:10px 12px; font-size:14px; color:var(--muted); text-decoration:none; border-radius:2px; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nav-drop-panel a:hover{ background:var(--surface-2); color:var(--fg); }

.nav-cta{ display:flex; align-items:center; gap:var(--sp-5); }

.burger{ display:none; width:44px; height:44px; border:none; background:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span{ width:22px; height:2px; background:var(--fg); transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease); }
.burger span:nth-child(2){ width:15px; align-self:flex-end; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); width:22px; }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:76px 0 0 0; background:var(--bg); z-index:99;
  padding:var(--sp-6) var(--content-pad) calc(var(--sp-6) + env(safe-area-inset-bottom));
  transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  overflow-y:auto; max-height:calc(100dvh - 76px);
}
.mobile-menu.show{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.mobile-menu a{ display:block; padding:16px 4px; font-size:20px; font-family:var(--font-nav); font-weight:700; text-decoration:none; color:var(--fg); border-bottom:1px solid var(--border); min-height:44px; }
.mobile-menu .mm-sub a{ font-size:16px; font-weight:500; color:var(--muted); padding:12px 4px 12px 16px; }
.mobile-menu a.mm-cta{
  display:inline-flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  margin-top:var(--sp-5); padding:16px 22px; font-size:16px;
  border:1px solid var(--border-strong); border-bottom:1px solid var(--border-strong); border-radius:2px;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.mobile-menu a.mm-cta:active{ border-color:var(--fg); background:rgba(255,255,255,.04); }
.mobile-menu a.mm-cta .dotsep{ width:6px; height:6px; animation:recblink 1.6s steps(1) infinite; }
@media (prefers-reduced-motion: reduce){ .mobile-menu a.mm-cta .dotsep{ animation:none; } }

@media (max-width:860px){
  .navlinks, .nav-drop{ display:none; }
  .nav-cta .btn, .nav-cta .btn-nav{ display:none; }
  .burger{ display:flex; }
}

body.menu-open{ overflow:hidden; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:76px; overflow:hidden; background:var(--bg-raised);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.55) 55%, rgba(10,10,11,.92) 100%);
}
.hero-hud{
  position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start;
  padding:var(--sp-5) var(--content-pad) 0;
}
.hero-hud .mono{ color:rgba(245,245,243,.55); }
.hero-content{ position:relative; z-index:1; max-width:none; margin:0; padding:var(--sp-8) var(--content-pad) var(--sp-8); min-width:0; }
.hero-title{
  font-size:clamp(48px,10vw,124px); line-height:.94; font-family:var(--font-display); font-weight:400; letter-spacing:-.02em;
  color:var(--fg); text-transform:uppercase; overflow-wrap:break-word;
}
@media (max-width:480px){ .hero-title{ font-size:clamp(30px,9.5vw,40px); } }
.hero-title-last{ position:relative; display:inline-block; }
.hero-title .rec-dot{
  /* Absolut positioniert relativ zum letzten Wort statt im Textfluss zu stehen —
     dadurch kann der Punkt nie mehr allein in eine neue Zeile umbrechen ("wegrutschen"),
     egal bei welcher Fensterbreite. Größe UND Position beide in em (relativ zur von
     .hero-title geerbten Schriftgröße), damit beides exakt im selben Verhältnis
     wie der Text mitskaliert. */
  position:absolute; right:-.2em; top:.02em;
  width:.15em; height:.15em; margin-left:0;
  animation:none; /* überschreibt .rec-dot.live (recpulse) — soll hier fest leuchten, nicht blinken/pulsen */
}
.hero-sub{ margin-top:var(--sp-5); max-width:560px; font-size:18px; line-height:1.6; color:rgba(245,245,243,.82); }
.hero-actions{ margin-top:var(--sp-6); }
@media (max-width:640px){ .hero-content{ padding-bottom:var(--sp-6); } }

/* ---------- Vertrauenszeile ---------- */
.trustbar{ border-bottom:1px solid var(--border); background:var(--bg-raised); }
.trustbar .wrap{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  column-gap:var(--sp-7); row-gap:var(--sp-4);
  padding:var(--sp-6) var(--content-pad);
}
.trustbar-item{
  display:flex; align-items:center; gap:12px; flex:none;
  font-family:var(--font-body); font-weight:400; font-size:14px; letter-spacing:.08em;
  color:rgba(245,245,243,.78);
}
.trustbar-item svg{ width:17px; height:17px; color:rgba(245,245,243,.78); flex:none; }
@media (max-width:720px){
  .trustbar .wrap{ gap:var(--sp-5) var(--sp-6); row-gap:var(--sp-4); }
  .trustbar-item{ font-size:13px; }
}

/* ---------- Brand-Statement (kurzer, ruhiger Moment ohne Button/Icon/Bild) ---------- */
.brand-statement{ padding:var(--sp-9) 0; text-align:center; }
.brand-statement p{
  max-width:640px; margin:0 auto; font-family:var(--font-display); font-weight:400;
  font-size:clamp(22px,2.6vw,32px); line-height:1.35; color:var(--fg); letter-spacing:-.01em;
}
@media (max-width:720px){ .brand-statement{ padding:var(--sp-7) 0; } }

/* ---------- Signature-Sektion (Betriebsflug auf der Startseite) ---------- */
.signature{ position:relative; }
.signature-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface); border:1px solid var(--border); }
.signature-media img, .signature-media video{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.signature:hover .signature-media img, .signature:hover .signature-media video{ transform:scale(1.02); }
.signature-body{ margin-top:var(--sp-6); display:grid; grid-template-columns:1.1fr 1fr; gap:var(--sp-8); align-items:start; }
@media (max-width:900px){ .signature-body{ grid-template-columns:1fr; gap:var(--sp-5); } }
.signature-facts{ display:grid; gap:var(--sp-5); }
.signature-fact dt{ font-family:var(--font-nav); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); margin-bottom:6px; }
.signature-fact dd{ margin:0; font-size:15px; color:var(--muted); line-height:1.6; }

/* ---------- Leistungs-Mosaik (unterschiedliche Formate) ---------- */
.mosaic{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--sp-5); }
.mosaic-item{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; justify-content:flex-end; min-height:320px; text-decoration:none; color:inherit; }
.mosaic-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
.mosaic-item::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,0) 40%, rgba(10,10,11,.88) 100%); }
.mosaic-item:hover img{ transform:scale(1.04); }
.mosaic-item-body{ position:relative; z-index:1; padding:var(--sp-6); }
.mosaic-item-body .mono{ color:rgba(245,245,243,.6); }
.mosaic-item-body h3{ font-size:clamp(20px,2.4vw,28px); margin-top:var(--sp-2); color:#fff; }
.mosaic-item-body p{ margin-top:var(--sp-3); color:rgba(245,245,243,.78); font-size:14px; line-height:1.6; max-width:38ch; }
.mosaic-item .link-arrow{ margin-top:var(--sp-4); color:#fff; border-color:rgba(255,255,255,.35); }

.mosaic-large{ grid-column:span 8; min-height:460px; }
.mosaic-small{ grid-column:span 4; }
.mosaic-half{ grid-column:span 6; min-height:380px; }
.mosaic-wide{ grid-column:span 12; min-height:280px; }
@media (max-width:900px){
  .mosaic-large, .mosaic-small, .mosaic-half, .mosaic-wide{ grid-column:span 12; min-height:320px; }
}

/* ---------- Arbeitsweise / Prozess ---------- */
.process-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); margin-top:var(--sp-2); }
@media (max-width:900px){ .process-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .process-list{ grid-template-columns:1fr; } }
.process-step{ border-top:1px solid var(--border-strong); padding-top:var(--sp-4); }
.process-step .step-num{ font-family:var(--font-nav); font-size:13px; color:var(--accent); }
.process-step h4{ font-size:17px; margin-top:var(--sp-3); }
.process-step p{ margin-top:var(--sp-2); color:var(--muted); font-size:14px; line-height:1.6; }

/* ---------- Haltung ---------- */
.stance{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center; }
@media (max-width:900px){ .stance{ grid-template-columns:1fr; gap:var(--sp-5); } }
.stance-media{ aspect-ratio:4/5; background:var(--surface); border:1px solid var(--border); overflow:hidden; }
.stance-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Abschluss-CTA ---------- */
.cta-band{ background:var(--bg-raised); border-top:1px solid var(--border); text-align:center; padding:var(--sp-10) 0; }
.cta-band h2{ font-size:clamp(30px,4.6vw,56px); max-width:820px; margin:0 auto; }
.cta-band .btn-row{ justify-content:center; margin-top:var(--sp-6); }

/* ---------- Karten (nur noch gezielt eingesetzt, nicht als Standardraster) ---------- */
.card{ background:var(--surface); border:1px solid var(--border); padding:var(--sp-6); }
.card h3{ font-size:17px; }
.card p{ margin-top:var(--sp-3); color:var(--muted); font-size:14px; line-height:1.6; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); }
.stat-row div{ padding:var(--sp-5); border-right:1px solid var(--border); }
.stat-row div:last-child{ border-right:none; }
@media (max-width:720px){ .stat-row{ grid-template-columns:1fr 1fr; } .stat-row div:nth-child(2n){ border-right:none; } .stat-row div{ border-bottom:1px solid var(--border); } }

/* ---------- Leistungsseiten-Layout ---------- */
.service-hero{ position:relative; min-height:64vh; display:flex; align-items:flex-end; padding-top:76px; overflow:hidden; background:var(--bg-raised); }
.service-hero .hero-media{ position:absolute; inset:0; }
.service-hero-body{ position:relative; z-index:1; padding:var(--sp-8) 0; min-width:0; }
.service-hero-body .mono{ color:rgba(245,245,243,.6); }
.service-hero-body h1{ font-size:clamp(36px,6vw,68px); margin-top:var(--sp-3); max-width:900px; text-transform:none; overflow-wrap:break-word; }
.service-hero-body p{ margin-top:var(--sp-4); max-width:560px; font-size:18px; color:rgba(245,245,243,.85); line-height:1.6; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:start; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:var(--sp-5); } }
.split-media{ aspect-ratio:4/3; background:var(--surface); border:1px solid var(--border); overflow:hidden; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-reverse{ direction:rtl; }
.split-reverse > *{ direction:ltr; }

.deliverables{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.deliverables div{ background:var(--surface); padding:var(--sp-5) var(--sp-6); font-size:14px; color:var(--muted); line-height:1.6; }
.deliverables div strong{ display:block; color:var(--fg); font-size:15px; margin-bottom:4px; }
@media (max-width:720px){ .deliverables{ grid-template-columns:1fr; } }
/* Variante mit genau 3 Punkten (z. B. Projekte-Seite) — 3 Spalten statt 2,
   damit keine leere Zelle entsteht wie bei einer ungeraden Anzahl in 2 Spalten. */
.deliverables.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .deliverables.cols-3{ grid-template-columns:1fr; } }

.price-block{ border:1px solid var(--border-strong); padding:var(--sp-6); background:var(--surface); max-width:480px; }
.price-block .mono{ margin-bottom:var(--sp-2); }
.price-block .price-value{ font-family:var(--font-display); font-weight:400; font-size:32px; }
.price-block .price-value span{ font-size:15px; color:var(--muted); font-weight:500; font-family:var(--font-body); }
.price-block ul{ margin-top:var(--sp-4); display:grid; gap:10px; }
.price-block li{ list-style:none; font-size:14px; color:var(--muted); padding-left:18px; position:relative; }
.price-block li::before{ content:''; position:absolute; left:0; top:8px; width:6px; height:1px; background:var(--accent); }
.price-block p.note{ margin-top:var(--sp-4); font-size:12.5px; color:var(--muted-2); line-height:1.6; }

/* ---------- FAQ ---------- */
.faq{ max-width:720px; }
.faq-item{ border-top:1px solid var(--border); }
.faq-item:last-child{ border-bottom:1px solid var(--border); }
.faq-q{ list-style:none; cursor:pointer; padding:var(--sp-4) 0; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); font-family:var(--font-nav); font-weight:700; font-size:16px; }
.faq-q::-webkit-details-marker{ display:none; }
.faq-icon{ position:relative; width:16px; height:16px; flex:none; }
.faq-arrow{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--accent); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.faq-arrow svg{ width:12px; height:12px; display:block; }
.faq-dot{
  position:absolute; top:50%; left:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--accent); opacity:0; transform:scale(.2);
  transition:opacity .3s var(--ease) .08s, transform .3s var(--ease) .08s;
}
details[open] .faq-arrow{ opacity:0; transform:scale(.35) rotate(90deg); transition-delay:0s; }
details[open] .faq-dot{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion: reduce){ .faq-arrow, .faq-dot{ transition:none; } }
.faq-a{ padding:0 0 var(--sp-4); color:var(--muted); font-size:14.5px; line-height:1.7; max-width:60ch; }

/* ---------- Formular ---------- */
.form-grid{ display:grid; gap:var(--sp-5); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:8px; font-family:var(--font-nav); text-transform:uppercase; letter-spacing:.05em; }
.field input, .field select, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--border-strong); color:var(--fg);
  padding:14px 16px; font-family:var(--font-body); font-size:15px; border-radius:2px;
  transition:border-color var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); outline:none; }
.field textarea{ min-height:120px; resize:vertical; }
.hp-field{ position:absolute; left:-9999px; }
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--fg); color:var(--bg-raised); padding:14px 22px; font-size:14px; font-weight:600; opacity:0; pointer-events:none; transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); z-index:200; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.toast-error{ background:var(--accent); color:#fff; }

.contact-trust{ display:grid; gap:var(--sp-4); align-content:start; }
.contact-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:var(--sp-9); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-grid form{ display:grid; gap:var(--sp-5); }
.contact-info{ display:grid; gap:var(--sp-4); }
.contact-info dt{ font-family:var(--font-nav); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); }
.contact-info dd{ margin:4px 0 0; color:var(--fg); font-size:15px; }
/* .reveal-btn Basis-Styling steht jetzt zentral bei den Utility-Klassen weiter unten
   (vorher 11× identisch als Inline-Style auf jeder Seite wiederholt). */

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); background:var(--bg-raised); padding:var(--sp-8) 0 var(--sp-6); }
.footer-top{ display:flex; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap; }
.footer-cols{ display:flex; gap:var(--sp-9); flex-wrap:wrap; }
.footer-col h5{ font-family:var(--font-nav); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); margin-bottom:var(--sp-3); }
.footer-col a{ display:block; color:var(--muted); text-decoration:none; font-size:14px; padding:6px 0; min-height:32px; }
.footer-col a:hover{ color:var(--fg); }
.footer-bottom{ margin-top:var(--sp-8); padding-top:var(--sp-5); border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; font-size:13px; color:var(--muted-2); }
.footer-bottom a{ color:var(--muted-2); text-decoration:none; padding:4px 0; }
.footer-bottom a:hover{ color:var(--fg); }

/* ---------- Portfolio / Projekte ---------- */
.portfolio-note{ border:1px solid var(--border-strong); background:var(--surface); padding:var(--sp-7); max-width:720px; }
.portfolio-note .mono{ margin-bottom:var(--sp-3); }
.portfolio-note p{ color:var(--muted); font-size:15px; line-height:1.75; }
.portfolio-note p + p{ margin-top:var(--sp-4); }
.portfolio-note .text-lg{ color:var(--fg); margin-bottom:var(--sp-1); }

/* ---------- Projekt-Karte (vorbereitetes, aktuell ungenutztes Layout für zukünftige echte Referenzen) ---------- */
/* Felder pro Projekt: Projektname, Kunde, Branche, Ort, eingesetzte Leistung,
   Hero-Bild/-Video, Herausforderung, Umsetzung, Ergebnis, Videoformate, Galerie.
   Wird erst befüllt, sobald reale, freigegebene Projekte vorliegen. */
.project-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-7); }
@media (max-width:800px){ .project-grid{ grid-template-columns:1fr; } }
.project-card{ background:var(--surface); border:1px solid var(--border); }
.project-card-media{ aspect-ratio:4/3; overflow:hidden; }
.project-card-media img, .project-card-media video{ width:100%; height:100%; object-fit:cover; }
.project-card-body{ padding:var(--sp-6); }
.project-card-meta{ display:flex; gap:var(--sp-4); flex-wrap:wrap; font-family:var(--font-nav); font-size:12px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--sp-3); }
.project-card h3{ font-size:20px; }
.project-card p{ color:var(--muted); font-size:14.5px; margin-top:var(--sp-3); }
.project-card-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:var(--sp-4); }
.project-card-gallery img{ width:100%; aspect-ratio:1; object-fit:cover; }

/* ---------- Scroll-Reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Loader (nur beim allerersten Besuch, kurz) ---------- */
.loader{
  position:fixed; inset:0; z-index:999; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .35s ease;
}
.loader.hide{ opacity:0; pointer-events:none; }
.loader-mark{ display:flex; align-items:center; gap:8px; }
.loader-mark-img{ position:relative; display:inline-flex; }
.loader-mark-img img{ height:76px; width:auto; display:block; }
/* Maskiert den ins Logo eingebrannten (statischen) Punkt, damit darunter beim Blinken
   nichts durchscheint — sitzt exakt an derselben Stelle, etwas größer, in Loader-Hintergrundfarbe. */
.loader-dot-mask{
  position:absolute; left:95.3%; top:28%; transform:translate(-50%,-50%);
  width:13px; height:13px; border-radius:50%; background:var(--bg); flex:none; z-index:1;
}
.loader-dot{
  position:absolute; left:95.3%; top:28%; transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; z-index:2;
  animation:recblink 1.6s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce){ .loader-dot{ animation:none; } }
@media (max-width:480px){ .loader-mark-img img{ height:56px; } }

/* ---------- Utility ---------- */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--fg); color:var(--bg); padding:12px 20px; z-index:1000; }
.skip-link:focus{ left:16px; top:16px; }
.muted{ color:var(--muted); }

/* Vorher 11× identisch als Inline-Style wiederholt (E-Mail-Reveal-Button) —
   jetzt eine Klasse, dadurch auch die bislang ungestylte Instanz im Kontakt-
   Sidebar (kontakt.html) korrekt einheitlich. */
.reveal-btn{
  font-family:inherit; background:none; border:none; color:var(--muted); font-size:14px;
  padding:6px 0; cursor:pointer; text-align:left; min-height:32px;
}

/* Vorher 12× identisch als Inline-Style wiederholt (abwechselnd heller Hintergrund
   mit Ober-/Unterlinie zwischen zwei Sektionen). */
.section-alt{ background:var(--bg-raised); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
/* Variante ohne untere Trennlinie (vorher 5× identisch als Inline-Style, meist die
   letzte helle Sektion vor dem Abschluss-CTA). */
.section-alt-top{ background:var(--bg-raised); border-top:1px solid var(--border); }