/* ============================================================
   FARBEN & GRUNDEINSTELLUNGEN
   Hier können alle Farben zentral geändert werden.
   Die Palette stammt direkt aus dem Folder:
   Salbeigrün / Ocker / Creme / dunkles Waldgrün / Himmelblau
   ============================================================ */
:root{
  --salbei:       #A9BC96;   /* grüne Panels          */
  --salbei-hell:  #E4EBDC;   /* helles Grün, Flächen  */
  --ocker:        #D0A24C;   /* goldgelbe Panels      */
  --ocker-hell:   #F3E7CF;   /* helles Ocker          */
  --creme:        #F7F4EB;   /* Hintergrund           */
  --wald:         #3C4A34;   /* dunkles Grün, Text    */
  --himmel:       #7FA8CC;   /* Himmelblau, Akzent    */
  --weiss:        #FFFFFF;

  --schrift-display: Georgia, "Times New Roman", serif;
  --schrift-text:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-hand:    "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;

  --max-breite: 1080px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  font-family: var(--schrift-text);
  color: var(--wald);
  background: var(--creme);
  line-height: 1.65;
  font-size: 17px;
}

/* Wiederkehrende Layout-Hilfen */
.container{ max-width: var(--max-breite); margin: 0 auto; padding: 0 24px; }
section{ padding: 72px 0; }
h2{
  font-family: var(--schrift-display);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 600;
  margin-bottom: 24px;
}
.eyebrow{
  display:inline-block;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
  opacity: .75;
}
img{ max-width:100%; display:block; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(247,244,235,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e3ddcd;
}
.site-navigation{
  max-width: var(--max-breite); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 24px;
}
.marke{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.marke img{ width:38px; height:38px; }
.wortmarke{
  font-family: var(--schrift-hand);
  font-size: 28px;
  color: var(--wald);
}
.wortmarke span{ color: var(--ocker); }        /* das (i) in Gold */
.nav-links{ display:flex; gap:26px; }
.nav-links a{
  color: var(--wald); text-decoration:none; font-weight:500; font-size:15px;
}
.nav-links a:hover, .nav-links a:focus-visible{ color: var(--ocker); }
a:focus-visible{ outline: 2px solid var(--ocker); outline-offset: 3px; border-radius:2px; }
@media (max-width: 700px){ .nav-links{ display:none; } }

/* ============================================================
   HERO — Original-Blumenwiese aus dem Folder als Hintergrund
   Eigenes Foto tauschen: url(...) bei .hero ersetzen.
   ============================================================ */
.hero{
  position:relative;
  padding: 120px 0 150px;
  color: var(--weiss);
  text-align:center;
  background-image:
    linear-gradient(180deg, rgba(30,50,80,.28) 0%, rgba(30,50,80,.10) 40%, rgba(60,74,52,.25) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: center 65%;
}
.hero .container{ max-width: 760px; }
.hero-logo{
  width: 104px; height: 104px; margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--creme);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 24px rgba(60,74,52,.35);
}
.hero-logo img{ width: 72px; height: 72px; }
.hero h1{
  font-family: var(--schrift-hand);
  font-size: clamp(44px, 7vw, 72px);
  font-weight: 600;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.hero h1 span{ color: #ffe9b0; }
.hero p.untertitel{
  font-family: var(--schrift-display);
  font-size: clamp(20px, 3vw, 28px);
  margin-top: 10px;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.hero .knopf{
  display:inline-block; margin-top: 34px;
  background: var(--creme); color: var(--wald);
  padding: 14px 30px; border-radius: 40px;
  text-decoration:none; font-weight:700;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.hero .knopf:hover{ background: var(--weiss); }

/* ============================================================
   DREI FALZ-PANELS (Anliegen · Ziele · Angebot)
   Die Farbwechsel greifen die drei Seiten des Folders auf.
   ============================================================ */
.panel-ocker{ background: var(--ocker); color: var(--weiss); }
.panel-ocker .eyebrow{ color:#fff3d8; opacity:1; }
.panel-creme{ background: var(--creme); }
.panel-salbei{ background: var(--salbei); }

.zweispaltig{
  display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start;
}
@media (max-width: 760px){ .zweispaltig{ grid-template-columns: 1fr; } }

/* Bedürfnis-Liste im Anliegen-Panel */
.beduerfnisse{
  list-style:none; margin-top: 18px;
  display:grid; gap: 10px;
}
.beduerfnisse li{
  background: rgba(255,255,255,.16);
  border-left: 4px solid var(--creme);
  padding: 10px 16px; border-radius: 0 8px 8px 0;
  font-weight: 500;
}

/* Ziele: Motto + rundes Foto nebeneinander, darunter Karten */
.ziele-kopf{
  display:grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items:center;
}
@media (max-width: 760px){ .ziele-kopf{ grid-template-columns: 1fr; } }
.rundfoto{
  border-radius: 50%;
  border: 8px solid var(--weiss);
  box-shadow: 0 8px 30px rgba(60,74,52,.18);
  max-width: 320px;
  margin: 0 auto;
}
.ziele{ list-style:none; display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:40px; }
@media (max-width: 860px){ .ziele{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .ziele{ grid-template-columns: 1fr;} }
.ziele li{
  background: var(--weiss);
  border-top: 4px solid var(--ocker);
  border-radius: 10px;
  padding: 20px 20px 22px;
  box-shadow: 0 3px 12px rgba(60,74,52,.06);
}
.ziele li strong{
  display:block; font-family: var(--schrift-display);
  font-size: 20px; margin-bottom: 6px;
}
.motto{
  font-family: var(--schrift-display);
  font-size: clamp(20px, 2.6vw, 26px);
  border-left: 4px solid var(--ocker);
  padding-left: 18px;
}
.motto u{ text-decoration-color: var(--ocker); text-underline-offset: 5px; }

/* Angebot: Einleitung mit Foto, darunter Liste */
.angebot-kopf{
  display:grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items:center;
  margin-bottom: 8px;
}
@media (max-width: 760px){ .angebot-kopf{ grid-template-columns: 1fr; } }
.angebot-foto{
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(60,74,52,.20);
  border: 6px solid var(--weiss);
}
.angebot{ list-style:none; display:grid; grid-template-columns: repeat(2,1fr); gap:12px 28px; margin-top: 26px; }
@media (max-width: 640px){ .angebot{ grid-template-columns: 1fr; } }
.angebot li{
  background: var(--weiss);
  border-radius: 8px;
  padding: 12px 16px 12px 44px;
  position:relative;
  box-shadow: 0 2px 8px rgba(60,74,52,.07);
}
.angebot li::before{
  content:"❧";                       /* Blatt-Symbol */
  position:absolute; left: 16px; top: 11px;
  color: var(--ocker); font-size: 18px;
}
.hinweis{
  margin-top: 30px;
  font-size: 15px; font-style: italic;
  border-top: 1px solid rgba(60,74,52,.25);
  padding-top: 14px; max-width: 560px;
}

/* ============================================================
   ÜBER MICH
   ============================================================ */
.ueber-mich .zweispaltig{ align-items:center; }
.portrait{
  border-radius: 50%;
  max-width: 340px;
  margin: 0 auto;
  border: 8px solid var(--weiss);
  box-shadow: 0 8px 30px rgba(60,74,52,.15);
}
.qualifikationen{ list-style:none; margin-top: 20px; display:grid; gap: 10px; }
.qualifikationen li{
  padding-left: 30px; position:relative; font-weight: 500;
}
.qualifikationen li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color: var(--ocker); font-weight: 700;
}
.zitat{
  margin-top: 26px;
  font-family: var(--schrift-hand);
  font-size: 28px; color: var(--ocker);
}

/* ============================================================
   KONTAKT / FUSSZEILE
   ============================================================ */
.kontakt{
  background: var(--wald); color: var(--creme);
  text-align:center;
}
.kontakt h2{ color: var(--weiss); }
.kontakt-logo{ width:64px; height:64px; margin:0 auto 16px; filter: brightness(0) invert(1) opacity(.85); }
.kontakt-daten{ list-style:none; margin-top: 18px; display:grid; gap: 8px; font-size: 18px; }
.kontakt-daten a{ color: #ffe9b0; text-decoration:none; }
.kontakt-daten a:hover{ text-decoration:underline; }
.site-footer{
  background: var(--wald); color: rgba(247,244,235,.6);
  text-align:center; font-size: 13px;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(247,244,235,.15);
}


/* WordPress integration */
body.admin-bar .site-header{top:32px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{clip:auto!important;width:auto;height:auto;top:8px;left:8px;padding:12px;background:#fff;z-index:99999}
.menu-toggle{display:none;background:transparent;border:1px solid var(--wald);padding:7px 12px;border-radius:4px;color:var(--wald);font:inherit}
.nav-links.menu{list-style:none;margin:0;padding:0}
.nav-links.menu li{margin:0}
.footer-navigation ul{display:flex;justify-content:center;gap:18px;list-style:none;margin:0 0 12px;padding:0}
.footer-navigation a{color:inherit}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
@media(max-width:700px){.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--creme);padding:18px 24px;border-bottom:1px solid #e3ddcd;flex-direction:column;gap:12px}.nav-links.is-open{display:flex}}


/* Milestone 4: performance, accessibility and layout stability */
html{scroll-padding-top:78px}
body{min-width:320px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
main{display:block}
section[id]{scroll-margin-top:78px}
.eyebrow-ocker{color:var(--ocker)}
.angebot-outro{margin-top:26px;max-width:640px}
address{font-style:normal}
img{height:auto}
.rundfoto,.portrait{aspect-ratio:1/1;object-fit:cover}
.angebot-foto{width:100%;height:auto;object-fit:cover}
.marke img{object-fit:contain}
.hero-logo img,.kontakt-logo{object-fit:contain}
.knopf,.nav-links a,.kontakt-daten a{transition:color .2s ease,background-color .2s ease,transform .2s ease}
.knopf:hover,.knopf:focus-visible{transform:translateY(-1px)}
.site-navigation{position:relative}
.menu-toggle{align-items:center;gap:8px;cursor:pointer}
.menu-toggle-icon,.menu-toggle-icon::before,.menu-toggle-icon::after{display:block;width:20px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.menu-toggle-icon{position:relative}
.menu-toggle-icon::before,.menu-toggle-icon::after{content:"";position:absolute;left:0}
.menu-toggle-icon::before{top:-6px}.menu-toggle-icon::after{top:6px}
.menu-toggle[aria-expanded="true"] .menu-toggle-icon{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after{transform:translateY(-6px) rotate(-45deg)}
.site-footer .container{display:grid;gap:10px}
.site-footer p{margin:0}
@media(max-width:700px){
  .menu-toggle{display:flex}
  .nav-links{box-shadow:0 10px 24px rgba(60,74,52,.12)}
  body.menu-open{overflow:hidden}
  section{padding:56px 0}
  .hero{padding:92px 0 112px}
  .wortmarke{font-size:24px}
}
@media(max-width:420px){
  .container{padding-inline:18px}
  .wortmarke{font-size:21px}
  .marke{gap:7px}
  .marke img{width:34px;height:34px}
  .menu-toggle-label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media(prefers-reduced-motion:reduce){.knopf,.nav-links a,.kontakt-daten a,.menu-toggle-icon,.menu-toggle-icon::before,.menu-toggle-icon::after{transition:none}}

/* ============================================================
   MILESTONE 6: RESPONSIVE, INTERACTIONS & MOTION
   ============================================================ */
:root{
  --header-height: 68px;
  --focus-ring: 3px solid #fff3d8;
  --shadow-soft: 0 8px 28px rgba(60,74,52,.12);
  --shadow-lift: 0 14px 34px rgba(60,74,52,.18);
}

/* Better rhythm and resilient typography */
body{overflow-wrap:break-word}
p{max-width:72ch}
h1,h2,h3{line-height:1.12;text-wrap:balance}
.hero p,.kontakt p,.site-footer p{margin-inline:auto}
button,a{-webkit-tap-highlight-color:transparent}

/* Header behavior and active section state */
.site-header{transition:box-shadow .22s ease,background-color .22s ease}
.site-header.is-scrolled{box-shadow:0 5px 22px rgba(60,74,52,.12);background:rgba(247,244,235,.97)}
.nav-links a{position:relative;padding-block:8px}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:2px;
  height:2px;
  background:var(--ocker);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-links a.is-active{color:var(--ocker)}

/* Touch targets and focus visibility */
.menu-toggle,.knopf,.nav-links a,.kontakt-daten a{min-height:44px}
.menu-toggle:focus-visible,.knopf:focus-visible{outline:var(--focus-ring);outline-offset:4px}
.kontakt-daten a{display:inline-flex;align-items:center}

/* Gentle card interaction */
.ziele li,.angebot li,.beduerfnisse li,.angebot-foto,.rundfoto,.portrait{
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
@media (hover:hover) and (pointer:fine){
  .ziele li:hover,.angebot li:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
  .beduerfnisse li:hover{transform:translateX(4px)}
  .angebot-foto:hover,.rundfoto:hover,.portrait:hover{transform:scale(1.015);box-shadow:var(--shadow-lift)}
}

/* Scroll reveal. Content remains visible without JS. */
.has-motion .reveal-on-scroll{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.25,1);
}
.has-motion .reveal-on-scroll.is-visible{opacity:1;transform:none}
.has-motion .reveal-delay-1{transition-delay:.08s}
.has-motion .reveal-delay-2{transition-delay:.16s}
.has-motion .reveal-delay-3{transition-delay:.24s}
.has-motion .hero .container{animation:liebenswert-hero-in .75s ease both}
@keyframes liebenswert-hero-in{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* Large desktop */
@media (min-width:1200px){
  :root{--max-breite:1140px}
  section{padding-block:88px}
  .hero{min-height:min(760px,82vh);display:grid;place-items:center;padding-block:130px}
  .ziele,.angebot{gap:22px}
}

/* Laptop and tablet landscape */
@media (max-width:1024px){
  .site-navigation{padding-inline:22px}
  .nav-links{gap:18px}
  .zweispaltig,.ziele-kopf,.angebot-kopf{gap:34px}
  .hero{padding:108px 0 132px}
}

/* Tablet and mobile navigation */
@media (max-width:820px){
  :root{--header-height:64px}
  .menu-toggle{display:flex}
  .site-navigation{min-height:var(--header-height)}
  .nav-links{
    display:flex;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    position:absolute;
    top:100%;left:0;right:0;
    max-height:calc(100dvh - var(--header-height));
    overflow:auto;
    background:var(--creme);
    padding:14px 24px 22px;
    border-bottom:1px solid #e3ddcd;
    box-shadow:0 12px 26px rgba(60,74,52,.14);
    flex-direction:column;
    gap:2px;
    transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  }
  .nav-links.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
  .nav-links a{display:flex;align-items:center;width:100%;padding:11px 4px;font-size:16px}
  .nav-links a::after{bottom:6px;right:auto;width:38px}
  .ziele{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile */
@media (max-width:760px){
  .zweispaltig,.ziele-kopf,.angebot-kopf{grid-template-columns:1fr;gap:28px}
  .ziele-kopf .rundfoto{order:-1}
  .angebot-kopf .angebot-foto{max-height:440px}
  .ueber-mich .zweispaltig>div:first-child{order:-1}
  .hero{padding:82px 0 104px;background-position:center}
  .hero-logo{width:92px;height:92px}
  .hero-logo img{width:64px;height:64px}
  .hero .knopf{margin-top:28px;width:min(100%,320px)}
  section{padding-block:54px}
  .kontakt-daten{font-size:16px}
}

@media (max-width:560px){
  body{font-size:16px}
  .container{padding-inline:20px}
  h2{margin-bottom:20px}
  .ziele,.angebot{grid-template-columns:1fr;gap:12px}
  .ziele li,.angebot li{padding:18px}
  .angebot li{padding-left:42px}
  .rundfoto,.portrait{width:min(82vw,300px)}
  .angebot-foto{border-width:4px}
  .motto{font-size:20px}
  .zitat{font-size:25px}
  .footer-navigation ul{flex-wrap:wrap;gap:8px 16px}
}

@media (max-width:390px){
  .container{padding-inline:16px}
  .site-navigation{padding-inline:16px}
  .wortmarke{font-size:19px}
  .marke img{width:32px;height:32px}
  .hero h1{font-size:42px}
  .hero p.untertitel{font-size:19px}
  .hero{padding-block:72px 92px}
  .menu-toggle{padding:8px 10px}
}

/* Landscape phones */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:calc(100vh - var(--header-height));padding-block:48px}
  .hero-logo{width:72px;height:72px;margin-bottom:12px}
  .hero-logo img{width:50px;height:50px}
  .hero .knopf{margin-top:20px}
}

/* High contrast and reduced motion preferences */
@media (prefers-contrast:more){
  .site-header,.nav-links{background:var(--creme)}
  .nav-links a,.knopf{font-weight:700}
  .ziele li,.angebot li{border:1px solid var(--wald)}
}
@media (prefers-reduced-motion:reduce){
  .has-motion .reveal-on-scroll{opacity:1;transform:none}
  .has-motion .hero .container{animation:none}
  .site-header,.nav-links,.ziele li,.angebot li,.beduerfnisse li,.angebot-foto,.rundfoto,.portrait{transition:none}
}

/* Legal pages and optional privacy notice */
.legal-content{max-width:820px;margin-inline:auto}
.legal-content h2{font-size:clamp(25px,3vw,32px);margin-top:42px;margin-bottom:14px}
.legal-details{display:grid;grid-template-columns:minmax(170px,220px) 1fr;gap:10px 24px;margin:24px 0 36px}
.legal-details dt{font-weight:700}
.legal-details dd{margin:0}
.legal-admin-warning{padding:16px 18px;margin-bottom:24px;background:var(--ocker-hell);border-left:4px solid var(--ocker);font-weight:700}
.legal-updated{margin-top:42px;font-size:15px;opacity:.72}
.footer-legal-links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 20px;margin-bottom:12px}
.footer-legal-links a,.footer-privacy-reset{color:inherit;text-decoration:underline;text-underline-offset:3px}
.footer-privacy-reset{font:inherit;background:none;border:0;padding:0;cursor:pointer}
.privacy-notice{position:fixed;z-index:1000;left:0;right:0;bottom:0;padding:16px;background:rgba(60,74,52,.18);backdrop-filter:blur(8px)}
.privacy-notice__inner{max-width:var(--max-breite);margin:auto;padding:20px 24px;background:var(--creme);border:1px solid #d8d0bd;border-radius:14px;box-shadow:0 12px 40px rgba(34,43,29,.22);display:flex;align-items:center;justify-content:space-between;gap:24px}
.privacy-notice__inner strong{font-family:var(--schrift-display);font-size:24px}
.privacy-notice__inner p{margin:5px 0 0}
.privacy-notice__accept{flex:0 0 auto;margin:0}
@media(max-width:700px){.legal-details{grid-template-columns:1fr;gap:4px}.legal-details dd{margin-bottom:14px}.privacy-notice__inner{align-items:stretch;flex-direction:column}.privacy-notice__accept{width:100%}}


/* ============================================================
   MILESTONE 9: POLISH, LIGHTBOX & MICRO-INTERACTIONS
   ============================================================ */
::selection{background:var(--ocker-hell);color:var(--wald)}
.knopf{position:relative;isolation:isolate;overflow:hidden;box-shadow:0 5px 18px rgba(60,74,52,.12)}
.knopf::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.3) 45%,transparent 70%);transform:translateX(-130%);transition:transform .55s ease;z-index:-1}
@media(hover:hover) and (pointer:fine){.knopf:hover::before{transform:translateX(130%)}}

.image-zoom{display:block;width:fit-content;max-width:100%;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:zoom-in;position:relative}
.image-zoom--wide{width:100%;border-radius:18px}
.image-zoom::after{content:"+";position:absolute;right:12px;bottom:12px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(247,244,235,.94);color:var(--wald);font-size:25px;line-height:1;box-shadow:0 6px 18px rgba(34,43,29,.2);opacity:0;transform:translateY(5px);transition:opacity .2s ease,transform .2s ease}
.image-zoom:focus-visible{outline:3px solid var(--ocker);outline-offset:6px}
.image-zoom:focus-visible::after,.image-zoom:hover::after{opacity:1;transform:none}
.image-zoom img{pointer-events:none}

.lightbox{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.lightbox[hidden]{display:none!important}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(24,30,21,.88);backdrop-filter:blur(5px);cursor:zoom-out}
.lightbox__dialog{position:relative;z-index:1;max-width:min(1040px,94vw);max-height:92vh;display:grid;place-items:center;gap:10px}
.lightbox__image{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:16px;box-shadow:0 22px 70px rgba(0,0,0,.42)}
.lightbox__caption{max-width:760px;margin:0;color:#fff;text-align:center;font-size:15px}
.lightbox__close{position:absolute;z-index:2;top:-14px;right:-14px;width:46px;height:46px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:var(--creme);color:var(--wald);font-size:30px;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.lightbox__close:hover{transform:scale(1.05)}
.lightbox__close:focus-visible{outline:3px solid var(--ocker);outline-offset:4px}
body.lightbox-open{overflow:hidden}

.back-to-top{position:fixed;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,34px);z-index:900;width:48px;height:48px;border:1px solid rgba(60,74,52,.2);border-radius:50%;background:rgba(247,244,235,.94);color:var(--wald);font-size:24px;cursor:pointer;box-shadow:0 8px 24px rgba(60,74,52,.2);opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,background-color .2s ease}
.back-to-top.is-visible{opacity:1;transform:none}
.back-to-top:hover{background:var(--ocker-hell)}
.back-to-top:focus-visible{outline:3px solid var(--ocker);outline-offset:4px}
.site-footer a{text-decoration-thickness:1px;text-underline-offset:4px}
.site-footer a:hover{text-decoration-thickness:2px}

@media(max-width:600px){
  .image-zoom::after{opacity:1;width:34px;height:34px;font-size:22px}
  .lightbox{padding:14px}
  .lightbox__close{top:8px;right:8px}
  .lightbox__image{max-height:78vh;border-radius:10px}
  .back-to-top{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .knopf::before,.image-zoom::after,.lightbox,.back-to-top,.lightbox__close{transition:none}
}

/* v1.0.1: Empty-content layouts */
.zweispaltig--single{grid-template-columns:minmax(0,1fr);max-width:760px}