/* Startseite: Hans als Bildmarke in voller Größe, Reihenfolge und Gruppen.
   Nur in index.html eingebunden. Bewusst eine eigene Datei: Einige Regeln
   (.btn-ghost-flush, .saeulen) würden in style.css auch Unterseiten ändern. */

/* ---------- Hero mit Hans ---------- */

.hero-hans {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--raum-xl);
  align-items: center;
  padding-top: var(--raum-2xl);
  padding-bottom: var(--abschnitt);
}

.hero-hans-bild img {
  width: 100%;
  height: auto;
  /* Hans geht beim Laden ins Bild, siehe js/ankunft.js. */
  transform-origin: 50% 100%;
}

.hero-hans-text h1 { margin-bottom: 0; }

.hero-hans .hero-marke {
  font-size: clamp(2.8rem, 6.6vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.hero-hans .hero-marke .zeile { display: block; }

.hero-hans .hero-zusatz {
  margin-top: var(--raum-s);
  max-width: 24ch;
}


/* Kleiner Hans im Kopf: am Desktop ausgeblendet, solange der große zu
   sehen ist. Darunter steht der Schriftzug neben ihm und rückte sonst um
   die Breite der Bildmarke hin und her; dort bleibt er stehen. */
@media (min-width: 1121px) {
  .startseite .logo-mark { transition: opacity 0.35s ease, transform 0.35s ease; }
  .startseite.kopf-hans-aus .logo-mark { opacity: 0; transform: translateY(-6px); }
}

/* Schluss: auf der Startseite eine Stufe größer als auf den Unterseiten. */
.startseite .abschluss h2 { font-size: var(--titel-1); }

/* ---------- Layout: Reihenfolge und Gruppen ----------
   Lesefolge: Hans und Name, Foto, was wir tun, die Produktwelten als
   Angebot, für wen, wie wir arbeiten, Haltung mit Film, Inhaber, Gespräch. */

/* Einleitung und Produktwelten gehören zusammen: Der Knopf „Unsere
   Produktwelten“ zeigt direkt darauf. Ein Abstand statt zwei. */
.startseite #produktwelten { padding-top: 0; }

/* Produktwelten ohne Kartenrahmen: Nähe gruppiert, nicht der Kasten. Das
   Foto steht bündig in der Spalte und trägt die Kachel. */
.saeulen .card {
  border: 0;
  padding: 0;
  background: transparent;
}
.saeulen .card .visual.square { aspect-ratio: 4 / 5; margin-bottom: var(--raum-s); }
.saeulen .card p { color: var(--color-text-soft); }
.saeulen .card .btn-ghost { padding-left: 0; padding-bottom: 0; }
.saeulen a.card:hover { transform: none; }
.saeulen .card .visual img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.saeulen a.card:hover .visual img { transform: scale(1.04); }
.saeulen .card .visual { overflow: hidden; }

/* Haltung: Leitbild und Imagefilm als ein Kapitel auf Hauch Rosé. */
.haltung .haltung-film { margin-top: var(--raum-2xl); }
.haltung .abschnitt-kopf { margin-bottom: var(--raum-l); }

/* ---------- Handy und Tablet ---------- */

@media (max-width: 860px) {
  .hero-hans {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-l);
    padding-top: var(--raum-l);
    padding-bottom: var(--raum-xl);
    text-align: center;
  }
  .hero-hans-bild img { width: min(80vw, 360px); margin: 0 auto; }
  .hero-hans .hero-zusatz { margin-left: auto; margin-right: auto; }

  .startseite #produktwelten { padding-top: 0; }
}

/* Produktwelten: Tablet zwei Spalten, Handy eine mit flacheren Fotos. */
@media (max-width: 860px) {
  .saeulen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-l) var(--raum-s); }
}
@media (max-width: 560px) {
  .saeulen { grid-template-columns: minmax(0, 1fr); }
  .saeulen .card .visual.square { aspect-ratio: 3 / 2; }
  .saeulen h3 { min-height: 0; }
}