/* =======================================================================
   HeiselConnect – Startseite (index.html)
   Nur das Seiteneigene. Die Huelle steht in page.css, die VOR dieser
   Datei eingebunden wird. Die alte Startseite (style.css / index_alt.html)
   und die Unterseiten bleiben unberuehrt – hier wird nichts an page.css
   geaendert, alles wird nur ueberschrieben.

   Die Seite ist durchgehend dunkel: kein Wechsel zwischen hellen und
   dunklen Baendern, getrennt wird allein durch Weissraum. Es heben sich
   nur die Kacheln ab. Bewegung gibt es genau an zwei Stellen: das
   Farbfeld im Hero und die Icons in den Kacheln.

     1. Grundton der Seite
     2. Hero
     3. Abschnittsmarken
     4. Leistungskacheln
     5. Bewegte Icons
     6. Kontakt
     7. Ueber uns
     8. Breakpoints

   Die Kopfleiste steht seit dem gemeinsamen Umbau vollstaendig in
   page.css – sie ist auf jeder Seite dieselbe.
   ======================================================================= */

/* ---------------------------------------------------------------- 1. Grundton */
:root{
  --card: #161718;
  --ink-dark: #0d0d0d;
  /* Farbe der bewegten Kachel-Icons – das Markengruen. */
  --ic: var(--green);
}

