/* Lokal selbst gehostete Webschriften. */
@font-face {
  font-family: "Bree Serif";
  src: url("../fonts/BreeSerif-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("../fonts/Lexend-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --forest-950: #172019;
  --forest-900: #1d281f;
  --forest-800: #29362b;
  --forest-700: #344333;
  --moss-600: #687547;
  --moss-500: #7f8e58;
  --bark-600: #8a6247;
  --paper-50: #fffdf8;
  --paper-100: #faf7ef;
  --paper-200: #f1ebdd;
  --ink-900: #20231f;
  --ink-700: #4d534c;
  --line: rgba(32, 35, 31, 0.14);
  --radius-sm: .65rem;
  --radius-md: 1rem;
  --radius-lg: 1.35rem;
  --shadow-soft: 0 16px 44px rgba(23, 32, 25, .10);
  --content: min(1120px, calc(100% - 2rem));

  /* Vorläufige Webschriften:
     Die eigentliche Mauzkauz-Handschrift kann später als WOFF2 eingebunden werden. */
  --serif: "Bree Serif", Georgia, "Times New Roman", serif;
  --sans: "Lexend", Arial, Helvetica, sans-serif;
  --logo: "Bree Serif", Georgia, "Times New Roman", serif;
  --hand: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
}

/*
AKTUELL:
Für handschriftliche Mini-Akzente werden ausschließlich Schriften verwendet,
die bereits auf dem Gerät des Besuchers installiert sind. Es wird KEINE
fremde Fontdatei von einem externen Dienst geladen und keine Fontdatei mit
dieser Website ausgeliefert.

SPÄTER – eigene Mauzkauz-Schrift:
Sobald eine selbst erstellte Webfont-Datei vorliegt, z.B. mauzkauz-hand.woff2,
diesen Block aktivieren und --hand auf "Mauzkauz Hand" umstellen.

@font-face {
  font-family: "Mauzkauz Hand";
  src: url("../fonts/mauzkauz-hand.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
*/

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper-100);
  color: var(--ink-900);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--paper-50);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--forest-950);
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  transform: translateY(-180%);
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--paper-50);
  color: var(--ink-900);
  box-shadow: var(--shadow-soft);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--paper-50);
  background: rgba(23, 32, 25, .90);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nav-wrap {
  width: var(--content);
  min-height: 4.25rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: .01em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.desktop-nav a,
.mobile-nav a {
  padding: .55rem .8rem;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255, 255, 255, .86);
}

.desktop-nav a:hover,
.mobile-nav a:hover,
.desktop-nav a[aria-current="page"],
.mobile-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, .10);
}

.nav-current-edition {
  border: 1px solid rgba(255, 255, 255, .17);
}

.mobile-menu {
  display: none;
  position: relative;
}

.mobile-menu summary {
  list-style: none;
  cursor: pointer;
  padding: .5rem .75rem;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-nav {
  position: absolute;
  right: 0;
  top: calc(100% + .7rem);
  min-width: 15rem;
  display: grid;
  gap: .2rem;
  padding: .6rem;
  background: rgba(23, 32, 25, .98);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.hero {
  position: relative;
  min-height: min(78vh, 760px);
  display: grid;
  align-items: end;
  overflow: clip;
  background:
    linear-gradient(180deg, rgba(16, 24, 18, .06) 0%, rgba(16, 24, 18, .20) 56%, rgba(16, 24, 18, .60) 100%),
    url("../img/wistmans-wood-alan-hunt.jpg") 100% 44% / cover no-repeat;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: var(--content);
  margin: 0 auto;
  padding: clamp(5rem, 11vw, 8rem) 0 clamp(4rem, 8vw, 6rem);
}

.hero-card {
  max-width: 44rem;
  padding: clamp(1.3rem, 4vw, 2rem);
  color: var(--paper-50);
  background: rgba(23, 32, 25, .73);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.eyebrow,
.kicker {
  margin: 0 0 .45rem;
  font-size: .79rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--moss-600);
}

.hero .eyebrow,
.dark-section .eyebrow {
  color: #d6dec1;
}

.hand-note {
  margin: .1rem 0 .5rem;
  font-family: var(--hand);
  font-size: clamp(1rem, 2vw, 1.18rem);
  letter-spacing: .015em;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  max-width: 13ch;
  font-size: clamp(2.8rem, 7vw, 5rem);
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3.35rem);
}

h3 {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
}

.lead {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.3vw, 1.55rem);
  line-height: 1.45;
}

