/* masculine.eu — Startseite (aus Entwurf 3, design/mockup-home-v3). Nur auf der Startseite geladen; setzt tokens.css + components.css voraus.
   Markup: src/wp-theme/masculine/patterns/startseite.php · Verhalten: assets/js/home.js */

/* ---------- Grundlage ---------- */
.hp .is-layout-flow > *, .hp .is-layout-constrained > * { margin-block-start: 0 }   /* WP-blockGap aus; Abstände kommen von hier */
.hp ~ .wp-block-template-part .cta-band { display: none }                            /* die Startseite hat ihren eigenen CTA */
.hp .label { display: block }
.hp .dark .label, .hp .hero .label, .hp .cta .label { color: var(--sky) }
.hp .ico { width: 18px; height: 18px; flex: none }
.hp .btn { will-change: transform }

/* ---------- Hero ---------- */
.hero { position: relative; background: radial-gradient(110% 80% at 80% 35%, var(--deep-2) 0%, var(--deep) 58%, var(--deep-3) 100%);
  color: var(--on-deep); overflow: hidden; padding-top: var(--hdr-h) }
.hero .iso { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .12; pointer-events: none }
.hero > .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center;
  padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 104px) }
.hero h1 { color: var(--white); font-size: var(--fs-h1-hero); letter-spacing: -.025em; margin: 20px 0 26px; font-weight: var(--w-regular) }
.hero h1 .kicker { display: block; font-size: .3em; font-weight: var(--w-semibold); letter-spacing: 0; color: var(--sky); margin-bottom: 16px }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em }
.hero h1 .ln > span { display: inline-block }
.hero .lead { font-size: 20px; max-width: 33em; color: var(--on-deep); margin-bottom: 34px }
.hp .actions { display: flex; gap: 14px; flex-wrap: wrap }
.stage { position: relative; justify-self: end; width: min(100%, 540px); aspect-ratio: 1 / 1.06 }
.hexphoto { position: absolute; inset: 6% 4% 4% 8%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--deep-2); overflow: hidden }
.hexphoto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(1.08) }
.hexphoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 44, 56, .55)) }
.hexline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none }
.hexline polygon { fill: none; stroke: var(--sky); stroke-width: 1; opacity: .5 }
.hexline .spin { transform-origin: 50% 50%; animation: hp-spin 60s linear infinite }
@keyframes hp-spin { to { transform: rotate(360deg) } }
.cube-badge { position: absolute; left: -2%; top: 8%; width: 118px; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .4)) }
.namecard { position: absolute; right: 0; bottom: 10%; background: rgba(11, 44, 56, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hair); padding: 16px 20px; max-width: 270px }
.namecard b { display: block; color: var(--white); font-size: 17px }
.namecard span { font-size: 14px; color: var(--on-deep-dim); line-height: 1.4; display: block }
.codes { position: absolute; left: 0; bottom: 2%; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--sky); line-height: 1.8 }
.codes i { font-style: normal; color: var(--on-deep-dim) }

/* Laufband unter dem Hero */
.marquee { position: relative; background: var(--deep-3); color: var(--on-deep); border-top: 1px solid var(--hair); overflow: hidden; white-space: nowrap }
.marquee .track { display: inline-flex; gap: 56px; padding: 18px 0; animation: hp-mq 38s linear infinite }
.marquee span { font-size: var(--fs-small) }
.marquee span::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 56px; vertical-align: middle; background: var(--sky); transform: rotate(45deg) }
.marquee b { font-weight: var(--w-semibold); color: var(--white) }
@keyframes hp-mq { to { transform: translateX(-50%) } }

/* ---------- Abschnittsköpfe ---------- */
.hp .head p { max-width: 36em }

/* ---------- Orientierung (Check-Liste + Ring) ---------- */
.check { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px }
.check-list { display: grid; gap: 10px }
.check-list label { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--white);
  border: 1px solid var(--line); padding: 18px 22px; cursor: pointer; font-size: var(--fs-body); color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast), transform .25s var(--ease) }
