/* ============================================================
   Gemeinsames Layout für Impressum und Datenschutzerklärung.
   Gleiche Farbwelt und Typografie wie index.html, aber auf
   Lesbarkeit langer Fließtexte ausgelegt statt auf Wirkung.
   ============================================================ */

:root{
  color-scheme: light;

  --ink:        #0B0A0F;
  --ink-2:      #17141F;
  --violet:     #7A19FF;
  --violet-lit: #9B57FF;

  --paper:      #FAF9FC;
  --stone:      #E3DFEC;
  --stone-2:    #CFC9DE;

  --text:       #17141F;
  --text-soft:  #4A4360;
  --text-faint: #8A83A0;

  --on-dark:      #F6F4FB;
  --on-dark-soft: #B2AAC6;
  --on-dark-faint:#7C7396;

  --rule:      rgba(11,10,15,.10);
  --rule-dark: rgba(255,255,255,.11);

  --shell: min(720px, 100% - 2.5rem);

  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--violet); color:#fff; }

:where(a,button):focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:4px;
}

.shell{ width:var(--shell); margin-inline:auto; }

/* ---------- Kopf ---------- */
.top{
  background:var(--ink);
  color:var(--on-dark);
  padding-block:1.1rem;
  border-bottom:1px solid var(--rule-dark);
}
.top__in{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.brand__mark{
  font-family:var(--display); font-weight:800; font-size:1.16rem;
  letter-spacing:-.04em; color:var(--on-dark);
}
.brand__slash{ width:1px; height:19px; background:var(--rule-dark); }
.brand__sub{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--violet-lit); padding-top:1px;
}
.top__back{
  margin-left:auto; font-size:.88rem; font-weight:500;
  color:var(--on-dark-soft); text-decoration:none;
}
.top__back:hover{ color:#fff; }

/* ---------- Inhalt ---------- */
main{ padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5rem); }

.eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);
  margin:0 0 .8rem;
}

h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2rem,1.6rem+1.6vw,2.9rem);
  line-height:1.06; letter-spacing:-.03em; text-wrap:balance;
  margin:0 0 1.2rem;
}
h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.3rem,1.2rem+.5vw,1.6rem);
  line-height:1.2; letter-spacing:-.02em;
  margin:2.8rem 0 .9rem; padding-top:1.6rem;
  border-top:1px solid var(--rule);
  text-wrap:balance;
}
h2:first-of-type{ border-top:0; padding-top:0; }
h3{
  font-family:var(--display); font-weight:600; font-size:1.08rem;
  letter-spacing:-.015em; margin:1.9rem 0 .5rem;
}
h4{
  font-family:var(--body); font-weight:700; font-size:.95rem;
  margin:1.3rem 0 .35rem;
}

p{ margin:0 0 1rem; color:var(--text-soft); }
p.lede{
  font-size:1.1rem; line-height:1.6; color:var(--text);
  margin-bottom:2rem;
}

ul{ margin:0 0 1rem; padding-left:1.1rem; color:var(--text-soft); }
li{ margin-bottom:.35rem; }

a{ color:var(--violet); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:#5712B5; }

strong,b{ color:var(--text); font-weight:600; }

/* Grossgeschriebene Widerspruchsklauseln lesbarer setzen */
.caps{
  font-size:.86rem; line-height:1.65; letter-spacing:.01em;
  color:var(--text-soft);
}

/* Anschrift und ähnliche Blöcke */
.adr{
  font-style:normal;
  background:#fff; border:1px solid var(--stone);
  border-radius:14px; padding:1.2rem 1.3rem;
  margin:0 0 1.2rem; color:var(--text-soft);
}
.adr b{ display:block; color:var(--text); margin-bottom:.15rem; }

/* Definitionsliste für Angaben wie Registergericht, USt-ID */
.daten{
  display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.4rem;
  margin:0 0 1.2rem; font-size:.95rem;
}
@media (max-width:520px){ .daten{ grid-template-columns:1fr; gap:.1rem 0; } }
.daten dt{ font-weight:600; color:var(--text); }
.daten dd{ margin:0; color:var(--text-soft); }
@media (max-width:520px){ .daten dd{ margin-bottom:.7rem; } }

/* Hinweiskasten für Stellen, die Aufmerksamkeit brauchen */
.hinweis{
  border-left:2px solid var(--violet);
  background:rgba(122,25,255,.045);
  border-radius:0 10px 10px 0;
  padding:1rem 1.2rem;
  margin:0 0 1.4rem;
}
.hinweis p:last-child{ margin-bottom:0; }

.stand{
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
  color:var(--text-faint);
}

/* ---------- Fuss ---------- */
.foot{
  background:var(--ink-2); color:var(--on-dark-faint);
  padding-block:2.5rem; font-size:.83rem;
}
.foot__in{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between;
}
.foot a{ color:var(--on-dark-soft); text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot__links{ display:flex; gap:1.4rem; flex-wrap:wrap; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}