/* ──────────────────────────────────────────────────────────────────────────
   Exposé Individuell (11.10.2026, dritte Fassung)
   Phil, 02:36: „Dort mehr darauf eingehen, dass wir mit dem Kunden eng
   zusammenarbeiten und aus den Angaben, die da sind, ein individuelles
   Exposé-Design machen. Unten kurz: das mit dem Modell … eher so als ‚das
   können wir'." Darum steht oben die Zusammenarbeit, das drehbare Haus
   wandert nach unten in den Abschnitt „Das können wir".
   Sieben Abschnitte, jeder anders komponiert, Weiß und Hellblau im Wechsel.
   Nur Farbvariablen aus stil.css. Alles hier trägt das Präfix .ei- oder
   hängt an einem .ei-Abschnitt, damit nichts in andere Seiten hineinwirkt.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1 Auftakt: Text links, Szene rechts, Bild und Text teilen sich die Höhe ── */
.ei-auftakt { min-height: 0; align-items: center; padding-bottom: clamp(40px, 5vw, 96px); }
.ei-auftakt__innen {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 48px); row-gap: 28px; align-items: center;
}
.ei-auftakt__text { grid-column: 1 / span 5; display: grid; justify-items: start; }
/* Titelgröße hängt am Raster, nicht am Fenster: „Gemeinsam entworfen." muss
   in fünf Spalten in eine Zeile passen, auch auf Phils 3400-px-Monitor. */
.ei-auftakt__text .t-riesig { margin-top: clamp(16px, 1.8vw, 28px); font-size: clamp(2.4rem, min(5.2vw, 9svh, calc(var(--raster) / 23)), 6.25rem); }
/* Einfarbig Tinte (DESIGN.md, Abschnitt 7: kein zweifarbiger Titel im Auftakt). */
.ei-auftakt__text .t-riesig span { display: block; }
.ei-auftakt__text .t-aussage { margin-top: clamp(18px, 2vw, 32px); }
.ei-auftakt__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.6vw, 40px); }
.ei-auftakt__bild { grid-column: 6 / span 7; margin: 0; display: grid; gap: 10px; min-width: 0; }
/* Höhe gedeckelt (DESIGN.md: nie über 90 % der Bildschirmhöhe): Wird das Bild
   zu hoch, schneidet es oben und unten statt die Seite zu sprengen. */
.ei-auftakt__bild img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: min(68svh, 860px);
  object-fit: cover; object-position: 42% 50%; border-radius: 4px;
  box-shadow: 0 40px 90px -60px rgba(16, 24, 32, .5);
}
.ei-auftakt__bild figcaption { justify-self: end; }

/* ── 2 So arbeiten wir zusammen: Bild steht, die Schritte laufen daneben ── */
.ei-zusammen {
  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: start;
}
.ei-zusammen__bild {
  grid-column: 1 / span 6; margin: 0; display: grid; gap: 10px;
  position: sticky; top: calc(var(--kopf) + 28px);
}
/* Quadratischer Ausschnitt um Laptop, Plan und Farbfächer. */
.ei-zusammen__bild img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: min(76svh, 900px);
  object-fit: cover; object-position: 64% 50%; border-radius: 4px;
}
.ei-zusammen__text { grid-column: 8 / span 5; }
.ei-zusammen__text .t-gross { margin-top: clamp(14px, 1.6vw, 26px); font-size: clamp(2rem, min(3.4vw, 6.6svh, calc(var(--raster) / 28)), 4.25rem); }
.ei-zusammen__text > .t-text { margin-top: clamp(16px, 1.8vw, 28px); }
.ei-schritte { margin-top: clamp(28px, 3.2vw, 52px); padding: 0; list-style: none; counter-reset: s; }
.ei-schritte > li {
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 12px; row-gap: 6px;
  padding: clamp(16px, 1.6vw, 26px) 0; border-top: 1px solid var(--linie); counter-increment: s;
}
.ei-schritte > li:last-child { border-bottom: 1px solid var(--linie); }
.ei-schritte > li::before {
  content: counter(s, decimal-leading-zero); grid-row: 1 / span 2; padding-top: .35em;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--akzent);
}
.ei-schritte h3 { color: var(--tinte); font-weight: 450; letter-spacing: -.02em; font-size: clamp(1.125rem, 1.25vw, 1.5rem); line-height: 1.25; }
.ei-schritte p { color: var(--text); font-size: .9375rem; line-height: 1.55; max-width: 34em; text-wrap: pretty; }

