/* ============================================================
   jsconsulting.biz
   Erscheinungsbild aus dem Firmenlogo: Hausfarbe #517DA4,
   der Logokreis als Formsprache, weite Sperrung wie im
   Schriftzug CONSULTING.
   ============================================================ */

/* ---------- Schriften vom eigenen Server ---------- */
@font-face{
  font-family: "Sora";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Sora";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "Figtree";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family: "Figtree";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/figtree-latin-500-normal.woff2") format("woff2");
}
@font-face{
  font-family: "Figtree";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2");
}

/* ---------- Hausfarben ---------- */
:root{
  color-scheme: dark;

  --blau:    #517DA4;   /* die Farbe des Logokreises */
  --hell:    #8FB8DA;
  --heller:  #C6DDF0;
  --tief:    #2C4C6B;

  --grund:      #0B1220;
  --grund-tief: #070C17;
  --grund-hoch: #101B2D;
  --flaeche:    rgba(143,184,218,.055);
  --flaeche-an: rgba(143,184,218,.10);
  --kante:      rgba(143,184,218,.17);
  --kante-an:   rgba(143,184,218,.42);

  --text:       #EDF3FA;
  --text-leise: #A9BCD1;
  --text-still: #7C8FA6;

  --f-titel: "Sora", "Segoe UI", system-ui, sans-serif;
  --f-text:  "Figtree", "Segoe UI", system-ui, sans-serif;

  --sperrung: .34em;   /* die Sperrung des Schriftzugs CONSULTING */
  --breite: 1200px;
  --rand: 24px;
  --rund: 16px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg{ max-width: 100%; }

.huelle{
  max-width: var(--breite);
  margin: 0 auto;
  padding-left: var(--rand);
  padding-right: var(--rand);
}

/* ---------- Sprungmarke für die Tastatur ---------- */
.sprung{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--heller);
  color: #0A1420;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}
.sprung:focus{ left: 0; }

/* ============================================================
   Kopfleiste
   ============================================================ */
.kopfleiste{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11,18,32,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.kopfleiste.gescrollt{
  background: rgba(9,15,26,.92);
  border-bottom-color: var(--kante);
}
.kopfleiste .huelle{
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.marke{
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.marke .zeichen{ width: 42px; height: 42px; display: block; flex: none; }
.marke .wort{ display: flex; flex-direction: column; line-height: 1; gap: 5px; }
.marke .wort b{
  font-family: var(--f-titel);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .04em;
  color: #FFFFFF;
}
.marke .wort span{
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--sperrung);
  text-transform: uppercase;
  color: var(--hell);
}

.hauptnav{ display: flex; align-items: center; gap: 28px; }
.hauptnav a{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-leise);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.hauptnav a:hover{ color: #FFF; border-bottom-color: var(--hell); }
.hauptnav a.jetzt{ color: var(--hell); border-bottom-color: var(--hell); }

.navschalter{
  display: none;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--kante);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}
.navschalter span{
  position: absolute;
  left: 11px; right: 11px; height: 1.5px;
  background: var(--text);
  transition: transform .25s, opacity .2s;
}
.navschalter span:nth-child(1){ top: 14px; }
.navschalter span:nth-child(2){ top: 20px; }
.navschalter span:nth-child(3){ top: 26px; }
.navschalter[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.navschalter[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.navschalter[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   Kopfbereich mit Sternenfeld
   ============================================================ */
.buehne{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 82vh, 900px);
  margin-top: -75px;   /* die Kopfleiste liegt darüber */
  padding-top: 75px;
  background:
    radial-gradient(140% 100% at 84% 0%, rgba(81,125,164,.45), transparent 58%),
    radial-gradient(110% 90% at 2% 100%, rgba(44,76,107,.60), transparent 62%),
    var(--grund-tief);
}
.buehne.klein{ min-height: clamp(360px, 52vh, 520px); }

.schleier{
  position: absolute; inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(81,125,164,.44), transparent 72%) 24% 30% / 58% 62% no-repeat,
    radial-gradient(closest-side, rgba(143,184,218,.22), transparent 72%) 78% 66% / 52% 58% no-repeat;
  filter: blur(56px);
  animation: schweben 24s ease-in-out infinite alternate;
}
@keyframes schweben{
  0%  { transform: translate3d(-2%, 0, 0) scale(1); }
  50% { transform: translate3d(3%, -3%, 0) scale(1.08); }
  100%{ transform: translate3d(1%, 3%, 0) scale(1.03); }
}

.sternenfeld{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

/* ---------- Ringe: der Logokreis als Formsprache ---------- */
.ringe{
  position: absolute;
  right: -12%;
  top: 50%;
  width: 72vmin; height: 72vmin;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}
.ringe i{
  position: absolute; inset: 0;
  border: 1px solid rgba(143,184,218,.15);
  border-radius: 50%;
  display: block;
}
.ringe i:nth-child(2){ inset: 13%; }
.ringe i:nth-child(3){ inset: 26%; }
.ringe i:nth-child(4){ inset: 39%; }
.trabant{
  position: absolute;
  top: 50%; left: 50%;
  width: 72vmin; height: 72vmin;
  margin: -36vmin 0 0 -36vmin;
  animation: umlauf 36s linear infinite;
}
.trabant b{
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--hell);
  box-shadow: 0 0 16px var(--hell);
}
@keyframes umlauf{ to{ transform: rotate(360deg); } }

.jahreszahl{
  position: absolute;
  right: 3%; bottom: 4%;
  z-index: 2;
  font-family: var(--f-titel);
  font-weight: 800;
  font-size: clamp(90px, 17vw, 250px);
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(143,184,218,.28);
  pointer-events: none;
  user-select: none;
}

.buehne .huelle{ position: relative; z-index: 3; width: 100%; padding-top: 70px; padding-bottom: 70px; }

/* ============================================================
   Textbausteine
   ============================================================ */
.augenbraue{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--hell);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.punkt{
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--hell);
  box-shadow: 0 0 14px var(--hell);
  animation: puls 2.6s ease-in-out infinite;
}
@keyframes puls{
  0%,100%{ opacity:.35; transform:scale(.8); }
  50%    { opacity:1;   transform:scale(1.25); }
}

h1{
  font-family: var(--f-titel);
  font-weight: 800;
  font-size: clamp(40px, 6.8vw, 88px);
  line-height: 1.0;
  letter-spacing: -.035em;
  margin: 0 0 24px;
  max-width: 16ch;
  text-wrap: balance;
  background: linear-gradient(180deg, #FFFFFF 4%, #A7C3DE 112%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.buehne.klein h1{ font-size: clamp(34px, 5vw, 60px); max-width: 20ch; }

h2{
  font-family: var(--f-titel);
  font-weight: 800;
  font-size: clamp(27px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 14px;
  text-wrap: balance;
}
h3{
  font-family: var(--f-titel);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}

.anriss{ font-size: 19px; line-height: 1.6; color: var(--text-leise); max-width: 54ch; margin: 0; }
.fliess{ color: var(--text-leise); max-width: 66ch; }
.fliess a{ color: var(--hell); }

/* ---------- Abschnitte ---------- */
/* scroll-margin haelt die Sprungziele unter der Kopfleiste frei */
.abschnitt{ padding: 96px 0; position: relative; scroll-margin-top: 80px; }
.abschnitt.tief{ background: var(--grund-tief); }
.abschnitt.hoch{ background: var(--grund-hoch); }
.abschnitt.software{
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(81,125,164,.26), transparent 60%),
    radial-gradient(100% 80% at 92% 30%, rgba(44,76,107,.34), transparent 62%),
    var(--grund-tief);
}

.bandzeile{ margin-bottom: 48px; }
.bandzeile .ueber{
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--sperrung);
  text-transform: uppercase;
  color: var(--hell);
  margin-bottom: 14px;
}
.bandzeile p{ margin: 0; color: var(--text-leise); max-width: 62ch; }

/* ---------- Knöpfe ---------- */
.knoepfe{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.knopf{
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 15.5px;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: transform .2s cubic-bezier(.2,.9,.3,1), box-shadow .25s,
              background .2s, color .2s, border-color .2s;
}
.knopf:hover{ transform: translateY(-2px); }
.knopf.voll{ background: linear-gradient(100deg, #AECFE9, var(--blau)); color: #08131E; }
.knopf.voll:hover{ box-shadow: 0 14px 42px -14px rgba(143,184,218,.7); }
.knopf.leer{ color: var(--text); border-color: var(--kante-an); }
.knopf.leer:hover{ border-color: var(--hell); color: var(--hell); }
.knopf:focus-visible{ outline: 2px solid var(--heller); outline-offset: 3px; }

/* ---------- Kacheln ---------- */
.raster{
  display: grid;
  /* 320px ergibt bei sechs Kacheln zwei volle Dreierreihen statt 4 + 2 */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}
/* Die Kacheln sind Links auf das Kontaktformular */
.kachel{
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--rund);
  padding: 28px 26px 30px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .3s cubic-bezier(.2,.9,.3,1), border-color .3s, background .3s;
}
.kachel:hover{
  transform: translateY(-5px);
  border-color: var(--kante-an);
  background: var(--flaeche-an);
}
.kachel:focus-visible{
  outline: 2px solid var(--heller);
  outline-offset: 3px;
}
.kachel .marker{
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--sperrung);
  text-transform: uppercase;
  color: var(--hell);
  margin-bottom: 16px;
}
.kachel p{ margin: 0; color: var(--text-leise); font-size: 15.5px; line-height: 1.6; }

/* Zeigt an, dass die Kachel irgendwohin führt */
.kachel .weiter{
  margin-top: auto;
  padding-top: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--hell);
  opacity: .55;
  transition: opacity .3s, transform .3s cubic-bezier(.2,.9,.3,1);
}
.kachel .weiter::after{
  content: " →";
  display: inline-block;
  transition: transform .3s cubic-bezier(.2,.9,.3,1);
}
.kachel:hover .weiter{ opacity: 1; }
.kachel:hover .weiter::after{ transform: translateX(4px); }

/* ---------- Zahlen ---------- */
.zahlen{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.zahl{
  border-left: 2px solid var(--blau);
  padding: 6px 0 6px 22px;
}
.zahl b{
  display: block;
  font-family: var(--f-titel);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.04em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.zahl span{
  display: block;
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-still);
}

/* ---------- Software ---------- */
.produkte{
  display: grid;
  /* min() verhindert, dass die Karte auf schmalen Geraeten breiter wird
     als der Platz, den sie hat */
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 18px;
}
.produkt{
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--rund);
  padding: 36px 34px 38px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: border-color .3s, background .3s;
}
.produkt:hover{ border-color: var(--kante-an); background: var(--flaeche-an); }
.produkt .marker{
  font-size: 10.5px; font-weight: 600;
  letter-spacing: var(--sperrung); text-transform: uppercase;
  color: var(--hell);
}
.produkt h3{ font-size: 27px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.produkt p{ margin: 0; color: var(--text-leise); font-size: 16px; }
.produkt ul{
  margin: 4px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
  color: var(--text-leise); font-size: 15px;
}
.produkt ul li{ padding-left: 22px; position: relative; }
.produkt ul li::before{
  content: "";
  position: absolute; left: 3px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blau);
}
.produkt .knopf{ margin-top: 10px; }
.dateiinfo{
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--text-still);
  margin-top: -4px;
}

/* ---------- Kontakt ---------- */
.kontaktfeld{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 48px;
  align-items: start;
}
form.anfrage{ display: flex; flex-direction: column; gap: 16px; }
.feld{ display: flex; flex-direction: column; gap: 7px; }
.feld label{
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-still);
}
.feld input, .feld textarea{
  font-family: var(--f-text);
  font-size: 16px;
  color: var(--text);
  background: rgba(143,184,218,.05);
  border: 1px solid var(--kante);
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color .2s, background .2s;
}
.feld input:focus, .feld textarea:focus{
  outline: none;
  border-color: var(--hell);
  background: rgba(143,184,218,.09);
}
.feld textarea{ min-height: 140px; resize: vertical; }
.zweispaltig{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.einwilligung{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--text-leise);
  line-height: 1.55;
}
.einwilligung input{
  margin: 3px 0 0;
  width: 18px; height: 18px;
  flex: none;
  accent-color: var(--blau);
}
.einwilligung a{ color: var(--hell); }
.honigtopf{ position: absolute; left: -9999px; }

.kontaktdaten{
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--rund);
  padding: 30px 28px;
}
.kontaktdaten dl{ margin: 0; display: flex; flex-direction: column; gap: 20px; }
.kontaktdaten dt{
  font-size: 10.5px; font-weight: 600;
  letter-spacing: var(--sperrung); text-transform: uppercase;
  color: var(--hell);
  margin-bottom: 5px;
}
.kontaktdaten dd{ margin: 0; font-size: 16px; }
.kontaktdaten a{ color: var(--text); text-decoration: none; border-bottom: 1px solid var(--kante-an); }
.kontaktdaten a:hover{ color: var(--hell); border-bottom-color: var(--hell); }

/* ---------- Fuß ---------- */
.fuss{
  background: var(--grund-tief);
  border-top: 1px solid var(--kante);
  padding: 54px 0 40px;
}
.fuss .huelle{
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  align-items: center;
}
.fuss .marke{ margin-right: auto; }
.fussnav{ display: flex; flex-wrap: wrap; gap: 22px; }
.fussnav a{
  font-size: 13.5px;
  color: var(--text-leise);
  text-decoration: none;
}
.fussnav a:hover{ color: var(--hell); }
.fuss .rechte{
  width: 100%;
  font-size: 12.5px;
  color: var(--text-still);
  padding-top: 26px;
  border-top: 1px solid var(--kante);
}

/* ---------- Einblenden beim Scrollen ---------- */
.kommt{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1); }
.kommt.da{ opacity: 1; transform: none; }

