:root{
  /* Premium / cool / automotive */
  --bg: #f4f7fb;
  --surface: rgba(255,255,255,.86);
  --surfaceSolid: #ffffff;

  --text: #0a1222;
  --muted: rgba(10,18,34,.72);
  --line: rgba(10,18,34,.12);

  --accent: #ff9b2f;   /* warmes Sport-Orange */
  --ice: #2b6cff;      /* kühles Blau */
  --ink: #0b1220;

  --shadow: 0 18px 55px rgba(10,18,34,.14);
  --shadowSoft: 0 12px 30px rgba(10,18,34,.10);

  --radius: 18px;
  --radiusSm: 14px;
  --container: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(255,155,47,.18), transparent 62%),
    radial-gradient(900px 420px at 88% 0%, rgba(43,108,255,.14), transparent 60%),
    var(--bg);
  line-height:1.62;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width: min(var(--container), calc(100% - 2rem)); margin: 0 auto; }
.center{ text-align:center; }
.muted{ color: var(--muted); }
.dot{ opacity:.55; }

/* Accessible skip link (small quality upgrade) */
.skiplink{
  position:absolute;
  left:-999px;
  top: 8px;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .55rem .8rem;
  font-weight: 900;
  z-index: 9999;
}
.skiplink:focus{ left: 12px; }

/* Nice focus (premium + accessible) */
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(43,108,255,.22);
  border-radius: 12px;
}

/* Topbar */
.topbar{
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.topbar__inner{
  display:flex; justify-content:space-between; align-items:center;
  padding:.65rem 0; gap:1rem; flex-wrap:wrap;
}
.topbar__left, .topbar__right{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.pill{
  font-weight:900; font-size:.86rem;
  padding:.28rem .62rem; border-radius:999px;
  background: rgba(255,255,255,.85);
  border:1px solid var(--line);
}
.toplink{ font-weight:900; color: rgba(10,18,34,.88); }
.toplink:hover{ color: rgba(10,18,34,1); }

/* Header */
.header{
  position: sticky; top:0; z-index:30;
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.header__inner{
  display:flex; justify-content:space-between; align-items:center;
  padding:.95rem 0; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.75rem; min-width: 280px; }
.brand__mark{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:14px; border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,155,47,.18), rgba(43,108,255,.12));
  box-shadow: 0 10px 20px rgba(10,18,34,.08);
}
.brand__text{ display:grid; line-height:1.1; text-align:left; }
.brand__text strong{ letter-spacing:.2px; }
.brand__sub{ font-size:.86rem; color: var(--muted); margin-top:.2rem; }

/* Nav */
.nav{ display:flex; gap:1.1rem; align-items:center; }
.nav a{
  font-weight:900; color: rgba(10,18,34,.72);
  padding:.35rem .25rem;
  position: relative;
}
.nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg, rgba(255,155,47,.9), rgba(43,108,255,.85));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.nav a:hover{ color: rgba(10,18,34,1); }
.nav a:hover::after{ transform: scaleX(1); }

/* Mobile nav */
.navtoggle{ display:none; }
.burger{
  display:none;
  width:46px; height:42px;
  border-radius:12px; border:1px solid var(--line);
  background: rgba(255,255,255,.9);
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.burger span{ width:22px; height:2px; background: rgba(10,18,34,.9); border-radius:2px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.15rem;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.88);
  font-weight:950;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  will-change: transform;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadowSoft);
}
.btn--small{ padding:.66rem .92rem; border-radius: 12px; }
.btn--full{ width:100%; }
.btn--primary{
  border-color: rgba(255,155,47,.55);
  background: linear-gradient(135deg, rgba(255,155,47,.98), rgba(255,155,47,.78));
  box-shadow: 0 16px 40px rgba(255,155,47,.18);
}
.btn--primary:hover{ filter: saturate(1.05) contrast(1.02); }
.btn--ghost{ background: rgba(255,255,255,.78); }

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding: 3.35rem 0 2.1rem;
}
.hero__bg{
  position:absolute; inset:0;
  background: url("images/hero.jpg") center/cover no-repeat;
  transform: scale(1.03);
  filter: contrast(1.10) saturate(1.20);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 50% 25%, rgba(255,255,255,.05), rgba(255,255,255,.62) 70%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(244,247,251,.80) 76%);
}
.hero__inner{ position:relative; z-index:1; }
.kicker{
  display:inline-flex;
  padding:.38rem .72rem;
  border-radius:999px;
  border:1px solid rgba(10,18,34,.14);
  background: rgba(255,255,255,.72);
  font-weight:900;
  color: rgba(10,18,34,.76);
  margin: 0 auto .95rem;
}
h1{
  margin: 0 auto .85rem;
  font-size: clamp(2.1rem, 3.3vw, 3.25rem);
  line-height: 1.05;
  max-width: 19ch;
  letter-spacing: -.02em;
}
.lead{
  margin: 0 auto 1.25rem;
  max-width: 78ch;
  font-size: 1.08rem;
  color: rgba(10,18,34,.78);
}
.hero__actions{
  display:flex; gap:.85rem; flex-wrap:wrap;
  justify-content:center; margin-bottom: 1.25rem;
}

