/* Christen in der Osteopathie – Seitenlayout (ehemals Entwurf 2) */
:root{--bg:#fff;--t:#222;--a:#7b0246;--w:760px;--nb:#7b0246;--nt:#fff}
body{display:grid;grid-template-columns:270px minmax(0,1fr)}

/* Startbild am Seitenende */
.startbild{display:block;margin:2.5rem auto 0;max-width:min(100%,360px);height:auto}
/* ---------- Seitenleiste ---------- */
/* Der weiche Lichtschein folgt auf dem Desktop leicht der Maus (--gx/--gy per Script in index.php) */
.side{background:radial-gradient(circle at var(--gx,30%) var(--gy,12%),#ffffff1f,#0000 55%),linear-gradient(170deg,#7b0246,#7b0246);color:#fff;padding:2rem 1.4rem;position:sticky;top:0;height:100vh;box-shadow:4px 0 24px #0003}
.side h1{font-size:1.5rem}
.side p{font-size:.9rem;opacity:.8;margin:0 0 2rem}
.side:after{content:"„Ich fand keinen Fehler in Gottes Werk.“ – A. T. Still";display:block;margin-top:2rem;font-style:italic;font-size:.85rem;opacity:.75;border-top:1px solid #fff3;padding-top:1rem}
.nav{display:flex;flex-direction:column;position:relative}
.nav a{padding:.6rem .8rem;border-radius:6px;border-left:3px solid transparent}
.nav a:hover{background:#ffffff14;padding-left:1.1rem}
.nav a.on{background:#ffffff26;border-color:#26195c}

/* Gleitende Markierung: wandert beim Wechsel zum aktiven Menüpunkt (Position per Script) */
.nav .mark{display:none}
.nav.has-mark .mark{display:block;position:absolute;left:0;top:0;width:3px;height:0;background:#26195c;border-radius:3px;pointer-events:none}
.nav.has-mark.anim .mark{transition:top .38s cubic-bezier(.3,.7,.2,1),height .38s cubic-bezier(.3,.7,.2,1)}
.nav.has-mark a.on{border-color:transparent}

/* Bild am rechten Bildschirmrand (ab 1400 px Breite): bleibt beim Scrollen stehen, unten mit der Grundfarbe aufgefüllt */
@media(min-width:1400px){
body>div{padding-right:270px}
body:after{content:"";position:fixed;top:0;right:0;width:270px;height:100vh;pointer-events:none;background:radial-gradient(circle at calc(100% - var(--gx,30%)) var(--gy,12%),#ffffff1f,#0000 55%),linear-gradient(190deg,#7b0246,#7b0246);box-shadow:-4px 0 24px #0003}
}

/* ---------- Überschriften, Karten ---------- */
h2:after{content:"";display:block;width:60px;height:4px;background:var(--a);margin-top:.4rem;border-radius:4px;animation:grow .7s}
@keyframes grow{from{width:0}}
.card{border-left:4px solid var(--a)}

/* ---------- Veranstaltungskarten: Datums-Badge, Marke, vergangene Termine ---------- */
.cards .card{display:flow-root}
/* Badge schwebt rechts: nur die ersten Zeilen (Datum, Titel) laufen daneben, der Rest nutzt die volle Breite */
.dbadge{float:right;margin:0 0 .4rem .8rem;min-width:3.1rem;border-radius:7px;overflow:hidden;background:#fff;border:1px solid #0002;box-shadow:0 2px 6px #0002;text-align:center;line-height:1;transition:transform .25s}
.dbadge .dm{display:block;background:var(--a);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.24rem .5rem}
.dbadge .dd{display:block;font-size:.95rem;font-weight:700;color:var(--t);padding:.3rem .5rem .32rem;white-space:nowrap}
a.card:hover .dbadge{transform:translateY(-2px)}
.tag{display:block;width:max-content;margin-bottom:.35rem;padding:.12rem .6rem;border-radius:20px;background:#e8c27a;color:#3e0b16;font-size:.68rem;font-weight:700;letter-spacing:.05em;line-height:1.5;text-transform:uppercase}
.card.past{opacity:.6}
.card.past:hover{opacity:1}
.card.past .tag{background:#8882;color:inherit}
.card.past .dbadge .dm{background:#777}

/* „In den Kalender eintragen“ neben dem Anmelde-Button */
.calbtn{display:inline-flex;align-items:center;margin-left:.5rem;padding:.7rem 1.2rem;border:1px solid var(--a);border-radius:var(--r,8px);color:var(--a);text-decoration:none;transition:.2s}
.calbtn:hover{background:var(--a);color:#fff}

/* ---------- Therapeutenliste: Kopieren-Button ---------- */
.cp{position:relative;display:inline-flex;vertical-align:middle;margin-left:.15rem;padding:.15rem .3rem;min-height:0;background:transparent;color:inherit;border-radius:5px;opacity:.55}
.cp:hover{opacity:1;background:#8881;filter:none;transform:none}
.cp svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp.ok:after{content:"Kopiert";position:absolute;bottom:125%;left:50%;transform:translateX(-50%);background:#222;color:#fff;font-size:.75rem;line-height:1;padding:.3rem .5rem;border-radius:5px;white-space:nowrap;pointer-events:none}

/* ---------- Rückmeldung nach dem Absenden ---------- */
.msg{min-height:1.5em}
.msg.ok{display:flex;align-items:center;gap:.8rem;font-weight:600;color:var(--a)}
.msg.err{color:#b3261e}
.chk{width:44px;height:44px;flex:none;fill:none;stroke:var(--a);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chk circle{stroke-dasharray:145;stroke-dashoffset:145;animation:draw .6s ease forwards}
.chk path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s .45s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Cloudflare Turnstile (Spam-Schutz), nur sichtbar wenn im Admin Schlüssel eingetragen sind */
.tsbox{margin:.8rem 0;min-height:65px}

/* ---------- Leere Zustände (keine Veranstaltung / keine Treffer) ---------- */
.empty{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.4rem;border:1px dashed var(--l,#0003);border-radius:var(--r,8px);background:#8881}
.empty p{margin:0}
.empty svg{width:46px;height:46px;flex:none;fill:none;stroke:var(--a);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}

@media(max-width:760px){
  body{display:block}
  .side{position:static;height:auto}
  .side:after{display:none}
  .nav{flex-direction:row;flex-wrap:wrap}
  .calbtn{min-height:50px;margin:.4rem 0 0 .5rem}
  .cp{padding:.45rem .55rem}
}
/* Bei „Bewegung reduzieren“ den Haken trotzdem vollständig zeigen */
@media(prefers-reduced-motion:reduce){.chk circle,.chk path{stroke-dashoffset:0!important}}

/* ---------- Druckansicht (z. B. Veranstaltung als Flyer ausdrucken) ---------- */
@media print{
  body{display:block;font-size:11.5pt;color:#000}
  .side,.burger,footer,.reg,.calbtn,.anm,.cp,.kf,.tsbox,#mapbtn,#mapnote,#tmap,#tq,#tcount,dialog{display:none!important}
  .wrap{max-width:none;padding:0}
  .wrap:before{content:"Christen in der Osteopathie";display:block;margin-bottom:1.2rem;padding-bottom:.4rem;border-bottom:2px solid var(--a);color:var(--a);font-size:15pt;font-weight:700}
  main section,.ev,.cards>*{animation:none!important}
  .ev>p:first-child{display:none}
  .card,.people figure,.ev h3{break-inside:avoid}
  .card{box-shadow:none}
  a{color:inherit;text-decoration:none}
}