/* Gemeinsames Aussehen von impressum.html und datenschutz.html.
   Bewusst eine eigene, kleine Datei statt eines Auszugs aus dem
   Inline-CSS der Startseite: die beiden Rechtsseiten sind reine
   Textseiten, laden kein three.js und keine Module und sollen auch
   dann noch lesbar sein, wenn an der Startseite gebaut wird.
   Die @font-face-Saetze kommen aus assets/schriften.css. */

:root {
  --cream: #ece6da;
  --cream-soft: #c9c4b6;
  --anthracite: #181816;
  --gold: #c9a24b;
  --gold-deep: #8a6a2f;
  /* Der Gold-Ton fuer TEXT auf Cream: 4,68:1. `--gold-deep` kommt nur
     auf 4,04:1 und faellt damit durch — er taugt fuer Linien und
     Raender, nicht fuer Schrift. Bis 24.08.2026 stand dieser Wert nur
     in geschichte.css und seite.css und fehlte ausgerechnet in der
     Basis, weshalb Impressum und Datenschutz ihn nicht hatten. */
  --gold-text: #7f6029;
  --gold-light: #f0d089;
  --line-hell: rgba(24, 24, 22, 0.14);
  --line-dunkel: rgba(236, 230, 218, 0.24);
  --grau: #56544e;
  /* Der Abstand der randlosen Balken zum Fensterrand. Er steht hier und
     nicht in seite.css, weil ihn alle sechs Unterseiten teilen —
     Impressum, Datenschutz, Geschichte, Lage, Wer, Ideenbox.

     Vorher hatte der Kopf 4vw und der Fuss 6vw: zwei Werte fuer
     dieselbe Aufgabe, sichtbar als Versatz zwischen oben und unten
     (bei 1975px Fenster 80 gegen 119). Der Boden bei 20px greift
     unter 500px Fensterbreite — 4vw allein waeren am Telefon 15px. */
  --rand: max(20px, 4vw);
  /* Der Deckel fuer breite Schirme. Oberhalb davon waechst die
     Polsterung um die halbe Differenz — genau das, was `max-width` +
     `margin:auto` + `padding` an einem zentrierten Kasten ergeben.
     `--spur-rand` schreibt diese Rechnung einmal auf, damit sie nicht
     in jeder Datei neu entsteht.

     ACHTUNG: das `100%` darin meint die Breite des ELTERNS, nicht die
     des Elements. Nur an Bloecken benutzen, deren Eltern das Fenster
     ist — sonst rechnet die Formel gegen den falschen Bezug. */
  --spur: 1240px;
  --spur-rand: calc(max(0px, 100% - var(--spur)) / 2 + var(--rand));
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--anthracite);
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--gold);
  color: var(--anthracite);
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: translateY(0);
}

/* Kopfzeile: dieselbe Wortmarke wie auf der Startseite, aber ohne
   Navigation. Wer hier gelandet ist, sucht einen Rechtstext und
   danach den Weg zurueck — mehr Angebot lenkt nur ab. */
.rt-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px var(--rand);
  background: var(--anthracite);
  color: var(--cream);
}

.wordmark {
  display: inline-grid;
  grid-template-columns: auto 28px;
  align-items: center;
  width: max-content;
  color: var(--cream);
  line-height: 0.85;
  text-decoration: none;
}
.wordmark > span {
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.085em;
}
.wordmark b {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-left: 7px;
  background: var(--gold);
  color: var(--anthracite);
  font-size: 14px;
  font-weight: 800;
}

/* Der gefuellte Knopf. Er stand bis zum 24.08.2026 nur in ideenbox.css
   und die Geschichte hatte statt seiner einen unterstrichenen Textlink —
   zwei Formen fuer dieselbe Handlung. Hier steht die Grundfassung mit
   den Basis-Toenen, weil sie alle sechs Unterseiten laden.

   `seite.css` und `ideenbox.css` ueberschreiben ihn danach
   oberflaechengebunden (`--accent` / `--auf-akzent`), damit er auf
   Cream und auf Gold ebenfalls traegt. */
.cta-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--anthracite);
  padding: 13px 22px;
  font: 800 12px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms ease;
}
.cta-btn:hover {
  background: var(--gold-light);
}

