/* ──────────────────────────────────────────────────────────────────────────
   Seite „Aufmaß vor Ort" (/aufmass), neu am 11.10.2026 nachts nach Phils
   Urteil „Der Schreibstil gefällt mir nicht". Präfix am-. Nur Farbvariablen
   aus stil.css. Vier Abschnitte, Bild und Text teilen sich die Höhe, die
   Seiten wechseln, Weiß und Hellblau wechseln:
   1 Auftakt: Text links, Altbauraum mit iPhone auf dem Stativ rechts.
   2 Leistungen: Handy mit Scan links, vier Zeilen mit Haarlinie rechts.
   3 Vom Raum zum Modell (Band): Text links, Grundriss und Modell rechts.
   4 Ablauf: drei Schritte an einer Linie, Überleitung ins Formular.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1 Auftakt ─────────────────────────────────────────────────────────── */
.am-auftakt {
  min-height: 0; align-items: center;
  padding: calc(var(--kopf) + clamp(24px, 4vw, 72px)) 0 clamp(36px, 4vw, 72px);
}
.am-auftakt__innen {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 4.4vw, 96px); align-items: center;
}
.am-auftakt__text .t-gross { margin-top: clamp(14px, 1.6vw, 26px); }
.am-auftakt__text .t-aussage { margin-top: clamp(18px, 2vw, 30px); max-width: 24em; }
.am-auftakt__knopf { margin-top: clamp(24px, 2.6vw, 40px); }
/* Querformat 3:2. Höhe nie über 70 % des Bildschirms (DESIGN.md: kein Bild
   über 90 %), darum die Breite zusätzlich an die Bildschirmhöhe gebunden. */
.am-auftakt__bild { margin: 0; justify-self: end; width: min(100%, 104svh); display: grid; gap: 10px; }
.am-auftakt__bild img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px;
  box-shadow: 0 50px 100px -60px rgba(16, 24, 32, .55);
}

/* ── 1b Aus der Praxis (12.10.2026): Überschrift links, die Geschichte rechts ── */
.am-praxis .kopfzeile2 > :first-child { grid-column: 1 / span 6; }
.am-praxis .kopfzeile2 > :last-child { grid-column: 7 / -1; }
.am-praxis .t-aussage { max-width: 28em; }
.am-praxis__weiter { margin-top: clamp(16px, 1.6vw, 26px); }
@media (max-width: 1040px) { .am-praxis .kopfzeile2 > :first-child, .am-praxis .kopfzeile2 > :last-child { grid-column: 1 / -1; } }

/* ── 2 Was Sie dazunehmen können ───────────────────────────────────────── */
.am-wahl__innen {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 48px); row-gap: clamp(28px, 3vw, 48px); align-items: center;
}
/* Hochformat 720 × 1290: Breite auch an die Bildschirmhöhe gebunden, damit das
   Handy nie höher als rund 80 % des Bildschirms wird. */
.am-wahl__bild { grid-column: 1 / span 5; justify-self: center; margin: 0; display: grid; gap: 14px; width: min(100%, clamp(220px, 23vw, 420px), 46svh); }
/* Das Bild hat einen hellen Hintergrund um das Handy: entlang des Gehäuses
   abschneiden, sonst steht ein heller Kasten auf der Fläche. Der Schatten
   liegt darum auf der Hülle, nicht auf dem Bild (Filter vor Beschnitt). */
.am-wahl__handy { filter: drop-shadow(0 30px 36px rgba(16, 24, 32, .18)); }
.am-wahl__handy img { width: 100%; height: auto; clip-path: inset(3.3% 6.6% 3.4% 6.8% round 12% / 6.6%); }
.am-wahl__bild figcaption { text-align: center; }
.am-wahl__text { grid-column: 6 / span 7; }
.am-wahl__text .t-gross { margin-top: clamp(14px, 1.6vw, 26px); }
.am-wahl__text .t-aussage { margin-top: clamp(16px, 1.8vw, 28px); }

