/* =========================================================
   Base.css – Clean Version (vollständig)
   Struktur:
   1) Variablen & Reset
   2) Grundtypografie & Body
   3) Header & Navigation (Desktop/Burger/Sidebar + Subnav)
   4) Hero/Masthead
   5) Container/Section
   6) Grids & Layouts (3/2/1 Spalten)
   7) Komponenten (Cards, Bilder, Buttons)
   8) Typo in Cards/Listen/Links
   9) Masonry-Galerie
   10) Footer
   11) Responsive / A11y
   ========================================================= */

/* ========== 1) Variablen & Reset ========================================= */
:root{
  --brand:#7a2324;
  --text:var(--brand);
  --bg:#f3eee8;
  --sep:#ccc;
  --max:1360px;
  --card:#e8e6e6;
  --radius:8px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}

/* ========== 2) Grundtypografie & Body ==================================== */
body{
  font-family:helvetica-w01-light,helvetica-w02-light,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}
body.no-scroll{overflow:hidden}

/* Links im CONTENT */
a{
  color:var(--brand);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:.15em;
  text-decoration-thickness:2px;
}
a:hover,a:focus{ text-decoration-thickness:3px }

/* ========== 3) Header & Navigation ======================================= */
header.site-header{
  position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--sep);
}
.header-inner{
  max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;
}
.logo img{height:63px;width:auto;display:block}

/* Desktop Navigation */
nav.desktop{display:flex;align-items:center}
nav.desktop ul{list-style:none;display:flex;gap:28px}
nav.desktop li{position:relative}
nav.desktop a{
  color:var(--brand);
  font-weight:600;
  text-decoration:none !important;
  font-family:helvetica-w01-roman,helvetica-w02-roman,Helvetica,Arial,sans-serif;
  font-size:15px;letter-spacing:.05em;padding:10px 0;display:inline-block;
}
nav.desktop a:hover,
nav.desktop li.active>a{ color:var(--brand) }

/* Subnav */
nav.desktop ul>li.has-subnav> a{position:relative;padding-right:18px}
nav.desktop ul>li.has-subnav> a::after{
  content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);opacity:.7;transition:transform .2s ease,opacity .2s ease;
}
nav.desktop ul>li.has-subnav:hover> a::after,
nav.desktop ul>li.has-subnav:focus-within> a::after{transform:translateY(-50%) rotate(225deg);opacity:1}
nav.desktop .subnav{
  position:absolute;left:0;top:100%;margin-top:8px;min-width:240px;background:#fff;border:1px solid var(--sep);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;display:none;z-index:120;
}
nav.desktop .subnav li{list-style:none}
nav.desktop .subnav a{
  display:block;padding:10px 14px 10px 16px;font-size:14px;color:var(--brand);letter-spacing:.02em;white-space:nowrap;
  text-decoration:none;font-weight:600;
}
nav.desktop .subnav li.active>a,
nav.desktop .subnav a:hover{background:#f7f7f7;color:var(--brand)}
@media (hover: hover) and (pointer: fine){
  nav.desktop li.has-subnav:hover > .subnav,
  nav.desktop li.has-subnav:focus-within > .subnav,
  nav.desktop li.has-subnav .subnav:hover{display:block}
}
nav.desktop li.has-subnav{position:relative}
nav.desktop li.has-subnav::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}

/* Burger / Sidebar */
#navtoggle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.burger{
  display:none;background:#fff;border:1px solid var(--sep);border-radius:10px;padding:10px 12px;cursor:pointer;line-height:0;
}
.burger .lines{display:block;width:22px;height:2px;background:#333;position:relative;transition:background .2s ease}
.burger .lines::before,.burger .lines::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:#333;transition:transform .25s ease,top .25s ease;
}
.burger .lines::before{top:-6px}
.burger .lines::after{top:6px}
#navtoggle:checked ~ header.site-header .burger .lines,
.burger.active .lines{background:transparent}
#navtoggle:checked ~ header.site-header .burger .lines::before,
.burger.active .lines::before{transform:rotate(45deg);top:0}
#navtoggle:checked ~ header.site-header .burger .lines::after,
.burger.active .lines::after{transform:rotate(-45deg);top:0}

label.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:80;
}
#navtoggle:checked ~ label.overlay{opacity:1;pointer-events:auto}
.overlay.open{opacity:1;pointer-events:auto}

