/* ==========================================================================
   Tierfriedhof Wien – Basis (universell für ALLE Seiten)
   Enthält: Design-Tokens, Reset, Typografie, Layout, Buttons, Utilities.
   Farben & Schriften sind fix (Styleguide) – nur hier ändern, nie in Komponenten.
   ========================================================================== */

:root{
  /* Farben */
  --violet:#41165D;
  --violet-light:#5B2B7A;
  --cream:#FAF6F1;
  --lavender:#EFE3F2;
  --rose:#D998A0;
  --rose-text:#94505C;       /* Rosé für kleine Schrift auf hellem Grund (AA: 5,9:1 Weiß · 5,5:1 Creme · 4,8:1 Lavendel) */
  --sage:#9CAF88;            /* nur für Flächen/Deko */
  --sage-text:#67745A;       /* Salbei für Text (AA 4.6:1) */
  --plum:#2B2230;
  --ink:#453A4C;
  --muted:#6C6372;
  --menu-bg:#241030;
  --line:rgba(65,22,93,.12);
  --line-strong:rgba(65,22,93,.25);
  --line-ui:rgba(65,22,93,.55); /* Rahmen interaktiver Elemente, ≥3:1 (WCAG 1.4.11) */

  /* Schriften */
  --font-head:'Comfortaa',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Layout */
  --wrap:1180px;
  --wrap-wide:1500px;
  --gutter:40px;
  --gutter-wide:28px;
  --header-h:86px;
  --radius-s:6px;
  --radius-m:22px;
  --radius-l:56px;
  --radius-photo:6px 64px 6px 6px;   /* Signatur: große Fotos – nur die Ecke oben rechts ist stark gerundet */
  --radius-photo-flip:64px 6px 6px 6px; /* gespiegelte Variante (Collage) */
  --radius-img:6px;                  /* kleine Bilder: Blog-Karten, Galerie, Bilder im Text */
  --section-y:120px;

  /* Bewegung */
  --ease:cubic-bezier(.65,0,.35,1);
  --ease-out:cubic-bezier(.2,.7,.2,1);
}
@media(max-width:860px){
  :root{--gutter:24px;--gutter-wide:24px;--header-h:78px;--section-y:64px}
}

/* Reset ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--font-body);
  background:var(--cream);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
ul[role="list"],ol[role="list"]{list-style:none}

/* Typografie ------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;color:var(--plum);line-height:1.2}
h1{font-size:clamp(32px,4vw,54px)}
h2{font-size:clamp(28px,3.4vw,38px)}
h3{font-size:18px}
p{max-width:68ch}

.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--violet);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--rose)}

/* Layout ----------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto;padding-left:var(--gutter-wide);padding-right:var(--gutter-wide);width:100%}

/* Sektionen: IMMER die Klasse .section nutzen (nie ein globales `section{}`),
   und nie `padding:X 0` zusammen mit .wrap kombinieren. */
.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section--lavender{background:var(--lavender)}
.section--dark{background:var(--violet);color:var(--cream)}

.section-head{max-width:560px;margin-bottom:64px}
.section-head p{color:var(--muted);font-size:15px;margin-top:16px}
@media(max-width:860px){.section-head{margin-bottom:40px}}

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-body);font-weight:500;font-size:13.5px;letter-spacing:.3px;line-height:1.2;
  padding:16px 30px;border-radius:100px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:background-color .28s ease,border-color .28s ease,color .28s ease,transform .28s ease;
}
.btn svg{width:15px;height:15px;transition:transform .25s ease}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--violet);color:var(--cream)}
.btn-primary:hover{background:var(--violet-light);transform:translateY(-1px)}
.btn-ghost{background:rgba(250,246,241,.14);color:var(--cream);border-color:rgba(250,246,241,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} /* deckender Rand + leichte Füllung: Kontrast ≥3:1 (WCAG 1.4.11) auf jedem Foto */
.btn-ghost:hover{background:var(--cream);color:var(--violet);border-color:var(--cream)}
.btn-ghost--dark{color:var(--violet);border-color:var(--line-ui)}
.btn-ghost--dark:hover{border-color:var(--violet)}
@media(max-width:860px){.btn{padding:14px 26px}}

.btn-link{
  display:inline-flex;align-items:center;gap:7px;color:var(--violet);
  font-weight:500;font-size:13.5px;text-decoration:none;position:relative;padding-bottom:2px;
}
.btn-link svg{width:14px;height:14px;transition:transform .25s ease}
.btn-link:hover svg{transform:translateX(5px)}
.btn-link.is-ext:hover svg{transform:translate(3px,-3px)} /* externer Link: Pfeil nach oben rechts */
.btn-link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--violet);
  transform:scaleX(.25);transform-origin:left;transition:transform .3s ease;opacity:.45;
}
.btn-link:hover::after{transform:scaleX(1)}

/* Fokus (Tastatur) ------------------------------------------------------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:6px}
.on-dark :focus-visible,.section--dark :focus-visible{outline-color:var(--cream)}

/* Utilities -------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{
  position:fixed;left:16px;top:-80px;z-index:300;background:var(--violet);color:var(--cream);
  padding:12px 20px;border-radius:100px;text-decoration:none;font-weight:500;transition:top .2s ease;
}
.skip-link:focus{top:16px}
.icon{width:1em;height:1em;fill:currentColor;flex-shrink:0}

/* Sanftes Einblenden beim Scrollen (JS setzt .in) ------------------------- */
.js .rv{opacity:0;translate:0 26px;transition:opacity .9s ease,translate .9s var(--ease-out),transform .35s var(--ease-out)}
.js .rv.in{opacity:1;translate:none}

/* Fotos fahren sanft ein (data-reveal="left|right|up"; JS setzt .in-view) */
.js [data-reveal]{opacity:0;transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.js [data-reveal="right"]{transform:translateX(70px)}
.js [data-reveal="left"]{transform:translateX(-70px)}
.js [data-reveal="up"]{transform:translateY(48px)}
.js [data-reveal].in-view{opacity:1;transform:none}

/* Fließtext in Unterseiten / Standard-Inhalte (universell) ---------------- */
.entry-content > * + *{margin-top:1.1em}
.entry-content h2{margin-top:2em}
.entry-content h3{margin-top:1.6em}
.entry-content p,.entry-content li{color:var(--ink);font-size:16px}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content a{color:var(--violet);text-underline-offset:3px}
.entry-content a:hover{color:var(--violet-light)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;translate:none}
  .js [data-reveal]{opacity:1;transform:none}
}

/* Unterseiten ------------------------------------------------------------- */
.wrap--narrow{max-width:860px}
.page-title{font-size:clamp(30px,3.6vw,46px);margin-bottom:28px}
.entry + .entry{margin-top:40px}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
h1 em,h2 em,h3 em{font-style:normal}
@media(max-width:860px){:root{--radius-photo:6px 40px 6px 6px;--radius-photo-flip:40px 6px 6px 6px}}