.hero-card p:last-of-type {
  max-width: 58ch;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.4rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: .7rem 1rem;
  border: 1px solid transparent;
  border-radius: .7rem;
  text-decoration: none;
  font-weight: 800;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: var(--forest-950);
  background: var(--paper-50);
}

.button-secondary {
  color: currentColor;
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
}

.button-dark {
  color: var(--paper-50);
  background: var(--forest-900);
}

.button-outline {
  color: var(--forest-900);
  background: transparent;
  border-color: rgba(29, 40, 31, .25);
}

.text-link {
  display: inline-block;
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
  font-weight: 750;
}

.section {
  padding: clamp(4.5rem, 9vw, 7rem) 0;
}

.section-compact {
  padding: clamp(3.4rem, 7vw, 5.2rem) 0;
}

.section-alt {
  background: var(--paper-200);
}

.dark-section {
  color: var(--paper-50);
  background: var(--forest-900);
}

.container {
  width: var(--content);
  margin: 0 auto;
}

.prose {
  max-width: 70ch;
}

.prose > * + * {
  margin-top: 1rem;
}

.section-heading {
  display: grid;
  gap: .75rem;
  margin-bottom: 2rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.genre-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
  margin-top: 2.2rem;
}

.genre-card {
  min-height: 10.5rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .42);
}

.genre-card strong {
  font-family: var(--serif);
  font-size: 1.18rem;
}

.genre-card span {
  color: var(--ink-700);
  font-size: .9rem;
}

.current-edition {
  display: grid;
  grid-template-columns: minmax(12rem, .72fr) 1.28fr;
  gap: clamp(1.5rem, 5vw, 3.6rem);
  align-items: center;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .50);
  box-shadow: var(--shadow-soft);
}

.product-placeholder,
.cat-placeholder,
.legal-placeholder {
  min-height: 22rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  color: var(--ink-700);
  border: 1px dashed rgba(29, 40, 31, .25);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 20% 20%, rgba(104, 117, 71, .16), transparent 38%),
    linear-gradient(135deg, #f5efdf, #ebe2d1);
}

.current-edition .product-placeholder {
  min-height: 18rem;
}

.page-intro {
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 7vw, 4.8rem);
  background: var(--paper-100);
  border-bottom: 1px solid var(--line);
}

.page-intro-forest {
  color: var(--paper-50);
  background:
    linear-gradient(rgba(23, 32, 25, .67), rgba(23, 32, 25, .77)),
    url("../img/wistmans-wood-alan-hunt.jpg") center 43% / cover no-repeat;
}

.page-intro .container {
  display: grid;
  gap: .8rem;
}

.page-intro h1 {
  max-width: 16ch;
}

.manufaktur-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.value {
  padding: 1.2rem;
  border-left: 3px solid var(--moss-600);
  background: rgba(255, 255, 255, .30);
}

.value strong {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--serif);
  font-size: 1.16rem;
}

.audio-card {
  display: grid;
  gap: 1rem;
  padding: clamp(1.3rem, 4vw, 2rem);
  color: var(--paper-50);
  background: var(--forest-900);
  border-radius: var(--radius-lg);
}

.audio-card audio {
  width: 100%;
}

.product-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin: 1.5rem 0 0;
}

.meta-box {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-50);
}

.meta-box strong {
  display: block;
  margin-bottom: .2rem;
}

.meta-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.meta-link:hover {
  border-color: rgba(52, 67, 51, .42);
  background: #fff;
  transform: translateY(-1px);
}

.mini-note {
  color: var(--ink-700);
  font-size: .93rem;
}

.site-footer {
  padding: 2.5rem 0 3rem;
  color: rgba(255, 255, 255, .78);
  background: var(--forest-950);
}

