:root{
  --bg: #fbfaf7;
  --ink: #1b1b1b;
  --muted: #6f6a63;
  --gold: #9a6b2f;
  --card: rgba(255,255,255,0.86);
  --shadow: 0 18px 45px rgba(0,0,0,0.14);
  --radius: 22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
}

h1,h2,h3{
  margin:0 0 .4rem 0;
  font-family: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing: .02em;
}
p{line-height:1.6; color:var(--muted); margin:.4rem 0 0}

a{color:inherit; text-decoration:none}
.container{width:min(1100px, 92vw); margin:0 auto}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,247,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.brand{
  display:flex; align-items:baseline; gap:10px;
}
.brand .mark{
  font-weight:700;
  letter-spacing:.12em;
  color:var(--gold);
}
.brand .name{
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.nav{
  display:flex; gap:18px; align-items:center;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav a{padding:10px 10px; border-radius:999px}
.nav a:hover{background:rgba(154,107,47,.10); color:var(--gold)}
.nav .cta{
  border:1px solid rgba(154,107,47,.45);
}
.nav .cta:hover{background:rgba(154,107,47,.14)}

.hero{
  position:relative;
  min-height: 32vh;
  display:grid;
  align-items:end;
  padding: 42px 0 70px;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 45%, rgba(251,250,247,1) 100%),
    url("assets/img/hero.jpg") center/cover no-repeat;
  transform:scale(1.02);
}
.hero .content{
  position:relative;
  padding: 26px 24px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  width:min(760px, 92vw);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
/* nur die 2 großen Bilder im Info-Bereich kleiner machen */
.hero-left,
.hero-right{
  max-width: 320px;  /* z.B. 320–420px nach Geschmack */
}

.hero-right{
  margin-left: auto; /* bleibt rechtsbündig */
}
.hero .kicker{
  font-size: 14px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
}
.hero h1{
  font-size: clamp(44px, 7vw, 78px);
  line-height: .92;
  letter-spacing: .08em;
  color: white;
}
.hero h1 .sub{
  display:block;
  font-size: clamp(42px, 7vw, 84px);
  font-weight: 300;
  letter-spacing: .12em;
}
.hero .tag{
  margin-top: 14px;
  color: rgba(255,255,255,.90);
  max-width: 56ch;
}
.hero .down{
  display:inline-flex; align-items:center; gap:10px;
  margin-top: 16px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero .down .chev{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.40);
}

.section{
  padding: 34px 0;
}

.mood{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  align-items:center;
}
.mood-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:end;
}
.photo{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background:#eee;
}
.photo img{
  width:100%; height:100%; display:block;
  object-fit:cover;
}
.photo.tall{aspect-ratio: 4/5}
.photo.middle{aspect-ratio: 3/5}
.photo.square{aspect-ratio: 1/1}
.photo.wide{aspect-ratio: 16/10}
.photo,
.card{
  border-radius: var(--radius);
  overflow: hidden;
}
/* nur dieses eine Bild kleiner machen */
.photo.scale-down{
  transform: scale(0.8);   /* 70% = 30% kleiner */
  transform-origin: top center;
}
.textcard{
  background: var(--card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: 0 16px 45px rgba(0,0,0,.10);
}
.textcard h2{
  font-size: 34px;
  color: var(--ink);
}
.textcard .accent{
  color: var(--gold);
  font-style: italic;
}
.textcard .mini{
  font-size: 13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--muted);
}
.textcard .btn{
  display:inline-block;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  border:1px solid rgba(154,107,47,.55);
  color: var(--gold);
  font-size: 13px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.textcard .btn:hover{background:rgba(154,107,47,.10)}

/* info layout (left photo with overlay + centered text + right photo) */
.info-hero{
  position:relative;
  min-height: 420px;
}
.info-hero .photo{position:absolute}
.info-hero .photo.tall{left:0; top:0; width: 100%; height: 100%}
.info-hero .photo.overlay{
  position: absolute;

  /* 1. an die rechte untere Ecke des Hundebildes */
  right: 0;
  bottom: 0;

  /* 2. um halbe eigene Größe zurückziehen → Mittelpunkt sitzt exakt auf der Ecke */
  transform: translate(15%, 15%);

  /* Größe */
  width: 42%;
  aspect-ratio: 1 / 1;

  /* Optik */
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  background: #fff;
}
.info-hero .photo.overlay.top{
  position: absolute;

  /* 1. an die rechte untere Ecke des Hundebildes */
  right: 0;
  top: 0;

  /* 2. um halbe eigene Größe zurückziehen → Mittelpunkt sitzt exakt auf der Ecke */
  transform: translate(30%, -15%);

  /* Größe */
  width: 42%;
  aspect-ratio: 1 / 1;

  /* Optik */
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  background: #fff;
}
.info-right{height: 420px}

.cards{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background:#eee;
  aspect-ratio: 4/5;
}
.card img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(1.02);
  transform: scale(1.02);
}
.card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 40%, rgba(0,0,0,.42) 100%);
}
.card .label{
  position:absolute; left:16px; right:16px; bottom:14px;
  z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  color:white;
}
.card .label span{
  font-size: 14px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.card:hover{transform: translateY(-2px)}
.card{transition: transform .18s ease}

.about{
  position:relative;
  padding: 84px 0;
  overflow:hidden;
}
.about::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(251,250,247,.94) 0%, rgba(251,250,247,.62) 38%, rgba(251,250,247,.96) 100%),
    url("assets/img/hero2.jpg") center/cover no-repeat;
  filter: saturate(.92);
}
.about .inner{
  position:relative;
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 22px;
  align-items:center;
}
.stack{
  position:relative;
  min-height: 420px;
}
.stack .photo{position:absolute}
.stack .a{left:0; top: 30px; width: 62%; aspect-ratio: 1/1}
.stack .b{right:0; top: 0; width: 62%; aspect-ratio: 4/5}
.stack .c{right: 6%; bottom: 0; width: 52%; aspect-ratio: 1/1}

