:root{
  /* Systemfonts */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
                "Book Antiqua", "Times New Roman", Times, serif;

  /* dein Design */
  --bg:#f6f3ee; --paper:#fbfaf7;
  --ink:#1f1a17; --muted:#5f574f; --line: rgba(31,26,23,.12);
  --accent:#b08968; --accent2:#859b8c;
  --shadow: 0 18px 50px rgba(31,26,23,.10);
  --radius:18px; --max:1300px;
  --header-h: 76px;

  /* „Display“ = warmes Serif, aber als System */
  --font-display: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(900px 520px at 20% 0%, rgba(176,137,104,.10), transparent 60%),
              radial-gradient(900px 520px at 80% 10%, rgba(133,155,140,.10), transparent 60%),
              var(--bg);
  color:var(--ink);
  font-family: var(--font-sans);
  line-height:1.65;
}
h1,h2,h3{ font-family: var(--font-serif); }

a{color:inherit} img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 40px)); margin-inline:auto}
.kicker{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.kicker::before{content:"—"; color:var(--accent)}
.small{font-size:.95rem;color:var(--muted)}
.hr{height:1px;background:var(--line);margin:22px 0}

header{
  position:sticky; top:0; z-index:50;
  background: rgba(246,243,238,0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(31,26,23,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none}
.brand .mark{
  width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
  background: var(--paper); border:1px solid rgba(31,26,23,.10);
  box-shadow:0 10px 30px rgba(31,26,23,.08);
  font-family: var(--font-serif); font-size:1.05rem;
}
.brand b{font-size:1.02rem}
.brand span{display:block;font-size:.82rem;color:var(--muted);margin-top:-2px}

.menu{display:flex;gap:18px;align-items:center}
.menu a{text-decoration:none;padding:10px 10px;border-radius:12px;font-size:.95rem;color: rgba(31,26,23,.88)}
.menu a:hover{background: rgba(176,137,104,.10)}

.btn{
  appearance:none;border:1px solid rgba(31,26,23,.14);
  background: rgba(251,250,247,.80);
  color: var(--ink);
  padding:10px 14px;border-radius:999px;
  text-decoration:none;font-weight:600;
  display:inline-flex;gap:10px;align-items:center;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(31,26,23,.22)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:transparent}
.btn.primary:hover{filter:brightness(1.05)}
.btn.link{border:0;background:transparent;padding:10px 8px;border-radius:12px;color:rgba(31,26,23,.85)}
.btn.link:hover{background: rgba(176,137,104,.10)}
.hamburger{display:none}
.mobile{display:none}
@media (max-width:920px){
  :root{ --header-h: 72px; }
  .menu{display:none}.hamburger{display:inline-flex}
  .mobile{display:none;padding:10px 0 16px}
  .mobile a{display:block;padding:12px 10px;text-decoration:none;border-radius:12px;color:rgba(31,26,23,.90)}
  .mobile a:hover{background: rgba(176,137,104,.10)}
  .mobile.open{display:block}
}

.hero{padding:30px 0 10px}
.heroCard{
  position:relative;
  border-radius:var(--radius);overflow:hidden;background:var(--paper);
  border:1px solid rgba(31,26,23,.10);box-shadow:var(--shadow)
}
.heroMedia{position:relative;height:min(60vh, 520px)}
.heroMedia img{width:100%;height:100%;object-fit:cover}
@media (max-width: 900px){
  .hero--full .heroMedia img{
    object-position: 80% 50%; /* mehr rechts; ggf. 65%–90% ausprobieren */
  }
}

.heroMedia::after{
  content:"";position:absolute;inset:0;
  background: linear-gradient(0deg, rgba(246,243,238,.92) 0%, rgba(246,243,238,.18) 55%, rgba(246,243,238,0) 100%);
}
.heroContent{position:absolute;inset:0;display:flex;align-items:flex-end;padding:34px}
.heroInner{max-width:760px}

.hero h1{font-size:clamp(2.2rem,3.8vw,3.35rem);line-height:1.08}
.hero p{margin:14px 0 0;color:rgba(31,26,23,.78);font-size:1.06rem;max-width:58ch}
.heroActions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.badges{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  background: rgba(251,250,247,.86);
  border:1px solid rgba(31,26,23,.12);
  color:rgba(31,26,23,.84);font-size:.92rem
}


/* --- Fullscreen Hero (Startseite) --- */
.hero--full{padding:0;--hero-gutter:max(20px, calc((100vw - var(--max))/2))}
.hero--full > .container{width:100%;margin:0}
.hero--full .heroCard{border-radius:0;border:0;box-shadow:none;background:transparent}
.hero--full .heroMedia{
  /* volle Höhe, aber die sticky Navigation berücksichtigen (sonst wirkt unten "abgeschnitten") */
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 560px;
}
.hero--full .heroMedia::after{
  /* 1) dunkler Verlauf für Lesbarkeit  2) sanfter Fade in den Seiten-Hintergrund */
  background:
    linear-gradient(0deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, transparent 60%, var(--bg) 100%);
}
.hero--full .heroContent{padding-top:clamp(18px,4vw,56px);padding-bottom:clamp(52px,10vh,140px);padding-left:var(--hero-gutter);padding-right:var(--hero-gutter);align-items:flex-end}
.hero--full .heroInner{max-width:900px;padding:0;border:0;background:transparent;backdrop-filter:none;position:relative;opacity:var(--hero-text-alpha,1);transform:translateY(var(--hero-text-shift,0px));transition:none}
.hero--full .heroInner .kicker{letter-spacing:.18em}
.hero--full .heroInner p{max-width:56ch}

.hero--full .kicker{color:rgba(255,255,255,.85)}
.hero--full .kicker::before{color:rgba(255,255,255,.65)}
.hero--full h1{color:snow;text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45)}
.hero--full p{color:rgba(255,255,255,.88);text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero--full .badge{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.92);
}
.hero--full .btn{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}
.hero--full .btn:hover{border-color: rgba(255,255,255,.35)}
.hero--full .btn.primary{background: rgba(255,255,255,.92); color: rgba(0,0,0,.86)}
.hero--full .btn.primary:hover{filter:brightness(1.02)}
@media (max-width:900px){
  .hero--full .heroContent{padding-top:clamp(18px,4vw,56px);padding-bottom:clamp(52px,10vh,140px);padding-left:var(--hero-gutter);padding-right:var(--hero-gutter);align-items:flex-end}
  .hero--full .badges{display:none}
  .hero--full .heroInner{max-width:900px;padding:0;border:0;background:transparent;backdrop-filter:none;position:relative;opacity:var(--hero-text-alpha,1);transform:translateY(var(--hero-text-shift,0px));transition:none}
  .hero--full h1{font-size:clamp(2rem,8vw,2.65rem)}
  .hero--full p{font-size:1.02rem;max-width:46ch}
}

section{padding:68px 0}
.sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.sectionHead h2{font-size:1.8rem}
.sectionHead p{margin:0;color:var(--muted);max-width:54ch}
@media (max-width:900px){
  section{padding:54px 0}
  .sectionHead{flex-direction:column;align-items:flex-start}
  .heroContent{padding:22px}
}

.editorial{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}
@media (max-width:900px){.editorial{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid rgba(31,26,23,.10);border-radius:var(--radius);box-shadow:var(--shadow)}
/* Units on index: keep top corners rounded, bottom corners straight */
.card.unit{border-radius:var(--radius);}

.card.pad{padding:22px}
.card.soft{background: rgba(251,250,247,.92)}
.featureList{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none;color:rgba(31,26,23,.80)}
.featureList li{display:flex;gap:10px;align-items:flex-start}
.dot{width:10px;height:10px;border-radius:999px;background: rgba(176,137,104,.35);margin-top:7px;flex:0 0 10px}
.photo{overflow:hidden;border-radius:var(--radius)}
.photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .35s ease}
.photo:hover img{transform:scale(1.06)}

.units{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.units{grid-template-columns:1fr}}
.unit{overflow:hidden}


/* --- Apartment carousel --- */
.carousel{position:relative;overflow:hidden}
.carousel .slides{position:relative;width:100%;height:100%}
.carousel .slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.carousel .slides img.active{opacity:1}
.carousel .carBtn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:999px;
  border:1px solid rgba(31,26,23,.14);
  background: rgba(251,250,247,.85);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter: blur(6px);
}
.carousel .carBtn:hover{background: rgba(251,250,247,.95)}
.carousel .carBtn.prev{left:12px}
.carousel .carBtn.next{right:12px}
.carousel .dots{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center
}
.carousel .dotBtn{
  width:9px;height:9px;border-radius:999px;border:1px solid rgba(31,26,23,.20);
  background: rgba(251,250,247,.70);cursor:pointer
}
.carousel .dotBtn.active{background: rgba(176,137,104,.85);border-color: rgba(176,137,104,.95)}
@media (max-width:600px){
  .carousel .carBtn{width:36px;height:36px}
}

.unit .media{height:340px}
.unit .media img{width:100%;height:100%;object-fit:cover}

.unit .media{position:relative;overflow:hidden;border-radius: var(--radius) var(--radius) 0 0;}
.unit .media{background: #000;}
.unit .media .unitMediaLink{
  display:block;
  height:100%;
  position:relative;
  cursor:pointer;
  line-height:0;
  overflow:hidden;
  border-radius: inherit;
}
.unit .media .unitMediaLink img{
  display:block;
  position:absolute;
  inset:-2px; /* verhindert Haarlinien/“Balken” beim Zoom */
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  object-fit:cover;
  transition: transform .65s ease;
  transform: translateZ(0) scale(1.01);
  transform-origin:center;
  will-change: transform;
  backface-visibility:hidden;
}
.unit .media .unitMediaLink::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0) 58%);
  opacity:0;
  transition: opacity .35s ease;
}
.unit .media .unitMediaLink:hover img{transform:scale(1.06)}
.unit .media .unitMediaLink:hover::after{opacity:1}
.unit .media .unitMediaLink:focus-visible{
  outline:2px solid rgba(176,137,104,.95);
  outline-offset:3px;
  border-radius:14px;
}

