/* tech.css — Sektion „Technologien“ (Textleiste); Generator tools/_tech-leiste.mjs, NIE von Hand. Werte mit Quelle:
   Ränder = Site (--pad 24), Titelstufe = Site (clamp 48…90 wie „Über Luvirel“), Namen = Anton-Stufe 36 der Site (Kontakt 110/90/36),
   Raster neben dem Text = Vorbild buildinamsterdam.com; Gruppen zusammen + Label einmal = Jury 05.10. */
.tk { background: var(--paper); color: var(--ink); padding-top: 120px; padding-bottom: 120px; }
.tk h2.d { font-size: clamp(48px, 5.6vw, 90px); }
.tk .tk-in > .lbl, .tk .tk-kopf > .lbl { margin-top: 20px; }
.tk .d .ln-i { white-space: nowrap; }

/* A · Raster — Kopf links (5 von 12), Raster rechts (7 von 12) mit vier Spalten; jede Gruppe spannt ihre Spalten (subgrid) */
.tk-a .tk-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; }
.tk-a .tk-kopf .txt { margin-top: 28px; max-width: 34ch; font-size: 17px; line-height: 1.55; }
.tk-a .tk-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px; row-gap: 56px; padding-top: 0; }   /* Kappenlinie der ersten Namen = Kappenlinie des Titels: gemessen 05.10. mit _tech-capture, Δ 0–1 px (mit 13 px Polster waren es 13) */
.tk-a .tk-g { display: grid; grid-column: span var(--n); grid-template-columns: subgrid; align-content: start; }
.tk-a .tk-g .d { font-size: clamp(26px, 2.1vw, 36px); line-height: .98; }
.tk-a .tk-g .lbl { grid-column: 1 / -1; margin-top: 12px; }

/* B · Register — Titel links auf der Kante, drei Zeilen mit je zwei Gruppen: Label (160) + Namen; Haarlinien wie Kontakt-FAQ */
.tk-b .tk-reg { margin: 64px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.tk-b .tk-z { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 24px; align-items: baseline;
  padding: 22px 0 20px; border-top: 1px solid var(--mute); }
.tk-b .tk-z:nth-last-child(-n+2) { border-bottom: 1px solid var(--mute); }
.tk-b dt.lbl { margin: 0; }                      /* (0,2,1) schlägt die Label-Luft */
.tk-b dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5em; row-gap: 4px; font-size: clamp(26px, 2.1vw, 36px); }
.tk-b dd .ln { display: inline-block; }

/* C · Wand — Titel + Label wie überall, die Namen eine Stufe kleiner als der Titel, Zeilen ausgeglichen; aktiv = andere treten zurück */
.tk-c { text-align: center; }
.tk-c .tk-wand { margin: 48px auto 0; max-width: 1180px; font-size: clamp(36px, 3.9vw, 64px); line-height: 1.04; text-wrap: balance; }
.tk-c .tk-n { display: inline-block; padding: 0 .14em; outline: none; cursor: default; transition: opacity .45s var(--ease); }
.tk-c .tk-n .ln { display: inline-block; }
.tk-c .tk-wand.is-aktiv .tk-n:not(.is-an) { opacity: .18; }
.tk-c .tk-n:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.tk-c .tk-rolle { margin-top: 32px; min-height: 18px; }
.tk-c .tk-rolle .dot { color: var(--akzent); }

@media (max-width: 1100px) {
  .tk-a .tk-in { grid-template-columns: 1fr; row-gap: 56px; }
  .tk-a .tk-raster { padding-top: 0; }
  .tk-a .tk-g .d { font-size: clamp(26px, 3.4vw, 36px); }
  .tk-b .tk-reg { grid-template-columns: 1fr; }
  .tk-b .tk-z:nth-last-child(2) { border-bottom: 0; }
}
@media (max-width: 900px) {
  .tk { padding-top: var(--navh); padding-bottom: 90px; }
  .tk h2.d { font-size: 13vw; }
  .tk-a .tk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; column-gap: 24px; }
  .tk-a .tk-g { grid-column: 1 / -1; row-gap: 6px; }
  .tk-a .tk-g .d { font-size: clamp(26px, 7.4vw, 34px); }
  .tk-b .tk-reg { margin-top: 48px; }
  .tk-b .tk-z { display: flex; flex-direction: column-reverse; row-gap: 8px; padding: 18px 0 16px; }   /* Label UNTER den Namen — darüber wäre es ein Kicker */
  .tk-b dd { font-size: clamp(26px, 7.4vw, 34px); }
  .tk-c .tk-wand { margin-top: 40px; font-size: clamp(30px, 9vw, 44px); }
}