/* <style type="text/css"> */
/* GLOBAL ---------------------
        -------------------------------*/

/* Oswald (variable Schrift, 400+700) selbst gehostet — DSGVO: kein Abruf von fonts.gstatic.com */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/oswald-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/oswald-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* @font-face {
    font-family: 'food';
    src: url('../fonts/food.eot');
    src: url('../fonts/food.eot?#iefix') format('embedded-opentype'),
        url('../fonts/food.woff') format('woff'),
        url('../fonts/food.ttf') format('truetype'),
        url('../fonts/food.svg#food') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class*='icon-']:before {
    display: inline-block;
    font-family: 'food';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-ham:before {
    content: '\0041';
    vertical-align: middle;
} */

@font-face {
    font-family: 'food';
    src: url('../fonts/food.eot');
    src: url('../fonts/food.eot?#iefix') format('embedded-opentype'),
        url('../fonts/food.woff') format('woff'),
        url('../fonts/food.ttf') format('truetype'),
        url('../fonts/food.svg#food') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class*='icon-']:before {
    display: inline-block;
    font-family: 'food';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-hamslice:before {
    content: '\0041';
    vertical-align: middle;
}

/* body {
    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
} */

.fonthero{
    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
}

.text-bold {
    
    font-weight: bold;
}

.text-left {
    text-align: left;
}

.blue-font {
    color: #0275d8;
}

.lightblue-font {
    color: #0099A5;
}

.white-font {
    color: #ffffff;
}

/* Telefonnummer im Kontaktbereich: bleibt weiss, auch als Link */
a.white-font:hover,
a.white-font:focus {
    color: #ffffff;
    text-decoration: underline;
}

.green-font {
    color: #52B25A;
}

.orange-font {
    color: #F57741;
}

.red-font {
    color: #FF504E;
}

.pink-font {
    color: #8F2E79;
}

.yellow-font {
    color: #FFDB00;
}

.grey-font {
    color: rgb(95, 95, 95);
}

.black-font {
    color: #292b2c;
}

.centerme {
    margin-left: auto;
    margin-right: auto;
}

.roundbox {
    font-size: 22px;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 34px;
    margin: 0 10px 0 0;
    padding: 0;
    background-color: #ffffff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border: 2px solid white;
    color: #000000;
}

.giveMeSpace {
    padding: 80px 0;
}

.limit-sides {
    padding: 0 40px;
}

.hide {
    display: none;
}

h1 {
    margin-bottom: 25px;
}

/* COOKIE CONSENT -----------------------
        -------------------------------*/
.cc-floating .cc-message {
    margin-top: 15px;
}


.cc-floating.cc-theme-classic {
    
    border-style: solid;
    border-width: 3px;
    border-color: white;
}

.cc-floating.cc-theme-classic::before {
    content: url(../img/cookieConsent.svg);
    /* background-color: #ffba10; */
   width: 150px;
   height: 150px;
    border-color: black;
    /* border-style: dotted; */
    background-image: url(/../img/cookieConsent.svg);
    background-repeat: no-repeat;
        /* width: 80px;
        height: 80px; */
}


/* NAVIGATION ---------------------
        -------------------------------*/
#home {
    scroll-margin-top: 93px;
}

#menu {
    scroll-margin-top: 93px;
}

#gallery {
    scroll-margin-top: 93px;
}

#about {
    scroll-margin-top: 93px;
}

#contact {
    scroll-margin-top: 93px;
}

.drrounded {
    border-radius: 20px;
    /*  margin-top: 10px;
          margin-right: 10px;
        */
}

.navbar {
    transition: top 0.5s ease;
}

.navbar-hide {
    top: -94px;
}


/* HEADER ---------------------
        -------------------------------*/

#blue-bar {
    height: 15px;
    width: 100%;
    background-color: #0275d8;
}

/* HOME -----------------------
        -------------------------------*/

#home {
    margin-top: 95px;
}

/* HERO -----------------------
        -------------------------------*/

