@view-transition {
  navigation: auto;
}
root{--bg:#f6f5f2;--text:#151515;--muted:#6f6f6f;--line:#ddd9d2}
*{box-sizing:border-box} 
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
body, table{    font-size: 17px;line-height: 1.75;color: #555;}
a{text-decoration:none;color:inherit}
.wrap{max-width:1320px;margin:auto;padding:0 28px}
header{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.logo{font-family:Georgia,serif;font-size:22px;letter-spacing:.04em;    line-height: 25px;}
.logo small{display:block;font:10px Arial;letter-spacing:.18em;color:#000;margin-top:3px}
nav{display:flex;gap:28px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
nav a:hover{border-bottom:1px solid}
.hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:650px;align-items:center;gap:55px;padding:55px 0 75px}
.hero-copy .eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#000}
.hero h1{font:400 clamp(45px,6vw,82px)/.98 Georgia,serif;margin:18px 0 25px;max-width:700px}
.hero h2{font:400 35px Georgia,serif;margin:0}
.hero p{font-size:17px;line-height:1.75;color:#555;max-width:620px}
.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{border-radius:10px; padding:14px 21px;background:#151515;color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.btn.light{background:transparent;color:#151515;border:1px solid #aaa}
.hero-image{overflow:hidden}
.hero-image img{width:100%;height:100%;object-fit:cover}
section{padding:65px 0}
.title{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:25px}
.title h2{font:400 35px Georgia,serif;margin:0}
.title span{font-size:11px;letter-spacing:.14em;color:#000}
.series{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.card{position:relative;aspect-ratio:3/4;overflow:hidden;background:#fff;}
.card img{object-fit:cover;transition:.45s} /*width:100%;height:100%;*/
.series .card img {width:100%;height:100%;}
.card:hover img{transform:scale(1.04)}
.caption{position:absolute;bottom:0;left:0;right:0;padding:60px 18px 18px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82))}
.caption h3{font:400 25px Georgia,serif;margin:0 0 5px}
.caption p{font-size:12px;margin:0}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.intro h2{font:400 43px Georgia,serif;margin:0 0 18px}
.intro  h3 {border: 0px !important; font: 500 25px Georgia, serif !important; margin: 0 0 5px !important;padding: 0px;}
.intro p{line-height:1.75;color:#555}
.quote{font:italic 25px/1.45 Georgia,serif;border-left:1px solid #777;padding-left:28px}
.shop{background:#ebe9e4}
.shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shopbox{background:#f8f7f4;padding:30px}
.shopbox h3{font:400 25px Georgia,serif;margin:0 0 12px}
.shopbox p{font-size:14px;color:#666;line-height:1.6}
.ai{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}
.ai h2{font:400 42px Georgia,serif;margin:0}
.ai p{line-height:1.75;color:#555}
footer{border-top:1px solid var(--line);padding:30px 0;color:#777;font-size:12px;display:flex;justify-content:space-between}

.filters{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;padding:0 0 45px}
.filter,.filter-active{border:1px solid #555;background:white;padding:11px 18px;border-radius:30px;font-size:13px;cursor:pointer}
.filter.active,.filter:hover,.filter-active:hover{background:#111;color:#fff;border-color:#111; text-decoration:none;}

.filter a:hover,.filter a:focus {color:#fff!important; text-decoration:none; border:0px;}
.filter-active, .filter-active a {background-color:#111!important; color:#fff!important;}
.filter a, .filter-active a {padding:10px;}

#werkliste-boxes {text-align:center;}
.section-title{display:flex;justify-content:space-between;align-items:end;margin:30px 0 20px;border-bottom:1px solid var(--line);padding-bottom:12px}
.section-title h2{font-family:Georgia,serif;font-weight:400;font-size:30px;margin:0}
.section-title span{font-size:12px;color:var(--muted);letter-spacing:.08em}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 22px;margin-bottom:70px}
.work{background:white;padding-bottom:18px}
.work-image{aspect-ratio:3/4;background:#e5e5e5;overflow:hidden}
.work-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}
.work:hover img{transform:scale(1.025)}
.work-info{padding:0;    text-align: center;}
.work-info .cat{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#000}
.work-info h3{font-family:Georgia,serif;font-size:22px;font-weight:400;margin:7px 0 4px}
.work-info p{font-size:13px;color:#777;margin:0 0 14px}

#serien .title h2 {font-size:43px;}

@media(min-width:700px){
	nav {font-size:16px;}
}

@media(min-width:1200px){
.hero h3 {max-width:70%;}
}

@media(max-width:900px){
	.works{grid-template-columns:repeat(2,1fr)}
	.quality-grid{grid-template-columns:1fr}
}

@media(max-width:850px){
	nav{gap:12px}
	.hero {padding-bottom: 0px;}
	.hero h3{padding-bottom: 15px;}
	.hero,.intro,.ai{grid-template-columns:1fr}
	.series{grid-template-columns:1fr 1fr}
	.shopgrid{grid-template-columns:1fr}
}
@media(max-width:600px){
	.container{padding:0 0px}
	.works{grid-template-columns:1fr;gap:24px}.
}

@media(max-width:520px){
	.wrap{padding:0 16px}
	header{height:auto;padding:18px 0;align-items:flex-start}
	/*nav{display:none}	*/
	.hero h1{font-size:48px}
	.series{gap:8px}
	.caption{padding:35px 10px 10px}
	.caption h3{font-size:18px}
	.caption p{font-size:10px}
	footer{display:block;line-height:2}
}

@media(max-width:480px){
#logo_claim {display:none;}
.work-info {padding:0px;}
.work-info .cat {font-size:8px;}
.intro  {display:block;}
.quote {margin-top: 50px;}
}

@media(max-width:400px){
nav {font-size: 10px;}
}



.ns-faq-solid .ns-faq-icon-wrap {
    background-color: #666;
}

/******* content block Hero – TYPO3 14 ***********/
.hero--image-left .hero-image {
    order: -1;
}

@media (max-width: 767px) {
    .hero--image-left .hero-image {
        order: initial;
    }
}

#thewrap .hero {
    width: 100%;
    max-width: 1264px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

#thewrap .hero-copy {
    min-width: 0;
}

#thewrap .hero-image {
    min-width: 0;
}

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

/******* content block TYPO3 14 ***********/
.text-two-columns h2 {
max-width:600px;
    font: 400 43px Georgia, serif;
    margin: 0 0 18px;
}
.text-two-columns { width: 100%; margin: 0 0 40px 0; }
.text-two-columns__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 50px; align-items: start; }
.text-two-columns__left, .text-two-columns__right { min-width: 0; }
.text-two-columns .buttons{margin-top:0;}
.text-two-columns__right { font-style: italic;     font: italic 25px / 1.45 Georgia, serif;
    border-left: 1px solid #777;
    padding-left: 28px;}
.text-two-columns p { margin-top: 0; margin-bottom: 1em; }
@media (max-width: 767px) { .text-two-columns__inner { grid-template-columns: 1fr; gap: 25px; } }


/* Serien – vier Serienkacheln */
.art-series { padding: 0; width: 100%; margin: 3rem 0; }
.art-series__title { max-width: 600px; font: 400 43px Georgia, serif; margin: 0 0 30px; }
.art-series__description { margin: 0 0 1.75rem; }
.art-series__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.art-series__item { min-width: 0; }
.art-series__card { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: #222; color: #fff; text-decoration: none; isolation: isolate; }
.art-series__card:visited, .art-series__card:hover, .art-series__card:focus { color: #fff; text-decoration: none; }
.art-series__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.art-series__card:hover .art-series__image, .art-series__card:focus-visible .art-series__image { transform: scale(1.055); }
.art-series__overlay { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.15rem; background: linear-gradient(to bottom, transparent 48%, rgba(0,0,0,.12) 65%, rgba(0,0,0,.75) 100%); pointer-events: none; }
.art-series__work-title h3{ padding:0 0 0px 10px;     font: 400 25px Georgia, serif; margin: 0 0 5px;}
.art-series__work-description { padding:0 0 10px 10px;  font-size: 12px;  line-height:16px; margin: 0;}
.art-series__action { font-size: .85rem; margin-top: .35rem; opacity: .9; }
.art-series__card:focus-visible { outline: 3px solid #ff8700; outline-offset: 3px; }
@media (max-width: 900px) { .art-series__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .art-series__grid { grid-template-columns: 1fr; gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .art-series__image { transition: none; } }