/* Stats */
.stats{
  margin: 1.1rem auto 0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  max-width: 980px;
}
.stat{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(10,18,34,.12);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: var(--shadowSoft);
  transition: transform .14s ease, box-shadow .14s ease;
}
.stat:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.stat__top{ display:block; font-weight: 950; }
.stat__bottom{ display:block; color: rgba(10,18,34,.70); font-size: .92rem; margin-top: .15rem; }

/* Sections */
.section{ padding: 3.4rem 0; }
.section--soft{
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.eyebrow{
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(10,18,34,.62);
  margin: 0 auto .6rem;
}
h2{
  margin: 0 auto .9rem;
  font-size: clamp(1.65rem, 2.3vw, 2.35rem);
  line-height: 1.12;
  max-width: 32ch;
}
.copy{
  margin: 0 auto 1.2rem;
  max-width: 88ch;
  color: rgba(10,18,34,.76);
  font-size: 1.02rem;
}

/* Pill cards */
.pillgrid{
  margin: 1.2rem auto 0;
  max-width: 980px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}
.pillcard{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(10,18,34,.12);
  border-radius: 16px;
  padding: 1rem 1.05rem;
  box-shadow: var(--shadowSoft);
  transition: transform .14s ease, box-shadow .14s ease;
  position: relative;
  overflow:hidden;
}
.pillcard::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,155,47,.10), rgba(43,108,255,.10));
  opacity: 0;
  transition: opacity .14s ease;
}
.pillcard:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.pillcard:hover::before{ opacity: 1; }

.cta-row{ display:flex; gap:.85rem; flex-wrap:wrap; justify-content:center; margin-top: 1rem; }

/* Cards */
.cards{
  margin-top: 1.2rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(10,18,34,.12);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadowSoft);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.card__media{ position: relative; overflow:hidden; }
.card__media img{
  height: 205px;
  width:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
  filter: contrast(1.02) saturate(1.03);
}
.card:hover .card__media img{
  transform: scale(1.08);
  filter: contrast(1.06) saturate(1.10);
}
.card__media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,18,34,.00), rgba(10,18,34,.18));
  opacity: .8;
  pointer-events:none;
}
.card__body{ padding: 1.15rem 1.15rem 1.25rem; text-align:left; }
.card__body h3{ margin: .1rem 0 .45rem; letter-spacing: -.01em; }
.card__body p{ margin: 0 0 .85rem; }

/* Ticks */
.ticks{ display:grid; gap:.55rem; }
.tick{
  position: relative;
  padding: .62rem .75rem .62rem 2.15rem;
  border-radius: 14px;
  border: 1px solid rgba(10,18,34,.10);
  background: rgba(255,255,255,.78);
}
.tick::before{
  content:"";
  position:absolute;
  left:.75rem; top:.72rem;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,155,47,.95), rgba(43,108,255,.90));
  box-shadow: 0 10px 22px rgba(10,18,34,.18);
}

