/* CallPatch – static site styles */
:root{
  --navy:#0b2545;
  --navy-700:#13386b;
  --navy-50:#eef2f8;
  --green:#1aa463;
  --green-700:#127a4a;
  --ink:#102a43;
  --muted:#5b6b80;
  --bg:#ffffff;
  --soft:#f6f8fb;
  --line:#e4e9f1;
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 8px 30px rgba(11,37,69,0.08);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--navy);line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-0.02em}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;letter-spacing:-0.01em}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
.shell{max-width:1140px;margin:0 auto;padding:0 1.25rem}
.shell.narrow{max-width:760px}
.section{padding:4rem 0}
.section.alt{background:var(--soft)}
.section-head{text-align:center;max-width:720px;margin:0 auto 2.5rem}
.eyebrow{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green-700);
  font-weight:700;
  margin:0 0 .8rem;
}
.accent{color:var(--green-700)}
.mt{margin-top:1.5rem}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--navy);font-size:1.1rem}
.brand:hover{text-decoration:none}
.brand-mark{width:36px;height:36px}
.topbar-nav{display:flex;gap:1.4rem;font-weight:500}
.topbar-nav a{color:var(--ink)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.8rem 1.4rem;border-radius:999px;
  font-weight:600;font-size:.95rem;
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-700);color:#fff}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-accent{background:var(--green);color:#fff}
.btn-accent:hover{background:var(--green-700);color:#fff}
.btn-block{width:100%;margin-top:.6rem}
.btn-lg{padding:1rem 1.6rem;font-size:1rem}

/* Hero */
.hero{padding-top:3rem}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.lead{font-size:1.15rem;color:var(--muted);max-width:36em}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.5rem 0 1rem}
.hero-note{font-size:.95rem;color:var(--muted)}
.hero-image{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  background:var(--navy-50);
}

/* Trust cards */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.8rem;
  max-width:720px;margin:1.5rem auto 1rem;
}
.trust-card{
  background:#fff;border:1px solid var(--line);
  padding:1rem;border-radius:var(--radius);
  text-align:center;font-weight:600;color:var(--navy);
}
.muted-note{text-align:center;color:var(--muted);font-size:.95rem;max-width:640px;margin:1rem auto 0}

/* Features */
.feature-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.feature-card{
  background:#fff;border:1px solid var(--line);
  padding:1.5rem;border-radius:var(--radius);
}
.feature-card h3{margin-bottom:.3rem}

