/* ==========================================================================
   1. CSS-Variablen & Globale Resets
   ========================================================================== */
:root {
    --bg: #f4f2ee;
    --fg: #1d2733;
    --mut: #55606c;
    --acc: #b08a5a;
    --slate: #08080a;
    --line: #d6d1c8;
    --frame: #d9cfd0;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0c0c0d;
        --fg: #ececec;
        --mut: #a3a3a3;
        --slate: #161617;
        --line: #2c2c2e;
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 300 17px/1.7 'Noto Sans', system-ui, sans-serif;
}

h1, h2, h3 {
    font-family: 'Noto Serif', Georgia, serif;
    font-weight: 400;
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   2. Header & Navigation
   ========================================================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 4vw 12px;
    color: #fff;
    transition: background 0.3s, box-shadow 0.3s;
}

header.s {
    background: #0a0a0a;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.13);
}

.logo, .lgo {
    display: inline-block;
    text-align: center;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    font-family: Tinos, 'Times New Roman', Times, serif;
    font-weight: 400;
}

.logo {
    color: #fff;
}

.lgo {
    color: var(--fg);
    opacity: 0.8;
    flex: none;
}

.logo b, .lgo b {
    display: block;
    font-size: 34px;
    letter-spacing: 0.01em;
    -webkit-text-stroke: 0.9px currentColor;
    -webkit-text-fill-color: rgba(140, 140, 140, 0.14);
    text-shadow: 2px 2px 1px rgba(150, 150, 150, 0.6);
}

.logo span, .lgo span {
    display: block;
    font-size: 12px;
    letter-spacing: 0.04em;
    border-top: 1px solid rgba(150, 150, 150, 0.8);
    border-bottom: 1px solid rgba(150, 150, 150, 0.8);
    margin-top: 7px;
    padding: 5px 8px;
}

.lgo-w {
    color: #fff;
    opacity: 0.8;
}

