@charset "UTF-8";
/*
 * Brauhaus zum Ritter — Inhaltsformate.
 * Wird an zwei Stellen geladen: von der Website
 * (cms/vorlagen/layout.php) und im TinyMCE-Editor (redaktion.js,
 * content_css).
 */

:root {
  --i-text:      #e8e6e1;
  --i-text-2:    #b9b5aa;
  --i-gruen:     #acd904;
  --i-linie:     #3a3e31;
  --i-warnung:   #ff8f6b;
  --i-rund:      6px;
  /* Rueckfall; die echte Zahl kommt aus der Einstellung. */
  --lesebreite:  60rem;
}

.seite__text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--i-text);
  /* Keine Silbentrennung auf breiten Spalten — sie erzeugt bei
     Flattersatz nur Brüche wie „Rit-terstube". Auf schmalen
     Bildschirmen weiter unten wieder eingeschaltet, dort ist sie
     nötig. */
  hyphens: none;
  -webkit-hyphens: none;
  /* Verhindert ein einzelnes Wort in der letzten Zeile eines Absatzes */
  text-wrap: pretty;
}

.seite__text > *:first-child { margin-top: 0; }
.seite__text p { margin: 0 0 1.1rem; }

.seite__text h2, .seite__text h3 {
  font-weight: 400; color: var(--i-gruen); line-height: 1.25;
  text-wrap: balance; hyphens: none; -webkit-hyphens: none;
}
.seite__text h2 { font-size: 1.5rem;   margin: 2.4rem 0 .8rem; }
.seite__text h3 { font-size: 1.1875rem; margin: 1.9rem 0 .6rem; }

.seite__text a { color: var(--i-gruen); text-underline-offset: 2px; }
.seite__text strong { font-weight: 600; }
/*
 * Hervorgehoben in Hellgrün, nicht in Rot: Rot heißt auf dieser Website
 * „Achtung".
 */
.seite__text mark { background: none; color: var(--i-gruen); font-weight: 600; }
.seite__text sub, .seite__text sup { font-size: .75em; line-height: 0; }

.seite__text ul, .seite__text ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
.seite__text li { margin: .3rem 0; }

.seite__text hr {
  border: 0; border-top: 1px solid var(--i-linie);
  margin: 2.2rem 0; clear: both;
}

/* --- Blockzitat -------------------------------------------------------
   Im Editor über Formate → Blockzitat oder den Knopf zuweisbar. Die
   senkrechte Linie steckt im Stil, sie muss nicht gebaut werden. */
.seite__text blockquote,
.seite__text blockquote.zitat {
  margin: 1.9rem 0; padding: .1rem 0 .1rem 1.4rem;
  border-left: 4px solid var(--i-gruen);
  font-size: 1.25rem; line-height: 1.45; color: var(--i-text-2);
}
.seite__text blockquote p { margin-bottom: .6rem; }
.seite__text blockquote p:last-child { margin-bottom: 0; }
.seite__text blockquote cite {
  display: block; margin-top: .6rem; font-size: .9rem;
  font-style: normal; color: var(--i-text-2);
}

/*
 * --- Tabellen ---
 * Der scrollende Rahmen kommt von seite_tabellen_rahmen() beim
 * Anzeigen; hier steht nur, wie die Tabelle selbst aussieht.
 */
.seite__text table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.25rem;
  font-size: .9375rem;
}
.seite__text th, .seite__text td {
  padding: .5rem .6rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--i-linie); min-width: 7.5rem;
}
.seite__text th { font-weight: 600; color: var(--i-text-2); }

/*
 * Der Rahmen selbst: Ohne diese Regel läuft die ganze Seite quer,
 * sobald eine Preisliste vier Spalten hat.
 */
.tabellenrahmen {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.25rem;
}
.tabellenrahmen > table { margin-bottom: 0; }
/* Wer mit der Tastatur scrollt, muss sehen, wo er ist. Der Rahmen hat
   tabindex="0" und wäre sonst ein Ziel ohne sichtbaren Fokus. */
.tabellenrahmen:focus-visible {
  outline: 2px solid var(--i-gruen); outline-offset: 3px;
}

/*
 * --- Ausrichtung ---
 * Bei einem Bild sagen die drei Wörter, wo es steht; hier, wohin der
 * Text läuft.
 */
