@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600;8..60,700&display=swap');

:root{
  --bg: #fff7ea;
  --text: #221711;
  --muted: #6f5544;
  --primary: #c88a3d;
  --primary-600:#b67630;
  --surface: #f9efe0;
  --ring: #f0c787;
  --radius: 16px;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
img{max-width:100%;height:auto}
.container{width:min(1100px,92%);margin-inline:auto}
.site-header{position:sticky;top:0;background:#fff9f0;border-bottom:1px solid #ead7bf;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.75rem 0}
.logo{font-weight:700;text-decoration:none;color:#221711;font-size:1.1rem}
.nav-toggle{display:none;border:none;background:#fff9f0;font-size:1.5rem;padding:.25rem .5rem;border-radius:8px}
.nav-menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.nav a{color:var(--text);text-decoration:none;padding:.5rem .75rem;border-radius:10px}
.nav a:hover,.nav a:focus{background:var(--surface);outline:2px solid transparent}
.lang-switch{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.btn-lang{border:1px solid #d6e6e9;background:#fff;padding:.35rem .7rem;border-radius:999px;cursor:pointer;font-weight:600;line-height:1}
.btn-lang[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-lang:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

.hero{background:linear-gradient(180deg,#ffeccc,transparent 60%);}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:2rem;padding:2.5rem 0}
.hero-text h1{font-size:2rem;margin:.2rem 0 .5rem}
.lead{color:var(--muted);max-width:52ch}
.btn{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;padding:.7rem 1rem;border-radius:999px;font-weight:600;border:0;cursor:pointer}
.btn:hover{background:var(--primary-600)}
.cta{margin-top:1rem}
.hero-media picture,.hero-media img{display:block;width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}

.hours-card{margin-top:1.25rem;background:#fffdf7;border:1px solid #ecd8bc;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.hours{margin:.5rem 0 0 1rem}

.trust{padding:2rem 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.card{background:#fffdf7;border:1px solid #ecd8bc;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}

.page-hero{padding:2rem 0 1rem;border-bottom:1px solid #e9eef0;margin-bottom:1.5rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.img-frame{background:#fffdf7;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid #ecd8bc}
.img-frame img{display:block;width:100%;height:auto}

.service-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.service-item{background:#fffdf7;border:1px solid #ecd8bc;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}

.gallery{padding:1rem 0 2rem}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.gallery-grid figure{margin:0;overflow:hidden;border-radius:12px;border:1px solid #ecd8bc;background:#fffdf7;box-shadow:var(--shadow)}
.gallery-grid img{width:100%;height:220px;object-fit:cover;display:block}

.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1.25rem}
.contact-form{background:#fffdf7;border:1px solid #ecd8bc;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.form-row{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}
input,textarea{width:100%;padding:.6rem .7rem;border:1px solid #d6e6e9;border-radius:10px;font:inherit}
input:focus,textarea:focus{outline:2px solid var(--ring);border-color:var(--primary)}
.map-wrap iframe{width:100%;min-height:380px;border:0;border-radius:var(--radius);box-shadow:var(--shadow)}

.site-footer{margin-top:2rem;background:#f6e2c4;color:#3a2418}
.site-footer a{color:#3a2418;font-weight:600}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.25rem;padding:1.5rem 0}
.footer-bottom{padding:1rem 0;border-top:1px solid #d4b58c}

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  background: #0f2a33;
  color: #e8f3f5;
  padding: .75rem 1rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .service-list{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .header-inner{position:relative}
  .nav-toggle{display:inline-block}
  .nav-menu{display:none;flex-direction:column;gap:.25rem;position:absolute;right:0;top:100%;background:#fff;border:1px solid #e7eff1;border-radius:12px;padding:.5rem;width:200px;box-shadow:var(--shadow);margin-top:0.5rem}
  .nav-menu.open{display:flex}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid img{height:180px}
}

/* Pretty services bullet list */

.service-bullets{
  padding:2rem 0 2.5rem;
}
.service-bullets h2{
  margin:0 0 1.5rem;
  font-size:1.3rem;
  font-weight:600;
}
.service-bullets ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.25rem;
}
.service-bullets li{
  display:block;
  background:#ffffff;
  border-radius:16px;
  padding:1rem 1.1rem;
  box-shadow:var(--shadow);
  border:1px solid #e2edf0;
}
.service-bullets li span{
  display:block;
  font-weight:600;
  margin-bottom:.35rem;
}
.service-bullets li p{
  margin:0;
  font-size:.95rem;
  line-height:1.55;
  color:#5a4337;
}
.service-bullets li::before{
  content:none;
}
@media (max-width:900px){
  .service-bullets ul{
    grid-template-columns:1fr;
  }
}

.accepts{display:inline-block;margin-top:.5rem;background:#fffdf7;border:1px solid #ecd8bc;border-radius:999px;padding:.35rem .6rem;color:#0f2a33;box-shadow:var(--shadow);font-weight:600}

/* === Android visibility fixes (minimal) === */
/* Draw hamburger purely in CSS to avoid glyph issues */
.nav-toggle{
  position:relative;
  width:40px;height:36px;border-radius:10px;
  border:1px solid #d6e6e9;background:#fff;color:var(--text);
  display:none; /* desktop default */
  place-items:center; overflow:hidden;
}
.nav-toggle::before{
  content:"";width:18px;height:12px;
  background:
    linear-gradient(currentColor, currentColor) 0 0/100% 2px,
    linear-gradient(currentColor, currentColor) 0 50%/100% 2px,
    linear-gradient(currentColor, currentColor) 0 100%/100% 2px;
  background-repeat:no-repeat;display:block;margin:auto;
}
/* Language pills always visible, prevent wrap */
.lang-switch{display:flex;gap:.4rem;white-space:nowrap}
.btn-lang{min-width:42px;text-align:center}

/* Mobile breakpoint: show toggle, convert menu to dropdown */
@media (max-width: 900px){
  .nav-toggle{display:none;}
  .header-inner{position:relative}
  .nav{position:static}
  .nav-menu{
    display:none;flex-direction:column;gap:.25rem;
    position:absolute;right:0;top:100%;width:220px;
    background:#fff;border:1px solid #e7eff1;border-radius:12px;padding:.5rem;
    box-shadow:var(--shadow);
    margin-top:0.5rem;
  }
  .nav-menu.open{display:flex}
}

/* Dark mode: ensure contrast */
@media (prefers-color-scheme: dark){
  .nav-toggle{background:#3a2418;color:#f9f1e6;border-color:#5a3521}
  .btn-lang[aria-pressed="false"]{background:#3a2418;color:#f9f1e6;border-color:#5a3521}
  .nav-menu{background:transparent;border-color:transparent}
}


@media (max-width: 900px){
  /* ensure toggle visible on mobile */
  nav .nav-toggle{ display:inline-grid; }
  nav .nav-menu{ display:none; }
  nav .nav-menu.open{ display:flex; }
}

/* Mobile menu contrast fixes */
@media (max-width: 900px){
  nav .nav-menu { color: #0b1f27; }
  nav .nav-menu a {
    color: #0b1f27;
    opacity: 1;
    padding: .6rem .75rem;
    border-radius: .5rem;
  }
  nav .nav-menu a:hover,
  nav .nav-menu a:focus {
    background: #e7eff1;
    color: #0b1f27;
  }
}

/* Dark mode contrast for dropdown */
@media (max-width: 900px) and (prefers-color-scheme: dark){
  nav .nav-menu { background: #2b1a12; border-color: #5a3521; color: #f9f1e6; }
  nav .nav-menu a { color: #f9f1e6; }
  nav .nav-menu a:hover,
  nav .nav-menu a:focus { background: #3f2618; color: #ffffff; }
}

/* CV call-to-action */
.cv-cta{
  margin:1rem 0;
  display:flex;
  justify-content:flex-start;
}
.cv-link{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  background:#ffffff;
  border:1px solid #d9e7ea;
  padding:0.9rem 1.2rem;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  box-shadow:var(--shadow);
  font-weight:600;
  transition:all 0.2s ease;
}
.cv-link:hover{
  background:#eef6f8;
  transform:translateY(-1px);
}
.cv-icon{
  font-size:1.3rem;
}

body{font-family:'Source Serif 4',serif !important;}


/* LORA GLOBAL FONT OVERRIDE */
body, h1, h2, h3, h4, h5, h6, p, a, li {
    font-family: "Lora", serif !important;
}

/* Adjust heading weights for Lora */
h1 { font-weight: 600; letter-spacing: -0.01em; }
h2 { font-weight: 600; letter-spacing: -0.01em; }
h3 { font-weight: 500; }
p, li { font-weight: 400; }

/* Improve readability for hero text */
.hero h1 { font-weight: 600; }
.hero p { font-weight: 400; }

/* Nav readability */
nav a { font-weight: 500; }

/* Service card readability */
.service-bullets li span { font-weight: 600; }
.service-bullets li p { font-weight: 400; }

/* Modern UI font override: DM Sans */
body, h1, h2, h3, h4, h5, h6, p, a, li, button, input, textarea, label {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Heading tuning for a cleaner, modern look */
h1, h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
h3, h4 {
  font-weight: 500;
}

/* Navigation readability and modern feel */
nav a {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Hero refinement */
.hero h1 {
  font-weight: 600;
}
.hero p {
  font-weight: 400;
}

/* Service cards */
.service-bullets li span {
  font-weight: 600;
}
.service-bullets li p {
  font-weight: 400;
}

/* === Modern UI refinements === */

/* Overall container spacing */
main section {
  scroll-margin-top: 5rem;
}

/* Buttons: pill-shaped, modern */
.btn-primary,
button[type="submit"],
.hero-cta a {
  border-radius: 999px;
  padding: 0.75rem 1.4rem;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

/* Secondary buttons / language switches */
.btn-lang {
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-weight: 500;
}

/* Cards and surfaces */
.card,
.service-item,
.contact-form,
.hours-card,
.img-frame,
.gallery-grid figure {
  border-radius: 18px;
  border-color: #e3d1b4;
}

/* Subtle hover lift for cards (desktop only) */
@media (hover:hover) and (pointer:fine){
  .service-item,
  .service-bullets li,
  .gallery-grid figure {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .service-item:hover,
  .service-bullets li:hover,
  .gallery-grid figure:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.09);
    border-color: #d4b58c;
  }
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border-radius: 12px;
  border: 1px solid #d9c4a4;
  padding: 0.6rem 0.75rem;
  font-size: 0.97rem;
  background: #fffdf8;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 1px rgba(200,138,61,0.2);
}

/* Navigation refinements */
.nav-menu a {
  position: relative;
  padding: 0.35rem 0.4rem;
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.18s ease;
}
.nav-menu a:hover::after,
.nav-menu a:focus::after {
  width: 100%;
}

/* Active nav link (if class applied) */
.nav-menu a.active {
  color: var(--primary-600);
}
.nav-menu a.active::after {
  width: 100%;
}

/* Hero text width for better readability */
.hero-content p {
  max-width: 32rem;
}

/* Footer refinement */
.site-footer {
  padding-top: 2.4rem;
}
.footer-columns {
  gap: 2rem;
}
.footer-bottom {
  font-size: 0.9rem;
}

/* Global font override: Inter for a modern clinical UI */
body, h1, h2, h3, h4, h5, h6, p, a, li, button, input, textarea, label {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Refine "Alle Kassen und Privat" chip to look informational, not like a button */
.accepts{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  margin-top:.75rem;
  padding:0.25rem 0.7rem;
  border-radius:999px;
  background:transparent;
  border:none;
  font-size:0.85rem;
  color:var(--muted);
  box-shadow:none;
}
.accepts::before{
  content:"●";
  font-size:0.65rem;
  color:var(--primary);
}

/* Ensure hover states don't make it look clickable */
.accepts:hover{
  transform:none;
  box-shadow:none;
  border-color:transparent;
}


/* Nav subtitle under logo */
.nav-sub{
  display:block;
  font-size:0.72rem;
  line-height:1.2;
  margin-top: 2px;
  color:var(--muted);
  font-weight:400;
}

/* Mobile header refinements: tighter logo lines, right-aligned language pills */
@media (max-width: 900px){
  .logo-main{
    display:block;
    line-height:1.15;
  }
  .header-inner{
    align-items:center;
    justify-content:flex-start;
    gap:0.5rem;
  }
  .nav{
    margin-left:auto;
    margin-right:0.5rem;
  }
  .lang-switch{
    flex-direction:column;
    gap:0.4rem;
    align-items:flex-end;
    flex-shrink:0;
  }
}



/* Contact form status messages */
.form-status {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.4;
  border: 1px solid transparent;
}

.form-status--success {
  background: #e6f6ea;
  color: #0b4f2a;
  border-color: #9bd3ac;
}

.form-status--error {
  background: #fbeaea;
  color: #7a1b1b;
  border-color: #f0b3b3;
}