/* ============================================================
   PAGE GEWERBE – Navy / Blau Design-System
   ============================================================ */

#page-gewerbe {
  /* Wärmere, einladendere B2B-Palette
     Navy mit warmem Unterton + Cremiges Off-White statt kühles Grau
     Blau-Akzent bleibt für klare Aktionen, ergänzt um warmes Kupfer */
  --gn:   #182742;   /* Navy mit warmem Unterton */
  --gn-2: #21314D;
  --gbl:  #2057D6;   /* Blau-Akzent (etwas wärmer/kräftiger) */
  --gbll: #EDEAF5;   /* leicht ins Warme verschoben */
  --gt:   #1F2438;   /* Body-Text mit Hauch Wärme */
  --gm:   #6B6557;   /* Warmer Grau-Braunton statt kühles Grau */
  --gbr:  #DDD5C5;   /* Warme Border (Sand) */
  --gw:   #fff;
  --gbg:  #F8F4EB;   /* Warmes Cream als Haupt-Background */
  --gbg2: #F1ECDF;   /* Sand für Sektions-Wechsel */
  --gg:   #19A84C;   /* WhatsApp-grün */
  --gcopper: #C68A48; /* warme Akzentfarbe */

  background: var(--gbg);
  color: var(--gt);
  font-family: 'DM Sans', system-ui, sans-serif;

  --logo-bg:      var(--gw);
  --logo-border:  var(--gbr);
  --logo-accent:  var(--gbl);
  --logo-text:    #2a3654;
  --logo-caption: var(--gm);
  --brand-accent: var(--gbl);
}

/* HEADER */
.g-hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--gn);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
  height: 76px; gap: 1rem;
}
/* Bücker-Wordmark im Header – Querformat (Aspect 4.58:1) */
.g-hdr .brand-logo {
  color: #fff;
  display: flex;
  align-items: center;
  height: 100%;
}
.g-hdr .brand-logo img,
.g-hdr .brand-logo svg {
  height: 50px;
  width: auto;              /* Aspect-Ratio bleibt erhalten – kein Quetschen */
  max-width: 290px;
  display: block;
}
.g-hdr .brand-logo svg {
  filter: brightness(0) invert(1);
}
/* PNG-Logo: bereits weiß auf transparent → kein Filter nötig */

