/* u-dan.de — Testlauf Startseite + Unterseite (statischer Prototyp) */

/* Schriften lokal eingebunden (statt @import von fonts.googleapis.com) —
   vermeidet die Übertragung der Besucher-IP an Google-Server beim Laden
   der Schrift, siehe CLAUDE.md Abschnitt 9. Dateien liegen in fonts/. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/barlow-condensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/eb-garamond-400.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/eb-garamond-400-italic.woff2') format('woff2');
}

:root {
  --schwarz: #111111;
  --grau-dunkel: #333333;
  --grau: #888888;
  --grau-hell: #e4e4e4;
  --grau-heller: #f2f2f2;
  --weiss: #ffffff;
  --akzent-orange: #EE8133;
  --akzent-orange-dunkel: #D3691E;
  --grotesk: 'Barlow', Arial, Helvetica, sans-serif;
  --grotesk-condensed: 'Barlow Condensed', Arial, Helvetica, sans-serif;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--weiss);
  color: var(--schwarz);
  font-family: var(--grotesk);
}

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

a { color: inherit; text-decoration: none; }

/* --- Header / Navigation --- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 60px 40px;
}

.wordmark {
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 0;
}

/* --- Statement-Zeile (Vorbild: große Headline auf der Utica-Beispielseite) --- */

.statement {
  padding: 0 60px 64px;
}

.statement p {
  margin: 0;
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: 58px;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--schwarz);
}

.statement .statement-sub {
  margin-top: 4px;
}

@media (max-width: 900px) {
  .statement { padding: 0 24px 40px; }
  .statement p { font-size: 32px; }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 44px;
}

nav {
  display: flex;
  align-items: center;
  gap: 40px;
  font-family: var(--grotesk);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0;
  color: var(--grau-dunkel);
}

nav a:hover,
.nav-dropdown:hover > span { color: var(--schwarz); }

.nav-dropdown { position: relative; cursor: default; }

.nav-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  padding: 20px 0 16px;
  background: var(--weiss);
  border: 0.5px solid var(--grau-hell);
  min-width: 280px;
  z-index: 20;
}

.nav-dropdown:hover .dropdown-menu { display: block; }

.dropdown-menu > a,
.dropdown-menu .dropdown-group > a,
.dropdown-menu .dropdown-label {
  display: block;
  padding: 11px 24px;
  white-space: nowrap;
  font-size: 17px;
  cursor: default;
}

.dropdown-menu .dropdown-group { display: flex; flex-direction: column; }

.dropdown-menu .dropdown-years,
.dropdown-menu .dropdown-sub {
  display: flex;
  flex-direction: column;
  padding-left: 18px;
}

.dropdown-menu .dropdown-years a,
.dropdown-menu .dropdown-sub a {
  padding: 8px 24px;
  font-size: 15px;
  color: var(--grau);
}

.dropdown-menu a:hover { background: var(--grau-heller); color: var(--schwarz); }

.nav-dropdown.active > span,
nav a.active { color: var(--schwarz); border-bottom: 1px solid var(--schwarz); padding-bottom: 3px; }

.header-lang {
  font-family: var(--grotesk);
  font-size: 15px;
  letter-spacing: 0;
  color: var(--grau);
}

.header-lang a { color: var(--grau); }
.header-lang a:hover { color: var(--schwarz); }
.header-lang a.active { color: var(--schwarz); font-weight: 500; }

.lang { color: var(--grau); margin-left: 6px; }

/* --- Footer --- */

footer {
  display: block;
  padding: 56px 60px 64px;
  margin-top: 60px;
  border-top: 0.5px solid var(--grau-hell);
}

.footer-wordmark {
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 0;
  color: var(--schwarz);
  margin-bottom: 36px;
}

.footer-columns {
  display: flex;
  gap: 100px;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--grotesk);
  font-size: 16px;
  color: var(--schwarz);
}

.footer-col p { margin: 0; }

footer a {
  color: var(--schwarz);
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer a[href^="mailto:"],
footer a[href^="tel:"] {
  text-decoration: none;
}

footer a:hover { color: var(--grau); }

@media (max-width: 560px) {
  footer { padding: 40px 24px 48px; }
  .footer-columns { gap: 32px; }
}

/* --- Werk-Kachel: gemeinsame Basis für Raster (Kategorie-Seiten) und Mosaik (Startseite) --- */

.work {
  margin: 0;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
}

.work img {
  width: 100%;
  display: block;
  background: var(--grau-heller);
}

.work figcaption {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* --- Kategorie-Seiten: gleichmäßiges Raster, quadratisch beschnitten (Übersichtlichkeit bei vielen Werken) --- */

.werk-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 44px;
  padding: 56px 44px;
}

.werk-raster .work img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* --- Startseite: Mosaik im Originalformat, reines CSS (column-count), kein JS/Layout-Engine nötig --- */

.werk-mosaik {
  column-count: 3;
  column-gap: 44px;
  padding: 40px 60px 80px;
}

.werk-mosaik .work {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 56px;
}

.werk-mosaik .work img {
  height: auto;
}

.work .titel {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--grau-dunkel);
}

