/* DOSIGNY — Seitentyp Lexikon: Sternbild je Begriff, Wissensnetz in der Übersicht, Sofortsuche.
 * Erstellt durch Dominik Baurhenn - DOSIGNY — https://www.dosigny.com */
.dz-visuell-weg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dz-lkat--webdesign { --kat: #45bfa6; } .dz-lkat--seo { --kat: #f5b62a; } .dz-lkat--technik { --kat: #8b8ff8; }
.dz-lkat--recht { --kat: #ff6b6b; } .dz-lkat--marketing { --kat: #f070b4; } .dz-lkat--ki { --kat: #a98bfa; }

/* Kopf mit Sternbild */
.dz-lxkopf .dz-fallkopf__media { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.dz-lxkopf__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--a-fluss-l); align-items: center; }
.dz-lxkat { display: inline-flex; align-items: center; gap: var(--a-2); margin: 0 0 var(--a-3); font: 600 var(--fs-mini)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--kat, var(--c-tuerkis)); }
.dz-lxkat span { width: 9px; height: 9px; border-radius: 50%; background: var(--kat, var(--c-tuerkis)); box-shadow: 0 0 12px var(--kat, var(--c-tuerkis)); }
.dz-lxkopf__titel { max-width: 18ch; font-size: clamp(1.7rem, 4.6vw, 3.8rem); text-wrap: balance; hyphens: none; overflow-wrap: break-word; }
@media (max-width: 480px) { .dz-lxkopf__titel { font-size: clamp(1.35rem, 7vw, 2.2rem); } }
.dz-lxkopf__zusatz { display: block; margin-top: .35em; font-size: .38em; line-height: 1.25; letter-spacing: .02em; color: rgba(var(--c-hell-rgb),.75); overflow-wrap: break-word; }
/* Sehr lange Wörter (z. B. „(Suchmaschinenoptimierung)“) passen ungetrennt in jede Breite */
.dz-lxkopf__titel--lang { font-size: clamp(1.1rem, 2.6vw, 2.8rem); }
@media (max-width: 960px) { .dz-lxkopf__titel--lang { font-size: clamp(1.05rem, 4.8vw, 2.4rem); } }
.dz-fallanfrage .dz-h-gross, .dz-faq .dz-h-gross { font-size: clamp(1.15rem, 2.9vw, 2.8rem); hyphens: none; }
@media (max-width: 960px) { .dz-fallanfrage .dz-h-gross, .dz-faq .dz-h-gross { font-size: clamp(1.15rem, 5.4vw, 2.6rem); } }
.dz-lxkopf__kurz { max-width: 56ch; margin: var(--a-4) 0 0; padding-left: var(--a-4); border-left: 3px solid var(--kat, var(--c-tuerkis)); font-size: var(--fs-gross, 1.15rem); line-height: 1.55; color: var(--c-weiss); }
.dz-lxkopf__stern { margin: 0; min-width: 0; }
.dz-stern { display: block; width: 100%; height: auto; overflow: visible; }
.dz-stern__linie { stroke: var(--kat, var(--c-tuerkis)); stroke-width: 1.4; opacity: .55; }
.dz-stern__fein { stroke: rgba(var(--c-weiss-rgb),.16); stroke-width: 1; }
.dz-stern__fernpunkt { fill: rgba(var(--c-weiss-rgb),.3); }
.dz-stern__mitte circle { fill: var(--kat, var(--c-tuerkis)); }
.dz-stern__mitte .dz-stern__hof { fill: none; stroke: var(--kat, var(--c-tuerkis)); stroke-width: 1.5; opacity: .45; transform-box: fill-box; transform-origin: 50% 50%; animation: dz-lx-hof 3s ease-in-out infinite; }
@keyframes dz-lx-hof { 50% { transform: scale(1.18); opacity: .15; } }
.dz-stern__knoten circle { fill: var(--c-nacht); stroke: var(--kat, var(--c-tuerkis)); stroke-width: 2.5; transition: fill .2s; }
.dz-stern__knoten text { font: 600 17px/1 var(--f-text); fill: var(--c-hell); paint-order: stroke; stroke: var(--c-nacht); stroke-width: 5px; stroke-linejoin: round; }
.dz-stern__knoten:hover circle { fill: var(--kat, var(--c-tuerkis)); }
.dz-stern__knoten:hover text { fill: var(--c-weiss); }
.dz-stern__knoten, .dz-stern__linie, .dz-stern__fein, .dz-stern__fernpunkt { animation: dz-lx-rein .7s cubic-bezier(.2,.8,.2,1) both; transform-box: view-box; transform-origin: 50% 50%; }
.dz-stern__fein, .dz-stern__fernpunkt { animation-delay: .5s; }
.dz-stern .n1 { animation-delay: .05s; } .dz-stern .n2 { animation-delay: .1s; } .dz-stern .n3 { animation-delay: .15s; } .dz-stern .n4 { animation-delay: .2s; }
.dz-stern .n5 { animation-delay: .25s; } .dz-stern .n6 { animation-delay: .3s; } .dz-stern .n7 { animation-delay: .35s; } .dz-stern .n8 { animation-delay: .4s; } .dz-stern .n9 { animation-delay: .45s; }
@keyframes dz-lx-rein { from { opacity: 0; transform: scale(.4); } }

