/* ==========================================================================
   Raumakzente Anja Hoffmann – zentrales Stylesheet

   Aufbau:
     1. Grundlagen und Design-Werte
     2. Kopfbereich und Navigation
     3. Abschnitte (Raster)
     4. Bausteine: Text, Bild, Schaltflaeche
     5. Formular
     6. Sonderseiten: Produkt, Blog, Fehlerseite
     7. Einblend-Effekt

   Das Raster arbeitet mit vier Bereichen:
     ab 1224px       festes 1224px-Raster, Werte in px
     920px – 1224px  gleiches Raster, Zeilenhoehen in vw (waechst mit)
     361px – 920px   Mobil-Raster, 360px breit, Werte in px
     bis 360px       Mobil-Raster, Werte in vw
   Die Positionswerte stehen als CSS-Variablen direkt am jeweiligen Element
   im HTML (--gr = Rasterzeile, --gc = Rasterspalte, --m-* fuer mobil).
   ========================================================================== */

/* ------------------------------------------------ 1. Grundlagen und Werte */

:root {
  /* Schriften */
  --font-primary: 'Libre Caslon Display', Georgia, serif;
  --font-secondary: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Ueberschriften: Desktop / Mobil */
  --h1-fs: 120px;  --h1-m-fs: 64px;  --h1-lh: 1.2;
  --h2-fs: 64px;   --h2-m-fs: 40px;  --h2-lh: 1.2;
  --h3-fs: 40px;   --h3-m-fs: 32px;  --h3-lh: 1.2;
  --h4-fs: 32px;   --h4-m-fs: 28px;  --h4-lh: 1.2;
  --h5-fs: 24px;   --h5-m-fs: 24px;  --h5-lh: 1.2;
  --h6-fs: 20px;   --h6-m-fs: 20px;  --h6-lh: 1.2;

  /* Fliesstext */
  --body-fs: 16px;  --body-lh: 1.5;
  --body-lg-fs: 18px;
  --body-sm-fs: 14px;

  /* Farben */
  --farbe-text: rgb(29, 30, 32);
  --farbe-kopf: rgb(189, 164, 142);
  --farbe-nav: rgb(0, 0, 0);
  --farbe-nav-aktiv: rgb(255, 255, 255);
  --farbe-akzent: rgb(74, 74, 67);

  /* Raster */
  --raster-breite: 1224px;
  --mobil-breite: 360px;

  /* Kopfbereich */
  --kopf-hoehe: 234px;
  --kopf-hoehe-mobil: 171px;
  --logo-breite: 350px;
  --logo-breite-mobil: 184px;
  --nav-abstand: 23px;
}

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

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

body {
  margin: 0;
  padding-top: var(--kopf-hoehe);
  font-family: var(--font-secondary);
  font-size: var(--body-fs);
  line-height: var(--body-lh);
  color: var(--farbe-text);
  background: #fff;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: #fff;
  color: #000;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }

/* ------------------------------------------ 2. Kopfbereich und Navigation */

.site-header {
  --kopf-scroll-hoehe: var(--kopf-hoehe);
  --logo-scroll-breite: var(--logo-breite);
  --logo-scroll-hoehe: var(--kopf-hoehe);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  background: var(--farbe-kopf);
  font-family: 'Oswald', var(--font-secondary);
  font-weight: 400;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow .35s ease;
}

.site-header__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--raster-breite);
  min-height: var(--kopf-scroll-hoehe);
  margin: 0 auto;
  padding: 0 16px;
}

.site-header__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  width: var(--logo-scroll-breite);
  height: var(--logo-scroll-hoehe);
}
.site-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-header.is-compact {
  box-shadow: 0 8px 24px rgba(66, 49, 38, .12);
}
.site-header__nav { margin-left: 16px; }

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px var(--nav-abstand);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  text-align: left;
}