/* Steps */
.steps{
  margin: 1.2rem auto 0;
  max-width: 980px;
  display:grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
.step{
  display:flex;
  gap: 1rem;
  align-items:flex-start;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(10,18,34,.12);
  border-radius: var(--radius);
  padding: 1.15rem;
  box-shadow: var(--shadowSoft);
  transition: transform .14s ease, box-shadow .14s ease;
}
.step:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.step__nr{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight: 950;
  color: rgba(10,18,34,.92);
  border: 1px solid rgba(255,155,47,.55);
  background: rgba(255,155,47,.16);
}
.step__content{ text-align:left; }
.step__content h3{ margin: .1rem 0 .35rem; }

/* FAQ */
.faq{
  margin: 1rem auto 0;
  max-width: 980px;
  display:grid; gap:.85rem;
  text-align:left;
}
details{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(10,18,34,.12);
  border-radius: var(--radiusSm);
  padding: .95rem 1.05rem;
  box-shadow: var(--shadowSoft);
}
summary{ cursor:pointer; font-weight: 950; }
details p{ margin: .65rem 0 0; }

/* Contact */
.contact{
  margin: 1.2rem auto 0;
  max-width: 980px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  text-align:left;
}
.contact__box{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(10,18,34,.12);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadowSoft);
  transition: transform .14s ease, box-shadow .14s ease;
}
.contact__box:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.contact__line{
  display:flex; justify-content:space-between; gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(10,18,34,.08);
}
.contact__line:last-child{ border-bottom: none; }
.contact__line span{ color: rgba(10,18,34,.65); }
.link{ font-weight: 950; }
.link:hover{ color: rgba(43,108,255,.95); }

.form{ display:grid; gap:.9rem; margin-top: .75rem; }
label{ display:grid; gap:.38rem; font-weight: 900; }
input, select, textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(10,18,34,.14);
  background: rgba(255,255,255,.92);
  padding: .9rem .95rem;
  outline:none;
  transition: box-shadow .14s ease, border-color .14s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(43,108,255,.55);
  box-shadow: 0 0 0 4px rgba(43,108,255,.16);
}
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:.85rem; }
.hp{ display:none; }
.fineprint{ font-size:.88rem; color: var(--muted); margin:.7rem 0 0; }

/* Google Maps */
.map-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(10,18,34,.12);
  border-radius: 18px;
  padding: 1.2rem;
  box-shadow: var(--shadowSoft);
}
.map-consent{
  border-radius: 16px;
  border: 1px solid rgba(10,18,34,.12);
  background: rgba(255,255,255,.78);
  padding: 1rem;
  margin-top: .75rem;
}
.map-frame{
  margin-top: .75rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(10,18,34,.12);
}
.map-frame iframe{
  width: 100%;
  height: 320px;
  border: 0;
  display:block;
}

/* =========================
   FOOTER (DARK + ICONS + SOFT TRANSITION)
   ========================= */

.footer{
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(900px 420px at 12% 0%, rgba(255,155,47,.16), transparent 62%),
    radial-gradient(900px 420px at 88% 0%, rgba(43,108,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(10,18,34,.96), rgba(7,12,22,.98));
  color: rgba(255,255,255,.92);
  /* harte Linie entfernt → weicher Look */
  border-top: none;
  padding: 2.9rem 0 1.5rem;
}

/* Weicher Übergang vom hellen Bereich in den Dark-Footer */
.footer::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-200px;
  height:200px;
  background: linear-gradient(
    to bottom,
    rgba(244,247,251,1) 0%,
    rgba(244,247,251,.92) 40%,
    rgba(10,18,34,.10) 80%,
    rgba(10,18,34,0) 100%
  );
  pointer-events:none;
}

.footer .muted{ color: rgba(255,255,255,.70); }

.footer__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1.4rem;
  align-items:start;
}

/* Brand */
.footer__brand strong{
  font-size: 1.08rem;
  letter-spacing: .25px;
}
.footer__brand p{
  margin:.45rem 0 0;
  max-width: 34ch;
}

/* Columns */
.footer__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.footer__cols strong{
  display:block;
  margin-bottom:.7rem;
  font-weight: 950;
  color: rgba(255,255,255,.92);
}