.lgo-w span {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lgo.lgo-gray b,
.lgo.lgo-gray span {
	color: #000;
	/* -webkit-text-stroke: unset;
	-webkit-text-fill-color: unset; */
	text-shadow: unset;
}

nav {
    display: flex;
    gap: 28px;
    font: 400 12px 'Noto Serif', serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

nav a {
    color: #fff;
    text-decoration: none;
    opacity: 0.88;
    transition: opacity 0.2s, color 0.2s;
}

nav a:hover {
    opacity: 1;
    color: #ffb48f;
}

nav .dd {
    position: relative;
}

nav .dd > a::after {
    content: " ▾";
    font-size: 10px;
}

nav .dd ul {
    position: absolute;
    top: 100%;
    left: -18px;
    margin: 0;
    padding: 22px 0 12px;
    list-style: none;
    background: #0a0a0a;
    min-width: 300px;
    max-height: 70vh;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
    text-transform: none;
    letter-spacing: 0.03em;
    font: 400 14px 'Noto Sans', sans-serif;
}

nav .dd:hover ul,
nav .dd:focus-within ul {
    opacity: 1;
    visibility: visible;
}

nav .dd li a {
    display: block;
    padding: 9px 18px;
}

.bt {
    display: none;
    background: none;
    border: 0;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

/* ==========================================================================
   3. Hero Section
   ========================================================================== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 120px 6vw 90px;
    color: #fff;
    background: #08080a;
    position: relative;
    overflow: hidden;
}

.hero .bg {
    position: absolute;
    inset: -20%;
    filter: blur(60px);
    z-index: 0;
}

.hero .bg i {
    position: absolute;
    border-radius: 50%;
    opacity: 0.85;
}

.hero .bg i:nth-child(1) {
    width: 60vw;
    height: 60vw;
    left: -10%;
    top: -10%;
    background: #6b6b70;
    animation: m1 18s ease-in-out infinite alternate;
}

.hero .bg i:nth-child(2) {
    width: 55vw;
    height: 40vw;
    right: -5%;
    top: 20%;
    background: #2a2a2e;
    animation: m2 22s ease-in-out infinite alternate;
}

.hero .bg i:nth-child(3) {
    width: 45vw;
    height: 45vw;
    left: 25%;
    bottom: -15%;
    background: #b9b9bd;
    opacity: 0.35;
    animation: m3 26s ease-in-out infinite alternate;
}

.hero .bg i:nth-child(4) {
    width: 30vw;
    height: 30vw;
    right: 15%;
    top: -5%;
    background: #fff;
    opacity: 0.14;
    animation: m1 30s ease-in-out infinite alternate-reverse;
}

@keyframes m1 { to { transform: translate(25vw, 15vh) scale(1.2); } }
@keyframes m2 { to { transform: translate(-30vw, -10vh) scale(0.85); } }
@keyframes m3 { to { transform: translate(-15vw, -25vh) scale(1.25); } }

.hero > *:not(.bg):not(.cue) {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font: 400 clamp(110px, 24vw, 340px)/0.9 Tinos, 'Times New Roman', serif;
    letter-spacing: 0.015em;
    -webkit-text-stroke: 2.5px #fff;
    
    text-shadow: 9px 9px 5px rgba(150, 150, 150, 0.5);
    /* text-shadow: 0 0 15px rgba(255, 255, 255, 0.35); */

    background: linear-gradient(105deg, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.05) 58%) 0 0/260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fi 2s ease both, shl 6s 2.2s ease-in-out infinite, gl 6s 2.2s ease-in-out infinite;
}

.hero h2 {
    font: 400 clamp(21px, 4.3vw, 62px)/1.1 Tinos, 'Times New Roman', serif;
    letter-spacing: 0.09em;
    text-transform: none;
    margin-top: 10px;
    animation: fi 2s 0.4s ease both;
}

.hero hr {
    width: 0;
    height: 1px;
    border: 0;
    background: #fff;
    margin: 34px 0 0;
    opacity: 0.7;
    animation: ln 2.4s 1s ease forwards;
}

.hero .ful {
    margin: 26px 0 0;
    font: 400 clamp(11px, 1.5vw, 18px)/1.4 Tinos, 'Times New Roman', serif;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #fff;
    opacity: 1;
    animation: fi 2s 2.6s ease both;
}

.hero .est {
    margin: 26px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font: 400 clamp(11px, 1.15vw, 14px)/1 Tinos, 'Times New Roman', serif;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    animation: fi 2s 1s ease both;
}

.hero .est::before,
.hero .est::after {
    content: "";
    width: clamp(26px, 5vw, 60px);
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}

.hero .est span {
    padding-left: 0.36em;
}

.cue {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    opacity: 0.75;
}

.cue::after {
    content: "";
    display: block;
    width: 1px;
    height: 46px;
    background: #fff;
    margin: 10px auto 0;
    animation: cu 2s ease-in-out infinite;
}

@keyframes fi {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ln { to { width: min(60vw, 520px); } }
@keyframes cu { 50% { transform: translateY(10px); } }
@keyframes shl { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }
@keyframes gl { 50% { filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.3)); } }

/* ==========================================================================
   4. Globale Sektionen & Typografie
   ========================================================================== */
section {
    padding: 100px 8vw;
}

section.alt {
    position: relative;
    overflow: hidden;
    background: #08080a;
    color: #fff;
}

section.alt > * {
    position: relative;
    z-index: 1;
}

section.alt::before,
section.alt::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 70vw;
    height: 70vw;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
}

section.alt::before {
    left: -20vw;
    top: -25vw;
    background: radial-gradient(circle, #6b6b70, rgba(8, 8, 10, 0) 70%);
    animation: ab1 24s ease-in-out infinite alternate;
}

section.alt::after {
    right: -25vw;
    bottom: -30vw;
    background: radial-gradient(circle, rgba(185, 185, 189, 0.53), rgba(8, 8, 10, 0) 70%);
    animation: ab2 30s ease-in-out infinite alternate;
}

@keyframes ab1 { to { transform: translate(30vw, 18vw) scale(1.2); } }
@keyframes ab2 { to { transform: translate(-30vw, -14vw) scale(1.15); } }

.wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.hd {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

h2.t {
    font-size: clamp(28px, 3.4vw, 42px);
    margin-bottom: 42px;
    padding-bottom: 14px;
    position: relative;
}

h2.t::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: var(--acc);
}

.lead {
    font-weight: 600;
    margin: 0 0 20px;
}

.js .r {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s, transform 1s;
}

.js .r.v {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   5. Sektion: Über uns & Visitenkarten
   ========================================================================== */
#ueber-uns {
    padding-top: 56px;
}

#ueber-uns h2.t {
    font-size: clamp(30px, 3.4vw, 44px);
}

