/* Bewusst ohne externe Schriften, Karten oder Einbettungen: Die Seite schickt keine Besucherdaten an Dritte. */
  :root {
    --sonne: #F39200;          /* Orange aus dem Logo, nur für Flächen und große Formen */
    --sonne-dunkel: #A65A00;   /* lesbares Orange für Text */
    --sonne-hell: #FFF4E2;
    --blatt: #739A4B;          /* Grün aus dem Logo */
    --blatt-hell: #EEF4E6;
    --wald: #243E1C;           /* Textfarbe */
    --erde: #6B5A45;
    --weiss: #FFFFFF;
    --beere: #D23B4B;
    --pruef: #FFE14D;
    --schrift: "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  section[id] { scroll-margin-top: 84px; }
  body { margin: 0; background: var(--weiss); color: var(--wald); font: 500 1.0625rem/1.6 var(--schrift); }
  img { max-width: 100%; display: block; }
  a { color: var(--wald); text-decoration-color: var(--blatt); text-underline-offset: 3px; text-decoration-thickness: 2px; }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--sonne); outline-offset: 3px; border-radius: 4px; }
  h1, h2, h3 { font-weight: 800; line-height: 1.08; margin: 0 0 .45em; letter-spacing: -.015em; }
  h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
  h3 { font-size: 1.3rem; letter-spacing: 0; }
  p { margin: 0 0 1em; max-width: 60ch; }
  .rahmen { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
  .leise { color: var(--erde); }

  /* Kopfzeile */
  .kopf { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--blatt-hell); }
  .kopf .rahmen { display: flex; align-items: center; gap: 28px; min-height: 84px; }
  .kopf .logo img { height: 66px; width: auto; }
  .nav { display: flex; gap: 24px; margin-left: auto; font-weight: 600; }
  .nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
  .nav a:hover { border-color: var(--blatt); }
  .anruf { font-weight: 700; text-decoration: none; background: var(--blatt); color: var(--weiss); padding: 10px 18px; border-radius: 999px; white-space: nowrap; }
  .anruf:hover { background: var(--wald); }
  @media (max-width: 820px) { .nav { display: none; } .anruf { margin-left: auto; } .kopf .logo img { height: 46px; } }

  /* Start: die aufgehende Sonne aus dem Logo über den Feldreihen */
  .start { position: relative; overflow: hidden; background: linear-gradient(var(--sonne-hell), var(--weiss) 70%); }
  .start .rahmen { position: relative; z-index: 2; padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(140px, 15vw, 190px); }
  .start h1 { font-size: clamp(1.6rem, 3.6vw, 2.8rem); }
  .start .unter { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 46ch; }
  .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .knopf { display: inline-block; font-weight: 700; text-decoration: none; padding: 13px 24px; border-radius: 999px; border: 2px solid var(--wald); }
  .knopf.voll { background: var(--wald); color: var(--weiss); }
  .knopf.voll:hover { background: var(--blatt); border-color: var(--blatt); }
  .knopf:not(.voll):hover { background: var(--weiss); }

  .stand-info { margin-top: 36px; display: inline-flex; gap: 14px; align-items: flex-start; background: var(--weiss); border: 2px solid var(--blatt-hell); border-radius: 18px; padding: 16px 20px; max-width: 520px; }
  .stand-info .punkt { flex: none; width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; background: var(--sonne); box-shadow: 0 0 0 5px rgba(243,146,0,.18); }
  .stand-info.offen .punkt { background: var(--blatt); box-shadow: 0 0 0 5px rgba(115,154,75,.2); }
  .stand-info b { display: block; font-size: 1.1rem; }
  .stand-info span { color: var(--erde); }

  /* Logo groß links als Blickfang, der Spruch rechts daneben etwas kleiner */
  .start .rahmen { display: grid; grid-template-columns: minmax(240px, 40%) 1fr; column-gap: clamp(32px, 5vw, 72px); align-items: start; }
  .start .rahmen > * { grid-column: 2; }
  .start-logo { grid-column: 1 !important; grid-row: 1 / span 3; align-self: start; width: 100%; max-width: 480px; height: auto; }
  /* Kasten zum Verkaufsstand direkt unter dem Logo */
  .start .stand-info { grid-column: 1 !important; grid-row: 4; justify-self: start; margin-top: 24px; }
  @media (min-width: 821px) { .start .rahmen { padding-bottom: clamp(170px, 19vw, 280px); } }
  @media (max-width: 820px) {
    .start .rahmen { grid-template-columns: 1fr; }
    .start .rahmen > * { grid-column: 1; }
    .start-logo { grid-row: auto; width: min(72vw, 320px); margin-bottom: 16px; order: -2; }
    .start .stand-info { grid-row: auto; margin: 0 0 28px; order: -1; }
  }
  .landschaft { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(240px, 37vw, 500px); z-index: 1; pointer-events: none; }
  @media (max-width: 720px) { .start .rahmen { padding-bottom: 215px; } .landschaft { height: 275px; } }
  .landschaft svg { width: 100%; height: 100%; display: block; }
  .sonne { transform-origin: 50% 100%; animation: aufgehen 1.6s cubic-bezier(.2,.7,.2,1) both; }
  .strahlen { transform-box: fill-box; transform-origin: center; animation: drehen 120s linear infinite; }
  .bild-winter { display: none; }
  body.winter .bild-winter { display: inline; }
  .blaetter { display: none; }
  body.winter .bild-sommer, body.winter .reihen { display: none; }
  body.winter .huegel-hinten { fill: #EDF3F7; }
  body.winter .huegel-vorne { fill: #FFFFFF; }
  body.winter .start { background: linear-gradient(#D3E2EE, #E9F1F7 80%); }
  /* Lichter an den geschmückten Tannen blinken versetzt, der Stern funkelt langsam */
  .lichter { animation: blinken 1.8s ease-in-out infinite; }
  .lichter.l2 { animation-delay: -.6s; }
  .lichter.l3 { animation-delay: -1.2s; }
  .stern { animation: blinken 3s ease-in-out infinite; }
  .stern.spaet { animation-delay: -1.5s; }
  @keyframes blinken { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
  @keyframes aufgehen { from { transform: translateY(38%); } to { transform: none; } }
  @keyframes drehen { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sonne, .strahlen, .lichter, .stern { animation: none; } }

  /* Saisonkalender */
  .saison { padding: 88px 0 96px; }
  .saison .kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: 28px; }
  .saison .kopfzeile p { margin: 0; }
  .legende { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .95rem; color: var(--erde); }
  .legende span { display: inline-flex; align-items: center; gap: 8px; }
  .legende i { width: 28px; height: 12px; border-radius: 6px; background: var(--blatt); }
  .legende i.handel { background: repeating-linear-gradient(135deg, var(--blatt) 0 4px, var(--blatt-hell) 4px 8px); border: 1.5px solid var(--blatt); }
  .heute-text { font-size: 1.2rem; font-weight: 600; margin: 0 0 26px; }
  .heute-text strong { color: var(--sonne-dunkel); }

  .kalender { display: grid; grid-template-columns: 11rem repeat(24, 1fr); row-gap: 10px; align-items: center; position: relative; }
  .kalender .monat { grid-row: 1; grid-column: span 2; text-align: center; font-size: .85rem; font-weight: 600; color: var(--erde); padding-bottom: 8px; border-bottom: 1px solid var(--blatt-hell); }
  .kalender .monat.jetzt { color: var(--wald); font-weight: 800; }
  .kalender .zeile { grid-column: 1 / -1; display: contents; }
  .kalender .name { grid-column: 1; font-weight: 700; padding-right: 14px; line-height: 1.2; }
  .kalender .name small { display: block; font-weight: 500; font-size: .82rem; color: var(--erde); }
  .kalender .balken { height: 26px; border-radius: 13px; background: var(--farbe, var(--blatt)); }
  .kalender .balken.handel { background: repeating-linear-gradient(135deg, var(--farbe, var(--blatt)) 0 5px, color-mix(in srgb, var(--farbe, var(--blatt)) 22%, white) 5px 10px); border: 2px solid var(--farbe, var(--blatt)); }
  .kalender .jetzt-linie { grid-row: 1 / span 10; align-self: stretch; justify-self: start; width: 0; border-left: 2px dashed var(--sonne); position: relative; z-index: 2; }
  .kalender .jetzt-linie::before { content: "heute"; position: absolute; top: -26px; left: -20px; font-size: .78rem; font-weight: 700; color: var(--sonne-dunkel); background: var(--weiss); padding: 0 4px; }
  @media (max-width: 720px) {
    .kalender { grid-template-columns: 6.4rem repeat(24, 1fr); row-gap: 8px; }
    .kalender .monat { font-size: .62rem; }
    .kalender .name { font-size: .92rem; padding-right: 8px; }
    .kalender .name small { font-size: .7rem; }
    .kalender .balken { height: 18px; }
  }

  /* Hof */
  .hof { background: var(--blatt-hell); padding: 96px 0; }
  .hof .rahmen { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
  @media (max-width: 860px) { .hof .rahmen { grid-template-columns: 1fr; } }
  .jahr { font-size: clamp(5.5rem, 16vw, 11rem); font-weight: 800; line-height: .85; color: var(--blatt); letter-spacing: -.04em; margin: 0 0 .1em; }
  .jahr-unter { font-size: 1.25rem; font-weight: 700; margin-bottom: 0; }
  .foto { margin: 32px 0 0; border-radius: 24px; overflow: hidden; background: var(--blatt-hell); }
  .foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
  .stand-foto { margin-top: 28px; }
  .stand-foto img { aspect-ratio: 4 / 3; }
  .feldbild { margin: 32px 0 0; }
  .feldbild img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; border-radius: 24px; }
  .feldbild figcaption { font-size: .9rem; color: var(--erde); margin-top: 10px; }
  .foto-platz { aspect-ratio: 4 / 3; border-radius: 24px; background: var(--weiss); border: 2px dashed var(--blatt); display: grid; place-items: center; text-align: center; padding: 24px; color: var(--erde); font-weight: 600; margin-top: 32px; }
  .hof ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
  .hof li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
  .hof li svg { margin-top: 3px; }

  /* Vom Feld erzählt */
  .feld { padding: 96px 0; }
  .feld .liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 36px; }
  @media (max-width: 860px) { .feld .liste { grid-template-columns: 1fr; gap: 28px; } }
  .feld .eintrag { border-top: 3px solid var(--sonne); padding-top: 18px; }
  .feld .eintrag .gross { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--wald); margin-bottom: 8px; }
  .feld .insta { margin-top: 40px; font-weight: 700; }

  /* Verkaufsstand */
  .stand { background: var(--wald); color: var(--weiss); padding: 96px 0; }
  .stand a { color: var(--weiss); }
  .stand .rahmen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); }
  @media (max-width: 860px) { .stand .rahmen { grid-template-columns: 1fr; } }
  .stand .zeiten { font-size: clamp(2.1rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1; margin: 6px 0 14px; color: var(--sonne); }
  .stand-status { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; background: rgba(255,255,255,.1); border-radius: 999px; padding: 8px 16px 8px 12px; margin-bottom: 24px; }
  .stand-status .punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--sonne); box-shadow: 0 0 0 4px rgba(243,146,0,.25); }
  .stand-status.offen .punkt { background: #9BC46A; box-shadow: 0 0 0 4px rgba(155,196,106,.3); }
  .stand .ware { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255,255,255,.25); }
  .stand .ware li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.25); display: flex; justify-content: space-between; gap: 16px; }
  .stand .ware b { font-size: 1.15rem; }
  .stand .ware span { color: #CFE0BE; text-align: right; }
  .stand .pruefen { background: linear-gradient(transparent 62%, rgba(255,225,77,.45) 62%); }

  /* Anfahrt */
  .anfahrt { padding: 96px 0; }
  .anfahrt .rahmen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
  @media (max-width: 860px) { .anfahrt .rahmen { grid-template-columns: 1fr; } }
  address { font-style: normal; font-size: 1.3rem; line-height: 1.5; font-weight: 600; margin-bottom: 24px; }
  .kontakt { display: grid; gap: 10px; }
  .kontakt a { font-size: 1.2rem; font-weight: 700; justify-self: start; }
  .weg { background: var(--sonne-hell); border-radius: 24px; padding: 28px; }
  .weg p:last-child { margin-bottom: 0; }

  /* Fuß */
  .fuss { border-top: 1px solid var(--blatt-hell); padding: 40px 0 110px; font-size: .95rem; }
  .fuss .rahmen { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
  .fuss img { height: 64px; width: auto; }
  .fuss nav { display: flex; flex-wrap: wrap; gap: 20px; font-weight: 600; }

  /* Entwurf: gelbe Stellen sind Vermutungen, die der Hof bestätigen muss */
  .pruefen { background: linear-gradient(transparent 60%, var(--pruef) 60%); }
  body.sauber .pruefen { background: none !important; }
  .entwurf { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); background: var(--wald); color: var(--weiss); border-radius: 16px; padding: 12px 14px 12px 18px; display: flex; gap: 12px; align-items: center; justify-content: space-between; z-index: 40; font-size: .95rem; box-shadow: 0 6px 24px rgba(36,62,28,.25); }
  .entwurf mark { background: var(--pruef); color: var(--wald); padding: 0 4px; border-radius: 3px; }
  .entwurf button { font: inherit; font-weight: 700; background: var(--weiss); color: var(--wald); border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }

/* Seite Zertifikate */
.seitenkopf { background: linear-gradient(var(--sonne-hell), var(--weiss)); padding: clamp(48px, 8vw, 96px) 0 40px; }
.seitenkopf h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.seitenkopf p { font-size: 1.15rem; }
.zertifikate { padding: 24px 0 96px; }
.zert-liste { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--wald); max-width: 860px; }
.zert { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--blatt-hell); }
.zert-zeichen { width: 76px; height: 76px; border-radius: 50%; background: var(--blatt-hell); color: var(--blatt); display: grid; place-items: center; font-weight: 800; font-size: .78rem; text-align: center; line-height: 1.1; padding: 0 6px; hyphens: manual; }
.zert-zeichen.bild { width: 100%; height: auto; border-radius: 4px; padding: 0; background: none; }
.zert-zeichen.bild img { display: block; width: 100%; height: auto; border-radius: 4px; }
.zert h2 { font-size: 1.3rem; margin: 0 0 4px; letter-spacing: 0; }
.zert-text { margin: 0 0 8px; max-width: 60ch; }
.zert dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .95rem; color: var(--erde); }
.zert dt { font-weight: 600; }
.zert dd { margin: 0; }
.zert-status { display: inline-block; font-size: .85rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; margin-left: 8px; vertical-align: middle; background: var(--blatt-hell); color: #3D6A1F; }
.zert-status.abgelaufen { background: #FBE3E5; color: #A11C2B; }
.zert-pdf { font-weight: 700; text-decoration: none; background: var(--wald); color: var(--weiss); padding: 10px 18px; border-radius: 999px; white-space: nowrap; }
.zert-pdf:hover { background: var(--blatt); }
.zert-pdf[aria-disabled="true"] { background: var(--blatt-hell); color: var(--erde); pointer-events: none; }
.zert-hinweis { margin-top: 32px; color: var(--erde); font-size: .95rem; }
@media (max-width: 640px) {
  .zert { grid-template-columns: 72px 1fr; }
  .zert-zeichen { width: 56px; height: 56px; font-size: .62rem; padding: 0 3px; }
}

/* Häufige Fragen */
.fragen { background: var(--sonne-hell); padding: 96px 0; }
.fragen-liste { max-width: 820px; margin-top: 28px; border-top: 2px solid var(--wald); }
.fragen details { border-bottom: 1px solid rgba(36,62,28,.18); }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px 0; font-size: 1.15rem; font-weight: 700; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 3px solid var(--blatt); border-bottom: 3px solid var(--blatt); transform: translateY(-4px) rotate(45deg); transition: transform .2s; }
.fragen details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.fragen summary:hover { color: var(--blatt); }
.fragen summary:focus-visible { outline: 3px solid var(--sonne); outline-offset: 3px; border-radius: 4px; }
.fragen details p { margin: -4px 0 20px; color: var(--erde); }
.fragen-mehr { margin-top: 32px; font-weight: 600; }
.mehr-link { margin: 28px 0 0; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .fragen summary::after { transition: none; } }
@media (max-width: 1020px) { .nav { gap: 18px; font-size: .95rem; } }

/* Seite Unser Betrieb */
.nav a[aria-current="page"], .fuss a[aria-current="page"] { border-color: var(--blatt); }
.betrieb-kopf { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.betrieb-kopf .foto { margin: 0; }
@media (max-width: 860px) { .betrieb-kopf { grid-template-columns: 1fr; } }
.haltung { padding: 72px 0 96px; }
.haltung-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 32px; }
.haltung-liste > div { border-top: 3px solid var(--sonne); padding-top: 18px; }
.haltung-liste h3 { font-size: 1.5rem; }
@media (max-width: 860px) { .haltung-liste { grid-template-columns: 1fr; gap: 28px; } }
.bereiche { background: var(--blatt-hell); padding: 96px 0; }
.bereich { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 48px; }
.bereich:nth-of-type(even) figure { order: 2; }
.bereich figure { margin: 0; }
.bereich img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px; }
.bereich.ohne-bild { align-items: start; border-top: 2px solid rgba(36,62,28,.18); padding-top: 40px; }
.bereich h3 { font-size: 1.7rem; }
.bereich p a { font-weight: 700; }
.bereich img.bild-hummel { object-position: 50% 45%; }
.bereich img.bild-erdbeeren { object-position: 50% 42%; }

