/* Webstudio-Zeile im Fuß — Wortmarke von web-norddeutschland.de (Vorlage wie coro-kurse.com).
   Zeichen zeichnet sich, die Ecke klappt auf, die Buchstaben steigen auf;
   danach läuft in Abständen ein Lichtschimmer durch das Wort.
   Farben über Variablen: Standard = heller Grund (dunkle Schrift, Akzent #2140e8);
   im Fuß (immer dunkel) und im Dunkelmodus = weiß mit Akzent #6b84ff / #93a6ff.
   Schrift: Inter Tight 700 kommt lokal aus /fonts/fonts.css. */
.webmaster {
  --wm-linie: var(--line, #e6e8ec);
  --wm-label: var(--muted, #8b9099);
  border-top: 1px solid var(--wm-linie);
  margin-top: 26px;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
footer .webmaster { --wm-linie: rgba(255, 255, 255, 0.08); --wm-label: #6c7686; }
.webmaster-label {
  font-family: var(--display, 'Inter Tight', 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wm-label);
}
.wnd {
  --wnd-text: #0c1117;
  --wnd-f: var(--wnd-text);
  --wnd-akzent: #2140e8;
  --wnd-zeichen: #2140e8;
  --wnd-zeile: rgba(12, 17, 23, 0.58);
  --wnd-zeile-hover: rgba(12, 17, 23, 0.85);
  --wnd-schimmer: #2140e8;
  --wnd-glanz: rgba(33, 64, 232, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  max-width: 100%;
  font-size: clamp(1.1rem, 0.95rem + 0.55vw, 1.4rem);
  color: var(--wnd-text);
  text-decoration: none;
  line-height: 1;
}
footer .wnd,
html[data-theme="dark"] .wnd {
  --wnd-text: #fff;
  --wnd-f: var(--wnd-text);
  --wnd-akzent: #6b84ff;
  --wnd-zeichen: #93a6ff;
  --wnd-zeile: rgba(255, 255, 255, 0.62);
  --wnd-zeile-hover: rgba(255, 255, 255, 0.8);
  --wnd-schimmer: #dfe5ff;
  --wnd-glanz: rgba(107, 132, 255, 0.95);
}
.wnd-zeichen { width: 1.22em; height: 1.22em; flex: none; overflow: visible; margin-top: -0.12em; }
.wnd-rahmen {
  fill: none;
  stroke: var(--wnd-text);
  stroke-width: 3.2;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1), stroke 0.3s;
}
.wnd-ecke {
  fill: var(--wnd-akzent);
  transform-box: fill-box;
  transform-origin: 100% 0;
  transform: scale(0) rotate(-90deg);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s;
}
.wnd-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.32em; }
.wnd-wort {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.wnd-b {
  display: inline-block;
  color: var(--wnd-f, currentColor);
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(4px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
  transition-delay: calc(0.35s + var(--i) * 35ms);
}
.wnd-strich, .wnd-punkt { --wnd-f: var(--wnd-zeichen); }
.wnd-strich { transform: scaleX(0); transform-origin: 0 50%; }
.wnd-zeile {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: max(0.3em, 0.58rem);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--wnd-zeile);
  opacity: 0;
  padding-left: 0.1em;
  white-space: nowrap;
  transition: opacity 0.8s ease 1.3s, letter-spacing 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 1.3s;
}
.wnd.an .wnd-rahmen { stroke-dashoffset: 0; }
.wnd.an .wnd-ecke { transform: none; }
.wnd.an .wnd-b { opacity: 1; transform: none; filter: none; }
.wnd.an .wnd-zeile { opacity: 1; letter-spacing: 0.22em; }
/* Nach dem Aufbau: Schimmer läuft alle sieben Sekunden durch, die Ecke hebt sich kurz.
   Falle: Transition und Animation nie auf dasselbe transform eines SVG-Elements —
   deshalb animiert der Wrapper g.wnd-hub, die Transition sitzt auf path.wnd-ecke. */
.wnd.an .wnd-b { animation: wnd-schimmer 7s calc(2.4s + var(--i) * 45ms) infinite; }
.wnd-hub { transform-box: fill-box; transform-origin: 0 100%; }
.wnd.an .wnd-hub { animation: wnd-ecke 7s 3.4s infinite; }
/* Grundfarbe an 0/9/100 % fest, damit nur kurz aufgeblitzt wird und die Farbe
   nicht über den ganzen Zyklus zurückläuft. */
@keyframes wnd-schimmer {
  0%, 9%, 100% { color: var(--wnd-f); text-shadow: none; }
  4% { color: var(--wnd-schimmer); text-shadow: 0 0 0.45em var(--wnd-glanz); }
}
@keyframes wnd-ecke {
  3% { transform: translate(8%, -8%) rotate(8deg); }
  8% { transform: none; }
}
.wnd:hover .wnd-rahmen, .wnd:focus-visible .wnd-rahmen { stroke: var(--wnd-akzent); }
.wnd:hover .wnd-zeile { color: var(--wnd-zeile-hover); }
@media (prefers-reduced-motion: reduce) {
  .wnd-rahmen { stroke-dashoffset: 0; transition: none; }
  .wnd-ecke, .wnd-strich { transform: none; transition: none; }
  .wnd-b { opacity: 1; transform: none; filter: none; transition: none; }
  .wnd-zeile { opacity: 1; letter-spacing: 0.22em; transition: none; }
  .wnd.an .wnd-b, .wnd.an .wnd-hub { animation: none; }
}
