/* ===============================================================
   Navigation, website-neu (11.10.2026).
   Layout and behaviour ported from the Emanis header
   (~/ai-projects/emanis/app/styles/kopf.css, Kopfleiste.tsx,
   public/assets/js/kopfleiste.js): logo left, three core areas with a
   full-width dropdown band in the middle, button right; transparent at
   the top, white once scrolled, hides on scroll down. Mobile: the Osmo
   "scaling hamburger" card with an accordion.
   Type, colours, container and buttons are this site's own.
   =============================================================== */
.nfr {
  --nfr-h: 56px;
  --nfr-ink: #2a2a2a;
  --nfr-muted: #6b6a66;
  --nfr-paper: #fff;
  --nfr-rule: #e6e6e6;
  --nfr-rand: 5%;
  position: relative;
  font-family: var(--_typography---font-styles--body);
}
/* 21.10.2026, Christian: "nicht so früh auf mobile nav schalten" - the desktop bar now runs down to 820 (was 992, 62em) */
@media (min-width: 51.25em) { .nfr { --nfr-h: 64px; } }

/* ---- Bar ---- */
.nfr-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nfr-h);
  z-index: 999;
  background-color: var(--nfr-paper);
  color: var(--nfr-ink);
  transition: background .3s linear, transform .8s cubic-bezier(.19, 1, .22, 1);
}
.nfr-header::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 1px;
  background-color: transparent;
  transition: background .1s linear;
}
.nfr-header:not(.is-scrolled) { background-color: transparent; }
.nfr-header.is-scrolled::after { background-color: var(--nfr-rule); }
.nfr-header.is-scrolled.is-hidden:not(.is-toggled) { transform: translateY(-101%); }
.nfr-header.is-toggled { transform: none; z-index: 998; }
.nfr-header.is-toggled::after { background-color: transparent; }

.nfr-inner {
  display: flex;
  align-items: center;
  height: var(--nfr-h);
  max-width: calc(80rem + 2 * var(--nfr-rand));
  margin: 0 auto;
  padding: 0 var(--nfr-rand);
}
@media (min-width: 90em) { .nfr-inner { max-width: 80rem; padding: 0; box-sizing: content-box; } }

/* ---- Logo (the site's own logo block) ---- */
.nfr-logo { position: relative; z-index: 2; flex: 1 1 0; }
.nfr-logo > a { display: inline-flex; color: inherit; text-decoration: none; }

/* ---- Main navigation ---- */
.nfr-nav { display: none; }
@media (min-width: 51.25em) { .nfr-nav { display: flex; justify-content: center; flex: 0 1 auto; } }
.nfr-nav-list { display: flex; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.nfr-item { position: relative; margin: 0; padding: 0; }
.nfr-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  position: relative;
  z-index: 2;
  padding: 2px 0;
  margin: 0 .875rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--nfr-ink);
  text-decoration: none;
}
.nfr-link:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
button.nfr-link { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; cursor: default; user-select: none; } /* 21.10.2026: dropdown triggers are buttons (WCAG 4.1.2), were spans with tabindex */

/* ---- Dropdown: full-width white band, opens from the top ---- */
.nfr-sub {
  position: absolute;
  left: .875rem;
  top: 100%;
  margin: 0;
  padding: 1.75rem 0 2.5rem;
  min-width: 15rem;
  list-style: none;
  pointer-events: none;
  z-index: 1;
}
.nfr-sub::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: calc(100% + 120px);
  left: -100vw;
  right: -100vw;
  background-color: var(--nfr-paper);
  border-bottom: 1px solid var(--nfr-rule);
  z-index: -1;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1) .12s;
}
/* Items cascade in one after another, like the apple.de menu: each fades in and
   drops a few pixels, 45 ms after the one above, once the band has started to open.
   Closing: all fade out together at once. */
