/* Gemeinsame Gestaltung fuer Impressum und Datenschutz.
   Gleiche Farben, Schriften und Abstaende wie die Hauptseite, nur ohne deren Bausteine. */

@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('cormorant-garamond-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('cormorant-garamond-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('cormorant-garamond-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('cormorant-garamond-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('nunito-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('nunito-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --cream:    #FEF9F5;
  --sand:     #F7F1EA;
  --surface:  #FFFFFF;
  --sage:     #758266;
  --sage-dk:  #5E6952;
  --terra:    #D08D74;
  --ink:      #4A4038;
  --ink-mid:  #7C7168;
  --ink-soft: #736860;
  --divider:  #EAE1D7;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px; line-height: 1.72;
  color: var(--ink); background: var(--cream);
}
img { max-width: 100%; display: block; }

nav {
  background: var(--cream); border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 76px; padding: 8px clamp(18px, 3.5vw, 52px);
  padding-left: max(clamp(18px, 3.5vw, 52px), env(safe-area-inset-left));
  padding-right: max(clamp(18px, 3.5vw, 52px), env(safe-area-inset-right));
}
.nav-logo { height: 54px; width: auto; }
.zurueck { font-size: 13.5px; font-weight: 500; color: var(--ink-mid); text-decoration: none; white-space: nowrap; }
.zurueck:hover { color: var(--sage-dk); }

main {
  max-width: 820px; margin-inline: auto;
  padding: clamp(44px, 6vw, 76px) clamp(24px, 5vw, 60px) clamp(56px, 8vw, 90px);
  padding-left: max(clamp(24px, 5vw, 60px), env(safe-area-inset-left));
  padding-right: max(clamp(24px, 5vw, 60px), env(safe-area-inset-right));
}
.eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-dk); margin-bottom: 10px; }
h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(32px, 5vw, 46px); line-height: 1.15; color: var(--ink);
  margin-bottom: 30px;
}
h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(23px, 3vw, 29px); line-height: 1.25; color: var(--ink);
  margin: 44px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--divider);
}
h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 28px 0 8px; }
h4 { font-size: 15px; font-weight: 700; color: var(--ink-mid); margin: 20px 0 6px; }
p { font-size: 15.5px; color: var(--ink-mid); margin-bottom: 14px; }
p.versal { font-size: 13.5px; line-height: 1.6; color: var(--ink); background: var(--sand); border-radius: 10px; padding: 16px 18px; }
main a { color: var(--sage-dk); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
main a:hover { color: var(--ink); }

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

footer {
  background: var(--cream); border-top: 1px solid var(--divider);
  padding: 44px clamp(24px,5vw,60px) 32px;
  padding-left: max(clamp(24px,5vw,60px), env(safe-area-inset-left));
  padding-right: max(clamp(24px,5vw,60px), env(safe-area-inset-right));
  display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
}
.footer-logo { width: 182px; height: auto; }
.flinks { display: flex; gap: 24px; list-style: none; flex-wrap: wrap; justify-content: center; }
.flinks a { font-size: 13.5px; color: var(--ink-mid); text-decoration: none; }
.flinks a:hover { color: var(--sage-dk); }
.fcopy { font-size: 12.5px; color: var(--ink-soft); }
.urheber { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-soft); opacity: .9; }
.urheber:hover { opacity: 1; }
.urheber img { height: 16px; width: auto; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── DRUCKANSICHT ──
   Impressum und Datenschutz werden oft ausgedruckt oder als PDF gesichert.
   Menue und Fussnavigation braucht dort niemand, Links bekommen ihr Ziel dazu. */
@media print {
  nav, .flinks, .urheber, .footer-logo { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; padding: 0; }
  footer { border: 0; padding: 12pt 0 0; }
  h1 { font-size: 20pt; }
  h2 { font-size: 13pt; margin-top: 18pt; }
  h3 { font-size: 11.5pt; }
  p { color: #222; font-size: 10.5pt; }
  p.versal { background: none; border: 1px solid #999; }
  main a { color: #000; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  h2, h3 { break-after: avoid; }
  p { orphans: 3; widows: 3; }
}

/* Abschlusszeile im Fussbereich, Kunde links und Umsetzung rechts */
.fabschluss {
  width: 100%; max-width: 820px; margin-top: 4px; padding-top: 18px;
  border-top: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
}
.fabschluss .fcopy { text-align: left; }
@media (max-width: 700px) {
  .fabschluss { flex-direction: column-reverse; text-align: center; gap: 12px; }
  .fabschluss .fcopy { text-align: center; }
}