/* Vier Zeilen mit Haarlinie: Titel links, zwei Sätze rechts. Keine Karten. */
.am-liste { margin-top: clamp(28px, 3vw, 52px); border-bottom: 1px solid var(--linie); }
.am-liste li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(20px, 2.4vw, 48px);
  padding: clamp(18px, 1.6vw, 28px) 0; border-top: 1px solid var(--linie);
}
.am-liste h3 { font-size: clamp(1.125rem, 1.15vw, 1.375rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; color: var(--tinte); }
.am-liste p { grid-column: 2; font-size: 1rem; line-height: 1.55; color: var(--text); text-wrap: pretty; max-width: var(--mass); }
.am-liste .am-liste__notiz { margin-top: 8px; font-size: .875rem; color: var(--leise); }

/* ── 3 Vom Raum zum Modell ─────────────────────────────────────────────── */
.am-modell {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 48px); row-gap: clamp(28px, 3vw, 48px); align-items: center;
}
.am-modell__text { grid-column: 1 / span 4; }
.am-modell__text .t-gross { margin-top: clamp(14px, 1.6vw, 26px); }
.am-modell__text .t-aussage { margin-top: clamp(16px, 1.8vw, 28px); }
/* Weiße Tafel auf dem Band: Plan und Modell haben weißen Grund. */
.am-modell__paar {
  grid-column: 6 / span 7;
  display: grid; grid-template-columns: minmax(0, .8fr) clamp(36px, 5vw, 96px) minmax(0, 1fr);
  align-items: end; padding: clamp(20px, 2.6vw, 52px);
  background: #fff; border: 1px solid var(--linie); border-radius: 4px;
}
.am-modell__paar figure { margin: 0; display: grid; gap: 14px; }
.am-modell__plan img { width: 100%; max-height: min(60svh, 600px); object-fit: contain; }
/* Das Standbild hat oben und links viel Weiß: auf das Modell zuschneiden. */
.am-modell__raum img { width: 100%; max-height: min(60svh, 600px); aspect-ratio: 480 / 660; object-fit: cover; object-position: 85% 100%; }
.am-modell__paar figcaption { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--linie); }
.am-modell__paar figcaption b { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.am-modell__paar figcaption span { font-size: .875rem; color: var(--leise); }
/* Die Signatur: eine blaue Linie mit Pfeilspitze führt vom Plan zum Modell. */
.am-modell__linie { position: relative; height: 1px; margin-inline: 8px; background: var(--akzent); align-self: center; }
.am-modell__linie::after {
  content: ""; position: absolute; right: -1px; top: -4px; width: 9px; height: 9px;
  border-top: 1px solid var(--akzent); border-right: 1px solid var(--akzent); transform: rotate(45deg);
}

/* ── 4 So läuft der Termin ─────────────────────────────────────────────── */
.am-termin { padding-bottom: clamp(56px, 6vw, 112px); }
.am-termin__kopf .t-gross { margin-top: clamp(14px, 1.6vw, 26px); }
/* Drei Schritte an einer durchgehenden Linie, je ein blauer Punkt. */
.am-schritte {
  margin-top: clamp(36px, 4vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 48px); border-top: 1px solid var(--linie); counter-reset: none;
}
.am-schritte li { position: relative; padding-top: clamp(22px, 2vw, 34px); display: grid; align-content: start; gap: 10px; }
.am-schritte li::before {
  content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--akzent);
}
.am-schritte__nr { font-size: clamp(2.25rem, 2.6vw, 3.25rem); font-weight: 300; line-height: 1; letter-spacing: -.04em; color: var(--akzent); }
.am-schritte h3 { margin-top: 6px; font-size: clamp(1.125rem, 1.15vw, 1.375rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; color: var(--tinte); }
.am-schritte p { font-size: 1rem; line-height: 1.55; color: var(--text); text-wrap: pretty; max-width: 26em; }
.am-termin__weiter { margin-top: clamp(48px, 5vw, 96px); max-width: 30em; }

/* ── Schmal ────────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .am-modell__text, .am-modell__paar { grid-column: 1 / -1; }
  .am-liste li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .am-liste p { grid-column: 1; }
}
@media (max-width: 900px) {
  .am-auftakt__innen { grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 6vw, 44px); }
  .am-auftakt__bild { justify-self: stretch; width: 100%; }
  .am-wahl__bild, .am-wahl__text { grid-column: 1 / -1; }
  .am-wahl__bild { width: min(62vw, 300px); }
  .am-wahl__text { order: -1; }
  .am-schritte { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--linie); margin-left: 4px; }
  .am-schritte li { padding: 0 0 clamp(28px, 6vw, 40px) 26px; }
  .am-schritte li:last-child { padding-bottom: 0; }
  .am-schritte li::before { left: -5px; top: 10px; }
}
@media (max-width: 560px) {
  /* Plan und Modell bleiben nebeneinander: so sieht man, dass es dieselbe Wohnung ist. */
  .am-modell__paar { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); padding: 14px; }
  .am-modell__linie { margin-inline: 2px; }
  .am-modell__paar figcaption span { font-size: .8125rem; }
}