.seite__text td.links,   .seite__text th.links,
.seite__text p.links,    .seite__text h2.links,
.seite__text h3.links,   .seite__text li.links,
.seite__text figcaption.links   { text-align: left; }

.seite__text td.mitte,   .seite__text th.mitte,
.seite__text p.mitte,    .seite__text h2.mitte,
.seite__text h3.mitte,   .seite__text li.mitte,
.seite__text figcaption.mitte   { text-align: center; }

.seite__text td.rechts,  .seite__text th.rechts,
.seite__text p.rechts,   .seite__text h2.rechts,
.seite__text h3.rechts,  .seite__text li.rechts,
.seite__text figcaption.rechts  { text-align: right; }


/*
 * --- Bilder ---
 * Fünf Platzierungen, im Editor über den Bilddialog wählbar.
 */

.seite__text img {
  display: block; max-width: 100%; height: auto;
  border-radius: var(--i-rund); margin: 0 0 1.3rem;
}
.seite__text figure { margin: 1.5rem 0; max-width: 100%; }
.seite__text figure img { margin: 0; }
.seite__text figcaption {
  margin-top: .4rem; font-size: .875rem; font-style: italic;
  line-height: 1.45; color: var(--i-text-2);
}

/* float ausdrücklich zurücksetzen: Ein Bild, das vorher umflossen war
   und dann auf „Block" gestellt wird, behielte sonst seinen float. */
.seite__text img.links,  .seite__text figure.links,
.seite__text img.mitte,  .seite__text figure.mitte,
.seite__text img.rechts, .seite__text figure.rechts { float: none; clear: both; }

.seite__text figure.links,
.seite__text figure.mitte,
.seite__text figure.rechts { display: table; }

.seite__text img.links,  .seite__text figure.links  { margin-left: 0;    margin-right: auto; }
.seite__text img.mitte,  .seite__text figure.mitte  { margin-left: auto; margin-right: auto; }
.seite__text img.rechts, .seite__text figure.rechts { margin-left: auto; margin-right: 0; }

.seite__text figure.mitte  figcaption { text-align: center; }
.seite__text figure.rechts figcaption { text-align: right; }

.seite__text img.umflossen-links,
.seite__text figure.umflossen-links {
  float: left; margin: .3rem 1.6rem 1rem 0; max-width: min(320px, 46%);
}
.seite__text img.umflossen-rechts,
.seite__text figure.umflossen-rechts {
  float: right; margin: .3rem 0 1rem 1.6rem; max-width: min(320px, 46%);
}
.seite__text figure.umflossen-links img,
.seite__text figure.umflossen-rechts img { width: 100%; }

/*
 * --- Die Lesebreite ---
 * Über etwa hundert Zeichen je Zeile findet das Auge beim Umbruch den
 * Zeilenanfang nicht mehr wieder.
 */
.seite__text > p,
.seite__text > h2,
.seite__text > h3,
.seite__text > ul,
.seite__text > ol,
.seite__text > blockquote,
.seite__text > .tabellenrahmen { max-width: var(--lesebreite, 60rem); }

/* Umbrüche sauber abschließen */
.seite__text::after { content: ""; display: block; clear: both; }
.seite__text .frei { clear: both; }

