/* Zimmer theme — component styles, translated 1:1 from the Claude Design
   component set (Button, Hero, ServiceCard, ProjectCard, TestimonialCard,
   CTABand, ContactForm, Header, Footer). Tokens come from tokens/*.css. */

/* ---------- Buttons ---------- */
.zm-btn{
  font-family:var(--font-display);font-weight:700;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;
  text-decoration:none;line-height:1.25;white-space:normal;text-align:center;
  max-width:100%;
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
/* Buttons get room to sit on one line only once the layout is wide enough
   that long CTA text (e.g. "Angebot für Badsanierung anfordern") won't
   force the page to scroll horizontally. */
@media (min-width:640px){
  .zm-btn{white-space:nowrap}
}
.zm-btn:active{transform:translateY(1px)}
.zm-btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.zm-btn--sm{font-size:14px;padding:9px 16px}
.zm-btn--md{font-size:16px;padding:13px 22px}
.zm-btn--lg{font-size:18px;padding:17px 30px}
.zm-btn--primary{background:var(--brand);color:var(--on-brand)}
.zm-btn--primary:hover{background:var(--brand-hover)}
.zm-btn--primary:active{background:var(--brand-active)}
.zm-btn--secondary{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-default)}
.zm-btn--secondary:hover{background:var(--n-50);border-color:var(--border-strong)}
.zm-btn--ghost{background:transparent;color:var(--text-brand)}
.zm-btn--ghost:hover{background:var(--brand-tint)}
.zm-btn--inverse{background:var(--n-0);color:var(--green-700)}
.zm-btn--inverse:hover{background:var(--n-50)}
.zm-btn--on-brand{background:transparent;color:var(--on-brand);border-color:rgba(255,255,255,.5)}
.zm-btn--on-brand:hover{background:rgba(255,255,255,.1)}
.zm-btn--full{width:100%}

/* ---------- Layout helpers ----------
   Mobile-first: base rules below target small screens. Larger screens are
   progressively enhanced via min-width media queries at the bottom. */
.zm-section{padding:var(--section-y-sm) 0}
.zm-section--sm{padding:calc(var(--section-y-sm) * .66) 0}
.zm-section--sunken{background:var(--surface-sunken)}
.zm-section--tight-b{padding-bottom:var(--space-8)}
.zm-section--tight-t{padding-top:var(--space-8)}

/* ---------- Header ---------- */
.zm-header{position:sticky;top:0;z-index:50;background:var(--surface-page);border-bottom:1px solid var(--border-subtle)}
.zm-header__inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);height:64px;display:flex;align-items:center;gap:16px}
.zm-logo{display:flex;align-items:center;flex:none}
.zm-logo img{height:32px;width:auto}

.zm-nav-toggle{margin-left:auto;flex:none;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--border-default);
  background:var(--surface-card);color:var(--text-strong);cursor:pointer}
.zm-nav-toggle:hover{background:var(--n-50)}

.zm-nav{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;z-index:49;
  background:var(--surface-page);flex-direction:column;gap:2px;padding:var(--space-4) var(--gutter);
  overflow-y:auto}
.zm-nav.is-open{display:flex}
.zm-nav a{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text-body);
  text-decoration:none;padding:14px 4px;border-bottom:1px solid var(--border-subtle);transition:var(--transition-base)}
.zm-nav a:hover,.zm-nav a.is-active{color:var(--text-brand)}
.zm-nav__cta-mobile{margin-top:var(--space-4)}

.zm-header__actions{display:none;align-items:center;gap:12px;flex:none}

/* ---------- Hero ---------- */
.zm-hero{background:var(--surface-page);padding:var(--space-10) 0 var(--space-16)}
.zm-hero__inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.zm-hero__title{font-size:var(--text-hero);font-weight:800;line-height:var(--lh-tight);margin:0}
.zm-hero__lead{font-size:var(--text-lead);line-height:1.55;color:var(--text-muted);margin:20px 0 0;max-width:520px}
.zm-hero__ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.zm-hero__points{list-style:none;padding:0;margin:32px 0 0;display:flex;gap:24px;flex-wrap:wrap}
.zm-hero__points li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--text-body)}
.zm-hero__points .zm-check{width:20px;height:20px;border-radius:50%;background:var(--green-100);
  display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--green-700)}