.nfr-sub > li {
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .12s ease, transform .12s ease;
}
.nfr-item.is-open > .nfr-sub { pointer-events: auto; }
.nfr-item.is-open > .nfr-sub::before { transform: scaleY(1); transition: transform .48s cubic-bezier(.22, .61, .36, 1); }
.nfr-item.is-open > .nfr-sub > li { opacity: 1; transform: none; transition: opacity .4s ease calc(.12s + var(--i, 0) * 45ms), transform .5s cubic-bezier(.22, .61, .36, 1) calc(.12s + var(--i, 0) * 45ms); }
.nfr-sub-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  font-family: var(--_typography---font-styles--heading);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--nfr-ink);
  text-decoration: none;
}
.nfr-sub-link { transition: color .2s; }
.nfr-sub-link:hover, .nfr-sub-link:focus-visible { color: var(--nfr-muted); }
.nfr-sub-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* ---- Right: button ---- */
.nfr-aux { display: none; }
@media (min-width: 51.25em) { .nfr-aux { display: flex; justify-content: flex-end; flex: 1 1 0; position: relative; z-index: 2; } }

/* ---- Dim the page behind an open dropdown ---- */
.nfr-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(37, 37, 37, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .48s ease;
  z-index: 998;
}
.nfr-overlay.is-on { opacity: 1; pointer-events: auto; }

/* ---- Mobile: scaling hamburger card (Osmo) ---- */
.hnav { position: fixed; inset: 0; z-index: 1000; pointer-events: none; font-size: 16px; }
@media (min-width: 51.25em) { .hnav { display: none; } }
.hnav__dunkel {
  position: absolute; inset: 0; background: #000; opacity: 0; visibility: hidden; pointer-events: auto;
  transition: all .7s cubic-bezier(.5, .5, 0, 1);
}
[data-navigation-status="active"] .hnav__dunkel { opacity: .33; visibility: visible; }
.hnav__karte { position: absolute; top: 0; right: 0; width: 100%; max-width: 100vw; }
.hnav__grund {
  position: absolute;
  top: calc((var(--nfr-h) - 3.5em) / 2);
  right: calc(var(--nfr-rand) - 1.05em);
  width: 3.5em; height: 3.5em;
  background: transparent;
  transition: all .7s cubic-bezier(.5, .5, 0, 1);
}
[data-navigation-status="active"] .hnav__grund { top: 0; right: 0; width: 100%; height: 100%; background: var(--nfr-paper); }
.hnav__gruppe {
  position: relative; display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  pointer-events: auto;
  transform-origin: 100% 0;
  transform: scale(.15) rotate(.001deg);
  opacity: 0; visibility: hidden;
  transition: all .5s cubic-bezier(.5, .5, 0, 1), transform .7s cubic-bezier(.5, .5, 0, 1);
}
[data-navigation-status="active"] .hnav__gruppe { transform: scale(1) rotate(.001deg); opacity: 1; visibility: visible; }
.hnav__kopf { display: flex; align-items: center; flex-shrink: 0; height: var(--nfr-h); padding: 0 var(--nfr-rand); border-bottom: 1px solid var(--nfr-rule); }
.hnav__kopf a { display: inline-flex; color: inherit; text-decoration: none; }
.hnav__akkordeon { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .5em var(--nfr-rand) 1em; }
.hnav__block, .hnav__zeile { border-bottom: 1px solid var(--nfr-rule); }
.hnav__titel, .hnav__zeile > a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; list-style: none; cursor: pointer;
  font-family: var(--_typography---font-styles--heading);
  font-weight: 400; font-size: 1.625rem; letter-spacing: -.02em;
  color: var(--nfr-ink); text-decoration: none;
}
.hnav__titel::-webkit-details-marker { display: none; }
.hnav__plus { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.hnav__plus::before, .hnav__plus::after {
  content: ""; position: absolute; left: 1.5px; top: 7.2px; width: 13px; height: 1.5px;
  background: var(--nfr-ink); transition: transform .3s cubic-bezier(.5, .5, 0, 1);
}
.hnav__plus::after { transform: rotate(90deg); }
.hnav__block[open] .hnav__plus::after { transform: rotate(0deg); }
.hnav__liste { margin: 0; padding: 0 0 .75em; list-style: none; display: flex; flex-direction: column; }
.hnav__li { margin: 0; padding: 0; }
.hnav__a { display: flex; align-items: center; min-height: 44px; font-size: 1.0625rem; font-weight: 500; color: var(--nfr-ink); text-decoration: none; }
.hnav__a[aria-current] { text-decoration: underline; text-underline-offset: .25em; }
.hnav__fuss { flex-shrink: 0; padding: 16px var(--nfr-rand) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--nfr-rule); }
.hnav__fuss .btn { display: flex; width: 100%; justify-content: center; }
.hnav__toggle {
  position: absolute; top: calc((var(--nfr-h) - 3.5em) / 2); right: calc(var(--nfr-rand) - 1.05em);
  display: flex; justify-content: center; align-items: center;
  width: 3.5em; height: 3.5em; padding: 0; border: 0; background: transparent;
  cursor: pointer; pointer-events: auto;
}
.hnav__balken {
  position: absolute; width: 40%; height: .125em; background: var(--nfr-ink);
  transform: translateY(-.15em) rotate(.001deg);
  transition: transform .7s cubic-bezier(.5, .5, 0, 1);
}
.hnav__balken:nth-child(2) { transform: translateY(.15em) rotate(.001deg); }
.hnav__toggle:hover .hnav__balken { transform: translateY(.15em) rotate(.001deg); }
.hnav__toggle:hover .hnav__balken:nth-child(2) { transform: translateY(-.15em) rotate(.001deg); }
.hnav[data-navigation-status="active"] .hnav__toggle .hnav__balken { transform: translateY(0) rotate(45deg); }
.hnav[data-navigation-status="active"] .hnav__toggle .hnav__balken:nth-child(2) { transform: translateY(0) rotate(-45deg); }
/* The toggle hides with the bar on scroll down. */
.nfr:has(.nfr-header.is-scrolled.is-hidden:not(.is-toggled)) [data-navigation-status="not-active"] .hnav__toggle { transform: translateY(-200%); }
.hnav__toggle { transition: transform .8s cubic-bezier(.19, 1, .22, 1); }

