/* Ziegenbetrieb Raffl — Nachfolgersuche
   Die Farben sind aus den Hoffotos abgenommen: dunkles Olivgrün der
   Bergwälder, Holzbraun des Stalls, warmes Grau der Mauern. */

@font-face {
  font-family: 'Fraunces';
  src: url('schriften/fraunces-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('schriften/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --grund: #f4f1ea;
  --grund-tief: #e8e3d8;
  --text: #272418;
  --text-leise: #5c584a;
  --holz: #6b5428;
  --wald: #2f3321;
  --linie: #d3ccbc;
  /* Abgeschwächte Töne für den dunklen Titelbereich */
  --titel-leise: #c3bda8;
  --titel-text: #ded8c7;

  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --spalte: 34rem;
  --rand: 1.5rem;
  --luft: 4rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  /* Fraunces setzt bei negativer Laufweite die Wortabstände zu eng;
     word-spacing gleicht das aus. */
  word-spacing: 0.08em;
  margin: 0;
  font-variation-settings: 'opsz' 100, 'SOFT' 20;
  /* Deutsche Komposita wie "Ziegenerfahrung" sprengen sonst bei
     vergrößerter Schrift die Spalte und erzwingen Querscrollen. */
  hyphens: auto;
  overflow-wrap: break-word;
}

p {
  margin: 0 0 1.15em;
  hyphens: auto;
  overflow-wrap: break-word;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--holz);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Titelbereich --------------------------------------------------- */

.titel {
  position: relative;
  background: var(--wald);
}

.titel__bild img {
  height: 62vh;
  min-height: 20rem;
  max-height: 34rem;
  object-fit: cover;
  object-position: center 58%;
  opacity: 0.82;
}

.titel__text {
  padding: 2rem var(--rand) 2.75rem;
  background: var(--wald);
  color: var(--grund);
}

.ort {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--titel-leise);
  margin-bottom: 0.9rem;
}

.titel h1 {
  font-size: clamp(2rem, 7.5vw, 3.1rem);
  margin-bottom: 1rem;
}

.titel h1 br {
  display: none;
}

.vorspann {
  font-size: 1.125rem;
  color: var(--titel-text);
  max-width: 32rem;
  margin-bottom: 0;
}

/* --- Abschnitte ----------------------------------------------------- */

main {
  display: block;
}

section {
  padding: var(--luft) var(--rand);
  max-width: 78rem;
  margin: 0 auto;
}

section h2 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin-bottom: 1.3rem;
  color: var(--wald);
}

.station__text,
.anlass p,
.einstieg p,
.kontakt p {
  max-width: var(--spalte);
}

.anlass {
  border-bottom: 1px solid var(--linie);
}

/* --- Bilder --------------------------------------------------------- */

.bild {
  margin: 2rem 0 0;
}

.bild img {
  border-radius: 2px;
}

figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-leise);
  max-width: var(--spalte);
}

/* --- Einstieg ------------------------------------------------------- */

.einstieg {
  background: var(--grund-tief);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Der Abschnitt zieht sich farbig über die volle Breite. Sein Inhalt
   läuft über einen eigenen zentrierten Block, damit Überschrift und
   Text in derselben Flucht stehen wie in den übrigen Abschnitten.
   Einzeln zentrierte Kinder würden den auf Textbreite begrenzten
   Absatz gegenüber der Überschrift einrücken. */
.einstieg__inhalt {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--rand);
}

.einstieg h2 {
  color: var(--holz);
}

/* --- Kontakt -------------------------------------------------------- */

.kontakt {
  text-align: left;
}

.kontakt__nummer {
  margin: 2rem 0 0.4rem;
}

.kontakt__nummer a {
  display: inline-block;
  font-family: var(--serif);
  /* Die Nummer soll als eine Einheit lesbar bleiben — umgebrochen
     läge die Unterstreichung nur unter der zweiten Zeile. nowrap
     allein würde aber bei starkem Zoom aus dem Fenster laufen,
     deshalb bindet die Schriftgröße zusätzlich an die Fensterbreite
     (vw), damit die Nummer mitschrumpft statt zu überlaufen. */
  white-space: nowrap;
  font-size: min(8vw, 2.6rem);
  line-height: 1.2;
  color: var(--wald);
  text-decoration: none;
  border-bottom: 2px solid var(--holz);
  padding: 0.35rem 0;
  min-height: 44px;
}

.kontakt__nummer a:hover,
.kontakt__nummer a:focus-visible {
  color: var(--holz);
}

.kontakt__name {
  font-size: 1.125rem;
  margin-bottom: 1.4rem;
}

