/* ---------------------------------------------------------------------------
   Terminbuchung Porsche Zentrum Bern
   Gestaltung im Porsche-Look. Wenn die Hausschrift "Porsche Next" lizenziert
   vorliegt, genuegt es, sie unter --font einzutragen und die Webfont-Dateien
   im Ordner assets/fonts/ einzubinden.
   --------------------------------------------------------------------------- */

:root{
  --black:      #0b0b0c;
  --ink:        #1a1b1c;
  --grey-900:   #313639;
  --grey-600:   #6b6d70;
  --grey-300:   #c9cacb;
  --grey-150:   #e3e4e5;
  --grey-050:   #f4f4f4;
  --white:      #ffffff;
  --red:        #D5001C;
  --red-dark:   #b30018;
  --green:      #018a16;

  --font: "Porsche Next", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", Arial, sans-serif;

  --gap:   24px;
  --radius: 2px;   /* Porsche gestaltet betont kantig */
  --bar-h: 84px;

  --shadow: 0 2px 8px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.06);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  padding:0 0 calc(var(--bar-h) + 24px);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--grey-050);
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }

.is-hidden{ display:none !important; }

/* Sprachumschalter ----------------------------------------------------------
   Bewusst im normalen Textfluss statt position:fixed platziert: In einem
   iFrame waechst das Dokument auf die volle Inhaltshoehe (siehe die Ebene
   fuer die Datenschutzerklaerung weiter unten) – "fixed" laege dann weit
   ausserhalb des sichtbaren Bereichs. So bleibt der Umschalter zuverlaessig
   oben rechts, ob eingebettet oder als eigene Seite. */
.langswitch{
  display:flex; justify-content:flex-end; gap:6px; padding:14px 0 0;
}
.langswitch__btn{
  font:inherit; font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:6px 12px; border:1px solid var(--grey-300); border-radius:var(--radius);
  background:var(--white); color:var(--grey-600); cursor:pointer;
}
.langswitch__btn:hover{ border-color:var(--grey-600); color:var(--black); }
.langswitch__btn.is-on{ background:var(--black); border-color:var(--black); color:#fff; }
body.is-embed .langswitch{ padding-top:0; }

/* Kopfbereich -------------------------------------------------------------- */
.head{ padding:48px 0 32px; }
.head__brand{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey-600); margin-bottom:18px;
}
.head__brand::after{
  content:""; display:block; width:40px; height:3px;
  background:var(--red); margin-top:10px;
}
.head__title{
  margin:0; font-size:clamp(28px,4.4vw,44px); line-height:1.12;
  font-weight:600; letter-spacing:-.01em; color:var(--black);
}
.head__lead{ margin:12px 0 0; color:var(--grey-600); font-size:17px; }

