/* =============================================================
   capreolus — Unterseite „Kiefervermessung beim Rehwild"
   Built on the capreolus design system (Brand Manual v1.0)
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

@font-face{font-family:"Bodoni MT";src:url("fonts/BOD_R.TTF") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni MT";src:url("fonts/BOD_I.TTF") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni MT";src:url("fonts/BOD_B.TTF") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni MT";src:url("fonts/BOD_BI.TTF") format("truetype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni MT Condensed";src:url("fonts/BOD_CR.TTF") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni MT Condensed";src:url("fonts/BOD_CB.TTF") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --c-forest:#2D6A4F; --c-forest-light:#7EA76A; --c-forest-legacy:#005831; --c-forest-deep:#1F5039;
  --c-bg:#FAFAFA; --c-surface:#FFFFFF; --c-border:#E8E8E8; --c-border-strong:#CCCCCC;
  --c-text-muted:#A8A8A8; --c-text-secondary:#4A4A4A; --c-text:#2D2D2D;
  --c-deer-brown:#8B6F47; --c-golden-hour:#D4A574; --c-soft-beige:#C7B299;
  --c-topo-blue:#4A90A4; --c-error:#9E0142;

  --ff-display:"Bodoni MT","Bodoni 72",Didot,Georgia,serif;
  --ff-display-cond:"Bodoni MT Condensed","Bodoni MT",Didot,Georgia,serif;
  --ff-editorial:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --ff-body:"Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
  --ff-mono:"JetBrains Mono","SF Mono",Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:124px}
body{
  margin:0; background:var(--c-bg); color:var(--c-text);
  font-family:var(--ff-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ---- layout helpers ---- */
.wrap{max-width:1180px; margin:0 auto; padding:0 32px}
.col{max-width:760px}
.meta{font-family:var(--ff-mono); font-size:11px; color:var(--c-text-secondary); text-transform:uppercase; letter-spacing:.09em}
.kicker{font-family:var(--ff-mono); font-size:11px; color:var(--c-forest); text-transform:uppercase; letter-spacing:.14em; font-weight:500; margin:0 0 18px}
.lead{font-family:var(--ff-editorial); font-style:italic; font-weight:500; font-size:22px; line-height:1.5; color:var(--c-text-secondary); text-wrap:pretty}
.muted{color:var(--c-text-secondary)}
.h-display{font-family:var(--ff-display); font-weight:400; font-size:60px; line-height:1.04; letter-spacing:-.005em; margin:0; text-wrap:balance}
h1,.h1{font-family:var(--ff-display); font-weight:400; font-size:40px; line-height:1.12; margin:0; text-wrap:balance}
h2,.h2{font-family:var(--ff-display); font-weight:400; font-size:33px; line-height:1.16; margin:0; text-wrap:balance}
h3,.h3{font-family:var(--ff-display); font-weight:400; font-size:23px; line-height:1.28; margin:0}
.h4{font-family:var(--ff-body); font-weight:600; font-size:18px; line-height:1.4; margin:0}
p{margin:0 0 18px; text-wrap:pretty}
strong{font-weight:600}
.small{font-size:14px; color:var(--c-text-secondary)}

a{color:var(--c-forest); text-decoration:underline; text-underline-offset:.18em; transition:color 150ms ease}
a:hover{color:var(--c-forest-legacy)} a:visited{color:var(--c-forest)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-body); font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:4px; border:none; cursor:pointer; text-decoration:none;
  transition:background 150ms ease,color 150ms ease,border-color 150ms ease}