.g-nav { display: flex; gap: 1.75rem; align-items: center; }
.g-nav a {
  font-size: .875rem;
  color: rgba(255,255,255,.65);
  transition: color .2s;
}
.g-nav a:hover, .g-nav a:focus-visible { color: #fff; }

.g-hright { display: flex; align-items: center; gap: .75rem; }
.g-hdr .lang-btn { color: rgba(255,255,255,.6); }
.g-hdr .lang-btn:hover,
.g-hdr .lang-btn.active { color: #fff; background: rgba(255,255,255,.1); }
.g-hdr .lang-sep { color: rgba(255,255,255,.3); }

/* BUTTONS */
.gb {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: 8px;
  font-weight: 500; font-size: .85rem;
  border: none; transition: all .2s;
  white-space: nowrap;
}
.gb-wa { background: var(--gg); color: #fff; }
.gb-wa:hover, .gb-wa:focus-visible { background: #128c3c; }

.gb-ghost {
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.gb-ghost:hover, .gb-ghost:focus-visible { background: rgba(255,255,255,.2); }

.gb-blue {
  background: var(--gbl); color: #fff;
  padding: .9rem 2rem; font-size: 1rem;
  border-radius: 10px;
}
.gb-blue:hover, .gb-blue:focus-visible { background: #1340a8; }

/* HERO */
.g-hero {
  margin-top: 76px;
  background: var(--gn);
  color: #fff;
  min-height: 86vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  overflow: hidden;
  position: relative;
}
.g-hero::before {
  content: ''; position: absolute;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,138,72,.18) 0%, rgba(32,87,214,.12) 55%, transparent 75%);
  pointer-events: none;
}
.g-hero::after {
  content: ''; position: absolute;
  bottom: -160px; left: -120px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: rgba(198,138,72,.10);
  filter: blur(20px);
  pointer-events: none;
}
.g-hero-l {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 5vw, 5.5rem) clamp(1.5rem, 4vw, 4.5rem);
  position: relative; z-index: 1;
}
.g-eye {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 1.25rem;
}
.g-edot {
  width: 6px; height: 6px;
  border-radius: 50%; background: var(--gbl);
}
.g-htitle {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 800; color: #fff;
  letter-spacing: -.04em;
  margin-bottom: 1.5rem; line-height: 1.1;
}
.g-htitle em { color: #E5B66A; font-style: normal; } /* warmes Gold statt kaltes Blau */
.g-hsub {
  font-size: 1rem;
  color: rgba(255,255,255,.65);
  max-width: 420px; line-height: 1.75;
  font-weight: 300; margin-bottom: 2rem;
}
.g-hbtns { display: flex; gap: 1rem; flex-wrap: wrap; }

/* HERO Trust badges */
.g-htrust {
  margin-top: 2rem;
  display: flex; gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: rgba(255,255,255,.55);
}
.g-htrust span { display: inline-flex; align-items: center; gap: .35rem; }
.g-htrust strong { color: #fff; font-weight: 700; }

.g-hero-r {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  position: relative; z-index: 1;
}
.g-hero-img {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
  object-fit: cover; opacity: .18;
}
.g-panel {
  width: 100%; max-width: 380px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 1.75rem;
  position: relative; z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.g-plbl {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 1.25rem;
}
.g-pitems { display: flex; flex-direction: column; gap: .5rem; }
.g-pitem {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  transition: all .2s;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.g-pitem:hover,
.g-pitem:focus-visible {
  background: rgba(26,79,204,.25);
  border-color: rgba(26,79,204,.5);
}
.g-pico {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(26,79,204,.35);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.g-pt { font-size: .9rem; color: #fff; font-weight: 500; }
.g-ps { font-size: .76rem; color: rgba(255,255,255,.5); }

.g-pcta {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: rgba(26,79,204,.2);
  border: 1px solid rgba(26,79,204,.35);
  border-radius: 10px;
  text-align: center;
}
.g-pcta p { font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: .75rem; }

/* TRUST-BAR */
.g-trust {
  background: var(--gw);
  border-bottom: 1px solid var(--gbr);
  padding: 1.25rem 1.5rem;
  overflow: hidden;
}
.g-tin {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap; justify-content: center;
}
.g-tin > .label {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gm);
  flex-shrink: 0;
}

/* SECTIONS */
.g-sec { padding: clamp(3rem, 6vw, 5rem) 1.5rem; }
.g-in  { max-width: 1100px; margin: 0 auto; }

.g-eye2 {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--gbl); margin-bottom: .75rem;
}
.g-ttl {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800; letter-spacing: -.04em;
  margin-bottom: 1rem; line-height: 1.15;
}
.g-sub {
  color: var(--gm); font-size: 1rem;
  max-width: 540px; line-height: 1.75;
  font-weight: 300; margin-bottom: 3rem;
}

.g-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
/* CTA-Karte (Bedarfsanalyse) spannt sich über alle Spalten */
.g-card--wide {
  grid-column: 1 / -1;
  padding: 1.75rem 2rem;
}
.g-card-wide-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.g-card-wide-text { flex: 1 1 60%; min-width: 280px; }
.g-card-wide-text h3 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: .35rem;
  color: var(--gt);
}
.g-card-wide-text p {
  font-size: .92rem;
  color: var(--gm);
  line-height: 1.55;
}
@media (max-width: 720px) {
  .g-card--wide { padding: 1.5rem; }
  .g-card-wide-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
.g-card {
  background: var(--gw);
  border-radius: 14px;
  padding: 1.75rem;
  border: 1px solid var(--gbr);
  transition: all .25s;
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.g-card:hover,
.g-card:focus-visible {
  border-color: var(--gbl);
  box-shadow: 0 4px 24px rgba(26,79,204,.1);
  transform: translateY(-2px);
}
.g-card-hint {
  position: absolute; top: .8rem; right: .8rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gbl);
  background: rgba(255, 255, 255, .92);
  padding: .35rem .65rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}
.g-cimg {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  background: var(--gbll);
}
.g-card h3 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 1.05rem; font-weight: 700;
  margin-bottom: .5rem; color: var(--gt);
}
.g-card p { font-size: .875rem; color: var(--gm); line-height: 1.65; }

/* USP */
.g-usp { background: var(--gn); padding: clamp(3rem, 6vw, 4.5rem) 1.5rem; }
.g-uin { max-width: 1100px; margin: 0 auto; }
.g-ugrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem; margin-top: 3rem;
}
.g-ucard {
  padding: 1.75rem 1.5rem;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.g-unum {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 800; font-size: 2.2rem;
  color: #E5B66A; letter-spacing: -.04em;
  margin-bottom: .25rem;
}
.g-ucard h4 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: .95rem; font-weight: 700;
  margin-bottom: .4rem; color: #fff;
}
.g-ucard p { font-size: .82rem; color: rgba(255,255,255,.5); line-height: 1.55; }

/* EUROPE FEATURE */
.g-feature {
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
  background: var(--gbg2);
}
.g-feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.g-feat-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.g-feat-imgs img {
  border-radius: 12px;
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--gbll);
}
.g-feat-imgs img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
}

.g-ref-box {
  background: rgba(26,79,204,.07);
  border: 1px solid rgba(26,79,204,.2);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.g-ref-box .label {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gbl); margin-bottom: .75rem;
}
.g-ref-row {
  display: flex; gap: 1.5rem; align-items: center;
  flex-wrap: wrap;
}
/* Einheitliche Logo-Tiles für Referenzkunden – nicht klickbar, nur visuelle Anzeige */
.g-ref-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  align-items: stretch;
  width: 100%;
}
.g-ref-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6rem .8rem;
  border-radius: 8px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--gbr);
  min-height: 76px;
  transition: background .2s, transform .2s, border-color .2s;
}
.g-ref-tile:hover {
  background: #fff;
  border-color: var(--gbl);
  transform: translateY(-2px);
}
.g-ref-tile img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: .95;
  transition: opacity .2s;
}
/* Wordmark-Logos in Längsformat (Hagedorn, Schüttflix) bekommen niedrigere Höhe */
.g-ref-tile img { max-height: 38px; }
/* Quadratische Logos (Fischer 1:1, Wimmelbücker 1:1) bekommen mehr Höhe – optisch ausgeglichen */
.g-ref-tile img[width="225"],
.g-ref-tile img[width="320"] { max-height: 60px; }
.g-ref-tile:hover img { opacity: 1; }

