/*
Theme Name: Willebrand Metalltechnik (GeneratePress Child)
Theme URI: https://willebrand-metalltechnik.de
Template: generatepress
Author: Sascha / Claude
Description: GeneratePress Child-Theme für Willebrand Metalltechnik. Dunkles CNC-Design, vollständig über den Block-Editor editierbar.
Version: 1.0
Text Domain: generatepress-willebrand
*/

/* ==========================================================================
   Design-Tokens (Farben/Typografie aus dem Original-Theme)
   ========================================================================== */
:root{
  --wb-bg:#050505;
  --wb-bg2:#0c0c0f;
  --wb-panel:#111116;
  --wb-panel2:#17171c;
  --wb-text:#ffffff;
  --wb-muted:#c8c8cc;
  --wb-line:#2a2a31;
  --wb-magenta:#c00055;
  --wb-magenta2:#e0006d;
  --wb-silver:#d7d7dc;
}

/* ==========================================================================
   Grundlayout: dunkler Hintergrund, weiße Schrift, volle Breite
   ========================================================================== */
body{
  background:var(--wb-bg);
  color:var(--wb-text);
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.6;
}
.wb-page a{color:inherit;text-decoration:none}
.wb-page h1,.wb-page h2,.wb-page h3{color:var(--wb-text)}

/* GeneratePress-Container auf volle Breite / ohne Innenabstand für die Sektionen */
.wb-page #page.grid-container{max-width:100%;padding:0}
.wb-page .site-content{padding:0}
.wb-page .content-area,
.wb-page .site-main,
.wb-page .entry-content{margin:0;padding:0;max-width:none}
.wb-page .entry-content > *{margin-top:0;margin-bottom:0}
/* "Separate Containers"-Kachel von GeneratePress neutralisieren */
.wb-page article.page,
.wb-page .inside-article{padding:0;border:0;background:transparent;box-shadow:none}

/* Group-Wrapper (.wp-block-group__inner-container) layout-transparent machen,
   damit unsere Grids/Flex direkt auf die echten Kind-Elemente wirken. */
.wb-main .wp-block-group__inner-container{display:contents}

/* Innerer Container für zentrierten Inhalt */
.wb-container{width:min(1180px,92%);margin-inline:auto}

/* ==========================================================================
   Kicker / Überschriften
   ========================================================================== */
