body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
#wrapper{width:960px;margin:0 auto}.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{float:left;margin-left:10px;margin-right:10px;display:inline}.mod_article [class^=ce_],.mod_article [class*=" ce_"],.mod_article [class^=content-],.mod_article [class*=" content-"],.mod_article [class^=mod_],.mod_article [class*=" mod_"],.mod_article [class^=module-],.mod_article [class*=" module-"]{margin-left:10px;margin-right:10px}.ce_sliderStart>.content-slider{margin-left:0;margin-right:0}.mod_article .mod_newsreader,.mod_article .mod_eventreader{margin-left:0;margin-right:0}.mod_article [class^=layout_]>*,.mod_article [class*=" layout_"]>*,.mod_article [class^=event_]>*,.mod_article [class*=" event_"]>*{margin-left:10px;margin-right:10px}.mod_article.grid1,.mod_article.grid2,.mod_article.grid3,.mod_article.grid4,.mod_article.grid5,.mod_article.grid6,.mod_article.grid7,.mod_article.grid8,.mod_article.grid9,.mod_article.grid10,.mod_article.grid11,.mod_article.grid12{margin-left:0;margin-right:0}#main .inside{overflow:hidden}.grid1{width:60px}.grid2{width:140px}.grid3{width:220px}.grid4{width:300px}.grid5{width:380px}.grid6{width:460px}.grid7{width:540px}.grid8{width:620px}.grid9{width:700px}.grid10{width:780px}.grid11{width:860px}.grid12{width:940px}.mod_article.grid1{width:80px}.mod_article.grid2{width:160px}.mod_article.grid3{width:240px}.mod_article.grid4{width:320px}.mod_article.grid5{width:400px}.mod_article.grid6{width:480px}.mod_article.grid7{width:560px}.mod_article.grid8{width:640px}.mod_article.grid9{width:720px}.mod_article.grid10{width:800px}.mod_article.grid11{width:880px}.mod_article.grid12{width:960px}.offset1{margin-left:90px!important}.offset2{margin-left:170px!important}.offset3{margin-left:250px!important}.offset4{margin-left:330px!important}.offset5{margin-left:410px!important}.offset6{margin-left:490px!important}.offset7{margin-left:570px!important}.offset8{margin-left:650px!important}.offset9{margin-left:730px!important}.offset10{margin-left:810px!important}.offset11{margin-left:890px!important}.offset12{margin-left:970px!important}.mod_article.offset1{margin-left:80px!important}.mod_article.offset2{margin-left:160px!important}.mod_article.offset3{margin-left:240px!important}.mod_article.offset4{margin-left:320px!important}.mod_article.offset5{margin-left:400px!important}.mod_article.offset6{margin-left:480px!important}.mod_article.offset7{margin-left:560px!important}.mod_article.offset8{margin-left:640px!important}.mod_article.offset9{margin-left:720px!important}.mod_article.offset10{margin-left:800px!important}.mod_article.offset11{margin-left:880px!important}.mod_article.offset12{margin-left:960px!important}@media (min-width:768px) and (max-width:979px){#wrapper{width:744px}.grid1{width:42px}.grid2{width:104px}.grid3{width:166px}.grid4{width:228px}.grid5{width:290px}.grid6{width:352px}.grid7{width:414px}.grid8{width:476px}.grid9{width:538px}.grid10{width:600px}.grid11{width:662px}.grid12{width:724px}.mod_article.grid1{width:62px}.mod_article.grid2{width:124px}.mod_article.grid3{width:186px}.mod_article.grid4{width:248px}.mod_article.grid5{width:310px}.mod_article.grid6{width:372px}.mod_article.grid7{width:434px}.mod_article.grid8{width:496px}.mod_article.grid9{width:558px}.mod_article.grid10{width:620px}.mod_article.grid11{width:682px}.mod_article.grid12{width:744px}.offset1{margin-left:72px!important}.offset2{margin-left:134px!important}.offset3{margin-left:196px!important}.offset4{margin-left:258px!important}.offset5{margin-left:320px!important}.offset6{margin-left:382px!important}.offset7{margin-left:444px!important}.offset8{margin-left:506px!important}.offset9{margin-left:568px!important}.offset10{margin-left:630px!important}.offset11{margin-left:692px!important}.offset12{margin-left:754px!important}.mod_article.offset1{margin-left:62px!important}.mod_article.offset2{margin-left:124px!important}.mod_article.offset3{margin-left:186px!important}.mod_article.offset4{margin-left:248px!important}.mod_article.offset5{margin-left:310px!important}.mod_article.offset6{margin-left:372px!important}.mod_article.offset7{margin-left:434px!important}.mod_article.offset8{margin-left:496px!important}.mod_article.offset9{margin-left:558px!important}.mod_article.offset10{margin-left:620px!important}.mod_article.offset11{margin-left:682px!important}.mod_article.offset12{margin-left:744px!important}}@media (max-width:767px){#wrapper{width:auto}.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{float:none!important;display:block!important;width:auto!important}.offset1,.offset2,.offset3,.offset4,.offset5,.offset6,.offset7,.offset8,.offset9,.offset10,.offset11,.offset12{margin-left:10px!important}}
#mbOverlay{position:fixed;z-index:9998;top:0;left:0;width:100%;height:150%;background-color:#000;cursor:pointer}#mbOverlay.mbOverlayOpaque{background:url(../../assets/mediabox/images/80.png)}#mbOverlay.mbOverlayAbsolute{position:absolute}#mbOverlay.mbMobile{position:absolute;background-color:transparent}#mbBottom.mbMobile{line-height:24px;font-size:16px}#mbCenter{position:absolute;z-index:9999;left:50%;padding:10px;background-color:#000;-webkit-border-radius:10px;-khtml-border-radius:10px;-moz-border-radius:10px;border-radius:10px;filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000');-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')";-webkit-box-shadow:0 5px 20px rgba(0,0,0,.5);-khtml-box-shadow:0 5px 20px rgba(0,0,0,.5);-moz-box-shadow:0 5px 20px rgba(0,0,0,.5);box-shadow:0 5px 20px rgba(0,0,0,.5)}#mbCenter.mbLoading{background:#000 url(../../assets/mediabox/images/loading-dark.gif) no-repeat center;-webkit-box-shadow:none;-khtml-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#mbMedia{position:relative;left:0;top:0;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;line-height:20px;font-size:12px;color:#fff;text-align:left;background-position:center center;background-repeat:no-repeat}#mbBottom{line-height:20px;font-size:12px;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;text-align:left;color:#999;min-height:20px;padding:10px 0 0}#mbTitle,#mbPrevLink,#mbNextLink,#mbCloseLink{display:inline;color:#fff;font-weight:700}#mbNumber{display:inline;color:#999;font-size:.8em;margin:auto 10px}#mbCaption{display:block;color:#999;line-height:1.6em;font-size:.8em}#mbPrevLink,#mbNextLink,#mbCloseLink{float:right;outline:0;margin:0 0 0 10px;font-weight:400}#mbPrevLink b,#mbNextLink b,#mbCloseLink b{color:#eee;font-weight:700;text-decoration:underline}#mbPrevLink big,#mbNextLink big,#mbCloseLink big{color:#eee;font-size:1.4em;font-weight:700}#mbBottom a,#mbBottom a:link,#mbBottom a:visited{text-decoration:none;color:#ddd}#mbBottom a:hover,#mbBottom a:active{text-decoration:underline;color:#fff}#mbError{position:relative;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;line-height:20px;font-size:12px;color:#fff;text-align:center;border:10px solid #700;padding:10px 10px 10px;margin:20px;-webkit-border-radius:5px;-khtml-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#mbError a,#mbError a:link,#mbError a:visited,#mbError a:hover,#mbError a:active{color:#d00;font-weight:700;text-decoration:underline}
/* =========================================================
SCHRIFT
========================================================= */

