:root{--green:#073d38;--green-2:#0d5149;--gold:#b58a34;--cream:#f6f1e9;--paper:#fbfaf7;--ink:#143d38;--body:#263b37;--line:#ddd4c7;--white:#fff;--shadow:0 16px 45px rgba(25,43,38,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--body);background:var(--paper);line-height:1.5}.container{width:min(1390px,92%);margin:auto}.topbar{background:var(--green);color:#fff;font-size:13px}.topbar-inner{min-height:29px;display:flex;justify-content:space-between;align-items:center}.topbar-contact{display:flex;gap:24px}.site-header{background:rgba(255,255,255,.97);position:sticky;top:0;z-index:20;box-shadow:0 1px 0 rgba(0,0,0,.04)}.nav-wrap{height:88px;display:flex;align-items:center;gap:34px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:270px}.brand-mark{width:58px;height:58px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-size:29px;color:var(--green)}.brand strong{font:700 22px Georgia,serif;display:block;letter-spacing:.06em}.brand small{font:700 12px Arial,sans-serif;letter-spacing:.28em}.main-nav{display:flex;align-items:center;gap:30px;margin-left:auto}.main-nav a{text-decoration:none;color:#1d3935;font-size:14px;padding:31px 0 24px;border-bottom:2px solid transparent}.main-nav a:hover,.main-nav a.active{color:var(--gold);border-bottom-color:var(--gold)}.menu-toggle{display:none;border:0;background:none;font-size:28px;color:var(--green)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;border-radius:5px;text-decoration:none;font-weight:700;font-size:14px;border:1px solid transparent;cursor:pointer}.btn-primary{background:var(--green);color:#fff}.btn-primary:hover{background:var(--green-2)}.btn-outline{border-color:var(--green);color:var(--green);background:rgba(255,255,255,.55)}.btn-gold{background:var(--gold);color:#fff}.header-cta{background:var(--gold);white-space:nowrap}.hero{min-height:610px;background-image:url('assets/hero-background.jpg');background-position:center center;background-size:100% auto;background-repeat:no-repeat;background-color:#f6f1e9;position:relative;display:flex;align-items:center}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.68) 34%,rgba(255,255,255,.08) 70%)}.hero-content{position:relative;z-index:1}.hero-copy{max-width:620px;padding:50px 0}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:800;color:var(--green)}.eyebrow.gold{color:var(--gold)}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;color:var(--ink);font-weight:500}h1{font-size:58px;line-height:1.03;margin:10px 0 20px}.hero-copy>p:not(.eyebrow){font-size:18px;max-width:600px}.hero-actions{display:flex;gap:16px;margin-top:24px}.section{padding:22px 0}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{display:grid;grid-template-columns:42% 58%;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:235px}.service-card img{width:100%;height:100%;object-fit:cover}.service-copy{padding:23px 20px}.service-heading{display:flex;gap:14px;align-items:flex-start}.service-heading .icon{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-size:22px}.service-heading h2{font-size:23px;line-height:1.15;margin:2px 0 12px}.service-copy p{font-size:14px;margin:0 0 15px}.service-copy a{color:var(--green);font-weight:700;text-decoration:none}.about{background:#f5f0e8;padding-top:10px;padding-bottom:10px}.about-grid{display:grid;grid-template-columns:34% 43% 23%;gap:28px;align-items:center}.about-image{width:100%;height:245px;object-fit:cover;border-radius:13px}.about-copy h2{font-size:34px;margin:4px 0 12px}.about-copy p{font-size:14px}.about-copy .btn{margin-top:8px}blockquote{margin:0;background:rgba(255,255,255,.55);padding:24px 32px;border-radius:12px;min-height:215px}blockquote .quote-mark,.testimonial .quote-mark{color:var(--gold);font:700 52px Georgia,serif;line-height:.8}blockquote p{font:italic 22px/1.28 Georgia,serif;color:#283d38;margin:5px 0 12px}blockquote cite{font-style:normal;font-size:14px}.values{background:#fff;border-top:1px solid #e7e0d7;border-bottom:1px solid #e7e0d7}.values-grid{display:grid;grid-template-columns:repeat(4,1fr)}.value{display:flex;gap:16px;padding:18px 28px;border-right:1px solid #ece5dc;align-items:center}.value:last-child{border-right:0}.value>span{width:56px;height:56px;border:1px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:27px;flex:0 0 auto}.value h3{font:700 15px Arial,sans-serif;margin:0 0 4px}.value p{font-size:12px;margin:0}.testimonial{background:var(--green);color:#fff}.testimonial-inner{min-height:90px;display:grid;grid-template-columns:40px 1fr 140px;gap:20px;align-items:center}.testimonial p{font-size:15px;margin:0}.testimonial cite{font-style:normal;text-align:right}.newsletter{background:linear-gradient(90deg,#e1e7df,#cfd7cb);padding:18px 0}.newsletter-grid{display:grid;grid-template-columns:34% 50% 16%;align-items:center;gap:20px}.newsletter-intro{display:flex;gap:18px;align-items:center}.mail-icon{width:54px;height:54px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:25px}.newsletter-intro h3{font:700 15px Arial,sans-serif;margin:0 0 4px}.newsletter-intro p{font-size:12px;margin:0}.newsletter-form{display:grid;grid-template-columns:1fr 1fr 130px;gap:14px}.newsletter-form input{border:1px solid #d2ccc3;background:#fff;border-radius:6px;padding:13px 16px}.socials{display:flex;gap:28px;justify-content:flex-end}.socials a{font-size:25px;color:var(--green);text-decoration:none;font-weight:700}.footer{background:#ece8e0;color:#4c5c58;font-size:12px}.footer-inner{padding:12px 0;text-align:center}
@media(max-width:1100px){.main-nav{gap:16px}.main-nav a{font-size:13px}.header-cta{display:none}.cards-grid{grid-template-columns:1fr}.service-card{grid-template-columns:34% 66%}.about-grid{grid-template-columns:1fr 1fr}.about-grid blockquote{grid-column:1/-1}.values-grid{grid-template-columns:1fr 1fr}.newsletter-grid{grid-template-columns:1fr}.socials{justify-content:flex-start}}
@media(max-width:760px){.topbar-contact{gap:10px;font-size:11px}.nav-wrap{height:72px}.brand{min-width:0}.brand-mark{width:45px;height:45px}.brand strong{font-size:18px}.main-nav{position:absolute;top:72px;left:0;right:0;background:#fff;display:none;flex-direction:column;align-items:flex-start;padding:18px 5%;box-shadow:var(--shadow)}.main-nav.open{display:flex}.main-nav a{padding:8px 0}.menu-toggle{display:block;margin-left:auto}.hero{min-height:560px;background-position:62% center;background-size:cover}.hero-overlay{background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.76))}h1{font-size:42px}.hero-copy>p:not(.eyebrow){font-size:16px}.hero-actions{flex-direction:column;align-items:flex-start}.service-card{grid-template-columns:1fr}.service-card img{height:210px}.about-grid{grid-template-columns:1fr}.about-image{height:280px}.values-grid{grid-template-columns:1fr}.value{border-right:0;border-bottom:1px solid #ece5dc}.testimonial-inner{grid-template-columns:35px 1fr}.testimonial cite{grid-column:2;text-align:left;padding-bottom:14px}.newsletter-form{grid-template-columns:1fr}.newsletter-grid{gap:18px}.topbar-inner>div:first-child{display:none}.topbar-contact{margin-left:auto;overflow:auto}.footer-inner{text-align:center}}

/* Desktop-Abstimmung auf die freigegebene Zielansicht */
@media (min-width:1101px){
  .container{width:min(1400px,92%)}

  .topbar-inner{min-height:27px}
  .nav-wrap{height:82px}
  .brand{min-width:260px}
  .brand-mark{width:56px;height:56px;font-size:27px}
  .brand strong{font-size:21px}
  .main-nav{gap:28px}
  .main-nav a{padding:28px 0 22px}
  .btn{padding:11px 22px;font-size:13px}

  .hero{
    min-height:285px;
    height:285px;
    background-size:cover;
    background-position:center 52%;
  }
  .hero-copy{max-width:600px;padding:18px 0 20px}
  h1{font-size:43px;line-height:1.04;margin:4px 0 13px}
  .hero-copy>p:not(.eyebrow){font-size:15px;line-height:1.42;max-width:570px;margin:0}
  .hero-actions{gap:13px;margin-top:14px}

  .section{padding:13px 0}
  .cards-grid{gap:14px}
  .service-card{grid-template-columns:42% 58%;min-height:176px;border-radius:9px}
  .service-copy{padding:16px 17px}
  .service-heading{gap:11px}
  .service-heading .icon{flex-basis:40px;width:40px;height:40px;font-size:20px}
  .service-heading h2{font-size:19px;line-height:1.12;margin:1px 0 9px}
  .service-copy p{font-size:12.5px;line-height:1.45;margin:0 0 10px}
  .service-copy a{font-size:12.5px}

  .about{padding-top:8px;padding-bottom:8px}
  .about-grid{grid-template-columns:34% 43% 23%;gap:24px}
  .about-image{height:177px;border-radius:10px}
  .about-copy h2{font-size:27px;line-height:1.08;margin:2px 0 8px}
  .about-copy p{font-size:12px;line-height:1.45;margin:0}
  .about-copy .btn{margin-top:8px}
  blockquote{padding:16px 26px;min-height:177px;border-radius:10px}
  blockquote .quote-mark,.testimonial .quote-mark{font-size:45px}
  blockquote p{font-size:18px;line-height:1.18;margin:3px 0 9px}
  blockquote cite{font-size:12px}

  .value{gap:14px;padding:12px 25px}
  .value>span{width:50px;height:50px;font-size:24px}
  .value h3{font-size:13px;margin-bottom:2px}
  .value p{font-size:11px;line-height:1.35}

  .testimonial-inner{min-height:72px;grid-template-columns:36px 1fr 135px;gap:17px}
  .testimonial p{font-size:13px;line-height:1.35}
  .testimonial cite{font-size:12px}

  .newsletter{padding:13px 0}
  .newsletter-grid{grid-template-columns:34% 50% 16%;gap:18px}
  .newsletter-intro{gap:15px}
  .mail-icon{width:50px;height:50px;font-size:23px}
  .newsletter-intro h3{font-size:13px;margin-bottom:2px}
  .newsletter-intro p{font-size:11px}
  .newsletter-form{grid-template-columns:1fr 1fr 125px;gap:12px}
  .newsletter-form input{padding:11px 14px}
  .socials{gap:26px}
  .socials a{font-size:23px}
  .footer-inner{padding:9px 0}
}


/* Letzter Feinschliff: Hero und Abstände */
@media (min-width:1101px){
  .hero{
    min-height:320px;
    height:320px;
    background-size:100% auto;
    background-position:center 48%;
  }

  .hero-copy{
    padding:32px 0 28px;
  }

  .section{
    padding:18px 0;
  }

  .cards-grid{
    margin-top:8px;
  }

  .about{
    padding-top:18px;
    padding-bottom:18px;
  }
}

/* 06.08.2026 – Ergänzte Originalabschnitte der Startseite */
.welcome{background:#fff}
.welcome-grid{display:grid;grid-template-columns:48% 52%;gap:42px;align-items:center}
.welcome-image{width:100%;height:330px;object-fit:cover;border-radius:12px}
.welcome-copy h2,.content-section h2,.trust h2,.contact-cta h2{font-size:34px;line-height:1.15;margin:4px 0 14px}
.welcome-copy p,.content-section p,.trust p,.contact-cta p{font-size:15px}
.content-section{background:var(--paper)}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.content-grid>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px}
.trust{background:#f5f0e8}
.narrow-copy{max-width:900px;text-align:center}
.contact-cta{background:var(--green);color:#fff;padding:38px 0}
.contact-cta h2{color:#fff}
.contact-cta .btn{margin-top:10px}

@media(max-width:1100px){
  .welcome-grid,.content-grid{grid-template-columns:1fr}
}

@media(max-width:760px){
  .welcome-image{height:250px}
  .welcome-copy h2,.content-section h2,.trust h2,.contact-cta h2{font-size:28px}
  .content-grid>div{padding:24px}
}

/* 06.08.2026 – Kompakte Startseite: Detailtexte auf spätere Unterseiten verlagert */
.trust{padding:14px 0}
.trust .eyebrow{margin:0 0 3px}
.trust h2{font-size:27px;margin:0 0 6px}
.trust p{font-size:13px;margin:0}
.contact-cta{padding:20px 0}
.contact-cta h2{font-size:28px;margin:0 0 7px}
.contact-cta p{font-size:13px;margin:0 0 10px}
.contact-cta .btn{margin-top:0}

@media (min-width:1101px){
  .about-copy h2{font-size:25px}
  .about-copy p{line-height:1.35}
}

/* 07.08.2026 – Größere Klickfläche der Desktop-Navigation */
@media (min-width:1101px){
  .main-nav a{
    display:flex;
    align-items:center;
    height:82px;
    padding:0;
    border-bottom:2px solid transparent;
  }
}

/* 07.08.2026 – Hochwertige aufklappbare FAQ */
.faq-accordion{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  margin:0 0 12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(25,43,38,.035);
}
.faq-accordion summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px 24px;
  font:500 25px/1.25 Georgia,'Times New Roman',serif;
  color:var(--ink);
  user-select:none;
}
.faq-accordion summary::-webkit-details-marker{display:none}
.faq-accordion summary:hover{color:var(--gold)}
.faq-plus{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--gold);
  font:400 24px/1 Arial,sans-serif;
  transition:transform .22s ease,background .22s ease,color .22s ease;
}
.faq-accordion[open] .faq-plus{
  transform:rotate(45deg);
  background:var(--gold);
  color:#fff;
}
.faq-answer{
  padding:0 24px 20px;
  border-top:1px solid #eee7dd;
}
.faq-answer p{
  margin:16px 0 0;
}
@media(max-width:760px){
  .faq-accordion summary{padding:16px 18px;font-size:21px}
  .faq-answer{padding:0 18px 17px}
  .faq-plus{width:30px;height:30px;font-size:21px}
}

/* 07.08.2026 – Hochwertiger Kontaktbereich */
.contact-reach{margin-top:4px}
.contact-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:18px 0 8px;
}
.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px 24px;
  display:flex;
  align-items:center;
  gap:17px;
  min-height:105px;
  box-shadow:0 8px 22px rgba(25,43,38,.045);
}
.contact-card-icon{
  flex:0 0 46px;
  width:46px;
  height:46px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--gold);
  font-size:22px;
  line-height:1;
}
.contact-card h3{
  margin:0 0 5px;
  font:600 14px/1.3 Arial,Helvetica,sans-serif;
  color:var(--ink);
}
.contact-card p{
  margin:0;
  font-size:15px;
  line-height:1.4;
}
@media(max-width:900px){
  .contact-cards{grid-template-columns:1fr}
}
@media(max-width:760px){
  .contact-card{padding:18px;min-height:90px}
  .contact-card-icon{width:40px;height:40px;flex-basis:40px;font-size:19px}
}

/* 07.08.2026 – Gemeinsames Bild auf der Kontaktseite */
.contact-couple-image{
  display:block;
  width:min(760px,100%);
  height:auto;
  margin:20px auto 8px;
  border-radius:12px;
  box-shadow:0 8px 22px rgba(25,43,38,.06);
}

/* 07.08.2026 – Hochwertige Datenschutzseite */
.datenschutz-page .faq-hero{
  padding:22px 0 8px;
}
.datenschutz-page .faq-hero h1{
  font-size:38px;
  margin:0;
}
.datenschutz-page .faq-section{
  padding:8px 0 28px;
}
.datenschutz-page .faq-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start;
}
.datenschutz-page .faq-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px 24px;
  box-shadow:0 8px 22px rgba(25,43,38,.04);
  overflow-wrap:anywhere;
}
.datenschutz-page .faq-item h2{
  font-size:23px;
  line-height:1.22;
  margin:0 0 14px;
}
.datenschutz-page .faq-item p{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.55;
}
.datenschutz-page .faq-item p:last-child{
  margin-bottom:0;
}
@media(max-width:900px){
  .datenschutz-page .faq-list{grid-template-columns:1fr}
}
@media(max-width:760px){
  .datenschutz-page .faq-hero h1{font-size:32px}
  .datenschutz-page .faq-item{padding:18px}
  .datenschutz-page .faq-item h2{font-size:20px}
}

