/* ===== Gemeinsame Basis: Struktur, feste Kopfzeile, Animationen ===== */
:root{--ink:#493889;--aub:#59439b;--light:#f3f1f8;--line:#dcd7eb;--muted:#605875;--header-bg:#f3f1f8;
  --font:"Avenir Next","Century Gothic","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-anchor:none}
body{margin:0;background:var(--light);color:var(--ink);font-family:var(--font);font-weight:400;letter-spacing:.005em;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
section{scroll-margin-top:40px}
#app{padding-top:var(--header-h,200px)}

/* --- Kopfzeile: fest, Platz im Seitenfluss bleibt konstant --- */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--header-bg);
  transition:background-color .35s ease,box-shadow .35s ease}
header.no-anim,header.no-anim *{transition:none!important}
.nav{max-width:1200px;margin:auto;padding:14px 34px 12px;display:flex;align-items:center;justify-content:space-between;gap:36px;transition:padding .35s ease}
.brand{display:flex;align-items:center;flex:0 0 auto;min-width:0}
.brand img{width:245px;height:auto;display:block;transition:width .35s ease}
.links{display:flex;align-items:center;justify-content:flex-end;flex:1;gap:clamp(18px,2.7vw,37px);flex-wrap:wrap}
.links a{font-size:18px;font-weight:500;letter-spacing:.01em;line-height:1.35;color:var(--ink);text-decoration:none;white-space:nowrap;transition:font-size .35s ease,color .25s ease,background-color .25s ease}
.links a:hover,.links a:focus-visible{text-decoration:underline;text-underline-offset:6px}
header.is-scrolled .nav{padding-top:7px;padding-bottom:7px}
header.is-scrolled .brand img{width:120px}
header.is-scrolled .links a{font-size:16px}

