/*
Theme Name: Grassmann Mueller
Theme URI: https://www.grassmann-mueller.de/
Author: Dein Mediamant
Author URI: https://dein-mediamant.de/
Description: One-Pager-Theme fuer die Schreinerei Grassmann + Mueller GmbH in Nideggen. Schriften lokal, Kontaktformular mit Spamschutz, Karte erst nach Klick.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: grassmann-mueller
*/

/* ---------- Schriften (lokal, keine Verbindung zu Google) ---------- */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('assets/fonts/fraunces-latin-opsz.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('assets/fonts/inter-latin-wght.woff2') format('woff2');
}
  :root{
    --black:#1b1b19;
    --charcoal:#2c2c29;
    --gray:#6f6d67;
    --pale:#d8d6d0;
    --offwhite:#f4f3ef;
    --white:#ffffff;
    --line: rgba(27,27,25,0.12);
    color-scheme: light;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--offwhite);
    color:var(--black);
    font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  h1,h2,h3{
    font-family:'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight:600;
    margin:0;
    letter-spacing:-0.01em;
  }
  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 32px;
  }
  @media (max-width:640px){ .wrap{padding:0 20px;} }

  /* ---------- Header ---------- */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:rgba(244,243,239,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px;
    max-width:1120px; margin:0 auto;
  }
  .brand{
    font-family:'Fraunces', Georgia, 'Times New Roman', serif;
    font-size:1.15rem;
    font-weight:600;
    text-decoration:none;
    display:flex; flex-direction:column; line-height:1.1;
  }
  .brand span{font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size:0.62rem; font-weight:500; color:var(--gray); letter-spacing:0.08em; margin-top:3px;}
  nav.links{display:flex; gap:32px;}
  nav.links a{
    text-decoration:none; font-size:0.94rem; color:var(--charcoal);
    padding-bottom:2px; border-bottom:1px solid transparent;
    transition:border-color .2s ease;
  }
  nav.links a:hover{border-color:var(--black);}
  .nav-phone{
    display:flex; align-items:center; gap:10px;
    font-size:0.94rem; text-decoration:none; font-weight:500;
    border:1px solid var(--black); padding:9px 18px; border-radius:2px;
    white-space:nowrap;
  }
  .nav-phone:hover{background:var(--black); color:var(--white);}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background:
      repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 34px),
      linear-gradient(150deg, #201f1c 0%, #141412 60%, #0f0f0e 100%);
    color:var(--offwhite);
    overflow:hidden;
  }
  .hero-inner{
    max-width:1120px; margin:0 auto;
    padding:120px 32px 96px;
    display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:center;
  }
  @media (max-width:860px){ .hero-inner{grid-template-columns:1fr; padding:80px 20px 64px;} }

  .eyebrow-plain{ color:var(--pale); font-size:0.95rem; margin-bottom:18px; }
  .hero h1{
    font-size:clamp(2.3rem, 5vw, 3.6rem);
    line-height:1.08;
    color:var(--white);
  }
  .hero p.lead{
    margin-top:22px; max-width:46ch; color:#c9c7c0; font-size:1.08rem;
  }
  .rating-badge{
    display:inline-flex; align-items:center; gap:10px;
    margin-top:26px; color:#e7e5df; font-size:0.92rem;
  }
  .rating-badge .stars{ display:flex; gap:2px; }
  .rating-badge .stars svg{ width:15px; height:15px; fill:#e7e5df; }
  .rating-badge strong{ color:var(--white); font-weight:600; }
  .rating-badge a{ color:#bcbab3; text-decoration:underline; text-underline-offset:2px; }

  .cta-row{margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--white); color:var(--black);
    padding:14px 26px; border-radius:2px; text-decoration:none;
    font-weight:500; font-size:0.98rem;
    border:1px solid var(--white);
    transition:background .2s ease, color .2s ease;
  }
  .btn:hover{background:transparent; color:var(--white);}
  .btn.ghost{
    background:transparent; color:var(--offwhite); border:1px solid rgba(255,255,255,0.4);
  }
  .btn.ghost:hover{border-color:var(--white); background:rgba(255,255,255,0.08);}

  /* ---------- Partner-Logos ---------- */
  .partner-item img.partner-logo{
    height:30px; width:auto; max-width:150px;
    filter:grayscale(1) brightness(1.8) contrast(0.9);
    opacity:0.85;
    transition:filter .25s ease, opacity .25s ease;
    margin-bottom:4px;
  }
  .partner-item:hover img.partner-logo{ filter:none; opacity:1; }


  /* ---------- Section basics ---------- */
  .section{padding:96px 0;}
  @media (max-width:640px){ .section{padding:64px 0;} }
  .kicker{
    color:var(--gray); font-size:0.95rem; margin-bottom:14px;
  }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head h2{ font-size:clamp(1.8rem,3.4vw,2.5rem); }

  /* ---------- About ---------- */
  .about{ background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .about .grid{
    display:grid; grid-template-columns: 0.85fr 1.15fr; gap:64px; align-items:center;
  }
  @media (max-width:860px){ .about .grid{grid-template-columns:1fr; gap:36px;} }
  .about-panel{
    aspect-ratio:1/1;
    background:
      repeating-linear-gradient(135deg, var(--pale) 0 2px, var(--offwhite) 2px 28px);
    border:1px solid var(--line);
  }
  .about-text p{ color:var(--charcoal); margin:0 0 18px; }
  .about-text p:last-of-type{margin-bottom:0;}
  .founded{
    display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:24px 32px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line);
  }
  .founded div strong{ font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-size:1.7rem; display:block; }
  .founded div span{ color:var(--gray); font-size:0.88rem; }

  /* ---------- Leistungen ---------- */
  .services-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  @media (max-width:860px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .services-grid{grid-template-columns:1fr;} }
  .service-card{
    background:var(--offwhite);
    padding:36px 30px;
  }
  .service-card .icon{
    width:34px; height:34px; margin-bottom:22px;
  }
  .service-card h3{ font-size:1.15rem; margin-bottom:12px; }
  .service-card ul{
    margin:0; padding-left:18px; color:var(--charcoal); font-size:0.93rem;
  }
  .service-card li{ margin-bottom:4px; }

  /* ---------- Partner ---------- */
  .partners{ background:var(--charcoal); color:var(--offwhite); }
  .partners .section-head h2{ color:var(--white); }
  .partners .kicker{ color:var(--pale); }
  .partner-list{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.14);
  }
  @media (max-width:760px){ .partner-list{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .partner-list{grid-template-columns:1fr;} }
  .partner-item{
    background:var(--black);
    padding:30px 24px;
    display:flex; flex-direction:column; gap:6px;
    text-decoration:none; color:var(--offwhite);
    transition:background .2s ease;
  }
  .partner-item:hover{ background:#0e0e0d; }
  .partner-item strong{ font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-size:1.05rem; }
  .partner-item span{ font-size:0.82rem; color:var(--pale); }

  /* ---------- Kontakt ---------- */
  .contact{ background:var(--white); }
  .contact .grid{
    display:grid; grid-template-columns:1fr 1fr; gap:64px;
  }
  @media (max-width:860px){ .contact .grid{grid-template-columns:1fr; gap:48px;} }
  .info-row{
    display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);
  }
  .info-row:last-child{border-bottom:none;}
  .info-row .label{ width:120px; color:var(--gray); font-size:0.9rem; flex-shrink:0;}
  .info-row .value{ font-size:0.98rem; }
  .info-row .value a{ text-decoration:none; border-bottom:1px solid var(--line); }

  form.contact-form{ display:flex; flex-direction:column; gap:16px; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:480px){ .form-row{grid-template-columns:1fr;} }
  form.contact-form label{ font-size:0.85rem; color:var(--gray); display:block; margin-bottom:6px; }
  form.contact-form input, form.contact-form textarea{
    width:100%; border:1px solid var(--line); background:var(--offwhite);
    padding:12px 14px; font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size:0.95rem; border-radius:2px;
  }
  form.contact-form textarea{ min-height:120px; resize:vertical; }
  form.contact-form button{
    align-self:flex-start; margin-top:6px;
    background:var(--black); color:var(--white); border:none;
    padding:14px 30px; font-size:0.96rem; border-radius:2px; cursor:pointer;
  }
  form.contact-form button:hover{ background:var(--charcoal); }
  .form-note{ font-size:0.78rem; color:var(--gray); margin-top:2px; }

  /* ---------- Footer ---------- */
  .site-footer{
    background:var(--black); color:var(--pale);
    padding:56px 0 28px;
  }
  .footer-top{
    display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
    padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.14);
  }
  @media (max-width:760px){ .footer-top{grid-template-columns:1fr; gap:28px;} }
  .footer-brand{ font-family:'Fraunces', Georgia, 'Times New Roman', serif; color:var(--white); font-size:1.2rem; }
  .footer-brand p{ color:var(--gray); font-size:0.9rem; margin-top:12px; max-width:32ch;}
  .site-footer h4{ color:var(--white); font-size:0.85rem; font-weight:500; margin-bottom:16px; }
  .site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .site-footer a{ text-decoration:none; color:var(--pale); font-size:0.92rem; }
  .site-footer a:hover{ color:var(--white); }
  .footer-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding-top:26px; font-size:0.82rem; color:var(--gray);
  }
  .footer-bottom a{ font-size:inherit; color:var(--pale); text-decoration:underline; text-underline-offset:3px; }
  .footer-bottom a:hover{ color:var(--white); }

  .visually-hidden{position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important;}
  }

