/* Hof Bornholdt – statischer Nachbau der Framer-Seite (maso.studio, 2026)
   Breakpoints wie in Framer: Desktop ab 1200 px, Tablet 810–1199 px, Phone bis 809 px. */
/* Schriften lokal (woff2, font-display: swap), direkt hier statt per @import: spart eine Anfrage-Kette */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter3-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter3-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter3-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter3-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter3-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter3-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Londrina Solid';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/londrina-solid-400-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: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playfair-display-700italic-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: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playfair-display-700italic-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;
}

:root {
  --green: rgb(27, 94, 32);
  --green-nav: rgb(46, 125, 50);
  --green-dark: rgb(13, 59, 19);
  --brown: rgb(131, 75, 54);
  --text: rgb(74, 74, 74);
  --cream: rgb(245, 239, 224);
  --cream-light: rgb(253, 251, 247);
  --white-90: rgba(255, 254, 254, 0.898);
  --white-70: rgba(255, 254, 254, 0.698);
  --head: "Londrina Solid", sans-serif;
  --body: "Inter", sans-serif;
  --shadow-lg: rgba(0, 0, 0, 0.25) 0 25px 50px -12px;
  --shadow-md: rgba(0, 0, 0, 0.1) 0 8px 10px -6px, rgba(0, 0, 0, 0.1) 0 20px 25px -5px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; font-weight: 400; }
section, footer, .band { position: relative; }

/* ---------- Bausteine ---------- */
.eyebrow { font-family: var(--head); font-size: 14px; line-height: 20px; letter-spacing: 0.7px; text-transform: uppercase; color: var(--brown); }
.h2 { font-family: var(--head); font-size: 36px; line-height: 40px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--green); }
.h2-xl { font-family: var(--head); font-size: 48px; line-height: 48px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green); }
.copy { font-size: 18px; line-height: 29.25px; color: var(--text); }
.copy + .copy { margin-top: 20px; }
.pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--green); color: #fff; font-family: var(--head); text-transform: uppercase; white-space: nowrap; }
.pill-lg { height: 56px; padding: 0 32px; font-size: 16px; line-height: 24px; letter-spacing: 0.8px; }
.pill-md { height: 48px; padding: 0 32px; font-size: 14px; line-height: 20px; letter-spacing: 0.7px; }
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 48px; }

/* Papier-Struktur hinter den hellen Abschnitten. Framers Filter (Helligkeit, Kontrast, Graustufen, Deckkraft)
   sind in _build/bilder.py fest eingerechnet: kein CSS-Filter, keine Extra-Ebene beim Scrollen. */
.bg-cream { background-color: var(--cream); }
.bg-cream-light { background-color: var(--cream-light); }
.paper.bg-cream { background: var(--cream) url("/img/v/paper-cream.webp") center top / 1200px auto repeat; }
.paper-strong.bg-cream-light { background: var(--cream-light) url("/img/v/paper-light.webp") center top / 1200px auto repeat; }

