/* ---------------------------------------------------------------------
   Kinoschicht: alles, was die Seite größer wirken lässt, als sie ist.
   Liegt getrennt von der Startseite, damit man sie im Ganzen abschalten
   kann, wenn sie einmal stört.
   --------------------------------------------------------------------- */

/* Text im Aufmacher liegt über dem Hintergrund. */
.aufmacher .inhalt,.aufmacher .statuszeile{position:relative;z-index:10}

/* Überschriften kommen räumlich herein: jede Zeile kippt aus der Tiefe
   nach vorn, statt nur hochzurutschen. Das ist der Unterschied zwischen
   einer Animation und einer Kamera. */
.film{perspective:900px}
.film .zl{perspective:900px}
.film .zi{transform-origin:50% 100%;
  transform:translateY(108%) rotateX(38deg);
  transition:transform 1.15s var(--weich)}
.film.da .zi,.auf.da .film .zi{transform:none}

/* Große Überschriften bekommen beim Auftritt einen Hauch Leuchten mit,
   das dann ausläuft. */
@keyframes anleuchten{0%{text-shadow:0 0 42px rgba(143,216,231,.5)}100%{text-shadow:0 20px 60px rgba(0,0,0,.6)}}
.film.da .zi{animation:anleuchten 1.6s var(--weich) forwards}

/* Bewegter Aufmacher: der Clip liegt über dem Standbild und blendet auf,
   sobald er wirklich läuft. Kommt er nicht, bleibt das Bild stehen und
   niemand merkt etwas. */
.aufmacher .film-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 50%;opacity:0;transition:opacity 1.4s ease;will-change:opacity}
.aufmacher .film-bg.laeuft{opacity:1}
@media (max-width:900px){.aufmacher .film-bg{display:none}}

/* Ladevorhang: Wortmarke, eine Linie läuft voll, dann fährt alles auf. */
.vorspann{position:fixed;inset:0;z-index:101;background:var(--grund);display:grid;place-items:center;
  transition:opacity .7s ease .55s,visibility .7s .55s}
.vorspann .mitte{display:grid;justify-items:center;gap:26px}
.vorspann img{height:74px;width:auto;opacity:0;transform:translateY(14px);animation:vorspannLogo 1s var(--weich) .1s forwards}
.vorspann .linie{width:min(240px,50vw);height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.vorspann .linie i{display:block;height:100%;background:linear-gradient(90deg,var(--tuerkis),var(--gruen));
  transform:scaleX(0);transform-origin:0 50%;animation:vorspannLinie 1.15s var(--weich) .3s forwards}
html:not(.vorhang) .vorspann{opacity:0;visibility:hidden}
@keyframes vorspannLogo{to{opacity:1;transform:none}}
@keyframes vorspannLinie{to{transform:scaleX(1)}}

/* Lichtstreifen, der langsam über den Aufmacher zieht (Anamorphot-Look) */
.aufmacher .streif{position:absolute;top:-40%;left:-30%;width:40%;height:180%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(143,216,231,.16),rgba(255,255,255,.06),transparent);
  transform:rotate(14deg);filter:blur(22px);animation:streifen 11s ease-in-out infinite}
@keyframes streifen{0%{transform:rotate(14deg) translateX(-30vw);opacity:0}
  18%{opacity:1}42%{opacity:0}100%{transform:rotate(14deg) translateX(150vw);opacity:0}}

/* Hinweis, dass es weitergeht */
.weiterhinweis{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:rgba(234,244,245,.45);z-index:1}
.weiterhinweis .schiene{width:1px;height:54px;background:linear-gradient(180deg,rgba(46,171,197,.7),transparent);position:relative;overflow:hidden}
.weiterhinweis .schiene i{position:absolute;left:0;width:1px;height:16px;background:var(--tuerkis-hell);animation:rutschen 2.4s ease-in-out infinite}
@keyframes rutschen{0%{top:-16px}60%,100%{top:54px}}
@media (max-width:760px){.weiterhinweis{display:none}}

