/* bare-tree-782.css — StoryPuls Berlin */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap");

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }

:root {
  --bg:#ffffff;
  --primary:#2d2d2d;
  --secondary:#b5a48b;
  --text:#333333;
  --accent:#5bbad5;
  --light:#f5f0eb;
  --mid:#e8e0d5;
  --white:#fff;
  --shadow:0 2px 18px rgba(45,45,45,.09);
  --radius:14px;
}

html { scroll-behavior:smooth }
body { font-family:'Inter',sans-serif; font-size:15px; color:var(--text); background:var(--bg); line-height:1.65 }
a { color:var(--primary); text-decoration:none }
a:hover { color:var(--secondary) }
img { max-width:100%; display:block }
ul { list-style:none }

/* ========== HEADER ========== */
.site-header { background:var(--bg); border-bottom:1px solid var(--mid); position:sticky; top:0; z-index:100 }
.header-top-bar { background:var(--light); padding:8px 0; font-size:12px; text-align:center; color:#666 }
.header-top-bar a { color:#666 }
.header-inner { max-width:1240px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:70px }
.logo-wrap { display:flex; align-items:center; gap:12px }
.logo-wrap svg { width:40px; height:40px; flex-shrink:0 }
.logo-text { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--primary); line-height:1 }
.logo-text span { display:block; font-size:11px; font-weight:400; color:var(--secondary); letter-spacing:.06em; font-family:'Inter',sans-serif }

nav.main-nav ul { display:flex; gap:32px }
nav.main-nav a { font-size:14px; font-weight:500; color:var(--primary); letter-spacing:.02em; transition:color .2s }
nav.main-nav a:hover, nav.main-nav a.active { color:var(--secondary) }

.nav-cta { background:var(--primary); color:var(--white) !important; padding:9px 22px; border-radius:6px; font-size:13px; font-weight:500; transition:background .2s }
.nav-cta:hover { background:var(--secondary) !important; color:var(--white) !important }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px }
.hamburger span { display:block; width:24px; height:2px; background:var(--primary); transition:transform .3s }

.mobile-nav { display:none; background:var(--bg); border-top:1px solid var(--mid); padding:16px 24px 24px }
.mobile-nav.open { display:block }
.mobile-nav ul { display:flex; flex-direction:column; gap:0 }
.mobile-nav li a { display:block; padding:12px 0; border-bottom:1px solid var(--mid); font-size:15px; color:var(--primary) }

/* ========== HERO ========== */
.hero { position:relative; overflow:hidden; min-height:580px; display:flex; align-items:center }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(100deg,rgba(45,45,45,.72) 40%,rgba(45,45,45,.18) 100%) }
.hero-inner { position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:80px 24px; max-width:620px; margin-left:max(24px,calc(50vw - 620px + 24px)) }
.hero-inner .label { display:inline-block; background:var(--secondary); color:var(--white); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border-radius:4px; margin-bottom:18px }
.hero-inner h1 { font-family:'Playfair Display',serif; font-size:clamp(32px,5vw,52px); font-weight:700; color:var(--white); line-height:1.18; margin-bottom:20px }
.hero-inner p { font-size:16px; color:rgba(255,255,255,.88); margin-bottom:32px; max-width:480px }
.btn { display:inline-block; padding:13px 30px; border-radius:7px; font-size:14px; font-weight:600; transition:all .2s; cursor:pointer; border:none }
.btn-primary { background:var(--secondary); color:var(--white) }
.btn-primary:hover { background:#a0906f; color:var(--white) }
.btn-outline { background:transparent; border:2px solid var(--white); color:var(--white) }
.btn-outline:hover { background:var(--white); color:var(--primary) }
.btn-dark { background:var(--primary); color:var(--white) }
.btn-dark:hover { background:#444; color:var(--white) }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap }

/* ========== TAGLINE BAR ========== */
.tagline-bar { background:var(--secondary); padding:22px 24px; text-align:center }
.tagline-bar h2 { font-family:'Playfair Display',serif; font-size:20px; font-weight:400; color:var(--white); font-style:italic }

/* ========== SECTIONS COMMON ========== */
.section { padding:72px 24px }
.section-inner { max-width:1240px; margin:0 auto }
.section-label { display:inline-block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--secondary); margin-bottom:10px; font-weight:600 }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(26px,3.5vw,38px); color:var(--primary); margin-bottom:14px; line-height:1.22 }
.section-sub { font-size:15px; color:#666; max-width:580px; margin-bottom:48px }
.section-bg { background:var(--light) }
.section-dark { background:var(--primary); color:var(--white) }
.section-dark .section-title, .section-dark p { color:var(--white) }
.section-dark .section-label { color:var(--secondary) }

/* ========== TWO-COLUMN GRID ========== */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:55px }
.two-col.reverse { direction:rtl }
.two-col.reverse > * { direction:ltr }
.two-col img { width:100%; border-radius:var(--radius); box-shadow:var(--shadow) }
.two-col .col-text h3 { font-family:'Playfair Display',serif; font-size:28px; color:var(--primary); margin-bottom:14px }
.two-col .col-text p { margin-bottom:16px; color:#555 }
.read-more { display:inline-block; font-size:13px; font-weight:600; color:var(--secondary); letter-spacing:.04em; margin-top:8px }
.read-more i { margin-left:6px; font-size:11px }

/* ========== SERVICES GRID ========== */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
.service-card { background:var(--bg); border:1px solid var(--mid); border-radius:var(--radius); padding:32px 28px; transition:box-shadow .25s, transform .25s }
.service-card:hover { box-shadow:var(--shadow); transform:translateY(-3px) }
.service-card .icon { width:48px; height:48px; background:var(--light); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--secondary); font-size:20px }
.service-card h3 { font-family:'Playfair Display',serif; font-size:19px; margin-bottom:10px; color:var(--primary) }
.service-card p { font-size:14px; color:#666; line-height:1.6 }
.service-card .price { display:inline-block; margin-top:16px; font-size:13px; font-weight:600; color:var(--secondary) }

/* ========== STATS BAR ========== */
.stats-bar { background:var(--primary); padding:50px 24px }
.stats-inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center }
.stat-item .num { font-family:'Playfair Display',serif; font-size:42px; color:var(--secondary); font-weight:700 }
.stat-item .label { font-size:13px; color:rgba(255,255,255,.7); margin-top:4px }