nav.sidebar{
  position:fixed;top:0;right:0;height:100vh;width:min(78vw,360px);background:#fff;border-left:1px solid var(--sep);
  box-shadow:-12px 0 24px rgba(0,0,0,.1);transform:translateX(100%);transition:transform .3s ease;z-index:90;display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
#navtoggle:checked ~ nav.sidebar{transform:translateX(0)}
nav.sidebar.open{transform:translateX(0)}
nav.sidebar header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;padding:14px 18px;z-index:1}
nav.sidebar ul{list-style:none;padding:10px 8px}
nav.sidebar li{border-bottom:1px solid #f1f1f1;position:relative}
nav.sidebar li > a{
  position:relative;display:block;--row-h:48px;min-height:var(--row-h);line-height:var(--row-h);padding:0 34px 0 18px;color:var(--brand);font-weight:600;text-decoration:none;
}
nav.sidebar li.active > a{font-weight:800}
nav.sidebar li > a:hover{color:var(--brand);background:#f7f7f7}
nav.sidebar li.has-subnav > a::after{
  content:"";position:absolute;right:12px;top:50%;width:9px;height:9px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:translateY(-50%) rotate(45deg);transition:transform .22s ease;
}
nav.sidebar li.has-subnav.open > a::after{transform:translateY(-50%) rotate(225deg)}
nav.sidebar .subnav-toggle{position:absolute;right:0;top:0;bottom:0;width:48px;border:none;background:transparent;cursor:pointer;z-index:2}
nav.sidebar .subnav-toggle::before{display:none}
nav.sidebar .subnav--mobile{
  max-height:0;overflow:hidden;padding:0 0 0 10px;border-left:2px solid var(--sep);margin:6px 0 0 18px;transition:max-height .25s ease,padding .2s ease,margin .2s ease;background:transparent;
}
nav.sidebar li.has-subnav.open > .subnav--mobile{max-height:600px;padding:6px 0 8px 10px;margin:6px 0 8px 18px}
nav.sidebar .subnav--mobile li{list-style:none}
nav.sidebar .subnav--mobile a{display:block;padding:10px 10px 10px 0;font-size:15px;color:var(--brand);text-decoration:none}
nav.sidebar .subnav--mobile a:hover{background:#f7f7f7;color:var(--brand)}

/* ========== 4) Hero / Masthead =========================================== */
.masthead{
  background-image:url('../media/hero.jpg');background-size:cover;background-position:center;padding:110px 20px;text-align:center;color:#fff;
}
.masthead h1{
  font-family:helvetica-w01-roman,helvetica-w02-roman,Helvetica,Arial,sans-serif;font-size:44px;letter-spacing:.03em;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.masthead p{margin-top:14px;font-size:18px;letter-spacing:.03em;text-shadow:0 2px 6px rgba(0,0,0,.35)}

/* ========== 5) Container / Section ======================================= */
.section{width:100%;max-width:var(--max);margin:0 auto;padding:30px 20px;box-sizing:border-box}

/* ========== 6) Grids & Layouts =========================================== */
.grid{display:grid;gap:24px;align-items:stretch}
.layout-3col-imgtextimg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:stretch}
.layout-3col-imgtextimg > *{height:100%;position:relative}
.layout-3col-imgtextimg .text-block{
  background:rgb(255,238,225);display:flex;flex-direction:column;justify-content:space-between;height:100%;border-radius:8px;padding:28px 32px 88px;box-sizing:border-box;
}
.image-block{position:relative;overflow:hidden;border-radius:12px;display:flex;flex-direction:column;justify-content:flex-end;background-position:50% 20%}
.image-cover{width:100%;height:100%;min-height:574px;background-size:cover;background-position:50% 40%}
.layout-3col-imgtextimg .image-block{height:100%;display:flex}
.layout-3col-imgtextimg .image-block img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.layout-3col-imgtextimg .image-cover{width:100%;height:100%;min-height:0;background-size:cover;background-position:50% 40%;border-radius:8px}
.layout-3col-imgtextimg .image-block .overlay-btn,
.layout-3col-imgtextimg .text-block  .overlay-btn{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:min(86%,240px);margin:0;align-self:auto}

.layout-3col-textimgtext{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:stretch}
.layout-2col-imgtext{grid-template-columns:1fr 1fr;background-position:50% 20%}
.layout-2col-imgtext .image-cover{background-position:50% 20%}
.layout-2col-textimg{grid-template-columns:1fr 1fr;background-position:50% 20%}
.layout-2col-textimg .image-cover{background-position:50% 20%}

/* 1 Spalte – zentrierter Text (ohne Hintergrund) */
.layout-1col-textcenter{
  max-width:1100px;margin:0 auto;padding:40px 20px;text-align:center;color:var(--text);
  font-family:helvetica-w01-light,helvetica-w02-light,Helvetica,Arial,sans-serif;hyphens:auto;-webkit-hyphens:auto;background:transparent !important;border:none !important;border-radius:var(--radius);
}

/* ========== 7) Komponenten =============================================== */
.text-block{
  background:var(--card);border-radius:var(--radius);border:1px solid #d9d5cd;padding:28px 32px;display:flex;flex-direction:column;justify-content:center;
}
.layout-3col-textimgtext .text-block{padding:44px 36px;font-size:clamp(15.5px, 0.95vw, 18px);line-height:1.85}
.layout-3col-textimgtext .text-block h3{font-size:clamp(18px, 1.15vw, 22px);letter-spacing:.04em;margin-bottom:14px}
.overlay-btn{
  background:#fff;color:var(--brand);border:1px solid var(--brand);border-radius:999px;padding:12px 26px;font-weight:bold;font-size:14px;letter-spacing:.05em;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;text-align:center;width:240px;margin:0 auto;
}
.overlay-btn svg{width:16px;height:16px;fill:var(--brand)}
.text-block .overlay-btn{margin-top:24px}
.layout-3col-textimgtext .text-block .overlay-btn{align-self:end;justify-self:center;min-height:48px;padding:12px 26px}
.overlay-btn--ghost{visibility:hidden}

/* ========== 8) Typo ====================================================== */
.text-block h1,.text-block h2,.text-block h3,
.layout-1col-textcenter h1,.layout-1col-textcenter h2,.layout-1col-textcenter h3{
  color:var(--brand);letter-spacing:.03em;margin-bottom:12px;font-family:helvetica-w01-roman,helvetica-w02-roman,Helvetica,Arial,sans-serif;
}
.text-block p,.text-block ul,.text-block ol,
.layout-1col-textcenter p,.layout-1col-textcenter .richtext,
.layout-1col-textcenter ul,.layout-1col-textcenter ol{
  max-width:72ch;margin-left:auto;margin-right:auto;text-align:left;font-size:15.5px;line-height:1.9;
}
.text-block h3{text-align:center;margin-bottom:16px}
.text-block ul,.text-block ol,.layout-1col-textcenter ul,.layout-1col-textcenter ol{list-style:disc outside;padding-left:1.25rem;margin-top:1rem}
.text-block ol,.layout-1col-textcenter ol{list-style:decimal outside}
.text-block li,.layout-1col-textcenter li{margin:.35rem 0;line-height:1.8}
.text-block li::marker,.layout-1col-textcenter li::marker{color:var(--brand)}
@supports(selector(:has(*))){
  .text-block li:not(:has(a)),.layout-1col-textcenter li:not(:has(a)){
    color:var(--brand);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:2px;
  }
}
.text-block{hyphens:auto;-webkit-hyphens:auto}

/* ========== Masonry-Galerie (zentriert & robust) ========== */
.masonry-gallery{ --masonry-min:260px; --masonry-gap:16px; --cols:4; }

/* Spaltenvorschlag je Viewport – auf dem CONTAINER,
   damit Inline --cols="3" am <section> Vorrang hat */
@media (max-width: 599px){
  .masonry-gallery{ --cols:1; }
}
@media (min-width: 600px) and (max-width: 959px){
  .masonry-gallery{ --cols:2; }
}
@media (min-width: 960px) and (max-width: 1279px){
  .masonry-gallery{ --cols:3; }
}
@media (min-width: 1280px){
  .masonry-gallery{ --cols:4; }
}

/* Automatik: Bei 4–6 Bildern lieber 3 Spalten (wirkt mittiger/harmonischer) */
.masonry-gallery:has(.mg-grid .mg-item:nth-child(4)):not(:has(.mg-grid .mg-item:nth-child(7))) {
  --cols: 3;
}

/* Überschriften/Lead wie gehabt */
.masonry-gallery h3{ text-align:center; margin-bottom:8px; color:var(--brand); }
.masonry-gallery .lead{ max-width:70ch; margin:8px auto 24px; text-align:center; }

/* Grid-Container: columns + sauberes Zentrieren per max-width */
.masonry-gallery .mg-grid{
  column-width: var(--masonry-min);
  column-gap: var(--masonry-gap);

  width: 100%;
  max-width: calc(var(--cols) * var(--masonry-min) + (var(--cols) - 1) * var(--masonry-gap));
  margin-left: auto;
  margin-right: auto;
}

.masonry-gallery .mg-item{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 var(--masonry-gap) 0;
}

.masonry-gallery .mg-imgwrap{
  position: relative; display: block; overflow: hidden; border-radius: 12px;
  background: #fff; border: 1px solid #eadfd8; box-shadow: var(--shadow);
}
.masonry-gallery .mg-imgwrap img{
  display: block; width: 100%; height: auto;
  transition: transform .35s ease, filter .35s ease;
  /* Optional einheitlicher Look:
     aspect-ratio: 4/3; object-fit: cover; */
}
.masonry-gallery .mg-imgwrap:hover img{ transform: scale(1.03); filter: saturate(1.06); }

/* Overlay */
.masonry-gallery .mg-overlay{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
  color: #fff; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
.masonry-gallery .mg-imgwrap:hover .mg-overlay,
.masonry-gallery .mg-imgwrap:focus-within .mg-overlay{ opacity:1; transform:translateY(0); }

.masonry-gallery .mg-title{ font-weight:700; font-size: clamp(14px, .95vw, 16px); line-height:1.25; }
.masonry-gallery .mg-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid #fff; border-radius:999px; padding:8px 14px;
  font-weight:800; text-decoration:none; color:#fff; background:transparent;
}
.masonry-gallery .mg-cta:hover{ background:#fff; color:var(--brand); }
.masonry-gallery a.mg-imgwrap{ outline:none; }
.masonry-gallery a.mg-imgwrap:focus-visible{ box-shadow:0 0 0 3px rgba(122,35,36,.35); border-radius:12px; }

/* Mobile Tuning */
@media (max-width: 980px){
  .masonry-gallery{ --masonry-min:200px; --masonry-gap:12px; }
}
@media (max-width: 560px){
  .masonry-gallery{ --masonry-min:170px; --masonry-gap:10px; }
}

/* ========== 10) Footer ==================================================== */
footer {
  background:#fff;
  color:var(--brand);
  font-size:14px;
  letter-spacing:.02em;
  text-align:left;
}

footer .container {
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:20px;
  padding:36px 24px;
}

.footer-title {
  margin-bottom:8px;
  color:var(--brand);
  font-weight:bold;
  font-family:helvetica-w01-roman,helvetica-w02-roman,Helvetica,Arial,sans-serif;
}

footer a {
  color:var(--brand);
  text-decoration:underline;
}
footer a:hover {
  color:var(--brand);
  text-decoration-thickness:3px;
}

.footer-intro {
  font-size:16px;
  font-weight:bold;
  margin-bottom:16px;
}

/* Footer Social Icons */
.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.footer-social img {
  display: block;
  width: auto;
  height: clamp(20px, 2.5vw, 28px); /* dynamisch: 20px auf Mobile, max. 28px auf Desktop */
}

/* ========== 11) Responsive / A11y ======================================== */
@media (max-width:980px){
  nav.desktop{display:none}
  header.site-header .burger{display:inline-block}
  .masthead{padding:60px 20px}
  .masthead h1{font-size:32px}
  .grid.layout-3col-imgtextimg,
  .grid.layout-2col-imgtext,
  .grid.layout-2col-textimg{grid-template-columns:1fr}
  .layout-3col-imgtextimg .image-cover{min-height:500px}
  .layout-3col-textimgtext{grid-template-columns:1fr}
  .image-cover{min-height:280px}
  .layout-1col-textcenter{padding:28px 16px;max-width:95vw}
  .layout-1col-textcenter h1{font-size:1.85rem}
  .layout-1col-textcenter h2{font-size:1.4rem}

  /* Masonry enger auf kleineren Screens */
  .masonry-gallery{ --masonry-min:200px; --masonry-gap:12px; }
}
@media (max-width:560px){
  .layout-1col-textcenter{padding:24px 14px}
  footer .container{grid-template-columns:1fr;gap:12px}
  .masonry-gallery{ --masonry-min:170px; --masonry-gap:10px; }
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}