:root{
  --bg:#f7fbfa;
  --text:#203036;
  --brand:#1d9f8f;
  --accent:#2ec4b6;
  --muted:#eef5f4;
}
*{box-sizing:border-box}
html{font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; line-height:1.55}
body{margin:0; color:var(--text); background:var(--bg)}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:980px; margin:0 auto; padding:24px}
.header{background:white; border-bottom:1px solid var(--muted); position:sticky; top:0; z-index:5}
.nav{display:flex; gap:18px; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--brand)}
.brand small{display:block; font-weight:500; color:#3a585f}
.menu a{padding:12px 8px; border-radius:8px}
.menu a.active, .menu a:hover{background:var(--muted)}
.hero{padding:64px 0; background:linear-gradient(180deg, #ffffff 0%, #f3fbf9 80%)}
.hero h1{font-size:clamp(26px, 4vw, 44px); margin:0 0 8px}
.hero p.lead{font-size:clamp(16px, 2.2vw, 20px); color:#32525a; max-width:800px}
.badge{display:inline-block; background:var(--brand); color:white; padding:6px 10px; border-radius:999px; font-size:14px; letter-spacing:.3px}
.grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); margin:24px 0}
.card{background:white; border:1px solid var(--muted); border-radius:14px; padding:18px}
.card h3{margin-top:0}
.footer{margin-top:48px; padding:32px 0; background:#0f1719; color:#c8d6d9}
.footer a{color:#9edbd3}
.form-group{margin-bottom:16px}
input, textarea{width:100%; padding:12px 14px; border:1px solid #d6e7e3; border-radius:10px; font:inherit; background:white}
button{background:var(--accent); color:#073b3a; font-weight:700; border:none; padding:12px 16px; border-radius:12px; cursor:pointer}
button:hover{filter:brightness(0.95)}
.small{font-size:14px; color:#5a767b}
.hidden{display:none}

/* ==== Lyra Netlify Pack: responsive header & consistency ==== */
:root{
  --brand:#1d9f8f;
  --accent:#2ec4b6;
  --text:#203036;
  --bg:#f7fbfa;
  --muted:#eef5f4;
}

/* Cap header/hero prominence on small screens */
@media (max-width: 600px){
  .header{padding-block:10px}
  .hero{padding:22px 0}
  .hero h1{font-size:clamp(22px, 6.2vw, 28px)}
  .hero p.lead{font-size:clamp(14px, 4.2vw, 16px)}
  header.top .container{padding:10px 16px}
}

/* Ensure header never exceeds ~20% viewport height */
@media (max-width: 600px){
  header.top{max-height:20vh; overflow:hidden}
}

/* Consistent card spacing and rounded corners */
.card{border-radius:16px}
.container{max-width:980px; padding:20px}

/* Link focus styles for accessibility */
a:focus{outline:2px dashed var(--accent); outline-offset:2px}

/* Footer consistency */
footer{padding:24px 0}
footer .container{padding:0 20px}

/* === Header/Menu Optimierung (Lyra v12) === */
.nav { gap: 12px; }

.menu a {
  padding: 8px 6px;
  font-weight: 500;
  color: var(--text);
  position: relative;
}

.menu a:hover,
.menu a.active {
  color: var(--brand);
  font-weight: 600;
}

.menu a.active::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--brand);
  margin-top: 4px;
  border-radius: 2px;
}

/* Responsive Anpassung */
@media (max-width: 768px) {
  .menu a { font-size: 15px; }
}

/* === Header/Menu Optimierung v12 === */
.nav{ gap:12px; }
.menu{ display:flex; gap:12px; align-items:center; }

.menu a{
  padding:8px 6px;
  font-weight:500;
  color:var(--text);
  position:relative;
  border-radius:6px; /* no background pills anymore */
}

/* Hover & Active: Markenfarbe + Unterstreichung */
.menu a:hover,
.menu a.active{
  color:var(--brand);
  background:none;
  font-weight:600;
}

.menu a.active::after{
  content:"";
  display:block;
  height:2px;
  background:var(--brand);
  margin-top:4px;
  border-radius:2px;
}

/* Responsiv verfeinern */
@media (max-width: 900px){
  .nav{ gap:10px; }
  .menu{ gap:10px; flex-wrap:wrap; }
  .menu a{ padding:8px 4px; font-size:15px; }
  .brand small{ font-size:12px; }
}
@media (max-width: 640px){
  .menu{ gap:8px; }
  .menu a{ font-size:14px; }
  .brand small{ display:none; } /* Platz sparen auf sehr kleinen Screens */
}

/* === v13 Fix: Menüpunkte nicht umbrechen === */
.menu a { white-space: nowrap; }

/* === v14: Header-Menu stabil auf einer Zeile (auch Laptop) === */
.menu { flex-wrap: nowrap; }
.menu a { white-space: nowrap; } /* doppelt gemoppelt für Sicherheit */

@media (max-width: 1200px){
  .menu { gap: 10px; }
  .menu a { font-size: 15px; padding: 8px 4px; }
  .brand small{ display:none; } /* Tagline ausblenden, spart Breite */
}

@media (max-width: 980px){
  .menu { gap: 8px; }
  .menu a { font-size: 14px; }
}


/* Prevent header wrap on small screens */
@media (max-width: 768px) {
  header .container { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  nav ul { display:flex; gap:0.5rem; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling: touch; }
  nav a { font-size: 0.95rem; padding: 0.25rem 0.4rem; }
  h1 { font-size: clamp(1.4rem, 6vw, 2rem); }
}

/* === Hero CTA buttons (added) === */
.hero-ctas { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1rem; }
.btn { display:inline-block; padding:0.7rem 1.1rem; border-radius:0.6rem; text-decoration:none; font-weight:600; }
.btn-primary { background:#084c61; color:#fff; }
.btn-primary:hover { background:#063a47; color:#fff; }
.btn-secondary { background:transparent; border:2px solid #084c61; color:#084c61; }
.btn-secondary:hover { background:#084c61; color:#fff; }

/* === Contact form layout adjustments === */
form input, form select, form textarea {
  max-width: 650px;
  width: 100%;
  margin: 0 auto 0.75rem auto;
  display: block;
}
form .form-group { text-align: left; }



/* === Contact form refined layout === */
.contact-form { max-width: 700px; margin: 0 auto; }
.contact-form textarea,
.contact-form input,
.contact-form select {
  max-width: 600px;
  width: 100%;
  margin: 0 auto 0.75rem auto;
  display: block;
}

/* Force narrow textarea width */
.contact-form textarea.narrow { max-width: 600px !important; width: 100% !important; }

/* === Textarea wrap to constrain width === */
.textarea-wrap { max-width: 600px; margin: 0 auto 0.75rem auto; }
.textarea-wrap textarea { width: 100% !important; max-width: 100% !important; display: block; }

/* === Contact form row layout === */
.contact-form .form-row { display:flex; gap:1rem; flex-wrap:wrap; max-width: 600px; margin: 0 auto 0.5rem auto; }
.contact-form .form-row .form-group { flex:1 1 280px; }

/* === Angebots-Kacheln === */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.card h3 { margin-top: 0.25rem; }
.card .details { padding-left: 1rem; margin: 0.5rem 0 1rem 0; }
.card .details li { margin: 0.2rem 0; }
.cta-row { display:flex; gap: 0.5rem; flex-wrap: wrap; }
.vignetten-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.vignette {
  background: #f3fbfb;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 0.75rem;
  padding: 0.75rem;
}
@media (max-width: 960px) {
  .card-grid, .vignetten-grid { grid-template-columns: 1fr; }
}

/* === REFOCUS Schulung === */
.termine {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.termine th, .termine td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  text-align: left;
}
.termine th { background: #f3fbfb; }
.termine td a.btn { padding: 0.4rem 0.8rem; font-size: 0.9rem; }

/* === REFOCUS page layout === */
.termine-list { list-style: none; padding-left: 0; }
.termine-list li { margin: 0.5rem 0; padding: 0.75rem; background: #f7fbfb; border: 1px solid rgba(0,0,0,0.06); border-radius: 0.6rem; }

.refocus-cta .cta-row { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top: 0.5rem; }


/* === REFOCUS expanded page === */
.refocus .lead { font-size: 1.125rem; line-height: 1.6; margin-bottom: 0.75rem; }
.refocus section { margin: 1.25rem 0; }
.refocus h2 { margin-top: 1.25rem; }
@media (max-width: 960px) {
  .refocus .card-grid { grid-template-columns: 1fr; }
}


/* === Global Mobile Optimizations === */
img, video { max-width: 100%; height: auto; }

/* Typography scales */
h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.2; }
h2 { font-size: clamp(1.25rem, 4.2vw, 1.8rem); line-height: 1.25; }
p, li { font-size: clamp(1rem, 3.6vw, 1.1rem); line-height: 1.6; }

/* Tap targets */
.btn, button, .nav a { min-height: 44px; line-height: 1.1; }

/* Container padding on small screens */
@media (max-width: 768px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; text-align: center; }
}

/* Simple Hamburger Navigation */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; cursor: pointer; }
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block; width: 26px; height: 3px; background: currentColor; position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after { content: ""; position: absolute; left: 0; }
.nav-toggle-label span::before { top: -8px; }
.nav-toggle-label span::after { top: 8px; }

@media (max-width: 768px) {
  .nav-toggle-label { display: inline-block; padding: 0.5rem; }
  nav ul { display: none; position: absolute; right: 1rem; top: 60px; background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 0.6rem; padding: 0.5rem 0.75rem; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
  nav ul li { display: block; margin: 0.25rem 0; }
  .nav-toggle:checked + .nav-toggle-label + ul { display: block; }
  header .container { position: relative; }
}

/* Avoid overlap with header */
header { position: sticky; top: 0; z-index: 1000; }


/* === Hero image mobile fix === */
.hero .hero-portrait {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  margin: 0 auto 12px auto;
  border-radius: 12px;
}

/* crop extra-tall images on small screens for better first impression */
@media (max-width: 600px) {
  .hero .hero-portrait {
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  .hero { padding: 40px 0; }
  .hero .container { text-align: left; }
}


/* === Hero content card & layout === */
.hero .container { display: block; }
.hero-content.card {
  background: #f3fbfb;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 12px;
}
@media (min-width: 980px) {
  .hero .container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: center; }
  .hero .hero-portrait { margin: 0; }
  .hero-content.card { margin-top: 0; }
}


/* === Hero image removed adjustments === */
.hero .container { display: block; }
.hero .hero-portrait { display: none !important; }


/* a11y focus */
:focus-visible { outline: 3px solid #111; outline-offset: 3px; }

/* readable links */
a:hover, a:focus { text-decoration: underline; }


/* a11y step2: focus states & readable text */
:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.nav-toggle-label:focus-visible { outline: 3px solid #111; border-radius: 8px; }

/* Ensure link contrast & affordance */
a { color:#084c61; }
a:hover, a:focus { text-decoration: underline; }

/* Button text weight for readability */
.btn { font-weight: 700; }

/* Ensure sufficient contrast on secondary button hover */
.btn-secondary:hover { background:#084c61; color:#fff; }

/* a11y step3 links */
a { color: #084c61; }
a:hover, a:focus { color: #063a47; text-decoration: underline; }

/* a11y step3 footer */
footer { color:#111; }
footer a { color:#111; text-decoration: underline; }
footer small, footer .muted { font-size: 0.95rem; }

/* a11y step3 type scale */
@media (max-width: 600px) {
  body { font-size: 16px; }
}

/* a11y step3 focus */
:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.btn:focus-visible { outline-color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #111; }


/* hero actions layout: mobile stacked, desktop inline */
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .hero-actions { flex-direction: row; gap: 1rem; }
}
.hero-actions .btn-link { padding: 0.5rem 0.25rem; border: 0; }


/* === Fix CTA links in hero intro card (no wrapper needed) === */
.hero .container .card a[href*="kontakt.html"],
.hero .container .card a[href*="angebot.html"],
.hero .container .card a[href*="ueber-mich.html"] {
  display: inline-block;
  margin-right: 1rem;
  margin-top: 0.75rem;
}
.hero .container .card a[href*="ueber-mich.html"] { margin-right: 0; }

@media (max-width: 768px) {
  .hero .container .card a[href*="kontakt.html"],
  .hero .container .card a[href*="angebot.html"],
  .hero .container .card a[href*="ueber-mich.html"] {
    display: block;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
}