@font-face {
font-family: "Montserrat";
src: url("/files/fonts/montserrat/Montserrat-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Montserrat";
src: url("/files/fonts/montserrat/Montserrat-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Montserrat";
src: url("/files/fonts/montserrat/Montserrat-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}


/* =========================================================
GRUNDLAYOUT
========================================================= */

html,
body {
margin: 0;
padding: 0;
}

body {
font-family: "Montserrat", Arial, sans-serif;
color: #222;
background-color: #000;
}

#wrapper {
background-color: #fff;
}

h1,
h2,
h3 {
font-weight: 400;
}

h2 {
	/*font-size:12px;*/
	
}


/* =========================================================
WRAPPER – DESKTOP
========================================================= */

@media (min-width: 769px) {
#wrapper {
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
}


/* =========================================================
HEADER
========================================================= */

#header {
padding: 25px 30px;
}

#header .inside {
width: 100%;
max-width: 1200px;
min-height: 80px;
margin: 0 auto;

display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}

#header .content-text {
flex: 0 0 auto;
margin: 0;
}

#header .main-nav {
flex: 0 0 auto;
margin: 0;
}


/* Logo */

#header .logo {
display: flex;
flex-direction: column;
align-items: center;

margin: 0;
font-family: "Montserrat", Arial, sans-serif;
font-size: 28px;
font-weight: 400;
line-height: 1.15;
white-space: nowrap;
}

