/* ════════════════════════════════════════
   REINEMACHEREI – FARBPALETTE (Logo-Farben)
   Primärblau  : #5365a8
   Dunkelblau  : #3a4d8f
   Hellblau    : #7b8ec4
   Akzent Gold : #f5c842
   Hintergrund : #f0f4ff  (sehr helles Blau-Weiss)
   Weiss       : #ffffff
   Text dunkel : #1e2a4a
   Text mittel : #4a5570
   Text hell   : #8a93b2
════════════════════════════════════════ */

:root {
  --primary:    #5365a8;
  --primary-dk: #3a4d8f;
  --primary-lt: #7b8ec4;
  --primary-xl: #c5cde8;
  --accent:     #f5c842;
  --accent-dk:  #d4a820;
  --bg:         #f0f4ff;
  --bg-card:    #ffffff;
  --bg-section: #e8edf8;
  --text:       #1e2a4a;
  --text-mid:   #4a5570;
  --text-light: #8a93b2;
  --border:     #d0d8f0;
  --white:      #ffffff;
  --shadow:     0 4px 24px rgba(83,101,168,0.12);
  --shadow-lg:  0 8px 40px rgba(83,101,168,0.18);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ════════════════════════════════════════
   NAV
════════════════════════════════════════ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0.9rem 4rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(83,101,168,0.08);
}
.nav-logo img { height:42px; width:auto; display:block; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a {
  color: var(--text-mid); text-decoration:none;
  font-size:.88rem; font-weight:500; letter-spacing:.03em; text-transform:uppercase;
  transition: color .2s;
}
.nav-links a:hover { color: var(--primary); }
.nav-cta {
  padding: .5rem 1.4rem;
  background: var(--primary); color: var(--white);
  border:none; border-radius:50px;
  font-size:.88rem; font-weight:600; cursor:pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(83,101,168,0.3);
  text-decoration: none;
}
.nav-cta:hover { background:var(--primary-dk); transform:translateY(-1px); box-shadow:0 6px 20px rgba(83,101,168,0.4); }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
footer {
  background: var(--primary-dk);
  color: rgba(255,255,255,0.85);
  padding: 2.5rem 4rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.footer-logo img { height:36px; opacity:.9; filter:brightness(1.2); }
.footer-copy { font-size:.8rem; color:rgba(255,255,255,0.5); }
.footer-links { display:flex; gap:2rem; list-style:none; }
.footer-links a { font-size:.82rem; color:rgba(255,255,255,0.55); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--accent); }

/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.btn-primary {
  display:inline-block; padding:.85rem 2.2rem;
  background: var(--primary); color:var(--white);
  border:none; border-radius:50px; cursor:pointer;
  font-size:1rem; font-weight:600; letter-spacing:.02em;
  box-shadow: 0 6px 24px rgba(83,101,168,0.35);
  transition: background .2s, transform .2s, box-shadow .2s;
  text-decoration:none;
}
.btn-primary:hover { background:var(--primary-dk); transform:translateY(-2px); box-shadow:0 10px 32px rgba(83,101,168,0.4); }
.btn-outline {
  display:inline-block; padding:.85rem 2.2rem;
  background:transparent; color:var(--primary);
  border:2px solid var(--primary); border-radius:50px; cursor:pointer;
  font-size:1rem; font-weight:600; letter-spacing:.02em;
  transition: all .2s; text-decoration:none;
}
.btn-outline:hover { background:var(--primary); color:var(--white); transform:translateY(-2px); }

/* ════════════════════════════════════════
   SECTION LABELS & TITLES
════════════════════════════════════════ */
.section-label {
  display:inline-block;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--primary); background:rgba(83,101,168,0.1);
  padding:.3rem .9rem; border-radius:50px; margin-bottom:1rem;
}
.section-title {
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700; line-height:1.15; color:var(--text);
  margin-bottom:1rem;
}
.section-title em { font-style:normal; color:var(--primary); }
.section-body { color:var(--text-mid); font-size:1rem; line-height:1.75; max-width:540px; }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 8rem 2rem 5rem;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(83,101,168,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(83,101,168,0.10) 0%, transparent 55%),
    var(--bg);
  position:relative; overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 60px,
    rgba(83,101,168,0.025) 60px, rgba(83,101,168,0.025) 61px
  ),
  repeating-linear-gradient(
    90deg, transparent, transparent 60px,
    rgba(83,101,168,0.025) 60px, rgba(83,101,168,0.025) 61px
  );
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.38rem 1.1rem;
  background:rgba(83,101,168,0.1); border:1px solid rgba(83,101,168,0.2);
  border-radius:50px; font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--primary);
  margin-bottom:2rem; position:relative; z-index:1;
  animation: fadeUp .7s ease both;
}
.hero-badge .dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,200,66,.6); }
  50%      { box-shadow: 0 0 0 6px rgba(245,200,66,0); }
}
h1 {
  font-size: clamp(2.8rem, 6.5vw, 5.8rem);
  font-weight:800; line-height:1.05; letter-spacing:-.03em;
  color: var(--text); position:relative; z-index:1;
  max-width:900px;
  animation: fadeUp .7s .15s ease both;
}
h1 em {
  font-style:normal;
  background: linear-gradient(135deg, var(--primary), var(--primary-lt));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub {
  margin-top:1.6rem; font-size:1.15rem; font-weight:400;
  color:var(--text-mid); max-width:560px; line-height:1.75;
  position:relative; z-index:1;
  animation: fadeUp .7s .3s ease both;
}
.hero-actions {
  margin-top:2.8rem; display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
  position:relative; z-index:1;
  animation: fadeUp .7s .45s ease both;
}
.hero-wave {
  position:absolute; bottom:0; left:0; right:0; line-height:0;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ════════════════════════════════════════
   STATISTIKEN
════════════════════════════════════════ */
.stats {
  display:flex; flex-wrap:wrap;
  background:var(--primary);
}
.stat-item {
  flex:1; min-width:150px; padding:2rem 1.5rem; text-align:center;
  border-right:1px solid rgba(255,255,255,0.15);
  transition:background .2s;
}
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:var(--primary-dk); }
.stat-num { font-size:2.4rem; font-weight:800; color:var(--accent); line-height:1; }
.stat-label { font-size:.78rem; color:rgba(255,255,255,.75); margin-top:.35rem; letter-spacing:.06em; text-transform:uppercase; }

/* ════════════════════════════════════════
   LEISTUNGEN
════════════════════════════════════════ */
#leistungen { padding:6rem 4rem; }
.services-header { text-align:center; margin-bottom:3.5rem; }
.services-header .section-body { margin:0 auto; }
.services-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1.5rem;
}
.service-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:20px; padding:2.4rem 2rem;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position:relative; overflow:hidden;
}
.service-card::after {
  content:''; position:absolute; bottom:0; left:0;
  height:3px; width:0;
  background:linear-gradient(90deg, var(--primary), var(--primary-lt));
  transition:width .35s;
}
.service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--primary-xl); }
.service-card:hover::after { width:100%; }
.service-icon {
  width:54px; height:54px; border-radius:15px;
  background:rgba(83,101,168,0.1);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.4rem; color:var(--primary);
  transition:transform .25s, background .25s;
}
.service-card:hover .service-icon { transform:scale(1.1) rotate(-4deg); background:rgba(83,101,168,0.18); }
.service-name { font-size:1.15rem; font-weight:700; color:var(--text); margin-bottom:.6rem; }
.service-desc { font-size:.9rem; color:var(--text-mid); line-height:1.65; }

