* { box-sizing: border-box; }
html { border-top: 8px solid #000; }
body { margin: 0; font: 12px Arial, sans-serif; color: #535353; background: #fff; }
a { color: #000; }
a:focus-visible, button:focus-visible { outline: 3px solid #a13c30; outline-offset: 3px; }
.layout { display: grid; grid-template-columns: 35% 65%; }
.sidebar { text-align: right; min-width: 0; }
.logo { height: 130px; padding-top: 30px; }
.logo img { max-width: 100%; height: auto; }
nav ul { list-style: none; padding: 0; margin: 0; }
nav li { height: 34px; margin: 0; }
nav a { display: block; height: 33px; }
nav a:hover, nav a[aria-current="page"] { background: #0d0d0d; }
nav img { width: 350px; max-width: 100%; height: 33px; object-fit: contain; object-position: right; vertical-align: top; }
.intro { width: 350px; max-width: 100%; margin: 50px 0 0 auto; padding-left: 10px; text-align: left; }
h1 { font-size: 12px; margin: 0 0 20px; }
h2 { font: normal 35px 'Century Gothic', Arial, sans-serif; margin: 0 0 20px; }
p { margin: 0 0 10px; }
.content { width: 620px; max-width: calc(100% - 23px); margin: 20px 0 0 23px; }
.content.start { margin-top: 110px; margin-left: 20px; }
.gallery-row { display: flex; flex-wrap: wrap; }
figure { margin: 0; }
.gallery-row figure { width: 192px; min-height: 220px; padding: 10px 4px 0; text-align: center; }
.gallery-row img { max-width: 100%; height: 135px; width: auto; object-fit: contain; }
.gallery-row figcaption { padding-top: 5px; }
.gallery-row figure:has(img[src$=".jpeg"]) img { height: 200px; }
.slideshow { margin-left: 80px; width: 528px; max-width: calc(100% - 80px); }
.slideshow a { display: none; }
.slideshow a:first-child, .slideshow a.active { display: block; }
.slideshow:has(.active) a:first-child:not(.active) { display: none; }
.slideshow img { max-width: 100%; height: auto; display: block; }
.lightbox { position: fixed; inset: 0; margin: auto; border: 0; padding: 25px 55px; max-width: 95vw; max-height: 95vh; background: #fff; color: #333; }
.lightbox::backdrop { background: rgba(0,0,0,.85); }
.lightbox figure { text-align: center; }
.lightbox img { display: block; max-width: 100%; max-height: 75vh; width: auto; height: auto; margin: auto; }
.lightbox figcaption { padding-top: 8px; }
.lightbox button { position: absolute; border: 0; background: transparent; color: #333; cursor: pointer; font: 32px Arial,sans-serif; }
.close { right: 8px; top: 3px; }.previous { left: 10px; top: 45%; }.next { right: 10px; top: 45%; }
@media (max-width: 760px) {
 .layout { display: block; }
 .sidebar { text-align: center; }
 .logo { height: auto; padding: 25px 15px; }
 nav ul { display: flex; flex-wrap: wrap; justify-content: center; background: #f4f4f4; }
 nav li { height: 34px; }
 nav img { width: auto; max-width: 100%; }
 .intro { width: auto; margin: 30px 20px; padding: 0; }
 .content, .content.start { width: auto; max-width: none; margin: 30px 20px; }
 .gallery-row { justify-content: center; }
 .gallery-row figure { width: min(192px, 50%); }
 .slideshow { margin: 0 auto; max-width: 100%; }
}
@media (max-width: 390px) { .gallery-row figure { width: 100%; } }

nav .privacy-link a { display: flex; justify-content: flex-end; text-decoration: none; color: #111; }
nav .privacy-link span { display: flex; align-items: center; width: min(350px, 100%); height: 33px; padding: 0 10px; background: #fff; font: 18px "Century Gothic", Arial, sans-serif; text-align: left; }
.privacy { padding-bottom: 40px; line-height: 1.55; overflow-wrap: anywhere; }
.privacy h1 { font-size: 20px; margin-bottom: 24px; }
.privacy h2 { font: bold 16px Arial, sans-serif; padding: 0; margin: 28px 0 12px; }
.privacy h3 { font-size: 13px; margin: 20px 0 8px; }
.privacy p { margin-bottom: 12px; }
.privacy ul { padding-left: 22px; margin-bottom: 12px; }
@media (max-width: 760px) { nav .privacy-link { width: min(350px, 100%); } }

/* Textbasierter Startseiten-Link: keine Grafik für Hover oder aktiven Zustand. */
nav a:has(.nav-label) { display: flex; justify-content: flex-end; text-decoration: none; color: #111; }
nav .nav-label { display: flex; align-items: center; width: min(350px, 100%); height: 33px; padding: 0 10px; background: #fff; font: 18px "Century Gothic", Arial, sans-serif; text-align: left; }
@media (max-width: 760px) { nav li:has(.nav-label) { width: min(350px, 100%); } }