/* Wartungsseite. Eigenstaendig, damit sie ohne aktives Theme traegt. */

@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#F4F6F5; --ink:#10201C; --muted:#5A6B65;
  --line:#DCE3E0; --accent:#0E7C66; --accent-ink:#FFFFFF;
}

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

body{
  margin:0; min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(1.5rem,5vw,4rem);
  background:var(--bg); color:var(--ink);
  font-family:'Satoshi',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(1rem,.96rem + .18vw,1.125rem);
  line-height:1.55; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}

.w{width:100%; max-width:620px}

.marke{
  font-family:'Cabinet Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-weight:500; font-size:1.375rem; letter-spacing:-.03em;
  margin:0 0 clamp(2rem,1rem + 4vw,3.5rem);
}

h1{
  font-family:'Cabinet Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(2rem,1.3rem + 3vw,3rem);
  line-height:1.04; letter-spacing:-.04em;
  margin:0 0 1rem; text-wrap:balance;
}

p{margin:0 0 1rem; color:var(--muted); max-width:46ch}
p.stark{color:var(--ink)}
p:last-child{margin-bottom:0}

.kontakt{
  display:grid; gap:1.25rem;
  margin:clamp(2rem,1rem + 3vw,2.75rem) 0;
  padding:clamp(1.5rem,1rem + 2vw,2rem) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.kontakt div span{
  display:block; margin-bottom:.15rem;
  font-size:.8125rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.kontakt a{
  display:inline-flex; align-items:center;
  min-height:44px;
  font-family:'Cabinet Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(1.125rem,1rem + .5vw,1.5rem);
  letter-spacing:-.02em;
  color:var(--ink); text-decoration:none;
}
.kontakt a:hover{text-decoration:underline; text-underline-offset:.18em}

@media (min-width:560px){
  .kontakt{grid-template-columns:1fr 1fr; gap:1.5rem 2rem}
}

.rechtlich{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  margin:0; padding:0; list-style:none;
  font-size:.875rem;
}
.rechtlich a{color:var(--muted); text-decoration:none}
.rechtlich a:hover{color:var(--ink); text-decoration:underline}

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