.work .detail {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--grau);
}


/* --- Seitentitel (Kategorie-Seiten) --- */

.seiten-titel {
  padding: 56px 60px 0;
}

.seiten-eyebrow {
  display: block;
  font-family: var(--grotesk);
  font-size: 15px;
  color: var(--grau);
  margin-bottom: 10px;
}

.seiten-titel h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 44px;
  margin: 0;
}

/* --- Über-Seite --- */

.ueber-content {
  max-width: 680px;
  padding: 96px 60px 100px;
}

.ueber-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.75;
  color: var(--grau-dunkel);
  margin: 0 0 16px;
  white-space: pre-line;
}

.ueber-quote-attrib {
  display: block;
  font-family: var(--grotesk);
  font-style: normal;
  font-size: 14px;
  color: var(--grau);
  margin: 0 0 56px;
}

.ueber-text p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.75;
  color: var(--grau-dunkel);
  margin: 0 0 24px;
}

.ueber-text a { color: var(--grau-dunkel); }

.ueber-heading {
  display: block;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--schwarz);
  margin: 64px 0 40px;
}

.ueber-content > .ueber-heading:first-child {
  margin-top: 0;
}

/* --- Kontakt-Seite --- */

.kontakt-content {
  max-width: 900px;
  padding: 48px 60px 120px;
}

.kontakt-intro p {
  font-family: var(--grotesk);
  font-size: 19px;
  line-height: 1.6;
  color: var(--grau-dunkel);
  max-width: 560px;
  margin: 0 0 64px;
}

.kontakt-primary {
  display: block;
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.15;
  color: var(--schwarz);
  text-decoration: none;
  word-break: break-word;
  transition: color 0.2s;
}

.kontakt-primary:hover { color: var(--akzent-orange); }

.kontakt-primary--sekundaer {
  font-size: 32px;
  margin-top: 12px;
  color: var(--grau-dunkel);
}

.kontakt-primary--sekundaer:hover { color: var(--akzent-orange); }

.kontakt-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 0.5px solid var(--grau-hell);
}

.kontakt-label {
  display: block;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 12px;
}

.kontakt-block p {
  font-family: var(--grotesk);
  font-size: 17px;
  line-height: 1.6;
  color: var(--grau-dunkel);
  margin: 0;
}

@media (max-width: 900px) {
  .kontakt-content { padding: 36px 24px 80px; }
  .kontakt-primary { font-size: 34px; }
  .kontakt-primary--sekundaer { font-size: 22px; }
  .kontakt-grid { gap: 40px; }
}

/* --- Kontaktformular --- */

.kontakt-form {
  max-width: 560px;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 0.5px solid var(--grau-hell);
}

.kontakt-form-hinweis {
  font-family: var(--grotesk);
  font-size: 15px;
  color: var(--grau);
  margin: 0 0 28px;
}

.kontakt-form .feld {
  margin-bottom: 24px;
}

.kontakt-form label {
  display: block;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 10px;
}

.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--grau-hell);
  padding: 8px 0;
  font-family: var(--grotesk);
  font-size: 17px;
  color: var(--schwarz);
  background: transparent;
  transition: border-color 0.2s;
}

.kontakt-form input[type="text"]:focus,
.kontakt-form input[type="email"]:focus,
.kontakt-form textarea:focus {
  outline: none;
  border-bottom-color: var(--schwarz);
}

.kontakt-form textarea {
  min-height: 120px;
  resize: vertical;
}

.kontakt-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kontakt-form button {
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: 15px;
  color: var(--weiss);
  background: var(--schwarz);
  border: none;
  padding: 14px 32px;
  cursor: pointer;
  transition: background 0.2s;
}

.kontakt-form button:hover { background: var(--akzent-orange); }

.kontakt-form-status {
  font-family: var(--grotesk);
  font-size: 15px;
  padding: 14px 18px;
  margin-bottom: 28px;
}

.kontakt-form-status--ok {
  color: #2e7d46;
  background: #e4f3e8;
}

.kontakt-form-status--error {
  color: #c0392b;
  background: #fbe7e4;
}