.damals { padding: 0 0 96px; }
.damals-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: 32px; }
.damals figure { margin: 0; }
.damals img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; }
.damals figcaption { font-size: .9rem; color: var(--erde); margin-top: 10px; }
@media (max-width: 860px) { .damals-bilder { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .bereich { grid-template-columns: 1fr; } .bereich:nth-of-type(even) figure { order: 0; } }

/* Wer hinter dem Hof steht */
.wer { padding: 96px 0; }
.wer-liste { list-style: none; padding: 0; margin: 28px 0 0; max-width: 820px; border-top: 2px solid var(--wald); }
.wer-liste li { display: grid; grid-template-columns: 88px 1fr 1fr; gap: 4px 28px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--blatt-hell); }
.wer-liste img { width: 88px; height: 88px; object-fit: contain; }
.wer-liste b { font-weight: 700; }
.wer-liste span { color: var(--erde); }
@media (max-width: 640px) {
  .wer-liste li { grid-template-columns: 72px 1fr; }
  .wer-liste img { width: 72px; height: 72px; grid-row: span 2; }
}
.zert-betriebe { list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--blatt-hell); }
.zert-betriebe li { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px 18px; padding: 12px 0; border-bottom: 1px solid var(--blatt-hell); }
.zert-logo { width: 56px; height: 56px; object-fit: contain; }
@media (max-width: 640px) {
  .zert-betriebe li { grid-template-columns: 48px 1fr; }
  .zert-logo { width: 48px; height: 48px; }
  .zert-betriebe .zert-pdf { grid-column: 2; justify-self: start; }
}
.zert-betriebe li > div { display: grid; gap: 2px; font-size: .95rem; color: var(--erde); }
.zert-betriebe b { color: var(--wald); font-size: 1.02rem; }
.zert-betriebe .zert-status { margin-left: 4px; }

