/* seelenrudel.de - ein Ort für Aramis, Sudo und Pan */
:root{
  --bg:#0a0a0b;
  --bg-soft:#121214;
  --ink:#ece8e2;
  --muted:#9a948b;
  --line:#26252a;
  --accent:#c8a96b;        /* warmes Gold, wie das Licht im Bild */
  --aramis:#8a5a3c;        /* braun */
  --sudo:#3a3a3e;          /* fast schwarz, leicht aufgehellt */
  --pan:#1a1a1d;           /* pechrabenschwarz */
  --linus:#6b6b70;         /* schwarz-weiß, silbrig angedeutet */
  --aconite:#9a7b4a;       /* getigert, warmes tiger-braun */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Georgia","Times New Roman",serif;
  line-height:1.75; font-size:1.08rem;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--ink);}

/* Navigation */
.nav{
  display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap;
  padding:1.4rem 1rem; font-size:.95rem; letter-spacing:.04em;
  border-bottom:1px solid var(--line);
  background:rgba(10,10,11,.85); backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:10;
}
.nav a{color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; font-family:-apple-system,system-ui,sans-serif;}
.nav a:hover,.nav a.active{color:var(--accent);}

/* Hero */
.hero{
  position:relative; min-height:62vh; display:flex; align-items:flex-end;
  justify-content:center; text-align:center; overflow:hidden;
  background:#000;
}
/* Auf breiten Bildschirmen das 16:9-Verhältnis wahren, damit die Köpfe nicht beschnitten werden */
@media(min-aspect-ratio:16/9){
  .hero{ min-height:0; aspect-ratio:16/9; }
}
.hero img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; opacity:.85;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.1) 40%, rgba(10,10,11,.95) 100%);
}
.hero-inner{position:relative; z-index:2; padding:0 1.2rem 4rem;}
.hero h1{
  font-size:clamp(2.4rem,6vw,4.2rem); margin:0 0 .4rem; font-weight:400;
  letter-spacing:.02em; text-shadow:0 2px 30px rgba(0,0,0,.7);
}
.hero .sub{color:var(--muted); font-style:italic; font-size:1.15rem; margin:0;}