.zm-media-placeholder{border-radius:var(--radius-lg);overflow:hidden;background:var(--n-100);
  border:1px dashed var(--border-strong);min-height:420px;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:15px;text-align:center;padding:24px}
.zm-media-placeholder img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Section heading ---------- */
.zm-section-heading{max-width:680px;margin-bottom:var(--space-12)}
.zm-section-heading--center{text-align:center;margin-left:auto;margin-right:auto}
.zm-section-heading .zm-eyebrow{margin-bottom:12px}
.zm-section-heading h2{margin:0}
.zm-section-heading p{font-size:var(--text-lead);line-height:1.55;margin-top:16px;color:var(--text-muted)}

/* ---------- Problem block ---------- */
.zm-problem{display:grid;grid-template-columns:1fr;gap:28px}
.zm-problem__item{display:flex;gap:14px;align-items:flex-start}
.zm-problem__icon{width:40px;height:40px;border-radius:50%;background:var(--brand-tint);color:var(--brand);
  display:flex;align-items:center;justify-content:center;flex:none}
.zm-problem__item p{margin:0;color:var(--text-body);font-size:15px;line-height:1.5}

/* ---------- Plan steps ---------- */
.zm-steps{display:grid;grid-template-columns:1fr;gap:28px;counter-reset:zm-step}
.zm-step{position:relative;padding-left:0}
.zm-step__number{font-family:var(--font-display);font-size:44px;font-weight:800;color:var(--brand-subtle);line-height:1}
.zm-step h3{margin-top:8px}

/* ---------- Cards ---------- */
.zm-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:var(--transition-base)}

/* ---------- Service grid / card ---------- */
.zm-service-grid{display:grid;grid-template-columns:1fr;gap:20px}
.zm-service-card{padding:26px;height:100%;display:block;text-decoration:none;color:inherit}
.zm-service-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-brand);transform:translateY(-2px)}
.zm-service-card .zm-icon{color:var(--brand)}
.zm-service-card h3{font-size:20px;font-weight:700;margin:16px 0 6px}
.zm-service-card p{font-size:15px;color:var(--text-muted);margin:0;line-height:1.5}
.zm-service-card__more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-brand)}

/* ---------- Project grid / card ---------- */
.zm-project-grid{display:grid;grid-template-columns:1fr;gap:20px}
.zm-project-card{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-sm);background:var(--surface-card);transition:var(--transition-base);
  display:block;text-decoration:none;color:inherit}
.zm-project-card:hover{border-color:var(--border-brand);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.zm-project-card__media{position:relative;height:230px;background:var(--n-100);display:flex;align-items:center;
  justify-content:center;color:var(--text-muted);font-size:14px;text-align:center;padding:16px}
.zm-project-card__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.zm-project-card__category{position:absolute;top:14px;left:14px;background:var(--surface-card);
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--green-800);padding:5px 10px;border-radius:var(--radius-pill);z-index:1}
.zm-project-card__body{padding:20px 22px 22px}
.zm-project-card__body h3{font-size:19px;margin:0}
.zm-project-card__meta{font-size:15px;color:var(--text-muted);margin-top:6px}
.zm-project-card__link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-brand)}

/* ---------- Testimonials ---------- */
.zm-testimonial-grid{display:grid;grid-template-columns:1fr;gap:20px}
.zm-testimonial-card{padding:26px;height:100%;display:flex;flex-direction:column}
.zm-testimonial-card__stars{display:flex;gap:2px;color:var(--ochre-500);margin-bottom:14px}
.zm-testimonial-card__quote{font-size:17px;line-height:1.6;color:var(--text-body);margin:0;flex:1}
.zm-testimonial-card__footer{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-subtle)}
.zm-testimonial-card__author{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text-strong)}
.zm-testimonial-card__meta{font-size:14px;color:var(--text-muted);margin-top:2px}

/* ---------- Stat block ---------- */
.zm-stats{display:flex;gap:48px;flex-wrap:wrap}
.zm-stat__value{font-family:var(--font-display);font-size:44px;font-weight:800;letter-spacing:var(--ls-tight);
  line-height:1;color:var(--brand)}
.zm-stat__value--inverse{color:var(--n-0)}
.zm-stat__label{margin-top:8px;font-size:15px;color:var(--text-muted)}
.zm-stat__label--inverse{color:rgba(255,255,255,.82)}