/* Standbild statt Karussell (24.09.2026). Frueher drei Slides, die alle 5
   Sekunden wechselten -- der Bestell-Button lag auf Slide 2 und war damit die
   meiste Zeit gar nicht zu sehen. Jetzt: ein Bild, ein Button.
   Das Foto ist kein CSS-Hintergrund mehr, sondern ein <img> im HTML; nur so
   kann der Browser es bevorzugt laden (fetchpriority). object-fit uebernimmt
   das, was frueher background-size: cover gemacht hat.
   "fixed" ist absichtlich weg: iOS ignoriert es und skaliert das Bild falsch. */
.hero {
    position: relative;
    height: 600px;
    max-height: 72vh;
    min-height: 420px;
    overflow: hidden;
}

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 50%;
}

/* Der Textkasten liegt jetzt auf allen Breiten ueber dem Bild. Vorher war er
   d-none d-md-block -- am Handy also gar nicht da. */
.hero-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 45px;
    padding: 20px 0 24px;
    color: #ffffff;
    text-align: left;
}

.grey-box {
    background: rgba(0, 0, 0, 0.4);
}

.hero-actions {
    margin-bottom: 0;
}


.navbar-toggler {
    margin-top: 19px;
}


.social {
    font-size: 30px;
}

.pb10{
    padding-bottom: 10px
}

/* ABOUT ----------------------
        -------------------------------*/

#about {
    background-color: #091A3C;
}

.aboutus {
    border-radius: 2%;
}



/* MENU --------------------
        -------------------------------*/

/*

*/


/* *,
*:after,
*:before {
    box-sizing: border-box;
} */





.post {
    /* display: flex; */
    text-decoration: none;
    color: inherit;
    /* max-width: 400px; */
    position: relative;
    /* padding: 2rem;
    box-shadow: inset 0 0 0 4px #000, inset -4px -4px 0 6px #CCC;
    background-color: #FFF; */
    cursor: pointer;

    &:before {
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #0275d8;
        transform-origin: 0 bottom 0;
        transform: scaleY(0);
        transition: .4s ease-out;
    }

    &:hover {
        .post-title {
            color: #FFF;
        }

        .post-svg {
            filter: invert(1);
        }
            

        &:before {
            transform: scaleY(1);
        }
    }
}

.post-title {
    position: relative;
    /* font-size: 2rem;
    font-weight: 700;
    line-height: 1.333; */
    transition: .4s ease-out;
}

.post-svg {
    transition: .4s ease-out;
}


.menu-box {
    border: 2px solid #fff;
    background-color: aliceblue;
    height: 100%;
    border-radius: 2%;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

}

.menu-box-icons {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 10px 0 20px;
    fill: #0099A5;
    
}

#menu {
    background: url("../img/download.svg") repeat center center;
    background-color: #2B2C36;
}

.bottom-buffer {
    margin-bottom: 30px;
}

.menu-cat-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #8F2E79;

}

.cat-title-svg {
    position: absolute;
    bottom: 0px;
    height: 40px;
    z-index: 3;
    margin-left: 15px;
}

/*
    .modal-dialog {
        width: 60%;
        margin: 30px auto;
    }
    .ekko-lightbox-container {
        height: auto!important;
    }
    .ekko-lightbox-item.fade:not(.show) {
        position: absolute;
    }

*/
.menu-box p {
    min-height: 72px;
}

#menu .modal-dialog {
    width: 80%;
    max-width: 1800px;
    margin: auto;
    border-radius: 0px;
}

.modal-footer {
    display: none;
}

/* ===== SPEISEKARTE-MODAL – Flyer-Stil (Weiß) ===== */

/* Kategorie-Überschrift wie im Flyer: groß, dünn, blau */
.menu-cat-head {
    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2f66a8;
    text-align: left;
    margin: 20px 0 3px;
}

#menu .modal-content {
    background-color: #ffffff;
    color: #12305f;
    border: none;
    border-radius: 6px;
}

#menu .modal-header {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    align-items: center;
}

#menu .modal-title {
    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #12305f;
    font-size: 1.75rem;
}

#menu .modal-header .close {
    color: #12305f;
    opacity: 0.85;
    text-shadow: none;
    font-size: 2rem;
    font-weight: 300;
}

#menu .modal-header .close:hover {
    opacity: 1;
}

#menu table.table {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #12305f;
    margin-bottom: 1.8rem;
}

#menu table.table tbody tr {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    padding: 5px 0;
}

