/*!
 * RINGTAXI UI – Consolidated CSS
 * Version: 1.3.1  (2025-09-10)
 *
 * Changelog:
 * - Entfernt: IE-only Selektor ::-ms-expand (verursachte Warnung)
 * - iOS Safari: width:-webkit-fill-available jetzt in echter @supports-Query
 * - Wrap-Trim für iOS (overflow-x) bleibt separat bestehen
 * - Rest unverändert gegenüber 1.3.0
 */

/* ==============================================
   1) Karten-Komponente (rtc-*)
   ============================================== */

/* Karten-Variablen + Grundlayout */
.rtc-card{
  --rtc-brand: #d40000;
  --rtc-muted: #6b7280;
  --rtc-title-size: clamp(1rem, 1.4vw, 1.25rem);
  --rtc-sub-size:   clamp(.95rem,  1.1vw, 1.02rem);
  --rtc-text-size:  1rem;

  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Hover (global beibehalten) */
.rtc-card:hover{
  transform: translateY(-4px);
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}

/* Bild */
.rtc-thumb{
  aspect-ratio:16/9;
  overflow:hidden;
  display:block;
  position:relative;
}
.rtc-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Inhalt */
.rtc-body{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:16px;
}

/* Titel + Subheadline */
.rtc-title{
  margin:0;
  font-size:var(--rtc-title-size);
  line-height:1.2;
  letter-spacing:.2px;
}
.rtc-sub{
  margin:.25rem 0 .15rem;
  font-size:var(--rtc-sub-size);
  line-height:1.25;
  color:var(--rtc-brand);
}

/* Spezifikationen */
.rtc-specs{
  display:grid;
  gap:.28rem;
  margin:.25rem 0 .35rem;
  font-size:var(--rtc-text-size);
}
.rtc-row{
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:.55rem;
  align-items:baseline;
}
.rtc-specs dt{ font-weight:700; white-space:nowrap }
.rtc-specs dd{ margin:0 }
.nowrap{ white-space:nowrap }

/* Hinweistext (optional) */
.rtc-note{
  margin-top:.15rem;
  color:var(--rtc-muted);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* CTA-Buttons */
.rtc-cta{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.rtc-btn{
  flex:1 1 0;
  text-align:center;
  line-height:1;
  font-weight:700;
  padding:.68rem 1rem;
  border-radius:12px;
  text-decoration:none;
  transition: transform .05s ease, opacity .15s ease, box-shadow .15s ease;
}
.rtc-btn,
.rtc-btn:visited{
  color:#fff !important; /* Einheitliche Textfarbe & visited-Fix */
}
.rtc-btn:hover{ opacity:.92 }
.rtc-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.18);
}

.rtc-btn-detail{ background:#111; color:#fff }
.rtc-btn-detail:hover{
  background:#333; /* klare sichtbare Veränderung */
  color:#fff !important;
}
.rtc-btn-detail:active{ transform: translateY(1px) }

.rtc-btn-shop{ background:var(--rtc-brand); color:#fff }
.rtc-btn-shop:hover{
  background:#b60000; /* dunkler als #d40000 */
  color:#fff !important;
}
.rtc-btn-shop:active{ transform: translateY(1px) }
.rtc-btn-shop:focus-visible{
  box-shadow: 0 0 0 3px rgba(212,0,0,.35);
}

/* Optional modern: sanft abdunkeln mit color-mix (Fallbacks oben) */
@supports (background: color-mix(in srgb, red 90%, black 10%)) {
  .rtc-btn-detail:hover { background: color-mix(in srgb, #111 85%, black 15%); }
  .rtc-btn-shop:hover   { background: color-mix(in srgb, var(--rtc-brand) 85%, black 15%); }
}

/* Preis-Badge im Bild */
.rtc-price-badge{
  position:absolute; bottom:10px; right:10px;
  background:var(--rtc-brand); color:#fff;
  font-weight:800; font-size:clamp(.9rem,1.8vw,1.05rem);
  padding:.35rem .65rem; border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.2); line-height:1.1;
}

/* Feature-Badges (Chips) */
.rtc-feats{
  display:flex;
  flex-wrap:wrap;
  gap:.38rem .45rem;
  margin:.28rem 0 .4rem;
}
.rtc-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .58rem;
  border:1px solid #e5e7eb;
  background:#fafafa;
  color:#111;
  border-radius:999px;
  line-height:1.1;
  font-size:.95rem;
  white-space:nowrap;
}
.rtc-chip-label{ color:var(--rtc-muted) }
.rtc-chip-val{ font-weight:700 }

/* Desktop vs Mobile Labels */
.rtc-chip-label--short{ display:none }
@media (max-width:560px){
  .rtc-chip-label--long{ display:none }
  .rtc-chip-label--short{ display:inline }
}

/* ==============================================
   2) Responsive & Motion
   ============================================== */

@media (max-width: 900px){
  .rtc-card{
    --rtc-title-size: clamp(1.12rem, 2vw, 1.35rem);
    --rtc-sub-size:   clamp(.9rem,  1.6vw, .98rem);
  }
  .rtc-body{ padding:14px }
  .rtc-cta{ flex-direction:column; align-items:stretch; margin-top:.7rem }
  .rtc-btn{ width:100%; flex:0 0 auto; padding:.72rem 1rem }
}

@media (max-width: 600px){
  .rtc-card{
    --rtc-title-size: clamp(1.06rem, 5vw, 1.25rem);
    --rtc-sub-size:   clamp(.9rem,  3.5vw, 1rem);
  }
  .rtc-cta{ margin-top:.6rem }
}

/* Nutzer mit reduzierter Bewegung */
@media (prefers-reduced-motion: reduce){
  .rtc-card, .rtc-btn{ transition:none }
}

/* Optional: Hover nur auf Geräten mit Hover
   (Der globale Hover oben bleibt bewusst bestehen) */
@media (hover:hover){
  .rtc-card:hover{
    transform: translateY(-4px);
    box-shadow:0 8px 22px rgba(0,0,0,.16);
  }
}

/* ==============================================
   3) Startseite – Badge-Overlay (.rt-badge-area)
   ============================================== */

/* Grid-Stack: Heading über Bild */
.rt-badge-area .wp-block-column{ display:grid }
.rt-badge-area .wp-block-column > .wp-block-image,
.rt-badge-area .wp-block-column > .wp-block-heading{ grid-area:1 / 1 }

/* Bild-Wrapper sauber runden + schneiden */
.rt-badge-area .wp-block-image{
  margin:0 !important;
  border-radius:12px;   /* Wrapper rund */
  overflow:hidden;      /* schneidet Bild & Overlay sauber */
}
.rt-badge-area .wp-block-image > a{
  display:block;
  border-radius:inherit; /* Link rund */
}
.rt-badge-area .wp-block-image img{
  display:block; width:100%; height:auto; object-fit:cover;
  border-radius:inherit; /* Bild übernimmt 12px */
}

/* Optional: feste 3:2-Darstellung (passend zu 1024×683) */
@supports (aspect-ratio: 3 / 2){
  .rt-badge-area .wp-block-image{ aspect-ratio:3/2; }
  .rt-badge-area .wp-block-image img{ height:100%; object-fit:cover; }
}

/* Heading-Overlay (Badge) */
.rt-badge-area .wp-block-heading{
  position:relative; z-index:2; pointer-events:none;
  align-self:start; justify-self:stretch;
  margin:0 !important; padding:10px 14px !important;
  background:#e4020a; color:#fff; text-transform:uppercase; font-weight:700;
  font-size:clamp(12px,1.5vw,22px); text-align:center; line-height:1.1 !important; letter-spacing:.2px;
  border-radius:0 !important;
  border-top-left-radius:12px !important;
  border-top-right-radius:12px !important;
  box-shadow:none !important;
}

/* Spalten-Gaps harmonisieren */
.rt-badge-area .wp-block-columns,
.rt-badge-area [class*="wp-container-core-columns-"]{
  flex-wrap:wrap !important;
  gap:2rem;
}

/* WP-Group/Column Reset */
.rt-badge-area .wp-block-group,
.rt-badge-area .wp-block-column{
  --wp--style--block-gap:0;
  margin:0 !important;
}

/* Responsive Gaps + kompaktere Heading-Polsterung */
@media (max-width:900px){
  .rt-badge-area .wp-block-columns,
  .rt-badge-area [class*="wp-container-core-columns-"]{ gap:1.25rem !important }
}
@media (max-width:600px){
  .rt-badge-area .wp-block-columns,
  .rt-badge-area [class*="wp-container-core-columns-"]{ gap:.6rem !important }
  .rt-badge-area .wp-block-heading{
    padding:8px 10px !important;
    font-size:clamp(11px,3.3vw,14px);
  }
}

/* ==============================================
   4) Inquiry Modal (dialog.rtc-inquiry-dialog + WPCF7)
   ============================================== */

/* Dialog: EINZIGER Scrollbereich */
dialog.rtc-inquiry-dialog{
  width: min(720px, 92vw);
  max-width: 92vw;
  max-height: 88dvh;              /* stabil gegen mobile Toolbars */
  background: #fff;
  border: 0;
  border-radius: 14px;
  padding: 0;
  overflow: auto;                  /* scrollt selbst */
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  z-index: 2147483647;
}
dialog.rtc-inquiry-dialog::backdrop{ background: rgba(0,0,0,.45); }

/* Innenabstand */
.rtc-inq-body{
  box-sizing: border-box;
  padding: 16px 14px 14px;
}

/* Close-X Container (rechts oben) */
dialog.rtc-inquiry-dialog > form[method="dialog"]{
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px 0;
}

/* Close-X – klein, ohne Kreis/Rand; dezente Fokus-Kontur */
.rtc-inq-close{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 28px; height: 28px;
  line-height: 1; font-size: 20px; color: #333;
  border-radius: 6px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rtc-inq-close:hover{ color:#000 }
.rtc-inq-close:focus{ outline: none; }
.rtc-inq-close:focus-visible{
  outline: 2px solid rgba(0,0,0,.25); outline-offset: 2px;
}
.rtc-inq-close::-moz-focus-inner{ border: 0; }

/* ---------- Contact Form 7 – Layout & Felder ---------- */

dialog.rtc-inquiry-dialog .wpcf7,
dialog.rtc-inquiry-dialog .wpcf7 form,
dialog.rtc-inquiry-dialog .wpcf7 .wpcf7-form-control-wrap{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;           /* wichtig in Flex/Grid-Umgebungen */
  box-sizing:border-box;
  overflow-x:hidden;
}
dialog.rtc-inquiry-dialog .wpcf7 form p{ margin:0 0 .85rem }

/* Einheitliche Feldhöhe */
dialog.rtc-inquiry-dialog{ --rtc-field-h: 46px; }

dialog.rtc-inquiry-dialog .wpcf7 input[type="text"],
dialog.rtc-inquiry-dialog .wpcf7 input[type="email"],
dialog.rtc-inquiry-dialog .wpcf7 input[type="tel"],
dialog.rtc-inquiry-dialog .wpcf7 input[type="number"],
dialog.rtc-inquiry-dialog .wpcf7 input[type="date"],
dialog.rtc-inquiry-dialog .wpcf7 select{
  display:block;
  width:100%; max-width:100%;
  height: var(--rtc-field-h);
  line-height: calc(var(--rtc-field-h) - 2px);
  padding: 0 12px;                 /* Höhe kommt über height */
  box-sizing: border-box;
  background:#fff; color:#111;
  border:1px solid #e5e7eb; border-radius:10px;
  font:inherit; transition:border-color .15s, box-shadow .15s;
}

/* iOS/Safari: Basis-Fix für Date-Feld (Breite & Alignment) */
dialog.rtc-inquiry-dialog .wpcf7 input[type="date"]{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;           /* iOS verhindert Überbreite */
  height:var(--rtc-field-h) !important;
  line-height:calc(var(--rtc-field-h) - 2px) !important;
  padding:0 12px !important;
  box-sizing:border-box;

  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:10px !important;
  color:#111 !important;

  text-align:left !important;
  text-align-last:left !important;
}
/* WebKit-Subparts linksbündig + ohne Extra-Padding */
dialog.rtc-inquiry-dialog .wpcf7 input[type="date"]::-webkit-date-and-time-value{ text-align:left; }
dialog.rtc-inquiry-dialog .wpcf7 input[type="date"]::-webkit-datetime-edit{ text-align:left; padding:0; }
dialog.rtc-inquiry-dialog .wpcf7 input[type="date"]::-webkit-datetime-edit-fields-wrapper{ padding:0; }
dialog.rtc-inquiry-dialog .wpcf7 input[type="date"]::-webkit-datetime-edit-month-field,
dialog.rtc-inquiry-dialog .wpcf7 input[type="date"]::-webkit-datetime-edit-day-field,
dialog.rtc-inquiry-dialog .wpcf7 input[type="date"]::-webkit-datetime-edit-year-field{
  text-align:left;
}

/* Fokuszustand */
dialog.rtc-inquiry-dialog .wpcf7 input:focus,
dialog.rtc-inquiry-dialog .wpcf7 select:focus,
dialog.rtc-inquiry-dialog .wpcf7 textarea:focus{
  outline:0; border-color:#d40000; box-shadow:0 0 0 3px rgba(212,0,0,.15);
}

/* Select – dezenter Pfeil (IE-Expand entfernt) */
dialog.rtc-inquiry-dialog .wpcf7 select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:36px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 12px center / 12px 8px;
}
/* (entfernt) dialog.rtc-inquiry-dialog .wpcf7 select::-ms-expand{ display:none; } */

/* Textarea kompakt */
dialog.rtc-inquiry-dialog .wpcf7 textarea{
  display:block; width:100%; max-width:100%;
  height:100px !important; min-height:90px; max-height:180px;
  padding:10px 12px; box-sizing:border-box;
  background:#fff; color:#111;
  border:1px solid #e5e7eb; border-radius:10px;
  font:inherit; resize:vertical;
}

/* Submit im Brand-Style */
dialog.rtc-inquiry-dialog .wpcf7 input[type="submit"]{
  background:#d40000; color:#fff; border:0;
  font-weight:700; padding:.8rem 1.1rem;
  border-radius:12px; cursor:pointer;
}
dialog.rtc-inquiry-dialog .wpcf7 input[type="submit"]:hover{ filter:brightness(.95) }
dialog.rtc-inquiry-dialog .wpcf7 input[type="submit"]:focus-visible{
  outline:0; box-shadow:0 0 0 3px rgba(212,0,0,.35);
}

/* Seite im Hintergrund nicht scrollen (ohne JS) */
html:has(dialog[open]){ overflow:hidden; }

/* Mobile: Fullscreen Sheet */
@media (max-width:640px){
  dialog.rtc-inquiry-dialog[open]{
    width:100vw; max-width:100vw;
    height:100dvh; max-height:100dvh;
    margin:0; border-radius:0;
  }
  .rtc-inq-body{ padding:14px 12px 16px; }
  .rtc-inq-close{ font-size:18px; width:26px; height:26px; }
  dialog.rtc-inquiry-dialog .wpcf7 textarea{
    height:90px !important; max-height:160px;
  }
}

/* iOS Safari – Date width clamp (nur wenn unterstützt) */
@supports (width: -webkit-fill-available) {
  dialog.rtc-inquiry-dialog .wpcf7 input[type="date"]{
    width: -webkit-fill-available !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* übrige Styles kommen aus der Basis-Regel oben */
  }
}

/* iOS Safari – Wrap-Trim (separat, ohne width) */
@supports (-webkit-touch-callout: none) {
  dialog.rtc-inquiry-dialog .wpcf7 .wpcf7-form-control-wrap{
    overflow-x: hidden; /* trimmt jeden rechten Überstand */
  }
}


/* RINGTAXI – Mini Hero Slider • v1.0.3 – RevSlider-Sizing & Focus */

/* Full-bleed bleibt */
.rtc-hero{
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  /* RevSlider-ähnliche fixe Höhe (Desktop ~399px) */
  --hero-h: 399px;
}
@media (max-width: 1199px){ .rtc-hero{ --hero-h: 340px; } } /* Tablet */
@media (max-width: 700px){  .rtc-hero{ --hero-h: 240px; } } /* Phone */

.rtc-hero-slider{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  gap:0; padding:0;
  border-radius:0; background:transparent; box-shadow:none;
}

.rtc-hero-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  position:relative;
  border-radius:0; overflow:hidden;
  height: var(--hero-h);      /* statt aspect-ratio */
}

.rtc-hero-slide img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  object-position:center center; /* Default, wird unten je Slide überschrieben */
}

/* Pfeile weiterhin aus */
.rtc-hero-nav{ display:none !important; }

/* ---- Fokus je Slide (aus deinen data-bg p:X% Y% übernommen) ---- */
#hero-slider .rtc-hero-slide:nth-child(1) img{ object-position: 50% 65%; } /* AMG GT Black Series */
#hero-slider .rtc-hero-slide:nth-child(2) img{ object-position: 50% 80%; } /* Porsche GT3 RS */
#hero-slider .rtc-hero-slide:nth-child(3) img{ object-position: 60% 80%; } /* GT3 RS Doppel */
#hero-slider .rtc-hero-slide:nth-child(4) img{ object-position: 50% 70%; } /* 992 Turbo */
#hero-slider .rtc-hero-slide:nth-child(5) img{ object-position: 50% 50%; } /* Header 2022-03 (kein p angegeben) */
#hero-slider .rtc-hero-slide:nth-child(6) img{ object-position: 50% 65%; } /* 718 Cayman GT4 */
#hero-slider .rtc-hero-slide:nth-child(7) img{ object-position: 50% 50%; } /* Header 2022-01 (kein p angegeben) */