/* Homepage typography and the native link panel. */
@font-face {
  font-family: "MARKTOR Display";
  src: url("fonts/cinzel-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
#top.hero-live {
  --hero-brand: "MARKTOR Display", var(--brand-serif);
  position: relative; isolation: isolate; padding: 0 !important;
  margin-top: calc(-1 * var(--hdr-h, 71px)); background: #111315; color: #f1e5c9;
}
/* Contain full-bleed homepage photographs at the viewport edge. */
main#inhalt > #motivation { overflow-x: clip; }
#top.hero-live::before, #top.hero-live::after { display: none !important; }
#top.hero-live .mh-scene { position: relative; aspect-ratio: 1672 / 941; overflow: clip; }
#top.hero-live .mh-photo { position: absolute; inset: 0; margin: 0; z-index: 0; }
#top.hero-live .mh-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: none; transform: none; }
#top.hero-live .mh-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10,12,13,.29), transparent 69%), linear-gradient(180deg, rgba(10,12,13,.35), transparent 37%); }
#top.hero-live .mh-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 2.2vw, 36px); width: 100%; max-width: 1672px; padding: calc(var(--hdr-h, 71px) + 40px) clamp(28px, 4.2vw, 72px) 36px; margin: 0 auto; box-sizing: border-box; direction: ltr; }
#top.hero-live .mh-head { min-width: 0; max-width: 100%; }
#top.hero-live .mh-slogan { margin: 0; max-width: none; color: #f1e5c9; -webkit-text-fill-color: #f1e5c9; font-family: var(--hero-brand); font-size: clamp(3rem, 5vw, 5.25rem) !important; font-weight: 500; line-height: 1.1 !important; letter-spacing: .006em; text-transform: uppercase; white-space: nowrap; direction: ltr; text-align: left; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
#top.hero-live .mh-slogan .gold { color: inherit; -webkit-text-fill-color: inherit; background: none; }
#top.hero-live .mh-title { margin: 16px 0 0; max-width: 62ch; font-family: var(--body); font-size: clamp(1.25rem, 1.6vw, 1.5rem) !important; font-weight: 650; line-height: 1.45 !important; letter-spacing: .035em !important; text-transform: uppercase; color: #f1e5c9; -webkit-text-fill-color: #f1e5c9; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
#top.hero-live .mh-link { display: block; width: min(58%, 800px); min-width: 0; padding: clamp(22px, 2vw, 32px); box-sizing: border-box; border: 1px solid rgba(205,181,135,.65); border-radius: 10px; background: rgba(13,15,16,.58); color: #f1e5c9; text-decoration: none; box-shadow: 0 12px 34px rgba(0,0,0,.12); cursor: pointer; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
#top.hero-live .mh-link:hover { background: rgba(13,15,16,.62); border-color: #d9bf8c; box-shadow: 0 16px 42px rgba(0,0,0,.2); }
#top.hero-live .mh-link:focus-visible { outline: 3px solid #edd6a6; outline-offset: 6px; background: rgba(13,15,16,.65); }
#top.hero-live .mh-link-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid rgba(205,181,135,.3); }
#top.hero-live .mh-panel-title { margin: 0; color: #f1e5c9; -webkit-text-fill-color: #f1e5c9; font-family: var(--hero-brand); font-size: clamp(1.5rem, 2vw, 2rem) !important; font-weight: 500; line-height: 1.3 !important; letter-spacing: .005em !important; text-transform: none; text-wrap: pretty; }
#top.hero-live .mh-link-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid rgba(205,181,135,.55); border-radius: 50%; color: #ddc28d; font: 400 22px/1 var(--body); }
#top.hero-live .mh-points { display: grid; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
#top.hero-live .mh-points li { position: relative; min-width: 0; margin: 0; padding-inline-start: 18px; font-family: var(--body); font-size: clamp(1.25rem, 1.5vw, 1.4375rem); font-weight: 450; line-height: 1.5; color: #f1e5c9; overflow-wrap: break-word; }
#top.hero-live .mh-points li::before { content: ''; position: absolute; inset-inline-start: 0; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: #d3b67e; }
#top.hero-live .mh-link-hint { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 20px; color: #f4dfb8; font: 600 1.0625rem/1.4 var(--body); letter-spacing: .025em; text-decoration: underline; text-underline-offset: .2em; }
#top.hero-live .mh-link-hint > span { font-size: 21px; line-height: 1; }
#top.hero-live .mh-after { display: flex; flex-direction: column; align-items: center; gap: 28px; padding-block: 34px 48px; }
#top.hero-live .mh-brand { max-width: 100%; text-align: center; }
#top.hero-live .mh-brand img { display: block; width: 170px; height: auto; margin: 0 auto; }
#top.hero-live .mh-sub { margin: 18px auto 0; max-width: 950px; color: #f0e5cd; font-family: var(--brand-serif); font-size: clamp(1.375rem, 2vw, 1.75rem) !important; font-weight: 400; line-height: 1.4 !important; letter-spacing: .025em !important; }
#top.hero-live .mh-actions { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; transform: none; width: auto; }
#top.hero-live .mh-actions .btn { font-size: .875rem !important; min-height: 48px; }
@media (max-width: 1344.98px) {
  #top.hero-live .mh-scene { display: grid; grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; overflow: visible; }
  #top.hero-live .mh-photo { position: relative; inset: auto; grid-column: 1; grid-row: 1; width: 100%; aspect-ratio: 1672 / 941; }
  #top.hero-live .mh-photo img { position: absolute; inset: 0; }
  #top.hero-live .mh-shade { display: none; }
  #top.hero-live .mh-content { display: contents; }
  #top.hero-live .mh-head { grid-column: 1; grid-row: 2; margin: 28px 24px 24px; }
  #top.hero-live .mh-slogan { font-size: clamp(2.25rem, 5vw, 3.75rem) !important; white-space: normal; }
  #top.hero-live .mh-title { margin-top: 14px; max-width: 72ch; font-size: 1.25rem !important; }
  #top.hero-live .mh-link { grid-column: 1; grid-row: 3; width: auto; margin: 0 24px; background: linear-gradient(115deg, rgba(221,194,139,.065), rgba(17,19,21,.3)); }
  #top.hero-live .mh-link:hover, #top.hero-live .mh-link:focus-visible { background: rgba(221,194,139,.08); }
  #top.hero-live .mh-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
}
@media (max-width: 760px) {
  #top.hero-live .mh-photo { aspect-ratio: 3 / 2; padding-top: var(--hdr-h, 65px); box-sizing: content-box; }
  #top.hero-live .mh-photo img { object-position: 88% 50%; }
  #top.hero-live .mh-head { margin: 24px 20px 22px; }
  #top.hero-live .mh-slogan { max-width: 100%; font-size: clamp(2.125rem, 8.5vw, 3.25rem) !important; line-height: 1.12 !important; }
  #top.hero-live .mh-title { font-size: 1.125rem !important; letter-spacing: .025em !important; overflow-wrap: anywhere; }
  #top.hero-live .mh-link { margin-inline: 20px; padding: 24px 22px; border-radius: 9px; }
  #top.hero-live .mh-link-heading { gap: 12px; }
  #top.hero-live .mh-link-heading .mh-link-icon { display: none; }
  #top.hero-live .mh-panel-title { font-size: 1.5rem !important; }
  #top.hero-live .mh-link-icon { width: 30px; height: 30px; font-size: 20px; }
  #top.hero-live .mh-points { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #top.hero-live .mh-points li { font-size: 1.25rem; line-height: 1.5; }
  #top.hero-live .mh-after { gap: 24px; padding-block: 30px 40px; }
  #top.hero-live .mh-actions { flex-direction: column; width: 100%; }
  #top.hero-live .mh-actions .btn { width: 100%; box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) { #top.hero-live .mh-link { transition: none; } }
/* Rechner ab 1181 px: Schriftzug und Klickflaeche auf dem Bild, Punkte zweispaltig, damit die Personen frei bleiben
   (Wunsch des Nutzers 01.11.); bis 1180 px stehen beide unter dem Bild */
@media (min-width: 1345px) {
  #top.hero-live .mh-content { gap: clamp(18px, 1.8vw, 30px); padding-top: calc(var(--hdr-h, 71px) + 28px); }
  #top.hero-live .mh-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
  #top.hero-live .mh-points li { font-size: clamp(1rem, 1.15vw, 1.25rem); }
}
/* 01.11.: Startbild wieder an die Seite angepasst (Wunsch des Nutzers) - etwas ruhigere Farben, oben unter der
   Kopfleiste dunkler, links hinter Schriftzug und Klickflaeche abgedunkelt, unten weicher Uebergang ins Anthrazit,
   leichte Randabdunklung. Die Personen rechts bleiben hell. */
#top.hero-live .mh-photo img { filter: saturate(.88) contrast(1.04) brightness(.95); }
/* 01.11. nachgeschaerft (Wunsch des Nutzers): hinter dem Schriftzug eine weiche, breitere Abdunklung, damit er auch
   ueber den hellen Fenstern gut lesbar ist; unten laeuft das Bild jetzt ganz in das Anthrazit aus (keine Kante mehr) */
@media (min-width: 1345px) {
  #top.hero-live .mh-shade {
    background:
      radial-gradient(ellipse 62% 36% at 24% 13%, rgba(17,19,21,.6) 0%, rgba(17,19,21,.32) 55%, rgba(17,19,21,0) 100%),
      linear-gradient(180deg, rgba(17,19,21,.85) 0, rgba(17,19,21,.5) var(--hdr-h, 71px), rgba(17,19,21,.16) calc(var(--hdr-h, 71px) + 190px), rgba(17,19,21,0) calc(var(--hdr-h, 71px) + 300px)),
      linear-gradient(90deg, rgba(17,19,21,.82) 0%, rgba(17,19,21,.66) 30%, rgba(17,19,21,.3) 50%, rgba(17,19,21,0) 66%),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.72) 6%, rgba(17,19,21,.28) 15%, rgba(17,19,21,0) 25%),
      radial-gradient(130% 100% at 60% 45%, rgba(17,19,21,0) 62%, rgba(17,19,21,.28) 100%);
  }
}
@media (max-width: 1344.98px) {
  #top.hero-live .mh-photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(17,19,21,.55) 0, rgba(17,19,21,0) 22%),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.7) 7%, rgba(17,19,21,.25) 16%, rgba(17,19,21,0) 26%);
  }
}
/* 01.11.: Schriftzug und Unterzeile auch zwischen 761 und 1180 px oben links AUF dem Bild, mit Abdunklung dahinter
   wie frueher (Wunsch des Nutzers); die Klickflaeche steht in dieser Breite darunter, damit die Personen frei bleiben */