/* Zwei Bereiche als Kacheln mit eigenem Bild: KMU und Medical, gleiches
   Gewicht, wenig Text, die Leistungen als Schlagworte. */
.bereiche .paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px);
  margin-top:clamp(28px,3.4vw,52px);align-items:stretch;perspective:1400px}
.bereich{position:relative;display:flex;flex-direction:column;gap:16px;overflow:hidden;
  border:1px solid var(--rand);border-radius:26px;padding:clamp(28px,3.2vw,46px);
  min-height:clamp(380px,46vh,520px);justify-content:flex-end;isolation:isolate;
  transition:border-color .4s ease,transform .5s var(--weich)}
.bereich .kachelbild{position:absolute;inset:0;z-index:-2;overflow:hidden}
.bereich .kachelbild img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.5) brightness(.55);transform:scale(1.04);
  transition:transform 1.2s var(--weich),filter .8s ease}
.bereich::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,9,11,.25) 0%,rgba(4,9,11,.82) 52%,rgba(4,9,11,.96) 100%)}
/* Räumliche Neigung: die Kachel kippt zum Zeiger, der Inhalt steht
   leicht davor. Alles nur Transform, also auf der Grafikkarte. */
.bereich{transform-style:preserve-3d;
  transform:rotateX(var(--kx,0deg)) rotateY(var(--ky,0deg)) translateY(var(--kz,0px));
  transition:border-color .4s ease,transform .6s var(--weich)}
.bereich.zeigt{transition:border-color .4s ease,transform .12s linear}
.bereich>h2,.bereich>.einzeiler,.bereich>.worte,.bereich>.tasten{transform:translateZ(38px)}
.bereich:hover{border-color:rgba(46,171,197,.55);--kz:-6px}
.bereich:hover .kachelbild img{transform:scale(1.09);filter:saturate(.8) brightness(.62)}
.bereich .glanz{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(143,216,231,.16),transparent 65%)}
.bereich:hover .glanz{opacity:1}
.bereich h2{font-size:clamp(30px,3.6vw,50px)}
.bereich .einzeiler{color:var(--leise);font-size:clamp(16px,1.35vw,19px);max-width:44ch}
.bereich .worte{display:flex;flex-wrap:wrap;gap:8px}
.bereich .worte span{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(143,216,231,.86);border:1px solid rgba(46,171,197,.32);border-radius:999px;padding:6px 13px;
  background:rgba(4,9,11,.35)}
.bereich .tasten{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px}
.bereich .weiterlesen{font-size:15px;color:rgba(143,216,231,.85)}
@media (max-width:860px){.bereiche .paar{grid-template-columns:1fr}.bereich{min-height:340px}}

/* Der Unterschied: vier Paare, links gestrichen, rechts abgehakt. Man
   erfasst es, statt es zu lesen. */
.paare{margin-top:clamp(28px,3.4vw,52px);display:grid;gap:0;
  border-top:1px solid rgba(255,255,255,.1)}
.paarzeile{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(16px,2.4vw,40px);padding:clamp(18px,2.2vw,28px) 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateY(24px);
  transition:opacity .8s ease,transform .9s var(--weich)}
.paare.da .paarzeile{opacity:1;transform:none}
.paare.da .paarzeile:nth-child(3){transition-delay:.08s}
.paare.da .paarzeile:nth-child(4){transition-delay:.16s}
.paare.da .paarzeile:nth-child(5){transition-delay:.24s}
.paare.da .paarzeile:nth-child(6){transition-delay:.32s}
/* Der Haken wird gezeichnet, statt einfach da zu sein. */
.paarzeile .mit .zeichen svg path{stroke-dasharray:18;stroke-dashoffset:18;
  transition:stroke-dashoffset .6s var(--weich) .25s}
