.topbar{background-color:var(--bg-header);}
.site-header{background-color:var(--bg-header);}
.header{background-color:var(--bg-header);}
html{background-color:var(--bg-sand);}
:root{--bg-header:#f7f5f2;--bg-sand:#f3f1ed;}
:root{--bg-header:#f7f5f2;--brand:#5a0000;--brand-mid:#6a0000;--brand-dark:#3e0000;--brand-border:#2c0000}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {margin: 0;
    font-family: 'Inter', sans-serif;
    
    color: #333; background-color: var(--bg-sand);}
header {border-bottom: 3px solid #5a0000;
    padding: 2.2em 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 1000; background-color: var(--bg-header);}
header img {
    height: 140px;
    transform: scale(1.5);
    transform-origin: top left;
    margin-top: -82px;
    margin-bottom: -20px;
}
nav a {
    margin: 0 1em;
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

.btn:hover {
    background: linear-gradient(180deg, #5a0000, #900000);
    box-shadow: 0 10px 16px rgba(0,0,0,0.4);
    transform: translateY(-3px) scale(1.05);
}
.btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.btn:hover {
    background: #5a0000;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}
.hero {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 3em 2em;
    flex-wrap: wrap;
}
.hero img {
    background: #eee;
    max-width: 360px;
    margin-right: 2em;
}
.hero-text h1 {
    font-size: 1.4em;
    margin-bottom: 0.5em;
    color: #444;
}
.hero-text p {
    color: #5a0000;
    font-size: 1em;
    margin: 0.3em 0;
}
section {
    max-width: 1000px;
    margin: 3em auto;
    padding: 0 2em;
}
h1, h2, h3 {
    color: #5a0000;
}
h2 {
    font-size: 1.5em;
}
.highlight {
    color: #5a0000;
    font-weight: bold;
}
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-top: 1em;
}

footer {
    text-align: center;
    background: #f0f0f0;
    padding: 2em;
    font-size: 0.9em;
    margin-top: 3em;
}
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }
    .hero img {
        margin: 0 auto 1em;
        margin-right: 0;
    }
    .hero-text h1 {
        font-size: 1.1em;
    }
    .hero-text p {
        font-size: 0.95em;
    }
}

.content {
    max-width: 700px;
    margin: 3em auto 0 auto;
    padding: 2em 2em 2em 2em;
    background: #fff;
    border-radius: 1.2em;
    box-shadow: 0 2px 12px rgba(128,0,0,0.07);
}
@media (max-width: 900px) {
    .content {
        padding: 1.2em 0.5em;
        margin: 2em 0 0 0;
    }
}


.leistungen-list {
    display: flex;
    flex-direction: column;
    gap: 1.7em;
    padding: 0;
    margin: 2em 0;
}
.leistungen-card {
    background: #fff;
    border-radius: 1em;
    box-shadow: 0 2px 12px rgba(128,0,0,0.09);
    padding: 2em 2em;
    transition: box-shadow 0.2s;
    list-style: none;
    text-align: left;
}
.leistungen-card a {
    color: #5a0000;
    text-decoration: none;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 0.01em;
    transition: color 0.15s;
    display: inline-block;
    width: 100%;
}
.leistungen-card a:hover {
    color: #4d0000;
    text-decoration: underline;
}
@media (max-width: 600px) {
    .leistungen-card {
        padding: 1.3em 0.6em;
        font-size: 1em;
    }
}

li { margin-bottom: 0.8em; }

.btn-large {
    font-size: 1.2em;
    padding: 1em 2em;
}
.btn-spacing {
    display: inline-block;
    margin-bottom: 1.5em;
}



/* ===== Deutlichere, 3D-Buttons: gefüllt, dunkelrot, 3D ===== */
.btn, .button-row a {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 60%, var(--brand-dark) 100%);
    color: #fff;
    padding: 0.9em 1.6em;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 700;
    display: inline-block;
    border: 1px solid var(--brand-border);
    box-shadow:
        0 6px 14px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -2px 6px rgba(0,0,0,0.25);
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
    cursor: pointer;
}
.btn:hover, .button-row a:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 20px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -2px 6px rgba(0,0,0,0.25);
    filter: brightness(1.03);
}
.btn:active, .button-row a:active {
    transform: translateY(0);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.25),
        inset 0 2px 6px rgba(0,0,0,0.35);
    filter: brightness(0.98);
}
.btn:focus-visible, .button-row a:focus-visible {
    outline: 3px solid #ffd166;
    outline-offset: 3px;
}
.btn-large { font-size: 1.2em; padding: 1.05em 2.1em; border-radius: 12px; }
.btn-spacing { display: inline-block; margin-bottom: 1.8em; }
/* Hover: leichter Lift + heller Verlauf */
.btn:hover, .button-row a:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 20px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -2px 6px rgba(0,0,0,0.25);
    filter: brightness(1.03);
}

