/* ==========================================================================
   caroKaa Fotografie – 1:1 Nachbau
   ========================================================================== */

/* Poppins wird lokal eingebunden (kein Google-Fonts-CDN mehr noetig) */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #07393b;
  --card: #55787a;
  --card-light: #6a8c8e;
  --accent: #bd957f;
  --text: #b5b9c5;
  --white: #ffffff;
  --radius-pill: 50px;
  --container: 1250px;
  --font: 'Poppins', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
}

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

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

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3, h4 {
  font-weight: 300;
  color: var(--text);
  margin: 0 0 20px;
}

h1 { font-size: 56px; line-height: 1.25; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }

p { margin: 0 0 20px; }

.accent { color: var(--accent); }

.btn {
  display: inline-block;
  background: var(--card);
  color: var(--white);
  padding: 20px 40px;
  border-radius: var(--radius-pill);
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: none;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}

.btn:hover { background: var(--accent); }

.center { text-align: center; }

/* ---------- Header ---------- */
header.site-header {
  background: var(--bg);
  padding: 25px 0;
}

header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.logo img { height: 46px; }

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 35px;
}

nav.main-nav a {
  font-size: 16px;
  font-weight: 400;
}

nav.main-nav a.active { color: var(--accent); }

nav.main-nav .contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
}

.header-address {
  font-size: 15px;
  text-align: right;
  color: var(--text);
}

.menu-toggle { display: none; background: none; border: none; color: var(--white); font-size: 28px; cursor: pointer; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: stretch;
  min-height: 680px;
}

.hero-image { overflow: hidden; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; min-height: 400px; }

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 30px 40px 55px;
}

.hero-content h1 { font-size: 72px; line-height: 1.19; }

/* ---------- Split section (image + text) ---------- */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 90px 0;
}

.split-section.reverse .split-image { order: 2; }
.split-section.reverse .split-text { order: 1; }

.split-image img { border-radius: 2px; width: 100%; object-fit: cover; }

.split-text p { font-size: 18px; line-height: 32px; }
.split-text h3 { font-size: 20px; font-weight: 400; }
.split-text .btn { margin-top: 10px; }

/* Staggered duo of portrait images (as in the original: two overlapping,
   offset portrait shots) - proportions measured from the original layout:
   wrapper 641x577, each image 300x416 (46.8% wide / 72.1% tall of wrapper),
   second image offset 53.2% from left / 27.9% from top. */
.stagger-section { grid-template-columns: 45% 55%; }

.stagger-wrap {
  position: relative;
  aspect-ratio: 641 / 577;
}

.stagger-wrap img {
  position: absolute;
  width: 46.8%;
  height: 72.1%;
  object-fit: cover;
  border-radius: 2px;
}

.stagger-wrap .stagger-1 { left: 0; top: 0; }
.stagger-wrap .stagger-2 { left: 53.2%; top: 27.9%; }

/* ---------- Testimonials ---------- */
.testimonials { padding: 40px 0 90px; }
.testimonials h2 { text-align: center; margin-bottom: 50px; }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.testimonial-card {
  background: var(--card);
  padding: 60px 40px 40px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
}

.testimonial-card .quote-mark {
  flex: 0 0 auto;
  font-size: 60px;
  color: rgba(255,255,255,.25);
  font-family: Georgia, serif;
  line-height: 1;
  margin-bottom: 10px;
}

/* Testimonial text varies a lot in length between cards, but all cards in
   a row are stretched to equal height (grid default). Centering the body
   in the remaining space below the quote mark keeps short quotes (e.g.
   "Jörg H.") visually balanced instead of stranded at the top - matching
   the original, which hand-tunes a top offset per card for the same effect. */
.testimonial-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-card p { font-size: 16px; line-height: 36px; margin: 0; }

.testimonial-card .author {
  margin-top: 20px;
  color: var(--white);
}

/* ---------- Photo strip (Kundenstimmen): narrow / wide / narrow,
   proportions measured from the original: 292 / 562 / 292 px ---------- */
.gallery-strip {
  display: grid;
  grid-template-columns: 1fr 1.92fr 1fr;
  gap: 12px;
  margin-top: 125px;
}

.gallery-strip img { width: 100%; object-fit: cover; border-radius: 2px; }
.gallery-strip .g-narrow { aspect-ratio: 292 / 405; }
.gallery-strip .g-wide { aspect-ratio: 562 / 406; }

/* ---------- Photo grid at page bottom: row of 2 landscape shots,
   then a row of 3 portrait shots (measured from the original) ---------- */
.gallery-row { display: grid; gap: 10px; }
.gallery-row + .gallery-row { margin-top: 20px; }
.gallery-row-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-row-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-row img { width: 100%; object-fit: cover; border-radius: 2px; }
.gallery-row-2 img { aspect-ratio: 585 / 390; }
.gallery-row-3 img { aspect-ratio: 386 / 579; }
.gallery-grid { padding: 60px 0; }

