/* Google Fonts – Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-900-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/GreatVibes-Regular.woff2') format('woff2'),
       url('../fonts/GreatVibes-Regular.woff') format('woff');
}
html{
  color-scheme: light only;
}
:root{
  --primary:#8B1E2D;
  --primary-dark:#6b1523;
  --primary-soft:#f8e8ea;
  --accent:#fff5f5;
  --text:#0D1B2A;
  --muted:#60656D;
  --white:#fff;
  --border:#e8d0d3;
  --shadow:0 22px 70px rgba(139,30,45,.16);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%;}
body{margin:0;font-family:'Montserrat',Arial,Helvetica,sans-serif;color:var(--text);background:white;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ===== Page Preloader ===== */
#apg-loader{
  position:fixed;
  inset:0;
  z-index:999999;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .45s ease,visibility .45s ease;
}
#apg-loader-ring{
  position:relative;
  width:180px;
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#apg-loader-ring::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid #f8e8ea;
  border-top-color:#8B1E2D;
  animation:apg-loader-spin .9s linear infinite;
}
#apg-loader img{
  width:120px !important;
  height:auto !important;
  position:relative;
  border-radius:0 !important;
  object-fit:contain;
  animation:apg-loader-pulse 1.1s ease-in-out infinite;
}
@keyframes apg-loader-spin{
  to{transform:rotate(360deg)}
}
@keyframes apg-loader-pulse{
  0%,100%{transform:scale(.95);opacity:.85}
  50%{transform:scale(1.02);opacity:1}
}
body.apg-loaded #apg-loader{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  #apg-loader img{animation:none}
  #apg-loader-ring::before{animation:none}
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 32px));margin:auto}
.topbar{background:var(--primary-dark);color:white;font-size:14px}
.topbar .container{display:flex;justify-content:space-between;gap:20px;padding:9px 0;flex-wrap:wrap}
.header{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid var(--border)}
.nav{min-height:104px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.logo img{height:88px;width:auto;max-width:260px;}
.nav-links{display:flex;align-items:center;gap:20px;font-weight:700;color:#294653}
.nav-links a:hover{color:var(--primary)}
.btn{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:var(--primary);color:white!important;font-weight:800;box-shadow:var(--shadow);border:0;cursor:pointer}
.btn:hover{background:var(--primary-dark);transform:translateY(-2px)}
.btn-light{background:white;color:var(--primary-dark)!important;border:1px solid var(--border)}
.menu{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:46px;
  height:46px;
  background:var(--primary);
  color:white;
  border:0;
  border-radius:12px;
  padding:0;
  flex-shrink:0;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:background .18s,transform .18s;
}
.menu:hover{background:var(--primary-dark)}
.menu:active{transform:scale(.95)}
.menu-bar{display:block;width:20px;height:2.5px;border-radius:2px;background:white;transition:transform .25s ease,opacity .2s ease}
.menu[aria-expanded="true"] .menu-bar:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu[aria-expanded="true"] .menu-bar:nth-child(2){opacity:0}
.menu[aria-expanded="true"] .menu-bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.hero{position:relative;overflow:hidden;padding:96px 0;background:radial-gradient(circle at 82% 18%,rgba(139,30,45,.20),transparent 34%),linear-gradient(135deg,#fde8ea 0%,#fff 58%,#f8fcfd 100%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:54px}
.hero-grid > div:first-child{display:flex;flex-direction:column;justify-content:center;align-self:center;align-items:flex-start;}
.hero-grid > .hero-photo{align-self:center;}
.badge{display:inline-flex;background:white;color:var(--primary-dark);border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:900;margin-bottom:18px}
h1{font-size:clamp(38px,5.4vw,68px);line-height:1.02;letter-spacing:-.04em;margin:0 0 22px}
h2{font-size:clamp(28px,4vw,44px);line-height:1.12;letter-spacing:-.03em;margin:0 0 18px}
h3{font-size:22px;margin:0 0 10px}
.lead{font-size:20px;color:var(--muted);max-width:760px;margin:0 0 28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-photo{border-radius:34px;overflow:hidden;box-shadow:var(--shadow);border:10px solid white;background:#ddd;display:flex;align-items:stretch;}
.hero-photo img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block;}
.info-strip{position:relative;margin-top:-38px;z-index:2}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
.info-item strong{display:block;color:var(--primary-dark);font-size:18px}
.section{padding:88px 0}
.section-soft{background:var(--accent)}
.section-head{max-width:820px;margin:0 auto 36px;text-align:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:0 14px 40px rgba(31,54,66,.07);transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card-img{height:230px;border-radius:22px;overflow:hidden;margin:-8px -8px 20px}
.card-img img{width:100%;height:100%;object-fit:cover}
.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:start}
.list{padding:0;margin:18px 0 0;list-style:none}
.list li{position:relative;padding:9px 0 9px 34px}
.list li:before{content:"✓";position:absolute;left:0;top:10px;width:23px;height:23px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);display:grid;place-items:center;font-weight:900}
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.city{border-radius:26px;padding:34px;background:white;border:1px solid var(--border);box-shadow:0 12px 35px rgba(31,54,66,.07)}
.city strong{display:block;font-size:25px;color:var(--primary-dark);margin-bottom:8px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery img{height:230px;width:100%;object-fit:cover;border-radius:22px;box-shadow:0 10px 28px rgba(31,54,66,.08)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.member{background:white;border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:0 12px 35px rgba(31,54,66,.07)}
.member img{width:100%;height:400px;object-fit:cover}
.management-team{
    gap:40px;
}
.member div{padding:18px;overflow-wrap:break-word;word-break:break-word;}
.page-hero{padding:35px 0;background:linear-gradient(135deg,#fde8ea,#fff)}
.content-box{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 35px rgba(31,54,66,.07);padding:34px}
.form{display:grid;gap:14px}
input,textarea,select{width:100%;border:1px solid var(--border);border-radius:16px;padding:14px 16px;font:inherit}
textarea{min-height:140px}
.footer{background:#102936;color:#d8e7eb;padding:60px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.footer h3,.footer h4{color:white}
.footer a{display:block;color:#d8e7eb;margin:7px 0}
.footer-contact-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px 24px;margin-top:16px;}
.footer-contact-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:14px;color:#d8e7eb;line-height:1.5;}
.footer-contact-row:last-child{margin-bottom:0;}
.footer-contact-icon{font-size:16px;flex-shrink:0;margin-top:1px;}
.footer-social{display:flex;gap:10px;margin-top:18px;}
.footer-social-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:white;text-decoration:none;font-size:20px;transition:background .18s,transform .18s;}
.footer-social-btn:hover{background:rgba(139,30,45,.5);transform:translateY(-2px);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:20px;color:#a9c3ca;font-size:14px;text-align:center;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}
.footer-cookie-btn{background:none;border:none;color:#a9c3ca;font-size:14px;cursor:pointer;padding:0;font-family:inherit;}
.footer-cookie-btn:hover{color:white;text-decoration:underline;}
@media(max-width:920px){
  .topbar{display:none}
  body.apg-menu-open{overflow:hidden}
  .nav{align-items:center;flex-direction:row;justify-content:space-between;padding:14px 0;position:relative}
  .menu{display:inline-flex}
  .nav-links{
    display:none;
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }
  .nav-links.open{
    display:flex;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    border-radius:18px;
    box-shadow:0 18px 50px rgba(31,54,66,.18);
    padding:14px 16px;
    margin-top:10px;
    gap:4px;
    z-index:99;
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links.open a,
  .nav-links.open .nav-trigger{
    width:100%;
    padding:10px 4px;
    border-bottom:1px solid var(--border);
  }
  .nav-links.open .nav-item{
    width:100%;
    padding:0;
    border-bottom:1px solid var(--border);
  }
  .nav-links.open .nav-item .nav-trigger{
    border-bottom:0 !important;
  }
  .nav-links.open .mega-menu{
    border-bottom:0;
    padding-bottom:0;
    margin-bottom:0;
  }
  .nav-links.open .btn{
    width:100%;
    margin-top:10px;
    border-bottom:0;
  }
  .hero-grid,.two-col,.footer-grid{grid-template-columns:1fr}
  .cards,.city-grid,.team-grid,.gallery,.info-grid{grid-template-columns:1fr}
  .hero{padding:62px 0}
  .hero-photo{min-height:320px}
}


/* ===== Improved Leistung Toast Cards ===== */

.service-toast-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.service-toast{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  min-height:420px;
  color:white;
  display:flex;
  align-items:flex-end;
  box-shadow:0 22px 55px rgba(0,0,0,.18);
  transition:.35s ease;
  isolation:isolate;
}

.service-toast:hover{
  transform:translateY(-8px) scale(1.01);
}

.service-toast::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(139,30,45,.95), rgba(139,30,45,.15));
  z-index:1;
}

.service-toast img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.service-toast-content{
  position:relative;
  z-index:2;
  padding:32px;
  width:100%;
}

.service-toast h3{
  font-size:30px;
  margin-bottom:14px;
  color:white;
}

.service-toast p{
  color:rgba(255,255,255,.92);
  margin-bottom:20px;
}

.service-toast .btn{
  background:white;
  color:var(--primary-dark)!important;
  box-shadow:none;
}

@media(max-width:920px){
  .service-toast-grid{
    grid-template-columns:1fr;
  }

  .service-toast{
    min-height:340px;
  }
}


/* ===== Top Leistungen Toast / Mega Menu ===== */
.nav-item{
  position:relative;
}

.nav-trigger{
  background:transparent;
  border:0;
  font:inherit;
  font-weight:700;
  color:#294653;
  cursor:pointer;
  padding:0;
}

.nav-trigger:hover{
  color:var(--primary);
}

.mega-menu{
  position:absolute;
  top:36px;
  left:50%;
  transform:translateX(-50%) translateY(12px);
  width:760px;
  background:white;
  border:1px solid var(--border);
  border-radius:28px;
  box-shadow:0 30px 80px rgba(139,30,45,.22);
  padding:20px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.22s ease;
  z-index:200;
}

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.mega-menu.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.mega-title{
  padding:8px 10px 16px;
  color:var(--primary-dark);
  font-size:18px;
  font-weight:900;
}

.mega-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.mega-link{
  display:flex!important;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:20px;
  background:var(--accent);
  border:1px solid transparent;
}

.mega-link:hover{
  background:white;
  border-color:var(--primary);
  box-shadow:0 12px 30px rgba(139,30,45,.14);
}

.mega-link img{
  width:72px;
  height:58px;
  object-fit:cover;
  border-radius:14px;
}

.mega-link strong{
  display:block;
  color:var(--primary-dark);
  font-size:16px;
}

.mega-link span{
  display:block;
  color:var(--muted);
  font-weight:500;
  font-size:13px;
  line-height:1.35;
}

.video-box{
  overflow:hidden;
  border-radius:32px;
  box-shadow:var(--shadow);
  border:10px solid white;
  background:#000;
}

.video-box video{
  width:100%;
  display:block;
}

.quote-box{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;
  border-radius:28px;
  padding:34px;
  box-shadow:var(--shadow);
  font-size:20px;
  line-height:1.55;
}

.quote-box small{
  display:block;
  margin-top:18px;
  opacity:.85;
  font-size:15px;
}

@media(max-width:920px){
  .nav-item{
    width:100%;
  }

  .mega-menu{
    position:static;
    transform:none!important;
    width:100%;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    display:none;
    margin-top:12px;
  }

  .mega-menu.open{
    display:block;
  }

  .mega-grid{
    grid-template-columns:1fr;
  }
}


/* ===== Mega menu refinements (desktop hover/click area) ===== */

.nav-item{
  position:relative;
  padding:14px 0;
}

.nav-trigger{
  padding:12px 4px;
}

/* bridge area so mouse can move from Leistungen to dropdown without closing */
.nav-item::after{
  content:"";
  position:absolute;
  left:-40px;
  right:-40px;
  top:38px;
  height:28px;
}

.mega-menu{
  top:58px;
  left:50%;
  max-height:calc(100vh - 120px);
  overflow:auto;
}

.mega-link{
  cursor:pointer;
}

/* Smaller headings on individual Leistung pages */
.page-hero h1{
  font-size:clamp(32px,4.2vw,52px);
  letter-spacing:-.025em;
}

.service-page-title,
.page-hero .lead{
  max-width:820px;
}

.page-hero .container {
  text-align: center;
}

.page-hero .badge,
.page-hero .lead {
  margin-left: auto;
  margin-right: auto;
}

/* Smaller titles inside cards/toasts */
.service-toast h3,
.card h3{
  font-size:clamp(20px,2.3vw,26px);
  line-height:1.16;
}

/* Make nav menu usable on smaller screens too */
@media(max-width:920px){
  .nav-item{
    padding:0;
  }

  .nav-item::after{
    display:none;
  }

  .nav-trigger{
    padding:12px 0;
  }

  .mega-menu{
    top:auto !important;
    max-height:none;
    overflow:visible;
  }
}


/* Scroll to top button */
/* ===== Hierarchical team layout ===== */
.team-hierarchy{
  display:grid;
  gap:28px;
}

.team-level{
  display:flex;
  justify-content:center;
}

.team-level .member{
  width:min(360px,100%);
  min-width:0;
  flex:0 0 auto;
}

.team-employees{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:10px;
}

.team-level-label{
  text-align:center;
  color:var(--primary-dark);
  font-weight:900;
  margin:8px 0 -8px;
  letter-spacing:.02em;
}

@media(max-width:920px){
  .team-employees{
    grid-template-columns:1fr;
  }

  .team-level{
    flex-direction:column;
    align-items:center;
    gap:20px;
  }

  .team-level .member{
    width:100%;
  }
}


/* ===== City image cards ===== */
.city-grid{
  align-items:stretch;
}

.city-image-card{
  position:relative;
  overflow:hidden;
  min-height:310px;
  border-radius:30px;
  display:flex;
  align-items:flex-end;
  color:white;
  box-shadow:0 22px 55px rgba(0,0,0,.16);
  transition:.3s ease;
  background:#0f172a;
}

.city-image-card:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow);
}

.city-image-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.4s ease;
}

.city-image-card:hover img{
  transform:scale(1.06);
}

.city-image-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(7,120,135,.92), rgba(139,30,45,.12));
}

.city-image-content{
  position:relative;
  z-index:2;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.city-image-content strong{
  display:block;
  font-size:28px;
  font-weight:900;
  color:white;
  margin:0;
  line-height:1.2;
}

.city-image-content span{
  color:rgba(255,255,255,.92);
  font-size:14px;
  line-height:1.5;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
}

.city-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:40px;
  margin-top:8px;
  padding:0 22px;
  background:var(--primary);
  color:white!important;
  border:0;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  width:fit-content;
  box-shadow:0 12px 30px rgba(139,30,45,.28);
  text-shadow:none;
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.city-card:hover .city-btn,
.city-card:focus-within .city-btn{
  background:var(--primary-dark);
  transform:translateY(-2px);
}


/* ===== Scroll-to-top button ===== */
.scroll-top{
  position:fixed;
  right:18px;
  bottom:18px;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;
  cursor:pointer;
  z-index:120;
  box-shadow:0 16px 36px rgba(139,30,45,.3), inset 0 1px 0 rgba(255,255,255,.25);
  opacity:0;
  visibility:hidden;
  transform:translateY(16px);
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease, box-shadow .25s ease;
}

.scroll-top svg{
  display:block;
}

.scroll-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.scroll-top:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(139,30,45,.4), inset 0 1px 0 rgba(255,255,255,.25);
}

body.apg-menu-open .scroll-top{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none;
}


/* ===== Patient testimonial section ===== */
.patient-section{
  padding:90px 0;
}

.patient-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:46px;
  align-items:start;
}

.patient-text{
  position:relative;
  padding-top:6px;
}

.patient-text h2{
  margin-bottom:28px;
}

.patient-quote{
  position:relative;
  padding-left:24px;
  border-left:3px solid var(--primary);
  font-size:22px;
  line-height:1.7;
  color:var(--text);
  font-weight:500;
}

.patient-author{
  margin-top:24px;
  padding-left:24px;
  color:var(--primary-dark);
  font-weight:900;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.patient-image{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  box-shadow:var(--shadow);
  min-height:520px;
}

.patient-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

@media(max-width:920px){
  .patient-layout{
    grid-template-columns:1fr;
  }

  .patient-image{
    min-height:340px;
  }

  .patient-quote{
    font-size:20px;
  }
}


/* Owner image fix */
.owner-image{object-position:center top;}


/* ===== Welcome section – engaging split layout ===== */
.welcome-section {
  background: linear-gradient(135deg, #fde8ea 0%, #fff 60%, #f8fcfd 100%);
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: start;
}

.welcome-text {
  max-width: 600px;
}

.welcome-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.welcome-highlight {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-dark);
  position: relative;
  padding-left: 18px;
}

.welcome-highlight::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 100%;
  border-radius: 4px;
  background: var(--primary);
}

.welcome-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 0 10px 32px rgba(139,30,45,.09);
  text-align: center;
  transition: .25s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(139,30,45,.16);
  border-color: var(--primary);
}

.stat-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.stat-num {
  font-size: 42px;
  font-weight: 900;
  color: var(--primary-dark);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.3;
}

.stat-card-wide {
  grid-column: 1 / -1;
  background: white;
  min-height: 80px;
}

.stat-card-wide .stat-icon {
  font-size: 28px;
}

.stat-label-big {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary-dark);
  line-height: 1.3;
}

@media(max-width:920px) {
  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .welcome-text {
    max-width: 100%;
  }
}


/* ===== Team member hover zoom animation ===== */
.member {
  overflow: hidden;
}

.member img {
  transition: transform .4s ease, box-shadow .4s ease;
}

.member:hover img {
  transform: scale(1.07);
}

.team-employees .member:hover img {
  transform: scale(1.09);
}



/* ══════════════════════════════════════════
   SECTION COLOR RHYTHM
══════════════════════════════════════════ */

/* Welcome — clean white */
.welcome-section {
  background: #ffffff !important;
}



/* Team — soft teal wash */
.section-team-bg {
  background: linear-gradient(180deg, #f0f9fa 0%, #f8e8ea 100%);
}

/* Offices — dark navy */
.offices-section {
  background: linear-gradient(135deg, #102936 0%, #1a3a4a 100%);
  padding: 100px 0;
}


/* ══════════════════════════════════════════
   CITY IMAGE CARDS — hover zoom on img
══════════════════════════════════════════ */

.city-image-card img {
  transition: transform .45s ease;
}

.city-image-card:hover img {
  transform: scale(1.07);
}


/* ══════════════════════════════════════════
   OFFICES SECTION
══════════════════════════════════════════ */

.offices-head {
  margin-bottom: 48px;
}

.offices-head h2 {
  color: #ffffff;
}

.offices-head .lead {
  color: rgba(255,255,255,.7);
}

.badge-light {
  background: rgba(255,255,255,.15);
  color: #ffffff;
  border-color: rgba(255,255,255,.25);
}

.offices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.office-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: .3s ease;
}

.office-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(139,30,45,.5);
  transform: translateY(-5px);
}

.office-card-inner {
  padding: 36px 36px 28px;
  flex: 1;
}

.office-badge {
  display: inline-block;
  background: rgba(139,30,45,.35);
  color: #7de8f4;
  border: 1px solid rgba(139,30,45,.4);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  margin-bottom: 18px;
}

.office-badge-secondary {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.2);
}

