/* =============================================================
   ZIEGNER CONSULTING · Rechtsseiten
   Gemeinsames Stylesheet fuer impressum.html und datenschutz.html.
   Farben, Schriften und Abstaende nach designvorgaben.md (Version 3).
   ============================================================= */

@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("fonts/publicsans-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jetbrainsmono-var.woff2") format("woff2");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --navy:#0D1628;
  --paper:#F2F3F6;
  --white:#FFFFFF;
  --ink:#111A2C;
  --ink-2:#414B60;
  --muted:#727C90;
  --line:#DCDFE6;
  --blue:#3D63D9;
  --blue-dark:#3050B8;
  --on-navy:#E8EBF2;
  --on-navy-2:#A6AFC2;

  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1280px;
  --edge:32px;
}

@media(max-width:900px){:root{--edge:22px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--edge)}

a{color:var(--blue)}
a:hover{color:var(--blue-dark)}

:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--blue);color:#fff;padding:12px 20px;
  border-radius:0 0 6px 0;font-weight:600;text-decoration:none;
}
.skip:focus{left:0;color:#fff}

/* --- Navigation ---------------------------------------------- */

.nav{background:var(--white);border-bottom:1px solid var(--line)}

.nav-in{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--edge);
  height:70px;display:flex;align-items:center;gap:30px;
}

.brand{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--ink);text-decoration:none;margin-right:auto;white-space:nowrap;
}
.brand:hover{color:var(--ink)}
.brand-mark{display:block;width:34px;height:34px;flex:none}
.brand-word{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em}

.nav-back{font-size:15px;color:var(--ink-2);text-decoration:none}
.nav-back:hover{color:var(--ink)}

/* --- Inhalt --------------------------------------------------- */

main{padding:72px 0 96px;background:var(--white)}

@media(max-width:900px){main{padding:48px 0 64px}}

.doc{max-width:70ch}

.eyebrow{
  font-family:var(--mono);font-weight:400;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 20px;
}

h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(32px,4vw,44px);line-height:1.08;letter-spacing:-.03em;
  margin:0 0 40px;color:var(--ink);
}

h2{
  font-family:var(--display);font-weight:700;
  font-size:22px;line-height:1.25;letter-spacing:-.02em;
  margin:48px 0 14px;color:var(--ink);
}

h3{
  font-family:var(--sans);font-weight:600;font-size:18px;
  margin:32px 0 10px;color:var(--ink);
}

p{margin:0 0 16px;color:var(--ink-2);max-width:70ch}

ul{margin:0 0 16px;padding-left:22px;color:var(--ink-2)}
li{margin-bottom:8px}

/* Definitionsliste fuer Anschrift und Kontakt */
.dl{margin:0 0 20px;display:grid;grid-template-columns:200px 1fr;gap:10px 24px}
.dl dt{color:var(--muted);font-size:15px}
.dl dd{margin:0;color:var(--ink)}

@media(max-width:640px){
  .dl{grid-template-columns:1fr;gap:2px 0}
  .dl dd{margin-bottom:14px}
}

/* Offene Stelle, die noch ausgefuellt werden muss. */
.todo{
  font-family:var(--mono);font-size:14px;
  background:#FFF6D6;border:1px solid #E8D9A0;border-radius:4px;
  padding:2px 8px;color:#6B5A18;display:inline-block;
}

.note{
  border-left:2px solid var(--line);
  padding:4px 0 4px 20px;margin:0 0 24px;
  font-size:15.5px;color:var(--muted);
}

.updated{
  font-family:var(--mono);font-size:13px;color:var(--muted);
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
}

/* --- Fuss ------------------------------------------------------ */

.foot-bar{background:var(--navy);padding:32px 0}
.foot{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.foot a{color:var(--on-navy-2);text-decoration:none;font-size:15px}
.foot a:hover{color:#fff}
.foot-c{font-family:var(--mono);font-size:13px;color:var(--on-navy-2);margin-left:auto}

/* Schmale Schirme: mittig wie auf der Startseite. */
@media(max-width:620px){
  .foot{justify-content:center;text-align:center;gap:12px 18px}
  .foot-c{margin-left:0;width:100%}
}