/* stil.css - mooshaus.org
 *
 * Eine Datei fuer alle drei Seiten. Bewusst ohne jede fremde Quelle: keine
 * Web-Schrift, kein CDN, kein Zaehlpixel. Nur so kommt die Seite ohne
 * Cookie-Hinweis aus (siehe /datenschutz/) und nur so haelt die strenge
 * Content-Security-Policy im nginx-Block.
 *
 * Farben liegen als Variablen vor und werden fuer den dunklen Modus
 * getauscht - der Rest des Blattes kennt keine festen Farben.
 */

:root {
  color-scheme: light dark;

  --grund:      #fbfaf7;   /* Seitenhintergrund      */
  --karte:      #ffffff;   /* abgesetzte Flaechen    */
  --tinte:      #1b2620;   /* Fliesstext             */
  --gedaempft:  #5a6a61;   /* Nebentext, Fusszeile   */
  --moos:       #35704a;   /* Akzent (Kontrast 5,7:1 auf --grund) */
  --moos-tief:  #245235;
  --moos-hauch: #e9f1eb;   /* Akzentflaeche          */
  --linie:      #e1e6e0;

  --breite: 44rem;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:      #111613;
    --karte:      #171e19;
    --tinte:      #e8efe9;
    --gedaempft:  #9aa9a0;
    --moos:       #79c48c;
    --moos-tief:  #a5d9b2;
    --moos-hauch: #1a2620;
    --linie:      #242c27;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.5rem 4rem;
  background: var(--grund);
  color: var(--tinte);
  font: 400 17px/1.65 var(--schrift);
  -webkit-text-size-adjust: 100%;
}

.blatt { max-width: var(--breite); margin: 0 auto; }

/* ── Kopf ──────────────────────────────────────────────────────────────── */

header.kopf {
  text-align: center;
  padding: 4.5rem 0 3rem;
}

header.kopf .zeichen { color: var(--tinte); }

h1 {
  margin: 1.5rem 0 .35rem;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.untertitel {
  margin: 0;
  color: var(--gedaempft);
  font-size: 1.12rem;
  text-wrap: balance;
}

/* ── Fliesstext ────────────────────────────────────────────────────────── */

main section { margin: 0 0 3rem; }

h2 {
  margin: 0 0 .9rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--moos);
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.vorsatz { font-size: 1.18rem; line-height: 1.55; }

a {
  color: var(--moos);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--moos-tief); }

a:focus-visible,
:focus-visible {
  outline: 2px solid var(--moos);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Abgesetzter Kasten, z. B. fuer den Verweis auf iaki.at */
.kasten {
  background: var(--moos-hauch);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 1.35rem 1.5rem;
}
.kasten p:last-child { margin-bottom: 0; }

.weiter {
  display: inline-block;
  margin-top: .35rem;
  font-weight: 600;
  text-decoration: none;
}
.weiter:hover { text-decoration: underline; }
.weiter::after { content: " \2192"; }

/* ── Rechtsseiten ──────────────────────────────────────────────────────── */

.rechtstext h2 { margin-top: 2.25rem; }
.rechtstext h2:first-of-type { margin-top: 0; }

.rechtstext dl { margin: 0 0 1.1rem; }
.rechtstext dt { font-weight: 600; margin-top: .8rem; }
.rechtstext dd { margin: 0; color: var(--tinte); }

.rechtstext ul { margin: 0 0 1.1rem; padding-left: 1.25rem; }
.rechtstext li { margin-bottom: .3rem; }

.stand { color: var(--gedaempft); font-size: .92rem; }

/* ── Fusszeile ─────────────────────────────────────────────────────────── */

footer.fuss {
  margin-top: 4rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.25rem;
  color: var(--gedaempft);
  font-size: .93rem;
}

footer.fuss .zeichen { color: var(--gedaempft); flex: 0 0 auto; }
footer.fuss nav { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }
footer.fuss a { color: var(--gedaempft); }
footer.fuss a:hover { color: var(--moos); }
footer.fuss .luecke { margin-left: auto; }

/* ── Mailadresse ───────────────────────────────────────────────────────────
 * Im Quelltext steht nur der Rueckfall "... (at) ... (punkt) ..."; den echten
 * Verweis baut /schutz.js. Lange Adressen duerfen auf schmalen Schirmen
 * umbrechen, sonst schiebt sich der Absatz ueber den Rand. */

.mail { overflow-wrap: anywhere; }

/* ── Fest schwebender Anmeldeknopf ─────────────────────────────────────────
 * Steht nur auf der Startseite und nur fuer Besucher, die noch nicht
 * angemeldet sind. Ohne JavaScript traegt er "hidden" - deshalb die
 * ausdrueckliche Regel dafuer: die display-Angabe unten wuerde das
 * Browser-Standardverhalten sonst ueberstimmen und einen Knopf ohne Ziel
 * stehen lassen. */

.anmeldeknopf {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--moos);
  border-radius: 50%;
  background: var(--karte);
  color: var(--moos);
  text-decoration: none;
  box-shadow: 0 1px 8px rgb(0 0 0 / 7%);
}
.anmeldeknopf:hover {
  background: var(--moos);
  color: var(--grund);
}
.anmeldeknopf[hidden] { display: none; }

