*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.6;
  /* Fuß immer ganz unten, auch auf kurzen Seiten */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 500; line-height: 1.15; color: var(--farbe-marke); margin: 0 0 var(--abstand-3); hyphens: auto; overflow-wrap: break-word; }
h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
@media (min-width: 48rem) { h1 { font-size: 44px; } h2 { font-size: 32px; } h3 { font-size: 24px; } }
@media (min-width: 90rem) { body { font-size: 18px; } h1 { font-size: 52px; } h2 { font-size: 38px; } }
p { margin: 0 0 var(--abstand-3); }
a { color: var(--farbe-marke); }
:focus-visible { outline: 2px solid var(--farbe-fokus); outline-offset: 2px; }
.kicker { font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--farbe-kicker); margin: 0 0 var(--abstand-2); }
.kuhname { font-family: var(--schrift-titel); font-style: italic; font-weight: 400; color: var(--farbe-marke); }
.lead { font-size: 20px; line-height: 1.55; }

.inhalt { width: 100%; max-width: var(--inhalt-breite); margin: 0 auto; padding: 0 var(--rand); }
.abschnitt { padding: var(--abstand-6) 0; }
.abschnitt--flaeche, .abschnitt--natur { background: var(--flaeche-natur); }
.abschnitt--paten { background: var(--flaeche-paten); }
.abschnitt--info { background: var(--flaeche-info); }
.leise { color: var(--farbe-text-leise); }

/* Header */
.kopf { background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-rand); }
.kopf .inhalt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-2); padding-top: var(--abstand-3); padding-bottom: var(--abstand-3); }
.kopf__logo { display: block; line-height: 0; }
.kopf__logo img { height: var(--logo-hoehe); width: auto; }
.kopf nav { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-3); }
@media (min-width: 64rem) { .kopf nav { gap: var(--space-8); font-size: 18px; } }
.kopf nav a { color: var(--farbe-marke); text-decoration: none; font-weight: 600; }
.kopf nav a:hover { color: var(--farbe-akzent); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mobiles Menü (js/menue.js): Logo und ☰; die Navigation öffnet sich als Vollbild */
.kopf .kopf__nav-pate, .kopf__menue { display: none; }
@media (max-width: 47.99rem) {
  .kopf--js .inhalt { flex-wrap: nowrap; }
  .kopf--js .kopf__logo { margin-right: auto; position: relative; z-index: 101; }
  .kopf--js .kopf__menue {
    display: grid; place-items: center; position: relative; z-index: 101;
    width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--farbe-marke); cursor: pointer;
  }
  .kopf__striche, .kopf__striche::before, .kopf__striche::after {
    display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s, background 0.2s;
  }
  .kopf__striche { position: relative; }
  .kopf__striche::before, .kopf__striche::after { content: ""; position: absolute; left: 0; }
  .kopf__striche::before { top: -7px; }
  .kopf__striche::after { top: 7px; }
  .ist-offen .kopf__striche { background: transparent; }
  .ist-offen .kopf__striche::before { transform: translateY(7px) rotate(45deg); }
  .ist-offen .kopf__striche::after { transform: translateY(-7px) rotate(-45deg); }

  .kopf--js nav { display: none; }
  .kopf--js.ist-offen nav {
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--space-2);
    position: fixed; inset: 0; z-index: 100; overflow-y: auto;
    padding: calc(var(--kopf-hoehe) + var(--space-4)) var(--rand) var(--space-8);
    background: var(--farbe-flaeche);
  }
  .kopf--js.ist-offen nav a:not(.knopf) { font-family: var(--schrift-titel); font-size: 1.75rem; font-weight: 400; padding: var(--space-2) 0; border-bottom: 1px solid var(--farbe-rand); }
  .kopf--js .kopf__nav-pate { display: block; margin-top: var(--space-6); text-align: center; color: var(--farbe-akzent-text); }
  .menue-offen { overflow: hidden; }
}

/* Footer */
.fuss { background: var(--farbe-flaeche-dunkel); color: var(--farbe-text-hell); padding: var(--abstand-5) 0; font-size: 0.95rem; position: relative; }
/* Baumreihe von Hof Steen als Silhouette über dem Fuß (aus einem Foto ausgeschnitten) */
.fuss::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(36px, 7vw, 100px); background: var(--farbe-flaeche-dunkel); -webkit-mask: url("../bilder/deko/baumreihe.svg") bottom / 100% 100% no-repeat; mask: url("../bilder/deko/baumreihe.svg") bottom / 100% 100% no-repeat; pointer-events: none; }
/* Die Baumreihe ragt in den letzten Abschnitt hinein, dafür unten Platz lassen */
main > .abschnitt:last-child { padding-bottom: calc(var(--abstand-6) + clamp(36px, 7vw, 100px)); }
@media (max-width: 47.99rem) { main > .abschnitt:last-child { padding-bottom: calc(var(--abstand-6) + 64px); } }
@media (max-width: 47.99rem) { .fuss::before { height: 64px; -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: right bottom; mask-position: right bottom; } }
.fuss a { color: var(--farbe-text-hell); }
.fuss nav { display: flex; flex-wrap: wrap; gap: var(--abstand-3); margin-bottom: var(--abstand-3); }
.fuss__hinweis { margin: 0; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}