/* ══════════════════════════════════════════════════════════════════════════
   Notenheld-Website, Umbau 01.10.2026 (Mike: „exakt dasselbe wie bei Kaderheld")
   Startseite, Seitenkopf der Unterseiten, Bausteine fuer die Inhalte aus der
   Datenbank, Nachbarseiten und Abschluss. Wird nach custom.css geladen und
   gewinnt damit gegen die aelteren Regeln dort.

   Farben: Marine (--nh-dunkel) als Grund, das Markenblau (--nh-aktion) fuer
   Knoepfe und Haken, ein warmes Gold (--nh-akzent) fuer Labels und Haken auf
   dunklem Grund, ein kuehles Creme (--nh-creme) fuer ruhige Flaechen.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --nh-dunkel: #0d1f3c;
    --nh-dunkel-2: #0a3060;
    --nh-nacht: #06101f;
    --nh-aktion: #0079fc;
    --nh-aktion-d: #0063cf;
    --nh-akzent: #ffc857;
    --nh-creme: #f2f6fc;
    --nh-text: #1f2a3a;
    --nh-grau: #55606c;
}

body { overflow-wrap: break-word; }

/* ── Kopfzeile ───────────────────────────────────────────────────────────
   Topbar ist weg, die Menuezeile traegt immer den dunklen Grund (auch beim
   Mitscrollen). Sechs Menuepunkte plus Anmelden und Startknopf muessen bei
   jeder Desktop-Breite in EINE Zeile passen, sonst bricht das Menue unter
   das Logo. */
.header .megamenu,
.header nav.mega-menu,
.mega-menu .menu-list-items,
.mega-menu.desktopTopFixed .menu-list-items,
.header-transparent-desktop .menu-list-items,
.header .menu-list-items { background: var(--nh-dunkel) !important; }
.header-transparent-desktop::before { display: none; }
.header-transparent-desktop .menu-links > li.active > a,
.header-transparent-desktop .menu-links > li:hover > a { color: var(--nh-akzent) !important; }
.menu-links > li > a { letter-spacing: 0 !important; text-transform: none !important; font-weight: 600 !important; }

