/* FONT-----------------------------------------------------------------*/

@font-face {
  font-family: header;
  src: url('fonts/WorkSans-Black.ttf');
}

h1 {
  font-family: header;
  font-size: 140px;
  word-spacing: -0.10em;
  letter-spacing: -0.04em;
  padding: 3px 0;
  margin: 3px 0;
  line-height: 0.7;
}

h2 {
  font-family: header;
  font-size: 90px;
  word-spacing: -0.10em;
  letter-spacing: -0.04em;
  padding: 3px 0 3px 40px;
  margin: 3px 0;
  line-height: 0.7;
}

a {
  text-decoration: none;
  color: inherit;
}

/* LAYOUT-----------------------------------------------------------------*/

body {
  margin: 0;
  min-height: 100vh;     /* wächst mit, wenn der Inhalt länger wird */
  min-height: 100dvh;    /* rechnet auf dem Handy mit der ein- und ausfahrenden Adressleiste */
  box-sizing: border-box;
  padding-bottom: 140px; /* Platz für die feste Leiste unten, damit sie nichts verdeckt */
  display: flex;
  flex-direction: column;
  background-color: rgb(225, 225, 225);
}

.spalte-rechts {
  box-sizing: border-box;
  padding: 40px;
  text-align: right;
}

.spalte-rechts a {
  transition: color 0.2s;
}

.spalte-rechts a:hover {
  color: rgb(255, 255, 255);
}

/* Feste Leiste unten: Laufband mit den Skills, Instagram-Logo ganz rechts.
   Dieser Block steht gleich in style.css und style_sub.css. */
footer {
  position: fixed;       /* bleibt am unteren Rand kleben, auch auf dem Handy */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px 40px 40px;
  background-color: rgb(225, 225, 225);   /* gleich wie body, damit Inhalt nicht durchscheint */
}

.ticker {
  --ticker-gap: 0.9em;         /* Abstand zwischen den Skills */
  --ticker-duration: 95s;      /* Dauer einer Runde: kleiner = schneller */
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--ticker-gap);
  overflow: hidden;
  padding: 0.12em 0;
  font-family: header;
  font-style: italic;
  font-size: clamp(34px, 4.2vw, 60px);   /* Schriftgrösse des Laufbands */
  letter-spacing: -0.055em;
  word-spacing: -0.10em;
  line-height: 1;
  white-space: nowrap;
  color: rgb(0, 0, 0);
  /* weiches Ein- und Ausblenden an beiden Enden */
  -webkit-mask-image: linear-gradient(to right, transparent, black 50px, black calc(100% - 50px), transparent);
  mask-image: linear-gradient(to right, transparent, black 50px, black calc(100% - 50px), transparent);
}

.ticker-group {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--ticker-gap);
  min-width: 100%;       /* füllt immer die ganze Breite, so entsteht nie eine Lücke */
  margin: 0;
  padding: 0;
  list-style: none;
  animation: ticker var(--ticker-duration) linear infinite;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--ticker-gap))); }
}

/* Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, sieht das Band stehend */
@media (prefers-reduced-motion: reduce) {
  .ticker-group { animation: none; }
}


/* KUNDENLISTE------------------------------------------------------------*/

.kunden {
  list-style: none;
  margin: 0;
  padding: 20px 40px 40px;
  columns: 2;                 /* Anzahl Spalten auf grossen Bildschirmen */
  column-gap: 40px;
  font-family: header;
  /* Schriftgrösse der Namen: wächst mit der Fensterbreite, höchstens 110px.
     Die 8.5 am Ende steuert die Grösse: kleinere Zahl = grössere Schrift.
     Wird ein langes Wort mitten im Wort umgebrochen, die Zahl erhöhen. */
  font-size: clamp(30px, calc((100vw - 120px) / 2 / 8.5), 110px);
  letter-spacing: -0.04em;
  word-spacing: -0.10em;
  line-height: 0.85;
  overflow-wrap: break-word;
}

.kunden li {
  break-inside: avoid;        /* ein Name wird nie über zwei Spalten getrennt */
  margin: 0 0 0.35em;
}

.kunden span {
  transition: color 0.2s;
}

/* Pink, solange die Ameisenkette um den Namen läuft (Maus darüber oder angetippt) */
.kunden span.aktiv {
  color: #ff2e93;
}

/* Pink beim Darüberfahren, nur auf Geräten mit Maus */
@media (hover: hover) {
  .kunden span:hover {
    color: #ff2e93;
  }
}

/* schmale Bildschirme: eine Spalte */
@media (max-width: 800px) {
  .kunden {
    columns: 1;
    font-size: clamp(28px, calc((100vw - 24px) / 8.5), 68px);
  }
}


/* TEAM-------------------------------------------------------------------*/

.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* drei Personen nebeneinander */
  gap: 40px;
  padding: 20px 40px 40px;
}

.person {
  min-width: 0;
  font-family: header;
}

/* Bild-Platzhalter: graue Fläche mit kleiner Ameise.
   Sobald ein <img> drin steht, füllt das Bild die Fläche aus. */
.team-bild {
  aspect-ratio: 1 / 1;                      /* Format der Bilder (quadratisch) */
  max-height: 42vh;                         /* nie höher als 42% des Fensters, damit der Text darunter sichtbar bleibt */
  background: rgb(205, 205, 205) url('ameise.png') no-repeat center;
  background-size: 48px;
  overflow: hidden;
}