/* Impressum und Datenschutz */
.rechts-hinweis { display: inline-block; background: var(--pruef); color: var(--wald); font-weight: 700; border-radius: 10px; padding: 6px 12px; }
body.sauber .rechts-hinweis { display: none; }
.rechtstext { padding: 16px 0 96px; }
.rechtstext .rahmen > * { max-width: 880px; }
.rechtstext h2 { font-size: 1.5rem; margin-top: 40px; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-size: 1.1rem; margin-top: 28px; margin-bottom: 6px; }
.rechtstext ul { padding-left: 1.2em; margin: 0 0 1em; }
.rechtstext li { margin-bottom: 4px; }
.rechts-kurz { font-size: 1.15rem; font-weight: 600; background: var(--blatt-hell); border-radius: 18px; padding: 18px 22px; max-width: none; }
.entwurf .ansicht { display: flex; gap: 4px; background: rgba(255,255,255,.12); border-radius: 999px; padding: 3px; }
.entwurf .ansicht button { background: transparent; color: var(--weiss); padding: 6px 12px; }
.entwurf .ansicht button[aria-pressed="true"] { background: var(--weiss); color: var(--wald); }
@media (max-width: 560px) { .entwurf { flex-wrap: wrap; } }

/* Sachverständigenbüro */
.sv-kopf { display: grid; grid-template-columns: 1fr minmax(180px, 280px); gap: clamp(32px, 6vw, 80px); align-items: center; }
.sv-logo { width: 100%; height: auto; }
.sv-kontakt { padding: 0 0 96px; }
.sv-kontakt p { font-size: 1.1rem; line-height: 1.7; }
@media (max-width: 860px) { .sv-kopf { grid-template-columns: 1fr; } .sv-logo { max-width: 200px; order: -1; } }
/* Menü mit sieben Punkten: nicht umbrechen, auf mittleren Bildschirmen enger */
.nav a { white-space: nowrap; }
@media (max-width: 1180px) { .nav { gap: 14px; font-size: .9rem; } }
@media (max-width: 960px) { .nav a[href="index.html#fragen"], .nav a[href="index.html#anfahrt"], .nav a[href="#fragen"], .nav a[href="#anfahrt"] { display: none; } }
/* Sachverständigenbüro in den Blautönen des SV-Logos */
.sv main { --sonne: #1E78C0; --sonne-hell: #E6F0FA; --wald: #123F6B; --blatt: #1E78C0; --blatt-hell: #E6F0FA; color: var(--wald); }
.sv main .haltung { background: var(--blatt-hell); margin-top: 32px; }
.sv main .sv-kontakt { padding-top: 72px; }
.sv .nav a[aria-current="page"], .sv .fuss a[aria-current="page"] { border-color: #1E78C0; }
.sv-punkte { margin: 0; padding: 0; list-style: none; }
.sv-punkte li { position: relative; padding-left: 20px; margin-bottom: 4px; }
.sv-punkte li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--sonne); }
.sv-punkte li.pruefen { width: fit-content; }
/* SV-Seite: Kontakt-Knopf oben rechts in Blau, sanftes Scrollen zum Kontakt */
.sv .anruf { background: #1E78C0; }
.sv .anruf:hover { background: #123F6B; }
.sv-kontakt { scroll-margin-top: 100px; }
@media (prefers-reduced-motion: no-preference) { html:has(body.sv) { scroll-behavior: smooth; } }
/* Kontakt-Knopf oben rechts springt zu "So findet ihr uns"; Platz für die feste Kopfzeile lassen */
.anfahrt { scroll-margin-top: 80px; }
/* Fußnoten-Zeichen (z. B. Bio¹ im Saisonkalender und bei der Bio-Frage) */
sup { font-size: .7em; line-height: 0; vertical-align: super; margin-left: 1px; }

/* Winter: Tannenbaum-Lieferung */
.lieferung { padding: 96px 0; }
.lieferung .rahmen { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .lieferung .rahmen { grid-template-columns: 1fr; } }
.lieferung .unter { font-size: 1.2rem; }
.liefer-schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 28px 0; display: grid; gap: 18px; }
.liefer-schritte li { counter-increment: schritt; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.liefer-schritte li::before { content: counter(schritt); width: 44px; height: 44px; border-radius: 50%; background: var(--wald); color: var(--weiss); font-weight: 800; font-size: 1.2rem; display: grid; place-items: center; }
.liefer-schritte b { display: block; font-size: 1.1rem; }
.liefer-infos { display: grid; gap: 0; margin: 0 0 28px; border-top: 1px solid var(--blatt-hell); }
.liefer-infos div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--blatt-hell); }
.liefer-infos dt { font-weight: 700; }
.liefer-infos dd { margin: 0; text-align: right; }
.liefer-karte { margin: 0; background: #E9F1F7; border-radius: 24px; padding: 20px; }
.liefer-karte svg { display: block; width: 100%; height: auto; }
.liefer-karte figcaption { text-align: center; font-weight: 600; color: var(--erde); margin-top: 8px; }
.liefer-karte figcaption small { display: block; font-size: .75rem; font-weight: 500; margin-top: 4px; }
#frage-bio { scroll-margin-top: 100px; }
.anfahrt-karte { margin: 18px 0 14px; }
.anfahrt-karte svg { display: block; width: 100%; height: auto; border-radius: 16px; }
.anfahrt-karte figcaption { font-size: .75rem; color: var(--erde); margin-top: 6px; }

/* Handy: großes Logo im Startbild etwas kleiner, damit die Überschrift früher zu sehen ist */
@media (max-width: 600px) { .start-logo { width: min(55vw, 220px); margin-bottom: 8px; } }

/* Menü: Sachverständigenbüro als eigener Bereich abgegrenzt */
.nav a[href^="sachverstaendigenbuero.html"] { border: 2px solid #1E78C0; border-radius: 999px; padding: 4px 14px; color: #1E78C0; margin-left: 4px; }
.nav a[href^="sachverstaendigenbuero.html"]:hover, .nav a[href^="sachverstaendigenbuero.html"][aria-current="page"] { background: #E6F0FA; border-color: #1E78C0; }

/* Handy-Menü */
.menue-knopf { display: none; }
@media (max-width: 820px) {
  .kopf .rahmen { gap: 12px; position: relative; }
  .anruf { padding: 9px 16px; }
  .menue-knopf { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; color: var(--wald); background: var(--weiss); border: 2px solid var(--wald); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
  .menue-striche, .menue-striche::before, .menue-striche::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
  .menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; }
  .menue-striche::before { top: -5px; } .menue-striche::after { top: 5px; }
  .kopf.offen .menue-striche { background: transparent; }
  .kopf.offen .menue-striche::before { top: 0; transform: rotate(45deg); }
  .kopf.offen .menue-striche::after { top: 0; transform: rotate(-45deg); }
  .kopf.offen .nav { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss); border-bottom: 1px solid var(--blatt-hell); box-shadow: 0 12px 24px rgba(36,62,28,.12); padding: 6px 20px 18px; font-size: 1.05rem; }
  .kopf.offen .nav a { display: block !important; padding: 13px 0; border-bottom: 1px solid var(--blatt-hell); }
  .kopf.offen .nav a[href^="sachverstaendigenbuero.html"] { margin: 14px 0 0; text-align: center; border: 2px solid #1E78C0; }
}

/* SV-Seite auf dem Handy: langer Titel darf den Text nicht über den Rand schieben */
@media (max-width: 860px) { .sv-kopf { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .sv-kopf h1 { font-size: clamp(1.3rem, 6.8vw, 1.75rem); overflow-wrap: break-word; } .sv-logo { max-width: 160px; } }
/* Winter: längerer Spruch, darum dort mehr Platz unter dem Kasten, damit er nicht über den Tannen liegt */
@media (min-width: 821px) { body.winter .start .rahmen { padding-bottom: clamp(220px, 26vw, 360px); } }

/* SV-Seite: Foto neben den Kontaktdaten */
.sv-kontakt-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.sv-kontakt-inhalt p { margin: 0; }
.sv-foto { margin: 0; flex: 0 0 auto; width: clamp(180px, 24vw, 260px); }
.sv-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 24px; }
.damals-bild { margin: 32px 0 0; }

/* SV-Seite: Auszug aus der Kundenliste */
.sv-kunden { padding: 72px 0 0; }
.sv-kunden-liste { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 40px; border-top: 2px solid #1E78C0; }
.sv-kunden-liste li { padding: 14px 0; border-bottom: 1px solid var(--blatt-hell); font-weight: 600; width: auto; }

/* SV-Seite: Anlässe gelten für beide Sachgebiete */
.sv-anlaesse { margin-top: 48px; padding-top: 18px; border-top: 3px solid #1E78C0; }
.sv-anlaesse h3 { font-size: 1.5rem; }
.sv-anlaesse-liste { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sv-anlaesse-liste li { background: var(--weiss); border: 2px solid #1E78C0; border-radius: 999px; padding: 6px 16px; font-weight: 600; }

/* Winter: Weihnachtsmann (Flug selbst per SVG-Animation in index.html) */
.schlitten-wippen { animation: wippen 1.2s ease-in-out infinite alternate; }
@keyframes wippen { to { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .schlitten-wippen { animation: none; } }

/* Übergänge wie der Schneerand im Weihnachtsbild: eine ganz leicht unregelmäßige Kante statt einer geraden Linie */
:root { --kante: 8px; }
.hof, .stand, .fragen, .bereiche, .sv main .haltung { position: relative; }
.sv main .haltung { margin-top: 0; }
.hof::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--kante) * -1 + 1px); height: var(--kante); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L0 3.9 L60 5.0 L120 5.1 L180 2.6 L240 2.6 L300 4.5 L360 3.3 L420 4.2 L480 2.8 L540 4.7 L600 2.9 L660 4.3 L720 2.6 L780 3.1 L840 2.5 L900 4.1 L960 5.5 L1020 2.7 L1080 2.5 L1140 4.1 L1200 4.8 L1260 2.7 L1320 4.1 L1380 3.0 L1440 5.5 L1440 8 Z' fill='%23EEF4E6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.hof::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--kante) * -1 + 1px); height: var(--kante); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 5.0 L1380 4.8 L1320 5.1 L1260 5.1 L1200 2.9 L1140 5.0 L1080 3.0 L1020 4.1 L960 5.3 L900 5.2 L840 4.2 L780 5.0 L720 3.3 L660 4.3 L600 4.4 L540 4.8 L480 3.6 L420 4.3 L360 3.7 L300 3.3 L240 5.2 L180 3.3 L120 5.3 L60 3.3 L0 4.5 Z' fill='%23EEF4E6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.stand::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--kante) * -1 + 1px); height: var(--kante); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L0 3.0 L60 4.7 L120 2.9 L180 3.5 L240 3.2 L300 5.4 L360 4.0 L420 4.2 L480 4.7 L540 3.3 L600 3.3 L660 4.8 L720 2.8 L780 5.0 L840 2.8 L900 2.7 L960 5.1 L1020 5.3 L1080 3.3 L1140 4.3 L1200 4.9 L1260 4.6 L1320 2.6 L1380 5.2 L1440 3.1 L1440 8 Z' fill='%23243E1C'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.stand::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--kante) * -1 + 1px); height: var(--kante); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 3.2 L1380 4.9 L1320 2.8 L1260 4.2 L1200 3.4 L1140 2.8 L1080 4.1 L1020 4.9 L960 3.2 L900 4.6 L840 4.7 L780 2.9 L720 4.9 L660 3.4 L600 5.1 L540 5.1 L480 5.1 L420 4.1 L360 3.3 L300 4.5 L240 5.4 L180 3.3 L120 4.0 L60 4.7 L0 3.3 Z' fill='%23243E1C'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.fragen::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--kante) * -1 + 1px); height: var(--kante); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 5.2 L1380 3.5 L1320 2.7 L1260 3.6 L1200 3.0 L1140 4.2 L1080 3.1 L1020 5.3 L960 4.3 L900 3.8 L840 4.4 L780 3.2 L720 3.7 L660 4.9 L600 2.6 L540 3.8 L480 3.8 L420 4.7 L360 2.9 L300 4.1 L240 4.3 L180 4.0 L120 5.2 L60 4.9 L0 3.7 Z' fill='%23FFF4E2'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.bereiche::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--kante) * -1 + 1px); height: var(--kante); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L0 4.6 L60 5.5 L120 5.1 L180 4.9 L240 5.0 L300 5.1 L360 3.6 L420 3.0 L480 4.3 L540 4.0 L600 3.8 L660 4.7 L720 3.2 L780 3.6 L840 2.5 L900 5.2 L960 4.2 L1020 3.3 L1080 2.9 L1140 4.7 L1200 3.8 L1260 3.3 L1320 4.4 L1380 4.9 L1440 3.8 L1440 8 Z' fill='%23EEF4E6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.bereiche::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--kante) * -1 + 1px); height: var(--kante); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 5.2 L1380 4.8 L1320 4.3 L1260 4.8 L1200 5.4 L1140 3.1 L1080 3.0 L1020 2.8 L960 4.4 L900 4.4 L840 3.7 L780 4.1 L720 5.5 L660 3.5 L600 4.2 L540 3.9 L480 3.9 L420 4.6 L360 4.5 L300 4.9 L240 5.0 L180 2.7 L120 2.8 L60 3.8 L0 3.7 Z' fill='%23EEF4E6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.sv main .haltung::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--kante) * -1 + 1px); height: var(--kante); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L0 2.8 L60 3.9 L120 5.3 L180 5.2 L240 4.8 L300 2.9 L360 4.5 L420 3.2 L480 4.7 L540 5.0 L600 3.0 L660 4.3 L720 2.8 L780 2.7 L840 2.5 L900 3.5 L960 3.7 L1020 4.7 L1080 5.0 L1140 4.7 L1200 4.9 L1260 3.5 L1320 2.5 L1380 4.0 L1440 3.3 L1440 8 Z' fill='%23E6F0FA'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.sv main .haltung::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--kante) * -1 + 1px); height: var(--kante); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 4.6 L1380 4.4 L1320 3.3 L1260 3.4 L1200 3.5 L1140 2.9 L1080 3.1 L1020 3.3 L960 4.9 L900 3.3 L840 3.2 L780 2.5 L720 3.6 L660 4.1 L600 2.7 L540 5.5 L480 2.6 L420 2.7 L360 5.0 L300 3.4 L240 5.0 L180 4.0 L120 5.2 L60 2.8 L0 3.8 Z' fill='%23E6F0FA'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.start::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--kante); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L0 5.4 L60 4.8 L120 4.5 L180 4.3 L240 5.3 L300 3.3 L360 3.4 L420 3.7 L480 2.7 L540 4.5 L600 3.7 L660 4.5 L720 3.3 L780 5.1 L840 4.6 L900 3.9 L960 2.8 L1020 2.6 L1080 4.0 L1140 2.8 L1200 3.9 L1260 4.9 L1320 4.2 L1380 5.2 L1440 2.7 L1440 8 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; z-index: 1; pointer-events: none; }
body.winter .start::after { display: none; }