/* Text und Seitenspalte */
.dz-lxlesen { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 19rem); justify-content: space-between; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: var(--a-fluss-m) var(--a-fluss-l); }
.dz-lxtext { min-width: 0; font-size: clamp(1rem, .96rem + .2vw, 1.12rem); line-height: 1.75; color: rgba(var(--c-hell-rgb),.9); overflow-wrap: break-word; }
.dz-lxtext > * { margin: 0 0 1.1em; }
.dz-lxtext h2, .dz-lxtext h3 { margin: 1.9em 0 .55em; font: var(--fw-h) clamp(1.2rem, 1.05rem + .6vw, 1.55rem)/1.25 var(--f-display); color: var(--c-weiss); text-wrap: balance; }
.dz-lxtext strong { color: var(--c-weiss); }
.dz-lxtext a { color: var(--c-tuerkis); text-decoration: underline; text-underline-offset: .18em; }
.dz-lxtext ul, .dz-lxtext ol { padding-left: 1.3em; list-style: disc; }
.dz-lxtext ol { list-style: decimal; }
.dz-frage .dz-linhalt ul { display: block; padding-left: 1.3em; list-style: disc; }
.dz-frage .dz-linhalt li { margin-bottom: .3em; }
.dz-frage .dz-linhalt li::marker { color: var(--c-tuerkis); }
.dz-lxtext li { margin-bottom: .4em; }
.dz-lxtext li::marker { color: var(--c-tuerkis); }
.dz-lxtext code { padding: .1em .35em; border-radius: 6px; background: rgba(var(--c-weiss-rgb),.08); font: .88em/1.5 var(--f-mono); }
.dz-lxtext pre { overflow-x: auto; padding: var(--a-4); border-radius: 12px; background: #07050d; }
.dz-lxseite { position: sticky; top: clamp(5.5rem, 12svh, 7rem); display: grid; gap: var(--a-4); }
.dz-lxkarte { padding: var(--a-5); border: 1px solid rgba(var(--c-weiss-rgb),.1); border-radius: 16px; background: var(--c-flaeche); }
.dz-lxkarte__titel { margin: 0 0 var(--a-2); font: 600 var(--fs-mini)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--c-hell-rgb),.7); }
.dz-lxkarte ul { display: grid; margin: 0; padding: 0; list-style: none; }
.dz-lxkarte a { display: block; padding: var(--a-2) 0; border-bottom: 1px solid rgba(var(--c-weiss-rgb),.06); color: var(--c-hell); text-decoration: none; font-size: var(--fs-klein); }
.dz-lxkarte li:last-child a { border-bottom: 0; }
.dz-lxkarte a:hover { color: var(--c-tuerkis); }
.dz-lxseite__knopf { display: flex; justify-content: center; width: 100%; padding-inline: var(--a-3); font-size: var(--fs-klein); text-align: center; white-space: normal; }
.dz-lxnah { padding-bottom: var(--a-fluss-m); }
.dz-lxnah__titel { margin: 0 0 var(--a-3); font: 600 var(--fs-mini)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--c-hell-rgb),.7); }
.dz-lxnah ul { display: flex; flex-wrap: wrap; gap: var(--a-2); margin: 0; padding: 0; list-style: none; }
.dz-lxnah a { display: inline-flex; align-items: center; gap: var(--a-2); min-height: 44px; padding: 0 var(--a-4); border: 1px solid rgba(var(--c-weiss-rgb),.18); border-radius: 99px; color: var(--c-hell); font-size: var(--fs-klein); text-decoration: none; }
.dz-lxnah a span { width: 8px; height: 8px; border-radius: 50%; background: var(--kat, var(--c-tuerkis)); }
.dz-lxnah a:hover { border-color: var(--kat, var(--c-tuerkis)); color: var(--c-weiss); }
@media (max-width: 960px) {
  .dz-lxkopf__raster, .dz-lxlesen { grid-template-columns: minmax(0, 1fr); }
  .dz-lxkopf__stern { max-width: 30rem; }
  .dz-lxseite { position: static; }
}

