/* =========================================================
   ELFATEC – KONTAKT 0.4.0
   Kundenvorlage: Hamburg-Hero + 3 Kontaktkarten + Formularcard
   TYPO3 Form Framework c144 bleibt unverändert/funktional.
   ========================================================= */
.page-7{
  --elf-blue:#0093F5;--elf-blue-dark:#007dce;--elf-navy:#082c49;
  --elf-text:#17212b;--elf-muted:#68737d;--elf-border:#dce5eb;
}
.page-7 main{overflow:hidden}
.page-7 .elf-contact-stage{
  position:relative;left:50%;width:100vw;margin-left:-50vw;
  padding:52px 0 72px;
  background:
    linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.30)),
    url("/fileadmin/Media/Website/elfatec-startseite.jpeg") center 48%/cover no-repeat;
}
.page-7 .elf-contact-stage:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(238,247,252,.20));
  pointer-events:none
}
.page-7 .elf-contact-stage__inner{
  position:relative;z-index:1;width:min(1180px,88%);margin:auto
}
.page-7 .elf-contact-stage__head{
  max-width:760px;margin:0 auto 30px;text-align:center
}
.page-7 .elf-contact-stage__head h1{
  margin:0 0 12px;color:#111b25;font-size:clamp(2.15rem,3.6vw,3.7rem);
  line-height:1.06;font-weight:800;letter-spacing:-.035em
}
.page-7 .elf-contact-stage__head p{
  margin:0;color:#18242e;font-size:1.06rem;line-height:1.55;font-weight:500
}
.page-7 .elf-contact-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px
}
.page-7 .elf-contact-card{
  min-width:0;display:grid;grid-template-columns:54px minmax(0,1fr);gap:15px;
  padding:21px 20px;border:1px solid rgba(8,44,73,.10);border-radius:14px;
  background:rgba(255,255,255,.96);box-shadow:0 12px 28px rgba(8,44,73,.13)
}
.page-7 .elf-contact-card__icon,.page-7 .elf-contact-formintro__icon{
  width:54px;height:54px;display:grid;place-items:center;border-radius:11px;
  background:var(--elf-blue);box-shadow:0 7px 16px rgba(0,147,245,.22)
}
.page-7 .elf-contact-card__icon svg,.page-7 .elf-contact-formintro__icon svg{
  width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
.page-7 .elf-contact-card__eyebrow{
  display:block;margin:0 0 3px;color:var(--elf-blue);font-size:.7rem;
  line-height:1.2;font-weight:800;letter-spacing:.08em;text-transform:uppercase
}
.page-7 .elf-contact-card h2{
  margin:0 0 6px;color:#121d27;font-size:1.02rem;line-height:1.25;font-weight:800
}
.page-7 .elf-contact-card p,.page-7 .elf-contact-card address{
  margin:0;color:#35434f;font-size:.88rem;line-height:1.5;font-style:normal
}
.page-7 .elf-contact-card a{
  color:var(--elf-blue);font-size:1.08rem;font-weight:800;text-decoration:none
}
.page-7 .elf-contact-card a:hover{color:var(--elf-blue-dark)}
.page-7 .elf-contact-formwrap{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;
  padding:24px;border:1px solid rgba(8,44,73,.10);border-radius:15px;
  background:rgba(255,255,255,.97);box-shadow:0 14px 32px rgba(8,44,73,.14)
}
.page-7 .elf-contact-formintro{display:flex;gap:15px;align-items:flex-start}
.page-7 .elf-contact-formintro__icon{flex:0 0 54px;background:#e9f6ff}
.page-7 .elf-contact-formintro__icon svg{stroke:var(--elf-blue)}
.page-7 .elf-contact-formintro h2{
  margin:2px 0 6px;color:#111b25;font-size:1.35rem;line-height:1.2;font-weight:800
}
.page-7 .elf-contact-formintro p{
  margin:0 0 13px;color:#586773;font-size:.84rem;line-height:1.5
}
.page-7 .elf-contact-promises{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.page-7 .elf-contact-promises li{
  position:relative;padding-left:21px;color:#42515d;font-size:.78rem;line-height:1.35
}
.page-7 .elf-contact-promises li:before{
  content:"✓";position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;
  background:var(--elf-blue);color:#fff;font-size:10px;line-height:15px;text-align:center;font-weight:900
}

/* Echtes TYPO3 Form Framework – nur Darstellung */
.page-7 .elf-contact-formslot{min-width:0}
.page-7 .elf-contact-formslot .form-identifier-kontaktformular-144,
.page-7 .elf-contact-formslot #kontaktformular-144,
.page-7 .form-identifier-kontaktformular-144{
  margin:0!important;padding:0!important;border:0!important;background:transparent!important;
  box-shadow:none!important
}
.page-7 .form-identifier-kontaktformular-144 form{
  position:static;width:100%;max-width:none;margin:0;padding:0;
  background:transparent!important;border:0;border-radius:0;box-shadow:none;overflow:visible
}
.page-7 .form-identifier-kontaktformular-144 form:before{display:none!important}
.page-7 .form-identifier-kontaktformular-144 h2{display:none}
.page-7 .form-identifier-kontaktformular-144 .form-group,
.page-7 .form-identifier-kontaktformular-144 .mb-3,
.page-7 .form-identifier-kontaktformular-144 .form-element{margin-bottom:10px}
.page-7 .form-identifier-kontaktformular-144 .form-element-gridrow.row{
  --bs-gutter-x:12px;--bs-gutter-y:8px
}
.page-7 .form-identifier-kontaktformular-144 label,
.page-7 .form-identifier-kontaktformular-144 .form-label,
.page-7 .form-identifier-kontaktformular-144 legend{
  margin-bottom:4px;color:#26333e!important;font-size:.74rem;font-weight:700!important
}
.page-7 .form-identifier-kontaktformular-144 input[type="text"],
.page-7 .form-identifier-kontaktformular-144 input[type="email"],
.page-7 .form-identifier-kontaktformular-144 input[type="tel"],
.page-7 .form-identifier-kontaktformular-144 input[type="number"],
.page-7 .form-identifier-kontaktformular-144 input[type="date"],
.page-7 .form-identifier-kontaktformular-144 select,
.page-7 .form-identifier-kontaktformular-144 textarea,
.page-7 .form-identifier-kontaktformular-144 .form-control,
.page-7 .form-identifier-kontaktformular-144 .form-select{
  width:100%;min-height:42px;padding:9px 11px;box-sizing:border-box;
  border:1px solid #d5dee5;border-radius:6px;background:#fff;color:#25313b;
  font-size:.82rem;line-height:1.35;outline:none;box-shadow:none
}
.page-7 .form-identifier-kontaktformular-144 textarea,
.page-7 .form-identifier-kontaktformular-144 textarea.form-control{min-height:92px;resize:vertical}
.page-7 .form-identifier-kontaktformular-144 input:focus,
.page-7 .form-identifier-kontaktformular-144 select:focus,
.page-7 .form-identifier-kontaktformular-144 textarea:focus{
  border-color:var(--elf-blue);box-shadow:0 0 0 3px rgba(0,147,245,.11)
}
.page-7 .form-identifier-kontaktformular-144 .form-check{
  display:flex;align-items:flex-start;gap:8px;margin:4px 0 10px;padding:0
}
.page-7 .form-identifier-kontaktformular-144 .form-check-input,
.page-7 .form-identifier-kontaktformular-144 input[type="checkbox"]{
  flex:0 0 16px;width:16px;height:16px;margin:2px 0 0;accent-color:var(--elf-blue)
}
.page-7 .form-identifier-kontaktformular-144 .form-check-label{
  margin:0;color:#5c6872!important;font-size:.72rem;font-weight:400!important
}
.page-7 .form-identifier-kontaktformular-144 .form-actions{
  display:flex;justify-content:flex-end;margin-top:5px
}
.page-7 .form-identifier-kontaktformular-144 button[type="submit"],
.page-7 .form-identifier-kontaktformular-144 input[type="submit"],
.page-7 .form-identifier-kontaktformular-144 .btn-primary{
  min-height:42px;padding:9px 22px;border:1px solid var(--elf-blue)!important;
  border-radius:6px!important;background:var(--elf-blue)!important;color:#fff!important;
  font-size:.8rem;font-weight:800;box-shadow:0 6px 14px rgba(0,147,245,.20)!important
}
.page-7 .form-identifier-kontaktformular-144 button[type="submit"]:hover,
.page-7 .form-identifier-kontaktformular-144 input[type="submit"]:hover,
.page-7 .form-identifier-kontaktformular-144 .btn-primary:hover{
  background:var(--elf-blue-dark)!important;border-color:var(--elf-blue-dark)!important
}

/* Tablet */
@media(max-width:991.98px){
  .page-7 .elf-contact-stage{padding:44px 0 56px;background-position:center center}
  .page-7 .elf-contact-stage__inner{width:min(760px,90%)}
  .page-7 .elf-contact-cards{grid-template-columns:1fr;gap:12px}
  .page-7 .elf-contact-card{grid-template-columns:50px minmax(0,1fr);padding:17px 18px}
  .page-7 .elf-contact-card__icon{width:50px;height:50px}
  .page-7 .elf-contact-formwrap{grid-template-columns:1fr;gap:22px}
  .page-7 .elf-contact-formintro{max-width:560px}
}

/* Mobile / 320px */
@media(max-width:767.98px){
  .page-7 .elf-contact-stage{padding:34px 0 42px}
  .page-7 .elf-contact-stage__inner{width:calc(100% - 28px)}
  .page-7 .elf-contact-stage__head{margin-bottom:22px}
  .page-7 .elf-contact-stage__head h1{font-size:clamp(2rem,10vw,2.65rem)}
  .page-7 .elf-contact-stage__head p{font-size:.95rem}
  .page-7 .elf-contact-card{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:15px}
  .page-7 .elf-contact-card__icon{width:44px;height:44px;border-radius:9px}
  .page-7 .elf-contact-card__icon svg{width:22px;height:22px}
  .page-7 .elf-contact-formwrap{padding:17px 15px;border-radius:12px}
  .page-7 .elf-contact-formintro{gap:12px}
  .page-7 .elf-contact-formintro__icon{width:46px;height:46px;flex-basis:46px}
  .page-7 .elf-contact-formintro h2{font-size:1.2rem}
  .page-7 .form-identifier-kontaktformular-144 input,
  .page-7 .form-identifier-kontaktformular-144 select,
  .page-7 .form-identifier-kontaktformular-144 textarea{font-size:16px}
  .page-7 .form-identifier-kontaktformular-144 .form-actions{justify-content:stretch}
  .page-7 .form-identifier-kontaktformular-144 button[type="submit"],
  .page-7 .form-identifier-kontaktformular-144 input[type="submit"],
  .page-7 .form-identifier-kontaktformular-144 .btn-primary{width:100%}
}
@media(max-width:359.98px){
  .page-7 .elf-contact-stage__inner{width:calc(100% - 20px)}
  .page-7 .elf-contact-formwrap{padding:14px 11px}
}

/* 0.4.1 – echtes TYPO3-Formular wird per Sitepackage-JS in den Slot verschoben */
.page-7 .elf-contact-formslot>.frame{
  margin:0!important;padding:0!important;background:transparent!important;
}
.page-7 .elf-contact-formslot>.frame>.frame-group-container,
.page-7 .elf-contact-formslot>.frame>.frame-group-container>.frame-group-inner,
.page-7 .elf-contact-formslot>.frame>.frame-group-container>.frame-group-inner>.frame-container,
.page-7 .elf-contact-formslot>.frame>.frame-group-container>.frame-group-inner>.frame-container>.frame-inner{
  width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
}