/* ==========================================================================
   wasmachtmeinedomain.de — Variante „schwebend"
   Child-Theme zu 00_wmmd. Es steht alphabetisch später und gewinnt deshalb.

   Ein Versuch, nichts Beschlossenes: Ab Desktop klebt das Panel nicht mehr
   an der linken Browserkante, sondern steht mit Abstand zu allen vier Seiten
   als Karte vor dem Bild, mit einem leichten Schatten darunter.

   Was sich NICHT ändert:
   Mobil (< 768) und auf dem Tablet (768–1023) bleibt alles wie im
   Basis-Theme — dort ist neben dem Panel ohnehin nur ein schmaler Streifen
   Bild, eine schwebende Karte hätte da keinen Grund und keinen Platz.
   Die Spaltenbreite bleibt --panel-width: Der Abstand kommt zur Spalte
   hinzu, er wird ihr nicht abgezogen. Der Satzspiegel ist in beiden
   Fassungen derselbe, sonst wäre der Vergleich keiner.

   ABWEICHUNG VOM AUFBAU, bewusst:
   Im Basis-Theme teilen Panel und Bild die Bühne in zwei Spalten, jede mit
   ihrer eigenen Fläche. Hier liegt das Bild unter der vollen Breite und das
   Panel darauf. Anders ginge es nicht: Der Schatten braucht etwas, worauf er
   fallen kann, und der Rahmen um die Karte muss das Bild zeigen, nicht eine
   zweite weiße Fläche.
   ========================================================================== */

:root {
  /* Der Abstand rundum. 2rem = 32px, wie gewünscht — genau genommen liegt das
     neben dem 40er-Raster des CD. Wer es darauf zurückholen will, setzt hier
     var(--s3); es ist die einzige Stelle. */
  --panel-inset: 2rem;
}

/* --------------------------------------------------------------------------
   Die schwebende Karte
   Ab 1024 px, also an derselben Kante, an der das Basis-Theme dem Bild den
   vollen Rand gibt. Das ist hier die Desktop-Grenze; 768 wäre zu früh, dort
   bliebe neben Karte und Abstand kein Bild mehr übrig, auf das sie fallen
   könnte.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

  /* Die erste Spalte trägt jetzt Karte UND Abstand. Das Bild läuft über
     beide Spalten durch und wird damit zur Kulisse der ganzen Bühne. */
  .stage {
    grid-template-columns: calc(var(--panel-width) + 2 * var(--panel-inset)) 1fr;
    background: var(--nd-black);
  }

  .stage__image {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Karte und Bild liegen in derselben Rasterzelle. Im Quelltext steht das
     Panel vor dem Bild, ohne z-index läge es darunter. */
  .panel {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;

    /* width: 100% aus dem Basis-Theme plus Rand ergäbe Überlauf — die
       Ränder zählen nicht in die Breite, auch nicht bei border-box. */
    width: auto;
    margin: var(--panel-inset);

    /* Die doppelte Angabe ist die Schreibweise des Basis-Stylesheets: dvh in
       einem calc() ist für einen Browser ohne dvh ungültig, die Zeile darüber
       bleibt dann stehen.

       Die min-height muss mit: Das Basis-Theme setzt sie auf volle
       Fensterhöhe, und eine min-height schlägt jede height. Ohne diese
       zwei Zeilen bleibt die Karte 100dvh hoch und steht unten über. */
    height: calc(100vh - 2 * var(--panel-inset));
    height: calc(100dvh - 2 * var(--panel-inset));
    min-height: calc(100vh - 2 * var(--panel-inset));
    min-height: calc(100dvh - 2 * var(--panel-inset));

    /* Kein Rahmen. Die border-right des Basis-Themes muss dafür ausdrücklich
       weg — sie gilt ab 768 px weiter und stünde sonst als einzelne Linie an
       der rechten Kante der Karte. Die Trennung zum Bild macht allein der
       Schatten. */
    border: 0;

    /* Leicht heißt leicht: eine kurze harte Kante, damit die Karte aufliegt,
       und ein weiter weicher Schein, damit sie nicht klebt. Kein Versatz zur
       Seite — die Lichtquelle steht über der Seite, nicht daneben. */
    box-shadow:
      0 2px 6px rgba(0, 0, 0, .20),
      0 16px 48px rgba(0, 0, 0, .28);
  }

  /* Die Innenspalte streckte sich bisher auf volle Fensterhöhe. In der Karte
     ist das zu viel: Der Inhalt wäre um Abstand und Rahmen höher als sein
     Behälter, und jede noch so kurze Seite bekäme einen Rollbalken. */
  .panel__inner {
    min-height: calc(100vh - 2 * var(--panel-inset));
    min-height: calc(100dvh - 2 * var(--panel-inset));
  }

  /* Der Verlauf und die Schrift darin gehen getrennte Wege.

     Die Fläche bleibt so breit wie das Bild — sie läuft von Fensterkante zu
     Fensterkante durch, auch unter der Karte hindurch und durch den Streifen
     Bild, der unter ihr stehen bleibt. Der dunkle Fuß der Seite ist damit
     eine Bank, kein Rest neben dem Panel.

     Die Schrift darf da nicht mit: Sie fängt erst an, wo das Bild wieder zu
     sehen ist. Das macht der linke Innenabstand — Spaltenbreite plus zweimal
     Abstand für die Karte, dann der reguläre Rand aus dem Basis-Theme.
     Deshalb Innenabstand und nicht 'left': Ein linker Rand würde die Fläche
     mitnehmen, der Innenabstand nur den Satz. */
  .stage__caption {
    padding-left: calc(var(--panel-width) + 2 * var(--panel-inset) + var(--s3));
  }

  /* Die Sprungmarke sitzt an der Fensterecke und läge sonst neben der Karte
     im Bild. Sie gehört an deren Kante. */
  .skip:focus {
    left: var(--panel-inset);
    top: var(--panel-inset);
  }
}