/* Startseite: Auswahl zwischen den beiden Leistungen. Rahmen, Kopf und Fuss wie auf den anderen Seiten (site-1.css).
   Zwei Haelften nebeneinander (Desktop, Tablet quer), untereinander am Handy und am Tablet hochkant - dort, wo das
   Fenster hoechstens 5:4 breiter als hoch ist (dieselbe Grenze wie in site-1.css). Jede Haelfte ist als Ganzes ein
   Link und traegt die Farben ihrer Seite: Social Media Marketing hell, Mitarbeitergewinnung dunkel. */

/* Die Auswahl ist hier die Seite selbst: kein Umschalter im Kopf und kein Menue. chrome.js braucht beide trotzdem
   als Element, deshalb ausgeblendet statt entfernt. */
.start-body .service-toggle, .start-body .menu-fab, .start-body .side-panel{ display: none; }
/* Weichgezeichneter Streifen hinter dem Kopf wie auf den anderen Seiten, getoent in der Farbe dessen, was gerade
   darunter liegt: hell ueber Social Media und dem Fuss wie dort, dunkel ueber Mitarbeitergewinnung wie im Onepager.
   start.js meldet Ober- und Unterkante der dunklen Haelfte als --kopf-a / --kopf-b (px ab Bildschirmoberkante,
   der Streifen beginnt dort); dazwischen ist der Streifen dunkel. Nebeneinander gilt das nur fuer die rechte
   Bildhaelfte (--kopf-breite 50 %), untereinander fuer die ganze Breite. Die Werte hier gelten bis start.js laeuft. */
html.start-page{ --kopf-a: 0px; --kopf-b: 100%; --kopf-breite: 50%; }
.start-body .head-blur{ left: 0; --kopf-hell: rgba(220,220,218,.55); --kopf-dunkel: rgba(26,26,26,.55);
  background:
    linear-gradient(var(--kopf-hell), var(--kopf-hell)) left top / calc(100% - var(--kopf-breite)) 100% no-repeat,
    linear-gradient(180deg, var(--kopf-hell) var(--kopf-a), var(--kopf-dunkel) var(--kopf-a),
      var(--kopf-dunkel) var(--kopf-b), var(--kopf-hell) var(--kopf-b)) right top / var(--kopf-breite) 100% no-repeat; }
/* Logo, Knopf und die Punkte der Querlinie stehen dunkel auf Hell und werden hell, sobald die dunkle Haelfte unter
   ihrer Mitte liegt (start.js: .ist-dunkel). */
