/* Stakeholder landing page.
   Font sizes follow the project checklist: body text never below 16px,
   fine print never below 14px. */

.landing {
   /* Gleiche Farben wie styles/welcome/layout.css, damit Startseite und
      Welcome-/Guide-Seite denselben Eindruck machen: #2a3647 dunkel und
      auf allen Knoepfen, #177da8 nur noch fuer die Schritt-Nummern,
      #29abe2 Akzent/Hover, #f6f7f8 heller Grund. */
   --landing-navy: #2a3647;
   --landing-blue: #177da8;
   --landing-cyan: #29abe2;
   --landing-ink: #2a3647;
   --landing-muted: #5a6473;
   --landing-surface: #f6f7f8;
   /* Ein Knopf fuer die Breite der Inhaltsspalte. Header, Hero, alle Sektionen
      und der Gutter des Showcase (landing-showcase.css) lesen ihn, damit die
      linke Kante ueberall dieselbe bleibt. Auf sehr breiten Schirmen waechst er
      mit - bei 1100px belegt der Inhalt auf 4K nur 30% der Flaeche. */
   --landing-max: 1100px;

   display: block;
   min-height: 100vh;
   font-size: 16px;
   color: var(--landing-ink);
   background: #ffffff;
}

.landing__skip {
   position: absolute;
   left: -9999px;
   top: 0;
   padding: 12px 20px;
   font-size: 16px;
   background: var(--landing-navy);
   color: #ffffff;
   z-index: 10;
}

.landing__skip:focus {
   left: 16px;
   top: 16px;
}

/* Header */

.landing__header {
   max-width: var(--landing-max);
   margin: 0 auto;
   /* min() statt fester Werte in diesem ganzen Abschnitt: auf hohen Fenstern
      bleibt exakt der bisherige Wert stehen, auf flachen schrumpft er mit der
      Fensterhoehe. Das ist noetig, damit der Hero zusammen mit dem Guckloch auf
      den dunklen Abschnitt (siehe scripts/landing/hero-fit.js) auf einen
      Bildschirm passt. */
   padding: min(28px, 2.4vh) 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}

.landing__logo {
   width: 48px;
   height: auto;
}

/* Dieselbe Zeile wie auf der Welcome-Seite: Frage, Sign-up-Knopf, dann der
   bisherige Log-in-Link. */
.landing__nav {
   display: flex;
   align-items: center;
   gap: 16px;
}

.landing__signup-question {
   font-size: 16px;
   color: var(--landing-ink);
}

.landing__nav-link {
   font-size: 16px;
   font-weight: 600;
   padding: 10px 22px;
   border-radius: 8px;
   color: var(--landing-navy);
   border: 1px solid var(--landing-navy);
   text-decoration: none;
}

.landing__nav-link:hover,
.landing__nav-link:focus-visible {
   color: #ffffff;
   background: var(--landing-navy);
}

.landing__nav-link--primary {
   color: #ffffff;
   background: var(--landing-navy);
}

.landing__nav-link--primary:hover,
.landing__nav-link--primary:focus-visible {
   color: #ffffff;
   background: var(--landing-cyan);
   border-color: var(--landing-cyan);
}

/* Hero */

.landing__hero {
   max-width: var(--landing-max);
   margin: 0 auto;
   /* min-height statt height, weil der Hero-Inhalt selbst 428-690px hoch ist:
      eine feste Hoehe wuerde ihn auf niedrigen Schirmen abschneiden (bei
      360x640 waeren es ueber 300px weg). Achtung beim Justieren: das Projekt
      hat keinen border-box-Reset, der Wert gilt also fuer die Inhaltsbox -
      die eigenen 64px Innenabstand kommen oben drauf, aus 64vh werden 64vh
      + 64px Gesamthoehe (640px bei 900px Fensterhoehe). Kein box-sizing,
      weil das ueber die max-width die linke Kante gegenueber den anderen
      Sektionen verschieben wuerde. */
   /* min() statt purem 64vh: der Hero-Inhalt ist rund 480px hoch, auf einem
      2160px hohen 4K-Schirm waeren 64vh 1382px - also ueber 900px leere
      weisse Flaeche unter dem Text. */
   min-height: min(64vh, 620px);
   padding: min(24px, 2.6vh) 24px min(40px, 3vh);
}

