/*
Theme Name: Websites-4You
Theme URI: https://website-4you.ch
Author: Websites-4You
Description: Block-Theme (Full Site Editing) für Websites-4You – Webdesign für lokale Geschäfte. Sauberer 1:1-Neuaufbau aus dem Original-Design. Inhalte im Site-Editor bearbeitbar; Kontaktformular versendet per WordPress-Mail an die Admin-Adresse (Einstellungen → Allgemein).
Version: 2.3
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: websites-4you
*/

/* ============================================================
   BASIS
   ============================================================ */
body {
  font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  background: #FAF9F6;
  color: #1A2E4F;
  margin: 0;
}
a { color: #2D5BFF; text-decoration: none; }
a:hover { color: #1E46D9; }
.field::placeholder { color: #9AA0AB; }

/* WordPress-Layout-Resets: injizierte Block-Abstände neutralisieren,
   damit die Original-Abstände exakt greifen (keine Versätze). */
.wp-site-blocks > * { margin-block-start: 0 !important; }
.w4-cards3 > *, .w4-preis > * { margin-block-start: 0 !important; margin-top: 0 !important; }
/* Root-Fix: horizontale Flex-Reihen – kein oberer Block-Abstand auf den Kindern,
   sonst werden die 2./3. Elemente vertikal nach unten verschoben (Nav-Menü sass 12px zu tief). */
.w4-nav-inner > *, .w4-brand > *, .w4-menu > *,
.w4-footer-inner > *, .w4-footer-brand > *, .w4-stats > * { margin-block-start: 0 !important; margin-top: 0 !important; }

/* ============================================================
   BUTTONS (als Block-Buttons: Stil sitzt auf __link)
   ============================================================ */
.wp-block-button.btn-primary .wp-block-button__link,
a.btn-primary {
  background: #2D5BFF; color: #FFFFFF; border: none; border-radius: 12px;
  height: 54px; padding: 0 32px; font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(45,91,255,0.22); transition: background .15s ease;
}
.wp-block-button.btn-primary .wp-block-button__link:hover,
a.btn-primary:hover { background: #1E46D9; color: #FFFFFF; }

.wp-block-button.btn-outline .wp-block-button__link {
  background: #FFFFFF; color: #1A2E4F; border: 1px solid #E2DFD6; border-radius: 12px;
  height: 54px; padding: 0 32px; font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease;
}
.wp-block-button.btn-outline .wp-block-button__link:hover { border-color: #2D5BFF; color: #1A2E4F; }

.wp-block-button.btn-white .wp-block-button__link {
  background: #FFFFFF; color: #1A2E4F; border-radius: 12px;
  height: 54px; padding: 0 32px; font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.wp-block-button.btn-white .wp-block-button__link:hover { background: #EDF1FF; color: #1A2E4F; }

/* ============================================================
   NAVIGATION (Original: Sticky-Leiste, 72px hoch)
   ============================================================ */
.w4-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,249,246,0.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid #E9E6DE;
}
.w4-nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.w4-brand { display: flex; align-items: center; gap: 10px; }
.w4-brand p { margin: 0; }
.w4-logo {
  width: 34px; height: 34px; border-radius: 10px; background: #1A2E4F; color: #FFFFFF;
  font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.w4-brandname { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.w4-menu { display: flex; align-items: center; gap: 28px; }
.w4-menu p { margin: 0; }
.w4-menu .nav-link a { font-size: 14px; font-weight: 600; color: #6E7686; transition: color .15s ease; }
.w4-menu .nav-link a:hover { color: #1A2E4F; }
.w4-menu .wp-block-buttons { margin: 0; }
/* Kontakt-Button in der Nav: kleiner als die Hero-Buttons, ohne Schatten (Original: 42px hoch) */
.w4-nav-cta .wp-block-button__link {
  height: 42px !important; padding: 0 22px !important;
  border-radius: 10px !important; box-shadow: none !important;
  font-size: 14px !important;
}

/* ============================================================
   HERO (Original: padding 100px 24px 88px, zentriert)
   ============================================================ */
.w4-hero { max-width: 1120px; margin: 0 auto; padding: 100px 24px 88px; text-align: center; }
.w4-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #E9E6DE; background: #FFFFFF; border-radius: 100px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; color: #6E7686; margin: 0 0 28px;
}
.w4-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2D5BFF; display: inline-block; }
.w4-h1 {
  font-size: 62px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.08;
  max-width: 840px; margin: 0 auto; color: #1A2E4F; text-wrap: balance;
}
.w4-accent { color: #2D5BFF; }
.w4-sub { font-size: 18px; line-height: 1.65; color: #6E7686; max-width: 560px; margin: 24px auto 0; text-wrap: pretty; }
.w4-hero-ctas { justify-content: center; gap: 14px; margin-top: 36px; }
.w4-stats { display: flex; justify-content: center; align-items: stretch; gap: 56px; margin-top: 72px; }
.w4-stat { text-align: center; position: relative; }
.w4-stat p { margin: 0; }
.w4-stat-num { font-size: 28px; font-weight: 800; color: #1A2E4F; }
.w4-stat-label { font-size: 13px; color: #9AA0AB; font-weight: 600; margin-top: 4px; }
/* Volle Trennstriche zwischen den Stats (Original: durchgehende 1px-Linie) */
.w4-stat:not(:first-child)::before {
  content: ""; position: absolute; left: -28px; top: 0; bottom: 0; width: 1px; background: #E9E6DE;
}

/* ============================================================
   SEKTIONS-GRUNDGERÜST
   ============================================================ */
.w4-section { max-width: 1120px; margin: 0 auto; padding: 88px 24px; }
.w4-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #2D5BFF; margin: 0; }
.w4-h2 { font-size: 38px; font-weight: 800; letter-spacing: -1px; margin: 12px 0 0; color: #1A2E4F; }

/* 3er-Karten-Raster (Ablauf, Arbeiten, Kundenstimmen) */
.w4-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }

/* Ablauf-Karten */
.w4-card { background: #FFFFFF; border: 1px solid #E9E6DE; border-radius: 16px; padding: 32px; }
.w4-step-num {
  width: 44px; height: 44px; border-radius: 12px; background: #EDF1FF; color: #2D5BFF;
  font-size: 19px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0;
}
.w4-card h3 { font-size: 18px; font-weight: 700; margin: 22px 0 0; color: #1A2E4F; }
.w4-card p { font-size: 15px; line-height: 1.65; color: #6E7686; margin: 8px 0 0; }

/* Portfolio-Karten */
.w4-work { background: #FFFFFF; border: 1px solid #E9E6DE; border-radius: 16px; overflow: hidden; }
.w4-imgslot { margin: 0; }
.w4-imgslot img { display: block; width: 100%; height: 220px; object-fit: cover; }
.w4-work-body { padding: 22px; }
.w4-work-body p { margin: 0; }
.w4-work-title { font-size: 16px; font-weight: 700; color: #1A2E4F; }
.w4-work-sub { font-size: 14px; color: #6E7686; margin-top: 4px !important; }

/* ============================================================
   PREIS (Original: dunkelblaue Box, Raster 1.2fr 1fr)
   ============================================================ */
.w4-preis-wrap { max-width: 1120px; margin: 0 auto; padding: 88px 24px; }
.w4-preis {
  background: #1A2E4F; border-radius: 24px; padding: 60px 52px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
}
.w4-preis .w4-eyebrow { color: #8FA8FF; }
.w4-preis h2 { font-size: 38px; font-weight: 800; letter-spacing: -1px; margin: 12px 0 0; color: #FFFFFF; }
.w4-preis p { font-size: 16px; line-height: 1.65; color: #B8C2D9; margin: 16px 0 0; }
ul.w4-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
ul.w4-checks li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: #FFFFFF; margin: 0; }
ul.w4-checks li::before {
  content: "✓"; width: 24px; height: 24px; border-radius: 50%; background: #2D5BFF; color: #FFFFFF;
  font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ============================================================
   ÜBER MICH (Original: Raster 320px 1fr)
   ============================================================ */
.w4-ueber { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: center; }
.w4-portrait { margin: 0; }
.w4-portrait img { width: 320px; height: 360px; object-fit: cover; border-radius: 20px; }
.w4-ueber .w4-eyebrow { letter-spacing: 1px; }
.w4-ueber p { font-size: 16px; line-height: 1.75; color: #6E7686; margin: 16px 0 0; text-wrap: pretty; }

/* ============================================================
   KUNDENSTIMMEN
   ============================================================ */
.w4-quote { background: #FFFFFF; border: 1px solid #E9E6DE; border-radius: 16px; padding: 30px; display: flex; flex-direction: column; gap: 16px; }
.w4-quote p { margin: 0; }
.w4-stars { color: #F5A623; font-size: 16px; letter-spacing: 2px; }
.w4-quote-text { font-size: 15px; line-height: 1.65; color: #1A2E4F; }
.w4-quote-name { font-size: 14px; font-weight: 700; color: #1A2E4F; margin-top: auto !important; }
.w4-quote-role { font-size: 13px; color: #9AA0AB; }

/* ============================================================
   KONTAKT + FORMULAR (Original: max-width 720px)
   ============================================================ */
.w4-contact { max-width: 720px; margin: 0 auto; padding: 88px 24px 104px; }
.w4-contact-head { text-align: center; }
.w4-contact-head p { font-size: 16px; color: #6E7686; margin: 12px 0 0; }
.w4-form-card {
  background: #FFFFFF; border: 1px solid #E9E6DE; border-radius: 16px; padding: 32px; margin-top: 40px;
  display: flex; flex-direction: column; gap: 16px; box-shadow: 0 10px 30px rgba(26,46,79,0.06);
}
.w4-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field {
  height: 52px; padding: 0 18px; border-radius: 12px; border: 1px solid #E2DFD6;
  background: #FAF9F6; color: #1A2E4F; font-family: inherit; font-size: 15px; outline: none;
  transition: border-color .15s ease;
}
textarea.field { height: auto; padding: 16px 18px; resize: vertical; }
.field:focus { border-color: #2D5BFF; }
.w4-submit {
  height: 54px; border: none; border-radius: 12px; background: #2D5BFF; color: #FFFFFF;
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .15s ease;
}
.w4-submit:hover { background: #1E46D9; }
.w4-form-hint { text-align: center; font-size: 14px; color: #6E7686; }
.w4-success { background: #FFFFFF; border: 1px solid #2D5BFF; border-radius: 16px; padding: 44px; margin-top: 40px; text-align: center; }
.w4-success-check { width: 56px; height: 56px; border-radius: 50%; background: #2D5BFF; color: #FFFFFF; font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.w4-success-title { font-size: 22px; font-weight: 700; margin-top: 20px; color: #1A2E4F; }
.w4-success-text { font-size: 15px; color: #6E7686; margin-top: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.w4-footer { border-top: 1px solid #E9E6DE; background: #FFFFFF; }
.w4-footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 32px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.w4-footer-inner p { margin: 0; }
.w4-footer-brand { display: flex; align-items: center; gap: 10px; }
.w4-footer-logo { width: 28px; height: 28px; border-radius: 8px; background: #1A2E4F; color: #FFFFFF; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.w4-footer-name { font-size: 14px; font-weight: 700; color: #1A2E4F; }
.w4-footer-copy { font-size: 13px; color: #9AA0AB; }

/* ============================================================
   RESPONSIVE (aus dem Original übernommen)
   ============================================================ */
@media (max-width: 900px) {
  .w4-cards3 { grid-template-columns: 1fr; }
  .w4-preis { grid-template-columns: 1fr; padding: 40px 28px; }
  .w4-ueber { grid-template-columns: 1fr; gap: 32px; justify-items: center; text-align: center; }
  .w4-portrait img { width: 100%; max-width: 320px; }
  .w4-h1 { font-size: 44px; }
  .w4-h2, .w4-preis h2 { font-size: 30px; }
  .w4-stats { flex-wrap: wrap; gap: 28px; }
  .w4-stat:not(:first-child)::before { display: none; }
}
@media (max-width: 640px) {
  .w4-menu { gap: 16px; }
  .w4-menu .nav-link { display: none; }
  .w4-h1 { font-size: 34px; }
  .w4-hero-ctas { flex-direction: column; }
  .w4-form-row { grid-template-columns: 1fr; }
}