.office-icon {
  font-size: 36px;
  margin-bottom: 14px;
}

.office-card h3 {
  color: #ffffff;
  font-size: 32px;
  margin: 0 0 6px;
  letter-spacing: -.02em;
}

.office-sub {
  color: rgba(255,255,255,.55);
  font-size: 14px;
  margin: 0 0 24px;
}

.office-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.office-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.4;
}

.office-detail-icon {
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 1px;
}

.office-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.office-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  transition: .2s ease;
}

.office-btn-primary {
  background: #8B1E2D;
  color: #ffffff !important;
}

.office-btn-primary:hover {
  background: #6b1523;
  transform: translateY(-2px);
}

.office-btn-map {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.2);
}

.office-btn-map:hover {
  background: rgba(255,255,255,.2);
  transform: translateY(-2px);
}

.office-card-img {
  height: 220px;
  overflow: hidden;
}

.office-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.office-card:hover .office-card-img img {
  transform: scale(1.07);
}

/* Einzugsgebiet tags strip */
.offices-einzug {
  margin-top: 48px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 36px;
}

.offices-einzug p {
  color: rgba(255,255,255,.55);
  font-size: 15px;
  margin: 0 0 16px;
}

.einzug-tags {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.einzug-tag {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.75) !important;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  transition: .2s ease;
}

