@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/caslon-regular.woff2) format("woff2")}
  @font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/caslon-italic.woff2) format("woff2")}
  @font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/franklin.woff2) format("woff2")}
  :root{
    --paper:#f4f1ea;
    --paper-2:#ebe6db;
    --ink:#2b2c2d;
    --ink-soft:#4a4f4b;
    --rule:#cfc8b8;
    --accent:#004ea6;
    --green:#2b2c2d;
    --serif:"Libre Caslon Text", Georgia, serif;
    --sans:"Libre Franklin", "Helvetica Neue", Arial, sans-serif;
    --w:1180px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit}
  .wrap{max-width:var(--w);margin:0 auto;padding:0 28px}
  h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0}
  h2{font-size:clamp(28px,3.4vw,40px)}
  .label{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

  /* Kopf */
  header{border-bottom:1px solid var(--rule)}
  .head{display:flex;align-items:center;justify-content:space-between;height:84px}
  .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
  .brand img{height:40px;width:auto}
  nav a{text-decoration:none;font-size:14px;margin-left:28px;color:var(--ink-soft)}
  nav a:hover{color:var(--ink)}
  nav a.cta{color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:2px}

  /* Einstieg */
  .intro{display:grid;grid-template-columns:5fr 6fr;gap:56px;padding-top:72px;padding-bottom:88px;align-items:end}
  .intro h1{font-size:clamp(38px,5.2vw,66px);letter-spacing:-.01em}
  .intro h1 em{color:var(--accent)}
  .intro p{max-width:30em;color:var(--ink-soft);margin:28px 0 0}
  .intro .actions{margin-top:36px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
  .btn{display:inline-block;background:var(--green);color:#f4f1ea;text-decoration:none;padding:15px 24px;font-size:15px;font-weight:500;border:0;cursor:pointer;font-family:var(--sans)}
  .btn:hover{background:var(--accent)}
  .textlink{font-size:15px;text-decoration:none;border-bottom:1px solid var(--rule)}
  .intro figure{margin:0;position:relative}
  .intro figure img{width:100%;height:520px;object-fit:cover}
  .intro figcaption{font-size:12px;color:var(--ink-soft);margin-top:10px}

  /* Region-Leiste */
  .strip{background:var(--green);color:#e9e5dc}
  .strip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px 48px;padding-top:24px;padding-bottom:24px;font-size:15px}
  .strip b{font-weight:600;color:#fff}

  /* Was wir tun */
  section{padding:100px 0}
  .lead{display:grid;grid-template-columns:4fr 7fr;gap:56px}
  .lead p.big{font-family:var(--serif);font-size:clamp(21px,2.1vw,26px);line-height:1.45;margin:0}
  .steps{margin:64px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
  .steps li{display:grid;grid-template-columns:90px 4fr 7fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--rule)}
  .steps .n{font-family:var(--serif);font-size:15px;color:var(--accent)}
  .steps h3{font-size:24px}
  .steps p{margin:0;color:var(--ink-soft)}

  /* Bild + Text */
  .split{display:grid;grid-template-columns:1fr 1fr;background:var(--paper-2)}
  .split img{width:100%;height:100%;min-height:460px;object-fit:cover}
  .split .txt{padding:80px 64px;align-self:center}
  .split .txt p{color:var(--ink-soft)}
  .split .txt h2{margin:14px 0 22px}

  /* Team */
  .team{display:grid;grid-template-columns:4fr 7fr;gap:56px}
  .people{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  .person{border-top:1px solid var(--ink);padding-top:20px}
  .person h3{font-size:26px}
  .person .role{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 14px}
  .person p{margin:0;color:var(--ink-soft);font-size:16px}

  /* Formular */
  #angebot{background:var(--ink);color:#e9e5dc}
  #angebot .grid{display:grid;grid-template-columns:4fr 7fr;gap:56px}
  #angebot h2{color:#fff;margin-top:14px}
  #angebot .label{color:#8fb3e8}
  #angebot aside p{color:#b9b5ac}
  #angebot aside ul{padding-left:18px;color:#b9b5ac;margin:18px 0 0}
  #angebot aside li{margin-bottom:6px}
  form{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
  .f{display:flex;flex-direction:column;gap:7px}
  .f.full{grid-column:1/-1}
  .f label{font-size:13px;color:#b9b5ac}
  .f input,.f select,.f textarea{font:inherit;font-size:16px;color:#fff;background:transparent;border:0;border-bottom:1px solid #5c605c;padding:8px 0;border-radius:0}
  .f select option{color:#000}
  .f textarea{min-height:110px;resize:vertical;border:1px solid #5c605c;padding:10px}
  .f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:#8fb3e8}
  .group-title{grid-column:1/-1;font-family:var(--serif);font-size:20px;color:#fff;margin-top:14px;padding-top:18px;border-top:1px solid #3b3f3c}
  .group-title:first-child{margin-top:0;padding-top:0;border-top:0}
  .check{grid-column:1/-1;display:flex;gap:12px;font-size:14px;color:#b9b5ac;align-items:flex-start}
  .check input{margin-top:4px;accent-color:#8fb3e8}
  form .btn{background:#8fb3e8;color:var(--ink);justify-self:start}
  form .btn:hover{background:#b3cbf0}
  .note{grid-column:1/-1;font-size:13px;color:#8d8a83;margin:0}
  .note.ok{color:#b3cbf0;font-size:16px}
  .note.err{color:#f0a8a0}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  form{position:relative}

  /* Kontakt / Fuß */
  .contact{display:grid;grid-template-columns:4fr 4fr 3fr;gap:56px;font-size:16px}
  .contact h3{font-size:20px;margin-bottom:12px}
  .contact p{margin:0;color:var(--ink-soft)}
  footer{border-top:1px solid var(--rule);padding:28px 0 40px;font-size:13px;color:var(--ink-soft)}
  footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

  /* Rechtstexte */
  .legal{max-width:760px;padding-top:72px;padding-bottom:100px;font-size:16px}
  .legal h1{font-size:clamp(34px,4vw,48px);margin:14px 0 40px}
  .legal h2{font-size:24px;margin:40px 0 12px}
  .legal h3{font-size:19px;margin:28px 0 8px}
  .legal p,.legal li{color:var(--ink-soft)}
  .legal p{margin:0 0 12px}
  .legal ul{padding-left:20px;margin:0 0 12px}

  @media (max-width:900px){
    .wrap{padding:0 16px}
    nav a:not(.cta){display:none}
    .legal{padding-top:40px;padding-bottom:64px}
    .intro,.lead,.team,#angebot .grid,.contact{grid-template-columns:1fr;gap:32px}
    .intro{padding-top:40px;padding-bottom:56px}
    .strip .wrap{grid-template-columns:1fr;gap:8px}
    .brand img{height:32px}
    .intro .actions{gap:20px}
    .intro figure img{height:300px}
    section{padding:64px 0}
    .steps li{grid-template-columns:44px 1fr;}
    .steps li p{grid-column:2}
    .split{grid-template-columns:1fr}
    .split img{min-height:280px}
    .split .txt{padding:48px 16px}
    .people{grid-template-columns:1fr}
    form{grid-template-columns:1fr}
  }