:root{
  /* Clean / seriös */
  --bg: #f6f7f9;
  --panel: #ffffff;
  --card: #ffffff;

  --text: #0f172a;           /* slate-900 */
  --muted: rgba(15,23,42,.72);
  --line: rgba(15,23,42,.12);

  /* Handwerker-Akzent: seriöses Blau */
  --brand: #000066;
  --brandHover: #0a4bd1;

  --radius: 16px;
  --shadow: 0 10px 24px rgba(2,6,23,.08);
  --shadow2: 0 1px 0 rgba(2,6,23,.06);

  --container: 1120px;

  --focus: 0 0 0 3px rgba(11,95,255,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  
}

a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration: underline; }

img{
  max-width:100%;
  display:block;
  border-radius: calc(var(--radius) - 6px);
}

.container{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

.l-main{
  padding: 24px 0 64px;
}

.srOnly{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}

html.is-locked, body.is-locked{ overflow:hidden; }

:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: 10px;
}