/* =======================================================
   RHEINGAU BIKES — kontakt.css (Clean Panel v5)
   Scope: .rb-kontakt5
   Präfix: rbk5-
   ======================================================= */

.rb-kontakt5{
  --line:#E2E5EA;
  --text:#121318;
  --muted:#6B7280;

  --accent:#7B3FF2;
  --accent-2:#5A2ED9;
  --accent-soft: rgba(123,63,242,.10);

  --ease:cubic-bezier(.22,.61,.36,1);

  --shadow-1: 0 12px 34px rgba(15, 23, 42, .10);
  --shadow-2: 0 22px 60px rgba(15, 23, 42, .16);

  --radius: 22px;
  --radius-sm: 16px;

  --field-bg: #F7F8FB;
  --field-border: rgba(15,23,42,.10);

  color: var(--text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.rb-kontakt5.rbk5-wrap{
  position: relative;
  padding-top: clamp(1.6rem, 3vw, 2.6rem);
  padding-bottom: clamp(2.1rem, 3.5vw, 3.1rem);
}

.rb-kontakt5.rbk5-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1100px 520px at 12% 0%, rgba(123,63,242,.09), transparent 58%),
    radial-gradient(900px 520px at 100% 14%, rgba(90,46,217,.07), transparent 58%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F7FB 100%);
  pointer-events:none;
}

.rb-kontakt5 .rbk5-shell{
  display:flex;
  justify-content:center;
}

.rb-kontakt5 .rbk5-panel{
  width: min(900px, 100%);
  background: #fff;
  border: 1px solid rgba(226,229,234,.92);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.rb-kontakt5 .rbk5-head{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(226,229,234,.92);
  background:
    linear-gradient(180deg, rgba(123,63,242,.08), rgba(255,255,255,0)),
    #fff;
}

.rb-kontakt5 .rbk5-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 2.0vw, 1.65rem);
  line-height: 1.1;
}

.rb-kontakt5 .rbk5-sub{
  margin: .45rem 0 0;
  color: var(--muted);
  font-weight: 650;
  font-size: .98rem;
}

.rb-kontakt5 .rbk5-body{
  padding: 18px;
}

/* Alerts */
.rb-kontakt5 .rbk5-alert{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(15,23,42,.08);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.rb-kontakt5 .rbk5-alert--ok{
  border-color: rgba(22,163,74,.24);
  background: linear-gradient(180deg, rgba(22,163,74,.10), #fff);
}

.rb-kontakt5 .rbk5-alert--warn{
  border-color: rgba(245,158,11,.28);
  background: linear-gradient(180deg, rgba(245,158,11,.12), #fff);
}

.rb-kontakt5 .rbk5-alert ul{
  margin: 8px 0 0;
  padding-left: 1.1rem;
}

/* Labels + Fields */
.rb-kontakt5 .rbk5-label{
  display:inline-block;
  font-weight: 900;
  font-size: .92rem;
  color: var(--text);
  margin-bottom: 6px;
}

.rb-kontakt5 .rbk5-field{
  width: 100%;
  border: 1px solid var(--field-border);
  border-radius: 18px;
  background: var(--field-bg);
  color: var(--text);
  padding: .78rem .96rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

.rb-kontakt5 .rbk5-field:hover{
  border-color: rgba(15,23,42,.14);
  background: #f4f6fb;
}

.rb-kontakt5 .rbk5-field:focus{
  outline: none;
  border-color: rgba(123,63,242,.35);
  box-shadow: 0 0 0 .26rem rgba(123,63,242,.14);
  background: #fff;
}

.rb-kontakt5 textarea.rbk5-field{
  min-height: 170px;
  resize: vertical;
}

.rb-kontakt5 input[type="file"].rbk5-field{
  padding: .66rem .85rem;
}

.rb-kontakt5 input[type="file"].rbk5-field::file-selector-button{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  padding: .40rem .76rem;
  margin-right: .7rem;
  background: #fff;
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.rb-kontakt5 input[type="file"].rbk5-field::file-selector-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15,23,42,.12);
  border-color: rgba(123,63,242,.22);
}

/* Consent */
.rb-kontakt5 .rbk5-consent{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px dashed rgba(15,23,42,.14);
  background: rgba(255,255,255,.75);
}

.rb-kontakt5 .rbk5-consent-label{
  color: var(--muted);
  font-weight: 750;
}

/* Actions */
.rb-kontakt5 .rbk5-actions{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 992px){
  .rb-kontakt5 .rbk5-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .rb-kontakt5 .rbk5-actions{ grid-template-columns: 1fr; }
}

.rb-kontakt5 .rbk5-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;

  min-height: 50px;
  width: 100%;

  font-weight: 900;
  text-decoration:none;
  font-size: .95rem;

  padding: .62rem .92rem;
  border-radius: 999px;

  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  color: var(--text);

  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), opacity .18s var(--ease);
}

.rb-kontakt5 .rbk5-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(15,23,42,.12);
  border-color: rgba(15,23,42,.14);
}