.nav__link {
  display: inline-block;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--farbe-nav);
  text-decoration: none;
  text-underline-offset: 7px;
  cursor: pointer;
  transition: color .2s ease;
}
/* Untermenue-Schalter sieht aus wie ein Link, ist aber ein Knopf */
.nav__link--toggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.nav__link.is-active,
.nav__item:hover > .nav__link,
.nav__link:focus-visible {
  color: var(--farbe-nav-aktiv);
  text-decoration: underline;
}

.nav__caret {
  display: flex;
  align-items: center;
  margin-left: 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--farbe-nav);
  transition: color .2s ease;
}
.nav__caret svg { margin: 2px 6.5px; transition: transform .3s ease; }
.nav__item:hover > .nav__caret,
.nav__item.ist-offen > .nav__caret { color: var(--farbe-nav-aktiv); }
.nav__item:hover > .nav__caret svg,
.nav__item.ist-offen > .nav__caret svg { transform: rotate(180deg); }

.nav__dropdown-area {
  position: absolute;
  top: 100%;
  left: -24px;
  z-index: 5;
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav__item:hover > .nav__dropdown-area,
.nav__item:focus-within > .nav__dropdown-area,
.nav__item.ist-offen > .nav__dropdown-area {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: max-content;
  margin: 0;
  padding: 16px 24px;
  list-style: none;
  background: var(--farbe-kopf);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .1);
}
.nav__dropdown .nav__item { display: block; }

.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
}
.site-header__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--farbe-nav);
  transition: transform .25s ease, opacity .2s ease;
}
.site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

.mobile-nav {
  display: none;
  padding: 8px 16px 24px;
  background: var(--farbe-kopf);
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.nav--mobile { flex-direction: column; align-items: flex-end; gap: 4px; }
.nav--mobile .nav__item { flex-wrap: wrap; justify-content: flex-end; width: 100%; }
.nav--mobile .nav__link { padding: 10px 0; font-size: 18px; }
.nav--mobile .nav__dropdown-area {
  position: static;
  display: none;
  width: 100%;
  padding-top: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav--mobile .nav__item.ist-offen > .nav__dropdown-area { display: block; }
.nav--mobile .nav__dropdown {
  align-items: flex-end;
  padding: 4px 0 8px 16px;
  background: none;
  box-shadow: none;
}

@media screen and (max-width: 920px) {
  body { padding-top: var(--kopf-hoehe-mobil); }
  .site-header__inner {
    min-height: var(--kopf-scroll-hoehe);
    padding: var(--kopf-scroll-polster, 24px) 16px;
  }
  .site-header__logo {
    width: var(--logo-scroll-breite);
    height: auto;
  }
  .site-header__nav { display: none; }
  .site-header__burger { display: flex; }
  .mobile-nav { display: block; }
  .mobile-nav[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* ------------------------------------------------- 3. Abschnitte (Raster) */

.block {
  position: relative;
  display: grid;
  isolation: isolate;
}

.block__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg-color, transparent);
  backface-visibility: hidden;
}
.block__bg-img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 101%;
  object-fit: cover;
  object-position: var(--bg-pos, center);
}
.block__overlay {
  position: absolute;
  inset: 0;
  background: #1d1e20;
  opacity: var(--overlay, 0);
}

.block__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: var(--rows);
  grid-template-columns: var(--cols);
  width: 100%;
  max-width: var(--block-w, var(--raster-breite));
  min-height: var(--min-h);
  margin: 0 auto;
}

/* 920px – 1224px: Zeilenhoehen wachsen mit der Fensterbreite */
@media screen and (min-width: 920px) and (max-width: 1224px) {
  .block__layout {
    grid-template-rows: var(--sd-rows, var(--rows));
    min-height: var(--sd-min-h, var(--min-h));
  }
}

/* bis 920px: mobiles Raster */
@media screen and (max-width: 920px) {
  .block__layout {
    grid-template-rows: var(--m-rows);
    grid-template-columns: var(--m-cols);
    max-width: var(--mobil-breite);
    min-height: var(--m-min-h);
    padding: 0 4.4444vw;
  }
}
@media screen and (min-width: 361px) and (max-width: 920px) {
  .block__layout {
    grid-template-rows: var(--t-rows, var(--m-rows));
    min-height: var(--t-min-h, var(--m-min-h));
    padding: 0 16px;
  }
}

