:root{
  --ak-bg:#050505;--ak-bg2:#0b0b0c;--ak-panel:#101010;--ak-panel2:#16130f;
  --ak-gold:#d8ad55;--ak-gold2:#f2c86a;--ak-text:#f4f1eb;--ak-muted:#b9b2a8;
  --ak-line:rgba(216,173,85,.35);--ak-soft:rgba(255,255,255,.06);
}
html{scroll-behavior:smooth;background:var(--ak-bg)!important}
body{background:var(--ak-bg)!important;color:var(--ak-text)!important;overflow-x:hidden}
#scene,#vignette,#grid-overlay,#coord-hud,#loader,#hero-hint,#globe-tooltip,#intro-card{display:none!important}
#topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;height:76px!important;padding:0 max(5vw,30px)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;background:linear-gradient(180deg,rgba(4,4,4,.92),rgba(4,4,4,.58),transparent)!important;border:0!important;z-index:1000!important;backdrop-filter:blur(10px)}
#topbar .brand{font-size:30px!important;font-weight:800!important;letter-spacing:-1.8px!important;color:var(--ak-gold2)!important;text-decoration:none!important}
#topbar .brand span{color:#fff!important;font-weight:500!important}
.topnav{gap:30px!important;align-items:center!important}@media(min-width:1201px){.topnav{display:flex!important}}.topnav a{font-size:14px!important;color:#f0ede7!important;text-decoration:none!important;opacity:.9!important}.topnav a:hover{color:var(--ak-gold2)!important}.topnav .nav-cta{padding:13px 21px!important;border-radius:999px!important;background:linear-gradient(135deg,#f1c66e,#c79133)!important;color:#111!important;font-weight:800!important;box-shadow:0 8px 24px rgba(219,168,70,.18)!important}
#hero{min-height:690px!important;height:auto!important;position:relative!important;margin:0!important;padding:128px max(5vw,30px) 80px!important;display:flex!important;align-items:center!important;background:radial-gradient(circle at 72% 45%,rgba(207,154,60,.13),transparent 29%),linear-gradient(90deg,#050505 0%,#090908 44%,rgba(8,8,8,.38) 62%,rgba(8,8,8,.10) 100%)!important;overflow:hidden!important;border-bottom:1px solid rgba(216,173,85,.15)!important}
#hero:after{content:"";position:absolute;inset:72px 0 0 43%;background:url('/assets/redesign/ak-bot-desk.webp') center right/cover no-repeat;z-index:0;filter:saturate(.96) contrast(1.04);mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 100%)}
#hero:before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:210px;z-index:1;background:linear-gradient(180deg,transparent,rgba(5,5,5,.35) 45%,#050505 100%);pointer-events:none}
.hero-inner{position:relative!important;z-index:2!important;width:min(610px,48vw)!important;max-width:none!important;margin:0!important;padding:0!important;text-align:left!important}.hero-kicker,.sec-no{color:var(--ak-gold2)!important;letter-spacing:.22em!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important}.hero-inner h1{margin:14px 0 20px!important;font-size:clamp(54px,5.4vw,86px)!important;line-height:.96!important;letter-spacing:-.055em!important;color:#fff!important;font-weight:800!important}.hero-inner h1 em{font-style:normal!important;color:var(--ak-gold2)!important}.hero-sub{font-size:18px!important;line-height:1.58!important;color:#ddd7ce!important;max-width:585px!important}.hero-sub strong{color:#fff!important}.hero-status{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px 18px!important;margin:28px 0 0!important}.hs-chip{font-size:12px!important;color:#e9e4db!important;background:none!important;border:0!important;padding:0!important;display:flex!important;align-items:center!important;gap:8px!important}.hs-chip:last-child{grid-column:1/-1;color:#9e978d!important}.hs-chip .dot{width:7px!important;height:7px!important;background:var(--ak-gold2)!important;box-shadow:0 0 12px rgba(242,200,106,.65)!important}.hero-actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important;margin-top:28px!important}.btn-gold,.btn-ghost{border-radius:999px!important;padding:14px 23px!important;font-size:13px!important;letter-spacing:.01em!important;font-weight:800!important;text-decoration:none!important;transition:.2s ease!important}.btn-gold{background:linear-gradient(135deg,#f5cf7d,#c99132)!important;color:#0d0d0d!important;border:1px solid #f0c66c!important;box-shadow:0 12px 30px rgba(214,164,69,.18)!important}.btn-ghost{border:1px solid rgba(255,255,255,.4)!important;color:#fff!important;background:rgba(0,0,0,.28)!important}.btn-gold:hover,.btn-ghost:hover{transform:translateY(-2px)!important}
#page{position:relative!important;z-index:3!important;background:linear-gradient(180deg,#080808 0%,#050505 26%,#020202 62%,#000 100%)!important;max-width:none!important;padding:0 0 70px!important;margin:0!important}
#page:before{content:"";display:block;height:120px;margin-top:-60px;background:radial-gradient(ellipse at 50% 0,rgba(216,173,85,.10),transparent 58%);pointer-events:none}
.section{width:min(1220px,calc(100% - 64px))!important;margin:0 auto!important;padding:78px 0!important;border:0!important;position:relative!important}.section+.section{border-top:1px solid rgba(216,173,85,.10)!important}.sec-head{display:grid!important;grid-template-columns:minmax(250px,.9fr) minmax(300px,1.1fr)!important;gap:50px!important;align-items:end!important;margin-bottom:30px!important}.sec-head .sec-no{grid-column:1/-1!important;margin-bottom:-32px!important}.sec-head h2{font-size:clamp(36px,4vw,58px)!important;line-height:1.02!important;letter-spacing:-.04em!important;color:#fff!important;margin:0!important}.sec-head p{font-size:16px!important;line-height:1.65!important;color:#aaa39a!important;margin:0!important;max-width:650px!important}
#systeme{padding-top:30px!important}.section#systeme{background:linear-gradient(145deg,rgba(216,173,85,.07),rgba(255,255,255,.018))!important;border:1px solid rgba(216,173,85,.18)!important;border-radius:22px!important;padding:36px!important;margin-top:0!important;margin-bottom:20px!important}.section#systeme .sec-head{grid-template-columns:1fr 1fr!important;margin-bottom:22px!important}.section#systeme .sec-head h2{font-size:34px!important}#terminal{border:1px solid rgba(216,173,85,.2)!important;border-radius:14px!important;background:#070707!important;overflow:hidden!important}.term-bar{background:#11100f!important;border-bottom-color:rgba(216,173,85,.2)!important}
.svc-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}.svc-card,.price-card,.lab-slot,.ref-box,.cta-box{background:linear-gradient(145deg,rgba(24,22,19,.92),rgba(10,10,10,.96))!important;border:1px solid rgba(216,173,85,.23)!important;border-radius:16px!important;box-shadow:inset 0 1px rgba(255,255,255,.025),0 18px 55px rgba(0,0,0,.16)!important}.svc-card{padding:24px!important;min-height:220px!important;position:relative!important;overflow:hidden!important}.svc-card:after{content:"";position:absolute;width:160px;height:160px;right:-90px;top:-90px;background:radial-gradient(circle,rgba(216,173,85,.10),transparent 70%);pointer-events:none}.svc-card:hover{border-color:rgba(242,200,106,.55)!important;transform:translateY(-2px)!important}.svc-top{display:flex!important;align-items:center!important;justify-content:space-between!important}.svc-num{color:#8f7a51!important;font-size:12px!important}.svc-icon{width:34px!important;height:34px!important;stroke:var(--ak-gold2)!important;background:rgba(216,173,85,.08)!important;padding:8px!important;border:1px solid rgba(216,173,85,.18)!important;border-radius:10px!important}.svc-card h3{font-size:21px!important;color:#fff!important;margin:22px 0 10px!important}.svc-card p{color:#aaa49a!important;line-height:1.58!important;font-size:14px!important}.svc-price{color:var(--ak-gold2)!important;font-size:14px!important;font-weight:800!important;margin-top:18px!important}.svc-wide{grid-column:span 3!important;min-height:auto!important}.svc-more{display:inline-flex!important;margin-top:18px!important}
#preise{position:relative!important}.price-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}.price-card{padding:28px!important;position:relative!important}.price-card.featured{border-color:rgba(242,200,106,.75)!important;box-shadow:0 0 0 1px rgba(242,200,106,.08),0 18px 55px rgba(0,0,0,.25),0 0 34px rgba(216,173,85,.08)!important}.pc-name{color:var(--ak-gold2)!important;letter-spacing:.16em!important;font-size:11px!important}.pc-price{font-size:36px!important;color:#fff!important;margin:12px 0 4px!important}.pc-price span{font-size:13px!important;color:#9d978e!important}.pc-time{color:#b9b2a8!important}.price-card li{color:#c7c0b6!important;border-color:rgba(255,255,255,.07)!important}.pc-flag{background:var(--ak-gold2)!important;color:#111!important;border-radius:999px!important;padding:5px 10px!important}
.price-extra,.proof-list{background:rgba(255,255,255,.018)!important;border:1px solid rgba(216,173,85,.14)!important;border-radius:16px!important;overflow:hidden!important}.pe-item,.proof-row{border-color:rgba(255,255,255,.06)!important;color:#bcb5aa!important}.proof-row strong,.pe-item strong{color:#fff!important}
.ref-box{padding:10px 24px!important}.ref-row{padding:19px 0!important;border-color:rgba(255,255,255,.06)!important;color:#b8b0a6!important}.ref-row strong{color:#fff!important}.labs-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}.lab-slot{padding:30px!important;min-height:200px!important}.lab-slot h3{color:#fff!important;font-size:26px!important}.lab-slot p{color:#aaa49a!important;line-height:1.6!important}
.faq-liste{max-width:900px!important}.faq-item{background:linear-gradient(90deg,rgba(255,255,255,.025),rgba(216,173,85,.025))!important;border:1px solid rgba(216,173,85,.15)!important;border-radius:10px!important;margin-bottom:8px!important;overflow:hidden!important}.faq-item summary{padding:17px 19px!important;color:#f1eee8!important}.faq-item p{color:#aaa39a!important;padding:0 19px 18px!important}
.cta-box{padding:42px!important;background:radial-gradient(circle at 85% 20%,rgba(216,173,85,.12),transparent 34%),linear-gradient(145deg,#15110b,#090909)!important}.cta-box h2{font-size:clamp(38px,4vw,58px)!important;color:#fff!important;letter-spacing:-.04em!important;line-height:1.02!important}.cta-box p{color:#b9b2a8!important;max-width:760px!important;font-size:16px!important;line-height:1.65!important}.cta-meta{color:#8f887f!important;border-top-color:rgba(216,173,85,.16)!important}
#footer{width:min(1220px,calc(100% - 64px))!important;margin:0 auto!important;padding:38px 0 10px!important;border-top:1px solid rgba(216,173,85,.16)!important;background:transparent!important}.ft-brand{color:var(--ak-gold2)!important;font-size:28px!important}.ft-brand span{color:#fff!important}.ft-info,.ft-links a{color:#817b73!important}.ft-links a:hover{color:var(--ak-gold2)!important}
.legal-overlay{background:rgba(0,0,0,.82)!important;backdrop-filter:blur(16px)!important}.legal-panel{background:#0b0b0b!important;border:1px solid rgba(216,173,85,.28)!important;border-radius:18px!important;color:#bbb4aa!important}.legal-panel h2,.legal-panel h3,.akw-field label{color:#fff!important}.akw-field input,.akw-field textarea{background:#060606!important;border:1px solid rgba(216,173,85,.2)!important;color:#fff!important;border-radius:8px!important}
#fade{background:#000!important}
@media(max-width:980px){.topnav{gap:16px!important}html:not(.nav-offen) .topnav a:nth-child(3),html:not(.nav-offen) .topnav a:nth-child(4){display:none!important}#hero{padding-top:110px!important;min-height:780px!important;align-items:flex-start!important}.hero-inner{width:60%!important}.hero-inner h1{font-size:58px!important}#hero:after{left:34%!important;opacity:.76!important}.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.svc-wide{grid-column:span 2!important}.price-grid{grid-template-columns:1fr!important}.sec-head{grid-template-columns:1fr!important;gap:16px!important}.sec-head .sec-no{margin:0!important}.labs-grid{grid-template-columns:1fr!important}}
@media(max-width:700px){#topbar{height:66px!important;padding:0 18px!important;background:rgba(5,5,5,.88)!important}html:not(.nav-offen) .topnav a{display:none!important}.topnav .nav-cta{display:inline-flex!important}.brand{font-size:24px!important}#hero{min-height:760px!important;padding:110px 22px 360px!important;background:#050505!important}.hero-inner{width:100%!important}.hero-inner h1{font-size:50px!important}.hero-sub{font-size:16px!important}.hero-status{grid-template-columns:1fr!important}.hs-chip:last-child{grid-column:auto!important}#hero:after{inset:auto 0 0 0!important;height:400px!important;background-size:cover!important;background-position:55% center!important;mask-image:linear-gradient(180deg,transparent,#000 22%,#000 100%)!important;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 100%)!important}.section{width:calc(100% - 36px)!important;padding:58px 0!important}.section#systeme{width:calc(100% - 36px)!important;padding:24px!important}.section#systeme .sec-head{grid-template-columns:1fr!important}.svc-grid{grid-template-columns:1fr!important}.svc-wide{grid-column:auto!important}.labs-grid{grid-template-columns:1fr!important}.cta-box{padding:28px!important}#footer{width:calc(100% - 36px)!important}.hero-actions .btn-gold,.hero-actions .btn-ghost{width:100%!important;text-align:center!important;justify-content:center!important}}

/* ============================================================================
   Korrekturen 23.09.2026 (gemessen, nicht geschaetzt)

   1) HERO-LAYOUT nach Atis Referenz: Bild vollflaechig im Hintergrund,
      Schrift direkt darueber - KEIN Kasten hinter dem Text. Lesbarkeit kommt
      aus einem weichen Verlauf, nicht aus einer Flaeche.
      Vorher lag das Motiv als eigenes Feld rechts (#hero:after).

   2) HERO-BILD war gestreckt. Ursache: die Bildflaeche war bei 1920 px
      1092x802 gross, die Datei aber nur 860x618 -> rund 30 % hochgezogen.
      Zusaetzlich steckten im Bild Reste einer fremden Seite ("en.", "ungen",
      ein angeschnittener Button, Streifen "Zukunftssichere Loesungen").
      Diese Reste sind jetzt aus der Datei geschnitten:
      ak-bot-desk-pano.webp (772x543, links 88 px und unten 75 px entfernt).

   3) INHALT UNTER DEM HERO war zu schmal. Ursache: die Redesign-Regel setzt
      width:1220px, das Original-Stylesheet aber max-width:1180px - max-width
      gewinnt, die Regel lief ins Leere. Gemessen bei 1920 px: Hero-Text ab
      128 px, Inhalt darunter erst ab 368 px (240 px Versatz).
   ============================================================================ */

/* 1+2: Motiv fuellt den GANZEN Hero - auch hinter dem Text (Vorgabe Ati,
   Referenzbild 23.09.). Links steht also kein schwarzer Block mehr.
   Aufbau in drei Ebenen:
     #hero:after  (z-index 0) = das Foto, volle Breite
     #hero:before (z-index 1) = Verlaeufe fuer Lesbarkeit, KEIN Kasten
     .hero-inner  (z-index 2) = der Text
   Im Bild steckten Reste einer fremden Seite ("en.", "ungen", ein
   angeschnittener Button, Streifen "Zukunftssichere Loesungen") - die sind
   aus der Datei geschnitten: ak-bot-desk-pano.webp (772x543). */
#hero {
  background-image: none !important;
  background-color: #050505 !important;
}

#hero:after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 0 !important;
  /* Panorama 2172x724 (3:1). "contain" scheidet hier aus: es liesse bei einer
     2,21:1-Hero-Flaeche rund 230 px oben und unten leer. Deshalb cover, rechts
     ausgerichtet - so bleibt der Bot vollstaendig und links wird nur der Teil
     beschnitten, der ohnehin hinter dem abgedunkelten Textbereich liegt. */
  background: url('/assets/redesign/ak-bot-desk-pano.webp') right center / cover no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Lesbarkeit ueber dem Foto: links abgedunkelt, oben fuer die Topbar,
   unten Auslauf nach Schwarz. Das Motiv bleibt ueberall sichtbar. */
#hero:before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  height: auto !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(3,3,3,.90) 0%, rgba(3,3,3,.70) 26%, rgba(3,3,3,.34) 48%, rgba(3,3,3,.10) 70%, rgba(3,3,3,.26) 100%),
    linear-gradient(180deg, rgba(3,3,3,.58) 0%, rgba(3,3,3,0) 18%, rgba(3,3,3,0) 60%, #050505 100%) !important;
}

/* Schrift liegt frei auf dem Bild - nur ein weicher Schatten fuer Lesbarkeit */
.hero-inner h1,
.hero-sub,
.hero-kicker,
.hs-chip { text-shadow: 0 2px 20px rgba(0,0,0,.6) !important; }
.hero-inner { width: min(640px, 52vw) !important; }

/* 3: Inhalt fluchtet mit dem Hero-Text */
.section,
#footer {
  max-width: none !important;
  /* Volle Fensterbreite, nur der Seitenrand des Heros bleibt stehen -
     dadurch fluchten Hero und Inhalt und es gibt keinen Deckel mehr. */
  width: calc(100% - 2 * max(5vw, 30px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* "Sinnvoll" heisst: die Flaeche waechst, die Lesbarkeit nicht kaputt.
   Karten bekommen ab genug Platz eine weitere Spalte, statt einzeln immer
   breiter zu werden; Fliesstext behaelt eine Zeilenlaenge, die man noch liest. */
/* Alle zehn Leistungsblöcke einheitlich.
   Vorher: Modul 09 und 10 liefen als ".svc-wide" ueber die ganze Breite und
   standen dort mit riesigem Leerraum rechts, waehrend die uebrigen Karten je
   nach Fensterbreite zu fuenft oder sechst in einer Reihe klebten.
   Jetzt: gleiche Kachelgroesse fuer alle, feste Spaltenzahl je Breite -
   ab 1600 px gehen die zehn Module in genau zwei Reihen auf. */
.svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 900px)  { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1200px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1600px) { .svc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (max-width: 619px)  { .svc-grid { grid-template-columns: 1fr !important; } }

.price-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)) !important;
}

/* Sonderformat der Karten 09/10 aufheben - sie sind jetzt normale Kacheln. */
.svc-card.svc-wide,
.svc-wide {
  grid-column: auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-height: 220px !important;
}
.svc-card.svc-wide .svc-top,
.svc-wide .svc-top {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 0 !important;
}
.svc-card.svc-wide p,
.svc-wide p {
  flex: 1 !important;
  max-width: none !important;
  margin-top: 12px !important;
}
.svc-card.svc-wide .svc-price,
.svc-wide .svc-price { align-self: flex-start !important; margin-top: 18px !important; }

/* Gleicher Fallstrick wie bei .section: das Original setzt .sec-head auf
   max-width:640px. Dadurch blieben die Sektionskoepfe bei 590 px stehen,
   obwohl die Sektion 1724 px breit ist (gemessen). */
.sec-head { max-width: none !important; }
.sec-head p { max-width: 760px !important; }
.svc-card p,
.lab-slot p,
.ref-row p,
.faq-item p { max-width: 78ch !important; }
.faq-liste { max-width: 1100px !important; }
.proof-row,
.flow-row { max-width: 1500px !important; }

@media (max-width: 980px) {
  /* Schmaler als Desktop: hier fuellt das Motiv die Flaeche wieder, sonst
     bliebe bei contain oben und unten zu viel Leerraum. */
  #hero:after { background-size: cover !important; background-position: 72% center !important; }
  .hero-inner { width: min(560px, 64vw) !important; }
}

@media (max-width: 700px) {
  /* Mobil: Motiv bleibt Hintergrund, Verlauf deutlich staerker, damit der
     Text ohne Kasten lesbar bleibt (Designregel: Text nicht ueberdecken). */
  #hero {
    background-image: none !important;
    background-color: #050505 !important;
    padding-bottom: 96px !important;
    min-height: 700px !important;
  }
  /* Mobil: Motiv als flaechiger Hintergrund, von oben abgedunkelt, damit der
     Text ohne Kasten lesbar bleibt. */
  /* Beim 3:1-Panorama sind auf dem Handy nur ~14 % der Bildbreite sichtbar -
     der Ausschnitt muss deshalb genau auf dem Bot sitzen (er steht bei rund
     63-78 % der Bildbreite), sonst wird er angeschnitten. */
  #hero:after { background-size: cover !important; background-position: 70% center !important; }
  #hero:before {
    background:
      linear-gradient(180deg, rgba(3,3,3,.86) 0%, rgba(3,3,3,.64) 34%, rgba(3,3,3,.52) 62%, #050505 100%) !important;
  }
  .hero-inner { width: 100% !important; }
  .section,
  #footer { width: calc(100% - 36px) !important; }
}

/* ----------------------------------------------------------------------------
   4) HERO-KOPF LAG HINTER DER TOPBAR.
   Ursache: #hero ist ein Flex-Container mit align-items:center. Der Inhalt ist
   hoeher als die Content-Box (gemessen 1920x1000: Inhalt ~834 px, Box 666 px),
   laeuft deshalb symmetrisch ueber und schiebt den Kicker auf y=20 px - unter
   eine 76 px hohe Topbar. padding-top allein half nicht, weil zentriert wird.
   Jetzt oben ausgerichtet, dann wirkt der Abstand wie vorgesehen.

   5) MOBIL KOLLIDIERTE DIE MARKE mit dem Button "Projekt starten"
   (gemessen bei 375 px: beide ueberlappten). Marke und Button kompakter.
   ---------------------------------------------------------------------------- */

#hero {
  align-items: flex-start !important;
  padding-top: 122px !important;
}

/* Der eigentliche Grund, warum kein Padding half: .hero-inner ist im
   Original-Stylesheet absolut mit bottom:108px positioniert. Das Redesign
   stellt es auf position:relative um - dadurch wirkt dieses geerbte "bottom"
   als Versatz um 108 px nach OBEN, mitten unter die Topbar.
   Gemessen 375x812: Kicker bei y=8 trotz padding-top:104px. */
.hero-inner {
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

@media (max-width: 700px) {
  #hero { padding-top: 104px !important; }
  #topbar .brand { font-size: 19px !important; letter-spacing: .12em !important; }
  #topbar .topnav .nav-cta { padding: 10px 14px !important; font-size: 11px !important; }
}

/* Gleiche Breite reichte nicht: Modul 10 hat den mit Abstand laengsten Text und
   zog die ganze zweite Reihe auf 768 px, waehrend Reihe 1 bei 353 px blieb
   (gemessen bei 1920 px). Die Kachel zeigt den Text deshalb auf sieben Zeilen
   an - vollstaendig bleibt er im Markup (Suchmaschinen sehen ihn weiter) und
   ausfuehrlich auf der Unterseite /prozessautomatisierung/. */
.svc-card p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 7 !important;
  overflow: hidden !important;
}
.svc-card { min-height: 0 !important; }

/* Auch die Zeilen gleich hoch: Modul 08 hat eine zweizeilige Preiszeile und
   Modul 10 zusaetzlich den Details-Button, dadurch war Reihe 2 hoeher als
   Reihe 1 (481 vs. 353 px gemessen). grid-auto-rows:1fr gibt allen Zeilen
   dieselbe Hoehe, der Preis bleibt durch flex:1 am unteren Rand. */
.svc-grid { grid-auto-rows: 1fr !important; }

/* ============================================================================
   Referenz-Globus (23.09.2026)
   Links die Projekttafel, rechts die drehbare Kugel. Beim Drehen wechselt das
   Projekt. Die Kugel bringt keine eigene Bibliothek mit: three.js liegt bereits
   unter /vendor/ und wird erst geladen, wenn die Sektion in Sichtweite kommt.
   ============================================================================ */
/* Eine Reihe: Bild links, Text in der Mitte, Kugel rechts. Darunter als
   Abschluss des Blocks die drei Aussagen und der Button. */
.refglobe {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.78fr) minmax(0, 1.25fr);
  gap: 28px;
  align-items: center;
  margin: 26px 0 30px;
  background: linear-gradient(145deg, rgba(24,22,19,.92), rgba(10,10,10,.96));
  border: 1px solid rgba(216,173,85,.23);
  border-radius: 16px;
  padding: 30px 32px;
  position: relative;      /* Bezug fuer das Sternenfeld */
  overflow: hidden;        /* Sterne enden an den abgerundeten Ecken */
  min-height: 560px;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 55px rgba(0,0,0,.16);
}
.rg-kopf {
  letter-spacing: .22em; text-transform: uppercase;
  font-size: 11px; font-weight: 700; color: var(--ak-gold2, #f2c86a);
}
.rg-meta { margin-top: 16px; font-size: 12px; letter-spacing: .12em; color: #8f7a51; text-transform: uppercase; }
.rg-titel { margin: 8px 0 12px; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; color: #fff; font-weight: 700; }
.rg-text { margin: 0; font-size: 14.5px; line-height: 1.7; color: #aaa49a; max-width: 62ch; min-height: 5.1em; }
.rg-punkte { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.rg-punkt {
  width: 26px; height: 5px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(216,173,85,.26); cursor: pointer; transition: background .25s, width .25s;
}
.rg-punkt:hover { background: rgba(242,200,106,.55); }
.rg-punkt.ist-aktiv { background: var(--ak-gold2, #f2c86a); width: 40px; }
.rg-hinweis { margin-top: 14px; font-size: 11px; letter-spacing: .14em; color: #7d766d; text-transform: uppercase; }

/* Kurzes Einblenden beim Projektwechsel - kein Springen des Layouts */
.rg-wechsel .rg-titel,
.rg-wechsel .rg-text,
.rg-wechsel .rg-meta { animation: rg-ein .38s ease both; }
@keyframes rg-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.rg-bild  { grid-column: 1; grid-row: 1; align-self: center; }
.rg-tafel { grid-column: 2; grid-row: 1; }
/* Der Fuss endet vor der dritten Spalte, damit nichts unter der Kugel liegt. */
.rg-fuss  { grid-column: 1 / 3; grid-row: 2; }
.rg-bild, .rg-tafel, .rg-fuss { position: relative; z-index: 1; }
/* Sternenfeld ueber das ganze Modul, Kugel darin rechts (Versatz siehe JS). */
.rg-buehne { position: absolute; inset: 0; z-index: 0; }
.rg-slot { grid-column: 3; grid-row: 1 / -1; }
/* Schein hinter der Kugel und ein ruhiger Verlauf nach links, damit der Text
   ueber dem Sternenfeld sicher lesbar bleibt. Beide lassen Klicks durch. */
.rg-buehne:before {
  content: ""; position: absolute; top: 50%; right: 4%;
  width: 62%; aspect-ratio: 1 / 1; transform: translateY(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(216,173,85,.14), transparent 62%);
  pointer-events: none; z-index: 1;
}
.rg-buehne:after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.82) 28%, rgba(10,10,10,.26) 44%, transparent 54%);
}
.refglobe canvas {
  width: 100%; height: 100%; display: block;
  position: absolute; inset: 0;
  cursor: grab; touch-action: pan-y;
  opacity: 0; transition: opacity .6s ease;
}
.refglobe.rg-bereit canvas { opacity: 1; }
.refglobe.rg-zieht canvas { cursor: grabbing; }
/* Ohne WebGL bleibt die Tafel allein stehen - die Projekte sind weiter lesbar */
.refglobe.rg-ohne-kugel .rg-buehne { display: none; }
.refglobe.rg-ohne-kugel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.refglobe.rg-ohne-kugel .rg-tafel { grid-column: 2; }

@media (max-width: 1100px) {
  .rg-slot { display: none; }
  /* Zu dritt wird es zu eng: Bild und Text nebeneinander, die Kugel steht
     mittig hinter dem Modul und tritt zurueck, damit der Text lesbar bleibt. */
  .refglobe { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); min-height: 0; }
  .rg-fuss  { grid-column: 1 / -1; }
  .rg-buehne { opacity: .34; }
  .rg-buehne:after { background: linear-gradient(180deg, rgba(10,10,10,.72), rgba(10,10,10,.72)); }
}
@media (max-width: 760px) {
  .refglobe { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .rg-bild, .rg-tafel, .rg-fuss { grid-column: 1; grid-row: auto; }
  .rg-bild { max-height: 220px; }
  .rg-text { min-height: 0; }
}

/* Projektbild im Referenz-Block: volle Breite unter Tafel und Globus. */
.rg-bild {
  margin: 0;
  border: 1px solid rgba(216,173,85,.22);
  border-radius: 14px;
  overflow: hidden;
  background: #060606;
  aspect-ratio: 4 / 3;
  max-height: 300px;
}
.rg-bild img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  opacity: 0; transition: opacity .45s ease;
}
.refglobe.rg-bild-da .rg-bild img { opacity: 1; }
.rg-fuss { margin-top: 26px; }
.rg-aussagen .ref-row { padding: 12px 0 !important; }
.rg-aussagen .ref-row p { font-size: 13.5px !important; }
.rg-cta { margin-top: 18px !important; display: inline-block !important; }



/* Projekte ohne Screenshot: Bildflaeche einklappen statt leer stehen lassen */
.refglobe.rg-ohne-bild .rg-bild { visibility: hidden; }

/* Nav zwischen 701 und 980 px: .topnav hat nowrap, und die Ausblendregel des
   Designsystems (.topnav a:not(.nav-cta){display:none}) greift erst unter
   700 px - dazwischen laeuft die Leiste aus dem Bild. Gemessen bei 768 px:
   Leiste bis 946 px. Ebenso bricht .ft-links nicht um. */
@media (max-width: 980px) {
  html:not(.nav-offen) .topnav a:not(.nav-cta) { display: none; }
}
#footer .ft-links { flex-wrap: wrap; row-gap: 12px; }
/* Tastaturbedienung sichtbar machen */
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 1px solid var(--ak-gold2, #f2c86a); outline-offset: 3px;
}

/* Der Hero laesst Klicks zum Globus durch (pointer-events:none auf dem Textblock).
   Ein Link darin ist dadurch nicht anklickbar - gemessen: elementFromPoint liefert
   das darunterliegende div. Deshalb Klicks fuer Links im Hero-Text wieder
   annehmen und sie ueber die Kugel legen. */
.hero-sub a, .hero-inner p a {
  pointer-events: auto;
  position: relative;
  z-index: 6;
  color: var(--ak-gold2, #f2c86a);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(242,200,106,.45);
}
.hero-sub a:hover, .hero-inner p a:hover { text-decoration-color: currentColor; }