/* 독일어 2차 프로토타입 전용 스타일 (f- 접두사, after.css의 p- 규칙을 덮어쓴다)
 * 색은 브랜드 4색(#05060D, #7FA8FF, #A46BFF, #F45FC8), --grad, global.css 무채색, 흰색과 rgba만 쓴다. */

/* global.css의 --c-accent(브랜드 목록에 없는 진보라)는 이 페이지에서 잉크색으로 바꾼다.
   보라 #A46BFF는 큰 숫자와 작은 선에만 쓴다. 작은 글자에 쓰면 대비가 부족하다 */
body { --c-accent: var(--navy); }

/* 투명성 줄: 다섯 항목을 한 줄에 맞추고, 좁으면 자동으로 줄바꿈 */
.p-trust-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.p-trust dd a { color: var(--c-ink); }


/* 장 번호: 큰 숫자만 보라. 글자가 커서 대비 기준(3:1)을 넘는다 */
.p-ch-no { color: #A46BFF; }


/* 장 안의 근거 캡션: 모든 표·그림·숫자 카드에 같은 모양 */
.f-cap { font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1.5; color: var(--c-ink); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line); }
.p-ev .f-cap:first-child { margin-top: 0; }
/* 같은 장의 둘째 근거(캡션)는 앞 블록과 더 넓게 띄운다 */
.p-ev > * + .f-cap { margin-top: 36px; }

/* 작동 단계: 라벨은 잉크색, 목록 선만 보라 */
.p-step-no { color: var(--c-ink); }
.p-step li::before { background: #A46BFF; }

/* 표: 모든 표에 같은 격자선 (가로·세로) */
.p-table-wrap { border-color: var(--c-line-strong); }
.p-table th, .p-table td { border-right: 1px solid var(--c-line); }
.p-table th:last-child, .p-table td:last-child { border-right: 0; }
.p-table thead th { border-bottom: 1px solid var(--c-line-strong); }
.p-table tbody th { width: 30%; }

/* 주의 상자: 보라 선 */
.p-notice { border-left-color: #A46BFF; }

/* 버튼: 평면. 그림자와 이동 효과 없이 그라데이션 면과 흰 글자 */
.p-btn { font-size: 16px; }
.p-btn:hover { box-shadow: none; transform: none; color: var(--gray-0); }

/* 법적 고지 상자: 문서 끝 앞에서 항상 보이는 목록 */
.f-legal { border-top: 1px solid var(--c-line-strong); padding: clamp(40px, 5vw, 56px) 0; background: var(--gray-0); }
.f-legal-title { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 700; color: var(--c-ink); margin: 0 0 16px; }
.f-legal-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--c-line); border-radius: 6px; }
.f-legal-list li { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 4px 20px; padding: 14px 18px; font-size: 15px; line-height: 1.6; color: var(--c-text); }
.f-legal-list li + li { border-top: 1px solid var(--c-line); }
.f-legal-list span { font-weight: 600; color: var(--c-ink); }
.f-legal-list a { color: var(--c-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 좁은 화면 (375px 기준): 한 단, 긴 표는 칸을 줄이고 긴 단어는 하이픈으로 나눈다. 페이지 자체는 가로로 밀리지 않는다 */
@media (max-width: 600px) {
  .p-table { font-size: 13px; table-layout: fixed; }
  .p-table th, .p-table td { padding: 9px 10px; overflow-wrap: anywhere; hyphens: auto; }
  .p-table tbody th { width: auto; }
  .f-legal-list li { grid-template-columns: 1fr; gap: 2px; }
}

/* 하위 페이지 (main.f-sub): 첫 화면은 사진 없이 밝은 바탕에 문구와 장 목차. 장·표·문의 띠·법적 고지는 메인과 같다 */
.f-page-hero { padding: calc(var(--header-h) + clamp(40px, 6vw, 72px)) 0 clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--c-line); background: var(--gray-0); }
.f-page-hero .eyebrow { margin-bottom: 16px; color: var(--c-muted); }
.f-page-hero h1 { max-width: 760px; }
.f-page-hero .p-hero-text p { color: var(--c-text); }
.f-page-hero .p-hero-actions { margin-top: 28px; }
.f-page-hero .p-hero-links { gap: 10px 24px; }
.f-page-hero .p-link { color: var(--c-ink); text-decoration-color: var(--c-line-strong); }
.f-page-hero .p-link:hover { text-decoration-color: var(--c-ink); }
/* 첫 장은 첫 화면의 아래 선과 겹치지 않게 위 선을 뺀다 */
.f-sub .f-page-hero + .p-ch { border-top: 0; }
/* 어두운 바탕의 제품 사진 (Ultraschallkamera) */
.f-fig-dark { background: var(--c-bg-dark); padding: clamp(24px, 4vw, 48px); border-radius: 6px; }
.f-fig-dark img { display: block; width: 100%; height: auto; }
/* 표 안의 이름(팀 표): 이름은 굵게, 경력은 아래 줄 */
.p-table .f-name { display: block; font-weight: 600; color: var(--c-ink); }
.p-table .f-sub-line { display: block; margin-top: 2px; font-size: 13px; color: var(--c-muted); }
/* 사진·그림 아래 짧은 설명은 모든 장에서 같은 모양 */
.p-photo.p-site img { aspect-ratio: auto; object-fit: unset; }
/* 양식: 문단 칸(최대 640px)에 두고 2열 그대로. 안내 문단과 양식 사이 간격 */
.p-ch-text > .form { margin-top: 24px; }
/* 연혁 목록: 작동 단계와 같은 모양, 날짜 라벨 */
.p-steps .p-step-date { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* Kapitel 5, Abbildung 3: Logos der Einrichtungen mit Name und Art, darunter die Quelle */
.pt-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
.pt-tile { display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 6px; background: var(--gray-0); }
.pt-tile img { display: block; width: auto; max-width: 100%; height: var(--h); object-fit: contain; }
.pt-txt { font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; color: var(--gray-70); word-break: keep-all; }
.pt-name { margin: 8px 0 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--c-ink); hyphens: auto; }
.pt-type { margin: 0; font-size: 13px; line-height: 1.4; color: var(--c-muted); }
.pt-src { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--c-muted); }
@media (max-width: 600px) {
  .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-tile img { height: calc(var(--h) * .85); }
}