#header .logo small {
display: block;
margin-top: 4px;

font-family: "Montserrat", Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
}


/* Navigation */

#header .main-nav ul,
#header .mod_navigation ul {
display: flex;
align-items: center;
gap: 30px;

margin: 0;
padding: 0;
list-style: none;
}

#header .main-nav li,
#header .mod_navigation li {
margin: 0;
}

#header .main-nav a,
#header .main-nav strong,
#header .mod_navigation a {
font-family: "Montserrat", Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.04em;
text-decoration: none;
color: #555;
/*text-transform: uppercase;*/
}

#header .mod_navigation a:hover,
#header .main-nav a:hover {
opacity: 0.6;
text-decoration: underline;
text-underline-offset: 3px;
}





/* =========================================================
HERO
========================================================= */

.hero {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}


/* Bild */

.hero-image {
width: 100%;
}

.hero-image img {
display: block;
width: 100%;
height: auto;
}


/* Hero-Inhalt */

.hero-content {
position: absolute;
left: 0;
bottom: 0;

width: 100%;
padding: 70px 50px 50px;
box-sizing: border-box;

background: linear-gradient(
to top,
rgba(0, 0, 0, 0.58),
rgba(0, 0, 0, 0)
);
}

.hero-text {
max-width: 620px;
}


/* Kicker */

.hero-kicker {
display: block;
margin-bottom: 18px;

font-family: "Montserrat", Arial, sans-serif;
font-size: 12px;
line-height: 1.2;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #eee;
}


/* Überschrift */

.hero h1 {
margin: 0 0 30px;

font-family: "Montserrat", Arial, sans-serif;
font-size: clamp(32px, 4vw, 54px);
line-height: 1.08;
font-weight: 400;
letter-spacing: -0.02em;
color: #eee;
}


/* Button */

.hero-button {
display: inline-flex;
align-items: center;
gap: 14px;

padding: 12px 0;

font-family: "Montserrat", Arial, sans-serif;
font-size: 15px;
font-weight: 400;
text-decoration: none;

color: #eee;
border-bottom: 1px solid currentColor;

transition: gap 0.2s ease, opacity 0.2s ease;
}

.hero-button:hover {
gap: 20px;
opacity: 0.65;
}

.hero-button span {
font-size: 20px;
line-height: 1;
}


/* =========================================================
AUSGEWÄHLTE WERKE
========================================================= */

#works-headline h2 {
margin: 0 0 30px;
padding-top: 40px;

text-align: center;

font-size: clamp(2rem, 1.5vw, 3.2rem);
font-weight: 400;
line-height: 1.15;
text-transform: uppercase;
}


.works {
max-width: 1200px;
margin: 0 auto;
padding: 10px 30px 80px;

display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 30px;
row-gap: 45px;
}

.works .work {
margin: 0;
}

.works .work-1 {
grid-column: 2 / 6;
}

.works .work-2 {
grid-column: 6 / 9;
}

.works .work-3 {
grid-column: 9 / 12;
}

.works figure {
margin: 0;
}

.works img {
display: block;
width: 100%;
height: auto;
}

/* =========================================================
KÜNSTLER INTRO
========================================================= */

.artist-intro {
max-width: 1200px;
margin: 0 auto;
padding: 10px 30px 100px;
border-top: 1px solid #ccc;
display: grid;
grid-template-columns: repeat(12, 1fr);
}

.artist-intro-text {
grid-column: 3 / 11;
text-align: center;
}

.section-kicker {
display: block;
margin-bottom: 20px;

font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}

.artist-intro h2 {
margin: 0 0 30px;

font-size: clamp(2rem, 3.5vw, 3.2rem);
font-weight: 400;
line-height: 1.15;
}

.artist-intro p {
max-width: 650px;
margin: 0 auto 35px;

font-size: 1.05rem;
line-height: 1.8;
}

.text-link {
font-size: 0.85rem;
letter-spacing: 0.06em;
text-decoration: none;
}


