/* v-crypt.com — Fassung D (Holz, Karte, Buch). Keine fremden Quellen. */
@font-face{font-family:"Barlow SC";src:url(schriften/barlow-semi-condensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(schriften/eb-garamond.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(schriften/eb-garamond-kursiv.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}

:root{
  --birke:#DCC49B;   /* Birkensperrholz */
  --brand:#3A2213;   /* Laserbrand, Schrift */
  --sengen:#623C1F;  /* angesengt, zweite Schrift */
  --kante:#B48A5C;   /* Schnittkante, Linien */
  --rot:#8C1A15;     /* Markierung */
  --rand:clamp(1rem,5vw,5rem);
}
*{box-sizing:border-box}
html{background:var(--birke)}
body{margin:0;color:var(--brand);font:400 1.3rem/1.55 "EB Garamond",Garamond,Georgia,serif;overflow-x:hidden;
  background:url(bilder/maserung.svg),var(--birke)}
a{color:var(--brand);text-decoration-color:var(--rot);text-decoration-thickness:2px;text-underline-offset:.2em}
a:hover{color:var(--rot)}
a:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
h1,h2,h3,.marke{font-family:"Barlow SC","Arial Narrow",sans-serif;font-weight:600}
.sprung{position:absolute;left:-999px;top:0;background:var(--brand);color:var(--birke);padding:.5rem 1rem}
.sprung:focus{left:1rem}

/* Logo als Brand: die Maske ist schwarz/transparent, die Farbe kommt von hier */
.logo{display:block;aspect-ratio:1;background:var(--brand);
  -webkit-mask:url(bilder/dragon-und-bear.png) center/contain no-repeat;mask:url(bilder/dragon-und-bear.png) center/contain no-repeat}

/* ---------- Startseite ---------- */
.kopf{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;
  min-height:min(100vh,860px);padding:3rem var(--rand);background:url(bilder/hoehenlinien.svg) center/cover no-repeat}
.kopf::before{content:"";position:absolute;inset:0;background:var(--birke);opacity:.72}
.kopf>*{position:relative}
.kopf .logo{justify-self:center;width:min(46vw,660px)}
.kopf .marke{font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1;margin:0 0 1.2rem;letter-spacing:-.005em}
.lead{font-size:1.6rem;line-height:1.4;margin:0;max-width:24rem;font-style:italic;color:var(--sengen)}

.start{padding:0 var(--rand)}
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem;padding:4rem 0;border-top:2px solid var(--brand)}
.drei h2{font-size:1.65rem;line-height:1.1;margin:0 0 .5rem;padding-top:1.2rem;position:relative}
.drei h2::before,.seite h2::before{content:"";position:absolute;left:0;top:0;width:2.2rem;height:.5rem;background:var(--rot)}
.drei p{margin:0}

.lage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;padding:3.5rem 0 4.5rem;border-top:1px solid var(--kante)}
.lage h2{font-size:1.5rem;margin:0 0 .7rem;display:flex;align-items:center;gap:.7rem}
.sym{width:1.25rem;height:1.25rem;flex:none}
.sym.drin{background:var(--brand);clip-path:polygon(50% 0,100% 100%,0 100%)}
.sym.drauf{border:3px solid var(--brand);border-radius:50%}
.lage ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--brand)}
.lage li{padding:.6rem 0;border-bottom:1px solid var(--kante);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.lage li span{color:var(--sengen);font-style:italic}
.lage li span.offen{color:var(--rot)}

/* ---------- Unterseiten ---------- */
.rahmen{display:grid;grid-template-columns:minmax(0,42rem) minmax(0,1fr);gap:0 3rem}
.randlogo{position:sticky;top:3rem;align-self:start;justify-self:center;width:min(28vw,400px);margin-top:3.5rem}
.leiste{display:flex;align-items:center;gap:1rem;padding:1.2rem var(--rand);border-bottom:2px solid var(--brand)}
.leiste .logo{width:3.6rem}
.leiste a.heim{display:flex;align-items:center;gap:1rem;text-decoration:none;font-family:"Barlow SC",sans-serif;font-weight:600;font-size:1.5rem}
.seite{max-width:42rem;padding:3.5rem var(--rand) 4rem;margin:0}
.seite h1{font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;margin:0 0 1.2rem}
.seite .lead{max-width:none;margin-bottom:2.5rem}
.seite h2{font-size:1.6rem;line-height:1.15;margin:2.8rem 0 .7rem;padding-top:1.2rem;position:relative}
.seite h3{font-size:1.25rem;margin:1.8rem 0 .4rem}
.seite p,.seite ul,.seite ol{margin:0 0 1em}
.seite ul{padding-left:1.2em}
.seite li{margin:.25em 0}
.seite address{font-style:normal;font-size:1.45rem;line-height:1.45;margin:0 0 1.5rem}
.seite blockquote{margin:1.2rem 0;padding:.4rem 0 .4rem 1.2rem;border-left:.5rem solid var(--rot)}
.seite blockquote p{margin:0 0 .4em}
.seite .klein{font-size:1.1rem;color:var(--sengen)}
.seite code{font-family:inherit;font-style:italic}

footer{padding:2rem var(--rand) 2.6rem;border-top:2px solid var(--brand);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:baseline}
footer nav{display:flex;gap:1.8rem;flex-wrap:wrap;font-family:"Barlow SC",sans-serif;font-weight:600;font-size:1.2rem}
footer small{color:var(--sengen);font-style:italic;font-size:1.05rem}

@media (max-width:820px){
  body{font-size:1.2rem}
  .kopf{grid-template-columns:1fr;min-height:0;padding:0 1rem 2.5rem}
  .kopf .logo{width:88vw;margin:1.5rem auto}
  .kopf .marke{font-size:2.2rem}
  .lead{font-size:1.4rem}
  .start{padding:0 1rem}
  .drei{grid-template-columns:1fr;gap:2rem;padding:3rem 0}
  .lage{grid-template-columns:1fr;gap:2.2rem;padding:2.5rem 0 3rem}
  .leiste .logo{width:3rem}
  .rahmen{display:block}
  .randlogo{display:none}
  .seite{padding:2.5rem 1rem 3rem}
  .seite address{font-size:1.3rem}
}
@media print{body{background:#fff}.kopf{background:none}.kopf::before{display:none}}