.unit .body{padding:22px}
.unit h3{font-size:1.4rem}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.pill{
  padding:7px 11px;border-radius:999px;
  background: rgba(176,137,104,.10);
  border:1px solid rgba(176,137,104,.20);
  color:rgba(31,26,23,.84);font-size:.9rem
}

.gallery{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px}
.gallery a{border-radius:14px;overflow:hidden;border:1px solid rgba(31,26,23,.10);background:var(--paper)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.gallery a:hover img{transform:scale(1.06)}
.gallery a.big{grid-row:span 2;height:540px}
.gallery a.small{height:264px}


@media (max-width:900px){
  .gallery{grid-template-columns:1fr 1fr}
  .gallery a.big{grid-column:span 2;height:320px}
}

.lightbox{position:fixed;inset:0;z-index:1000;display:none;place-items:center;background:rgba(0,0,0,.78);padding:18px;backdrop-filter:blur(2px)}
.lightbox.open{display:grid}

/* Transparent container: no white frame/borders */
.lightbox .panel{
  width:min(96vw, 1300px);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  overflow:visible
}

/* Title bar (filename) */
.lightboxTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border:none;
  background:rgba(0,0,0,.32);
  color:#fff;
  border-radius:999px;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
  gap:12px
}
.lightboxTop b{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(70vw, 980px)}
.lightboxTop button{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff;
  border-radius:999px;
  padding:10px 12px;
  display:grid;
  place-items:center
}
.lightboxTop button:hover{background:rgba(255,255,255,.18)}