/* Schrittanzeige ----------------------------------------------------------- */
.steps{
  display:flex; gap:8px; list-style:none; margin:0 0 24px; padding:0;
  border-bottom:1px solid var(--grey-150);
}
.steps__item{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px 13px 0; color:var(--grey-600); font-size:14px;
  position:relative;
}
.steps__item + .steps__item{ padding-left:20px; }
.steps__num{
  width:26px; height:26px; flex:0 0 26px; display:grid; place-items:center;
  border:1px solid var(--grey-300); border-radius:50%;
  font-size:13px; font-variant-numeric:tabular-nums;
}
.steps__item.is-active{ color:var(--black); font-weight:600; }
.steps__item.is-active .steps__num{ background:var(--red); border-color:var(--red); color:#fff; }
.steps__item.is-done .steps__num{ background:var(--black); border-color:var(--black); color:#fff; }
.steps__item.is-active::after{
  content:""; position:absolute; left:0; right:20px; bottom:-1px; height:2px; background:var(--red);
}
.steps__item:first-child.is-active::after{ left:0; }

@media (max-width:640px){
  .steps__label{ display:none; }
  .steps__item{ padding:14px 8px; }
  .steps__item + .steps__item{ padding-left:8px; }
}

/* Panels ------------------------------------------------------------------- */
.panel{
  background:var(--white); padding:32px; margin-bottom:24px;
  box-shadow:var(--shadow); border-radius:var(--radius);
}
.panel__title{ margin:0 0 8px; font-size:22px; font-weight:600; color:var(--black); }
.panel__lead{ margin:0 0 24px; color:var(--grey-600); }
.loading{ padding:32px 0; color:var(--grey-600); }
.footnote{ margin:20px 0 0; font-size:13px; color:var(--grey-600); }
.footnote b{ color:var(--red); }

@media (max-width:640px){ .panel{ padding:22px 18px; } }

/* Dienstleistungen --------------------------------------------------------- */
.services{ display:grid; gap:12px; }
.service{
  display:flex; align-items:flex-start; gap:16px;
  border:1px solid var(--grey-150); padding:18px 20px; cursor:pointer;
  transition:border-color .15s, background .15s, box-shadow .15s;
  background:var(--white);
}
.service:hover{ border-color:var(--grey-300); }
.service:has(input:focus-visible){ outline:2px solid var(--red); outline-offset:2px; }
.service.is-on{ border-color:var(--red); background:#fff8f8; }
.service input{ position:absolute; opacity:0; width:0; height:0; }
.service__box{
  width:22px; height:22px; flex:0 0 22px; margin-top:2px;
  border:1px solid var(--grey-300); display:grid; place-items:center;
  color:transparent; font-size:14px; line-height:1; transition:.15s;
}
.service.is-on .service__box{ background:var(--red); border-color:var(--red); color:#fff; }
.service__body{ flex:1 1 auto; min-width:0; }
.service__name{ font-weight:600; color:var(--black); }
.service__hint{ font-size:13px; color:var(--grey-600); margin-top:2px; }
.service__price{
  margin-left:auto; padding-left:16px; white-space:nowrap;
  font-variant-numeric:tabular-nums; font-weight:600; color:var(--black);
}
@media (max-width:560px){
  .service{ flex-wrap:wrap; }
  .service__price{ margin-left:38px; padding-left:0; }
}

/* Wochennavigation --------------------------------------------------------- */
.weeknav{ display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.weeknav__tabs{
  display:flex; gap:4px; overflow-x:auto; flex:1 1 auto;
  scrollbar-width:none;
}
.weeknav__tabs::-webkit-scrollbar{ display:none; }
.weektab{
  flex:0 0 auto; padding:9px 16px; border:1px solid var(--grey-150);
  background:var(--white); color:var(--grey-900); cursor:pointer;
  font:inherit; font-size:14px; white-space:nowrap; transition:.15s;
}
.weektab:hover{ border-color:var(--grey-300); }
.weektab.is-on{ background:var(--black); border-color:var(--black); color:#fff; font-weight:600; }
.weeknav__arrow{
  flex:0 0 auto; width:40px; height:40px; border:1px solid var(--grey-150);
  background:var(--white); cursor:pointer; font-size:17px; color:var(--grey-900);
  transition:.15s;
}
.weeknav__arrow:hover:not(:disabled){ border-color:var(--black); }
.weeknav__arrow:disabled{ opacity:.35; cursor:not-allowed; }

/* Kalender – Tabelle ab 860px --------------------------------------------- */
.caltable{ width:100%; border-collapse:collapse; }
.caltable th, .caltable td{ border:1px solid var(--grey-150); padding:0; }
.caltable thead th{
  background:var(--grey-050); padding:10px 8px; font-size:13px;
  font-weight:600; color:var(--black); text-align:center; line-height:1.3;
}
.caltable thead th span{ display:block; font-weight:400; color:var(--grey-600); font-size:12px; }
.caltable thead th.is-today{ background:var(--black); color:#fff; }
.caltable thead th.is-today span{ color:rgba(255,255,255,.7); }
.caltable td.timecol, .caltable th.timecol{
  width:74px; background:var(--grey-050); text-align:center;
  font-size:13px; font-variant-numeric:tabular-nums; color:var(--grey-900);
  padding:10px 6px;
}
.slot{
  width:100%; height:100%; min-height:52px; border:0; background:transparent;
  font:inherit; font-size:13px; cursor:pointer; padding:8px 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--black); transition:background .12s;
}
.slot:hover{ background:#fff2f3; }
.slot__time{ font-weight:600; font-variant-numeric:tabular-nums; }
.slot__free{ font-size:11px; color:var(--grey-600); }
.slot__free--last{ color:var(--red); font-weight:600; }
.slot.is-on{ background:var(--red); color:#fff; }
.slot.is-on .slot__free{ color:rgba(255,255,255,.85); }
.slot--off{
  min-height:52px; display:grid; place-items:center; font-size:12px;
  color:var(--grey-300);
  background:repeating-linear-gradient(135deg,#fafafa,#fafafa 6px,#f2f2f2 6px,#f2f2f2 12px);
}
.slot--none{ min-height:52px; background:#fbfbfb; }

/* Kalender – Tagesliste unter 860px --------------------------------------- */
.caldays{ display:grid; gap:14px; }
.calday{ border:1px solid var(--grey-150); }
.calday__head{
  background:var(--grey-050); padding:11px 14px; font-size:14px; font-weight:600;
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.calday__head.is-today{ background:var(--black); color:#fff; }
.calday__count{ font-weight:400; font-size:12px; color:var(--grey-600); }
.calday__head.is-today .calday__count{ color:rgba(255,255,255,.7); }
.calday__slots{ display:flex; flex-wrap:wrap; gap:8px; padding:14px; }
.chip{
  border:1px solid var(--grey-150); background:var(--white); cursor:pointer;
  font:inherit; font-size:14px; padding:10px 14px; min-width:88px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-variant-numeric:tabular-nums; transition:.15s;
}
.chip:hover{ border-color:var(--red); }
.chip.is-on{ background:var(--red); border-color:var(--red); color:#fff; }
.chip small{ font-size:11px; color:var(--grey-600); }
.chip.is-last small{ color:var(--red); }
.chip.is-on small{ color:rgba(255,255,255,.85); }
.chip--off{ color:var(--grey-300); cursor:not-allowed; background:var(--grey-050); }
.chip--off small{ color:var(--grey-300); }
.calday__empty{ padding:14px; color:var(--grey-600); font-size:14px; }

/* Zusammenfassung in Schritt 3 -------------------------------------------- */
.chosen{
  border-left:3px solid var(--red); background:var(--grey-050);
  padding:16px 20px; margin-bottom:28px; font-size:15px;
}
.chosen__when{ font-weight:600; color:var(--black); font-size:17px; }
.chosen__what{ color:var(--grey-600); margin-top:6px; font-size:14px; }

/* Formular ----------------------------------------------------------------- */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.field--wide{ grid-column:1 / -1; }
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; }
.field label{
  font-size:13px; color:var(--grey-900); margin-bottom:6px; font-weight:500;
}
.field label b{ color:var(--red); }
.field input, .field textarea{
  font:inherit; font-size:15px; padding:11px 13px;
  border:1px solid var(--grey-300); background:var(--white); color:var(--ink);
  border-radius:0; transition:border-color .15s, box-shadow .15s;
  width:100%;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--black); box-shadow:0 0 0 3px rgba(11,11,12,.08);
}
.field input.is-bad{ border-color:var(--red); background:#fff8f8; }
.field .hint{ font-size:12px; color:var(--grey-600); margin-top:5px; }
.field .err{ font-size:12px; color:var(--red); margin-top:5px; }

.fs{ border:0; padding:0; margin:0 0 20px; }
.fs__legend{ font-size:13px; color:var(--grey-900); font-weight:500; padding:0; margin-bottom:6px; }
.radios{ display:flex; gap:10px; }
.radio, .check{ display:inline-flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:15px; }
.radio input, .check input{ width:19px; height:19px; margin:1px 0 0; accent-color:var(--red); flex:0 0 19px; }
.radio{ border:1px solid var(--grey-300); padding:9px 16px; align-items:center; }
.radio:has(input:checked){ border-color:var(--red); background:#fff8f8; }

.checks{ display:grid; gap:12px; margin:24px 0; }
.consent{
  margin:24px 0 0; padding:18px 20px; background:var(--grey-050);
  border-left:3px solid var(--grey-300);
  display:flex; align-items:flex-start; gap:11px;
}
.consent:has(input:checked){ border-left-color:var(--green); }
.consent > input{ width:19px; height:19px; margin:2px 0 0; accent-color:var(--red);
  flex:0 0 19px; cursor:pointer; }
/* Der Link steht neben dem Label, nicht darin – sonst schaltet ein Klick
   darauf das Häkchen mit um. */
.consent__text{ font-size:15px; line-height:1.5; }
.consent__text label{ cursor:pointer; display:inline; margin:0; }
.consent__text label b{ color:var(--red); }
.consent__text a{ color:var(--black); }

/* Ebene mit der Datenschutzerklärung ------------------------------------- */
.sheet{ position:fixed; inset:0; z-index:40; display:flex;
  align-items:center; justify-content:center; padding:24px; }
.sheet[hidden]{ display:none; }
.sheet__bg{ position:absolute; inset:0; background:rgba(11,11,12,.55); }
.sheet__box{ position:relative; background:var(--white); width:min(760px,100%);
  max-height:min(86vh,900px); display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.3); }
.sheet__head{ display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--grey-150); flex:0 0 auto; }
.sheet__head strong{ font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey-600); font-weight:600; }
.sheet__close{ border:0; background:transparent; font-size:17px; cursor:pointer;
  color:var(--grey-600); padding:4px 8px; line-height:1; }
.sheet__close:hover{ color:var(--red); }
.sheet__body{ overflow-y:auto; padding:26px 32px; flex:1 1 auto;
  -webkit-overflow-scrolling:touch; }
.sheet__body h1{ font-size:22px; font-weight:600; margin:0 0 20px; color:var(--black); }
.sheet__body h2{ font-size:16px; font-weight:600; margin:26px 0 8px; color:var(--black); }
.sheet__body p{ margin:0 0 13px; color:var(--grey-900); line-height:1.6; font-size:15px; }
.sheet__foot{ display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 24px; border-top:1px solid var(--grey-150);
  background:var(--grey-050); flex:0 0 auto; }
.sheet__print{ font-size:13px; color:var(--grey-600); }
@media (max-width:640px){
  .sheet{ padding:0; }
  .sheet__box{ width:100%; max-height:100vh; height:100%; }
  .sheet__body{ padding:20px; }
}

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.formerror{
  margin-top:20px; padding:14px 18px; background:#fff2f3;
  border-left:3px solid var(--red); color:var(--red-dark); font-size:14px;
}

/* Bestaetigung ------------------------------------------------------------- */
.done{ text-align:center; padding:24px 0 12px; }
.done__mark{
  width:64px; height:64px; margin:0 auto 22px; border-radius:50%;
  background:var(--green); color:#fff; display:grid; place-items:center; font-size:30px;
}
.done__title{ margin:0 0 10px; font-size:26px; font-weight:600; color:var(--black); }
.done__lead{ margin:0 auto 22px; max-width:44ch; color:var(--grey-900); font-size:17px; }
.done__ref{
  display:inline-flex; align-items:baseline; gap:12px; margin:0 0 24px;
  border:1px solid var(--grey-150); padding:12px 22px;
}
.done__ref dt{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-600); }
.done__ref dd{ margin:0; font-weight:600; font-size:17px; font-variant-numeric:tabular-nums; }
.done__note{ font-size:14px; color:var(--grey-600); max-width:52ch; margin:0 auto 14px; }

/* Fussleiste --------------------------------------------------------------- */
.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:var(--white); border-top:1px solid var(--grey-150);
  box-shadow:0 -2px 14px rgba(0,0,0,.06);
}
.bar__inner{
  max-width:1080px; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; gap:20px; min-height:var(--bar-h);
}
.bar__sum{ flex:1 1 auto; min-width:0; }
.bar__label{ display:block; font-size:13px; color:var(--grey-600); }
.bar__total{ display:block; font-size:20px; font-weight:600; color:var(--black); font-variant-numeric:tabular-nums; }
.bar__actions{ display:flex; gap:10px; flex:0 0 auto; }

.btn{
  font:inherit; font-size:15px; font-weight:600; padding:13px 30px;
  border:1px solid transparent; cursor:pointer; border-radius:var(--radius);
  transition:background .15s, border-color .15s, color .15s, transform .05s;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--red); color:#fff; }
.btn--primary:hover:not(:disabled){ background:var(--red-dark); }
.btn--primary:disabled{ background:var(--grey-300); cursor:not-allowed; }
.btn--ghost{ background:transparent; border-color:var(--grey-300); color:var(--black); }
.btn--ghost:hover{ border-color:var(--black); }
.btn.is-busy{ opacity:.7; pointer-events:none; }

/* Handy: durchgehend kompakter, damit vom Bildschirm mehr fürs Formular bleibt.
   Besonders die Fussleiste – die steht dauerhaft im Bild und kostet sonst
   ein Sechstel der Höhe. */
@media (max-width:640px){
  :root{ --bar-h:58px; }
  body{ font-size:15px; padding-bottom:calc(var(--bar-h) + 12px); }

  .wrap{ padding:0 14px; }
  .langswitch{ padding-top:10px; }
  .langswitch__btn{ padding:5px 10px; font-size:11px; }
  .head{ padding:26px 0 18px; }
  .head__brand{ margin-bottom:12px; font-size:11px; }
  .head__brand::after{ margin-top:8px; }
  .head__lead{ font-size:15px; margin-top:8px; }
  .steps{ margin-bottom:16px; }
  .panel{ padding:20px 16px; margin-bottom:16px; }
  .panel__title{ font-size:19px; }
  .panel__lead{ margin-bottom:18px; font-size:14px; }

  .service{ padding:14px 15px; gap:12px; }
  .fs{ margin-bottom:16px; }
  .grid{ gap:14px; }
  .checks{ gap:11px; margin:18px 0; }
  .consent{ padding:14px 15px; margin-top:18px; }
  .chosen{ padding:13px 15px; margin-bottom:20px; }
  .chosen__when{ font-size:16px; }

  /* Fussleiste: eine Zeile statt zwei, kleinere Schrift, weniger Polster */
  .bar__inner{ padding:8px 14px; gap:10px; min-height:var(--bar-h); }
  .bar__sum{ display:flex; flex-direction:column; justify-content:center; }
  .bar__label{ font-size:11px; line-height:1.3; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .bar__total{ font-size:15px; line-height:1.3; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .bar__actions{ gap:6px; }
  .btn{ padding:10px 14px; font-size:14px; }
}

/* Sehr schmale Geräte: der Zurück-Knopf wird zum Pfeil */
@media (max-width:400px){
  .bar__inner{ padding:7px 12px; }
  .btn{ padding:10px 12px; font-size:13px; }
  #btnBack{ padding:10px; min-width:40px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* Einbettung in eine fremde Seite ------------------------------------------
   Im Rahmen darf die Fussleiste nicht kleben: «unten» waere dort das Ende des
   Rahmens, nicht das des Fensters. Sie steht deshalb am Ende des Inhalts. Der
   Hintergrund bleibt weiss, damit sich der Rahmen nicht als graues Rechteck
   von der einbettenden Seite abhebt. */
html.is-embed, body.is-embed{ background:var(--white); }

body.is-embed{
  padding:0;
  min-height:0;
}

body.is-embed .wrap{ padding-top:0; padding-bottom:0; }

body.is-embed .bar{
  position:static;
  box-shadow:none;
  border-top:1px solid var(--grey-150);
  margin-top:24px;
}

body.is-embed .bar__inner{ max-width:none; }

/* Die Datenschutz-Ebene deckt im Rahmen nur den Rahmen ab. Das ist richtig so,
   sie darf aber nicht hoeher werden als der sichtbare Ausschnitt. */
/* Aufgeklappt statt schwebend: siehe app.js, initPrivacySheet(). */
.sheet--inline{ position:static; inset:auto; display:block; z-index:auto;
                margin:14px 0 0; padding:0; }
.sheet--inline .sheet__bg{ display:none; }
.sheet--inline .sheet__box{
  width:100%; max-width:none; max-height:none; box-shadow:none;
  border:1px solid var(--grey-150);
}
.sheet--inline .sheet__body{ overflow:visible; max-height:none; padding:22px 24px; }
@media (max-width:640px){
  .sheet--inline .sheet__body{ padding:18px 16px; }
}

@media (max-width:640px){
  body.is-embed .bar{ margin-top:16px; }
}