@font-face {
    font-family: 'MessinaSans-Regular';
    src:  url('../fonts/MessinaSans-Regular.eot');
    src:  url('../fonts/MessinaSans-Regular.eot#iefix') format('embedded-opentype'),
    url('../fonts/MessinaSans-Regular.ttf') format('truetype'),
    url('../fonts/MessinaSans-Regular.woff') format('woff'),
    url('../fonts/MessinaSans-Regular.svg##{$garnett-light-font-family}') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Barlow Condensed SemiBold (SIL OFL) stands in for the CI face DIN Condensed Bold, whose
   web licence the customer did not buy (07/10/2026). Only one cut ships, so the family is
   declared at weight normal - the browser must not synthesise a second bold on top. */
@font-face {
    font-family: 'BarlowCondensed-SemiBold';
    src:  url('../fonts/BarlowCondensed-SemiBold.woff2') format('woff2'),
    url('../fonts/BarlowCondensed-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------- brand tokens
 * Wirtshaus am Giggijoch corporate design: a light page - cream fading into orange -
 * carrying dark red copy. Red is the action colour, cream the colour on top of it.
 * Change the colours here only - every rule below reads them.
 */
:root {
    --gj-cream: #FDECD8;
    --gj-orange: #F7A941;
    --gj-red: #BC181B;
    --gj-dark: #881815;

    --gj-page: linear-gradient(180deg, #FDECD8 0%, #F7A941 100%);
    --gj-text: var(--gj-dark);
    --gj-heading: var(--gj-dark);
    --gj-accent: var(--gj-red);
    --gj-accent-hover: var(--gj-dark);
    --gj-on-accent: #FDECD8;      /* text on a red surface */
    --gj-surface: rgba(255, 255, 255, .55);   /* cards/fields on the gradient */
    --gj-surface-strong: #FFFFFF;
    --gj-border: rgba(136, 24, 21, .25);

    --gj-font-head: 'BarlowCondensed-SemiBold', 'Arial Narrow', sans-serif;
    --gj-font-body: 'MessinaSans-Regular', Helvetica, Arial, sans-serif;
}

/* `fixed` pins the gradient to the viewport. Imprint and privacy run far past one screen;
   without it the cream-to-orange ramp would repeat per screen height and show a hard
   seam at every wrap. */
body {
    background: var(--gj-page);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--gj-text);
}

body * {
    font-family: var(--gj-font-body);
}

header {
    height: 230px;
}

header .logo {
    width: 191px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 45px;
}

h1 {
    font-size: 60px;
    line-height: 66px;
    color: var(--gj-heading);
    font-family: var(--gj-font-head);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 60px;
    margin-top: 60px;
}
h2 {
    font-size: 28px;
    line-height: 33px;
    color: var(--gj-heading);
    font-family: var(--gj-font-head);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 15px;
    margin-top: 60px;
}

h3 {
    font-size: 22px;
    line-height: 33px;
    color: var(--gj-heading);
    font-family: var(--gj-font-head);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 15px;
}

p {
    font-size: 14px;
    line-height: 25px;
    color: var(--gj-text);
    position: relative;
}

/* Links inside the running text of the legal pages. They sit on the orange end of the
   gradient further down, where the red accent alone no longer carries enough contrast -
   hence the dark red plus an underline. */
p a {
    font-size: 14px;
    line-height: 25px;
    color: var(--gj-text);
    position: relative;
    text-decoration: underline;
}

/* Hover keeps the dark red: the accent red reaches only 3.26:1 against the orange end
   of the page gradient. The underline carries the state instead. */
p a:hover,
p a:focus {
    color: var(--gj-text);
    text-decoration-thickness: 2px;
}

/* The error and cancelled pages carry a "back to the booking" button. Only the mobile
   override existed here, so on desktop it rendered as plain underlined text. */
.contentBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gj-on-accent);
    background: var(--gj-accent);
    border-radius: 8px;
    padding: 5px 13px;
    font-family: var(--gj-font-head);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 33px;
    text-decoration: none;
    transition: background-color .25s ease;
}

.contentBtn:hover,
.contentBtn:focus {
    color: var(--gj-on-accent);
    background: var(--gj-accent-hover);
    text-decoration: none;
}

footer {
    position: relative;
    margin: 60px 0;
}

footer .footerContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

footer p {
    color: var(--gj-text);
    font-size: 20px;
    margin-bottom: 0;
    line-height: unset;
}
/* Contrast on the orange end of the gradient (#F7A941, the worst case for the footer):
   --gj-text #881815 gives 4.89:1 and clears AA, so the resting colour stays. The former
   hover on --gj-accent #BC181B only reached 3.26:1 - the hover now keeps the dark red and
   marks itself with an underline instead. The base rule no longer needs !important:
   `footer a` is (0,0,2) and already outweighs Bootstrap's reboot `a` at (0,0,1). */
footer a {
    font-size: 20px;
    color: var(--gj-text);
    margin-left: 0;
    text-decoration: none;
}
footer a:hover {
    color: var(--gj-text);
    text-decoration: underline;
}
.bottomArea {
    display: flex;
    align-items: center;
}
/* The partner marks are white artwork drawn for the dark FALCON page; on the cream
   gradient they would disappear. They keep their own colours and get a red plate to sit
   on, which also gives the ice Q wordmark the light ground it needs. */
.bottomLeft {
    margin-top: 60px;
    background: var(--gj-red);
    border-radius: 8px;
    padding: 16px 28px;
}

.bottomLeft img {
    margin-right: 60px;
    height: 47px;
}
.bottomLeft a:last-of-type img {
    margin-right: 0;
}
.bottomLeft a {
    text-decoration: none;
    font-size: 0;
}

.bottomRight {
    margin-top: 60px;
    margin-left: 120px;
}
/* instagram.png, facebook.png and arrowtop.png are pure white artwork. The chain maps
   white onto --gj-dark (#881815); it replaces the colour wholesale, so nothing inside
   these two rules may rely on a border or background colour of its own. */
.bottomRight .socialMedia img,
#goToTop img {
    filter: invert(37%) sepia(98%) saturate(372%) hue-rotate(308deg) brightness(52%) contrast(197%);
}
.bottomRight .socialMedia a {
    transition: opacity .25s ease;
}
.bottomRight .socialMedia a:hover {
    opacity: .7;
}
.bottomRight .socialMedia img{
    width: 20px;
}