/* ════════════════════════════════════════
   ÜBER UNS / VERSPRECHEN
════════════════════════════════════════ */
#versprechen {
  padding:6rem 4rem;
  background:var(--bg-section);
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
}
.promise-cards { display:flex; flex-direction:column; gap:1.2rem; }
.promise-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:18px; padding:1.8rem 2rem;
  box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s;
  display:flex; gap:1rem; align-items:flex-start;
}
.promise-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.promise-card-icon {
  width:44px; height:44px; flex-shrink:0; border-radius:12px;
  background:rgba(83,101,168,0.1); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.promise-card-title { font-weight:700; color:var(--text); margin-bottom:.3rem; }
.promise-card-text { font-size:.88rem; color:var(--text-mid); line-height:1.6; }
.check-list { list-style:none; margin-top:2rem; display:flex; flex-direction:column; gap:.85rem; }
.check-list li { display:flex; align-items:flex-start; gap:.8rem; font-size:.95rem; color:var(--text-mid); }
.check-list li::before {
  content:'✓'; flex-shrink:0;
  width:22px; height:22px; border-radius:50%;
  background:var(--primary); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; margin-top:1px;
}

/* ════════════════════════════════════════
   ABLAUF
════════════════════════════════════════ */
#ablauf { padding:6rem 4rem; text-align:center; }
.process-steps {
  display:flex; gap:0; margin-top:4rem; position:relative;
}
.process-steps::before {
  content:''; position:absolute; top:37px; left:12%; right:12%;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--primary-xl), var(--primary), var(--primary-xl), transparent);
}
.step { flex:1; padding:0 1rem; }
.step-num {
  width:74px; height:74px; border-radius:50%;
  background:var(--white); border:3px solid var(--primary);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:800; color:var(--primary);
  margin-bottom:1.4rem; position:relative; z-index:1;
  transition:transform .3s, box-shadow .3s, background .3s, color .3s;
  box-shadow:var(--shadow);
}
.step:hover .step-num { transform:scale(1.1); background:var(--primary); color:var(--white); box-shadow:var(--shadow-lg); }
.step-title { font-weight:700; font-size:1rem; color:var(--text); margin-bottom:.4rem; }
.step-desc { font-size:.84rem; color:var(--text-mid); line-height:1.6; }