#ueber-uns p {
    font-size: clamp(16px, 1.25vw, 18.5px);
    line-height: 1.75;
    margin: 0 0 1.3em;
}

.split.ue {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 70px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
}

.rcol {
    display: block;
}

.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.pair .pp {
    display: block;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-align: left;
    /* cursor: pointer; */
    font: inherit;
}

.pair .pp img {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    object-position: center top;
    display: block;
    border: 7px solid var(--frame);
    background: #fff;
    transition: transform 0.5s, box-shadow 0.3s;
}

.pair .pp:hover img {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.pair .pn {
    display: block;
    margin-top: 16px;
    font: 400 clamp(18px, 1.8vw, 23px)/1.2 'Noto Serif', Georgia, serif;
}

/* 2D Flip Visitenkarten mit Container Queries */
.bcs {
    margin: 26px 0 0;
    text-align: center;
}

#ueber-uns p.bch {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mut);
    margin: 14px 0 0;
    opacity: 0.55;
}

.bcg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.cw {
    position: relative;
}

.ra, .rb {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.bc {
    cursor: pointer;
    outline: none;
}

.bcs.v .bc {
    animation: bin2 1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.bcs.v .cw:nth-child(2) .bc {
    animation-delay: 0.2s;
}

@keyframes bin2 {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
}

.bi {
    position: relative;
    container-type: inline-size;
    padding-bottom: 72%;
    height: 0;
    transition: transform 0.26s ease, box-shadow 0.3s;
}

.rb:focus-visible ~ .bc .bi,
.ra:focus-visible ~ .bc .bi {
    outline: 2px solid #888;
    outline-offset: 3px;
}

.bf {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e3dfd7;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.bf.fr {
    background: #fff;
    align-items: center;
    opacity: 1;
    visibility: visible;
}

.bf .lc {
    color: #111;
    text-align: center;
    line-height: 1;
}

.bf .lc b {
    display: block;
    font-size: 19cqw;
    letter-spacing: 0.015em;
    -webkit-text-stroke: 0.8px #444;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.03);
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.16);
}

.bf .lc span {
    display: inline-block;
    font-size: 5.2cqw;
    margin-top: 3cqw;
    padding: 4px 10px 5px;
    border-top: 1px solid #8a8a8a;
    border-bottom: 1px solid #8a8a8a;
    letter-spacing: 0.05em;
}

.bf.bk {
    background: #fff;
    color: #111;
    align-items: center;
    text-align: center;
    padding: 2.6cqw 4cqw;
    opacity: 0;
    visibility: hidden;
}

.bf.bk .vn {
    font: 400 7.6cqw/1.1 'Noto Serif', Georgia, serif;
    margin: 0;
}

.bf.bk hr {
    width: 40%;
    border: 0;
    border-top: 1px solid rgba(17, 17, 17, 0.25);
    margin: 2.2cqw auto;
}

.bf.bk .vl {
    font-size: 5.2cqw;
    line-height: 1.34;
    margin: 0 0 1.6cqw;
}

.bf.bk .vl a {
    color: inherit;
    text-decoration: none;
}

.bf.bk .dl {
    display: inline-block;
    background: #111;
    color: #fff;
    text-decoration: none;
    font: 400 3.5cqw 'Noto Sans', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2.1cqw 4.2cqw;
    margin-top: 1.4cqw;
    margin-bottom: 0;
    border: 0;
    cursor: pointer;
}

.bf.bk .dl:hover {
    background: #444;
}

.rb:checked ~ .bc .bi { animation: sqzA 0.6s cubic-bezier(0.45, 0.05, 0.25, 1) both; }
.ra:checked ~ .bc .bi { animation: sqzB 0.6s cubic-bezier(0.45, 0.05, 0.25, 1) both; }
.rb:checked ~ .bc .fr { animation: hid 0.6s steps(1) forwards; }
.rb:checked ~ .bc .bk { animation: sho 0.6s steps(1) forwards; }
.ra:checked ~ .bc .fr { animation: sho2 0.6s steps(1) forwards; }
.ra:checked ~ .bc .bk { animation: hid2 0.6s steps(1) forwards; }

@keyframes sqzA {
    0%, 100% { transform: scaleX(1) scale(1); }
    50% { transform: scaleX(0.015) scale(1.04); }
}
@keyframes sqzB {
    0%, 100% { transform: scaleX(1) scale(1); }
    50% { transform: scaleX(0.015) scale(1.04); }
}
@keyframes hid {
    0%, 49.9% { opacity: 1; visibility: visible; }
    50%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes sho {
    0%, 49.9% { opacity: 0; visibility: hidden; }
    50%, 100% { opacity: 1; visibility: visible; }
}
@keyframes hid2 {
    0%, 49.9% { opacity: 1; visibility: visible; }
    50%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes sho2 {
    0%, 49.9% { opacity: 0; visibility: hidden; }
    50%, 100% { opacity: 1; visibility: visible; }
}

/* ==========================================================================
   6. Sektion: Ankaufsprofil 2027
   ========================================================================== */
#ankaufsprofil {
    padding-left: 8vw;
    padding-right: 8vw;
}

.tw.ap {
    overflow-x: auto;
    background: #fff;
    color: #111;
    border: 1px solid var(--line);
    margin: 20px 0 0;
}

.tw.ap li {
    hyphens: manual;
    -webkit-hyphens: manual;
}

.ap table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    font-size: 12.5px;
}

.ap thead th {
    background: #111;
    color: #fff;
    text-align: center;
    font: 500 clamp(11px, 1.3vw, 15px) 'Noto Serif', serif;
    padding: 15px 6px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.13);
    vertical-align: middle;
}

.ap thead th:first-child {
    border-left: 0;
}

.ap thead th.grp {
    border-bottom: 1px solid rgba(255, 255, 255, 0.27);
    padding: 12px;
}

.ap thead th.sb {
    font: 400 9.5px 'Noto Sans', sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 8px 3px;
    color: #ddd;
}

.ap td {
    padding: 16px 11px;
    line-height: 1.55;
    vertical-align: top;
    border-bottom: 1px solid #e3dfd7;
    border-left: 1px solid #eeeae3;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.ap td.l {
    width: 10.5%;
    background: #f4f2ee;
    font: 600 9px 'Noto Sans', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-left: 0;
    color: #333;
    padding-left: 12px;
}

.ap tbody tr:last-child td {
    border-bottom: 0;
}

.ap tbody tr:hover td:not(.l) {
    background: #faf8f4;
}

.ap .kv {
    display: block;
    font-size: 8.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #777;
    margin-top: 12px;
}

.ap .kv:first-child {
    margin-top: 0;
}

.ap .kw {
    display: block;
    font: 700 clamp(12px, 1.35vw, 15.5px) 'Noto Sans', system-ui, sans-serif;
    color: #111;
    margin-top: 2px;
}

.ap ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap li {
    padding-left: 12px;
    position: relative;
    margin-bottom: 5px;
    font-size: clamp(11px, 1.2vw, 13px);
    font-weight: 400;
    line-height: 1.45;
    color: #3c3c3c;
}

.ap li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 5px;
    height: 1px;
    background: #111;
}