.bottomRight .socialMedia img:first-of-type {
    margin-right: 15px;
}
.bottomRight .privacy a {
    color: var(--gj-text);
    font-size: 10px;
    line-height: 23px;
}
.bottomRight .privacy a:not(:last-child) {
    margin-right: 20px;
}
#goToTop {
    display: none;
}
.mobileBorder {
    display: none;
}
@media screen and (max-width: 1025px) {
    .mobileBorder {
        width: 100%;
        margin: 60px auto 0;
        height: .8px;
        background: var(--gj-border);
        display: block;
    }
    /* The ring lives on the link, the arrow on the image: the recolouring filter above
       would otherwise drag the border along into an unpredictable tint. */
    #goToTop {
        display: inline-block;
        margin: 0 0 40px;
        border: 1px solid var(--gj-border);
        border-radius: 50%;
        line-height: 0;
    }
    #goToTop img {
        display: block;
        border: 0;
        padding: 15px;
        width: 54px;
        height: 54px;
    }
    header .logo {
        width: 201px;
        top: 30px;
    }
    body {
        background: var(--gj-page);
        background-attachment: fixed;
        background-repeat: no-repeat;
        min-height: 100vh;
        margin: 0;
        overflow-x: hidden;
        display:flex;
        flex-direction:column;
        justify-content: space-between;
        padding: 30px;
    }
    body * {
        line-height: 27px;
    }

    h1 {
        font-size: 30px;
        line-height: 36px;
    }
    h2 {
        font-size: 24px;
        line-height: 28px;
        color: var(--gj-heading);
        font-family: var(--gj-font-head);
        margin-bottom: 15px;
        margin-top: 60px;
        word-break: break-word;
    }

    h3 {
        font-size: 20px;
        line-height: 26px;
        color: var(--gj-heading);
        font-family: var(--gj-font-head);
        margin-bottom: 15px;
        word-break: break-word;
    }
    p {
        font-size: 16px;
        line-height: 24px;
    }

    .contentBtn {
        display: table-cell;
    }


    footer {
        position: relative;
        margin: 60px 0;
    }

    footer .footerContent {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .bottomArea {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    .bottomLeft {
        margin-top: 60px;
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
        padding: 28px;
    }

    .bottomLeft img {
        margin-right: 0;
        margin-bottom: 50px;
        height: 47px;
    }

    /* Stacked on the red plate the last logo would push its 50px against the padding. */
    .bottomLeft a:last-of-type img {
        margin-bottom: 0;
    }
    .bottomRight {
        margin-top: 0px;
        margin-left: 0;
    }
    .bottomRight .socialMedia img{
        width: 20px;
    }

    .bottomRight .socialMedia img:first-of-type {
        margin-right: 15px;
    }
    .bottomRight .privacy a {
        color: var(--gj-text);
        font-size: 10px;
        line-height: 23px;
    }
    .bottomRight .privacy a:not(:last-child) {
        margin-right: 20px;
    }

}