/*
Theme Name: anconIT Custom
Theme URI: https://www.anconit.at
Author: anconIT
Description: Individuelles Theme für anconIT – eigener Header/Footer, statische Homepage, WordPress für Impressum, Datenschutz und Blog.
Version: 1.3
Text Domain: anconit-custom
*/

/* ---------- Selbst gehostete Schriften (kein Google-Fonts-Server-Aufruf mehr) ---------- */
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500;
  font-display:swap; src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:600;
  font-display:swap; src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:700;
  font-display:swap; src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:400;
  font-display:swap; src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:500;
  font-display:swap; src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:600;
  font-display:swap; src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500;
  font-display:swap; src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:600;
  font-display:swap; src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

  :root{
    --bg:#f6f8f7;
    --surface:#ffffff;
    --surface-2:#eef2f0;
    --border:#dde3e0;
    --text:#16211c;
    --text-muted:#5b6b63;
    --amber:#419874;
    --amber-dim:rgba(65,152,116,0.12);
    --teal:#419874;
    --teal-dim:rgba(65,152,116,0.12);
    --radius:10px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .mono{font-family:'IBM Plex Mono', monospace;}
  a{color:inherit;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
  section{padding:96px 0;}
  @media (max-width:640px){ section{padding:64px 0;} }

  /* ---------- Nav ---------- */
  nav{
    position:sticky; top:0; z-index:50;
    background:rgba(246,248,247,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:18px; padding-bottom:18px;
  }
  .logo{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700; font-size:1.15rem;
    display:flex; align-items:center; gap:8px;
  }
  .logo-img{height:60px; width:auto; display:block;}
  .nav-links{display:flex; gap:32px; font-size:0.92rem;}
  .nav-links a{color:var(--text-muted); text-decoration:none; transition:color .15s;}
  .nav-links a:hover{color:var(--text);}
  .nav-cta{
    background:var(--amber); color:#ffffff; padding:9px 18px;
    border-radius:6px; font-weight:600; font-size:0.88rem; text-decoration:none;
    white-space:nowrap;
  }
  .nav-cta-mobile{display:none;}
  .nav-links a.nav-cta-mobile{color:#ffffff;}
  @media (max-width:760px){ .nav-links{display:none;} }
  @media (max-width:760px){ .nav-cta:not(.nav-cta-mobile){display:none;} }
  .nav-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:36px; height:36px; background:none; border:none; cursor:pointer; padding:0;
  }
  .nav-toggle span{display:block; width:100%; height:2px; background:var(--text); border-radius:2px; transition:transform .2s, opacity .2s;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  @media (max-width:760px){
    .nav-toggle{display:flex;}
    .nav-links{
      display:flex; flex-direction:column; gap:0;
      position:absolute; top:100%; left:0; right:0;
      background:var(--surface); border-bottom:1px solid var(--border);
      max-height:0; overflow:hidden; transition:max-height .25s ease;
    }
    .nav-links.open{max-height:400px;}
    .nav-links a{padding:16px 24px; border-top:1px solid var(--border); font-size:1rem;}
    .nav-links a.nav-cta-mobile{
      display:block; margin:12px 24px; padding:12px 18px; border-top:none;
      text-align:center; border-radius:6px; width:auto; color:#ffffff;
    }
  }

  /* ---------- Hero ---------- */
  .hero{padding-top:88px; padding-bottom:64px;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size:0.82rem;
    color:var(--teal); background:var(--teal-dim);
    border:1px solid rgba(65,152,116,0.35);
    padding:6px 14px; border-radius:999px; margin-bottom:28px;
  }
  .pulse{
    width:7px; height:7px; border-radius:50%; background:var(--teal);
    box-shadow:0 0 0 0 rgba(65,152,116,0.6);
    animation:pulse 2.2s infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(65,152,116,0.55);}
    70%{box-shadow:0 0 0 8px rgba(65,152,116,0);}
    100%{box-shadow:0 0 0 0 rgba(65,152,116,0);}
  }
  @media (prefers-reduced-motion: reduce){ .pulse{animation:none;} }

  h1{font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:1.08; max-width:820px;}
  h1 span{color:var(--amber);}
  .hero p.lead{
    margin-top:24px; font-size:1.15rem; color:var(--text-muted);
    max-width:600px;
  }
  .hero-ctas{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--amber); color:#ffffff; padding:13px 24px;
    border-radius:7px; font-weight:600; text-decoration:none; font-size:0.95rem;
    transition:transform .15s, box-shadow .15s;
  }
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(65,152,116,0.25);}
  .btn-secondary{
    border:1px solid var(--border); color:var(--text); padding:13px 24px;
    border-radius:7px; font-weight:500; text-decoration:none; font-size:0.95rem;
    transition:border-color .15s, background .15s;
  }
  .btn-secondary:hover{border-color:var(--amber); background:var(--surface-2);}
  .trust-line{
    margin-top:20px; font-size:0.82rem; color:var(--text-muted);
    font-family:'IBM Plex Mono', monospace;
  }

  /* ---------- Status strip (signature element) ---------- */
  .status-strip{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--border); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden; margin-top:64px;
  }
  @media (max-width:760px){ .status-strip{grid-template-columns:1fr;} }
  .status-card{background:var(--surface); padding:24px 26px;}
  .status-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
  .status-name{font-weight:600; font-size:0.95rem;}
  .status-badge{
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--teal);
    display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:0.04em;
  }
  .status-desc{color:var(--text-muted); font-size:0.87rem;}

  /* ---------- Section heads ---------- */
  .sec-eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--amber); margin-bottom:14px; display:block;
  }
  .sec-head{max-width:640px; margin-bottom:52px;}
  .sec-head h2{font-size:clamp(1.7rem, 3vw, 2.3rem);}
  .sec-head p{color:var(--text-muted); margin-top:14px; font-size:1.02rem;}

  /* ---------- Kompetenzen (badges) ---------- */
  .comp-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px;
  }
  .comp-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:22px 24px;
  }
  .comp-card .num{
    font-family:'IBM Plex Mono', monospace; color:var(--amber); font-size:0.78rem; display:block; margin-bottom:8px;
  }
  .comp-card h3{font-size:1rem; font-weight:600; margin-bottom:6px;}
  .comp-card p{color:var(--text-muted); font-size:0.88rem;}

  /* ---------- Über uns ---------- */
  .about-section{padding:72px 0; border-bottom:1px solid var(--border);}
  .about-wrap{max-width:680px;}
  .about-wrap p{color:var(--text-muted); font-size:1.02rem; margin-top:16px;}
  .about-lead{color:var(--text) !important; font-size:1.15rem !important; margin-top:14px !important;}
  .about-closer{
    font-family:'Space Grotesk', sans-serif; font-weight:600; color:var(--text) !important;
    font-size:1.15rem !important; margin-top:24px !important;
  }

  /* ---------- Herausforderung (vorher/nachher) ---------- */
  .flip-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;
  }
  .flip-card{
    border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  }
  .flip-before, .flip-after{
    padding:18px 22px; font-size:0.92rem; display:flex; flex-direction:column; gap:6px;
  }
  .flip-before{background:var(--surface); color:var(--text-muted);}
  .flip-after{background:var(--teal-dim); color:var(--text); border-top:1px solid var(--border);}
  .flip-tag{
    font-family:'IBM Plex Mono', monospace; font-size:0.68rem; text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .flip-before .flip-tag{color:#8a958f;}
  .flip-after .flip-tag{color:var(--teal);}

  /* ---------- Leistungen ---------- */
  .service-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  }
  .service-card{background:var(--surface); padding:30px 28px; transition:background .15s;}
  .service-card:hover{background:var(--amber-dim);}
  .service-icon{
    width:38px; height:38px; border-radius:8px; background:var(--amber-dim);
    margin-bottom:18px;
  }
  .service-card h3{font-size:1.05rem; margin-bottom:8px;}
  .service-card p{color:var(--text-muted); font-size:0.9rem;}

  /* ---------- Pakete ---------- */
  .pricing-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  }
  @media (max-width:900px){ .pricing-grid{grid-template-columns:1fr; max-width:440px; margin:0 auto;} }
  .price-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:32px 28px; display:flex; flex-direction:column;
    position:relative;
  }
  .price-card.featured{
    border-color:var(--amber); background:linear-gradient(180deg, var(--surface-2), var(--surface));
    box-shadow:0 0 0 1px var(--amber), 0 20px 40px -20px rgba(65,152,116,0.3);
  }
  .featured-tag{
    position:absolute; top:-13px; left:28px;
    background:var(--amber); color:#ffffff; font-size:0.7rem; font-weight:700;
    padding:4px 10px; border-radius:999px; letter-spacing:0.03em;
    font-family:'IBM Plex Mono', monospace; text-transform:uppercase;
  }
  .price-tier{
    font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px;
  }
  .price-card h3{font-size:1.3rem; margin-bottom:6px;}
  .price-value{
    font-family:'IBM Plex Mono', monospace; font-size:1.9rem; font-weight:600; color:var(--amber);
    margin:14px 0 4px;
  }
  .price-value small{font-size:0.95rem; color:var(--text-muted); font-weight:400;}
  .price-note{color:var(--text-muted); font-size:0.82rem; margin-bottom:22px;}
  .price-features{list-style:none; margin:0 0 26px; flex-grow:1;}
  .price-features li{
    display:flex; gap:10px; align-items:flex-start; font-size:0.89rem;
    color:var(--text); margin-bottom:12px;
  }
  .price-features li::before{
    content:"✓"; color:var(--teal); font-weight:700; flex-shrink:0;
  }
  .price-card .btn-secondary, .price-card .btn-primary{text-align:center;}
  .price-term{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--text-muted);
    margin-bottom:14px; text-transform:uppercase; letter-spacing:0.03em;
  }

  /* ---------- Anleitungen (Blog) ---------- */
  .blog-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;
  }
  .blog-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px 24px; display:flex; flex-direction:column; gap:12px;
    text-decoration:none; color:var(--text);
    transition:transform .15s, border-color .15s;
  }
  .blog-card:hover{transform:translateY(-3px); border-color:var(--amber);}
  .blog-tag{
    align-self:flex-start; font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
    text-transform:uppercase; letter-spacing:0.05em; color:var(--amber);
    background:var(--amber-dim); padding:4px 10px; border-radius:999px;
  }
  .blog-card h3{font-size:1.02rem; line-height:1.35;}
  .blog-card p{color:var(--text-muted); font-size:0.87rem; flex-grow:1;}
  .blog-meta{
    display:flex; align-items:center; justify-content:space-between;
    font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--text-muted);
    margin-top:4px;
  }
  .blog-meta .arrow{color:var(--amber);}
  .blog-footer-note{
    text-align:center; color:var(--text-muted); font-size:0.88rem; margin-top:36px;
  }
  .blog-footer-note a{color:var(--amber); text-decoration:none; font-weight:500;}
  .blog-footer-note a:hover{text-decoration:underline;}

  /* ---------- Kontakt ---------- */
  .contact-box{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:56px 48px; text-align:center;
  }
  @media (max-width:640px){ .contact-box{padding:40px 24px;} }
  .contact-box h2{font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:16px;}
  .contact-box p{color:var(--text-muted); max-width:480px; margin:0 auto 32px;}
  .contact-links{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

  footer{border-top:1px solid var(--border); padding:32px 0; color:var(--text-muted); font-size:0.82rem;}
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center;}
  .footer-links{display:flex; gap:20px;}
  .footer-links a{color:var(--text-muted); text-decoration:none;}
  .footer-links a:hover{color:var(--amber);}

  .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  a:focus-visible, button:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}