body{ background: var(--ink-dark); color: #fff; }

/* Alle Abschnitte liegen auf demselben Grund – getrennt wird durch Raum */
.section--dark{ background: transparent; }
.section-head h2{ text-wrap: balance; }

/* ---------------------------------------------------------------- 2. Hero
   Mittig gesetzt: kurze Auszeichnungszeile, eine grosse zweifarbige
   Aussage, ein Satz Erklaerung, eine Schaltflaeche. Dahinter ein
   langsam wanderndes Farbfeld und ein feines Raster – reine
   CSS-Flaechen, ohne Rechenlast und ohne JavaScript. */
.hero--start{
  /* volle Bildschirmhoehe wie auf allen Seiten – siehe page.css, Abschnitt 5 */
  min-height: 100svh;
  text-align: center;
  padding-block: calc(var(--header-h) + clamp(2.6rem, 1.5rem + 6vw, 6rem))
                 clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.hero--start .hero-inner{ width: min(100% - 2 * var(--gutter), 1120px); }

.hero-aura{
  position: absolute;
  inset: -30% -10%;
  z-index: -2;
  filter: blur(90px);
  opacity: 0.6;
  background:
    radial-gradient(28% 32% at 50% 18%, rgba(116, 180, 118, 0.85), transparent 68%),
    radial-gradient(24% 26% at 22% 42%, rgba(63, 122, 75, 0.7), transparent 68%),
    radial-gradient(26% 28% at 80% 40%, rgba(42, 91, 87, 0.85), transparent 70%);
  animation: auraDrift 32s var(--ease) infinite alternate;
}
@keyframes auraDrift{
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 2%, 0) scale(1.09); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
}

.hero-grid{
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg,  rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 92px);
  -webkit-mask-image: radial-gradient(64% 60% at 50% 34%, #000 8%, transparent 72%);
  mask-image: radial-gradient(64% 60% at 50% 34%, #000 8%, transparent 72%);
}

.hero--start .hero-veil{
  background:
    radial-gradient(58% 46% at 50% 34%, rgba(13, 13, 13, 0.72) 20%, rgba(13, 13, 13, 0) 78%),
    linear-gradient(180deg, rgba(13, 13, 13, 0.6) 0%, rgba(13, 13, 13, 0) 26%, rgba(13, 13, 13, 0.95) 100%);
}

.hero--start .eyebrow{ margin-bottom: 1.4rem; }
.hero--start .hero-title{
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: 1.6rem;
}
.hero--start .hero-lead{ max-width: 44rem; margin-inline: auto; }
.hero--start .hero-actions{ justify-content: center; }

/* ---------------------------------------------------------------- 3. Abschnittsmarken */
/* .mark steht jetzt in page.css – die Unterseiten tragen dieselbe Marke
   ueber ihren Abschnitten und laden start.css nicht. */

/* ---------------------------------------------------------------- 4. Leistungskacheln
   Vier gleich grosse Kacheln nebeneinander – keine Kachel ist mehr
   wichtiger als die andere. Drin steht nur, was den Baustein benennt:
   das bewegte Icon und der Titel. Alles Weitere sagt die Unterseite;
   der Einstieg soll auf einen Blick erfassbar bleiben.

   Die Kachel IST der Link (<a class="tile">). Das ersetzt die frueher
   noetige unsichtbare Deckflaeche per ::after und macht die ganze
   Flaeche ohne Zusatzmarkup anklickbar. */
.tiles{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.8rem, 0.4rem + 1.2vw, 1.15rem);
}

.tile{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* oben ausrichten, nicht mittig: sonst rutscht das Icon einer Kachel mit
     einzeiligem Titel gegenueber den zweizeiligen nach unten. So stehen
     alle vier Icons auf derselben Linie. */
  justify-content: flex-start;
  gap: clamp(1.1rem, 0.8rem + 1vw, 1.7rem);
  padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem) clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.tile::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(90% 120% at 12% 0%, rgba(116, 180, 118, 0.1), transparent 62%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

.tile-chip{
  width: clamp(62px, 4.8vw, 80px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.tile-chip svg{ width: 58%; height: 58%; stroke-width: 1.5; overflow: visible; }

/* Kleiner als frueher: der Titel steht jetzt in einer Viertelspalte und
   soll dort in zwei, hoechstens drei Zeilen ausgehen. */
.tile h3{
  font-size: clamp(1.02rem, 0.9rem + 0.55vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  transition: color 0.25s var(--ease);
}

@media (hover: hover){
  .tile:hover{ border-color: rgba(255, 255, 255, 0.22); background: #191a1b; }
  .tile:hover::before{ opacity: 1; }
  .tile:hover .tile-chip{
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.16);
  }
}
.tile:focus-visible{ border-color: rgba(255, 255, 255, 0.22); }

/* ---------------------------------------------------------------- 5. Bewegte Icons
   Jedes Icon zeigt, was der Baustein tut: ein Vorgang laeuft durch,
   Balken wachsen, ein Fenster baut sich auf, Farben pulsieren. Bewusst
   langsam und in geringer Amplitude – vier gleichzeitig laufende Icons
   duerfen nicht flimmern. */
/* Der Vorgang: ein heller Punkt laeuft von der Quelle zum Ziel. Gezeichnet
   ist er als extrem kurzer Strich mit runder Kappe – dadurch ein Kreis, der
   der Kurve von allein folgt, ohne Bewegungspfad und ohne JavaScript.

   Alle drei Teile haengen an derselben 2,8s-Uhr, damit der Ablauf stimmt:
   die Quelle gibt ab, der Punkt laeuft, das Ziel quittiert bei Ankunft.
   Danach eine kurze Pause, sonst wirkt es gehetzt. */
.ic-run{
  stroke: var(--ic);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-dasharray: 0.01 29.9;
  animation: icRun 2.8s var(--ease) infinite;
}
@keyframes icRun{
  0%        { stroke-dashoffset: 0;      opacity: 0; }
  7%        { stroke-dashoffset: 0;      opacity: 1; }
  60%       { stroke-dashoffset: -29.9;  opacity: 1; }
  67%, 100% { stroke-dashoffset: -29.9;  opacity: 0; }
}

.ic-src{ animation: icSrc 2.8s var(--ease) infinite; }
@keyframes icSrc{
  0%, 7%     { stroke: var(--ic); }
  20%, 100%  { stroke: currentColor; }
}

.ic-dst{ animation: icDst 2.8s var(--ease) infinite; }
@keyframes icDst{
  0%, 55%    { stroke: currentColor; }
  62%, 74%   { stroke: var(--ic); }
  88%, 100%  { stroke: currentColor; }
}

/* Balken wachsen – mehr braucht es nicht */
.ic-bar{
  stroke: var(--ic);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: icBar 2.6s var(--ease) infinite alternate;
}
.ic-bar:nth-of-type(2){ animation-delay: 0.3s; }
.ic-bar:nth-of-type(3){ animation-delay: 0.6s; }
@keyframes icBar{ from{ transform: scaleY(0.35); } to{ transform: scaleY(1); } }

/* Web: unter der Leiste laeuft ein heller Ladebalken durch, darunter
   schreiben sich die Zeilen. */
.ic-load{
  stroke: var(--ic);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 38;
  stroke-dashoffset: 38;
  animation: icLoad 2.8s var(--ease) infinite;
}
@keyframes icLoad{
  0%       { stroke-dashoffset: 38; }
  55%, 72% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: -38; }
}

.ic-type{
  stroke: var(--ic);
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: icType 2.8s var(--ease) infinite;
}
.ic-type:nth-of-type(3){ animation-delay: 0.25s; }
@keyframes icType{
  0%, 25%  { stroke-dashoffset: 26; }
  60%, 82% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 26; }
}

/* Farbpunkte auf der Palette – pulsieren nacheinander */
.ic-pulse{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: icPulse 2.6s var(--ease) infinite;
}
.ic-pulse:nth-of-type(2){ animation-delay: 0.4s; }
.ic-pulse:nth-of-type(3){ animation-delay: 0.8s; }
@keyframes icPulse{
  0%, 60%, 100% { stroke: currentColor; transform: scale(1); }
  22%           { stroke: var(--ic);  transform: scale(1.5); }
}

/* ---------------------------------------------------------------- 6. Kontakt
   Der ganze Kontaktblock – Ueberschrift, die beiden direkten Wege und das
   dunkle Formular – steht jetzt in page.css, Abschnitt 10. Er ist auf der
   Startseite und auf allen vier Unterseiten derselbe; hier braucht es
   dafuer nichts mehr. */

/* ---------------------------------------------------------------- 7. Ueber uns
   Bild und ein kurzer Text. Keine Projektnamen – die stehen auf den
   Unterseiten. */
.about{ display: grid; gap: clamp(1.8rem, 1rem + 3.5vw, 3.6rem); align-items: center; }

.about-photo{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--card-line);
  background: var(--card);
}
.about-photo img{ width: 100%; height: auto; display: block; }
/* holt das Bild farblich zur Seite, ohne es zu verfaelschen */
.about-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(13, 13, 13, 0.55));
  pointer-events: none;
}

