/* Maison LAROGY · Journal — Kopf und Fuss identisch zur Startseite */
:root{
  --kalk:#F4EEE3; --putz:#E8DDC9; --salbei:#A2A88E; --paprika:#BC4B2F;
  --ochsenblut:#6E2A20; --messing:#A6814C; --tinte:#2B2620; --linie:#cabfa9;
  --linie-soft:#ded2bd;
  --bodoni:'Bodoni Moda', Georgia, serif; --fraunces:'Fraunces', Georgia, serif;
  --sans:'Outfit', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--kalk); color:var(--tinte); font-family:var(--sans);
     font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased;}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1200px; margin:0 auto; padding:0 40px;}
.skip{position:absolute; left:-999px; top:0; background:var(--tinte); color:var(--kalk); padding:10px 16px; z-index:200;}
.skip:focus{left:8px; top:8px;}

/* ---------- HEADER (1:1 von der Startseite) ---------- */
header{
  display:flex; justify-content:space-between; align-items:center;
  padding:60px 0 32px; gap:32px;
}
.logo-section{display:flex; flex-direction:column; align-items:center; white-space:nowrap; flex-shrink:0;}
.logo{
  font-family:'Bodoni Moda'; font-size:22px; font-weight:500; text-transform:uppercase;
  letter-spacing:.16em; color:var(--tinte); text-decoration:none; padding-bottom:3px;
  border-bottom:1px solid var(--messing); padding-left:.16em; width:100%; text-align:center;
}
.logo-sub{
  font-family:'Bodoni Moda'; font-size:10px; letter-spacing:.32em; padding-left:.32em;
  text-transform:uppercase; color:var(--tinte); font-weight:400; margin-top:7px;
}
nav{
  display:flex; gap:20px; font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; align-items:center; flex:1; justify-content:center; white-space:nowrap;
}
nav a{color:var(--tinte); text-decoration:none; transition:color .3s;}
nav a:hover{color:var(--paprika);}
nav .lang{display:flex; gap:10px; margin-left:auto; padding-left:16px; border-left:1px solid var(--linie);}
nav .lang a{font-size:10px;}
.btn-primary{
  background:var(--tinte); color:var(--kalk); padding:16px 30px; text-decoration:none;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  white-space:nowrap; display:inline-block; flex-shrink:0;
}
.btn-primary:hover{background:var(--ochsenblut);}

/* ---------- Seiten-Typo ---------- */
.eyebrow{font-size:11px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--paprika); margin:0 0 18px;}
h1{font-family:var(--bodoni); font-weight:500; text-transform:uppercase; letter-spacing:.03em;
   font-size:clamp(32px,4.6vw,54px); line-height:1.07; margin:0; font-variation-settings:'opsz' 8;}
h2{font-family:var(--bodoni); font-weight:500; text-transform:uppercase; letter-spacing:.05em;
   font-size:clamp(22px,2.6vw,30px); line-height:1.12; margin:42px 0 14px; font-variation-settings:'opsz' 8;}
h3{font-family:var(--bodoni); font-weight:500; font-size:19px; margin:0 0 8px; text-transform:uppercase; letter-spacing:.04em;}
p{margin:0 0 18px;}
.lead{font-size:18px; max-width:60ch;}

/* page header */
.page-header{padding:34px 0 14px; border-bottom:1px solid var(--linie-soft);}
.breadcrumb{font-size:12px; letter-spacing:.06em; color:#7d7264; margin:0 0 22px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.breadcrumb a{color:#7d7264;} .breadcrumb a:hover{color:var(--paprika);} .breadcrumb span{color:var(--linie);}

/* article */
.article-wrap{padding:46px 0 90px;}
.article{max-width:760px; margin:0 auto;}
.article-hero{margin:0 0 38px;} .article-hero img{width:100%; border-radius:4px; aspect-ratio:16/10; object-fit:cover;}
.article-lead{font-family:var(--fraunces); font-size:23px; line-height:1.5; color:var(--ochsenblut); margin:0 0 30px; font-weight:400;}
.article p{font-size:17px; color:#3a342c;}
.article a{color:var(--paprika); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;}
.article a:hover{color:var(--ochsenblut);}
.article-figure{margin:34px 0;} .article-figure img{width:100%; border-radius:4px;}
blockquote{font-family:var(--fraunces); font-style:italic; font-size:22px; line-height:1.45; color:var(--tinte);
  border-left:2px solid var(--paprika); margin:32px 0; padding:6px 0 6px 26px;}

/* faq */
.faq{max-width:760px; margin:70px auto 0; padding-top:46px; border-top:1px solid var(--linie);}
.faq-item{padding:20px 0; border-bottom:1px solid var(--linie-soft);}
.faq-item h3{margin-bottom:8px; text-transform:none; letter-spacing:0; font-family:var(--fraunces); font-size:19px; color:var(--tinte);}
.faq-item p{margin:0; color:#4a4036;}

/* more */
.more{max-width:760px; margin:80px auto 0; padding-top:46px; border-top:1px solid var(--linie);}
.more-list{list-style:none; padding:0; margin:0;}
.more-list li{padding:18px 0; border-bottom:1px solid var(--linie-soft);}
.more-list li:last-child{border-bottom:0;}
.more-list a{color:inherit; display:block; transition:.2s;} .more-list a:hover{color:var(--paprika);}
.kicker{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--paprika); margin-bottom:6px;}

/* blog index grid */
.blog-index{padding:50px 0 96px;}
.card-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:54px 48px;}
.card-post{display:flex; flex-direction:column; transition:.2s;}
.card-media{overflow:hidden; border-radius:4px; margin-bottom:18px;}
.card-media img{width:100%; aspect-ratio:16/11; object-fit:cover; transition:transform .5s ease;}
.card-post:hover .card-media img{transform:scale(1.04);}
.card-body .kicker{color:var(--paprika);}
.card-body h2{font-size:clamp(22px,2.4vw,28px); margin:4px 0 10px; text-transform:none; letter-spacing:.01em;}
.card-body p{font-family:var(--fraunces); font-size:17px; color:#4a4036; margin:0 0 12px;}
.link-arrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--paprika); font-weight:500;}

/* ---------- FOOTER (1:1 von der Startseite) ---------- */
footer{padding:80px 0; border-top:1px solid var(--linie); margin-top:0; background:transparent; color:var(--tinte);}
footer .wrap{display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px;}
footer h3{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinte); margin-bottom:20px; font-weight:500;}
footer p{font-size:13px; line-height:1.8; color:#7a6f60;}
footer a{color:var(--ochsenblut); text-decoration:none;}
footer a:hover{color:var(--paprika);}

@media(max-width:900px){
  .wrap{padding:0 22px;}
  nav{flex-direction:column; gap:8px;}
  nav .lang{margin:0; padding:0; border:none;}
  header{flex-direction:column; gap:20px; padding:34px 0 24px;}
  .logo-section{align-items:center; margin-bottom:12px;}
  .card-grid{grid-template-columns:1fr; gap:42px;}
  footer .wrap{grid-template-columns:1fr; gap:28px;}
}