.einzug-tag:hover {
  background: rgba(139,30,45,.3);
  border-color: rgba(139,30,45,.5);
  color: #ffffff !important;
}

@media(max-width:920px) {
  .offices-grid {
    grid-template-columns: 1fr;
  }
  .office-card-img {
    height: 220px;
  }
}



/* ══════════════════════════════════════════
   STAT CARDS — office variant (5 cards, aligned)
══════════════════════════════════════════ */

.welcome-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 148px;
}

.stat-label-office {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-dark);
  margin-bottom: 4px;
  line-height: 1.2;
}

.stat-detail {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.4;
}

.stat-link {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(139,30,45,.3);
  padding-bottom: 1px;
  transition: .15s;
}

.stat-link:hover {
  color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* wide card spans both columns */
.stat-card-wide {
  grid-column: 1 / -1;
  min-height: 80px;
}


/* ══════════════════════════════════════════
   LEISTUNGEN SECTION
══════════════════════════════════════════ */

.section-leistungen-bg {
  background: #ffffff;
}

/* card image hover zoom */
.card .card-img {
  overflow: hidden;
}

.card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.card:hover .card-img img {
  transform: scale(1.06);
}

/* CTA card — no image, centered content */
.card-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-cta:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.card-cta-inner {
  text-align: center;
  padding: 10px 0;
}

.card-cta-icon {
  font-size: 40px;
  margin-bottom: 14px;
}

.card-cta h3 {
  color: #ffffff;
  margin-bottom: 10px;
}

.card-cta p {
  color: rgba(255,255,255,.82);
  font-size: 15px;
  margin-bottom: 22px;
}

.card-cta .btn {
  background: #ffffff;
  color: var(--primary-dark) !important;
  box-shadow: none;
}

.card-cta .btn:hover {
  background: #f0f9fa;
}



/* ══════════════════════════════════════════
   FINAL SECTION COLOR RHYTHM
   Hero        → white (default)
   Willkommen  → #f0f9fa  (едвај тиркизна)
   Leistungen  → #ffffff  (бела)
   Пациенти    → тиркизна градиент (веќе постои)
   Тим         → #f0f9fa  (веќе section-team-bg)
   Градови     → #ffffff  (бела)
══════════════════════════════════════════ */

.section-soft-teal {
  background: #f0f9fa !important;
}

.section-white {
  background: #ffffff !important;
}

.section-cities-bg {
  background: #ffffff;
}

/* Override old welcome-section gradient */
.welcome-section {
  background: #f0f9fa !important;
}

/* team stays #f0f9fa → #f8e8ea gradient already set via section-team-bg */


/* ── Patient section — soft teal, same as other sections ── */
.patient-section {
  background: #f0f9fa !important;
  padding: 100px 0;
}
.patient-section .patient-text h2 { color: var(--text) !important; }
.patient-section .patient-quote { color: var(--text) !important; }
.patient-section .patient-author { color: var(--primary-dark) !important; }


/* ══════════════════════════════════════════
   LEISTUNG DETAIL PAGES — balance image & text column
══════════════════════════════════════════ */

.two-col {
  align-items: stretch;
}

.two-col .hero-photo {
  min-height: 0;
  height: 100%;
}

.two-col .content-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 18px 0;
}

