:root{
  --bg:#f6f1e8;
  --surface:#ffffff;
  --text:#2a241d;
  --muted:#6e6256;
  --brand:#992424;
  --brand-hover:#b22b2b;
  --brand-soft:#f1dddd;
  --chip:#efe4e4;
  --chip-text:#5a1f1f;
  --chip-border:#d7baba;
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --card-shadow:0 4px 18px rgba(0,0,0,.10);
  --radius:16px;
  --max:1100px;
}

body.dark{
  --bg:#1f1b17;
  --surface:#2a2520;
  --text:#f3ede4;
  --muted:#c9bba9;
  --brand:#992424;
  --brand-hover:#b22b2b;
  --brand-soft:#4a2525;
  --chip:#3a2a2a;
  --chip-text:#f3dede;
  --chip-border:#5a3b3b;
  --shadow:0 2px 12px rgba(0,0,0,.25);
  --card-shadow:0 6px 20px rgba(0,0,0,.28);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:40px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}

body.bigtext{ font-size:19px; }
body.hugetext{ font-size:21px; }

img{ display:block; max-width:100%; height:auto; }
.container{ width:min(100% - 2rem, var(--max)); margin:0 auto; }

header{
  position:sticky;
  top:0;
  z-index:1000;
  background:linear-gradient(to bottom, #ad2d2d 0%, var(--brand) 70%, #7f1c1c 100%);
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 0;
}

.site-title{
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.02em;
}

.controls{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem;
  min-width:0;
}

.info-wrap{ order:-1; }

.toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  min-height:44px;
  padding:0 1rem;
  border-radius:12px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  user-select:none;
  appearance:none;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  background:linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 0 rgba(0,0,0,.18),
    0 6px 14px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.toggle:hover{
  transform:translateY(-1px);
  background:linear-gradient(to bottom, rgba(255,255,255,.34), rgba(255,255,255,.16));
}

.toggle:active{
  transform:translateY(3px);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.18),
    0 1px 0 rgba(0,0,0,.16),
    0 3px 8px rgba(0,0,0,.16);
}