/* ---------- CTA band ---------- */
.zm-cta-band{background:var(--surface-brand);color:var(--n-0);padding:var(--space-12) 0}
.zm-cta-band__inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.zm-cta-band__copy{max-width:620px}
.zm-cta-band h2{color:var(--n-0);margin:0}
.zm-cta-band p{color:rgba(255,255,255,.86);margin:14px 0 0}
.zm-cta-band__actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Forms ---------- */
.zm-form{display:flex;flex-direction:column;gap:16px}
.zm-form h3{font-size:22px;margin:0}
.zm-field{display:flex;flex-direction:column;gap:6px}
.zm-field label{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-strong)}
.zm-field .zm-required{color:var(--brand)}
.zm-field-row{display:grid;grid-template-columns:1fr;gap:16px}
.zm-input,.zm-textarea,.zm-select{
  font-family:var(--font-body);font-size:16px;color:var(--text-strong);background:var(--surface-card);
  border-radius:var(--radius-sm);width:100%;transition:var(--transition-base);outline:none;
  padding:13px 14px;border:1px solid var(--border-default);
}
.zm-input:focus,.zm-textarea:focus,.zm-select:focus{border-color:var(--border-brand);box-shadow:var(--focus-ring)}
.zm-textarea{resize:vertical;line-height:1.55}
.zm-checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-body)}
.zm-checkbox-row input{margin-top:3px}
.zm-form-hint{font-size:13px;color:var(--text-muted);margin:0}
.zm-alert{border-radius:var(--radius-md);padding:18px 20px;background:var(--success-100);color:var(--green-800);
  border:1px solid var(--green-200)}
.zm-alert h4{margin:0 0 4px;color:inherit}

/* ---------- Grav Form plugin default markup, themed to match ---------- */
.zm-form{display:flex;flex-direction:column;gap:16px}
.zm-form label{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-strong);display:block;margin-bottom:6px}
.zm-form input[type="text"],.zm-form input[type="email"],.zm-form input[type="tel"],
.zm-form textarea,.zm-form select{
  font-family:var(--font-body);font-size:16px;color:var(--text-strong);background:var(--surface-card);
  border-radius:var(--radius-sm);width:100%;transition:var(--transition-base);outline:none;
  padding:13px 14px;border:1px solid var(--border-default);
}
.zm-form input:focus,.zm-form textarea:focus,.zm-form select:focus{border-color:var(--border-brand);box-shadow:var(--focus-ring)}
.zm-form textarea{resize:vertical;line-height:1.55}
.zm-form .form-newline{margin-bottom:16px}
.zm-form input[type="checkbox"]{margin-right:8px}
.zm-form button[type="submit"]{
  font-family:var(--font-display);font-weight:700;font-size:18px;padding:17px 30px;
  border-radius:var(--radius-md);border:none;background:var(--brand);color:var(--on-brand);
  cursor:pointer;width:100%;transition:var(--transition-base);
}
.zm-form button[type="submit"]:hover{background:var(--brand-hover)}
.zm-form .form-message,.zm-form .alert{border-radius:var(--radius-md);padding:18px 20px;
  background:var(--success-100);color:var(--green-800);border:1px solid var(--green-200)}

/* ---------- Long-form content (leistung_item body) ---------- */
.zm-content{margin-top:8px}
.zm-content h2{margin-top:56px;font-size:var(--text-h3)}
.zm-content h3{margin-top:32px;font-size:var(--text-h4)}
.zm-content p{color:var(--text-body)}
.zm-content ul,.zm-content ol{color:var(--text-body);padding-left:22px;margin:0 0 var(--space-4)}
.zm-content li{margin-bottom:6px}
.zm-content img{width:100%;height:auto;border-radius:var(--radius-lg);border:1px dashed var(--border-strong);
  background:var(--n-100);margin:32px 0;display:block}
.zm-content figure{margin:32px 0}
.zm-content figcaption{font-size:13px;color:var(--text-muted);margin-top:8px;text-align:center}