@media (prefers-reduced-motion: reduce) {
  .nfr-header, .nfr-sub::before, .nfr-sub > li, .nfr-overlay,
  .hnav__dunkel, .hnav__grund, .hnav__gruppe, .hnav__toggle, .hnav__balken, .hnav__plus::after, .nfr-link { transition: none !important; }
}

/* Slimmer bar (11.10.2026): smaller logo and button. */
.nfr .logo-flex { height: 1.75rem; }
.nfr .logo-img-wr { width: 1.75rem; height: 1.75rem; }
.nfr .logo-text { font-size: .8rem; }
.nfr-aux .btn.is-nav { height: 2.25em; font-size: .875rem; }

/* Luminar layout (11.10.2026): logo left, everything else right in one run of text,
   each item followed directly by a comma; "Angebot einholen" is a plain link, no button. */
@media (min-width: 51.25em) {
  .nfr { --nfr-h: 56px; }
  .nfr-logo { flex: 1 1 auto; }
  .nfr-nav { flex: 0 0 auto; justify-content: flex-end; }
  .nfr-nav-list { gap: .6em; }
  .nfr-link { margin: 0; gap: 0; font-size: 1.0625rem; letter-spacing: -.01em; }
  .nfr-nav .nfr-item > .nfr-link::after { content: ","; }
  .nfr-aux { flex: 0 0 auto; margin-left: .6em; }
  .nfr-sub { left: 0; }
}
.nfr-link:hover { opacity: .6; }
.nfr-link { transition: opacity .25s ease; }