.footer{
  padding: 34px 0 46px;
  border-top: 1px solid rgba(0,0,0,.06);
  color: var(--muted);
  font-size: 14px;
}
.footer a{color: var(--gold)}
.footer .cols{
  display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between;
}

/* responsive */
@media (max-width: 900px){
  .mood{grid-template-columns:1fr}
  .mood-grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .about .inner{grid-template-columns:1fr}
  .stack{min-height: 520px}
}
@media (max-width: 520px){
  .nav{gap:6px}
  .nav a{padding:9px 8px; font-size:12px}
  .hero .content{padding:22px 18px}
  .mood-grid{grid-template-columns:1fr}
  .stack{min-height: 520px}
  .stack .a,.stack .b,.stack .c{position:relative; width:100%; left:auto; right:auto; top:auto; bottom:auto; margin-bottom:14px}
}

/* contact form */
.contact-form{
  margin-top: 18px;
}
.contact-form label{
  display:block;
  font-size: 13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--muted);
  margin: 10px 0 6px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  font: inherit;
  color: var(--ink);
}
.contact-form textarea{min-height: 130px; resize: vertical}
.contact-form .actions{
  margin-top: 12px;
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap:wrap;
}

/* gallery pages */
.page-hero{
  padding: 34px 0 10px;
}
.backlink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top: 12px;
  color: var(--gold);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size: 13px;
}
.gallery-grid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-grid a{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background:#eee;
  aspect-ratio: 4/5;
  display:block;
}
/* Galerie: gleiche Optik auch ohne <a> */
.gallery-grid > *{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background:#eee;
  aspect-ratio: 4/5;
  display:block;
}

.gallery-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width: 900px){
  .gallery-grid{grid-template-columns:1fr}
  .info-hero{min-height:520px}
  .info-right{height:auto}
  .mood{grid-template-columns:1fr}
  .info-hero .photo.tall{position:relative; height:520px}
  .info-hero .photo.overlay{width: 62%}
}

/* Small phones: Topbar zentrieren, damit es symmetrisch wirkt */
@media (max-width: 430px){
  .topbar-inner{
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }

  .brand{
    justify-content: center;
    text-align: center;
  }

  .brand .name{
    font-size: 12px;
    letter-spacing: .16em;
  }

  .nav{
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .nav a{
    padding: 8px 10px;
  }
}

/* Small phones: Topbar zentrieren, damit es symmetrisch wirkt */
/* Small phones: Info-Sektion symmetrisch */
@media (max-width: 430px){

  .info-hero{
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  /* große Bilder zentrieren & begrenzen */
  .info-hero .photo.tall,
  .info-right{
    position: relative;
    width: 100%;
    max-width: 320px;
    height: auto;
  }

  /* Textcard exakt mittig */
  .info-hero .textcard{
    order: 2;
    max-width: 340px;
    text-align: center;
  }

  /* Overlay (Kussbild) beruhigen */
  .info-hero .photo.overlay{
    width: 58%;
    right: 50%;
    bottom: 0;
    transform: translate(50%, 12%);
  }
}