/* ---------- Pricing ---------- */
.pricing { padding: 90px 0 40px; text-align: center; }

.pricing-formula {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  flex-wrap: wrap;
  margin: 50px 0 70px;
  font-size: 22px;
}

.pricing-formula .op { font-size: 30px; padding-top: 6px; }
.pricing-formula .amount { font-size: 24px; font-weight: 300; margin-top: 10px; color: var(--white); }

.pricing-details { text-align: left; max-width: 900px; margin: 0 auto; padding-bottom: 60px; }
.pricing-details h3 { color: var(--accent); }
.pricing-details ul { list-style: none; padding: 0; margin: 0; }
.pricing-details li { margin-bottom: 35px; }
.pricing-details li strong { display: block; color: var(--accent); font-weight: 500; margin-bottom: 8px; font-size: 18px; }

/* ---------- Studio ---------- */
.studio-section-wrap { padding: 40px 0 90px; }

.studio-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.studio-collage { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.studio-collage img { width: 100%; height: 100%; object-fit: cover; }
.studio-collage .big { grid-row: 1 / 3; }

/* ---------- FAQ ---------- */
.faq { padding: 40px 0 90px; }
.faq .eyebrow { text-align: center; color: var(--accent); text-transform: uppercase; letter-spacing: 3px; font-size: 14px; margin-bottom: 10px; }
.faq h2 { text-align: center; margin-bottom: 60px; }

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.faq-item {
  background: var(--card);
  padding: 35px 40px;
}

.faq-item h4 { display: flex; align-items: center; gap: 15px; color: var(--text); margin-bottom: 15px; font-weight: 400; }
.faq-item .q-icon {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-style: normal;
}
.faq-item p { margin: 0; font-size: 15px; }

/* ---------- Footer ---------- */
footer.site-footer {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 30px 0;
}

footer.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 14px;
}

footer.site-footer .footer-links { display: flex; gap: 30px; letter-spacing: 1px; }
footer.site-footer .footer-links a:hover { color: var(--accent); }

/* ---------- Page header (legal pages / contact) ---------- */
.page-title { padding: 70px 0 50px; text-align: center; }
.page-title h1 { font-size: 60px; color: var(--text); opacity: .85; }

.legal-content { padding: 0 0 90px; max-width: 900px; margin: 0 auto; }
.legal-content h2 { color: var(--accent); font-size: 24px; margin-top: 45px; }
.legal-content p { font-size: 15px; }

/* ---------- Contact form ---------- */
.contact-form-wrap { padding: 0 0 100px; }
.contact-form { background: var(--card); padding: 50px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea {
  width: 100%;
  background: var(--card-light);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  padding: 18px 20px;
  font-family: var(--font);
  font-size: 15px;
  border-radius: 2px;
}

.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form ::placeholder { color: rgba(255,255,255,.75); }

.field-group { margin: 35px 0; }
.field-group > label { display: block; font-weight: 700; color: var(--white); margin-bottom: 15px; }

.radio-row, .checkbox-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.radio-row input, .checkbox-row input { width: 20px; height: 20px; }

.contact-form .btn { border: none; font-family: var(--font); background: var(--accent); }
.contact-form .btn:hover { background: var(--card); }
.contact-form .btn:disabled { opacity: .6; cursor: default; }

/* Honeypot-Feld: fuer echte Besucher unsichtbar, aber im DOM vorhanden
   (nicht display:none, da manche Bots das erkennen) */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-message {
  padding: 18px 24px;
  border-radius: 4px;
  margin-bottom: 25px;
  font-size: 15px;
}

.form-message.success {
  background: rgba(189, 149, 127, .18);
  border: 1px solid var(--accent);
  color: var(--white);
}

.form-message.error {
  background: rgba(200, 90, 90, .18);
  border: 1px solid #c85a5a;
  color: var(--white);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero, .split-section, .studio-section, .stagger-section { grid-template-columns: 1fr; }
  .split-section.reverse .split-image,
  .split-section.reverse .split-text { order: unset; }
  .testimonial-grid, .faq-grid, .gallery-strip, .gallery-row-2, .gallery-row-3 { grid-template-columns: 1fr; }
  .stagger-wrap { aspect-ratio: auto; margin-top: 20px; }
  .stagger-wrap img { position: static; width: 100%; height: auto; aspect-ratio: 300/416; margin-bottom: 15px; }
  h1 { font-size: 38px; }
  .hero-content h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  nav.main-nav { display: none; }
  .header-address { display: none; }
  .menu-toggle { display: block; }
  .form-row { grid-template-columns: 1fr; }
}