/* --- Impressum & Rechtliches --- */

.legal-content {
  max-width: 680px;
  padding: 96px 60px 120px;
}

.legal-content > .ueber-heading:first-child {
  margin-top: 0;
}

.legal-text p {
  font-family: var(--grotesk);
  font-size: 16px;
  line-height: 1.75;
  color: var(--grau-dunkel);
  margin: 0 0 20px;
}

.legal-text a { color: var(--grau-dunkel); }

@media (max-width: 900px) {
  .legal-content { padding: 56px 24px 80px; }
}

/* --- Lightbox --- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  z-index: 100;
}

.lightbox.open { display: flex; }

.lightbox-inner {
  background: var(--weiss);
  max-width: 1360px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  overflow: hidden;
  position: relative;
}

.lightbox-image {
  flex: 1.4;
  background: var(--weiss);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 48px;
}

.lightbox-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 100%;
}

/* Querformat-Werke: Bild oben über die volle Breite, Text darunter,
   statt nebeneinander (verhindert, dass breite Bilder in der schmalen
   Spalte winzig dargestellt werden). */
.lightbox-inner.ist-querformat {
  flex-direction: column;
  max-width: 1160px;
  max-height: 94vh;
}

.lightbox-inner.ist-querformat .lightbox-image {
  flex: none;
  width: 100%;
  height: 66vh;
  padding: 44px 44px 24px;
}

.lightbox-inner.ist-querformat .lightbox-info {
  flex: none;
  width: 100%;
  min-width: 0;
  padding: 0 44px 40px;
}

.lightbox-info {
  flex: 1;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 280px;
}

.lightbox-info .titel {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
}

.lightbox-info .zeile {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--grau-dunkel);
}

.lightbox-info .preis-hinweis {
  margin-top: 16px;
  font-family: var(--grotesk-condensed);
  font-size: 12px;
  color: var(--grau);
  letter-spacing: 0.02em;
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--grotesk);
  font-size: 22px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--grau);
}

.lightbox-close:hover { color: var(--schwarz); }

.lightbox-nav {
  display: flex;
  gap: 16px;
  margin-top: auto;
  color: var(--grau);
  font-size: 20px;
}

.lightbox-nav button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}

.lightbox-nav button:hover { color: var(--schwarz); }

/* --- Katalog: horizontale Galerie --- */

.katalog-info {
  font-family: var(--grotesk);
  font-size: 15px;
  color: var(--grau);
  margin: 16px 0 0;
}

.katalog-mitte {
  display: flex;
  align-items: center;
  min-height: 62vh;
  margin-top: 48px;
}

.katalog-galerie {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  width: 100%;
  padding: 0 60px 24px;
  scroll-behavior: smooth;
  cursor: default;
}

/* Zeigerführung wie auf www.uwe-muehlhaeusser.de/ARCHITEKTUR: je nachdem,
   über welcher Bildhälfte die Maus steht, erscheint ein Pfeil-Cursor nach
   links oder rechts; ein Klick scrollt in die entsprechende Richtung. */
.katalog-galerie.cur-left {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='22' fill='rgba(10,10,10,0.55)'/%3E%3Cpath d='M28 15 L18 24 L28 33' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 24 24, w-resize;
}

.katalog-galerie.cur-right {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='22' fill='rgba(10,10,10,0.55)'/%3E%3Cpath d='M20 15 L30 24 L20 33' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 24 24, e-resize;
}

.katalog-item {
  position: relative;
  flex: 0 0 auto;
  height: 60vh;
  margin: 0;
}

.katalog-item img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.katalog-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  color: var(--grau-dunkel);
}

.katalog-item:hover .katalog-zoom,
.katalog-item:focus-within .katalog-zoom {
  opacity: 1;
}

.katalog-zoom svg { width: 18px; height: 18px; }
.katalog-zoom:hover { color: var(--schwarz); }

.katalog-galerie::-webkit-scrollbar { height: 8px; }
.katalog-galerie::-webkit-scrollbar-track { background: transparent; }
.katalog-galerie::-webkit-scrollbar-thumb { background: var(--grau-hell); }

/* Vereinfachte Lightbox-Variante für den Katalog: nur Bild, keine Textspalte. */

.lightbox-inner--katalog {
  background: transparent;
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: none;
  overflow: visible;
}

.lightbox-inner--katalog .lightbox-image {
  padding: 0;
  background: transparent;
}

.lightbox-inner--katalog .lightbox-image img {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
}

.lightbox-inner--katalog .lightbox-close {
  top: -44px;
  right: -8px;
  color: var(--weiss);
  font-size: 28px;
}