/* ---------- Navigation ---------- */
.nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10; width: 1120px; height: 63px; padding: 0 16px 0 35px; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 9999px; }
.nav-logo img { width: 102px; height: 47px; }
.nav-links { display: flex; }
.nav-links a { padding: 8px 20px; font-family: var(--head); font-size: 12px; line-height: 16px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--green-dark); }
.nav-links a { border-radius: 100px; transition: background-color .25s ease, color .25s ease; }
.nav-links a:hover, .nav-links a:focus-visible { background: rgb(13, 58, 19); color: #fff; }
.nav-cta { height: 40px; padding: 0 20px; background: var(--green-nav); font-size: 14px; line-height: 20px; letter-spacing: 0.7px; }

/* ---------- Hero ---------- */
.hero { height: 800px; overflow: hidden; color: #fff; z-index: 2; }
.hero-img, .hero-shade, .hero-grain { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.hero-shade { background: linear-gradient(rgba(13, 59, 19, 0.4) 0%, rgba(13, 59, 19, 0.2) 40%, rgba(13, 59, 19, 0.6) 100%); }
.hero-grain { background: url("/img/v/paper-hero.webp") center top / 1200px auto repeat-x; opacity: 0.51; }
.hero-inner { position: absolute; left: 0; right: 0; top: 35px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.hero-logo { display: none; }
.hero h1 { width: 536px; font-family: var(--head); font-size: 72px; line-height: 90px; letter-spacing: 1.8px; text-transform: uppercase; }
.hero-lead { max-width: 651px; margin-top: 25px; padding: 0; font-size: 18px; line-height: 29.25px; color: var(--white-90); }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 39px; }
.hero-phone { display: flex; flex-direction: column; text-align: center; }
.hero-phone a { font-family: var(--head); font-size: 16px; line-height: 24px; color: #fff; }
.hero-phone span { font-size: 14px; line-height: 20px; color: var(--white-70); }

.band { min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 16px 20px; background: var(--green); color: #fff; font-family: var(--head); font-size: 16px; line-height: 24px; letter-spacing: 3.2px; text-transform: uppercase; text-align: center; }

/* ---------- Das sind wir ---------- */
.wir { padding: 144px 0; }
.wir-inner { max-width: 1024px; margin: 0 auto; padding: 0 48px; text-align: center; }
.wir-head .eyebrow { font-size: 16px; line-height: 24px; letter-spacing: 0.8px; }
.wir .copy { max-width: 768px; margin: 32px auto 0; padding: 0 9px; }
.wir .pill { margin-top: 40px; }
.polaroids { display: flex; justify-content: center; gap: 41px; margin-top: 16px; padding-top: 60px; height: 360px; }
.polaroid { position: relative; }
.polaroid.p2 { left: -3.5px; }
.polaroid.p3 { left: -2px; }
.polaroid { flex: 0 0 auto; padding: 10px; background: #fff; border-radius: 8px; box-shadow: var(--shadow-md); align-self: flex-start; transform: rotate(var(--rot, 0deg)); }
.polaroid img { border-radius: 5px; object-fit: cover; }
.polaroid.p1 img { width: 228px; height: 292px; }
.polaroid.p2 { --rot: -1deg; }
.polaroid.p2 img { width: 228px; height: 292px; }
.polaroid.p3 { --rot: 2deg; }
.polaroid.p3 img { width: 228px; height: 292px; }

/* ---------- Zwei-Spalten-Abschnitte ---------- */
.split { padding: 128px 0; }
.split .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: center; }
.split-text .h2 { margin-bottom: 20px; }
.circle { width: 384px; height: 384px; margin: 0 auto; border-radius: 9999px; overflow: hidden; box-shadow: var(--shadow-lg); }
.circle img { width: 100%; height: 100%; object-fit: cover; }
.address { margin-top: 28px; font-size: 14px; line-height: 20px; font-weight: 500; color: rgb(26, 26, 26); }
.photo-card { width: calc(100% + 10px); padding: 10px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); }
.photo-card .frame { border-radius: 10px; overflow: hidden; }
.photo-card img { width: 100%; height: 430px; object-fit: cover; border-radius: 10px; }
.photo-card.tall img { height: 420px; }

/* ---------- Aus Liebe zum Land ---------- */
.land { height: 500px; overflow: hidden; color: #fff; }
.land-img, .land-shade { position: absolute; inset: 0; }
.land-img img { width: 100%; height: 100%; object-fit: cover; object-position: 52.7% 66.9%; }
.land-shade { background: linear-gradient(rgba(13, 59, 19, 0) 0%, rgba(13, 59, 19, 0.2) 50%, rgba(13, 59, 19, 0.7) 100%); }
.land-text { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; padding: 0 20px; }
.land-text h2 { font-family: var(--head); font-size: 48px; line-height: 48px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 16px; }
.land-text p { font-size: 18px; line-height: 28px; color: var(--white-90); }

/* ---------- Daten & Fakten ---------- */
.fakten { height: 526px; overflow: hidden; color: #fff; }
.fakten-img { position: absolute; inset: 0; }
.fakten-img img { width: 100%; height: 100%; object-fit: cover; }
.fakten-shade { position: absolute; inset: 0; background: rgba(27, 94, 32, 0.7); }
.fakten .container { position: relative; padding-top: 112px; }
.fakten-head { text-align: center; }
.fakten-head .eyebrow { color: rgba(255, 254, 254, 0.7); }
.fakten-head .h2-xl { color: #fff; }
.fakten-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; }
.fakt { height: 186px; padding-top: 32px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fakt + .fakt { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.fakt-num { contain: layout paint; font-family: var(--head); font-size: 72px; line-height: 86.4px; letter-spacing: -1.44px; font-variant-numeric: tabular-nums; }
.fakt-label { margin-top: 13px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--white-70); }

/* ---------- Team ---------- */
.team { padding: 128px 0; }
.team-head { text-align: center; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 56px; margin-top: 64px; }
.person { display: flex; flex-direction: column; align-items: center; text-align: center; }
.person-photo { width: 224px; height: 224px; border-radius: 9999px; overflow: hidden; box-shadow: var(--shadow-md); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { margin-top: 20px; font-family: var(--head); font-size: 20px; line-height: 28px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--green); }
.person p { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--text); }

/* ---------- Kontakt ---------- */
.kontakt { padding: 0 0 128px; }
/* Kontakt-Karte beginnt oben bündig: Abstand, damit die feste Leiste „MOIN“ nicht verdeckt */
#kontakt { scroll-margin-top: 104px; }
.kontakt-card { width: 1030px; margin: 0 auto; display: grid; grid-template-columns: 552px 478px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.15) 0 0.72px 0.72px -0.75px, rgba(0, 0, 0, 0.14) 0 2.17px 2.17px -1.5px, rgba(0, 0, 0, 0.13) 0 5.74px 5.74px -2.25px, rgba(0, 0, 0, 0.1) 0 18px 18px -3px; }
.kontakt-left { padding: 48px; }
.kontakt-left .eyebrow { font-size: 20px; line-height: 20px; }
.kontakt-left .h2 { margin-bottom: 20px; }
.kontakt-left .copy { max-width: 461px; }
.kontakt-left .copy + .copy { margin-top: 29px; }
.rows { display: grid; gap: 12px; margin-top: 36px; width: 434px; }
.row { display: flex; align-items: center; gap: 10px; height: 72px; padding: 16px; background: rgb(248, 250, 248); border-radius: 16px; box-shadow: rgba(30, 27, 46, 0.5) 0 10px 30px -20px; }
.row-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 9999px; background: var(--green); color: #fff; }
.row-icon svg { width: 20px; height: 20px; }
.row-text { font-family: var(--head); font-size: 14px; line-height: 20px; }
.row-text b { display: block; font-weight: 400; color: var(--brown); }
.row-text span { color: var(--green); }
.kontakt-right { position: relative; display: flex; align-items: center; justify-content: center; background: rgba(27, 94, 32, 0.03); }
.kontakt-panel { width: 482px; height: 538px; display: flex; flex-direction: column; justify-content: center; padding: 0 33px; border-radius: 16px; transform: rotate(0.4deg); }
.kontakt-panel h3 { font-family: var(--head); font-size: 26px; line-height: 32px; letter-spacing: -0.24px; color: var(--brown); margin-bottom: 13px; }
.btn-mail, .btn-tel { display: flex; align-items: center; justify-content: center; gap: 8px; height: 55px; border-radius: 9999px; font-family: var(--head); font-size: 16px; line-height: 24px; }
.btn-mail { background: var(--green); color: #fff; }
.btn-mail svg { width: 20px; height: 20px; }
.btn-tel { margin-top: 9px; border: 2px solid var(--green); color: var(--green); }

/* Kontaktformular – Maße, Schrift und Rahmen wie die Formular-Attrappe in Framer (Variante B):
   Beschriftung Inter 12/16 500, Felder weiß mit 1px rgba(0,0,0,.1) und Radius 10, Platzhalter Inter 14 500. */
.kf-felder { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; }
.kf-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kf-feld { min-width: 0; }
.kf label, .kf-hinweis, .kf-fehler { font-family: var(--body); font-weight: 500; font-size: 12px; line-height: 16px; }
.kf-feld > label { display: block; margin-bottom: 4px; color: rgba(30, 26, 45, 0.7); }
.kf input[type="text"], .kf input[type="email"], .kf textarea { display: block; width: 100%; margin: 0; padding: 12px 16px 13px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; background: #fff; color: rgb(30, 26, 45); font-family: var(--body); font-weight: 500; font-size: 14px; line-height: 17px; -webkit-appearance: none; appearance: none; transition: border-color .2s ease, box-shadow .2s ease; }
.kf input[type="text"], .kf input[type="email"] { height: 44px; }
.kf textarea { height: 112px; resize: vertical; }
.kf ::placeholder { color: rgba(30, 26, 45, 0.5); opacity: 1; }
.kf input:focus, .kf textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.15); }
.kf [aria-invalid="true"] { border-color: var(--brown); }
.kf :disabled { opacity: 1; color: inherit; }
.kf-ok { display: flex; align-items: flex-start; gap: 10px; }
.kf-ok input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--green); cursor: pointer; }
.kf-ok label { color: rgba(30, 26, 45, 0.7); cursor: pointer; }
.kf-ok a, .kf-hinweis a { color: var(--green); text-decoration: underline; }
.kf-ok input:focus-visible { outline: 2px solid var(--green-nav); outline-offset: 2px; }
.kf-fehler { margin-top: 4px; color: var(--brown); }
.kf-fehler:empty, .kf-hinweis:empty { margin: 0; }
.kf-ok-fehler { margin-top: -8px; padding-left: 26px; }
.kf-ok-fehler:empty { margin-top: -12px; }
.kf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kf-senden { width: 100%; margin-top: 2px; padding: 0; border: 0; cursor: pointer; }
.kf-senden:focus-visible, .btn-tel:focus-visible { outline: 3px solid var(--green-nav); outline-offset: 3px; }
.kf-senden[aria-busy="true"] { cursor: progress; opacity: 0.85; }
.kf-hinweis { margin-top: 10px; color: rgba(30, 26, 45, 0.7); }
.kf-kopieren { display: inline-flex; align-items: center; height: 32px; margin-top: 8px; padding: 0 16px; border: 2px solid var(--green); border-radius: 9999px; background: transparent; color: var(--green); font-family: var(--head); font-size: 14px; line-height: 20px; cursor: pointer; }
.kf-kopieren:hover { background: var(--green); color: #fff; }
.kf-danke { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 0 20px; outline: none; }
.kf-danke[hidden] { display: none; }
.kf-danke-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 9999px; background: var(--green); color: #fff; margin-bottom: 16px; }
.kf-danke-icon svg { width: 28px; height: 28px; }
.kontakt-panel .kf-danke h3 { margin-bottom: 8px; }
.kf-danke p { max-width: 340px; font-size: 16px; line-height: 26px; color: var(--text); }
.kontakt-panel.gesendet > #kf-titel, .kontakt-panel.gesendet > .kf { display: none; }

/* ---------- Footer ---------- */
.footer { background: var(--green-dark); padding: 96px 0 96px; color: var(--white-70); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
.footer-brand { font-family: "Playfair Display", serif; font-style: italic; font-weight: 700; font-size: 24px; line-height: 32px; color: #fff; }
.footer-claim { margin-top: 17px; line-height: 22.75px; }
.footer h3 { font-family: var(--head); font-size: 18px; line-height: 28px; letter-spacing: 0.9px; text-transform: uppercase; color: #fff; }
.footer-addr { margin-top: 15px; line-height: 22.75px; }
.footer-addr a { color: #fff; }
.footer-addr .spacer { height: 22.75px; }
.footer-nav { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.footer-nav a { line-height: 20px; letter-spacing: 0.7px; text-transform: uppercase; }
.footer-nav a:hover, .footer-bottom a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 47px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 254, 254, 0.56); line-height: 20px; }
.footer-bottom nav { display: flex; gap: 24px; flex: none; }
.footer-nap { text-wrap: balance; }
.footer-nap a { color: inherit; white-space: nowrap; }
.footer-nap span { white-space: nowrap; }

/* ---------- Rechtstexte ---------- */
.legal-head { height: 95px; display: flex; align-items: center; justify-content: space-between; padding: 0 80px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.legal-head img { width: 102px; height: 47px; }
.legal-head a.back { font-family: var(--head); font-size: 16px; line-height: 24px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--green); }
.legal { max-width: 800px; margin: 96px auto 120px; padding: 0; }
.legal h1 { font-family: var(--head); font-size: 48px; line-height: 52px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green); }
.legal h2 { margin-top: 16px; font-family: var(--head); font-size: 24px; line-height: 30px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--green); }
.legal h1 + h2 { margin-top: 16px; }
.legal .sect { font-family: var(--body); font-weight: 700; font-size: 20px; line-height: 1; }
.legal p { margin-top: 16px; font-size: 16px; line-height: 26px; color: var(--text); }
.legal a { text-decoration: underline; }

/* Feste Zeilenumbrüche wie in Framer: bd = nur Desktop, bdt = Desktop + Tablet, bp = Phone */
br.bp { display: none; }
@media (min-width: 1200px) { .lines { white-space: nowrap; } br.bd { display: inline; } .polaroids { position: relative; left: -2px; }
  #vision .photo-card { margin-left: -10px; }
  #technik .split-text { position: relative; left: 10px; } }
@media (min-width: 810px) { .hero-lead.lines { white-space: nowrap; } }

/* ======================= Tablet 810–1199 ======================= */
@media (max-width: 1199px) {
  .nav { width: 780px; }
  .nav-links a { padding: 8px 20px; }
  .band { padding: 16px 0; }
  br.bd { display: none; }
  .wir .copy { max-width: 650px; padding: 0; }
  .vision .split-visual { order: 1; }
  .polaroids { gap: 37px; padding-top: 60px; height: 360px; position: relative; left: -5.5px; }
  .polaroid.p2 { left: 0; }
  .polaroid.p3 { left: 7px; }
  .polaroid.p1 img { width: 177px; height: 228px; }
  .polaroid.p2 img { width: 177px; height: 229px; }
  .polaroid.p3 img { width: 177px; height: 229px; }

  .container { padding: 0 80px; }
  .split .container { grid-template-columns: minmax(0, 1fr); row-gap: 80px; text-align: center; }
  .split-visual { justify-self: center; }
  .split-text .eyebrow, .split-text .h2 { max-width: 552px; margin-left: auto; margin-right: auto; }
  .split-visual { order: -1; }
  #farm .address { font-family: var(--head); font-weight: 400; }
  .photo-card { width: 650px; margin: 0 auto; }

  .fakten .container { padding-top: 112px; padding-left: 40px; padding-right: 40px; }
  .fakten-grid { margin-top: 56px; }
  .fakt-label { font-size: 14px; }

  .team-grid { column-gap: 22px; padding: 0 -33px; }
  .team .container { padding: 0 40px; }

  .kontakt-card { width: 700px; grid-template-columns: minmax(0, 1fr); }
  .kontakt-left { padding: 48px 48px 48px; text-align: center; }
  .kontakt-left .copy { max-width: 604px; margin-left: auto; margin-right: auto; }
  .kontakt-left .copy + .copy { margin-top: 0; }
  .rows { grid-template-columns: 300px 300px; width: auto; justify-content: center; margin-top: 36px; text-align: left; }
  .rows .row-tel { grid-column: 2; grid-row: 1; }
  .kontakt-right { height: auto; }
  .kontakt-panel { width: 702px; height: auto; padding: 32px; }

  .footer .container { padding: 0 40px; }
  .footer-grid { grid-template-columns: 210px 1fr 1fr; column-gap: 50px; }
  .footer-bottom { margin-top: 94px; }

  .legal-head { height: 87px; padding: 0 40px; }
  .legal { margin: 64px 40px 96px; }
}

/* ======================= Phone bis 809 ======================= */
@media (max-width: 809px) {
  .nav { display: none; }
  #kontakt { scroll-margin-top: 20px; }
  br.bd, br.bdt { display: none; }
  br.bp { display: inline; }
  .hero-inner { top: 36px; justify-content: flex-start; padding: 128px 24px 0; }
  .hero-logo { display: block; width: 206px; height: 95px; margin-bottom: 21px; }
  .hero h1 { width: 342px; font-size: 40px; line-height: 48px; }
  .hero-lead { max-width: 342px; margin-top: 24px; padding: 0 5px; }
  .hero-actions { margin-top: 40px; gap: 14px; }
  .band { min-height: 104px; }

  .wir { padding: 144px 0 107px; }
  .wir-inner { padding: 0 20px; }
  .h2-xl { font-size: 40px; line-height: 48px; }
  .wir .copy { padding: 0; }
  .polaroids { display: block; position: relative; width: 390px; height: 527px; margin: 47px -20px 0; padding: 0; }
  .polaroid { position: absolute; }
  .polaroid.p1 { left: 87px; top: 94px; z-index: 2; }
  .polaroid.p1 img { width: 209px; height: 268px; }
  .polaroid.p2 { left: 38px; top: 13px; z-index: 1; }
  .polaroid.p2 img { width: 127px; height: 168px; }
  .polaroid.p3 { left: 223.5px; top: 326.5px; --rot: 6deg; z-index: 3; }
  .polaroid.p3 img { width: 129px; height: 167px; }

  .container { padding: 0 20px; }
  .split .container { row-gap: 80px; }
  .circle { width: 352px; height: 352px; }
  .split-text .h2 { font-size: 40px; line-height: 48px; }
  #farm .address { font-family: var(--body); font-weight: 500; }
  .photo-card { width: 350px; }

  .land-text { bottom: 40px; }
  .land-text h2 { font-size: 40px; line-height: 48px; }
  .land-text p { max-width: 310px; margin: 0 auto; }

  .fakten .container { padding: 117px 20px 0; }
  .fakten-grid { grid-template-columns: 1fr 1fr; margin-top: 64px; row-gap: 24px; }
  .fakt { height: auto; padding-top: 0; }
  .fakt:nth-child(3) { border-left: none; }
  .fakt-num { font-size: 40px; line-height: 48px; letter-spacing: -0.8px; }
  .fakt-label { margin-top: 4px; font-size: 14px; letter-spacing: 0.7px; }

  .team .container { padding: 0 20px; }
  .team-grid { grid-template-columns: 1fr; row-gap: 25px; margin-top: 50px; }

  .kontakt-card { width: 350px; }
  .kontakt-left { padding: 30px 10px 30px; }
  .kontakt-left .h2 { font-size: 36px; line-height: 43.2px; }
  .rows { grid-template-columns: 1fr; margin-top: 35px; }
  .rows .row-tel { grid-column: auto; grid-row: auto; }
  .kontakt-right { height: auto; }
  .kontakt-panel { width: 352px; height: auto; padding: 32px 33px; }
  .kf-reihe { grid-template-columns: 1fr; gap: 12px; }

  .footer { padding: 121px 0 120px; }
  .footer .container { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr; row-gap: 25px; }
  .footer-bottom { flex-direction: column; gap: 11px; margin-top: 56px; text-align: center; }

  .legal-head { height: 79px; padding: 0 20px; }
  .legal { margin: 48px 20px 80px; }
  .legal h1 { font-size: 36px; line-height: 40px; }
  .legal h2 { font-size: 20px; line-height: 26px; }
  .legal .sect { font-size: 17px; }
}

/* ======================= Bewegung & Interaktion =======================
   Hover wie in Framer (Bild-Zoom 1.1, Nav-Pille, gedrehter Kontakt-Knopf) plus dezente Extras.
   Animiert werden nur transform und opacity (laufen auf der GPU, kein Layout, kein Neuzeichnen).
   Schatten wechseln über die Deckkraft eines Pseudo-Elements statt über box-shadow. */
.circle img, .photo-card img, .person-photo img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.circle:hover img { transform: scale(1.1) rotate(1deg); }
.photo-card:hover img { transform: scale(1.1); }
.person:nth-child(1) .person-photo:hover img { transform: scale(1.1) rotate(-1deg); }
.person:nth-child(n+2) .person-photo:hover img { transform: scale(1.1) rotate(1deg); }
.photo-card .frame, .circle, .person-photo { isolation: isolate; }
.polaroid { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.polaroid:hover { transform: translate3d(0, -8px, 0) rotate(calc(var(--rot, 0deg) * -1)); z-index: 5; }
.polaroid::after, .photo-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: rgba(0, 0, 0, 0.3) 0 30px 60px -12px; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.photo-card { position: relative; }
.polaroid:hover::after, .photo-card:hover::after { opacity: 1; }

.pill { transition: transform .3s cubic-bezier(.22, .61, .36, 1), background-color .3s ease; }
.pill-lg:hover, .pill-md:hover { transform: rotate(2deg); background: var(--green-nav); }
.nav-cta:hover { background: var(--green); }
.row { transition: transform .3s ease; }
.row:hover { transform: translate3d(0, -2px, 0); }
.row-icon { transition: transform .3s ease; }
.row:hover .row-icon { transform: scale(1.08); }
.btn-mail, .btn-tel { transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.btn-mail:hover { background: var(--green-nav); transform: translate3d(0, -2px, 0); }
.btn-tel:hover { background: var(--green); color: #fff; transform: translate3d(0, -2px, 0); }
@media (hover: hover) { .circle img, .photo-card img, .person-photo img, .polaroid { will-change: transform; } }

/* Lightbox-Bilder */
[data-zoom] { cursor: zoom-in; }
[data-zoom]:focus-visible { outline: 3px solid var(--green-nav); outline-offset: 4px; }

/* Einblenden beim Scrollen: nur mit JS (html.fx), sonst ist alles sofort sichtbar */
.fx [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--d, 0s); }
.fx .polaroid[data-reveal] { transform: translate3d(0, 28px, 0) rotate(var(--rot, 0deg)); }
.fx [data-reveal].in { opacity: 1; transform: none; }
.fx .polaroid[data-reveal].in { transform: rotate(var(--rot, 0deg)); }
.fx .polaroid[data-reveal].in:hover { transform: translate3d(0, -8px, 0) rotate(calc(var(--rot, 0deg) * -1)); transition-delay: 0s; }

/* Hero beim Laden */
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
.fx .hero-img img { animation: settle 2.4s cubic-bezier(.22, .61, .36, 1) both; }
.fx .hero-inner > * { animation: rise .9s cubic-bezier(.22, .61, .36, 1) both; }
.fx .hero-inner > :nth-child(2) { animation-delay: .1s; }
.fx .hero-inner > :nth-child(3) { animation-delay: .25s; }
.fx .hero-inner > :nth-child(4) { animation-delay: .4s; }

/* Lightbox */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 30, 11, 0.92); color: #fff; overflow: hidden; }
.lb[open] { display: flex; align-items: center; justify-content: center; animation: lbIn .3s ease both; }
.lb::backdrop { background: transparent; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: calc(100vw - 160px); }
.lb img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; border-radius: 10px; box-shadow: var(--shadow-lg); animation: lbImg .35s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes lbImg { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lb figcaption { font-family: var(--head); font-size: 16px; line-height: 24px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--white-90); text-align: center; }
.lb-count { font-family: var(--body); font-size: 13px; letter-spacing: 0.5px; color: var(--white-70); margin-left: 10px; }
.lb button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; transition: background-color .2s ease; }
.lb button:hover, .lb button:focus-visible { background: rgba(255, 255, 255, 0.25); outline: none; }
.lb button svg { width: 22px; height: 22px; }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }

@media (max-width: 809px) {
  .lb { background: rgba(8, 30, 11, 0.96); }
  .lb figure { max-width: calc(100vw - 24px); }
  .lb img { max-height: calc(100dvh - 180px); }
  .lb-prev, .lb-next { top: auto; bottom: 24px; transform: none; }
  .lb-prev { left: calc(50% - 60px); }
  .lb-next { right: calc(50% - 60px); }
}

@media (hover: none) {
  .polaroid:hover, .fx .polaroid[data-reveal].in:hover { transform: rotate(var(--rot, 0deg)); }
  .polaroid:hover::after, .photo-card:hover::after { opacity: 0; }
  .circle:hover img, .photo-card:hover img, .person-photo:hover img { transform: none; }
  .pill-lg:hover, .pill-md:hover, .row:hover, .btn-mail:hover, .btn-tel:hover { transform: none; }
  .kf-kopieren:hover { background: transparent; color: var(--green); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .fx [data-reveal], .fx .polaroid[data-reveal] { opacity: 1; }
  .fx [data-reveal]:not(.polaroid) { transform: none; }
  .fx .polaroid[data-reveal] { transform: rotate(var(--rot, 0deg)); }
}

/* 360-px-Phones: schräg gestellte Polaroids ragten 25 px über den Rand (waagerechtes Scrollen); nur abschneiden, ohne Scroll-Container */
.wir { overflow-x: clip; }