.check-list label:hover { transform: translateX(4px) }
.check-list input { position: absolute; opacity: 0; pointer-events: none }
.check-list .box { width: 30px; height: 30px; border: 1.5px solid var(--blue); display: grid; place-items: center; transition: background var(--t-fast) }
.check-list .box svg { width: 16px; height: 16px; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset var(--t) var(--ease) }
.check-list input:checked + .box { background: var(--blue) }
.check-list input:checked + .box svg { stroke-dashoffset: 0 }
.check-list label:has(input:checked) { border-color: var(--blue); background: #EEF5F8 }
.check-list label:has(input:focus-visible) { outline: 2px solid var(--blue-text); outline-offset: 2px }
.verdict { background: var(--deep); color: var(--on-deep); padding: 34px; display: flex; flex-direction: column; gap: 18px }
.ring { width: 120px; height: 120px }
.ring circle { fill: none; stroke-width: 6 }
.ring .bg { stroke: rgba(213, 230, 236, .15) }
.ring .fg { stroke: var(--sky); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset var(--t-slow) var(--ease) }
.ring text { fill: var(--white); font-family: var(--f-mono); font-size: 22px; text-anchor: middle }
.verdict h3 { color: var(--white); font-size: 27px; font-weight: var(--w-light) }
.verdict small { font-size: 14px; color: var(--on-deep-dim); margin-top: auto }
.verdict .btn { align-self: flex-start }

/* ---------- Prothesen: horizontal gepinnt (Desktop) ---------- */
.models { background: var(--white); overflow: hidden }
.models .head { margin-bottom: 40px }
.rail-wrap { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px }   /* ohne Pin (reduzierte Bewegung/kein JS): horizontal wischen */
.rail-wrap .model { scroll-snap-align: center }
.models.is-pinned .rail-wrap { overflow: visible; scroll-snap-type: none; padding-bottom: 0 }
.models:not(.is-pinned) .rail-progress, .models:not(.is-pinned) #railNum { display: none }
.rail { display: flex; gap: 28px; padding-inline: var(--gutter); width: max-content }
.model { width: min(78vw, 1040px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border: 1px solid var(--line); background: var(--paper); flex: none }
.model .pic { position: relative; background: var(--sky-pale); overflow: hidden; min-height: 440px }
.model .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 28px }
.model .pic .tag { position: absolute; left: 20px; top: 18px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .07em; color: var(--deep);
  text-transform: uppercase; background: rgba(255, 255, 255, .6); padding: 4px 10px }
.model .idx { position: absolute; right: 22px; bottom: 12px; font-size: 110px; font-weight: var(--w-thin); color: rgba(11, 44, 56, .18); line-height: 1 }
.model .info { padding: 34px 34px 30px; display: flex; flex-direction: column; gap: 14px }
.model h3 { font-size: 40px; font-weight: var(--w-light); letter-spacing: -.01em }
.model dl { display: grid }
.model dl div { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px }
.model dt { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 3px }
.model dd { color: var(--ink) }
.model .fit { margin-top: auto; font-size: var(--fs-small); color: var(--text); background: var(--white); border-left: 3px solid var(--blue); padding: 12px 14px }
.rail-hint { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 14px; color: var(--muted) }
.rail-hint .label { display: inline; color: var(--muted) }
.rail-progress { flex: 1; max-width: 240px; height: 2px; background: var(--line); position: relative }
.rail-progress i { position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--blue) }
.hp .fine { margin-top: 14px; font-size: 13.5px; color: var(--muted) }
.hp .fine a { color: var(--blue-text); font-weight: var(--w-semibold) } .hp .fine a:hover { color: var(--ink) }

/* ---------- Arzt & Team ---------- */
.people > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center }
.collage { position: relative; aspect-ratio: 1 / 1.05 }
.collage .a { position: absolute; left: 0; top: 0; width: 68%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20% }
.collage .b { position: absolute; right: 0; bottom: 0; width: 62%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 8px solid var(--paper) }
.collage .stamp { position: absolute; right: 6%; top: 8%; width: 120px; height: 120px; border-radius: 50%; background: var(--deep); color: var(--white);
  display: grid; place-items: center; text-align: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; line-height: 1.35 }
