@charset "UTF-8";

:root{
  --green:#17543d;
  --green-dark:#123d2d;
  --ink:#173149;
  --soft:#f6f8f2;
  --card:#e3ecdf;
  --line:#dde7dd;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  margin:0;
  font-family:"Palatino Linotype","Book Antiqua","Noto Serif",Georgia,"Times New Roman",serif;
  color:var(--ink);
  background:#eef3ea;
  font-size:19px;
}
html[lang="zh-CN"] body{
  font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans","Arial Unicode MS",Arial,sans-serif;
}
img{max-width:100%;display:block}
a{color:inherit}
.site-header{background:#f8f9f5}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:22px 3.5vw 18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:16px;
}
.brand img{
  width:124px;
  height:124px;
  object-fit:contain;
}
.brand-title{
  font-size:40px;
  font-weight:700;
  line-height:1.15;
  color:#1b4650;
  letter-spacing:.2px;
}
html[lang="zh-CN"] .brand-title{
  font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans","Arial Unicode MS",Arial,sans-serif;
  font-weight:700;
}
.lang-switch{
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  font-weight:700;
  white-space:nowrap;
}
.lang-switch a{text-decoration:none}
.lang-switch .sep{opacity:.45;margin:0 7px}
.navbar{
  background:var(--green);
}
.navbar .nav-inner{
  display:flex;
  justify-content:space-between;
  gap:22px;
  padding:0 4vw;
}
.navbar a{
  color:#fff;
  text-decoration:none;
  padding:17px 2px;
  font-size:24px;
  font-weight:700;
  font-family:"Palatino Linotype","Book Antiqua","Noto Serif",Georgia,"Times New Roman",serif;
}
html[lang="zh-CN"] .navbar a{
  font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans","Arial Unicode MS",Arial,sans-serif;
}
main{margin:0;padding:0}
.hero{
  width:100%;
  display:block;
  margin:0;
}
.hero-de{
  height:auto;
  object-fit:contain;
  object-position:center center;
}
.hero-zh{
  height:auto;
  object-fit:contain;
  object-position:center center;
}
.section{
  padding:34px 3.5vw 38px;
  background:#eef3ea;
}
.section h2,
.content h2,
.content h3,
.card h3,
.footer-grid h4,
.btn{
  font-family:"Palatino Linotype","Book Antiqua","Noto Serif",Georgia,"Times New Roman",serif;
}
html[lang="zh-CN"] .section h2,
html[lang="zh-CN"] .content h2,
html[lang="zh-CN"] .content h3,
html[lang="zh-CN"] .card h3,
html[lang="zh-CN"] .footer-grid h4,
html[lang="zh-CN"] .btn{
  font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans","Arial Unicode MS",Arial,sans-serif;
}
.section h2{
  font-size:34px;
  margin:0 0 8px;
}
.underline{width:40px;height:2px;background:#557c69;margin-bottom:16px}
.text{font-size:22px;line-height:1.7}
.note{
  color:#2c6b56;
  font-family:"Segoe Print","Comic Sans MS",cursive;
  font-size:26px;
  line-height:1.35;
  text-align:center;
  padding-top:18px;
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.card{
  background:var(--card);
  border:1px solid #c7d7c2;
  border-radius:14px;
  padding:30px 32px;
  min-height:245px;
  box-shadow:0 8px 24px rgba(18,61,45,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card h3{
  margin:0 0 16px;
  font-size:30px;
  color:#1b4650;
}
.card p{
  margin:10px 0;
  font-size:22px;
  line-height:1.65;
}
.btn{
  display:inline-block;
  margin-top:16px;
  padding:11px 20px;
  border:1px solid #557c69;
  border-radius:10px;
  text-decoration:none;
  background:#eef3ea;
  font-size:19px;
  color:#1b4650;
}
.footer{
  background:linear-gradient(90deg,#587865,#6e8b79);
  color:#fff;
  margin-top:18px;
}
.footer-inner{
  padding:22px 3.5vw 18px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.25fr 0.9fr 1fr 1fr;
  gap:26px;
  align-items:start;
}
.footer-grid h4{
  margin:0 0 11px;
  font-size:21px;
  color:#fff;
  font-weight:700;
}
.footer-grid p, .footer-grid a{
  margin:0;
  color:#fff;
  font-size:17.5px;
  line-height:1.66;
  text-decoration:none;
}
.footer-bottom{display:none;}
.legal-links{display:flex;gap:20px}
.content{padding:30px 3.5vw 46px;background:#f1f4ee}
.content h2{
  margin:0 0 16px;
  font-size:36px;
  color:#1b4650;
}
.content h3{
  margin:28px 0 12px;
  font-size:25px;
  color:var(--green-dark);
}
.content p,.content li{
  font-size:19px;
  line-height:1.75;
  color:#303030;
}
.notice{
  background:#f5f7f2;
  border-left:4px solid #5a7b69;
  padding:15px 17px;
  font-size:17px;
  line-height:1.65;
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
}


.footer-brand{display:flex;align-items:flex-start;gap:14px;}
.footer-brand img{width:62px;height:62px;object-fit:contain;flex:0 0 auto;}
.footer-brand-text .title{font-size:19px;line-height:1.35;font-weight:700;color:#fff;}
.footer-brand-text .subtitle{font-size:17.5px;line-height:1.35;color:#fff;margin-top:2px;}
.footer-legal{border-left:1px solid rgba(255,255,255,.35);padding-left:24px;}
.footer-legal .legal-links{display:flex;gap:16px;align-items:center;margin-bottom:8px;}
.footer-legal .copyright{font-size:16.5px;line-height:1.6;color:#fff;}
@media (max-width: 900px){
  .footer-legal{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.25);padding-top:14px;}
}
@media (max-width: 1100px){
  .navbar a{font-size:20px}
}
@media (max-width: 900px){
  .cards{grid-template-columns:1fr}
  .welcome-grid,.two-col,.footer-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .header-inner{padding:10px 14px}
  .brand-title{font-size:24px}
  .lang-switch{font-size:15px}
  .navbar .nav-inner{
    overflow:auto;
    justify-content:flex-start;
    padding:0 14px;
  }
  .navbar a{white-space:nowrap;font-size:18px}
  .section,.content{padding:20px 14px}
  .note{font-size:22px;padding-top:0}
  .footer-inner{padding:18px 14px 14px}
  .footer-grid p, .footer-grid a{font-size:16px;}
  .footer-grid h4{font-size:18px;}
  .card h3{font-size:24px}
  .card p,.content p,.content li,.text{font-size:18px}
}


.card .item-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:10px 0;
  font-size:22px;
  line-height:1.65;
}
.card .item-line .ic{
  flex:0 0 1.25em;
  width:1.25em;
  height:1.25em;
  margin-top:.18em;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.9;
}
.card .item-line .tx{flex:1 1 auto;}
.card .item-line .ic.date{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 9h18'/%3E%3C/svg%3E");}
.card .item-line .ic.time{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6l4 2'/%3E%3C/svg%3E");}
.card .item-line .ic.location{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.33-6-10a6 6 0 1 1 12 0c0 4.67-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.5'/%3E%3C/svg%3E");}
.card .item-line .ic.mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");}
.card .item-line .ic.phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.63 2.63a2 2 0 0 1-.45 2.11L8 9.76a16 16 0 0 0 6.24 6.24l1.3-1.29a2 2 0 0 1 2.11-.45c.85.3 1.73.51 2.63.63A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");}
.card .item-line .ic.heart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.35-9-8.79C1.52 9.13 3.2 5.5 7 5.5c2.12 0 3.4 1.1 5 3 1.6-1.9 2.88-3 5-3 3.8 0 5.48 3.63 4 6.71C19 16.65 12 21 12 21z'/%3E%3C/svg%3E");}
.card .item-line .ic.bank{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18M5 10v8M10 10v8M14 10v8M19 10v8M2 18h20M12 3 2 8h20L12 3z'/%3E%3C/svg%3E");}
@media (max-width: 640px){
  .card .item-line{font-size:18px;}
}



/* V30 visual refinements */
:root{
  --green-deep:#164c3b;
  --green-soft:#e5eee1;
  --green-border:#c7d8c2;
}

body{
  line-height:1.7;
}

.card{
  background:linear-gradient(145deg,#eef5ea,#e0ebdc);
  border:1px solid var(--green-border);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(22,76,59,.10);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(22,76,59,.14);
}
.card h3{
  letter-spacing:.02em;
}

.footer{
  background:#164c3b;
}
.footer-grid h4{
  font-size:20px;
  letter-spacing:.03em;
  margin-bottom:14px;
}
.footer-grid p,.footer-grid a{
  font-size:17px;
  line-height:1.75;
}
.footer-inner{
  padding-top:32px;
  padding-bottom:32px;
}

.navbar a{
  letter-spacing:.04em;
}

.section h2,.content h2{
  letter-spacing:.02em;
}

.btn{
  border-radius:22px;
  transition:.2s ease;
}
.btn:hover{
  transform:translateY(-1px);
}

/* Final visual refinements */
.logo img {
 background:transparent;
 object-fit:contain;
}

.card {
 border:1px solid #c8d8c3;
 box-shadow:0 8px 22px rgba(20,60,45,.10);
}

@media(max-width:640px){
 .card{padding:22px 20px;}
 .footer-grid h4{font-size:18px;}
 .footer-grid p,.footer-grid a{font-size:15px;}
 .item-line{font-size:16px;}
}


/* =========================
   V35 final design polish
   ========================= */

/* Header: slightly tighter and cleaner, logo size unchanged */
.header-inner{
  padding-top:16px;
  padding-bottom:14px;
}
.site-header{
  border-bottom:1px solid rgba(23,84,61,.08);
}

/* Language switch gets a subtle pill treatment */
.lang-switch{
  padding:7px 10px;
  border:1px solid rgba(23,84,61,.16);
  border-radius:999px;
  background:rgba(255,255,255,.55);
}
.lang-switch a{
  transition:color .18s ease;
}
.lang-switch a:hover{
  color:var(--green);
}

/* Navigation: quieter, more polished hover */
.navbar a{
  position:relative;
}
.navbar a::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  bottom:9px;
  height:2px;
  background:rgba(255,255,255,.9);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease;
}
.navbar a:hover::after,
.navbar a:focus-visible::after{
  transform:scaleX(1);
}

/* Soft transition from hero into information area */
.hero{
  box-shadow:0 10px 24px rgba(18,61,45,.06);
}
.section{
  position:relative;
}
.section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:20px;
  background:linear-gradient(to bottom,rgba(255,255,255,.26),rgba(255,255,255,0));
  pointer-events:none;
}

/* Cards: subtle top accent and refined inner hierarchy */
.card{
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,#557c69,#8ba690);
  opacity:.9;
}
.card h3{
  margin-top:2px;
}
.card .item-line .ic{
  opacity:.82;
}

/* Button: clearer and more elegant interaction */
.btn{
  background:#f7faf5;
  color:#184c3c;
  border-color:#6f8f7d;
  font-weight:700;
  box-shadow:0 2px 8px rgba(18,61,45,.06);
}
.btn:hover,
.btn:focus-visible{
  background:#17543d;
  color:#fff;
  border-color:#17543d;
  box-shadow:0 5px 14px rgba(18,61,45,.16);
}

/* Footer: one clean top highlight and improved link behavior */
.footer{
  border-top:3px solid rgba(255,255,255,.16);
}
.footer-grid a{
  transition:opacity .18s ease;
}
.footer-grid a:hover{
  opacity:.78;
}
.footer-brand img{
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.08));
}

/* Mobile navigation */
.nav-toggle{
  display:none;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  background:transparent;
  color:#fff;
  font:700 17px/1 Arial,Helvetica,sans-serif;
  padding:13px 14px;
  cursor:pointer;
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  width:20px;
  height:2px;
  background:#fff;
  display:block;
  border-radius:2px;
}
.nav-toggle-icon{
  position:relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
}
.nav-toggle-icon::before{top:-6px}
.nav-toggle-icon::after{top:6px}

@media (max-width: 640px){
  .header-inner{
    padding:10px 14px;
    gap:10px;
  }
  .brand{
    gap:10px;
    min-width:0;
  }
  .brand img{
    width:82px;
    height:82px;
  }
  .brand-title{
    font-size:22px;
  }
  .lang-switch{
    font-size:14px;
    padding:6px 8px;
  }

  .nav-toggle{
    display:flex;
  }
  .navbar .nav-inner{
    display:none;
    flex-direction:column;
    gap:0;
    padding:0;
    overflow:visible;
    border-top:1px solid rgba(255,255,255,.18);
  }
  .navbar.open .nav-inner{
    display:flex;
  }
  .navbar a{
    width:100%;
    padding:13px 18px;
    font-size:18px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .navbar a::after{
    display:none;
  }
  .section::before{
    height:12px;
  }
}


/* =========================
   V36 navigation redesign
   Inspired by selected Option 1
   ========================= */

.navbar{
  background:transparent;
  padding:0 3.5vw;
  margin-top:-1px;
  position:relative;
  z-index:5;
}

.navbar .nav-inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
  min-height:68px;
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:0;
  background:linear-gradient(180deg,#2f7659 0%,#1c5a42 100%);
  border:1px solid rgba(255,255,255,.52);
  border-radius:999px;
  box-shadow:
    0 10px 24px rgba(18,61,45,.16),
    inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
}

.navbar a{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 24px;
  color:#fff;
  font-size:22px;
  font-weight:700;
  text-decoration:none;
  position:relative;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.navbar a + a{
  border-left:1px solid rgba(255,255,255,.16);
}

.navbar a::after{
  display:none !important;
}

.navbar a:hover,
.navbar a:focus-visible{
  background:rgba(255,255,255,.10);
  color:#fff;
}

.navbar a:active{
  transform:translateY(1px);
}

/* Monochrome navigation icons */
.navbar a::before{
  content:"";
  width:23px;
  height:23px;
  flex:0 0 23px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.96;
}

.navbar a:nth-child(1)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 3l9 8'/%3E%3Cpath d='M5 10v10h14V10M9 20v-6h6v6'/%3E%3C/svg%3E");
}
.navbar a:nth-child(2)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
}
.navbar a:nth-child(3)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3.5 20c.5-4 2.8-6 5.5-6s5 2 5.5 6M14 14.5c3.3-.5 5.5 1.4 6 4.5'/%3E%3C/svg%3E");
}
.navbar a:nth-child(4)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}
.navbar a:nth-child(5)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.35-9-8.79C1.52 9.13 3.2 5.5 7 5.5c2.12 0 3.4 1.1 5 3 1.6-1.9 2.88-3 5-3 3.8 0 5.48 3.63 4 6.71C19 16.65 12 21 12 21z'/%3E%3C/svg%3E");
}

/* keep the hero visually close to the floating nav */
main{
  padding-top:10px;
}

@media (max-width:1100px){
  .navbar a{
    font-size:19px;
    padding:17px 16px;
    gap:8px;
  }
  .navbar a::before{
    width:20px;
    height:20px;
    flex-basis:20px;
  }
}

@media (max-width:640px){
  .navbar{
    padding:0 14px;
  }

  .nav-toggle{
    margin:0 auto;
    width:100%;
    max-width:520px;
    border-radius:999px;
    background:linear-gradient(180deg,#2f7659 0%,#1c5a42 100%);
    border:1px solid rgba(255,255,255,.45);
    box-shadow:0 8px 20px rgba(18,61,45,.14);
  }

  .navbar .nav-inner{
    display:none;
    margin-top:8px;
    border-radius:18px;
    padding:6px 0;
    min-height:0;
    overflow:hidden;
    flex-direction:column;
    box-shadow:0 10px 24px rgba(18,61,45,.16);
  }

  .navbar.open .nav-inner{
    display:flex;
  }

  .navbar a{
    width:100%;
    justify-content:flex-start;
    flex:none;
    padding:13px 20px;
    font-size:18px;
    border-left:0 !important;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .navbar a:last-child{
    border-bottom:0;
  }

  .navbar a::before{
    width:21px;
    height:21px;
    flex-basis:21px;
  }

  main{
    padding-top:8px;
  }
}


/* =========================
   V37 closer visual reproduction of selected concept
   ========================= */

.site-header{
  background:#f7f8f3;
  border-bottom:0;
}

.header-inner{
  max-width:1380px;
  margin:0 auto;
  padding:12px 3.2vw 10px;
}

.brand{
  gap:14px;
}

.brand img{
  width:118px;
  height:118px;
}

.brand-title{
  font-size:36px;
  line-height:1.12;
  color:#1d4350;
}

.lang-switch{
  background:transparent;
  border:0;
  padding:0;
  border-radius:0;
  font-size:15px;
}

/* Floating navigation pill */
.navbar{
  background:transparent;
  padding:0 5vw;
  margin:2px 0 0;
  position:relative;
  z-index:20;
}

.navbar .nav-inner{
  width:min(1120px, 100%);
  margin:0 auto;
  min-height:60px;
  padding:0 16px;
  border-radius:999px;
  background:linear-gradient(180deg,#397d60 0%,#205e47 100%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 8px 18px rgba(18,61,45,.16),
    0 2px 6px rgba(18,61,45,.08),
    inset 0 1px 0 rgba(255,255,255,.16);
  overflow:hidden;
}

.navbar a{
  min-height:60px;
  padding:15px 21px;
  font-size:20px;
  letter-spacing:.05px;
  gap:9px;
}

.navbar a::before{
  width:21px;
  height:21px;
  flex-basis:21px;
}

.navbar a + a{
  border-left:1px solid rgba(255,255,255,.15);
}

.navbar a:hover,
.navbar a:focus-visible{
  background:rgba(255,255,255,.085);
}

/* Pull hero close to floating nav, like the concept image */
main{
  padding-top:7px;
}

.hero{
  box-shadow:none;
}

/* Refine space below hero */
.section{
  padding-top:24px !important;
}

.cards{
  gap:20px;
}

.card{
  border-radius:16px;
  box-shadow:0 7px 20px rgba(18,61,45,.075);
}

.card::before{
  height:3px;
  opacity:.75;
}

/* More editorial footer proportions */
.footer{
  margin-top:14px;
  border-top:0;
}

.footer-inner{
  max-width:1380px;
  margin:0 auto;
  padding:22px 3.5vw 18px;
}

/* Small desktop tuning */
@media (min-width: 1200px){
  .header-inner{
    padding-left:4vw;
    padding-right:4vw;
  }
}

/* Tablet */
@media (max-width: 900px){
  .brand-title{
    font-size:31px;
  }
  .navbar{
    padding:0 3vw;
  }
  .navbar a{
    font-size:18px;
    padding:14px 14px;
  }
}

/* Mobile keeps the existing hamburger but matches the concept palette */
@media (max-width:640px){
  .header-inner{
    padding:9px 14px 8px;
  }
  .brand img{
    width:78px;
    height:78px;
  }
  .brand-title{
    font-size:21px;
  }
  .navbar{
    padding:0 14px;
    margin-top:1px;
  }
  .nav-toggle{
    min-height:50px;
    background:linear-gradient(180deg,#397d60 0%,#205e47 100%);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 7px 16px rgba(18,61,45,.15);
  }
  main{
    padding-top:6px;
  }
}


/* ======================================================
   V39 — faithful implementation of selected concept
   ====================================================== */

:root{
  --v39-cream:#f8f8f2;
  --v39-forest:#215e47;
  --v39-forest-deep:#174c39;
  --v39-leaf:#7fae61;
  --v39-card:#eef4e9;
  --v39-ink:#163449;
}

/* Decorative leafy frame */
body{
  background:var(--v39-cream);
  overflow-x:hidden;
}
.site-header{
  position:relative;
  background:var(--v39-cream);
  overflow:visible;
}
.site-header::before,
.site-header::after{
  content:"";
  position:absolute;
  top:-6px;
  width:160px;
  height:142px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  z-index:0;
  pointer-events:none;
}
.site-header::before{
  left:-8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 180'%3E%3Cg stroke='%235c7f4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 165C55 130 70 85 86 25' fill='none'/%3E%3Cpath d='M38 139C18 115 16 92 18 76c24 9 37 25 42 45' fill='%2391bd69'/%3E%3Cpath d='M59 111C43 84 45 61 52 45c23 13 33 31 31 52' fill='%237dac5d'/%3E%3Cpath d='M79 78C69 51 77 28 90 13c19 18 25 37 17 57' fill='%239bc66e'/%3E%3Cpath d='M84 135C103 111 124 101 146 99c-4 26-18 42-42 50' fill='%237faa58'/%3E%3Cpath d='M98 102C119 78 143 69 165 71c-5 24-21 39-46 45' fill='%2396c16a'/%3E%3Cpath d='M104 67C128 48 152 45 174 51c-11 23-29 34-55 34' fill='%237eab58'/%3E%3C/g%3E%3C/svg%3E");
}
.site-header::after{
  right:-8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 180'%3E%3Cg transform='translate(220 0) scale(-1 1)' stroke='%235c7f4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 165C55 130 70 85 86 25' fill='none'/%3E%3Cpath d='M38 139C18 115 16 92 18 76c24 9 37 25 42 45' fill='%2391bd69'/%3E%3Cpath d='M59 111C43 84 45 61 52 45c23 13 33 31 31 52' fill='%237dac5d'/%3E%3Cpath d='M79 78C69 51 77 28 90 13c19 18 25 37 17 57' fill='%239bc66e'/%3E%3Cpath d='M84 135C103 111 124 101 146 99c-4 26-18 42-42 50' fill='%237faa58'/%3E%3Cpath d='M98 102C119 78 143 69 165 71c-5 24-21 39-46 45' fill='%2396c16a'/%3E%3Cpath d='M104 67C128 48 152 45 174 51c-11 23-29 34-55 34' fill='%237eab58'/%3E%3C/g%3E%3C/svg%3E");
}

.header-inner{
  position:relative;
  z-index:2;
  max-width:1240px;
  margin:0 auto;
  padding:18px 4vw 12px;
  min-height:126px;
}

.brand{
  align-items:center;
  gap:16px;
}
.brand img{
  width:118px;
  height:118px;
}
.brand-copy{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.brand-title{
  font-size:36px;
  color:#173b56;
}
.brand-subtitle{
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:3.2px;
  color:#5d7b66;
  white-space:nowrap;
}
.header-side{
  display:flex;
  align-items:flex-start;
  gap:24px;
}
.header-motto{
  order:1;
  font-family:"Segoe Print","Comic Sans MS",cursive;
  font-size:17px;
  line-height:1.2;
  color:#244e44;
  transform:rotate(-2deg);
  text-align:center;
  margin-top:2px;
}
.lang-switch{
  order:2;
  margin-top:4px;
  font-size:14px;
  font-weight:700;
  background:transparent;
  border:0;
  padding:0;
}

/* Floating rounded navigation */
.navbar{
  position:relative;
  z-index:10;
  background:transparent;
  padding:0 6vw;
  margin-top:0;
}
.navbar .nav-inner{
  width:min(1080px,100%);
  min-height:58px;
  margin:0 auto -1px;
  padding:0 14px;
  border-radius:999px;
  background:linear-gradient(180deg,#3a7c5d 0%,#1f5d45 100%);
  border:1px solid rgba(255,255,255,.76);
  box-shadow:0 9px 22px rgba(20,65,48,.20), inset 0 1px 0 rgba(255,255,255,.18);
  overflow:hidden;
}
.navbar a{
  min-height:58px;
  padding:14px 20px;
  font-size:19px;
  gap:9px;
  color:#fff;
}
.navbar a + a{
  border-left:1px solid rgba(255,255,255,.16);
}
.navbar a::before{
  width:21px;
  height:21px;
  flex-basis:21px;
}

/* Hero */
main{
  padding-top:0;
}
.hero{
  margin-top:0;
  box-shadow:none;
}

/* Lower content area with side leaves */
.section{
  position:relative;
  padding:26px 3.5vw 38px !important;
  background:#f5f7f0;
  overflow:hidden;
}
.section::before,
.section::after{
  content:"";
  position:absolute;
  bottom:-12px;
  width:150px;
  height:150px;
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
  opacity:.88;
  z-index:0;
}
.section::before{
  left:-18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 180'%3E%3Cg stroke='%235c7f4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 165C55 130 70 85 86 25' fill='none'/%3E%3Cpath d='M38 139C18 115 16 92 18 76c24 9 37 25 42 45' fill='%2391bd69'/%3E%3Cpath d='M59 111C43 84 45 61 52 45c23 13 33 31 31 52' fill='%237dac5d'/%3E%3Cpath d='M79 78C69 51 77 28 90 13c19 18 25 37 17 57' fill='%239bc66e'/%3E%3Cpath d='M84 135C103 111 124 101 146 99c-4 26-18 42-42 50' fill='%237faa58'/%3E%3Cpath d='M98 102C119 78 143 69 165 71c-5 24-21 39-46 45' fill='%2396c16a'/%3E%3Cpath d='M104 67C128 48 152 45 174 51c-11 23-29 34-55 34' fill='%237eab58'/%3E%3C/g%3E%3C/svg%3E");
  transform:rotate(-8deg);
}
.section::after{
  right:-18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 180'%3E%3Cg transform='translate(220 0) scale(-1 1)' stroke='%235c7f4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 165C55 130 70 85 86 25' fill='none'/%3E%3Cpath d='M38 139C18 115 16 92 18 76c24 9 37 25 42 45' fill='%2391bd69'/%3E%3Cpath d='M59 111C43 84 45 61 52 45c23 13 33 31 31 52' fill='%237dac5d'/%3E%3Cpath d='M79 78C69 51 77 28 90 13c19 18 25 37 17 57' fill='%239bc66e'/%3E%3Cpath d='M84 135C103 111 124 101 146 99c-4 26-18 42-42 50' fill='%237faa58'/%3E%3Cpath d='M98 102C119 78 143 69 165 71c-5 24-21 39-46 45' fill='%2396c16a'/%3E%3Cpath d='M104 67C128 48 152 45 174 51c-11 23-29 34-55 34' fill='%237eab58'/%3E%3C/g%3E%3C/svg%3E");
  transform:rotate(8deg);
}
.cards{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  gap:22px;
}
.card{
  background:rgba(245,249,241,.93);
  border:1px solid #d7e1d1;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(31,85,63,.08);
}
.card::before{
  display:none;
}
.card h3{
  color:#173b56;
}

/* Footer: dark green with subtle leaves on both sides */
.footer{
  position:relative;
  overflow:hidden;
  margin-top:0;
  background:linear-gradient(90deg,#1a5741,#1f654b);
  border-top:0;
}
.footer::before,
.footer::after{
  content:"";
  position:absolute;
  bottom:-20px;
  width:120px;
  height:110px;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.48;
  pointer-events:none;
}
.footer::before{
  left:-6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 180'%3E%3Cg stroke='%235c7f4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 165C55 130 70 85 86 25' fill='none'/%3E%3Cpath d='M38 139C18 115 16 92 18 76c24 9 37 25 42 45' fill='%2391bd69'/%3E%3Cpath d='M59 111C43 84 45 61 52 45c23 13 33 31 31 52' fill='%237dac5d'/%3E%3Cpath d='M79 78C69 51 77 28 90 13c19 18 25 37 17 57' fill='%239bc66e'/%3E%3Cpath d='M84 135C103 111 124 101 146 99c-4 26-18 42-42 50' fill='%237faa58'/%3E%3Cpath d='M98 102C119 78 143 69 165 71c-5 24-21 39-46 45' fill='%2396c16a'/%3E%3Cpath d='M104 67C128 48 152 45 174 51c-11 23-29 34-55 34' fill='%237eab58'/%3E%3C/g%3E%3C/svg%3E");
}
.footer::after{
  right:-6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 180'%3E%3Cg transform='translate(220 0) scale(-1 1)' stroke='%235c7f4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 165C55 130 70 85 86 25' fill='none'/%3E%3Cpath d='M38 139C18 115 16 92 18 76c24 9 37 25 42 45' fill='%2391bd69'/%3E%3Cpath d='M59 111C43 84 45 61 52 45c23 13 33 31 31 52' fill='%237dac5d'/%3E%3Cpath d='M79 78C69 51 77 28 90 13c19 18 25 37 17 57' fill='%239bc66e'/%3E%3Cpath d='M84 135C103 111 124 101 146 99c-4 26-18 42-42 50' fill='%237faa58'/%3E%3Cpath d='M98 102C119 78 143 69 165 71c-5 24-21 39-46 45' fill='%2396c16a'/%3E%3Cpath d='M104 67C128 48 152 45 174 51c-11 23-29 34-55 34' fill='%237eab58'/%3E%3C/g%3E%3C/svg%3E");
}
.footer-inner{
  position:relative;
  z-index:2;
  max-width:1240px;
  margin:0 auto;
  padding:19px 3.5vw 16px;
}

/* Responsive behavior */
@media(max-width:900px){
  .site-header::before,
  .site-header::after{
    width:112px;
    height:104px;
    opacity:.85;
  }
  .brand-title{font-size:30px}
  .brand-subtitle{font-size:11px;letter-spacing:2.1px}
  .header-motto{font-size:14px}
  .navbar{padding:0 3vw}
}

@media(max-width:640px){
  .site-header::before,
  .site-header::after{
    width:72px;
    height:70px;
    opacity:.72;
  }
  .header-inner{
    min-height:92px;
    padding:9px 14px 8px;
  }
  .brand img{
    width:74px;
    height:74px;
  }
  .brand-title{
    font-size:20px;
  }
  .brand-subtitle{
    display:none;
  }
  .header-motto{
    display:none;
  }
  .navbar{
    padding:0 14px;
  }
  .section::before,
  .section::after{
    width:82px;
    height:82px;
    opacity:.48;
  }
}


/* ======================================================
   V40 compatibility + mobile polish after Playwright review
   ====================================================== */

/* Prevent long email/IBAN text from being clipped inside cards */
.card,
.card .item-line,
.card .item-line .tx{
  min-width:0;
}
.card .item-line .tx{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Responsive hero picture */
.hero-picture{
  display:block;
  width:100%;
  line-height:0;
}
.hero-picture .hero{
  width:100%;
  height:auto;
}

/* Long text outside cards should also wrap safely */
.content p,
.footer-grid p,
.footer-grid a,
.footer-brand-text{
  overflow-wrap:anywhere;
}

/* Contact page: smoother rhythm on tablets and phones */
@media(max-width:900px){
  .content .two-col{
    gap:28px;
  }
}

@media(max-width:640px){
  /* Less crowded mobile header */
  .site-header::before,
  .site-header::after{
    width:54px;
    height:54px;
    top:-5px;
    opacity:.54;
  }
  .site-header::before{ left:-10px; }
  .site-header::after{ right:-10px; }

  .header-inner{
    gap:8px;
  }
  .brand{
    gap:8px;
    min-width:0;
  }
  .brand img{
    width:66px;
    height:66px;
  }
  .brand-title{
    font-size:19px;
    line-height:1.12;
  }
  .lang-switch{
    font-size:13px;
  }

  /* Mobile-specific hero crop makes embedded title/verse more readable */
  .hero-picture{
    overflow:hidden;
    background:#dff3fb;
  }

  /* Tighter, more polished Contact page */
  .content{
    padding-top:28px;
    padding-bottom:34px;
  }
  .content h2{
    font-size:34px;
    margin-bottom:20px;
  }
  .content .two-col{
    gap:14px;
  }
  .content h3{
    margin:22px 0 9px;
    font-size:24px;
  }
  .content p{
    margin:7px 0 14px;
    line-height:1.62;
  }

  /* Homepage cards: robust long-text handling */
  .card{
    padding:24px 22px;
  }
  .card .item-line{
    gap:9px;
  }
  .card .item-line .tx{
    overflow-wrap:anywhere;
  }

  /* Slightly calmer decorative leaves near cards/footer */
  .section::before,
  .section::after{
    width:68px;
    height:68px;
    opacity:.36;
  }
  .footer::before,
  .footer::after{
    opacity:.34;
  }
}


/* ======================================================
   V42 final typography/layout refinement
   Desktop email + phone wrapping, footer column widths
   ====================================================== */

/* Desktop homepage: give the Kontakt card a little more room */
@media (min-width: 901px){
  .cards{
    grid-template-columns: 0.95fr 1.08fr 0.97fr;
  }

  /* Keep contact details visually intact where space allows */
  .card .item-line .tx{
    overflow-wrap:normal;
    word-break:normal;
  }

  /* Slightly smaller contact text only on desktop to avoid awkward breaks */
  .card:nth-child(2) .item-line{
    font-size:20px;
  }

  /* Keep phone number on one line on desktop */
  .card:nth-child(2) .item-line:nth-of-type(2) .tx{
    white-space:nowrap;
  }

  /* Email should stay on one line on normal desktop widths */
  .card:nth-child(2) .item-line:nth-of-type(1) .tx{
    white-space:nowrap;
    font-size:19px;
  }

  /* Footer: widen the contact column so the email does not split at .com */
  .footer-grid{
    grid-template-columns: 1.15fr 0.92fr 1.18fr 0.92fr;
    column-gap:28px;
  }

  .footer-grid p,
  .footer-grid a{
    overflow-wrap:normal;
    word-break:normal;
  }

  .footer-grid > div:nth-child(3) p{
    white-space:nowrap;
    font-size:16px;
  }
}

/* Medium desktop/tablet fallback: allow only natural wrapping */
@media (min-width: 641px) and (max-width: 1100px){
  .card:nth-child(2) .item-line:nth-of-type(1) .tx,
  .card:nth-child(2) .item-line:nth-of-type(2) .tx,
  .footer-grid > div:nth-child(3) p{
    white-space:normal;
    overflow-wrap:break-word;
  }
}

/* Mobile: preserve the good V41 layout, but don't split email in arbitrary places */
@media (max-width:640px){
  .card .item-line .tx,
  .footer-grid p,
  .footer-grid a{
    overflow-wrap:break-word;
    word-break:normal;
  }
}


/* ======================================================
   V45 email/contact wrapping fix
   Keeps SEO and all existing design, fixes card overflow
   ====================================================== */

/* Base safety: flex/grid children may shrink instead of overflowing */
.card,
.card .item-line,
.card .item-line .tx,
.footer-grid,
.footer-grid > div{
  min-width:0;
}

/* Desktop homepage layout:
   give Kontakt card enough room but do not force nowrap */
@media (min-width: 1101px){
  .cards{
    grid-template-columns: 0.95fr 1.12fr 0.93fr;
  }

  .card:nth-child(2) .item-line{
    font-size:19px;
  }

  /* Email: keep whole when it fits; otherwise break only as a last resort */
  .card:nth-child(2) .item-line:nth-of-type(1) .tx{
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    font-size:18px;
    line-height:1.45;
  }

  /* Phone can remain on one line on wide desktops */
  .card:nth-child(2) .item-line:nth-of-type(2) .tx{
    white-space:nowrap;
  }

  /* Footer contact column wider, but still allowed to wrap naturally */
  .footer-grid{
    grid-template-columns: 1.12fr 0.92fr 1.24fr 0.92fr;
    column-gap:24px;
  }

  .footer-grid > div:nth-child(3) p,
  .footer-grid > div:nth-child(3) a{
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
}

/* Medium desktop / tablet:
   allow wrapping before overflow happens */
@media (min-width: 641px) and (max-width: 1100px){
  .card:nth-child(2) .item-line .tx,
  .footer-grid > div:nth-child(3) p,
  .footer-grid > div:nth-child(3) a{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  .card:nth-child(2) .item-line{
    font-size:18px;
  }
}

/* Mobile: preserve current good layout, safe wrapping only */
@media (max-width:640px){
  .card:nth-child(2) .item-line .tx,
  .footer-grid p,
  .footer-grid a{
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
}

/* ======================================================
   V48 footer brand alignment + single-line name refinement
   ====================================================== */

/* Give the footer brand a little more room and shift it slightly left */
.footer-brand{
  gap:10px;
  margin-left:-8px;
}
.footer-brand img{
  width:56px;
  height:56px;
}
.footer-brand-text .title,
.footer-brand-text .subtitle{
  white-space:nowrap;
}
.footer-brand-text .title{
  font-size:17px;
  line-height:1.24;
}
.footer-brand-text .subtitle{
  font-size:15px;
  line-height:1.24;
  margin-top:1px;
}

@media (min-width: 901px){
  .footer-grid{
    grid-template-columns: 1.32fr 0.88fr 1.12fr 0.9fr;
    column-gap:22px;
  }
}

@media (max-width: 640px){
  .footer-inner{
    padding-left:10px;
    padding-right:10px;
  }
  .footer-brand{
    gap:8px;
    margin-left:-4px;
  }
  .footer-brand img{
    width:48px;
    height:48px;
  }
  .footer-brand-text .title{
    font-size:13px;
    line-height:1.18;
  }
  .footer-brand-text .subtitle{
    font-size:13px;
    line-height:1.18;
  }
}

/* ======================================================
   V49 footer brand final alignment fix
   ====================================================== */

/* Move the footer content clearly toward the left edge */
.footer-inner{
  max-width:none !important;
  margin:0 !important;
  padding-left:10px !important;
  padding-right:12px !important;
}

/* Keep both church-name lines intact */
.footer-brand{
  margin-left:0 !important;
  gap:8px !important;
  min-width:0;
  align-items:flex-start;
}
.footer-brand img{
  width:48px !important;
  height:48px !important;
  flex:0 0 48px;
}
.footer-brand-text{
  min-width:0;
  padding-top:0;
}
.footer-brand-text .title,
.footer-brand-text .subtitle{
  display:block;
  white-space:nowrap !important;
  overflow:visible !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.footer-brand-text .title{
  font-size:15px !important;
  line-height:1.25 !important;
  margin:0 !important;
}
.footer-brand-text .subtitle{
  font-size:14px !important;
  line-height:1.25 !important;
  margin-top:2px !important;
}

/* Desktop: reserve enough width for the complete German name */
@media (min-width:901px){
  .footer-grid{
    grid-template-columns:minmax(300px,1.45fr) minmax(145px,.8fr) minmax(185px,1fr) minmax(175px,.95fr) !important;
    column-gap:14px !important;
    row-gap:0 !important;
  }
}

/* Mobile: brand also stays close to the left and each language stays on one line */
@media (max-width:900px){
  .footer-inner{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .footer-brand{
    margin-left:0 !important;
  }
}

@media (max-width:420px){
  .footer-brand img{
    width:44px !important;
    height:44px !important;
    flex-basis:44px;
  }
  .footer-brand-text .title{
    font-size:12.5px !important;
  }
  .footer-brand-text .subtitle{
    font-size:12.5px !important;
  }
}

/* ======================================================
   V50 unified header/footer horizontal rhythm
   ====================================================== */
:root{
  --page-edge:clamp(18px,2.2vw,28px);
}

/* Header, navigation and footer use the same left/right edge */
.header-inner{
  max-width:none !important;
  margin:0 !important;
  padding-left:var(--page-edge) !important;
  padding-right:var(--page-edge) !important;
}
.navbar{
  padding-left:var(--page-edge) !important;
  padding-right:var(--page-edge) !important;
}
.footer-inner{
  max-width:none !important;
  margin:0 !important;
  padding-left:var(--page-edge) !important;
  padding-right:var(--page-edge) !important;
}

/* Four footer sections: equal width and equal, slightly tighter gaps */
@media (min-width:901px){
  .footer-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:12px !important;
    row-gap:0 !important;
    align-items:start;
  }

  .footer-brand{
    margin-left:0 !important;
    gap:7px !important;
  }
  .footer-brand img{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
  }
  .footer-brand-text .title{
    font-size:12.5px !important;
    line-height:1.22 !important;
    white-space:nowrap !important;
  }
  .footer-brand-text .subtitle{
    font-size:12.5px !important;
    line-height:1.22 !important;
    white-space:nowrap !important;
    margin-top:2px !important;
  }

  /* Keep the other columns visually balanced */
  .footer-grid h4{
    margin-bottom:8px !important;
  }
  .footer-legal{
    padding-left:12px !important;
  }
}

/* Tablet: keep comfortable but matching outer edges */
@media (min-width:641px) and (max-width:900px){
  :root{ --page-edge:18px; }
}

/* Mobile: header and footer share exactly the same side padding */
@media (max-width:640px){
  :root{ --page-edge:14px; }
  .header-inner,
  .footer-inner{
    padding-left:var(--page-edge) !important;
    padding-right:var(--page-edge) !important;
  }
  .navbar{
    padding-left:var(--page-edge) !important;
    padding-right:var(--page-edge) !important;
  }
}

/* ======================================================
   V51 balanced header/footer outer spacing
   ====================================================== */
:root{
  --page-edge:clamp(26px,3vw,40px) !important;
}

/* Keep header, navigation and footer aligned to exactly the same edges */
.header-inner,
.footer-inner{
  padding-left:var(--page-edge) !important;
  padding-right:var(--page-edge) !important;
}
.navbar{
  padding-left:var(--page-edge) !important;
  padding-right:var(--page-edge) !important;
}

/* Tablet: a little more breathing room than V50 */
@media (min-width:641px) and (max-width:900px){
  :root{
    --page-edge:24px !important;
  }
}

/* Mobile: keep comfortable side spacing without wasting width */
@media (max-width:640px){
  :root{
    --page-edge:18px !important;
  }
}


/* ======================================================
   V52 header/footer proportion rebalance
   ====================================================== */

/* A centered desktop content width gives header + footer the same rhythm.
   This avoids both "stuck to the edge" and "too much empty margin". */
:root{
  --shell-max:1680px;
  --shell-edge:clamp(34px,4.2vw,72px);
}

.header-inner,
.footer-inner{
  width:100%;
  max-width:var(--shell-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--shell-edge) !important;
  padding-right:var(--shell-edge) !important;
  box-sizing:border-box;
}

/* Keep the navigation visually centered, while its outside alignment
   follows the same page shell. */
.navbar{
  padding-left:var(--shell-edge) !important;
  padding-right:var(--shell-edge) !important;
}

/* Footer no longer uses four artificially identical columns.
   The brand gets enough room to keep both names readable at a normal size. */
@media (min-width:1101px){
  .footer-grid{
    grid-template-columns:minmax(330px,1.35fr) minmax(190px,.85fr) minmax(255px,1fr) minmax(245px,.95fr) !important;
    column-gap:clamp(28px,3vw,52px) !important;
    row-gap:0 !important;
    align-items:start;
  }

  .footer-brand{
    margin-left:0 !important;
    gap:11px !important;
    align-items:flex-start;
  }

  .footer-brand img{
    width:52px !important;
    height:52px !important;
    flex:0 0 52px !important;
  }

  .footer-brand-text{
    min-width:0;
  }

  .footer-brand-text .title{
    font-size:15px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
  }

  .footer-brand-text .subtitle{
    font-size:15px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
    margin-top:3px !important;
  }

  .footer-grid h4{
    font-size:18px !important;
    margin:0 0 9px !important;
  }

  .footer-grid p,
  .footer-grid a{
    font-size:15.5px !important;
    line-height:1.55 !important;
  }

  .footer-legal{
    padding-left:18px !important;
  }

  .footer-legal .copyright{
    font-size:15px !important;
    line-height:1.5 !important;
  }
}

/* Mid-size desktop/tablet: use two columns instead of squeezing four columns. */
@media (min-width:901px) and (max-width:1100px){
  :root{
    --shell-edge:32px;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    column-gap:40px !important;
    row-gap:24px !important;
  }

  .footer-brand-text .title,
  .footer-brand-text .subtitle{
    white-space:normal !important;
  }

  .footer-legal{
    border-left:none !important;
    padding-left:0 !important;
    border-top:1px solid rgba(255,255,255,.25);
    padding-top:14px !important;
  }
}

/* Phones/tablets keep the compact stacked layout but share the same
   visual outer edge as the header. */
@media (max-width:900px){
  :root{
    --shell-edge:22px;
  }

  .header-inner,
  .footer-inner{
    padding-left:var(--shell-edge) !important;
    padding-right:var(--shell-edge) !important;
  }

  .navbar{
    padding-left:var(--shell-edge) !important;
    padding-right:var(--shell-edge) !important;
  }
}

@media (max-width:640px){
  :root{
    --shell-edge:18px;
  }
}


/* V53 footer legal name line fix */
.footer-legal .org-name{white-space:nowrap;}
@media (min-width:1101px){
  .footer-legal .copyright{font-size:14px !important; line-height:1.55 !important;}
}

/* ======================================================
   V54 typography system + header leaf/logo separation
   Final overrides to keep visual sizes consistent.
   ====================================================== */
:root{
  --type-body:18px;
  --type-nav:18px;
  --type-page-title:34px;
  --type-section-title:24px;
  --type-card-title:28px;
  --type-card-body:18px;
  --type-button:17px;
  --type-footer-head:17px;
  --type-footer-body:15px;
}

/* One consistent type scale across German and Chinese pages */
body{
  font-size:var(--type-body) !important;
}
.navbar a{
  font-size:var(--type-nav) !important;
  line-height:1.25 !important;
}
.card h3{
  font-size:var(--type-card-title) !important;
  line-height:1.28 !important;
  margin-bottom:16px !important;
}
.card p,
.card .item-line{
  font-size:var(--type-card-body) !important;
  line-height:1.6 !important;
}
.btn{
  font-size:var(--type-button) !important;
  line-height:1.35 !important;
}
.content h2{
  font-size:var(--type-page-title) !important;
  line-height:1.2 !important;
}
.content h3{
  font-size:var(--type-section-title) !important;
  line-height:1.3 !important;
}
.content p,
.content li{
  font-size:var(--type-body) !important;
  line-height:1.7 !important;
}
.footer-grid h4{
  font-size:var(--type-footer-head) !important;
  line-height:1.3 !important;
}
.footer-grid p,
.footer-grid a,
.footer-legal .copyright{
  font-size:var(--type-footer-body) !important;
  line-height:1.55 !important;
}

/* Header brand: same visual scale for both languages */
.brand-title,
html[lang="zh-CN"] .brand-title{
  font-size:34px !important;
  line-height:1.14 !important;
}
.brand-subtitle{
  font-size:12px !important;
  line-height:1.25 !important;
}
.lang-switch{
  font-size:14px !important;
}
.header-motto{
  font-size:16px !important;
}

/* Left/right decorative leaves frame the header instead of touching the logo. */
.site-header::before,
.site-header::after{
  width:110px !important;
  height:100px !important;
  top:-10px !important;
  opacity:.78 !important;
}
.site-header::before{
  left:-38px !important;
}
.site-header::after{
  right:-38px !important;
}

/* Give logo a clean visual zone above decorative leaves. */
.brand{
  position:relative;
  z-index:3;
}
.brand img{
  position:relative;
  z-index:3;
}

/* Footer brand remains compact, but follows one coherent scale. */
@media (min-width:1101px){
  .footer-brand-text .title,
  .footer-brand-text .subtitle{
    font-size:14px !important;
    line-height:1.3 !important;
  }
}

@media (min-width:641px) and (max-width:1100px){
  :root{
    --type-body:17px;
    --type-nav:17px;
    --type-page-title:32px;
    --type-section-title:23px;
    --type-card-title:26px;
    --type-card-body:17px;
    --type-button:16px;
    --type-footer-head:17px;
    --type-footer-body:15px;
  }

  .brand-title,
  html[lang="zh-CN"] .brand-title{
    font-size:29px !important;
  }

  .site-header::before,
  .site-header::after{
    width:82px !important;
    height:76px !important;
  }
  .site-header::before{left:-30px !important;}
  .site-header::after{right:-30px !important;}
}

@media (max-width:640px){
  :root{
    --type-body:17px;
    --type-nav:18px;
    --type-page-title:32px;
    --type-section-title:23px;
    --type-card-title:25px;
    --type-card-body:18px;
    --type-button:17px;
    --type-footer-head:18px;
    --type-footer-body:16px;
  }

  .brand-title,
  html[lang="zh-CN"] .brand-title{
    font-size:20px !important;
    line-height:1.15 !important;
  }
  .lang-switch{
    font-size:13px !important;
  }

  /* On phones the leaves stay in the corners, outside the logo area. */
  .site-header::before,
  .site-header::after{
    width:44px !important;
    height:44px !important;
    top:-4px !important;
    opacity:.58 !important;
  }
  .site-header::before{left:-30px !important;}
  .site-header::after{right:-30px !important;}

  .footer-brand-text .title,
  .footer-brand-text .subtitle{
    font-size:13px !important;
    line-height:1.25 !important;
  }
}

/* ======================================================
   V55 zoom-safe desktop header spacing
   Prevent decorative leaves from crowding the logo area
   when the browser is zoomed in on desktop.
   ====================================================== */
.site-header{
  --header-leaf-width: clamp(86px, 6.6vw, 104px);
  --header-leaf-height: clamp(78px, 5.9vw, 96px);
  --header-leaf-offset: clamp(-92px, -5.6vw, -54px);
}

.site-header::before,
.site-header::after{
  width: var(--header-leaf-width) !important;
  height: var(--header-leaf-height) !important;
  top: -8px !important;
  opacity: .72 !important;
}
.site-header::before{
  left: var(--header-leaf-offset) !important;
}
.site-header::after{
  right: var(--header-leaf-offset) !important;
}

.header-inner{
  padding-left: clamp(26px, 3vw, 44px) !important;
  padding-right: clamp(26px, 3vw, 44px) !important;
}

.brand,
.header-side,
.brand img{
  position: relative;
  z-index: 4;
}

/* At desktop widths that often occur after browser zoom,
   slightly tighten the decorative frame and soften the header scale. */
@media (min-width:1101px) and (max-width:1450px){
  .site-header{
    --header-leaf-width: 88px;
    --header-leaf-height: 82px;
    --header-leaf-offset: -66px;
  }

  .header-inner{
    min-height: 118px !important;
    padding-top: 16px !important;
  }

  .brand img{
    width: 106px !important;
    height: 106px !important;
  }

  .brand-title,
  html[lang="zh-CN"] .brand-title{
    font-size: 31px !important;
  }

  .brand-subtitle{
    font-size: 11px !important;
    letter-spacing: 2.4px !important;
  }

  .header-motto{
    font-size: 15px !important;
  }

  .lang-switch{
    font-size: 13px !important;
  }
}

/* Extra protection on narrower desktops / strong zoom:
   keep the decorative leaves clearly outside the logo and language switch. */
@media (min-width:1101px) and (max-width:1280px){
  .site-header{
    --header-leaf-width: 78px;
    --header-leaf-height: 72px;
    --header-leaf-offset: -72px;
  }

  .brand img{
    width: 98px !important;
    height: 98px !important;
  }

  .brand-title,
  html[lang="zh-CN"] .brand-title{
    font-size: 29px !important;
  }

  .header-motto{
    max-width: 120px;
  }
}

/* ======================================================
   V56 header/nav proportion unification
   Keeps the header visually stable across zoom levels.
   ====================================================== */

/* Shared desktop rhythm */
.site-header{
  --header-row-height: 122px;
  --nav-height: 58px;
  --nav-radius: 999px;
}

.header-inner{
  min-height: var(--header-row-height) !important;
  padding-top: 14px !important;
  padding-bottom: 10px !important;
  display:flex;
  align-items:center;
}

.brand{
  align-items:center !important;
  gap:14px !important;
}

.brand img{
  width:108px !important;
  height:108px !important;
  flex:0 0 108px !important;
}

.brand-copy{
  justify-content:center;
  gap:4px !important;
}

.brand-title,
html[lang="zh-CN"] .brand-title{
  font-size:32px !important;
  line-height:1.12 !important;
}

.brand-subtitle{
  font-size:11px !important;
  line-height:1.2 !important;
  letter-spacing:2.5px !important;
}

.header-side{
  align-items:center !important;
  gap:18px !important;
}

.header-motto{
  font-size:15px !important;
  line-height:1.15 !important;
  margin-top:0 !important;
}

.lang-switch{
  font-size:13px !important;
  line-height:1.2 !important;
  margin-top:0 !important;
}

/* Navigation height and typography follow the same scale as the header */
.navbar{
  margin-top:0 !important;
}

.navbar .nav-inner{
  min-height:var(--nav-height) !important;
  height:var(--nav-height) !important;
  border-radius:var(--nav-radius) !important;
  padding:0 12px !important;
}

.navbar a{
  min-height:var(--nav-height) !important;
  height:var(--nav-height) !important;
  padding:0 18px !important;
  font-size:18px !important;
  line-height:1 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px !important;
}

.navbar a::before{
  width:20px !important;
  height:20px !important;
  flex-basis:20px !important;
}

/* Medium desktop / common zoom range */
@media (min-width:1101px) and (max-width:1450px){
  .site-header{
    --header-row-height: 112px;
    --nav-height: 56px;
  }

  .header-inner{
    min-height:var(--header-row-height) !important;
    padding-top:12px !important;
    padding-bottom:8px !important;
  }

  .brand img{
    width:98px !important;
    height:98px !important;
    flex-basis:98px !important;
  }

  .brand-title,
  html[lang="zh-CN"] .brand-title{
    font-size:29px !important;
  }

  .brand-subtitle{
    font-size:10px !important;
    letter-spacing:2.2px !important;
  }

  .header-motto{
    font-size:14px !important;
  }

  .lang-switch{
    font-size:12.5px !important;
  }

  .navbar a{
    font-size:17px !important;
    padding:0 16px !important;
  }
}

/* Tablet: preserve clear proportions without making the header too tall */
@media (min-width:641px) and (max-width:1100px){
  .site-header{
    --header-row-height: 102px;
    --nav-height: 54px;
  }

  .header-inner{
    min-height:var(--header-row-height) !important;
    padding-top:10px !important;
    padding-bottom:8px !important;
  }

  .brand img{
    width:84px !important;
    height:84px !important;
    flex-basis:84px !important;
  }

  .brand-title,
  html[lang="zh-CN"] .brand-title{
    font-size:26px !important;
  }

  .brand-subtitle{
    font-size:9px !important;
    letter-spacing:1.9px !important;
  }

  .header-motto{
    font-size:13px !important;
  }

  .lang-switch{
    font-size:12px !important;
  }

  .navbar .nav-inner,
  .navbar a{
    min-height:var(--nav-height) !important;
    height:var(--nav-height) !important;
  }
}

/* Mobile keeps the existing hamburger layout, but uses a cleaner vertical rhythm */
@media (max-width:640px){
  .site-header{
    --header-row-height: 96px;
    --nav-height: 56px;
  }

  .header-inner{
    min-height:var(--header-row-height) !important;
    padding-top:10px !important;
    padding-bottom:8px !important;
  }

  .brand{
    gap:10px !important;
  }

  .brand img{
    width:68px !important;
    height:68px !important;
    flex-basis:68px !important;
  }

  .brand-title,
  html[lang="zh-CN"] .brand-title{
    font-size:20px !important;
  }

  .brand-subtitle{
    display:none !important;
  }

  .navbar .nav-inner,
  .nav-toggle{
    min-height:var(--nav-height) !important;
    height:var(--nav-height) !important;
    border-radius:999px !important;
  }
}

/* ======================================================
   V59 – Jahresthema 2026 / 2026 年主题
   ====================================================== */
.theme-page{
  background:
    radial-gradient(circle at 8% 10%, rgba(132,166,118,.10), transparent 28%),
    radial-gradient(circle at 92% 64%, rgba(97,137,112,.10), transparent 30%),
    #f3f6ef;
  padding:1px 0 58px;
  color:#243b35;
}
.theme-wrap{
  width:min(1180px,93vw);
  margin:0 auto;
}
.theme-visual{
  margin:34px auto 0;
  border:1px solid rgba(55,93,72,.18);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(24,69,52,.14);
  background:#dcd8c4;
}
.theme-visual picture,
.theme-visual img{
  width:100%;
  display:block;
}
.theme-title-block{
  text-align:center;
  padding:42px 18px 24px;
}
.theme-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  color:#4d745f;
  font-size:15px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.theme-kicker::before,
.theme-kicker::after{
  content:"";
  width:34px;
  height:1px;
  background:#8ea995;
}
.theme-title-block h1{
  margin:0 auto;
  max-width:980px;
  color:#1b4650;
  font-family:"Palatino Linotype","Book Antiqua","Noto Serif",Georgia,"Times New Roman",serif;
  font-size:clamp(32px,4.4vw,56px);
  line-height:1.18;
  font-weight:700;
  letter-spacing:.01em;
}
html[lang="zh-CN"] .theme-title-block h1{
  font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans",Arial,sans-serif;
}
.theme-title-secondary{
  margin:15px auto 0;
  max-width:920px;
  color:#587164;
  font-size:clamp(19px,2vw,26px);
  line-height:1.55;
}
.theme-scripture{
  position:relative;
  margin:20px auto 44px;
  padding:34px 34px 32px;
  background:rgba(255,253,248,.94);
  border:1px solid #d9e3d4;
  border-radius:22px;
  box-shadow:0 12px 30px rgba(38,78,58,.08);
  overflow:hidden;
}
.theme-scripture::after{
  content:"";
  position:absolute;
  right:-42px;
  bottom:-54px;
  width:170px;
  height:170px;
  border:1px solid rgba(92,130,105,.16);
  border-radius:50%;
  box-shadow:0 0 0 22px rgba(92,130,105,.05),0 0 0 46px rgba(92,130,105,.025);
  pointer-events:none;
}
.theme-scripture-head{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  padding-bottom:18px;
  margin-bottom:24px;
  border-bottom:1px solid #dce5d8;
}
.theme-scripture-head h2{
  margin:0;
  color:#1d503d;
  font-size:clamp(27px,3vw,38px);
  line-height:1.25;
}
.theme-scripture-ref{
  color:#6b826f;
  font-size:16px;
  letter-spacing:.06em;
  white-space:nowrap;
}
.theme-scripture-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
}
.theme-scripture-column{
  padding-left:22px;
  border-left:3px solid #8daf93;
}
.theme-scripture-column .lang-label{
  margin-bottom:9px;
  color:#607d69;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.theme-scripture blockquote{
  margin:0;
  color:#33443e;
  font-size:18px;
  line-height:1.85;
}
html[lang="zh-CN"] .theme-scripture blockquote{
  font-size:18px;
  line-height:1.95;
}
.theme-aspects{
  margin:0 auto 44px;
}
.theme-section-heading{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  margin-bottom:22px;
}
.theme-section-heading h2{
  margin:0;
  color:#1b4650;
  font-size:clamp(29px,3.4vw,42px);
  line-height:1.22;
}
.theme-section-heading::after{
  content:"";
  height:1px;
  background:linear-gradient(90deg,#8ead98,transparent);
}
.theme-aspect-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.theme-aspect-card{
  position:relative;
  overflow:hidden;
  min-height:190px;
  padding:28px 28px 26px 92px;
  background:linear-gradient(145deg,#edf4e9,#e3eee0);
  border:1px solid #cbdcc6;
  border-radius:18px;
  box-shadow:0 8px 22px rgba(28,73,53,.08);
}
.theme-aspect-number{
  position:absolute;
  left:24px;
  top:20px;
  color:#6f947a;
  font-family:"Palatino Linotype","Book Antiqua",Georgia,serif;
  font-size:58px;
  line-height:1;
  opacity:.9;
}
.theme-aspect-card h3{
  margin:0 0 10px;
  color:#1e513f;
  font-size:24px;
  line-height:1.35;
}
.theme-aspect-card p{
  margin:0;
  color:#526b60;
  font-size:17px;
  line-height:1.65;
}
.theme-closing{
  text-align:center;
  padding:34px 24px;
  background:#1f654b;
  color:#fff;
  border-radius:20px;
  box-shadow:0 10px 26px rgba(25,73,53,.14);
}
.theme-closing .primary{
  margin:0;
  color:#fff;
  font-size:clamp(25px,3vw,36px);
  line-height:1.35;
  font-weight:700;
}
.theme-closing .secondary{
  margin:8px 0 0;
  color:rgba(255,255,255,.86);
  font-size:18px;
  line-height:1.6;
}
.theme-page + .footer{
  margin-top:0;
}

@media (max-width:820px){
  .theme-wrap{width:min(94vw,720px)}
  .theme-visual{margin-top:22px;border-radius:18px}
  .theme-title-block{padding:30px 10px 16px}
  .theme-scripture{padding:26px 22px 24px;margin-bottom:34px}
  .theme-scripture-head{display:block}
  .theme-scripture-ref{display:block;margin-top:7px;white-space:normal}
  .theme-scripture-grid{grid-template-columns:1fr;gap:26px}
  .theme-aspect-grid{grid-template-columns:1fr}
}

@media (max-width:520px){
  .theme-page{padding-bottom:34px}
  .theme-wrap{width:calc(100% - 28px)}
  .theme-visual{border-radius:14px}
  .theme-kicker{font-size:12px;letter-spacing:.12em}
  .theme-kicker::before,.theme-kicker::after{width:20px}
  .theme-title-secondary{font-size:18px}
  .theme-scripture{padding:22px 18px 20px;border-radius:16px}
  .theme-scripture-column{padding-left:15px}
  .theme-scripture blockquote,
  html[lang="zh-CN"] .theme-scripture blockquote{font-size:16px;line-height:1.8}
  .theme-section-heading{grid-template-columns:1fr}
  .theme-section-heading::after{width:72px}
  .theme-aspect-card{padding:24px 20px 22px 72px;min-height:0;border-radius:15px}
  .theme-aspect-number{left:20px;top:19px;font-size:46px}
  .theme-aspect-card h3{font-size:21px}
  .theme-aspect-card p{font-size:16px}
  .theme-closing{padding:28px 18px;border-radius:16px}
  .theme-closing .secondary{font-size:16px}
}


/* ======================================================
   V60 – Jahresthema: DE/ZH content separated
   ====================================================== */
.theme-scripture-grid.single{
  grid-template-columns:1fr;
}
.theme-scripture-grid.single .theme-scripture-column{
  max-width:none;
}
/* The supplied theme artwork contains Chinese lettering.
   On the German page the image is cropped to the lower scene so no Chinese
   text is displayed, while the original artwork stays intact for the ZH page. */
.theme-visual-de{
  aspect-ratio:16 / 6.7;
}
.theme-visual-de picture{
  display:block;
  width:100%;
  height:100%;
}
.theme-visual-de img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
}
.theme-aspect-card h3:last-child{
  margin-bottom:0;
}

/* ======================================================
   V61 – Original Jahresthema artwork preserved on both languages
   The supplied image is shown in full, including its original title text.
   Page content below remains monolingual (DE or ZH).
   ====================================================== */
.theme-visual-de{
  aspect-ratio:auto;
}
.theme-visual-de picture{
  display:block;
  width:100%;
  height:auto;
}
.theme-visual-de img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}


/* ======================================================
   V63 — SEO-friendly homepage introduction
   ====================================================== */
.home-intro{
  position:relative;
  background:linear-gradient(180deg,#f8f8f2 0%,#f5f7f0 100%);
  padding:34px 4vw 18px;
}
.home-intro-inner{
  max-width:1060px;
  margin:0 auto;
  padding:26px 34px 27px;
  border-left:4px solid var(--v39-leaf);
  background:rgba(255,255,255,.42);
  border-radius:0 18px 18px 0;
}
.home-intro-eyebrow{
  margin-bottom:8px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5d7b66;
}
html[lang="zh-CN"] .home-intro-eyebrow{
  text-transform:none;
  letter-spacing:.08em;
}
.home-intro h1{
  margin:0 0 12px;
  color:var(--v39-ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(30px,3vw,43px);
  line-height:1.18;
  font-weight:700;
}
html[lang="zh-CN"] .home-intro h1{
  font-family:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  letter-spacing:.02em;
}
.home-intro-text{
  max-width:980px;
  margin:0;
  color:#30463d;
  font-size:18px;
  line-height:1.72;
}
html[lang="zh-CN"] .home-intro-text{
  line-height:1.85;
}
@media(max-width:700px){
  .home-intro{
    padding:24px 16px 10px;
  }
  .home-intro-inner{
    padding:21px 20px 22px;
    border-left-width:3px;
    border-radius:0 14px 14px 0;
  }
  .home-intro-eyebrow{
    font-size:12px;
    line-height:1.5;
  }
  .home-intro h1{
    font-size:28px;
    line-height:1.23;
    margin-bottom:10px;
  }
  .home-intro-text{
    font-size:17px;
    line-height:1.7;
  }
  html[lang="zh-CN"] .home-intro-text{
    line-height:1.82;
  }
}

/* ======================================================
   V66 — official homepage heading
   Keep the official organization name as the semantic H1
   without giving it the large display-title treatment.
   ====================================================== */
.home-intro h1.home-intro-eyebrow{
  margin:0 0 10px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.45;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5d7b66;
}
html[lang="zh-CN"] .home-intro h1.home-intro-eyebrow{
  font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;
  font-size:14px;
  line-height:1.55;
  text-transform:none;
  letter-spacing:.08em;
}
@media(max-width:700px){
  .home-intro h1.home-intro-eyebrow{
    font-size:12px;
    line-height:1.5;
    margin-bottom:8px;
  }
}

/* ======================================================
   V64 — eliminate horizontal document overflow without
   changing the visible decorative header leaves.

   The leaves used to sit partly outside the viewport via
   negative left/right offsets. That looked correct, but the
   right-hand pseudo element enlarged document.scrollWidth.
   We now keep only the same visible slice inside the header
   and render the full leaf artwork as a cropped background.
   ====================================================== */
.site-header::before,
.site-header::after{
  width: calc(var(--header-leaf-width) + var(--header-leaf-offset)) !important;
  height: var(--header-leaf-height) !important;
  background-size: var(--header-leaf-width) var(--header-leaf-height) !important;
}
.site-header::before{
  left: 0 !important;
  background-position: right center !important;
}
.site-header::after{
  right: 0 !important;
  background-position: left center !important;
}


/* ======================================================
   V67 – Mobile navigation fix
   Keep the menu button at a fixed height, but let the
   expanded menu grow naturally so all five items remain
   visible on phones.
   ====================================================== */
@media (max-width:640px){
  .navbar .nav-inner{
    min-height:0 !important;
    height:auto !important;
    border-radius:18px !important;
    justify-content:flex-start !important;
  }
}

/* ======================================================
   V68 — justified long-form text
   Keep homepage introduction and 2026 scripture text
   aligned cleanly on both left and right edges.
   ====================================================== */
.home-intro-text,
.theme-scripture blockquote{
  text-align:justify;
  text-align-last:left;
  -webkit-hyphens:auto;
  hyphens:auto;
}
html[lang="de"] .home-intro-text,
html[lang="de"] .theme-scripture blockquote{
  text-justify:inter-word;
}
html[lang="zh-CN"] .home-intro-text,
html[lang="zh-CN"] .theme-scripture blockquote{
  text-justify:inter-character;
}


/* ======================================================
   V69 — centered information pages + contact map-link card
   Full-width page background remains unchanged. Only the
   readable inner content gets a centered maximum width.
   ====================================================== */
.content.content-centered{
  padding-left:0 !important;
  padding-right:0 !important;
}
.page-shell{
  width:calc(100% - 48px);
  margin:0 auto;
}
.contact-shell{max-width:1180px;}
.impressum-shell{max-width:1080px;}
.datenschutz-shell{max-width:1040px;}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:28px;
  align-items:start;
}
.contact-panel{
  background:rgba(255,255,255,.52);
  border:1px solid #cad8cd;
  border-radius:18px;
  padding:28px 30px;
  box-shadow:0 8px 24px rgba(24,70,54,.07);
}
.contact-panel h3{
  margin-top:0;
}
.contact-section + .contact-section{
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid rgba(70,108,88,.18);
}
.contact-panel p{
  margin-bottom:0;
}
.contact-panel a:not(.map-route-card){
  color:#205f4b;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.map-route-card{
  display:grid;
  grid-template-columns:minmax(180px,42%) 1fr;
  margin-top:20px;
  overflow:hidden;
  border:1px solid #bccdbf;
  border-radius:16px;
  background:#fff;
  color:#24473c;
  text-decoration:none;
  box-shadow:0 7px 20px rgba(24,70,54,.09);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.map-route-card:hover,
.map-route-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(24,70,54,.14);
  border-color:#8eaa98;
  outline:none;
}
.map-route-card:focus-visible{
  box-shadow:0 0 0 3px rgba(45,102,79,.18),0 10px 26px rgba(24,70,54,.14);
}
.map-route-card img{
  width:100%;
  height:100%;
  min-height:132px;
  object-fit:cover;
  display:block;
  border-right:1px solid #d7e0d8;
}
.map-route-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 20px;
}
.map-route-title{
  font-size:18px;
  line-height:1.35;
  font-weight:700;
  color:#1e5f49;
}
.map-route-address{
  margin-top:7px;
  font-size:15px;
  line-height:1.5;
  color:#5a6b63;
}
.map-route-note{
  margin-top:10px !important;
  font-size:14px !important;
  line-height:1.5 !important;
  color:#66756e !important;
}

/* Long legal copy is easier to scan at a controlled line length. */
.datenschutz-shell p,
.datenschutz-shell li{
  max-width:100%;
}

@media(max-width:900px){
  .contact-layout{
    grid-template-columns:1fr;
    gap:20px;
  }
}
@media(max-width:700px){
  .page-shell{
    width:calc(100% - 28px);
  }
  .contact-panel{
    padding:22px 20px;
    border-radius:15px;
  }
  .map-route-card{
    grid-template-columns:1fr;
  }
  .map-route-card img{
    min-height:150px;
    max-height:190px;
    border-right:0;
    border-bottom:1px solid #d7e0d8;
  }
  .map-route-copy{
    padding:16px 17px 17px;
  }
  .map-route-title{font-size:17px;}
  .map-route-address{font-size:14px;}
}


/* ======================================================
   V71 — equal homepage cards + centered content blocks
   Three cards stay equal-width on desktop. Their content
   is vertically centered while all text remains left-aligned.
   ====================================================== */
.cards{
  align-items:stretch;
}
.card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.card-content{
  width:100%;
  max-width:310px;
  text-align:left;
}
.card-content .btn{
  align-self:flex-start;
}

@media (min-width:901px){
  .cards{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:900px){
  .card-content{
    max-width:none;
  }
}

/* ======================================================
   V72 — vertically centered card content with aligned tops
   The three desktop cards use an equal-height inner content
   area. That shared area is vertically centered in each card,
   while headings/text start on the same horizontal line and
   remain left-aligned.
   ====================================================== */
@media (min-width:901px){
  .card{
    justify-content:center !important;
    align-items:center !important;
  }
  .card-content{
    width:100% !important;
    max-width:340px !important;
    height:340px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    text-align:left;
  }
  .card-content .btn{
    align-self:flex-start;
  }
}

/* On narrower layouts, content height must grow naturally. */
@media (max-width:900px){
  .card{
    justify-content:flex-start;
    align-items:stretch;
  }
  .card-content{
    height:auto;
    max-width:none !important;
  }
}