/* ==========================================================================
   12 · Abschluss (Bauteam G) · Präfix end-
   Zentriertes Schlussbild: Markenzeichen, Display-Headline, tannengrüne
   Serifenzeile, Signal-Button → Hinweis-Dialog zum Projektplaner.
   H23 als heller Nebel im Hintergrund. Die Unterkante hebt sich als
   gerundete Karte vom Footer ab (Arpeggio/Kora-Abschluss).
   ========================================================================== */

.end {
  --end-r: clamp(20px, calc(2.1 * var(--u)), 40px);
  position: relative;
  z-index: 2;                          /* liegt über dem Footer (Abheben) */
  overflow: clip;
  display: grid;
  align-items: center;
  min-height: max(100vh, 780px);
  padding-block: clamp(140px, calc(11.5 * var(--u)), 220px) clamp(140px, calc(11 * var(--u)), 210px);
  border-radius: 0 0 var(--end-r) var(--end-r);
  box-shadow: 0 60px 90px -70px rgba(8, 18, 14, .45);
}

/* ---------- Hintergrund H23 ---------- */
.end-bg { position: absolute; inset: 0; z-index: 0; }
.end-bg__ph { position: absolute; inset: 0; }
.end-bg__move { position: absolute; inset: 0; transform-origin: 50% 40%; will-change: transform; }
.end-bg__ph .ph__media { opacity: .92; }
/* Heller Nebel mit salbeigrünem statt violettem Licht: der violette Button bleibt der Akzent
   (zwei Klassen, damit die Regel den Ton aus dem Fundament – .ph[data-tone] – übersteuert) */
.end .end-bg__ph { --ph-a: var(--c-paper-3); --ph-c: #9fcdb0; }
/* Info-Karte H23 unten links: weg vom Header, über der gerundeten Kante
   und über dem schwebenden CTA (Mobile: --cta-reserve) */
.end-bg__ph .end-bg__label {
  top: auto; right: auto;
  left: var(--margin);
  bottom: calc(var(--end-r) + var(--cta-reserve) + clamp(12px, calc(1.2 * var(--u)), 22px));
  max-width: min(520px, calc(100% - 2 * var(--margin)));
}
/* Die Karte besetzt die Ecke der unteren Plus-Reihe: diese Marke weicht,
   solange die Platzhalter-Infos sichtbar sind (Taste P blendet sie ein) */
@media (min-width: 801px) {
  html:not(.ph-hide) .end-plus .plus:nth-child(6) { visibility: hidden; }
}
.end-bg__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(46% 42% at 50% 52%, rgba(242, 244, 238, .72) 0%, rgba(242, 244, 238, 0) 72%),
    linear-gradient(180deg, var(--c-paper) 0%, rgba(242, 244, 238, 0) 26%, rgba(242, 244, 238, 0) 78%, rgba(242, 244, 238, .55) 100%);
}

/* ---------- Plus-Marken (Bauplan-Raster, Echo des Hero) ---------- */
.end-plus { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.end-plus .plus { --plus-c: rgba(8, 18, 14, .55); --plus-o: .6; }

/* ---------- Schlussbild ---------- */
.end-inner { position: relative; z-index: 3; }
.end-stage {
  display: grid;
  justify-items: center;
  text-align: center;
  transform-origin: 50% 45%;
  will-change: transform;
}
.end-mark {
  width: 64px; height: 64px;
  border-radius: 14px;
  box-shadow: 0 18px 36px -14px rgba(30, 70, 54, .55), 0 0 0 1px rgba(8, 18, 14, .06);
  margin-bottom: clamp(32px, calc(3.1 * var(--u)), 60px);
}
.end-title { margin: 0; font-weight: inherit; display: grid; justify-items: center; }
.end-title__sans { display: block; color: var(--fg); }
.end-title__serif {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--c-forest);          /* Tannengrün (9,5:1 auf Papier); Violett bleibt dem Button */
  margin-top: .02em;
}
.end-title__serif em { font-style: italic; }
.end-title__serif-mask { padding-bottom: .14em; margin-bottom: -.14em; padding-inline: .08em; }

