.p-fi-hero { padding-top: clamp(24px, 3vw, 44px); padding-bottom: clamp(72px, 8vw, 120px); }
.p-fi-h1 { font: 900 clamp(38px, 4vw + 14px, 74px)/.98 var(--f-d); letter-spacing: -.042em; word-spacing: .03em; max-width: 27ch; margin: 0; }
.p-fi-hl { display: block; }
.p-fi-h1 .o { font-size: var(--t6); line-height: .95; letter-spacing: -.045em; margin-bottom: .12em; }
html.js .p-fi-hl { animation: rise 1s var(--ez) both; animation-delay: calc(.15s + var(--n) * .14s); }
.p-fi-hero-row {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 40px clamp(48px, 6vw, 96px);
  align-items: start; margin-top: clamp(36px, 4vw, 56px);
}
.p-fi-lead { font-size: var(--t3); line-height: 1.6; max-width: 44ch; margin-bottom: 26px; }
html.js .p-fi-hero-copy { animation: rise .9s var(--ez) both .5s; }
.p-fi-hero-media { position: relative; }
.p-fi-photo-hero .photo-frame { aspect-ratio: 16 / 9; border-radius: 26px 26px 26px 110px; }
html.js .p-fi-photo-hero .photo-frame img { animation: p-fi-zoom 2.4s var(--ez) both .2s; }
@keyframes p-fi-zoom { from { transform: scale(1.08); } }