/* ---------- FAQ ---------- */
.zm-faq{margin-top:56px;padding-top:40px;border-top:1px solid var(--border-subtle)}
.zm-faq h2{font-size:var(--text-h3)}
.zm-faq__item{padding:20px 0;border-bottom:1px solid var(--border-subtle)}
.zm-faq__item h3{margin:0 0 8px;font-size:17px}
.zm-faq__item p{margin:0;color:var(--text-body)}

/* ---------- Footer ---------- */
.zm-footer{background:var(--surface-inverse);color:rgba(255,255,255,.72);padding-top:48px}
.zm-footer__inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.zm-footer__grid{display:grid;grid-template-columns:1fr;gap:32px}
.zm-footer__brand img{height:38px;width:auto;margin-bottom:20px}
.zm-footer__contact{display:flex;flex-direction:column;gap:10px;font-size:15px}
.zm-footer__contact span{display:flex;gap:10px}
.zm-footer__col-title{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--green-300);margin-bottom:16px}
.zm-footer__links{display:flex;flex-direction:column;gap:10px}
.zm-footer__links a{color:rgba(255,255,255,.72);text-decoration:none;font-size:15px}
.zm-footer__bottom{margin-top:48px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px;color:rgba(255,255,255,.5)}
.zm-footer__bottom a{color:inherit;text-decoration:none}
.zm-footer__legal-links{display:flex;gap:20px}

/* ---------- Icons ---------- */
.zm-icon{display:inline-flex;flex:none}
.zm-icon svg{width:100%;height:100%}

/* ---------- Sticky mobile call bar (mobile-only, hidden from 640px up) ---------- */
.zm-mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface-page);
  border-top:1px solid var(--border-subtle);padding:10px;gap:10px;box-shadow:var(--shadow-lg)}
.zm-mobile-bar .zm-btn{flex:1;white-space:nowrap;padding-left:8px;padding-right:8px}
body{padding-bottom:76px}

/* =====================================================================
   Mobile-first breakpoints — base styles above target phones; each step
   below progressively enhances the layout for wider viewports.
   ===================================================================== */

/* Small tablet and up: inline header nav, multi-column grids, wider forms */
@media (min-width:640px){
  .zm-header__inner{height:84px}
  .zm-section{padding:var(--section-y-sm) 0}
  .zm-hero{padding:var(--space-16) 0 var(--space-20)}
  .zm-cta-band{padding:var(--space-16) 0}
  .zm-cta-band__inner{flex-direction:row;align-items:center;justify-content:space-between;gap:48px}

  .zm-field-row{grid-template-columns:1fr 1fr}
  .zm-service-grid,.zm-project-grid,.zm-testimonial-grid,.zm-problem,.zm-steps{grid-template-columns:repeat(2,1fr)}
  .zm-footer__grid{grid-template-columns:1fr 1fr}
}

/* Desktop and up: inline header nav, full 3-column grids, side-by-side hero.
   The nav only switches from the hamburger menu to inline links here — at
   phone AND tablet widths there isn't reliably enough room for 5 links plus
   phone number and CTA button on one line. */
@media (min-width:960px){
  .zm-header__inner{height:84px;display:grid;grid-template-columns:auto 1fr auto;gap:16px}
  .zm-logo{justify-self:start}
  .zm-logo img{height:42px}
  .zm-nav-toggle{display:none}
  .zm-nav{display:flex;position:static;flex-direction:row;justify-self:center;gap:28px;padding:0;margin-left:0;
    background:none;overflow:visible;flex-wrap:wrap}
  .zm-nav a{padding:0 0 3px;border-bottom:2px solid transparent}
  .zm-nav a.is-active{border-bottom-color:var(--brand)}
  .zm-nav__cta-mobile{display:none}
  .zm-header__actions{display:flex;justify-self:end}
  .zm-mobile-bar{display:none}
  body{padding-bottom:0}

  .zm-section{padding:var(--section-y) 0}
  .zm-hero{padding:var(--space-20) 0 var(--space-24)}
  .zm-hero__inner{grid-template-columns:1.05fr 1fr;gap:56px}
  .zm-cta-band{padding:var(--space-20) 0}

  .zm-service-grid,.zm-project-grid,.zm-testimonial-grid,.zm-problem,.zm-steps{grid-template-columns:repeat(3,1fr);gap:24px}
  .zm-footer__grid{grid-template-columns:1.4fr 1fr 1fr;gap:40px}
  .zm-footer{padding-top:64px}
}