.rb-kontakt5 .rbk5-btn:active{
  transform: translateY(1px);
}

.rb-kontakt5 .rbk5-btn--primary{
  border-color: rgba(123,63,242,.28);
  background: linear-gradient(135deg, rgba(123,63,242,.18), rgba(123,63,242,.06));
}

.rb-kontakt5 .rbk5-btn--primary i{ color: var(--accent); }

.rb-kontakt5 .rbk5-btn--wa{
  border-color: rgba(34,197,94,.25);
  background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(34,197,94,.05));
}

/* Disabled submit */
.rb-kontakt5 .rbk5-btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.rb-kontakt5 .rbk5-btn[disabled]:hover{
  transform: none;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.10);
}

/* Hint below actions */
.rb-kontakt5 .rbk5-note{
  margin-top: 12px;
  color: var(--muted);
  font-size: .92rem;
}

/* Mobile spacing */
@media (max-width: 576px){
  .rb-kontakt5 .rbk5-body{ padding: 14px; }
  .rb-kontakt5 .rbk5-head{ padding: 14px 14px 12px; }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  .rb-kontakt5 *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* =======================================================
   RHEINGAU BIKES — Kontakt Redesign
   ======================================================= */

body{ background:#080a0e; }

.rb-contact-hero{
  position:relative;
  overflow:hidden;
  background:#151515;
  color:#fff;
  padding:clamp(118px,13vw,168px) 0 78px;
}
.rb-contact-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,#151515 0%,rgba(21,21,21,.78) 48%,rgba(21,21,21,.34) 100%),
    url('/assets/images/ducati-background.png') center right/cover no-repeat;
  opacity:.86;
}
.rb-contact-hero::after{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-1px;
  height:136px;
  background:#d63b3b;
  clip-path:polygon(0 58%,35% 78%,100% 38%,100% 100%,0 100%);
}
.rb-contact-hero .container{
  position:relative;
  z-index:2;
}
.rb-contact-kicker{
  margin:0 0 14px;
  color:rgba(255,255,255,.56);
  font-size:12px;
  font-weight:900;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.rb-contact-hero h1{
  max-width:860px;
  margin:0;
  color:#fff;
  font-size:clamp(44px,8vw,88px);
  line-height:.94;
  font-weight:300;
  font-style:italic;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.rb-contact-hero p:not(.rb-contact-kicker){
  max-width:800px;
  margin:26px 0 0;
  color:rgba(255,255,255,.70);
  font-size:clamp(18px,2.1vw,24px);
  line-height:1.58;
}
.rb-contact-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
.rb-contact-pills span{
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.86);
  padding:9px 13px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.rb-kontakt5{
  --text:#fff;
  --muted:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.09);
  --accent:#d63b3b;
  --accent-2:#ff4b5f;
  --field-bg:#080a0e;
  --field-border:rgba(255,255,255,.12);
  color:#fff;
}
.rb-kontakt5.rbk5-wrap{
  max-width:1180px;
  padding-top:72px;
  padding-bottom:86px;
}
.rb-kontakt5.rbk5-wrap::before{ background:#080a0e; }
.rb-kontakt5 .rbk5-shell{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:22px;
  align-items:start;
}
.rb-kontakt5 .rbk5-side,
.rb-kontakt5 .rbk5-panel{
  border:1px solid rgba(255,255,255,.09);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)), #111318;
  box-shadow:0 28px 80px rgba(0,0,0,.34);
}
.rb-kontakt5 .rbk5-side{
  padding:24px;
  position:sticky;
  top:92px;
}
.rb-kontakt5 .rbk5-side h2{
  margin:0;
  color:#fff;
  font-size:clamp(30px,4.8vw,54px);
  line-height:1;
  font-weight:300;
  font-style:italic;
  letter-spacing:-.05em;
  text-transform:uppercase;
}
.rb-kontakt5 .rbk5-side p{
  margin:18px 0 0;
  color:rgba(255,255,255,.66);
  line-height:1.62;
}
.rb-kontakt5 .rbk5-side-list{
  display:grid;
  gap:12px;
  margin-top:22px;
}
.rb-kontakt5 .rbk5-side-list div{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.035);
  padding:13px;
}
.rb-kontakt5 .rbk5-side-list i{
  color:#ff6474;
  font-size:1.1rem;
}
.rb-kontakt5 .rbk5-side-list span{
  color:rgba(255,255,255,.72);
  font-weight:700;
}
.rb-kontakt5 .rbk5-panel{
  width:100%;
  overflow:hidden;
}
.rb-kontakt5 .rbk5-head{
  border-bottom:1px solid rgba(255,255,255,.09);
  background:radial-gradient(circle at 90% 0%,rgba(214,59,59,.22),transparent 28%), #111318;
  padding:22px;
}
.rb-kontakt5 .rbk5-title{
  color:#fff;
  font-size:clamp(28px,4vw,42px);
  font-weight:900;
}
.rb-kontakt5 .rbk5-body{ padding:22px; }
.rb-kontakt5 .rbk5-label{
  color:#fff;
  font-size:.86rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.rb-kontakt5 .rbk5-field{
  border-color:rgba(255,255,255,.12);
  background:#080a0e;
  color:#fff;
}
.rb-kontakt5 .rbk5-field:hover,
.rb-kontakt5 .rbk5-field:focus{
  border-color:rgba(255,75,95,.42);
  background:#080a0e;
}
.rb-kontakt5 .rbk5-field:focus{
  box-shadow:0 0 0 .24rem rgba(214,59,59,.14);
}
.rb-kontakt5 .rbk5-field::placeholder{ color:rgba(255,255,255,.36); }
.rb-kontakt5 .rbk5-consent{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
}
.rb-kontakt5 .rbk5-btn{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#fff;
  box-shadow:none;
}
.rb-kontakt5 .rbk5-btn--primary{
  border-color:rgba(255,75,95,.50);
  background:#d63b3b;
}
.rb-kontakt5 .rbk5-btn i{ color:#ff6474; }
.rb-kontakt5 .rbk5-btn--primary i{ color:#fff; }
.rb-kontakt5 .rbk5-btn--wa{
  border-color:rgba(34,197,94,.28);
  background:rgba(34,197,94,.10);
}
.rb-kontakt5 .rbk5-alert{
  border-color:rgba(255,255,255,.10);
  background:#111318;
  color:#fff;
}
@media (max-width: 991.98px){
  .rb-kontakt5 .rbk5-shell{ grid-template-columns:1fr; }
  .rb-kontakt5 .rbk5-side{ position:static; }
}

/* Minimal Premium Overrides */
.rb-kontakt5 .rbk5-side,
.rb-kontakt5 .rbk5-panel,
.rb-kontakt5 .rbk5-side-list div,
.rb-kontakt5 .rbk5-consent,
.rb-kontakt5 .rbk5-field,
.rb-kontakt5 .rbk5-btn{
  border-radius:0 !important;
  box-shadow:none !important;
}

.rb-kontakt5 .rbk5-side,
.rb-kontakt5 .rbk5-panel{
  background:transparent !important;
  border-left:0 !important;
  border-right:0 !important;
}

.rb-kontakt5 .rbk5-side-list{
  gap:0 !important;
  border-top:1px solid rgba(255,255,255,.12);
}

.rb-kontakt5 .rbk5-side-list div{
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  background:transparent !important;
  padding:14px 0 !important;
}

.rb-kontakt5 .rbk5-btn--primary{
  background:transparent !important;
  border:0 !important;
  border-bottom:2px solid #d63b3b !important;
}

/* Ultra Clean Contact Layer */
.rb-contact-hero{
  min-height:auto !important;
  padding:clamp(124px,12vw,162px) 0 clamp(54px,7vw,86px) !important;
  background:#08090b !important;
}

.rb-contact-hero::before{
  opacity:.42 !important;
  filter:grayscale(.18) contrast(.96) brightness(.72) !important;
}

.rb-contact-pills{
  gap:0 !important;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  width:min(100%,760px);
}

.rb-contact-pills span{
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.10) !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:12px 16px !important;
}

.rb-kontakt5.rbk5-wrap{
  padding-top:clamp(54px,7vw,88px) !important;
  padding-bottom:clamp(64px,8vw,104px) !important;
}

.rb-kontakt5 .rbk5-shell{
  gap:clamp(24px,4vw,56px) !important;
}

.rb-kontakt5 .rbk5-head{
  background:transparent !important;
}

.rb-kontakt5 .rbk5-panel,
.rb-kontakt5 .rbk5-side{
  border-top:1px solid rgba(255,255,255,.12) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}

.rb-kontakt5 .rbk5-field,
.rb-kontakt5 .rbk5-consent{
  background:transparent !important;
  border-color:rgba(255,255,255,.12) !important;
}

@media (max-width:640px){
  .rb-contact-pills{
    display:grid !important;
  }
  .rb-contact-pills span{
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
  }
}

/* Premium Moto Details fuer Kontakt */
.rb-contact-hero .container::after{
  content:"";
  display:block;
  width:min(360px,72vw);
  height:4px;
  margin-top:22px;
  background:linear-gradient(90deg,#d84a3a 0 34%,rgba(255,255,255,.72) 34% 38%,transparent 38%);
  clip-path:polygon(0 0,100% 0,94% 100%,0 100%);
}

.rb-kontakt5 .rbk5-panel,
.rb-kontakt5 .rbk5-side,
.rb-kontakt5 .rbk5-field,
.rb-kontakt5 .rbk5-btn,
.rb-contact-pills span{
  position:relative;
  overflow:hidden;
}

.rb-kontakt5 .rbk5-panel::after,
.rb-kontakt5 .rbk5-side::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.020) 0 1px,transparent 1px 18px),
    radial-gradient(circle at 100% 0,rgba(216,74,58,.075),transparent 32%);
}

