/* ============================================================
   DO NOT EDIT THIS FILE - EDIT /src/css/*.css AND RUN build-css.js
   Generiert: 2026-10-13T10:44:13.799Z
   Quelldateien: 00-fonts.css, 01-base.css, 02-header.css, 03-hero.css, 04-text.css, 05-werke.css, 06-galerie.css, 07-projekte.css, 08-kontakt.css, 09-footer.css, zz-cms-compat.css
   ============================================================ */

/* ===== Quelle: src/css/00-fonts.css ===== */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/kainzner/cormorant-garamond-latin-300-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('/fonts/kainzner/cormorant-garamond-latin-300-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/kainzner/cormorant-garamond-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/kainzner/cormorant-garamond-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/kainzner/cormorant-garamond-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/kainzner/outfit-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
/* ===== Quelle: src/css/01-base.css ===== */ /* ============================================================= Gerhard Kainzner – Basis: Design-Tokens, Grundformatierung, Bausteine (Eyebrow, Pfeil-Link, Fließtext) Alle Farben/Abstände/Schriften nur über diese Variablen. ============================================================= */ :root { --kz-bg: #fafaf8; --kz-bg-soft: #f3f2ee; --kz-ink: #11182e; --kz-ink-soft: #3c4560; --kz-muted: #7c8499; --kz-line: #e4e3de; --kz-dark: #11182e; --kz-on-dark: #f3f1ea; --kz-on-dark-soft: #b8bccb; --kz-fehler: #9b1c1c; --kz-ok: #1d6b3a; --kz-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --kz-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --kz-container: 1120px; --kz-gutter: clamp(20px, 5vw, 48px); --kz-header: 76px; --kz-sektion: clamp(64px, 9vw, 128px); --kz-dauer: 0.25s; --kz-ease: cubic-bezier(0.2, 0.7, 0.2, 1); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--kz-bg); color: var(--kz-ink-soft); font-family: var(--kz-sans); font-size: 15px; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--kz-ink); outline-offset: 3px; }
.kz-container { width: 100%; max-width: calc(var(--kz-container) + 2 * var(--kz-gutter)); margin: 0 auto; padding-left: var(--kz-gutter); padding-right: var(--kz-gutter); }
.kz-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kz-muted); font-weight: 400; line-height: 1.4; margin-bottom: 20px; }
.kz-eyebrow::before { content: '\2014\00a0'; }
.kz-eyebrow--ohne-strich::before { content: none; }
.kz-pfeil { display: inline-flex; align-items: center; gap: 10px; font-family: var(--kz-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kz-ink); text-decoration: none; padding: 6px 0; border: 0; border-bottom: 1px solid var(--kz-ink); background: none; cursor: pointer; transition: gap var(--kz-dauer) var(--kz-ease), opacity var(--kz-dauer); }
.kz-pfeil:hover { gap: 16px; }
.kz-pfeil svg { flex-shrink: 0; }
.kz-pfeil--klein { font-size: 11px; border-bottom: 0; padding: 0; }
.kz-pfeil--fuss { margin-left: auto; }
.kz-prose > * + * { margin-top: 1.1em; }
.kz-prose p { font-size: 14px; line-height: 1.75; }
.kz-prose strong { font-weight: 500; color: var(--kz-ink); }
.kz-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kz-prose h3, .kz-prose h4 { font-family: var(--kz-sans); font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kz-muted); margin-top: 2.2em; margin-bottom: 0.9em; }
.kz-prose ul { list-style: none; padding: 0; }
.kz-prose ul li { font-size: 14px; line-height: 1.6; color: var(--kz-ink); padding: 2px 0; }
.kz-prose ul li + li { margin-top: 0.55em; }
.kz-prose em { font-family: var(--kz-serif); font-size: 1.08em; }
/* ===== Quelle: src/css/02-header.css ===== */ .kz-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--kz-header); background: rgb(250 250 248 / 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--kz-line); transition: box-shadow var(--kz-dauer); }
.kz-header.is-scroll { box-shadow: 0 1px 0 var(--kz-line), 0 8px 24px rgb(17 24 46 / 0.05); }
.kz-header__innen { height: 100%; max-width: calc(var(--kz-container) + 2 * var(--kz-gutter)); margin: 0 auto; padding: 0 var(--kz-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.kz-logo { display: flex; flex-direction: column; gap: 3px; text-decoration: none; line-height: 1; }
.kz-logo img { height: 34px; width: auto; }
.kz-logo__zeile { font-size: 8.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kz-muted); padding-left: 2px; }
.kz-nav { display: flex; align-items: center; gap: clamp(20px, 3.2vw, 38px); }
.kz-nav__link { position: relative; font-size: 12.5px; letter-spacing: 0.04em; color: var(--kz-ink-soft); text-decoration: none; padding: 6px 0; transition: color var(--kz-dauer); }
.kz-nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--kz-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--kz-dauer) var(--kz-ease); }
.kz-nav__link:hover, .kz-nav__link.is-aktiv { color: var(--kz-ink); }
.kz-nav__link:hover::after, .kz-nav__link.is-aktiv::after { transform: scaleX(1); }
.kz-burger { display: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; padding: 0; cursor: pointer; position: relative; }
.kz-burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--kz-ink); transition: transform var(--kz-dauer) var(--kz-ease), opacity var(--kz-dauer); }
.kz-burger span:nth-child(1) { top: 16px; }
.kz-burger span:nth-child(2) { top: 21px; }
.kz-burger span:nth-child(3) { top: 26px; }
.kz-header.is-offen .kz-burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.kz-header.is-offen .kz-burger span:nth-child(2) { opacity: 0; }
.kz-header.is-offen .kz-burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
@media (max-width: 820px) { :root { --kz-header: 64px; }
.kz-logo img { height: 30px; }
.kz-burger { display: block; }
.kz-nav { position: fixed; top: var(--kz-header); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--kz-bg); padding: 8px var(--kz-gutter) 24px; border-bottom: 1px solid var(--kz-line); box-shadow: 0 24px 40px rgb(17 24 46 / 0.08); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity var(--kz-dauer), transform var(--kz-dauer) var(--kz-ease), visibility 0s linear var(--kz-dauer); }
.kz-header.is-offen .kz-nav { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.kz-nav__link { font-size: 17px; padding: 16px 0; border-bottom: 1px solid var(--kz-line); }
.kz-nav__link::after { display: none; }
.kz-nav__link.is-aktiv { font-weight: 500; }
}
/* ===== Quelle: src/css/03-hero.css ===== */ .kz-hero { position: relative; min-height: min(86vh, 820px); display: flex; align-items: center; overflow: hidden; background: var(--kz-bg-soft); padding: calc(var(--kz-header) + 48px) 0 72px; }
.kz-hero__bild { position: absolute; inset: 0; background-image: var(--kz-hero-bild); background-size: cover; background-position: center 38%; transform: scale(1.04); animation: kz-hero-zoom 1.8s var(--kz-ease) forwards; }
.kz-hero__schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(250 250 248 / 0.4) 0%, rgb(250 250 248 / 0.55) 55%, rgb(250 250 248 / 0.78) 100%); }
.kz-hero__inhalt { position: relative; z-index: 1; }
.kz-hero__titel { font-family: var(--kz-serif); font-weight: 400; font-size: clamp(50px, 8.4vw, 108px); line-height: 0.98; letter-spacing: -0.015em; color: var(--kz-ink); margin: 0 0 clamp(36px, 6vw, 72px); max-width: 11em; }
.kz-hero__titel em { font-style: italic; font-weight: 300; }
.kz-hero__fuss { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.kz-hero__text { max-width: 400px; }
.kz-hero__text p { font-size: 14px; color: var(--kz-ink-soft); }
@keyframes kz-hero-zoom { to { transform: scale(1); }
}
@media (max-width: 640px) { .kz-hero { min-height: 0; align-items: flex-end; padding-bottom: 48px; }
.kz-hero__fuss { flex-direction: column; align-items: flex-start; }
.kz-pfeil--fuss { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .kz-hero__bild { animation: none; transform: none; }
html { scroll-behavior: auto; }
}
.kz-kopf { padding: calc(var(--kz-header) + clamp(48px, 8vw, 96px)) 0 clamp(40px, 6vw, 72px); }
.kz-kopf .kz-container { border-bottom: 1px solid var(--kz-line); padding-bottom: clamp(32px, 5vw, 56px); }
.kz-kopf__titel { font-family: var(--kz-serif); font-weight: 400; font-size: clamp(46px, 7.2vw, 88px); line-height: 1; letter-spacing: -0.012em; color: var(--kz-ink); }
.kz-kopf__titel em { font-style: italic; font-weight: 300; }
.kz-kopf__text { margin-top: 28px; max-width: 34em; }
.kz-kopf__text p { font-size: 15px; color: var(--kz-muted); }
.kz-hero--schrift-hell .kz-hero__schleier { background: linear-gradient(90deg, rgb(17 24 46 / 0.74) 0%, rgb(17 24 46 / 0.52) 46%, rgb(17 24 46 / 0.1) 100%); }
.kz-hero--schrift-hell .kz-hero__titel { color: var(--kz-on-dark); }
.kz-hero--schrift-hell .kz-eyebrow { color: var(--kz-on-dark-soft); }
.kz-hero--schrift-hell .kz-hero__text p { color: var(--kz-on-dark); }
.kz-hero--schrift-hell .kz-pfeil { color: var(--kz-on-dark); border-bottom-color: var(--kz-on-dark); }
@media (max-width: 640px) { .kz-hero--schrift-hell .kz-hero__schleier { background: linear-gradient(180deg, rgb(17 24 46 / 0.55) 0%, rgb(17 24 46 / 0.72) 100%); }
}
/* ===== Quelle: src/css/04-text.css ===== */ .kz-text { padding: var(--kz-sektion) 0; }
.kz-text--hintergrund-hell { background: var(--kz-bg-soft); }
.kz-text--hintergrund-dunkel { background: var(--kz-dark); color: var(--kz-on-dark-soft); }
.kz-text__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 96px); align-items: start; }
.kz-text__titel { font-family: var(--kz-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; color: var(--kz-ink); }
.kz-text__titel em { font-style: italic; font-weight: 300; }
.kz-text__inhalt > p:first-child { font-size: 17px; line-height: 1.7; color: var(--kz-ink); }
.kz-text__spalte .kz-pfeil { margin-top: 30px; }
.kz-text__kopf .kz-eyebrow { margin-bottom: 14px; }
.kz-text--stil-portrait { padding: clamp(40px, 6vw, 80px) 0 var(--kz-sektion); }
.kz-text--stil-portrait .kz-text__bild img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.02); }
.kz-text--stil-portrait .kz-text__spalte .kz-eyebrow { margin-bottom: 18px; }
.kz-text--stil-portrait .kz-text__titel { margin-bottom: 24px; }
.kz-text--stil-cta .kz-text__titel, .kz-text--hintergrund-dunkel .kz-text__titel { color: var(--kz-on-dark); }
.kz-text--hintergrund-dunkel .kz-eyebrow { color: var(--kz-on-dark-soft); }
.kz-text--stil-cta .kz-text__raster { align-items: center; }
.kz-text--stil-cta .kz-text__spalte { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.kz-text--stil-cta .kz-text__inhalt > p:first-child { font-size: 14px; color: var(--kz-on-dark); }
.kz-text--hintergrund-dunkel .kz-pfeil { color: var(--kz-on-dark); border-bottom-color: var(--kz-on-dark); }
.kz-text--hintergrund-dunkel .kz-prose strong { color: var(--kz-on-dark); }
@media (max-width: 820px) { .kz-text__raster { grid-template-columns: 1fr; gap: 28px; }
.kz-text--stil-cta .kz-text__spalte { text-align: left; align-items: flex-start; }
.kz-text--stil-portrait .kz-text__bild { max-width: 420px; }
}
.kz-text--stil-portrait .kz-text__raster:not(:has(.kz-text__bild)) { grid-template-columns: minmax(0, 1fr); }
.kz-text__spalte--allein { max-width: 46rem; }
.kz-text__zug img { width: min(100%, 300px); height: auto; display: block; }
/* ===== Quelle: src/css/05-werke.css ===== */ .kz-werke { padding: var(--kz-sektion) 0; border-top: 1px solid var(--kz-line); }
.kz-werke__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 5vw, 56px); }
.kz-werke__titel { font-family: var(--kz-serif); font-weight: 400; font-size: clamp(38px, 5vw, 60px); line-height: 1; color: var(--kz-ink); }
.kz-werke__titel em { font-style: italic; font-weight: 300; }
.kz-werke__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); align-items: start; }
.kz-werke__bild { margin: 0; overflow: hidden; background: var(--kz-bg-soft); }
.kz-werke__bild img { width: 100%; height: auto; transition: transform 0.9s var(--kz-ease); }
.kz-werke__bild:hover img { transform: scale(1.03); }
.kz-werke__bild:nth-child(3n + 1) { grid-column: 1 / span 7; }
.kz-werke__bild:nth-child(3n + 2) { grid-column: 9 / span 4; align-self: center; }
.kz-werke__bild:nth-child(3n) { grid-column: 4 / span 6; }
@media (max-width: 640px) { .kz-werke__kopf { flex-direction: column; align-items: flex-start; }
.kz-werke__bild:nth-child(n) { grid-column: 1 / -1; }
}
/* ===== Quelle: src/css/06-galerie.css ===== */ .kz-galerie { padding: 0 0 var(--kz-sektion); }
.kz-filter { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 0 0 22px; margin-bottom: clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--kz-line); }
.kz-filter__knopf { background: none; border: 0; padding: 6px 0; cursor: pointer; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kz-muted); border-bottom: 1px solid transparent; transition: color var(--kz-dauer), border-color var(--kz-dauer); }
.kz-filter__knopf sup { font-size: 0.85em; letter-spacing: 0; margin-left: 2px; }
.kz-filter__knopf:hover { color: var(--kz-ink); }
.kz-filter__knopf.is-aktiv { color: var(--kz-ink); border-bottom-color: var(--kz-ink); }
.kz-galerie__raster { column-count: 3; column-gap: clamp(16px, 2.6vw, 28px); }
.kz-werk { display: block; padding: 0; border: 0; background: var(--kz-bg-soft); cursor: zoom-in; overflow: hidden; width: 100%; margin: 0 0 clamp(16px, 2.6vw, 28px); break-inside: avoid; -webkit-column-break-inside: avoid; }
.kz-werk img { width: 100%; height: auto; transition: transform 0.8s var(--kz-ease), opacity var(--kz-dauer); }
.kz-werk:hover img { transform: scale(1.035); }
.kz-werk[hidden] { display: none; }
@media (max-width: 900px) { .kz-galerie__raster { column-count: 2; }
}
@media (max-width: 520px) { .kz-galerie__raster { column-gap: 12px; }
.kz-werk { margin-bottom: 12px; }
.kz-filter { gap: 4px 20px; }
}
.kz-modal { position: fixed; inset: 0; z-index: 200; background: rgb(17 24 46 / 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.kz-modal[hidden] { display: none; }
.kz-modal__fenster { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 48px); background: var(--kz-bg); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); box-shadow: 0 30px 80px rgb(17 24 46 / 0.35); overflow: hidden; }
.kz-modal__bild { background: var(--kz-bg-soft); display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 0; }
.kz-modal__bild img { max-height: calc(100vh - 100px); width: auto; max-width: 100%; object-fit: contain; }
.kz-modal__info { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; overflow-y: auto; }
.kz-modal__meta { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kz-muted); margin-bottom: 14px; }
.kz-modal__titel { font-family: var(--kz-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; color: var(--kz-ink); margin-bottom: 18px; }
.kz-modal__text { font-size: 14px; color: var(--kz-ink-soft); }
.kz-modal__daten { margin: auto 0 0; padding-top: 28px; border-top: 1px solid var(--kz-line); display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 13px; }
.kz-modal__daten:empty { display: none; }
.kz-modal__daten dt { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kz-muted); align-self: center; }
.kz-modal__daten dd { margin: 0; text-align: right; color: var(--kz-ink); }
.kz-modal__zu { position: absolute; top: 10px; right: 14px; z-index: 2; width: 40px; height: 40px; background: none; border: 0; font-size: 30px; line-height: 1; color: var(--kz-ink); cursor: pointer; }
.kz-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; background: rgb(250 250 248 / 0.8); border: 0; font-size: 34px; line-height: 1; color: var(--kz-ink); cursor: pointer; }
.kz-modal__nav--zurueck { left: 0; }
.kz-modal__nav--weiter { left: calc(60% - 44px); }
@media (max-width: 820px) { .kz-modal { padding: 0; align-items: stretch; }
.kz-modal__fenster { grid-template-columns: 1fr; grid-template-rows: auto 1fr; max-height: none; height: 100%; overflow-y: auto; }
.kz-modal__bild { padding: 56px 16px 16px; }
.kz-modal__bild img { max-height: 55vh; }
.kz-modal__nav { top: 28vh; }
.kz-modal__nav--weiter { left: auto; right: 0; }
}
body.kz-modal-offen { overflow: hidden; }
/* ===== Quelle: src/css/07-projekte.css ===== */ .kz-projekte { padding: 0 0 var(--kz-sektion); }
.kz-projekt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; padding: clamp(32px, 5vw, 64px) 0; }
.kz-projekt__bild { overflow: hidden; background: var(--kz-bg-soft); aspect-ratio: 4 / 3; }
.kz-projekt__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--kz-ease); }
.kz-projekt:hover .kz-projekt__bild img { transform: scale(1.03); }
.kz-projekt--rechts .kz-projekt__bild { order: 2; }
.kz-projekt__zeile { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kz-muted); margin-bottom: 14px; }
.kz-projekt__titel { font-family: var(--kz-serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; color: var(--kz-ink); }
.kz-projekt__rolle { margin-top: 14px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kz-ink-soft); }
.kz-projekt__beschreibung { margin-top: 22px; max-width: 30em; }
.kz-projekt__beschreibung p { font-size: 13.5px; color: var(--kz-ink-soft); }
@media (max-width: 820px) { .kz-projekt { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }
.kz-projekt--rechts .kz-projekt__bild { order: 0; }
}
.kz-ausstellungen { padding: var(--kz-sektion) 0; border-top: 1px solid var(--kz-line); }
.kz-ausstellungen__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 96px); align-items: start; }
.kz-ausstellungen__titel { font-family: var(--kz-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; color: var(--kz-ink); }
.kz-ausstellungen__liste { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--kz-line); }
.kz-ausstellungen__liste li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--kz-line); }
.kz-ausstellungen__jahr { font-size: 12px; letter-spacing: 0.08em; color: var(--kz-muted); }
.kz-ausstellungen__name { font-family: var(--kz-serif); font-size: 21px; color: var(--kz-ink); line-height: 1.2; }
.kz-ausstellungen__ort { font-size: 12.5px; color: var(--kz-ink-soft); text-align: right; }
@media (max-width: 820px) { .kz-ausstellungen__raster { grid-template-columns: 1fr; gap: 28px; }
.kz-ausstellungen__liste li { grid-template-columns: 56px minmax(0, 1fr); }
.kz-ausstellungen__ort { grid-column: 2; text-align: left; }
}
/* ===== Quelle: src/css/08-kontakt.css ===== */ .kz-kontakt { padding: clamp(32px, 5vw, 64px) 0 var(--kz-sektion); }
.kz-kontakt__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 7vw, 96px); align-items: start; }
.kz-kontakt__info h3, .kz-kontakt__info h4 { margin-top: 2em; }
.kz-kontakt__info h3:first-child, .kz-kontakt__info h4:first-child { margin-top: 0; }
.kz-kontakt__info p { font-size: 14px; color: var(--kz-ink); line-height: 1.6; }
.kz-kontakt__info a { text-decoration: none; }
.kz-kontakt__info a:hover { text-decoration: underline; }
.kz-form { display: grid; gap: 28px; }
.kz-form__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.kz-form__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kz-feld { display: block; }
.kz-feld > span { display: block; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kz-muted); margin-bottom: 4px; }
.kz-feld i { font-style: normal; }
.kz-feld input, .kz-feld textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--kz-line); border-radius: 0; padding: 12px 0; font-family: var(--kz-sans); font-size: 15px; color: var(--kz-ink); transition: border-color var(--kz-dauer); }
.kz-feld textarea { resize: vertical; min-height: 130px; }
.kz-feld input:focus, .kz-feld textarea:focus { outline: none; border-bottom-color: var(--kz-ink); }
.kz-feld input::placeholder, .kz-feld textarea::placeholder { color: var(--kz-muted); opacity: 0.8; }
.kz-feld.is-fehler input, .kz-feld.is-fehler textarea { border-bottom-color: var(--kz-fehler); }
.kz-form__check { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--kz-ink-soft); }
.kz-form__check input { margin-top: 3px; accent-color: var(--kz-ink); }
.kz-form__fuss { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.kz-form__meldung { font-size: 13px; }
.kz-form__meldung.is-ok { color: var(--kz-ok); }
.kz-form__meldung.is-fehler { color: var(--kz-fehler); }
.kz-form.is-sendet .kz-pfeil--knopf { opacity: 0.5; pointer-events: none; }
@media (max-width: 820px) { .kz-kontakt__raster { grid-template-columns: 1fr; }
.kz-form__zeile { grid-template-columns: 1fr; gap: 28px; }
}
.kz-kontakt__formular .cms-form { display: grid; gap: 28px; }
.kz-kontakt__formular .cms-form__group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 28px; }
.kz-kontakt__formular .cms-form__group-legend { padding: 0; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kz-muted); margin-bottom: 8px; }
.kz-kontakt__formular .cms-form__col-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.kz-kontakt__formular .cms-form__col-full { grid-column: 1 / -1; }
.kz-kontakt__formular .cms-form__col, .kz-kontakt__formular .cms-form__col-full { min-width: 0; }
.kz-kontakt__formular .cms-form__field { display: block; margin: 0; }
.kz-kontakt__formular .cms-form__label { display: block; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kz-muted); margin: 0 0 4px; font-weight: 400; }
.kz-kontakt__formular .cms-form__required { margin-left: 3px; color: var(--kz-muted); }
.kz-kontakt__formular .cms-form__input, .kz-kontakt__formular .cms-form__textarea, .kz-kontakt__formular .cms-form__select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--kz-line); border-radius: 0; padding: 12px 0; font-family: var(--kz-sans); font-size: 15px; color: var(--kz-ink); box-shadow: none; transition: border-color var(--kz-dauer); }
.kz-kontakt__formular .cms-form__textarea { resize: vertical; min-height: 130px; }
.kz-kontakt__formular .cms-form__input:focus, .kz-kontakt__formular .cms-form__textarea:focus, .kz-kontakt__formular .cms-form__select:focus { outline: none; border-bottom-color: var(--kz-ink); }
.kz-kontakt__formular .cms-form__input::placeholder, .kz-kontakt__formular .cms-form__textarea::placeholder { color: var(--kz-muted); opacity: 0.8; }
.kz-kontakt__formular .cms-form__input--error { border-bottom-color: var(--kz-fehler); }
.kz-kontakt__formular .cms-form__field-error { display: block; margin-top: 6px; font-size: 12.5px; color: var(--kz-fehler); }
.kz-kontakt__formular .cms-form__error-box { margin: 0 0 8px; padding: 12px 0; font-size: 13px; color: var(--kz-fehler); border-top: 1px solid var(--kz-fehler); border-bottom: 1px solid var(--kz-fehler); }
.kz-kontakt__formular .cms-form__checkbox-label, .kz-kontakt__formular .cms-form__radio-label { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--kz-ink-soft); letter-spacing: 0; text-transform: none; }
.kz-kontakt__formular .cms-form__checkbox-label input, .kz-kontakt__formular .cms-form__radio-label input { margin-top: 3px; accent-color: var(--kz-ink); }
.kz-kontakt__formular .cms-form__checkbox-label a { text-decoration: underline; text-underline-offset: 3px; }
.kz-kontakt__formular fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.kz-kontakt__formular .cms-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kz-kontakt__formular .cms-form__submit-row { display: flex; align-items: center; }
.kz-kontakt__formular .cms-form__submit { display: inline-flex; align-items: center; gap: 10px; font-family: var(--kz-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kz-ink); padding: 6px 0; border: 0; border-bottom: 1px solid var(--kz-ink); background: none; border-radius: 0; cursor: pointer; transition: gap var(--kz-dauer) var(--kz-ease); }
.kz-kontakt__formular .cms-form__submit::after { content: '\2192'; font-size: 14px; letter-spacing: 0; }
.kz-kontakt__formular .cms-form__submit:hover { gap: 16px; }
.kz-kontakt__formular .cms-form__success { font-family: var(--kz-serif); font-size: clamp(24px, 3vw, 32px); line-height: 1.25; color: var(--kz-ink); padding: 8px 0; }
@media (max-width: 820px) { .kz-kontakt__formular .cms-form__col-wrap { grid-template-columns: 1fr; gap: 28px; }
.kz-kontakt__formular .cms-form__col:empty { display: none; }
}
/* ===== Quelle: src/css/09-footer.css ===== */ footer.footer { background: var(--kz-bg); border-top: 1px solid var(--kz-line); color: var(--kz-ink-soft); padding: clamp(48px, 7vw, 80px) 0 32px; }
.footer-spalten__inner, .footer-spalten .container { max-width: calc(var(--kz-container) + 2 * var(--kz-gutter)); margin: 0 auto; padding: 0 var(--kz-gutter); width: 100%; }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .footer-grid { grid-template-columns: var(--footer-spalten, repeat(3, minmax(0, 1fr))); }
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand__logo { width: 150px; height: auto; display: block; }
.footer-text { font-size: 13px; line-height: 1.6; color: var(--kz-ink-soft); margin: 0; }
.footer-text p { margin: 0 0 6px; font-size: 13px; }
.footer-text a { color: var(--kz-ink); }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col__heading { font-family: var(--kz-sans); font-size: 10.5px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kz-muted); margin: 0 0 4px; line-height: 1.4; }
.footer-col ul, .footer-brand ul:not(.footer-social) { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: var(--kz-ink-soft); text-decoration: none; font-size: 13px; transition: color var(--kz-dauer); }
.footer-col a:hover { color: var(--kz-ink); }
.footer-col li > span { font-size: 13px; color: var(--kz-ink-soft); }
.footer-social { display: flex; gap: 14px; list-style: none; margin: 0; padding: 8px 0 0; }
.footer-contact-link, .footer-link--icon { display: flex; gap: 10px; align-items: flex-start; }
.footer-bottom { border-top: 1px solid var(--kz-line); margin-top: clamp(32px, 5vw, 56px); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; justify-content: space-between; align-items: flex-start; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; align-items: center; }
}
.footer-bottom p { color: var(--kz-muted); font-size: 11.5px; line-height: 1.5; margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.footer-legal a { color: var(--kz-muted); text-decoration: none; font-size: 11.5px; transition: color var(--kz-dauer); }
.footer-legal a:hover { color: var(--kz-ink); }
/* ===== Quelle: src/css/zz-cms-compat.css ===== */ /* ============================================================= Anpassungen an das CMS-Grundgerüst (index.php, inc.content_parts.php) ============================================================= */ /* Kopfbereich der Seite (Reiter "Inhalt": Überschrift, Unterzeile, Einleitung, Text) – die index.php gibt ihn nur aus, wenn etwas eingetragen ist */ .header-content { padding: calc(var(--kz-header) + 48px) var(--kz-gutter) 0; } .header-content .content-part1 { max-width: var(--kz-container); margin: 0 auto; } .header-content .headline { font-family: var(--kz-serif); font-weight: 300; font-size: clamp(32px, 4.5vw, 52px); line-height: 1.1; } .header-content .subline { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-top: .6em; } .header-content :is(.einleitung, .mainContent) { font-size: 15px; line-height: 1.75; margin-top: 1.2em; } .header-content :is(.headline, .subline, .einleitung, .mainContent):empty { display: none; } .header-content :is(.einleitung, .mainContent) > * + * { margin-top: 1.1em; } .header-content ~ #mainContainer:not(:has(.kz-kopf)) { padding-top: 0 !important; }
#mainContainer, #contentAussen, .contentBox { margin: 0; padding: 0; max-width: none; width: auto; background: transparent; }
.contentBox > section > .content { position: relative; margin: 0; padding: 0; max-width: none; }
.contentBox > section > .content > .abstand { display: block; }
.pt_0, .pt_-, .pt_ { height: 0; }
.pt_1 { height: 20px; }
.pt_2 { height: 50px; }
.pt_3 { height: 70px; }
.pt_4 { height: 120px; }
.pt_5 { height: 160px; }
.pt_6 { height: 240px; }
body.contentpage #mainContainer:not(:has(.kz-kopf)) { padding-top: var(--kz-header); }
.errorpage, .pagePasswordForm { max-width: var(--kz-container); margin: 0 auto; padding: calc(var(--kz-header) + 64px) var(--kz-gutter) 96px; }
#mainContainer .contentBox[style] { padding: calc(var(--kz-header) + 64px) var(--kz-gutter) 96px !important; max-width: var(--kz-container); }
.topSection { display: block; }
[class*="cms-fc-"] :is(h1, h2, h3, h4, p, li, a, span, em, strong, small, dt, dd, figcaption, .kz-eyebrow, .kz-pfeil) { color: inherit; }
[class*="cms-fc-"] .kz-pfeil { border-bottom-color: currentColor; }
.kz-fehler { padding: 0 0 var(--kz-sektion); }
.kz-fehler__links { display: flex; flex-wrap: wrap; gap: 20px 36px; }
.content_part_layout_12 { max-width: calc(var(--kz-container) + 2 * var(--kz-gutter)); margin: 0 auto; padding: 0 var(--kz-gutter) var(--kz-sektion); }
.content_part_layout_12 > .h1like { font-family: var(--kz-serif); font-size: clamp(32px, 4.5vw, 52px); font-weight: 300; line-height: 1.1; margin: 0 0 clamp(24px, 4vw, 48px); }
.cms-raster { gap: clamp(20px, 3vw, 40px); }
.cms-raster__zelle .h1like, .cms-raster__zelle .h2like { font-family: var(--kz-serif); font-size: clamp(24px, 3vw, 34px); font-weight: 300; line-height: 1.15; margin: 0 0 0.6em; }
.cms-raster__zelle :is(.einleitung, .haupttext) { font-size: 14px; line-height: 1.75; }
.cms-raster__zelle :is(.einleitung, .haupttext) > * + * { margin-top: 1.1em; }
.cms-raster__zelle :is(.einleitung, .haupttext) a { text-decoration: underline; text-underline-offset: 3px; }
.cms-raster__zelle .hauptbild img { display: block; width: 100%; height: auto; }
.cms-raster__zelle[class*="cms-bg-"] { padding: clamp(20px, 3vw, 40px); }