.lightbox-inner--katalog .lightbox-close:hover { color: var(--grau-hell); }

.lightbox-nav-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--grau-dunkel);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-nav-side:hover { color: var(--schwarz); }
.lightbox-nav-side.lightbox-prev { left: -60px; }
.lightbox-nav-side.lightbox-next { right: -60px; }

@media (max-width: 900px) {
  .katalog-item { height: 44vh; }
  .katalog-galerie { padding: 0 24px 20px; }
  .lightbox-nav-side.lightbox-prev { left: 8px; }
  .lightbox-nav-side.lightbox-next { right: 8px; }
}

/* --- Startseite: Fullscreen-Slideshow (angelehnt an die Menüführung von tschabalalaself.com) --- */

body.home { overflow: hidden; height: 100vh; }

body.home header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  border-bottom: none;
  background: transparent;
}

.hero-slider {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--weiss);
}

.hero-slider img {
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.hero-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15%;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--grau);
  z-index: 5;
}

.hero-arrow:hover { color: var(--schwarz); }
.hero-arrow.prev { left: 0; justify-content: flex-start; padding-left: 24px; }
.hero-arrow.next { right: 0; justify-content: flex-end; padding-right: 24px; }

.hero-caption {
  position: absolute;
  left: 32px;
  bottom: 28px;
  z-index: 5;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--grau-dunkel);
}

.hero-caption .normal { font-style: normal; color: var(--grau); }

.hero-pagination {
  position: absolute;
  right: 32px;
  bottom: 28px;
  z-index: 5;
  font-family: var(--grotesk-condensed);
  font-size: 12px;
  color: var(--grau);
}

/* --- Hamburger-Menü + Vollflächen-Overlay --- */

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 22px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.hamburger span {
  height: 1.5px;
  background: var(--schwarz);
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--schwarz);
  display: none;
  flex-direction: column;
  padding: 28px 40px;
  z-index: 50;
}

.menu-overlay.open { display: flex; }

.menu-overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-overlay-top .wordmark { color: var(--weiss); }

.menu-overlay-close {
  background: none;
  border: none;
  color: var(--weiss);
  font-size: 24px;
  cursor: pointer;
}

.menu-overlay-links {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 64px;
  font-family: var(--grotesk-condensed);
}

.menu-overlay-links a {
  color: var(--grau-hell);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.menu-overlay-links a.active,
.menu-overlay-links a:hover { color: var(--weiss); }

.menu-overlay-lang {
  margin-top: auto;
  font-family: var(--grotesk-condensed);
  font-size: 12px;
  color: var(--grau);
}

/* --- Festes Seitenmenü links (Vorbild alejandrojavaloyas.com) + vertikaler Werk-Stack --- */

body.home-v2 { margin: 0; }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  padding: 40px 28px;
  overflow-y: auto;
  border-right: 0.5px solid var(--grau-hell);
  display: flex;
  flex-direction: column;
  text-align: left;
}

.sidebar .wordmark-block {
  font-family: var(--grotesk-condensed);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin-bottom: 44px;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--grotesk-condensed);
  font-size: 17px;
  letter-spacing: 0.02em;
}

/* Trennstrich zwischen den Hauptmenüpunkten (Arbeiten / Katalog / About / Kontakt / Impressum / Rechtliches) */
.sidebar nav > *:not(:first-child) {
  border-top: 0.5px solid var(--grau-hell);
  padding-top: 18px;
}

.sidebar .menu-group,
.sidebar .submenu,
.sidebar .submenu-years {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sidebar nav > a,
.sidebar .menu-group > .menu-group-label {
  font-weight: 500;
  color: var(--schwarz);
}

.sidebar .menu-group-label { cursor: default; }

.sidebar .submenu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding-left: 14px;
  font-size: 15px;
}

.sidebar .submenu a,
.sidebar .submenu .menu-group-label {
  color: var(--grau-dunkel);
  font-weight: 400;
}

.sidebar .submenu .submenu {
  padding-left: 12px;
}

.sidebar .submenu-years {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-left: 12px;
  max-height: 180px;
  overflow-y: auto;
}

.sidebar .submenu-years a { color: var(--grau); font-size: 13px; }
.sidebar .submenu-years a:hover { color: var(--schwarz); }

.sidebar nav a:hover { color: var(--schwarz); }

.sidebar-lang {
  margin-top: auto;
  padding-top: 32px;
  font-family: var(--grotesk-condensed);
  font-size: 11px;
  color: var(--grau);
  letter-spacing: 0.03em;
}

.main-content {
  margin-left: 280px;
  padding: 56px 64px;
}

