/* ============================
   Kevin’s Hundeschule – UI Kit
   Boho-Stil · Typografie · Layout
   ============================ */

/* ---------- Farbvariablen ---------- */
:root{
  --brand:#7a5c52;         /* Boho-Braun */
  --brand-600:#8a6a5f;
  --brand-light:#a88d81;   /* Akzent hell */
  --bg:#faf9f7;            /* Grundfläche */
  --bg-2:#f2efec;          /* Sektionen */
  --text:#2b2b2b;          /* Fließtext */
  --muted:#6e6e6e;         /* Sekundärtext */
  --border:#d8d3cf;        /* Konturen */
  --card:#ffffff;          /* Kartenfläche */
  --shadow:0 6px 18px rgba(0,0,0,.06);
}

/* ---------- Reset & Grundtypografie ---------- */
*,
*::before,
*::after{ box-sizing:border-box }

html,body{ margin:0; padding:0 }

body{
  background:var(--bg);
  color:var(--text);
  /* Inter für Fließtext – moderne, ruhige Sans */
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size:17px;               /* gut lesbar */
  line-height:1.7;              /* entspannte Zeilenhöhe */
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; display:block }

/* Hochwertige Headlines mit Playfair Display */
h1,h2,h3,h4,h5,h6{
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight:700;
  line-height:1.2;
  color:var(--text);
  letter-spacing:.1px;
  margin:0 0 .4em 0;
}

h1{ font-size:clamp(30px,3.2vw,42px) }
h2{ font-size:clamp(24px,2.6vw,32px) }
h3{ font-size:clamp(19px,2.0vw,24px) }
h4{ font-size:clamp(16px,1.6vw,20px) }

/* Fließtext in Karten/FAQ/Trainer */
p, .faq p, .trainer p, .card p{
  font-size:1rem;
  line-height:1.7;
  margin:.25em 0 .9em;
  color:var(--text);
}

/* ---------- Links & Buttons ---------- */
a{ color:var(--brand); text-decoration:none; transition:color .15s ease }
a:hover{ text-decoration:underline }

button, .cta, .cta-primary{
  cursor:pointer;
  display:inline-block;
  border-radius:12px;
  padding:.65rem 1.1rem;
  font-weight:600;
  border:1px solid transparent;
  transition:transform .06s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.cta{
  background:var(--bg-2);
  color:var(--brand);
  border-color:var(--brand-light);
}
.cta:hover{
  background:var(--brand-light);
  color:#fff;
  border-color:var(--brand-light);
}

.cta-primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  box-shadow:0 8px 22px rgba(122,92,82,.14);
}
.cta-primary:hover{
  background:var(--brand-light);
  border-color:var(--brand-light);
  transform:translateY(-1px);
}

/* ---------- Layout-Helfer ---------- */
.wrapper{ max-width:1200px; margin:0 auto; padding:0 16px }
.section{ padding:48px 0 }
.section-head{ text-align:center; margin-bottom:18px }
.section-desc{ color:var(--muted); max-width:62ch; margin:6px auto 0 }

/* Grid */
.grid{ display:grid; gap:1.2rem }
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)) }

/* ---------- Header / Navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:1100;
  background:rgba(250,249,247,.85);
  backdrop-filter:saturate(1.05) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.03);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0 }
.brand{
  font-family:'Playfair Display', serif;
  font-weight:700; font-size:1.35rem; color:var(--brand);
}
.menu-toggle{ background:none; border:0; padding:.35rem }
.menu-bars{ width:24px; height:2px; background:var(--brand); position:relative; display:block }
.menu-bars::before, .menu-bars::after{
  content:""; position:absolute; left:0; width:24px; height:2px; background:var(--brand)
}
.menu-bars::before{ top:-7px } .menu-bars::after{ top:7px }

.quick-menu{
  position:absolute; right:16px; top:60px; padding:.7rem 1rem;
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow)
}
.quick-menu ul{ list-style:none; margin:0; padding:0 }
.quick-menu li{ margin:.35rem 0 }
.quick-menu a{ color:var(--text) }
.quick-menu a:hover{ color:var(--brand) }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg, var(--brand-light), var(--brand-600));
  color:#fff;
  padding:56px 0 64px;
}
.hero .badge{
  display:inline-block; background:#fff; color:var(--brand);
  padding:.32rem .6rem; border-radius:9px; font-size:.85rem; font-weight:600;
}

/* ---------- Karten ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.2rem 1.2rem 1.1rem;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:.4rem;
}
.card:hover{ transform:translateY(-2px) }

/* ---------- Service-Grid (Leistungen) ---------- */
.service-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); align-items:stretch }
.service-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow);
  text-decoration:none;
  color:inherit;
  display:flex; flex-direction:column; justify-content:space-between; height:100%;
  transition:transform .15s ease, box-shadow .2s ease;
}
.service-card:hover{ transform:translateY(-2px) }
.service-card h3{ margin-top:0 }
.service-card p{ flex-grow:1; margin-bottom:0; color:var(--text) }
.service-card .cta{ align-self:flex-start; margin-top:auto; display:inline-block }