/* ════════════════════════════════════════
   KONTAKT
════════════════════════════════════════ */
#kontakt {
  padding:6rem 4rem;
  background:var(--bg-section);
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start;
}
.contact-form { display:flex; flex-direction:column; gap:1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.4rem; }
.field label { font-size:.78rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-mid); }
.field input, .field textarea, .field select {
  background:var(--white); border:1.5px solid var(--border);
  color:var(--text); padding:.75rem 1rem; border-radius:10px;
  font-family:inherit; font-size:.95rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(83,101,168,0.12);
}
.field select option { background:var(--white); color:var(--text); }
.field textarea { resize:vertical; min-height:110px; }
.contact-info { display:flex; flex-direction:column; gap:2rem; padding-top:.5rem; }
.info-item { display:flex; gap:1.2rem; align-items:flex-start; }
.info-icon {
  width:46px; height:46px; flex-shrink:0; border-radius:12px;
  background:rgba(83,101,168,0.1); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.info-label { font-size:.72rem; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.2rem; }
.info-val { font-size:.97rem; color:var(--text); font-weight:500; }

/* ════════════════════════════════════════
   FORMULAR – Statusmeldungen
════════════════════════════════════════ */
.form-message {
  display: none;
  padding: 1rem 1.4rem;
  border-radius: 12px;
  font-size: .92rem;
  font-weight: 500;
  margin-top: .5rem;
}
.form-message.success {
  display: block;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #166534;
}
.form-message.error {
  display: block;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #991b1b;
}
.btn-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
}

/* ════════════════════════════════════════
   IMPRESSUM & DATENSCHUTZ – LEGAL PAGES
════════════════════════════════════════ */