.ap li strong,
.ap td > strong {
    font-weight: 500;
    color: #000;
}

.c {
    display: inline-block;
    font-size: 8.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 7px;
    border: 1px solid #111;
    line-height: 1.3;
}

.c.n {
    background: #111;
    color: #fff;
}

.c.k {
    background: #fff;
    border-color: var(--acc);
    color: #8a6a3f;
}

.c.g {
    border-color: #b5b0a6;
    color: #555;
}

.pdfl {
    display: block;
    text-align: right;
    margin: 26px 0 0;
    padding: 0 0 22px;
}

.pdfl a {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font: 400 11.5px/1 'Noto Sans', Helvetica, Arial, sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 11px 0 11px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    transition: color 0.3s, border-color 0.3s;
}

.pdfl a:hover,
.pdfl a:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
    outline: 0;
}

.pdfl svg {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
}

.nv {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.nv h3 {
    font: 700 12px 'Noto Sans', sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 14px;
}

.nv .xw {
    overflow: hidden;
}

.nv .x {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 0 -19px;
    width: calc(100% + 19px);
    color: #fff;
    font-size: 15px;
}

.nv .x span {
    display: block;
    white-space: nowrap;
    padding: 3px 18px;
    margin: 5px 0;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    line-height: 1.3;
}

.nv .kt p {
    margin: 0;
    color: #fff;
    font-weight: 400;
}

.nv .kt a {
    color: #fff;
    font-weight: 400;
}

.pm {
    display: none;
}

/* ==========================================================================
   7. Sektion: Kapitalbeteiligungen
   ========================================================================== */
.kp {
    background: #ebe8e2;
    color: #111;
}

.kx {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: stretch;
    margin-bottom: 46px;
}

.kd {
    position: relative;
    overflow: hidden;
    background: #08080a;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
}

.kd::before,
.kd::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    width: 80%;
    aspect-ratio: 1;
}

