/* ==========================================================================
   Caro's ECHTE LANDEIER
   Palette + type recovered from the original Divi build.
   ========================================================================== */

/* ---------- Fonts (self-hosted: no Google Fonts request, no GDPR issue) --- */
@font-face{font-family:'Amatic SC';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/amatic-sc-400.woff2') format('woff2')}
@font-face{font-family:'Amatic SC';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/amatic-sc-700.woff2') format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/open-sans-400.woff2') format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/open-sans-600.woff2') format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/open-sans-700.woff2') format('woff2')}

/* ---------- Tokens ------------------------------------------------------- */
:root{
  --cream:#efebdc;
  --cream-deep:#e6e0cb;
  --pink:#ff6392;
  --magenta:#cc0066;        /* brand accent: headings, icons, large text */
  --link:#c2005f;           /* body links: same hue, passes 4.5:1 on the cream background */
  --yellow:#ffd400;
  --blue:#7fc8f8;
  --blue-deep:#3f9bd6;
  --ink:#4e4e4e;
  --ink-strong:#2b2b2b;
  --white:#fff;

  --font-head:'Amatic SC', 'Comic Sans MS', cursive;
  --font-body:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-card:40px;
  --radius-img:28px;
  --shadow-card:16px 16px 48px -8px rgba(0,0,0,.19);
  --shadow-img:0 12px 40px -12px rgba(0,0,0,.30);

  --wrap:1180px;
  --gutter:clamp(18px, 5vw, 48px);
  --section-y:clamp(56px, 9vw, 110px);
}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--pink)}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.05;margin:0 0 .35em;color:var(--ink-strong)}
h1{font-size:clamp(46px,8vw,86px)}
h2{font-size:clamp(38px,5.4vw,58px)}
h3{font-size:clamp(28px,3.4vw,38px)}
h4{font-size:clamp(26px,3vw,34px)}
p{margin:0 0 1.1em}
address{font-style:normal}
p:last-child{margin-bottom:0}

/* ---------- Layout helpers ---------------------------------------------- */
.wrap{width:min(100% - var(--gutter)*2, var(--wrap));margin-inline:auto}
.section{padding-block:var(--section-y);position:relative}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--magenta);color:#fff;
  padding:12px 20px;border-radius:0 0 12px 0;z-index:200;font-weight:600}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Buttons ------------------------------------------------------ */
.btn{
  /* inline-flex + line-height:1 keeps the box tight, so a label that wraps to two
     lines stays compact instead of inheriting the 1.75 body line-height.
     Every button carries the same 3px border — transparent on the filled variant,
     coloured on the ghost — so both have identical geometry and the same optical
     padding. The ghost used to draw its ring with an inset shadow, which ate 3px
     of padding on every side and made outlined buttons look tighter than filled. */
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  line-height:1;
  background:var(--blue);
  color:var(--ink-strong);
  font-family:var(--font-body);
  font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;
  padding:1.05em 2.1em;
  border:3px solid transparent;border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(63,155,214,.7);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:hover,.btn:focus-visible{background:var(--yellow);color:var(--ink-strong);
  transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(0,0,0,.35)}
.btn--ghost{background:transparent;color:var(--magenta);border-color:var(--magenta);box-shadow:none}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--magenta);border-color:var(--magenta);color:#fff;box-shadow:none}

