/* =========================================================
   CLS Speisekarte – Frontend (clean)
   - Basis Styles für Sections/Items
   - Accordion (FAQ-Stil) inkl. smoother Fade/Expand
   ========================================================= */

/* -------------------------
   Sections / Kategorien
   ------------------------- */

.cls-menu-section {
  margin: 1.25rem 0 2rem;
}

.cls-menu-title {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 600;
  
}

/* Unterkategorien optisch einrücken */
.cls-menu-subsections {
  margin-top: 1.25rem;
  margin-left: 0;
  padding-left: 0;
  border-left: 0px solid rgba(0,0,0,0.06);
}

/* -------------------------
   Gerichte / Items
   ------------------------- */

.cls-menu-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cls-menu-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.1rem 0;
}

.cls-menu-item-left {
  flex: 1 1 auto;
  min-width: 0;
}

.cls-menu-item-name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  font-weight: 500;
}

.cls-menu-item-number {
  display: inline-block;
  min-width: 2.5ch;
  text-align: right;
  font-weight: 400;
  color: #666;
  margin-right: 0.2em;
}

.cls-menu-item-title {
  font-weight: 600;
}

.cls-menu-item-desc {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  opacity: 0.8;
}

.cls-menu-item-right {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.cls-menu-separator {
  margin: 0;
  border: 0;
  border-top: 2px dotted #ccc;
}

/* -------------------------
   Info / Legende
   ------------------------- */

.cls-menu-section-info {
  margin-top: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.cls-menu-legend-title {
  display: none;
}

.cls-menu-legend-text {
  margin-top: 0.75rem;
  font-size: 0.8em;
  text-align: right;
}

/* =========================================================
   Accordion
   ========================================================= */

.cls-menu-accordion {
  margin: 0;
}

/* Item */
.cls-acc {
  background:rgba(255,255,255,.15);;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 2px;
  margin: 6px 30px;
  overflow: hidden;
/*-webkit-box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.15); 
box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.15);*/

}

/* Button */
.cls-acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;

  cursor: pointer;
  text-align: left;

  font-size: 1.1rem;
  font-weight: 700;
  font-family: inherit;

  color: var(--waldhorn-dark-grey);

  appearance: none;
  -webkit-appearance: none;
}

.cls-acc-btn:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.cls-acc-title {
  flex: 1;
  font-weight: 600;
  color: var(--waldhorn-dark-grey);
}

.cls-acc-icon,
.cls-acc-icon i {
  color: inherit;
}

/* Icon (optional rotieren, wenn du willst – sonst weglassen) */
.cls-acc-icon i {
  transition: transform 0.2s ease;
}
.cls-acc.is-open .cls-acc-icon i {
  transform: rotate(180deg);
}

/* Panel – Smooth expand + fade
   Voraussetzung: dein JS setzt .is-open auf .cls-acc beim Öffnen */
.cls-acc-panel {
  padding: 0; /* padding kommt in inner wrapper, damit collapse sauber ist */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;

  transition:
    grid-template-rows 0.7s cubic-bezier(.4,0,.2,1),
    opacity 0.4s ease;
}

.cls-acc-panel-inner {
  overflow: hidden;
  padding: 8px 5% 10px 16px;
}

/* OPEN */
.cls-acc.is-open .cls-acc-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Spacing innen entschärfen, damit es nicht doppelt „blockig“ wirkt */
.cls-acc-panel-inner .cls-menu-section {
  margin-top: 10px;
}

/* Mobile: etwas kompakter */
@media (max-width: 575.98px) {

  .cls-acc {
  
  margin: 6px 0;
  

}
  .cls-acc-btn {
    font-size: 1rem;
    padding: 12px 14px;
  }

  .cls-acc-panel-inner {
    padding: 8px 14px 14px;
  }

  .cls-menu-item {
    gap: 0.75rem;
  }
}




.cls-menu-section-info--before {
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.cls-menu-section-info {
  margin-top: 0.75rem;
}



.cls-menu-footer-note {
  margin-top: 3rem;
  font-size: 0.8rem;
  text-align: center;
  opacity: 0.7;
}



.cls-menu-heading {
  margin: 1.25rem 0 0.75rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Hauptkategorie, beispielsweise „Speisen“ */
h2.cls-menu-heading {
     text-align: center;
  font-weight: 300;
  font-size: 1.7rem;
  margin: 35px 0;

}

/* Zwischenkategorie, beispielsweise „Pasta-Teigwaren“ */
h3.cls-menu-heading {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
}

/* Abstand nach dem vollständigen Zwischenkategorie-Block */
.cls-menu-branch {
  margin-bottom: 2.5rem;
}



.cls-menu-heading-content{
  margin: 0 0 1rem;
}



/* =========================================================
   Zwischenkategorie ohne verschachtelte Accordions
   Beispiel: Paste-Teigwaren > Spaghetti / Rigatoni / Penne
   ========================================================= */

.cls-menu-plain-branch {
  margin: 2.5rem 0 3rem;
}

/* Zwischenkategorie, z. B. Paste-Teigwaren */
.cls-menu-plain-branch > .cls-menu-heading {
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 700;
}

/* Einzelne Gruppe, z. B. Spaghetti */
.cls-menu-plain-group {
  margin: 0;
}

/* Überschrift Spaghetti / Rigatoni / Penne */
.cls-menu-plain-group-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
}

/* Gerichte innerhalb der flachen Gruppe etwas kompakter */
.cls-menu-plain-group .cls-menu-item {
  padding: 0.85rem 0;
}

/* Trennlinie zwischen Spaghetti, Rigatoni und Penne */
.cls-menu-group-separator {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}






/* Modal (Allergene/Zusatzstoffe) */
.cls-aamodal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.cls-aamodal.is-open { display: block; }

.cls-aamodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.cls-aamodal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 32px));
  max-height: min(80vh, 720px);
  overflow: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.cls-aamodal__head {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cls-aamodal__title { font-weight: 700; }

.cls-aamodal__close {
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.cls-aamodal__body { padding: 14px 16px; }

.cls-aamodal__section + .cls-aamodal__section { margin-top: 14px; }

.cls-aamodal__section-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.cls-aamodal__foot {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.cls-aamodal__btn {
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* Badge-Optik */
.cls-aa-badge {
  display: inline-block;
  border: 1px solid rgba(0,0,0,.12);
  padding: 4px 8px;
  border-radius: 999px;
  margin: 0 6px 6px 0;
  font-size: 13px;
  line-height: 1.2;
}

/* Link/Button unaufdringlich */
.cls-allergen-btn {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  font-size: .7em;
  cursor: pointer;
  opacity: .75;
  color:grey;
}



.cls-allergen-btn:hover { opacity: 1; }






.cls-daily-simple-text {

  font-family: 'Amatic SC', sans-serif;
  font-size: 3em;
  line-height: 1.3;
  color:#fff;
  rotate: -0.4 deg;

}

.cls-daily-simple-text p {
  margin: 0 0 0.75rem;
}

.cls-daily-simple-text p:last-child {
  margin-bottom: 0;
}

.cls-daily--red {
  color: #b42318;
}

.cls-daily--green {
  color: #287a3d;
}

.cls-daily--muted {
  color: #777;
}

.cls-daily--large {
  font-size: 1.2em;
}

.cls-daily--small {
  font-size: 0.85em;
}



.cls-daily-simple-text .cls-daily-heading {
    display:block;
  margin:1.4rem 0 .45rem;
  font-size:4rem;
  font-weight:700;
  color:#fff;
  line-height:1.2;
}

.cls-daily-simple-text .cls-daily-heading:first-child{
  margin-top:0;
}







/* =========================================================
   Tagesessen – Simple-Modus
   ========================================================= */

.cls-daily-wrap--simple {
    font-family: 'Amatic SC', sans-serif;
  font-size: 3em;
  line-height: 1.3;
  color:#fff;
  rotate: -0.4 deg;
  margin: 1.5rem 0;
}

.cls-daily-wrap--simple .cls-daily-title {
   font-family: 'Amatic SC', sans-serif;
  margin: 0 0 1rem;
  font-size: 4rem;
  
  font-weight: 700;
   color:#fff;
}

.cls-daily-simple-items {
  display: flex;
  flex-direction: column;
}

.cls-daily-simple-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 0;
}



.cls-daily-simple-item-main {
  flex: 1 1 auto;
  min-width: 0;
}

.cls-daily-simple-item-name {
  font-weight: 700;
}

.cls-daily-simple-item-description {
  margin-top: 0.2rem;
  font-size: 2.7rem;
  line-height: 1.45;
  opacity: 0.8;
}

.cls-daily-simple-item-price {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
  font-size: 4rem;
}

@media (max-width: 575.98px) {
  .cls-daily-simple-item {
    gap: 0.75rem;
  }

  .cls-daily-wrap--simple .cls-daily-title {
    font-size: 3rem;
  }
}


@media (max-width: 991.98px){

  h2.cls-menu-heading {
    text-align: center;
  }

  .cls-daily-wrap--simple {
    font-size: 2.4rem;
  }

.cls-daily-simple-text {

  
  font-size: 2rem;
 

}

.cls-daily-simple-item-description {
 
  font-size: 2rem;
  line-height: 1.2;
 
}
.cls-daily-simple-text .cls-daily-heading {
  
  font-size:3rem;
  
}

.cls-daily-simple-item-price {
  
  font-size: 2.4rem;
}

}

/* =========================================================
   Handgezeichnete Kreide-Trenner
   ========================================================= */

.cls-daily-chalk-separator {
  width: 80%;
  height: 14px;
  margin: 0.7rem 0 0.9rem;

  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;

  opacity: 1;
  transform-origin: left center;
  box-sizing: border-box;
  align-self: stretch;
}

/* Variante 1 */
.cls-daily-chalk-separator--1 {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 20' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10 C95 8.8 175 11.5 260 9.6 C350 8.9 445 11.2 535 9.9 C630 8.7 715 10.8 798 9.8' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M4 11.8 C110 11 215 12.3 325 11.3 C455 10.7 585 11.8 797 11.1' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  transform: rotate(-0.4deg);
}

/* Variante 2 */
.cls-daily-chalk-separator--2 {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 20' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10.4 C120 9.7 210 10.5 300 10 C405 9.4 510 10.8 610 10.1 C690 9.6 745 10.5 798 10.2' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M3 11.7 C130 11.1 240 12 350 11.2 C470 10.6 600 11.9 797 11' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' opacity='.65'/%3E%3C/svg%3E");
  transform: rotate(0.03deg);
}

/* Variante 3 */
.cls-daily-chalk-separator--3 {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 20' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10 C90 10.6 180 9.5 275 10.2 C370 10.8 455 9.7 545 10.3 C635 10.9 715 9.8 798 10.1' fill='none' stroke='%23ffffff' stroke-width='4.3' stroke-linecap='round'/%3E%3Cpath d='M4 11.3 C105 11.8 220 10.7 335 11.4 C470 12 610 10.9 796 11.5' fill='none' stroke='%23ffffff' stroke-width='1.1' stroke-linecap='round' opacity='.68'/%3E%3C/svg%3E");
  transform: rotate(-0.02deg);
}

/* Variante 4 */
.cls-daily-chalk-separator--4 {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 20' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10.2 C115 10.8 205 9.6 300 10.1 C400 10.7 500 9.5 600 10 C685 10.5 750 9.8 798 10.3' fill='none' stroke='%23ffffff' stroke-width='4.1' stroke-linecap='round'/%3E%3Cpath d='M3 11.5 C125 12 255 10.8 385 11.4 C525 12 650 10.9 797 11.6' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' opacity='.66'/%3E%3C/svg%3E");
  transform: rotate(0.04deg);
}

/* Preisvarianten für Getränke und Größen */
.cls-menu-item-variants { min-width: 15rem; display: grid; gap: .35rem; }
.cls-menu-item-variant { display: grid; grid-template-columns: minmax(3.5rem, auto) minmax(4rem, auto) minmax(5rem, auto); gap: .75rem; align-items: baseline; }
.cls-menu-item-variant-serving, .cls-menu-item-variant-amount { font-weight: 400; opacity: .82; text-align: left; }
.cls-menu-item-variant-price { font-weight: 600; text-align: right; white-space: nowrap; }
@media (max-width: 575.98px) {
  .cls-menu-item { flex-direction: column; }
  .cls-menu-item-right, .cls-menu-item-variants { width: 100%; min-width: 0; }
  .cls-menu-item-variant { grid-template-columns: 1fr auto auto; }
}




/* Tagesessen: optionaler Datumstext */

.cls-daily-simple-item-date {

    display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
 max-width: 100%;
  margin-bottom: 0.35rem;
 
  font-size: 0.78em;
  line-height: 1.2;
  font-weight: 600;
  opacity: 0.82;

}

.cls-daily-simple-item-date::after {
  content: "";
  display: block;
  width: 100%;
  
  height: 16px;
  margin-top: 0.08rem;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 14' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7 C95 6.2 175 8.1 260 6.8 C350 6.2 445 7.9 535 7 C630 6.1 715 7.7 798 6.9' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M4 8.2 C110 7.7 215 8.6 325 7.9 C455 7.5 585 8.3 797 7.8' fill='none' stroke='%23ffffff' stroke-width='0.8' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;

  transform: rotate(-0.25deg);
  transform-origin: left center;
  
}