/* ============================================================
   AI-Portfolio – eingebettet in vertical.consulting/ai/
   Struktur wie das ursprüngliche Portfolio (Triptychon, nummerierte
   Lösungen, animierte Einblicke), im freundlichen Website-Design.
   Alle Regeln unter .pf, damit nichts mit site.css kollidiert.
   ============================================================ */

.pf { --pf-bar: 54px; }
.pf .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--smoke); }
.pf .display { font-weight: 300; line-height: 1.08; letter-spacing: .045em; text-transform: uppercase; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.pf .mt-26 { margin-top: 26px; }
.pf .mt-22 { margin-top: 22px; }

/* Pfad-Leiste unter der Kopfzeile */
.pf-bar { position: sticky; top: var(--bar-h); z-index: 50; background: color-mix(in oklab, var(--paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
.pf-bar-inner { height: var(--pf-bar); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pf .crumbs { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; }
.pf .crumb { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); white-space: nowrap; padding: 6px 0; transition: color .2s ease; }
.pf a.crumb:hover { color: var(--accent-ink); }
.pf .crumb.current { color: var(--ink); }
.pf .crumb.current { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pf a.crumb, .pf .crumb-sep { flex-shrink: 0; }
.pf .crumb-sep { color: var(--hairline); font-size: 11px; }

.pf .shell { max-width: var(--w-max); margin: 0 auto; padding: 0 var(--pad-x); }
.pf .page { animation: pfIn .45s var(--ease) both; }
@keyframes pfIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Prinzipien ---------- */

.pf .principles { border-top: 1px solid var(--hairline); padding-top: clamp(44px, 6vh, 80px); padding-bottom: clamp(48px, 7vh, 96px); display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: clamp(32px, 5vw, 90px); }
.pf .principles h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); max-width: 14ch; }
.pf .principle-list { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 48px; }
.pf .principle .k { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.pf .principle .k::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--accent-ink); }
.pf .principle p { color: var(--smoke); font-size: 13.5px; }

/* ---------- Lösungsliste ---------- */

.pf .list-head { padding-top: clamp(44px, 8vh, 100px); padding-bottom: clamp(34px, 5vh, 64px); }
.pf .list-head h1 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); font-weight: 250; line-height: 1.12; max-width: 22ch; }
.pf .tool-list { display: grid; gap: 14px; margin-bottom: clamp(60px, 9vh, 120px); }
.pf .tool-row {
  display: grid; grid-template-columns: 76px minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center;
  padding: clamp(22px, 3.4vh, 38px) clamp(18px, 2.4vw, 32px); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--paper); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pf .tool-row:hover { background: var(--accent-tint); border-color: var(--accent-line); box-shadow: var(--shadow); }
