/* ============================================================
   polyDesign — mod/  (Module: Kombis aus Elementen)
   Baut auf tokens.css + elem.css auf.
   ============================================================ */

/* ---------- mod/headline+body -------------------------------
   Figma 2042:1891 — Spalte, gap=padding-min. Inhalt: h3 + body.
------------------------------------------------------------- */
.mod-headline-body{
  display:flex; flex-direction:column; gap:var(--pad-min);
  align-items:flex-start;
}

/* ---------- mod/datum-headline-body -------------------------
   Figma 2029:255 — Spalte, gap=padding-small, pb=padding-medium.
   Inhalt: elem/datum + mod/headline+body.
------------------------------------------------------------- */
.mod-datum-headline-body{
  display:flex; flex-direction:column; gap:var(--pad-small);
  align-items:flex-start; padding-bottom:var(--pad-medium);
}

/* ---------- mod/tags-horizontal -----------------------------
   Figma 2044:1082 — umbrechende Reihe von elem/tag,
   gap=padding-min, pt=padding-medium.
------------------------------------------------------------- */
.mod-tags-horizontal{
  display:flex; flex-wrap:wrap; gap:var(--pad-min);
  align-items:flex-end; padding-top:var(--pad-medium);
}

/* ---------- mod/tags-vertikal -------------------------------
   Figma 2044:965 — Spalte von elem/tag (volle Breite),
   gap=padding-min.
------------------------------------------------------------- */
.mod-tags-vertikal{
  display:flex; flex-direction:column; gap:var(--pad-min);
  align-items:flex-start;
}
.mod-tags-vertikal .tag{ width:100%; }

/* ---------- mod/link ----------------------------------------
   Figma 2049:1747 — Text (mono button) links, Link-Icon (↗)
   rechts, Linie oben+unten (polyDarkBlue_line).
   px=padding-min, py=padding-medium.
------------------------------------------------------------- */
.mod-link{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--pad-small);
  padding:var(--pad-medium) var(--pad-min);
  border-top:var(--linewidth) solid var(--poly-line);
  border-bottom:var(--linewidth) solid var(--poly-line);
  font-family:var(--font-mono); font-weight:500;
  font-size:var(--button-size); line-height:var(--button-lh);
  color:var(--ink); text-decoration:none;
}

/* ---------- mod/headline-trenner-text -----------------------
   Figma 2049:1741 — Spalte, gap=padding-big. Inhalt:
   h2 + Trenner (60px Linie) + body.
------------------------------------------------------------- */
.mod-htt{
  display:flex; flex-direction:column; gap:var(--pad-big);
  align-items:flex-start;
}
.mod-htt__trenner{
  width:60px; height:0;
  border-top:var(--linewidth) solid var(--ink);
}

/* ---------- mod/subtext-2cols -------------------------------
   Figma 2029:389 — zwei Spalten Bodytext, column-gap=padding-big,
   row-gap=padding-small. Mobile: einspaltig (Annahme).
------------------------------------------------------------- */
.mod-subtext-2cols{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:var(--pad-big); row-gap:var(--pad-small);
}
@media (max-width:480px){ .mod-subtext-2cols{ grid-template-columns:1fr; } }

/* ---------- mod/form-text -----------------------------------
   Figma 2049:1791 — Mono-Label (grau) + Eingabe (body).
   Placeholder polyDarkBlue_line, echter Text polyDarkBlue.
   Unterstrich-Linie unten.
------------------------------------------------------------- */
.mod-form-text{
  display:flex; flex-direction:column; gap:var(--pad-small);
  align-items:flex-start;
  padding:var(--pad-medium) var(--pad-min);
  border-bottom:var(--linewidth) solid var(--poly-line-strong);
}
.mod-form-text__label{
  font-family:var(--font-mono); font-weight:500;
  font-size:var(--tag-size); line-height:var(--tag-lh);
  color:var(--poly-line-strong);
}
.mod-form-text__input{
  width:100%; border:0; background:none; padding:0; margin:0;
  font-family:var(--font-sans); font-weight:400;
  font-size:var(--body-size); line-height:var(--body-lh);
  letter-spacing:var(--body-ls); color:var(--ink);
}
/* Noch nicht ausgefüllt → 50% transparent (Placeholder-Hinweis). */
.mod-form-text__input::placeholder{ color:var(--ink); opacity:.5; }
.mod-form-text__input:focus{ outline:none; }
/* Mehrzeilige Variante (z.B. „Nachricht"): Textarea bricht um und wächst
   mit dem Inhalt in der Höhe (field-sizing). Wo field-sizing noch nicht
   unterstützt wird, bleibt es eine normale, umbrechende Textarea. */