/* ---------- Social icons ------------------------------------------------- */
.socials{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.socials a{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--white);color:var(--ink-strong);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.35);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.socials a:hover,.socials a:focus-visible{background:var(--magenta);color:#fff;transform:translateY(-2px)}
.socials svg{width:20px;height:20px;fill:currentColor}

/* ---------- Header ------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(239,235,220,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.site-header__inner{display:flex;align-items:center;gap:20px;
  min-height:72px;padding-block:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img{width:52px;height:52px;object-fit:contain;border-radius:12px;background:#fff}
.brand__text{font-family:var(--font-head);font-weight:700;line-height:.95;font-size:26px;
  color:var(--magenta);white-space:nowrap}
.brand__text span{display:block;color:var(--ink-strong);font-size:20px;letter-spacing:.02em}

.nav{margin-left:auto}
.nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav a{
  display:block;padding:10px 14px;border-radius:999px;
  color:var(--ink-strong);text-decoration:none;font-weight:600;font-size:15px;
  transition:background .2s ease,color .2s ease;
}
.nav a:hover,.nav a:focus-visible{background:var(--white)}
.nav a[aria-current="page"]{background:var(--magenta);color:#fff}

.nav-toggle{display:none;margin-left:auto;background:var(--white);border:0;border-radius:14px;
  width:46px;height:46px;cursor:pointer;color:var(--ink-strong);box-shadow:0 4px 14px -8px rgba(0,0,0,.4)}
.nav-toggle svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

@media (max-width:860px){
  .nav-toggle{display:grid;place-items:center}
  .nav{position:absolute;top:100%;left:0;right:0;margin:0;
    background:var(--cream);border-bottom:1px solid rgba(0,0,0,.08);
    display:none;box-shadow:0 18px 30px -22px rgba(0,0,0,.5)}
  .nav[data-open="true"]{display:block}
  .nav ul{flex-direction:column;gap:2px;padding:12px var(--gutter) 20px}
  .nav a{padding:13px 16px;font-size:17px}
  .brand__text{font-size:22px}
  .brand__text span{font-size:17px}
}

/* ---------- Decorative dashes ------------------------------------------- */
.dashes{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-repeat:no-repeat;opacity:.55}
.dashes--hero{background-image:url('../img/dog-walker-10-3-900.webp');
  background-position:center top;background-size:min(1200px,115%) auto}
.dashes--mid{background-image:url('../img/dog-walker-10-3-1-900.webp');
  background-position:right 0 top 10%;background-size:min(900px,90%) auto;opacity:.4}
@media (max-width:860px){.dashes{display:none}}

/* ---------- Hero --------------------------------------------------------- */
.hero{position:relative;padding-top:clamp(36px,6vw,70px);padding-bottom:clamp(60px,10vw,120px)}
.hero__grid{position:relative;z-index:1;display:grid;gap:clamp(30px,5vw,56px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.hero__title{margin:0 0 .15em}
.hero__title .l1{display:block;font-size:clamp(64px,11vw,130px);color:var(--pink);line-height:1}
.hero__title .l2{display:block;font-size:clamp(52px,9.2vw,110px);color:var(--yellow);line-height:.95;
  letter-spacing:.01em}
.hero__lead{font-size:clamp(16px,1.6vw,19px);max-width:34ch;margin-bottom:1.9em}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:34px}

/* the blue blob holding the hero photo */
.blob{
  position:relative;
  border:clamp(22px,3.6vw,64px) solid var(--blue);
  border-radius:clamp(60px,9vw,150px);
  overflow:hidden;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.35);
  transform:rotate(-3deg);
  aspect-ratio:3/4;
  max-width:440px;margin-inline:auto;
}
.blob img{width:100%;height:100%;object-fit:cover}

@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .blob{max-width:320px;transform:rotate(-2deg)}
}

/* ---------- Badge row (logo tile + pink blob) ---------------------------- */
.badges{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:clamp(30px,7vw,90px);margin-top:clamp(-10px,-1vw,0px)}
.logo-tile{
  background:var(--white);padding:clamp(14px,2vw,24px);
  border:clamp(10px,1.4vw,18px) solid #d9d9d9;
  border-radius:clamp(28px,4vw,52px);
  box-shadow:0 10px 34px -12px rgba(0,0,0,.35);
  transform:rotate(-3deg);width:clamp(150px,20vw,230px)
}
.pink-blob{
  position:relative;display:grid;place-items:center;
  width:clamp(170px,23vw,260px);aspect-ratio:1;
}
.pink-blob::before{
  content:'';position:absolute;inset:0;
  background:var(--pink);border-radius:26%;
  transform:rotate(45deg) scale(.86);
  box-shadow:12px 12px 40px -10px rgba(238,106,91,.6);
}
.pink-blob img{position:relative;width:86%;border-radius:22px;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.45);transform:rotate(-4deg)}

/* ---------- Cards -------------------------------------------------------- */
.card{
  background:var(--white);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:clamp(28px,4.5vw,64px);
  position:relative;z-index:1;
}
.card--split{display:grid;gap:clamp(30px,5vw,60px);grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch}
.card--split > *{display:flex;flex-direction:column}
@media (max-width:860px){.card--split{grid-template-columns:1fr}}
.card h2{color:var(--ink-strong)}
.card__img{border-radius:var(--radius-img);box-shadow:var(--shadow-img);margin-top:26px;
  width:100%;flex:1 1 0;min-height:220px;
  object-fit:cover;object-position:center 30%}
@media (max-width:860px){
  /* single column: nothing to balance against, so let the photo keep its own
     proportions instead of collapsing to the flex minimum */
  .card__img{flex:none;min-height:0;height:auto;max-height:70vh}
}

/* ---------- Feature list ------------------------------------------------- */
.features{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px;align-content:start}
.features li{display:flex;align-items:center;gap:16px}
.features .tick{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--pink)}
.features li:nth-child(2) .tick{background:var(--blue)}
.features li:nth-child(3) .tick{background:var(--yellow)}
.features .tick svg{width:20px;height:20px;stroke:#fff;stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.features h3{margin:0;font-size:clamp(24px,2.6vw,32px)}

/* ---------- Video -------------------------------------------------------- */
.video-wrap{position:relative;z-index:1;margin-top:clamp(30px,5vw,56px);
  border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);background:#000}
.video-wrap video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}