/* --- Startbereich --- */
.hero{position:relative;min-height:min(80vh,640px);display:flex;align-items:center;overflow:hidden;background:#777384}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-content{position:relative;z-index:2;width:min(1200px,100%);margin:auto;padding:75px 36px}
.hero-copy{max-width:555px}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:var(--aub)}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-weight:300;letter-spacing:.015em}
h1{font-size:clamp(36px,4.3vw,63px);line-height:1.12;margin:18px 0 24px}
h2{font-size:clamp(28px,3vw,41px);line-height:1.2}
h3{font-size:21px}
.lead{font-size:19px;max-width:510px}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:30px}
.cta{background:var(--aub);color:#fff!important;text-decoration:none;display:inline-block;padding:13px 24px;border-radius:5px;font-weight:500;letter-spacing:.01em;transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease}
.cta:hover{background:#46347c}
.outline{border:1px solid var(--ink);padding:11px 23px;text-decoration:none;border-radius:4px;font-weight:600;background:rgba(255,255,255,.6);transition:background-color .25s ease}
.outline:hover{background:rgba(255,255,255,.9)}

/* --- Inhalt --- */
main section{padding:78px 32px}
.wrap{max-width:1160px;margin:auto}
.section-intro{max-width:750px;margin-bottom:32px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);padding:30px;min-height:200px}
.card .num{font-size:12px;letter-spacing:.12em;color:var(--aub)}
.card p{color:var(--muted)}
.white{background:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.portrait{width:100%;max-height:570px;object-fit:contain;display:block;background:#eee9ed}
.line{height:1px;background:var(--line);margin:22px 0}
.contact{background:#e6dfe5}
.contact-items{display:flex;gap:20px;flex-wrap:wrap}
.contact-items a{font-size:18px;font-weight:600}
.note{font-size:13px;color:var(--muted)}
footer{background:#3e2c3c;color:#fff;padding:26px 32px;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.noscript{max-width:760px;margin:60px auto;padding:0 22px}

/* --- Kacheln Hund / Katze / Pferd: Linie zieht sich auf, leichtes Anheben --- */
.cards .card{position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease,border-color .4s ease,background-color .4s ease}
.cards .card:before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--aub),#a898dc);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,.61,.36,1) calc(var(--d,0ms) + .45s)}
.cards .card.is-visible:before{transform:scaleX(1)}
.cards .card:hover{transform:translateY(-7px);box-shadow:0 18px 36px -14px rgba(73,56,137,.35);border-color:#c9bfe6}
.cards .card .num{display:inline-block;transition:letter-spacing .5s ease,transform .5s ease}
.cards .card:hover .num{letter-spacing:.2em}
.cards .card h3{transition:transform .4s ease}
.cards .card:hover h3{transform:translateX(4px)}

/* --- Einblenden beim Scrollen (nur mit JavaScript, nicht bei "Bewegung reduzieren") --- */
.js-reveal [data-reveal]:not(.is-visible){opacity:0}
.js-reveal [data-reveal].is-visible{animation:rv-up .85s cubic-bezier(.22,.61,.36,1) var(--d,0ms) backwards}
.js-reveal [data-reveal="fade"].is-visible{animation-name:rv-fade}
.js-reveal [data-reveal="card"].is-visible{animation-name:rv-card;animation-duration:.95s}
@keyframes rv-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes rv-fade{from{opacity:0}to{opacity:1}}
@keyframes rv-card{from{opacity:0;transform:translateY(34px) scale(.965)}to{opacity:1;transform:none}}

/* --- Responsive --- */
@media(max-width:950px){
  .nav{gap:20px;padding:12px 22px}
  .brand img{width:210px}
  .links{gap:14px 22px}
  .links a{font-size:16px}
  header.is-scrolled .brand img{width:96px}
  header.is-scrolled .links a{font-size:15px}
}
@media(max-width:850px){
  .cards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:25px}
  main section{padding:55px 22px}
}
@media(max-width:720px){
  .nav{flex-direction:column;gap:10px;padding:14px 18px 17px;text-align:center}
  .brand{justify-content:center}
  .brand img{width:215px}
  .links{width:100%;justify-content:center;gap:10px 24px}
  header.is-scrolled .nav{flex-direction:row;gap:12px;padding:6px 14px;text-align:left}
  header.is-scrolled .brand img{width:78px}
  header.is-scrolled .links{width:auto;flex:1;justify-content:flex-end;gap:2px 14px}
  header.is-scrolled .links a{font-size:14px}
}
@media(max-width:520px){
  .hero{min-height:620px}
  .hero-content{padding:42px 22px;align-self:flex-start}
  .lead{font-size:17px}
  .card{min-height:0}
}
@media(max-width:380px){
  .links{gap:10px 15px}
  .links a{font-size:15px}
  header.is-scrolled .links{gap:2px 10px}
  header.is-scrolled .links a{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal [data-reveal]:not(.is-visible){opacity:1}
  .js-reveal [data-reveal].is-visible{animation:none}
  header,.nav,.brand img,.links a,.cards .card,.cards .card:before{transition:none}
  .cards .card:before{transform:scaleX(1)}
}

/* --- Fußzeile mit Rechts-Links --- */
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{text-decoration:none;opacity:.92;border-bottom:1px solid transparent;transition:border-color .2s,opacity .2s}
.footer-links a:hover,.footer-links a:focus-visible{opacity:1;border-bottom-color:currentColor}

/* --- Impressum / Datenschutz --- */
.legal-section{padding:56px 32px 90px}
.legal{max-width:820px}
.legal h1{font-size:clamp(32px,4vw,48px);line-height:1.15;margin:12px 0 28px}
.legal h2{font-size:clamp(22px,2.4vw,28px);margin:38px 0 10px}
.legal h3{font-size:19px;font-weight:500;margin:26px 0 8px}
.legal p{margin-bottom:14px;max-width:70ch}
.legal-back{margin-top:44px}
.legal-back a{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.ph{background:#fff3b8;color:#5b4700;padding:0 4px;border-radius:3px;outline:1px dashed #c9a400}
@media(max-width:850px){.legal-section{padding:40px 22px 70px}}