/* --- RESET & BASIC STYLES --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
--primary-red: #EC1C1D;
--primary-red-hover: #c91516;
--neutral-grey: #696C69;
--dark-grey: #4f514f;
--light-grey: #f8f9fa;
--border-grey: #e9ecef;
--text-dark: #222222;
--white: #ffffff;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
line-height: 1.5;
color: var(--text-dark);
background: var(--white);
-webkit-font-smoothing: antialiased;
}

.container {
width: 92%;
max-width: 960px;
margin: auto;
padding: 15px 0;
}

/* --- HEADER --- */
/* --- HEADER --- */
.header {
  background: var(--neutral-grey);
  color: var(--white);
  text-align: center;
  padding: 14px 0 16px;
  border-bottom: 3px solid var(--primary-red);
}

.header-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
}

.header-logo {
  height: 38px;          /* Optimale Höhe für Mobil & Desktop */
  width: auto;
  max-width: 220px;
  object-fit: contain;
  vertical-align: middle;
}

.logo-subtext {
  background: var(--primary-red);
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  display: inline-block;
}

.header p {
  font-size: 0.85rem;
  margin-top: 4px;
  color: #e5e5e5;
}

.header a {
  color: var(--white);
  text-decoration: underline;
  font-weight: bold;
}

@media (max-width: 480px) {
  .header-logo {
    height: 30px;
  }
  .logo-subtext {
    font-size: 0.95rem;
    padding: 3px 8px;
  }
}

/* --- HERO --- */
.hero {
background: linear-gradient(rgba(105, 108, 105, 0.85), rgba(79, 81, 79, 0.9)), url('hero-kymco.jpg') center/cover no-repeat;
color: var(--white);
text-align: center;
padding: 45px 15px;
}

.hero h1 {
font-size: 1.6rem;
line-height: 1.25;
margin-bottom: 12px;
font-weight: 800;
}

.hero p {
font-size: 0.95rem;
color: #f0f0f0;
max-width: 650px;
margin: 0 auto 20px;
}

/* --- BUTTONS --- */
.btn {
display: inline-block;
background: var(--primary-red);
color: var(--white);
padding: 14px 24px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
border-radius: 4px;
border: none;
cursor: pointer;
width: 100%;
max-width: 320px;
transition: background 0.2s ease, transform 0.1s ease;
text-align: center;
}

.btn:hover {
background: var(--primary-red-hover);
}

/* --- INTRO SECTION (WARUM NEUES COC?) --- */
.intro-section {
padding-top: 36px;
padding-bottom: 24px;
}

h2 {
font-size: 1.35rem;
text-align: center;
margin-bottom: 22px;
color: var(--text-dark);
font-weight: 800;
}

.intro-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}

/* Kachel-Design mit sanftem Hover- & Hebe-Effekt */
.intro-box {
background: var(--white);
border: 1px solid var(--border-grey);
border-radius: 10px;
padding: 22px 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1),
box-shadow 0.25s cubic-bezier(0.165, 0.84, 0.44, 1),
border-color 0.25s ease;
cursor: default;
}

.intro-box:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.09);
border-color: #d1d5db;
}

.intro-box h3 {
font-size: 1.05rem;
margin-bottom: 10px;
color: var(--text-dark);
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}

.intro-box p {
font-size: 0.9rem;
color: #4b5563;
line-height: 1.55;
}

/* --- REQUIREMENTS (KOMPAKTES 2x2 GRID AUF MOBILE) --- */
.requirements-section {
background: #fbfbfb;
border-top: 1px solid var(--border-grey);
border-bottom: 1px solid var(--border-grey);
padding: 24px 0;
}

.req-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 Spalten auf Smartphones */
gap: 10px;
}

