/* ══════════════════════════════════════════════════════════════════════════
   RECHTSTEXTE IM NANIL-ECHO-DESIGN            angelegt 17.08.2026
   Gilt fuer impressum.html, datenschutz.html, nutzungsbedingungen.html.

   Die drei Seiten sind gleich aufgebaut und benutzen dieselben fuenf
   Variablen (--bg, --text, --soft, --accent, --border). Werden die
   umgestellt, ziehen alle drei mit — eine Datei statt drei Baustellen.

   BEWUSSTE ENTSCHEIDUNG ZUR LESBARKEIT
   Rechtstexte werden nicht ueberflogen, sondern gelesen — oft lange und oft
   von Menschen, die genau wissen wollen, was da steht. Deshalb sitzt der
   Text hier auf einer ruhigen, leicht abgesetzten Flaeche statt direkt auf
   der bewegten Spirale, und die Zeilenbreite bleibt begrenzt. Das Aussehen
   ist Echo, die Ruhe bleibt.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:transparent;
  --text:#EAF6F3;
  --soft:rgba(234,246,243,.74);
  --accent:#26D7EA;
  --border:rgba(255,255,255,.10);

  --echo-champ:#e6cc92;
  --echo-teal:#26D7EA;
  --echo-violet:#7d6bf0;
}

/* Melierter Grund — nie eine tote schwarze Flaeche. */
html:root{
  background-color:#0f1318!important;
  background-image:
    radial-gradient(1100px 780px at 12% 4%,  rgba(230,204,146,.13), transparent 62%),
    radial-gradient(1000px 820px at 88% 22%, rgba(38,215,234,.11),  transparent 60%),
    radial-gradient(1200px 900px at 50% 58%, rgba(125,107,240,.12), transparent 64%),
    linear-gradient(148deg,#0f1318 0%,#0b0f14 52%,#12161c 100%)!important;
  background-attachment:fixed!important;
}
body{background:transparent!important;color:var(--text)!important}

/* Die Spirale als Lichtschicht: ihre hellen Wirbel bleiben, ihr Schwarz wird
   durchsichtig und gibt den melierten Grund frei. */
#nanilSpiral{
  position:fixed!important;inset:0!important;z-index:-1!important;
  pointer-events:none!important;mix-blend-mode:screen!important;opacity:.9!important;
}

header{
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  background:rgba(12,17,24,.55)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
header,header *{color:var(--text)!important}
/* Das „N" im Kopf sitzt auf der Teal-Flaeche. Teal ist hell — heller Text
   darauf ergab 1,58:1. Auf Teal gehoert dunkle Schrift. */
.logo-mark,header .logo-mark{
  background:linear-gradient(135deg,var(--echo-champ),var(--echo-teal))!important;
  color:#0c1714!important;
}

/* Der Lesebereich als ruhige Glaskachel. */
main,article,.inhalt,.content,section{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(90,160,152,.24)!important;
  border-radius:18px!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  padding:clamp(18px,4vw,34px)!important;
  margin:clamp(14px,3vw,28px) auto!important;
  max-width:780px;
}
h1,h2,h3{color:var(--text)!important}
h1{color:var(--echo-champ)!important}
h2{color:var(--echo-teal)!important}
p,li,td,th,dd,dt{color:rgba(234,246,243,.86)!important}
strong,b{color:var(--text)!important}
small,.soft,.hinweis{color:var(--soft)!important}
a{color:var(--echo-champ)!important}
a:hover{color:var(--echo-teal)!important}
hr{border-color:rgba(255,255,255,.10)!important}
table,th,td{border-color:rgba(255,255,255,.12)!important}
th{background:rgba(255,255,255,.05)!important}
footer,footer *{color:rgba(234,246,243,.62)!important}

/* Hervorgehobene Hinweise (.highlight, 3x in der Datenschutzerklaerung).
   Sie sollen auffallen und bleiben deshalb hell — als helle Kachel im
   Echo-Schachbrett. Helle Kachel heisst dunkler, lesbarer Text: nach der
   Umstellung stand hier heller Text auf hellem Grund und der wichtigste
   Satz der Seite („kein medizinisches Produkt") war unsichtbar. */
.highlight{
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(244,241,252,.90))!important;
  border-left:3px solid var(--echo-violet)!important;
  border-radius:0 14px 14px 0!important;
  box-shadow:0 10px 26px rgba(0,0,0,.22)!important;
}
.highlight,.highlight *{color:#1c2430!important}
.highlight a{color:#5b41c9!important}
.highlight strong,.highlight b{color:#141c28!important}

/* Zurueck-Knopf glasig, farbig umrandet, schwebend. */
.back,.zurueck,a.btn,button{
  background:rgba(255,255,255,.09)!important;
  border:1px solid rgba(226,198,142,.42)!important;
  color:var(--text)!important;
  border-radius:999px!important;
  transition:transform .16s cubic-bezier(.2,.8,.3,1);
}
.back:active,a.btn:active,button:active{transform:scale(.98)}