/* ============================================================
   Self-hosted webfonts (Lato + PT Sans) — no Google Fonts request,
   so no visitor IP is sent to Google on page load (revDSG-friendly).
   Files in fonts/self/. Generated 2026-09-18.
   ============================================================ */
/* lato 300 normal latin-ext (5820 bytes) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/self/lato-300-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* lato 300 normal latin (23236 bytes) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/self/lato-300-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* lato 400 normal latin-ext (5612 bytes) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/self/lato-400-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* lato 400 normal latin (23580 bytes) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/self/lato-400-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* lato 700 normal latin-ext (5552 bytes) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/self/lato-700-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* lato 700 normal latin (23040 bytes) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/self/lato-700-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* lato 900 normal latin-ext (5640 bytes) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/self/lato-900-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* lato 900 normal latin (22504 bytes) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/self/lato-900-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ptsans 400 italic latin-ext (25572 bytes) */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/self/ptsans-400-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ptsans 400 italic latin (42612 bytes) */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/self/ptsans-400-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ptsans 400 normal latin-ext (26812 bytes) */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/self/ptsans-400-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ptsans 400 normal latin (45532 bytes) */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/self/ptsans-400-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ptsans 700 normal latin-ext (29624 bytes) */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/self/ptsans-700-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ptsans 700 normal latin (47180 bytes) */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/self/ptsans-700-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   Frauenpraxis Bülach - Theme overlay
   Palette: soft friendly blue primary (#9dc3df) with sage green
   as a secondary accent, warm taupe + cream neutrals.
     blue (primary)    #9dc3df / darker #6ba3c9 / deep #3f7ba3
     sage (secondary)  #899927 / darker #6f7d1f
     warm taupe        #ac8861
     cream             #f3f2e9 / soft #f6f9fc (bluish)
     dark slate text   #384954
   Overrides the "Medicare" template's teal/coral scheme.
   ============================================================ */

:root {
  --fp-blue: #9dc3df;
  --fp-blue-mid: #6ba3c9;
  --fp-blue-dark: #3f7ba3;
  --fp-green: #899927;
  --fp-green-dark: #6f7d1f;
  --fp-olive: #3f7ba3;      /* remapped: headings/dark accents now blue */
  --fp-taupe: #ac8861;
  --fp-cream: #eef5fb;      /* soft bluish cream */
  --fp-cream-soft: #f6f9fc;
  --fp-brown: #384954;      /* slate instead of brown */
  --fp-grey: #6a6a6a;
}

/* ============================================================
   THEME: Petrolgrün (blue/green). Base #1a5253 (RGB 26,82,83).
   Only the color variables change; every rule below keys off them,
   so switching data-theme recolors the whole site. Add more themes
   the same way: [data-theme="x"] { ...vars... }
   ============================================================ */
[data-theme="petrol"] {
  --fp-blue: #7db3b3;        /* light petrol accent (underlines/borders) */
  --fp-blue-mid: #2f7d7e;    /* buttons */
  --fp-blue-dark: #1a5253;   /* deep petrol: links, headings, top bar */
  --fp-green: #5a8f4f;       /* complementary green accent */
  --fp-green-dark: #467a3d;
  --fp-olive: #1a5253;       /* headings/dark accents = petrol */
  --fp-taupe: #b08a5e;       /* warm accent kept, tuned slightly */
  --fp-cream: #e9f4f2;       /* faint greenish cream section bg */
  --fp-cream-soft: #f3faf8;
  --fp-brown: #223b3b;       /* dark greenish slate text/headings */
  --fp-grey: #667171;
}

/* THEME: Bordeaux (deep, oaky red). Base #7F1734. */
[data-theme="bordeaux"] {
  --fp-blue: #c98a9b;        /* soft rosé accent (underlines/borders) */
  --fp-blue-mid: #9d2544;    /* buttons (lighter wine) */
  --fp-blue-dark: #7F1734;   /* deep Bordeaux: links, headings, top bar */
  --fp-green: #9c7a3c;       /* oaky gold secondary accent */
  --fp-green-dark: #7d5f2c;
  --fp-olive: #7F1734;       /* headings/dark accents = Bordeaux */
  --fp-taupe: #a9793f;       /* warm accent */
  --fp-cream: #f7edf0;       /* faint warm rosé cream section bg */
  --fp-cream-soft: #fbf5f7;
  --fp-brown: #3a1620;       /* dark wine/aubergine text/headings + footer */
  --fp-grey: #6a5a5e;
}

/* THEME: Slate Grey (cool blue-grey). Base #6B7A8F–#7C8A99. */
[data-theme="slate"] {
  --fp-blue: #aab6c4;        /* light slate accent (underlines/borders) */
  --fp-blue-mid: #6b7a8f;    /* buttons (base slate) */
  --fp-blue-dark: #4f5e70;   /* deep slate: links, headings, top bar */
  --fp-green: #8a94a0;       /* muted steel secondary accent */
  --fp-green-dark: #6f7987;
  --fp-olive: #4f5e70;       /* headings/dark accents = slate */
  --fp-taupe: #a9793f;       /* warm accent (keeps a touch of warmth) */
  --fp-cream: #eef1f4;       /* faint cool grey cream section bg */
  --fp-cream-soft: #f6f8fa;
  --fp-brown: #2c343d;       /* dark slate text/headings + footer */
  --fp-grey: #66707a;
}

body {
  color: #4a4842;
  font-family: 'PT Sans', 'Lato', sans-serif;
}

/* ---- Typography accents (template used teal #23b5b9 / coral #f15c58) ---- */
h1 span, h2 span, h3 span,
.about-title h1 span,
.section-title h1 span { color: var(--fp-blue-dark); }

a { color: var(--fp-blue-dark); }
a:hover, a:focus { color: var(--fp-blue-mid); }

/* ============ Top bar ============ */
.topbar-area, .topbar-area.v2 { background: var(--fp-blue-dark); }
.topbar-area .topaddress-v2 ul li,
.topbar-area .topaddress-v2 ul li span,
.topbar-area .social-link li a { color: #eef0e0 !important; }
.topbar-area .social-link li a:hover { color: var(--fp-taupe) !important; }
/* Clickable contact details in the top bar */
.topbar-area .topaddress-v2 ul li a { color: #eef0e0 !important; transition: color .2s ease; }
.topbar-area .topaddress-v2 ul li a:hover,
.topbar-area .topaddress-v2 ul li a:focus { color: #fff !important; text-decoration: none; }
.topbar-area .topaddress-v2 ul li a .fa { margin-right: 4px; }

/* ============ Navbar ============ */
.navbar-area, .navbar-area.v2 { background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
/* Brand / logo sizing */
.navbar-area .navbar-header { height: 60px; display: flex; align-items: center; margin-left: 0 !important; margin-right: 0 !important; }
.navbar-area .navbar-brand,
.navbar-area.v2 .navbar > .container .navbar-brand,
.navbar > .container .navbar-area .navbar-brand {
  height: 60px; padding: 0 0 0 4px; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center;
  line-height: 60px;
}
/* Bootstrap pulls the brand -15px at >=768px which clips the logo's left edge; neutralize it. */
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand { margin-left: 0 !important; }
.navbar-area .navbar-brand img { height: 16px !important; width: auto; max-width: 210px; display: block; vertical-align: middle; position: relative; top: 12px; }
.navbar-area .navbar-brand, .navbar-area .navbar-brand:hover, .navbar-area .navbar-brand:focus { text-decoration: none !important; }
@media (min-width: 992px) { .navbar-area .navbar-brand img { height: 18px !important; max-width: 240px; } }
.navbar-area .nav.menu > li > a {
  color: var(--fp-brown);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .3px;
}
.navbar-area .nav.menu > li > a:hover,
.navbar-area .nav.menu > li.current-menu-item > a { color: var(--fp-blue-dark); }
.navbar-area .nav.menu > li.current-menu-item > a { border-bottom: 3px solid var(--fp-blue); }

/* Appointment button in navbar
   Higher specificity than template's `.navbar-area.v2 .menu li a:hover`
   to prevent the button turning invisible on hover / stretching to 60px. */
.navbar-area .nav.menu > li.nav-appointment {
  /* keep it a normal floated nav item (like the text links), not flex,
     so its box height == the 60px link row; then center the button inside. */
  line-height: 60px;
  margin-left: 14px;
}
.navbar-area .nav.menu > li.nav-appointment > a.btn-appointment {
  vertical-align: middle;   /* align to the 60px line box == same center as text links */
  position: relative;
  top: 12px;                /* match the logo's downward offset for a consistent baseline */
}
.navbar-area .nav.menu > li.nav-appointment > a.btn-appointment,
.navbar-area.v2 .nav.menu > li.nav-appointment > a.btn-appointment {
  display: inline-block;
  background: var(--fp-blue-mid);
  color: #fff !important;
  padding: 9px 20px !important;
  line-height: 1.2 !important;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  transition: background .25s ease, transform .2s ease;
  border: none !important;
  border-bottom: none !important;
}
.navbar-area .nav.menu > li.nav-appointment > a.btn-appointment:hover,
.navbar-area .nav.menu > li.nav-appointment > a.btn-appointment:focus,
.navbar-area.v2 .nav.menu > li.nav-appointment > a.btn-appointment:hover,
.navbar-area.v2 .nav.menu > li.nav-appointment > a.btn-appointment:focus {
  background: var(--fp-blue-dark) !important;
  color: #fff !important;
}
/* kill the template's teal underline bar on the button */
.navbar-area.v2 .nav.menu > li.nav-appointment > a.btn-appointment:before { display:none !important; content:none !important; }

/* ============ Hero / slider ============ */
.fp-hero {
  position: relative;
  min-height: 560px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.fp-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(57,55,49,.72) 0%, rgba(57,55,49,.35) 55%, rgba(57,55,49,.15) 100%);
}
.fp-hero .fp-hero-inner { position: relative; z-index: 2; width: 100%; color: #fff; padding: 60px 0; }
.fp-hero h1 { color:#fff; font-size: 46px; font-weight: 900; margin-bottom: 6px; line-height:1.1; }
.fp-hero h2 { color: #eef0e0; font-size: 24px; font-weight: 400; margin-bottom: 22px; }
.fp-hero p { color: #f3f2e9; font-size: 17px; max-width: 560px; margin-bottom: 28px; }
.fp-hero .fp-btn { margin-right: 12px; }

a.fp-btn,
a.fp-btn:link,
a.fp-btn:visited,
a.fp-btn:hover,
a.fp-btn:focus,
a.fp-btn:active {
  display: inline-block !important;
  box-sizing: border-box !important;
  vertical-align: middle;
  padding: 13px 30px !important;
  border-radius: 30px !important;
  border-width: 2px !important;
  border-style: solid !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}
a.fp-btn, a.fp-btn:link, a.fp-btn:visited {
  background: var(--fp-blue-mid) !important;
  border-color: var(--fp-blue-mid) !important;
  color: #fff !important;
}
a.fp-btn:hover, a.fp-btn:focus, a.fp-btn:active {
  background: var(--fp-blue-dark) !important;
  border-color: var(--fp-blue-dark) !important;
  color: #fff !important;
}
/* ghost variant (on dark hero backgrounds) */
a.fp-btn.ghost, a.fp-btn.ghost:link, a.fp-btn.ghost:visited {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}
a.fp-btn.ghost:hover, a.fp-btn.ghost:focus, a.fp-btn.ghost:active {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--fp-blue-dark) !important;
}

/* ============ Get quote / CTA strip ============ */
.get-quote-area { background: var(--fp-cream); padding: 34px 0; }
.get-quote-area .get-quate-content h2 { color: var(--fp-olive); font-weight: 700; }
.get-quote-area .get-quate-content p { color: var(--fp-grey); margin-bottom: 0; }
/* CTA-strip button: match .fp-btn exactly, overriding template's fixed height/width/shadow */
.get-btn a,
.get-btn a:link,
.get-btn a:visited,
.get-btn a:hover,
.get-btn a:focus,
.get-btn a:active {
  display: inline-block !important;
  box-sizing: border-box !important;
  vertical-align: middle;
  width: auto !important;
  height: auto !important;
  padding: 13px 30px !important;
  border-radius: 30px !important;
  border: 2px solid var(--fp-blue-mid) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-align: center;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}
.get-btn a, .get-btn a:link, .get-btn a:visited {
  background: var(--fp-blue-mid) !important;
  color: #fff !important;
}
.get-btn a:hover, .get-btn a:focus, .get-btn a:active {
  background: var(--fp-blue-dark) !important;
  border-color: var(--fp-blue-dark) !important;
  color: #fff !important;
}

/* ============ Section helpers ============ */
.section-padding { padding: 70px 0; }
.fp-section-cream { background: var(--fp-cream-soft); }
.fp-lead { font-size: 18px; color: var(--fp-grey); max-width: 780px; margin: 0 auto 10px; }

.about-title h4, .section-title h4, .fp-eyebrow {
  color: var(--fp-taupe); text-transform: uppercase; letter-spacing: 2px;
  font-weight: 700; font-size: 13px; margin-bottom: 8px;
}
.section-title h1, .about-title h1 { color: var(--fp-brown); font-weight: 800; }
.section-title { margin-bottom: 40px; }

/* ============ Feature / service cards ============ */
.fp-card {
  background:#fff; border:1px solid #ececd8; border-radius: 10px; overflow:hidden;
  transition: box-shadow .25s ease, transform .25s ease; height:100%;
}
.fp-card:hover { box-shadow: 0 14px 34px rgba(64,72,18,.14); transform: translateY(-4px); }
.fp-card .fp-card-img { height: 210px; background-size: cover; background-position: center; }
.fp-card .fp-card-body { padding: 24px; }
.fp-card h4 { color: var(--fp-olive); font-weight: 700; margin-bottom: 10px; }
.fp-card p { color: var(--fp-grey); margin-bottom: 0; }

.fp-icon-circle {
  width: 74px; height:74px; border-radius:50%; background: var(--fp-cream);
  color: var(--fp-blue-dark); display:flex; align-items:center; justify-content:center;
  font-size: 30px; margin: 0 auto 16px;
}

/* ============ Service list (Praxis) ============ */
.fp-service-list { list-style:none; padding:0; margin:0; }
.fp-service-list li {
  padding: 9px 0 9px 30px; position: relative; color:#4a4842; border-bottom:1px solid #efeee2;
}
.fp-service-list li::before {
  content: "\f00c"; font-family: FontAwesome; color: var(--fp-blue-mid);
  position:absolute; left:0; top:10px;
}
/* Plain variant: no checkmark tick (e.g. Home "Willkommen" list) */
.fp-service-list.fp-plain li { padding-left: 0; }
.fp-service-list.fp-plain li::before { content: none; }
/* Nested sub-lists inside a service list: simple bullets, no checkmark */
.fp-service-list li ul { list-style: disc; padding-left: 22px; margin: 6px 0 2px; }
.fp-service-list li ul li { padding: 3px 0 3px 0; border-bottom: none; position: static; }
.fp-service-list li ul li::before { content: none; }

/* ============ Team ============ */
.fp-team-card { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.06); margin-bottom:30px; }
.fp-team-photo { height: 340px; background-size:cover; background-position:center top; }
.fp-team-body { padding: 22px 24px 26px; }
.fp-team-body h4 { color: var(--fp-olive); font-weight:800; margin-bottom:2px; }
.fp-team-role { color: var(--fp-taupe); font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:1px; margin-bottom:14px; }
.fp-team-body .fp-block-label { color: var(--fp-blue-dark); font-weight:700; margin:14px 0 4px; font-size:14px; text-transform:uppercase; letter-spacing:.5px;}
.fp-team-body p, .fp-team-body li { color:#5a584f; font-size:14px; }
.fp-team-body ul { padding-left:18px; margin-bottom:6px; }

/* ============ Contact ============ */
.fp-contact-box { background:#fff; border:1px solid #ececd8; border-radius:10px; padding:30px; height:100%; }
/* equal-height contact row */
.fp-equal-row { display:flex; flex-wrap:wrap; }
.fp-equal-row > [class*="col-"] { display:flex; }
.fp-equal-row > [class*="col-"] > .fp-contact-box { width:100%; }
.fp-contact-box h3 { color: var(--fp-olive); font-weight:800; margin-top:0; margin-bottom:18px; }
.fp-hours-table { width:100%; }
.fp-hours-table td { padding:7px 0; border-bottom:1px dashed #e7e6d6; color:#4a4842; }
.fp-hours-table td:last-child { text-align:right; font-weight:700; color: var(--fp-brown); white-space:nowrap; }
.fp-hours-note { color: var(--fp-taupe); font-style:italic; margin-top:12px; }
.fp-contact-icon { color: var(--fp-blue-dark); width:24px; text-align:center; margin-right:8px; }
.fp-map iframe { width:100%; height:100%; min-height:360px; border:0; border-radius:10px; }

/* ============ Footer ============ */
.footer-area { background: var(--fp-brown); padding: 55px 0 35px; }
.footer-area, .footer-area p, .footer-area li, .footer-area a { color:#d6d3c7; }
.footer-area h4 { color:#fff; font-weight:700; margin-bottom:18px; text-transform:uppercase; letter-spacing:.5px; font-size:16px; }
.footer-area .fp-footer-logo { height: 20px; }
.footer-area a:hover { color: var(--fp-taupe); }
.fp-foot-list { list-style:none; padding:0; margin:0; }
.fp-foot-list li { padding:6px 0; }
.fp-foot-contact li { padding:7px 0; }
.fp-foot-contact .fa { color: var(--fp-taupe); width:20px; margin-right:8px; }
.fp-foot-contact a { color:#d6d3c7; }
.fp-foot-contact a:hover { color: var(--fp-taupe); }
/* email/phone links inside the Adresse contact box */
.fp-contact-box a.fp-mail, .fp-contact-box p a[href^="tel:"] { color: var(--fp-blue-dark); }
.fp-contact-box a.fp-mail:hover, .fp-contact-box p a[href^="tel:"]:hover { color: var(--fp-blue-mid); text-decoration:underline; }
.copyriht-area { background:#2b2924; padding:16px 0; }
.copyriht-area, .copyriht-area p { color:#a7a498; margin:0; }
.copyriht-area a { color:#c9c6ba; }
.copyriht-area a:hover { color: var(--fp-taupe); }

/* ============ Page title banner (sub pages) ============ */
.fp-page-banner {
  position:relative; background-size:cover; background-position:center; padding: 120px 0; text-align:center;
}
.fp-page-banner::after { content:""; position:absolute; inset:0; background: rgba(57,55,49,.55); }
/* Team banner: same height as every other page banner (uses shared .fp-page-banner padding). */
.fp-banner-team::after {
  background: linear-gradient(rgba(45,43,38,.42), rgba(45,43,38,.66));
}
.fp-page-banner .container { position:relative; z-index:2; }
.fp-page-banner h1 { color:#fff; font-weight:800; font-size:40px; margin:0 0 8px; }
.fp-page-banner .breadcrumb { background:transparent; display:inline-block; margin:0; padding:0; }
.fp-page-banner .breadcrumb > li, .fp-page-banner .breadcrumb > li > a { color:#eef0e0; }
.fp-page-banner .breadcrumb > .active { color: var(--fp-taupe); }

/* ============ Responsive ============ */
@media (max-width: 767px) {
  .fp-hero { min-height: 440px; text-align:center; }
  .fp-hero::after { background: rgba(57,55,49,.6); }
  .fp-hero h1 { font-size: 34px; }
  .fp-hero p { margin-left:auto; margin-right:auto; }
  .get-quote-area .text-right { text-align:left; margin-top:16px; }
  .nav-appointment { margin:8px 0; }
  .fp-page-banner { padding:60px 0; }
  .fp-page-banner h1 { font-size:30px; }

  /* Mobile navbar: hamburger left, then a smaller logo aligned next to it */
  .navbar-area .navbar-header { height: 54px; display: flex; align-items: center; }
  .navbar-area .navbar-toggle { float: none; order: 1; margin: 0 10px 0 0; }
  .navbar-area .navbar-brand { order: 2; height: 54px; }
  .navbar-area .navbar-brand img { height: 13px !important; max-width: 180px; top: 0 !important; }

  /* the accent bar is only 90% wide -> on full-width mobile items it stops
     short of the edge. Just make it span the full width; keep position/color. */
  .navbar-area.v2 .menu > li > a:before {
    width: 100% !important;
    left: 0 !important;
  }

  /* Footer on mobile: stacked columns need breathing room + smaller logo */
  .footer-area .row > [class*="col-"] { margin-bottom: 26px; }
  .footer-area .row > [class*="col-"]:last-child { margin-bottom: 0; }
  .footer-area .footer-content .row > [class*="col-"] { margin-bottom: 0; }
  .footer-area .fp-footer-logo { height: 22px; }

  /* Equal-height contact row: on mobile force each flex column full-width
     (otherwise flex items size to content -> boxes get different widths) */
  .fp-equal-row { display: block; }
  .fp-equal-row > [class*="col-"] { display: block; width: 100%; }

  /* Stacked buttons need vertical breathing room on mobile. Make hero + CTA
     buttons block-level so they stack cleanly with a gap (no touching). */
  .fp-hero .fp-btn,
  .fp-hero-inner .fp-btn {
    display: block !important;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 12px auto !important;
  }
  .get-quote-area .fp-btn { display:block; width:fit-content; margin:0 auto 10px auto; }

  /* When a text column (with a trailing button) stacks above an image column,
     add a gap so the button doesn't touch the image below. */
  .fp-section-cream .row > [class*="col-"] + [class*="col-"] { margin-top: 26px; }
  .section-padding .row > [class*="col-"] + [class*="col-"] { margin-top: 22px; }
}

/* ============ German capitalization fix ============
   The template forces text-transform:capitalize on several headings, which
   wrongly capitalizes German lowercase words (Ist, Für, Und, Mit ...).
   German text must render exactly as typed. */
.get-quate-content h2,
.section-title h1,
.section-title h4,
.about-title h1,
.about-title h4,
.v2 .aboutUs-contant .about-title,
.v2 .aboutUs-contant .about-title h1,
.footer-about p,
.footer-about a,
.fp-eyebrow {
  text-transform: none !important;
}
/* keep the small eyebrow labels intentionally uppercased */
.fp-eyebrow, .about-title h4, .section-title h4 { text-transform: uppercase !important; }

/* Hide leftover template preloader if it hangs */
#preloader { display:none !important; }

/* ============ Brand logo (theme-swapped image) ============
   Two real logo images (identical wordmark, different colour). The server sets
   data-theme on <html> before paint, so the correct one shows with no flash.
   Blue = default; Petrolgrün version shown under [data-theme="petrol"]. --- */
.navbar-area .navbar-brand .fp-logo-petrol,
.navbar-area .navbar-brand .fp-logo-bordeaux,
.navbar-area .navbar-brand .fp-logo-slate { display: none; }
[data-theme="petrol"] .navbar-area .navbar-brand .fp-logo-blue { display: none; }
[data-theme="petrol"] .navbar-area .navbar-brand .fp-logo-petrol { display: block; }
[data-theme="bordeaux"] .navbar-area .navbar-brand .fp-logo-blue { display: none; }
[data-theme="bordeaux"] .navbar-area .navbar-brand .fp-logo-bordeaux { display: block; }
[data-theme="slate"] .navbar-area .navbar-brand .fp-logo-blue { display: none; }
[data-theme="slate"] .navbar-area .navbar-brand .fp-logo-slate { display: block; }
/* footer logo is a white PNG on the dark footer; fine in both themes. */

/* ============ Color switcher (footer) ============ */
.fp-theme-switch { margin-top: 22px; }
.fp-theme-switch-label {
  display:block; color:#b7b4a8; font-size:12px; text-transform:uppercase;
  letter-spacing:1px; margin-bottom:8px;
}
.fp-theme-swatches { display:flex; gap:10px; }
.fp-swatch {
  width: 30px; height: 30px; border-radius: 6px; cursor: pointer; padding: 0;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 1px 4px rgba(0,0,0,.25); outline: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fp-swatch:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.7); }
.fp-swatch:focus-visible { border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.35); }
.fp-swatch.is-active {
  border-color:#fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 1px 6px rgba(0,0,0,.35);
}
.fp-swatch.is-active::after {
  content:"\f00c"; font-family: FontAwesome; color:#fff; font-size:12px;
  display:flex; align-items:center; justify-content:center; height:100%;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* ============ Nav active/hover accent bar ============
   The template's accent bar on the active/hover menu item (.menu > li > a:before)
   is hard-coded teal (#23b5b9) in style.css. Drive it from the theme so it
   matches blue/petrol/bordeaux (this is the teal line under the current item,
   full-width on mobile). */
.navbar-area.v2 .menu > li > a:before { background: var(--fp-blue-dark) !important; }
.navbar-area.v2 .menu li a:hover { color: var(--fp-blue-dark) !important; }

/* ============ Mobile menu button (hamburger) ============
   The template hard-codes the toggle bars to teal (#23B5B9) in responsive.css.
   Drive them from the active theme instead so they match blue/petrol/bordeaux. */
.navbar-area .navbar-toggle .icon-bar,
.navbar-area.v2 .navbar-toggle .icon-bar,
.navbar-area.v2 .navbar-toggle span { background: var(--fp-blue-dark) !important; }
/* the "X" (active) state keeps the same theme colour */
.navbar-toggle.active .icon-bar:nth-of-type(1),
.navbar-toggle.active .icon-bar:nth-of-type(3) { background: var(--fp-blue-dark) !important; }

/* ============ Live opening-status badge (Google) ============ */
.fp-open-badge {
  display:inline-flex; align-items:flex-start; gap:8px;
  font-size:13px; font-weight:700; margin:0 0 14px;
  padding:6px 12px; border-radius:20px; background:#f2f4f2;
}
.fp-open-badge .fp-open-dot { width:9px; height:9px; border-radius:50%; background:#9aa0a6; flex:0 0 9px; margin-top:4px; }
.fp-open-badge .fp-open-text { line-height:1.35; }
.fp-open-badge.is-open { color:#1e7a34; background:#e8f5ec; }
.fp-open-badge.is-open .fp-open-dot { background:#22a447; box-shadow:0 0 0 3px rgba(34,164,71,.18); }
.fp-open-badge.is-closed { color:#9a3b3b; background:#f7ecec; }
.fp-open-badge.is-closed .fp-open-dot { background:#cf5b5b; }
.fp-open-badge .fp-open-src { color:inherit; opacity:.6; font-weight:400; font-size:12px; text-decoration:none; }
.fp-open-badge .fp-open-src:hover { opacity:1; text-decoration:underline; }
.fp-hours-cap { caption-side: top; text-align:left; font-size:12px; color: var(--fp-taupe); font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding-bottom:6px; }
/* Shared hours layout (phone + Google): day label left, times left-aligned
   right next to it, ranges stacked. Both boxes look identical. */
.fp-hours-left td { vertical-align: top; }
.fp-hours-left td:first-child { width: 8.5em; white-space: nowrap; padding-right: 12px; }
.fp-hours-left td:last-child { text-align: left; white-space: normal; }

/* ============ Terminbuchung: doctor selector ============ */
.fp-doc-tabs { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:30px; }
.fp-doc-tab {
  cursor:pointer; background:#fff; border:2px solid #e2ecf4; border-radius:12px;
  padding:16px 20px; text-align:center; min-width:200px; flex:1 1 220px; max-width:280px;
  transition: all .2s ease; display:flex; align-items:center; gap:14px;
}
.fp-doc-tab:hover { border-color: var(--fp-blue); box-shadow:0 8px 22px rgba(63,123,163,.12); }
.fp-doc-tab.active { border-color: var(--fp-blue-dark); background: var(--fp-cream); }
.fp-doc-tab .fp-doc-avatar { width:56px; height:56px; border-radius:50%; background-size:cover; background-position:center top; flex:0 0 56px; }
.fp-doc-tab .fp-doc-meta { text-align:left; }
.fp-doc-tab .fp-doc-name { font-weight:700; color: var(--fp-blue-dark); font-size:15px; line-height:1.2; }
.fp-doc-tab .fp-doc-sub { color:#8a97a0; font-size:12px; }
.fp-doc-panel { display:none; }
.fp-doc-panel.active { display:block; animation: fpFade .3s ease; }
@keyframes fpFade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.fp-embed-wrap { background:#fff; border:1px solid #e2ecf4; border-radius:12px; padding:14px; box-shadow:0 10px 30px rgba(63,123,163,.08); text-align:center; }
.fp-embed-wrap iframe.od-widget { display:block; margin:0 auto; border:0; }
.fp-embed-note { color:#8a97a0; font-size:13px; margin-top:12px; }
@media(max-width:767px){ .fp-doc-tab{ min-width:100%; } }

/* ============ Datenschutz: legal text ============ */
.fp-legal { max-width: 860px; margin: 0 auto; }
.fp-legal h2 { color: var(--fp-blue-dark); font-weight:800; font-size:22px; margin:34px 0 12px; }
.fp-legal p { color:#4a4842; line-height:1.75; margin-bottom:14px; }
.fp-legal ul { color:#4a4842; line-height:1.7; margin:0 0 18px; padding-left:22px; list-style:disc; }
.fp-legal ul li { margin-bottom:6px; }
.fp-legal a { color: var(--fp-blue-dark); word-break: break-word; }
.fp-legal a:hover { color: var(--fp-blue-mid); }
.fp-legal .fp-legal-contact { margin-top:34px; padding-top:22px; border-top:1px solid #e7e6d6; color:#5a584f; }