/*
  medienstationen.com

  Ein Teaser, mehr nicht: eine Marke, drei Absätze, zwei Rechtsseiten. Der
  technische Unterbau ist derselbe wie bei out-of-the-box-thinking.net -
  Flex, Größen am Viewport, kein Framework -, das Gesicht ist ein anderes.
  Dort trägt eine Serifenschrift eine Visitenkarte; hier geht es um Geräte in
  Ausstellungsräumen, und dazu passt eine Groteske besser.

  Kein Webfont, kein CDN, kein Analytics, kein fremdes Skript. Es gibt also
  nichts einzuwilligen, und die Seite braucht kein Banner - bei einer
  geschäftlichen Seite ist das viel wert.

  Ein eigenes Skript gibt es: den Hell-Dunkel-Schalter im Fuß. Er ist Zugabe
  und trägt nichts, worauf die Seite angewiesen wäre. Ohne ihn folgen hell und
  dunkel weiterhin der Systemeinstellung, und der Schalter selbst steht als
  hidden im Markup - ohne JavaScript ist er nicht bloß wirkungslos, sondern
  gar nicht da. Genau daran ist es bei out-of-the-box-thinking.net und
  antichristbaum.de schon einmal gescheitert: dort hing das Impressum am
  Skript. Hier hängt nur eine Bequemlichkeit daran.

  Die Wahl merkt sich der Browser in localStorage. Der Eintrag verlässt das
  Gerät nicht, steht aber in der Datenschutzerklärung unter "Hell und dunkel" -
  § 25 Abs. 2 Nr. 2 TDDDG erlaubt ihn ohne Einwilligung, verlangt dafür aber
  die Begründung.

  ---

  Es gibt genau eine Schraube: den Schriftgrad am Viewport. Alles andere -
  Zeilenabstände, Überschriften, die Breite der Textspalte - hängt in `em`
  daran und wächst mit. Auf 360 px sind das 16 px, auf 1280 px knapp 17 px,
  auf 4K 30 px.

  Die Textspalte steht deshalb auf `34em` und nicht auf einer Pixelzahl: die
  Zeilenlänge bleibt bei rund 70 Zeichen, die Spalte wird auf einem großen
  Schirm trotzdem breiter, statt als Handystreifen in der Mitte zu kleben.
*/

:root {
  color-scheme: light dark;

  --grund: #ffffff;
  --tinte: #16181c;
  --leise: #5a5d66;
  /* Petrol, 7,2:1 auf Weiß. Bewusst nicht das Blau der Schwesterseite: die
     beiden Domains gehören zusammen, sind aber nicht dasselbe Angebot. */
  --akzent: #14606b;
  --linie: #e4e4e1;
  --kasten: #f4f6f6;

  --schrift: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --luft: clamp(1.5rem, 4vw, 8rem);

  --ist-dunkel: 0;
}

/*
  Dunkel gibt es auf zwei Wegen, und beide müssen zum selben Ergebnis führen:
  die Voreinstellung des Systems und die ausdrückliche Wahl am Schalter.
  Deshalb stehen die Werte zweimal da - einmal hinter der Media-Query, aber
  nur solange niemand ausdrücklich "hell" gewählt hat, einmal hinter dem
  Attribut, das der Schalter setzt.

  --ist-dunkel ist die Auskunft für das Skript: es liest den Wert, statt die
  Media-Query ein zweites Mal in JavaScript nachzubauen. So gibt es nur eine
  Wahrheit, und der Ausgangszustand "wie das System es will" bleibt erhalten,
  bis jemand ausdrücklich wählt.

  #14606b trägt auf dunklem Grund nicht mehr - aufgehellt auf 8,9:1.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --ist-dunkel: 1;

    --grund: #101418;
    --tinte: #e8eaed;
    --leise: #98a0a8;
    --akzent: #6fc0cb;
    --linie: #232a30;
    --kasten: #171d23;
  }
}

:root[data-thema="dunkel"] {
  --ist-dunkel: 1;

  --grund: #101418;
  --tinte: #e8eaed;
  --leise: #98a0a8;
  --akzent: #6fc0cb;
  --linie: #232a30;
  --kasten: #171d23;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: var(--luft);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;

  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  /* die eine Schraube: 16px auf dem Telefon, 30px auf 4K */
  font-size: clamp(1rem, 0.65rem + 0.5vw, 1.875rem);
  line-height: 1.65;

  /* info@medienstationen.com passt auf einem schmalen Telefon nicht in eine
     Zeile. Browser brechen zwar nach Bindestrichen um, aber nicht vor dem @ -
     ohne das hier steht die Adresse auf 360 px über dem Rand. */
  overflow-wrap: break-word;
}