/* Callout */
.callout{
  margin-top:2rem;padding:1.2rem 1.4rem;
  border-left:4px solid var(--green);
  background:#f1faf4;color:var(--ink);
  border-radius:8px;font-size:.97rem;
}
.callout.soft{background:#fff;border-left-color:var(--navy);margin-top:2rem}

/* Comic + steps */
.comic-image{
  width:100%;max-width:900px;margin:0 auto;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.steps-grid,.process-grid{
  list-style:none;padding:0;margin:2rem 0 0;
  display:grid;grid-template-columns:1fr;gap:.8rem;
}
.steps-grid li,.process-grid li{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem 1.2rem;
  display:flex;align-items:center;gap:1rem;
}
.steps-grid p,.process-grid p{margin:0;font-weight:500}
.step-num{
  flex-shrink:0;
  width:36px;height:36px;border-radius:50%;
  background:var(--green);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;
}

/* Emotional */
.emotional-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.emotional-image{border-radius:var(--radius-lg);box-shadow:var(--shadow)}

/* Products */
.product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
.product-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 10px rgba(11,37,69,0.04);
}
.product-image-wrap{
  background:linear-gradient(135deg,var(--navy-50),#fff);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  padding:1rem;
}
.product-image-wrap img{max-height:100%;width:auto;object-fit:contain}
.product-body{padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;flex:1}
.product-body h3{margin-bottom:.3rem}
.price{color:var(--green-700);font-weight:800;font-size:1.3rem;margin:.2rem 0 .6rem}
.incl{font-size:.85rem;color:var(--muted);margin-top:auto;padding-top:.3rem}

.colors-section{
  margin-top:2.5rem;
}
.colors-title{
  font-size:1.25rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:.5rem;
}
.colors-lead{
  color:var(--muted);
  font-size:.95rem;
  margin-bottom:1rem;
}
.colors-grid{
  display:grid;grid-template-columns:1fr;gap:1.5rem;
}
.colors-grid h4{margin-bottom:.6rem}
.color-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.color-list li{
  background:#fff;border:1px solid var(--line);
  padding:.35rem .8rem;border-radius:999px;font-size:.88rem;
}

/* Form */
.form{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.5rem;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:1rem;
}
.form label{display:flex;flex-direction:column;font-weight:600;color:var(--navy);font-size:.92rem;gap:.35rem}
.form label small{font-weight:400;color:var(--muted);font-size:.82rem}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea{
  font:inherit;color:var(--ink);
  padding:.7rem .85rem;
  border:1px solid var(--line);background:#fff;
  border-radius:10px;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  width:100%;
}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,37,69,.1);
}
.form textarea{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr;gap:1rem}
.checkbox{flex-direction:row !important;align-items:flex-start;gap:.6rem;font-weight:400 !important;color:var(--ink) !important}
.checkbox input{margin-top:.25rem}
.form-note{font-size:.88rem;color:var(--muted);margin:0}
.form-status{font-size:.95rem;margin-top:.3rem;min-height:1.2em}
.form-status.success{color:var(--green-700);font-weight:600}
.form-status.error{color:#b3261e;font-weight:600}

/* Honeypot — visually hidden but reachable */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
.contact-list{list-style:none;padding:0;margin:1rem 0}
.contact-list li{margin:.3rem 0}
address{font-style:normal;color:var(--muted);margin:1rem 0}
.contact-buttons{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.logo-panel{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:2rem;
  display:flex;flex-direction:column;gap:1.5rem;align-items:center;
}
.logo-panel img{max-width:200px}

/* Legal */
.legal h2{margin-bottom:1.5rem}
.legal p{margin-bottom:1rem}

/* Footer */
.footer{
  background:var(--navy);color:#cfd8e6;
  padding:2rem 0;margin-top:2rem;
}
.footer a{color:#fff}
.footer-inner{display:flex;flex-direction:column;gap:1rem;text-align:center}
.footer-nav{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.footer p{margin:0;font-size:.9rem}

/* Mobile contact bar */
.mobile-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:#fff;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
  box-shadow:0 -4px 18px rgba(11,37,69,0.08);
  padding:env(safe-area-inset-bottom) 0 0;
}
.mobile-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.7rem .3rem;font-size:.78rem;font-weight:600;color:var(--navy);
  gap:.15rem;
}
.mobile-bar a span{font-size:1.2rem}
.mobile-bar a:hover{text-decoration:none;background:var(--soft)}

/* Reserve space for the bar on mobile so it never covers content */
body{padding-bottom:180px}
#bestellen{padding-bottom:6rem}
#orderForm{padding-bottom:1rem}

/* Desktop layout */
@media (min-width:760px){
  .hero-grid{grid-template-columns:1.1fr 1fr;gap:3rem}
  .trust-grid{grid-template-columns:repeat(4,1fr)}
  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .steps-grid,.process-grid{grid-template-columns:repeat(2,1fr)}
  .emotional-grid{grid-template-columns:1fr 1fr}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .colors-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1.4fr 1fr}
  .footer-inner{flex-direction:row;justify-content:space-between;text-align:left}
  .mobile-bar{display:none}
  body{padding-bottom:0}
}
@media (min-width:1024px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .process-grid{grid-template-columns:repeat(5,1fr)}
  .steps-grid{grid-template-columns:repeat(4,1fr)}
}

/* --- Cyon mobile visual fixes v4 --- */
/* Header: prevent logo/brand/navigation collision on iPhone widths */
@media (max-width: 699px){
  .topbar-inner{
    height:auto;
    min-height:76px;
    padding:.55rem 0 .65rem;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    row-gap:.35rem;
  }
  .brand{
    width:100%;
    justify-content:center;
    gap:.5rem;
    font-size:1.08rem;
    line-height:1;
    white-space:nowrap;
  }
  .brand-mark{
    width:32px;
    height:32px;
    flex:0 0 32px;
  }
  .topbar-nav{
    width:100%;
    justify-content:center;
    gap:1rem;
    font-size:.94rem;
    line-height:1.1;
    white-space:nowrap;
  }
}
@media (max-width: 380px){
  .topbar-nav{gap:.7rem;font-size:.88rem;}
  .brand{font-size:1rem;}
  .brand-mark{width:30px;height:30px;flex-basis:30px;}
}

/* Product cards: show single Shirt/Hoodie pictures completely, without cropping */
.product-image-wrap{
  aspect-ratio:4/5;
  min-height:320px;
  overflow:visible;
  padding:1.15rem;
}
.product-image-wrap img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}
@media (min-width:760px){
  .product-image-wrap{min-height:340px;}
}


/* --- Critical live fixes v5 --- */

    /* Critical live fixes v5: keep header readable and product photos uncropped even if old CSS is cached */
    @media (max-width: 760px){
      .topbar-inner{
        height:auto !important;
        min-height:92px !important;
        padding:0.65rem 1rem 0.75rem !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:0.45rem !important;
      }
      .brand{
        width:100% !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        gap:0.5rem !important;
        font-size:1.15rem !important;
        line-height:1.05 !important;
        white-space:nowrap !important;
        flex:0 0 auto !important;
      }
      .brand-mark{
        width:34px !important;
        height:34px !important;
        flex:0 0 34px !important;
      }
      .topbar-nav{
        width:100% !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        gap:1.15rem !important;
        flex-wrap:nowrap !important;
        font-size:0.94rem !important;
        line-height:1.1 !important;
      }
      .topbar-nav a{
        display:block !important;
        padding:0.05rem 0 !important;
        white-space:nowrap !important;
      }
      main{overflow-x:hidden !important;}
    }
    @media (max-width: 380px){
      .topbar-nav{gap:0.75rem !important;font-size:0.86rem !important;}
      .brand{font-size:1.05rem !important;}
      .brand-mark{width:32px !important;height:32px !important;flex-basis:32px !important;}
    }
    .product-image-wrap{
      aspect-ratio:auto !important;
      height:auto !important;
      min-height:unset !important;
      overflow:visible !important;
      padding:1.15rem !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
    }
    .product-image-wrap img{
      display:block !important;
      width:100% !important;
      height:auto !important;
      max-width:100% !important;
      max-height:none !important;
      object-fit:contain !important;
      object-position:center !important;
    }