.paare.da .paarzeile .mit .zeichen svg path{stroke-dashoffset:0}
.paarzeile .pfeil{transform:translateX(-8px);opacity:0;transition:.7s var(--weich) .2s}
.paare.da .paarzeile .pfeil{transform:none;opacity:1}
.paarzeile .ohne,.paarzeile .mit{display:flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(17px,1.9vw,26px);line-height:1.2}
.paarzeile .ohne{color:rgba(234,244,245,.42);text-decoration:line-through;
  text-decoration-color:rgba(234,244,245,.3);text-decoration-thickness:1px}
.paarzeile .mit{color:var(--schrift)}
.paarzeile .zeichen{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.paarzeile .ohne .zeichen{border:1px solid rgba(234,244,245,.22)}
.paarzeile .mit .zeichen{background:rgba(46,171,197,.16);border:1px solid rgba(46,171,197,.55)}
.paarzeile .zeichen svg{width:13px;height:13px}
.paarzeile .ohne .zeichen svg{stroke:rgba(234,244,245,.45)}
.paarzeile .mit .zeichen svg{stroke:var(--tuerkis-hell)}
.paarzeile .pfeil{color:rgba(46,171,197,.4);font-size:20px;line-height:1}
.paare .kopf{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.4vw,40px);
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)}
.paare .kopf span{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:rgba(234,244,245,.45)}
.paare .kopf span.jetzt{color:var(--tuerkis)}
@media (max-width:760px){
  .paarzeile,.paare .kopf{grid-template-columns:1fr;gap:10px}
  .paarzeile .pfeil,.paare .kopf .pfeil{display:none}
  .paarzeile{padding:18px 0}
}


/* Weiterentwicklung: drei Absätze, breit gesetzt, ruhiger als der Rest */
.weitertext{display:grid;gap:22px;margin-top:clamp(26px,3vw,42px);max-width:78ch}
.weitertext p{color:var(--leise);font-size:clamp(17px,1.5vw,21px)}
.weitertext p:first-child{color:var(--schrift);font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2vw,27px);letter-spacing:-.02em;line-height:1.3}

/* Partner: erst warum, dann die Namen */
.partnertext{margin-top:clamp(20px,2.4vw,32px);max-width:70ch;color:var(--leise);font-size:clamp(17px,1.5vw,21px)}
.partnerliste{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,40px)}
.partnerliste .chip{font-family:var(--display);font-weight:700;letter-spacing:.02em}

/* Region: erst die Aussage, dann die Orte */
.regiontext{margin:clamp(22px,2.6vw,34px) auto 0;max-width:62ch;color:var(--leise);font-size:clamp(17px,1.5vw,21px)}
.regionzusatz{margin:16px auto 0;max-width:62ch;color:rgba(234,244,245,.5);font-size:16px}

/* Lücke, die Christian noch füllen muss. Fällt in der Vorschau auf und
   darf so nie auf die echte Seite. */
.luecke{background:rgba(216,154,78,.22);color:#F2C98A;padding:2px 8px;border-radius:6px;
  font-family:var(--display);font-weight:700;font-size:.82em;letter-spacing:.06em}

