:root{
  /* Praxis Wesel: weiße Wände, helle Eiche, Sonnensegel, Magenta-Wandlinie */
  --sand:#f7f2eb; --sand-2:#efe6da; --dune:#e6dccf; --oak:#913374; --oak-deep:#913374;
  --ink:#271f2a; --ink-soft:#665d69; --line:#e6dccf;
  --magenta:#913374; --magenta-soft:#f7ecf3;
  --sans:'Source Sans 3','Myriad Pro',Myriad,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100svh; display:flex; flex-direction:column;
  font:400 1.0625rem/1.55 var(--sans); color:var(--ink);
  background:
    linear-gradient(180deg, #fff 0%, #fff 45%, var(--sand) 78%, var(--sand-2) 100%);
  border-top:4px solid var(--magenta); /* die Magenta-Linie an der Wand */
}
a{color:inherit}
.vx{color:#913374; font-weight:700}

.p-head{padding:clamp(2rem,7vh,4.5rem) 1rem 1.25rem; text-align:center}
.p-head img{display:block; width:min(260px,62vw); height:auto; margin:0 auto}
.p-head h1{font-size:1.0625rem; font-weight:400; margin-top:.8rem; color:var(--ink-soft); letter-spacing:.02em}

.p-grid{
  width:100%; max-width:1120px; margin:auto; padding:1.25rem 16px 3rem;
  display:grid; gap:1rem; grid-template-columns:1fr;
}
@media (min-width:860px){.p-grid{grid-template-columns:1fr 1fr .62fr; gap:1.25rem; align-items:stretch}}

.p-card{
  position:relative; display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:4px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.p-card:hover,.p-card:focus-visible{transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(110,34,87,.4); border-color:var(--magenta); outline:none}
.p-img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--sand-2)}
.p-img img{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; transition:transform .6s ease}
.p-card:hover .p-img img{transform:scale(1.03)}
.p-img::after{ /* feine Magenta-Linie wie an der Wand in Wesel */
  content:""; position:absolute; left:0; bottom:0; height:3px; width:18%;
  background:var(--magenta); transition:width .4s ease;
}
.p-card:hover .p-img::after,.p-card:focus-visible .p-img::after{width:100%}

.p-body{display:flex; flex-direction:column; gap:.9rem; padding:1.4rem 1.5rem 1.4rem; flex:1}
.p-eyebrow{font-size:.9rem; font-weight:600; letter-spacing:.02em; color:var(--ink-soft)}
.p-card h2{font:600 clamp(1.7rem,2.8vw,2.1rem)/1.08 var(--sans); letter-spacing:-.015em}
.p-places{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.p-places li{padding:.25rem .75rem; border-radius:99px; font-size:.95rem; font-weight:600; background:var(--magenta-soft); color:var(--magenta)}
.p-card p{color:var(--ink-soft); font-size:1rem}
.p-go{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:.9rem; border-top:1px solid var(--line); font-weight:600}
.p-go svg{flex:none; width:22px; height:22px; color:var(--magenta); transition:transform .25s ease}
.p-card:hover .p-go svg{transform:translateX(4px)}

.p-card.small{background:#fff}
.p-card.small .p-body{padding:1.2rem 1.25rem}
.p-card.small h2{font-size:1.5rem}
.p-card.small p{font-size:.95rem}

.p-foot{padding:1.5rem 16px 2rem; text-align:center; font-size:.85rem; color:var(--ink-soft)}
.p-foot a{margin:0 .5rem}
.p-credit{margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line)}
.p-credit a{text-decoration:none; color:var(--ink-soft); opacity:.75}
.p-credit a:hover{color:var(--magenta); opacity:1}
:focus-visible{outline:2px solid var(--magenta); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}