/* =========================================================
   core/legal.css — Full-bleed Header/Footer, “Luft” im Main
   - Header/Footer Hintergrund bis zum Rand
   - Inhalt in .container mit responsive --gutter (inkl. Safe-Area)
   - Main bekommt oben/unten Abstand + links/rechts über container
   ========================================================= */

/* ---------- Theme Tokens (Light/Dark automatisch via prefers-color-scheme) ---------- */
:root{
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* CI */
  --green: #006400;
  --teal:  #00796b;

  /* Light (Default) */
  --bg: #ffffff;
  --paper: #f4ebda;
  --paper-2: #dddddd;
  --text: rgba(0,0,0,.88);
  --muted: rgba(0,0,0,.62);
  --border: rgba(0,0,0,.18);

  /* Header */
  --header-bg: var(--green);
  --header-text: rgba(255,255,255,.96);

  /* Layout */
  --container: 1000px;
  --radius: 14px;
  --shadow: 0 10px 28px rgba(0,0,0,.12);
  --gap: 14px;

  /* Der “Hauch” Rand links/rechts (responsive) */
  --gutter: 16px;

  /* Main-Luft oben/unten */
  --main-pad-y: 18px;

  /* Focus */
  --focus: rgba(255,255,255,.85);
}

@media (min-width: 820px){
  :root{
    --gutter: 22px;
    --main-pad-y: 22px;
  }
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1115;
    --paper: #1a1f26;
    --paper-2: #242b34;
    --text: rgba(255,255,255,.90);
    --muted: rgba(255,255,255,.68);
    --border: rgba(255,255,255,.16);

    --header-bg: #0a3b14;
    --header-text: rgba(255,255,255,.96);

    --shadow: 0 16px 44px rgba(0,0,0,.45);
    --focus: rgba(255,255,255,.80);
  }
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}

a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover{ text-decoration-thickness: 2px; }

img{ max-width:100%; height:auto; }

/* Container: Innenabstand = “Gutter” + Safe-Area */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
}

/* Screenreader-only */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  border:0;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  background: var(--paper);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus{ left: var(--gutter); }

/* ---------- Header (full-bleed) ---------- */
.site-header{
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid rgba(0,0,0,.22);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 0;
}

/* Home-Link */
.home-link{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.home-link:hover{ background: rgba(255,255,255,.10); }
.home-link:active{ transform: translateY(1px); }
.home-link:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.home-logo{
  width: 40px;
  height: 40px;
  display:block;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  background: rgba(255,255,255,.12);
}

.home-text{
  display:inline-flex;
  align-items:center;
  line-height: 1;
  opacity: .95;
  font-size: 0.98rem;
}

/* Titelblock */
.title-wrap{
  flex: 1;
  min-width: 0;
  text-align: center;
}

.site-title{
  font-weight: 900;
  letter-spacing: .03em;
  font-size: 1.05rem;
  line-height: 1.1;
}

.page-title{
  font-weight: 600;
  opacity: .88;
  font-size: 0.98rem;
  line-height: 1.2;
  margin-top: 2px;
}

.header-spacer{
  width: 140px;
}

/* Mobile Header Anpassung */
@media (max-width: 720px){
  .header-inner{ padding: 10px 0; }
  .header-spacer{ width: 44px; }
  .site-title{ font-size: 1rem; }
  .page-title{ font-size: .95rem; }
}

@media (max-width: 520px){
  .home-text{ display:none; }
  .header-spacer{ width: 44px; }
  .title-wrap{ text-align: left; }
}

/* ---------- Main / Paper (mit Luft rundherum) ---------- */
.main{
  padding-top: var(--main-pad-y);
  padding-bottom: calc(var(--main-pad-y) + 18px);
}

.paper{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* Typografie im Paper */
.paper p{
  margin: 0.6rem 0;
  line-height: 1.55;
}

.paper ul{
  margin: 0.6rem 0 0.6rem 1.2rem;
  padding: 0;
}

.paper li{
  margin: 0.35rem 0;
  line-height: 1.5;
}

/* Lange URLs umbrechen */
.paper a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ---------- Footer (full-bleed) ---------- */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 18px 0 28px;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
}

.footer-inner{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items:start;
}

.footer-col{ grid-column: span 4; }

.footer-col-right{
  grid-column: span 4;
  display:flex;
  justify-content:flex-end;
}

.footer-heading{
  margin: 0 0 8px;
  font-size: 1rem;
}

.footer-links{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-links li{ margin: 6px 0; }

.footer-links a{
  color: var(--muted);
  text-decoration: none;
}
.footer-links a:hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-meta{
  color: var(--muted);
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.dot{ opacity: .6; }

.footer-back{
  text-decoration: none;
  font-weight: 800;
  color: var(--muted);
}
.footer-back:hover{
  color: var(--text);
  text-decoration: underline;
}

/* Responsive Footer */
@media (max-width: 820px){
  .footer-col{ grid-column: span 12; }
  .footer-col-right{ justify-content:flex-start; }
}