/* Titelkarte im Vollbild */
.titelkarte{position:relative;height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:0 var(--seite)}
.titelkarte .bild{position:absolute;inset:0;z-index:-2;overflow:hidden}
.titelkarte .bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform;filter:brightness(.62)}
.titelkarte::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 50%,rgba(4,9,11,.35),rgba(4,9,11,.94))}
.titelkarte h2{font-size:clamp(46px,11vw,168px);letter-spacing:-.06em;line-height:.92}
.titelkarte p{margin-top:26px;font-size:clamp(17px,1.8vw,23px);color:rgba(234,244,245,.78);max-width:620px;margin-left:auto;margin-right:auto}
.titelkarte .balken{position:absolute;left:0;right:0;height:9vh;background:#000;z-index:1}
.titelkarte .balken.oben{top:0}.titelkarte .balken.unten{bottom:0}

/* Leistungen: sechs Bänder über die volle Breite, eines unter dem anderen.
   Das Bild läuft bis an den Rand der Seite, die Seite wechselt von Band zu
   Band. So bekommt jede Leistung ihren eigenen Auftritt. */
.leistungen{padding-left:0;padding-right:0}
.leistungen .kopfzeile{padding:0 var(--seite);margin-bottom:clamp(30px,4vw,60px)}
.leistungsliste{display:flex;flex-direction:column}
.leistung{display:grid;grid-template-columns:1.06fr 1fr;align-items:stretch;
  border-top:1px solid rgba(255,255,255,.09)}
.leistung:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.leistung .bild{position:relative;overflow:hidden;min-height:clamp(250px,42vh,460px)}
/* Das Bild ist größer als sein Ausschnitt und wandert beim Scrollen darin.
   Nur eine Verschiebung, keine Größenänderung: das bleibt ruhig und kostet
   die Grafikkarte nichts. */
.leistung .bild img{width:100%;height:100%;object-fit:cover;will-change:transform;
  transform:translate3d(0,var(--py,0px),0) scale(1.14);
  filter:saturate(.6) contrast(1.06) brightness(.82);transition:filter .9s ease}
.leistung:hover .bild img{filter:saturate(1) contrast(1.02) brightness(1)}

/* Der Text jedes Bandes kommt mit, sobald das Band im Blick ist. */
.leistung .text>*{opacity:0;transform:translateY(22px);
  transition:opacity .9s ease,transform 1.1s var(--weich)}
.leistung.da .text>*{opacity:1;transform:none}
.leistung.da .text>*:nth-child(2){transition-delay:.1s}
.leistung.da .text>*:nth-child(3){transition-delay:.2s}
.leistung .bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 55%,rgba(4,9,11,.55) 100%);opacity:.9}
.leistung:nth-child(even) .bild::after{background:linear-gradient(270deg,transparent 55%,rgba(4,9,11,.55) 100%)}
.leistung .text{display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:clamp(32px,4.5vw,72px) var(--seite)}
.leistung .text h3{font-size:clamp(27px,3.4vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1.04}
.leistung .text p{font-size:clamp(17px,1.5vw,21px);color:var(--leise);max-width:46ch}
.leistung .text .stich{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.leistung .text .stich span{font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(143,216,231,.75);border:1px solid rgba(46,171,197,.3);border-radius:999px;padding:6px 14px}
/* Jedes zweite Band spiegelt sich: Bild rechts, Text links. */
.leistung:nth-child(even) .bild{order:2}
@media (max-width:820px){
  .leistung{grid-template-columns:1fr}
  .leistung:nth-child(even) .bild{order:0}
  .leistung .bild{min-height:clamp(200px,34vh,300px)}
  .leistung .text{padding:clamp(26px,6vw,40px) var(--seite) clamp(34px,7vw,48px)}
}

/* Laufband mit der Wortmarke */
.laufband{overflow:hidden;padding:clamp(28px,4vw,56px) 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.laufband .spur{display:flex;gap:56px;width:max-content;animation:laufen 38s linear infinite}
.laufband span{font-family:var(--display);font-weight:800;font-size:clamp(38px,7vw,96px);letter-spacing:-.04em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(143,216,231,.32)}
.laufband span.voll{color:rgba(46,171,197,.16);-webkit-text-stroke:0}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Bilder ziehen beim Auftritt auf, statt nur einzublenden */
.enthuellen{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--weich)}
.da .enthuellen,.enthuellen.da{clip-path:inset(0 0 0 0)}

/* Bildgrade: zurückgenommen im Ruhezustand, voll beim Überfahren */
.karte img{filter:saturate(.62) contrast(1.06) brightness(.9);transition:transform .8s var(--weich),filter .6s ease}
.karte:hover img{filter:none}

@media (prefers-reduced-motion: reduce){
  .aufmacher .streif,.weiterhinweis{display:none}
  .vorspann{display:none}
  .enthuellen{clip-path:none}
  .titelkarte{height:auto;padding:clamp(80px,10vw,140px) var(--seite)}
  .laufband .spur{animation:none}
  .fahrt .buehne{position:static;height:auto}
  .fahrt .reihe{flex-wrap:wrap;transform:none !important}
}