@media (min-width: 761px) and (max-width: 1344.98px) {
  #top.hero-live .mh-head { grid-column: 1; grid-row: 1; align-self: start; position: relative; z-index: 2;
    margin: calc(var(--hdr-h, 71px) + 26px) clamp(24px, 4vw, 48px) 0; max-width: 62%; }
  #top.hero-live .mh-slogan { font-size: clamp(2.25rem, 4.6vw, 3.4rem) !important; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
  #top.hero-live .mh-title { font-size: clamp(1rem, 1.6vw, 1.2rem) !important; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
  #top.hero-live .mh-photo::after {
    background:
      linear-gradient(180deg, rgba(17,19,21,.85) 0, rgba(17,19,21,.5) var(--hdr-h, 71px), rgba(17,19,21,0) calc(var(--hdr-h, 71px) + 170px)),
      radial-gradient(85% 95% at 0% 0%, rgba(17,19,21,.85) 0%, rgba(17,19,21,.58) 45%, rgba(17,19,21,0) 80%),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.7) 7%, rgba(17,19,21,.25) 16%, rgba(17,19,21,0) 26%);
  }
  #top.hero-live .mh-link { margin-top: 28px; }
}
/* 01.11.: Klickflaeche mit den vier wichtigsten Problemloesungen 01-04 (Titel und Satz wie auf der Seite
   Problemloesungen, Wunsch des Nutzers) - Nummer in Gold links, darunter kein Punkt mehr */
