/* ITC Lucke v3.2 · Ergänzungen für die Seite „Portfolio“ und ihre Verlinkung von der Startseite.
   style.css und pages.css bleiben bytegleich mit v3.1; diese Datei wird danach geladen und fügt nur hinzu.
   Die Seite Leistungen lädt diese Datei nicht. */

/* ---------- Gemeinsam ---------- */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Startseite: Weg zum Portfolio ---------- */
.aside-link { display: flex; width: fit-content; }
.aside-link--next { margin-top: 0; }

/* ---------- Portfolio: Kopf ---------- */
.hero--work { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ---------- Portfolio: Filter und Karten ---------- */
.work { padding-block: clamp(3rem, 6.5vw, 5.5rem) var(--section); }
.work-set { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: clamp(1.5rem, 3.4vw, 3rem); scroll-margin-top: 1rem; }
.work-set > .panel-title, .work-set > .projects, .work-set > .empty, .work-set > .work-note { flex: 0 0 100%; }
.work-set > .panel-title { margin-bottom: .5rem; }

/* Die Auswahl ist eine Gruppe von Optionsfeldern. Sie filtert auch ohne Skript: Jedes Feld steht vor seinem Etikett und vor der Liste.
   Die unsichtbaren Felder liegen fest am Kopf des Blocks: Ohne top/left läge ihre Ausgangsposition am unteren Rand des Flex-Containers,
   und der Browser würde beim Fokussieren ans Ende der Kartenliste springen. */
.f { position: absolute; top: 2.25rem; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tab {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  flex: 0 0 100%; min-height: 3.25rem; padding: .8rem 0 .85rem;
  border-top: 1px solid var(--line);
  font-size: 1.375rem; font-weight: 300; line-height: 1.15; letter-spacing: -.025em;
  color: var(--text-soft); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: color .2s;
}
.tab-name { display: inline-flex; align-items: center; gap: .7rem; }
.tab-name::before { content: ""; width: .5rem; height: .5rem; flex: none; border: 1px solid currentColor; transition: background-color .2s, transform .3s var(--ease-out); }
.tab-count { font-size: .9375rem; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tab:hover { color: var(--text); }
.tab:active { color: var(--cobalt); }
.f:checked + .tab { color: var(--cobalt); }
.f:checked + .tab .tab-name::before { background: var(--cobalt); border-color: var(--cobalt); transform: scale(1.5); }
.f:focus-visible + .tab { outline: 3px solid var(--focus); outline-offset: 4px; }

@media (min-width: 620px) {
  .tab { flex: 0 0 auto; justify-content: flex-start; padding: .6rem 0 1.05rem; border-top: 0; font-size: clamp(1.5rem, 2.7vw, 2.4rem); letter-spacing: -.035em; }
  .tab-name::before { display: none; }
  .tab-count { align-self: flex-start; margin-top: .15em; font-size: .8125rem; }
  /* Kobaltlinie unter dem aktiven Eintrag; sie liegt auf der Haarlinie der Liste. */
  .tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--cobalt); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
  .f:checked + .tab::after { transform: none; }
}

.projects { display: grid; gap: clamp(3.25rem, 6vw, 5.5rem) clamp(2rem, 4.6vw, 4.5rem); padding-top: clamp(2rem, 4.5vw, 4rem); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.project { container-type: inline-size; min-width: 0; }
.project article { display: grid; }
.project h3 { margin-top: 1.4rem; font-size: clamp(1.8rem, 7.4cqi, 2.75rem); font-weight: 300; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }

/* Bildbühne: das Bildschirmfoto steht als Fenster auf Tinte und läuft unten aus der Fläche. */
.shot { order: -1; }
.shot-stage { padding: 7.5% 8.5% 0; background: var(--ink); overflow: hidden; }
.shot-window { margin-bottom: -1rem; border: 1px solid rgba(255, 255, 255, .3); border-bottom: 0; background: var(--ink); transition: transform .6s var(--ease-out); }
.shot-bar { display: flex; align-items: center; gap: .3rem; height: 1.5rem; padding-inline: .6rem; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.shot-bar i { width: .375rem; height: .375rem; background: rgba(255, 255, 255, .5); }
.shot-bar i:first-child { background: var(--sky); }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; object-position: 50% 0; background: var(--silver); }
.shot figcaption { margin-top: .65rem; font-size: .8125rem; line-height: 1.4; color: var(--text-soft); }
@media (hover: hover) { .project:hover .shot-window { transform: translateY(-.6rem); } }

.fields { margin-top: 1.25rem; border-top: 1px solid var(--graphite); }
.fields > div { display: grid; gap: .3rem 1.25rem; padding-block: .95rem 1.05rem; border-bottom: 1px solid var(--line); }
.fields dt { font-size: .9375rem; font-weight: 600; line-height: 1.6; }
.fields dd { font-size: 1rem; line-height: 1.5; }
.fields dd p + p { margin-top: .55em; }
.client { font-weight: 600; }
.client-line { display: block; color: var(--text-soft); }
.skills { display: flex; flex-wrap: wrap; gap: .25rem 1.15rem; }
.skills li { display: inline-flex; align-items: center; gap: .5rem; }
.skills li::before { content: ""; width: .375rem; height: .375rem; flex: none; background: var(--cobalt); }
@container (min-width: 30rem) {
  .fields > div { grid-template-columns: 8.25rem minmax(0, 1fr); }
}
.project .panel-link { justify-self: start; margin-top: 1rem; }
.project .panel-link:hover .icon { transform: translate(.2rem, -.2rem); }

/* Leeranzeige: gestrichelt wie jede offene Frage in den Schemata. Sichtbar nur, wenn ihre Kategorie gewählt ist. */
.empty { display: none; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.5rem, 4vw, 3.25rem); border: 1px dashed var(--cobalt); }
.empty .diagram { max-width: 13rem; margin-top: 0; }
.empty h3 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 300; line-height: 1.04; letter-spacing: -.04em; color: var(--cobalt); text-wrap: balance; }
.empty p { max-width: 34rem; margin-top: 1rem; }
@media (min-width: 760px) { .empty { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } }

.work-note { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Filterregeln: beim Build aus src/projects.mjs erzeugt, je Kategorie eine Zeile ---------- */
#f-websites:checked ~ .projects > li:not([data-cat~="websites"]) { display: none; }
#f-server:checked ~ .projects > li:not([data-cat~="server"]) { display: none; }
#f-server:checked ~ .empty-server { display: grid; }

/* ---------- Bewegung und Druck ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Erst nach der ersten Auswahl (Klasse durch portfolio.js): Karten und Leeranzeige treten leise ein. Beim Laden bewegt sich nichts. */
  .work-set[data-run="a"] .project, .work-set[data-run="a"] .empty { animation: card-in-a .5s var(--ease-out) backwards; }
  .work-set[data-run="b"] .project, .work-set[data-run="b"] .empty { animation: card-in-b .5s var(--ease-out) backwards; }
  .work-set[data-run] .project:nth-child(2) { animation-delay: .05s; }
  .work-set[data-run] .project:nth-child(3) { animation-delay: .1s; }
  .work-set[data-run] .project:nth-child(4) { animation-delay: .15s; }
  .work-set[data-run] .project:nth-child(n+5) { animation-delay: .2s; }
}
@keyframes card-in-a { from { opacity: 0; transform: translateY(.75rem); } }
@keyframes card-in-b { from { opacity: 0; transform: translateY(.75rem); } }
@media print {
  .f, .tab { display: none; }
  .empty { display: none !important; }
  .project { break-inside: avoid; }
}