/* =========================================================
   MOBILE
   ---------------------------------------------------------
   Diese Datei gilt AUSSCHLIESSLICH für Fenster, die
   schmaler als 900 Pixel sind. Auf deinem Desktop ist sie
   vollständig wirkungslos - jede Regel steht in einem
   @media-Block.

   Ausschalten: in den HTML-Dateien die Zeile
   <link rel="stylesheet" href="css/mobile.css"> entfernen.

   Testen: Browserfenster schmal ziehen, oder in Chrome
   F12 drücken und oben links auf das Handy-Symbol klicken.
   ========================================================= */


/* =========================================================
   TABLET UND HANDY  (bis 900px)
   ========================================================= */
@media (max-width: 900px) {

  /* ---- Titel: wächst mit der Fensterbreite -------------
     6rem wären auf einem Handy breiter als der Schirm */
  header h1:first-child {
    font-size: clamp(1.8rem, 8vw, 3.4rem);
    padding: 1.5rem 1rem;
  }

  /* ---- Ränder: 5rem sind auf 600px Breite zu viel ------ */
  .bar__inner {
    padding: 0 1rem;
  }

  main.custom_main {
    padding: 1rem 1.25rem;
    font-size: 18px;
  }

  .custom_main h2 {
    font-size: 30px;
    margin: 0 0 1.5rem;
  }

  .custom_main h3 {
    font-size: 22px;
  }

  /* ---- Navigation: umbrechen statt seitlich scrollen ---
     Sonst sieht man nur die ersten zwei Punkte und ahnt
     nicht, dass rechts noch vier weitere stehen. */
  nav.bar {
    margin: 0 0 2rem;
  }

  nav.bar ul {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  nav.bar a {
    font-size: 16px;
    padding: 0.6rem 0.75rem;
  }

  /* ---- Einfrieren abschalten ---------------------------
     Titel, Navileiste und Textblock würden auf dem Handy
     fast den ganzen Bildschirm belegen. Hier scrollt
     wieder alles normal mit. */
  body.page-equipment > header,
  body.page-learning > header,
  body.page-witch > header,
  body.page-equipment > nav.bar,
  body.page-learning > nav.bar,
  body.page-witch > nav.bar {
    position: static;
  }

  body.page-equipment .fog-head,
  body.page-learning .fog-head,
  body.page-witch .fog-head {
    position: static;
    width: auto;
    max-width: none;
  }

  /* Die harten Zeilenumbrüche im Textblock ergeben auf
     schmalen Schirmen doppelte Umbrüche - der Text soll
     hier selbst umbrechen. */
  .fog-head br {
    display: none;
  }

  /* ---- Hintergrundlogo --------------------------------
     900x900 fest würden ein Handy komplett ausfüllen. */
  body.page-equipment::before,
  body.page-learning::before,
  body.page-witch::before,
  body::before {
    position: absolute;
    width: 90vw;
    height: 90vw;
    right: 0;
  }

  /* ---- Galerien: eine ruhige Spalte --------------------
     Die Scroll-Effekte schalten sich unter 900px selbst
     ab (siehe die Scripte). Hier wird nur aufgeräumt, was
     sie an festen Maßen hinterlassen könnten. */
  .vk-gallery,
  .moon-gallery {
    width: auto !important;
    max-width: 100% !important;
    margin: 2rem 0 3rem !important;
  }

  .vk-slot,
  .moon-slot {
    height: auto !important;
    margin-bottom: 3rem !important;
  }

  .vk-frame,
  .moon-frame {
    position: static !important;
    width: 100% !important;
    opacity: 1 !important;
  }

  /* Runenrad wird zum Raster (die Klasse setzt das Script) */
  .rune-stage {
    height: auto !important;
  }

  .rune-wheel {
    position: static !important;
    height: auto !important;
  }

  .rune-static .rune-wheel {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
  }

  /* ---- Fußzeile ---------------------------------------- */
  .back-to-top {
    right: 1rem;
    bottom: 4.5rem;
  }
}


/* =========================================================
   NUR HANDY  (bis 600px)
   ========================================================= */
@media (max-width: 600px) {

  main.custom_main {
    padding: 1rem;
    font-size: 17px;
  }

  .custom_main h2 {
    font-size: 26px;
  }

  nav.bar a {
    font-size: 15px;
    padding: 0.55rem 0.6rem;
  }

  /* Linkzeile auf der Creative-Witch-Seite untereinander */
  .fog-head .cw-links {
    flex-direction: column;
    gap: 0.5rem;
  }

  .copyright-box {
    font-size: 14px;
  }
}