#top.hero-live .mh-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding-inline-start: 0; }
#top.hero-live .mh-steps li::before { content: none; }
#top.hero-live .mh-steps .mh-n { min-width: 2ch; color: #ddc28d; font-family: var(--hero-brand); font-weight: 600; letter-spacing: .04em; }
#top.hero-live .mh-pt { min-width: 0; }
#top.hero-live .mh-pt-t { display: block; color: #f1e5c9; font-weight: 650; text-wrap: pretty; }
#top.hero-live .mh-pt-d { display: block; margin-top: 4px; color: rgba(241,229,201,.86); font-weight: 400; }
#top.hero-live .mh-steps { gap: 20px 32px; }
@media (min-width: 1345px) {
  /* wird die Szene durch die Klickflaeche hoeher als das Bild, wird links beschnitten - die Personen rechts bleiben ganz */
  #top.hero-live .mh-photo img { object-position: 74% 50%; }
  #top.hero-live .mh-link { width: min(60%, 880px); }
  #top.hero-live .mh-steps { gap: 18px 32px; }
  #top.hero-live .mh-steps li { line-height: 1.42; }
  #top.hero-live .mh-pt-d { font-size: .94em; line-height: 1.45; }
}
/* Schmales Tablet: eine Spalte, sonst werden die Zeilen zu kurz */
@media (min-width: 761px) and (max-width: 959px) {
  #top.hero-live .mh-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
/* Kurze Vorteile-Zeile unter den vier Punkten (Wunsch des Nutzers 01.11.) */
#top.hero-live .mh-benefits { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(205,181,135,.3); }
#top.hero-live .mh-ben-l { display: block; margin-bottom: 8px; color: #ddc28d; font: 700 .8125rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; }
#top.hero-live .mh-ben-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 959px) { #top.hero-live .mh-ben-list { grid-template-columns: minmax(0, 1fr); } }
#top.hero-live .mh-ben-list li { position: relative; min-width: 0; margin: 0; padding-inline-start: 14px; color: #f1e5c9; font-family: var(--body); font-size: 1.125rem; font-weight: 500; line-height: 1.45; }
#top.hero-live .mh-ben-list li::before { content: ''; position: absolute; inset-inline-start: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #d3b67e; }
@media (min-width: 1345px) {
  #top.hero-live .mh-ben-list li { font-size: clamp(.94rem, 1.08vw, 1.17rem); }
}
/* Handy: Nummer steht vor dem Titel, der Satz darunter nutzt die volle Breite */
@media (max-width: 760px) {
  #top.hero-live .mh-link { padding: 22px 18px; }
  #top.hero-live .mh-steps { gap: 18px; }
  #top.hero-live .mh-steps li { display: flow-root; }
  #top.hero-live .mh-steps .mh-n { float: left; float: inline-start; margin-inline-end: .5em; line-height: 1.45; }
  #top.hero-live .mh-pt-t { line-height: 1.45; }
  #top.hero-live .mh-pt-d { margin-top: 6px; }
}

/* 02.11.: neues Startbild (Terrasse am Fluss) - am Handy beginnt das Bild unter der Kopfleiste, damit die verglaste
   Bruecke ganz sichtbar bleibt (Sinnbild fuer die Kontrolle, Wunsch des Nutzers) */
@media (max-width: 760px) {
  #top.hero-live .mh-photo img { inset: var(--hdr-h, 65px) 0 0 0; height: calc(100% - var(--hdr-h, 65px)); }
}
/* 02.11.: Slogan und Unterzeile immer im Startbild, in ruhigerer Groesse (Wunsch des Nutzers) */
@media (min-width: 1345px) {
  #top.hero-live .mh-slogan { font-size: clamp(2.75rem, 3.9vw, 4.25rem) !important; }
  #top.hero-live .mh-title { margin-top: 12px; font-size: clamp(1.0625rem, 1.3vw, 1.3125rem) !important; }
}
@media (min-width: 761px) and (max-width: 1344.98px) {
  #top.hero-live .mh-slogan { font-size: clamp(2.125rem, 4.1vw, 3rem) !important; }
  #top.hero-live .mh-title { margin-top: 10px; font-size: clamp(.9375rem, 1.45vw, 1.0625rem) !important; }
}
/* Handy: Bild 5:4 unter der Kopfleiste, Schrift oben links auf dem Bild, die Personen rechts unten bleiben frei */
@media (max-width: 760px) {
  #top.hero-live .mh-photo { aspect-ratio: 5 / 4; min-height: 300px; }
  #top.hero-live .mh-photo img { object-position: 80% 50%; }
  #top.hero-live .mh-head { grid-column: 1; grid-row: 1; align-self: start; position: relative; z-index: 2;
    margin: calc(var(--hdr-h, 65px) + 18px) 18px 0; max-width: none; }
  #top.hero-live .mh-slogan { font-size: clamp(1.75rem, 7.4vw, 2.375rem) !important; line-height: 1.1 !important; text-shadow: 0 2px 16px rgba(0,0,0,.75); }
  #top.hero-live .mh-title { margin-top: 8px; font-size: clamp(.875rem, 3.7vw, 1rem) !important; line-height: 1.4 !important; letter-spacing: .03em !important; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
  #top.hero-live .mh-photo::after {
    background:
      linear-gradient(180deg, rgba(17,19,21,.72) 0, rgba(17,19,21,.6) calc(var(--hdr-h, 65px) + 30px), rgba(17,19,21,.28) calc(var(--hdr-h, 65px) + 125px), rgba(17,19,21,0) calc(var(--hdr-h, 65px) + 185px)),
      radial-gradient(90% 55% at 0% 0%, rgba(17,19,21,.5) 0%, rgba(17,19,21,0) 100%),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.7) 7%, rgba(17,19,21,.25) 16%, rgba(17,19,21,0) 26%);
  }
  #top.hero-live .mh-link { margin-top: 22px; }
}
/* 02.11.: helleres, natuerlicheres Startbild (Wunsch des Nutzers: "zu vertraeumt, heller, natuerlicher") - kein
   Helligkeitsfilter mehr, Abdunklung nur noch so viel, wie der Schriftzug zum Lesen braucht */