/* ---------- Theme-Ergänzungen ---------- */
.screen-reader-text{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;}
.skip{position:absolute; left:-9999px; top:0;}
.skip:focus{left:16px; top:16px; z-index:100; background:var(--white); color:var(--black); padding:10px 14px; border:1px solid var(--black);}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--black); outline-offset:3px;}
.hero a:focus-visible, .partners a:focus-visible, .site-footer a:focus-visible{outline-color:var(--white);}
body.admin-bar .site-header{top:32px;}
@media (max-width:782px){ body.admin-bar .site-header{top:46px;} }

/* Navigation */
.brand img{height:40px; width:auto; display:block;}
.nav-actions{display:flex; align-items:center; gap:10px;}
.nav-toggle{display:none; background:none; border:1px solid var(--black); padding:11px 10px; border-radius:2px; cursor:pointer; line-height:0;}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--black); margin:4px 0;}
@media (max-width:860px){
  .nav{flex-wrap:wrap; padding:14px 20px; gap:12px;}
  .nav-actions{order:2;}
  .nav-toggle{display:block;}
  nav.links{display:none; order:3; width:100%; flex-direction:column; gap:0; padding:4px 0 6px;}
  .site-header.nav-open nav.links{display:flex;}
  nav.links a{padding:13px 0; border-bottom:1px solid var(--line);}
  nav.links a:last-child{border-bottom:none;}
  .nav-phone{padding:9px 14px; font-size:0.9rem;}
}