textarea.mod-form-text__input{
  display:block; resize:none; overflow:hidden;
  field-sizing:content; min-height:calc(2 * var(--body-lh));
}

/* ---------- mod/form-select ---------------------------------
   Figma 2049:1818 — wie form-text, Wert aber SemiBold (body-bold),
   Chevron (icon/menu-select) rechts. Klick öffnet das Menü.
   HINWEIS: Popup-Optik ist Vorschlag — in Figma nur der
   geschlossene Zustand angelegt.
------------------------------------------------------------- */
.mod-form-select{ position:relative; width:100%; }
.mod-form-select__control{
  display:flex; flex-direction:column; gap:var(--pad-small);
  align-items:flex-start;
  padding:var(--pad-medium) var(--pad-min);
  padding-right:32px;
  border-bottom:var(--linewidth) solid var(--poly-line-strong);
  cursor:pointer;
}
.mod-form-select__label{
  font-family:var(--font-mono); font-weight:500;
  font-size:var(--tag-size); line-height:var(--tag-lh);
  color:var(--poly-line-strong);
}
.mod-form-select__value{
  font-family:var(--font-sans); font-weight:600;
  font-size:var(--body-bold-size); line-height:var(--body-bold-lh);
  letter-spacing:var(--body-bold-ls); color:var(--ink);
}
.mod-form-select__chevron{
  position:absolute; right:var(--pad-small); top:50%; transform:translateY(-50%);
  width:12px; height:14px; color:var(--ink);
}
.mod-form-select__chevron svg{ display:block; width:100%; height:100%; }
.mod-form-select__chevron svg path{ stroke:currentColor; }
/* Popup-Menü: JS positioniert `top` so, dass die aktive Option
   deckungsgleich über dem geschlossenen Wert liegt (macOS-Stil). */
.mod-form-select__menu{
  display:none; position:absolute; left:0; right:0; top:100%; z-index:20;
  background:var(--surface);
  border:var(--linewidth) solid var(--poly-line-strong);
}
.mod-form-select.is-open .mod-form-select__menu{ display:block; }
.mod-form-select__option{
  padding:var(--pad-small) var(--pad-min);
  font-family:var(--font-sans); font-weight:600;
  font-size:var(--body-bold-size); line-height:var(--body-bold-lh);
  letter-spacing:var(--body-bold-ls); color:var(--ink); cursor:pointer;
}
.mod-form-select__option:hover,
.mod-form-select__option.is-hover{ background:var(--accent); color:var(--accent-ink); }

/* mod/video ist zu col/video gewandert (Regel in module/col/col.css) — als
   eigenständiger Main-Baustein (z.B. Showreel-Hero, volle Breite). */

/* ---------- mod/person-pic-name -----------------------------
   Figma 2049:2041 — 40px-Kreis (Platzhalter grau) + Name
   (body-bold) / Position (body). gap=padding-small.
------------------------------------------------------------- */
.mod-person-pic-name{ display:flex; align-items:center; gap:var(--pad-small); }
.mod-person-pic-name__pic{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  background:var(--poly-proxy); overflow:hidden;
}
.mod-person-pic-name__pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.mod-person-pic-name__body{ display:flex; flex-direction:column; min-width:0; }
.mod-person-pic-name__name{
  font-family:var(--font-sans); font-weight:600;
  font-size:var(--body-bold-size); line-height:var(--body-bold-lh);
  letter-spacing:var(--body-bold-ls); color:var(--ink);
}
.mod-person-pic-name__position{
  font-family:var(--font-sans); font-weight:400;
  font-size:var(--body-size); line-height:var(--body-lh);
  letter-spacing:var(--body-ls); color:var(--ink);
}

/* ---------- mod/testimonial ---------------------------------
   Figma 2042:706 — großes Zitatzeichen (h2) + Zitattext
   (body, line-height 25px). Spalte, links.
------------------------------------------------------------- */
.mod-testimonial{ display:flex; flex-direction:column; align-items:flex-start; }
.mod-testimonial__mark{
  font-family:var(--font-sans); font-weight:700;
  font-size:var(--h2-size); line-height:var(--h2-lh);
  letter-spacing:var(--h2-ls); color:var(--ink);
}
.mod-testimonial__text{
  font-family:var(--font-sans); font-weight:400;
  /* Zeilenhöhe/Laufweite aus den Body-Tokens statt fester 25px/-0.02em —
     sonst steht der Zitattext sichtbar luftiger als jeder andere Fließtext
     und skaliert am Breakpoint nicht mit. */
  font-size:var(--body-size); line-height:var(--body-lh); letter-spacing:var(--body-ls);
  color:var(--ink); margin:0;
}