/* Lightbox image stage: consistent sizing across images, no white padding */
.lightboxStage{
  position:relative;
  width:100%;
  height:clamp(320px, 78vh, 760px);
  border-radius:18px;
  overflow:hidden;
  background:rgba(0,0,0,.18)
}
.lightboxStage img{width:100%;height:100%;object-fit:contain;display:block}

/* Lightbox arrows: centered on the image */
.lbArrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.82);
  color:#111;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.22)
}
.lbArrow:hover{background:rgba(255,255,255,.92)}
.lbArrow:active{transform:translateY(-50%) scale(.98)}
.lbArrow.prev{left:14px}
.lbArrow.next{right:14px}
.lbArrow.prev svg{transform:rotate(180deg)}

@media (max-width: 600px){
  .lbArrow{width:38px;height:38px}
  .lbArrow.prev{left:10px}
  .lbArrow.next{right:10px}
}

/* keep for backwards-compat (hidden) */
.lightboxNav{display:none}

.tableWrap{overflow:auto;border-radius:16px;border:1px solid rgba(31,26,23,.10);background:var(--paper);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:14px 14px;text-align:left}
th{
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(31,26,23,.70);
  background:rgba(176,137,104,.08);border-bottom:1px solid rgba(31,26,23,.10)
}
tr+tr td{border-top:1px solid rgba(31,26,23,.08)}
td{color:rgba(31,26,23,.86)} td strong{color:var(--ink)}

