/* ===========================================================================
   MeisterOrga - Vorschauseite
   ===========================================================================
   Ergaenzt public.css um die wenigen Bausteine, die es nur auf der
   Vorschauseite gibt: den Starthinweis im Hero, das Abzeichen in der
   Kopfzeile, den Abschnitt "Bald verfuegbar" und die Zielgruppenliste.

   Alle Farben kommen aus den Merkmalen von login.css und werden von
   hell.css fuer den hellen Modus neu gesetzt. Hier steht deshalb kein
   fester Farbwert, der nur zu einem der beiden Designs passen wuerde.
   ------------------------------------------------------------------------ */

/* --- 1. Starthinweis im Hero --------------------------------------------- */

/* Der wichtigste Satz der Seite: MeisterOrga kommt bald. Er steht als
   ruhiger Kasten zwischen Beschreibung und Schaltflaechen - auffaellig
   durch Rahmen und Lichtpunkt, nicht durch Signalfarbe. */
.mo-status {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  max-width: 34rem;
  margin: 0 0 1.9rem;
  padding: .95rem 1.15rem;
  text-align: left;
  background:
    linear-gradient(180deg, var(--au-glass-strong) 0%, var(--au-glass) 100%);
  border: 1px solid rgba(var(--pub-accent-rgb), .30);
  border-left: 3px solid var(--au-accent-soft);
  border-radius: var(--au-radius-sm);
  box-shadow: 0 10px 26px -18px var(--au-shadow-card);
}

/* Der Lichtpunkt sitzt auf der Grundlinie der ersten Zeile. */
.mo-status__punkt {
  position: relative;
  flex: none;
  width: .62rem;
  height: .62rem;
  margin-top: .42rem;
  border-radius: 50%;
  background: var(--au-accent-2);
}
/* Der Ring darum laeuft langsam auf und verblasst - ein Lebenszeichen,
   kein Blinken. */
.mo-status__punkt::after {
  content: "";
  position: absolute;
  inset: -.28rem;
  border-radius: 50%;
  border: 1px solid var(--au-accent-2);
  opacity: 0;
  animation: mo-puls 2.8s ease-out infinite;
}
@keyframes mo-puls {
  0%   { transform: scale(.55); opacity: .75; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.mo-status__text { display: block; }
.mo-status strong {
  display: block;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--au-ink);
}
.mo-status span.mo-status__zusatz {
  display: block;
  margin-top: .3rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--au-ink-soft);
}

/* --- 2. Abzeichen in der Kopfzeile --------------------------------------- */

/* Steht dort, wo auf der spaeteren Webseite die Anmeldung sitzt. Es ist
   bewusst keine Schaltflaeche: Es gibt nichts anzuklicken. */
.mo-bald-zeichen {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .85rem;
  font-size: .8rem;
  font-weight: 650;
  white-space: nowrap;
  color: var(--au-accent-soft);
  background: rgba(var(--pub-accent-rgb), .10);
  border: 1px solid rgba(var(--pub-accent-rgb), .30);
  border-radius: 999px;
}
.mo-bald-zeichen::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--au-accent-2);
}

/* --- 3. Abschnitt "Bald verfuegbar" -------------------------------------- */

/* Eine Karte im Stil der uebrigen Flaechen, mit der Figur daneben. */
.mo-bald {
  display: grid;
  gap: 1.6rem;
  align-items: center;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
  background:
    linear-gradient(180deg, var(--au-glass-strong) 0%, var(--au-veil) 100%);
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius);
  box-shadow: 0 24px 50px -32px var(--au-shadow-card);
}
.mo-bald__figur {
  justify-self: center;
  width: clamp(130px, 34vw, 190px);
}
.mo-bald__figur img {
  display: block;
  width: 100%;
  height: auto;
  /* Derselbe weiche Schein wie unter der Figur im Hero - ohne ihn steht
     die freigestellte Grafik wie ausgeschnitten auf dem Grund. */
  filter: drop-shadow(0 14px 30px rgba(var(--pub-accent-rgb), .28));
}
.mo-bald__text > :first-child { margin-top: 0; }
.mo-bald__text > :last-child  { margin-bottom: 0; }
.mo-bald__text p {
  margin: 0 0 .9rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--au-ink-soft);
}
.mo-bald__text p strong { color: var(--au-ink); }