.footer-grid {
  width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: start;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.footer-links a {
  color: #fff;
}

.photo-credit {
  grid-column: 1 / -1;
  max-width: 82ch;
  font-size: .9rem;
  color: rgba(255, 255, 255, .74);
}

.legal {
  padding: 4rem 0 6rem;
}

.legal h2 {
  margin-top: 2rem;
  font-size: 1.65rem;
}

.legal p,
.legal li {
  max-width: 75ch;
}

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

  .manufaktur-values {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .desktop-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .hero {
    min-height: 72vh;
    background-position: 100% 42%;
  }

  .mobile-hero-second {
    white-space: nowrap;
  }

  .hero-card {
    background: rgba(23, 32, 25, .84);
  }

  .grid-2,
  .current-edition,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .product-meta {
    grid-template-columns: 1fr;
  }

  .photo-credit {
    grid-column: auto;
  }

  .product-placeholder,
  .cat-placeholder {
    min-height: 18rem;
  }
}

@media (max-width: 520px) {
  .genre-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Typografie v0.4: Bree Serif + Lexend */
body { letter-spacing: -0.005em; }
h1, h2, h3, .brand { letter-spacing: -0.015em; }
.lead { font-family: var(--sans); font-weight: 400; line-height: 1.55; }
.hero-card .lead { font-family: var(--serif); font-weight: 400; line-height: 1.38; }
.typography-sample { display:grid; gap:1.25rem; padding:1.5rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper-50); }
.typography-sample .alpha { font-size:1.12rem; word-break:break-word; }
.big-a { font-family:var(--sans); font-size:clamp(4rem,10vw,8rem); line-height:1; }
.big-a-serif { font-family:var(--serif); font-size:clamp(4rem,10vw,8rem); line-height:1; }


/* =========================================================
   Typografie v0.5 – bewusst ruhiger
   Zwei Hauptschriften:
   - Bree Serif: Überschriften
   - Lexend: Fließtext, Navigation, Buttons, kleine Labels
   Handschrift nur für echte Notizen/Randbemerkungen.
   ========================================================= */

body {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: -0.008em;
}

p,
li { font-weight: 300; }

.brand {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0.01em;
  font-size: clamp(1.03rem, 1.8vw, 1.24rem);
}

.desktop-nav a,
.mobile-nav a { font-weight: 400; }
.button { font-weight: 500; }

.eyebrow,
.kicker {
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .025em;
  text-transform: none;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 3.85rem); line-height: 1.06; }
h2 { font-size: clamp(1.72rem, 3.7vw, 2.65rem); line-height: 1.12; }
h3 { font-size: clamp(1.28rem, 2.5vw, 1.62rem); line-height: 1.18; }

.lead {
  font-family: var(--sans);
  font-size: clamp(1.08rem, 2vw, 1.30rem);
  font-weight: 300;
  line-height: 1.58;
}

.hero { min-height: min(80vh, 760px); }
.hero-card {
  max-width: 35rem;
  padding: clamp(1rem, 2.7vw, 1.45rem);
  background: rgba(23, 32, 25, .67);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.hero-card .lead,
.hero-card .hero-tagline {
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.5;
}
.hero-card p { margin-top: .72rem; margin-bottom: 0; }
.hero-card .button-row { margin-top: 1.1rem; }
.hero-tagline {
  font-size: clamp(1.06rem, 2vw, 1.24rem);
  color: rgba(255,255,255,.93);
}

.hand-note {
  font-family: var(--hand);
  font-size: 1rem;
  line-height: 1.45;
  letter-spacing: .01em;
}
.margin-note {
  display: inline-block;
  margin-top: .6rem;
  padding-left: .75rem;
  border-left: 2px solid var(--moss-600);
  font-family: var(--hand);
  font-size: 1rem;
  color: var(--ink-700);
}

.eyebrow,
.kicker { color: var(--bark-600); }
.hero .eyebrow,
.dark-section .eyebrow { color: #d6dec1; }

@media (min-width: 781px) {
  .hero-inner { padding-bottom: clamp(3rem, 6vw, 4.6rem); }
}
@media (max-width: 780px) {
  .hero-card { max-width: 31rem; background: rgba(23, 32, 25, .78); }
}


/* =========================================================
   v0.7 – buchartig, leise, mit kleinerer Typografie
   ========================================================= */

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.72;
  letter-spacing: -0.006em;
}

p,
li {
  font-weight: 300;
}

/* Markenname im Header = eigenes Stilelement, kein Content-Font */
.brand {
  font-family: var(--logo);
  font-weight: 300;
  font-size: clamp(1.08rem, 1.6vw, 1.24rem);
  line-height: 1;
  letter-spacing: 0.012em;
}

.desktop-nav a,
.mobile-nav a {
  font-family: var(--sans);
  font-weight: 350;
}

/* Inhalt wie im Buch: Bree Serif für Kapitelüberschriften */
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.008em;
  line-height: 1.18;
}

h1 {
  font-size: clamp(1.82rem, 3vw, 2.35rem);
  max-width: 18ch;
}

h2 {
  font-size: clamp(1.34rem, 2.1vw, 1.72rem);
}

h3 {
  font-size: clamp(1.16rem, 1.65vw, 1.38rem);
}

.lead {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.2vw, 1.10rem);
  font-weight: 300;
  line-height: 1.72;
}

/* Keine Über-Unterschriften: nur Überschrift + Text */
.eyebrow,
.kicker {
  display: none !important;
}

/* Hero: kleiner Textkasten, mehr Alan Hunt */
.hero {
  min-height: min(84vh, 790px);
}