.collage .stamp b { display: block; font-family: var(--f-sans); font-size: 34px; font-weight: var(--w-light); letter-spacing: 0 }
.people h2 { font-size: clamp(34px, 4vw, 56px); letter-spacing: -.02em; margin: 14px 0 22px }
.people h2 .thin { display: block }
.people .wrap > div > p { max-width: 34em; margin-bottom: 16px }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; border-top: 1px solid var(--line) }
.figs > div { padding: 18px 16px 0 0 }
.figs b { display: block; font-size: 44px; font-weight: var(--w-thin); color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums }
.figs b small { font-size: .45em }
.figs b i { font-style: normal }
.figs span { font-size: 14px; color: var(--muted) }
.members { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line) }
.members .label { display: inline; color: var(--muted) }
.members img { height: 40px; width: auto; filter: grayscale(1); opacity: .75; mix-blend-mode: multiply; transition: filter var(--t), opacity var(--t) }
.members img:hover { filter: none; opacity: 1 }
.coop { margin-top: 14px; font-size: var(--fs-small); color: var(--text); display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline }
.coop .label { display: inline; color: var(--muted) }

/* ---------- Ablauf (Zeitachse) ---------- */
.tl { position: relative }
.tl-axis { position: relative; height: 40px; border-bottom: 1px solid rgba(213, 230, 236, .3) }
.tl-axis span { position: absolute; bottom: -26px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 12px; color: var(--sky); white-space: nowrap }
.tl-axis span::before { content: ""; position: absolute; left: 50%; top: -12px; width: 1px; height: 10px; background: rgba(213, 230, 236, .4) }
.tl-axis span:first-of-type { transform: none }
.tl-axis span:last-of-type { transform: translateX(-100%) }
.tl-progress { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--sky); width: 100%; transform-origin: left }
.tl-bars { margin-top: 50px; display: grid; gap: 12px }
.tl-row { position: relative; height: 60px }
.tl-row .fill { position: absolute; top: 0; bottom: 0; background: rgba(128, 187, 212, .13); border-left: 2px solid var(--sky); display: flex; align-items: center;
  padding: 0 16px; gap: 14px; min-width: max-content; transition: background var(--t-fast) }
.tl-row .fill:hover { background: rgba(128, 187, 212, .26) }
.tl-row b { color: var(--white); font-weight: var(--w-semibold); font-size: 16px }
.tl-row em { font-style: normal; font-family: var(--f-mono); font-size: 12px; color: var(--sky) }
.tl-row.point .fill { background: transparent; border-left: 0; padding-left: 0 }
.tl-row.point .fill::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 6px rgba(128, 187, 212, .2); margin-left: -7px }
.tl-row.end .fill { min-width: 0; justify-content: flex-end }
.tl-row.end .lbl { position: absolute; right: 16px; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; white-space: nowrap; text-align: right }
.hp .tl-note { margin-top: 28px; font-size: 14px; color: var(--on-deep-dim) }

/* ---------- Behandlungen (Kategorien) ---------- */
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.cat { position: relative; background: var(--white); border: 1px solid var(--line); padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 10px;
  overflow: hidden; color: var(--text); transition: border-color var(--t), transform .4s var(--ease) }
.cat::before { content: ""; position: absolute; inset: auto 0 0 0; height: 0; background: var(--deep); transition: height .45s var(--ease); z-index: 0 }
.cat > * { position: relative; z-index: 1 }
.cat svg { width: 54px; height: 54px; color: var(--blue) }
.cat h3 { font-size: 20px; transition: color var(--t) }
.cat ul { list-style: none; font-size: var(--fs-small); display: grid; gap: 4px; transition: color var(--t) }
.cat .n { font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-top: auto; transition: color var(--t) }
.cat:hover, .cat:focus-visible { transform: translateY(-4px); border-color: var(--deep) }
.cat:hover::before, .cat:focus-visible::before { height: 100% }
.cat:hover h3, .cat:focus-visible h3 { color: var(--white) }
.cat:hover ul, .cat:focus-visible ul { color: var(--on-deep) }
.cat:hover .n, .cat:focus-visible .n { color: var(--sky) }
.cats-foot { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 28px }
.cats-foot .more { color: var(--blue-text); font-weight: var(--w-semibold) } .cats-foot .more:hover { color: var(--ink) }