/* ---------- Kontaktformular (Contact Form 7) ---------- */
.contact-form-wrap{max-width:480px; margin:0 auto; text-align:left;}
.wpcf7-form{display:flex; flex-direction:column; gap:16px; margin-top:8px;}
.wpcf7-form p{margin:0;}
.wpcf7-form label{display:flex; flex-direction:column; gap:6px; font-size:0.85rem; font-weight:600; color:var(--text);}
.wpcf7-form-control{
  font-family:'IBM Plex Sans', sans-serif; font-size:0.95rem;
  padding:11px 14px; border:1px solid var(--border); border-radius:7px;
  background:var(--surface); color:var(--text); width:100%;
}
textarea.wpcf7-form-control{resize:vertical;}
.wpcf7-form-control:focus{
  outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-dim);
}
.wpcf7-submit{
  background:var(--amber); color:#ffffff; padding:13px 24px; border:none;
  border-radius:7px; font-weight:600; font-size:0.95rem; cursor:pointer;
  transition:transform .15s, box-shadow .15s; align-self:flex-start;
}
.wpcf7-submit:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(65,152,116,0.25);}
.wpcf7-not-valid-tip{color:#7a1f1f; font-size:0.8rem; margin-top:4px;}
.wpcf7-response-output{
  padding:12px 16px; border-radius:7px; font-size:0.9rem; margin-top:16px; border:1px solid var(--border);
}
.wpcf7-mail-sent-ok{background:var(--teal-dim); color:var(--text); border-color:rgba(65,152,116,0.35);}
.wpcf7-validation-errors, .wpcf7-mail-sent-ng, .wpcf7-spam-blocked{
  background:#fbeaea; color:#7a1f1f; border-color:#e3b3b3;
}
.contact-alt{margin-top:18px; font-size:0.85rem; color:var(--text-muted); text-align:center;}
.contact-alt a{color:var(--amber); text-decoration:underline;}

/* ---------- Normaler Seiten-/Beitragsinhalt (Impressum, Blog) ---------- */
.page-content{color:var(--text); font-size:1rem;}
.page-content p{margin-bottom:18px;}
.page-content h2{font-size:1.5rem; margin:36px 0 14px;}
.page-content h3{font-size:1.2rem; margin:28px 0 12px;}
.page-content ul, .page-content ol{margin:0 0 18px 22px;}
.page-content li{margin-bottom:8px;}
.page-content a{color:var(--amber); text-decoration:underline;}
.page-content img{max-width:100%; height:auto; border-radius:var(--radius); margin:20px 0;}