/* Setzt scripts/landing/hero-fit.js: der Hero bekommt per Inline-Stil genau die
   Hoehe, die den dunklen Abschnitt mit seiner Zeile "WHAT IS INSIDE" an den
   unteren Bildschirmrand schiebt. Weil die Hoehe dann vom Bildschirm kommt und
   nicht vom Text, wird der Inhalt senkrecht mittig gestellt - sonst haengt er
   auf hohen Schirmen oben und darunter steht eine grosse leere Flaeche. */
.landing__hero--fill {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.landing__eyebrow {
   font-size: 16px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--landing-cyan);
   margin-bottom: min(16px, 1.8vh);
}

.landing__title {
   font-size: min(61px, 6.6vh);
   font-weight: 700;
   line-height: 1.1;
   color: var(--landing-navy);
   margin-bottom: min(24px, 2.8vh);
}

.landing__lead {
   /* 16px ist die Untergrenze aus der Projekt-Checkliste fuer Fliesstext. */
   font-size: min(20px, max(16px, 2.4vh));
   line-height: 1.5;
   max-width: 62ch;
   color: var(--landing-muted);
   margin-bottom: min(36px, 4vh);
}

.landing__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: min(20px, 2.2vh);
}

/* Form und Hover-Verhalten der Welcome-Knoepfe (.login__button in
   styles/login/buttons.css): 8px Radius, blau, beim Ueberfahren cyan. */
.landing__button {
   font-size: 18px;
   font-weight: 700;
   padding: min(16px, 1.8vh) 30px;
   border-radius: 8px;
   display: inline-block;
   text-decoration: none;
   transition: all 100ms ease-in-out;
}

.landing__button--primary {
   color: #ffffff;
   background: var(--landing-navy);
}

