/* ══ Maritime Schicht, gilt für die ganze Seite ══════════════════════════
Drei Zeichen aus der Bordpraxis, überall gleich: Peilstriche als Marke vor
jedem Kicker, Wasserlinien statt harter Trennstriche, Zahlenwimpel für
Schrittfolgen. Wer sie einzeln braucht, nutzt die nm-Klassen. */
/* Peilstriche: Tiefgangsmarken, alle fünf Striche einer lang */
.nm-peilung{display:inline-block;width:34px;height:9px;vertical-align:-1px;
background-image:repeating-linear-gradient(to right,var(--color-accent) 0 1px,transparent 1px 5px),
repeating-linear-gradient(to right,var(--color-accent) 0 1px,transparent 1px 21px);
background-size:100% 4px,100% 9px;background-position:left bottom,left bottom;background-repeat:no-repeat;
opacity:.55}
/* Die Marke sitzt nur am echten Sektionskicker: erstes Element seiner Sektion.
Feldbeschriftungen und Kartenlabel bleiben unberührt — sonst bekäme jedes
„Monat" und „Versichert" Peilstriche. */
main > p:first-child[style*="text-transform: uppercase"]::before,
section > p:first-child[style*="text-transform: uppercase"]::before,
article > p:first-child[style*="text-transform: uppercase"]::before{
content:"";display:inline-block;width:30px;height:8px;margin-right:11px;vertical-align:-1px;
background-image:repeating-linear-gradient(to right,currentColor 0 1px,transparent 1px 5px),
repeating-linear-gradient(to right,currentColor 0 1px,transparent 1px 21px);
background-size:100% 3.5px,100% 8px;background-position:left bottom,left bottom;background-repeat:no-repeat;
opacity:.5}
/* Wasserlinie: Trennstrich, der an den Enden ausläuft — darüber läuft ein
Lichtschein wie Mondlicht über der Dünung. Die reine Deckkraftänderung war
nicht zu sehen, deshalb wandert jetzt ein Glanzpunkt entlang der Linie. */
@keyframes nm-duenung{0%{background-position:-40% 0}100%{background-position:140% 0}}
main hr:not([class]),section hr:not([class]),article hr:not([class]),.nm-wasserlinie{
position:relative;height:2px;border:0;margin:0;overflow:hidden;
background:linear-gradient(to right,transparent,color-mix(in srgb,var(--color-accent) 42%,transparent) 12%,color-mix(in srgb,var(--color-accent) 42%,transparent) 88%,transparent)}
main hr:not([class])::after,section hr:not([class])::after,article hr:not([class])::after,.nm-wasserlinie::after{
content:"";position:absolute;inset:0;
background-image:linear-gradient(to right,transparent 0%,color-mix(in srgb,var(--color-accent-100) 85%,transparent) 50%,transparent 100%);
background-size:34% 100%;background-repeat:no-repeat;
animation:nm-duenung 9s linear infinite}
@media (prefers-reduced-motion:reduce){
main hr:not([class])::after,section hr:not([class])::after,article hr:not([class])::after,.nm-wasserlinie::after{animation:none;opacity:.5}}
/* Zahlenwimpel: Doppelstander mit Schwalbenschwanz für Schrittfolgen */
.nm-wimpel{display:inline-flex;width:26px;height:20px;align-items:center;justify-content:flex-start;
padding-left:5px;box-sizing:border-box;font-size:15.5px;font-feature-settings:'tnum' 1;
clip-path:polygon(0 0,100% 0,74% 50%,100% 100%,0 100%);
background:var(--color-accent);color:#08202f}
.nm-wimpel[data-aus]{background:color-mix(in srgb,var(--color-text) 14%,transparent);color:color-mix(in srgb, var(--color-text) 72%, transparent)}
/* Trennlinien in der Fußzeile laufen an beiden Enden aus, statt hart zu enden.
border-image trägt den Verlauf, damit keine Seite angefasst werden muss —
sichtbar wird nur die Kante, die auch eine Breite hat. */
footer [style*="border-top: 1px solid"],
footer [style*="border-bottom: 1px solid"],
footer .fo-kontakt{
border-image:linear-gradient(to right,transparent,color-mix(in srgb,var(--color-neutral-700) 92%,transparent) 8%,color-mix(in srgb,var(--color-neutral-700) 92%,transparent) 92%,transparent) 1 !important}
/* Die Welle über der Fußzeile: an den Rändern ausgeblendet und in Gegenphase
zur Kopfwelle, damit die Seite nicht im Takt pulsiert. */
footer > svg[aria-hidden="true"]{
animation:nm-welle 6s ease-in-out infinite reverse;
-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}
@media (prefers-reduced-motion:reduce){
footer > svg[aria-hidden="true"]{animation:none}}
/* Welle als Trenner im Inhalt: dieselbe Kurve wie an Kopf und Fußzeile.
Eigene Keyframes, weil dort zwei Deckkraft-Faktoren übereinanderliegen
(Element und SVG-Pfad) — hier gibt es nur einen. */
@keyframes nm-welle-trenner{0%,100%{transform:translateY(0);opacity:.30}50%{transform:translateY(3px);opacity:.42}}
.nm-welle{display:block;height:10px;border:0;margin:0;pointer-events:none;
background:linear-gradient(to right,transparent,var(--color-accent) 22%,var(--color-accent) 78%,transparent);
filter:drop-shadow(0 0 4px var(--color-accent));
animation:nm-welle-trenner 7s ease-in-out infinite;
-webkit-mask-image:url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media (prefers-reduced-motion:reduce){.nm-welle{animation:none;opacity:.36}}
/* Elemente über die ganze Fensterbreite (Wellen, Bänder) dürfen nicht an der
Inhaltsspalte hängen. Das Clip liegt deshalb am Seitenkörper, nicht an der
Sektion — sonst schneidet jede Sektion ihre eigene Welle ab. */
body{overflow-x:clip}
/* ══ Weiche Kästen ═══════════════════════════════════════════════════════
Rahmen schließen nicht hart, sondern verlieren sich nach unten — dieselbe
Geste wie bei den Linien. Die Rahmenfarbe des Kastens wandert als --rand
in die Regel, damit jede Farbcodierung erhalten bleibt. */
.nm-weich{position:relative;border-color:transparent!important}
.nm-weich:hover::before{border-color:var(--rand-hover,var(--rand,var(--color-neutral-700)))}
.nm-weich::before{content:"";position:absolute;inset:0;border:1px solid var(--rand,var(--color-neutral-700));border-radius:inherit;
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 42%,rgba(0,0,0,.35) 78%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 42%,rgba(0,0,0,.35) 78%,transparent 100%);
pointer-events:none}