/* Eine Stufe fuer den ganzen Block: gleiche Groesse, gleiche Helligkeit,
   normale Staerke. Die frueheren zwei Stufen haben den kurzen Text in
   Schriftgroessen zerlegt, ohne etwas zu ordnen. Die Zeile bleibt bei rund
   60 Zeichen – darueber wird das Lesen anstrengend. */
.about-text p{
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-weight: 400;
}
.about-text p + p{ margin-top: 1.05rem; }

/* Die Rolle steht als kleine Marke ueber dem Text – ohne Strich davor und
   ohne Farbe. WICHTIG: die Rolle ist selbst ein <p>, also muss die Regel
   spezifischer sein als .about-text p – sonst gewinnt dort Groesse und
   Farbe. */
.about-text .about-role{
  max-width: none;
  font-family: var(--hc-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--quiet);
  margin-bottom: 1.15rem;
}

/* Genau eine Hervorhebung im ganzen Block: die drei Fachrichtungen. Weil
   sie allein steht, darf sie Fettung und Gruen tragen, ohne den Absatz zu
   zerreissen. */
.about-text strong{ color: var(--green); font-weight: 700; }

/* ---------------------------------------------------------------- 8. Breakpoints */
@media (prefers-reduced-motion: reduce){
  .hero-aura,
  .ic-run, .ic-src, .ic-dst, .ic-bar, .ic-load, .ic-type, .ic-pulse{ animation: none; }
  .ic-run{ stroke: none; }
  .ic-load, .ic-type{ stroke-dashoffset: 0; }
}

/* ---- Telefon: mehr Luft, groessere Ziele --------------------------- */
@media (max-width: 719.98px){
  /* Die Abschnitte standen zu dicht aufeinander */
  .section{ padding-block: clamp(3.4rem, 2rem + 6vw, 5rem); }
  .section-head{ margin-bottom: 2.2rem; }

  .hero--start .hero-title{ max-width: 100%; }
  .hero--start .hero-lead{ font-size: 1.05rem; }

  /* Kacheln: etwas mehr Innenraum, sonst unveraendert */
  .tiles{ gap: 0.9rem; }
  .tile{ padding: 1.5rem 1.2rem; border-radius: 22px; }

  /* Ueber uns: Bild nicht ueber die halbe Hoehe des Bildschirms */
  .about-photo{ max-width: 320px; margin-inline: auto; }
}

/* Zwei nebeneinander, sobald die Titel dort in zwei Zeilen ausgehen */
@media (min-width: 560px){
  .tiles{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px){
  .about{ grid-template-columns: 0.85fr 1fr; }
}

/* Alle vier in einer Reihe – gleiche Spaltenbreite, und weil die
   Rasterzeilen strecken, auch gleiche Hoehe. */
@media (min-width: 1000px){
  .tiles{ grid-template-columns: repeat(4, 1fr); }
}