/* FONT-----------------------------------------------------------------*/
  
  @font-face {
    font-family: header;
    src: url('fonts/WorkSans-Black.ttf');
    display: block;
    text-decoration: none;
  }

h1{
    font-family: header;
    src:url('fonts/WorkSans-Black.ttf');
    font-size: 140px;
    word-spacing: -0.10em;
    letter-spacing: -0.04em;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    text-decoration: none;
    line-height: 0.7;
  }

  p {
  font-size: 140px;      /* Verkleinert die Schriftgröße des Absatzes */
  line-height: 0.7;    /* Passt den Zeilenabstand für bessere Lesbarkeit an */
  margin-top: 3px;     /* Verkleinert den oberen Absatzabstand */
  margin-bottom: 3px;  /* Verkleinert den unteren Absatzabstand */
}

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

/* CONTAINER-----------------------------------------------------------------*/

.container {
    display: flex;
    /* Erlaubt das automatische Untereinanderfließen auf kleinen Bildschirmen */
    flex-wrap: wrap;
    min-height: 100vh;
    min-height: 100dvh;   /* rechnet auf dem Handy mit der ein- und ausfahrenden Adressleiste */
    /* Platz für die feste Leiste unten, damit sie nichts verdeckt */
    box-sizing: border-box;
    padding-bottom: 140px;
}

.spalte-links {
    /* Jede Spalte nimmt standardmäßig 50% der Breite ein */
    flex: 1 1 50%; 
    min-width: 320px; /* Verhindert, dass die Spalten zu gequetscht werden */
    box-sizing: border-box;
    padding: 40px;
}

.spalte-rechts {
    /* Jede Spalte nimmt standardmäßig 50% der Breite ein */
    flex: 1 1 50%; 
    min-width: 320px; /* Verhindert, dass die Spalten zu gequetscht werden */
    box-sizing: border-box;
    padding: 40px;
    
}

.seiten-wrapper {
    max-width: 1200px; /* Maximale Breite der Seite */
    margin: 0 auto;    /* Zentriert den Block automatisch in der Mitte */
}

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


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

 


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

body {
  margin: 0;             /* kein Standardrand: verhindert, dass sich die Seite seitlich verschieben lässt */
  cursor: none;
  background-color:rgb(225, 225, 225);
}

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

.boidContainer,
.cursor,
.mouse {
  pointer-events: none;
}

.boidContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.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;
  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;
}

/* Drei goldene Ameisen im Schwarm: Die Form kommt aus ameise.png, die Farbe aus dem Verlauf.
   Mehr oder weniger goldene Ameisen: die 3 in "-n+3" ändern. */
.boidContainer .cursor:nth-child(-n+3) {
  background: linear-gradient(135deg, #f7e08a 0%, #d4af37 50%, #9c7a12 100%);
  -webkit-mask: url('ameise.png') no-repeat center / contain;
  mask: url('ameise.png') no-repeat center / contain;
  z-index: 11;           /* über den anderen Ameisen, damit sie nicht verdeckt werden */
}

/* FOOTER-----------------------------------------------------------------*/
/* 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; }
  }

.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) {

  /* Name: so gross, dass "kollektiv" und "ameisen" fast die ganze Breite füllen.
     Die 4.6 steuert die Grösse: kleinere Zahl = grössere Schrift.
     Ist ein Buchstabe am rechten Rand abgeschnitten, die Zahl leicht erhöhen. */
  .spalte-links h1 {
    font-size: min(140px, calc((100vw - 24px) / 4.6));
  }

  /* "Goldameisen" steht auf dem Handy auf zwei Zeilen: Gold / ameisen.
     (In der index.html ist "ameisen" dafür mit class="handy-zeile" markiert;
     am Desktop hat das keine Wirkung.) */
  .handy-zeile {
    display: block;
    margin-top: 9px;       /* gleicher Zeilenabstand wie zwischen den anderen Zeilen */
  }

  /* Menü: so gross, dass "contact" fast die ganze Breite füllt. Zahl wie oben. */
  .spalte-rechts h1 {
    font-size: min(140px, calc((100vw - 24px) / 4.1));
  }

  /* Name oben, Menü unten direkt über der Leiste, mit schmalen Rändern */
  .spalte-links,
  .spalte-rechts {
    flex-basis: 100%;
    min-width: 0;
    padding: 12px;
  }

  .container {
    align-content: space-between;
    overflow-x: clip;      /* nichts ragt seitlich hinaus */
    /* Abstand zwischen Menü und Leiste: die 88px vergrössern = mehr Abstand */
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  /* Ameisen ohne Schatten: läuft auf dem Handy flüssiger */
  .cursor {
    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 */
  }
}

/* Geräte ohne Maus (Handy, Tablet): kein Ersatz-Mauszeiger */
@media (hover: none) {
  body {
    cursor: auto;
  }

  .mouse {
    display: none;
  }
}