#top.hero-live .mh-photo img { filter: saturate(.97) contrast(1.02); }
@media (min-width: 1345px) {
  #top.hero-live .mh-shade {
    background:
      radial-gradient(ellipse 52% 32% at 22% 14%, rgba(17,19,21,.5) 0%, rgba(17,19,21,.24) 55%, rgba(17,19,21,0) 100%),
      linear-gradient(180deg, rgba(17,19,21,.7) 0, rgba(17,19,21,.36) var(--hdr-h, 71px), rgba(17,19,21,.08) calc(var(--hdr-h, 71px) + 170px), rgba(17,19,21,0) calc(var(--hdr-h, 71px) + 250px)),
      linear-gradient(90deg, rgba(17,19,21,.5) 0%, rgba(17,19,21,.32) 28%, rgba(17,19,21,.1) 46%, rgba(17,19,21,0) 58%),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.66) 6%, rgba(17,19,21,.22) 14%, rgba(17,19,21,0) 22%);
  }
}
@media (min-width: 761px) and (max-width: 1344.98px) {
  #top.hero-live .mh-photo::after {
    background:
      linear-gradient(180deg, rgba(17,19,21,.7) 0, rgba(17,19,21,.38) var(--hdr-h, 71px), rgba(17,19,21,0) calc(var(--hdr-h, 71px) + 150px)),
      radial-gradient(70% 80% at 0% 0%, rgba(17,19,21,.66) 0%, rgba(17,19,21,.38) 45%, rgba(17,19,21,0) 78%),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.66) 7%, rgba(17,19,21,.2) 15%, rgba(17,19,21,0) 24%);
  }
}
@media (max-width: 760px) {
  #top.hero-live .mh-photo::after {
    background:
      linear-gradient(180deg, rgba(17,19,21,.66) 0, rgba(17,19,21,.5) calc(var(--hdr-h, 65px) + 30px), rgba(17,19,21,.2) calc(var(--hdr-h, 65px) + 120px), rgba(17,19,21,0) calc(var(--hdr-h, 65px) + 170px)),
      radial-gradient(85% 50% at 0% 0%, rgba(17,19,21,.36) 0%, rgba(17,19,21,0) 100%),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.66) 7%, rgba(17,19,21,.2) 15%, rgba(17,19,21,0) 24%);
  }
}
/* 05.11.: neues Startbild (zwei Maenner mit Tablet, Abendsonne; Farbton im Bild selbst ruhiger gemacht) - links
   hinter Schriftzug und Klickflaeche etwas dunkler auslaufend (Wunsch des Nutzers), rechts bleibt das Bild hell */