/* ---------- Inhaltsseiten ---------- */
.inhalt{ padding: 80px 0 96px; }
.inhalt h2{ margin-top: 52px; }
.inhalt h2:first-child{ margin-top: 0; }
.inhalt h3{ margin-top: 32px; }
.inhalt p, .inhalt li{ color: var(--text-leise); }
.inhalt p, .inhalt ul, .inhalt ol{ max-width: 68ch; }
.inhalt a{ color: var(--hell); }
.inhalt ul, .inhalt ol{ padding-left: 22px; }
.inhalt li{ margin-bottom: 8px; }
.inhalt .anker{ scroll-margin-top: 96px; }

.merkkasten{
  border-left: 3px solid var(--blau);
  background: linear-gradient(90deg, rgba(81,125,164,.13), transparent 72%);
  padding: 18px 22px;
  border-radius: 0 10px 10px 0;
  margin: 26px 0;
  max-width: 68ch;
}
.merkkasten p{ margin: 0; }

/* ============================================================
   Schmale Bildschirme
   ============================================================ */
@media (max-width: 900px){
  .kontaktfeld{ grid-template-columns: 1fr; gap: 34px; }
  .ringe{ right: -40%; width: 105vmin; height: 105vmin; opacity: .6; }
  .trabant{ width: 105vmin; height: 105vmin; margin: -52.5vmin 0 0 -52.5vmin; }
}

@media (max-width: 780px){
  body{ font-size: 16.5px; }
  .navschalter{ display: block; }
  .hauptnav{
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(9,15,26,.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--kante);
    padding: 8px 0 16px;
    display: none;
  }
  .hauptnav.offen{ display: flex; }
  .hauptnav a{
    padding: 15px var(--rand);
    border-bottom: none;
    border-left: 2px solid transparent;
  }
  .hauptnav a:hover, .hauptnav a.jetzt{ border-left-color: var(--hell); border-bottom-color: transparent; }
  .abschnitt{ padding: 68px 0; }
  .jahreszahl{ display: none; }
  .buehne .huelle{ padding-top: 44px; padding-bottom: 54px; }
  .produkt{ padding: 30px 24px 32px; }
  .kontaktdaten{ padding: 24px 22px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation: none !important; transition: none !important; }
  .kommt{ opacity: 1; transform: none; }
}