/* ============================================================
   Katharina Hager — Psychotherapie | Kunsttherapie
   Rebuilt to match the actual live original site.
   Palette: #A83044 (red), #882636 (dark red), #B7596B (light rose),
            #565656 (grey text), #000/#fff, #688A00 (icon green only)
   Fonts: Caveat Brush (headings, handwritten) + PT Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=PT+Sans:wght@400;700&display=swap');

:root{
  --red:#A83044;
  --red-dark:#882636;
  --rose:#B7596B;
  --grey:#565656;
  --ink:#333333;
  --white:#ffffff;
  --paper:#ffffff;
  --border:#e2e2e2;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  font-family:'PT Sans', Arial, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  font-size:1rem;
}

h1,h2,h3,h4{
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  color:var(--red);
  line-height:1.25;
  letter-spacing:.3px;
}
h1{font-size:clamp(1.8rem, 3.2vw, 2.6rem); text-align:center;}
.handwritten-heading{font-family:'Caveat Brush',cursive; font-weight:400; color:var(--red); font-size:clamp(1.8rem, 3.2vw, 2.6rem); text-align:center; text-transform:none; letter-spacing:.3px;}
h2{font-size:clamp(1.3rem, 2vw, 1.6rem); text-transform:uppercase; font-family:'PT Sans',sans-serif; font-weight:700; color:var(--ink); letter-spacing:.3px;}
h3{font-size:1.15rem; font-family:'PT Sans',sans-serif; font-weight:700; text-transform:uppercase; color:var(--red); margin-top:1.6rem; letter-spacing:.2px;}

a{color:var(--red); text-decoration:underline; text-decoration-color:rgba(168,48,68,.35);}
a:hover{color:var(--red-dark);}

/* ---------- Top contact bar ---------- */
.top-bar{
  background:var(--red);
  color:var(--white);
  font-size:.85rem;
  padding:.55rem 0;
}
.top-bar a{color:var(--white); text-decoration:none; margin-right:1.5rem;}
.top-bar a:hover{opacity:.85;}
.top-bar i{margin-right:.4rem;}

/* ---------- Navbar ---------- */
.site-nav{
  background:var(--white);
  padding:1rem 0;
  border-bottom:1px solid var(--border);
}
.site-nav .navbar-brand{
  display:flex; align-items:center; gap:.7rem;
}
.site-nav .navbar-brand img{height:54px; width:54px; object-fit:contain; transition:height .3s ease, width .3s ease;}
.site-nav{transition:padding .3s ease;}
.site-nav.is-scrolled{padding:.5rem 0; box-shadow:0 2px 10px rgba(0,0,0,.08);}
.site-nav.is-scrolled .navbar-brand img{height:36px; width:36px;}
.site-nav.is-scrolled .brand-name{font-size:1.2rem;}
.site-nav.is-scrolled .brand-tag{font-size:0;}
.site-nav .brand-tag{transition:font-size .3s ease;}

