/*
 * RICHTUNG 3, VARIANTE B „SCHLANK“
 * Zusatz zu richtung-3.css, integriert.css und integriert-messing.css, nur für
 * startseite-integriert-schlank.html.
 * Gedanke: Der erste Bildschirm hat EIN Ziel (die Projekte). Die Buttons aus der Zeit der
 * getrennten Startseite entfallen:
 *   - Kundenzugang: kleiner, immer sichtbarer Knopf in der Kopfzeile (Bestandskunden nutzen ihn oft)
 *   - E-Book: eigener Abschnitt unter den Projekten und Menüpunkt
 *   - Anschriften: bleiben im ersten Bildschirm, aber als schmale Leiste
 */

/* ---------- Kopfzeile: Kundenzugang neben dem Menüknopf ---------- */
.kopf__kunde {
  background: var(--beton-hell); color: var(--ink); padding: .7rem 1.1rem; text-decoration: none; border: 2px solid var(--ink);
  font-stretch: 75%; font-weight: 800; font-size: .98rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  transition: background .2s, color .2s;
}
.kopf__kunde:hover, .kopf__kunde:focus-visible { background: var(--ink); color: var(--lime); }

/* ---------- Erster Bildschirm ---------- */
/* Überschrift: zwei Wörter, das Wort „Architekturvisualisierung“ steht zusammengeschrieben in EINER Zeile
   (gemessen: passt bei etwa 8,8 % der Fensterbreite; hier 8,5 %, damit es nie am Rand anstößt).
   Das erste Wort ist leichter, das Schlüsselwort am kräftigsten. Umschaltbar über html[data-titel]. */
.seite-schlank .hero__inhalt--start h1 { font-size: clamp(1.8rem, min(8.5vw, 15svh), 12rem); line-height: 1; letter-spacing: -.005em; hyphens: manual; text-wrap: nowrap; }
.seite-schlank .hero__inhalt--start .t1, .seite-schlank .hero__inhalt--start .t2 { display: block; white-space: nowrap; }
.seite-schlank .hero__inhalt--start .t1 { font-weight: 500; }
.seite-schlank .hero__inhalt--start .t2 { position: relative; font-weight: 800; }
html[data-titel="gleich"] .hero__inhalt--start .t1 { font-weight: 800; }
html[data-titel="strich"] .hero__inhalt--start .t2 { padding-bottom: .16em; }
html[data-titel="strich"] .hero__inhalt--start .t2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.2em; height: .09em; background: var(--lime); }
html[data-titel="farbe"] .hero__inhalt--start .t2 { color: var(--lime); text-shadow: 0 0 .35em rgba(0, 0, 0, .35); }
.leiste-unten { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr 1fr; align-items: stretch; background: var(--ink); color: rgba(255, 255, 255, 1); }
.leiste-unten__haupt {
  display: flex; align-items: center; gap: .8rem; padding: 1rem 1.8rem; background: var(--lime); color: rgba(0, 0, 0, 1); text-decoration: none; border: 2px solid rgba(0, 0, 0, 1); white-space: nowrap;
  font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 2.8vw, 2.9rem); line-height: 1; letter-spacing: -.01em; transition: background .2s, color .2s;
}
.leiste-unten__pfeil { display: inline-block; animation: schlank-huepf 1.8s ease-in-out infinite; }
@keyframes schlank-huepf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.1em); } }
.leiste-unten__haupt:hover, .leiste-unten__haupt:focus-visible { background: rgba(0, 0, 0, 1); color: var(--lime); }
.leiste-unten address { padding: .85rem 1.3rem; font-style: normal; font-size: .86rem; line-height: 1.45; border-left: 1px solid rgba(255, 255, 255, .25); }
.leiste-unten strong { display: block; color: var(--lime); font-stretch: 80%; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; }
.leiste-unten a:not(.leiste-unten__haupt) { color: rgba(255, 255, 255, 1); }
.leiste-unten a:not(.leiste-unten__haupt):hover { color: var(--lime); }

/* ---------- E-Book-Abschnitt ---------- */
.band-ebook { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s4); align-items: center; padding: var(--s5) var(--rand); background: var(--ink); color: rgba(255, 255, 255, 1); overflow: hidden; }
.band-ebook__text { display: grid; gap: var(--s2); max-width: 38rem; justify-self: end; }
.band-ebook h2 { font-size: clamp(2.6rem, 6vw, 6rem); }
.band-ebook p { font-size: 1.1rem; max-width: 30rem; }
.band-ebook__stapel { position: relative; height: clamp(15rem, 24vw, 22rem); max-width: 34rem; }
.band-ebook__stapel img { position: absolute; width: 58%; height: auto; top: 50%; left: 50%; border: 6px solid rgba(255, 255, 255, 1); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .45); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.band-ebook__stapel img:nth-child(1) { transform: translate(-96%, -62%) rotate(-7deg); }
.band-ebook__stapel img:nth-child(2) { transform: translate(-20%, -52%) rotate(5deg); }
.band-ebook__stapel img:nth-child(3) { transform: translate(-58%, -46%) rotate(-1deg); }
.band-ebook:hover .band-ebook__stapel img:nth-child(1) { transform: translate(-104%, -64%) rotate(-9deg); }
.band-ebook:hover .band-ebook__stapel img:nth-child(2) { transform: translate(-12%, -54%) rotate(7deg); }
.band-ebook__hinweis { position: absolute; left: 0; bottom: -.2rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }

/* ---------- Responsiv ---------- */
@media (max-width: 62rem) {
  .leiste-unten { grid-template-columns: 1fr 1fr; }
  .leiste-unten__haupt { grid-column: 1 / -1; }
  .leiste-unten address:nth-of-type(1) { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .25); }
  .leiste-unten address { border-top: 1px solid rgba(255, 255, 255, .25); }
  .band-ebook { grid-template-columns: 1fr; }
  .band-ebook__text { justify-self: start; }
  .band-ebook__stapel { margin-inline: auto; width: 100%; }
}
@media (max-width: 40rem) {
  .kopf__kunde { display: none; }
  .hero--einstieg { padding-bottom: 0; padding-inline: 0; }
  .seite-schlank .hero__inhalt--start h1 { font-size: 8.1vw; }
  .leiste-unten { grid-template-columns: 1fr; }
  .leiste-unten address { border-left: 0; }
  .leiste-unten__haupt { font-size: clamp(1.8rem, 9.2vw, 2.3rem); }
}
@media (prefers-reduced-motion: reduce) { .leiste-unten__pfeil { animation: none; } .band-ebook__stapel img { transition: none; } }