.feature-list li {
  position: relative;
  padding: 6px 0 6px 30px;
  margin-bottom: 8px;
  line-height: 1.55;
}

.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--primary-dark);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.feature-list li strong {
  color: var(--primary-dark);
}

.two-col .content-box p,
.two-col .content-box .feature-list li {
  font-size: 18px;
  line-height: 1.7;
}
.page-hero h1 {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 90px);
  letter-spacing: 0;
  color: var(--primary-dark);
  display: inline-block;
}
.two-col .hero-photo[style*="aspect-ratio"] {
  width: 100%;
}
@media(max-width:920px) {
  .two-col .hero-photo:not([style*="aspect-ratio"]) {
    min-height: 320px;
    height: auto;
  }
  .two-col .hero-photo[style*="aspect-ratio"] {
    width: 100%;
    height: auto;
  }
  .hero-photo-sticky {
    position: static !important;
  }
}
/* ══════════════════════════════════════════
   SOCIAL FOLLOW BOX
══════════════════════════════════════════ */
.welcome-slogan {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  font-style: italic;
  margin: -4px 0 18px;
  border-left: 4px solid var(--primary);
  padding-left: 14px;
}

.social-follow-box {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.social-follow-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.social-follow-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-btn-instagram,
.social-btn-facebook {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: white;
  transition: transform .18s, box-shadow .18s;
}

.social-btn-instagram {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 6px 20px rgba(225, 48, 108, .35);
}

.social-btn-facebook {
  background: #1877F2;
  box-shadow: 0 6px 20px rgba(24, 119, 242, .35);
}

.social-btn-instagram:hover,
.social-btn-facebook:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
}