.landing__button--primary:hover,
.landing__button--primary:focus-visible {
   background: var(--landing-cyan);
   filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.landing__button--ghost {
   color: var(--landing-navy);
   background: #ffffff;
   border: 1px solid var(--landing-navy);
}

.landing__button--ghost:hover,
.landing__button--ghost:focus-visible {
   color: var(--landing-cyan);
   border-color: var(--landing-cyan);
}

/* Einziger Hero-CTA: Text + gespiegelter arrowBack.svg als Vorwaerts-Pfeil.
   Die feste SVG-Fuellfarbe (#29ABE2) wuerde beim Hover (Button wird cyan)
   im Pfeil verschwinden, daher per Filter auf Weiss gezwungen. */
.landing__button--cta {
   display: inline-flex;
   align-items: center;
   gap: 10px;
}

.landing__button-icon {
   width: 18px;
   height: 18px;
   transform: scaleX(-1);
   filter: brightness(0) invert(1);
}

.landing__address {
   font-size: 16px;
   color: var(--landing-muted);
}

.landing__address a,
.landing__note-link,
.landing__try-address {
   color: var(--landing-cyan);
   font-weight: 600;
   text-decoration: underline;
}

/* Sections */

.landing__section {
   max-width: var(--landing-max);
   margin: 0 auto;
   padding: 56px 24px;
}

.landing__section--notes {
   max-width: none;
   background: var(--landing-surface);
   padding-left: 0;
   padding-right: 0;
}

.landing__section--notes > * {
   max-width: var(--landing-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: 24px;
   padding-right: 24px;
}

.landing__section-title {
   font-size: 32px;
   font-weight: 700;
   color: var(--landing-navy);
   margin-bottom: 32px;
}

/* Steps */

/* padding: 0 - eine <ul> hat 40px Browser-Einzug; ohne Aufzaehlungspunkte
   verschiebt der die Karten nur gegen die Ueberschrift. min(260px, 100%)
   statt 260px, weil eine feste Untergrenze auf 320px-Schirmen breiter ist
   als der Platz und die Seite seitwaerts scrollen laesst. */
.landing__steps {
   list-style: none;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
   gap: 28px;
}

.landing__step {
   /* Projekt hat keinen border-box-Reset: ohne das kaemen 28px Innenabstand
      und 1px Rahmen auf die volle Spaltenbreite obendrauf. */
   box-sizing: border-box;
   padding: 28px;
   border-radius: 16px;
   border: 1px solid #e2e4e7;
}

.landing__step-number {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   margin-bottom: 16px;
   border-radius: 50%;
   font-size: 18px;
   font-weight: 700;
   color: #ffffff;
   background: var(--landing-blue);
}

.landing__step-title {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 10px;
   color: var(--landing-navy);
}

.landing__step-text {
   font-size: 16px;
   line-height: 1.5;
   color: var(--landing-muted);
}

/* Der zweite Einstieg direkt unter den drei Schritten - wer die Erklaerung
   gelesen hat, soll nicht zurueck nach oben scrollen muessen. */
.landing__steps-cta {
   margin-top: 36px;
}

/* Notes */

.landing__notes {
   /* Kein padding-Reset wie bei .landing__steps: den Browser-Einzug ueberschreibt
      hier schon .landing__section--notes > * mit den 24px Seitenabstand - ein
      eigenes padding: 0 wuerde die Liste an den Bildschirmrand ziehen. */
   list-style: none;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
   gap: 28px;
}

.landing__note-title {
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 10px;
   color: var(--landing-navy);
}

.landing__note-text {
   font-size: 16px;
   line-height: 1.5;
   color: var(--landing-muted);
}

/* Try it */

.landing__try-text {
   font-size: 18px;
   line-height: 1.6;
   max-width: 70ch;
   margin-bottom: 28px;
   color: var(--landing-muted);
}

.landing__example {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
   gap: 28px;
   margin-bottom: 32px;
   align-items: start;
}

.landing__mail {
   box-sizing: border-box;
   padding: 24px;
   border-radius: 16px;
   border: 1px solid #e2e4e7;
   background: var(--landing-surface);
}

.landing__mail-head {
   font-size: 16px;
   line-height: 1.6;
   color: var(--landing-ink);
   border-bottom: 1px solid #e2e4e7;
   padding-bottom: 8px;
   margin-bottom: 8px;
}

.landing__mail-field {
   display: inline-block;
   min-width: 72px;
   font-weight: 600;
   color: var(--landing-muted);
}

.landing__mail-body {
   font-size: 16px;
   line-height: 1.6;
   margin-top: 16px;
   color: var(--landing-ink);
}

.landing__result {
   box-sizing: border-box;
   padding: 24px;
   border-radius: 16px;
   border: 1px solid #e2e4e7;
}

.landing__result-title {
   font-size: 18px;
   font-weight: 700;
   color: var(--landing-navy);
   margin-bottom: 18px;
}

.landing__fields {
   display: grid;
   gap: 14px;
}

.landing__field-name {
   font-size: 16px;
   font-weight: 700;
   color: var(--landing-navy);
}

.landing__field-value {
   font-size: 16px;
   line-height: 1.5;
   color: var(--landing-muted);
   padding-left: 14px;
   border-left: 3px solid var(--landing-cyan);
}

/* Footer */

.landing__footer {
   border-top: 1px solid #e2e4e7;
   padding: 32px 24px 48px;
   text-align: center;
}

.landing__footer-link {
   font-size: 16px;
   color: var(--landing-muted);
   margin: 0 14px;
   text-decoration: underline;
}

.landing__footer-link:hover,
.landing__footer-link:focus-visible {
   color: var(--landing-cyan);
}

.landing__fineprint {
   font-size: 14px;
   line-height: 1.5;
   color: var(--landing-muted);
   margin-top: 18px;
}

/* Responsive */

@media (max-width: 820px) {
   /* Auf schmalen Schirmen bleibt in der Kopfzeile nur Logo + die beiden
      Knoepfe; die Frage davor wuerde die Zeile umbrechen lassen. */
   .landing__signup-question {
      display: none;
   }

   .landing__nav {
      gap: 12px;
   }

   .landing__nav-link {
      padding: 10px 16px;
   }

   /* Auf schmalen Schirmen bricht die Ueberschrift auf vier bis fuenf Zeilen
      um, deshalb reagiert sie hier staerker auf die Fensterhoehe als oben. */
   .landing__title {
      font-size: min(40px, 4.6vh);
      margin-bottom: min(24px, 2.2vh);
   }

   .landing__eyebrow {
      margin-bottom: min(16px, 1.4vh);
   }

   .landing__button {
      font-size: min(18px, max(16px, 2.6vh));
   }

   /* Der Hinweis unter dem Knopf ist Kleingedrucktes, die Untergrenze dafuer
      sind 14px. */
   .landing__address {
      font-size: min(16px, max(14px, 2.2vh));
   }

   .landing__lead {
      font-size: min(18px, max(16px, 2.6vh));
      margin-bottom: min(36px, 3vh);
   }

   .landing__actions {
      margin-bottom: min(20px, 1.6vh);
   }

   /* Der zweite Satz des Vorspanns faellt auf schmalen Schirmen weg: er kostet
      dort vier Zeilen, und genau die fehlen, damit der Einstieg zusammen mit
      dem Guckloch auf den dunklen Abschnitt auf einen Bildschirm passt. Der
      Inhalt steht unverkuerzt im Abschnitt "How it works" und in der
      Seitenbeschreibung. */
   .landing__lead-more {
      display: none;
   }

   .landing__section-title {
      font-size: 26px;
   }

   .landing__button {
      width: 100%;
      text-align: center;
   }
}

/* Grosse Schirme (WQHD-Ultrawide, 4K).
   Bis 1600px bleibt alles wie bisher. Darueber waechst die Inhaltsspalte mit,
   weil eine feste 1100px-Spalte auf 3440px oder 3840px Breite nur noch ein
   Drittel bzw. ein Drittel der Flaeche belegt und der Text verloren wirkt.
   Die Schrift waechst in denselben Stufen mit - sonst steht eine 61px-Zeile
   allein auf einer 1560px breiten Spalte. */
@media (min-width: 1600px) {
   .landing {
      --landing-max: 1320px;
   }

   /* Auch hier mit vh gedeckelt, sonst bleibt die Ueberschrift auf einem
      flachen Fenster (z.B. 1920x500) bei 72px und der Einstieg passt nicht
      mehr zusammen mit dem Guckloch auf einen Bildschirm. */
   .landing__title {
      font-size: min(72px, 7vh);
   }

   .landing__lead {
      font-size: min(22px, max(16px, 2.4vh));
   }

   .landing__section-title {
      font-size: 38px;
   }

   .landing__step-title,
   .landing__try-text {
      font-size: 21px;
   }
}

@media (min-width: 2400px) {
   .landing {
      --landing-max: 1560px;
   }

   .landing__title {
      font-size: min(84px, 8vh);
   }

   .landing__lead {
      font-size: min(24px, max(16px, 2.6vh));
   }

   .landing__section-title {
      font-size: 44px;
   }

   .landing__step-text,
   .landing__note-text,
   .landing__mail-body,
   .landing__field-value {
      font-size: 18px;
   }
}

/* Flache Handy-Schirme. Hier reicht der Platz sonst nicht fuer Einstieg plus
   das Guckloch auf den dunklen Abschnitt. Die Zeile ueber der Ueberschrift ist
   die einzige rein schmueckende Zeile im Einstieg, deshalb faellt sie hier. */
@media (max-width: 820px) and (max-height: 700px) {
   .landing__eyebrow {
      display: none;
   }
}

/* Handy quer und aehnlich flache Fenster - auch am Desktop, wenn jemand das
   Fenster flach zieht. Hier bleibt nach Ueberschrift, Knopf und Hinweiszeile
   kein Platz mehr fuer den Vorspann, wenn der dunkle Abschnitt unten noch
   angeschnitten sichtbar sein soll. Der Vorspann faellt deshalb weg - er steht
   wortgleich in der Seitenbeschreibung und ausfuehrlich im Abschnitt
   "How it works". */
@media (max-height: 520px) {
   .landing__lead {
      display: none;
   }
}

/* Sehr breite und dabei flache Fenster (Ultrawide, halbhoch aufgezogen).
   Die Ueberschrift ist dort schon gross, der Vorspann steht in einer eigenen
   Spalte darunter - zusammen passen sie nicht mehr ueber das Guckloch.
   Gleiche Begruendung wie bei der flachen Regel oben. */
@media (min-width: 2400px) and (max-height: 700px) {
   .landing__lead {
      display: none;
   }
}