/* Page Hero (blauer Header-Banner) */
.page-hero {
  padding: 7rem 4rem 3rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%);
  color: var(--white);
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: .5rem;
  animation: none;
  letter-spacing: -.02em;
  background: none;
  -webkit-text-fill-color: unset;
}
.page-hero p { color: rgba(255,255,255,.75); font-size: 1rem; }

/* Content-Bereich */
.page-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}

/* Einzelne Rechtssektionen */
.legal-section { margin-bottom: 3rem; }
.legal-section h2 {
  font-size: 1.25rem; font-weight: 700; color: var(--primary);
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--primary-xl);
  margin-bottom: 1.2rem;
}
.legal-section h3 {
  font-size: 1rem; font-weight: 700; color: var(--text);
  margin: 1.2rem 0 .4rem;
}
.legal-section p {
  color: var(--text-mid); font-size: .95rem;
  line-height: 1.8; margin-bottom: .8rem;
}
.legal-section a { color: var(--primary); text-decoration: none; }
.legal-section a:hover { text-decoration: underline; }
.legal-section ul { padding-left: 1.4rem; }
.legal-section li { color: var(--text-mid); font-size: .95rem; line-height: 1.8; margin-bottom: .4rem; }

/* Info-Box (Adress-Kasten) */
.info-box {
  background: rgba(83,101,168,0.07);
  border: 1px solid var(--primary-xl);
  border-radius: 14px;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
}
.info-box p { margin: 0; }
.info-box strong { color: var(--text); }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width:900px) {
  nav { padding:.9rem 1.2rem; }
  .nav-links { display:none; }
  footer { flex-direction:column; text-align:center; padding:2rem 1.2rem; }
  #leistungen, #ablauf { padding:4rem 1.2rem; }
  #versprechen, #kontakt { grid-template-columns:1fr; gap:2.5rem; padding:4rem 1.2rem; }
  .process-steps { flex-direction:column; gap:2rem; align-items:center; }
  .process-steps::before { display:none; }
  .form-row { grid-template-columns:1fr; }
  .legal-page { padding: 6rem 1.5rem 3rem; }
}

/* ════════════════════════════════════════
   WHATSAPP BUTTOB
════════════════════════════════════════ */
.whatsapp-btn {
  position: fixed;
  bottom: 30px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 9000;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}

.whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
}

.whatsapp-btn::after {
  content: 'Angebot per WhatsApp erfragen';
  position: absolute;
  right: 72px;
  background: #1a1e2e;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-family: sans-serif;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.whatsapp-btn:hover::after {
  opacity: 1;
}

@media (max-width: 600px) {
  .whatsapp-btn {
    bottom: 80px;
    }
}​​​​​​​​​​​

/* ===== COOKIE BANNER ===== */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1e2e;
  color: #ffffff;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  z-index: 10000;
  flex-wrap: wrap;
}

#cookie-banner a {
  color: #a0c4ff;
  text-decoration: underline;
}

#cookie-banner button {
  background: #5365a8;
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

#cookie-banner button:hover {
  background: #3d4d8a;
}

@media (max-width: 600px) {
  #cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  #cookie-banner button {
    width: 100%;
    text-align: center;
  }
}

/* FACEBOOK FLOATING BUTTON */
.facebook-btn {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: #1877F2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
  font-family: Georgia, serif;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(24, 119, 242, 0.4);
  z-index: 9000;
  transition: transform 0.3s, box-shadow 0.3s;
}

.facebook-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(24, 119, 242, 0.5);
}

/* Tooltip beim Hover */
.facebook-btn::after {
  content: 'Zu unserer Facebook-Seite';
  position: absolute;
  right: 72px;
  background: #1a1e2e;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-family: sans-serif;
  font-weight: normal;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.facebook-btn:hover::after {
  opacity: 1;
}

/* Auf kleinen Bildschirmen etwas höher als WhatsApp */
@media (max-width: 600px) {
  .facebook-btn {
    bottom: 150px;
  }
}