@media (max-width: 720px) {
  .g-ref-row { grid-template-columns: repeat(2, 1fr); }
}

/* PARTNERS */
.g-partners {
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  background: var(--gw);
}
.g-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

/* TEAM */
.g-team {
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
  background: var(--gbg);
}
.g-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.g-tmember { text-align: center; }
.g-tmember img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 1rem;
  border: 1px solid var(--gbr);
  background: var(--gbll);
}
.g-tname {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: .95rem; font-weight: 700;
  color: var(--gt); margin-bottom: .25rem;
}
.g-trole {
  font-size: .78rem;
  color: var(--gbl); font-weight: 500;
}

/* PROCESS */
.g-proc {
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
  background: var(--gbg2);
}
.g-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .75rem;
  position: relative;
}
.g-steps::before {
  content: ''; position: absolute;
  top: 22px; left: 10%; right: 10%;
  height: 1px; background: var(--gbr);
  z-index: 0;
}
.g-step {
  text-align: center;
  padding: 0 .75rem;
  position: relative; z-index: 1;
}
.g-snum {
  width: 44px; height: 44px;
  background: var(--gn);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700; font-size: .85rem; color: #fff;
  margin: 0 auto 1.25rem;
  border: 3px solid var(--gbg2);
}
.g-step h4 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: .875rem; font-weight: 700;
  margin-bottom: .375rem; color: var(--gt);
}
.g-step p { font-size: .78rem; color: var(--gm); line-height: 1.5; }

