/* renatesautermeister.de – Neubau 2026 (octasys). Werte aus dem bisherigen Template (Artisteer 2015) uebernommen. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2');
}

:root {
  --rs-grau: #a0a0a0;
  --rs-aktiv: #b6bfc9;
  --rs-blatt: #fdfefb;
  --rs-text: #333;
  --rs-titel: #999;
  --rs-linie: #e3e3e3;
  --rs-link: #8a8a8a;
  --rs-breite: 1200px;
  --rs-schrift: 'Open Sans', 'Arial Unicode MS', Helvetica, Arial, sans-serif;
}

html { font-size: 16px; }
body.rs {
  margin: 0;
  background: #fff;
  color: var(--rs-text);
  font-family: var(--rs-schrift);
  font-size: 1.05rem;
  line-height: 1.55;
}
.rs a { color: var(--rs-link); text-decoration: none; }
.rs a:hover, .rs a:focus { color: #555; text-decoration: underline; }
.rs img { max-width: 100%; height: auto; }

.rs-sprung { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 1000; }
.rs-sprung:focus { left: 1rem; }

/* ---------- Menueleiste oben ---------- */
.rs-leiste {
  background: var(--rs-grau);
  box-shadow: 0 3px 6px rgba(80, 80, 80, .4);
  position: relative;
  z-index: 50;
}
.rs-leiste-innen { width: 90%; max-width: var(--rs-breite); margin: 0 auto; display: flex; justify-content: flex-end; }
.rs-menue ul.mod-menu { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.rs-menue ul.mod-menu > li > a,
.rs-menue ul.mod-menu > li > span {
  display: block;
  height: 40px;
  line-height: 39px;
  padding: 0 25px;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.05rem;
  text-decoration: none;
}
.rs-menue ul.mod-menu > li.active > a,
.rs-menue ul.mod-menu > li > a:hover,
.rs-menue ul.mod-menu > li > a:focus { background: var(--rs-aktiv); color: #fff; text-decoration: none; }
.rs-menue ul.mod-menu ul { display: none; }
.rs-burger { display: none; }

/* ---------- Kopf mit Schriftzug ---------- */
.rs-kopf { width: 90%; max-width: var(--rs-breite); margin: 0 auto; height: 150px; display: flex; align-items: center; }
.rs-logo { display: inline-flex; flex-direction: column; align-items: flex-end; margin-left: 44px; line-height: 0; }
.rs-logo:hover { text-decoration: none; }
.rs-logo-name { width: 443px; }
.rs-logo-jahre { width: 225px; margin-top: -14px; }

/* ---------- Karte: Inhalt + Seitenspalte ---------- */
.rs-blatt {
  width: 90%;
  max-width: var(--rs-breite);
  margin: -20px auto 0;
  padding: 40px;
  background: var(--rs-blatt);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, .3);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  box-sizing: border-box;
}
.rs-mit-seite .rs-blatt { grid-template-columns: minmax(0, 1fr) 380px; }
.rs-inhalt { padding-right: 40px; min-width: 0; text-align: left; }
.rs-ohne-seite .rs-inhalt { padding-right: 0; }
.rs-seite { border-left: 4px solid var(--rs-linie); padding-left: 48px; min-width: 0; }

/* Ueberschriften wie bisher: grau, Grossbuchstaben */
.rs h1, .rs h2, .rs h3, .rs h4, .rs h5, .rs h6 { font-family: var(--rs-schrift); color: var(--rs-titel); font-weight: 400; text-transform: uppercase; }
.rs .page-header h1, .rs .page-header h2, .rs .item-title, .rs h1 { font-size: 1.95rem; margin: 0 0 .9rem; line-height: 1.2; }
.rs .page-header { margin: 0; padding: 0; border: 0; }
.rs-inhalt h2 { font-size: 1.95rem; }
.rs-inhalt h3 { font-size: 1.1rem; font-weight: 700; }
.rs-inhalt h4, .rs-inhalt h5 { font-size: 1rem; font-weight: 700; }
.rs .page-header a, .rs .item-title a { color: var(--rs-titel); }

/* Beitraege / Blog */
.rs .blog-item, .rs .items-leading > div, .rs .item-content { margin-bottom: 1.5rem; }
.rs .blog-items, .rs .items-leading { display: block; }
/* Blog untereinander (z. B. Aktuell): Beitraege wie bisher mit feiner Linie trennen, schwebende Bilder abschliessen */
.rs .blog-items:not([class*="columns-"]):not([class*="masonry-"]) > .blog-item,
.rs .items-leading > .blog-item { display: flow-root; border-bottom: 1px solid #e5e5e5; padding-bottom: 1.5rem; margin-bottom: 2rem; }
.rs .item-content, .rs .com-content-article__body { display: flow-root; }
.rs .item-image, .rs .item-image img { max-width: 100%; }
/* Blog in Spalten (Menueeinstellung "Spalten"), z. B. Fotografie 3, Fotos 4 */
.rs .blog-items[class*="columns-"], .rs .blog-items[class*="masonry-"] { display: grid; gap: 1.5rem 2rem; align-items: start; }
.rs .blog-items.columns-2, .rs .blog-items.masonry-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rs .blog-items.columns-3, .rs .blog-items.masonry-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs .blog-items.columns-4, .rs .blog-items.masonry-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rs .blog-items[class*="columns-"] .blog-item, .rs .blog-items[class*="masonry-"] .blog-item { margin: 0; }
.rs .blog-items[class*="columns-"] .item-image img, .rs .blog-items[class*="masonry-"] .item-image img { width: 100%; }
/* Album-Seite: Menue-Ueberschrift "Fotos" nicht ueber dem Albumtitel wiederholen */
.itemid-199 .com-content-article h1 { display: none; }
/* Fotos-Uebersicht: Kacheln mit Rahmen wie in der alten Galerie */
.rs .itemid-199 .blog-item, .itemid-199 .rs-inhalt .blog-item { text-align: center; }
.itemid-199 .rs-inhalt .blog-item .item-image { margin: 0 0 .4rem; background: #fff; padding: 6px; box-shadow: 0 0 3px rgba(0,0,0,.25); }
.itemid-199 .rs-inhalt .blog-item .item-image img { aspect-ratio: 1; object-fit: cover; }
.itemid-199 .rs-inhalt .blog-item h2 { font-size: .9rem; text-transform: none; line-height: 1.3; margin: 0; }
.rs .item-image { margin: 0 0 1rem; float: none; }
/* Menues: Joomla 6 setzt .nav (flex) und klappt Untermenues zu - hier wie bisher untereinander und offen */
.rs-seite ul.mod-menu, .rs-fuss ul.mod-menu { display: block; }
.rs-seite ul.mod-menu li, .rs-fuss ul.mod-menu li { display: block; }
.rs .mod-menu__toggle-sub { display: none; }
.rs-seite .mod-menu__sub { display: block !important; font-size: inherit; }
.rs-fuss .mod-menu__sub, .rs-menue .mod-menu__sub { display: none !important; }
.rs .pagenavigation, .rs nav.pagenavigation, .rs .pager { display: none; }
.rs .readmore a, .rs a.btn-secondary { background: none; border: 0; padding: 0; color: var(--rs-link); }
.rs .readmore a::before { content: '» '; }
.rs dl.article-info, .rs .com-content-article__navigation { display: none; }
/* Bearbeiten-Symbol: Joomla zeigt es nur angemeldeten Redakteuren (Frau Jungwirth pflegt ueber die Seite) */
.rs .icons { float: right; margin: 0 0 .5rem 1rem; }
.rs .icons .btn, .rs .icons a { font-size: .85rem; color: var(--rs-link); }
.rs .com-content-article__body img, .rs .blog-item img { border: 0; }
.rs figure { margin: 0 0 1rem; }
.rs figcaption, .rs .rs-bildtext { font-size: .8rem; color: #777; }
.rs table { max-width: 100%; }
.rs .pagination { margin-top: 1.5rem; }
.rs .page-link { color: var(--rs-link); }
.rs .page-item.active .page-link { background: var(--rs-aktiv); border-color: var(--rs-aktiv); color: #fff; }

/* Brotkrumen klein unter dem Inhalt (wie bisher) */
.rs .mod-breadcrumbs__wrapper { margin-top: 2rem; }
.rs .mod-breadcrumbs { background: none; padding: 0 !important; margin: 0; font-size: .8rem; }
.rs .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { content: '▸'; color: #e8a33c; }
.rs .mod-breadcrumbs .float-start { margin-right: .35rem; }

/* Fotonachweise unter dem Inhalt */
.rs-inhalt .rs-nachweis, .rs-inhalt > .moduletable { font-size: .8rem; color: var(--rs-titel); margin-top: 1.5rem; }

/* ---------- Seitenspalte ---------- */
.rs-seite .moduletable { margin-bottom: 2rem; }
.rs-seite .moduletable > h3 { font-size: 1.95rem; color: var(--rs-titel); text-transform: uppercase; font-weight: 400; margin: 0 0 1rem; }
.rs-seite ul.mod-menu { list-style: none; margin: 0; padding: 0 0 0 14px; }
.rs-seite ul.mod-menu ul { list-style: none; margin: 0; padding: 0 0 0 13px; }
.rs-seite ul.mod-menu a { color: var(--rs-titel); font-size: 1.05rem; line-height: 1.6; display: inline-block; }
.rs-seite ul.mod-menu li.current > a, .rs-seite ul.mod-menu a:hover { color: #555; }
.rs-seite .mod-articlesnews__item, .rs-seite .newsflash-item { margin-bottom: 1.5rem; }
.rs-seite .newsflash-image, .rs-seite figure { margin: 0 0 1rem; }

/* Kasten "Informationen ueber aktuelle Projekte" auf der Startseite */
.rs .rs-hinweiskasten { display: block; background: #e8e8e8; color: var(--rs-titel); text-align: center; text-transform: uppercase; font-weight: 700; font-size: 1.25rem; line-height: 1.35; padding: 2rem 1.5rem; }
.rs a.rs-hinweiskasten:hover { text-decoration: none; background: #dedede; color: #777; }

/* Portrait-Slider (Biografie) */
.rs-slider { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.rs-slider figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; display: flex; align-items: center; justify-content: center; }
.rs-slider figure.aktiv { opacity: 1; }
.rs-slider img { max-height: 100%; width: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .rs-slider figure { transition: none; } }

/* ---------- Galerien (Ersatz fuer Phoca Gallery) ---------- */
.rs-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 1rem 0; }
.rs-galerie a { display: block; background: #fff; padding: 6px; box-shadow: 0 0 3px rgba(0, 0, 0, .25); }
.rs-galerie a:hover { box-shadow: 0 0 6px rgba(0, 0, 0, .45); }
.rs-galerie img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.rs-galerie-vorschau { grid-template-columns: repeat(2, minmax(0, 200px)); }
.rs-galerie-link { font-size: .9rem; }
dialog.rs-lightbox { border: 0; padding: 0; background: transparent; max-width: 95vw; max-height: 95vh; }
dialog.rs-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
dialog.rs-lightbox img { max-width: 92vw; max-height: 86vh; display: block; margin: 0 auto; }
dialog.rs-lightbox .rs-lb-text { color: #eee; text-align: center; font-size: .9rem; margin-top: .5rem; }
dialog.rs-lightbox button { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.4); color: #fff; border: 0; font-size: 2rem; width: 3rem; height: 4rem; cursor: pointer; }
dialog.rs-lightbox .rs-lb-zurueck { left: 1rem; }
dialog.rs-lightbox .rs-lb-vor { right: 1rem; }
dialog.rs-lightbox .rs-lb-zu { top: 1.5rem; right: 1rem; transform: none; height: 3rem; }

/* ---------- Fussbereich ---------- */
.rs-fuss { background: var(--rs-grau); color: var(--rs-blatt); margin-top: 50px; box-shadow: 0 -3px 6px rgba(80, 80, 80, .4); padding: 40px 0 10px; }
.rs-fuss-innen { width: 90%; max-width: var(--rs-breite); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
.rs-fuss h3 { color: var(--rs-blatt); font-size: 1.45rem; text-transform: uppercase; font-weight: 400; margin: 0 0 1rem; }
.rs-fuss a { color: var(--rs-blatt); }
.rs-fuss a:hover { color: #fff; }
.rs-fuss p { margin: 0 0 .8rem; }
.rs-fuss ul.mod-menu { list-style: none; margin: 0 0 1rem; padding: 0; }
.rs-fuss ul.mod-menu ul { display: none; }
.rs-fuss ul.mod-menu li { line-height: 1.35; }
.rs-fuss .mod-finder input[type="search"], .rs-fuss .mod-finder input[type="text"] { border-radius: 0; border: 1px solid #ddd; width: 220px; max-width: 100%; text-transform: uppercase; }
.rs-fuss .mod-finder label { position: absolute; left: -9999px; }
.rs-design { text-align: center; font-size: .7rem; margin: 1.5rem 0 0; color: #fff; }
.rs-design span { font-size: .55rem; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .rs-leiste-innen { width: 100%; justify-content: flex-end; position: relative; min-height: 44px; }
  .rs-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin: 0 8px 0 auto; background: #333; border: 0; border-radius: 6px; padding: 0 11px; cursor: pointer; }
  .rs-burger span { display: block; width: 22px; height: 3px; background: #fff; border-radius: 2px; flex: 0 0 3px; }
  .rs-menue { display: none; position: absolute; top: 44px; left: 0; right: 0; background: var(--rs-grau); box-shadow: 0 6px 8px rgba(0,0,0,.25); }
  .rs-leiste.offen .rs-menue { display: block; }
  .rs-menue ul.mod-menu { flex-direction: column; }
  .rs-menue ul.mod-menu > li > a { height: auto; line-height: 1.4; padding: .75rem 1.25rem; border-top: 1px solid rgba(255,255,255,.25); }
  .rs-kopf { height: auto; padding: 1.25rem 0; justify-content: center; }
  .rs-logo { margin: 0; max-width: 90vw; }
  .rs-logo-name { width: min(443px, 82vw); }
  .rs-logo-jahre { width: min(225px, 42vw); margin-top: -2.5vw; }
  .rs-blatt, .rs-mit-seite .rs-blatt { width: auto; margin: 0 4px; padding: 24px 20px; grid-template-columns: minmax(0, 1fr); }
  .rs-inhalt { padding-right: 0; }
  .rs-seite { border-left: 0; border-top: 4px solid var(--rs-linie); padding: 1.5rem 0 0; margin-top: 2rem; }
  .rs .page-header h1, .rs .page-header h2, .rs h1, .rs-inhalt h2, .rs-seite .moduletable > h3 { font-size: 1.55rem; }
  .rs-fuss-innen { grid-template-columns: 1fr; gap: 1rem; }
  .rs-galerie { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .rs .blog-items.columns-3, .rs .blog-items.columns-4, .rs .blog-items.masonry-3, .rs .blog-items.masonry-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}