/* =====================================================================
   Hansa Transfer – Haustür-Shuttle zu Flughafen und Kreuzfahrt (www.bd-parkraum.de/flughafen-transfer/)
   Burak 01.11.2026. Farben Hansa (Navy + Orange), Schrift Montserrat (fonts.bunny.net), Formularfelder wie im Flughafen-Widget.
   ===================================================================== */
:root {
  --navy: #0C2A44; --navy-tief: #071C2F; --blau: #12395B;
  --marke: #C24E17; --marke-d: #9C3D10; --marke-hell: #FBEDE5; --merk: #F39A6B;
  --creme: #F2F5F8; --linie: #D6DEE7; --text: #1B2B3A; --leise: #5B6676; --gruen: #1F8A4C; --rot: #B3261E;
  --kal-akzent: #C24E17;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; font-family: Montserrat, Arial, Helvetica, sans-serif; color: var(--text); background: #fff; font-size: 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marke); }
h1, h2, h3 { color: var(--navy); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 800; }
.innen { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 14px; border: 0; cursor: pointer;
  background: var(--marke); color: #fff; font: 800 16px/1.2 Montserrat, Arial, sans-serif; text-decoration: none; transition: background .15s, transform .1s; }
.knopf:hover { background: var(--marke-d); } .knopf:active { transform: translateY(1px); }
.knopf.rand { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.knopf.weiss { background: #fff; color: var(--marke-d); }
.knopf.gross { width: 100%; min-height: 58px; font-size: 17px; flex-direction: column; gap: 2px; }
.knopf.gross small { font-weight: 600; font-size: 12.5px; opacity: .9; }
.knopf[disabled] { opacity: .5; cursor: default; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--marke); margin: 0 0 10px; }

/* Logo */
.logo { display: flex; align-items: center; text-decoration: none; }
.logo svg { height: 46px; width: auto; display: block; }

/* Kopf */
.oben { background: var(--navy-tief); color: #B8C4D2; font-size: 13px; }
.oben .innen { display: flex; gap: 18px; justify-content: flex-end; align-items: center; min-height: 36px; flex-wrap: wrap; }
.oben a { color: #fff; text-decoration: none; font-weight: 700; }
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.kopf .innen { display: flex; align-items: center; gap: 24px; height: 74px; }
.kopf nav { display: flex; gap: 22px; margin-left: auto; }
.kopf nav a { color: var(--navy); text-decoration: none; font-weight: 700; font-size: 15px; }
.kopf nav a:hover { color: var(--marke); }
.kopf .knopf { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* Hero */
.hero { position: relative; color: #fff; background: var(--navy-tief); overflow: hidden; }
.hero .bild { position: absolute; inset: 0; background: url(bilder/adobe-familie-zuhause.jpg) 50% 45% / cover no-repeat; }
.hero .bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7,28,47,.95) 0%, rgba(7,28,47,.84) 45%, rgba(7,28,47,.5) 100%); }
.hero .innen { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; padding-top: 52px; padding-bottom: 64px; align-items: start; }
.hero .eyebrow { color: var(--merk); }
.hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 50px); font-weight: 800; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--merk); }
.hero .lead { font-size: 18px; line-height: 1.6; color: #E3E9F0; max-width: 560px; margin: 0 0 22px; }
.haken { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.haken li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 16.5px; }
.haken li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 12px; margin-top: 1px;
  background: var(--marke) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat; }
.pillen { display: flex; flex-wrap: wrap; gap: 10px; }
.pille { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 10px 16px; }
.pille b { font-size: 24px; color: #fff; white-space: nowrap; } .pille span { color: #D5DEE8; font-size: 14px; }

/* Buchungskarte */
.karte-buchen { background: #fff; color: var(--text); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; }
.karte-buchen .kopfzeile { background: var(--navy); color: #fff; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.karte-buchen .kopfzeile b { font-size: 18px; } .karte-buchen .kopfzeile small { color: var(--merk); font-weight: 800; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.schritte-leiste { display: flex; gap: 6px; } .schritte-leiste i { width: 26px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); } .schritte-leiste i.an { background: var(--merk); }
.koerper { padding: 20px 22px 22px; display: grid; gap: 16px; }
.titel { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); margin-bottom: 7px; }
.ziele { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ziele.schiff { grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.ziele button { border: 1.5px solid var(--linie); background: #fff; border-radius: 12px; min-height: 52px; padding: 6px 4px; cursor: pointer; font-family: inherit; color: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.ziele button b { font-size: 15px; font-weight: 800; } .ziele button small { font-size: 11px; color: var(--leise); font-weight: 600; }
.ziele button.an { border-color: var(--marke); background: var(--marke-hell); box-shadow: 0 0 0 1px var(--marke) inset; }
.ziele button.an small { color: var(--marke-d); }
.segment { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--creme); border-radius: 12px; padding: 4px; gap: 4px; }
.segment button { border: 0; background: transparent; border-radius: 9px; min-height: 40px; font: 700 14px/1.2 Montserrat, Arial, sans-serif; color: var(--navy); cursor: pointer; }
.segment button.an { background: #fff; color: var(--marke-d); box-shadow: 0 1px 3px rgba(12,42,68,.15); }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.drei { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 10px; }
/* Felder wie im Flughafen-Widget (Beschriftung im Feld oben) */
.feldbox { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 58px; border: 1.5px solid var(--linie); border-radius: 14px; padding: 0 14px 8px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.feldbox > span { position: absolute; left: 14px; top: 7px; font-size: 11px; font-weight: 700; color: var(--leise); pointer-events: none; letter-spacing: .02em; }
.feldbox input, .feldbox select, .feldbox textarea { border: 0; outline: 0; background: transparent; font: 700 16px/1.3 Montserrat, Arial, sans-serif; color: var(--navy); width: 100%; padding: 0; -webkit-appearance: none; appearance: none; min-height: 24px; }
.feldbox textarea { resize: vertical; min-height: 44px; margin-top: 22px; font-weight: 600; }
.feldbox select { cursor: pointer; }
.feldbox.wahl::after { content: ""; position: absolute; right: 14px; top: 50%; margin-top: 2px; border: 5px solid transparent; border-top: 6px solid var(--blau); pointer-events: none; }
.feldbox:focus-within { border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-hell); }
.feldbox.fehlt { border-color: var(--rot) !important; box-shadow: 0 0 0 3px rgba(179,38,30,.12) !important; }
.feldbox input::placeholder, .feldbox textarea::placeholder { color: #a6aeb8; font-weight: 600; }
.feldbox:has(.kal-anzeige) { min-height: 58px; padding: 22px 12px 6px 14px; justify-content: flex-start; }
.feldbox .kal-anzeige { min-height: 26px; gap: 0; } .feldbox .kal-anzeige .kal-ico { display: none; }
.feldbox .kal-anzeige .kal-wert, .feldbox .kal-anzeige .kal-leer, .feldbox .kal-anzeige .kal-text { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); }
.feldbox .kal-anzeige .kal-leer { font-weight: 600; color: var(--leise); }
.reise { display: grid; gap: 12px; }
.reise-titel { display: flex; gap: 10px; align-items: center; margin-bottom: 7px; }
.reise-titel .rund { width: 34px; height: 34px; border-radius: 10px; background: var(--marke-hell); color: var(--marke-d); display: grid; place-items: center; flex: none; }
.reise-titel .rund svg { width: 19px; height: 19px; }
.reise-titel b { display: block; color: var(--navy); font-size: 15px; line-height: 1.2; } .reise-titel small { display: block; color: var(--leise); font-size: 12.5px; line-height: 1.3; }
.zeile-zaehler { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1.5px solid var(--linie); border-radius: 14px; padding: 10px 12px 10px 14px; }
.zeile-zaehler b { display: block; color: var(--navy); } .zeile-zaehler small { display: block; color: var(--leise); font-size: 12.5px; line-height: 1.35; }
.zaehler { display: flex; align-items: center; gap: 4px; flex: none; }
.zaehler button { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--creme); color: var(--navy); font-size: 22px; font-weight: 700; cursor: pointer; line-height: 1; }
.zaehler button:disabled { opacity: .35; cursor: default; }
.zaehler output { min-width: 34px; text-align: center; font-size: 20px; font-weight: 800; color: var(--navy); }
.ergebnis { display: none; } .ergebnis.zeigen { display: grid; gap: 10px; }
.meldung { display: flex; gap: 10px; align-items: flex-start; background: var(--creme); border-radius: 12px; padding: 11px 14px; font-size: 14.5px; line-height: 1.45; }
.meldung.fehler { background: #FDECEA; color: #8C1D18; } .meldung.laedt { color: var(--leise); }
.meldung svg { width: 20px; height: 20px; flex: none; color: var(--marke); margin-top: 1px; }
.zeit { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; background: #F7F9FB; border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; }
.zeit b { color: var(--navy); } .zeit .ic { width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; flex: none; background: var(--marke-hell); color: var(--marke-d); font-weight: 800; }
.zeit .frei { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--gruen); background: #E3F5E9; border-radius: 8px; padding: 2px 8px; }
.zeit .frei.knapp { color: #9A4A00; background: #FFE9CC; } .zeit .frei.voll { color: #B3261E; background: #FDECEA; }
.preisbox { background: var(--navy); color: #fff; border-radius: 16px; padding: 16px 18px; }
.preisbox .oben2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.preisbox .oben2 small { display: block; color: var(--merk); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.preisbox .oben2 span { color: #CFD8E3; font-size: 13.5px; }
.preisbox .betrag { font-size: 34px; font-weight: 800; white-space: nowrap; line-height: 1; }
.preisbox .posten { border-top: 1px solid rgba(255,255,255,.2); margin-top: 12px; padding-top: 10px; font-size: 13.5px; color: #D5DEE8; display: grid; gap: 4px; }
.preisbox .posten div { display: flex; justify-content: space-between; gap: 10px; }
.bar { display: flex; gap: 10px; align-items: center; background: #E3F5E9; color: #1F5F38; border-radius: 12px; padding: 10px 14px; font-size: 14.5px; font-weight: 700; }
.klein { font-size: 12.5px; color: var(--leise); line-height: 1.45; margin: 0; }
.anrede { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.anrede button { min-height: 46px; border-radius: 12px; border: 1.5px solid var(--linie); background: #fff; font: 700 15px Montserrat, Arial, sans-serif; color: var(--navy); cursor: pointer; }
.anrede button.an { border-color: var(--marke); background: var(--marke-hell); color: var(--marke-d); }
.agb { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; padding: 4px; border-radius: 10px; }
.agb input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--marke); flex: none; }
.agb.fehlt { outline: 2px solid var(--rot); }
.zurueck { justify-self: start; border: 0; background: none; color: var(--marke-d); font: 700 14px Montserrat, Arial, sans-serif; cursor: pointer; padding: 0; }
.danke { text-align: center; } .danke .ok { width: 68px; height: 68px; border-radius: 34px; background: #E3F5E9; color: var(--gruen); display: grid; place-items: center; margin: 4px auto 10px; }
.danke .ok svg { width: 36px; height: 36px; } .danke .nr { font-size: 28px; font-weight: 800; letter-spacing: .06em; color: var(--navy); }
.danke dl { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; background: var(--creme); border-radius: 14px; padding: 14px 16px; font-size: 14.5px; margin: 14px 0; }
.danke dt { color: var(--leise); } .danke dd { margin: 0; font-weight: 700; color: var(--navy); }

/* Faktenleiste */
.fakten { background: var(--creme); border-bottom: 1px solid var(--linie); }
.fakten .innen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.fakt { display: flex; gap: 12px; align-items: center; }
.fakt .rund { width: 46px; height: 46px; border-radius: 23px; background: #fff; color: var(--marke); display: grid; place-items: center; flex: none; box-shadow: 0 1px 3px rgba(12,42,68,.1); }
.fakt .rund svg { width: 24px; height: 24px; }
.fakt b { display: block; color: var(--navy); font-size: 15.5px; } .fakt span { font-size: 13.5px; color: var(--leise); }

/* Abschnitte */
.abschnitt { padding: 80px 0; } .abschnitt.hell { background: var(--creme); }
.einleitung { max-width: 760px; margin-bottom: 34px; font-size: 17.5px; color: var(--leise); }
.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.schritt { background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 24px 22px; }
.schritt::before { counter-increment: s; content: counter(s); width: 40px; height: 40px; border-radius: 20px; background: var(--marke); color: #fff; font-weight: 800; font-size: 18px; display: grid; place-items: center; margin-bottom: 14px; }
.schritt p { margin: 0; color: var(--leise); font-size: 15.5px; }
.zielkarten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zielkarte { background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 22px 20px; }
.zielkarte .kuerzel { font-size: 30px; font-weight: 800; color: var(--marke); letter-spacing: .04em; line-height: 1; }
.zielkarte h3 { margin: 10px 0 6px; font-size: 18px; } .zielkarte p { margin: 0; color: var(--leise); font-size: 14.5px; }
.zielkarte.schiff .kuerzel { font-size: 22px; }
.kreuzfahrt { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin-top: 44px; }
.kreuzfahrt img { border-radius: 22px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.preise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.formel { background: var(--navy); color: #fff; border-radius: 22px; padding: 28px; }
.formel h3 { color: #fff; }
.staffel { display: grid; gap: 8px; margin: 14px 0; }
.staffel div { display: flex; justify-content: space-between; gap: 12px; background: rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; }
.staffel b { font-size: 20px; white-space: nowrap; } .staffel span { color: #D5DEE8; }
.formel ul { padding-left: 18px; color: #D5DEE8; margin: 12px 0 0; } .formel li { margin: 6px 0; }
.tabelle { width: 100%; border-collapse: collapse; background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--linie); }
.tabelle th { text-align: left; background: var(--creme); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); padding: 12px 16px; }
.tabelle td { padding: 11px 16px; border-top: 1px solid var(--linie); font-size: 15.5px; }
.tabelle td:nth-child(n+2), .tabelle th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.tabelle td:last-child { font-weight: 800; color: var(--navy); }
.foto-text { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.collage { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.collage img { border-radius: 20px; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.collage img:last-child { margin-top: 40px; }
.vorteile { display: grid; gap: 16px; margin-top: 24px; }
.vorteil { display: flex; gap: 14px; }
.vorteil .rund { width: 44px; height: 44px; border-radius: 12px; background: var(--marke-hell); color: var(--marke-d); display: grid; place-items: center; flex: none; }
.vorteil .rund svg { width: 22px; height: 22px; }
.vorteil b { display: block; color: var(--navy); } .vorteil span { color: var(--leise); font-size: 15px; }
.bedingungen { max-width: 860px; background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 24px 26px; }
.bedingungen ol { margin: 0; padding-left: 20px; } .bedingungen li { margin: 8px 0; color: var(--text); }
.faq { max-width: 880px; }
.faq details { background: #fff; border: 1px solid var(--linie); border-radius: 14px; margin-bottom: 10px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; font-weight: 700; color: var(--navy); position: relative; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--marke); font-weight: 600; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 20px 18px; color: var(--leise); }
.aufruf { background: linear-gradient(120deg, var(--marke) 0%, var(--marke-d) 100%); color: #fff; padding: 56px 0; }
.aufruf .innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.aufruf h2 { color: #fff; margin: 0 0 6px; } .aufruf p { margin: 0; color: #FCE3D6; font-size: 17px; }
.fuss { background: var(--navy-tief); color: #B8C4D2; padding: 46px 0 96px; font-size: 14.5px; }
.fuss .innen { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.fuss b { color: #fff; } .fuss a { color: #E3E9F0; text-decoration: none; } .fuss a:hover { text-decoration: underline; }
.fuss .klein2 { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; font-size: 13px; color: #8796A8; }
.handy-leiste { display: none; }

@media (max-width: 1050px) {
  .hero .innen { grid-template-columns: 1fr; gap: 28px; padding-top: 34px; }
  .schritte, .zielkarten { grid-template-columns: 1fr 1fr; }
  .preise, .foto-text, .kreuzfahrt { grid-template-columns: 1fr; }
  .fakten .innen { grid-template-columns: 1fr 1fr; }
  .kopf nav { display: none; } .kopf .knopf { margin-left: auto; }
}
@media (max-width: 640px) {
  .innen { padding: 0 16px; }
  .oben .innen { justify-content: center; gap: 12px; }
  .kopf .innen { height: 64px; } .logo svg { height: 38px; } .kopf .knopf { display: none; }
  .hero .lead { font-size: 16.5px; }
  .koerper { padding: 16px; }
  .ziele { grid-template-columns: repeat(2, 1fr); } .ziele.schiff { grid-template-columns: 1fr 1fr 1fr; }
  .ziele.schiff button b { font-size: 13px; }
  .drei { grid-template-columns: 1fr 1fr; } .drei .feldbox:first-child { grid-column: 1 / -1; }
  .schritte, .fakten .innen, .zielkarten { grid-template-columns: 1fr; }
  .abschnitt { padding: 56px 0; }
  .collage img:last-child { margin-top: 24px; }
  .fuss .innen { grid-template-columns: 1fr; }
  .tabelle td, .tabelle th { padding: 10px; font-size: 14.5px; }
  .handy-leiste { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 18px rgba(12,42,68,.15); }
  .handy-leiste .knopf { flex: 1; min-height: 48px; padding: 0 12px; }
  .handy-leiste .knopf.rand { flex: none; }
}

/* Tarifwahl Sammel-Shuttle / VIP (Burak 01.11.2026) */
.tarife { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tarife button { border: 1.5px solid var(--linie); background: #fff; border-radius: 14px; padding: 10px 12px; text-align: left; cursor: pointer; font-family: inherit; color: var(--navy); display: flex; flex-direction: column; gap: 2px; }
.tarife button b { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 6px; } .tarife button small { font-size: 12px; color: var(--leise); font-weight: 600; line-height: 1.3; }
.tarife button.an { border-color: var(--marke); background: var(--marke-hell); box-shadow: 0 0 0 1px var(--marke) inset; }
.tarife button[data-tarif="vip"] b::after { content: "VIP"; font-size: 10.5px; letter-spacing: .08em; background: #B8892B; color: #fff; border-radius: 6px; padding: 2px 6px; }
.vip-hinweis { background: linear-gradient(120deg, #1A1A1A, #3A2E14); color: #F4E6C2; border-radius: 12px; padding: 11px 14px; font-size: 14px; line-height: 1.45; }
.vip-hinweis b { color: #fff; }
/* VIP-Abschnitt */
.vip { background: #0E0E10; color: #E9E2D0; }
.vip .innen { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.vip h2 { color: #fff; } .vip .eyebrow { color: #D9B45A; }
.vip img { border-radius: 22px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.vip ul { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 10px; }
.vip li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.vip li::before { content: "★"; color: #D9B45A; flex: none; }
.vip .preis-vip { display: inline-flex; align-items: baseline; gap: 10px; border: 1px solid rgba(217,180,90,.5); border-radius: 14px; padding: 10px 16px; margin-bottom: 18px; }
.vip .preis-vip b { font-size: 26px; color: #fff; } .vip .preis-vip span { color: #CDBF9A; }
.knopf.gold { background: #D9B45A; color: #1A1404; } .knopf.gold:hover { background: #C49E44; }
/* Vergleichstabelle */
.vergleich td:nth-child(3), .vergleich th:nth-child(3) { color: #8A6A1E; }
/* Bildstreifen „So holen wir Sie ab“ */
.bildstreifen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.bildstreifen figure { margin: 0; } .bildstreifen img { border-radius: 18px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bildstreifen figcaption { margin-top: 8px; font-weight: 700; color: var(--navy); font-size: 15px; }
@media (max-width: 1050px) { .vip .innen { grid-template-columns: 1fr; } .bildstreifen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bildstreifen { grid-template-columns: 1fr; } .tarife button { padding: 9px 10px; } }

/* Buchung in 2 Schritten + kompakte Handy-Fassung (Burak 01.11.2026: „muss komprimiert werden auf die Handy-Version … viel einfacher“) */
.mitte { text-align: center; }
.plz-ort { grid-template-columns: 1fr 1.6fr; }
#s2 .titel { margin: 4px 0 -4px; }
.preisbox .oben2 > div { min-width: 0; } .preisbox .oben2 span { display: block; }
@media (max-width: 640px) {
  .oben { display: none; }
  .kopf .innen { height: 58px; } .logo svg { height: 34px; }
  .hero .innen { gap: 14px; padding-top: 18px; padding-bottom: 24px; }
  .hero .eyebrow { font-size: 11px; margin-bottom: 6px; letter-spacing: .1em; }
  .hero h1 { font-size: 25px; margin-bottom: 0; }
  .hero .lead, .hero .haken, .hero .pillen { display: none; }
  .karte-buchen { border-radius: 18px; }
  .karte-buchen .kopfzeile { padding: 12px 16px; } .karte-buchen .kopfzeile b { font-size: 16px; }
  .koerper { padding: 14px; gap: 11px; }
  .feldbox { min-height: 54px; padding: 0 12px 7px; } .feldbox > span { left: 12px; top: 6px; font-size: 10.5px; }
  .feldbox input, .feldbox select { font-size: 16px; }
  .feldbox:has(.kal-anzeige) { min-height: 54px; padding: 20px 10px 5px 12px; }
  .feldbox .kal-anzeige .kal-wert, .feldbox .kal-anzeige .kal-leer, .feldbox .kal-anzeige .kal-text { font-size: 15px; }
  .zwei { gap: 8px; }
  .tarife { gap: 6px; } .tarife button { padding: 8px 10px; border-radius: 12px; } .tarife button b { font-size: 14px; } .tarife button small { font-size: 11px; }
  .zeile-zaehler { padding: 8px 10px 8px 12px; } .zeile-zaehler small { font-size: 11.5px; }
  .zaehler button { width: 36px; height: 36px; } .zaehler output { min-width: 28px; font-size: 18px; }
  .segment button { min-height: 38px; font-size: 13px; }
  .preisbox { padding: 13px 14px; } .preisbox .betrag { font-size: 28px; } .preisbox .oben2 span { font-size: 12.5px; }
  .zeit { font-size: 13.5px; padding: 9px 10px; } .zeit .ic { width: 26px; height: 26px; }
  .knopf.gross { min-height: 54px; font-size: 16px; }
  .meldung { font-size: 13.5px; padding: 9px 12px; }
  .anrede button { min-height: 42px; }
  .fakten .innen { grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
  .fakt { gap: 8px; } .fakt .rund { width: 36px; height: 36px; } .fakt .rund svg { width: 19px; height: 19px; } .fakt b { font-size: 13.5px; } .fakt span { font-size: 12px; }
  .abschnitt { padding: 44px 0; } h2 { font-size: 24px; } .einleitung { font-size: 15.5px; margin-bottom: 22px; }
  .zielkarten { gap: 10px; } .zielkarte { padding: 16px; } .zielkarte .kuerzel { font-size: 24px; }
  .vip .innen { gap: 22px; } .vip li { font-size: 15px; }
  .formel { padding: 20px; } .staffel b { font-size: 17px; }
}
.preisbox .oben2 > div:first-child { flex: 1 1 auto; } .preisbox .oben2 .betrag { flex: none; }

/* Schlichte Fassung (Burak 01.11.2026: „viel zu viel Input … einfacher dargestellt“) */
h2.mitte { text-align: center; margin-bottom: 28px; }
.drei-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.drei-bilder figure { margin: 0; }
.drei-bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.drei-bilder figcaption { margin-top: 10px; color: var(--leise); font-size: 15px; text-align: center; }
.drei-bilder figcaption b { display: block; color: var(--navy); font-size: 17px; }
.zwei-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 820px; margin: 0 auto; }
.tkarte { background: #fff; border: 1px solid var(--linie); border-radius: 20px; padding: 24px; text-align: center; }
.tkarte .tname { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 18px; color: var(--navy); }
.tkarte .tname span { font-size: 11px; letter-spacing: .08em; background: #B8892B; color: #fff; border-radius: 6px; padding: 2px 7px; }
.tkarte .tpreis { font-size: 34px; font-weight: 800; color: var(--marke); margin: 8px 0 2px; }
.tkarte .tpreis small { font-size: 15px; color: var(--leise); font-weight: 600; }
.tkarte p { margin: 0 0 14px; color: var(--leise); font-size: 14.5px; }
.tkarte table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tkarte td { padding: 7px 4px; border-top: 1px solid var(--linie); } .tkarte td:last-child { text-align: right; font-weight: 800; color: var(--navy); }
.tkarte.vipk { background: #141414; border-color: #141414; } .tkarte.vipk .tname { color: #fff; } .tkarte.vipk .tpreis { color: #D9B45A; }
.tkarte.vipk p, .tkarte.vipk td { color: #CDBF9A; border-color: rgba(255,255,255,.12); } .tkarte.vipk td:last-child { color: #fff; }
.ziel-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.ziel-chips span { background: var(--creme); border: 1px solid var(--linie); border-radius: 999px; padding: 9px 16px; font-weight: 700; color: var(--navy); font-size: 15px; }
#fragen .faq { max-width: 820px; }
@media (max-width: 640px) {
  .drei-bilder { grid-template-columns: 1fr; gap: 16px; } .drei-bilder img { aspect-ratio: 16 / 9; }
  .zwei-karten { grid-template-columns: 1fr; gap: 14px; } .tkarte { padding: 18px; } .tkarte .tpreis { font-size: 28px; }
  .ziel-chips span { font-size: 13.5px; padding: 7px 12px; }
  h2.mitte { margin-bottom: 18px; }
}
@media (max-width: 640px) { #fragen .tabelle { margin: 0 10px 14px !important; width: calc(100% - 20px) !important; } #fragen .tabelle td, #fragen .tabelle th { padding: 7px 6px; font-size: 13px; } #fragen .tabelle th { letter-spacing: 0; } }

/* Eigene Rechtsseiten (Impressum, Datenschutz, Bedingungen) – Burak 01.11.2026: „Impressum usw. leitet falsch weiter“ */
.recht { padding: 40px 0 72px; background: #fff; }
.recht .innen { max-width: 820px; }
.recht h1, .recht h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.recht h1 { font-size: clamp(28px, 4vw, 38px); color: var(--navy); margin: 16px 0 6px; line-height: 1.15; }
.recht .stand { color: var(--leise); font-size: 14px; margin: 0 0 26px; }
.recht h2 { font-size: 20px; color: var(--navy); margin: 34px 0 8px; }
.recht h3 { font-size: 16.5px; color: var(--navy); margin: 20px 0 6px; }
.recht p, .recht li { line-height: 1.7; color: var(--text); font-size: 16px; }
.recht p { margin: 0 0 12px; }
.recht ul, .recht ol { padding-left: 22px; margin: 0 0 12px; }
.recht a { color: var(--marke-d); }
.recht .infokarte { background: var(--creme); border-radius: 16px; padding: 18px 20px; margin: 10px 0 18px; }
.recht .infokarte p:last-child { margin-bottom: 0; }
.recht .unten { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
.recht .unten .knopf { text-decoration: none; color: #fff; }
.recht .unten .knopf.rand { color: var(--navy); }
.zurueck-link { display: inline-flex; gap: 6px; font-weight: 700; color: var(--navy) !important; text-decoration: none; font-size: 15px; }
.zurueck-link:hover { color: var(--marke) !important; }
.fuss a[aria-current="page"] { color: #fff; font-weight: 700; }
@media (max-width: 640px) { .recht { padding: 24px 0 56px; } .recht h1 { font-size: 26px; } .recht h2 { font-size: 18.5px; margin-top: 28px; } .recht p, .recht li { font-size: 15.5px; } .recht .unten .knopf { flex: 1; } }

/* Ortsseiten „Flughafentransfer <Ort>“ + Ortsliste auf der Startseite (01.11.2026, SEO) */
.ort-fakten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 14px; }
.ort-fakten div { background: var(--creme); border-radius: 14px; padding: 14px 14px 12px; }
.ort-fakten div.vip { background: var(--marke-hell); }
.ort-fakten small { display: block; color: var(--leise); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ort-fakten b { display: block; font-size: 22px; color: var(--navy); margin-top: 4px; }
.ort-fakten span { display: block; font-size: 12.5px; color: var(--leise); margin-top: 2px; }
.ziel-chips.links { justify-content: flex-start; margin: 6px 0 0; }
.ziel-chips a { background: var(--creme); border: 1px solid var(--linie); border-radius: 999px; padding: 9px 16px; font-weight: 700; color: var(--navy) !important; font-size: 15px; text-decoration: none; }
.ziel-chips a:hover { border-color: var(--marke); color: var(--marke) !important; }
#region .ziel-chips a { font-size: 14px; padding: 8px 14px; }
@media (max-width: 640px) { .ort-fakten { grid-template-columns: 1fr 1fr; } .ort-fakten b { font-size: 19px; } .ziel-chips a { font-size: 13.5px; padding: 7px 12px; } }