/* Customer notification banner (alko_notification). Approved design: customer-notification-templates.html.
   Tone and layout come from data-tone / data-layout set by notification.js (no :has()). */
.cn-slot, .cn-notice {
  --brand: #E30613; --brand-hover: #be0510; --slate: #4B565D; --muted: #6B767C;
  --line: #D4D8D9; --plane: #F0F5F7; --white: #FFFFFF;
  --warn-bg: #FFF4E0; --warn-ink: #7A4B00; --warn-bar: #C77700;
  --ok-bg: #EAF5EC; --ok-ink: #1E6B3A;
  --radius: 3px; --container: 1140px;
}
/* above the menu overlay (.navbar-overlay, z 10), like the header: the desktop slot sits outside it */
.cn-slot { position: relative; z-index: 11; }
.cn-slot:empty { display: none; }
.cn-notice { font-family: inherit; }
.cn-notice .cn-close { padding: 0; float: none; text-shadow: none; }
.cn ul, .cn ol { margin: 4px 0 0; padding-left: 20px; }

/* Wrapper: full width, colour comes from data-tone set by the shop JS (no :has()) */
.cn-notice { position: relative; --tone: var(--white); background: var(--tone); }
.cn-notice + .cn-notice { border-top: 1px solid var(--line); }
.cn-notice[data-tone="info"],
.cn-notice[data-tone="closure"]     { --tone: var(--plane); }
.cn-notice[data-tone="maintenance"] { --tone: var(--warn-bg); }
.cn-notice[data-tone="good"],
.cn-notice[data-tone="success"]     { --tone: var(--ok-bg); }
.cn-notice[data-tone="promo"]       { --tone: var(--brand); }
.cn-notice[data-tone="new"]         { --tone: var(--slate); }
.cn-notice[data-tone="coupon"]      { --tone: var(--white); }
.cn-notice:not([data-layout])[data-tone="important"],
.cn-notice:not([data-layout])[data-tone="deadline"],
.cn-notice:not([data-layout])[data-tone="promolight"],
.cn-notice:not([data-layout])[data-tone="b2b"],
.cn-notice:not([data-layout])[data-tone="plain"] { border-bottom: 1px solid var(--line); }

/* ---- Layout: boxed card (theme card radius 10px), lifted card, pill ---- */
/* white (= page background), not transparent: the slot sits above the menu overlay, which must not show through */
.cn-notice[data-layout] { background: var(--white); padding: 6px 15px; }
.cn-notice[data-layout] .cn { background: var(--tone); border-radius: 10px; }
.cn-notice[data-layout="boxed"] .cn { border: 1px solid var(--line); }
.cn-notice[data-layout="boxed"][data-tone="promo"] .cn,
.cn-notice[data-layout="boxed"][data-tone="new"] .cn { border-color: transparent; }
.cn-notice[data-layout="lift"] .cn { box-shadow: 0 5px 20px rgba(0,0,0,.12); }
.cn-notice[data-layout="pill"] .cn { max-width: max-content; border-radius: 999px; min-height: 44px; padding: 6px 60px 6px 22px; border: 1px solid var(--line); }
/* in card layouts the shop appends the X inside the card */
.cn-notice[data-layout] .cn-close { right: 6px; }
.cn-notice[data-layout="pill"] .cn-close { width: 44px; height: 44px; font-size: 24px; right: 6px; }