/* Startseite */
.hero-panel{
  aspect-ratio:4/5; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,0.16); background:#1b1b19;
}
.hero-panel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-panel .tag{
  position:absolute; left:0; right:0; bottom:0; padding:56px 26px 26px;
  background:linear-gradient(0deg, rgba(15,15,14,0.92), rgba(15,15,14,0));
}
.hero-panel .tag span{
  display:block; font-size:0.78rem; color:var(--pale);
  border-top:1px solid rgba(255,255,255,0.25); padding-top:10px;
}
.about-panel img{width:100%; height:100%; object-fit:cover;}
.repair{background:var(--offwhite); border:1px solid var(--line); border-top:none; padding:28px 30px;}
.repair h3{font-size:1.05rem; margin-bottom:6px;}
.repair p{margin:0; color:var(--charcoal); font-size:0.94rem;}
.section-head.with-rating{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; max-width:none;}
.rating-badge.on-light{margin-top:0; color:var(--charcoal);}
.rating-badge.on-light .stars svg{fill:var(--black);}
.rating-badge.on-light strong{color:var(--black);}
.rating-badge.on-light .muted{color:var(--gray);}

/* Karte erst nach Klick */
.map-consent{
  margin-top:24px; aspect-ratio:16/11; min-height:240px; position:relative; overflow:hidden;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 36px),
    var(--offwhite);
  display:flex; align-items:center; justify-content:center; padding:20px; text-align:center;
}
.map-consent .inner{max-width:36ch; display:flex; flex-direction:column; align-items:center; gap:14px; font-size:0.84rem; color:var(--gray);}
.map-consent .inner p{margin:0;}
.map-consent button{
  background:var(--black); color:var(--white); border:none; border-radius:2px;
  padding:12px 24px; font-size:0.94rem; font-weight:500; cursor:pointer; font-family:inherit;
}
.map-consent button:hover{background:var(--charcoal);}
.map-consent.is-loaded{padding:0; display:block;}
.map-consent iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}