/* ---------- Praxis (Galerie) ---------- */
.hp .gal { padding-top: 0 }
.gallery { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 14px }
.gallery figure { position: relative; overflow: hidden; background: var(--deep) }
.gallery figure:first-child { grid-row: span 2 }
.gallery figure.wide { grid-column: span 2 }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease) }
.gallery figure:hover img { transform: scale(1.06) }
.gallery figcaption { position: absolute; left: 0; bottom: 0; background: var(--paper); padding: 8px 14px 0 0; font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text) }

/* ---------- FAQ + Kosten ---------- */
.hp .faq { background: var(--white) }
.hp .faq > .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px) }
.hp .faq h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.02em; margin: 14px 0 28px }
.hp .faq .cost p { font-size: 16px }
.hp .faq summary { font-size: 21px; padding-block: 24px }
.hp .faq details > p, .hp .faq details > div { padding: 0 44px 24px 0; font-size: 17px }

/* ---------- CTA + Standorte ---------- */
.cta { position: relative; overflow: hidden; color: var(--on-deep); background: var(--deep) }
.cta .bgimg { position: absolute; inset: -12% 0; background-position: center; background-size: cover; opacity: .55 }
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--deep) 30%, rgba(11, 44, 56, .55)) }
.cta > .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center }
.cta h2 { color: var(--white); font-size: clamp(36px, 4.8vw, 68px); letter-spacing: -.02em; margin: 14px 0 22px }
.cta .wrap > div > p { max-width: 30em; margin-bottom: 30px }
.places { display: grid; gap: 12px }
.place { background: rgba(8, 31, 40, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--hair); padding: 20px 22px }
.place .label { font-size: 11px; color: var(--sky) }
.place b { display: block; color: var(--white); font-size: 19px; font-weight: var(--w-semibold); margin: 4px 0 }
.place > span:last-child { font-size: var(--fs-small) }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero > .wrap, .check, .people > .wrap, .hp .faq > .wrap, .cta > .wrap { grid-template-columns: 1fr }
  .stage { justify-self: center; width: min(100%, 440px); order: -1 }
  .rail { flex-direction: column; width: auto }
  .rail-wrap { overflow: visible; scroll-snap-type: none }
  .model { width: auto; grid-template-columns: 1fr }
  .model .pic { min-height: 300px }
  .rail-hint { display: none }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px 220px }
  .gallery figure:first-child { grid-column: span 2; grid-row: auto }
}
@media (max-width: 640px) {
  .hero > .wrap { padding-block: 18px 48px; gap: 10px }
  .stage { width: min(100%, 300px) }
  .cube-badge { width: 72px }
  .namecard { max-width: 200px; padding: 10px 14px; bottom: 4% }
  .namecard b { font-size: 15px } .namecard span { font-size: 12.5px }
  .codes { display: none }
  .hero h1 { font-size: 44px }
  .hero .lead { font-size: 18px }
  .hero .actions .btn, .cta .actions .btn { flex: 1 1 100%; justify-content: center }
  .model .info { padding: 22px }
  .model h3 { font-size: 30px }
  .model .idx { font-size: 70px }
  .figs b { font-size: 32px }
  .collage .stamp { width: 92px; height: 92px } .collage .stamp b { font-size: 26px }
  .tl-axis span { font-size: 10.5px } .tl-axis span:nth-of-type(even) { display: none }
  .tl-row b { font-size: 14px } .tl-row em { display: none }
  .cats { grid-template-columns: 1fr }
  .gallery { grid-template-columns: 1fr; grid-template-rows: none }
  .gallery figure { height: 220px }
  .gallery figure:first-child, .gallery figure.wide { grid-column: auto }
}