.wb-kicker{
  color:var(--wb-magenta2);font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;margin-bottom:18px;font-size:15px;
}
.wb-page h1{
  font-size:clamp(42px,6vw,78px);line-height:1.04;margin:0 0 20px;
  text-transform:uppercase;letter-spacing:-1px;
}
.wb-accent{color:var(--wb-magenta2)}
.wb-lead{font-size:20px;color:#e6e6e9;max-width:620px;margin-bottom:28px}

/* ==========================================================================
   Buttons
   ========================================================================== */
.wb-btns{display:flex;gap:18px;flex-wrap:wrap}
/* Core-Buttons (wp:buttons) im Willebrand-Stil */
.wb-btns .wp-block-button__link,
.wb-btn{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid rgba(255,255,255,.3);border-radius:0;
  padding:15px 24px;text-transform:uppercase;font-weight:800;font-size:14px;
  color:#fff;background:transparent;transition:transform .15s ease;
}
.wb-btns .primary .wp-block-button__link,
.wb-btn.primary{background:linear-gradient(135deg,var(--wb-magenta),#9d0045);border-color:transparent}
.wb-btns .wp-block-button__link:hover,
.wb-btn:hover{transform:translateY(-1px);color:#fff}

/* ==========================================================================
   Header (eigenes Markup) – Logo, Menü, Telefon-CTA (1:1 wie Original)
   ========================================================================== */
.wb-header{
  position:sticky;top:0;z-index:100;
  background:rgba(0,0,0,.92);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}
.wb-nav{display:flex;align-items:center;justify-content:flex-start;min-height:200px;gap:40px;width:min(1360px,92%)}
.wb-logo{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:20px}
.wb-call{margin-left:auto}
.wb-logo img{height:180px;width:auto;max-width:none;display:block}
.wb-menu-list{
  display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0;
  font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.4px;
}
.wb-menu-list a{color:#fff;opacity:.9}
.wb-menu-list a:hover,
.wb-menu-list .current-menu-item > a{color:var(--wb-magenta2);opacity:1}
.wb-call{
  background:linear-gradient(135deg,var(--wb-magenta),#8f003c);
  padding:14px 22px;border-radius:3px;font-weight:800;color:#fff;white-space:nowrap;
}
.wb-call small{display:block;font-weight:400;color:#fff}

/* Telefon-Button in der Navigation (Menüpunkt mit CSS-Klasse "wb-call") */
.main-navigation .main-nav ul li.wb-call a{
  background:linear-gradient(135deg,var(--wb-magenta),#8f003c);
  color:#fff;border-radius:3px;font-weight:800;margin-left:10px;
}
.main-navigation .main-nav ul li.wb-call a:hover{color:#fff;filter:brightness(1.1)}

/* ==========================================================================
   Sektionen
   ========================================================================== */
.wb-section{padding:86px 0;background:linear-gradient(180deg,#0b0b0e,#050505)}
.wb-section-title{text-align:center;margin-bottom:44px}
.wb-section-title h2{font-size:clamp(30px,4vw,48px);margin:0}
.wb-section-title .wb-kicker{margin-bottom:8px}

/* Hero (Group mit Hintergrundbild + Overlay-Gradient) */
.wb-hero{
  position:relative;min-height:660px;display:flex;align-items:center;
  background-size:cover;background-position:center;overflow:hidden;
}
.wb-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.78) 38%,rgba(0,0,0,.25) 100%);
}
.wb-hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 70% 50%,rgba(224,0,109,.12),transparent 35%);
}
.wb-hero-content{position:relative;z-index:1;max-width:720px;padding:80px 0}

/* Features-Streifen */
.wb-features{
  background:#08080a;border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.wb-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px}
.wb-feature{padding:30px 24px;border-right:1px solid var(--wb-line);min-height:138px}
.wb-feature .wb-icon{font-size:38px;color:var(--wb-magenta2);margin:0 0 8px;line-height:1}
.wb-feature h3,.wb-card h3{margin:0 0 6px;text-transform:uppercase;font-size:17px}
.wb-feature p,.wb-card p{margin:0;color:var(--wb-muted);font-size:15px}

/* Karten-Grids */
.wb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wb-card{
  background:linear-gradient(180deg,var(--wb-panel2),var(--wb-panel));
  border:1px solid var(--wb-line);overflow:hidden;
}
.wb-card-img{height:190px;overflow:hidden}
.wb-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.wb-card-body{padding:24px}

/* Nachhaltigkeit (Group mit Hintergrundbild + Overlay-Gradient) */
.wb-sustain{position:relative;background-size:cover;background-position:center;overflow:hidden}
.wb-sustain::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 48%,rgba(0,0,0,.2) 100%);
}
.wb-sustain-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.8fr 1fr;gap:50px;align-items:center}
.wb-sustain-box h2{font-size:clamp(34px,4vw,56px);line-height:1.1;margin:0 0 22px}
.wb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.wb-stat{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);padding:22px}
.wb-stat strong{display:block;color:var(--wb-magenta2);font-size:28px;white-space:nowrap}

/* Maschinenpark / Branchen */
.wb-machine-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wb-industry-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.wb-industry-grid h3{font-size:15px;overflow-wrap:anywhere;hyphens:auto}

/* Kontakt */
.wb-contact{background:#08080a}
.wb-contact-grid{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:34px;align-items:start}
.wb-form input:not([type=submit]),.wb-form textarea{
  width:100%;margin-bottom:14px;padding:15px;background:#0d0d11;
  border:1px solid #33333b;color:#fff;font:inherit;border-radius:0;
}
.wb-form input::placeholder,.wb-form textarea::placeholder{color:#8a8a92}
.wb-form textarea{min-height:130px}
/* Contact Form 7: Struktur zurücksetzen + Submit als Willebrand-Button */
.wb-form .wpcf7-form p{margin:0}
.wb-form input[type=submit],.wb-form button{width:100%;cursor:pointer;border-radius:0}
.wb-form .wpcf7-spinner{margin:8px auto 0;display:block}
.wb-form .wpcf7-response-output{
  margin:16px 0 0!important;padding:12px 15px;border:1px solid #33333b;color:#e6e6e9;font-size:14px;
}
.wb-form .wpcf7-not-valid-tip{color:#ff7a9c;font-size:13px;margin:-8px 0 12px}
.wb-form .wpcf7-not-valid{border-color:#c00055!important}
.wb-contact-info p{margin:0 0 18px;color:var(--wb-muted)}

/* Rechtstexte (Impressum/Datenschutz) */
.wb-legal{padding:86px 0}
.wb-legal .wb-container p{color:var(--wb-muted);margin:0 0 18px}
.wb-legal .wb-container strong{color:#fff}

/* Footer (eigenes Markup) */
.wb-footer{padding:30px 0;border-top:1px solid var(--wb-line);background:#020202;color:#aaa}
.wb-footer .wb-container{display:flex;justify-content:space-between;gap:20px;align-items:center}
.wb-footer a:hover{color:var(--wb-magenta2)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:900px){
  .wb-feature-grid,.wb-cards,.wb-machine-grid,.wb-industry-grid,
  .wb-contact-grid,.wb-sustain-grid{grid-template-columns:1fr}
  .wb-hero{min-height:590px}.wb-hero-content{padding:55px 0}
  .wb-stats{grid-template-columns:1fr}
  .wb-menu-list,.wb-call{display:none}
  .wb-nav{min-height:130px}
  .wb-logo img{height:112px}
  .wb-footer .wb-container{display:block}
}