:root {
    --weinrot: #800020;
    --blattgruen: #3a7d44;
    --hellgrau: #f5f5f5;
    --weiss: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--weiss);
    color: #333;
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* falls du das externe Layout später brauchst – unverändert gelassen */
.header {
    height: 100vh;
    background: url('https://via.placeholder.com/1920x1080/3a7d44/ffffff?text=IT+Komplett+dienstleister') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 0 10%;
    position: relative;
}

.header-content {
    max-width: 500px;
    color: var(--weiss);
}

.header-content h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.header-content p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.btn {
    display: inline-block;
    background-color: var(--weinrot);
    color: var(--weiss);
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #600018;
}

/* neuer kleiner Helfer für klickbare Cards */
.service-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

@media (max-width: 768px) {
    .header {
        padding: 0 5%;
    }

    .header-content h1 {
        font-size: 2.2rem;
    }
}

/* === Kontaktformular · Weinland IT – Premium Style === */
:root {
  --card-bg: rgba(255, 255, 255, 0.8);
  --input-bg: #fff;
  --input-bdr: #d9d9d9;
  --input-bdr-focus: var(--weinrot);
  --shadow-md: 0 10px 30px rgba(0,0,0,.08);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.12);
}

/* Abschnitt insgesamt */
.content-section.kontakt {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(128,0,32,.06), transparent 60%),
    radial-gradient(1000px 500px at 100% 20%, rgba(58,125,68,.07), transparent 60%),
    var(--weiss);
}

/* Info-Box über dem Formular */
.contact-info {
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

/* Kontaktmethoden als kleine Karten */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-top: 1.2rem;
}
.contact-methods .method {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.contact-methods .method:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.method h3 {
  color: var(--weinrot);
  margin-bottom: .4rem;
  font-weight: 700;
}

/* Formular-Card */
.contact-form {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 2rem;
  margin-top: 2rem;
  box-shadow: var(--shadow-lg);
}

/* Überschrift mit Akzentlinie */
.contact-form h2 {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.6rem;
  margin-bottom: 1.4rem;
}
.contact-form h2::after {
  content: "";
  display: block;
  height: 3px;
  width: 56px;
  background: linear-gradient(90deg, var(--weinrot), var(--blattgruen));
  border-radius: 999px;
}

/* Formular-Grid: Name / E-Mail nebeneinander ab 600px */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.2rem;
}
@media (min-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Einzelfelder */
.form-group {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.form-group.full {
  grid-column: 1 / -1;
}

/* Eingaben mit Icon-Wrapper */
.input-wrap {
  position: relative;
}
.input-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  opacity: .65;
}
.input,
.textarea {
  width: 100%;
  border: 1px solid var(--input-bdr);
  background: var(--input-bg);
  border-radius: 10px;
  padding: .85rem 1rem .85rem 2.4rem; /* Platz für Icon */
  font-size: 1rem;
  line-height: 1.25;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.textarea {
  min-height: 140px;
  padding-left: 2.4rem;
  resize: vertical;
}
.input::placeholder,
.textarea::placeholder { color: #9aa1a7; }

/* Fokus/Validierung */
.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--input-bdr-focus);
  box-shadow: 0 0 0 4px rgba(128,0,32,.12);
  background: #fff;
}
.input:focus + .input-icon,
.textarea:focus + .input-icon {
  opacity: .9;
}
.input:valid,
.textarea:valid {
  border-color: #56a16e;
}

/* DSGVO/Hint-Zeile */
.form-hint {
  font-size: .9rem;
  color: #5b5b5b;
  margin-top: .2rem;
}

/* Senden-Button */
.btn-primary {
  display: inline-block;
  padding: .9rem 1.2rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .2px;
  background: linear-gradient(135deg, var(--weinrot), #600018 55%, var(--weinrot));
  color: #fff;
  box-shadow: 0 10px 20px rgba(128,0,32,.25);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(128,0,32,.30);
}
.btn-primary:active {
  transform: translateY(1px);
}

/* Erfolgs-/Fehlerhinweise (optional, falls du serverseitig Meldungen setzt) */
.form-alert {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: 10px;
  border: 1px solid;
  font-size: .95rem;
}
.form-alert.success {
  background: #f3fbf6;
  border-color: #bfe6cc;
  color: #246b3e;
}
.form-alert.error {
  background: #fff6f6;
  border-color: #f1c2c2;
  color: #9b1c1c;
}
/* ========= Weinland IT – Glas-Menü (GLOBAL) ========= */
:root{
  --weinrot:#800020;
  --blattgruen:#3a7d44;
}

/* Toggle-Button (links oben) */
.wi-nav-toggle{
  position:fixed; top:16px; left:16px; z-index:9999;
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; cursor:pointer; user-select:none;
  color:#fff;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:0 10px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.wi-nav-toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.16);
  box-shadow:0 14px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Offcanvas-Leiste */
.wi-nav{
  position:fixed; top:0; left:-260px; z-index:9998;
  width:240px; height:100vh; padding:80px 16px 16px;
  display:flex; flex-direction:column; gap:12px;
  transition:left .25s ease-in-out;

  /* Glas */
  background:linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.10));
  border-right:1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:6px 0 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35);
}
.wi-nav.show{ left:0; }