/* Hero-Platzhalter solange kein Bild da ist */
.hero-placeholder{
  background:
    radial-gradient(800px 400px at 50% 20%, rgba(200,169,107,.18), transparent 60%),
    linear-gradient(180deg,#15110d,#0a0a0b);
}

/* Drei-Namen-Block auf der Startseite */
.rudel{
  max-width:1000px; margin:0 auto; padding:3rem 1.4rem 4rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
.rudel a.card{
  display:block; padding:2rem 1.4rem; text-align:center;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:14px;
  transition:transform .25s, border-color .25s, background .25s;
}
.rudel a.card:hover{transform:translateY(-4px); border-color:var(--accent); background:#16161a;}
.rudel .dot{
  width:64px; height:64px; margin:0 auto 1rem; display:block;
  -webkit-mask:url(/img/paw.svg) center / contain no-repeat;
          mask:url(/img/paw.svg) center / contain no-repeat;
  transition:transform .25s ease;
}
.rudel a.card:hover .dot{transform:translateY(-2px) rotate(-6deg);}
.rudel .dot.aramis{background:var(--aramis);}
.rudel .dot.sudo{background:#5a5a60;}            /* etwas heller, damit die Pfote sichtbar ist */
.rudel .dot.pan{background:#3a3a40;}             /* pechschwarz angedeutet, aber sichtbar */
/* Katzen: Katzen-Icon statt Pfote — volle mask-Definition (iOS-Safari
   rendert eine bloße Überschreibung von mask-image manchmal nicht neu) */
.rudel .dot.cat{
  -webkit-mask:url(/img/cat.svg) center / contain no-repeat;
          mask:url(/img/cat.svg) center / contain no-repeat;
}
.rudel .dot.aconite{background:var(--aconite);}
.rudel .dot.linus{background:var(--linus);}
.rudel h2{margin:.2rem 0 .3rem; font-weight:400; font-size:1.5rem; color:var(--ink);}
.rudel p{margin:0; color:var(--muted); font-size:.95rem; font-style:italic;}
@media(max-width:720px){ .rudel{grid-template-columns:1fr;} }

/* Inhalts-Seiten (Aramis/Sudo/Pan/Impressum) */
.page{max-width:720px; margin:0 auto; padding:3.5rem 1.4rem 5rem;}
.page .eyebrow{
  text-transform:uppercase; letter-spacing:.18em; font-size:.75rem;
  color:var(--muted); font-family:-apple-system,system-ui,sans-serif; margin-bottom:.6rem;
}
.page h1{font-size:clamp(2rem,5vw,3rem); font-weight:400; margin:0 0 1.5rem; letter-spacing:.02em;}
.page h1 .name-dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.5rem;vertical-align:baseline;}
.lifespan{
  margin:-.6rem 0 1.6rem; color:var(--muted); font-family:-apple-system,system-ui,sans-serif;
  font-size:.95rem; letter-spacing:.03em; display:flex; flex-direction:column; gap:.15rem;
}
.lifespan .dates{font-size:1.05rem; color:#cfc9c0;}
.lifespan .kennel{font-style:italic; font-size:.88rem; opacity:.85;}
.lifespan .rosengarten{
  display:block; margin-top:.4rem; font-style:italic; font-size:.9rem;
  color:var(--accent); opacity:.9; letter-spacing:.02em;
}
.passion{
  display:inline-block; margin:0 0 1.6rem; padding:.35rem .9rem;
  border:1px solid var(--line); border-radius:999px;
  font-family:-apple-system,system-ui,sans-serif; font-size:.82rem; letter-spacing:.05em;
  color:var(--accent); background:rgba(200,169,107,.06);
}
.traits{
  display:flex; flex-wrap:wrap; gap:.55rem; margin:0 0 2.2rem; padding:0; list-style:none;
}
.traits li{
  padding:.32rem .85rem; border:1px solid var(--line); border-radius:999px;
  font-family:-apple-system,system-ui,sans-serif; font-size:.8rem; color:#cfc9c0;
  background:var(--bg-soft);
}
.traits li span{color:var(--muted); font-style:italic;}
.page p{color:#cfc9c0; margin:0 0 1.4rem;}
.page .lead{font-size:1.2rem; color:var(--ink); font-style:italic;}
.page figure{margin:2.5rem 0;}
.page figure img{width:100%; border-radius:12px; border:1px solid var(--line); display:block;}
.page figcaption{color:var(--muted); font-size:.9rem; font-style:italic; text-align:center; margin-top:.7rem;}

/* Galerie auf den Hundeseiten */
.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:2.5rem 0;
}
@media(max-width:760px){ .gallery{grid-template-columns:repeat(2,1fr);} }
.gallery a{display:block; line-height:0; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#000;}
.gallery img{
  /* contain statt cover: ganzes Bild sichtbar (hoch ODER quer), Rest schwarz gefüllt */
  width:100%; height:100%; object-fit:contain; aspect-ratio:1/1; display:block; background:#000;
  transition:transform .4s ease, opacity .3s; opacity:.94;
}
.gallery a:hover img{transform:scale(1.04); opacity:1;}
@media(max-width:560px){ .gallery{grid-template-columns:1fr;} }

/* Lightbox (Klick aufs Bild = groß) */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.92);
  display:none; align-items:center; justify-content:center; padding:2rem; cursor:zoom-out;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:90vh; border-radius:10px; box-shadow:0 10px 60px rgba(0,0,0,.6);}
.lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff; font-size:1.8rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.lightbox .lb-nav:hover{background:rgba(200,169,107,.7); color:#15110d;}
.lightbox .lb-prev{left:2vw;}
.lightbox .lb-next{right:2vw;}
.lightbox .lb-close{
  position:absolute; top:2vh; right:2vw; width:46px; height:46px; border:none; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; font-size:1.5rem; cursor:pointer;
}
.lightbox .lb-close:hover{background:rgba(255,255,255,.25);}
.lightbox .lb-count{
  position:absolute; bottom:2.5vh; left:50%; transform:translateX(-50%);
  color:var(--muted); font-family:-apple-system,system-ui,sans-serif; font-size:.85rem; letter-spacing:.1em;
}
@media(max-width:560px){ .lightbox .lb-nav{width:46px;height:46px;font-size:1.4rem;} }

/* Bild-Platzhalter für die Hundeseiten */
.img-placeholder{
  width:100%; aspect-ratio:3/2; border-radius:12px; border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  font-family:-apple-system,system-ui,sans-serif; font-size:.9rem; font-style:normal;
  background:repeating-linear-gradient(135deg,#101012 0 18px,#0c0c0e 18px 36px);
}

/* Footer */
footer{
  border-top:1px solid var(--line); padding:2.5rem 1.4rem; text-align:center;
  color:var(--muted); font-size:.85rem; font-family:-apple-system,system-ui,sans-serif;
}
footer a{color:var(--muted);}
footer a:hover{color:var(--accent);}

/* 2026-07-15: Video-Hero auf sudos Seite (autoplay, stumm, loop) */
.hero-video{ position:relative; z-index:1; width:100%; aspect-ratio:16/9; max-height:70vh; overflow:hidden; background:#000; }
/* contain: ganzes Video sichtbar, oben nicht von der sticky-Nav abgeschnitten */
.hero-video video{ width:100%; height:100%; object-fit:contain; display:block; opacity:.94; background:#000; }
@media(max-width:720px){ .hero-video{ aspect-ratio:4/3; } }

/* 2026-07-15: Rosengarten-Link (Tierbestattung) unterstrichen */
.rosengarten a{ text-decoration:underline; text-underline-offset:2px; }