/*
Theme Name: Nachlass Rhein-Ruhr
Author: Serkan Parlak
Version: 1.0
*/

  :root{
    --paper:#E9E6DE;        /* warmer Stein/Pergament-Grund */
    --paper-2:#E2DFD5;      /* leicht tiefer, fuer Wechsel */
    --ink:#23282A;          /* tiefe Schiefer-Tinte, Text */
    --forest:#2C352E;       /* tiefes gedaempftes Waldgruen, dunkle Flaechen */
    --forest-soft:#38443A;
    --brass:#9A7B4F;        /* Heritage-Messing, sparsam */
    --stone:#6C6E64;        /* gedaempftes Oliv-Grau, Sekundaer */
    --line:#D2CDBF;         /* Haarlinie auf Papier */
    --line-dk:#3D473F;      /* Haarlinie auf dunkel */
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --measure:64ch;
  }
  *{box-sizing:border-box}
  body,figure{margin:0}
  .wrap{background:var(--paper);color:var(--ink);font-family:var(--sans);
    font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
  .col{max-width:1080px;margin:0 auto;padding:0 28px}
  h1,h2,h3{font-family:var(--serif);font-weight:600;text-wrap:balance;line-height:1.12;letter-spacing:-0.01em}
  p{max-width:var(--measure)}
  a{color:inherit}
  .eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--brass)}
  .stone{color:var(--stone)}

  /* ---- header ---- */
  header{border-bottom:1px solid var(--line)}
  .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0}
  .mark{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:20px;letter-spacing:.01em}
  .seal{width:30px;height:30px;border:1.5px solid var(--brass);border-radius:50%;
    display:grid;place-items:center;color:var(--brass);font-family:var(--serif);font-size:15px;flex:none}
  .btn{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.02em;
    background:var(--forest);color:#EFEDE4;border:1px solid var(--forest);
    padding:11px 20px;border-radius:2px;text-decoration:none;display:inline-block;
    transition:background .2s ease,transform .2s ease}
  .btn:hover{background:var(--forest-soft)}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn.ghost:hover{border-color:var(--ink)}
  .btn.light{background:var(--brass);border-color:var(--brass);color:#20180C}
  .btn.light:hover{background:#B08B57}

  /* ---- hero ---- */
  .hero{padding:96px 0 84px}
  .hero .eyebrow{display:block;margin-bottom:26px}
  .hero h1{font-size:clamp(34px,5.4vw,60px);max-width:16ch}
  .hero .lede{font-size:clamp(18px,2vw,21px);margin-top:26px;color:#3a4042;max-width:52ch}
  .hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
  .hero .fine{margin-top:22px;font-size:14px;color:var(--stone)}
  .rule{height:1px;background:var(--line);border:0;margin:0}

  /* ---- generic section ---- */
  section{padding:74px 0}
  .kicker{display:flex;align-items:baseline;gap:16px;margin-bottom:40px}
  .kicker h2{font-size:clamp(25px,3vw,33px)}
  .kicker .num{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--brass);
    letter-spacing:.1em;padding-top:8px}

  /* two cases */
  .cases{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);
    border:1px solid var(--line)}
  .case{background:var(--paper);padding:36px 34px}
  .case h3{font-size:22px;margin:0 0 12px}
  .case .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);
    font-weight:600;display:block;margin-bottom:16px}
  .case p{color:#3a4042;font-size:16px}

  /* services list */
  .svc{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
  .svc .item{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px 0;
    border-top:1px solid var(--line);align-items:start}
  .svc .item:nth-child(-n+2){border-top:0}
  .svc .k{font-family:var(--serif);font-size:15px;color:var(--brass);padding-top:2px;
    font-variant-numeric:tabular-nums}
  .svc .t{font-weight:600;font-size:16px}
  .svc .t span{display:block;font-weight:400;color:var(--stone);font-size:14px;margin-top:3px}

  /* process */
  .steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
  .step{background:var(--paper);display:grid;grid-template-columns:88px 1fr;gap:24px;
    padding:26px 30px;align-items:baseline}
  .step .n{font-family:var(--serif);font-size:34px;color:var(--brass);line-height:1;
    font-variant-numeric:tabular-nums}
  .step h3{font-size:19px;margin:0 0 5px}
  .step p{margin:0;color:#3a4042;font-size:15.5px}

  /* dark discretion band */
  .band{background:var(--forest);color:#DFE2D8}
  .band .col{padding-top:80px;padding-bottom:80px}
  .band .eyebrow{color:var(--brass)}
  .band h2{color:#EDEFE6;font-size:clamp(25px,3vw,33px);max-width:20ch}
  .promises{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dk);
    border:1px solid var(--line-dk);margin-top:44px}
  .promise{background:var(--forest);padding:30px 26px}
  .promise h3{color:#EDEFE6;font-size:18px;margin:0 0 12px}
  .promise h3 b{color:var(--brass);font-weight:600}
  .promise p{color:#AEB5A8;font-size:15px;margin:0}

  /* team */
  .team{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  .person{border-top:2px solid var(--brass);padding-top:22px}
  .person h3{font-size:20px;margin:0 0 4px}
  .person .role{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--brass);
    font-weight:600;margin-bottom:14px}
  .person p{font-size:15.5px;color:#3a4042;margin:0}

  /* partner + contact split */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line)}
  .pane{background:var(--paper-2);padding:44px 40px}
  .pane.dark{background:var(--forest);color:#DFE2D8}
  .pane .eyebrow{margin-bottom:16px}
  .pane h2{font-size:26px;margin:0 0 14px}
  .pane.dark h2{color:#EDEFE6}
  .pane p{font-size:15.5px;color:#3a4042;margin:0 0 24px}
  .pane.dark p{color:#B7BDB0}
  .contactline{font-family:var(--serif);font-size:19px;margin:6px 0}
  .contactline a{text-decoration:none;border-bottom:1px solid var(--brass);color:#EDEFE6}

  footer{border-top:1px solid var(--line);background:var(--paper)}
  footer .col{padding:34px 28px;display:flex;flex-wrap:wrap;gap:14px 28px;
    justify-content:space-between;align-items:center;font-size:13px;color:var(--stone)}
  footer .legal{display:flex;flex-wrap:wrap;gap:6px 18px}
  .draft{font-size:12px;color:var(--brass);letter-spacing:.04em}

  a:focus-visible,.btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

  @media (max-width:760px){
    .cases,.svc,.promises,.team,.split{grid-template-columns:1fr}
    .promises{margin-top:30px}
    .step{grid-template-columns:60px 1fr;gap:16px;padding:22px}
    .hero{padding:60px 0 56px}
    section{padding:54px 0}
  }
  .reveal{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
  .reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.24s}.reveal.d4{animation-delay:.32s}
  @keyframes rise{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}

.nf-in{width:100%;padding:12px 14px;margin:6px 0;border:1px solid rgba(255,255,255,.25);border-radius:2px;background:rgba(255,255,255,.07);color:#EDEFE6;font-size:15px;box-sizing:border-box;font-family:var(--sans)}
.nf-in::placeholder{color:#9aa295}
.nf-in:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:transparent}

/* --- Navigation (nachtraeglich) --- */
.nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav a{color:var(--ink,#23282A);text-decoration:none;font-size:15px;opacity:.85;transition:opacity .15s}
.nav a:hover{opacity:1}
.nav a.btn{opacity:1}
footer .legal a{color:inherit;text-decoration:none;opacity:.85;margin-right:14px}
footer .legal a:hover{opacity:1;text-decoration:underline}
@media(max-width:640px){.nav{gap:14px}.nav a{font-size:14px}}