form{display:grid;gap:12px}
label{display:grid;gap:6px;color:rgba(31,26,23,.86);font-weight:600}
input,textarea,select{
  width:100%;padding:12px 12px;border-radius:12px;border:1px solid rgba(31,26,23,.14);
  background:rgba(251,250,247,.95);color:var(--ink);outline:none
}
input:focus,textarea:focus,select:focus{border-color:rgba(176,137,104,.55);box-shadow:0 0 0 4px rgba(176,137,104,.18)}
textarea{min-height:130px;resize:vertical}
.formRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.formRow{grid-template-columns:1fr}}
.honeypot{display:none !important}

footer{padding:54px 0 34px;border-top:1px solid rgba(31,26,23,.10);background:rgba(251,250,247,.70)}
.footerGrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}
.footerGrid a{color:rgba(31,26,23,.84);text-decoration:none}
.footerGrid a:hover{text-decoration:underline}
@media (max-width:900px){.footerGrid{grid-template-columns:1fr}}

/* Apartments: Bilder im Carousel größer */
.unit .media.carousel{
  height: 650px;              /* <- größer machen */
}

/* Mobile etwas kleiner */
@media (max-width:900px){
  .unit .media.carousel{ height: 360px; }
}

/* Nur das aktive Bild soll klickbar sein (sonst klickt man „unsichtbare“ Bilder) */
.carousel .slides img{ pointer-events:none; }
.carousel .slides img.active{ pointer-events:auto; cursor: zoom-in; }

/* Apartments: Highlights + Gut zu wissen nebeneinander */
.infoGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

/* Falls du es auch auf kleineren Screens nebeneinander willst:
   -> diese Media Query löschen oder den Breakpoint kleiner machen */
@media (max-width:900px){
  .infoGrid{ grid-template-columns: 1fr; }
}

/* Apartments: Text oben, Infoboxen darunter */
.apartmentEditorial{
  display: grid;
  grid-template-columns: 1fr;  /* alles untereinander */
  gap: 14px;
}

/* Info-Boxen weiterhin nebeneinander */
.apartmentEditorial .infoGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width:900px){
  .apartmentEditorial .infoGrid{ grid-template-columns: 1fr; }
}

/* --- Video / YouTube 2-Klick (sauber, ohne doppelte Höhe) --- */
.videoWrap{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(0,0,0,.03);
}

/* 16:9 Ratio */
.videoWrap::before{
  content:"";
  display:block;
  padding-top:56.25%;
}

/* Sowohl Platzhalter als auch iframe füllen die Fläche */
.videoWrap > iframe,
.videoWrap > .yt-consent{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Platzhalter */
.yt-consent{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  padding: 18px;
}

/* Innerer Inhalt als „Box“ */
.yt-consent-inner{
  width: min(720px, 100%);
  background: rgba(251,250,247,.92);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Das iframe, das per JS in .yt-consent eingefügt wird */
.yt-consent iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

@media (max-width:600px){
  .yt-consent{ padding: 12px; }
  .yt-consent-inner{ padding: 14px; }
}



/* Hero Typografie (Premium) */
.hero--full .heroInner .kicker{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.78rem;
  opacity:.92;
}
.hero--full .heroInner h1{
  font-family: var(--font-display);
  font-weight:600;
  font-style: normal;
  font-size: clamp(40px, 6vw, 78px);
  line-height: 1.05;
  margin: 8px 0 12px 0;
  letter-spacing: -0.01em;
}
.hero--full .heroInner p{
  font-size: clamp(15px, 2.2vw, 20px);
  line-height: 1.55;
  max-width: 60ch;
}
.hero--full .heroInner{
  text-shadow: 0 12px 36px rgba(0,0,0,.38);
}
.hero--full .heroInner::before{
  content:"";
  position:absolute;
  left:-32px;
  top:-26px;
  width: min(560px, 92vw);
  height: min(360px, 46vh);
  background: radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,0));
  filter: blur(2px);
  z-index:-1;
  pointer-events:none;
}

