:root {
    --bg: #F1F1F0;
    --ink: #1A1A1A;
    --ink-2: #3A3A3A;
    --ink-soft: #6B6B6B;
    --line: #D4D4D2;
    --font-sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
  }
  a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  a:hover { border-bottom-color: var(--ink); }
  .wrap { max-width: 720px; margin: 0 auto; padding: 0 32px; }

  .eyebrow {
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0;
  }

  .top { padding-top: 56px; }

  .hero { padding-top: 24px; padding-bottom: 48px; }
  .hero h1 {
    font: 600 48px/1.1 var(--font-sans);
    letter-spacing: -0.01em;
    margin: 0 0 28px;
  }
  .lead {
    font: 400 20px/1.55 var(--font-sans);
    color: var(--ink-2);
    max-width: 620px;
    margin: 0;
  }

  .toc-body {
    padding-top: 40px;
    padding-bottom: 40px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
  nav.toc p.eyebrow { margin: 0 0 24px; }
  .toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4px 32px;
  }
  .toc-link { display: flex; align-items: baseline; gap: 12px; border-bottom: none; padding: 8px 0; }
  .toc-link:hover .toc-title { border-bottom-color: var(--ink); }
  .toc-title { border-bottom: 1px solid transparent; font: 400 15px/1.4 var(--font-sans); color: var(--ink); }
  .toc-num { font: 500 12px/1.4 var(--font-mono); color: var(--ink-soft); flex-shrink: 0; width: 20px; }

  .chapter { padding: 48px 0; border-top: 1px solid var(--line); }
  .chapter:last-of-type { padding-bottom: 64px; }
  .num {
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin: 0;
  }
  .chapter h2 {
    font: 600 25px/1.28 var(--font-sans);
    margin: 12px 0 20px;
  }
  .chapter p {
    font: 400 17px/1.7 var(--font-sans);
    margin: 0 0 16px;
  }
  .chapter p:last-child { margin-bottom: 0; }
  .chapter ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .chapter ul li {
    display: flex;
    gap: 12px;
    font: 400 17px/1.7 var(--font-sans);
  }
  .chapter ul li::before {
    content: "";
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    margin-top: 12px;
    background: var(--ink-soft);
  }
  .chapter ul:last-child { margin-bottom: 0; }

  .kontakt { background: var(--ink); color: var(--bg); }
  .kontakt .wrap { padding: 96px 32px; }
  .kontakt .num { color: #A6A6A5; }
  .kontakt h2 {
    font: 600 34px/1.2 var(--font-sans);
    margin: 16px 0 24px;
  }
  .kontakt .lead { color: #D6D6D5; margin: 0 0 40px; max-width: 560px; }
  .contact-name { font: 500 17px/1.5 var(--font-sans); margin: 0 0 4px; }
  .contact-name .role { color: var(--ink-soft); font-weight: 400; }
  .kontakt .contact-name .role { color: #A6A6A5; }
  .contact-list { display: flex; flex-direction: column; gap: 12px; }
  .contact-row { display: flex; align-items: center; gap: 8px; }
  .contact-row a {
    font: 400 17px/1.5 var(--font-sans);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .kontakt .contact-row a { color: var(--bg); border-bottom-color: #5A5A59; }
  .copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink-soft);
    cursor: pointer;
    flex-shrink: 0;
  }
  .kontakt .copy-btn { border-color: #5A5A59; color: #D6D6D5; }
  .copy-btn .icon-check { display: none; }
  .copy-btn.copied .icon-copy { display: none; }
  .copy-btn.copied .icon-check { display: inline-flex; }

  footer.wrap { padding-top: 32px; padding-bottom: 32px; }
  footer .num { margin: 0; }

  @media (max-width: 640px) {
    .wrap { padding: 0 20px; }
    .toc-grid { grid-template-columns: 1fr; }
    .top { padding-top: 32px; }
    .hero { padding-top: 16px; padding-bottom: 32px; }
    .hero h1 { font: 600 32px/1.15 var(--font-sans); letter-spacing: -0.005em; margin: 0 0 16px; }
    .lead { font: 400 17px/1.5 var(--font-sans); }
    .toc-body { padding-top: 24px; padding-bottom: 24px; }
    .chapter { padding: 32px 0; }
    .chapter:last-of-type { padding-bottom: 40px; }
    .chapter h2 { font: 600 21px/1.3 var(--font-sans); margin: 8px 0 16px; }
    .chapter p { font: 400 16px/1.65 var(--font-sans); margin: 0 0 12px; }
    .chapter ul li { font: 400 16px/1.65 var(--font-sans); }
    .kontakt .wrap { padding: 48px 20px 56px; }
    .kontakt h2 { font: 600 26px/1.2 var(--font-sans); margin: 12px 0 16px; }
    footer.wrap { padding-top: 20px; padding-bottom: 20px; }
  }

  /* ============================================================
     Infoblatt "Bauernhof gesucht"
     Wird zweifach genutzt: als eigenständige Seite
     (bauernhof-gesucht.html) und als Modal über der Hauptseite.
     ============================================================ */

  /* --- Button im Hero der Hauptseite, führt zum Infoblatt --- */
  .hero-cta { margin: 32px 0 0; }

  /* --- Abdunkelung hinter der Karte --- */
  .backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.55);
    z-index: 10;
  }

  /* --- Scroll-Ebene, die die Karte trägt --- */
  .sheet-scroll {
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px;
  }

  /* --- Die Karte selbst --- */
  .sheet {
    position: relative;
    max-width: 720px;
    margin: 48px auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 2px;
  }
  .sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 32px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    border-radius: 2px 2px 0 0;
  }
  .sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
  }
  .sheet-close:hover { border-color: var(--ink); }
  .sheet-body { padding: 40px 32px 48px; }
  .sheet-body h1 {
    font: 600 48px/1.1 var(--font-sans);
    letter-spacing: -0.01em;
    margin: 0 0 28px;
  }
  .sheet .chapter:last-of-type { padding-bottom: 48px; }

  /* --- Fuß der Karte: Download und Kontakt --- */
  .sheet-foot {
    padding-top: 40px;
    border-top: 1px solid var(--line);
  }
  .sheet-foot .contact-name { margin-top: 40px; }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink);
    border-radius: 2px;
    font: 500 16px/1.2 var(--font-sans);
    cursor: pointer;
  }
  .btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
  .btn svg { flex-shrink: 0; }
  .btn-note {
    font: 400 13px/1.5 var(--font-mono);
    color: var(--ink-soft);
    margin: 12px 0 0;
  }

  /* Wenn das Modal offen ist, scrollt die Seite dahinter nicht mit */
  body.sheet-open { overflow: hidden; }

  @media (max-width: 640px) {
    .hero-cta { margin-top: 24px; }
    .sheet-scroll { padding: 0 12px; }
    .sheet { margin: 12px auto; }
    .sheet-head { padding: 16px 20px; }
    .sheet-body { padding: 32px 20px 40px; }
    .sheet-body h1 {
      font: 600 32px/1.15 var(--font-sans);
      letter-spacing: -0.005em;
      margin: 0 0 16px;
    }
    .sheet .chapter:last-of-type { padding-bottom: 32px; }
    .sheet-foot { padding-top: 32px; }
    .sheet-foot .contact-name { margin-top: 32px; }
    .btn { padding: 16px 20px; }
  }

  /* --- Kontaktzeilen ohne Link (Adresse, Zusatzhinweise) --- */
  .contact-plain { font: 400 17px/1.5 var(--font-sans); color: var(--ink-2); }
  .contact-hint { font: 400 13px/1.4 var(--font-mono); color: var(--ink-soft); }