/* Gerichtname wächst und trägt die Leader-Punkte zum Preis */
#menu table.table td.text-left {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    min-width: 0;
}

#menu .dish-name {
    order: 0;
    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.3;
    white-space: nowrap;
}

/* Punkte in ALLEN Viewports. Name bleibt einzeilig (nowrap); overflow:hidden an
   .dish-line1 schneidet die Punkte ab, wenn kein Platz ist -> nie Umbruch/Unterstrich.
   Auf schmalen Screens die Schrift verkleinern, damit die Namen einzeilig passen. */
@media (max-width: 767px) {
    #menu .dish-name {
        font-size: 1rem;
    }
    #menu table.table td:last-child {
        font-size: 1.05rem;
    }
}

@media (max-width: 430px) {
    #menu .dish-name {
        font-size: 0.9rem;
    }
}

#menu .dish-name .sm-text {
    text-transform: none;
    font-weight: 400;
    color: #6a7488;
}

/* Erste Zeile: Name + Leader-Punkte. Punkte werden abgeschnitten,
   wenn zwischen Name und Preis zu wenig Platz ist (kein Umbruch, keine Stummel) */
#menu .dish-line1 {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    overflow: hidden;
}

#menu .dish-lead {
    flex: 1 0 26px;
    align-self: flex-end;
    margin: 0 8px 6px;
    border-bottom: 2px dotted rgba(0, 0, 0, 0.30);
}

#menu .dish-sub {
    order: 2;
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 2px;
    line-height: 1.25;
}

/* Beschreibung und Icons jeweils in eigener Zeile -> Icons immer darunter */
#menu .dish-desc {
    order: 0;
    flex: 0 0 100%;
}

#menu .dish-tags {
    order: 1;
    flex: 0 0 100%;
    white-space: nowrap;
    margin-top: 3px;
}

#menu .dish-tags i {
    margin-right: 4px;
}

#menu .dish-desc,
#menu .dish-desc .sm-text {
    text-transform: none;
    font-weight: 400;
    font-size: 0.82rem;
    color: #4b586c;
}

#menu table.table td:last-child {
    flex: 0 0 auto;
}

#menu table.table td,
#menu table.table th {
    background: transparent;
    border: none;
    color: #12305f;
    vertical-align: top;
    padding: 6px;
}

/* Artikelnummer */
#menu table.table th[scope="row"] {
    color: #7089ad;
    font-weight: 400;
    font-size: 0.85rem;
    flex: 0 0 34px;
    align-self: flex-start;
    padding-top: 12px;
}

/* Gerichtname */
/* Preis (rechte Spalte) */
#menu table.table td:last-child {
    text-align: right;
    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
    font-weight: 600;
    font-size: 1.18rem;
    white-space: nowrap;
    color: #12305f;
    padding-top: 6px;
}

/* Beschreibung */
#menu .sm-text {
    display: inline-block;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: #4b586c;
    font-size: 0.82rem;
    line-height: 1.2 !important;
    margin-top: 3px;
}

/* Ernährungs-Icons */
#menu .blue-font {
    color: #0275d8;
}

/* Kategorie-Beschreibungen: Orange wie im Flyer (statt Rot) */
#menu .red-font.sm-text {
    color: #d26c4e;
}

/* Kategorie-Beschreibung: fett + linksbündig mit der Überschrift */
#menu .red-font.sm-text {
    font-weight: 700;
}
#menu .cat-desc-row th[scope="row"] {
    display: none;
}
#menu td.red-font {
    padding-left: 0;
}

/* Legende im Flyer-Stil */
.iamlegend {
    margin: 0px 15px;
    padding: 12px 18px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background-color: rgba(0, 0, 0, 0.03);
    height: 100%;
    border-radius: 8px;
    box-shadow: none;
}

#menu .iamlegend h4 {
    color: #2f66a8;
    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
    text-transform: uppercase;
}




/* SPEISEKARTE POP-UP ---------
        -------------------------------*/


.sm-text {
    font-size: 0.7em;
    line-height: 1.0 !important;
}

.top-seller {
    border: 2px solid #0275d8;
    /*background: rgba(2, 117, 216, 0.75);*/
}