.team-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                        /* Bild wird passend zugeschnitten */
}

.person h3 {
  margin: 0.45em 0 0.15em;
  font-size: clamp(28px, 3.2vw, 52px);      /* Grösse der Namen */
  font-weight: normal;
  letter-spacing: -0.04em;
  word-spacing: -0.10em;
  line-height: 0.9;
}

.person p,
.person ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(15px, 1.3vw, 22px);      /* Grösse von E-Mail und Aufgaben */
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;                  /* lange E-Mail-Adressen dürfen umbrechen */
}

.person .mail {
  margin-bottom: 0.6em;
}

/* schmale Bildschirme: Personen untereinander */
@media (max-width: 900px) {
  .team {
    grid-template-columns: 1fr;
  }

  .person {
    max-width: 480px;
  }

  .person p,
  .person ul {
    font-size: 18px;
  }
}


/* AMEISENKETTE-----------------------------------------------------------*/

.ameisen-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;       /* Klicks und Hover gehen durch */
  z-index: 10;
}

.ameise {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;                /* Grösse der Ameise (auch ANT_SIZE im Script anpassen) */
  height: 24px;
  background: url('ameise.png') no-repeat center;
  background-size: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
  will-change: transform;
}

/* BOID-----------------------------------------------------------------*/

/*
html,
body {
  width: 100%;
  height: 100%;
}

.boidContainer {
  width: 100%;
  height: 100%;
}

.win .mouse,
.win .cursor {
    background: url('data:image/svg+xml;utf8,<svg width="12" height="19" viewBox="0 0 12 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.36553 2.65884L0.5 1.73149V3V14.7857V15.9966L1.35434 15.1385L2.99617 13.4893L5.35239 18.2228L5.49037 18.5H5.8H7.93333H8.43333V18V16.9286V16.8327L8.39786 16.7436L6.5373 12.0714H9H10.1506L9.36553 11.2303L1.36553 2.65884Z" fill="white" stroke="black"/></svg>')
}

.mouse {
  position: absolute;
  background: url('data:image/svg+xml;utf8,<svg width="12" height="19" viewBox="0 0 12 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.36553 2.65884L0.5 1.73149V3V14.7857V15.9966L1.35434 15.1385L2.99617 13.4893L5.35239 18.2228L5.49037 18.5H5.8H7.93333H8.43333V18V16.9286V16.8327L8.39786 16.7436L6.5373 12.0714H9H10.1506L9.36553 11.2303L1.36553 2.65884Z" fill="black" stroke="white"/></svg>') no-repeat;
  width: 12px;
  height: 20px;
  z-index: 10;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}

.cursor {
  position: absolute;
  width: 24px;
  height: 24px;
  background: url('ameise.png') no-repeat;
  background-size: contain;
  transition: left 0.1s, top 0.1s;
  transform: 0.15s;
  z-index: 10;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
  will-change: transform;
}
*/
/* FOOTER-----------------------------------------------------------------*/
.instagram {
    flex-shrink: 0;
    font-size: 60px;       /* Grösse des Logos hier anpassen */
    line-height: 1;
    color: rgb(0, 0, 0);
    text-decoration: none;
    transition: 0.2s;
  }

.instagram:hover {
    color: rgb(255, 255, 255);
  }

/* HANDY-----------------------------------------------------------------*/
/* Alles in diesem Block gilt nur für schmale Bildschirme (Handy, Tablet hochkant).
   Der Desktop bleibt, wie er ist. */
@media (max-width: 900px) {

  /* Titel: gleich gross wie das Menü auf der Startseite ("contact" füllt fast die ganze Breite).
     Die 4.1 steuert die Grösse: kleinere Zahl = grössere Schrift.
     Ist ein Buchstabe abgeschnitten, die Zahl leicht erhöhen. */
  h1 {
    font-size: min(140px, calc((100vw - 24px) / 4.1));
  }

  /* Adresse auf der Contact-Seite: so gross, dass "Goldameisen Kollektiv" auf eine Zeile passt */
  h2 {
    font-size: calc((100vw - 24px) / 13.5);
    padding-left: 12px;
    padding-right: 12px;
    line-height: 0.85;
  }

  /* schmalere Ränder, unten Platz für die Leiste */
  body {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }

  /* seitlich 12px Rand, wie auf der Startseite */
  .spalte-rechts {
    padding: 12px;
  }

  .kunden {
    padding: 10px 12px 20px;
    column-gap: 20px;
  }

  .team {
    gap: 30px;
    padding: 10px 12px 20px;
  }

  /* Ameisen ohne Schatten: läuft auf dem Handy flüssiger */
  .ameise {
    filter: none;
  }

  /* Leiste unten: etwas kompakter als am Desktop, mit Abstand zum Balken am unteren iPhone-Rand */
  footer {
    gap: 16px;
    padding: 12px max(12px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }

  .ticker {
    --ticker-duration: 60s;
    font-size: 40px;       /* Schriftgrösse des Laufbands auf dem Handy */
    -webkit-mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);
    mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);
  }

  .instagram {
    font-size: 56px;       /* Grösse des Logos auf dem Handy */
  }
}