.rt-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 180ms ease;
}
.rt-zurueck:hover {
  color: var(--gold-light);
}

/* Die Lesespalte ist ein Mass, kein Kasten. Vorher stand hier
   `max-width: 680px` zusammen mit `padding-inline: 6vw` — bei
   `box-sizing: border-box` frisst die Polsterung dann die Spalte, und
   zwar umso mehr, je breiter das Fenster ist: bei 1920px blieben von
   den 680 noch 450 uebrig. Die Seite wurde also schmaler, wo sie
   breiter werden sollte. Jetzt ist 680 die Zeilenlaenge und die
   Polsterung kommt oben drauf. */
.rt-inhalt {
  --mass: 680px;
  max-width: calc(var(--mass) + 2 * var(--rand));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) var(--rand) clamp(60px, 8vw, 100px);
}

.rt-kicker {
  margin: 0 0 18px;
  color: var(--gold-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.rt-inhalt h1 {
  margin: 0 0 14px;
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.rt-stand {
  margin: 0 0 clamp(38px, 5vw, 56px);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-hell);
  color: var(--grau);
  font-size: 13px;
}

.rt-inhalt h2 {
  margin: clamp(40px, 5vw, 58px) 0 14px;
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.rt-inhalt h3 {
  margin: 30px 0 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.rt-inhalt p {
  margin: 0 0 16px;
}

.rt-inhalt ul {
  margin: 0 0 16px;
  padding-left: 20px;
}
.rt-inhalt li {
  margin-bottom: 8px;
}

.rt-inhalt a[href^="mailto"],
.rt-inhalt a[href^="tel:"],
.rt-inhalt a[href^="http"],
.rt-inhalt a[href^="/"] {
  text-decoration: underline;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 3px;
  transition: color 180ms ease;
}
.rt-inhalt a[href^="mailto"]:hover,
.rt-inhalt a[href^="tel:"]:hover,
.rt-inhalt a[href^="http"]:hover,
.rt-inhalt a[href^="/"]:hover {
  color: var(--gold-deep);
}

/* Die Anschrift des Medieninhabers steht abgesetzt: sie ist die
   Pflichtangabe, die Besucher hier tatsaechlich suchen. */
.rt-block {
  margin: 0 0 22px;
  padding: 22px 24px;
  background: rgba(24, 24, 22, 0.045);
  border-left: 2px solid var(--gold);
}
.rt-block p {
  margin: 0;
}
.rt-block p + p {
  margin-top: 12px;
}

.rt-daten {
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: minmax(150px, 34%) 1fr;
  gap: 0;
}
.rt-daten dt {
  padding: 11px 0;
  border-top: 1px solid var(--line-hell);
  color: var(--grau);
  font-size: 13px;
}
.rt-daten dd {
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid var(--line-hell);
  font-size: 15px;
}

/* Angaben, die noch niemand geliefert hat, werden nicht erfunden und
   nicht stillschweigend weggelassen — sie stehen sichtbar als Luecke
   da, damit sie vor dem Online-Gang auffallen. */
.rt-offen {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed var(--gold-deep);
  background: rgba(201, 162, 75, 0.12);
  /* Nicht --gold-deep und auch nicht --gold-text: auf der goldgetoenten
     Flaeche kommen beide nur auf 3,75 beziehungsweise 4,3:1, und die
     Marke ist 12px klein. Der Textton traegt hier. */
  color: var(--anthracite);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.rt-hinweis {
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding: 20px 22px;
  border: 1px dashed var(--gold-deep);
  color: var(--grau);
  font-size: 13.5px;
  line-height: 1.7;
}
.rt-hinweis b {
  color: var(--anthracite);
}

/* Der schmale `.rt-fuss` — eine Zeile mit zehn Links — ist am
   25.08.2026 weggefallen. Alle Seiten tragen jetzt denselben grossen
   Fuss wie die Startseite; sein Stil steht in assets/fuss.css. */

@media (max-width: 620px) {
  .rt-daten {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .rt-daten dt {
    padding-bottom: 0;
    border-top: 1px solid var(--line-hell);
  }
  .rt-daten dd {
    padding-top: 2px;
    border-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}