th,
td {
    font-weight: normal;
    /*border-bottom: 1px solid #ddd;*/
}
/*
#menu table tbody tr:hover {
    background-color: #0b8585;
    color: #1f2bac;
}
*/
/* GALLERY --------------------
        -------------------------------*/
.ekko-lightbox-nav-overlay {
    position: absolute;
    top: 50%;
    width: 100%;
    font-size: 2em;
}

#galleryrightarrow {
    float: right !important;
    margin-right: 30px !important;
}

.row {
    margin: 15px;
}

.scaleImg {
    width: 100%;
    overflow: hidden;
    height: 200px;
}

.mkspace {
    padding: 15px 0;
}

/* FOOTER ---------------------
        -------------------------------*/

 #footer {
    background-color: #0C0D0E;
    min-height: 70px;
    padding: 25px 0px 15px;
} 
#shapes {
    width:120%;
}

/*
    #footer {
    
    background: url("../img/bg_contact.webp") repeat center center;
    min-height: 420px;
    padding: 25px 0px 15px;
}
*/



#iamyourfather {
    /* position: relative; */
    width: 450px;
    background-color: #c0c2c2;
    margin: 0 auto;
    position: static;
}    

.shapes_row {

        background-color: #535fcf;
        position: absolute;
        left: 0;
        right: 0;
        height: 100px;
        bottom: 0px;
}

#wrappermapper {
    position: relative;
    padding-top: 130px;
}


/* .shapes_col12 {
    
    background-color: #535fcf;
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    bottom: 0px;
    } */



/* #shapescontainer {
    position: absolute;
    background-image: url("../img/shapes_footer.webp");
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0px;
    
} */

#footer a {
    text-decoration: none;
}

.footer-title {
    padding-bottom: 5px;
    text-transform: uppercase;
}

#footertext {
    padding-top: 23px;
}

#footer .roundbox:hover {
    background-color: #091A3C;
    color: white;
    border-color: #ffffff;
}

#footer .card {
    background-color: #0B204A;
}

#footer .card {
    padding: 16px 32px;
}

.cardcredits {
    border: 2px solid #fff;
    background-color: aliceblue;
   /* height: 100%; */
    border-radius: 2%;
    padding: 0px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.framer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.textlimit {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
}

#social-icons {
    display: flex;
    list-style-type: none;
}

.social-space {
    padding-right: 15px;
}

.list-inline,
.list-unstyled {
    list-style: none;
    padding-left: 0;
}

/* CONTACT ---------------------
        -------------------------------*/

#contact {
    background: url("../img/bg_contact.webp") repeat center center;
}

.blue-box {
    background-color: #0275d9;
    min-height: 22px;
    margin-bottom: 8px;
    padding-bottom: 15px;
}

.contact-left {
    margin: auto;
}

#call-us {
    margin: 0px 5px;
    line-height: 25px;
}

.sm-bottom-margin {
    margin-bottom: 30px;
}

.fa-box-wrap {
    position: relative;
    width: 80px
}

#faresizehistory {
    text-shadow: -1px 1px 0 #fff;
}

#faresizemarker {
        text-shadow: 1px 1px 0 #fff;
}

/* GOOGLE API ---------------------
        -------------------------------*/

/* Statische Karte (lokales Bild, kein Drittanbieter-Request) */
#map {
    display: block;
    position: relative;
    height: 100%;
    min-height: 250px;
    margin: 0;
    padding: 0;
    border-radius: 2%;
    overflow: hidden;
}

#map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 2%;
}

#map-route-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

#map-box {
    border-radius: 2%;
}

/* INTRO / SEO-Textbereich ---------------------
        -------------------------------*/

.intro-section {
    padding: 50px 0 20px;
}

.intro-section h1 {
    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
    color: #0275d8;
    margin-bottom: 20px;
}

.intro-lead {
    max-width: 820px;
    margin: 0 auto 14px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.intro-region {
    color: #6c757d;
    font-size: 1rem;
}

/* FAQ ---------------------
        -------------------------------*/

.faq-section {
    padding: 40px 0;
}

.faq-section h2 {
    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
    text-align: center;
    margin-bottom: 30px;
}

.faq-item {
    border-bottom: 1px solid #e3e3e3;
    max-width: 820px;
    margin: 0 auto;
}

.faq-q {
    font-size: 1.15rem;
    color: #0275d8;
    margin: 0;
    padding: 18px 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: color 0.15s ease;
}

.faq-q:hover {
    color: #01549c;
}

.faq-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    position: relative;
    transition: transform 0.25s ease;
}