.kontakt__hinweis {
  color: var(--text-leise);
}

/* --- Fuß ------------------------------------------------------------ */

footer {
  border-top: 1px solid var(--linie);
  padding: 2.5rem var(--rand) 3.5rem;
  max-width: 78rem;
  margin: 0 auto;
  font-size: 0.9375rem;
  color: var(--text-leise);
}

.footer__logo {
  width: 40px;
  height: auto;
  margin-bottom: 1rem;
  opacity: 0.75;
}

footer p {
  margin-bottom: 0.4rem;
  max-width: var(--spalte);
}

.footer__impressum {
  margin-top: 1.2rem;
  font-size: 0.875rem;
}

/* --- Rufknopf ------------------------------------------------------- */

/* Die Nummer soll auf jeder Scrollposition erreichbar sein. Der Knopf
   steht deshalb fix oben rechts im Eck. Nur das Symbol, keine Schrift:
   die Nummer selbst steht groß im Kontaktabschnitt. */
.rufknopf {
  position: fixed;
  top: var(--rand);
  right: var(--rand);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Die Fläche liegt über den 44px, die sich am Handy sicher treffen
     lassen — das Symbol selbst ist deutlich kleiner. */
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--wald);
  color: var(--titel-text);
  /* Der Schatten hebt den Knopf von hellen wie dunklen Bildbereichen
     ab, über die er beim Scrollen läuft. */
  box-shadow: 0 2px 10px rgba(20, 22, 13, 0.3);
  text-decoration: none;
}

.rufknopf:hover,
.rufknopf:focus-visible {
  background: var(--holz);
  color: #fff;
}

.rufknopf__symbol {
  width: 1.375rem;
  height: 1.375rem;
}

/* Nur für Vorlesewerkzeuge: der Knopf zeigt bloß ein Symbol, braucht
   aber einen sprechenden Namen. display:none würde ihn auch dort
   verschwinden lassen, deshalb die Verkleinerung auf einen Punkt. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Ab Tablet ------------------------------------------------------ */

@media (min-width: 48rem) {
  :root {
    --rand: 3rem;
    --luft: 5.5rem;
  }

  /* Mehr Platz am Rand: der Knopf darf etwas größer werden. */
  .rufknopf {
    width: 3.5rem;
    height: 3.5rem;
  }

  .rufknopf__symbol {
    width: 1.5rem;
    height: 1.5rem;
  }

  .titel__bild img {
    height: 78vh;
    max-height: 44rem;
  }

  .titel__text {
    position: absolute;
    inset: auto 0 0 0;
    background: linear-gradient(to top, rgba(20, 22, 13, 0.82) 0%, rgba(20, 22, 13, 0.55) 45%, rgba(20, 22, 13, 0) 100%);
    padding: 9rem var(--rand) 3rem;
  }

  .titel h1 br {
    display: inline;
  }

  /* Text und Hochformat-Bild stehen nebeneinander, breite Bilder
     laufen über beide Spalten. Abschnitte ohne Hochformat-Bild
     behalten die Textspalte links und das Bild darunter. */
  .station {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem 3.5rem;
    align-items: start;
  }

  .station h2 {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .bild {
    margin: 0;
  }

  .bild--breit {
    grid-column: 1 / -1;
  }

  /* Hat ein Abschnitt kein Hochformat-Bild, bekommt der Text die
     volle Breite. max-width muss hier aufgehoben werden, sonst
     teilt columns die begrenzten 34rem in zwei schmale Spalten.
     column-width statt einer festen Spaltenzahl: kurze Abschnitte
     bleiben dann einspaltig, statt eine leere Spalte zu lassen. */
  .station:not(:has(.bild--hoch)) .station__text {
    grid-column: 1 / -1;
    max-width: 62rem;
    columns: 2 26rem;
    column-gap: 3.5rem;
  }

  .station:not(:has(.bild--hoch)) .station__text p {
    max-width: none;
    break-inside: avoid;
  }
}

/* --- Ab großem Bildschirm ------------------------------------------- */

@media (min-width: 72rem) {
  :root {
    --rand: 4rem;
    --luft: 7rem;
  }

  body {
    font-size: 1.125rem;
  }

  .bild--breit img {
    max-height: 40rem;
    object-fit: cover;
  }
}

/* Bewusst keine Scroll-Animation: Der Inhalt — und vor allem die
   Telefonnummer — muss unbedingt sichtbar sein, auch wenn eine
   Animation nicht auslöst. Ein Auftauch-Effekt über
   animation-timeline hat genau das gebrochen (alle Abschnitte
   blieben auf opacity 0). Die Seite lebt von den Fotos, nicht
   von Bewegung. */