/* Active/gedrückt: Button wirkt gedrückt */
.btn:active, .button-row a:active {
    transform: translateY(0);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.25),
        inset 0 2px 6px rgba(0,0,0,0.35);
    filter: brightness(0.98);
}

/* Tastaturfokus gut sichtbar */
.btn:focus-visible, .button-row a:focus-visible {
    outline: 3px solid #ffd166;
    outline-offset: 3px;
}

/* Optional: größere Variante, die Sie bereits nutzen (.btn-large) passt sich an */
.btn-large {
    font-size: 1.2em;
    padding: 1.05em 2.1em;
    border-radius: 12px;
}

/* Zusätzlicher Abstand unter dem Button auf Onlinesprechstunde */
.btn-spacing {
    display: inline-block;
    margin-bottom: 1.8em;
}




/* Hover-Effekt für Logo-Link */
.logo-link img {
    transition: transform 0.3s ease-out, filter 0.3s ease-out;
}
.logo-link:hover img {
    transform: scale(1.03);
    filter: brightness(1.08);
    cursor: pointer;
}




/* === Über mich Seite (zweispaltig mit Tabs) === */
.about-page h1 { margin-top: 0; }
.subtitle { color:#444; margin-top:-0.6em; margin-bottom:1.2em; }
.about-grid { display:grid; grid-template-columns: 330px 1fr; gap:2rem; align-items:start; }
.about-left img { width:100%; max-width:400px; border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,0.15); background:#eee; }
.contact-card { margin-top:1rem; background:#fafafa; border:1px solid #eee; border-radius:12px; padding:1rem 1rem; }
.tabs { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:0.8rem; }
.tab { background:#eee; border:1px solid #ddd; border-radius:10px; padding:0.6rem 0.9rem; cursor:pointer; font-weight:600; }
.tab.active { background:#5a0000; color:#fff; border-color:#6a0000; }
.tab-panels { background:#fff; border:1px solid #eee; border-radius:12px; padding:1rem 1.2rem; box-shadow:0 2px 10px rgba(0,0,0,0.05); }
.tab-panel { display:none; }
.tab-panel.show { display:block; }
@media (max-width: 900px){
  .about-grid { grid-template-columns: 1fr; }
  .about-left img { max-width: 260px; margin: 0 auto; display:block; }
}



/* Bullet Points in Über mich entfernen */
.about-page ul {
  list-style-type: none;
  padding-left: 0;
}
.about-page li {
  margin-bottom: 0.6em;
}


/* === Preisliste modernes Layout (nur Styling, kein Textänderung) === */
.table-wrapper { overflow-x: auto; }
table.preise-modern { width: 100%; border-collapse: separate; border-spacing: 0; }
table.preise-modern thead th {
  font-weight: 700;
  text-align: left;
  padding: 0.9em 0.6em;
  border-bottom: 2px solid #e5e7eb; /* kräftiger Trenner wie im Screenshot */
  background: transparent;
}
table.preise-modern tbody td {
  padding: 0.9em 0.6em;
  border-bottom: 1px solid #edf0f3; /* feine horizontale Linien */
}
table.preise-modern tbody tr:last-child td { border-bottom: 0; }
table.preise-modern th:nth-child(1), table.preise-modern td:nth-child(1){ width: 48%; }
table.preise-modern th:nth-child(2), table.preise-modern td:nth-child(2){ width: 16%; }
table.preise-modern th:nth-child(3), table.preise-modern td:nth-child(3){ width: 18%; }
table.preise-modern th:nth-child(4), table.preise-modern td:nth-child(4){ width: 18%; }
table.preise-modern td, table.preise-modern th { vertical-align: top; color: #333; }


/* === Enhanced Startseite styles (appended) === */
.hero-enhanced { position: relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-enhanced img { width:100%; height:520px; object-fit:cover; filter: brightness(0.65); }
.hero-enhanced .hero-overlay { position:absolute; inset:0; background: radial-gradient(1200px 520px at 20% 50%, rgba(255,255,255,0.08), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.45)); }
.hero-enhanced .hero-text { position:absolute; max-width:1100px; padding:24px; color:#fff; text-align:left; }
.hero-enhanced .hero-text h1 { font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height:1.25; margin:0 0 12px; }
.hero-enhanced .hero-text .hero-sub { opacity:.95; margin: 0 0 18px; font-weight:600; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; }
.btn-primary { background: linear-gradient(180deg, var(--brand), var(--brand-mid) 60%, var(--brand-dark)); color:#fff; border:1px solid var(--brand-border);}
.btn-primary:hover { filter: brightness(1.03); }
.btn-secondary { background: linear-gradient(180deg, var(--brand), var(--brand-mid) 60%, var(--brand-dark)); color:#fff; border:1px solid var(--brand-border);}
.btn-secondary:hover { filter: brightness(1.03); }

.features { padding: 24px 0 0; }
.features-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px; }
.feature-card { display:block; background:#fff; border:1px solid #eee; border-radius:16px; padding:18px; text-decoration:none; color:inherit; box-shadow: 0 6px 18px rgba(0,0,0,0.06); transition: transform .15s ease, box-shadow .15s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.09); }
.feature-card h3 { margin:0 0 6px; }
.feature-card p { margin:0; color:#555; }

.button-row-tight { display:flex; gap:12px; flex-wrap:wrap; }
.button-row-tight a { border-radius:12px; }

/* Responsive tweaks */
@media (max-width: 720px) {
  .hero-enhanced img { height: 420px; }
  .hero-enhanced .hero-text { padding: 16px; }
}


/* === Global header shadow on scroll === */
header { position: sticky; top: 0; z-index: 1000; background: #ffffffcc; backdrop-filter: saturate(180%) blur(10px); transition: box-shadow .2s ease;}
header.is-scrolled { box-shadow: 0 8px 22px rgba(0,0,0,0.08); }

/* === Buttons: neutral/blue scheme (override previous) === */
.btn { display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; }
.btn-primary { background: linear-gradient(180deg, var(--brand), var(--brand-mid) 60%, var(--brand-dark)); color:#fff; border:1px solid var(--brand-border);}
.btn-primary:hover { filter: brightness(1.03); }
.btn-secondary { background: linear-gradient(180deg, var(--brand), var(--brand-mid) 60%, var(--brand-dark)); color:#fff; border:1px solid var(--brand-border);}
.btn-secondary:hover { filter: brightness(1.03); }

/* === Split hero (no text over photo) === */
.hero-split { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items:center; padding: 24px 0; }
.hero-split .hero-copy { padding: 8px 8px 8px 0; }
.hero-split .hero-copy h1 { margin:0 0 12px; line-height:1.25; font-size: clamp(1.4rem, 3.2vw, 2.4rem); }
.hero-split .hero-sub { margin: 0 0 18px; color:#333; font-weight:600; }
.hero-split .hero-media img { width:100%; height: 420px; object-fit: cover; border-radius: 16px; box-shadow: 0 10px 28px rgba(0,0,0,0.10); }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

/* Features tidy */
.features { padding: 8px 0 0; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split .hero-media img { height: 320px; }
}


/* === Feedback tweak: hero H1 smaller + more inset from left === */
.hero-split .hero-copy { padding-left: 28px; max-width: 680px; }
@media (max-width: 900px) {
  .hero-split .hero-copy { padding-left: 16px; }
}
.hero-split .hero-copy h1 { font-size: clamp(1.25rem, 2.4vw, 2.0rem); }


/* === Animated hero (image slides in, text fades up) === */
.hero-split .hero-copy h1 { color:#5a0000; font-weight:800; }
@keyframes fadeUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
@keyframes slideIn { from { opacity:0; transform: translateX(40px); } to { opacity:1; transform: translateX(0); } }

.hero-split .hero-copy h1 { animation: fadeUp .7s ease-out .05s both; }
.hero-split .hero-copy .hero-sub { animation: fadeUp .7s ease-out .18s both; }
.hero-ctas { animation: fadeUp .7s ease-out .3s both; }
.hero-split .hero-media img { animation: slideIn .75s ease-out .12s both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-split .hero-copy h1,
  .hero-split .hero-copy .hero-sub,
  .hero-ctas,
  .hero-split .hero-media img { animation: none !important; }
}

/* Slightly smaller H1 and more left inset as requested */
.hero-split .hero-copy { padding-left: 32px; max-width: 720px; }
.hero-split .hero-copy h1 { font-size: clamp(1.2rem, 2.2vw, 1.9rem); }


/* === Layout tweak: ensure image on the RIGHT (desktop), stack on mobile === */
.hero-split { display:grid; grid-template-columns: 1.1fr 0.9fr; grid-template-areas: "copy media"; }
.hero-split .hero-copy { grid-area: copy; }
.hero-split .hero-media { grid-area: media; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; grid-template-areas: "copy" "media"; }
}

/* === Button color scheme: red to match heading === */
.btn-primary { background: linear-gradient(180deg, var(--brand), var(--brand-mid) 60%, var(--brand-dark)); color:#fff; border:1px solid var(--brand-border);}
.btn-primary:hover { filter: brightness(1.03); }
.btn-secondary { background: linear-gradient(180deg, var(--brand), var(--brand-mid) 60%, var(--brand-dark)); color:#fff; border:1px solid var(--brand-border);}
.btn-secondary:hover { filter: brightness(1.03); }


/* === Video-like hero adjustments === */
/* Put image LEFT, text RIGHT; give image more space */
.hero-split { grid-template-columns: 1.2fr 0.8fr; grid-template-areas: "media copy"; }
.hero-split .hero-media { grid-area: media; }
.hero-split .hero-copy { grid-area: copy; padding-left: 24px; padding-right: 8px; max-width: 740px; }

/* Larger image height on desktop */
.hero-split .hero-media img { height: 560px; }

/* Darker red heading to match site */
.hero-split .hero-copy h1 { color:#5a0000; font-weight: 800; }

/* Buttons in darker red scheme */
.btn-primary { background: linear-gradient(180deg, var(--brand), var(--brand-mid) 60%, var(--brand-dark)); color:#fff; border:1px solid var(--brand-border);}
.btn-primary:hover { filter: brightness(1.03); }
.btn-secondary { background: linear-gradient(180deg, var(--brand), var(--brand-mid) 60%, var(--brand-dark)); color:#fff; border:1px solid var(--brand-border);}
.btn-secondary:hover { filter: brightness(1.03); }

/* Animation: slide image in from LEFT, text fade up */
@keyframes slideInLeft { from { opacity:0; transform: translateX(-40px); } to { opacity:1; transform: translateX(0); } }
.hero-split .hero-media img { animation: slideInLeft .75s ease-out .12s both; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; grid-template-areas: "media" "copy"; }
  .hero-split .hero-media img { height: 360px; }
  .hero-split .hero-copy { padding-left: 16px; padding-right: 16px; }
}


/* === Center hero grid + add responsive side padding === */
.hero-split {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}
.hero-split .hero-copy {
  padding-left: clamp(12px, 2vw, 24px);
  padding-right: clamp(8px, 1.6vw, 16px);
}
.hero-split .hero-media img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}


/* === Mobile nav (burger) === */
header { display:flex; align-items:center; gap:12px; padding:10px clamp(12px, 3vw, 24px); }
header .logo-link img { height: 44px; }

.nav-toggle { display:none; width:44px; height:44px; border:none; background:transparent; cursor:pointer; border-radius:10px; }
.nav-toggle:focus-visible { outline: 2px solid #5a0000; outline-offset: 2px; }
.nav-toggle .nav-toggle-bar { display:block; width:24px; height:2px; background:#222; margin:5px auto; border-radius:2px; }

header nav a { margin-right: 12px; }

@media (max-width: 900px) {
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
  header nav { 
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid #eee;
    display: none; flex-direction: column; padding: 10px 16px 16px;
  }
  header.has-nav-open nav { display: flex; }
  header nav a { display:block; padding: 10px 6px; margin: 0; }
  header .btn { margin-left: auto; } /* keep CTA on the right */
}

/* === Mobile spacing for content === */
.content { padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); }

/* === Button touch targets === */
.btn { min-height: 44px; line-height: 1.2; padding: 12px 18px; border-radius: 12px; }


/* === Ensure logo is always visible and clickable === */
header { display:flex; align-items:center; gap:12px; }
header .logo-link { display:flex; align-items:center; flex: 0 0 auto; }
header .logo-link img { display:block; height: 46px; width:auto; max-width: 200px; }
/* Keep logo on the left, nav after it, and keep CTA and burger aligned */


/* === Logo 3x larger and button-like === */
header .logo-link { 
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 12px; border-radius: 14px; cursor: pointer;
  border: 2px solid rgba(138,13,13,0.35);
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
header .logo-link:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); background:#fff7f7; }
header .logo-link:active { transform: translateY(0); }
header .logo-link:focus-visible { outline: 2px solid #5a0000; outline-offset: 3px; }
header .logo-link img { height: 138px; width:auto; }

/* Keep header comfortable with big logo */
header { gap: 14px; padding-top: 8px; padding-bottom: 8px; }

/* Mobile adjustments so header doesn't get too tall */
@media (max-width: 900px) {
  header .logo-link img { height: 88px; }
  header { padding-top: 6px; padding-bottom: 6px; }
}


/* === Reset logo link to plain (no button style) === */
header .logo-link { padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
header .logo-link:hover { transform: none !important; box-shadow: none !important; background: transparent !important; }
header .logo-link:active { transform: none !important; }
header .logo-link img { height: 138px; width: auto; }
@media (max-width: 900px) {
  header .logo-link img { height: 88px; }
}

/* === Startseite button style === */
.btn-start { background: linear-gradient(180deg, var(--brand), var(--brand-mid) 60%, var(--brand-dark)); color: #fff; border: 1px solid var(--brand-border); }
.btn-start:hover { filter: brightness(1.03); }


/* Buttons auf mobilen Geräten (Breite < 600px) etwas kleiner */
@media (max-width: 600px) {
  .btn, .button-row a, .btn-start {
    font-size: 0.9em;
    padding: 0.6em 1.2em;
    border-radius: 8px;
  }

  .btn-large {
    font-size: 1em;
    padding: 0.8em 1.6em;
  }
}


/* Header-Buttons auf mobilen Geräten kleiner darstellen */
@media (max-width: 600px) {
  header .btn, header .btn-start {
    font-size: 0.8em;
    padding: 0.5em 1em;
    border-radius: 6px;
  }
}


/* Alle Buttons (inkl. Header) auf mobilen Geräten kleiner darstellen */
@media (max-width: 600px) {
  .btn, .button-row a, .btn-start, header .btn, header .btn-start {
    font-size: 0.75em;
    padding: 0.45em 0.9em;
    border-radius: 6px;
  }
  .btn-large {
    font-size: 0.9em;
    padding: 0.7em 1.4em;
  }
}


/* Micro-interactions: reveal on scroll */
.reveal{opacity:0;transform:translateY(10px);} .reveal.is-visible{opacity:1;transform:translateY(0);transition:opacity .5s ease, transform .5s ease;} @media (prefers-reduced-motion: reduce){.reveal,.reveal.is-visible{opacity:1!important;transform:none!important;transition:none!important;}}



header {
  gap: clamp(4px, 1vw, 12px);
}

header .btn,
header .btn-start {
  margin-left: 0;
  margin-right: 0;
}

header .btn + .btn,
header .btn-start + .btn {
  margin-left: 6px;
}


/* === Header Buttons sehr eng nebeneinander === */
header {
  gap: 4px;
}

header .btn,
header .btn-start {
  margin: 0;
  padding: 0.55em 1.1em;
}

header .btn + .btn,
header .btn-start + .btn {
  margin-left: 3px;
}

header .btn,
header .btn-start {
  vertical-align: middle;
}



/* === HEADER BUTTON CLUSTER OVERRIDE (tight pair) === */
header {
  justify-content: flex-start !important; /* remove space-between that spreads items */
  gap: 4px !important;
}

header nav { 
  margin-left: auto !important;          /* push nav and following items to the right */
}

header .btn-start,
header .btn {
  margin: 0 !important;
  padding: 0.55em 1.05em !important;
  vertical-align: middle;
}

header .btn-start + .btn,
header .btn + .btn {
  margin-left: 3px !important;           /* 3px space between the two buttons */
}

/* guard: some mobile rules set margin-left:auto on header .btn */
@media (max-width: 900px){
  header .btn, header .btn-start { margin-left: 0 !important; }
}



/* === Mobile header split: 50% logo | 50% "Termin buchen" === */
@media (max-width: 900px) {
  /* Hide nav, Startseite button and burger */
  header nav,
  header .btn-start,
  .nav-toggle { display: none !important; }

  /* Two equal columns: Logo (left), CTA (right) */
  header {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
  }

  header .logo-link { justify-self: start; }
  header .logo-link img { height: 138px !important; width: auto; }

  /* Keep only the booking button on the right side */
  header .btn { 
    justify-self: end; 
    width: auto; 
    font-size: 0.9em; 
    padding: 0.7em 1.2em; 
    display: inline-block !important;
  }
}


/* === Force-hide Startseite button on mobile (stronger specificity) === */
@media (max-width: 900px) {
  header a.btn.btn-start,
  header .btn-start {
    display: none !important;
    visibility: hidden !important;
  }
}


/* === Mobile header: logo only (no buttons) === */
@media (max-width: 900px) {
  /* Hide ALL header buttons including 'Termin buchen' */
  header a.btn { 
    display: none !important; 
    visibility: hidden !important; 
  }

  /* Keep nav and burger hidden on mobile */
  header nav, .nav-toggle { display: none !important; }

  /* Use a simple single-row flex layout for the header */
  header {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 16px;
  }

  /* Keep logo size consistent */
  header .logo-link img { height: 138px !important; width: auto; }
}


/* === Mobile quicklinks at bottom: Über mich, Onlinesprechstunde, Rechnung, Blog === */
.mobile-quicklinks { display: none; }
@media (max-width: 900px) {
  .mobile-quicklinks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 700px;
    margin: 16px auto 12px auto;
    padding: 0 16px;
  }
  .mobile-quicklinks .btn {
    width: 100%;
    text-align: center;
  }
}


/* === Mobile quicklinks (homepage, above 'Preisliste') === */
.mobile-quicklinks { display: none; }
@media (max-width: 900px) {
  .mobile-quicklinks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 700px;
    margin: 12px auto 10px auto;
    padding: 0 16px;
  }
  /* Match size/feel of 'Preisliste' buttons */
  .mobile-quicklinks .btn {
    width: 100%;
    text-align: center;
    border-radius: 12px; /* same rounding as .button-row-tight a */
  }
}


/* === Mobile quicklinks: grid responsive + slimmer buttons === */
@media (max-width: 900px) {
  /* Default for very small phones: 2 columns */
  .mobile-quicklinks {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* From ~400px width: show all four in one row */
  }

  /* Slimmer buttons to match a flatter look than 'Preisliste' */
  .mobile-quicklinks .btn {
    padding: 6px 10px;        /* smaller vertical padding */
    min-height: 34px;         /* override global 44px */
    line-height: 1.1;
    font-size: 0.9em;
    border-radius: 10px;
  }
}


/* === Mobile quicklinks: single column, equal width/height like 'Preisliste' === */
@media (max-width: 900px) {
  .mobile-quicklinks {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 700px;
    margin: 12px auto 10px auto;
    padding: 0 16px;
  }
  .mobile-quicklinks .btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* Match "Preisliste" sizing at very small mobiles */
@media (max-width: 600px) {
  .mobile-quicklinks .btn {
    font-size: 0.75em !important;
    padding: 0.45em 0.9em !important;
    border-radius: 6px !important;
    min-height: 44px !important;
  }
}
/* Match "Preisliste" sizing on larger mobiles (601–900px) */
@media (min-width: 601px) and (max-width: 900px) {
  .mobile-quicklinks .btn {
    font-size: 1em !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    min-height: 44px !important;
  }
}


/* === Mobile: make quicklinks + 'Preisliste'/'Anschreiben' buttons half-height === */
@media (max-width: 900px) {
  /* Apply to quicklinks and the two buttons inside .button-row.button-row-tight */
  .mobile-quicklinks .btn,
  .button-row.button-row-tight a {
    padding: 6px 12px !important;    /* ~half the previous vertical padding */
    min-height: 22px !important;      /* half of 44px */
    border-radius: 10px !important;
  }
}


/* === Mobile: integrate pricing buttons into quicklinks and hide original row === */
@media (max-width: 900px) {
  .button-row.button-row-tight { display: none !important; }
}


/* === FINAL OVERRIDE: Mobile quicklinks stacked (one per row) === */
@media (max-width: 900px) {
  .mobile-quicklinks {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    grid-template-columns: none !important; /* neutralize older grid rules */
  }
  .mobile-quicklinks > *,
  .mobile-quicklinks .btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* === Mobile header: centered, smaller logo, no hover effects === */
@media (max-width: 900px) {
  /* keep header simple */
  header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* center the logo */
    padding: 6px 12px !important;
    gap: 0 !important;
  }

  /* hide other header elements (safety) */
  header nav, .nav-toggle, header .btn, header .btn-start { 
    display: none !important; 
  }

  /* smaller, centered logo without effects */
  header .logo-link {
    margin: 0 auto !important;
  }
  header .logo-link img {
    height: 70px !important;   /* smaller than before */
    width: auto !important;
    transition: none !important;
    filter: none !important;
  }
  header .logo-link:hover img,
  header .logo-link:active img,
  header .logo-link:focus img {
    transform: none !important;
    filter: none !important;
  }
}


/* === Fix: mobile logo fully visible (neutralize legacy header img transforms/margins) === */
@media (max-width: 900px) {
  /* Neutralize generic header img rules that add negative margins/transform */
  header img {
    margin: 0 !important;
    transform: none !important;
    transform-origin: center center !important;
  }
  header .logo-link img {
    height: 72px !important;   /* tiny nudge larger for clarity */
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
}


/* === Mobile header: double logo size (~144px), keep centered and fully visible === */
@media (max-width: 900px) {
  header {
    padding: 10px 16px !important; /* a bit more breathing room */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  header img {
    margin: 0 !important;
    transform: none !important;
  }
  header .logo-link img {
    height: 144px !important;  /* doubled from ~72px */
    width: auto !important;
  }
}


/* === Mobile header: logo fits header height, centered === */
@media (max-width: 900px) {
  :root { --header-h-mobile: 110px; } /* adjust this if you want a different header height */
  header {
    height: var(--header-h-mobile) !important;
    padding: 0 16px !important;            /* no vertical padding so img can fill height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  header .logo-link { margin: 0 auto !important; }
  header img, header .logo-link img {
    height: 100% !important;               /* logo exactly as tall as header */
    max-height: 100% !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
}


/* === Desktop Header-Logo exakt passend & ohne Hover-Effekt (Update 2025-10-07) === */
header {
  height: 80px;
  align-items: center;
}

header .logo-link img {
  height: 100%;
  width: auto;
  max-height: 80px;
  transition: none !important;
  filter: none !important;
}

header .logo-link:hover img {
  transform: none !important;
  filter: none !important;
}


/* === FIX (2025-10-07): Desktop-Logo exakt in Header, keine Hover-Effekte === */
header { 
  height: 80px !important; 
  align-items: center !important; 
}

/* Alte globale header img Regeln neutralisieren */
header img,
header .logo-link img {
  transform: none !important;
  margin: 0 !important;
}

/* Logo exakt einpassen */
header .logo-link img {
  height: 100% !important;
  max-height: 80px !important;
  width: auto !important;
  transition: none !important;
  filter: none !important;
}

/* Hover vollständig deaktivieren */
.logo-link:hover img,
header .logo-link:hover img {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}