.btn:focus-visible{outline:2px solid var(--c-forest); outline-offset:2px}
.btn-primary{background:var(--c-forest); color:#fff} .btn-primary:hover{background:var(--c-forest-deep); color:#fff}
.btn-primary:visited{color:#fff}
.btn-secondary{background:transparent; color:var(--c-forest); border:1.5px solid var(--c-forest)}
.btn-secondary:hover{background:rgba(45,106,79,.08); color:var(--c-forest)}
.btn-secondary:visited{color:var(--c-forest)}
.btn-tertiary{background:none; border:none; color:var(--c-forest); font-weight:600; padding:0; font-size:15px; cursor:pointer; text-decoration:none}
.btn-tertiary::after{content:" →"} .btn-tertiary:hover{color:var(--c-forest-legacy)}

/* ============================ HEADER ============================ */
.site-header{position:sticky; top:0; z-index:60; background:rgba(250,250,250,.93);
  border-bottom:1px solid var(--c-border); backdrop-filter:saturate(140%) blur(6px)}
.site-header .inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{height:34px; width:auto; display:block}
.mainnav{display:flex; gap:30px; align-items:center}
.mainnav a{color:var(--c-text); text-decoration:none; font-size:15px}
.mainnav a:hover{color:var(--c-forest)}
.mainnav a.current{color:var(--c-forest); font-weight:600}
.mainnav .btn-secondary{margin-left:6px}
@media(max-width:880px){ .mainnav .navlink{display:none} }

/* ---- sub anchor nav ---- */
.subnav{position:sticky; top:71px; z-index:55; background:var(--c-surface); border-bottom:1px solid var(--c-border)}
.subnav .inner{display:flex; align-items:center; gap:6px; height:52px; overflow-x:auto; scrollbar-width:none}
.subnav .inner::-webkit-scrollbar{display:none}
.subnav .label{font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-text-muted); white-space:nowrap; margin-right:14px}
.subnav a{font-family:var(--ff-body); font-size:13.5px; color:var(--c-text-secondary); text-decoration:none; white-space:nowrap;
  padding:7px 13px; border-radius:4px; transition:background 150ms ease,color 150ms ease}
.subnav a:hover{background:rgba(45,106,79,.07); color:var(--c-forest)}
.subnav a.active{color:var(--c-forest); background:rgba(45,106,79,.10); font-weight:600}

/* ============================ HERO ============================ */
.hero{position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--c-border)}
.hero .photo{position:absolute; inset:0; z-index:-2; background:#EFE8DC url("hero-caliper.png") center right / cover no-repeat}
.hero .scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(250,248,243,.96) 0%, rgba(250,248,243,.90) 30%, rgba(250,248,243,.55) 52%, rgba(250,248,243,0) 70%)}
.hero .inner{padding:118px 0 124px}
.hero .col{max-width:620px}
.hero .h-display{margin-bottom:26px}
.hero .sub{font-family:var(--ff-editorial); font-style:italic; font-weight:500; font-size:25px; line-height:1.42; color:var(--c-text-secondary); margin:0 0 30px; max-width:560px}
.hero .promise{font-size:17px; line-height:1.6; color:var(--c-text); max-width:520px; margin:0 0 34px}
.hero .ctas{display:flex; gap:14px; flex-wrap:wrap}
@media(max-width:760px){
  .hero .photo{background-position:72% center; background-size:cover}
  .hero .scrim{background:linear-gradient(180deg, rgba(250,248,243,.97) 0%, rgba(250,248,243,.92) 58%, rgba(250,248,243,.62) 100%)}
}

/* ============================ SECTIONS ============================ */
section.band{padding:92px 0}
section.band.tight{padding:72px 0}
.band-surface{background:var(--c-surface); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border)}
.eyebrow{display:flex; align-items:baseline; gap:14px; margin-bottom:22px}
.eyebrow .num{font-family:var(--ff-display); font-size:20px; color:var(--c-forest); font-style:italic}
.eyebrow .k{font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-forest); font-weight:500}
.section-head{max-width:780px; margin-bottom:46px}
.section-head h2{margin-bottom:20px}

/* editorial pullquote / callout */
.callout{border-left:2px solid var(--c-forest); padding:4px 0 4px 26px; margin:34px 0;
  font-family:var(--ff-editorial); font-style:italic; font-weight:500; font-size:27px; line-height:1.3; color:var(--c-text); text-wrap:balance}
.callout.blue{border-color:var(--c-topo-blue)}

/* feature list (mono-numbered) */
.flist{display:grid; gap:26px; margin:0; padding:0; list-style:none; counter-reset:fl}
.flist li{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start}
.flist .n{font-family:var(--ff-mono); font-size:12px; color:var(--c-forest); padding-top:4px; letter-spacing:.06em}
.flist h4{margin-bottom:6px}
.flist p{margin:0; color:var(--c-text-secondary)}

/* two-column anterior/posterior */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px}
.panel{background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px; padding:28px}
.panel .tag{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px; display:inline-flex; align-items:center; gap:8px; font-weight:500}
.panel .tag .dot{width:10px; height:10px; border-radius:2px; display:inline-block}
.panel h3{margin-bottom:12px}
.panel p{color:var(--c-text-secondary); margin-bottom:0}
.panel .big{font-family:var(--ff-display); font-size:46px; line-height:1; color:var(--c-text); margin:0 0 4px}
.panel .big .u{font-size:20px; color:var(--c-text-secondary)}
.panel .bigsub{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-secondary); margin:0 0 16px}
@media(max-width:760px){ .duo{grid-template-columns:1fr} }