/* ── Zwei Spalten: Bild und Text (Abschnitt 3) ─────────────────────────── */
.ei-zwei {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 48px); row-gap: clamp(30px, 3.6vw, 56px); align-items: center;
}
.ei-zwei--text-links > .ei-text { grid-column: 1 / span 5; }
.ei-zwei--text-links > :not(.ei-text) { grid-column: 7 / span 6; grid-row: 1; }
.ei-text { display: grid; justify-items: start; gap: clamp(14px, 1.3vw, 22px); }
.ei-text .t-gross { font-size: clamp(2rem, min(3.4vw, 6.6svh, calc(var(--raster) / 28)), 4.25rem); margin-top: 2px; }
.ei-notiz { max-width: 32em; padding-top: 12px; border-top: 1px solid var(--linie); }
.abschnitt--band .ei-notiz { border-top-color: #c3d2e5; }

/* Unterlagen: zwei Spalten, je Zeile Name und ein Satz, Haarlinie darüber */
.ei-unterlagen {
  width: 100%; margin-top: 6px; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 2vw, 36px);
}
.ei-unterlagen li { display: grid; gap: 3px; align-content: start; padding: 12px 0 14px; border-top: 1px solid #c3d2e5; }
.ei-unterlagen b { color: var(--tinte); font-weight: 550; font-size: .9375rem; }
.ei-unterlagen span { color: var(--text); font-size: .875rem; line-height: 1.45; }

/* Bildschirmfotos der Muster-Exposés: Rahmen wie ein Fenster */
.ei-schirm { margin: 0; display: grid; gap: 10px; justify-items: center; min-width: 0; }
.ei-schirm img {
  width: auto; max-width: 100%; max-height: min(80svh, 940px); height: auto;
  border: 1px solid var(--linie); border-radius: 4px; background: #fff;
  box-shadow: 0 40px 90px -60px rgba(16, 24, 32, .5);
}
.abschnitt--band .ei-schirm img { border-color: #c3d2e5; }
.ei-schirm figcaption { justify-self: start; }

/* ── 4 Drei Muster, locker versetzt ─────────────────────────────────────
   Haus groß links, Gewerbe kleiner rechts und tiefer gesetzt, darunter die
   Maßzeile links und die Wohnung mittig. Kein Stück hat die Maße eines
   anderen, keine Kachelreihe. */
.ei-trio {
  margin-top: clamp(40px, 5vw, 96px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 48px); row-gap: clamp(36px, 4vw, 72px); align-items: start;
}
.ei-muster { margin: 0; display: grid; gap: 14px; min-width: 0; }
.ei-muster--haus { grid-column: 1 / span 7; grid-row: 1; }
.ei-muster--gewerbe { grid-column: 9 / span 4; grid-row: 1; margin-top: clamp(40px, 9vw, 190px); }
.ei-masse { grid-column: 1 / span 4; grid-row: 2; grid-template-columns: minmax(0, 1fr); gap: 0; align-self: start; margin-top: clamp(0px, 1.6vw, 32px); }
.ei-masse > li { padding: 14px 0 16px; }
.ei-muster--wohnung { grid-column: 6 / span 5; grid-row: 2; margin-top: clamp(-120px, -5vw, -24px); }
.ei-muster__bild { display: block; overflow: hidden; border: 1px solid var(--linie); border-radius: 4px; background: #fff; box-shadow: 0 40px 90px -60px rgba(16, 24, 32, .5); }
.ei-muster__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; transition: transform 1s var(--weich); }
.ei-muster__bild:hover img { transform: scale(1.02); }
.ei-muster figcaption { display: grid; gap: 6px; justify-items: start; max-width: 34em; padding-top: 12px; border-top: 1px solid var(--linie); }
.ei-muster figcaption b { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.ei-muster figcaption span { color: var(--text); font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }
.ei-muster figcaption a { font-size: .9375rem; font-weight: 550; }

/* ── 5 Das können wir: der frühere Auftakt als Block in einem Band ──────
   Die Maße kommen aus stil.css (.auftakt). Hier wird er nur kleiner und
   ruhiger: kein eigener Verlauf, keine Kopfleiste über ihm (--kopf 0),
   Höhe gedeckelt, Titel in der Größe einer Abschnittsüberschrift. */
.ei-koennen { padding-top: clamp(40px, 5vw, 96px); }
.ei-koennen .auftakt {
  --kopf: 0px; --tp: 0px;
  /* Grundrisskarte kleiner als im früheren Auftakt: Sonst stößt sie bei 3400 px an den Titel. */
  --planw: clamp(190px, min(16vw, 34svh), 440px);
  min-height: clamp(560px, 80svh, 920px); background: transparent;
}
.ei-koennen .auftakt__titel {
  right: auto; max-width: calc(var(--raster) * .46);
  font-size: clamp(2rem, min(3.6vw, 7svh, calc(var(--raster) / 24)), 4.75rem); font-weight: 360; letter-spacing: -.036em; line-height: 1.02;
  color: var(--tinte);
}
.ei-koennen .auftakt__titel .ueberzeile { display: flex; margin-bottom: clamp(14px, 1.6vw, 26px); letter-spacing: .17em; line-height: 1.3; }
.ei-koennen .auftakt__text { width: min(26em, 30vw); }
.ei-koennen .auftakt__text .t-aussage { font-size: clamp(1.0625rem, 1.1vw, 1.3125rem); }
/* Pflichtzusatz zum Haus-Modell (12.10.2026, Skill marketing-positionierung). */
.ei-koennen__grenze { margin-top: 12px; color: var(--leise); }
/* Die Leiste mit „Drehung anhalten" steht auf Hellblau statt auf Weiß. */
.ei-koennen .buehne-knoepfe { background: rgba(255, 255, 255, .7); }

/* Was dazugehören kann: zwei Spalten, je Zeile ein Punkt mit Haarlinie */
.ei-faehig { margin-top: clamp(40px, 4.4vw, 80px); }
.ei-faehig__liste {
  margin-top: clamp(16px, 1.6vw, 26px); padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px);
}
.ei-faehig__liste li {
  display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); column-gap: clamp(14px, 1.6vw, 28px); align-items: baseline;
  padding: 15px 0; border-top: 1px solid #c3d2e5;
}
.ei-faehig__liste li:nth-last-child(-n+2) { border-bottom: 1px solid #c3d2e5; }
.ei-faehig__liste b { color: var(--tinte); font-weight: 550; font-size: .9375rem; }
.ei-faehig__liste b a { color: var(--akzent); text-decoration: none; border-bottom: 1px solid currentColor; }
.ei-faehig__liste span { color: var(--text); font-size: .9375rem; line-height: 1.5; }

/* ── 6 Eigene Software, mit zwei Belegen ─────────────────────────────────
   Der Schieber läuft hier nicht von Rand zu Rand wie früher, sondern bleibt
   im Raster und höchstens 68 % des Fensters hoch: Er ist nur noch ein Beleg. */
.ei-belege .kopfzeile2 .t-gross { font-size: clamp(2rem, min(3.6vw, 7svh, calc(var(--raster) / 26)), 4.5rem); }
@media (min-width: 701px) {
  .ei-belege .dreiklang-huelle { width: min(var(--raster), calc(68svh * 2.25)); margin-inline: auto; }
  .ei-belege .raumbild { height: auto; aspect-ratio: 3 / 4; border-radius: 3px; }
  .ei-belege .dreiklang-fuss { width: auto; }
}
.ei-lage {
  margin-top: clamp(48px, 5.6vw, 104px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 36px; align-items: center;
}
.ei-zitat { grid-column: 1 / span 6; margin: 0; display: grid; gap: 16px; justify-items: start; }
.ei-zitat blockquote {
  margin: 0; padding-left: clamp(16px, 1.4vw, 24px); border-left: 2px solid var(--akzent);
  color: var(--tinte); font-size: clamp(1.125rem, 1.3vw, 1.625rem); line-height: 1.45; letter-spacing: -.012em; max-width: 30em; text-wrap: pretty;
}
.ei-lage__karte { grid-column: 8 / span 5; }
.ei-lage__karte img { max-height: min(62svh, 640px); }

/* ── 7 Schluss: der Satz vor dem Formular ──────────────────────────────── */
/* Das Formular (teile/anfrage.html) bringt Überzeile, Titel und Satz selbst
   mit. Direkt unter „Besprechen wir Ihr Objekt" wären das zwei Überschriften
   hintereinander. Auf dieser Seite treten sie darum zurück: Titel und
   Überzeile bleiben für Vorleseprogramme, der doppelte Satz fällt weg. */
.ei-schluss { padding-bottom: 0; }
.ei-schluss + #kontakt { padding-top: clamp(40px, 4.4vw, 84px); }
.ei-schluss + #kontakt .af__wort > .ueberzeile,
.ei-schluss + #kontakt .af__wort > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ei-schluss + #kontakt .af__wort > .t-text { display: none; }
.ei-schluss + #kontakt .af__wort { padding-top: clamp(24px, 3vw, 40px); }
.ei-schluss .t-gross { font-size: clamp(2rem, min(3.6vw, 7svh), 4.75rem); }
.ei-schluss__text { display: grid; gap: 14px; }

/* ── Mittlere Breiten ──────────────────────────────────────────────────── */
@media (max-width: 1300px) {
  .ei-faehig__liste li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* ── Schmale Fenster: Text zuerst, dann das Bild, alles einspaltig ──────── */
@media (max-width: 1040px) {
  .ei-auftakt__text, .ei-auftakt__bild,
  .ei-zusammen__bild, .ei-zusammen__text,
  .ei-zwei--text-links > .ei-text, .ei-zwei--text-links > :not(.ei-text),
  .ei-muster--haus, .ei-muster--gewerbe, .ei-masse, .ei-muster--wohnung,
  .ei-zitat, .ei-lage__karte { grid-column: 1 / -1; grid-row: auto; }
  .ei-text { order: -1; }
  .ei-auftakt__bild img { aspect-ratio: 16 / 10; object-position: 40% 50%; }
  .ei-zusammen__bild { position: relative; top: auto; order: 2; }
  .ei-zusammen__bild img { aspect-ratio: 16 / 10; object-position: 60% 50%; }
  .ei-zusammen__text .t-gross, .ei-text .t-gross, .ei-belege .kopfzeile2 .t-gross, .ei-schluss .t-gross { font-size: clamp(2rem, min(5.4vw, 7.4svh), 3.5rem); }
  .ei-schirm img { max-height: none; }
  /* Muster am Tablett und Handy: Haus breit, Gewerbe und Wohnung nebeneinander. */
  .ei-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ei-muster--haus, .ei-masse { grid-column: 1 / -1; }
  .ei-muster--gewerbe { grid-column: 1; grid-row: 2; margin-top: 0; }
  .ei-muster--wohnung { grid-column: 2; grid-row: 2; margin-top: clamp(24px, 6vw, 60px); }
  .ei-masse { grid-row: 3; }
  /* Das Haus: der Auftakt aus stil.css wird hier einspaltig, ohne Kopfabstand. */
  .ei-koennen .auftakt { min-height: 0; background: transparent; }
  .ei-koennen .auftakt__titel { max-width: none; padding-top: 0; font-size: clamp(2rem, min(5.4vw, 7.4svh), 3.5rem); }
  .ei-koennen .auftakt__text { width: auto; }
  .ei-koennen .auftakt__buehne { min-height: clamp(280px, 46svh, 520px); }
  .ei-faehig__liste { grid-template-columns: minmax(0, 1fr); }
  .ei-faehig__liste li:nth-last-child(2) { border-bottom: 0; }
}
@media (max-width: 700px) {
  .ei-trio { grid-template-columns: minmax(0, 1fr); }
  .ei-muster--gewerbe, .ei-muster--wohnung { grid-column: 1; grid-row: auto; margin-top: 0; }
  .ei-masse { grid-row: auto; }
  .ei-unterlagen { grid-template-columns: minmax(0, 1fr); }
  .ei-auftakt__knoepfe .knopf { flex: 1 1 0; padding-inline: 14px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ei-muster__bild img { transition: none !important; }
}

/* Lage als ganzer Block (Phil 03:08: Lagebeschreibung mit Legende zeigen, nicht nur Zitat und kleine Karte) */
.ei-lage--ganz { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 28px; }
.ei-lage__kopf { grid-column: 1 / span 7; }
.ei-lage__titel { margin-top: 12px; }
.ei-lage__kopf .t-text { margin-top: 14px; }
.ei-lage__ganz { grid-column: 2 / span 10; }
.ei-lage__ganz img { max-height: none; width: 100%; }
@media (max-width: 1040px) { .ei-lage__kopf, .ei-lage__ganz { grid-column: 1 / -1; } }
/* Handy, 11.10.2026: der Titel bricht nach „vermessen," statt „mit" allein zu lassen. */
@media (max-width: 560px) {
  :root body .ei-lage__titel { max-width: 11.2em; text-wrap: wrap; }
}
@media (max-width: 900px) {
  /* Zwischen „Besprechen wir Ihr Objekt" und dem Formular kein Loch. */
  .ei-schluss + #kontakt { padding-top: 20px; }
  .ei-schluss + #kontakt .af__wort { padding-top: 0; }
}