/* =============================================================
   CAPINARI INVEST — Clean Authority Design 2026
   Playfair Display (Überschriften) + Inter (Text)
   Kupfer-Akzent #B87333 · Grün #22372A · Warmweiß #F8F6F1
   ============================================================= */

/* === FONT FACES ============================================== */
/* Reenie Beanie am 23.09.2026 entfernt: war deklariert, wurde nirgends verwendet. */
/* === Inter + Playfair Display liegen lokal — kein Aufruf an Google,
       damit keine Besucher-IP das Haus verlaesst (23.09.2026) ====== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("playfair-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("playfair-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* === DESIGN TOKENS ========================================== */
:root {
  /* Farben */
  --cap-green:  #22372A;
  --cap-dark:   #1A2B20;
  --cap-copper: #B87333;
  --cap-warm:   #F8F6F1;
  --cap-beige:  #E5E1D4;
  --cap-text:   #1A1A1A;
  --cap-muted:  #6B6B6B;
  --cap-border: rgba(34, 55, 42, 0.15);

  /* Typografie */
  --font-head: 'Playfair Display', Georgia, "Times New Roman", serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Abstände */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  96px;

  /* Container */
  --container-max: 1100px;
  --container-pad: clamp(20px, 5vw, 60px);

  /* Header-Höhe (per JS gesetzt) */
  --header-h: 76px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* === RESET ================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }

/* === BASE ================================================== */
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--cap-text);
  background: var(--cap-warm);
  -webkit-font-smoothing: antialiased;
}

/* === UTILITIES ============================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--space-xl) 0;
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cap-copper);
  margin-bottom: var(--space-sm);
}

.section-title {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--cap-green);
  margin-bottom: var(--space-md);
}
.section-title.center { text-align: center; }

.copper-divider {
  width: 0;
  height: 2px;
  background: var(--cap-copper);
  margin-bottom: var(--space-md);
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.copper-divider.visible {
  width: 48px;
}

.body-text {
  font-size: 16px;
  line-height: 1.75;
  color: #3A3A3A;
  margin-bottom: var(--space-sm);
}
.body-text:last-of-type { margin-bottom: 0; }

/* === BUTTONS =============================================== */
.btn-primary {
  display: inline-block;
  background: var(--cap-copper);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 14px 32px;
  border-radius: 2px;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease);
}
.btn-primary:hover {
  background: #a06828;
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-block;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 32px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 2px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.btn-copper {
  display: inline-block;
  color: var(--cap-copper);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 2px solid var(--cap-copper);
  letter-spacing: 0.3px;
  transition: color 0.2s, border-color 0.2s;
}
.btn-copper:hover {
  color: #a06828;
  border-color: #a06828;
}

/* === HEADER ================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(248, 246, 241, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cap-border);
  z-index: 9000;
  transition: box-shadow 0.3s;
}
.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

.header-inner {
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo { height: 44px; width: auto; }   /* 23.09.2026: wie der Kopf der Objektseite Waldstetten (.nav img 44px);
                                                 mobil bleibt es bei 40px, siehe Block max-width:768px */

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--cap-green);
  letter-spacing: 0.3px;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.nav a:hover { border-bottom-color: var(--cap-copper); }

.nav-cta {
  background: var(--cap-green) !important;
  color: #fff !important;
  padding: 10px 22px !important;
  border: none !important;
  border-radius: 2px !important;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}
.nav-cta:hover { background: var(--cap-dark) !important; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 4px;
  border: 1px solid var(--cap-border);
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cap-green);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.2s;
}

/* === PAGE WRAPPER ========================================== */
.page {
  padding-top: var(--header-h);
}

/* Scroll-offset für alle Sektions-Anker */
#home, #ueber-uns, #flavio, #kriterien, #kontakt {
  scroll-margin-top: var(--header-h);
}

/* === FADE-IN ANIMATION ===================================== */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === HERO ================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--cap-dark); /* kein Weiß bei Subpixel-Gaps */
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-img {
  position: absolute;
  top: -15%;           /* -15% der Hero-Höhe = sauberer Puffer oben */
  left: 0;
  width: 100%;
  height: 130%;        /* 30% Puffer für Parallax oben + unten */
  object-fit: cover;
  object-position: center 40%;
  will-change: transform;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 25, 18, 0.25) 0%,
    rgba(15, 25, 18, 0.55) 50%,
    rgba(15, 25, 18, 0.80) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(48px, 8vh, 80px);
}
.hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  animation: heroEntry 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s both;
}

.hero-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cap-copper);
  margin-bottom: var(--space-sm);
}

.hero-h1 {
  font-family: var(--font-head);
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  margin-bottom: var(--space-sm);
  max-width: 680px;
}

.hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255,255,255,0.80);
  margin-bottom: var(--space-md);
  max-width: 480px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  right: var(--container-pad);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-line {
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* === STATS BAR ============================================ */
.stats-bar {
  background: var(--cap-green);
  padding: 44px 0;
  position: relative;
  z-index: 1;
  margin-top: -3px; /* Subpixel-Lücke zum Hero schließen */
}
.stats-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.stat-item {
  flex: 1;
  min-width: 160px;
  text-align: center;
  padding: 8px 32px;
}
.stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
}
.stat-divider {
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

/* === ÜBER UNS ============================================= */
.section-ueber {
  background: var(--cap-warm);
}
.ueber-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: start;
}
.ueber-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ueber-card {
  background: #fff;
  border: 1px solid var(--cap-border);
  border-left: 3px solid var(--cap-copper);
  padding: 20px 24px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ueber-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}
.ueber-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cap-muted);
  margin-bottom: 8px;
}
.ueber-card-value {
  font-family: var(--font-head);
  font-size: 22px;
  color: var(--cap-green);
  line-height: 1.3;
}

/* === IMAGE DIVIDER ======================================== */
.image-divider {
  height: clamp(220px, 30vw, 380px);
  overflow: hidden;
  position: relative;
}
.image-divider img {
  position: absolute;
  top: -30%;           /* -30% der Container-Höhe = Puffer oben */
  left: 0;
  width: 100%;
  height: 160%;        /* 60% extra für Parallax-Puffer oben + unten */
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

/* === FLAVIO SECTION ======================================= */
.section-flavio {
  background: var(--cap-beige);
}
.flavio-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
}
.flavio-portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(100%); /* B&W passend zum Foto-Stil */
}

.flavio-contact-strip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--cap-border);
}
.contact-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--cap-green);
  transition: color 0.2s;
}
.contact-inline:hover { color: var(--cap-copper); }
.contact-inline svg { flex-shrink: 0; color: var(--cap-copper); }

/* === ANKAUFSKRITERIEN ===================================== */
.section-kriterien {
  background: var(--cap-warm);
}
.kriterien-header {
  text-align: center;
  margin-bottom: 48px;
}
.kriterien-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--cap-border);
  border: 1px solid var(--cap-border);
}
.kriterium-card {
  background: #fff;
  padding: 28px 24px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s var(--ease);
}
.kriterium-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.kriterium-card.visible:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.kriterium-card--wide {
  grid-column: 1 / 3;
}
.kriterium-card--excl {
  background: #FAFAF8;
}
.kriterium-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cap-muted);
  margin-bottom: 10px;
}
.kriterium-label--excl { color: #999; }
.kriterium-value {
  font-family: var(--font-head);
  font-size: 20px;
  color: var(--cap-green);
  line-height: 1.3;
}
.kriterium-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kriterium-tags span {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--cap-green);
  background: rgba(34, 55, 42, 0.07);
  padding: 4px 12px;
  border-radius: 2px;
}
.kriterium-tags--excl span {
  color: var(--cap-muted);
  background: rgba(0,0,0,0.04);
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,0.2);
}

/* === KONTAKT (kein Formular) ============================== */
.section-kontakt {
  background: var(--cap-green);
}
.section-kontakt .section-eyebrow { color: var(--cap-copper); }
.section-kontakt .section-title   { color: #fff; }

.kontakt-solo {
  text-align: center;
  padding: 16px 0 32px;
}
.kontakt-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin-bottom: 0;
}
.kontakt-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin-top: 52px;
  flex-wrap: wrap;
}
.kontakt-big-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.kontakt-big-num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.3px;
  transition: color 0.2s;
}
.kontakt-big-link:hover .kontakt-big-num { color: var(--cap-copper); }
.kontakt-big-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}
.kontakt-divider-v {
  width: 1px;
  height: 64px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* === FOOTER =============================================== */
.site-footer {
  background: var(--cap-dark);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 28px 0;
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-wordmark {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}
.footer-links {
  display: flex;
  gap: 24px;
}
.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}
.footer-links a:hover { color: rgba(255,255,255,0.80); }

/* === iOS FIX ============================================== */
@supports (-webkit-touch-callout: none) {
  .site-header {
    position: sticky;
    top: 0;
  }
  .page {
    padding-top: 0 !important;
  }
}

/* === RESPONSIVE =========================================== */

/* Tablet 1024px */
@media (max-width: 1024px) {
  .ueber-grid      { grid-template-columns: 1fr; gap: 40px; }
  .ueber-visual    { flex-direction: row; flex-wrap: wrap; }
  .ueber-card      { flex: 1; min-width: 160px; }
  .flavio-grid     { grid-template-columns: 260px 1fr; gap: 40px; }
  .kriterien-grid  { grid-template-columns: repeat(2, 1fr); }
  .kriterium-card--wide { grid-column: 1 / -1; }
}

/* Tablet 768px */
@media (max-width: 768px) {
  :root { --header-h: 68px; }

  /* Logo mobil unveraendert bei 40px (Flavio 23.09.2026: mobile Ansicht soll bleiben) */
  .brand-logo { height: 40px; }

  .nav { display: none; }
  .nav-toggle { display: flex; }

  /* Mobile Nav Dropdown */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--cap-warm);
    border-bottom: 1px solid var(--cap-border);
    flex-direction: column;
    gap: 0;
    padding: 8px 0 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    z-index: 8999;
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 14px var(--container-pad);
    border-bottom: 1px solid var(--cap-border);
    border-radius: 0;
    font-size: 16px;
  }
  .nav a:last-child { border-bottom: none; }
  .nav-cta {
    margin: 8px var(--container-pad) 0 !important;
    padding: 14px var(--container-pad) !important;
    border-radius: 0 !important;
    display: block;
    text-align: center;
  }

  .stats-inner { gap: 0; }
  .stat-divider { display: none; }
  .stat-item { min-width: 50%; padding: 16px; }

  .flavio-grid  { grid-template-columns: 1fr; }
  .photo-placeholder { max-width: 240px; aspect-ratio: 1; }
  .photo-monogram { font-size: 48px; }

  .kriterien-grid { grid-template-columns: 1fr; }
  .kriterium-card--wide { grid-column: auto; }

  .kontakt-cta-row { gap: 36px; }
  .kontakt-divider-v { display: none; }
}