/* Das Schloss zeichnet sich in der Farbe des Knopfes - beim Ueberfahren
   kippt der Knopf, und currentColor nimmt das Zeichen von selbst mit. */
.schloss {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 34rem) {
  .anmeldeknopf {
    top: .6rem;
    right: .6rem;
    width: 2.15rem;
    height: 2.15rem;
  }
}

@media print {
  .anmeldeknopf { display: none; }
}

/* ── Das Zeichen (Haus als Netz) ───────────────────────────────────────── */

.zeichen .umriss {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.zeichen .netz {
  fill: none;
  stroke: var(--moos);
  stroke-width: 2;
  stroke-linecap: round;
}
.zeichen .knoten { fill: var(--moos); }

@media (max-width: 34rem) {
  header.kopf { padding: 3rem 0 2.25rem; }
  h1 { font-size: 2.1rem; }
  body { font-size: 16.5px; }
}

/* ── Fussstueck fuer angemeldete Besucher ──────────────────────────────────
 * Kommt per SSI aus /var/www/mooshaus-fuss/ und steht nur da, wenn der
 * Pfoertner eine gueltige Sitzung erkennt. Anonyme Besucher sehen nichts
 * davon - auch nicht diese Regeln, die dann schlicht auf nichts passen. */

.dienste {
  margin: 3.5rem 0 0;
  padding: 1.5rem 1.6rem;
  background: var(--moos-hauch);
  border: 1px solid var(--linie);
  border-radius: 10px;
}
.dienste h2 { margin-bottom: .35rem; }
.dienste-wer { margin: 0 0 1rem; color: var(--gedaempft); font-size: .95rem; }

.dienste-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}
.dienste-liste a {
  display: inline-block;
  padding: .4rem .85rem;
  border: 1px solid var(--moos);
  border-radius: 999px;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
}
.dienste-liste a:hover {
  background: var(--moos);
  color: var(--grund);
}

/* ── Sprachwahl ────────────────────────────────────────────────────────────
 * Ein gewoehnlicher Link auf die Gegenseite (/ <-> /en/ usw.), deshalb auch
 * ohne JavaScript da. Er sitzt oben rechts; auf der Startseite steht er im
 * Quelltext direkt hinter dem Anmeldeknopf und rueckt nach links, sobald
 * /schutz.js das Schloss sichtbar macht. Bleibt das Schloss versteckt (ohne
 * JavaScript, oder fuer Angemeldete), nimmt er dessen Platz ein. */

.sprachwahl {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  min-width: 2.4rem;
  padding: 0 .8rem;
  border: 1px solid var(--moos);
  border-radius: 999px;
  background: var(--karte);
  color: var(--moos);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  box-shadow: 0 1px 8px rgb(0 0 0 / 7%);
}
.sprachwahl:hover {
  background: var(--moos);
  color: var(--grund);
}
.anmeldeknopf:not([hidden]) + .sprachwahl { right: 3.9rem; }

/* Hinweis auf den englischen Rechtsseiten: die deutsche Fassung gilt. */
.uebersetzung {
  margin: 0 0 2.25rem;
  color: var(--gedaempft);
  font-size: .92rem;
}

@media (max-width: 34rem) {
  .sprachwahl {
    top: .6rem;
    right: .6rem;
    height: 2.15rem;
    min-width: 2.15rem;
    padding: 0 .65rem;
  }
  .anmeldeknopf:not([hidden]) + .sprachwahl { right: 3.2rem; }
}

@media print {
  .sprachwahl { display: none; }
}