.pf .tool-no { font-size: 1.8rem; font-weight: 200; letter-spacing: .06em; color: var(--accent-line); transition: color .25s ease; }
.pf .tool-row:hover .tool-no { color: var(--accent-ink); }
.pf .tool-row h3 { font-weight: 600; font-size: clamp(1.02rem, 1.6vw, 1.35rem); letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; margin-bottom: 10px; }
.pf .tool-row .sub { color: var(--ink-soft); font-size: 15px; max-width: 52ch; }
.pf .tool-row .summary { color: var(--smoke); font-size: 14px; line-height: 1.6; max-width: 60ch; margin-top: 10px; }
.pf .tool-row .badges { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.pf .badge { font-size: 9.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--sand); color: var(--smoke); }
.pf .badge.kind { background: var(--accent-soft); color: var(--accent-ink); }
.pf .tool-thumb { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.pf .tool-thumb svg { width: 100%; height: auto; display: block; transition: transform .5s var(--ease); }
.pf .tool-row:hover .tool-thumb svg { transform: scale(1.02); }

/* ---------- Lösung ---------- */

.pf .tool-hero { padding-top: clamp(44px, 8vh, 96px); padding-bottom: clamp(32px, 5vh, 56px); }
.pf .tool-hero .eyebrow { margin-bottom: 22px; }
.pf .tool-hero h1 { font-size: clamp(2rem, 4.8vw, 3.8rem); font-weight: 250; line-height: 1.1; max-width: 18ch; }
.pf .tool-hero .badges { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.pf .tool-hero .claim { margin-top: 24px; font-size: clamp(1rem, 1.4vw, 1.18rem); color: var(--smoke); max-width: 58ch; line-height: 1.7; }
.pf .spread { border-top: 1px solid var(--hairline); padding-top: clamp(34px, 5vh, 60px); padding-bottom: clamp(56px, 8vh, 100px); }
.pf .content-col { display: flex; flex-direction: column; gap: clamp(44px, 6vh, 76px); min-width: 0; }
.pf .block h2 { font-weight: 600; font-size: clamp(.98rem, 1.5vw, 1.2rem); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 22px; display: flex; align-items: center; gap: 16px; }
.pf .block h2::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--accent-ink); flex-shrink: 0; }
.pf .block .lede { color: var(--smoke); max-width: 64ch; font-size: 14.5px; }
.pf .value-quote { border-left: 3px solid var(--accent-ink); background: var(--accent-tint); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 26px; font-size: clamp(1.1rem, 1.8vw, 1.42rem); line-height: 1.5; font-weight: 300; max-width: 46ch; }
.pf .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf .feature { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px 22px; transition: background .25s ease, border-color .25s ease; }
.pf .feature:hover { background: var(--accent-tint); border-color: var(--accent-line); }
.pf .feature .t { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; line-height: 1.5; }
.pf .feature p { font-size: 13px; color: var(--smoke); line-height: 1.6; }
.pf .figure { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--paper); overflow: hidden; box-shadow: var(--shadow-sm); }
.pf .figure svg { width: 100%; height: auto; display: block; }
.pf .figure-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 4px 0; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); font-weight: 700; }
.pf .figure-replay { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--smoke); border: 1px solid var(--hairline); background: var(--paper); padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.pf .figure-replay:hover { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-tint); }
.pf .figures { display: flex; flex-direction: column; gap: 40px; }
.pf .arch p { color: var(--smoke); max-width: 64ch; font-size: 14px; }
.pf .arch-flow { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.pf .arch-node { flex: 1 1 140px; min-width: 130px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper); }
.pf .arch-node .n { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 5px; }
.pf .arch-node .d { font-size: 12px; color: var(--smoke); line-height: 1.55; }
.pf .arch-node.accent { background: var(--accent-soft); border-color: transparent; }
.pf .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf .tag { font-size: 12px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--sand); color: var(--ink-soft); white-space: nowrap; }
.pf .tool-next { border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px var(--pad-x) 0; max-width: var(--w-max); margin: 0 auto; }
.pf .tool-next a { padding: 22px 24px; display: flex; align-items: center; gap: 20px; border-radius: var(--radius-lg); border: 1px solid var(--hairline); transition: background .25s ease, border-color .25s ease; }
.pf .tool-next a:hover { background: var(--accent-tint); border-color: var(--accent-line); }
.pf .tool-next a.next { justify-content: flex-end; text-align: right; }
.pf .tool-next .nav-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf .tool-next .nav-arrow { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); border: 1px solid var(--accent-line); transition: background .25s ease, color .25s ease, transform .3s var(--ease); }
.pf .tool-next a:hover .nav-arrow { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--paper); }
.pf .tool-next a.prev:hover .nav-arrow { transform: translateX(-4px); }
.pf .tool-next a.next:hover .nav-arrow { transform: translateX(4px); }
.pf .tool-next .dir { font-size: 9.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--mist); }
.pf .tool-next .name { font-size: clamp(.95rem, 1.5vw, 1.2rem); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pf .tool-next a.empty { pointer-events: none; opacity: 0; }

@media (max-width: 900px) {
  .pf .principles { grid-template-columns: 1fr; }
  .pf .tool-row { grid-template-columns: 1fr; gap: 16px; }
  .pf .tool-row .tool-no { display: none; }
}
@media (max-width: 700px) {
  .pf .principle-list, .pf .feature-grid { grid-template-columns: 1fr; }
  .pf .tool-next { grid-template-columns: 1fr; }
  .pf .tool-next a.next { justify-content: space-between; text-align: left; }
}