/* Gemeinsamer Auftakt der Produktseiten
   ------------------------------------------------------------------
   Wer im Burger zwischen Reservierungsmanagement, Personalverwaltung
   und Zeiterfassung wechselt, soll dreimal denselben Aufbau finden:
   Produktzeichen und Bereichsname, die Überschrift links, rechts der
   erklärende Satz mit den beiden Wegen weiter — und darunter das,
   was die jeweilige Seite zeigt.

   Die Werte stammen aus .rm-hero auf der Reservierungsseite; diese
   Seite ist die Vorlage und behält ihre eigenen Regeln. */

.produkt-hero{
  background:radial-gradient(ellipse at 90% 10%,#ffedbb70,transparent 55%),#fdfbf6;
  padding:var(--section-y) 0 0;
}
.produkt-hero-top{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:var(--space-8);
  align-items:center;
  margin-bottom:var(--space-7);
}

.produkt-hero .eyebrow{display:flex;gap:var(--space-2);align-items:center}
.produkt-hero .eyebrow img{display:block;flex:none}

.produkt-hero h1{
  font-size:clamp(44px,5.1vw,70px);
  line-height:1.06;
  letter-spacing:-.055em;
  margin:var(--space-5) 0 0;
  text-wrap:balance;
  color:#24281f;
}
.produkt-hero h1 span{color:#ad7618}

.produkt-hero-copy{max-width:450px}
.produkt-hero-copy p{font-size:17px;line-height:1.8;color:#6c705f;margin-bottom:var(--space-5)}

/* Der zweite Weg: bleibt auf der Seite, führt zum Ablauf */
.produkt-hero-link{display:flex;font-size:13px;margin-top:var(--space-5)}
.produkt-hero-link .ui-arrow{vertical-align:-2px}

[data-theme=dark] .produkt-hero{background:#23281f}
[data-theme=dark] .produkt-hero h1{color:var(--ink)}
[data-theme=dark] .produkt-hero-copy p{color:var(--muted)}

@media(max-width:1000px){
  .produkt-hero-top{gap:var(--space-6)}
}
@media(max-width:760px){
  .produkt-hero{padding-top:var(--section-y-tight)}
  .produkt-hero-top{grid-template-columns:1fr;gap:var(--space-5);margin-bottom:var(--space-6)}
  .produkt-hero h1{font-size:46px}
  .produkt-hero-copy{max-width:none}
  .produkt-hero-copy p{font-size:16px}
}

/* Der zweite Weg ist ein eigenständiges Bedienelement, kein Link im
   Fließtext — er bekommt einen greifbaren Bereich von 32 px. */
.produkt-hero-link{
  min-height:32px;
  align-items:center;
  width:fit-content;
}