/* Inter Font - Local fonts */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700.woff2') format('woff2');
}

:root {
  --brand-primary: #1d6f6d;
  --brand-accent: #e3f6f5;
  --brand-accent-2: #f2fffe;
  --gradient-hero: linear-gradient(120deg,#103635 0%,#1d6f6d 55%,#2f9c9a 100%);
  --radius-xl: 28px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(180deg,#f7fbfb,#ffffff 120%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

/* Buttons */
.btn-outline-primary {color:var(--brand-primary); border-color:var(--brand-primary); background:transparent; transition:background .3s, color .3s, box-shadow .3s;} 
.btn-outline-primary:hover {color:#fff; background:var(--brand-primary); box-shadow:0 4px 12px -4px rgba(17,81,79,.4);}
.btn-primary {background: var(--brand-primary); border-color: var(--brand-primary); box-shadow:0 4px 12px -4px rgba(17,81,79,.4);} 
.btn-primary:hover {background:#15514f; border-color:#15514f; box-shadow:0 6px 18px -6px rgba(17,81,79,.55);} 
.btn-outline-light:hover {color:#103635; background:#fff;}

/* Hero */
.hero {min-height: calc(100vh - 80px); overflow: hidden; position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate;}
.hero-bg {position:absolute; inset:0; z-index:0;}
.hero .placeholder-video, .hero video {object-fit: cover;}
.video-overlay {position:absolute; inset:0; background: radial-gradient(circle at 40% 40%, rgba(0,0,0,.25), rgba(0,0,0,.55)); z-index:1; backdrop-filter:blur(1px);}
.hero-content {z-index:2; max-width:880px;}
.hero-content h1 {background:linear-gradient(90deg,#ffffff,#e6fffd); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 18px rgba(0,0,0,.35);}

/* Video Fallback für Ladefehler */
.video-fallback {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Video-Fallback wird nur angezeigt wenn Video fehlschlägt */
.hero video:not([src]), .hero video[src=""] ~ .video-fallback {
  opacity: 1;
}

/* Verspieltes Blob Element */
.hero-blob {position:absolute; top:55%; left:50%; width:70vmin; height:70vmin; background:radial-gradient(circle at 30% 35%, #33c5c1 0%, #1d6f6d 45%, #0f3533 75%); filter:blur(70px) saturate(140%); opacity:.22; transform:translate(-50%,-50%); animation: blobFloat 16s ease-in-out infinite alternate; pointer-events:none; z-index:0;}
@keyframes blobFloat {0%{transform:translate(-52%,-48%) scale(1);}50%{transform:translate(-48%,-52%) scale(1.08);}100%{transform:translate(-50%,-50%) scale(.95);} }

/* Sections */
.py-6 {padding-top:4.5rem; padding-bottom:4.5rem;}
.section-alt {background:linear-gradient(180deg,#ffffff,#ecf9f9 120%);} 
.section-divider {position:relative;}
.section-divider:not(#leistungen):after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:70px;
  background: radial-gradient(ellipse at 50% 0%, rgba(29,111,109,.15), rgba(255,255,255,0) 70%);
  pointer-events:none;
}

/* Cards */
.card {transition:transform .5s cubic-bezier(.25,.6,.3,1), box-shadow .4s; border-radius: var(--radius-xl);}
.card:hover {transform:translateY(-6px); box-shadow:0 18px 40px -18px rgba(9,49,48,.4);} 
.card .ratio {border-top-left-radius:var(--radius-xl); border-top-right-radius:var(--radius-xl);} 

/* Card Images - richtige Darstellung ohne Verzerrung */
.card .ratio img,
.img-fit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
} 

/* Über mich Bildband */
.image-band {position:relative; min-height:360px; background:linear-gradient(125deg,#a7830da3,#e4cc7c38); display:flex; align-items:center; color:black; overflow:hidden; border-radius: clamp(0px, 3vw, 48px);}
.image-band:before, .image-band:after {content:""; position:absolute; inset:0; background-image:url('/static/img/IMG_0613.webp'); background-size:cover; background-position:center; mix-blend-mode:overlay; opacity:.15;}
.image-band:after {background:radial-gradient(circle at 75% 25%, rgba(255,255,255,.3), rgba(255,255,255,0)); mix-blend-mode:soft-light; opacity:.25;}

/* Footer */
.footer-link {color: #ccc; text-decoration:none;}
.footer-link:hover {color:#fff;}

/* Animations / Scroll In */
[data-animate] {opacity:0; transform:translateY(22px) scale(.98); transition: opacity .7s cubic-bezier(.4,.0,.2,1), transform .7s cubic-bezier(.4,.0,.2,1); will-change:transform,opacity;}
[data-animate].in-view {opacity:1; transform:none;}
.stagger [data-animate] {transition-delay: var(--stagger,0ms);} 

/* Parallax (Hero) */
.parallax-layer {position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.07),rgba(255,255,255,0)); mix-blend-mode:overlay; opacity:.3;}

/* Einfaches Transform-basiertes Parallax - funktioniert überall */
.image-section {
  position: relative; 
  min-height: 80vh; 
  overflow: hidden; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.image-bg {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  background-color: #1d6f6d; /* Fallback-Farbe passend zum Theme */
}

/* Spezifische Hintergründe mit größeren Bildern */
.image-bg.image-osteopathy {
  background-image: url('/static/img/IMG_0304.webp');
}
.image-bg.image-shoulder {
  background-image: url('/static/img/Hand_Schulter.webp');
}
.image-bg.image-practice {
  background-image: url('/static/img/IMG_0670.webp');
}
.image-bg.image-shoulder2 {
  background-image: url('/static/img/Hand_Schulter_2.webp');
}

.image-overlay {position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 1;}
.image-content {position: relative; z-index: 2; text-align: center; color: #fff; max-width: 800px; padding: 2rem;}

/* Hover-Effekt */
.image-section:hover .image-overlay {
  background: rgba(0,0,0,.35);
  transition: background 0.3s ease;
}

@media (max-width: 768px) {
  .image-section {min-height: 50vh;}
  .image-bg {
    top: -10%; 
    height: 120%; 
    background-size: cover;
    background-position: center;
  }
}

/* Accessibility: Motion reduzieren */
@media (prefers-reduced-motion: reduce){
	.hero-blob, [data-animate] {animation:none !important; transition:none !important;}
}

/* Utilities */
.text-gradient {background:linear-gradient(90deg,#ffffff,#c7fff9); -webkit-background-clip:text; background-clip:text; color:transparent;}
.max-w-md {max-width:640px;}

/* Blockquote with brand primary border */
.blockquote.border-start {
  border-color: var(--brand-primary) !important;
}

/* Icons with brand primary color */
.text-primary {
  color: var(--brand-primary) !important;
}

/* Performance helpers */
img, video {max-width:100%; height:auto;}
img[loading="lazy"] {filter:blur(0);}

.border-primary {
  border-color: var(--brand-primary) !important;
}

#aboutImage {
  border-radius: clamp(0px, 3vw, 48px);
  transition: transform .5s cubic-bezier(.25,.6,.3,1);
}

img[src$="ohrakupressur.jpeg"] {
  object-position: 0px bottom !important;
}

img[src$="IMG_0687.webp"] {
  object-position: 0px top !important;
}