/* CTA-BANNER */
.g-cta { background: var(--gbl); padding: clamp(3rem, 6vw, 4.5rem) 1.5rem; }
.g-ctain {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.g-ctain h2 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800; letter-spacing: -.04em;
  color: #fff; margin-bottom: .4rem;
}
.g-ctain > div > p { color: rgba(255,255,255,.7); font-weight: 300; }
.g-ctabtns { display: flex; gap: 1rem; flex-wrap: wrap; }
.g-ctawa {
  background: #fff; color: var(--gbl);
  padding: .9rem 2rem; font-size: 1rem;
  border-radius: 10px;
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; transition: all .2s;
}
.g-ctawa:hover, .g-ctawa:focus-visible { background: #f0f5ff; }
.g-ctatel {
  background: rgba(255,255,255,.15); color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
  padding: .9rem 2rem; font-size: 1rem;
  border-radius: 10px;
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 500; transition: all .2s;
}
.g-ctatel:hover, .g-ctatel:focus-visible { background: rgba(255,255,255,.25); }

/* CONTACT */
.g-contact { background: var(--gw); padding: clamp(3rem, 6vw, 5rem) 1.5rem; }
.g-cgrid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  max-width: 1100px; margin: 0 auto;
}
.g-cinfo h2 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800; letter-spacing: -.04em;
  margin-bottom: 1rem;
}
.g-cinfo > p {
  color: var(--gm); font-weight: 300;
  line-height: 1.75; margin-bottom: 2rem;
}
.g-cm {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1rem;
  color: var(--gt); font-weight: 500;
}
.g-cm:hover, .g-cm:focus-visible { color: var(--gbl); }
.g-cmico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--gbg2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--gt);
}
.g-cmico.wa { background: #25D366; color: #fff; }

.g-fcard {
  background: var(--gbg);
  border-radius: 16px;
  border: 1px solid var(--gbr);
  padding: 2.5rem;
}
.g-fcard h3 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 1.2rem; font-weight: 700;
  margin-bottom: 1.5rem;
}

.gfg {
  display: flex; flex-direction: column;
  gap: .4rem; margin-bottom: 1rem;
}
.gfg label {
  font-size: .78rem; font-weight: 500; color: var(--gm);
}
.gfg label .req { color: #b3261e; }
.gfg input,
.gfg select,
.gfg textarea {
  background: var(--gw);
  border: 1px solid var(--gbr);
  border-radius: 8px;
  padding: .75rem 1rem;
  color: var(--gt);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.gfg input:focus,
.gfg select:focus,
.gfg textarea:focus {
  border-color: var(--gbl);
  box-shadow: 0 0 0 3px rgba(26,79,204,.15);
}
.gfg textarea { resize: vertical; min-height: 100px; }

.g-frow,
.g-fsub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.g-fsub { margin-top: 1.25rem; }

.g-sbtn {
  background: var(--gbl); color: #fff;
  border: none; padding: .9rem;
  border-radius: 10px;
  font-weight: 600; font-size: .95rem;
  transition: background .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.g-sbtn:hover, .g-sbtn:focus-visible { background: #1340a8; }
.g-sbtn:disabled { opacity: .6; cursor: wait; }
.g-waform {
  background: var(--gg); color: #fff;
  padding: .9rem;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; font-weight: 500; font-size: .9rem;
  transition: background .2s;
}
.g-waform:hover, .g-waform:focus-visible { background: #128c3c; }

/* FOOTER */
.g-footer {
  background: var(--gn);
  color: rgba(255,255,255,.45);
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-size: .85rem;
}
.g-footer strong { color: rgba(255,255,255,.85); }
.g-footer a { color: rgba(255,255,255,.4); }
.g-footer a:hover, .g-footer a:focus-visible { color: rgba(255,255,255,.85); }

/* RESPONSIVE GEWERBE */
@media (max-width: 960px) {
  .g-hero { grid-template-columns: 1fr; }
  .g-hero-r { display: none; }
  .g-grid3 { grid-template-columns: 1fr; }
  .g-feat-grid,
  .g-cgrid { grid-template-columns: 1fr; }
  .g-frow, .g-fsub { grid-template-columns: 1fr; }
  .g-logos { grid-template-columns: repeat(3, 1fr); }
  .g-team-grid { grid-template-columns: repeat(2, 1fr); }
  .g-nav { display: none; }
  .g-ctain { flex-direction: column; align-items: flex-start; }
  .g-steps { grid-template-columns: 1fr 1fr; }
  .g-steps::before { display: none; }
  .g-ugrid { grid-template-columns: 1fr 1fr; }
  .g-fcard { padding: 1.5rem; }
}
@media (max-width: 540px) {
  .g-logos { grid-template-columns: repeat(2, 1fr); }
  .g-steps { grid-template-columns: 1fr; }
  .g-ugrid { grid-template-columns: 1fr 1fr; }
}