/* Vidal Solutions Contact Polish v5.4.1 */
/* Vollständiger Reset für die Kontaktseite, damit keine alten Billig-/Browserstyles durchschlagen. */

:root{
  --vs-dark-0:#02050b;
  --vs-dark-1:#050a13;
  --vs-dark-2:#081426;
  --vs-panel:#071120;
  --vs-panel-2:#0b172a;
  --vs-line:rgba(236,211,154,.16);
  --vs-text:#f4eddf;
  --vs-muted:rgba(244,237,223,.68);
  --vs-soft:rgba(244,237,223,.48);
  --vs-gold-1:#a98749;
  --vs-gold-2:#cfb173;
  --vs-gold-3:#f4e2b6;
  --vs-gold-4:#bd9250;
  --vs-light-0:#eee6d8;
  --vs-light-1:#e2d6c3;
  --vs-light-panel:rgba(255,252,246,.86);
  --vs-light-text:#21180d;
  --vs-light-muted:rgba(45,35,20,.66);
}

*{
  box-sizing:border-box;
}

html{
  min-height:100%;
}

body.contact-v540{
  min-height:100svh;
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:var(--vs-text);
  background:
    radial-gradient(circle at 10% 12%,rgba(198,147,64,.13),transparent 32%),
    radial-gradient(circle at 86% 18%,rgba(110,137,180,.10),transparent 34%),
    radial-gradient(circle at 50% 110%,rgba(18,70,120,.20),transparent 45%),
    linear-gradient(180deg,var(--vs-dark-0) 0%,var(--vs-dark-1) 45%,#061326 100%);
  overflow-x:hidden;
}

body.contact-v540::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.20));
}

body.contact-v540::after{
  content:"";
  position:fixed;
  left:-10vw;
  bottom:10vh;
  width:52vw;
  height:26vh;
  pointer-events:none;
  opacity:.34;
  background:
    radial-gradient(ellipse at center,rgba(207,177,115,.22),transparent 58%);
  filter:blur(24px);
  transform:rotate(-9deg);
}

body.contact-v540.theme-light{
  color:var(--vs-light-text);
  background:
    radial-gradient(circle at 12% 16%,rgba(184,145,70,.16),transparent 34%),
    radial-gradient(circle at 80% 14%,rgba(150,130,98,.13),transparent 38%),
    linear-gradient(180deg,#f4eee4 0%,#e9dfcf 55%,#ddd0bd 100%);
}

body.contact-v540.theme-light::before{
  opacity:.18;
  background-image:
    linear-gradient(rgba(95,73,39,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,73,39,.055) 1px, transparent 1px);
}

.contact-back{
  position:fixed;
  left:24px;
  top:22px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(5,10,20,.62);
  backdrop-filter:blur(14px);
  color:rgba(244,237,223,.88);
  text-decoration:none;
  font-size:13px;
  font-weight:850;
  box-shadow:0 16px 42px rgba(0,0,0,.20);
}

.contact-back:hover{
  border-color:rgba(207,177,115,.30);
  color:var(--vs-gold-3);
}

.theme-light .contact-back{
  background:rgba(255,255,255,.72);
  border-color:rgba(129,99,48,.14);
  color:#332716;
  box-shadow:0 16px 34px rgba(94,72,35,.10);
}

.contact-mode{
  position:fixed;
  right:24px;
  top:22px;
  z-index:20;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.075);
  color:rgba(244,237,223,.92);
  font:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 42px rgba(0,0,0,.20);
  backdrop-filter:blur(14px);
}

.contact-mode:hover{
  border-color:rgba(207,177,115,.30);
}

.theme-light .contact-mode{
  background:rgba(255,255,255,.76);
  color:#241b0e;
  border-color:rgba(129,99,48,.14);
  box-shadow:0 16px 34px rgba(94,72,35,.10);
}

.contact-shell{
  position:relative;
  z-index:2;
  min-height:100svh;
  width:min(1120px,calc(100vw - 36px));
  margin:0 auto;
  display:grid;
  place-items:center;
  padding:96px 0 64px;
}

.contact-card{
  width:min(960px,100%);
  border-radius:32px;
  border:1px solid rgba(207,177,115,.18);
  background:
    radial-gradient(circle at 14% 0%,rgba(207,177,115,.11),transparent 32%),
    linear-gradient(180deg,rgba(8,17,32,.94),rgba(5,10,20,.90));
  box-shadow:0 34px 110px rgba(0,0,0,.42);
  padding:34px;
  overflow:hidden;
}

.theme-light .contact-card{
  border-color:rgba(129,99,48,.14);
  background:
    radial-gradient(circle at 18% 0%,rgba(194,148,64,.13),transparent 34%),
    linear-gradient(180deg,rgba(255,252,246,.90),rgba(246,238,226,.86));
  box-shadow:0 34px 90px rgba(101,78,38,.15);
}