.kd::before {
    left: -25%;
    top: -30%;
    background: radial-gradient(circle, #7a7a80, rgba(8, 8, 10, 0) 70%);
    animation: ab1 22s ease-in-out infinite alternate;
}

.kd::after {
    right: -30%;
    bottom: -35%;
    background: radial-gradient(circle, rgba(185, 185, 189, 0.53), rgba(8, 8, 10, 0) 70%);
    animation: ab2 28s ease-in-out infinite alternate;
}

.kdi {
    position: relative;
    z-index: 1;
    padding: 44px 40px;
    color: #fff;
}

.kq {
    font: 500 clamp(34px, 3.8vw, 54px)/1.15 'Cormorant Garamond', Georgia, serif;
    letter-spacing: 0.01em;
    color: #fff;
    margin: 0;
    text-shadow: none;
}

.kt2 .lead {
    font: 400 clamp(21px, 2.1vw, 28px)/1.4 'Noto Serif', Georgia, serif;
    margin: 0 0 22px;
    color: #111;
}

.kt2 p {
    color: #333;
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.75;
}

.kmail {
    margin-top: 26px;
    font-weight: 600;
    color: #111;
}

.kmail a {
    color: #111;
    text-underline-offset: 5px;
    font-weight: 600;
}

.kpc {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.kpc > div {
    display: block;
    background: #fff;
    padding: 30px 26px;
    border: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s, box-shadow 0.35s;
}

.kpc > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12);
}

.kpc svg {
    display: block;
    margin-bottom: 18px;
    color: #111;
}

.kpc h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.kpc p {
    margin: 0;
    color: #444;
    font-size: 14.5px;
    line-height: 1.65;
}

/* ==========================================================================
   8. Sektion: Referenzen
   ========================================================================== */
.rg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 56px 44px;
    max-width: 1200px;
    margin: 0 auto;
}

.rc {
    cursor: pointer;
    width: 100%;
}

.rc .iw {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

.rc img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #fff;
    border: 0;
}

.rc h3 {
    font-size: 25px;
    margin: 20px 0 4px;
}

.rc .lo {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acc);
    margin: 0 0 12px;
}

.rc .ol {
    display: inline-block;
    margin-top: 10px;
    font: 400 12px 'Noto Sans', Helvetica, Arial, sans-serif;
    letter-spacing: 0.16em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--acc);
    padding-bottom: 3px;
}

.rc .ol:hover {
    color: var(--acc);
}

.iw .ki {
    position: absolute;
    right: 10px;
    bottom: 9px;
    font: 400 9px/1 'Noto Sans', Helvetica, Arial, sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(50, 50, 50, 0.62);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    user-select: none;
}

#mv, #mp {
	display: none;
}

/* ==========================================================================
   9. Kontakt & Footer
   ========================================================================== */
