
.kms-fp{
  --pink:#fecddc;
  --light:#fff4f7;
  --red:#8b0000;
  --ink:#57272f;
  --line:#edbdc8;
  --white:#fff;
  --shadow:0 25px 70px rgba(104,12,35,.13);
  width:min(1080px,calc(100% - 30px));
  margin:34px auto 70px;
  color:var(--ink);
  font-family:"Trebuchet MS",Arial,sans-serif;
  line-height:1.6;
}
.kms-fp *{box-sizing:border-box}
.kms-fp button,.kms-fp input,.kms-fp select,.kms-fp textarea{font:inherit}

.kms-progress{
  display:none;
  height:3px;
  background:#edbcc8;
  overflow:hidden;
}
.kms-progress div{
  height:100%;
  background:var(--red);
  transition:.2s;
}

.kms-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding:0 48px 18px;
  counter-reset:kms-step;
  color:#9a6570;
  font-size:13px;
}
.kms-steps span{
  counter-increment:kms-step;
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.kms-steps span::before{
  content:counter(kms-step);
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border:1px solid #dba8b4;
  border-radius:50%;
  font-family:Georgia,serif;
}
.kms-steps span.active{color:var(--red);font-weight:bold}
.kms-steps span.active::before{background:var(--red);color:white;border-color:var(--red)}
.kms-steps span.done::before{content:"✓";background:#edbcc8;color:var(--red);font-weight:bold}

#kms-feierplaner-form{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(139,0,0,.1);
  border-radius:24px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.kms-panel{
  display:none;
  padding:54px clamp(23px,7vw,76px) 48px;
  min-height:500px;
  background:transparent;
}
.kms-panel.active{display:block}
.kicker{
  color:var(--red);
  font-size:12px;
  font-weight:bold;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0 0 4px;
}
.kms-panel h2{
  font-family:Georgia,serif;
  color:var(--red);
  letter-spacing:-.03em;
  font-size:clamp(31px,4vw,44px);
  line-height:1.15;
  margin:4px 0 12px;
}
.kms-panel h3{
  font:700 23px Georgia,serif;
  color:var(--red);
  margin:30px 0 10px;
}
.kms-panel>p:not(.kicker),.section-note,.hint{color:#79515a}
.section-note,.hint{font-size:13px;margin:0 0 14px}

.choices,.products{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:22px 0;
}
.choices.compact{display:flex;flex-wrap:wrap}
.kms-panel[data-panel="2"] .products{grid-template-columns:repeat(2,minmax(0,1fr))}
.choices button,.products button{
  position:relative;
  display:grid;
  grid-template-columns:24px 1fr;
  align-items:center;
  gap:11px;
  min-height:58px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fffafb;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  transition:.18s;
}
.products button{
  grid-template-columns:24px 1fr auto;
  min-height:105px;
}
.choices button::before,.products button::before{
  content:"";
  width:22px;height:22px;
  border:1px solid #d8a2af;
  border-radius:50%;
  background:white;
  display:grid;
  place-items:center;
  color:white;
  font-size:12px;
  font-weight:bold;
}
.choices button:hover,.products button:hover{border-color:var(--red);transform:translateY(-1px)}
.choices button.on,.products button.on{
  border:2px solid var(--red);
  padding:13px 15px;
  background:#fff0f4;
}
.choices button.on::before,.products button.on::before{
  content:"✓";
  background:var(--red);
  border-color:var(--red);
}
.products button b,.products button small{display:block}
.products button small{color:#80545d;margin-top:3px}
.products button strong{
  color:var(--red);
  font-size:16px;
  white-space:nowrap;
}
.choices button.locked,.choices button:disabled{
  opacity:.45;cursor:not-allowed;transform:none;
}
.choices button.locked:hover,.choices button:disabled:hover{border-color:var(--line);transform:none}
.choices button.locked::before,.choices button:disabled::before{
  content:"×";background:#eadfe2;color:#9a6570;border-color:#d7b4bc;
}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:22px 0}
.grid.three{grid-template-columns:1.4fr 1fr 1fr}
.kms-fp label{display:flex;flex-direction:column;gap:7px;color:#682c36;font-size:14px;font-weight:bold}
.kms-fp input,.kms-fp select,.kms-fp textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid #dfb2bd;
  border-radius:9px;
  background:#fffdfd;
  color:var(--ink);
  outline:none;
}
.kms-fp input:focus,.kms-fp select:focus,.kms-fp textarea:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(139,0,0,.08);
}
.kms-fp textarea{resize:vertical}
.kms-fp small{color:#93646d;font-size:12px}

.info{
  display:flex;
  gap:18px;
  padding:17px 20px;
  border-radius:12px;
  background:#fff0d9;
  color:#69422e;
  margin-top:28px;
}
.info b{white-space:nowrap}

.counters{display:grid;gap:10px}
.counter{
  display:grid;
  grid-template-columns:1fr 34px 24px 34px;
  align-items:center;
  gap:10px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fffafb;
}
.counter span b,.counter span small{display:block}
.counter span small{color:#8a5a64;font-size:12px}
.counter button{
  width:32px;height:32px;
  border:1px solid var(--line);
  border-radius:50%;
  background:white;
  color:var(--red);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.counter strong{text-align:center}

.check{
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-start;
  gap:13px;
  padding:18px;
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fffafb;
  cursor:pointer;
}
.check input{width:20px;height:20px;accent-color:var(--red);margin-top:2px}
.check span b,.check span small{display:block}
.check span small{color:#8a5a64;font-weight:normal}

.extra-notes{margin:22px 0}
.extra-notes:empty{display:none}
.extra-notes h3{margin-bottom:12px}
.extra-note{
  display:grid;gap:4px;
  padding:17px 20px;
  margin:10px 0;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff7f9;
}
.extra-note span{color:#80545d}

.summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  margin:28px 0;
}
.summary>div{
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.summary>div:nth-child(odd){border-right:1px solid var(--line)}
.summary span,.summary b{display:block}
.summary span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#98636e;
}
.summary b{
  font:700 17px Georgia,serif;
  color:var(--red);
}

.pricebox{
  border:1px solid var(--line);
  border-radius:15px;
  background:#fffafb;
  padding:22px;
  margin:28px 0;
}
.pricebox h3{margin:0 0 13px!important}
.pricebox>div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px 0;
  border-top:1px solid #f0d4da;
}
.pricebox>div:first-of-type{border-top:0}
.pricebox>div b{color:var(--red);white-space:nowrap}
.pricebox .grand{
  border-top:2px solid var(--red);
  padding-top:16px;
  margin-top:5px;
  font-size:18px;
}
.pricebox .grand b{font:700 25px Georgia,serif;color:var(--red)}

.running{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:15px;
  padding:13px clamp(23px,7vw,76px);
  background:#fff5f7;
  border-top:1px solid #f0d5db;
}
.running span{color:#986b74;font-size:13px}
.running b{font:700 22px Georgia,serif;color:var(--red)}

.nav{
  min-height:78px;
  border-top:1px solid #f0d5db;
  padding:15px clamp(23px,7vw,76px);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
}
.nav .steptext{text-align:center;font-size:13px;color:#986b74}
.nav .next{justify-self:end}
.nav .back{justify-self:start}

.primary,.back,.print-plan{
  border-radius:999px;
  padding:12px 24px;
  font-weight:bold;
  cursor:pointer;
}
.primary{background:var(--red);color:white;border:1px solid var(--red)}
.primary:hover{background:#6d0000}
.back{border:0;background:none;color:var(--red);padding-left:0}
.back:disabled{opacity:.3}
.print-plan{background:white;color:var(--red);border:1px solid var(--red)}
.finish-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:28px}

#kms-message.success{
  display:flex;gap:18px;padding:17px 20px;border-radius:12px;
  background:#e9f4e8;color:#315d38;margin-top:22px;
}
#kms-message.error{
  margin:18px 0 0;padding:13px 16px;border:1px solid #d98a98;
  border-radius:10px;background:#fff0f2;color:#7d1024;font-size:13px;font-weight:bold;
}
.kms-hp{position:absolute!important;left:-9999px!important}
#breakfast.kms-unavailable .products{display:none}

@media(max-width:700px){
  .kms-fp{width:100%;margin:20px auto 40px}
  #kms-feierplaner-form{border-radius:0;border-left:0;border-right:0}
  .kms-steps{padding:0 5px 12px}
  .kms-steps span{justify-content:center;font-size:0}
  .kms-progress{display:block}
  .kms-panel{padding:36px 22px}
  .choices,.products,.kms-panel[data-panel="2"] .products,.grid,.grid.three,.summary{grid-template-columns:1fr}
  .summary>div:nth-child(odd){border-right:0}
  .info{flex-direction:column;gap:2px}
  .info b{white-space:normal}
  .nav{padding:13px 20px;grid-template-columns:1fr 1fr}
  .nav .steptext{display:none}
  .products button{grid-template-columns:24px 1fr}
  .products button strong{grid-column:2;white-space:normal;text-align:left}
  .running{justify-content:space-between}
  .finish-actions{flex-direction:column}
  .finish-actions button{width:100%}
}

@media print{
  body *{visibility:hidden!important}
  .kms-fp,.kms-fp *{visibility:visible!important}
  .kms-fp{position:absolute;left:0;top:0;width:100%;max-width:none;margin:0;color:#000}
  .kms-progress,.kms-steps,.kms-panel:not([data-panel="4"]),.running,.nav,.finish-actions,#kms-message{display:none!important}
  .kms-panel[data-panel="4"]{display:block!important;padding:18px}
  #kms-feierplaner-form{box-shadow:none;border:0}
}


/* 0.2.1 – Layout-Feinschliff nach Alex' Original */
.kms-fp{
  width:min(1120px,calc(100% - 26px));
}
.kms-panel{
  padding-top:48px;
  padding-bottom:42px;
}
.grid{
  gap:14px 16px;
}
.grid.three{
  grid-template-columns:1.35fr .95fr .95fr;
}
.kms-fp input,.kms-fp select,.kms-fp textarea{
  padding:11px 12px;
}
.kms-panel h3{
  margin-top:26px;
}
.kms-panel[data-panel="2"] .counters{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.kms-panel[data-panel="2"] .counter{
  min-height:66px;
  padding:12px 12px;
  grid-template-columns:minmax(0,1fr) 30px 22px 30px;
}
.kms-panel[data-panel="2"] .counter span b{
  line-height:1.25;
}
.kms-panel[data-panel="2"] .counter span small{
  margin-top:2px;
}
.kms-panel[data-panel="2"] .counter button{
  width:28px;
  height:28px;
  font-size:18px;
}
.kms-panel[data-panel="2"] .check{
  min-height:72px;
  align-items:center;
}
.kms-panel[data-panel="2"] .check span{
  flex:1;
}
.kms-panel[data-panel="2"] .check span b{
  font-size:14px;
}
.kms-panel[data-panel="2"] .check span small{
  margin-top:2px;
}
.kms-panel[data-panel="2"] .products button{
  min-height:96px;
}
.running{
  padding-top:11px;
  padding-bottom:11px;
}
.nav{
  min-height:72px;
}
@media(max-width:700px){
  .kms-panel[data-panel="2"] .counters{
    grid-template-columns:1fr;
  }
}


/* 0.2.2 – Schritt 2 wie Alex' Vorlage */
.kms-fp input[type="number"]{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  display:block !important;
  box-sizing:border-box !important;
  appearance:auto;
}
.kms-fp .grid label > small{
  min-height:18px;
  line-height:1.35;
  margin-top:1px;
}
.room-calc{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  margin-top:22px;
  padding:16px 20px;
  border-radius:12px;
  background:#fff0d9;
  color:#69422e;
}
.room-calc[hidden]{display:none!important}
.room-calc b{white-space:nowrap}
.room-calc span{font-size:13px}
.room-calc strong{
  color:var(--red);
  font:700 18px Georgia,serif;
  white-space:nowrap;
}
.room-note{
  min-height:22px;
  margin:8px 0 0 44px;
  color:#8f555f;
  font-size:12px;
}
@media(max-width:700px){
  .room-calc{
    grid-template-columns:1fr;
    gap:4px;
  }
  .room-note{margin-left:0}
}


/* 0.2.3 – einheitlicher Eckenradius für Eingabefelder */
.kms-fp input[type="date"],
.kms-fp input[type="number"]{
  border-radius:10px !important;
}


/* 0.2.4 – Abschlussbutton im Feierplaner-Rot */
.kms-fp button[type="submit"],
.kms-fp .submit,
.kms-fp .submit-button{
  background:#a90000 !important;
  border-color:#a90000 !important;
  color:#fff !important;
}
.kms-fp button[type="submit"]:hover,
.kms-fp .submit:hover,
.kms-fp .submit-button:hover{
  background:#8f0000 !important;
  border-color:#8f0000 !important;
  color:#fff !important;
}


/* 0.3.2 – einheitliche Auswahl-Häkchen für Getränke-Flatrate und Gespräch */
.kms-fp .check input[type="checkbox"]{
  -webkit-appearance:none !important;
  appearance:none !important;
  flex:0 0 20px !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  margin:0 !important;
  border:1px solid var(--line) !important;
  border-radius:50% !important;
  background:#fff !important;
  display:grid !important;
  place-content:center !important;
  cursor:pointer;
}
.kms-fp .check input[type="checkbox"]::before{
  content:"✓";
  font-size:13px;
  line-height:1;
  font-weight:700;
  color:#fff;
  transform:scale(0);
}
.kms-fp .check input[type="checkbox"]:checked{
  background:var(--red) !important;
  border-color:var(--red) !important;
}
.kms-fp .check input[type="checkbox"]:checked::before{transform:scale(1)}
.kms-fp .check:has(input[type="checkbox"]:checked){
  border-color:var(--red);
  background:#fff7f8;
}


/* =========================================================
   0.3.3 – FINALER TYPOGRAFIE- & AUSWAHL-ABGLEICH
   Einheitliche Hierarchie, unabhängig vom WordPress-Theme
   ========================================================= */

/* Grundschrift: alle normalen Inhalte */
.kms-fp,
.kms-fp button,
.kms-fp input,
.kms-fp select,
.kms-fp textarea,
.kms-fp label,
.kms-fp p,
.kms-fp span,
.kms-fp small{
  font-family:"Trebuchet MS",Arial,sans-serif;
}

/* Hauptüberschriften pro Schritt */
.kms-fp .kms-panel h2{
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(31px,4vw,44px) !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  letter-spacing:-.03em !important;
  color:var(--red) !important;
}

/* Zwischenüberschriften innerhalb eines Schrittes */
.kms-fp .kms-panel h3,
.kms-fp .extra-notes h3,
.kms-fp .pricebox h3{
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:23px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
  color:var(--red) !important;
}

/* Kleine Kapitelzeile: 01 · Der Anlass usw. */
.kms-fp .kicker{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase;
}

/* Normale Erklärtexte */
.kms-fp .kms-panel > p:not(.kicker),
.kms-fp .section-note,
.kms-fp .hint,
.kms-fp .extra-note span,
.kms-fp .room-calc span{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  color:#79515a !important;
}

/* Infoboxen: Überschrift + Erklärung */
.kms-fp .info b,
.kms-fp .extra-note b,
.kms-fp .room-calc b{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.45 !important;
}
.kms-fp .info span{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
}

/* Feldbeschriftungen */
.kms-fp label{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
}

/* Hilfetexte unter Feldern */
.kms-fp label > small,
.kms-fp .grid label > small,
.kms-fp .check span small,
.kms-fp .counter span small,
.kms-fp .products button small,
.kms-fp .room-note{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  color:#8a5a64 !important;
}

/* Texte der Auswahlkacheln */
.kms-fp .choices button,
.kms-fp .products button{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1.4 !important;
}
.kms-fp .products button b,
.kms-fp .counter span b,
.kms-fp .check span b{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
}

/* Einheitliche Häkchen-Geometrie für ALLE Auswahlarten */
.kms-fp .choices button::before,
.kms-fp .products button::before,
.kms-fp .check input[type="checkbox"]{
  box-sizing:border-box !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  flex:0 0 22px !important;
  border:1px solid #d8a2af !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* echte Checkboxen vom Browser komplett neutralisieren */
.kms-fp .check input[type="checkbox"]{
  -webkit-appearance:none !important;
  appearance:none !important;
  padding:0 !important;
  margin:0 !important;
  align-self:flex-start !important;
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
  outline:none !important;
  accent-color:transparent !important;
}

/* identisches weißes Häkchen */
.kms-fp .check input[type="checkbox"]::before{
  content:"✓" !important;
  display:block !important;
  font-family:Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1 !important;
  color:#fff !important;
  transform:scale(0) !important;
  transition:transform .12s ease !important;
}

/* aktive Auswahl: überall exakt gleich */
.kms-fp .choices button.on::before,
.kms-fp .products button.on::before,
.kms-fp .check input[type="checkbox"]:checked{
  background:var(--red) !important;
  border-color:var(--red) !important;
}

.kms-fp .check input[type="checkbox"]:checked::before{
  transform:scale(1) !important;
}

/* Die beiden großen Checkbox-Kacheln wie normale Auswahlkarten */
.kms-fp .check{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:11px !important;
  padding:17px 18px !important;
  border:1px solid var(--line) !important;
  border-radius:13px !important;
  background:#fffafb !important;
  color:var(--ink) !important;
}
.kms-fp .check:has(input[type="checkbox"]:checked){
  padding:16px 17px !important;
  border:2px solid var(--red) !important;
  background:#fff0f4 !important;
}

/* Georgia nur dort, wo Zahlen/Ergebnis bewusst hervorgehoben werden */
.kms-fp .summary b,
.kms-fp .pricebox .grand b,
.kms-fp .running b,
.kms-fp .room-calc strong{
  font-family:Georgia,"Times New Roman",serif !important;
}

/* Formulare dürfen keine Theme-Schrift einschleusen */
.kms-fp input,
.kms-fp select,
.kms-fp textarea{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
}

/* Buttons im Footer/Abschluss einheitlich */
.kms-fp .primary,
.kms-fp .back,
.kms-fp .print-plan{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
}


/* =========================================================
   0.3.4 – Kontaktfelder letzter Mohikaner
   Name / E-Mail / Telefon in ihren Grid-Spalten identisch breit
   ========================================================= */
.kms-fp .contact-grid label,
.kms-fp .contact-grid input,
.kms-fp .contact-grid textarea,
.kms-fp .contact-grid select{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

.kms-fp .contact-grid label{
  display:block !important;
}


/* =========================================================
   0.3.5 – Abschlussformular final
   WordPress/OceanWP behandelt input ohne type anders als
   email/tel. Deshalb Höhe/Boxmodell aller Kontaktinputs fix.
   ========================================================= */
.kms-fp .kms-panel[data-panel="4"] .grid input{
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:60px !important;
  min-height:60px !important;
  padding:11px 12px !important;
  margin:0 !important;
  border:1px solid #dfb2bd !important;
  border-radius:10px !important;
  background:#fffdfd !important;
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1.4 !important;
}