.eyebrow,
#contactKicker{
  margin:0 0 12px;
  color:var(--vs-gold-3);
  text-transform:uppercase;
  letter-spacing:.20em;
  font-size:11px;
  font-weight:950;
}

.theme-light .eyebrow,
.theme-light #contactKicker{
  color:#9b7428;
}

.contact-card h1{
  margin:0;
  max-width:820px;
  font-family:Georgia, "Times New Roman", serif;
  color:var(--vs-text);
  font-size:clamp(42px,4.4vw,66px);
  line-height:.94;
  letter-spacing:-.052em;
  font-weight:700;
}

.theme-light .contact-card h1{
  color:var(--vs-light-text);
}

#contactIntro{
  margin:14px 0 0;
  max-width:860px;
  color:var(--vs-muted);
  font-size:16px;
  line-height:1.55;
}

.theme-light #contactIntro{
  color:var(--vs-light-muted);
}

.contact-variant-banner{
  margin:22px 0 22px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.034));
}

.theme-light .contact-variant-banner{
  border-color:rgba(129,99,48,.12);
  background:
    linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,247,234,.70));
}

.contact-variant-badge{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 13px;
  border-radius:999px;
  background:linear-gradient(115deg,#a98749 0%,#cfb173 28%,#f4e2b6 52%,#bd9250 75%,#ead3a2 100%);
  color:#18130b;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
  font-weight:950;
}

.contact-variant-note{
  margin:13px 0 0;
  color:var(--vs-muted);
  line-height:1.52;
  font-size:15px;
}

.theme-light .contact-variant-note{
  color:var(--vs-light-muted);
}

.contact-variant-points{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.contact-variant-point{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.065);
  color:rgba(244,237,223,.86);
  font-size:12px;
  font-weight:850;
}

.theme-light .contact-variant-point{
  background:rgba(255,255,255,.72);
  border-color:rgba(129,99,48,.12);
  color:#3d2d15;
}

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  margin-top:22px;
}

.contact-grid .wide{
  grid-column:1 / -1;
}

.field{
  display:grid;
  gap:8px;
  min-width:0;
}

.field span{
  color:var(--vs-soft);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:950;
}

.theme-light .field span{
  color:rgba(48,39,25,.52);
}

.field input,
.field textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:17px;
  background:rgba(255,255,255,.060);
  color:var(--vs-text);
  outline:none;
  padding:14px 15px;
  font:inherit;
  font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.field textarea{
  min-height:126px;
  resize:vertical;
}

.field input::placeholder,
.field textarea::placeholder{
  color:rgba(244,237,223,.36);
}

.field input:focus,
.field textarea:focus{
  border-color:rgba(207,177,115,.48);
  box-shadow:0 0 0 4px rgba(207,177,115,.10), inset 0 1px 0 rgba(255,255,255,.04);
}

.theme-light .field input,
.theme-light .field textarea{
  background:rgba(255,255,255,.76);
  border-color:rgba(129,99,48,.12);
  color:#241b0e;
}

.theme-light .field input::placeholder,
.theme-light .field textarea::placeholder{
  color:rgba(45,35,20,.42);
}

