/* ============================================================
   polyDesign — elem/  (atomare Komponenten)
   Baut ausschließlich auf tokens.css auf.
   ============================================================ */

/* iOS Safari: automatisches Text-Aufblähen (Font-Boosting) abschalten —
   sonst werden lange Body-Texte beim Drehen ins Querformat (Tablet-Breite)
   zu groß. Betrifft nur echte iOS-Geräte, nicht Desktop-Resize. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* ---------- elem/tag ----------------------------------------
   Figma 2039:246 — Rahmen polyDarkBlue_line, px=padding-small,
   py=8px (in Figma fester Wert, kein Token), Typo = tag.
------------------------------------------------------------- */
.tag{
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px var(--pad-small);
  /* kräftigere Linienmischung: ein Tag muss sich vom Raster abheben */
  border:var(--linewidth) solid var(--poly-line-strong);
  font-family:var(--font-mono); font-weight:500;
  font-size:var(--tag-size); line-height:var(--tag-lh);
  letter-spacing:var(--tag-ls); color:var(--poly-line-strong);
  white-space:nowrap; background:none; cursor:default;
  transition:color .15s, border-color .15s, background-color .15s;
}
/* Interaktiv vs. statisch: Tags stehen im Markup entweder als <button>/<a>
   (Filter-Chips, Reset — klickbar) oder als <span> (Tags an Cards, im
   Projekt-Overlay, in der Side — reine Anzeige). Hover und Zeigefinger
   gehören nur an die klickbaren; ein Hover auf einem Tag ohne Effekt
   verspricht eine Interaktion, die es nicht gibt.
   `.is-hover` bleibt elementunabhängig — damit zeigt die Werkbank den
   Hover-Zustand auch an einem statischen Beispiel-Tag. */
button.tag, a.tag, .tag[role="button"], .tag[tabindex]{ cursor:pointer; }
button.tag:hover, a.tag:hover,
.tag[role="button"]:hover, .tag[tabindex]:hover,
.tag.is-hover{
  color:var(--ink); border-color:var(--ink);
}
/* aktiv — Hintergrund polyGreen, Typo & Rahmen polyDarkBlue */
.tag.is-active{
  background:var(--accent);
  color:var(--accent-ink); border-color:var(--accent-ink);
}

/* ---------- elem/button -------------------------------------
   Figma 2039:264 — Rahmen polyDarkBlue, px=padding-medium,
   py=padding-small, gap=padding-small, Typo = button,
   Icon = icon/link (↗) um 45° gedreht → „→".
------------------------------------------------------------- */
.btn{
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--pad-small);
  padding:var(--pad-small) var(--pad-medium);
  border:var(--linewidth) solid var(--ink);
  font-family:var(--font-mono); font-weight:500;
  font-size:var(--button-size); line-height:var(--button-lh);
  letter-spacing:var(--button-ls); color:var(--ink);
  white-space:nowrap; background:none; cursor:pointer;
  text-decoration:none;
  transition:background-color .15s;
}
/* Hover — Hintergrund polyGreen; Text fix dunkel (Grün ist immer hell) */
.btn:hover, .btn.is-hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent-ink); }
/* Link-Icon (icon/link, ↗), erbt Textfarbe.
   .link-icon = ungedreht (↗, z.B. mod/link).
   .link-arrow = 45° gedreht → „→" (Button, Big Button, nav-item-v). */
.link-icon, .link-arrow{
  flex:0 0 auto; width:8px; height:8px; color:inherit;
}
.link-icon svg, .link-arrow svg{ display:block; width:100%; height:100%; overflow:visible; }
.link-icon svg path, .link-arrow svg path{ stroke:currentColor; }
.link-arrow{ transform:rotate(45deg); }

/* Hinweis: `button-big` (`.btn--big`) ist jetzt eine col-Komponente
   (col/button-big, Regel in module/col/col.css) — als Main-Baustein volle Breite.
   Die Basis `.btn` bleibt hier in elem/. */

/* ---------- elem/page-indicator -----------------------------
   Figma 2042:913 — Rahmen polyDarkBlue_line, px=padding-big,
   py=padding-medium, gap=padding-medium. Punkte = Ringe
   (10px), aktiv = gefüllt polyGreen. Anzahl variabel.
------------------------------------------------------------- */
.page-indicator{
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--pad-medium);
  padding:var(--pad-medium) var(--pad-big);
  border:var(--linewidth) solid var(--poly-line);
}
.page-indicator__dot{
  box-sizing:border-box;
  flex:0 0 auto; width:10px; height:10px; border-radius:50%;
  border:var(--linewidth) solid var(--ink); background:transparent;
}
.page-indicator__dot.is-active{
  background:var(--poly-green);   /* Fill grün, Stroke (polyDarkBlue) bleibt */
}

