/* SK-Beauty Buchung: Farben und Schriften der neuen Website. Nur Überschreibungen, keine Layoutänderung. */
:root{--ivory:#F4EEE5;--paper:#FAF7F1;--sand:#DFD1BF;--line:#D8CBBD;--ruby:#651C32;--ruby-dark:#431321;--ink:#302926;--muted:#71645B}
body{font-family:'Manrope','Manrope Fallback',Arial,sans-serif;color:var(--ink);background:var(--ivory)}
h1,h2,h3,.panel-title,.confirm-title,.storno-title,.umb-title{font-family:'Cormorant Garamond','Cormorant Fallback',Georgia,serif;font-weight:500}

/* Alte Variablen aus style.css auf die neuen Rollen legen (Statusfarbe --green bleibt) */
:root{
  --pink:var(--ruby);            /* #C8005A Primär */
  --pink-hover:var(--ruby-dark); /* #A80049 Hover */
  --pink-light:var(--ivory);     /* #FFF0F5 helle Auswahlfläche */
  --pink-mid:var(--sand);        /* #F7C5DC */
  --pink-border:var(--line);     /* #F0A0C8 Linie/Hover-Rand */
  --bg:var(--ivory);             /* #FAFAFA Seitenhintergrund */
  --gray-50:var(--paper);        /* #F7F5F6 */
  --gray-100:var(--ivory);       /* #F0EAED feine Linien */
  --gray-200:var(--line);        /* #E2D4DA Linien */
  --gray-400:var(--muted);       /* #B09AA5 Grautext */
  --gray-500:var(--muted);       /* #8C7480 Grautext */
  --gray-700:var(--ink);         /* #4A3540 Text */
  --gray-900:var(--ink);         /* #2A1520 Text */
  --shadow:0 2px 16px rgba(101,28,50,0.08);
  --shadow-sm:0 1px 6px rgba(101,28,50,0.05);
}

/* style.css: feste Pink-Schatten und -Flächen */
.step.active .step-circle{box-shadow:0 2px 8px rgba(101,28,50,0.3)}
.btn-primary{box-shadow:0 3px 12px rgba(101,28,50,0.3)}
.check-btn.checked{box-shadow:0 2px 6px rgba(101,28,50,0.25)}
.cal-day.selected{box-shadow:0 2px 8px rgba(101,28,50,0.3)}
.slot.selected{box-shadow:0 2px 8px rgba(101,28,50,0.25)}
.form-input:focus{box-shadow:0 0 0 4px rgba(101,28,50,0.08);background:var(--paper)}

/* Ausgewählt/heute: sichtbar absetzen (Ivory auf Weiss war zu schwach); Statusfarben bleiben */
.cal-day.today:not(.selected):not(.blocked){background:var(--sand)}
.service-card.selected,.pay-tab.active{background:var(--sand)}

/* iPhone: kein Safari-Zoom in Formularfeldern, Tippflächen mindestens 44px (nur Größen).
   Kalendertage bewusst ohne Mindestgröße: aspect-ratio:1 aus style.css bestimmt die Größe, sonst wird die Sonntagsspalte bei 320px abgeschnitten. */
input,select,textarea{font-size:max(16px,1rem)}
.form-input{font-size:max(16px,1rem)}
.service-card,.slot,.pay-tab,.btn-primary,.btn-secondary,.btn-action,.back-btn,.review-edit-btn,.help-link{min-height:44px}
.cal-nav-btn{width:44px;height:44px}
.help-link{min-width:44px}

/* Footer-Credit: Inline-Farbe ist Weiss auf weissem Footer, daher hier sichtbar machen (Markup unverändert) */
.footer-bottom a{color:var(--muted)!important}

/* Ohne Emojis (Timo, 02.10.): reine Icon-Halter ausblenden, Listen bekommen einen kleinen Rubin-Punkt,
   Häkchen als Status werden mit CSS gezeichnet. */
.service-thumb:empty,.summary-thumb:empty,.summary-empty-icon:empty,.studio-pay-icon:empty,.dsgvo-box-icon:empty,
.hinweis-icon:empty,.ft-icon:empty,.storno-icon:empty,.input-icon:empty{display:none}
.form-input-wrap .form-input{padding-left:14px}
.srow-icon:empty,.why-item>span:empty,.appt-row .icon:empty{width:6px;height:6px;border-radius:50%;background:var(--ruby);flex-shrink:0;align-self:center}
.check-btn.checked::after,.allergie-check-label.checked .allergie-check-box::after,.step.done .step-circle::after{content:'';width:5px;height:10px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-3px}
.confirm-icon:empty::after,.success-icon:empty::after{content:'';width:14px;height:28px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(45deg);margin-top:-6px}
@media(max-width:700px){.footer-trust{display:none}}
/* Kalender auf schmalen Displays: Spalten duerfen unter die Mindestbreite der Zellen (aspect-ratio + Zeilenhoehe) schrumpfen, sonst scrollt das Grid bei 320px */
.cal-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.cal-day,.cal-head{min-width:0}
@media(max-width:360px){.cal-day{padding:5px 0}}

/* Logo wie auf der Website (04.10.2026): Illustration + Schriftzug statt logo_sk-beauty.png */
.skb-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex-shrink:0}
.skb-brand img{width:31px;height:42px;object-fit:contain;mix-blend-mode:multiply;display:block}
.skb-brand>span{font-family:'Cormorant Garamond','Cormorant Fallback',Georgia,serif;font-size:24px;letter-spacing:1.5px;line-height:1;white-space:nowrap}
.skb-brand small{display:block;font:7px 'Manrope','Manrope Fallback',Arial,sans-serif;letter-spacing:1.8px;margin-top:6px}
@media(max-width:640px){.skb-brand{gap:7px}.skb-brand img{width:24px;height:33px}.skb-brand>span{font-size:19px;letter-spacing:1.2px}.skb-brand small{font-size:5.5px;letter-spacing:1.3px;margin-top:4px}}