/* + / – built from two bars so it animates into a minus */
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    background-color: #0275d8;
    border-radius: 2px;
}

.faq-icon::before {
    top: 12px;
    left: 4px;
    right: 4px;
    height: 2px;
}

.faq-icon::after {
    left: 12px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* when open, hide the vertical bar → shows a minus */
.faq-q[aria-expanded="true"] .faq-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-a p {
    margin: 0;
    padding: 0 4px 18px;
    line-height: 1.65;
    color: #444;
}

/* UNTERSEITEN (Party-Service, Gyros Verleih) ---------------------
        -------------------------------*/

.subpage-hero {
    background-color: #0275d8;
    color: #ffffff;
    padding: 60px 20px;
    text-align: center;
}

.subpage-hero h1 {
    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
}

.subpage-section {
    padding: 40px 0;
}

.subpage-icon {
    color: #0275d8;
    width: 60px;
    flex-shrink: 0;
    text-align: center;
}

.subpage-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.subpage-cta {
    background-color: #091a3c;
    color: #ffffff;
    padding: 40px 20px;
    text-align: center;
}


/* BESTELL-BUTTONS -------------------
        -------------------------------*/

/* Gold wie die Bestell-Sektion, damit "bestellen" ueberall gleich aussieht:
   Navigation, Karussell und Sektion. Schrift Navy statt Weiss -- Weiss auf
   diesem Gold erreicht nur Kontrastwert 1,7, Navy liegt bei 6,6. */
.btn-order {
    background-color: #ffba10;
    border-color: #ffba10;
    color: #253673;
}

/* Beim Ueberfahren auf Navy umschlagen - genau wie der Button in der
   goldenen Bestell-Sektion. Weiss auf Navy hat Kontrastwert 11,3. */
.btn-order:hover,
.btn-order:focus,
.btn-order:active,
.btn-order:not(:disabled):not(.disabled):active {
    background-color: #253673;
    border-color: #253673;
    color: #ffffff;
}

/* Bootstrap legt um jeden angeklickten Button einen hellblauen Ring
   (.btn:focus, box-shadow in rgba(2,117,216,.25)). Auf Blau faellt der
   nicht auf, auf Gold schon - er sass als zweiter, hellblauer Umriss um
   den Navy-Rahmen. Hier abgeschaltet. */
.btn-order:focus,
.btn-order.focus,
#order-btn:focus,
#order-btn.focus {
    box-shadow: none;
}

/* Wer mit der Tastatur navigiert, braucht trotzdem zu sehen, wo er steht.
   :focus-visible greift nur bei Tastaturbedienung, nicht beim Mausklick -
   und der Ring ist Navy statt Hellblau. */
.btn-order:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 54, 115, .45);
}

/* Die Bestell-Sektion steht auf Navy - ein navyfarbener Ring waere dort
   unsichtbar. Deshalb hier weiss. */
#order-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .75);
}

/* In der Navigationsleiste bekommt der Bestell-Button einen Navy-Umriss,
   damit er zum Umriss von "Route berechnen" daneben passt. Gleiche Staerke:
   1px, die kommt aus der Bootstrap-Grundklasse .btn. */
#navbarauto .btn-order,
#navbarauto .btn-order:hover,
#navbarauto .btn-order:focus,
#navbarauto .btn-order:active {
    border-color: #253673;
}

/* In der Leiste umschliesst ein <a> den <button>. Die Zeilenumbrueche
   zwischen beiden sind Textknoten, und a:hover unterstreicht sie - das
   ergab den kurzen Strich neben dem Button. Unterstreichung hier aus;
   die Buttons selbst brauchen sie ohnehin nicht. */
.navbar-actions a:hover,
.navbar-actions a:focus {
    text-decoration: none;
}

/* ONLINE-BESTELLEN ------------------
        -------------------------------*/

