/* ====================  Lokale Schrift  ==================== */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
}

/* ====================  Design-Variablen ==================== */
:root {
  --ease-smooth: cubic-bezier(0.42,0,0.2,1);
  --duration: 0.45s;
  --rot-krftig: #7c0a02;
  --rot-burgunder: #520000;
  --rot-kirsch:  #a4161a;
  --beige:       #fef5f5;
}

/* ====================  Grundlayout  ==================== */
html, body {
  background: var(--beige);
  margin: 0;
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: 'Open Sans', sans-serif;
  color: var(--rot-burgunder);
  scroll-behavior: smooth;
  padding-top: 260px;
  transition: padding var(--duration) var(--ease-smooth);
}
body.body-shrink { padding-top: 120px; }

/* ====================  Header / Navigation  ==================== */
.navbar {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: var(--rot-burgunder);
  box-shadow: 0 2px 5px rgba(0,0,0,.08);
  display: flex; flex-direction: column; align-items: center;
  padding: .6rem 0 1rem;
  transition: padding var(--duration) var(--ease-smooth), background var(--duration) linear;
}
.navbar.scrolled {
  padding: .2rem 0 .5rem;
  background: rgba(82,0,0,.9);
}
.logo-img { width: 100%; text-align: center; transition: width var(--duration)var(--ease-smooth), margin var(--duration)var(--ease-smooth);}
.logo-img img { height: 220px; transition: height var(--duration)var(--ease-smooth);}
.navbar.scrolled .logo-img { width: auto; margin-left: 1rem;}
.navbar.scrolled .logo-img img { height: 80px;}

.menu {
  display: flex; flex-wrap: nowrap; gap: 1rem;
  margin-top: .5rem; padding: 0 .5rem;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  transition: margin var(--duration) var(--ease-smooth);
}
.menu::-webkit-scrollbar{display:none;}
.navbar.scrolled .menu{margin-top:.2rem;}
.menu a{
  flex:0 0 auto;text-decoration:none;color:#fff;font-weight:600;
  padding:.5rem .8rem;border-radius:5px;transition:background .3s;
}
.menu a:hover{background:var(--rot-kirsch);}
.menu a.social{padding:0;display:flex;align-items:center;}
.menu a.social img{width:26px;height:26px;filter:brightness(0)invert(1);transition:filter .3s;}
.menu a.social:hover img{filter:brightness(.8)invert(1);}