@media (min-width: 1345px) {
  #top.hero-live .mh-shade {
    background:
      radial-gradient(ellipse 52% 32% at 22% 14%, rgba(17,19,21,.42) 0%, rgba(17,19,21,.2) 55%, rgba(17,19,21,0) 100%),
      linear-gradient(180deg, rgba(17,19,21,.7) 0, rgba(17,19,21,.36) var(--hdr-h, 71px), rgba(17,19,21,.08) calc(var(--hdr-h, 71px) + 170px), rgba(17,19,21,0) calc(var(--hdr-h, 71px) + 250px)),
      linear-gradient(90deg, rgba(17,19,21,.74) 0%, rgba(17,19,21,.58) 20%, rgba(17,19,21,.34) 36%, rgba(17,19,21,.12) 48%, rgba(17,19,21,0) 58%),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.5) 3%, rgba(17,19,21,.14) 8%, rgba(17,19,21,0) 13%);
  }
}
@media (min-width: 761px) and (max-width: 1344.98px) {
  #top.hero-live .mh-photo::after {
    background:
      linear-gradient(180deg, rgba(17,19,21,.7) 0, rgba(17,19,21,.38) var(--hdr-h, 71px), rgba(17,19,21,0) calc(var(--hdr-h, 71px) + 150px)),
      linear-gradient(90deg, rgba(17,19,21,.66) 0%, rgba(17,19,21,.42) 25%, rgba(17,19,21,.12) 45%, rgba(17,19,21,0) 58%),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.5) 3%, rgba(17,19,21,.14) 8%, rgba(17,19,21,0) 13%);
  }
}
@media (max-width: 760px) {
  #top.hero-live .mh-photo::after {
    background:
      linear-gradient(180deg, rgba(17,19,21,.66) 0, rgba(17,19,21,.5) calc(var(--hdr-h, 65px) + 30px), rgba(17,19,21,.2) calc(var(--hdr-h, 65px) + 120px), rgba(17,19,21,0) calc(var(--hdr-h, 65px) + 170px)),
      linear-gradient(90deg, rgba(17,19,21,.5) 0%, rgba(17,19,21,.26) 35%, rgba(17,19,21,0) 62%),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.5) 3%, rgba(17,19,21,.14) 8%, rgba(17,19,21,0) 13%);
  }
  /* mehr vom Bild zeigen (Wunsch des Nutzers "Bild etwas ganzer"): 4:3 statt 5:4 */
  #top.hero-live .mh-photo { aspect-ratio: 4 / 3; min-height: 270px; }
}
/* 05.11.: unten nur noch kurzer Uebergang ins Dunkle, damit Terrasse und Fuesse sichtbar bleiben (siehe oben) */