/* big stat band */
.statrow{display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center; margin:6px 0 8px}
.statrow .stat{font-family:var(--ff-display); font-size:118px; line-height:.92; color:var(--c-forest); white-space:nowrap}
.statrow .stat .pct{font-size:54px; vertical-align:.28em; margin-left:2px}
.statrow .txt{max-width:520px}
@media(max-width:760px){ .statrow{grid-template-columns:1fr; gap:14px} .statrow .stat{font-size:84px} }

/* ============================ PRAXIS / DIAGRAM ============================ */
.toolnote{display:flex; gap:16px; align-items:flex-start; background:rgba(45,106,79,.05); border:1px solid var(--c-border);
  border-radius:8px; padding:22px 24px; margin-bottom:40px}
.toolnote .ic{flex:0 0 auto; color:var(--c-forest); margin-top:2px}
.toolnote p{margin:0; color:var(--c-text-secondary)}
.toolnote strong{color:var(--c-text)}
.toolnote.handling{background:rgba(212,165,116,.13); border-color:#E6D8C2}
.toolnote.handling .ic{color:var(--c-deer-brown)}

.figure{background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px; padding:26px 26px 20px;
  box-shadow:0 1px 3px rgba(0,0,0,.05)}
.figure .fig-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:8px; flex-wrap:wrap}
.figure figcaption{font-family:var(--ff-editorial); font-style:italic; font-size:16px; color:var(--c-text-secondary); margin-top:8px; padding-top:14px; border-top:1px solid var(--c-border)}
.diagram{position:relative; width:100%; line-height:0}
.diagram img.jaw{display:block; width:100%; height:auto}
.diagram svg.overlay{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.diagram .mg{pointer-events:auto}

/* diagram interactive groups */
.mg{cursor:pointer; transition:opacity 150ms ease}
.mg .br{fill:none; stroke-width:11; stroke-linejoin:round}
.mg .drop{stroke-width:6; stroke-dasharray:2 16; stroke-linecap:round; opacity:.6}
.mg .ltr{font-family:var(--ff-display); font-style:italic; font-weight:700}
.mg .nm{font-family:var(--ff-mono); font-size:43px; letter-spacing:.02em; text-transform:uppercase; dominant-baseline:middle}
.diagram.dim .mg{opacity:.18}
.diagram.dim .mg.on{opacity:1}
.mg.a .br,.mg.a .drop{stroke:#2D2D2D} .mg.a .ltr{fill:#2D2D2D} .mg.a .nm{fill:#6a6a6a}
.mg.b .br,.mg.b .drop{stroke:var(--c-forest)} .mg.b .ltr{fill:var(--c-forest)} .mg.b .nm{fill:var(--c-forest)}
.mg.c .br,.mg.c .drop{stroke:var(--c-topo-blue)} .mg.c .ltr{fill:var(--c-topo-blue)} .mg.c .nm{fill:var(--c-topo-blue)}

/* diagram legend */
.leg{display:grid; gap:12px; margin-top:24px}
.leg.leg-row{grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px}
.leg button{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; text-align:left;
  background:var(--c-surface); border:1px solid var(--c-border); border-left-width:3px; border-radius:8px; padding:18px 22px; cursor:pointer;
  transition:background 150ms ease,border-color 150ms ease,box-shadow 150ms ease; width:100%; font-family:inherit}
.leg button:hover{background:#fcfcfc; box-shadow:0 1px 3px rgba(0,0,0,.06)}
.leg button.active{box-shadow:0 1px 4px rgba(0,0,0,.10)}
.leg .ltr{font-family:var(--ff-display); font-style:italic; font-size:40px; line-height:.9; width:34px; text-align:center}
.leg .nm{font-family:var(--ff-body); font-weight:600; font-size:16px; margin:0}
.leg .ds{font-size:14px; color:var(--c-text-secondary); margin:5px 0 0}
@media(max-width:820px){ .leg.leg-row{grid-template-columns:1fr} }
.leg .a{border-left-color:#2D2D2D} .leg .a .ltr{color:#2D2D2D}
.leg .b{border-left-color:var(--c-forest)} .leg .b .ltr{color:var(--c-forest)}
.leg .c{border-left-color:var(--c-topo-blue)} .leg .c .ltr{color:var(--c-topo-blue)}
.leg .star{font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-forest);
  border:1px solid var(--c-forest); border-radius:3px; padding:2px 6px; margin-left:8px; white-space:nowrap; vertical-align:2px}
.praxis-grid{display:grid; grid-template-columns:1.18fr 1fr; gap:48px; align-items:start}
.praxis-full{margin-top:4px}
.praxis-full .figure{padding:30px 32px 24px}
.praxis-full .diagram{margin:4px auto 0; max-width:1040px}
.praxis-after{max-width:760px; margin-top:48px}
@media(max-width:900px){ .praxis-grid{grid-template-columns:1fr; gap:36px} }

/* data capture mini-list */
.capture{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.capture span{font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; color:var(--c-text-secondary);
  border:1px solid var(--c-border); border-radius:4px; padding:7px 12px; background:var(--c-surface)}

/* ============================ TABLE (Daten lesen) ============================ */
.factor-table{width:100%; border-collapse:collapse; margin-top:6px; font-size:15.5px}
.factor-table caption{text-align:left}
.factor-table th{font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-secondary);
  text-align:left; padding:0 16px 12px; border-bottom:2px solid var(--c-text)}
.factor-table th.ctr,.factor-table td.ctr{text-align:center}
.factor-table td{padding:15px 16px; border-bottom:1px solid var(--c-border); vertical-align:middle}
.factor-table tr:last-child td{border-bottom:1px solid var(--c-border)}
.factor-table tbody tr:hover{background:rgba(45,106,79,.035)}
.factor-table .fac{font-weight:500; color:var(--c-text)}
.eff{font-family:var(--ff-mono); font-weight:600; font-size:15px; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:4px}
.eff.pos{color:var(--c-forest); background:rgba(45,106,79,.10)}
.eff.neg{color:var(--c-error); background:rgba(158,1,66,.08)}
.seg{font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-text-secondary)}
.seg b{font-weight:600}
.seg b.b{color:var(--c-forest)} .seg b.c{color:var(--c-topo-blue)}
@media(max-width:620px){ .factor-table{font-size:14px} .factor-table td,.factor-table th{padding-left:8px; padding-right:8px} }

/* benefit cards (Fazit) */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px}
.benefit{background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px; padding:30px 26px}
.benefit .n{font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; color:var(--c-forest); margin-bottom:18px}
.benefit h3{margin-bottom:10px; font-size:21px}
.benefit p{margin:0; color:var(--c-text-secondary); font-size:15px}
@media(max-width:820px){ .benefits{grid-template-columns:1fr} }

/* download cta block */
.download{display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
  background:var(--c-text); color:#FAFAFA; border-radius:16px; padding:44px 48px}
.download h3{color:#fff; margin-bottom:10px}
.download p{color:rgba(250,250,250,.75); margin:0; max-width:520px; font-size:15.5px}
.download .btn-primary{background:#FAFAFA; color:var(--c-text)} .download .btn-primary:hover{background:#fff; color:var(--c-text)}
@media(max-width:720px){ .download{grid-template-columns:1fr; padding:34px 28px} }

/* closing line */
.closing{text-align:center; padding:8px 0 0}
.closing .claim{font-family:var(--ff-editorial); font-style:italic; font-weight:500; font-size:38px; color:var(--c-forest); margin:0; text-wrap:balance}

/* source */
.source{font-size:13.5px; color:var(--c-text-secondary); border-top:1px solid var(--c-border); padding-top:22px; margin-top:8px}
.source .meta{margin-bottom:6px}

/* ============================ FOOTER ============================ */
.site-footer{background:var(--c-text); color:rgba(250,250,250,.78); padding:62px 0 30px}
.site-footer .top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:46px; margin-bottom:50px}
.site-footer img{height:60px; width:auto; display:block; margin-bottom:22px; opacity:.95}
.site-footer .fclaim{font-family:var(--ff-editorial); font-style:italic; font-weight:500; font-size:24px; color:#FAFAFA; margin:0}
.site-footer .ct{font-family:var(--ff-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:rgba(250,250,250,.5); margin-bottom:13px}
.site-footer .top a{display:block; color:#FAFAFA; text-decoration:none; font-size:14px; padding:4px 0}
.site-footer .top a:hover{color:var(--c-forest-light)}
.site-footer .bottom{border-top:1px solid rgba(250,250,250,.18); padding-top:22px; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:11px; color:rgba(250,250,250,.55); text-transform:uppercase; letter-spacing:.08em}
@media(max-width:820px){ .site-footer .top{grid-template-columns:1fr 1fr; gap:32px} }

@media(max-width:760px){
  .h-display{font-size:40px} h1,.h1{font-size:31px} h2,.h2{font-size:27px}
  .hero .sub{font-size:21px} .hero .inner{padding:84px 0 90px}
  section.band{padding:66px 0} .wrap{padding:0 22px}
  .callout{font-size:22px}
}