/* ══════════════════════════ skills.css ══════════════════════════
   #skills: Werkzeug-Übersicht, durchlaufender Logo-Marquee plus vier
   thematische Gruppenkarten mit den eigentlichen Zusatzinformationen.

   Bewusst kein neues Vokabular erfunden (dieselbe Begründung wie in
   projects.css): Karten-Look (Surface, Hairline, doppelter Schatten),
   Tag-Pills (.skill-tag folgt .project-tag/.timeline-tag) und die
   Reveal-Mechanik (.reveal/.is-pending/.is-visible, global definiert
   in about.css) sind wörtlich übernommen statt neu gebaut.

   Der Marquee selbst ist neu: 24 Werkzeug-Chips, als Endlosband nach
   rechts wandernd. Siehe Kommentar im HTML für die Verdopplungs-Technik,
   siehe Abschnitt 3 hier für die Animation und deren Abschaltung bei
   reduzierter Bewegung. */

#skills{
  display:block;
  padding:calc(var(--nav-h) + var(--gutter) * 1.4) var(--gutter) calc(var(--gutter) * 1.6);
}

.skills-wrap{
  display:flex;flex-direction:column;
  gap:var(--section-gap);
}


/* ─────────────────────────── 1. Kopf ─────────────────────────────
   Derselbe Titel-Aufbau wie .about-title/.projects-title: Signatur-
   Strich unter der Überschrift, roter Punkt im Titel selbst. */

.skills-title{
  position:relative;
  margin:0 0 clamp(16px,2.4vw,20px);
  padding-bottom:14px;
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(32px,5vw,52px);font-weight:600;letter-spacing:-.02em;
  color:var(--ink);
}
.skills-title .accent{color:var(--accent-ink)}
.skills-title::after{
  content:'';
  position:absolute;left:0;bottom:0;
  width:44px;height:3px;border-radius:2px;
  background:var(--accent);
}

.skills-text{
  margin:0;
  max-width:60ch;
  font-size:clamp(15px,1.4vw,17px);line-height:1.7;
  color:var(--muted);
}


/* ────────────────────────── 2. Marquee ────────────────────────────
   .skills-marquee schneidet ab und blendet die Ränder aus (Maske statt
   hartem Rand: die Chips sollen dort verschwinden, nicht abgeschnitten
   wirken). .skills-track trägt die eigentliche Bewegung; width:max-content
   lässt ihn über seine sichtbare Breite hinauswachsen, sonst gäbe es
   innerhalb von overflow:hidden gar nichts zum Verschieben. */

.skills-marquee{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.skills-track{
  display:flex;
  width:max-content;
  gap:clamp(10px,1.6vw,14px);
  animation:skills-scroll 36s linear infinite;
}

/* Anhalten auf Zeigern über der Reihe. Dieselbe Idee wie die Pfeile im
   Projekt-Karussell: wer genau hinsehen will, bekommt dafür einen
   ruhigen Moment statt einer Verfolgungsjagd. */
@media (hover:hover) and (pointer:fine){
  .skills-marquee:hover .skills-track{animation-play-state:paused}
}

/* -50% → 0, nicht umgekehrt: der Track bewegt sich damit sichtbar nach
   RECHTS (die verdoppelte, zweite Chip-Reihe rutscht von links ins
   Bild). Die übliche Marquee-Richtung wäre die andere. Bei exakt
   doppeltem Inhalt entspricht eine halbe Tracklänge einer vollen
   Chip-Reihe, der Sprung von -50% zurück auf den Loop-Anfang fällt
   dadurch nicht auf. */
@keyframes skills-scroll{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

.skill-chip{
  display:flex;align-items:center;gap:14px;flex:none;
  padding:10px 22px 10px 10px;
  border-radius:var(--radius-tag);
  background:var(--surface);
  border:1px solid var(--hairline);
}

.skill-icon{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:50px;height:50px;border-radius:50%;
  background:rgba(218,41,28,.08);
}
/* Echte Marken-Logos statt eigener Linien-Symbole: jedes Logo bringt
   seine eigenen Farben und Formen mit, deshalb hier bewusst kein
   fill/stroke mehr erzwungen. Grösser als vorher, damit die Logos auf
   den ersten Blick erkennbar sind statt nur dekorativ mitzulaufen. */
.skill-icon svg, .skill-icon img{
  width:34px;height:34px;
}

.skill-name{
  font-size:15px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  color:var(--ink);
}

/* Läuft weiter frei durch, statt bei reduzierter Bewegung in Zeitlupe
   zu flackern (die globale .01ms-Regel aus global.css, Abschnitt 11,
   liesse eine "infinite"-Animation sonst in Dauerschleife aufblitzen).
   Ein Stillstand ist hier die deutlich ruhigere Lösung als ein
   beschleunigtes Zucken. Ohne Bewegung bleibt die zweite, identische
   Chip-Reihe einfach unsichtbar (overflow:hidden). Nichts fehlt. */
@media (prefers-reduced-motion:reduce){
  .skills-track{animation:none}
}


/* ────────────────────────── 3. Gruppenkarten ───────────────────────
   Gleicher Karten-Look wie .timeline-card/.project-stack-card (Surface,
   Hairline, doppelter Schatten), aber eigene Klasse statt Wiederverwendung,
   weil der Inhalt (Titel + Text + Tag-Liste) eine eigene, vierte Form ist. */

.skills-groups{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--element-gap);
}

.skill-group{
  padding:var(--card-padding);
  border-radius:var(--radius-card);
  background:var(--surface);
  border:1px solid var(--hairline);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-xl);
}
/* Dezenter roter Farbverlauf für die betonte Gruppe, statt eines
   dritten, eigenen "Featured"-Musters nur für Skills. Bricht zugleich
   die reine 3-gleich-Spalten-Symmetrie auf (siehe Breakpoint unten). */
.skill-group.is-featured{
  background:linear-gradient(160deg, rgba(218,41,28,.07), var(--surface) 55%);
  border-color:rgba(218,41,28,.18);
}

.skill-group-title{
  margin:0 0 10px;
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(18px,2.2vw,21px);font-weight:600;letter-spacing:-.01em;
  color:var(--ink);
}

.skill-group-text{
  margin:0;
  font-size:14.5px;line-height:1.65;
  color:var(--muted);
}

.skill-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:16px 0 0;padding:0;list-style:none;
}
.skill-tag{
  padding:4px 11px;
  border-radius:var(--radius-tag);
  background:var(--bg);
  border:1px solid var(--hairline);
  font-size:12.5px;font-weight:500;
  color:var(--muted);
}

/* Zwei Zwischenschritte statt direkt auf vier Spalten: bei 641px erst
   ein 2x2-Raster (die betonte Karte behält dort ihre volle Zeilenbreite),
   ab 960px dann vier gleich breite Spalten in einer Reihe. */
@media (min-width:641px){
  .skills-groups{grid-template-columns:repeat(2,1fr)}
  .skill-group.is-featured{grid-column:span 2}
}
@media (min-width:960px){
  .skills-groups{grid-template-columns:repeat(4,1fr)}
  .skill-group.is-featured{grid-column:span 1}
}