/* 07.11.: Startbild Handschlag auf der Terrasse (Bild 54). Die Gruppe steht breiter (rechte 40 % des Bildes):
   Klickflaeche erst ab 1345 px auf dem Bild und schmaler, darunter unter dem Bild; Schriftzug bricht frueher um;
   am Handy stehen Schriftzug und Unterzeile unter dem Bild, damit die Gesichter frei bleiben */
@media (min-width: 1345px) {
  #top.hero-live .mh-link { width: min(52%, 820px); }
}
@media (min-width: 761px) and (max-width: 1344.98px) {
  #top.hero-live .mh-head { max-width: 52%; }
  html[dir="rtl"] #top.hero-live .mh-head { justify-self: left; }
  html[dir="rtl"] #top.hero-live .mh-title { text-align: left; }
}
@media (max-width: 760px) {
  #top.hero-live .mh-photo img { object-position: 90% 50%; }
  #top.hero-live .mh-head { grid-row: 2; margin: 24px 20px 20px; max-width: none; }
  #top.hero-live .mh-photo::after {
    background:
      linear-gradient(180deg, rgba(17,19,21,.6) 0, rgba(17,19,21,.3) calc(var(--hdr-h, 65px) + 30px), rgba(17,19,21,0) calc(var(--hdr-h, 65px) + 90px)),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.5) 4%, rgba(17,19,21,0) 14%);
  }
}
/* 09.11.: Handy - die Maenner standen weit rechts, links war das Bild leer (Nutzer). Bild ganz nach rechts geschoben
   (Maenner so mittig wie moeglich), Schriftzug "Control creates trust." dreizeilig in die freie linke Bildhaelfte,
   mit sanfter Abdunklung dahinter; die Unterzeile bleibt unter dem Bild. */
