/* Gestaltung für Impressum und Datenschutz — Hausfarben von mann-it.de.
 *
 * Dieselben Farben und Schriften wie die Produktseite, aber ohne deren
 * Schaustücke: hier wird gelesen, nicht überzeugt. Die Marken bleiben, damit
 * niemand das Gefühl hat, auf eine fremde Seite geraten zu sein. */
:root{
  color-scheme: light dark;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);

  --grund:      #F0F4F9;
  --flaeche:    #FFFFFF;
  --flaeche-2:  #E8EFF8;
  --tinte:      #1E293B;
  --gedaempft:  #475569;
  --leise:      #7A8699;
  --linie:      #D5E0EE;
  --linie-fett: #B7C7DC;
  --siegel:     #A4243B;
  --siegel-mild:#F7E7EA;
  --schatten:   0 1px 2px rgba(11,31,58,.06), 0 8px 24px -12px rgba(11,31,58,.22);
  --spalte: 41rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grund:#0A1626; --flaeche:#0F2036; --flaeche-2:#16304F;
    --tinte:#E6EDF6; --gedaempft:#A3B4C9; --leise:#7E8FA6;
    --linie:#22395A; --linie-fett:#33507A;
    --siegel:#E5879A; --siegel-mild:#2B1721;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --grund:#0A1626; --flaeche:#0F2036; --flaeche-2:#16304F;
  --tinte:#E6EDF6; --gedaempft:#A3B4C9; --leise:#7E8FA6;
  --linie:#22395A; --linie-fett:#33507A;
  --siegel:#E5879A; --siegel-mild:#2B1721;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--tinte);
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:17px; line-height:1.7; padding-inline:20px;
  -webkit-font-smoothing:antialiased;
}
@media (max-width:480px){ body{font-size:16px; padding-inline:16px} }

.bahn{max-width:var(--spalte); margin-inline:auto}
h1,h2,h3{font-family:"Poppins",system-ui,sans-serif; text-wrap:balance; margin:0}
h1{font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.1; font-weight:700; letter-spacing:-.018em}
h2{font-size:1.35rem; line-height:1.25; font-weight:700; margin-top:2.4rem}
h3{font-size:1.05rem; font-weight:600; margin-top:1.6rem}
p{margin:.8rem 0 0}
ul{margin:.6rem 0 0; padding-left:1.15rem; display:flex; flex-direction:column; gap:.35rem}
a{color:var(--siegel)}
:focus-visible{outline:2px solid var(--siegel); outline-offset:3px; border-radius:2px}

.marke{font-family:"Poppins",system-ui,sans-serif; font-weight:700; letter-spacing:-.01em; font-size:1.12rem}
.marke span{color:var(--siegel)}
.etikett{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--leise); font-weight:500}

.kopf{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:1.4rem; border-bottom:1px solid var(--linie)}
.kopf a{text-decoration:none; color:inherit}
.kopf nav{display:flex; gap:1.2rem; font-size:.88rem; color:var(--gedaempft)}

main{padding-block:2.6rem 1rem}
.vorspann{color:var(--gedaempft); margin-top:1rem}

.block{background:var(--flaeche); border:1px solid var(--linie); border-radius:4px;
  padding:1.2rem 1.3rem; margin-top:1.2rem; box-shadow:var(--schatten)}
.block p:first-child{margin-top:0}

/* Der Widerspruch nach Art. 21 muss sich abheben — so steht es in der
   Verordnung („in einer verständlichen und von anderen Informationen
   getrennten Form"). */
.hervor{background:var(--siegel-mild); border:1px solid var(--siegel);
  border-radius:4px; padding:1.2rem 1.3rem; margin-top:1.4rem}
.hervor h2{margin-top:0; color:var(--tinte)}

dl{margin:.8rem 0 0; display:grid; gap:.5rem 1.2rem}
@media (min-width:600px){ dl{grid-template-columns:12rem 1fr} }
dt{color:var(--leise); font-size:.86rem}
dd{margin:0}

.stand{margin-top:2.4rem; font-size:.86rem; color:var(--leise)}

footer{border-top:1px solid var(--linie); padding-block:1.6rem 2.6rem; margin-top:2.4rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:baseline;
  font-size:.85rem; color:var(--leise)}
footer a{color:var(--gedaempft)}
footer .rechts{margin-left:auto; display:flex; gap:1.2rem}
@media (max-width:560px){ footer .rechts{margin-left:0} }