.rb-kontakt5 .rbk5-panel > *,
.rb-kontakt5 .rbk5-side > *{
  position:relative;
  z-index:1;
}

.rb-kontakt5 .rbk5-btn::after,
.rb-contact-pills span::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-45%;
  width:36%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:skewX(-18deg);
  opacity:0;
  pointer-events:none;
}

.rb-kontakt5 .rbk5-btn:hover::after,
.rb-contact-pills span:hover::after{
  animation:rbContactSweep .72s ease both;
}

@keyframes rbContactSweep{
  0%{left:-45%;opacity:0}
  20%{opacity:.8}
  100%{left:110%;opacity:0}
}

@media (max-width:640px){
  .rb-contact-hero .container::after{
    width:min(290px,78vw);
    height:3px;
    margin-top:16px;
  }
}

/* Mobile Fix: Kontakt-Info darf nicht ins Formular laufen */
@media (max-width:640px){
  .rb-kontakt5.rbk5-wrap{
    display:block !important;
    padding-top:42px !important;
    padding-bottom:72px !important;
  }

  .rb-kontakt5 .rbk5-shell{
    display:flex !important;
    flex-direction:column !important;
    gap:34px !important;
    align-items:stretch !important;
  }

  .rb-kontakt5 .rbk5-side,
  .rb-kontakt5 .rbk5-panel{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    position:relative !important;
    transform:none !important;
  }

  .rb-kontakt5 .rbk5-side{
    padding:0 0 30px !important;
    border-bottom:1px solid rgba(255,255,255,.16) !important;
  }

  .rb-kontakt5 .rbk5-side h2{
    max-width:10.8ch;
    font-size:39px !important;
    line-height:1.04 !important;
    letter-spacing:-.04em !important;
  }

  .rb-kontakt5 .rbk5-side p{
    margin-top:20px !important;
    font-size:18px !important;
    line-height:1.55 !important;
  }

  .rb-kontakt5 .rbk5-side-list{
    display:grid !important;
    gap:0 !important;
    margin-top:28px !important;
    border-top:1px solid rgba(255,255,255,.12);
  }

  .rb-kontakt5 .rbk5-side-list div{
    display:grid !important;
    grid-template-columns:32px minmax(0,1fr) !important;
    gap:12px !important;
    align-items:start !important;
    min-height:auto !important;
    padding:18px 0 !important;
  }

  .rb-kontakt5 .rbk5-side-list i{
    width:26px;
    min-width:26px;
    padding-top:2px;
    font-size:22px !important;
    line-height:1 !important;
  }

  .rb-kontakt5 .rbk5-side-list span{
    display:block !important;
    min-width:0 !important;
    color:rgba(255,255,255,.74) !important;
    font-size:20px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    overflow-wrap:break-word !important;
  }

  .rb-kontakt5 .rbk5-panel{
    clear:both !important;
    margin-top:0 !important;
    border-top:1px solid rgba(255,255,255,.16) !important;
  }

  .rb-kontakt5 .rbk5-head{
    padding:24px 0 18px !important;
  }

  .rb-kontakt5 .rbk5-title{
    font-size:38px !important;
    line-height:1 !important;
  }

  .rb-kontakt5 .rbk5-sub{
    max-width:24ch;
    font-size:18px !important;
    line-height:1.45 !important;
  }

  .rb-kontakt5 .rbk5-body{
    padding:22px 0 0 !important;
  }
}

@media (max-width:380px){
  .rb-kontakt5 .rbk5-side h2,
  .rb-kontakt5 .rbk5-title{
    font-size:34px !important;
  }

  .rb-kontakt5 .rbk5-side-list span{
    font-size:18px !important;
  }
}