/* ---------- elem/datum --------------------------------------
   Figma 2029:385 — Rahmen polyDarkBlue_line, Padding 8/6px
   (feste Werte), Typo=tag, Text polyDarkBlue. Keine States.
------------------------------------------------------------- */
.datum{
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 8px;
  border:var(--linewidth) solid var(--poly-line);
  font-family:var(--font-mono); font-weight:500;
  font-size:var(--tag-size); line-height:var(--tag-lh);
  letter-spacing:var(--tag-ls); color:var(--ink);
  white-space:nowrap;
}

/* ---------- elem/nav-item -----------------------------------
   Figma 2029:324 (horizontal) / 2029:459 (vertikal).
   Rahmen polyDarkBlue_line (bleibt in allen States gleich).
   States: inaktiv = wie Figma · Hover = BG polyGreen ·
   aktiv = BG polyDarkBlue + Text polyBeige.
------------------------------------------------------------- */
.nav-item{
  box-sizing:border-box;
  display:flex; align-items:center;
  border:var(--linewidth) solid var(--poly-line);
  font-family:var(--font-mono); font-weight:500;
  font-size:var(--button-size); line-height:var(--button-lh);
  letter-spacing:var(--button-ls); color:var(--ink);
  background:none; cursor:pointer; text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s, color .15s;
}
/* Hover = grün (Text fix dunkel); aktiv = Ink-Fläche + Surface-Text (invertiert je Theme) */
.nav-item:hover, .nav-item.is-hover{ background:var(--accent); color:var(--accent-ink); }
.nav-item.is-active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent-ink); }
/* Rahmenfarbe wird bewusst NICHT überschrieben — Linie bleibt polyDarkBlue_line. */

/* horizontal — 120px hoch, zentriert */
.nav-item--h{
  height:var(--nav-h);
  justify-content:center; text-align:center;
  padding:var(--pad-big) var(--pad-medium);
}
/* vertikal — 240px breit, rechtsbündig, mit Link-Pfeil */
.nav-item--v{
  width:var(--grid-side);
  justify-content:flex-end; gap:var(--pad-small);
  padding:var(--pad-medium) var(--pad-medium) var(--pad-medium) var(--pad-big);
  text-align:right;
}

/* Hinweis: `polymono` (Logo) ist jetzt eine col-Komponente
   (col/polymono, Regel in module/col/col.css). Das SVG bleibt Asset in elem/. */

/* ---------- Links IM Fließtext ------------------------------
   Prosa-Felder (col/text, headline, body, detail …) gehen unescaped durch die
   Vorlagen — `<a href="…">` funktioniert dort also. Nur sah so ein Link bis
   jetzt aus wie ein roher Browser-Link: knallblau und dick unterstrichen, weil
   es gar keine Regel dafür gab. Das passt in dieses Raster wie ein Faustkeil.

   Also: Farbe erben (der Link steht IM Satz, er ist keine eigene Fläche),
   Unterstrich in Haarlinienstärke — dieselbe Breite wie jede andere Linie hier
   — und beim Überfahren Magenta, wie bei der Filter-Leiste. Kein eigener
   Abstand, kein Fettdruck: der Satz soll nicht springen.

   Bewusst NICHT über einen nackten `a`-Selektor: Knöpfe, Nav-Einträge und
   Karten sind auch <a> und bringen ihren eigenen Stil mit. Hier zählen nur die
   Typo-Klassen, und die stehen genau dort, wo Fließtext steht. */
.t-h0 a, .t-h1 a, .t-h2 a, .t-h3 a,
.t-body a, .t-body-bold a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:var(--linewidth);
  text-underline-offset:0.18em;
  transition:color .15s;
}
.t-h0 a:hover, .t-h1 a:hover, .t-h2 a:hover, .t-h3 a:hover,
.t-body a:hover, .t-body-bold a:hover,
.t-h0 a:focus-visible, .t-h1 a:focus-visible, .t-h2 a:focus-visible,
.t-h3 a:focus-visible, .t-body a:focus-visible, .t-body-bold a:focus-visible{
  color:var(--poly-magenta);
}
@media (prefers-reduced-motion:reduce){
  .t-h0 a, .t-h1 a, .t-h2 a, .t-h3 a, .t-body a, .t-body-bold a{ transition:none; }
}