/* JK Kotulla Architekten – Stil
   Maße als Anteile der Fensterbreite (vw), wie im bisherigen Layout. */
:root {
  --grau: #6e6e6e;
  --weiss: #fff;
  --text: clamp(16px, 1.44vw, 26px);
  --titel: clamp(22px, 2.16vw, 40px);
  --rand: clamp(14px, 1.1vw, 20px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--grau);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: var(--text);
  line-height: 1.15;
}
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: #222; }
img { display: block; max-width: 100%; height: auto; }
h1, h2 { font-weight: normal; font-size: var(--titel); line-height: 1.1; margin: 0 0 .6em; }
p { margin: 0 0 1.1em; }

/* Kopf / Logo */
.kopf { position: fixed; top: 0; left: 0; z-index: 10; padding: calc(var(--rand) * .6) var(--rand); }
.logo { font-size: var(--titel); letter-spacing: -.01em; }
.logo { display: block; }
.logo-svg { display: block; height: .955em; width: auto; max-width: calc(100vw - 2 * var(--rand)); margin-top: .12em; }
.start .logo { color: var(--weiss); }

/* Startseite */
.hero { position: fixed; inset: 0; display: block; background: #d8d4cc; }
.hero img { width: 100%; height: 100%; object-fit: cover; max-width: none; }

/* Instagram-Link (nur Handy, Startseite) */
.insta { display: none; }

/* Menü */
.menu ul { list-style: none; margin: 0; padding: calc(var(--titel) * 2.9) var(--rand) 0; }
.menu li { font-size: var(--titel); line-height: 1.17; }

/* Listen: Arbeiten + Aktuelles */
.liste { padding: 5.4vw 1vw 4vw 48.4vw; }
.zeile { display: grid; grid-template-columns: 1fr 19.3vw; gap: 2.5vw; margin-bottom: 1.5vw; align-items: start; }
.zeile-text h2 { margin-top: -.1em; }
.zeile-bild { display: block; overflow: hidden; background: #eee; }
.zeile-bild img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
a.zeile-bild:hover img { opacity: .85; }
.hoch { aspect-ratio: 2 / 3; }
.quadrat { aspect-ratio: 1 / 1; }
.ohne-bild { grid-template-columns: 1fr; margin-bottom: 2.5vw; }
.kurz .zeile-text p { margin-bottom: .5em; }

/* Projektseite */
.projekt { margin-left: 60.7vw; width: 37.4vw; padding: .4vw 0 4vw; }
.projekt h1 { margin-top: 1.2vw; }
.galerie-bild { display: block; cursor: zoom-in; }
.galerie { display: grid; gap: 1.2vw; margin-top: 2.5vw; }
.zurueck { margin-top: 2.5vw; }

/* Büro */
.buero h1 { position: absolute; top: calc(var(--titel) * 2.2); left: var(--rand); }
.buero-inhalt { margin-left: 45.3vw; width: 54.1vw; padding-top: 5vw; }
.buero-inhalt img { width: 100%; margin-bottom: 2vw; }
.abstand { margin-top: 2.2em; }

/* Impressum */
.impressum { padding: calc(var(--titel) * 2.4) .4vw 4vw; max-width: 1400px; }
.impressum .gross { font-size: var(--text); }
.impressum .klein { font-size: 13px; line-height: 1.4; margin-top: 3em; max-width: 1250px; }
.impressum .klein p { margin-bottom: 1.6em; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(255,255,255,.97); display: flex; align-items: center; justify-content: center; }
.lb img { max-width: 92vw; max-height: 90vh; width: auto; height: auto; }
.lb button { position: absolute; background: none; border: 0; color: var(--grau); font: inherit; font-size: 34px; cursor: pointer; padding: 18px; }
.lb button:hover { color: #222; }
.lb .zu { top: 0; right: 4px; }
.lb .vor { right: 4px; top: 50%; transform: translateY(-50%); }
.lb .zurueck-btn { left: 4px; top: 50%; transform: translateY(-50%); }

/* Tablet / Handy */
@media (max-width: 800px) {
  :root { --text: 17px; --titel: 24px; --rand: 16px; }
  .kopf { position: static; padding: 14px 16px 0; }
  .start .kopf { position: fixed; }
  .insta { display: block; position: fixed; z-index: 11; left: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); padding: 6px 0; color: var(--weiss); font-size: 17px; text-shadow: 0 0 8px rgba(0,0,0,.35); }
  .insta:hover, .insta:focus-visible { color: var(--weiss); opacity: .8; }
  .insta svg, .insta img { display: block; width: 28px; height: 28px; filter: drop-shadow(0 0 6px rgba(0,0,0,.35)); }
  .menu ul { padding-top: 40px; }
  .liste { padding: 28px 16px 40px; }
  .zeile { grid-template-columns: minmax(0, 1fr) 38vw; gap: 14px; margin-bottom: 22px; }
  .liste .zeile-text { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  .liste h2 { font-size: 19px; }
  .liste p { font-size: 14px; line-height: 1.25; }
  .projekt { margin: 0; width: auto; padding: 18px 16px 40px; }
  .projekt h1 { margin-top: 18px; }
  .galerie { gap: 12px; margin-top: 24px; }
  .buero h1 { position: static; padding: 24px 16px 0; margin: 0; }
  .buero-inhalt { margin: 0; width: auto; padding: 16px; }
  .impressum { padding: 24px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }