/* =============================================
   nicresell.de – Hauptstylesheet (index)
   ============================================= */

:root {
  --blue:       #0b66c3;
  --blue-dark:  #0a3d78;
  --green:      #2dbb3f;
  --green-dark: #169c2f;
  --text:       #142033;
  --muted:      #627086;
  --line:       #e7edf5;
  --card:       #ffffff;
  --shadow:     0 20px 60px rgba(20,32,51,.08);
  --radius:     28px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
  height:     100%;
}

body {
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 20%, rgba(11,102,195,.08), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(45,187,63,.08),  transparent 24%),
    radial-gradient(circle at 80% 80%, rgba(11,102,195,.06), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  min-height: 100%;
  overflow:   visible;
}

/* ── Background shapes ───────────────────────── */
.bg-shape {
  position:       fixed;
  border-radius:  50%;
  filter:         blur(20px);
  opacity:        .45;
  animation:      float 11s ease-in-out infinite;
  pointer-events: none;
  will-change:    transform;
  z-index:        0;
}
.bg-1 {
  width:  260px; height: 260px;
  background: rgba(11,102,195,.12);
  top: -60px; left: -40px;
}
.bg-2 {
  width:  220px; height: 220px;
  background: rgba(45,187,63,.12);
  right: -40px; top: 90px;
  animation-delay: -2s;
}
.bg-3 {
  width:  200px; height: 200px;
  background: rgba(11,102,195,.08);
  right: 18%; bottom: -70px;
  animation-delay: -5s;
}

/* ── Page layout ─────────────────────────────── */
.page {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         40px 18px;
  position:        relative;
  z-index:         1;
}

@media (max-height: 700px) {
  .page { align-items: flex-start; padding-top: 20px; }
}

/* ── Card ────────────────────────────────────── */
.card {
  width:           100%;
  max-width:       980px;
  background:      rgba(255,255,255,.84);
  backdrop-filter: blur(10px);
  border:          1px solid rgba(231,237,245,.9);
  border-radius:   var(--radius);
  box-shadow:      var(--shadow);
  overflow:        hidden;
  position:        relative;
}
.card::before {
  content:   "";
  position:  absolute;
  inset:     0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.65) 35%, transparent 50%);
  transform:  translateX(-120%);
  animation:  sheen 7s linear infinite;
  pointer-events: none;
}

/* ── Grid ────────────────────────────────────── */
.content {
  display:               grid;
  grid-template-columns: 1.05fr .95fr;
  gap:                   0;
}
.left, .right {
  padding:  54px 48px;
  position: relative;
}
.left {
  border-right: 1px solid var(--line);
}

/* ── Eyebrow badge ───────────────────────────── */
.eyebrow {
  display:       inline-flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 16px;
  border:        1px solid #dce7f3;
  border-radius: 999px;
  background:    #fff;
  color:         var(--blue-dark);
  font-size:     14px;
  font-weight:   700;
  letter-spacing:.02em;
  margin-bottom: 22px;
  box-shadow:    0 8px 30px rgba(11,102,195,.06);
}
.dot {
  width:  10px; height: 10px;
  border-radius: 50%;
  background:    var(--green);
  box-shadow:    0 0 0 0 rgba(45,187,63,.6);
  animation:     pulse 2s infinite;
}

/* ── Logo ────────────────────────────────────── */
.logo-wrap {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-height:      120px;
  margin-bottom:   18px;
}
.logo-wrap img {
  max-width: 340px;
  width:     100%;
  height:    auto;
  display:   block;
  animation: logoFloat 5.8s ease-in-out infinite;
  filter:    drop-shadow(0 12px 26px rgba(11,102,195,.10));
}

/* ── Headline ────────────────────────────────── */
h1 {
  font-size:      clamp(1.4rem, 3vw, 2.4rem);
  line-height:    1.02;
  letter-spacing: -.03em;
  margin-bottom:  18px;
}
.accent {
  background:              linear-gradient(90deg, var(--blue), var(--green));
  -webkit-background-clip: text;
  background-clip:         text;
  color:                   transparent;
}

/* ── Lead text ───────────────────────────────── */
.lead {
  font-size:     1.08rem;
  line-height:   1.75;
  color:         var(--muted);
  max-width:     560px;
  margin-bottom: 28px;
}

/* ── Status pills ────────────────────────────── */
.status-row {
  display:       flex;
  flex-wrap:     wrap;
  gap:           12px;
  margin-bottom: 24px;
}
.status-pill {
  padding:       12px 16px;
  border-radius: 999px;
  background:    #fff;
  border:        1px solid var(--line);
  color:         var(--text);
  font-size:     .95rem;
  box-shadow:    0 8px 30px rgba(20,32,51,.04);
}

/* ── Progress card ───────────────────────────── */
.progress-card {
  background:    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border:        1px solid var(--line);
  border-radius: 22px;
  padding:       18px 18px 16px;
  box-shadow:    0 12px 30px rgba(20,32,51,.04);
  max-width:     520px;
}
.progress-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   12px;
  font-size:       .95rem;
  color:           var(--muted);
  font-weight:     600;
}
.bar {
  height:        14px;
  background:    #eaf1f8;
  border-radius: 999px;
  overflow:      hidden;
  position:      relative;
}
.bar > span {
  display:       block;
  height:        100%;
  width:         75%;
  border-radius: 999px;
  background:    linear-gradient(90deg, var(--blue), var(--green));
  position:      relative;
  animation:     progressBreath 3s ease-in-out infinite;
}
.bar > span::after {
  content:   "";
  position:  absolute;
  top:       0; right: -30px;
  width:     70px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:  barShine 2.8s linear infinite;
}
.subnote {
  margin-top: 10px;
  color:      var(--muted);
  font-size:  .92rem;
}

/* ── Right column ────────────────────────────── */
.right {
  display:        flex;
  flex-direction: column;
  justify-content:flex-start;
  background:
    linear-gradient(180deg, rgba(11,102,195,.03), rgba(45,187,63,.03));
}

/* ── Panels ──────────────────────────────────── */
.panel {
  background:    #fff;
  border:        1px solid var(--line);
  border-radius: 24px;
  padding:       24px;
  box-shadow:    0 12px 30px rgba(20,32,51,.05);
  margin-bottom: 16px;
}
.panel h2 {
  font-size:     1.1rem;
  margin-bottom: 10px;
}
.panel p {
  color:       var(--muted);
  line-height: 1.65;
  font-size:   .98rem;
}

/* ── Checklist ───────────────────────────────── */
.checklist {
  list-style:  none;
  margin-top:  14px;
  display:     grid;
  gap:         12px;
}
.checklist li {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  color:       var(--text);
  font-size:   .97rem;
}
.check {
  flex:          0 0 24px;
  width:  24px; height: 24px;
  border-radius: 50%;
  background:    linear-gradient(180deg, #eaf7ed, #dff5e4);
  color:         var(--green-dark);
  display:       grid;
  place-items:   center;
  font-weight:   900;
  margin-top:    1px;
}

/* ── Footer ──────────────────────────────────── */
.footer {
  padding:         0 48px 34px;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             20px;
  flex-wrap:       wrap;
  color:           var(--muted);
  font-size:       .94rem;
}
.links {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
}
.links a {
  color:           var(--blue-dark);
  text-decoration: none;
  font-weight:     700;
  position:        relative;
}
.links a::after {
  content:    "";
  position:   absolute;
  left:       0; bottom: -3px;
  width:      0; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width .28s ease;
}
.links a:hover::after,
.links a:focus-visible::after { width: 100%; }

/* ── Keyframe animations ─────────────────────── */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(45,187,63,.45); }
  70%  { box-shadow: 0 0 0 11px rgba(45,187,63,0); }
  100% { box-shadow: 0 0 0 0   rgba(45,187,63,0); }
}
@keyframes float {
  0%,100% { transform: translate3d(0px, 0px, 0); }
  50%      { transform: translate3d(8px, 16px, 0); }
}
@keyframes sheen {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(140%); }
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes progressBreath {
  0%,100% { transform: scaleY(1);    filter: saturate(1); }
  50%      { transform: scaleY(1.04); filter: saturate(1.08); }
}
@keyframes barShine {
  0%   { transform: translateX(-90px); }
  100% { transform: translateX(180px); }
}
@keyframes cardLift {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── Contact form ────────────────────────────── */
.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-top:     16px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-field {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  position:       relative;
}
.form-field label {
  font-size:      .78rem;
  font-weight:    700;
  color:          var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.form-field input,
.form-field textarea {
  font-family:   inherit;
  font-size:     .93rem;
  color:         var(--text);
  background:    #f4f8fd;
  border:        1.5px solid var(--line);
  border-radius: 14px;
  padding:       10px 14px;
  outline:       none;
  transition:    border-color .22s, box-shadow .22s, background .22s;
  resize:        none;
  width:         100%;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #aab4c0;
}
.form-field input:hover,
.form-field textarea:hover {
  border-color: #c4d6ee;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--blue);
  box-shadow:   0 0 0 3px rgba(11,102,195,.11);
  background:   #fff;
}
.form-field.has-error input,
.form-field.has-error textarea {
  border-color: #d94f4f;
  box-shadow:   0 0 0 3px rgba(217,79,79,.10);
}
.field-error {
  font-size:  .76rem;
  color:      #d94f4f;
  font-weight:600;
  margin-top: 2px;
  display:    none;
}
.form-field.has-error .field-error { display: block; }

.form-field textarea {
  min-height: 82px;
  line-height: 1.55;
}

/* send button */
.btn-send {
  align-self:    flex-start;
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       11px 26px;
  border:        none;
  border-radius: 999px;
  background:    linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
  color:         #fff;
  font-family:   inherit;
  font-size:     .93rem;
  font-weight:   700;
  cursor:        pointer;
  transition:    opacity .2s, transform .15s, box-shadow .2s;
  box-shadow:    0 6px 22px rgba(11,102,195,.22);
  margin-top:    4px;
  letter-spacing:.01em;
}
.btn-send:hover  { opacity: .9; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(11,102,195,.26); }
.btn-send:active { transform: translateY(0); }
.btn-send:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-send .btn-spinner {
  display:       none;
  width:         15px; height: 15px;
  border:        2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation:     spin .7s linear infinite;
}
.btn-send.loading .btn-spinner { display: block; }
.btn-send.loading .btn-label   { opacity: .7; }
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* success / error banners */
.form-banner {
  display:       none;
  align-items:   center;
  gap:           10px;
  padding:       12px 16px;
  border-radius: 14px;
  font-weight:   600;
  font-size:     .92rem;
  margin-top:    4px;
}
.form-banner.visible   { display: flex; }
.form-banner.success {
  background: linear-gradient(135deg, #eaf7ed, #d6f2db);
  border:     1px solid #a8ddb0;
  color:      var(--green-dark);
}
.form-banner.error {
  background: #fff4f4;
  border:     1px solid #f5c0c0;
  color:      #b03030;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 900px) {
  body { overflow: auto; }
  .content { grid-template-columns: 1fr; }
  .left { border-right: 0; border-bottom: 1px solid var(--line); }
  .left, .right, .footer { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 560px) {
  .left, .right { padding-top: 28px; padding-bottom: 28px; }
  .footer { padding-bottom: 24px; }
  .logo-wrap img { max-width: 260px; }
  .status-row { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
}