a {
  color: var(--akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ----------------------------------------------------------------- Blatt */

.blatt {
  width: 100%;
  /* in em, damit die Zeilenlänge steht und die Spalte trotzdem mitwächst */
  max-width: 34em;
}

/* --------------------------------------------------------------- Marke */

/*
  Die Marke steht als SVG im HTML und nicht als Bildverweis: ein einzelnes
  Zeichen in einem Kasten kostet weniger Bytes als der HTTP-Abruf, den ein
  <img> dafür bräuchte, und sie erbt die Farben von hier. Dieselbe Zeichnung
  liegt noch einmal eigenständig in favicon.svg - die Datei sieht dieses
  Stylesheet nicht und trägt ihre Farben deshalb selbst.
*/
.kopf {
  margin-bottom: 2.5em;
}

.marke-bild {
  display: block;
  width: 2.75em;
  height: auto;
  margin-bottom: 1.1em;
}

.marke-bild .kasten {
  fill: var(--akzent);
}

/* Das Zeichen ist aus dem Kasten ausgespart, nimmt also die Farbe des
   Seitengrunds an - hell wie dunkel. */
.marke-bild .zeichen {
  fill: none;
  stroke: var(--grund);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Auf den Rechtsseiten wird die Marke zur Rückkehr: Zeichen und Name in einer
   Zeile, zusammen ein einziger Verweis auf die Startseite. Der Fuß führt
   ebenfalls zurück - das hier ist der Weg für den, der oben ankommt. */
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 2.5em;
  color: var(--leise);
  text-decoration: none;
  font-size: 0.8em;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.zurueck .marke-bild {
  width: 2em;
  margin-bottom: 0;
}

.zurueck:hover,
.zurueck:focus-visible {
  color: var(--tinte);
}

/* Der Domainname über der Überschrift. Er ist nicht die Überschrift - die
   sagt, worum es geht - sondern nur die Absenderzeile. */
.domain {
  margin: 0 0 0.35em;
  font-size: 0.8em;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--leise);
}

/* ------------------------------------------------------------- Textkörper */

h1 {
  margin: 0;
  font-size: 1.75em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 {
  margin: 0 0 0.5em;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--leise);
}

p {
  margin: 0 0 1em;
}

/* Der erste Absatz trägt den Gedanken, aus dem alles Weitere folgt. Er steht
   deshalb eine Spur größer - nicht als Auszeichnung, sondern als Reihenfolge. */
.anriss {
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--tinte);
}

.feld {
  margin-bottom: 2.4em;
}

.feld > :last-child {
  margin-bottom: 0;
}

address {
  font-style: normal;
  margin: 0 0 1em;
}

ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

li {
  margin-bottom: 0.35em;
}

/* Die beiden Betriebe: eine Liste ohne Punkte, je eine Zeile Name und eine
   Zeile Ort. Definitionsliste, weil genau das gemeint ist. */
.haeuser {
  margin: 0;
}

.haeuser dt {
  font-weight: 600;
}

.haeuser dd {
  margin: 0 0 0.9em;
  font-size: 0.92em;
  color: var(--leise);
}

.haeuser dd:last-child {
  margin-bottom: 0;
}

.klein {
  font-size: 0.9em;
  color: var(--leise);
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  font-size: 0.875em;
}

/* Die Kontaktadresse ist der einzige Weg von dieser Seite hinaus, der etwas
   auslöst. Sie steht deshalb in einem eigenen Kasten und nicht im Fließtext. */
.kontakt {
  padding: 1.1em 1.3em;
  background: var(--kasten);
  border-left: 3px solid var(--akzent);
  border-radius: 0 3px 3px 0;
}

.kontakt p:last-child {
  margin-bottom: 0;
}

.kontakt .adresse {
  font-size: 1.1em;
}

/* ----------------------------------------------------------------- Fuß */

/*
  Impressum und Datenschutz stehen hier als gewöhnliche Verweise auf
  gewöhnliche Dateien. Kein javascript:, kein innerHTML, kein Umweg über eine
  fremde Domain - "leicht erkennbar, unmittelbar erreichbar und ständig
  verfügbar" heißt genau das.
*/
.fuss {
  margin-top: 3.5em;
  padding-top: 1.4em;
  border-top: 1px solid var(--linie);
  font-size: 0.92em;
}

.fuss a,
.fuss .thema {
  text-decoration: none;
}

.fuss a:hover,
.fuss a:focus-visible,
.fuss .thema:hover,
.fuss .thema:focus-visible {
  text-decoration: underline;
}

.fuss .punkt {
  margin: 0 0.75em;
  color: var(--leise);
}

/* ------------------------------------------------------------ Schalter */

/*
  Hell und dunkel folgen ohne Zutun der Systemeinstellung. Der Schalter ist
  Zugabe: er steht als hidden im Markup und wird erst vom Skript freigegeben.
  Ohne JavaScript ist er also nicht bloß wirkungslos, sondern gar nicht da -
  und die Seite bleibt vollständig, das Impressum eingeschlossen.

  Er soll aussehen wie die beiden Verweise daneben und tut das auch: Farbe,
  Schrift, Größe und das Unterstreichen bei Zeigen und Tastaturfokus kommen
  aus denselben Regeln. Ein button bleibt er trotzdem, denn er führt nirgends
  hin, sondern tut etwas - so wird er mit der Tastatur erreichbar und von
  Vorleseprogrammen als Schalter angesagt. Was ein Browser an Rahmen und
  Hintergrund mitbringt, fällt weg.

  Welche Beschriftung gilt, entscheidet das Stylesheet über --ist-dunkel,
  nicht das Skript.
*/
.thema {
  padding: 0;
  border: 0;
  background: none;
  color: var(--akzent);
  font: inherit;
  cursor: pointer;
}

.thema-nach-hell {
  display: none;
}

:root[data-thema="dunkel"] .thema-nach-dunkel {
  display: none;
}

:root[data-thema="dunkel"] .thema-nach-hell {
  display: inline;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .thema-nach-dunkel {
    display: none;
  }

  :root:not([data-thema="hell"]) .thema-nach-hell {
    display: inline;
  }
}

/* ------------------------------------------------------- Rechtstexte */

/*
  Ab einer gewissen Breite hilft ein größerer Schriftgrad nicht mehr: eine
  einzelne Spalte mitten in einem 4K-Schirm bleibt eine Handy-Spalte, nur
  größer, und die Datenschutzseite wird entsprechend lang. Deshalb bricht der
  Text ab hier in Spalten um. Die Zeilenlänge bleibt dabei stehen: zwei
  Spalten plus eine Rinne sind 72em, drei plus zwei sind 110em.

  Die Grenzen stehen in Pixeln und nicht in em, weil sie eine Aussage über den
  Schirm treffen und nicht über die Schrift. Nur die Rechtstexte brechen um -
  die Startseite ist kurz genug, dass zwei Spalten dort albern aussähen.
*/
@media (min-width: 1500px) {
  .blatt.recht {
    max-width: 72em;
  }

  .recht .felder {
    columns: 2;
    column-gap: 4em;
  }
}

@media (min-width: 2800px) {
  .blatt.recht {
    max-width: 110em;
  }

  .recht .felder {
    columns: 3;
  }
}

/* Ein Abschnitt wird nicht auseinandergerissen. */
.recht .feld {
  break-inside: avoid;
}

/* Auf den Rechtsseiten führt die Überschrift der Seite, die Zwischentitel
   brauchen deshalb Luft nach oben - anders als auf der Startseite, wo jeder
   Abschnitt für sich steht. */
.recht .feld h2 {
  margin-top: 0;
}

.recht h1 {
  margin-bottom: 1.2em;
}