.hero-inner {
  padding-bottom: clamp(2.2rem, 4.5vw, 3.5rem);
}

.hero-card {
  max-width: 26.5rem;
  padding: 0.9rem 1rem 1rem;
  background: rgba(23, 32, 25, 0.59);
  border-radius: 0.85rem;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.hero-card h1 {
  font-size: clamp(1.55rem, 2.25vw, 1.92rem);
  max-width: none;
}

.hero-card p {
  margin-top: 0.55rem;
  margin-bottom: 0;
  font-size: 0.96rem;
  line-height: 1.58;
}

.hero-card .button-row {
  margin-top: 0.8rem;
}

.button {
  font-weight: 450;
}

.prose {
  max-width: 64ch;
}

.section {
  padding: clamp(3.5rem, 6vw, 5rem) 0;
}

.section-heading {
  margin-bottom: 1.15rem;
}

/* Handschrift ausschließlich als tatsächliche Randnotiz */
.hand-note {
  display: none;
}

.margin-note {
  display: inline-block;
  margin-top: 0.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--moss-600);
  font-family: var(--hand);
  font-size: 0.98rem;
  color: var(--ink-700);
}

/* Unterseiten ebenfalls eher Kapitelanfang als Werbebanner */
.page-intro {
  padding: clamp(3.4rem, 6vw, 4.7rem) 0 clamp(2.2rem, 4vw, 3rem);
}

.page-intro h1 {
  font-size: clamp(1.82rem, 3vw, 2.35rem);
}

.page-intro .lead {
  margin-top: 0.7rem;
}

@media (max-width: 780px) {
  .hero-card {
    max-width: min(25rem, 92vw);
    background: rgba(23, 32, 25, 0.70);
  }

  .hero-card h1 {
    font-size: 1.55rem;
  }
}

/* v0.8 – Logo: Cormorant Infant Light
   Einstöckiges rundes a, feiner als Bree Serif. */
.brand {
  font-family: var(--logo);
  font-weight: 300;
  font-size: clamp(1.18rem, 1.75vw, 1.34rem);
  letter-spacing: 0.018em;
  line-height: 1;
}

/* v0.8-b – Vergleichsversion:
   Logo-Schriftzug "Mauzkauz-Produktion" mit Bree Serif. */
.brand {
  font-family: var(--logo);
  font-weight: 400;
  font-size: clamp(1.12rem, 1.68vw, 1.30rem);
  letter-spacing: 0.008em;
  line-height: 1;
}


/* v11 – Überschriften wie Fließtext umbrechen lassen.
   Keine festen <br>-Umbrüche; Hero-Titel nicht künstlich auf 15ch begrenzen. */
.hero-card h1,
.section h2,
.section h3 {
  max-width: none;
}


/* v12 – echtes Wintermärchen-Cover auf Zuhause */
.edition-cover {
  display: block;
  width: min(100%, 394px);
  height: auto;
  justify-self: center;
  border-radius: .25rem;
  box-shadow: 0 14px 34px rgba(23, 32, 25, .16);
}


/* Die Manufaktur: erster Textblock flüssig und gleich breit wie die folgenden Abschnitte */
.manufaktur-intro .prose,
.manufaktur-intro.prose {
  max-width: 64ch;
}

.manufaktur-intro .prose p,
.manufaktur-intro.prose p {
  margin-top: 0;
  margin-bottom: 0.9rem;
}

.manufaktur-intro .prose p + p,
.manufaktur-intro.prose p + p {
  margin-top: 0;
}


/* v16 – Wintermärchen */
.winter-cover {
  width: min(100%, 394px);
  height: auto;
  justify-self: center;
}

.audio-stack {
  display: grid;
  gap: 1.25rem;
}

.audio-card h3 {
  color: var(--paper-50);
}

.audio-card p {
  margin-bottom: 0;
}


/* v17 – rechtliche Seiten */
.legal-todo {
  margin: 1.25rem 0 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(138, 98, 71, .34);
  border-radius: var(--radius-sm);
  background: rgba(241, 235, 221, .72);
}

.legal-note {
  color: var(--ink-700);
  font-size: .94rem;
}

.legal-status {
  color: var(--ink-700);
  font-size: .9rem;
}


/* v18 – Zuhause: Überschrift im Manufaktur-Teaser oben statt vertikal mittig */
.home-manufaktur .grid-2 {
  align-items: start;
}

/* v18 – Kontaktformular */
.contact-form {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  margin-top: 1.5rem;
}

.form-field {
  display: grid;
  gap: .4rem;
}