/* ========== TESTIMONIALS ========== */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
.testi-card { background:var(--light); border-radius:var(--radius); padding:28px 24px }
.testi-card .stars { color:var(--secondary); font-size:14px; margin-bottom:14px }
.testi-card blockquote { font-size:14px; color:#555; font-style:italic; margin-bottom:16px; line-height:1.65 }
.testi-card .author { font-size:13px; font-weight:600; color:var(--primary) }
.testi-card .author span { font-weight:400; color:#888 }

/* ========== PROCESS ========== */
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:steps }
.step { text-align:center; padding:28px 16px; position:relative }
.step-num { width:52px; height:52px; border-radius:50%; background:var(--secondary); color:var(--white); font-family:'Playfair Display',serif; font-size:22px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 18px }
.step h4 { font-size:15px; font-weight:600; color:var(--primary); margin-bottom:8px }
.step p { font-size:13px; color:#666 }

/* ========== FAQ ========== */
.faq-list { max-width:780px }
.faq-item { border-bottom:1px solid var(--mid); padding:18px 0 }
.faq-q { display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:15px; color:var(--primary) }
.faq-q i { color:var(--secondary); transition:transform .25s; font-size:13px }
.faq-a { font-size:14px; color:#666; max-height:0; overflow:hidden; transition:max-height .35s, padding .35s }
.faq-item.open .faq-a { max-height:200px; padding-top:12px }
.faq-item.open .faq-q i { transform:rotate(180deg) }

/* ========== CTA BAND ========== */
.cta-band { background:var(--secondary); padding:64px 24px; text-align:center }
.cta-band h2 { font-family:'Playfair Display',serif; font-size:32px; color:var(--white); margin-bottom:14px }
.cta-band p { color:rgba(255,255,255,.9); margin-bottom:28px; font-size:16px }
.btn-white { background:var(--white); color:var(--secondary); font-weight:700 }
.btn-white:hover { background:var(--light); color:var(--secondary) }

/* ========== CONTACT SECTION ========== */
.contact-wrap { display:grid; grid-template-columns:1fr 1.4fr; gap:60px; align-items:start }
.contact-info h3 { font-family:'Playfair Display',serif; font-size:26px; margin-bottom:20px }
.contact-info .info-row { display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; font-size:14px; color:#555 }
.contact-info .info-row i { color:var(--secondary); font-size:18px; margin-top:2px; flex-shrink:0 }
.contact-info .info-row a { color:#555 }
.contact-info .social-row { display:flex; gap:12px; margin-top:24px }
.contact-info .social-row a { width:38px; height:38px; border-radius:50%; border:1px solid var(--mid); display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:15px; transition:all .2s }
.contact-info .social-row a:hover { background:var(--secondary); border-color:var(--secondary); color:var(--white) }

/* ========== FORM ========== */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form-grid .full { grid-column:span 2 }
.form-group { display:flex; flex-direction:column; gap:6px }
.form-group label { font-size:13px; font-weight:500; color:var(--primary) }
.form-group input, .form-group select, .form-group textarea { padding:11px 14px; border:1px solid var(--mid); border-radius:7px; font-size:14px; font-family:'Inter',sans-serif; color:var(--primary); background:var(--bg); transition:border-color .2s; outline:none }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--secondary) }
.form-group textarea { min-height:120px; resize:vertical }
.form-submit { margin-top:8px }
.form-note { font-size:12px; color:#888; margin-top:10px }

/* ========== MAP ========== */
.map-wrap { border-radius:var(--radius); overflow:hidden; height:320px; background:var(--light); display:flex; align-items:center; justify-content:center; border:1px solid var(--mid) }
.map-wrap iframe { width:100%; height:100%; border:none }

/* ========== FOOTER ========== */
.site-footer { background:var(--primary); color:rgba(255,255,255,.75) }
.footer-upper { background:var(--light); padding:50px 24px 40px }
.footer-upper-inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px }
.footer-brand .logo-text { color:var(--primary) }
.footer-brand .logo-text span { color:var(--secondary) }
.footer-brand p { font-size:13px; color:#777; margin-top:14px; max-width:260px; line-height:1.6 }
.footer-col h4 { font-size:13px; font-weight:700; color:var(--primary); letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px }
.footer-col ul li { margin-bottom:10px }
.footer-col ul li a { font-size:13px; color:#777; transition:color .2s }
.footer-col ul li a:hover { color:var(--secondary) }
.footer-col .contact-line { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:13px; color:#777 }
.footer-col .contact-line i { color:var(--secondary); margin-top:2px; flex-shrink:0 }
.footer-lower { padding:20px 24px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; font-size:12px; max-width:100% }
.footer-lower-inner { max-width:1240px; margin:0 auto; width:100%; display:flex; justify-content:space-between; align-items:center }
.footer-lower p { color:rgba(255,255,255,.5) }
.footer-lower a { color:rgba(255,255,255,.5) }
.footer-lower a:hover { color:var(--secondary) }

/* ========== INNER PAGE HERO ========== */
.page-hero { background:var(--light); padding:56px 24px; border-bottom:1px solid var(--mid) }
.page-hero-inner { max-width:1240px; margin:0 auto }
.page-hero .breadcrumb { font-size:12px; color:#999; margin-bottom:12px }
.page-hero .breadcrumb a { color:#999 }
.page-hero .breadcrumb span { color:var(--secondary); margin:0 6px }
.page-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(28px,4vw,42px); color:var(--primary); margin-bottom:10px }
.page-hero p { font-size:15px; color:#666 }

/* ========== ABOUT PAGE ========== */
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
.team-card { text-align:center }
.team-card img { width:100%; height:260px; object-fit:cover; border-radius:var(--radius); margin-bottom:16px }
.team-card h4 { font-size:16px; font-weight:600; color:var(--primary) }
.team-card p { font-size:13px; color:#888; margin-top:4px }

/* ========== COOKIE BANNER ========== */
#cookie-banner { position:fixed; bottom:0; left:0; right:0; background:var(--primary); color:var(--white); padding:18px 24px; z-index:9999; display:none; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap }
#cookie-banner.show { display:flex }
#cookie-banner p { font-size:13px; color:rgba(255,255,255,.85); max-width:680px }
#cookie-banner a { color:var(--secondary) }
#cookie-banner .cookie-btns { display:flex; gap:10px; flex-shrink:0 }
.btn-cookie-accept { background:var(--secondary); color:var(--white); padding:8px 20px; border-radius:5px; font-size:13px; font-weight:600; border:none; cursor:pointer }
.btn-cookie-decline { background:transparent; color:rgba(255,255,255,.7); padding:8px 16px; border-radius:5px; font-size:13px; border:1px solid rgba(255,255,255,.25); cursor:pointer }

/* ========== LEGAL/LEGAL PAGES ========== */
.legal-body { max-width:860px }
.legal-body h2 { font-family:'Playfair Display',serif; font-size:22px; color:var(--primary); margin:36px 0 12px }
.legal-body h3 { font-size:16px; font-weight:600; color:var(--primary); margin:24px 0 8px }
.legal-body p, .legal-body li { font-size:14px; color:#555; line-height:1.75; margin-bottom:10px }
.legal-body ul { padding-left:20px; list-style:disc }
.legal-body table { width:100%; border-collapse:collapse; margin:20px 0; font-size:13px }
.legal-body table th { background:var(--light); padding:10px 14px; text-align:left; font-weight:600; color:var(--primary); border:1px solid var(--mid) }
.legal-body table td { padding:10px 14px; border:1px solid var(--mid); color:#555 }

/* ========== RESPONSIVE ========== */
@media(max-width:1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr) }
  .testimonials-grid { grid-template-columns:repeat(2,1fr) }
  .process-steps { grid-template-columns:repeat(2,1fr) }
  .footer-upper-inner { grid-template-columns:1fr 1fr }
  .stats-inner { grid-template-columns:repeat(2,1fr) }
}

@media(max-width:768px) {
  nav.main-nav { display:none }
  .hamburger { display:flex }
  .hero { min-height:420px }
  .two-col { grid-template-columns:1fr; gap:32px }
  .two-col.reverse { direction:ltr }
  .services-grid { grid-template-columns:1fr }
  .testimonials-grid { grid-template-columns:1fr }
  .process-steps { grid-template-columns:1fr 1fr }
  .contact-wrap { grid-template-columns:1fr }
  .form-grid { grid-template-columns:1fr }
  .form-grid .full { grid-column:auto }
  .footer-upper-inner { grid-template-columns:1fr 1fr }
  .stats-inner { grid-template-columns:1fr 1fr }
  .team-grid { grid-template-columns:1fr }
  .footer-lower-inner { flex-direction:column; gap:8px; text-align:center }
}

@media(max-width:480px) {
  .footer-upper-inner { grid-template-columns:1fr }
  .process-steps { grid-template-columns:1fr }
  .hero-btns { flex-direction:column }
}