@media (max-width: 760px) {
  #top.hero-live .mh-photo img { object-position: 100% 50%; }
  #top.hero-live .mh-head { position: static; }
  #top.hero-live .mh-slogan { position: absolute; z-index: 2; top: calc(var(--hdr-h, 65px) + 16px); left: 16px; right: auto;
    width: calc(42% - 22px); margin: 0; white-space: normal; text-align: left;
    font-size: clamp(1.1rem, 5.8vw, 1.75rem) !important; line-height: 1.12 !important; letter-spacing: .01em;
    text-shadow: 0 2px 14px rgba(0,0,0,.8); }
  #top.hero-live .mh-title { margin-top: 0; }
  #top.hero-live .mh-photo::after {
    background:
      linear-gradient(180deg, rgba(17,19,21,.6) 0, rgba(17,19,21,.3) calc(var(--hdr-h, 65px) + 30px), rgba(17,19,21,0) calc(var(--hdr-h, 65px) + 90px)),
      linear-gradient(90deg, rgba(17,19,21,.55) 0%, rgba(17,19,21,.32) 26%, rgba(17,19,21,0) 46%),
      linear-gradient(0deg, #111315 0%, rgba(17,19,21,.5) 4%, rgba(17,19,21,0) 14%);
  }
}
/* sehr schmale Handys: keine Mindesthoehe, sonst wird seitlich mehr beschnitten und die Maenner ruecken unter den Schriftzug */
@media (max-width: 359.98px) {
  #top.hero-live .mh-photo { min-height: 0; }
}