/* —— Fix: Auch wenn irgendwo noch .card verwendet wird, Button bündig unten —— */
.service-grid .card{ height:100%; display:flex; flex-direction:column }
.service-grid .card p{ flex-grow:1; margin-bottom:0 }
.service-grid .card .cta{ margin-top:auto; align-self:flex-start }

/* ---------- Blog Listenansicht ---------- */
.blog-hero{ background:var(--bg-2); border-bottom:1px solid var(--border) }
.blog-hero .inner{ max-width:1100px; margin:0 auto; padding:32px 16px; text-align:center }
.grid-cards{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); margin-top:28px }
.bcard{
  display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid var(--border); border-radius:18px; background:var(--card); box-shadow:var(--shadow);
  padding:18px; transition:transform .15s ease;
}
.bcard:hover{ transform:translateY(-2px) }
.bcard h3{ margin:.45rem 0 }
.bcard p.excerpt{ color:#444; margin-bottom:.7rem }
.blog-cat{ font-size:.75rem; text-transform:uppercase; color:var(--brand); font-weight:700; letter-spacing:.5px }

/* ---------- Newsletter-Karte ---------- */
.newsletter-card{
  max-width:640px; margin:40px auto; text-align:center;
  border:1px solid var(--border); border-radius:18px; background:var(--card); box-shadow:var(--shadow);
  padding:24px;
}
.newsletter-card form{ display:flex; flex-direction:column; gap:10px; margin-top:12px }
.newsletter-card input[type=email]{
  padding:.75rem .95rem; border:1px solid var(--border); border-radius:12px; width:100%;
}

/* ---------- Testimonials (kompakt) ---------- */
.testimonials{ display:grid; gap:16px }
@media(min-width:820px){ .testimonials{ grid-template-columns:repeat(2, minmax(280px,1fr)) } }
.testi-card{
  position:relative; border:1px solid var(--border); border-radius:18px; background:var(--card);
  padding:18px 18px 14px; box-shadow:var(--shadow)
}
.testi-quote{ margin:0 0 10px; line-height:1.6 }
.testi-quote::before{
  content:"“"; position:absolute; left:14px; top:6px; font-family:'Playfair Display', serif;
  font-size:46px; line-height:1; opacity:.12; pointer-events:none
}
.testi-meta{ display:flex; align-items:center; gap:10px; margin-top:6px; font-size:.95rem; color:var(--muted) }
.testi-dot{ width:32px; height:32px; border-radius:50%; background:var(--bg-2); border:1px solid var(--border) }
.testi-wrap{ max-width:1050px; margin-inline:auto }

/* ---------- Footer ---------- */
footer{ text-align:center; font-size:.95rem; padding:28px 0; color:var(--muted) }

/* ---------- Reveal-on-Scroll ---------- */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease }
.reveal.active{ opacity:1; transform:translateY(0) }
.reveal-stagger .card, .reveal-stagger .testi-card{
  opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease
}
.reveal-stagger .card.active, .reveal-stagger .testi-card.active{
  opacity:1; transform:translateY(0)
}

/* ---------- Promo Bottom-Sheet ---------- */
.promo-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); display:none; z-index:5000 }
.promo-sheet{
  position:fixed; left:50%; transform:translateX(-50%); bottom:-100%;
  width:min(720px,94vw); background:var(--card); border:1px solid var(--border);
  border-radius:22px 22px 16px 16px; box-shadow:0 18px 40px rgba(0,0,0,.18), var(--shadow);
  padding:18px; z-index:5001; will-change:transform,bottom;
}
.promo-open .promo-backdrop{ display:block }
@media (prefers-reduced-motion:no-preference){
  .promo-open .promo-sheet{ animation:promoIn .45s ease forwards }
}
@keyframes promoIn{ 0%{bottom:-100%; opacity:0} 100%{bottom:18px; opacity:1} }
.promo-title{ font-family:'Playfair Display', serif; font-size:clamp(20px,2.4vw,28px); margin:0 0 8px }
.promo-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.promo-chip{
  display:inline-block; padding:6px 10px; border-radius:999px; background:var(--bg-2);
  border:1px solid var(--border); font-weight:700
}
.promo-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px }
.promo-close{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 14px; cursor:pointer }
.promo-close:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(178,124,102,.28) }

/* ---------- Barrierefreiheit / Utility ---------- */
.small{ font-size:.92rem }
.badge{ font-size:.78rem; display:inline-block }
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden
}
.skip-link:focus{
  left:0; top:0; width:auto; height:auto; background:#000; color:#fff; padding:.6rem; z-index:9999
}

/* ---------- Formulare (Kontakt/Newsletter) ---------- */
input[type=text], input[type=email], input[type=number], textarea{
  font:inherit; color:inherit; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:.7rem .9rem
}
input::placeholder, textarea::placeholder{ color:#9a9a9a }

/* ---------- Karten & CTA-Höhenangleich (nochmal explizit) ---------- */
.service-grid{ align-items:stretch }
.service-grid .service-card, .service-grid .card{ height:100%; display:flex; flex-direction:column }
.service-grid .service-card p, .service-grid .card p{ flex-grow:1; margin-bottom:0 }
.service-grid .service-card .cta, .service-grid .card .cta{ margin-top:auto; align-self:flex-start }