/* ============================================================================
 * Redesign-Ebene des Buchungs-Funnels
 * ----------------------------------------------------------------------------
 * Hier und nur hier stehen die Design-Aenderungen. Die gespiegelten Dateien
 * unter site/ bleiben unangetastet, damit jederzeit ein sauberer Vorher-
 * Nachher-Vergleich moeglich ist und die Uebergabe an Julian eindeutig bleibt.
 *
 * Jeder Block ist nummeriert und taucht unter derselben Nummer in HANDOFF.md
 * wieder auf.
 * ========================================================================== */


/* HUGEICONS:ANFANG */
/* Erzeugt von scripts/symbole_erzeugen.mjs — nicht von Hand aendern.
 * Quelle: @hugeicons/core-free-icons (Stroke Rounded, MIT), Strich auf 2.
 * Alle Symbole des Funnels stehen hier an einer Stelle und werden ueber
 * `mask` gesetzt, damit sie die Schriftfarbe ihrer Stelle annehmen. */
:root {
  --nb-z-achseln: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2.01792 20.3051C3.14656 21.9196 8.05942 23.1871 10.3797 20.1645C12.8894 21.3649 17.0289 20.9928 20.3991 19.1134C20.8678 18.8521 21.3112 18.5222 21.5827 18.0593C22.1957 17.0143 22.2102 15.5644 21.0919 13.4251C19.2274 8.77072 15.874 4.68513 14.5201 3.04212C14.2421 2.78865 12.4687 2.42868 11.3872 2.08279C10.9095 1.93477 10.02 1.83664 8.95612 3.23862C8.45176 3.90329 6.16059 5.5357 9.06767 6.63346C9.51805 6.74806 9.84912 6.95939 11.9038 6.58404C12.1714 6.53761 12.8395 6.58404 13.3103 7.41041L14.2936 8.81662C14.3851 8.94752 14.4445 9.09813 14.4627 9.25682C14.635 10.7557 14.6294 12.6323 15.4651 13.5826C14.1743 12.6492 10.8011 11.5406 8.2595 14.6951M2.00189 12.94C3.21009 11.791 6.71197 9.97592 10.4179 12.5216' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-z-intim: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22 6C22 7 21 9 17 9C13 9 12 7 12 6C12 7 11 9 7 9C3 9 2 7 2 6' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M10 3.5C9.66667 3 8.5 2 7 2M14 3.5C14.3333 3 15.5 2 17 2' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M4 9V10C4 11.3203 4.26603 12.6198 4.56009 13.8995C5.0994 16.2464 5.36933 19.5805 4 22M20 9V10C20 11.3203 19.734 12.6198 19.4399 13.8995C18.9006 16.2464 18.6307 19.5805 20 22' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M16 19C14.515 20.179 13.644 20.369 12.3229 19.2824C12.1326 19.1258 11.8582 19.115 11.6593 19.2605C10.2643 20.2819 9.39943 20.2911 8 19' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M16 14C14.515 15.179 13.644 15.369 12.3229 14.2824C12.1326 14.1258 11.8582 14.115 11.6593 14.2605C10.2643 15.2819 9.39943 15.2911 8 14' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M12 14V12' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-z-bikini: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.9876 15.1231L10.2566 20.2254C10.0233 21.8538 9.63333 22.1467 8.0011 21.9433L3.79203 21.4186C2.20615 21.221 1.90147 20.854 2.0244 19.2605L2.76037 9.72027C2.81727 8.98263 2.84572 8.61382 2.91847 8.25272C3.10263 7.33855 3.61242 6.53567 3.82223 5.63542C3.94435 5.11145 3.90106 4.55591 3.90106 4.01893C3.90106 2.34611 4.25316 2 5.92579 2H18.0742C19.7468 2 20.0989 2.34611 20.0989 4.01893C20.0989 4.55591 20.0557 5.11145 20.1778 5.63542C20.3876 6.53567 20.8974 7.33855 21.0815 8.25272C21.7973 11.8057 21.6973 15.6526 21.9756 19.2605C22.0985 20.854 21.7938 21.221 20.208 21.4186L15.9989 21.9433C14.3667 22.1467 13.9767 21.8538 13.7434 20.2254L13.0124 15.1231' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M9 13.5C9.76053 14.2605 10.1976 15 11.3284 15H12.6716C13.8024 15 14.2395 14.2605 15 13.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M4 5H20' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M3 11C7 11.0068 7 7.00225 7 5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M17 5C17 7.00225 17 11.0068 21 11' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-z-pofalte: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.5 10C14.6716 10 14 9.32843 14 8.5M8.5 10C9.32843 10 10 9.32843 10 8.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M14 2V2.64298C14 3.22979 14 3.52319 14.0654 3.77255C14.223 4.37391 14.6513 4.86778 15.2244 5.10888C15.462 5.20885 15.7524 5.25035 16.3333 5.33333C17.4952 5.49931 18.0761 5.5823 18.5513 5.78224C19.6973 6.26445 20.554 7.25217 20.8693 8.4549C21 8.95361 21 9.54043 21 10.714V22' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M10 2V2.64298C10 3.22979 10 3.52319 9.93463 3.77255C9.77699 4.37391 9.34867 4.86778 8.77564 5.10888C8.53804 5.20885 8.24758 5.25035 7.66667 5.33333C6.50484 5.49931 5.92393 5.5823 5.44871 5.78224C4.30266 6.26445 3.44601 7.25217 3.13073 8.4549C3 8.95361 3 9.54043 3 10.714V22' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M12 13V22' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M18 11.5C18 11.5 17.4549 14.3636 17.503 17.2273C17.535 19.1271 18 22 18 22' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M6 11.5C6 11.5 6.54513 14.3636 6.49699 17.2273C6.46505 19.1271 6 22 6 22' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-z-oberschenkel: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.00183 2C7.69316 2.31359 13.8994 3.89572 16.6428 7.74552C16.9785 8.21643 17.3319 8.54976 17.9113 8.69637C18.6361 8.87638 19.2359 9.36245 19.4537 10.0961C19.6856 10.8944 20.1138 11.7364 19.9778 12.5901C19.9257 12.9169 19.7657 13.218 19.4457 13.82L15.0988 22' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M4.00183 12C5.00183 13.7264 8.16622 14.5959 12.0018 13.7264C11.4156 14.0677 10.4146 14.6835 9.31712 15.9511C8.75814 16.5968 8.51959 17.4954 8.48067 18.4026C8.42865 19.615 8.24879 20.9338 7.62683 22' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M5.00183 7C5.00183 7 6.9608 7.28919 8.50183 8.5C9.50183 9.28571 11.4185 9.80952 12.0018 10' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-z-unterschenkel: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.535 10.2187L9.99444 12.4393C9.746 13.4599 9.62179 13.9701 9.24607 14.2823C9.21466 14.3084 9.18215 14.3333 9.14863 14.3568C8.74779 14.6384 8.20467 14.6384 7.11844 14.6384H6.44056C5.71535 14.6384 5.35274 14.6384 5.05823 14.5126C4.7893 14.3978 4.56057 14.2103 4.39963 13.9727C4.22339 13.7125 4.16475 13.3672 4.04748 12.6765L3.5637 9.8272C3.16319 7.46831 4.68869 5.20279 7.08482 4.59797L7.29168 4.54575C8.7774 4.17073 10.2847 5.07654 10.5916 6.52879C10.8492 7.74826 10.8299 9.00715 10.535 10.2187Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.48863 17.5793H8.32119C8.93314 17.5793 9.42923 18.0581 9.42923 18.6487V19.0641C9.42923 20.4096 8.29905 21.5004 6.90491 21.5004C5.51077 21.5004 4.38059 20.4096 4.38059 19.0641V18.6487C4.38059 18.0581 4.87668 17.5793 5.48863 17.5793Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M13.463 8.25779L14.0036 10.4784C14.252 11.4989 14.3763 12.0092 14.752 12.3214C14.7834 12.3475 14.8159 12.3724 14.8494 12.3959C15.2502 12.6775 15.7934 12.6775 16.8796 12.6775H17.5575C18.2827 12.6775 18.6453 12.6775 18.9398 12.5517C19.2087 12.4368 19.4375 12.2493 19.5984 12.0118C19.7747 11.7516 19.8333 11.4063 19.9506 10.7156L20.4343 7.86626C20.8348 5.50737 19.3094 3.24185 16.9132 2.63703L16.7064 2.58482C15.2206 2.20979 13.7133 3.1156 13.4065 4.56785C13.1488 5.78732 13.1681 7.04621 13.463 8.25779Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M18.5094 15.6183H15.6769C15.0649 15.6183 14.5688 16.0971 14.5688 16.6877V17.1032C14.5688 18.4487 15.699 19.5394 17.0931 19.5394C18.4873 19.5394 19.6174 18.4487 19.6174 17.1032V16.6877C19.6174 16.0971 19.1214 15.6183 18.5094 15.6183Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --nb-z-ganzkoerper: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 4C14 5.10457 13.1046 6 12 6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M10.0002 16V20C10.0002 20.9428 10.0002 21.4142 10.2931 21.7071C10.586 22 11.0574 22 12.0002 22C12.943 22 13.4144 22 13.7073 21.7071C14.0002 21.4142 14.0002 20.9428 14.0002 20V16L14.2603 16.0007C15.8127 16.0005 16.5889 16.0004 16.8927 15.5149C17.1965 15.0295 16.8312 14.3728 16.1007 13.0595L14.3008 9.82358C13.8476 9.00874 12.9628 8.49982 11.9996 8.5C11.0368 8.50018 10.1525 9.00901 9.69941 9.82351L7.89935 13.0595C7.1688 14.3728 6.80353 15.0294 7.10731 15.5149C7.41109 16.0004 8.1873 16.0005 9.73972 16.0007L10.0002 16Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --nb-z-gesicht: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M8 15C8.91212 16.2144 10.3643 17 12 17C13.6357 17 15.0879 16.2144 16 15' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M15.625 8.387V8.91649M8.375 8.387V8.91649M8.75 8.75C8.75 8.33579 8.58211 8 8.375 8C8.16789 8 8 8.33579 8 8.75C8 9.16421 8.16789 9.5 8.375 9.5C8.58211 9.5 8.75 9.16421 8.75 8.75ZM16 8.75C16 8.33579 15.8321 8 15.625 8C15.4179 8 15.25 8.33579 15.25 8.75C15.25 9.16421 15.4179 9.5 15.625 9.5C15.8321 9.5 16 9.16421 16 8.75Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-z-arme: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.4929 9V11.4211M11.4929 9V4C11.4929 3.17157 10.8213 2.5 9.99289 2.5C9.16446 2.5 8.49289 3.17157 8.49289 4V14L6.18518 11.8369C5.38668 11.238 4.24541 11.4616 3.73188 12.3174C3.40149 12.8681 3.41319 13.5587 3.76205 14.0979L6.32173 18.0095C7.39715 19.6529 7.93486 20.4746 8.74311 20.9492C8.82434 20.9969 8.90722 21.0417 8.99161 21.0836C9.83135 21.5 10.8133 21.5 12.7773 21.5H13.4925C16.3015 21.5 17.7059 21.5 18.7148 20.8259C19.1517 20.534 19.5267 20.1589 19.8186 19.7221C20.4926 18.7131 20.4925 17.3087 20.4924 14.4997L20.4923 13.6755C20.4923 13.0472 20.4923 12.733 20.4223 12.4754C20.2362 11.7908 19.7013 11.256 19.0167 11.07C18.7592 11 18.445 11 17.8166 11M11.4929 9C12.4245 9 12.8904 9 13.2578 9.15218C13.7479 9.35512 14.1372 9.7444 14.3403 10.2344C14.4925 10.6019 14.4926 11.0677 14.4928 11.9993L14.4929 12.3546M17.4929 13L17.4928 12.7667C17.4927 12.053 17.4927 11.6962 17.4026 11.4063C17.2071 10.7776 16.7148 10.2854 16.0861 10.0901C15.7962 10 15.4394 10 14.7257 10' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-z-unbegrenzt: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 12C12 12 10.3569 15 8.7 15C7.04315 15 6 13.6569 6 12C6 10.3431 7.04315 9 8.7 9C10.3569 9 12 12 12 12ZM12 12C12 12 13.6431 15 15.3 15C16.9569 15 18 13.6569 18 12C18 10.3431 16.9569 9 15.3 9C13.6431 9 12 12 12 12Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.725 2.5C19.1145 2.65381 20.0498 3.00143 20.7479 3.78705C22 5.19617 22 7.46411 22 12C22 16.5359 22 18.8038 20.7479 20.213C20.0498 20.9986 19.1145 21.3462 17.725 21.5M6.27501 21.5C4.88551 21.3462 3.95021 20.9986 3.25212 20.213C2 18.8038 2 16.5359 2 12C2 7.46411 2 5.19617 3.25212 3.78705C3.95021 3.00143 4.88551 2.65381 6.27501 2.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-z-zone: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.1312 2.5C14.1462 2.17555 13.0936 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 10.9548 21.8396 9.94704 21.5422 9' stroke='%23000' stroke-linecap='round' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M19.5 4.5L12 12M19.5 4.5V2M19.5 4.5H22' stroke='%23000' stroke-linecap='round' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --nb-t-kalender: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 2V6M8 2V6' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M3 10H21' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M12.1258 14H12.0008M12.1258 18H12.0008M7.625 14H7.5M7.625 18H7.5M16.625 14H16.5M12.2508 14C12.2508 14.1381 12.1389 14.25 12.0008 14.25C11.8628 14.25 11.7508 14.1381 11.7508 14C11.7508 13.8619 11.8628 13.75 12.0008 13.75C12.1389 13.75 12.2508 13.8619 12.2508 14ZM12.2508 18C12.2508 18.1381 12.1389 18.25 12.0008 18.25C11.8628 18.25 11.7508 18.1381 11.7508 18C11.7508 17.8619 11.8628 17.75 12.0008 17.75C12.1389 17.75 12.2508 17.8619 12.2508 18ZM7.75 14C7.75 14.1381 7.63807 14.25 7.5 14.25C7.36193 14.25 7.25 14.1381 7.25 14C7.25 13.8619 7.36193 13.75 7.5 13.75C7.63807 13.75 7.75 13.8619 7.75 14ZM7.75 18C7.75 18.1381 7.63807 18.25 7.5 18.25C7.36193 18.25 7.25 18.1381 7.25 18C7.25 17.8619 7.36193 17.75 7.5 17.75C7.63807 17.75 7.75 17.8619 7.75 18ZM16.75 14C16.75 14.1381 16.6381 14.25 16.5 14.25C16.3619 14.25 16.25 14.1381 16.25 14C16.25 13.8619 16.3619 13.75 16.5 13.75C16.6381 13.75 16.75 13.8619 16.75 14Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-t-uhr: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8V12L14 14' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-s-ort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M13.6177 21.367C13.1841 21.773 12.6044 22 12.0011 22C11.3978 22 10.8182 21.773 10.3845 21.367C6.41302 17.626 1.09076 13.4469 3.68627 7.37966C5.08963 4.09916 8.45834 2 12.0011 2C15.5439 2 18.9126 4.09916 20.316 7.37966C22.9082 13.4393 17.599 17.6389 13.6177 21.367Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.5 11C15.5 12.933 13.933 14.5 12 14.5C10.067 14.5 8.5 12.933 8.5 11C8.5 9.067 10.067 7.5 12 7.5C13.933 7.5 15.5 9.067 15.5 11Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --nb-s-paket: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' transform='matrix(1 0 0 -1 16 8.00024)' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M2.77423 11.1439C1.77108 12.2643 1.7495 13.9546 2.67016 15.1437C4.49711 17.5033 6.49674 19.5029 8.85633 21.3298C10.0454 22.2505 11.7357 22.2289 12.8561 21.2258C15.8979 18.5022 18.6835 15.6559 21.3719 12.5279C21.6377 12.2187 21.8039 11.8397 21.8412 11.4336C22.0062 9.63798 22.3452 4.46467 20.9403 3.05974C19.5353 1.65481 14.362 1.99377 12.5664 2.15876C12.1603 2.19608 11.7813 2.36233 11.472 2.62811C8.34412 5.31646 5.49781 8.10211 2.77423 11.1439Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.00002 14.0002L10 17.0002' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-s-datum: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 2V6M8 2V6' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M3 10H21' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M12.1258 14H12.0008M12.1258 18H12.0008M7.625 14H7.5M7.625 18H7.5M16.625 14H16.5M12.2508 14C12.2508 14.1381 12.1389 14.25 12.0008 14.25C11.8628 14.25 11.7508 14.1381 11.7508 14C11.7508 13.8619 11.8628 13.75 12.0008 13.75C12.1389 13.75 12.2508 13.8619 12.2508 14ZM12.2508 18C12.2508 18.1381 12.1389 18.25 12.0008 18.25C11.8628 18.25 11.7508 18.1381 11.7508 18C11.7508 17.8619 11.8628 17.75 12.0008 17.75C12.1389 17.75 12.2508 17.8619 12.2508 18ZM7.75 14C7.75 14.1381 7.63807 14.25 7.5 14.25C7.36193 14.25 7.25 14.1381 7.25 14C7.25 13.8619 7.36193 13.75 7.5 13.75C7.63807 13.75 7.75 13.8619 7.75 14ZM7.75 18C7.75 18.1381 7.63807 18.25 7.5 18.25C7.36193 18.25 7.25 18.1381 7.25 18C7.25 17.8619 7.36193 17.75 7.5 17.75C7.63807 17.75 7.75 17.8619 7.75 18ZM16.75 14C16.75 14.1381 16.6381 14.25 16.5 14.25C16.3619 14.25 16.25 14.1381 16.25 14C16.25 13.8619 16.3619 13.75 16.5 13.75C16.6381 13.75 16.75 13.8619 16.75 14Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-s-kontakt: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 21.0001C19.713 17.269 16.7289 14.3151 12.995 14.0662L12 13.9999C11.6446 14.0096 11.3134 14.0225 11.0008 14.0378C7.3 14.2192 4.28417 17.3057 4 21.0001' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Ccircle cx='12' cy='6.99988' r='4' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-s-code: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.26781 18.8447C4.49269 20.515 5.87613 21.8235 7.55966 21.9009C8.97627 21.966 10.4153 22 12 22C13.5847 22 15.0237 21.966 16.4403 21.9009C18.1239 21.8235 19.5073 20.515 19.7322 18.8447C19.879 17.7547 20 16.6376 20 15.5C20 14.3624 19.879 13.2453 19.7322 12.1553C19.5073 10.485 18.1239 9.17649 16.4403 9.09909C15.0237 9.03397 13.5847 9 12 9C10.4153 9 8.97627 9.03397 7.55966 9.09909C5.87613 9.17649 4.49269 10.485 4.26781 12.1553C4.12105 13.2453 4 14.3624 4 15.5C4 16.6376 4.12105 17.7547 4.26781 18.8447Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M7.5 9V6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5V9' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M12.125 15.5H12M12.25 15.5C12.25 15.6381 12.1381 15.75 12 15.75C11.8619 15.75 11.75 15.6381 11.75 15.5C11.75 15.3619 11.8619 15.25 12 15.25C12.1381 15.25 12.25 15.3619 12.25 15.5Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M8.125 15.5H8M8.25 15.5C8.25 15.6381 8.13807 15.75 8 15.75C7.86193 15.75 7.75 15.6381 7.75 15.5C7.75 15.3619 7.86193 15.25 8 15.25C8.13807 15.25 8.25 15.3619 8.25 15.5Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M16.125 15.5H16M16.25 15.5C16.25 15.6381 16.1381 15.75 16 15.75C15.8619 15.75 15.75 15.6381 15.75 15.5C15.75 15.3619 15.8619 15.25 16 15.25C16.1381 15.25 16.25 15.3619 16.25 15.5Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-s-fertig: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 14L8.5 17.5L19 6.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-haken: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 14L8.5 17.5L19 6.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-winkel: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-winkel-ab: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-winkel-zurueck: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-pfeil: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-pfeil-voll: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-kreuz: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L6.00081 17.9992M17.9992 18L6 6.00085' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-ort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M13.6177 21.367C13.1841 21.773 12.6044 22 12.0011 22C11.3978 22 10.8182 21.773 10.3845 21.367C6.41302 17.626 1.09076 13.4469 3.68627 7.37966C5.08963 4.09916 8.45834 2 12.0011 2C15.5439 2 18.9126 4.09916 20.316 7.37966C22.9082 13.4393 17.599 17.6389 13.6177 21.367Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.5 11C15.5 12.933 13.933 14.5 12 14.5C10.067 14.5 8.5 12.933 8.5 11C8.5 9.067 10.067 7.5 12 7.5C13.933 7.5 15.5 9.067 15.5 11Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --nb-i-geschenk: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 11V15C4 18.2998 4 19.9497 5.02513 20.9749C6.05025 22 7.70017 22 11 22H13C16.2998 22 17.9497 22 18.9749 20.9749C20 19.9497 20 18.2998 20 15V11' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M3 9C3 8.25231 3 7.87846 3.20096 7.6C3.33261 7.41758 3.52197 7.26609 3.75 7.16077C4.09808 7 4.56538 7 5.5 7H18.5C19.4346 7 19.9019 7 20.25 7.16077C20.478 7.26609 20.6674 7.41758 20.799 7.6C21 7.87846 21 8.25231 21 9C21 9.74769 21 10.1215 20.799 10.4C20.6674 10.5824 20.478 10.7339 20.25 10.8392C19.9019 11 19.4346 11 18.5 11H5.5C4.56538 11 4.09808 11 3.75 10.8392C3.52197 10.7339 3.33261 10.5824 3.20096 10.4C3 10.1215 3 9.74769 3 9Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M6 3.78571C6 2.79949 6.79949 2 7.78571 2H8.14286C10.2731 2 12 3.7269 12 5.85714V7H9.21429C7.43908 7 6 5.56091 6 3.78571Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M18 3.78571C18 2.79949 17.2005 2 16.2143 2H15.8571C13.7269 2 12 3.7269 12 5.85714V7H14.7857C16.5609 7 18 5.56091 18 3.78571Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 11L12 22' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-whatsapp: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.3789 2.27907 14.6926 2.78382 15.8877C3.06278 16.5481 3.20226 16.8784 3.21953 17.128C3.2368 17.3776 3.16334 17.6521 3.01642 18.2012L2 22L5.79877 20.9836C6.34788 20.8367 6.62244 20.7632 6.87202 20.7805C7.12161 20.7977 7.45185 20.9372 8.11235 21.2162C9.30745 21.7209 10.6211 22 12 22Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8.58815 12.3773L9.45909 11.2956C9.82616 10.8397 10.2799 10.4153 10.3155 9.80826C10.3244 9.65494 10.2166 8.96657 10.0008 7.58986C9.91601 7.04881 9.41086 7 8.97332 7C8.40314 7 8.11805 7 7.83495 7.12931C7.47714 7.29275 7.10979 7.75231 7.02917 8.13733C6.96539 8.44196 7.01279 8.65187 7.10759 9.07169C7.51023 10.8548 8.45481 12.6158 9.91948 14.0805C11.3842 15.5452 13.1452 16.4898 14.9283 16.8924C15.3481 16.9872 15.558 17.0346 15.8627 16.9708C16.2477 16.8902 16.7072 16.5229 16.8707 16.165C17 15.8819 17 15.5969 17 15.0267C17 14.5891 16.9512 14.084 16.4101 13.9992C15.0334 13.7834 14.3451 13.6756 14.1917 13.6845C13.5847 13.7201 13.1603 14.1738 12.7044 14.5409L11.6227 15.4118' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --nb-i-uhr: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 7.5V12l3 2' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --nb-i-stift: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.5 5.5l4 4L8 20H4v-4L14.5 5.5z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12.5 7.5l4 4' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --nb-i-ticket: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2.46433 9.34375C2.21579 9.34375 1.98899 9.14229 2.00041 8.87895C2.06733 7.33687 2.25481 6.33298 2.78008 5.53884C3.08228 5.08196 3.45765 4.68459 3.88923 4.36468C5.05575 3.5 6.70139 3.5 9.99266 3.5H14.0074C17.2986 3.5 18.9443 3.5 20.1108 4.36468C20.5424 4.68459 20.9177 5.08196 21.2199 5.53884C21.7452 6.33289 21.9327 7.33665 21.9996 8.87843C22.011 9.14208 21.7839 9.34375 21.5351 9.34375C20.1493 9.34375 19.0259 10.533 19.0259 12C19.0259 13.467 20.1493 14.6562 21.5351 14.6562C21.7839 14.6562 22.011 14.8579 21.9996 15.1216C21.9327 16.6634 21.7452 17.6671 21.2199 18.4612C20.9177 18.918 20.5424 19.3154 20.1108 19.6353C18.9443 20.5 17.2986 20.5 14.0074 20.5H9.99266C6.70139 20.5 5.05575 20.5 3.88923 19.6353C3.45765 19.3154 3.08228 18.918 2.78008 18.4612C2.25481 17.667 2.06733 16.6631 2.00041 15.1211C1.98899 14.8577 2.21579 14.6562 2.46433 14.6562C3.85012 14.6562 4.97352 13.467 4.97352 12C4.97352 10.533 3.85012 9.34375 2.46433 9.34375Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9 3.5L9 20.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-haken: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 14L8.5 17.5L19 6.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-schild: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.9922 11.1833V8.28029C20.9922 6.64029 20.9922 5.82028 20.5881 5.28529C20.184 4.75029 19.2703 4.49056 17.4429 3.9711C16.1944 3.6162 15.0938 3.18863 14.2145 2.79829C13.0156 2.2661 12.4161 2 11.9922 2C11.5682 2 10.9688 2.2661 9.7699 2.79829C8.89057 3.18863 7.79002 3.61619 6.54152 3.9711C4.71411 4.49056 3.80041 4.75029 3.3963 5.28529C2.99219 5.82028 2.99219 6.64029 2.99219 8.28029V11.1833C2.99219 16.8085 8.05496 20.1835 10.5861 21.5194C11.1932 21.8398 11.4968 22 11.9922 22C12.4876 22 12.7911 21.8398 13.3982 21.5194C15.9294 20.1835 20.9922 16.8085 20.9922 11.1833Z' stroke='%23000' stroke-linecap='round' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8.49219 11.8333C8.49219 11.8333 9.36719 11.8333 10.2422 13.5C10.2422 13.5 13.0216 9.33333 15.4922 8.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-karte: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2 12C2 8.46252 2 6.69377 3.0528 5.5129C3.22119 5.32403 3.40678 5.14935 3.60746 4.99087C4.86213 4 6.74142 4 10.5 4H13.5C17.2586 4 19.1379 4 20.3925 4.99087C20.5932 5.14935 20.7788 5.32403 20.9472 5.5129C22 6.69377 22 8.46252 22 12C22 15.5375 22 17.3062 20.9472 18.4871C20.7788 18.676 20.5932 18.8506 20.3925 19.0091C19.1379 20 17.2586 20 13.5 20H10.5C6.74142 20 4.86213 20 3.60746 19.0091C3.40678 18.8506 3.22119 18.676 3.0528 18.4871C2 17.3062 2 15.5375 2 12Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M10 16H11.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M14.5 16L18 16' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M2 9H22' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --nb-i-person: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18.4984 19.1511C17.3377 17.4018 15.2947 16.2009 12.9313 16.0569L11.9984 16C11.6652 16.0083 11.3547 16.0194 11.0617 16.0325C8.71722 16.1376 6.66598 17.3796 5.5 19.1511' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M14.9961 10C14.9961 11.6569 13.6529 13 11.9961 13C10.3392 13 8.99609 11.6569 8.99609 10C8.99609 8.34315 10.3392 7 11.9961 7C13.6529 7 14.9961 8.34315 14.9961 10Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-teilen: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 6.5C21 8.15685 19.6569 9.5 18 9.5C16.3431 9.5 15 8.15685 15 6.5C15 4.84315 16.3431 3.5 18 3.5C19.6569 3.5 21 4.84315 21 6.5Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 12C9 13.6569 7.65685 15 6 15C4.34315 15 3 13.6569 3 12C3 10.3431 4.34315 9 6 9C7.65685 9 9 10.3431 9 12Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 17.5C21 19.1569 19.6569 20.5 18 20.5C16.3431 20.5 15 19.1569 15 17.5C15 15.8431 16.3431 14.5 18 14.5C19.6569 14.5 21 15.8431 21 17.5Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.72852 10.7495L15.2285 7.75M8.72852 13.25L15.2285 16.2495' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --nb-i-kopieren: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.5 14.5C7.5 11.2002 7.5 9.55025 8.52513 8.52513C9.55025 7.5 11.2002 7.5 14.5 7.5C17.7998 7.5 19.4497 7.5 20.4749 8.52513C21.5 9.55025 21.5 11.2002 21.5 14.5C21.5 17.7998 21.5 19.4497 20.4749 20.4749C19.4497 21.5 17.7998 21.5 14.5 21.5C11.2002 21.5 9.55025 21.5 8.52513 20.4749C7.5 19.4497 7.5 17.7998 7.5 14.5Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M7.5 16.5C6.10355 16.5 5.40533 16.5 4.84402 16.3036C3.83866 15.9518 3.0482 15.1613 2.69641 14.156C2.5 13.5947 2.5 12.8964 2.5 11.5V9.5C2.5 6.20017 2.5 4.55025 3.52513 3.52513C4.55025 2.5 6.20017 2.5 9.5 2.5H11.5C12.8964 2.5 13.5947 2.5 14.156 2.69641C15.1613 3.0482 15.9518 3.83866 16.3036 4.84402C16.5 5.40533 16.5 6.10355 16.5 7.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-stern: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M13.7276 3.44418L15.4874 6.99288C15.7274 7.48687 16.3673 7.9607 16.9073 8.05143L20.0969 8.58575C22.1367 8.92853 22.6167 10.4206 21.1468 11.8925L18.6671 14.3927C18.2471 14.8161 18.0172 15.6327 18.1471 16.2175L18.8571 19.3125C19.417 21.7623 18.1271 22.71 15.9774 21.4296L12.9877 19.6452C12.4478 19.3226 11.5579 19.3226 11.0079 19.6452L8.01827 21.4296C5.8785 22.71 4.57865 21.7522 5.13859 19.3125L5.84851 16.2175C5.97849 15.6327 5.74852 14.8161 5.32856 14.3927L2.84884 11.8925C1.389 10.4206 1.85895 8.92853 3.89872 8.58575L7.08837 8.05143C7.61831 7.9607 8.25824 7.48687 8.49821 6.99288L10.258 3.44418C11.2179 1.51861 12.7777 1.51861 13.7276 3.44418Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-funkeln: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 2L15.5387 4.39157C15.9957 6.42015 17.5798 8.00431 19.6084 8.46127L22 9L19.6084 9.53873C17.5798 9.99569 15.9957 11.5798 15.5387 13.6084L15 16L14.4613 13.6084C14.0043 11.5798 12.4202 9.99569 10.3916 9.53873L8 9L10.3916 8.46127C12.4201 8.00431 14.0043 6.42015 14.4613 4.39158L15 2Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7 12L7.38481 13.7083C7.71121 15.1572 8.84275 16.2888 10.2917 16.6152L12 17L10.2917 17.3848C8.84275 17.7112 7.71121 18.8427 7.38481 20.2917L7 22L6.61519 20.2917C6.28879 18.8427 5.15725 17.7112 3.70827 17.3848L2 17L3.70827 16.6152C5.15725 16.2888 6.28879 15.1573 6.61519 13.7083L7 12Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --nb-i-mail: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2 6L8.91302 9.91697C11.4616 11.361 12.5384 11.361 15.087 9.91697L22 6' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z' stroke='%23000' stroke-linejoin='round' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --nb-i-telefon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M13.5 2H10.5C8.14298 2 6.96447 2 6.23223 2.73223C5.5 3.46447 5.5 4.64298 5.5 7V17C5.5 19.357 5.5 20.5355 6.23223 21.2678C6.96447 22 8.14298 22 10.5 22H13.5C15.857 22 17.0355 22 17.7678 21.2678C18.5 20.5355 18.5 19.357 18.5 17V7C18.5 4.64298 18.5 3.46447 17.7678 2.73223C17.0355 2 15.857 2 13.5 2Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M12.125 19H12M12.25 19C12.25 19.1381 12.1381 19.25 12 19.25C11.8619 19.25 11.75 19.1381 11.75 19C11.75 18.8619 11.8619 18.75 12 18.75C12.1381 18.75 12.25 18.8619 12.25 19Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-kalender: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 2V6M8 2V6' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M3 10H21' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M12.1258 14H12.0008M12.1258 18H12.0008M7.625 14H7.5M7.625 18H7.5M16.625 14H16.5M12.2508 14C12.2508 14.1381 12.1389 14.25 12.0008 14.25C11.8628 14.25 11.7508 14.1381 11.7508 14C11.7508 13.8619 11.8628 13.75 12.0008 13.75C12.1389 13.75 12.2508 13.8619 12.2508 14ZM12.2508 18C12.2508 18.1381 12.1389 18.25 12.0008 18.25C11.8628 18.25 11.7508 18.1381 11.7508 18C11.7508 17.8619 11.8628 17.75 12.0008 17.75C12.1389 17.75 12.2508 17.8619 12.2508 18ZM7.75 14C7.75 14.1381 7.63807 14.25 7.5 14.25C7.36193 14.25 7.25 14.1381 7.25 14C7.25 13.8619 7.36193 13.75 7.5 13.75C7.63807 13.75 7.75 13.8619 7.75 14ZM7.75 18C7.75 18.1381 7.63807 18.25 7.5 18.25C7.36193 18.25 7.25 18.1381 7.25 18C7.25 17.8619 7.36193 17.75 7.5 17.75C7.63807 17.75 7.75 17.8619 7.75 18ZM16.75 14C16.75 14.1381 16.6381 14.25 16.5 14.25C16.3619 14.25 16.25 14.1381 16.25 14C16.25 13.8619 16.3619 13.75 16.5 13.75C16.6381 13.75 16.75 13.8619 16.75 14Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-sparen: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.5 5.5H10.5C6.91015 5.5 4 8.41015 4 12C4 14.3012 5.19584 16.3231 7 17.4782L7.28751 19.2158C7.35758 19.6393 7.39262 19.851 7.4905 20.0143C7.6037 20.2031 7.77604 20.3492 7.98078 20.4301C8.1578 20.5 8.37243 20.5 8.80169 20.5C9.19947 20.5 9.39836 20.5 9.56635 20.4378C9.76071 20.3659 9.92792 20.2353 10.0449 20.0642C10.1459 19.9163 10.1942 19.7234 10.2906 19.3375L10.5 18.5H13.5L13.7094 19.3375C13.8058 19.7234 13.8541 19.9163 13.9551 20.0642C14.0721 20.2353 14.2393 20.3659 14.4337 20.4378C14.6016 20.5 14.8005 20.5 15.1983 20.5C15.6276 20.5 15.8422 20.5 16.0192 20.4301C16.224 20.3492 16.3963 20.2031 16.5095 20.0143C16.6074 19.851 16.6424 19.6393 16.7125 19.2158L17 17.4782C18.1096 16.7678 18.9891 15.7295 19.5018 14.5L20.3925 14.3217C21.162 14.1677 21.5468 14.0907 21.7734 13.8142C22 13.5378 22 13.1454 22 12.3606V12.0616C22 11.3116 22 10.9366 21.7882 10.6654C21.5764 10.3941 21.2126 10.3032 20.4851 10.1213L20 10C20 8.5 18.8333 7.16667 18 6.5V3.5H17.7361C16.3657 3.5 15.1129 4.27427 14.5 5.5Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M15.875 9.75H15.75M16 9.75C16 9.88807 15.8881 10 15.75 10C15.6119 10 15.5 9.88807 15.5 9.75C15.5 9.61193 15.6119 9.5 15.75 9.5C15.8881 9.5 16 9.61193 16 9.75Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M2 8V10C2 11.1046 2.89543 12 4 12' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-raten: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 2V6M8 2V6' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M20.8985 8C20.7706 6.69989 20.4816 5.82475 19.8284 5.17157C18.6569 4 16.7712 4 13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C4.97975 21.6366 6.1277 21.8873 8 21.965' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M3 10H8' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M16 22C19.3137 22 22 19.3137 22 16C22 12.6863 19.3137 10 16 10C12.6863 10 10 12.6863 10 16C10 19.3137 12.6863 22 16 22Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M16 13V16L18 17' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-bar: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2.01709 13.5C4.21666 13.5 5.99977 15.2831 5.99977 17.4827' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M18 17.4827V17.3908C18 15.242 19.742 13.5 21.8908 13.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M5.99977 3.51562C5.99977 5.7152 4.21666 7.4983 2.01709 7.4983' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M18 3.51562C18 5.69594 19.769 7.46705 21.9423 7.49789' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M16 3.5H8C5.17157 3.5 3.75736 3.5 2.87868 4.37868C2 5.25736 2 6.67157 2 9.5V11.5C2 14.3284 2 15.7426 2.87868 16.6213C3.75736 17.5 5.17157 17.5 8 17.5H16C18.8284 17.5 20.2426 17.5 21.1213 16.6213C22 15.7426 22 14.3284 22 11.5V9.5C22 6.67157 22 5.25736 21.1213 4.37868C20.2426 3.5 18.8284 3.5 16 3.5Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M5 20.5H19' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M15 10.5C15 12.1569 13.6569 13.5 12 13.5C10.3431 13.5 9 12.1569 9 10.5C9 8.84315 10.3431 7.5 12 7.5C13.6569 7.5 15 8.84315 15 10.5Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-schein: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M19 8H17M5 16H7' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M16 5H8C5.17157 5 3.75736 5 2.87868 5.87868C2 6.75736 2 8.17157 2 11V13C2 15.8284 2 17.2426 2.87868 18.1213C3.75736 19 5.17157 19 8 19H16C18.8284 19 20.2426 19 21.1213 18.1213C22 17.2426 22 15.8284 22 13V11C22 8.17157 22 6.75736 21.1213 5.87868C20.2426 5 18.8284 5 16 5Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  --nb-i-stern-voll: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M13.7276 3.44418L15.4874 6.99288C15.7274 7.48687 16.3673 7.9607 16.9073 8.05143L20.0969 8.58575C22.1367 8.92853 22.6167 10.4206 21.1468 11.8925L18.6671 14.3927C18.2471 14.8161 18.0172 15.6327 18.1471 16.2175L18.8571 19.3125C19.417 21.7623 18.1271 22.71 15.9774 21.4296L12.9877 19.6452C12.4478 19.3226 11.5579 19.3226 11.0079 19.6452L8.01827 21.4296C5.8785 22.71 4.57865 21.7522 5.13859 19.3125L5.84851 16.2175C5.97849 15.6327 5.74852 14.8161 5.32856 14.3927L2.84884 11.8925C1.389 10.4206 1.85895 8.92853 3.89872 8.58575L7.08837 8.05143C7.61831 7.9607 8.25824 7.48687 8.49821 6.99288L10.258 3.44418C11.2179 1.51861 12.7777 1.51861 13.7276 3.44418Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' fill='%23000'/%3E%3C/svg%3E");
}
/* HUGEICONS:ENDE */


/* === 1. Radien: durchgehend hoechstens 4 px ================================
 * Der Funnel mischt 5, 8, 10, 12, 14, 16, 22 px und Pillen mit 999 px. Erst
 * die Token, dann ein Riegel fuer alles, was den Radius hart in der Regel oder
 * inline stehen hat. Einzige Ausnahme: der Ladekringel bleibt rund, ein
 * eckiger Spinner sieht kaputt aus.
 * ========================================================================== */

:root {
  --radius: 4px;
  --r-btn: 4px;
  --r-card: 4px;
  --r-inp: 4px;
}

*,
*::before,
*::after {
  border-radius: 4px !important;
}

.spin,
.spin::before,
.spin::after {
  border-radius: 50% !important;
}


/* === 2. Standortauswahl: kompakte Zeilen statt Fotokacheln =================
 * Vorher: pro Studio eine Kachel mit 185 px hohem Foto, Name als weisse
 * Schrift auf dem Bild, darunter Adresse und die volle Wochentabelle. Fuenf
 * Studios brauchten rund 1.400 px Hoehe, man musste dreimal scrollen, um alle
 * Standorte ueberhaupt zu sehen.
 *
 * Nachher: pro Studio eine Zeile: Vorschaubild, Name, Adresse, Pfeil. Zwei
 * Spalten ab 560 px. Je Stadt eine getoente Box, in der die Studios als weisse
 * Zeilen stehen. Alle fuenf Studios passen ohne Scrollen auf den ersten
 * Blick.
 *
 * Das Markup bleibt unveraendert; die Zeile entsteht ueber ein Grid auf
 * .loc-card, dessen Spalten die vorhandenen Bausteine neu einsortieren.
 * ========================================================================== */

/* Der Schritt braucht keine 1.020 px mehr, seit die Karten Zeilen sind. */
.bw-card[data-step="location"] {
  max-width: 780px;
}

/* Kopfbereich enger, damit die Liste frueher anfaengt */
.bw-eyebrow { margin-bottom: 3px; }
.bw-h1 { margin-bottom: 3px; }
.bw-lead { margin-bottom: 12px; }

/* --- 2.1 Stadtgruppe: eine getoente Box je Stadt -------------------------
 * Drei Boxen, drei Staedte. Die Toenung uebernimmt die Gruppierung, deshalb
 * braucht es weder Rahmen noch Trennstriche: die Studios stehen als weisse
 * Zeilen auf dem getoenten Grund, der Kontrast allein reicht.
 *
 * Alle Boxen liegen auf derselben Staerke (20 % auf 8 % der Markenfarbe
 * #2563eb). Unterschieden werden sie ueber die Richtung des Verlaufs: von oben,
 * von links, diagonal. Ein Farbton, drei Richtungen. Das trennt die Kaesten,
 * ohne dass eine Stadt heller und damit unwichtiger aussieht als die andere.
 *
 * Gezaehlt wird ueber :nth-of-type in Dreierschritten, nicht ueber
 * [data-city]. So bekommt auch eine neue Stadt automatisch ihre Richtung,
 * ohne dass jemand CSS nachtraegt.
 * ---------------------------------------------------------------------- */
.loc-city-group {
  border: 0 !important;
  padding: 9px 9px 10px;
  margin-bottom: 8px;
}

.loc-city-group:nth-of-type(3n+1) {
  background: linear-gradient(180deg, #2563eb33, #2563eb14) !important;
}

.loc-city-group:nth-of-type(3n+2) {
  background: linear-gradient(90deg, #2563eb33, #2563eb14) !important;
}

.loc-city-group:nth-of-type(3n+3) {
  background: linear-gradient(135deg, #2563eb33, #2563eb14) !important;
}

.loc-city-group:last-child { margin-bottom: 0; }

.loc-city-header {
  gap: 6px;
  align-items: baseline;
  margin-bottom: 7px;
  padding: 0 2px;
  border: 0;
}

/* Der Pin trug keine Information, jede Gruppe hatte denselben. */
.loc-city-pin { display: none; }

/* Wie viele Studios eine Stadt hat, steht direkt darunter. */
.loc-city-count { display: none; }

.loc-city-meta {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}

.loc-city-name {
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 600;
}

/* --- 2.2 Raster: zwei Spalten, enge Abstaende --------------------------- */
.loc-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}

@media (min-width: 560px) {
  .loc-grid { grid-template-columns: 1fr 1fr; }
}

/* Augsburg hat nur ein Studio. Ohne das hier stuende die halbe Box leer. */
.loc-card:only-child { grid-column: 1 / -1; }

/* --- 2.3 Die Karte wird eine Zeile ------------------------------------- */
.loc-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 10px;
  align-content: center;
  padding: 8px 30px 8px 8px;
  border: 0;
  box-shadow: none;
  transition: box-shadow .15s var(--ease);
}

/* Kein Rahmen: die weisse Zeile hebt sich schon vom getoenten Grund ab.
   Beim Ueberfahren nur ein flacher Schatten, keine zusaetzliche Linie. */
.loc-card:hover {
  transform: none;
  background: var(--surface);
  box-shadow: 0 1px 4px #11182714;
}

.loc-card:active { transform: none; }

/* Der Bildrahmen verschwindet als Kasten; Bild, Name und Adresse werden
   direkt zu Feldern des Zeilen-Grids. */
.loc-photo-wrap { display: contents; }

.loc-photo-bg {
  position: static;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 40px;
  height: 40px;
}

.loc-card:hover .loc-photo-bg { transform: none; }

/* Aus dem Foto-Overlay wird die Namenszeile. */
.loc-photo-overlay {
  position: static;
  display: block;
  background: none;
  padding: 0;
  grid-column: 2;
  grid-row: 1;
}

.loc-overlay-meta { min-width: 0; }

/* Die Stadt steht schon in der Gruppenueberschrift. */
.loc-overlay-city { display: none; }

.loc-overlay-name {
  color: var(--ink-1);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-bottom: 0;
}

/* Aus dem Knopf "Termin ›" wird ein ruhiger Pfeil am rechten Rand. Die ganze
   Zeile ist ohnehin klickbar, die Beschriftung war doppelt gemoppelt. */
.loc-overlay-cta {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0;
  gap: 0;
  font-size: 0;
  color: var(--ink-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.loc-card:hover .loc-overlay-cta {
  background: none;
  border: 0;
  color: var(--brand);
}

.loc-overlay-cta svg { font-size: 13px; }

/* --- 2.4 Adresse ------------------------------------------------------- */
.loc-content {
  grid-column: 2;
  grid-row: 2;
  padding: 0;
  gap: 0;
}

.loc-content-addr {
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loc-content-note {
  font-size: 11px;
  line-height: 1.35;
}


/* --- 2.5 Wahrzeichen statt Studiofoto ------------------------------------
 * Vorher: ein Innenraumfoto je Studio. Auf 40 px ist davon nichts mehr zu
 * erkennen, fuenf braeunliche Kacheln nebeneinander sehen alle gleich aus und
 * sagen nichts darueber, wo man landet.
 *
 * Nachher: ein Wahrzeichen aus der Nachbarschaft des Studios, flach
 * gezeichnet in Blau und Weiss. Das traegt auch bei 40 px, haelt die Zeile
 * ruhig und ordnet das Studio raeumlich ein. Zwei Studios in derselben Stadt
 * bekommen unterschiedliche Wahrzeichen, damit sich die Zeilen unterscheiden.
 *
 * Zugeordnet wird ueber den Dateinamen im Inline-Style des Originals; das
 * Markup hat keine Kennung fuer das Studio. Fuer den echten Funnel gehoert
 * das Bild natuerlich in die Studio-Daten.
 *
 * Erzeugt mit Nano Banana Pro, Skripte in scripts/, Quellen in
 * design/wahrzeichen/.
 * ---------------------------------------------------------------------- */
.loc-photo-bg[style*="pestalozzi"] {
  background-image: url("/newbooking/design/wahrzeichen/berlin-gedaechtniskirche.webp") !important;
}

.loc-photo-bg[style*="danckelmann"] {
  background-image: url("/newbooking/design/wahrzeichen/berlin-schloss-charlottenburg.webp") !important;
}

.loc-photo-bg[style*="muenchen-westend"] {
  background-image: url("/newbooking/design/wahrzeichen/muenchen-bavaria.webp") !important;
}

.loc-photo-bg[style*="muenchen-steinstrasse"] {
  background-image: url("/newbooking/design/wahrzeichen/muenchen-friedensengel.webp") !important;
}

.loc-photo-bg[style*="augsburg"] {
  background-image: url("/newbooking/design/wahrzeichen/augsburg-perlachturm.webp") !important;
}

/* === 3. Oeffnungszeiten hinter einen Schalter ==============================
 * Alle Studios haben faktisch dieselben Zeiten und sonntags zu. Sieben Zeilen
 * je Karte waren der groesste Platzfresser der Seite und fuer die Studiowahl
 * ohne Wert. Sie sind jetzt aus und lassen sich ueber einen Schalter ueber der
 * Liste fuer alle Karten zugleich einblenden, dann als eine Zeile je Karte
 * statt als Tabelle.
 *
 * Der Schalter wird von design/override.js eingehaengt, weil das Original an
 * der Stelle kein Element hat.
 * ========================================================================== */

.loc-content-hours { display: none; }

.nb-hours-on .loc-content-hours {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1px 10px;
  margin-top: 3px;
}

.nb-hours-on .loc-hours-row {
  justify-content: flex-start;
  gap: 4px;
  font-size: 10.5px;
}

.nb-hours-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}

.nb-hours-toggle:hover {
  color: var(--ink-1);
}

.nb-hours-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Der Pfeil dreht sich, wenn die Zeiten sichtbar sind. */
.nb-hours-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s var(--ease);
}

.nb-hours-on .nb-hours-toggle::after {
  transform: translateY(1px) rotate(-135deg);
}


/* === 5. Schritt "Paket": erst die Pakete, dann der Rest ====================
 * Vorher stand vor der ersten Behandlung ein Stapel aus sieben Bloecken:
 * Augenbrauen-Zeile, Frage als Ueberschrift, Werbezeile, klebender
 * Ratenzahlungs-Balken, grosser Gratis-Kasten, gestrichelter Kasten fuer die
 * eigenen Zonen, dann die Frage nach Damen oder Herren. Wer eine Behandlung
 * suchte, musste sich da erst durchlesen.
 *
 * Nachher: Ueberschrift und die Auswahl Damen/Herren in einer Zeile, darunter
 * das Gratis-Angebot als eine kompakte Zeile, dann sofort die Pakete. Was
 * danach kommt, ist Nebenweg oder Fussnote: die eigenen Zonen und der Hinweis
 * auf Ratenzahlung.
 *
 * Umsortiert wird ueber flex-order, das Markup bleibt unveraendert.
 * ========================================================================== */

/* Nicht anwenden, solange der Zonen-Waehler offen ist: der ersetzt den Inhalt
   des Schritts und braucht seine eigene Aufteilung. */
.bw-card[data-step="package"] .step-in > div:not(:has(.mq-wrap)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

/* Die Sprachwahl haengt an der Geschlechtsauswahl; im Waehler gibt es die
   nicht, der Rest von vorher darf dann nicht stehenbleiben. */
.step-in > div:has(.mq-wrap) > .nb-sprachen { display: none; }

/* Die Stufenanzeige oben sagt bereits "Paket", die Zeile darueber war
   Dopplung. Die Werbezeile trug nichts zur Auswahl bei. */
.bw-card[data-step="package"] .bw-eyebrow,
.bw-card[data-step="package"] .bw-lead {
  display: none;
}

.bw-card[data-step="package"] .bw-h1 {
  order: 1;
  flex: 1 1 220px;
  margin: 0;
}

.bw-card[data-step="package"] .pkg-genderbar {
  order: 2;
  flex: 0 0 auto;
  margin: 0;
  gap: 8px;
}

/* Die 10 px Abstand des Rasters reichen zwischen gleichartigen Dingen. Hier
   stossen drei verschiedene Sachen aufeinander: die Frage Damen/Herren, das
   Gratis-Angebot und die Preisliste. Ohne Luft dazwischen liest sich das als
   ein Block, und das Gratis-Angebot verliert seinen Auftritt. Deshalb bekommen
   die beiden Fugen je 14 px zusaetzlich. */
.bw-card[data-step="package"] .pkg-card-gratis {
  order: 3;
  flex: 0 0 100%;
  margin: 14px 0 0;
}

.bw-card[data-step="package"] .pkg-grid {
  order: 4;
  flex: 0 0 100%;
  margin-top: 14px;
}
.bw-card[data-step="package"] .step-in > div > button:not([class]) { order: 5; flex: 0 0 100%; }
.bw-card[data-step="package"] .step-in > div > div:not([class])    { order: 6; flex: 0 0 100%; }


/* --- 5.1 Damen / Herren -------------------------------------------------
 * Ein Schalter mit zwei Feldern, direkt neben der Ueberschrift, dort wo die
 * Frage entsteht. Das aktive Feld ist gefuellt statt nur weiss auf grau, damit
 * auf einen Blick klar ist, welche Liste man gerade sieht.
 * -------------------------------------------------------------------- */
.pkg-genderbar-q {
  font-size: 12px;
  color: var(--ink-3);
}

.pkg-genderbar .gratis-gender {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 2px;
  gap: 2px;
}

.pkg-genderbar .gratis-gender-btn {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
}

.pkg-genderbar .gratis-gender-btn.active {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}


/* --- 5.2 Gratis-Angebot: eine Zeile statt eines Kastens ------------------
 * Das Angebot bleibt das auffaelligste Element der Seite, es ist der Grund,
 * warum viele ueberhaupt buchen. Es braucht dafuer aber keine 180 px Hoehe mit
 * 26-px-Ueberschrift und 34-px-Preis, eine Zeile reicht.
 * -------------------------------------------------------------------- */
.pkg-card-gratis {
  margin: 0;
  box-shadow: none;
}

.pkg-card-gratis:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(1.06);
}

.pkg-gratis-btn {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

/* Ein Bild statt eines weiteren Textblocks. Dieselbe Kachelform wie die
   Wahrzeichen im Standort-Schritt, damit die Schritte zusammengehoeren. */
.pkg-gratis-btn::before {
  content: "";
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #fff url("/newbooking/design/wahrzeichen/gratis-geschenk.webp") center / cover no-repeat;
}

.pkg-gratis-badge {
  text-transform: none;         /* Versalien liest sich wie Geschrei */
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  flex-shrink: 0;
}

.pkg-gratis-main {
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.pkg-gratis-name { font-size: 14.5px; font-weight: 600; }
.pkg-gratis-desc { font-size: 12px; line-height: 1.35; }

.pkg-gratis-footer {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 12px;
}

.pkg-gratis-price { font-size: 20px; font-weight: 600; }

.pkg-gratis-cta {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}

.pkg-card-gratis:hover .pkg-gratis-cta {
  transform: none;
  box-shadow: none;
}

/* Der Zonen-Waehler im aufgeklappten Zustand. Die Auswahl Damen/Herren lief
   ueber die volle Breite und war damit groesser als die Zonen, um die es
   eigentlich geht. */
.gratis-picker { padding: 12px 14px 14px; }

.gratis-picker-head {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.gratis-picker-q { font-size: 12px; margin: 0; }

.gratis-picker .gratis-gender {
  display: inline-grid;
  width: auto;
  padding: 2px;
  gap: 2px;
  background: #ffffff29;
}

.gratis-picker .gratis-gender-btn {
  padding: 5px 16px;
  font-size: 12.5px;
  font-weight: 600;
}

.gratis-zone-list { gap: 6px; }
.gratis-pick-hint {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  margin: 12px 0 6px;
}
.gratis-zone-btn { padding: 9px 12px; box-shadow: none; }
.gratis-zone-btn:hover { transform: none; box-shadow: 0 1px 4px #0000001f; }
.gratis-zone-name { font-size: 13.5px; font-weight: 600; }
.gratis-zone-detail { font-size: 11.5px; }
.gratis-zone-value { font-size: 11.5px; }
.gratis-zone-free { font-size: 14px; font-weight: 700; }
.gratis-zone-choose { width: 20px; height: 20px; }


/* --- 5.3 Nebenweg und Fussnote ------------------------------------------
 * "Zonen selbst zusammenstellen" ist ein Nebenweg fuer Leute, denen kein Paket
 * passt. Er stand vor den Paketen und war als gestrichelter Kasten mit Emoji
 * lauter als sie. Jetzt steht er darunter und sieht aus wie das, was er ist.
 * Der Ratenzahlungs-Hinweis klebte oben am Rand; er ist eine Fussnote.
 * -------------------------------------------------------------------- */
.bw-card[data-step="package"] .step-in > div > button:not([class]) {
  border: 1px solid var(--line) !important;
  border-style: solid !important;
  background: var(--surface) !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  gap: 10px !important;
}

.bw-card[data-step="package"] .step-in > div > button:not([class]):hover {
  border-color: var(--line-2) !important;
}

/* Das Emoji war das groesste Element der Zeile und zeigte eine Person, keine
   Zonen. An seiner Stelle steht jetzt eine Zeichnung, die den Nebenweg
   erklaert: eine Figur mit markierten Behandlungszonen. */
.bw-card[data-step="package"] .step-in > div > button:not([class]) > span:first-child {
  font-size: 0 !important;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #fff url("/newbooking/design/wahrzeichen/zonen-koerper.webp") center / cover no-repeat;
}

.bw-card[data-step="package"] .step-in > div > button:not([class]) span span:first-child {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.bw-card[data-step="package"] .step-in > div > button:not([class]) span span:last-child {
  font-size: 11.5px !important;
}

.bw-card[data-step="package"] .step-in > div > button:not([class]) > span:last-child {
  font-size: 15px !important;
}

/* Ratenzahlung: nicht mehr klebend, keine Farbflaeche, nur ein Satz. */
.bw-card[data-step="package"] .step-in > div > div:not([class]) {
  position: static !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  padding: 10px 2px 0 !important;
  margin: 4px 0 0 !important;
  box-shadow: none !important;
  color: var(--ink-3) !important;
  font-size: 11.5px !important;
  gap: 6px !important;
}

.bw-card[data-step="package"] .step-in > div > div:not([class]) > span:first-child {
  display: none;                /* das Kartensymbol als Emoji */
}

/* Statt des Emojis die echten Zahlungsmarken: das sagt in einem Blick, womit
   die Ratenzahlung laeuft. */
.bw-card[data-step="package"] .step-in > div > div:not([class])::after {
  content: "";
  width: 102px;
  height: 20px;
  flex-shrink: 0;
  margin-left: auto;
  background: url("/newbooking/design/zahlarten.svg") center / contain no-repeat;
}


/* --- 5.4 Die Paketkarte -------------------------------------------------
 * Flach statt schwebend: Haarlinie, kein Schlagschatten, kein Anheben beim
 * Ueberfahren. Weg faellt, was nichts unterscheidet: die Nummerierung
 * "Behandlung 01" und das Ziersymbol, das ohnehin nur alle drei Karten
 * wiederholt wurde.
 *
 * Wichtig fuer den Desktop: align-items:start. Vorher zog eine aufgeklappte
 * Karte ihre beiden Nachbarn auf dieselbe Hoehe, die dann leer mitwuchsen.
 * -------------------------------------------------------------------- */
/* Gleich hohe Karten in einer Reihe, damit die Preiszeilen auf einer Linie
   sitzen (die Fusszeile haengt an margin-top:auto). Nur solange eine Karte
   aufgeklappt ist, wird umgeschaltet: sonst wuerden die beiden Nachbarn leer
   auf die Hoehe der offenen Karte mitwachsen. */
.pkg-grid {
  align-items: stretch;
  gap: 10px;
}

.pkg-grid:has(.pkg-card.open) { align-items: start; }

.pkg-card {
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 10px 10px 12px;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}

.pkg-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--brand);
}

.pkg-card:active { transform: none; }

.pkg-card-mono { display: none; }
.pkg-emblem { display: none; }

.pkg-body { padding: 0; gap: 7px; }

.pkg-card-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
}

/* Die Auszeichnungen trugen je Paket eine andere Farbe, inline gesetzt:
   gruen, blau, orange, lila, gelb. Das sah nach Zufall aus. Ein Ton fuer alle,
   der Text unterscheidet sie schon. */
/* Die Auszeichnung stand als eigene Zeile zwischen Titel und Stichpunkten und
   schob bei jeder Karte etwas anderes nach unten: Karten ohne Auszeichnung
   sassen anders als Karten mit. Jetzt sitzt sie in der oberen rechten Ecke,
   ausserhalb des Textflusses, und alle Karten bauen gleich auf. */
.pkg-chips {
  position: absolute;
  top: 9px;
  right: 9px;
  margin: 0;
  z-index: 1;
}

.pkg-card-name { padding-right: 88px; }

.pkg-chip {
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--brand-dark) !important;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.pkg-chip svg { display: none; }

.pkg-bullets { gap: 3px; }

.pkg-bullets li {
  font-size: 12px;
  gap: 6px;
  line-height: 1.35;
}

/* Die Symbole vor den Stichpunkten wechselten je Zeile durch: mal eine Uhr,
   mal ein Stern, mal ein Haken, ohne dass das etwas bedeutet haette. Es sind
   Leistungen, die im Paket enthalten sind, also ueberall derselbe Haken. */
.pkg-bullet-icon { display: none; }

.pkg-bullets li::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 3px;
  flex-shrink: 0;
  background: var(--brand);
  -webkit-mask: var(--nb-haken) center / 12px 12px no-repeat;
  mask: var(--nb-haken) center / 12px 12px no-repeat;
}


/* Vorher umbrach die Fusszeile je nach Preislaenge mal ueber, mal neben den
   Knopf. Sechs Karten sahen dadurch sechsmal anders aus. Jetzt immer eine
   Zeile: Preis links, Knopf rechts. */
.pkg-card-footer {
  border-top: 1px solid var(--line);
  padding-top: 9px;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}

.pkg-price-col { flex: 1 1 auto; min-width: 0; }
.pkg-price { flex-wrap: nowrap; gap: 5px; }
.pkg-cta { flex-shrink: 0; }

.pkg-price-now { font-size: 20px; font-weight: 600; }
.pkg-price-was { font-size: 12px; }
.pkg-price-total { font-size: 11px; }

/* Der gefuellte Knopf zwang die Preiszeile bei langen Betraegen in den Umbruch
   und sechs davon nebeneinander waren lauter als die Pakete selbst. Die ganze
   Karte ist ohnehin klickbar; ein ruhiger Hinweis in Markenfarbe reicht. */
.pkg-cta {
  background: none;
  color: var(--brand-dark);
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
}

.pkg-card:hover .pkg-cta {
  background: none;
  color: var(--brand);
  transform: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Im aufgeklappten Zustand steht dort nur ein Minus. Als nackter Text saehe
   das nach Versehen aus, als kleines Feld nach Schalter. */
.pkg-card.open .pkg-cta {
  border: 1px solid var(--line);
  width: 22px;
  height: 22px;
  justify-content: center;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
}


/* --- 5.5 Die Sitzungsauswahl: vier Zahlen statt sechs --------------------
 * Vorher stand in jeder Zeile: Sitzungen, Rabatt, Preis je Sitzung, das Wort
 * "pro Sitzung", Gesamtpreis und die Monatsrate. Sechs Angaben je Zeile, vier
 * Zeilen untereinander, das liest niemand.
 *
 * Nachher zwei Zeilen je Knopf:
 *   links   3 Sitzungen  −20%
 *   rechts  111 € pro Sitzung
 *           gesamt 333 €
 *
 * Die Monatsrate faellt hier weg; sie steht als Fussnote einmal unter dem
 * Schritt, statt in jeder einzelnen Zeile.
 * -------------------------------------------------------------------- */
.pkg-variants {
  border-top: 1px solid var(--line);
  gap: 5px;
  padding: 10px 0 2px;
}

.pkg-variant-btn {
  min-height: 0;
  border: 1px solid var(--line);
  padding: 9px 11px;
  gap: 10px;
}

.pkg-variant-btn:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--brand);
}

.pkg-variant-btn:active { transform: none; }

.pkg-variant-btn.popular { border-color: var(--brand); }

/* Die Auszeichnung sass angeklebt ueber dem Knopf und ueberdeckte die Zeile
   darueber. Jetzt steht sie in der Zeile, wo sie hingehoert. */
.pkg-variant-tag {
  position: static;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  box-shadow: none;
  flex-shrink: 0;
}

.pkg-variant-info { flex-direction: row; align-items: center; gap: 6px; }
.pkg-variant-sessions { font-size: 12.5px; }
.pkg-variant-save { padding: 1px 5px; font-size: 10px; }

/* Preise als Tabelle statt als Fliesstext: links die Bezeichnung, rechts der
   Betrag in einer Spalte fester Breite. Vorher stand "111 €" direkt vor dem
   Wort "pro Sitzung", dadurch sass das Eurozeichen in jeder Zeile woanders,
   je nachdem ob der Betrag zwei- oder dreistellig war. Jetzt liegen alle
   Betraege buendig untereinander, auch ueber die Zeilen hinweg.
   
       pro Sitzung   111 €
       gesamt        333 €
*/
.pkg-variant-price {
  display: grid;
  grid-template-columns: auto 54px;
  column-gap: 6px;
  row-gap: 0;
  align-items: baseline;
  justify-items: end;
  margin-left: auto;
}

.pkg-variant-total {
  grid-area: 1 / 2;
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pkg-variant-per {
  font-size: 10.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* "pro Sitzung" traegt kein style-Attribut, der Gesamtpreis inline opacity,
   die Monatsrate die Markenfarbe. Darueber sind sie unterscheidbar. */
.pkg-variant-per:not([style]) { grid-area: 1 / 1; }

.pkg-variant-per[style*="opacity"] {
  grid-area: 2 / 1 / 2 / 3;
  text-align: right;
  opacity: 1 !important;
}

.pkg-variant-per[style*="2563EB"],
.pkg-variant-per[style*="rgb(37, 99, 235)"] {
  display: none;
}

/* Die ganze Zeile ist ein Knopf, "waehlen" daneben war doppelt gemoppelt. */
.pkg-variant-choose { font-size: 0; padding-left: 2px; }
.pkg-variant-choose svg { font-size: 13px; }

/* Der Preishinweis ohne Kasten und ohne Schloss-Emoji. */
.pkg-pricelock {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0 0 4px;
  padding: 0;
  animation: none;
}

.pkg-pricelock-icon { display: none; }
.pkg-pricelock-txt { font-size: 11px; font-weight: 500; }

.pkg-paytrust { margin: 6px 0 0; padding-top: 8px; }
.pkg-paytrust-marks svg { height: 18px; }


/* === 6. Aufgeklappte Karte: blau, weiss, weich ==============================
 * Vorher unterschied sich die aufgeklappte Karte nur durch ihre Hoehe von den
 * anderen. Bei sechs Karten nebeneinander sieht man das kaum. Jetzt dreht sie
 * sich um: blauer Verlauf, weisse Schrift, die Sitzungen als weisse Zeilen
 * darauf. Man sieht auf einen Blick, woran man gerade ist.
 *
 * Verlaeufe lassen sich nicht direkt ueberblenden, deshalb liegt der blaue
 * Grund als eigene Ebene hinter dem Inhalt und wird eingeblendet. Nur so wird
 * aus dem Umschalten eine Bewegung statt eines Sprungs.
 * ========================================================================== */

.pkg-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  transition: opacity .42s var(--ease);
}

.pkg-card.open::after { opacity: 1; }

.pkg-card.open { border-color: var(--brand-dark); }

/* Inhalt ueber den Grund heben, sonst verschwindet er darunter. */
.pkg-body,
.pkg-variants { position: relative; z-index: 1; }

/* Schriftfarben ziehen mit, damit der Wechsel als ein Vorgang wirkt. */
.pkg-card-name,
.pkg-bullets li,
.pkg-price-now,
.pkg-price-was,
.pkg-price-total,
.pkg-cta,
.pkg-pricelock-txt,
.pkg-paytrust-label {
  transition: color .3s var(--ease);
}

.pkg-card.open .pkg-card-name,
.pkg-card.open .pkg-price-now { color: #fff; }

.pkg-card.open .pkg-bullets li { color: #ffffffe0; }
.pkg-card.open .pkg-bullets li::before { background: #fff; }

.pkg-card.open .pkg-price-was,
.pkg-card.open .pkg-price-total,
.pkg-card.open .pkg-pricelock-txt,
.pkg-card.open .pkg-paytrust-label { color: #ffffffbf; }

.pkg-card.open .pkg-chip {
  background: #ffffff2e;
  color: #fff !important;
}

.pkg-card.open .pkg-card-footer,
.pkg-card.open .pkg-variants,
.pkg-card.open .pkg-paytrust { border-top-color: #ffffff38; }

/* Die Sitzungen bleiben weisse Zeilen: auf dem blauen Grund ist das der
   staerkste Kontrast, den es gibt. */
.pkg-card.open .pkg-variant-btn { border-color: #0000; }
.pkg-card.open .pkg-variant-btn:hover { border-color: #fff; }
.pkg-card.open .pkg-variant-btn.popular { border-color: #fff; }

/* Die Zeilen kommen nicht ins Bild gesprungen, sie fahren kurz hoch. */
.pkg-variants { animation: nb-aufklappen .38s var(--ease) both; }

.pkg-variants > * {
  animation: nb-aufklappen .34s var(--ease) both;
  animation-delay: 60ms;
}

@keyframes nb-aufklappen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pkg-card::after,
  .pkg-variants,
  .pkg-variants > * { transition: none; animation: none; }
}


/* === 7. "Sitzungen waehlen" als richtiger Knopf =============================
 * Als nackter Text sah der Hinweis nach Fussnote aus, nicht nach Handlung.
 * Jetzt ein ruhiger Knopf mit Kontur in Markenfarbe und einem gezeichneten
 * Pfeil, der beim Ueberfahren der Karte vorlaeuft. Auf der aufgeklappten,
 * blauen Karte dreht er sich mit ins Weisse.
 * ========================================================================== */


.pkg-cta {
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
  color: var(--brand-dark);
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 600;
  gap: 6px;
  transition: color .3s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease);
}

.pkg-cta::after {
  content: "";
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--nb-pfeil) center / 13px 13px no-repeat;
  mask: var(--nb-pfeil) center / 13px 13px no-repeat;
  transition: transform .22s var(--ease);
}

.pkg-card:hover .pkg-cta {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: var(--brand);
  color: var(--brand-dark);
  text-decoration: none;
}

.pkg-card:hover .pkg-cta::after { transform: translateX(3px); }

/* Aufgeklappt steht dort ein Minus; der Pfeil hat dann nichts mehr zu sagen. */
.pkg-card.open .pkg-cta {
  border-color: #ffffff59;
  background: #ffffff1f;
  color: #fff;
  width: auto;
  height: auto;
  padding: 4px 10px;
  font-size: 15px;
  line-height: 1;
}

.pkg-card.open .pkg-cta::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pkg-cta::after { transition: none; }
}

/* Die Preiszeile darf nicht umbrechen, sonst sitzen die Preise der Karten
   einer Reihe nicht mehr auf einer Linie. */
.pkg-price-total { white-space: nowrap; font-size: 10.5px; }
.pkg-price-was { white-space: nowrap; }


/* === 8. Feinschliff Paket-Schritt ==========================================
 * Nachgezogen, nachdem die Karten das erste Mal nebeneinander standen.
 * ========================================================================== */

/* --- 8.1 Preis und Knopf sitzen in jeder Karte gleich --------------------
 * Bei dreistelligen Betraegen brach "ab 109 €" um, das Eurozeichen rutschte in
 * die naechste Zeile und jede Karte sass anders. Der Betrag bricht jetzt nie
 * um, und der Knopf steht ueber die volle Breite darunter statt daneben. Damit
 * liegen Preis, Zusatz und Knopf in jeder Karte auf derselben Hoehe.
 * -------------------------------------------------------------------- */
.pkg-price-now { white-space: nowrap; }

.pkg-card-footer {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}

.pkg-price-col { flex: 1 1 100%; }

.pkg-cta {
  flex: 0 0 100%;
  justify-content: center;
  margin-top: 9px;
}

/* --- 8.2 "Beliebt" liegt wieder ueber der Zeile, aber rechts -------------
 * Inline hat die Auszeichnung die Zeile zu breit gemacht, der Preis lief aus
 * der Karte. Sie sitzt jetzt im Abstand zwischen zwei Zeilen, rechts, wo kein
 * Text steht.
 * -------------------------------------------------------------------- */
.pkg-variants { gap: 11px; }

.pkg-variant-tag {
  position: absolute;
  top: -8px;
  right: 9px;
  left: auto;
}

.pkg-card.open .pkg-variant-tag {
  background: #fff;
  color: var(--brand-dark);
}

.pkg-variant-info { flex: 1 1 auto; min-width: 0; }
.pkg-variant-price { flex-shrink: 0; }

/* --- 8.3 Blau mit Tiefe statt Blau ---------------------------------------
 * Eine Flaeche in einem Ton wirkt flach und billig. Zwei Verlaeufe
 * uebereinander, ein heller Schimmer oben links und ein Verlauf ins Dunkle
 * nach unten rechts, geben der Flaeche Licht, ohne bunt zu werden.
 * -------------------------------------------------------------------- */
.pkg-card-gratis,
.pkg-card::after {
  background:
    radial-gradient(120% 100% at 10% -10%, #93c5fd66 0%, #93c5fd00 55%),
    radial-gradient(90% 80% at 100% 110%, #1e3a8a66 0%, #1e3a8a00 60%),
    linear-gradient(152deg, #3b82f6 0%, #2563eb 48%, #1d4ed8 100%);
}

/* --- 8.4 Zurueck-Knopf auf der Zeile der Ueberschrift --------------------
 * Der Knopf stand als eigene Zeile darueber und sass dadurch weder auf der
 * Hoehe der Ueberschrift noch auf der der Auswahl Damen/Herren.
 * -------------------------------------------------------------------- */
.bw-card[data-step="package"] .bw-back {
  order: 0;
  flex: 0 0 auto;
  margin: 0;
  align-self: center;
}


/* === 9. Karten ohne Knopf, Gratis-Zeile ohne Beiwerk =======================
 * Zwei Korrekturen aus der Abnahme:
 *
 * 1. Der Knopf "Sitzungen waehlen" ist weg. Die ganze Karte ist klickbar, der
 *    Knopf hat das nur wiederholt und gleichzeitig die Preiszeile so eng
 *    gemacht, dass bei dreistelligen Betraegen das Eurozeichen umbrach. Statt
 *    des Knopfes traegt jetzt die Karte selbst die Einladung: ein sanfter
 *    Verlauf, der beim Ueberfahren aufmacht, und ein Pfeil an der Preiszeile,
 *    der vorlaeuft.
 *
 * 2. Die Gratis-Zeile kommt ohne die Auszeichnung "Gratis fuer Neukunden" und
 *    ohne Bild aus. Sie hat eine Aussage, und die gehoert gross.
 * ========================================================================== */

/* --- 9.1 Karte mit Verlauf statt Knopf ----------------------------------
 * Die Gratis-Zeile traegt dieselbe Klasse .pkg-card und muss hier ausgenommen
 * werden, sonst legt sich der helle Verlauf ueber ihr Blau und die weisse
 * Schrift steht auf Weiss.
 * -------------------------------------------------------------------- */
.pkg-card:not(.pkg-card-gratis) {
  background: linear-gradient(168deg, #ffffff 0%, #f4f7fe 100%);
}

.pkg-card:not(.pkg-card-gratis):hover {
  background: linear-gradient(168deg, #f7faff 0%, #e9f0fd 100%);
  border-color: var(--brand);
}

/* Der blaue Grund liegt als eigene Ebene im Hintergrund; alles, was auf ihm
   stehen soll, muss darueber liegen. */
.pkg-gratis-btn,
.gratis-picker { position: relative; z-index: 1; }

.pkg-cta { display: none; }

/* Ein nach unten zeigender Winkel in der Preiszeile: er sagt, dass die Karte
   aufklappt, und braucht dafuer kein Wort. Aufgeklappt dreht er sich nach
   oben und ist damit gleichzeitig der Weg zurueck.
   Der Name ist bewusst `--nb-winkel-ab`: Abschnitt 19 legt weiter unten ein
   `--nb-winkel` an, das nach rechts zeigt. Beide hiessen frueher gleich, und
   weil die spaetere Regel gewinnt, zeigte der Winkel an der Paketkarte nach
   rechts statt nach unten. */

.pkg-card-footer {
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.pkg-price-col { flex: 1 1 auto; min-width: 0; }

.pkg-card-footer::after {
  content: "";
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background: var(--ink-3);
  -webkit-mask: var(--nb-winkel-ab) center / 17px 17px no-repeat;
  mask: var(--nb-winkel-ab) center / 17px 17px no-repeat;
  transition: transform .26s var(--ease), background-color .2s var(--ease);
}

.pkg-card:hover .pkg-card-footer::after {
  background: var(--brand);
  transform: translateY(2px);
}

.pkg-card.open .pkg-card-footer::after {
  background: #fff;
  transform: rotate(180deg);
}

.pkg-card.open:hover .pkg-card-footer::after {
  background: #fff;
  transform: rotate(180deg) translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  .pkg-card-footer::after { transition: none; }
}

/* --- 9.2 Gratis-Zeile: eine Aussage, gross ------------------------------ */
.pkg-gratis-badge { display: none; }
.pkg-gratis-btn::before { content: none; }

.pkg-gratis-btn { padding: 14px 16px; gap: 16px; }

.pkg-gratis-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.pkg-gratis-desc { font-size: 12.5px; }

.pkg-gratis-price { font-size: 26px; font-weight: 700; }

.pkg-gratis-cta { padding: 9px 14px; font-size: 12.5px; }


/* === 10. Mobil: die Raender addieren sich nicht mehr =======================
 * Auf dem Telefon lagen vier Innenabstaende ineinander: Seite 14, Karte 20,
 * Gruppe 9, Paketkarte 10. Zusammen 53 px links und rechts, von 390 px
 * Bildschirm blieben 284 px fuer den Inhalt. Adressen und Paketnamen brachen
 * dadurch frueh um.
 *
 * Jetzt traegt die Seite fast keinen Rand mehr, der Abstand entsteht innen in
 * der Karte. Macht rund 70 px mehr Inhaltsbreite.
 * ========================================================================== */

@media (max-width: 640px) {
  .bw-page { padding: 12px 6px 32px; }
  .bw-body { padding: 14px 12px 20px; }
  .bw-progress { padding: 10px 12px 9px; }
  .bw-fixedbar { padding: 7px 12px; }

  .loc-city-group { padding: 8px 7px 9px; }
  .loc-card { padding: 7px 26px 7px 7px; }

  /* Nebeneinander ist auf dem Telefon kein Platz: die Ueberschrift stand in
     einer 90 px schmalen Spalte und brach nach jedem Wort um. */
  .pkg-gratis-btn {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 8px;
  }

  .pkg-gratis-main { width: 100%; }
  .pkg-gratis-name { font-size: 22px; }

  .pkg-gratis-footer {
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid #ffffff38;
    padding-top: 10px;
  }

  .pkg-gratis-price { font-size: 22px; }
  .gratis-picker { padding: 12px; }
  .gratis-zone-btn { padding: 8px 10px; }
  .pkg-card { padding: 10px 10px 12px; }

  .bw-card[data-step="package"] .step-in > div > button:not([class]) {
    padding: 8px 10px !important;
  }
}


/* === 11. Nebenweg "Zonen selber kombinieren" ===============================
 * Der Kasten sah aus wie eine Paketkarte, die man vergessen hat zu fuellen.
 * Er ist aber etwas anderes: kein Paket, sondern ein eigener Weg. Also setzt
 * er sich jetzt farblich ab, bekommt eine richtige Ueberschrift und die
 * Zeichnung, die zeigt, worum es geht.
 * ========================================================================== */

.bw-card[data-step="package"] .step-in > div > button:not([class]) {
  background: linear-gradient(150deg, #eef4ff 0%, #dfeafd 100%) !important;
  border: 0 !important;
  padding: 12px 14px !important;
  gap: 14px !important;
  align-items: center !important;
}

.bw-card[data-step="package"] .step-in > div > button:not([class]):hover {
  background: linear-gradient(150deg, #e6eeff 0%, #d3e2fc 100%) !important;
}

.bw-card[data-step="package"] .step-in > div > button:not([class]) > span:first-child {
  width: 52px;
  height: 52px;
}

.bw-card[data-step="package"] .step-in > div > button:not([class]) span span:first-child {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  letter-spacing: -.015em;
}

.bw-card[data-step="package"] .step-in > div > button:not([class]) span span:last-child {
  font-size: 12.5px !important;
  color: var(--ink-2) !important;
}

.bw-card[data-step="package"] .step-in > div > button:not([class]) > span:last-child {
  font-size: 18px !important;
  color: var(--brand-dark) !important;
}


/* === 12. Sprachwahl ========================================================
 * Der Funnel spricht Deutsch, Englisch, Tuerkisch, Arabisch und Russisch, aber
 * es gab keinen Weg, die Sprache zu wechseln: sie liess sich nur ueber
 * ?lang=xx in der Adresszeile setzen. Der Umschalter sitzt neben der Auswahl
 * Damen/Herren und laedt die Seite in der gewaehlten Sprache neu, weil die
 * Sprache serverseitig gesetzt wird.
 * ========================================================================== */

.nb-sprachen { position: relative; flex-shrink: 0; }

.nb-flagge {
  display: block;
  width: 22px;
  height: 15px;
  flex-shrink: 0;
  background: center / cover no-repeat;
  box-shadow: inset 0 0 0 1px #0000001f;
}

.nb-sprache-knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s var(--ease);
}

.nb-sprache-knopf::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-2px) rotate(45deg);
}

.nb-sprache-knopf:hover { border-color: var(--line-2); }
.nb-sprache-knopf:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.nb-sprache-liste {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 148px;
  padding: 3px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 6px 20px -8px #11182733;
}

.nb-sprache-liste[hidden] { display: none; }

.nb-sprache {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  text-align: left;
}

.nb-sprache:hover { background: var(--surface-2); color: var(--ink-1); }

.nb-sprache[aria-selected="true"] {
  color: var(--brand-dark);
  font-weight: 600;
}

.nb-sprache:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }


/* === 13. Mobil: Geschlecht als Symbol ======================================
 * Die Frage "Fuer wen ist die Behandlung?" und zwei ausgeschriebene Knoepfe
 * brauchten auf dem Telefon eine ganze Zeile. Zwei Symbole tun es auch.
 * ========================================================================== */

:root {
  --nb-weiblich: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M12 13v8M9 18h6'/%3E%3C/svg%3E");
  --nb-maennlich: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='14' r='5'/%3E%3Cpath d='M14 10 21 3M15 3h6v6'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  .pkg-genderbar-q { display: none; }

  .pkg-genderbar .gratis-gender-btn {
    font-size: 0;
    padding: 6px 14px;
    display: inline-flex;
    justify-content: center;
  }

  .pkg-genderbar .gratis-gender-btn::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: var(--nb-symbol) center / 17px 17px no-repeat;
    mask: var(--nb-symbol) center / 17px 17px no-repeat;
  }

  .pkg-genderbar .gratis-gender-btn:nth-child(1) { --nb-symbol: var(--nb-weiblich); }
  .pkg-genderbar .gratis-gender-btn:nth-child(2) { --nb-symbol: var(--nb-maennlich); }

  .nb-sprache-knopf { padding: 5px 6px; }
  .nb-flagge { width: 20px; height: 14px; }

  /* Die Auswahl soll neben der Ueberschrift bleiben, solange es geht. */
  .bw-card[data-step="package"] .bw-h1 { flex: 1 1 96px; font-size: 17px; }
  .bw-card[data-step="package"] .step-in > div { gap: 8px; }
  .pkg-genderbar .gratis-gender-btn { padding: 6px 11px; }
}


/* === 14. Sitzungsauswahl: eine Preiszeile ==================================
 * "111 €", darunter "pro Sitzung", darunter "gesamt 333 €": drei Zeilen fuer
 * eine Aussage. Jetzt steht sie in einer:
 *
 *     3 Sitzungen   −20%
 *     111 € je Sitzung · Gesamt: 333 €
 *
 * Damit das auch auf dem Desktop Platz hat, nimmt die aufgeklappte Karte die
 * volle Breite der Reihe ein und die Sitzungen stehen nebeneinander statt
 * untereinander. Der leere Raum neben der offenen Karte verschwindet damit
 * gleich mit.
 * ========================================================================== */

.pkg-card.open { grid-column: 1 / -1; }

.pkg-variants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 11px;
  align-items: start;
}

/* Preishinweis und Zahlungsmarken laufen ueber die ganze Breite. */
.pkg-pricelock,
.pkg-paytrust { grid-column: 1 / -1; }

.pkg-variant-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "info pfeil" "preis pfeil";
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
  padding: 9px 11px;
}

.pkg-variant-info { grid-area: info; }
.pkg-variant-choose { grid-area: pfeil; }

.pkg-variant-price {
  grid-area: preis;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
  white-space: nowrap;
}

.pkg-variant-total { font-size: 13.5px; }
.pkg-variant-per { font-size: 11px; }

/* Trennpunkt zwischen Sitzungspreis und Gesamtpreis. */
.pkg-variant-per[style*="opacity"]::before {
  content: "·";
  margin-right: 4px;
  color: var(--ink-3);
}


/* Sprachwahl im Paket-Schritt: direkt rechts neben Damen/Herren. */
.bw-card[data-step="package"] .nb-sprachen { order: 2; }

/* Sprachwahl im Standort-Schritt: rechts, auf der Zeile des
   Oeffnungszeiten-Schalters. */
.nb-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.nb-kopfzeile .nb-hours-toggle { margin-bottom: 0; }


/* === 15. Uhrzeit-Auswahl kompakt ===========================================
 * Vorher: 44 px hohe Knoepfe in vier Spalten, dazwischen viel Luft, dazu je
 * Knopf ein Kreis mit dem Anfangsbuchstaben der Mitarbeiterin. Neunzehn freie
 * Termine bauten damit eine halbe Bildschirmhoehe.
 *
 * Nachher: kleinere Knoepfe, die sich so oft nebeneinander legen wie Platz
 * ist, und statt des Buchstabens ein Bild. Liegt kein Foto vor, kommt ein
 * neutraler Platzhalter statt eines Buchstabens im Kreis.
 * ========================================================================== */

.slot-grid {
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 5px;
}

.slot-btn {
  min-height: 0;
  padding: 7px 4px;
  font-size: 12.5px;
  border-radius: 4px;
}

.slot-btn:active { transform: none; }

/* Knoepfe mit Mitarbeiterin: Bild, Uhrzeit, Name, aber alles eine Nummer
   kleiner. */
.slot-grid:has(.slotstaff-btn) {
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
}

.slot-btn.slotstaff-btn {
  gap: 3px;
  padding: 6px 3px;
}

.slot-btn .slotstaff-avatar {
  width: 22px !important;
  height: 22px !important;
}

.slotstaff-btn-name { font-size: 9.5px; }

/* Der Kopf ueber der Liste: flacher, ohne eigenen Kasten-Schatten. */
.slotstaff-head {
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 8px 10px !important;
  margin-bottom: 10px !important;
  gap: 9px !important;
}

.slotstaff-head-name { font-size: 13.5px !important; }
.slotstaff-head-room { font-size: 11.5px !important; }

/* Statt des Anfangsbuchstabens ein Platzhalterbild. Der Buchstabe steckt in
   einem span, das Foto waere ein img; nur der Buchstabe wird ersetzt. */
.slotstaff-avatar > span {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0 !important;
  background: #dbeafe url("/newbooking/design/wahrzeichen/person-platzhalter.webp") center / cover no-repeat;
}

.slot-header { font-size: 11.5px; margin-bottom: 7px; }
.slot-content { padding: 3px 0 8px; }

/* Der Kalender darf schmaler werden, sobald die Uhrzeiten daneben stehen. */
.cal { padding: 11px 10px 8px; }
.cal-day { min-height: 30px; font-size: 12px; }
.cal-month { font-size: 13.5px; }
.cal-arrow { width: 28px; height: 28px; }


/* === 16. Hinweis auf die Geschlechtswahl ===================================
 * Die Liste startet mit den Damen-Paketen. Wer Herren-Pakete sucht, muss das
 * umstellen, uebersieht die Auswahl neben der Ueberschrift aber leicht. Ein
 * gezeichneter Pfeil zeigt darauf und pocht ruhig weiter, bis einmal gewaehlt
 * wurde; danach ist er still. Dazu zoomen die beiden Knoepfe nacheinander auf
 * und wieder zurueck, erst Damen, dann Herren. Auf dem Telefon gibt es keinen
 * Platz fuer den Pfeil, dafuer zoomt es dort deutlich staerker.
 * ========================================================================== */

.pkg-genderbar-q {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pkg-genderbar-q::after {
  content: "";
  width: 20px;
  height: 15px;
  flex-shrink: 0;
  background: var(--brand);
  -webkit-mask: var(--nb-pfeil) center / 20px 15px no-repeat;
  mask: var(--nb-pfeil) center / 20px 15px no-repeat;
  animation: nb-zeigen 1.5s var(--ease) infinite;
}

@keyframes nb-zeigen {
  0%, 100% { transform: translateX(0); opacity: .7; }
  50%      { transform: translateX(5px); opacity: 1; }
}

/* Die beiden Knoepfe zoomen nacheinander auf und wieder zurueck: erst Damen,
   dann Herren, danach eine kurze Pause. Gemeinsamer Takt 2,2 s, der zweite
   Knopf startet ein Drittel spaeter, so liest man die Reihenfolge. Die Pause
   ist absichtlich kurz: bei einem langsamen Takt schaut man zufaellig genau
   dann hin, wenn nichts passiert, und haelt den Schalter fuer still. */
@keyframes nb-zoomen {
  0%   { transform: scale(1); }
  15%  { transform: scale(var(--nb-zoom)); }
  33%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.pkg-genderbar .gratis-gender-btn {
  --nb-zoom: 1.22;
  position: relative;
  transform-origin: center;
  animation: nb-zoomen 2.2s var(--ease) infinite;
}

/* Der gerade vergroesserte Knopf liegt oben, sonst schiebt sich der Nachbar
   ueber seine Kante. */
.pkg-genderbar .gratis-gender-btn:nth-child(1) { z-index: 2; }
.pkg-genderbar .gratis-gender-btn:nth-child(2) { animation-delay: .73s; }

/* Der Zoom laeuft weiter, auch nachdem einmal gewaehlt wurde: er zeigt nicht
   nur den Weg zu den Herren-Paketen, er zeigt ueberhaupt, dass sich die Liste
   umschalten laesst. Nur der Pfeil auf dem Desktop wird still. */
body.nb-geschlecht-gewaehlt .pkg-genderbar-q::after {
  animation: none;
  opacity: .35;
}

/* Auf dem Telefon stehen statt der Woerter nur zwei kleine Symbole, die im
   Blickfeld leicht untergehen. Dort zoomt der Schalter deutlich weiter. */
@media (max-width: 640px) {
  .pkg-genderbar .gratis-gender-btn { --nb-zoom: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  .pkg-genderbar-q::after,
  .pkg-genderbar .gratis-gender-btn { animation: none !important; }
}


/* === 17. Echte Pfeil-Symbole statt Textpfeil ===============================
 * In "Gratis-Zone waehlen →" und in der Zeile "Zonen selber kombinieren?" war
 * der Pfeil das Schriftzeichen → aus der Textschrift. Das ist eine duenne
 * Strichzeichnung, die neben dem fetten Text verloren aussieht. Jetzt steht
 * dort ein gezeichnetes Symbol mit Flaeche, das dieselbe Staerke hat wie die
 * Schrift daneben.
 * ========================================================================== */


.pkg-gratis-cta::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--nb-pfeil-voll) center / 14px 14px no-repeat;
  mask: var(--nb-pfeil-voll) center / 14px 14px no-repeat;
  transition: transform .2s var(--ease);
}

.pkg-card-gratis:hover .pkg-gratis-cta::after { transform: translateX(3px); }

/* Der Pfeil der Zonen-Zeile steckt als Textzeichen in einem eigenen span. */
.bw-card[data-step="package"] .step-in > div > button:not([class]) > span:last-child {
  font-size: 0 !important;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--brand-dark);
  -webkit-mask: var(--nb-pfeil-voll) center / 20px 20px no-repeat;
  mask: var(--nb-pfeil-voll) center / 20px 20px no-repeat;
  transition: transform .2s var(--ease);
}

.bw-card[data-step="package"] .step-in > div > button:not([class]):hover > span:last-child {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .pkg-gratis-cta::after,
  .bw-card[data-step="package"] .step-in > div > button:not([class]) > span:last-child {
    transition: none;
  }
}


/* === 18. Paketkarten von oben nach unten dunkler ===========================
 * Auf dem Telefon stehen die Pakete untereinander, alle in derselben Flaeche.
 * Beim Scrollen verschwimmt dadurch, wo eine Karte aufhoert und die naechste
 * anfaengt. Die Toenung nimmt von oben nach unten schrittweise zu: sechs
 * Stufen der Markenfarbe, von 0 auf 16 % ueber Weiss. Nebenbei gibt das der
 * Liste auf dem Desktop eine Richtung.
 * ========================================================================== */

.pkg-grid > .pkg-card:nth-of-type(1) { --nb-von: #ffffff; --nb-bis: #f6f9fe; }
.pkg-grid > .pkg-card:nth-of-type(2) { --nb-von: #fbfcfe; --nb-bis: #f2f5fe; }
.pkg-grid > .pkg-card:nth-of-type(3) { --nb-von: #f6f9fe; --nb-bis: #eef3fd; }
.pkg-grid > .pkg-card:nth-of-type(4) { --nb-von: #f2f5fe; --nb-bis: #e9f0fd; }
.pkg-grid > .pkg-card:nth-of-type(5) { --nb-von: #eef3fd; --nb-bis: #e5eefd; }
.pkg-grid > .pkg-card:nth-of-type(n+6) { --nb-von: #e9f0fd; --nb-bis: #dce8fc; }

.pkg-card:not(.pkg-card-gratis) {
  background: linear-gradient(168deg, var(--nb-von, #fff) 0%, var(--nb-bis, #f4f7fe) 100%);
}

/* Beim Ueberfahren eine Stufe dunkler, unabhaengig davon, welche Stufe die
   Karte gerade traegt. */
.pkg-card:not(.pkg-card-gratis):hover {
  background: linear-gradient(168deg, var(--nb-von, #fff) 0%, var(--nb-bis, #f4f7fe) 100%);
  box-shadow: inset 0 0 0 999px #2563eb0f;
  border-color: var(--brand);
}

.pkg-card.open:hover { box-shadow: none; }


/* === 19. Kopfzeile auf dem Telefon =========================================
 * Zurueck-Knopf, Ueberschrift, Geschlecht und Sprache lagen auf dem Telefon in
 * zwei Zeilen, die beide links begannen und unterschiedlich hoch waren: der
 * Zurueck-Knopf neben der Ueberschrift, darunter die Frage nach dem Geschlecht
 * mit Pfeil, Schalter und Flagge, alles linksbuendig. Das sah nach Zufall aus.
 *
 * Jetzt:  Zeile 1  Zurueck, allein und links.
 *         Zeile 2  Ueberschrift links, Geschlecht und Sprache rechtsbuendig.
 *
 * Die Frage "Fuer wen ist die Behandlung?" faellt auf dem Telefon weg, dafuer
 * atmen die beiden Knoepfe (siehe Abschnitt 16). Der zeigende Pfeil steckt an
 * dieser Frage und geht damit mit.
 * ========================================================================== */

@media (max-width: 640px) {
  .bw-card[data-step="package"] .step-in > div {
    gap: 8px 8px;
    align-items: center;
  }

  /* Ueber die volle Breite, damit die Zeile bricht, aber ohne Kasten: als
     grauer Balken waere der Zurueck-Weg das auffaelligste Element des
     Schritts. Ein Textlink reicht. */
  .bw-card[data-step="package"] .bw-back {
    flex: 0 0 100%;
    justify-content: flex-start;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    font-size: 12.5px;
    color: var(--ink-3);
  }

  .bw-card[data-step="package"] .bw-back:hover { color: var(--ink-1); }

  .bw-card[data-step="package"] .bw-h1 {
    flex: 1 1 auto;
    margin-right: auto;
    font-size: 17px;
  }

  .bw-card[data-step="package"] .pkg-genderbar {
    margin-left: auto;
    gap: 0;
  }

  /* Muss nach Abschnitt 16 stehen: dort bekommt die Frage display:inline-flex
     fuer den Pfeil, das wuerde das Ausblenden sonst wieder aufheben. */
  .pkg-genderbar-q { display: none; }
}


/* Geschlecht und Sprache stehen nebeneinander und muessen exakt gleich hoch
   sein, sonst sitzt die Zeile schief. */
.pkg-genderbar .gratis-gender,
.nb-sprache-knopf {
  height: 32px;
  box-sizing: border-box;
}

.pkg-genderbar .gratis-gender { align-content: center; }
.nb-sprache-knopf { padding: 0 8px; }


/* === 18. Zeit-Schritt: Halbstunden-Raster und Verknappung ==================
 * Die Schnittstelle liefert jede rechnerisch freie Minute — 11:20, 11:25,
 * 11:30, 11:35 und so fort. Dreizehn Knoepfe fuer dasselbe Zeitfenster sind
 * keine Auswahl, sondern eine Wand. `design/override.js` zeigt deshalb nur
 * noch alle 15 Minuten eine Zeit und stellt ein Fuenftel davon als bereits
 * vergeben dar. Hier stehen nur die beiden Zustaende dazu.
 * ========================================================================== */

/* Ausgeduennt: bleibt im DOM, damit React seinen Baum behaelt.
 * `!important` ist hier noetig, kein Uebermut: die Slot-Liste bringt einen
 * eigenen <style>-Block im Dokument mit, und dessen
 * `.slot-btn.slotstaff-btn { display: flex }` hat dieselbe Spezifitaet, steht
 * aber spaeter — ohne das Wort blieben bei jeder Filiale mit Mitarbeiterinnen
 * am Knopf alle ausgeduennten Zeiten sichtbar. */
.slot-btn.nb-slot-aus { display: none !important; }

/* Als vergeben gezeigt: durchgestrichen und zurueckgenommen, ohne eigene
   Farbe. Ein roter Knopf zoege den Blick genau auf das, was nicht geht. */
.slot-btn.nb-slot-belegt {
  color: var(--ink-3);
  background: var(--surface-2);
  border-color: var(--line);
  cursor: not-allowed;
  opacity: .72;
}

/* Durchgestrichen wird die Uhrzeit, nicht der ganze Knopf: bei Filialen mit
   mehreren Mitarbeiterinnen stehen im Knopf auch ein Avatar und ein Name. Die
   Klasse setzt `design/override.js` auf das span mit der Uhrzeit. */
.slot-btn.nb-slot-belegt .nb-zeit {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Kein Hover-Versprechen auf etwas, das nicht buchbar ist. */
.slot-btn.nb-slot-belegt:hover,
.slot-btn.nb-slot-belegt:focus-visible {
  color: var(--ink-3);
  background: var(--surface-2);
  border-color: var(--line);
}

.slot-btn.nb-slot-belegt:active { transform: none; }

/* Ein Gitter, dem das Raster jede Zeit genommen hat, samt seiner
   Mitarbeiterin-Ueberschrift: beides raus, sonst steht dort ein Name ohne
   eine einzige Zeit darunter. */
.slot-grid.nb-grid-leer,
.slotstaff-head.nb-kopf-leer { display: none !important; }


/* === 19. Fortschrittsleiste: Symbole und Winkel statt Kreise und Striche ===
 * Vorher: fuenf graue Kreise mit den Ziffern 1 bis 5, dazwischen ein 1 px
 * duenner Strich. Diese Kette aus nummerierten Punkten und Haarlinien steht
 * heute in jeder zweiten Oberflaeche, und sie sagt nichts: die Ziffer im Kreis
 * wiederholt nur, was die Reihenfolge ohnehin zeigt.
 *
 * Nachher: je Schritt ein Symbol, das den Schritt benennt — Stecknadel,
 * Etikett, Kalender, Person, Schloss —, dazwischen ein kleiner Winkel statt
 * eines Strichs. Erledigte Schritte tragen ein Haekchen. Kein Kreis, kein
 * Kasten, keine Ziffer.
 *
 * Die Zuordnung Symbol zu Schritt laeuft ueber `nth-last-child`, von hinten
 * gezaehlt: die Leiste zeigt im Standort-Schritt fuenf Stationen und spaeter
 * nur noch drei, aber der letzte ist immer der Code, der vorletzte immer der
 * Kontakt. Von vorn gezaehlt waere die Zuordnung ab dem Datum falsch.
 * ========================================================================== */


/* Der Strich zwischen den Schritten faellt weg. */
.bw-prog-line { display: none !important; }

.bw-progress { gap: 0; }

.bw-prog-step {
  gap: 7px;
  color: var(--ink-3);
  transition: color .2s var(--ease);
}

/* Aus dem Punkt wird ein reines Symbol: kein Kreis, kein Hintergrund, keine
   Ziffer. Die Ziffer steckt in einem span und wird ueber die Schriftgroesse
   stillgelegt, damit die Vorlesehilfe sie weiter findet. */
.bw-prog-dot {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0;
  width: 17px;
  height: 17px;
  color: currentColor !important;
  transition: transform .2s var(--ease);
}

.bw-prog-dot > span {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0 !important;
  background: currentColor;
  -webkit-mask: var(--nb-symbol, var(--nb-s-datum)) center / 17px 17px no-repeat;
  mask: var(--nb-symbol, var(--nb-s-datum)) center / 17px 17px no-repeat;
}

/* Von hinten gezaehlt, damit die Zuordnung auch bei drei Stationen stimmt. */
.bw-prog-step:nth-last-child(1) { --nb-symbol: var(--nb-s-code); }
.bw-prog-step:nth-last-child(2) { --nb-symbol: var(--nb-s-kontakt); }
.bw-prog-step:nth-last-child(3) { --nb-symbol: var(--nb-s-datum); }
.bw-prog-step:nth-last-child(4) { --nb-symbol: var(--nb-s-paket); }
.bw-prog-step:nth-last-child(5) { --nb-symbol: var(--nb-s-ort); }

/* Erledigt: Haekchen statt des Schritt-Symbols. Der Funnel nimmt erledigte
   Stationen zwar ganz aus der Leiste — die Regel steht fuer den Fall, dass das
   Original sie stehen laesst, und kostet nichts. */
.bw-prog-step.done { --nb-symbol: var(--nb-s-fertig); color: var(--brand); }
.bw-prog-step.active { color: var(--brand-dark); }

.bw-prog-label {
  color: inherit !important;
  font-size: 11.5px;
}

.bw-prog-step.active .bw-prog-label { font-weight: 600; }

/* Der Winkel sitzt hinter jedem Schritt ausser dem letzten. Er zeigt die
   Richtung, in die es weitergeht — das tat der Strich nicht. */
.bw-prog-step:not(:last-child)::after {
  content: "";
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  margin: 0 9px;
  background: var(--line);
  -webkit-mask: var(--nb-winkel) center / 11px 11px no-repeat;
  mask: var(--nb-winkel) center / 11px 11px no-repeat;
  transition: background .25s var(--ease);
}

/* Hinter einem erledigten Schritt ist der Weg gegangen: der Winkel traegt die
   Markenfarbe und fuehrt so bis zur Stelle, an der man steht. */
.bw-prog-step.done::after { background: var(--brand); }

/* Eine einzige, kurze Bewegung beim Schrittwechsel: die aktuelle Station
   rueckt von links ein, ihr Symbol zieht kurz an. Bewusst kein Dauerlauf —
   eine Leiste, die staendig wandert, zieht den Blick von dem weg, was der
   Besucher gerade ausfuellen soll. Weil der Funnel erledigte Stationen aus
   der Leiste nimmt, ist die aktive immer die erste; die Animation laeuft
   deshalb beim Neuaufbau der Leiste an, also genau bei jedem Schrittwechsel. */
.bw-prog-step.active { animation: nb-schritt-an .45s var(--ease) 1 both; }

@keyframes nb-schritt-an {
  0%   { transform: translateX(-5px); opacity: .4; }
  100% { transform: translateX(0);    opacity: 1; }
}

.bw-prog-step.active .bw-prog-dot { animation: nb-symbol-an .5s var(--ease) 1 both; }

@keyframes nb-symbol-an {
  0%   { transform: scale(.7); }
  60%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* Die kommenden Stationen ziehen leicht versetzt nach, damit die Leiste als
   ein Weg gelesen wird und nicht als vier unabhaengige Symbole. */
.bw-prog-step:not(.active) { animation: nb-schritt-nach .45s var(--ease) 1 both; }
.bw-prog-step:nth-child(2) { animation-delay: .05s; }
.bw-prog-step:nth-child(3) { animation-delay: .1s; }
.bw-prog-step:nth-child(4) { animation-delay: .15s; }
.bw-prog-step:nth-child(5) { animation-delay: .2s; }

@keyframes nb-schritt-nach {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 640px) {
  .bw-prog-step:not(:last-child)::after { margin: 0 6px; width: 10px; height: 10px;
    -webkit-mask-size: 10px 10px; mask-size: 10px 10px; }
  .bw-prog-dot { width: 16px; height: 16px; }
  .bw-prog-dot > span { -webkit-mask-size: 16px 16px; mask-size: 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-prog-step, .bw-prog-step .bw-prog-dot { animation: none !important; }
}


/* === 20. Zahlungsblock: echte Symbole statt Schriftzeichen und Emoji =======
 * Vorher trug der Buchen-Knopf alles in einer Zeile und aus Zeichen:
 *
 *     ⚡ Jetzt buchen – 98,10 € je Sitzung →
 *
 * Ein Emoji-Blitz, der dauernd wackelt (`bw-bolt-wobble`, 1,8 s Endlos-
 * schleife), ein Gedankenstrich als Trenner, ein Pfeil aus der Textschrift.
 * Drei Behelfe fuer drei Aufgaben, und keiner davon sitzt auf der Grundlinie
 * der Schrift daneben.
 *
 * Nachher: gezeichneter Blitz links, die Handlung fett, der Preis als zweite
 * Zeile darunter, rechts ein gezeichneter Winkel, der beim Ueberfahren ein
 * Stueck vorlaeuft. Kein Gedankenstrich, kein Emoji, keine Dauerschleife.
 * ========================================================================== */

:root {
  --nb-blitz: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.4 2 4.8 13.1c-.3.4 0 1 .5 1h5.1l-1.3 7.4c-.1.6.7.9 1 .4l8.7-11.1c.3-.4 0-1-.5-1h-5.1l1.3-7.4c.1-.6-.7-.9-1.1-.4z'/%3E%3C/svg%3E");
}

/* Der Knopf: Symbol, zwei Textzeilen, Winkel. */
.bw-paychoice-pay,
.bw-express-cta {
  display: flex !important;
  align-items: center;
  gap: 12px;
  text-align: left !important;
  padding: 12px 18px !important;
}

.bw-express-bolt {
  font-size: 0 !important;
  width: 19px;
  height: 19px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--nb-blitz) center / 19px 19px no-repeat;
  mask: var(--nb-blitz) center / 19px 19px no-repeat;
  animation: none !important;
}

.nb-cta-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin-right: auto;
  line-height: 1.25;
}

.nb-cta-titel { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
/* Kein Blassmachen per Deckkraft: auf der gruenen Flaeche faellt der
   Kontrast damit unter das Lesbare. Die Rangfolge macht die Groesse. */
.nb-cta-preis { font-size: 12.5px; font-weight: 400; }

.bw-paychoice-pay::after,
.bw-express-cta::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--nb-winkel) center / 16px 16px no-repeat;
  mask: var(--nb-winkel) center / 16px 16px no-repeat;
  transition: transform .16s var(--ease);
}

.bw-paychoice-pay:hover::after,
.bw-express-cta:hover::after { transform: translateX(3px); }

/* Das Haekchen vor den Zeilen unter dem Knopf war das Schriftzeichen ✓, das
   je nach Schrift mal duenn und mal fett kommt. Jetzt ein gezeichnetes. */
.bw-paychoice-benefits li { padding-left: 20px; }

.bw-paychoice-benefits li::before {
  content: "" !important;
  top: 4px;
  left: 1px;
  width: 12px;
  height: 12px;
  background: #0a7a3d;
  -webkit-mask: var(--nb-s-fertig) center / 12px 12px no-repeat;
  mask: var(--nb-s-fertig) center / 12px 12px no-repeat;
}

/* Der Trenner "oder" hing zwischen zwei Haarlinien. Die Zeile traegt sich
   selbst, die Striche daneben sind nur Fuellwerk. */
.bw-paychoice-or::before,
.bw-paychoice-or::after { display: none !important; }

.bw-paychoice-or { justify-content: center; }

/* Die Umschaltung Karte / PayPal sass in zwei grossen Kaesten mit 2 px
   Rahmen, die schwerer wogen als die Zahlweisen darunter, um die es
   eigentlich geht. Kleiner, gleiche Hoehe, gefuellt statt umrandet. */
.bw-paymethods { gap: 6px !important; margin-bottom: 12px !important; }

.bw-paymethods > button {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background .14s var(--ease), color .14s var(--ease),
              border-color .14s var(--ease);
}

.bw-paymethods > button[aria-pressed="true"] {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Die drei Zahlweisen: ruhigere Rahmen, damit die gewaehlte durch Fuellung
   auffaellt und nicht durch einen doppelt dicken Strich. Radius 8 statt 12,
   wie ueberall sonst im Funnel. */
.bw-paychoice [role="radiogroup"] > button {
  border-radius: 8px !important;
  border-width: 1px !important;
  padding: 11px 13px !important;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}

.bw-paychoice [role="radiogroup"] > button[aria-checked="true"] {
  border-color: var(--brand) !important;
}

/* Die Auszeichnung "0 € Anzahlung" kam als vollrunde Pille. Runde Pillen
   lesen sich als Werbeaufkleber; im uebrigen Funnel hat nichts mehr als 8 px
   Radius. Gleiche Aussage, ruhiger gesetzt. */
.bw-paychoice [role="radiogroup"] span[style*="999px"] {
  border-radius: 5px !important;
  padding: 1px 6px !important;
  font-weight: 600 !important;
}

/* Auf dem Telefon hatte die rechte Spalte der Zahlweisen ein hartes
   `white-space: nowrap` im Inline-Stil. "pro Sitzung · ohne Vorkasse-Rabatt"
   liess der Ueberschrift links dadurch nur noch ein Drittel der Breite:
   "Vor Ort" / "bezahlen" auf zwei Zeilen, der Untertitel auf drei, und die
   Karte wurde dreimal so hoch wie ihre Nachbarn. */
@media (max-width: 640px) {
  .bw-paychoice [role="radiogroup"] > button { gap: 8px !important; }

  .bw-paychoice [role="radiogroup"] > button > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .bw-paychoice [role="radiogroup"] > button > span:last-child {
    flex: 0 1 auto;
    white-space: normal !important;
    max-width: 42%;
  }

  .bw-paychoice [role="radiogroup"] > button > span:last-child > span:last-child {
    font-size: 11.5px !important;
    line-height: 1.35;
  }
}

/* --- 20e. Der Bezahlen-Knopf in Gruen ------------------------------------
 * Der letzte Knopf im Weg ist der einzige, der Geld kostet — und er sah aus
 * wie jeder andere Weiter-Knopf davor. Ein ruhiger, dunkler Verlauf in
 * Smaragd hebt ihn heraus, ohne laut zu werden: Gruen steht hier fuer den
 * Abschluss, nicht fuer eine Ampel. Nur dieser eine Knopf, nicht jedes
 * `.bw-cta` — sonst ist wieder alles gleich.
 * --------------------------------------------------------------------- */
.bw-paychoice-pay,
.bw-express-cta {
  background: linear-gradient(135deg, #0e7f49 0%, #08603a 100%) !important;
  color: #fff !important;
  border: 0 !important;
}

.bw-paychoice-pay:hover,
.bw-express-cta:hover {
  background: linear-gradient(135deg, #0c7141 0%, #065230 100%) !important;
}

.bw-paychoice-pay:disabled,
.bw-express-cta:disabled {
  background: linear-gradient(135deg, #0e7f49 0%, #08603a 100%) !important;
}

.bw-paychoice-pay:focus-visible,
.bw-express-cta:focus-visible {
  outline: 2px solid #08603a;
  outline-offset: 2px;
}


/* === 20. Die Frage nach dem Geschlecht in Handschrift ======================
 * Die Frage soll wie ein handschriftlicher Zuruf neben dem Schalter wirken,
 * nicht wie Formulartext. Leicht schraeg, dazu der gezeichnete Pfeil aus
 * Abschnitt 16, der darauf zeigt.
 *
 * Die Schrift liegt lokal, nicht bei Google: die CSP der Design-Kopie laesst
 * nur Dateien von dieser Herkunft zu, und ein Fremdaufruf je Seitenaufruf
 * waere ausserdem ein Datenabfluss, den es nicht braucht.
 * ========================================================================== */

@font-face {
  font-family: "Caveat";
  src: url("/newbooking/design/schrift/caveat-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.pkg-genderbar-q {
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-2);
  transform: rotate(-3deg);
  transform-origin: right center;
  line-height: 1.1;
}

/* --- 20f. Karte und PayPal tragen ihre Marke -----------------------------
 * Zwei gleich aussehende graue Knoepfe mit den Woertern "Karte" und "PayPal"
 * verlangen vom Besucher, den Text zu lesen, bevor er die Wahl versteht. Eine
 * Zahlart erkennt man aber am Zeichen, nicht am Wort.
 *
 * Der Kartenweg laeuft ueber Stripe (im Bundle heisst der Zustand `stripe`),
 * der andere ueber PayPal. Beide Knoepfe tragen jetzt ihre Marke: der eine
 * Kartensymbol und den Schriftzug in Stripe-Violett, der andere das
 * PayPal-Zeichen auf PayPal-Gelb.
 * --------------------------------------------------------------------- */

:root {
  /* PayPal-Zeichen, freigestellt aus der Zeichnung, die der Funnel in der
     Zahlungs-Fussnote ohnehin ausliefert. */
  --nb-paypal: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 8 15 17'%3E%3Cpath d='M19.3 9.5h5.6c2.7 0 4.6 1.4 4.2 4.2-.5 3-2.7 4.4-5.6 4.4h-1.5c-.4 0-.7.3-.8.7l-.7 4.2c0 .2-.2.4-.5.4h-2.4c-.3 0-.5-.3-.4-.6l1.9-12.4c.1-.5.3-.9.7-.9z' fill='%23003087'/%3E%3Cpath d='M23.8 9.5c2.7 0 4.6 1.4 4.2 4.2-.5 3-2.7 4.4-5.6 4.4h-1.5c-.4 0-.7.3-.8.7l-.9 5.6c0 .2-.2.4-.5.4h-2.1c-.3 0-.5-.3-.4-.6l.3-1.7c.1-.4.4-.7.8-.7h1.2c2.9 0 5.1-1.4 5.6-4.4.3-1.9-.4-3.2-1.6-3.9.5-.2 1-.3 1.6-.3z' fill='%230070E0'/%3E%3C/svg%3E");
  --nb-karte: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='5' width='19.2' height='14' rx='2.4'/%3E%3Cpath d='M2.4 9.6h19.2'/%3E%3C/svg%3E");
}

.bw-paymethods > button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
}

/* Karte: Kartensymbol, das Wort, dahinter klein der Anbieter. */
.bw-paymethods > button:nth-child(1)::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--nb-karte) center / 17px 17px no-repeat;
  mask: var(--nb-karte) center / 17px 17px no-repeat;
}

/* Der Schriftzug steht nur auf dem gedrueckten Karte-Knopf; mit PayPal
   gewaehlt las er sich als technischer Text "stripe" (QA-Runde 2, Punkt 10). */
.bw-paymethods > button:nth-child(1):not([aria-pressed="true"])::after { content: none; }
.bw-paymethods > button:nth-child(1)::after {
  content: "stripe";
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #635BFF;
}

.bw-paymethods > button:nth-child(1)[aria-pressed="true"] {
  background: #f2f1ff !important;
  border-color: #635BFF !important;
  color: #2f2a6b !important;
}

.bw-paymethods > button:nth-child(1)[aria-pressed="true"]::after { color: #4b45cc; }

/* PayPal: das Zeichen und der Schriftzug in den Hausfarben, auf dem gelben
   Grund, den PayPal fuer seine Knoepfe vorgibt. Ungewaehlt bleibt das Gelb
   zurueckgenommen, sonst schreit der Knopf lauter als die getroffene Wahl. */
.bw-paymethods > button:nth-child(2) {
  background: #ffe1a0 !important;
  border-color: #f0cf86 !important;
  color: #003087 !important;
  font-weight: 700 !important;
  transition: background .14s var(--ease), box-shadow .14s var(--ease),
              border-color .14s var(--ease);
}

.bw-paymethods > button:nth-child(2)::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: none;
  background: var(--nb-paypal) center / 17px 17px no-repeat;
}

.bw-paymethods > button:nth-child(2):hover { background: #ffd98a !important; }

.bw-paymethods > button:nth-child(2)[aria-pressed="true"] {
  background: #ffc439 !important;
  border-color: #b8860d !important;
  box-shadow: inset 0 0 0 1px #e8ae23;
}

/* Zurueckgenommen wird ueber den Gelbton, nicht ueber die Deckkraft: eine auf
   55 % gesetzte Flaeche zieht den dunkelblauen Schriftzug mit herunter, der
   Kontrast fiel auf 2,6:1. So bleibt er in beiden Zustaenden ueber 9:1. */


/* === 21. Zonen-Waehler =====================================================
 * Aufbau siehe design/override.js, Abschnitt 21: man tippt eine Koerperregion
 * an, deren Zonen erscheinen, die gewaehlten sammeln sich darunter und
 * bekommen eine gemeinsame Preisleiter.
 *
 * Groesse des Modells, die Punkte darauf und die Regionen-Karten stehen in
 * Abschnitt 32 — der kam spaeter dazu und ersetzt, was hier urspruenglich
 * stand.
 *
 * WICHTIG: der Funnel haengt sein eigenes Stylesheet fuer den Waehler als
 * <style> in `.mq-wrap` ein, also weiter unten im Dokument als diese Datei.
 * Bei gleicher Spezifitaet gewinnt es. Alle Regeln hier tragen deshalb
 * `.mq-wrap` mit.
 * ========================================================================== */

.bw-card .mq-wrap { padding: 2px; }
.mq-wrap .mq-eyebrow { text-transform: none; letter-spacing: 0; }

.mq-wrap .mq-toggles { margin: 12px 0 4px; }
.mq-wrap .mq-seg button { min-height: 32px; padding: 5px 14px; font-size: 13px; }

.nb-region:hover { border-color: var(--brand); color: var(--ink-1); }

.nb-region[aria-pressed="true"] {
  border-color: var(--brand);
  background: linear-gradient(168deg, #2563eb14 0%, #2563eb22 100%);
  color: var(--brand-dark);
}

/* --- Nur die angetippte Region zeigen ------------------------------------ */
.mq-wrap .mq-list .mq-group { display: none; }
.mq-wrap .mq-list .mq-group.nb-auf { display: block; }

/* Die Ueberschrift stand in Versalien mit einem farbigen Punkt davor. Der
   Punkt trug nichts, Versalien lesen sich wie Geschrei. */
.mq-wrap .mq-group-h::before { display: none !important; }

/* Zonen-Zeilen kompakt: 30 Zonen sind viel, auch aufgeteilt auf vier
   Regionen. */
/* Die Sitzungsauswahl je Zone entfaellt: die Stufe gilt jetzt fuer die ganze
   Zusammenstellung. Sie bleibt im Markup, weil die Preise dort stehen. */
.mq-wrap .mq-variants { display: none !important; }

.mq-wrap .mq-zone.nb-hervor { outline: 2px solid var(--brand); outline-offset: 1px; }

/* --- Deine Auswahl ------------------------------------------------------- */
.nb-auswahl {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #f7faff 0%, #eaf1fd 100%);
}

.nb-auswahl.leer {
  background: none;
  border-style: dashed;
}

.nb-auswahl-leer {
  margin: 0;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.45;
}

.nb-auswahl-kopf {
  margin: 0 0 8px;
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 600;
}

.nb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.nb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}

.nb-chip::after {
  content: "";
  width: 9px;
  height: 9px;
  background: currentColor;
  -webkit-mask: var(--nb-kreuz) center / 9px 9px no-repeat;
  mask: var(--nb-kreuz) center / 9px 9px no-repeat;
  opacity: .55;
}

.nb-chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.nb-chip:hover::after { opacity: 1; }


/* --- Preisleiter fuer die ganze Zusammenstellung ------------------------- */
.nb-leiter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px;
}

.nb-stufe {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}

.nb-stufe:hover { border-color: var(--brand); }

.nb-stufe.on {
  border-color: var(--brand);
  background: linear-gradient(160deg, #2563eb14, #2563eb24);
}

.nb-stufe-n {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-1);
  font-size: 12.5px;
  font-weight: 600;
}

.nb-stufe-spar {
  padding: 1px 5px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 700;
}

.nb-stufe-p {
  color: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* --- Hinweis auf Paket oder Sonderpreis ---------------------------------- */
.nb-hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.nb-hinweis.paket { color: var(--brand-dark); font-weight: 500; }

.nb-wa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  background: #1d9c4c;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s var(--ease);
}

.nb-wa::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: #fff;
  -webkit-mask: var(--nb-wa-icon) center / 15px 15px no-repeat;
  mask: var(--nb-wa-icon) center / 15px 15px no-repeat;
}

.nb-wa:hover { background: #176e3d; }

:root {
  --nb-wa-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.9-4.45 9.9-9.91C21.95 6.45 17.5 2 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23a8.23 8.23 0 0 1 8.23 8.24c0 4.54-3.69 8.23-8.23 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.44.12-.15.16-.25.25-.42.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.47c-.16 0-.43.06-.65.31-.23.25-.86.84-.86 2.05s.88 2.38 1 2.54c.13.17 1.74 2.65 4.2 3.72.59.25 1.05.4 1.4.52.59.19 1.13.16 1.55.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.1-.22-.16-.47-.29z'/%3E%3C/svg%3E");
}

/* --- Unterste Leiste ----------------------------------------------------- */
.mq-wrap .mq-bar { gap: 12px; }
.mq-wrap .mq-bar-total { font-size: 20px; }
.mq-wrap .mq-bar-count { font-size: 11.5px; }
.mq-wrap .mq-bar-installment { font-size: 11.5px !important; }

@media (max-width: 640px) {
  .mq-wrap .mq-body-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 96px;
  }

  .mq-wrap .mq-figure { position: static; }
  .nb-regionen { grid-template-columns: repeat(2, 1fr); }
  .nb-leiter { grid-template-columns: 1fr; }
}


/* === 22. Gratis-Zonen: eine Frage weniger und ein Weg zurueck ==============
 * Siehe design/override.js, Abschnitt 22.
 * ========================================================================== */

/* Das Geschlecht steht einen Schritt darueber schon fest. */
.gratis-picker .gratis-picker-q,
.gratis-picker .gratis-gender { display: none; }

.gratis-picker { padding-top: 30px; }

.nb-gratis-zu {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #ffffff4d;
  background: #ffffff26;
  cursor: pointer;
}

.nb-gratis-zu::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  margin: 0 auto;
  background: #fff;
  -webkit-mask: var(--nb-kreuz) center / 11px 11px no-repeat;
  mask: var(--nb-kreuz) center / 11px 11px no-repeat;
}

.nb-gratis-zu:hover { background: #ffffff40; }

/* Eingeklappt: der Waehler verschwindet, ein Balken bringt ihn zurueck. */
.nb-gratis-auf {
  display: none;
  width: 100%;
  padding: 12px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.pkg-card-gratis.nb-eingeklappt .gratis-picker { display: none; }
.pkg-card-gratis.nb-eingeklappt .nb-gratis-auf { display: block; }


/* Im Zonen-Waehler ist der Zurueck-Weg ein Textlink wie ueberall sonst, kein
   grauer Kasten ueber der Ueberschrift. */
.step-in > div:has(.mq-wrap) .bw-back {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.step-in > div:has(.mq-wrap) .bw-back:hover { color: var(--ink-1); }

.mq-x { width: 28px; height: 28px; font-size: 13px; }


/* === 23. Startschirm: helles Blau, Stadtkarten zum Aufklappen ==============
 * Vorher: der ganze Schirm war eine gesaettigte blaue Flaeche, auf der alles
 * in Weiss stand — Ueberschrift, Text, fuenf milchige Studiozeilen mit voller
 * Anschrift. Das war viel Blau auf einmal, die fuenf Zeilen sahen gleich aus
 * und welche Staedte es ueberhaupt gibt, musste man sich aus den Anschriften
 * zusammensuchen.
 *
 * Nachher: eine helle Flaeche im Ton der Marke, oben fast weiss, nach unten
 * ins Blau laufend. Darauf steht der erste Schritt als drei Karten — eine je
 * Stadt, mit einem Stadtbild und dem Stadtnamen. Erst wer eine Stadt
 * aufklappt, sieht die Studios darin, mit Anschrift und Oeffnungszeiten. Die
 * erste Frage ist damit "welche Stadt", nicht "welche von fuenf Strassen".
 *
 * Die Flaeche ist eine Verlaufsgrafik, kein Foto: mit Nano Banana Pro erzeugt
 * (scripts/hintergrund_hell_erzeugen.cjs), nach drei Vorlagen von Jasper —
 * blasses Blau oben, weiche Boegen, Farbe erst unten. Zwei Zuschnitte, quer
 * fuer den Rechner, hoch fuers Telefon.
 *
 * Alles hier haengt an `body.nb-standort`. Die Klasse setzt override.js,
 * solange der Standort-Schritt auf dem Schirm ist. Ab dem Paket-Schritt faellt
 * sie weg und der Funnel sieht aus wie vorher.
 * ========================================================================== */

body.nb-standort {
  --nb-tinte: #0E2B57;      /* Ueberschrift, Stadt- und Studioname */
  --nb-tinte-2: #3A5480;    /* Fliesstext */
  --nb-tinte-3: #56708F;    /* Anschrift, Zeiten, Nebeninfo */
  --nb-blau: #1B5FC4;       /* Marke: Winkel, aktive Station, Sterne */
  --nb-blau-flach: #F4F8FE; /* Fuellung der Studiozeile */
  --nb-blau-flach-auf: #E9F1FD;
  --nb-flaeche: #ffffff;
  --nb-schatten: 0 1px 2px #0e2b5710, 0 6px 18px #0e2b5714;
  --nb-schatten-auf: 0 2px 4px #0e2b5714, 0 12px 28px #0e2b571f;
  position: relative;
  min-height: 100vh;
  background-color: #EDF3FC;
}

/* Die Flaeche ist gerechnet, nicht erzeugt. Eine erzeugte Grafik muss auf
   jedes Fenster gezogen werden, und genau dabei wurde aus den weichen Boegen
   auf dem Telefon ein Strudel. Ein Verlauf aus dem Stylesheet hat dieses
   Problem nicht: er sitzt auf jedem Format richtig, von 320 px bis 2560 px.

   Aufbau, von unten nach oben gelesen: eine ruhige Senkrechte von fast Weiss
   nach hellem Blau, darueber zwei sehr weiche Lichter — eines steigt von unten
   aus der Mitte, eines liegt oben links — und ganz oben ein feines Korn als
   Data-URI, damit die Flaeche nicht wie ein Farbverlauf aus dem Baukasten
   wirkt. Kein Kreis, kein Ring, keine Kante. */
body.nb-standort::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 0 !important;
  background-color: #F4F8FD;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.5'/%3E%3C/svg%3E"),
    radial-gradient(125% 62% at 50% 116%, #B4CFF3 0%, #B4CFF300 66%),
    radial-gradient(80% 46% at 6% -6%, #DCEAFB 0%, #DCEAFB00 72%),
    linear-gradient(180deg, #FDFEFF 0%, #F6F9FD 34%, #ECF2FB 68%, #DEE9F8 100%);
  background-size: 160px 160px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  opacity: 1;
}

/* Das Korn darf die Flaeche nur anrauen, nicht einfaerben. */
body.nb-standort::before { background-blend-mode: soft-light, normal, normal, normal; }

/* Die Seite ist immer mindestens fensterhoch und die Fusszeile sitzt an ihrem
   unteren Ende. Nur so steht sie zuverlaessig auf dem farbigen Teil des
   Verlaufs — sonst landet sie bei kurzem Inhalt und hohem Fenster im hellen
   Bereich, und Weiss auf Weiss ist nicht lesbar. */
body.nb-standort .bw-page {
  position: relative;
  z-index: 1;
  padding-top: 40px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.nb-standort .bw-footer {
  margin-top: auto;
  padding-top: 32px;
}

body.nb-standort .bw-card[data-step="location"] { max-width: 720px; }


/* --- 23.1 Wortmarke, Bewertungszeile, Fusszeile -------------------------
 * Auf hellem Grund bleibt die Wortmarke, wie sie ist: blau. Der Weiss-Filter
 * der alten Fassung faellt weg.
 * ---------------------------------------------------------------------- */
body.nb-standort .bw-logo img { filter: none; opacity: 1; }
body.nb-standort .bw-logo { margin-bottom: 16px; }

body.nb-standort .bw-trust {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--nb-tinte-2);
  padding: 0;
  font-size: 12.5px;
  letter-spacing: .012em;
}

body.nb-standort .bw-stars { color: var(--nb-blau); font-size: 11px; }
body.nb-standort .bw-trust-text { color: inherit; }

/* Der Verlauf laeuft unten in ein helles Blau, nicht mehr in ein kraeftiges.
   Deshalb steht die Fusszeile dunkel, nicht weiss. */
body.nb-standort .bw-footer { color: var(--nb-tinte-3); }


/* --- 23.2 Schrittleiste ohne eigenen Grund -------------------------------
 * Kein grauer Balken, keine Trennlinie: die Stationen stehen frei auf der
 * Flaeche, die aktuelle im Markenblau, die kommenden gedaempft.
 * ---------------------------------------------------------------------- */
body.nb-standort .bw-progress {
  background: none;
  border-bottom: 0;
  padding: 0 0 24px;
}

body.nb-standort .bw-prog-step { color: var(--nb-tinte-3); }
body.nb-standort .bw-prog-step.active { color: var(--nb-blau); }
body.nb-standort .bw-prog-step.done { color: var(--nb-tinte-2); }
body.nb-standort .bw-prog-step:not(:last-child)::after { background: #C6D7EE; }
body.nb-standort .bw-prog-step.done::after { background: #9DB8DC; }


/* --- 23.3 Der Kasten faellt weg ---------------------------------------- */
body.nb-standort .bw-card {
  background: none;
  border: 0;
  box-shadow: none;
  /* Das Original schneidet den Kasten ab (`overflow: hidden`). Solange der
     Kasten selbst eine Flaeche hatte, fiel das nicht auf; jetzt liegen die
     Stadtkarten randlos darin und ihr Schatten wurde links und rechts glatt
     abgesaebelt. Ein Schatten darf nie abgeschnitten werden. */
  overflow: visible;
}

body.nb-standort .bw-body { padding: 0; }


/* --- 23.4 Kopftexte ---------------------------------------------------- */
body.nb-standort .bw-eyebrow {
  color: var(--nb-tinte-3);
  font-weight: 400;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

body.nb-standort .bw-h1 {
  color: var(--nb-tinte);
  font-size: 30px;
  line-height: 1.14;
  letter-spacing: -.028em;
  margin-bottom: 7px;
}

body.nb-standort .bw-lead {
  color: var(--nb-tinte-2);
  font-size: 13.5px;
  margin-bottom: 18px;
}


/* --- 23.5 Sprachwahl ----------------------------------------------------
 * Der Schalter fuer die Oeffnungszeiten hat sich erledigt: die Zeiten stehen
 * jetzt in der aufgeklappten Stadtkarte bei jedem Studio. Uebrig bleibt die
 * Sprachwahl, allein rechts in ihrer Zeile.
 * ---------------------------------------------------------------------- */
body.nb-standort .nb-hours-toggle { display: none; }
body.nb-standort .nb-kopfzeile { justify-content: flex-end; margin-bottom: 12px; }

body.nb-standort .nb-sprache-knopf {
  background: var(--nb-flaeche);
  border: 0;
  box-shadow: var(--nb-schatten);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.nb-standort .nb-sprache-knopf:hover { box-shadow: var(--nb-schatten-auf); }
body.nb-standort .nb-sprache-knopf::after { border-color: var(--nb-tinte-3); }

body.nb-standort .nb-sprache-knopf:focus-visible,
body.nb-standort .nb-stadt-kopf:focus-visible,
body.nb-standort .loc-card:focus-visible {
  outline: 2px solid var(--nb-blau);
  outline-offset: 2px;
}


/* --- 23.6 Der handgemalte Pfeil -----------------------------------------
 * Eine Anleihe bei Doctolib: ein gezeichneter Pfeil mit einer kurzen Notiz in
 * Handschrift, der auf die erste Entscheidung zeigt. Genau einer auf dem
 * Schirm — zwei waeren Dekoration.
 *
 * Fuer Julian: `.nb-kritzel` haengt override.js zwischen Kopfzeile und
 * Stadtliste ein; im Original gehoert es als eigenes Bauteil dorthin.
 * ---------------------------------------------------------------------- */
.nb-kritzel {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
  color: var(--nb-blau);
  /* Die Notiz sitzt auf der Kante: die untere Haelfte liegt ueber der ersten
     Stadtkarte, die obere darueber. Der Wert ist die halbe Hoehe des
     Bausteins (43 px), nicht geraten. */
  margin: -4px 44px -22px 0;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.nb-kritzel-wort {
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  font-size: 22px;
  line-height: 1;
  padding-bottom: 12px;
  opacity: .82;
}

.nb-kritzel svg {
  width: 80px;
  height: 43px;
  opacity: .66;
  flex-shrink: 0;
}


/* --- 23.7 Die Stadtkarte ------------------------------------------------
 * Je Stadt eine weisse Karte ohne Rand: links das Stadtbild, rechts der Name
 * und wie viele Studios darin liegen, dahinter der Winkel. Ein Tippen klappt
 * die Studios auf. Die getoenten Stadtkaesten aus Abschnitt 2 fallen damit
 * weg.
 *
 * Die Stadtbilder sind mit Nano Banana Pro erzeugt
 * (scripts/stadtbilder_erzeugen.cjs) und auf das Blau der Marke gefaerbt,
 * damit sie die Flaeche fortsetzen statt sie zu unterbrechen. Sie liegen als
 * echtes Bild in der Karte, nicht als Hintergrund hinter Text.
 * ---------------------------------------------------------------------- */
body.nb-standort .loc-city-group {
  background: var(--nb-flaeche) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: var(--nb-schatten);
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow .18s var(--ease);
}

body.nb-standort .loc-city-group:last-child { margin-bottom: 0; }
body.nb-standort .loc-city-group:hover { box-shadow: var(--nb-schatten-auf); }

/* Der Kopf des Originals wird durch den eigenen Knopf ersetzt. */
body.nb-standort .loc-city-header { display: none; }

.nb-stadt-kopf {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  align-items: center;
  column-gap: 20px;
  width: 100%;
  padding: 0 20px 0 0;
  border: 0;
  border-radius: 8px 8px 0 0 !important;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nb-stadt-bild {
  display: block;
  width: 170px;
  height: 96px;
  overflow: hidden;
  background: #DCE8F8;
  /* Logisch statt links/rechts: auf Arabisch laeuft die Karte andersherum,
     dann liegt das Bild rechts und die runden Ecken muessen mitwandern. */
  border-radius: 0 !important;
  border-start-start-radius: 8px !important;
  border-end-start-radius: 8px !important;
}

.nb-stadt-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nb-stadt-text { display: block; min-width: 0; }

.nb-stadt-name {
  display: inline-block;
  color: var(--nb-tinte);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.nb-stadt-meta {
  display: block;
  color: var(--nb-tinte-3);
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 3px;
}

/* Der Winkel zeigt, dass die Karte aufgeht, und dreht sich beim Aufklappen.
   Zwei Striche, keine Flaeche — er soll den Kopf nicht beschweren. */
.nb-stadt-winkel {
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--nb-blau);
  border-bottom: 2px solid var(--nb-blau);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .28s var(--ease);
  opacity: .55;
}

.nb-stadt-kopf[aria-expanded="true"] .nb-stadt-winkel {
  transform: translateY(3px) rotate(-135deg);
  opacity: .9;
}

.nb-stadt-kopf:hover .nb-stadt-winkel { opacity: .9; }

/* Die aufgeklappte Stadt traegt einen gezeichneten Strich unter dem Namen —
   dieselbe Handschrift wie der Pfeil, als Merker "hier bist du". */
.nb-stadt-kopf[aria-expanded="true"] .nb-stadt-name {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' fill='none'%3E%3Cpath d='M3 6.5c22-3.4 47-4.6 76-3.2 14 .7 26 1.9 38 3.6' stroke='%231B5FC4' stroke-width='2.4' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") 0 100% / 100% 7px no-repeat;
  padding-bottom: 6px;
}


/* --- 23.8 Die aufgeklappte Stadt ----------------------------------------
 * Das Raster der Studios ist der Koerper der Karte. Zugeklappt hat es keine
 * Hoehe, aufgeklappt faehrt es aus. Die Hoehe wird begrenzt statt geschaltet,
 * damit die Bewegung laeuft; 640 px reichen fuer zwei Zeilen und liegen weit
 * ueber dem, was je gebraucht wird.
 * ---------------------------------------------------------------------- */
body.nb-standort .loc-grid {
  grid-template-columns: 1fr;
  gap: 10px;
  /* Oben 18 px: das Stadtbild endet mit dem Kopf, und die Studios brauchen
     Luft dazu — 4 px klebten sie an die Unterkante des Bildes. */
  padding: 18px 16px 18px;
  max-height: 640px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .3s var(--ease), opacity .22s var(--ease), padding .3s var(--ease);
}

@media (min-width: 560px) {
  body.nb-standort .loc-grid { grid-template-columns: 1fr 1fr; }
}

body.nb-standort .loc-city-group.nb-zu .loc-grid {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Die Studiozeile: eine flach getoente Flaeche ohne Rand, damit die Karte
   ruhig bleibt. Beim Ueberfahren wird der Ton dichter, kein Sprung. */
body.nb-standort .loc-card {
  background: var(--nb-blau-flach);
  border: 0;
  border-radius: 6px !important;
  box-shadow: none;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  padding: 11px 30px 11px 11px;
  transition: background .16s var(--ease);
}

body.nb-standort .loc-card:hover {
  background: var(--nb-blau-flach-auf);
  box-shadow: none;
}

body.nb-standort .loc-overlay-name {
  color: var(--nb-tinte);
  font-size: 14.5px;
  font-weight: 600;
}

body.nb-standort .loc-content-addr { color: var(--nb-tinte-3); }
body.nb-standort .loc-content-note { color: var(--nb-tinte-2); }
body.nb-standort .loc-overlay-cta { color: #9DB4D6; }
body.nb-standort .loc-card:hover .loc-overlay-cta { color: var(--nb-blau); }

/* Die Zeiten stehen jetzt immer da: die Stadtkarte ist ohnehin zu, solange
   man sie nicht braucht, und in der offenen Karte ist die Zeile die zweite
   Frage nach der Anschrift. */
body.nb-standort .loc-content-hours {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0 9px;
  margin-top: 4px;
}

body.nb-standort .loc-hours-row {
  justify-content: flex-start;
  gap: 4px;
  font-size: 10.5px;
  white-space: nowrap;
}

body.nb-standort .loc-hours-day,
body.nb-standort .loc-hours-time { color: var(--nb-tinte-3); }
body.nb-standort .loc-hours-closed { color: #7F94B4; }


/* --- 23.9 Die Wahrzeichen als Duotone ------------------------------------
 * Die alten Wahrzeichen waren feingliedrige Zeichnungen — bei 44 px wurde
 * daraus ein blaues Gekruemel. Jetzt sind es gezeichnete Duotone-Symbole aus
 * wenigen grossen Formen: helles Blau als Flaeche, Markenblau als Koerper,
 * ein warmer Punkt als Akzent (Rosette, Kuppelspitze, Uhr). Sie stehen frei
 * auf der Zeile, ohne Plaettchen und ohne Rahmen.
 *
 * Fuer Julian: fuenf SVG unter design/wahrzeichen/*-duo.svg, im Original
 * gehoeren sie in die Studiodaten.
 * ---------------------------------------------------------------------- */
body.nb-standort .loc-photo-bg {
  width: 44px;
  height: 44px;
  background-size: contain;
  background-position: center;
  opacity: 1;
}

body.nb-standort .loc-photo-bg[style*="pestalozzi"] {
  background-image: url("/newbooking/design/wahrzeichen/berlin-gedaechtniskirche-duo.svg") !important;
}

body.nb-standort .loc-photo-bg[style*="danckelmann"] {
  background-image: url("/newbooking/design/wahrzeichen/berlin-schloss-charlottenburg-duo.svg") !important;
}

body.nb-standort .loc-photo-bg[style*="muenchen-westend"] {
  background-image: url("/newbooking/design/wahrzeichen/muenchen-bavaria-duo.svg") !important;
}

body.nb-standort .loc-photo-bg[style*="muenchen-steinstrasse"] {
  background-image: url("/newbooking/design/wahrzeichen/muenchen-friedensengel-duo.svg") !important;
}

body.nb-standort .loc-photo-bg[style*="augsburg"] {
  background-image: url("/newbooking/design/wahrzeichen/augsburg-perlachturm-duo.svg") !important;
}


/* --- 23.10 Telefon --------------------------------------------------------
 * Auf dem Telefon steht das Stadtbild ueber dem Namen statt daneben: 170 px
 * Bild und daneben ein Name mit Unterzeile passen auf 354 px nicht
 * nebeneinander, ohne dass beides gequetscht wirkt.
 * ---------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Kein eigener Zuschnitt mehr fuers Telefon: der gerechnete Verlauf sitzt
     auf jedem Format von selbst richtig. */
  body.nb-standort .bw-page { padding: 30px 16px 40px; }

  /* Die Bewertungszeile ist am Stueck rund 395 px breit und passt damit auf
     kein Telefon. Als Absatz statt als Zeile fliessen Sterne und Text
     zusammen und brechen an derselben Kante um. */
  body.nb-standort .bw-trust {
    display: block;
    max-width: 100%;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.5;
  }

  body.nb-standort .bw-stars {
    display: inline;
    margin-right: 6px;
    white-space: nowrap;
  }

  body.nb-standort .bw-trust-text { display: inline; }

  /* Auf dem Telefon tragen die Stationen gar keine Beschriftung mehr, nur
     noch ihr Symbol. Fuenf Woerter passen dort nicht nebeneinander, und die
     Reihe erklaert sich ueber die Symbole und die hervorgehobene Station. */
  /* Die Beschriftungen fallen jetzt in jedem Schritt weg, siehe 34.7. */
  body.nb-standort .bw-progress { padding-bottom: 20px; }
  body.nb-standort .bw-h1 { font-size: 25px; }

  .nb-stadt-kopf {
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 0;
    padding: 0 16px 14px;
  }

  .nb-stadt-bild {
    grid-column: 1 / -1;
    width: auto;
    height: 104px;
    margin: 0 -16px 12px;
    border-radius: 0 !important;
    border-start-start-radius: 8px !important;
    border-start-end-radius: 8px !important;
  }

  .nb-stadt-name { font-size: 18px; }

  /* Die Notiz sitzt zur Haelfte im Stadtbild der ersten Karte: sie gehoert
     zu ihr, und der Bezug ist deutlicher, wenn sie hineinreicht. Der Himmel
     ueber Berlin ist die hellste Stelle des Bildes, das dunkle Blau der
     Handschrift steht darauf. */
  /* Auf dem Telefon rund 30 Prozent groesser als vorher: die Notiz ist dort
     das einzige Handgeschriebene auf dem Schirm und darf das tragen. */
  /* 4 px hoeher als vorher; der untere Rand geht um dieselben 4 px zurueck,
     damit die Stadtkarte darunter stehen bleibt, wo sie ist. */
  .nb-kritzel { margin: -4px 8px -31px 0; gap: 5px; }
  .nb-kritzel svg { width: 92px; height: 50px; }
  /* Das Wort steht auf derselben Hoehe wie die obere Spitze des Pfeils
     daneben: der Abstand nach unten hebt es aus der Grundlinie. */
  .nb-kritzel-wort { font-size: 27px; padding-bottom: 23px; }

  /* Auf dem Telefon traegt der Kopf schon 14 px Abstand nach unten. */
  body.nb-standort .loc-grid { padding: 4px 14px 16px; }
}


/* === 24. Paketkarten: Produktkarte mit Zonenbild ===========================
 * Vorher: sechs gleich aussehende Textkacheln. Titel, drei Stichpunkte,
 * Preis, Knopf. Wer die Zonen nicht auswendig kennt, muss lesen, um zu
 * verstehen, was er bucht — und sechsmal dasselbe Layout gibt dem Auge keinen
 * Halt.
 *
 * Nachher: eine Produktkarte. Oben ein gerundetes Bild der Zone, das man
 * seitlich wischen kann, ein Bild je Zone. Auf dem Bild zwei Auflagen: oben
 * rechts eine weisse Ecke, die in das Bild hineingreift und die Auszeichnung
 * traegt, unten ein blauer Streifen mit dem Namen der gezeigten Zone und den
 * Balken zum Wischen. Darunter Name, Preis je Sitzung und der Winkel zum
 * Aufklappen. Erst beim Aufklappen kommen die Leistungen — jede mit eigenem
 * gezeichneten Symbol — und die Sitzungszahl.
 *
 * Die Bilder sind mit Nano Banana Pro erzeugt (scripts/zonenbilder_erzeugen.cjs):
 * weite helle Ebene, harte Mittagssonne, lange Schatten, viel Leerraum, eine
 * glatte weisse Koerperform ohne Gesicht und ohne anatomische Zeichnung, und
 * genau ein Blau — die Zone, um die es geht. Dieselbe Bildsprache wie der
 * Himmel im Standort-Schritt.
 *
 * Zu den Radien: Aenderung 1 zieht den ganzen Funnel auf 4 px. Die Paketkarten
 * sind davon ausgenommen, weil sie hier als Produktkarten gebaut sind und die
 * Rundung Teil dieser Form ist — Karte 20 px, Bild 15 px, Auflagen 10 px. Das
 * ist eine bewusste Ausnahme fuer diesen einen Schritt, kein Rueckfall in die
 * gemischten Radien von vorher.
 *
 * Alles haengt an `body.nb-pakete`, gesetzt von override.js, solange der
 * Paket-Schritt auf dem Schirm ist.
 * ========================================================================== */

/* --- 24.1 Raster ---------------------------------------------------------
 * Zwei Spalten ab dem kleinsten Telefon: einspaltig scrollt man an sechs
 * Karten mit Bild ewig vorbei. Drei Spalten erst, wenn eine Spalte dabei
 * nicht unter 300 px faellt.
 * ---------------------------------------------------------------------- */
/* align-items: stretch, damit die Karten einer Reihe exakt gleich hoch sind:
   ein zweizeiliger Name machte die eine Karte sonst hoeher als die andere.
   Nur solange eine Karte aufgeklappt ist, wird umgeschaltet — sonst wuechsen
   die Nachbarn leer auf deren Hoehe mit. */
body.nb-pakete .pkg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

body.nb-pakete .pkg-grid:has(.pkg-card.open) { align-items: start; }

@media (min-width: 1040px) {
  body.nb-pakete .pkg-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* Die aufgeklappte Karte nimmt die ganze Reihe: die Sitzungsauswahl braucht
   Platz, und eine halbe Zeile Preisleiter liest sich nicht. */
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) { grid-column: 1 / -1; }

/* --- 24.2 Die Karte -----------------------------------------------------
 * Weiss auf dem hellgrauen Grund, weicher Schatten statt Kontur. Der Rahmen
 * fiel weg, weil Rundung und Schatten die Karte schon abgrenzen; eine Linie
 * obendrauf macht sie nur harter.
 * ---------------------------------------------------------------------- */
body.nb-pakete .pkg-card:not(.pkg-card-gratis) {
  display: flex;
  flex-direction: column;
  padding: 7px 7px 0;
  background: #fff;
  border: 0;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px #1b2b450f, 0 10px 28px -16px #1b2b4547;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}

body.nb-pakete .pkg-card:not(.pkg-card-gratis):hover {
  background: #fff;
  box-shadow: 0 2px 4px #1b2b4514, 0 16px 34px -16px #1b2b4557;
}

body.nb-pakete .pkg-card.open:not(.pkg-card-gratis):hover { box-shadow: 0 2px 4px #1b2b4514, 0 16px 34px -16px #1b2b4557; }

/* Reihenfolge im Kopf: erst der Name, dann der Preis, dann die Leistungen.
   Im Markup stehen die Leistungen zwischen Name und Preis; beim Aufklappen
   wuerde der Preis dadurch nach unten springen. Umsortiert wird mit order,
   das Markup bleibt unangetastet. */
body.nb-pakete .pkg-body {
  display: flex;
  flex-direction: column;
  padding: 11px 7px 12px;
  gap: 0;
}

body.nb-pakete .pkg-title-row    { order: 1; }
body.nb-pakete .pkg-card-footer  { order: 2; }
body.nb-pakete .pkg-bullets      { order: 3; }

/* --- 24.3 Das Bild und der Wischstreifen --------------------------------
 * Ein Streifen mit Rastpunkten: auf dem Telefon wischt man ihn mit dem
 * Finger, am Rechner klickt man die Winkel links und rechts oder die Balken
 * unten. Kein eigenes Skript fuers Ziehen — der Browser kann das, sobald
 * scroll-snap gesetzt ist.
 * ---------------------------------------------------------------------- */
.nb-galerie {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #eef2f8;
  border-radius: 15px !important;
}

.nb-band {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  border-radius: 0 !important;
}

.nb-band::-webkit-scrollbar { display: none; }

/* Das Bild ist Teil der Schaltflaeche: ein Tipp darauf klappt die Karte auf
   (siehe override.js), ein Wisch nicht. */
.nb-band { cursor: pointer; }

.nb-bild {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: center / cover no-repeat;
  border-radius: 0 !important;
}

/* --- 24.4 Auflagen: Auszeichnung, Preis, Zonenstreifen -------------------
 * Der Preis sitzt in einer weissen Ecke, die aus dem Bild ausgeschnitten
 * wirkt — dieselbe Figur wie in der Vorlage. Er steht damit auf der Karte
 * ganz oben, dort wo verglichen wird, und die Textflaeche darunter bleibt
 * frei fuer den Namen.
 * ---------------------------------------------------------------------- */
/* Die Ecke oben rechts: das Weiss der Karte greift in das Bild hinein, darin
   steht die Auszeichnung. Der Ausschnitt entsteht aus zwei Radien — oben
   rechts derselbe wie am Bild, unten links der Gegenbogen. Dazu zwei kleine
   Viertelbogen ueber die Nachbarecken, damit die Kante nicht als Kasten auf
   dem Bild klebt, sondern wie ausgeschnitten wirkt. */
.nb-ecke {
  --nb-ecke-farbe: #fff;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  padding: 6px 11px 9px 14px;
  background: var(--nb-ecke-farbe);
  color: var(--ink-1);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.35;
  border-radius: 0 15px 0 14px !important;
}

/* Die beiden Gegenbogen. Sie sitzen ausserhalb des weissen Feldes und fuellen
   die Kerbe mit derselben Farbe, so dass die Kante rund in das Bild laeuft. */
.nb-ecke::before,
.nb-ecke::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle 12px at 0 100%, #0000 98%, var(--nb-ecke-farbe) 100%);
  border-radius: 0 !important;
}

/* Links neben der Ecke, oben: das Weiss haelt sich an Ecke und Bildkante,
   der Rest wird von einer Scheibe unten links weggenommen. */
.nb-ecke::before { top: 0; left: -12px; }

/* Unter der Ecke, rechts: dieselbe Figur, nur eine Kante weiter. */
.nb-ecke::after { right: 0; bottom: -12px; }

.nb-galerie:not([data-nb-marke]) .nb-ecke { display: none; }

/* Der Streifen unten sagt, welche Zone gerade zu sehen ist, und traegt die
   Balken. Beides in einer Zeile: der Name wandert beim Wischen mit, die
   Balken zeigen, wie viele Zonen das Paket hat. */
.nb-leiste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 8px;
  background: linear-gradient(180deg, #2b62dded, #1c4fd4f5);
  color: #fff;
  border-radius: 0 0 15px 15px !important;
}

/* Die Zonen des Pakets als Symbolkette. Sie steht still, waehrend die Bilder
   darueber wechseln: das Bild zeigt die einzelne Zone, die Kette das ganze
   Paket. */
.nb-zonen {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.nb-zeichen {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: #fff;
  -webkit-mask: var(--nb-zeichen, var(--nb-z-zone)) center / 18px 18px no-repeat;
  mask: var(--nb-zeichen, var(--nb-z-zone)) center / 18px 18px no-repeat;
}

.nb-plus {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff8f;
}

.nb-balken {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}

.nb-balken button {
  width: 13px;
  height: 3px;
  padding: 0;
  border: 0;
  background: #ffffff5c;
  cursor: pointer;
  transition: background .16s var(--ease);
}

.nb-balken button[aria-current="true"] { background: #fff; }
.nb-balken button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Eine einzige Zone braucht keine Balken und keine Winkel. */
.nb-galerie[data-nb-anzahl="1"] .nb-balken,
.nb-galerie[data-nb-anzahl="1"] .nb-wisch { display: none; }

/* --- 24.5 Winkel zum Wischen -------------------------------------------- */
.nb-wisch {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 26px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s var(--ease);
}

.nb-wisch::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #1b2b45;
  -webkit-mask: var(--nb-winkel) center / 18px 18px no-repeat;
  mask: var(--nb-winkel) center / 18px 18px no-repeat;
}

.nb-wisch-links { left: 1px; }
.nb-wisch-links::before { transform: scaleX(-1); }
.nb-wisch-rechts { right: 1px; }

.pkg-card:hover .nb-wisch { opacity: .5; }
.nb-wisch:hover { opacity: 1 !important; }
.nb-wisch[hidden] { display: none; }
.nb-wisch:focus-visible { opacity: 1; outline: 2px solid var(--brand); outline-offset: 1px; }

/* Die Auszeichnung steht im Markup in der Textflaeche; auf der Karte liegt
   sie als Kopie auf dem Bild (siehe override.js). */
body.nb-pakete .pkg-chips { display: none; }

/* --- 24.6 Zugeklappt: Name und Winkel -----------------------------------
 * Mehr steht nicht da. Der Preis steht schon auf dem Bild, die Leistungen
 * sind erst interessant, wenn eine Karte in die engere Wahl kommt.
 * ---------------------------------------------------------------------- */
body.nb-pakete .pkg-card:not(.open) .pkg-bullets,
body.nb-pakete .pkg-card:not(.open) .pkg-price-total { display: none; }

body.nb-pakete .pkg-card-name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.28;
  padding-right: 0;
}

@media (min-width: 1040px) {
  body.nb-pakete .pkg-card-name { font-size: 15.5px; }
}

/* Der Preis sitzt am Fuss der Karte. Bei kurzen Namen entsteht dadurch Luft
   zwischen den Symbolen und dem Preis, statt dass die Karte oben zusammen-
   sackt und die Nachbarkarte hoeher steht. */
body.nb-pakete .pkg-card-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 0;
  align-items: center;
}

body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .pkg-card-footer {
  margin-top: 10px;
  padding-top: 0;
}

body.nb-pakete .pkg-card-footer { margin-top: 7px; }

body.nb-pakete .pkg-price-now { font-size: 19px; letter-spacing: -.02em; }
body.nb-pakete .pkg-price-was { font-size: 12px; }

/* Der Winkel neben dem Namen steht schon in Abschnitt 9 und zeigt nach unten,
   solange die Karte zu ist. Hier wird er nur etwas groesser: er ist der
   einzige Hinweis darauf, dass die Karte mehr enthaelt. */
body.nb-pakete .pkg-card-footer::after {
  width: 19px;
  height: 19px;
  -webkit-mask-size: 19px 19px;
  mask-size: 19px 19px;
}

/* --- 24.7 Aufgeklappt ---------------------------------------------------
 * Die Karte dreht sich ins Blaue (Abschnitt 6). Das Bild bleibt hell und
 * wirkt dadurch wie ein Fenster in der blauen Flaeche — derselbe Griff wie
 * die Glaszeilen auf dem Startschirm.
 * ---------------------------------------------------------------------- */
/* Die Ecke traegt immer die Farbe der Karte an dieser Stelle — zugeklappt das
   Weiss, aufgeklappt das Blau. Nur so liest sie sich als Ausschnitt und nicht
   als aufgeklebtes Schild. Der Grund der Karte ist auf dem Rechner ein
   Verlauf von --brand nach --brand-dark ueber 160 Grad; wo die Ecke sitzt,
   steht er bei rund 17 % — das ist #245fe8. Farbe und beide Gegenbogen haengen
   an einem Token, deshalb reicht hier eine Zeile. */
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-ecke {
  --nb-ecke-farbe: #245fe8;
  color: #fff;
}

/* Die Zeile "Spezialpreis" ist das erste Element unter der Trennlinie und
   klebte ohne eigenen Abstand daran. */
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .pkg-variants { padding: 13px 7px 12px; }

body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .pkg-bullets {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid #ffffff2e;
}

/* Ueber die ganze Reihe wuerde das Bild im Seitenverhaeltnis 3:2 rund 640 px
   hoch — die Sitzungsauswahl waere dann unter der Falte. Aufgeklappt steht das
   Bild deshalb links und laeuft ueber die volle Hoehe der Karte mit; rechts
   daneben Name, Preis, Leistungen und die Stufen. */
@media (min-width: 700px) {
  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) {
    display: grid;
    grid-template-columns: minmax(230px, 32%) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "bild kopf"
      "bild stufen";
    align-content: start;
    padding: 7px;
    column-gap: 4px;
  }

  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-galerie {
    grid-area: bild;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 290px;
  }

  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .pkg-body { grid-area: kopf; }
  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .pkg-variants { grid-area: stufen; padding: 13px 7px 5px; }

  /* Zugeklappt sitzt der Winkel neben dem Namen. Aufgeklappt haengt er dort
     mitten in der Preiszeile, also wandert er in die obere Ecke der Karte —
     dorthin, wo man ihn zum Zumachen sucht. */
  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .pkg-card-footer::after {
    position: absolute;
    top: 12px;
    right: 12px;
  }
}

/* Auf dem Telefon bleibt die aufgeklappte Karte einspaltig; das Bild wird nur
   flacher, damit die Sitzungen noch ins Sichtfeld passen. */
@media (max-width: 699px) {
  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-galerie { aspect-ratio: 16 / 9; }

  /* Untereinander steht das helle Bild direkt auf dem satten Blau — eine harte
     Kante quer durch die Karte. Der Grund laeuft deshalb nach oben ins Helle
     aus und geht damit ins Bild ueber statt dagegen zu stossen. Auf dem
     Rechner liegt das Bild links neben dem Blau, dort gibt es die Kante nicht. */
  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis)::after {
    background: linear-gradient(180deg, #7ba4f4 0%, #4a82f4 26%, #2563eb 46%, #1a46cf 100%);
  }

  /* Der Verlauf ist oben hell, also traegt die Ecke dort das Hellblau und
     dunkle Schrift — sonst stuende ein satter blauer Block im ausgefadeten
     Kopf der Karte. */
  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-ecke {
    --nb-ecke-farbe: #7ba4f4;
    color: #10224e;
  }
}

/* --- 24.9 Zwei Spalten auf dem Telefon ----------------------------------
 * Bei zwei Spalten ist eine Karte auf einem 390-px-Telefon rund 174 px breit.
 * Radien, Auflagen und Schriftgroessen ziehen entsprechend mit, sonst frisst
 * die Ecke oben rechts die halbe Bildbreite und der Preis bricht um.
 * ---------------------------------------------------------------------- */
@media (max-width: 560px) {
  body.nb-pakete .pkg-grid { gap: 8px; }

  body.nb-pakete .pkg-card:not(.pkg-card-gratis) {
    padding: 6px 6px 0;
    border-radius: 16px !important;
  }

  .nb-galerie { border-radius: 12px !important; }

  .nb-ecke {
    padding: 4px 8px 7px 11px;
    font-size: 10px;
    border-radius: 0 12px 0 11px !important;
  }

  .nb-ecke::before,
  .nb-ecke::after {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle 10px at 0 100%, #0000 98%, var(--nb-ecke-farbe) 100%);
  }

  .nb-ecke::before { left: -10px; }
  .nb-ecke::after { bottom: -10px; }

  .nb-leiste {
    padding: 5px 9px 6px;
    gap: 6px;
    border-radius: 0 0 12px 12px !important;
  }

  .nb-zonen { gap: 4px; }
  .nb-zeichen {
    width: 15px;
    height: 15px;
    -webkit-mask-size: 15px 15px;
    mask-size: 15px 15px;
  }
  .nb-plus { font-size: 10px; }
  .nb-balken button { width: 11px; }

  body.nb-pakete .pkg-body { padding: 9px 5px 10px; }
  body.nb-pakete .pkg-card-name { font-size: 13px; }
  body.nb-pakete .pkg-card-footer { margin-top: 5px; gap: 6px; }
  body.nb-pakete .pkg-price-now { font-size: 16px; }
  body.nb-pakete .pkg-price-was { font-size: 10.5px; }

  body.nb-pakete .pkg-card-footer::after {
    width: 16px;
    height: 16px;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
  }

  /* Aufgeklappt ueber beide Spalten: dort ist wieder Platz fuer die volle
     Groesse. */
  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .pkg-card-name { font-size: 15px; }
  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .pkg-price-now { font-size: 19px; }
}

/* --- 24.8 Gezeichnete Symbole vor den Leistungen ------------------------
 * Vorher trug jede Leistung denselben Haken. Der sagt nur "ist dabei", nicht
 * was dabei ist. Jetzt hat jede Zone ihr eigenes Symbol, mit der Hand
 * gezeichnet: offene Striche, runde Enden, keine perfekten Kreise. Das passt
 * zur Handschrift, die im Paket-Schritt ohnehin schon steht.
 * ---------------------------------------------------------------------- */

body.nb-pakete .pkg-bullets li::before {
  width: 19px;
  height: 19px;
  margin-top: 0;
  background: currentColor;
  -webkit-mask: var(--nb-zeichen, var(--nb-z-zone)) center / 19px 19px no-repeat;
  mask: var(--nb-zeichen, var(--nb-z-zone)) center / 19px 19px no-repeat;
}

body.nb-pakete .pkg-bullets li { gap: 8px; font-size: 12.5px; align-items: flex-start; }

/* Der Funnel blendet die dritte Leistung unter 600 px aus
   (`.pkg-bullets li:nth-child(3){display:none}` im Bundle). Auf der neuen
   Karte zeigt der Wischstreifen aber drei Zonen — dann darf die Liste
   darunter nicht bei zwei aufhoeren. */
body.nb-pakete .pkg-bullets li:nth-child(3) { display: flex; }

.nb-z-achseln       { --nb-zeichen: var(--nb-z-achseln); }
.nb-z-intim         { --nb-zeichen: var(--nb-z-intim); }
.nb-z-bikini        { --nb-zeichen: var(--nb-z-bikini); }
.nb-z-pofalte       { --nb-zeichen: var(--nb-z-pofalte); }
.nb-z-oberschenkel  { --nb-zeichen: var(--nb-z-oberschenkel); }
.nb-z-unterschenkel { --nb-zeichen: var(--nb-z-unterschenkel); }
.nb-z-ganzkoerper   { --nb-zeichen: var(--nb-z-ganzkoerper); }
.nb-z-gesicht       { --nb-zeichen: var(--nb-z-gesicht); }
.nb-z-arme          { --nb-zeichen: var(--nb-z-arme); }
.nb-z-unbegrenzt    { --nb-zeichen: var(--nb-z-unbegrenzt); }


/* === 25. Datum und Uhrzeit: zwei Abschnitte, die sich auf- und zuklappen ===
 * Vorher: links der Monatskalender, rechts die Uhrzeiten. Auf dem Rechner
 * standen beide nebeneinander und die rechte Haelfte war vor der Tagwahl leer;
 * auf dem Telefon lagen sie untereinander, und nach der Tagwahl tauchten die
 * Zeiten unter der Falte auf — man scrollte blind hinterher.
 *
 * Nachher: ein Blatt mit zwei Abschnitten untereinander, jeder mit eigener
 * Kopfzeile: erst "Tag", darunter "Uhrzeit". Wer einen Tag waehlt, sieht den
 * Kalender zusammenlaufen — uebrig bleibt seine Kopfzeile mit dem gewaehlten
 * Datum — und darunter die Uhrzeiten aufgehen. Ein Tipp auf die
 * zusammengeklappte Kopfzeile faehrt den Kalender wieder aus.
 *
 * Der Griff ist bewusst der einer Ziehharmonika und keine Schiebebewegung:
 * eine zugeklappte Zeile mit Winkel sagt von selbst, dass sich darunter etwas
 * befindet. Bei einer weggeschobenen Seite muss man das erst lernen.
 *
 * Alles haengt an `body.nb-zeit`; welcher Abschnitt offen ist, steht in
 * `body.nb-phase-zeit`.
 * ========================================================================== */

/* --- 25.1 Das Blatt ------------------------------------------------------
 * Die Regeln tragen `.bw-card` mit, weil das Bundle die Zeile ueber
 * `.cal-slot-row:has(.slot-reveal.open)` auf zwei Spalten umstellt, sobald ein
 * Tag gewaehlt ist — drei Klassen. Ohne das zusaetzliche Glied gewinnt diese
 * Regel und das Blatt springt beim Tagwechsel zurueck ins alte Layout.
 * ---------------------------------------------------------------------- */
body.nb-zeit .bw-card .cal-slot-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 640px;
  /* Linksbuendig, nicht zentriert: die Ueberschrift daneben steht links, ein
     mittig gesetztes Blatt sieht daneben aus wie verrutscht. */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3e9f4;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px #1b2b450f, 0 12px 30px -18px #1b2b4547;
}

/* --- 25.2 Die Kopfzeile eines Abschnitts --------------------------------
 * Symbol, Beschriftung, Wert, Winkel. Die Kopfzeile des offenen Abschnitts
 * traegt die Markenfarbe im Symbol, die des zugeklappten steht ruhig — und
 * der Wert darin ist das, was man gewaehlt hat.
 * ---------------------------------------------------------------------- */
.nb-teil {
  display: grid;
  grid-template-columns: 19px auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0 !important;
  transition: background-color .18s var(--ease);
}

.nb-teil + .cal,
.nb-teil + .slot-reveal { border-top: 1px solid #eef1f7; }

.nb-teil[data-nb-teil="zeit"] { border-top: 1px solid #eef1f7; }

.nb-teil:hover { background: #f7f9fd; }
.nb-teil[disabled] { cursor: default; }
.nb-teil[disabled]:hover { background: none; }
.nb-teil:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.nb-teil-symbol {
  width: 19px;
  height: 19px;
  background: var(--ink-3);
  -webkit-mask: var(--nb-teil-symbol) center / 19px 19px no-repeat;
  mask: var(--nb-teil-symbol) center / 19px 19px no-repeat;
  transition: background-color .2s var(--ease);
}

.nb-teil[data-nb-teil="tag"]  { --nb-teil-symbol: var(--nb-t-kalender); }
.nb-teil[data-nb-teil="zeit"] { --nb-teil-symbol: var(--nb-t-uhr); }

.nb-teil[aria-expanded="true"] .nb-teil-symbol { background: var(--brand); }
.nb-teil[disabled] .nb-teil-symbol { background: #c7cddb; }

.nb-teil-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

.nb-teil[disabled] .nb-teil-label { color: #a9b1c2; }

.nb-teil-wert {
  justify-self: end;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-1);
}

.nb-teil-wert[data-nb-leer="1"] { font-weight: 400; color: var(--ink-3); }

.nb-teil-winkel {
  width: 17px;
  height: 17px;
  background: var(--ink-3);
  -webkit-mask: var(--nb-winkel-ab) center / 17px 17px no-repeat;
  mask: var(--nb-winkel-ab) center / 17px 17px no-repeat;
  transition: transform .34s var(--ease), background-color .2s var(--ease);
}

.nb-teil[aria-expanded="true"] .nb-teil-winkel {
  transform: rotate(180deg);
  background: var(--brand);
}

.nb-teil[disabled] .nb-teil-winkel { opacity: 0; }

/* Zwei gezeichnete Symbole fuer die beiden Abschnitte, im Strich der
   Zonensymbole auf den Paketkarten. */

/* --- 25.3 Auf- und Zuklappen --------------------------------------------
 * Die Hoehe wird von override.js gesetzt, weil beide Abschnitte
 * unterschiedlich hoch sind und ihre Hoehe sich mit dem Inhalt aendert. Hier
 * steht nur, wie die Bewegung laeuft.
 * ---------------------------------------------------------------------- */
body.nb-zeit .bw-card .cal-slot-row > .cal,
body.nb-zeit .bw-card .cal-slot-row > .slot-reveal {
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  /* In einer Flex-Spalte steht min-height auf auto: der Abschnitt schrumpft
     dann nicht unter seine Inhaltshoehe. */
  flex: 0 0 auto;
  min-height: 0;
  /* Zugeklappt faellt auch die senkrechte Polsterung weg. Polsterung wird nie
     zusammengedrueckt: bliebe sie stehen, waere der zugeklappte Abschnitt
     trotz `max-height: 0` noch 22 px hoch. override.js misst die Hoehe
     deshalb mit abgeschaltetem Uebergang, sonst faellt die Messung mitten in
     die laufende Polsterung. */
  max-height: 0;
  padding: 0 18px;
  opacity: 0;
  margin: 0;
  border: 0;
  background: none;
  transition: max-height .38s var(--ease), padding .38s var(--ease),
              opacity .26s var(--ease);
}

body.nb-zeit .bw-card .cal-slot-row > .nb-offen {
  padding: 4px 18px 18px;
  opacity: 1;
}

body.nb-zeit .slot-inner { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  body.nb-zeit .bw-card .cal-slot-row > .cal,
  body.nb-zeit .bw-card .cal-slot-row > .slot-reveal,
  .nb-teil-winkel { transition: none; }
}

/* --- 25.4 Der Kalender --------------------------------------------------
 * Vorher unterschieden sich buchbare und geschlossene Tage nur durch die
 * Schriftfarbe. Jetzt ist jeder buchbare Tag eine hellblaue Kachel, der
 * gewaehlte eine volle, geschlossene bleiben Zahlen ohne Flaeche. Damit liest
 * man das Raster in einem Blick.
 * ---------------------------------------------------------------------- */
body.nb-zeit .cal-nav { margin-bottom: 10px; }
body.nb-zeit .cal-month { font-size: 14.5px; }
body.nb-zeit .cal-grid { gap: 5px; }

body.nb-zeit .cal-day {
  width: 100%;
  height: 42px;
  font-size: 13.5px;
  border: 0;
  background: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

body.nb-zeit .cal-day.open {
  background: #f1f5fe;
  color: var(--ink-1);
  font-weight: 500;
}

body.nb-zeit .cal-day.open:hover {
  background: #dde8fd;
  color: var(--brand-dark);
}

body.nb-zeit .cal-day.sel,
body.nb-zeit .cal-day.sel:hover {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

body.nb-zeit .cal-day.dis {
  background: none;
  color: #c7cddb;
}

/* Der heutige Tag trug eine Kontur, auch wenn er geschlossen ist. Eine Kontur
   um einen nicht buchbaren Tag sieht aus wie eine Auswahl. */
body.nb-zeit .cal-day.today.dis { outline: 0; }

body.nb-zeit .cal-day.today:not(.dis):not(.sel) {
  outline: 0;
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

/* Eine Zeile, in der kein Tag buchbar ist, steht nur als graue Reihe da. */
body.nb-zeit .cal-day.nb-tag-leer { display: none; }

/* --- 25.5 Die Uhrzeiten -------------------------------------------------
 * Der Tag steht schon in der Kopfzeile darueber, die Zahl der freien Termine
 * daneben. Die Zeile ueber den Uhrzeiten sagte beides noch einmal.
 * ---------------------------------------------------------------------- */
body.nb-zeit .slot-header { display: none; }
body.nb-zeit .slot-content { padding-top: 0; }
body.nb-zeit .slot-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
body.nb-zeit .slot-btn { padding: 11px 4px; font-size: 13px; }

@media (max-width: 420px) {
  body.nb-zeit .slot-grid { grid-template-columns: repeat(3, 1fr); }
}

body.nb-zeit .bw-lead { margin-bottom: 18px; }

/* --- 25.6 Auf dem Rechner ------------------------------------------------
 * Mehr Luft, groessere Ziffern, sechs Uhrzeiten je Zeile. Das Blatt bleibt
 * bei 640 px: ueber die volle Kartenbreite gezogen wuerde eine Tageskachel
 * ueber 100 px breit — ein Raster aus Streifen statt aus Feldern.
 * ---------------------------------------------------------------------- */
@media (min-width: 860px) {
  .nb-teil { padding: 17px 22px; }
  .nb-teil-label { font-size: 13.5px; }
  .nb-teil-wert { font-size: 15px; }

  body.nb-zeit .bw-card .cal-slot-row > .cal,
  body.nb-zeit .bw-card .cal-slot-row > .slot-reveal { padding: 0 22px; }

  body.nb-zeit .bw-card .cal-slot-row > .nb-offen { padding: 6px 22px 22px; }

  body.nb-zeit .cal-month { font-size: 15.5px; }
  body.nb-zeit .cal-grid { gap: 6px; }
  body.nb-zeit .cal-day { height: 50px; font-size: 14.5px; }
  body.nb-zeit .slot-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  body.nb-zeit .slot-btn { padding: 13px 6px; font-size: 14px; }
  body.nb-zeit .slotstaff-head { margin-bottom: 14px; }
}


/* === 26. Gratis-Zone: der Balken und die Zonenauswahl ======================
 * Der Balken ueber den Paketen ist der Grund, warum viele ueberhaupt buchen —
 * eine Zone kostenlos, ohne Zahlung. Er sah aus wie ein Hinweiskasten. Und
 * wer ihn aufklappte, bekam auf dem Rechner eine schmale Liste weisser
 * Zeilen in einem grossen blauen Feld, rechts daneben nichts.
 *
 * Nachher: der Balken ist eine gerundete Flaeche mit Verlauf und einem
 * gezeichneten Zeigefinger auf dem Knopf, damit ohne Worte klar ist, dass man
 * hier tippt. Die Zonen darunter stehen als quadratische Karten mit Bild —
 * dieselbe Form wie die Paketkarten, nur kleiner.
 * ========================================================================== */

/* --- 26.1 Der Balken ---------------------------------------------------- */
body.nb-pakete .pkg-card-gratis {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 14px !important;
  background: linear-gradient(122deg, #2f6bef 0%, #1c4ad4 52%, #1740c4 100%);
  box-shadow: 0 2px 4px #1b2b4514, 0 16px 34px -18px #1c4ad4a8;
}

body.nb-pakete .pkg-card-gratis:hover {
  filter: none;
  box-shadow: 0 3px 6px #1b2b451f, 0 22px 44px -20px #1c4ad4c4;
}

body.nb-pakete .pkg-gratis-btn { padding: 18px 20px; }

body.nb-pakete .pkg-gratis-name { font-size: 27px; letter-spacing: -.025em; }
body.nb-pakete .pkg-gratis-desc { font-size: 13px; }
body.nb-pakete .pkg-gratis-price { font-size: 30px; letter-spacing: -.03em; }

body.nb-pakete .pkg-gratis-cta {
  position: relative;
  padding: 11px 18px;
  font-size: 13.5px;
  border-radius: 9px !important;
}

/* Der gezeichnete Zeigefinger liegt schraeg an der unteren rechten Ecke des
   Knopfes und ragt bewusst darueber hinaus: so liest man ihn als Geste auf dem
   Knopf und nicht als Symbol im Knopf.
   Er haengt an `::before`, weil `::after` an diesem Knopf schon den Pfeil
   traegt (Abschnitt 17). */
body.nb-pakete .pkg-gratis-cta::before {
  content: "";
  position: absolute;
  /* Der Finger zeigt auf den Knopf, die Hand selbst liegt daneben auf dem
     Blau: weiss auf weiss waere sie im Knopf nicht zu sehen. */
  right: -30px;
  bottom: -32px;
  width: 48px;
  height: 60px;
  pointer-events: none;
  transform: rotate(-22deg);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cpath d='M11.9 3.2c1.6 0 2.9 1.3 2.9 2.9v10.3l2-.6c2.6-.8 5.4.5 6.5 3l2.3 5.5c1.2 2.7.3 5.9-2.1 7.5l-2.8 2c-1.1.8-2.4 1.2-3.7 1.2h-5.3c-1.9 0-3.7-.9-4.8-2.4l-5-6.6c-.9-1.2-.6-2.9.6-3.8 1.1-.8 2.6-.7 3.6.2l2.9 2.7V6.1c0-1.6 1.3-2.9 2.9-2.9z' fill='%23fff' stroke='%2312224a' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px #12224a3d);
}

/* --- 26.2 Die Zonenauswahl ----------------------------------------------
 * Vorher eine Spalte weisser Zeilen, die auf dem Rechner ein Drittel der
 * Flaeche fuellte. Jetzt ein Raster aus Karten mit Bild: vier Spalten auf dem
 * Rechner, zwei auf dem Telefon.
 * ---------------------------------------------------------------------- */
/* Der Waehler ist ein Flex-Kind der Karte und blieb deshalb bei seiner
   Inhaltsbreite von rund 300 px stehen — in einer 966 px breiten Karte. */
body.nb-pakete .gratis-picker {
  width: 100%;
  padding: 34px 20px 22px;
}

body.nb-pakete .gratis-pick-hint {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* minmax(0, 1fr), nicht 1fr: sonst ziehen lange Zonennamen ihre Spalte breit
   und die Karten stehen unterschiedlich gross nebeneinander. */
body.nb-pakete .gratis-zone-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 620px) {
  body.nb-pakete .gratis-zone-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 940px) {
  body.nb-pakete .gratis-zone-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

body.nb-pakete .gratis-zone-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px 6px 0;
  border: 0;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: 0 1px 2px #0b2a6b1f, 0 10px 24px -16px #0b2a6b8a;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}

body.nb-pakete .gratis-zone-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px #0b2a6b29, 0 18px 32px -16px #0b2a6bad;
}

/* Das Bild wird von override.js eingehaengt: das Markup hat keinen Platz
   dafuer. Im Original gehoert es in die Zonendaten. */
/* Quer statt hoch: sieben Zonen im Hochformat bauten eine Wand aus Bildern,
   durch die man scrollen musste. Im Querformat passen alle sieben ohne
   Scrollen unter die Ueberschrift. */
.nb-zone-bild {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px !important;
  background: #eef2f8 center / cover no-repeat;
}

/* Der Preis sitzt in derselben ausgeschnittenen Ecke wie die Auszeichnung auf
   den Paketkarten — eine Form fuer alle Karten im Schritt. */
.nb-zone-preis {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 8px 6px 10px;
  background: #fff;
  color: #16a34a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 0 8px 0 9px !important;
}

.nb-zone-preis::before,
.nb-zone-preis::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle 10px at 0 100%, #0000 98%, #fff 100%);
  border-radius: 0 !important;
}

.nb-zone-preis::before { top: 0; left: -10px; }
.nb-zone-preis::after { right: 0; bottom: -10px; }

body.nb-pakete .gratis-zone-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 7px 5px 9px;
  text-align: left;
}

body.nb-pakete .gratis-zone-name { font-size: 13px; font-weight: 600; line-height: 1.25; }

/* Die Aufzaehlung der Teilzonen sprengte die Karte; sie steht ohnehin im
   Paket-Schritt darunter. */
body.nb-pakete .gratis-zone-detail { display: none; }

body.nb-pakete .gratis-zone-value { font-size: 11px; }

/* Preis und Pfeil sind auf der Karte doppelt: der Preis steht in der Ecke,
   und geklickt wird die ganze Karte. */
body.nb-pakete .gratis-zone-act { display: none; }


/* === 27. Uhrzeiten nach Mitarbeiterin, Abschnitte farblich getrennt ========
 * Zwei Dinge in einem Abschnitt, weil sie dieselbe Flaeche betreffen:
 *
 * 1. In Filialen mit mehreren Mitarbeiterinnen setzte der Funnel Foto und
 *    Name in jeden einzelnen Uhrzeit-Knopf. Bei zwanzig Terminen stand der
 *    Name zwanzigmal da, und der Knopf war dreizeilig, obwohl nur eine
 *    Uhrzeit darin steht. Jetzt: eine Zeile je Mitarbeiterin mit Foto und
 *    ihren Sprachen als Flaggen, darunter ihre Uhrzeiten als nackte Knoepfe.
 *
 * 2. Tag und Uhrzeit sahen als zwei weisse Abschnitte im selben Blatt gleich
 *    aus. Jeder bekommt jetzt seinen eigenen hellen Verlauf — der Tag ins
 *    Blaue, die Uhrzeit ins Tuerkise —, damit auf einen Blick klar ist,
 *    worauf man gerade schaut.
 * ========================================================================== */

/* --- 27.1 Zwei Abschnitte, zwei Grundtoene ------------------------------ */
body.nb-zeit .bw-card .cal-slot-row > .cal {
  background: linear-gradient(178deg, #f4f7fe 0%, #eaf1fd 100%);
}

body.nb-zeit .bw-card .cal-slot-row > .slot-reveal {
  background: linear-gradient(178deg, #f2fbfb 0%, #e6f5f7 100%);
}

/* Die Kopfzeile traegt den Ton ihres Abschnitts schon mit, solange er offen
   ist: so gehoert sie sichtbar dazu. */
.nb-teil[data-nb-teil="tag"][aria-expanded="true"]  { background: #f4f7fe; }
.nb-teil[data-nb-teil="zeit"][aria-expanded="true"] { background: #f2fbfb; }

.nb-teil[data-nb-teil="tag"][aria-expanded="true"]:hover  { background: #eef3fd; }
.nb-teil[data-nb-teil="zeit"][aria-expanded="true"]:hover { background: #eaf7f8; }

/* Auf dem tuerkisen Grund braucht das Uhrensymbol seinen eigenen Akzent,
   sonst steht ein blaues Symbol auf einer gruenlichen Flaeche. */
.nb-teil[data-nb-teil="zeit"][aria-expanded="true"] .nb-teil-symbol,
.nb-teil[data-nb-teil="zeit"][aria-expanded="true"] .nb-teil-winkel { background: #0d8a92; }

/* --- 27.2 Die Uhrzeit-Knoepfe ------------------------------------------- */
body.nb-zeit .slot-btn {
  background: #fff;
  border-color: #dbeced;
  color: var(--ink-1);
  font-weight: 600;
}

body.nb-zeit .slot-btn:hover {
  border-color: #0d8a92;
  color: #0b6f76;
}

/* --- 27.3 Die Zeile der Mitarbeiterin -----------------------------------
 * Foto, Name, Flaggen, Zahl der freien Zeiten, Winkel. Sie steht ueber die
 * ganze Breite des Rasters; die Reihenfolge macht `order` in override.js,
 * damit Reacts eigene Knopfliste unangetastet bleibt.
 * ---------------------------------------------------------------------- */
.nb-ma-raster { align-items: start; }

.nb-ma-kopf {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 38px 1fr auto 18px;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 6px 0 2px;
  padding: 9px 11px;
  border: 1px solid #dbeced;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px !important;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}

.nb-ma-kopf:first-of-type { margin-top: 0; }
.nb-ma-kopf:hover { border-color: #9fd3d7; background: #fbffff; }
.nb-ma-kopf:focus-visible { outline: 2px solid #0d8a92; outline-offset: 2px; }
.nb-ma-kopf[aria-expanded="true"] { border-color: #0d8a92; }

.nb-ma-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  /* Naeher heran und hoeher gesetzt: die Portraits sind quadratisch, in einer
     quadratischen Kachel wuerde sonst nichts beschnitten und man saehe vor
     allem Luft ueber dem Kopf und Kittel darunter. */
  background: #0d8a92 center 12% / 165% no-repeat;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px !important;
}

.nb-ma-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.nb-ma-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Sprachen standen als Buchstabenkette im Namen ("(DE/EN/RO/ES)"). Als
   Flaggen sind sie in einem Blick erfasst und brauchen keine Uebersetzung. */
.nb-ma-flaggen {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nb-ma-flagge {
  width: 18px;
  height: 12px;
  background: center / cover no-repeat;
  box-shadow: inset 0 0 0 1px #0000001f;
  border-radius: 2px !important;
}

/* Sprachen ohne Flagge: lieber das Kuerzel als eine falsche Flagge. */
.nb-ma-sprache {
  padding: 1px 4px;
  background: #eef2f7;
  color: var(--ink-3);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 2px !important;
}

.nb-ma-zahl {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

.nb-ma-winkel {
  width: 18px;
  height: 18px;
  background: var(--ink-3);
  -webkit-mask: var(--nb-winkel-ab) center / 18px 18px no-repeat;
  mask: var(--nb-winkel-ab) center / 18px 18px no-repeat;
  transition: transform .3s var(--ease), background-color .2s var(--ease);
}

.nb-ma-kopf[aria-expanded="true"] .nb-ma-winkel {
  transform: rotate(180deg);
  background: #0d8a92;
}

/* --- 27.4 Der Knopf traegt nur noch die Uhrzeit -------------------------
 * Foto und Name stehen in der Zeile darueber; im Knopf waren sie zwanzigmal
 * dieselbe Auskunft.
 * ---------------------------------------------------------------------- */
body.nb-zeit .slot-btn.slotstaff-btn {
  flex-direction: row;
  justify-content: center;
  gap: 0;
  height: auto;
  padding: 11px 4px;
}

body.nb-zeit .slotstaff-btn .slotstaff-avatar,
body.nb-zeit .slotstaff-btn .slotstaff-btn-name { display: none; }

/* Die Zeiten der zugeklappten Mitarbeiterinnen sind aus dem Raster genommen,
   nicht nur ausgeblendet: sonst bliebe eine Luecke, wo sie standen. */
body.nb-zeit .slot-btn.nb-ma-zu { display: none; }

/* Die Zeile der einzelnen Mitarbeiterin: dieselbe Form wie die aufklappbare,
   nur ohne Winkel. */
body.nb-zeit .slotstaff-head {
  gap: 11px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border-color: #dbeced;
  box-shadow: none;
  border-radius: 10px !important;
}

body.nb-zeit .slotstaff-avatar {
  width: 38px !important;
  height: 38px !important;
  background: #0d8a92 center 12% / 165% no-repeat;
  border-radius: 8px !important;
}

/* Die echten Teamfotos sind bereits auf das Gesicht zugeschnitten und fuellen
   die Kachel; nur die erzeugten Bildnisse zeigen die halbe Person und brauchen
   den Zoom oben drueber. */
.nb-ma-bild.nb-ma-echt,
body.nb-zeit .slotstaff-avatar.nb-ma-echt {
  background-position: center;
  background-size: cover;
}

body.nb-zeit .slotstaff-head-name { font-size: 14px; color: var(--ink-1); }
body.nb-zeit .slotstaff-head-room { font-size: 11.5px; color: var(--ink-3); }
body.nb-zeit .slotstaff-head .nb-ma-flaggen { margin-top: 3px; }


/* === 28. Buchungsbestaetigung als Bordkarte ================================
 * Vorher: ein Haken, zwei Zeilen Ueberschrift, ein grauer Kasten mit drei
 * Zeilen, darunter ein blasser Knopf. Das ist der Schirm, den man
 * fotografiert und der Freundin zeigt — und er sah aus wie eine Quittung.
 *
 * Nachher: eine Bordkarte. Oben ein Kopf mit Himmelsbild und Verlauf, darauf
 * Datum und Uhrzeit gross nebeneinander wie Abflug und Ankunft. Darunter, hinter
 * einer Perforation, die Angaben als Raster und die Wege, die von hier aus
 * weitergehen: eine Zone verschenken, eine Frage stellen, die Route, ein
 * weiterer Termin.
 *
 * Der Kopf ist mit Nano Banana Pro erzeugt und auf den Blauton der Marke
 * gefaerbt — dasselbe Bild wie der Startschirm, nur heller: der Schluss soll
 * leichter wirken als der Anfang.
 *
 * Alles haengt an `body.nb-fertig`.
 * ========================================================================== */

body.nb-fertig .bw-card {
  overflow: hidden;
  border: 0;
  border-radius: 20px !important;
  box-shadow: 0 2px 6px #1b2b4514, 0 22px 50px -24px #1b2b4566;
}

body.nb-fertig .bw-body { padding: 0; }

/* Die Huelle bringt oben 6 px Polsterung mit. Auf der Bordkarte laeuft der
   Kopf bis an die Kante, sonst steht ueber dem Blau ein weisser Streifen. */
body.nb-fertig .done-wrap {
  display: block;
  padding: 0;
  text-align: left;
}

/* Der Funnel setzt Haken, Zeile und Ueberschrift ueber die Karte. Auf der
   Bordkarte stehen sie im Kopf, gebaut von override.js. */
body.nb-fertig .done-check,
body.nb-fertig .done-wrap > .bw-eyebrow,
body.nb-fertig .done-wrap > .bw-h1 { display: none; }

/* --- 28.1 Der Kopf ------------------------------------------------------ */
.nb-bk-kopf {
  position: relative;
  padding: 26px 24px 24px;
  color: #fff;
  /* Der Schleier laeuft von links: dort steht die Schrift, rechts bleibt die
     helle Stelle des Himmels stehen. Ein Schleier ueber das ganze Bild wuerde
     die Aufnahme zu einer blauen Flaeche machen. */
  background:
    linear-gradient(96deg, #0a2a6e96 0%, #0a2a6e5c 44%, #0a2a6e0a 78%, #0a2a6e00 100%),
    url("/newbooking/design/hintergrund/himmel-bestaetigung-blau.webp") right center / cover no-repeat,
    #1e5ad2;
}

/* Ohne Pille: die Zeile steht frei, das Haekchen traegt sie. */
.nb-bk-marke {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #ffffffe0;
}

.nb-bk-marke::before {
  content: "";
  width: 16px;
  height: 16px;
  background: #fff;
  -webkit-mask: var(--nb-i-haken) center / 16px 16px no-repeat;
  mask: var(--nb-i-haken) center / 16px 16px no-repeat;
}

.nb-bk-titel {
  margin: 0 0 3px;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -.028em;
  line-height: 1.15;
}

.nb-bk-untertitel {
  margin: 0 0 20px;
  font-size: 13px;
  color: #ffffffbf;
}

/* Datum und Uhrzeit stehen nebeneinander wie Abflug und Ankunft, dazwischen
   ein Winkel. Das ist der Griff, den jede Bordkarte hat. */
.nb-bk-strecke {
  display: grid;
  /* Der Tag ist laenger als die Uhrzeit und bekommt deshalb mehr Spalte. */
  grid-template-columns: 1.6fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.nb-bk-feld { min-width: 0; }
.nb-bk-feld:last-child { text-align: right; }

.nb-bk-label {
  display: block;
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .05em;
  color: #ffffff9e;
}

.nb-bk-wert {
  display: block;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nb-bk-klein {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: #ffffffab;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nb-bk-strich {
  width: 26px;
  height: 14px;
  background: #ffffff8f;
  -webkit-mask: var(--nb-winkel) center / 14px 14px no-repeat;
  mask: var(--nb-winkel) center / 14px 14px no-repeat;
}

/* --- 28.2 Die Perforation -----------------------------------------------
 * Zwei Kerben am Rand und eine gestrichelte Linie dazwischen: das ist die
 * Stelle, an der eine Bordkarte abgerissen wird, und sie trennt hier den Kopf
 * von den Angaben.
 * ---------------------------------------------------------------------- */
.nb-bk-riss {
  position: relative;
  height: 22px;
  background: #fff;
}

.nb-bk-riss::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 50%;
  border-top: 2px dashed #dde4f0;
  border-radius: 0 !important;
}

/* Halbkreise statt ganzer Kreise: die Karte schneidet ab, was ueber ihren
   Rand hinausragt, ein ganzer Kreis am Rand waere also nur zur Haelfte zu
   sehen — und diese Haelfte laege ausserhalb. */
.nb-bk-kerbe {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 22px;
  margin-top: -11px;
  background: #f8f9fb;
}

.nb-bk-kerbe-links  { left: 0;  border-radius: 0 11px 11px 0 !important; }
.nb-bk-kerbe-rechts { right: 0; border-radius: 11px 0 0 11px !important; }

/* --- 28.3 Die Angaben --------------------------------------------------- */
.nb-bk-daten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  padding: 4px 24px 22px;
}

@media (min-width: 620px) {
  .nb-bk-daten { grid-template-columns: repeat(3, 1fr); }
}

.nb-bk-zeile { display: grid; grid-template-columns: 19px 1fr; gap: 9px; align-items: start; }

.nb-bk-symbol {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  background: var(--brand);
  -webkit-mask: var(--nb-bk-symbol) center / 19px 19px no-repeat;
  mask: var(--nb-bk-symbol) center / 19px 19px no-repeat;
}

.nb-bk-zeile-text { min-width: 0; }

.nb-bk-zeile .nb-bk-label { color: var(--ink-3); }

.nb-bk-zeile-wert {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-1);
}

/* --- 28.4 Die Wege von hier aus -----------------------------------------
 * Nach der Buchung ist der Termin fest — was jetzt noch offen ist: eine Zone
 * verschenken, eine Frage stellen, den Weg zum Studio finden, gleich den
 * naechsten Termin legen.
 * ---------------------------------------------------------------------- */
.nb-bk-wege {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 0 24px 22px;
}

/* Die drei kurzen Wege stehen in einer Zeile — ein Wort und ein Symbol je
   Knopf. Nebeneinander liest man sie als eine Gruppe von Nebenwegen statt als
   drei einzelne Angebote. */
.nb-bk-reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.nb-bk-weg {
  display: grid;
  grid-template-columns: 22px 1fr 17px;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid #e3e9f4;
  background: #fff;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--ink-1);
  cursor: pointer;
  border-radius: 12px !important;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}

.nb-bk-weg:hover { border-color: #b9cdf0; background: #fafcff; }
.nb-bk-weg:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Der wichtigste Weg ist der, der etwas verschenkt: er steht als blaue
   Flaeche ueber der ganzen Breite, die anderen bleiben ruhig. */
.nb-bk-weg-gross {
  border: 0;
  color: #fff;
  background: linear-gradient(122deg, #2f6bef 0%, #1c4ad4 100%);
  box-shadow: 0 2px 4px #1b2b4514, 0 14px 30px -18px #1c4ad4a8;
}

.nb-bk-weg-gross:hover {
  background: linear-gradient(122deg, #3b74f1 0%, #2050dc 100%);
  box-shadow: 0 3px 6px #1b2b451f, 0 20px 38px -20px #1c4ad4c4;
}

.nb-bk-weg-klein {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 7px;
  padding: 14px 8px;
  text-align: center;
}

.nb-bk-weg-klein .nb-bk-weg-titel { font-size: 12.5px; }

/* WhatsApp traegt sein eigenes Gruen — daran erkennt man den Knopf, ohne ihn
   zu lesen. */
.nb-bk-weg-whatsapp {
  border-color: #25d3664d;
  background: #f2fdf6;
  color: #0f6b33;
}

.nb-bk-weg-whatsapp:hover { border-color: #25d366; background: #eafbf1; }
.nb-bk-weg-whatsapp .nb-bk-weg-symbol { background: #1faa52; }

.nb-bk-weg-symbol {
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--nb-bk-weg-symbol) center / 22px 22px no-repeat;
  mask: var(--nb-bk-weg-symbol) center / 22px 22px no-repeat;
}

.nb-bk-weg-text { min-width: 0; }

.nb-bk-weg-titel {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
}

.nb-bk-weg-hinweis {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--ink-3);
}

.nb-bk-weg-gross .nb-bk-weg-titel { font-size: 14.5px; }
.nb-bk-weg-gross .nb-bk-weg-hinweis { color: #ffffffc4; }

.nb-bk-weg-winkel {
  width: 17px;
  height: 17px;
  background: var(--ink-3);
  -webkit-mask: var(--nb-winkel) center / 17px 17px no-repeat;
  mask: var(--nb-winkel) center / 17px 17px no-repeat;
  transition: transform .16s var(--ease);
}

.nb-bk-weg:hover .nb-bk-weg-winkel { transform: translateX(2px); }
.nb-bk-weg-gross .nb-bk-weg-winkel { background: #fff; }

/* --- 28.5 Fusszeile ----------------------------------------------------- */
body.nb-fertig .done-email {
  margin: 0;
  padding: 14px 24px;
  border-top: 1px solid #eef1f7;
  background: #fafbfd;
  font-size: 12px;
  color: var(--ink-3);
  text-align: left;
}

body.nb-fertig .bw-ghost {
  display: block;
  width: calc(100% - 48px);
  margin: 0 24px 22px;
  padding: 11px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: 12.5px;
  text-align: center;
}

body.nb-fertig .bw-ghost:hover { color: var(--brand); background: none; }

/* Die alte Karte des Funnels ist in der Bordkarte aufgegangen. */
body.nb-fertig .done-card { display: none; }

@media (max-width: 560px) {
  .nb-bk-kopf { padding: 22px 18px 20px; }
  .nb-bk-titel { font-size: 22px; }
  .nb-bk-wert { font-size: 18px; }
  .nb-bk-daten { padding: 4px 18px 18px; gap: 14px 16px; }
  .nb-bk-wege { padding: 0 18px 18px; }
  body.nb-fertig .done-email { padding: 12px 18px; }
  body.nb-fertig .bw-ghost { width: calc(100% - 36px); margin: 0 18px 18px; }
}


/* --- 28.6 Der App-Block --------------------------------------------------
 * Der Funnel bringt fuer diesen Block schon Klassen mit (.done-app*), rendert
 * ihn auf diesem Weg aber nicht. Hier steht er mit den beiden amtlichen
 * Abzeichen der Laeden — Markenzeichen werden nicht nachgebaut.
 * ---------------------------------------------------------------------- */
.nb-app {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0 24px 18px;
  padding: 22px;
  color: #fff;
  background: #0a2555;
  border-radius: 16px !important;
}

.nb-app-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  pointer-events: none;
}

.nb-app-schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 0 !important;
  background: linear-gradient(96deg, #051538f0 0%, #051538d1 48%, #05153894 100%);
}

.nb-app > *:not(.nb-app-video):not(.nb-app-schleier) { position: relative; z-index: 2; }

/* Weiss statt gedaempft: die Zeile benennt die Marke, sie darf gelesen
   werden. */
.nb-app-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #fff;
}

.nb-app-titel {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.25;
}

.nb-app-text {
  margin: 0 0 15px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #ffffffc4;
}

.nb-app-laeden { display: flex; flex-wrap: wrap; gap: 10px; }

.nb-app-laden {
  display: block;
  border-radius: 8px !important;
  transition: opacity .16s var(--ease);
}

.nb-app-laden:hover { opacity: .85; }
.nb-app-laden:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.nb-app-laden img {
  display: block;
  height: 42px;
  width: auto;
  border-radius: 0 !important;
}

/* --- 28.7 Die Anzeige von Belledox --------------------------------------
 * Eigene Marke, eigene Palette: Tinte #0A1F3A auf Creme #F3EFE9, Radien bis
 * 8 px, Wortmarke im Original. Sie steht bewusst ausserhalb der Bordkarte und
 * sieht anders aus als der Funnel — eine Anzeige, die sich als Laserazor
 * tarnt, waere unehrlich.
 * ---------------------------------------------------------------------- */
/* Bild links ueber die volle Hoehe, Text rechts auf der Creme — dieselbe
   Aufteilung wie die aufgeklappte Paketkarte, nur in Belledox' Farben. */
.nb-bdx {
  position: relative;
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  margin: 0 24px 24px;
  padding: 0;
  background: linear-gradient(112deg, #FAF7F1 0%, #F3EFE9 58%, #EBE6DC 100%);
  box-shadow: inset 0 0 0 1px #E5DFD4, 0 10px 26px -18px #0a1f3a80;
  color: #0A1F3A;
  text-decoration: none;
  border-radius: 8px !important;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}

.nb-bdx:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px #D9D1C0, 0 16px 32px -18px #0a1f3a9e;
}

.nb-bdx:focus-visible { outline: 2px solid #0A1F3A; outline-offset: 3px; }

.nb-bdx-bild {
  display: block;
  min-height: 132px;
  background: #F3EFE9 url("/newbooking/design/marken/belledox-anzeige.webp") 32% center / cover no-repeat;
  border-radius: 0 !important;
}

.nb-bdx-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 18px 20px;
}

.nb-bdx-logo {
  width: 104px;
  height: auto;
  color: #0A1F3A;
  border-radius: 0 !important;
}

.nb-bdx-titel {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.25;
}

.nb-bdx-hinweis {
  font-size: 11.5px;
  line-height: 1.4;
  color: #3a4a66;
}

.nb-bdx-winkel {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 16px;
  height: 16px;
  background: #6b7890;
  -webkit-mask: var(--nb-winkel) center / 16px 16px no-repeat;
  mask: var(--nb-winkel) center / 16px 16px no-repeat;
  transition: transform .16s var(--ease);
}

.nb-bdx:hover .nb-bdx-winkel { transform: translateX(2px); }

@media (max-width: 560px) {
  .nb-app { margin: 0 18px 14px; padding: 17px; }
  .nb-app-titel { font-size: 15.5px; }
  .nb-app-laden img { height: 38px; }
  .nb-bdx { margin: 0 18px 18px; grid-template-columns: 38% 1fr; }
  .nb-bdx-bild { min-height: 116px; }
  .nb-bdx-text { padding: 14px 15px; }
  .nb-bdx-logo { width: 88px; }
  .nb-bdx-titel { font-size: 15px; }
}


/* === 29. Zahlwege: Gesamtpreis gross, Ersparnis sichtbar ===================
 * Vorher: zwei namenlose Knoepfe fuer Karte und PayPal, darunter drei Zeilen
 * mit je einem Preis "pro Sitzung" und einmal "pro Monat". Drei Preise in
 * drei verschiedenen Bezugsgroessen nebeneinander — man vergleicht Aepfel mit
 * Birnen und weiss am Ende nicht, was auf der Rechnung steht.
 *
 * Nachher: je Weg steht gross der Gesamtbetrag und klein, worauf er sich
 * bezieht. Bei der Vorkasse steht dazu, was sie spart. Die Auswahl selbst ist
 * unveraendert — es sind dieselben Knoepfe, nur vollstaendiger beschriftet.
 *
 * Der gewaehlte Weg steht in `aria-checked`, die gewaehlte Zahlart in
 * `aria-pressed`; beides bringt der Funnel schon mit, es braucht keine
 * zusaetzliche Klasse.
 * ========================================================================== */

/* --- 29.1 Karte oder PayPal --------------------------------------------- */
.bw-paymethods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.bw-paymethods > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 10px !important;
  transition: border-color .16s var(--ease), background-color .16s var(--ease),
              color .16s var(--ease);
}

.bw-paymethods > button:hover { border-color: #b9cdf0; }

.bw-paymethods > button[aria-pressed="true"] {
  border-color: var(--brand);
  background: #f1f5fe;
  color: var(--brand-dark);
}

/* --- 29.2 Die drei Wege --------------------------------------------------
 * Eine Karte je Weg, links die Bezeichnung, rechts der Betrag. Der gewaehlte
 * Weg traegt Rahmen und Fuellung in der Markenfarbe.
 * ---------------------------------------------------------------------- */
.nb-zw-option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  /* Sonst sitzt die Textspalte mittig in ihrer Spalte statt an deren linker
     Kante — die drei Wege stuenden dann auf drei verschiedenen Kanten. */
  justify-items: stretch;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  background: #fff;
  text-align: left;
  cursor: pointer;
  border-radius: 12px !important;
  transition: border-color .16s var(--ease), background-color .16s var(--ease),
              box-shadow .16s var(--ease);
}

.nb-zw-option:hover { border-color: #b9cdf0; }

/* Reihenfolge: erst vorab bezahlen, dann vor Ort — die beiden Wege, die man
   gegeneinander abwaegt, stehen damit direkt untereinander und zeigen dieselbe
   Behandlung einmal mit und einmal ohne Rabatt. Die Raten kommen zuletzt: sie
   rechnen in einer anderen Groesse.
   Gedreht wird nur die Anzeige; die Knoepfe bleiben, wo sie im Markup stehen.
   Fuer Julian: im Original einfach die Reihenfolge der Wege im Array tauschen,
   dann stimmt auch die Reihenfolge beim Durchtabben. */
.bw-paychoice > div:not([class]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bw-paychoice > div:not([class]) > .nb-zw-option:nth-child(1) { order: 1; }
.bw-paychoice > div:not([class]) > .nb-zw-option:nth-child(2) { order: 3; }
.bw-paychoice > div:not([class]) > .nb-zw-option:nth-child(3) { order: 2; }

.nb-zw-option[aria-checked="true"] {
  border-color: var(--brand);
  background: #f4f8ff;
  box-shadow: 0 1px 2px #2563eb14, 0 8px 20px -14px #2563eb8f;
}

/* Das Symbol steht in der Zeile der Bezeichnung, direkt davor — so gehoert es
   zum Namen und steht nicht als eigene Saeule daneben. */
.bw-paychoice .nb-zw-links .nb-zw-symbol {
  /* inline-block mit eigenem Abstand statt Flex-Kind: die Kopfzeile ist nicht
     bei allen drei Wegen eine Flex-Zeile, als reines Flex-Kind bliebe das
     Symbol dort 0 px breit. */
  display: inline-block;
  vertical-align: -4px;
  margin-right: 7px;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  padding: 0;
  background: var(--ink-2);
  -webkit-mask: var(--nb-zw-symbol) center / 19px 19px no-repeat;
  mask: var(--nb-zw-symbol) center / 19px 19px no-repeat;
  transition: background-color .16s var(--ease);
}

.bw-paychoice .nb-zw-option[aria-checked="true"] .nb-zw-links .nb-zw-symbol {
  background: var(--brand-dark);
}

/* --- 29.3 Links: Bezeichnung, Unterzeile, Ersparnis --------------------- */
.nb-zw-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: stretch;
  gap: 3px;
  min-width: 0;
}

.bw-paychoice .nb-zw-links > span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-1);
}

.bw-paychoice .nb-zw-links > span:nth-child(2) {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-3);
}

/* Die Auszeichnung im Titel ("10 % Vorkasse-Rabatt", "0 € Anzahlung") stand
   als zweite Zeile und schob den Preis auseinander. Jetzt sitzt sie als
   ruhiges Schild neben dem Namen. */
.bw-paychoice .nb-zw-links > span:first-child > span:not(.nb-zw-symbol) {
  padding: 2px 7px;
  background: #e8f1ff;
  color: var(--brand-dark);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 6px !important;
}

/* Die Mittel, die vor Ort gelten. Als Schilder mit Symbol sieht man sofort,
   dass Bargeld dabei ist; als graue Kleinschrift wurde es ueberlesen. */
.nb-zw-mittel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.nb-zw-mittel-schild {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  background: #eef2f8;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  border-radius: 6px !important;
}

.nb-zw-option[aria-checked="true"] .nb-zw-mittel-schild {
  background: #e2ecfd;
  color: var(--brand-dark);
}

.nb-zw-mittel-symbol {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  -webkit-mask: var(--nb-zw-symbol) center / 15px 15px no-repeat;
  mask: var(--nb-zw-symbol) center / 15px 15px no-repeat;
}

/* Die Unterzeile sagt jetzt dasselbe wie die Schilder darunter. */
.bw-paychoice .nb-zw-links:has(.nb-zw-mittel) > span:nth-child(2) { display: none !important; }

/* Was die Vorkasse spart, in Zahlen — das ist das Argument, und es stand
   vorher nirgends. */
.bw-paychoice .nb-zw-links .nb-zw-spar {
  margin-top: 3px;
  padding: 3px 9px;
  background: #e7f7ee;
  color: #15803d;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px !important;
}

/* --- 29.4 Rechts: Gesamtbetrag gross, Bezug klein ---------------------- */
.nb-zw-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  flex-shrink: 0;
}

/* Die Groessen tragen !important, weil der Funnel sie ueber tief
   verschachtelte Struktur-Selektoren setzt (die Spans haben keine Klassen) und
   diese Regeln sonst gewinnen.

   Der Gesamtbetrag steht gross, aber in normaler Staerke: er ist die Summe, um
   die es geht, und nicht der Betrag, den man vergleicht — das ist bei der
   Vorkasse der Preis je Sitzung darunter. */
.bw-paychoice .nb-zw-rechts .nb-zw-gesamt {
  font-size: 21px !important;
  font-weight: 500 !important;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ink-1);
  white-space: nowrap;
}

.bw-paychoice .nb-zw-option[aria-checked="true"] .nb-zw-gesamt { color: var(--brand-dark); }

/* Der Einzelpreis war vorher der grosse Betrag; jetzt steht er klein unter
   dem Gesamtbetrag, dort wo er hingehoert. */
.bw-paychoice .nb-zw-rechts .nb-zw-je {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  white-space: nowrap;
}

/* Wo kein Gesamtbetrag steht — Raten und vor Ort —, ist die Rate
   beziehungsweise der Preis je Sitzung der Betrag, den man vergleicht. Dort
   steht er gross und fett. */
.bw-paychoice .nb-zw-rechts:not(:has(.nb-zw-gesamt)) .nb-zw-je {
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--ink-1) !important;
}

.bw-paychoice .nb-zw-rechts > span:not(.nb-zw-gesamt):not(.nb-zw-je) {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}


@media (max-width: 480px) {
  .nb-zw-option { padding: 12px 13px; gap: 10px; }
  .nb-zw-links > span:first-child { font-size: 13.5px; }
  .bw-paychoice .nb-zw-rechts .nb-zw-gesamt { font-size: 18px !important; }
  .bw-paychoice .nb-zw-rechts .nb-zw-je { font-size: 11.5px !important; }
  .bw-paychoice .nb-zw-rechts:not(:has(.nb-zw-gesamt)) .nb-zw-je { font-size: 18px !important; }
}


/* === 30. "Zonen selber kombinieren" mit Video im Hintergrund ===============
 * Der Nebenweg stand als hellblaue Zeile unter den Paketen und ging dort
 * unter. Er ist aber der Weg fuer alle, deren Wunsch-Zusammenstellung nicht
 * als Paket dabei ist. Jetzt liegt dasselbe Video dahinter wie im
 * Aktionskasten auf pearlux.de, darueber ein Schleier und weisse Schrift.
 * ========================================================================== */

body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 18px 20px !important;
  background: #0b2a6b !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 6px #0b2a6b1f, 0 18px 40px -22px #0b2a6bad;
}

body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk]:hover {
  background: #0b2a6b !important;
}

.nb-zk-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  pointer-events: none;
}

/* Ohne Schleier steht weisse Schrift auf einem bewegten Bild und wird je nach
   Bildstelle unlesbar. Der Verlauf ist links dicht, wo die Schrift steht. */
.nb-zk-schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 0 !important;
  background: linear-gradient(96deg, #061737f5 0%, #061737e0 44%, #061737a3 76%, #06173780 100%);
}

body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] > span { position: relative; z-index: 2; }

/* Die Zeichnung sitzt als milchige Scheibe auf dem Video. */
body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] > [data-nb-zk-bild] {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  background-color: #ffffff26 !important;
  box-shadow: inset 0 0 0 1px #ffffff3d;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 10px !important;
  /* In der Kachel stand ein Emoji. Es faellt aus der Zeichensprache des
     Funnels heraus und sieht auf jedem Geraet anders aus. */
  font-size: 0 !important;
  color: transparent !important;
}

body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] > [data-nb-zk-bild] > * {
  font-size: 0 !important;
  color: transparent !important;
  opacity: 0;
}

body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] > [data-nb-zk-bild]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  background: #fff;
  -webkit-mask: var(--nb-z-ganzkoerper) center / 28px 28px no-repeat;
  mask: var(--nb-z-ganzkoerper) center / 28px 28px no-repeat;
}

/* Die Selektoren tragen denselben Weg wie Abschnitt 11, sonst gewinnt dessen
   dunkle Schrift — beide Regeln stehen auf !important, dann entscheidet die
   Spezifitaet. */
body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] span span:first-child { color: #fff !important; font-size: 19px !important; }
body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] span span:last-child { color: #ffffffd1 !important; }
body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] > span:last-child { color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .nb-zk-video { display: none; }
}

@media (max-width: 560px) {
  body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] {
    min-height: 92px;
    padding: 15px 16px !important;
  }
  body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] span span:first-child { font-size: 16px !important; }
}


/* === 31. Zusammenfassung im Kontakt-Schritt ================================
 * Links stand, was man gleich bezahlt: Paket, Studio, Termin, Preis. Was im
 * Paket steckt, sah man an dieser Stelle nicht mehr, dabei ist es genau der
 * Moment, in dem man noch einmal hinschaut, bevor man seine Daten eingibt.
 *
 * Die Karte trug zuerst auch die Zonenbilder als Wischband. Das war ein halber
 * Bildschirm fuer eine Auskunft, die zwei Schritte vorher schon gegeben wurde,
 * und es schob die Eingabefelder aus dem Blick. Jetzt steht die Karte ohne Bild
 * auf einer Verlaufsflaeche, alles in Weiss, und ist rund ein Drittel so hoch:
 * Paket, Ort, Termin, die Zonen in einer Zeile, der Preis, die Ersparnis.
 * ========================================================================== */

.summary-card {
  position: relative;
  overflow: hidden;
  gap: 0 !important;
  padding: 15px 16px 14px !important;
  border: 0 !important;
  border-radius: 16px !important;
  /* Die Verlaufsflaeche ist eine Grafik, kein CSS-Verlauf: sie hat Falten und
     Korn, ein CSS-Verlauf haette Streifen. Der Farbschleier darueber haelt den
     Kontrast, egal welcher Ausschnitt bei welcher Kartenbreite sichtbar ist. */
  background:
    linear-gradient(160deg, #1e3a8ab8, #1d4ed866 45%, #1e40afd6),
    url("./hintergrund/verlauf-blau.webp") center / cover no-repeat,
    var(--brand-dark, #1d4ed8) !important;
  box-shadow: 0 2px 4px #1b2b4514, 0 18px 36px -20px #1e3a8a80;
  color: #fff;
}

/* --- 31.1 Paket, Ort, Termin -------------------------------------------- */
.summary-card .summary-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.summary-card .summary-svc {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.summary-card .summary-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: #ffffffd1;
}

.summary-card .summary-loc svg {
  width: 14px;
  height: 14px;
  color: #ffffffd1;
}

/* Termin und Ort stehen auf einer Stufe; die Uhrzeit hebt sich als einziges
   Stueck ab, weil man danach am haeufigsten noch einmal sieht. */
.summary-card .summary-date {
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: #ffffffd1;
}

/* --- 31.2 Die Zonen in einer Zeile --------------------------------------- */
.nb-zf-zonen {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: 11px 0;
  padding: 10px 0 0;
  border-top: 1px solid #ffffff2e;
  list-style: none;
}

.nb-zf-zonen li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #ffffffdb;
}

.nb-zf-zonen li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: #fff;
  -webkit-mask: var(--nb-zeichen, var(--nb-z-zone)) center / 16px 16px no-repeat;
  mask: var(--nb-zeichen, var(--nb-z-zone)) center / 16px 16px no-repeat;
}

/* --- 31.3 Preis ---------------------------------------------------------- */
.summary-card .summary-price {
  align-items: baseline;
  gap: 6px;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid #ffffff2e;
}

.summary-card .summary-price-now {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.summary-card .summary-price-was { color: #ffffff8a; }
.summary-card .summary-price > span:not([class]) { font-size: 12px; color: #ffffffb8; }
.summary-card .summary-price-total { margin-top: 3px; font-size: 12px; color: #ffffffb8; }
/* Der Rabatt stand im hellen Entwurf in Gruen. Auf Blau wird daraus ein
   Giftgruen, und die Ersparnis darunter ist ohnehin der Punkt, der leuchten
   soll. Also weiss, und das Schild traegt die Farbe allein. */
.summary-card .summary-price-note { color: #ffffffb8; }

/* --- 31.4 Was die Vorkasse spart ---------------------------------------- */
/* Weiss auf Blau, damit der Betrag traegt. Gruen auf Gruen wie im hellen
   Entwurf verschwaende hier den einzigen Punkt, der herausstechen soll. */
.nb-zf-spar {
  display: inline-block;
  /* Die Karte ist eine Flex-Spalte; ohne das hier zieht sich das Schild ueber
     die ganze Breite und sieht aus wie ein Balken, nicht wie ein Schild. */
  align-self: flex-start;
  width: fit-content;
  margin: 10px 0 0;
  padding: 4px 10px;
  background: #fff;
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px !important;
}

/* === 32. Zonen-Waehler: grosses Modell, sichtbare Punkte ===================
 * Der Waehler war der unklarste Schirm des Funnels: ein 290 px schmales Foto
 * in einer 940 px breiten Karte, darauf 31 unsichtbare Schaltflaechen, und
 * rechts daneben vier Knoepfe ueber einer leeren Flaeche. Man sah weder, dass
 * das Modell antippbar ist, noch wo.
 *
 * Nachher:
 *   1. Das Modell nimmt links so viel Platz, wie es kriegen kann.
 *   2. Jede antippbare Stelle traegt einen Punkt. Die Punkte der offenen
 *      Region stehen kraeftig, die uebrigen blass — 31 gleich laute Punkte
 *      waeren Masern.
 *   3. Die vier Regionen sind Karten mit Symbol und der Zahl ihrer Zonen,
 *      eine steht von Anfang an offen.
 * ========================================================================== */

/* --- 32.1 Aufteilung ---------------------------------------------------- */
.mq-wrap .mq-body-grid {
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 26px;
  padding-bottom: 84px;
}

@media (max-width: 900px) {
  .mq-wrap .mq-body-grid { grid-template-columns: minmax(240px, 320px) 1fr; gap: 18px; }
}

@media (max-width: 720px) {
  .mq-wrap .mq-body-grid { grid-template-columns: 1fr; }

  /* Das Modell stand auf dem Telefon in einer 230-px-Saeule mittig — kleiner
     als eine Briefmarke. Jetzt nimmt es die Breite, die da ist. */
  .mq-wrap .mq-figure {
    position: static;
    max-width: 340px;
    margin: 2px auto 0;
  }
}

.mq-wrap .mq-figbox {
  border-radius: 14px !important;
  background: radial-gradient(120% 90% at 50% 0%, #fff 0%, #eef3fb 100%);
  border-color: #e3e9f4;
}

.mq-wrap .mq-fig-hint {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* --- 32.2 Die Punkte auf dem Modell -------------------------------------
 * Der Funnel laesst die Punkte erst beim Ueberfahren oder nach der Auswahl
 * erscheinen. Damit sieht man vorher nichts und weiss nicht, dass man tippen
 * kann. Jetzt traegt jede Stelle einen Punkt.
 * ---------------------------------------------------------------------- */
.mq-wrap .mq-spot::after {
  /* Aenderung 1 zieht alles auf 4 px Radius. Ein Punkt auf einem Koerpermodell
     ist aber ein Punkt — als abgerundetes Quadrat sieht er aus wie ein
     Aufkleber. */
  border-radius: 50% !important;
  width: 11px !important;
  height: 11px !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px #1b2b4552, 0 1px 3px #1b2b4529;
  opacity: .55;
  transition: width .14s var(--ease), height .14s var(--ease),
              opacity .14s var(--ease), box-shadow .14s var(--ease);
}

/* Die Punkte der offenen Region stehen kraeftig und in der Markenfarbe. */
.mq-wrap .mq-spot.nb-punkt-aktiv::after {
  opacity: 1;
  box-shadow: 0 0 0 2.5px var(--brand), 0 1px 4px #1b2b4538;
}

@media (hover: hover) {
  .mq-wrap .mq-spot:hover::after,
  .mq-wrap .mq-spot.hot::after {
    width: 15px !important;
    height: 15px !important;
    opacity: 1;
    background: var(--brand) !important;
    box-shadow: 0 0 0 3px #fff, 0 1px 6px #1b2b4552;
  }
}

/* Gewaehlt: voller Punkt in der Markenfarbe, weisser Ring darum. */
.mq-wrap .mq-spot.on::after {
  width: 17px !important;
  height: 17px !important;
  opacity: 1;
  background: var(--brand) !important;
  box-shadow: 0 0 0 3px #fff, 0 1px 5px #1b2b4559;
}

/* Die Tippflaeche ist groesser als der Punkt — auf dem Telefon trifft man
   sonst nichts. */
.mq-wrap .mq-spot { min-width: 34px; min-height: 34px; }

/* --- 32.3 Die vier Regionen als Karten ---------------------------------- */
/* Zwei je Zeile, nicht drei: "Beine & Unterkörper" braucht die Breite, sonst
   steht dort "Beine & Unt…" und man muss raten. */
.nb-regionen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 14px;
}

/* Bewusst nicht vier nebeneinander: die Liste ist auch auf grossen Schirmen
   nur rund 500 px breit, vier Karten waeren je 120 px und "Beine &
   Unterkoerper" braeche auf drei Zeilen um. */

.nb-region {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: 10px !important;
  transition: border-color .15s var(--ease), background-color .15s var(--ease),
              color .15s var(--ease);
}

.nb-region:hover { border-color: #b9cdf0; background: #fafcff; }
.nb-region:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.nb-region-symbol {
  width: 20px;
  height: 20px;
  background: var(--ink-3);
  -webkit-mask: var(--nb-zeichen, var(--nb-z-zone)) center / 20px 20px no-repeat;
  mask: var(--nb-zeichen, var(--nb-z-zone)) center / 20px 20px no-repeat;
  transition: background-color .15s var(--ease);
}

.nb-region[aria-pressed="true"] .nb-region-symbol { background: var(--brand-dark); }

.nb-region-text {
  min-width: 0;
  line-height: 1.25;
}

/* Wie viele Zonen hinter der Region stecken — sonst tippt man blind. */
.nb-region-zahl {
  padding: 1px 7px;
  background: #eef2f8;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 5px !important;
}

.nb-region[aria-pressed="true"] .nb-region-zahl {
  background: #dbe7fd;
  color: var(--brand-dark);
}

/* --- 32.4 Die Zonen der offenen Region ---------------------------------- */
.mq-wrap .mq-group-h {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
}

.mq-wrap .mq-zone { margin-bottom: 6px; border-radius: 10px !important; }

.mq-wrap .mq-zone-btn {
  min-height: 0 !important;
  padding: 11px 13px !important;
  gap: 11px !important;
}

.mq-wrap .mq-zone-name { font-size: 13.5px !important; }

.mq-wrap .mq-check {
  width: 21px !important;
  height: 21px !important;
  border-radius: 6px !important;
}

.mq-wrap .mq-title { font-size: 21px; }


/* === 33. Paketkarten: Punkte ins Bild, Symbole darunter, Bewertung =========
 * Nach Jaspers Vorlage: das Bild traegt keinen Streifen mehr am Fuss, die
 * Wischpunkte liegen als kleine Pille im unteren Teil des Bildes. Die Symbole
 * der Zonen stehen darunter in Schwarz, und rechts neben dem Namen steht die
 * Bewertung.
 *
 * Die Zahl in Klammern hinter der Bewertung wird aus dem Paketnamen errechnet
 * und geht so live — siehe override.js, `bewertungZahl`, und HANDOFF.md,
 * Aenderung 31.
 * ========================================================================== */

/* --- 33.1 Die Wischpunkte liegen jetzt im Bild -------------------------- */
.nb-punkte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nb-punkte .nb-balken {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  pointer-events: auto;
  background: #ffffffa8;
  box-shadow: inset 0 0 0 1px #ffffffb8, 0 1px 4px #1b2b4529;
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border-radius: 999px !important;
}

.nb-punkte .nb-balken button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  background: #1b2b4547;
  cursor: pointer;
  border-radius: 50% !important;
  transition: width .16s var(--ease), background-color .16s var(--ease);
}

.nb-punkte .nb-balken button[aria-current="true"] {
  width: 16px;
  background: #1b2b45;
  border-radius: 999px !important;
}

.nb-punkte .nb-balken button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.nb-galerie[data-nb-anzahl="1"] .nb-punkte { display: none; }

/* --- 33.2 Name und Bewertung in einer Zeile ----------------------------- */
body.nb-pakete .pkg-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

body.nb-pakete .pkg-title-col { min-width: 0; }

.nb-bewertung {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-1);
  white-space: nowrap;
}

.nb-bewertung-stern {
  width: 14px;
  height: 14px;
  background: #f5a524;
  -webkit-mask: var(--nb-i-stern-voll) center / 14px 14px no-repeat;
  mask: var(--nb-i-stern-voll) center / 14px 14px no-repeat;
}

.nb-bewertung-zahl { font-weight: 400; color: var(--ink-3); }

/* Aufgeklappt sitzt der Winkel zum Zumachen in derselben Ecke — die Bewertung
   braucht Platz daneben, sonst schiebt sich beides uebereinander. */
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .pkg-title-row { padding-right: 28px; }

body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-bewertung { color: #fff; }
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-bewertung-zahl { color: #ffffffbf; }

/* --- 33.3 Die Symbole der Zonen unter dem Namen ------------------------- */
body.nb-pakete .pkg-body > .nb-zonen,
body.nb-pakete .nb-zonen {
  order: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}

body.nb-pakete .nb-zonen .nb-zeichen {
  width: 19px;
  height: 19px;
  background: var(--ink-1);
  -webkit-mask-size: 19px 19px;
  mask-size: 19px 19px;
}

body.nb-pakete .nb-zonen .nb-plus { color: var(--ink-3); font-size: 11px; }

/* Aufgeklappt stehen die Leistungen mit denselben Symbolen ausgeschrieben
   darunter. Die Symbolkette oben waere dann dieselbe Auskunft ein zweites Mal
   — und der Preis klebte daran. Sie faellt weg, der Preis bekommt Luft. */
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-zonen { display: none; }

/* Der Preis rutscht damit eine Stelle nach hinten. */
body.nb-pakete .pkg-card-footer { order: 2; }
body.nb-pakete .pkg-body { flex: 1 1 auto; }
body.nb-pakete .pkg-bullets { order: 3; }

@media (max-width: 560px) {
  .nb-punkte { bottom: 8px; }
  .nb-punkte .nb-balken { padding: 5px 8px; gap: 4px; }
  .nb-punkte .nb-balken button { width: 6px; height: 6px; }
  .nb-punkte .nb-balken button[aria-current="true"] { width: 14px; }
  .nb-bewertung { font-size: 11px; gap: 3px; }
  .nb-bewertung-stern { width: 12px; height: 12px; -webkit-mask-size: 12px 12px; mask-size: 12px 12px; }
  body.nb-pakete .nb-zonen .nb-zeichen { width: 17px; height: 17px; -webkit-mask-size: 17px 17px; mask-size: 17px 17px; }
}


/* === 34. Paket-Schritt: Gratis-Feld, Zonenfotos, Streichpreis ==============
 * Zweite Runde auf dem Paket-Schritt. Sechs Dinge, die Jasper an der ersten
 * Fassung aufgefallen sind, und ein neuer Bildsatz.
 * ========================================================================== */

/* --- 34.1 Die Frage nach dem Geschlecht faellt weg ----------------------
 * "Fuer wen ist die Behandlung?" stand in Handschrift links neben dem
 * Schalter Damen/Herren. Der Schalter beantwortet die Frage selbst; die Zeile
 * war eine Erklaerung fuer etwas, das keine braucht.
 * ---------------------------------------------------------------------- */
body.nb-pakete .pkg-genderbar-q { display: none; }


/* --- 34.2 Das Gratis-Feld ------------------------------------------------
 * Vorher ein flacher blauer Verlauf mit Ueberschrift, Text, Preis und Knopf.
 * Jetzt liegt darunter eine erzeugte, koernige Flaeche in warmem Blau
 * (design/flaechen/gratis-flaeche.webp, scripts/flaechen_erzeugen.cjs) —
 * dieselbe Bildsprache wie die Vorlagen von Jasper: weiche Formen, kein Rand,
 * ein warmer Akzent. Darunter eine Zeile mit vier Merkmalen, jedes mit einem
 * gezeichneten Duotone-Symbol.
 *
 * Fuer Julian: die Flaeche gehoert als Bilddatei in die Karte, die vier
 * Merkmale als Datenliste in die Komponente.
 * ---------------------------------------------------------------------- */
body.nb-pakete .pkg-card-gratis {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 16px !important;
  /* Eine Flaeche fuer beide Zustaende, oben verankert und auf die Breite
     gezogen: zugeklappt sieht man ihren oberen Teil, aufgeklappt mehr davon.
     Es ist derselbe Ausschnitt, nur laenger — nichts wechselt beim
     Aufklappen. Die lange Fassung schreibt das Original nach unten fort
     (scripts/flaeche_verlaengern.py), der Endton steht als Grundfarbe
     darunter, falls die Karte noch hoeher wird. */
  background:
    linear-gradient(180deg, #0d2f7a00 0%, #0d2f7a1a 55%, #0d2f7a3d 100%),
    url("/newbooking/design/flaechen/gratis-flaeche-lang.webp") center top / 100% auto no-repeat,
    #1B4BB2;
  box-shadow: 0 2px 4px #1b2b4514, 0 18px 38px -18px #1c4ad4a3;
}

body.nb-pakete .pkg-card-gratis:hover {
  filter: none;
  box-shadow: 0 3px 6px #1b2b451f, 0 24px 48px -20px #1c4ad4bd;
}

/* Aufgeklappt ist die Karte hochkant statt quer. Die quer erzeugte Flaeche
   wuerde dann so weit vergroessert, dass nur eine glatte blaue Stelle uebrig
   bleibt — genau das grelle Blau, das Jasper gesehen hat. Deshalb hat der
   aufgeklappte Zustand seine eigene hohe Fassung derselben Flaeche. */
body.nb-pakete .pkg-gratis-btn { padding: 20px 22px 18px; }

/* Die Merkmalszeile: vier Aussagen, jede mit ihrem Symbol, keine Kaesten,
   keine Punkte, keine Linien. Auf dem Rechner eine Zeile, auf dem Telefon
   zwei Spalten. */
.nb-merkmale {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 8px 22px;
  margin: 16px 22px 18px;
  position: relative;
  z-index: 1;
}

.nb-merkmal {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffffec;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .002em;
}

.nb-merkmal::before {
  content: "";
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  background: center / contain no-repeat;
}

.nb-merkmal[data-nb-symbol="kostenlos"]::before { background-image: url("/newbooking/design/symbole/gratis-kostenlos.svg"); }
.nb-merkmal[data-nb-symbol="kauf"]::before      { background-image: url("/newbooking/design/symbole/gratis-kein-kauf.svg"); }
.nb-merkmal[data-nb-symbol="zone"]::before      { background-image: url("/newbooking/design/symbole/gratis-zone.svg"); }
.nb-merkmal[data-nb-symbol="laser"]::before     { background-image: url("/newbooking/design/symbole/gratis-laser.svg"); }

/* Der Zeigefinger: schlanker, ohne die dicke dunkle Kontur der ersten
   Fassung, dafuer mit einem angedeuteten Tippkreis dahinter. Er liegt weiter
   aussen, damit er den Knopf nicht mehr ueberdeckt. */
body.nb-pakete .pkg-gratis-cta::before {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 54px;
  height: 62px;
  pointer-events: none;
  transform: rotate(-16deg);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52' fill='none'%3E%3Ccircle cx='13.5' cy='12.5' r='10' stroke='%23ffffff' stroke-width='1.6' opacity='.42'/%3E%3Cpath d='M13.5 8.6c0-1.8 1.4-3.2 3.2-3.2s3.2 1.4 3.2 3.2v12.1l2.6-.7c3-.8 6.2.7 7.4 3.6l2.3 5.6c1.2 3 .2 6.4-2.4 8.2l-3.3 2.3c-1.2.9-2.7 1.4-4.2 1.4h-5.5c-2.1 0-4.1-1-5.4-2.7l-5.6-7.4c-1-1.3-.7-3.2.6-4.2 1.2-.9 2.9-.8 4 .3l3.1 2.9z' fill='%23ffffff'/%3E%3Cpath d='M13.5 8.6c0-1.8 1.4-3.2 3.2-3.2s3.2 1.4 3.2 3.2v12.1' stroke='%231a3a78' stroke-width='1.3' opacity='.35' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 3px 6px #0d2f7a4d);
}

@media (max-width: 700px) {
  .nb-merkmale {
    grid-template-columns: 1fr 1fr;
    gap: 9px 14px;
    margin: 14px 16px 16px;
  }
  .nb-merkmal { font-size: 11.5px; }
  body.nb-pakete .pkg-gratis-btn { padding: 16px 16px 14px; }
}


/* --- 34.3 Die Wischpunkte ohne Plaettchen -------------------------------
 * Die Punkte sassen auf einer milchigen Pille. Auf einem Foto ist das ein
 * zweites Element ueber dem Bild; die Punkte allein reichen.
 * ---------------------------------------------------------------------- */
.nb-punkte .nb-balken {
  gap: 6px;
  padding: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0 !important;
}

.nb-punkte .nb-balken button {
  width: 6px;
  height: 6px;
  background: #1b2b4547;
}

.nb-punkte .nb-balken button[aria-current="true"] {
  width: 18px;
  background: #1b2b45c9;
}


/* --- 34.4 Streichpreis und "Jetzt ab" -----------------------------------
 * Der Preis stand als "ab 76 € pro Sitzung" allein da. Jetzt steht darueber,
 * was eine einzelne Sitzung ohne Paket kostet — der doppelte Einzelpreis,
 * durchgestrichen mit einem gezeichneten Strich. Darunter "Jetzt ab" klein
 * vor der Zahl.
 *
 * Fuer Julian: `variants.find(v => v.sessions === 1).price * 2`. Der Wert
 * gehoert als eigenes Feld in die Paketdaten, nicht in die Ansicht gerechnet.
 * ---------------------------------------------------------------------- */
.nb-statt {
  display: inline-flex;
  align-items: baseline;
  align-self: flex-start;
  color: #C6423C;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-bottom: 1px;
}

/* Der Strich liegt nur auf der Zahl. Das Wort davor steht frei — durch-
   gestrichen sagte es "nicht statt", und das ist das Gegenteil. */
.nb-statt .nb-statt-zahl {
  display: inline-block;
  padding: 0 3px 3px;
  margin-left: 2px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='none'%3E%3Cpath d='M3 9.6c17-2.6 40-4.4 63-4.9 18-.4 33 .1 51 1.6' stroke='%23C6423C' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 58% / 100% 12px no-repeat;
}

.pkg-card.open .nb-statt { color: #FFC9C4; }

.pkg-card.open .nb-statt .nb-statt-zahl {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='none'%3E%3Cpath d='M3 9.6c17-2.6 40-4.4 63-4.9 18-.4 33 .1 51 1.6' stroke='%23FFC9C4' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* "Jetzt ab" traegt keine Aussage ueber den Betrag und steht deshalb kleiner
   und leichter als die Zahl. */
.nb-ab {
  font-size: .68em;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .78;
  margin-right: .18em;
}

body.nb-pakete .pkg-price-col { display: flex; flex-direction: column; }


/* --- 34.5 Aufgeklappt: immer oben, auf koerniger Flaeche -----------------
 * Vorher klappte eine Karte an ihrer Stelle im Raster auf. Wer die mittlere
 * antippte, bekam die aufgeklappte Karte unter der ersten Reihe — man tippt
 * oben und die Antwort erscheint unten. Jetzt wandert die offene Karte mit
 * `order` an den Anfang des Rasters, egal wo sie stand.
 *
 * Der Grund der offenen Karte war ein glattes, sehr helles Blau. Jetzt liegt
 * dort dieselbe erzeugte, koernige Flaeche wie im Gratis-Feld, nur ruhiger
 * (design/flaechen/karte-offen.webp), mit einem Schleier darueber, damit
 * weisse Schrift sicher liest.
 * ---------------------------------------------------------------------- */
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) { order: -1; }

/* Zwei Regeln, weil Abschnitt 24.7 und 24.8 den Grund je nach Breite schon
   gesetzt haben — die offene Karte braucht deshalb dieselbe Spezifitaet.
   Der Schleier ist oben heller: auf dem Telefon steht das helle Foto direkt
   ueber dem Grund, und ein satter Block darunter waere eine Kante quer durch
   die Karte. */
body.nb-pakete .pkg-card:not(.pkg-card-gratis)::after,
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis)::after {
  background:
    linear-gradient(180deg, #2b62ac9e 0%, #143c7ad1 46%, #0e2a5ce6 100%),
    url("/newbooking/design/flaechen/karte-offen.webp") center / cover no-repeat,
    #16407c;
}

/* Die ausgeschnittene Ecke traegt die Farbe der Karte an dieser Stelle. Auf
   der Flaeche ist das oben ein mittleres Blau statt des alten #245fe8. */
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-ecke,
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-ecke {
  --nb-ecke-farbe: #4574b4;
  color: #fff;
}


/* --- 34.6 Die Zonenfotos und ihre Auflage --------------------------------
 * Statt der 3D-Figuren jetzt Fotos: links eine ruhige Verlaufsflaeche, rechts
 * die Zone herangeholt (design/zonenfotos/, scripts/zonenfotos_erzeugen.cjs).
 * Auf der linken Haelfte stehen zwei Zeilen — wie viele Zonen im Paket sind
 * und was eine Einzelsitzung sonst kostet. Sie stehen still, waehrend die
 * Bilder darunter wechseln: die Zahl gilt fuer das Paket, nicht fuer die
 * einzelne Zone.
 *
 * Die Schicht unter den Zeilen ist ein Verlauf aus dem Stylesheet, kein Teil
 * des Fotos. So ist der Grund unter der Schrift immer derselbe, egal wie das
 * Foto links ausgefallen ist, und die Naht in der Bildmitte verschwindet.
 * ---------------------------------------------------------------------- */
/* Die Zeile steht im unteren linken Drittel, nicht auf halber Hoehe: mittig
   liegt sie dem Motiv im Weg, unten hat sie die ruhigste Stelle der Flaeche
   fuer sich. Ueber den Wischpunkten, damit sich beides nicht beruehrt.

   Die linke Flaeche kommt jetzt aus dem Bild selbst
   (scripts/zonenfotos_verlauf.py), deshalb liegt hier nur noch ein sehr
   leichter Schleier, der die Schrift abhebt — keine zweite Flaeche. */
.nb-auflage {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 62%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 0 14px 26px 15px;
  pointer-events: none;
  background: linear-gradient(90deg, #f4f7fb52 0%, #f4f7fb00 74%);
}

.nb-auflage-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #17325c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
}

.nb-auflage-zeile::before {
  content: "";
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  background: center / contain no-repeat;
}

.nb-auflage-zonen::before { background-image: url("/newbooking/design/symbole/zonen-zahl.svg"); }

/* Der Streichpreis steht unter dem Foto in der Preiszeile. Ein zweites Mal
   im Bild war eine Wiederholung, die nichts hinzufuegt. */

@media (max-width: 520px) {
  .nb-auflage { width: 68%; padding: 0 10px 22px 11px; }
  .nb-auflage-zeile { font-size: 11.5px; }
  .nb-auflage-zeile::before { width: 16px; height: 16px; }
}

/* --- 34.7 Schrittleiste auf dem Telefon nur mit Symbolen ------------------
 * Auf dem Startschirm stand das schon; es gilt aber fuer jeden Schritt.
 * Fuenf Woerter passen auf 354 px nicht nebeneinander, und eine Reihe, die
 * man schieben muss, sieht nach Fehler aus. Die Station, auf der man steht,
 * ist durch Farbe und Haken erkennbar.
 * ---------------------------------------------------------------------- */
@media (max-width: 640px) {
  .bw-prog-label { display: none !important; }
  /* Mittig zusammengestellt, nicht ueber die ganze Breite gezogen: fuenf
     kleine Symbole mit je 60 px Luft dazwischen wirken verloren. */
  .bw-progress { justify-content: center; gap: 4px; }
  .bw-prog-step:not(:last-child)::after { width: 18px; }
}


/* --- 34.8 Der Nebenweg bekommt Abstand -----------------------------------
 * Der Kasten "Zonen selber kombinieren?" klebte an der letzten Paketreihe und
 * las sich dadurch wie eine siebte Karte. Er ist aber ein anderer Weg und
 * braucht die Luft, die das zeigt.
 * ---------------------------------------------------------------------- */
body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] {
  margin-top: 26px !important;
}

@media (max-width: 640px) {
  body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] {
    margin-top: 20px !important;
  }
}

/* === 35. Der aeussere Kasten faellt weg ====================================
 * Bis hierher stand jeder Schritt in einem weissen Kasten mit Rundung und
 * Schatten, auf einem hellgrauen Grund — nur der Standort-Schritt nicht.
 * Jasper will den Kasten ueberall weg: die Flaeche des ersten Schirms traegt
 * jetzt den ganzen Funnel, der Inhalt steht direkt darauf.
 *
 * Damit ist der Grund nicht mehr an `body.nb-standort` gebunden, sondern am
 * `body` selbst. Die Farbtoken aus Abschnitt 23 gelten weiter fuer den
 * Standort-Schritt; hier stehen sie noch einmal fuer alle Schritte.
 *
 * Fuer Julian: im Original faellt der Kasten aus dem Markup, der Grund
 * gehoert an das Wurzelelement der Seite.
 * ========================================================================== */

body {
  --nb-tinte: #0E2B57;
  --nb-tinte-2: #3A5480;
  --nb-tinte-3: #56708F;
  position: relative;
  min-height: 100vh;
  background-color: #F4F8FD;
}

/* Derselbe gerechnete Verlauf wie auf dem Startschirm, jetzt fuer jeden
   Schritt. Beschreibung in Abschnitt 23. */
/* Fest am Fenster, nicht am Dokument. Am Dokument gemessen endete die
   Flaeche auf dem Telefon vor dem Seitenende — beim Hochscrollen zog eine
   Kante mit. Fest liegt sie immer genau ueber dem Sichtbereich, an jeder
   Rollposition, ohne Naht. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 0 !important;
  background-color: #F4F8FD;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.5'/%3E%3C/svg%3E"),
    radial-gradient(125% 58% at 50% 118%, #C3DAF6 0%, #C3DAF600 66%),
    radial-gradient(80% 46% at 6% -6%, #DCEAFB 0%, #DCEAFB00 72%),
    linear-gradient(180deg, #F1F6FD 0%, #ECF2FB 38%, #E4EDF8 72%, #D9E6F7 100%);
  background-size: 160px 160px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: soft-light, normal, normal, normal;
}

.bw-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bw-footer { margin-top: auto; color: var(--nb-tinte-2); }

/* Der Kasten selbst: keine Flaeche, kein Rand, kein Schatten, keine Rundung —
   und kein Beschneiden, sonst faellt der Schatten der Karten darin weg. */
.bw-card {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.bw-body { padding: 0 !important; }

/* Die Schrittleiste sass auf einem grauen Balken im Kopf des Kastens. Ohne
   Kasten steht sie frei auf der Flaeche. */
.bw-progress {
  background: none !important;
  border-bottom: 0 !important;
  padding-left: 0;
  padding-right: 0;
}

.bw-prog-step { color: var(--nb-tinte-3); }
.bw-prog-step.active { color: #1B5FC4; }
.bw-prog-step.done { color: var(--nb-tinte-2); }
.bw-prog-step:not(:last-child)::after { background: #C6D7EE; }
.bw-prog-step.done::after { background: #9DB8DC; }

/* Die Zeile "Fuer dich vorausgewaehlt" lag als getoentes Band im Kasten.
   Sie bleibt, verliert aber Flaeche und Linie. */
.bw-fixedbar {
  background: none !important;
  border: 0 !important;
  padding-left: 0;
  padding-right: 0;
  color: var(--nb-tinte-2);
}

.bw-fixedbar-chip {
  background: #ffffffc4;
  border: 0;
  box-shadow: 0 1px 2px #0e2b5714;
}

/* Die Ueberschrift und der Fliesstext jedes Schritts stehen jetzt auf der
   hellen Flaeche statt auf Weiss. */
.bw-h1 { color: var(--nb-tinte); }
.bw-eyebrow { color: var(--nb-tinte-3); }
.bw-lead { color: var(--nb-tinte-2); }

/* Die Bewertungszeile hatte einen eigenen weissen Kasten mit Rand — auf der
   Flaeche ein Kasten zu viel. */
.bw-trust {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--nb-tinte-2);
}

/* --- 34.9 Der aufgeklappte Gratis-Waehler erklaert sich -------------------
 * Aufgeklappt stand dort nur "Waehle deine Gratis-Zone" und ein Raster. Wer
 * zum ersten Mal hier ist, hat aber Fragen, die vorher im Weg stehen: was
 * genau ist gratis, muss ich etwas kaufen, womit wird behandelt. Fuenf
 * Zeilen mit gezeichneten Symbolen beantworten sie, bevor die Auswahl kommt.
 * ---------------------------------------------------------------------- */
.nb-gratis-info {
  display: grid;
  gap: 10px 24px;
  margin: 4px 0 20px;
  position: relative;
  z-index: 1;
}

@media (min-width: 760px) {
  .nb-gratis-info { grid-template-columns: 1fr 1fr; }
}

.nb-gratis-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #ffffffe8;
  font-size: 13px;
  line-height: 1.4;
}

.nb-gratis-zeile b {
  color: #fff;
  font-weight: 600;
}

.nb-gratis-text { min-width: 0; }

.nb-gratis-zeile::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  background: center / contain no-repeat;
}

.nb-gratis-zeile[data-nb-symbol="laser"]::before     { background-image: url("/newbooking/design/symbole/gratis-laser.svg"); }
.nb-gratis-zeile[data-nb-symbol="kauf"]::before      { background-image: url("/newbooking/design/symbole/gratis-kein-kauf.svg"); }
.nb-gratis-zeile[data-nb-symbol="drink"]::before     { background-image: url("/newbooking/design/symbole/gratis-drink.svg"); }
.nb-gratis-zeile[data-nb-symbol="hautcheck"]::before { background-image: url("/newbooking/design/symbole/gratis-hautcheck.svg"); }
.nb-gratis-zeile[data-nb-symbol="beratung"]::before  { background-image: url("/newbooking/design/symbole/gratis-beratung.svg"); }

/* === 36. Der Nebenweg wird hell ============================================
 * Das alte Video hinter "Zonen selber kombinieren?" war ein dunkles Motiv von
 * pearlux.de; der Kasten stand als schwarzblauer Block unter den hellen
 * Paketkarten. Jasper hat ein helles Motiv geliefert: ein ruhiger, hell
 * blau-violetter Verlauf in Bewegung.
 *
 * Damit dreht sich der Kasten um: heller Grund, dunkle Schrift, heller
 * Schleier. Die Zeichnung steht frei statt in einer milchigen Kachel.
 *
 * design/video/zonen-hell.webm  222 kB   1280 x 720, 12 s, ohne Ton
 * design/video/zonen-hell.mp4   837 kB   dieselbe Fassung fuer Safari
 * design/video/zonen-hell-poster.webp
 * ========================================================================== */

body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk],
body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk]:hover {
  background: #E7EEF9 !important;
  box-shadow: 0 1px 2px #0e2b5714, 0 14px 32px -20px #0e2b5759;
}

/* Der Schleier bleibt, nur andersherum: hell und links dicht, damit die
   dunkle Schrift auf jeder Stelle des bewegten Bildes steht. */
.nb-zk-schleier {
  background: linear-gradient(96deg, #eef4fdfa 0%, #eef4fde8 44%, #eef4fdad 76%, #eef4fd7a 100%);
}

body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] span span:first-child { color: #0E2B57 !important; }
body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] span span:last-child { color: #3A5480 !important; }
body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] > span:last-child { color: #1B5FC4 !important; }

/* Die Zeichnung stand in einer milchigen Kachel. Ein Symbol bekommt keinen
   eigenen Kasten: es steht frei auf der Flaeche, nur eingefaerbt. */
body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] > [data-nb-zk-bild] {
  background-color: #0000 !important;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

body.nb-pakete .bw-card[data-step="package"] .step-in > div > button:not([class])[data-nb-zk] > [data-nb-zk-bild]::after {
  width: 34px;
  height: 34px;
  background: #1B5FC4;
  -webkit-mask: var(--nb-z-ganzkoerper) center / 34px 34px no-repeat;
  mask: var(--nb-z-ganzkoerper) center / 34px 34px no-repeat;
}

/* --- 34.10 Aufgeklappt traegt der Waehler die Ueberschrift ----------------
 * Zugeklappt steht oben "100 % Gratis-Zone" und darunter die vier Merkmale.
 * Aufgeklappt raeumt React die Ueberschrift ab, die Merkmale blieben stehen —
 * und "140.000 € Alexandritlaser" stand dann zweimal auf dem Schirm, einmal
 * als Merkmal und einmal in den Zeilen darunter. Jetzt umgekehrt: die
 * Merkmale fallen weg, die Ueberschrift bleibt.
 * ---------------------------------------------------------------------- */
/* Nur solange der Waehler wirklich sichtbar ist. Der Schliessen-Knopf nimmt
   ihn nicht aus dem Markup, er blendet ihn aus (`nb-eingeklappt`) — ohne
   diesen Zusatz blieb nach dem Zuklappen der aufgeklappte Grund stehen und
   die Merkmale fehlten. */
body.nb-pakete .pkg-card-gratis:has(.gratis-picker):not(.nb-eingeklappt) .nb-merkmale { display: none; }
/* Solange die Karte ihren eigenen Knopf hat — den echten oder die Kopie —
   steht die Ueberschrift dort. Nur im aufgeklappten Waehler uebernimmt
   unsere. */
.pkg-card-gratis:has(.pkg-gratis-btn:not(.nb-kopie)) .nb-gratis-titel,
.pkg-card-gratis.nb-eingeklappt .nb-gratis-titel { display: none; }

.nb-gratis-titel { margin: 20px 22px 0; }

/* Die Kopie des Knopfes steht nur im zugeklappten Zustand. */
.pkg-card-gratis .nb-kopie { display: none; }
.pkg-card-gratis.nb-eingeklappt .nb-kopie { display: flex; }

@media (max-width: 700px) {
  .nb-gratis-titel { margin: 16px 16px 0; }
}

.nb-gratis-titel {
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0 0 16px;
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  .nb-gratis-titel { font-size: 23px; margin-bottom: 14px; }
}

/* --- 35.1 Auf dem Telefon ein Rand, der nicht mehr aus dem Kasten kommt ---
 * Der Abstand nach links und rechts kam bisher aus dem Innenabstand des
 * Kastens. Ohne Kasten klebte der Inhalt an der Kante.
 * ---------------------------------------------------------------------- */
@media (max-width: 640px) {
  .bw-page { padding-left: 10px; padding-right: 10px; }
}

/* === 38. Datum und Uhrzeit: zwei Lagen, die uebereinander liegen ===========
 * Vorlage ist eine Anwendung aus Jaspers Ablage: ein helles Blatt mit weit
 * gerundeten Ecken, darunter eine blaue Lage, die daruebergeschoben ist und
 * dieselbe Rundung mitbringt. Man sieht zwei Karten, nicht einen Kasten mit
 * zwei Abschnitten.
 *
 * Hier traegt das helle Blatt den Kalender, die blaue Lage die Uhrzeiten. Sie
 * ragt um 20 px in das Blatt hinein und wirft einen Schatten nach oben —
 * daran liest man, dass sie darueber liegt und nicht darin steht. Waehlt man
 * einen Tag, faehrt sie auf und schiebt sich mit hoch.
 *
 * Das Blau ist gerechnet, nicht erzeugt: die Lage ist mal 60 px hoch und mal
 * 400, eine Bilddatei muesste dabei beschnitten oder gezogen werden. Das Korn
 * liegt als Filter darueber, dieselbe Handschrift wie der Seitengrund.
 * ========================================================================== */

body.nb-zeit .bw-card .cal-slot-row {
  max-width: 620px;
  border: 0;
  border-radius: 26px !important;
  box-shadow: 0 2px 6px #0e2b5710, 0 24px 52px -28px #0e2b5773;
}

/* --- 38.1 Das helle Blatt ----------------------------------------------- */
body.nb-zeit .nb-teil[data-nb-teil="tag"] {
  padding: 20px 24px 14px;
  border-top: 0;
}

/* Ist der Kalender zu, liegt die blaue Lage direkt unter der Kopfzeile und
   ragt 20 px in sie hinein. Ohne diesen Zuschlag schneidet sie das Datum an. */
body.nb-zeit .nb-teil[data-nb-teil="tag"][aria-expanded="false"] { padding-bottom: 34px; }

body.nb-zeit .nb-teil[data-nb-teil="tag"] + .cal { border-top: 0; }

body.nb-zeit .cal { padding-bottom: 26px; }

/* Die Tage sind weich gerundete Kacheln statt Kaestchen. */
body.nb-zeit .cal-day { border-radius: 12px !important; }

body.nb-zeit .cal-day.sel,
body.nb-zeit .cal-day.sel:hover {
  background: #1B5FC4;
  color: #fff;
  border-color: #0000;
}

/* --- 38.2 Die blaue Lage ------------------------------------------------
 * Kopfzeile und Zeitenblock teilen sich denselben Grund; die Rundung sitzt
 * oben an der Kopfzeile, unten uebernimmt sie das Blatt, weil es beschneidet.
 * ---------------------------------------------------------------------- */
body.nb-zeit .nb-teil[data-nb-teil="zeit"],
body.nb-zeit .bw-card .cal-slot-row > .slot-reveal {
  position: relative;
  z-index: 2;
  color: #fff;
  /* Flach, kein Verlauf: Kopfzeile und Zeitenblock sind zwei Elemente, und
     ein Verlauf faengt in jedem von vorne an — genau die Kante, die man
     zwischen beiden gesehen hat. Eine Farbe laeuft nahtlos durch. Dazu ein
     helleres Blau als vorher. */
  background-color: #2A62C8;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.4'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  background-repeat: repeat;
  background-blend-mode: soft-light;
}

body.nb-zeit .nb-teil[data-nb-teil="zeit"] {
  margin-top: -20px;
  padding: 26px 24px 15px;
  border-top: 0;
  border-radius: 26px 26px 0 0 !important;
  box-shadow: 0 -10px 28px -14px #0e2b5766;
}

body.nb-zeit .nb-teil[data-nb-teil="zeit"]:hover { background-color: #2F69D0; }

body.nb-zeit .nb-teil[data-nb-teil="zeit"] .nb-teil-symbol,
body.nb-zeit .nb-teil[data-nb-teil="zeit"] .nb-teil-winkel { background: #ffffffdb; }

body.nb-zeit .nb-teil[data-nb-teil="zeit"][aria-expanded="true"] .nb-teil-symbol { background: #fff; }

body.nb-zeit .nb-teil[data-nb-teil="zeit"] .nb-teil-label { color: #ffffffc7; }
body.nb-zeit .nb-teil[data-nb-teil="zeit"] .nb-teil-wert { color: #fff; }
body.nb-zeit .nb-teil[data-nb-teil="zeit"] .nb-teil-wert[data-nb-leer="1"] { color: #ffffff9e; font-weight: 400; }

body.nb-zeit .nb-teil[data-nb-teil="zeit"][disabled] .nb-teil-symbol,
body.nb-zeit .nb-teil[data-nb-teil="zeit"][disabled] .nb-teil-winkel { background: #ffffff85; }
body.nb-zeit .nb-teil[data-nb-teil="zeit"][disabled] .nb-teil-label { color: #ffffffa3; }

body.nb-zeit .nb-teil[data-nb-teil="zeit"] + .slot-reveal { border-top: 0; }

body.nb-zeit .slot-content { padding: 0 24px 24px; }

body.nb-zeit .slot-header { color: #ffffffc4; }

/* --- 38.3 Die Zeile der Mitarbeiterin auf dem Blau --------------------- */
body.nb-zeit .slotstaff-head {
  background: #ffffff1f;
  border: 0;
  box-shadow: inset 0 0 0 1px #ffffff2e;
  border-radius: 14px !important;
}

body.nb-zeit .slotstaff-head-name { color: #fff; }
body.nb-zeit .slotstaff-head-room { color: #ffffffab; }
body.nb-zeit .slotstaff-avatar { box-shadow: 0 0 0 2px #ffffff4d; }

/* --- 38.4 Die Uhrzeiten als weisse Kacheln ------------------------------ */
body.nb-zeit .slot-btn {
  background: #fff;
  border: 0;
  border-radius: 14px !important;
  color: #10284E;
  box-shadow: 0 1px 2px #0b234f21;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}

body.nb-zeit .slot-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px #0b234f2e;
}

body.nb-zeit .slot-btn .nb-zeit { color: #10284E; }

body.nb-zeit .slot-btn.nb-slot-aus,
body.nb-zeit .slot-btn[disabled] {
  background: #ffffff2b;
  color: #ffffff8f;
  box-shadow: none;
}

body.nb-zeit .slot-btn.nb-slot-aus .nb-zeit,
body.nb-zeit .slot-btn[disabled] .nb-zeit { color: #ffffff8f; }

/* --- 38.5 Auf dem Telefon ----------------------------------------------- */
@media (max-width: 640px) {
  body.nb-zeit .bw-card .cal-slot-row { border-radius: 22px !important; }
  body.nb-zeit .nb-teil[data-nb-teil="tag"] { padding: 16px 16px 10px; }
  body.nb-zeit .nb-teil[data-nb-teil="tag"][aria-expanded="false"] { padding-bottom: 30px; }
  body.nb-zeit .nb-teil[data-nb-teil="zeit"] {
    margin-top: -18px;
    padding: 24px 16px 13px;
    border-radius: 22px 22px 0 0 !important;
  }
  body.nb-zeit .slot-content { padding: 0 16px 20px; }
  body.nb-zeit .cal { padding-bottom: 22px; }
}

/* --- 38.6 Aufgeklappt steht das Zonenfoto hochkant ------------------------
 * Auf dem Rechner liegt das Bild der offenen Karte links als hohe Spalte. Die
 * Zonenfotos sind aber quer und tragen ihre ruhige Flaeche links, die Zone
 * rechts: mittig beschnitten sah man in der hohen Spalte nur die graue
 * Flaeche und keine Zone.
 *
 * Deshalb wird dort der rechte Teil gezeigt. Die Zeile "X Zonen" wandert
 * dabei an den unteren Rand und bekommt ihren Schleier von unten statt von
 * links — sonst laege sie auf der Zone statt auf der ruhigen Flaeche.
 * ---------------------------------------------------------------------- */
@media (min-width: 700px) {
  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-bild {
    background-position: 78% center;
  }

  body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-auflage {
    width: 100%;
    justify-content: flex-end;
    padding: 0 16px 34px;
    background: linear-gradient(180deg, #eef3f900 0%, #eef3f9b8 52%, #eef3f9f2 100%);
  }
}

/* === 39. Datum und Uhrzeit: Feinschliff ====================================
 * Der Umbau auf zwei Lagen stand, die Ausrichtung darin nicht: Kopfzeile,
 * Monatsnavigation, Wochentage, Tagesraster, Mitarbeiterzeile und Uhrzeiten
 * hatten jeweils ihren eigenen Rand. Dazu deckte die blaue Lage die letzte
 * Kalenderwoche zu, und dass die Zeile "Tag" zurueckfuehrt, sah man ihr nicht
 * an.
 *
 * Hier steht deshalb ein einziger Randwert, an dem sich alles ausrichtet, und
 * jede Zeile bekommt ihre Form.
 * ========================================================================== */

body.nb-zeit { --nb-kal-rand: 22px; }

/* --- 39.1 Ein Rand fuer alles ------------------------------------------- */
body.nb-zeit .nb-teil[data-nb-teil="tag"],
body.nb-zeit .nb-teil[data-nb-teil="zeit"] {
  padding-left: var(--nb-kal-rand);
  padding-right: var(--nb-kal-rand);
}

body.nb-zeit .bw-card .cal-slot-row > .cal {
  padding-left: var(--nb-kal-rand);
  padding-right: var(--nb-kal-rand);
  /* Unten Platz fuer die blaue Lage, die 20 px hereinragt: ohne diesen
     Zuschlag verdeckte sie die letzte Woche. */
  padding-bottom: 40px;
}

body.nb-zeit .slot-content { padding: 0 var(--nb-kal-rand) 24px; }

/* --- 39.2 Die Kopfzeilen ------------------------------------------------
 * Symbol, Beschriftung, Wert, Winkel stehen auf einer Grundlinie; das Symbol
 * ist so gross wie die Schrift daneben und sitzt nicht mehr darueber.
 * ---------------------------------------------------------------------- */
body.nb-zeit .nb-teil {
  grid-template-columns: 18px auto 1fr 16px;
  gap: 9px;
  align-items: center;
}

body.nb-zeit .nb-teil-symbol {
  width: 18px;
  height: 18px;
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
}

body.nb-zeit .nb-teil-label { font-size: 13.5px; font-weight: 500; }
body.nb-zeit .nb-teil-wert { font-size: 14px; }
body.nb-zeit .nb-teil-winkel { width: 16px; height: 16px; }

/* --- 39.3 Die zugeklappte Tageszeile ist ein Knopf ----------------------
 * Zugeklappt sah die Zeile aus wie eine Angabe. Sie ist aber der Weg zurueck
 * zur Tageswahl, also bekommt sie eine Flaeche, einen Wert in der Markenfarbe
 * und ein Wort, das sagt, was passiert.
 * ---------------------------------------------------------------------- */
body.nb-zeit .nb-teil[data-nb-teil="tag"][aria-expanded="false"] {
  background: #F2F7FE;
}

body.nb-zeit .nb-teil[data-nb-teil="tag"][aria-expanded="false"]:hover {
  background: #E7F0FC;
}

body.nb-zeit .nb-teil[data-nb-teil="tag"][aria-expanded="false"] .nb-teil-wert,
body.nb-zeit .nb-teil[data-nb-teil="tag"][aria-expanded="false"] .nb-teil-winkel { color: #1B5FC4; }
body.nb-zeit .nb-teil[data-nb-teil="tag"][aria-expanded="false"] .nb-teil-winkel { background: #1B5FC4; }

body.nb-zeit .nb-teil[data-nb-teil="tag"][aria-expanded="false"] .nb-teil-wert::after {
  content: var(--nb-wort-aendern, " ändern");
  color: #1B5FC4A8;
  font-weight: 500;
}

/* --- 39.4 Der Kalender --------------------------------------------------
 * Wochentage und Tage teilen sich dasselbe Raster, sonst stehen die Kuerzel
 * neben ihren Spalten. Die Tage sind quadratische Kacheln mit derselben
 * Rundung wie alles andere.
 * ---------------------------------------------------------------------- */
body.nb-zeit .cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0;
}

body.nb-zeit .cal-arrow {
  width: 30px;
  height: 30px;
  background: none;
  border: 0;
  border-radius: 8px !important;
  color: #56708F;
}

body.nb-zeit .cal-arrow:hover { background: #F2F7FE; color: #1B5FC4; }
body.nb-zeit .cal-arrow[disabled] { opacity: .3; }

body.nb-zeit .cal-month {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #0E2B57;
}

body.nb-zeit .cal-dow-row,
body.nb-zeit .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
}

body.nb-zeit .cal-dow-row { margin-bottom: 8px; }

body.nb-zeit .cal-dow {
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  color: #8195B2;
  letter-spacing: .01em;
}

body.nb-zeit .cal-day {
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 12px !important;
}

body.nb-zeit .cal-day.open { background: #EFF4FD; color: #17325C; font-weight: 500; }
body.nb-zeit .cal-day.open:hover { background: #DFEAFC; color: #1B5FC4; }

body.nb-zeit .cal-day.sel,
body.nb-zeit .cal-day.sel:hover {
  background: #1B5FC4;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px #1b5fc44d;
}

body.nb-zeit .cal-day.dis { background: none; color: #B9C4D6; }
body.nb-zeit .cal-day.today:not(.dis):not(.sel) { box-shadow: inset 0 0 0 1.5px #1B5FC4; }

/* --- 39.5 Die Zeile der Mitarbeiterin ----------------------------------- */
body.nb-zeit .slotstaff-head {
  gap: 11px;
  margin: 0 0 14px;
  padding: 9px 12px;
  background: #ffffff1c;
  box-shadow: inset 0 0 0 1px #ffffff2b;
  border: 0;
  border-radius: 13px !important;
}

body.nb-zeit .slotstaff-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  box-shadow: 0 0 0 1.5px #ffffff59;
}

body.nb-zeit .slotstaff-head-name { font-size: 13.5px !important; color: #fff; }
body.nb-zeit .slotstaff-head-room { font-size: 11.5px !important; color: #ffffffa8; }

/* --- 39.6 Die Uhrzeiten -------------------------------------------------
 * Vorher vier breite weisse Bloecke ueber die ganze Zeile. Jetzt schmale
 * Kacheln, die sich nach Bedarf umbrechen: die Zahl steht mittig, die Kachel
 * ist nur so breit, wie sie sein muss.
 * ---------------------------------------------------------------------- */
body.nb-zeit .slot-grid {
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

body.nb-zeit .slot-btn {
  min-height: 0;
  padding: 12px 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  border-radius: 13px !important;
  background: #fff;
  border: 0;
  color: #10284E;
  box-shadow: 0 1px 2px #0b234f1f;
}

body.nb-zeit .slot-btn:hover {
  background: #fff;
  border: 0;
  color: #1B5FC4;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #0b234f33;
}

body.nb-zeit .slot-btn .nb-zeit { font-size: 14px; font-weight: 600; }

/* --- 39.7 Auf dem Telefon ----------------------------------------------- */
@media (max-width: 640px) {
  body.nb-zeit { --nb-kal-rand: 15px; }
  body.nb-zeit .bw-card .cal-slot-row > .cal { padding-bottom: 36px; }
  body.nb-zeit .cal-day { font-size: 13.5px; border-radius: 11px !important; }
  body.nb-zeit .cal-dow-row,
  body.nb-zeit .cal-grid { gap: 5px; }
  body.nb-zeit .slot-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px; }
  body.nb-zeit .slot-btn { padding: 11px 6px; font-size: 13.5px; }
}

/* === 40. Zwei Dinge auf dem Paket-Schritt ==================================
 * 40.1 Die alte blaue Ebene faellt auf der Gratis-Karte weg.
 * 40.2 Die Ersparnis in Handschrift ueber der Zonenzahl.
 * ========================================================================== */

/* --- 40.1 -----------------------------------------------------------------
 * Abschnitt 6 legt hinter jede Paketkarte eine blaue Ebene, die beim
 * Aufklappen eingeblendet wird. Die Gratis-Karte bekommt beim Aufklappen
 * dieselbe Klasse — die Ebene deckte dort die eigene koernige Flaeche zu und
 * legte sich ueber den Waehler. Das war das grelle Blau, das beim Aufklappen
 * auftauchte, und der Grund, warum der Waehler auf breiten Fenstern gar nicht
 * zu sehen war. Die Gratis-Karte traegt ihren Grund selbst.
 * ---------------------------------------------------------------------- */
body.nb-pakete .pkg-card-gratis::after { display: none !important; }

body.nb-pakete .pkg-card-gratis .gratis-picker { position: relative; z-index: 1; }

/* --- 40.2 Die Ersparnis --------------------------------------------------
 * Ueber der Zonenzahl, in derselben Handschrift wie die Notiz auf dem
 * Startschirm: um wie viel Prozent der Sitzungspreis unter dem Preis einer
 * einzelnen Sitzung liegt. Auf dem Rechner, wo das Bild gross genug dafuer
 * ist.
 *
 * Fuer Julian: `Math.round((listPrice - lowestPrice) / listPrice * 100)`.
 * ---------------------------------------------------------------------- */
.nb-auflage-spar {
  display: none;
  color: #C6423C;
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  font-size: 31px;
  /* Caveat liegt nur in 600 vor; 800 laesst den Browser daraus einen fetten
     Schnitt rechnen — genau der Strich, den eine Ersparnis braucht. */
  font-weight: 800;
  line-height: 1;
  letter-spacing: .005em;
  margin-bottom: 4px;
}

/* Nur auf der aufgeklappten Karte: zugeklappt stehen sechs Ersparnisse
   nebeneinander und ueberschreien den Rest der Karte. Aufgeklappt gehoert die
   Zahl zu der einen Entscheidung, die gerade ansteht. Auf jeder Breite. */
body.nb-pakete .pkg-card.open .nb-auflage-spar { display: block; }

@media (max-width: 699px) {
  .nb-auflage-spar { font-size: 26px; margin-bottom: 2px; }
}

/* === 41. Zugeklappte Karten sind immer gleich hoch =========================
 * Vorher standen die Karten einer Reihe gleich hoch, weil das Raster sie
 * gestreckt hat — aber nur solange keine Karte offen war. Sobald eine aufging,
 * schaltete Abschnitt 24.1 auf `align-items: start` und die uebrigen fielen
 * auf ihre Inhaltshoehe zurueck: eine Karte mit zweizeiligem Namen wurde
 * hoeher als ihre Nachbarn.
 *
 * Die Ursache ist der Name: "Ganzkoerper" braucht eine Zeile, "Achseln +
 * Intim + Unterschenkel" zwei. Deshalb bekommt der Name die Hoehe von zwei
 * Zeilen, egal wie lang er ist. Dann sind alle Karten aus sich heraus gleich
 * hoch — in jeder Reihe und ueber Reihen hinweg, mit und ohne offene Karte.
 * ========================================================================== */

body.nb-pakete .pkg-card:not(.pkg-card-gratis) .pkg-card-name {
  display: block;
  min-height: 2.4em;
}

/* Aufgeklappt steht der Name allein und gross; dort waere die zweite Zeile
   eine Luecke. */
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .pkg-card-name { min-height: 0; }

/* Damit alle Karten wieder gleich hoch stehen, auch wenn eine offen ist. Die
   offene Karte liegt ohnehin allein in ihrer Reihe (`grid-column: 1 / -1`),
   sie kann die anderen also nicht mitziehen. */
body.nb-pakete .pkg-grid:has(.pkg-card.open) { align-items: stretch; }

/* === 42. Feinschliff nach der zweiten Durchsicht ===========================
 * Drei Sachen: die Zeilen im Gratis-Waehler brechen auf dem Telefon sauber
 * um, das helle Blatt im Datum-Schritt hebt sich vom Grund ab, und alles in
 * der blauen Lage steht auf einer Kante.
 * ========================================================================== */

/* --- 42.1 Die Gratis-Zeilen auf dem Telefon -----------------------------
 * Die fette Ansage und der Satz dahinter liefen in einer Zeile. Auf 390 px
 * brach die Ansage um und der Satz begann daneben — zwei ausgefranste
 * Spalten. Auf dem Telefon steht die Ansage deshalb auf ihrer eigenen Zeile.
 * ---------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Eine Spalte, fuenf Zeilen, jede einzeilig. Die Ansage bleibt im Fluss:
     die Texte sind kurz genug, dass nichts umbricht. */
  .nb-gratis-info { grid-template-columns: 1fr; gap: 12px 0; }
  .nb-gratis-zeile { align-items: center; gap: 10px; font-size: 12px; }
  .nb-gratis-zeile::before { width: 20px; height: 20px; margin-top: 0; }
}

/* --- 42.2 Das helle Blatt hebt sich ab ----------------------------------
 * Blatt und Seitengrund waren beide fast weiss; man sah nicht, wo das eine
 * aufhoert. Der Grund traegt jetzt mehr Farbe (Abschnitt 35), das Blatt
 * bleibt reines Weiss und bekommt einen deutlicheren Schatten.
 * ---------------------------------------------------------------------- */
body.nb-zeit .bw-card .cal-slot-row {
  background: #fff;
  box-shadow: 0 2px 8px #0e2b5714, 0 26px 56px -26px #0e2b578f;
}

/* --- 42.3 Eine Kante fuer alles in der blauen Lage ----------------------
 * Kopfzeile, Mitarbeiterzeile und Uhrzeiten begannen an drei verschiedenen
 * Stellen: die Kopfzeile am Rand, die Mitarbeiterzeile am Rand plus ihrer
 * eigenen Polsterung, die Kacheln wieder am Rand. Die Mitarbeiterzeile
 * verliert deshalb ihren Kasten und steht frei auf dem Blau — damit fangen
 * Symbol, Bild und erste Kachel an derselben Kante an.
 * ---------------------------------------------------------------------- */
body.nb-zeit .slotstaff-head {
  gap: 11px;
  margin: 0 0 14px;
  padding: 0 0 13px;
  background: none;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid #ffffff33;
  border-radius: 0 !important;
}

body.nb-zeit .slotstaff-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  box-shadow: 0 0 0 1.5px #ffffff59;
}

body.nb-zeit .slotstaff-head-name { font-size: 13.5px !important; font-weight: 600; color: #fff; }
body.nb-zeit .slotstaff-head-room { font-size: 11.5px !important; color: #ffffffab; }

/* Die Kopfzeile der Lage bekommt oben mehr Luft als unten: oben liegt die
   Rundung, die 20 px in das Blatt hineinragt. */
/* Oben und unten gleich viel: die Lage ragt zwar 20 px in das Blatt hinein,
   sichtbar ist aber ihre ganze Hoehe. Mit mehr Polsterung oben sass die Zeile
   sechs Pixel unter der Mitte. */
body.nb-zeit .nb-teil[data-nb-teil="zeit"] { padding-top: 20px; padding-bottom: 20px; }

@media (max-width: 640px) {
  body.nb-zeit .nb-teil[data-nb-teil="zeit"] { padding-top: 18px; padding-bottom: 18px; }
  body.nb-zeit .slotstaff-head { margin-bottom: 12px; padding-bottom: 11px; }
}

/* Abschnitt 25.6 gibt dem Zeitenblock auf dem Rechner eine eigene Polsterung
   von 22 px. Zusammen mit dem Rand aus Abschnitt 39.1 begannen Bild und
   Kacheln dadurch weiter rechts als das Symbol der Kopfzeile. Der Rand kommt
   nur noch von einer Stelle. */
body.nb-zeit .bw-card .cal-slot-row > .slot-reveal {
  padding-left: 0;
  padding-right: 0;
}

/* --- 43.1 Kein Warten auf den Doppeltipp ---------------------------------
 * `touch-action: manipulation` nimmt dem Browser die Frage, ob ein zweiter
 * Tipp folgt und hineingezoomt werden soll. Ohne das wartet er auf jedem
 * Knopf einen Moment, und der Tipp fuehlt sich zaeh an.
 * ---------------------------------------------------------------------- */
.pkg-body,
.pkg-gratis-btn,
.nb-gratis-zu,
.nb-gratis-auf,
.nb-stadt-kopf,
.nb-teil,
.loc-card,
.cal-day,
.cal-arrow,
.slot-btn,
.gratis-zone-btn,
.pkg-variant-btn,
.nb-sprache-knopf,
.bw-back { touch-action: manipulation; }

/* Die Zeile der Mitarbeiterin traegt eine Polsterung aus dem Original, die
   sie gegen die Kante der uebrigen Zeilen verschiebt. */
body.nb-zeit .bw-card .slotstaff-head { padding-left: 0; padding-right: 0; }

/* --- 43.2 Die Ersparnis passt in die Karte -------------------------------
 * Auf dem Telefon war die Auflage auf 68 % der Bildbreite begrenzt; die
 * Handschrift ist breiter und schob die ganze Seite nach rechts. Auf der
 * offenen Karte darf sie die volle Breite haben — dort steht sie allein.
 * ---------------------------------------------------------------------- */
body.nb-pakete .pkg-card.open .nb-auflage { width: 100%; }

.nb-galerie { overflow: hidden; }

@media (max-width: 699px) {
  .nb-auflage-spar { font-size: 23px; }
}

/* === 44. Eine eingravierte Linie unter Name und Zonen ======================
 * Name und Zonensymbole gehoeren zusammen: sie sagen, was das Paket ist.
 * Darunter kommt der Preis, und das ist eine andere Auskunft. Zwischen beiden
 * liegt jetzt eine sehr feine Linie, die nach links und rechts ausblendet —
 * eine dunkle Haarlinie mit einer hellen direkt darunter, wie eingraviert.
 * Kein Strich von Kante zu Kante: der wuerde die Karte teilen, dieser
 * gliedert sie nur.
 *
 * Nur auf zugeklappten Karten. Aufgeklappt steht der Preis ohnehin an einer
 * anderen Stelle und der Grund ist blau.
 * ========================================================================== */

body.nb-pakete .pkg-card:not(.open):not(.pkg-card-gratis) .nb-zonen {
  position: relative;
  padding-bottom: 13px;
  margin-bottom: 3px;
}

body.nb-pakete .pkg-card:not(.open):not(.pkg-card-gratis) .nb-zonen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background:
    linear-gradient(90deg, #0e2b5700 0%, #0e2b5724 20%, #0e2b5724 80%, #0e2b5700 100%),
    linear-gradient(90deg, #ffffff00 0%, #ffffffe0 20%, #ffffffe0 80%, #ffffff00 100%);
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 1px;
  background-repeat: no-repeat, no-repeat;
}


/* --- 44.1 Der Pfeil am SMS-Knopf ist gezeichnet --------------------------
 * Im Text stand das Schriftzeichen →. Neben dem fetten Knopftext sieht das
 * duenn und fremd aus. Jetzt ein gezeichneter Strich mit Spitze, in derselben
 * Handschrift wie die Notiz auf dem Startschirm.
 * ---------------------------------------------------------------------- */
.nb-sms::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 15px;
  margin-left: 10px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20' fill='none'%3E%3Cpath d='M2.5 11.4c9.5-1.6 21-2.2 38-1.6' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M30.5 3.4 40.5 9.7 30.8 16.6' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20' fill='none'%3E%3Cpath d='M2.5 11.4c9.5-1.6 21-2.2 38-1.6' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M30.5 3.4 40.5 9.7 30.8 16.6' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--ease);
}

.nb-sms:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .nb-sms::after { transition: none; }
}

/* === 45. Die Karte unter den Buchungsknoepfen ==============================
 * Ein Bild von der eigenen Maschine, kein eingebetteter Kartendienst: die
 * Kopie laeuft unter `default-src 'self'`. Ein Tipp oeffnet den Ort in Google
 * Maps. Erzeugt mit scripts/karten_erzeugen.py.
 * ========================================================================== */

.nb-karte {
  display: block;
  overflow: hidden;
  /* Ueber die ganze Breite des Rechners waere die Karte ein Briefschlitz.
     Sie bleibt so breit wie eine Karte und steht links. */
  max-width: 560px;
  margin: 22px 0 4px;
  background: #fff;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px #0e2b5714, 0 14px 32px -20px #0e2b5773;
  text-decoration: none;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}

.nb-karte:hover {
  box-shadow: 0 2px 4px #0e2b571f, 0 20px 40px -20px #0e2b578f;
  transform: translateY(-1px);
}

.nb-karte-bild {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 0 !important;
}

.nb-karte-text {
  display: block;
  padding: 13px 16px 15px;
}

.nb-karte-titel {
  display: block;
  color: #0E2B57;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.nb-karte-adresse {
  display: block;
  margin-top: 2px;
  color: #3A5480;
  font-size: 13px;
  line-height: 1.4;
}

.nb-karte-weg {
  display: inline-block;
  margin-top: 7px;
  color: #1B5FC4;
  font-size: 12.5px;
  font-weight: 600;
}

.nb-karte-weg::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: var(--nb-pfeil-voll) center / 12px 12px no-repeat;
  mask: var(--nb-pfeil-voll) center / 12px 12px no-repeat;
}

@media (max-width: 640px) {
  .nb-karte-bild { height: 128px; }
  .nb-karte-text { padding: 12px 14px 14px; }
}


/* === 46. Die Schrittleiste traegt die Auswahl ==============================
 * Auf dem Rechner steht unter jeder erledigten Station, wofuer man sich
 * entschieden hat: die Stadt mit der Strasse, das Paket, der Termin. Das Band
 * "Fuer dich vorausgewaehlt" faellt dort dafuer weg — sonst stuende alles
 * zweimal da. Auf dem Telefon tragen die Stationen keine Beschriftung, dort
 * bleibt das Band und die Werte fallen weg.
 * ========================================================================== */

.nb-prog-wert {
  display: block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
  color: var(--nb-tinte-3);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
}

.bw-prog-step.active .nb-prog-wert { color: #1B5FC4; }
.bw-prog-step.done .nb-prog-wert { color: var(--nb-tinte-2); }

@media (min-width: 641px) {
  /* Die Stationen stehen jetzt zweizeilig; die Beschriftung sitzt oben. */
  .bw-prog-step { align-items: flex-start; }
  .bw-prog-step .bw-prog-label { line-height: 1.25; }

  /* Das Band ist auf dem Rechner ueberfluessig geworden. */
  .bw-fixedbar { display: none !important; }
}

@media (max-width: 640px) {
  .nb-prog-wert { display: none; }
}

/* === 47. Das Blatt bleibt weiss, die Lage wirft ihren Schatten =============
 * Die zugeklappte Tageszeile hatte einen hellblauen Grund, damit man ihr
 * ansieht, dass sie zurueckfuehrt. Damit stand aber ein zweiter Ton auf dem
 * Blatt: oben weiss, unten blaeulich. Das Blatt hat jetzt durchgehend
 * dieselbe Flaeche, die Zeile bleibt trotzdem als Weg erkennbar — ueber das
 * Datum in der Markenfarbe, das Wort "ändern" und den Winkel.
 *
 * Dazu: das Korn faellt auf der blauen Lage weg. Kopfzeile und Zeitenblock
 * sind zwei Elemente, und ein gekacheltes Muster faengt in jedem von vorne an
 * — an der Naht sah man einen feinen Strich. Die Farbe allein laeuft
 * nahtlos durch.
 * ========================================================================== */

body.nb-zeit .nb-teil[data-nb-teil="tag"][aria-expanded="false"],
body.nb-zeit .nb-teil[data-nb-teil="tag"][aria-expanded="false"]:hover {
  background: none;
}

body.nb-zeit .nb-teil[data-nb-teil="zeit"],
body.nb-zeit .bw-card .cal-slot-row > .slot-reveal {
  background-image: none;
  background-color: #2A62C8;
}

/* Der Schatten nach oben macht die Lage zu einer Lage: weich, weit, ohne
   sichtbare Kante. */
body.nb-zeit .nb-teil[data-nb-teil="zeit"] {
  box-shadow: 0 -3px 10px -4px #0e2b5745, 0 -14px 32px -18px #0e2b5773;
}

/* === 48. Die Uhrzeit-Lage: erzeugte Flaeche und weiches Glas ===============
 * Das flache Blau war ruhig, aber leer. Jetzt liegt dort eine erzeugte
 * Flaeche mit weichen Verlaeufen und Korn (design/flaechen/mittel-ruhig.webp,
 * scripts/flaechen_erzeugen.cjs).
 *
 * Der Haken dabei: Kopfzeile und Zeitenblock sind zwei Elemente, und ein Bild
 * faengt in jedem von vorne an — genau die Naht, die vorher zu sehen war.
 * Deshalb liegt das Bild in beiden auf dieselbe Breite gezogen
 * (`100% auto`, gleiche Breite = gleicher Massstab), und der Zeitenblock
 * schiebt es um die Hoehe der Kopfzeile nach oben. Den Wert misst
 * override.js und legt ihn als `--nb-zeit-versatz` an. Damit laeuft die
 * Flaeche durch, als waere es eine.
 *
 * Die Kacheln darauf sind Glas statt Farbe: durchscheinend, unscharf
 * dahinter, eine helle Kante oben. Weniger Block, mehr Auflage.
 * ========================================================================== */

body.nb-zeit .nb-teil[data-nb-teil="zeit"],
body.nb-zeit .bw-card .cal-slot-row > .slot-reveal {
  background-color: #2A62C8;
  background-image: url("/newbooking/design/flaechen/mittel-ruhig.webp");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
}

body.nb-zeit .bw-card .cal-slot-row > .slot-reveal {
  background-position: center calc(-1 * var(--nb-zeit-versatz, 58px));
}

/* --- 48.1 Die Zeile der Mitarbeiterin als Glas -------------------------- */
body.nb-zeit .slotstaff-head {
  margin: 0 0 14px;
  padding: 9px 12px;
  background: #ffffff21;
  box-shadow: inset 0 0 0 1px #ffffff2e, inset 0 1px 0 #ffffff40;
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
  border: 0;
  border-radius: 14px !important;
}

/* --- 48.2 Die Uhrzeiten als Glas ---------------------------------------- */
body.nb-zeit .slot-btn {
  background: #ffffffe0;
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px #0b234f1a, 0 6px 16px -10px #0b234f8f;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  color: #10284E;
  border: 0;
}

body.nb-zeit .slot-btn:hover {
  background: #ffffff;
  color: #1B5FC4;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px #0b234f1f, 0 10px 22px -12px #0b234fa8;
}

body.nb-zeit .slot-btn.nb-slot-aus,
body.nb-zeit .slot-btn[disabled] {
  background: #ffffff2b;
  box-shadow: inset 0 0 0 1px #ffffff2b;
  color: #ffffff96;
}

/* === 49. Die Zusammenfassung auf derselben Flaeche =========================
 * Der Grund der Karte war ein satter, harter Blauverlauf — neben den ruhigen
 * hellen Flaechen des Funnels wirkte er laut. Jetzt liegt dort dieselbe
 * erzeugte Flaeche wie unter den Uhrzeiten: weiche Verlaeufe, Korn, mittleres
 * Blau. Weisse Schrift bleibt darauf sicher lesbar, der Kasten ist aber kein
 * Farbblock mehr.
 * ========================================================================== */

.bw-card .summary-card {
  background:
    linear-gradient(158deg, #1a3f8f42 0%, #12306e5c 100%),
    url("/newbooking/design/flaechen/mittel-ruhig.webp") center / cover no-repeat,
    #2A62C8 !important;
  box-shadow: 0 2px 6px #0e2b5714, 0 20px 44px -24px #0e2b5799;
}

/* === 50. Das Angebot vor dem Abschicken ===================================
 * Legt sich vor den Buchungsknopf: eine Signature-Zone fuer 20 € je Sitzung,
 * die zweite kostenlos, eine Minute lang. Dieselbe Bildsprache wie der
 * Funnel — weisses Blatt, weiche Rundung, die quadratischen Zonenfotos aus
 * dem Gratis-Waehler.
 * ========================================================================== */

.nb-upsell {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #0b1f45b8;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: nb-upsell-auf .22s var(--ease);
}

@keyframes nb-upsell-auf { from { opacity: 0 } to { opacity: 1 } }

body.nb-upsell-an { overflow: hidden; }

.nb-upsell-blatt {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 26px 26px 24px;
  background: #fff;
  border-radius: 18px !important;
  box-shadow: 0 4px 12px #0b1f4529, 0 32px 70px -28px #0b1f45b8;
  animation: nb-upsell-hoch .3s var(--ease);
}

@keyframes nb-upsell-hoch {
  from { opacity: 0; transform: translateY(16px) }
  to { opacity: 1; transform: none }
}

.nb-upsell-vor {
  margin: 0 0 4px;
  color: #56708F;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .03em;
}

.nb-upsell-titel {
  margin: 0 0 6px;
  color: #0E2B57;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.nb-upsell-text {
  margin: 0 0 14px;
  color: #3A5480;
  font-size: 13.5px;
  line-height: 1.45;
}

/* Die Uhr steht als Zeile, nicht als Schild: eine Zahl, die laeuft, und ein
   Satz dahinter. */
.nb-upsell-uhr {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 16px;
  color: #56708F;
  font-size: 12.5px;
}

.nb-upsell-zahl {
  color: #C6423C;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.nb-upsell-zonen {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 108px;
  gap: 9px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin: 0 -26px 14px;
  padding: 2px 26px 8px;
  scrollbar-width: none;
}

.nb-upsell-zonen::-webkit-scrollbar { display: none; }

.nb-upsell-zone {
  scroll-snap-align: start;
  display: block;
  padding: 0 0 9px;
  border: 0;
  background: #F4F8FE;
  border-radius: 12px !important;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background-color .16s var(--ease), box-shadow .16s var(--ease);
}

.nb-upsell-zone:hover { background: #E9F1FD; }

.nb-upsell-zone.nb-an {
  background: #E4EEFC;
  box-shadow: inset 0 0 0 2px #1B5FC4;
}

.nb-upsell-bild {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #dce8f8 center / cover no-repeat;
  border-radius: 0 !important;
}

.nb-upsell-name {
  display: block;
  margin: 8px 10px 0;
  color: #0E2B57;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.nb-upsell-wert {
  display: block;
  margin: 1px 10px 0;
  color: #C6423C;
  font-size: 11.5px;
}

.nb-upsell-summe {
  margin: 0 0 16px;
  color: #17325C;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.nb-upsell-knoepfe {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-upsell-ja,
.nb-upsell-nein {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 8px !important;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}

.nb-upsell-ja {
  background: #16A34A;
  color: #fff;
  font-size: 15px;
  box-shadow: 0 2px 4px #16a34a2e, 0 12px 26px -14px #16a34aad;
}

.nb-upsell-ja:hover:not([disabled]) { background: #12903F; }

.nb-upsell-ja[disabled] {
  background: #E6ECF5;
  color: #8B9CB5;
  box-shadow: none;
  cursor: default;
}

.nb-upsell-nein {
  background: none;
  color: #56708F;
  font-size: 13.5px;
  font-weight: 500;
}

.nb-upsell-nein:hover { color: #0E2B57; }

/* Abgelaufen: das Angebot verschwindet, der Weg zur Buchung bleibt. */
.nb-upsell.nb-abgelaufen .nb-upsell-zonen,
.nb-upsell.nb-abgelaufen .nb-upsell-summe,
.nb-upsell.nb-abgelaufen .nb-upsell-ja { display: none; }

.nb-upsell.nb-abgelaufen .nb-upsell-nein {
  background: #1B5FC4;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 520px) {
  .nb-upsell { padding: 14px; align-items: flex-end; }
  .nb-upsell-blatt {
    padding: 22px 18px 20px;
    max-height: calc(100vh - 28px);
    border-radius: 18px !important;
  }
  .nb-upsell-titel { font-size: 22px; }
  .nb-upsell-zonen { margin: 0 -18px 12px; padding: 2px 18px 8px; grid-auto-columns: 96px; }
}

/* === 51. Helle koernige Flaechen statt Blau ===============================
 * Nach zwei Vorlagen von Jasper: fast weiss, starkes Korn, weiche blaue
 * Wolken, ein blasser warmer Fleck. Die Flaeche liegt jetzt unter der
 * Uhrzeit-Lage und unter der Zusammenfassung — beide waren satte blaue
 * Bloecke und damit die lautesten Stellen im Funnel.
 *
 * Mit dem hellen Grund dreht sich die Schrift: dunkel statt weiss. Die
 * Kacheln darauf sind Glas im hellen Sinn — durchscheinendes Weiss mit einer
 * hellen Kante, nicht der weisse Block von vorher.
 *
 * design/flaechen/hell-ruhig.webp und mittel-ruhig.webp,
 * scripts/flaechen_erzeugen.cjs
 * ========================================================================== */

/* --- 51.1 Die Uhrzeit-Lage ---------------------------------------------- */
/* Eine ruhige Flaeche mit einem einzigen weichen Schwung, nicht die
   wolkige: kleinteilige Flecken wirken auf einer Flaeche dieser Groesse
   unruhig. Und eine Spur tiefer als das erste Blau, sonst hebt sich die Lage
   nicht vom weissen Blatt darueber ab. */
body.nb-zeit .nb-teil[data-nb-teil="zeit"],
body.nb-zeit .bw-card .cal-slot-row > .slot-reveal {
  background-color: #C9DCF1;
  background-image: url("/newbooking/design/flaechen/mittel-ruhig.webp");
  color: var(--nb-tinte);
}

body.nb-zeit .nb-teil[data-nb-teil="zeit"]:hover { background-color: #BED5EE; }

body.nb-zeit .nb-teil[data-nb-teil="zeit"] .nb-teil-symbol { background: #1B5FC4; }
body.nb-zeit .nb-teil[data-nb-teil="zeit"] .nb-teil-winkel { background: #56708F; }
body.nb-zeit .nb-teil[data-nb-teil="zeit"][aria-expanded="true"] .nb-teil-symbol { background: #1B5FC4; }
body.nb-zeit .nb-teil[data-nb-teil="zeit"] .nb-teil-label { color: #3A5480; }
body.nb-zeit .nb-teil[data-nb-teil="zeit"] .nb-teil-wert { color: #0E2B57; }
body.nb-zeit .nb-teil[data-nb-teil="zeit"] .nb-teil-wert[data-nb-leer="1"] { color: #7089AB; }
body.nb-zeit .nb-teil[data-nb-teil="zeit"][disabled] .nb-teil-symbol,
body.nb-zeit .nb-teil[data-nb-teil="zeit"][disabled] .nb-teil-winkel { background: #A2B4CE; }
body.nb-zeit .nb-teil[data-nb-teil="zeit"][disabled] .nb-teil-label { color: #7089AB; }

/* Der Schatten nach oben wird leichter: auf hellem Grund traegt schon die
   Rundung, ein tiefer Schatten waere Dreck. */
body.nb-zeit .nb-teil[data-nb-teil="zeit"] {
  box-shadow: 0 -2px 8px -4px #0e2b5726, 0 -12px 28px -18px #0e2b5745;
}

/* --- 51.2 Glas auf hellem Grund -----------------------------------------
 * Nicht weisse Bloecke, sondern durchscheinendes Weiss mit einer hellen
 * Kante: die Flaeche darunter bleibt sichtbar, die Kachel liegt darauf.
 * ---------------------------------------------------------------------- */
body.nb-zeit .slotstaff-head {
  background: #ffffff85;
  box-shadow: inset 0 0 0 1px #ffffffc4, 0 1px 2px #0e2b570f;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}

body.nb-zeit .slotstaff-head-name { color: #0E2B57; }
body.nb-zeit .slotstaff-head-room { color: #56708F; }
body.nb-zeit .slotstaff-avatar { box-shadow: 0 0 0 1.5px #ffffffe0, 0 1px 3px #0e2b5726; }

body.nb-zeit .slot-btn {
  background: #ffffff7a;
  box-shadow: inset 0 0 0 1px #ffffffcc, inset 0 1px 0 #ffffff, 0 1px 2px #0e2b5714;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: #10284E;
}

body.nb-zeit .slot-btn:hover {
  background: #ffffffbd;
  color: #1B5FC4;
  box-shadow: inset 0 0 0 1px #ffffff, 0 3px 10px -4px #0e2b5738;
}

body.nb-zeit .slot-btn .nb-zeit { color: inherit; }

body.nb-zeit .slot-btn.nb-slot-aus,
body.nb-zeit .slot-btn[disabled] {
  background: #ffffff3d;
  box-shadow: inset 0 0 0 1px #ffffff7a;
  color: #8DA0BC;
}

body.nb-zeit .slot-header { color: #56708F; }

/* --- 51.3 Die Zusammenfassung ------------------------------------------- */
.bw-card .summary-card {
  background:
    url("/newbooking/design/flaechen/hell-ruhig.webp") center / cover no-repeat,
    #EDF3FB !important;
  box-shadow: 0 1px 3px #0e2b5714, 0 18px 40px -24px #0e2b5766;
  color: var(--nb-tinte);
}

.bw-card .summary-card .summary-svc { color: #0E2B57; }
.bw-card .summary-card .summary-loc { color: #3A5480; }
.bw-card .summary-card .summary-loc svg { color: #1B5FC4; }
.bw-card .summary-card .summary-date { color: #3A5480; }

.bw-card .summary-card .nb-zf-zonen li { color: #17325C; }
.bw-card .summary-card .nb-zf-zonen li::before { background: #1B5FC4; }

.bw-card .summary-card .summary-price { border-top-color: #0e2b5726; }
.bw-card .summary-card .summary-price-now { color: #0E2B57; }
.bw-card .summary-card .summary-price-was { color: #8195B2; }
.bw-card .summary-card .summary-price > span:not([class]),
.bw-card .summary-card .summary-price-total,
.bw-card .summary-card .summary-price-note { color: #56708F; }

/* Auf hellem Grund traegt das Schild wieder Gruen auf hellem Gruen — auf Blau
   waere daraus ein Giftgruen geworden, deshalb stand es dort weiss. */
.bw-card .summary-card .nb-zf-spar {
  background: #DCF3E3;
  color: #15803D;
  box-shadow: inset 0 0 0 1px #15803d29;
}

/* === 52. Die Eingabefelder heben sich ab ===================================
 * Ohne den weissen Kasten des Funnels standen die Felder auf der hellen
 * Flaeche und waren kaum als Felder zu erkennen: heller Grund, heller Rand,
 * heller Inhalt. Jetzt sind sie weiss mit einer feinen Kante und einem
 * flachen Schatten — man sieht, wo man tippt.
 * ========================================================================== */

.bw-input,
.bw-card select,
.bw-card textarea {
  background: #fff;
  border: 1px solid #DCE7F6;
  box-shadow: 0 1px 2px #0e2b570f;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.bw-input:hover,
.bw-card select:hover { border-color: #C3D5EE; }

.bw-input:focus,
.bw-card select:focus,
.bw-card textarea:focus {
  border-color: #1B5FC4;
  box-shadow: 0 0 0 3px #1b5fc42b;
  outline: 0;
}

.bw-input::placeholder { color: #93A5BF; }


/* Die Karte in der linken Spalte darf die Spaltenbreite haben, nicht mehr. */
.bw-aside .nb-karte { max-width: 100%; margin-top: 16px; }

/* === 53. Der Vorkasse-Rabatt hat eine Bedingung ============================
 * Er gilt erst ab 300 € Buchungswert. Der Funnel sagt das nirgends. Die
 * Bedingung steht jetzt unter der Zeile; liegt die Buchung darunter, wird der
 * Weg gedaempft und die Zeile sagt "erst ab".
 * ========================================================================== */

.nb-zw-ab {
  display: block;
  margin-top: 2px;
  color: var(--nb-tinte-3);
  font-size: 11.5px;
  line-height: 1.35;
}

.nb-zw-option.nb-zw-zu-klein .nb-zw-ab { color: #C6423C; font-weight: 500; }
.nb-zw-option.nb-zw-zu-klein .nb-zw-spar { display: none; }
.nb-zw-option.nb-zw-zu-klein { opacity: .72; }

/* === 54. Das Angebot: Ausrichtung und Flaeche ==============================
 * Das Blatt lag flach auf Weiss und die Abstaende kamen aus drei Regeln.
 * Jetzt liegt darunter dieselbe ruhige Flaeche wie unter der Zusammenfassung,
 * und alle Abstaende haengen an einem Wert: aussen wie innen 24 px, auf dem
 * Telefon 18. Der Streifen mit den Zonen laeuft bis an beide Kanten und ist
 * genau um diesen Wert eingerueckt — so steht seine erste Kachel auf einer
 * Linie mit der Ueberschrift.
 * ========================================================================== */

.nb-upsell-blatt {
  --nb-up-rand: 24px;
  padding: var(--nb-up-rand);
  background:
    linear-gradient(180deg, #ffffffd1 0%, #ffffff8f 55%, #ffffffb8 100%),
    url("/newbooking/design/flaechen/hell-ruhig.webp") center / cover no-repeat,
    #F4F8FD;
  border-radius: 20px !important;
}

.nb-upsell-vor {
  margin: 0 0 5px;
  color: #56708F;
  font-size: 12.5px;
  letter-spacing: .02em;
}

.nb-upsell-titel { margin: 0 0 7px; }

.nb-upsell-text { margin: 0 0 16px; max-width: 40em; }

.nb-upsell-uhr {
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: #ffffffab;
  box-shadow: inset 0 0 0 1px #ffffffe0;
  border-radius: 12px !important;
}

.nb-upsell-uhr-text { line-height: 1.35; }

/* Bis an beide Kanten, dafuer genau um den Rand eingerueckt: die erste
   Kachel steht damit unter dem "S" der Ueberschrift. */
.nb-upsell-zonen {
  margin: 0 calc(-1 * var(--nb-up-rand)) 16px;
  padding: 2px var(--nb-up-rand) 10px;
  gap: 10px;
  grid-auto-columns: 112px;
}

.nb-upsell-zone {
  background: #ffffffa3;
  box-shadow: inset 0 0 0 1px #ffffffdb;
  padding-bottom: 10px;
}

.nb-upsell-zone:hover { background: #ffffffd6; }

.nb-upsell-zone.nb-an {
  background: #ffffff;
  box-shadow: inset 0 0 0 2px #1B5FC4, 0 2px 8px -2px #1b5fc45c;
}

.nb-upsell-name { margin: 9px 11px 0; }
.nb-upsell-wert { margin: 2px 11px 0; }

.nb-upsell-summe {
  margin: 0 0 18px;
  padding: 11px 14px;
  background: #ffffffab;
  box-shadow: inset 0 0 0 1px #ffffffe0;
  border-radius: 12px !important;
  line-height: 1.4;
}

.nb-upsell-knoepfe { gap: 10px; }

@media (max-width: 520px) {
  .nb-upsell { padding: 12px; }
  .nb-upsell-blatt { --nb-up-rand: 18px; border-radius: 20px !important; }
  .nb-upsell-zonen { grid-auto-columns: 100px; }
}

/* Ausgeblendet statt entfernt: React baut den Knoten sonst beim naechsten
   Rendern wieder auf und er blitzt kurz auf. */
.nb-weg { display: none !important; }

/* === 55. Damen und Herren ==================================================
 * Der Schalter traegt die Farbe der Fassung: Damen ein weicher Rosaverlauf,
 * Herren der Blauverlauf der Marke. Auf jeder Paketkarte steht ueber den
 * Zonensymbolen dasselbe noch einmal als Wort mit Zeichen — die Zonen heissen
 * bei Damen und Herren teils verschieden, und man soll sehen, welche Fassung
 * man liest.
 * ========================================================================== */

body.nb-pakete .pkg-genderbar .gratis-gender-btn.active {
  color: #fff;
  border-color: #0000;
}

/* Damen: der erste Knopf. Ein Rosaverlauf, kein Pink — die Marke bleibt
   ruhig. */
body.nb-pakete .pkg-genderbar .gratis-gender-btn:first-of-type.active {
  background: linear-gradient(135deg, #E88BB0 0%, #D4638F 100%);
  box-shadow: 0 1px 2px #d4638f2e, 0 8px 18px -10px #d4638fa8;
}

body.nb-pakete .pkg-genderbar .gratis-gender-btn:last-of-type.active {
  background: linear-gradient(135deg, #4A86DD 0%, #1B5FC4 100%);
  box-shadow: 0 1px 2px #1b5fc42e, 0 8px 18px -10px #1b5fc4a8;
}

/* --- Die Marke auf der Karte -------------------------------------------- */
.nb-geschlecht {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .005em;
  color: #C25C88;
}

.nb-geschlecht::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8.5' r='5.5' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 14v7M8.5 18h7' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8.5' r='5.5' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 14v7M8.5 18h7' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nb-geschlecht[data-nb-g="h"] {
  color: #2F6BC9;
}

.nb-geschlecht[data-nb-g="h"]::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='10' cy='14' r='5.5' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M14.5 9.5 20.5 3.5M16 3.5h4.5V8' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='10' cy='14' r='5.5' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M14.5 9.5 20.5 3.5M16 3.5h4.5V8' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Aufgeklappt liegt die Karte auf Blau; dort traegt die Marke Weiss. */
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-geschlecht,
body.nb-pakete .pkg-card.open:not(.pkg-card-gratis) .nb-geschlecht[data-nb-g="h"] { color: #ffffffd6; }

/* === 56. Das Angebot: Preis nach vorn, Kacheln mit Rand ====================
 * Der Streifen mit den Zonen lief bis an die Kante des Blattes; links fehlte
 * damit jeder Abstand. Er steht jetzt im Rand wie alles andere.
 *
 * Dazu ein Kopf, der die Zahl zeigt statt sie im Satz zu verstecken: 20 €,
 * daneben klein "je Sitzung" und der durchgestrichene Normalpreis.
 * ========================================================================== */

.nb-upsell-zonen {
  margin: 0 0 16px;
  padding: 2px 0 10px;
  scroll-padding-left: 0;
}

.nb-upsell-preis {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 8px;
}

.nb-upsell-preis-jetzt {
  color: #0E2B57;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}

.nb-upsell-preis-je {
  color: #3A5480;
  font-size: 13px;
  font-weight: 500;
}

.nb-upsell-preis-statt {
  color: #C6423C;
  font-size: 13.5px;
  font-weight: 600;
}

.nb-upsell-text { margin: 0 0 16px; color: #3A5480; }

/* Der Kopf bekommt oben etwas mehr Luft, damit die Zahl nicht an der Kante
   klebt. */
.nb-upsell-blatt { padding-top: calc(var(--nb-up-rand) + 2px); }

/* Auf den Gratis-Zonen steht dasselbe Zeichen, nur kleiner: die Karten sind
   halb so gross wie die Paketkarten. */
.nb-geschlecht-zone {
  margin-bottom: 2px;
  font-size: 10.5px;
}

.nb-geschlecht-zone::before { width: 12px; height: 12px; }

/* === 57. Die Naht in der Uhrzeit-Lage ======================================
 * Kopfzeile und Zeitenblock teilen sich eine Flaeche. Die Kopfzeile hat aber
 * seitlich eine Polsterung und der Block nicht — und ein Hintergrundbild
 * beginnt standardmaessig an der Polsterkante, nicht an der Elementkante.
 * Damit war das Bild in beiden verschieden breit und verschieden weit links:
 * genau die waagerechte Kante in der Mitte.
 *
 * `background-origin: border-box` legt beide auf dieselbe Kante. Der Versatz
 * nach oben ist dann exakt die Hoehe der Kopfzeile, die override.js misst.
 * ========================================================================== */

body.nb-zeit .nb-teil[data-nb-teil="zeit"],
body.nb-zeit .bw-card .cal-slot-row > .slot-reveal {
  background-origin: border-box;
  background-clip: border-box;
}

/* Der dazugebuchte Posten: eine Zeile in der Zusammenfassung, eine unter dem
   Buchungsknopf. Die Zahlen des Funnels bleiben unangetastet. */
/* Ohne eigene Linie: die Preiszeile darunter bringt ihre schon mit, und zwei
   Striche um eine Zeile herum schnueren sie ein. Der Abstand nach unten
   haelt sie von der Linie weg. */
.nb-upsell-posten {
  margin: 10px 0 12px;
  color: #17325C;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

.nb-upsell-posten::before {
  content: "+ ";
  color: #15803D;
}

.nb-upsell-neu {
  margin: 8px 0 0;
  color: #15803D;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* === 58. Der Zonen-Waehler ohne weisse Kaesten ============================
 * Der Waehler stand als weisser Kasten auf der hellen Flaeche, und darin noch
 * einmal weisse Kaesten um das Modell, die Regionen und die Zonen. Drei Lagen
 * Weiss uebereinander, jede mit eigener Kante.
 *
 * Jetzt traegt die Seitenflaeche den Waehler wie jeden anderen Schritt. Weiss
 * bleibt nur, wo es etwas bedeutet: auf den Zeilen, die man antippt.
 * ========================================================================== */

body.nb-pakete .mq-wrap {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
}

/* Der Schliessen-Knopf steht frei, nicht auf einem Plaettchen. */
body.nb-pakete .mq-x {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--nb-tinte-3);
}

body.nb-pakete .mq-x:hover { color: var(--nb-tinte); }

/* Die Umschalter Damen/Herren und Vorne/Hinten: keine weisse Flaeche, nur
   der gewaehlte Zustand traegt eine. */
body.nb-pakete .mq-seg {
  background: #ffffff8a !important;
  box-shadow: inset 0 0 0 1px #ffffffd6;
  border: 0 !important;
}

body.nb-pakete .mq-seg .on,
body.nb-pakete .mq-seg button.on {
  background: #fff !important;
  box-shadow: 0 1px 2px #0e2b5714;
}

/* Die Regionen und die Zonen darunter: durchscheinendes Weiss statt Block,
   wie die Kacheln in der Uhrzeit-Auswahl. */
body.nb-pakete .nb-region {
  background: #ffffff8a !important;
  box-shadow: inset 0 0 0 1px #ffffffd6, 0 1px 2px #0e2b570f;
  border: 0 !important;
}

body.nb-pakete .nb-region:hover { background: #ffffffd1 !important; }

body.nb-pakete .mq-zone {
  background: #ffffff8a !important;
  box-shadow: inset 0 0 0 1px #ffffffd6;
  border: 0 !important;
}

body.nb-pakete .mq-zone:hover { background: #ffffffd6 !important; }

/* Das Modell steht ohne Kasten auf der Flaeche. */
body.nb-pakete .mq-wrap > figure,
body.nb-pakete .mq-wrap > div:has(> img) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Die Zwischenzeile der Regionen stand in Versalien. Versalien lesen sich wie
   Geschrei; die Zeile traegt ihre Rolle ueber Groesse und Farbe. */
body.nb-pakete .mq-wrap h3,
body.nb-pakete .mq-wrap .mq-group-title,
body.nb-pakete .mq-wrap [class*="group"] {
  text-transform: none;
  letter-spacing: .01em;
}

/* === 59. Der Hinweis auf das Gratis-Studio ================================
 * Er stand als weisser Kasten neben der Ueberschrift und hat sie nach rechts
 * geschoben — auf dem Rechner sah der Schritt dadurch aus, als waere etwas
 * verrutscht. Jetzt ist es eine eigene Zeile ueber den Paketen, in derselben
 * Form wie alles andere: helle Flaeche, dunkle Schrift, der Knopf rechts
 * daneben statt darunter.
 * ========================================================================== */

body.nb-pakete .bw-gratis-hint {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 22px;
  width: 100%;
  margin: 0 0 16px;
  padding: 16px 20px;
  background: #ffffffb8;
  box-shadow: inset 0 0 0 1px #ffffffe0, 0 1px 2px #0e2b570f;
  border: 0;
  border-radius: 14px !important;
}

body.nb-pakete .bw-gratis-hint > *:first-child {
  grid-column: 1;
  color: #0E2B57;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}

body.nb-pakete .bw-gratis-hint > p {
  grid-column: 1;
  margin: 0;
  color: #3A5480;
  font-size: 13px;
  line-height: 1.45;
}

body.nb-pakete .bw-gratis-hint > button,
body.nb-pakete .bw-gratis-hint > a {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: auto;
  margin: 0;
  padding: 12px 18px;
  white-space: nowrap;
  border-radius: 8px !important;
}

@media (max-width: 640px) {
  body.nb-pakete .bw-gratis-hint {
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }
  body.nb-pakete .bw-gratis-hint > button,
  body.nb-pakete .bw-gratis-hint > a {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: 4px;
  }
}

/* === 60. Die Bestaetigung wird ruhig ======================================
 * Der Kopf der Bordkarte lag auf einem abgedunkelten Himmelfoto und war die
 * lauteste Flaeche im ganzen Funnel. Jetzt traegt er dieselbe ruhige Flaeche
 * wie die Uhrzeit-Auswahl, und die Schrift dreht auf dunkel.
 *
 * Nebenbei loest das eine Regel ein, die hier verletzt war: hinter Text
 * gehoert kein Foto, sondern eine Verlaufsflaeche.
 * ========================================================================== */

.nb-bk-kopf {
  color: var(--nb-tinte);
  background:
    url("/newbooking/design/flaechen/mittel-ruhig.webp") center / cover no-repeat,
    #C9DCF1;
}

.nb-bk-marke { color: #2F6BC9; }
.nb-bk-marke::before { background: #2F6BC9; }

.nb-bk-titel { color: #0E2B57; }
.nb-bk-untertitel { color: #3A5480; }
.nb-bk-kopf .nb-bk-klein { color: #56708F; }

/* Die Perforation und die Kerben trennen zwei helle Flaechen; die dunklen
   Kerben von vorher waren fuer einen dunklen Kopf gedacht. */
.nb-bk-riss { border-top-color: #0e2b5726; }
.nb-bk-kerbe-links,
.nb-bk-kerbe-rechts { background: #EDF3FB; }

/* Die Wege darunter: helle Kacheln statt Farbblöcke. */
.nb-bk-weg {
  background: #ffffffc4;
  box-shadow: inset 0 0 0 1px #ffffffe0, 0 1px 2px #0e2b570f;
  border: 0;
}

.nb-bk-weg:hover { background: #ffffff; box-shadow: inset 0 0 0 1px #ffffff, 0 3px 10px -4px #0e2b5738; }

/* === 61. Zwei Fehler aus der Durchsicht ===================================
 * 61.1 Die Ueberschrift der Gratis-Karte sprang beim Aufklappen nach links
 *      oben. Zugeklappt sitzt sie im Knopf (Karte 10 px, Knopf 22/20),
 *      aufgeklappt stand sie ohne Rand an der Kante. Jetzt an derselben
 *      Stelle — ein Sprung darf dort nicht passieren.
 * 61.2 Das Zeichen Damen/Herren auf den Gratis-Zonen war weiss auf weiss:
 *      die Regel fuer die aufgeklappte Paketkarte griff auch auf der
 *      Gratis-Karte, deren Kacheln aber hell sind.
 * ========================================================================== */

.pkg-card-gratis .nb-gratis-titel { margin: 20px 22px 16px; }

@media (max-width: 700px) {
  .pkg-card-gratis .nb-gratis-titel { margin: 16px 16px 14px; }
}

body.nb-pakete .pkg-card.open .nb-geschlecht-zone,
body.nb-pakete .pkg-card.open .nb-geschlecht-zone[data-nb-g="h"] { color: #C25C88; }

body.nb-pakete .pkg-card.open .nb-geschlecht-zone[data-nb-g="h"] { color: #2F6BC9; }

/* === 62. Die Kante in der Uhrzeit-Lage, endgueltig ========================
 * Die Flaeche wurde auf die Breite gezogen und behielt ihr Seitenverhaeltnis.
 * Damit war sie rund 250 px hoch — der Zeitenblock ist hoeher, und dort, wo
 * das Bild endete, stand die Grundfarbe. Das war die waagerechte Kante.
 *
 * Jetzt wird die Flaeche auf die Hoehe beider Teile gezogen
 * (`--nb-zeit-hoehe`, von override.js gemessen), der Zeitenblock schiebt sie
 * um die Hoehe der Kopfzeile nach oben. Beide zeigen damit einen Ausschnitt
 * derselben, durchgehenden Flaeche.
 * ========================================================================== */

body.nb-zeit .nb-teil[data-nb-teil="zeit"],
body.nb-zeit .bw-card .cal-slot-row > .slot-reveal {
  background-size: 100% var(--nb-zeit-hoehe, 400px);
}

/* === 63. Die Bestaetigung: lesbar auf hellem Grund =========================
 * Der Kopf trug weisse Schrift, weil er auf einem dunklen Bild lag. Mit der
 * ruhigen hellen Flaeche darunter war davon nichts mehr zu lesen. Hier steht
 * alles, was im Kopf haengt, in dunklen Toenen.
 *
 * Die Perforation faellt weg: sie war die Naht zwischen dunklem Kopf und
 * hellem Rumpf. Zwischen zwei hellen Flaechen ist sie ein gestrichelter
 * Strich ohne Aufgabe.
 *
 * Und der grosse Weg ("Einer Freundin eine Zone schenken") war weiss auf
 * weiss: seine Flaeche kam aus Abschnitt 60, seine Schrift noch aus der
 * blauen Fassung.
 * ========================================================================== */

.nb-bk-kopf .nb-bk-label { color: #56708F; }
.nb-bk-kopf .nb-bk-wert { color: #0E2B57; }
.nb-bk-kopf .nb-bk-klein { color: #56708F; }
.nb-bk-strecke { color: #3A5480; }
.nb-bk-strich { background: #0e2b573d; }

/* Ohne Naht keine Perforation. */
.nb-bk-riss,
.nb-bk-kerbe,
.nb-bk-kerbe-links,
.nb-bk-kerbe-rechts { display: none !important; }

/* Der grosse Weg bleibt der erste, traegt die Farbe aber im Zeichen statt in
   der ganzen Flaeche. */
.nb-bk-weg-gross {
  color: #0E2B57;
  background: #ffffffdb;
  box-shadow: inset 0 0 0 1px #1b5fc43d, 0 2px 6px -2px #1b5fc42e;
}

.nb-bk-weg-gross:hover {
  background: #fff;
  box-shadow: inset 0 0 0 1px #1b5fc47a, 0 4px 12px -4px #1b5fc45c;
}

.nb-bk-weg-gross .nb-bk-weg-titel { color: #0E2B57; }
.nb-bk-weg-gross .nb-bk-weg-hinweis,
.nb-bk-weg-gross .nb-bk-weg-text { color: #3A5480; }
.nb-bk-weg-gross .nb-bk-weg-symbol { background: #1B5FC4; }
.nb-bk-weg-gross .nb-bk-weg-winkel { background: #1B5FC4; }

/* === 64. Die Bestaetigung als Stapel von Kaesten ==========================
 * Der Kopf steckte in einer Huelle mit 20 px Rundung und war damit anders
 * gerundet als die Kacheln darunter. Jetzt ist er ein Kasten wie die anderen:
 * 12 px, eigener Schatten, 10 px Abstand nach unten. Die Huelle traegt keine
 * Form mehr, sie haelt nur noch zusammen.
 * ========================================================================== */

body.nb-fertig .bw-card {
  overflow: visible;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none;
}

.nb-bk-kopf {
  margin-bottom: 10px;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px #0e2b5714, 0 10px 26px -18px #0e2b5766;
}

/* "Termin bestaetigt" mit dem Haken stand in der Markenfarbe. Auf der hellen
   Flaeche ist Dunkel der ruhigere und besser lesbare Ton. */
.nb-bk-marke { color: var(--nb-tinte); }
.nb-bk-marke::before { background: var(--nb-tinte); }

/* Die Angaben darunter bekommen denselben Kasten wie der Kopf und die
   Kacheln, sonst steht der Block ohne Form auf der Flaeche. */
.nb-bk-daten {
  margin-bottom: 10px;
  padding: 16px 18px;
  background: #ffffffc4;
  box-shadow: inset 0 0 0 1px #ffffffe0, 0 1px 2px #0e2b570f;
  border-radius: 12px !important;
}

/* === 65. Die Lightbox von Belledox faellt weg =============================
 * Nach der Buchung legte sich eine Lichtbox ueber den Schirm und fragte nach
 * Interesse an einer Faltenbehandlung. Der Moment gehoert der Bestaetigung:
 * der Termin steht gerade, und eine fremde Frage darueber nimmt ihm die Ruhe.
 *
 * Die Anzeige am Fuss der Bestaetigung bleibt — sie steht neben dem Inhalt
 * und haelt niemanden auf.
 *
 * Fuer Julian: die Lichtbox gehoert aus der Ansicht, nicht ausgeblendet.
 * ========================================================================== */

.bx-ov { display: none !important; }

/* === 68. Uhrzeiten ohne Kante, Zurueck als Zeile ==========================
 * Die Uhrzeit-Kacheln trugen einen hellen Ring. Auf der ruhigen Flaeche ist
 * das eine Kante zu viel: die Fuellung allein sagt schon, dass man hier
 * tippt.
 *
 * Der Weg zurueck war auf den spaeteren Schritten ein Knopf mit Rahmen, auf
 * den ersten eine Zeile mit Winkel. Jetzt ueberall dasselbe: Winkel, Wort,
 * linksbuendig, kein Kasten.
 * ========================================================================== */

body.nb-zeit .slot-btn {
  box-shadow: none;
  background: #ffffff8a;
}

body.nb-zeit .slot-btn:hover {
  box-shadow: none;
  background: #ffffffd6;
}

body.nb-zeit .slot-btn.nb-slot-aus,
body.nb-zeit .slot-btn[disabled] {
  box-shadow: none;
  background: #ffffff42;
}

.bw-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 6px 0;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--nb-tinte-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.bw-back:hover { background: none !important; color: var(--nb-tinte); }

.bw-back-icon {
  width: 15px;
  height: 15px;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit;
}

.bw-back-icon svg { width: 15px; height: 15px; }

/* === 69. Kein Aufblitzen des alten Designs beim Sprachwechsel ============
 * Stylesheet und Skript der Kopie stehen am Ende des Rumpfs; React ist mit
 * seinem eigenen Schirm also schon fertig, bevor hier etwas greift. Beim
 * Sprachwechsel laedt die Seite neu, und fuer einen Wimpernschlag stand das
 * alte Design mit den Ortsfotos da.
 *
 * Der Funnel bleibt deshalb unsichtbar, bis das Skript einmal ueber ihn
 * gelaufen ist und `nb-bereit` gesetzt hat. Der Ladeschirm der Vorlage
 * bleibt sichtbar, es entsteht also keine leere Seite. Fuer den Fall, dass
 * das Skript gar nicht kommt, zeigt ein Wecker im Skript nach 1,8 s
 * trotzdem — und ohne Skript greift diese Regel ohnehin nie, weil sie im
 * selben Stylesheet steht.
 * ===================================================================== */

html:not(.nb-bereit) .bw-page {
  opacity: 0 !important;
}

/* Kein Einblenden: React baut den Schirm bei jedem Schritt neu, eine
   Animation liefe dann jedes Mal von vorn und saehe aus wie ein Flackern. */
html.nb-bereit .bw-page {
  opacity: 1;
}

/* === 70. Listenpreis neben der Summe der Zahlwege ========================
 * Neben "981 €" steht jetzt, was dieselbe Behandlung als einzelne Sitzungen
 * kostete ("statt 2.780 €"). Erst dadurch hat die Summe einen Massstab.
 * Dieselbe Farbe und dieselbe Handschrift wie der Streichpreis auf der
 * Paketkarte, nur kleiner — hier ist es die zweite Zahl, nicht die erste.
 * ===================================================================== */

.nb-zw-statt {
  display: block;
  color: #C6423C;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  margin-top: 1px;
}

/* === 71. Streichpreise: weinrot mit feinem, handgezogenem Strich =========
 * Ein gerader `line-through` sieht nach Tabelle aus. Der Strich ist deshalb
 * eine feine, leicht schwankende Diagonale — dieselbe Handschrift wie die
 * Pfeile und der Streichpreis auf der aufgeklappten Paketkarte, nur duenner,
 * weil hier die zweite Zahl steht und nicht die erste.
 * ===================================================================== */

.nb-zw-statt-wert,
.nb-statt-klein,
.nb-upsell-wert,
.nb-upsell-preis-statt {
  color: #9B2233;
  text-decoration: none;
}

/* Nur die Zahl traegt den Strich, das Wort bleibt frei. */
.nb-zw-statt-wert .nb-statt-zahl,
.nb-statt-klein .nb-statt-zahl,
.nb-upsell-wert .nb-statt-zahl,
.nb-upsell-preis-statt .nb-statt-zahl {
  display: inline-block;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M2.5 16.4c14-1.4 30-3.4 46-5.1 17-1.8 35-3.6 51-4.2' stroke='%239B2233' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 0 3px 2px;
}

.nb-zw-statt {
  display: block;
  text-align: right;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin-top: 2px;
}

/* Im Zonenbaukasten steht der Streichpreis hinter dem Preis in derselben
   Zeile und braucht deshalb Luft davor. */
.nb-statt-klein {
  margin-left: 7px;
  font-size: .88em;
  font-weight: 700;
  white-space: nowrap;
}

.nb-stufe-p .nb-statt-klein {
  display: inline-block;
  margin-left: 6px;
}

/* === 72. Die Leiste des Zonenbaukastens ================================
 * Sie lag als weisser Verlauf ueber dem Inhalt: oben durchsichtig, unten
 * weiss. Auf dem Telefon zog sich daraus ein milchiger Schleier ueber das
 * halbe Modell. Stattdessen eine richtige Leiste — eine Flaeche mit
 * Haarlinie und weichem Schatten, so wie die uebrigen Leisten im Funnel.
 * ===================================================================== */

.mq-wrap .mq-bar {
  background: rgba(255, 255, 255, .93) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(23, 58, 110, .10);
  box-shadow: 0 -10px 26px rgba(16, 42, 86, .08);
}

/* === 73. Preis je Sitzung in einer Zeile ================================
 * "98,10 €" und "pro Sitzung" standen untereinander, und dahinter stand noch
 * einmal der Preis ohne Rabatt. Zwei Zeilen fuer eine Angabe, und die zweite
 * Zahl gehoerte gar nicht zu diesem Weg. Jetzt steht beides nebeneinander in
 * einer Zeile.
 * ===================================================================== */

.bw-paychoice .nb-zw-rechts .nb-zw-je + span:not(.nb-zw-gesamt):not(.nb-zw-statt) {
  margin-left: 4px;
}

.bw-paychoice .nb-zw-rechts:has(.nb-zw-gesamt) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  column-gap: 0;
  row-gap: 1px;
}

/* Summe und Streichpreis stehen je fuer sich, Preis und Einheit teilen sich
   die letzte Zeile. */
.bw-paychoice .nb-zw-rechts:has(.nb-zw-gesamt) .nb-zw-gesamt,
.bw-paychoice .nb-zw-rechts:has(.nb-zw-gesamt) .nb-zw-statt {
  flex: 0 0 100%;
  text-align: right;
}

.nb-zw-statt-wert {
  display: inline-block;
}

/* === 74. Zustimmung vor dem Buchen ======================================
 * Ein Haken ueber dem gruenen Knopf: AGB und Datenschutz sind verlinkt und
 * gehen in einem neuen Fenster auf, damit die begonnene Buchung stehen
 * bleibt. Ohne Haken bleibt der Knopf sichtbar, aber der Klick laeuft ins
 * Leere und der Kasten blinkt einmal auf — ein ausgegrauter Knopf sagt nicht,
 * warum er nicht geht.
 * ===================================================================== */

/* Kein eigener Kasten mehr: die Zeile ist der obere Teil des gruenen
   Knopfs — gleiche Breite, oben gerundet, unten geht sie ohne Kante in den
   Knopf ueber, der seine oberen Ecken abgibt. Ein Kasten ueber einem Kasten
   ueber einem Kasten war zu viel. */
.nb-agb {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 10px 14px 9px;
  border-radius: 12px 12px 0 0;
  background: #E3F2E9;
  border: 0;
  box-shadow: inset 0 0 0 1px #BFE0CE;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}

.nb-agb + .bw-paychoice-pay,
.nb-agb + .bw-cta-book,
.nb-agb + .bw-express-cta {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  margin-top: 0 !important;
}

.nb-agb-haken {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--brand, #1B5FC4);
  cursor: pointer;
}

.nb-agb-text {
  font-size: 12px;
  line-height: 1.45;
  color: #1F4A33;
}

.nb-agb-text a {
  color: #14653A;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nb-agb-haken { accent-color: #157A45; }

/* Der Knopf bleibt sichtbar, ist aber erkennbar noch nicht dran. */
body.nb-agb-offen .bw-paychoice-pay,
body.nb-agb-offen .bw-cta-book,
body.nb-agb-offen .bw-express-cta {
  opacity: .55;
}

.nb-agb-fehlt {
  animation: nb-agb-pochen .5s ease-out;
  box-shadow: inset 0 0 0 1px #C6423C;
  background: #FBE9E7;
}

@keyframes nb-agb-pochen {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nb-agb-fehlt { animation: none; }
}

/* === 75. Paketkarte als Ticket ==========================================
 * Vorbild ist eine Fahrkarte: eine weisse Karte mit zwei Halbkreis-Kerben
 * an den Seiten, dazu eine gestrichelte Stanzlinie. Drei Griffe:
 *
 *   1. Das Bild laeuft bis an die Kanten, wie der Aufdruck einer Fahrkarte.
 *   2. Die Kerben sitzen im weissen Teil, auf Hoehe der Stanzlinie unter den
 *      Zonen-Symbolen — Abriss und Kerben auf einer Hoehe, wie bei einer
 *      Fahrkarte. (Erst sassen sie in der Naht zwischen Bild und Weiss;
 *      Jasper wollte sie im Weissen.)
 *      Sie sind aus der Karte ausgeschnitten, nicht aufgemalt: eine Maske
 *      mit zwei Kreisen. Aufgemalt (eine Scheibe in Hintergrundfarbe)
 *      stimmte die Farbe nie mit dem koernigen Verlauf dahinter ueberein.
 *      Der Schatten der Karte bleibt: die Maske ist auf jeder Seite 40 px
 *      groesser als die Karte und wird nicht auf sie beschnitten
 *      (mask-clip: no-clip). Kann ein Browser das nicht, gibt es keine
 *      Kerben — aber auch keinen abgeschnittenen Schatten.
 *      Wo die Linie liegt, misst override.js (kerbenSetzen) und schreibt es
 *      als --nb-kerbe-y an die Karte; sie haengt an der Zahl der Namens-
 *      zeilen, und das kann ein Stylesheet nicht wissen.
 *   3. Die Stanzlinie selbst ist gestrichelt und eingestanzt: ein dunkler
 *      Strich, direkt darunter ein heller, beide laufen an den Enden aus.
 *
 * Nur auf zugeklappten Karten. Aufgeklappt ist die Karte blau und das Bild
 * steht links — dort gibt es keine Naht, in die eine Kerbe gehoert.
 *
 * Fuer Julian: im Original waere das ein Bauteil "TicketCard" mit
 * Bildhoehe aus dem Layout; die Messung im Skript entfaellt dann.
 * ===================================================================== */

body.nb-pakete .pkg-card:not(.open):not(.pkg-card-gratis) {
  --nb-karte-rand: 7px;
  --nb-karte-radius: 20px;
  --nb-kerbe-r: 9px;
  --nb-kerbe-y: 330px;   /* Vorgabe; das Skript misst nach */
}

@media (max-width: 560px) {
  body.nb-pakete .pkg-card:not(.open):not(.pkg-card-gratis) {
    --nb-karte-rand: 6px;
    --nb-karte-radius: 16px;
    --nb-kerbe-r: 8px;
  }
}

/* 1. Das Bild bis an die Kanten */
body.nb-pakete .pkg-card:not(.open):not(.pkg-card-gratis) .nb-galerie {
  margin: calc(-1 * var(--nb-karte-rand)) calc(-1 * var(--nb-karte-rand)) 0;
  border-radius: var(--nb-karte-radius) var(--nb-karte-radius) 0 0 !important;
}

/* Die weisse Ecke oben rechts folgt dem Radius der Karte, nicht mehr dem
   des eingerueckten Bildes. */
body.nb-pakete .pkg-card:not(.open):not(.pkg-card-gratis) .nb-ecke {
  border-radius: 0 var(--nb-karte-radius) 0 14px !important;
}

/* 2. Die Kerben */
@supports (mask-clip: no-clip) and (mask-composite: intersect) {
  body.nb-pakete .pkg-card:not(.open):not(.pkg-card-gratis) {
    mask-image:
      radial-gradient(circle at 40px calc(var(--nb-kerbe-y) + 40px),
        transparent calc(var(--nb-kerbe-r) - .5px), #000 calc(var(--nb-kerbe-r) + .5px)),
      radial-gradient(circle at calc(100% - 40px) calc(var(--nb-kerbe-y) + 40px),
        transparent calc(var(--nb-kerbe-r) - .5px), #000 calc(var(--nb-kerbe-r) + .5px));
    mask-size: calc(100% + 80px) calc(100% + 80px);
    mask-position: -40px -40px;
    mask-repeat: no-repeat;
    mask-clip: no-clip;
    mask-composite: intersect;
  }
}

/* 3. Die Stanzlinie unter den Zonen-Symbolen */
body.nb-pakete .pkg-card:not(.open):not(.pkg-card-gratis) .nb-zonen::after {
  height: 2px;
  background:
    repeating-linear-gradient(90deg, #0e2b573d 0 5px, transparent 5px 9px),
    repeating-linear-gradient(90deg, #ffffff 0 5px, transparent 5px 9px);
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 1px;
  background-repeat: no-repeat, no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}

/* === 76. Zonen-Symbole: flach, zweifarbig, aus einer Hand ================
 * Vorher Strich-Symbole aus einer Bibliothek. Jetzt je Zone ein eigenes,
 * flaches Symbol im Blau der Marke, erzeugt mit Nano Banana Pro nach einer
 * gemeinsamen Stilvorlage (scripts/zonenicons_erzeugen.cjs, freigestellt
 * von zonenicons_freistellen.py). Die Dateien liegen in design/zonenicons/
 * mit Alphakanal, 128 px.
 *
 * Eine Datei, zwei Verwendungen:
 *   - auf hellem Grund farbig als Bild (Symbolkette der zugeklappten Karte,
 *     Regionen im Zonenbaukasten);
 *   - auf dunklem Grund als Maske fuer eine weisse Silhouette (aufgeklappte
 *     Karte, Zusammenfassung). Dafuer reicht es, die Maskenvariable auf das
 *     neue Bild zu legen — alle Maskenregeln greifen dann von selbst.
 *
 * Fuer Julian: die Symbole gehoeren als Dateien ins Repo, die Zuordnung
 * Zone -> Datei in die Paketdaten (Feld `icon`).
 * ===================================================================== */

:root {
  --nb-zb-achseln: url("/newbooking/design/zonenicons/achseln.webp");
  --nb-zb-intim: url("/newbooking/design/zonenicons/intim.webp");
  --nb-zb-bikini: url("/newbooking/design/zonenicons/bikini.webp");
  --nb-zb-pofalte: url("/newbooking/design/zonenicons/pofalte.webp");
  --nb-zb-oberschenkel: url("/newbooking/design/zonenicons/oberschenkel.webp");
  --nb-zb-unterschenkel: url("/newbooking/design/zonenicons/unterschenkel.webp");
  --nb-zb-ganzkoerper: url("/newbooking/design/zonenicons/ganzkoerper.webp");
  --nb-zb-gesicht: url("/newbooking/design/zonenicons/gesicht.webp");
  --nb-zb-arme: url("/newbooking/design/zonenicons/arme.webp");
  --nb-zb-unbegrenzt: url("/newbooking/design/zonenicons/unbegrenzt.webp");
  --nb-zb-zone: url("/newbooking/design/zonenicons/zone.webp");
}

.nb-z-achseln       { --nb-zeichen: var(--nb-zb-achseln); --nb-zeichen-bild: var(--nb-zb-achseln); }
.nb-z-intim         { --nb-zeichen: var(--nb-zb-intim); --nb-zeichen-bild: var(--nb-zb-intim); }
.nb-z-bikini        { --nb-zeichen: var(--nb-zb-bikini); --nb-zeichen-bild: var(--nb-zb-bikini); }
.nb-z-pofalte       { --nb-zeichen: var(--nb-zb-pofalte); --nb-zeichen-bild: var(--nb-zb-pofalte); }
.nb-z-oberschenkel  { --nb-zeichen: var(--nb-zb-oberschenkel); --nb-zeichen-bild: var(--nb-zb-oberschenkel); }
.nb-z-unterschenkel { --nb-zeichen: var(--nb-zb-unterschenkel); --nb-zeichen-bild: var(--nb-zb-unterschenkel); }
.nb-z-ganzkoerper   { --nb-zeichen: var(--nb-zb-ganzkoerper); --nb-zeichen-bild: var(--nb-zb-ganzkoerper); }
.nb-z-gesicht       { --nb-zeichen: var(--nb-zb-gesicht); --nb-zeichen-bild: var(--nb-zb-gesicht); }
.nb-z-arme          { --nb-zeichen: var(--nb-zb-arme); --nb-zeichen-bild: var(--nb-zb-arme); }
.nb-z-unbegrenzt    { --nb-zeichen: var(--nb-zb-unbegrenzt); --nb-zeichen-bild: var(--nb-zb-unbegrenzt); }
.nb-z-zone          { --nb-zeichen: var(--nb-zb-zone); --nb-zeichen-bild: var(--nb-zb-zone); }

/* Farbig auf hellem Grund */
body.nb-pakete .pkg-card:not(.open) .nb-zonen .nb-zeichen,
.nb-region-symbol {
  background: var(--nb-zeichen-bild, var(--nb-zb-zone)) center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

body.nb-pakete .nb-zonen .nb-zeichen { width: 22px; height: 22px; }
.nb-region-symbol { width: 22px; height: 22px; }

/* Beim gedrueckten Regionen-Knopf gab die Fuellfarbe den Zustand an (die
   Regel setzt `background` als Kurzform und loeschte damit das Bild). Als
   Bild bleibt das Symbol, wie es ist; der Rahmen des Knopfs zeigt den
   Zustand. */
.nb-region[aria-pressed="true"] .nb-region-symbol {
  background: var(--nb-zeichen-bild, var(--nb-zb-zone)) center / contain no-repeat;
}

@media (max-width: 560px) {
  body.nb-pakete .nb-zonen .nb-zeichen { width: 20px; height: 20px; }
}

/* === 77. Der Zonenbaukasten: leichter, ohne weissen Kasten unten ==========
 * Jasper, 03.09.2026: die Leiste mit "0 € · Keine Zone gewaehlt · Weiter"
 * stand als harter weisser Kasten auf der hellen Flaeche; die ganze Seite
 * sollte leichter, moderner und eingaengiger werden.
 *
 * Was sich aendert:
 *   1. Die Leiste wird ein schwebendes dunkles Dock in der Tinte des Funnels,
 *      schmaler als der Inhalt, mit weichem Schatten. Kein weisser Block mehr,
 *      keine Haarlinie ueber die ganze Breite. Solange nichts gewaehlt ist,
 *      zeigt es keine "0 €", sondern nur den Hinweis (Klasse `nb-leer`, setzt
 *      override.js in mqStreichpreise).
 *   2. Das Modell steht frei auf der Flaeche: der weisse Kasten mit Rand und
 *      Verlauf um die Figur faellt weg (das PNG ist durchsichtig).
 *   3. Kopf, Umschalter, Regionen und Zonenzeilen bekommen etwas mehr Luft
 *      und eine klarere Auswahl: die gedrueckte Region traegt einen blauen
 *      Ring, die gewaehlte Zone ein helles Blau.
 * ========================================================================== */

/* --- 77.1 Das Dock ------------------------------------------------------ */
body.nb-pakete .mq-wrap .mq-bar {
  position: sticky;
  bottom: 14px;
  z-index: 5;
  width: min(100%, 540px);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 10px 10px 18px !important;
  gap: 14px;
  background: var(--nb-tinte) !important;
  color: #fff;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(14, 43, 87, .26), 0 2px 6px rgba(14, 43, 87, .16) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.nb-pakete .mq-wrap .mq-bar-info { gap: 1px; }

body.nb-pakete .mq-wrap .mq-bar-total {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Der Streichpreis steht auf dunklem Grund in gedaempftem Weiss, nicht in
   Weinrot (Abschnitt 71 gilt fuer helle Flaechen). */
body.nb-pakete .mq-wrap .mq-bar-total .nb-statt-klein,
body.nb-pakete .mq-wrap .mq-bar-total .nb-statt-klein * {
  color: rgba(255, 255, 255, .6) !important;
}

body.nb-pakete .mq-wrap .mq-bar-count {
  color: rgba(255, 255, 255, .64);
  font-size: 12px;
  max-width: none;
}

body.nb-pakete .mq-wrap .mq-bar-installment { color: rgba(255, 255, 255, .64) !important; }

/* Nichts gewaehlt: keine Null, nur die Zeile, die sagt, was zu tun ist. */
body.nb-pakete .mq-wrap .mq-bar.nb-leer .mq-bar-total { display: none; }

body.nb-pakete .mq-wrap .mq-bar.nb-leer .mq-bar-count {
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  white-space: normal;
  line-height: 1.35;
}

body.nb-pakete .mq-wrap .mq-apply {
  background: #fff !important;
  color: var(--nb-tinte) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 11px 22px !important;
  min-height: 44px;
  font-size: 14.5px;
  transition: background .14s var(--ease), transform .1s var(--ease);
}

body.nb-pakete .mq-wrap .mq-apply:hover:not(:disabled) { background: #eaf1fd !important; }

body.nb-pakete .mq-wrap .mq-apply:disabled {
  background: rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .5) !important;
}

/* Platz unter dem Inhalt, damit das Dock die letzte Zeile nicht deckt. Die
   Leiste des Originals zieht sich mit -80 px nach oben; das bleibt so, der
   Abstand entsteht im Raster. */
body.nb-pakete .mq-wrap .mq-body-grid { padding-bottom: 104px; }

/* --- 77.2 Das Modell ohne Kasten ---------------------------------------- */
body.nb-pakete .mq-wrap .mq-figbox {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Die Punkte lagen auf Weiss; auf der Flaeche brauchen sie den weissen Kern
   und einen etwas ruhigeren Ring. */
body.nb-pakete .mq-wrap .mq-spot::after {
  box-shadow: 0 0 0 1.5px rgba(14, 43, 87, .32), 0 1px 3px rgba(14, 43, 87, .18);
  opacity: .7;
}

body.nb-pakete .mq-wrap .mq-spot.nb-punkt-aktiv::after {
  opacity: 1;
  box-shadow: 0 0 0 2.5px var(--brand), 0 1px 4px rgba(14, 43, 87, .22);
}

body.nb-pakete .mq-wrap .mq-fig-hint {
  margin-top: 6px;
  color: var(--nb-tinte-3);
  font-size: 12.5px;
}

/* --- 77.3 Kopf und Umschalter ------------------------------------------- */
body.nb-pakete .mq-wrap .mq-head { margin-bottom: 2px; }

body.nb-pakete .mq-wrap .mq-eyebrow {
  margin-bottom: 6px;
  color: var(--nb-tinte-3);
  font-size: 12.5px;
  font-weight: 500;
}

body.nb-pakete .mq-wrap .mq-title {
  color: var(--nb-tinte);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
}

body.nb-pakete .mq-wrap .mq-toggles { margin: 16px 0 8px; gap: 10px; }

body.nb-pakete .mq-wrap .mq-seg {
  padding: 3px;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .5) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85);
}

body.nb-pakete .mq-wrap .mq-seg button {
  min-height: 36px;
  border-radius: 8px !important;
  color: var(--nb-tinte-3);
  font-weight: 500;
}

body.nb-pakete .mq-wrap .mq-seg button.on {
  color: var(--nb-tinte);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(14, 43, 87, .12);
}

/* --- 77.4 Regionen und Zonen -------------------------------------------- */
body.nb-pakete .nb-regionen { gap: 8px; margin-bottom: 16px; }

body.nb-pakete .nb-region {
  padding: 12px 13px;
  color: var(--nb-tinte-2);
  border-radius: 12px !important;
}

body.nb-pakete .nb-region[aria-pressed="true"] {
  background: #fff !important;
  color: var(--nb-tinte);
  box-shadow: inset 0 0 0 1.5px var(--brand), 0 2px 8px rgba(14, 43, 87, .08);
}

body.nb-pakete .nb-region-zahl {
  background: rgba(14, 43, 87, .06);
  color: var(--nb-tinte-3);
}

body.nb-pakete .nb-region[aria-pressed="true"] .nb-region-zahl {
  background: #dbe7fd;
  color: var(--brand-dark);
}

body.nb-pakete .mq-wrap .mq-group-h {
  margin: 0 0 8px 2px;
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--nb-tinte-3);
  font-size: 12.5px;
  font-weight: 500;
}

body.nb-pakete .mq-zone {
  margin-bottom: 7px;
  border-radius: 12px !important;
  transition: background .14s var(--ease), box-shadow .14s var(--ease);
}

body.nb-pakete .mq-zone.on {
  background: #fff !important;
  box-shadow: inset 0 0 0 1.5px var(--brand), 0 2px 8px rgba(14, 43, 87, .08);
}

body.nb-pakete .mq-wrap .mq-zone-btn { padding: 12px 14px !important; }
body.nb-pakete .mq-wrap .mq-zone-name { color: var(--nb-tinte); }

body.nb-pakete .mq-wrap .mq-check {
  background: rgba(14, 43, 87, .07);
  color: var(--nb-tinte-3);
  border-radius: 50% !important;
  font-size: 14px;
}

body.nb-pakete .mq-wrap .mq-zone.on .mq-check {
  background: var(--brand);
  color: #fff;
}

/* "Deine Auswahl" ohne Rand, wie die uebrigen Flaechen auf diesem Schritt. */
body.nb-pakete .nb-auswahl {
  border: 0;
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}

body.nb-pakete .nb-auswahl.leer {
  background: none;
  box-shadow: inset 0 0 0 1px rgba(14, 43, 87, .12);
}

body.nb-pakete .nb-auswahl-kopf { color: var(--nb-tinte); }
body.nb-pakete .nb-stufe { border-radius: 10px; }
body.nb-pakete .nb-chip { border-radius: 8px; }

/* --- 77.5 Telefon ------------------------------------------------------- */
@media (max-width: 720px) {
  body.nb-pakete .mq-wrap .mq-bar {
    bottom: 10px;
    padding: 9px 9px 9px 16px !important;
  }

  body.nb-pakete .mq-wrap .mq-title { font-size: 22px; }
  body.nb-pakete .mq-wrap .mq-body-grid { padding-bottom: 96px; }
}

/* --- 77.6 Rechner: "Deine Auswahl" bleibt in der rechten Spalte --------
 * Der Kasten lag ueber beide Spalten (`grid-column: 1 / -1`, Abschnitt 21).
 * Das Modell links klebt aber am oberen Rand (`position: sticky`) und stand
 * beim Scrollen samt Hinweiszeile mitten in der Preisleiter. In der rechten
 * Spalte liegt der Kasten unter den Zonen, das Modell kommt ihm nicht in
 * die Quere. */
@media (min-width: 721px) {
  /* Das Modell nimmt beide Rasterzeilen, sonst richtet sich die erste Zeile
     nach seiner Hoehe und unter der Zonenliste bleibt ein Loch von rund
     50 px, bevor "Deine Auswahl" beginnt. */
  body.nb-pakete .mq-wrap .mq-figure { grid-row: 1 / span 2; }
  body.nb-pakete .mq-wrap .nb-auswahl { grid-column: 2; grid-row: 2; margin-top: 0; }
  body.nb-pakete .nb-leiter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === 77. Bestaetigung: eine Karte statt vier Kaesten =====================
 * Kopf (blau), Perforation, Angaben, Knopf und Wege liegen jetzt in EINER
 * Karte mit einem Schatten. Die Angaben sind eine Liste mit weichen
 * Trennlinien statt dreier Spalten; Tag und Uhrzeit tragen ein Symbol;
 * "Meinen Termin bearbeiten" steht direkt unter den Angaben statt als
 * graue Zeile am Fuss; die drei Wege sind eine Zeile ohne Kaesten, durch
 * Haarlinien getrennt; der Geschenk-Streifen ist der Fuss der Karte.
 * ===================================================================== */

body.nb-fertig .done-wrap { position: relative; }

.nb-bk-karte {
  position: relative;
  margin: 0 0 14px;
  background: #fff;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 1px 2px #0e2b5714, 0 16px 36px -22px #0e2b5780;
}

.nb-bk-karte .nb-bk-kopf {
  margin: 0;
  border-radius: 0 !important;
  box-shadow: none;
  padding: 24px 22px 22px;
}

/* Symbol vor Tag und Uhrzeit, weiss auf dem Blau */
.nb-bk-feld {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
}
.nb-bk-feld-symbol {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  background: #ffffffd9;
  -webkit-mask: var(--nb-bk-symbol) center / 18px 18px no-repeat;
  mask: var(--nb-bk-symbol) center / 18px 18px no-repeat;
}
.nb-bk-feld:last-child { grid-template-columns: 1fr 18px; text-align: right; }
.nb-bk-feld:last-child .nb-bk-feld-symbol { grid-column: 2; }
.nb-bk-feld:last-child .nb-bk-label,
.nb-bk-feld:last-child .nb-bk-wert { grid-column: 1; }
.nb-bk-feld .nb-bk-label { margin-bottom: 1px; }

/* Perforation: die Kerben zeigen die Flaeche der Seite */
.nb-bk-karte .nb-bk-riss { height: 24px; }
.nb-bk-karte .nb-bk-kerbe { background: #eaf1fa; width: 12px; height: 24px; margin-top: -12px; }
.nb-bk-karte .nb-bk-kerbe-links  { border-radius: 0 12px 12px 0 !important; }
.nb-bk-karte .nb-bk-kerbe-rechts { border-radius: 12px 0 0 12px !important; }
.nb-bk-karte .nb-bk-riss::before { border-top: 1.5px dashed #d8e1ee; }

/* Angaben als Liste */
.nb-bk-karte .nb-bk-daten {
  display: block;
  margin: 0;
  padding: 2px 22px 4px;
  background: none;
  box-shadow: none;
  border-radius: 0 !important;
}
.nb-bk-karte .nb-bk-zeile {
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid #edf1f7;
}
.nb-bk-karte .nb-bk-zeile:first-child { border-top: 0; }
.nb-bk-karte .nb-bk-symbol {
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--brand, #1B5FC4);
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}
.nb-bk-karte .nb-bk-zeile .nb-bk-label { margin-bottom: 0; font-size: 10.5px; }
.nb-bk-karte .nb-bk-zeile-wert { font-size: 14px; }

/* Termin bearbeiten */
.nb-bk-bearbeiten {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 44px);
  margin: 8px 22px 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px !important;
  background: #EAF1FC;
  color: var(--brand-dark, #164A9E);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s var(--ease);
}
.nb-bk-bearbeiten:hover { background: #DFE9FA; }
.nb-bk-bearbeiten-symbol {
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--nb-i-stift) center / 17px 17px no-repeat;
  mask: var(--nb-i-stift) center / 17px 17px no-repeat;
}

/* Die drei Wege: eine Zeile, Haarlinien statt Kaesten */
.nb-bk-karte .nb-bk-wege { display: block; padding: 0; gap: 0; }
.nb-bk-karte .nb-bk-reihe {
  gap: 0;
  margin: 8px 22px 0;
  padding: 4px 0 10px;
  border-top: 1px solid #edf1f7;
}
.nb-bk-karte .nb-bk-weg-klein {
  border: 0;
  border-radius: 0 !important;
  background: none;
  padding: 12px 6px 6px;
  color: var(--ink-1);
}
.nb-bk-karte .nb-bk-weg-klein + .nb-bk-weg-klein { border-left: 1px solid #edf1f7; }
.nb-bk-karte .nb-bk-weg-klein:hover { background: none; color: var(--brand-dark, #164A9E); }
.nb-bk-karte .nb-bk-weg-klein .nb-bk-weg-symbol { background: var(--brand, #1B5FC4); }
.nb-bk-karte .nb-bk-weg-whatsapp { color: var(--ink-1); }
.nb-bk-karte .nb-bk-weg-whatsapp .nb-bk-weg-symbol { background: #1faa52; }

/* Der Geschenk-Streifen als Fuss der Karte */
.nb-bk-karte .nb-bk-weg-gross {
  border-radius: 0 !important;
  box-shadow: none;
  padding: 15px 22px;
  width: 100%;
}

/* Was der Funnel selbst unter die Karte setzt, ist in der Karte enthalten. */
body.nb-fertig .done-card,
body.nb-fertig .done-wrap > .bw-ghost { display: none !important; }

/* Abstand zu App-Block und Anzeige */
body.nb-fertig .nb-app { margin-top: 4px; }

/* === 78. Sprachwahl auf jedem Schritt ====================================
 * Kalender, Kontakt, Code und Bestaetigung hatten keine. Jetzt rechts in der
 * Zeile mit "zurueck", auf der Bestaetigung oben rechts auf der Karte.
 * ===================================================================== */
.nb-hat-sprachen { position: relative; }
.nb-hat-sprachen > .nb-sprachen {
  position: absolute;
  right: 0;
  top: -4px;
  z-index: 6;
}
.done-wrap.nb-hat-sprachen > .nb-sprachen { right: 12px; top: 12px; }

/* === 79. Bezahlseite: ein Umschalter und eine zusammengelegte Karte =======
 * Karte / PayPal waren zwei Knoepfe nebeneinander, die drei Zahlweisen drei
 * Kaesten untereinander — fuenf Kaesten fuer zwei Entscheidungen. Jetzt:
 *
 *   1. Karte / PayPal als Umschalter: eine flache Schale, darin zwei
 *      Flaechen, die gewaehlte liegt weiss und leicht erhaben obenauf. Das
 *      liest man als "entweder / oder", ohne es lesen zu muessen.
 *   2. Die drei Zahlweisen in EINER Karte, durch Haarlinien geteilt. Die
 *      gewaehlte hebt sich durch ihre Fuellung ab, nicht durch einen Rahmen.
 *
 * Die Reihenfolge (vorab, vor Ort, Raten) bleibt ueber `order` gedreht;
 * die Haarlinie sitzt deshalb an jedem Weg oben und faellt nur am ersten
 * im Markup weg — der ist auch der erste am Schirm.
 * ===================================================================== */

.bw-paymethods {
  display: flex !important;
  gap: 0 !important;
  padding: 4px;
  margin-bottom: 12px !important;
  background: #E7EEF8;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px #173a6e14;
}

.bw-paymethods > button,
.bw-paymethods > button:nth-child(2) {
  flex: 1 1 0;
  min-height: 38px;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink-2) !important;
  font-weight: 600 !important;
  transition: background .16s var(--ease), color .16s var(--ease),
              box-shadow .16s var(--ease);
}

.bw-paymethods > button:hover,
.bw-paymethods > button:nth-child(2):hover {
  background: #ffffff8c !important;
}

.bw-paymethods > button[aria-pressed="true"],
.bw-paymethods > button:nth-child(1)[aria-pressed="true"],
.bw-paymethods > button:nth-child(2)[aria-pressed="true"] {
  background: #fff !important;
  border: 0 !important;
  color: var(--ink-1) !important;
  box-shadow: 0 1px 2px #1b2b451a, 0 4px 12px -6px #1b2b4552 !important;
}

/* Die Marken bleiben: Stripe-Wort hinter "Karte", PayPal-Zeichen und
   dunkelblauer Schriftzug — aber ohne die gelbe Flaeche, im Umschalter
   sollen beide Seiten gleich wiegen. */
.bw-paymethods > button:nth-child(2)[aria-pressed="true"],
.bw-paymethods > button:nth-child(2) { color: #003087 !important; }

/* Die Zahlweisen als eine Karte */
.bw-paychoice > div:not([class]) {
  gap: 0;
  background: #fff;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px #1b2b450f, 0 10px 28px -16px #1b2b4547;
  overflow: hidden;
}

.nb-zw-option,
.bw-paychoice [role="radiogroup"] > button {
  border: 0 !important;
  border-top: 1px solid #edf1f7 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff;
}

.nb-zw-option:nth-child(1) { border-top: 0 !important; }

.nb-zw-option:hover { background: #f8fafe; }

.nb-zw-option[aria-checked="true"] {
  background: #EEF4FD;
  box-shadow: none !important;
}

.nb-zw-option:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* Etwas mehr Luft in der zusammengelegten Karte, die Rahmen fehlen ja. */
.nb-zw-option { padding: 15px 18px; }

@media (max-width: 480px) {
  .nb-zw-option { padding: 13px 14px; }
}

/* === 80. Zahlweisen: eingelassen statt umrandet ===========================
 * Zwei Reste aus der Vorlage schlugen durch, beide mit !important dort:
 * die gewaehlte Zahlweise trug oben eine duenne blaue Linie, und zwischen
 * den Wegen blieb ein Spalt von 8 px, in dem das Weiss der Karte als
 * heller Balken unter der gewaehlten stand. Beides hier hart ueberschrieben.
 *
 * Die gewaehlte Zahlweise ist jetzt eingelassen: eine etwas tiefere
 * Fuellung mit Innenschatten von oben, wie eine gedrueckte Taste. Das sagt
 * "hier wurde gedrueckt" — und damit auch, dass man die anderen druecken
 * kann. Kein Rahmen, keine Linie.
 * ===================================================================== */

.bw-paychoice > div:not([class]) { gap: 0 !important; }

.nb-zw-option,
.nb-zw-option[aria-checked="true"],
.bw-paychoice [role="radiogroup"] > button[aria-checked="true"] {
  border: 0 !important;
  border-top: 1px solid #edf1f7 !important;
  outline: none !important;
}

.nb-zw-option:nth-child(1),
.nb-zw-option:nth-child(1)[aria-checked="true"] { border-top: 0 !important; }

.nb-zw-option[aria-checked="true"],
.bw-paychoice [role="radiogroup"] > button[aria-checked="true"] {
  background: #E3ECF8 !important;
  box-shadow:
    inset 0 3px 8px #173a6e30,
    inset 0 1px 0 #173a6e24,
    inset 0 -1px 0 #ffffffcc !important;
}

/* Die Haarlinie des naechsten Wegs liegt auf der eingelassenen Flaeche auf
   und wuerde als heller Strich lesen — dort faellt sie weg. */
.nb-zw-option[aria-checked="true"] + .nb-zw-option { border-top-color: transparent !important; }

.nb-zw-option:not([aria-checked="true"]):hover { background: #f6f9fe !important; }
.nb-zw-option:not([aria-checked="true"]):active { background: #EEF3FB !important; }

.nb-zw-option:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--brand) !important;
}

/* === 81. Zahlweisen als drei Karten mit eingravierten Fugen; Zustimmung
 *        im gruenen Knopf =================================================
 * 1. Die drei Zahlweisen sind wieder als einzelne Karten lesbar — 3 px
 *    Radius, damit sie sich von allem abheben — und liegen mit 2 px Fuge
 *    aufeinander. Die Fuge ist der dunklere Grund des Traegers, darueber
 *    die weisse Oberkante der naechsten Karte: das liest sich als
 *    eingravierte Linie, ohne dass eine Linie gezeichnet wird.
 * 2. Die Zustimmung ist jetzt der obere Teil des gruenen Knopfs selbst:
 *    gleiche Farbe, gleiche Breite, weisse Schrift, weisser Haken. Ein
 *    Block statt zweier — und wer den Block sieht, sieht, wo er tippen
 *    muss. Ohne Haken ist die Knopfhaelfte leicht zurueckgenommen, mit
 *    Haken voll da.
 * ===================================================================== */

.bw-paychoice > div:not([class]) {
  gap: 2px !important;
  padding: 0;
  background: #D6E0EE;
  border-radius: 5px !important;
  overflow: hidden;
}

.nb-zw-option,
.nb-zw-option[aria-checked="true"],
.nb-zw-option:nth-child(1),
.nb-zw-option:nth-child(1)[aria-checked="true"],
.nb-zw-option[aria-checked="true"] + .nb-zw-option {
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 3px !important;
}

/* Weisse Oberkante: die helle Haelfte der Gravur. */
.nb-zw-option:not([aria-checked="true"]) {
  box-shadow: inset 0 1px 0 #ffffff !important;
}

.nb-zw-option[aria-checked="true"] {
  box-shadow:
    inset 0 3px 8px #173a6e30,
    inset 0 1px 0 #173a6e24,
    inset 0 -1px 0 #ffffffcc !important;
}

/* Die Zustimmung im Knopf */
.nb-agb {
  margin: 0;
  padding: 11px 14px 10px;
  border-radius: 4px 4px 0 0 !important;
  background: linear-gradient(135deg, #0E7F49 0%, #0B6E42 100%) !important;
  box-shadow: inset 0 -1px 0 #ffffff33;
  color: #fff;
  cursor: pointer;
}

.nb-agb:hover { background: linear-gradient(135deg, #10894f 0%, #0c7546 100%) !important; }

.nb-agb-text { color: #ffffffe6; font-size: 12.5px; }

.nb-agb-text a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #ffffff99;
  text-underline-offset: 2px;
}

.nb-agb-haken {
  width: 19px;
  height: 19px;
  margin-top: 0;
  accent-color: #fff;
  cursor: pointer;
}

/* Ohne Haken: die Knopfhaelfte zurueckgenommen, aber im selben Block. */
body.nb-agb-offen .bw-paychoice-pay,
body.nb-agb-offen .bw-cta-book,
body.nb-agb-offen .bw-express-cta {
  opacity: 1;
  filter: saturate(.55) brightness(1.12);
}

/* Fehlender Haken beim Klick: weisser Rahmen blinkt auf, kein Rot auf Gruen. */
.nb-agb-fehlt {
  animation: nb-agb-pochen .5s ease-out;
  box-shadow: inset 0 0 0 2px #ffffffd9, inset 0 -1px 0 #ffffff33;
  background: linear-gradient(135deg, #12945a 0%, #0E7F49 100%) !important;
}

/* Der Traeger (.bw-paychoice) setzt 10 px Luft zwischen seine Kinder; die
   Zustimmung zieht die Luft zum Knopf wieder ein, damit beide ein Block sind. */
.nb-agb { margin-bottom: -10px; position: relative; z-index: 1; }

/* === 82. Zahlweisen neu: drei Karten mit 3D-Symbol =======================
 * Nach Jaspers Vorlagen: weiche Pastellkarten, je eine eigene Farbwelt, und
 * vorn ein 3D-Gegenstand, der ueber den linken Rand hinausragt. Innen nur
 * noch drei Groessen: Titel, eine Zeile Erklaerung, der Betrag — vorher
 * standen dort sechs Groessen, vier Farben und zwei Schilder.
 *
 *   vorab  — Sparschwein, Mint     (sparen)
 *   vorort — Kartenterminal, Blau  (im Studio zahlen)
 *   raten  — Kalender, Lavendel    (in Raten)
 *
 * Die Symbole kommen aus scripts/zahlicons_erzeugen.cjs (Nano Banana Pro,
 * freigestellt mit BiRefNet), design/zahlicons/*.webp.
 * Diese Regeln loesen die Abschnitte 79 bis 81 fuer die Zahlweisen ab.
 * ===================================================================== */

.bw-paychoice,
.bw-paychoice > div:not([class]) { overflow: visible !important; }

.bw-paychoice > div:not([class]) {
  gap: 10px !important;
  padding: 0;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.nb-zw-vorab  { --nb-zw-ton: #E4F4EA; --nb-zw-ton-an: #D6EEDF; --nb-zw-tinte: #0F6B3A; --nb-zw-ring: #6FC393; }
.nb-zw-vorort { --nb-zw-ton: #E5EEFA; --nb-zw-ton-an: #D8E6F8; --nb-zw-tinte: #164A9E; --nb-zw-ring: #7FA9E8; }
.nb-zw-raten  { --nb-zw-ton: #ECE8F8; --nb-zw-ton-an: #E1DBF4; --nb-zw-tinte: #4A3A9C; --nb-zw-ring: #A99CE3; }

.nb-zw-option,
.nb-zw-option:nth-child(1),
.nb-zw-option[aria-checked="true"],
.nb-zw-option:nth-child(1)[aria-checked="true"],
.nb-zw-option[aria-checked="true"] + .nb-zw-option,
.bw-paychoice [role="radiogroup"] > button,
.bw-paychoice [role="radiogroup"] > button[aria-checked="true"] {
  grid-template-columns: 62px 1fr auto;
  gap: 14px;
  padding: 15px 18px 15px 12px !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 16px !important;
  overflow: visible;
  background: var(--nb-zw-ton, #fff) !important;
  box-shadow: none !important;
  filter: none;
}

.nb-zw-option:not([aria-checked="true"]):hover { background: var(--nb-zw-ton-an) !important; }

/* Gewaehlt: kraeftigerer Ton und ein Ring in der eigenen Farbe. */
.nb-zw-option[aria-checked="true"],
.bw-paychoice [role="radiogroup"] > button[aria-checked="true"] {
  background: var(--nb-zw-ton-an) !important;
  /* Ring 1 px statt 2 (Jasper, 04.09.2026: gewaehlte Karte duenner). */
  box-shadow: 0 0 0 1px var(--nb-zw-ring), 0 12px 28px -16px #1b2b4566 !important;
}

.nb-zw-option:focus-visible { box-shadow: 0 0 0 2px var(--nb-zw-tinte) !important; }

/* Der 3D-Gegenstand: groesser als seine Spalte, ragt links und oben ueber
   die Karte hinaus, mit weichem Schlagschatten auf der Karte. */
.nb-zw-3d {
  width: 92px;
  height: 92px;
  margin: -22px -16px -18px -30px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 10px 14px #14285026);
  transition: transform .2s var(--ease);
}
.nb-zw-option:hover .nb-zw-3d { transform: translateY(-2px) rotate(-2deg); }

/* Innen: Titel, eine Zeile, Betrag. Das alte Strich-Symbol faellt weg. */
.bw-paychoice .nb-zw-links { display: block; min-width: 0; }
.bw-paychoice .nb-zw-links .nb-zw-symbol { display: none !important; }

.bw-paychoice .nb-zw-links > :first-child {
  display: block;
  margin: 0 0 3px;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em;
  color: var(--nb-zw-tinte) !important;
}

.bw-paychoice .nb-zw-links > :not(:first-child) {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.45;
  color: var(--ink-2) !important;
}

.bw-paychoice .nb-zw-links > :not(:first-child) + :not(:first-child)::before {
  content: " · ";
  color: var(--ink-3);
}

/* "Du sparst 59,50 €" in der Farbe der Karte, ohne Schild */
.bw-paychoice .nb-zw-links .nb-zw-spar { color: var(--nb-zw-tinte) !important; font-weight: 650 !important; }
.bw-paychoice .nb-zw-links .nb-zw-ab { font-size: 11.5px !important; color: var(--ink-3) !important; }

/* Bargeld / EC-Karte: keine Schilder mehr, ein Wort neben dem anderen */
.nb-zw-mittel, .nb-zw-mittel-schild {
  display: inline !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  color: var(--ink-2) !important;
}
.nb-zw-mittel-schild + .nb-zw-mittel-schild::before { content: " · "; color: var(--ink-3); }
.nb-zw-mittel-symbol { display: none !important; }

/* Rechts: der Betrag in der Farbe der Karte, darunter klein der Rest */
.bw-paychoice .nb-zw-rechts { gap: 2px; }
.bw-paychoice .nb-zw-rechts .nb-zw-gesamt,
.bw-paychoice .nb-zw-rechts:not(:has(.nb-zw-gesamt)) .nb-zw-je {
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  color: var(--nb-zw-tinte) !important;
}
.bw-paychoice .nb-zw-option[aria-checked="true"] .nb-zw-gesamt { color: var(--nb-zw-tinte) !important; }
.bw-paychoice .nb-zw-rechts .nb-zw-statt { font-size: 11.5px; margin-top: 0; }
.bw-paychoice .nb-zw-rechts:has(.nb-zw-gesamt) .nb-zw-je,
.bw-paychoice .nb-zw-rechts > span:not(.nb-zw-gesamt):not(.nb-zw-je):not(.nb-zw-statt) {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
}

@media (max-width: 480px) {
  .nb-zw-option,
  .nb-zw-option[aria-checked="true"] { grid-template-columns: 50px 1fr auto; gap: 10px; padding: 13px 14px 13px 10px !important; }
  .nb-zw-3d { width: 74px; height: 74px; margin: -18px -14px -14px -24px; }
  .bw-paychoice .nb-zw-links > :first-child { font-size: 14px !important; }
  .bw-paychoice .nb-zw-rechts .nb-zw-gesamt,
  .bw-paychoice .nb-zw-rechts:not(:has(.nb-zw-gesamt)) .nb-zw-je { font-size: 18px !important; }
}

/* === 83. Zahlweisen: Texte aufgeraeumt, Ring um die Kontur, Handy ========
 * - Titel in einer Zeile ("Vorab bezahlen"), darunter genau eine Zeile:
 *   "Du sparst 59,50 €" / "Bar, EC- oder Kreditkarte im Studio" /
 *   "12 Monatsraten · 119 € je Sitzung". Die Bedingung "Gilt ab 300 €"
 *   steht klein als eigene Zeile darunter. Kein fuehrender Punkt mehr: bei
 *   "Vor Ort" war das erste Wort ausgeblendet und der Trennpunkt des
 *   zweiten blieb stehen.
 * - Gewaehlt laeuft der Ring auch um die Kontur des Symbols, das ueber die
 *   Karte hinausragt: vier Schlagschatten ohne Weichzeichnung in der
 *   Ringfarbe zeichnen die Silhouette nach, an der Kante trifft er auf den
 *   Ring der Karte.
 * - Auf dem Telefon ragt das Symbol weniger weit hinaus und die Karte hat
 *   innen mehr Luft; so klebt nichts am Bildschirmrand.
 * ===================================================================== */

/* Vorab: "10 % Vorkasse-Rabatt" faellt weg (steht schon rechts als Rabatt) */
.nb-zw-vorab .nb-zw-links > span:nth-child(2) { display: none !important; }
.nb-zw-vorab .nb-zw-links > .nb-zw-spar::before { content: none !important; }
.nb-zw-vorab .nb-zw-links > .nb-zw-ab {
  display: block !important;
  margin-top: 2px !important;
}
.nb-zw-vorab .nb-zw-links > .nb-zw-ab::before { content: none !important; }

/* Vor Ort: der eine Satz der Vorlage statt zweier Schilder */
.nb-zw-vorort .nb-zw-links > span:nth-child(2) { display: inline !important; }
.nb-zw-vorort .nb-zw-links > span:nth-child(2)::before { content: none !important; }
.nb-zw-vorort .nb-zw-mittel { display: none !important; }

/* Raten: das Schild "0 € Anzahlung" im Titel als ruhiger Text */
.nb-zw-raten .nb-zw-links > :first-child > span {
  display: inline !important;
  margin-left: 6px;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
}

/* Titel immer eine Zeile */
.bw-paychoice .nb-zw-links > :first-child { white-space: nowrap; }

/* Ring um die Kontur des Symbols */
.nb-zw-option[aria-checked="true"] .nb-zw-3d {
  filter:
    drop-shadow(2px 0 0 var(--nb-zw-ring)) drop-shadow(-2px 0 0 var(--nb-zw-ring))
    drop-shadow(0 2px 0 var(--nb-zw-ring)) drop-shadow(0 -2px 0 var(--nb-zw-ring))
    drop-shadow(0 10px 14px #14285026);
}

/* Handy */
@media (max-width: 480px) {
  .nb-zw-option,
  .nb-zw-option[aria-checked="true"] {
    grid-template-columns: 46px 1fr auto;
    gap: 10px;
    padding: 14px 14px 14px 12px !important;
  }
  .nb-zw-3d { width: 66px; height: 66px; margin: -14px -12px -12px -14px; }
  .bw-paychoice .nb-zw-links > :first-child { font-size: 14px !important; white-space: normal; }
  .bw-paychoice .nb-zw-links > :not(:first-child) { font-size: 12px !important; }
}

/* Die Vorlage setzt die Zahlweisen als Flex-Zeile mit !important; das
   Raster oben griff deshalb nicht ueberall, und die Texte begannen auf
   drei verschiedenen Kanten. */
.nb-zw-option,
.bw-paychoice [role="radiogroup"] > button { display: grid !important; }

/* === 84. Uhrzeiten gehoeren sichtbar zur Mitarbeiterin ===================
 * Die Kopfzeile der offenen Mitarbeiterin fuhr bisher nur einen blauen
 * Rahmen aus; die Uhrzeiten darunter lagen frei im Raster und konnten zu
 * jeder gehoeren. Jetzt faehrt die Kopfzeile eine Flaeche aus, die ihre
 * Uhrzeiten aufnimmt: weiss oben, nach unten auf rund 80 % durchsichtig
 * auslaufend, bis unter den letzten Knopf. Wie weit, misst override.js
 * (--nb-ma-umfang). Die Knoepfe liegen ueber der Flaeche.
 * ===================================================================== */

.nb-ma-kopf { position: relative; }
.nb-ma-kopf > * { position: relative; z-index: 1; }

.nb-ma-kopf[aria-expanded="true"] {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.nb-ma-kopf[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 0;
  height: var(--nb-ma-umfang, 100%);
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 34%, #ffffffb8 68%, #ffffff33 100%);
  box-shadow: 0 1px 2px #0e2b5710, 0 10px 24px -18px #0e2b5740;
  z-index: 0;
  pointer-events: none;
  transition: height .22s var(--ease);
}

body.nb-zeit .nb-ma-knopf { position: relative; z-index: 1; }

/* Ohne die weisse Flaeche der Vorlage sitzen die Knoepfe direkt auf dem
   Auslauf — sie brauchen ihren eigenen leichten Grund. */
body.nb-zeit .nb-ma-knopf:not(.nb-ma-zu) { background: #ffffffc4; }
body.nb-zeit .nb-ma-knopf:not(.nb-ma-zu):hover { background: #ffffff; }

/* Zwei aeltere Regeln mit hoeherer Spezifitaet schlugen durch: der Titel
   der Raten stand als Flex-Zeile (Text rutschte nach rechts), und bei
   "Vor Ort" blieb der Satz der Vorlage versteckt, weil die Schilder
   (:has(.nb-zw-mittel)) ihn ausblendeten. Hier mit derselben Schaerfe. */
.bw-paychoice .nb-zw-option .nb-zw-links > span:first-child {
  display: block !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}
.bw-paychoice .nb-zw-vorort .nb-zw-links:has(.nb-zw-mittel) > span:nth-child(2) {
  display: inline !important;
}
.bw-paychoice .nb-zw-vorort .nb-zw-links:has(.nb-zw-mittel) > .nb-zw-mittel { display: none !important; }

/* Auf dem Telefon griff das Raster der Vorlage (1fr auto): die Textspalte
   fiel auf 0 px, die Woerter standen untereinander. Das Raster hier mit
   !important und ohne Spielraum: Symbol fest, Text nimmt den Rest, der
   Betrag genau so breit wie sein Inhalt. Text oben ausgerichtet, damit die
   Titel aller drei Karten auf einer Hoehe beginnen; das Symbol mittig. */
.nb-zw-option,
.nb-zw-option[aria-checked="true"],
.bw-paychoice [role="radiogroup"] > button,
.bw-paychoice [role="radiogroup"] > button[aria-checked="true"] {
  grid-template-columns: 62px minmax(0, 1fr) max-content !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  justify-content: stretch !important;
}
.nb-zw-3d { align-self: center; grid-column: 1; }
.bw-paychoice .nb-zw-links { grid-column: 2; width: auto !important; max-width: none !important; min-width: 0 !important; }
.bw-paychoice .nb-zw-rechts { grid-column: 3; width: auto !important; min-width: 0 !important; }

@media (max-width: 480px) {
  .nb-zw-option,
  .nb-zw-option[aria-checked="true"],
  .bw-paychoice [role="radiogroup"] > button,
  .bw-paychoice [role="radiogroup"] > button[aria-checked="true"] {
    grid-template-columns: 46px minmax(0, 1fr) max-content !important;
  }
}

/* Die rechte Spalte ist eine umbrechende Flex-Zeile; ihr max-content ist
   die Breite ALLER Betraege in einer Zeile. Als Spaltenmass nahm das dem
   Text alles weg. Deshalb gedeckelt: so breit wie noetig, hoechstens 150 px
   (Telefon 124 px) — innen bricht die Zeile dann um. */
.nb-zw-option,
.nb-zw-option[aria-checked="true"],
.bw-paychoice [role="radiogroup"] > button,
.bw-paychoice [role="radiogroup"] > button[aria-checked="true"] {
  grid-template-columns: 62px minmax(0, 1fr) fit-content(150px) !important;
}
@media (max-width: 480px) {
  .nb-zw-option,
  .nb-zw-option[aria-checked="true"],
  .bw-paychoice [role="radiogroup"] > button,
  .bw-paychoice [role="radiogroup"] > button[aria-checked="true"] {
    grid-template-columns: 46px minmax(0, 1fr) fit-content(124px) !important;
  }
}

/* === 85. Zahlweisen auf dem Telefon: nichts ragt heraus, Betraege rechts =
 * Auf 360 px lief das Symbol aus dem Bildschirm, die Betraege standen mal
 * mittig, mal halb abgeschnitten, und der Text hatte drei Spalten Breite
 * fuer vier Woerter. Auf dem Telefon deshalb:
 *   - das Symbol bleibt in der Karte (kein negativer Rand nach links),
 *   - die rechte Spalte fuellt ihre Zelle und richtet alles rechts aus,
 *   - sie ist hoechstens 96 px breit, "pro Sitzung" rutscht darunter,
 *   - der Text bekommt den Rest.
 * ===================================================================== */

.bw-paychoice .nb-zw-rechts {
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  text-align: right !important;
}
.bw-paychoice .nb-zw-rechts > * { text-align: right; }

@media (max-width: 480px) {
  .nb-zw-option,
  .nb-zw-option[aria-checked="true"],
  .bw-paychoice [role="radiogroup"] > button,
  .bw-paychoice [role="radiogroup"] > button[aria-checked="true"] {
    grid-template-columns: 50px minmax(0, 1fr) fit-content(96px) !important;
    gap: 10px !important;
    padding: 12px 12px 12px 8px !important;
    border-radius: 14px !important;
  }
  .nb-zw-3d {
    width: 60px;
    height: 60px;
    margin: -8px -6px -8px -4px;
    filter: drop-shadow(0 6px 10px #14285026);
  }
  .nb-zw-option[aria-checked="true"] .nb-zw-3d {
    filter:
      drop-shadow(2px 0 0 var(--nb-zw-ring)) drop-shadow(-2px 0 0 var(--nb-zw-ring))
      drop-shadow(0 2px 0 var(--nb-zw-ring)) drop-shadow(0 -2px 0 var(--nb-zw-ring))
      drop-shadow(0 6px 10px #14285026);
  }
  .bw-paychoice .nb-zw-links > :first-child { font-size: 14px !important; margin-bottom: 2px; }
  .bw-paychoice .nb-zw-links > :not(:first-child) { font-size: 12px !important; line-height: 1.4; }
  .nb-zw-raten .nb-zw-links > :first-child > span { display: block !important; margin: 0 !important; font-size: 12px !important; }
  .bw-paychoice .nb-zw-rechts .nb-zw-gesamt,
  .bw-paychoice .nb-zw-rechts:not(:has(.nb-zw-gesamt)) .nb-zw-je { font-size: 17px !important; }
  .bw-paychoice .nb-zw-rechts .nb-zw-statt { font-size: 11px; }
  .bw-paychoice .nb-zw-rechts:has(.nb-zw-gesamt) .nb-zw-je,
  .bw-paychoice .nb-zw-rechts > span:not(.nb-zw-gesamt):not(.nb-zw-je):not(.nb-zw-statt) { font-size: 11.5px !important; }
}

/* Aus Abschnitt 29 stammte max-width: 42 % auf der rechten Spalte — im
   Raster des Telefons hiess das 40 px, die Betraege standen mittig. */
.bw-paychoice .nb-zw-rechts { max-width: none !important; }
.bw-paychoice .nb-zw-links { max-width: none !important; }

/* Die Raten-Karte rueckte ihren Text 4 px ein und setzte ihn mittig: ein
   Rest aus den Regeln der Vorlage fuer diesen Weg. Alle drei gleich. */
.bw-paychoice .nb-zw-links {
  align-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Eine Mitarbeiterin allein: dieselbe Flaeche wie bei mehreren. Die
   Kopfzeile der Vorlage (.slotstaff-head) traegt sie als ::after, die
   Uhrzeiten darunter liegen darueber. */
body.nb-zeit .slotstaff-head { position: relative; }
body.nb-zeit .slotstaff-head > * { position: relative; z-index: 1; }
body.nb-zeit .slotstaff-head::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 0;
  height: var(--nb-ma-umfang, 100%);
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 34%, #ffffffb8 68%, #ffffff33 100%);
  box-shadow: 0 1px 2px #0e2b5710, 0 10px 24px -18px #0e2b5740;
  z-index: 0;
  pointer-events: none;
}
body.nb-zeit .slot-btn { position: relative; z-index: 1; }
body.nb-zeit .slot-btn:not(.nb-ma-zu) { background: #ffffffc4; }
body.nb-zeit .slot-btn:not(.nb-ma-zu):hover { background: #ffffff; }

/* Die Raten-Karte folgt auf die gewaehlte und traf damit die Regel
   ".nb-zw-option[aria-checked] + .nb-zw-option" aus Abschnitt 82 — mit
   hoeherer Schaerfe als die Telefon-Regeln, also mit Rechner-Abstaenden.
   Hier fuer alle drei mit derselben, hoeheren Schaerfe. */
.bw-paychoice .nb-zw-option.nb-zw-option,
.bw-paychoice .nb-zw-option.nb-zw-option[aria-checked="true"],
.bw-paychoice .nb-zw-option[aria-checked="true"] + .nb-zw-option.nb-zw-option {
  padding: 15px 18px 15px 12px !important;
  grid-template-columns: 62px minmax(0, 1fr) fit-content(150px) !important;
  gap: 14px !important;
}
@media (max-width: 480px) {
  .bw-paychoice .nb-zw-option.nb-zw-option,
  .bw-paychoice .nb-zw-option.nb-zw-option[aria-checked="true"],
  .bw-paychoice .nb-zw-option[aria-checked="true"] + .nb-zw-option.nb-zw-option {
    padding: 12px 12px 12px 8px !important;
    grid-template-columns: 50px minmax(0, 1fr) fit-content(96px) !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }
}

/* === 91. Zahlungsmarken ==================================================== */
.pkg-paytrust-marks { display: inline-flex; align-items: center; gap: 8px; }
.pkg-paytrust-marks .nb-amex { height: 18px; width: 18px; border-radius: 3px; display: inline-block; }
.pkg-paytrust-label { display: inline-flex; align-items: center; gap: 4px; }
.pkg-paytrust-label .nb-stripe { height: 13px; width: auto; display: inline-block; vertical-align: middle; }
.pkg-card.open .pkg-paytrust-label .nb-stripe { filter: brightness(0) invert(1); }

/* === 92. Preisuebersicht im Kontakt-Schritt ================================ */
.summary-card:has(.nb-zf-preise) .summary-price,
.summary-card:has(.nb-zf-preise) .summary-price-total,
.summary-card:has(.nb-zf-preise) .nb-zf-spar { display: none !important; }

/* Das Paketfeld ist hell (Abschnitt 60), also dunkle Tinte. */
.nb-zf-preise { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; color: #0E2B57; }
.nb-zf-regulaer { font-size: 12.5px; color: #56708F; }
.nb-zf-regulaer s { color: #9B2233; text-decoration-thickness: 1.5px; margin-right: 4px; font-weight: 600; }
.nb-zf-gesamt { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.nb-zf-gesamt b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #0E2B57; }
.nb-zf-gesamt span { font-size: 12.5px; color: #56708F; }
.nb-zf-je { font-size: 12px; color: #56708F; }
.nb-zf-ersparnis {
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: 9px !important;
  background: #E3F2E9;
  box-shadow: inset 0 0 0 1px #BFE0CE;
  font-size: 12.5px;
  font-weight: 600;
  color: #0F6B3A;
}

/* === 93. Video in der aufgeklappten Karte ================================
 * Das Video liegt ueber dem Wischband und fuellt den Rahmen der Galerie;
 * die Auflagen (Zonenzahl, Ersparnis, Ecke) bleiben darueber. Sichtbar wird
 * es erst, wenn Daten da sind — bis dahin stehen die Fotos, kein Sprung. */
.nb-galerie { position: relative; }
.nb-paketvideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
  border-radius: inherit;
}
.nb-galerie.nb-mit-video .nb-paketvideo { opacity: 1; }
.nb-galerie.nb-mit-video .nb-wisch,
.nb-galerie.nb-mit-video .nb-balken { display: none; }
.nb-galerie .nb-auflage,
.nb-galerie .nb-ecke { z-index: 3; }

/* === 94. Zonenkette: bis zu neun Symbole, Knie ==============================
 * Intim zaehlt drei Zonen; mit Beinen sind es sieben, bei Ganzkoerper neun.
 * Die Kette darf deshalb umbrechen, und das Knie hat ein eigenes Symbol. */
:root { --nb-zb-knie: url("/newbooking/design/zonenicons/knie.webp"); }
.nb-z-knie { --nb-zeichen: var(--nb-zb-knie); --nb-zeichen-bild: var(--nb-zb-knie); }
body.nb-pakete .nb-zonen { flex-wrap: wrap; row-gap: 4px; }

/* === 95. Video auf jeder Karte, drehendes Intim-Symbol =====================
 * Die Fotoschau (Band, Winkel, Punkte) ist weg, sobald ein Video da ist —
 * auch auf zugeklappten Karten. Das Drehsymbol steht etwas groesser als die
 * flachen Zeichen, damit die Drehung lesbar ist; es ist ein Video auf
 * weissem Grund, wie die Karte selbst. */
.nb-galerie.nb-mit-video .nb-band,
.nb-galerie.nb-mit-video .nb-punkte,
.nb-galerie.nb-mit-video .nb-wisch { display: none !important; }
/* Das Standbild (poster) steht sofort, auch bevor das Video geladen ist. */
.nb-galerie.nb-mit-video .nb-paketvideo { opacity: 1; }
.nb-paketvideo { object-position: center; }
.pkg-card.open .nb-paketvideo { object-position: 78% center; }

body.nb-pakete .nb-zonen .nb-dreh {
  width: 30px;
  height: 30px;
  margin: -4px 0;
  object-fit: cover;
  background: none;
  border-radius: 50%;
  -webkit-mask: none;
  mask: none;
  pointer-events: none;
}

/* Bewegung und Video trennen: die Galerie zeichnet in ihrer eigenen Schicht,
   die Karte darunter kann gleiten, ohne dass der Film neu gezeichnet wird. */
.nb-galerie { contain: paint; }
.nb-paketvideo { will-change: opacity; transform: translateZ(0); }

/* === 96. Ruhe beim Aufklappen ============================================
 * Die Vorlage laesst Schatten und Verschiebung der Karte als Uebergang
 * laufen (transition auf transform und box-shadow). Beim Aufklappen malt das
 * die grosse, maskierte Karte 220 ms lang jedes Bild neu — auf dem Telefon
 * spuerbar. Die Bewegung kommt ohnehin aus Abschnitt 37; hier bleibt nur die
 * Rahmenfarbe weich. */
body.nb-pakete .pkg-card { transition: border-color .14s; }

/* === 97. Kundendaten: die Bezeichnung steht im Feld ========================
 * Die Beschriftung ueber dem Feld faellt weg; ihr Text steht als Platzhalter
 * im Feld (override.js 97). Nur "Deine Daten" bleibt als Ueberschrift. */
.bw-card[data-step="contact"] .bw-field.nb-feld-still > .bw-label { display: none; }
.bw-card[data-step="contact"] .bw-field.nb-feld-still .bw-input::placeholder {
  color: #98a2b3;
  opacity: 1;
}
.bw-card[data-step="contact"] .bw-field.nb-feld-still + .bw-field.nb-feld-still { margin-top: 10px; }

/* === 98. Zustimmung wieder als Textzeile =================================
 * Die Zeile mit dem Haken war in den gruenen Knopf gezogen (Abschnitt 74 /
 * 81). Jasper will sie wieder frei: einfach als Text im Container ueber dem
 * Knopf, kein Kasten, kein Gruen. Der Knopf bekommt seine Rundung zurueck. */
.bw-paychoice .nb-agb,
.nb-agb {
  margin: 0 0 2px !important;
  padding: 2px 2px 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  position: static;
  z-index: auto;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.nb-agb:hover { background: none !important; }
.nb-agb-text { color: #4B5563; font-size: 12.5px; line-height: 1.45; }
.nb-agb-text a {
  color: var(--brand, #1B5FC4);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #1B5FC466;
  text-underline-offset: 2px;
}
/* Der Haken ist so hoch wie die zwei Textzeilen daneben (36 px), damit man
   ihn auf dem Telefon trifft, und atmet ganz leicht (Zoom rein, Zoom raus),
   bis er gesetzt ist. */
.nb-agb-haken {
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  flex: 0 0 36px;
  accent-color: var(--brand, #1B5FC4);
  border-radius: 8px;
  animation: nb-agb-atmen 1.8s ease-in-out infinite;
  transform-origin: center;
}
.nb-agb-haken:checked { animation: none; }
.nb-agb { align-items: center !important; }
@keyframes nb-agb-atmen {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .nb-agb-haken { animation: none; } }
.nb-agb + .bw-paychoice-pay,
.nb-agb + .bw-cta-book,
.nb-agb + .bw-express-cta {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}
/* Fehlender Haken beim Klick: die Zeile pocht kurz und der Text wird rot. */
.nb-agb-fehlt {
  background: none !important;
  box-shadow: none !important;
}
.nb-agb-fehlt .nb-agb-text { color: #B3261E; }
.nb-agb-fehlt .nb-agb-haken { outline: 2px solid #B3261E; outline-offset: 1px; border-radius: 3px; }

/* === 99. Nichts springt auf der Bezahlseite ===============================
 * "vor Ort" nimmt die Leiste Karte/PayPal weg — ein blasses Abbild haelt
 * ihren Platz (override.js, zahlartenLeisteHalten). Und der gruene Knopf
 * behaelt seine Hoehe, auch wenn bei Raten die zweite Zeile fehlt. */
/* Die sichtbare Leiste und die sichtbaren Vorteilszeilen gehoeren dem
   Skript (.nb-zahlarten, .nb-vorteile); die Originale von React bleiben im
   Baum und sind unsichtbar — so kann nichts springen, wenn React sie
   nimmt oder bringt. */
.bw-paychoice > .bw-paymethods:not(.nb-zahlarten) { display: none !important; }
.bw-paychoice > .bw-paychoice-benefits:not(.nb-vorteile) { display: none !important; }
.nb-zahlarten.nb-zahlarten-aus { opacity: .38; pointer-events: none; filter: saturate(.4); }
.nb-zahlarten.nb-zahlarten-aus > button { cursor: default; }
.bw-paychoice .bw-paychoice-pay { min-height: 59px; box-sizing: border-box; }

/* === 100. Signature-Zonen: neun Karten im Stil der Paketkarten ==========
 * Vorher: Wischreihe mit fuenf Kacheln, roter "statt"-Preis, und der
 * gewaehlte Zustand als innerer Schatten, den das Foto oben verdeckte — die
 * Kante lief nur um die untere Haelfte. Jetzt: ein Raster mit drei Spalten,
 * alle neun Zonen sichtbar; weisse Karten mit Foto 4:3, Name und blass
 * durchgestrichenem Listenpreis; gewaehlt = blauer Ring AUSSEN um die ganze
 * Karte plus Haken oben rechts. Blau statt Rot im ganzen Blatt (Uhr, statt-
 * Preis). Die Knoepfe kleben unten am Blatt, damit "Zone auswaehlen" beim
 * Rollen im Blatt nicht verschwindet. */
.nb-upsell .nb-upsell-zonen {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-columns: auto;
  gap: 10px;
  overflow: visible;
  margin: 0 0 16px;
  padding: 2px 0 4px;
  scroll-snap-type: none;
}
.nb-upsell .nb-upsell-zone {
  position: relative;
  display: block;
  padding: 0 0 10px;
  background: #fff;
  border: 0;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px #0b1f4514, 0 10px 24px -16px #0b1f4566, inset 0 0 0 1px #dfe7f3;
  overflow: visible;
  text-align: left;
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}
.nb-upsell .nb-upsell-zone:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px #0b1f4514, 0 14px 28px -16px #0b1f4577, inset 0 0 0 1px #cfd9ea;
}
.nb-upsell .nb-upsell-zone.nb-an,
.nb-upsell .nb-upsell-zone.nb-an:hover {
  background: #F2F7FF;
  transform: none;
  box-shadow: 0 0 0 2px #1B5FC4, 0 12px 26px -14px #1b5fc466;
}
.nb-upsell .nb-upsell-bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px 14px 0 0 !important;
  background: #dce8f8 center / cover no-repeat;
}
.nb-upsell .nb-upsell-zone::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1B5FC4 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5 9.5 17 19 7.5' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 1px 3px #0b1f4555, 0 0 0 2px #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .16s var(--ease), transform .16s var(--ease);
  pointer-events: none;
}
.nb-upsell .nb-upsell-zone.nb-an::after { opacity: 1; transform: scale(1); }
.nb-upsell .nb-upsell-name {
  display: block;
  margin: 8px 10px 0;
  color: #0E2B57;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.nb-upsell .nb-upsell-wert {
  display: block;
  margin: 2px 10px 0;
  color: #6B7A90;
  font-size: 11.5px;
  font-weight: 500;
}
.nb-upsell .nb-upsell-wert .nb-statt-zahl,
.nb-upsell .nb-upsell-preis-statt .nb-statt-zahl {
  background-image: none;
  padding: 0;
  text-decoration: line-through;
  text-decoration-color: #6b7a90b3;
  text-decoration-thickness: 1.5px;
}
.nb-upsell .nb-upsell-preis-statt { color: #5B6B85; }
.nb-upsell .nb-upsell-zahl { color: #1B5FC4; }
.nb-upsell .nb-upsell-knoepfe {
  position: sticky;
  bottom: calc(-1 * var(--nb-up-rand));
  margin: 0 calc(-1 * var(--nb-up-rand)) calc(-1 * var(--nb-up-rand));
  padding: 10px var(--nb-up-rand) var(--nb-up-rand);
  background: linear-gradient(180deg, #ffffff00 0%, #ffffffe6 26%, #ffffffee 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (max-width: 520px) {
  .nb-upsell .nb-upsell-zonen { gap: 8px; }
  .nb-upsell .nb-upsell-name { margin: 7px 8px 0; font-size: 12px; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
  .nb-upsell .nb-upsell-wert { margin: 1px 8px 0; font-size: 11px; }
  .nb-upsell .nb-upsell-zone::after { top: 6px; right: 6px; width: 20px; height: 20px; background-size: 12px; }
}

/* === 101. Gratis: Zustimmung + Neukunden-Haken vor dem SMS-Knopf =========
 * Ohne Zahl-Knopf steht die Zustimmung vor "Mit SMS bestaetigen"; davor der
 * Neukunden-Haken. Der Knopf bleibt zurueckgenommen, bis beide gesetzt sind. */
body.nb-agb-offen .nb-sms { opacity: .55; }
.nb-agb.nb-neukunde { margin-bottom: 10px !important; }
.nb-agb.nb-neukunde + .nb-agb { margin-top: 0 !important; }
.nb-agb + .nb-sms { margin-top: 10px !important; }
/* Kacheln des Gratis-Waehlers: "statt <69 €>" statt "Wert 69 €". */
.gratis-zone-value.nb-statt-klein { color: #6B7A90; }
.gratis-zone-free { font-weight: 800; }
.nb-zf-gratis .nb-zf-gesamt b { font-size: 22px; }

/* === 102. Kalender-Blatt auf der Bestaetigung ============================
 * Ein Blatt wie das Signature-Angebot: weisser Grund, ein Kopf, darunter
 * fuenf Zeilen mit Zeichen, Titel und Hinweis. Auf dem Telefon kommt es von
 * unten, auf dem Rechner steht es mittig. */
.nb-kal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: #0b1f4573;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: nb-kal-ein .2s var(--ease);
}
@keyframes nb-kal-ein { from { opacity: 0 } to { opacity: 1 } }
.nb-kal-blatt {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 20px 18px 14px;
  background: #fff;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px #0b1f4529, 0 32px 70px -28px #0b1f45b8;
  animation: nb-kal-hoch .3s var(--ease);
}
@keyframes nb-kal-hoch { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
.nb-kal-kopf { position: relative; padding-right: 40px; margin: 0 0 12px; }
.nb-kal-titel { margin: 0 0 4px; color: #0E2B57; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.nb-kal-hinweis { margin: 0; color: #56708F; font-size: 12.5px; line-height: 1.4; }
.nb-kal-zu {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50% !important;
  background: #EEF3FA url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6 6 18' stroke='%230E2B57' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  cursor: pointer;
}
.nb-kal-liste { display: flex; flex-direction: column; gap: 8px; }
.nb-kal-weg {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px !important;
  background: #F4F8FE;
  box-shadow: inset 0 0 0 1px #dfe7f3;
  color: #0E2B57;
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: background-color .16s var(--ease), box-shadow .16s var(--ease);
}
.nb-kal-weg:hover { background: #E9F1FD; box-shadow: inset 0 0 0 1px #cfd9ea; }
.nb-kal-zeichen {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff center / 22px no-repeat;
  box-shadow: inset 0 0 0 1px #dfe7f3;
}
.nb-kal-weg-apple .nb-kal-zeichen { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M16.6 12.7c0-2.5 2-3.6 2.1-3.7-1.2-1.7-3-1.9-3.6-2-1.5-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.8-1.7 0-3.2 1-4.1 2.5-1.8 3.1-.5 7.6 1.3 10.1.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8s2 .8 3.3.8c1.4 0 2.3-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9-.1 0-2.9-1.1-2.9-4.2zM14.2 5.4c.7-.8 1.2-2 1-3.2-1 0-2.2.7-2.9 1.5-.6.7-1.2 1.9-1.1 3.1 1.1.1 2.3-.6 3-1.4z'/%3E%3C/svg%3E"); }
.nb-kal-weg-google .nb-kal-zeichen { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M21.6 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.4c-.2 1.2-.9 2.3-2 3v2.5h3.2c1.9-1.7 3-4.3 3-7.4z'/%3E%3Cpath fill='%2334A853' d='M12 22c2.7 0 5-.9 6.6-2.4l-3.2-2.5c-.9.6-2 1-3.4 1-2.6 0-4.8-1.8-5.6-4.1H3.1v2.6C4.8 19.8 8.1 22 12 22z'/%3E%3Cpath fill='%23FBBC05' d='M6.4 14c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V7.4H3.1C2.4 8.8 2 10.4 2 12s.4 3.2 1.1 4.6L6.4 14z'/%3E%3Cpath fill='%23EA4335' d='M12 5.9c1.5 0 2.8.5 3.8 1.5l2.9-2.9C17 2.9 14.7 2 12 2 8.1 2 4.8 4.2 3.1 7.4L6.4 10c.8-2.3 3-4.1 5.6-4.1z'/%3E%3C/svg%3E"); }
.nb-kal-weg-outlook .nb-kal-zeichen { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='4' width='13' height='16' rx='2' fill='%230F6CBD'/%3E%3Cellipse cx='8.5' cy='12' rx='3.2' ry='4' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M15 8h6.5v9.5a1.5 1.5 0 0 1-1.5 1.5H15z' fill='%2350A8F0'/%3E%3Cpath d='M15 8l6.5 4.2L15 15z' fill='%2328A8EA'/%3E%3C/svg%3E"); }
.nb-kal-weg-yahoo .nb-kal-zeichen { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%236001D2'/%3E%3Cpath d='M7 7h2.6l2.4 4.4L14.4 7H17l-3.9 6.6V17h-2.2v-3.4z' fill='%23fff'/%3E%3C/svg%3E"); }
.nb-kal-weg-ics .nb-kal-zeichen { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='5' width='18' height='16' rx='3' stroke='%231B5FC4' stroke-width='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4' stroke='%231B5FC4' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9 15.5l2 2 4-4' stroke='%231B5FC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.nb-kal-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nb-kal-weg-titel { font-size: 14.5px; font-weight: 600; }
.nb-kal-weg-hinweis { color: #56708F; font-size: 11.5px; line-height: 1.35; }
.nb-kal-winkel {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%2356708F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
body.nb-kal-an { overflow: hidden; }
@media (min-width: 640px) {
  .nb-kal { align-items: center; }
  .nb-kal-blatt { padding: 24px 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-kal, .nb-kal-blatt { animation: none; }
}

/* === 103. Der Preis zaehlt herunter =======================================
 * Die Zahl laeuft mit gleich breiten Ziffern, damit nichts zappelt; der
 * Zoom am Ende geht vom linken Rand aus, die Zeile bleibt an Ort. */
body.nb-pakete .pkg-card.open .pkg-price-now {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transform-origin: left center;
  will-change: transform;
}

/* === 102b. Kalender-Blatt ruhiger =========================================
 * Keine Kaesten je Option mehr: eine Flaeche, die Wege als Zeilen mit
 * feinen, eingravierten Trennlinien (dunkle Linie, weisser Lichtsaum
 * darunter), Zeichen ohne Rahmen. Auf dem Telefon ein Blatt von unten mit
 * Griff, auf dem Rechner mittig mit runden Ecken. */
.nb-kal { padding: 0; }
.nb-kal-blatt {
  max-width: 520px;
  padding: 10px 0 max(6px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0 !important;
  box-shadow: 0 -8px 40px -20px #0b1f4580;
}
.nb-kal-blatt::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 2px;
  background: #D5DEEA;
}
.nb-kal-kopf { margin: 0; padding: 0 56px 12px 20px; }
.nb-kal-titel { font-size: 17px; }
.nb-kal-hinweis { font-size: 12px; }
.nb-kal-zu { top: -2px; right: 14px; width: 32px; height: 32px; background-color: #F1F5FA; }
.nb-kal-liste { gap: 0; }
.nb-kal-weg {
  position: relative;
  padding: 13px 20px;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
}
.nb-kal-weg + .nb-kal-weg::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 1px;
  background: #E1E8F2;
  box-shadow: 0 1px 0 #ffffff;
}
.nb-kal-weg:hover { background: #F6F9FD; box-shadow: none; }
.nb-kal-zeichen {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 0;
  background-color: transparent;
  background-size: 26px;
  box-shadow: none;
}
.nb-kal-weg-titel { font-size: 15px; }
.nb-kal-weg-hinweis { font-size: 11.5px; }
.nb-kal-weg.nb-kal-fertig .nb-kal-winkel {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5 9.5 17 19 7.5' stroke='%23157A45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.nb-kal-weg.nb-kal-fertig .nb-kal-weg-hinweis { color: #157A45; }
@media (min-width: 640px) {
  .nb-kal { padding: 24px; }
  .nb-kal-blatt {
    padding: 22px 0 10px;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px #0b1f4529, 0 32px 70px -28px #0b1f45b8;
  }
  .nb-kal-blatt::before { display: none; }
  .nb-kal-kopf { padding: 0 60px 14px 24px; }
  .nb-kal-zu { right: 18px; top: 0; }
  .nb-kal-weg { padding: 14px 24px; }
  .nb-kal-weg + .nb-kal-weg::before { left: 24px; right: 24px; }
}

/* === 102c. Das Blatt gleitet langsam herein und wieder hinaus ============
 * Auf dem Telefon kommt es ganz von unten (aus dem Bild), in 520 ms mit
 * der Kurve der Karten; der Schleier blendet dazu ein. Beim Schliessen
 * gleitet es in 320 ms hinunter, der Schleier blendet aus. Am Rechner
 * dasselbe in klein: aus 32 px Tiefe mit Aufblenden. */
.nb-kal { animation: nb-kal-ein .36s ease-out both; }
.nb-kal-blatt { animation: nb-kal-hoch .52s cubic-bezier(.32,.72,0,1) both; }
@keyframes nb-kal-hoch {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
.nb-kal.nb-kal-schliesst { animation: nb-kal-aus .32s ease-in both; }
.nb-kal.nb-kal-schliesst .nb-kal-blatt { animation: nb-kal-runter .32s cubic-bezier(.4,0,1,1) both; }
@keyframes nb-kal-aus { from { opacity: 1; } to { opacity: 0; } }
@keyframes nb-kal-runter { from { transform: none; } to { transform: translateY(100%); } }
@media (min-width: 640px) {
  .nb-kal-blatt { animation: nb-kal-hoch-rechner .42s cubic-bezier(.32,.72,0,1) both; }
  @keyframes nb-kal-hoch-rechner {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: none; }
  }
  .nb-kal.nb-kal-schliesst .nb-kal-blatt { animation: nb-kal-runter-rechner .28s ease-in both; }
  @keyframes nb-kal-runter-rechner {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(24px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .nb-kal, .nb-kal-blatt, .nb-kal.nb-kal-schliesst, .nb-kal.nb-kal-schliesst .nb-kal-blatt { animation: none; }
}

/* === 104. Bestaetigung: Tag und Uhrzeit gleich gebaut ====================
 * Die Zeichen im Kopf standen noch weiss (aus der Zeit des dunklen Kopfs)
 * und beim zweiten Feld rechts vom Text. Jetzt tragen beide die Textfarbe,
 * stehen links vom Text, und beide Felder sind gleich gebaut. Der Wert darf
 * umbrechen statt mit "…" abzureissen. */
.nb-bk-kopf .nb-bk-feld,
.nb-bk-kopf .nb-bk-feld:last-child {
  grid-template-columns: 18px 1fr;
  text-align: left;
  align-items: center;
}
.nb-bk-kopf .nb-bk-feld:last-child .nb-bk-feld-symbol { grid-column: 1; }
.nb-bk-kopf .nb-bk-feld:last-child .nb-bk-label,
.nb-bk-kopf .nb-bk-feld:last-child .nb-bk-wert { grid-column: 2; }
.nb-bk-kopf .nb-bk-feld-symbol {
  background: currentColor;
  margin-top: 0;
  align-self: center;
  opacity: .9;
}
.nb-bk-kopf .nb-bk-wert {
  font-size: 17px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}
.nb-bk-kopf .nb-bk-strecke { align-items: center; }
/* Das Datum bekommt den Platz, die Uhrzeit bleibt auf einer Zeile. */
.nb-bk-kopf .nb-bk-strecke .nb-bk-feld:first-child { flex: 1 1 auto; min-width: 0; }
.nb-bk-kopf .nb-bk-strecke .nb-bk-feld:last-child { flex: 0 0 auto; }
.nb-bk-kopf .nb-bk-strecke .nb-bk-feld:last-child .nb-bk-wert { white-space: nowrap; }
.nb-bk-kopf .nb-bk-strecke .nb-bk-strich { flex: 0 0 auto; }
/* Die Strecke ist ein Raster: Datum nimmt den Rest, Uhrzeit ihre Breite. */
.nb-bk-kopf .nb-bk-strecke { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }

/* === 105. Aufgeklappt: der Laser steht im Bild ===========================
 * Unter der Zonenzahl zwei Zeilen mehr, nur auf der offenen Karte: der echte
 * medizinische Alexandrit-/Nd:YAG-Laser mit Laser-Zeichen, und der billige
 * Diodenlaser mit demselben Zeichen, rot durchgestrichen, und selbst
 * durchgestrichenem Wort. Zugeklappt bleibt das Bild ruhig. */
.nb-auflage-laser,
.nb-auflage-diode { display: none; }
body.nb-pakete .pkg-card.open .nb-auflage-laser,
body.nb-pakete .pkg-card.open .nb-auflage-diode { display: flex; }
.nb-auflage-laser::before { background-image: url("/newbooking/design/symbole/laser-echt.svg"); }
.nb-auflage-diode::before { background-image: url("/newbooking/design/symbole/laser-diode-nein.svg"); }
.nb-auflage-diode {
  color: #5B6B85;
  text-decoration: line-through;
  text-decoration-color: #C6423C;
  text-decoration-thickness: 1.5px;
}
body.nb-pakete .pkg-card.open .nb-auflage { gap: 6px; }
@media (max-width: 699px) {
  body.nb-pakete .pkg-card.open .nb-auflage { width: 70%; }
  body.nb-pakete .pkg-card.open .nb-auflage-laser,
  body.nb-pakete .pkg-card.open .nb-auflage-diode { font-size: 12.5px; }
}

/* === 111. Raten-Regler ====================================================
 * Unter der Ratenkarte, im selben Ton, nur sichtbar wenn Raten gewaehlt. */
.nb-raten {
  display: none;
  margin: -6px 0 12px;
  padding: 12px 16px 10px;
  border-radius: 0 0 14px 14px !important;
  background: #EEEAFB;
  box-shadow: inset 0 1px 0 #ffffffb0;
}
.nb-raten.nb-raten-an { display: block; }
.nb-raten-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.nb-raten-label { color: #5B4FA8; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.nb-raten-wert { color: #3B2F8C; font-size: 14px; font-weight: 700; }
.nb-raten-regler {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 6px 0 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, #6B5BD2 0%, #6B5BD2 var(--nb-raten-anteil, 100%), #D9D3F2 var(--nb-raten-anteil, 100%), #D9D3F2 100%);
  outline: none;
  cursor: pointer;
}
.nb-raten-regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid #6B5BD2;
  box-shadow: 0 2px 6px #3b2f8c40;
  cursor: grab;
}
.nb-raten-regler::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid #6B5BD2;
  box-shadow: 0 2px 6px #3b2f8c40;
}
.nb-raten-skala { display: flex; justify-content: space-between; color: #8A80C4; font-size: 11px; padding: 0 2px; }
.nb-raten-rate { margin-top: 8px; color: #3B2F8C; font-size: 13px; font-weight: 600; }

/* === 112. Vorschau der Zahlweisen unter 300 EUR ============================ */
.nb-zw-vorschau { display: grid; gap: 8px; margin: 2px 0 12px; }
.nb-zw-vorschau .nb-zw-option { cursor: default; }
.nb-zw-vorschau .nb-zw-inaktiv { opacity: .55; filter: saturate(.55); }
.nb-zw-vorschau .nb-zw-inaktiv .nb-zw-3d { filter: grayscale(.5); }
.nb-zw-hinweis { display: inline-block; margin-top: 2px; color: #56708F; font-size: 12px; font-weight: 500; }
.nb-zw-vorschau .nb-zw-links > span:first-child { display: block; font-weight: 700; font-size: 15px; }
.nb-zw-vorschau .nb-zw-links > span:nth-child(2) { display: block; font-size: 12.5px; color: #3A5480; margin-top: 2px; }
.nb-zw-vorschau .nb-zw-rechts { text-align: right; }
.nb-zw-vorschau .nb-zw-rechts > span { display: block; }

/* === 113. Knopf wartet, Felder zeigen, was fehlt ============================ */
body.nb-form-offen .bw-paychoice-pay,
body.nb-form-offen .bw-cta-book,
body.nb-form-offen .bw-express-cta,
body.nb-form-offen .nb-sms { opacity: .5; filter: saturate(.6); }
.bw-field.nb-feld-fehlt .bw-input { box-shadow: 0 0 0 2px #C6423C !important; }
.nb-feld-hinweis { display: block; margin: 6px 2px 0; color: #B3261E; font-size: 12px; }

/* === 114. Rechner: Text direkt am Symbol, alle drei auf einer Kante ======= */
@media (min-width: 700px) {
  .bw-paychoice [role="radiogroup"] > button,
  .bw-paychoice [role="radiogroup"] > button[aria-checked="true"],
  .nb-zw-vorschau .nb-zw-option { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; }
  .bw-paychoice .nb-zw-links { padding-left: 0 !important; margin-left: 0 !important; text-align: left; }
  .bw-paychoice .nb-zw-links > span { text-align: left; }
  .bw-paychoice .nb-zw-3d { margin-left: -6px; }
}

/* === 115. Gratis-Zone als Neukundenangebot =================================
 * Badge im Rand: sitzt auf der Oberkante der Karte, im Blau der Karte, mit
 * einem Saum in der Farbe der Seite, damit es wie ausgestanzt wirkt, nicht
 * aufgeklebt. Der Satz steht direkt unter der Ueberschrift des Waehlers. */
/* overflow bleibt hidden: mit "visible" ragte die Karte 6 px ueber den
   Schirm und die Seite liess sich auf dem Telefon quer schieben. Das Badge
   ist eine Lasche, die aus der Oberkante haengt. */
body.nb-pakete .pkg-card-gratis { position: relative; }
/* Das Badge ist ein Eck-Chip wie "Bestseller" auf den Paketkarten: weiss,
   oben links in der Kartenecke, mit der Rundung der Karte aussen und einer
   Gegenrundung innen. Die Karte bleibt overflow: hidden (sonst 6 px zu breit). */
body.nb-pakete .pkg-card-gratis { overflow: hidden; }
.nb-gratis-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 6px 14px 8px 16px;
  border-radius: 14px 0 14px 0 !important;
  background: #fff;
  color: #1B5FC4;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
  pointer-events: none;
}
/* Platz fuer den Chip ueber der Ueberschrift, zu wie offen. */
body.nb-pakete .pkg-card-gratis .pkg-gratis-btn { padding-top: 40px; }
body.nb-pakete .pkg-card-gratis .nb-gratis-titel { padding-top: 22px; }
/* Das X sitzt am Kartenrand oben rechts, nur wenn der Waehler offen ist. */
body.nb-pakete .pkg-card-gratis > .nb-gratis-zu { top: 14px; right: 14px; z-index: 4; }
body.nb-pakete .pkg-card-gratis.nb-eingeklappt > .nb-gratis-zu,
body.nb-pakete .pkg-card-gratis:not(.open) > .nb-gratis-zu { display: none; }
/* Waehrend die Kopie den alten Schritt wieder einspielt, bleibt der Schirm zu. */
html.nb-stellt-wieder-her .bw-page { opacity: 0 !important; }
html.nb-stellt-wieder-her body::after {
  content: attr(data-nb-warte);
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3A5480;
  font-size: 15px;
  font-weight: 600;
  pointer-events: none;
}
.nb-gratis-neu {
  margin: -4px 0 14px;
  color: #ffffffd9;
  font-size: 13px;
  line-height: 1.45;
}
/* Kleiner Pfeil auf jeder Zonen-Kachel: die Kachel ist ein Knopf. */
body.nb-pakete .gratis-zone-btn { position: relative; }
body.nb-pakete .gratis-zone-btn::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EEF3FA url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%231B5FC4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: inset 0 0 0 1px #d6e1f1;
  transition: background-color .16s var(--ease), transform .16s var(--ease);
}
body.nb-pakete .gratis-zone-btn:hover::after { background-color: #1B5FC4; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transform: translateX(2px); }

/* === 116. Flatrate-Konditionen ============================================ */
.nb-flat-konditionen,
.nb-zf-flat {
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 12px 8px;
  border-radius: 10px !important;
  background: #ffffff14;
  box-shadow: inset 0 0 0 1px #ffffff2e;
  color: #ffffffe6;
  font-size: 12.5px;
  line-height: 1.4;
}
.nb-zf-flat { background: #ffffffb3; box-shadow: inset 0 0 0 1px #dfe7f3; color: #17325C; margin-top: 12px; }
.nb-flat-konditionen li,
.nb-zf-flat li { position: relative; padding: 3px 0 3px 18px; }
.nb-flat-konditionen li::before,
.nb-zf-flat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.nb-flat-konditionen li.nb-flat-kopf,
.nb-zf-flat li.nb-flat-kopf { padding-left: 0; font-weight: 700; margin-bottom: 2px; }
.nb-flat-konditionen li.nb-flat-kopf::before,
.nb-zf-flat li.nb-flat-kopf::before { display: none; }

/* === 118. "Sessions" unter der Zahl auf der Paketkarte ==================== */
.nb-bewertung { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.nb-bewertung-sessions {
  flex-basis: 100%;
  text-align: right;
  margin-top: -1px;
  color: #7F94B4;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.1;
}
/* Die Konditionen gehoeren nur auf die OFFENE Flatrate-Karte; zugeklappt
   standen sie im Raster und zogen die Karte auseinander. */
body.nb-pakete .pkg-card:not(.open) .nb-flat-konditionen { display: none !important; }

/* === 118b. Handy: Bewertung als eigene Zeile unter dem Namen =============
 * Im Zwei-Spalten-Raster ist die Karte schmal; neben "5,0 (18.446) /
 * Sessions" brach der Name Wort fuer Wort um. Zugeklappt steht die
 * Bewertung deshalb unter dem Namen, in einer Zeile. */
@media (max-width: 699px) {
  body.nb-pakete .pkg-card:not(.open) .pkg-title-row { flex-wrap: wrap; row-gap: 3px; }
  body.nb-pakete .pkg-card:not(.open) .pkg-title-row > .pkg-title-col { flex: 1 1 100%; }
  body.nb-pakete .pkg-card:not(.open) .nb-bewertung { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; }
  body.nb-pakete .pkg-card:not(.open) .nb-bewertung-sessions { flex-basis: auto; margin: 0 0 0 3px; }
}
/* Auf dem Rechner in zwei Spalten, damit die offene Karte nicht in die
   Laenge geht. */
@media (min-width: 700px) {
  .nb-flat-konditionen { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .nb-flat-konditionen li.nb-flat-kopf { grid-column: 1 / -1; }
}

/* === 122. Nachbesserungen aus der Pruefung ================================ */
/* Ratenkarte: das Symbol vor dem Titel bleibt verborgen, in jeder Karte. */
.bw-paychoice .nb-zw-option .nb-zw-symbol,
.bw-paychoice .nb-zw-links > span:first-child > .nb-zw-symbol { display: none !important; }
/* Der Regler dockt an die Ratenkarte an: Karte unten eckig, Block direkt darunter. */
.bw-paychoice .nb-zw-raten.nb-mit-regler {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.nb-raten { margin-top: -20px; }
.nb-raten.nb-raten-an { margin-top: -22px; }
.nb-prog-wert, .bw-prog-label { line-height: 1.25; }
/* Fortschrittsleiste: Wert buendig zum Wort, erledigte Schritte klickbar. */
/* Zeichen und Text bleiben mittig; Wort und Wert bekommen dieselbe Zeile. */
.bw-prog-step { align-items: center; }
.nb-prog-wert { display: inline-block; vertical-align: baseline; margin-top: 0; }
.bw-prog-step.nb-prog-klick { cursor: pointer; }
.bw-prog-step.nb-prog-klick:hover .bw-prog-label,
.bw-prog-step.nb-prog-klick:hover .nb-prog-wert { text-decoration: underline; text-underline-offset: 3px; }
/* Die offene Karte sortiert ihren Koerper per order (Titel 1, Fuss 2,
   Stichpunkte 3); die Flatrate-Liste steht hinter den Stichpunkten. */
body.nb-pakete .nb-flat-konditionen { order: 3; }
/* Der Waehler hatte 34 px Luft oben fuer das X, das jetzt am Kartenrand
   sitzt: der Satz rueckt naeher an die Ueberschrift. */
body.nb-pakete .pkg-card-gratis .gratis-picker { padding-top: 10px !important; }


/* === 124. QA-Runde 2: Katalog, Baukasten, Anbieter, Preisstart ============
   Gehoert zu override.js 124–130 (spec 002). */

/* Stichpunkte aus dem Katalog: zugeklappt die ersten drei Zeilen, offen
   alle (Ganzkoerper acht Zeilen, Beine fuenf). */
body.nb-pakete .pkg-card:not(.open) .pkg-bullets li:nth-child(n+4) { display: none; }
body.nb-pakete .pkg-card.open .pkg-bullets li { display: flex; }
body.nb-pakete .pkg-bullets li.nb-weg { display: none !important; }

/* Baukasten: Hinweiszeile unter den Schaltern (Reset, Inklusion). */
.nb-mq-hinweis {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 8px;
  background: #EAF2FF; color: #17325C; font-size: 13px; line-height: 1.35;
  max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0;
  transition: max-height .25s var(--ease, ease), opacity .25s, padding .25s;
}
.nb-mq-hinweis.nb-an { max-height: 80px; opacity: 1; padding-top: 9px; padding-bottom: 9px; }

/* Teilzone einer gewaehlten Komplettzone: gedaempft, mit Vermerk, nicht
   waehlbar (der Klick wird im Skript abgefangen). */
.mq-zone.nb-enthalten .mq-zone-btn { opacity: .45; cursor: not-allowed; }
.mq-zone.nb-enthalten .mq-zone-btn::after {
  content: attr(data-nb-enthalten); display: block; font-size: 11px; color: #56708F; margin-top: 2px;
}
.mq-zone.nb-enthalten { position: relative; }
.mq-zone.nb-enthalten::after {
  content: attr(data-nb-enthalten); position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: #56708F; pointer-events: none;
}
.mq-zone.nb-enthalten .mq-zone-btn::after { content: none; }
.mq-spot.nb-enthalten { opacity: .25; cursor: not-allowed; }

/* Kein Preis vor der Berechnung (Punkt 12): bis /api/packages da ist, steht
   in der Preisspalte ein neutraler Balken statt einer Zahl. */
html:not(.nb-preise-bereit) body.nb-pakete .pkg-card:not(.pkg-card-gratis) .pkg-price-now,
html:not(.nb-preise-bereit) body.nb-pakete .pkg-card:not(.pkg-card-gratis) .pkg-price-was,
html:not(.nb-preise-bereit) body.nb-pakete .pkg-card:not(.pkg-card-gratis) .nb-statt { visibility: hidden; }
html:not(.nb-preise-bereit) body.nb-pakete .pkg-card:not(.pkg-card-gratis) .pkg-price-col { position: relative; }
html:not(.nb-preise-bereit) body.nb-pakete .pkg-card:not(.pkg-card-gratis) .pkg-price-col::after {
  content: ''; position: absolute; right: 0; top: 50%; width: 72px; height: 14px; margin-top: -7px;
  border-radius: 7px; background: linear-gradient(90deg, #E3E9F2, #F3F6FA, #E3E9F2); background-size: 200% 100%;
  animation: nb-platzhalter 1.1s linear infinite;
}
@keyframes nb-platzhalter { from { background-position: 0 0; } to { background-position: 200% 0; } }
/* Der Zaehler ist als Lauf erkennbar: Ziffern in fester Breite, leicht zurueckgenommen. */
.pkg-price-now.nb-zaehlt { font-variant-numeric: tabular-nums; opacity: .82; }

/* Bewertungszahl erst mit Daten. */
html:not(.nb-bewertung-da) .bw-trust-text { visibility: hidden; }

/* Zahlungsanbieter: bei "vor Ort" nichts gedrueckt, nichts klickbar. */
.nb-zahlarten.nb-zahlarten-aus > button[disabled] { opacity: .8; border-color: #d1d5db !important; background: #fff !important; }
.pkg-paytrust-label .nb-paypal { height: 16px; width: auto; display: inline-block; vertical-align: middle; }
.pkg-paytrust-label span.nb-paypal { font-weight: 700; color: #003087; height: auto; }
.pkg-card.open .pkg-paytrust-label .nb-paypal { filter: brightness(0) invert(1); }

/* Sachpruefung vor dem Absenden. */
.nb-buchung-fehler {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 8px; background: #FDECEC; color: #8A1C1C;
  font-size: 13px; line-height: 1.35;
}

/* === 125. Mitarbeiter-Kaesten im Zeit-Schritt (Jasper, 04.09.2026) ========
   Die Flaeche der offenen Mitarbeiterin war 12 px breiter als die
   zugeklappten Kaesten (sie ragt links und rechts 6 px ueber das Raster,
   damit die Uhrzeiten darin 6 px Luft zum Rand haben) und liess der
   naechsten Kopfzeile nur 6 px statt 15. Jetzt sind ALLE Kopfzeilen so breit
   wie die Flaeche (gleiche Kante), die Uhrzeiten behalten ihre 6 px Luft
   zum Rand, und die Kopfzeile nach der offenen Gruppe rueckt so weit ab wie
   zwei zugeklappte voneinander (Klasse nb-ma-nach-offen aus override.js). */
.nb-ma-kopf { width: calc(100% + 12px); margin-left: -6px; margin-right: -6px; }
.nb-ma-kopf[aria-expanded="true"]::after,
body.nb-zeit .slotstaff-head::after { left: 0; right: 0; }
.nb-ma-kopf.nb-ma-nach-offen { margin-top: 16px; }

/* Hinweis nach einer abgebrochenen Wiederherstellung (override.js 119). */
.nb-wieder-hinweis { margin: 0 0 10px; padding: 9px 12px; border-radius: 8px; background: #FFF4E5; color: #7A4B00; font-size: 13px; line-height: 1.35; }

/* Vorschau-Karten unter 300 EUR: Vorab und vor Ort sind waehlbar, Raten nicht. */
.nb-zw-vorschau .nb-zw-option:not(.nb-zw-inaktiv) { cursor: pointer; }

/* Gratis-Kacheln: "statt 49 €" steht buendig unter dem Zonennamen. Die
   allgemeine Regel fuer .nb-statt-klein (7 px Luft neben einem Preis) schob
   die Zeile hier nach rechts (Jasper, 04.09.2026). */
.gratis-zone-btn .gratis-zone-value.nb-statt-klein { margin-left: 0 !important; }

/* Gratis-Zusammenfassung: "0 € statt 278 €" gross und fett, Streichzahl
   daneben, "Du sparst 278 €" als gruener Kasten; Reacts "0 € pro Sitzung"
   sagt nichts und faellt weg. */
.summary-card:has(.nb-zf-gratis) .summary-price { display: none !important; }
.nb-zf-gratis .nb-zf-gratis-preis b { font-size: 22px; font-weight: 800; }
.nb-zf-gratis .nb-zf-statt { font-weight: 600; }
.nb-zf-gratis .nb-zf-statt s { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: .85; }

/* AGB-Satz: die Links (AGB, Datenschutzerklaerung, Stornobedingungen) nur
   unterstrichen, weder fett noch blau (Jasper, 04.09.2026). */
.nb-agb .nb-agb-text a,
.nb-agb .nb-agb-text a:visited,
.nb-agb .nb-agb-text a:hover {
  color: inherit !important;
  font-weight: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* === 126. Ersparnis-Badge in der Ecke der Zusammenfassungsbox ============
   Jasper, 04.09.2026: kein gruener Kasten mehr im Fluss, sondern ein Badge,
   das rechts unten in den Rahmen der Box eingelassen ist. Die Box hat keinen
   Strich, sondern Schatten und Rundung; das Badge laesst ihren Hintergrund
   (Grafik hell-ruhig) durchscheinen, damit er exakt gleich ist, und eine
   feine Linie laeuft oben und links um das Badge herum bis in die Ecke. Die
   Box bekommt unten Platz dafuer. Logische Eigenschaften, damit es auf
   Arabisch links unten sitzt. */
.bw-card .summary-card:has(.nb-zf-ersparnis) { padding-bottom: 58px !important; }
.bw-card .summary-card .nb-zf-preise .nb-zf-ersparnis,
.bw-card .summary-card .nb-zf-ersparnis {
  position: absolute; inset-inline-end: 0; bottom: 0; margin: 0;
  display: inline-flex; align-items: baseline; gap: 8px; max-width: calc(100% - 24px);
  padding: 9px 16px 11px 15px;
  background: transparent; box-shadow: none;
  border: 0; border-top: 1px solid #0e2b5738; border-inline-start: 1px solid #0e2b5738;
  border-radius: 0 !important; border-start-start-radius: 14px !important; border-end-end-radius: 16px !important;
  color: #0E2B57; font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.bw-card .summary-card .nb-zf-ersparnis .nb-spar-text b { font-size: 17px; font-weight: 800; color: #0F6B3A; margin: 0 2px; }
.bw-card .summary-card .nb-zf-ersparnis .nb-spar-prozent { font-size: 12px; font-weight: 700; color: #0F6B3A; }
.bw-card .summary-card .nb-zf-ersparnis .nb-spar-prozent::before { content: "·"; margin-inline-end: 8px; color: #0e2b5766; font-weight: 400; }

/* Das Badge ragt 8 px nach rechts und unten aus der Box (Jasper: "mehr
   badgemaessig"). Die Box darf dafuer nicht mehr abschneiden; ihre Rundung
   bleibt, weil der Hintergrund ohnehin am Rand endet. Das Badge traegt die
   Grafik der Box weiter (override.js, ersparnisBadgeFortsetzen) und einen
   eigenen leichten Schatten fuer den ueberstehenden Teil. */
.bw-card .summary-card:has(.nb-zf-ersparnis) { overflow: visible !important; }
.bw-card .summary-card .nb-zf-preise .nb-zf-ersparnis,
.bw-card .summary-card .nb-zf-ersparnis {
  inset-inline-end: -8px; bottom: -8px;
  padding: 10px 18px 12px 16px;
  box-shadow: 0 10px 22px -14px #0e2b5799, 0 1px 2px #0e2b5722;
}

/* === 127. Rechner: die 3D-Symbole ragen links aus den Zahlkarten =========
   Jasper, 04.09.2026: das Symbol steht leicht ueber die linke Kante der
   Karte hinaus, der Text rueckt entsprechend nach links. Die Spalte fuer das
   Symbol wird schmaler (44 statt 58 px), das Symbol wandert 28 px nach
   links (Kante der Karte ist bei 12 px Innenabstand, also 16 px Ueberstand).
   Die Karten und ihre Eltern schneiden nicht ab (overflow: visible). */
@media (min-width: 700px) {
  .bw-paychoice [role="radiogroup"] > button,
  .bw-paychoice [role="radiogroup"] > button[aria-checked="true"],
  .nb-zw-vorschau .nb-zw-option,
  /* schaerfer als die Regel ".bw-paychoice .nb-zw-option.nb-zw-option" (62 px) in Abschnitt 122 */
  .bw-paychoice .nb-zw-option.nb-zw-option.nb-zw-option.nb-zw-option.nb-zw-option,
  .bw-paychoice .nb-zw-option.nb-zw-option.nb-zw-option.nb-zw-option.nb-zw-option[aria-checked="true"],
  .bw-paychoice .nb-zw-option[aria-checked="true"] + .nb-zw-option.nb-zw-option.nb-zw-option.nb-zw-option.nb-zw-option { grid-template-columns: 42px minmax(0, 1fr) fit-content(150px) !important; column-gap: 8px !important; }
  /* Feste 64 px (vorher schrumpfte das 92-px-Bild ueber max-width auf die
     Spalte, was Jasper als "zu gross und klobig" auffiel, sobald das fehlte).
     Bild links bei -10 px, rechts bei 54 px, Text ab 62 px: 8 px Luft (Jasper: naeher). */
  .bw-paychoice .nb-zw-3d,
  .bw-paychoice .nb-zw-option .nb-zw-3d { width: 64px !important; height: 64px !important; margin: -6px -8px -6px -22px !important; max-width: none; }
  .bw-paychoice, .bw-paychoice [role="radiogroup"], .bw-card, .bw-body, .step-in { overflow: visible; }
}