-Wrapper; den NICHT als Badge stylen */
.nav-b, .nav-logo:not(a) {
width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
background: linear-gradient(135deg, var(--accent), var(--accent-dk));
display: flex; align-items: center; justify-content: center;
font-size: 0.875rem; font-weight: 900; color: var(--accent-on);
}
.nav-wordmark { font-size: 0.8125rem; font-weight: 700; color:var(--text-muted-dark-bg); letter-spacing: .05em }
/* Der Akzentpunkt hinter dem Produktnamen ("sherwood." / "marian.").
Stand bisher nur in sherwood.css und nottingham.css — marian und robin
faerbten ihn per style-Attribut im Markup. Damit war er nach der
Umstellung auf das Nav-Modul weiss. Gehoert hierher, mit dem Site-Token. */
.nav-brand .lo-accent,
.nav-brand-sub .lo-accent { color: var(--accent) }
/* Trennlinie (robin: .nav-sep | sherwood: .nav-logo-sep) */
.nav-sep, .nav-logo-sep {
width: 1px; height: 16px; background: rgba(255,255,255,.15); flex-shrink: 0;
}
/* Desktop-Nav-Links — bleiben versteckt.
Entschieden am 27.08.2026 (Peter): der Burger ist auf allen fuenf Sites das
gewollte Muster, auch bei 1400px. Keine Site setzt desktopLinks im Nav-Modul,
und www hat seine versteckte Liste am selben Tag aus dem Markup genommen.
Der frueher hier stehende Hinweis "sherwood überschreibt mit display:flex"
stimmte nicht mehr: sherwood tut das seit dem Umstieg aufs Nav-Modul nicht. */
.nav-links { display: none !important }
.nav-end { display: flex; align-items: center; gap: 10px; margin-left: auto }
/* Theme-Toggle */
.nav-theme {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.15); background: transparent;
color:var(--text-muted-dark-bg); cursor: pointer; font-size: 1rem;
display: flex; align-items: center; justify-content: center;
transition: border-color .2s, color .2s;
}
.nav-theme:hover { border-color: var(--accent); color: var(--accent) }
/* CTA-Button */
/* Zurueck-Link der Unterseiten. Stand bisher nur inline in den 15
Rechtsseiten — beim Umstieg auf das Nav-Modul waere er unformatiert
geblieben. Wortlaut aus sherwood/impressum.html uebernommen. */
.nav-back {
font-size: 0.8125rem; color:var(--text-muted-dark-bg); text-decoration: none;
display: flex; align-items: center; gap: 6px; transition: color .2s;
}
.nav-back:hover { color: var(--accent) }
.nav-cta {
background: linear-gradient(135deg, var(--accent), var(--accent-dk));
color: var(--accent-on);
border: none; border-radius: var(--r-lg); padding: 7px 18px;
font-size: 0.8125rem; font-weight: 700; font-family: var(--font-base); cursor: pointer;
transition: opacity .2s, transform .2s;
display: flex; align-items: center; gap: 6px;
white-space: nowrap; text-decoration: none;
}
.nav-cta:hover { opacity: .9; transform: translateY(-1px) }
/* Burger-Button */
.nav-burger {
width: 36px; height: 36px; border-radius: var(--r-md);
border: 1px solid rgba(255,255,255,.15); background: transparent;
color: rgba(255,255,255,.7); cursor: pointer; font-size: 1.125rem;
display: flex; align-items: center; justify-content: center;
transition: border-color .2s, color .2s; margin-left: 8px; flex-shrink: 0;
}
.nav-burger:hover { border-color: var(--accent); color: var(--accent) }
/* < 520 px: CTA, Lang, Theme und Trennzeichen in den Burger verlagern */
@media (max-width: 520px) {
.nav-sep, .nav-logo-sep, .nav-wordmark, .nav-cta,
.lang-picker, .nav-theme { display: none }
}
/* ════ LANGUAGE PICKER ════ */
.lang-picker { position: relative; flex-shrink: 0 }
.lang-btn {
display: flex; align-items: center; gap: 5px; padding: 5px 10px;
height: 32px; border-radius: var(--r-md); background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.7);
font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; cursor: pointer;
font-family: var(--font-base); transition: background .2s, color .2s; white-space: nowrap;
}
.lang-btn:hover { background: rgba(255,255,255,.12); color: var(--accent) }
.lang-btn i { font-size: 0.8125rem }
.lang-dropdown {
position: absolute; top: calc(100% + 8px); right: 0;
background: var(--dropdown-bg); border: 1px solid var(--accent-t25);
border-radius: var(--r-lg); padding: 6px; min-width: 160px;
box-shadow: 0 8px 32px rgba(0,0,0,.4);
display: none; flex-direction: column; gap: 2px; z-index: var(--z-modal);
}
.lang-dropdown.open { display: flex }
.lang-flag { font-size: 0.875rem; line-height: 1 }
.lang-option {
display: flex; align-items: center; gap: 8px; padding: 7px 10px;
border-radius: var(--r-md); font-size: 0.75rem; font-weight: 600;
color: rgba(255,255,255,.65); cursor: pointer; transition: all .15s;
border: none; background: none; font-family: var(--font-base); text-align: left;
}
/* Sprachkuerzel vor dem Sprachnamen ("DE Deutsch"). War nirgends gestylt —
feste Breite, damit die Namen untereinander buendig stehen. */
.lang-code { display: inline-block; min-width: 1.75em; color:var(--text-muted-dark-bg); font-weight: 700 }
.lang-option:hover { background: var(--accent-t12); color: var(--accent) }
.lang-option.active { color: var(--accent); background: var(--accent-t07) }
/* ════ MOBILE MENU ════ */
/* Mobile: full-screen slide-in von rechts */
.nav-mobile-menu {
position: fixed; inset: 0; z-index: calc(var(--z-sticky) - 1);
background: var(--dropdown-bg, color-mix(in srgb, var(--navy) 98%, transparent));
display: flex; flex-direction: column;
padding: calc(var(--nav-h) + 24px) 28px 40px;
transform: translateX(100%);
transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s;
overflow-y: auto; opacity: 1;
}
.nav-mobile-menu.open { transform: translateX(0) }
/* Desktop ≥ 768px: kompaktes Dropdown-Panel unter dem Burger */
@media (min-width: 768px) {
.nav-mobile-menu {
top: calc(var(--nav-h) + 8px);
/* Rechtsbuendig zum Burger statt zum Fensterrand.
.nav-inner ist auf --content-max begrenzt und zentriert, mit 24px
Innenabstand — der Burger sitzt also bei breiten Fenstern deutlich
weiter innen als 12px vom Rand. Gemessen 25.08.2026: bei 1440px lag
das Menue 132px daneben.
Prozent statt vw, weil ein fixiertes Element gegen dieselbe Breite
rechnet wie die Leiste selbst — eine klassische Scrollleiste
verschoebe die vw-Rechnung. */
right: max(24px, calc((100% - var(--content-max)) / 2 + 24px));
bottom: auto;
left: auto;
width: 292px;
max-height: calc(100vh - var(--nav-h) - 32px);
padding: 12px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,.12);
box-shadow:
0 28px 60px rgba(0,0,0,.55),
0 6px 20px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.09);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
transform: translateY(-10px) scale(.96);
transform-origin: top right;
opacity: 0;
pointer-events: none;
transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .18s;
}
.nav-mobile-menu.open {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
/* Kompakte Abstände im Desktop-Dropdown */
.nav-mobile-links { gap: 2px; margin-bottom: 10px }
.nav-mobile-links li a,
.nav-mobile-links li button,
.nav-mobile-links a { font-size: 0.875rem; padding: 9px 12px }
.nav-mobile-links li a i,
.nav-mobile-links li button i,
.nav-mobile-links a i { font-size: 1rem }
.nav-mobile-actions { padding-top: 10px; gap: 7px }
.nav-mobile-cta { font-size: 0.875rem; padding: 10px 16px }
.nav-mobile-login { font-size: 0.8125rem; padding: 9px }
.nav-mobile-meta { padding-top: 10px; margin-top: 0 }
.nav-mobile-theme { padding: 8px 12px; font-size: 0.75rem }
.nav-mobile-langs { padding-top: 10px; gap: 5px }
.nav-mobile-lang { padding: 6px 4px; font-size: 0.625rem }
.nav-mobile-lang-flag { font-size: 0.8125rem }
}
.nav-mobile-links {
list-style: none; display: flex; flex-direction: column;
gap: 4px; margin-bottom: 32px;
}
.nav-mobile-links li a,
.nav-mobile-links li button,
.nav-mobile-links a {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px; border-radius: var(--r-xl);
color: rgba(255,255,255,.75); font-size: 1.0625rem; font-weight: 600;
text-decoration: none; border: 1px solid transparent;
background: none; font-family: var(--font-base); cursor: pointer;
width: 100%; text-align: left;
transition: color .15s, background .15s, border-color .15s;
}
.nav-mobile-links li a:hover,
.nav-mobile-links li button:hover,
.nav-mobile-links a:hover {
color: #fff;
background: var(--accent-t07); border-color: var(--accent-t15);
}
.nav-mobile-links li a i,
.nav-mobile-links li button i,
.nav-mobile-links a i {
color: var(--accent); font-size: 1.25rem; flex-shrink: 0;
}
.nav-mobile-actions {
display: flex; flex-direction: column; gap: 10px;
padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
}
.nav-mobile-cta {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px; border-radius: var(--r-xl);
background: linear-gradient(135deg, var(--accent), var(--accent-dk));
color: var(--accent-on);
font-size: 0.9375rem; font-weight: 700; text-decoration: none; border: none;
font-family: var(--font-base); cursor: pointer;
}
.nav-mobile-login {
display: flex; align-items: center; justify-content: center;
padding: 13px; border-radius: var(--r-xl);
border: 1px solid rgba(255,255,255,.15);
color: rgba(255,255,255,.7); font-size: 0.9375rem; font-weight: 600;
text-decoration: none;
}
.nav-mobile-meta {
display: flex; align-items: center; justify-content: space-between;
padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08);
margin-top: 8px; gap: 12px;
}
.nav-mobile-theme {
display: flex; align-items: center; gap: 8px; padding: 10px 16px;
border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.15);
background: transparent; color: rgba(255,255,255,.7);
font-size: 0.8125rem; font-weight: 600; cursor: pointer;
font-family: var(--font-base); transition: border-color .2s, color .2s;
}
.nav-mobile-theme:hover { border-color: var(--accent); color: var(--accent) }
.nav-mobile-langs {
display: grid; grid-template-columns: repeat(4,1fr); gap: 6px;
padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08);
}
.nav-mobile-lang {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 8px 6px; border-radius: var(--r-lg);
border: 1px solid rgba(255,255,255,.1); background: transparent;
color: rgba(255,255,255,.55); font-size: 0.6875rem; font-weight: 600;
cursor: pointer; font-family: var(--font-base); transition: all .15s;
}
.nav-mobile-lang:hover {
background: var(--accent-t07); border-color: var(--accent-t15); color: var(--accent);
}
.nav-mobile-lang.active {
background: var(--accent-t12); border-color: var(--accent-t25); color: var(--accent);
}
.nav-mobile-lang-flag { font-size: 1.125rem; line-height: 1 }
/* ════ FOOTER ════ */
.footer { background: var(--navy); border-top: 1px solid rgba(255,255,255,.07); padding: 48px 24px 32px }
.footer-inner { max-width: var(--content-max); margin: 0 auto }
.footer-top {
display: grid; grid-template-columns: 1fr auto auto auto;
gap: 48px; margin-bottom: 40px; align-items: start;
}
.footer-brand-name { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 8px }
.footer-brand-name span { color: var(--accent) }
.footer-brand p { font-size: 0.8125rem; color:var(--text-muted-dark-bg); line-height: 1.6; max-width: 230px }
.footer-col h4 {
font-size: 0.6875rem; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color:var(--text-muted-dark-bg); margin-bottom: 14px;
}
.footer-col a {
display: block; font-size: 0.875rem; color:var(--text-muted-dark-bg);
text-decoration: none; margin-bottom: 8px; transition: color .2s;
}
.footer-col a:hover { color: #fff }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.07); padding-top: 20px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-size: 0.75rem; color: rgba(255,255,255,.55) } /* WCAG AA auf --navy */
.footer-products { display: flex; gap: 16px; flex-wrap: wrap }
.footer-products a {
font-size: 0.75rem; color:var(--text-muted-dark-bg); /* WCAG AA auf --navy */
text-decoration: none; transition: color .2s;
}
.footer-products a:hover { color: rgba(255,255,255,.65) }
@media (max-width: 960px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px } }
@media (max-width: 600px) {
.footer-top { grid-template-columns: 1fr; gap: 28px }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px }
}
/* ════ REVEAL ANIMATION ════ */
@media (prefers-reduced-motion: no-preference) {
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s, transform .55s }
.reveal.visible { opacity: 1; transform: none }
/* Hover: höhere Spezifität damit translateY nicht durch .reveal.visible{transform:none} blockiert wird */
.feat-card.reveal.visible { transition: transform .25s, box-shadow .25s }
.feat-card.reveal.visible:hover { transform: translateY(-5px) }
.eco-card.reveal.visible { transition: transform .25s, box-shadow .25s }
.eco-card.reveal.visible:hover { transform: translateY(-5px) }
.cta-path.reveal.visible { transition: transform .25s, box-shadow .25s }
.cta-path.reveal.visible:hover { transform: translateY(-5px) }
}
/* ════════════════════════════════════════════════════════════
FEAT-CARD — Einheitliche Inhaltskachel
Goldstandard: product-card von www.bowhuman.eu
• nm-a-bg/out/sm → Neumorphismus hell + dunkel
• ::before → 3px Akzentbalken (var(--accent))
• hover → translateY(-5px) + stärkerer nm-Schatten
Multi-Akzent-Overrides (Robin/Marian) in jeweiliger Site-CSS.
════════════════════════════════════════════════════════════ */
/* ── Grid ── */
.feat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
/* ── Card ── */
.feat-card {
background: var(--nm-a-bg);
border-radius: 20px;
padding: 24px;
box-shadow: var(--nm-a-out);
transition: transform .25s, box-shadow .25s;
position: relative; overflow: hidden;
}
.feat-card::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0;
height: 3px; border-radius: 20px 20px 0 0;
background: var(--accent);
}
.feat-card:hover { transform: translateY(-5px); box-shadow: var(--nm-shadow-hover) }
/* ── Icon ── */
.feat-icon, .feat-card-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--nm-a-bg);
box-shadow: var(--nm-a-sm);
display: flex; align-items: center; justify-content: center;
font-size: 1.25rem; margin-bottom: 14px;
color: var(--accent-dk);
flex-shrink: 0;
}
/* :where() nimmt den Klassen darin ihre Spezifitaet, damit die Farbvarianten
der Sites im Dunkeln stehen bleiben. Vorher hiess die Regel
html.dark .feat-icon — Spezifitaet (0,2,1) — und schlug damit robins
.feat-icon.g (0,2,0). Folge: die vier verschieden gefaerbten Symbole auf
robin waren im Dunkeln alle cyan, die Unterscheidung nach Produkt war weg.
Mit :where() faellt die Regel auf (0,1,1) und verliert wieder gegen jede
Variante. Gemessen 27.08.2026. */
html.dark :where(.feat-icon, .feat-card-icon) { color: var(--accent) }
/* ── Text ── */
.feat-card h3, .feat-card-title {
font-size: 1rem; font-weight: 700;
color: var(--text-primary); margin-bottom: 6px; line-height: 1.25;
}
.feat-card p, .feat-card-desc {
font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65;
}
/* ── Badge ── */
.feat-badge {
position: absolute; top: 14px; right: 16px;
font-size: 0.5625rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
padding: 3px 8px; border-radius: var(--r-full);
background: var(--accent-t12);
color: var(--accent);
border: 1px solid var(--accent-t25);
}
/* ════════════════════════════════════════════════════════════
LEGAL PAGE (Datenschutz / Impressum / Nutzungsbedingungen)
Gemeinsame Struktur fuer alle 5 Sites — Hero-Header, Karte, Footer.
Jede Site liefert nur --accent/--accent-dk/--accent-t07/12/15/25 (siehe
Kopfkommentar oben); nichts hier ist auf eine Site hartcodiert.
Vereinheitlicht 2026-08-26 (Peter: "unterschiedliche navbar inhalte,
unterschiedliche footer, Farbverlaeufe im Logo... vereinheitliche das
Erscheinungsbild").
════════════════════════════════════════════════════════════ */
.legal-header{
background: var(--grad-hero);
padding: clamp(48px,8vw,96px) clamp(20px,6vw,80px) clamp(40px,6vw,72px);
text-align: center; position: relative; overflow: hidden;
}
.legal-header::before{
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 70% at 50% 100%, var(--accent-t07), transparent 70%);
pointer-events: none;
}
.legal-header-inner{ position: relative; z-index: 1; max-width: 640px; margin: 0 auto }
.legal-badge{
display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
font-size: 0.625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: var(--accent);
border: 1px solid var(--accent-t25); background: var(--accent-t07);
padding: 5px 14px; border-radius: var(--r-full);
}
.legal-badge i{ font-size: 0.875rem }
.legal-header h1{
font-size: clamp(1.75rem,5vw,3rem); font-weight: 800; color: #fff;
letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px;
}
.legal-updated{ font-size: 0.8125rem; color:var(--text-muted-dark-bg); margin-top: 8px }
.legal-back{
display: inline-flex; align-items: center; gap: 6px; color:var(--text-muted-dark-bg);
font-size: 0.8125rem; font-weight: 600; text-decoration: none; transition: color .2s;
margin-bottom: 28px;
}
.legal-back:hover{ color: rgba(255,255,255,.85) }
.legal-body-wrap{ max-width: var(--content-narrow); margin: 0 auto; padding: clamp(40px,6vw,72px) clamp(20px,5vw,40px) }
.legal-article{
background: var(--white); border-radius: var(--r-xl); padding: clamp(28px,4vw,48px);
box-shadow: var(--shadow-card); border: 1px solid var(--border);
}
/* 26.08.2026 (Peter): h2 sass "manchmal sehr nah am vorigen Text", UND bei
sherwood/nottingham gar nicht verbessert trotz Abstand-Erhoehung - Ursache
war, dass diese beiden Sites (anders als robin/marian/www) jedes Kapitel in
einem eigenen wrapten (Rest eines alten,
Vor-Runde-2-Templates), was Margin-Collapsing durch mehrere verschachtelte,
ungestylte Boxen ermoeglichte - ein "anderer Ansatz" (Peter), der trotz
display:flow-root-Versuch nicht zuverlaessig denselben Abstand ergab wie
robins/marians/wwws flache Struktur. Echter Fix: die .doc-section-Wrapper
wurden aus allen 6 sherwood/nottingham-Rechtsseiten entfernt (Inhalt
unveraendert, nur der Wrapper-Div weg) - jetzt haben alle 5 Sites exakt
dieselbe flache h2/p-Geschwister-Struktur direkt in .legal-article, der
Abstand kommt ueberall gleich und deterministisch aus margin-collapse
zwischen echten Geschwistern (kein Wrapper mehr, der etwas verschlucken
koennte). display:flow-root auf .doc-section daher nicht mehr noetig. */
.legal-article h2{
font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 36px 0 12px;
padding-left: 12px; border-left: 3px solid var(--accent); line-height: 1.3;
}
.legal-article h2:first-child{ margin-top: 0 }
.legal-article h3{ font-size: 0.9375rem; font-weight: 700; margin: 18px 0 8px; color: var(--text-primary) }
.legal-article p{ font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.75; margin-bottom: 12px }
.legal-article p:last-child{ margin-bottom: 0 }
.legal-article ul, .legal-article ol{ margin: 8px 0 12px 20px; color: var(--text-secondary); font-size: 0.9375rem }
.legal-article li{ margin-bottom: 4px; line-height: 1.65 }
.legal-article address{ font-style: normal; line-height: 1.8; color: var(--text-secondary) }
.legal-article code{
font-family: var(--font-mono); font-size: 0.8125rem;
background: var(--accent-t07); color: var(--accent);
padding: 2px 6px; border-radius: 4px; border: 1px solid var(--accent-t15);
}
.legal-article a{ color: var(--accent); text-decoration: none }
.legal-article a:hover{ text-decoration: underline }
.legal-article .highlight-box{
background: var(--accent-t07); border: 1px solid var(--accent-t15);
border-radius: var(--r-lg); padding: 18px 20px; margin: 20px 0;
}
.legal-article .highlight-box p{ margin: 0; font-size: 0.875rem }
html.dark .legal-article{ border-color: rgba(255,255,255,.08) }
/* Footer-Cross-Links zu den anderen 4 Sites — fixe Markenfarbe, siehe
--brand-* in bowhuman-tokens.css. */
.footer-col a.brand-robin, .footer-products a.brand-robin { color: var(--brand-robin) }
.footer-col a.brand-marian, .footer-products a.brand-marian { color: var(--brand-marian) }
.footer-col a.brand-sherwood, .footer-products a.brand-sherwood { color: var(--brand-sherwood) }
.footer-col a.brand-nottingham, .footer-products a.brand-nottingham { color: var(--brand-nottingham) }
/* Phosphor-Icons sind rein dekorativ (aria-hidden) — nie fokussierbar/waehlbar. */
i[aria-hidden="true"]{ pointer-events: none; user-select: none }
/* ── Sprachhuelle ──────────────────────────────────────────────────
Steht neben einem Text noch ein Symbol, kann das Attribut data-i18n
nicht am Elternteil haengen — die Sprachmaschine wuerde beim Setzen
von textContent das Symbol mit ueberschreiben. Der Text bekommt darum
ein eigenes .
display:contents sorgt dafuer, dass dieses KEINEN eigenen Kasten
erzeugt: der Text bleibt anonymer Inhalt seines Elternteils, genau wie
vorher. Ohne die Zeile wird das in einem Flex-Container zum
Flex-Element und verschiebt das Layout — gemessen am 26.08.2026 wuchs
sherwoods .map-svg-wrap dadurch um 27px.
──────────────────────────────────────────────────────────────── */
.i18n-wrap { display: contents }