/* Reveal-on-scroll: subtle slide in from the right */
.reveal-right{
  opacity:0;
  transform:translateX(40px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal-right.is-visible{
  opacity:1;
  transform:translateX(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-right{opacity:1; transform:none; transition:none;}
  .site-nav, .site-nav .navbar-brand img, .site-nav .brand-tag{transition:none;}
}
.brand-text{display:flex; flex-direction:column; line-height:1.2;}
.brand-name{font-family:'Caveat Brush',cursive; font-size:1.5rem; color:var(--red);}
.brand-tag{font-family:'PT Sans',sans-serif; font-size:.8rem; color:var(--ink); font-weight:400;}
.site-nav .nav-link{color:var(--ink) !important; font-weight:600; font-size:.95rem; margin:0 .5rem;}
.site-nav .nav-link.active{color:var(--red) !important;}
.site-nav .nav-link:hover{color:var(--red) !important;}
.site-nav .dropdown-menu{border:none; box-shadow:0 6px 18px rgba(0,0,0,.12); font-size:.92rem;}
.site-nav .dropdown-item:hover{background:#f8eef0; color:var(--red);}

/* ---------- Subpage hero: image only, title below on white ---------- */
.hero-image{
  width:100%; height:46vh; min-height:320px;
  background-size:cover; background-position:center;
}
.hero-title-block{
  text-align:center; padding:2.2rem 1rem 1rem;
}

/* ---------- Home hero (has text overlay, unique to homepage) ---------- */
.home-hero{
  position:relative; min-height:60vh; display:flex; align-items:center;
  background-size:cover; background-position:center; color:var(--white);
}
.home-hero::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.25);}
.home-hero-inner{position:relative; z-index:2;}
.home-hero h1{color:var(--white); text-align:left; font-family:'Caveat Brush',cursive; font-size:clamp(2rem,4vw,3rem); text-shadow:0 2px 12px rgba(0,0,0,.4);}

/* ---------- Buttons ---------- */
.btn-red{
  background:var(--red); color:var(--white) !important;
  border-radius:3px; padding:.55rem 1.4rem; font-weight:600; font-size:.95rem;
  border:none; text-decoration:none; display:inline-block;
}
.btn-red:hover{background:var(--red-dark); color:var(--white) !important;}

/* ---------- Sections ---------- */
.section{padding:3rem 0;}
.section-tight{padding:2rem 0;}

/* ---------- Sad/happy custom bullet lists ---------- */
.custom-list-sad, .custom-list-happy, .custom-list-arrow{list-style:none; padding-left:0; margin:0;}
.custom-list-sad li, .custom-list-happy li{position:relative; padding-left:34px; margin-bottom:.9rem; font-weight:700; text-transform:uppercase; font-size:.95rem;}
.custom-list-sad li{color:var(--red);}
.custom-list-happy li{color:var(--red);}
.custom-list-sad li img, .custom-list-happy li img{position:absolute; left:0; top:1px; width:22px; height:22px;}
.custom-list-arrow li{position:relative; padding-left:26px; margin-bottom:.7rem;}
.custom-list-arrow li::before{content:"\203A"; position:absolute; left:0; top:-2px; color:var(--red); font-weight:700; font-size:1.3rem;}

/* ---------- Leistungen icon grid ---------- */
.leistung-icon-item{text-align:center;}
.leistung-icon-item img{width:80px; height:80px; margin-bottom:.8rem;}
.leistung-icon-item h4{font-family:'PT Sans',sans-serif; font-weight:700; text-transform:uppercase; font-size:1rem; color:var(--ink);}
.leistung-icon-item a{color:inherit; text-decoration:none;}
.leistung-icon-item a:hover h4{color:var(--red);}

/* ---------- CTA block (appears at bottom of most pages) ---------- */
.cta-block{background:var(--red); color:var(--white); padding:0; position:relative; overflow:hidden;}
.cta-block .cta-inner{position:relative; z-index:2; padding-top:3rem; padding-bottom:3rem;}
.cta-block h2{color:var(--white); font-family:'Caveat Brush',cursive; text-transform:none; font-size:clamp(1.5rem,2.6vw,2.1rem); text-align:left; line-height:1.3;}
.cta-block .btn-callnow{background:var(--red-dark); color:var(--white); border:none; border-radius:3px; padding:.7rem 1.6rem; font-weight:600; text-decoration:none; display:inline-block;}
.cta-block .btn-callnow:hover{background:#6f1e2b; color:var(--white);}
.cta-photo-col{
  position:absolute; top:0; right:0; bottom:0; width:33%;
  background-size:cover; background-position:center; z-index:1;
}

/* ---------- Map placeholder ---------- */
.map-placeholder{
  background:#eeeeee; border-radius:2px; padding:3rem 1.5rem; text-align:center; min-height:300px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.map-placeholder .btn-load{background:#1a1a1a; color:var(--white); border:none; padding:.6rem 1.6rem; border-radius:3px; margin-top:1rem;}

/* ---------- Q&A: plain two-column list, no accordion ---------- */
.qa-item{margin-bottom:1.6rem;}
.qa-item h3{margin-top:0;}

/* ---------- Footer: white, three columns ---------- */
.site-footer{background:var(--white); border-top:1px solid var(--border); padding:2.5rem 0; font-size:1.05rem; font-weight:500; line-height:1.7;}
.site-footer strong{color:var(--ink); font-size:1.1rem;}
.site-footer a{color:var(--red); text-decoration:none; font-weight:600;}
.site-footer a:hover{text-decoration:underline;}
.site-footer .footer-icon{color:var(--red); margin-right:.5rem; font-size:1.1rem;}

/* Portrait blob kept for homepage bio photo */
.blob-frame{border-radius:42% 58% 61% 39% / 45% 41% 59% 55%; overflow:hidden; display:block;}
.blob-frame img{width:100%; height:100%; object-fit:cover; display:block;}

@media (max-width:767px){
  .home-hero{min-height:50vh;}
  .hero-image{height:32vh; min-height:220px;}
}