/* ============================================================================
   dr-micha.com - Hero-Section, mobile Fassung
   Version 3.0 · 2026-08-06 · Resonance Insights (Christopher Goethel)

   Wird NACH dem Inline-<style>-Block geladen und ueberschreibt dessen
   Hero-Regeln durch spaetere Quellreihenfolge. Der Inline-Block bleibt
   unveraendert - Rollback = diese Datei wieder aushaengen.

   GRUNDLAGE: Seit Rev. 2.0 liefert index.html ueber <picture> unterhalb von
   901 px ein eigenes Hochformat-Bild aus (assets/img/hero-mobile.jpg,
   1200 x 1800). Damit entfaellt der gesamte Rechenapparat der Versionen 1.x,
   der ein Querformat-Foto per left-Formel verankern musste. Ein schlichtes
   object-fit: cover mit object-position: center top genuegt.

   Bildgeometrie hero-mobile.jpg (Anteile der Bildhoehe bzw. -breite):
     Kopfoberkante  24,5 %      Gesicht links   55 %
     Kinn           43,0 %      Gesicht rechts  73 %

   AUFBAU:
     Das Foto fuellt genau eine Bildschirmhoehe und endet dort mit einer
     sauberen Kante. Darunter beginnt bereits die helle Flaeche der folgenden
     Sektion (--panel); der Hinweiskasten steht als dunkle Karte darauf.
     Kein Verlauf - eine frueher noetige weiche Bildkante gibt es nicht mehr,
     weil nichts mehr auf der Kante liegt.

     Rev. 2.1: Vorher war diese Flaeche dunkelblau. Dadurch gab es zwei
     Farbwechsel untereinander - Foto, Dunkel, Hell. Mit der hellen Flaeche
     ist es einer. Zurueck auf dunkel: in .hero-bg background auf #1a2733
     setzen und bei .hero-note die drei Rev.-2.1-Zeilen entfernen.

   Was hero-fix.js beisteuert (jeweils mit CSS-Fallback):
     --chrome-h    Hoehe von Topbar + Header, gemessen        Fallback 160px
     --text-top    Beginn des Textes unter dem Kinn           Fallback 46vh
     --note-push   Schub des Hinweises unter die Bildkante    Fallback 30px
   ============================================================================ */


