/* Stundenfreund – Impressum & Datenschutz Styles
   Ausgelagert für eine strenge CSP ohne 'unsafe-inline'. */

@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/inter-300.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Lora';  font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/lora-400.woff2') format('woff2'); }
@font-face { font-family:'Lora';  font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/lora-600.woff2') format('woff2'); }

:root {
  --g-deep:      #1a3d28;
  --g-main:      #2e7245;
  --g-light:     #eaf4ed;
  --sage:        #85a888;
  --cream:       #ede5cf;
  --cream-light: #f8f4ec;
  --white:       #ffffff;
  --txt-dark:    #182820;
  --txt-mid:     #385048;
  --txt-soft:    #6a8870;
  --border:      #cfe0d4;
  --f-sans: 'Inter', system-ui, sans-serif;
  --f-serif:'Lora', Georgia, serif;
  --r-sm: 6px; --r-md: 12px; --r-lg: 22px; --r-pill: 50px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-sans); color: var(--txt-dark); background: var(--white);
  line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--f-sans); cursor: pointer; border: none; background: none; }

.container { max-width: 1080px; margin-inline: auto; padding-inline: clamp(1.25rem,5vw,3rem); }

/* ─── SKIP-LINK ─── */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; z-index:9999; }
.skip-link:focus {
  left:1rem; top:1rem; width:auto; height:auto;
  background:var(--g-deep); color:var(--white);
  padding:.75rem 1.25rem; border-radius:var(--r-pill);
  font-weight:600; font-size:.9rem;
}

/* ─── NAV ─── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav__logo  { display: flex; align-items: center; gap: .7rem; }
.nav__signet { width: 42px; height: 42px; flex-shrink: 0; }
.nav__wordmark { display: flex; flex-direction: column; }
.nav__name { font-size: .96rem; font-weight: 700; letter-spacing: .07em; color: var(--g-deep); }
.nav__sub  { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-soft); }
.nav__links { display: flex; align-items: center; gap: 1.75rem; list-style: none; }
.nav__links a { font-size: .86rem; font-weight: 500; color: var(--txt-mid); transition: color .18s; }
.nav__links a:hover { color: var(--g-main); }
.nav__cta { margin-left: 1.25rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .82rem 1.8rem;
  border-radius: var(--r-pill); font-size: .93rem; font-weight: 600;
  border: 2px solid transparent; transition: all .22s ease; font-family: var(--f-sans);
}
.btn-primary { background: var(--g-main); color: var(--white); border-color: var(--g-main); }
.btn-primary:hover { background: var(--g-deep); border-color: var(--g-deep); }
@media (max-width: 640px) { .nav__links, .nav__cta { display: none; } }

/* ─── PAGE HEADER ─── */
.page-header { background: var(--g-deep); padding-block: 4rem 3.5rem; color: var(--white); }
.page-header .crumb {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sage); display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem;
}
.page-header .crumb a { color: var(--sage); transition: color .18s; }
.page-header .crumb a:hover { color: var(--cream); }
.page-header h1 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(1.8rem,4vw,2.8rem); color: var(--white);
}

/* ─── LEGAL CONTENT ─── */
.legal { padding-block: clamp(3rem,6vw,5rem); background: var(--white); }
.legal__body { max-width: 720px; }
.legal__body h2 {
  font-size: 1.15rem; font-weight: 700; color: var(--g-deep);
  margin-top: 2.5rem; margin-bottom: .6rem; padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.legal__body h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.legal__body h3 { font-size: 1rem; font-weight: 600; color: var(--txt-dark); margin-top: 1.5rem; margin-bottom: .4rem; }
.legal__body p  { font-size: .95rem; color: var(--txt-mid); max-width: none; margin-bottom: .8rem; line-height: 1.75; }
.legal__body ul { margin: .5rem 0 .8rem 1.25rem; }
.legal__body li { font-size: .95rem; color: var(--txt-mid); margin-bottom: .3rem; line-height: 1.7; }
.legal__body a  { color: var(--g-main); text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { color: var(--g-deep); }
.placeholder-note {
  background: #fffbea; border: 1px solid #f0d060; border-radius: var(--r-sm);
  padding: .65rem 1rem; font-size: .82rem; color: #7a5c00; margin: .5rem 0 .8rem;
}
.info-box {
  background: var(--g-light); border-left: 3px solid var(--g-main);
  border-radius: var(--r-sm); padding: 1rem 1.25rem;
  font-size: .92rem; color: var(--txt-mid); line-height: 1.7;
  margin: 1rem 0 1.25rem;
}
.info-box strong { color: var(--g-deep); }

/* ─── FOOTER ─── */
.footer { background: var(--g-deep); color: rgba(255,255,255,.6); padding-block: 2.5rem; }
.footer__inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}
.footer__copy { font-size: .78rem; }
.footer__legal { display: flex; gap: 1.25rem; list-style: none; }
.footer__legal a { font-size: .78rem; color: rgba(255,255,255,.4); transition: color .18s; }
.footer__legal a:hover { color: rgba(255,255,255,.75); }
.footer__legal .active { color: rgba(255,255,255,.75); }

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}