.menu-wrap{ position:relative; flex:0 0 auto; }
.menu-toggle{
  min-width:48px;
  width:48px;
  height:44px;
  padding:0;
  border-radius:12px;
}
.info-icon{ font-size:1.05rem; line-height:1; }
.burger-lines{ display:flex; flex-direction:column; gap:4px; width:22px; }
.burger-lines span{ display:block; width:100%; height:2px; border-radius:2px; background:#fff; }

.header-menu{
  display:none;
  position:absolute;
  top:calc(100% + .6rem);
  right:0;
  z-index:2000;
  min-width:240px;
  max-width:min(300px, calc(100vw - 1rem));
  max-height:calc(100vh - 90px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:.5rem;
  border-radius:12px;
  background:var(--surface);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

body.dark .header-menu{ border:1px solid rgba(255,255,255,.08); }
.header-menu.open{ display:flex; flex-direction:column; gap:.45rem; }

.menu-link,
.hero-inline-link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:46px;
  padding:.8rem 1rem;
  border-radius:10px;
  text-decoration:none;
  font:inherit;
  font-weight:700;
  color:var(--chip-text);
  border:1px solid var(--chip-border);
  background:linear-gradient(to bottom, #fff7f7 0%, var(--chip) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 3px 8px rgba(0,0,0,.08);
  transition:transform .12s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

button.menu-link{ cursor:pointer; }
body.dark .menu-link,
body.dark .hero-inline-link{ background:linear-gradient(to bottom, #4a3636 0%, var(--chip) 100%); }

.menu-link:hover,
.hero-inline-link:hover{
  transform:translateY(-1px);
  background:linear-gradient(to bottom, #fff0f0 0%, var(--brand-soft) 100%);
  color:var(--brand);
}

.menu-link.active,
.hero-inline-link.active{
  border-color:#7f1f1f;
  background:linear-gradient(to bottom, var(--brand-hover) 0%, var(--brand) 68%, #7e1b1b 100%);
  color:#fff;
}

.hero{ padding:1.25rem 0 0; }

.hero-box{
  background:var(--surface);
  border-radius:var(--radius);
  padding:1.4rem;
  box-shadow:var(--card-shadow);
}

.hero h1{
  margin:0 0 .6rem;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1.15;
  color:var(--brand);
}

.hero-text{
  margin:0;
  color:var(--muted);
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  line-height:1.75;
  letter-spacing:.01em;
  word-spacing:.01em;
}

.hero-panel-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.65rem;
  margin-top:1rem;
}

.hero-panel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.7rem 1.15rem;
  border:0;
  border-radius:12px;
  font:inherit;
  font-weight:700;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(to bottom, #ad2d2d 0%, var(--brand) 70%, #7f1c1c 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.16);
  transition:transform .12s ease, opacity .18s ease, box-shadow .18s ease;
}

.hero-panel-btn:hover{ transform:translateY(-1px); opacity:.96; }
.hero-panel-btn:active{ transform:translateY(1px); }
.hero-panel-btn.is-active{ box-shadow:inset 0 2px 0 rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.18); }

.hero-panel-box{
  margin-top:1rem;
  background:var(--surface);
  border-radius:12px;
  padding:1rem 1.1rem;
  box-shadow:var(--shadow);
}

.hero-panel-content{ display:none; color:var(--muted); }
.hero-panel-content.is-active{ display:block; }

.hero-panel-content p{
  margin:0 0 1rem;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  line-height:1.75;
  letter-spacing:.01em;
  word-spacing:.01em;
}

.hero-panel-content p:last-child{ margin-bottom:0; }

.hero-inline-menu{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:.65rem;
}

.stories{ padding:1rem 0 3rem; }
.story-card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:1rem;
  margin-bottom:1rem;
  box-shadow:var(--card-shadow);
  overflow:hidden;
  scroll-margin-top:40px;
}
.story-card h2{
  margin:0 0 1rem;
  font-size:clamp(1.45rem, 2vw, 2rem);
  line-height:1.1;
  color:var(--brand);
}
.story-card h3{
  margin:1.5rem 0 .75rem;
  font-size:1.15rem;
  line-height:1.3;
  color:var(--brand);
}
.story-card p,
.story-card .intro{
  margin:0 0 1rem;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  word-break:normal;
  overflow-wrap:break-word;
  line-height:1.75;
  letter-spacing:.01em;
  word-spacing:.01em;
}
.story-card .intro{ font-weight:700; }
.story-image{ width:100%; max-width:100%; height:auto; margin:0 0 .35rem; border-radius:10px; }
.caption{ margin:0 0 1rem; color:var(--muted); font-size:.93rem; }
.story-card img.img-right,
.story-card img.img-left{ height:auto; display:block; padding:0; border-radius:6px; }
.story-card img.std{ width:430px; max-width:58%; }
.story-card img.logo{ width:220px; max-width:38%; }
.story-card img.w500{ width:500px; max-width:62%; }
.story-card img.h350{ height:350px; width:auto; max-width:58%; }
.story-card img.hochkant{ width:33%; max-width:33%; height:auto; }
.story-card img.img-right{ float:right; margin:6px 0 12px 15px; }
.story-card img.img-left{ float:left; margin:6px 15px 12px 0; }
.story-card img.nozoom{ cursor:default; }
.story-card img.nozoom:hover{ transform:none; }
.story-card img{ border-radius:14px; cursor:zoom-in; transition:transform .25s ease, box-shadow .25s ease; }
@media (hover:hover) and (pointer:fine){ .story-card img:hover{ transform:scale(1.02); } }
.story-card p::after,
.story-card::after{ content:""; display:block; clear:both; }

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}
.lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }
.lightbox-inner{
  position:relative;
  width:auto;
  height:auto;
  max-width:96vw;
  max-height:96vh;
  transform:scale(.96);
  transition:transform .25s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox.open .lightbox-inner{ transform:scale(1); }
.lightbox img{
  display:block;
  width:auto;
  height:auto;
  max-width:96vw;
  max-height:96vh;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.45);
  object-fit:contain;
}
.lightbox-close{
  position:absolute;
  top:-14px;
  right:-14px;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:#ffffff;
  color:#111;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .2s ease;
}
.lightbox-close:hover{ transform:scale(1.06); }
body.lightbox-open{ overflow:hidden; }

.button-unauffaellig{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.7rem 1.15rem;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  font:inherit;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  background:linear-gradient(to bottom, #8a8a8a 0%, #777777 70%, #666666 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.14);
  transition:transform .12s ease, opacity .18s ease, box-shadow .18s ease, background .18s ease;
}

.button-unauffaellig:hover{
  transform:translateY(-1px);
  background:linear-gradient(to bottom, #969696 0%, #838383 70%, #707070 100%);
}

.button-unauffaellig:active{
  transform:translateY(1px);
  box-shadow:0 2px 6px rgba(0,0,0,.16);
}

.hero-panel-btn.button-unauffaellig{
  border:1px solid rgba(0,0,0,.12);
  color:#fff;
  background:linear-gradient(to bottom, #8a8a8a 0%, #777777 70%, #666666 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.14);
}

.hero-panel-btn.button-unauffaellig:hover{
  background:linear-gradient(to bottom, #969696 0%, #838383 70%, #707070 100%);
  opacity:1;
}

.hero-panel-btn.button-unauffaellig.is-active{
  background:linear-gradient(to bottom, #7f7f7f 0%, #6f6f6f 70%, #5f5f5f 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.10), 0 2px 8px rgba(0,0,0,.18);
}

body.dark .button-unauffaellig,
body.dark .hero-panel-btn.button-unauffaellig{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(to bottom, #7c7c7c 0%, #696969 70%, #585858 100%);
  color:#fff;
}

body.dark .button-unauffaellig:hover,
body.dark .hero-panel-btn.button-unauffaellig:hover{
  background:linear-gradient(to bottom, #8a8a8a 0%, #767676 70%, #626262 100%);
}

body.dark .hero-panel-btn.button-unauffaellig.is-active{
  background:linear-gradient(to bottom, #727272 0%, #626262 70%, #525252 100%);
}

footer{ padding:1.5rem 0 2rem; text-align:center; color:var(--muted); }

@media (min-width:900px){
  .story-card p,
  .story-card .intro,
  .hero-text{ max-width:none; }

  .story-image.align-left{ float:left; width:40%; max-width:60%; margin:.25rem 1rem .75rem 0; }
  .story-image.align-right{ float:right; width:40%; max-width:60%; margin:.25rem 0 .75rem 1rem; }

  .story-card::after{ content:""; display:block; clear:both; }

  #stjsft img,
  #spithv img,
  #weststr img{ max-width:60% !important; height:auto; }

  #kirche img.hochkant{ width:28%; max-width:240px; }

  .lightbox{ padding:4px; }
  .lightbox-inner{ max-width:98vw; max-height:98vh; }
  .lightbox img{ max-width:98vw; max-height:98vh; }
  .lightbox.portrait .lightbox-inner{
    width:78vw;
    height:94vh;
    max-width:78vw;
    max-height:94vh;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .lightbox.portrait img{
    width:auto;
    height:94vh;
    max-width:78vw;
    max-height:94vh;
    object-fit:contain;
  }
}

@media (max-width:899px){
  .container{ width:min(100% - 1rem, var(--max)); }

  .header-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .controls{
    width:100%;
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:.4rem;
  }

  .toggle,
  .menu-wrap{ width:100%; }

  .toggle{
    width:100%;
    min-width:0;
    padding:0 .75rem;
    font-size:.92rem;
  }

  .menu-toggle{
    min-width:0;
    width:100%;
  }

  .header-menu{
    right:0;
    left:auto;
    min-width:220px;
    max-width:min(280px, calc(100vw - 1rem));
  }

  .hero-box,
  .story-card{ padding:1rem; }

  .hero-panel-nav{ gap:.5rem; }
  .hero-panel-btn{ flex:1 1 calc(50% - .5rem); padding:.65rem .95rem; }
  .hero-inline-menu{ grid-template-columns:1fr; }

  .story-image.align-left,
  .story-image.align-right,
  .story-card img.img-right,
  .story-card img.img-left,
  .story-card img.std,
  .story-card img.logo,
  .story-card img.w500,
  .story-card img.h350{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:10px 0 12px 0 !important;
  }

  .story-card img.hochkant{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block;
    float:none !important;
    margin:10px 0 12px 0 !important;
  }

  #kirche p > img.img-left,
  #kirche p > img.img-right,
  #kirche p > img.std,
  #kirche p > img.hochkant{
    display:block;
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 12px 0 !important;
  }

  #kirche p{ overflow:visible; }

  .lightbox{ padding:4px; }
  .lightbox-inner{ width:100%; max-width:100vw; max-height:96vh; }
  .lightbox img{ max-width:100vw; max-height:94vh; border-radius:10px; }
}

@media (max-width:560px){
  html{ scroll-padding-top:67px; }
  .story-card{ scroll-margin-top:67px; }
  .site-title{ font-size:1.08rem; }
  .toggle{
    height:42px;
    min-height:42px;
    padding:0 .75rem;
    font-size:.88rem;
  }
  .menu-toggle{
    min-width:42px;
    width:42px;
    height:42px;
    padding:0;
  }
  .header-menu{ width:min(100vw - .75rem, 300px); max-height:calc(100vh - 120px); }
  .hero h1{ font-size:1.6rem; }
  .story-card p,
  .story-card .intro,
  .hero-text{ line-height:1.82; letter-spacing:.006em; }
  .hero-panel-btn{ flex:1 1 100%; }
  .story-card img.img-left,
  .story-card img.img-right,
  .story-card img.std,
  .story-card img.hochkant,
  .story-card img.logo,
  .story-card img.w500,
  .story-card img.h350{
    width:100% !important;
    max-width:100% !important;
    margin:10px 0 12px 0 !important;
  }
  .lightbox{ padding:2px; }
  .lightbox-inner{ max-width:100vw; max-height:98vh; }
  .lightbox img{ max-width:100vw; max-height:96vh; border-radius:8px; }
}

@media (max-width:420px){
  .site-title{ font-size:1.02rem; }
  .controls{ gap:.35rem; }
  .toggle{
    height:40px;
    min-height:40px;
    padding:0 .65rem;
    font-size:.8rem;
  }
  .menu-toggle{
    width:40px;
    min-width:40px;
    height:40px;
  }
  .menu-link,
  .hero-inline-link{ font-size:.95rem; padding:.75rem .9rem; }
}