/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder, textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0px;padding-top:0.5rem;padding-right:0.75rem;padding-bottom:0.5rem;padding-left:0.75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000;}[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder, textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type='checkbox'],[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}[type='checkbox']{border-radius:0px}[type='radio']{border-radius:100%}[type='checkbox']:focus,[type='radio']:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}[type='checkbox']:checked,[type='radio']:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type='checkbox']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");}@media (forced-colors: active) {[type='checkbox']:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='radio']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");}@media (forced-colors: active) {[type='radio']:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{border-color:transparent;background-color:currentColor}[type='checkbox']:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat;}@media (forced-colors: active) {[type='checkbox']:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor}[type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type='file']:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }
    .relative{position:relative}
    .isolate{isolation:isolate}
    .z-0{z-index:0}
    .z-30{z-index:30}
    .mb-0{margin-bottom:0.0rem}
    .ml-auto{margin-left:auto}
    .mr-auto{margin-right:auto}
    .mt-0{margin-top:0.0rem}
    .block{display:block}
    .flex{display:flex}
    .grid{display:grid}
    .aspect-\[1\/1\]{aspect-ratio:1/1}
    .h-auto{height:auto}
    .w-16{width:4.0rem}
    .w-\[100\%\]{width:100%}
    .w-auto{width:auto}
    .w-full{width:100%}
    .max-w-\[100\%\]{max-width:100%}
    .max-w-\[80ch\]{max-width:80ch}
    .max-w-\[8och\]{max-width:8och}
    .shrink-0{flex-shrink:0}
    .origin-center{transform-origin:center}
    .translate-x-\[0px\]{--tw-translate-x:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .translate-y-\[0px\]{--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .rotate-\[0deg\]{--tw-rotate:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .skew-x-\[0deg\]{--tw-skew-x:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .skew-y-\[0deg\]{--tw-skew-y:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .scale-\[100\%\]{--tw-scale-x:100%;--tw-scale-y:100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .transform-gpu{transform:translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .grid-flow-row{grid-auto-flow:row}
    .grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}
    .flex-col{flex-direction:column}
    .flex-nowrap{flex-wrap:nowrap}
    .content-normal{align-content:normal}
    .items-center{align-items:center}
    .justify-normal{justify-content:normal}
    .justify-center{justify-content:center}
    .gap-0{gap:0.0rem}
    .gap-3{gap:0.75rem}
    .gap-4{gap:1.0rem}
    .gap-6{gap:1.5rem}
    .gap-x-2{-moz-column-gap:0.5rem;column-gap:0.5rem}
    .gap-x-8{-moz-column-gap:2.0rem;column-gap:2.0rem}
    .gap-y-2{row-gap:0.5rem}
    .gap-y-8{row-gap:2.0rem}
    .self-center{align-self:center}
    .justify-self-center{justify-self:center}
    .overflow-hidden{overflow:hidden}
    .overflow-y-auto{overflow-y:auto}
    .scroll-smooth{scroll-behavior:smooth}
    .rounded-lg{border-radius:0.5rem}
    .border-b{border-bottom-width:0.12rem}
    .border-surface-700{--tw-border-opacity:1;border-color:rgb(59 81 105 / var(--tw-border-opacity))}
    .bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}
    .bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}
    .bg-surface-50{--tw-bg-opacity:1;background-color:rgb(245 247 250 / var(--tw-bg-opacity))}
    .bg-\[url\(resources\/bernie-hero\.JPG\)\]{background-image:url(resources/bernie-hero.JPG)}
    .bg-cover{background-size:cover}
    .bg-center{background-position:center}
    .bg-no-repeat{background-repeat:no-repeat}
    .object-cover{-o-object-fit:cover;object-fit:cover}
    .object-center{-o-object-position:center;object-position:center}
    .py-2{padding-top:0.5rem;padding-bottom:0.5rem}
    .pb-0{padding-bottom:0.0rem}
    .pb-10{padding-bottom:2.5rem}
    .pb-3{padding-bottom:0.75rem}
    .pb-80{padding-bottom:20.0rem}
    .pl-0{padding-left:0.0rem}
    .pl-5{padding-left:1.25rem}
    .pr-0{padding-right:0.0rem}
    .pr-2{padding-right:0.5rem}
    .pr-5{padding-right:1.25rem}
    .pt-0{padding-top:0.0rem}
    .pt-10{padding-top:2.5rem}
    .pt-80{padding-top:20.0rem}
    .text-center{text-align:center}
    .font-heading{font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'sans-serif'}
    .text-2xl{font-size:1.50rem;line-height:2.00rem}
    .text-5xl{font-size:3.00rem;line-height:3.50rem}
    .text-6xl{font-size:3.75rem;line-height:4.50rem}
    .text-lg{font-size:1.12rem;line-height:1.75rem}
    .text-sm{font-size:0.88rem;line-height:1.25rem}
    .text-xl{font-size:1.25rem;line-height:1.75rem}
    .text-xs{font-size:0.75rem;line-height:1.00rem}
    .font-\[100\]{font-weight:100}
    .font-\[200\]{font-weight:200}
    .font-bold{font-weight:700}
    .font-medium{font-weight:500}
    .uppercase{text-transform:uppercase}
    .normal-case{text-transform:none}
    .not-italic{font-style:normal}
    .leading-none{line-height:1}
    .leading-normal{line-height:1.5}
    .leading-tight{line-height:1.25}
    .tracking-normal{letter-spacing:0em}
    .tracking-wider{letter-spacing:0.05em}
    .text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}
    .text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}
    .text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}
    .text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))}
    .text-red-400{--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity))}
    .text-text-100{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}
    .text-text-400{--tw-text-opacity:1;color:rgb(92 110 128 / var(--tw-text-opacity))}
    .text-text-50{--tw-text-opacity:1;color:rgb(33 40 46 / var(--tw-text-opacity))}
    .text-text-600{--tw-text-opacity:1;color:rgb(136 153 168 / var(--tw-text-opacity))}
    .text-text-950{--tw-text-opacity:1;color:rgb(246 248 249 / var(--tw-text-opacity))}
    .text-opacity-\[100\%\]{--tw-text-opacity:100%}
    .text-opacity-\[80\%\]{--tw-text-opacity:80%}
    .opacity-\[100\%\]{opacity:100%}
    .shadow{--tw-shadow:0px 2px 4px 0px rgba(26,41,82,0.20), 0px 6px 6px 0px rgba(26,41,82,0.20);--tw-shadow-colored:0px 2px 4px 0px var(--tw-shadow-color), 0px 6px 6px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
    .brightness-\[100\%\]{--tw-brightness:brightness(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .brightness-\[150\%\]{--tw-brightness:brightness(150%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .drop-shadow-none{--tw-drop-shadow:;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .saturate-\[0\%\]{--tw-saturate:saturate(0%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .delay-\[0ms\]{transition-delay:0ms}
    .duration-\[300ms\]{transition-duration:300ms}
    .ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
    .text-shadow-none{text-shadow:}
    .last\:border-none:last-child{border-style:none}
    .hover\:bg-\[url\(resources\/bernie-hero\.JPG\)\]:hover{background-image:url(resources/bernie-hero.JPG)}
    .hover\:bg-cover:hover{background-size:cover}
    .hover\:bg-center:hover{background-position:center}
    .hover\:bg-no-repeat:hover{background-repeat:no-repeat}
    .hover\:opacity-\[100\%\]:hover{opacity:100%}
    .hover\:shadow:hover{--tw-shadow:0px 2px 4px 0px rgba(26,41,82,0.20), 0px 6px 6px 0px rgba(26,41,82,0.20);--tw-shadow-colored:0px 2px 4px 0px var(--tw-shadow-color), 0px 6px 6px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
    .hover\:brightness-\[100\%\]:hover{--tw-brightness:brightness(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .hover\:drop-shadow-none:hover{--tw-drop-shadow:;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .hover\:saturate-\[100\%\]:hover{--tw-saturate:saturate(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .group\/flex:hover .group-hover\/flex\:translate-x-\[0px\]{--tw-translate-x:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .group\/flex:hover .group-hover\/flex\:translate-y-\[0px\]{--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .group\/flex:hover .group-hover\/flex\:rotate-\[-90deg\]{--tw-rotate:-90deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .group\/flex:hover .group-hover\/flex\:rotate-\[0deg\]{--tw-rotate:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .group\/flex:hover .group-hover\/flex\:rotate-\[180deg\]{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .group\/flex:hover .group-hover\/flex\:skew-x-\[0deg\]{--tw-skew-x:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .group\/flex:hover .group-hover\/flex\:skew-y-\[0deg\]{--tw-skew-y:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .group\/flex:hover .group-hover\/flex\:scale-\[105\%\]{--tw-scale-x:105%;--tw-scale-y:105%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .group\/rwE4B4B28B_083E_458E_9BED_5611DA239287:hover .group-hover\/rwE4B4B28B_083E_458E_9BED_5611DA239287\:brightness-\[100\%\]{--tw-brightness:brightness(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .group\/rwE4B4B28B_083E_458E_9BED_5611DA239287:hover .group-hover\/rwE4B4B28B_083E_458E_9BED_5611DA239287\:drop-shadow-none{--tw-drop-shadow:;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .group\/rwE4B4B28B_083E_458E_9BED_5611DA239287:hover .group-hover\/rwE4B4B28B_083E_458E_9BED_5611DA239287\:saturate-\[100\%\]{--tw-saturate:saturate(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .peer:hover ~ .peer-hover\:bg-\[url\(resources\/bernie-hero\.JPG\)\]{background-image:url(resources/bernie-hero.JPG)}
    .peer:hover ~ .peer-hover\:bg-cover{background-size:cover}
    .peer:hover ~ .peer-hover\:bg-center{background-position:center}
    .peer:hover ~ .peer-hover\:bg-no-repeat{background-repeat:no-repeat}
    :is(.dark .dark\:text-opacity-\[100\%\]){--tw-text-opacity:100%}
    :is(.dark .dark\:text-opacity-\[80\%\]){--tw-text-opacity:80%}
    @media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}
    @media (min-width: 768px){.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:text-3xl{font-size:1.88rem;line-height:2.25rem}.md\:text-6xl{font-size:3.75rem;line-height:4.50rem}}
    @media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}
    .\[\&\>\*\]\:col-start-1>*{grid-column-start:1}
    .\[\&\>\*\]\:row-start-1>*{grid-row-start:1}
    .\[\&\>\*\]\:min-w-0>*{min-width:0.0rem}
    .\[\&_a\:hover\]\:font-\[400\] a:hover{font-weight:400}
    .\[\&_a\:hover\]\:text-brand-800 a:hover{--tw-text-opacity:1;color:rgb(29 75 176 / var(--tw-text-opacity))}
    .\[\&_a\:hover\]\:no-underline a:hover{text-decoration-line:none}
    .\[\&_a\:visited\]\:font-\[400\] a:visited{font-weight:400}
    .\[\&_a\:visited\]\:text-brand-800 a:visited{--tw-text-opacity:1;color:rgb(29 75 176 / var(--tw-text-opacity))}
    .\[\&_a\:visited\]\:no-underline a:visited{text-decoration-line:none}
    .\[\&_a\]\:font-\[400\] a{font-weight:400}
    .\[\&_a\]\:text-brand-500 a{--tw-text-opacity:1;color:rgb(56 146 248 / var(--tw-text-opacity))}
    .\[\&_a\]\:no-underline a{text-decoration-line:none}
.container{max-width:100%;}
@media (min-width: 640px){.container{max-width:640px}}
@media (min-width: 768px){.container{max-width:768px}}
@media (min-width: 1024px){.container{max-width:1024px}}.group\/rw5FD8B8C4_2148_46F4_AA47_E1A26190F960:has(>[data-rwx-droparea]) {
  max-width: 100%;
}

.group\/rw5FD8B8C4_2148_46F4_AA47_E1A26190F960:not(:has(>[data-rwx-droparea])) {
  max-width: unset;
}
.group\/rw8048ED44_F2AA_4F44_9C09_F051E77129A9:has(>[data-rwx-droparea]) {
  max-width: 100%;
}

.group\/rw8048ED44_F2AA_4F44_9C09_F051E77129A9:not(:has(>[data-rwx-droparea])) {
  max-width: unset;
}
.group\/rw530998F1_B56D_4F55_91C7_0D87DCEDE770:has(>[data-rwx-droparea]) {
  max-width: 100%;
}

.group\/rw530998F1_B56D_4F55_91C7_0D87DCEDE770:not(:has(>[data-rwx-droparea])) {
  max-width: unset;
}
.group\/rw99D63137_9856_4A1D_BCB1_DDB9291639B5:has(>[data-rwx-droparea]) {
  max-width: 100%;
}

.group\/rw99D63137_9856_4A1D_BCB1_DDB9291639B5:not(:has(>[data-rwx-droparea])) {
  max-width: unset;
}
/* [data-rwx-droparea] {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
} */
<!--
  Google Kalender Terminliste (Version 2)
  ----------------------------------------
  Einbau in RapidWeaver Elements:
  1. Neue "Custom Component" (HTML) in Elements anlegen.
  2. Diesen kompletten Code in die "Template"-Ansicht der Komponente einfügen.
  3. API_KEY ist bereits eingetragen. CALENDAR_IDS enthält beide Kalender.
  4. Unten in den Konstanten kannst du:
     - PAST_DAYS: wie weit rückwirkend Termine geladen werden (aktuell 90 Tage)
     - PAST_RESULTS / FUTURE_RESULTS: wie viele Termine je Richtung und Kalender geladen werden
     - Die feste Höhe der scrollbaren Box (aktuell 480px, im style="" am div oben)
  5. Die Klassen (z.B. text-text-50, bg-surface-900 etc.)
     kannst du danach ganz normal über Custom Classes im Elements-Inspector
     anpassen -- oder direkt hier im Code ändern.
-->

<div
  id="gcal-terminliste"
  class="flex flex-col gap-3 w-full overflow-y-auto pr-2"
  style="max-height: 480px; overflow-y: auto; display: flex;"
>
  <p class="text-text-400 text-sm">Termine werden geladen …</p>
</div>

<script>
(function () {
  const API_KEY = "AIzaSyCr0owrsIeZhAlz6eDAl1c1nRVbzjdJjSw";
  const CALENDAR_IDS = [
    "5btjukodd3hgfekodnb5olh3rc@group.calendar.google.com",
    "g67erlrgfht3v2cekftftdgg2c@group.calendar.google.com",
  ];

  const PAST_DAYS = 90;        // wie weit rückwirkend geladen wird
  const PAST_RESULTS = 10;     // max. vergangene Termine PRO Kalender
  const FUTURE_RESULTS = 10;   // max. zukünftige Termine PRO Kalender

  const container = document.getElementById("gcal-terminliste");

  const now = new Date();
  const nowIso = now.toISOString();
  const pastStart = new Date(now.getTime() - PAST_DAYS * 24 * 60 * 60 * 1000).toISOString();

  function buildUrl(calendarId, params) {
    let url = "https://www.googleapis.com/calendar/v3/calendars/"
      + encodeURIComponent(calendarId)
      + "/events?key=" + API_KEY
      + "&singleEvents=true"
      + "&orderBy=startTime";
    Object.keys(params).forEach(function (key) {
      url += "&" + key + "=" + encodeURIComponent(params[key]);
    });
    return url;
  }

  function fetchEvents(url) {
    return fetch(url).then(function (res) {
      if (!res.ok) throw new Error("Fehler beim Laden: " + res.status);
      return res.json();
    });
  }

  const requests = [];
  CALENDAR_IDS.forEach(function (id) {
    // Vergangene Termine (aufsteigend sortiert, wir nehmen die letzten N -> die nähesten zu "jetzt")
    requests.push(
      fetchEvents(buildUrl(id, {
        timeMin: pastStart,
        timeMax: nowIso,
        maxResults: 250,
      })).then(function (data) {
        const items = data.items || [];
        return items.slice(Math.max(0, items.length - PAST_RESULTS));
      })
    );
    // Zukünftige Termine
    requests.push(
      fetchEvents(buildUrl(id, {
        timeMin: nowIso,
        maxResults: FUTURE_RESULTS,
      })).then(function (data) {
        return data.items || [];
      })
    );
  });

  Promise.all(requests)
    .then(function (results) {
      let events = [];
      results.forEach(function (items) {
        events = events.concat(items);
      });

      // Nach Startzeit sortieren (Vergangenheit -> Zukunft)
      events.sort(function (a, b) {
        const aStart = new Date(a.start.dateTime || a.start.date);
        const bStart = new Date(b.start.dateTime || b.start.date);
        return aStart - bStart;
      });

      container.innerHTML = "";

      if (events.length === 0) {
        container.innerHTML =
          '<p class="text-text-400 text-sm">Keine Termine im gewählten Zeitraum.</p>';
        return;
      }

      events.forEach(function (ev) {
        const start = ev.start.dateTime || ev.start.date;
        const isAllDay = !ev.start.dateTime;
        const dateObj = new Date(start);
        const isPast = dateObj < now;

        const dateStr = dateObj.toLocaleDateString("de-DE", {
          weekday: "short",
        });

        const timeStr = isAllDay
          ? "ganztägig"
          : dateObj.toLocaleTimeString("de-DE", {
              hour: "2-digit",
              minute: "2-digit",
            });

        const item = document.createElement("div");
        item.className =
          "flex items-center gap-4 border-b border-surface-700 pb-3 last:border-none"
          + (isPast ? " opacity-60" : "");

        item.innerHTML =
          '<div class="flex flex-col items-center justify-center w-16 shrink-0 bg-gray-600 rounded-lg py-2">' +
            '<span class="text-gray-200 text-xs uppercase">' + dateStr + '</span>' +
            '<span class="text-gray-50 text-lg font-bold">' + dateObj.getDate() + '.' + (dateObj.getMonth() + 1) + '.' + '</span>' +
          '</div>' +
          '<div class="flex flex-col">' +
            '<span class="text-text-50 font-medium">' + (ev.summary || "(Ohne Titel)") + '</span>' +
            '<span class="text-text-400 text-sm">' + timeStr + (ev.location ? " · " + ev.location : "") + '</span>' +
          '</div>';

        container.appendChild(item);
      });
    })
    .catch(function (err) {
      container.innerHTML =
        '<p class="text-red-400 text-sm">Termine konnten nicht geladen werden.</p>';
      console.error(err);
    });
})();
</script>