/* Mobile 480px */
@media (max-width: 480px) {
  .hero-h1 { font-size: 32px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .btn-primary, .btn-ghost { width: 100%; text-align: center; }
  .stat-item { min-width: 100%; }
  .stat-divider { display: none; }
  .section-title { font-size: 26px; }
  .ueber-visual { flex-direction: column; }
  .kontakt-cta-row { flex-direction: column; gap: 28px; }
}

/* === HERO ENTRY ANIMATION ================================= */
@keyframes heroEntry {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === IMAGE DIVIDER PARALLAX — will-change oben in .image-divider img === */

/* === KRITERIUM CARD — Stagger via JS, hover via CSS === */

/* === LEGAL PAGES (Impressum / Datenschutz) ================ */
body.legal {
  color: var(--cap-green);
  font-size: 15px;
  line-height: 1.7;
}
body.legal .page { min-height: auto; }
body.legal h1 { font-family: var(--font-head); font-size: 32px; color: var(--cap-green); margin: 0 0 24px; }
body.legal h2 { font-family: var(--font-head); font-size: 22px; color: var(--cap-green); margin: 28px 0 12px; }
body.legal h3 { font-size: 17px; font-weight: 600; color: var(--cap-green); margin: 18px 0 8px; }
body.legal p  { margin: 0 0 14px; }
body.legal ul { margin: 8px 0 16px 20px; }
/* 23.09.2026: nur die Links IM TEXT sind kupfern unterstrichen. Vorher galt die Regel fuer
   jeden Link der Seite und hat Navigation und Fusszeile mit eingefaerbt - dadurch sah der
   Kopf von Impressum und Datenschutz anders aus als auf der Startseite (Flavio 23.09.2026). */
body.legal main.page a { color: var(--cap-copper); text-decoration: underline; }

/* ============================================================
   Startseite Runde 2 — live 29.09.2026 (Durchgang Flavio 28./29.09.):
   Leistungskette, Fragen, Partner, Kopf-Schaltflaeche in Kupfer,
   gleich hohe Ueber-uns-Karten, Raster der Ankaufskriterien mit 9. Karte.
   ============================================================ */
/* --- Modell-Band (Punkt 5) --- */
.section-modell{background:var(--cap-beige);}
.modell-claim{font:600 clamp(14px,2.2vw,20px)/1.3 'Inter',sans-serif;letter-spacing:.18em;
  color:var(--cap-green);text-align:center;margin:0 0 10px;}
.modell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
.modell-card{background:var(--cap-warm);border-top:2px solid var(--cap-copper);padding:26px 24px 28px;}
.modell-step{font:600 10px/1 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cap-copper);display:block;margin-bottom:12px;}
.modell-text{font:400 16px/1.6 'Inter',sans-serif;color:var(--cap-text);margin:0;}

/* --- Fragen (Punkt 4) --- */
.faq-liste{max-width:820px;margin:44px auto 0;}
/* NEU (Flavio 29.09.): Fragen-Bereich in Beige, sonst keine Kante zu den Ankaufskriterien */
#fragen{background:var(--cap-beige);}
.faq-item{border-bottom:1px solid var(--cap-border);}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font:500 clamp(17px,2vw,20px)/1.4 var(--font-head);color:var(--cap-green);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font:400 24px/1 'Inter',sans-serif;color:var(--cap-copper);}
.faq-item[open] summary::after{content:"–";}
.faq-a{padding:0 0 22px;font:400 16px/1.7 'Inter',sans-serif;color:var(--cap-text);max-width:70ch;}
.faq-a p{margin:0 0 10px;}
.faq-a ul{margin:6px 0 0 18px;padding:0;}
.faq-a li{margin:3px 0;}

