/* -------------------------------------------------------
Schweißguth Junior – style.css
Zusammengeführt aus: Bootstrap 5.3 · Icon-Fonts · Karussell, Animationen, Popup, Slideshow · Theme: Design-Tokens und Hell/Dunkel-Umschalter · Schweißguth Junior · Gemeinsame Komponenten: Raster, Flächen, Karten, Buttons, Bedienelemente
Ungenutzte Regeln, überflüssige Browser-Präfixe und veraltete Schriftformate wurden entfernt.
------------------------------------------------------- */
/* ======================================================================
Bootstrap 5.3 (Grid, Utilities, Basis)
====================================================================== */
@charset "UTF-8";/*!
* Bootstrap v5.3.0-alpha1 (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text:#0a58ca;--bs-secondary-text:#6c757d;--bs-success-text:#146c43;--bs-info-text:#087990;--bs-warning-text:#997404;--bs-danger-text:#b02a37;--bs-light-text:#6c757d;--bs-dark-text:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#f8f9fa;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#e9ecef;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size: var(--text-md);--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(var(--bs-body-color-rgb), 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(var(--bs-body-color-rgb), 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(var(--bs-body-color-rgb), 0.075);--bs-emphasis-color:#000;--bs-form-control-bg:var(--bs-body-bg);--bs-form-control-disabled-bg:var(--bs-secondary-bg);--bs-highlight-bg:#fff3cd;--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}.h1,.h2,.h3,.h6,h1,h2,h3,h6{margin-top:0;margin-bottom:.5rem;font-weight: var(--font-weight-strong);line-height:1.2;color:var(--bs-heading-color,inherit)}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h6,h6{font-size: var(--text-md)}p{margin-top:0;margin-bottom:1rem}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ul{padding-left:2rem}ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}blockquote{margin:0 0 1rem}b,strong{font-weight: var(--font-weight-strong)}.small,small{font-size: var(--text-sm)}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code{font-family:var(--bs-font-monospace);font-size: var(--text-md)}code{font-size: var(--text-sm);color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}td,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}iframe{border:0}progress{vertical-align:baseline}[hidden]{display:none!important}.list-unstyled{padding-left:0;list-style:none}.blockquote{margin-bottom:1rem;font-size: var(--text-lg)}.blockquote>:last-child{margin-bottom:0}.figure{display:inline-block}.container{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col-12{flex:0 0 auto;width:100%}@media (min-width:768px){.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-6{flex:0 0 auto;width:50%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-12{flex:0 0 auto;width:100%}}@media (min-width:992px){.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}}.table{--bs-table-color:var(--bs-body-color);--bs-table-bg:transparent;--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-body-color);--bs-table-striped-bg:rgba(0, 0, 0, 0.05);--bs-table-active-color:var(--bs-body-color);--bs-table-active-bg:rgba(0, 0, 0, 0.1);--bs-table-hover-color:var(--bs-body-color);--bs-table-hover-bg:rgba(0, 0, 0, 0.075);width:100%;margin-bottom:1rem;color:var(--bs-table-color);vertical-align:top;border-color:var(--bs-table-border-color)}.table>:not(caption)>*>*{padding:.5rem .5rem;background-color:var(--bs-table-bg);border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg)}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size: var(--text-md);font-weight: 400;line-height:1.5;color:var(--bs-body-color);background-color:var(--bs-form-control-bg);background-clip:padding-box;border:var(--bs-border-width) solid var(--bs-border-color);appearance:none;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}form-control::-webkit-date-and-time-value{height:1.5em}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::-moz-placeholder{color:var(--bs-secondary-color);opacity:1}.form-control::placeholder{color:var(--bs-secondary-color);opacity:1}.form-control:disabled{background-color:var(--bs-form-control-disabled-bg);opacity:1}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{transition:none}.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:var(--bs-secondary-bg)}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--bs-secondary-bg)}textarea.form-control{min-height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2))}.form-control.is-invalid{border-color:var(--bs-danger);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus{border-color:var(--bs-danger);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-check-input.is-invalid{border-color:var(--bs-danger)}.form-check-input.is-invalid:checked{background-color:var(--bs-danger-text)}.form-check-input.is-invalid:focus{box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-check-input.is-invalid~.form-check-label{color:var(--bs-danger-text)}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size: var(--text-md);--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:#212529;--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:0.375rem;--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size: var(--text-sm);--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius:0.375rem;--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-right:0;margin-left:0}.accordion{--bs-accordion-color:var(--bs-body-color);--bs-accordion-bg:var(--bs-body-bg);--bs-accordion-transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;--bs-accordion-border-color:var(--bs-border-color);--bs-accordion-border-width:var(--bs-border-width);--bs-accordion-border-radius:var(--bs-border-radius);--bs-accordion-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-accordion-btn-padding-x:1.25rem;--bs-accordion-btn-padding-y:1rem;--bs-accordion-btn-color:var(--bs-body-color);--bs-accordion-btn-bg:var(--bs-accordion-bg);--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");--bs-accordion-btn-icon-width:1.25rem;--bs-accordion-btn-icon-transform:rotate(-180deg);--bs-accordion-btn-icon-transition:transform 0.2s ease-in-out;--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230a58ca'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");--bs-accordion-btn-focus-border-color:#86b7fe;--bs-accordion-btn-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-accordion-body-padding-x:1.25rem;--bs-accordion-body-padding-y:1rem;--bs-accordion-active-color:var(--bs-primary-text);--bs-accordion-active-bg:var(--bs-primary-bg-subtle)}.alert{--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:var(--bs-border-width) solid var(--bs-alert-border-color);--bs-alert-border-radius:0.375rem;--bs-alert-link-color:inherit;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius)}.alert-success{--bs-alert-color:var(--bs-success-text);--bs-alert-bg:var(--bs-success-bg-subtle);--bs-alert-border-color:var(--bs-success-border-subtle);--bs-alert-link-color:var(--bs-success-text)}.alert-danger{--bs-alert-color:var(--bs-danger-text);--bs-alert-bg:var(--bs-danger-bg-subtle);--bs-alert-border-color:var(--bs-danger-border-subtle);--bs-alert-link-color:var(--bs-danger-text)}.progress{--bs-progress-height:1rem;--bs-progress-font-size: var(--text-sm);--bs-progress-bg:var(--bs-secondary-bg);--bs-progress-border-radius:var(--bs-border-radius);--bs-progress-box-shadow:var(--bs-box-shadow-inset);--bs-progress-bar-color:#fff;--bs-progress-bar-bg:#0d6efd;--bs-progress-bar-transition:width 0.6s ease;display:flex;height:var(--bs-progress-height);overflow:hidden;font-size:var(--bs-progress-font-size);background-color:var(--bs-progress-bg);border-radius:var(--bs-progress-border-radius)}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}.clearfix::after{display:block;clear:both;content:""}.d-block{display:block!important}.d-none{display:none!important}.border{border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-top{border-top:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.w-100{width:100%!important}.flex-wrap{flex-wrap:wrap!important}.justify-content-center{justify-content:center!important}.align-items-end{align-items:flex-end!important}.mb-0{margin-bottom:0!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.p-0{padding:0!important}.px-0{padding-right:0!important;padding-left:0!important}.text-center{text-align:center!important}.visible{visibility:visible!important}@media (min-width:768px){.text-md-end{text-align:right!important}}
/* ======================================================================
Icon-Fonts (Flaticon, Themify)
====================================================================== */
@font-face{font-family:flaticon_hotel_;src:url(../fonts/flaticon_hotel_.woff) format("woff"), url(../fonts/flaticon_hotel_.woff2) format("woff2")}i[class*=" icon-"]:before,i[class^=icon-]:before{font-family:flaticon_hotel_!important;font-style:normal;font-weight: 400!important;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[class*=" icon-"]:before,[class^=icon-]:before{font-family:flaticon_hotel_!important;font-style:normal;font-weight: 400!important;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-download:before{content:"\f128"}
@font-face{font-family:Flaticon;src:url(../fonts/Flaticon.woff2) format('woff2'), url(../fonts/Flaticon.woff) format('woff');font-weight:400;font-style:normal}@media screen and (-webkit-min-device-pixel-ratio:0){@font-face{font-family:Flaticon;src:url(Flaticon.svg#Flaticon) format('svg')}}[class*=' flaticon-'],[class^=flaticon-]{line-height:1}[class*=' flaticon-']:after,[class*=' flaticon-']:before,[class^=flaticon-]:after,[class^=flaticon-]:before{font-family:Flaticon;font-style:normal}.flaticon-call:before{content:'\f101'}
@font-face{font-family:themify;src:url(../fonts/themify.woff) format('woff');font-weight:400;font-style:normal}[class*=" ti-"],[class^=ti-]{font-family:themify;speak:none;font-style:normal;font-weight: 400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ti-arrow-right:before{content:"\e628"}.ti-angle-right:before{content:"\e649"}.ti-angle-left:before{content:"\e64a"}.ti-world:before{content:"\e665"}.ti-instagram:before{content:"\e73d"}.ti-facebook:before{content:"\e741"}
/* ======================================================================
Karussell, Animationen, Popup, Slideshow (Owl-, Animate-, Magnific-, Vegas-kompatibel)
====================================================================== */
/**
* Owl Carousel v2.3.4
* Copyright 2013-2018 David Deutsch
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-khtml-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{touch-action:pan-y;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
/**
* Owl Carousel v2.3.4
* Copyright 2013-2018 David Deutsch
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2015 Daniel Eden
*/@keyframes swing{20%{transform:rotate3d(0,0,1,15deg)}40%{transform:rotate3d(0,0,1,-10deg)}60%{transform:rotate3d(0,0,1,5deg)}80%{transform:rotate3d(0,0,1,-5deg)}to{transform:rotate3d(0,0,1,0deg)}}.swing{transform-origin:top center;animation-name:swing}@keyframes fadeOut{from{opacity:1}to{opacity:0}}
/* Magnific Popup CSS */
.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#222;opacity:.8}.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0 8px;box-sizing:border-box}.mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#ccc}.mfp-preloader a:hover{color:#fff}.mfp-s-ready .mfp-preloader{display:none}.mfp-s-error .mfp-content{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;box-shadow:none;touch-action:manipulation}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;color:#fff;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#222}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size: var(--text-sm);line-height:18px;white-space:nowrap}.mfp-arrow{position:absolute;opacity:.65;margin:0;top:50%;margin-top:-55px;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1}.mfp-arrow:after,.mfp-arrow:before{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:medium inset transparent}.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left:after{border-right:17px solid #fff;margin-left:31px}.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #222}.mfp-arrow-right{right:0}.mfp-arrow-right:after{border-left:17px solid #fff;margin-left:39px}.mfp-arrow-right:before{border-left:27px solid #222}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0,0,0,.6);background:#000}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;box-sizing:border-box;padding:40px 0 40px;margin:0 auto}.mfp-figure{line-height:0}.mfp-figure:after{content:'';position:absolute;left:0;top:40px;bottom:40px;display:block;right:0;width:auto;height:auto;z-index:-1;box-shadow:0 0 8px rgba(0,0,0,.6);background:#444}.mfp-figure small{color:#bdbdbd;display:block;font-size: var(--text-sm);line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;font-size: var(--text-sm);line-height:18px;color:#f3f3f3;word-wrap:break-word;padding-right:36px}.mfp-image-holder .mfp-content{max-width:100%}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{transform:scale(.75)}.mfp-arrow-left{transform-origin:0}.mfp-arrow-right{transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}
/*!-----------------------------------------------------------------------------
* Vegas - Fullscreen Backgrounds and Slideshows.
* Licensed under the MIT License.
* http://vegas.jaysalvat.com/
* ----------------------------------------------------------------------------
* Copyright (C) 2010-2021 Jay Salvat
* http://jaysalvat.com/
* --------------------------------------------------------------------------*/
.vegas-overlay,.vegas-slide,.vegas-slide-inner,.vegas-timer,.vegas-wrapper{position:absolute;top:0;left:0;bottom:0;right:0;overflow:hidden;border:none;padding:0;margin:0}.vegas-overlay{opacity:.5;background:url("/") center center}.vegas-timer{top:auto;bottom:0;height:0px}.vegas-timer-progress{width:0;height:100%;background:#aa8453;transition:width ease-out}.vegas-timer-running .vegas-timer-progress{width:100%}.vegas-slide,.vegas-slide-inner{margin:0;padding:0;background:center center no-repeat;transform:translateZ(0);will-change:transform,opacity}body .vegas-container{overflow:hidden!important;position:relative}.vegas-video{min-width:100%;min-height:100%;width:auto;height:auto}body.vegas-container{overflow:auto;position:static;z-index:-2}body.vegas-container>.vegas-overlay,body.vegas-container>.vegas-slide,body.vegas-container>.vegas-timer{position:fixed;z-index:-1}.vegas-transition-blur,.vegas-transition-blur2{opacity:0;filter:blur(32px) brightness(1.01)}.vegas-transition-blur-in,.vegas-transition-blur2-in{opacity:1;filter:blur(0) brightness(1.01)}.vegas-transition-blur2-out{opacity:0}.vegas-transition-burn,.vegas-transition-burn2{opacity:0;filter:contrast(1000%) saturate(1000%)}.vegas-transition-burn-in,.vegas-transition-burn2-in{opacity:1;filter:contrast(100%) saturate(100%)}.vegas-transition-burn2-out{opacity:0;filter:contrast(1000%) saturate(1000%)}.vegas-transition-fade,.vegas-transition-fade2{opacity:0}.vegas-transition-fade-in,.vegas-transition-fade2-in{opacity:1}.vegas-transition-fade2-out{opacity:0}.vegas-transition-flash,.vegas-transition-flash2{opacity:0;filter:brightness(25)}.vegas-transition-flash-in,.vegas-transition-flash2-in{opacity:1;filter:brightness(1)}.vegas-transition-flash2-out{opacity:0;filter:brightness(25)}.vegas-transition-negative,.vegas-transition-negative2{opacity:0;filter:invert(100%)}.vegas-transition-negative-in,.vegas-transition-negative2-in{opacity:1;filter:invert(0)}.vegas-transition-negative2-out{opacity:0;filter:invert(100%)}.vegas-transition-slideDown,.vegas-transition-slideDown2{transform:translateY(-100%)}.vegas-transition-slideDown-in,.vegas-transition-slideDown2-in{transform:translateY(0)}.vegas-transition-slideDown2-out{transform:translateY(100%)}.vegas-transition-slideLeft,.vegas-transition-slideLeft2{transform:translateX(100%)}.vegas-transition-slideLeft-in,.vegas-transition-slideLeft2-in{transform:translateX(0)}.vegas-transition-slideLeft2-out,.vegas-transition-slideRight,.vegas-transition-slideRight2{transform:translateX(-100%)}.vegas-transition-slideRight-in,.vegas-transition-slideRight2-in{transform:translateX(0)}.vegas-transition-slideRight2-out{transform:translateX(100%)}.vegas-transition-slideUp,.vegas-transition-slideUp2{transform:translateY(100%)}.vegas-transition-slideUp-in,.vegas-transition-slideUp2-in{transform:translateY(0)}.vegas-transition-slideUp2-out{transform:translateY(-100%)}.vegas-transition-swirlLeft,.vegas-transition-swirlLeft2{transform:scale(2) rotate(35deg);opacity:0}.vegas-transition-swirlLeft-in,.vegas-transition-swirlLeft2-in{transform:scale(1) rotate(0);opacity:1}.vegas-transition-swirlLeft2-out,.vegas-transition-swirlRight,.vegas-transition-swirlRight2{transform:scale(2) rotate(-35deg);opacity:0}.vegas-transition-swirlRight-in,.vegas-transition-swirlRight2-in{transform:scale(1) rotate(0);opacity:1}.vegas-transition-swirlRight2-out{transform:scale(2) rotate(35deg);opacity:0}.vegas-transition-zoomIn,.vegas-transition-zoomIn2{transform:scale(0);opacity:0}.vegas-transition-zoomIn-in,.vegas-transition-zoomIn2-in{transform:scale(1);opacity:1}.vegas-transition-zoomIn2-out,.vegas-transition-zoomOut,.vegas-transition-zoomOut2{transform:scale(2);opacity:0}.vegas-transition-zoomOut-in,.vegas-transition-zoomOut2-in{transform:scale(1);opacity:1}.vegas-transition-zoomOut2-out{transform:scale(0);opacity:0}.vegas-animation-kenburns{animation:kenburns ease-out}@keyframes kenburns{0%{transform:scale(1.5)}100%{transform:scale(1)}}.vegas-animation-kenburnsDownLeft{animation:kenburnsDownLeft ease-out}@keyframes kenburnsDownLeft{0%{transform:scale(1.5) translate(10%,-10%)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsDownRight{animation:kenburnsDownRight ease-out}@keyframes kenburnsDownRight{0%{transform:scale(1.5) translate(-10%,-10%)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsDown{animation:kenburnsDown ease-out}@keyframes kenburnsDown{0%{transform:scale(1.5) translate(0,-10%)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsLeft{animation:kenburnsLeft ease-out}@keyframes kenburnsLeft{0%{transform:scale(1.5) translate(10%,0)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsRight{animation:kenburnsRight ease-out}@keyframes kenburnsRight{0%{transform:scale(1.5) translate(-10%,0)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsUpLeft{animation:kenburnsUpLeft ease-out}@keyframes kenburnsUpLeft{0%{transform:scale(1.5) translate(10%,10%)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsUpRight{animation:kenburnsUpRight ease-out}@keyframes kenburnsUpRight{0%{transform:scale(1.5) translate(-10%,10%)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsUp{animation:kenburnsUp ease-out}@keyframes kenburnsUp{0%{transform:scale(1.5) translate(0,10%)}100%{transform:scale(1) translate(0,0)}}
/* ======================================================================
Theme: Design-Tokens und Hell/Dunkel-Umschalter (gemeinsam für beide Seiten)
====================================================================== */
/* Gemeinsame Typografie in beiden Projekten: Fließtext, Bedienelemente und Metadaten. */
:root {
--text-sm: 0.875rem; /* 14px */
--text-md: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--heading-sm: 1.375rem;
--font-weight-strong: 500;
--diet-fg: #236b35;
--diet-bg: #e5f2e7;
}
[data-theme="dark"] {
--diet-fg: #a0dfaa;
--diet-bg: #193c25;
}
html { font-synthesis: none; }
/* Stärke wird mit der Schriftfamilie vererbt: Barlow 500, Montserrat 600, Condensed 400. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h5, .h6 {
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
}
th, dt { font-weight: var(--font-weight-strong); }
.diet-label--plant {
color: var(--diet-fg);
background: var(--diet-bg);
}
/* Design-Tokens: hell (Standard) und dunkel. Das Standard-Design je Seite steht als data-theme im . */
:root,
[data-theme="light"],
[data-theme="light"] .theme-surface {
color-scheme: light;
/* Flächen: Section-Grund, abgesetzte Section, Karten/Tabs darauf */
--bg: #f5f2ec;
--bg-alt: #e9e3d7;
--surface: #fffdf9;
--line: rgba(58,45,30,0.12);
--shadow: 0 1px 2px rgba(58,45,30,0.06), 0 10px 28px -14px rgba(58,45,30,0.28);
--bg-card: var(--surface);
--fg: #3a3530;
--fg-h: #1c1a16;
--fg-s: #2a2520;
--fg-m: #7a736a;
--input-bg: rgba(0,0,0,0.06);
--input-fg: #555555;
--option-bg: #f0ede5;
--border: rgba(0,0,0,0.10);
/* Formularfelder */
--field-bg: #fffdf9;
--field-line: rgba(58,45,30,0.24);
--field-line-hover: rgba(58,45,30,0.40);
--field-fg: #1c1a16;
--field-placeholder: #857b6f;
--field-focus-ring: 0 0 0 3px rgba(170,132,83,0.25);
/* Bedienelemente über dem Inhalt (Farbumschalter, Menü) */
--control-bg: rgba(255,253,249,0.92);
--control-fg: #1c1a16;
--control-shadow: 0 2px 12px rgba(28,26,22,0.18);
/* Markenfarbe */
--accent: #aa8453;
--accent-strong: #8a6a40;
--accent-soft: rgba(170,132,83,0.18);
/* Buttons: Primär (Gold) */
--btn-primary-bg: var(--accent);
--btn-primary-fg: #ffffff;
--btn-primary-hover-bg: var(--accent-strong);
--btn-primary-hover-fg: #ffffff;
/* Buttons: Sekundär (Fläche) */
--btn-secondary-bg: var(--bg-card);
--btn-secondary-fg: var(--fg-h);
--btn-secondary-hover-bg: var(--bg);
/* Buttons: Typografie & Maße */
--btn-font-family: 'Barlow Condensed', sans-serif;
--btn-font-size: var(--text-md);
--btn-letter-spacing: 2px;
--btn-padding: 13px 22px;
--btn-radius: 0;
--btn-focus-ring: 0 0 0 3px rgba(170,132,83,0.45);
--btn-transition: 0.3s ease;
}
[data-theme="dark"],
[data-theme="dark"] .theme-surface {
color-scheme: dark;
--bg: #222222;
--bg-alt: #1a1a1a;
--surface: #2c2c2c;
--line: rgba(255,255,255,0.08);
--shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 12px 28px -16px rgba(0,0,0,0.7);
--bg-card: var(--surface);
--fg: rgba(255,255,255,0.70);
--fg-h: #ffffff;
--fg-s: rgba(255,255,255,0.90);
--fg-m: #999999;
--input-bg: rgb(255 255 255 / 5%);
--input-fg: #999999;
--option-bg: #2d2d2d;
--border: rgba(255,255,255,0.08);
--field-bg: rgba(255,255,255,0.05);
--field-line: rgba(255,255,255,0.16);
--field-line-hover: rgba(255,255,255,0.32);
--field-fg: #ffffff;
--field-placeholder: rgba(255,255,255,0.55);
--field-focus-ring: 0 0 0 3px rgba(170,132,83,0.35);
--control-bg: rgba(58,58,58,0.9);
--control-fg: #ffffff;
--control-shadow: 0 2px 14px rgba(0,0,0,0.55);
--btn-secondary-bg: var(--bg-card);
--btn-secondary-hover-bg: var(--bg);
}
/* Immer dunkle Bereiche: Seitenleiste, Footer, Bereiche mit dunklem Bild-Overlay */
#aside,
.footer-top,
.footer-bottom,
[data-overlay-dark] {
color: var(--fg);
--bg: #222222;
--bg-alt: #1a1a1a;
--surface: #2c2c2c;
--line: rgba(255,255,255,0.08);
--shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 12px 28px -16px rgba(0,0,0,0.7);
--bg-card: var(--surface);
--fg: rgba(255,255,255,0.70);
--fg-h: #ffffff;
--fg-s: rgba(255,255,255,0.90);
--fg-m: #999999;
--input-bg: rgb(255 255 255 / 5%);
--input-fg: #999999;
--border: rgba(255,255,255,0.08);
--btn-secondary-bg: var(--bg-card);
--btn-secondary-fg: var(--fg-h);
--btn-secondary-hover-bg: var(--bg);
--field-bg: rgba(255,255,255,0.05);
--field-line: rgba(255,255,255,0.16);
--field-line-hover: rgba(255,255,255,0.32);
--field-fg: #ffffff;
--field-placeholder: rgba(255,255,255,0.55);
}
/* Fläche im Seiten-Design innerhalb immer dunkler Bereiche (z. B. Aktuelles im Hero) */
.theme-surface {
color: var(--fg);
}
/* Weicher Farbwechsel nur während des Umschaltens */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, fill 0.25s ease !important;
}
/* ======================================================================
Schweißguth Junior
====================================================================== */
:root {
--brand: #008000;
}
/* -------------------------------------------------------
Schweissguth CSS V.2.1
------------------------------------------------------- */
@font-face {
font-family: 'Montserrat';
font-display: swap;
font-style: normal;
font-weight: 400;
src: url('../assets/fonts/montserrat-v13-latin-regular.woff2') format('woff2'), url('../assets/fonts/montserrat-v13-latin-regular.woff') format('woff');
}
/* montserrat-600 - latin */
@font-face {
font-family: 'Montserrat';
font-display: swap;
font-style: normal;
font-weight: 600;
src: url('../assets/fonts/montserrat-v13-latin-600.woff2') format('woff2'), url('../assets/fonts/montserrat-v13-latin-600.woff') format('woff');
}
/* barlow-regular - latin */
@font-face {
font-display: swap;
font-family: 'Barlow';
font-style: normal;
font-weight: 400;
src: url('../assets/fonts/barlow-v12-latin-regular.woff2') format('woff2');
}
/* barlow-500 - latin */
@font-face {
font-display: swap;
font-family: 'Barlow';
font-style: normal;
font-weight: 500;
src: url('../assets/fonts/barlow-v12-latin-500.woff2') format('woff2');
}
/* barlow-condensed-regular - latin */
@font-face {
font-display: swap;
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 400;
src: url('../assets/fonts/barlow-condensed-v12-latin-regular.woff2') format('woff2');
}
/* ======= Basic style ======= */
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
word-wrap: break-word;
list-style: none;
}
body {
font-family: 'Barlow', sans-serif;
--font-weight-strong: 500;
font-size: var(--text-md);
font-weight: 400;
line-height: 1.5em;
color: var(--fg);
overflow-x: hidden !important;
background: var(--bg);
}
p {
font-family: 'Barlow', sans-serif;
--font-weight-strong: 500;
font-size: var(--text-md);
font-weight: 400;
line-height: 1.5em;
color: var(--fg);
margin-bottom: 20px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
h1,
h2,
h3
{
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
font-weight: var(--font-weight-strong);
line-height: 1.1em;
margin: 0 0 20px 0;
color: var(--fg-h);
}
h6 {
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
font-weight: 400;
line-height: 1em;
margin: 0 0 20px 0;
color: var(--fg-h);
}
h1 {font-size: clamp(2rem, 4vw + 1rem, 4.5rem);}
h2 {font-size: clamp(1.75rem, 4vw + 1rem, 2.75rem);}
img {
width: 100%;
height: auto;
transition: all 0.5s;
color: #f4f4f4;
}
span,
a,
a:hover {
text-decoration: none;
color: inherit;
}
p a,
p a:hover {
font-weight: var(--font-weight-strong);
color: var(--fg-s);
}
b, strong {
font-weight: var(--font-weight-strong);
color: var(--fg-s);
}
/* text field */
input[type="password"]:focus,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
textarea:focus {
outline: none;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
text-shadow: none;
box-shadow: none;
line-height: 1.75em;
transition: background-color .15s ease-out;
background: transparent;
border: 0px solid transparent;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
border: 0px solid transparent;
}
select {
padding: 10px;
border-radius: 5px;
}
table,
tr,
td {
border: 1px solid var(--border);
}
tr,
td {
padding: 10px;
}
input[type="radio"],
input[type="checkbox"] {
display: inline;
}
.alert-success {
background: green;
color: rgba(255, 255, 255, 0.8);
border-radius: 0px;
}
/* placeholder */
/* blockquote */
blockquote {
padding: 40px;
display: block;
position: relative;
background-color: var(--input-bg);
overflow: hidden;
margin: 20px 0;
font-size: var(--text-md);
font-weight: 400;
}
blockquote p {
font-family: inherit;
margin-bottom: 0 !important;
color: inherit;
max-width: 650px;
width:100%;
position:relative;
z-index:3;
}
blockquote:before {
content: '\e645';
font-family: 'Themify';
position: absolute;
right: 40px;
bottom: 40px;
font-size: 110px;
opacity: 0.1;
line-height: 1;
}
.about blockquote {
padding: 30px;
}
.about blockquote:before {
content: '\e645';
font-family: 'Themify';
position: absolute;
right: 20px;
bottom: 20px;
top: 20px;
font-size: 70px;
opacity: 0.1;
line-height: 1;
}
blockquote p {
margin-bottom: 0;
}
blockquote p a {
color:inherit;
}
/* ======= Helper style ======= */
.mt-20 {
margin-top: 20px !important;
}
.mt-30 {
margin-top: 30px !important;
}
.mt-40 {
margin-top: 40px !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mb-60 {
margin-bottom: 60px !important;
}
/* important */
.bg-img {
background-size: cover;
background-repeat: no-repeat;
}
.bg-fixed {
background-attachment: fixed;
}
.count {
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
}
.valign {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.animate-box {
opacity: 0;
}
:root {
scroll-behavior: auto;
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
outline: none;
}
/* background & color */
.bg-blck {
background: var(--bg-alt);
}
.bg-darkgray {
background: var(--bg);
}
/* star - white */
.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: 0.9em;
margin-right: 0.9em;
margin-bottom: 1.2em;
border-right: 0.3em solid transparent;
border-bottom: 0.7em solid #fff;
border-left: 0.3em solid transparent;
/* Controlls the size of the stars. */
font-size: 8px;
}
.star:before, .star:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
top: 0.6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: 0.7em solid #fff;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
.star:after {
transform: rotate(35deg);
}
/* Star rating */
/* ======= Selection style ======= */
::-webkit-selection {
color: var(--fg-h);
background: var(--accent);
}
::-moz-selection {
color: var(--fg-h);
background: var(--accent);
}
::selection {
color: var(--fg-h);
background: var(--accent);
}
/* ======= Preloader style ======= */
.preloader-bg,
#preloader {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--bg-alt);
z-index: 999999;
}
#preloader {
display: table;
table-layout: fixed;
}
#preloader-status {
display: table-cell;
vertical-align: middle;
}
.preloader-position {
position: relative;
margin: 0 auto;
text-align: center;
box-sizing: border-box;
}
.loader {
position: relative;
width: 55px;
height: 55px;
left: 50%;
top: auto;
margin-left: -22px;
margin-top: 1px;
animation: rotate 1s infinite linear;
border: 1px solid rgba(255,255,255, 0.1);
border-radius: 50%;
}
.loader span {
position: absolute;
width: 55px;
height: 55px;
top: -1px;
left: -1px;
border: 1px solid transparent;
border-top: 1px solid var(--accent);
border-radius: 50%;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* ======= Owl-Theme custom style ======= */
.owl-theme .owl-nav.disabled + .owl-dots {
margin-top: 0px;
line-height: 1.5;
display: block;
outline: none;
float: left;
}
.owl-theme .owl-dots .owl-dot span {
width: 40px;
height: 10px;
margin: 0 3px;
border-radius: 0;
background: rgba(170,132,83,0.3);
transition: background-color 0.3s ease;
}
@media screen and (max-width: 600px) {
.owl-theme .owl-dots .owl-dot span {
width: 10px;
height: 10px;
pointer-events: none;
}
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
background: var(--accent);
}
/* === owl carousel nav style === */
.clients .owl-theme .owl-nav,
.team .owl-theme .owl-nav,
.news .owl-theme .owl-nav,
.pricing .owl-theme .owl-nav,
.testimonials .owl-theme .owl-nav,
.rooms-page .owl-theme .owl-nav,
.rooms3 .owl-theme .owl-nav,
.rooms2 .owl-theme .owl-nav,
.eventroom .owl-theme .owl-nav {
position: absolute!important;
top: 35%!important;
bottom: auto!important;
width: 100%
}
.clients .owl-theme .owl-nav,
.team .owl-theme .owl-nav,
.news .owl-theme .owl-nav,
.pricing .owl-theme .owl-nav,
.testimonials .owl-theme .owl-nav,
.rooms-page .owl-theme .owl-nav,
.rooms3 .owl-theme .owl-nav,
.rooms2 .owl-theme .owl-nav,
.eventroom .owl-theme .owl-nav{
position: relative;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.clients .owl-theme .owl-prev,
.team .owl-theme .owl-prev,
.news .owl-theme .owl-prev,
.pricing .owl-theme .owl-prev,
.testimonials .owl-theme .owl-prev,
.rooms-page .owl-theme .owl-prev,
.rooms3 .owl-theme .owl-prev,
.rooms2 .owl-theme .owl-prev,
.eventroom .owl-theme .owl-prev {
left: 10px!important
}
.clients .owl-theme .owl-next,
.team .owl-theme .owl-next,
.news .owl-theme .owl-next,
.pricing .owl-theme .owl-next,
.testimonials .owl-theme .owl-next,
.rooms-page .owl-theme .owl-next,
.rooms3 .owl-theme .owl-next,
.rooms2 .owl-theme .owl-next,
.eventroom .owl-theme .owl-next {
right: 10px!important
}
.clients .owl-theme .owl-prev,
.clients .owl-theme .owl-next,
.team .owl-theme .owl-prev,
.team .owl-theme .owl-next,
.news .owl-theme .owl-prev,
.news .owl-theme .owl-next,
.pricing .owl-theme .owl-prev,
.pricing .owl-theme .owl-next,
.testimonials .owl-theme .owl-prev,
.testimonials .owl-theme .owl-next,
.rooms-page .owl-theme .owl-prev,
.rooms-page .owl-theme .owl-next,
.rooms3 .owl-theme .owl-prev,
.rooms3 .owl-theme .owl-next,
.rooms2 .owl-theme .owl-prev,
.rooms2 .owl-theme .owl-next,
.eventroom .owl-theme .owl-prev,
.eventroom .owl-theme .owl-next {
color: var(--fg-h);
position: absolute!important;
top: 50%;
padding: 0;
height: 50px;
width: 50px;
border-radius: 0%;
transform: translateY(-50%);
background: var(--bg-card);
border: 1px solid #272727;
line-height: 0;
text-align: center;
font-size: 16px
}
.clients .owl-theme .owl-prev>span,
.clients .owl-theme .owl-next>span,
.team .owl-theme .owl-prev>span,
.team .owl-theme .owl-next>span,
.news .owl-theme .owl-prev>span,
.news .owl-theme .owl-next>span,
.pricing .owl-theme .owl-prev>span,
.pricing .owl-theme .owl-next>span,
.testimonials .owl-theme .owl-prev>span,
.testimonials .owl-theme .owl-next>span,
.rooms-page .owl-theme .owl-prev>span,
.rooms-page .owl-theme .owl-next>span,
.rooms3 .owl-theme .owl-prev>span,
.rooms3 .owl-theme .owl-next>span,
.rooms2 .owl-theme .owl-prev>span,
.rooms2 .owl-theme .owl-next>span,
.eventroom .owl-theme .owl-prev>span,
.eventroom .owl-theme .owl-next>span {
position: absolute;
line-height: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.clients .owl-theme .owl-nav [class*=owl-],
.team .owl-theme .owl-nav [class*=owl-],
.news .owl-theme .owl-nav [class*=owl-],
.pricing .owl-theme .owl-nav [class*=owl-],
.testimonials .owl-theme .owl-nav [class*=owl-],
.rooms-page .owl-theme .owl-nav [class*=owl-],
.rooms3 .owl-theme .owl-nav [class*=owl-],
.rooms2 .owl-theme .owl-nav [class*=owl-],
.eventroom .owl-theme .owl-nav [class*=owl-] {
width: 40px;
height: 40px;
line-height: 34px;
background: transparent;
color: var(--fg-h);
font-size: 11px;
margin-right: 15px;
margin-left: 15px;
cursor: pointer;
border: 1px solid rgba(255,255,255, 0.7);
border-radius: 100%;
transition: all 0.2s ease-in-out;
transform: scale(1.0);
}
.clients .owl-theme .owl-nav [class*=owl-]:hover,
.team .owl-theme .owl-nav [class*=owl-]:hover,
.news .owl-theme .owl-nav [class*=owl-]:hover,
.pricing .owl-theme .owl-nav [class*=owl-]:hover,
.testimonials .owl-theme .owl-nav [class*=owl-]:hover,
.rooms-page .owl-theme .owl-nav [class*=owl-]:hover,
.rooms3 .owl-theme .owl-nav [class*=owl-]:hover,
.rooms2 .owl-theme .owl-nav [class*=owl-]:hover,
.eventroom .owl-theme .owl-nav [class*=owl-]:hover {
transform: scale(0.9);
background: transparent;
border: 1px solid #b19777;
color: #FFF;
}
@media screen and (max-width: 768px) {
.clients .owl-theme .owl-nav,
.team .owl-theme .owl-nav,
.news .owl-theme .owl-nav,
.pricing .owl-theme .owl-nav,
.testimonials .owl-theme .owl-nav,
.rooms-page .owl-theme .owl-nav,
.rooms3 .owl-theme .owl-nav,
.rooms2 .owl-theme .owl-nav,
.eventroom .owl-theme .owl-nav {
display: none;
}
.legal-links {
float:left
}
}
.container {
padding-right: 60px;
padding-left: 60px;
}
/* ======= Menu style ======= */
.wrap {
display: block;
background:#1b1b1b;
right: 0;
z-index: 101;
position: fixed;
width: 340px;
transform: translateX(100%);
transition: .3s all ease;
bottom: 0;
top: 0;
box-shadow: 0 -20px 20px -5px rgba(0, 0, 0, 0.05);
min-height: 300px;
overflow: auto;
padding: 0 40px;
border: none;
border-left: 1px solid rgba(255,255,255,0.03);
}
/* navigation footer */
/* reservation field for slider */
/* ======= Sidebar style ======= */
#page {
width: 100%;
overflow: hidden;
position: relative;
}
#aside {
padding: 50px 0;
width: 350px;
position: fixed;
bottom: 0;
top: 0;
left: 0;
overflow-x: hidden;
z-index: 1001;
background: #008000;
transition: 0.5s;
scrollbar-width: none;
}
@media screen and (max-width: 1200px) {
#aside {
width: 300px;
transform: translateX(-300px);
}
}
/* logo */
#aside .logo {
text-align: center;
margin-bottom: 20px;
display: block;
}
#aside .logo h2 {
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
font-size: 30px;
font-weight: var(--font-weight-strong);
display: block;
width: 100%;
position: relative;
color: var(--accent);
letter-spacing: 2px;
margin-bottom: 0;
text-transform: uppercase;
}
#aside .logo span {
display: block;
font-family: 'Barlow Condensed', sans-serif;
--font-weight-strong: 400;
font-size: var(--text-sm);
color: var(--fg-h);
font-weight: 400;
letter-spacing: 6px;
display: block;
margin-top: 5px;
line-height: 1.5em;
text-transform: uppercase;
margin-right: 5px;
}
/* Star rating */
#aside .logo .star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: 0.9em;
margin-right: 0.9em;
margin-bottom: 2em;
border-right: 0.3em solid transparent;
border-bottom: 0.7em solid var(--accent);
border-left: 0.3em solid transparent;
/* Controlls the size of the stars. */
font-size: 5px;
opacity: 0;
}
#aside .logo .star:before,
#aside .logo .star:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
top: 0.6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: 0.7em solid var(--accent);
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
#aside .logo .star:after {
transform: rotate(35deg);
}
#aside .logo .logo-img {
width: 160px;
}
#aside .logo a span {
display: block;
margin-top: 0px;
}
/* Menu */
#aside .main-menu,
#aside .main-menu ul,
#aside .main-menu ul li,
#aside .main-menu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
display: block;
position: relative;
box-sizing: border-box;
text-align: center;
}
#aside .main-menu {
margin-bottom: 45px;
}
@media screen and (max-width: 768px) {
#aside .main-menu {
margin-bottom: 30px;
}
}
#aside .main-menu ul ul {
display: none;
}
#aside .main-menu ul ul li:last-of-type {
padding-bottom: 11px;
}
#aside .main-menu > ul > li > a {
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: var(--text-md);
font-weight: var(--font-weight-strong);
color: var(--fg-h);
/*border-bottom: solid 1px rgba(0, 0, 0, 0.15);*/
padding: 3px 0 3px 0;
list-style: none;
}
#aside .main-menu > ul > li > a:hover,
#aside .main-menu > ul > li.active > a {
color: var(--accent);
}
#aside .main-menu > ul > li:last-child > a,
#aside .main-menu > ul > li.last > a {}
#aside .main-menu > ul > li > a:hover > span::after,
#aside .main-menu > ul > li.active > a > span::after {
border-color: var(--border);
}
#aside .main-menu ul ul li a {
padding: 8px 0 8px 0;
list-style: none;
font-size: var(--text-md);
font-weight: 400;
line-height: 1.25em;
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
}
#aside .main-menu ul ul li:hover > a,
#aside .main-menu ul ul li.active > a,
#aside .main-menu ul ul li > a.active {
color: var(--accent);
}
#aside .main-menu ul ul ul li a {
margin-left: 15px;
}
#aside .main-menu > ul > li > ul > li:last-child > a,
#aside .main-menu > ul > li > ul > li.last > a {
padding-bottom: 8px;
}
#aside .main-menu ul ul li.active > a::after,
#aside .main-menu ul ul li > a:hover::after {}
/* footer */
#aside .footer {
position: relative;
bottom: 0;
left: 0;
background: rgb(0 0 0 / 10%);
padding: 10px;
background-position: 0 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, green 50%);
transition: background-position 0.5s ease-out 0s;
background-size: 200.22% auto;
}
#aside .footer:hover {
background-position: -99.99% 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #92002B 50%);
}
#aside .footer .footer-contact-text {
font-size: var(--text-md);
margin: 0;
color: var(--fg-h);
padding-bottom: 20px;
}
#aside .footer .footer-contact-phone {
font-size: var(--text-lg);
color: var(--accent);
font-family: 'Barlow Condensed', sans-serif;
--font-weight-strong: 400;
letter-spacing: 1px;
font-weight: 400;
display: block;
transition: all 500ms ease;
}
#aside .footer .footer-contact-mail {
font-size: var(--text-md);
line-height: 3em;
color: var(--fg-m);
position: relative;
display: inline-block;
transition: all 500ms ease;
}
#aside .footer .footer-about-social-list {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 15px;
}
@media screen and (max-width: 768px) {
#aside .footer {
}
}
/* important offcanvason for menu */
body.offcanvason {
overflow-x: hidden;
}
body.offcanvason #aside {
transform: translateX(0);
width: 100%;
z-index: 999;
position: fixed;
}
body.offcanvason #main,
body.offcanvason .nav-toggle {
top: 0;
}
/* ======= Content style ======= */
#main {
width: calc(100% - 350px);
float: right;
transition: 0.5s;
}
@media screen and (max-width: 1200px) {
#main {
width: 100%;
}
.container {
padding-right: 4vw;
padding-left: 4vw;
}
}
@media (min-width: 768px){
.container {
max-width: 92vw;
}
}
/* ======= Navigation style ======= */
#main-menu {
margin-bottom: 90px;
}
.nav-toggle {
cursor: pointer;
text-decoration: none;
}
.nav-toggle.active i::before,
.nav-toggle.active i::after {
background: #fff;
}
.nav-toggle.dark.active i::before,
.nav-toggle.dark.active i::after {
background: #171717;
}
.nav-toggle:hover,
.nav-toggle:focus,
.nav-toggle:active {
outline: none;
border-bottom: none !important;
}
.nav-toggle i {
position: relative;
display: inline-block;
zoom: 1;
width: 20px;
height: 1px;
color: var(--fg-h);
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #fff;
transition: all .2s ease-out;
top: -5px;
}
.nav-toggle i::before,
.nav-toggle i::after {
content: '';
width: 20px;
height: 1px;
background: #fff;
position: absolute;
left: 0;
transition: 0.2s;
}
.nav-toggle.dark i {
position: relative;
color: #171717;
background: #171717;
transition: all .2s ease-out;
}
.nav-toggle.dark i::before,
.nav-toggle.dark i::after {
background: #171717;
transition: 0.2s;
}
.nav-toggle i::before {
top: -7px;
}
.nav-toggle i::after {
bottom: -7px;
}
.nav-toggle:hover i::before {
top: -10px;
}
.nav-toggle:hover i::after {
bottom: -10px;
}
.nav-toggle.active i {
background: transparent;
}
.nav-toggle.active i::before {
top: 0;
transform: rotateZ(45deg);
}
.nav-toggle.active i::after {
bottom: 0;
transform: rotateZ(-45deg);
}
.nav-toggle {
position: fixed;
left: 0px;
top: 0px;
z-index: 9999;
cursor: pointer;
opacity: 1;
visibility: hidden;
padding: 12px 15px;
transition: 0.5s;
margin: 15px;
}
@media screen and (max-width: 1200px) {
#main-menu {
margin-bottom: 60px;
}
.nav-toggle {
opacity: 1;
visibility: visible;
}
}
.news .owl-theme .owl-nav [class*=owl-] {
opacity: 0;
}
.news .owl-theme:hover .owl-nav [class*=owl-] {
opacity: 1;
}
/* ======= Section style ======= */
.section-padding {
padding-top: clamp(40px, calc(10vw + 20px), 120px);
padding-bottom: clamp(40px, calc(10vw + 20px), 120px);
}
.testimonials .section-padding {
padding: 60px 0 0 0;
}
.section-padding h6 {
color: var(--accent);
font-size: var(--text-lg);
margin-bottom: 20px;
}
.section-subtitle {
font-size: var(--text-lg);
font-family: 'Barlow Condensed', sans-serif;
--font-weight-strong: 400;
font-weight: 400;
color: var(--accent);
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
margin-bottom: 5px;
}
.section-subtitle span {
color: var(--accent);
}
.section-title span {
color: var(--fg-h);
}
/* ======= Header style ======= */
.header {
min-height: 100vh;
overflow: hidden;
position: relative;
}
.header .caption h2 {
font-weight: 400;
font-size: 30px;
}
.header .caption h3 {
position: relative;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
font-size: 48px;
text-transform: uppercase;
line-height: 1.35em;
animation-delay: .6s;
color: var(--fg-h);
font-weight: 400;
letter-spacing: 7px;
}
.header .caption h1 {
position: relative;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
font-size: 55px;
text-transform: uppercase;
line-height: 1.35em;
animation-delay: .6s;
color: var(--fg-h);
font-weight: 400;
letter-spacing: 15px;
}
.header .caption p {
font-size: var(--text-lg);
line-height: 1.75em;
margin-bottom: 0;
color: var(--fg-h);
animation-delay: .6s;
margin-right: 15px;
}
.header .caption p span {
letter-spacing: 5px;
text-transform: uppercase;
margin: 0 5px;
padding-right: 14px;
position: relative;
}
.header .caption p span:last-child {
padding: 0;
}
.header .caption p span:last-child:after {
display: none;
}
.header .caption p span:after {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--bg);
position: absolute;
top: 10px;
right: 0;
opacity: .5;
}
.header .caption .butn-dark {
animation-delay: .8s;
}
hr {
margin-top: 5px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid rgba(255,255,255,0.3);
}
/* ======= Slider-fade style (Homepage Slider) ======= */
.slider-fade .owl-item {
height: 100vh;
position: relative;
}
/* slider-fade owl-nav next and prev */
.slider-fade .owl-nav {
position: absolute;
bottom: 7%;
right: 12%;
}
.slider-fade .owl-prev {
float: left;
}
.slider-fade .owl-next {
float: right;
}
.slider-fade .owl-theme .owl-nav [class*=owl-] {
width: 40px;
height: 40px;
line-height: 34px;
background: transparent;
border-radius: 100%;
color: var(--fg-h);
font-size: 10px;
margin-right: 3px;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.5);
transition: all 0.2s ease-in-out;
transform: scale(1.0);
}
.owl-theme .owl-nav [class*=owl-]:hover {
background: transparent;
border: 1px solid var(--accent);
color: var(--fg-h);
}
@media screen and (max-width: 768px) {
.slider-fade .owl-nav {
display: none;
}
}
/* owl-dots for slider */
.slider-fade .owl-dots {
position: absolute;
text-align: center;
top: 50%;
right: 5%;
transform: translateY(-50%);
width: 40px;
text-align: right !important
}
.slider-fade .owl-dots .owl-dot span {
background: transparent;
display: none
}
.slider-fade .owl-dots .owl-dot {
height: 12px;
width: 12px;
border: 1px solid rgba(255,255,255, 0.7);
display: block;
margin-bottom: 10px;
border-radius: 50%
}
.slider-fade .owl-dots .owl-dot.active {
border-color: var(--accent);
background: var(--accent);
}
/* reservation field for slider */
/* ======= Slider style (Inner Page Slider) ======= */
.slider .owl-item {
height: 100vh;
position: relative;
}
.slider .owl-theme .owl-dots {
position: absolute;
width: 100%;
bottom: 3%;
right: 12%;
text-align: right;
}
.slider .owl-theme .owl-dots .owl-dot span {
width: 13px;
height: 13px;
margin: 0 3px;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(255,255,255,0.5);
}
.slider .owl-theme .owl-dots .owl-dot.active span,
.slider .owl-theme .owl-dots .owl-dot:hover span {
background: var(--accent);
border: 1px solid var(--accent);
}
/* bounce */
/* ===== Kenburns Slider style ===== */
.kenburns-section {
z-index: 1;
display: flex;
overflow: hidden;
min-height: 100vh;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.kenburns-section::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(#000 20%, transparent 20%);
background-size: 3px 3px;
}
#kenburnsSliderContainer .vegas-overlay {}
/* reservation field for Kenburns slider */
/* bounce */
/* ======= Page Banner Header style ======= */
.banner-header {
height: 60vh;
background-position: right;
background-size: cover;
}
@media screen and (max-width: 768px) {
.banner-header {
height: 40vh;
}
}
.banner-header .caption {
position: relative;
}
.banner-header p {
font-size: var(--text-md);
margin-bottom: 0;
color: var(--fg-h);
}
.banner-header p a {
color: var(--accent);
}
/* author & date */
.banner-header .post {
margin-top: 20px;
}
.banner-header .post div {
display: inline-block;
}
.banner-header .post .author {
margin-right: 20px;
font-size: var(--text-sm);
}
/* bounce */
@media screen and (max-width: 767px) {
.banner-header {}
.banner-header h1 {
font-size: 45px;
}
.banner-header h1 {
font-size: 45px;
}
}
/* ======= Video Background ======= */
/* ======= Team style ======= */
/* ======= eventroom style ======= */
/* line animation */
/* facilities */
/* permalink */
.permalink {
font-family: 'Barlow Condensed', sans-serif;
--font-weight-strong: 400;
font-size: var(--text-md);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--fg-h);
height: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
transition: all .3s ease;
display: inline;
}
.permalink a {
color: var(--fg-h);
text-align: right;
float: right;
}
.permalink i {
font-size: 10px!important;
color: var(--accent);
text-align: right;
display: inline-block;
vertical-align: middle;
}
.permalink a:hover,
.permalink i:hover {
color: var(--accent);
}
/* ======= Rooms 2 style ======= */
/* hr style */
hr {
margin-top: 5px;
margin-bottom: 20px;
border: 0;
}
/* button link */
/* reservation button */
.cta-box {
display: flex;
align-items: center;
}
.cta-box .icon {
position: relative;
top: 3px;
}
.cta-box .icon span {
font-size: 35px;
color: var(--accent);
}
.cta-box .text {
font-size: var(--text-lg);
color: var(--accent);
margin-left: 10px;
}
.cta-box .text p {
font-size: var(--text-md);
margin: 0;
color: var(--fg-h);
}
.cta-box .text a {
font-size: var(--text-lg);
color: var(--accent);
letter-spacing: 1px;
}
/* ======= Rooms 3 ======= */
/* ======= Rooms Page style ======= */
/* page list */
.content-section-head {
margin-bottom: 30px;
}
.content-section-head .section-subtitle {
margin-bottom: 10px;
}
.content-section-head .section-title {
margin-bottom: 0;
}
.content-detail > *:last-child {
margin-bottom: 0;
}
.checkmark-list {
margin: 0;
padding: 0;
list-style: none;
}
.checkmark-list li {
position: relative;
padding-left: 36px;
line-height: 1.6em;
}
.checkmark-list li + li {
margin-top: 14px;
}
.checkmark-list li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 21px;
height: 21px;
border: 1px solid rgba(170,132,83,0.5);
background: rgba(170,132,83,0.12);
}
.checkmark-list li::after {
content: "";
position: absolute;
left: 7px;
top: 8px;
width: 7px;
height: 11px;
border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(40deg);
}
.region-links-section {
align-items: flex-start;
}
.region-copy {
padding-right: 24px;
}
.region-copy p:last-child {
margin-bottom: 0;
}
.region-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-content: flex-start;
}
.region-tag {
display: inline-flex;
align-items: center;
min-height: 46px;
padding: 10px 18px;
border: 1px solid rgba(170,132,83,0.26);
background: rgba(255,255,255,0.03);
color: #d6d6d6;
font-family: 'Barlow Condensed', sans-serif;
--font-weight-strong: 400;
letter-spacing: 0.4px;
line-height: 1;
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
:root:not([data-theme="dark"]) .region-tag {
border-color: rgba(170, 132, 83, 0.34);
background: rgba(170, 132, 83, 0.04);
color: rgba(58, 53, 48, 0.82);
}
.region-tag:hover,
.region-tag:focus {
color: var(--fg-h);
border-color: var(--accent);
background: rgba(170,132,83,0.18);
}
:root:not([data-theme="dark"]) .region-tag:hover,
:root:not([data-theme="dark"]) .region-tag:focus {
color: #1c1a16;
background: rgba(170, 132, 83, 0.14);
}
.region-tag.is-current {
color: var(--fg-h);
border-color: var(--accent);
background: var(--accent);
}
:root:not([data-theme="dark"]) .region-tag.is-current {
color: #1c1a16;
}
@media screen and (max-width: 991px) {
.region-copy {
padding-right: 0;
margin-bottom: 30px;
}
}
/* owl-nav next and prev */
.rooms-page .owl-nav {
position: absolute;
bottom: 3%;
left: 12%;
}
.rooms-page .owl-prev {
float: left;
}
.rooms-page .owl-next {
float: right;
}
.rooms-page .owl-theme .owl-nav [class*=owl-] {
width: 40px;
height: 40px;
line-height: 34px;
background: transparent;
border-radius: 100%;
color: rgba(255, 255, 255, 0.75);
font-size: 11px;
margin-right: 3px;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.2s ease-in-out;
transform: scale(1.0);
}
.rooms-page .owl-theme .owl-nav [class*=owl-]:hover {
transform: scale(0.9);
background: transparent;
border: 1px solid #b19777;
color: #b19777;
}
@media screen and (max-width: 768px) {
.rooms-page .owl-nav {
display: none;
}
}
/* ======= Facilties style ======= */
/*
.facilties .facility-shape:hover span {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
*/
/* hr */
hr {
margin-top: 5px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid rgba(255,255,255,0.25);
}
/* room facilities */
/* ======= Services style ======= */
.services .img {
position: relative;
overflow: hidden;
}
.services .img:hover img {
filter: none;
transform: scale(1.09, 1.09);
transition: all 1s ease;
}
.services .img img {
transition: all .5s;
}
.services .content {
width: 100%;
padding: 20px 30px;
}
.services .content .date {
display: table-cell;
position: relative;
width: 80px;
z-index: 2;
}
.services .content .date h3 {
font-size: 65px;
font-weight: var(--font-weight-strong);
color: var(--accent);
margin-bottom: 0px;
}
.services .content .date h6 {
color: var(--fg-m);
letter-spacing: 2px;
font-size: var(--text-sm);
font-family: 'Barlow', sans-serif;
--font-weight-strong: 500;
text-transform: uppercase;
font-weight: 400;
}
.services .content .cont {
display: block;
width: 100%;
}
.services .content .cont h3 {
margin-bottom: 10px;
}
.services .content .cont p {
margin-bottom: 0;
}
.services .content .cont .butn-dark {
margin-top: 15px;
}
@media screen and (max-width: 767px) {
.services .content .cont .butn-dark {
position: absolute;
top: -140px;
right: 10px;
}
.services .img {
height: 150px!important;
}
.services .img img {
bottom: 0;
position: absolute;
}
}
.services .content .info {
font-size: var(--text-md);
letter-spacing: 2px;
color: var(--accent);
font-family: 'Barlow Condensed', sans-serif;
--font-weight-strong: 400;
text-transform: uppercase;
margin-bottom: 5px;
}
@media screen and (max-width: 991px) {
.services .content {
padding: 20px 30px;
}
.services .content {
padding: 20px 30px;
}
.services .content .cont p:not(.news p) {
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
}
@media screen and (max-width: 480px) {
.services .content .date {
width: 60px;
}
.services .content .date h3 {
font-size: 40px;
}
.services .content {
padding: 20px 10px;
}
.service-card .desc {
padding: 20px!important;
}
}
/* ======= Restaurant Menu style ======= */
.restaurant-menu .owl-carousel .owl-stage-outer {
padding: 0 0 60px 0;
margin-top: 40px;
}
.restaurant-menu .owl-theme .owl-nav [class*=owl-] {
position: absolute;
top: 0;
background: transparent;
color: var(--fg-h);
width: 52px;
height: 52px;
line-height: 30px;
border-radius: 0;
border: 1px solid var(--accent);
transition: all .5s;
margin: 0;
}
.restaurant-menu .owl-theme .owl-nav [class*=owl-]:hover {
background: transparent;
color: var(--accent);
}
.restaurant-menu .bg-img .owl-theme .owl-nav [class*=owl-] {
color: var(--fg-h);
}
.restaurant-menu .owl-carousel .owl-nav .owl-next {
right: 0;
}
.restaurant-menu .owl-carousel .owl-nav .owl-prev {
left: 0;
}
.restaurant-menu .owl-carousel .owl-nav .owl-next span,
.restaurant-menu .owl-carousel .owl-nav .owl-prev span {
font-size: 12px;
}
.restaurant-menu .owl-theme:hover .owl-nav [class*=owl-] {
opacity: 1;
}
.restaurant-menu .tabs-icon .owl-item.actived .item {
color: var(--fg-h);
position: relative;
background: transparent;
padding: 15px;
border-top: 1px solid var(--accent);
border-bottom: 1px solid var(--accent);
}
.restaurant-menu .tabs-icon .owl-item.actived .item .icon {
color: var(--accent);
}
.restaurant-menu .owl-carousel .owl-nav .owl-prev {
left: -85px;
}
.restaurant-menu .owl-carousel .owl-nav .owl-next {
right: -85px;
}
/* ======= Clients style ======= */
.clients .owl-carousel {
margin: 20px 0;
}
/* ======= Gallery style ======= */
/* magnific popup custom */
.mfp-figure button {
border: 0px solid transparent;
}
button.mfp-close,
button.mfp-arrow {
border: 0px solid transparent;
background: transparent;
}
/* ======= Promo Video and Testimonials style ======= */
/* play button */
/* video section */
/* video gallery */
.video-gallery-button {
position: relative;
margin: auto;
transform: scale(1.3);
z-index: 4;
margin-left: 15px;
float: right;
}
.video-gallery-polygon {
z-index: 2;
padding-left: 5px;
display: inline-block;
position: absolute;
bottom: 15px;
right: 15px;
background: transparent;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.5);
color: var(--fg-h);
padding: 7px 6px 7px 8px;
line-height: 0;
}
.video-gallery-polygon:hover {
backdrop-filter: blur(5px);
border: 1px solid #fff;
color: var(--accent);
}
/* testimonials style */
.testimonials-box {
position: relative;
background: transparent;
}
.testimonials-box .head-box h6 {
font-family: 'Barlow Condensed', sans-serif;
--font-weight-strong: 400;
color: var(--fg-h);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 6px;
margin-bottom: 10px;
}
@media screen and (max-width: 991px) {
.testimonials-box {
padding: 35px 20px;
}
}
.testimonials .item {
margin-bottom: 30px;
position: relative;
}
.testimonials .item .quote {
position: absolute;
right: 20px;
top: 90px;
width: 70px;
margin: 0 auto 30px;
opacity: .1;
}
.testimonials .item .info {
text-align: left;
margin: 30px 0 15px 0;
}
.testimonials .item .info h6 {
font-size: var(--text-md);
margin-bottom: 0px;
padding-top: 0px;
font-weight: 400;
font-family: 'Barlow Condensed', sans-serif;
--font-weight-strong: 400;
color: var(--fg-h);
line-height: 1em;
text-transform: uppercase;
letter-spacing: 2px;
}
.testimonials .item .info span {
font-size: var(--text-sm);
color: var(--fg-h);
line-height: 1em;
width: 100%;
}
.testimonials .item .info span:last-child {
transform: translateY(-10px);
}
.testimonials .item .info i {
color: #222;
font-size: 6px;
}
@media screen and (max-width: 767px) {
.testimonials-box {
padding: 0px;
}
.row>* {
padding-right: 0;
padding-left: 0;
}
.mb-4 {
margin-bottom: 0.75rem!important;
}
}
/* ======= subnav style ======= */
.subnav {
position: absolute;
bottom: 5%;
z-index: 5;
width: inherit;
}
.booking-inner {
position: relative;
border-radius: 0;
}
.form1 {
display: block;
padding: 0;
position: relative;
}
.form1 label {
display: none;
}
.form1 .heronav:last-of-type {
margin-bottom: 0px;
}
.heronav a {
width: 100%;
}
.menu-banner-header {
position: relative;
padding-bottom: 0;
}
.menu-banner-header .container {
position: relative;
height: 100%;
display: flex;
align-items: center;
max-width: 100%;
width: 100%;
}
.menu-hero-row {
position: absolute;
bottom: 5%;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
.menu-hero-subnav {
position: relative;
bottom: auto;
z-index: 6;
}
.hero-plan-nav .form1 {
display: flex;
flex-wrap: nowrap;
width: 100%;
}
.hero-plan-nav .heronav {
float: none;
flex: 1 1 0;
margin-bottom: 0;
}
.hero-plan-nav .heronav button,
.hero-plan-nav .heronav a {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-plan-nav .btn-form1-submit,
.hero-plan-nav .btn-subnav {
padding: 0 16px;
}
.hero-plan-highlight {
box-shadow: inset 0 -3px 0 var(--accent);
}
@media screen and (max-width: 991px) {
.menu-banner-header .container {
padding-left: 12px;
padding-right: 12px;
}
.menu-banner-header[data-overlay-dark]:before {
opacity: 0.62;
}
.menu-hero-row {
bottom: 0;
background: var(--bg-alt);
padding: 12px 0;
}
.hero-plan-nav .form1 {
display: grid;
width: 100%;
min-width: 0;
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.hero-plan-nav .heronav-portal,
.hero-plan-nav .heronav-joker {
width: auto;
flex: initial;
grid-column: span 5;
}
.hero-plan-nav .heronav-kw {
width: auto;
flex: initial;
min-width: 0;
grid-column: span 2;
}
.hero-plan-nav .btn-form1-submit,
.hero-plan-nav .btn-subnav {
padding: 0 8px;
text-align: center;
line-height: 56px;
}
}
/* responsive */
@media (max-width: 991) {
.btn-form1-submit:after {
background: none;
}
.subnav {
position: relative;
bottom: auto;
padding: 30px 0;
background: var(--bg-alt);
}
}
/* booking form */
.booking-box {
position: relative;
background: var(--bg-alt);
padding: 35px;
margin-bottom: 35px;
}
.booking-box .head-box h6 {
font-size: var(--text-md);
font-family: 'Barlow Condensed', sans-serif;
--font-weight-strong: 400;
font-weight: 400;
color: var(--accent);
text-transform: uppercase;
position: relative;
letter-spacing: 6px;
margin-bottom: 10px;
}
@media screen and (max-width: 991px) {
.booking-box {
margin-bottom: 90px;
padding: 35px 20px;
}
}
/* ======= Pricing style ======= */
.service-card {
background-color: var(--bg-card);
margin-bottom: 30px;
overflow: hidden;
min-height: 100%;
}
.service-card .desc {
display: flex;
flex-direction: column;
padding: 40px;
min-height: 320px;
}
.service-card .desc p {
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.service-card__header {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 20px;
}
.service-card h3 {
line-height: 1;
margin: 0;
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
font-size: var(--text-lg);
flex: 1 1 auto;
}
.service-card__crest-group {
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 12px;
margin-left: auto;
flex: 0 0 auto;
}
.service-card__crest {
width: 44px;
height: 54px;
object-fit: contain;
opacity: 0.5;
filter: grayscale(1);
}
.service-card .list {
text-align: left;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
.service-card .list li {
position: relative;
font-size: var(--text-md);
padding-left: 30px;
}
.service-card .list li+li {
margin-top: 5px;
}
.service-card .list li i {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
color: var(--accent);
}
@media screen and (max-width: 767px) {
.service-card .desc {
min-height: 0;
padding: 30px;
}
.service-card__header {
gap: 16px;
}
.service-card__crest {
width: 38px;
height: 46px;
}
}
/* ======= Careers style ======= */
.position {
position: relative;
display: flex;
margin-top: -1px;
padding: 40px 45px 40px 50px;
transition: background-color .3s;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background-color: transparent;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
flex-wrap: wrap
}
/* hover */
.position:hover {
background-color: var(--accent);
}
@media only screen and (max-width:991px) {
.position {
flex-direction: column;
-webkit-box-pack: initial;
-ms-flex-pack: initial;
justify-content: initial;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
}
/* ======= Accordion Box (for Faqs) style ======= */
.accordion-box {
position: relative;
padding: 0;
}
.accordion-box .block {
position: relative;
background: var(--bg-card);
border-radius: 0px;
overflow: hidden;
margin-bottom: 15px;
}
.accordion-box .block.active-block {
background-color: var(--bg-card);
}
.accordion-box .block:last-child {
margin-bottom: 0;
}
.accordion-box .block .acc-btn {
position: relative;
font-size: var(--text-lg);
line-height: 27px;
font-weight: 400;
cursor: pointer;
padding: 20px 40px;
padding-right: 60px;
color: var(--fg-h);
transition: all 500ms ease;
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
}
.accordion-box .block .acc-btn .count {
color: var(--accent);
padding-right: 3px;
}
.accordion-box .block .acc-btn:before {
position: absolute;
right: 35px;
top: 20px;
height: 30px;
font-size: 14px;
font-weight: 400;
color: var(--accent);
line-height: 30px;
content: "\e61a";
font-family: "Themify";
transition: all 500ms ease;
}
.accordion-box .block .acc-btn.active {
background-color: var(--bg-card);
color: var(--accent);
}
.accordion-box .block .acc-btn.active:before {
content: "\e622";
}
.accordion-box .block .acc-content {
position: relative;
display: none;
}
.accordion-box .block .content {
position: relative;
padding: 0px 40px 30px;
background-color: var(--bg-card);
color: var(--fg-m);
}
.accordion-box .block .acc-content.current {
display: block;
}
.accordion-box .block .content .text {
display: block;
position: relative;
top: 0px;
display: block;
}
/* ======= News style ======= */
/* ======= News 2 style ======= */
/* news sidebar */
/* pagination */
/* ======= Post style ======= */
/* ======= Contact style ======= */
.contact h3 {
font-size: 24px;
color: var(--fg-h);
}
.map {
filter: grayscale(100%);
}
/* ======= Buttons style ======= */
/* dark */
/* light */
/* dark2 */
/* light2 */
/* ====== Coming Soon ======= */
/* coming form */
/* go home */
/* ======= 404 Page style ======= */
/* ======= Footer style ======= */
.footer {
position: relative;
display: block;
}
.footer-top {
position: relative;
display: block;
background-color: #1e1e1e;
padding: 90px 0 60px 0;
z-index: 1;
}
.footer-top .footer-column {
margin-bottom: 30px;
}
.footer-title {
font-size: 24px;
color: #ffffff;
margin-bottom: 20px;
}
.footer-about-social-list {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 20px;
}
.footer-about-social-list a {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
font-size: 20px;
color: rgba(255, 255, 255, 0.72);
transition: all 500ms ease;
}
.footer-about-social-list a + a {
margin-left: 15px;
}
.footer-about-social-list a:hover {
color: var(--accent);
}
.footer-explore-list li + li {
margin-top: 3px;
}
.footer-explore-list li a {
position: relative;
display: block;
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.72);
transition: all 500ms ease;
}
.footer-explore-list li a:hover {
color: var(--accent);
}
.footer-contact {
position: relative;
display: block;
}
.footer-contact .footer-title {
margin-bottom: 20px;
}
.footer-contact-text {
font-size: var(--text-md);
margin: 0;
color: rgba(255, 255, 255, 0.72);
padding-bottom: 20px;
}
.footer-contact-info p {
margin: 0;
}
.footer-contact-phone {
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
font-size: var(--text-lg);
color: var(--accent);
font-weight: 400;
display: block;
transition: all 500ms ease;
}
.footer-contact-phone:hover {
color: var(--fg-h);
}
.footer-contact-mail {
font-size: var(--text-md);
line-height: 3em;
color: #ffffff;
position: relative;
display: inline-block;
transition: all 500ms ease;
}
.footer-contact-mail:hover {
color: #ffffff;
}
.footer-contact-mail:before {
position: absolute;
bottom: 9px;
left: 0;
right: 0;
height: 1px;
background-color: var(--accent);
content: "";
transition: all 500ms ease;
}
.footer-contact-mail:hover:before {
background-color: var(--accent);
}
/* language */
select {
width: 160px;
max-width: 100%;
height: 70px;
padding: 0 30px;
border: 1px solid #adadad;
color: var(--fg-m);
-webkit-appearance: none;
-moz-appearance: none;
}
.footer-bottom {
position: relative;
display: block;
background-color: #1e1e1e;
box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.05);
padding: 32px 0;
}
.footer-bottom-inner {
position: relative;
display: block;
}
.copyright {
margin: 0;
color: rgba(255, 255, 255, 0.72);
}
.copyright a {
color: #ffffff;
transition: all 500ms ease;
}
.copyright a:hover {
color: var(--accent);
}
/* ======= toTop Button style ======= */
.progress-wrap {
position: fixed;
bottom: 30px;
right: 30px;
height: 45px;
width: 45px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 400ms linear;
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.progress-wrap::after {
position: absolute;
font-family: 'themify';
content: '\e648';
text-align: center;
line-height: 45px;
font-size: 12px;
font-weight: 400;
color: #323232;
left: 0;
top: 0;
height: 45px;
width: 45px;
cursor: pointer;
display: block;
z-index: 1;
transition: all 400ms linear;
}
.progress-wrap svg path {
fill: none;
}
.progress-wrap svg.progress-circle path {
stroke: rgba(255, 255, 255, 0.1);
stroke-width: 2;
box-sizing: border-box;
transition: all 400ms linear;
}
.progress-wrap {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.progress-wrap::after {
color: var(--accent);
}
.progress-wrap svg.progress-circle path {
stroke: var(--accent);
}
/* ======= Overlay Effect Bg image style ======= */
[data-overlay-dark] {
position: relative;
}
[data-overlay-dark] .container {
position: relative;
z-index: 2;
}
[data-overlay-dark]:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
[data-overlay-dark]:before {
background: #000;
}
[data-overlay-dark] h1,
[data-overlay-dark] h2,
[data-overlay-dark] h3,
[data-overlay-dark] h6,
[data-overlay-dark] span {
color: var(--fg-h);
}
[data-overlay-dark="0"]:before {
opacity: 0;
}
[data-overlay-dark="1"]:before {
opacity: 0.1;
}
[data-overlay-dark="2"]:before {
opacity: 0.2;
}
[data-overlay-dark="3"]:before {
opacity: 0.3;
}
[data-overlay-dark="4"]:before {
opacity: 0.4;
}
[data-overlay-dark="5"]:before {
opacity: 0.5;
}
[data-overlay-dark="6"]:before {
opacity: 0.6;
}
[data-overlay-dark="7"]:before {
opacity: 0.7;
}
[data-overlay-dark="8"]:before {
opacity: 0.8;
}
[data-overlay-dark="9"]:before {
opacity: 0.9;
}
[data-overlay-dark="10"]:before {
opacity: 1;
}
/* ======= Responsive style ======= */
@media (min-width: 1200px) {
.container {
max-width: 1140px !important;
}
}
@media screen and (max-width: 991px) {
.bg-fixed {
background-attachment: scroll !important;
}
.header {
background-attachment: scroll !important;
background-position: 50% 0% !important;
}
.header .caption h1 {
font-size: 40px;
}
.banner-header .booking-box {
display: none;
}
}
@media screen and (max-width: 767px) {
.header .caption h1 {
font-size: 30px;
margin-bottom: 15px;
letter-spacing: 10px;
line-height: 1.35em;
}
.header .caption h3 {
font-size: 30px;
margin-bottom: 15px;
letter-spacing: 10px;
line-height: 1.35em;
}
.header .caption p {
font-size: var(--text-md);
margin-right: 10px;
}
}
.service-card:hover img {
transform: scale(1.09, 1.09);
transition: all 1s ease;
overflow: hidden;
}
.gg-arrow-long-right {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs,1));
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
box-shadow: inset 0 0 0 2px;
width: 24px;
height: 6px;
}
.gg-arrow-long-right::after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
height: 6px;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
right: 0;
bottom: -2px
}
*, *:before, *:after { box-sizing: border-box;
}
.text ul li {
list-style:square;
}
.stellenanzeigen {
list-style: none;
margin: 0 0 15px;
padding: 0;
}
.stellenanzeigen li + li {
margin-top: 15px;
}
.stellenanzeigen a {
position: relative;
display: block;
box-sizing: border-box;
font-size: var(--text-lg);
line-height: 27px;
cursor: pointer;
padding: 20px 40px;
color: var(--fg-h);
font-family: 'Montserrat', sans-serif; --font-weight-strong: 600;
width: 100%;
background: var(--bg-card);
}
.content ul {
margin-bottom: 25px;
}
.legal-links {
float:right
}
.footer-bottom .legal-links,
.footer-bottom .legal-links a,
.footer-bottom .legal-links span {
color: rgba(255, 255, 255, 0.72);
}
.footer-bottom .legal-links a {
transition: color 0.3s ease;
}
.footer-bottom .legal-links a:hover,
.footer-bottom .legal-links a:focus {
color: var(--accent);
}
.legal-links span {
padding: 0 5px
}
@media screen and (max-width: 768px) {
.legal-links {
float:left
}
}
@media screen and (max-width: 991px) {
#main { display: flex;flex-direction: column;}
#main section:not([class^="order-"]) {
order: 3;
}
footer {
order: 4;
}
}
.dge-badge-card {
display: flex;
align-items: center;
gap: 22px;
padding: 26px 30px;
background-color: rgba(0, 0, 0, 0.05);
border-left: 5px solid #1ea56a;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}
.dge-badge-card img {
width: 78px;
height: 78px;
flex: 0 0 78px;
}
.dge-badge-card-title {
margin: 0 0 4px;
color: #7a5a34;
font-size: 22px;
line-height: 1;
}
@media screen and (max-width: 767px) {
.dge-badge-card {
gap: 16px;
padding: 22px 20px;
}
.dge-badge-card img {
width: 64px;
height: 64px;
flex-basis: 64px;
}
.dge-badge-card-title {
font-size: 26px;
}
}
.overlay .text h3 {
margin-bottom: 10px;
}
.overlay .text {
position: relative;
z-index: 1; /* Ensures the text container stays on top */
}
.overlay .text span:hover {
background: #ab8a62;
}
/* FORM ELEMENTS */
.contact-form h3 {
color: var(--accent);
}
.contact-form .row>* {
}
.form-subrow {
margin-left: 0;
margin-right: 0;
}
.form-subrow > [class*="col-"] {
padding-left: 0;
padding-right: 14px;
}
.form-subrow > [class*="col-"]:last-child {
padding-right: 0;
}
.form-field-card {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-field-card label {
display: block;
min-height: 24px;
line-height: 1.2;
margin-bottom: 0 !important;
}
.form-field-card .select,
.form-field-card .form-control,
.form-field-card input {
margin-top: 0 !important;
}
.order-mode-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.order-mode-button {
width: 100%;
min-height: 62px;
border: 1px solid rgba(170,132,83,0.45);
background: var(--input-bg);
color: var(--fg-h);
font-size: var(--text-lg);
letter-spacing: 0.4px;
text-transform: none;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.order-mode-button:hover,
.order-mode-button:focus {
background: rgb(255 255 255 / 8%);
border-color: var(--accent);
color: var(--fg-h);
}
.order-mode-button.is-active {
background: var(--btn-primary-bg);
border-color: var(--btn-primary-bg);
color: var(--btn-primary-fg);
}
.order-mode-grid.is-invalid {
padding: 12px;
border: 1px solid #dc3545;
background: rgba(220,53,69,0.08);
}
.contact-form .row.align-items-end > [class*="col-"] .form-field-card,
.contact-form .row.align-items-end > [class*="col-"] .select {
margin-bottom: 0;
}
.weekday-help {
margin-top: 10px;
}
.weekday-help.is-invalid {
color: #ff8f8f;
}
.weekday-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
gap: 14px;
margin-bottom: 10px;
}
.weekday-option {
display: flex;
align-items: center;
gap: 12px;
min-height: 54px;
padding: 14px 16px;
background: var(--input-bg);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 0;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.weekday-option:hover {
background: rgb(255 255 255 / 8%);
border-color: rgba(170,132,83,0.45);
}
.weekday-option.is-selected {
background: rgba(170,132,83,0.18);
border-color: rgba(170,132,83,0.85);
}
.weekday-grid.is-invalid .weekday-option {
border-color: rgba(220,53,69,0.65);
}
.weekday-option span {
color: var(--fg-s);
font-size: var(--text-md);
line-height: 1.2;
}
.weekday-option input[type="checkbox"] {
width: 18px;
height: 18px;
flex: 0 0 auto;
appearance: auto;
accent-color: var(--accent);
border: 0 !important;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0;
margin: 0;
}
.weekday-option input[type="checkbox"]::before {
content: none;
}
.weekday-option input[type="checkbox"]:checked + span {
color: #ffffff;
}
.visually-hidden-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media screen and (max-width: 767px) {
.form-field-card {
margin-bottom: 12px;
}
.order-mode-grid {
grid-template-columns: 1fr;
}
.form-subrow > [class*="col-"] {
padding-right: 0;
}
.weekday-grid {
grid-template-columns: 1fr;
}
}
input {
width: 100%;
height: 48px;
color: var(--fg);
padding: 0 20px;
background: var(--input-bg);
border: none !important;
}
input[type=tel] {
width: 100%;
height: 48px;
padding: 0 20px;
}
input[type=email],
input[type=password]
{
width: 100%;
height: 48px;
padding: 0 20px;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 0;
padding: 0;
border: 1px solid #ddd;
border-radius: 0;
appearance: none;
display: inline-block;
position: relative;
cursor: pointer;
}
option {
background-color: var(--option-bg);
}
select.form-control {
-webkit-appearance: none;
-webkit-border-radius: 0px;
/* light mode: dark arrow on light input bg */
background-image: url("data:image/svg+xml;utf8,");
background-position: 100% 50%;
background-repeat: no-repeat;
}
[data-theme="dark"] select.form-control {
/* dark mode: light arrow on dark input bg */
background-image: url("data:image/svg+xml;utf8,");
}
.form-check {
padding-left:0;
display: grid;
grid-template-columns: 1fr 12fr;
}
.form-check-label {
line-height: 1;
opacity: 0.8;
padding-left: 0;
display: inline-block;
vertical-align: middle;
}
/* Stil für den inneren Pseudoelement, das das tatsächliche Kontrollkästchen darstellt */
input[type="checkbox"]::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background-color: var(--accent);
opacity: 0;
}
input[type="checkbox"]:checked::before {
opacity: 1;
}
textarea {
max-width: 100%;
height: 140px;
border: 1px solid #ddd;
padding: 20px;
}
.form-control {
display: block;
width: 100%;
height: 48px;
padding: 0 20px;
font-size: var(--text-md);
font-weight: 400;
line-height: 1.5;
color: var(--input-fg);
background: var(--input-bg);
background-clip: padding-box;
border: none!important;
border-radius: 0;
}
@media (prefers-reduced-motion:reduce) {
.form-control {
transition: none
}
}
.form-control::-ms-expand {
background-color: transparent;
border: 0
}
.form-control:disabled {
background-color: #e9ecef;
opacity: 1
}
select.form-control:focus::-ms-value {
color: #495057;
background-color: #fff
}
select.form-control[size] {
height: auto
}
textarea.form-control {
height: auto;
padding: 20px;
}
textarea.form-control {
height: auto;
padding: 20px;
}
.form-check-input {
position: absolute;
margin-top: .3rem;
margin-left: -1.25rem
}
.form-check-input:disabled~.form-check-label {
color: #6c757d
}
.form-check-label {
margin-bottom: 0
}
.form-control.is-invalid, input[type="text"].is-invalid, input[type="email"].is-invalid, input[type="number"].is-invalid {
border-color: #dc3545;
padding-right: calc(1.5em + .75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
background-repeat: no-repeat;
background-position: center right calc(.375em + .1875rem);
background-size: calc(.75em + .375rem) calc(.75em + .375rem)
}
.form-control.is-invalid:focus {
border-color: #dc3545;
box-shadow: 0 0 0 .2rem rgba(220,53,69,.25)
}
textarea.form-control.is-invalid {
padding-right: calc(1.5em + .75rem);
background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem)
}
.form-check-input.is-invalid~.form-check-label {
color: #dc3545
}
.mb-10 {
margin-bottom: 10px;
}
.mb-20 {
margin-bottom: 20px;
}
/* Anfrage-Button */
/* ======= Junior 2026: Banner-Links, Aktuelles, Kontakt, Speisepläne, Produktpässe ======= */
/* Stimmen aus den Einrichtungen */
.testimonials .item p {
font-size: var(--text-lg);
line-height: 1.7em;
color: var(--fg-s);
}
.testimonials .item .info .cont h6 {
font-size: var(--text-sm);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
}
.junior-testimonial-carousel,
.junior-testimonial-carousel .owl-stage-outer {
overflow: hidden;
}
.junior-testimonial-carousel.owl-theme .owl-dots {
text-align: left;
margin-top: 10px;
}
@media screen and (max-width: 767px) {
/* Banner im Hero auf dem Smartphone ohne Bild, damit alle drei Platz finden */
}
/* Aktuelles & Social Media */
.junior-news-card {
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 30px;
background: var(--bg);
color: var(--fg);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.junior-news-card:hover,
.junior-news-card:focus {
color: var(--fg);
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}
.junior-news-card img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.junior-news-card__body {
display: block;
padding: 24px 26px 28px;
}
.junior-news-card__tag {
display: block;
margin-bottom: 8px;
font-size: var(--text-sm);
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
}
.junior-news-card__title {
display: block;
margin-bottom: 8px;
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
font-size: var(--text-lg);
line-height: 1.3;
color: var(--fg-h);
}
.junior-news-card__text {
display: block;
line-height: 1.6;
}
/* Kontakt-Schnellzugriff */
.junior-quicklinks {
display: grid;
gap: 14px;
}
.junior-quicklink {
display: block;
padding: 20px 56px 20px 24px;
position: relative;
background: var(--bg);
border-left: 5px solid var(--accent);
color: var(--fg);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.junior-quicklink::after {
content: "\2192";
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
color: var(--accent);
}
.junior-quicklink:hover,
.junior-quicklink:focus {
color: var(--fg);
background: var(--bg-card);
transform: translateX(4px);
}
.junior-quicklink__title {
display: block;
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
font-size: var(--text-md);
color: var(--fg-h);
}
.junior-quicklink__text {
display: block;
font-size: var(--text-sm);
color: var(--fg-m);
}
/* Speisepläne als Download-Liste */
.download-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.download-list__item {
display: flex;
align-items: center;
gap: 14px;
min-height: 64px;
padding: 16px 20px;
background: var(--bg);
border: 1px solid var(--border);
color: var(--fg-h);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.download-list__item i {
font-size: 22px;
color: var(--accent);
}
.download-list__item:hover,
.download-list__item:focus {
color: var(--fg-h);
border-color: rgba(170, 132, 83, 0.85);
}
.download-list__item.is-highlight {
background: rgba(170, 132, 83, 0.18);
border-color: rgba(170, 132, 83, 0.85);
}
/* Produktpässe: Gerichtsfoto und lesbare Nährwerte */
.produktpass-card {
--produktpass-image-width: 300px;
display: grid;
grid-template-columns: var(--produktpass-image-width) minmax(0, 1fr);
margin-bottom: 16px;
background: var(--bg-card);
color: var(--fg-h);
overflow: hidden;
}
.produktpass-card__visual {
position: relative;
width: 100%;
min-width: 0;
min-height: var(--produktpass-image-width);
overflow: hidden;
align-self: stretch;
}
/* Feste Bildspalte: Die Texthöhe darf die Bildbreite nicht verändern. */
.produktpass-card__intro { min-width: 0; margin-bottom: 16px; }
.produktpass-card__intro p { margin: 10px 0 0; font-size: var(--text-md); line-height: 1.5; }
.produktpass-card__preview {
position: absolute;
inset: 0;
min-width: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
/* Fertige 1:1-Fotos mit generativ erweitertem Hintergrund. */
.produktpass-card__photo {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.produktpass-card__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: none;
}
.produktpass-card__content {
min-width: 0;
padding: 24px;
}
.produktpass-card__label {
position: absolute;
z-index: 1;
top: 12px;
right: 12px;
max-width: calc(100% - 24px);
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0;
padding: 5px 9px;
background: var(--bg-alt);
color: var(--fg);
font-size: var(--text-sm);
font-weight: var(--font-weight-strong);
}
.produktpass-card__title {
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
font-size: var(--heading-sm);
line-height: 1.35;
margin: 0 0 6px;
}
.produktpass-card__nutrition {
width: 100%;
margin: 0;
color: var(--fg);
font-size: var(--text-sm);
line-height: 1.5;
border-collapse: collapse;
}
/* Zusatz im Tabellenkopf statt Bildunterschrift */
.produktpass-card__hint {
font-weight: 400;
font-size: var(--text-sm);
color: var(--fg-m);
white-space: nowrap;
}
/* Produktpässe etwas breiter als die übrigen Abschnitte */
@media (min-width: 1200px) {
#produktpaesse .container {
max-width: 1280px !important;
}
}
.produktpass-card__nutrition th,
.produktpass-card__nutrition td {
padding: 5px 8px;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.produktpass-card__nutrition thead {
background: var(--bg-alt);
}
.produktpass-card__nutrition tbody th {
font-weight: 400;
}
.produktpass-card__details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin: 16px 0 0;
padding: 0;
font-size: var(--text-sm);
line-height: 1.6;
color: var(--fg);
}
.produktpass-card__details dt { display: flex; align-items: center; gap: 6px; color: var(--fg-h); }
.produktpass-card__details dd { margin: 0 0 8px; }
.produktpass-card__details dd:last-child { margin-bottom: 0; }
.produktpass-card__note {
margin: 14px 0 0;
padding-top: 8px;
border-top: 1px solid var(--line);
font-size: var(--text-sm);
line-height: 1.6;
}
.produktpass-grid > :last-child .produktpass-card { margin-bottom: 0; }
@media (max-width: 767px) {
.produktpass-card { grid-template-columns: minmax(0, 1fr); }
.produktpass-card__visual { min-height: 0; aspect-ratio: 1 / 1; }
.produktpass-card__content { padding: 20px; border-top: 1px solid var(--line); }
.produktpass-card__intro { margin-bottom: 18px; }
.produktpass-card__title { overflow-wrap: anywhere; }
.produktpass-card__nutrition th,
.produktpass-card__nutrition td { padding: 5px 4px; }
}
.produktpass-card__icon { flex: 0 0 16px; vertical-align: middle; }
/* Bio-Zertifikat und Indeed-Hinweis */
.bio-badge-card-facts {
margin-top: 8px;
font-size: var(--text-sm);
line-height: 1.6;
}
.indeed-card {
border-left-color: #2557a7;
}
/* Feedback-Formular: Auswahl Lob / Kritik / Anregung */
.weekday-option input[type="radio"] {
width: 18px;
height: 18px;
flex: 0 0 auto;
appearance: auto;
accent-color: var(--accent);
border: 0 !important;
background: transparent;
box-shadow: none;
padding: 0;
margin: 0;
}
.weekday-option input[type="radio"]::before {
content: none;
}
.butn-dark.social-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* ======================================================================
Gemeinsame Komponenten: Raster, Flächen, Karten, Buttons, Bedienelemente (gleich für beide Seiten)
====================================================================== */
/* Raster: Überschriften, Texte und Karten liegen auf derselben Linie */
.row > .row {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 768px) {
/* Karten-Reihen mit randlosen Spalten (.p-0) um den Spaltenabstand einrücken */
section .row:has(> .p-0) {
margin-left: calc(var(--bs-gutter-x) * 0.5);
margin-right: calc(var(--bs-gutter-x) * 0.5);
}
/* Kartenbilder füllen die volle Kartenhöhe */
section .row:has(> .bg-darkgray) > .p-0:not(.bg-darkgray) > .img,
section .row:has(> .bg-darkgray) > .p-0:not(.bg-darkgray) > .img > a {
display: block;
height: 100%;
}
section .row:has(> .bg-darkgray) > .p-0:not(.bg-darkgray) > .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* Einblenden beim Scrollen: ein dezenter Effekt für alle Elemente; Karten erscheinen als Ganzes inkl. Schatten */
.animate-box {
opacity: 1;
}
.js .animate-box {
opacity: 0;
}
.js .animate-box.is-visible {
opacity: 1;
animation: reveal 0.6s ease-out;
}
@keyframes reveal {
from {
opacity: 0;
translate: 0 16px;
}
to {
opacity: 1;
translate: 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
.js .animate-box {
opacity: 1;
}
.js .animate-box.is-visible {
animation: none;
}
}
/* Flächen: abgesetzte Sections und Karten darauf */
.bg-blck {
background-color: var(--bg-alt);
}
.bg-darkgray,
.booking-box,
.dge-badge-card,
.junior-news-card,
.junior-quicklink,
.download-list__item {
background-color: var(--surface);
}
.service-card,
.booking-box,
.dge-badge-card,
.accordion-box .block,
.stellenanzeigen a,
.junior-news-card,
.junior-quicklink,
.download-list__item,
.produktpass-card,
section .row:has(> .bg-darkgray) {
box-shadow: var(--shadow);
}
/* Formularfelder: Eingabe, Auswahl, Textbereich, Auswahlkacheln */
input:not([type="checkbox"]),
select,
textarea,
.form-control {
color: var(--field-fg);
background-color: var(--field-bg);
border: 1px solid var(--field-line) !important;
border-radius: 0;
color-scheme: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Keine Feld-Optik für Buttons und Sonderfelder */
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="radio"],
input[type="hidden"],
input[type="file"] {
border: 0 !important;
box-shadow: none;
}
input[placeholder],
textarea[placeholder] {
color: var(--field-fg) !important;
}
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
color: var(--field-placeholder) !important;
opacity: 1;
}
select:hover,
textarea:hover {
border-color: var(--field-line-hover) !important;
}
select:focus,
textarea:focus,
.form-control:focus {
outline: none;
color: var(--field-fg);
background-color: var(--field-bg);
border-color: var(--accent) !important;
box-shadow: var(--field-focus-ring);
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.form-control.is-invalid,
input.is-invalid:hover,
input.is-invalid:focus,
select.is-invalid:hover,
select.is-invalid:focus,
textarea.is-invalid:hover,
textarea.is-invalid:focus {
border-color: #dc3545 !important;
}
/* Auswahlpfeil im dunklen Design hell */
[data-theme="dark"] select.form-control {
/* dark mode: light arrow on dark input bg */
background-image: url("data:image/svg+xml;utf8,");
}
input[type="checkbox"] {
border-color: var(--field-line-hover);
background-color: var(--field-bg);
}
.weekday-option,
.order-mode-button {
background-color: var(--field-bg);
border-color: var(--field-line);
}
.weekday-option:hover,
.order-mode-button:not(.is-active):hover,
.order-mode-button:not(.is-active):focus {
background-color: var(--field-bg);
border-color: var(--accent);
}
/* Ausgewählte Bestellart bleibt in jedem Zustand erkennbar */
.order-mode-button.is-active,
.order-mode-button.is-active:hover,
.order-mode-button.is-active:focus {
background: var(--btn-primary-bg);
border-color: var(--btn-primary-bg);
color: var(--btn-primary-fg);
}
.weekday-option input[type="checkbox"]:checked + span,
.weekday-option input[type="radio"]:checked + span {
color: var(--fg-h);
}
/* Buttons: Primär (Gold), Tabs (Fläche), Formular-Absenden */
input[type="submit"] {
font-weight: 400;
font-family: var(--btn-font-family);
--font-weight-strong: 400;
text-transform: uppercase;
background: var(--btn-primary-bg);
color: var(--btn-primary-fg);
padding: var(--btn-padding);
margin: 0;
position: relative;
font-size: var(--btn-font-size);
letter-spacing: var(--btn-letter-spacing);
border-radius: var(--btn-radius)
}
.btn-form1-submit {
display: block;
padding: 0;
border: none;
margin: 0;
width: 100%;
text-align: center;
background: var(--btn-primary-bg);
color: var(--btn-primary-fg);
font-family: var(--btn-font-family);
--font-weight-strong: 400;
font-size: var(--btn-font-size);
text-decoration: none;
line-height: 62px;
position: relative;
cursor: pointer;
transition: all 0.3s ease-out;
letter-spacing: 1px;
text-transform: uppercase
}
.btn-form1-submit:hover {
background: var(--btn-primary-hover-bg);
color: var(--btn-primary-hover-fg);
border: none;
box-shadow: none
}
.btn-form1-submit:focus {
outline: none;
border: none;
box-shadow: none
}
.btn-subnav {
display: block;
padding: 0;
border: none;
margin: 0;
width: 100%;
text-align: center;
background: var(--btn-secondary-bg);
color: var(--btn-secondary-fg);
font-family: var(--btn-font-family);
--font-weight-strong: 400;
font-size: var(--btn-font-size);
text-decoration: none;
line-height: 62px;
position: relative;
cursor: pointer;
transition: all 0.3s ease-out;
letter-spacing: 1px;
text-transform: uppercase
}
.btn-subnav:hover {
background: var(--btn-secondary-hover-bg);
color: var(--btn-secondary-fg);
border: none;
box-shadow: none
}
.btn-subnav:focus {
outline: none;
border: none;
box-shadow: none
}
.btn-form1-submit:after {
content: '';
display: block;
width: 1px;
height: 100%;
position: absolute;
left: 100%;
top: 0;
background: inherit
}
.butn-dark {
position: relative;
display: inline-block;
line-height: 1.2em
}
.butn-dark a {
display: inline-block;
overflow: hidden;
font-weight: 400;
font-family: var(--btn-font-family);
--font-weight-strong: 400;
text-transform: uppercase;
background: var(--btn-primary-bg);
color: var(--btn-primary-fg);
padding: var(--btn-padding);
margin: 0;
position: relative;
font-size: var(--btn-font-size);
letter-spacing: var(--btn-letter-spacing);
border-radius: var(--btn-radius)
}
.butn-dark a:after {
content: '';
width: 0;
height: 100%;
position: absolute;
bottom: 0;
left: 100%;
z-index: 1;
background: var(--btn-primary-hover-bg);
transition: all var(--btn-transition)
}
.butn-dark a span, .butn-dark a i {
position: relative;
z-index: 2
}
.butn-dark a:hover:after {
width: 100%;
left: 0;
transition: width 0.3s ease
}
.butn-dark a:hover span, .butn-dark a:hover i {
color: var(--btn-primary-hover-fg)
}
input[type=submit] {
height: 58px;
border: none;
color: var(--btn-primary-fg);
font-weight: var(--font-weight-strong)
}
button[type=submit] {
font-weight: 400;
font-family: var(--btn-font-family);
--font-weight-strong: 400;
text-transform: uppercase;
background: var(--btn-primary-bg);
color: var(--btn-primary-fg);
padding: var(--btn-padding);
margin: 0;
position: relative;
overflow: hidden;
font-size: var(--btn-font-size);
letter-spacing: var(--btn-letter-spacing);
border-radius: var(--btn-radius)
}
button[type=submit] span {
position: relative;
z-index: 2;
color: inherit
}
button[type=submit]:after {
content: '';
width: 0;
height: 100%;
position: absolute;
bottom: 0;
left: 100%;
z-index: 1;
background: var(--btn-primary-hover-bg);
transition: all var(--btn-transition)
}
button[type=submit]:hover {
color: var(--btn-primary-hover-fg)
}
button[type=submit]:hover:after {
width: 100%;
left: 0;
transition: width var(--btn-transition)
}
button[type=submit]:focus-visible,
.butn-dark a:focus-visible,
.btn-form1-submit:focus-visible,
.btn-subnav:focus-visible,
.order-mode-button:focus-visible {
outline: none;
box-shadow: var(--btn-focus-ring)
}
button[type=submit].loading {
opacity: 0.7;
pointer-events: none
}
/* Button-Variante Fläche: wie butn-dark, Grundfarbe aus den Tab-Tokens, Hover-Wisch in Gold */
.butn-secondary a {
color: var(--btn-secondary-fg);
background: var(--btn-secondary-bg);
}
/* Bedienelemente: Farbumschalter und Menü-Button (eckige Symbol-Buttons) */
.theme-toggle {
position: fixed;
top: 16px;
right: 16px;
z-index: 9999;
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 0;
background: var(--control-bg);
box-shadow: var(--control-shadow);
color: var(--control-fg);
cursor: pointer;
transition: color 0.2s ease;
}
.theme-toggle:hover {
color: var(--accent);
}
.theme-toggle:focus-visible,
.nav-toggle:focus-visible {
outline: none;
box-shadow: var(--control-shadow), var(--btn-focus-ring);
}
.theme-toggle .thumb {
position: relative;
display: grid;
place-items: center;
width: 20px;
height: 20px;
}
.theme-toggle svg {
position: absolute;
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
transition: opacity 0.25s ease, transform 0.3s ease;
}
.theme-toggle .moon {
fill: currentColor;
stroke: none;
opacity: 0;
transform: rotate(-90deg) scale(0.6);
}
.theme-toggle[aria-checked="true"] .sun {
opacity: 0;
transform: rotate(90deg) scale(0.6);
}
.theme-toggle[aria-checked="true"] .moon {
opacity: 1;
transform: none;
}
/* Beim Wechsel zwischen Mobil- und Desktop-Breite springt die Seitenleiste ohne Animation um */
.nav-breakpoint #aside,
.nav-breakpoint #main {
transition: none !important;
}
/* Mobile Kopfleiste: Logo links, Farbumschalter und Menü-Button rechts */
.mobile-bar,
.nav-toggle {
display: none;
transition: none;
}
@media screen and (max-width: 1200px) {
html {
scroll-padding-top: 64px;
}
#main {
padding-top: 64px;
}
.mobile-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 998;
display: flex;
align-items: center;
height: 64px;
padding: 0 12px;
background: var(--brand);
box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.mobile-bar .mobile-logo {
display: block;
line-height: 0;
}
.mobile-bar .mobile-logo img {
width: auto;
height: 48px;
}
.nav-toggle,
.nav-toggle:hover {
left: auto;
right: 12px;
top: 12px;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 0;
}
.nav-toggle,
.theme-toggle {
color: #fff;
background: rgba(0,0,0,0.22);
box-shadow: none;
}
.nav-toggle:hover,
.theme-toggle:hover {
color: #fff;
background: rgba(0,0,0,0.36);
}
.nav-toggle:focus-visible,
.theme-toggle:focus-visible {
box-shadow: var(--btn-focus-ring);
}
.nav-toggle i,
.nav-toggle i::before,
.nav-toggle i::after,
.nav-toggle.active i::before,
.nav-toggle.active i::after {
background: #fff;
}
.nav-toggle i {
top: 0;
}
.nav-toggle.active i {
background: transparent;
}
.nav-toggle i::before,
.nav-toggle:hover i::before {
top: -6px;
}
.nav-toggle i::after,
.nav-toggle:hover i::after {
bottom: -6px;
}
.nav-toggle.active i::before,
.nav-toggle.active i::after {
top: 0;
bottom: 0;
}
body.offcanvason .nav-toggle {
top: 12px;
}
/* Geöffnetes Menü liegt unter der Kopfleiste; das große Logo steht schon in der Leiste */
#aside {
top: 64px;
padding-top: 24px;
}
body.offcanvason #aside {
z-index: 997;
}
#aside .logo {
display: none;
}
.theme-toggle {
top: 12px;
right: 58px;
}
}
@media (prefers-reduced-motion: reduce) {
.theme-toggle .thumb,
.theme-toggle svg {
transition: none;
}
}
/* Lesbarkeit von Akzent-Überschriften auf dunklen Karten */
[data-theme="dark"] .dge-badge-card-title {
color: var(--accent);
}
/* Einfarbig dunkle Stadtwappen (Essen) im dunklen Design aufhellen */
[data-theme="dark"] .service-card__crest--dark {
filter: grayscale(1) brightness(2.6);
}
@media (min-width: 768px) and (max-width: 1199px) {
/* Schmale Button-Spalten in Karten (z. B. Buffet-Download) */
}
/* Startseiten-Hero: Headline links vertikal zentriert, Aktuelles rechts angedockt, Bereichs-Tabs an der Unterkante */
/* Höhe folgt dem Inhalt (mindestens Bildschirmhöhe); die Slideshow setzt sonst eine feste Höhe und schneidet ab */
#kenburnsSliderContainer.hero {
height: auto !important;
min-height: 100vh;
}
.hero .vegas-wrapper {
position: relative;
width: 100%;
overflow: visible;
padding: 0 !important;
}
.hero-inner {
position: relative;
z-index: 15;
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(390px, 36%, 460px);
grid-template-rows: 1fr auto;
width: 100%;
min-height: 100vh;
container-type: inline-size;
}
/* Gemeinsamer Randabstand für Headline und Tabs; auf breiten Bildschirmen wie der Seiten-Container */
.hero-body {
--hero-pad: max(clamp(20px, 5cqw, 72px), calc((100cqw - 1296px) / 2));
}
.hero-body {
grid-column: 1;
grid-row: 1;
align-self: center;
padding: 96px 48px 72px var(--hero-pad);
}
.hero-main {
max-width: 640px;
container-type: inline-size;
}
/* Theme-Größe der H1; wird nur kleiner, wenn die Spalte neben Aktuelles dafür zu schmal ist */
.hero-main h1 {
font-size: min(clamp(2rem, 4vw + 1rem, 4.5rem), 12cqi);
overflow-wrap: normal;
word-break: keep-all;
hyphens: none;
}
.hero-main .hero-lead {
max-width: 520px;
margin: 0 0 32px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hero-news-close:focus-visible {
outline: none;
box-shadow: var(--btn-focus-ring);
}
/* Aktuelles: am rechten Rand angedockt, vertikal zentriert; Farben aus dem Seiten-Design (hell/dunkel) */
.hero-news {
grid-column: 2;
grid-row: 1;
align-self: center;
display: grid;
grid-auto-rows: 1fr;
grid-template-rows: auto;
/* Rechts gleicher Abstand wie der Farbumschalter */
margin: 96px 16px 72px 0;
background: var(--surface);
box-shadow: var(--shadow);
}
.hero-news[hidden],
.hero-news-item[hidden] {
display: none;
}
.hero .hero-news .hero-news-title {
margin: 0;
padding: 18px 20px 12px;
line-height: 1;
color: var(--accent);
}
.hero-news-item {
position: relative;
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 16px;
align-items: center;
padding: 14px 44px 14px 20px;
border-top: 1px solid var(--line);
}
.hero-news-img {
width: 64px;
height: 64px;
object-fit: cover;
}
.hero .hero-news-text h3 {
margin: 0 0 4px;
font-size: var(--text-md);
line-height: 1.3;
letter-spacing: 0;
color: var(--fg-h);
}
.hero-news-text p {
margin: 0;
font-size: var(--text-sm);
line-height: 1.5;
color: var(--fg);
hyphens: none;
}
.hero-news-text a {
color: var(--fg-h);
text-decoration: underline;
text-decoration-color: var(--accent);
text-underline-offset: 3px;
}
.hero-news-text a:hover {
color: var(--accent);
}
.hero-news-close {
position: absolute;
top: 10px;
right: 10px;
width: 26px;
height: 26px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.hero-news-close::before,
.hero-news-close::after {
content: '';
position: absolute;
top: 50%;
left: 7px;
width: 12px;
height: 1px;
background: var(--fg-m);
transition: background-color 0.2s ease;
}
.hero-news-close::before {
transform: rotate(45deg);
}
.hero-news-close::after {
transform: rotate(-45deg);
}
.hero-news-close:hover::before,
.hero-news-close:hover::after {
background: var(--accent);
}
/* Bereichs-Tabs: Leiste über die volle Breite, Tabs auf Containerbreite; nur der aktive Abschnitt ist gefärbt */
.hero-tabs {
grid-column: 1 / -1;
grid-row: 2;
background: var(--btn-secondary-bg);
border-top: 1px solid var(--line);
}
.hero-tabs-list {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
}
.hero-tabs-list > a + a::before {
content: '';
position: absolute;
top: 16px;
bottom: 16px;
left: 0;
width: 1px;
background: var(--line);
}
.hero-tabs .btn-subnav.active {
color: var(--btn-primary-fg);
background: var(--btn-primary-bg);
}
.hero-tabs .btn-subnav.active::before,
.hero-tabs .btn-subnav.active + a::before {
display: none;
}
.hero-tabs .btn-subnav:focus-visible {
box-shadow: inset var(--btn-focus-ring);
}
@media screen and (max-width: 1440px) {
.hero-news-item {
grid-template-columns: 52px minmax(0, 1fr);
gap: 14px;
padding-right: 38px;
}
.hero-news-img {
width: 52px;
height: 52px;
}
}
@media screen and (max-width: 1200px) {
/* Unter der mobilen Kopfleiste: Hero füllt den restlichen Bildschirm */
#kenburnsSliderContainer.hero,
.hero-inner {
min-height: calc(100vh - 64px);
}
.hero-news {
margin-right: 12px;
}
}
@media screen and (max-width: 991px) {
.hero-inner {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 1fr auto auto;
}
.hero-body {
padding: 56px var(--hero-pad) 40px;
}
/* Aktuelles über die volle Breite angedockt, Inhalt auf der Linie der Headline */
.hero-news {
--hero-pad: clamp(20px, 5cqw, 72px);
grid-column: 1;
grid-row: 2;
margin: 0;
box-shadow: none;
}
.hero-news .hero-news-title {
padding-left: var(--hero-pad);
}
.hero-news .hero-news-item {
padding-left: var(--hero-pad);
}
.hero-tabs {
grid-row: 3;
}
/* Tabs als waagerecht wischbare Leiste */
.hero-tabs-list {
grid-auto-columns: max-content;
overflow-x: auto;
scrollbar-width: none;
}
.hero-tabs-list::-webkit-scrollbar {
display: none;
}
.hero-tabs-list > a {
padding: 0 24px;
}
}
@media screen and (max-width: 767px) {
.hero-news .hero-news-item {
padding-top: 12px;
padding-bottom: 12px;
}
}
/* Zitate: alle Folien gleich hoch, damit beim Wechseln nichts springt */
.junior-testimonial-carousel .owl-stage {
display: flex;
align-items: stretch;
}
.junior-testimonial-carousel .owl-item {
float: none;
flex: 0 0 auto;
}
.junior-testimonial-carousel .item {
display: flex;
flex-direction: column;
height: 100%;
}
.junior-testimonial-carousel .item .info {
margin-top: auto;
}
/* Seitenleiste: kompakt bei gleicher Breite */
#aside {
padding: 28px 0 24px;
}
#aside .logo {
margin-bottom: 12px;
}
#aside .logo .logo-img {
width: 128px;
}
#aside .logo a > div {
font-size: 11px;
line-height: 1;
}
#aside .logo .star {
margin-bottom: 0.8em;
}
#aside .main-menu {
margin-bottom: 22px;
}
#aside .main-menu > ul > li > a {
display: block;
padding: 4px 24px;
font-size: var(--text-sm);
line-height: 1.35;
letter-spacing: 0.6px;
}
/* Seitenleiste: Schnellzugriff */
#aside .aside-actions {
display: grid;
gap: 8px;
padding: 0 24px;
}
#aside .aside-action {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
color: #fff;
text-align: left;
text-decoration: none;
background: rgba(0,0,0,0.10);
border: 0;
transition: background-color 0.2s ease;
}
#aside .aside-action:hover,
#aside .aside-action:focus-visible {
color: #fff;
background: rgba(0,0,0,0.20);
outline: none;
}
#aside .aside-action > i,
#aside .aside-action__icon {
display: grid;
flex: 0 0 36px;
place-items: center;
box-sizing: border-box;
width: 36px;
height: 36px;
font-size: 16px;
color: #fff;
background: var(--accent);
}
/* Umriss-Icons: ohne diese Angaben füllt der Browser die Pfade schwarz */
#aside .aside-action__icon {
padding: 7px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#aside .aside-action strong {
display: block;
font-family: 'Montserrat', sans-serif;
--font-weight-strong: 600;
font-size: var(--text-sm);
font-weight: var(--font-weight-strong);
line-height: 1.2;
letter-spacing: 0.4px;
text-transform: uppercase;
}
#aside .aside-action small {
display: block;
margin-top: 2px;
font-size: var(--text-sm);
line-height: 1.3;
color: rgba(255,255,255,0.78);
}
.produktpass-card__label.diet-label--plant {
color: var(--diet-fg);
background: var(--diet-bg);
}
/* Hinweiskasten in Formularen */
.info-box {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
color: var(--fg);
background: var(--accent-soft);
border-left: 3px solid var(--accent);
}
.info-box svg {
flex: 0 0 22px;
margin-top: 2px;
color: var(--accent);
}
/* Hinweis neben einem Eingabefeld: unten bündig, gleiche Höhe wie das Feld */
.field-note {
display: flex;
}
.field-note .info-box {
width: 100%;
height: 100%;
align-items: center;
padding: 10px 14px;
}
.info-box--sm p {
font-size: 13px;
line-height: 1.35;
}
@media (max-width: 767px) {
.field-note {
margin-top: 12px;
}
}