/* Ab Tablettbreite steht die Figur rechts neben dem Text. */
@media (min-width: 720px) {
  .mo-bald {
    grid-template-columns: minmax(0, 1fr) clamp(150px, 22vw, 210px);
    gap: clamp(1.8rem, 4vw, 3rem);
    text-align: left;
  }
  .mo-bald__figur { justify-self: end; width: 100%; }
}

/* --- 4. Fuer wen ist MeisterOrga gedacht --------------------------------- */

/* 250 statt 210 Pixel Mindestbreite: Bei vier Spalten auf dem Breitbild
   brach jeder Satz auf sechs kurze Zeilen um. Drei Spalten lesen sich
   ruhiger, und die Karten bleiben gleich hoch. */
.mo-wen {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.mo-wen li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem 1rem;
  background: var(--au-chip-bg);
  border: 1px solid var(--au-line-soft);
  border-radius: var(--au-radius-sm);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--au-ink-soft);
}
.mo-wen li strong {
  display: block;
  margin-bottom: .1rem;
  font-weight: 650;
  color: var(--au-ink);
}
.mo-wen svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: .18rem;
  color: var(--au-accent-soft);
}

/* --- 5. Modulkarten ohne Verweis ----------------------------------------- */

/* Die Karten der Startseite sind sonst Verweise auf die Funktionsseiten.
   Die gibt es auf der Vorschauseite noch nicht - die Karte bleibt deshalb
   eine reine Textkarte und bewegt sich beim Ueberfahren nicht. */
/* Der Haken steht an der ersten Zeile, nicht in der Mitte des Absatzes:
   Bei zweizeiligen Hinweisen saesse er sonst zwischen den Zeilen. */
.mo-modul__hinweis {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin-top: .9rem;
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--au-ink-muted);
}
.mo-modul__hinweis svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: .15rem;
}

/* --- 6. Kleinigkeiten ---------------------------------------------------- */

/* Die Fusszeile hat auf der Vorschauseite eine Spalte weniger als spaeter
   (der Zugang fehlt). Ohne diese Angabe stuenden die drei uebrigen Spalten
   auf dem Breitbild auseinandergezogen. */
.mo-foot__cols { max-width: 620px; }

/* Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, sieht den
   Lichtpunkt ruhig stehen. */
@media (prefers-reduced-motion: reduce) {
  .mo-status__punkt::after { animation: none; }
}

/* --- 7. Sanftes Scrollen zu den Sprungzielen ----------------------------- */

/* Die Vorschauseite ist eine einzige Seite: Jeder Punkt der Navigation ist
   eine Sprungmarke. Ohne diese Angabe springt der Browser hart, und es ist
   nicht zu erkennen, wohin. Nur fuer Besucher ohne "Bewegung reduzieren" -
   wer sie gesetzt hat, bekommt weiterhin den harten Sprung. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- 8. Bedienung auf dem Telefon ---------------------------------------- */

/* Unterhalb von 861 Pixel klappt die Navigation zum Menue zusammen. Von
   hier an gilt: mit dem Daumen bedienbar, nicht mit der Mausspitze. */
@media (max-width: 860px) {
  /* Die Verweise der Fusszeile waren 21 Pixel hoch. Der Innenabstand
     vergroessert die Flaeche, ohne den Abstand der Zeilen zu veraendern. */
  .pub-foot__cols a {
    padding-block: .32rem;
    margin-bottom: .2rem;
  }
  .pub-foot__kontakt a {
    display: inline-block;
    padding-block: .32rem;
  }

  /* Zwei Beschriftungen lagen unter 12 Pixel und waren auf dem Telefon
     muehsam zu lesen. */
  .pub-foot__cols h3 { font-size: .8rem; }
  .pub-eyebrow       { font-size: .78rem; }

  /* Die Zeichen der sozialen Netzwerke waren 40 Pixel gross. */
  .pub-social__link { width: 44px; height: 44px; }
}