:root{
      --cream:#F4ECDC; --cream-2:#FBF6EC;
      --terracotta:#B85C3C; --terracotta-deep:#8F4226;
      --brown:#2C2018; --brown-deep:#221812;
      --ink:#2C2018; --ink-soft:#6B5848;
      --gold:#D8A23B; --stone:#7A1E16;
      --line:rgba(44,32,24,0.14);
      --serif:'Cormorant Garamond',Georgia,serif;
      --sans:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
      --max:1340px;
    }
    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;}
    a{color:inherit;}
    img{max-width:100%;display:block;}
    h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-0.01em;}
    p{margin:0;}
    ::selection{background:var(--terracotta);color:var(--cream);}
    .wrap{max-width:var(--max);margin:0 auto;}
    section[id]{scroll-margin-top:80px;}

    /* ---------- Header ---------- */
    .site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;
      padding:22px 64px;background:var(--terracotta);position:sticky;top:0;z-index:50;}
    .brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
    .brand-name{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--cream);}
    .brand-name span{color:var(--gold);}
    .nav{display:flex;align-items:center;gap:30px;}
    .nav-link{color:rgba(244,236,220,0.88);text-decoration:none;font-size:14px;letter-spacing:0.02em;}
    .nav-link:hover{color:var(--cream);}
    .lang{display:flex;gap:8px;font-size:13px;letter-spacing:0.06em;}
    .lang a{text-decoration:none;color:rgba(244,236,220,0.6);}
    .lang a[aria-current]{color:var(--cream);font-weight:700;}
    .btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;border-radius:999px;
      font-size:13.5px;padding:11px 22px;background:var(--cream);color:var(--ink);}
    .btn:hover{opacity:.9;}

    /* ---------- Hero ---------- */
    .hero{background:var(--cream);padding:56px 64px 104px;}
    .hero-inner{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--terracotta);
      font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:26px;}
    .eyebrow::before{content:"";width:24px;height:1px;background:var(--terracotta);}
    .hero h1{font-size:62px;line-height:1.04;color:var(--ink);margin-bottom:26px;text-wrap:balance;}
    .hero-sub{font-size:17px;line-height:1.65;color:var(--ink-soft);margin-bottom:36px;max-width:30em;}
    .hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
    .btn-dark{background:var(--brown);color:var(--cream);font-size:15px;padding:15px 30px;}
    .btn-ghost{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:15px;font-weight:600;
      color:var(--ink);padding:15px 6px;border-bottom:1px solid rgba(44,32,24,0.3);}

    /* ---------- Bild-Platzhalter ---------- */
    .media{position:relative;border-radius:6px;overflow:hidden;border:1px solid rgba(44,32,24,0.1);
      background:repeating-linear-gradient(135deg,#E8DCC4,#E8DCC4 11px,#EFE5D1 11px,#EFE5D1 22px);}
    .media-label{position:absolute;left:20px;bottom:20px;font-family:ui-monospace,'SF Mono',monospace;
      font-size:11px;letter-spacing:0.08em;color:#8a7257;background:rgba(244,236,220,0.85);padding:6px 10px;border-radius:4px;}
    .media.hero-media{aspect-ratio:4/5;}
    .hero-media-caption{margin-top:16px;text-align:center;font-size:17px;font-weight:600;color:var(--ink);line-height:1.4;}

    /* ---------- Leistungen ---------- */
    .services{background:var(--cream-2);padding:100px 64px;border-top:1px solid rgba(44,32,24,0.08);}
    .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px;flex-wrap:wrap;}
    .kicker{color:var(--terracotta);font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:16px;}
    .services h2{font-size:50px;line-height:1.08;color:var(--ink);}
    .section-head p{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:24em;}
    .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
    @media (max-width:1100px){ .service-grid{grid-template-columns:1fr 1fr;} .service-grid article:nth-child(3){grid-column:1 / -1;} }
    .service-card{background:var(--cream);border:1px solid rgba(44,32,24,0.1);border-radius:8px;padding:40px;}
    .service-top{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;}
    .service-num{font-family:var(--serif);font-size:40px;color:var(--terracotta);line-height:1;}
    .service-tag{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#8a7257;}
    .service-card h3{font-size:28px;color:var(--ink);margin-bottom:14px;line-height:1.12;}
    .service-card > p{font-size:15px;line-height:1.65;color:var(--ink-soft);margin-bottom:24px;}
    .points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
    .points li{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5;color:#3a2a20;}
    .points li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;margin-top:7px;}

    /* ---------- Prozess (Braun) ---------- */
    .process{background:var(--brown);padding:100px 64px;color:var(--cream);}
    .process .section-head{display:block;margin-bottom:60px;}
    .process .kicker{color:var(--gold);}
    .process h2{font-size:50px;color:var(--cream);}
    .process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(244,236,220,0.2);}
    .process-step{padding:34px 30px;border-right:1px solid rgba(244,236,220,0.14);}
    .process-step:first-child{padding-left:0;}
    .process-num{font-family:var(--serif);font-size:38px;color:#D88B5C;display:block;margin-bottom:18px;line-height:1;}
    .process-step h4{font-family:var(--sans);font-size:17px;font-weight:700;color:var(--cream);margin-bottom:10px;}
    .process-step p{font-size:14px;line-height:1.6;color:rgba(244,236,220,0.78);}

    /* ---------- Case Study (Terrakotta) ---------- */
    .case{display:grid;grid-template-columns:1fr 1fr;background:var(--terracotta);}
    .case-copy{padding:96px 64px;color:var(--cream);display:flex;flex-direction:column;justify-content:center;}
    .case .kicker{color:var(--cream);opacity:.8;}
    .case h2{font-size:52px;line-height:1.06;color:var(--cream);margin-bottom:20px;}
    .case-copy > p{font-size:16px;line-height:1.65;opacity:.9;margin-bottom:40px;max-width:30em;}
    .case-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:40px;}
    @media (max-width:560px){ .case-stats{grid-template-columns:1fr 1fr;} }
    .stat-value{font-family:var(--serif);font-size:42px;line-height:1;margin-bottom:8px;}
    .stat-label{font-size:12.5px;letter-spacing:0.06em;opacity:.78;}
    .btn-cream-on{align-self:flex-start;background:var(--cream);color:var(--ink);font-size:14.5px;padding:14px 28px;}
    .case-media{position:relative;min-height:520px;
      background:repeating-linear-gradient(135deg,#a8512f,#a8512f 11px,#b15835 11px,#b15835 22px);}
    .case-media .media-label{color:var(--cream);background:rgba(34,24,18,0.4);}

    /* ---------- Kontakt (Braun) ---------- */
    .contact{background:var(--brown);color:var(--cream);padding:128px 64px;text-align:center;}
    .contact-inner{max-width:760px;margin:0 auto;}
    .contact .kicker{color:var(--gold);}
    .contact h2{font-size:58px;line-height:1.05;margin-bottom:22px;}
    .contact > .contact-inner > p{font-size:18px;line-height:1.6;opacity:.82;margin-bottom:40px;}
    .contact-actions{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;}
    .btn-terra{background:var(--terracotta);color:var(--cream);font-size:15px;padding:16px 34px;}
    .contact-email{color:var(--cream);text-decoration:none;font-size:16px;border-bottom:1px solid rgba(244,236,220,0.4);padding-bottom:3px;}

    /* ---------- Footer ---------- */
    .site-footer{background:var(--brown-deep);color:var(--cream);padding:34px 64px;
      display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(244,236,220,0.1);}
    .foot-tag{font-size:12.5px;letter-spacing:0.08em;opacity:.6;text-transform:uppercase;}
    .foot-copy{font-size:12.5px;opacity:.5;}

    /* ---------- Erfolge (Tabs) ---------- */
    .erfolge{background:var(--cream);padding:100px 64px;}
    .tabs{display:flex;gap:10px;margin:0 0 40px;flex-wrap:wrap;}
    .tab{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0.02em;padding:11px 22px;border-radius:999px;border:1px solid rgba(44,32,24,0.18);background:transparent;color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s;}
    .tab:hover{color:var(--ink);}
    .tab.is-active{background:var(--brown);color:var(--cream);border-color:var(--brown);}
    .tab-panel.is-hidden{display:none;}
    .erfolge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
    .erfolge-card{background:var(--cream-2);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
    .erfolge-card .ph{aspect-ratio:3/2;position:relative;overflow:hidden;background:#EFE5D1;}
    .erfolge-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
    .erfolge-card .ph span{position:absolute;left:16px;bottom:16px;font-family:ui-monospace,'SF Mono',monospace;font-size:10.5px;letter-spacing:0.06em;color:#8a7257;background:rgba(244,236,220,0.85);padding:5px 8px;border-radius:4px;}
    .erfolge-card .body{padding:22px 24px 26px;}
    .erfolge-card .meta{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--terracotta);margin-bottom:8px;}
    .erfolge-card h3{font-size:22px;color:var(--ink);margin-bottom:8px;line-height:1.15;}
    .erfolge-card .body p{font-size:14px;line-height:1.6;color:var(--ink-soft);}
    .brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
    .brand-slot{aspect-ratio:5/3;border:1px solid var(--line);border-radius:8px;background:var(--cream-2);display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font-family:ui-monospace,'SF Mono',monospace;font-size:11px;letter-spacing:0.06em;color:#8a7257;}
    @media (max-width:900px){ .erfolge{padding-left:24px;padding-right:24px;} .erfolge-grid,.brand-grid{grid-template-columns:1fr 1fr;} }
    @media (max-width:560px){ .erfolge-grid{grid-template-columns:1fr;} }

    /* ---------- Mobil ---------- */
    @media (max-width:900px){
      .site-header{padding:16px 24px;flex-wrap:wrap;gap:14px;}
      .brand img{width:60px;height:60px;}
      .brand-name{font-size:26px;}
      .nav{gap:18px;}
      .hero,.services,.process,.contact{padding-left:24px;padding-right:24px;}
      .hero{padding-top:40px;padding-bottom:64px;}
      .hero-inner{grid-template-columns:1fr;gap:36px;}
      .hero h1{font-size:44px;}
      .service-grid{grid-template-columns:1fr;}
      .process-grid{grid-template-columns:1fr 1fr;}
      .process-step{border-right:none;border-bottom:1px solid rgba(244,236,220,0.14);}
      .process-step:first-child{padding-left:30px;} /* Tablet/Handy: Schritt 1 so eingerückt wie 2–4, nicht am Bildschirmrand */
      .case{grid-template-columns:1fr;}
      .case-copy{padding:64px 24px;}
      .case-media{min-height:320px;}
      .contact{padding:88px 24px;}
      .contact h2{font-size:42px;}
      .site-footer{padding:28px 24px;}
    }
    @media (max-width:560px){
      .nav-link{display:none;}
      .process-grid{grid-template-columns:1fr;}
    }