/* --- Partner (Punkt 2 + 6) --- */
.section-partner{background:var(--cap-green);}
.section-partner .section-eyebrow{color:var(--cap-copper);}
.section-partner .section-title{color:var(--cap-warm);}
.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px;}
.partner-card{background:var(--cap-warm);padding:34px 32px 36px;display:flex;flex-direction:column;}
.partner-card h3{font:500 22px/1.3 var(--font-head);color:var(--cap-green);margin:0 0 16px;}
.partner-card p{font:400 16px/1.65 'Inter',sans-serif;color:var(--cap-text);margin:0 0 12px;}
.partner-card .btn-copper{margin-top:auto;align-self:flex-start;}

/* --- Raster der Ankaufskriterien: geht mit der neunten Karte wieder auf --- */
@media (min-width:901px){
  .kriterien-grid .kriterium-card--wide{grid-column:span 2;}
}
@media (min-width:769px){
  .kriterien-grid .kriterium-card--excl{grid-column:1 / -1;}
}
@media (min-width:769px) and (max-width:900px){
  .kriterien-grid .kriterium-card:nth-of-type(7){grid-column:1 / -1;}
}

/* --- Kontakt-Zusatz (Punkt 8) --- */
/* NEU (Flavio 28.09.): Kopf-Schaltfläche in Kupfer statt Grün */
.nav-cta{background:var(--cap-copper) !important;}
.nav-cta:hover{background:#9C5F28 !important;}

/* NEU (Flavio 28.09.): drei Karten gleich hoch, Abwicklung einzeilig */
.ueber-visual{display:grid;grid-auto-rows:1fr;}
.ueber-card{display:flex;flex-direction:column;justify-content:center;}
.ueber-card-value{white-space:nowrap;}
@media (max-width:900px){ .ueber-card-value{white-space:normal;} }

@media (max-width:900px){
  .modell-grid{grid-template-columns:1fr;gap:18px;}
  .partner-grid{grid-template-columns:1fr;gap:18px;}
}

/* NEU (Flavio 14.10.2026): Menüpunkt „Projekte“ + Bereich „Aktuelles Projekt“ (Variante B) */
.nav{gap:28px;}
.nav-cta{white-space:nowrap;}
@media (min-width:769px) and (max-width:1100px){ .nav{gap:18px;} .nav a{font-size:13px;} }
.section-projekt{background:var(--cap-warm);}
.projekt-card{display:grid;grid-template-columns:1.1fr 1fr;background:#fff;border:1px solid var(--cap-border);box-shadow:0 10px 40px rgba(34,55,42,.08);}
.projekt-bild{min-height:420px;background:linear-gradient(to bottom,rgba(15,25,18,.25) 0%,rgba(15,25,18,.55) 50%,rgba(15,25,18,.80) 100%),url('projekt-waldstetten-ort.jpg') center/cover no-repeat;} /* Verlauf = .hero-overlay */
.projekt-text{padding:48px 52px;display:flex;flex-direction:column;justify-content:center;}
.projekt-btn{align-self:flex-start;margin-top:14px;background:var(--cap-green);color:#fff;padding:13px 26px;font-weight:600;font-size:14px;border-radius:2px;letter-spacing:.3px;transition:background .2s;}
.projekt-btn:hover{background:var(--cap-dark);}
@media (max-width:768px){
  .projekt-card{grid-template-columns:1fr;}
  .projekt-bild{min-height:240px;}
  .projekt-text{padding:32px 24px;}
}

/* 2026-10-14: Kopfzeile ab 1221px deckungsgleich mit /waldstetten/ (Logo links im 1100er-Raster, Button rechts wie „Anfrage stellen“) */
@media (min-width:1221px){.header-inner{max-width:none;padding-left:calc(max(0px,(100% - 1100px) / 2) + var(--container-pad));padding-right:calc(max(0px,(100% - 1180px) / 2) + 24px)}}
@media (min-width:1221px) and (max-width:1310px){.header-inner{padding-right:82px}}
/* 2026-10-14: Button gleich groß wie „Anfrage stellen“ auf /waldstetten/ (feste Breite statt Textlänge) */
@media (min-width:769px){.nav-cta{box-sizing:border-box;width:156px;padding:10px 0;text-align:center;line-height:24px}}