.end-actions {
  display: grid; justify-items: center; gap: 18px;
  margin-top: clamp(40px, calc(3.6 * var(--u)), 68px);
}
.end-cta { height: 60px; padding: 0 14px 0 28px; font-size: 16px; gap: 16px; box-shadow: 0 20px 40px -18px rgba(123, 92, 255, .7); }
.end-cta .btn__icon { width: 36px; height: 36px; }
.end-cta:hover { transform: translateY(-2px); }
.end-note { font-size: var(--fs-small); color: var(--muted); }
/* Direkter Kontaktweg neben dem Projektplaner (seit 0.48.1), auch im Schluss der Unterseiten */
.end-mail { margin-top: -6px; text-align: center; }
.end-mail a { color: var(--fg); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.end-mail a:hover { text-decoration-color: var(--c-signal); }

/* ---------- Hinweis-Dialog zum Projektplaner ---------- */
html.end-dialog-open { overflow: hidden; }
.end-dialog {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: var(--margin);
  border: 0; background: transparent; color: var(--fg);
  overflow: auto; overscroll-behavior: contain;
}
.end-dialog[open] { display: grid; place-items: center; }
.end-dialog::backdrop { background: transparent; }
.end-dialog__scrim {
  position: fixed; inset: 0;
  background: rgba(8, 18, 14, .42);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.end-dialog__panel {
  position: relative;
  width: min(620px, 100%);
  display: grid; gap: clamp(18px, calc(1.4 * var(--u)), 24px);
  padding: clamp(28px, calc(2.6 * var(--u)), 48px);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(8, 18, 14, .06);
}
.end-dialog__x {
  position: absolute; top: clamp(14px, calc(1.2 * var(--u)), 22px); right: clamp(14px, calc(1.2 * var(--u)), 22px);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-2);
  transition: transform .8s var(--ease-out), background .3s;
}
.end-dialog__x > span {
  position: absolute; left: 13px; right: 13px; top: 50%; height: 2px; margin-top: -1px;
  border-radius: 2px; background: var(--c-signal);
}
.end-dialog__x > span:first-child { transform: rotate(45deg); }
.end-dialog__x > span:last-child { transform: rotate(-45deg); }
.end-dialog__x:hover { transform: rotate(90deg); background: var(--bg-3); }
.end-dialog__eyebrow { font-size: clamp(16px, calc(1.04 * var(--u)), 20px); padding-right: 52px; }
.end-dialog__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 13em;
}
.end-dialog__title:focus { outline: none; }
.end-dialog__title:focus-visible { outline: 2px solid var(--c-signal); outline-offset: 6px; }

.end-steps { display: grid; gap: 12px; padding: 6px 0 2px; }
.end-steps__track {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  margin: 0; padding: 0; list-style: none;
}
.end-steps__track::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: var(--line);
}
.end-steps__dot {
  position: relative; width: 12px; height: 12px; border-radius: 50%;
  background: var(--card); box-shadow: inset 0 0 0 1.5px rgba(8, 18, 14, .28);
}
.end-steps__dot.is-active { background: var(--c-signal); box-shadow: 0 0 0 5px rgba(123, 92, 255, .2); }
.end-steps__meta {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.end-dialog__text {
  font-size: clamp(17px, calc(1.146 * var(--u)), 21px);
  line-height: 1.5;
  color: rgba(8, 18, 14, .74);
}
.end-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.end-dialog__close:hover .btn__icon { transform: rotate(90deg); }
.end-dialog__hint { font-size: var(--fs-small); color: var(--muted); }

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
  .end { min-height: 100svh; padding-block: 120px 132px; }
  .end-title__sans, .end-title__serif { font-size: clamp(38px, calc(11.4 * var(--u)), 72px); }
  .end-mark { width: 56px; height: 56px; }
  .end-cta { height: 56px; padding-left: 22px; font-size: 15px; }
  .end-plus .plus:nth-child(2), .end-plus .plus:nth-child(4),
  .end-plus .plus:nth-child(7), .end-plus .plus:nth-child(9) { display: none; }
  /* Info-Karte unter der unteren Plus-Reihe, knapp über dem schwebenden CTA */
  .end-bg__ph .end-bg__label { bottom: calc(var(--cta-reserve) + 10px); }
  .end-dialog { padding: 16px; align-items: end; }
  .end-dialog[open] { place-items: end center; }
  .end-dialog__panel { padding: 24px 20px 22px; }
  .end-dialog__title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .end-bg__move, .end-stage { will-change: auto; }
}