.req-card {
background: var(--white);
border: 1px solid var(--border-grey);
border-radius: 6px;
padding: 12px 10px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.req-icon {
width: 26px;
height: 26px;
background: #fde8e8;
color: var(--primary-red);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.85rem;
margin: 0 auto 6px;
}

.req-card h3 {
font-size: 0.82rem;
line-height: 1.2;
font-weight: 700;
margin-bottom: 4px;
}

.req-card p {
font-size: 0.72rem;
line-height: 1.3;
color: #555;
}

.extra-notice {
margin-top: 16px;
background: #fff8f8;
border: 1px dashed var(--primary-red);
padding: 12px;
border-radius: 4px;
font-size: 0.82rem;
color: #333;
}

/* --- PREISE --- */
.preise-section {
padding: 30px 0;
}

.preis-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}

.preis-card {
background: var(--neutral-grey);
color: var(--white);
padding: 20px;
border-radius: 8px;
text-align: center;
position: relative;
}

.preis-card.highlight {
border: 2px solid var(--primary-red);
}

.preis-card .badge {
position: absolute;
top: -10px;
right: 15px;
background: var(--primary-red);
color: var(--white);
font-size: 0.7rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
}

.preis-card h3 {
font-size: 1.15rem;
margin-bottom: 8px;
}

.preis-card .preis-val {
font-size: 2.6rem;
font-weight: 800;
color: var(--white);
line-height: 1;
}

.preis-card .versand {
font-size: 0.8rem;
color: #eee;
margin-bottom: 10px;
}

.preis-card .desc {
font-size: 0.82rem;
color: #f0f0f0;
border-top: 1px solid rgba(255,255,255,0.2);
padding-top: 10px;
}

/* --- PREISE & MARKEN --- */
/* --- PREISE & MARKEN --- */
.preise-section {
  padding: 30px 0;
}

.preis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 820px; /* Begrenzt die Gesamtbreite für perfekte Proportionen */
  margin: 0 auto;   /* Zentriert das gesamte Grid exakt in der Seitenmitte */
}

/* Auf Tablets & Desktop: Exakt 2 gleich breite, zentrierte Spalten */
@media (min-width: 768px) {
  .preis-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px;
  }
}

/* Spezielles Styling für die Box der weiteren Marken */
.preis-card.other-brands {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.other-brands-subtitle {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.brand-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 14px;
}

.brand-tags span {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
}

/* Desktop-Darstellung: 2 gleichwertige Spalten nebeneinander */
@media (min-width: 768px) {
  .preis-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* --- FORMULAR --- */
.formular-section {
background: var(--light-grey);
border: 1px solid var(--border-grey);
border-radius: 8px;
padding: 24px 16px;
margin-bottom: 40px;
}

form {
display: flex;
flex-direction: column;
}

form label {
font-size: 0.85rem;
font-weight: 700;
margin: 10px 0 4px;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form select,
form textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.95rem;
background: var(--white);
}

form input:focus,
form select:focus,
form textarea:focus {
outline: none;
border-color: var(--primary-red);
}

.checkbox {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 16px 0;
font-size: 0.8rem;
font-weight: normal;
cursor: pointer;
}

.checkbox input {
margin-top: 3px;
}

.checkbox a {
color: var(--primary-red);
text-decoration: underline;
}

form button {
margin: 10px auto 0;
}

/* --- FOOTER --- */
.footer {
background: var(--neutral-grey);
color: var(--white);
text-align: center;
padding: 30px 15px;
border-top: 3px solid var(--primary-red);
}

.footer h3 {
font-size: 1rem;
margin-bottom: 6px;
}

.footer p {
font-size: 0.8rem;
color: #eee;
margin-bottom: 6px;
}

.footer a {
color: var(--white);
text-decoration: underline;
}

/* --- DESKTOP AB 768px --- */
@media (min-width: 768px) {
.hero {
padding: 70px 20px;
}
.hero h1 {
font-size: 2.2rem;
}
.intro-grid {
grid-template-columns: repeat(3, 1fr);
}
.req-grid {
grid-template-columns: repeat(4, 1fr);
}
.req-card {
padding: 18px 14px;
}
.req-card h3 {
font-size: 0.95rem;
}
.req-card p {
font-size: 0.8rem;
}
.preis-grid {
grid-template-columns: repeat(3, 1fr);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.formular-section {
padding: 35px;
}
}

@media (min-width: 768px) {
  .req-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}