/* Buttons in der Leiste */
.wi-nav a.wi-nav-btn{
  display:block; width:100%; text-decoration:none; text-align:left;
  color:#fff; font-weight:600; letter-spacing:.01em;
  padding:10px 12px; border-radius:12px;

  background:linear-gradient(180deg, rgba(128,0,32,0.55), rgba(128,0,32,0.42));
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 8px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.wi-nav a.wi-nav-btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(128,0,32,0.68), rgba(128,0,32,0.52));
  box-shadow:0 12px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Optional: aktiver Link */
.wi-nav a.wi-nav-btn.active{
  outline:2px solid rgba(255,255,255,0.65);
  background:linear-gradient(180deg, rgba(128,0,32,0.78), rgba(128,0,32,0.60));
}
/* ========= Weinland IT – Glas-Menü (GLOBAL) ========= */
:root{
  --weinrot:#800020;
  --blattgruen:#3a7d44;
}

/* Toggle-Button (links oben) */
.wi-nav-toggle{
  position:fixed; top:16px; left:16px; z-index:9999;
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; cursor:pointer; user-select:none;
  color:#fff;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:0 10px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.wi-nav-toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.16);
  box-shadow:0 14px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Offcanvas-Leiste */
.wi-nav{
  position:fixed; top:0; left:-260px; z-index:9998;
  width:240px; height:100vh; padding:80px 16px 16px;
  display:flex; flex-direction:column; gap:12px;
  transition:left .25s ease-in-out;

  /* Glas */
  background:linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.10));
  border-right:1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:6px 0 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35);
}
.wi-nav.show{ left:0; }

/* Buttons in der Leiste */
.wi-nav a.wi-nav-btn{
  display:block; width:100%; text-decoration:none; text-align:left;
  color:#fff; font-weight:600; letter-spacing:.01em;
  padding:10px 12px; border-radius:12px;

  background:linear-gradient(180deg, rgba(128,0,32,0.55), rgba(128,0,32,0.42));
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 8px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.wi-nav a.wi-nav-btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(128,0,32,0.68), rgba(128,0,32,0.52));
  box-shadow:0 12px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Aktiver Link */
.wi-nav a.wi-nav-btn.active{
  outline:2px solid rgba(255,255,255,0.65);
  background:linear-gradient(180deg, rgba(128,0,32,0.78), rgba(128,0,32,0.60));
}
/* ===== HOTFIX: Weinland IT – Glas-Menü sichtbar machen (überall) ===== */
body .wi-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;                   /* Basislinke (wird via transform „ausgefahren“) */
  width: 260px !important;
  height: 100vh !important;
  z-index: 2147483647 !important;       /* sicher über allem */
  transform: translateX(-260px);        /* Start: außerhalb des Screens */
  transition: transform .25s ease-in-out !important;

  /* Falls ältere Regeln fehlten: Glas-Hintergrund + Buttons bleiben wie gehabt */
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.10)) !important;
  border-right: 1px solid rgba(255,255,255,0.28) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  box-shadow: 6px 0 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

body .wi-nav.show {
  transform: translateX(0) !important;  /* Eingefahren -> sichtbar */
}

body .wi-nav a.wi-nav-btn {
  color: #fff !important;
}