.stack {
  max-width: 640px;
  margin: 0 auto;
}

.stack-item { margin: 0 0 72px; }
.stack-item:last-child { margin-bottom: 0; }

.stack-item img { width: 100%; height: auto; }

.stack-item figcaption {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stack-item .titel {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--grau-dunkel);
}

.stack-item .detail {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--grau);
}

/* --- Startseite: einzelnes wechselndes Bild im Querformat --- */

.main-content--hero-single {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-single {
  width: 100%;
  max-width: 820px;
}

.hero-single-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--grau-heller);
  overflow: hidden;
}

.hero-single-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.7s ease;
}

.hero-single-frame img.ist-ausblendend { opacity: 0; }

.hero-single-caption {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}

.hero-single-caption .titel {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--grau-dunkel);
}

.hero-single-caption .detail {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--grau);
}

/* --- Startseite Variante "Utica": randloses Bild + 2-spaltiges Werk-Raster --- */

.main-content--utica {
  margin-left: 0;
  padding: 0;
}

.hero-bleed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--grau-heller);
}

.hero-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-bleed img.ist-ausblendend { opacity: 0; }

.hero-bleed .hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--grau-dunkel);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  bottom: auto;
  padding: 0;
}

.hero-bleed .hero-arrow:hover { color: var(--schwarz); background: #fff; }
.hero-bleed .hero-arrow.prev { left: 24px; }
.hero-bleed .hero-arrow.next { right: 24px; }

@media (max-width: 900px) {
  .hero-bleed .hero-arrow { width: 36px; height: 36px; font-size: 16px; }
  .hero-bleed .hero-arrow.prev { left: 12px; }
  .hero-bleed .hero-arrow.next { right: 12px; }
}

.main-inner {
  padding: 48px 64px 96px;
}

.hero-bleed-caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 18px 0 72px;
}

.hero-bleed-caption .titel {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--grau-dunkel);
}

.hero-bleed-caption .detail {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--grau);
}

.works-intro {
  margin-top: 40px;
}

.works-intro h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  margin: 0 0 40px;
}

.works-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 40px;
}

.works-grid-2col figure { margin: 0; }

.works-grid-2col .frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--grau-heller);
}

.works-grid-2col .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

.works-grid-2col figcaption {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.works-grid-2col .titel {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--grau-dunkel);
}

.works-grid-2col .detail {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--grau);
}

.kategorie-kachel {
  display: block;
  color: inherit;
  text-decoration: none;
}

.kategorie-kachel:hover .frame img { opacity: 0.85; }
.kategorie-kachel:hover .titel { color: var(--schwarz); }

.frame--kontakt {
  background: var(--akzent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.frame--kontakt span {
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: 0.01em;
  color: var(--weiss);
}

.kategorie-kachel--kontakt:hover .frame--kontakt { background: var(--akzent-orange-dunkel); }

@media (max-width: 700px) {
  .works-grid-2col { grid-template-columns: 1fr; gap: 40px; }
  .main-inner { padding: 40px 24px 64px; }
}

/* --- Responsive --- */

@media (max-width: 900px) {
  .werk-raster { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; padding: 36px 24px; }
  .werk-mosaik { column-count: 2; column-gap: 28px; padding: 36px 24px; }
  .werk-mosaik .work { margin-bottom: 36px; }
  header { padding: 16px 20px; flex-wrap: wrap; gap: 12px; }
  nav { flex-wrap: wrap; gap: 16px; }
  .lightbox-inner { flex-direction: column; max-height: none; overflow-y: auto; }
  .lightbox-image img { max-height: 50vh; }
  .ueber-content { padding: 56px 24px 64px; }
  .ueber-heading { font-size: 24px; margin: 44px 0 26px; }
}

@media (max-width: 560px) {
  .werk-raster { grid-template-columns: 1fr; }
  .werk-mosaik { column-count: 1; }
}

@media (max-width: 700px) {
  body.home header { padding: 16px 20px; }
  .hero-caption { left: 20px; bottom: 20px; font-size: 14px; }
  .hero-pagination { right: 20px; bottom: 20px; }
  .hero-arrow { width: 20%; }
  .menu-overlay-links a { font-size: 24px; }
  .menu-overlay-links { gap: 18px; margin-top: 48px; }
}

@media (max-width: 860px) {
  .sidebar { position: static; width: auto; border-right: none; border-bottom: 0.5px solid var(--grau-hell); }
  .main-content { margin-left: 0; padding: 40px 24px; }
  .main-content--hero-single { min-height: auto; padding-top: 40px; padding-bottom: 40px; }
  .main-content--utica { padding: 0; }
}