/* ---------- Products ----------------------------------------------------- */
.section-head{text-align:center;margin-bottom:clamp(34px,5vw,60px);position:relative;z-index:1}
.section-head p{max-width:56ch;margin-inline:auto}
.products{position:relative;z-index:1;display:grid;gap:clamp(20px,3vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.product{
  background:var(--white);border-radius:32px;overflow:hidden;
  box-shadow:0 12px 34px -16px rgba(0,0,0,.35);
  display:flex;flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.product:hover{transform:translateY(-6px);box-shadow:0 22px 44px -18px rgba(0,0,0,.42)}
.product img{width:100%;aspect-ratio:4/3;object-fit:cover}
.product h3{margin:0;padding:20px 24px 24px;font-size:clamp(26px,2.4vw,32px);text-align:center}
.product .eyebrow{display:block;font-family:var(--font-body);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--magenta);margin-bottom:4px}

/* ---------- CTA ---------------------------------------------------------- */
.cta{text-align:center;position:relative;z-index:1}
.cta p{max-width:52ch;margin-inline:auto;margin-bottom:1.8em}

/* ---------- Gallery ------------------------------------------------------ */
.gallery{position:relative;z-index:1;display:grid;gap:clamp(14px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:26px;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.4);transition:transform .35s ease}
.gallery img:nth-child(odd){transform:rotate(-1.2deg)}
.gallery img:nth-child(even){transform:rotate(1.2deg)}
.gallery img:hover{transform:rotate(0) scale(1.03)}

/* ---------- Page header (subpages) -------------------------------------- */
.page-head{padding-block:clamp(40px,6vw,80px) clamp(24px,3vw,40px);text-align:center;position:relative}
.page-head h1{color:var(--pink);margin-bottom:.1em}
.page-head .sub .heart{font-family:var(--font-body);font-size:.62em;line-height:1;
  display:inline-block;vertical-align:.14em;margin-right:.06em}
.page-head .sub{font-family:var(--font-head);font-weight:700;color:var(--yellow);
  font-size:clamp(30px,4.4vw,52px);line-height:1;display:block}

/* ---------- Info blocks (Anfahrt / Kontakt) ----------------------------- */
.info-grid{display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.info{background:var(--white);border-radius:32px;padding:clamp(24px,3.4vw,40px);
  box-shadow:0 12px 34px -16px rgba(0,0,0,.28)}
.info h3{margin-bottom:.3em}
.info .big{font-size:20px;font-weight:600;color:var(--ink-strong)}
.info a{font-weight:600}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  border-bottom:1px dashed rgba(0,0,0,.14)}
.hours li:last-child{border-bottom:0}

.map-card{background:var(--white);border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--shadow-card);padding:clamp(24px,3.4vw,44px);text-align:center}
.map-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:stretch;margin-top:26px}
@media (max-width:600px){.map-actions{flex-direction:column}.map-actions .btn{width:100%}}

/* ---------- Small utilities ---------------------------------------------
   Page markup stays free of inline styles: an inline style outranks the
   stylesheet, which previously stopped .card--split from balancing its
   columns on the Kontakt page. ------------------------------------------- */
.section--tight{padding-top:0}
.lead{font-size:clamp(17px,1.5vw,19px);max-width:60ch;margin-inline:auto}
.note{margin-top:22px;font-size:14px;color:#6b6b6b}
.muted-sm{margin-top:14px;font-size:15px}
.mt-md{margin-top:22px}
.mt-lg{margin-top:28px}
.contact-mail{font-size:20px;font-weight:600}
.addr-lg{font-size:19px;font-weight:600;color:var(--ink-strong)}
.info-grid--spaced{margin-top:clamp(24px,4vw,40px)}
.footer-hours{color:var(--magenta);font-weight:600}
.h-pink{color:var(--pink)}

/* ---------- Legal / prose ------------------------------------------------ */
.prose{background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:clamp(28px,4.5vw,64px);max-width:78ch;margin-inline:auto}
.prose h2{font-size:clamp(30px,3.6vw,42px);margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(24px,2.6vw,30px);margin-top:1.4em}
.prose ul{padding-left:1.3em}
.prose li{margin-bottom:.5em}

/* ---------- Footer ------------------------------------------------------- */
.site-footer{background:var(--cream-deep);padding-block:clamp(44px,6vw,72px) 28px;margin-top:0}
.site-footer__grid{display:grid;gap:clamp(24px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.site-footer h2{font-size:clamp(28px,3vw,34px);color:var(--magenta);margin-bottom:.4em}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.site-footer a{color:var(--ink);text-decoration:none;font-weight:600}
.site-footer a:hover{color:var(--magenta);text-decoration:underline}
.site-footer__bottom{margin-top:clamp(32px,5vw,52px);padding-top:22px;
  border-top:1px solid rgba(0,0,0,.12);display:flex;flex-wrap:wrap;gap:12px 26px;
  justify-content:space-between;align-items:center;font-size:14px}
.site-footer__bottom p{margin:0}
.site-footer__bottom .credit a{color:var(--link);font-weight:700;text-decoration:none}
.site-footer__bottom .credit a:hover,.site-footer__bottom .credit a:focus-visible{text-decoration:underline}