.p-fi-ticket {
  position: absolute; left: -40px; bottom: -30px; z-index: 3; width: min(360px, 74%);
  background: var(--ink); color: var(--on-ink); border-radius: 22px; padding: 20px 22px 22px;
  transform: rotate(-2.5deg); box-shadow: 0 22px 44px rgba(14, 14, 14, .28); --focus: var(--orange);
}
html.js .p-fi-ticket { animation: p-fi-drop 1s var(--ez) both 1.1s; }
@keyframes p-fi-drop { from { transform: translateY(-26px) rotate(-9deg); } }
.p-fi-tk-k { margin: 0 0 14px; font: 500 var(--t1)/1.3 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-muted); }
.p-fi-tk-list { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 18px; }
.p-fi-tk-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 56px; position: relative; z-index: 1;
}
.p-fi-tk-tag {
  grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--orange); background: var(--ink); color: var(--orange); font: 500 var(--t1)/1 var(--f-m); letter-spacing: .06em;
}
.p-fi-tk-t { font: 800 var(--t3)/1.2 var(--f-d); letter-spacing: -.01em; color: var(--on-ink); align-self: end; }
.p-fi-tk-d { font: 400 var(--t1)/1.35 var(--f-t); color: var(--on-ink-muted); align-self: start; }
.p-fi-tk-wire {
  position: absolute; left: 43px; top: 76px; height: calc(56px + 18px); width: 2px; background: var(--orange); z-index: 0;
}
.p-fi-tk-dot {
  position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); display: none;
}
html.js .p-fi-tk-dot { display: block; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js .p-fi-tk-dot { animation: p-fi-run 2.6s linear infinite 2s; }
  html.js .p-fi-tk-dot--b { animation-name: p-fi-run-up; animation-delay: 3.3s; }
}
@keyframes p-fi-run { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
@keyframes p-fi-run-up { 0% { top: calc(100% - 8px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 0; opacity: 0; } }
.p-fi-tk-knot { left: 36px; bottom: -7px; }
.p-fi-ticket .knot { background: var(--ink); border-color: var(--orange); }

.p-fi-who { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px clamp(48px, 8vw, 130px); align-items: start; }
.p-fi-who h2 { max-width: 18ch; }
.p-fi-who-prose { margin-top: 30px; max-width: 60ch; }
.p-fi-who-prose p:first-child { font: 500 var(--t4)/1.38 var(--f-t); letter-spacing: -.01em; color: var(--ink); }
.p-fi-who-aside { border-top: 2px solid var(--ink); padding-top: 22px; margin-top: 46px; }
.p-fi-seat { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font: 700 var(--t3)/1.3 var(--f-t); color: var(--ink); }

.p-fi-certs { list-style: none; padding: 0; margin: 52px 0 0; border-top: 2px solid var(--ink); }
.p-fi-cert {
  display: grid; grid-template-columns: 132px minmax(0, .78fr) minmax(0, 1.22fr); gap: 16px clamp(28px, 4vw, 56px);
  align-items: center; padding: 24px 12px 24px 0; border-bottom: 1px solid var(--line); transition: background .4s ease;
}
.p-fi-cert:hover { background: var(--tint); }
.p-fi-cert-mark { display: grid; place-items: center; }
.p-fi-cert .p-fi-stamp { --sz: 108px; }
.p-fi-stamp .stamp-v { font-size: var(--t3); }
.p-fi-cert-name { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 4px; }
.p-fi-cert-iso { font: 900 var(--t5)/1 var(--f-d); letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }
.p-fi-cert-area { flex: 1 0 100%; font: 500 var(--t2)/1.35 var(--f-t); letter-spacing: 0; color: var(--muted); }
.p-fi-cert-ben { margin: 0; max-width: 52ch; }
.p-fi-cert:first-child .p-fi-cert-iso { color: var(--orange-d); }
@media (prefers-reduced-motion: no-preference) {
  html.js .p-fi-cert.is-visible .p-fi-stamp { animation: p-fi-press .8s var(--ez) both calc(.15s + var(--d, 0) * 90ms); }
}
@keyframes p-fi-press { from { transform: rotate(calc(var(--r) - 40deg)) scale(1.35); } }
.p-fi-cert-foot { display: flex; justify-content: flex-end; }
.p-fi-clutch { margin-top: 28px; }

.p-fi-promise {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-areas: "head head" "list proof"; gap: 56px clamp(32px, 3.5vw, 80px); align-items: start;
}
.p-fi-pr-head { grid-area: head; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 56px; justify-items: start; }
.p-fi-pr-head .kicker { grid-column: 1 / -1; margin-bottom: 0; }
.p-fi-pr-h2 { font: 900 var(--t6)/.92 var(--f-d); letter-spacing: -.045em; max-width: 18ch; margin: 0; text-align: left; }
.p-fi-pr-intro { margin: 0; color: var(--on-ink-muted); max-width: 40ch; }
.p-fi-pr-head .ag-badge a { display: inline-block; border-radius: 999px; text-decoration: none; transition: box-shadow .2s ease; }
.p-fi-pr-head .ag-badge a:hover { box-shadow: 0 0 0 3px var(--paper); }
.p-fi-pr-head .ag-badge a:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.p-fi-pr-list { grid-area: list; list-style: none; padding: 0; margin: 0; }
.p-fi-pr {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; padding: 26px 0; border-top: 1px solid var(--line-dark);
}
.p-fi-pr:last-child { border-bottom: 1px solid var(--line-dark); }
.p-fi-pr-n { grid-row: span 2; white-space: nowrap; font: 900 var(--t5)/1 var(--f-d); letter-spacing: -.04em; color: var(--orange); }
.p-fi-pr h3 { margin: 4px 0 8px; font-size: clamp(19px, .9vw + 14px, 28px); }
.p-fi-pr p { margin: 0; color: var(--on-ink-muted); max-width: 48ch; }
.p-fi-pr-proof { grid-area: proof; position: relative; padding-top: 8px; }
.p-fi-pr-proof .p-fi-seal { --sz: 158px; background: var(--orange); color: var(--on-orange); transform: rotate(8deg); margin: 0 0 30px auto; }
.p-fi-pr-proof .p-fi-seal .ring text { fill: var(--on-orange); }
.p-fi-pr-proof .p-fi-seal .seal-v, .p-fi-pr-proof .p-fi-seal .seal-k { color: var(--on-orange); }
.p-fi-pr-num { margin: 0; display: flex; align-items: baseline; gap: 12px; font: 900 var(--t6)/.9 var(--f-d); letter-spacing: -.05em; color: var(--orange); }
.p-fi-pr-pre { font: 500 var(--t2)/1 var(--f-m); letter-spacing: .06em; color: var(--on-ink-muted); }
.p-fi-pr-cap { margin: 14px 0 26px; font-size: var(--t2); color: var(--on-ink); max-width: 30ch; }
.p-fi-pr-link { margin: 0; }
.p-fi-pr-link + .p-fi-pr-link { margin-top: 22px; }
.p-fi-pr-link .tlink { text-wrap: balance; }

.p-fi-phases { position: relative; margin-top: 56px; --p: 1; }
html.js .p-fi-phases { --p: 0; }
.p-fi-ph-track { display: block; height: 4px; border-radius: 2px; background: var(--line); margin-bottom: 20px; overflow: hidden; }
.p-fi-ph-fill { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.p-fi-ph-list {
  list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border: 1.5px solid var(--ink); border-radius: 24px; overflow: hidden;
}
.p-fi-ph { display: flex; flex-direction: column; padding: 30px 26px 26px; border-left: 1px solid var(--line); hyphens: auto; -webkit-hyphens: auto; }
.p-fi-ph:first-child { border-left: 0; }
.p-fi-ph-n { font: 500 var(--t1)/1 var(--f-m); letter-spacing: .14em; color: var(--orange-t); margin-bottom: 26px; }
.p-fi-ph h3 { margin-bottom: 12px; }
.p-fi-ph p { font-size: var(--t2); color: var(--muted); margin: 0 0 18px; }
.p-fi-ph .p-fi-ph-res { margin: auto 0 0; min-height: 66px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--t2); color: var(--ink); font-weight: 600; }
.p-fi-ph--ux { background: var(--ink); color: var(--on-ink); border-left-color: var(--ink); }
.p-fi-ph--ux h3 { color: var(--on-ink); }
.p-fi-ph--ux p { color: var(--on-ink-muted); }
.p-fi-ph--ux .p-fi-ph-n { color: var(--orange); }
.p-fi-ph--ux .p-fi-ph-res { color: var(--on-ink); border-top-color: var(--line-dark); }
.p-fi-ph--ux .kicker-inline { color: var(--on-ink-muted); }
.p-fi-ph + .p-fi-ph--ux, .p-fi-ph--ux + .p-fi-ph { border-left-color: var(--ink); }
.p-fi-mock { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 0 18px; }
.p-fi-mk-f { fill: none; stroke: var(--on-ink-muted); stroke-width: 1.6; }
.p-fi-mk-f--on { stroke: var(--orange); }
.p-fi-mk-l { fill: var(--on-ink); }
.p-fi-mk-m { fill: var(--line-dark); }
.p-fi-mk-b { fill: var(--orange); }
.p-fi-mk-a { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-fi-mk-ok { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  html.js .p-fi-mk-a { stroke-dasharray: 30; stroke-dashoffset: 30; }
  html.js .p-fi-ph--ux.is-visible .p-fi-mk-a { animation: p-fi-dash .9s var(--ez) forwards .6s; }
}
@keyframes p-fi-dash { to { stroke-dashoffset: 0; } }

.p-fi-ops { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 48px clamp(48px, 6vw, 100px); align-items: center; }
.p-fi-photo-ops .photo-frame { aspect-ratio: 4 / 5; border-radius: 26px 140px 26px 26px; }
.p-fi-ops-text h2 { max-width: 16ch; }
.p-fi-op-list { list-style: none; padding: 0; margin: 34px 0 0; border-top: 2px solid var(--ink); }
.p-fi-op { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 28px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.p-fi-op-k { font: 500 var(--t1)/1.6 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-t); }
.p-fi-op p { margin: 0; max-width: 56ch; }

.p-fi-tech { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 48px clamp(48px, 7vw, 110px); align-items: start; }
.p-fi-tech-head { position: sticky; top: calc(var(--hh) + 32px); }
.p-fi-tech-head h2 { max-width: 14ch; }
.p-fi-photo-tech { margin-top: 34px; max-width: 360px; }
.p-fi-photo-tech .photo-frame { aspect-ratio: 4 / 3; }
.p-fi-tlist { margin: 0; columns: 2 260px; column-gap: clamp(32px, 4vw, 56px); }
.p-fi-tg { break-inside: avoid; padding: 20px 0 22px; border-top: 1px solid var(--line); }
.p-fi-tg dt { font: 500 var(--t1)/1.3 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.p-fi-tg dd { margin: 0; display: inline; font: 700 var(--t3)/1.5 var(--f-d); letter-spacing: -.01em; color: var(--ink); }
.p-fi-tg dd + dd::before { content: "·"; margin: 0 10px; color: var(--orange-d); font-weight: 900; }
.p-fi-tg:first-child { border-top: 2px solid var(--ink); }
.p-fi-tg:first-child dd:first-of-type { color: var(--orange-d); }

.p-fi-eng { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.4fr) minmax(0, .8fr); gap: 40px clamp(40px, 5vw, 80px); align-items: start; }
.p-fi-eng-text { grid-column: 2; }
.p-fi-eng-text h2 { max-width: 20ch; }
.p-fi-eng-text p { max-width: 54ch; margin-top: 22px; }
.p-fi-eng-media { grid-column: 3; margin-top: clamp(40px, 8vw, 140px); transform: rotate(2deg); }
.p-fi-photo-eng .photo-frame { aspect-ratio: 1 / 1; border-radius: 50% 50% 26px 26px; }

.p-fi-sec-ct { padding-block: clamp(100px, 12vw, 180px); }
.p-fi-ct { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 56px clamp(48px, 6vw, 100px); align-items: center; }
.p-fi-ct-text h2 { font: 900 var(--t6)/.92 var(--f-d); letter-spacing: -.042em; max-width: 12ch; }
.p-fi-ct-text > p { max-width: 50ch; }
.p-fi-ct-text .btn { margin-top: 18px; margin-right: 16px; }
.p-fi-ct-card {
  background: var(--paper); color: var(--text); border-radius: 24px; padding: 30px 30px 26px; transform: rotate(2deg);
  box-shadow: 0 20px 44px rgba(14, 14, 14, .22); --focus: var(--orange-t);
}
.p-fi-ct-card h3 { color: var(--ink); margin: 10px 0 14px; }
.p-fi-ct-card address { line-height: 1.7; }
.p-fi-ct-card .kicker-inline { color: var(--muted); }
.p-fi-ct-who { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--t2); }

@media (max-width: 960px) {
  .p-fi-hero-row, .p-fi-who, .p-fi-ops, .p-fi-tech, .p-fi-eng, .p-fi-ct { grid-template-columns: minmax(0, 1fr); }
  .p-fi-hero-media { display: flex; flex-direction: column; }
  .p-fi-ticket { position: relative; order: -1; left: auto; bottom: auto; width: auto; max-width: 400px; margin: 0 0 -26px 14px; }
  .p-fi-tk-knot { display: none; }
  .p-fi-who-aside { margin-top: 0; }
  .p-fi-cert { grid-template-columns: 96px minmax(0, 1fr); padding-right: 0; }
  .p-fi-cert .p-fi-stamp { --sz: 88px; }
  .p-fi-cert-ben { grid-column: 2; }
  .p-fi-promise { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "proof"; }
  .p-fi-pr-head { grid-template-columns: minmax(0, 1fr); }
  .p-fi-pr-proof .p-fi-seal { margin: 0 0 26px; }
  .p-fi-ph-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .p-fi-ph:nth-child(3) { border-left: 0; }
  .p-fi-ph:nth-child(n+3) { border-top: 1px solid var(--line); }
  .p-fi-tech-head { position: static; }
  .p-fi-eng-text, .p-fi-eng-media { grid-column: auto; }
  .p-fi-eng-media { margin-top: 0; max-width: 300px; }
}
@media (max-width: 640px) {
  .p-fi-cert { grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; }
  .p-fi-cert .p-fi-stamp { --sz: 70px; }
  .p-fi-stamp .stamp-v { font-size: var(--t1); }
  .p-fi-stamp .stamp-k { font-size: var(--t1); letter-spacing: .04em; }
  .p-fi-stamp .ring { opacity: .9; }
  .p-fi-ph-track { margin-bottom: 14px; }
  .p-fi-cert-ben { grid-column: 1 / -1; }
  .p-fi-ph-list { grid-template-columns: minmax(0, 1fr); }
  .p-fi-ph { border-left: 0; border-top: 1px solid var(--line); }
  .p-fi-ph:first-child { border-top: 0; }
  .p-fi-op { grid-template-columns: minmax(0, 1fr); }
  .p-fi-pr { grid-template-columns: 52px minmax(0, 1fr); }
  .p-fi-ct-card { transform: rotate(1deg); padding: 24px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .p-fi-phases { --p: 1; }
  html.js .p-fi-hl, html.js .p-fi-hero-copy, html.js .p-fi-ticket, html.js .p-fi-photo-hero .photo-frame img { animation: none !important; }
  .p-fi-tk-dot { display: none; }
}
.p-fi-sec-own { padding-top: clamp(56px, 6vw, 96px); }
.p-fi-own { display: grid; grid-template-columns: minmax(0, .34fr) minmax(0, 1.66fr); gap: 36px clamp(40px, 6vw, 96px); align-items: center; }
.p-fi-own-media { justify-self: start; width: min(260px, 100%); margin: 0; }
.p-fi-own-img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px var(--orange); }
.p-fi-own-text { min-width: 0; }
.p-fi-own-fig { margin: 0; }
.p-fi-own-q { margin: 0; max-width: 34ch; font: 800 calc(var(--t4) * 1.4)/1.14 var(--f-d); letter-spacing: -.025em; }
.p-fi-own-q p { margin: 0; }
.p-fi-own-q .qmark { color: var(--orange); }
.p-fi-own-who { margin: 26px 0 0; font: 500 var(--t2)/1.4 var(--f-t); color: var(--ink); }
@media (max-width: 900px) {
  .p-fi-own { grid-template-columns: minmax(0, 1fr); }
  .p-fi-own-media { width: min(200px, 60%); }
}


/* F-Runde 8, Nr. 15: Karte der Schweiz, nur Freiburg ist markiert und benannt */
.p-fi-map { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 0 18px; overflow: visible; }
.p-fi-map-land { fill: var(--tint, #E6DFD4); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.p-fi-map-lead { stroke: var(--orange-d); stroke-width: 1.6; }
.p-fi-map-pin { fill: var(--orange); stroke: var(--paper, #fff); stroke-width: 2.5; }
.p-fi-map-label { font: 800 15px/1 var(--f-d); fill: var(--ink); paint-order: stroke; stroke: var(--paper, #fff); stroke-width: 4px; stroke-linejoin: round; }

/* F10 Nr. 67: alle Stationen der Geschichte auf einer Linie (Versatz der zweiten Station nur im Mehrspalter entfernt) */
@media (min-width: 961px) {
  .hist-list .hist-st:nth-child(2) .hist-year { margin-top: 26px; }
}