/* Einzelnes Element im Raster */
.el {
  position: relative;
  display: grid;
  grid-row: var(--gr);
  grid-column: var(--gc);
  z-index: var(--z, 1);
  width: 100%;
  height: 100%;
  text-align: var(--text, start);
}
@media screen and (max-width: 920px) {
  .el {
    grid-row: var(--m-gr, var(--gr));
    grid-column: var(--m-gc, var(--gc));
  }
}
.el > * { grid-area: 1 / 1 / -1 / -1; align-self: start; }

/* --------------------------------- 4. Bausteine: Text, Bild, Schaltflaeche */

/* --- Textblock ---------------------------------------------------------- */
.tb {
  width: 100%;
  overflow-wrap: break-word;
  white-space: break-spaces;   /* mehrfache Leerzeichen bleiben erhalten */
}

.tb h1 { margin: 0 0 48px; }
.tb h2, .tb h3, .tb h4, .tb .body-large, .tb .body, .tb p, .tb ul, .tb ol { margin: 0 0 32px; }
.tb h5 { margin: 0 0 16px; }
.tb h6 { margin: 0 0 8px; }
.tb .body-small { margin: 0 0 24px; }

.tb h1, .tb h2, .tb h3, .tb h4, .tb h5, .tb h6 {
  font-family: var(--font-primary);
  font-weight: 400;
}
.tb h1 { font-size: var(--fontSizeDesktop, var(--h1-fs)); line-height: var(--lineHeightDesktop, var(--h1-lh)); }
.tb h2 { font-size: var(--fontSizeDesktop, var(--h2-fs)); line-height: var(--lineHeightDesktop, var(--h2-lh)); }
.tb h3 { font-size: var(--fontSizeDesktop, var(--h3-fs)); line-height: var(--lineHeightDesktop, var(--h3-lh)); }
.tb h4 { font-size: var(--fontSizeDesktop, var(--h4-fs)); line-height: var(--lineHeightDesktop, var(--h4-lh)); }
.tb h5 { font-size: var(--fontSizeDesktop, var(--h5-fs)); line-height: var(--lineHeightDesktop, var(--h5-lh)); }
.tb h6 { font-size: var(--fontSizeDesktop, var(--h6-fs)); line-height: var(--lineHeightDesktop, var(--h6-lh)); }

.tb .body, .tb p {
  font-family: var(--font-secondary);
  font-size: var(--fontSizeDesktop, var(--body-fs));
  line-height: var(--lineHeightDesktop, var(--body-lh));
  font-weight: 400;
}
.tb .body-large { font-size: var(--fontSizeDesktop, var(--body-lg-fs)); line-height: var(--lineHeightDesktop, var(--body-lh)); }
.tb .body-small { font-size: var(--fontSizeDesktop, var(--body-sm-fs)); line-height: var(--lineHeightDesktop, var(--body-lh)); }

.tb ul, .tb ol { padding-left: 1.4em; }
.tb li > p { margin: 0; }
.tb a { text-decoration: underline; }
.tb a:hover { opacity: .75; }

/* leere Absaetze bleiben als Leerzeile stehen */
.tb p:empty::after,
.produkt__beschreibung p:empty::after { content: "\00a0"; }

/* muss nach den Abstandsregeln stehen: letzter Absatz schliesst buendig ab */
.tb > *:last-child,
.tb > *:last-child > *:last-child { margin-bottom: 0; }

