/*
Theme Name: Hallertauer Computerladen
Theme URI: https://www.hallertauer-computerladen.de/
Author: Hallertauer Computerladen
Description: Regionales WordPress-Theme für Computer-, Handy- und Telefonservice in der Hallertau.
Version: 1.4.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: hallertauer-computerladen
*/

:root{
  --hcl-green-950:#0d3a25;
  --hcl-green-900:#12472c;
  --hcl-green-800:#195a34;
  --hcl-green-700:#2f7e32;
  --hcl-green-600:#4d9b31;
  --hcl-green-100:#edf6e9;
  --hcl-cream:#f8f5ec;
  --hcl-ink:#111b16;
  --hcl-muted:#536158;
  --hcl-line:#e4e9e3;
  --hcl-white:#fff;
  --hcl-shadow:0 16px 40px rgba(13,58,37,.10);
  --hcl-radius:20px;
  --hcl-max:1768px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--hcl-ink);background:#fff;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.container{width:min(calc(100% - 56px),var(--hcl-max));margin-inline:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header: bewusst exakt breit wie im freigegebenen Entwurf */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-top:6px solid var(--hcl-green-900);border-bottom:1px solid #eef1ed;box-shadow:0 1px 0 rgba(13,58,37,.03)}
.header-row{height:132px;display:grid;grid-template-columns:430px minmax(0,1fr) 270px;align-items:center;column-gap:24px}
.site-branding{display:flex;align-items:center;justify-self:start;min-width:0}
.site-logo{display:block;width:378px;height:auto;max-height:125px;object-fit:contain;object-position:left center}
.site-nav{display:flex;align-items:center;justify-content:flex-start;gap:34px;padding-left:70px;font-weight:700;font-size:1.02rem;white-space:nowrap}
.site-nav a{position:relative;padding:48px 0 45px}
.site-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:34px;height:2px;background:var(--hcl-green-600);transition:right .2s ease}
.site-nav a:hover:after,.site-nav a:focus:after{right:0}
.header-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;font-weight:800;transition:.2s ease;cursor:pointer;border:1px solid transparent}
.header-cta{justify-self:end;min-width:264px;background:var(--hcl-green-700);color:#fff;padding:17px 24px;font-size:1.12rem;white-space:nowrap;box-shadow:0 8px 20px rgba(47,126,50,.16)}
.header-cta svg{width:25px;height:25px;flex:0 0 auto}
.header-cta:hover,.btn--primary:hover{background:var(--hcl-green-800);transform:translateY(-1px)}
.menu-toggle{display:none;margin-left:auto;width:46px;height:42px;border:1px solid var(--hcl-line);border-radius:10px;background:#fff;color:var(--hcl-green-900);font-size:1.35rem}

/* Hero: full bleed, kein 50/50-Split, exakt wie Ziel-Screenshot */
.hero{position:relative;overflow:hidden;min-height:475px;background:#f5f5ef}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,#fff 0%,rgba(255,255,255,1) 34%,rgba(255,255,255,.985) 41%,rgba(255,255,255,.90) 47%,rgba(255,255,255,.42) 56%,rgba(255,255,255,.07) 66%,rgba(255,255,255,0) 74%),url('assets/images/hero-reference.jpg');background-size:100% 100%,cover;background-position:center,center center;background-repeat:no-repeat}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38px;background:linear-gradient(to top,rgba(255,255,255,.26),transparent);pointer-events:none}
.hero__content{position:relative;z-index:2;width:100%;max-width:none;margin:0;min-height:475px;display:flex;align-items:flex-start;padding:58px 5.3vw 48px}
.hero__copy{width:min(790px,45vw);max-width:790px}
.hero h1{font-size:3.55rem;line-height:1.02;letter-spacing:-.045em;margin:0 0 24px;color:#0f1b16;font-weight:850;max-width:790px}
.hero h1 span{display:block;color:var(--hcl-green-800)}
.hero__lead{font-size:1.48rem;line-height:1.25;font-weight:850;margin:0 0 14px;color:#101b16}
.hero__text{font-size:1.22rem;line-height:1.58;color:#314039;max-width:700px;margin:0 0 28px}
.hero__actions{display:flex;gap:22px;flex-wrap:wrap}
.btn{padding:15px 28px;min-height:58px;font-size:1.08rem}
.btn--primary{background:var(--hcl-green-700);color:#fff;box-shadow:0 12px 28px rgba(47,126,50,.20)}
.btn--secondary{background:#fff;border-color:#cbd4c9;color:var(--hcl-ink);box-shadow:0 6px 16px rgba(0,0,0,.04)}
.btn--secondary:hover{border-color:var(--hcl-green-700);color:var(--hcl-green-800)}

.trustbar{position:relative;z-index:3;margin:0;background:#fff;border-top:1px solid var(--hcl-line);border-bottom:1px solid var(--hcl-line)}
.trustbar>.container{width:100%;max-width:none;margin:0}
.trustbar__inner{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;background:#fff}
.trustitem{display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:72px;padding:18px clamp(28px,4.8vw,98px);font-weight:800;font-size:1.05rem;border-right:1px solid var(--hcl-line);white-space:nowrap}
.trustitem:last-child{border-right:0}
.check{width:31px;height:31px;border-radius:50%;background:var(--hcl-green-600);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;flex:0 0 auto}

/* Content */
.eyebrow{font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--hcl-green-700);font-size:.76rem;margin:0 0 10px}
.services{padding:58px 0 44px;background:#fff}
.section-head{text-align:center;max-width:760px;margin:0 auto 30px}
.section-head h2,.regional__copy h2{font-size:clamp(2rem,3vw,3rem);line-height:1.05;letter-spacing:-.035em;margin:0 0 10px}
.section-head p{margin:0;color:var(--hcl-muted)}
.service-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.service-card{background:linear-gradient(180deg,#f4f8f1,#eef5eb);border:1px solid #e2eae0;border-radius:16px;min-height:260px;padding:24px 16px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;box-shadow:0 6px 20px rgba(13,58,37,.04);transition:.2s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(13,58,37,.10);border-color:#cfdfca}
.service-icon{width:54px;height:54px;color:var(--hcl-green-900);margin-bottom:13px}
.service-card h3{font-size:1.08rem;line-height:1.15;margin:0 0 9px}
.service-card p{color:#455248;font-size:.91rem;margin:0 0 16px;line-height:1.45}
.service-arrow{margin-top:auto;width:30px;height:30px;border-radius:50%;background:var(--hcl-green-600);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900}
.regional{padding:0 0 48px;background:#fff}
.regional__box{display:grid;grid-template-columns:1fr 1.03fr;min-height:390px;border-radius:var(--hcl-radius);overflow:hidden;border:1px solid var(--hcl-line);box-shadow:var(--hcl-shadow)}
.regional__photo{background-image:linear-gradient(0deg,rgba(13,58,37,.12),rgba(13,58,37,.02)),url('assets/images/hallertau.jpg');background-size:cover;background-position:center}
.regional__copy{padding:55px 52px;background:#fff;display:flex;flex-direction:column;justify-content:center}
.regional__copy>p{color:#4c5a50;margin:0 0 24px;font-size:1.02rem}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.value{display:grid;grid-template-columns:40px 1fr;gap:11px;align-items:start}
.value svg{width:34px;height:34px;color:var(--hcl-green-700)}
.value strong{display:block;margin-bottom:3px}.value span{font-size:.86rem;color:#5b675f}

.footer{background:linear-gradient(135deg,var(--hcl-green-950),var(--hcl-green-800));color:#fff;position:relative;overflow:hidden}
.footer:after{content:"";position:absolute;right:-70px;bottom:-100px;width:290px;height:290px;border-radius:50%;border:45px solid rgba(255,255,255,.025)}
.footer-main{position:relative;z-index:2;padding:52px 0 38px;display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:35px;align-items:center}
.footer-quote{font-size:1.4rem;line-height:1.3;font-weight:800;max-width:460px}.footer-quote small{display:block;font-size:.82rem;font-weight:500;margin-top:10px;opacity:.8}
.contact-chip{display:grid;grid-template-columns:52px 1fr;gap:13px;align-items:center}
.contact-chip__icon{width:52px;height:52px;border-radius:50%;background:rgba(117,189,66,.35);display:flex;align-items:center;justify-content:center;font-size:1.35rem}
.contact-chip strong{font-size:.85rem;display:block}.contact-chip span,.contact-chip a{font-size:.86rem;opacity:.9;word-break:break-word}
.footer-bottom{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.13);padding:18px 0 22px;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:.78rem;color:rgba(255,255,255,.78)}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.page-main{min-height:50vh;padding:70px 0}.entry-title{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.04em}.entry-content{max-width:800px}.entry-content a{color:var(--hcl-green-700);text-decoration:underline}
.notice{padding:14px 16px;border-radius:10px;margin:0 0 20px}.notice--success{background:#e9f6e5;color:#204d23}.notice--error{background:#fdeaea;color:#7e2424}

@media (max-width:1600px){
  .header-row{grid-template-columns:360px minmax(0,1fr) 235px}
  .site-logo{width:340px}
  .site-nav{gap:24px;padding-left:28px;font-size:.94rem}
  .header-cta{min-width:220px;font-size:1rem;padding:15px 18px}
  .hero h1{font-size:3.2rem}
  .hero__lead{font-size:1.32rem}.hero__text{font-size:1.08rem}
}
@media (max-width:1260px){
  .container{width:min(calc(100% - 40px),var(--hcl-max))}
  .header-row{height:108px;grid-template-columns:300px 1fr auto;gap:18px}
  .site-logo{width:285px;max-height:92px}
  .site-nav{gap:17px;padding-left:12px;font-size:.87rem}
  .header-cta{min-width:0;padding:13px 16px;font-size:.92rem}
  .hero__copy{width:min(650px,51vw)}
  .hero h1{font-size:2.85rem}
  .service-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:980px){
  .header-row{height:84px;display:flex;gap:16px}
  .site-logo{width:255px;max-height:72px}
  .menu-toggle{display:block}
  .site-nav{position:absolute;left:20px;right:20px;top:84px;margin:0;background:#fff;border:1px solid var(--hcl-line);border-radius:14px;box-shadow:var(--hcl-shadow);padding:10px;display:none;flex-direction:column;align-items:stretch;gap:0;padding-left:10px;white-space:normal}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:12px 14px;border-bottom:1px solid var(--hcl-line)}
  .site-nav a:last-child{border-bottom:0}.site-nav a:after{display:none}
  .header-cta{display:none}
  .hero{min-height:610px}
  .hero:before{background-image:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.99) 48%,rgba(255,255,255,.70) 67%,rgba(255,255,255,.12) 100%),url('assets/images/hero-reference.jpg');background-size:100% 100%,auto 100%;background-position:center,65% center}
  .hero__content{min-height:610px;align-items:flex-start;padding:54px 30px 125px}
  .hero__copy{width:100%;max-width:620px}
  .hero h1{font-size:3rem}
  .trustbar{margin-top:-1px}.trustbar__inner{grid-template-columns:repeat(2,1fr)}
  .trustitem{justify-content:center;padding:16px 20px}.trustitem:nth-child(2){border-right:0}.trustitem:nth-child(-n+2){border-bottom:1px solid var(--hcl-line)}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .regional__box{grid-template-columns:1fr}.regional__photo{min-height:330px}.regional__copy{padding:38px 28px}
  .footer-main{grid-template-columns:1fr 1fr}.footer-quote{grid-column:1/-1}.footer-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .container{width:min(calc(100% - 28px),var(--hcl-max))}
  .site-header{border-top-width:4px}
  .header-row{height:76px}.site-logo{width:220px;max-height:64px}.site-nav{top:76px;left:14px;right:14px}
  .hero{min-height:650px}
  .hero__content{min-height:650px;padding:42px 22px 170px}
  .hero h1{font-size:2.58rem}.hero__lead{font-size:1.14rem}.hero__text{font-size:1rem;line-height:1.5}
  .hero__actions{display:grid;grid-template-columns:1fr;gap:12px}.btn{width:100%;min-height:52px;font-size:1rem}
  .trustbar__inner{grid-template-columns:1fr}.trustitem{justify-content:flex-start;border-right:0!important;border-bottom:1px solid var(--hcl-line)!important;white-space:normal}.trustitem:last-child{border-bottom:0!important}
  .services{padding-top:42px}.service-grid{grid-template-columns:1fr}.service-card{min-height:0;display:grid;grid-template-columns:56px 1fr 32px;text-align:left;column-gap:12px;align-items:center;padding:18px}.service-icon{margin:0}.service-card h3{margin:0 0 4px}.service-card p{margin:0}.service-arrow{margin:0}
  .values{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr}.footer-quote{grid-column:auto}.footer-bottom{font-size:.74rem}
}


/* ============================================================
   V1.3.0 – Freigegebenen Desktop-Entwurf unverändert übernehmen
   ============================================================ */
body.home{overflow-x:hidden}
.approved-fold{display:block;position:relative;width:100%;margin:0;padding:0;background:#fff;line-height:0}
.approved-fold__image{display:block;width:100%;height:auto;max-width:none;margin:0;padding:0;user-select:none;-webkit-user-drag:none}
.approved-fold .hotspot{position:absolute;display:block;z-index:5;background:transparent;border:0;line-height:1;outline-offset:3px}
.approved-fold .hotspot:focus-visible{outline:3px solid rgba(77,155,49,.78);border-radius:8px}

/* Hotspots: Prozentwerte direkt aus dem freigegebenen 2054 × 766-Entwurf. */
.hotspot--logo{left:6.6%;top:6.9%;width:19.5%;height:17.6%}
.hotspot--phone{left:29.0%;top:0;width:10.0%;height:6.9%}
.hotspot--email{left:39.2%;top:0;width:19.0%;height:6.9%}
.hotspot--nav-start{left:31.0%;top:8.6%;width:6.7%;height:14.8%}
.hotspot--nav-services{left:37.7%;top:8.6%;width:6.8%;height:14.8%}
.hotspot--nav-computer{left:44.4%;top:8.6%;width:5.2%;height:14.8%}
.hotspot--nav-handy{left:49.9%;top:8.6%;width:4.0%;height:14.8%}
.hotspot--nav-telefon{left:54.6%;top:8.6%;width:4.0%;height:14.8%}
.hotspot--nav-repair{left:59.2%;top:8.6%;width:5.5%;height:14.8%}
.hotspot--nav-about{left:65.6%;top:8.6%;width:5.5%;height:14.8%}
.hotspot--nav-contact{left:71.7%;top:8.6%;width:5.1%;height:14.8%}
.hotspot--appointment{left:80.4%;top:10.3%;width:14.5%;height:10.5%}
.hotspot--help{left:4.5%;top:72.0%;width:15.6%;height:10.8%}
.hotspot--services-button{left:20.3%;top:72.0%;width:12.8%;height:10.8%}

/* Auf der Startseite übernimmt Desktop ausschließlich die freigegebene Referenz. */
.home .site-header--front-live{display:none}
.live-home-fold{display:none}

/* Interne Seiten bleiben als echte, responsive WordPress-Seiten nutzbar. */
.site-header--internal .topbar{display:block}
.topbar{background:var(--hcl-green-900);color:#fff}
.topbar__row{min-height:52px;display:grid;grid-template-columns:1.15fr .7fr 1.25fr 1.25fr;align-items:center;gap:22px;font-size:.92rem}
.topbar__row a,.topbar__row span{color:#fff;white-space:nowrap}
.topbar__hours{text-align:right}
.site-header--internal{border-top:0}

@media (max-width:1023px){
  .approved-fold{display:none}
  .home .site-header--front-live{display:block}
  .live-home-fold{display:block}
  .topbar__row{grid-template-columns:1fr auto;min-height:38px;font-size:.78rem;gap:10px}
  .topbar__row a:nth-of-type(2),.topbar__hours{display:none}
  .site-header{position:relative;border-top:0}
  .header-row{height:86px;grid-template-columns:1fr auto;gap:12px}
  .site-logo{width:260px;max-height:74px}
  .header-cta{display:none}
  .menu-toggle{display:flex;align-items:center;justify-content:center}
  .site-nav{display:none;position:absolute;top:124px;left:16px;right:16px;z-index:90;background:#fff;border:1px solid var(--hcl-line);border-radius:14px;box-shadow:var(--hcl-shadow);padding:12px;flex-direction:column;align-items:stretch;gap:0;font-size:1rem}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:12px 14px;border-radius:8px}
  .site-nav a:after{display:none}
  .site-nav a:hover{background:var(--hcl-green-100)}
  .hero:before{background-image:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 52%,rgba(255,255,255,.18) 100%),url('assets/images/hero-reference.jpg');background-size:100% 100%,auto 100%;background-position:center,67% center}
}

@media (max-width:600px){
  .topbar__tag{font-size:.72rem}
  .topbar__row a:first-of-type{font-size:.72rem}
  .site-logo{width:215px}
}

/* ============================================================
   V1.4.0 – kompletter freigegebener Desktop-Entwurf 1:1
   Markenleiste bewusst entfernt.
   ============================================================ */
.approved-page{
  display:block;
  position:relative;
  width:100%;
  max-width:2054px;
  margin:0 auto;
  padding:0;
  background:#fff;
  line-height:0;
}
.approved-page__image{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
  padding:0;
  user-select:none;
  -webkit-user-drag:none;
}
.approved-page .page-hotspot{
  position:absolute;
  z-index:8;
  display:block;
  background:transparent;
  border:0;
  line-height:1;
  outline-offset:3px;
}
.approved-page .page-hotspot:focus-visible{
  outline:3px solid rgba(77,155,49,.84);
  border-radius:8px;
}
.desktop-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.desktop-anchor--services{top:41.86%}
.desktop-anchor--about{top:62.08%}
.desktop-anchor--contact{top:82.02%}

/* Kopfbereich / Navigation – Koordinaten aus dem 2054 × 766 freigegebenen Entwurf. */
.page-hotspot--logo{left:6.60%;top:2.888%;width:19.50%;height:7.367%}
.page-hotspot--phone{left:29.00%;top:0;width:10.00%;height:2.888%}
.page-hotspot--email{left:39.20%;top:0;width:19.00%;height:2.888%}
.page-hotspot--nav-start{left:31.00%;top:3.600%;width:6.70%;height:6.195%}
.page-hotspot--nav-services{left:37.70%;top:3.600%;width:6.80%;height:6.195%}
.page-hotspot--nav-computer{left:44.40%;top:3.600%;width:5.20%;height:6.195%}
.page-hotspot--nav-handy{left:49.90%;top:3.600%;width:4.00%;height:6.195%}
.page-hotspot--nav-telefon{left:54.60%;top:3.600%;width:4.00%;height:6.195%}
.page-hotspot--nav-repair{left:59.20%;top:3.600%;width:5.50%;height:6.195%}
.page-hotspot--nav-about{left:65.60%;top:3.600%;width:5.50%;height:6.195%}
.page-hotspot--nav-contact{left:71.70%;top:3.600%;width:5.10%;height:6.195%}
.page-hotspot--appointment{left:80.40%;top:4.311%;width:14.50%;height:4.395%}
.page-hotspot--help{left:4.50%;top:30.138%;width:15.60%;height:4.521%}
.page-hotspot--services-button{left:20.30%;top:30.138%;width:12.80%;height:4.521%}

/* Leistungskarten. */
.page-hotspot--service-1{left:2.75%;top:43.15%;width:13.05%;height:17.55%}
.page-hotspot--service-2{left:16.00%;top:43.15%;width:13.05%;height:17.55%}
.page-hotspot--service-3{left:29.35%;top:43.15%;width:13.15%;height:17.55%}
.page-hotspot--service-4{left:42.75%;top:43.15%;width:13.55%;height:17.55%}
.page-hotspot--service-5{left:56.75%;top:43.15%;width:13.35%;height:17.55%}
.page-hotspot--service-6{left:70.35%;top:43.15%;width:13.45%;height:17.55%}
.page-hotspot--service-7{left:84.05%;top:43.15%;width:13.20%;height:17.55%}
.page-hotspot--about-block{left:49.55%;top:62.20%;width:47.50%;height:19.55%}

/* Kontakt / Rechtliches im freigegebenen Footer. */
.page-hotspot--footer-phone{left:65.00%;top:86.00%;width:11.50%;height:7.20%}
.page-hotspot--footer-email{left:77.10%;top:86.00%;width:17.00%;height:7.20%}
.page-hotspot--impressum{left:59.20%;top:96.10%;width:5.30%;height:2.20%}
.page-hotspot--datenschutz{left:64.80%;top:96.10%;width:6.10%;height:2.20%}
.page-hotspot--agb{left:71.10%;top:96.10%;width:3.20%;height:2.20%}

/* Desktop: keine zweite Interpretation unter der Referenz. */
.mobile-home-page{display:none}
.home .footer{display:none}

@media (max-width:1023px){
  .approved-page{display:none}
  .mobile-home-page{display:block}
  .home .footer{display:block}
  .mobile-home-page .hero:before{background-image:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 48%,rgba(255,255,255,.52) 72%,rgba(255,255,255,.08) 100%),url('assets/images/hero.jpg');background-size:100% 100%,auto 100%;background-position:center,65% center;background-repeat:no-repeat}

  /* Mobile bleibt funktional, orientiert sich aber weiter am freigegebenen Look. */
  .mobile-home-page .services{padding:22px 0 28px}
  .mobile-home-page .regional{padding:0;background:#fff}
  .mobile-home-page .regional__box{border-radius:0;border-left:0;border-right:0;box-shadow:none}
  .mobile-home-page .regional__photo{position:relative}
  .regional__photo-copy{position:absolute;right:22px;top:24px;color:#fff;text-align:right;font-weight:850;font-size:1.35rem;line-height:1.1;text-shadow:0 2px 14px rgba(0,0,0,.38)}
}