@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/fonts/newsreader-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: "Newsreader";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/fonts/newsreader-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: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-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: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-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;
}

/* ---------------------------------------------------------------------------
   Puffinghof - Designsystem
   Terrakotta und Tannengrün auf warmem Papierton, Newsreader über Source Sans.
   Die Schriften liegen unter /fonts, es wird nichts von außen nachgeladen -
   siehe Datenschutzerklärung.
   --------------------------------------------------------------------------- */

:root {
  --ground: #faf7f2;
  --surface: #ffffff;
  --band: #eef1ea;
  --ink: #22201d;
  --body: #34302a;
  --muted: #55504a;
  --muted-soft: #5c574f;
  --label: #9a9084;
  --line: #ece5d9;
  --line-strong: #e7e0d4;
  --green: #2f4a3c;
  --green-soft: #c2d0c1;
  --green-label: #90a690;
  --accent: #b4643f;
  --accent-dark: #8d4a2c;
  --paper: #fbf8f2;

  --gutter: 72px;
  --band-y: 88px;
  /* Breite des Satzspiegels am grossen Bildschirm. Die Baender bleiben
     randlos, nur ihr Inhalt wird zentriert - siehe .band weiter unten. */
  --measure: 1300px;
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

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

/* Sprungziele nicht unter die Sticky-Kopfzeile schieben */
html { scroll-padding-top: 112px; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

/* Grundraster: überall 72px seitlich, 88px zwischen den Bändern */
.band { padding: var(--band-y) var(--gutter); }
.band--tight-bottom { padding-bottom: 40px; }
.band--tight-top { padding-top: 0; }
.band--sage { background: var(--band); }
.band--green { background: var(--green); color: #e8ede7; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--light { color: #f0e4d8; }
.eyebrow--sage { color: #6d7f6f; }

.lede { font-size: 19.5px; line-height: 1.68; color: var(--muted); }

/* Kopfzeile */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--line-strong);
}
.wordmark { display: flex; flex-direction: column; gap: 1px; }
.wordmark__name { font-family: var(--serif); font-size: 27px; line-height: 1.1; color: var(--green); }
.wordmark__kicker { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.masthead__right { display: flex; align-items: center; gap: 34px; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 16px; }
.nav a { color: #4a453d; }
.nav a:hover { color: var(--ink); }
.nav a.is-current { color: var(--green); border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.phone-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border: 1px solid #d8cfc0; border-radius: 999px;
  font-size: 15px; color: var(--body);
}
.phone-pill:hover { color: var(--ink); border-color: #c6b9a5; }

/* Bühne */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.hero--tall { height: 620px; }
.hero--page { height: 400px; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(22,30,24,0.74) 0%, rgba(22,30,24,0.40) 46%, rgba(22,30,24,0.06) 78%),
    linear-gradient(180deg, rgba(22,30,24,0.40) 0%, rgba(22,30,24,0.10) 34%, rgba(22,30,24,0.64) 100%);
}
.hero__body {
  /* flex statt height: 100% - eine Prozenthoehe greift nicht, wenn die Buehne
     nur min-height hat, und der Text rutscht dann nach oben. */
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Die Breite gibt der Satzspiegel vor (siehe Ende der Datei), damit die
     Überschrift auf derselben Achse sitzt wie der Text darunter. */
  gap: 26px; padding: var(--band-y) var(--gutter);
}
.hero--page .hero__body { gap: 16px; }
.hero__title { font-size: 74px; line-height: 1.04; color: #fffdf9; letter-spacing: -0.025em; }
.hero--page .hero__title { font-size: 62px; line-height: 1.06; }
.hero__lede { font-size: 21px; line-height: 1.55; color: #ece2d6; max-width: 620px; }
.hero--page .hero__lede { font-size: 20px; max-width: 640px; }

/* Schaltflächen */
.actions { display: flex; gap: 14px; padding-top: 6px; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border-radius: 999px;
  font-weight: 600; font-size: 16.5px;
  /* Auch <button> traegt diese Klasse - ohne das Folgende kommt der native
     Rahmen und die Systemschrift durch. */
  border: 0; appearance: none; -webkit-appearance: none;
  font-family: var(--sans); line-height: 1.2; cursor: pointer;
}
.button--primary { background: var(--accent); color: #fff; }
.button--primary:hover { background: var(--accent-dark); color: #fff; }
.button--ghost { border: 1px solid rgba(255,253,249,0.55); color: #fffdf9; }
.button--ghost:hover { border-color: #fffdf9; color: #fffdf9; }

/* Raster */
.grid { display: grid; gap: 32px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.stack { display: flex; flex-direction: column; }
.centered { align-items: center; text-align: center; }
.centered .lede, .centered h2 { max-width: 880px; }

/* Karten */
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden;
}
.card__img { width: 100%; height: 236px; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: 13px; padding: 30px 30px 32px; }
.card__title { font-size: 27px; color: var(--ink); }
.card__text { font-size: 16.5px; color: var(--muted-soft); }
.card__more { font-weight: 600; font-size: 16px; color: var(--accent); }

/* Kontaktband. Text und Kontaktdaten stehen nebeneinander, solange sie
   nebeneinander passen - reicht der Satzspiegel nicht, rutschen die Daten
   unter den Text. Die Mindestbreiten sind der Grund für das Umbrechen:
   ohne sie wurden Telefonnummer und Adresse mitten im Wort getrennt. */
.contact { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 46px 64px; position: relative; overflow: hidden; }
.contact__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(35,58,46,0.95) 0%, rgba(35,58,46,0.86) 52%, rgba(35,58,46,0.74) 100%);
}
.contact__text { position: relative; display: flex; flex-direction: column; gap: 18px; flex: 1 1 420px; max-width: 620px; }
.contact__title { font-size: 40px; line-height: 1.16; color: var(--paper); }
.contact__lede { font-size: 18px; color: var(--green-soft); }
.contact__details { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; flex: 1 1 560px; max-width: 720px; }
.detail { display: flex; flex-direction: column; gap: 7px; }
.detail__label { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-label); }
.detail__value { font-size: 18px; color: var(--paper); }
a.detail__value:hover { color: #fff; }

/* Fußzeile */
.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 30px var(--gutter);
  border-top: 1px solid var(--line-strong);
  font-size: 15px; color: #8b8277;
}
.footer a { color: #8b8277; }
.footer a:hover { color: var(--body); }
.footer__links { display: flex; gap: 24px; }

@media (max-width: 900px) {
  :root { --gutter: 40px; --band-y: 56px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .hero--tall { height: auto; min-height: 520px; }
  .hero__title { font-size: 46px; }
  .hero--page .hero__title { font-size: 38px; }
  .masthead { flex-wrap: wrap; gap: 18px; }
  .contact { flex-direction: column; gap: 36px; }
  /* In der Spalte wird die Flex-Basis zur Hoehe. Ohne dieses Zuruecksetzen
     erzwaengen die 420px/560px aus .contact__text und .contact__details eine
     Mindesthoehe, und die Grid-Zeilen ziehen sich darueber auseinander. */
  .contact__text,
  .contact__details { flex: 0 1 auto; }
  .contact__details { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --- Unterseiten ------------------------------------------------------- */

.section-title { font-size: 40px; line-height: 1.18; color: var(--ink); }
.section-title--lg { font-size: 44px; line-height: 1.16; }
.section-title--sm { font-size: 34px; }
.section-title--xs { font-size: 28px; }
.prose--sage p { font-size: 18px; color: #4f5a4e; }
.prose--sage { gap: 18px; }
.prose { display: flex; flex-direction: column; gap: 22px; }
.prose p { font-size: 18.5px; color: var(--muted); }
.prose--tight p { font-size: 17px; }
.prose--tight { gap: 14px; max-width: 780px; }
.more { font-weight: 600; font-size: 16.5px; color: var(--accent); }

/* Sortimentkarton */
.karton {
  display: flex; flex-direction: column; gap: 20px;
  padding: 34px 36px;
  background: var(--surface); border: 1px solid #dfe4dc; border-radius: 4px;
}
.karton__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.karton__name { font-size: 27px; color: var(--ink); }
.karton__tag { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.kv { display: flex; flex-direction: column; gap: 11px; font-size: 16.5px; color: var(--muted); }
.kv__row { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.kv__row--last { border-bottom: 0; padding-bottom: 0; }
.kv__value { color: var(--ink); }

/* Einzelstücke */
.cut { display: flex; flex-direction: column; gap: 18px; }
.cut__img { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; }
.cut__body { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 2px solid var(--ink); }
.cut__name { font-size: 24px; color: var(--ink); }
.cut__text { font-size: 16.5px; color: var(--muted-soft); }

/* Ausstattung */
.feature { display: flex; flex-direction: column; gap: 20px; padding: 36px 40px; background: var(--band); border-radius: 4px; align-self: start; }
.feature__title { font-size: 25px; color: var(--ink); }
.feature__list { display: flex; flex-direction: column; gap: 14px; font-size: 17px; color: #4f5a4e; }
.feature__item { display: flex; align-items: center; gap: 13px; }
.feature__item svg { flex-shrink: 0; }

/* Galerie */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gallery__img { width: 100%; height: 280px; object-fit: cover; border-radius: 4px; }
.gallery__img:first-child { grid-column: span 2; height: 300px; }

/* Freizeit-Spalten */
.listcard {
  display: flex; flex-direction: column; gap: 22px;
  padding: 38px 36px 40px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
}
.listcard__title { font-size: 28px; color: var(--ink); }
.listcard__sub { font-size: 16.5px; color: var(--muted-soft); }
.listcard__list { display: flex; flex-direction: column; font-size: 17px; color: #4a453d; }
.listcard__item { padding: 11px 0; border-top: 1px solid var(--line); }

/* Rechtliche Seiten */
.pagehead {
  display: flex; flex-direction: column; gap: 16px;
  padding: var(--band-y) var(--gutter) 40px;
  border-bottom: 1px solid var(--line);
}
.pagehead__title { font-size: 56px; line-height: 1.08; color: var(--ink); }
.pagehead__lede { font-size: 18px; color: #6b655d; max-width: 700px; }

.notice {
  display: flex; gap: 18px;
  margin: 44px var(--gutter) 0; padding: 26px 30px;
  background: #f4ece4; border-left: 3px solid var(--accent); border-radius: 3px;
}
.notice svg { flex-shrink: 0; margin-top: 2px; }
.notice__text { font-size: 16.5px; color: #6b5a4c; }

.kv__pair { display: flex; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.kv__pair--last { border-bottom: 1px solid var(--line); }
.kv__label {
  flex-basis: 190px; flex-shrink: 0;
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--label); padding-top: 5px;
}
.kv__text { font-size: 18px; color: var(--ink); }

.box { display: flex; flex-direction: column; gap: 20px; padding: 34px 36px; background: var(--band); border-radius: 4px; align-self: start; }
.box__title { font-size: 22px; color: var(--ink); }
.box__text { font-size: 16.5px; color: #4f5a4e; }
.box__list { display: flex; flex-direction: column; gap: 12px; font-size: 16.5px; color: #4f5a4e; }
.box__item { padding-top: 12px; border-top: 1px solid #dde3da; }

.legalrow { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; padding: 34px 0; border-top: 1px solid var(--line); }
.legalrow--last { border-bottom: 1px solid var(--line); }
.legalrow__title { font-size: 22px; color: var(--ink); }
.legalrow__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; font-size: 17px; color: var(--muted); }
.legalrow__item { padding-top: 12px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery__img:first-child { grid-column: auto; }
  .legalrow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .legalrow__list { grid-template-columns: minmax(0, 1fr); }
  .kv__pair { flex-direction: column; gap: 6px; }
  /* In der Spalte wirkt flex-basis auf die HOEHE - ohne das Zuruecksetzen
     wird die Beschriftung 190px hoch und reisst die Zeile auseinander. */
  .kv__label { flex-basis: auto; padding-top: 0; }
  .pagehead__title { font-size: 38px; }
  .notice { margin: 32px var(--gutter) 0; }
}

/* --- Kopfzeile bleibt beim Scrollen stehen ----------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--ground);
}

/* --- Anfrageformular --------------------------------------------------- */
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; max-width: 900px; }
.form__field { display: flex; flex-direction: column; gap: 8px; }
.form__field--wide { grid-column: 1 / -1; }
.form__label { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--label); }
.form__req { color: var(--accent); letter-spacing: 0; }
.form__input {
  font-family: var(--sans); font-size: 17px; color: var(--ink);
  background: var(--surface);
  border: 1px solid #dfe4dc; border-radius: 3px;
  padding: 12px 14px;
}
.form__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.form__input--area { resize: vertical; line-height: 1.55; }
.form__foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 28px; }
.form__note { font-size: 15px; color: #6b7a6c; max-width: 460px; }
.form__ok {
  padding: 16px 20px; border-left: 3px solid var(--green);
  background: #e3ebe2; color: #2f4a3c; font-size: 17px;
}
.form__errors {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 20px; border-left: 3px solid var(--accent);
  background: #f4ece4; color: #7a4a30; font-size: 16px;
}
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Schmale Bildschirme ------------------------------------------------
   Der 900er-Block oben stellt nur die Raster um. Ab hier werden auch die
   Schriftgrade kleiner - sonst steht der Desktop-Grad auf dem Telefon und
   Überschriften wie Navigationspunkte brechen mitten im Wort.            */

@media (max-width: 640px) {
  :root { --gutter: 20px; --band-y: 44px; }
  html { scroll-padding-top: 150px; }
  body { font-size: 16px; }

  /* Kopfzeile: Wortmarke in die erste Zeile, darunter Navigation und
     Telefonknopf - eng wird es dort, siehe .masthead__right. */
  .masthead { flex-wrap: wrap; gap: 14px 12px; padding: 14px var(--gutter); }
  .wordmark { order: 1; }
  /* Menü und Telefonknopf dürfen umbrechen. Auf dem iPhone (393px) fehlten
     für ein Nebeneinander drei Pixel: das Menü brach dann selbst in zwei
     Zeilen um und der Knopf stand daneben in der Luft. So rutscht der Knopf
     ganz unter das Menü, sobald es knapp wird - ohne festen Umbruchpunkt. */
  .masthead__right { order: 3; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  .wordmark__name { font-size: 22px; }
  .wordmark__kicker { font-size: 10px; letter-spacing: 0.1em; }
  /* nowrap: das Menü selbst soll einzeilig bleiben - umbrechen darf nur
     der Telefonknopf darunter, siehe .masthead__right. */
  .nav { flex-wrap: nowrap; gap: 16px; font-size: 15px; }
  .nav a { white-space: nowrap; }
  .phone-pill { padding: 8px 14px; font-size: 13px; white-space: nowrap; }

  /* Bühne */
  .hero--tall { height: auto; min-height: 440px; }
  .hero--page { height: auto; min-height: 280px; }
  .hero__body { gap: 16px; }
  .hero__title { font-size: 34px; line-height: 1.1; }
  .hero--page .hero__title { font-size: 28px; }
  .hero__lede, .hero--page .hero__lede { font-size: 17px; line-height: 1.5; }
  .eyebrow { font-size: 11px; letter-spacing: 0.16em; }

  /* Schaltflächen untereinander statt umbrechend nebeneinander */
  .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .button { padding: 14px 22px; font-size: 16px; }

  /* Fließtext */
  .section-title { font-size: 27px; line-height: 1.24; }
  .section-title--lg { font-size: 30px; line-height: 1.2; }
  .section-title--sm { font-size: 24px; }
  .section-title--xs { font-size: 22px; }
  .prose--sage p { font-size: 16.5px; }
  .lede { font-size: 17px; }
  .prose p { font-size: 16.5px; }
  .pagehead__title { font-size: 30px; }
  .pagehead { padding-bottom: 28px; }
  .contact__title { font-size: 28px; }

  /* Karten und Bilder */
  .card__img { width: 100%; height: 200px; }
  .gallery__img, .gallery__img:first-child { height: 220px; }
  .karton, .listcard, .feature, .box { padding: 26px 22px; }
  .karton__head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cut__img { height: 180px; }

  /* Formular */
  .form__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .form__foot .button { width: 100%; }
  .notice { margin: 24px var(--gutter) 0; padding: 20px 22px; }
}

/* --- Satzspiegel ------------------------------------------------------- */

/* Am breiten Bildschirm liefen die Zeilen bis an beide Fensterkanten - bei
   1920px sind das über 110 Zeichen, deutlich zu viel zum Lesen. Statt eines
   zentrierten Containers mit max-width wächst hier der seitliche Innenabstand
   über --gutter hinaus. Der Unterschied ist wichtig: ein Container würde die
   Bänder mitschneiden, so bleiben Hintergrund, Bühnenbild und das grüne
   Kontaktband randlos und nur ihr Inhalt sitzt in der Mitte.

   Steht am Ende der Datei, weil .masthead, .footer, .pagehead und
   .hero__body ihren Innenabstand selbst als Kurzschreibweise setzen und
   diese sonst gewinnen würde. max() greift auf --gutter zurück, sobald das
   Fenster schmaler wird - die Umbruchpunkte weiter oben ändern nur die
   Variable und gelten dadurch unverändert weiter. */
.masthead,
.footer,
.band,
.pagehead,
.hero__body {
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
}
.notice {
  margin-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
}