/* ---------- Zwei Türen (Startseite seit 0.65.0, Entwurf «Scrollfluss» vom 11.10.2026) ----------
   Schlusssatz links oben, darunter zwei Karten: links der Weg in den Projektplaner (Tannengrün), rechts das Kontaktformular
   (dunkel; die Stile des Formulars kommen aus unterseiten/kontakt.css). Alles hängt an .end--tueren: Die Unterseiten
   (\twstrata\seite_schluss()) behalten das zentrierte Schlussbild oben. */
.end--tueren { display: block; min-height: 0; padding-block: clamp(72px, calc(8 * var(--u)), 128px) clamp(64px, calc(7 * var(--u)), 110px); }
.end--tueren .end-bg__veil { background: linear-gradient(180deg, rgba(242, 244, 238, .86) 0%, rgba(242, 244, 238, .46) 55%, rgba(242, 244, 238, .24) 100%); }
.end-kopf { margin-bottom: clamp(26px, calc(3 * var(--u)), 44px); }
.end-titel { font-size: clamp(36px, calc(4.2 * var(--u)), 68px); letter-spacing: -.04em; }
.end-tueren { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(14px, calc(1.6 * var(--u)), 24px); align-items: stretch; }
.end-tuer { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: clamp(22px, calc(2.6 * var(--u)), 40px); border-radius: 22px; color: var(--c-paper); outline: 0; }
.end-tuer--plan { background: linear-gradient(155deg, #1d4434, #10261d); }
.end-tuer--frage { --kt-fehler: #ffb4a9; background: #0c1712; box-shadow: 0 0 0 1px rgba(242, 244, 238, .08); }   /* --kt-fehler: Farbe der Meldungen des Formulars (auf /kontakt/ an der Bühne gesetzt) */
.end-tuer__titel { margin: 0; font-size: clamp(24px, calc(2.2 * var(--u)), 34px); font-weight: 620; line-height: 1.05; letter-spacing: -.032em; }
.end-tuer__text { max-width: 30em; margin: 0; font-size: 16px; line-height: 1.45; color: rgba(242, 244, 238, .7); }
.end-tuer__mail { color: var(--c-paper); text-decoration: underline; text-underline-offset: .2em; }
.end-tuer--plan .tw-wahl { align-self: flex-start; }
.end-punkte { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
.end-punkte li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 14px; align-items: baseline; padding-block: 9px; border-top: 1px solid rgba(242, 244, 238, .13); font-size: 15.5px; }
.end-punkte li:last-child { border-bottom: 1px solid rgba(242, 244, 238, .13); }
.end-punkte li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-mint); transform: translateY(-2px); }
.end-stufen { display: flex; gap: 6px; margin-top: auto; }
.end-stufen i { flex: 1; height: 3px; border-radius: 2px; background: rgba(242, 244, 238, .16); }
.end-stufen i:first-child { background: var(--c-mint); }
.end-tuer__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.end-tuer__fuss small { font-size: 13px; color: rgba(242, 244, 238, .66); }
.end-tuer :focus-visible { outline-color: var(--c-mint); }
/* Formular in der Tür: volle Breite der Karte, etwas dichter als auf /kontakt/ */
.end-tuer--frage .kt-form, .end-tuer--frage .kt-danke, .end-tuer--frage .kt-ohne-js { max-width: none; }
.end-tuer--frage .kt-fortschritt { margin-bottom: 18px; }
.end-tuer--frage .kt-schritt { gap: 18px; }
.end-tuer--frage .kt-form textarea { min-height: 104px; }
.end-tuer--frage .kt-danke h2 { font-size: clamp(28px, calc(2.4 * var(--u)), 40px); }
@media (max-width: 1000px) {
  .end-tueren { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .end--tueren { padding-block: 56px calc(48px + var(--cta-reserve)); }
  .end-tuer { padding: 22px 18px; border-radius: 18px; gap: 16px; }
  .end-tuer--plan .tw-wahl { align-self: stretch; display: grid; grid-template-columns: 1fr; border-radius: 18px; }
  .end-tuer--plan .tw-wahl button { text-align: left; }
  .end-tuer__fuss .btn { flex: 1 1 100%; justify-content: space-between; }
}