/* =========================================================================
   anreiszer.css — Der Platzhalter des geschuetzten Bereichs auf der Startseite
   -------------------------------------------------------------------------
   ENTSTANDEN AM 26.08. AUS EINEM BEFUND VON REY: „Ja dann bringt der Passwort
   Schutz aber de facto gar nichts." Bis dahin lagen Werdegang und Privates
   MITTEN in der Startseite, verdeckt von einem unscharfen Schleier — ein
   Sichtschutz, der den Inhalt trotzdem vollstaendig ausgeliefert hat.

   EIN SERVER SPERRT ADRESSEN, KEINE ABSCHNITTE. Deshalb ist aus dem Abschnitt
   eine eigene Seite geworden (ueber-mich.html), und hier steht, was an seiner
   Stelle bleibt: ein kurzer Hinweis und ein Weg dorthin.

   DER TEXT IST FOERMLICH UND IN DER SIE-FORM — Reys Vorgabe. Wer hier landet,
   ist in aller Regel ein Unternehmen, das eine Bewerbung geoeffnet hat.

   DAS RASTER: Der Bereich bringt sein eigenes mit, wie es der Werdegang an
   dieser Stelle tat. Auf der Startseite ist das globale abgeschaltet
   (base.css, .startseite), weil es „die halbe Seite" misst und zwischen zwei
   Filmen mitten im Nichts endete. Dieselbe Blende, dasselbe Argument.
   ========================================================================= */

.anreiszer {
  position: relative;
  isolation: isolate;
  padding-block: var(--raum-10);
}

.anreiszer__grund {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--muster-raster);
  -webkit-mask-image: var(--werdegang-blende);
  mask-image: var(--werdegang-blende);
  pointer-events: none;
}

/* Die Karte traegt die Werte des Formstandards, ohne sie zu wiederholen:
   dieselbe Flaeche und derselbe Wurf wie das Kontaktformular. */
.anreiszer__karte {
  /* BREITE NUTZEN SCHLAEGT SCROLLEN — Reys Regel vom 18.08. Die erste Fassung
     hatte die Karte auf --breite-text gedeckelt; bei 1920 stand sie damit auf
     einem knappen Drittel des Platzes, der Rest war leer. Der Deckel gehoert
     an den TEXT (dort ist er eine Lesbarkeitsgrenze), nicht an die Karte. */
  max-inline-size: 74rem;
  padding: var(--raum-8);
  border-radius: var(--radius-l);
  background: var(--karte-verlauf);
  box-shadow: var(--karte-schatten);
}

/* Ab 64rem stehen Text und Weg NEBENEINANDER. Das fuellt die Breite und
   verkuerzt zugleich die Zeile — beides in einem Zug, statt eine breite Karte
   mit einer schmalen Textsaeule darin. Darunter untereinander. */
.anreiszer__karte {
  display: grid;
  gap: var(--raum-6);
  align-items: center;
}

@media (min-width: 64rem) {
  .anreiszer__karte { grid-template-columns: minmax(0, 1fr) auto; }
  .anreiszer__weg { margin-block-start: 0; }
}

.anreiszer__wort { max-inline-size: var(--breite-text); }

.anreiszer__titel {
  margin-block-start: var(--raum-3);
  color: var(--hero-titel);
  font-size: var(--schrift-seitentitel);
  font-weight: var(--gewicht-schwer);
  line-height: var(--zeile-eng);
  letter-spacing: var(--sperrung-eng);
}

.anreiszer__text {
  margin-block-start: var(--raum-4);
  color: var(--text-leise);
  font-size: var(--schrift-l);
  line-height: var(--zeile-fliess);
}

.anreiszer__weg {
  margin-block-start: var(--raum-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-4);
}

/* Auf schmalen Geraeten nimmt der Knopf die volle Zeile — dieselbe Loesung
   wie bei den Portfolio-Karten (26.08.), damit die Beschriftung nicht
   wortweise umbricht. */
@media (max-width: 30rem) {
  .anreiszer__karte { padding: var(--raum-6); }
  .anreiszer__weg .schaltflaeche { inline-size: 100%; }
}