/**
 * Sichtbarkeit nach Bildschirmgröße (Mediaplan Base).
 *
 * Zwei Klassen, die im Editor bei jedem Block unter „Zusätzliche CSS-Klasse(n)“
 * eingetragen werden können:
 *
 *   nur-mobil    - nur auf schmalen Bildschirmen zu sehen
 *   nur-desktop  - nur auf breiten Bildschirmen zu sehen
 *
 * Deutsch benannt, weil sie jemand eintippt, der Texte pflegt, und nicht jemand,
 * der das Theme baut.
 *
 * Warum eine eigene Datei und nicht die main.css: Die main.css lädt WordPress auch
 * in den Editor. Dort ist die Leinwand oft schmaler als 800px - ein Block mit
 * „nur-desktop“ verschwände also beim Bearbeiten, und wer seinen Block nicht mehr
 * findet, legt ihn ein zweites Mal an. Diese Datei bleibt deshalb dem Frontend
 * vorbehalten; im Editor kennzeichnet die editor.css die Blöcke stattdessen mit
 * einem Rahmen und einem kleinen Schild.
 *
 * Der naheliegende Ausweg - im Editor „display“ zurücksetzen - wäre falsch:
 * „revert“ landet beim Wert des Browsers und damit bei „block“. Eine Gruppe steht
 * aber auf flex und eine Spalte auf grid; ihr Aufbau fiele im Editor auseinander.
 *
 * Wofür diese Klassen nicht gedacht sind: denselben Text zweimal zu setzen, einmal
 * für Mobil und einmal für Desktop. Ausgeblendet heißt versteckt, nicht abwesend -
 * der Text steht doppelt im Quelltext, Suchmaschinen sehen ihn zweimal und wer die
 * Seite vorlesen lässt, hört ihn womöglich auch. Für Bilder, Abstände und ganze
 * Abschnitte sind sie richtig, für Fließtext nicht.
 */

/*
 * Die Grenze liegt bei 800px, demselben Wert, an dem das Menü zum Hamburger
 * klappt. Zwei verschiedene Grenzen in einem Theme fallen genau dann auf, wenn
 * ein Bild und die Navigation kurz hintereinander umbrechen.
 *
 * Die 799.98px sind kein Tippfehler: „max-width: 800px“ und „min-width: 800px“
 * greifen bei genau 800px beide. Bei Farben oder Abständen ist das gleichgültig,
 * bei Sichtbarkeit wäre ein Block dort doppelt da oder gar nicht.
 *
 * „!important“ ist hier richtig: Die Klasse hängt an einem Block, der sein eigenes
 * „display“ mitbringt. Ohne Vorrang gewinnt der Block und die Klasse tut nichts.
 */
@media (max-width: 799.98px) {
  .nur-desktop { display: none !important; }
}

@media (min-width: 800px) {
  .nur-mobil { display: none !important; }
}
