/*
 * ObjektFlow Sitebuilder – Designpaket Nocturne, Bereich Website (Grundlage, Kopf und Fuß, Bausteine).
 * Dunkel und ruhig, Inter 400/500, Radius 10/8, Akzent als 2-px-Verlaufslinie
 * mit auslaufenden Enden, Knöpfe 1-px-Umriss. Farben folgen der Kundenpalette
 * (ObjektFlow → Design, --vbc-*), Rückfall auf die Paket-Tokens (--of-paket-*).
 * Alle Regeln wirken nur unter .of-bereich--website.of-design--nocturne (bzw. am
 * Wurzelelement mit .of-design--nocturne); Referenz: docs/design-rueckgabe/.
 */
/* Schriften lokal (SIL Open Font License 1.1, OFL.txt in schriften/) – nie von Google Fonts. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(schriften/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(schriften/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* — Nocturne gemeinsam (gleich in allen Nocturne-Paketen des Sitebuilders) — */
.of-bereich.of-design--nocturne {
  --d-grund: var(--vbc-bg, var(--of-paket-grund, #161826));
  --d-panel: var(--vbc-panel, #1b1d2c);
  --d-flaeche: var(--of-paket-flaeche, #1e2133);
  --d-bild: #2a2e45;
  --d-schrift: var(--vbc-fg, var(--of-paket-schrift, #e9e9ed));
  --d-leise: var(--of-paket-leise, #a9aabb);
  --d-akzent: var(--vbc-accent, var(--of-paket-akzent, #9184d9));
  --d-akzent-text: var(--of-paket-akzent-text, #b5abfc);
  --d-linie: var(--vbc-line, rgba(233, 233, 237, .16));
  --d-radius: var(--of-paket-radius, 10px);
  --d-radius-klein: var(--of-paket-radius-klein, 8px);
  --d-titel: var(--vbc-font, var(--of-paket-schrift-titel, Inter, system-ui, sans-serif));
  --d-text: var(--vbc-font, var(--of-paket-schrift-text, Inter, system-ui, sans-serif));
  --d-verlauf: linear-gradient(90deg, transparent, var(--d-akzent) 48px, var(--d-akzent) calc(100% - 48px), transparent);
  font-family: var(--d-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.of-bereich.of-design--nocturne img { max-width: 100%; }
.of-bereich.of-design--nocturne :focus-visible { outline: 2px solid var(--d-akzent); outline-offset: 2px; }
.of-bereich.of-design--nocturne ::selection { background: color-mix(in srgb, var(--d-akzent) 35%, transparent); }

/* Video (YouTube der Basis): Umriss-Kreis im Akzent, Hinweis 62 %, Titel als Kicker. */
.of-design--nocturne .of-video__rahmen { border-radius: var(--d-radius-klein); background: var(--d-bild); }
.of-design--nocturne .of-video__start { background: rgba(22, 24, 38, .28); }
.of-design--nocturne .of-video__start:hover, .of-design--nocturne .of-video__start:focus-visible { background: rgba(22, 24, 38, .45); }
.of-design--nocturne .of-video__symbol { display: none; }
.of-design--nocturne .of-video__start::before {
  content: ""; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--d-akzent);
  background: rgba(22, 24, 38, .55) no-repeat 54% 50% / 20px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M0 0l20 12L0 24z' fill='%23b5abfc'/%3E%3C/svg%3E");
}
.of-design--nocturne .of-video__start-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.of-design--nocturne .of-video__hinweis { background: rgba(22, 24, 38, .82); color: rgba(233, 233, 237, .62); font-size: 12px; }
.of-design--nocturne .of-video__titel { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--d-akzent-text); margin-top: 12px; }

/* Sprachumschalter [objectflow_sprachen] und Menüpunkt */
.of-design--nocturne .of-sprachen { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.of-design--nocturne .of-sprachen a { color: inherit; opacity: .62; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.of-design--nocturne .of-sprachen a:hover { opacity: 1; }
.of-design--nocturne .of-sprachen__aktiv { color: var(--vbc-accent, #b5abfc); }

/* ==================================================================
   Seiten, Kopf und Fuß (body.of-website--nocturne). Nocturne ist der
   Bestand von Valentina Bootservice: Kopf und Fuß gestaltet das Theme
   (Divi Theme Builder) selbst. Das Paket ergänzt nur, was die Rückgabe
   für alle Themes verlangt – Menüknopf 44 × 44 mit zwei Linien.
   ================================================================== */
body.of-website--nocturne .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; padding: 0; background: linear-gradient(currentColor, currentColor) right calc(50% - 3.5px) / 22px 2px no-repeat, linear-gradient(currentColor, currentColor) right calc(50% + 3.5px) / 22px 2px no-repeat; }
body.of-website--nocturne .wp-block-navigation__responsive-container-open svg { visibility: hidden; }
body.of-website--nocturne .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Sprachumschalter außerhalb eines Bereichs (z. B. im Kopf des Themes): nav.of-sprachen--nocturne */
nav.of-sprachen--nocturne { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
nav.of-sprachen--nocturne a { color: inherit; opacity: .62; text-decoration: none; }
nav.of-sprachen--nocturne a:hover { opacity: 1; }
nav.of-sprachen--nocturne .of-sprachen__aktiv { color: var(--vbc-accent, #9184d9); }

/* Hinweise, die nur Redakteure sehen */
.of-hinweis-redaktion { padding: 12px 16px; border: 1px dashed var(--vbc-accent, #9184d9); border-radius: 8px; font-size: 13px; }