/* Coupon: dashed ticket edge + code in <em> */
.cn--coupon { color: var(--slate); --chip-bg: var(--brand); }
.cn-notice[data-tone="coupon"] .cn { border: 2px dashed var(--brand); }
.cn--coupon em { font-size: 1.2rem; letter-spacing: .08em; color: var(--brand); border: 1px solid var(--brand); background: #FDECEE; padding: 2px 12px; }

/* Content row: aligned with the header container; bar lives here, next to the text */
.cn {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  max-width: var(--container); margin: 0 auto; min-height: 44px;
  padding: 6px 68px 6px 15px;
  font-size: 1.15rem; line-height: 1.35; position: relative;
  border-left: 4px solid transparent;
}
.cn p { margin: 0; flex: 1 1 calc(100% - 200px); min-width: 0; }
.cn strong { font-weight: 700; }
.cn a:not(.cn-btn) { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cn a:not(.cn-btn):hover { text-decoration-thickness: 2px; }

/* Icon slot — CSS only, PIM HTML stays plain */
.cn::before {
  content: ''; flex: 0 0 22px; height: 22px;
  background: currentColor;
  -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat;
  display: var(--icon-display, none);
}

/* Chip: explicit element, never inferred from ordinary bold */
.cn .cn-chip {
  display: inline-block; margin-right: 10px; padding: 1px 9px; border-radius: var(--radius);
  font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
  background: var(--chip-bg, var(--slate)); color: var(--chip-ink, var(--white));
}
.cn .cn-chip:empty { display: none; }

/* Date: <em> */
.cn em {
  font-style: normal; font-weight: 700; white-space: nowrap;
  padding: 1px 9px; border-radius: var(--radius); border: 1px solid currentColor;
}

/* Button = theme .btn-primary (36px, 3px radius, bold) */
.cn-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 2px 18px;
  border-radius: var(--radius); border: 1px solid var(--brand);
  background: var(--brand); color: var(--white); font-weight: 700; font-size: 1.05rem;
  text-decoration: none; white-space: nowrap;
}
.cn-btn:hover, .cn-btn:focus { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--white); text-decoration: none; }
/* one CTA per bar: any further button falls back to a text link */
.cn .cn-btn ~ .cn-btn { background: none; border: 0; padding: 0; min-height: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cn-btn:focus-visible, .cn a:focus-visible, .cn-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Close button (added by the shop) — in the container, right edge */
.cn-close {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: max(6px, calc((100% - var(--container)) / 2 + 6px));
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit;
  font-size: 28px; line-height: 1; cursor: pointer; opacity: .85;
}
/* 44px hit area, but only a 30px circle is drawn on hover so it never fills the bar */
.cn-close:hover { opacity: 1; background: radial-gradient(circle, var(--close-hover, rgba(0,0,0,.07)) 15px, transparent 15.5px); }

/* ===================== Templates ===================== */
/* 1 Hinweis — neutral plane, no bar */
.cn--info { color: var(--slate); --icon-display: block;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 10.5v6' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.2' r='1.4'/%3E%3C/svg%3E"); }

/* 2 Wichtig — severity: red bar + exclamation icon + red chip */
.cn--important { color: var(--slate); border-left-color: var(--brand); --chip-bg: var(--brand); --icon-display: block;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6.5v7' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.5' fill='white'/%3E%3C/svg%3E"); }
.cn--important::before { color: var(--brand); }

/* 3 Wartung — severity: amber bar + triangle */
.cn--maintenance { color: var(--warn-ink); border-left-color: var(--warn-bar); --chip-bg: var(--warn-ink); --icon-display: block;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 20h20L12 3Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.5v5' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.3' r='1.3'/%3E%3C/svg%3E"); }

/* 4 Betriebsurlaub — the date is the hero */
.cn--closure { color: var(--slate); --icon-display: block;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cn--closure em { background: var(--slate); color: var(--white); border-color: var(--slate); font-size: 1.25rem; padding: 2px 12px; margin: 0 6px; }

/* 5 Bestellschluss — red only on the button; date outlined */
.cn--deadline { color: var(--slate); --icon-display: block;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='8.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 8.5V13l3 2M9 2.5h6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cn--deadline em { color: var(--brand); border-color: var(--brand); }

/* 6 Aktion — campaign: solid brand red (use for limited periods) */
.cn--promo { color: var(--white); --chip-bg: var(--white); --chip-ink: var(--brand); }
.cn--promo .cn-btn { background: var(--white); color: var(--brand); border-color: var(--white); }
.cn--promo .cn-btn:hover { background: var(--plane); border-color: var(--plane); }
.cn-notice[data-tone="promo"] .cn-close,
.cn-notice[data-tone="new"] .cn-close { color: var(--white); }
.cn-notice[data-tone="promo"] .cn-close:hover,
.cn-notice[data-tone="new"] .cn-close:hover { --close-hover: rgba(255,255,255,.14); }

/* 7 Aktion light — everyday promo: white, red chip + red button */
.cn--promolight { color: var(--slate); --chip-bg: var(--brand); }

/* 8 Neuheit — slate, red chip */
.cn--new { color: var(--white); --chip-bg: var(--brand); --chip-ink: var(--white); }
.cn--new .cn-btn { background: transparent; border-color: var(--white); color: var(--white); }
.cn--new .cn-btn:hover { background: var(--white); color: var(--slate); }

/* 9 Händler — outlined card in the container */
.cn--b2b { color: var(--slate); --icon-display: block;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l5 5v15H6V2Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14 2v5h5M9 13h7M9 17h7' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cn--b2b .cn-btn { background: var(--white); color: var(--slate); border-color: var(--slate); }
.cn--b2b .cn-btn:hover { background: var(--slate); color: var(--white); }

/* 10 Gute Nachricht — positive: green bar + check */
.cn--good, .cn--success { color: var(--ok-ink); border-left-color: var(--ok-ink); --chip-bg: var(--ok-ink); --icon-display: block;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* 11 Nur Text — centred, symmetric padding so it is optically centred */
.cn--plain { color: var(--slate); justify-content: center; text-align: center; padding-left: 68px; }
.cn--plain p { flex: 0 1 auto; }

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .cn { padding: 10px 54px 10px 12px; font-size: 1.05rem; align-items: flex-start; gap: 8px 10px; }
  .cn::before { margin-top: 2px; }
  .cn p {
    flex: 1 1 calc(100% - 34px);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cn-btn { min-height: 44px; margin-left: 32px; }
  .cn--promo .cn-btn, .cn--promolight .cn-btn, .cn--new .cn-btn { margin-left: 0; }
  .cn-close { top: 4px; transform: none; right: 4px; }
  .cn--plain { padding-left: 54px; }
  .cn--closure em { font-size: 1.1rem; }
  .cn-notice[data-layout="pill"] .cn { border-radius: 16px; }
}

/* ---------- Custom colour from PIM (colour/customColor, solid) on top of any tone ---------- */
.cn-notice[data-accent]:not([data-solid]):not([data-tone="promo"]):not([data-tone="new"]) .cn { border-left-color: var(--cn-accent); --chip-bg: var(--cn-accent); --chip-ink: var(--white); }
.cn-notice[data-accent]:not([data-solid]):not([data-tone="promo"]):not([data-tone="new"]) .cn::before { color: var(--cn-accent); }
.cn-notice[data-accent]:not([data-solid]):not([data-tone="promo"]):not([data-tone="new"]) .cn-btn { background: var(--cn-accent); border-color: var(--cn-accent); color: var(--white); }
.cn-notice[data-accent]:not([data-solid]):not([data-tone="promo"]):not([data-tone="new"]) .cn-btn:hover { background: var(--cn-accent); border-color: var(--cn-accent); filter: brightness(.88); }
.cn-notice[data-accent][data-solid] { --tone: var(--cn-accent); }
.cn-notice[data-accent][data-solid] .cn { color: var(--white); border-left-color: transparent; --chip-bg: var(--white); --chip-ink: var(--cn-accent); }
.cn-notice[data-accent][data-solid] .cn::before { color: var(--white); }
.cn-notice[data-accent][data-solid] .cn em { color: var(--white); border-color: var(--white); background: transparent; }
.cn-notice[data-accent][data-solid] .cn-btn { background: var(--white); border-color: var(--white); color: var(--cn-accent); }
.cn-notice[data-accent][data-solid] .cn-close { color: var(--white); }
/* one CTA per bar: a second button stays a text link, also under a custom accent */
.cn-notice[data-accent] .cn .cn-btn ~ .cn-btn,
.cn-notice[data-accent]:not([data-solid]):not([data-tone="promo"]):not([data-tone="new"]) .cn .cn-btn ~ .cn-btn,
.cn-notice[data-accent]:not([data-solid]):not([data-tone="promo"]):not([data-tone="new"]) .cn .cn-btn ~ .cn-btn:hover,
.cn-notice[data-accent] .cn .cn-btn ~ .cn-btn:hover { background: none; border: 0; padding: 0; min-height: 0; color: inherit; filter: none; text-decoration: underline; text-underline-offset: 3px; }
/* on cards the accent bar is a full 4px border, so it follows the rounded corner instead of thinning out */
.cn-notice[data-layout]:not([data-layout="pill"])[data-accent]:not([data-solid]):not([data-tone="promo"]):not([data-tone="new"]) .cn { border-left: 4px solid var(--cn-accent); }