/* Parallax / Scroll Effekt (Desktop/Tablet) */
.hero--full .heroMedia{overflow:hidden}
.hero--full .heroMedia img{
  transform: translate3d(0, var(--hero-ty, 0px), 0) scale(var(--hero-scale, 1));
  will-change: transform;
}

/* Mobile: weniger Text, Badges ausblenden */
@media (max-width: 900px){
  .hero--full .heroInner::before{display:none}
  .hero--full .badges{display:none}
  .hero--full .heroContent{padding-bottom:clamp(26px, 8vh, 70px)}
  .hero--full .heroInner h1{font-size: clamp(32px, 8vw, 46px)}
}

/* Anchor offsets for sticky header (prevents headings from hiding under the nav) */
#schnell-persoenlich,
#anfrage,
#content{
  scroll-margin-top: 110px;
}

/* Preise-Tabelle: auf Mobile nicht breiter als der Screen */
@media (max-width: 600px){
  .tableWrap{ overflow: visible; }
  .tableWrap table{ min-width: 0; }         /* <- wichtig, sonst bleibt sie zu breit */
  th,td{ padding:12px 10px; }
  th{ font-size:.72rem; letter-spacing:.10em; }
  td{ font-size:.98rem; }

  /* erste Spalte etwas breiter, damit "Wohnung" besser lesbar bleibt */
  td:first-child{ width: 46%; }
}


/* --- Notes (text blocks) --- */
.note{color:rgba(31,26,23,.74);font-size:1rem;line-height:1.6}

/* --- Gallery page --- */
.filterBar{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 18px}
.filterBtn{
  border:1px solid rgba(31,26,23,.14);
  background: rgba(251,250,247,.85);
  color: rgba(31,26,23,.88);
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  font-size:.95rem;
}
.filterBtn:hover{transform:translateY(-1px)}
.filterBtn.active{background:var(--ink);color:var(--paper);border-color:transparent}

.photoGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1000px){.photoGrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.photoGrid{grid-template-columns:repeat(2,1fr)}}

.photoItem{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(31,26,23,.10);background:var(--paper)}
.photoItem::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0) 55%);
  opacity:0;
  transition:opacity .25s ease;
}
.photoItem:hover::after{opacity:1}
.photoItem img{width:100%;height:240px;object-fit:cover;transition:transform .35s ease}
.photoItem:hover img{transform:scale(1.06)}
.photoItem b{
  position:absolute;
  left:12px;
  bottom:10px;
  z-index:2;
  color:#fff;
  font-size:.95rem;
  text-shadow:0 12px 24px rgba(0,0,0,.45);
  opacity:0;
  transition:opacity .25s ease;
}
.photoItem:hover b{opacity:1}

.photoItem.is-hidden{display:none}
/* FAQ / Akkordeon */
.faqIntro{margin-top:8px;color:rgba(31,26,23,.80);max-width:78ch}
.faqList{display:grid;gap:12px;margin-top:18px}
.faqItem{border:1px solid rgba(31,26,23,.10);border-radius:16px;background:var(--paper);box-shadow:var(--shadow);overflow:hidden}
.faqItem summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:650;display:flex;align-items:center;gap:12px}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem summary .q{flex:1}
.faqItem summary .ic{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;border:1px solid rgba(31,26,23,.12);background:rgba(176,137,104,.08);font-size:18px;line-height:1}
.faqItem[open] summary .ic{background:rgba(133,155,140,.10)}
.faqBody{padding:0 18px 16px 18px;color:rgba(31,26,23,.84);line-height:1.7}
.faqBody p{margin:10px 0 0}
.faqBody a{text-decoration:underline;text-underline-offset:3px}
.faqBody .small{color:rgba(31,26,23,.70)}
.faqToc{margin-top:14px}
.faqToc .featureList li div{line-height:1.35}


/* About on FAQ page */
.aboutGrid{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:18px;align-items:start}
.aboutPhoto{margin:0}
.aboutPhoto img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid rgba(31,26,23,.12);box-shadow:var(--shadow);background:rgba(31,26,23,.02)}
.aboutPhoto .small{margin-top:10px;color:rgba(31,26,23,.65)}
@media (max-width: 720px){.aboutGrid{grid-template-columns:1fr}.aboutPhoto img{max-width:420px}}