.menu-links > li.nh-nav-login > a,
.header-transparent-desktop .menu-links > li.nh-nav-login > a {
    border: 1.5px solid rgba(255,255,255,.55); border-radius: 8px; padding: 8px 13px !important;
    line-height: 1.2 !important; opacity: 1; margin-right: 4px; text-shadow: none !important;
}
.menu-links > li.nh-nav-login:hover > a,
.header-transparent-desktop .menu-links > li.nh-nav-login:hover > a { background: rgba(255,255,255,.12) !important; color: #fff !important; border-color: #fff; }
.menu-links > li.nh-nav-start > a.nh-nav-button,
.header-transparent-desktop .menu-links > li.nh-nav-start > a.nh-nav-button {
    background: var(--nh-aktion) !important; color: #fff !important; border-radius: 8px;
    padding: 9px 16px !important; margin-left: 6px; line-height: 1.2 !important; text-shadow: none !important;
}
.menu-links > li.nh-nav-start:hover > a.nh-nav-button,
.header-transparent-desktop .menu-links > li.nh-nav-start:hover > a.nh-nav-button { background: #fff !important; color: var(--nh-dunkel) !important; }

@media (min-width: 992px) {
    .menu-links > li.nh-nav-login { margin-left: 10px; }
    .menu-logo > li > a { display: inline-flex !important; align-items: center; gap: 6px; }
    .menu-logo img#logo_text { width: auto !important; max-width: none !important; height: 42px !important; }
    .menu-logo img#logo_img { width: auto !important; height: 42px !important; }
    .mega-menu.desktopTopFixed .menu-logo > li > a { padding: 4px 0 !important; }
    .mega-menu.desktopTopFixed .menu-logo img#logo_img { height: 30px !important; width: auto !important; margin: 0 !important; }
    .mega-menu.desktopTopFixed .menu-logo img#logo_text { height: 30px !important; width: auto !important; margin: 0 !important; }
    .mega-menu.desktopTopFixed,
    .mega-menu.desktopTopFixed .menu-list-items { background: var(--nh-dunkel) !important; min-height: 44px; }
    .mega-menu.desktopTopFixed .menu-list-items::after { content: ""; display: table; clear: both; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .menu-links > li > a .fa-indicator { display: none !important; }
    .menu-links > li > a { padding-left: 5px !important; padding-right: 5px !important; font-size: 11px !important; }
    .menu-links > li.nh-nav-start > a.nh-nav-button { padding: 7px 10px !important; margin-left: 0; }
    .menu-links > li.nh-nav-login > a { padding: 7px 9px !important; }
    .menu-logo img#logo_text { height: 36px !important; }
}
/* Ab 1200 px ist der Container immer 1140 px breit, also bleibt die Zeile bei jeder Breite gleich eng. */
@media (min-width: 1200px) {
    .menu-links > li > a .fa-indicator { display: none !important; }
    .menu-links > li > a { padding-left: 6px !important; padding-right: 6px !important; font-size: 12px !important; }
    .menu-links > li.nh-nav-start > a.nh-nav-button { padding: 8px 12px !important; }
    .menu-logo img#logo_text { height: 40px !important; }
}
@media (max-width: 991px) {
    .menu-links > li.nh-nav-login > a { display: inline-block; margin: 10px 0 0; border-color: var(--nh-dunkel); color: var(--nh-dunkel) !important; }
    .menu-links > li.nh-nav-start > a.nh-nav-button { display: inline-block; margin: 10px 0 14px; }
}

/* ── Knoepfe und Ueberschriften ─────────────────────────────────────────── */
.btn-primary { box-shadow: 0 10px 24px -12px rgba(0,99,207,.7); transition: transform .15s, box-shadow .15s, background-color .15s; border-radius: 8px; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(0,99,207,.8); }
.btn-outline-primary { border-radius: 8px; }
.nh-h2 { font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.15; color: var(--nh-dunkel); }
.nh-sub { color: var(--nh-grau); font-size: 1.1rem; max-width: 62ch; }
.nh-mehr-link { font-weight: 600; color: var(--nh-aktion-d); text-decoration: none; }
.nh-mehr-link:hover { color: var(--nh-dunkel); text-decoration: underline; }

/* Einblenden beim Scrollen: nur mit JavaScript (html.nh-js), sonst steht alles sofort da. */
html.nh-js .nh-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
html.nh-js .nh-reveal.nh-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.nh-js .nh-reveal { opacity: 1; transform: none; transition: none; } }

/* Einstieg: Hero-Text, Knoepfe und Telefone kommen nacheinander herein. */
@keyframes nh-ein-auf { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nh-ein-phones { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
.nh-ein { animation: nh-ein-auf .7s cubic-bezier(.2,.7,.2,1) both; }
.nh-ein-1 { animation-delay: .05s; }
.nh-ein-2 { animation-delay: .18s; }
.nh-ein-3 { animation-delay: .30s; }
.nh-ein-4 { animation-delay: .42s; }
.nh-phones.nh-ein { animation: nh-ein-phones .9s cubic-bezier(.2,.7,.2,1) .25s both; }
@media (prefers-reduced-motion: reduce) { .nh-ein, .nh-phones.nh-ein { animation: none; } }

/* ── Hero mit Foto ───────────────────────────────────────────────────────
   Ein Klassenzimmer-Foto bildschirmfuellend, die Headline in Versalien, rechts
   zwei schwebende Telefone: vorn die App mit durchlaufenden Bildschirmen,
   hinten das Schuelerportal. Foto: Pexels, siehe images/notenheld/hero/QUELLE.md */
.nh-hero.nh-hero-foto {
    background: var(--nh-nacht); padding: 140px 0 64px; min-height: 640px;
    display: flex; align-items: center; position: relative; overflow: hidden; color: #fff;
}
.nh-hero-bild { position: absolute; inset: 0; overflow: hidden; }
.nh-hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.nh-hero-schleier {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(6,16,31,.94) 0%, rgba(6,16,31,.82) 38%, rgba(6,16,31,.4) 62%, rgba(6,16,31,.25) 100%),
        linear-gradient(180deg, rgba(6,16,31,.55) 0%, rgba(6,16,31,0) 30%, rgba(6,16,31,.2) 75%, rgba(6,16,31,.92) 100%),
        radial-gradient(700px 400px at 85% 100%, rgba(255,200,87,.16), rgba(255,200,87,0) 60%);
}
.nh-hero-foto > .container { position: relative; z-index: 1; }
.nh-hero-label {
    font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
    color: var(--nh-akzent); margin: 0 0 14px;
}
.nh-hero-foto .nh-hero-h {
    font-family: Dosis, Poppins, sans-serif; font-weight: 800; text-transform: uppercase; color: #fff;
    font-size: clamp(2.8rem, 5.6vw, 4.8rem); line-height: .96; letter-spacing: .005em; max-width: 11ch;
    text-shadow: 0 2px 24px rgba(0,0,0,.45); margin: 0 0 18px; text-wrap: balance;
}
.nh-hero-foto .nh-hero-sub { font-size: 1.12rem; max-width: 34rem; color: rgba(255,255,255,.9); line-height: 1.65; margin-bottom: 1.4rem; }
.nh-hero-foto .btn-outline-primary { border-color: rgba(255,255,255,.7) !important; color: #fff !important; background: transparent !important; }
.nh-hero-foto .btn-outline-primary:hover { background: rgba(255,255,255,.12) !important; border-color: #fff !important; }
.nh-hero-fakten { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; color: rgba(255,255,255,.8); }
.nh-hero-fakten li::before { content: "\2713"; color: var(--nh-akzent); font-weight: 700; margin-right: 6px; }

/* Telefone: schweben leicht, das vordere versetzt */
.nh-phones { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 0; }
.nh-phone {
    width: 250px; flex: 0 0 auto; background: #0b1a30; border-radius: 34px; padding: 10px;
    box-shadow: 0 40px 70px -28px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.08);
}
.nh-phone img { display: block; width: 100%; height: auto; border-radius: 26px; }
.nh-phone--hinten { z-index: 0; opacity: .96; animation: nh-float-hinten 9s ease-in-out infinite; transform: translateX(28px) translateY(34px) rotate(-5deg) scale(.88); }
.nh-phone--vorn { z-index: 1; animation: nh-float-vorn 7s ease-in-out infinite; transform: translateX(-28px) rotate(3deg); }
@keyframes nh-float-vorn { 0%, 100% { transform: translateX(-28px) translateY(0) rotate(3deg); } 50% { transform: translateX(-28px) translateY(-10px) rotate(3deg); } }
@keyframes nh-float-hinten { 0%, 100% { transform: translateX(28px) translateY(34px) rotate(-5deg) scale(.88); } 50% { transform: translateX(28px) translateY(24px) rotate(-5deg) scale(.88); } }
@media (prefers-reduced-motion: reduce) { .nh-phone--vorn, .nh-phone--hinten { animation: none; } }
/* Vorn: die App, Bildschirm fuer Bildschirm (Hochformat 9:19), hinten ein Standbild */
.nh-phone--app { position: relative; aspect-ratio: 9 / 19; }
.nh-phone--app .nh-reelclip {
    position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
    object-fit: cover; object-position: top; border-radius: 26px; opacity: 0; transition: opacity .5s ease; background: #fff;
}
.nh-phone--app .nh-reelclip.ist-aktiv { opacity: 1; }
.nh-phone--bild { aspect-ratio: 9 / 19; position: relative; }
.nh-phone--bild img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; object-position: top; }

/* Desktop: das Foto ist breiter als der Hero und nach links geschoben, damit das Motiv
   rechts NEBEN den Telefonen steht und nicht dahinter. */
@media (min-width: 992px) {
    .nh-hero-bild img { width: 100%; left: 0; position: absolute; height: 100%; object-position: 50% 45%; filter: none; }
    .nh-hero-schleier { background: linear-gradient(90deg, rgba(6,16,31,.96) 0%, rgba(6,16,31,.9) 34%, rgba(6,16,31,.42) 52%, rgba(6,16,31,.18) 70%, rgba(6,16,31,.3) 100%), linear-gradient(180deg, rgba(6,16,31,.5) 0%, rgba(6,16,31,.05) 30%, rgba(6,16,31,.15) 75%, rgba(6,16,31,.9) 100%); }
    /* Telefone ganz rechts, damit die Lehrerin ZWISCHEN Text und Telefonen steht (nichts verdeckt, nichts angeschnitten) */
    .nh-hero-foto .nh-phones { justify-content: flex-end; margin-right: -30px; }
    .nh-hero-foto .nh-phone { width: 224px; }
}
@media (min-width: 1600px) { .nh-hero-foto .nh-phone { width: 236px; } }
@media (max-width: 991px) {
    .nh-hero.nh-hero-foto { padding: 44px 0 40px; min-height: 0; }
    .nh-hero-bild img { object-position: 60% 45%; }
    .nh-hero-schleier { background: linear-gradient(180deg, rgba(6,16,31,.9) 0%, rgba(6,16,31,.72) 45%, rgba(6,16,31,.55) 70%, rgba(6,16,31,.95) 100%); }
    .nh-hero-foto .nh-hero-h { font-size: clamp(2.4rem, 11vw, 3.4rem); max-width: none; }
    .nh-hero-foto .nh-hero-sub { font-size: 1.02rem; }
    .nh-hero-foto .nh-phones { margin-top: 32px; }
    .nh-hero-foto .nh-phone { width: 200px; }
    .nh-hero-fakten { justify-content: center; }
    /* Knoepfe nebeneinander und mittig (Mike) */
    .nh-hero-foto .nh-hero-copy .d-flex { justify-content: center; gap: 10px !important; flex-wrap: nowrap !important; }
    .nh-hero-foto .nh-hero-copy .btn-lg { padding: 11px 14px; font-size: .95rem; white-space: nowrap; }
}
@media (max-width: 480px) {
    .nh-hero-foto .nh-phone { width: 170px; }
    .nh-phone--hinten { transform: translateX(16px) translateY(26px) rotate(-5deg) scale(.88); }
    .nh-phone--vorn { transform: translateX(-16px) rotate(3deg); }
    @keyframes nh-float-vorn { 0%, 100% { transform: translateX(-16px) translateY(0) rotate(3deg); } 50% { transform: translateX(-16px) translateY(-8px) rotate(3deg); } }
    @keyframes nh-float-hinten { 0%, 100% { transform: translateX(16px) translateY(26px) rotate(-5deg) scale(.88); } 50% { transform: translateX(16px) translateY(18px) rotate(-5deg) scale(.88); } }
}
@media (max-width: 400px) { .nh-hero-foto .nh-hero-copy .btn-lg { padding: 10px 11px; font-size: .86rem; } .nh-hero-foto .nh-hero-copy .d-flex { gap: 8px !important; } }

/* Notebook im Hero (statt Telefone): Deckel mit dunklem Rand und Kamera, Bildschirm 16:10, Unterteil mit Lippe
   und Scharnier. Leicht nach links gedreht und schwebend. Auf dem Bildschirm laufen die PC-Ansichten der App durch. */
.nh-laptop { position: relative; width: 100%; max-width: 640px; margin-left: auto; perspective: 1600px; filter: drop-shadow(0 40px 50px rgba(0,0,0,.55)); }
.nh-laptop-deckel {
    position: relative; background: linear-gradient(180deg, #2a3140, #171c27); border-radius: 18px 18px 4px 4px; padding: 16px 16px 22px;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 5px #0d1118;
    transform: rotateY(-6deg) rotateX(2deg); transform-origin: 50% 100%;
}
.nh-laptop-deckel::before { content: ""; position: absolute; top: 7px; left: 50%; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: #0b0f16; box-shadow: inset 0 0 0 1.5px #3a4252, 0 0 0 1px rgba(255,255,255,.08); }
.nh-laptop-bild { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #fff; }
.nh-laptop-bild .nh-reelclip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; transition: opacity .6s ease; }
.nh-laptop-bild .nh-reelclip.ist-aktiv { opacity: 1; }
.nh-laptop-fuss {
    position: relative; height: 24px; margin: 0 -5%; border-radius: 3px 3px 18px 18px;
    background: linear-gradient(180deg, #eef1f6 0%, #cfd5df 50%, #9aa3b2 100%);
    box-shadow: 0 10px 20px -8px rgba(0,0,0,.6), inset 0 -3px 0 rgba(0,0,0,.14), inset 0 2px 0 rgba(255,255,255,.6);
}
.nh-laptop-fuss::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 7px; margin-left: -8%; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #a9b1be, #8a94a4); }
.nh-laptop-fuss::after { content: ""; position: absolute; left: 10%; right: 10%; top: -3px; height: 3px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.35) 20%, rgba(0,0,0,.35) 80%, rgba(0,0,0,0)); }
.nh-laptop { animation: nh-float-laptop 8s ease-in-out infinite; }
@keyframes nh-float-laptop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.nh-laptop.nh-ein { animation: nh-ein-phones .9s cubic-bezier(.2,.7,.2,1) .25s both, nh-float-laptop 8s ease-in-out 1.2s infinite; }
@media (prefers-reduced-motion: reduce) { .nh-laptop, .nh-laptop.nh-ein { animation: none; } }
@media (min-width: 992px) { .nh-hero-foto .nh-laptop { margin-right: -70px; max-width: 590px; } .nh-hero-foto .nh-hero-copy .d-flex { flex-wrap: nowrap !important; gap: 10px !important; } .nh-hero-foto .nh-hero-copy .btn-lg { padding: 11px 15px; font-size: .98rem; white-space: nowrap; } }
@media (min-width: 1600px) { .nh-hero-foto .nh-laptop { margin-right: -60px; max-width: 620px; } }
@media (max-width: 991px) { .nh-hero-foto .nh-laptop { margin: 36px auto 0; max-width: 100%; } .nh-laptop-deckel { transform: none; padding: 12px 12px 14px; } .nh-laptop-fuss { margin: 0 -3%; } }

/* ── Vertrauensband ─────────────────────────────────────────────────────── */
.nh-trust { background: var(--nh-creme); border-bottom: 0; padding: 20px 0; }
.nh-trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; }
.nh-trust li { font-size: .92rem; font-weight: 600; color: var(--nh-dunkel); display: inline-flex; align-items: center; gap: 8px; }
.nh-trust li i { color: var(--nh-aktion-d); }
@media (max-width: 767px) { .nh-trust ul { gap: 6px 18px; } .nh-trust li { font-size: .82rem; } }

/* ── Rollen-Kacheln: gleichzeitig Navigation durch die Seite ───────────── */
.nh-zielgruppen-band { background: #fff; padding: 56px 0 24px; }
.nh-zielgruppen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.nh-zielgruppe {
    display: flex; flex-direction: column; min-width: 0; padding: 22px 20px 20px; border-radius: 16px; background: #fff;
    box-shadow: 0 8px 24px rgba(13,31,60,.08); position: relative; color: var(--nh-text); text-decoration: none;
    transition: transform .18s, box-shadow .18s;
}
.nh-zielgruppe:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(13,31,60,.14); color: var(--nh-text); }
.nh-zielgruppe::after { content: "\2192"; position: absolute; right: 18px; top: 20px; color: var(--nh-aktion-d); font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .18s, transform .18s; }
.nh-zielgruppe:hover::after { opacity: 1; transform: none; }
.nh-zielgruppe-icon {
    display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px;
    background: linear-gradient(135deg, var(--nh-dunkel), var(--nh-dunkel-2)); color: #fff; font-size: 20px;
    box-shadow: 0 8px 16px -8px rgba(13,31,60,.55); transition: background .2s, transform .2s;
}
.nh-zielgruppe:hover .nh-zielgruppe-icon { background: linear-gradient(135deg, var(--nh-aktion), #5aa8ff); transform: translateY(-2px); }
.nh-zielgruppe-titel { display: block; font-weight: 700; color: var(--nh-dunkel); margin: 14px 0 4px; font-size: 1rem; }
.nh-zielgruppe-text { display: block; font-size: .88rem; line-height: 1.5; color: var(--nh-grau); }
@media (max-width: 1199px) { .nh-zielgruppen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .nh-zielgruppen-band { padding: 28px 0 8px; }
    .nh-zielgruppen { display: flex; overflow-x: auto; scroll-snap-type: none; gap: 12px; padding: 4px 4px 16px; margin: 0 -4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nh-zielgruppen::-webkit-scrollbar { display: none; }
    .nh-zielgruppen > .nh-zielgruppe { flex: 0 0 72%; max-width: 260px; padding: 18px 16px 16px; }
    .nh-zielgruppen.nh-laeuft { scroll-behavior: auto; }
}

/* ── Zick-Zack-Abschnitte (Startseite und Unterseiten) ─────────────────── */
.nh-gruppe { scroll-margin-top: 90px; }
.nh-gruppe.page-section-ptb { padding-top: 72px; padding-bottom: 72px; }
.nh-label {
    display: inline-block; background: var(--nh-dunkel); color: #fff; font-weight: 700; font-size: .74rem;
    letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
}
.nh-label i { color: var(--nh-akzent); }
.nh-nutzen { list-style: none; padding: 0; margin: 0 0 26px; }
.nh-nutzen li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(13,31,60,.08); line-height: 1.6; }
.nh-nutzen li:last-child { border-bottom: none; }
.nh-nutzen li > i { margin-top: 6px; flex-shrink: 0; }
.nh-nutzen strong { color: var(--nh-dunkel); }
.nh-haken { color: var(--nh-aktion); }
.nh-schuss { border: 1px solid rgba(13,31,60,.12); border-radius: 10px; box-shadow: 0 24px 50px -24px rgba(13,31,60,.35); }
.nh-zoom { cursor: zoom-in; transition: transform .18s, box-shadow .18s; }
.nh-zoom:hover, .nh-zoom:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(13,31,60,.2); }
.nh-zoom:focus-visible { outline: 3px solid var(--nh-aktion); outline-offset: 3px; }
.nh-bildpaar, .nh-thumbs { display: grid; gap: 14px; margin-top: 14px; }
.nh-bildpaar { grid-template-columns: repeat(2, 1fr); }
.nh-thumbs { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.nh-handy-paar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.nh-bildpaar figure, .nh-thumbs figure, .nh-handy-paar figure { margin: 0; }
.nh-bildpaar figcaption, .nh-thumbs figcaption, .nh-handy-paar figcaption { margin-top: 7px; font-size: .82rem; line-height: 1.35; color: var(--nh-grau); text-align: center; }
.nh-handy-paar img { border-radius: 14px; }
.figure { max-width: 100%; }
figure img { max-width: 100% !important; height: auto; }
@media (max-width: 991px) {
    .nh-gruppe.page-section-ptb { padding-top: 48px; padding-bottom: 40px; }
    .nh-gruppe .col-lg-5, .nh-gruppe .col-lg-6, .nh-gruppe .col-lg-7 { margin-top: 0 !important; }
    .nh-gruppe .row > [class*="col-"] + [class*="col-"] { margin-top: 24px !important; }
}
@media (max-width: 575.98px) { .nh-thumbs { gap: 8px; } .nh-thumbs figcaption { font-size: .74rem; } }

/* ── Karten (Querschnitt) ───────────────────────────────────────────────── */
.nh-karte { border: 1px solid rgba(13,31,60,.1); border-radius: 14px; padding: 26px; background: #fff; transition: transform .18s, box-shadow .18s, border-color .18s; }
.nh-karte:hover { transform: translateY(-3px); border-color: rgba(0,121,252,.35); box-shadow: 0 10px 28px rgba(13,31,60,.1); }
.nh-karte i { color: var(--nh-aktion); font-size: 30px; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--nh-creme); }
.nh-karte h5 { font-weight: 700; min-height: 0; font-size: 1.05rem; }

/* ── Dunkles Band (z. B. Datenschutz) ──────────────────────────────────── */
.nh-band-ruhig {
    position: relative; color: #fff;
    background: radial-gradient(800px 420px at 15% 110%, rgba(255,200,87,.22), rgba(255,200,87,0) 60%), linear-gradient(135deg, #0a1a33, var(--nh-dunkel) 55%, var(--nh-dunkel-2));
}
.nh-band-ruhig p, .nh-band-ruhig li, .nh-band-ruhig strong, .nh-band-ruhig h2, .nh-band-ruhig h3 { color: #fff; }
.nh-band-ruhig p.lead { color: rgba(255,255,255,.88); }
.nh-band-ruhig .nh-dunkelkarte { height: 100%; }

/* ── Preis-Teaser ───────────────────────────────────────────────────────── */
.nh-preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.nh-preis { background: #fff; border: 1px solid rgba(13,31,60,.12); border-radius: 14px; padding: 22px 22px 20px; transition: transform .18s, box-shadow .18s; }
.nh-preis:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -20px rgba(13,31,60,.35); }
.nh-preis.nh-preis--hervor { border: 2px solid var(--nh-aktion); box-shadow: 0 20px 40px -24px rgba(0,121,252,.4); }
.nh-preis h3 { font-size: 1.15rem; margin: 0 0 4px; }
.nh-preis .nh-preis-fuer { color: var(--nh-grau); font-size: .88rem; margin: 0 0 12px; }
.nh-preis .nh-preis-betrag { font: 800 2rem/1 Montserrat, sans-serif; letter-spacing: -.02em; color: var(--nh-dunkel); }
.nh-preis .nh-preis-betrag span { font: 400 .85rem Poppins, sans-serif; color: var(--nh-grau); margin-left: 4px; }
.nh-preis ul { list-style: none; margin: 14px 0 0; padding: 0; font-size: .92rem; }
.nh-preis li { padding: 4px 0 4px 22px; position: relative; }
.nh-preis li::before { content: "\2713"; position: absolute; left: 0; color: var(--nh-aktion-d); font-weight: 700; }
@media (max-width: 991px) { .nh-preise { grid-template-columns: 1fr; } }

/* ── Abschluss: dunkle Flaeche mit warmem Schein, ein Knopf ─────────────── */
.nh-abschluss {
    background: radial-gradient(700px 360px at 80% 120%, rgba(255,200,87,.3), rgba(255,200,87,0) 60%), linear-gradient(135deg, #0a1a33, var(--nh-dunkel) 60%, var(--nh-dunkel-2));
    color: #fff;
}
.nh-abschluss h2 { color: #fff; }
.nh-abschluss p, .nh-abschluss .lead { color: rgba(255,255,255,.86); }
.nh-abschluss .btn-outline-primary { border-color: rgba(255,255,255,.7) !important; color: #fff !important; background: transparent !important; }
.nh-abschluss .btn-outline-primary:hover { background: rgba(255,255,255,.12) !important; border-color: #fff !important; }
.nh-trial-cta.nh-abschluss { margin-bottom: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Unterseiten: derselbe Rahmen wie die Startseite
   ══════════════════════════════════════════════════════════════════════════ */

/* Seitentitel: Webster schreibt jedes Wort gross (capitalize), im Deutschen falsch. */
.page-title h1, .page-title .page-title-name p,
.page-title .page-breadcrumb li, .page-title .page-breadcrumb li a, .page-title .page-breadcrumb li span { text-transform: none !important; }

/* Seitenkopf: Foto auf eigener Ebene (::after), Schleier nur links ueber dem Text (::before).
   Hoch genug, dass das Motiv ganz im Bild ist (Mike: nichts Angeschnittenes). */
.page-title.nh-hero-bg, .page-title.nh-hero-bg.nh-seitenkopf {
    background: var(--nh-nacht) !important; background-image: none !important;
    padding: 120px 0 56px !important; min-height: 460px; display: flex; align-items: center;
    position: relative; overflow: hidden;
}
.page-title.nh-hero-bg::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("../images/notenheld/hero/seminarraum-1280.jpg") 50% 45% / cover no-repeat;
    filter: none;
}
.page-title.nh-hero-bg::before {
    content: ""; display: block; position: absolute; inset: 0; z-index: 1; backdrop-filter: none; -webkit-backdrop-filter: none;
    background:
        linear-gradient(90deg, rgba(6,16,31,.92) 0%, rgba(6,16,31,.8) 40%, rgba(6,16,31,.3) 62%, rgba(6,16,31,.05) 80%),
        linear-gradient(180deg, rgba(6,16,31,.25) 0%, rgba(6,16,31,0) 40%, rgba(6,16,31,.55) 100%) !important;
}
.page-title.nh-hero-bg > .container { position: relative; z-index: 2; width: 100%; }
.page-title.nh-hero-bg .nh-hero-label { margin: 0 0 10px; }
.page-title.nh-hero-bg .page-title-name { width: 100%; display: block; }
.page-title.nh-hero-bg h1 {
    font-family: Dosis, Poppins, sans-serif; font-weight: 800; text-transform: uppercase !important; color: #fff;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1; letter-spacing: .005em; text-wrap: balance;
    text-shadow: 0 2px 20px rgba(0,0,0,.4); margin: 0 0 8px;
}
.page-title.nh-hero-bg .page-title-name p { color: rgba(255,255,255,.88); font-size: 1.02rem; line-height: 1.6; max-width: 600px; margin: 0; }
.page-title.nh-hero-bg .page-breadcrumb { float: none; width: auto; margin-top: 12px; padding: 0; font-size: .82rem; text-align: left !important; display: block; }
.page-title.nh-hero-bg .page-breadcrumb li, .page-title.nh-hero-bg .page-breadcrumb li a, .page-title.nh-hero-bg .page-breadcrumb li span { color: rgba(255,255,255,.6); }
.page-title.nh-hero-bg .page-breadcrumb li a:hover { color: #fff; }
@media (min-width: 1600px) { .page-title.nh-hero-bg::after { background-position: 50% 45%; } }
@media (max-width: 991px) {
    .page-title.nh-hero-bg, .page-title.nh-hero-bg.nh-seitenkopf { padding: 36px 0 32px !important; min-height: 420px; }
    .page-title.nh-hero-bg::after { background-image: url("../images/notenheld/hero/seminarraum-800.jpg"); background-size: cover; background-position: 60% 45%; filter: none; }
    .page-title.nh-hero-bg::before { background: linear-gradient(90deg, rgba(6,16,31,.78) 0%, rgba(6,16,31,.55) 55%, rgba(6,16,31,.15) 100%), linear-gradient(180deg, rgba(6,16,31,.35) 0%, rgba(6,16,31,.1) 45%, rgba(6,16,31,.85) 100%) !important; }
    .page-title.nh-hero-bg h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
    .page-title.nh-hero-bg h1, .page-title.nh-hero-bg .page-title-name p, .page-title.nh-hero-bg .nh-hero-label { text-shadow: 0 1px 12px rgba(0,0,0,.7); }
    .page-title.nh-hero-bg .page-title-name p { font-size: 1rem; }
    .page-title.nh-hero-bg .page-breadcrumb { display: none !important; }
}

/* ── Inhalt aus der Datenbank ───────────────────────────────────────────── */
.nh-beitrag { padding-top: 56px; padding-bottom: 40px; }
.nh-beitrag .container.py-5, .nh-beitrag .container.py-4 { padding: 0 !important; }
.nh-beitrag .col-lg-12 { font-size: 1.04rem; line-height: 1.72; color: #2b3540; }
.nh-beitrag p { margin-bottom: 1rem; }
.nh-beitrag a:not(.btn):not(.button):not(.accordion-button) { color: var(--nh-aktion-d); font-weight: 600; text-decoration: none; }
.nh-beitrag a:not(.btn):not(.button):not(.accordion-button):hover { text-decoration: underline; }
.nh-beitrag h2, .nh-beitrag h2.h4 {
    font-family: Poppins, sans-serif; font-weight: 800 !important; font-size: 1.5rem !important; letter-spacing: -.01em; line-height: 1.2;
    color: var(--nh-dunkel) !important; margin: 2.8rem 0 1rem !important;
}
.nh-beitrag h2::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--nh-aktion); margin-bottom: 12px; }
.nh-beitrag h2.accordion-header { margin: 0 !important; font-size: inherit !important; line-height: inherit; }
.nh-beitrag h2.accordion-header::before { display: none; }
.nh-beitrag h3, .nh-beitrag h3.h6 { font-weight: 700 !important; font-size: 1.12rem !important; color: var(--nh-dunkel); margin: 1.8rem 0 .6rem; }
.nh-beitrag h4 { font-size: 1.05rem; font-weight: 700; color: var(--nh-dunkel); }
.nh-beitrag .border.rounded, .nh-beitrag .border.rounded.p-3, .nh-beitrag .bg-light.rounded {
    background: var(--nh-creme) !important; border: 0 !important; border-radius: 14px !important; padding: 20px 22px !important;
}
.nh-beitrag .border.rounded h6, .nh-beitrag .border.rounded .h6, .nh-beitrag .border.rounded h5 { color: var(--nh-dunkel) !important; font-weight: 700; font-size: 1.02rem; margin-bottom: 6px; }
.nh-beitrag .text-primary { color: var(--nh-dunkel) !important; }
.nh-beitrag .border-start.border-4, .nh-beitrag .alert { background: var(--nh-creme); border: 0; border-left: 4px solid var(--nh-aktion) !important; border-radius: 0 12px 12px 0; padding: 14px 18px; }
.nh-beitrag figure.figure { background: var(--nh-creme); border-radius: 18px; padding: 28px 20px 18px; margin: 2rem 0 !important; width: 100%; }
.nh-beitrag figure.figure img { max-height: 520px; width: auto !important; max-width: 100%; border-radius: 14px; box-shadow: 0 24px 50px -24px rgba(13,31,60,.4); }
.nh-beitrag .figure-caption { font-size: .88rem; color: var(--nh-grau); margin-top: 12px; }
.nh-beitrag .table { font-size: .98rem; }
.nh-beitrag .table th { color: var(--nh-grau); font-weight: 500; }
.nh-beitrag .table td, .nh-beitrag .table th { border-color: rgba(13,31,60,.12); padding: .55rem .6rem; }
.nh-beitrag .table-responsive { background: #fff; border: 1px solid rgba(13,31,60,.12); border-radius: 12px; padding: 6px 12px; }
.nh-beitrag .badge.bg-light { background: var(--nh-creme) !important; color: var(--nh-dunkel) !important; border: 0 !important; font-weight: 500; padding: 5px 9px; }
.nh-beitrag .badge.bg-secondary { background: var(--nh-dunkel) !important; }
.nh-beitrag ul:not(.page-breadcrumb) li, .nh-beitrag ol li { margin-bottom: .35rem; }
.nh-beitrag ol { padding-left: 1.3rem; }
.nh-beitrag ol li::marker { font-weight: 700; color: var(--nh-aktion-d); }
.nh-beitrag .accordion { margin-top: .5rem; }
.nh-beitrag .accordion-item { border: 1px solid rgba(13,31,60,.12) !important; border-radius: 12px !important; margin-bottom: 8px; overflow: hidden; background: #fff; }
.nh-beitrag .accordion-button { font-weight: 600; color: var(--nh-dunkel); background: #fff; padding: 14px 18px; font-size: 1rem; box-shadow: none !important; }
.nh-beitrag .accordion-button:not(.collapsed) { background: var(--nh-creme); color: var(--nh-dunkel); }
.nh-beitrag .accordion-body { font-size: .98rem !important; color: #3d4752; padding: 14px 18px 18px; }
.nh-beitrag .btn-primary, .nh-beitrag a.button { border-radius: 8px; }

/* Bausteine der neu geschriebenen Seiten (docs/texte): Zick-Zack-Bloecke, Baender, FAQ */
.nh-seite { font-size: 1.04rem; line-height: 1.72; color: #2b3540; }
.nh-seite .nh-lead { font-size: 1.22rem; line-height: 1.6; color: #3d4752; max-width: 62ch; margin: 0 auto 2.4rem; text-align: center; }
.nh-seite .lead { font-size: 1.12rem; color: #3d4752; }
.nh-beitrag .nh-seite h2.nh-h2 { font-size: 1.9rem !important; margin: 12px 0 10px !important; }
.nh-beitrag .nh-seite h2.nh-h2::before { display: none; }
.nh-block { margin: 56px 0 24px; }
.nh-seite .nh-block--erster { margin-top: 8px; }
.nh-seite .nh-block, .nh-seite .nh-band .row { row-gap: 24px; }
.nh-band { position: relative; margin: 48px calc(50% - 50vw); padding: 64px calc(50vw - 50%) 56px; }
.nh-band--creme { background: var(--nh-creme); }
.nh-band--dunkel { background: radial-gradient(700px 360px at 85% 110%, rgba(255,200,87,.25), rgba(255,200,87,0) 60%), linear-gradient(135deg, #0a1a33, var(--nh-dunkel) 60%, var(--nh-dunkel-2)); color: #fff; }
.nh-beitrag .nh-band--dunkel h2.nh-h2 { color: #fff !important; margin-top: 0 !important; }
.nh-band--dunkel p { color: rgba(255,255,255,.85); }
.nh-dunkelkarte { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.nh-dunkelkarte i { font-size: 24px; color: var(--nh-akzent); }
.nh-dunkelkarte strong { color: #fff; font-size: 1.05rem; }
.nh-dunkelkarte span { color: rgba(255,255,255,.8); font-size: .95rem; line-height: 1.55; }
.nh-stufen { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.nh-stufen li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 18px 18px; border-radius: 14px; background: var(--nh-creme); margin: 0 !important; }
.nh-stufe-nr { position: absolute; top: -12px; left: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--nh-aktion); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; }
.nh-stufen strong { color: var(--nh-dunkel); font-size: 1rem; line-height: 1.3; }
.nh-stufen li > span:last-child { font-size: .9rem; color: var(--nh-grau); line-height: 1.5; }
.nh-phone--statisch, .nh-phone--seite { width: 240px; margin: 0 auto; transform: none; animation: none; }
.nh-bildtext { font-size: .88rem; color: var(--nh-grau); margin: 12px 0 0; }
.nh-seite .nh-bildpaar { margin-top: 16px; }
.nh-seite .table-responsive { margin: 12px 0 18px; }
.nh-seite ul:not(.nh-nutzen) { padding-left: 1.2rem; }
.nh-seite video { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 14px; }
.nh-faq-block { margin-top: 48px; }
.nh-beitrag .nh-faq-block h2.nh-h2 { margin-top: 0 !important; }
@media (max-width: 1199px) { .nh-stufen { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
    .nh-stufen { grid-template-columns: 1fr 1fr; }
    .nh-band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 44px calc(50vw - 50%); }
    .nh-seite .nh-lead { text-align: left; font-size: 1.1rem; }
    .nh-block { margin: 40px 0 16px; }
}
@media (max-width: 480px) { .nh-stufen { grid-template-columns: 1fr; } }

/* ── Nachbarseiten „Mehr zum Thema" ─────────────────────────────────────── */
.nh-nachbarn { background: var(--nh-creme); padding: 64px 0 72px; }
.nh-nachbarn-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nh-nachbar {
    position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 44px 20px 20px;
    background: #fff; border-radius: 14px; border: 1px solid rgba(13,31,60,.1); color: var(--nh-text);
    box-shadow: 0 8px 24px rgba(13,31,60,.06); transition: transform .18s, box-shadow .18s, border-color .18s; text-decoration: none;
}
.nh-nachbar:hover { transform: translateY(-3px); border-color: rgba(0,121,252,.35); box-shadow: 0 14px 34px rgba(13,31,60,.14); color: var(--nh-text); }
.nh-nachbar-titel { font-weight: 700; color: var(--nh-dunkel); font-size: 1.02rem; line-height: 1.3; }
.nh-nachbar-text { font-size: .9rem; color: var(--nh-grau); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nh-nachbar-pfeil { position: absolute; right: 18px; top: 18px; color: var(--nh-aktion-d); font-weight: 700; opacity: .6; transition: opacity .18s, transform .18s; }
.nh-nachbar:hover .nh-nachbar-pfeil { opacity: 1; transform: translateX(3px); }
@media (max-width: 991px) { .nh-nachbarn-raster { grid-template-columns: 1fr 1fr; } .nh-nachbarn { padding: 44px 0 52px; } }
@media (max-width: 575px) { .nh-nachbarn-raster { grid-template-columns: 1fr; } }

/* ── Preisseite: der Webster-Preisblock auf unserem Rahmen ──────────────── */
.nh-preisseite #pricing { padding-top: 56px; }
.nh-preisseite .section-title.mb-80 { margin-bottom: 40px !important; }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
.nh-mfp .mfp-title { color: rgba(255,255,255,.85); }

/* Fragen vor dem Start (Startseite, 01.10.2026): gleiche Ziehharmonika wie auf den Unterseiten */
.nh-faq-start { margin-top: 0; }
.nh-faq-start .accordion-item { border: 1px solid rgba(13,31,60,.1); background: #fff; margin-bottom: 8px; border-radius: 10px; overflow: hidden; }
.nh-faq-start .accordion-button { font-weight: 600; color: var(--nh-dunkel); background: #fff; box-shadow: none; padding: 14px 18px; font-size: 1rem; }
.nh-faq-start .accordion-button:not(.collapsed) { color: var(--nh-aktion); background: #fff; }
.nh-faq-start .accordion-button:focus { box-shadow: none; }
.nh-faq-start .accordion-body { color: var(--nh-text); padding: 0 18px 16px; line-height: 1.6; }
.nh-faq-start .nh-sub a { color: var(--nh-aktion); }
.nh-preis-hinweis { max-width: 720px; margin-left: auto; margin-right: auto; }

/* So probierst du es aus (Startseite): drei nummerierte Schritte auf weissem Grund */
.nh-schritte-band { padding: 56px 0 48px; background: #fff; }
.nh-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1000px; margin-left: auto; margin-right: auto; }
.nh-schritte li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px 22px 22px; border-radius: 16px; background: var(--nh-creme); margin: 0 !important; }
.nh-schritte .nh-schritt-nr { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--nh-aktion); color: #fff; font-weight: 700; margin-bottom: 6px; }
.nh-schritte strong { color: var(--nh-dunkel); font-size: 1.08rem; }
.nh-schritte span:not(.nh-schritt-nr) { color: var(--nh-text); line-height: 1.55; }
@media (max-width: 767px) { .nh-schritte { grid-template-columns: 1fr; gap: 12px; } .nh-schritte-band { padding: 40px 0 36px; } }

/* Karten als Links (404-Seite) */
a.nh-karte, a.nh-karte h5, a.nh-karte p { color: var(--nh-text); text-decoration: none; }
a.nh-karte h5 { color: var(--nh-dunkel); }
a.nh-karte:hover { border-color: var(--nh-aktion); }

/* Notenschluessel-Rechner (02.10.2026) */
.nh-rechner-block { margin-bottom: 56px; }
.nh-rechner-karte { background: #fff; border: 1px solid rgba(13,31,60,.1); border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 10px 30px -22px rgba(13,31,60,.35); height: 100%; }
.nh-rechner-h3 { font-size: 1.02rem; font-weight: 700; color: var(--nh-dunkel); margin: 0 0 12px; }
.nh-rechner-h3 + .nh-rechner-h3, .nh-rechner-schwellen + .nh-rechner-h3, .nh-rechner-knoepfe + .nh-rechner-h3 { margin-top: 22px; }
.nh-rechner-zeile, .nh-rechner-schwelle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-size: .98rem; color: var(--nh-text); }
.nh-rechner-zeile input, .nh-rechner-zeile select, .nh-rechner-schwelle input { width: 150px; padding: 8px 10px; border: 1px solid rgba(13,31,60,.2); border-radius: 8px; font: inherit; color: var(--nh-dunkel); background: #fff; }
.nh-rechner-schwelle input { width: 86px; text-align: right; }
.nh-rechner-feld { white-space: nowrap; }
.nh-rechner-schwelle--rest { color: var(--nh-grau); }
.nh-rechner-hinweis { font-size: .9rem; color: var(--nh-grau); line-height: 1.5; margin: 8px 0 12px; }
.nh-rechner-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.nh-rechner-knopf { border: 0; border-radius: 10px; background: var(--nh-aktion); color: #fff; font: inherit; font-weight: 600; padding: 9px 16px; cursor: pointer; }
.nh-rechner-knopf:hover { background: var(--nh-aktion-d); }
.nh-rechner-knopf--leise { background: var(--nh-creme); color: var(--nh-dunkel); }
.nh-rechner-knopf--leise:hover { background: #e3ebf7; }
.nh-rechner-tabelle { width: 100%; border-collapse: collapse; font-size: .98rem; }
.nh-rechner-tabelle th, .nh-rechner-tabelle td { padding: 9px 10px; border-bottom: 1px solid rgba(13,31,60,.1); text-align: left; }
.nh-rechner-tabelle th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nh-grau); }
.nh-rechner-tabelle td:first-child { font-weight: 600; color: var(--nh-dunkel); }
.nh-rechner-tabelle tr.nh-rechner-leer td { color: var(--nh-grau); }
.nh-rechner-ergebnis { font-size: 1.05rem; color: var(--nh-dunkel); background: var(--nh-creme); border-radius: 10px; padding: 12px 14px; margin: 4px 0 0; }
@media (max-width: 575px) { .nh-rechner-karte { padding: 16px 14px; } .nh-rechner-zeile input, .nh-rechner-zeile select { width: 140px; } }
.nh-rechner-zeile select { width: 210px; }
@media (max-width: 575px) { .nh-rechner-tabelle { font-size: .9rem; } .nh-rechner-tabelle th, .nh-rechner-tabelle td { padding: 8px 6px; } .nh-rechner-tabelle th { font-size: .72rem; letter-spacing: 0; } .nh-rechner-zeile select { width: 170px; } }
.nh-rechner-zeile--block { flex-direction: column; align-items: stretch; gap: 6px; }
.nh-rechner-zeile--block input { width: 100%; }
.nh-rechner-schritte { list-style: none; margin: 0 0 14px; padding: 0; }
.nh-rechner-schritte li { padding: 8px 0; border-bottom: 1px solid rgba(13,31,60,.1); line-height: 1.5; }
.nh-trial-cta .lead a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nh-trial-cta .lead a:hover { color: var(--nh-akzent); }
/* Vier Stufen in einer halben Spalte (Fruehwarnung Oesterreich) */
.nh-stufen--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 575px) { .nh-stufen--vier { grid-template-columns: 1fr; } }
/* Notebook-Bildschirm anklickbar (Lightbox) */
.nh-laptop-bild { cursor: zoom-in; }
.nh-laptop-hinweis { text-align: center; font-size: .82rem; color: rgba(255,255,255,.7); margin: 14px 0 0; }
@media (min-width: 992px) { .nh-hero-foto .nh-laptop-hinweis { margin-right: -70px; } }

/* Runde 12 */
.nh-preis ul li.nh-preis-ohne { color: var(--nh-grau); }
.nh-preis ul li.nh-preis-ohne::before { content: "\2715"; color: var(--nh-grau); font-weight: 400; }
@media (max-width: 767px) { #back-to-top { display: none !important; } }
/* Startseite am Handy: nur das grosse Bild je Abschnitt, die kleinen Vorschaubilder waren dort nicht lesbar */
@media (max-width: 767px) { .nh-gruppe .nh-bildpaar, .nh-gruppe .nh-thumbs { display: none; } }