/* =========================================================
AUSSTELLUNGEN
========================================================= */

.exhibitions {
max-width: 1200px;
margin: 0 auto;
padding: 110px 30px 130px;

display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 60px;
}

.exhibitions-heading {
grid-column: 2 / 6;
}

.exhibitions-heading h2 {
margin: 0;

font-size: 2rem;
font-weight: 400;
line-height: 1.2;
}

.exhibition-list {
grid-column: 7 / 12;
}

.exhibition {
display: grid;
grid-template-columns: 70px 1fr;
gap: 25px;

padding: 25px 0;
border-top: 1px solid #ccc;
}

.exhibition:last-child {
border-bottom: 1px solid #ddd;
}

.exhibition-year {
font-size: 0.8rem;
letter-spacing: 0.08em;
}

.exhibition h3 {
margin: 0 0 6px;

font-size: 1rem;
font-weight: 400;
}

.exhibition p {
margin: 0;
font-size: 0.85rem;
}


/* =========================================================
KONTAKT
========================================================= */

.contact-intro {
padding: 10px 30px 50px;
text-align: center;
border-top: 1px solid #ccc;
}

.contact-intro h2 {
margin: 0 0 20px;

font-size: clamp(2rem, 3.5vw, 3.2rem);
font-weight: 400;
}

.contact-intro p {
max-width: 600px;
margin: 0 auto 30px;
line-height: 1.7;
}


/* =========================================================
FOOTER
========================================================= */

.site-footer {
  margin-top: 40px;
  padding: 10px 30px;
  border-top: 1px solid #ccc;
}

#footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px 45px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

#footer .footer-column {
  font-size: 14px;
  line-height: 1.9;
  color: #555;
}

#footer .footer-column strong {
  display: inline-block;
  margin-bottom: 8px;
  color: #222;
  font-weight: 500;
}

#footer .footer-column a {
  color: #555;
  text-decoration: none;
  transition: color 0.2s ease;
}

#footer .footer-column a:hover {
  color: #888;
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* =========================================================
DESKTOP – WERKE
========================================================= */

@media (min-width: 769px) {

#article-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
}

#article-3 .work {
width: 100%;
grid-column: auto !important;
}

#article-3 figure {
margin: 0;
}

#article-3 img {
display: block;
width: 100%;
height: auto;
}

}


/* =========================================================
MOBILE
========================================================= */


/* =========================
MOBILES MENÜ
========================= */

/* Desktop: Button ausblenden */
.mobile-menu-toggle {
display: none;
}


@media (max-width: 768px) {

/* =========================
HEADER
========================= */

#header .inside {
display: grid !important;
grid-template-columns: 1fr auto;
align-items: start;
column-gap: 20px;
row-gap: 0;
}

/* Logo links */
#header .content-text {
grid-column: 1;
grid-row: 1;
}

/* =========================
HAMBURGER / X
========================= */

#header .mobile-menu-toggle {
grid-column: 2;
grid-row: 1;

display: flex !important;
flex-direction: column;
justify-content: space-between;

width: 30px !important;
height: 22px !important;

margin: 4px 0 0 0 !important;
padding: 0 !important;

position: relative !important;
top: auto !important;
right: auto !important;

border: 0;
background: transparent;
z-index: 1001;
}

#header .mobile-menu-toggle span {
display: block;
width: 30px;
height: 2px;
background: #000;
transition: transform .2s ease, opacity .2s ease;
}

/* =========================
NAVIGATION
========================= */

#header .main-nav {
grid-column: 1 / -1;
grid-row: 2;

display: none !important;

width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}

#header .main-nav.mobile-menu-open {
display: block !important;

width: 100% !important;
margin: 20px 0 0 0 !important;
padding: 0 !important;

background: #fff;
}

/* UL */
#header .main-nav.mobile-menu-open ul.level_1 {
display: block !important;

width: 100% !important;
margin: 0 !important;
padding: 0 !important;

list-style: none;
}

/* LI */
#header .main-nav.mobile-menu-open li {
display: block !important;

width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}

/* Links */
#header .main-nav.mobile-menu-open a,
#header .main-nav.mobile-menu-open strong {
display: block !important;

width: 100% !important;
margin: 0 !important;
padding: 7px 0 !important;

text-align: left !important;
line-height: 1.3 !important;
}

/* =========================
HAMBURGER → X
========================= */