/* ══════════════════════════════════════════
   CITY CARDS — text and image alignment fix
══════════════════════════════════════════ */
.city-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.city-image-card {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.city-image-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.city-image-content {
  position: relative;
  z-index: 2;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-end;
  min-height: 160px;
}

.city-image-content strong {
  font-size: 26px;
  font-weight: 900;
  color: white;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.city-image-content span {
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

@media (max-width: 768px) {
  .city-grid {
    grid-template-columns: 1fr;
  }
  .social-follow-btns {
    flex-direction: column;
  }
}

/* ══════════════════════════════════════════
   FOOTER — branded social icon buttons
══════════════════════════════════════════ */
.footer-social-btn {
  background: rgba(255,255,255,.08) !important;
  border: none !important;
  padding: 2px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.footer-social-ig,
.footer-social-fb {
  border-radius: 10px !important;
  overflow: hidden;
}
.footer-social-ig:hover,
.footer-social-fb:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  background: transparent !important;
}

/* ══════════════════════════════════════════
   FOOTER SOCIAL — redesigned pill buttons
══════════════════════════════════════════ */
.footer-social-new {
  margin-top: 22px;
}

.footer-social-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c47a82;
  margin: 0 0 12px;
}

.footer-social-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-social-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  border: none;
}

.footer-pill-ig {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 4px 16px rgba(225, 48, 108, .4);
}

.footer-pill-fb {
  background: #1877F2;
  box-shadow: 0 4px 16px rgba(24, 119, 242, .4);
}

.footer-social-pill:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* Override old small-icon styles so they don't interfere */
.footer-social-btn {
  display: none !important;
}

/* ══════════════════════════════════════════
   FOOTER LEFT COLUMN — redesign
══════════════════════════════════════════ */
.footer-left-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-logo {
  height: 80px;
  width: auto;
  max-width: 240px;
}

.footer-tagline {
  font-size: 13px;
  color: #a9c3ca;
  line-height: 1.4;
  font-weight: 500;
}

.footer-slogan {
  font-size: 16px;
  font-weight: 800;
  color: #c47a82;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  padding: 14px 18px;
  background: rgba(126,207,214,.08);
  border-left: 3px solid #c47a82;
  border-radius: 0 10px 10px 0;
}

/* Social integrated block */
.footer-social-integrated {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-social-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #667985;
}

.footer-social-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-social-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  text-decoration: none;
  transition: background .18s, transform .18s, border-color .18s;
}