/* ====================  Hero (schmaler Streifen) ==================== */
.hero{
  position:relative;background:url('/hero.jpg') center/cover no-repeat;
  height:clamp(180px,28vh,340px);display:flex;align-items:center;justify-content:center;
  padding:0 1.5rem;color:#fff;text-align:center;
}
.hero::after{content:'';position:absolute;inset:0;background:rgba(82,0,0,.45);z-index:0;}
.hero-text{position:relative;z-index:1;}
.hero-text h1{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3.2vw,2.2rem);margin:0;}
.btn{
  background:var(--rot-kirsch);padding:.8rem 1.5rem;color:#fff;text-decoration:none;
  border-radius:5px;font-weight:bold;margin-top:1rem;display:inline-block;transition:background .3s;
}
.btn:hover{background:#750000;}

/* ====================  Floating Call Button ==================== */
.btn-floating{
  position:fixed;bottom:1.5rem;right:1.5rem;width:60px;height:60px;border-radius:50%;
  background:var(--rot-kirsch);color:#fff;display:flex;justify-content:center;align-items:center;
  font-size:1.75rem;text-decoration:none;box-shadow:0 4px 8px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transform:scale(.8);transition:opacity .3s,transform .3s;z-index:1100;
}
.btn-floating.show{opacity:1;pointer-events:auto;transform:scale(1);}

/* ====================  Über-mich ==================== */
.about{padding:4rem 2rem;background:#fff;}
.about-content{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;}
.about-img{
  width:200px;height:200px;border-radius:50%;object-fit:cover;
  border:4px solid var(--rot-kirsch);box-shadow:0 0 10px rgba(0,0,0,.1);
}
.about-text{max-width:650px;flex:1;}

/* Taglines */
.tagline{font-size:1.3rem;font-weight:600;color:var(--rot-krftig);margin:0 0 .4rem;}
.tagline-small{font-style:italic;font-size:1.05rem;color:var(--rot-burgunder);margin:0 0 1.3rem;}

/* Inline-Topics */
.topic{
  color:var(--rot-kirsch);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding-right:.35rem;white-space:nowrap;
}
.about p{font-size:1rem;line-height:1.6;margin:0 0 1rem;}
.about h2{
  font-family:'Playfair Display',serif;font-size:2rem;color:var(--rot-krftig);margin-bottom:1rem;
}
.signature{display:block;margin-top:1.5rem;max-width:500px;float:right;}

/* ====================  Leistungen / Kontakt / Footer – unverändert  ==================== */
/* (Abschnitte Services, Contact, Footer bleiben wie in vorheriger Version) */

.services{background:var(--beige);padding:4rem 2rem;text-align:center;}
.services h2{font-size:2rem;font-family:'Playfair Display',serif;color:var(--rot-krftig);margin-bottom:1.2rem;}
.services-intro{max-width:650px;margin:0 auto 2.5rem;font-size:1.05rem;line-height:1.6;color:var(--rot-burgunder);}
.services-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;}
.card{
  background:linear-gradient(145deg,#fff 0%,#fff7f7 100%);padding:1.75rem 1.25rem;border-radius:12px;width:220px;
  box-shadow:0 3px 8px rgba(0,0,0,.08);transition:transform .3s,box-shadow .3s;border:2px solid transparent;text-align:center;
}
.card:hover{transform:translateY(-6px);border-color:var(--rot-kirsch);box-shadow:0 6px 12px rgba(0,0,0,.15);}
.card img{width:56px;margin-bottom:.75rem;}
.card h3{margin:0 0 .5rem;font-size:1.1rem;color:var(--rot-krftig);}
.card p{margin:0;font-size:.9rem;color:var(--rot-burgunder);line-height:1.45;}

section[id]{scroll-margin-top:120px;}
.contact{padding:4rem 2rem;background:#fff;text-align:center;}
.contact h2{font-size:2rem;font-family:'Playfair Display',serif;color:var(--rot-krftig);margin-bottom:2rem;}
.phone-note{font-size:.95rem;color:var(--rot-burgunder);margin-bottom:.3rem;}
.main-phone{margin-bottom:2rem;font-size:clamp(1.8rem,8vw,3rem);font-weight:bold;padding-top:1rem;line-height:1;}
.main-phone a{color:var(--rot-kirsch);text-decoration:none;white-space:nowrap;}
.main-phone a:hover{text-decoration:underline;}
.contact-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin-bottom:2rem;}
.contact-box{background:#fff7f7;border-left:4px solid var(--rot-kirsch);padding:1rem 1.5rem;border-radius:6px;width:300px;box-shadow:0 1px 5px rgba(0,0,0,.05);}
.contact-box h3{color:var(--rot-burgunder);margin-bottom:.5rem;font-size:1.2rem;}
.contact-box p,.contact-box a{color:var(--rot-burgunder);font-size:.95rem;line-height:1.5;}
.contact-box a{text-decoration:none;font-weight:600;}
.contact-box a:hover{text-decoration:underline;}
.map-container iframe{width:100%;height:350px;border-radius:5px;border:1px solid var(--rot-kirsch);}

footer{text-align:center;padding:2rem;background:var(--rot-burgunder);color:#fff;font-size:.9rem;}
footer a{color:#fff;margin-left:1rem;font-size:.85rem;text-decoration:underline;}
footer a:hover{opacity:.8;}

@media(max-width:768px){
  .about{text-align:center;}
  .logo-img img{height:140px;}
  .hero{height:clamp(160px,26vh,260px);padding:0 1rem;}
  .hero-text h1{font-size:1.8rem;}
  .contact-grid{flex-direction:column;align-items:center;}
  .card{width:180px;}
}