.form-field label {
  font-weight: 500;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: .78rem .85rem;
  border: 1px solid #687068;
  border-radius: var(--radius-sm);
  background: var(--paper-50);
  color: var(--ink-900);
}

.form-field textarea {
  min-height: 11rem;
  resize: vertical;
}

.form-hint {
  color: var(--ink-700);
  font-size: .92rem;
}

.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form-status {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-200);
}


/* v21 – „Wer hier arbeitet“: Name und Beschreibung enger zusammen,
   zwischen den drei Beteiligten deutlich mehr Luft */
.people-section .prose h3 {
  margin-top: 2.25rem;
  margin-bottom: .45rem;
}

.people-section .prose h3:first-child {
  margin-top: 0;
}

.people-section .prose h3 + p {
  margin-top: 0;
}

.people-section .prose p + p {
  margin-top: .45rem;
}




@media (max-width: 430px) and (orientation: portrait) {
  .mobile-hero-break {
    display: inline;
  }

  .hero-copy {
    width: min(72vw, 18.5rem);
    max-width: 72vw;
    padding: 1rem 1.05rem 1.05rem;
  }

  .hero-copy h1 {
    max-width: none;
    font-size: clamp(2rem, 9.2vw, 2.45rem);
    line-height: 1.02;
  }

  .hero-copy p {
    font-size: .96rem;
    line-height: 1.5;
  }
}


/* v23 – Korrektur für schmale Hochformat-Displays:
   tatsächliche Hero-Klasse ist .hero-card */
.mobile-hero-break {
  display: none;
}

@media (max-width: 430px) and (orientation: portrait) {
  .mobile-hero-break {
    display: inline;
  }

  .hero-card {
    width: 72vw;
    max-width: 72vw;
    padding: 0.9rem 0.95rem 1rem;
  }

  .hero-card h1 {
    max-width: none;
    font-size: clamp(1.55rem, 7.4vw, 1.75rem);
    line-height: 1.04;
  }

  .hero-card p {
    font-size: 0.93rem;
    line-height: 1.48;
  }
}


/* v27 – Bezugswege Wintermärchen */
.availability-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 780px) {
  .availability-meta {
    grid-template-columns: 1fr;
  }
}


/* v28 – Post von Mauzkauz */
.newsletter-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .48);
}

.newsletter-form {
  position: relative;
  display: grid;
  gap: .9rem;
}

.newsletter-form .button {
  justify-self: start;
  cursor: pointer;
}

.newsletter-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.newsletter-form .form-hint {
  margin: 0;
}

.newsletter-form .form-hint a {
  text-underline-offset: .18em;
}

@media (max-width: 780px) {
  .newsletter-panel {
    grid-template-columns: 1fr;
  }

  .newsletter-form .button {
    width: 100%;
  }
}


/* v29 – Hörproben Wintermärchen */
.audio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 1.5rem);
  margin-top: 1.4rem;
}

.audio-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid rgba(32, 35, 31, .22);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .56);
}

.audio-card__text > :first-child {
  margin-top: 0;
}

.audio-card__text > :last-child {
  margin-bottom: 0;
}

.audio-kicker {
  margin: 0 0 .35rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--moss-dark, #344333);
}

.audio-card h3 {
  margin: 0 0 .65rem;
}

.audio-card audio {
  width: 100%;
  min-height: 3.25rem;
}

.audio-note {
  margin: -.35rem 0 0;
  font-size: .9rem;
  color: var(--text-muted, #565b53);
}

.audio-accessibility-note {
  margin-top: 1.2rem;
}

@media (max-width: 780px) {
  .audio-grid {
    grid-template-columns: 1fr;
  }
}


/* Produktfotos Wintermärchen – bewusst einfache Thumbnails ohne Galerie-Skript */
.product-photos .prose {
  margin-bottom: 1.35rem;
}

.product-gallery {
  display: grid;
  grid-template-columns: 240px 240px;
  gap: 22px;
  justify-content: center;
  align-items: start;
}

.product-photo {
  margin: 0;
  width: 240px;
}

.product-thumb-link {
  display: flex;
  width: 240px;
  height: 180px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(32, 35, 31, .28);
  border-radius: 10px;
  background: rgba(255, 255, 255, .62);
  text-decoration: none;
}

.product-thumb-link img {
  display: block;
  width: auto;
  height: auto;
  max-width: 238px;
  max-height: 178px;
}

.product-photo figcaption {
  padding: 8px 4px 0;
  color: var(--ink-700);
  font-size: .92rem;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .product-gallery {
    grid-template-columns: 240px;
  }
}