/* Formular */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
form.contact-form label.check{display:flex; gap:10px; align-items:flex-start; font-size:0.84rem; line-height:1.5; margin-bottom:0;}
form.contact-form label.check input{width:auto; margin-top:3px; flex-shrink:0;}
form.contact-form label.check a{text-decoration:underline; text-underline-offset:2px;}
.form-msg{padding:14px 16px; border:1px solid var(--line); background:var(--offwhite); border-radius:2px; font-size:0.92rem; margin-bottom:6px;}
.form-msg.ok{border-color:var(--black);}
.form-msg.error{border-color:#8a2a1f; color:#6e2018;}

/* Unterseiten (Impressum, Datenschutz, 404) */
.legal-page{max-width:760px; margin:0 auto; padding:56px 24px 72px;}
.legal-page h1{font-size:clamp(2rem,4.5vw,2.8rem); line-height:1.1; margin-bottom:36px; text-wrap:balance;}
.entry h2{font-size:1.25rem; line-height:1.3; margin:40px 0 12px; text-wrap:balance;}
.entry h2:first-child{margin-top:0;}
.entry p{margin:0 0 14px; color:var(--charcoal);}
.entry ul, .entry ol{margin:0 0 14px; padding-left:22px; color:var(--charcoal);}
.entry a{text-decoration:underline; text-underline-offset:2px;}
.legal-actions{margin-top:56px; padding-top:28px; border-top:1px solid var(--line);}
.btn.dark{background:var(--black); color:var(--white); border-color:var(--black);}
.btn.dark:hover{background:var(--charcoal); color:var(--white);}
.btn svg{width:16px; height:16px; flex-shrink:0;}

/* Referenzen */
.gallery-section{background:var(--offwhite);}
.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; align-items:start;}
.gallery figure{margin:0; position:relative; background:var(--white); border:1px solid var(--line);}
.gallery figure{grid-column:span 2;}
.gallery figure.wide{grid-column:span 3;}
.gallery a{display:block; line-height:0; cursor:zoom-in; overflow:hidden;}
.gallery img{width:100%; height:auto; display:block; transition:transform .4s ease;}
.gallery a:hover img{transform:scale(1.03);}
.gallery figcaption{padding:12px 14px; font-size:0.84rem; color:var(--gray); line-height:1.4;}
@media (max-width:860px){ .gallery{grid-template-columns:repeat(2,1fr);} .gallery figure,.gallery figure.wide{grid-column:span 1;} .gallery figure.wide,.gallery figure:nth-child(5){grid-column:span 2;} }
@media (max-width:520px){ .gallery{grid-template-columns:1fr;} .gallery figure,.gallery figure.wide,.gallery figure:nth-child(5){grid-column:auto;} }
.lightbox{border:none; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; margin:0;}
.lightbox::backdrop{background:rgba(15,15,14,0.92);}
.lightbox .lb-inner{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:56px 16px 24px;}
.lightbox img{max-width:100%; max-height:calc(100vh - 130px); object-fit:contain; display:block;}
.lightbox .lb-cap{color:var(--pale); font-size:0.9rem; margin:0;}
.lightbox .lb-close{position:absolute; top:12px; right:12px; background:var(--white); color:var(--black); border:none; border-radius:2px; padding:10px 16px; font-size:0.9rem; font-family:inherit; cursor:pointer;}