.ico {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.ico > div:last-child {
    justify-self: end;
    padding-right: 3vw;
}

.ico h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.ico p {
    margin: 0;
}

.ico a, .kt a {
    color: inherit;
    font-weight: 600;
}

footer {
	background: #0a0a0a;
	color: #b3bfcc;
	/* padding: 26px 8vw calc(26px + env(safe-area-inset-bottom, 0px)); */
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 1200px;
	justify-content: space-between;
	margin: 0 auto;
	padding: 30px 0;
}
 
footer a {
    color: #b3bfcc;
    margin-left: 20px;
    text-decoration: none;
}

/* ==========================================================================
   10. Lightbox / Modal
   ========================================================================== */
.md {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4vw;
}

.md.o {
    display: flex;
}

.mb {
    background: #111;
    color: #fff;
    max-width: 1120px;
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    position: relative;
}

.mb .iwm {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 260px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mb img {
    width: 100%;
    height: 100%;
    max-height: 92vh;
    object-fit: contain;
    aspect-ratio: auto;
    display: block;
    background: #fff;
}

.mt {
    padding: 46px 38px;
    display: flex;
    flex-direction: column;
}

.mt h3 {
    font-size: 30px;
    margin-bottom: 8px;
}

.mt .lo {
    font-size: 12.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--acc);
    margin-bottom: 20px;
}

.mt p {
    margin: 0 0 26px;
    color: #d4d4d4;
}

.mt .bs {
    margin-top: auto;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mt button,
.mt a.bn {
    font: 400 12px 'Noto Sans', sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.47);
    padding: 12px 18px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.mt button:hover,
.mt a.bn:hover {
    background: #fff;
    color: #000;
}

.mx {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.67);
    border: 0;
    font-size: 26px;
    padding: 2px 12px;
    letter-spacing: 0;
    color: #fff;
    cursor: pointer;
}

/* ==========================================================================
   11. Rechtstexte (Overlays)
   ========================================================================== */
.legalp {
    padding: 0;
    outline: 0;
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: #f4f2ee;
    color: #1a1a1a;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.legalp:target {
    display: block;
}

.legalb {
    max-width: 820px;
    margin: 0 auto;
    padding: 90px 24px 80px;
    position: relative;
    font: 400 15.5px/1.7 'Noto Sans', Helvetica, Arial, sans-serif;
}

.legalb h2 {
    padding: 0;
    border: 0;
    font: 400 clamp(32px, 5vw, 46px)/1.1 'Noto Serif', Georgia, serif;
    margin: 0 0 28px;
}

.legalb h3 {
    font: 600 12px 'Noto Sans', sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #666;
    margin: 30px 0 8px;
}

.legalb p {
    margin: 0 0 12px;
}

.legalb a {
    color: inherit;
}

.legalx {
    position: fixed;
    top: 18px;
    right: 22px;
    font: 300 40px/1 sans-serif;
    text-decoration: none;
    color: #111;
}

.legalz {
    margin-top: 34px;
    font-size: 13px;
    color: #555;
}

.phd {
    background: #fff3b0;
    color: #111;
    padding: 0 3px;
}

/* ==========================================================================
   12. Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1000px) {
    .kx {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .kpc {
        grid-template-columns: 1fr 1fr;
    }
}

/* @media (max-width: 860px) { */
@media (max-width: 910px) {
    nav {
        position: fixed;
        inset: 0 0 0 22%;
        background: #0a0a0a;
        overflow: auto;
        flex-direction: column;
        justify-content: center;
        padding: 40px;
        transform: translateX(100%);
        transition: transform 0.35s;
    }

    nav.o {
        transform: none;
    }

    .bt {
        display: block;
        z-index: 30;
    }

    nav .dd ul {
        position: static;
        opacity: 1;
        visibility: visible;
        padding: 8px 0 0 14px;
        min-width: 0;
        font-size: 13px;
    }

    nav .dd li a {
        padding: 6px 0;
    }

    section {
        padding: 70px 6vw;
    }

    .split.ue {
        grid-template-columns: 1fr;
    }

    .ue .pair {
        order: 2;
    }

    .pair {
        gap: 12px;
    }

    .hd .lgo {
        display: none;
    }

    .kpg {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .kpc {
        grid-template-columns: 1fr;
    }

    .rg {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .ico {
        grid-template-columns: 1fr;
    }

    .ico > div:last-child {
        justify-self: start;
        padding-right: 0;
    }

    .nv, .mb {
        grid-template-columns: 1fr;
    }

    .mt {
        padding: 28px 24px;
    }
}

@media (max-width: 700px) {
    .tw.ap {
        display: none;
    }

    .pm {
        display: block;
    }

    .pc {
        background: #fff;
        color: #111;
        padding: 20px;
        margin-top: 14px;
        border: 1px solid var(--line);
    }

    .pc h3 {
        font-size: 19px;
        margin-bottom: 8px;
    }

    .pc dt {
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #777;
        margin-top: 12px;
    }

    .pc dd {
        margin: 2px 0 0;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 600;
    }

    .pm .kv {
        display: block;
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #777;
        margin-top: 8px;
    }

    .pm .kv:first-child {
        margin-top: 0;
    }

    .pm .kw {
        display: block;
        font-weight: 700;
        color: #111;
        font-size: 17px;
    }

    .pm dd ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pm dd li {
        position: relative;
        padding-left: 14px;
        margin-bottom: 4px;
        font-weight: 400;
        color: #3c3c3c;
    }

    .pm dd li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.85em;
        width: 7px;
        height: 1px;
        background: #111;
    }

    .pm dd strong,
    .pm dd li strong {
        font-weight: 500;
        color: #000;
    }

    .nv .x {
        display: block;
        margin: 0;
        width: auto;
    }

    .nv .x span {
        display: block;
        border-left: 0;
        padding: 5px 0;
        margin: 0;
        white-space: normal;
    }

    .bcg, .rcol .bcg {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        margin: 0;
        max-width: none;
    }

    .bcs, .rcol .bcs {
        max-width: none;
    }

    .bf.bk {
        padding: 2cqw 2.5cqw;
    }

    .bf.bk .vn {
        font-size: 8.6cqw;
    }

    .bf.bk .vl {
        font-size: 6.3cqw;
        line-height: 1.3;
        margin: 0 0 1.4cqw;
    }

    .bf.bk hr {
        margin: 1.8cqw auto;
    }

    .bf.bk .dl {
        font-size: 4.6cqw;
        padding: 2cqw 3cqw;
        letter-spacing: 0.06em;
    }

    .bf .lc b {
        font-size: 15cqw;
    }

    .bf .lc span {
        font-size: 5.2cqw;
        margin-top: 2cqw;
    }

    .bch {
        font-size: 10px;
    }

    .pdfl {
        margin: 18px 0 0;
        padding-bottom: 16px;
    }

    .pdfl a {
        font-size: 11px;
        letter-spacing: 0.16em;
    }

    .iw .ki {
        font-size: 7.5px;
        right: 7px;
        bottom: 6px;
    }

    .kd {
        min-height: 240px;
    }
}

/* ==========================================================================
   13. Barrierefreiheit & Druckansicht
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hero .bg i,
    .cue::after,
    section.alt::before,
    section.alt::after,
    .hero .est {
        animation: none;
    }

    .hero h1,
    .hero hr {
        animation: none;
        width: min(60vw, 520px);
    }

    .hero .ful {
        animation: none;
        opacity: 1;
    }

    .bcs.v .bc,
    .vcard.in {
        animation: none;
        opacity: 1;
    }
}

@media print {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .js .r {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero h1,
    .hero h2,
    .hero hr {
        animation: none;
        width: min(60vw, 520px);
    }

    .hero .ful {
        opacity: 1;
        animation: none;
    }

    .hero {
        height: 100vh;
        min-height: 0;
    }

    header {
        position: absolute;
    }

    .cue,
    .pdfl {
        display: none !important;
    }

    .bc {
        opacity: 1 !important;
        animation: none !important;
    }

    .rc {
        break-inside: avoid;
    }
}

/* ==========================================================================
   Scroll to Top Button
   ========================================================================== */
.scroll-top {
    position: fixed;
    right: 28px;
    /* bottom: calc(28px + env(safe-area-inset-bottom, 0px)); */
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s, border-color 0.2s, color 0.2s;
    cursor: pointer;
}

.scroll-top svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.scroll-top:hover,
.scroll-top:focus-visible {
    background: #fff;
    color: #000;
    border-color: #fff;
    outline: none;
}

.scroll-top:hover svg {
    transform: translateY(-2px);
}

/* Sichtbarer Zustand */
.scroll-top.visible {
    opacity: 0.85;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top.visible:hover {
    opacity: 1;
}

/* Mobil-Optimierung */
@media (max-width: 700px) {
    .scroll-top {
        right: 18px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        width: 40px;
        height: 40px;
    }
    .scroll-top svg {
        width: 16px;
        height: 16px;
    }
}

/* Im Druck ausblenden */
@media print {
    .scroll-top {
        display: none !important;
    }
}