/* ---------------------------------------------------------------------------
   Gemeinsame Basis fuer alles unter 901 px
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {

  .hero {
    /* sichtbare Resthoehe unter Topbar + Header */
    --vis: calc(100vh - var(--chrome-h, 160px));
    /* Abstand Bildkante -> Hinweiskasten. hero-fix.js liest den Wert aus. */
    --note-luft: 34px;
    /* Abstand unter dem Kasten bis zum Sektionsende.
       NICHT unter 12px setzen: .hero hat overflow:hidden, und die
       Winkelklammer unten rechts ragt 9px + 2px Strichstaerke ueber die
       Kastenkante hinaus. Bei 0 wurde ihr waagerechter Strich abgeschnitten,
       der senkrechte blieb stehen - der Winkel sah aus wie ein einzelner
       Strich. Rev. 2.4 hatte genau diesen Fehler. */
    --note-luft-unten: 12px;

    padding: 0;                        /* section{padding:80px 0} zuruecksetzen */
    padding-top: var(--text-top, 46vh);
    min-height: var(--vis);
    align-items: flex-start;
  }

  /* Unterhalb des Fotos beginnt direkt die Flaeche der naechsten Sektion. */
  .hero-bg { inset: 0; overflow: hidden; background: var(--panel, #f4f8fb); }

  /* Das Foto endet exakt am unteren Rand der ersten Bildschirmhoehe. */
  .hero-bg img {
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: var(--vis);
    max-width: none;                   /* sonst greift globales img{max-width:100%} */
    object-fit: cover;
    object-position: center top;       /* Kopf oben, Berge darueber */
    transform: none;                   /* alter translateY(-30px)-Hack raus */
  }

  /* Der Schleier deckt nur das Foto ab. Seine FORM haengt vom Band ab -
     siehe die beiden Bloecke weiter unten. Hier nur die Geometrie.

     Rev. 3.0, Vorgabe Michael Schulte: das Foto soll oben in voller Farbe
     stehen. Rev. 2.x legte einen gleichmaessigen Schleier ueber die gesamte
     Flaeche, dadurch wirkten Berge und Gesicht grau. */
  .hero::after {
    top: 0; left: 0; right: 0; bottom: auto;
    height: var(--vis);
  }

  .hero-inner { max-width: 100%; padding: 0 0 var(--note-luft-unten, 20px); }

  /* wuerde mit den Buttons kollidieren */
  .scrollcue { display: none; }

  /* Rev. 2.3 - Vorgabe Michael Schulte: der Kasten soll beim Scrollen nicht
     aufhalten, kleiner werden und "nicht so all to black" wirken.

     Drei Schritte:
     1. Kompakter - Polsterung, Zeilenabstand und Schriftgrad reduziert.
        Hoehe bei 390px: 176 -> 139 px.
     2. Hell statt dunkel. Die Flaeche ringsum ist seit Rev. 2.1 hell; eine
        schwarze Platte darauf war der schwerste Ton der ganzen Seite.
     3. Winkelklammern in Blau, uebernommen von .split .imgcard::before
        (2px, var(--blue), Deckkraft .5). Damit spricht der Kasten dieselbe
        Formensprache wie die Bildkarten weiter unten.

     Zurueck auf dunkel: den Farbblock unten durch background:var(--ink) und
     border:0 ersetzen, dann greifen wieder die hellen Schriftfarben der
     Startseite. Auf dem Desktop ist ohnehin nichts davon aktiv. */
  .hero-note {
    position: relative;
    margin-top: var(--note-push, 30px);
    /* Die 560px der Startseite gelten dort, weil rechts daneben die Person
       steht. Unter dem Foto steht nichts - der Kasten laeuft ueber die volle
       Spalte. Bei 768px blieben mit dem Deckel 180px tote Flaeche. */
    max-width: none;
    padding: 14px 16px;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--line, #e6ebf0);
    box-shadow: 0 2px 16px rgba(31, 55, 77, .10);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero-note .lbl { font-size: .58rem; letter-spacing: .2em; color: var(--blue-deep, #27557e); }
  .hero-note .row { font-size: .84rem; line-height: 1.42; color: var(--muted, #5f6e7b); }
  .hero-note b    { color: var(--ink, #1a2733); }
  .hero-note a    { color: var(--blue-deep, #27557e); border-bottom-color: rgba(63,124,176,.45); }
  .hero-note .row::before      { width: 5px; height: 5px; background: rgba(63,124,176,.45); }
  .hero-note .row.free::before { background: var(--blue, #3f7cb0); }

  /* Winkelklammern wie bei den Bildkarten */
  .hero-note::before, .hero-note::after {
    content: ""; position: absolute; width: 58px; height: 58px;
    opacity: .5; pointer-events: none;
  }
  .hero-note::before { left: -9px;  top: -9px;
    border-left: 2px solid var(--blue, #3f7cb0); border-top: 2px solid var(--blue, #3f7cb0); }
  .hero-note::after  { right: -9px; bottom: -9px;
    border-right: 2px solid var(--blue, #3f7cb0); border-bottom: 2px solid var(--blue, #3f7cb0); }

  /* Rev. 2.4: Die Luecke unter dem Kasten stammte zu grossen Teilen gar nicht
     von uns - section{padding:90px 0} gilt auf der ganzen Seite, auch mobil.
     Zusammen mit unserem eigenen Abstand waren es 118px.

     Reduziert wird deshalb gezielt NUR die Sektion direkt nach dem Hero. Der
     Hero endet dort mit einer Karte, nicht mit Fliesstext - er braucht die
     volle Zeile Abstand nicht. Alle anderen Sektionsuebergaenge bleiben
     unberuehrt, die Seitenrhythmik aendert sich also nicht.
     Zusammen mit den 12px oberhalb ergibt das eine Luecke von 68px zwischen
     Kastenunterkante und der naechsten Ueberschrift - vorher waren es 118px. */
  .hero + section { padding-top: 32px; }

}

/* svh = small viewport height: kein Hoehensprung beim Ein- und Ausblenden
   der mobilen Browserleiste. Der vh-Wert oben bleibt als Fallback. */
@supports (height: 100svh) {
  @media (max-width: 900px) {
    .hero { --vis: calc(100svh - var(--chrome-h, 160px)); }
  }
}


/* ---------------------------------------------------------------------------
   Band A - Telefone bis 519 px
   Die Person steht mittig im Bild, der Text beginnt unter dem Kinn und laeuft
   ueber die volle Breite. Er liegt damit nur auf Hemd und Wiese.
   --------------------------------------------------------------------------- */
@media (max-width: 519px) {
  /* Senkrechter Verlauf statt Diagonale: oben voellig transparent, die
     Abdunklung setzt kurz oberhalb der ersten Textzeile ein.

     Der Startpunkt ist an --text-top gebunden - denselben Wert, den
     hero-fix.js ohnehin fuer den Textbeginn misst. Damit folgt der Verlauf
     automatisch dem Text, statt auf einer festen Hoehe zu sitzen, die je
     nach Geraet mal zu hoch und mal zu tief laege. */
  .hero::after {
    background: linear-gradient(to bottom,
      rgba(20,38,54,0)    0,
      rgba(20,38,54,0)    calc(var(--text-top, 46vh) - 95px),
      rgba(20,38,54,.26)  calc(var(--text-top, 46vh) - 25px),
      rgba(20,38,54,.50)  calc(var(--text-top, 46vh) + 120px),
      rgba(20,38,54,.58)  100%);
  }

  .hero .eyebrow { font-size: .65rem; margin-bottom: 8px; }
  .hero h1       { font-size: clamp(1.45rem, 6.4vw, 1.95rem); margin-bottom: 8px; }
  .hero p        { font-size: .9rem; line-height: 1.4; margin-bottom: 4px; }
  .hero .accent  { display: none; }
  .hero-cta      { gap: 8px; }
  .hero-cta .btn { padding: 12px 20px; font-size: .78rem; }
}


/* ---------------------------------------------------------------------------
   Kurze Telefone - schmal UND niedrig, z.B. iPhone SE 375 x 667
   Dort bleibt zwischen Kinn und Falz zu wenig Platz fuer Text plus zwei
   Schaltflaechen. Ohne diese Stufe rutscht die zweite Schaltflaeche um rund
   15 px unter die Kante. Gemessen, nicht geschaetzt.
   --------------------------------------------------------------------------- */
@media (max-width: 519px) and (max-height: 700px) {
  .hero .eyebrow { margin-bottom: 6px; }
  .hero h1       { font-size: clamp(1.35rem, 6vw, 1.8rem); margin-bottom: 6px; }
  .hero p        { font-size: .85rem; line-height: 1.34; margin-bottom: 2px; }
  .hero-cta      { gap: 6px; }
  .hero-cta .btn { padding: 10px 18px; font-size: .75rem; }
}


/* ---------------------------------------------------------------------------
   Band B - grosse Telefone und Tablets, 520 bis 900 px
   Hier ist genug Breite, damit der Text NEBEN der Person stehen kann. Er
   beginnt deshalb weiter oben; hero-fix.js setzt --text-top auf einen festen
   kleinen Wert statt auf die Kinnhoehe. 46 % Freiraum rechts halten die
   Zeilen vom Gesicht fern (Gesicht beginnt bei 55 % der Bildbreite).
   --------------------------------------------------------------------------- */
@media (min-width: 520px) and (max-width: 900px) {
  /* Der Freiraum rechts gilt NUR fuer den Text, der neben der Person steht.
     Der Hinweiskasten liegt unter dem Foto, wo nichts im Weg ist.
     Rev. 2.0 hatte den Freiraum auf .hero-inner gesetzt; der Kasten war
     dadurch bei 540px nur 47 % breit und wirkte gestaucht. */
  /* Hier steht der Text NEBEN der Person. Ein senkrechter Verlauf wuerde das
     ganze Bild abdunkeln - deshalb bleibt in diesem Band die Diagonale der
     Startseite: sie dunkelt links ab, wo der Text steht, und laesst die
     Person rechts in voller Farbe. Die Behandlung folgt dem Layout. */
  .hero::after {
    background: linear-gradient(100deg,
      rgba(20,38,54,.40) 0%, rgba(26,46,64,.40) 45%, rgba(26,46,64,.10) 100%);
  }

  .hero-inner    { padding-right: 0; }
  .hero .eyebrow, .hero h1, .hero p, .hero .accent, .hero-cta { max-width: 54%; }
  .hero h1       { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 10px; }
  .hero p        { font-size: .95rem; line-height: 1.45; margin-bottom: 6px; }
  .hero .accent  { font-size: 1rem; margin: 8px 0 14px; }
  .hero-cta      { gap: 9px; }
  .hero-cta .btn { padding: 13px 22px; font-size: .8rem; }
}


/* ---------------------------------------------------------------------------
   Klapp-Abschnitt "Dr. Micha live" - NUR MOBIL
   Vorgabe Michael Schulte: der Abschnitt soll beim Durchscrollen nicht
   aufhalten. Sichtbar bleibt bis "...als Speaker dabei.", der Rest kommt
   hinter "Mehr lesen". Das Foto und der Ticket-Button bleiben immer sichtbar.

   Die Struktur baut hero-fix.js einmalig auf - auf JEDER Breite. Ob geklappt
   wird, entscheidet allein dieses CSS. Dadurch muss beim Vergroessern des
   Fensters nichts umgebaut werden, und es kann kein Zustand entstehen, in dem
   Text unerreichbar ist.

   Standard (Desktop): Schalter aus, Inhalt offen.
   --------------------------------------------------------------------------- */
.mehr-wrap       { display: grid; grid-template-rows: 1fr; }
.mehr-wrap > div { overflow: hidden; }
.mehr-btn        { display: none; }

@media (max-width: 900px) {
  .mehr-wrap        { grid-template-rows: 0fr; transition: grid-template-rows .38s ease; }
  .mehr-wrap.offen  { grid-template-rows: 1fr; }
  .mehr-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 0; padding: 6px 0; margin: 2px 0 0;
    cursor: pointer; font-family: inherit; font-size: .82rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--blue-deep, #27557e);
  }
  .mehr-btn:hover { color: var(--blue, #3f7cb0); }
  .mehr-btn .pfeil { font-size: 1.05em; line-height: 1; transition: transform .3s; }
  .mehr-btn[aria-expanded="true"] .pfeil { transform: rotate(180deg); }
}

/* Wer Bewegung reduziert haben moechte, bekommt den Wechsel ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .mehr-wrap { transition: none; }
}