#header .mobile-menu-toggle.menu-open span:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}

#header .mobile-menu-toggle.menu-open span:nth-child(2) {
opacity: 0;
}

#header .mobile-menu-toggle.menu-open span:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}

}



@media (max-width: 768px) {

/* Logo links ausrichten */
#header .logo {
align-items: flex-start !important;
text-align: left;
}

/* Menü etwas näher an den Header */
#header .main-nav.mobile-menu-open {
margin-top: 8px !important;
}

/* Menüpunkte kompakter */
#header .main-nav.mobile-menu-open ul.level_1 a,
#header .main-nav.mobile-menu-open ul.level_1 strong {
padding: 4px 0 !important;
line-height: 1.25 !important;
}

}

/* Footer auf schmalen Bildschirmen untereinander */
@media (max-width: 768px) {
  #footer .footer-inner {
    flex-direction: column;
    gap: 25px;
    padding: 35px 20px;
  }
}

/* Link unter der Galerie */
.works .work-link {
  grid-column: 1 / -1;
  text-align: center;
}

.works .work-link p {
  margin: 0;
}

.works .work-link .text-link {
  display: inline-block;
  margin-top: 35px;
}


/*==============================
 Galerieseite – Werke 
===============================*/
.werke{
  border-top: 1px solid #ccc;
}

.werke-einleitung {
  padding-left: 30px;	
}

.werke-gallery {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 30px 100px;
  border-top: 1px solid #ccc;
  
}

.werke-gallery ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.werke-gallery li {
  margin: 0;
  padding: 0;
}

.werke-gallery img {
  display: block;
  width: 100%;
  height: auto;
}


/* Einzelnes Werk mit Titel und Beschreibung */
.werke-einzelbild {
  max-width: 300px;
  margin: 30px auto 0;
  padding: 0 30px;
}

.werke-einzelbild img {
  display: block;
  width: 100%;
  height: auto;
}

.werke-bildtext {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 12px 30px 0;
}

.werke-bildtext h1,
.werke-bildtext h2,
.werke-bildtext h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
}

.werke-bildtext p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}



/* Bildunterschriften auf der Werke-Seite */

.werke-gallery figcaption strong {
  display: block;
  margin-bottom: -10px;  
  margin-top: 6px;
  color: #222;
  font-weight: 500;
          font-size: 16px;
        line-height: 1.1;
}

.werke-gallery figcaption {
  margin-top: 0px;
  color: #666;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}


/* Lightbox – dunkler Galeriehintergrund */
#cboxOverlay {
  background: rgba(0, 0, 0, 0.94);
  opacity: 1 !important;
}

#colorbox {
  outline: none;
}


/* Beschreibung in der Mediabox */
#mbBottom {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}


/* Titel und Beschreibung in der Mediabox */
#mbCaption strong {
  font-weight: 400;
}


/* Titel in der Lightbox nicht fett darstellen */
#mbTitle{
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}

#mbTitle strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400 !important;
}


/* Pagination der Werke-Galerie */

.werke-gallery .pagination {
  margin: 45px 0 70px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

.werke-gallery .pagination ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.werke-gallery .pagination li {
  margin: 0;
  padding: 0;
}

.werke-gallery .pagination a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s ease;
}

.werke-gallery .pagination a:hover {
  color: #111;
}

.werke-gallery .pagination .current,
.werke-gallery .pagination strong,
.werke-gallery .pagination .active {
  color: #111;
  font-weight: 500;
}

@media (max-width: 600px) {
  .werke-gallery .pagination ul {
    gap: 20px;
  }
}



/* Werke-Pagination: Zurück und Vorwärts als Pfeile */
.werke-gallery .pagination li.previous a,
.werke-gallery .pagination li.next a {
  font-size: 0;
}

.werke-gallery .pagination li.previous a::after {
  content: "<<";
  font-size: 14px;
}

.werke-gallery .pagination li.next a::after {
  content: ">>";
  font-size: 14px;
}




.werke-gallery .pagination li {
  display: list-item !important;
}



/* Werke-Paginierung: Anfang und Ende ausblenden */
.werke-gallery .pagination li.first,
.werke-gallery .pagination li.last {
    display: none !important;
}


/* =========================================================
PROFIL
========================================================= */
#profil {
 padding:30px;
 max-width:1000px;
}

#profil img {
 position: relative;
 padding-right: 10px;
}



/* =============================
   MOBILE
   ============================== */
/* Werke-Galerie: Tablet */
@media (max-width: 900px) {
    .werke-gallery ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

/* Werke-Galerie: Handy */
@media (max-width: 600px) {
    .werke-gallery {
        padding: 20px 15px 60px;
    }

    .werke-gallery ul {
        /*grid-template-columns: 1fr;*/
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }
}



/* Werke-Galerie: kleinere Schrift auf dem Handy */
@media (max-width: 600px) {
    .werke-gallery figcaption {
        font-size: 11px;
        line-height: 1.4;
        margin-top: 6px;
    }

    .werke-gallery figcaption strong {
        font-size: 13px;
        margin-bottom: 0px;
    }
}



/* Handy: Abstand zwischen Bildtitel und Beschreibung reduzieren */
@media (max-width: 600px) {
    .werke-gallery figcaption strong {
        display: inline;
        line-height: inherit;
    }
}



/* Werke-Einleitung: Button zum Auf- und Zuklappen */
.werke-einleitung-toggle {
    display: none;
}

@media (max-width: 600px) {
    .werke-einleitung-toggle {
        display: inline-block;
        margin-top: 8px;
        padding: 0;
        border: 0;
        background: none;
        color: #222;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        text-decoration: underline;
        cursor: pointer;
    }

    .werke-einleitung .rte {
        max-height: 110px;
        overflow: hidden;
    }

    .werke-einleitung.is-expanded .rte {
        max-height: none;
    }
}



/* Startseite: Hero-Text auf dem Handy */
@media (max-width: 600px) {
	
	.werke-einleitung {
		  margin-bottom: 10px;
		  padding-bottom:20px;	 	
	}
	
    .hero-content {
        bottom: -25px;
        padding-top: 55px;
    }

    .hero-kicker {
        font-size: 13px;
        line-height: 1;
        margin-bottom: 2px;
    }

    .hero-text h1 {
        font-size: 26px;
        line-height: 0.9;
        margin-top: 2px;
        margin-bottom: 10px;
    }

    .hero-button {
        font-size: 13px;
        line-height: 1.1;
        margin-top: 0;
    }
}


/* Ausgewählte Werke: drei gleich breite Spalten auf dem iPad */
@media (max-width: 768px) {
    #article-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    #article-3 .work {
        width: 100%;
        grid-column: auto !important;
        min-width: 0;
    }

    #article-3 .work img {
        display: block;
        width: 100%;
        height: auto;
    }
    
}

/* Künstler-Intro: mehr Textbreite auf dem Handy */
@media (max-width: 600px) {
    .artist-intro {
        grid-template-columns: 1fr;
        padding-left: 20px;
        padding-right: 20px;
    }

    .artist-intro-text {
        grid-column: 1;
        width: 100%;
        text-align: center;
    }

    .artist-intro p {
        max-width: none;
    }
}


/* Profil: Text und Bild am unteren Rand ausrichten */
@media (min-width: 769px) {
    #profil .content-text.media--left {
        display: flex;
        align-items: flex-end;
        gap: 30px;
    }

    #profil .content-text.media--left figure {
        flex: 0 0 310px;
        margin: 0;
    }

    #profil .content-text.media--left figure img {
        display: block;
        width: 100%;
        height: auto;
        padding-right: 0;
        position: static;
        float: none;
    }

    #profil .content-text.media--left .rte {
        flex: 1;
        min-width: 0;
    }
    

}


.gallery-filter button {
    cursor: pointer;
}

.gallery-filter button:hover {
    opacity: 0.7;
}


.gallery-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 45px;
}

.gallery-filter button {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    background: transparent;
    border: 1px solid transparent;
    padding: 9px 18px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.gallery-filter button:hover {
    border-color: #999;
}

.gallery-filter button.active {
    border-color: #000;
}

.gallery-filter button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .gallery-filter {
        flex-wrap: nowrap;
        gap: 4px;
    }

    .gallery-filter button {
        padding: 8px 10px;
        font-size: 13px;
        white-space: nowrap;
    }
}


@media (max-width: 768px) {
    .gallery-filter button {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    background: transparent;
    border: 1px solid #ddd;
    padding: 9px 18px;
    cursor: pointer;
    transition: all 0.25s ease;
}
}

@media (max-width: 600px) {
   #qr-code {display:none;
 }
}

#impressum-content,
#kontakt-content {
	padding-left: 20px;
	border-top: 1px solid #ddd;
	
}
]