/* Footer links */
.footer__cols a{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding: .28rem 0;
  color: rgba(255,255,255,.74);
  font-weight: 700;
  margin: .2rem 0;
  text-decoration: none;
}
.footer__cols a:hover{
  color: rgba(255,255,255,.96);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer icons (SVG inline) */
.ficon{
  width: 16px;
  height: 16px;
  display:inline-block;
  flex: 0 0 16px;
  opacity: .92;
}

/* Bottom line: integrierter, nicht „abgeschnitten“ */
.footer__bottom{
  margin-top: 2.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  font-size: .9rem;
  opacity: .92;
}
.footer__bottom a{
  font-weight: 750;
  color: rgba(255,255,255,.72);
}
.footer__bottom a:hover{
  color: rgba(255,255,255,.96);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .btn, .card, .stat, .pillcard, .step, .card__media img, .nav a::after{
    transition: none !important;
  }
}

/* Responsive */
@media (max-width: 980px){
  .stats{ grid-template-columns: 1fr 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .pillgrid{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  .burger{ display:flex; }
  .nav{
    position:absolute;
    right:1rem;
    top: 76px;
    width: min(420px, calc(100% - 2rem));
    padding: .9rem;
    border-radius: var(--radius);
    border:1px solid rgba(10,18,34,.12);
    background: rgba(255,255,255,.94);
    box-shadow: var(--shadow);
    display:none;
    flex-direction: column;
    gap: .35rem;
  }
  .nav a{ padding:.75rem .6rem; border-radius: 12px; }
  .nav a:hover{ background: rgba(10,18,34,.04); }
  .navtoggle:checked ~ .nav{ display:flex; }

  .footer__inner{ grid-template-columns: 1fr; }
  .footer__cols{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }
}

/* Preise-Seite */
.hero--page{ padding: 3.15rem 0 2.25rem; }
.hero__bg--prices{
  background: url("images/porsche.jpg") center/cover no-repeat;
  filter: contrast(1.10) saturate(1.18);
}
.hero__overlay--prices{
  background:
    radial-gradient(900px 520px at 50% 25%, rgba(255,255,255,.05), rgba(255,255,255,.64) 72%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(244,247,251,.82) 78%);
}

.priceblock{
  max-width: 980px;
  margin: 1.4rem auto 0;
  padding-top: .15rem;
}
.priceblock h2{
  margin: 0 auto 1rem;
  max-width: 40ch;
}

.pricetable{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(10,18,34,.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadowSoft);
  text-align:left;
}
.pricetable__head{
  display:grid;
  grid-template-columns: 1fr 220px;
  gap: .75rem;
  padding: .95rem 1.1rem;
  background: rgba(10,18,34,.02);
  border-bottom: 1px solid rgba(10,18,34,.10);
  font-weight: 950;
  color: rgba(10,18,34,.78);
}
.pricetable__row{
  display:grid;
  grid-template-columns: 1fr 220px;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid rgba(10,18,34,.08);
  background: rgba(255,255,255,.72);
  transition: transform .12s ease, background .12s ease;
}
.pricetable__row:last-child{ border-bottom: none; }
.pricetable__row:hover{
  background: rgba(255,255,255,.92);
  transform: translateY(-1px);
}

.pricetable--3 .pricetable__head,
.pricetable--3 .pricetable__row{
  grid-template-columns: 1fr 240px;
}

.priceblock__text{
  margin: 1rem auto .85rem;
  max-width: 88ch;
  text-align:left;
}

.pricehint{
  display:flex;
  gap: .6rem;
  align-items:flex-start;
  max-width: 88ch;
  margin: 0 auto;
  text-align:left;
  color: rgba(10,18,34,.72);
  font-size: .98rem;
}
.checkdot{
  width: 12px;
  height: 12px;
  margin-top: .35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(40,180,120,.95), rgba(40,180,120,.70));
  box-shadow: 0 10px 20px rgba(10,18,34,.10);
  flex: 0 0 12px;
}

/* Responsive Tables */
@media (max-width: 860px){
  .pricetable__head,
  .pricetable__row{ grid-template-columns: 1fr; }
  .pricetable--3 .pricetable__head,
  .pricetable--3 .pricetable__row{ grid-template-columns: 1fr; }
  .pricetable__head span:last-child,
  .pricetable__row span:last-child{
    color: rgba(10,18,34,.86);
    font-weight: 950;
  }
}

/* =========================
   LOGO – 1,5x größer
   ========================= */
.brand__mark{
  width: 66px;
  height: 66px;
  border-radius: 18px;     /* leicht größer, passend zur neuen Größe */
  overflow: hidden;
}

.brand__logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.7);      /* statt 1.5 */
  transform-origin: center;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(10,18,34,.22));
}