/* Nachbau des Layouts der bisherigen Wix-Seite von Julian Belz Fotografie */
@font-face { font-family: "Dancing Script"; src: url("/fonts/dancing-script-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Questrial"; src: url("/fonts/questrial-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --gold: #bc9b5d;
  --cream: #fcf8ee;
  --header: #f8f8f8;
  --nav-active: #ede9e1;
  --text: #4d4b4b;
  --dark: #292929;
  --btn-dark: #2b2b2b;
  --line: #d9d9d9;
  --script: "Dancing Script", "Brush Script MT", cursive;
  --light: "Jost", "Futura", "Century Gothic", sans-serif;
  --helv: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page: 980px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--text); font: 300 16px/1.6 var(--light); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 0; background: #000; color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ---------- Kopfbereich ---------- */
.site-head { background: var(--header); padding: 30px 16px 18px; text-align: center; position: relative; }
.logo { display: inline-block; }
.logo img { width: 227px; height: auto; margin: 0 auto; }
.site-head nav ul { list-style: none; margin: 22px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.site-head nav a { display: block; padding: 7px 19px; font: 400 15px/1.2 var(--helv); color: #444; text-decoration: none; }
.site-head nav a:hover { color: var(--gold); }
.site-head nav a[aria-current="page"] { background: var(--nav-active); }
.menu-btn { display: none; }

/* ---------- Kopfteil mit zwei Fotos und Textfeld ---------- */
.hero { display: grid; grid-template-columns: 28% 44% 28%; grid-template-rows: 610px; }
.hero-photo { min-height: 0; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-panel { background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; }
.script { font-family: var(--script); font-weight: 700; color: var(--gold); font-size: 72px; line-height: 1; margin: 0; }
.subtitle { font: 400 15px/1.2 var(--light); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); margin: 12px 0 30px; }
.hero-text { max-width: 290px; font-size: 16px; line-height: 1.55; }
.hero-text p { margin: 0; }
.gold-btn {
  display: inline-block; margin-top: 30px; min-width: 280px; padding: 9px 24px;
  background: var(--gold); color: #fff; text-decoration: none; text-align: center;
  font: 300 19px/1.4 var(--light); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.gold-btn:hover { background: #a98a50; color: #fff; }

/* ---------- Galerie (Collage wie bisher) ---------- */
.gallery { max-width: 1000px; margin: 64px auto 40px; padding: 0 16px; display: grid; gap: 10px; }
.g-row { display: flex; gap: 10px; }
.g-row .g-item { flex: calc(var(--ar) * 100) 1 0; min-width: 0; }
.g-item { display: block; cursor: zoom-in; }
.g-item img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }
.g-stack { display: grid; grid-template-columns: var(--cols); gap: 10px; }
.g-col { display: grid; gap: 10px; align-content: start; }
.g-big img { height: 100%; aspect-ratio: auto; }
.g-item:hover img { opacity: 0.92; }

/* ---------- Startseite: Kurzkontakt ---------- */
.quick-contact { max-width: 680px; margin: 0 auto; padding: 56px 16px 30px; }
.quick-contact h2 { font: 400 20px/1.2 "Questrial", var(--helv); color: #000; margin: 0 0 12px; }
.quick-contact form { display: grid; grid-template-columns: 1fr 1fr 132px; gap: 0 10px; }
.quick-contact input { font: 300 14px var(--light); color: var(--dark); border: 1px solid #9b9b9b; border-radius: 0; padding: 10px 16px; height: 36px; background: #fff; }
.quick-contact button { font: 300 15px var(--light); background: var(--btn-dark); color: #fff; border: 0; height: 36px; cursor: pointer; margin-left: -10px; }
.quick-contact button:hover { background: #000; }
.quick-contact .privacy-note { margin-top: 10px; }

/* ---------- Über mich ---------- */
.about { max-width: var(--page); margin: 0 auto; padding: 26px 16px 0; text-align: center; }
.about-photo { margin: 0 auto; max-width: 480px; }
.about-photo figcaption { text-align: right; font-size: 11px; color: var(--dark); margin-top: 6px; }
.about-text { max-width: 480px; margin: 22px auto 0; font-size: 15px; line-height: 1.7; }
.about-text p { margin: 0 0 1.5em; }

/* ---------- Kontaktbereich (Über mich, FAQ) ---------- */
.contact { max-width: var(--page); margin: 0 auto; padding: 40px 16px 30px; text-align: center; }
.contact-head { font: 700 26px/1.3 var(--helv); color: var(--dark); margin: 0 0 26px; }
.contact-addr { font-size: 15px; line-height: 1.6; margin: 0 0 30px; }
.contact-form { max-width: 370px; margin: 0 auto; text-align: left; display: grid; gap: 8px; }
.contact-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form label { display: grid; gap: 3px; font: 300 14px var(--light); color: var(--dark); }
.contact-form input, .contact-form textarea {
  font: 300 13px var(--light); color: var(--dark); background: #fff;
  border: 1px solid #c8c8c8; border-radius: 0; padding: 6px 9px; width: 100%;
}
.contact-form textarea { resize: vertical; min-height: 108px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--dark); }
.contact-form button { margin-top: 2px; font: 300 14px var(--light); background: var(--btn-dark); color: #fff; border: 0; padding: 5px; cursor: pointer; }
.contact-form button:hover { background: #000; }
.privacy-note { font-size: 12px; line-height: 1.5; color: #6b6b6b; margin: 4px 0 0; }
.hp { position: absolute; left: -9999px; }

/* ---------- FAQ ---------- */
.faq { max-width: 680px; margin: 0 auto; padding: 40px 16px 20px; }
.faq .script { font-size: 44px; margin: 0 0 26px 190px; }
.faq details { border-bottom: 1px solid var(--line); color: var(--dark); }
.faq summary { list-style: none; cursor: pointer; font-size: 15px; line-height: 1.4; padding: 26px 34px 22px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 30px; width: 8px; height: 8px; border-right: 1px solid var(--dark); border-bottom: 1px solid var(--dark); transform: rotate(45deg); }
.faq details[open] summary::after { transform: rotate(-135deg); top: 34px; }
.faq details p { font-size: 13px; line-height: 1.6; margin: 0 0 1.2em; }

/* ---------- Impressum, Datenschutz ---------- */
.legal { max-width: 720px; margin: 0 auto; padding: 30px 16px 40px; font-size: 14px; line-height: 1.6; }
.legal h1 { font: 700 22px/1.3 var(--helv); color: var(--dark); text-transform: uppercase; margin: 0 0 22px; }
.legal h2 { font: 700 15px/1.3 var(--helv); color: var(--dark); margin: 34px 0 12px; }
.legal a { text-decoration: underline; }
.legal .small { font-size: 12px; }
.thanks { text-align: center; min-height: 40vh; padding-top: 80px; }

/* ---------- Fußzeile (bleibt unten am Bildschirm stehen) ---------- */
.site-foot { position: sticky; bottom: 0; z-index: 10; background: rgba(255, 255, 255, 0.72); text-align: center; padding: 14px 16px 12px; margin-top: 40px; }
.social { display: flex; justify-content: center; gap: 22px; margin: 0 0 4px; }
.social a { display: block; width: 18px; height: 18px; color: #000; }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.foot-line { font-size: 12.5px; color: var(--text); margin: 0; }
.foot-line a { text-decoration: underline; }
.foot-line .sep { margin: 0 5px; }
.nw { white-space: nowrap; }

/* ---------- Bildansicht ---------- */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(255, 255, 255, 0.97); display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; }
.lightbox[hidden] { display: none; }
.lightbox img { grid-column: 2; max-height: 92vh; max-width: 100%; margin: auto; object-fit: contain; }
.lightbox button { background: none; border: 0; color: #333; cursor: pointer; font: 300 46px/1 var(--light); padding: 10px; }
.lb-prev { grid-column: 1; grid-row: 1; }
.lb-next { grid-column: 3; grid-row: 1; }
.lightbox .lb-close { position: absolute; top: 10px; right: 18px; font-size: 40px; }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1000px) {
  .hero { grid-template-rows: 520px; }
  .script { font-size: 60px; }
  .gold-btn { min-width: 220px; }
}
@media (max-width: 760px) {
  .site-head { padding: 16px 16px 14px; display: flex; align-items: center; justify-content: space-between; text-align: left; flex-wrap: wrap; }
  .logo img { width: 150px; margin: 0; }
  .menu-btn { display: grid; gap: 5px; background: none; border: 0; padding: 10px 4px; cursor: pointer; }
  .menu-btn span:not(.sr) { display: block; width: 26px; height: 2px; background: #333; }
  .site-head nav { flex-basis: 100%; display: none; }
  .site-head nav.open { display: block; }
  .site-head nav ul { flex-direction: column; margin-top: 12px; }
  .site-head nav a { padding: 13px 8px; border-top: 1px solid #e6e6e6; font-size: 16px; }

  .hero { grid-template-columns: 1fr 1fr; grid-template-rows: auto 300px; }
  .hero-panel { grid-column: 1 / -1; grid-row: 1; padding: 44px 24px 48px; }
  .hero-photo { grid-row: 2; }
  .script { font-size: 54px; }
  .gold-btn { min-width: 0; width: 100%; max-width: 280px; }

  .gallery { margin-top: 24px; gap: 6px; padding: 0 6px; }
  .g-row, .g-stack, .g-col { gap: 6px; }

  .quick-contact form { grid-template-columns: 1fr; gap: 8px; }
  .quick-contact button { margin-left: 0; }

  .faq .script { margin-left: 0; }
  .contact-form .two { grid-template-columns: 1fr; }

  .site-foot { position: static; background: #fff; }
  .foot-line a, .foot-line span[data-year] { white-space: nowrap; }
  .foot-line { line-height: 1.9; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }