/* Nur für info/ueber_uns.html. Gemeinsame Schrift, Farben, Kopf und Footer stehen in info.css. */
.ueber-seite{
padding:calc(var(--kopf-header-hoehe) + clamp(46px,6.5vw,125px)) 0 50px;
}
.ueber-galerie{
--bildabstand:20px;
--bildbreite:calc((100% - 80px) / 5);
--bild-einzug:0;
text-align:center;
}
.ueber-fenster{
width:100%;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
}
.ueber-galerie.ist-bereit .ueber-fenster{
overflow:hidden;
scroll-snap-type:none;
touch-action:pan-y pinch-zoom;
cursor:grab;
-webkit-user-select:none;
user-select:none;
}
.ueber-galerie.ist-bereit .ueber-fenster:active{
cursor:grabbing;
}
.ueber-streifen{
width:100%;
display:flex;
align-items:flex-start;
gap:var(--bildabstand);
margin:0;
padding:0;
list-style:none;
}
.ueber-galerie.ist-bereit .ueber-streifen{
will-change:transform;
}
.ueber-bild{
flex:0 0 var(--bildbreite);
min-width:0;
scroll-snap-align:start;
}
.ueber-bild img{
display:block;
width:100%;
height:auto;
aspect-ratio:365 / 458;
object-fit:contain;
-webkit-user-select:none;
user-select:none;
}
.ueber-steuerung{
display:inline-flex;
align-items:center;
justify-content:center;
vertical-align:top;
margin-top:38px;
padding:0 16px;
border-radius:40px;
background:rgba(255,255,255,.56);
}
.ueber-steuerung[hidden]{
display:none;
}
.ueber-punkt{
display:flex;
align-items:center;
justify-content:center;
width:28px;
height:44px;
margin:0;
padding:0;
border:0;
border-radius:22px;
background:transparent;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
transition:width .4s cubic-bezier(.33,0,.2,1);
}
.ueber-punkt[aria-current="true"]{
width:60px;
}
.ueber-punkt:focus-visible{
outline:2px solid currentColor;
outline-offset:-3px;
}
.ueber-marke{
display:block;
width:8px;
height:8px;
overflow:hidden;
border-radius:20px;
background:#141414;
transition:width .4s cubic-bezier(.33,0,.2,1),background-color .3s ease;
}
.ueber-punkt[aria-current="true"] .ueber-marke{
width:40px;
background:#aaa6a8;
}
.ueber-fuellung{
display:block;
width:100%;
height:100%;
border-radius:inherit;
background:#141414;
transform:scaleX(0);
transform-origin:left center;
}
.ueber-text{
width:92%;
max-width:1080px;
margin:78px auto 0;
text-align:center;
line-height:1.5;
}
.ueber-text h1{
margin:0;
font-size:25px;
line-height:1.4;
font-weight:400;
letter-spacing:1px;
}
.ueber-einstieg,
.ueber-spalten{
width:70%;
margin-left:auto;
margin-right:auto;
}
.ueber-einstieg{
font-size:25px;
line-height: 1.3;
margin-top:38px;
margin-bottom:0;
}
.ueber-spalten{
column-count:2;
column-gap:141px;
column-rule:1px solid currentColor;
column-fill:balance;
margin-top:90px;
text-align:left;
}
.ueber-spalten p{
margin:0;
orphans:2;
widows:2;
}
.ueber-spalten p + p{
margin-top:24px;
}
.ueber-zusammen{
white-space:nowrap;
}
.ueber-abschluss{
width:100%;
max-width:370px;
margin:90px auto 0;
}
.ueber-artprints-link{
display:flex;
justify-content:center;
margin-top:50px;
}
.ueber-text .ueber-artprints-button{
box-sizing:border-box;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:44px;
min-height:44px;
padding:12px 16px;
border-radius:50px;
background-color:#000;
color:#fff;
font-family:"Inter Tight",Arial,sans-serif;
font-size:15px;
line-height:15px;
font-weight:400;
letter-spacing:1px;
text-decoration:none;
}
.ueber-text .ueber-artprints-button:hover{
background-color:#333;
text-decoration:none;
}
.ueber-text .ueber-artprints-button:focus-visible{
outline:2px solid #000;
outline-offset:4px;
}
@media(max-width:1440px){
.ueber-galerie{
--bildbreite:calc((100% - 60px) / 4);
}
}
@media(max-width:1032px){
.ueber-abschluss {
margin: 50px auto 0;
}
.ueber-spalten{
column-count:1;
column-rule:none;
text-align: center;
margin-top: 55px;
}
.ueber-einstieg, .ueber-spalten{
width: 90%;
}
.ueber-galerie{
--bildabstand:16px;
--bildbreite:calc((100% - 32px) / 3);
}
}
@media(max-width:744px){
.ueber-punkt {
height: 38px;
}
.ueber-galerie{
--bildabstand:14px;
--bildbreite:82%;
--bild-einzug:1;
}
.ueber-bild{
scroll-snap-align:center;
}
.ueber-steuerung{
margin-top:24px;
}
.ueber-text{
width:86%;
margin-top:54px;
}
.ueber-einstieg,
.ueber-spalten{
width:100%;
}
.ueber-einstieg{
font-size:22px;
margin-top:28px;
}
.ueber-spalten{
margin-top:42px;
}
.ueber-abschluss{
margin-top:42px;
}
}
@media(max-width:600px){
.ueber-text .ueber-artprints-button{
font-size:16px;
line-height:1.4;
}
}
@media(prefers-reduced-motion:reduce){
.ueber-punkt,
.ueber-marke{
transition:none;
}
}