.footer-social-card:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  transform: translateX(4px);
}

.footer-social-card-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.footer-social-card-text strong {
  font-size: 14px;
  font-weight: 800;
  color: white;
  display: block;
  margin: 0;
}

.footer-social-card-text span {
  font-size: 12px;
  color: #a9c3ca;
  margin: 0;
  display: block;
}

/* Hide old social elements */
.footer-social,
.footer-social-new,
.footer-social-btn {
  display: none !important;
}

@media (max-width: 768px) {
  .footer-social-links {
    flex-direction: row;
  }
  .footer-social-card-text span {
    display: none;
  }
}


/* Footer layout aligned with index.html */
.footer-grid{display:grid;grid-template-columns:minmax(240px,1.35fr) repeat(3,minmax(130px,.8fr)) minmax(210px,1fr);gap:32px;align-items:start;}
.footer h4{font-size:15px;margin:0 0 14px;font-weight:900;}
.footer a{text-decoration:none;}
.footer-contact-row svg{width:18px;height:18px;flex:0 0 18px;color:#a9c3ca;margin-top:2px;}
.footer-social-label{font-size:15px;font-weight:900;letter-spacing:0;text-transform:none;color:white;margin-bottom:4px;}
.footer-social-card svg{width:34px;height:34px;flex:0 0 34px;}
@media(max-width:1100px){.footer-grid{grid-template-columns:1.3fr repeat(2,1fr);}.footer-social-integrated{grid-column:auto;}}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;}.footer-social-links{flex-direction:column;}.footer-social-card-text span{display:block;}}

/* ===== Mobile polish fixes (city cards, buttons, footer, responsive inline grids) ===== */
.city-btn{
  display:inline-flex!important;
  justify-content:center!important;
  align-items:center!important;
  min-height:46px!important;
  padding:0 22px!important;
  border-radius:999px!important;
  background:var(--primary)!important;
  color:#fff!important;
  font-weight:800!important;
  border:0!important;
  box-shadow:0 12px 30px rgba(139,30,45,.28)!important;
  text-shadow:none!important;
  opacity:1!important;
}
.city-image-card:hover .city-btn,
.city-image-card:focus-visible .city-btn{
  background:var(--primary-dark)!important;
  transform:translateY(-2px);
}

@media (max-width: 920px){
  section .container > div[style*="grid-template-columns:1fr 1fr"],
  section .container > div[style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .cards,.city-grid,.team-grid,.gallery,.info-grid,.service-toast-grid{
    grid-template-columns:1fr!important;
  }
}

@media (max-width: 620px){
  .container{padding-left:18px!important;padding-right:18px!important;}
  .section{padding:54px 0!important;}
  .section-head{margin-bottom:24px!important;}
  .lead{font-size:16px!important;}

  .city-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .city-image-card{
    min-height:245px!important;
    border-radius:24px!important;
    width:100%!important;
  }
  .city-image-content{
    min-height:auto!important;
    padding:22px!important;
    gap:8px!important;
  }
  .city-image-content strong{
    font-size:25px!important;
  }
  .city-image-content span{
    font-size:14px!important;
    line-height:1.45!important;
  }
  .city-btn{
    min-height:44px!important;
    padding:0 20px!important;
    margin-top:8px!important;
    font-size:14px!important;
    width:auto!important;
    max-width:100%!important;
  }

  .footer{padding:30px 0 18px!important;}
  .footer .container{padding-left:20px!important;padding-right:20px!important;}
  .footer-grid{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
  .footer-grid>div{
    padding-left:0!important;
    border-left:0!important;
  }
  .footer-brand{justify-content:flex-start!important;margin-bottom:16px!important;}
  .footer-logo{max-width:210px!important;height:auto!important;max-height:48px!important;}
  .footer-contact-box{align-items:stretch!important;gap:12px!important;}
  .footer-contact-row{font-size:14px!important;align-items:flex-start!important;}
  .footer h4,.footer-social-label{margin:0 0 12px!important;}
  .footer-social-card{width:100%!important;box-sizing:border-box!important;}
  .footer-bottom{
    margin-top:24px!important;
    padding-top:16px!important;
    line-height:1.7!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:6px!important;
    flex-wrap:wrap!important;
  }
  .footer-cookie-btn{display:inline!important;line-height:inherit!important;}

  #apg-cookie-box{
    bottom:12px!important;
    width:calc(100vw - 24px)!important;
    border-radius:22px!important;
    max-height:calc(100vh - 24px)!important;
    overflow:auto!important;
  }
  #apg-cookie-actions{flex-direction:column!important;}
  .apg-btn{width:100%!important;min-width:0!important;}
}

/* ══════════════════════════════════════════
   CHANGE 1: Footer – Folgen Sie uns first on mobile
══════════════════════════════════════════ */
@media (max-width: 620px) {
  .footer-grid {
    display: flex;
    flex-direction: column;
  }
  .footer-social-integrated {
    order: -1;
  }
}



/* ══════════════════════════════════════════
   CHANGE 4: Gradient border on content-box
   Logo colors: teal #28AAE1, pink #EA1C67
══════════════════════════════════════════ */

.two-col .content-box {
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #28AAE1 0%, #EA1C67 100%) border-box !important;
  border: 3px solid transparent !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 35px rgba(40,170,225,.12) !important;
  padding: 34px !important;
}

.two-col .content-box::before,
.two-col .content-box::after {
  display: none !important;
}

@media (max-width: 920px) {
  .two-col .content-box {
    border-radius: 14px !important;
    margin-top: 24px;
  }
}

/* ══════════════════════════════════════════
   CHANGE 1b: Footer – fix Glonn cutoff (overflow visible)
══════════════════════════════════════════ */
@media (max-width: 620px) {
  .footer-grid > div {
    overflow: visible;
  }
}

/* ══════════════════════════════════════════
   JOB OFFERS PAGE — Modern 3-card layout
══════════════════════════════════════════ */

.jobs-intro {
  max-width: 680px;
  margin: 0 auto 2.5rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4a5568;
}

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 3rem;
}

