/* rheinblick, gemeinsame Ebene. Schriften lokal, Navigation, Fußzeile.
   Diese Datei gilt netzweit. Seitenspezifisches CSS steht weiterhin in der Seite. */

/* ---- Schriften, lokal gehostet. Keine Verbindung zu Google. ---- */
@font-face{font-family:'Montserrat';src:url('/assets/fonts/Montserrat-Variable.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Prata';src:url('/assets/fonts/Prata-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Gavoline';src:url('/assets/fonts/Gavoline.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}

/* ---- Ueberschriften: auf dem Desktop kein erzwungener Umbruch ----
   Die Entwurfsseiten bremsen jede Ueberschrift auf eine feste Zeichenzahl
   (h1 auf 17ch, h2 auf 30ch). Auf dem Handy ist das richtig, auf dem Desktop
   nicht: die Startseiten-Ueberschrift lief ueber fuenf Zeilen, obwohl daneben
   ueber 600 Punkte leer blieben, und die Abschnittsueberschriften brachen mit
   einem haengenden Rest in die zweite Zeile.

   Ab 981 Punkten gilt deshalb die Spaltenbreite statt der Zeichenzahl.
   `text-wrap: balance` steht schon in den Seiten und verteilt einen
   unvermeidbaren Umbruch gleichmaessig. Gilt fuer deutsche und englische
   Seiten, die englischen entstehen aus denselben Vorlagen. */
@media (min-width:981px){
  /* Mit Ausrufezeichen, weil jede Seite ihre eigene Bremse setzt und die
     Namen sich unterscheiden (h1.big, .head h1, .sec h2, .close h2). Diese
     Datei soll hier das letzte Wort haben, sonst jagt man den Umbruch von
     Seite zu Seite hinterher. */
  h1, h2{max-width:100% !important}
  /* Die Schlagzeile der Startseite besteht aus zwei Saetzen und passt auch
     ueber die volle Breite nicht in eine Zeile. Dann soll sie wenigstens
     zwischen den Saetzen brechen und nicht mitten im zweiten ('Ab 12 /
     Minuten'). Auf dem Handy bleibt der Satz inline und bricht normal. */
  h1 .satz2{display:block}
  /* Der Ueber-uns-Block ist zweispaltig. Die englische Ueberschrift war 26
     Punkte breiter als ihre Spalte und brach deshalb als einzige noch um.
     Das Bild links gibt die Punkte ab, es ist ein Hochformat und vertraegt es. */
  body .about{grid-template-columns:minmax(230px,.66fr) 1.35fr}
}

/* ---- Kachelbilder der Uebersichten ---- */
.cell .shot img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* ---- Bildergalerie der Objektseiten ---- */
.gal img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.gal figure.lead img{aspect-ratio:16/9}

/* ---- Navigation: steht oben, laeuft nicht mit ---- */
nav.rb-nav{position:static;display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--s3) var(--s5);padding:var(--s4) var(--sp);
  background:var(--ink);color:#EDE9E0;font-family:var(--f);font-size:var(--t3);
  font-weight:500;margin:0}
nav.rb-nav a{color:#EDE9E0;text-decoration:none}
nav.rb-nav .rb-mark{font-family:var(--logo);font-size:var(--t6);font-weight:400;
  letter-spacing:.02em;line-height:1;flex:0 0 auto}
nav.rb-nav ul.rb-links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  list-style:none;margin:0;padding:0;opacity:.78}
nav.rb-nav ul.rb-links li{margin:0}
nav.rb-nav ul.rb-links li.on>a{opacity:1;border-bottom:1px solid var(--bronze-l)}
nav.rb-nav .rb-lang{margin-left:auto;font-family:var(--m);font-size:var(--t2);
  letter-spacing:.12em;opacity:.55;flex:0 0 auto}
nav.rb-nav .rb-lang b{font-weight:500;color:#EDE9E0;opacity:1}
nav.rb-nav .rb-cta{flex:0 0 auto;padding:var(--s2) var(--s4);
  border:1px solid rgba(237,233,224,.45);border-radius:2px;white-space:nowrap}
nav.rb-nav .rb-cta:hover{background:#EDE9E0;color:var(--ink)}
@media(max-width:760px){
  nav.rb-nav{padding:var(--s3) var(--s4)}
  nav.rb-nav ul.rb-links{order:3;width:100%;font-size:var(--t2);gap:var(--s2) var(--s4)}
  nav.rb-nav .rb-lang{margin-left:auto}
}

/* ---- Schmales Band, erscheint erst nach dem ersten Bildschirm.
       Nur Wortmarke und Anfragen. Abschalten: diesen Block und das
       Skript am Seitenende entfernen. ---- */
.rb-sticky{position:fixed;left:0;right:0;top:0;z-index:70;display:flex;
  align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s2) var(--sp);background:rgba(20,29,41,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#EDE9E0;font-family:var(--f);font-size:var(--t3);
  border-bottom:1px solid var(--line-d);
  transform:translateY(-101%);transition:transform .25s ease}
.rb-sticky.an{transform:none}
.rb-sticky a{color:#EDE9E0;text-decoration:none}
.rb-sticky .rb-mark{font-family:var(--logo);font-size:var(--t5);letter-spacing:.02em}
.rb-sticky .rb-cta{padding:var(--s2) var(--s4);border-radius:2px;
  border:1px solid rgba(237,233,224,.45)}
.rb-sticky .rb-cta:hover{background:#EDE9E0;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.rb-sticky{transition:none}}

/* ---- Fusszeile ---- */
footer.rb-foot{display:block;background:#070C12;color:#7E8998;
  padding:calc(var(--sp) + var(--s4)) var(--sp) var(--sp);
  font-family:var(--f);font-size:var(--t3);font-weight:400;margin:0}
footer.rb-foot .rb-cols{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s7) var(--s6);max-width:1240px;margin:0 auto}
@media(min-width:700px){footer.rb-foot .rb-cols{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1060px){footer.rb-foot .rb-cols{grid-template-columns:repeat(4,1fr)}}
footer.rb-foot h4{font-family:var(--m);font-size:var(--t1);letter-spacing:.15em;
  text-transform:uppercase;color:#EDE9E0;margin:0 0 var(--s3);font-weight:500}
footer.rb-foot a{display:block;color:#7E8998;text-decoration:none;padding:var(--s1) 0}
footer.rb-foot a:hover{color:#EDE9E0}
footer.rb-foot .rb-nap{font-style:normal;margin-top:var(--s3);line-height:1.9}
footer.rb-foot .rb-nap b{display:block;color:#EDE9E0;font-weight:600;margin-bottom:var(--s1)}
footer.rb-foot .rb-nap a{display:inline;color:var(--bronze-l);padding:0}
footer.rb-foot .rb-base{max-width:1240px;margin:var(--s6) auto 0;
  padding-top:var(--s4);border-top:1px solid var(--line-d);
  font-family:var(--m);font-size:var(--t2)}

/* ---- Grundsockel ---- */
:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
form.form button.btn{font:inherit;cursor:pointer}