/* ---------- Startseite: die Mini-WG ----------
   Die Seite ist die WG selbst: oben das Modell der ganzen Wohnung mit Schildern an den Zimmern,
   darunter je Zimmer ein Blick hinein, in dem der WGeist die Aufgabe des Zimmers erledigt, mit dem
   passenden Bildschirm der App und einem Zettel dazu. Schriften, Papier und Klebezettel kommen von
   der Kühlschranktür (/zettel.css), die Bilder aus render/szene_wohnung.py. */

.seite.wg-seite {
  max-width: 1200px;
}

.wg-start h2 {
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- Kopf: Versprechen links, die Wohnung rechts ---------- */

.wg-kopf {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: 28px 0 24px;
}

@media (min-width: 980px) {
  .wg-kopf {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    padding-top: 40px;
  }
}

.wg-kopf h1 {
  margin: 0 0 18px;
  font-size: clamp(44px, 7vw, 78px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.wg-lead {
  max-width: 28em;
  margin: 0 0 26px;
  color: var(--subtext);
  font-size: 19px;
  line-height: 1.5;
}

.wg-los {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.wg-los .button {
  width: auto;
  margin: 0;
  padding: 15px 28px;
  font-size: 17px;
}

.wg-einladung {
  padding: 10px 0;
  color: var(--tint);
  font-family: var(--schrift-titel);
  font-weight: 700;
}

.wg-test {
  margin: 16px 0 0;
  color: var(--subtext);
  font-size: 14px;
}

/* Das Modell: die Schilder sitzen an den Bildpunkten der Zimmer (render/wohnung-punkte.json) */
.wg-modell {
  position: relative;
  margin: 0 -16px;
}

@media (min-width: 980px) {
  .wg-modell {
    margin: 0 -40px 0 -24px;
  }
}

/* Die Schilder beziehen sich nur auf das Bild, nicht auf den Platz für die Mitteilung */
.wg-modell-bild {
  position: relative;
}

.wg-wohnung {
  display: block;
  width: 100%;
  height: auto;
}

.wg-schild {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  padding: 6px 12px 7px;
  border-radius: 3px;
  background: var(--papier);
  box-shadow: 0 1px 1px rgba(20, 22, 60, 0.08), 0 10px 18px -10px rgba(20, 22, 60, 0.45);
  color: var(--tinte);
  font-family: var(--schrift-titel);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 14px)) rotate(var(--dreh, -2deg));
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.wg-schild .hand {
  color: var(--kuli);
  font-size: 13px;
  font-weight: 600;
}

/* Reißzwecke: der Punkt im Zimmer, an dem das Schild hängt */
.wg-schild::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border: 2px solid var(--papier);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 2px 4px rgba(20, 22, 60, 0.3);
}

.wg-schild-bad { top: 31.35%; left: 41.55%; --dreh: -3deg; }
.wg-schild-kueche { top: 52.18%; left: 69.8%; --dreh: 2deg; }
.wg-schild-flur { top: 48.37%; left: 27.42%; --dreh: -1.5deg; }
.wg-schild-wohnzimmer { top: 68.21%; left: 54.33%; --dreh: 1.5deg; }

@media (hover: hover) and (pointer: fine) {
  .wg-schild:hover {
    box-shadow: 0 1px 1px rgba(20, 22, 60, 0.08), 0 16px 26px -12px rgba(20, 22, 60, 0.5);
    transform: translate(-50%, calc(-100% - 18px)) rotate(0deg);
  }
}

.wg-schild:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* Am Handy sind die Schilder kleiner, sonst decken sie die Zimmer zu */
@media (max-width: 600px) {
  .wg-schild {
    padding: 4px 8px 5px;
    font-size: 12.5px;
  }

  .wg-schild .hand {
    font-size: 11.5px;
  }
}

/* Die Mitteilung legt sich einmal beim Laden über die Küche: der WGeist erinnert gerade */
.wg-push {
  top: 4%;
  left: auto;
  right: 4%;
  width: min(300px, 46%);
  transform: rotate(2deg);
  animation: wg-mitteilung 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.6s both;
}

@keyframes wg-mitteilung {
  from {
    opacity: 0;
    transform: translateY(-16px) rotate(2deg) scale(0.97);
  }
}

/* Am Handy über dem Modell, mit eigenem Platz, damit sie keine Schilder verdeckt */
@media (max-width: 979px) {
  .wg-modell {
    padding-top: 92px;
  }

  .wg-push {
    top: 0;
    right: 16px;
    width: min(300px, 78%);
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wg-push {
    animation: none;
  }

  .wg-schild {
    transition: none;
  }
}

/* ---------- Zimmer: Blick hinein, Bildschirm der App, Zettel ---------- */

.wg-zimmer {
  display: grid;
  gap: 22px;
  align-items: center;
  margin: 60px 0 0;
}

@media (min-width: 980px) {
  .wg-zimmer {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    margin-top: 112px;
  }

  /* Abwechselnd links und rechts, wie beim Gang durch die Wohnung; das Bild bleibt gleich groß */
  .wg-zimmer:nth-of-type(odd) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .wg-zimmer:nth-of-type(odd) .wg-zimmer-bild {
    order: 2;
  }
}

.wg-zimmer-bild {
  position: relative;
  margin-right: 13%;
}

/* Zimmerbild (mit Film darüber, film.js): runde Ecken und Schatten am Rahmen */
.wg-zimmer-bild > .film {
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20, 22, 60, 0.08), 0 24px 44px -26px rgba(20, 22, 60, 0.45);
}

.wg-zimmer-bild > .film > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Türschild oben links im Zimmer */
.wg-tuerschild {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 12px 5px;
  border-radius: 999px;
  background: var(--papier);
  box-shadow: 0 6px 14px -8px rgba(20, 22, 60, 0.45);
  color: var(--kuli);
  font-size: 15px;
  font-weight: 600;
}

/* Das Handy steht vorn rechts am Zimmer, als hielte es jemand hinein */
.wg-handy {
  position: absolute;
  right: -13%;
  bottom: -9%;
  width: 30%;
  transform: rotate(3deg);
}

.wg-zimmer:nth-of-type(odd) .wg-handy {
  transform: rotate(-3deg);
}

.wg-zettel {
  --dreh: -0.6deg;
  padding: 28px 28px 24px;
  transform: rotate(var(--dreh));
}

.wg-zimmer:nth-of-type(even) .wg-zettel {
  --dreh: 0.5deg;
}

.wg-zettel h2 {
  margin: 0 0 12px;
}

.wg-zettel p {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.55;
}

.wg-zettel p:last-child {
  margin-bottom: 0;
}

.wg-mehr a {
  font-family: var(--schrift-titel);
  font-weight: 700;
}

@media (max-width: 979px) {
  .wg-zimmer-bild {
    margin-bottom: 8%;
  }
}

/* ---------- Heute ---------- */

.wg-heute {
  display: grid;
  gap: 28px;
  align-items: center;
  margin: 120px 0 0;
}

@media (min-width: 780px) {
  .wg-heute {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 56px;
  }
}

.wg-heute-handys {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.wg-heute-handys .phone {
  width: min(220px, 44%);
}

.wg-heute-handys .phone:first-child {
  transform: rotate(-3deg) translateY(10px);
}

.wg-heute-handys .phone:last-child {
  transform: rotate(3deg) translateY(-10px);
}

.wg-heute-text h2 {
  margin: 0 0 12px;
}

.wg-heute-text p {
  margin: 0;
  color: var(--subtext);
  font-size: 18px;
}

/* ---------- Warum es WGeist gibt: ein Brief auf Papier ---------- */

.wg-warum {
  --dreh: -0.4deg;
  display: grid;
  gap: 8px 32px;
  max-width: 900px;
  margin: 120px auto 0;
  padding: 32px 32px 28px;
  transform: rotate(var(--dreh));
}

@media (min-width: 720px) {
  .wg-warum {
    grid-template-columns: 150px minmax(0, 1fr);
    padding: 40px 48px 36px 32px;
  }
}

.wg-warum-geist {
  width: 150px;
  height: auto;
}

.wg-warum h2 {
  margin: 0 0 14px;
}

.wg-warum p {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.6;
}

.wg-unterschrift {
  margin-top: 6px !important;
  color: var(--kuli);
  font-size: 26px !important;
  font-weight: 600;
}

/* ---------- Werdet Test-WG: drei Zettel ---------- */

.wg-rein {
  margin: 120px 0 0;
  scroll-margin-top: 24px;
}

.wg-rein > h2 {
  margin: 0 0 24px;
}

.wg-schritte {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .wg-schritte {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.wg-schritt {
  padding: 24px 24px 22px;
  border-radius: 3px;
  background: var(--papier);
  box-shadow: var(--schatten-papier);
  color: var(--tinte);
  --text: var(--tinte);
  --subtext: var(--tinte-weich);
  --tint: var(--kuli);
  --border: rgba(32, 34, 79, 0.16);
}

.wg-schritt:nth-child(2) {
  transform: rotate(0.6deg);
}

.wg-schritt:nth-child(3) {
  transform: rotate(-0.5deg);
}

.wg-schritt h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--schrift-titel);
  font-size: 20px;
}

.wg-schritt p {
  margin: 0;
}

/* Die Nummer wie mit dem Kuli eingekreist */
.wg-nummer {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--kuli);
  border-radius: 50%;
  color: var(--kuli);
  font-family: var(--schrift-hand);
  font-size: 17px;
  font-weight: 700;
}

.wg-feedback {
  max-width: 44em;
  margin: 22px 0 0;
  color: var(--subtext);
}

.wg-eingeladen {
  --dreh: 0.8deg;
  max-width: 560px;
  margin: 56px 0 0 auto;
}

.wg-eingeladen h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.wg-eingeladen p {
  margin: 0 0 6px;
}

.wg-eingeladen .button {
  width: auto;
  margin-top: 12px;
  border-color: var(--tinte);
  color: var(--tinte);
}