.jobs-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(139,30,45,.10);
  padding: 28px 24px 24px;
  border-top: 4px solid transparent;
}

.jobs-card-positions { border-top-color: #8B1E2D; }
.jobs-card-offer     { border-top-color: #22c55e; }
.jobs-card-require   { border-top-color: #f59e0b; }

.jobs-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.jobs-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.jobs-card-positions .jobs-card-icon { background: #e0f7f9; color: #8B1E2D; }
.jobs-card-offer     .jobs-card-icon { background: #dcfce7; color: #16a34a; }
.jobs-card-require   .jobs-card-icon { background: #fef3c7; color: #d97706; }

.jobs-card-icon svg { width: 22px; height: 22px; }

.jobs-card-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #1a2e35;
  margin: 0;
}

.jobs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.jobs-list li {
  position: relative;
  padding: 7px 0 7px 30px;
  font-size: 0.93rem;
  line-height: 1.5;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}
.jobs-list li:last-child { border-bottom: none; }

.jobs-list li::before {
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

/* Positions — briefcase bullet */
.jobs-list-positions li::before {
  content: "▶";
  background: #e0f7f9;
  color: #8B1E2D;
  font-size: 9px;
}

/* Offer — green check */
.jobs-list-offer li::before {
  content: "✓";
  background: #dcfce7;
  color: #16a34a;
}

/* Requirements — amber arrow */
.jobs-list-require li::before {
  content: "→";
  background: #fef3c7;
  color: #d97706;
  font-size: 13px;
}

/* Photo row — целата слика видлива на сите уреди */
.jobs-photo-row {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(139,30,45,.12);
  background: #fff;
}

.jobs-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Social links fix */
.footer-social-card-ig,
.footer-social-card-fb {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 860px) {
  .jobs-grid {
    grid-template-columns: 1fr;
  }
  .jobs-card {
    padding: 22px 18px 18px;
  }
  .jobs-intro {
    font-size: 0.97rem;
    text-align: left;
  }
}

@media (max-width: 520px) {
  .jobs-card-header h2 {
    font-size: 0.95rem;
  }
  .jobs-list li {
    font-size: 0.9rem;
  }
}

/* ===== Office image overlay cards (index.html + contact.html) ===== */
.stat-card-office-img {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 24px;
  min-height: 180px;
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
  box-shadow: 0 10px 32px rgba(139,30,45,.09);
  transition: .25s ease;
}
.stat-card-office-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(139,30,45,.22);
  border-color: var(--primary);
}
.stat-card-office-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.stat-card-office-img:hover img {
  transform: scale(1.06);
}

.office-card-img {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  display: block;
  text-decoration: none;
  min-height: 380px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 32px rgba(139,30,45,.09);
  transition: .25s ease;
}
.office-card-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(139,30,45,.22);
}
.office-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.office-card-img:hover img {
  transform: scale(1.06);
}

.office-img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(7,40,54,.82) 0%, rgba(7,40,54,.3) 70%, transparent 100%);
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.office-img-overlay strong {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}
.office-img-overlay span {
  color: rgba(255,255,255,.85);
  font-size: 12px;
  line-height: 1.4;
}
.office-img-link {
  color: #7ee8f0 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  margin-top: 4px;
}

/* ===== Breadcrumb (Leistungen-Unterseiten) ===== */
.breadcrumb-bar{background:var(--accent);border-bottom:1px solid var(--border)}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0;font-size:14px;color:var(--muted)}
.breadcrumb a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.breadcrumb a:hover{color:var(--primary-dark);text-decoration:underline}
.breadcrumb .sep{color:#b9cdd3}
.breadcrumb .current{color:var(--primary-dark);font-weight:700}

/* ===== Service CTA banner ===== */
.service-cta-banner{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--primary-soft);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 30px;
}
.service-cta-icon{
  width:56px;height:56px;flex-shrink:0;border-radius:50%;
  background:white;display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(139,30,45,.18);color:var(--primary-dark);
}
.service-cta-icon svg{width:26px;height:26px}
.service-cta-text{flex:1;min-width:220px}
.service-cta-text strong{display:block;color:var(--primary-dark);font-size:19px;margin-bottom:4px}
.service-cta-text span{color:var(--muted);font-size:15px;line-height:1.5}
.service-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.service-cta-actions .btn{white-space:nowrap}
@media(max-width:640px){
  .service-cta-banner{padding:22px}
  .service-cta-actions{width:100%}
  .service-cta-actions .btn{flex:1}
}

/* ===== Service CTA banner — photo variant ===== */
.service-cta-photo{
  width:84px;height:84px;flex-shrink:0;border-radius:20px;
  object-fit:cover;box-shadow:0 10px 26px rgba(139,30,45,.22);
  border:3px solid white;
}
@media(max-width:640px){
  .service-cta-photo{width:64px;height:64px;border-radius:16px}
}


/* Footer grid – bez Einsatzgebiet kolone */
.footer-grid {
  grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
}
/* Social kartice – puna širina */
.footer-social-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.footer-social-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.footer-social-card-text {
  overflow: visible;
  min-width: 0;
  flex: 1;
}
.footer-social-card-text strong { color: #fff; font-size: 13px; display: block; }
.footer-social-card-text span   { color: rgba(255,255,255,.6); font-size: 11px; }
/* Nav – logo 100px */
.nav { min-height: 110px; }
.logo img { height: 100px; width: auto; max-width: 280px; }
/* Mega-menu thumbnail */
.mega-link img { width:32px;height:32px;object-fit:contain;border-radius:6px;flex-shrink:0; }
@media(max-width:900px){
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media(max-width:600px){
  .footer-grid { grid-template-columns: 1fr !important; }
}


/* ── Global overflow fix ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
img { max-width: 100%; height: auto; }

/* ── Content box – popravi overflow na mobitelu ── */
.content-box {
  width: 100%;
  overflow: visible;
  border-left: 4px solid #8B1E2D !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background: #fff !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 24px 24px 24px 24px !important;
  margin-bottom: 20px;
}
/* Razmak ispod roze vorteile boxa */
.content-box + p { margin-top: 16px; }
div[style*="background:#f8e8ea"][style*="border-radius:18px"],
div[style*="background: #f8e8ea"][style*="border-radius: 18px"] {
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}

/* ── Two-col responsive ─────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 768px) {
  .two-col {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .two-col > div { width: 100% !important; }
  /* Vorteile box na mobitelu */
  div[style*="background:#f8e8ea"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Ziel grid 2 kolone na mobitelu ─────────────── */
@media (max-width: 768px) {
  .ziel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ziel-item {
    padding: 16px 10px !important;
    width: 100% !important;
  }
  .ziel-label { font-size: 12px !important; }
}

/* ── Lista check items ─────────────────────────── */
.list {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  columns: unset !important;
  display: flex !important;
  flex-direction: column;
}
.list li {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0e0e0;
  font-size: 14px;
  color: #424242;
  line-height: 1.6;
  width: 100%;
  box-sizing: border-box;
}
.list li::before { display: none !important; content: none !important; }
.list li .chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: #8B1E2D;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
}
.list li .chk svg { width:13px;height:13px; }

  50%       { opacity: .7; transform: scale(.95); }
}

/* ── Mega menu overflow fix ─────────────────────── */
.mega-menu { overflow: visible; }
.mega-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
}
.mega-link:hover { background: #f8e8ea; }
.mega-link img { flex-shrink: 0; }

/* ── Kontakt forma fix ──────────────────────────── */
.form input, .form textarea, .form select {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}
@media (max-width: 768px) {
  .kontakt-grid { grid-template-columns: 1fr !important; }
  .kontakt-grid > div { width: 100% !important; max-width: 100% !important; }
  .form > div[style*="grid"] { grid-template-columns: 1fr !important; }
  .form input, .form textarea, .form select {
    width: 100% !important; max-width: 100% !important;
  }
}

/* ══ FINAL MOBILE FIX ══════════════════════════════════ */
@media (max-width: 768px) {
  /* Sve grid/flex kontejnere na mobitelu */
  .kontakt-grid,
  .kontakt-grid > div,
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Forma polja */
  input, textarea, select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Checkbox grid */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:8px"] {
    grid-template-columns: 1fr !important;
  }
  /* Content box ne smije biti širi od ekrana */
  .content-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  /* Sekcija padding */
  .section { padding-left: 16px !important; padding-right: 16px !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── .list li ikona – finalni fix ──────────────────── */
.list { list-style: none !important; padding: 0 !important; }
.list li {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f0e0e0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
  color: #424242 !important;
  break-inside: avoid !important;
  column-break-inside: avoid !important;
}
.list li::before { display: none !important; }
.list li .chk {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  background: #8B1E2D !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
.list li .chk svg { width: 13px !important; height: 13px !important; }
/* Columns fix */
.list[style*="columns"] {
  columns: unset !important;
  -webkit-columns: unset !important;
  display: flex !important;
  flex-direction: column !important;
}