/* Umgedreht (24.09.2026): frueher goldene Flaeche mit navyfarbener Schrift.
   Das Gold war die groesste kraeftige Flaeche der Seite und hat den Hero
   ueberschrien. Jetzt Navy als Flaeche und Gold als Schrift -- gleiche
   Signalfarbe, ein Bruchteil der Wucht. Gold auf #091A3C hat Kontrastwert
   10,0, der Fliesstext in warmem Hellgold 12,7. */
#orderOnline {
    background-color: #091A3C;
    color: #ffba10;
    padding: 40px;
}

#orderOnline h2 {
    color: #ffba10;
}

#orderOnline p {
    color: #F0DCA6;
}

/* Ruhezustand ist der Umriss, beim Ueberfahren wird der Button gefuellt --
   wie beim Flyer-Button darunter, damit sich beide gleich anfuehlen. */
#order-btn {
    background: rgba(0, 0, 0, 0.0);
    border-radius: 0;
    border: 2px solid #ffba10;
    color: #ffba10;
    font-weight: 600;
}

#order-btn:hover {
    background-color: #ffba10;
    color: #091A3C;
}

/* Unter 768px stehen Text und Button untereinander -- ohne Abstand klebte der
   Button bisher direkt am Absatz. */
@media screen and (max-width: 767px) {

    #orderOnline .col-md-4 {
        margin-top: 18px;
    }

}

/* DOWNLOAD-MENU ---------------------
        -------------------------------*/

#downloadMenu {
    background-color: #0275d8;
    padding: 40px;
}

/* Gleiche Schriftstaerke wie #order-btn in der Bestell-Sektion darueber --
   beide Baender sehen sonst nebeneinander unterschiedlich gewichtet aus. */
#download-btn {
    /*margin: auto;*/
    background: rgba(0, 0, 0, 0.0);
    border-radius: 0;
    border: 2px solid #fff;
    font-weight: 600;
}

#download-btn:hover {
    background-color: #fff;
    color: black;
}

/* MEDIA QUERIES --------------
        -------------------------------*/

@media screen and (max-width: 991px) {
    .top-buffer {
        margin-top: 30px;
    }

    #map {
        height: 250px;
        margin: 0;
        padding: 0;
    }

    .drrounded {
        border-radius: 20px;
        margin-top: 10px;
        margin-right: 10px;
    }
}

@media screen and (max-width: 768px) {

    /*Customize and add 480px????*/
    .bottom-buffer-xs {
        margin-bottom: 30px;
    }

    #faresizemarker {
        font-size: 3em;
    }

    #faresizehistory {
        font-size: 3em;
    }

    #donwnload-btn {
        justify-content: start;
    }

    /*.contact-left {
                height: 400px;
                padding-top: 25px;
                padding-bottom: 25px;
            }*/
}

@media (min-width: 768px) {
    .modal-lg {
        max-width: 1800px;
        width: 90%;
        /* margin: 5% auto; */
    }
}

/* Hero am Handy: Der Textkasten sitzt buendig unten, die Ueberschrift darf
   nicht die halbe Anzeige fuellen, und der Bestell-Button geht ueber die
   ganze Breite -- er ist am Daumen deutlich leichter zu treffen.
   Das Hochformat-Foto (hero-mobile.webp) waehlt das <picture> im HTML aus. */
@media (max-width : 576px) {

    .hero-caption {
        bottom: 0;
        padding: 16px 0 20px;
    }

    .hero-caption .limit-sides {
        padding: 0 20px;
    }

    .hero-caption .h1 {
        font-size: 2rem;
    }

    .hero-caption h4 {
        font-size: 1.1rem;
    }

    .hero-actions .btn {
        display: block;
        width: 100%;
    }

}

@media (max-width: 576px) {
    
    #menu .modal-body {
        padding-left: 0px;
        padding-right: 0px;
    }

    #menu .modal-dialog {
        width: 85%;
        margin: auto;
        border-radius: 0px;
    }
    
}

@media (max-width: 575px) {
    /*  .contact-left {
                height: 400px;
                margin-left: 55px;
            }

IPHONE 12 WIDTH 375px.

            */



    .fa-box-wrap {
        width: 40px;
    }

    #faresizemarker {
        font-size: 30pt;
    }

    #faresizehistory {
        font-size: 30pt;
    }
}

/* </style> */