@media screen and (max-width: 920px) {
  .tb h1 { font-size: var(--fontSizeMobile, var(--h1-m-fs)); line-height: var(--lineHeightMobile, var(--h1-lh)); }
  .tb h2 { font-size: var(--fontSizeMobile, var(--h2-m-fs)); line-height: var(--lineHeightMobile, var(--h2-lh)); }
  .tb h3 { font-size: var(--fontSizeMobile, var(--h3-m-fs)); line-height: var(--lineHeightMobile, var(--h3-lh)); }
  .tb h4 { font-size: var(--fontSizeMobile, var(--h4-m-fs)); line-height: var(--lineHeightMobile, var(--h4-lh)); }
  .tb h5 { font-size: var(--fontSizeMobile, var(--h5-m-fs)); line-height: var(--lineHeightMobile, var(--h5-lh)); }
  .tb h6 { font-size: var(--fontSizeMobile, var(--h6-m-fs)); line-height: var(--lineHeightMobile, var(--h6-lh)); }
  .tb .body, .tb p { font-size: var(--fontSizeMobile, var(--body-fs)); line-height: var(--lineHeightMobile, var(--body-lh)); }
  .tb .body-large { font-size: var(--fontSizeMobile, var(--body-lg-fs)); }
  .tb .body-small { font-size: var(--fontSizeMobile, var(--body-sm-fs)); }
}

/* --- Bild ---------------------------------------------------------------
   Das <img> liegt absolut im Rahmen. So bestimmt seine Eigengroesse nicht
   die Hoehe der Rasterzeile – genau wie auf der Vorlage. */
.im {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: var(--d-h);
  overflow: hidden;
}
.im img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bilder mit gestalteter Kontur (SVG-Maske) */
.im--masked {
  -webkit-mask-image: var(--mask);
          mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

@media screen and (max-width: 920px) { .im { max-height: var(--m-h); } }
@media screen and (max-width: 360px)  { .im { max-height: var(--m-h-vw); } }

/* --- Schaltflaeche ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 12px 40px;
  font-family: var(--font-secondary);
  font-size: var(--btn-fs, 14px);
  font-weight: 400;
  line-height: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-radius: var(--btn-radius, 0);
  border: var(--btn-bw, 1px) solid var(--btn-bd, transparent);
  color: var(--btn-fg, #fff);
  background-color: var(--btn-bg, transparent);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover, .btn:focus-visible {
  color: var(--btn-fg-h, var(--btn-fg));
  background-color: var(--btn-bg-h, var(--btn-bg));
  border-color: var(--btn-bd-h, var(--btn-bd));
}

/* Eine Schaltflaeche, die als eigenes Rasterelement steht, fuellt ihre Zelle
   und braucht keinen Innenabstand – sonst bricht die Beschriftung um.
   Gilt bewusst nur fuer .el--button, nicht fuer Knoepfe im Formular. */
.el--button > .btn {
  min-width: 100%;
  min-height: var(--d-h, auto);
  padding: 0;
}

@media screen and (max-width: 920px) {
  .btn { font-size: 12px; }
  .el--button > .btn { min-width: var(--m-w, 100%); min-height: var(--m-h, auto); }
}
@media screen and (max-width: 360px) {
  .el--button > .btn {
    min-width: var(--m-w-vw, 100%);
    min-height: var(--m-h-vw, auto);
    padding: 0 14px;
  }
}

/* ----------------------------------------------------------- 5. Formular */

.form { width: 100%; }

.form__success {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: rgba(74, 74, 67, .08);
  border-left: 3px solid var(--farbe-akzent);
  font-size: 15px;
}

.form form {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap, 22px);
}

