/* Horchwelt-Anpassung der Nebulla-Vorlage: Marke, Schriften, Handy zuerst.
   Wird NACH hh2.css, wizard.css und nb.css geladen. */

@font-face { font-family: "Inter"; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Mouse Memoirs"; src: url("/fonts/mouse-memoirs-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --primary-color: #2D524A;        /* Eukalyptus */
  --accent-color: #F3C76A;         /* Honiggelb (weich) */
  --secondary-color: #F4EDE2;      /* Sand */
  --text-color: #586D66;
  --bg-color: #FFFDF9;
  --divider-color: #2D524A1A;
  --accent-secondary-color: #F4EDE2;
  --default-font: "Inter", system-ui, sans-serif;
  --accent-font: "Mouse Memoirs", "Inter", sans-serif;
}

body.nb { font-family: var(--default-font); background: var(--bg-color); color: var(--text-color); line-height: 1.5; }
.nb .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* Knopf: gelb mit dunkler Schrift (Gelb mit weißer Schrift ist schlecht lesbar) */
.nb .btn-default { color: var(--primary-color); font-size: 17px; text-transform: none; cursor: pointer; }
.nb .btn-default::before { filter: brightness(0) saturate(100%); background-image: url("img/arrow-white.svg"); }
.nb .btn-default:hover { color: var(--primary-color); }
.nb .btn-default.btn-light { background: #fff; border-color: #fff; }

/* Kopfzeile */
.nb-top { position: sticky; top: 0; z-index: 50; background: linear-gradient(100deg, #2D524A 0%, #3E7062 50%, #7BA996 100%); }
.nb-top .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.nb-top img { height: 30px; width: auto; display: block; }
.nb-top nav { display: none; gap: 26px; }
.nb-top nav a { color: #fff; font-weight: 600; font-size: 15px; }
.nb-top .btn-default { padding: 10px 44px 10px 18px; font-size: 15px; }
.nb-top .btn-default::before { right: 16px; width: 18px; height: 18px; }
@media (min-width: 992px) { .nb-top nav { display: flex; } .nb-top .container { height: 76px; } .nb-top img { height: 38px; } }

/* Hero: alles Wichtige im ersten Bildschirm */
.nb .hero { padding: 22px 0 34px; }
.nb .hero .section-title { margin-bottom: 16px; }
.nb .section-title .section-sub-title { font-size: 13px; padding: 7px 14px 7px 34px; margin-bottom: 12px; text-transform: none; }
.nb .section-title .section-sub-title::before { left: 14px; }
.nb .hero h1 { font-size: 46px; line-height: 1.02; letter-spacing: 0; color: #fff; }
.nb .hero h1 em { font-style: normal; color: var(--accent-color); }
.nb .hero-lede { color: #E7F0EB; font-size: 16px; line-height: 1.5; margin: 10px 0 0; }

/* Name + Play: der Kern der Seite */
.nb-try { background: #fff; border-radius: 26px; padding: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.nb-try label.nb-try-label { display: block; font-weight: 700; color: var(--primary-color); font-size: 15px; margin: 2px 4px 8px; }
.nb-try-row { display: flex; gap: 10px; align-items: stretch; }
.nb-try input[type=text] { flex: 1; min-width: 0; font: 600 18px/1.2 var(--default-font); color: var(--primary-color); background: var(--secondary-color); border: 2px solid transparent; border-radius: 16px; padding: 14px 14px; outline: none; }
.nb-try input[type=text]:focus { border-color: var(--accent-color); background: #fff; }
.nb-play { flex: none; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--accent-color); cursor: pointer; position: relative; box-shadow: 0 6px 16px rgba(243,199,106,.45); }
.nb-play::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 18px solid var(--primary-color); border-top: 11px solid transparent; border-bottom: 11px solid transparent; transform: translateX(3px); }
.x-sample.playing .nb-play::before { width: 16px; height: 18px; border: 0; transform: none; background: linear-gradient(90deg, var(--primary-color) 0 35%, transparent 35% 65%, var(--primary-color) 65%); }
.x-sample.nb-loading .nb-play { animation: nbspin 1s linear infinite; }
@keyframes nbpulse { 50% { transform: scale(.92); } }
.nb-try-status { display: flex; align-items: center; gap: 8px; margin: 10px 4px 0; font-size: 14px; color: var(--text-color); min-height: 20px; }
.nb-try-status b { color: var(--primary-color); }
.nb-try .nb-go { width: 100%; margin-top: 12px; text-align: center; padding: 15px 50px 15px 24px; }
.nb .x-sample { display: block; background: none; padding: 0; border: 0; box-shadow: none; margin: 0; }

/* Preis + Vertrauen */
.nb-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 16px 2px 0; color: #fff; }
.nb-price .now { font: 400 40px/1 var(--accent-font); color: var(--accent-color); }
.nb-price s { color: #E7F0EB; font-size: 17px; }
.nb-price small { color: #E7F0EB; font-size: 14px; }
.nb #earlyBar { display: none !important; } /* Frist steht schon in der Preiszeile */
.nb .hero-info-list { margin-top: 14px; }
.nb .hero-info-list ul { gap: 8px 18px; }
.nb .hero-info-list ul li { font-size: 14px; padding-left: 24px; }
.nb .hero-info-list ul li::before { content: ""; font-family: inherit; width: 17px; height: 17px; top: 2px; border-radius: 50%; background: var(--accent-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232D524A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.nb #heroStars { color: #fff; margin: 12px 2px 0; font-size: 14px; }
.nb #heroStars a { color: #fff; text-decoration: underline; }
.nb #heroStars .x-stars { color: var(--accent-color); letter-spacing: 2px; }
.nb-hero-img { display: none; }
@media (min-width: 992px) {
  .nb .hero { padding: 70px 0 80px; }
  .nb .hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
  .nb .hero h1 { font-size: 76px; }
  .nb-hero-img { display: block; border-radius: 300px 300px 30px 30px; overflow: hidden; border: 10px solid #ffffff1a; }
  .nb-hero-img img { width: 100%; height: 560px; object-fit: cover; display: block; }
}

/* Türchen 1 per Mail */
.nb .x-leadbox { margin-top: 14px; background: #ffffff12; border: 1px solid #ffffff26; border-radius: 18px; padding: 0; }
.nb .x-leadbox summary { padding: 12px 16px; color: #fff; cursor: pointer; list-style: none; }
.nb .x-leadbox summary::-webkit-details-marker { display: none; }
.nb .x-leadbox .x-leadbtn { display: block; font-weight: 700; color: #fff; background: none; border: 0; padding: 0; font-size: 15px; }
.nb .x-leadbox .x-leadsub { display: block; color: #E7F0EB; font-size: 13px; margin-top: 2px; }
.nb .x-leadbox form { background: #fff; border-radius: 0 0 18px 18px; padding: 14px 16px 16px; }

/* Laufband */
.nb .our-scrolling-ticker { background: var(--accent-color); }
.nb .scrolling-content span { color: var(--primary-color); font: 400 24px/1 var(--accent-font); }
.nb .scrolling-content span img { filter: none; }

/* Abschnitte */
.nb-sec { padding: 56px 0; }
.nb-sec.sand { background: var(--secondary-color); }
.nb .section-title h2 { font-size: 42px; line-height: 1.02; }
.nb .section-title-center { text-align: center; }
.nb .section-title p { font-size: 16px; }
@media (min-width: 992px) { .nb-sec { padding: 100px 0; } .nb .section-title h2 { font-size: 60px; } }

/* Bewertungen im Nebulla-Stil */
.nb .x-reviewband { background: var(--secondary-color); padding: 50px 0 46px; }
.nb .x-rc { max-width: 720px; }
.nb .x-rc-slide { background: #fff; border-radius: 28px; padding: 30px 22px; box-shadow: 0 10px 30px rgba(45,82,74,.08); gap: .7rem; }
.nb .x-rc-stars { color: var(--accent-color); }
.nb .x-rc blockquote { font: 400 30px/1.1 var(--accent-font); color: var(--primary-color); }
.nb .x-rc-dots button.on { background: var(--primary-color); }

/* So funktioniert's: Nebulla-Schritte, am Handy untereinander */
.nb .how-it-works { padding: 56px 0 60px; }
.nb .how-it-work-item-list { gap: 18px; }
.nb .how-work-item { width: 100%; margin: 0 !important; border-radius: 140px 140px 40px 40px; }
.nb .how-work-item-body { padding: 26px 20px 8px; }
.nb .how-work-step-no { width: 46px; height: 46px; margin-bottom: 14px; }
.nb .how-work-step-no h3 { color: var(--primary-color); }
.nb .how-work-item-content h3 { font-size: 30px; }
.nb .how-work-item-content p { color: #E7F0EB; }
.nb .how-work-item-image figure { padding: 6px 14px 14px; border-radius: 0; overflow: visible; }
.nb .how-work-item-image figure img { aspect-ratio: 800 / 520; border-radius: 22px; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.nb .how-work-item:hover .how-work-item-image figure img { transform: none; }
.nb .how-work-item:hover::before { display: none; }
@media (min-width: 992px) {
  .nb .how-work-item { width: calc(33.33% - 12px); }
  .nb .how-work-item:nth-child(3n + 2) { margin-bottom: 60px !important; }
}

/* Gestalter: Formular in Nebulla-Optik */
.nb .w-page { background: var(--secondary-color); padding: 56px 0 70px; }
.nb .w-page .x-wrap { max-width: 1180px; padding: 0 16px; }
.nb .w-head h2 { font: 400 42px/1.02 var(--accent-font); color: var(--primary-color); }
.nb .w-head p { color: var(--text-color); }
.nb .w-form { border-radius: 28px; }
.nb .w-title { font: 400 30px/1.05 var(--accent-font); color: var(--primary-color); }
.nb .w-title span { background: var(--accent-color); color: var(--primary-color); font-family: var(--default-font); font-weight: 800; }
.nb .w-bar i { background: var(--accent-color); }
.nb .x-form h4, .nb .x-form legend, .nb .x-summary h3 { font-family: var(--default-font); }
.nb .x-btn { border-radius: 100px; }
.nb .x-summary { border-radius: 28px; }

/* Fragen */
.nb .nb-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.nb .nb-faq details { background: #fff; border: 1px solid var(--divider-color); border-radius: 22px; overflow: hidden; }
.nb .nb-faq summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; font-weight: 700; color: var(--primary-color); position: relative; line-height: 1.35; }
.nb .nb-faq summary::-webkit-details-marker { display: none; }
.nb .nb-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--accent-color); color: var(--primary-color); font-weight: 800; display: grid; place-items: center; }
.nb .nb-faq details[open] summary { background: var(--primary-color); color: #fff; }
.nb .nb-faq details[open] summary::after { content: "–"; }
.nb .nb-faq p { padding: 16px 20px 18px; margin: 0; line-height: 1.6; }

/* Fuß */
.nb-foot { background: var(--primary-color); color: #E7F0EB; padding: 44px 0 110px; font-size: 14px; }
.nb-foot img { height: 32px; width: auto; }
.nb-foot a { color: #fff; }
.nb-foot ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.nb-foot .x-legal { color: #E7F0EB; font-size: 12px; margin-top: 20px; line-height: 1.5; }

/* Knopf unten, der beim Scrollen stehen bleibt */
.nb-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(45,82,74,.18) 40%); transform: translateY(110%); transition: transform .3s ease; pointer-events: none; }
.nb-sticky.on { transform: none; pointer-events: auto; }
.nb-sticky .btn-default { width: 100%; text-align: center; box-shadow: 0 10px 24px rgba(45,82,74,.3); }
@media (min-width: 992px) { .nb-sticky { display: none; } }

/* Korrekturen nach der ersten Handy-Vorschau */
.nb #heroStars b { color: #fff; }
.nb .x-rc-slide { background: none; box-shadow: none; padding: 0; }
.nb .x-rc-track { background: #fff; border-radius: 28px; padding: 28px 20px; box-shadow: 0 10px 30px rgba(45,82,74,.08); }
.nb .x-rc blockquote { font: 600 18px/1.5 var(--default-font); color: var(--primary-color); }
.nb .x-rc blockquote { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 991px) {
  .nb .how-work-item { border-radius: 90px 90px 30px 30px; padding: 8px; }
  .nb .how-work-item-body { padding: 18px 16px 6px; }
  .nb .how-work-step-no { margin-bottom: 8px; }
  .nb .how-work-item-content h3 { font-size: 27px; }
  .nb .how-work-item-content p { font-size: 15px; line-height: 1.45; }
  .nb .how-work-item-image figure img { aspect-ratio: 800 / 520; }
}

/* ===== Burger-Menü ===== */
.nb-top .nb-right { display: flex; align-items: center; gap: 10px; }
.nb-burger { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff33; background: #ffffff14; display: grid; place-content: center; gap: 5px; cursor: pointer; padding: 0; }
.nb-burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
.nb-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nb-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nb-menu { position: fixed; inset: 60px 0 0; z-index: 49; background: rgba(32,58,52,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.nb-menu[hidden] { display: none; }
.nb-menu nav { background: var(--primary-color) url("img/dark-bg-euka.webp") center/cover; padding: 14px 16px 24px; display: grid; gap: 4px; border-radius: 0 0 28px 28px; max-height: calc(100vh - 60px); overflow: auto; }
.nb-menu a { display: flex; align-items: center; justify-content: space-between; color: #fff; font: 400 30px/1.1 var(--accent-font); padding: 12px 6px; border-bottom: 1px solid #ffffff1a; }
.nb-menu a small { font: 500 13px/1.2 var(--default-font); color: #E7F0EB; text-align: right; max-width: 45%; }
.nb-menu a.hl { color: var(--accent-color); }
.nb-menu .btn-default { margin-top: 14px; justify-content: center; display: block; text-align: center; font: 700 17px/1 var(--default-font); color: var(--primary-color); padding: 16px 50px 16px 24px; border: 0; }
body.nb-menu-open { overflow: hidden; }
@media (min-width: 992px) { .nb-menu { inset: 76px 0 0; } .nb-menu nav { max-width: 520px; margin-left: auto; border-radius: 0 0 0 28px; } }

/* ===== Freigestelltes Bild im Kopfbereich ===== */
.nb .hero { position: relative; overflow: hidden; }
.nb-hero-head { position: relative; }
.nb .hero .nb-try, .nb .hero .hero-lede { position: relative; z-index: 2; }
.nb .hero h1.nb-h1-sm { font-size: 42px; }
@media (min-width: 992px) {
  .nb-hero-head .section-title { padding-right: 0; }
}

/* ===== Themen-Kacheln (von story.js gefüllt) ===== */
.nb-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.nb-gallery button { position: relative; display: block; padding: 0; border: 0; border-radius: 24px; overflow: hidden; background: var(--primary-color); cursor: pointer; text-align: left; aspect-ratio: 1 / 1.1; }
.nb-gallery button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.nb-gallery button:hover img { transform: scale(1.05); }
.nb-gallery button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(32,58,52,.85)); }
.nb-gallery b, .nb-gallery small, .nb-gallery .tag { position: absolute; z-index: 1; left: 12px; right: 12px; color: #fff; }
.nb-gallery b { bottom: 30px; font: 400 26px/1 var(--accent-font); }
.nb-gallery small { bottom: 10px; font-size: 12px; color: #E7F0EB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-gallery .tag { top: 10px; left: 10px; right: auto; background: var(--accent-color); color: var(--primary-color); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
@media (min-width: 992px) { .nb-gallery { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* ===== Abschnitte mit freigestelltem Bild (Oma, Kalender) ===== */
.nb-feature { position: relative; overflow: hidden; border-radius: 34px; padding: 30px 22px 0; display: grid; gap: 4px; }
.nb-feature.dark { background: var(--primary-color) url("img/dark-bg-euka.webp") center/cover; color: #E7F0EB; }
.nb-feature.sun { background: var(--accent-color); color: var(--primary-color); }
.nb-feature.sand { background: var(--secondary-color); }
.nb-feature .section-title { margin-bottom: 10px; }
.nb-feature.dark .section-title h2, .nb-feature.dark .section-title p { color: #fff; }
.nb-feature.dark .section-title .section-sub-title { color: #fff; border-color: #ffffff26; }
.nb-feature ul { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; gap: 8px; }
.nb-feature ul li { position: relative; padding-left: 26px; line-height: 1.45; }
.nb-feature ul li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232D524A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.nb-feature.sun ul li::before { background-color: #fff; }
.nb-feature .nb-feature-price { font: 400 34px/1 var(--accent-font); color: var(--accent-color); margin: 0 0 14px; }
.nb-feature.sun .nb-feature-price { color: var(--primary-color); }
.nb-feature .nb-feature-price small { font: 500 14px/1.3 var(--default-font); color: inherit; opacity: .85; margin-left: 6px; }
.nb-feature .btn-default { justify-self: start; }
.nb-feature.sun .btn-default { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.nb-feature.sun .btn-default::before { filter: none; }
.nb-feature-pic { justify-self: end; width: 62%; max-width: 300px; margin: 6px -6px 0 0; }
.nb-feature-pic img { display: block; width: 100%; height: auto; }
.nb-feature + .nb-feature { margin-top: 18px; }
@media (min-width: 992px) {
  .nb-feature { grid-template-columns: 1.2fr .8fr; align-items: end; padding: 50px 50px 0; }
  .nb-feature-pic { grid-row: 1 / span 5; grid-column: 2; width: 100%; }
}

/* ===== Tonie-Finder-Karte ===== */
.nb-teaser { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--divider-color); border-radius: 24px; padding: 16px; color: var(--primary-color); }
.nb-teaser b { display: block; font: 400 26px/1.05 var(--accent-font); }
.nb-teaser span { font-size: 14px; color: var(--text-color); }
.nb-teaser i { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-color) url("img/arrow-white.svg") center/20px no-repeat; filter: none; }
.nb-teaser i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%232D524A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ===== Bewertungen mit Bild ===== */
.nb .x-reviewband .x-wrap { position: relative; }
.nb-rev-pic { position: absolute; right: 4px; top: -78px; width: 118px; z-index: 2; pointer-events: none; filter: drop-shadow(0 8px 16px rgba(45,82,74,.25)); }
.nb .x-reviewband { overflow: hidden; }
.nb .x-rc-track { min-height: 0; }
.nb .x-rc-slide { justify-content: center; }

/* Korrekturen 2. Vorschau */
@media (max-width: 991px) {
  .nb-gallery { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 8px; margin: 0 -16px; scrollbar-width: none; }
  .nb-gallery::-webkit-scrollbar { display: none; }
  .nb-gallery button { scroll-snap-align: start; }
  .nb-feature-pic { width: 50%; margin: -70px -22px 0 0; }
  .nb-feature.dark .nb-feature-pic { width: 46%; }
  .nb-feature .btn-default { position: relative; z-index: 2; }
}
#mehr { padding-bottom: 10px; }
#fragen { padding-top: 40px; }

/* Tonie-Finder im Nebulla-Rahmen */
.nb .nb-tf-hero { margin: 0; max-width: none; width: 100%; padding: 28px 16px 20px; border-radius: 0; }
.nb .nb-tf-hero > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.nb .nb-tf-hero h1 { color: #fff; font: 400 44px/1.02 var(--accent-font); margin-bottom: 10px; }
.nb .nb-tf-hero .lede { color: #E7F0EB; font-size: 16px; line-height: 1.5; }
.nb .nb-tf-hero .lede span { color: var(--accent-color); font-weight: 700; }
.nb .nb-tf-hero p:not(.lede) { color: #E7F0EB; }
.nb .nb-tf h2, .nb .nb-tf h3 { font-family: var(--accent-font); color: var(--primary-color); font-weight: 400; }
.nb .nb-h1-sm { font-size: 38px !important; }

.nb main { padding-top: 0; }
.nb main { display: block; padding-block: 0; gap: 0; }
.nb .nb-tf { padding: 0 0 10px; }

/* ===== Foto unter Farbschleier (Kopfbereich, Bewertungen) ===== */
.nb .hero.nb-foto { background-color: var(--primary-color); background-repeat: no-repeat; background-size: cover; }
.nb .hero.nb-foto-maedchen { background-image: linear-gradient(165deg, rgba(45,82,74,.86) 0%, rgba(62,112,98,.74) 45%, rgba(123,169,150,.66) 100%), url("/bilder/hero/maedchen.webp"); background-position: center, 36% 0; }
.nb .hero.nb-foto-kalender { background-image: linear-gradient(165deg, rgba(45,82,74,.86) 0%, rgba(62,112,98,.74) 45%, rgba(123,169,150,.66) 100%), url("/bilder/hero/kalender.webp"); background-position: center, center 30%; }
.nb .x-rc-track { padding: 0; overflow: hidden; }
.nb .x-rc-slide { padding: 34px 22px; border-radius: 28px; min-height: 380px; }
.nb .x-rc-slide[data-pic] { background: linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)), var(--pic) center 30% / cover no-repeat; }
/* Oma- und Kalender-Abschnitt: Foto unter Farbschleier */
.nb-feature { padding-bottom: 30px; }
.nb-feature.nb-foto-oma { background: linear-gradient(165deg, rgba(45,82,74,.9) 0%, rgba(62,112,98,.8) 50%, rgba(123,169,150,.72) 100%), url("/bilder/hero/oma.webp") 60% 20% / cover no-repeat; }
.nb-feature.nb-foto-kal { background: linear-gradient(165deg, rgba(243,199,106,.94) 0%, rgba(243,199,106,.86) 55%, rgba(243,199,106,.78) 100%), url("/bilder/hero/kalender-mandarine.webp") center 30% / cover no-repeat; }

/* ===== Glattziehen 12.11.: einheitliche Abschnitte ===== */
/* Bewertungen: eigener Abschnitt mit Überschrift, nicht mehr im selben Sand wie der Gestalter */
.nb .x-reviewband { background: transparent; padding: 56px 0 44px; }
.nb .x-reviewband .section-title { margin-bottom: 22px; }
.nb .x-rc-slide { box-shadow: 0 10px 30px rgba(45,82,74,.10); }
.nb .x-rc-sum { margin-top: 14px; }
/* Gestalter-Kopf wie die anderen Abschnitte */
.nb .w-head.section-title { margin-bottom: 26px; }
/* Kalender-Kopf: „Türchen 1 per Mail“ mit sauberem Pfeil statt Strich */
.nb .x-leadbox .x-leadbtn { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nb .x-leadbox .x-leadbtn::after { border-color: #fff; }
/* Tonie-Finder: nur noch die zwei Schriften der neuen Seiten */
.nb .nb-tf .q-title { font: 600 17px/1.3 var(--default-font); color: var(--primary-color); }
.nb .nb-tf .q-title small, .nb .nb-tf small { font-family: var(--default-font); }
.nb .nb-tf output { font-family: var(--accent-font); color: var(--primary-color); }
.nb .nb-tf .empty strong { display: block; font: 600 18px/1.35 var(--default-font); color: var(--primary-color); margin-bottom: 4px; }
.nb .nb-tf h3 { font-size: 26px; line-height: 1.05; }
.nb .nb-tf-hero figcaption { color: #E7F0EB; }
.nb .nb-tf .results-head { border-bottom: 1px solid var(--divider-color); }
.nb .nb-tf section.letter { border-top: 1px solid var(--divider-color); }
.nb .nb-tf button.more { border: 1px solid var(--divider-color); border-radius: 100px; }
.nb .nb-tf a.buy { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 100px; font: 600 16px/1 var(--default-font); background: var(--accent-color); color: var(--primary-color); }
.nb .nb-tf .letter button, .nb .nb-tf .letter input[type=email] { border-radius: 100px; }
@media (min-width: 992px) {
  /* Computer: Schrift links auf dunklem Blau, rechts wird das Foto sichtbar */
  .nb .hero.nb-foto-maedchen { background-image: linear-gradient(90deg, #2D524A 0%, #2D524A 41%, rgba(62,112,98,.7) 62%, rgba(123,169,150,.3) 100%), url("/bilder/hero/maedchen.webp"); background-position: center, right 0 top 25%; background-size: cover, 60% auto; }
  .nb .hero.nb-foto-kalender { background-image: linear-gradient(90deg, #2D524A 0%, #2D524A 51%, rgba(62,112,98,.7) 68%, rgba(123,169,150,.3) 100%), url("/bilder/hero/kalender.webp"); background-position: center, right 0 center; background-size: cover, 50% auto; }
  /* 10 Themenwelten: 5 pro Reihe, keine halbe Reihe */
  .nb .nb-gallery { grid-template-columns: repeat(5, 1fr); }
}

/* ===== Kopfzeile als Milchglas: oben durchsichtig auf dem Foto, beim Scrollen scheinen die Farben darunter durch ===== */
html { scroll-padding-top: 72px; }
.nb-top { margin-bottom: -60px; background: transparent; transition: background-color .3s ease, box-shadow .3s ease; }
.nb-top.nb-glass { background: linear-gradient(100deg, rgba(45,82,74,.74) 0%, rgba(62,112,98,.64) 50%, rgba(123,169,150,.56) 100%); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(32,58,52,.12); }
body.nb-menu-open .nb-top { background: var(--primary-color); }
.nb .hero { padding-top: 82px; }
.nb .nb-tf-hero { padding-top: 88px; }
@media (min-width: 992px) {
  html { scroll-padding-top: 88px; }
  .nb-top { margin-bottom: -76px; }
  .nb .hero { padding-top: 146px; }
  .nb .nb-tf-hero { padding-top: 110px; }
}
/* Bewertungen: KI-Szenen klar als Symbolbild kennzeichnen, längere Texte etwas mehr Platz */
.nb .x-rc-slide { position: relative; }
.nb .x-rc-slide[data-pic]::after { content: "Symbolbild"; position: absolute; top: 14px; right: 18px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--text-color); background: rgba(255,255,255,.85); border-radius: 100px; padding: 3px 9px; }
.nb .x-rc blockquote { -webkit-line-clamp: 8; }
/* Handy: scharfes Hochkant-Foto, Gesicht oben rechts neben der Überschrift */
@media (max-width: 991px) {
  .nb .hero.nb-foto-maedchen { background-image: linear-gradient(100deg, rgba(45,82,74,.9) 0%, rgba(62,112,98,.74) 50%, rgba(123,169,150,.5) 100%), url("/bilder/hero/maedchen-hoch.webp"); background-position: center, 70% top; background-size: cover, cover; }
}

/* ===== Eukalyptus (13.11.): Farben der übernommenen Teile (Gestalter, Tonie-Finder) ===== */
body.nb { --ink: #2D524A; --ink-soft: #586D66; --mustard-ink: #2D524A; --shadow: 0 1px 2px rgba(45,82,74,.04), 0 12px 32px -18px rgba(45,82,74,.22); }
/* Dunkle Abschnitte: Eukalyptus-Verlauf statt Texturbild (hell oben links, tief unten rechts, wie vorher Türkis zu Nachtblau) */
.nb .dark-section:not(.nb-foto), .nb-menu nav { background: radial-gradient(120% 70% at 15% 0%, #7BA996 0%, rgba(123,169,150,0) 60%), linear-gradient(165deg, #4A7F6E 0%, #386458 45%, #2B5047 100%); }

/* ===== Feste Palette (13.11.): nur vier Farben =====
   1 Eukalyptus #2D524A (Text, dunkle Flächen, Verläufe nur in seinen Abstufungen)
   2 Salbei     #7BA996 (helle Seite der Verläufe)
   3 Honiggelb  #F3C76A (Knöpfe, Akzente; leicht durchsichtig)
   4 Sand/Creme #F4EDE2 + Weiß (Untergrund, Karten)
   Alles aus hh2.css/site.css (Nachtblau, Karamell, Koralle, Orange) wird hier darauf umgebogen. */
body.nb {
  --sun: #F3C76A; --sun-deep: #E3B04F; --sun-soft: #FBF1DC;
  --caramel: #7BA996; --caramel-text: #2D524A;
  --sage: #7BA996; --sage-soft: #E7F0EB;
  --ok: #2D524A;
}
.nb .x-stars, .nb .x-rc-stars { color: #E3B04F; }
.nb .section-title .section-sub-title::before { background-image: url("img/icon-sub-heading-honig.svg"); }
/* Gelb weicher und leicht durchsichtig */
.nb .btn-default, .nb .nb-play, .nb .our-scrolling-ticker { background-color: rgba(243,199,106,.9); }
.nb .btn-default, .nb .nb-play { box-shadow: 0 6px 16px rgba(227,176,79,.28); }
.nb .w-bar i, .nb .w-title span { background: rgba(243,199,106,.9); }
.nb .x-tile input:checked + span small, .nb .x-tile input:checked + span em { color: #F4EDE2; }
/* Tonie-Finder: keine Regenbogen-Kategorien mehr, alles in der Palette (Regal-Holz bleibt als Bild) */
body.nb {
  --mustard: #F3C76A; --leaf: #2D524A;
  --c-music: #7BA996; --c-adventure: #7BA996; --c-animals: #7BA996; --c-dinos: #7BA996;
  --c-vehicles: #7BA996; --c-heroes: #7BA996; --c-movies: #7BA996; --c-fairy: #7BA996;
  --c-stories: #7BA996; --c-knowledge: #7BA996; --c-sleep: #7BA996;
}
.nb .tile input:checked + span { background: var(--primary-color); }
.nb .agepick input[type=range], .nb .check input { accent-color: var(--primary-color); }
/* Klebender Knopf: Untergrund blendet weich aus, damit der leicht durchsichtige Knopf lesbar bleibt */
.nb-sticky { background: linear-gradient(rgba(255,253,249,0), rgba(255,253,249,.92) 45%); }
.nb-sticky .btn-default { background-color: rgba(243,199,106,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 20px rgba(45,82,74,.18); }
/* Laufband: durchsichtig über dem Foto/Verlauf, etwas höher, läuft sichtbar */
.nb .our-scrolling-ticker { background: rgba(243,199,106,.62); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); padding: 18px 0; border-top: 1px solid rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.35); }
.nb .scrolling-content { animation-duration: 32s; }
.nb .scrolling-content span img { width: 26px; max-width: 26px; }
/* Laufband liegt unten auf dem Kopfbild, damit Foto und Verlauf durchscheinen */
.nb .hero + .our-scrolling-ticker, .nb .nb-tf-hero + .our-scrolling-ticker { position: relative; z-index: 2; margin-top: -62px; }
.nb .hero > .container { padding-bottom: 50px; }
/* Handy-Kopfbild (15.11.): Gesicht sitzt rechts neben der Überschrift, dort ist der Schleier am hellsten */
@media (max-width: 991px) {
  .nb .hero.nb-foto-maedchen {
    background-image:
      radial-gradient(42vw 38vw at 77% 44vw, rgba(45,82,74,0) 0%, rgba(45,82,74,0) 55%, rgba(45,82,74,.0) 100%),
      linear-gradient(180deg, rgba(45,82,74,.35) 0%, rgba(45,82,74,.2) 18%, rgba(45,82,74,.78) 42%, rgba(45,82,74,.9) 100%),
      linear-gradient(90deg, rgba(45,82,74,.6) 0%, rgba(45,82,74,.15) 70%),
      url("/bilder/hero/maedchen-hoch.webp");
    background-size: auto, auto, auto, 150vw auto;
    background-position: center, center, center, -15vw -58vw;
    background-repeat: no-repeat;
    background-color: #2D524A;
  }
  .nb .hero.nb-foto-maedchen h1 { text-shadow: 0 2px 14px rgba(32,58,52,.55); }
}
/* Gestalter: einheitlicher Untergrund wie „Wohin geht die Reise?“ (Creme), Karte bleibt weiß */
.nb .w-page { background: transparent; }
.nb .w-page .w-order { box-shadow: 0 1px 2px rgba(45,82,74,.04), 0 18px 40px -22px rgba(45,82,74,.28); }
/* Hörprobe in Schritt 1 */
.nb .nb-wtry { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 14px 10px 10px; border-radius: 18px; background: #FBF1DC; }
.nb .nb-wtry .nb-play { width: 46px; height: 46px; box-shadow: 0 4px 12px rgba(227,176,79,.3); }
.nb .nb-wtry .nb-play::before { border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; }
.nb .nb-wtry.playing .nb-play::before { width: 13px; height: 15px; border: 0; transform: none; background: linear-gradient(90deg, var(--primary-color) 0 35%, transparent 35% 65%, var(--primary-color) 65%); }
.nb .nb-wtry.nb-loading .nb-play { animation: nbspin 1s linear infinite; }
.nb .nb-wtry span { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--primary-color); }
/* Ladezustand der Hörproben: Die Vorlage hat eine Lade-Animation auf „.loading“ (dreht den ganzen Kasten).
   Hier abschalten, stattdessen dreht sich nur der runde Abspielknopf. */
.nb .x-sample.loading { animation: none; transform: none; width: auto; height: auto; border: 0; border-radius: 0; }
.nb .x-sample.loading .nb-play { animation: nbspin 1s linear infinite; }
@keyframes nbspin { to { transform: rotate(360deg); } }

/* Abfrage-Felder im Gestalter und oben im Kopf: zartes Salbeigrün statt Sand, passend zur Palette */
body.nb { --sand: #E7F0EB; --sand-deep: #D6E6DD; }
.nb .w-page .w-bar { background: #E7F0EB; }
.nb-try input[type=text] { background: #E7F0EB; }
.nb-try input[type=text]:focus { background: #fff; }
.nb .x-chip:hover span, .nb .x-tile span:hover { background: #D6E6DD; }

/* ===== 15.11. abends: alles in Grün =====
   Grün (Eukalyptus/Salbei/Minze) für Flächen, Kacheln, Nummern, Hinweis-Kästen, Laufband, Bewertungen, Kalender.
   Honiggelb bleibt nur dort, wo es eine Handlung anzeigt: Hauptknöpfe (Gestalten, Bestellen, Knopf unten),
   Abspielknöpfe, Sterne und die betonten Wörter/Preise. Dadurch springen die Kaufknöpfe sofort ins Auge. */

/* Computer: Foto rechts immer ganz zu sehen (Höhe = Kopfbereich), auch auf sehr breiten Bildschirmen */
@media (min-width: 992px) {
  .nb .hero.nb-foto-maedchen {
    background-image: linear-gradient(90deg, #2D524A 0%, #2D524A 44%, rgba(45,82,74,.55) 60%, rgba(45,82,74,.15) 78%, rgba(45,82,74,.25) 100%), url("/bilder/hero/maedchen.webp");
    background-size: cover, auto 112%; background-position: center, right 4% center; background-repeat: no-repeat;
  }
  .nb .hero.nb-foto-kalender {
    background-image: linear-gradient(90deg, #2D524A 0%, #2D524A 48%, rgba(45,82,74,.55) 64%, rgba(45,82,74,.2) 82%, rgba(45,82,74,.3) 100%), url("/bilder/hero/kalender.webp");
    background-size: cover, auto 112%; background-position: center, right 4% center; background-repeat: no-repeat;
  }
}

/* Laufband: zarte Minze, durchsichtig über dem Foto, Schrift und Stern Eukalyptus */
.nb .our-scrolling-ticker { background: rgba(231,240,235,.72); border-color: rgba(255,255,255,.45); }

/* Nummern (So geht's 01–03, Gestalter 1–5) */
.nb .how-work-step-no { background-color: #E7F0EB; }
.nb .how-work-step-no h3 { color: var(--primary-color); }
.nb .w-title span { background: #E7F0EB; color: var(--primary-color); }
.nb .w-bar i { background: var(--primary-color); }

/* Hinweis-Kästen (Hörprobe Schritt 1, Reinhören Schritt 5) */
.nb .nb-wtry { background: #E7F0EB; }
body.nb { --sun-soft: #E7F0EB; }

/* Gestalter „Weiter“: Eukalyptus mit weißer Schrift (Hauptknopf „Bestellen“ bleibt Honig) */
.nb .w-nav .w-next { background: var(--primary-color); color: #fff; box-shadow: 0 8px 20px -8px rgba(45,82,74,.5); }
.nb .w-nav .w-next:hover { background: #3E7062; color: #fff; }

/* Bewertungen: Szene unter grünem Schleier, Schrift weiß */
.nb .x-rc-slide[data-pic] { background: linear-gradient(165deg, rgba(45,82,74,.86) 0%, rgba(62,112,98,.8) 55%, rgba(123,169,150,.74) 100%), var(--pic) center 30% / cover no-repeat; }
.nb .x-rc-slide[data-pic] blockquote, .nb .x-rc-slide[data-pic] figcaption, .nb .x-rc-slide[data-pic] figcaption b { color: #fff; }
.nb .x-rc-slide[data-pic] figcaption small { color: #E7F0EB; }
.nb .x-rc-slide[data-pic]::after { color: var(--primary-color); background: rgba(231,240,235,.9); }

/* Kalender-Abschnitt: grün statt gelb, wie der Oma-Abschnitt, nur heller */
.nb-feature.nb-foto-kal { background: linear-gradient(165deg, rgba(62,112,98,.92) 0%, rgba(94,140,120,.86) 55%, rgba(123,169,150,.8) 100%), url("/bilder/hero/kalender-mandarine.webp") center 30% / cover no-repeat; }
.nb-feature.nb-foto-kal .nb-feature-price { color: var(--accent-color); }
.nb-feature.nb-foto-kal .nb-feature-price small { color: #E7F0EB; }
/* Computer: Foto als eigene Ebene rechts, links weich ausgeblendet (keine harte Kante, egal wie breit der Bildschirm) */
@media (min-width: 992px) {
  .nb .hero.nb-foto-maedchen, .nb .hero.nb-foto-kalender { background: #2D524A; }
  .nb .hero.nb-foto::before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(62%, 1250px); z-index: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(45,82,74,.55), rgba(45,82,74,.3) 45%, rgba(123,169,150,.25) 100%), var(--hero-pic) center 30% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  }
  .nb .hero.nb-foto-maedchen { --hero-pic: url("/bilder/hero/maedchen.webp"); }
  .nb .hero.nb-foto-kalender { --hero-pic: url("/bilder/hero/kalender.webp"); }
  .nb .hero.nb-foto > .container { position: relative; z-index: 1; }
}

/* Kopf-Vorteile: vier Punkte, auf dem Computer sauber 2 × 2 */
@media (min-width: 992px) {
  .nb .hero-info-list ul { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 28px; row-gap: 10px; }
}

/* Bewertungen auf dem Computer größer */
@media (min-width: 992px) {
  .nb .x-rc { max-width: 1180px; }
  .nb .x-rc-slide { min-height: 480px; padding: 48px 64px; border-radius: 34px; }
  .nb .x-rc blockquote { font-size: 30px; line-height: 1.4; }
  .nb .x-rc figcaption { font-size: 18px; }
  .nb .x-rc-stars { font-size: 34px; }
}

/* Oma- und Kalender-Abschnitt auf dem Computer: Hochkant-Foto als Ebene rechts, weich eingeblendet, Gesicht ganz zu sehen */
@media (min-width: 992px) {
  .nb-feature.nb-foto-oma { background: linear-gradient(165deg, #2D524A 0%, #3E7062 60%, #4A7F6E 100%); }
  .nb-feature.nb-foto-kal { background: linear-gradient(165deg, #3E7062 0%, #4A7F6E 60%, #5E8C78 100%); }
  .nb-feature.nb-foto-oma::before, .nb-feature.nb-foto-kal::before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46%; z-index: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(45,82,74,.4), rgba(45,82,74,.15) 50%), var(--feat-pic) 50% 32% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  }
  .nb-feature.nb-foto-oma { --feat-pic: url("/bilder/hero/oma.webp"); }
  .nb-feature.nb-foto-kal { --feat-pic: url("/bilder/hero/kalender-mandarine.webp"); }
  .nb-feature.nb-foto-oma > *, .nb-feature.nb-foto-kal > * { position: relative; z-index: 1; }
}
@media (min-width: 992px) {
  .nb-feature.nb-foto-oma, .nb-feature.nb-foto-kal { padding-right: 40%; }
}

/* ===== Alle übrigen Seiten im Nebulla-Rahmen (15.11.) ===== */
/* Seiten ohne Kopfbild: Kopfzeile immer grün, Inhalt beginnt darunter */
.nb:not(:has(.hero)):not(:has(.nb-tf-hero)) .nb-top { margin-bottom: 0; background: linear-gradient(100deg, #2D524A 0%, #3E7062 60%, #4A7F6E 100%); }
.nb-plain { padding: 8px 0 72px; }
/* Textseiten (Impressum, AGB, Anleitung …): weiße Karte auf Creme */
.nb-simple { width: calc(100% - 32px); max-width: 780px; margin: 36px auto 72px; padding: clamp(24px, 4vw, 48px); background: #fff; border-radius: 28px; box-shadow: 0 1px 2px rgba(45,82,74,.04), 0 18px 40px -22px rgba(45,82,74,.28); color: var(--text-color); line-height: 1.7; }
.nb-simple h1 { font: 400 clamp(40px, 6vw, 58px)/1.02 var(--accent-font); color: var(--primary-color); margin: 0 0 22px; }
.nb-simple h2 { font: 700 21px/1.3 var(--default-font); color: var(--primary-color); margin: 32px 0 8px; }
.nb-simple h3 { font: 700 18px/1.3 var(--default-font); color: var(--primary-color); margin: 22px 0 6px; }
.nb-simple p, .nb-simple li { margin: 0 0 10px; }
.nb-simple a { color: var(--primary-color); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.nb-simple .btn { display: inline-flex; align-items: center; min-height: 52px; padding: 12px 28px; border-radius: 100px; background: var(--accent-color); color: var(--primary-color); font-weight: 700; text-decoration: none; }
.nb-simple .todo { display: none; }
.nb-simple audio { width: 100%; margin: 8px 0 14px; }
/* Druck (Gutschein-Karte, Rechtstexte): ohne Kopf, Fuß und Knöpfe */
@media print { .nb-top, .nb-menu, .nb-foot, .nb-sticky { display: none !important; } .nb-simple { box-shadow: none; margin: 0; } }

/* Oma-Seite: Kopfbild Oma, zwei Knöpfe */
.nb .hero.nb-foto-oma-hero { background: linear-gradient(180deg, rgba(45,82,74,.55) 0%, rgba(45,82,74,.78) 45%, rgba(45,82,74,.92) 100%), url("/bilder/hero/oma.webp") 65% 12% / cover no-repeat; background-color: #2D524A; }
@media (min-width: 992px) {
  .nb .hero.nb-foto-oma-hero { background: #2D524A; --hero-pic: url("/bilder/hero/oma.webp"); }
  .nb .hero.nb-foto-oma-hero::before { background-position: 0 0, 50% 28%; }
}
.nb .nb-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 18px; }
.nb .nb-ghost { display: inline-flex; align-items: center; min-height: 52px; padding: 12px 24px; border-radius: 100px; border: 2px solid rgba(255,255,255,.7); color: #fff; font-weight: 700; text-decoration: none; }
.nb .nb-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.nb .nb-share { margin: 14px 0 0; }
.nb .nb-share .r-linkbtn { background: none; border: 0; padding: 0; color: #E7F0EB; font: 600 15px var(--default-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nb .hero .r-stars { color: #E7F0EB; margin: 0 0 10px; }
.nb-simple { box-sizing: border-box; overflow-wrap: anywhere; }
body.nb { margin: 0; } body.nb *, body.nb *::before, body.nb *::after { box-sizing: border-box; }
/* Tonie-Finder: „Preis bei Amazon“ in jeder Reihe auf gleicher Höhe, Etiketten in der Palette */
.nb .slot .tag { flex: 1; }
.nb .slot .tag > :nth-last-child(2) { margin-bottom: 12px; }
.nb .slot .tag .buy { margin-top: auto; }
.nb .sticker.xmas { background: var(--primary-color); color: #fff; }
.nb .sticker.new { background: #7BA996; color: #fff; }
/* Umschalter Geschichte / Adventskalender im Gestalter (Oma) */
.nb .w-switch { display: inline-flex; gap: 4px; padding: 4px; margin-top: 14px; border-radius: 100px; background: #E7F0EB; }
.nb .w-switch span, .nb .w-switch a { padding: 9px 18px; border-radius: 100px; font: 700 15px/1.2 var(--default-font); color: var(--primary-color); text-decoration: none; }
.nb .w-switch .on { background: var(--primary-color); color: #fff; }
.nb .nb-tf a.buy { padding: 12px 18px; font-size: 15px; max-width: 100%; }
/* Anlass-Seiten (/geschichte/…) und Anleitungen (/anleitung/…) */
.nb .hero.nb-foto-anlass { background: linear-gradient(180deg, rgba(45,82,74,.62) 0%, rgba(45,82,74,.82) 45%, rgba(45,82,74,.92) 100%), var(--hero-pic) center 30% / cover no-repeat; background-color: #2D524A; }
@media (min-width: 992px) { .nb .hero.nb-foto-anlass { background: #2D524A; } }
.nb .nb-chiplinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nb .nb-chiplinks-left { justify-content: flex-start; }
.nb .nb-chiplinks a { padding: 10px 18px; border-radius: 100px; background: #E7F0EB; color: var(--primary-color); font-weight: 700; font-size: 15px; text-decoration: none; }
.nb .nb-chiplinks a:hover { background: #D6E6DD; }
.nb .nb-kicker { display: inline-block; margin-bottom: 12px; padding: 6px 14px; border-radius: 100px; background: #E7F0EB; color: var(--primary-color); font-weight: 700; font-size: 13px; }
.nb .nb-tipbox { margin-top: 22px; padding: 18px 20px; border-radius: 20px; background: #E7F0EB; }
.nb .nb-tipbox ul { margin: 8px 0 0; padding-left: 20px; }
/* Gruppengeschichte */
.nb .hero.nb-foto-gruppe { background: linear-gradient(180deg, rgba(45,82,74,.55) 0%, rgba(45,82,74,.8) 45%, rgba(45,82,74,.92) 100%), url("/bilder/bewertung/b2.webp") center 35% / cover no-repeat; background-color: #2D524A; }
@media (min-width: 992px) {
  .nb .hero.nb-foto-gruppe { background: #2D524A; --hero-pic: url("/bilder/bewertung/b2.webp"); }
}
[data-gruppe="1"] label[for="pronoun"], [data-gruppe="1"] #pronoun, [data-gruppe="1"] #orderForm details:has(#phonetic), [data-gruppe="1"] .x-listen { display: none !important; }
.nb .nb-groupcount { margin: 8px 2px 4px; font-weight: 600; color: var(--primary-color); }
.nb .nb-groupcount.err { color: #B3261E; }
/* Kopfmenü mit fünf Punkten: einzeilig, Tonie-Finder bei weniger Platz nur im Burger-Menü */
.nb-top nav a { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1360px) { .nb-top nav { gap: 22px; } .nb-top nav a { font-size: 15px; } .nb-top nav a[href="/tonie-finder"] { display: none; } }
/* Kopfzeile neu (15.11.): Logo links, vier kurze Punkte mittig, Knopf und Menü rechts; aktive Seite unterstrichen */
@media (min-width: 992px) {
  .nb-top .container { gap: 24px; }
  .nb-top nav { flex: 1; justify-content: center; gap: 34px; }
  .nb-top nav a { position: relative; font-size: 15.5px; font-weight: 600; opacity: .92; padding: 6px 0; }
  .nb-top nav a:hover { opacity: 1; }
  .nb-top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent-color); transform: scaleX(0); transition: transform .2s ease; }
  .nb-top nav a:hover::after, .nb-top nav a[aria-current="page"]::after { transform: scaleX(1); }
}
@media (min-width: 992px) and (max-width: 1360px) { .nb-top nav { gap: 26px; } .nb-top nav a { font-size: 15px; } }
/* Gestalter: zwei Felder nebeneinander immer auf gleicher Höhe (Beschriftung unten bündig), Hinweise darunter */
@media (min-width: 601px) {
  .nb .w-page .x-row { align-items: start; }
  .nb .w-page .x-row > div > label.x-label-sm { display: flex; align-items: flex-end; min-height: 2.9em; margin-bottom: 6px; }
}
.nb .w-page input[type=text], .nb .w-page input[type=email], .nb .w-page textarea { text-overflow: ellipsis; }
.nb .nb-togroup { margin: 8px 2px 2px; font-size: 14px; color: var(--text-color); }
.nb .nb-togroup a { color: var(--primary-color); font-weight: 700; text-underline-offset: 3px; }