/* --- Schmale Bildschirme --------------------------------------------- */
@media (max-width: 44rem) {
  /* Auf schmalen Spalten ist Trennung sinnvoll — aber nur bei langen
     Wörtern und mit mindestens vier Zeichen vor und nach dem Strich. */
  .seite__text p, .seite__text li, .seite__text td {
    hyphens: auto; -webkit-hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
  /* Umflossene Bilder stehen über dem Text. Nebeneinander blieben auf
     390 Pixeln zwei Wörter je Zeile. */
  .seite__text img.umflossen-links,
  .seite__text img.umflossen-rechts,
  .seite__text figure.umflossen-links,
  .seite__text figure.umflossen-rechts {
    float: none; max-width: 100%; margin: 1.1rem 0;
  }
  /*
   * Ein Bild, das auf dem Telefon gar nicht erst erscheint: Ein per
   * float gesetztes Bild steht dort allein zwischen zwei Absätzen.
   */
  .seite__text img.nur-gross,
  .seite__text figure.nur-gross { display: none; }

  .seite__text img.rechts, .seite__text figure.rechts { margin-right: 0; }
  .seite__text figure.rechts figcaption { text-align: left; }
  .seite__text blockquote { font-size: 1.125rem; padding-left: 1rem; }
}


/*
 * Die Layout-Bausteine: Was das Menü „Bausteine" im Editor einfügt,
 * wird hier gezeichnet — und weil diese Datei auch das content_css des
 * Editors ist, sieht die Redaktion dasselbe.
 */

/*
 * --- Spaltenraster ---
 * `minmax(0, 1fr)` und nicht `1fr`: Die kleinste Größe einer
 * Rasterspalte ist von Haus aus ihr Inhalt.
 */
.seite__text div.raster {
  display: grid;
  gap: 1.5rem;
  margin: 1.75rem 0;
  align-items: start;
}
.seite__text div.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seite__text div.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Der erste und der letzte Absatz einer Spalte tragen keinen eigenen
   Abstand — sonst steht die Spalte tiefer als ihre Nachbarin, und die
   Reihe sieht schief aus, ohne dass es dafür einen Grund gäbe. */
.seite__text div.spalte > :first-child,
.seite__text div.kachel > :first-child { margin-top: 0; }
.seite__text div.spalte > :last-child,
.seite__text div.kachel > :last-child  { margin-bottom: 0; }

/* Bilder in einer Spalte füllen sie aus. Ohne das steht ein 300 Punkte
   breites Foto in einer 480 Punkte breiten Spalte links angeschlagen
   da, und die Reihe wirkt unaufgeräumt. */
.seite__text div.spalte img,
.seite__text div.kachel img { width: 100%; height: auto; }
.seite__text div.spalte figure,
.seite__text div.kachel figure { margin: 0; max-width: none; float: none; }


/*
 * --- Die Kachelreihe ---
 * `auto-fit` mit einer Mindestbreite bricht von selbst um; anders als
 * das Raster zählt sie ihre Kacheln nicht.
 */
.seite__text div.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0;
  align-items: start;
}
.seite__text div.kachel {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--i-linie);
  border-radius: var(--i-rund);
  padding: 1.15rem 1.3rem;
  /* Gegen den Ausbruch absolut gesetzter Kinder — dieselbe Vorkehrung
     wie bei `.knopf` und `.tabellenrahmen` in website.css. Zweimal in
     diesem Projekt hat eine Vorlesehilfe mit `position: absolute` ohne
     positionierten Vorfahren die ganze Seite quergestellt. */
  position: relative;
}
.seite__text div.kachel h2,
.seite__text div.kachel h3 { margin-top: 0; }


/*
 * --- Der Knopf im Text ---
 * Derselbe Knopf wie überall, hier noch einmal ausgeschrieben: Der
 * Editor lädt nur diese Datei.
 */
.seite__text a.knopf {
  display: inline-block;
  min-height: 2.75rem;
  padding: .7rem 1.6rem;
  background: var(--i-gruen);
  color: #14150f;
  border: 1px solid var(--i-gruen);
  border-radius: var(--i-rund);
  font-size: 1rem; line-height: 1.4; font-weight: 600;
  text-decoration: none;
  position: relative;
}
.seite__text a.knopf:hover { background: #7ba003; border-color: #7ba003; }


/*
 * --- Schmale Bildschirme ---
 * Drei Spalten auf einem Telefon sind drei Spalten von hundert Punkten.
 * Die Zwischenstufe ist Absicht.
 */
@media (max-width: 48rem) {
  .seite__text div.raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .seite__text div.raster--2,
  .seite__text div.raster--3 { grid-template-columns: minmax(0, 1fr); }
  .seite__text div.kacheln   { grid-template-columns: minmax(0, 1fr); }
}

/*
 * --- Die Anfahrtskarte ---
 * Ein eingebetteter Rahmen von OpenStreetMap; die Wahl ist in
 * kern/seiten.php begründet.
 */
.seite__text iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--linie, #d5d3cb);
  border-radius: 8px;
  background: #f2f1ec;   /* solange sie laedt — kein schwarzes Loch */
}

/* Auf schmalen Geraeten darf sie hoeher werden: Ein 3:2-Ausschnitt ist
   bei 320 Punkten Breite 213 Punkte hoch, und darin ist nichts zu
   erkennen. */
@media (max-width: 600px) {
  .seite__text iframe { aspect-ratio: 1 / 1; }
}