:root{
    --cream: #f4efe6;
    --cream-deep: #ebe4d5;
    --paper: #faf6ef;
    --ink: #1f2a24;
    --ink-soft: #3b4a42;
    --muted: #6b776f;
    --sage: #8dbfad;
    --sage-deep: #4a7c6b;
    --forest: #4a7c6b;
    --accent: #b5706b;
    --line: rgba(31,42,36,.14);
    --line-soft: rgba(31,42,36,.08);

    --serif: Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    --radius: 2px;
    --maxw: 1240px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family: var(--sans);
    background: var(--cream);
    color: var(--ink);
    line-height: 1.55;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a{color: inherit; text-decoration: none;}
  img{max-width:100%; display:block;}

  body::before{
    content:"";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: radial-gradient(rgba(31,42,36,.035) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: multiply;
    opacity: .6;
  }

  .wrap{max-width: var(--maxw); margin: 0 auto; padding: 0 32px;}
  @media(max-width:720px){.wrap{padding: 0 20px;}}

  /* TOP BAR */
  .topbar{
    background: var(--forest);
    color: var(--cream);
    font-size: 13px;
    letter-spacing: .02em;
    padding: 10px 0;
    position: relative;
    z-index: 10;
  }
  .topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap: 24px; flex-wrap: wrap;}
  .topbar a{display:inline-flex; align-items:center; gap:8px; opacity:.92; transition: opacity .2s;}
  .topbar a:hover{opacity:1;}
  .topbar .dot{width:6px; height:6px; border-radius:50%; background:var(--sage); display:inline-block;}

  /* HEADER */
  header.site{
    background: var(--cream);
    position: sticky; top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line-soft);
    backdrop-filter: blur(6px);
  }
  header.site .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top: 22px; padding-bottom: 22px;
  }
  .brand{display:flex; align-items:center; gap: 14px;}
  .brand-mark{
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--forest);
    display:grid; place-items:center;
    color: var(--cream);
    font-family: var(--serif);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .02em;
  }
  .brand-text{line-height:1.1;}
  .brand-text .name{
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: .01em;
  }
  .brand-text .sub{
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-top: 3px;
  }
  nav.primary{display:flex; align-items:center; gap: 36px;}
  nav.primary a{
    font-size: 14px;
    letter-spacing: .02em;
    color: var(--ink-soft);
    position: relative;
    padding: 4px 0;
  }
  nav.primary a::after{
    content:""; position:absolute; left:0; bottom:-2px;
    width:0; height:1px; background: var(--forest);
    transition: width .3s ease;
  }
  nav.primary a:hover::after{width:100%;}
  nav.primary .cta{
    background: var(--forest);
    color: var(--cream);
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: .04em;
    transition: background .2s, transform .2s;
  }
  nav.primary .cta::after{display:none;}
  nav.primary .cta:hover{background: var(--ink); transform: translateY(-1px);}
  @media(max-width:820px){nav.primary a:not(.cta){display:none;}}

  /* PAGE HERO */
  .page-hero{
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--line);
  }
  .page-hero .eyebrow{
    display:inline-flex; align-items:center; gap: 10px;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sage-deep);
    margin-bottom: 20px;
  }
  .page-hero .eyebrow .line{width:36px; height:1px; background: var(--sage-deep);}
  .page-hero h1{
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--forest);
  }
  .page-hero h1 em{
    font-style: italic;
    color: var(--accent);
  }
  .page-hero .stand{
    margin-top: 20px;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: .06em;
  }

  /* CONTENT */
  .datenschutz-content{
    padding: 80px 0 120px;
  }
  .datenschutz-grid{
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 80px;
    align-items: start;
  }
  @media(max-width:820px){
    .datenschutz-grid{grid-template-columns: 1fr; gap: 48px;}
  }

  .ds-nav{
    position: sticky;
    top: 110px;
  }
  .ds-nav .nav-title{
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sage-deep);
    margin-bottom: 14px;
  }
  .ds-nav a{
    display: block;
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--muted);
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    transition: color .2s, padding-left .2s;
  }
  .ds-nav a:hover{
    color: var(--forest);
    padding-left: 8px;
  }

  .ds-blocks{
    display: grid;
    gap: 0;
  }

  .ds-block{
    padding: 44px 0;
    border-bottom: 1px solid var(--line);
  }
  .ds-block:first-child{padding-top: 0;}

  .ds-block .block-label{
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sage-deep);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ds-block .block-label::after{
    content:"";
    flex: 1;
    height: 1px;
    background: var(--line);
  }

  .ds-block h2{
    font-family: var(--serif);
    font-weight: 300;
    font-size: 32px;
    color: var(--forest);
    margin-bottom: 24px;
    line-height: 1.1;
  }

  .ds-block p{
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.75;
    margin-bottom: 16px;
  }
  .ds-block p:last-child{margin-bottom: 0;}

  .ds-block a{
    color: var(--forest);
    border-bottom: 1px solid var(--line);
    transition: border-color .2s, color .2s;
  }
  .ds-block a:hover{
    color: var(--accent);
    border-color: var(--accent);
  }

  .ds-block ul{
    list-style: none;
    margin: 16px 0 20px;
  }
  .ds-block ul li{
    font-size: 15px;
    color: var(--ink-soft);
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: baseline;
    gap: 12px;
    line-height: 1.6;
  }
  .ds-block ul li::before{
    content: "—";
    color: var(--sage-deep);
    font-family: var(--serif);
    flex-shrink: 0;
  }

  .highlight-box{
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 28px 32px;
    margin-top: 24px;
  }
  .highlight-box p{
    margin-bottom: 0;
  }

  /* FOOTER */
  footer.site{
    background: var(--forest);
    color: var(--cream);
    padding: 64px 0 40px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
  }
  @media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr; gap:32px;}}
  @media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
  .foot-brand p{
    font-size: 14px;
    color: rgba(244,239,230,.6);
    line-height: 1.6;
    margin-top: 20px;
    max-width: 280px;
  }
  .foot-col h4{
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 16px;
  }
  .foot-col a, .foot-col div{
    display:block;
    font-size: 14px;
    color: rgba(244,239,230,.65);
    margin-bottom: 10px;
    transition: color .2s;
  }
  .foot-col a:hover{color: var(--cream);}
  .foot-bottom{
    border-top: 1px solid rgba(244,239,230,.1);
    padding-top: 28px;
    display:flex; justify-content:space-between; align-items:center; gap: 20px;
    flex-wrap: wrap;
    font-size: 12px;
    color: rgba(244,239,230,.5);
    letter-spacing: .04em;
  }
  .topbar-contact{display:flex; gap:24px; flex-wrap:wrap; align-items:center;}
  .topbar-address{opacity:.75;}
  .footer-brand-name{color:var(--cream);}
  .footer-brand-sub{color:var(--sage);}