/* "(kostenfrei)" after the free checks: very small, muted. */
/* Ascender height of the label (Inter k: .7275em) = x-height of the Charter link (.481em) -> .66em, on the same baseline. */
.nfr-sub-link:has(.nfr-free), .hnav__a:has(.nfr-free) { align-items: baseline; gap: 0; }
.nfr-free { margin-left: .35em; font-family: var(--_typography---font-styles--body); font-size: .55em; font-weight: 500; letter-spacing: 0; color: #6b6a66; vertical-align: baseline; }

/* Dropdown spans the container (11.10.2026): items always at the container's left
   edge, an image on the right. The band is positioned against the fixed header and
   repeats the container maths of .nfr-inner, so its edges match the logo and the
   last nav item exactly. */
.nfr-sub-media { display: none; }
@media (min-width: 51.25em) {
  .nfr-item { position: static; }
  .nfr-sub {
    left: 0;
    right: 0;
    max-width: calc(80rem + 2 * var(--nfr-rand));
    margin: 0 auto;
    padding: 2rem var(--nfr-rand) 2.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    grid-auto-rows: min-content;
    column-gap: 4rem;
    align-content: start;
  }
  .nfr-sub > li:not(.nfr-sub-media) { grid-column: 1; }
  .nfr-sub-media { display: block; grid-column: 2; grid-row: 1 / span 6; align-self: start; --i: 1; }
  .nfr-sub-media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #f3f2ee; }
}
@media (min-width: 90em) { .nfr-sub { max-width: 80rem; padding-left: 0; padding-right: 0; box-sizing: content-box; } }

/* Bar and dropdown use the normal page container (80rem inside the 5% margin), 12.10.2026. */

/* Logo (20.10.2026): cs circle symbol plus wordmark from Christian's Figma file,
   one SVG used as a mask so it takes the nav ink colour. The text stays for screen readers. */
.nfr-wortmarke {
  display: block;
  height: 1.75rem;
  aspect-ratio: 1758 / 237;
  background-color: var(--nfr-ink);
  -webkit-mask: url(/images/logo-christianschaefer.svg?v=4) no-repeat center / contain;
  mask: url(/images/logo-christianschaefer.svg?v=4) no-repeat center / contain;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
/* Bigger on small screens (Christian 21.10.2026: "christianchaefer logo auf mobile viel zu klein"); root is 13px up to 991px. */
/* (moved below the .nfr fluid rule, which won before) */

/* Top-level nav items in the serif too (12.10.2026), like the wordmark and dropdown. */
@media (min-width: 51.25em) {
  .nfr-nav .nfr-link, .nfr-aux .nfr-link { font-family: var(--_typography---font-styles--heading); font-size: 1.125rem; font-weight: 400; letter-spacing: -.01em; }
}

/* ---- Announcement bar (15.10.2026): green strip above the header, white text, one text link ---- */
.ann { position: relative; z-index: 1001; display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 2.5rem; padding: .5rem 5%; background: #f1f1ef; color: #111; font-family: var(--_typography---font-styles--body); font-size: .875rem; line-height: 1.35; text-align: center; }
.ann_icon { flex: none; width: 1.125rem; height: 1.125rem; }
.ann_text { margin: 0; line-height: 1.125rem; }
.ann_link { color: #111; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ann_link-text { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.ann_arrow { display: inline-block; transition: transform .25s ease; }
.ann_link:hover .ann_arrow { transform: translateX(.25rem); }
.nfr-header { top: var(--ann-off, 0px); }
.hnav__karte { top: var(--ann-off, 0px); }
@media (max-width: 479px) { .ann { font-size: .8125rem; gap: .5rem; } }

/* ---- Dropdown after reevo.ai (17.10.2026) -------------------------------------------
   Christian: "dann will ich die dropdowns so haben wie bei der seite" (reevo.ai/products/manage).
   A white panel under the bar, right-aligned to the container: left column "Leistungen" with a
   patterned square, title and one line per service; right column "Auch interessant"; a footer row.
   No dim layer. Old version: _archiv/nav-2026-10-17. */
.nfr-mega { display: none; }
@media (min-width: 51.25em) {
  .nfr-inner { position: relative; }
  .nfr-sub.nfr-mega {
    display: block; left: auto; right: var(--nfr-rand); top: calc(100% - 4px); max-width: none; width: 44rem; margin: 0; padding: 0;
    background: #fff; border: 1px solid var(--nfr-rule); box-shadow: 0 18px 40px -18px rgba(0,0,0,.18);
    opacity: 0; transform: translateY(-6px); visibility: hidden;
    transition: opacity .18s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility 0s linear .22s;
  }
  .nfr-sub.nfr-mega::before { content: none; }
  .nfr-item.is-open > .nfr-sub.nfr-mega { opacity: 1; transform: none; visibility: visible; transition: opacity .18s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility 0s; }
  .nfr-overlay { background-color: transparent; }
  .nfr-mega-cols { display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; }
  .nfr-mega-main { padding: 1.25rem 1rem 1rem; }
  .nfr-mega-aside { padding: 1.25rem 1.25rem 1rem; border-left: 1px solid var(--nfr-rule); }
  .nfr-mega-eyebrow { margin: 0 0 .75rem; } /* the site's normal .text-eyebrow (Christian: "eyebrows nicht neu erfinden, nimm vorhandene stile") */
  .nfr-mega-main .nfr-mega-eyebrow { padding-left: .5rem; }
  .nfr-mega-side .nfr-free { font-size: .7em; }
  .nfr-mega-list, .nfr-mega-sides { margin: 0; padding: 0; list-style: none; }
  .nfr-mega-item { display: flex; align-items: center; gap: .875rem; padding: .5rem; color: #111; text-decoration: none; transition: background .15s; }
  .nfr-mega-item:hover, .nfr-mega-item:focus-visible { background: #f5f5f3; }
  .nfr-mega-text { display: flex; flex-direction: column; min-width: 0; }
  .nfr-mega-title { font-family: var(--_typography---font-styles--body); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
  .nfr-mega-desc { font-family: var(--_typography---font-styles--body); font-size: 15px; line-height: 1.4; color: #555; }
  .nfr-mega-side { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem 0; font-family: var(--_typography---font-styles--body); font-size: 17px; font-weight: 500; line-height: 1.3; color: #111; text-decoration: none; }
  .nfr-mega-side:hover, .nfr-mega-side:focus-visible { opacity: .6; }
  .nfr-mega-foot { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .9rem 1.5rem; border-top: 1px solid var(--nfr-rule); font-family: var(--_typography---font-styles--body); font-size: 15px; line-height: 1.4; }
  .nfr-mega-foot svg { width: 16px; height: 16px; flex: none; color: #111; }
  .nfr-mega-foot-b { font-weight: 500; color: #111; }
  .nfr-mega-foot-m { margin-left: .35rem; color: #8a8a8a; }
  /* the patterned squares, Reevo's pixel textures in this site's own set of colours */
  .nfr-mega-icon { flex: none; width: 38px; height: 38px; }
  .nfr-mega-icon.is-p1 { background: repeating-conic-gradient(#f26b1d 0 25%, #f9a26d 0 50%) 0 0 / 6px 6px; }
  .nfr-mega-icon.is-p2 { background: repeating-conic-gradient(#b072d9 0 25%, #dcc0ef 0 50%) 0 0 / 5px 5px; }
  .nfr-mega-icon.is-p3 { background: repeating-linear-gradient(0deg, #2bb39a 0 2px, #bfeadf 2px 4px); }
  .nfr-mega-icon.is-p4 { background: repeating-conic-gradient(#f5b38c 0 25%, #fde3cf 0 50%) 0 0 / 4px 4px; }
  .nfr-mega-icon.is-p5 { background: repeating-linear-gradient(0deg, #2f5fd0 0 2px, #c4d3f5 2px 4px), #2f5fd0; }
  .nfr-mega-icon.is-p6 { background: repeating-linear-gradient(90deg, #e8c43a 0 2px, #f8eaae 2px 4px); }
}
@media (min-width: 90em) { .nfr-sub.nfr-mega { right: 0; } }
@media (min-width: 51.25em) { .nfr-mega-item[aria-current="page"] .nfr-mega-title { text-decoration: none; } } /* no mark on the page you are on (Christian, 17.10.2026) */
/* "Auch interessant": hover like the service items, a grey field behind, no colour change (Christian, 17.10.2026) */
@media (min-width: 51.25em) {
  .nfr-mega-aside { padding-left: 1rem; padding-right: 1rem; }
  .nfr-mega-aside .nfr-mega-eyebrow { padding-left: .5rem; }
  .nfr-mega-sides li { display: block; }
  .nfr-mega-side { display: flex; padding: .6rem .5rem; transition: background .15s; }
  .nfr-mega-side:hover, .nfr-mega-side:focus-visible { opacity: 1; background: #f5f5f3; }
}
@media (min-width: 51.25em) { .nfr-mega-icon.is-p7 { background: repeating-conic-gradient(#e36fb6 0 25%, #fed3ed 0 50%) 0 0 / 6px 6px; } } /* Shop Add-ons */
/* Announcement bar yellow, the reevo.ai yellow (Christian, 17.10.2026: "nimm den farbton für die leiste über nav als bg") */
.ann { background: #111; color: #fff; } /* 17.10.2026, Christian: "mach die leiste oben schwarz" */
.ann .ann_link { color: #fff; }
.ann_link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 17.10.2026, Christian: "text oben in leiste bisschen kleiner, aber leiste nicht weniger hoch",
   "keine linien unter jetzt besprechen. dafür 1 rem abstand zum text links daneben".
   Text one step smaller; min-heights hold the bar at the height it had (40 desktop, 42 tablet, 45 phone). */
.ann { font-size: .8125rem; }
@media (max-width: 991px) { .ann { min-height: 42px; } }
@media (max-width: 479px) { .ann { font-size: .75rem; min-height: 45px; } }
.ann .ann_link { display: inline-block; margin-left: 1rem; }
.ann .ann_link-text { text-decoration: none; }
/* 17.10.2026, Christian: "text oben in bar immer noch zu groß": fixed 12px at every width (no fluid rem), icon to match. */
.ann { font-size: 12px; }
.ann .ann_icon { width: 15px; height: 15px; }
@media (max-width: 479px) { .ann { font-size: 12px; } }
/* The type system in webflow.css sets .ann_text itself to 15px (13px on phones), so the 12px has to sit on the text, not only the bar. */
body .ann .ann_text { font-size: 12px; }
/* 17.10.2026, Christian: "dann kann die bar doch bisschen weniger hoch": 34px at every width. */
.ann { min-height: 34px; padding-top: .3rem; padding-bottom: .3rem; }
@media (max-width: 991px) { .ann { min-height: 34px; } }
@media (max-width: 479px) { .ann { min-height: 36px; } }
/* Mega menu type (17.10.2026, Christian: "kleine texte in meinem eyebrow stil, grosse texte in serif headline font"). */
@media (min-width: 51.25em) {
  .nfr-mega-title, .nfr-mega-side { font-family: var(--_typography---font-styles--heading); font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; color: #111; }
  .nfr-mega-desc, .nfr-mega-foot, .nfr-mega-foot-b, .nfr-mega-foot-m, .nfr-free { font-family: var(--_typography---font-styles--body); font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: normal; text-transform: none; color: #2a2a2a; }
  .nfr-mega-desc { margin-top: .15rem; }
}
@media (min-width: 51.25em) { .nfr-mega-side .nfr-free { font-size: 15px; } }
/* "(kostenfrei)" in the detail style (.text-detail: 11px, 500, caps), close to the word and on its baseline
   (Christian, 17.10.2026: "kostenfrei im detailtext und näher dran und an der x-achse des textes aligned"). */
@media (min-width: 51.25em) {
  .nfr-mega-side:has(.nfr-free) { align-items: baseline; gap: 0; }
  .nfr-mega-side .nfr-free { margin-left: .5rem; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: #111; }
}
/* Nav dropdown: every text except the serif headlines in .text-eyebrow-small, 13px (18.10.2026, Christian: "dann nicht den eyebrow style.
   hatte so an 13 px gedacht ... alles im nav dropdown, ausser die serif headlines"). 18.10.2026 later: 12px, and "(kostenfrei)" in the same style ("kostenfrei ist noch im falschen stil ... dann auf 12"). */
@media (min-width: 51.25em) {
  .nfr-mega .nfr-mega-eyebrow, .nfr-mega-desc, .nfr-mega-foot, .nfr-mega-foot-b, .nfr-mega-foot-m, .nfr-mega-side .nfr-free { font-family: var(--_typography---font-styles--body); font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: normal; text-transform: none; color: #2a2a2a; }
  .nfr-mega-side .nfr-free { margin-left: .5rem; line-height: 1; }
}
/* Top-level nav one notch smaller, 18 → 17px at 1440 (18.10.2026, Christian: "die erste hierarchie texte mit home shops webseiten etc. ein tick kleiner"). */
@media (min-width: 51.25em) { .nfr-nav .nfr-link, .nfr-aux .nfr-link { font-size: 1.0625rem; } }
/* Announcement bar in the dark part of the blue glow, with grain (18.10.2026, Christian: "die top leiste hätte gerne den blauen gradient,
   aber nur da oben wo dunkel ist ... damit insgesamt die leiste schon echt dunkel ist, mit dem grain"). White text stays above 7:1. */
.ann { background: #111; isolation: isolate; } /* 18.10.2026, Christian: "nimm das schwarz von ikea leiste oben für meine leiste oben" (ikea.com/de utility bar: #111111); was L8 blue #0f2a52 */
.ann::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 220px 220px; }

/* 18.10.2026, Christian: "die unteren leiste bei dem dropdown einfach weg" */
.nfr-mega-foot { display: none !important; }

/* 18.10.2026, Christian: "bei nav bg keine animation dass das bg reinkommt. einfach von anfang an mit bg weiß." */
.nfr-header, .nfr-header:not(.is-scrolled) { background-color: var(--nfr-paper); transition: transform .8s cubic-bezier(.19, 1, .22, 1); }

/* 19.10.2026, Christian: "wenn ich die seite hochscrolle verschiebt sich das nav so weird, ist auf der nav noch so eine komische
   animation drauf?" — it was the Emanis hide-on-scroll: gone on the way down, sliding back in over .8s on the way up.
   The bar now simply stays; js/nav.js still sets is-hidden, it just has no effect. */
.nfr-header.is-scrolled.is-hidden:not(.is-toggled) { transform: none; }
.nfr:has(.nfr-header.is-scrolled.is-hidden:not(.is-toggled)) [data-navigation-status="not-active"] .hnav__toggle { transform: none; }
.nfr-header, .nfr-header:not(.is-scrolled) { transition: none; }
/* Shop Texte in the Shops menu (20.10.2026, Christian: "shop texte fehlt hier auch komplett") */
.nfr-mega-icon.is-p8 { background: repeating-linear-gradient(45deg, #3f8f5a 0 2px, #cfe8d7 2px 5px); }

/* Mobile menu links in px below 992 (20.10.2026): the root size is a steady 13 px there now (Emanis curve). */
@media (max-width: 991px) { .hnav__a { font-size: 15px; } } /* 21.10.2026, Christian: "kleiner" (menu links, 17 -> 15 px) */

/* ---- Mobile menu after A11.studio (20.10.2026) ------------------------------------------------------------
   Christian: "siehst du die animation für die mobile nav? die hätte ich lieber. und mobile nav dann in gradient bg"
   (pin: A11.studio mobile menu by Martin Mroč). The background grows as a circle out of the menu button until it
   covers the screen, then the rows come in one after another. Closing runs it backwards, rows out first.
   Background: the warm gradient of the site's yellow glow. The circle is motion only; the open menu is square. */
.hnav__dunkel { display: none; }
.hnav__grund, [data-navigation-status="active"] .hnav__grund {
  top: 0; right: 0; width: 100%; height: 100vh; height: 100dvh;
  background: #f3f3f1; /* 21.10.2026, Christian: "mach bg leichtes grau" - the footer grey, gradient dropped */
  --hn-x: calc(100% - var(--nfr-rand) - .7em); --hn-y: calc(var(--nfr-h) / 2);
  clip-path: circle(0px at var(--hn-x) var(--hn-y));
  transition: clip-path .55s cubic-bezier(.65, 0, .35, 1) .2s;
}
[data-navigation-status="active"] .hnav__grund { clip-path: circle(150vmax at var(--hn-x) var(--hn-y)); transition-delay: 0s; transition-duration: .75s; }
.hnav__gruppe, [data-navigation-status="active"] .hnav__gruppe { transform: none; transition: opacity .2s ease, visibility 0s linear .2s; }
[data-navigation-status="active"] .hnav__gruppe { transition: opacity .2s ease, visibility 0s; }
.hnav__kopf, .hnav__akkordeon > *, .hnav__fuss { opacity: 0; transform: translateY(14px); transition: opacity .2s ease, transform .2s ease; }
[data-navigation-status="active"] :is(.hnav__kopf, .hnav__akkordeon > *, .hnav__fuss) {
  opacity: 1; transform: none; transition: opacity .5s ease var(--hn-d, .35s), transform .6s cubic-bezier(.19, 1, .22, 1) var(--hn-d, .35s);
}
.hnav__kopf { --hn-d: .3s; }
.hnav__akkordeon > :nth-child(1) { --hn-d: .36s; }
.hnav__akkordeon > :nth-child(2) { --hn-d: .42s; }
.hnav__akkordeon > :nth-child(3) { --hn-d: .48s; }
.hnav__akkordeon > :nth-child(4) { --hn-d: .54s; }
.hnav__akkordeon > :nth-child(5) { --hn-d: .6s; }
.hnav__akkordeon > :nth-child(6) { --hn-d: .66s; }
.hnav__akkordeon > :nth-child(n+7) { --hn-d: .72s; }
.hnav__fuss { --hn-d: .75s; }
/* 21.10.2026, Christian first: "mach aus dem nav die striche weg", then "doch wieder mit linien" - the lines stay */
/* sub-link icons in the menu card, set by js/nav.js from the desktop dropdown; same patterns as .nfr-mega-icon */
.hnav__a { gap: .75rem; }
.hnav__ic { flex: none; width: 22px; height: 22px; }
.hnav__ic.is-p1 { background: repeating-conic-gradient(#f26b1d 0 25%, #f9a26d 0 50%) 0 0 / 6px 6px; }
.hnav__ic.is-p2 { background: repeating-conic-gradient(#b072d9 0 25%, #dcc0ef 0 50%) 0 0 / 5px 5px; }
.hnav__ic.is-p3 { background: repeating-linear-gradient(0deg, #2bb39a 0 2px, #bfeadf 2px 4px); }
.hnav__ic.is-p4 { background: repeating-conic-gradient(#f5b38c 0 25%, #fde3cf 0 50%) 0 0 / 4px 4px; }
.hnav__ic.is-p5 { background: repeating-linear-gradient(0deg, #2f5fd0 0 2px, #c4d3f5 2px 4px), #2f5fd0; }
.hnav__ic.is-p6 { background: repeating-linear-gradient(90deg, #e8c43a 0 2px, #f8eaae 2px 4px); }
.hnav__ic.is-p7 { background: repeating-conic-gradient(#e36fb6 0 25%, #fed3ed 0 50%) 0 0 / 6px 6px; }
.hnav__ic.is-p8 { background: repeating-linear-gradient(45deg, #3f8f5a 0 2px, #cfe8d7 2px 5px); }
/* 21.10.2026, Christian: "gib shop check auch ein icon mit farbe" / "webseite check auch" - own pattern for the check pages */
.hnav__ic.is-p9 { background: repeating-linear-gradient(-45deg, #d9483b 0 2px, #f6c9c4 2px 5px); }
@media (prefers-reduced-motion: reduce) {
  .hnav__grund, [data-navigation-status="active"] .hnav__grund, .hnav__kopf, .hnav__akkordeon > *, .hnav__fuss { transition: none !important; }
}
/* The menu sits under the announcement bar, so it is that much shorter (footer button stays on screen). */
.hnav__grund, [data-navigation-status="active"] .hnav__grund, .hnav__gruppe { height: calc(100dvh - var(--ann-off, 0px)); }
/* Logo a bit smaller (20.10.2026, Christian: "mach logo oben links bisschen kleiner"): 24 px high at 1440 instead of 28,
   18 px at 390 instead of 19.5, on one line in between; above 1440 it follows the root (27 px at 1920). */
.nfr .nfr-wortmarke { height: 1.5rem; }
@media (max-width: 1439px) { .nfr .nfr-wortmarke { height: clamp(18px, calc(18px + (100vw - 390px) * 6 / 1050), 24px); } }

/* Bigger logo on tablet and phone (Christian 21.10.2026: "christianchaefer logo auf mobile viel zu klein", again "logo auf handy zu klein"); was 18-20px. */
@media (max-width: 991px) { .nfr .nfr-wortmarke, .hnav .nfr-wortmarke { height: 26px; } }
@media (max-width: 479px) { .nfr .nfr-wortmarke, .hnav .nfr-wortmarke { height: 24px; } } /* "logo tick zu gross jetzt auf handy" */

/* 21.10.2026, Christian (phone): "nav scheint noch wieder animation zu haben beim scrollen, die wackelt komisch". The header followed the
   announcement bar via js (top = bar height - scrollY on every scroll event); iOS Safari applies those late during momentum scrolling,
   so the bar jittered. Where scroll-driven animations exist, the offset now runs on the scroll timeline itself (in sync, no js per frame);
   js/ankuendigung.js only measures the bar height (--ann-h). Older browsers keep the js offset. */
@supports (animation-timeline: scroll()) {
  .nfr-header, .hnav__karte { top: 0; animation: nfr-ann-off linear both; animation-timeline: scroll(root); animation-range: 0 var(--ann-h, 40px); }
  @keyframes nfr-ann-off { from { translate: 0 var(--ann-h, 0px); } to { translate: 0 0; } }
}