.topic-group{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.topic-group[hidden]{
  display:none !important;
}

.topic-pill{
  min-height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  color:rgba(244,237,223,.82);
  padding:0 16px;
  text-align:left;
  font:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.topic-pill.active,
.topic-pill:hover{
  color:#18130b;
  border-color:transparent;
  background:linear-gradient(115deg,#a98749 0%,#cfb173 28%,#f4e2b6 52%,#bd9250 75%,#ead3a2 100%);
}

.theme-light .topic-pill{
  background:rgba(255,255,255,.72);
  border-color:rgba(129,99,48,.12);
  color:#3d2d15;
}

.send{
  min-height:58px;
  border:0;
  border-radius:22px;
  background:linear-gradient(115deg,#a98749 0%,#cfb173 28%,#f4e2b6 52%,#bd9250 75%,#ead3a2 100%);
  color:#18130b;
  font:inherit;
  font-size:15px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(199,163,98,.18);
}

.send:hover{
  filter:brightness(1.04);
}

.contact-form-note{
  margin:0 2px;
  color:rgba(244,237,223,.44);
  font-size:12px;
  line-height:1.45;
}

.theme-light .contact-form-note{
  color:rgba(45,35,20,.50);
}

@media(max-width:820px){
  .contact-shell{
    width:calc(100vw - 24px);
    padding:82px 0 34px;
  }

  .contact-card{
    padding:24px 18px;
    border-radius:26px;
  }

  .contact-grid,
  .topic-group{
    grid-template-columns:1fr;
  }

  .contact-back{
    left:12px;
    top:12px;
  }

  .contact-mode{
    right:12px;
    top:12px;
  }

  .contact-variant-points{
    flex-direction:column;
  }

  .contact-variant-point{
    width:100%;
  }
}

/* v5410-contact-polish-css-marker */

/* v5500-it-support-contact-css-marker */
.topic-group.wide{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.topic-pill[data-topic="IT-Support"],
.topic-pill[data-topic="Fernwartung"],
.topic-pill[data-topic="Vor-Ort-Hilfe"],
.topic-pill[data-topic="Windows / PC / Laptop"],
.topic-pill[data-topic="Smartphone-Hilfe"],
.topic-pill[data-topic="E-Mail / Outlook / Domain"],
.topic-pill[data-topic="Drucker / WLAN"]{
  border-color:rgba(112,174,255,.22);
}
.topic-pill[data-topic="IT-Support"].active,
.topic-pill[data-topic="Fernwartung"].active,
.topic-pill[data-topic="Vor-Ort-Hilfe"].active,
.topic-pill[data-topic="Windows / PC / Laptop"].active,
.topic-pill[data-topic="Smartphone-Hilfe"].active,
.topic-pill[data-topic="E-Mail / Outlook / Domain"].active,
.topic-pill[data-topic="Drucker / WLAN"].active{
  background:linear-gradient(135deg,rgba(112,174,255,.24),rgba(212,171,85,.18));
  border-color:rgba(112,174,255,.42);
}

/* v5600-route-contact-split-css-marker */
.contact-route-select{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.contact-route-select[hidden],
.contact-route-summary[hidden],
.contact-grid[hidden]{
  display:none !important;
}
.contact-route-card{
  min-height:230px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.030));
  color:var(--vs-text);
  text-decoration:none;
  padding:26px;
  display:grid;
  align-content:end;
  gap:10px;
  box-shadow:0 24px 72px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.contact-route-card:hover{
  transform:translateY(-2px);
  border-color:rgba(207,177,115,.38);
  box-shadow:0 30px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.contact-route-card span{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(207,177,115,.18);
  color:var(--vs-gold-3);
  font-weight:950;
}
.contact-route-card strong{
  font-size:clamp(30px,3vw,44px);
  line-height:.98;
  letter-spacing:-.04em;
}
.contact-route-card em{
  color:var(--vs-muted);
  font-style:normal;
  line-height:1.42;
}
.contact-route-card b{
  color:var(--vs-gold-3);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
.contact-route-card.website-route{
  border-color:rgba(207,177,115,.30);
  background:
    radial-gradient(circle at 16% 14%,rgba(207,177,115,.15),transparent 38%),
    linear-gradient(135deg,rgba(46,36,20,.64),rgba(8,17,32,.72));
}
.contact-route-card.support-route{
  border-color:rgba(112,174,255,.26);
  background:
    radial-gradient(circle at 80% 14%,rgba(112,174,255,.16),transparent 38%),
    linear-gradient(135deg,rgba(12,32,58,.72),rgba(8,17,32,.72));
}
.contact-route-summary{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.contact-route-summary span{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.060);
  color:rgba(244,237,223,.78);
  font-size:12px;
  font-weight:850;
}
body.contact-route-it .contact-card{
  border-color:rgba(112,174,255,.20);
  background:
    radial-gradient(circle at 80% 0%,rgba(112,174,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,17,32,.94),rgba(5,10,20,.90));
}
body.contact-route-it .send{
  background:linear-gradient(135deg,#7aaeff 0%,#bfd8ff 45%,#cfb173 100%);
}
body.contact-route-it .field input:focus,
body.contact-route-it .field textarea:focus{
  border-color:rgba(112,174,255,.52);
  box-shadow:0 0 0 4px rgba(112,174,255,.10), inset 0 1px 0 rgba(255,255,255,.04);
}
.theme-light .contact-route-card{
  color:var(--vs-light-text);
  border-color:rgba(129,99,48,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,247,234,.68));
  box-shadow:0 22px 46px rgba(94,72,35,.10);
}
.theme-light .contact-route-card em,
.theme-light .contact-route-summary span{
  color:var(--vs-light-muted);
}
.theme-light .contact-route-card.website-route,
.theme-light .contact-route-card.support-route{
  background:linear-gradient(135deg,rgba(255,252,246,.90),rgba(246,238,226,.78));
}
.theme-light .contact-route-summary span{
  background:rgba(255,255,255,.72);
  border-color:rgba(129,99,48,.12);
}
.theme-light.contact-route-it .contact-card{
  border-color:rgba(83,132,198,.18);
  background:
    radial-gradient(circle at 82% 0%,rgba(83,132,198,.13),transparent 34%),
    linear-gradient(180deg,rgba(255,252,246,.90),rgba(246,238,226,.86));
}
@media(max-width:820px){
  .contact-route-select{
    grid-template-columns:1fr;
  }
  .contact-route-card{
    min-height:190px;
    padding:22px;
  }
  .contact-route-summary{
    flex-direction:column;
  }
  .contact-route-summary span{
    width:100%;
  }
}