/* Übersicht */
.dz-lxsuche { max-width: 36rem; margin-top: var(--a-5); }
.dz-lxsuche input { width: 100%; min-height: 52px; padding: 0 var(--a-4); border: 1px solid rgba(var(--c-weiss-rgb),.22); border-radius: 12px; background: rgba(var(--c-weiss-rgb),.05); color: var(--c-weiss); font: inherit; }
.dz-lxsuche input:focus-visible { outline: 2px solid var(--c-tuerkis); outline-offset: 2px; }
.dz-lxsuche__info { min-height: 1.4em; margin: var(--a-2) 0 0; font: 500 var(--fs-mini)/1.4 var(--f-mono); color: rgba(var(--c-hell-rgb),.7); }
.dz-lxnetz .k-h2 { font-size: clamp(1.5rem, 5vw, 2.6rem); margin-bottom: var(--a-fluss-s); }
.dz-lxnetz__rahmen { position: relative; margin: var(--a-fluss-s) 0 0; padding: clamp(.5rem, 2vw, 1.5rem); border: 1px solid rgba(var(--c-weiss-rgb),.08); border-radius: 22px; background: radial-gradient(40rem 26rem at 50% 50%, rgba(var(--c-violett-rgb),.12), transparent 70%), rgba(var(--c-weiss-rgb),.015); }
.dz-lxnetz__bild { display: block; width: 100%; height: auto; max-height: min(76svh, 44rem); margin-inline: auto; }
.dz-lxnetz__kante { fill: none; stroke: rgba(var(--c-weiss-rgb),.09); stroke-width: 1; transition: stroke .2s, stroke-width .2s, opacity .2s; }
.dz-lxnetz__knoten circle { fill: var(--kat, var(--c-tuerkis)); stroke: var(--c-nacht); stroke-width: 2; transition: r .2s, opacity .2s; }
.dz-lxnetz__kat { font: 700 15px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--kat, var(--c-tuerkis)); opacity: .8; }
.dz-lxnetz.is-fokus .dz-lxnetz__knoten circle { opacity: .25; }
.dz-lxnetz.is-fokus .dz-lxnetz__kante { opacity: .25; }
.dz-lxnetz .dz-lxnetz__knoten.is-hier circle, .dz-lxnetz .dz-lxnetz__knoten.is-nah circle { opacity: 1; }
.dz-lxnetz .dz-lxnetz__knoten.is-hier circle { r: 11px; }
.dz-lxnetz .dz-lxnetz__kante.is-an { opacity: 1; stroke: var(--c-tuerkis); stroke-width: 2; }
.dz-lxnetz__anzeige { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 16rem; text-align: center; font: var(--fw-h) clamp(1rem, 2vw, 1.5rem)/1.2 var(--f-display); color: var(--c-weiss); pointer-events: none; }
.dz-lxnetz__anzeige small { display: block; margin-top: var(--a-1); font: 500 var(--fs-mini)/1.3 var(--f-mono); color: rgba(var(--c-hell-rgb),.7); }
@media (max-width: 700px) { .dz-lxnetz__kat { font-size: 22px; } }
.dz-lxliste { padding-block: var(--a-fluss-m) var(--raum); }
.dz-lxfilter { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.dz-lxfilter button { display: inline-flex; align-items: center; gap: var(--a-2); min-height: 44px; padding: 0 var(--a-4); border: 1px solid rgba(var(--c-weiss-rgb),.18); border-radius: 99px; background: none; color: var(--c-hell); font: 600 var(--fs-klein)/1 var(--f-text); cursor: pointer; }
.dz-lxfilter button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kat, var(--c-tuerkis)); }
.dz-lxfilter button span { font: 500 var(--fs-mini)/1 var(--f-mono); color: rgba(var(--c-hell-rgb),.6); }
.dz-lxfilter button[aria-pressed="true"] { border-color: var(--kat, var(--c-tuerkis)); background: rgba(var(--c-weiss-rgb),.05); color: var(--c-weiss); }
.dz-lxabc { display: flex; flex-wrap: wrap; gap: var(--a-1); margin: var(--a-5) 0 0; }
.dz-lxabc a, .dz-lxabc span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; font-weight: 700; font-size: var(--fs-klein); }
.dz-lxabc a { border: 1px solid rgba(var(--c-weiss-rgb),.14); color: var(--c-hell); text-decoration: none; }
.dz-lxabc a:hover { border-color: var(--c-tuerkis); color: var(--c-tuerkis); }
.dz-lxabc span { color: rgba(var(--c-hell-rgb),.25); }
.dz-lxbuchstabe { margin-top: var(--a-fluss-m); scroll-margin-top: 6rem; }
.dz-lxbuchstabe__titel { margin: 0 0 var(--a-4); padding-bottom: var(--a-2); border-bottom: 1px solid rgba(var(--c-weiss-rgb),.12); font: var(--fw-h) var(--fs-h3)/1 var(--f-display); color: var(--c-tuerkis); }
.dz-lxkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--a-4); margin: 0; padding: 0; list-style: none; }
.dz-lxeintrag a { display: grid; gap: var(--a-2); height: 100%; padding: var(--a-5); border: 1px solid rgba(var(--c-weiss-rgb),.08); border-left: 3px solid var(--kat, var(--c-tuerkis)); border-radius: 14px; background: var(--c-flaeche); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.dz-lxeintrag a:hover { border-color: var(--kat, var(--c-tuerkis)); transform: translateY(-2px); }
.dz-lxeintrag strong { font: 700 var(--fs-text)/1.3 var(--f-display); color: var(--c-weiss); }
.dz-lxeintrag__kat { font: 600 var(--fs-mini)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--kat, var(--c-tuerkis)); }
.dz-lxeintrag__kurz { font-size: var(--fs-klein); line-height: 1.5; color: rgba(var(--c-hell-rgb),.78); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dz-lxeintrag[hidden], .dz-lxbuchstabe[hidden] { display: none; }
.dz-lxleer, .dz-lxzahl { margin-top: var(--a-fluss-m); color: rgba(var(--c-hell-rgb),.85); }
.dz-lxleer a, .dz-lxzahl a { color: var(--c-tuerkis); }
.dz-lxzahl strong { color: var(--c-weiss); }
@media (prefers-reduced-motion: reduce) {
  .dz-stern__knoten, .dz-stern__linie, .dz-stern__fein, .dz-stern__fernpunkt, .dz-stern__mitte .dz-stern__hof { animation: none; }
  .dz-lxeintrag a { transition: none; }
}

/* FAQ-Seite: Fragen sind dort H2, sollen aber wie die Fragen der übrigen Seiten aussehen */
.dz-frage summary h2 { font: inherit; margin: 0; letter-spacing: inherit; text-transform: inherit; }