/* Honigtopf gegen Spam – fuer Menschen unsichtbar */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.form__label {
  font-family: var(--font-secondary);
  font-size: 14px;
  color: var(--label-fg, #1a1a1a);
}
.form__label span { margin-left: 1px; }

.form__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font-secondary);
  font-size: 15px;
  color: #1d1e20;
  background: var(--inp-bg, #f1f1f1);
  border: 0;
  border-radius: 0;
}
.form__input::placeholder { color: var(--inp-fg, #888); }
.form__input--area { min-height: 120px; resize: vertical; }

.form__field--error .form__input { box-shadow: inset 0 0 0 1px #c0392b; }
.form__error { font-size: 13px; color: #c0392b; }

.form__actions { display: flex; justify-content: center; margin: 0; }
.form__submit { min-width: auto; }

/* --------------------------- 6. Produkt-, Blog- und Fehlerseite */

.block--produkt, .block--blogkopf, .block--fehler { display: block; }

/* --- Produkt / Angebot -------------------------------------------------- */
.produkt {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 600px minmax(0, 1fr);
  column-gap: 80px;
  width: 100%;
  max-width: 1256px;          /* 1224 Inhalt + 2 x 16 Innenabstand */
  margin: 0 auto;
  padding: 100px 16px;
  color: rgb(26, 26, 26);
}

.produkt__medien {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.produkt__medien img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.produkt__titel {
  margin: 0 0 8px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
}
.produkt__untertitel {
  margin: 0 0 16px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}

.produkt__preis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 27px;
}
.produkt__preis-alt { color: rgba(26, 26, 26, .45); text-decoration: line-through; }
.produkt__trenner { color: rgba(26, 26, 26, .45); }
.produkt__hinweis { margin: 0 0 24px; font-size: 16px; line-height: 24px; }

.produkt__cta {
  min-width: auto;
  padding: 12px 40px;
  letter-spacing: 1.4px;
  color: #fff;
  background: #000;
  border-color: #000;
}
.produkt__cta:hover, .produkt__cta:focus-visible {
  color: #fff;
  background: rgb(29, 30, 32);
  border-color: rgb(29, 30, 32);
}

.produkt__infos {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #dadce0;
}
.produkt__infos-titel {
  margin: 0 0 16px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
}

.produkt__beschreibung h3 {
  margin: 0 0 8px;
  font-family: var(--font-secondary);
  font-size: 18.72px;
  line-height: 1.5;
  font-weight: 700;
}
.produkt__beschreibung p { margin: 0 0 8px; }
.produkt__beschreibung ul { margin: 0 0 8px; padding-left: 38px; }
.produkt__beschreibung li { margin-bottom: 8px; }

@media screen and (max-width: 920px) {
  .produkt {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    padding: 56px 16px;
  }
  .produkt__titel { font-size: 32px; }
  .produkt__untertitel { font-size: 20px; }
}

/* --- Blogkopf ----------------------------------------------------------- */
.blogkopf {
  width: 100%;
  max-width: 954px;
  margin: 0 auto;
  padding: 45px 30px;
}
.blogkopf__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 12px;
  font-size: 14px;
  opacity: .8;
}
.blogkopf__titel {
  margin: 0 0 12px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--h1-fs);
  line-height: var(--h1-lh);
}
.blogkopf__beschreibung { margin: 0; opacity: .8; }

@media screen and (max-width: 920px) {
  .blogkopf { padding: 16px; }
  .blogkopf__titel { font-size: var(--h1-m-fs); }
}

/* --- Fehlerseite -------------------------------------------------------- */
.fehler {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 16px;
  text-align: center;
}
.fehler__titel {
  margin: 0 0 16px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--h2-fs);
  line-height: var(--h2-lh);
}
.fehler__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.fehler .btn {
  min-width: auto;
  color: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
}
.fehler .btn:hover { color: #fff; background: var(--farbe-akzent); }

@media screen and (max-width: 920px) {
  .fehler { padding: 64px 16px; }
  .fehler__titel { font-size: var(--h2-m-fs); }
}

/* ------------------------------------------------------ 7. Einblend-Effekt
   Nur aktiv, wenn JavaScript laeuft (Klasse .js am <html>). Ohne JavaScript
   ist alles sofort sichtbar. */

.js .anim {
  opacity: 0;
  transform: translateY(20%);
  transition: transform .65s ease .1s, opacity .65s ease .1s;
}
.js .anim.sichtbar {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .anim { opacity: 1; transform: none; transition: none; }
}
/* ===============================================================
   Integrierte Galerie
   =============================================================== */
.gallery-intro{max-width:1224px;margin:0 auto;padding:100px 40px 70px;text-align:center;background:#fff}
.gallery-kicker,.offer-kicker{margin:0 0 15px;font:700 12px/1.4 Nunito,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#73685f}
.gallery-intro h1{margin:0 auto 28px;max-width:900px;font:400 clamp(52px,7vw,92px)/1.02 "Libre Caslon Display",serif;color:#38312e}
.gallery-intro>p:last-child{max-width:700px;margin:auto;font:400 18px/1.75 Nunito,sans-serif;color:#665d57}
.gallery-shell{padding:40px max(30px,calc((100% - 1224px)/2)) 120px;background:#f4ede3}
.gallery-filters{display:flex;flex-wrap:wrap;gap:18px 32px;padding:24px 0 35px;border-bottom:1px solid rgba(56,49,46,.18)}
.gallery-filters label{min-width:190px;font:700 12px/1.4 Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#554b45}
.gallery-filters select{display:block;width:100%;margin-top:9px;padding:12px 36px 12px 12px;border:1px solid rgba(56,49,46,.2);background:#fff;color:#38312e;font:400 15px Nunito,sans-serif}
.artwork-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px;padding-top:38px}
.artwork-card[hidden]{display:none}.artwork-card a{display:block;color:inherit;text-decoration:none}.artwork-card__image{position:relative;overflow:hidden;background:#e6ddd1;aspect-ratio:1/1}.artwork-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,1,.36,1)}.artwork-card:hover img{transform:scale(1.035)}
.artwork-badge{display:inline-block;padding:7px 11px;background:#435e50;color:#fff;font:700 11px/1 Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase}.artwork-card .artwork-badge{position:absolute;top:14px;left:14px}.artwork-badge.is-sold{background:#7b6765}
.artwork-new{position:absolute;top:14px;right:14px;padding:7px 11px;background:#c7ad98;color:#322a25;font:700 11px/1 Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase}.artwork-card__body{display:flex;justify-content:space-between;gap:20px;padding:18px 4px}.artwork-card__body h2{margin:0;font:400 27px/1.1 "Libre Caslon Display",serif}.artwork-card__body small{font:400 12px Nunito,sans-serif;color:#746a63}.artwork-card__body p{margin:3px 0 0;font:700 14px Nunito,sans-serif;color:#665d57}.artwork-card__meta{text-align:right}.artwork-card__meta span{font:400 12px Nunito,sans-serif;color:#786d66}.gallery-empty{text-align:center;padding:60px;font:400 18px Nunito,sans-serif}.gallery-admin-link{display:block;width:max-content;margin:-85px auto 55px;color:#80756e;font:400 11px Nunito,sans-serif;text-decoration:none}
.artwork-detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:70px;max-width:1224px;margin:auto;padding:90px 40px 120px;background:#fff}.artwork-detail__main{display:block;width:100%;max-height:780px;object-fit:contain;background:#eee8df}.artwork-thumbs{display:flex;gap:10px;margin-top:12px}.artwork-thumbs button{width:110px;height:85px;padding:0;border:1px solid #d5c9bd;background:#fff;cursor:pointer}.artwork-thumbs img{width:100%;height:100%;object-fit:cover}.artwork-detail__info{padding-top:12px}.artwork-back{display:block;margin-bottom:35px;color:#5b5049;font:700 13px Nunito,sans-serif;text-decoration:none}.artwork-detail__info h1{margin:24px 0 14px;font:400 clamp(52px,6vw,78px)/1 "Libre Caslon Display",serif}.artwork-detail__price{margin:0 0 34px;font:700 25px Nunito,sans-serif}.artwork-detail__info>p{font:400 16px/1.65 Nunito,sans-serif}.artwork-detail__description{margin:30px 0}.artwork-detail__cta{margin-top:30px}.artwork-sold-note{margin-top:30px;padding:20px;background:#f1e8e4}.artwork-like{display:flex;align-items:center;gap:12px;margin:28px 0}.artwork-like button{padding:10px 15px;border:1px solid #435e50;background:#fff;color:#435e50;font:700 14px Nunito,sans-serif;cursor:pointer}.artwork-like button:disabled{background:#e1e9df;cursor:default}.artwork-like span{font:700 14px Nunito,sans-serif}.artwork-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px}.artwork-actions>a:last-child{margin-top:30px;color:#435e50;font:700 14px Nunito,sans-serif}.artwork-share{display:flex;gap:14px;margin-top:35px;padding-top:20px;border-top:1px solid #ded4ca;font:400 13px Nunito,sans-serif}.artwork-share a{color:#435e50;font-weight:700}

/* ===============================================================
   Praxis-Starter-Angebot
   =============================================================== */
.offer-hero{position:relative;min-height:910px;overflow:hidden;background:#e9dfd1}.offer-hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% center}.offer-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(241,231,216,.99) 0%,rgba(241,231,216,.95) 42%,rgba(241,231,216,.65) 62%,transparent 84%)}.offer-hero__content{position:relative;z-index:1;width:min(720px,58%);padding:105px 0 90px max(45px,calc((100% - 1224px)/2));}.offer-hero h1{margin:0 0 28px;font:400 clamp(60px,6vw,88px)/1.03 "Libre Caslon Display",serif;color:#31463b}.offer-lead{max-width:620px;font:400 18px/1.75 Nunito,sans-serif;color:#5f5954}.offer-price{display:flex;flex-direction:column;align-items:flex-start;margin:25px 0 10px}.offer-price span{font:700 11px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase}.offer-price strong{font:400 78px/1 "Libre Caslon Display",serif;color:#314b3d}.offer-price small{font:400 12px Nunito,sans-serif}.offer-button{display:inline-block;margin-top:25px}
.offer-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;max-width:1224px;margin:auto;padding:115px 40px}.offer-section h2,.offer-process h2,.offer-showcase h2,.offer-types h2,.offer-trust h2,.offer-legal h2,.offer-final h2{margin:0 0 25px;font:400 clamp(44px,5vw,68px)/1.08 "Libre Caslon Display",serif;color:#38312e}.offer-section>div>p:not(.offer-kicker){font:400 17px/1.75 Nunito,sans-serif;color:#665e58}.offer-facts{display:grid;gap:1px;background:#d9cdc0}.offer-facts article{padding:30px;background:#fbf8f3}.offer-facts span{font:700 11px Nunito,sans-serif;color:#786b61}.offer-facts h3{margin:12px 0 8px;font:400 32px "Libre Caslon Display",serif}.offer-facts p{margin:0;font:400 15px/1.65 Nunito,sans-serif}
.offer-process{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding:105px max(40px,calc((100% - 1120px)/2));background:#354b40;color:#fff}.offer-process h2{color:#fff}.offer-process .offer-kicker{color:#c8d1c7}.offer-process ul,.offer-process ol{list-style:none;margin:35px 0 0;padding:0}.offer-process li{position:relative;padding:16px 0 16px 42px;border-bottom:1px solid rgba(255,255,255,.15);font:400 15px/1.6 Nunito,sans-serif}.offer-process ul li:before{content:"✓";position:absolute;left:4px;color:#d7e5d3;font-weight:700}.offer-process ol{counter-reset:offer-steps}.offer-process ol li{counter-increment:offer-steps}.offer-process ol li:before{content:counter(offer-steps);position:absolute;left:0;top:14px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#edf1e9;color:#354b40;font:700 12px Nunito,sans-serif}
.offer-showcase{padding:110px max(30px,calc((100% - 1224px)/2)) 125px;text-align:center;background:#ddd2c4}.offer-showcase>div{max-width:850px;margin:0 auto 50px}.offer-showcase h2{font-size:clamp(40px,4.6vw,62px);line-height:1.18}.offer-showcase>div>p:last-child{font:400 17px/1.7 Nunito,sans-serif}.offer-showcase>img{display:block;width:100%;max-height:820px;object-fit:cover}
.offer-types{padding:110px max(30px,calc((100% - 1224px)/2));background:#f8f4ed;text-align:center}.offer-types>div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}.offer-types article{background:#fff;text-align:left}.offer-types img{display:block;width:100%;height:300px;object-fit:cover}.offer-types h3{margin:0;padding:22px;font:400 30px "Libre Caslon Display",serif}
.offer-trust{padding:120px max(40px,calc((100% - 900px)/2));text-align:center;background:#fff}.offer-trust h2{line-height:1.18}.offer-trust>p:last-child,.offer-legal>p:last-child{font:400 18px/1.75 Nunito,sans-serif;color:#665e58}
.offer-legal{max-width:1050px;margin:0 auto 110px;padding:55px 60px;border:1px solid #d6c9bb;background:#f7f0e7}.offer-legal h2{font-size:clamp(38px,4vw,55px)}
.offer-final{display:grid;grid-template-columns:1fr auto;align-items:center;gap:60px;padding:105px max(40px,calc((100% - 1120px)/2));background:#c7ad98}.offer-final>div>p:last-child{max-width:760px;font:400 16px/1.7 Nunito,sans-serif}

@media(max-width:900px){.artwork-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.artwork-detail{grid-template-columns:1fr}.offer-hero__content{width:78%}.offer-section,.offer-process{grid-template-columns:1fr}.offer-types>div{grid-template-columns:1fr 1fr}.offer-final{grid-template-columns:1fr}}
@media(max-width:600px){.gallery-intro{padding:70px 22px 50px}.gallery-shell{padding:25px 20px 80px}.gallery-filters{display:grid}.artwork-grid{grid-template-columns:1fr}.artwork-detail{padding:55px 22px 80px;gap:35px}.offer-hero{min-height:980px}.offer-hero__shade{background:linear-gradient(180deg,rgba(241,231,216,.99) 0%,rgba(241,231,216,.95) 60%,rgba(241,231,216,.2) 88%)}.offer-hero__content{width:100%;padding:70px 22px}.offer-hero h1{font-size:52px}.offer-section,.offer-process,.offer-showcase,.offer-types,.offer-trust,.offer-final{padding:75px 22px}.offer-types>div{grid-template-columns:1fr}.offer-legal{margin:0 20px 80px;padding:35px 25px}}

/* Galerie-Verwaltung */
.gallery-admin{max-width:1050px;margin:0 auto;padding:85px 35px 110px;font-family:Nunito,sans-serif}.gallery-admin h1{margin:10px 0 35px;font:400 clamp(44px,6vw,70px)/1 "Libre Caslon Display",serif}.gallery-admin label{display:block;margin:18px 0;font-weight:700}.gallery-admin input,.gallery-admin textarea,.gallery-admin select{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid #cfc2b5;background:#fff;font:400 15px Nunito,sans-serif}.gallery-login{max-width:520px}.gallery-login form{padding:30px;background:#f3ebe1}.admin-error{padding:12px;background:#f4dddd;color:#7b2222}.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.admin-current-images{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.admin-current-images img{width:130px;height:100px;object-fit:cover}.admin-heading{display:flex;align-items:center;justify-content:space-between;gap:30px}.admin-heading p{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.admin-artworks{display:grid;gap:1px;background:#dfd4c9}.admin-artworks article{display:grid;grid-template-columns:100px 1fr auto auto;align-items:center;gap:20px;padding:14px;background:#fff}.admin-artworks img{width:100px;height:75px;object-fit:cover}.admin-artworks h2{margin:0;font:400 25px "Libre Caslon Display",serif}.admin-artworks p{margin:4px 0;font-size:13px}.admin-artworks a{color:#40594b;font-weight:700}.admin-artworks button,.admin-logout{border:0;background:transparent;color:#8b3232;text-decoration:underline;cursor:pointer}.admin-logout{margin-top:30px}@media(max-width:700px){.admin-form-grid{grid-template-columns:1fr}.admin-heading{align-items:flex-start;flex-direction:column}.admin-artworks article{grid-template-columns:75px 1fr}.admin-artworks img{width:75px;height:60px}}