/* Landingpage bis zum Livegang: Countdown, Kachelporträt, Visitenkarte. Baut auf site.css auf. */
body.ph { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
.ph-kopf { height: var(--kopf-h); display: flex; align-items: center; padding: 0 var(--rand); }
.ph-band { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fuge); padding: 0 var(--fuge); }
.ph-band i { height: clamp(18px, 2.4vw, 36px); background: var(--tile); }
.ph-band i.l1 { background: var(--blau); } .ph-band i.l2 { background: var(--dunkel); } .ph-band i.l3 { background: var(--tief); }
.ph-band i.lit { animation: aufleuchten .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 60ms + 300ms); }

.ph-haupt { flex: 1; width: 100%; max-width: calc(1352px + 2 * var(--rand)); margin: 0 auto; padding: clamp(24px, 3vw, 52px) var(--rand) clamp(32px, 4vw, 64px); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fuge) clamp(16px, 2vw, 32px); align-items: start; }
.ph-text { grid-column: 1 / span 7; }
.ph-text .mass { margin-bottom: 26px; }
.ph-text h1 { font-size: clamp(40px, min(5.2vw, 9svh), 80px); line-height: .98; letter-spacing: -0.032em; }
.ph-firma { white-space: nowrap; }
@media (max-width: 359px) { .ph-firma { white-space: normal; } } /* sehr kleine Handys: dort passt der Name nicht in eine Zeile */
.ph-sub { margin: 18px 0 28px; font-size: var(--fs-lead); line-height: 1.45; color: var(--dunkel); font-weight: 600; max-width: 46ch; }

/* Countdown aus Kacheln */
.cd { background: var(--white); padding: 20px 24px 18px; }
.cd > .sf-label { margin-bottom: 14px; }
.cd__feld, .cd__einheiten { display: grid; grid-template-columns: repeat(37, 1fr); column-gap: 3px; }
.cd__feld { row-gap: 3px; }
.cd__feld i { aspect-ratio: 1; background: var(--tile); opacity: 0; transform: translate(var(--x), var(--y)) scale(.3);
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) var(--d), opacity .8s ease var(--d), background-color .3s ease; }
.cd__feld.is-da i { opacity: 1; transform: none; }
.cd__feld i.an { background: var(--tief); }
.cd__feld i[data-z^="g3"].an { background: var(--blau); }
.cd__feld i.dp { background: var(--dunkel); }
.cd__einheiten { margin-top: 10px; }
.cd__einheiten span { font-size: var(--fs-label); font-weight: 650; letter-spacing: .02em; color: var(--grau); }
.cd__fertig { margin-top: 12px; font-weight: 600; color: var(--tief); }
html:not(.js) .cd__feld i { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cd__feld i { opacity: 1; transform: none; transition: background-color .2s ease; }
  .ph-band i.lit { animation: none; }
}

.ph-leistungen { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px 0; color: var(--tief); font-weight: 650; }
.ph-leistungen { gap: 6px 22px; }
.ph-leistungen li { display: inline-flex; align-items: center; gap: 10px; }
.ph-leistungen li::before { content: ""; width: 8px; height: 8px; background: var(--blau); }
.ph-en { margin-top: 12px; font-size: 15px; color: var(--grau); max-width: 60ch; }

/* Kachelporträt und Visitenkarte */
.ph-karte { grid-column: 9 / span 4; display: grid; gap: var(--fuge); }
.ph-portraet { width: 100%; max-width: 250px; justify-self: center; padding: 0 0 10px; }
.ph-portraet [data-portrait] { display: block; }
.visitenkarte { background: var(--white); }
.visitenkarte__kopf { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 16px 18px; }
.visitenkarte__kopf img { width: 72px; height: 72px; border-radius: 50%; padding: 2px; border: 1.5px solid var(--tief); background: var(--white); object-fit: cover; }
.visitenkarte__name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--tief); line-height: 1.15; }
.visitenkarte__kopf .sf-label { margin: 4px 0 2px; }
.visitenkarte__felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fuge); padding: 0 var(--fuge); }
.visitenkarte__felder > div { background: var(--ground); padding: 10px 14px; font-size: 15px; color: var(--tief); line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.visitenkarte__felder > .breit { grid-column: 1 / -1; }
.visitenkarte__felder a { color: var(--tief); text-decoration: none; }
.visitenkarte__felder a:hover { text-decoration: underline; }
.visitenkarte__speichern { display: flex; justify-content: space-between; width: 100%; margin-top: var(--fuge); min-height: 56px; }
/* Mail-Knopf: Desktop in der Visitenkarte (dann „Kontakt speichern“ hell darunter), Handy unter dem Countdown */
.ph-mail--text { display: none; margin-top: 28px; }
@media (min-width: 961px) {
  .visitenkarte__speichern:not(.ph-mail) { background: var(--ground); color: var(--tief); }
  .visitenkarte__speichern:not(.ph-mail):hover { background: var(--hell); color: var(--tief); }
}
@media (max-width: 960px) { .ph-mail--text { display: inline-flex; } .ph-mail--karte { display: none; } }

.ph-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 18px var(--rand); font-size: 14px; color: var(--grau); border-top: 1px solid var(--hell); }
.ph-fuss nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ph-fuss a { color: var(--grau); text-decoration: none; }
.ph-fuss a:hover { color: var(--tief); text-decoration: underline; }
.ph-fuss__vorschau::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--blau); vertical-align: 1px; }

.ph-recht { flex: 1; width: 100%; max-width: calc(1352px + 2 * var(--rand)); margin: 0 auto; padding: clamp(32px, 4.5vw, 72px) var(--rand); }
.ph-recht h1 { font-size: var(--fs-h1-sub); line-height: 1.02; margin-bottom: 28px; }
.ph-recht .mass { margin-bottom: 28px; }

@media (max-width: 960px) {
  .ph-text, .ph-karte { grid-column: 1 / -1; }
  .ph-karte { margin-top: 32px; max-width: 460px; }
  .ph-portraet { max-width: 240px; }
}
@media (max-width: 760px) { .ph-kopf { height: 68px; } .cd { padding: 16px 14px 14px; } .cd__feld, .cd__einheiten { column-gap: 2px; } .cd__feld { row-gap: 2px; } .cd__einheiten span { font-size: 10px; } }