/* NOCH NICHT. – Startseiten-Teaser als kleine Galerie-Ankündigung. */
#top .nn-teaser, .nn-teaser {
  --nn-t-paper: var(--color-paper, #f1f1ee);
  --nn-t-white: var(--color-white, #fafaf7);
  --nn-t-ink: var(--color-text, #34312f);
  --nn-t-olive: var(--hunt-olive, #39423a);
  --nn-t-muted: var(--color-muted, #7c7772);
  --nn-t-line: var(--color-border, #d4d4cf);
  --nn-t-red: var(--color-red, #a6463e);
  --nn-t-display: var(--font-display, Georgia, serif);
  --nn-t-body: var(--font-body, Georgia, serif);
  --nn-t-ui: var(--font-ui, Georgia, serif);
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr) minmax(165px, 205px);
  gap: clamp(18px, 2.2vw, 30px);
  align-items: center;
  width: min(1040px, 100%);
  max-width: 1040px;
  margin: 20px auto 34px;
  padding: 18px 24px 18px 18px;
  box-sizing: border-box;
  border-top: 1px solid var(--nn-t-line);
  border-bottom: 1px solid var(--nn-t-line);
  background: transparent;
  color: var(--nn-t-ink) !important;
  isolation: isolate;
  font-family: var(--nn-t-body);
  line-height: 1.4;
}
.nn-teaser *, .nn-teaser *::before, .nn-teaser *::after { box-sizing: border-box; }
.nn-teaser__visual {
  position: relative;
  width: 238px;
  min-height: 172px;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(145deg, #7b6246 0%, #9a7c59 16%, #5e4732 48%, #aa8861 83%, #6c543c 100%);
  border: 1px solid rgba(66, 46, 28, .55);
  box-shadow: 0 10px 22px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.08);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.nn-teaser__visual::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: var(--nn-t-white);
  box-shadow: inset 0 0 0 1px rgba(69, 63, 57, .12);
}
.nn-teaser__visual img, .nn-teaser__placeholder {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 152px;
  height: auto;
  object-fit: cover;
  display: block;
  background: var(--nn-t-white);
  padding: 7px;
  box-shadow: 0 0 0 1px rgba(55, 52, 46, .1);
}
.nn-teaser__placeholder { font: 400 17px/1 var(--nn-t-display); color: var(--nn-t-muted); display:flex; align-items:center; justify-content:center; }
.nn-teaser__content { min-width: 0; }
.nn-teaser__eyebrow { display: block; color: var(--nn-t-red); letter-spacing: .07em; font: 400 10px/1.3 var(--nn-t-ui); }
#top .nn-teaser h2, .nn-teaser h2 { font: 400 clamp(28px, 2.5vw, 36px)/1.05 var(--nn-t-display) !important; letter-spacing: 0 !important; color: var(--nn-t-ink) !important; margin: 8px 0 8px !important; text-align:left !important; }
#top .nn-teaser .nn-teaser__intro, .nn-teaser .nn-teaser__intro { text-align: left !important; hyphens: none !important; color: var(--nn-t-ink) !important; font: 400 16px/1.45 var(--nn-t-body) !important; margin: 0 !important; max-width: 32ch; }
.nn-teaser__provenance { display: block; color: var(--nn-t-muted); font: 400 10px/1.5 var(--nn-t-ui); margin-top: 8px; }
.nn-teaser__aside { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.nn-teaser__pricing { display: flex; flex-direction: column; align-items: flex-end; }
.nn-teaser__price-label { color: var(--nn-t-muted); font: 400 10px/1.35 var(--nn-t-ui); letter-spacing: .09em; }
#top .nn-teaser strong.nn-teaser__price, .nn-teaser strong.nn-teaser__price { color: var(--nn-t-olive) !important; font: 400 clamp(26px, 2.5vw, 34px)/1.08 var(--nn-t-display) !important; white-space: nowrap; font-variant-numeric: tabular-nums; margin: 4px 0; }
.nn-teaser__step { color: var(--nn-t-muted); font: 400 12px/1.35 var(--nn-t-ui); }
#top .nn-teaser .nn-teaser__link, .nn-teaser .nn-teaser__link { display: inline-flex; align-items: center; gap: 9px; color: var(--nn-t-red) !important; font: 400 13px/1.4 var(--nn-t-ui) !important; text-decoration: underline !important; text-underline-offset: 3px; padding: 5px 0; border: 0 !important; background: transparent !important; }
#top .nn-teaser .nn-teaser__link:hover, .nn-teaser .nn-teaser__link:hover { color: var(--nn-t-olive) !important; }
.nn-teaser__link span:last-child { text-decoration: none; font-size: 16px; }
.nn-teaser__config { color: var(--nn-t-red); font: 400 11px/1.4 var(--nn-t-ui); }
.nn-teaser a:focus-visible { outline: 2px solid var(--nn-t-red); outline-offset: 4px; }
@media (max-width: 880px) {
  #top .nn-teaser, .nn-teaser { grid-template-columns: 196px minmax(0,1fr) minmax(150px, 180px); padding-right: 14px; }
  .nn-teaser__visual { width: 196px; min-height: 150px; }
  .nn-teaser__visual img, .nn-teaser__placeholder { min-height: 130px; }
}
@media (max-width: 720px) {
  #top .nn-teaser, .nn-teaser {
    grid-template-columns: 140px minmax(0,1fr);
    column-gap: 16px;
    row-gap: 10px;
    padding: 12px 0;
    margin: 14px auto 24px;
  }
  .nn-teaser__visual { grid-row: span 2; align-self: start; width: 140px; min-height: 186px; padding: 9px; }
  .nn-teaser__visual::before { inset: 9px; }
  .nn-teaser__visual img, .nn-teaser__placeholder { min-height: 168px; padding: 6px; }
  .nn-teaser__content { align-self: end; }
  .nn-teaser__eyebrow { font-size: 9px; }
  #top .nn-teaser h2, .nn-teaser h2 { font-size: clamp(24px, 6vw, 30px) !important; margin: 5px 0 !important; }
  #top .nn-teaser .nn-teaser__intro, .nn-teaser .nn-teaser__intro { font-size: 13px !important; line-height: 1.4 !important; }
  .nn-teaser__provenance { display: none; }
  .nn-teaser__aside { align-items: flex-start; flex-direction: column; gap: 5px; justify-content: flex-start; text-align: left; }
  .nn-teaser__pricing { align-items: flex-start; }
  .nn-teaser__price-label { font-size: 9px; }
  #top .nn-teaser strong.nn-teaser__price, .nn-teaser strong.nn-teaser__price { font-size: 22px !important; }
  .nn-teaser__step { font-size: 10px; }
  #top .nn-teaser .nn-teaser__link, .nn-teaser .nn-teaser__link { font-size: 12px !important; white-space: nowrap; }
}
@media (max-width: 380px) {
  #top .nn-teaser, .nn-teaser { grid-template-columns: 1fr; row-gap: 12px; }
  .nn-teaser__visual { width: min(185px, 100%); min-height: 150px; }
  .nn-teaser__visual img, .nn-teaser__placeholder { min-height: 132px; }
  .nn-teaser__aside { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
}