/* 08.08.2026 – Bildgrößen auf der Seite Anwendungen */
.content-image{
  display:block;
  width:min(760px,100%);
  max-height:430px;
  height:auto;
  object-fit:cover;
  margin:20px auto 6px;
  border-radius:12px;
}

@media(max-width:760px){
  .content-image{
    width:100%;
    max-height:320px;
  }
}

/* 08.08.2026 – Anwendungen: Bildgröße wie Über-uns-Seite */
.content-image{
  display:block;
  width:100%;
  max-width:650px;
  height:auto;
  max-height:none;
  object-fit:contain;
  margin:12px auto 0;
  border-radius:12px;
}

/* 08.08.2026 – Über uns nach freigegebener Vorlage */
.about-story-page main{background:#fbfaf7}
.story-hero{background:linear-gradient(90deg,#f5eee3 0%,#fbf7f0 50%,#f5eee3 100%);border-bottom:1px solid #e9dfd1}
.story-hero-grid{min-height:300px;display:grid;grid-template-columns:34% 48% 18%;align-items:center;gap:26px}
.story-hero-photo{align-self:stretch;overflow:hidden}
.story-hero-photo img{width:100%;height:300px;object-fit:cover;object-position:center;display:block}
.story-hero-copy{text-align:center;max-width:680px;margin:auto}
.story-hero-copy h1{font-size:46px;line-height:1;margin:0 0 8px}
.story-divider{display:flex;align-items:center;gap:12px;color:var(--gold);margin:0 auto 10px;max-width:360px}
.story-divider:before,.story-divider:after{content:"";height:1px;background:#d9bd80;flex:1}
.story-divider span{font-size:20px}
.story-hero-copy h2{font-size:18px;margin:0 0 12px;color:var(--ink)}
.story-hero-copy p{max-width:610px;margin:0 auto;font-size:14px;line-height:1.55}
.story-hero-mark{display:grid;place-items:center;color:var(--gold);font:400 70px/1 Georgia,serif;opacity:.85}
.story-journey{padding:20px 0 18px;background:#fff}
.story-heading{text-align:center;margin-bottom:14px}
.story-heading h2{font-size:30px;margin:0}
.story-heading span{color:var(--gold);font-size:20px}
.story-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.story-card{min-width:0;border-right:1px solid #e6ddcf;padding:0 14px 4px 0}
.story-card:last-child{border-right:0;padding-right:0}
.story-card-title{min-height:52px;display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.story-icon{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#fff;font-size:20px}
.story-card h3{font-size:17px;line-height:1.16;margin:3px 0 0}
.story-card img{width:100%;height:150px;object-fit:cover;object-position:center;border-radius:3px;display:block;margin-bottom:9px}
.story-card p{font-size:11.5px;line-height:1.42;margin:0 0 6px}
.story-values{padding:0 0 18px;background:#fff}
.story-values-inner{display:grid;grid-template-columns:75px 1fr auto;gap:22px;align-items:center;background:linear-gradient(90deg,#f1f3ec,#f8f7f1);border:1px solid #e1e3da;border-radius:10px;padding:14px 24px}
.story-values-icon{font-size:44px;color:var(--green);opacity:.8;text-align:center}
.story-values h2{text-align:center;font-size:20px;margin:0 0 5px}
.story-values p{font-size:12px;line-height:1.45;margin:0}
.story-values .btn{min-width:220px;white-space:nowrap}
@media(max-width:1100px){
  .story-hero-grid{grid-template-columns:38% 62%;min-height:280px}
  .story-hero-mark{display:none}
  .story-hero-photo img{height:280px}
  .story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-card:nth-child(2){border-right:0;padding-right:0}
  .story-values-inner{grid-template-columns:55px 1fr}
  .story-values .btn{grid-column:2;justify-self:start}
}
@media(max-width:760px){
  .story-hero-grid{grid-template-columns:1fr;gap:0}
  .story-hero-photo img{height:270px}
  .story-hero-copy{padding:22px 18px}
  .story-hero-copy h1{font-size:38px}
  .story-grid{grid-template-columns:1fr}
  .story-card,.story-card:nth-child(2){border-right:0;border-bottom:1px solid #e6ddcf;padding:0 0 16px;margin-bottom:16px}
  .story-card:last-child{border-bottom:0;margin-bottom:0}
  .story-card img{height:auto;max-height:290px}
  .story-values-inner{grid-template-columns:1fr;text-align:center}
  .story-values .btn{grid-column:auto;justify-self:center}
}
@media(min-width:1101px){.about-image{object-position:center 38%}}

/* 08.08.2026 – vier kompakte Vorschaubilder in EINER Reihe */
.story-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
}
.story-thumb{
  display:block;
  width:100%;
  height:145px;
  overflow:hidden;
  border-radius:4px;
  cursor:zoom-in;
}
.story-thumb img,
.story-card .story-thumb img{
  width:100% !important;
  height:145px !important;
  max-height:145px !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
}
@media(max-width:760px){
  .story-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* 08.08.2026 – Korrektur: Über uns kompakt + echte anklickbare Thumbnails */
.story-hero-textonly{
  background:linear-gradient(90deg,#f5eee3 0%,#fbf7f0 50%,#f5eee3 100%);
  border-bottom:1px solid #e9dfd1;
}
.story-hero-text{
  min-height:205px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:26px 0;
}
.story-hero-text h1{font-size:46px;line-height:1;margin:0 0 8px}
.story-hero-text h2{font-size:18px;margin:0 0 10px}
.story-hero-text p{font-size:14px;line-height:1.5;max-width:720px;margin:0 auto}

.story-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:start;
}
.story-card{min-width:0}
.story-thumb{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #ddd4c7;
  background:#f6f1e9;
  padding:5px;
  width:100%;
  height:165px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:7px;
  cursor:zoom-in;
  margin:0 0 9px;
}
.story-thumb img,
.story-card .story-thumb img{
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  margin:0 !important;
  border-radius:4px;
}
.story-thumb:hover{box-shadow:0 5px 18px rgba(25,43,38,.13)}

.story-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(10,20,18,.84);
  display:none;
  align-items:center;
  justify-content:center;
  padding:42px;
}
.story-lightbox.open{display:flex}
.story-lightbox-image{
  display:block;
  max-width:min(900px,88vw);
  max-height:82vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  background:#fff;
}
.story-lightbox-close{
  position:fixed;
  top:18px;
  right:26px;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#073d38;
  font-size:32px;
  line-height:1;
  cursor:pointer;
}

@media(max-width:1100px){
  .story-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .story-thumb{height:145px}
}
@media(max-width:760px){
  .story-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .story-thumb{height:150px}
  .story-lightbox{padding:20px}
  .story-lightbox-image{max-width:94vw;max-height:82vh}
}