.start-body .brand-logo{ transition: filter .25s ease; }
.start-body .brand.ist-dunkel .brand-logo{ filter: invert(1) hue-rotate(180deg); }
.start-body .cta-btn{ transition: background .25s ease, color .25s ease; }
.start-body .cta-btn.ist-dunkel{ background: #f2f2f0; color: #111; }
.start-body .cta-btn.ist-dunkel:hover{ background: #fff; }
.start-body .site-footer{ margin-top: 0; }

/* Rahmen ueber einer hellen und einer dunklen Haelfte: Ein halbdurchsichtiges Mittelgrau ist auf beiden etwa so
   deutlich wie die Linien der jeweiligen Seite (hell Schwarz 18 %, dunkel Weiss 14 %). Die Punkte toenen sich wie
   der Kopf.
   Untereinander laege die Querlinie fest im Bild, waehrend die Grenze der Haelften darunter
   durchrollt. Dort zeigt sie sich erst mit dem Fuss (start.js blendet sie ueber --problem-line-opacity ein), wie auf
   den anderen Seiten. */
.start-page .grid-frame span:not(.gl-progress){ background: rgba(128,128,128,.42); }
.start-page .gl-mid, .start-page .grid-frame i{ transition: opacity .35s ease, background .25s ease; }
.start-page .grid-frame i.ist-dunkel{ background: #f2f2f0; }
@media (max-width: 760px), (max-width: 1099px) and (max-aspect-ratio: 5/4){
  html.start-page{ --kopf-a: 100%; --kopf-b: 100%; --kopf-breite: 100%; --problem-line-opacity: 0; }
}

.start{ position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100vh; min-height: 100svh; font-family: "Unbounded", "Inter", sans-serif; }
.start-h1{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Abstand des Texts zur Kante seiner Haelfte: links --pad-l vom Bildschirmrand, also (--pad-l - --u) neben der
   linken Rahmenlinie; rechts genauso weit neben der Grenze der beiden Haelften (--c-pad-l). */
.start-col{ position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 32px;
  padding: calc(var(--u) * 2) var(--pad-l) 0 var(--c-pad-l, var(--pad-l)); text-decoration: none; color: var(--c-ink); background: var(--c-bg); }
.start-col--mg{ --c-pad-l: calc(var(--pad-l) - var(--u)); }
.start-col--sm{ --c-bg: #dcdcda; --c-bg0: rgba(220,220,218,0); --c-ink: #111; --c-muted: #555; --c-btn-bg: #111; --c-btn-ink: #fff; }
.start-col--mg{ --c-bg: #1a1a1a; --c-bg0: rgba(26,26,26,0); --c-ink: #f2f2f0; --c-muted: #a8a8a5; --c-btn-bg: #f2f2f0; --c-btn-ink: #111; }

.start-copy{ position: relative; z-index: 2; max-width: 30em; display: flex; flex-direction: column; align-items: flex-start; }
.start-kick{ display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: var(--t-small); line-height: 1.4; color: var(--c-muted); }
.start-kick::before{ content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #2c5cff; }
.start-title{ margin: 0 0 18px; font-weight: 400; font-size: var(--t-hero); line-height: 1.1; letter-spacing: -0.02em; hyphens: manual; }
.start-text{ margin: 0 0 28px; max-width: 26em; font-size: var(--t-body); line-height: 1.65; color: var(--c-muted); }
.start-btn{ display: inline-flex; align-items: center; gap: 12px; height: var(--btn-h); padding: 0 var(--btn-pad);
  background: var(--c-btn-bg); color: var(--c-btn-ink); font-size: var(--t-small); letter-spacing: 0.01em; white-space: nowrap; }
.start-btn svg{ width: 14px; height: 14px; transition: transform .35s cubic-bezier(.22,.8,.2,1); }
/* Am Desktop mit Maus ist die ganze Haelfte der Link, der Kreis ersetzt den Mauszeiger (start.js) - dort kein Knopf. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine){ .start-btn{ display: none; } }

/* Bild unten in der Haelfte, auf dem unteren Rand stehend; hoechstens 37vw hoch, damit die Statuen (4:3) auch in
   fast quadratischen Fenstern in ihre Haelfte passen. */
.start-pic{ position: relative; z-index: 1; margin-top: auto; align-self: center; height: 50vh; height: min(50svh, 37vw);
  transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.22,.8,.2,1); }
.start-pic img{ display: block; height: 100%; width: auto; max-width: none; }
.start-col:hover .start-pic{ transform: scale(1.035); }
.start-col:hover .start-btn svg{ transform: translateX(4px); }
.start-col:focus-visible{ outline: 2px solid #2c5cff; outline-offset: -6px; }

/* Beide Bilder im selben Schwarz-Weiss-Punkteraster (statuen-raster.webp, atlas-raster.webp: Unschaerfemaske, Raster
   5 px, dunkle Kontur), so gross gerechnet, dass die Punkte in beiden Haelften gleich gross erscheinen. Die Brille des
   Atlas bleibt blau. Unter den Fuessen steht im Bild noch
   ein schmaler Rand, das Bild rueckt deshalb um 3 % nach unten. */
.start-col--mg .start-pic{ height: 58vh; height: 58svh; translate: 0 3%; }

/* Mauszeiger wie auf der Mitarbeitergewinnung (mg.css .mg-cursor), nur rund statt eckig: ein Punkt sitzt direkt an
   der Maus, ein Ring folgt weich (start.js). Ueber Links - den beiden Haelften, Logo, Knoepfen - wird der Ring zum
   vollen Kreis, in dem "klick" steht, und der Punkt verschwindet. Der Mischmodus "difference" kehrt die Farben darunter
   um: auf der hellen Haelfte erscheint der Zeiger dunkel, auf der dunklen hell, ueber Bildern als Negativ. Das schwarze
   Wort im weissen Kreis zeigt dadurch die Farbe darunter und steht immer im Kontrast zum Kreis. Beim Druecken wird der
   Ring kleiner. Nur am Desktop mit Maus, dieselbe Bedingung, unter der die Knoepfe ausgeblendet sind. */
.start-cursor{ display: none; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine){
  .has-start-cursor, .has-start-cursor *{ cursor: none !important; }
  .start-cursor{ display: block; position: fixed; inset: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference;
    opacity: 0; transition: opacity .3s ease; }
  .start-cursor.is-on{ opacity: 1; }
  .start-cursor i{ position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
  .start-cursor-dot{ width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; transition: width .3s ease, height .3s ease, margin .3s ease; }
  .start-cursor-ring{ width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid #fff;
    display: flex; align-items: center; justify-content: center;
    transition: width .4s cubic-bezier(.22,.8,.2,1), height .4s cubic-bezier(.22,.8,.2,1), margin .4s cubic-bezier(.22,.8,.2,1), background .3s ease; }
  .start-cursor.is-hot .start-cursor-ring{ width: 70px; height: 70px; margin: -35px 0 0 -35px; background: #fff; }
  .start-cursor.is-hot .start-cursor-dot{ width: 0; height: 0; margin: 0; }
  .start-cursor.is-down .start-cursor-ring{ width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .start-cursor-label{ font-family: "Unbounded", "Inter", sans-serif; font-style: normal; font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: .01em;   /* steht im <i> des Rings, das sonst kursiv vererbt */
    color: #000; white-space: nowrap; opacity: 0; transform: scale(.6);
    transition: opacity .2s ease, transform .4s cubic-bezier(.22,.8,.2,1); }
  .start-cursor.is-hot .start-cursor-label{ opacity: 1; transform: none; transition-delay: .08s; }
  .start-cursor.is-down .start-cursor-label{ opacity: 0; transition-delay: 0s; }
}

/* Tablet quer (breiter als 5:4): nebeneinander wie am Desktop. Der Text beginnt --u + 40 px unter der Oberkante wie
   am Tablet hochkant und haelt nach rechts denselben Abstand wie nach links zur Linie (--pad-l - --u) - rechts in der
   dunklen Haelfte zur rechten Rahmenlinie. Das Bild fuellt den Platz darunter bis zum unteren Rand, hoechstens so
   hoch wie am Desktop; so steht jede Haelfte ganz im ersten Bild, auch wenn die Leiste des Browsers Hoehe wegnimmt.
   Dazu reicht sein Feld ueber die ganze Breite der Haelfte, und das Bild haengt darin mittig unten. */
@media (min-width: 761px) and (max-width: 1099px) and (min-aspect-ratio: 501/400){
  .start-col{ --st-r: calc(var(--pad-l) - var(--u));
    padding: calc(var(--u) + 40px) var(--st-r) 0 var(--c-pad-l, var(--pad-l)); }
  .start-col--mg{ --st-r: calc(var(--col-r) + var(--pad-l) - var(--u)); }
  .start-pic{ flex: 1 1 0; min-height: 0; max-height: min(50svh, 37vw);
    margin: 0 calc(var(--st-r) * -1) 0 calc(var(--c-pad-l, var(--pad-l)) * -1); align-self: stretch; }
  .start-col--mg .start-pic{ max-height: 58svh; }
  .start-pic img{ position: absolute; bottom: 0; left: 50%; translate: -50% 0; }
}

/* Handy und Tablet hochkant: untereinander, beide Haelften im ersten Bild. Text links; das Bild steht rechts unten,
   ein Verlauf in der Farbe der Haelfte haelt den Text lesbar, wo es darunter reicht (--c-bg0 = dieselbe Farbe
   durchsichtig). Nebeneinander waeren die Haelften hier zu schmal fuer die Bilder. */
@media (max-width: 760px), (max-width: 1099px) and (max-aspect-ratio: 5/4){
  .start{ grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
  .start-col{ gap: 0; padding: var(--st-pad) var(--pad-r) var(--st-pad) var(--pad-l); justify-content: center; }
  .start-col--sm{ padding-top: calc(var(--u) + var(--st-pad-kopf)); }
  .start-col::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--c-bg) var(--st-verlauf-a), var(--c-bg0) var(--st-verlauf-b)); }
  .start-copy{ max-width: var(--st-text-breite); }
  .start-kick{ margin-bottom: 12px; }
  .start-title{ margin-bottom: 12px; }
  .start-text{ margin-bottom: 18px; }
  .start-pic{ position: absolute; z-index: 0; bottom: 0; margin: 0; }
}
/* Tablet hochkant: Bild so gross, wie es neben dem Text Platz hat - die Breite begrenzt (Statuen 39vw hoch = gut
   die halbe Breite), in niedrigen Fenstern die Hoehe der Haelfte; oben bleibt zum Kopf derselbe Abstand wie beim
   Text. */
@media (min-width: 761px) and (max-width: 1099px) and (max-aspect-ratio: 5/4){
  .start{ --st-pad: 40px; --st-pad-kopf: 40px; --st-text-breite: 46%; --st-verlauf-a: 40%; --st-verlauf-b: 56%; }
  .start-col--sm .start-pic{ right: 0; height: min(80%, 39vw, 100% - var(--u) - var(--st-pad)); }
  .start-col--mg .start-pic{ right: 4%; height: min(88%, 62vw); }
}
/* Handy */
@media (max-width: 760px){
  .start{ --st-pad: 28px; --st-pad-kopf: 20px; --st-text-breite: 58%; --st-verlauf-a: 36%; --st-verlauf-b: 74%; }
  .start-col--sm .start-pic{ right: -24%; height: 50%; }
  .start-col--mg .start-pic{ right: -14%; height: 68%; }
}