/* Handy hochkant: Logo kleiner, Infokasten nach den Knöpfen, gezeichnete Landschaft größer */
@media (max-width: 720px) {
  .start-logo { width: min(46vw, 190px); margin-bottom: 12px; }
  .start .stand-info { order: 0; margin: 24px 0 0; }
  .start h1 { font-size: clamp(1.55rem, 7.4vw, 2rem); }
  .start .rahmen { padding-bottom: 255px; }
  .landschaft { height: 300px; }
}

/* Handy hochkant: Startbild ohne Bewegung (ruckelte), Sonne fest halb hinter dem Horizont; die ganze Szene von den Tunneln bis zum Stand */
@media (max-width: 720px) {
  .start .rahmen { padding-bottom: 150px; }
  .landschaft { height: 150px; }
  .sonne { animation: none; transform: translateY(-20px); }
  /* Strahlen dürfen oben aus dem Bild ragen und hinter dem Infokasten verschwinden */
  .landschaft svg { overflow: visible; }
  .strahlen, .lichter, .stern, .schlitten-wippen { animation: none; }
}

/* Schrift (entschieden 30.10.2026): Überschriften Bitter, Text Source Sans 3.
   Beide liegen im Ordner "schriften" auf dem eigenen Server, nichts wird von Google geladen. Lizenz: SIL Open Font License. */
@font-face { font-family: "Bitter"; src: url("schriften/bitter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("schriften/bitter-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("schriften/source-sans-3-400.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("schriften/source-sans-3-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("schriften/source-sans-3-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
:root { --schrift: "Source Sans 3", "Segoe UI", system-ui, sans-serif; }
body { font-size: 1.125rem; }
:is(h1, h2, h3, .jahr, .feld .eintrag .gross, .stand .zeiten) { font-family: "Bitter", Georgia, serif; font-weight: 700; letter-spacing: -.01em; }
.jahr { font-weight: 800; letter-spacing: -.02em; }